From dee36d5b9032cbfce66edf1b37878d1b99dea6cf Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 13 Nov 2023 11:45:53 +0100
Subject: [PATCH] feat(svelte): add selectionOnDrag

---
 examples/svelte/src/routes/examples/figma/+page.svelte       | 1 +
 packages/svelte/CHANGELOG.md                                 | 1 +
 packages/svelte/src/lib/container/Pane/Pane.svelte           | 5 +++--
 packages/svelte/src/lib/container/Pane/types.ts              | 1 +
 .../svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte    | 3 ++-
 packages/svelte/src/lib/container/SvelteFlow/types.ts        | 4 +---
 6 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/examples/svelte/src/routes/examples/figma/+page.svelte b/examples/svelte/src/routes/examples/figma/+page.svelte
index 7ebdd500..4673eeec 100644
--- a/examples/svelte/src/routes/examples/figma/+page.svelte
+++ b/examples/svelte/src/routes/examples/figma/+page.svelte
@@ -45,6 +45,7 @@
 	{edges}
 	fitView
 	selectionMode={SelectionMode.Partial}
+	selectionOnDrag
 	panOnScroll
 	{panOnDrag}
 	{onMoveStart}
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index d2fe14e0..f32356f5 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/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]`)
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index efc365fc..21ed2a61 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/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 });
diff --git a/packages/svelte/src/lib/container/Pane/types.ts b/packages/svelte/src/lib/container/Pane/types.ts
index 9495397b..96d97701 100644
--- a/packages/svelte/src/lib/container/Pane/types.ts
+++ b/packages/svelte/src/lib/container/Pane/types.ts
@@ -1,3 +1,4 @@
 export type PaneProps = {
   panOnDrag?: boolean | number[];
+  selectionOnDrag?: boolean;
 };
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 6eb0d850..0c74b4e0 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/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
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 37e7b9b3..4b7d3e8d 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/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;