upd linked-block

Author: olton

examples/linked-block.html

@@ -22,9 +22,9 @@
         <div class="text-bold ml-2" id="mouse-position">0:0</div>
     </div>
     <div class="app-bar-container gap-2" style="position: absolute; left: 50%; transform: translateX(-50%);">
-        <button onclick="createBlocksZTop()">Z Top</button>
-        <button onclick="createBlocksZBottom()">Z Bottom</button>
-        <button onclick="createBlocksZSide()">Z Side</button>
+        <button onclick="createBlocksSTop()">S Top</button>
+        <button onclick="createBlocksSBottom()">S Bottom</button>
+        <button onclick="createBlocksSSide()">S Side</button>
         <button onclick="createBlocksCTop()">C Top</button>
         <button onclick="createBlocksCBottom()">C Bottom</button>
         <button onclick="createBlocksCSide()">C Side</button>
@@ -34,7 +34,7 @@
     </div>
 </nav>
 
-<main id="container" class="h-100 pos-relative" style="--linked-block-point-color: #ff0000; --linked-block-line-width: 2px"></main>
+<main id="container" class="h-100 pos-relative" style="--linked-block-point-color: #f00;"></main>
 
 <script>
     window.metroLinkedBlockSetup = {
@@ -50,7 +50,7 @@
 
     window.metroConnectorSetup = {
         deleteButton: true,
-        // arrow: true,
+        arrow: "end",
         // lineStyle: "dotted",
         // type: 'zigzag'
     }
@@ -77,14 +77,13 @@
     var blockCount = 0;
     var container = $('#container');
 
-    function createBlocksZTop () {
+    function createBlocksSTop () {
         blockCount++;
         const block1 = Metro.linkedBlock.create({
             content: `Block ${blockCount}`,
             container,
             top: 100,
             left: 100,
-            createConnectionType: "zigzag"
         });
         block1.addPoint("north")
 
@@ -98,11 +97,11 @@
         block2.addPoint("north")
 
         block1.connect(block2, {
-            type: "zigzag"
+            type: "step"
         })
     }
 
-    function createBlocksZBottom () {
+    function createBlocksSBottom () {
         blockCount++;
         const block1 = Metro.linkedBlock.create({
             content: `Block ${blockCount}`,
@@ -122,11 +121,11 @@
         block2.addPoint("south")
 
         block1.connect(block2.element, {
-            type: "zigzag"
+            type: "step"
         })
     }
 
-    function createBlocksZSide () {
+    function createBlocksSSide () {
         blockCount++;
         const block1 = Metro.linkedBlock.create({
             content: `Block ${blockCount}`,
@@ -144,7 +143,7 @@
         });
 
         block1.connect(block2.element, {
-            type: "zigzag"
+            type: "step"
         })
     }
 
@@ -203,8 +202,6 @@
             container,
             top: 300,
             left: 900,
-            canResize: false,
-            canDrag: false,
         });
 
         blockCount++;
@@ -213,9 +210,6 @@
             container,
             top: 350,
             left: 1100,
-            canResize: true,
-            canDrag: true,
-            onePoint: true,
         });
 
         block1.connect(block2.element, {

lib/metro.css

@@ -66458,25 +66458,25 @@ label:has(input) {
 
 /* source/components/linked-block/linked-block.less */
 :root {
-  --linked-block-point-size: 7px;
-  --linked-block-point-color: #b1b1b1;
+  --linked-block-point-size: 5px;
+  --linked-block-link-color: #b1b1b1;
   --linked-block-line-width: 1px;
-  --linked-block-min-width: 100px;
-  --linked-block-min-height: 20px;
   --linked-block-border-radius: 4px;
   --linked-block-points-gap: 4px;
   --linked-block-background: var(--default-background);
   --linked-block-color: #191919;
-  --linked-block-border-color: #b1b1b1;
-  --linked-block-line-color: #b1b1b1;
+  --linked-block-point-color: var(--linked-block-link-color);
+  --linked-block-border-color: var(--linked-block-link-color);
+  --linked-block-line-color: var(--linked-block-link-color);
   --linked-block-border-color-active: #676767;
 }
 .dark-side {
   --linked-block-background: var(--default-background);
   --linked-block-color: #ffffff;
-  --linked-block-border-color: #656a70;
-  --linked-block-line-color: #656a70;
-  --linked-block-point-color: #656a70;
+  --linked-block-link-color: #656a70;
+  --linked-block-border-color: var(--linked-block-link-color);
+  --linked-block-line-color: var(--linked-block-link-color);
+  --linked-block-point-color: var(--linked-block-link-color);
   --linked-block-border-color-active: #ffffff;
 }
 .linked-block {

lib/metro.css.map

@@ -30962,7 +30962,7 @@
       resizeHotkey: null,
       dragHotkey: null,
       connectionType: "curve",
-      // line, curve, zigzag
+      // line, curve, step
       connectionStyle: "solid",
       // solid, dashed, dotted
       onePoint: false,
@@ -31704,15 +31704,16 @@
       pointA: null,
       pointB: null,
       type: "curve",
-      // line, curve, zigzag
+      // line, curve, step
       container: null,
       // контейнер для SVG
       autoUpdate: true,
       // автоматичне оновлення при переміщенні блоків
       id: null,
       // унікальний ID для з'єднання
       deleteButton: false,
-      arrow: false,
+      arrow: "none",
+      // none, end, start, both
       lineStyle: "solid",
       // solid, dashed, dotted
       onConnectorCreate: Metro2.noop,
@@ -31767,10 +31768,7 @@
         this.svgElement = sharedSvg;
         const shape = this._createShape(o2.id, o2.type, sharedSvg);
         const deleteBtn = this._createDeleteButton(sharedSvg, o2.id);
-        if (o2.arrow) {
-          const markerId = this._ensureArrowMarker(sharedSvg);
-          shape.attr("marker-end", `url(#${markerId})`);
-        }
+        this._applyArrows(shape, sharedSvg);
         this._applyLineStyle(shape, o2.lineStyle);
         this.connections.set(o2.id, {
           pointA: o2.pointA,
@@ -31857,46 +31855,52 @@
         }
         return svg;
       },
+      // Маркер-стрілка з вашого SVG, зменшений у 2 рази
       _ensureArrowMarker: (svg) => {
         const ns = "http://www.w3.org/2000/svg";
-        const markerId = "connector-arrow";
+        const markerId = Hooks.useId("connector-arrow");
         let defs = svg.find("defs");
         if (!defs.length) {
           const d4 = document.createElementNS(ns, "defs");
           svg[0].appendChild(d4);
           defs = $7(d4);
         }
-        let marker = defs.find(`#${markerId}`);
+        const marker = defs.find(`#${markerId}`);
         if (!marker.length) {
           const m5 = document.createElementNS(ns, "marker");
           m5.setAttribute("id", markerId);
-          m5.setAttribute("markerWidth", "6");
-          m5.setAttribute("markerHeight", "6");
-          m5.setAttribute("refX", "5");
-          m5.setAttribute("refY", "3");
-          m5.setAttribute("orient", "auto");
-          m5.setAttribute("markerUnits", "strokeWidth");
-          const line1 = document.createElementNS(ns, "line");
-          line1.setAttribute("x1", "1");
-          line1.setAttribute("y1", "1");
-          line1.setAttribute("x2", "5");
-          line1.setAttribute("y2", "3");
-          line1.setAttribute("stroke", "context-stroke");
-          line1.setAttribute("stroke-linecap", "round");
-          const line2 = document.createElementNS(ns, "line");
-          line2.setAttribute("x1", "1");
-          line2.setAttribute("y1", "5");
-          line2.setAttribute("x2", "5");
-          line2.setAttribute("y2", "3");
-          line2.setAttribute("stroke", "context-stroke");
-          line2.setAttribute("stroke-linecap", "round");
-          m5.appendChild(line1);
-          m5.appendChild(line2);
+          m5.setAttribute("markerWidth", "12");
+          m5.setAttribute("markerHeight", "12");
+          m5.setAttribute("viewBox", "0 0 8 8");
+          m5.setAttribute("refX", "6");
+          m5.setAttribute("refY", "4");
+          m5.setAttribute("orient", "auto-start-reverse");
+          m5.setAttribute("markerUnits", "userSpaceOnUse");
+          const path = document.createElementNS(ns, "path");
+          path.setAttribute(
+            "d",
+            "M1,8 c-0.04,0-0.08-0.016-0.11-0.045 c-0.048-0.05-0.055-0.125-0.018-0.185 L3.45,4 L0.87,0.23 c-0.038-0.058-0.03-0.135,0.018-0.185 c0.048-0.05,0.125-0.06,0.185-0.026 L7.4,3.54 c0.046,0.026,0.075,0.076,0.075,0.13 s-0.029,0.103-0.075,0.13 L1.06,7.32 C0.96,7.38,0.93,7.96,1,8z"
+          );
+          path.setAttribute("fill", "var(--linked-block-line-color)");
+          path.setAttribute("stroke", "none");
+          m5.appendChild(path);
           defs[0].appendChild(m5);
-          marker = $7(m5);
         }
         return markerId;
       },
+      _applyArrows: function(shape, svg) {
+        const o2 = this.options;
+        const value = o2.arrow === true ? "end" : o2.arrow || "none";
+        shape.removeAttr("marker-start").removeAttr("marker-end");
+        if (value === "none" || value === false) return;
+        const markerId = this._ensureArrowMarker(svg);
+        if (value === "start" || value === "both") {
+          shape.attr("marker-start", `url(#${markerId})`);
+        }
+        if (value === "end" || value === "both") {
+          shape.attr("marker-end", `url(#${markerId})`);
+        }
+      },
       _createShape: (id, type, svg) => {
         const ns = "http://www.w3.org/2000/svg";
         let el;
@@ -32065,7 +32069,7 @@
         const pathData = `M ${x1} ${y1} C ${cp1x} ${cp1y} ${cp2x} ${cp2y} ${x22} ${y22}`;
         path.attr("d", pathData);
       },
-      _updateZigzag: function(pointA, pointB, shape) {
+      _updateStep: function(pointA, pointB, shape) {
         const point1 = $7(pointA);
         const point2 = $7(pointB);
         const parent1 = point1.parent();
@@ -32256,7 +32260,7 @@
       },
       // Публічні методи
       setType: function(type) {
-        if (["line", "curve", "zigzag"].indexOf(type) === -1) {
+        if (["line", "curve", "step"].indexOf(type) === -1) {
           console.warn("Connector: \u043D\u0435\u0432\u0456\u0434\u043E\u043C\u0438\u0439 \u0442\u0438\u043F \u0437'\u0454\u0434\u043D\u0430\u043D\u043D\u044F:", type);
           return;
         }
@@ -32267,10 +32271,7 @@
         const oldShape = connection?.shape;
         const svg = connection?.svg || this.svgElement || this._getOrCreateSharedSVG(o2.container);
         const newShape = this._createShape(o2.id, type, svg);
-        if (o2.arrow) {
-          const markerId = this._ensureArrowMarker(svg);
-          newShape.attr("marker-end", `url(#${markerId})`);
-        }
+        this._applyArrows(newShape, svg);
         this._applyLineStyle(newShape, o2.lineStyle);
         if (oldShape?.length) {
           oldShape.remove();
@@ -32311,8 +32312,8 @@
           case "curve":
             this._updateCurve(connection.pointA, connection.pointB, connection.shape);
             break;
-          case "zigzag":
-            this._updateZigzag(connection.pointA, connection.pointB, connection.shape);
+          case "step":
+            this._updateStep(connection.pointA, connection.pointB, connection.shape);
             break;
         }
         this._positionDeleteButton(connection);
@@ -32334,13 +32335,30 @@
         this._applyLineStyle(connection.shape, o2.lineStyle);
         this.update();
       },
+      setArrow: function(value) {
+        const map = { true: "end", false: "none" };
+        const v5 = typeof value === "boolean" ? map[String(value)] : String(value || "none").toLowerCase();
+        if (!["none", "start", "end", "both"].includes(v5)) {
+          console.warn("Connector: \u043D\u0435\u0432\u0456\u0434\u043E\u043C\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u043D\u044F \u0434\u043B\u044F arrow:", value);
+          return;
+        }
+        this.options.arrow = v5;
+        const connection = this.connections.get(this.options.id);
+        if (connection?.shape && connection?.svg) {
+          this._applyArrows(connection.shape, connection.svg);
+          this.update();
+        }
+      },
       changeAttribute: function(attr, newValue) {
         if (attr === "data-type") {
           this.setType(newValue);
         }
         if (attr === "data-line-style") {
           this.setLineStyle(newValue);
         }
+        if (attr === "data-arrow") {
+          this.setArrow(newValue);
+        }
       },
       destroy: function() {
         const o2 = this.options;

lib/metro.js

@@ -26,7 +26,7 @@
         addButtons: "north east south west",
         resizeHotkey: null,
         dragHotkey: null,
-        connectionType: "curve", // line, curve, zigzag
+        connectionType: "curve", // line, curve, step
         connectionStyle: "solid", // solid, dashed, dotted
         onePoint: false,
         canDrag: true,

lib/metro.js.map

@@ -1,24 +1,24 @@
 :root {
-    --linked-block-point-size: 7px;
-    --linked-block-point-color: #b1b1b1;
+    --linked-block-point-size: 5px;
+    --linked-block-link-color: #b1b1b1;
     --linked-block-line-width: 1px;
-    --linked-block-min-width: 100px;
-    --linked-block-min-height: 20px;
     --linked-block-border-radius: 4px;
     --linked-block-points-gap: 4px;
     --linked-block-background: var(--default-background);
     --linked-block-color: #191919;
-    --linked-block-border-color: #b1b1b1;
-    --linked-block-line-color: #b1b1b1;
+    --linked-block-point-color: var(--linked-block-link-color);
+    --linked-block-border-color: var(--linked-block-link-color);
+    --linked-block-line-color: var(--linked-block-link-color);
     --linked-block-border-color-active: #676767;
 }
 
 .dark-side {
     --linked-block-background: var(--default-background);
     --linked-block-color: #ffffff;
-    --linked-block-border-color: #656a70;
-    --linked-block-line-color: #656a70;
-    --linked-block-point-color: #656a70;
+    --linked-block-link-color: #656a70;
+    --linked-block-border-color: var(--linked-block-link-color);
+    --linked-block-line-color: var(--linked-block-link-color);
+    --linked-block-point-color: var(--linked-block-link-color);
     --linked-block-border-color-active: #ffffff;
 }