seat-editor 1.2.6 → 1.2.8

package/dist/app/page.jsx

@@ -0,0 +1,13 @@
+import Board from "../features/board";
+import SideTool from "../features/side-tool";
+import ControlPanels from "../features/panel";
+const TableEditor = () => {
+    return (<>
+      <div className="w-full h-screen flex relative">
+        <SideTool />
+        <Board />
+        <ControlPanels />
+      </div>
+    </>);
+};
+export default TableEditor;

package/dist/components/button-tools/index.d.ts

@@ -7,5 +7,5 @@ interface ButtonToolsProps {
     }>;
     popoverProps?: PopoverProps;
 }
-declare const ButtonTools: (props: ButtonToolsProps) => import("react/jsx-runtime").JSX.Element;
+declare const ButtonTools: (props: ButtonToolsProps) => import("react").JSX.Element;
 export default ButtonTools;

package/dist/components/button-tools/index.jsx

@@ -0,0 +1,17 @@
+"use client";
+import { Button, Popover } from "antd";
+const ButtonTools = (props) => {
+    const { buttonProps, items, popoverProps } = props;
+    if (items.length === 0) {
+        return (<Popover trigger="hover" {...popoverProps}>
+        <Button {...buttonProps}/>
+      </Popover>);
+    }
+    return (<Popover content={<div>
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+        </div>} trigger="click">
+      <Button {...buttonProps}/>
+    </Popover>);
+};
+export default ButtonTools;

package/dist/components/form-tools/label.d.ts

@@ -1,2 +1,2 @@
-declare const SectionLabel: () => import("react/jsx-runtime").JSX.Element;
+declare const SectionLabel: () => import("react").JSX.Element;
 export default SectionLabel;

package/dist/components/form-tools/label.jsx

@@ -0,0 +1,44 @@
+"use client";
+import { Button, ColorPicker, Flex, Form, Input, InputNumber } from "antd";
+const SectionLabel = () => {
+    return (<div className="py-2">
+      <h1 className="heading-s">Section Labeling</h1>
+      <Form.Item label="Labels in square" name={"labels"}>
+        <Form.List name="labels">
+          {(fields, { add, remove }) => (<>
+              {fields.map((field) => (<div key={field.key}>
+                  <Flex gap={2}>
+                    <Form.Item name={[field.name, "label"]} label="Text">
+                      <Input />
+                    </Form.Item>
+                    <Form.Item name={[field.name, "fontColor"]} label="Color" getValueFromEvent={(color) => color.toHexString()}>
+                      <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+                    </Form.Item>
+                  </Flex>
+                  <Flex gap={2}>
+                    <Form.Item name={[field.name, "x"]} label="X">
+                      <InputNumber />
+                    </Form.Item>
+                    <Form.Item name={[field.name, "y"]} label="Y">
+                      <InputNumber />
+                    </Form.Item>
+                    <Form.Item name={[field.name, "fontSize"]} label="Size">
+                      <InputNumber suffix="px"/>
+                    </Form.Item>
+                  </Flex>
+                </div>))}
+              <Flex gap={2}>
+                <Button type="primary" onClick={() => add()} className="btn btn-primary">
+                  Add
+                </Button>
+                <Button type="primary" onClick={() => remove(fields.length - 1)} className="btn btn-primary">
+                  Remove
+                </Button>
+              </Flex>
+            </>)}
+        </Form.List>
+      </Form.Item>
+      <div className="divider-dashed"/>
+    </div>);
+};
+export default SectionLabel;

package/dist/components/form-tools/shape.d.ts

@@ -1,2 +1,2 @@
-declare const SectionShape: () => import("react/jsx-runtime").JSX.Element;
+declare const SectionShape: () => import("react").JSX.Element;
 export default SectionShape;

package/dist/components/form-tools/shape.jsx

@@ -0,0 +1,43 @@
+"use client";
+import { ColorPicker, Flex, Form, InputNumber } from "antd";
+const SectionShape = () => {
+    return (<div className="py-2">
+      <h1 className="heading-s">Shape</h1>
+      <Flex gap={2} className="w-full">
+        <Form.Item label="Width" name="width" className="w-full">
+          <InputNumber suffix="px"/>
+        </Form.Item>
+        <Form.Item label="Height" name="height" className="w-full">
+          <InputNumber suffix="px"/>
+        </Form.Item>
+      </Flex>
+      <Flex gap={2}>
+        <Form.Item label="Position X" name="x" className="w-full">
+          <InputNumber />
+        </Form.Item>
+        <Form.Item label="Position Y" name="y" className="w-full">
+          <InputNumber />
+        </Form.Item>
+        <Form.Item label="Rotation" name="rotation" className="w-full">
+          <InputNumber />
+        </Form.Item>
+      </Flex>
+      <Flex gap={2}>
+        <Form.Item label="Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
+          <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+        </Form.Item>
+        <Form.Item label="Stroke" name={"stroke"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
+          <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+        </Form.Item>
+      </Flex>
+      <Flex>
+        <Form.Item label="Stroke Width" name={"strokeWidth"} className="w-full">
+          <InputNumber />
+        </Form.Item>
+        <Form.Item label="opacity" name={"opacity"} className="w-full">
+          <InputNumber step={0.1} max={1} min={0}/>
+        </Form.Item>
+      </Flex>
+    </div>);
+};
+export default SectionShape;

package/dist/components/input/number-indicator.d.ts

@@ -3,5 +3,5 @@ interface NumberIndicatorProps {
     defaultValue?: number;
     onChange: (value: number) => void;
 }
-declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react").JSX.Element;
 export default NumberIndicator;

package/dist/components/input/number-indicator.jsx

@@ -0,0 +1,36 @@
+"use client";
+import { useState, useEffect } from "react";
+import { Input, Button, Flex, Form } from "antd";
+import { ArrowRight, ArrowLeft } from "lucide-react";
+const NumberIndicator = ({ name, defaultValue, onChange }) => {
+    const [value, setValue] = useState(0);
+    const form = Form.useFormInstance();
+    useEffect(() => {
+        if (defaultValue) {
+            setValue(defaultValue);
+            form.setFieldsValue({ [name]: defaultValue });
+        }
+    }, [defaultValue]);
+    const handlePrev = () => {
+        setValue(value - 1);
+        form.setFieldsValue({ [name]: value - 1 });
+        onChange(value - 1);
+    };
+    const handleNext = () => {
+        setValue(value + 1);
+        form.setFieldsValue({ [name]: value + 1 });
+        onChange(value + 1);
+    };
+    return (<Flex gap={2}>
+      <Button onClick={handlePrev}>
+        <ArrowLeft />
+      </Button>
+      <Form.Item name={name} noStyle>
+      <Input className="flex text-center" type="number" value={value} name={name} onChange={(e) => setValue(parseInt(e.target.value))}/>
+      </Form.Item>
+      <Button onClick={handleNext}>
+        <ArrowRight />
+      </Button>
+    </Flex>);
+};
+export default NumberIndicator;

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

@@ -9,6 +9,8 @@ interface LayersProps {
     onBlur?: () => void;
     selectedTable?: any;
     selectedTableColor?: string;
+    style?: any;
+    mode?: "view" | "edit";
 }
-declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, }: LayersProps) => import("react/jsx-runtime").JSX.Element;
+declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style }: 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, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, }) => {
-    console.log({ components }, "this iss");
+const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode = "edit", style }) => {
     const renderShadowShape = (item) => {
         const { id, x, y, width, height, fill, opacity, rotation, shape, fontColor, text, seatFill, labels, } = item;
         const commonProps = { fill, opacity };
@@ -108,27 +107,33 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
         switch (shape) {
             case "square":
                 return (<>
-            <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})`}/>
+            <rect key={id} x={x} y={y} width={width} height={height} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} style={Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style)} 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})`}>
+                        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})`} onClick={(e) => {
+                                e.stopPropagation();
+                                onClick(item);
+                            }}>
                   {_ === null || _ === void 0 ? void 0 : _.label}
                 </text>);
                     })}
           </>);
             case "circle":
                 return (<>
-            <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")}/>
+            <circle key={id} cx={x + width / 2} cy={y + height / 2} r={width / 2} style={Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style)} 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})`}>
+                        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})`} onClick={(e) => {
+                                e.stopPropagation();
+                                onClick(item);
+                            }}>
                   {_ === null || _ === void 0 ? void 0 : _.label}
                 </text>);
                     })}
           </>);
             case "diamond":
                 return (<>
-            <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}/>
+            <rect key={id} x={x} y={y} width={width} height={height} style={Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style)} 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>
@@ -151,10 +156,13 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                     return { cx, cy };
                 });
                 return (<g key={id} transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`}>
-            <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}/>
+            <circle cx={centerX} style={Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style)} 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})`}>
+                        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})`} onClick={(e) => {
+                                e.stopPropagation();
+                                onClick(item);
+                            }}>
                   {_ === null || _ === void 0 ? void 0 : _.label}
                 </text>);
                     })}
@@ -183,7 +191,7 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                 }));
                 return (<g key={id} transform={`rotate(${rotation}, ${x}, ${y})`}>
             {/* Square Table */}
-            <rect x={x} y={y} width={width} height={height} {...commonProps} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill}/>
+            <rect x={x} y={y} style={Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style)} 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>
@@ -195,7 +203,10 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
             }
             case "text":
                 return (<g key={id}>
-            <rect x={x} y={y} width={width} height={height} fill="transparent" opacity={opacity}/>
+            <rect x={x} y={y} width={width} height={height} fill="transparent" opacity={opacity} onClick={(e) => {
+                        e.stopPropagation();
+                        onClick(item);
+                    }}/>
             <text x={x + width / 2} y={y + height / 2} textAnchor="middle" dominantBaseline="middle" fill={fontColor} fontSize={fontSize !== null && fontSize !== void 0 ? fontSize : height * 0.6} opacity={opacity} {...omit(commonProps, ["fill", "opacity"])}>
               {text}
             </text>

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

@@ -3,6 +3,6 @@ export interface LayerViewProps {
     componentProps: any[];
     extraComponentProps: any[];
 }
-declare const TableEditor: ({ componentProps, extraComponentProps, }: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableEditor: ({ componentProps, extraComponentProps, }: LayerViewProps) => import("react").JSX.Element;
 export default TableEditor;
 export { LayerView };

package/dist/components/lib/index.jsx

@@ -0,0 +1,33 @@
+"use client";
+import { useEffect } from "react";
+import Board from "../../features/board";
+import SideTool from "../../features/side-tool";
+import ControlPanels from "../../features/panel";
+import LayerView from "../../features/view";
+import { useAppDispatch } from "../../hooks/use-redux";
+const TableEditor = ({ componentProps = [], extraComponentProps = [], }) => {
+    const dispatch = useAppDispatch();
+    useEffect(() => {
+        if (componentProps.length > 0) {
+            dispatch({
+                type: "board/setNewComponents",
+                payload: componentProps,
+            });
+        }
+        if (extraComponentProps.length > 0) {
+            dispatch({
+                type: "board/setNewExtraComponent",
+                payload: extraComponentProps,
+            });
+        }
+    }, [componentProps, extraComponentProps]);
+    return (<>
+      <div className="w-full h-screen flex relative">
+        <SideTool />
+        <Board />
+        <ControlPanels />
+      </div>
+    </>);
+};
+export default TableEditor;
+export { LayerView };

package/dist/components/modal-preview/index.d.ts

@@ -1,4 +1,4 @@
 declare const ModalPreview: ({ children }: {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default ModalPreview;

package/dist/components/modal-preview/index.jsx

@@ -0,0 +1,11 @@
+"use client";
+import { Modal } from "antd";
+import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
+const ModalPreview = ({ children }) => {
+    const { isPreview } = useAppSelector((state) => state.tool);
+    const dispatch = useAppDispatch();
+    return (<Modal open={isPreview} onCancel={() => dispatch({ type: "tool/setTooglePreview", payload: false })} width={700} title="Preview Board" centered footer={null}>
+      <div className="flex flex-col p-4 h-[500px]">{children}</div>
+    </Modal>);
+};
+export default ModalPreview;

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

@@ -1,5 +1,5 @@
 interface BoardTemplateProps {
     onSelectComponent?: (items: any) => void;
 }
-declare const BoardTemplate: ({ onSelectComponent }: BoardTemplateProps) => import("react/jsx-runtime").JSX.Element;
+declare const BoardTemplate: ({ onSelectComponent }: BoardTemplateProps) => import("react").JSX.Element;
 export default BoardTemplate;

package/dist/features/board/index.jsx

@@ -0,0 +1,290 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
+import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
+import Layers from "../../components/layer";
+import { throttle } from "lodash";
+import ModalPreview from "../../components/modal-preview";
+import LayerView from "../view";
+const BoardTemplate = ({ onSelectComponent }) => {
+    const dispatch = useAppDispatch();
+    const transformRef = useRef(null);
+    const containerRef = useRef(null);
+    const [widthBoard, setWidthBoard] = useState(0);
+    const [heightBoard, setHeightBoard] = useState(0);
+    const svgRef = useRef(null);
+    const [shadowShape, setShadowShape] = useState([]);
+    const [startPoint, setStartPoint] = useState(null);
+    const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+    const [moveComponent, setMoveComponent] = useState(false);
+    const [scale, setScale] = useState(1);
+    const activeTool = useAppSelector((state) => state.tool.active);
+    const { components, extraComponents } = useAppSelector((state) => state.board);
+    const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    // useEffect(() => {
+    //   const handleKeyDown = (event: KeyboardEvent) => {
+    //     if (event.key === 'Backspace' && selectedComponent) {
+    //         dispatch({
+    //           type:"board/removeComponent",
+    //           payload:selectedComponent
+    //         })
+    //         dispatch({
+    //           type:"panel/setUnSelectedComponent",
+    //         })
+    //     }
+    //   };
+    //   window.addEventListener('keydown', handleKeyDown);
+    //   return () => {
+    //     window.removeEventListener('keydown', handleKeyDown);
+    //   };
+    // }, [selectedComponent]);
+    const handleAddComponent = (shape) => {
+        dispatch({
+            type: activeTool === "text"
+                ? "board/setExtraComponent"
+                : "board/addComponent",
+            payload: Object.assign(Object.assign({}, shape), { fill: "#4A90E2" }),
+        });
+    };
+    const handleUpdateComponent = () => {
+        if (!selectedComponent)
+            return;
+        dispatch({
+            type: "board/updateComponent",
+            payload: Object.assign({}, (typeof selectedComponent === "object" && selectedComponent !== null
+                ? selectedComponent
+                : {})),
+        });
+    };
+    const getSvgCoords = (e) => {
+        var _a;
+        const svg = svgRef.current;
+        const point = svg.createSVGPoint();
+        point.x = e.clientX;
+        point.y = e.clientY;
+        const transformed = point.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+        return { x: transformed.x, y: transformed.y };
+    };
+    const createShape = (x, y, fill) => ({
+        x,
+        y,
+        width: 50,
+        height: 50,
+        shape: activeTool,
+        id: Date.now(),
+        fill,
+        rotation: activeTool === "diamond" ? 45 : 0,
+        seatCount: activeTool === "table-seat-circle" ? 6 : 0,
+        openSpace: activeTool === "table-seat-circle" ? 0 : undefined,
+        seatFill: activeTool === "table-seat-circle" ? "#DADADA" : undefined,
+        text: activeTool === "text" ? "Text" : "",
+        fontColor: activeTool === "text" ? "#DADADA" : undefined,
+    });
+    // console.log({ moveComponent})
+    const handleMouseDown = (e, item) => {
+        // console.log(" mouse down", item);
+        // if (!isEmpty(item)) {
+        //   handleSelectComponent(item);
+        // }
+        if (activeTool === "select") {
+            if (e) {
+                dispatch({ type: "panel/setShow", payload: false });
+                setMoveComponent(true);
+                dispatch({ type: "panel/setSelectedComponent", payload: item });
+                const rectBox = (e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect();
+                setDragOffset({
+                    x: e.clientX - rectBox.left,
+                    y: e.clientY - rectBox.top,
+                });
+                // dispatch({ type: "panel/setShow" , payload: false });
+            }
+        }
+    };
+    const handleMouseUp = () => {
+        if (activeTool === "select") {
+            setMoveComponent(false);
+            dispatch({ type: "panel/setShow", payload: false });
+        }
+    };
+    const handleMouseEnter = () => {
+        if (![
+            "square",
+            "circle",
+            "diamond",
+            "table-seat-circle",
+            "table-seat-square",
+            "text",
+        ].includes(activeTool))
+            return;
+    };
+    const handleMouseLeave = () => {
+        if (![
+            "square",
+            "circle",
+            "diamond",
+            "table-seat-circle",
+            "table-seat-square",
+            "text",
+        ].includes(activeTool))
+            return;
+        setShadowShape([]);
+    };
+    const handleMouseClick = (e) => {
+        if (![
+            "square",
+            "circle",
+            "diamond",
+            "table-seat-circle",
+            "table-seat-square",
+            "text",
+        ].includes(activeTool))
+            return;
+        const { x, y } = getSvgCoords(event);
+        setStartPoint({ x, y });
+        handleAddComponent(createShape(x, y, "#4A90E2"));
+    };
+    const throttledDispatch = useCallback(throttle((component) => {
+        dispatch({
+            type: "board/updateComponent",
+            payload: component,
+        });
+    }, 16), // 16ms ≈ 60fps
+    [dispatch]);
+    const handleMouseMove = (e) => {
+        if ([
+            "square",
+            "circle",
+            "diamond",
+            "table-seat-circle",
+            "table-seat-square",
+            "text",
+        ].includes(activeTool)) {
+            const { x, y } = getSvgCoords(event);
+            setShadowShape([createShape(x, y, "white")]);
+            return;
+        }
+        if (activeTool === "select" &&
+            selectedComponent &&
+            moveComponent &&
+            dragOffset) {
+            const workspaceRect = e.currentTarget.getBoundingClientRect();
+            const newX = e.clientX - workspaceRect.left - dragOffset.x;
+            const newY = e.clientY - workspaceRect.top - dragOffset.y;
+            let newPosition = {
+                x: newX,
+                y: newY,
+            };
+            throttledDispatch(Object.assign(Object.assign({}, (typeof selectedComponent === "object" && selectedComponent !== null
+                ? selectedComponent
+                : {})), { x: newPosition.x, y: newPosition.y }));
+            // dispatch({
+            //   type: "board/updateComponent",
+            //   payload: {
+            //     ...(typeof selectedComponent === "object" &&
+            //     selectedComponent !== null
+            //       ? selectedComponent
+            //       : {}),
+            //     x: newPosition.x,
+            //     y: newPosition.y,
+            //   },
+            // });
+            return;
+        }
+    };
+    // if (activeTool === "table-seat-circle") {
+    //   shape = {
+    //     x: Math.min(x, startPoint.x),
+    //     y: Math.min(y, startPoint.y),
+    //     width: Math.abs(x - startPoint.x),
+    //     height: Math.abs(y - startPoint.y),
+    //     shape: activeTool,
+    //     id: Date.now(),
+    //     fill: "#4A90E2",
+    //     seats: 6,
+    //   };
+    // }
+    // if (activeTool === "text") {
+    //   shape = {
+    //     x: Math.min(x, startPoint.x),
+    //     y: Math.min(y, startPoint.y),
+    //     width: Math.abs(x - startPoint.x),
+    //     height: Math.abs(y - startPoint.y),
+    //     shape: activeTool,
+    //     id: Date.now(),
+    //     fill: "#4A90E2",
+    //     text: "Text",
+    //   };
+    // }
+    // if (activeTool === "select" && selectedComponent) {
+    //   shape = {
+    //     ...selectedComponent,
+    //     x: Math.min(x, startPoint.x),
+    //     y: Math.min(y, startPoint.y),
+    //     width: Math.abs(x - startPoint.x),
+    //     height: Math.abs(y - startPoint.y),
+    //   };
+    //   setSelectedComponent(shape);
+    //   return;
+    // }
+    // }
+    const handleSelectComponent = (items) => {
+        if (activeTool === "select") {
+            // if (isEmpty(items)) {
+            //   dispatch({ type: "panel/setSelectedComponent", payload: null });
+            //   setMoveComponent(false);
+            // } else {
+            onSelectComponent && onSelectComponent(items);
+            dispatch({ type: "panel/setSelectedComponent", payload: items });
+            dispatch({ type: "panel/setShow", payload: true });
+            // }
+        }
+    };
+    useEffect(() => {
+        if (containerRef.current) {
+            setWidthBoard(containerRef.current.offsetWidth);
+            setHeightBoard(containerRef.current.offsetHeight);
+        }
+    });
+    const handleUnSelectComponent = () => {
+        dispatch({ type: "panel/setSelectedComponent", payload: null });
+    };
+    return (<>
+      <ModalPreview>
+        <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
+     maxScale={1000} initialScale={1} pinch={{ step: 1 }} smooth={true} 
+    // doubleClick={{ step: 2, mode: "zoomIn" }}
+    disablePadding>
+          <TransformComponent wrapperStyle={{
+            width: "100%",
+            height: "100%",
+            overflow: "hidden",
+        }} contentStyle={{
+            width: "100%",
+            height: "100%",
+        }}>
+            <svg id="workspace" ref={svgRef} width="100%" height="100%" viewBox={`0 0 ${widthBoard} ${heightBoard}`} className="h-screen" onMouseUp={handleMouseUp} onMouseMove={handleMouseMove} onMouseEnter={handleMouseEnter} onClick={(e) => {
+            e.stopPropagation();
+            handleMouseClick(e);
+        }} onMouseLeave={handleMouseLeave} 
+    // onMouseDown={(e) => {
+    //   e.stopPropagation();
+    // }}
+    // onFocus={(e) => {
+    //   console.log(e.target);
+    // }}
+    xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
+            background: backgroundColor,
+            display: "block",
+        }}>
+              <Layers shadowShape={shadowShape} components={[...extraComponents, ...components]} onClick={handleSelectComponent} onMouseDown={handleMouseDown} onMouseUp={handleMouseUp} onBlur={handleUnSelectComponent} selectedComponent={selectedComponent} activeTool={activeTool}/>
+            </svg>
+          </TransformComponent>
+        </TransformWrapper>
+      </div>
+    </>);
+};
+export default BoardTemplate;

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

@@ -1,2 +1,2 @@
-declare const Navbar: () => import("react/jsx-runtime").JSX.Element;
+declare const Navbar: () => import("react").JSX.Element;
 export default Navbar;