From dfaadafaf0900b4b1f38ac6a8b68d43c71388310 Mon Sep 17 00:00:00 2001
From: laffra <laffra@gmail.com>
Date: Mon, 27 Nov 2023 19:39:18 +0100
Subject: [PATCH] Use worker.sync for pubsub

---
 examples/custom.py   |   2 +-
 examples/pubsub.py   |   7 +++
 examples/worker.py   |  12 +++++
 examples/worker.toml |   0
 ltk/jquery.py        |   9 +++-
 ltk/logger.py        |  28 ++++++----
 ltk/ltk.css          |  82 ++++++++++-------------------
 ltk/pubsub.py        | 121 +++++++++++++++++++++++++++----------------
 ltk/widgets.py       |  25 +++++++++
 9 files changed, 172 insertions(+), 114 deletions(-)
 create mode 100644 examples/worker.py
 create mode 100644 examples/worker.toml

diff --git a/examples/custom.py b/examples/custom.py
index afb8131..35acde4 100644
--- a/examples/custom.py
+++ b/examples/custom.py
@@ -11,7 +11,7 @@ def __init__(self, src, label):
                 ltk.Image(src).width(196),
                 ltk.Text(label).width("100%").css("text-align", "center")
             )
-            self.element.css("border", "2px solid orange")
+            self.css("border", "2px solid orange")
 
 
     return (
diff --git a/examples/pubsub.py b/examples/pubsub.py
index d0f81c8..cabdbb9 100644
--- a/examples/pubsub.py
+++ b/examples/pubsub.py
@@ -2,6 +2,11 @@
 
 import ltk
 import random
+from polyscript import XWorker
+
+print("launch worker")
+worker = XWorker("/examples/worker.py", config="/examples/worker.toml", type="micropython")
+print("worker", worker)
 
 fan = ltk.Preformatted("")
 
@@ -18,6 +23,7 @@ def publish(event=None):
     ]) 
     ltk.publish(
         "Influencer",   # the sender
+        "Fan",          # the intended receiver
         "message",      # the subscription topic
         message         # the message to send 
     )
@@ -34,6 +40,7 @@ def create():
             ltk.Important("What every fan sees:"),
             ltk.HBox(
                 fan
+                    .attr("id", "fan")
                     .css("border", "1px solid gray")
                     .css("overflow", "hidden")
                     .width(200)
diff --git a/examples/worker.py b/examples/worker.py
new file mode 100644
index 0000000..07250c1
--- /dev/null
+++ b/examples/worker.py
@@ -0,0 +1,12 @@
+import ltk
+from polyscript import xworker # type: ignore
+
+ltk.find("#fan").append("Worker is running...")
+
+subscribe = xworker.sync.subscribe
+publish = xworker.sync.publish
+
+def handle_message(message):
+    ltk.find("#fan").append(message)
+
+subscribe("Worker-Fan", "message", handle_message)
\ No newline at end of file
diff --git a/examples/worker.toml b/examples/worker.toml
new file mode 100644
index 0000000..e69de29
diff --git a/ltk/jquery.py b/ltk/jquery.py
index 14a4572..1a77a7c 100644
--- a/ltk/jquery.py
+++ b/ltk/jquery.py
@@ -123,8 +123,13 @@ def push_state(url):
     window.history.pushState(None, "", url)
 
 
-def inject_script(url):
-    create("<script>").attr("src", url).appendTo(window.document.head)
+def inject_script(url, type=None, worker=None):
+    script = create("<script>").attr("src", url)
+    if type:
+        script.attr("type", type)
+    if worker:
+        script.attr("worker", "")
+    script.appendTo(window.document.head)
 
 
 def inject_css(url):
diff --git a/ltk/logger.py b/ltk/logger.py
index e19a103..7ef82d1 100644
--- a/ltk/logger.py
+++ b/ltk/logger.py
@@ -46,7 +46,7 @@ def resize(self):
 
     def _add_table(self):
         self.selector = ltk.find('#ltk-log-level')
-        self.element.css("opacity", 0)
+        self.opacity(0)
         ltk.VBox(
             ltk.HBox(
                 ltk.Text().text("When"),
@@ -154,8 +154,9 @@ def _check_network(self, message):
             post = "POST:" if "?_=p&" in name else ""
             sender = "Application" if post else "Network"
             receiver = "Network" if post else "Application"
+            io = "POST" if post else "GET"
             if type == "Xmlhttprequest":
-                self.sequence_ui.log(sender, receiver, name, f"{decodedSize}")
+                self.sequence_ui.log(io, sender, receiver, name, f"{decodedSize}")
 
     def _check_events(self, message):
         print(message)
@@ -238,8 +239,8 @@ def __init__(self, sender, receiver, topic, data, index):
     
     def set_index(self, index):
         self.index = index
-        self.css("display", "block")
-        self.set_position()
+        self.display("block")
+        ltk.schedule(self.set_position)
     
     def set_position(self):
         left = min(self.sender.title.position().left, self.receiver.title.position().left)
@@ -249,8 +250,8 @@ def set_position(self):
         height = self.sender.title.height()
         
         self.width(right - left)
-        self.css("left", round(left + width / 2 + 8))
-        self.css("top", round(top + height * 2 + 26 + self.index * 32))
+        self.left(round(left + width / 2 + 8))
+        self.top(round(top + height * 2 + 26 + self.index * 32))
         self.label.css("opacity", 0).width(self.width())
         self.label.animate(ltk.to_js({ "opacity": 1 }), 1500)
         self.dot.set_position()
@@ -265,7 +266,8 @@ def __init__(self, sender, receiver, topic, data, line, reverse):
         self.attr("title", f"{sender.text()} => {receiver.text()} - {topic}: {data}")
         self.reverse = reverse
         if reverse:
-            self.css("left", "").css("right", 0)
+            self.left("").css("right", 0)
+        self.addClass("ltk-arrow ltk-arrow-left" if reverse else "ltk-arrow ltk-arrow-right")
         self.line = line
     
     def get_start(self):
@@ -275,9 +277,9 @@ def get_stop(self):
         return -5 if self.reverse else self.line.width() - 5
 
     def set_position(self):
-        self.css("left", self.get_start())
+        self.left(self.get_start())
         if self.animated:
-            self.css("left", self.get_stop())
+            self.left(self.get_stop())
         else:
             self.animated = True
             self.animate(ltk.to_js({ "left": self.get_stop() }), 1000)
@@ -299,6 +301,9 @@ def __init__(self):
         ltk.observe(self.element, self.changed)
         self.last_width = self.element.width()
         self.on("resize", lambda event, ui: self.resize())
+        self.set_width()
+        
+    def set_width(self):
         self.width(getattr(ltk.local_storage, "log-sequence-width", None) or 300)
 
     def resize(self):
@@ -312,14 +317,15 @@ def changed(self, element=None, force=False):
             for call in self.calls:
                 call.set_position()
 
-    def log(self, sender_name, receiver_name, topic, data):
+    def log(self, type, sender_name, receiver_name, topic, data):
         self.element.width("100%")
         sender = self.get_component(sender_name)
         receiver = self.get_component(receiver_name)
-        call = _Call(sender, receiver, topic, data, len(self.calls))
+        call = _Call(sender, receiver, f"{type}:{topic}", data, len(self.calls))
         self.calls.append(call)
         self.append(call.element)
         self.filter_messages()
+        self.set_width()
         ltk.schedule(lambda: self.changed(force=True), 1.5)
 
     def clear(self):
diff --git a/ltk/ltk.css b/ltk/ltk.css
index 7abfef6..ee59772 100644
--- a/ltk/ltk.css
+++ b/ltk/ltk.css
@@ -8,7 +8,9 @@
     font-size: 14px;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
-
+#pubsub {
+    display: none;
+}
 .ltk-hbox {
     display: flex;
     flex-direction: row;
@@ -16,13 +18,11 @@
     font-size: 14px;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
-
 .ltk-text {
     display: inline-block;
     text-align: left;
     padding: 2px;
 }
-
 .ltk-code {
     border: 1px solid gray;
     width: 100%;
@@ -30,18 +30,15 @@
     white-space: pre; 
     overflow-y: scroll;
 }
-
 .ltk-input {
     border: 1px solid #e1e1e1;
     width: 36px;
     height: 28px;
 }
-
 .ltk-container {
     margin: 0;
     padding: 0;
 }
-
 .ltk-card {
     background-color: white;
     border-radius: 12px;
@@ -49,7 +46,6 @@
     box-shadow: 0 2px 2px 2px #DDD;
     padding: 16px;
 }
-
 .ltk-menubar {
     display: flex;
     flex-direction: row;
@@ -58,17 +54,14 @@
     font-family: Arial, Helvetica, sans-serif;
     font-size: 16px;
 }
-
 .ltk-menulabel {
     padding: 4px 12px;
     border-radius: 4px;
     cursor: pointer;
 }
-
 .ltk-menulabel:hover {
     background-color: #e8ebee;
 }
-
 .ltk-menupopup {
     display: none;
     position: absolute;
@@ -82,21 +75,17 @@
     font-size: 14px;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
-
 .ltk-menupopup-open {
     display: block;
 }
-
 .ltk-menuitem {
     cursor: pointer;
     padding: 2px;
     min-width: 200px;
 }
-
 .ltk-menuitem:hover {
     background-color: #e8ebee;
 }
-
 .ltk-menuitem-icon {
     display: inline-block;
     width: 24px;
@@ -104,7 +93,6 @@
     height: 24px;
     margin-left: 4px;
 }
-
 .ltk-menuitem-label {
     display: inline-block;
     margin-left: 12px;
@@ -113,7 +101,6 @@
     padding: 0;
     height: 24px;
 }
-
 .ltk-menuitem-shortcut {
     display: inline-block;
     width: 58px;
@@ -121,25 +108,21 @@
     height: 24px;
     margin-right: 4px;
 }
-
 .ltk-table {
     border-collapse: collapse;
 }
-
 .ltk-th {
     background-color: rgb(219, 242, 249);
     border: 0 solid lightgray;
     border-bottom-width: 1px;
     padding: 4px 8px;
 }
-
 .ltk-td {
     border: 0 solid lightgray;
     border-bottom-width: 1px;
     padding: 4px 8px;
     vertical-align: top;
 }
-
 .ltk-log-list {
     position: fixed;
     bottom: 3px;
@@ -152,7 +135,6 @@
     border: 0px solid gray;
     border-top-width: 1px;
 }
-
 .ltk-log-header {
     position: fixed;
     background-color: lightgreen;
@@ -160,14 +142,12 @@
     height: 28px;
     z-index: 2;
 }
-
 .ltk-log-header .ltk-text {
     background-color: lightgreen;
     width: 35px;
     font-size: 14px;
     padding: 6px 8px;
 }
-
 .ltk-log-header .ltk-input {
     width: 55px;
     font-size: 14px;
@@ -176,22 +156,18 @@
     border-radius: 2px;
     background-color: white;
 }
-
 .ltk-log-row .ltk-text:nth-child(3) {
     padding-left: 4px;
 }
-
 .ltk-log-buttons {
     margin-top: 2px;
     position: fixed;
     z-index: 1000;
     float: right
 }
-
 .ltk-log::-webkit-scrollbar {
     display: none;
 }
-
 .ltk-log-row {
     width: 100%;
     background-color: rgb(255, 255, 240);
@@ -199,37 +175,30 @@
     border-bottom-width: 1px;
     height: 0;
 }
-
 .ltk-log-row .ltk-text {
     padding: 4px 8px;
     width: 35px;
     font-size: 12px;
 }
-
 .ltk-log-row * {
     height: 12px;
 }
-
 .ltk-log-row .ltk-text:nth-child(2) {
     padding-left: 12px;
 }
-
 .ltk-log-row .ltk-text:nth-child(3) {
     text-wrap: nowrap;
     text-overflow: ellipsis;
     width: calc(100% - 125px);
     height: 14px;
 }
-
 .ltk-log-container.ltk-button, .ltk-log-container.ltk-select {
     margin-left: 6px;
 }
-
 #ltk-log-ui {
     width: 100%;
     overflow: hidden;
 }
-
 #ltk-sequence-ui {
     width: 700px;
     height: 100%;
@@ -241,11 +210,9 @@
     border-right-width: 3px;
     z-index: 2;
 }
-
 #ltk-sequence-ui:hover {
     border-color: gray;
 }
-
 .ltk-sequence-header {
     position: fixed;
     background-color: lightgreen;
@@ -253,17 +220,14 @@
     height: 28px;
     z-index: 2;
 }
-
 .ltk-sequence-header .ltk-text {
     font-size: 14px;
 }
-
 .ltk-sequence-component {
     margin: 40px 20px;
     height: 100%;
     overflow: hidden;
 }
-
 .ltk-sequence-component-title {
     padding: 8px;
     min-width: 80px;
@@ -273,7 +237,6 @@
     margin: 2px auto 0 auto;
     height: 20px;
 }
-
 .ltk-sequence-component-line {
     border: 0px dashed gray;
     border-left-width: 1px;
@@ -281,25 +244,17 @@
     height: 100vh;
     margin: 0 auto;
 }
-
 .ltk-sequence-call {
     position: absolute;
-    border: 0px solid red;
+    border: 0px solid #456;
     border-bottom-width: 2px;
     height: 1px;
 }
-
 .ltk-sequence-dot {
     position: absolute;
-    background-color: pink;
     border: 1px solid black;
-    border-radius: 5px;
-    width: 10px;
-    height: 10px;
-    top: -5px;
-    left: -5px;
+    top: -8px;
 }
-
 .ltk-sequence-when {
     position: absolute;
     top: -6px;
@@ -308,7 +263,6 @@
     text-align: right;
     color: rgb(147, 147, 231);
 }
-
 .ltk-sequence-label {
     position: absolute;
     opacity: 0;
@@ -322,24 +276,42 @@
     overflow-wrap: anywhere;
     top: -19px;
 }
-
 .ltk-vertical-dragger {
     width: 4px;
     background-color: lightgray;
     cursor: ew-resize;
 }
-
 .ltk-vertical-dragger:hover {
     background-color: gray;
 }
-
 .ltk-log-list .ui-resizable-n {
     cursor: ns-resize;
     height: 32px;
     width: calc(100% - 180px);
 }
-
 .ltk-log-list .ui-resizable-e {
     cursor: ew-resize;
     width: 15px;
+}
+.ltk-arrow{
+    display: block;
+    width: 0px;
+    height: 0px;
+    border: 10px solid transparent;
+}
+.ltk-arrow.ltk-arrow-up{
+    border-bottom-color: #456;
+    border-top-width: 0px;
+}
+.ltk-arrow.ltk-arrow-down{
+    border-top-color: #456;
+    border-bottom-width: 0px;
+}
+.ltk-arrow.ltk-arrow-left{
+    border-right-color: #456;
+    border-left-width: 0px;
+}
+.ltk-arrow.ltk-arrow-right{
+    border-left-color: #456;
+    border-right-width: 0px;
 }
\ No newline at end of file
diff --git a/ltk/pubsub.py b/ltk/pubsub.py
index 57817c7..393d13a 100644
--- a/ltk/pubsub.py
+++ b/ltk/pubsub.py
@@ -2,8 +2,8 @@
 
 import json
 import logging
-import pyodide # type: ignore
-from pyscript import window # type: ignore
+import sys
+import time
 
 """
 
@@ -15,7 +15,7 @@
 A receiver registers for events using "subscribe".
 A sender broadcasts events using "publish".
 
-Communication between the main UI and workers is done using the DOM.
+Communication between the main UI and workers is done using the worker sync.
 
 """
 
@@ -37,53 +37,84 @@
 TOPIC_WORKER_RESULT = "worker.result"
 
 _logger = logging.getLogger('root')
-
-
-class _DocumentPubSub():
-    subscribers = []
-
+_log_topics = {
+    "log.info": _logger.info,
+    "log.debug": _logger.debug,
+    "log.error": _logger.error,
+    "log.warning": _logger.warning,
+    "log.critical": _logger.critical,
+}
+
+_name = "pubsub_mpy" if "MicroPython" in sys.version else "pubsub_py"
+
+start = time.time()
+
+class _Message():
+    def __init__(self, sender, receiver, topic, data):
+        self.sender = sender
+        self.receiver = receiver
+        self.topic = topic
+        self.data = data
+
+class _PubSub():
     def __init__(self):
-        self.pubsub = self.get_pubsub()
-        config = window.eval("_={ attributes: true, childList: true, subtree: true };")
-        callback = pyodide.ffi.create_proxy(lambda *args: self._process_queue())
-        observer = window.MutationObserver.new(callback)
-        observer.observe(self.pubsub, config)
-
-    def get_pubsub(self):
-        element = window.document.getElementById("pubsub")
-        if not element:
-            element = window.document.createElement("div")
-            element.id = "pubsub"
-            window.document.body.appendChild(element)
-        return element
-
-    def _process_queue(self):
-        for message in self.pubsub.children:
-            sender, sender_topic, data = json.loads(message.innerText)
-            for subscriber in self.subscribers:
-                self._match(message, sender, sender_topic, data, *subscriber)
-
-    def _match(self, message, sender, sender_topic, data, receiver, receiver_topic, handler):
-        if sender_topic == receiver_topic and sender != receiver:
-            message.remove()
+        self.subscribers = []
+        self.queue = {}
+   
+    def match(self, message, receiver, receiver_topic, handler):
+        if message.topic == receiver_topic and message.sender != receiver:
             try:
-                handler(data)
-                _logger.info(f"[Pubsub] {json.dumps([sender, receiver, sender_topic, data])}")
+                handler(message.data)
+                log = _log_topics.get(message.topic, _logger.info)
+                log(f"[Pubsub] {json.dumps(['handle', message.sender, receiver, message.topic, str(message.data)])}")
             except Exception as e:
-                _logger.error(f"Pubsub could not handle message: {e}")
+                try:
+                    import traceback
+                    traceback.print_exc()
+                except:
+                    print("no traceback", _name)
+                    pass
+                _logger.error(f"Pubsub could not handle message: {e} {message.sender} {receiver} {message.topic} data={message.data}")
+            return True
+
+    def process_queue(self):
+        for key, message in list(self.queue.items()):
+            for subscriber in self.subscribers:
+                if self.match(message, *subscriber):
+                    self.remove_from_queue(key)
+
+    def add_to_queue(self, message):
+        self.queue[f"{_name}-{time.time()}"] = message
+
+    def remove_from_queue(self, key):
+        del self.queue[key]
+
+    def publish(self, sender, receiver, topic, data):
+        self.add_to_queue(_Message(sender, receiver, topic, data))
+        _logger.info(f"[Pubsub] {json.dumps(['publish', sender, receiver, topic, str(data)])}")
+        self.process_queue()
 
     def subscribe(self, name, topic, handler):
-        self.subscribers.append((name, topic, handler))
-        self._process_queue()
- 
-    def publish(self, name, topic, data):
-        message = window.document.createElement("message")
-        message.innerText = json.dumps((name, topic, data))
-        self.pubsub.appendChild(message)
-        self._process_queue()
+        self.subscribers.append([name, topic, handler])
+        self.process_queue()
+
+
+
+try:
+    from polyscript import xworker
+    print("PUBSUB: setup xworker", xworker)
+    subscribe = xworker.sync.subscribe
+    publish = xworker.sync.publish
+except:
+    print("PUBSUB: setup main")
+    _messenger = _PubSub()
 
+    subscribe = _messenger.subscribe
+    publish = _messenger.publish
 
-_messenger = _DocumentPubSub()
+    def register_worker(worker):
+        _workers.append(worker)
+        worker.sync.publish = publish
+        worker.sync.subscribe = subscribe
 
-subscribe = _messenger.subscribe
-publish = _messenger.publish
+    
\ No newline at end of file
diff --git a/ltk/widgets.py b/ltk/widgets.py
index b87923c..0b3bfd2 100644
--- a/ltk/widgets.py
+++ b/ltk/widgets.py
@@ -93,6 +93,30 @@ def __getattr__(self, name):
         except AttributeError as e:
             raise AttributeError(f"Cannot find attribute '{name}' in the LTK widget {self}, nor in its jQuery element")
 
+    def left(self, value=None):
+        return self.css("left", value) if value != None else self.css("left")
+
+    def right(self, value=None):
+        return self.css("right", value) if value != None else self.css("right")
+
+    def top(self, value=None):
+        return self.css("top", value) if value != None else self.css("top")
+
+    def bottom(self, value=None):
+        return self.css("bottom", value) if value != None else self.css("bottom")
+
+    def opacity(self, value=None):
+        return self.css("opacity", value) if value != None else self.css("opacity")
+
+    def display(self, value=None):
+        return self.css("display", value) if value != None else self.css("display")
+
+    def position(self, value=None):
+        return self.css("position", value) if value != None else self.css("position")
+
+    def border(self, value=None):
+        return self.css("border", value) if value != None else self.css("border")
+
 
 class HBox(Widget):
     """ Lays out its child widgets horizontally """
@@ -558,6 +582,7 @@ def __init__(self, icon, label, shortcut, selected, style=DEFAULT_CSS):
 
     def select(self, event):
         _close_all_menus()
+        print("select", self, self.selected)
         self.selected(self)
         event.preventDefault()