feat(svelte): make selection draggable

2023-02-21 11:35:15 +01:00
parent 1f44bc4da5
commit 6b192d90d5
9 changed files with 30 additions and 19 deletions
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { PanelPosition } from '@reactflow/system';
+  import cc from 'classcat';
+
+  export let position: PanelPosition = 'top-right';
+  export let style: string = '';
+  export { className as class }
+
+  let className: string;
+
+  $: positionClasses = `${position}`.split('-');
+</script>
+
+<div
+  class={cc(['react-flow__panel', className, ...positionClasses])}
+  style={style}
+>
+  <slot />
+</div>
+
+<style>
+  .react-flow__panel {
+    position: absolute;
+    z-index: 5;
+    margin: 15px;
+  }
+
+  .react-flow__panel.top {
+    top: 0;
+  }
+
+  .react-flow__panel.bottom {
+    bottom: 0;
+  }
+
+  .react-flow__panel.left {
+    left: 0;
+  }
+
+  .react-flow__panel.right {
+    right: 0;
+  }
+
+  .react-flow__panel.center {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+</style>