Feat: added range selection

Author: Akalanka47000

src/components/core/animated-switcher.tsx

@@ -2,14 +2,13 @@ import { useEffect, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
 interface AnimatedSwitcherProps {
-  key?: string;
   component: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
   duration?: number;
 }
 
-const AnimatedSwitcher = ({ key, component, className, style, duration = 0.3 }: AnimatedSwitcherProps) => {
+const AnimatedSwitcher = ({ component, className, style, duration = 0.3 }: AnimatedSwitcherProps) => {
   const [opacity, setOpacity] = useState(0);
   const [currentComponent, setCurrentComponent] = useState(component);
 
@@ -19,11 +18,10 @@ const AnimatedSwitcher = ({ key, component, className, style, duration = 0.3 }:
       setCurrentComponent(component);
       setOpacity(1);
     }, (duration / 2) * 1000);
-  }, [key]);
+  }, []);
 
   return (
     <div
-      key={key}
       className={twMerge("w-full h-full", className)}
       style={{ ...style, transitionDuration: `${duration / 2}s`, opacity }}
     >

src/components/workspace/elements/index.tsx

@@ -131,6 +131,7 @@ export const Element: React.FC<IElementProps> = ({
       consumer={consumer}
       isSelected={isSelected}
       {...{ [dataAttributes.elementType]: type }}
+      {...{ [dataAttributes.element]: "true" }}
     />
   );
 };

src/components/workspace/zoom.tsx

@@ -81,7 +81,7 @@ const Zoom = (props: Pick<ISTKProps, "mode" | "styles" | "options">) => {
     if (selectedTool == Tool.Pan) {
       selection.call(zoom);
     } else {
-      selection.call(zoom).on("wheel.zoom", (e) => {
+      const zoomSelection = selection.call(zoom).on("wheel.zoom", (e) => {
         e.preventDefault();
         const currentZoom = selection.property("__zoom").k || 1;
         if (e.ctrlKey) {
@@ -91,6 +91,7 @@ const Zoom = (props: Pick<ISTKProps, "mode" | "styles" | "options">) => {
           zoom.translateBy(selection, -(e.deltaX / currentZoom), -(e.deltaY / currentZoom));
         }
       });
+      if (props.mode !== "user") zoomSelection.on("mousedown.zoom", null);
     }
   }, [selectedTool]);
 

src/constants/index.ts

@@ -12,6 +12,7 @@ export const ids = {
   toolbar: "stk-tool-bar",
   workspace: "stk-workspace",
   workspaceContainer: "stk-workspace-container",
+  workspaceSelection: "stk-workspace-selection",
   zoomControls: "stk-zoom-controls",
   panControls: "stk-pan-controls",
   visibilityControls: "stk-visibility-controls",
@@ -24,6 +25,7 @@ export const selectors = {
 };
 
 export const dataAttributes = {
+  element: "data-stk-element",
   elementType: "data-element-type",
   shape: "data-shape",
   category: "data-category",

src/hooks/events/index.ts

@@ -5,6 +5,7 @@ import { default as useDuplicate } from "./duplication";
 import { default as useMove } from "./move";
 import { default as usePolyline } from "./polyline";
 import { default as useSeatSelectionChange } from "./seat-selection";
+import { default as useSelection } from "./selection";
 import { default as useWorkspaceClick } from "./workspace-click";
 import { default as useWorkspaceLoad } from "./workspace-load";
 
@@ -14,6 +15,7 @@ export const useDesignerEvents = (props: ISTKProps) => {
   useDuplicate();
   useMove();
   usePolyline();
+  useSelection();
   useWorkspaceClick();
   useWorkspaceLoad(props);
 };

src/hooks/events/selection.ts

@@ -0,0 +1,113 @@
+import { useLayoutEffect } from "react";
+import { ElementType } from "@/components/workspace/elements";
+import { dataAttributes, ids, selectors } from "@/constants";
+import { default as store } from "@/store";
+import { clearAndSelectElements } from "@/store/reducers/editor";
+import { coordsWithTransform, d3Extended } from "@/utils";
+
+const useSelection = () => {
+  useLayoutEffect(() => {
+    const svg = d3Extended.selectById(ids.workspace);
+    if (svg.node()) {
+      const toolbarWidth = document.getElementById(ids.toolbar)?.clientWidth ?? 0;
+      const operationBarHeight = document.getElementById(ids.operationBar)?.clientHeight ?? 0;
+      const selectionRect = {
+        element: null,
+        currentY: 0,
+        currentX: 0,
+        originX: 0,
+        originY: 0,
+        setElement: function (ele) {
+          this.element = ele;
+        },
+        getNewAttributes: function () {
+          const x = this.currentX < this.originX ? this.currentX : this.originX;
+          const y = this.currentY < this.originY ? this.currentY : this.originY;
+          const width = Math.abs(this.currentX - this.originX);
+          const height = Math.abs(this.currentY - this.originY);
+          return {
+            x: x,
+            y: y,
+            width: width,
+            height: height
+          };
+        },
+        getCurrentAttributes: function () {
+          const transform = d3Extended.zoomTransform(document.querySelector(selectors.workspaceGroup));
+          const { x, y } = coordsWithTransform({ x: +this.element.attr("x"), y: +this.element.attr("y") }, transform);
+          return {
+            x1: x,
+            y1: y,
+            x2: x + Number(this.element.attr("width")) / transform.k,
+            y2: y + Number(this.element.attr("height")) / transform.k
+          };
+        },
+        init: function (newX, newY) {
+          const rectElement = svg
+            .append("rect")
+            .attr("id", ids.workspaceSelection)
+            .attr("rx", 4)
+            .attr("ry", 4)
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", 0)
+            .attr("height", 0)
+            .classed("workspace-selection", true);
+          this.setElement(rectElement);
+          this.originX = newX;
+          this.originY = newY;
+          this.update(newX, newY);
+        },
+        update: function (newX: number, newY: number) {
+          this.currentX = newX - (+this.element?.attr("width") > 2 ? toolbarWidth : 0);
+          this.currentY = newY - (+this.element?.attr("height") > 2 ? operationBarHeight : 0);
+          const attributes = this.getNewAttributes();
+          Object.keys(attributes).forEach((key) => {
+            this.element.attr(key, attributes[key]);
+          });
+        },
+        remove: function () {
+          this.element.remove();
+          this.element = null;
+        }
+      };
+
+      const dragStart = (e) => {
+        const p = d3Extended.pointer(e);
+        selectionRect.init(p[0], p[1]);
+      };
+
+      const dragMove = (e) => {
+        const p = d3Extended.pointer(e);
+        selectionRect.update(p[0], p[1]);
+      };
+
+      const dragEnd = () => {
+        const finalAttributes = selectionRect.getCurrentAttributes();
+        selectionRect.remove();
+        const elements = d3Extended.selectAll(`[${dataAttributes.element}]`);
+        const idsToSelect = [];
+
+        elements.forEach((element) => {
+          const isSeat = element.attr(dataAttributes.elementType) === ElementType.Seat;
+          const x = isSeat ? +element.attr("cx") : +element.attr("x");
+          const y = isSeat ? +element.attr("cy") : +element.attr("y");
+          if (
+            x >= finalAttributes.x1 &&
+            x <= finalAttributes.x2 &&
+            y >= finalAttributes.y1 &&
+            y <= finalAttributes.y2
+          ) {
+            const id = element.attr("id");
+            if (!id?.includes("-label")) idsToSelect.push(id);
+          }
+        });
+        store.dispatch(clearAndSelectElements(idsToSelect));
+      };
+
+      svg.call(d3Extended.drag().on("drag", dragMove).on("start", dragStart).on("end", dragEnd));
+    }
+  }, []);
+};
+
+export default useSelection;

src/styles/index.css

@@ -5,3 +5,17 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+rect.workspace-selection {
+   -webkit-touch-callout: none !important;
+   -webkit-user-select: none !important;
+   -khtml-user-select: none !important;
+   -moz-user-select: none !important;
+   -ms-user-select: none !important;
+   user-select: none !important;
+   stroke: #545454;
+   stroke-width: 2px;
+   stroke-opacity: 1;
+   fill: white;
+   fill-opacity: 0.5;
+}

src/utils/d3.ts

@@ -1,4 +1,4 @@
-import { pointer, select, selectAll, selection, zoom, zoomIdentity, zoomTransform } from "d3";
+import { drag, pointer, select, selectAll, selection, zoom, zoomIdentity, zoomTransform } from "d3";
 
 declare module "d3" {
   interface Selection<GElement extends d3.BaseType, Datum, PElement extends d3.BaseType, PDatum> {
@@ -39,6 +39,7 @@ selection.prototype.forEach = function (callback) {
 };
 
 export const d3Extended = {
+  drag,
   pointer,
   select,
   selectAll,

src/utils/index.ts

@@ -1,4 +1,4 @@
-import { zoomTransform } from "d3";
+import { type ZoomTransform, zoomTransform } from "d3";
 import { ids, selectors } from "@/constants";
 
 export * from "./d3";
@@ -35,7 +35,11 @@ export const getRelativeWorkspaceClickCoords = (e: any) => {
 
 export const getRelativeClickCoordsWithTransform = (e: any) => {
   const coords = getRelativeWorkspaceClickCoords(e);
-  const transform = zoomTransform(document.querySelector(selectors.workspaceGroup));
+  return coordsWithTransform(coords);
+};
+
+export const coordsWithTransform = (coords: { x: number; y: number }, transform?: ZoomTransform) => {
+  transform ??= zoomTransform(document.querySelector(selectors.workspaceGroup));
   return {
     x: (coords.x - transform.x) / transform.k,
     y: (coords.y - transform.y) / transform.k