@babylonjs/shared-ui-components 5.45.2 → 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.
- package/components/Button.d.ts +1 -1
- package/components/Icon.d.ts +1 -1
- package/components/Label.d.ts +1 -1
- package/components/Toggle.d.ts +1 -1
- package/components/layout/FlexibleResizeBar.d.ts +1 -1
- package/components/layout/types.d.ts +5 -5
- package/components/layout/utils.d.ts +1 -1
- package/components/reactGraphSystem/NodeRenderer.d.ts +4 -4
- package/lines/optionsLineComponent.js +5 -5
- package/lines/optionsLineComponent.js.map +1 -1
- package/nodeGraphSystem/frameNodePort.js +19 -19
- package/nodeGraphSystem/frameNodePort.js.map +1 -1
- package/nodeGraphSystem/graphCanvas.js +81 -81
- package/nodeGraphSystem/graphCanvas.js.map +1 -1
- package/nodeGraphSystem/graphFrame.js +866 -866
- package/nodeGraphSystem/graphFrame.js.map +1 -1
- package/nodeGraphSystem/graphNode.js +48 -48
- package/nodeGraphSystem/graphNode.js.map +1 -1
- package/nodeGraphSystem/nodeLink.js +37 -37
- package/nodeGraphSystem/nodeLink.js.map +1 -1
- package/nodeGraphSystem/nodePort.js +37 -37
- package/nodeGraphSystem/nodePort.js.map +1 -1
- package/nodeGraphSystem/tools.d.ts +1 -1
- package/nodeGraphSystem/types/framePortData.d.ts +1 -1
- package/package.json +1 -1
package/components/Button.d.ts
CHANGED
package/components/Icon.d.ts
CHANGED
package/components/Label.d.ts
CHANGED
package/components/Toggle.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ReactElement } from "react";
|
|
2
|
-
export
|
|
2
|
+
export type LayoutTab = {
|
|
3
3
|
/**
|
|
4
4
|
* Tab id
|
|
5
5
|
*/
|
|
@@ -13,7 +13,7 @@ export declare type LayoutTab = {
|
|
|
13
13
|
*/
|
|
14
14
|
title: string;
|
|
15
15
|
};
|
|
16
|
-
export
|
|
16
|
+
export type LayoutTabsRow = {
|
|
17
17
|
/**
|
|
18
18
|
* row id
|
|
19
19
|
*/
|
|
@@ -31,7 +31,7 @@ export declare type LayoutTabsRow = {
|
|
|
31
31
|
*/
|
|
32
32
|
tabs: LayoutTab[];
|
|
33
33
|
};
|
|
34
|
-
export
|
|
34
|
+
export type LayoutColumn = {
|
|
35
35
|
/**
|
|
36
36
|
* column id
|
|
37
37
|
*/
|
|
@@ -45,13 +45,13 @@ export declare type LayoutColumn = {
|
|
|
45
45
|
*/
|
|
46
46
|
rows: LayoutTabsRow[];
|
|
47
47
|
};
|
|
48
|
-
export
|
|
48
|
+
export type Layout = {
|
|
49
49
|
/**
|
|
50
50
|
* layout columns
|
|
51
51
|
*/
|
|
52
52
|
columns?: LayoutColumn[];
|
|
53
53
|
};
|
|
54
|
-
export
|
|
54
|
+
export type TabDrag = {
|
|
55
55
|
/**
|
|
56
56
|
* row number of the tab being dragged
|
|
57
57
|
*/
|
|
@@ -6,7 +6,7 @@ import type { Layout, LayoutColumn, LayoutTabsRow } from "./types";
|
|
|
6
6
|
* @param row
|
|
7
7
|
* @returns
|
|
8
8
|
*/
|
|
9
|
-
export declare const getPosInLayout: (layout: Layout, column: number, row?: number
|
|
9
|
+
export declare const getPosInLayout: (layout: Layout, column: number, row?: number) => LayoutColumn | LayoutTabsRow;
|
|
10
10
|
/**
|
|
11
11
|
* Remove a row in position row, column from the layout, and redistribute heights of remaining rows
|
|
12
12
|
* @param layout
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import type { ComponentType } from "react";
|
|
2
2
|
import type { Nullable } from "@babylonjs/core/types.js";
|
|
3
|
-
export
|
|
3
|
+
export type IVisualRecordsType = Record<string, {
|
|
4
4
|
x: number;
|
|
5
5
|
y: number;
|
|
6
6
|
}>;
|
|
7
|
-
export
|
|
7
|
+
export type IConnectionType = {
|
|
8
8
|
id: string;
|
|
9
9
|
sourceId: string;
|
|
10
10
|
targetId: string;
|
|
11
11
|
};
|
|
12
|
-
export
|
|
12
|
+
export type ICustomDataType = {
|
|
13
13
|
type: string;
|
|
14
14
|
value: any;
|
|
15
15
|
};
|
|
16
|
-
export
|
|
16
|
+
export type INodeType = {
|
|
17
17
|
id: string;
|
|
18
18
|
label: string;
|
|
19
19
|
customData?: ICustomDataType;
|
|
@@ -3,11 +3,6 @@ import * as React from "react";
|
|
|
3
3
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
4
4
|
export const Null_Value = Number.MAX_SAFE_INTEGER;
|
|
5
5
|
export class OptionsLineComponent extends React.Component {
|
|
6
|
-
constructor(props) {
|
|
7
|
-
super(props);
|
|
8
|
-
this._localChange = false;
|
|
9
|
-
this.state = { value: this._remapValueIn(this._getValue(props)) };
|
|
10
|
-
}
|
|
11
6
|
_remapValueIn(value) {
|
|
12
7
|
return this.props.allowNullValue && value === null ? Null_Value : value;
|
|
13
8
|
}
|
|
@@ -20,6 +15,11 @@ export class OptionsLineComponent extends React.Component {
|
|
|
20
15
|
}
|
|
21
16
|
return props.target && props.propertyName ? props.target[props.propertyName] : props.options[props.defaultIfNull || 0];
|
|
22
17
|
}
|
|
18
|
+
constructor(props) {
|
|
19
|
+
super(props);
|
|
20
|
+
this._localChange = false;
|
|
21
|
+
this.state = { value: this._remapValueIn(this._getValue(props)) };
|
|
22
|
+
}
|
|
23
23
|
shouldComponentUpdate(nextProps, nextState) {
|
|
24
24
|
if (this._localChange) {
|
|
25
25
|
this._localChange = false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"optionsLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/optionsLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,gEAAgE;AAChE,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAmBlD,MAAM,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAiE;
|
|
1
|
+
{"version":3,"file":"optionsLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/optionsLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { IInspectableOptions } from \"core/Misc/iInspectable\";\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const Null_Value = Number.MAX_SAFE_INTEGER;\r\n\r\nexport interface IOptionsLineComponentProps {\r\n label: string;\r\n target: any;\r\n propertyName: string;\r\n options: IInspectableOptions[];\r\n noDirectUpdate?: boolean;\r\n onSelect?: (value: number | string) => void;\r\n extractValue?: (target: any) => number | string;\r\n onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n allowNullValue?: boolean;\r\n icon?: string;\r\n iconLabel?: string;\r\n className?: string;\r\n valuesAreStrings?: boolean;\r\n defaultIfNull?: number;\r\n}\r\n\r\nexport class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, { value: number | string }> {\r\n private _localChange = false;\r\n\r\n private _remapValueIn(value: number | null): number {\r\n return this.props.allowNullValue && value === null ? Null_Value : value!;\r\n }\r\n\r\n private _remapValueOut(value: number): number | null {\r\n return this.props.allowNullValue && value === Null_Value ? null : value;\r\n }\r\n\r\n private _getValue(props: IOptionsLineComponentProps) {\r\n if (props.extractValue) {\r\n return props.extractValue(props.target);\r\n }\r\n return props.target && props.propertyName ? props.target[props.propertyName] : props.options[props.defaultIfNull || 0];\r\n }\r\n\r\n constructor(props: IOptionsLineComponentProps) {\r\n super(props);\r\n\r\n this.state = { value: this._remapValueIn(this._getValue(props)) };\r\n }\r\n\r\n shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: { value: number }) {\r\n if (this._localChange) {\r\n this._localChange = false;\r\n return true;\r\n }\r\n\r\n const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue(this.props.target) : nextProps.target[nextProps.propertyName]);\r\n if (newValue != null && newValue !== nextState.value) {\r\n nextState.value = newValue;\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n if (!this.props.onPropertyChangedObservable) {\r\n return;\r\n }\r\n\r\n this.props.onPropertyChangedObservable.notifyObservers({\r\n object: this.props.target,\r\n property: this.props.propertyName,\r\n value: newValue,\r\n initialValue: previousValue,\r\n allowNullValue: this.props.allowNullValue,\r\n });\r\n }\r\n\r\n setValue(value: string | number) {\r\n this.setState({ value: value });\r\n }\r\n\r\n updateValue(valueString: string) {\r\n const value = this.props.valuesAreStrings ? valueString : parseInt(valueString);\r\n this._localChange = true;\r\n\r\n const store = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n if (!this.props.noDirectUpdate) {\r\n this.props.target[this.props.propertyName] = this._remapValueOut(value as number);\r\n }\r\n this.setState({ value: value });\r\n\r\n if (this.props.onSelect) {\r\n this.props.onSelect(value);\r\n }\r\n\r\n const newValue = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n this.raiseOnPropertyChanged(newValue, store);\r\n }\r\n\r\n render() {\r\n return (\r\n <div className={\"listLine\" + (this.props.className ? \" \" + this.props.className : \"\")}>\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} color=\"black\" className=\"icon\" />}\r\n <div className=\"label\" title={this.props.label}>\r\n {this.props.label}\r\n </div>\r\n <div className=\"options\">\r\n <select onChange={(evt) => this.updateValue(evt.target.value)} value={this.state.value ?? \"\"}>\r\n {this.props.options.map((option, i) => {\r\n return (\r\n <option selected={option.selected} key={option.label + i} value={option.value} title={option.label}>\r\n {option.label}\r\n </option>\r\n );\r\n })}\r\n </select>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
|
@@ -3,25 +3,6 @@ import { NodePort } from "./nodePort.js";
|
|
|
3
3
|
import { IsFramePortData } from "./tools.js";
|
|
4
4
|
import commonStyles from "./common.modules.scss";
|
|
5
5
|
export class FrameNodePort extends NodePort {
|
|
6
|
-
constructor(portContainer, portData, node, stateManager, isInput, framePortId, parentFrameId) {
|
|
7
|
-
super(portContainer, portData, node, stateManager);
|
|
8
|
-
this.portData = portData;
|
|
9
|
-
this.node = node;
|
|
10
|
-
this._onFramePortPositionChangedObservable = new Observable();
|
|
11
|
-
this._parentFrameId = parentFrameId;
|
|
12
|
-
this._isInput = isInput;
|
|
13
|
-
this._framePortId = framePortId;
|
|
14
|
-
this._onSelectionChangedObserver = stateManager.onSelectionChangedObservable.add((options) => {
|
|
15
|
-
const { selection } = options || {};
|
|
16
|
-
if (IsFramePortData(selection) && selection.port === this) {
|
|
17
|
-
this._img.classList.add(commonStyles["selected"]);
|
|
18
|
-
}
|
|
19
|
-
else {
|
|
20
|
-
this._img.classList.remove(commonStyles["selected"]);
|
|
21
|
-
}
|
|
22
|
-
});
|
|
23
|
-
this.refresh();
|
|
24
|
-
}
|
|
25
6
|
get parentFrameId() {
|
|
26
7
|
return this._parentFrameId;
|
|
27
8
|
}
|
|
@@ -41,6 +22,25 @@ export class FrameNodePort extends NodePort {
|
|
|
41
22
|
this._framePortPosition = position;
|
|
42
23
|
this.onFramePortPositionChangedObservable.notifyObservers(this);
|
|
43
24
|
}
|
|
25
|
+
constructor(portContainer, portData, node, stateManager, isInput, framePortId, parentFrameId) {
|
|
26
|
+
super(portContainer, portData, node, stateManager);
|
|
27
|
+
this.portData = portData;
|
|
28
|
+
this.node = node;
|
|
29
|
+
this._onFramePortPositionChangedObservable = new Observable();
|
|
30
|
+
this._parentFrameId = parentFrameId;
|
|
31
|
+
this._isInput = isInput;
|
|
32
|
+
this._framePortId = framePortId;
|
|
33
|
+
this._onSelectionChangedObserver = stateManager.onSelectionChangedObservable.add((options) => {
|
|
34
|
+
const { selection } = options || {};
|
|
35
|
+
if (IsFramePortData(selection) && selection.port === this) {
|
|
36
|
+
this._img.classList.add(commonStyles["selected"]);
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
this._img.classList.remove(commonStyles["selected"]);
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
this.refresh();
|
|
43
|
+
}
|
|
44
44
|
static CreateFrameNodePortElement(portData, node, root, displayManager, stateManager, isInput, framePortId, parentFrameId) {
|
|
45
45
|
const portContainer = root.ownerDocument.createElement("div");
|
|
46
46
|
portContainer.classList.add(commonStyles["portLine"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"frameNodePort.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/nodeGraphSystem/frameNodePort.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,2CAA6B;AAGlD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAI1C,OAAO,YAAY,MAAM,uBAAuB,CAAC;AAEjD,MAAM,OAAO,aAAc,SAAQ,QAAQ;
|
|
1
|
+
{"version":3,"file":"frameNodePort.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/nodeGraphSystem/frameNodePort.ts"],"names":[],"mappings":"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","sourcesContent":["import type { IDisplayManager } from \"./interfaces/displayManager\";\r\nimport { Observable } from \"core/Misc/observable\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { IPortData } from \"./interfaces/portData\";\r\nimport { NodePort } from \"./nodePort\";\r\nimport type { GraphNode } from \"./graphNode\";\r\nimport { IsFramePortData } from \"./tools\";\r\nimport type { FramePortPosition } from \"./graphFrame\";\r\nimport type { StateManager } from \"./stateManager\";\r\nimport type { FramePortData } from \"./types/framePortData\";\r\nimport commonStyles from \"./common.modules.scss\";\r\n\r\nexport class FrameNodePort extends NodePort {\r\n private _parentFrameId: number;\r\n private _isInput: boolean;\r\n private _framePortPosition: FramePortPosition;\r\n private _framePortId: number;\r\n private _onFramePortPositionChangedObservable = new Observable<FrameNodePort>();\r\n\r\n public get parentFrameId() {\r\n return this._parentFrameId;\r\n }\r\n\r\n public get onFramePortPositionChangedObservable() {\r\n return this._onFramePortPositionChangedObservable;\r\n }\r\n\r\n public get isInput() {\r\n return this._isInput;\r\n }\r\n\r\n public get framePortId() {\r\n return this._framePortId;\r\n }\r\n\r\n public get framePortPosition() {\r\n return this._framePortPosition;\r\n }\r\n\r\n public set framePortPosition(position: FramePortPosition) {\r\n this._framePortPosition = position;\r\n this.onFramePortPositionChangedObservable.notifyObservers(this);\r\n }\r\n\r\n public constructor(\r\n portContainer: HTMLElement,\r\n public portData: IPortData,\r\n public node: GraphNode,\r\n stateManager: StateManager,\r\n isInput: boolean,\r\n framePortId: number,\r\n parentFrameId: number\r\n ) {\r\n super(portContainer, portData, node, stateManager);\r\n\r\n this._parentFrameId = parentFrameId;\r\n this._isInput = isInput;\r\n this._framePortId = framePortId;\r\n\r\n this._onSelectionChangedObserver = stateManager.onSelectionChangedObservable.add((options) => {\r\n const { selection } = options || {};\r\n if (IsFramePortData(selection) && (selection as FramePortData).port === this) {\r\n this._img.classList.add(commonStyles[\"selected\"]);\r\n } else {\r\n this._img.classList.remove(commonStyles[\"selected\"]);\r\n }\r\n });\r\n\r\n this.refresh();\r\n }\r\n\r\n public static CreateFrameNodePortElement(\r\n portData: IPortData,\r\n node: GraphNode,\r\n root: HTMLElement,\r\n displayManager: Nullable<IDisplayManager>,\r\n stateManager: StateManager,\r\n isInput: boolean,\r\n framePortId: number,\r\n parentFrameId: number\r\n ) {\r\n const portContainer = root.ownerDocument!.createElement(\"div\");\r\n\r\n portContainer.classList.add(commonStyles[\"portLine\"]);\r\n if (framePortId !== null) {\r\n portContainer.dataset.framePortId = `${framePortId}`;\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\r\n portLabel.innerHTML = portData.name;\r\n portContainer.appendChild(portLabel);\r\n }\r\n\r\n return new FrameNodePort(portContainer, portData, node, stateManager, isInput, framePortId, parentFrameId);\r\n }\r\n}\r\n"]}
|
|
@@ -15,6 +15,87 @@ import { TypeLedger } from "./typeLedger.js";
|
|
|
15
15
|
import { RefreshNode } from "./tools.js";
|
|
16
16
|
import { SearchBoxComponent } from "./searchBox.js";
|
|
17
17
|
export class GraphCanvasComponent extends React.Component {
|
|
18
|
+
get gridSize() {
|
|
19
|
+
return this._gridSize;
|
|
20
|
+
}
|
|
21
|
+
set gridSize(value) {
|
|
22
|
+
this._gridSize = value;
|
|
23
|
+
this.updateTransform();
|
|
24
|
+
}
|
|
25
|
+
get stateManager() {
|
|
26
|
+
return this.props.stateManager;
|
|
27
|
+
}
|
|
28
|
+
get nodes() {
|
|
29
|
+
return this._nodes;
|
|
30
|
+
}
|
|
31
|
+
get links() {
|
|
32
|
+
return this._links;
|
|
33
|
+
}
|
|
34
|
+
get frames() {
|
|
35
|
+
return this._frames;
|
|
36
|
+
}
|
|
37
|
+
get zoom() {
|
|
38
|
+
return this._zoom;
|
|
39
|
+
}
|
|
40
|
+
set zoom(value) {
|
|
41
|
+
if (this._zoom === value) {
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
this._zoom = value;
|
|
45
|
+
this.updateTransform();
|
|
46
|
+
}
|
|
47
|
+
get x() {
|
|
48
|
+
return this._x;
|
|
49
|
+
}
|
|
50
|
+
set x(value) {
|
|
51
|
+
this._x = value;
|
|
52
|
+
this.updateTransform();
|
|
53
|
+
}
|
|
54
|
+
get y() {
|
|
55
|
+
return this._y;
|
|
56
|
+
}
|
|
57
|
+
set y(value) {
|
|
58
|
+
this._y = value;
|
|
59
|
+
this.updateTransform();
|
|
60
|
+
}
|
|
61
|
+
get selectedNodes() {
|
|
62
|
+
return this._selectedNodes;
|
|
63
|
+
}
|
|
64
|
+
get selectedLink() {
|
|
65
|
+
return this._selectedLink;
|
|
66
|
+
}
|
|
67
|
+
get selectedFrames() {
|
|
68
|
+
return this._selectedFrames;
|
|
69
|
+
}
|
|
70
|
+
get selectedPort() {
|
|
71
|
+
return this._selectedPort;
|
|
72
|
+
}
|
|
73
|
+
get canvasContainer() {
|
|
74
|
+
return this._graphCanvas;
|
|
75
|
+
}
|
|
76
|
+
get hostCanvas() {
|
|
77
|
+
return this._hostCanvas;
|
|
78
|
+
}
|
|
79
|
+
get svgCanvas() {
|
|
80
|
+
return this._svgCanvas;
|
|
81
|
+
}
|
|
82
|
+
get selectionContainer() {
|
|
83
|
+
return this._selectionContainer;
|
|
84
|
+
}
|
|
85
|
+
get frameContainer() {
|
|
86
|
+
return this._frameContainer;
|
|
87
|
+
}
|
|
88
|
+
// There is a selection conflict between nodes and frames if any selected node is inside any selected frame
|
|
89
|
+
_selectedFrameAndNodesConflict(frameSelection, nodeSelection) {
|
|
90
|
+
for (const frame of frameSelection) {
|
|
91
|
+
for (const node of nodeSelection) {
|
|
92
|
+
if (frame.nodes.includes(node)) {
|
|
93
|
+
return true;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
return false;
|
|
98
|
+
}
|
|
18
99
|
constructor(props) {
|
|
19
100
|
super(props);
|
|
20
101
|
this._minZoom = 0.1;
|
|
@@ -167,87 +248,6 @@ export class GraphCanvasComponent extends React.Component {
|
|
|
167
248
|
}
|
|
168
249
|
};
|
|
169
250
|
}
|
|
170
|
-
get gridSize() {
|
|
171
|
-
return this._gridSize;
|
|
172
|
-
}
|
|
173
|
-
set gridSize(value) {
|
|
174
|
-
this._gridSize = value;
|
|
175
|
-
this.updateTransform();
|
|
176
|
-
}
|
|
177
|
-
get stateManager() {
|
|
178
|
-
return this.props.stateManager;
|
|
179
|
-
}
|
|
180
|
-
get nodes() {
|
|
181
|
-
return this._nodes;
|
|
182
|
-
}
|
|
183
|
-
get links() {
|
|
184
|
-
return this._links;
|
|
185
|
-
}
|
|
186
|
-
get frames() {
|
|
187
|
-
return this._frames;
|
|
188
|
-
}
|
|
189
|
-
get zoom() {
|
|
190
|
-
return this._zoom;
|
|
191
|
-
}
|
|
192
|
-
set zoom(value) {
|
|
193
|
-
if (this._zoom === value) {
|
|
194
|
-
return;
|
|
195
|
-
}
|
|
196
|
-
this._zoom = value;
|
|
197
|
-
this.updateTransform();
|
|
198
|
-
}
|
|
199
|
-
get x() {
|
|
200
|
-
return this._x;
|
|
201
|
-
}
|
|
202
|
-
set x(value) {
|
|
203
|
-
this._x = value;
|
|
204
|
-
this.updateTransform();
|
|
205
|
-
}
|
|
206
|
-
get y() {
|
|
207
|
-
return this._y;
|
|
208
|
-
}
|
|
209
|
-
set y(value) {
|
|
210
|
-
this._y = value;
|
|
211
|
-
this.updateTransform();
|
|
212
|
-
}
|
|
213
|
-
get selectedNodes() {
|
|
214
|
-
return this._selectedNodes;
|
|
215
|
-
}
|
|
216
|
-
get selectedLink() {
|
|
217
|
-
return this._selectedLink;
|
|
218
|
-
}
|
|
219
|
-
get selectedFrames() {
|
|
220
|
-
return this._selectedFrames;
|
|
221
|
-
}
|
|
222
|
-
get selectedPort() {
|
|
223
|
-
return this._selectedPort;
|
|
224
|
-
}
|
|
225
|
-
get canvasContainer() {
|
|
226
|
-
return this._graphCanvas;
|
|
227
|
-
}
|
|
228
|
-
get hostCanvas() {
|
|
229
|
-
return this._hostCanvas;
|
|
230
|
-
}
|
|
231
|
-
get svgCanvas() {
|
|
232
|
-
return this._svgCanvas;
|
|
233
|
-
}
|
|
234
|
-
get selectionContainer() {
|
|
235
|
-
return this._selectionContainer;
|
|
236
|
-
}
|
|
237
|
-
get frameContainer() {
|
|
238
|
-
return this._frameContainer;
|
|
239
|
-
}
|
|
240
|
-
// There is a selection conflict between nodes and frames if any selected node is inside any selected frame
|
|
241
|
-
_selectedFrameAndNodesConflict(frameSelection, nodeSelection) {
|
|
242
|
-
for (const frame of frameSelection) {
|
|
243
|
-
for (const node of nodeSelection) {
|
|
244
|
-
if (frame.nodes.includes(node)) {
|
|
245
|
-
return true;
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
return false;
|
|
250
|
-
}
|
|
251
251
|
populateConnectedEntriesBeforeRemoval(item, items, inputs, outputs) {
|
|
252
252
|
inputs.push(...item.content.inputs.filter((i) => i.isConnected && items.every((selected) => { var _a; return selected.content.data !== ((_a = i.connectedPort) === null || _a === void 0 ? void 0 : _a.ownerData); })).map((i) => i.connectedPort));
|
|
253
253
|
outputs.push(...item.content.outputs
|