@babylonjs/shared-ui-components 6.17.1 → 6.19.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.
@@ -7,6 +7,9 @@
7
7
  width: 20px;
8
8
  height: 20px;
9
9
  align-self: center;
10
+ display: grid;
11
+ grid-template-columns: 100%;
12
+ grid-template-rows: 100%;
10
13
 
11
14
  .img {
12
15
  width: 100%;
@@ -12,6 +12,7 @@ export declare class NodePort {
12
12
  node: GraphNode;
13
13
  protected _element: HTMLDivElement;
14
14
  protected _img: HTMLImageElement;
15
+ protected _pip: HTMLDivElement;
15
16
  protected _stateManager: StateManager;
16
17
  protected _portLabelElement: Element;
17
18
  protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;
@@ -68,7 +68,7 @@ export class NodePort {
68
68
  return false;
69
69
  }
70
70
  refresh() {
71
- this._stateManager.applyNodePortDesign(this.portData, this._element, this._img);
71
+ this._stateManager.applyNodePortDesign(this.portData, this._element, this._img, this._pip);
72
72
  }
73
73
  constructor(portContainer, portData, node, stateManager) {
74
74
  this.portData = portData;
@@ -80,6 +80,10 @@ export class NodePort {
80
80
  this._stateManager = stateManager;
81
81
  this._img = portContainer.ownerDocument.createElement("img");
82
82
  this._element.appendChild(this._img);
83
+ this._pip = portContainer.ownerDocument.createElement("div");
84
+ this._pip.classList.add(localStyles["pip"]);
85
+ this._pip.style.display = "none";
86
+ this._element.appendChild(this._pip);
83
87
  // determine if node name is editable
84
88
  if (portContainer.children[0].className === commonStyles["port-label"]) {
85
89
  this._portLabelElement = portContainer.children[0];
@@ -1 +1 @@
1
- {"version":3,"file":"nodePort.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/nodeGraphSystem/nodePort.ts"],"names":[],"mappings":"AASA,OAAO,YAAY,MAAM,uBAAuB,CAAC;AACjD,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAElD,MAAM,OAAO,QAAQ;IAUjB,IAAW,OAAO;QACd,IAAI,IAAI,CAAC,aAAa,EAAE;YACpB,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;SACrC;QAED,OAAO,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IAED,IAAW,QAAQ;QACf,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,CAAC;IAED,IAAW,QAAQ,CAAC,OAAe;QAC/B,IAAI,IAAI,CAAC,iBAAiB,EAAE;YACxB,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;YACzC,IAAI,CAAC,iBAAiB,CAAC,SAAS,GAAG,OAAO,CAAC;SAC9C;IACL,CAAC;IAED,IAAW,QAAQ;QACf,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE;YAC5B,OAAO,KAAK,CAAC;SAChB;aAAM,IAAI,IAAI,CAAC,gCAAgC,EAAE,EAAE;YAChD,2BAA2B;YAC3B,OAAO,IAAI,CAAC;SACf;aAAM;YACH,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC1D,IAAI,IAAI,CAAC,MAAM,EAAE;gBACb,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,EAAE;oBAC7B,sCAAsC;oBACtC,OAAO,IAAI,CAAC;iBACf;aACJ;SACJ;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAEM,QAAQ;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC;IACpC,CAAC;IAED,IAAW,cAAc;QACrB,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,IAAI,IAAI,CAAC,gCAAgC,EAAE,EAAE;YAC7E,OAAO,IAAI,CAAC;SACf;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,IAAW,cAAc,CAAC,KAAc;QACpC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,OAAO;SACV;QACD,IAAI,CAAC,QAAQ,CAAC,gBAAgB,GAAG,KAAK,CAAC;IAC3C,CAAC;IAED,IAAW,mBAAmB;QAC1B,OAAO,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC;IAC7C,CAAC;IAED,IAAW,mBAAmB,CAAC,KAAa;QACxC,IAAI,CAAC,QAAQ,CAAC,mBAAmB,GAAG,KAAK,CAAC;IAC9C,CAAC;IAEO,gCAAgC;QACpC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC1D,IAAI,IAAI,CAAC,MAAM,EAAE;YACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAClC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,gBAAgB,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,KAAM,CAAC,gBAAgB,EAAE;oBACpE,OAAO,IAAI,CAAC;iBACf;aACJ;SACJ;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAEM,OAAO;QACV,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACpF,CAAC;IAED,YAAmB,aAA0B,EAAS,QAAmB,EAAS,IAAe,EAAE,YAA0B;QAAvE,aAAQ,GAAR,QAAQ,CAAW;QAAS,SAAI,GAAJ,IAAI,CAAW;QAjF1F,kBAAa,GAA4B,IAAI,CAAC;QAkFjD,IAAI,CAAC,QAAQ,GAAG,aAAa,CAAC,aAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAClE,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QAC/C,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACzC,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC;QAElC,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,aAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9D,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAErC,qCAAqC;QACrC,IAAI,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,YAAY,CAAC,YAAY,CAAC,EAAE;YACpE,IAAI,CAAC,iBAAiB,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;SACtD;QAEA,IAAI,CAAC,QAAgB,CAAC,IAAI,GAAG,IAAI,CAAC;QAEnC,eAAe;QACf,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC;QAExC,IAAI,CAAC,6BAA6B,GAAG,YAAY,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YAClF,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,qBAAqB,EAAE,CAAC;YAEnD,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,EAAE;gBAC3G,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;gBACxD,OAAO;aACV;YAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;YACrD,IAAI,CAAC,aAAa,CAAC,iCAAiC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QAC/E,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC,aAAa,CAAC,4BAA4B,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;YAC/F,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,IAAI,EAAE,CAAC;YACpC,IAAI,SAAS,KAAK,IAAI,EAAE;gBACpB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;aACpD;iBAAM;gBACH,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;aACvD;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,OAAO,EAAE,CAAC;IACnB,CAAC;IAEM,OAAO;QACV,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,MAAM,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;QAEnF,IAAI,IAAI,CAAC,2BAA2B,EAAE;YAClC,IAAI,CAAC,aAAa,CAAC,4BAA4B,CAAC,MAAM,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;SAC5F;IACL,CAAC;IAEM,MAAM,CAAC,iBAAiB,CAAC,QAAmB,EAAE,IAAe,EAAE,IAAiB,EAAE,cAAyC,EAAE,YAA0B;QAC1J,MAAM,aAAa,GAAG,IAAI,CAAC,aAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE/D,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAEnD,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;QAEhC,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,uBAAuB,CAAC,QAAQ,CAAC,EAAE;YACrE,MAAM,SAAS,GAAG,IAAI,CAAC,aAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC3D,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC;YACpD,SAAS,CAAC,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC;YACpC,aAAa,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;SACxC;QAED,OAAO,IAAI,QAAQ,CAAC,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC;IACrE,CAAC;CACJ","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { Observer } from \"core/Misc/observable\";\r\nimport type { Vector2 } from \"core/Maths/math.vector\";\r\nimport type { GraphNode } from \"./graphNode\";\r\nimport type { StateManager } from \"./stateManager\";\r\nimport type { ISelectionChangedOptions } from \"./interfaces/selectionChangedOptions\";\r\nimport type { FrameNodePort } from \"./frameNodePort\";\r\nimport type { IDisplayManager } from \"./interfaces/displayManager\";\r\nimport type { IPortData } from \"./interfaces/portData\";\r\nimport commonStyles from \"./common.modules.scss\";\r\nimport localStyles from \"./nodePort.modules.scss\";\r\n\r\nexport class NodePort {\r\n protected _element: HTMLDivElement;\r\n protected _img: HTMLImageElement;\r\n protected _stateManager: StateManager;\r\n protected _portLabelElement: Element;\r\n protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;\r\n protected _onSelectionChangedObserver: Nullable<Observer<Nullable<ISelectionChangedOptions>>>;\r\n protected _exposedOnFrame: boolean;\r\n public delegatedPort: Nullable<FrameNodePort> = null;\r\n\r\n public get element(): HTMLDivElement {\r\n if (this.delegatedPort) {\r\n return this.delegatedPort.element;\r\n }\r\n\r\n return this._element;\r\n }\r\n\r\n public get portName() {\r\n return this.portData.name;\r\n }\r\n\r\n public set portName(newName: string) {\r\n if (this._portLabelElement) {\r\n this.portData.updateDisplayName(newName);\r\n this._portLabelElement.innerHTML = newName;\r\n }\r\n }\r\n\r\n public get disabled() {\r\n if (!this.portData.isConnected) {\r\n return false;\r\n } else if (this._isConnectedToNodeOutsideOfFrame()) {\r\n //connected to outside node\r\n return true;\r\n } else {\r\n const link = this.node.getLinksForPortData(this.portData);\r\n if (link.length) {\r\n if (link[0].nodeB === this.node) {\r\n // check if this node is the receiving\r\n return true;\r\n }\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n public hasLabel() {\r\n return !!this._portLabelElement;\r\n }\r\n\r\n public get exposedOnFrame() {\r\n if (!!this.portData.isExposedOnFrame || this._isConnectedToNodeOutsideOfFrame()) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n public set exposedOnFrame(value: boolean) {\r\n if (this.disabled) {\r\n return;\r\n }\r\n this.portData.isExposedOnFrame = value;\r\n }\r\n\r\n public get exposedPortPosition() {\r\n return this.portData.exposedPortPosition;\r\n }\r\n\r\n public set exposedPortPosition(value: number) {\r\n this.portData.exposedPortPosition = value;\r\n }\r\n\r\n private _isConnectedToNodeOutsideOfFrame() {\r\n const link = this.node.getLinksForPortData(this.portData);\r\n if (link.length) {\r\n for (let i = 0; i < link.length; i++) {\r\n if (link[i].nodeA.enclosingFrameId !== link[i].nodeB!.enclosingFrameId) {\r\n return true;\r\n }\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n public refresh() {\r\n this._stateManager.applyNodePortDesign(this.portData, this._element, this._img);\r\n }\r\n\r\n public constructor(portContainer: HTMLElement, public portData: IPortData, public node: GraphNode, stateManager: StateManager) {\r\n this._element = portContainer.ownerDocument!.createElement(\"div\");\r\n this._element.classList.add(commonStyles.port);\r\n portContainer.appendChild(this._element);\r\n this._stateManager = stateManager;\r\n\r\n this._img = portContainer.ownerDocument!.createElement(\"img\");\r\n this._element.appendChild(this._img);\r\n\r\n // determine if node name is editable\r\n if (portContainer.children[0].className === commonStyles[\"port-label\"]) {\r\n this._portLabelElement = portContainer.children[0];\r\n }\r\n\r\n (this._element as any).port = this;\r\n\r\n // Drag support\r\n this._element.ondragstart = () => false;\r\n\r\n this._onCandidateLinkMovedObserver = stateManager.onCandidateLinkMoved.add((coords) => {\r\n const rect = this._element.getBoundingClientRect();\r\n\r\n if (!coords || rect.left > coords.x || rect.right < coords.x || rect.top > coords.y || rect.bottom < coords.y) {\r\n this._element.classList.remove(localStyles[\"selected\"]);\r\n return;\r\n }\r\n\r\n this._element.classList.add(localStyles[\"selected\"]);\r\n this._stateManager.onCandidatePortSelectedObservable.notifyObservers(this);\r\n });\r\n\r\n this._onSelectionChangedObserver = this._stateManager.onSelectionChangedObservable.add((options) => {\r\n const { selection } = options || {};\r\n if (selection === this) {\r\n this._img.classList.add(localStyles[\"selected\"]);\r\n } else {\r\n this._img.classList.remove(localStyles[\"selected\"]);\r\n }\r\n });\r\n\r\n this.refresh();\r\n }\r\n\r\n public dispose() {\r\n this._stateManager.onCandidateLinkMoved.remove(this._onCandidateLinkMovedObserver);\r\n\r\n if (this._onSelectionChangedObserver) {\r\n this._stateManager.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);\r\n }\r\n }\r\n\r\n public static CreatePortElement(portData: IPortData, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, stateManager: StateManager) {\r\n const portContainer = root.ownerDocument!.createElement(\"div\");\r\n\r\n portContainer.classList.add(commonStyles.portLine);\r\n\r\n root.appendChild(portContainer);\r\n\r\n if (!displayManager || displayManager.shouldDisplayPortLabels(portData)) {\r\n const portLabel = root.ownerDocument!.createElement(\"div\");\r\n portLabel.classList.add(commonStyles[\"port-label\"]);\r\n portLabel.innerHTML = portData.name;\r\n portContainer.appendChild(portLabel);\r\n }\r\n\r\n return new NodePort(portContainer, portData, node, stateManager);\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"nodePort.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/nodeGraphSystem/nodePort.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { Observer } from \"core/Misc/observable\";\r\nimport type { Vector2 } from \"core/Maths/math.vector\";\r\nimport type { GraphNode } from \"./graphNode\";\r\nimport type { StateManager } from \"./stateManager\";\r\nimport type { ISelectionChangedOptions } from \"./interfaces/selectionChangedOptions\";\r\nimport type { FrameNodePort } from \"./frameNodePort\";\r\nimport type { IDisplayManager } from \"./interfaces/displayManager\";\r\nimport type { IPortData } from \"./interfaces/portData\";\r\nimport commonStyles from \"./common.modules.scss\";\r\nimport localStyles from \"./nodePort.modules.scss\";\r\n\r\nexport class NodePort {\r\n protected _element: HTMLDivElement;\r\n protected _img: HTMLImageElement;\r\n protected _pip: HTMLDivElement;\r\n protected _stateManager: StateManager;\r\n protected _portLabelElement: Element;\r\n protected _onCandidateLinkMovedObserver: Nullable<Observer<Nullable<Vector2>>>;\r\n protected _onSelectionChangedObserver: Nullable<Observer<Nullable<ISelectionChangedOptions>>>;\r\n protected _exposedOnFrame: boolean;\r\n public delegatedPort: Nullable<FrameNodePort> = null;\r\n\r\n public get element(): HTMLDivElement {\r\n if (this.delegatedPort) {\r\n return this.delegatedPort.element;\r\n }\r\n\r\n return this._element;\r\n }\r\n\r\n public get portName() {\r\n return this.portData.name;\r\n }\r\n\r\n public set portName(newName: string) {\r\n if (this._portLabelElement) {\r\n this.portData.updateDisplayName(newName);\r\n this._portLabelElement.innerHTML = newName;\r\n }\r\n }\r\n\r\n public get disabled() {\r\n if (!this.portData.isConnected) {\r\n return false;\r\n } else if (this._isConnectedToNodeOutsideOfFrame()) {\r\n //connected to outside node\r\n return true;\r\n } else {\r\n const link = this.node.getLinksForPortData(this.portData);\r\n if (link.length) {\r\n if (link[0].nodeB === this.node) {\r\n // check if this node is the receiving\r\n return true;\r\n }\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n public hasLabel() {\r\n return !!this._portLabelElement;\r\n }\r\n\r\n public get exposedOnFrame() {\r\n if (!!this.portData.isExposedOnFrame || this._isConnectedToNodeOutsideOfFrame()) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n public set exposedOnFrame(value: boolean) {\r\n if (this.disabled) {\r\n return;\r\n }\r\n this.portData.isExposedOnFrame = value;\r\n }\r\n\r\n public get exposedPortPosition() {\r\n return this.portData.exposedPortPosition;\r\n }\r\n\r\n public set exposedPortPosition(value: number) {\r\n this.portData.exposedPortPosition = value;\r\n }\r\n\r\n private _isConnectedToNodeOutsideOfFrame() {\r\n const link = this.node.getLinksForPortData(this.portData);\r\n if (link.length) {\r\n for (let i = 0; i < link.length; i++) {\r\n if (link[i].nodeA.enclosingFrameId !== link[i].nodeB!.enclosingFrameId) {\r\n return true;\r\n }\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n public refresh() {\r\n this._stateManager.applyNodePortDesign(this.portData, this._element, this._img, this._pip);\r\n }\r\n\r\n public constructor(portContainer: HTMLElement, public portData: IPortData, public node: GraphNode, stateManager: StateManager) {\r\n this._element = portContainer.ownerDocument!.createElement(\"div\");\r\n this._element.classList.add(commonStyles.port);\r\n portContainer.appendChild(this._element);\r\n this._stateManager = stateManager;\r\n\r\n this._img = portContainer.ownerDocument!.createElement(\"img\");\r\n this._element.appendChild(this._img);\r\n\r\n this._pip = portContainer.ownerDocument!.createElement(\"div\");\r\n this._pip.classList.add(localStyles[\"pip\"]);\r\n this._pip.style.display = \"none\";\r\n this._element.appendChild(this._pip);\r\n\r\n // determine if node name is editable\r\n if (portContainer.children[0].className === commonStyles[\"port-label\"]) {\r\n this._portLabelElement = portContainer.children[0];\r\n }\r\n\r\n (this._element as any).port = this;\r\n\r\n // Drag support\r\n this._element.ondragstart = () => false;\r\n\r\n this._onCandidateLinkMovedObserver = stateManager.onCandidateLinkMoved.add((coords) => {\r\n const rect = this._element.getBoundingClientRect();\r\n\r\n if (!coords || rect.left > coords.x || rect.right < coords.x || rect.top > coords.y || rect.bottom < coords.y) {\r\n this._element.classList.remove(localStyles[\"selected\"]);\r\n return;\r\n }\r\n\r\n this._element.classList.add(localStyles[\"selected\"]);\r\n this._stateManager.onCandidatePortSelectedObservable.notifyObservers(this);\r\n });\r\n\r\n this._onSelectionChangedObserver = this._stateManager.onSelectionChangedObservable.add((options) => {\r\n const { selection } = options || {};\r\n if (selection === this) {\r\n this._img.classList.add(localStyles[\"selected\"]);\r\n } else {\r\n this._img.classList.remove(localStyles[\"selected\"]);\r\n }\r\n });\r\n\r\n this.refresh();\r\n }\r\n\r\n public dispose() {\r\n this._stateManager.onCandidateLinkMoved.remove(this._onCandidateLinkMovedObserver);\r\n\r\n if (this._onSelectionChangedObserver) {\r\n this._stateManager.onSelectionChangedObservable.remove(this._onSelectionChangedObserver);\r\n }\r\n }\r\n\r\n public static CreatePortElement(portData: IPortData, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, stateManager: StateManager) {\r\n const portContainer = root.ownerDocument!.createElement(\"div\");\r\n\r\n portContainer.classList.add(commonStyles.portLine);\r\n\r\n root.appendChild(portContainer);\r\n\r\n if (!displayManager || displayManager.shouldDisplayPortLabels(portData)) {\r\n const portLabel = root.ownerDocument!.createElement(\"div\");\r\n portLabel.classList.add(commonStyles[\"port-label\"]);\r\n portLabel.innerHTML = portData.name;\r\n portContainer.appendChild(portLabel);\r\n }\r\n\r\n return new NodePort(portContainer, portData, node, stateManager);\r\n }\r\n}\r\n"]}
@@ -2,6 +2,27 @@
2
2
  filter: brightness(2);
3
3
  }
4
4
 
5
+ .pip {
6
+ background: green;
7
+ width: 6px;
8
+ height: 6px;
9
+ grid-row: 1;
10
+ grid-column: 1;
11
+ align-self: center;
12
+ justify-self: center;
13
+ border-radius: 7px;
14
+ border: 2px solid black;
15
+
16
+ &.hidden {
17
+ display: none;
18
+ }
19
+ }
20
+
21
+ img {
22
+ grid-row: 1;
23
+ grid-column: 1;
24
+ }
25
+
5
26
  img.selected {
6
27
  box-shadow: 0 0 0 2px;
7
28
  border-radius: 50%;
@@ -43,7 +43,7 @@ export declare class StateManager {
43
43
  }>;
44
44
  exportData: (data: any, frame?: Nullable<GraphFrame>) => string;
45
45
  isElbowConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;
46
- applyNodePortDesign: (data: IPortData, element: HTMLElement, img: HTMLImageElement) => void;
46
+ applyNodePortDesign: (data: IPortData, element: HTMLElement, img: HTMLImageElement, pip: HTMLDivElement) => void;
47
47
  storeEditorData: (serializationObject: any, frame?: Nullable<GraphFrame>) => void;
48
48
  getEditorDataMap: () => {
49
49
  [key: number]: number;
@@ -1 +1 @@
1
- {"version":3,"file":"stateManager.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/nodeGraphSystem/stateManager.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,2CAA6B;AAWlD,MAAM,OAAO,YAAY;IAAzB;QAMI,kCAA6B,GAAG,IAAI,UAAU,EAA4B,CAAC;QAC3E,iCAA4B,GAAG,IAAI,UAAU,EAAsC,CAAC;QACpF,6BAAwB,GAAG,IAAI,UAAU,EAAc,CAAC;QACxD,+BAA0B,GAAG,IAAI,UAAU,EAAiB,CAAC;QAC7D,iCAA4B,GAAG,IAAI,UAAU,EAAa,CAAC;QAC3D,wBAAmB,GAAG,IAAI,UAAU,EAAwB,CAAC;QAC7D,yBAAoB,GAAG,IAAI,UAAU,EAAqB,CAAC;QAC3D,sCAAiC,GAAG,IAAI,UAAU,EAAsC,CAAC;QACzF,+BAA0B,GAAG,IAAI,UAAU,EAAa,CAAC;QACzD,gCAA2B,GAAG,IAAI,UAAU,EAAQ,CAAC;QACrD,2CAAsC,GAAG,IAAI,UAAU,EAAU,CAAC;QAClE,kCAA6B,GAAG,IAAI,UAAU,EAAa,CAAC;QAC5D,sBAAiB,GAAG,IAAI,UAAU,EAAQ,CAAC;QAC3C,iCAA4B,GAAG,IAAI,UAAU,EAAuG,CAAC;QACrJ,8BAAyB,GAAG,IAAI,UAAU,EAAkC,CAAC;IAWjF,CAAC;CAAA","sourcesContent":["import type { Vector2 } from \"core/Maths/math.vector\";\r\nimport { Observable } from \"core/Misc/observable\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { FrameNodePort } from \"./frameNodePort\";\r\nimport type { GraphFrame } from \"./graphFrame\";\r\nimport type { GraphNode } from \"./graphNode\";\r\nimport type { INodeContainer } from \"./interfaces/nodeContainer\";\r\nimport type { INodeData } from \"./interfaces/nodeData\";\r\nimport type { IPortData } from \"./interfaces/portData\";\r\nimport type { ISelectionChangedOptions } from \"./interfaces/selectionChangedOptions\";\r\nimport type { NodePort } from \"./nodePort\";\r\n\r\nexport class StateManager {\r\n data: any;\r\n hostDocument: Document;\r\n lockObject: any;\r\n modalIsDisplayed: boolean;\r\n\r\n onSearchBoxRequiredObservable = new Observable<{ x: number; y: number }>();\r\n onSelectionChangedObservable = new Observable<Nullable<ISelectionChangedOptions>>();\r\n onFrameCreatedObservable = new Observable<GraphFrame>();\r\n onUpdateRequiredObservable = new Observable<Nullable<any>>();\r\n onGraphNodeRemovalObservable = new Observable<GraphNode>();\r\n onSelectionBoxMoved = new Observable<ClientRect | DOMRect>();\r\n onCandidateLinkMoved = new Observable<Nullable<Vector2>>();\r\n onCandidatePortSelectedObservable = new Observable<Nullable<NodePort | FrameNodePort>>();\r\n onNewNodeCreatedObservable = new Observable<GraphNode>();\r\n onRebuildRequiredObservable = new Observable<void>();\r\n onErrorMessageDialogRequiredObservable = new Observable<string>();\r\n onExposePortOnFrameObservable = new Observable<GraphNode>();\r\n onGridSizeChanged = new Observable<void>();\r\n onNewBlockRequiredObservable = new Observable<{ type: string; targetX: number; targetY: number; needRepositioning?: boolean; smartAdd?: boolean }>();\r\n onHighlightNodeObservable = new Observable<{ data: any; active: boolean }>();\r\n\r\n exportData: (data: any, frame?: Nullable<GraphFrame>) => string;\r\n isElbowConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;\r\n applyNodePortDesign: (data: IPortData, element: HTMLElement, img: HTMLImageElement) => void;\r\n\r\n storeEditorData: (serializationObject: any, frame?: Nullable<GraphFrame>) => void;\r\n\r\n getEditorDataMap: () => { [key: number]: number };\r\n\r\n createDefaultInputData: (rootData: any, portData: IPortData, nodeContainer: INodeContainer) => Nullable<{ data: INodeData; name: string }>;\r\n}\r\n"]}
1
+ {"version":3,"file":"stateManager.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/nodeGraphSystem/stateManager.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,2CAA6B;AAWlD,MAAM,OAAO,YAAY;IAAzB;QAMI,kCAA6B,GAAG,IAAI,UAAU,EAA4B,CAAC;QAC3E,iCAA4B,GAAG,IAAI,UAAU,EAAsC,CAAC;QACpF,6BAAwB,GAAG,IAAI,UAAU,EAAc,CAAC;QACxD,+BAA0B,GAAG,IAAI,UAAU,EAAiB,CAAC;QAC7D,iCAA4B,GAAG,IAAI,UAAU,EAAa,CAAC;QAC3D,wBAAmB,GAAG,IAAI,UAAU,EAAwB,CAAC;QAC7D,yBAAoB,GAAG,IAAI,UAAU,EAAqB,CAAC;QAC3D,sCAAiC,GAAG,IAAI,UAAU,EAAsC,CAAC;QACzF,+BAA0B,GAAG,IAAI,UAAU,EAAa,CAAC;QACzD,gCAA2B,GAAG,IAAI,UAAU,EAAQ,CAAC;QACrD,2CAAsC,GAAG,IAAI,UAAU,EAAU,CAAC;QAClE,kCAA6B,GAAG,IAAI,UAAU,EAAa,CAAC;QAC5D,sBAAiB,GAAG,IAAI,UAAU,EAAQ,CAAC;QAC3C,iCAA4B,GAAG,IAAI,UAAU,EAAuG,CAAC;QACrJ,8BAAyB,GAAG,IAAI,UAAU,EAAkC,CAAC;IAWjF,CAAC;CAAA","sourcesContent":["import type { Vector2 } from \"core/Maths/math.vector\";\r\nimport { Observable } from \"core/Misc/observable\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { FrameNodePort } from \"./frameNodePort\";\r\nimport type { GraphFrame } from \"./graphFrame\";\r\nimport type { GraphNode } from \"./graphNode\";\r\nimport type { INodeContainer } from \"./interfaces/nodeContainer\";\r\nimport type { INodeData } from \"./interfaces/nodeData\";\r\nimport type { IPortData } from \"./interfaces/portData\";\r\nimport type { ISelectionChangedOptions } from \"./interfaces/selectionChangedOptions\";\r\nimport type { NodePort } from \"./nodePort\";\r\n\r\nexport class StateManager {\r\n data: any;\r\n hostDocument: Document;\r\n lockObject: any;\r\n modalIsDisplayed: boolean;\r\n\r\n onSearchBoxRequiredObservable = new Observable<{ x: number; y: number }>();\r\n onSelectionChangedObservable = new Observable<Nullable<ISelectionChangedOptions>>();\r\n onFrameCreatedObservable = new Observable<GraphFrame>();\r\n onUpdateRequiredObservable = new Observable<Nullable<any>>();\r\n onGraphNodeRemovalObservable = new Observable<GraphNode>();\r\n onSelectionBoxMoved = new Observable<ClientRect | DOMRect>();\r\n onCandidateLinkMoved = new Observable<Nullable<Vector2>>();\r\n onCandidatePortSelectedObservable = new Observable<Nullable<NodePort | FrameNodePort>>();\r\n onNewNodeCreatedObservable = new Observable<GraphNode>();\r\n onRebuildRequiredObservable = new Observable<void>();\r\n onErrorMessageDialogRequiredObservable = new Observable<string>();\r\n onExposePortOnFrameObservable = new Observable<GraphNode>();\r\n onGridSizeChanged = new Observable<void>();\r\n onNewBlockRequiredObservable = new Observable<{ type: string; targetX: number; targetY: number; needRepositioning?: boolean; smartAdd?: boolean }>();\r\n onHighlightNodeObservable = new Observable<{ data: any; active: boolean }>();\r\n\r\n exportData: (data: any, frame?: Nullable<GraphFrame>) => string;\r\n isElbowConnectionAllowed: (nodeA: FrameNodePort | NodePort, nodeB: FrameNodePort | NodePort) => boolean;\r\n applyNodePortDesign: (data: IPortData, element: HTMLElement, img: HTMLImageElement, pip: HTMLDivElement) => void;\r\n\r\n storeEditorData: (serializationObject: any, frame?: Nullable<GraphFrame>) => void;\r\n\r\n getEditorDataMap: () => { [key: number]: number };\r\n\r\n createDefaultInputData: (rootData: any, portData: IPortData, nodeContainer: INodeContainer) => Nullable<{ data: INodeData; name: string }>;\r\n}\r\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@babylonjs/shared-ui-components",
3
- "version": "6.17.1",
3
+ "version": "6.19.0",
4
4
  "main": "index.js",
5
5
  "module": "index.js",
6
6
  "types": "index.d.ts",