diff --git a/packages/svelte/src/lib/actions/drag/utils.ts b/packages/svelte/src/lib/actions/drag/utils.ts index c470fb71..476da9d6 100644 --- a/packages/svelte/src/lib/actions/drag/utils.ts +++ b/packages/svelte/src/lib/actions/drag/utils.ts @@ -108,7 +108,7 @@ export function calcNextPosition( ] : currentExtent; } else { - devWarn('005', errorMessages['005']()); + devWarn('005', errorMessages['error005']()); currentExtent = nodeExtent; } } else if (node.extent && node.parentNode) { diff --git a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte index 0ea8a77d..0438ba05 100644 --- a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte +++ b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte @@ -14,7 +14,6 @@ export let markerEnd: $$Props['markerEnd'] = undefined; export let style: $$Props['style'] = undefined; export let interactionWidth: $$Props['interactionWidth'] = 20; - = $edgeTypes[type!] || BezierEdge; @@ -41,6 +42,10 @@ $: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined; function onClick() { + if (selectable) { + addSelectedEdges([id]); + } + const edge = $edges.find(e => e.id === id); dispatch('edge:click', edge); } @@ -50,6 +55,7 @@ @@ -83,13 +89,17 @@ cursor: pointer; } - .svelte-flow__edge :global(path) { + .svelte-flow__edge :global(.svelte-flow__edge-path) { stroke: #ccc; stroke-width: 1; fill: none; } - .animated :global(path) { + .selected :global(.svelte-flow__edge-path) { + stroke: #555; + } + + .animated :global(.svelte-flow__edge-path) { stroke-dasharray: 5; animation: dashdraw 0.5s linear infinite; } diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte index d05be824..96e48e3f 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte +++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte @@ -15,6 +15,7 @@ export let data: NodeWrapperProps['data'] = {}; export let selected: NodeWrapperProps['selected'] = false; export let draggable: NodeWrapperProps['draggable'] = undefined; + export let selectable: NodeWrapperProps['selectable'] = undefined; export let connectable: NodeWrapperProps['connectable'] = true; export let dragging: boolean = false; export let resizeObserver: NodeWrapperProps['resizeObserver'] = null; @@ -36,13 +37,12 @@ const nodeTypeValid = !!$nodeTypes[type!]; if (!nodeTypeValid) { - console.warn('003', errorMessages['003'](type!)); + console.warn('003', errorMessages['error003'](type!)); type = 'default'; } const nodeComponent: typeof SvelteComponentTyped> = $nodeTypes[type!] || DefaultNode; - const isSelectable = true; const selectNodesOnDrag = false; const dispatch = createEventDispatcher(); @@ -63,7 +63,7 @@ } function onSelectNodeHandler(event: MouseEvent) { - if (isSelectable && (!selectNodesOnDrag || !draggable)) { + if (selectable && (!selectNodesOnDrag || !draggable)) { // this handler gets called within the drag start event when selectNodesOnDrag=true addSelectedNodes([id]); } diff --git a/packages/svelte/src/lib/components/NodeWrapper/types.ts b/packages/svelte/src/lib/components/NodeWrapper/types.ts index acd26836..d6593427 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/types.ts +++ b/packages/svelte/src/lib/components/NodeWrapper/types.ts @@ -11,6 +11,7 @@ export type NodeWrapperProps = Pick< | 'dragging' | 'positionAbsolute' | 'selected' + | 'selectable' | 'style' | 'type' | 'width' diff --git a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte index 270247b8..1f940958 100644 --- a/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte +++ b/packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte @@ -39,6 +39,7 @@ data={node.data} selected={node.selected} draggable={node.draggable || node.draggable === undefined} + selectable={node.selectable || node.selectable === undefined} connectable={node.connectable || node.connectable === undefined} positionAbsolute={node.positionAbsolute} positionOrigin={posOrigin} diff --git a/packages/svelte/src/lib/store/edges-layouted.ts b/packages/svelte/src/lib/store/edges-layouted.ts index f303b946..f26a3449 100644 --- a/packages/svelte/src/lib/store/edges-layouted.ts +++ b/packages/svelte/src/lib/store/edges-layouted.ts @@ -45,6 +45,7 @@ export function getEdgesLayouted(store: SvelteFlowStoreState) { res.push({ ...edge, + selectable: edge.selectable || typeof edge.selectable === 'undefined', type: edgeType, sourceX, sourceY, diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index 3693a518..96b8dfe7 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -251,6 +251,21 @@ export function createStore(params: CreateStoreParams): SvelteFlowStore { ); } + function addSelectedEdges(ids: string[]) { + if (get(store.multiselectionKeyPressed)) { + // @todo handle multiselection key + } + + store.edges.update((edges) => + edges.map((edge) => { + return { + ...edge, + selected: ids.includes(edge.id) + }; + }) + ); + } + function panBy(delta: XYPosition) { const { zoom: d3Zoom, selection: d3Selection } = get(store.d3); const transform = get(store.transform); @@ -335,6 +350,7 @@ export function createStore(params: CreateStoreParams): SvelteFlowStore { setMaxZoom, resetSelectedElements, addSelectedNodes, + addSelectedEdges, panBy, updateConnection, cancelConnection, diff --git a/packages/svelte/src/lib/store/types.ts b/packages/svelte/src/lib/store/types.ts index 48d4edbb..eff7e87b 100644 --- a/packages/svelte/src/lib/store/types.ts +++ b/packages/svelte/src/lib/store/types.ts @@ -27,6 +27,7 @@ export type SvelteFlowStoreActions = { updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void; resetSelectedElements: () => void; addSelectedNodes: (ids: string[]) => void; + addSelectedEdges: (ids: string[]) => void; panBy: (delta: XYPosition) => void; updateConnection: (connection: Partial) => void; cancelConnection: () => void; diff --git a/packages/svelte/src/routes/overview/+page.svelte b/packages/svelte/src/routes/overview/+page.svelte index 9095ef3d..3207b232 100644 --- a/packages/svelte/src/routes/overview/+page.svelte +++ b/packages/svelte/src/routes/overview/+page.svelte @@ -34,7 +34,8 @@ id: '2', type: 'default', data: { label: 'Node' }, - position: { x: 0, y: 150 } + position: { x: 0, y: 150 }, + selectable: false, }, { id: 'A', @@ -83,7 +84,8 @@ id: '1-3', type: 'smoothstep', source: '1', - target: '3' + target: '3', + selectable: false }, { id: '2-4',