feat(svelte): add connectionline and connection functionality

2023-02-27 18:01:18 +01:00
parent 1dd5613482
commit 7a879f3c54
9 changed files with 707 additions and 28 deletions
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import cc from 'classcat';
+
+	import { useStore } from '$lib/store';
+	import type { ConnectionLineProps } from '$lib/types';
+
+  type $$Props = ConnectionLineProps;
+
+  const { connectionPathStore, widthStore, heightStore, connectionStore } = useStore();
+</script>
+
+{#if $connectionPathStore}
+  <svg
+    width={$widthStore}
+    height={$heightStore}
+    class="react-flow__connectionline"
+  >
+    <g class={cc(['react-flow__connection', $connectionStore.status])}>
+      <path d={$connectionPathStore} fill="none" class="react-flow__connection-path" />
+    </g>
+  </svg>
+{/if}
+
+<style>
+  .react-flow__connectionline {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: visible;
+    z-index: 1001;
+  }
+
+  .react-flow__connection {
+    pointer-events: none;
+  }
+
+  .react-flow__edge-path,
+  .react-flow__connection-path {
+    stroke: #b1b1b7;
+    stroke-width: 1;
+    fill: none;
+  }
+</style>