@xyflow/react 12.0.0-next.5 → 12.0.0-next.6

package/dist/esm/additional-components/Controls/Controls.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { ControlProps } from './types';
-declare function ControlsComponent({ style, showZoom, showFitView, showInteractive, fitViewOptions, onZoomIn, onZoomOut, onFitView, onInteractiveChange, className, children, position, }: ControlProps): import("react/jsx-runtime").JSX.Element;
+declare function ControlsComponent({ style, showZoom, showFitView, showInteractive, fitViewOptions, onZoomIn, onZoomOut, onFitView, onInteractiveChange, className, children, position, 'aria-label': ariaLabel, }: ControlProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ControlsComponent {
     var displayName: string;
 }

package/dist/esm/additional-components/Controls/Controls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/additional-components/Controls/Controls.tsx"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAQ5C,iBAAS,iBAAiB,CAAC,EACzB,KAAK,EACL,QAAe,EACf,WAAkB,EAClB,eAAsB,EACtB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,SAAS,EACT,mBAAmB,EACnB,SAAS,EACT,QAAQ,EACR,QAAwB,GACzB,EAAE,YAAY,2CAkFd;kBA/FQ,iBAAiB;;;AAmG1B,eAAO,MAAM,QAAQ,+DAA0B,CAAC"}
+{"version":3,"file":"Controls.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/additional-components/Controls/Controls.tsx"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAQ5C,iBAAS,iBAAiB,CAAC,EACzB,KAAK,EACL,QAAe,EACf,WAAkB,EAClB,eAAsB,EACtB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,SAAS,EACT,mBAAmB,EACnB,SAAS,EACT,QAAQ,EACR,QAAwB,EACxB,YAAY,EAAE,SAAiC,GAChD,EAAE,YAAY,2CAmFd;kBAjGQ,iBAAiB;;;AAqG1B,eAAO,MAAM,QAAQ,+DAA0B,CAAC"}

package/dist/esm/additional-components/Controls/types.d.ts

@@ -1,7 +1,7 @@
-import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import type { PanelPosition } from '@xyflow/system';
 import type { FitViewOptions } from '../../types';
-export type ControlProps = HTMLAttributes<HTMLDivElement> & {
+export type ControlProps = {
     showZoom?: boolean;
     showFitView?: boolean;
     showInteractive?: boolean;
@@ -12,6 +12,9 @@ export type ControlProps = HTMLAttributes<HTMLDivElement> & {
     onInteractiveChange?: (interactiveStatus: boolean) => void;
     position?: PanelPosition;
     children?: ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+    'aria-label'?: string;
 };
 export type ControlButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
 //# sourceMappingURL=types.d.ts.map

package/dist/esm/additional-components/Controls/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/additional-components/Controls/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,mBAAmB,CAAC,EAAE,CAAC,iBAAiB,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../packages/react/src/additional-components/Controls/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,mBAAmB,CAAC,EAAE,CAAC,iBAAiB,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC"}

package/dist/esm/hooks/useReactFlow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReactFlow.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/hooks/useReactFlow.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,iBAAiB,EAQjB,IAAI,EACJ,IAAI,EACL,MAAM,UAAU,CAAC;AAGlB;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,iBAAiB,CAC3G,QAAQ,EACR,QAAQ,CACT,CA+QA"}
+{"version":3,"file":"useReactFlow.d.ts","sourceRoot":"","sources":["../../../../packages/react/src/hooks/useReactFlow.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,iBAAiB,EAIjB,IAAI,EACJ,IAAI,EAGL,MAAM,UAAU,CAAC;AAGlB;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,iBAAiB,CAC3G,QAAQ,EACR,QAAQ,CACT,CAqSA"}

package/dist/esm/index.js

@@ -496,97 +496,102 @@ function handleParentExpand(updatedElements, updateItem) {
 // When you drag a node for example, React Flow will send a position change update.
 // This function then applies the changes and returns the updated elements.
 function applyChanges(changes, elements) {
-    // we need this hack to handle the setNodes and setEdges function of the useReactFlow hook for controlled flows
-    if (changes.some((c) => c.type === 'reset')) {
-        return changes.filter((c) => c.type === 'reset').map((c) => c.item);
-    }
-    let remainingChanges = [];
     const updatedElements = [];
+    // By storing a map of changes for each element, we can a quick lookup as we
+    // iterate over the elements array!
+    const changesMap = new Map();
     for (const change of changes) {
         if (change.type === 'add') {
             updatedElements.push(change.item);
+            continue;
         }
-        else {
-            remainingChanges.push(change);
+        else if (change.type === 'remove' || change.type === 'replace') {
+            // For a 'remove' change we can safely ignore any other changes queued for
+            // the same element, it's going to be removed anyway!
+            changesMap.set(change.id, [change]);
         }
-    }
-    for (const item of elements) {
-        const nextChanges = [];
-        const _remainingChanges = [];
-        for (const change of remainingChanges) {
-            if (change.id === item.id) {
-                nextChanges.push(change);
+        else {
+            const elementChanges = changesMap.get(change.id);
+            if (elementChanges) {
+                // If we have some changes queued already, we can do a mutable update of
+                // that array and save ourselves some copying.
+                elementChanges.push(change);
             }
             else {
-                _remainingChanges.push(change);
+                changesMap.set(change.id, [change]);
             }
         }
-        remainingChanges = _remainingChanges;
-        if (nextChanges.length === 0) {
-            updatedElements.push(item);
+    }
+    for (const element of elements) {
+        const changes = changesMap.get(element.id);
+        // When there are no changes for an element we can just push it unmodified,
+        // no need to copy it.
+        if (!changes) {
+            updatedElements.push(element);
             continue;
         }
-        const updateItem = { ...item };
-        let isDeletion = false;
-        for (const currentChange of nextChanges) {
-            if (currentChange) {
-                switch (currentChange.type) {
-                    case 'select': {
-                        updateItem.selected = currentChange.selected;
-                        break;
-                    }
-                    case 'position': {
-                        if (typeof currentChange.position !== 'undefined') {
-                            updateItem.position = currentChange.position;
-                        }
-                        if (typeof currentChange.positionAbsolute !== 'undefined') {
-                            if (!updateItem.computed) {
-                                updateItem.computed = {};
-                            }
-                            updateItem.computed.positionAbsolute = currentChange.positionAbsolute;
-                        }
-                        if (typeof currentChange.dragging !== 'undefined') {
-                            updateItem.dragging = currentChange.dragging;
-                        }
-                        if (updateItem.expandParent) {
-                            handleParentExpand(updatedElements, updateItem);
-                        }
-                        break;
-                    }
-                    case 'dimensions': {
-                        if (typeof currentChange.dimensions !== 'undefined') {
-                            if (!updateItem.computed) {
-                                updateItem.computed = {};
-                            }
-                            updateItem.computed.width = currentChange.dimensions.width;
-                            updateItem.computed.height = currentChange.dimensions.height;
-                            // this is needed for the node resizer to work
-                            if (currentChange.resizing) {
-                                updateItem.width = currentChange.dimensions.width;
-                                updateItem.height = currentChange.dimensions.height;
-                            }
-                        }
-                        if (typeof currentChange.resizing === 'boolean') {
-                            updateItem.resizing = currentChange.resizing;
-                        }
-                        if (updateItem.expandParent) {
-                            handleParentExpand(updatedElements, updateItem);
-                        }
-                        break;
-                    }
-                    case 'remove': {
-                        isDeletion = true;
-                        continue;
-                    }
-                }
-            }
+        // If we have a 'remove' change queued, it'll be the only change in the array
+        if (changes[0].type === 'remove') {
+            continue;
+        }
+        if (changes[0].type === 'replace') {
+            updatedElements.push({ ...changes[0].item });
+            continue;
         }
-        if (!isDeletion) {
-            updatedElements.push(updateItem);
+        // For other types of changes, we want to start with a shallow copy of the
+        // object so React knows this element has changed. Sequential changes will
+        /// each _mutate_ this object, so there's only ever one copy.
+        const updatedElement = { ...element };
+        for (const change of changes) {
+            applyChange(change, updatedElement, elements);
         }
+        updatedElements.push(updatedElement);
     }
     return updatedElements;
 }
+// Applies a single change to an element. This is a *mutable* update.
+function applyChange(change, element, elements = []) {
+    switch (change.type) {
+        case 'select': {
+            element.selected = change.selected;
+            break;
+        }
+        case 'position': {
+            if (typeof change.position !== 'undefined') {
+                element.position = change.position;
+            }
+            if (typeof change.positionAbsolute !== 'undefined') {
+                element.computed ??= {};
+                element.computed.positionAbsolute = change.positionAbsolute;
+            }
+            if (typeof change.dragging !== 'undefined') {
+                element.dragging = change.dragging;
+            }
+            if (element.expandParent) {
+                handleParentExpand(elements, element);
+            }
+            break;
+        }
+        case 'dimensions': {
+            if (typeof change.dimensions !== 'undefined') {
+                element.computed ??= {};
+                element.computed.width = change.dimensions.width;
+                element.computed.height = change.dimensions.height;
+                if (change.resizing) {
+                    element.width = change.dimensions.width;
+                    element.height = change.dimensions.height;
+                }
+            }
+            if (typeof change.resizing === 'boolean') {
+                element.resizing = change.resizing;
+            }
+            if (element.expandParent) {
+                handleParentExpand(elements, element);
+            }
+            break;
+        }
+    }
+}
 /**
  * Drop in function that applies node changes to an array of nodes.
  * @public
@@ -655,6 +660,26 @@ function getSelectionChanges(items, selectedIds = new Set(), mutateItem = false)
     }
     return changes;
 }
+function getElementsDiffChanges({ items = [], lookup, }) {
+    const changes = [];
+    const itemsLookup = new Map(items.map((item) => [item.id, item]));
+    for (const item of items) {
+        const storeItem = lookup.get(item.id);
+        if (storeItem !== undefined && storeItem !== item) {
+            changes.push({ id: item.id, item: item, type: 'replace' });
+        }
+        if (storeItem === undefined) {
+            changes.push({ item: item, type: 'add' });
+        }
+    }
+    for (const [id] of lookup) {
+        const nextNode = itemsLookup.get(id);
+        if (nextNode === undefined) {
+            changes.push({ id, type: 'remove' });
+        }
+    }
+    return changes;
+}
 
 /**
  * Test whether an object is useable as a Node
@@ -739,31 +764,50 @@ function useReactFlow() {
         const { edges = [] } = store.getState();
         return edges.find((e) => e.id === id);
     }, []);
+    // this is used to handle multiple syncronous setNodes calls
+    const setNodesData = useRef();
+    const setNodesTimeout = useRef();
     const setNodes = useCallback((payload) => {
-        const { nodes, setNodes, hasDefaultNodes, onNodesChange } = store.getState();
-        const nextNodes = typeof payload === 'function' ? payload(nodes) : payload;
-        if (hasDefaultNodes) {
-            setNodes(nextNodes);
-        }
-        else if (onNodesChange) {
-            const changes = nextNodes.length === 0
-                ? nodes.map((node) => ({ type: 'remove', id: node.id }))
-                : nextNodes.map((node) => ({ item: node, type: 'reset' }));
-            onNodesChange(changes);
-        }
+        const { nodes = [], setNodes, hasDefaultNodes, onNodesChange, nodeLookup } = store.getState();
+        const nextNodes = typeof payload === 'function' ? payload(setNodesData.current || nodes) : payload;
+        setNodesData.current = nextNodes;
+        if (setNodesTimeout.current) {
+            clearTimeout(setNodesTimeout.current);
+        }
+        // if there are multiple synchronous setNodes calls, we only want to call onNodesChange once
+        // for this, we use a timeout to wait for the last call and store updated nodes in setNodesData
+        // this is not perfect, but should work in most cases
+        setNodesTimeout.current = setTimeout(() => {
+            if (hasDefaultNodes) {
+                setNodes(nextNodes);
+            }
+            else if (onNodesChange) {
+                const changes = getElementsDiffChanges({ items: setNodesData.current, lookup: nodeLookup });
+                onNodesChange(changes);
+            }
+            setNodesData.current = undefined;
+        }, 0);
     }, []);
+    // this is used to handle multiple syncronous setEdges calls
+    const setEdgesData = useRef();
+    const setEdgesTimeout = useRef();
     const setEdges = useCallback((payload) => {
-        const { edges = [], setEdges, hasDefaultEdges, onEdgesChange } = store.getState();
-        const nextEdges = typeof payload === 'function' ? payload(edges) : payload;
-        if (hasDefaultEdges) {
-            setEdges(nextEdges);
-        }
-        else if (onEdgesChange) {
-            const changes = nextEdges.length === 0
-                ? edges.map((edge) => ({ type: 'remove', id: edge.id }))
-                : nextEdges.map((edge) => ({ item: edge, type: 'reset' }));
-            onEdgesChange(changes);
+        const { edges = [], setEdges, hasDefaultEdges, onEdgesChange, edgeLookup } = store.getState();
+        const nextEdges = typeof payload === 'function' ? payload(setEdgesData.current || edges) : payload;
+        setEdgesData.current = nextEdges;
+        if (setEdgesTimeout.current) {
+            clearTimeout(setEdgesTimeout.current);
         }
+        setEdgesTimeout.current = setTimeout(() => {
+            if (hasDefaultEdges) {
+                setEdges(nextEdges);
+            }
+            else if (onEdgesChange) {
+                const changes = getElementsDiffChanges({ items: nextEdges, lookup: edgeLookup });
+                onEdgesChange(changes);
+            }
+            setEdgesData.current = undefined;
+        }, 0);
     }, []);
     const addNodes = useCallback((payload) => {
         const nodes = Array.isArray(payload) ? payload : [payload];
@@ -801,8 +845,8 @@ function useReactFlow() {
             },
         };
     }, []);
-    const deleteElements = useCallback(async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [], onBeforeDelete }) => {
-        const { nodes, edges, hasDefaultNodes, hasDefaultEdges, onNodesDelete, onEdgesDelete, onNodesChange, onEdgesChange, onDelete, } = store.getState();
+    const deleteElements = useCallback(async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [] }) => {
+        const { nodes, edges, hasDefaultNodes, hasDefaultEdges, onNodesDelete, onEdgesDelete, onNodesChange, onEdgesChange, onDelete, onBeforeDelete, } = store.getState();
         const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
             nodesToRemove,
             edgesToRemove,
@@ -814,9 +858,8 @@ function useReactFlow() {
         const hasMatchingNodes = matchingNodes.length > 0;
         if (hasMatchingEdges) {
             if (hasDefaultEdges) {
-                store.setState({
-                    edges: edges.filter((e) => !matchingEdges.some((mE) => mE.id === e.id)),
-                });
+                const nextEdges = edges.filter((e) => !matchingEdges.some((mE) => mE.id === e.id));
+                store.getState().setEdges(nextEdges);
             }
             onEdgesDelete?.(matchingEdges);
             onEdgesChange?.(matchingEdges.map((edge) => ({
@@ -826,9 +869,8 @@ function useReactFlow() {
         }
         if (hasMatchingNodes) {
             if (hasDefaultNodes) {
-                store.setState({
-                    nodes: nodes.filter((n) => !matchingNodes.some((mN) => mN.id === n.id)),
-                });
+                const nextNodes = nodes.filter((n) => !matchingNodes.some((mN) => mN.id === n.id));
+                store.getState().setNodes(nextNodes);
             }
             onNodesDelete?.(matchingNodes);
             onNodesChange?.(matchingNodes.map((node) => ({ id: node.id, type: 'remove' })));
@@ -934,8 +976,8 @@ function useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode, }) {
     const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode);
     useEffect(() => {
         if (deleteKeyPressed) {
-            const { edges, nodes, onBeforeDelete } = store.getState();
-            deleteElements({ nodes: nodes.filter(selected), edges: edges.filter(selected), onBeforeDelete });
+            const { edges, nodes } = store.getState();
+            deleteElements({ nodes: nodes.filter(selected), edges: edges.filter(selected) });
             store.setState({ nodesSelectionActive: false });
         }
     }, [deleteKeyPressed]);
@@ -3120,7 +3162,7 @@ const selector$3 = (s) => ({
     minZoomReached: s.transform[2] <= s.minZoom,
     maxZoomReached: s.transform[2] >= s.maxZoom,
 });
-function ControlsComponent({ style, showZoom = true, showFitView = true, showInteractive = true, fitViewOptions, onZoomIn, onZoomOut, onFitView, onInteractiveChange, className, children, position = 'bottom-left', }) {
+function ControlsComponent({ style, showZoom = true, showFitView = true, showInteractive = true, fitViewOptions, onZoomIn, onZoomOut, onFitView, onInteractiveChange, className, children, position = 'bottom-left', 'aria-label': ariaLabel = 'React Flow controls', }) {
     const store = useStoreApi();
     const { isInteractive, minZoomReached, maxZoomReached } = useStore(selector$3, shallow);
     const { zoomIn, zoomOut, fitView } = useReactFlow();
@@ -3144,7 +3186,7 @@ function ControlsComponent({ style, showZoom = true, showFitView = true, showInt
         });
         onInteractiveChange?.(!isInteractive);
     };
-    return (jsxs(Panel, { className: cc(['react-flow__controls', className]), position: position, style: style, "data-testid": "rf__controls", children: [showZoom && (jsxs(Fragment, { children: [jsx(ControlButton, { onClick: onZoomInHandler, className: "react-flow__controls-zoomin", title: "zoom in", "aria-label": "zoom in", disabled: maxZoomReached, children: jsx(PlusIcon, {}) }), jsx(ControlButton, { onClick: onZoomOutHandler, className: "react-flow__controls-zoomout", title: "zoom out", "aria-label": "zoom out", disabled: minZoomReached, children: jsx(MinusIcon, {}) })] })), showFitView && (jsx(ControlButton, { className: "react-flow__controls-fitview", onClick: onFitViewHandler, title: "fit view", "aria-label": "fit view", children: jsx(FitViewIcon, {}) })), showInteractive && (jsx(ControlButton, { className: "react-flow__controls-interactive", onClick: onToggleInteractivity, title: "toggle interactivity", "aria-label": "toggle interactivity", children: isInteractive ? jsx(UnlockIcon, {}) : jsx(LockIcon, {}) })), children] }));
+    return (jsxs(Panel, { className: cc(['react-flow__controls', className]), position: position, style: style, "data-testid": "rf__controls", "aria-label": ariaLabel, children: [showZoom && (jsxs(Fragment, { children: [jsx(ControlButton, { onClick: onZoomInHandler, className: "react-flow__controls-zoomin", title: "zoom in", "aria-label": "zoom in", disabled: maxZoomReached, children: jsx(PlusIcon, {}) }), jsx(ControlButton, { onClick: onZoomOutHandler, className: "react-flow__controls-zoomout", title: "zoom out", "aria-label": "zoom out", disabled: minZoomReached, children: jsx(MinusIcon, {}) })] })), showFitView && (jsx(ControlButton, { className: "react-flow__controls-fitview", onClick: onFitViewHandler, title: "fit view", "aria-label": "fit view", children: jsx(FitViewIcon, {}) })), showInteractive && (jsx(ControlButton, { className: "react-flow__controls-interactive", onClick: onToggleInteractivity, title: "toggle interactivity", "aria-label": "toggle interactivity", children: isInteractive ? jsx(UnlockIcon, {}) : jsx(LockIcon, {}) })), children] }));
 }
 ControlsComponent.displayName = 'Controls';
 const Controls = memo(ControlsComponent);