Feat: added section style overrides

Author: Akalanka47000

src/components/workspace/elements/polyline.tsx

@@ -76,10 +76,18 @@ const Polyline: React.FC<IPolylineProps> = forwardRef(
         style={{
           color: sectionObject?.color ?? color ?? "transparent",
           stroke: sectionObject?.stroke ?? stroke,
-          ...consumer.styles?.elements?.shape?.base?.properties
+          ...consumer.styles?.elements?.shape?.base?.properties,
+          ...(sectionObject && consumer.styles?.elements?.section?.base?.properties),
+          ...(sectionObject?.freeSeating && consumer.styles?.elements?.section?.freeSeating?.properties)
         }}
         {...{ [dataAttributes.section]: section }}
-        className={twMerge(props.className, consumer.styles?.elements?.shape?.base?.className)}
+        className={twMerge(
+          props.className,
+          consumer.styles?.elements?.shape?.base?.className,
+          consumer.mode === "user" && sectionObject && "cursor-pointer filter hover:brightness-[1.05]",
+          sectionObject && consumer.styles?.elements?.section?.base?.className,
+          sectionObject?.freeSeating && consumer.styles?.elements?.section?.freeSeating?.className
+        )}
       />
     );
   }

src/components/workspace/elements/text.tsx

@@ -1,9 +1,7 @@
 import { forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
-import { dataAttributes, selectors } from "@/constants";
+import { dataAttributes } from "@/constants";
 import { ISTKProps, IText } from "@/types";
-import { d3Extended, getRelativeClickCoordsWithTransform } from "@/utils";
-import { panAndZoomToArea } from "../zoom";
 
 export const textFontSize = 35;
 
@@ -34,21 +32,7 @@ const Text: React.FC<ITextProps> = forwardRef(
     },
     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);
-          panAndZoomToArea({
-            k: visibilityOffset,
-            x: coords.x,
-            y: coords.y
-          });
-        }
-      }
-    };
-
+    console.log(color);
     return (
       <text
         ref={ref}
@@ -58,12 +42,14 @@ const Text: React.FC<ITextProps> = forwardRef(
         fontSize={fontSize}
         fontWeight={fontWeight}
         letterSpacing={letterSpacing}
-        stroke={color}
-        color={color}
         {...props}
-        onClick={localOnClick}
-        className={twMerge(props.className, consumer.styles?.elements?.text?.base?.className)}
-        style={consumer.styles?.elements?.text?.base?.properties}
+        onClick={onClick}
+        className={twMerge(
+          props.className,
+          consumer.styles?.elements?.text?.base?.className,
+          consumer.mode === "user" && "pointer-events-none"
+        )}
+        style={{ ...consumer.styles?.elements?.text?.base?.properties, stroke: color, color }}
         {...{ [dataAttributes.embraceOffset]: embraceOffset }}
       >
         {label}

src/components/workspace/index.tsx

@@ -93,17 +93,6 @@ export const Workspace: React.FC<ISTKProps> = (props) => {
               {...elementProps(e)}
             />
           ))}
-          {text.map((e) => (
-            <Element
-              key={e.id}
-              type={ElementType.Text}
-              fontSize={e.fontSize}
-              fontWeight={e.fontWeight}
-              letterSpacing={e.letterSpacing}
-              embraceOffset={e.embraceOffset}
-              {...elementProps(e)}
-            />
-          ))}
           {polylines.map((e) => (
             <Element
               key={e.id}
@@ -125,6 +114,17 @@ export const Workspace: React.FC<ISTKProps> = (props) => {
               {...elementProps(e)}
             />
           ))}
+          {text.map((e) => (
+            <Element
+              key={e.id}
+              type={ElementType.Text}
+              fontSize={e.fontSize}
+              fontWeight={e.fontWeight}
+              letterSpacing={e.letterSpacing}
+              embraceOffset={e.embraceOffset}
+              {...elementProps(e)}
+            />
+          ))}
           {selectedPolylineId && <line id={ids.templine} className="stroke-2 stroke-black fill-white" />}
         </g>
       </svg>

src/types/styles.ts

@@ -71,6 +71,10 @@ export interface IStyles {
       unselected?: IStyle;
       base?: IStyle;
     };
+    section?: {
+      base?: IStyle;
+      freeSeating?: IStyle;
+    };
     image?: {
       selected?: IStyle;
       unselected?: IStyle;