upd linked-blocks

Author: olton

examples/linked-block.html

@@ -8,7 +8,7 @@
 
     <title>Linked Block - Metro UI :: Popular HTML, CSS and JS library</title>
     <style>
-        .linked-block {
+        .linked-block-content {
             display: flex;
             justify-content: center;
             align-items: center;
@@ -20,8 +20,9 @@
     <div class="app-bar-item-static no-hover">
         <div class="text-leader">Linked Block</div>
     </div>
-    <div class="app-bar-container" style="position: absolute; left: 50%; transform: translateX(-50%);">
+    <div class="app-bar-container gap-2" style="position: absolute; left: 50%; transform: translateX(-50%);">
         <button onclick="createBlock()">Create Block</button>
+        <button onclick="addBlock()">Add Block</button>
     </div>
     <div class="app-bar-item-static no-hover ml-auto">
         <input type="checkbox" data-role="theme-switcher"/>
@@ -58,6 +59,10 @@
             type: "curve"
         })
     }
+    
+    function addBlock(){
+        
+    }
 </script>
 </body>
 </html>

lib/metro.css

@@ -66529,6 +66529,10 @@ label:has(input) {
   top: 50%;
   transform: translateY(-50%);
 }
+.linked-block .linked-block-content {
+  position: absolute;
+  inset: 4px;
+}
 .connection-line {
   position: absolute;
   top: 0;

lib/metro.css.map

@@ -30802,8 +30802,8 @@
       },
       onLinkedBlockCreate: Metro2.noop,
       onLinkedBlockDestroy: Metro2.noop,
-      onPointAdd: Metro2.noop,
-      onPointRemove: Metro2.noop,
+      onAddPoint: Metro2.noop,
+      onRemovePoint: Metro2.noop,
       onConnect: Metro2.noop,
       onDisconnect: Metro2.noop,
       onDragStart: Metro2.noop,
@@ -30853,8 +30853,14 @@
         if (o2.minHeight) element2.css("min-height", o2.minHeight);
         if (o2.maxWidth) element2.css("max-width", o2.maxWidth);
         if (o2.maxHeight) element2.css("max-height", o2.maxHeight);
+        const _content = element2.innerHTML;
+        let contentContainer = element2.find(".linked-block-content");
+        if (contentContainer.length === 0) {
+          contentContainer = $7("<div>").addClass("linked-block-content");
+          element2.append(contentContainer);
+        }
+        contentContainer.html(_content || o2.content);
         this._createSides();
-        this._createContent();
         if (o2.showAddButtons) {
           this._createAddButtons();
         }
@@ -30872,50 +30878,6 @@
           element2.append(sideElement);
         });
       },
-      _createContent: function() {
-        const element2 = this.element;
-        const o2 = this.options;
-        let contentContainer = element2.find(".block-content");
-        if (contentContainer.length === 0) {
-          contentContainer = $7("<div>").addClass("block-content").css({
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            pointerEvents: "none",
-            zIndex: 1,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: "calc(100% - 20px)",
-            height: "calc(100% - 20px)",
-            textAlign: "center"
-          });
-          element2.append(contentContainer);
-        }
-        if (o2.content) {
-          contentContainer.html(o2.content);
-        } else if (element2.text().trim() && !element2.find(".side").length) {
-          const existingContent = element2.html();
-          element2.empty();
-          this._createSides();
-          contentContainer = $7("<div>").addClass("block-content").css({
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            pointerEvents: "none",
-            zIndex: 1,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: "calc(100% - 20px)",
-            height: "calc(100% - 20px)",
-            textAlign: "center"
-          }).html(existingContent);
-          element2.append(contentContainer);
-        }
-      },
       _createInitialPoints: function() {
         const o2 = this.options;
         Object.keys(o2.initialPoints).forEach((side) => {
@@ -30956,39 +30918,25 @@
             self.addPoint(side);
           });
         }
-        element2.on("dblclick.linked-block", (e2) => {
-          e2.preventDefault();
-          const rect = element2[0].getBoundingClientRect();
-          const x5 = e2.clientX - rect.left;
-          const y4 = e2.clientY - rect.top;
-          const side = self._getSideFromCoordinates(x5, y4, rect.width, rect.height);
-          self.addPoint(side);
-        });
-        element2.on("contextmenu.linked-block", ".link-point", function(e2) {
-          e2.preventDefault();
-          const pointId = $7(this).attr("id");
-          self.removePoint(pointId);
-        });
       },
       _setupDraggable: function() {
         const element2 = this.element;
         const o2 = this.options;
-        const self = this;
         if (o2.draggable) {
           Metro2.makePlugin(element2, "draggable", {
             onDragStart: () => {
               const { top, left } = element2.rect();
               Metro2.utils.exec(o2.onDragStart, [{ top, left }, element2]);
             },
             onDragMove: () => {
-              self.hoverButtons.forEach((btn) => btn.hide());
-              self._updateConnections();
+              this.hoverButtons.forEach((btn) => btn.hide());
+              this._updateConnections();
               const { top, left } = element2.rect();
               Metro2.utils.exec(o2.onDragMove, [{ top, left }, element2]);
             },
             onDragStop: () => {
-              self.hoverButtons.forEach((btn) => btn.show());
-              self._updateConnections();
+              this.hoverButtons.forEach((btn) => btn.show());
+              this._updateConnections();
               const { top, left } = element2.rect();
               Metro2.utils.exec(o2.onDragStop, [{ top, left }, element2]);
             }
@@ -31041,6 +30989,7 @@
       // Публічні методи
       addPoint: function(side) {
         const element2 = this.element;
+        const o2 = this.options;
         const validSides = ["north", "east", "south", "west"];
         if (validSides.indexOf(side) === -1) {
           console.warn("LinkedBlock: \u043D\u0435\u0432\u0456\u0440\u043D\u0430 \u0441\u0442\u043E\u0440\u043E\u043D\u0430. \u0414\u043E\u0441\u0442\u0443\u043F\u043D\u0456: north, east, south, west");
@@ -31050,7 +30999,8 @@
         const point = $7("<div>").addClass("link-point").attr("id", pointId).attr("data-side", side);
         const sideElement = element2.find(`.${side}-side`);
         sideElement.append(point);
-        this._fireEvent("point-add", {
+        Metro2.utils.exec(o2.onAddPoint, [point[0], side, pointId, element2[0]], element2[0]);
+        this._fireEvent("add-point", {
           element: element2,
           point,
           side,
@@ -31060,14 +31010,16 @@
       },
       removePoint: function(pointId) {
         const element2 = this.element;
+        const o2 = this.options;
         const point = element2.find(`#${pointId}`);
         if (point.length === 0) {
           return false;
         }
         this.disconnectPoint(pointId);
         const side = point.attr("data-side");
+        Metro2.utils.exec(o2.onRemovePoint, [point[0], side, pointId, element2[0]], element2[0]);
         point.remove();
-        this._fireEvent("point-remove", {
+        this._fireEvent("remove-point", {
           element: element2,
           pointId,
           side
@@ -31083,6 +31035,7 @@
       },
       connect: function(targetBlock, options = {}) {
         const element2 = this.element;
+        const o2 = this.options;
         const target = $7(targetBlock);
         if (target.length === 0) {
           console.warn("LinkedBlock: \u0446\u0456\u043B\u044C\u043E\u0432\u0438\u0439 \u0431\u043B\u043E\u043A \u043D\u0435 \u0437\u043D\u0430\u0439\u0434\u0435\u043D\u043E");
@@ -31109,20 +31062,25 @@
             connector,
             options
           });
+          Metro2.utils.exec(
+            o2.onConnect,
+            [target[0], sourcePoint[0], targetPoint[0], connector.element[0]],
+            element2[0]
+          );
           this._fireEvent("connect", {
-            element: element2,
-            target,
-            sourcePoint,
-            targetPoint,
-            connector,
+            element: element2[0],
+            target: target[0],
+            sourcePoint: sourcePoint[0],
+            targetPoint: targetPoint[0],
+            connector: connector.element[0],
             connectionId
           });
           this._updateConnections();
           return {
             id: connectionId,
-            connector,
-            sourcePoint,
-            targetPoint
+            connector: connector.element[0],
+            sourcePoint: sourcePoint[0],
+            targetPoint: targetPoint[0]
           };
         }
         this._updateConnections();
@@ -31160,48 +31118,42 @@
       },
       setContent: function(content) {
         const element2 = this.element;
-        let contentContainer = element2.find(".block-content");
-        if (contentContainer.length === 0) {
-          this._createContent();
-          contentContainer = element2.find(".block-content");
-        }
+        const contentContainer = element2.find(".linked-block-content");
         contentContainer.html(content);
         this.options.content = content;
       },
       getContent: function() {
         const element2 = this.element;
-        const contentContainer = element2.find(".block-content");
+        const contentContainer = element2.find(".linked-block-content");
         return contentContainer.length ? contentContainer.html() : "";
       },
       getConnections: function() {
         return Array.from(this.connections.values());
       },
-      changeAttribute: function(attr, newValue) {
+      changeAttribute: function(attr, val) {
         const o2 = this.options;
-        switch (attr) {
-          case "data-draggable":
-            o2.draggable = Metro2.utils.isValue(newValue);
-            this._setupDraggable();
-            break;
-          case "data-resizable":
-            o2.resizable = Metro2.utils.isValue(newValue);
-            this._setupResizable();
-            break;
-          case "data-content":
-            this.setContent(newValue);
-            break;
-        }
       },
       destroy: function() {
         const element2 = this.element;
+        const o2 = this.options;
         this.disconnectAll();
-        element2.off(".linked-block");
+        element2.off("mouseenter.linked-block");
+        element2.off("mouseleave.linked-block");
+        element2.off("click.linked-block");
         this.hoverButtons.forEach((btn) => btn.remove());
         this.hoverButtons = [];
         this._fireEvent("linked-block-destroy", {
           element: element2
         });
-        return element2;
+        if (o2.draggable) {
+          const draggable = Metro2.getPlugin(element2, "draggable");
+          draggable.destroy();
+        }
+        if (o2.resizable) {
+          const resizable = Metro2.getPlugin(element2, "resizable");
+          resizable.destroy();
+        }
+        element2.remove();
       }
     });
     Metro2.linkedBlock = {