Fix: disabled seat click for those which are not avaialble

mezh-hq · Apr 1, 2024 · 04fc1e8 · 04fc1e8
1 parent b118a27
commit 04fc1e8
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 7 deletions.
diff --git a/src/components/controls/select/text.tsx b/src/components/controls/select/text.tsx
@@ -93,7 +93,7 @@ const TextSelectControls = () => {
             htmlFor="stk-embrace-offset-marker"
             className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
           >
-            Embrace Offset
+            Embrace Visibility Offset
           </label>
         </div>
       </div>

diff --git a/src/components/workspace/elements/index.tsx b/src/components/workspace/elements/index.tsx
@@ -5,7 +5,7 @@ import { twMerge } from "tailwind-merge";
 import { dataAttributes } from "@/constants";
 import { store } from "@/store";
 import { clearAndSelectElements, deselectElement, selectElement } from "@/store/reducers/editor";
-import { ISTKProps } from "@/types";
+import { ISTKProps, SeatStatus } from "@/types";
 import { Tool } from "../../toolbar/data";
 import {
   ElementType,
@@ -56,6 +56,8 @@ export const Element: React.FC<IElementProps> = ({
   }, [ref, consumer.mode]);
 
   const onClick = (e: any) => {
+    if (type === ElementType.Seat && consumer.mode === "user" && props.status && props.status !== SeatStatus.Available)
+      return;
     const selectedTool = store.getState().toolbar.selectedTool;
     if (selectedTool === Tool.Select && ref.current) {
       const ctrlPressed = e.ctrlKey || e.metaKey;

diff --git a/src/components/workspace/elements/seat.tsx b/src/components/workspace/elements/seat.tsx
@@ -72,6 +72,8 @@ const Seat: React.FC<ISeatProps> = forwardRef(
       });
     };
 
+    status ??= SeatStatus.Available;
+
     return (
       <>
         <circle
@@ -83,11 +85,14 @@ const Seat: React.FC<ISeatProps> = forwardRef(
           onClick={localOnClick}
           {...{ [dataAttributes.category]: category }}
           {...{ [dataAttributes.section]: categoryObject?.section }}
-          {...{ [dataAttributes.status]: status ?? SeatStatus.Available }}
+          {...{ [dataAttributes.status]: status }}
           {...props}
           className={twMerge(
             props.className,
-            "filter hover:brightness-[1.05]",
+            consumer.mode === "designer" && "filter hover:brightness-[1.05]",
+            consumer.mode === "user" &&
+              status === SeatStatus.Available &&
+              "cursor-pointer filter hover:brightness-[1.05]",
             consumer.styles?.elements?.seat?.base?.className
           )}
           style={consumer.styles?.elements?.seat?.base?.properties}

diff --git a/src/components/workspace/elements/text.tsx b/src/components/workspace/elements/text.tsx
@@ -1,13 +1,16 @@
 import { forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
-import { dataAttributes } from "@/constants";
+import { dataAttributes, selectors } from "@/constants";
 import { ISTKProps, IText } from "@/types";
+import { d3Extended, getRelativeClickCoordsWithTransform } from "@/utils";
+import { panAndZoomWithTransition } from "../zoom";
 
 export const textFontSize = 35;
 
 export interface ITextProps extends IText {
   className: string;
   consumer: ISTKProps;
+  onClick: (e: any) => void;
 }
 
 const Text: React.FC<ITextProps> = forwardRef(
@@ -23,10 +26,26 @@ const Text: React.FC<ITextProps> = forwardRef(
       color,
       consumer,
       embraceOffset,
+      onClick,
       ...props
     },
     ref: any
   ) => {
+    const localOnClick = (e) => {
+      onClick(e);
+      if (embraceOffset) {
+        const visibilityOffset = +d3Extended.select(selectors.workspaceGroup).attr(dataAttributes.visibilityOffset);
+        if (visibilityOffset > 0) {
+          const coords = getRelativeClickCoordsWithTransform(e);
+          panAndZoomWithTransition({
+            k: visibilityOffset,
+            x: coords.x - coords.x * visibilityOffset,
+            y: coords.y - coords.y * visibilityOffset
+          });
+        }
+      }
+    };
+
     return (
       <text
         ref={ref}
@@ -39,6 +58,7 @@ const Text: React.FC<ITextProps> = forwardRef(
         stroke={color}
         color={color}
         {...props}
+        onClick={localOnClick}
         className={twMerge(props.className, consumer.styles?.elements?.text?.base?.className)}
         style={consumer.styles?.elements?.text?.base?.properties}
         {...{ [dataAttributes.embraceOffset]: embraceOffset }}

diff --git a/src/stories/user.stories.tsx b/src/stories/user.stories.tsx
@@ -49,7 +49,7 @@ export const Default = {
             x: 610,
             y: 299.03999999999996,
             label: "1",
-            status: "Available",
+            status: "Unavailable",
             category: null
           },
           {
@@ -65,7 +65,7 @@ export const Default = {
             x: 510,
             y: 299.03999999999996,
             label: "3",
-            status: "Available",
+            status: "Locked",
             category: null
           },
           {