feat(packages): add svelte version

2023-02-01 09:41:09 +01:00
parent 079e380a31
commit 2af833aee1
30 changed files with 2279 additions and 21 deletions
@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+  import cc from 'classcat';
+	import { type HandleType, Position } from '@reactflow/core';
+
+  export let type: HandleType = 'source';
+  export let position: Position = Position.Top;
+  export let id: string | null = null;
+  export let className: string | null = null;;
+
+  const isTarget = type === 'target';
+  const nodeId = getContext('rf_nodeid');
+</script>
+
+
+<div
+  data-handleid={id}
+  data-nodeid={nodeId}
+  data-handlepos={position}
+  data-id={`${nodeId}-${id}-${type}`}
+  class={cc([
+    'react-flow__handle',
+    `react-flow__handle-${position}`,
+    'nodrag',
+    className,
+    position
+  ])}
+  class:source={!isTarget}
+  class:target={isTarget}
+  >
+  <slot></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%;
+  }
+
+  .bottom {
+    top: auto;
+    left: 50%;
+    bottom: -4px;
+    transform: translate(-50%, 0);
+  }
+
+  .top {
+    left: 50%;
+    top: -4px;
+    transform: translate(-50%, 0);
+  }
+
+  .left {
+    top: 50%;
+    left: -4px;
+    transform: translate(0, -50%);
+  }
+
+  .right {
+    right: -4px;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+</style>
@@ -0,0 +1,29 @@
+<script lang="ts">
+  export let id: string = '1';
+  export let type: string = 'default';
+  export let sourceX: number = 0;
+  export let sourceY: number = 0;
+  export let targetX: number = 0;
+  export let targetY: number = 0;
+
+  const path = `M ${sourceX},${sourceY}L ${targetX},${targetY}`;
+
+</script>
+
+<g
+  class="react-flow__edge"
+  data-id={id}
+>
+  <path
+    d={path}
+    fill="none"
+    class="react-flow__edge-path"
+  />
+</g>
+
+<style>
+  .react-flow__edge-path {
+    stroke: #ccc;
+    stroke-width: 1;
+  }
+</style>
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { onMount, setContext } from 'svelte';
+  import type { XYPosition } from '@reactflow/core';
+
+  import drag  from '$lib/hooks/drag'
+	import { useStore } from '$lib/store';
+	import DefaultNode from './DefaultNode.svelte';
+
+  export let id: string;
+  export let positionAbsolute: XYPosition = { x: 0, y: 0 };
+  export let dragging: boolean = false;
+  export let data: any = {};
+  export let resizeObserver: ResizeObserver | null = null;
+  export let style: any = {};
+
+  let nodeRef: HTMLDivElement;
+
+  const { nodesStore, transformStore, updateNodePositions } = useStore();
+
+  setContext('rf_nodeid', id);
+
+  onMount(() => {
+    resizeObserver?.observe(nodeRef);
+
+    return () => {
+      resizeObserver?.unobserve(nodeRef);
+    }
+  });
+
+</script>
+
+<div
+  use:drag={{ nodeId: id, nodesStore, transformStore, updateNodePositions }}
+  class="react-flow__node"
+  class:dragging={dragging}
+  bind:this={nodeRef}
+  style="transform: translate({positionAbsolute.x}px, {positionAbsolute.y}px);"
+  data-id={id}
+>
+  <svelte:component this={DefaultNode} data={data} />
+</div>
+
+<style>
+  .react-flow__node {
+    padding: 10px;
+    border-radius: 3px;
+    width: var(--node-width);
+    font-size: 12px;
+    color: #222;
+    text-align: center;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #1a192b;
+    background-color: white;
+    position: absolute;
+    cursor: grab; 
+  }
+
+  .dragging {
+    cursor: grabbing;
+  }
+</style>
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Position } from '@reactflow/core';
+  
+  import Handle from '$lib/components/Handle.svelte';
+
+  export let data: any = {};
+  export let isConnectable: boolean = true;
+  export let targetPosition: Position = Position.Top;
+  export let sourcePosition: Position = Position.Bottom;
+</script>
+
+<Handle type="target" position={targetPosition} />
+  {data?.label}
+<Handle type="source" position={sourcePosition} />
+