Skip to content

Commit 28c6314

Browse files
oltonolton
committed
upd linked-block
1 parent d1ad511 commit 28c6314

File tree

8 files changed

+127
-51
lines changed

8 files changed

+127
-51
lines changed

‎examples/linked-block.html‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
<button onclick="createBlocksCTop()">C Top</button>
2929
<button onclick="createBlocksCBottom()">C Bottom</button>
3030
<button onclick="createBlocksCSide()">C Side</button>
31-
<button onclick="Metro.getPlugin('.linked-block.active-block', 'linked-block')?.destroy()">Destroy</button>
3231
</div>
3332
<div class="app-bar-item-static no-hover ml-auto">
3433
<input type="checkbox" data-role="theme-switcher"/>
@@ -54,6 +53,18 @@
5453
mousePosition.html(`${Metro.globalMousePosition.x}:${Metro.globalMousePosition.y}`)
5554
}, 100)
5655

56+
$("main").hotkey("del", () => {
57+
const activeBlock = $('.linked-block.active-block')
58+
if (activeBlock.length > 0) {
59+
Metro.linkedBlock.destroy(activeBlock)
60+
return
61+
}
62+
const activeConnector = $('.cl-curve.selected-path')
63+
if (activeConnector.length > 0) {
64+
Metro.connector.destroy(activeConnector)
65+
}
66+
})
67+
5768

5869
var blockCount = 0;
5970
var container = $('#container');

‎lib/metro.css‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -66543,7 +66543,7 @@ label:has(input) {
6654366543
align-items: center;
6654466544
justify-content: center;
6654566545
overflow: visible;
66546-
gap: 2px;
66546+
gap: 4px;
6654766547
}
6654866548
.linked-block .north-side,
6654966549
.linked-block .south-side {
@@ -66595,19 +66595,17 @@ label:has(input) {
6659566595
}
6659666596
@media (hover: hover) {
6659766597
.linked-block .add-point-btn:hover {
66598-
background-color: #28a745;
66599-
color: #fff;
66598+
border-color: #28a745;
6660066599
}
6660166600
}
6660266601
@media (hover: none) {
6660366602
.linked-block .add-point-btn:active {
66604-
background-color: #28a745;
66605-
color: #fff;
66603+
border-color: #28a745;
6660666604
}
6660766605
}
6660866606
.linked-block .add-point-btn.connecting {
66609-
background-color: #007bff !important;
66610-
color: #fff;
66607+
border-color: #007bff !important;
66608+
border-radius: 50%;
6661166609
display: block !important;
6661266610
}
6661366611
.linked-block .add-point-btn.add-point-north {

‎lib/metro.css.map‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/metro.js‎

Lines changed: 49 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
╚═╝ ╚═╝╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝
99

1010
* Metro UI v5.1.17 Components Library (https://metroui.org.ua)
11-
* Build: 20.08.2025, 00:44:44
11+
* Build: 23.08.2025, 09:55:13
1212
* Copyright 2012-2025 by Serhii Pimenov
1313
* Licensed under MIT
1414
*/
@@ -11308,7 +11308,7 @@
1130811308
(($7) => {
1130911309
"use strict";
1131011310
globalThis["__version__"] = "5.1.17";
11311-
globalThis["__build_time__"] = "20.08.2025, 00:44:44";
11311+
globalThis["__build_time__"] = "23.08.2025, 09:55:13";
1131211312
const meta_init = $7.meta("metro:init").attr("content");
1131311313
const meta_cloak = $7.meta("metro:cloak").attr("content");
1131411314
const meta_cloak_duration = $7.meta("metro:cloak_duration").attr("content");
@@ -11657,7 +11657,7 @@
1165711657
const normalizeComponentName2 = (name2) => typeof name2 !== "string" ? void 0 : name2.replace(/-/g, "").toLowerCase();
1165811658
const Metro2 = {
1165911659
version: "5.1.17",
11660-
build_time: "20.08.2025, 00:44:44",
11660+
build_time: "23.08.2025, 09:55:13",
1166111661
buildNumber: 0,
1166211662
isTouchable: isTouch3,
1166311663
fullScreenEnabled: document.fullscreenEnabled,
@@ -31562,7 +31562,7 @@
3156231562
};
3156331563
}
3156431564
this._updateConnections();
31565-
return [this, targetInst];
31565+
return null;
3156631566
}
3156731567
const freeSrc = this._findAnyFreePoint();
3156831568
const freeTgt = targetInst._findAnyFreePoint();
@@ -31609,26 +31609,22 @@
3160931609
};
3161031610
}
3161131611
this._updateConnections();
31612-
return [this, targetInst];
31612+
return null;
3161331613
}
3161431614
const srcRect = element2.rect();
3161531615
const tgtRect = target.rect();
3161631616
let sourceSide = null;
3161731617
let targetSide = null;
3161831618
if (srcRect.top + srcRect.height < tgtRect.top) {
31619-
console.log("\u043F\u0435\u0440\u0448\u0438\u0439 \u0431\u043B\u043E\u043A \u0432\u0438\u0449\u0435 \u0434\u0440\u0443\u0433\u043E\u0433\u043E");
3162031619
sourceSide = "north";
3162131620
targetSide = "south";
3162231621
} else if (tgtRect.top + tgtRect.height < srcRect.top) {
31623-
console.log("\u0434\u0440\u0443\u0433\u0438\u0439 \u0431\u043B\u043E\u043A \u0432\u0438\u0449\u0435 \u043F\u0435\u0440\u0448\u043E\u0433\u043E");
3162431622
sourceSide = "south";
3162531623
targetSide = "north";
3162631624
} else if (srcRect.left < tgtRect.left) {
31627-
console.log("\u043F\u0435\u0440\u0448\u0438\u0439 \u0437\u043B\u0456\u0432\u0430 \u0432\u0456\u0434 \u0434\u0440\u0443\u0433\u043E\u0433\u043E");
3162831625
sourceSide = "east";
3162931626
targetSide = "west";
3163031627
} else if (tgtRect.left < srcRect.left) {
31631-
console.log("\u043F\u0435\u0440\u0448\u0438\u0439 \u0441\u043F\u0440\u0430\u0432\u0430 \u0432\u0456\u0434 \u0434\u0440\u0443\u0433\u043E\u0433\u043E");
3163231628
sourceSide = "west";
3163331629
targetSide = "east";
3163431630
}
@@ -31676,7 +31672,7 @@
3167631672
};
3167731673
}
3167831674
this._updateConnections();
31679-
return [this, targetInst];
31675+
return null;
3168031676
},
3168131677
disconnect: function(connectionId) {
3168231678
const connection = this.connections.get(connectionId);
@@ -31759,6 +31755,34 @@
3175931755
$7("body").append(element2);
3176031756
}
3176131757
return Metro2.makePlugin(element2, "linked-block", config);
31758+
},
31759+
destroy: (element2) => {
31760+
const inst = Metro2.getPlugin(element2, "linked-block");
31761+
if (inst) {
31762+
inst.destroy();
31763+
}
31764+
},
31765+
destroyAll: () => {
31766+
$7(".linked-block").each(function() {
31767+
const inst = Metro2.getPlugin(this, "linked-block");
31768+
if (inst) {
31769+
inst.destroy();
31770+
}
31771+
});
31772+
},
31773+
connect: (source, target, options = {}) => {
31774+
const sourceInst = Metro2.getPlugin(source, "linked-block");
31775+
if (sourceInst) {
31776+
return sourceInst.connect(target, options);
31777+
}
31778+
return null;
31779+
},
31780+
disconnect: (connectionId) => {
31781+
const inst = Metro2.getPlugin(connectionId, "linked-block");
31782+
if (inst) {
31783+
return inst.disconnect(connectionId);
31784+
}
31785+
return null;
3176231786
}
3176331787
};
3176431788
})(Metro, Dom);
@@ -31818,6 +31842,7 @@
3181831842
if (!o2.id) {
3181931843
o2.id = `connector-${Hooks.useId(element2[0])}`;
3182031844
}
31845+
element2.id(o2.id);
3182131846
},
3182231847
_createConnection: function() {
3182331848
const o2 = this.options;
@@ -32349,16 +32374,24 @@
3234932374
config.container.append(element2);
3235032375
return Metro2.makePlugin(element2, "connector", config);
3235132376
},
32352-
connect: function(blockA, blockB, options = {}) {
32377+
connect: (blockA, blockB, options = {}) => {
3235332378
const $blockA = $7(blockA);
3235432379
const $blockB = $7(blockB);
32355-
const pointA = $blockA.find(".link-point").first();
32356-
const pointB = $blockB.find(".link-point").first();
32357-
if (pointA.length === 0 || pointB.length === 0) {
32358-
console.warn("Connector: \u043D\u0435 \u0437\u043D\u0430\u0439\u0434\u0435\u043D\u043E \u0442\u043E\u0447\u043E\u043A \u0437'\u0454\u0434\u043D\u0430\u043D\u043D\u044F \u043D\u0430 \u0431\u043B\u043E\u043A\u0430\u0445");
32380+
const block = Metro2.getPlugin($blockA, "linked-block");
32381+
if (!block) {
32382+
console.warn("Connector: hasn't role linked-block");
3235932383
return null;
3236032384
}
32361-
return this.create(pointA, pointB, options);
32385+
block.connect($blockB, options);
32386+
},
32387+
destroy: (shape) => {
32388+
const connector = $7(shape);
32389+
const connectorId = connector.attr("data-conn-id");
32390+
const connectorComponent = Metro2.getPlugin($7(`#${connectorId}`), "connector");
32391+
if (!connectorComponent) {
32392+
console.warn(`Connector with id ${connectorId} not found`);
32393+
}
32394+
connectorComponent.destroy();
3236232395
}
3236332396
};
3236432397
})(Metro, Dom);

‎lib/metro.js.map‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎source/components/linked-block/linked-block.js‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -678,7 +678,7 @@
678678
}
679679

680680
this._updateConnections();
681-
return [this, targetInst];
681+
return null;
682682
}
683683

684684
// 0) Спочатку шукаємо вільні точки на обох блоках
@@ -737,7 +737,7 @@
737737
}
738738

739739
this._updateConnections();
740-
return [this, targetInst];
740+
return null;
741741
}
742742

743743
// Отримуємо геометрію блоків
@@ -754,22 +754,18 @@
754754

755755
if (srcRect.top + srcRect.height < tgtRect.top) {
756756
// перший блок вище другого
757-
console.log("перший блок вище другого");
758757
sourceSide = "north";
759758
targetSide = "south";
760759
} else if (tgtRect.top + tgtRect.height < srcRect.top) {
761760
// другий блок вище першого
762-
console.log("другий блок вище першого");
763761
sourceSide = "south";
764762
targetSide = "north";
765763
} else if (srcRect.left < tgtRect.left) {
766764
// перший зліва від другого
767-
console.log("перший зліва від другого");
768765
sourceSide = "east";
769766
targetSide = "west";
770767
} else if (tgtRect.left < srcRect.left) {
771768
// перший справа від другого (або рівно)
772-
console.log("перший справа від другого");
773769
sourceSide = "west";
774770
targetSide = "east";
775771
}
@@ -829,8 +825,7 @@
829825
}
830826

831827
this._updateConnections();
832-
833-
return [this, targetInst];
828+
return null;
834829
},
835830

836831
disconnect: function (connectionId) {
@@ -945,5 +940,37 @@
945940

946941
return Metro.makePlugin(element, "linked-block", config);
947942
},
943+
944+
destroy: (element) => {
945+
const inst = Metro.getPlugin(element, "linked-block");
946+
if (inst) {
947+
inst.destroy();
948+
}
949+
},
950+
951+
destroyAll: () => {
952+
$(".linked-block").each(function () {
953+
const inst = Metro.getPlugin(this, "linked-block");
954+
if (inst) {
955+
inst.destroy();
956+
}
957+
});
958+
},
959+
960+
connect: (source, target, options = {}) => {
961+
const sourceInst = Metro.getPlugin(source, "linked-block");
962+
if (sourceInst) {
963+
return sourceInst.connect(target, options);
964+
}
965+
return null;
966+
},
967+
968+
disconnect: (connectionId) => {
969+
const inst = Metro.getPlugin(connectionId, "linked-block");
970+
if (inst) {
971+
return inst.disconnect(connectionId);
972+
}
973+
return null;
974+
},
948975
};
949976
})(Metro, Dom);

‎source/components/linked-block/linked-block.less‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
align-items: center;
3939
justify-content: center;
4040
overflow: visible;
41-
gap: 2px;
41+
gap: 4px;
4242
}
4343

4444
.north-side, .south-side {
@@ -96,21 +96,19 @@
9696

9797
@media (hover: hover) {
9898
&:hover {
99-
background-color: #28a745;
100-
color: #fff;
99+
border-color: #28a745;
101100
}
102101
}
103102

104103
@media (hover: none) {
105104
&:active {
106-
background-color: #28a745;
107-
color: #fff;
105+
border-color: #28a745;
108106
}
109107
}
110108

111109
&.connecting {
112-
background-color: #007bff!important;
113-
color: #fff;
110+
border-color: #007bff!important;
111+
border-radius: 50%;
114112
display: block!important;
115113
}
116114

‎source/components/linked-block/linked-connector.js‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,8 @@
6060
if (!o.id) {
6161
o.id = `connector-${Hooks.useId(element[0])}`;
6262
}
63+
64+
element.id(o.id);
6365
},
6466

6567
_createConnection: function () {
@@ -745,20 +747,27 @@
745747
return Metro.makePlugin(element, "connector", config);
746748
},
747749

748-
connect: function (blockA, blockB, options = {}) {
750+
connect: (blockA, blockB, options = {}) => {
749751
const $blockA = $(blockA);
750752
const $blockB = $(blockB);
751753

752-
// Знаходимо найближчі точки з'єднання
753-
const pointA = $blockA.find(".link-point").first();
754-
const pointB = $blockB.find(".link-point").first();
755-
756-
if (pointA.length === 0 || pointB.length === 0) {
757-
console.warn("Connector: не знайдено точок з'єднання на блоках");
754+
const block = Metro.getPlugin($blockA, "linked-block");
755+
if (!block) {
756+
console.warn("Connector: hasn't role linked-block");
758757
return null;
759758
}
760759

761-
return this.create(pointA, pointB, options);
760+
block.connect($blockB, options);
761+
},
762+
763+
destroy: (shape) => {
764+
const connector = $(shape);
765+
const connectorId = connector.attr("data-conn-id");
766+
const connectorComponent = Metro.getPlugin($(`#${connectorId}`), "connector");
767+
if (!connectorComponent) {
768+
console.warn(`Connector with id ${connectorId} not found`);
769+
}
770+
connectorComponent.destroy();
762771
},
763772
};
764773
})(Metro, Dom);

0 commit comments

Comments
 (0)