add one svg to linked-blocks

Author: olton

examples/linked-block.html

@@ -107,7 +107,7 @@
         const block2 = Metro.linkedBlock.create({
             content: `Block ${blockCount}`,
             container,
-            top: 200,
+            top: 50,
             left: 1100,
             resizable: true,
         });
@@ -185,7 +185,7 @@
         const block2 = Metro.linkedBlock.create({
             content: `Block ${blockCount}`,
             container,
-            top: 400,
+            top: 350,
             left: 1100,
             resizable: true,
         });

lib/metro.css

@@ -66425,7 +66425,7 @@ label:has(input) {
 :root {
   --linked-block-point-size: 7px;
   --linked-block-point-color: #b1b1b1;
-  --linked-block-line-width: 1px;
+  --linked-block-line-width: 2px;
   --linked-block-min-size: 100px;
   --linked-block-border-radius: 4px;
   --linked-block-background: var(--default-background);
@@ -66450,6 +66450,7 @@ label:has(input) {
   border: 1px solid var(--linked-block-border-color);
   border-radius: var(--linked-block-border-radius);
   user-select: none;
+  z-index: 1;
 }
 .linked-block .north-side,
 .linked-block .east-side,
@@ -66554,14 +66555,7 @@ label:has(input) {
   left: 0;
   width: 100%;
   height: 100%;
-  pointer-events: none;
-  cursor: pointer;
-}
-.connection-line .cl-line,
-.connection-line .cl-curve {
-  transition: stroke 0.2s ease, stroke-width 0.2s ease;
-  stroke-width: 8px;
-  stroke: transparent;
+  z-index: 0;
 }
 .connection-line .cl-line {
   stroke-width: var(--linked-block-line-width);
@@ -66571,31 +66565,15 @@ label:has(input) {
   stroke-width: var(--linked-block-line-width);
   stroke: var(--linked-block-line-color);
 }
-.connector-delete-btn {
-  position: absolute;
-  display: none;
-  width: 24px;
-  height: 24px;
-  border: 1px solid var(--linked-block-border-color);
-  border-radius: 50%;
-  background: var(--linked-block-background);
+.connection-line .cl-line,
+.connection-line .cl-curve {
+  transition: stroke 0.2s ease, stroke-width 0.2s ease;
+  fill: none;
   cursor: pointer;
-  z-index: 1000;
-  padding: 2px;
-  transition: all 0.2s ease;
-}
-.connector-delete-btn:hover {
-  background: #ff6b6b;
-  border-color: #ff5252;
-  transform: scale(1.1);
-}
-.connector-delete-btn svg {
-  width: 100%;
-  height: 100%;
-  fill: var(--linked-block-line-color);
 }
-.connector-delete-btn:hover svg {
-  fill: white;
+.connection-line .cl-line.selected-path,
+.connection-line .cl-curve.selected-path {
+  stroke: #0a87c1;
 }
 
 /* source/components/list/list.less */

lib/metro.css.map

@@ -8,7 +8,7 @@
  ╚═╝     ╚═╝╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝      ╚═════╝ ╚═╝                                                             
 
  * Metro UI v5.1.17 Components Library  (https://metroui.org.ua)
- * Build: 19.08.2025, 09:35:25
+ * Build: 19.08.2025, 11:53:09
  * Copyright 2012-2025 by Serhii Pimenov
  * Licensed under MIT
  */
@@ -11308,7 +11308,7 @@
   (($7) => {
     "use strict";
     globalThis["__version__"] = "5.1.17";
-    globalThis["__build_time__"] = "19.08.2025, 09:35:25";
+    globalThis["__build_time__"] = "19.08.2025, 11:53:09";
     const meta_init = $7.meta("metro:init").attr("content");
     const meta_cloak = $7.meta("metro:cloak").attr("content");
     const meta_cloak_duration = $7.meta("metro:cloak_duration").attr("content");
@@ -11657,7 +11657,7 @@
     const normalizeComponentName2 = (name2) => typeof name2 !== "string" ? void 0 : name2.replace(/-/g, "").toLowerCase();
     const Metro2 = {
       version: "5.1.17",
-      build_time: "19.08.2025, 09:35:25",
+      build_time: "19.08.2025, 11:53:09",
       buildNumber: 0,
       isTouchable: isTouch3,
       fullScreenEnabled: document.fullscreenEnabled,
@@ -31378,7 +31378,8 @@
         this._super(elem, options, ConnectorDefaultConfig, {
           connections: /* @__PURE__ */ new Map(),
           svgElement: null,
-          observers: /* @__PURE__ */ new Map()
+          observers: /* @__PURE__ */ new Map(),
+          deleteButton: null
         });
         return this;
       },
@@ -31409,22 +31410,33 @@
           console.warn("Connector: PointA and PointB are required to create connection");
           return;
         }
-        this.svgElement = this._createSVG(o2.id, o2.type);
-        $7(o2.container).append(this.svgElement);
-        this.update();
+        const sharedSvg = this._getOrCreateSharedSVG(o2.container);
+        this.svgElement = sharedSvg;
+        const shape = this._createShape(o2.id, o2.type, sharedSvg);
         this.connections.set(o2.id, {
           pointA: o2.pointA,
           pointB: o2.pointB,
           type: o2.type,
-          svg: this.svgElement
+          svg: sharedSvg,
+          shape
         });
+        this.update();
       },
       _createEvents: function() {
         const element2 = this.element;
         const o2 = this.options;
+        const self = this;
         if (o2.autoUpdate) {
           this._setupAutoUpdate();
         }
+        $7(document).on("click", ".cl-curve, .cl-line", (e2) => {
+          const target = $7(e2.target);
+          $7(target).toggleClass("selected-path");
+          e2.stopPropagation();
+        });
+        $7(document).on("click", (e2) => {
+          $7(".cl-line, .cl-curve").removeClass("selected-path");
+        });
       },
       _setupAutoUpdate: function() {
         const o2 = this.options;
@@ -31462,42 +31474,75 @@
           setTimeout(() => self.update(), 10);
         });
       },
+      // ... existing code ...
       _createSVG: (id, type) => {
         let svg;
         if (type === "line") {
           svg = $7(`
                     <svg id="${id}" class="connection-line">
-                        <line class="cl-line" 
-                              stroke="var(--linked-block-line-color)" 
-                              stroke-width="var(--linked-block-line-width)"/>
+                        <line class="cl-line"/>
                     </svg>
                 `);
         } else {
           svg = $7(`
                     <svg id="${id}" class="connection-line">
-                        <path class="cl-curve" 
-                              stroke="var(--linked-block-line-color)" 
-                              stroke-width="var(--linked-block-line-width)" 
-                              fill="none"/>
+                        <path class="cl-curve"/>
                     </svg>
                 `);
         }
         return svg;
       },
+      _getOrCreateSharedSVG: (container) => {
+        const $container = $7(container);
+        let svg = $container.children("svg.connection-line").first();
+        if (!svg.length) {
+          if ($container.css("position") === "static") {
+            $container.css("position", "relative");
+          }
+          const ns = "http://www.w3.org/2000/svg";
+          const svgEl = document.createElementNS(ns, "svg");
+          svgEl.setAttribute("xmlns", ns);
+          svgEl.setAttribute("class", "connection-line");
+          svg = $7(svgEl).css({
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            zIndex: 0
+          });
+          $container.append(svg);
+        }
+        return svg;
+      },
+      _createShape: (id, type, svg) => {
+        const ns = "http://www.w3.org/2000/svg";
+        let el;
+        if (type === "line") {
+          el = document.createElementNS(ns, "line");
+          el.setAttribute("class", "cl-line");
+        } else {
+          el = document.createElementNS(ns, "path");
+          el.setAttribute("class", "cl-curve");
+        }
+        el.setAttribute("data-conn-id", id);
+        svg[0].appendChild(el);
+        return $7(el);
+      },
       // Публічні методи
       update: function() {
         const o2 = this.options;
         const connection = this.connections.get(o2.id);
         if (!connection) return;
         switch (o2.type) {
           case "line":
-            this._updateLine(connection.pointA, connection.pointB, connection.svg);
+            this._updateLine(connection.pointA, connection.pointB, connection.shape);
             break;
           case "curve":
-            this._updateCurve(connection.pointA, connection.pointB, connection.svg);
+            this._updateCurve(connection.pointA, connection.pointB, connection.shape);
             break;
           case "zigzag":
-            this._updateZigzag(connection.pointA, connection.pointB, connection.svg);
+            this._updateZigzag(connection.pointA, connection.pointB, connection.shape);
             break;
         }
         this._fireEvent("connector-update", {
@@ -31513,14 +31558,19 @@
         const o2 = this.options;
         const oldType = o2.type;
         o2.type = type;
-        const oldSvg = this.svgElement;
-        this.svgElement = this._createSVG(o2.id, type);
-        oldSvg.replaceWith(this.svgElement);
+        const connection = this.connections.get(o2.id);
+        const oldShape = connection?.shape;
+        const svg = connection?.svg || this.svgElement || this._getOrCreateSharedSVG(o2.container);
+        const newShape = this._createShape(o2.id, type, svg);
+        if (oldShape && oldShape.length) {
+          oldShape.remove();
+        }
         this.connections.set(o2.id, {
-          ...this.connections.get(o2.id),
+          ...connection,
           type,
           old: oldType,
-          svg: this.svgElement
+          svg,
+          shape: newShape
         });
         this.update();
       },
@@ -31540,10 +31590,11 @@
         this.update();
       },
       // Приватні методи оновлення
-      _updateLine: (pointA, pointB, svg) => {
+      _updateLine: (pointA, pointB, shape) => {
         const point1 = $7(pointA);
         const point2 = $7(pointB);
-        const line = svg.find(".cl-line");
+        const line = shape;
+        const svg = line.closest("svg");
         const rect1 = point1.offset();
         const rect2 = point2.offset();
         const svgRect = svg.offset();
@@ -31562,12 +31613,13 @@
           y2: y22
         });
       },
-      _updateCurve: function(pointA, pointB, svg) {
+      _updateCurve: function(pointA, pointB, shape) {
         const point1 = $7(pointA);
         const point2 = $7(pointB);
         const parent1 = point1.parent();
         const parent2 = point2.parent();
-        const path = svg.find(".cl-curve");
+        const path = shape;
+        const svg = path.closest("svg");
         const coords = this._getCoordinates(point1, point2, svg);
         const { x1, y1, x2: x22, y2: y22 } = coords;
         const dx = x22 - x1;
@@ -31623,12 +31675,13 @@
         const pathData = `M ${x1} ${y1} C ${cp1x} ${cp1y} ${cp2x} ${cp2y} ${x22} ${y22}`;
         path.attr("d", pathData);
       },
-      _updateZigzag: function(pointA, pointB, svg) {
+      _updateZigzag: function(pointA, pointB, shape) {
         const point1 = $7(pointA);
         const point2 = $7(pointB);
         const parent1 = point1.parent();
         const parent2 = point2.parent();
-        const path = svg.find(".cl-curve");
+        const path = shape;
+        const svg = path.closest("svg");
         const coords = this._getCoordinates(point1, point2, svg);
         const { x1, y1, x2: x22, y2: y22 } = coords;
         let pathData;
@@ -31793,8 +31846,16 @@
       destroy: function() {
         const o2 = this.options;
         this._cleanupAutoUpdate();
+        const connection = this.connections.get(o2.id);
+        if (connection?.shape) {
+          const svg = connection.svg || this.svgElement;
+          connection.shape.remove();
+          if (svg && svg.find(".cl-line, .cl-curve").length === 0) {
+            svg.remove();
+          }
+        }
         if (this.svgElement) {
-          this.svgElement.remove();
+          this.svgElement = null;
         }
         this.connections.delete(o2.id);
         this._fireEvent("connector-destroy", {