From 6b192d90d56e70f13b56ec7362db97f3482d8ab3 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 21 Feb 2023 11:35:15 +0100
Subject: [PATCH] feat(svelte): make selection draggable

---
 packages/svelte/src/lib/actions/drag/index.ts |  2 +-
 packages/svelte/src/lib/actions/drag/utils.ts |  1 -
 packages/svelte/src/lib/actions/zoom/index.ts |  6 +++---
 .../lib/components/NodeSelection/index.svelte | 20 ++++++++++++++++---
 .../src/lib/components/Selection/index.svelte |  2 +-
 .../{Panel.svelte => Panel/index.svelte}      |  2 ++
 packages/svelte/src/lib/index.ts              |  1 +
 .../src/lib/plugins/Controls/Controls.svelte  |  2 +-
 .../src/lib/plugins/Minimap/Minimap.svelte    | 13 ++++--------
 9 files changed, 30 insertions(+), 19 deletions(-)
 rename packages/svelte/src/lib/container/{Panel.svelte => Panel/index.svelte} (93%)

diff --git a/packages/svelte/src/lib/actions/drag/index.ts b/packages/svelte/src/lib/actions/drag/index.ts
index 84b7b5fb..da2b66a9 100644
--- a/packages/svelte/src/lib/actions/drag/index.ts
+++ b/packages/svelte/src/lib/actions/drag/index.ts
@@ -94,7 +94,7 @@ export default function drag(
 	const dragHandler = d3Drag()
 		.on('start', (event: UseDragEvent) => {
 			const pointerPos = getPointerPosition(event);
-
+			console.log(pointerPos);
 			lastPos = pointerPos;
 			dragItems = getDragItems(get(nodesStore), pointerPos, nodeId);
 		})
diff --git a/packages/svelte/src/lib/actions/drag/utils.ts b/packages/svelte/src/lib/actions/drag/utils.ts
index bfb384a3..b5c701a7 100644
--- a/packages/svelte/src/lib/actions/drag/utils.ts
+++ b/packages/svelte/src/lib/actions/drag/utils.ts
@@ -41,7 +41,6 @@ export function hasSelector(target: Element, selector: string, domNode: Element)
 
 // looks for all selected nodes and created a NodeDragItem for each of them
 export function getDragItems(nodes: Node[], mousePos: XYPosition, nodeId?: string): NodeDragItem[] {
-	console.log(mousePos, nodes);
 	return nodes
 		.filter(
 			(n) => (n.selected || n.id === nodeId) && (!n.parentNode || !isParentSelected(n, nodes))
diff --git a/packages/svelte/src/lib/actions/zoom/index.ts b/packages/svelte/src/lib/actions/zoom/index.ts
index 29d0a106..6c1ee091 100644
--- a/packages/svelte/src/lib/actions/zoom/index.ts
+++ b/packages/svelte/src/lib/actions/zoom/index.ts
@@ -40,9 +40,9 @@ function filter(event: any, params: ZoomParams): boolean {
 	// }
 
 	// // if the target element is inside an element with the nopan class, we prevent panning
-	// if (isWrappedWithClass(event, noPanClassName) && event.type !== 'wheel') {
-	// 	return false;
-	// }
+	if (isWrappedWithClass(event, 'nopan') && event.type !== 'wheel') {
+		return false;
+	}
 
 	// if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') {
 	// 	return false;
diff --git a/packages/svelte/src/lib/components/NodeSelection/index.svelte b/packages/svelte/src/lib/components/NodeSelection/index.svelte
index 04295e15..64a9e409 100644
--- a/packages/svelte/src/lib/components/NodeSelection/index.svelte
+++ b/packages/svelte/src/lib/components/NodeSelection/index.svelte
@@ -3,16 +3,20 @@
 
   import { useStore } from '$lib/store';
   import Selection from '$lib/components/Selection/index.svelte';
+  import drag  from '$lib/actions/drag'
 
-  const { selectionRectModeStore, nodesStore, nodeOriginStore } = useStore();
+  const { selectionRectModeStore, nodesStore, nodeOriginStore, transformStore, updateNodePositions } = useStore();
 
   $: selectedNodes = $nodesStore.filter(n => n.selected);
   $: rect = getRectOfNodes(selectedNodes, $nodeOriginStore);
-
-  // @todo: use zoom action for selection
 </script> 
 
 {#if selectedNodes}
+  <div
+    class="selection-wrapper nopan"
+    style={`width: ${rect.width}px; height: ${rect.height}px; transform: translate(${rect.x}px, ${rect.y}px)`}
+    use:drag={{ nodesStore, transformStore, updateNodePositions }}
+  />
   <Selection
     isVisible={$selectionRectModeStore === 'nodes'}
     width={rect.width}
@@ -21,3 +25,13 @@
     y={rect.y}
   />
 {/if}
+
+<style>
+  .selection-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 7;
+    pointer-events: all;
+  }
+</style>
\ No newline at end of file
diff --git a/packages/svelte/src/lib/components/Selection/index.svelte b/packages/svelte/src/lib/components/Selection/index.svelte
index 4c8f4946..9cb9a4c2 100644
--- a/packages/svelte/src/lib/components/Selection/index.svelte
+++ b/packages/svelte/src/lib/components/Selection/index.svelte
@@ -9,7 +9,7 @@
 {#if isVisible}
   <div
     class="react-flow__selection"
-    style={`width: ${width}px; height: ${height}px;transform: translate(${x}px, ${y}px)`}
+    style={`width: ${width}px; height: ${height}px; transform: translate(${x}px, ${y}px)`}
   />
 {/if}
 
diff --git a/packages/svelte/src/lib/container/Panel.svelte b/packages/svelte/src/lib/container/Panel/index.svelte
similarity index 93%
rename from packages/svelte/src/lib/container/Panel.svelte
rename to packages/svelte/src/lib/container/Panel/index.svelte
index e87917d9..ce4313cb 100644
--- a/packages/svelte/src/lib/container/Panel.svelte
+++ b/packages/svelte/src/lib/container/Panel/index.svelte
@@ -3,6 +3,7 @@
   import cc from 'classcat';
 
   export let position: PanelPosition = 'top-right';
+  export let style: string = '';
   export { className as class }
 
   let className: string;
@@ -12,6 +13,7 @@
 
 <div
   class={cc(['react-flow__panel', className, ...positionClasses])}
+  style={style}
 >
   <slot />
 </div>
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index a2dbe617..cc39ec56 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -2,5 +2,6 @@ import SvelteFlow from '$lib/container/SvelteFlow.svelte';
 export { Controls, ControlButton } from '$lib/plugins/Controls';
 export { Background, BackgroundVariant } from '$lib/plugins/Background';
 export { Minimap } from '$lib/plugins/Minimap';
+export { default as Panel } from '$lib/container/Panel/index.svelte';
 
 export default SvelteFlow;
diff --git a/packages/svelte/src/lib/plugins/Controls/Controls.svelte b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
index a36436b0..a2bba0c9 100644
--- a/packages/svelte/src/lib/plugins/Controls/Controls.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { PanelPosition } from '@reactflow/system';
 
-  import Panel from '$lib/container/Panel.svelte';
+  import Panel from '$lib/container/Panel/index.svelte';
   import { useStore } from '$lib/store';
   import ControlButton from './ControlButton.svelte';
   import PlusIcon from './Icons/Plus.svelte';
diff --git a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
index 9de661f3..55bcb45c 100644
--- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
@@ -4,7 +4,7 @@
 	import { getBoundsOfRects, getNodePositionWithOrigin, getRectOfNodes } from '@reactflow/utils';
 
   import { useStore } from '$lib/store';
-	import Panel from '$lib/container/Panel.svelte';
+	import Panel from '$lib/container/Panel/index.svelte';
   import MinimapNode from './MinimapNode.svelte';
 
   let position: PanelPosition = 'bottom-right';
@@ -16,6 +16,7 @@
   let nodeClassName: string = '';
   let nodeBorderRadius: number = 5;
   let nodeStrokeWidth: number = 2;
+  let bgColor: string = '#fff';
   let maskColor: string = 'rgb(240, 240, 240, 0.6)';
   let maskStrokeColor: string = 'none';
   let maskStrokeWidth: number = 1;
@@ -54,7 +55,7 @@
   $: height = viewHeight + offset * 2;
 </script>
 
-<Panel position={position} class={cc(['react-flow__minimap', className])}>
+<Panel position={position} class={cc(['react-flow__minimap', className])} style={`background-color: ${bgColor};`}>
   <svg
     width={elementWidth}
     height={elementHeight}
@@ -93,10 +94,4 @@
       pointer-events="none"
     />
   </svg>
-</Panel>
-
-<style>
-  .react-flow__minimap {
-    background-color: #fff;
-  }
-</style>
\ No newline at end of file
+</Panel>
\ No newline at end of file