feat(svelte): add selectionOnDrag

examples/svelte/src/routes/examples/figma/+page.svelte

@@ -45,6 +45,7 @@
 	{edges}
 	fitView
 	selectionMode={SelectionMode.Partial}
+	selectionOnDrag
 	panOnScroll
 	{panOnDrag}
 	{onMoveStart}

packages/svelte/CHANGELOG.md

@@ -1,5 +1,6 @@
 ## 0.0.27
 
+- add `selectionOnDrag` prop - can be used to create figma-like controls in combination with `panOnDrag={false}` / `panOnDrag={[1, 2]}` + `panOnScroll={true}` 
 - ⚠️ rename `screenToFlowCoordinate` to `screenToFlowPosition`
 - ⚠️ rename `flowToScreenCoordinate` to `flowToScreenPosition`
 - ⚠️ rename `getTransformForBounds` to `getViewportForBounds` (return `{ x: number, y: number, zoom: number }` instead of `[number, number, number]`)

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -40,6 +40,7 @@
   type $$Props = PaneProps;
 
   export let panOnDrag: $$Props['panOnDrag'] = undefined;
+  export let selectionOnDrag: $$Props['selectionOnDrag'] = undefined;
 
   const dispatch = createEventDispatcher<{
     paneclick: {
@@ -67,9 +68,9 @@
   let containerBounds: DOMRect | null = null;
   let selectedNodes: Node[] = [];
 
-  $: isSelecting = $selectionKeyPressed;
-  $: hasActiveSelection = $elementsSelectable && (isSelecting || $selectionRectMode === 'user');
   $: _panOnDrag = $panActivationKeyPressed || panOnDrag;
+  $: isSelecting = $selectionKeyPressed || (selectionOnDrag && _panOnDrag !== true);
+  $: hasActiveSelection = $elementsSelectable && (isSelecting || $selectionRectMode === 'user');
 
   function onClick(event: MouseEvent | TouchEvent) {
     dispatch('paneclick', { event });

packages/svelte/src/lib/container/Pane/types.ts

@@ -1,3 +1,4 @@
 export type PaneProps = {
   panOnDrag?: boolean | number[];
+  selectionOnDrag?: boolean;
 };

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -58,6 +58,7 @@
   export let zoomOnPinch: $$Props['zoomOnPinch'] = true;
   export let panOnScroll: $$Props['panOnScroll'] = false;
   export let panOnDrag: $$Props['panOnDrag'] = true;
+  export let selectionOnDrag: $$Props['selectionOnDrag'] = undefined;
   export let autoPanOnConnect: $$Props['autoPanOnConnect'] = true;
   export let autoPanOnNodeDrag: $$Props['autoPanOnNodeDrag'] = true;
   export let onError: $$Props['onError'] = undefined;
@@ -179,7 +180,7 @@
     panOnScroll={panOnScroll === undefined ? false : panOnScroll}
     panOnDrag={panOnDrag === undefined ? true : panOnDrag}
   >
-    <Pane on:paneclick panOnDrag={panOnDrag === undefined ? true : panOnDrag}>
+    <Pane on:paneclick panOnDrag={panOnDrag === undefined ? true : panOnDrag} {selectionOnDrag}>
       <ViewportComponent>
         <EdgeRenderer on:edgeclick on:edgecontextmenu {defaultEdgeOptions} />
         <ConnectionLine

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -1,6 +1,5 @@
 import type { DOMAttributes } from 'svelte/elements';
 import type {
-  Connection,
   ConnectionLineType,
   NodeOrigin,
   Viewport,
@@ -12,8 +11,6 @@ import type {
   CoordinateExtent,
   PanOnScrollMode,
   IsValidConnection,
-  HandleType,
-  NodeBase,
   OnError,
   ConnectionMode,
   PanelPosition,
@@ -66,6 +63,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   zoomOnPinch?: boolean;
   panOnScroll?: boolean;
   panOnDrag?: boolean | number[];
+  selectionOnDrag?: boolean;
   onlyRenderVisibleElements?: boolean;
   autoPanOnConnect?: boolean;
   autoPanOnNodeDrag?: boolean;