feat(svelte): selection box

2023-02-20 19:01:43 +01:00
parent fe84a5d21a
commit 1f44bc4da5
17 changed files with 501 additions and 154 deletions
@@ -0,0 +1,30 @@
+<script lang="ts">
+  export let x: number | null = 0;
+  export let y: number | null = 0;
+  export let width: number | null = 0;
+  export let height: number | null = 0;
+  export let isVisible: boolean = true;
+</script> 
+
+{#if isVisible}
+  <div
+    class="react-flow__selection"
+    style={`width: ${width}px; height: ${height}px;transform: translate(${x}px, ${y}px)`}
+  />
+{/if}
+
+<style>
+  .react-flow__selection {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: rgba(0, 89, 220, 0.08);
+    border: 1px dotted rgba(0, 89, 220, 0.8);
+    z-index: 6;
+  }
+
+  .react-flow__selection:focus,
+  .react-flow__selection:focus-visible {
+    outline: none;
+  }
+</style>