@d34dman/flowdrop 0.0.13 → 0.0.14

package/dist/components/FlowDropZone.svelte

@@ -0,0 +1,68 @@
+<!--
+  Flow Drop Zone Component
+  Handles drag and drop with proper coordinate transformation
+  Must be used inside SvelteFlowProvider
+-->
+
+<script lang="ts">
+	import { useSvelteFlow } from "@xyflow/svelte";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		ondrop: (nodeTypeData: string, position: { x: number; y: number }) => void;
+		children: Snippet;
+	}
+
+	let props: Props = $props();
+
+	// Access SvelteFlow instance for coordinate transformation
+	const { screenToFlowPosition } = useSvelteFlow();
+
+	/**
+	 * Handle drag over event
+	 */
+	function handleDragOver(e: DragEvent): void {
+		e.preventDefault();
+		if (e.dataTransfer) {
+			e.dataTransfer.dropEffect = "copy";
+		}
+	}
+
+	/**
+	 * Handle drop event with proper coordinate transformation
+	 */
+	function handleDrop(e: DragEvent): void {
+		e.preventDefault();
+
+		// Get the data from the drag event
+		const nodeTypeData = e.dataTransfer?.getData("application/json");
+		if (nodeTypeData) {
+			// Convert screen coordinates to flow coordinates (accounts for zoom and pan)
+			const position = screenToFlowPosition({
+				x: e.clientX,
+				y: e.clientY
+			});
+
+			// Call the parent handler with the converted position
+			props.ondrop(nodeTypeData, position);
+		}
+	}
+</script>
+
+<div
+	class="flow-drop-zone"
+	role="application"
+	aria-label="Workflow canvas"
+	ondragover={handleDragOver}
+	ondrop={handleDrop}
+>
+	{@render props.children()}
+</div>
+
+<style>
+	.flow-drop-zone {
+		width: 100%;
+		height: 100%;
+	}
+</style>
+

package/dist/components/FlowDropZone.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+interface Props {
+    ondrop: (nodeTypeData: string, position: {
+        x: number;
+        y: number;
+    }) => void;
+    children: Snippet;
+}
+declare const FlowDropZone: import("svelte").Component<Props, {}, "">;
+type FlowDropZone = ReturnType<typeof FlowDropZone>;
+export default FlowDropZone;

package/dist/components/WorkflowEditor.svelte

@@ -22,6 +22,7 @@
 		WorkflowEdge
 	} from '../types/index.js';
 	import CanvasBanner from './CanvasBanner.svelte';
+	import FlowDropZone from './FlowDropZone.svelte';
 	import { tick } from 'svelte';
 	import type { EndpointConfig } from '../config/endpoints.js';
 	import ConnectionLine from './ConnectionLine.svelte';
@@ -277,8 +278,8 @@
 	/**
 	 * Handle node deletion - automatically remove connected edges
 	 */
-	function handleNodesDelete(event: { detail: { nodes: WorkflowNodeType[] } }): void {
-		const deletedNodeIds = new Set(event.detail.nodes.map((node) => node.id));
+	function handleNodesDelete(params: { nodes: WorkflowNodeType[]; edges: WorkflowEdge[] }): void {
+		const deletedNodeIds = new Set(params.nodes.map((node) => node.id));
 
 		// Filter out edges connected to deleted nodes
 		flowEdges = flowEdges.filter(
@@ -329,6 +330,30 @@
 	function checkWorkflowCycles(): boolean {
 		return WorkflowOperationsHelper.checkWorkflowCycles(flowNodes, flowEdges);
 	}
+
+	/**
+	 * Handle drop event and add new node to canvas
+	 * This will be called from the inner DropZone component
+	 */
+	async function handleNodeDrop(
+		nodeTypeData: string,
+		position: { x: number; y: number }
+	): Promise<void> {
+		// Create the node using the helper, passing existing nodes for ID generation
+		const newNode = NodeOperationsHelper.createNodeFromDrop(nodeTypeData, position, flowNodes);
+
+		if (newNode && currentWorkflow) {
+			currentWorkflow = WorkflowOperationsHelper.addNode(currentWorkflow, newNode);
+
+			// Update the global store
+			updateGlobalStore();
+
+			// Wait for DOM update to ensure SvelteFlow updates
+			await tick();
+		} else if (!currentWorkflow) {
+			console.warn('No currentWorkflow available for new node');
+		}
+	}
 </script>
 
 <SvelteFlowProvider>
@@ -336,80 +361,41 @@
 		<!-- Main Editor Area -->
 		<div class="flowdrop-workflow-editor__main">
 			<!-- Flow Canvas -->
-			<div
-				class="flowdrop-canvas"
-				role="application"
-				aria-label="Workflow canvas"
-				ondragover={(e: DragEvent) => {
-					e.preventDefault();
-					e.dataTransfer!.dropEffect = 'copy';
-				}}
-				ondrop={async (e: DragEvent) => {
-					e.preventDefault();
-
-					// Get the data from the drag event
-					const nodeTypeData = e.dataTransfer?.getData('application/json');
-					if (nodeTypeData) {
-						// Get the position relative to the canvas
-						const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-						const position = {
-							x: e.clientX - rect.left,
-							y: e.clientY - rect.top
-						};
-
-						// Create the node using the helper, passing existing nodes for ID generation
-						const newNode = NodeOperationsHelper.createNodeFromDrop(
-							nodeTypeData,
-							position,
-							flowNodes
-						);
-
-						if (newNode && currentWorkflow) {
-							currentWorkflow = WorkflowOperationsHelper.addNode(currentWorkflow, newNode);
-
-							// Update the global store
-							updateGlobalStore();
-
-							// Wait for DOM update to ensure SvelteFlow updates
-							await tick();
-						} else if (!currentWorkflow) {
-							console.warn('No currentWorkflow available for new node');
-						}
-					}
-				}}
-			>
-				<SvelteFlow
-					bind:nodes={flowNodes}
-					bind:edges={flowEdges}
-					{nodeTypes}
-					{defaultEdgeOptions}
-					onconnect={handleConnect}
-					onnodesdelete={handleNodesDelete}
-					minZoom={0.2}
-					maxZoom={3}
-					clickConnect={true}
-					elevateEdgesOnSelect={true}
-					connectionLineType={ConnectionLineType.Bezier}
-					connectionLineComponent={ConnectionLine}
-					snapGrid={[10, 10]}
-					fitView
-				>
-					<Controls />
-					<Background
-						gap={10}
-						bgColor="var(--flowdrop-background-color)"
-						variant={BackgroundVariant.Dots}
-					/>
-					<MiniMap />
-				</SvelteFlow>
-				<!-- Drop Zone Indicator -->
-				{#if flowNodes.length === 0}
-					<CanvasBanner
-						title="Drag components here to start building"
-						description="Use the sidebar to add components to your workflow"
-						iconName="mdi:graph"
-					/>
-				{/if}
+			<div class="flowdrop-canvas">
+				<FlowDropZone ondrop={handleNodeDrop}>
+					<SvelteFlow
+						bind:nodes={flowNodes}
+						bind:edges={flowEdges}
+						{nodeTypes}
+						{defaultEdgeOptions}
+						onconnect={handleConnect}
+						ondelete={handleNodesDelete}
+						minZoom={0.2}
+						maxZoom={3}
+						clickConnect={true}
+						elevateEdgesOnSelect={true}
+						connectionLineType={ConnectionLineType.Bezier}
+						connectionLineComponent={ConnectionLine}
+						snapGrid={[10, 10]}
+						fitView
+					>
+						<Controls />
+						<Background
+							gap={10}
+							bgColor="var(--flowdrop-background-color)"
+							variant={BackgroundVariant.Dots}
+						/>
+						<MiniMap />
+					</SvelteFlow>
+					<!-- Drop Zone Indicator -->
+					{#if flowNodes.length === 0}
+						<CanvasBanner
+							title="Drag components here to start building"
+							description="Use the sidebar to add components to your workflow"
+							iconName="mdi:graph"
+						/>
+					{/if}
+				</FlowDropZone>
 			</div>
 
 			<!-- Status Bar -->

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.13",
+	"version": "0.0.14",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",