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

2023-06-28 15:27:49 +02:00
parent ab406f684d
commit a31b19b21f
13 changed files with 47 additions and 47 deletions
@@ -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} />
@@ -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",
@@ -46,7 +46,7 @@
    }

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

@@ -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:mouseleave={() => dispatchEvent('node:mouseleave')}
-  on:mousemove={() => dispatchEvent('node:mousemove')}
+  on:mouseenter={() => dispatchEvent('nodemouseenter')}
+  on:mouseleave={() => dispatchEvent('nodemouseleave')}
+  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>

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

@@ -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:node:mouseenter
-          on:node:mousemove
-          on:node:mouseleave
-          on:connect:start
+          on:nodeclick
+          on:nodemouseenter
+          on:nodemousemove
+          on:nodemouseleave
+          on:connectstart
          on:connect
-          on:connect:end
+          on:connectend
        />
        <NodeSelection />
      </ViewportComponent>
@@ -58,14 +58,14 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
  onMove?: OnMove;
  onMoveEnd?: OnMoveEnd;

-  'on:node:click'?: CustomEvent<Node>;
-  'on:node:mouseenter'?: CustomEvent<Node>;
-  'on:node:mousemove'?: CustomEvent<Node>;
-  'on:node:mouseleave'?: CustomEvent<Node>;
-  'on:edge:click'?: CustomEvent<Edge>;
-  'on:connect:start'?: CustomEvent<OnConnectStartParams>;
+  'on:nodeclick'?: CustomEvent<Node>;
+  'on:nodemouseenter'?: CustomEvent<Node>;
+  'on:nodemousemove'?: CustomEvent<Node>;
+  'on:nodemouseleave'?: CustomEvent<Node>;
+  'on:edgeclick'?: CustomEvent<Edge>;
+  'on:connectstart'?: CustomEvent<OnConnectStartParams>;
  'on:connect'?: CustomEvent<Connection>;
-  'on:connect:end'?: CustomEvent<OnConnectStartParams>;
-  'on:pane:click'?: CustomEvent;
-  'on:pane:contextmenu'?: CustomEvent;
+  'on:connectend'?: CustomEvent<OnConnectStartParams>;
+  'on:paneclick'?: CustomEvent;
+  'on:panecontextmenu'?: CustomEvent;
 };
@@ -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:node:mouseenter={(event) => console.log('on node enter', event)}
-  on:node:mouseleave={(event) => console.log('on node leave', event)}
-  on:edge:click={(event) => console.log('edge click', event)}
-  on:connect:start={(event) => console.log('on connect start', event)}
+  on:nodeclick={(event) => console.log('on node click', event)}
+  on:nodemouseenter={(event) => console.log('on node enter', event)}
+  on:nodemouseleave={(event) => console.log('on node leave', event)}
+  on:edgeclick={(event) => console.log('edge click', 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:pane:click={(event) => console.log('on pane click', event)}
-  on:pane:contextmenu={(event) => {
+  on:connectend={(event) => console.log('on connect end', event)}
+  on:paneclick={(event) => console.log('on pane click', event)}
+  on:panecontextmenu={(event) => {
    event.preventDefault();
    console.log('on pane contextmenu', event);
  }}