From c69a59e69fcac26d8890d40fabc6254d35d51e65 Mon Sep 17 00:00:00 2001
From: Akalanka Perera <akalankaperera128@gmail.com>
Date: Thu, 29 Feb 2024 13:51:00 +0530
Subject: [PATCH] Feat: added more element style overrides

---
 src/components/workspace/elements/index.tsx | 20 +++++++++++++++++---
 src/components/workspace/index.tsx          | 10 +++++++++-
 src/types/styles.ts                         | 12 ++++++++++--
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/components/workspace/elements/index.tsx b/src/components/workspace/elements/index.tsx
index 4dca21c..e214590 100644
--- a/src/components/workspace/elements/index.tsx
+++ b/src/components/workspace/elements/index.tsx
@@ -1,11 +1,11 @@
-import { memo, useEffect, useRef } from "react";
+import { memo, useEffect, useMemo, 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 { ISTKProps, STKMode } from "@/types";
 import { Tool } from "../../toolbar/data";
 import {
   ElementType,
@@ -24,6 +24,8 @@ export const Element = ({ type = ElementType.Seat, id, x = 250, y = 250, isSelec
 
   const Element = elements[type] as any;
 
+  const styles = (consumer as ISTKProps).styles?.elements;
+
   useEffect(() => {
     if (!ref.current || consumer.mode !== STKMode.Designer) return;
     const node = d3.select(ref.current);
@@ -58,6 +60,17 @@ export const Element = ({ type = ElementType.Seat, id, x = 250, y = 250, isSelec
     }
   };
 
+  const stylemap = useMemo(
+    () => ({
+      [ElementType.Text]: styles?.text,
+      [ElementType.Shape]: styles?.shape,
+      [ElementType.Polyline]: styles?.shape,
+      [ElementType.Image]: styles?.image,
+      [ElementType.Seat]: styles?.seat
+    }),
+    [styles]
+  );
+
   return (
     <Element
       id={id}
@@ -74,7 +87,8 @@ export const Element = ({ type = ElementType.Seat, id, x = 250, y = 250, isSelec
           : type === ElementType.Text
           ? "text-unselected"
           : "element-unselected",
-        !props.color && type !== ElementType.Text && "text-white"
+        !props.color && type !== ElementType.Text && "text-white",
+        isSelected ? stylemap[type]?.selected?.className : stylemap[type]?.unselected?.className
       )}
       onClick={onClick}
       consumer={consumer}
diff --git a/src/components/workspace/index.tsx b/src/components/workspace/index.tsx
index f736d5a..1d4ce4b 100644
--- a/src/components/workspace/index.tsx
+++ b/src/components/workspace/index.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useLayoutEffect } from "react";
 import { useSelector } from "react-redux";
+import { twMerge } from "tailwind-merge";
 import { ids } from "@/constants";
 import { store } from "@/store";
 import { initializeElements, sync } from "@/store/reducers/editor";
@@ -52,7 +53,14 @@ export const Workspace: React.FC<ISTKProps> = (props) => {
   );
 
   return (
-    <div id={ids.workspaceContainer} className="w-full h-full relative border border-b-0 border-black">
+    <div
+      id={ids.workspaceContainer}
+      className={twMerge(
+        "w-full h-full relative border border-b-0 border-black",
+        props.styles?.workspace?.root?.className
+      )}
+      style={props.styles?.workspace?.root?.properties}
+    >
       <svg id={ids.workspace} className="w-full h-full">
         <g>
           {seats.map((e) => (
diff --git a/src/types/styles.ts b/src/types/styles.ts
index af9fc97..c4fea01 100644
--- a/src/types/styles.ts
+++ b/src/types/styles.ts
@@ -29,11 +29,19 @@ export interface IStyles {
     meta?: IStyle;
   };
   elements?: {
-    all?: {
+    booth?: {
       selected?: IStyle;
       unselected?: IStyle;
     };
-    seats?: {
+    seat?: {
+      selected?: IStyle;
+      unselected?: IStyle;
+    };
+    shape?: {
+      selected?: IStyle;
+      unselected?: IStyle;
+    };
+    image?: {
       selected?: IStyle;
       unselected?: IStyle;
     };