From 9fb49796311bcee8cad7c47cd00800b1813369bc Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 21 Feb 2024 07:41:56 +0100 Subject: [PATCH 1/3] Pane: only use cursor grab when panOnDrag=true --- packages/react/src/container/Pane/index.tsx | 2 +- packages/svelte/src/lib/container/Pane/Pane.svelte | 1 + packages/system/src/styles/init.css | 9 ++++++--- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx index af1ca28e..414a4745 100644 --- a/packages/react/src/container/Pane/index.tsx +++ b/packages/react/src/container/Pane/index.tsx @@ -220,7 +220,7 @@ export function Pane({ return (
Date: Wed, 21 Feb 2024 08:01:39 +0100 Subject: [PATCH 2/3] Node: only use cursor grab when draggable --- packages/react/src/components/NodeWrapper/index.tsx | 1 + packages/system/src/styles/init.css | 11 +++++------ 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react/src/components/NodeWrapper/index.tsx b/packages/react/src/components/NodeWrapper/index.tsx index 4199d158..6d2231d9 100644 --- a/packages/react/src/components/NodeWrapper/index.tsx +++ b/packages/react/src/components/NodeWrapper/index.tsx @@ -220,6 +220,7 @@ export function NodeWrapper({ selected: node.selected, selectable: isSelectable, parent: isParent, + draggable: isDraggable, dragging, }, ])} diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css index 6d6a4eec..5c01aece 100644 --- a/packages/system/src/styles/init.css +++ b/packages/system/src/styles/init.css @@ -186,16 +186,15 @@ svg.xy-flow__connectionline { pointer-events: all; transform-origin: 0 0; box-sizing: border-box; - cursor: grab; + cursor: default; - &.dragging { - cursor: grabbing; - } - - /* only used in Svelte Flow, should we remove it here? */ &.draggable { cursor: grab; pointer-events: all; + + &.dragging { + cursor: grabbing; + } } } From f0d1e85cf1856e9664910ab8c04a345bfcd4112e Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 22 Feb 2024 11:12:08 +0100 Subject: [PATCH 3/3] selectable correctly influences cursor types for nodes & edges --- .../src/lib/components/EdgeWrapper/EdgeWrapper.svelte | 5 ++++- .../src/lib/container/EdgeRenderer/EdgeRenderer.svelte | 1 + packages/system/src/styles/init.css | 9 ++++++++- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte index 0d4c126b..1dff49e7 100644 --- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte +++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte @@ -22,6 +22,7 @@ export let animated: $$Props['animated'] = false; export let selected: $$Props['selected'] = false; + export let selectable: $$Props['selectable'] = undefined; export let hidden: $$Props['hidden'] = false; export let label: $$Props['label'] = undefined; export let labelStyle: $$Props['labelStyle'] = undefined; @@ -44,7 +45,7 @@ setContext('svelteflow__edge_id', id); - const { edgeLookup, edgeTypes, flowId } = useStore(); + const { edgeLookup, edgeTypes, flowId, elementsSelectable } = useStore(); const dispatch = createEventDispatcher<{ edgeclick: { edge: Edge; event: MouseEvent | TouchEvent }; edgecontextmenu: { edge: Edge; event: MouseEvent }; @@ -53,6 +54,7 @@ $: edgeComponent = $edgeTypes[type!] || BezierEdgeInternal; $: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined; $: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined; + $: isSelectable = selectable || ($elementsSelectable && typeof selectable === 'undefined'); const handleEdgeSelect = useHandleEdgeSelect(); @@ -82,6 +84,7 @@ class={cc(['svelte-flow__edge', className])} class:animated class:selected + class:selectable={isSelectable} data-id={id} on:click={onClick} on:contextmenu={onContextMenu} diff --git a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte index d74027e7..0fa2c273 100644 --- a/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte +++ b/packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte @@ -33,6 +33,7 @@ style={edge.style} animated={edge.animated} selected={edge.selected} + selectable={edge.selectable} hidden={edge.hidden} label={edge.label} labelStyle={edge.labelStyle} diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css index 5c01aece..46628842 100644 --- a/packages/system/src/styles/init.css +++ b/packages/system/src/styles/init.css @@ -123,7 +123,10 @@ .xy-flow__edge { pointer-events: visibleStroke; - cursor: pointer; + + &.selectable { + cursor: pointer; + } &.animated path { stroke-dasharray: 5; @@ -188,6 +191,10 @@ svg.xy-flow__connectionline { box-sizing: border-box; cursor: default; + &.selectable { + cursor: pointer; + } + &.draggable { cursor: grab; pointer-events: all;