orcasvn-react-diagrams 0.2.7 → 0.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/README.md +7 -12
- package/ai/api-contract.json +16 -0
- package/ai/invariants.json +8 -0
- package/ai/manifest.json +1 -1
- package/dist/cjs/examples.js +604 -39
- package/dist/cjs/index.js +227 -28
- package/dist/cjs/types/api/types.d.ts +2 -0
- package/dist/cjs/types/displaybox/demos/elementVisibilitySelectionDemo.d.ts +4 -0
- package/dist/cjs/types/engine/DiagramEngine.d.ts +8 -0
- package/dist/cjs/types/models/DiagramModel.d.ts +5 -0
- package/dist/cjs/types/models/ElementModel.d.ts +2 -0
- package/dist/esm/examples.js +604 -39
- package/dist/esm/examples.js.map +1 -1
- package/dist/esm/index.js +227 -28
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/api/types.d.ts +2 -0
- package/dist/esm/types/displaybox/demos/elementVisibilitySelectionDemo.d.ts +4 -0
- package/dist/esm/types/engine/DiagramEngine.d.ts +8 -0
- package/dist/esm/types/models/DiagramModel.d.ts +5 -0
- package/dist/esm/types/models/ElementModel.d.ts +2 -0
- package/dist/examples.d.ts +2 -0
- package/dist/index.d.ts +9 -0
- package/docs/API_CONTRACT.md +16 -1
- package/docs/CAPABILITIES.md +1 -0
- package/docs/COMMANDS_EVENTS.md +3 -1
- package/docs/DOCUMENTATION_WORKFLOW.md +3 -1
- package/docs/INTEGRATION_PLAYBOOK.md +1 -0
- package/docs/PORTING_CHECKLIST.md +1 -0
- package/docs/STATE_INVARIANTS.md +9 -1
- package/package.json +1 -1
- package/src/displaybox/demos/AutoLayoutDemoTab.tsx +11 -5
- package/src/displaybox/demos/autoLayoutDemo.ts +233 -0
- package/src/displaybox/demos/basicDemo.ts +6 -6
- package/src/displaybox/demos/elementVisibilitySelectionDemo.ts +128 -0
- package/src/displaybox/demos/index.tsx +14 -7
- package/src/displaybox/demos/selectionDemo.ts +12 -12
package/dist/cjs/index.js
CHANGED
|
@@ -87,6 +87,8 @@ var ElementModel = /** @class */ (function () {
|
|
|
87
87
|
this.style = data.style;
|
|
88
88
|
this.portIds = data.portIds ? __spreadArray([], data.portIds, true) : [];
|
|
89
89
|
this.textIds = data.textIds ? __spreadArray([], data.textIds, true) : [];
|
|
90
|
+
this.visible = data.visible;
|
|
91
|
+
this.selectable = data.selectable;
|
|
90
92
|
this.parentId = (_a = data.parentId) !== null && _a !== void 0 ? _a : null;
|
|
91
93
|
this.moveMode = data.moveMode;
|
|
92
94
|
this.anchorCenter = data.anchorCenter;
|
|
@@ -125,6 +127,8 @@ var ElementModel = /** @class */ (function () {
|
|
|
125
127
|
style: this.style,
|
|
126
128
|
portIds: __spreadArray([], this.portIds, true),
|
|
127
129
|
textIds: __spreadArray([], this.textIds, true),
|
|
130
|
+
visible: this.visible,
|
|
131
|
+
selectable: this.selectable,
|
|
128
132
|
parentId: this.parentId,
|
|
129
133
|
moveMode: this.moveMode,
|
|
130
134
|
anchorCenter: this.anchorCenter,
|
|
@@ -528,6 +532,29 @@ var DiagramModel = /** @class */ (function () {
|
|
|
528
532
|
DiagramModel.prototype.getElement = function (id) {
|
|
529
533
|
return this.elements.get(id);
|
|
530
534
|
};
|
|
535
|
+
DiagramModel.prototype.isElementVisible = function (id) {
|
|
536
|
+
var element = this.elements.get(id);
|
|
537
|
+
if (!element)
|
|
538
|
+
return false;
|
|
539
|
+
if (element.visible === false)
|
|
540
|
+
return false;
|
|
541
|
+
var currentParentId = element.parentId;
|
|
542
|
+
while (currentParentId) {
|
|
543
|
+
var parent_1 = this.elements.get(currentParentId);
|
|
544
|
+
if (!parent_1)
|
|
545
|
+
break;
|
|
546
|
+
if (parent_1.visible === false)
|
|
547
|
+
return false;
|
|
548
|
+
currentParentId = parent_1.parentId;
|
|
549
|
+
}
|
|
550
|
+
return true;
|
|
551
|
+
};
|
|
552
|
+
DiagramModel.prototype.isElementSelectable = function (id) {
|
|
553
|
+
var element = this.elements.get(id);
|
|
554
|
+
if (!element)
|
|
555
|
+
return false;
|
|
556
|
+
return this.isElementVisible(id) && element.selectable !== false;
|
|
557
|
+
};
|
|
531
558
|
DiagramModel.prototype.setElementLayout = function (id, layout) {
|
|
532
559
|
var element = this.elements.get(id);
|
|
533
560
|
if (!element)
|
|
@@ -546,6 +573,12 @@ var DiagramModel = /** @class */ (function () {
|
|
|
546
573
|
DiagramModel.prototype.getPort = function (id) {
|
|
547
574
|
return this.ports.get(id);
|
|
548
575
|
};
|
|
576
|
+
DiagramModel.prototype.isPortVisible = function (id) {
|
|
577
|
+
var port = this.ports.get(id);
|
|
578
|
+
if (!port)
|
|
579
|
+
return false;
|
|
580
|
+
return this.isElementVisible(port.elementId);
|
|
581
|
+
};
|
|
549
582
|
DiagramModel.prototype.getPortWorldPosition = function (id) {
|
|
550
583
|
var port = this.ports.get(id);
|
|
551
584
|
if (!port)
|
|
@@ -561,6 +594,16 @@ var DiagramModel = /** @class */ (function () {
|
|
|
561
594
|
DiagramModel.prototype.getLink = function (id) {
|
|
562
595
|
return this.links.get(id);
|
|
563
596
|
};
|
|
597
|
+
DiagramModel.prototype.isLinkVisible = function (id) {
|
|
598
|
+
var link = this.links.get(id);
|
|
599
|
+
if (!link)
|
|
600
|
+
return false;
|
|
601
|
+
var sourcePort = this.ports.get(link.sourcePortId);
|
|
602
|
+
var targetPort = this.ports.get(link.targetPortId);
|
|
603
|
+
var sourceVisible = sourcePort ? this.isPortVisible(sourcePort.id) : true;
|
|
604
|
+
var targetVisible = targetPort ? this.isPortVisible(targetPort.id) : true;
|
|
605
|
+
return sourceVisible && targetVisible;
|
|
606
|
+
};
|
|
564
607
|
DiagramModel.prototype.getLinkMidpoint = function (id) {
|
|
565
608
|
var link = this.links.get(id);
|
|
566
609
|
if (!link)
|
|
@@ -570,6 +613,23 @@ var DiagramModel = /** @class */ (function () {
|
|
|
570
613
|
DiagramModel.prototype.getText = function (id) {
|
|
571
614
|
return this.texts.get(id);
|
|
572
615
|
};
|
|
616
|
+
DiagramModel.prototype.isTextVisible = function (id) {
|
|
617
|
+
var text = this.texts.get(id);
|
|
618
|
+
if (!text)
|
|
619
|
+
return false;
|
|
620
|
+
if (!text.ownerId)
|
|
621
|
+
return true;
|
|
622
|
+
if (this.elements.has(text.ownerId)) {
|
|
623
|
+
return this.isElementVisible(text.ownerId);
|
|
624
|
+
}
|
|
625
|
+
if (this.ports.has(text.ownerId)) {
|
|
626
|
+
return this.isPortVisible(text.ownerId);
|
|
627
|
+
}
|
|
628
|
+
if (this.links.has(text.ownerId)) {
|
|
629
|
+
return this.isLinkVisible(text.ownerId);
|
|
630
|
+
}
|
|
631
|
+
return true;
|
|
632
|
+
};
|
|
573
633
|
DiagramModel.prototype.getTextWorldPosition = function (id) {
|
|
574
634
|
var text = this.texts.get(id);
|
|
575
635
|
if (!text)
|
|
@@ -758,18 +818,18 @@ var DiagramModel = /** @class */ (function () {
|
|
|
758
818
|
}
|
|
759
819
|
var current = element;
|
|
760
820
|
while (current === null || current === void 0 ? void 0 : current.parentId) {
|
|
761
|
-
var
|
|
762
|
-
if (!
|
|
821
|
+
var parent_2 = this.elements.get(current.parentId);
|
|
822
|
+
if (!parent_2)
|
|
763
823
|
break;
|
|
764
|
-
var parentX =
|
|
765
|
-
var parentY =
|
|
766
|
-
if (
|
|
767
|
-
parentX -=
|
|
768
|
-
parentY -=
|
|
824
|
+
var parentX = parent_2.position.x;
|
|
825
|
+
var parentY = parent_2.position.y;
|
|
826
|
+
if (parent_2.anchorCenter) {
|
|
827
|
+
parentX -= parent_2.size.width / 2;
|
|
828
|
+
parentY -= parent_2.size.height / 2;
|
|
769
829
|
}
|
|
770
830
|
x += parentX;
|
|
771
831
|
y += parentY;
|
|
772
|
-
current =
|
|
832
|
+
current = parent_2;
|
|
773
833
|
}
|
|
774
834
|
return { x: x, y: y };
|
|
775
835
|
};
|
|
@@ -2441,6 +2501,8 @@ var AutoLayoutService = /** @class */ (function () {
|
|
|
2441
2501
|
return this.applyResolvedLayout(parentId, parent, desiredPositions, desiredSizes, {
|
|
2442
2502
|
width: newParentWidth,
|
|
2443
2503
|
height: newParentHeight,
|
|
2504
|
+
}, {
|
|
2505
|
+
preserveResizedLayoutParentSize: true,
|
|
2444
2506
|
});
|
|
2445
2507
|
};
|
|
2446
2508
|
AutoLayoutService.prototype.resolveGridCellWidths = function (rowInnerWidth, weights) {
|
|
@@ -2450,7 +2512,7 @@ var AutoLayoutService = /** @class */ (function () {
|
|
|
2450
2512
|
var safeWeights = weights.map(function (weight) { return _this.clampGridUnits(weight); });
|
|
2451
2513
|
return this.distributeWeightedSizes(Math.max(0, rowInnerWidth), safeWeights);
|
|
2452
2514
|
};
|
|
2453
|
-
AutoLayoutService.prototype.applyResolvedLayout = function (parentId, parent, desiredPositions, desiredSizes, parentSize) {
|
|
2515
|
+
AutoLayoutService.prototype.applyResolvedLayout = function (parentId, parent, desiredPositions, desiredSizes, parentSize, options) {
|
|
2454
2516
|
var _this = this;
|
|
2455
2517
|
var _a;
|
|
2456
2518
|
var patches = [];
|
|
@@ -2469,7 +2531,7 @@ var AutoLayoutService = /** @class */ (function () {
|
|
|
2469
2531
|
var resizePatches = _this.commandQueue.run(createResizeElementCommand(childId, fittedSize), _this.model);
|
|
2470
2532
|
patches.push.apply(patches, resizePatches);
|
|
2471
2533
|
movedPortIds.push.apply(movedPortIds, _this.collectElementPortIds(childId));
|
|
2472
|
-
var nested = _this.applyLayoutForParent(childId);
|
|
2534
|
+
var nested = _this.applyLayoutForParent(childId, (options === null || options === void 0 ? void 0 : options.preserveResizedLayoutParentSize) ? { preserveParentSize: true } : undefined);
|
|
2473
2535
|
patches.push.apply(patches, nested.patches);
|
|
2474
2536
|
movedPortIds.push.apply(movedPortIds, nested.movedPortIds);
|
|
2475
2537
|
}
|
|
@@ -4330,16 +4392,38 @@ var DiagramEngine = /** @class */ (function () {
|
|
|
4330
4392
|
this.emitEntityDeletionEvents(removal.removed);
|
|
4331
4393
|
};
|
|
4332
4394
|
DiagramEngine.prototype.setSelection = function (ids) {
|
|
4333
|
-
this.selection.set(ids);
|
|
4395
|
+
this.selection.set(this.normalizeSelectionIds(ids));
|
|
4334
4396
|
this.emitSelection();
|
|
4335
4397
|
};
|
|
4336
4398
|
DiagramEngine.prototype.toggleSelection = function (id) {
|
|
4337
|
-
this.selection.
|
|
4399
|
+
var current = new Set(this.selection.get());
|
|
4400
|
+
if (current.has(id)) {
|
|
4401
|
+
current.delete(id);
|
|
4402
|
+
}
|
|
4403
|
+
else if (this.isSelectableId(id)) {
|
|
4404
|
+
current.add(id);
|
|
4405
|
+
}
|
|
4406
|
+
this.selection.set(Array.from(current));
|
|
4338
4407
|
this.emitSelection();
|
|
4339
4408
|
};
|
|
4340
4409
|
DiagramEngine.prototype.getSelection = function () {
|
|
4341
4410
|
return this.selection.get();
|
|
4342
4411
|
};
|
|
4412
|
+
DiagramEngine.prototype.isElementVisible = function (id) {
|
|
4413
|
+
return this.model.isElementVisible(id);
|
|
4414
|
+
};
|
|
4415
|
+
DiagramEngine.prototype.isElementSelectable = function (id) {
|
|
4416
|
+
return this.model.isElementSelectable(id);
|
|
4417
|
+
};
|
|
4418
|
+
DiagramEngine.prototype.isPortVisible = function (id) {
|
|
4419
|
+
return this.model.isPortVisible(id);
|
|
4420
|
+
};
|
|
4421
|
+
DiagramEngine.prototype.isLinkVisible = function (id) {
|
|
4422
|
+
return this.model.isLinkVisible(id);
|
|
4423
|
+
};
|
|
4424
|
+
DiagramEngine.prototype.isTextVisible = function (id) {
|
|
4425
|
+
return this.model.isTextVisible(id);
|
|
4426
|
+
};
|
|
4343
4427
|
DiagramEngine.prototype.getElementWorldPosition = function (id) {
|
|
4344
4428
|
return this.model.getElementWorldPosition(id);
|
|
4345
4429
|
};
|
|
@@ -4601,11 +4685,15 @@ var DiagramEngine = /** @class */ (function () {
|
|
|
4601
4685
|
var _this = this;
|
|
4602
4686
|
var _a;
|
|
4603
4687
|
var allPatches = this.appendTextLayoutPatches(patches, (_a = options === null || options === void 0 ? void 0 : options.emitTextUpdated) !== null && _a !== void 0 ? _a : true);
|
|
4688
|
+
var selectionChanged = this.syncSelectionToPolicies();
|
|
4604
4689
|
var state = this.model.toState();
|
|
4605
4690
|
this.events.emit('change', { patches: allPatches, state: state });
|
|
4606
|
-
if ((options === null || options === void 0 ? void 0 : options.render)
|
|
4607
|
-
return;
|
|
4608
|
-
|
|
4691
|
+
if ((options === null || options === void 0 ? void 0 : options.render) !== false) {
|
|
4692
|
+
this.scheduler.requestRender(function () { return _this.renderer.render(_this.model); });
|
|
4693
|
+
}
|
|
4694
|
+
if (selectionChanged) {
|
|
4695
|
+
this.emitSelection();
|
|
4696
|
+
}
|
|
4609
4697
|
};
|
|
4610
4698
|
DiagramEngine.prototype.appendTextLayoutPatches = function (patches, emitTextUpdated) {
|
|
4611
4699
|
var _this = this;
|
|
@@ -5051,6 +5139,31 @@ var DiagramEngine = /** @class */ (function () {
|
|
|
5051
5139
|
});
|
|
5052
5140
|
this.renderer.renderSelection(selectedIds);
|
|
5053
5141
|
};
|
|
5142
|
+
DiagramEngine.prototype.normalizeSelectionIds = function (ids) {
|
|
5143
|
+
var _this = this;
|
|
5144
|
+
return ids.filter(function (id, index) { return ids.indexOf(id) === index && _this.isSelectableId(id); });
|
|
5145
|
+
};
|
|
5146
|
+
DiagramEngine.prototype.isSelectableId = function (id) {
|
|
5147
|
+
if (this.model.getElement(id))
|
|
5148
|
+
return this.model.isElementSelectable(id);
|
|
5149
|
+
if (this.model.getPort(id))
|
|
5150
|
+
return this.model.isPortVisible(id);
|
|
5151
|
+
if (this.model.getLink(id))
|
|
5152
|
+
return this.model.isLinkVisible(id);
|
|
5153
|
+
if (this.model.getText(id))
|
|
5154
|
+
return this.model.isTextVisible(id);
|
|
5155
|
+
return false;
|
|
5156
|
+
};
|
|
5157
|
+
DiagramEngine.prototype.syncSelectionToPolicies = function () {
|
|
5158
|
+
var current = this.selection.get();
|
|
5159
|
+
var normalized = this.normalizeSelectionIds(current);
|
|
5160
|
+
if (current.length === normalized.length &&
|
|
5161
|
+
current.every(function (id, index) { return id === normalized[index]; })) {
|
|
5162
|
+
return false;
|
|
5163
|
+
}
|
|
5164
|
+
this.selection.set(normalized);
|
|
5165
|
+
return true;
|
|
5166
|
+
};
|
|
5054
5167
|
DiagramEngine.prototype.applyLayoutForParent = function (parentId, options) {
|
|
5055
5168
|
return this.autoLayoutService.applyLayoutForParent(parentId, options);
|
|
5056
5169
|
};
|
|
@@ -6003,7 +6116,9 @@ var KonvaRenderer = /** @class */ (function () {
|
|
|
6003
6116
|
};
|
|
6004
6117
|
KonvaRenderer.prototype.syncElements = function (model) {
|
|
6005
6118
|
var _this = this;
|
|
6006
|
-
var elements = Array.from(model.elements.values())
|
|
6119
|
+
var elements = Array.from(model.elements.values())
|
|
6120
|
+
.filter(function (element) { return model.isElementVisible(element.id); })
|
|
6121
|
+
.map(function (element, index) { return ({
|
|
6007
6122
|
element: element,
|
|
6008
6123
|
depth: _this.getElementDepth(model, element),
|
|
6009
6124
|
order: index,
|
|
@@ -6036,6 +6151,10 @@ var KonvaRenderer = /** @class */ (function () {
|
|
|
6036
6151
|
node.setAttrs({ __depth: depth });
|
|
6037
6152
|
}
|
|
6038
6153
|
});
|
|
6154
|
+
var visibleElementIds = new Set(elements.map(function (_a) {
|
|
6155
|
+
var element = _a.element;
|
|
6156
|
+
return element.id;
|
|
6157
|
+
}));
|
|
6039
6158
|
elements.forEach(function (_a) {
|
|
6040
6159
|
var _b;
|
|
6041
6160
|
var element = _a.element;
|
|
@@ -6044,7 +6163,7 @@ var KonvaRenderer = /** @class */ (function () {
|
|
|
6044
6163
|
});
|
|
6045
6164
|
Array.from(this.elementNodes.keys()).forEach(function (id) {
|
|
6046
6165
|
var _a;
|
|
6047
|
-
if (!
|
|
6166
|
+
if (!visibleElementIds.has(id)) {
|
|
6048
6167
|
var node = _this.elementNodes.get(id);
|
|
6049
6168
|
(_a = node === null || node === void 0 ? void 0 : node.destroy) === null || _a === void 0 ? void 0 : _a.call(node);
|
|
6050
6169
|
_this.elementNodes.delete(id);
|
|
@@ -6067,7 +6186,7 @@ var KonvaRenderer = /** @class */ (function () {
|
|
|
6067
6186
|
};
|
|
6068
6187
|
KonvaRenderer.prototype.syncPorts = function (model) {
|
|
6069
6188
|
var _this = this;
|
|
6070
|
-
var ports = Array.from(model.ports.values());
|
|
6189
|
+
var ports = Array.from(model.ports.values()).filter(function (port) { return model.isPortVisible(port.id); });
|
|
6071
6190
|
ports.forEach(function (port) {
|
|
6072
6191
|
var _a, _b, _c, _d, _e;
|
|
6073
6192
|
var data = port.toData();
|
|
@@ -6085,9 +6204,10 @@ var KonvaRenderer = /** @class */ (function () {
|
|
|
6085
6204
|
_this.updatePosition(node, position);
|
|
6086
6205
|
_this.applyPortOrientation(node, data, position, model);
|
|
6087
6206
|
});
|
|
6207
|
+
var visiblePortIds = new Set(ports.map(function (port) { return port.id; }));
|
|
6088
6208
|
Array.from(this.portNodes.keys()).forEach(function (id) {
|
|
6089
6209
|
var _a;
|
|
6090
|
-
if (!
|
|
6210
|
+
if (!visiblePortIds.has(id)) {
|
|
6091
6211
|
var node = _this.portNodes.get(id);
|
|
6092
6212
|
(_a = node === null || node === void 0 ? void 0 : node.destroy) === null || _a === void 0 ? void 0 : _a.call(node);
|
|
6093
6213
|
_this.portNodes.delete(id);
|
|
@@ -6098,7 +6218,7 @@ var KonvaRenderer = /** @class */ (function () {
|
|
|
6098
6218
|
};
|
|
6099
6219
|
KonvaRenderer.prototype.syncLinks = function (model) {
|
|
6100
6220
|
var _this = this;
|
|
6101
|
-
var links = Array.from(model.links.values());
|
|
6221
|
+
var links = Array.from(model.links.values()).filter(function (link) { return model.isLinkVisible(link.id); });
|
|
6102
6222
|
links.forEach(function (link) {
|
|
6103
6223
|
var _a, _b;
|
|
6104
6224
|
var node = _this.linkNodes.get(link.id);
|
|
@@ -6109,9 +6229,10 @@ var KonvaRenderer = /** @class */ (function () {
|
|
|
6109
6229
|
}
|
|
6110
6230
|
_this.updateLine(node, link.toData());
|
|
6111
6231
|
});
|
|
6232
|
+
var visibleLinkIds = new Set(links.map(function (link) { return link.id; }));
|
|
6112
6233
|
Array.from(this.linkNodes.keys()).forEach(function (id) {
|
|
6113
6234
|
var _a;
|
|
6114
|
-
if (!
|
|
6235
|
+
if (!visibleLinkIds.has(id)) {
|
|
6115
6236
|
var node = _this.linkNodes.get(id);
|
|
6116
6237
|
(_a = node === null || node === void 0 ? void 0 : node.destroy) === null || _a === void 0 ? void 0 : _a.call(node);
|
|
6117
6238
|
_this.linkNodes.delete(id);
|
|
@@ -6122,7 +6243,7 @@ var KonvaRenderer = /** @class */ (function () {
|
|
|
6122
6243
|
};
|
|
6123
6244
|
KonvaRenderer.prototype.syncTexts = function (model) {
|
|
6124
6245
|
var _this = this;
|
|
6125
|
-
var texts = Array.from(model.texts.values());
|
|
6246
|
+
var texts = Array.from(model.texts.values()).filter(function (text) { return model.isTextVisible(text.id); });
|
|
6126
6247
|
texts.forEach(function (text) {
|
|
6127
6248
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
6128
6249
|
var node = _this.textNodes.get(text.id);
|
|
@@ -6211,9 +6332,10 @@ var KonvaRenderer = /** @class */ (function () {
|
|
|
6211
6332
|
_this.textBackgroundNodes.delete(text.id);
|
|
6212
6333
|
}
|
|
6213
6334
|
});
|
|
6335
|
+
var visibleTextIds = new Set(texts.map(function (text) { return text.id; }));
|
|
6214
6336
|
Array.from(this.textNodes.keys()).forEach(function (id) {
|
|
6215
6337
|
var _a, _b;
|
|
6216
|
-
if (!
|
|
6338
|
+
if (!visibleTextIds.has(id)) {
|
|
6217
6339
|
var backgroundNode = _this.textBackgroundNodes.get(id);
|
|
6218
6340
|
(_a = backgroundNode === null || backgroundNode === void 0 ? void 0 : backgroundNode.destroy) === null || _a === void 0 ? void 0 : _a.call(backgroundNode);
|
|
6219
6341
|
_this.textBackgroundNodes.delete(id);
|
|
@@ -7216,15 +7338,21 @@ var KonvaInteraction = /** @class */ (function () {
|
|
|
7216
7338
|
KonvaInteraction.prototype.normalizeHit = function (hit) {
|
|
7217
7339
|
if (!hit || hit.type === 'none')
|
|
7218
7340
|
return null;
|
|
7219
|
-
if (hit.type === 'port'
|
|
7220
|
-
hit.
|
|
7221
|
-
|
|
7222
|
-
|
|
7341
|
+
if (hit.type === 'port') {
|
|
7342
|
+
return this.engine.isPortVisible(hit.id) ? hit : null;
|
|
7343
|
+
}
|
|
7344
|
+
if (hit.type === 'link') {
|
|
7345
|
+
return this.engine.isLinkVisible(hit.id) ? hit : null;
|
|
7346
|
+
}
|
|
7347
|
+
if (hit.type === 'text') {
|
|
7348
|
+
return this.engine.isTextVisible(hit.id) ? hit : null;
|
|
7349
|
+
}
|
|
7350
|
+
if (hit.type === 'resize-handle' ||
|
|
7223
7351
|
hit.type === 'link-handle' ||
|
|
7224
7352
|
hit.type === 'shape-hover-control') {
|
|
7225
7353
|
return hit;
|
|
7226
7354
|
}
|
|
7227
|
-
return __assign(__assign({}, hit), { type: 'element' });
|
|
7355
|
+
return this.engine.isElementSelectable(hit.id) ? __assign(__assign({}, hit), { type: 'element' }) : null;
|
|
7228
7356
|
};
|
|
7229
7357
|
KonvaInteraction.prototype.resolveHit = function (point) {
|
|
7230
7358
|
var _this = this;
|
|
@@ -7290,6 +7418,8 @@ var KonvaInteraction = /** @class */ (function () {
|
|
|
7290
7418
|
var best = null;
|
|
7291
7419
|
state.elements.forEach(function (element) {
|
|
7292
7420
|
var _a, _b, _c;
|
|
7421
|
+
if (!_this.engine.isElementSelectable(element.id))
|
|
7422
|
+
return;
|
|
7293
7423
|
var world = (_a = _this.engine.getElementWorldPosition(element.id)) !== null && _a !== void 0 ? _a : element.position;
|
|
7294
7424
|
var rotation = _this.engine.getElementRotation(element.id);
|
|
7295
7425
|
if (!pointInRotatedRect(point, world, element.size, rotation, (_b = element.anchorCenter) !== null && _b !== void 0 ? _b : false))
|
|
@@ -7319,6 +7449,8 @@ var KonvaInteraction = /** @class */ (function () {
|
|
|
7319
7449
|
var bestDistance = Number.POSITIVE_INFINITY;
|
|
7320
7450
|
links.forEach(function (link) {
|
|
7321
7451
|
var _a, _b;
|
|
7452
|
+
if (!_this.engine.isLinkVisible(link.id))
|
|
7453
|
+
return;
|
|
7322
7454
|
if (link.points.length < 2)
|
|
7323
7455
|
return;
|
|
7324
7456
|
var tolerance = ((_b = (_a = link.style) === null || _a === void 0 ? void 0 : _a.hitStrokeWidth) !== null && _b !== void 0 ? _b : 15) / 2;
|
|
@@ -8333,6 +8465,8 @@ var KonvaInteraction = /** @class */ (function () {
|
|
|
8333
8465
|
};
|
|
8334
8466
|
state.elements.forEach(function (element) {
|
|
8335
8467
|
var _a, _b;
|
|
8468
|
+
if (!_this.engine.isElementSelectable(element.id))
|
|
8469
|
+
return;
|
|
8336
8470
|
var position = (_a = _this.engine.getElementWorldPosition(element.id)) !== null && _a !== void 0 ? _a : element.position;
|
|
8337
8471
|
var rotation = _this.engine.getElementRotation(element.id);
|
|
8338
8472
|
var anchorCenter = (_b = element.anchorCenter) !== null && _b !== void 0 ? _b : false;
|
|
@@ -8350,6 +8484,8 @@ var KonvaInteraction = /** @class */ (function () {
|
|
|
8350
8484
|
});
|
|
8351
8485
|
state.ports.forEach(function (port) {
|
|
8352
8486
|
var _a;
|
|
8487
|
+
if (!_this.engine.isPortVisible(port.id))
|
|
8488
|
+
return;
|
|
8353
8489
|
var position = (_a = _this.engine.getPortWorldPosition(port.id)) !== null && _a !== void 0 ? _a : port.position;
|
|
8354
8490
|
if (containsPoint(position)) {
|
|
8355
8491
|
selected.add(port.id);
|
|
@@ -8357,6 +8493,8 @@ var KonvaInteraction = /** @class */ (function () {
|
|
|
8357
8493
|
});
|
|
8358
8494
|
state.texts.forEach(function (text) {
|
|
8359
8495
|
var _a, _b, _c, _d, _e;
|
|
8496
|
+
if (!_this.engine.isTextVisible(text.id))
|
|
8497
|
+
return;
|
|
8360
8498
|
var position = (_a = _this.engine.getTextWorldPosition(text.id)) !== null && _a !== void 0 ? _a : text.position;
|
|
8361
8499
|
var width = (_c = (_b = text.size) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 0;
|
|
8362
8500
|
var height = (_e = (_d = text.size) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : 0;
|
|
@@ -8366,6 +8504,8 @@ var KonvaInteraction = /** @class */ (function () {
|
|
|
8366
8504
|
}
|
|
8367
8505
|
});
|
|
8368
8506
|
state.links.forEach(function (link) {
|
|
8507
|
+
if (!_this.engine.isLinkVisible(link.id))
|
|
8508
|
+
return;
|
|
8369
8509
|
if (link.points.length === 0)
|
|
8370
8510
|
return;
|
|
8371
8511
|
var xs = link.points.map(function (point) { return point.x; });
|
|
@@ -9297,13 +9437,65 @@ var resolveViewportFitOptions = function (options) {
|
|
|
9297
9437
|
return { padding: padding, minZoom: minZoom, maxZoom: maxZoom };
|
|
9298
9438
|
};
|
|
9299
9439
|
var clamp = function (value, min, max) { return Math.max(min, Math.min(max, value)); };
|
|
9440
|
+
var isElementVisibleInState = function (elementId, elementsById) {
|
|
9441
|
+
var _a, _b;
|
|
9442
|
+
var element = elementsById.get(elementId);
|
|
9443
|
+
if (!element)
|
|
9444
|
+
return false;
|
|
9445
|
+
if (element.visible === false)
|
|
9446
|
+
return false;
|
|
9447
|
+
var currentParentId = (_a = element.parentId) !== null && _a !== void 0 ? _a : null;
|
|
9448
|
+
while (currentParentId) {
|
|
9449
|
+
var parent_1 = elementsById.get(currentParentId);
|
|
9450
|
+
if (!parent_1)
|
|
9451
|
+
break;
|
|
9452
|
+
if (parent_1.visible === false)
|
|
9453
|
+
return false;
|
|
9454
|
+
currentParentId = (_b = parent_1.parentId) !== null && _b !== void 0 ? _b : null;
|
|
9455
|
+
}
|
|
9456
|
+
return true;
|
|
9457
|
+
};
|
|
9458
|
+
var isPortVisibleInState = function (portId, portsById, elementsById) {
|
|
9459
|
+
var port = portsById.get(portId);
|
|
9460
|
+
if (!port)
|
|
9461
|
+
return false;
|
|
9462
|
+
return isElementVisibleInState(port.elementId, elementsById);
|
|
9463
|
+
};
|
|
9464
|
+
var isLinkVisibleInState = function (linkId, linksById, portsById, elementsById) {
|
|
9465
|
+
var link = linksById.get(linkId);
|
|
9466
|
+
if (!link)
|
|
9467
|
+
return false;
|
|
9468
|
+
var sourcePort = portsById.get(link.sourcePortId);
|
|
9469
|
+
var targetPort = portsById.get(link.targetPortId);
|
|
9470
|
+
var sourceVisible = sourcePort ? isPortVisibleInState(sourcePort.id, portsById, elementsById) : true;
|
|
9471
|
+
var targetVisible = targetPort ? isPortVisibleInState(targetPort.id, portsById, elementsById) : true;
|
|
9472
|
+
return sourceVisible && targetVisible;
|
|
9473
|
+
};
|
|
9474
|
+
var isTextVisibleInState = function (text, elementsById, portsById, linksById) {
|
|
9475
|
+
if (!text.ownerId)
|
|
9476
|
+
return true;
|
|
9477
|
+
if (elementsById.has(text.ownerId))
|
|
9478
|
+
return isElementVisibleInState(text.ownerId, elementsById);
|
|
9479
|
+
if (portsById.has(text.ownerId))
|
|
9480
|
+
return isPortVisibleInState(text.ownerId, portsById, elementsById);
|
|
9481
|
+
if (linksById.has(text.ownerId))
|
|
9482
|
+
return isLinkVisibleInState(text.ownerId, linksById, portsById, elementsById);
|
|
9483
|
+
return true;
|
|
9484
|
+
};
|
|
9300
9485
|
var resolveStateWorldBounds = function (state) {
|
|
9301
9486
|
var bounds = createBounds();
|
|
9487
|
+
var elementsById = new Map(state.elements.map(function (element) { return [element.id, element]; }));
|
|
9488
|
+
var portsById = new Map(state.ports.map(function (port) { return [port.id, port]; }));
|
|
9489
|
+
var linksById = new Map(state.links.map(function (link) { return [link.id, link]; }));
|
|
9302
9490
|
state.elements.forEach(function (element) {
|
|
9491
|
+
if (!isElementVisibleInState(element.id, elementsById))
|
|
9492
|
+
return;
|
|
9303
9493
|
includeRect(bounds, element.position.x, element.position.y, element.size.width, element.size.height);
|
|
9304
9494
|
});
|
|
9305
9495
|
state.ports.forEach(function (port) {
|
|
9306
9496
|
var _a;
|
|
9497
|
+
if (!isPortVisibleInState(port.id, portsById, elementsById))
|
|
9498
|
+
return;
|
|
9307
9499
|
var size = port.size;
|
|
9308
9500
|
if (!size) {
|
|
9309
9501
|
expandBounds(bounds, port.position.x, port.position.y);
|
|
@@ -9315,12 +9507,16 @@ var resolveStateWorldBounds = function (state) {
|
|
|
9315
9507
|
includeRect(bounds, x, y, size.width, size.height);
|
|
9316
9508
|
});
|
|
9317
9509
|
state.links.forEach(function (link) {
|
|
9510
|
+
if (!isLinkVisibleInState(link.id, linksById, portsById, elementsById))
|
|
9511
|
+
return;
|
|
9318
9512
|
link.points.forEach(function (point) {
|
|
9319
9513
|
expandBounds(bounds, point.x, point.y);
|
|
9320
9514
|
});
|
|
9321
9515
|
});
|
|
9322
9516
|
state.texts.forEach(function (text) {
|
|
9323
9517
|
var _a;
|
|
9518
|
+
if (!isTextVisibleInState(text, elementsById, portsById, linksById))
|
|
9519
|
+
return;
|
|
9324
9520
|
var offset = (_a = text.displayOffset) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
|
|
9325
9521
|
var position = { x: text.position.x + offset.x, y: text.position.y + offset.y };
|
|
9326
9522
|
var clipSize = text.displayClipSize;
|
|
@@ -9335,7 +9531,10 @@ var resolveStateWorldBounds = function (state) {
|
|
|
9335
9531
|
};
|
|
9336
9532
|
var resolveElementWorldBounds = function (state) {
|
|
9337
9533
|
var bounds = createBounds();
|
|
9534
|
+
var elementsById = new Map(state.elements.map(function (element) { return [element.id, element]; }));
|
|
9338
9535
|
state.elements.forEach(function (element) {
|
|
9536
|
+
if (!isElementVisibleInState(element.id, elementsById))
|
|
9537
|
+
return;
|
|
9339
9538
|
includeRect(bounds, element.position.x, element.position.y, element.size.width, element.size.height);
|
|
9340
9539
|
});
|
|
9341
9540
|
return hasBounds(bounds) ? bounds : null;
|
|
@@ -76,6 +76,11 @@ export default class DiagramEngine {
|
|
|
76
76
|
setSelection(ids: string[]): void;
|
|
77
77
|
toggleSelection(id: string): void;
|
|
78
78
|
getSelection(): string[];
|
|
79
|
+
isElementVisible(id: string): boolean;
|
|
80
|
+
isElementSelectable(id: string): boolean;
|
|
81
|
+
isPortVisible(id: string): boolean;
|
|
82
|
+
isLinkVisible(id: string): boolean;
|
|
83
|
+
isTextVisible(id: string): boolean;
|
|
79
84
|
getElementWorldPosition(id: string): Point | null;
|
|
80
85
|
getElementRotation(id: string): number;
|
|
81
86
|
normalizeElementResize(id: string, proposal: {
|
|
@@ -146,6 +151,9 @@ export default class DiagramEngine {
|
|
|
146
151
|
private resolveTextPresentation;
|
|
147
152
|
private resolveAllTextPresentationPatches;
|
|
148
153
|
private emitSelection;
|
|
154
|
+
private normalizeSelectionIds;
|
|
155
|
+
private isSelectableId;
|
|
156
|
+
private syncSelectionToPolicies;
|
|
149
157
|
private applyLayoutForParent;
|
|
150
158
|
private applyLayoutCascade;
|
|
151
159
|
private applyAllLayouts;
|
|
@@ -13,14 +13,19 @@ export default class DiagramModel {
|
|
|
13
13
|
load(state: DiagramState): void;
|
|
14
14
|
toState(): DiagramState;
|
|
15
15
|
getElement(id: string): ElementModel | undefined;
|
|
16
|
+
isElementVisible(id: string): boolean;
|
|
17
|
+
isElementSelectable(id: string): boolean;
|
|
16
18
|
setElementLayout(id: string, layout: ElementData['layout']): void;
|
|
17
19
|
getChildren(parentId: string): ElementModel[];
|
|
18
20
|
getElementWorldPosition(id: string): Point | null;
|
|
19
21
|
getPort(id: string): PortModel | undefined;
|
|
22
|
+
isPortVisible(id: string): boolean;
|
|
20
23
|
getPortWorldPosition(id: string): Point | null;
|
|
21
24
|
getLink(id: string): LinkModel | undefined;
|
|
25
|
+
isLinkVisible(id: string): boolean;
|
|
22
26
|
getLinkMidpoint(id: string): Point | null;
|
|
23
27
|
getText(id: string): TextModel | undefined;
|
|
28
|
+
isTextVisible(id: string): boolean;
|
|
24
29
|
getTextWorldPosition(id: string): Point | null;
|
|
25
30
|
addElement(data: ElementData): ElementModel;
|
|
26
31
|
moveElement(id: string, position: Point): void;
|