From 269c48ee95cd09b3d66e0cbb483d84bc774158ac Mon Sep 17 00:00:00 2001
From: Akalanka Perera <akalankaperera128@gmail.com>
Date: Sun, 25 Aug 2024 22:53:06 +0530
Subject: [PATCH] Fix: workspace zoom

---
 .../core/{switch/index.tsx => switch.tsx}     |  2 -
 src/components/core/switch/twin-switch.tsx    | 66 -------------------
 src/components/workspace/index.tsx            |  2 +-
 3 files changed, 1 insertion(+), 69 deletions(-)
 rename src/components/core/{switch/index.tsx => switch.tsx} (95%)
 delete mode 100644 src/components/core/switch/twin-switch.tsx

diff --git a/src/components/core/switch/index.tsx b/src/components/core/switch.tsx
similarity index 95%
rename from src/components/core/switch/index.tsx
rename to src/components/core/switch.tsx
index 3ac3e70..d33294c 100644
--- a/src/components/core/switch/index.tsx
+++ b/src/components/core/switch.tsx
@@ -2,8 +2,6 @@ import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { twMerge } from "tailwind-merge";
 
-export { default as TwinSwitch } from "./twin-switch";
-
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
diff --git a/src/components/core/switch/twin-switch.tsx b/src/components/core/switch/twin-switch.tsx
deleted file mode 100644
index 751aec0..0000000
--- a/src/components/core/switch/twin-switch.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { twMerge } from "tailwind-merge";
-
-const padding = "px-4 py-[3px]";
-
-const valueStyles = "z-50 pointer-events-none transition-all duration-medium";
-
-interface ITwinSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
-  values: string[];
-  selectedValue?: string;
-  onChange?: (value: string) => void;
-  handleClassName?: string;
-}
-
-const TwinSwitch = ({ values = [], selectedValue, onChange, handleClassName, ...props }: ITwinSwitchProps) => {
-  const [selected, setSelected] = useState(values[0]);
-  const [handleStyles, setHandleStyles] = useState({});
-
-  const value1Ref = useRef<HTMLSpanElement>();
-  const value2Ref = useRef<HTMLSpanElement>();
-
-  useEffect(() => {
-    if (selectedValue && selectedValue !== selected) toggle();
-  }, [selectedValue]);
-
-  const toggle = () => {
-    const newValue = values.find((value) => value !== selected);
-    setSelected(newValue);
-    setHandleStyles({
-      transform: `translateX(${newValue === values[0] ? 0 : value1Ref.current.offsetWidth}px)`,
-      width: `${newValue === values[0] ? value1Ref.current.offsetWidth : value2Ref.current.offsetWidth}px`,
-      height: value1Ref.current.offsetHeight
-    });
-    onChange?.(newValue);
-  };
-
-  return (
-    <div
-      {...props}
-      onClick={toggle}
-      className={twMerge(
-        "relative flex border border-black/20 rounded-full font-semibold p-1.5 cursor-pointer tracking-wider",
-        props.className
-      )}
-    >
-      <span ref={value1Ref} className={twMerge(padding, valueStyles, selected === values[0] ? "text-white" : "")}>
-        {values[0]}
-      </span>
-      <span ref={value2Ref} className={twMerge(padding, valueStyles, selected === values[1] ? "text-white" : "")}>
-        {values[1]}
-      </span>
-      <div
-        className={twMerge(
-          padding,
-          "!absolute flex justify-center items-center bg-blue-600 splash after:opacity-[0.2] rounded-full transition-all duration-medium",
-          handleClassName
-        )}
-        style={handleStyles}
-      >
-        <span className="opacity-0">{selected}</span>
-      </div>
-    </div>
-  );
-};
-
-export default TwinSwitch;
diff --git a/src/components/workspace/index.tsx b/src/components/workspace/index.tsx
index 3d64802..044dc15 100644
--- a/src/components/workspace/index.tsx
+++ b/src/components/workspace/index.tsx
@@ -58,7 +58,7 @@ export const Workspace: React.FC<ISTKProps> = (props) => {
       style={props.styles?.workspace?.root?.properties}
     >
       <svg id={ids.workspace} className="w-full h-full flex-1" onMouseOver={onWorkspaceHover}>
-        <g {...{ [dataAttributes.visibilityOffset]: "0" }}>
+        <g {...{ [dataAttributes.visibilityOffset]: "0" }} style={{ transformBox: "unset" }}>
           {images.map((e) => (
             <Element
               key={e.id}