feat(svelte): make selection draggable

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);
 		})

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))

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;

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>

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}
 

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>

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;

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';

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>
+</Panel>