From 6bb9c5360d7831c8f9e2a34b45877e88bd4758fe Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 18 Jan 2024 13:14:44 +0100 Subject: [PATCH 01/12] Cleaned up edge label styles and added default edge label background in svelte flow --- packages/react/src/styles/base.css | 18 ------------------ packages/react/src/styles/style.css | 14 ++------------ packages/svelte/src/styles/base.css | 9 --------- packages/svelte/src/styles/style.css | 12 +++--------- packages/system/src/styles/style.css | 6 ++++++ 5 files changed, 11 insertions(+), 48 deletions(-) diff --git a/packages/react/src/styles/base.css b/packages/react/src/styles/base.css index 4a7281dc..d6be5b10 100644 --- a/packages/react/src/styles/base.css +++ b/packages/react/src/styles/base.css @@ -1,21 +1,3 @@ /* this will be exported as base.css and can be used for a basic styling */ @import '../../../system/src/styles/init.css'; @import '../../../system/src/styles/base.css'; - -.react-flow { - --edge-label-background-color-default: #ffffff; - --edge-label-color-default: inherit; -} - -.react-flow.dark { - --edge-label-background-color-default: #141414; - --edge-label-color-default: #f8f8f8; -} - -.react-flow__edge-textbg { - fill: var(--edge-label-background-color, var(--edge-label-background-color-default)); -} - -.react-flow__edge-text { - fill: var(--edge-label-color, var(--edge-label-color-default)); -} diff --git a/packages/react/src/styles/style.css b/packages/react/src/styles/style.css index 2ff7f6c1..71b4d08c 100644 --- a/packages/react/src/styles/style.css +++ b/packages/react/src/styles/style.css @@ -3,20 +3,10 @@ @import '../../../system/src/styles/style.css'; @import '../../../system/src/styles/node-resizer.css'; -.react-flow { - --edge-label-background-color-default: #ffffff; - --edge-label-color-default: inherit; -} - -.react-flow.dark { - --edge-label-background-color-default: #141414; - --edge-label-color-default: #f8f8f8; -} - .react-flow__edge-textbg { - fill: var(--edge-label-background-color, var(--edge-label-background-color-default)); + fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default)); } .react-flow__edge-text { - fill: var(--edge-label-color, var(--edge-label-color-default)); + fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default)); } diff --git a/packages/svelte/src/styles/base.css b/packages/svelte/src/styles/base.css index b9861c98..80bc953d 100644 --- a/packages/svelte/src/styles/base.css +++ b/packages/svelte/src/styles/base.css @@ -2,16 +2,7 @@ @import '../../../system/src/styles/init.css'; @import '../../../system/src/styles/base.css'; -.svelte-flow { - --edge-label-color-default: inherit; -} - -.svelte-flow.dark { - --edge-label-color-default: #f8f8f8; -} - .svelte-flow__edge-label { text-align: center; position: absolute; - color: var(--edge-label-color, var(--edge-label-color-default)); } diff --git a/packages/svelte/src/styles/style.css b/packages/svelte/src/styles/style.css index 308a6a1e..e607d0f8 100644 --- a/packages/svelte/src/styles/style.css +++ b/packages/svelte/src/styles/style.css @@ -3,19 +3,13 @@ @import '../../../system/src/styles/style.css'; @import '../../../system/src/styles/node-resizer.css'; -.svelte-flow { - --edge-label-color-default: inherit; -} - -.svelte-flow.dark { - --edge-label-color-default: #f8f8f8; -} - .svelte-flow__edge-label { text-align: center; position: absolute; + padding: 2px; font-size: 10px; - color: var(--edge-label-color, var(--edge-label-color-default)); + color: var(--xy-edge-label-color, var(--xy-edge-label-color-default)); + background: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default)); } .svelte-flow__nodes { diff --git a/packages/system/src/styles/style.css b/packages/system/src/styles/style.css index 880ebaf7..cb6f2b7c 100644 --- a/packages/system/src/styles/style.css +++ b/packages/system/src/styles/style.css @@ -19,6 +19,9 @@ --xy-controls-button-color-hover-default: inherit; --xy-controls-button-border-color-default: #eee; --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08); + + --xy-edge-label-background-color-default: #ffffff; + --xy-edge-label-color-default: inherit; } .xy-flow.dark { @@ -41,6 +44,9 @@ --xy-controls-button-color-hover-default: #fff; --xy-controls-button-border-color-default: #5b5b5b; --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08); + + --xy-edge-label-background-color-default: #141414; + --xy-edge-label-color-default: #f8f8f8; } .xy-flow__edge { From 88aa0fccf3f5a4ed9bf037c6f0fbf78453f06f13 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 18 Jan 2024 14:26:35 +0100 Subject: [PATCH 02/12] Added handleEdgeSelect hook & click on edge-label now selects edge --- .../lib/components/BaseEdge/BaseEdge.svelte | 14 ++---- .../lib/components/EdgeLabel/EdgeLabel.svelte | 27 +++++++++++ .../src/lib/components/EdgeLabel/index.ts | 1 + .../components/EdgeWrapper/EdgeWrapper.svelte | 45 ++++++------------- .../EdgeRenderer/EdgeRenderer.svelte | 9 +--- .../src/lib/hooks/useHandleEdgeSelect.ts | 39 ++++++++++++++++ packages/svelte/src/styles/style.css | 1 + 7 files changed, 86 insertions(+), 50 deletions(-) create mode 100644 packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte create mode 100644 packages/svelte/src/lib/components/EdgeLabel/index.ts create mode 100644 packages/svelte/src/lib/hooks/useHandleEdgeSelect.ts diff --git a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte index d1c60f8f..b0591ce2 100644 --- a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte +++ b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte @@ -1,7 +1,7 @@ + + +
{ + if (id) handleEdgeSelect(id); + }} + > + +
+ diff --git a/packages/svelte/src/lib/components/EdgeLabel/index.ts b/packages/svelte/src/lib/components/EdgeLabel/index.ts new file mode 100644 index 00000000..2e0a457c --- /dev/null +++ b/packages/svelte/src/lib/components/EdgeLabel/index.ts @@ -0,0 +1 @@ +export { default as EdgeLabel } from './EdgeLabel.svelte'; diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte index c68ea1d5..8809eec7 100644 --- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte +++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte @@ -2,13 +2,13 @@ @@ -43,7 +42,7 @@ {/if} {#if label} - + {label} {/if} diff --git a/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte b/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte index 98467787..eb0c794f 100644 --- a/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte +++ b/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte @@ -4,9 +4,9 @@ import { getContext } from 'svelte'; import type { BaseEdgeProps } from '../BaseEdge/types'; - export let labelStyle: BaseEdgeProps['labelStyle'] = undefined; - export let labelX: BaseEdgeProps['labelX'] = undefined; - export let labelY: BaseEdgeProps['labelY'] = undefined; + export let style: BaseEdgeProps['labelStyle'] = undefined; + export let x: BaseEdgeProps['labelX'] = undefined; + export let y: BaseEdgeProps['labelY'] = undefined; const handleEdgeSelect = useHandleEdgeSelect(); @@ -16,8 +16,8 @@
{ if (id) handleEdgeSelect(id); }} From e0d7dbe8a104d6cb29933a8c32784238b1f48e87 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 18 Jan 2024 15:50:21 +0100 Subject: [PATCH 04/12] fixed focused, selectable css --- packages/react/src/components/EdgeWrapper/index.tsx | 1 + packages/system/src/styles/init.css | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/EdgeWrapper/index.tsx b/packages/react/src/components/EdgeWrapper/index.tsx index cb9b9c8b..28323a19 100644 --- a/packages/react/src/components/EdgeWrapper/index.tsx +++ b/packages/react/src/components/EdgeWrapper/index.tsx @@ -186,6 +186,7 @@ export function EdgeWrapper({ animated: edge.animated, inactive: !isSelectable && !onClick, updating: updateHover, + selectable: isSelectable, }, ])} onClick={onEdgeClick} diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css index a688f6b9..14519c74 100644 --- a/packages/system/src/styles/init.css +++ b/packages/system/src/styles/init.css @@ -139,8 +139,8 @@ } &.selected .xy-flow__edge-path, - &:focus .xy-flow__edge-path, - &:focus-visible .xy-flow__edge-path { + &.selectable:focus .xy-flow__edge-path, + &.selectable:focus-visible .xy-flow__edge-path { stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default)); } From aee1b6b9f80efd6de9762a76ad89c60d602419cf Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 18 Jan 2024 16:27:51 +0100 Subject: [PATCH 05/12] add getNode, getNodes, getEdge, getEdges --- packages/svelte/src/lib/hooks/useSvelteFlow.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts index d47ee45b..0cf53f5c 100644 --- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts +++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts @@ -29,6 +29,10 @@ import { isNode } from '$lib/utils'; export function useSvelteFlow(): { zoomIn: ZoomInOut; zoomOut: ZoomInOut; + getNode: (id: string) => Node | undefined; + getNodes: (ids: string[]) => (Node | undefined)[]; + getEdge: (id: string) => Edge | undefined; + getEdges: (ids: string[]) => (Edge | undefined)[]; setZoom: (zoomLevel: number, options?: ViewportHelperFunctionOptions) => void; getZoom: () => number; setCenter: (x: number, y: number, options?: SetCenterOptions) => void; @@ -82,7 +86,9 @@ export function useSvelteFlow(): { panZoom, nodes, edges, - domNode + domNode, + nodeLookup, + edgeLookup } = useStore(); const getNodeRect = ( @@ -121,6 +127,10 @@ export function useSvelteFlow(): { return { zoomIn, zoomOut, + getNode: (id) => get(nodeLookup).get(id), + getNodes: (ids) => ids.map((id) => get(nodeLookup).get(id)), + getEdge: (id) => get(edgeLookup).get(id), + getEdges: (ids) => ids.map((id) => get(edgeLookup).get(id)), setZoom: (zoomLevel, options) => { get(panZoom)?.scaleTo(zoomLevel, { duration: options?.duration }); }, From 08bb803ef2a6879e1e6342a46eb6e2c0ac604541 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 22 Jan 2024 16:38:00 +0100 Subject: [PATCH 06/12] getNodes & getEdges can be called without specifying ids --- packages/svelte/src/lib/hooks/useSvelteFlow.ts | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts index 0cf53f5c..5cc414bc 100644 --- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts +++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts @@ -30,9 +30,9 @@ export function useSvelteFlow(): { zoomIn: ZoomInOut; zoomOut: ZoomInOut; getNode: (id: string) => Node | undefined; - getNodes: (ids: string[]) => (Node | undefined)[]; + getNodes: (ids?: string[]) => (Node | undefined)[]; getEdge: (id: string) => Edge | undefined; - getEdges: (ids: string[]) => (Edge | undefined)[]; + getEdges: (ids?: string[]) => (Edge | undefined)[]; setZoom: (zoomLevel: number, options?: ViewportHelperFunctionOptions) => void; getZoom: () => number; setCenter: (x: number, y: number, options?: SetCenterOptions) => void; @@ -128,9 +128,19 @@ export function useSvelteFlow(): { zoomIn, zoomOut, getNode: (id) => get(nodeLookup).get(id), - getNodes: (ids) => ids.map((id) => get(nodeLookup).get(id)), + getNodes: (ids) => { + if (!ids) { + return get(nodes); + } + return ids.map((id) => get(nodeLookup).get(id)); + }, getEdge: (id) => get(edgeLookup).get(id), - getEdges: (ids) => ids.map((id) => get(edgeLookup).get(id)), + getEdges: (ids) => { + if (!ids) { + return get(edges); + } + return ids.map((id) => get(edgeLookup).get(id)); + }, setZoom: (zoomLevel, options) => { get(panZoom)?.scaleTo(zoomLevel, { duration: options?.duration }); }, From 34c77caab393301cc918f1522c939e2f7b58625c Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 22 Jan 2024 17:05:26 +0100 Subject: [PATCH 07/12] refactor(types): OnNodeDrag --- examples/react/src/examples/Basic/index.tsx | 3 +- .../examples/CustomNode/ColorSelectorNode.tsx | 6 ++-- .../react/src/examples/CustomNode/index.tsx | 33 ++++++++++++++----- .../handle-connect/MultiHandleNode.svelte | 9 +++-- packages/react/src/index.ts | 1 - packages/react/src/types/component-props.ts | 8 ++--- packages/react/src/types/general.ts | 2 +- packages/react/src/types/nodes.ts | 12 ++++--- packages/react/src/types/store.ts | 2 +- packages/svelte/src/lib/index.ts | 1 - packages/svelte/src/lib/store/index.ts | 3 +- packages/system/src/types/nodes.ts | 8 ++--- packages/system/src/xydrag/XYDrag.ts | 12 +++---- 13 files changed, 59 insertions(+), 41 deletions(-) diff --git a/examples/react/src/examples/Basic/index.tsx b/examples/react/src/examples/Basic/index.tsx index 8d9c7dfd..f454b313 100644 --- a/examples/react/src/examples/Basic/index.tsx +++ b/examples/react/src/examples/Basic/index.tsx @@ -10,9 +10,10 @@ import { Edge, useReactFlow, Panel, + OnNodeDrag, } from '@xyflow/react'; -const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node); +const onNodeDrag: OnNodeDrag = (_, node) => console.log('drag', node); const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node); diff --git a/examples/react/src/examples/CustomNode/ColorSelectorNode.tsx b/examples/react/src/examples/CustomNode/ColorSelectorNode.tsx index 6857e1ac..72255e27 100644 --- a/examples/react/src/examples/CustomNode/ColorSelectorNode.tsx +++ b/examples/react/src/examples/CustomNode/ColorSelectorNode.tsx @@ -1,6 +1,8 @@ -import React, { memo, FC, CSSProperties, useCallback, useEffect } from 'react'; +import React, { memo, FC, CSSProperties, useCallback } from 'react'; import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange, Viewport } from '@xyflow/react'; +import type { ColorSelectorNode } from '.'; + const targetHandleStyle: CSSProperties = { background: '#555' }; const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 }; const sourceHandleStyleB: CSSProperties = { @@ -11,7 +13,7 @@ const sourceHandleStyleB: CSSProperties = { const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params); -const ColorSelectorNode: FC = ({ data, isConnectable }) => { +const ColorSelectorNode: FC> = ({ data, isConnectable }) => { const onStart = useCallback((viewport: Viewport) => console.log('onStart', viewport), []); const onChange = useCallback((viewport: Viewport) => console.log('onChange', viewport), []); const onEnd = useCallback((viewport: Viewport) => console.log('onEnd', viewport), []); diff --git a/examples/react/src/examples/CustomNode/index.tsx b/examples/react/src/examples/CustomNode/index.tsx index ce7d0f62..986638a0 100644 --- a/examples/react/src/examples/CustomNode/index.tsx +++ b/examples/react/src/examples/CustomNode/index.tsx @@ -5,24 +5,32 @@ import { Controls, addEdge, Node, - ReactFlowInstance, Position, SnapGrid, Connection, - useNodesState, useEdgesState, Background, Edge, + OnNodeDrag, + OnInit, + applyNodeChanges, + OnNodesChange, } from '@xyflow/react'; import ColorSelectorNode from './ColorSelectorNode'; -const onInit = (reactFlowInstance: ReactFlowInstance) => { +export type ColorSelectorNode = Node< + { color: string; onChange: (event: ChangeEvent) => void }, + 'selectorNode' +>; +export type MyNode = Node | ColorSelectorNode; + +const onInit: OnInit = (reactFlowInstance) => { console.log('flow loaded:', reactFlowInstance); }; -const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); -const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node); +const onNodeDragStop: OnNodeDrag = (_, node) => console.log('drag stop', node); +const onNodeClick = (_: MouseEvent, node: MyNode) => console.log('click', node); const initBgColor = '#1A192B'; @@ -34,7 +42,16 @@ const nodeTypes = { }; const CustomNodeFlow = () => { - const [nodes, setNodes, onNodesChange] = useNodesState([]); + const [nodes, setNodes] = useState([]); + const onNodesChange: OnNodesChange = useCallback( + (changes) => + setNodes((nds) => { + const nextNodes = applyNodeChanges(changes, nds); + return nextNodes; + }), + [setNodes] + ); + const [edges, setEdges, onEdgesChange] = useEdgesState([]); const [bgColor, setBgColor] = useState(initBgColor); @@ -145,14 +162,14 @@ const CustomNodeFlow = () => { maxZoom={2} > { + nodeStrokeColor={(n: MyNode): string => { if (n.type === 'input') return '#0041d0'; if (n.type === 'selectorNode') return bgColor; if (n.type === 'output') return '#ff0072'; return '#eee'; }} - nodeColor={(n: Node): string => { + nodeColor={(n: MyNode): string => { if (n.type === 'selectorNode') return bgColor; return '#fff'; diff --git a/examples/svelte/src/routes/examples/handle-connect/MultiHandleNode.svelte b/examples/svelte/src/routes/examples/handle-connect/MultiHandleNode.svelte index ebc85c74..f411fc44 100644 --- a/examples/svelte/src/routes/examples/handle-connect/MultiHandleNode.svelte +++ b/examples/svelte/src/routes/examples/handle-connect/MultiHandleNode.svelte @@ -43,10 +43,8 @@ export let zIndex: $$Props['zIndex'] = undefined; export let dragging: $$Props['dragging'] = false; export let dragHandle: $$Props['dragHandle'] = undefined; - export let positionAbsolute: $$Props['positionAbsolute'] = { - x: 0, - y: 0 - }; + export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0; + export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0; export let isConnectable: $$Props['isConnectable'] = undefined; data; @@ -59,7 +57,8 @@ zIndex; dragging; dragHandle; - positionAbsolute; + positionAbsoluteX; + positionAbsoluteY; isConnectable; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 3cabb813..8ad67000 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -67,7 +67,6 @@ export { type OnError, type NodeProps, type NodeOrigin, - type OnNodeDrag, type OnSelectionDrag, Position, type XYPosition, diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts index 50f07303..f8bc8dfd 100644 --- a/packages/react/src/types/component-props.ts +++ b/packages/react/src/types/component-props.ts @@ -40,10 +40,10 @@ import type { OnDelete, OnNodesChange, OnEdgesChange, - NodeDragHandler, NodeMouseHandler, SelectionDragHandler, EdgeMouseHandler, + OnNodeDrag, } from '.'; /** @@ -111,11 +111,11 @@ export interface ReactFlowProps extends Omit, 'on /** This event handler is called when a user right clicks on a node */ onNodeContextMenu?: NodeMouseHandler; /** This event handler is called when a user starts to drag a node */ - onNodeDragStart?: NodeDragHandler; + onNodeDragStart?: OnNodeDrag; /** This event handler is called when a user drags a node */ - onNodeDrag?: NodeDragHandler; + onNodeDrag?: OnNodeDrag; /** This event handler is called when a user stops dragging a node */ - onNodeDragStop?: NodeDragHandler; + onNodeDragStop?: OnNodeDrag; /** This event handler is called when a user clicks on an edge */ onEdgeClick?: (event: ReactMouseEvent, edge: Edge) => void; /** This event handler is called when a user right clicks on an edge */ diff --git a/packages/react/src/types/general.ts b/packages/react/src/types/general.ts index 9a36e41f..1a7462ad 100644 --- a/packages/react/src/types/general.ts +++ b/packages/react/src/types/general.ts @@ -19,7 +19,7 @@ import { ComponentType } from 'react'; export type OnNodesChange = (changes: NodeChange[]) => void; export type OnEdgesChange = (changes: EdgeChange[]) => void; -export type OnNodesDelete = (nodes: Node[]) => void; +export type OnNodesDelete = (nodes: NodeType[]) => void; export type OnEdgesDelete = (edges: Edge[]) => void; export type OnDelete = (params: { nodes: Node[]; edges: Edge[] }) => void; diff --git a/packages/react/src/types/nodes.ts b/packages/react/src/types/nodes.ts index 71bfb685..612c1d50 100644 --- a/packages/react/src/types/nodes.ts +++ b/packages/react/src/types/nodes.ts @@ -3,11 +3,11 @@ import type { CoordinateExtent, NodeBase, NodeOrigin, OnError } from '@xyflow/sy import { NodeTypes } from './general'; -// eslint-disable-next-line @typescript-eslint/no-explicit-any /** * The node data structure that gets used for the nodes prop. * @public */ +// eslint-disable-next-line @typescript-eslint/no-explicit-any export type Node = NodeBase< NodeData, NodeType @@ -18,9 +18,13 @@ export type Node void; -export type NodeDragHandler = (event: ReactMouseEvent, node: Node, nodes: Node[]) => void; -export type SelectionDragHandler = (event: ReactMouseEvent, nodes: Node[]) => void; +export type NodeMouseHandler = (event: ReactMouseEvent, node: NodeType) => void; +export type SelectionDragHandler = (event: ReactMouseEvent, nodes: NodeType[]) => void; +export type OnNodeDrag = ( + event: ReactMouseEvent, + node: NodeType, + nodes: NodeType[] +) => void; export type NodeWrapperProps = { id: string; diff --git a/packages/react/src/types/store.ts b/packages/react/src/types/store.ts index b138fc9d..a0d5f8cc 100644 --- a/packages/react/src/types/store.ts +++ b/packages/react/src/types/store.ts @@ -17,7 +17,6 @@ import { type PanBy, type OnConnectStart, type OnConnectEnd, - type OnNodeDrag, type OnSelectionDrag, type OnMoveStart, type OnMove, @@ -43,6 +42,7 @@ import type { OnSelectionChangeFunc, UnselectNodesAndEdgesParams, OnDelete, + OnNodeDrag, } from '.'; export type ReactFlowStore = { diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts index 4c3737ea..edaed9ee 100644 --- a/packages/svelte/src/lib/index.ts +++ b/packages/svelte/src/lib/index.ts @@ -79,7 +79,6 @@ export { type OnError, type NodeProps, type NodeOrigin, - type OnNodeDrag, type OnSelectionDrag, Position, type XYPosition, diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index 18941bc6..91160860 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -15,7 +15,6 @@ import { type XYPosition, type CoordinateExtent, type UpdateConnection, - type NodeBase, type NodeDragItem, errorMessages } from '@xyflow/system'; @@ -67,7 +66,7 @@ export function createStore({ const updateNodePositions: UpdateNodePositions = (nodeDragItems, dragging = false) => { store.nodes.update((nds) => { return nds.map((node) => { - const nodeDragItem = (nodeDragItems as Array).find( + const nodeDragItem = (nodeDragItems as Array).find( (ndi) => ndi.id === node.id ); diff --git a/packages/system/src/types/nodes.ts b/packages/system/src/types/nodes.ts index 40aa1c16..b75e6d1b 100644 --- a/packages/system/src/types/nodes.ts +++ b/packages/system/src/types/nodes.ts @@ -94,9 +94,9 @@ export type NodeProps = { positionAbsoluteY: number; width?: number; height?: number; - dragging: boolean; - targetPosition?: Position; - sourcePosition?: Position; + dragging: NodeBase['dragging']; + sourcePosition?: NodeBase['sourcePosition']; + targetPosition?: NodeBase['targetPosition']; }; export type NodeHandleBounds = { @@ -134,8 +134,6 @@ export type NodeDragItem = { export type NodeOrigin = [number, number]; -export type OnNodeDrag = (event: MouseEvent, node: NodeBase, nodes: NodeBase[]) => void; - export type OnSelectionDrag = (event: MouseEvent, nodes: NodeBase[]) => void; export type NodeHandle = Optional; diff --git a/packages/system/src/xydrag/XYDrag.ts b/packages/system/src/xydrag/XYDrag.ts index 79a0823a..40d1aa4b 100644 --- a/packages/system/src/xydrag/XYDrag.ts +++ b/packages/system/src/xydrag/XYDrag.ts @@ -23,7 +23,6 @@ import type { SnapGrid, Transform, PanBy, - OnNodeDrag, OnSelectionDrag, UpdateNodePositions, Box, @@ -31,7 +30,7 @@ import type { export type OnDrag = (event: MouseEvent, dragItems: NodeDragItem[], node: NodeBase, nodes: NodeBase[]) => void; -type StoreItems = { +type StoreItems = { nodes: NodeBase[]; nodeLookup: Map; edges: EdgeBase[]; @@ -58,9 +57,9 @@ type StoreItems = { updateNodePositions: UpdateNodePositions; }; -export type XYDragParams = { +export type XYDragParams = { domNode: Element; - getStoreItems: () => StoreItems; + getStoreItems: () => StoreItems; onDragStart?: OnDrag; onDrag?: OnDrag; onDragStop?: OnDrag; @@ -80,14 +79,15 @@ export type DragUpdateParams = { domNode: Element; }; -export function XYDrag({ +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export function XYDrag void | undefined>({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragStop, -}: XYDragParams): XYDragInstance { +}: XYDragParams): XYDragInstance { let lastPos: { x: number | null; y: number | null } = { x: null, y: null }; let autoPanId = 0; let dragItems: NodeDragItem[] = []; From 1f454b42f6c51b4d19ee0a98b2cd8e39f891b6fe Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 22 Jan 2024 17:19:39 +0100 Subject: [PATCH 08/12] chore(svelte): cleanup imports --- .../svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte | 5 +++-- .../svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte | 2 +- packages/svelte/src/lib/hooks/useHandleEdgeSelect.ts | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte b/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte index eb0c794f..81039d0d 100644 --- a/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte +++ b/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte @@ -1,8 +1,9 @@