@babylonjs/node-editor 5.45.1 → 5.46.0

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 (6) hide show
  1. package/dist/babylon.nodeEditor.js +1 -1
  2. package/dist/babylon.nodeEditor.js.map +1 -1
  3. package/dist/babylon.nodeEditor.max.js +971 -970
  4. package/dist/babylon.nodeEditor.max.js.map +1 -1
  5. package/dist/babylon.nodeEditor.module.d.ts +2 -2
  6. package/package.json +2 -2
package/dist/babylon.nodeEditor.max.js CHANGED
@@ -358,7 +358,7 @@ __webpack_require__.r(__webpack_exports__);
358
358
 
359
359
  var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
360
360
  // Module
361
- ___CSS_LOADER_EXPORT___.push([module.id, ".\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphNode-modules__visual {\n z-index: 4;\n width: 200px;\n position: absolute;\n left: 0;\n top: 0;\n background: gray;\n border: 4px solid black;\n border-radius: 12px;\n display: grid;\n grid-template-rows: 30px auto;\n grid-template-columns: 100%;\n color: white;\n box-shadow: 7px 6px 2px rgba(0, 0, 0, 0.2); }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphNode-modules__header-container {\n grid-row: 1;\n grid-column: 1;\n position: relative;\n border: 4px solid black;\n border-top-right-radius: 7px;\n border-top-left-radius: 7px;\n background: black;\n color: white;\n transform: scaleX(1.01) translateY(-0.5px);\n transform-origin: center; }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphNode-modules__headerIcon {\n position: absolute;\n right: 0px;\n top: 2px;\n z-index: 10;\n justify-self: end;\n align-self: center;\n margin-right: 5px;\n user-select: none;\n pointer-events: none;\n width: 20px;\n display: grid;\n margin-left: 5px; }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphNode-modules__header {\n font-size: 16px;\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden; }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphNode-modules__connections {\n grid-row: 2;\n grid-column: 1;\n display: grid;\n grid-template-columns: 50% 50%;\n transform: scale(1); }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphNode-modules__content {\n min-height: 20px;\n grid-row: 3;\n grid-column: 1; }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphNode-modules__comments {\n position: absolute;\n top: -50px;\n width: 200px;\n height: 45px;\n overflow: hidden;\n font-style: italic;\n opacity: 0.8;\n display: grid;\n align-items: flex-end;\n pointer-events: none; }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphNode-modules__selected {\n border-color: white !important; }\n", "",{"version":3,"sources":["webpack://./../../../dev/sharedUiComponents/dist/nodeGraphSystem/graphNode.modules.scss"],"names":[],"mappings":"AAAA;EACI,UAAU;EACV,YAAY;EACZ,kBAAkB;EAClB,OAAO;EACP,MAAM;EACN,gBAAgB;EAChB,uBAAuB;EACvB,mBAAmB;EACnB,aAAa;EACb,6BAA6B;EAC7B,2BAA2B;EAC3B,YAAY;EACZ,0CAA0C,EAAA;;AAG9C;EACI,WAAW;EACX,cAAc;EACd,kBAAkB;EAClB,uBAAuB;EACvB,4BAA4B;EAC5B,2BAA2B;EAC3B,iBAAiB;EACjB,YAAY;EACZ,0CAA0C;EAC1C,wBAAwB,EAAA;;AAG5B;EACI,kBAAkB;EAClB,UAAU;EACV,QAAQ;EACR,WAAW;EACX,iBAAiB;EACjB,kBAAkB;EAClB,iBAAiB;EACjB,iBAAiB;EACjB,oBAAoB;EACpB,WAAW;EACX,aAAa;EACb,gBAAgB,EAAA;;AAGpB;EACI,eAAe;EACf,kBAAkB;EAClB,mBAAmB;EACnB,uBAAuB;EACvB,gBAAgB,EAAA;;AAGpB;EACI,WAAW;EACX,cAAc;EAEd,aAAa;EACb,8BAA8B;EAC9B,mBAAmB,EAAA;;AAGvB;EACI,gBAAgB;EAChB,WAAW;EACX,cAAc,EAAA;;AAGlB;EACI,kBAAkB;EAClB,UAAU;EACV,YAAY;EACZ,YAAY;EACZ,gBAAgB;EAChB,kBAAkB;EAClB,YAAY;EACZ,aAAa;EACb,qBAAqB;EACrB,oBAAoB,EAAA;;AAGxB;EACI,8BAA8B,EAAA","sourcesContent":[".visual {\r\n z-index: 4;\r\n width: 200px;\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n background: gray;\r\n border: 4px solid black;\r\n border-radius: 12px;\r\n display: grid;\r\n grid-template-rows: 30px auto;\r\n grid-template-columns: 100%;\r\n color: white;\r\n box-shadow: 7px 6px 2px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.header-container {\r\n grid-row: 1;\r\n grid-column: 1;\r\n position: relative;\r\n border: 4px solid black;\r\n border-top-right-radius: 7px;\r\n border-top-left-radius: 7px;\r\n background: black;\r\n color: white;\r\n transform: scaleX(1.01) translateY(-0.5px);\r\n transform-origin: center;\r\n}\r\n\r\n.headerIcon {\r\n position: absolute;\r\n right: 0px;\r\n top: 2px;\r\n z-index: 10;\r\n justify-self: end;\r\n align-self: center;\r\n margin-right: 5px;\r\n user-select: none;\r\n pointer-events: none;\r\n width: 20px;\r\n display: grid;\r\n margin-left: 5px;\r\n}\r\n\r\n.header {\r\n font-size: 16px;\r\n text-align: center;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n}\r\n\r\n.connections {\r\n grid-row: 2;\r\n grid-column: 1;\r\n\r\n display: grid;\r\n grid-template-columns: 50% 50%;\r\n transform: scale(1);\r\n}\r\n\r\n.content {\r\n min-height: 20px;\r\n grid-row: 3;\r\n grid-column: 1;\r\n}\r\n\r\n.comments {\r\n position: absolute;\r\n top: -50px;\r\n width: 200px;\r\n height: 45px;\r\n overflow: hidden;\r\n font-style: italic;\r\n opacity: 0.8;\r\n display: grid;\r\n align-items: flex-end;\r\n pointer-events: none;\r\n}\r\n\r\n.selected {\r\n border-color: white !important;\r\n}\r\n"],"sourceRoot":""}]);
361
+ ___CSS_LOADER_EXPORT___.push([module.id, ".\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphNode-modules__visual {\n z-index: 4;\n width: 200px;\n position: absolute;\n left: 0;\n top: 0;\n background: gray;\n border: 4px solid black;\n border-radius: 12px;\n display: grid;\n grid-template-rows: 30px auto;\n grid-template-columns: 100%;\n color: white;\n box-shadow: 7px 6px 2px rgba(0, 0, 0, 0.2); }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphNode-modules__header-container {\n grid-row: 1;\n grid-column: 1;\n position: relative;\n border: 4px solid black;\n border-top-right-radius: 7px;\n border-top-left-radius: 7px;\n background: black;\n color: white;\n transform: scaleX(1.01) translateY(-0.5px);\n transform-origin: center;\n display: grid;\n grid-template-columns: 1fr auto;\n grid-template-rows: 100%; }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphNode-modules__headerIcon {\n position: absolute;\n right: 0px;\n top: 2px;\n z-index: 10;\n justify-self: end;\n align-self: center;\n user-select: none;\n pointer-events: none;\n width: 20px;\n display: grid;\n margin-left: 6px; }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphNode-modules__header {\n font-size: 16px;\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 190px; }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphNode-modules__connections {\n grid-row: 2;\n grid-column: 1;\n display: grid;\n grid-template-columns: 50% 50%;\n transform: scale(1); }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphNode-modules__content {\n min-height: 20px;\n grid-row: 3;\n grid-column: 1; }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphNode-modules__comments {\n position: absolute;\n top: -50px;\n width: 200px;\n height: 45px;\n overflow: hidden;\n font-style: italic;\n opacity: 0.8;\n display: grid;\n align-items: flex-end;\n pointer-events: none; }\n\n.\\---------dev-sharedUiComponents-dist-nodeGraphSystem-graphNode-modules__selected {\n border-color: white !important; }\n", "",{"version":3,"sources":["webpack://./../../../dev/sharedUiComponents/dist/nodeGraphSystem/graphNode.modules.scss"],"names":[],"mappings":"AAAA;EACI,UAAU;EACV,YAAY;EACZ,kBAAkB;EAClB,OAAO;EACP,MAAM;EACN,gBAAgB;EAChB,uBAAuB;EACvB,mBAAmB;EACnB,aAAa;EACb,6BAA6B;EAC7B,2BAA2B;EAC3B,YAAY;EACZ,0CAA0C,EAAA;;AAG9C;EACI,WAAW;EACX,cAAc;EACd,kBAAkB;EAClB,uBAAuB;EACvB,4BAA4B;EAC5B,2BAA2B;EAC3B,iBAAiB;EACjB,YAAY;EACZ,0CAA0C;EAC1C,wBAAwB;EACxB,aAAa;EACb,+BAA+B;EAC/B,wBAAwB,EAAA;;AAG5B;EACI,kBAAkB;EAClB,UAAU;EACV,QAAQ;EACR,WAAW;EACX,iBAAiB;EACjB,kBAAkB;EAClB,iBAAiB;EACjB,oBAAoB;EACpB,WAAW;EACX,aAAa;EACb,gBAAgB,EAAA;;AAGpB;EACI,eAAe;EACf,kBAAkB;EAClB,mBAAmB;EACnB,uBAAuB;EACvB,gBAAgB;EAChB,gBAAgB,EAAA;;AAGpB;EACI,WAAW;EACX,cAAc;EAEd,aAAa;EACb,8BAA8B;EAC9B,mBAAmB,EAAA;;AAGvB;EACI,gBAAgB;EAChB,WAAW;EACX,cAAc,EAAA;;AAGlB;EACI,kBAAkB;EAClB,UAAU;EACV,YAAY;EACZ,YAAY;EACZ,gBAAgB;EAChB,kBAAkB;EAClB,YAAY;EACZ,aAAa;EACb,qBAAqB;EACrB,oBAAoB,EAAA;;AAGxB;EACI,8BAA8B,EAAA","sourcesContent":[".visual {\r\n z-index: 4;\r\n width: 200px;\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n background: gray;\r\n border: 4px solid black;\r\n border-radius: 12px;\r\n display: grid;\r\n grid-template-rows: 30px auto;\r\n grid-template-columns: 100%;\r\n color: white;\r\n box-shadow: 7px 6px 2px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.header-container {\r\n grid-row: 1;\r\n grid-column: 1;\r\n position: relative;\r\n border: 4px solid black;\r\n border-top-right-radius: 7px;\r\n border-top-left-radius: 7px;\r\n background: black;\r\n color: white;\r\n transform: scaleX(1.01) translateY(-0.5px);\r\n transform-origin: center;\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n grid-template-rows: 100%;\r\n}\r\n\r\n.headerIcon {\r\n position: absolute;\r\n right: 0px;\r\n top: 2px;\r\n z-index: 10;\r\n justify-self: end;\r\n align-self: center;\r\n user-select: none;\r\n pointer-events: none;\r\n width: 20px;\r\n display: grid;\r\n margin-left: 6px;\r\n}\r\n\r\n.header {\r\n font-size: 16px;\r\n text-align: center;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n max-width: 190px;\r\n}\r\n\r\n.connections {\r\n grid-row: 2;\r\n grid-column: 1;\r\n\r\n display: grid;\r\n grid-template-columns: 50% 50%;\r\n transform: scale(1);\r\n}\r\n\r\n.content {\r\n min-height: 20px;\r\n grid-row: 3;\r\n grid-column: 1;\r\n}\r\n\r\n.comments {\r\n position: absolute;\r\n top: -50px;\r\n width: 200px;\r\n height: 45px;\r\n overflow: hidden;\r\n font-style: italic;\r\n opacity: 0.8;\r\n display: grid;\r\n align-items: flex-end;\r\n pointer-events: none;\r\n}\r\n\r\n.selected {\r\n border-color: white !important;\r\n}\r\n"],"sourceRoot":""}]);
362
362
  // Exports
363
363
  ___CSS_LOADER_EXPORT___.locals = {
364
364
  "visual": "---------dev-sharedUiComponents-dist-nodeGraphSystem-graphNode-modules__visual",
@@ -48759,11 +48759,6 @@ __webpack_require__.r(__webpack_exports__);
48759
48759
  // eslint-disable-next-line @typescript-eslint/naming-convention
48760
48760
  const Null_Value = Number.MAX_SAFE_INTEGER;
48761
48761
  class OptionsLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
48762
- constructor(props) {
48763
- super(props);
48764
- this._localChange = false;
48765
- this.state = { value: this._remapValueIn(this._getValue(props)) };
48766
- }
48767
48762
  _remapValueIn(value) {
48768
48763
  return this.props.allowNullValue && value === null ? Null_Value : value;
48769
48764
  }
@@ -48776,6 +48771,11 @@ class OptionsLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
48776
48771
  }
48777
48772
  return props.target && props.propertyName ? props.target[props.propertyName] : props.options[props.defaultIfNull || 0];
48778
48773
  }
48774
+ constructor(props) {
48775
+ super(props);
48776
+ this._localChange = false;
48777
+ this.state = { value: this._remapValueIn(this._getValue(props)) };
48778
+ }
48779
48779
  shouldComponentUpdate(nextProps, nextState) {
48780
48780
  if (this._localChange) {
48781
48781
  this._localChange = false;
@@ -49544,25 +49544,6 @@ __webpack_require__.r(__webpack_exports__);
49544
49544
 
49545
49545
 
49546
49546
  class FrameNodePort extends _nodePort__WEBPACK_IMPORTED_MODULE_1__.NodePort {
49547
- constructor(portContainer, portData, node, stateManager, isInput, framePortId, parentFrameId) {
49548
- super(portContainer, portData, node, stateManager);
49549
- this.portData = portData;
49550
- this.node = node;
49551
- this._onFramePortPositionChangedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
49552
- this._parentFrameId = parentFrameId;
49553
- this._isInput = isInput;
49554
- this._framePortId = framePortId;
49555
- this._onSelectionChangedObserver = stateManager.onSelectionChangedObservable.add((options) => {
49556
- const { selection } = options || {};
49557
- if ((0,_tools__WEBPACK_IMPORTED_MODULE_2__.IsFramePortData)(selection) && selection.port === this) {
49558
- this._img.classList.add(_common_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
49559
- }
49560
- else {
49561
- this._img.classList.remove(_common_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
49562
- }
49563
- });
49564
- this.refresh();
49565
- }
49566
49547
  get parentFrameId() {
49567
49548
  return this._parentFrameId;
49568
49549
  }
@@ -49582,6 +49563,25 @@ class FrameNodePort extends _nodePort__WEBPACK_IMPORTED_MODULE_1__.NodePort {
49582
49563
  this._framePortPosition = position;
49583
49564
  this.onFramePortPositionChangedObservable.notifyObservers(this);
49584
49565
  }
49566
+ constructor(portContainer, portData, node, stateManager, isInput, framePortId, parentFrameId) {
49567
+ super(portContainer, portData, node, stateManager);
49568
+ this.portData = portData;
49569
+ this.node = node;
49570
+ this._onFramePortPositionChangedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
49571
+ this._parentFrameId = parentFrameId;
49572
+ this._isInput = isInput;
49573
+ this._framePortId = framePortId;
49574
+ this._onSelectionChangedObserver = stateManager.onSelectionChangedObservable.add((options) => {
49575
+ const { selection } = options || {};
49576
+ if ((0,_tools__WEBPACK_IMPORTED_MODULE_2__.IsFramePortData)(selection) && selection.port === this) {
49577
+ this._img.classList.add(_common_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
49578
+ }
49579
+ else {
49580
+ this._img.classList.remove(_common_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
49581
+ }
49582
+ });
49583
+ this.refresh();
49584
+ }
49585
49585
  static CreateFrameNodePortElement(portData, node, root, displayManager, stateManager, isInput, framePortId, parentFrameId) {
49586
49586
  const portContainer = root.ownerDocument.createElement("div");
49587
49587
  portContainer.classList.add(_common_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].portLine);
@@ -49647,6 +49647,87 @@ __webpack_require__.r(__webpack_exports__);
49647
49647
 
49648
49648
 
49649
49649
  class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
49650
+ get gridSize() {
49651
+ return this._gridSize;
49652
+ }
49653
+ set gridSize(value) {
49654
+ this._gridSize = value;
49655
+ this.updateTransform();
49656
+ }
49657
+ get stateManager() {
49658
+ return this.props.stateManager;
49659
+ }
49660
+ get nodes() {
49661
+ return this._nodes;
49662
+ }
49663
+ get links() {
49664
+ return this._links;
49665
+ }
49666
+ get frames() {
49667
+ return this._frames;
49668
+ }
49669
+ get zoom() {
49670
+ return this._zoom;
49671
+ }
49672
+ set zoom(value) {
49673
+ if (this._zoom === value) {
49674
+ return;
49675
+ }
49676
+ this._zoom = value;
49677
+ this.updateTransform();
49678
+ }
49679
+ get x() {
49680
+ return this._x;
49681
+ }
49682
+ set x(value) {
49683
+ this._x = value;
49684
+ this.updateTransform();
49685
+ }
49686
+ get y() {
49687
+ return this._y;
49688
+ }
49689
+ set y(value) {
49690
+ this._y = value;
49691
+ this.updateTransform();
49692
+ }
49693
+ get selectedNodes() {
49694
+ return this._selectedNodes;
49695
+ }
49696
+ get selectedLink() {
49697
+ return this._selectedLink;
49698
+ }
49699
+ get selectedFrames() {
49700
+ return this._selectedFrames;
49701
+ }
49702
+ get selectedPort() {
49703
+ return this._selectedPort;
49704
+ }
49705
+ get canvasContainer() {
49706
+ return this._graphCanvas;
49707
+ }
49708
+ get hostCanvas() {
49709
+ return this._hostCanvas;
49710
+ }
49711
+ get svgCanvas() {
49712
+ return this._svgCanvas;
49713
+ }
49714
+ get selectionContainer() {
49715
+ return this._selectionContainer;
49716
+ }
49717
+ get frameContainer() {
49718
+ return this._frameContainer;
49719
+ }
49720
+ // There is a selection conflict between nodes and frames if any selected node is inside any selected frame
49721
+ _selectedFrameAndNodesConflict(frameSelection, nodeSelection) {
49722
+ for (const frame of frameSelection) {
49723
+ for (const node of nodeSelection) {
49724
+ if (frame.nodes.includes(node)) {
49725
+ return true;
49726
+ }
49727
+ }
49728
+ }
49729
+ return false;
49730
+ }
49650
49731
  constructor(props) {
49651
49732
  super(props);
49652
49733
  this._minZoom = 0.1;
@@ -49799,87 +49880,6 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
49799
49880
  }
49800
49881
  };
49801
49882
  }
49802
- get gridSize() {
49803
- return this._gridSize;
49804
- }
49805
- set gridSize(value) {
49806
- this._gridSize = value;
49807
- this.updateTransform();
49808
- }
49809
- get stateManager() {
49810
- return this.props.stateManager;
49811
- }
49812
- get nodes() {
49813
- return this._nodes;
49814
- }
49815
- get links() {
49816
- return this._links;
49817
- }
49818
- get frames() {
49819
- return this._frames;
49820
- }
49821
- get zoom() {
49822
- return this._zoom;
49823
- }
49824
- set zoom(value) {
49825
- if (this._zoom === value) {
49826
- return;
49827
- }
49828
- this._zoom = value;
49829
- this.updateTransform();
49830
- }
49831
- get x() {
49832
- return this._x;
49833
- }
49834
- set x(value) {
49835
- this._x = value;
49836
- this.updateTransform();
49837
- }
49838
- get y() {
49839
- return this._y;
49840
- }
49841
- set y(value) {
49842
- this._y = value;
49843
- this.updateTransform();
49844
- }
49845
- get selectedNodes() {
49846
- return this._selectedNodes;
49847
- }
49848
- get selectedLink() {
49849
- return this._selectedLink;
49850
- }
49851
- get selectedFrames() {
49852
- return this._selectedFrames;
49853
- }
49854
- get selectedPort() {
49855
- return this._selectedPort;
49856
- }
49857
- get canvasContainer() {
49858
- return this._graphCanvas;
49859
- }
49860
- get hostCanvas() {
49861
- return this._hostCanvas;
49862
- }
49863
- get svgCanvas() {
49864
- return this._svgCanvas;
49865
- }
49866
- get selectionContainer() {
49867
- return this._selectionContainer;
49868
- }
49869
- get frameContainer() {
49870
- return this._frameContainer;
49871
- }
49872
- // There is a selection conflict between nodes and frames if any selected node is inside any selected frame
49873
- _selectedFrameAndNodesConflict(frameSelection, nodeSelection) {
49874
- for (const frame of frameSelection) {
49875
- for (const node of nodeSelection) {
49876
- if (frame.nodes.includes(node)) {
49877
- return true;
49878
- }
49879
- }
49880
- }
49881
- return false;
49882
- }
49883
49883
  populateConnectedEntriesBeforeRemoval(item, items, inputs, outputs) {
49884
49884
  inputs.push(...item.content.inputs.filter((i) => i.isConnected && items.every((selected) => selected.content.data !== i.connectedPort?.ownerData)).map((i) => i.connectedPort));
49885
49885
  outputs.push(...item.content.outputs
@@ -50876,200 +50876,580 @@ var FramePortPosition;
50876
50876
  FramePortPosition[FramePortPosition["Bottom"] = 2] = "Bottom";
50877
50877
  })(FramePortPosition || (FramePortPosition = {}));
50878
50878
  class GraphFrame {
50879
- constructor(candidate, canvas, doNotCaptureNodes = false) {
50880
- this._collapsedWidth = 200;
50881
- this._x = 0;
50882
- this._y = 0;
50883
- this._gridAlignedX = 0;
50884
- this._gridAlignedY = 0;
50885
- this._nodes = [];
50886
- this._mouseStartPointX = null;
50887
- this._mouseStartPointY = null;
50888
- this._onNodeLinkDisposedObservers = [];
50889
- this._isCollapsed = false;
50890
- this._frameInPorts = [];
50891
- this._frameOutPorts = [];
50892
- this._controlledPorts = []; // Ports on Nodes that are shown on outside of frame
50893
- this._exposedInPorts = [];
50894
- this._exposedOutPorts = [];
50895
- this._minFrameHeight = 40;
50896
- this._minFrameWidth = 220;
50897
- this.onExpandStateChanged = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
50898
- this._closeSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g id="Layer_2" data-name="Layer 2"><path d="M16,15l5.85,5.84-1,1L15,15.93,9.15,21.78l-1-1L14,15,8.19,9.12l1-1L15,14l5.84-5.84,1,1Z"/></g></svg>`;
50899
- this._expandSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g id="Layer_2" data-name="Layer 2"><path d="M22.31,7.69V22.31H7.69V7.69ZM21.19,8.81H8.81V21.19H21.19Zm-6.75,6.75H11.06V14.44h3.38V11.06h1.12v3.38h3.38v1.12H15.56v3.38H14.44Z"/></g></svg>`;
50900
- this._collapseSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g id="Layer_2" data-name="Layer 2"><path d="M22.31,7.69V22.31H7.69V7.69ZM21.19,8.81H8.81V21.19H21.19Zm-2.25,6.75H11.06V14.44h7.88Z"/></g></svg>`;
50901
- this._initResizing = (evt) => {
50902
- evt.stopPropagation();
50903
- this._mouseStartPointX = evt.clientX;
50904
- this._mouseStartPointY = evt.clientY;
50905
- this._frameIsResizing = true;
50906
- };
50907
- this._cleanUpResizing = (evt) => {
50908
- evt.stopPropagation();
50909
- this._frameIsResizing = false;
50910
- this._resizingDirection = null;
50911
- this._mouseStartPointX = null;
50912
- this._mouseStartPointY = null;
50913
- this._mouseXLimit = null;
50914
- this.refresh();
50915
- };
50916
- this._updateMinHeightWithComments = () => {
50917
- if (this.comments && this.comments.length > 0) {
50918
- const minFrameHeightWithComments = this._commentsElement.offsetHeight + 40;
50919
- this._minFrameHeight = minFrameHeightWithComments;
50920
- }
50921
- };
50922
- this._onRightHandlePointerDown = (evt) => {
50923
- if (this.isCollapsed) {
50924
- return;
50925
- }
50926
- this._initResizing(evt);
50927
- this._resizingDirection = ResizingDirection.Right;
50928
- this._mouseXLimit = evt.clientX - (this.width - this._minFrameWidth);
50929
- this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onRightHandlePointerUp);
50930
- this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onRightHandlePointerMove);
50931
- };
50932
- this._onRightHandlePointerMove = (evt) => {
50933
- const slack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
50934
- const xLimit = this._mouseStartPointX - slack;
50935
- this._moveRightHandle(evt, xLimit);
50936
- };
50937
- this._moveRightHandle = (evt, xLimit) => {
50938
- // tslint:disable-next-line: no-this-assignment
50939
- if (this._mouseXLimit) {
50940
- if (!this._isResizingRight() || this._mouseStartPointX === null || this._mouseStartPointY === null || evt.clientX < xLimit) {
50941
- return;
50879
+ get id() {
50880
+ return this._id;
50881
+ }
50882
+ get isCollapsed() {
50883
+ return this._isCollapsed;
50884
+ }
50885
+ _createInputPort(port, node) {
50886
+ const localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_1__.FrameNodePort.CreateFrameNodePortElement(port.portData, node, this._inputPortContainer, null, this._ownerCanvas.stateManager, true, GraphFrame._FramePortCounter++, this.id);
50887
+ this._frameInPorts.push(localPort);
50888
+ port.delegatedPort = localPort;
50889
+ this._controlledPorts.push(port);
50890
+ port.exposedPortPosition = this._exposedInPorts.findIndex((nodePort) => nodePort === port);
50891
+ if (port.exposedPortPosition < 0) {
50892
+ this._exposedInPorts.push(port);
50893
+ port.exposedPortPosition = this._exposedInPorts.length - 1;
50894
+ }
50895
+ }
50896
+ // Mark ports with FramePortPosition for re-arrangement support
50897
+ _markFramePortPositions() {
50898
+ // mark FrameInPorts
50899
+ if (this._frameInPorts.length == 2) {
50900
+ this._frameInPorts[0].framePortPosition = FramePortPosition.Top;
50901
+ this._frameInPorts[1].framePortPosition = FramePortPosition.Bottom;
50902
+ }
50903
+ else {
50904
+ for (let i = 0; i < this._frameInPorts.length; i++) {
50905
+ const port = this._frameInPorts[i];
50906
+ if (i === 0) {
50907
+ port.framePortPosition = FramePortPosition.Top;
50942
50908
  }
50943
- if (this._isResizingRight()) {
50944
- evt.stopPropagation();
50945
- const distanceMouseMoved = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
50946
- this._expandRight(distanceMouseMoved, evt.clientX);
50947
- this._mouseStartPointX = evt.clientX;
50909
+ else if (i === this._frameInPorts.length - 1) {
50910
+ port.framePortPosition = FramePortPosition.Bottom;
50911
+ }
50912
+ else {
50913
+ port.framePortPosition = FramePortPosition.Middle;
50948
50914
  }
50949
50915
  }
50950
- };
50951
- this._onRightHandlePointerUp = (evt) => {
50952
- if (this._isResizingRight()) {
50953
- this.width = parseFloat(this.element.style.width.replace("px", ""));
50954
- this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onRightHandlePointerUp);
50955
- this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onRightHandlePointerMove);
50956
- this._cleanUpResizing(evt);
50957
- }
50958
- };
50959
- this._onBottomHandlePointerDown = (evt) => {
50960
- if (this.isCollapsed) {
50961
- return;
50962
- }
50963
- this._initResizing(evt);
50964
- this._resizingDirection = ResizingDirection.Bottom;
50965
- this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onBottomHandlePointerMove);
50966
- this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onBottomHandlePointerUp);
50967
- };
50968
- this._onBottomHandlePointerMove = (evt) => {
50969
- const slack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
50970
- const yLimit = this._mouseStartPointY - slack;
50971
- this._moveBottomHandle(evt, yLimit);
50972
- };
50973
- this._moveBottomHandle = (evt, yLimit) => {
50974
- if (this._resizingDirection !== ResizingDirection.Bottom || this._mouseStartPointX === null || this._mouseStartPointY === null || evt.clientY < yLimit) {
50975
- return;
50976
- }
50977
- if (this._resizingDirection === ResizingDirection.Bottom) {
50978
- evt.stopPropagation();
50979
- const distanceMouseMoved = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
50980
- this._expandBottom(distanceMouseMoved);
50981
- this._mouseStartPointY = evt.clientY;
50982
- }
50983
- };
50984
- this._onBottomHandlePointerUp = (evt) => {
50985
- if (this._resizingDirection === ResizingDirection.Bottom) {
50986
- this.height = parseFloat(this.element.style.height.replace("px", ""));
50987
- this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onBottomHandlePointerMove);
50988
- this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onBottomHandlePointerUp);
50989
- this._cleanUpResizing(evt);
50990
- }
50991
- };
50992
- this._onLeftHandlePointerDown = (evt) => {
50993
- if (this.isCollapsed) {
50994
- return;
50916
+ }
50917
+ // mark FrameOutPorts
50918
+ if (this._frameOutPorts.length == 2) {
50919
+ this._frameOutPorts[0].framePortPosition = FramePortPosition.Top;
50920
+ this._frameOutPorts[1].framePortPosition = FramePortPosition.Bottom;
50921
+ }
50922
+ else {
50923
+ for (let i = 0; i < this._frameOutPorts.length; i++) {
50924
+ const port = this._frameOutPorts[i];
50925
+ if (i === 0) {
50926
+ port.framePortPosition = FramePortPosition.Top;
50927
+ }
50928
+ else if (i === this._frameInPorts.length - 1) {
50929
+ port.framePortPosition = FramePortPosition.Bottom;
50930
+ }
50931
+ else {
50932
+ port.framePortPosition = FramePortPosition.Middle;
50933
+ }
50995
50934
  }
50996
- this._initResizing(evt);
50997
- this._resizingDirection = ResizingDirection.Left;
50998
- this._mouseXLimit = evt.clientX + this.width - this._minFrameWidth;
50999
- this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onLeftHandlePointerUp);
51000
- this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onLeftHandlePointerMove);
51001
- };
51002
- this._onLeftHandlePointerMove = (evt) => {
51003
- const slack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
51004
- const xLimit = this._mouseStartPointX + slack;
51005
- this._moveLeftHandle(evt, xLimit);
51006
- };
51007
- this._moveLeftHandle = (evt, xLimit) => {
51008
- if (this._mouseXLimit) {
51009
- if (this._resizingDirection !== ResizingDirection.Left || this._mouseStartPointX === null || this._mouseStartPointY === null || evt.clientX > xLimit) {
51010
- return;
50935
+ }
50936
+ }
50937
+ _createFramePorts() {
50938
+ for (const node of this._nodes) {
50939
+ node.isVisible = false;
50940
+ }
50941
+ for (let i = 0; i < this._exposedOutPorts.length;) {
50942
+ // Output
50943
+ const port = this._exposedOutPorts[i];
50944
+ if (port) {
50945
+ if (port.node === null || port.node.enclosingFrameId != this.id) {
50946
+ if (this._removePortFromExposedWithNode(port, this._exposedOutPorts))
50947
+ continue;
51011
50948
  }
51012
- if (this._resizingDirection === ResizingDirection.Left) {
51013
- evt.stopPropagation();
51014
- const distanceMouseMoved = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
51015
- this._expandLeft(distanceMouseMoved);
51016
- this._mouseStartPointX = evt.clientX;
50949
+ else {
50950
+ if (!this._createOutputPorts(port, port.node) && this._removePortFromExposedWithNode(port, this._exposedOutPorts)) {
50951
+ continue;
50952
+ }
51017
50953
  }
51018
50954
  }
51019
- };
51020
- this._onLeftHandlePointerUp = (evt) => {
51021
- if (this._resizingDirection === ResizingDirection.Left) {
51022
- this.x = parseFloat(this.element.style.left.replace("px", ""));
51023
- this.width = parseFloat(this.element.style.width.replace("px", ""));
51024
- this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onLeftHandlePointerUp);
51025
- this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onLeftHandlePointerMove);
51026
- this._cleanUpResizing(evt);
50955
+ ++i;
50956
+ }
50957
+ for (let i = 0; i < this._exposedInPorts.length;) {
50958
+ // Input
50959
+ const port = this._exposedInPorts[i];
50960
+ if (!port || port.node === null || port.node.enclosingFrameId != this.id) {
50961
+ if (this._removePortFromExposedWithNode(port, this._exposedInPorts)) {
50962
+ continue;
50963
+ }
51027
50964
  }
51028
- };
51029
- this._onTopHandlePointerDown = (evt) => {
51030
- if (this.isCollapsed) {
51031
- return;
50965
+ else {
50966
+ if (!this._createInputPorts(port, port.node) && this._removePortFromExposedWithNode(port, this._exposedInPorts)) {
50967
+ continue;
50968
+ }
51032
50969
  }
51033
- this._initResizing(evt);
51034
- this._resizingDirection = ResizingDirection.Top;
51035
- this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onTopHandlePointerUp);
51036
- this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onTopHandlePointerMove);
51037
- };
51038
- this._onTopHandlePointerMove = (evt) => {
51039
- const slack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
51040
- const yLimit = this._mouseStartPointY + slack;
51041
- this._moveTopHandle(evt, yLimit);
51042
- };
51043
- this._moveTopHandle = (evt, yLimit) => {
51044
- if (!this._isResizingTop() || this._mouseStartPointX === null || this._mouseStartPointY === null || evt.clientY > yLimit) {
51045
- return;
50970
+ ++i;
50971
+ }
50972
+ for (const node of this._nodes) {
50973
+ for (const port of node.outputPorts) {
50974
+ // Output
50975
+ port.exposedPortPosition = this._exposedOutPorts.findIndex((nodePort) => nodePort === port);
50976
+ if (port.exposedPortPosition < 0) {
50977
+ if (this._createOutputPorts(port, node)) {
50978
+ port.node.enclosingFrameId = this.id;
50979
+ this._exposedOutPorts.push(port);
50980
+ port.exposedPortPosition = this._exposedOutPorts.length - 1;
50981
+ }
50982
+ }
51046
50983
  }
51047
- if (this._isResizingTop()) {
51048
- evt.stopPropagation();
51049
- const distanceMouseMoved = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
51050
- this._expandTop(distanceMouseMoved);
51051
- this._mouseStartPointY = evt.clientY;
50984
+ for (const port of node.inputPorts) {
50985
+ // Input
50986
+ port.exposedPortPosition = this._exposedInPorts.findIndex((nodePort) => nodePort === port);
50987
+ if (port.exposedPortPosition < 0) {
50988
+ this._createInputPorts(port, node);
50989
+ }
51052
50990
  }
51053
- };
51054
- this._onTopHandlePointerUp = (evt) => {
51055
- if (this._isResizingTop()) {
51056
- this.y = parseFloat(this.element.style.top.replace("px", ""));
51057
- this.height = parseFloat(this.element.style.height.replace("px", ""));
51058
- this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onTopHandlePointerUp);
51059
- this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onTopHandlePointerMove);
51060
- this._cleanUpResizing(evt);
50991
+ }
50992
+ }
50993
+ _removePortFromExposedWithNode(port, exposedPorts) {
50994
+ const index = exposedPorts.findIndex((nodePort) => nodePort === port);
50995
+ if (index >= 0) {
50996
+ exposedPorts.splice(index, 1);
50997
+ if (port) {
50998
+ port.exposedPortPosition = -1;
51061
50999
  }
51062
- };
51063
- this._onTopRightHandlePointerDown = (evt) => {
51064
- if (this.isCollapsed) {
51065
- return;
51000
+ return true;
51001
+ }
51002
+ return false;
51003
+ }
51004
+ _removePortFromExposedWithLink(nodeLink, exposedPorts) {
51005
+ const aPort = exposedPorts.findIndex((nodePort) => nodePort === nodeLink.portA);
51006
+ const bPort = exposedPorts.findIndex((nodePort) => nodePort === nodeLink.portB);
51007
+ if (aPort >= 0) {
51008
+ if (!nodeLink.portA.exposedOnFrame) {
51009
+ exposedPorts.splice(aPort, 1);
51010
+ nodeLink.portA.exposedPortPosition = -1;
51011
+ return true;
51066
51012
  }
51067
- this._initResizing(evt);
51068
- this._resizingDirection = ResizingDirection.TopRight;
51069
- this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onTopRightHandlePointerUp);
51070
- this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onTopRightHandlePointerMove);
51071
- };
51072
- this._onTopRightHandlePointerMove = (evt) => {
51013
+ }
51014
+ else if (bPort >= 0) {
51015
+ if (nodeLink.portB && !nodeLink.portB.exposedOnFrame) {
51016
+ exposedPorts.splice(bPort, 1);
51017
+ nodeLink.portB.exposedPortPosition = -1;
51018
+ return true;
51019
+ }
51020
+ }
51021
+ return false;
51022
+ }
51023
+ _createInputPorts(port, node) {
51024
+ if (port.portData.isConnected) {
51025
+ let portAdded = false;
51026
+ for (const link of node.links) {
51027
+ if (link.portB === port && this.nodes.indexOf(link.nodeA) === -1) {
51028
+ this._createInputPort(port, node);
51029
+ link.isVisible = true;
51030
+ portAdded = true;
51031
+ const onLinkDisposedObserver = link.onDisposedObservable.add((nodeLink) => {
51032
+ if (this._removePortFromExposedWithLink(nodeLink, this._exposedInPorts)) {
51033
+ this.redrawFramePorts();
51034
+ }
51035
+ });
51036
+ this._onNodeLinkDisposedObservers.push(onLinkDisposedObserver);
51037
+ }
51038
+ }
51039
+ if (portAdded)
51040
+ return true;
51041
+ }
51042
+ else if (port.exposedOnFrame) {
51043
+ this._createInputPort(port, node);
51044
+ return true;
51045
+ }
51046
+ return false;
51047
+ }
51048
+ _createOutputPorts(port, node) {
51049
+ if (port.portData.hasEndpoints) {
51050
+ let portAdded = false;
51051
+ for (const link of node.links) {
51052
+ if (link.portA === port && this.nodes.indexOf(link.nodeB) === -1) {
51053
+ let localPort;
51054
+ if (!portAdded) {
51055
+ portAdded = true;
51056
+ localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_1__.FrameNodePort.CreateFrameNodePortElement(port.portData, link.nodeA, this._outputPortContainer, null, this._ownerCanvas.stateManager, false, GraphFrame._FramePortCounter++, this.id);
51057
+ this._frameOutPorts.push(localPort);
51058
+ link.isVisible = true;
51059
+ const onLinkDisposedObserver = link.onDisposedObservable.add((nodeLink) => {
51060
+ if (this._removePortFromExposedWithLink(nodeLink, this._exposedOutPorts)) {
51061
+ this.redrawFramePorts();
51062
+ }
51063
+ });
51064
+ this._onNodeLinkDisposedObservers.push(onLinkDisposedObserver);
51065
+ }
51066
+ else if (this.nodes.indexOf(link.nodeB) === -1) {
51067
+ link.isVisible = true;
51068
+ localPort = this.ports.filter((p) => p.portData === port.portData)[0];
51069
+ }
51070
+ else {
51071
+ localPort = this.ports.filter((p) => p.portData === port.portData)[0];
51072
+ }
51073
+ port.delegatedPort = localPort;
51074
+ this._controlledPorts.push(port);
51075
+ }
51076
+ else if (port.exposedPortPosition >= 0 && !portAdded) {
51077
+ const localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_1__.FrameNodePort.CreateFrameNodePortElement(port.portData, node, this._outputPortContainer, null, this._ownerCanvas.stateManager, false, GraphFrame._FramePortCounter++, this.id);
51078
+ this._frameOutPorts.push(localPort);
51079
+ port.delegatedPort = localPort;
51080
+ this._controlledPorts.push(port);
51081
+ portAdded = true;
51082
+ }
51083
+ }
51084
+ if (portAdded)
51085
+ return true;
51086
+ }
51087
+ else if (port.exposedOnFrame) {
51088
+ const localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_1__.FrameNodePort.CreateFrameNodePortElement(port.portData, node, this._outputPortContainer, null, this._ownerCanvas.stateManager, false, GraphFrame._FramePortCounter++, this.id);
51089
+ this._frameOutPorts.push(localPort);
51090
+ port.delegatedPort = localPort;
51091
+ this._controlledPorts.push(port);
51092
+ return true;
51093
+ }
51094
+ return false;
51095
+ }
51096
+ redrawFramePorts() {
51097
+ if (!this.isCollapsed) {
51098
+ return;
51099
+ }
51100
+ this._outputPortContainer.innerHTML = "";
51101
+ this._inputPortContainer.innerHTML = "";
51102
+ this.ports.forEach((framePort) => {
51103
+ framePort.dispose();
51104
+ });
51105
+ this._controlledPorts.forEach((port) => {
51106
+ port.delegatedPort = null;
51107
+ port.refresh();
51108
+ });
51109
+ this._frameInPorts = [];
51110
+ this._frameOutPorts = [];
51111
+ this._controlledPorts = [];
51112
+ this._createFramePorts();
51113
+ this._markFramePortPositions();
51114
+ this.ports.forEach((framePort) => framePort.node._refreshLinks());
51115
+ }
51116
+ set isCollapsed(value) {
51117
+ if (this._isCollapsed === value) {
51118
+ return;
51119
+ }
51120
+ this._isCollapsed = value;
51121
+ this._ownerCanvas._frameIsMoving = true;
51122
+ // Need to delegate the outside ports to the frame
51123
+ if (value) {
51124
+ this.element.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].collapsed);
51125
+ this.element.classList.remove(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].expanded);
51126
+ this._headerElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].collapsedHeader);
51127
+ this._moveFrame((this.width - this._collapsedWidth) / 2, 0);
51128
+ this._createFramePorts();
51129
+ this._markFramePortPositions();
51130
+ }
51131
+ else {
51132
+ this.element.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].expanded);
51133
+ this.element.classList.remove(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].collapsed);
51134
+ this._headerElement.classList.remove(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].collapsedHeader);
51135
+ this._outputPortContainer.innerHTML = "";
51136
+ this._inputPortContainer.innerHTML = "";
51137
+ this._frameInPorts.forEach((p) => {
51138
+ p.dispose();
51139
+ });
51140
+ this._frameOutPorts.forEach((p) => {
51141
+ p.dispose();
51142
+ });
51143
+ this._controlledPorts.forEach((port) => {
51144
+ port.delegatedPort = null;
51145
+ port.refresh();
51146
+ });
51147
+ this._frameInPorts = [];
51148
+ this._frameOutPorts = [];
51149
+ this._controlledPorts = [];
51150
+ this._onNodeLinkDisposedObservers = [];
51151
+ for (const node of this._nodes) {
51152
+ node.isVisible = true;
51153
+ }
51154
+ this._moveFrame(-(this.width - this._collapsedWidth) / 2, 0);
51155
+ }
51156
+ this.cleanAccumulation();
51157
+ this._ownerCanvas._frameIsMoving = false;
51158
+ // UI
51159
+ if (this._isCollapsed) {
51160
+ this._headerCollapseElement.innerHTML = this._expandSVG;
51161
+ this._headerCollapseElement.title = "Expand";
51162
+ }
51163
+ else {
51164
+ this._headerCollapseElement.innerHTML = this._collapseSVG;
51165
+ this._headerCollapseElement.title = "Collapse";
51166
+ }
51167
+ this.onExpandStateChanged.notifyObservers(this);
51168
+ }
51169
+ get nodes() {
51170
+ return this._nodes;
51171
+ }
51172
+ get ports() {
51173
+ return this._frameInPorts.concat(this._frameOutPorts);
51174
+ }
51175
+ get name() {
51176
+ return this._name;
51177
+ }
51178
+ set name(value) {
51179
+ this._name = value;
51180
+ this._headerTextElement.innerHTML = value;
51181
+ }
51182
+ get color() {
51183
+ return this._color;
51184
+ }
51185
+ set color(value) {
51186
+ this._color = value;
51187
+ this._headerElement.style.background = `rgba(${value.r * 255}, ${value.g * 255}, ${value.b * 255}, 1)`;
51188
+ this._headerElement.style.borderColor = `rgba(${value.r * 255}, ${value.g * 255}, ${value.b * 255}, 1)`;
51189
+ this.element.style.background = `rgba(${value.r * 255}, ${value.g * 255}, ${value.b * 255}, 0.7)`;
51190
+ }
51191
+ get x() {
51192
+ return this._x;
51193
+ }
51194
+ set x(value) {
51195
+ if (this._x === value) {
51196
+ return;
51197
+ }
51198
+ this._x = value;
51199
+ this._gridAlignedX = this._ownerCanvas.getGridPosition(value);
51200
+ this.element.style.left = `${this._gridAlignedX}px`;
51201
+ }
51202
+ get y() {
51203
+ return this._y;
51204
+ }
51205
+ set y(value) {
51206
+ if (this._y === value) {
51207
+ return;
51208
+ }
51209
+ this._y = value;
51210
+ this._gridAlignedY = this._ownerCanvas.getGridPosition(value);
51211
+ this.element.style.top = `${this._gridAlignedY}px`;
51212
+ }
51213
+ get width() {
51214
+ return this._width;
51215
+ }
51216
+ set width(value) {
51217
+ if (this._width === value) {
51218
+ return;
51219
+ }
51220
+ const viableWidth = value > this._minFrameWidth ? value : this._minFrameWidth;
51221
+ this._width = viableWidth;
51222
+ const gridAlignedRight = this._ownerCanvas.getGridPositionCeil(viableWidth + this._gridAlignedX);
51223
+ this.element.style.width = `${gridAlignedRight - this._gridAlignedX}px`;
51224
+ }
51225
+ get height() {
51226
+ return this._height;
51227
+ }
51228
+ set height(value) {
51229
+ if (this._height === value) {
51230
+ return;
51231
+ }
51232
+ this._height = value;
51233
+ const gridAlignedBottom = this._ownerCanvas.getGridPositionCeil(value + this._gridAlignedY);
51234
+ this.element.style.height = `${gridAlignedBottom - this._gridAlignedY}px`;
51235
+ }
51236
+ get comments() {
51237
+ return this._comments;
51238
+ }
51239
+ set comments(comments) {
51240
+ if (comments && !this._comments && comments.length > 0) {
51241
+ this.element.style.gridTemplateRows = "40px min-content 1fr";
51242
+ this._borderElement.style.gridRow = "1 / span 3";
51243
+ this._portContainer.style.gridRow = "3";
51244
+ this._commentsElement.classList.add("has-comments");
51245
+ }
51246
+ else if (!comments) {
51247
+ this.element.style.gridTemplateRows = "40px calc(100% - 40px)";
51248
+ this._borderElement.style.gridRow = "1 / span 2";
51249
+ this._portContainer.style.gridRow = "2";
51250
+ this._commentsElement.classList.remove("has-comments");
51251
+ }
51252
+ if (comments === "" || (comments && comments.length >= 0)) {
51253
+ this._commentsElement.children[0].innerText = comments;
51254
+ }
51255
+ this.height = this._borderElement.offsetHeight;
51256
+ this._comments = comments;
51257
+ this._updateMinHeightWithComments();
51258
+ }
51259
+ constructor(candidate, canvas, doNotCaptureNodes = false) {
51260
+ this._collapsedWidth = 200;
51261
+ this._x = 0;
51262
+ this._y = 0;
51263
+ this._gridAlignedX = 0;
51264
+ this._gridAlignedY = 0;
51265
+ this._nodes = [];
51266
+ this._mouseStartPointX = null;
51267
+ this._mouseStartPointY = null;
51268
+ this._onNodeLinkDisposedObservers = [];
51269
+ this._isCollapsed = false;
51270
+ this._frameInPorts = [];
51271
+ this._frameOutPorts = [];
51272
+ this._controlledPorts = []; // Ports on Nodes that are shown on outside of frame
51273
+ this._exposedInPorts = [];
51274
+ this._exposedOutPorts = [];
51275
+ this._minFrameHeight = 40;
51276
+ this._minFrameWidth = 220;
51277
+ this.onExpandStateChanged = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
51278
+ this._closeSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g id="Layer_2" data-name="Layer 2"><path d="M16,15l5.85,5.84-1,1L15,15.93,9.15,21.78l-1-1L14,15,8.19,9.12l1-1L15,14l5.84-5.84,1,1Z"/></g></svg>`;
51279
+ this._expandSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g id="Layer_2" data-name="Layer 2"><path d="M22.31,7.69V22.31H7.69V7.69ZM21.19,8.81H8.81V21.19H21.19Zm-6.75,6.75H11.06V14.44h3.38V11.06h1.12v3.38h3.38v1.12H15.56v3.38H14.44Z"/></g></svg>`;
51280
+ this._collapseSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g id="Layer_2" data-name="Layer 2"><path d="M22.31,7.69V22.31H7.69V7.69ZM21.19,8.81H8.81V21.19H21.19Zm-2.25,6.75H11.06V14.44h7.88Z"/></g></svg>`;
51281
+ this._initResizing = (evt) => {
51282
+ evt.stopPropagation();
51283
+ this._mouseStartPointX = evt.clientX;
51284
+ this._mouseStartPointY = evt.clientY;
51285
+ this._frameIsResizing = true;
51286
+ };
51287
+ this._cleanUpResizing = (evt) => {
51288
+ evt.stopPropagation();
51289
+ this._frameIsResizing = false;
51290
+ this._resizingDirection = null;
51291
+ this._mouseStartPointX = null;
51292
+ this._mouseStartPointY = null;
51293
+ this._mouseXLimit = null;
51294
+ this.refresh();
51295
+ };
51296
+ this._updateMinHeightWithComments = () => {
51297
+ if (this.comments && this.comments.length > 0) {
51298
+ const minFrameHeightWithComments = this._commentsElement.offsetHeight + 40;
51299
+ this._minFrameHeight = minFrameHeightWithComments;
51300
+ }
51301
+ };
51302
+ this._onRightHandlePointerDown = (evt) => {
51303
+ if (this.isCollapsed) {
51304
+ return;
51305
+ }
51306
+ this._initResizing(evt);
51307
+ this._resizingDirection = ResizingDirection.Right;
51308
+ this._mouseXLimit = evt.clientX - (this.width - this._minFrameWidth);
51309
+ this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onRightHandlePointerUp);
51310
+ this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onRightHandlePointerMove);
51311
+ };
51312
+ this._onRightHandlePointerMove = (evt) => {
51313
+ const slack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
51314
+ const xLimit = this._mouseStartPointX - slack;
51315
+ this._moveRightHandle(evt, xLimit);
51316
+ };
51317
+ this._moveRightHandle = (evt, xLimit) => {
51318
+ // tslint:disable-next-line: no-this-assignment
51319
+ if (this._mouseXLimit) {
51320
+ if (!this._isResizingRight() || this._mouseStartPointX === null || this._mouseStartPointY === null || evt.clientX < xLimit) {
51321
+ return;
51322
+ }
51323
+ if (this._isResizingRight()) {
51324
+ evt.stopPropagation();
51325
+ const distanceMouseMoved = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
51326
+ this._expandRight(distanceMouseMoved, evt.clientX);
51327
+ this._mouseStartPointX = evt.clientX;
51328
+ }
51329
+ }
51330
+ };
51331
+ this._onRightHandlePointerUp = (evt) => {
51332
+ if (this._isResizingRight()) {
51333
+ this.width = parseFloat(this.element.style.width.replace("px", ""));
51334
+ this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onRightHandlePointerUp);
51335
+ this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onRightHandlePointerMove);
51336
+ this._cleanUpResizing(evt);
51337
+ }
51338
+ };
51339
+ this._onBottomHandlePointerDown = (evt) => {
51340
+ if (this.isCollapsed) {
51341
+ return;
51342
+ }
51343
+ this._initResizing(evt);
51344
+ this._resizingDirection = ResizingDirection.Bottom;
51345
+ this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onBottomHandlePointerMove);
51346
+ this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onBottomHandlePointerUp);
51347
+ };
51348
+ this._onBottomHandlePointerMove = (evt) => {
51349
+ const slack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
51350
+ const yLimit = this._mouseStartPointY - slack;
51351
+ this._moveBottomHandle(evt, yLimit);
51352
+ };
51353
+ this._moveBottomHandle = (evt, yLimit) => {
51354
+ if (this._resizingDirection !== ResizingDirection.Bottom || this._mouseStartPointX === null || this._mouseStartPointY === null || evt.clientY < yLimit) {
51355
+ return;
51356
+ }
51357
+ if (this._resizingDirection === ResizingDirection.Bottom) {
51358
+ evt.stopPropagation();
51359
+ const distanceMouseMoved = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
51360
+ this._expandBottom(distanceMouseMoved);
51361
+ this._mouseStartPointY = evt.clientY;
51362
+ }
51363
+ };
51364
+ this._onBottomHandlePointerUp = (evt) => {
51365
+ if (this._resizingDirection === ResizingDirection.Bottom) {
51366
+ this.height = parseFloat(this.element.style.height.replace("px", ""));
51367
+ this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onBottomHandlePointerMove);
51368
+ this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onBottomHandlePointerUp);
51369
+ this._cleanUpResizing(evt);
51370
+ }
51371
+ };
51372
+ this._onLeftHandlePointerDown = (evt) => {
51373
+ if (this.isCollapsed) {
51374
+ return;
51375
+ }
51376
+ this._initResizing(evt);
51377
+ this._resizingDirection = ResizingDirection.Left;
51378
+ this._mouseXLimit = evt.clientX + this.width - this._minFrameWidth;
51379
+ this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onLeftHandlePointerUp);
51380
+ this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onLeftHandlePointerMove);
51381
+ };
51382
+ this._onLeftHandlePointerMove = (evt) => {
51383
+ const slack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
51384
+ const xLimit = this._mouseStartPointX + slack;
51385
+ this._moveLeftHandle(evt, xLimit);
51386
+ };
51387
+ this._moveLeftHandle = (evt, xLimit) => {
51388
+ if (this._mouseXLimit) {
51389
+ if (this._resizingDirection !== ResizingDirection.Left || this._mouseStartPointX === null || this._mouseStartPointY === null || evt.clientX > xLimit) {
51390
+ return;
51391
+ }
51392
+ if (this._resizingDirection === ResizingDirection.Left) {
51393
+ evt.stopPropagation();
51394
+ const distanceMouseMoved = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
51395
+ this._expandLeft(distanceMouseMoved);
51396
+ this._mouseStartPointX = evt.clientX;
51397
+ }
51398
+ }
51399
+ };
51400
+ this._onLeftHandlePointerUp = (evt) => {
51401
+ if (this._resizingDirection === ResizingDirection.Left) {
51402
+ this.x = parseFloat(this.element.style.left.replace("px", ""));
51403
+ this.width = parseFloat(this.element.style.width.replace("px", ""));
51404
+ this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onLeftHandlePointerUp);
51405
+ this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onLeftHandlePointerMove);
51406
+ this._cleanUpResizing(evt);
51407
+ }
51408
+ };
51409
+ this._onTopHandlePointerDown = (evt) => {
51410
+ if (this.isCollapsed) {
51411
+ return;
51412
+ }
51413
+ this._initResizing(evt);
51414
+ this._resizingDirection = ResizingDirection.Top;
51415
+ this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onTopHandlePointerUp);
51416
+ this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onTopHandlePointerMove);
51417
+ };
51418
+ this._onTopHandlePointerMove = (evt) => {
51419
+ const slack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
51420
+ const yLimit = this._mouseStartPointY + slack;
51421
+ this._moveTopHandle(evt, yLimit);
51422
+ };
51423
+ this._moveTopHandle = (evt, yLimit) => {
51424
+ if (!this._isResizingTop() || this._mouseStartPointX === null || this._mouseStartPointY === null || evt.clientY > yLimit) {
51425
+ return;
51426
+ }
51427
+ if (this._isResizingTop()) {
51428
+ evt.stopPropagation();
51429
+ const distanceMouseMoved = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
51430
+ this._expandTop(distanceMouseMoved);
51431
+ this._mouseStartPointY = evt.clientY;
51432
+ }
51433
+ };
51434
+ this._onTopHandlePointerUp = (evt) => {
51435
+ if (this._isResizingTop()) {
51436
+ this.y = parseFloat(this.element.style.top.replace("px", ""));
51437
+ this.height = parseFloat(this.element.style.height.replace("px", ""));
51438
+ this._ownerCanvas.hostCanvas.removeEventListener("pointerup", this._onTopHandlePointerUp);
51439
+ this._ownerCanvas.hostCanvas.removeEventListener("pointermove", this._onTopHandlePointerMove);
51440
+ this._cleanUpResizing(evt);
51441
+ }
51442
+ };
51443
+ this._onTopRightHandlePointerDown = (evt) => {
51444
+ if (this.isCollapsed) {
51445
+ return;
51446
+ }
51447
+ this._initResizing(evt);
51448
+ this._resizingDirection = ResizingDirection.TopRight;
51449
+ this._ownerCanvas.hostCanvas.addEventListener("pointerup", this._onTopRightHandlePointerUp);
51450
+ this._ownerCanvas.hostCanvas.addEventListener("pointermove", this._onTopRightHandlePointerMove);
51451
+ };
51452
+ this._onTopRightHandlePointerMove = (evt) => {
51073
51453
  const topSlack = (this.element.offsetHeight - this._minFrameHeight) * this._ownerCanvas.zoom;
51074
51454
  const yLimit = this._mouseStartPointY + topSlack;
51075
51455
  const rightSlack = (this.element.offsetWidth - this._minFrameWidth) * this._ownerCanvas.zoom;
@@ -51388,433 +51768,53 @@ class GraphFrame {
51388
51768
  this.height = parseFloat(candidate.style.height.replace("px", ""));
51389
51769
  this.cleanAccumulation();
51390
51770
  }
51391
- this._headerTextElement.addEventListener("pointerdown", (evt) => this._onDown(evt));
51392
- this._headerTextElement.addEventListener("pointerup", (evt) => this._onUp(evt));
51393
- this._headerTextElement.addEventListener("pointermove", (evt) => this._onMove(evt));
51394
- this._onSelectionChangedObserver = canvas.stateManager.onSelectionChangedObservable.add(() => {
51395
- if (this._ownerCanvas.selectedFrames.indexOf(this) !== -1) {
51396
- this._borderElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
51397
- }
51398
- else {
51399
- this._borderElement.classList.remove(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
51400
- }
51401
- });
51402
- canvas.stateManager.onSelectionBoxMoved.add((rect1) => {
51403
- const rect2 = this.element.getBoundingClientRect();
51404
- const overlap = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
51405
- if (overlap) {
51406
- canvas.stateManager.onSelectionChangedObservable.notifyObservers({ selection: this, forceKeepSelection: true, marqueeSelection: true });
51407
- }
51408
- });
51409
- this._onGraphNodeRemovalObserver = canvas.stateManager.onGraphNodeRemovalObservable.add((node) => {
51410
- // remove node from this._nodes
51411
- const index = this._nodes.indexOf(node);
51412
- if (index === -1) {
51413
- return;
51414
- }
51415
- else {
51416
- node.enclosingFrameId = -1;
51417
- this._nodes.splice(index, 1);
51418
- }
51419
- });
51420
- this._onExposePortOnFrameObserver = canvas.stateManager.onExposePortOnFrameObservable.add((node) => {
51421
- if (this.nodes.indexOf(node) === -1) {
51422
- return;
51423
- }
51424
- this.redrawFramePorts();
51425
- });
51426
- this._commentsElement = document.createElement("div");
51427
- this._commentsElement.className = _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-comments"];
51428
- this._commentsElement.style.color = "white";
51429
- this._commentsElement.style.fontSize = "16px";
51430
- const commentSpan = document.createElement("span");
51431
- commentSpan.className = _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-comment-span"];
51432
- this._commentsElement.appendChild(commentSpan);
51433
- this.element.appendChild(this._commentsElement);
51434
- // Get nodes
51435
- if (!doNotCaptureNodes) {
51436
- this.refresh();
51437
- }
51438
- }
51439
- get id() {
51440
- return this._id;
51441
- }
51442
- get isCollapsed() {
51443
- return this._isCollapsed;
51444
- }
51445
- _createInputPort(port, node) {
51446
- const localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_1__.FrameNodePort.CreateFrameNodePortElement(port.portData, node, this._inputPortContainer, null, this._ownerCanvas.stateManager, true, GraphFrame._FramePortCounter++, this.id);
51447
- this._frameInPorts.push(localPort);
51448
- port.delegatedPort = localPort;
51449
- this._controlledPorts.push(port);
51450
- port.exposedPortPosition = this._exposedInPorts.findIndex((nodePort) => nodePort === port);
51451
- if (port.exposedPortPosition < 0) {
51452
- this._exposedInPorts.push(port);
51453
- port.exposedPortPosition = this._exposedInPorts.length - 1;
51454
- }
51455
- }
51456
- // Mark ports with FramePortPosition for re-arrangement support
51457
- _markFramePortPositions() {
51458
- // mark FrameInPorts
51459
- if (this._frameInPorts.length == 2) {
51460
- this._frameInPorts[0].framePortPosition = FramePortPosition.Top;
51461
- this._frameInPorts[1].framePortPosition = FramePortPosition.Bottom;
51462
- }
51463
- else {
51464
- for (let i = 0; i < this._frameInPorts.length; i++) {
51465
- const port = this._frameInPorts[i];
51466
- if (i === 0) {
51467
- port.framePortPosition = FramePortPosition.Top;
51468
- }
51469
- else if (i === this._frameInPorts.length - 1) {
51470
- port.framePortPosition = FramePortPosition.Bottom;
51471
- }
51472
- else {
51473
- port.framePortPosition = FramePortPosition.Middle;
51474
- }
51475
- }
51476
- }
51477
- // mark FrameOutPorts
51478
- if (this._frameOutPorts.length == 2) {
51479
- this._frameOutPorts[0].framePortPosition = FramePortPosition.Top;
51480
- this._frameOutPorts[1].framePortPosition = FramePortPosition.Bottom;
51481
- }
51482
- else {
51483
- for (let i = 0; i < this._frameOutPorts.length; i++) {
51484
- const port = this._frameOutPorts[i];
51485
- if (i === 0) {
51486
- port.framePortPosition = FramePortPosition.Top;
51487
- }
51488
- else if (i === this._frameInPorts.length - 1) {
51489
- port.framePortPosition = FramePortPosition.Bottom;
51490
- }
51491
- else {
51492
- port.framePortPosition = FramePortPosition.Middle;
51493
- }
51494
- }
51495
- }
51496
- }
51497
- _createFramePorts() {
51498
- for (const node of this._nodes) {
51499
- node.isVisible = false;
51500
- }
51501
- for (let i = 0; i < this._exposedOutPorts.length;) {
51502
- // Output
51503
- const port = this._exposedOutPorts[i];
51504
- if (port) {
51505
- if (port.node === null || port.node.enclosingFrameId != this.id) {
51506
- if (this._removePortFromExposedWithNode(port, this._exposedOutPorts))
51507
- continue;
51508
- }
51509
- else {
51510
- if (!this._createOutputPorts(port, port.node) && this._removePortFromExposedWithNode(port, this._exposedOutPorts)) {
51511
- continue;
51512
- }
51513
- }
51514
- }
51515
- ++i;
51516
- }
51517
- for (let i = 0; i < this._exposedInPorts.length;) {
51518
- // Input
51519
- const port = this._exposedInPorts[i];
51520
- if (!port || port.node === null || port.node.enclosingFrameId != this.id) {
51521
- if (this._removePortFromExposedWithNode(port, this._exposedInPorts)) {
51522
- continue;
51523
- }
51524
- }
51525
- else {
51526
- if (!this._createInputPorts(port, port.node) && this._removePortFromExposedWithNode(port, this._exposedInPorts)) {
51527
- continue;
51528
- }
51529
- }
51530
- ++i;
51531
- }
51532
- for (const node of this._nodes) {
51533
- for (const port of node.outputPorts) {
51534
- // Output
51535
- port.exposedPortPosition = this._exposedOutPorts.findIndex((nodePort) => nodePort === port);
51536
- if (port.exposedPortPosition < 0) {
51537
- if (this._createOutputPorts(port, node)) {
51538
- port.node.enclosingFrameId = this.id;
51539
- this._exposedOutPorts.push(port);
51540
- port.exposedPortPosition = this._exposedOutPorts.length - 1;
51541
- }
51542
- }
51543
- }
51544
- for (const port of node.inputPorts) {
51545
- // Input
51546
- port.exposedPortPosition = this._exposedInPorts.findIndex((nodePort) => nodePort === port);
51547
- if (port.exposedPortPosition < 0) {
51548
- this._createInputPorts(port, node);
51549
- }
51550
- }
51551
- }
51552
- }
51553
- _removePortFromExposedWithNode(port, exposedPorts) {
51554
- const index = exposedPorts.findIndex((nodePort) => nodePort === port);
51555
- if (index >= 0) {
51556
- exposedPorts.splice(index, 1);
51557
- if (port) {
51558
- port.exposedPortPosition = -1;
51559
- }
51560
- return true;
51561
- }
51562
- return false;
51563
- }
51564
- _removePortFromExposedWithLink(nodeLink, exposedPorts) {
51565
- const aPort = exposedPorts.findIndex((nodePort) => nodePort === nodeLink.portA);
51566
- const bPort = exposedPorts.findIndex((nodePort) => nodePort === nodeLink.portB);
51567
- if (aPort >= 0) {
51568
- if (!nodeLink.portA.exposedOnFrame) {
51569
- exposedPorts.splice(aPort, 1);
51570
- nodeLink.portA.exposedPortPosition = -1;
51571
- return true;
51572
- }
51573
- }
51574
- else if (bPort >= 0) {
51575
- if (nodeLink.portB && !nodeLink.portB.exposedOnFrame) {
51576
- exposedPorts.splice(bPort, 1);
51577
- nodeLink.portB.exposedPortPosition = -1;
51578
- return true;
51579
- }
51580
- }
51581
- return false;
51582
- }
51583
- _createInputPorts(port, node) {
51584
- if (port.portData.isConnected) {
51585
- let portAdded = false;
51586
- for (const link of node.links) {
51587
- if (link.portB === port && this.nodes.indexOf(link.nodeA) === -1) {
51588
- this._createInputPort(port, node);
51589
- link.isVisible = true;
51590
- portAdded = true;
51591
- const onLinkDisposedObserver = link.onDisposedObservable.add((nodeLink) => {
51592
- if (this._removePortFromExposedWithLink(nodeLink, this._exposedInPorts)) {
51593
- this.redrawFramePorts();
51594
- }
51595
- });
51596
- this._onNodeLinkDisposedObservers.push(onLinkDisposedObserver);
51597
- }
51771
+ this._headerTextElement.addEventListener("pointerdown", (evt) => this._onDown(evt));
51772
+ this._headerTextElement.addEventListener("pointerup", (evt) => this._onUp(evt));
51773
+ this._headerTextElement.addEventListener("pointermove", (evt) => this._onMove(evt));
51774
+ this._onSelectionChangedObserver = canvas.stateManager.onSelectionChangedObservable.add(() => {
51775
+ if (this._ownerCanvas.selectedFrames.indexOf(this) !== -1) {
51776
+ this._borderElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
51598
51777
  }
51599
- if (portAdded)
51600
- return true;
51601
- }
51602
- else if (port.exposedOnFrame) {
51603
- this._createInputPort(port, node);
51604
- return true;
51605
- }
51606
- return false;
51607
- }
51608
- _createOutputPorts(port, node) {
51609
- if (port.portData.hasEndpoints) {
51610
- let portAdded = false;
51611
- for (const link of node.links) {
51612
- if (link.portA === port && this.nodes.indexOf(link.nodeB) === -1) {
51613
- let localPort;
51614
- if (!portAdded) {
51615
- portAdded = true;
51616
- localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_1__.FrameNodePort.CreateFrameNodePortElement(port.portData, link.nodeA, this._outputPortContainer, null, this._ownerCanvas.stateManager, false, GraphFrame._FramePortCounter++, this.id);
51617
- this._frameOutPorts.push(localPort);
51618
- link.isVisible = true;
51619
- const onLinkDisposedObserver = link.onDisposedObservable.add((nodeLink) => {
51620
- if (this._removePortFromExposedWithLink(nodeLink, this._exposedOutPorts)) {
51621
- this.redrawFramePorts();
51622
- }
51623
- });
51624
- this._onNodeLinkDisposedObservers.push(onLinkDisposedObserver);
51625
- }
51626
- else if (this.nodes.indexOf(link.nodeB) === -1) {
51627
- link.isVisible = true;
51628
- localPort = this.ports.filter((p) => p.portData === port.portData)[0];
51629
- }
51630
- else {
51631
- localPort = this.ports.filter((p) => p.portData === port.portData)[0];
51632
- }
51633
- port.delegatedPort = localPort;
51634
- this._controlledPorts.push(port);
51635
- }
51636
- else if (port.exposedPortPosition >= 0 && !portAdded) {
51637
- const localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_1__.FrameNodePort.CreateFrameNodePortElement(port.portData, node, this._outputPortContainer, null, this._ownerCanvas.stateManager, false, GraphFrame._FramePortCounter++, this.id);
51638
- this._frameOutPorts.push(localPort);
51639
- port.delegatedPort = localPort;
51640
- this._controlledPorts.push(port);
51641
- portAdded = true;
51642
- }
51778
+ else {
51779
+ this._borderElement.classList.remove(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
51643
51780
  }
51644
- if (portAdded)
51645
- return true;
51646
- }
51647
- else if (port.exposedOnFrame) {
51648
- const localPort = _frameNodePort__WEBPACK_IMPORTED_MODULE_1__.FrameNodePort.CreateFrameNodePortElement(port.portData, node, this._outputPortContainer, null, this._ownerCanvas.stateManager, false, GraphFrame._FramePortCounter++, this.id);
51649
- this._frameOutPorts.push(localPort);
51650
- port.delegatedPort = localPort;
51651
- this._controlledPorts.push(port);
51652
- return true;
51653
- }
51654
- return false;
51655
- }
51656
- redrawFramePorts() {
51657
- if (!this.isCollapsed) {
51658
- return;
51659
- }
51660
- this._outputPortContainer.innerHTML = "";
51661
- this._inputPortContainer.innerHTML = "";
51662
- this.ports.forEach((framePort) => {
51663
- framePort.dispose();
51664
51781
  });
51665
- this._controlledPorts.forEach((port) => {
51666
- port.delegatedPort = null;
51667
- port.refresh();
51782
+ canvas.stateManager.onSelectionBoxMoved.add((rect1) => {
51783
+ const rect2 = this.element.getBoundingClientRect();
51784
+ const overlap = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
51785
+ if (overlap) {
51786
+ canvas.stateManager.onSelectionChangedObservable.notifyObservers({ selection: this, forceKeepSelection: true, marqueeSelection: true });
51787
+ }
51668
51788
  });
51669
- this._frameInPorts = [];
51670
- this._frameOutPorts = [];
51671
- this._controlledPorts = [];
51672
- this._createFramePorts();
51673
- this._markFramePortPositions();
51674
- this.ports.forEach((framePort) => framePort.node._refreshLinks());
51675
- }
51676
- set isCollapsed(value) {
51677
- if (this._isCollapsed === value) {
51678
- return;
51679
- }
51680
- this._isCollapsed = value;
51681
- this._ownerCanvas._frameIsMoving = true;
51682
- // Need to delegate the outside ports to the frame
51683
- if (value) {
51684
- this.element.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].collapsed);
51685
- this.element.classList.remove(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].expanded);
51686
- this._headerElement.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].collapsedHeader);
51687
- this._moveFrame((this.width - this._collapsedWidth) / 2, 0);
51688
- this._createFramePorts();
51689
- this._markFramePortPositions();
51690
- }
51691
- else {
51692
- this.element.classList.add(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].expanded);
51693
- this.element.classList.remove(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].collapsed);
51694
- this._headerElement.classList.remove(_graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].collapsedHeader);
51695
- this._outputPortContainer.innerHTML = "";
51696
- this._inputPortContainer.innerHTML = "";
51697
- this._frameInPorts.forEach((p) => {
51698
- p.dispose();
51699
- });
51700
- this._frameOutPorts.forEach((p) => {
51701
- p.dispose();
51702
- });
51703
- this._controlledPorts.forEach((port) => {
51704
- port.delegatedPort = null;
51705
- port.refresh();
51706
- });
51707
- this._frameInPorts = [];
51708
- this._frameOutPorts = [];
51709
- this._controlledPorts = [];
51710
- this._onNodeLinkDisposedObservers = [];
51711
- for (const node of this._nodes) {
51712
- node.isVisible = true;
51789
+ this._onGraphNodeRemovalObserver = canvas.stateManager.onGraphNodeRemovalObservable.add((node) => {
51790
+ // remove node from this._nodes
51791
+ const index = this._nodes.indexOf(node);
51792
+ if (index === -1) {
51793
+ return;
51713
51794
  }
51714
- this._moveFrame(-(this.width - this._collapsedWidth) / 2, 0);
51715
- }
51716
- this.cleanAccumulation();
51717
- this._ownerCanvas._frameIsMoving = false;
51718
- // UI
51719
- if (this._isCollapsed) {
51720
- this._headerCollapseElement.innerHTML = this._expandSVG;
51721
- this._headerCollapseElement.title = "Expand";
51722
- }
51723
- else {
51724
- this._headerCollapseElement.innerHTML = this._collapseSVG;
51725
- this._headerCollapseElement.title = "Collapse";
51726
- }
51727
- this.onExpandStateChanged.notifyObservers(this);
51728
- }
51729
- get nodes() {
51730
- return this._nodes;
51731
- }
51732
- get ports() {
51733
- return this._frameInPorts.concat(this._frameOutPorts);
51734
- }
51735
- get name() {
51736
- return this._name;
51737
- }
51738
- set name(value) {
51739
- this._name = value;
51740
- this._headerTextElement.innerHTML = value;
51741
- }
51742
- get color() {
51743
- return this._color;
51744
- }
51745
- set color(value) {
51746
- this._color = value;
51747
- this._headerElement.style.background = `rgba(${value.r * 255}, ${value.g * 255}, ${value.b * 255}, 1)`;
51748
- this._headerElement.style.borderColor = `rgba(${value.r * 255}, ${value.g * 255}, ${value.b * 255}, 1)`;
51749
- this.element.style.background = `rgba(${value.r * 255}, ${value.g * 255}, ${value.b * 255}, 0.7)`;
51750
- }
51751
- get x() {
51752
- return this._x;
51753
- }
51754
- set x(value) {
51755
- if (this._x === value) {
51756
- return;
51757
- }
51758
- this._x = value;
51759
- this._gridAlignedX = this._ownerCanvas.getGridPosition(value);
51760
- this.element.style.left = `${this._gridAlignedX}px`;
51761
- }
51762
- get y() {
51763
- return this._y;
51764
- }
51765
- set y(value) {
51766
- if (this._y === value) {
51767
- return;
51768
- }
51769
- this._y = value;
51770
- this._gridAlignedY = this._ownerCanvas.getGridPosition(value);
51771
- this.element.style.top = `${this._gridAlignedY}px`;
51772
- }
51773
- get width() {
51774
- return this._width;
51775
- }
51776
- set width(value) {
51777
- if (this._width === value) {
51778
- return;
51779
- }
51780
- const viableWidth = value > this._minFrameWidth ? value : this._minFrameWidth;
51781
- this._width = viableWidth;
51782
- const gridAlignedRight = this._ownerCanvas.getGridPositionCeil(viableWidth + this._gridAlignedX);
51783
- this.element.style.width = `${gridAlignedRight - this._gridAlignedX}px`;
51784
- }
51785
- get height() {
51786
- return this._height;
51787
- }
51788
- set height(value) {
51789
- if (this._height === value) {
51790
- return;
51791
- }
51792
- this._height = value;
51793
- const gridAlignedBottom = this._ownerCanvas.getGridPositionCeil(value + this._gridAlignedY);
51794
- this.element.style.height = `${gridAlignedBottom - this._gridAlignedY}px`;
51795
- }
51796
- get comments() {
51797
- return this._comments;
51798
- }
51799
- set comments(comments) {
51800
- if (comments && !this._comments && comments.length > 0) {
51801
- this.element.style.gridTemplateRows = "40px min-content 1fr";
51802
- this._borderElement.style.gridRow = "1 / span 3";
51803
- this._portContainer.style.gridRow = "3";
51804
- this._commentsElement.classList.add("has-comments");
51805
- }
51806
- else if (!comments) {
51807
- this.element.style.gridTemplateRows = "40px calc(100% - 40px)";
51808
- this._borderElement.style.gridRow = "1 / span 2";
51809
- this._portContainer.style.gridRow = "2";
51810
- this._commentsElement.classList.remove("has-comments");
51811
- }
51812
- if (comments === "" || (comments && comments.length >= 0)) {
51813
- this._commentsElement.children[0].innerText = comments;
51795
+ else {
51796
+ node.enclosingFrameId = -1;
51797
+ this._nodes.splice(index, 1);
51798
+ }
51799
+ });
51800
+ this._onExposePortOnFrameObserver = canvas.stateManager.onExposePortOnFrameObservable.add((node) => {
51801
+ if (this.nodes.indexOf(node) === -1) {
51802
+ return;
51803
+ }
51804
+ this.redrawFramePorts();
51805
+ });
51806
+ this._commentsElement = document.createElement("div");
51807
+ this._commentsElement.className = _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-comments"];
51808
+ this._commentsElement.style.color = "white";
51809
+ this._commentsElement.style.fontSize = "16px";
51810
+ const commentSpan = document.createElement("span");
51811
+ commentSpan.className = _graphFrame_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["frame-comment-span"];
51812
+ this._commentsElement.appendChild(commentSpan);
51813
+ this.element.appendChild(this._commentsElement);
51814
+ // Get nodes
51815
+ if (!doNotCaptureNodes) {
51816
+ this.refresh();
51814
51817
  }
51815
- this.height = this._borderElement.offsetHeight;
51816
- this._comments = comments;
51817
- this._updateMinHeightWithComments();
51818
51818
  }
51819
51819
  refresh() {
51820
51820
  this._nodes = [];
@@ -52204,54 +52204,6 @@ __webpack_require__.r(__webpack_exports__);
52204
52204
 
52205
52205
 
52206
52206
  class GraphNode {
52207
- constructor(content, stateManager) {
52208
- this.content = content;
52209
- this._inputPorts = [];
52210
- this._outputPorts = [];
52211
- this._links = [];
52212
- this._x = 0;
52213
- this._y = 0;
52214
- this._gridAlignedX = 0;
52215
- this._gridAlignedY = 0;
52216
- this._mouseStartPointX = null;
52217
- this._mouseStartPointY = null;
52218
- this._displayManager = null;
52219
- this._isVisible = true;
52220
- this._enclosingFrameId = -1;
52221
- this._stateManager = stateManager;
52222
- this._onSelectionChangedObserver = this._stateManager.onSelectionChangedObservable.add((options) => {
52223
- const { selection: node } = options || {};
52224
- if (node === this) {
52225
- this._visual.classList.add(_graphNode_modules_scss__WEBPACK_IMPORTED_MODULE_4__["default"].selected);
52226
- }
52227
- else {
52228
- setTimeout(() => {
52229
- if (this._ownerCanvas.selectedNodes.indexOf(this) === -1) {
52230
- this._visual.classList.remove(_graphNode_modules_scss__WEBPACK_IMPORTED_MODULE_4__["default"].selected);
52231
- }
52232
- });
52233
- }
52234
- });
52235
- this._onUpdateRequiredObserver = this._stateManager.onUpdateRequiredObservable.add((data) => {
52236
- if (data !== this.content.data) {
52237
- return;
52238
- }
52239
- this.refresh();
52240
- });
52241
- this._onSelectionBoxMovedObserver = this._stateManager.onSelectionBoxMoved.add((rect1) => {
52242
- const rect2 = this._visual.getBoundingClientRect();
52243
- const overlap = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
52244
- this.setIsSelected(overlap, true);
52245
- });
52246
- this._onFrameCreatedObserver = this._stateManager.onFrameCreatedObservable.add((frame) => {
52247
- if (this._ownerCanvas.frames.some((f) => f.nodes.indexOf(this) !== -1)) {
52248
- return;
52249
- }
52250
- if (this.isOverlappingFrame(frame)) {
52251
- frame.nodes.push(this);
52252
- }
52253
- });
52254
- }
52255
52207
  addClassToVisual(className) {
52256
52208
  this._visual.classList.add(className);
52257
52209
  }
@@ -52363,6 +52315,54 @@ class GraphNode {
52363
52315
  this._stateManager.onSelectionChangedObservable.notifyObservers({ selection: this, marqueeSelection });
52364
52316
  }
52365
52317
  }
52318
+ constructor(content, stateManager) {
52319
+ this.content = content;
52320
+ this._inputPorts = [];
52321
+ this._outputPorts = [];
52322
+ this._links = [];
52323
+ this._x = 0;
52324
+ this._y = 0;
52325
+ this._gridAlignedX = 0;
52326
+ this._gridAlignedY = 0;
52327
+ this._mouseStartPointX = null;
52328
+ this._mouseStartPointY = null;
52329
+ this._displayManager = null;
52330
+ this._isVisible = true;
52331
+ this._enclosingFrameId = -1;
52332
+ this._stateManager = stateManager;
52333
+ this._onSelectionChangedObserver = this._stateManager.onSelectionChangedObservable.add((options) => {
52334
+ const { selection: node } = options || {};
52335
+ if (node === this) {
52336
+ this._visual.classList.add(_graphNode_modules_scss__WEBPACK_IMPORTED_MODULE_4__["default"].selected);
52337
+ }
52338
+ else {
52339
+ setTimeout(() => {
52340
+ if (this._ownerCanvas.selectedNodes.indexOf(this) === -1) {
52341
+ this._visual.classList.remove(_graphNode_modules_scss__WEBPACK_IMPORTED_MODULE_4__["default"].selected);
52342
+ }
52343
+ });
52344
+ }
52345
+ });
52346
+ this._onUpdateRequiredObserver = this._stateManager.onUpdateRequiredObservable.add((data) => {
52347
+ if (data !== this.content.data) {
52348
+ return;
52349
+ }
52350
+ this.refresh();
52351
+ });
52352
+ this._onSelectionBoxMovedObserver = this._stateManager.onSelectionBoxMoved.add((rect1) => {
52353
+ const rect2 = this._visual.getBoundingClientRect();
52354
+ const overlap = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
52355
+ this.setIsSelected(overlap, true);
52356
+ });
52357
+ this._onFrameCreatedObserver = this._stateManager.onFrameCreatedObservable.add((frame) => {
52358
+ if (this._ownerCanvas.frames.some((f) => f.nodes.indexOf(this) !== -1)) {
52359
+ return;
52360
+ }
52361
+ if (this.isOverlappingFrame(frame)) {
52362
+ frame.nodes.push(this);
52363
+ }
52364
+ });
52365
+ }
52366
52366
  isOverlappingFrame(frame) {
52367
52367
  const rect2 = this._visual.getBoundingClientRect();
52368
52368
  const rect1 = frame.element.getBoundingClientRect();
@@ -52728,43 +52728,6 @@ __webpack_require__.r(__webpack_exports__);
52728
52728
 
52729
52729
 
52730
52730
  class NodeLink {
52731
- constructor(graphCanvas, portA, nodeA, portB, nodeB) {
52732
- this._isVisible = true;
52733
- this._isTargetCandidate = false;
52734
- this.onDisposedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
52735
- this._portA = portA;
52736
- this._portB = portB;
52737
- this._nodeA = nodeA;
52738
- this._nodeB = nodeB;
52739
- this._graphCanvas = graphCanvas;
52740
- const document = portA.element.ownerDocument;
52741
- const svg = graphCanvas.svgCanvas;
52742
- // Create path
52743
- this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
52744
- this._path.setAttribute("fill", "none");
52745
- this._path.classList.add(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].link);
52746
- svg.appendChild(this._path);
52747
- this._selectionPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
52748
- this._selectionPath.setAttribute("fill", "none");
52749
- this._selectionPath.classList.add(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["selection-link"]);
52750
- svg.appendChild(this._selectionPath);
52751
- this._selectionPath.onmousedown = (evt) => this.onClick(evt);
52752
- if (this._portB) {
52753
- // Update
52754
- this.update();
52755
- }
52756
- this._onSelectionChangedObserver = this._graphCanvas.stateManager.onSelectionChangedObservable.add((options) => {
52757
- const { selection } = options || {};
52758
- if (selection === this) {
52759
- this._path.classList.add(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
52760
- this._selectionPath.classList.add(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
52761
- }
52762
- else {
52763
- this._path.classList.remove(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
52764
- this._selectionPath.classList.remove(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
52765
- }
52766
- });
52767
- }
52768
52731
  get isTargetCandidate() {
52769
52732
  return this._isTargetCandidate;
52770
52733
  }
@@ -52812,12 +52775,13 @@ class NodeLink {
52812
52775
  if (rect.left > locatRect.right || rect.right < locatRect.left || rect.top > locatRect.bottom || rect.bottom < locatRect.top) {
52813
52776
  return false;
52814
52777
  }
52778
+ const zoom = this._graphCanvas.zoom;
52815
52779
  const svg = this._graphCanvas.svgCanvas;
52816
52780
  const rootRect = svg.getBoundingClientRect();
52817
- const left = rect.x - rootRect.x;
52818
- const top = rect.y - rootRect.y;
52819
- const right = left + rect.width;
52820
- const bottom = top + rect.height;
52781
+ const left = (rect.x - rootRect.x) / zoom;
52782
+ const top = (rect.y - rootRect.y) / zoom;
52783
+ const right = left + rect.width / zoom;
52784
+ const bottom = top + rect.height / zoom;
52821
52785
  const sampleRate = 10; // Checking 10 times on the path should be enough
52822
52786
  for (let index = 0; index < 1; index += 1 / sampleRate) {
52823
52787
  const point = this._path.getPointAtLength(index * this._path.getTotalLength());
@@ -52854,6 +52818,43 @@ class NodeLink {
52854
52818
  }
52855
52819
  this._path.setAttribute("stroke", this._portA.element.style.backgroundColor);
52856
52820
  }
52821
+ constructor(graphCanvas, portA, nodeA, portB, nodeB) {
52822
+ this._isVisible = true;
52823
+ this._isTargetCandidate = false;
52824
+ this.onDisposedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
52825
+ this._portA = portA;
52826
+ this._portB = portB;
52827
+ this._nodeA = nodeA;
52828
+ this._nodeB = nodeB;
52829
+ this._graphCanvas = graphCanvas;
52830
+ const document = portA.element.ownerDocument;
52831
+ const svg = graphCanvas.svgCanvas;
52832
+ // Create path
52833
+ this._path = document.createElementNS("http://www.w3.org/2000/svg", "path");
52834
+ this._path.setAttribute("fill", "none");
52835
+ this._path.classList.add(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].link);
52836
+ svg.appendChild(this._path);
52837
+ this._selectionPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
52838
+ this._selectionPath.setAttribute("fill", "none");
52839
+ this._selectionPath.classList.add(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]["selection-link"]);
52840
+ svg.appendChild(this._selectionPath);
52841
+ this._selectionPath.onmousedown = (evt) => this.onClick(evt);
52842
+ if (this._portB) {
52843
+ // Update
52844
+ this.update();
52845
+ }
52846
+ this._onSelectionChangedObserver = this._graphCanvas.stateManager.onSelectionChangedObservable.add((options) => {
52847
+ const { selection } = options || {};
52848
+ if (selection === this) {
52849
+ this._path.classList.add(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
52850
+ this._selectionPath.classList.add(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
52851
+ }
52852
+ else {
52853
+ this._path.classList.remove(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
52854
+ this._selectionPath.classList.remove(_nodeLink_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"].selected);
52855
+ }
52856
+ });
52857
+ }
52857
52858
  onClick(evt) {
52858
52859
  const stateManager = this._graphCanvas.stateManager;
52859
52860
  if (evt.altKey) {
@@ -52925,6 +52926,75 @@ __webpack_require__.r(__webpack_exports__);
52925
52926
 
52926
52927
 
52927
52928
  class NodePort {
52929
+ get element() {
52930
+ if (this.delegatedPort) {
52931
+ return this.delegatedPort.element;
52932
+ }
52933
+ return this._element;
52934
+ }
52935
+ get portName() {
52936
+ return this.portData.name;
52937
+ }
52938
+ set portName(newName) {
52939
+ if (this._portLabelElement) {
52940
+ this.portData.updateDisplayName(newName);
52941
+ this._portLabelElement.innerHTML = newName;
52942
+ }
52943
+ }
52944
+ get disabled() {
52945
+ if (!this.portData.isConnected) {
52946
+ return false;
52947
+ }
52948
+ else if (this._isConnectedToNodeOutsideOfFrame()) {
52949
+ //connected to outside node
52950
+ return true;
52951
+ }
52952
+ else {
52953
+ const link = this.node.getLinksForPortData(this.portData);
52954
+ if (link.length) {
52955
+ if (link[0].nodeB === this.node) {
52956
+ // check if this node is the receiving
52957
+ return true;
52958
+ }
52959
+ }
52960
+ }
52961
+ return false;
52962
+ }
52963
+ hasLabel() {
52964
+ return !!this._portLabelElement;
52965
+ }
52966
+ get exposedOnFrame() {
52967
+ if (!!this.portData.isExposedOnFrame || this._isConnectedToNodeOutsideOfFrame()) {
52968
+ return true;
52969
+ }
52970
+ return false;
52971
+ }
52972
+ set exposedOnFrame(value) {
52973
+ if (this.disabled) {
52974
+ return;
52975
+ }
52976
+ this.portData.isExposedOnFrame = value;
52977
+ }
52978
+ get exposedPortPosition() {
52979
+ return this.portData.exposedPortPosition;
52980
+ }
52981
+ set exposedPortPosition(value) {
52982
+ this.portData.exposedPortPosition = value;
52983
+ }
52984
+ _isConnectedToNodeOutsideOfFrame() {
52985
+ const link = this.node.getLinksForPortData(this.portData);
52986
+ if (link.length) {
52987
+ for (let i = 0; i < link.length; i++) {
52988
+ if (link[i].nodeA.enclosingFrameId !== link[i].nodeB.enclosingFrameId) {
52989
+ return true;
52990
+ }
52991
+ }
52992
+ }
52993
+ return false;
52994
+ }
52995
+ refresh() {
52996
+ this._stateManager.applyNodePortDesign(this.portData, this._element, this._img);
52997
+ }
52928
52998
  constructor(portContainer, portData, node, stateManager) {
52929
52999
  this.portData = portData;
52930
53000
  this.node = node;
@@ -52962,75 +53032,6 @@ class NodePort {
52962
53032
  });
52963
53033
  this.refresh();
52964
53034
  }
52965
- get element() {
52966
- if (this.delegatedPort) {
52967
- return this.delegatedPort.element;
52968
- }
52969
- return this._element;
52970
- }
52971
- get portName() {
52972
- return this.portData.name;
52973
- }
52974
- set portName(newName) {
52975
- if (this._portLabelElement) {
52976
- this.portData.updateDisplayName(newName);
52977
- this._portLabelElement.innerHTML = newName;
52978
- }
52979
- }
52980
- get disabled() {
52981
- if (!this.portData.isConnected) {
52982
- return false;
52983
- }
52984
- else if (this._isConnectedToNodeOutsideOfFrame()) {
52985
- //connected to outside node
52986
- return true;
52987
- }
52988
- else {
52989
- const link = this.node.getLinksForPortData(this.portData);
52990
- if (link.length) {
52991
- if (link[0].nodeB === this.node) {
52992
- // check if this node is the receiving
52993
- return true;
52994
- }
52995
- }
52996
- }
52997
- return false;
52998
- }
52999
- hasLabel() {
53000
- return !!this._portLabelElement;
53001
- }
53002
- get exposedOnFrame() {
53003
- if (!!this.portData.isExposedOnFrame || this._isConnectedToNodeOutsideOfFrame()) {
53004
- return true;
53005
- }
53006
- return false;
53007
- }
53008
- set exposedOnFrame(value) {
53009
- if (this.disabled) {
53010
- return;
53011
- }
53012
- this.portData.isExposedOnFrame = value;
53013
- }
53014
- get exposedPortPosition() {
53015
- return this.portData.exposedPortPosition;
53016
- }
53017
- set exposedPortPosition(value) {
53018
- this.portData.exposedPortPosition = value;
53019
- }
53020
- _isConnectedToNodeOutsideOfFrame() {
53021
- const link = this.node.getLinksForPortData(this.portData);
53022
- if (link.length) {
53023
- for (let i = 0; i < link.length; i++) {
53024
- if (link[i].nodeA.enclosingFrameId !== link[i].nodeB.enclosingFrameId) {
53025
- return true;
53026
- }
53027
- }
53028
- }
53029
- return false;
53030
- }
53031
- refresh() {
53032
- this._stateManager.applyNodePortDesign(this.portData, this._element, this._img);
53033
- }
53034
53035
  dispose() {
53035
53036
  this._stateManager.onCandidateLinkMoved.remove(this._onCandidateLinkMovedObserver);
53036
53037
  if (this._onSelectionChangedObserver) {
@@ -54816,6 +54817,39 @@ __webpack_require__.r(__webpack_exports__);
54816
54817
 
54817
54818
  const dontSerializeTextureContent = true;
54818
54819
  class PreviewManager {
54820
+ _serializeMaterial() {
54821
+ const nodeMaterial = this._nodeMaterial;
54822
+ let fullSerialization = false;
54823
+ if (dontSerializeTextureContent) {
54824
+ const textureBlocks = nodeMaterial.getAllTextureBlocks();
54825
+ for (const block of textureBlocks) {
54826
+ const texture = block.texture;
54827
+ if (!texture || block.hasImageSource) {
54828
+ continue;
54829
+ }
54830
+ let found = false;
54831
+ for (const localTexture of this._engine.getLoadedTexturesCache()) {
54832
+ if (localTexture.uniqueId === texture._texture?.uniqueId) {
54833
+ found = true;
54834
+ break;
54835
+ }
54836
+ }
54837
+ if (!found) {
54838
+ fullSerialization = true;
54839
+ break;
54840
+ }
54841
+ }
54842
+ }
54843
+ const bufferSerializationState = core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture.SerializeBuffers;
54844
+ if (dontSerializeTextureContent) {
54845
+ core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture.SerializeBuffers = fullSerialization;
54846
+ core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture._SerializeInternalTextureUniqueId = true;
54847
+ }
54848
+ const serializationObject = nodeMaterial.serialize();
54849
+ core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture.SerializeBuffers = bufferSerializationState;
54850
+ core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture._SerializeInternalTextureUniqueId = false;
54851
+ return serializationObject;
54852
+ }
54819
54853
  constructor(targetCanvas, globalState) {
54820
54854
  this._nodeMaterial = globalState.nodeMaterial;
54821
54855
  this._globalState = globalState;
@@ -54884,39 +54918,6 @@ class PreviewManager {
54884
54918
  lastOffsetX = evt.event.offsetX;
54885
54919
  });
54886
54920
  }
54887
- _serializeMaterial() {
54888
- const nodeMaterial = this._nodeMaterial;
54889
- let fullSerialization = false;
54890
- if (dontSerializeTextureContent) {
54891
- const textureBlocks = nodeMaterial.getAllTextureBlocks();
54892
- for (const block of textureBlocks) {
54893
- const texture = block.texture;
54894
- if (!texture || block.hasImageSource) {
54895
- continue;
54896
- }
54897
- let found = false;
54898
- for (const localTexture of this._engine.getLoadedTexturesCache()) {
54899
- if (localTexture.uniqueId === texture._texture?.uniqueId) {
54900
- found = true;
54901
- break;
54902
- }
54903
- }
54904
- if (!found) {
54905
- fullSerialization = true;
54906
- break;
54907
- }
54908
- }
54909
- }
54910
- const bufferSerializationState = core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture.SerializeBuffers;
54911
- if (dontSerializeTextureContent) {
54912
- core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture.SerializeBuffers = fullSerialization;
54913
- core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture._SerializeInternalTextureUniqueId = true;
54914
- }
54915
- const serializationObject = nodeMaterial.serialize();
54916
- core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture.SerializeBuffers = bufferSerializationState;
54917
- core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.Texture._SerializeInternalTextureUniqueId = false;
54918
- return serializationObject;
54919
- }
54920
54921
  _handleAnimations() {
54921
54922
  this._scene.stopAllAnimations();
54922
54923
  if (this._globalState.rotatePreview) {
@@ -56122,6 +56123,16 @@ __webpack_require__.r(__webpack_exports__);
56122
56123
 
56123
56124
 
56124
56125
  class GlobalState {
56126
+ /** Gets the mode */
56127
+ get mode() {
56128
+ return this._mode;
56129
+ }
56130
+ /** Sets the mode */
56131
+ set mode(m) {
56132
+ core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.DataStorage.WriteNumber("Mode", m);
56133
+ this._mode = m;
56134
+ this.onPreviewCommandActivated.notifyObservers(true);
56135
+ }
56125
56136
  constructor() {
56126
56137
  this.onBuiltObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
56127
56138
  this.onResetRequiredObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
@@ -56161,16 +56172,6 @@ class GlobalState {
56161
56172
  const b = core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.DataStorage.ReadNumber("BackgroundColorB", 0.25098039215686274);
56162
56173
  this.backgroundColor = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Color4(r, g, b, 1.0);
56163
56174
  }
56164
- /** Gets the mode */
56165
- get mode() {
56166
- return this._mode;
56167
- }
56168
- /** Sets the mode */
56169
- set mode(m) {
56170
- core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.DataStorage.WriteNumber("Mode", m);
56171
- this._mode = m;
56172
- this.onPreviewCommandActivated.notifyObservers(true);
56173
- }
56174
56175
  storeEditorData(serializationObject, frame) {
56175
56176
  this.stateManager.storeEditorData(serializationObject, frame);
56176
56177
  }
@@ -56231,6 +56232,47 @@ __webpack_require__.r(__webpack_exports__);
56231
56232
 
56232
56233
 
56233
56234
  class GraphEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
56235
+ appendBlock(dataToAppend, recursion = true) {
56236
+ return this._graphCanvas.createNodeFromObject(dataToAppend instanceof core_Materials_Node_nodeMaterialBlock__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialBlock ? shared_ui_components_nodeGraphSystem_typeLedger__WEBPACK_IMPORTED_MODULE_17__.TypeLedger.NodeDataBuilder(dataToAppend, this._graphCanvas) : dataToAppend, (block) => {
56237
+ if (this.props.globalState.nodeMaterial.attachedBlocks.indexOf(block) === -1) {
56238
+ this.props.globalState.nodeMaterial.attachedBlocks.push(block);
56239
+ }
56240
+ if (block.isFinalMerger) {
56241
+ this.props.globalState.nodeMaterial.addOutputNode(block);
56242
+ }
56243
+ }, recursion);
56244
+ }
56245
+ addValueNode(type) {
56246
+ const nodeType = _blockTools__WEBPACK_IMPORTED_MODULE_8__.BlockTools.GetConnectionNodeTypeFromString(type);
56247
+ const newInputBlock = new core_Materials_Node_nodeMaterialBlock__WEBPACK_IMPORTED_MODULE_2__.InputBlock(type, undefined, nodeType);
56248
+ return this.appendBlock(newInputBlock);
56249
+ }
56250
+ componentDidMount() {
56251
+ window.addEventListener("wheel", this.onWheel, { passive: false });
56252
+ if (this.props.globalState.hostDocument) {
56253
+ this._graphCanvas = this._graphCanvasRef.current;
56254
+ this._diagramContainer = this._diagramContainerRef.current;
56255
+ this._previewManager = new _components_preview_previewManager__WEBPACK_IMPORTED_MODULE_9__.PreviewManager(this.props.globalState.hostDocument.getElementById("preview-canvas"), this.props.globalState);
56256
+ this.props.globalState._previewManager = this._previewManager;
56257
+ }
56258
+ if (navigator.userAgent.indexOf("Mobile") !== -1) {
56259
+ (this.props.globalState.hostDocument || document).querySelector(".blocker").style.visibility = "visible";
56260
+ }
56261
+ this.props.globalState.onPopupClosedObservable.addOnce(() => {
56262
+ this.componentWillUnmount();
56263
+ });
56264
+ this.build();
56265
+ }
56266
+ componentWillUnmount() {
56267
+ window.removeEventListener("wheel", this.onWheel);
56268
+ if (this.props.globalState.hostDocument) {
56269
+ this.props.globalState.hostDocument.removeEventListener("keyup", this._onWidgetKeyUpPointer, false);
56270
+ }
56271
+ if (this._previewManager) {
56272
+ this._previewManager.dispose();
56273
+ this._previewManager = null;
56274
+ }
56275
+ }
56234
56276
  constructor(props) {
56235
56277
  super(props);
56236
56278
  this._leftWidth = core_Materials_Node_nodeMaterialBlock__WEBPACK_IMPORTED_MODULE_2__.DataStorage.ReadNumber("LeftWidth", 200);
@@ -56471,47 +56513,6 @@ class GraphEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
56471
56513
  this.setState({ message: message, isError: true });
56472
56514
  });
56473
56515
  }
56474
- appendBlock(dataToAppend, recursion = true) {
56475
- return this._graphCanvas.createNodeFromObject(dataToAppend instanceof core_Materials_Node_nodeMaterialBlock__WEBPACK_IMPORTED_MODULE_2__.NodeMaterialBlock ? shared_ui_components_nodeGraphSystem_typeLedger__WEBPACK_IMPORTED_MODULE_17__.TypeLedger.NodeDataBuilder(dataToAppend, this._graphCanvas) : dataToAppend, (block) => {
56476
- if (this.props.globalState.nodeMaterial.attachedBlocks.indexOf(block) === -1) {
56477
- this.props.globalState.nodeMaterial.attachedBlocks.push(block);
56478
- }
56479
- if (block.isFinalMerger) {
56480
- this.props.globalState.nodeMaterial.addOutputNode(block);
56481
- }
56482
- }, recursion);
56483
- }
56484
- addValueNode(type) {
56485
- const nodeType = _blockTools__WEBPACK_IMPORTED_MODULE_8__.BlockTools.GetConnectionNodeTypeFromString(type);
56486
- const newInputBlock = new core_Materials_Node_nodeMaterialBlock__WEBPACK_IMPORTED_MODULE_2__.InputBlock(type, undefined, nodeType);
56487
- return this.appendBlock(newInputBlock);
56488
- }
56489
- componentDidMount() {
56490
- window.addEventListener("wheel", this.onWheel, { passive: false });
56491
- if (this.props.globalState.hostDocument) {
56492
- this._graphCanvas = this._graphCanvasRef.current;
56493
- this._diagramContainer = this._diagramContainerRef.current;
56494
- this._previewManager = new _components_preview_previewManager__WEBPACK_IMPORTED_MODULE_9__.PreviewManager(this.props.globalState.hostDocument.getElementById("preview-canvas"), this.props.globalState);
56495
- this.props.globalState._previewManager = this._previewManager;
56496
- }
56497
- if (navigator.userAgent.indexOf("Mobile") !== -1) {
56498
- (this.props.globalState.hostDocument || document).querySelector(".blocker").style.visibility = "visible";
56499
- }
56500
- this.props.globalState.onPopupClosedObservable.addOnce(() => {
56501
- this.componentWillUnmount();
56502
- });
56503
- this.build();
56504
- }
56505
- componentWillUnmount() {
56506
- window.removeEventListener("wheel", this.onWheel);
56507
- if (this.props.globalState.hostDocument) {
56508
- this.props.globalState.hostDocument.removeEventListener("keyup", this._onWidgetKeyUpPointer, false);
56509
- }
56510
- if (this._previewManager) {
56511
- this._previewManager.dispose();
56512
- this._previewManager = null;
56513
- }
56514
- }
56515
56516
  zoomToFit() {
56516
56517
  this._graphCanvas.zoomToFit();
56517
56518
  }
@@ -56739,21 +56740,6 @@ __webpack_require__.r(__webpack_exports__);
56739
56740
 
56740
56741
 
56741
56742
  class BlockNodeData {
56742
- constructor(data, nodeContainer) {
56743
- this.data = data;
56744
- this._inputs = [];
56745
- this._outputs = [];
56746
- if (data.inputs) {
56747
- this.data.inputs.forEach((input) => {
56748
- this._inputs.push(new _connectionPointPortData__WEBPACK_IMPORTED_MODULE_1__.ConnectionPointPortData(input, nodeContainer));
56749
- });
56750
- }
56751
- if (data.outputs) {
56752
- this.data.outputs.forEach((output) => {
56753
- this._outputs.push(new _connectionPointPortData__WEBPACK_IMPORTED_MODULE_1__.ConnectionPointPortData(output, nodeContainer));
56754
- });
56755
- }
56756
- }
56757
56743
  get uniqueId() {
56758
56744
  return this.data.uniqueId;
56759
56745
  }
@@ -56811,6 +56797,21 @@ class BlockNodeData {
56811
56797
  }
56812
56798
  iconDiv.classList.add(_blockNodeData_modules_scss__WEBPACK_IMPORTED_MODULE_4__["default"].hidden);
56813
56799
  }
56800
+ constructor(data, nodeContainer) {
56801
+ this.data = data;
56802
+ this._inputs = [];
56803
+ this._outputs = [];
56804
+ if (data.inputs) {
56805
+ this.data.inputs.forEach((input) => {
56806
+ this._inputs.push(new _connectionPointPortData__WEBPACK_IMPORTED_MODULE_1__.ConnectionPointPortData(input, nodeContainer));
56807
+ });
56808
+ }
56809
+ if (data.outputs) {
56810
+ this.data.outputs.forEach((output) => {
56811
+ this._outputs.push(new _connectionPointPortData__WEBPACK_IMPORTED_MODULE_1__.ConnectionPointPortData(output, nodeContainer));
56812
+ });
56813
+ }
56814
+ }
56814
56815
  }
56815
56816
 
56816
56817
 
@@ -56835,11 +56836,6 @@ __webpack_require__.r(__webpack_exports__);
56835
56836
 
56836
56837
 
56837
56838
  class ConnectionPointPortData {
56838
- constructor(connectionPoint, nodeContainer) {
56839
- this._connectedPort = null;
56840
- this.data = connectionPoint;
56841
- this._nodeContainer = nodeContainer;
56842
- }
56843
56839
  get name() {
56844
56840
  const block = this.data.ownerBlock;
56845
56841
  let portName = this.data.displayName || this.data.name;
@@ -56909,6 +56905,11 @@ class ConnectionPointPortData {
56909
56905
  });
56910
56906
  return endpoints;
56911
56907
  }
56908
+ constructor(connectionPoint, nodeContainer) {
56909
+ this._connectedPort = null;
56910
+ this.data = connectionPoint;
56911
+ this._nodeContainer = nodeContainer;
56912
+ }
56912
56913
  updateDisplayName(newName) {
56913
56914
  this.data.displayName = newName;
56914
56915
  }