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.
Files changed (37) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.md +7 -12
  3. package/ai/api-contract.json +16 -0
  4. package/ai/invariants.json +8 -0
  5. package/ai/manifest.json +1 -1
  6. package/dist/cjs/examples.js +604 -39
  7. package/dist/cjs/index.js +227 -28
  8. package/dist/cjs/types/api/types.d.ts +2 -0
  9. package/dist/cjs/types/displaybox/demos/elementVisibilitySelectionDemo.d.ts +4 -0
  10. package/dist/cjs/types/engine/DiagramEngine.d.ts +8 -0
  11. package/dist/cjs/types/models/DiagramModel.d.ts +5 -0
  12. package/dist/cjs/types/models/ElementModel.d.ts +2 -0
  13. package/dist/esm/examples.js +604 -39
  14. package/dist/esm/examples.js.map +1 -1
  15. package/dist/esm/index.js +227 -28
  16. package/dist/esm/index.js.map +1 -1
  17. package/dist/esm/types/api/types.d.ts +2 -0
  18. package/dist/esm/types/displaybox/demos/elementVisibilitySelectionDemo.d.ts +4 -0
  19. package/dist/esm/types/engine/DiagramEngine.d.ts +8 -0
  20. package/dist/esm/types/models/DiagramModel.d.ts +5 -0
  21. package/dist/esm/types/models/ElementModel.d.ts +2 -0
  22. package/dist/examples.d.ts +2 -0
  23. package/dist/index.d.ts +9 -0
  24. package/docs/API_CONTRACT.md +16 -1
  25. package/docs/CAPABILITIES.md +1 -0
  26. package/docs/COMMANDS_EVENTS.md +3 -1
  27. package/docs/DOCUMENTATION_WORKFLOW.md +3 -1
  28. package/docs/INTEGRATION_PLAYBOOK.md +1 -0
  29. package/docs/PORTING_CHECKLIST.md +1 -0
  30. package/docs/STATE_INVARIANTS.md +9 -1
  31. package/package.json +1 -1
  32. package/src/displaybox/demos/AutoLayoutDemoTab.tsx +11 -5
  33. package/src/displaybox/demos/autoLayoutDemo.ts +233 -0
  34. package/src/displaybox/demos/basicDemo.ts +6 -6
  35. package/src/displaybox/demos/elementVisibilitySelectionDemo.ts +128 -0
  36. package/src/displaybox/demos/index.tsx +14 -7
  37. 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 parent_1 = this.elements.get(current.parentId);
762
- if (!parent_1)
821
+ var parent_2 = this.elements.get(current.parentId);
822
+ if (!parent_2)
763
823
  break;
764
- var parentX = parent_1.position.x;
765
- var parentY = parent_1.position.y;
766
- if (parent_1.anchorCenter) {
767
- parentX -= parent_1.size.width / 2;
768
- parentY -= parent_1.size.height / 2;
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 = parent_1;
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.toggle(id);
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) === false)
4607
- return;
4608
- this.scheduler.requestRender(function () { return _this.renderer.render(_this.model); });
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()).map(function (element, index) { return ({
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 (!model.elements.has(id)) {
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 (!model.ports.has(id)) {
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 (!model.links.has(id)) {
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 (!model.texts.has(id)) {
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.type === 'link' ||
7221
- hit.type === 'text' ||
7222
- hit.type === 'resize-handle' ||
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;
@@ -269,6 +269,8 @@ export type ElementData = {
269
269
  style?: Record<string, unknown>;
270
270
  portIds?: string[];
271
271
  textIds?: string[];
272
+ visible?: boolean;
273
+ selectable?: boolean;
272
274
  parentId?: string | null;
273
275
  moveMode?: MoveConstraint;
274
276
  anchorCenter?: boolean;
@@ -0,0 +1,4 @@
1
+ import type { DiagramState } from '../../api';
2
+ import type { DemoConfig } from '../types';
3
+ export declare const createElementVisibilitySelectionState: () => DiagramState;
4
+ export declare const elementVisibilitySelectionDemoConfig: DemoConfig;
@@ -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;
@@ -7,6 +7,8 @@ export default class ElementModel {
7
7
  style?: Record<string, unknown>;
8
8
  portIds: string[];
9
9
  textIds: string[];
10
+ visible?: boolean;
11
+ selectable?: boolean;
10
12
  parentId: string | null;
11
13
  moveMode?: MoveConstraint;
12
14
  anchorCenter?: boolean;