Add leader-line so that Tutorial works by default

Author: laffra

index.html

@@ -54,6 +54,9 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/python/python.min.js"></script>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css" >
 
+        <!-- Import for drawing arrows -->
+        <script defer src="leader-line.min.js"></script>
+    
         <!-- Import Styles for the kitchensink demo -->
         <link rel="stylesheet" href="kitchensink.css">
     </head>

kitchensink.py

@@ -61,3 +61,4 @@ def activate_tab(event, ui=None):
 
 def load():
     logger.info("Kitchensink Ready")
+

leader-line.min.js

@@ -124,6 +124,22 @@
         }
     };
 
+    window.addArrow = (from, to, label) => {
+        try {
+            const start = from[0];
+            const end = to[0];
+            if (start && end) {
+                return $(new LeaderLine(start, end, {
+                    dash: { },
+                    size: 3,
+                    middleLabel: LeaderLine.pathLabel(label || "")
+                })).appendTo($("body"));
+            }
+        } catch(e) {
+            // ignore
+        }
+    }
+
     $.fn.isInViewport = function() {
         const offset = $(this).offset();
         if (!offset) return true

ltk/ltk.js

@@ -1467,6 +1467,7 @@ def show(self):
         self.appendTo(find("body"))
         self.css(to_js({
             "visibility": "visible",
+            "position": "absolute",
             "opacity": 1,
             "left": self.widget.offset().left + self.widget.outerWidth() + 100,
             "top": self.widget.offset().top,

ltk/widgets.py

@@ -6,7 +6,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "pyscript-ltk"
-version = "0.2.18"
+version = "0.2.19"
 description = "A little toolkit for writing UIs in PyScript"
 readme = "README.md"
 authors = [{ name = "Chris Laffra", email = "chris@chrislaffra.com" }]