Patch: removed seat select outline

mezh-hq · Feb 29, 2024 · 1d24961 · 1d24961
1 parent 2334c6e
commit 1d24961
Showing 1 changed file with 22 additions and 49 deletions.
diff --git a/src/components/workspace/elements/index.tsx b/src/components/workspace/elements/index.tsx
@@ -1,12 +1,11 @@
-import { memo, useEffect, useMemo, useRef } from "react";
+import { memo, useEffect, useRef } from "react";
 import * as d3 from "d3";
 import { isEqual } from "lodash";
 import { twMerge } from "tailwind-merge";
 import { dataAttributes } from "@/constants";
 import { store } from "@/store";
 import { clearAndSelectElements, deselectElement, selectElement } from "@/store/reducers/editor";
 import { STKMode } from "@/types";
-import { d3Extended } from "@/utils";
 import { Tool } from "../../toolbar/data";
 import {
   ElementType,
@@ -23,21 +22,8 @@ export * from "./utils";
 export const Element = ({ type = ElementType.Seat, id, x = 250, y = 250, isSelected = false, options, ...props }) => {
   const ref = useRef<HTMLElement>();
 
-  const node = ref.current && d3.select(ref.current);
-
-  const centerCoords = isSelected && options.mode === STKMode.Designer && node && d3Extended.getNodeCenter(node);
-
   const Element = elements[type];
 
-  const controlRadius = useMemo(() => {
-    if (!node) return 0;
-    switch (type) {
-      case ElementType.Seat:
-        return +node.attr("r") * 6;
-    }
-    return +node.attr("width") * 1.5;
-  }, [node]);
-
   useEffect(() => {
     if (!ref.current || options.mode !== STKMode.Designer) return;
     const node = d3.select(ref.current);
@@ -73,40 +59,27 @@ export const Element = ({ type = ElementType.Seat, id, x = 250, y = 250, isSelec
   };
 
   return (
-    <>
-      {centerCoords &&
-        ![ElementType.Text, ElementType.Shape, ElementType.Image, ElementType.Polyline].includes(type) && (
-          <circle
-            id={`${id}-controls`}
-            cx={centerCoords.x}
-            cy={centerCoords.y}
-            r={controlRadius}
-            className="stroke-2 stroke-blue-200 fill-none pointer-events-none"
-            strokeDasharray="20, 38"
-          />
-        )}
-      <Element
-        id={id}
-        ref={ref}
-        x={x}
-        y={y}
-        {...props}
-        className={twMerge(
-          "fill-current transition-all duration-medium",
-          isSelected
-            ? type === ElementType.Text
-              ? "text-selected"
-              : "element-selected"
-            : type === ElementType.Text
-            ? "text-unselected"
-            : "element-unselected",
-          !props.color && type !== ElementType.Text && "text-white"
-        )}
-        onClick={onClick}
-        options={options}
-        {...{ [dataAttributes.elementType]: type }}
-      />
-    </>
+    <Element
+      id={id}
+      ref={ref}
+      x={x}
+      y={y}
+      {...props}
+      className={twMerge(
+        "fill-current transition-all duration-medium",
+        isSelected
+          ? type === ElementType.Text
+            ? "text-selected"
+            : "element-selected"
+          : type === ElementType.Text
+          ? "text-unselected"
+          : "element-unselected",
+        !props.color && type !== ElementType.Text && "text-white"
+      )}
+      onClick={onClick}
+      options={options}
+      {...{ [dataAttributes.elementType]: type }}
+    />
   );
 };