@babylonjs/shared-ui-components 5.28.0

package/lines/vector4LineComponent.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import type { Vector4 } from "@babylonjs/core/Maths/math.vector.js";
+import type { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { PropertyChangedEvent } from "../propertyChangedEvent";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+interface IVector4LineComponentProps {
+    label: string;
+    target?: any;
+    propertyName?: string;
+    step?: number;
+    onChange?: (newvalue: Vector4) => void;
+    useEuler?: boolean;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    icon?: string;
+    iconLabel?: string;
+    value?: Vector4;
+    lockObject: LockObject;
+}
+export declare class Vector4LineComponent extends React.Component<IVector4LineComponentProps, {
+    isExpanded: boolean;
+    value: Vector4;
+}> {
+    static defaultProps: {
+        step: number;
+    };
+    private _localChange;
+    constructor(props: IVector4LineComponentProps);
+    getCurrentValue(): any;
+    shouldComponentUpdate(nextProps: IVector4LineComponentProps, nextState: {
+        isExpanded: boolean;
+        value: Vector4;
+    }): boolean;
+    switchExpandState(): void;
+    raiseOnPropertyChanged(previousValue: Vector4): void;
+    updateVector4(): void;
+    updateStateX(value: number): void;
+    updateStateY(value: number): void;
+    updateStateZ(value: number): void;
+    updateStateW(value: number): void;
+    render(): JSX.Element;
+}
+export {};

package/lines/vector4LineComponent.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { NumericInputComponent } from "./numericInputComponent.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+export class Vector4LineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._localChange = false;
+        this.state = { isExpanded: false, value: this.getCurrentValue().clone() };
+    }
+    getCurrentValue() {
+        return this.props.value || this.props.target[this.props.propertyName];
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        const nextPropsValue = this.getCurrentValue();
+        if (!nextPropsValue.equals(nextState.value) || this._localChange) {
+            nextState.value = nextPropsValue.clone();
+            this._localChange = false;
+            return true;
+        }
+        return false;
+    }
+    switchExpandState() {
+        this._localChange = true;
+        this.setState({ isExpanded: !this.state.isExpanded });
+    }
+    raiseOnPropertyChanged(previousValue) {
+        if (this.props.onChange) {
+            this.props.onChange(this.state.value);
+        }
+        if (!this.props.onPropertyChangedObservable) {
+            return;
+        }
+        this.props.onPropertyChangedObservable.notifyObservers({
+            object: this.props.target,
+            property: this.props.propertyName || "",
+            value: this.state.value,
+            initialValue: previousValue,
+        });
+    }
+    updateVector4() {
+        const store = this.getCurrentValue().clone();
+        if (this.props.value) {
+            this.props.value.copyFrom(this.state.value);
+        }
+        else {
+            this.props.target[this.props.propertyName] = this.state.value;
+        }
+        this.setState({ value: store });
+        this.raiseOnPropertyChanged(store);
+    }
+    updateStateX(value) {
+        this._localChange = true;
+        this.state.value.x = value;
+        this.updateVector4();
+    }
+    updateStateY(value) {
+        this._localChange = true;
+        this.state.value.y = value;
+        this.updateVector4();
+    }
+    updateStateZ(value) {
+        this._localChange = true;
+        this.state.value.z = value;
+        this.updateVector4();
+    }
+    updateStateW(value) {
+        this._localChange = true;
+        this.state.value.w = value;
+        this.updateVector4();
+    }
+    render() {
+        const chevron = this.state.isExpanded ? _jsx(FontAwesomeIcon, { icon: faMinus }) : _jsx(FontAwesomeIcon, { icon: faPlus });
+        return (_jsxs("div", { className: "vector3Line", children: [_jsxs("div", { className: "firstLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: "label", title: this.props.label, children: this.props.label }), _jsx("div", { className: "vector", children: `X: ${this.state.value.x.toFixed(2)}, Y: ${this.state.value.y.toFixed(2)}, Z: ${this.state.value.z.toFixed(2)}, W: ${this.state.value.w.toFixed(2)}` }), _jsx("div", { className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand", children: chevron })] }), _jsxs("div", { className: "secondLine", children: [_jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "x", step: this.props.step, value: this.state.value.x, onChange: (value) => this.updateStateX(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "y", step: this.props.step, value: this.state.value.y, onChange: (value) => this.updateStateY(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "z", step: this.props.step, value: this.state.value.z, onChange: (value) => this.updateStateZ(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "w", step: this.props.step, value: this.state.value.w, onChange: (value) => this.updateStateW(value) })] })] }));
+    }
+}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+Vector4LineComponent.defaultProps = {
+    step: 0.001, // cm
+};
+//# sourceMappingURL=vector4LineComponent.js.map

package/lines/vector4LineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vector4LineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/vector4LineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Vector4 } from \"core/Maths/math.vector\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\n\r\nimport { NumericInputComponent } from \"./numericInputComponent\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faMinus, faPlus } from \"@fortawesome/free-solid-svg-icons\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\n\r\ninterface IVector4LineComponentProps {\r\n    label: string;\r\n    target?: any;\r\n    propertyName?: string;\r\n    step?: number;\r\n    onChange?: (newvalue: Vector4) => void;\r\n    useEuler?: boolean;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    value?: Vector4;\r\n    lockObject: LockObject;\r\n}\r\n\r\nexport class Vector4LineComponent extends React.Component<IVector4LineComponentProps, { isExpanded: boolean; value: Vector4 }> {\r\n    // eslint-disable-next-line @typescript-eslint/naming-convention\r\n    static defaultProps = {\r\n        step: 0.001, // cm\r\n    };\r\n\r\n    private _localChange = false;\r\n\r\n    constructor(props: IVector4LineComponentProps) {\r\n        super(props);\r\n\r\n        this.state = { isExpanded: false, value: this.getCurrentValue().clone() };\r\n    }\r\n\r\n    getCurrentValue() {\r\n        return this.props.value || this.props.target[this.props.propertyName!];\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: IVector4LineComponentProps, nextState: { isExpanded: boolean; value: Vector4 }) {\r\n        const nextPropsValue = this.getCurrentValue();\r\n\r\n        if (!nextPropsValue.equals(nextState.value) || this._localChange) {\r\n            nextState.value = nextPropsValue.clone();\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    switchExpandState() {\r\n        this._localChange = true;\r\n        this.setState({ isExpanded: !this.state.isExpanded });\r\n    }\r\n\r\n    raiseOnPropertyChanged(previousValue: Vector4) {\r\n        if (this.props.onChange) {\r\n            this.props.onChange(this.state.value);\r\n        }\r\n\r\n        if (!this.props.onPropertyChangedObservable) {\r\n            return;\r\n        }\r\n        this.props.onPropertyChangedObservable.notifyObservers({\r\n            object: this.props.target,\r\n            property: this.props.propertyName || \"\",\r\n            value: this.state.value,\r\n            initialValue: previousValue,\r\n        });\r\n    }\r\n\r\n    updateVector4() {\r\n        const store = this.getCurrentValue().clone();\r\n\r\n        if (this.props.value) {\r\n            this.props.value.copyFrom(this.state.value);\r\n        } else {\r\n            this.props.target[this.props.propertyName!] = this.state.value;\r\n        }\r\n\r\n        this.setState({ value: store });\r\n\r\n        this.raiseOnPropertyChanged(store);\r\n    }\r\n\r\n    updateStateX(value: number) {\r\n        this._localChange = true;\r\n\r\n        this.state.value.x = value;\r\n        this.updateVector4();\r\n    }\r\n\r\n    updateStateY(value: number) {\r\n        this._localChange = true;\r\n\r\n        this.state.value.y = value;\r\n        this.updateVector4();\r\n    }\r\n\r\n    updateStateZ(value: number) {\r\n        this._localChange = true;\r\n\r\n        this.state.value.z = value;\r\n        this.updateVector4();\r\n    }\r\n\r\n    updateStateW(value: number) {\r\n        this._localChange = true;\r\n\r\n        this.state.value.w = value;\r\n        this.updateVector4();\r\n    }\r\n\r\n    render() {\r\n        const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />;\r\n\r\n        return (\r\n            <div className=\"vector3Line\">\r\n                <div className=\"firstLine\">\r\n                    {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                    <div className=\"label\" title={this.props.label}>\r\n                        {this.props.label}\r\n                    </div>\r\n                    <div className=\"vector\">\r\n                        {`X: ${this.state.value.x.toFixed(2)}, Y: ${this.state.value.y.toFixed(2)}, Z: ${this.state.value.z.toFixed(2)}, W: ${this.state.value.w.toFixed(2)}`}\r\n                    </div>\r\n                    <div className=\"expand hoverIcon\" onClick={() => this.switchExpandState()} title=\"Expand\">\r\n                        {chevron}\r\n                    </div>\r\n                </div>\r\n                {\r\n                    <div className=\"secondLine\">\r\n                        <NumericInputComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"x\"\r\n                            step={this.props.step}\r\n                            value={this.state.value.x}\r\n                            onChange={(value) => this.updateStateX(value)}\r\n                        />\r\n                        <NumericInputComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"y\"\r\n                            step={this.props.step}\r\n                            value={this.state.value.y}\r\n                            onChange={(value) => this.updateStateY(value)}\r\n                        />\r\n                        <NumericInputComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"z\"\r\n                            step={this.props.step}\r\n                            value={this.state.value.z}\r\n                            onChange={(value) => this.updateStateZ(value)}\r\n                        />\r\n                        <NumericInputComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"w\"\r\n                            step={this.props.step}\r\n                            value={this.state.value.w}\r\n                            onChange={(value) => this.updateStateW(value)}\r\n                        />\r\n                    </div>\r\n                }\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/nodeGraphSystem/displayLedger.d.ts

@@ -0,0 +1,5 @@
+export declare class DisplayLedger {
+    static RegisteredControls: {
+        [key: string]: any;
+    };
+}

package/nodeGraphSystem/displayLedger.js

@@ -0,0 +1,4 @@
+export class DisplayLedger {
+}
+DisplayLedger.RegisteredControls = {};
+//# sourceMappingURL=displayLedger.js.map

package/nodeGraphSystem/displayLedger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"displayLedger.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/displayLedger.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,aAAa;;AACR,gCAAkB,GAA2B,EAAE,CAAC","sourcesContent":["export class DisplayLedger {\r\n    public static RegisteredControls: { [key: string]: any } = {};\r\n}\r\n"]}

package/nodeGraphSystem/frameNodePort.d.ts

@@ -0,0 +1,25 @@
+import type { IDisplayManager } from "./interfaces/displayManager";
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { Nullable } from "@babylonjs/core/types.js";
+import type { IPortData } from "./interfaces/portData";
+import { NodePort } from "./nodePort";
+import type { GraphNode } from "./graphNode";
+import type { FramePortPosition } from "./graphFrame";
+import type { StateManager } from "./stateManager";
+export declare class FrameNodePort extends NodePort {
+    portData: IPortData;
+    node: GraphNode;
+    private _parentFrameId;
+    private _isInput;
+    private _framePortPosition;
+    private _framePortId;
+    private _onFramePortPositionChangedObservable;
+    get parentFrameId(): number;
+    get onFramePortPositionChangedObservable(): Observable<FrameNodePort>;
+    get isInput(): boolean;
+    get framePortId(): number;
+    get framePortPosition(): FramePortPosition;
+    set framePortPosition(position: FramePortPosition);
+    constructor(portContainer: HTMLElement, portData: IPortData, node: GraphNode, stateManager: StateManager, isInput: boolean, framePortId: number, parentFrameId: number);
+    static CreateFrameNodePortElement(portData: IPortData, node: GraphNode, root: HTMLElement, displayManager: Nullable<IDisplayManager>, stateManager: StateManager, isInput: boolean, framePortId: number, parentFrameId: number): FrameNodePort;
+}

package/nodeGraphSystem/frameNodePort.js

@@ -0,0 +1,60 @@
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { NodePort } from "./nodePort.js";
+import { IsFramePortData } from "./tools.js";
+import commonStyles from "./common.modules.scss";
+export class FrameNodePort extends NodePort {
+    constructor(portContainer, portData, node, stateManager, isInput, framePortId, parentFrameId) {
+        super(portContainer, portData, node, stateManager);
+        this.portData = portData;
+        this.node = node;
+        this._onFramePortPositionChangedObservable = new Observable();
+        this._parentFrameId = parentFrameId;
+        this._isInput = isInput;
+        this._framePortId = framePortId;
+        this._onSelectionChangedObserver = stateManager.onSelectionChangedObservable.add((options) => {
+            const { selection } = options || {};
+            if (IsFramePortData(selection) && selection.port === this) {
+                this._img.classList.add(commonStyles["selected"]);
+            }
+            else {
+                this._img.classList.remove(commonStyles["selected"]);
+            }
+        });
+        this.refresh();
+    }
+    get parentFrameId() {
+        return this._parentFrameId;
+    }
+    get onFramePortPositionChangedObservable() {
+        return this._onFramePortPositionChangedObservable;
+    }
+    get isInput() {
+        return this._isInput;
+    }
+    get framePortId() {
+        return this._framePortId;
+    }
+    get framePortPosition() {
+        return this._framePortPosition;
+    }
+    set framePortPosition(position) {
+        this._framePortPosition = position;
+        this.onFramePortPositionChangedObservable.notifyObservers(this);
+    }
+    static CreateFrameNodePortElement(portData, node, root, displayManager, stateManager, isInput, framePortId, parentFrameId) {
+        const portContainer = root.ownerDocument.createElement("div");
+        portContainer.classList.add(commonStyles["portLine"]);
+        if (framePortId !== null) {
+            portContainer.dataset.framePortId = `${framePortId}`;
+        }
+        root.appendChild(portContainer);
+        if (!displayManager || displayManager.shouldDisplayPortLabels(portData)) {
+            const portLabel = root.ownerDocument.createElement("div");
+            portLabel.classList.add(commonStyles["port-label"]);
+            portLabel.innerHTML = portData.name;
+            portContainer.appendChild(portLabel);
+        }
+        return new FrameNodePort(portContainer, portData, node, stateManager, isInput, framePortId, parentFrameId);
+    }
+}
+//# sourceMappingURL=frameNodePort.js.map

package/nodeGraphSystem/frameNodePort.js.map

@@ -0,0 +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"]}

package/nodeGraphSystem/graphCanvas.d.ts

@@ -0,0 +1,111 @@
+import * as React from "react";
+import { GraphNode } from "./graphNode";
+import type { Nullable } from "@babylonjs/core/types.js";
+import { NodeLink } from "./nodeLink";
+import { NodePort } from "./nodePort";
+import { GraphFrame } from "./graphFrame";
+import type { IEditorData, IFrameData } from "./interfaces/nodeLocationInfo";
+import type { StateManager } from "./stateManager";
+import type { INodeData } from "./interfaces/nodeData";
+import type { IPortData } from "./interfaces/portData";
+import type { INodeContainer } from "./interfaces/nodeContainer";
+export interface IGraphCanvasComponentProps {
+    stateManager: StateManager;
+    onEmitNewNode: (nodeData: INodeData) => GraphNode;
+}
+export declare class GraphCanvasComponent extends React.Component<IGraphCanvasComponentProps> implements INodeContainer {
+    static readonly NodeWidth = 100;
+    private readonly _minZoom;
+    private readonly _maxZoom;
+    private _hostCanvas;
+    private _graphCanvas;
+    private _selectionContainer;
+    private _frameContainer;
+    private _svgCanvas;
+    private _rootContainer;
+    private _nodes;
+    private _links;
+    private _mouseStartPointX;
+    private _mouseStartPointY;
+    private _dropPointX;
+    private _dropPointY;
+    private _selectionStartX;
+    private _selectionStartY;
+    private _candidateLinkedHasMoved;
+    private _x;
+    private _y;
+    private _zoom;
+    private _selectedNodes;
+    private _selectedLink;
+    private _selectedPort;
+    private _candidateLink;
+    private _candidatePort;
+    private _gridSize;
+    private _selectionBox;
+    private _selectedFrames;
+    private _frameCandidate;
+    private _frames;
+    private _nodeDataContentList;
+    private _altKeyIsPressed;
+    private _multiKeyIsPressed;
+    private _oldY;
+    _frameIsMoving: boolean;
+    _isLoading: boolean;
+    _targetLinkCandidate: Nullable<NodeLink>;
+    private _copiedNodes;
+    private _copiedFrames;
+    get gridSize(): number;
+    set gridSize(value: number);
+    get stateManager(): StateManager;
+    get nodes(): GraphNode[];
+    get links(): NodeLink[];
+    get frames(): GraphFrame[];
+    get zoom(): number;
+    set zoom(value: number);
+    get x(): number;
+    set x(value: number);
+    get y(): number;
+    set y(value: number);
+    get selectedNodes(): GraphNode[];
+    get selectedLink(): Nullable<NodeLink>;
+    get selectedFrames(): GraphFrame[];
+    get selectedPort(): Nullable<NodePort>;
+    get canvasContainer(): HTMLDivElement;
+    get hostCanvas(): HTMLDivElement;
+    get svgCanvas(): HTMLElement;
+    get selectionContainer(): HTMLDivElement;
+    get frameContainer(): HTMLDivElement;
+    private _selectedFrameAndNodesConflict;
+    constructor(props: IGraphCanvasComponentProps);
+    populateConnectedEntriesBeforeRemoval(item: GraphNode, items: GraphNode[], inputs: Nullable<IPortData>[], outputs: Nullable<IPortData>[]): void;
+    automaticRewire(inputs: Nullable<IPortData>[], outputs: Nullable<IPortData>[], firstOnly?: boolean): void;
+    handleKeyDown(evt: KeyboardEvent, onRemove: (nodeData: INodeData) => void, mouseLocationX: number, mouseLocationY: number, dataGenerator: (nodeData: INodeData) => any, rootElement: HTMLDivElement): void;
+    pasteSelection(copiedNodes: GraphNode[], currentX: number, currentY: number, dataGenerator: (nodeData: INodeData) => any, selectNew?: boolean): GraphNode[];
+    reconnectNewNodes(nodeIndex: number, newNodes: GraphNode[], sourceNodes: GraphNode[], done: boolean[]): void;
+    getCachedData(): any[];
+    removeDataFromCache(data: any): void;
+    createNodeFromObject(nodeData: INodeData, onNodeCreated: (data: any) => void, recursion?: boolean): GraphNode;
+    getGridPosition(position: number, useCeil?: boolean): number;
+    getGridPositionCeil(position: number): number;
+    updateTransform(): void;
+    onKeyUp(): void;
+    findNodeFromData(data: any): GraphNode;
+    reset(): void;
+    connectPorts(pointA: IPortData, pointB: IPortData): void;
+    removeLink(link: NodeLink): void;
+    appendNode(nodeData: INodeData): GraphNode;
+    distributeGraph(): void;
+    componentDidMount(): void;
+    onMove(evt: React.PointerEvent): void;
+    onDown(evt: React.PointerEvent<HTMLElement>): void;
+    onUp(evt: React.PointerEvent): void;
+    onWheel(evt: React.WheelEvent): void;
+    zoomToFit(): void;
+    processCandidatePort(): void;
+    connectNodes(nodeA: GraphNode, pointA: IPortData, nodeB: GraphNode, pointB: IPortData): void;
+    drop(newNode: GraphNode, targetX: number, targetY: number, offsetX: number, offsetY: number): void;
+    processEditorData(editorData: IEditorData): void;
+    reOrganize(editorData?: Nullable<IEditorData>, isImportingAFrame?: boolean): void;
+    addFrame(frameData: IFrameData): void;
+    render(): JSX.Element;
+}