seat-editor 1.1.8 → 1.2.1

package/dist/app/only-view/page.jsx

@@ -3,7 +3,7 @@ import { dataDummy, dummyImage } from "./constant";
 const OnlyView = () => {
     return (<>
       <div className="w-full h-screen flex relative justify-center items-center">
-        <LayerView componentProps={dataDummy} mappingKey="properties" extraComponentProps={dummyImage}/>
+        <LayerView componentProps={dataDummy} mappingKey="properties" extraComponentProps={dummyImage} statusKey="status"/>
       </div>
     </>);
 };

package/dist/components/layer/index.d.ts

@@ -7,6 +7,8 @@ interface LayersProps {
     onMouseDown?: (e: React.MouseEvent, item: any) => void;
     onMouseUp?: (e: React.MouseEvent) => void;
     onBlur?: () => void;
+    selectedTable?: any;
+    selectedTableColor?: string;
 }
-declare const Layers: ({ shadowShape, components, onClick, selectedComponent, activeTool, onMouseDown, onMouseUp, onBlur, }: LayersProps) => import("react").JSX.Element;
+declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, }: LayersProps) => import("react").JSX.Element;
 export default Layers;

package/dist/components/layer/index.jsx

@@ -1,7 +1,6 @@
 "use client";
 import { omit } from "lodash";
-const Layers = ({ shadowShape, components, onClick, selectedComponent, activeTool, onMouseDown, onMouseUp, onBlur, }) => {
-    console.log({ components });
+const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, }) => {
     const renderShadowShape = (item) => {
         const { id, x, y, width, height, fill, opacity, rotation, shape, fontColor, text, seatFill, labels, } = item;
         const commonProps = { fill, opacity };
@@ -89,13 +88,11 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, activeToo
             onClick: (e) => {
                 e.stopPropagation();
                 onClick(item);
-                console.log("click", item);
             },
             stroke,
             strokeWidth,
             onMouseDown: (e) => {
                 e.stopPropagation();
-                console.log("mouse down", item);
                 onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e, item);
             },
             onMouseUp: (e) => {
@@ -110,7 +107,7 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, activeToo
         switch (shape) {
             case "square":
                 return (<>
-            <rect key={id} x={x} y={y} width={width} height={height} opacity={id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity} {...omit(commonProps, "opacity")} transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`}/>
+            <rect key={id} x={x} y={y} width={width} height={height} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} opacity={id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity} {...omit(commonProps, "opacity")} transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`}/>
             {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
                         var _a, _b, _c, _d;
                         return (<text key={`${id}-label-${index}`} x={x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0)} fill={(_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black"} fontSize={`${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle" transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`}>
@@ -120,7 +117,7 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, activeToo
           </>);
             case "circle":
                 return (<>
-            <circle key={id} cx={x + width / 2} cy={y + height / 2} r={width / 2} opacity={id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity} {...omit(commonProps, "opacity")}/>
+            <circle key={id} cx={x + width / 2} cy={y + height / 2} r={width / 2} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} opacity={id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity} {...omit(commonProps, "opacity")}/>
             {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
                         var _a, _b, _c, _d;
                         return (<text key={`${id}-label-${index}`} x={x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0)} fill={(_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black"} fontSize={`${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle" transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`}>
@@ -130,7 +127,7 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, activeToo
           </>);
             case "diamond":
                 return (<>
-            <rect key={id} x={x} y={y} width={width} height={height} transform={`rotate(${rotation}, ${x}, ${y})`} {...commonProps}/>
+            <rect key={id} x={x} y={y} width={width} height={height} transform={`rotate(${rotation}, ${x}, ${y})`} {...commonProps} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill}/>
             <text x={x + width / 2} y={y + height / 2} fill={fontColor !== null && fontColor !== void 0 ? fontColor : "black"} fontSize={`${fontSize !== null && fontSize !== void 0 ? fontSize : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
               {label}
             </text>
@@ -153,7 +150,7 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, activeToo
                     return { cx, cy };
                 });
                 return (<g key={id} transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`}>
-            <circle cx={centerX} cy={centerY} r={width - 15} {...commonProps} opacity={id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity}/>
+            <circle cx={centerX} cy={centerY} r={width - 15} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} {...commonProps} opacity={id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity}/>
             {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
                         var _a, _b, _c, _d;
                         return (<text key={`${id}-label-${index}`} x={x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0)} fill={(_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black"} fontSize={`${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle" transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`}>
@@ -185,7 +182,7 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, activeToo
                 }));
                 return (<g key={id} transform={`rotate(${rotation}, ${x}, ${y})`}>
             {/* Square Table */}
-            <rect x={x} y={y} width={width} height={height} {...commonProps}/>
+            <rect x={x} y={y} width={width} height={height} {...commonProps} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill}/>
             <text x={x + width / 2} y={y + height / 2} fill={fontColor !== null && fontColor !== void 0 ? fontColor : "black"} fontSize={`${fontSize !== null && fontSize !== void 0 ? fontSize : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
               {label}
             </text>

package/dist/features/board/index.jsx

@@ -251,7 +251,7 @@ const BoardTemplate = ({ onSelectComponent }) => {
     };
     return (<>
       <ModalPreview>
-        <LayerView />
+        <LayerView statusKey="status"/>
       </ModalPreview>
       <div className="relative w-full h-screen flex-1" ref={containerRef}>
         <TransformWrapper ref={transformRef} panning={{ disabled: false }} centerZoomedOut={true} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} // sangat kecil = bisa zoom out jauh

package/dist/features/package/index.d.ts

@@ -3,6 +3,15 @@ export interface TableEditorProps {
     extraComponentProps: any[];
     onCurrentStateChange: (state: any) => void;
     onSelectComponent: (component: any) => void;
+    mappingKey?: string;
+    selectedTableColor?: string;
+    colorMatchKey?: [
+        {
+            color: string;
+            key: string;
+        }
+    ];
+    statusKey: string;
 }
 declare const TableEditor: (props: TableEditorProps) => import("react").JSX.Element;
 export default TableEditor;

package/dist/features/view/index.d.ts

@@ -4,6 +4,14 @@ export interface LayerViewProps {
     onCurrentStateChange?: (state: any) => void;
     onSelectComponent?: (component: any) => void;
     mappingKey?: string;
+    selectedTableColor?: string;
+    colorMatchKey?: [
+        {
+            color: string;
+            key: string;
+        }
+    ];
+    statusKey: string;
 }
 declare const LayerView: (props: LayerViewProps) => import("react").JSX.Element;
 export default LayerView;

package/dist/features/view/index.jsx

@@ -5,13 +5,12 @@ import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import Layers from "../../components/layer";
 const LayerView = (props) => {
-    const { componentProps = [], extraComponentProps = [], onSelectComponent, onCurrentStateChange, mappingKey, } = props;
-    console.log({ extraComponentProps });
+    const { componentProps = [], extraComponentProps = [], onSelectComponent, onCurrentStateChange, mappingKey, selectedTableColor, colorMatchKey, statusKey } = props;
     const transformRef = useRef(null);
     const containerRef = useRef(null);
-    console.log({ mappingKey });
     const svgRef = useRef(null);
     const [scale, setScale] = useState(1);
+    const [selectedTable, setSelectedTable] = useState(null);
     const { components: componentsEditor, extraComponents: extraComponentsEditor, } = useAppSelector((state) => state.board);
     const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
     const dispatch = useAppDispatch();
@@ -37,7 +36,14 @@ const LayerView = (props) => {
             });
     }, [componentsEditor, extraComponentsEditor]);
     const handleSelectComponent = (items) => {
-        onSelectComponent(items);
+        const find = componentsEditor.find((item) => {
+            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
+                return item[mappingKey].id === (items === null || items === void 0 ? void 0 : items.id);
+            }
+            return (item === null || item === void 0 ? void 0 : item.id) === (items === null || items === void 0 ? void 0 : items.id);
+        });
+        onSelectComponent && onSelectComponent(find);
+        setSelectedTable(find);
     };
     const boundingBox = useMemo(() => {
         if (!componentsEditor || (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
@@ -94,17 +100,24 @@ const LayerView = (props) => {
         };
     }, [componentsEditor, extraComponentsEditor]);
     let elementEditor = [...extraComponentsEditor, ...componentsEditor];
-    console.log({ elementEditor });
-    function renderElements(elementEditor, mappingKey) {
+    const renderElements = (elementEditor, mappingKey, colorMatchKey) => {
         return elementEditor.map((editorItem, i) => {
             const isUsingMapping = mappingKey &&
                 typeof editorItem[mappingKey] === "object" &&
                 editorItem[mappingKey] !== null;
             const finalProps = isUsingMapping ? editorItem[mappingKey] : editorItem;
-            // Contoh return JSX, bisa diganti sesuai kebutuhan
+            if (colorMatchKey) {
+                return finalProps.map((item) => {
+                    const match = colorMatchKey === null || colorMatchKey === void 0 ? void 0 : colorMatchKey.find((key) => key.id === (item === null || item === void 0 ? void 0 : item[statusKey]));
+                    if (match) {
+                        return Object.assign(Object.assign({}, item), { properties: Object.assign(Object.assign({}, item.properties), { fill: match.color }) });
+                    }
+                    return item;
+                });
+            }
             return finalProps;
         });
-    }
+    };
     return (<div className="relative w-full h-full flex-1" ref={containerRef}>
       <TransformWrapper ref={transformRef} panning={{ disabled: false }} centerZoomedOut={true} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} maxScale={1000} initialScale={1} pinch={{ step: 1 }} smooth={true} disablePadding>
         <TransformComponent wrapperStyle={{
@@ -119,7 +132,7 @@ const LayerView = (props) => {
             background: backgroundColor,
             display: "block",
         }}>
-            <Layers components={renderElements(elementEditor, mappingKey)} onClick={handleSelectComponent}/>
+            <Layers components={renderElements(elementEditor, mappingKey, colorMatchKey)} onClick={handleSelectComponent} selectedTable={selectedTable} selectedTableColor={selectedTableColor}/>
           </svg>
         </TransformComponent>
       </TransformWrapper>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seat-editor",
-  "version": "1.1.8",
+  "version": "1.2.1",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",