feat: Transform react-flow to vue-jsx

src/components/UserSelection/index.tsx

@@ -0,0 +1,104 @@
+/**
+ * The user selection rectangle gets displayed when a user drags the mouse while pressing shift
+ */
+import { XYPosition } from '../../types';
+import { defineComponent, PropType } from 'vue';
+import store from '../../store';
+
+type UserSelectionProps = {
+  selectionKeyPressed: boolean;
+};
+
+function getMousePosition(event: MouseEvent): XYPosition | void {
+  const reactFlowNode = (event.target as Element).closest('.react-flow');
+  if (!reactFlowNode) {
+    return;
+  }
+
+  const containerBounds = reactFlowNode.getBoundingClientRect();
+
+  return {
+    x: event.clientX - containerBounds.left,
+    y: event.clientY - containerBounds.top
+  };
+}
+
+const SelectionRect = defineComponent({
+  setup() {
+    const pinia = store();
+
+    if (!pinia.userSelectionRect.draw) {
+      return null;
+    }
+
+    return () => (
+      <div
+        class="react-flow__selection"
+        style={{
+          width: pinia.userSelectionRect.width,
+          height: pinia.userSelectionRect.height,
+          transform: `translate(${pinia.userSelectionRect.x}px, ${pinia.userSelectionRect.y}px)`
+        }}
+      />
+    );
+  }
+});
+
+export default defineComponent({
+  components: { SelectionRect },
+  props: {
+    selectionKeyPressed: {
+      type: Boolean as PropType<UserSelectionProps['selectionKeyPressed']>,
+      required: true
+    }
+  },
+  setup(props) {
+    const pinia = store();
+    const renderUserSelectionPane = pinia.selectionActive || props.selectionKeyPressed;
+
+    if (!pinia.elementsSelectable || !renderUserSelectionPane) {
+      return null;
+    }
+
+    const onMouseDown = (event: MouseEvent): void => {
+      const mousePos = getMousePosition(event);
+      if (!mousePos) {
+        return;
+      }
+
+      pinia.setUserSelection(mousePos);
+    };
+
+    const onMouseMove = (event: MouseEvent): void => {
+      if (!props.selectionKeyPressed || !pinia.selectionActive) {
+        return;
+      }
+      const mousePos = getMousePosition(event);
+
+      if (!mousePos) {
+        return;
+      }
+
+      pinia.updateUserSelection(mousePos);
+    };
+
+    const onMouseUp = () => pinia.unsetUserSelection();
+
+    const onMouseLeave = () => {
+      pinia.unsetUserSelection();
+      pinia.unsetNodesSelection();
+    };
+
+    return () => (
+      <div
+        class="react-flow__selectionpane"
+        onMousedown={onMouseDown}
+        onMousemove={onMouseMove}
+        onMouseup={onMouseUp}
+        onMouseleave={onMouseLeave}
+      >
+        <SelectionRect />
+      </div>
+    );
+  }
+});