refactor(svelte): cleanup components

2023-03-01 11:48:08 +01:00
parent 00515e1f9b
commit 9391b36869
61 changed files with 600 additions and 196 deletions
@@ -0,0 +1,133 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import cc from 'classcat';
+  import { Position, type Connection, type HandleProps } from '@reactflow/system';
+  import { isMouseEvent } from '@reactflow/utils';
+
+  import { handlePointerDown } from './handler';
+  import { useStore } from '$lib/store';
+
+  type $$Props = HandleProps;
+
+  export let id: $$Props['id'] = undefined;
+  export let type: $$Props['type'] = 'source';
+  export let position: $$Props['position'] = Position.Top;
+  export let isConnectable: $$Props['isConnectable'] = true;
+  export let isValidConnection: $$Props['isValidConnection'] = (_: Connection) => true;
+
+  const isTarget = type === 'target';
+  const nodeId = getContext<string>('rf_nodeid');
+  const handleId = id || null;
+
+  const {
+    connectionMode,
+    domNode,
+    nodes,
+    connectionRadius,
+    transform,
+    addEdge,
+    panBy,
+    cancelConnection,
+    updateConnection
+  } = useStore();
+
+  function onConnectExtended(params: Connection) {
+    addEdge(params);
+    // @todo add props
+    // onConnectAction?.(edgeParams);
+    // onConnect?.(edgeParams);
+  }
+
+  function onPointerDown(event: MouseEvent | TouchEvent) {
+    const isMouseTriggered = isMouseEvent(event);
+
+    if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
+      handlePointerDown({
+        event,
+        handleId,
+        nodeId,
+        isTarget,
+        connectionRadius: $connectionRadius,
+        domNode: $domNode,
+        nodes: $nodes,
+        connectionMode: $connectionMode,
+        transform,
+        isValidConnection: isValidConnection!,
+        onConnect: onConnectExtended,
+        updateConnection,
+        cancelConnection,
+        panBy
+      });
+    }
+
+    // if (isMouseTriggered) {
+    //   onMouseDown?.(event);
+    // } else {
+    //   onTouchStart?.(event);
+    // }
+  }
+</script>
+
+<div
+  data-handleid={handleId}
+  data-nodeid={nodeId}
+  data-handlepos={position}
+  data-id={`${nodeId}-${id}-${type}`}
+  class={cc([
+    'react-flow__handle',
+    `react-flow__handle-${position}`,
+    'nodrag',
+    'nopan',
+    position
+  ])}
+  class:source={!isTarget}
+  class:target={isTarget}
+  class:connectable={isConnectable}
+  on:mousedown={onPointerDown}
+  on:touchstart={onPointerDown}
+>
+  <slot />
+</div>
+
+<style>
+  .react-flow__handle {
+    position: absolute;
+    pointer-events: none;
+    min-width: 5px;
+    min-height: 5px;
+    width: 6px;
+    height: 6px;
+    background: #1a192b;
+    border: 1px solid white;
+    border-radius: 100%;
+  }
+
+  .connectable {
+    pointer-events: all;
+    cursor: crosshair;
+  }
+
+  .bottom {
+    top: 100%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .top {
+    left: 50%;
+    top: 0;
+    transform: translate(-50%, -50%);
+  }
+
+  .left {
+    top: 50%;
+    left: 0;
+    transform: translate(-50%, -50%);
+  }
+
+  .right {
+    top: 50%;
+    left: 100%;
+    transform: translate(-50%, -50%);
+  }
+</style>