fix(svelte): rename on:node:click to on:nodeclick

packages/svelte/README.md

@@ -70,7 +70,7 @@ A basic flow looks like this:
   {nodeTypes}
   fitView
   snapGrid={snapGrid}
-  on:node:click={(event) => console.log('on node click', event)}
+  on:nodeclick={(event) => console.log('on node click', event)}
 >
   <Controls />
   <Background variant={BackgroundVariant.Dots} />

packages/svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/svelte",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
   "keywords": [
     "svelte",

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -46,7 +46,7 @@
     }
 
     const edge = $edges.find((e) => e.id === id);
-    dispatch('edge:click', edge);
+    dispatch('edgeclick', edge);
   }
 </script>
 

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -69,7 +69,7 @@
       addSelectedNodes([id]);
     }
 
-    dispatchEvent('node:click');
+    dispatchEvent('nodeclick');
   }
 </script>
 
@@ -95,9 +95,9 @@
   style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
   {style}
   on:click={onSelectNodeHandler}
-  on:mouseenter={() => dispatchEvent('node:mouseenter')}
+  on:mouseenter={() => dispatchEvent('nodemouseenter')}
-  on:mouseleave={() => dispatchEvent('node:mouseleave')}
+  on:mouseleave={() => dispatchEvent('nodemouseleave')}
-  on:mousemove={() => dispatchEvent('node:mousemove')}
+  on:mousemove={() => dispatchEvent('nodemousemove')}
 >
   <svelte:component
     this={nodeComponent}
@@ -113,9 +113,9 @@
     isConnectable={connectable}
     xPos={positionAbsolute?.x ?? 0}
     yPos={positionAbsolute?.y ?? 0}
-    on:connect:start
+    on:connectstart
     on:connect
-    on:connect:end
+    on:connectend
   />
 </div>
 

packages/svelte/src/lib/components/nodes/DefaultNode.svelte

@@ -10,6 +10,6 @@
   export let sourcePosition: $$Props['sourcePosition'] = Position.Bottom;
 </script>
 
-<Handle type="target" position={targetPosition} on:connect:start on:connect on:connect:end />
+<Handle type="target" position={targetPosition} on:connectstart on:connect on:connectend />
 {data?.label}
-<Handle type="source" position={sourcePosition} on:connect:start on:connect on:connect:end />
+<Handle type="source" position={sourcePosition} on:connectstart on:connect on:connectend />

packages/svelte/src/lib/components/nodes/InputNode.svelte

@@ -10,4 +10,4 @@
 </script>
 
 {data?.label}
-<Handle type="source" position={sourcePosition} on:connect:start on:connect on:connect:end />
+<Handle type="source" position={sourcePosition} on:connectstart on:connect on:connectend />

packages/svelte/src/lib/components/nodes/OutputNode.svelte

@@ -10,4 +10,4 @@
 </script>
 
 {data?.label}
-<Handle type="target" position={targetPosition} on:connect:start on:connect on:connect:end />
+<Handle type="target" position={targetPosition} on:connectstart on:connect on:connectend />

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -17,7 +17,7 @@
           ($elementsSelectable && typeof edge.selectable === 'undefined')
         )}
 
-        <EdgeWrapper {...edge} type={edgeType} {selectable} on:edge:click />
+        <EdgeWrapper {...edge} type={edgeType} {selectable} on:edgeclick />
       {/each}
     </g>
   </svg>

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -66,13 +66,13 @@
       zIndex={node[internalsSymbol]?.z ?? 0}
       dragHandle={node.dragHandle}
       {resizeObserver}
-      on:node:click
+      on:nodeclick
-      on:node:mouseenter
+      on:nodemouseenter
-      on:node:mousemove
+      on:nodemousemove
-      on:node:mouseleave
+      on:nodemouseleave
-      on:connect:start
+      on:connectstart
       on:connect
-      on:connect:end
+      on:connectend
     />
   {/each}
 </div>

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

@@ -63,7 +63,7 @@
   $: hasActiveSelection = $elementsSelectable && (isSelecting || $selectionRectMode === 'user');
 
   function onClick(event: MouseEvent) {
-    dispatch('pane:click', event);
+    dispatch('paneclick', event);
 
     unselectNodesAndEdges();
     selectionRectMode.set(null);
@@ -164,7 +164,7 @@
       return;
     }
 
-    dispatch('pane:contextmenu', event);
+    dispatch('panecontextmenu', event);
   };
 </script>
 

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

@@ -139,19 +139,19 @@
     {panOnScroll}
     {panOnDrag}
   >
-    <Pane on:pane:click {panOnDrag}>
+    <Pane on:paneclick {panOnDrag}>
       <ViewportComponent>
-        <EdgeRenderer on:edge:click />
+        <EdgeRenderer on:edgeclick />
         <ConnectionLine />
         <div class="svelte-flow__edgelabel-renderer" />
         <NodeRenderer
-          on:node:click
+          on:nodeclick
-          on:node:mouseenter
+          on:nodemouseenter
-          on:node:mousemove
+          on:nodemousemove
-          on:node:mouseleave
+          on:nodemouseleave
-          on:connect:start
+          on:connectstart
           on:connect
-          on:connect:end
+          on:connectend
         />
         <NodeSelection />
       </ViewportComponent>

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

@@ -58,14 +58,14 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   onMove?: OnMove;
   onMoveEnd?: OnMoveEnd;
 
-  'on:node:click'?: CustomEvent<Node>;
+  'on:nodeclick'?: CustomEvent<Node>;
-  'on:node:mouseenter'?: CustomEvent<Node>;
+  'on:nodemouseenter'?: CustomEvent<Node>;
-  'on:node:mousemove'?: CustomEvent<Node>;
+  'on:nodemousemove'?: CustomEvent<Node>;
-  'on:node:mouseleave'?: CustomEvent<Node>;
+  'on:nodemouseleave'?: CustomEvent<Node>;
-  'on:edge:click'?: CustomEvent<Edge>;
+  'on:edgeclick'?: CustomEvent<Edge>;
-  'on:connect:start'?: CustomEvent<OnConnectStartParams>;
+  'on:connectstart'?: CustomEvent<OnConnectStartParams>;
   'on:connect'?: CustomEvent<Connection>;
-  'on:connect:end'?: CustomEvent<OnConnectStartParams>;
+  'on:connectend'?: CustomEvent<OnConnectStartParams>;
-  'on:pane:click'?: CustomEvent;
+  'on:paneclick'?: CustomEvent;
-  'on:pane:contextmenu'?: CustomEvent;
+  'on:panecontextmenu'?: CustomEvent;
 };

packages/svelte/src/routes/overview/+page.svelte

@@ -127,15 +127,15 @@
   selectionMode={SelectionMode.Full}
   initialViewport={{ x: 100, y: 100, zoom: 2 }}
   snapGrid={[25, 25]}
-  on:node:click={(event) => console.log('on node click', event)}
+  on:nodeclick={(event) => console.log('on node click', event)}
-  on:node:mouseenter={(event) => console.log('on node enter', event)}
+  on:nodemouseenter={(event) => console.log('on node enter', event)}
-  on:node:mouseleave={(event) => console.log('on node leave', event)}
+  on:nodemouseleave={(event) => console.log('on node leave', event)}
-  on:edge:click={(event) => console.log('edge click', event)}
+  on:edgeclick={(event) => console.log('edge click', event)}
-  on:connect:start={(event) => console.log('on connect start', event)}
+  on:connectstart={(event) => console.log('on connect start', event)}
   on:connect={(event) => console.log('on connect', event)}
-  on:connect:end={(event) => console.log('on connect end', event)}
+  on:connectend={(event) => console.log('on connect end', event)}
-  on:pane:click={(event) => console.log('on pane click', event)}
+  on:paneclick={(event) => console.log('on pane click', event)}
-  on:pane:contextmenu={(event) => {
+  on:panecontextmenu={(event) => {
     event.preventDefault();
     console.log('on pane contextmenu', event);
   }}