fix: wiring up too many event handlers!

src/invent/ui/core.py

@@ -578,6 +578,10 @@ def __init__(self, **kwargs):
                 property_obj.__set_name__(self, property_name)
         self.element = self.render()
         self.update(**kwargs)
+
+        Component._components_by_id[self.id] = self
+        Component._component_counter += 1
+
         if not self.id:
             self.id = random_id()
         if not self.name:
@@ -594,7 +598,7 @@ def clone(self):
 
         # Set the id here otherwise we don't update the Component by Id map!
         # This assumes you want a destructive clone as part of a move!
-        clone = create_component(type(self).__name__, id=self.id)
+        clone = create_component(type(self).__name__, id=self.id, name=self.name)
 
         for property_name, property_obj in type(self).properties().items():
             value = getattr(self, property_name)
@@ -647,8 +651,8 @@ def _generate_name(cls):
 
         "Button 1"
         """
-        cls._component_counter += 1
-        return f"{cls.__name__} {cls._component_counter}"
+        #cls._component_counter += 1
+        return f"{cls.__name__} {Component._component_counter}"
 
     @classmethod
     def get_component_by_id(cls, component_id):

src/tools/builder/public/css/page-editor.css

@@ -30,6 +30,7 @@
 .drop-zone-active {
     background-color: #ede9fe;
     border-color: #8b5cf6;
+    border-color: rgb(209 213 219);
 }
 
 .drop-zone-active-above {

src/tools/builder/src/python/builder.py

@@ -66,8 +66,9 @@ def get_app_from_dict(self, app_dict):
         This sets created app to be the one that the builder is building.
         """
         app = export.from_dict({"app": json.loads(app_dict)})
-        self._inject_js_event_handlers_into_app(app)
         self._app = app
+        self.pprint_app()
+        self._inject_js_event_handlers_into_app(app)
 
     # Pages ############################################################################
 
@@ -301,29 +302,31 @@ def _inject_js_event_handlers_into_app(self, app):
         a) catch click events so that we can show a component's property sheet.
         b) handle drag and drop events.
         """
-
+        print("_inject_js_event_handlers_into_app", app)
         for page in app.content:
             self._inject_js_event_handlers_into_container(page)
 
     def _inject_js_event_handlers_into_container(self, container):
         """
         Recursively Inject JS event handlers into the specified container.
         """
+        print("_inject_js_event_handlers_into_container", container.name, container.id)
 
         self._inject_js_event_handlers_into_component(container)
 
-        for item in container.content:
-            if isinstance(item, Container):
-                self._inject_js_event_handlers_into_container(item)
-
-            else:
-                self._inject_js_event_handlers_into_component(item)
+        # for item in container.content[:]:
+        #     if isinstance(item, Container):
+        #         self._inject_js_event_handlers_into_container(item)
+        #
+        #     else:
+        #         self._inject_js_event_handlers_into_component(item)
 
     def _inject_js_event_handlers_into_component(self, component):
         """
         Recursively Inject JS event handlers into the specified component.
         """
 
+        print("_inject_js_event_handlers_into_component", component.name, component.id)
         def remove_js_event_handlers():
             print("removing js", component.name, component.id)
             component.element.setAttribute("draggable", "false")
@@ -364,28 +367,32 @@ def on_dragstart(event):
 
         def on_drop(event):
             print("-"*80)
-            print("on_drop:", component.name)
+            print("on_drop: on", component.name)
             event.preventDefault()
             event.stopPropagation()
 
             # Moving or adding? ########################################################
 
             move_data = event.dataTransfer.getData("move")
-            print("on_drop: move_data:", move_data)
+            if move_data:
+                print("on_drop: move_data:", move_data)
+
             if move_data == component.id:
                 return
 
-            if move_data:
+            widget_data = event.dataTransfer.getData("widget")
+            if widget_data:
+                print("on_drop: widget_data:", widget_data)
+                component_blueprint = json.loads(widget_data)
+                component_type_name = component_blueprint["name"]
+                new_component = create_component(component_type_name)
+
+            else:
                 component_to_move = Component.get_component_by_id(move_data)
                 print("MOVING:", component_to_move.name, component_to_move.id, id(component_to_move), component_to_move.parent)
                 self.delete_component(component_to_move.id)
                 new_component = component_to_move.clone()
 
-            else:
-                component_blueprint = json.loads(event.dataTransfer.getData("widget"))
-                component_type_name = component_blueprint["name"]
-                new_component = create_component(component_type_name)
-
             # Dropping on a Widget or a Container? #####################################
             if isinstance(component, Container):
                 container = component
@@ -417,7 +424,6 @@ def on_drop(event):
                     print("Inserting after:", self.mode, insert_after)
                     self.insert_component_after(insert_after, new_component)
 
-
         def on_dragover(event):
             """
             Handle a JS "dragover" event on a component.