seat-editor 1.5.6 → 1.6.0

package/dist/app/layout.d.ts

@@ -3,4 +3,4 @@ import "./globals.css";
 export declare const metadata: Metadata;
 export default function RootLayout({ children, }: Readonly<{
     children: React.ReactNode;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;

package/dist/app/new-board/page.d.ts

@@ -1 +1 @@
-export default function NewBoard(): import("react/jsx-runtime").JSX.Element;
+export default function NewBoard(): import("react").JSX.Element;

package/dist/app/new-board/page.jsx

@@ -1,22 +1,23 @@
 "use client";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { useEffect, useState } from "react";
 import SeatEditor from "../../features/package";
 import { constantData } from "../constant";
 export default function NewBoard() {
     const [initialValue, setInitialValue] = useState([]);
+    const [extraComponents, setExtraComponents] = useState([]);
     const [viewOnly, setViewOnly] = useState(true);
-    console.log("constantData", constantData);
+    console.log("constantData", constantData, initialValue);
     useEffect(() => {
         setInitialValue(constantData);
+        setExtraComponents([{
+                src: "https://d3l3j4e3k9p181.cloudfront.net/dev/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1751350513582817819_download (10).jpg",
+                id: 1747388267450,
+                x: 0,
+                y: 0,
+                shape: "background",
+                width: 100,
+                height: 100,
+            }]);
     }, []);
     return (<>
       <div className="w-full h-screen flex flex-col relative justify-center">
@@ -35,15 +36,18 @@ export default function NewBoard() {
           {viewOnly ? "Edit Mode" : "View Mode"}
         </button>
         <div className="flex-1 h-full">
-          <SeatEditor componentProps={initialValue} viewOnly={viewOnly} mappingKey="properties" onCurrentStateChange={(setState) => {
-            var _a;
+          <SeatEditor componentProps={initialValue} viewOnly={viewOnly} dragOnly mappingKey="properties" onCurrentStateChange={(setState) => {
+            var _a, _b, _c, _d;
             console.log("setState", setState);
-            setInitialValue((_a = setState === null || setState === void 0 ? void 0 : setState.components) !== null && _a !== void 0 ? _a : []);
-        }} extraComponentProps={[]} defaultBackground="#ffffff" 
+            if (((_a = setState === null || setState === void 0 ? void 0 : setState.components) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                setInitialValue((_b = setState === null || setState === void 0 ? void 0 : setState.components) !== null && _b !== void 0 ? _b : []);
+            }
+            if (((_c = setState === null || setState === void 0 ? void 0 : setState.extraComponents) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+                setExtraComponents((_d = setState === null || setState === void 0 ? void 0 : setState.extraComponents) !== null && _d !== void 0 ? _d : []);
+            }
+        }} extraComponentProps={extraComponents} defaultBackground="#ffffff" 
     // dragOnly={true}
-    statusKey="status" action={(action) => __awaiter(this, void 0, void 0, function* () {
-            console.log("action", action);
-        })}/>
+    statusKey="status"/>
           </div>
 
       </div>

package/dist/app/old-board/page.d.ts

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

package/dist/app/only-view/page.d.ts

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

package/dist/app/page.d.ts

@@ -1,2 +1,2 @@
-declare const TableEditor: () => import("react/jsx-runtime").JSX.Element;
+declare const TableEditor: () => import("react").JSX.Element;
 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/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/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/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/joystick/index.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 type JoystickPosition = {
     x: number;
     y: number;
@@ -7,5 +8,5 @@ type JoystickProps = {
     onMove?: (pos: JoystickPosition) => void;
     onEnd?: () => void;
 };
-export declare const Joystick: ({ size, onMove, onEnd, }: JoystickProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Joystick: ({ size, onMove, onEnd, }: JoystickProps) => React.JSX.Element;
 export {};

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

@@ -15,5 +15,5 @@ interface LayersProps {
     onTouchMove?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
     onTouchEnd?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
 }
-declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchEnd, onTouchMove, onTouchStart }: LayersProps) => import("react/jsx-runtime").JSX.Element;
+declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchEnd, onTouchMove, onTouchStart }: LayersProps) => import("react").JSX.Element;
 export default Layers;

package/dist/components/layer/index.jsx

@@ -1,6 +1,13 @@
 "use client";
+import { useRef } from "react";
 import { omit } from "lodash";
 const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode = "edit", style, onTouchEnd, onTouchMove, onTouchStart }) => {
+    const refItemTemp = useRef(null);
+    const handleOnHover = (item) => {
+        if (mode === "edit") {
+            refItemTemp.current = item;
+        }
+    };
     const renderShadowShape = (item) => {
         const { id, x, y, width, height, fill, opacity, rotation, shape, fontColor, text, seatFill, labels, } = item;
         const commonProps = { fill, opacity };
@@ -70,26 +77,37 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
           </g>);
             }
             case "text":
-                return (<g key={id} onClick={() => onClick(item)}>
+                return (<g key={id} onClick={() => {
+                        onClick && onClick(item);
+                    }}>
             <rect x={x} y={y} width={width} height={height} fill="transparent" opacity={opacity}/>
             <text x={x + width / 2} y={y + height / 2} textAnchor="middle" dominantBaseline="middle" fill={fontColor} fontSize={height * 0.6} opacity={opacity}>
               {text}
             </text>
+          </g>);
+            case "ruler":
+                return (<g key={id}>
+            <rect x={x - (window.innerWidth * 3) / 2} y={y} width={window.innerWidth * 3} height={1} fill="black"/>
+            <rect x={x} y={y - (window.innerHeight * 3) / 2} width={1} height={window.innerHeight * 3} fill="black"/>
+
           </g>);
             default:
                 return null;
         }
     };
     const renderShape = (item) => {
-        const { id, x, y, width, height, fill, opacity, rotation, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, label, seatFill, src, } = item;
+        const { id, x, y, width, height, fill, opacity, rotation = 0, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, label, seatFill, src, } = item;
         const commonProps = {
             fill,
             opacity,
             stroke,
             strokeWidth,
             onMouseDown: (e) => {
+                onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e, item || refItemTemp.current);
+            },
+            onMouseEnter: (e) => {
                 // e.stopPropagation();
-                onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e, item);
+                handleOnHover === null || handleOnHover === void 0 ? void 0 : handleOnHover(item);
             },
             onClick: (e) => {
                 // e.stopPropagation();
@@ -126,9 +144,9 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
             <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})`} onClick={(e) => {
+                        return (<text {...omit(commonProps, ["opacity", "stroke", "strokeWidth"])} 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);
+                                onClick && onClick(item);
                             }}>
                   {_ === null || _ === void 0 ? void 0 : _.label}
                 </text>);
@@ -141,7 +159,7 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                         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})`} onClick={(e) => {
                                 e.stopPropagation();
-                                onClick(item);
+                                onClick && onClick(item);
                             }}>
                   {_ === null || _ === void 0 ? void 0 : _.label}
                 </text>);
@@ -177,7 +195,7 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                         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})`} onClick={(e) => {
                                 e.stopPropagation();
-                                onClick(item);
+                                onClick && onClick(item);
                             }}>
                   {_ === null || _ === void 0 ? void 0 : _.label}
                 </text>);
@@ -221,7 +239,7 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
                 return (<g key={id}>
             <rect x={x} y={y} width={width} height={height} fill="transparent" opacity={opacity} onClick={(e) => {
                         e.stopPropagation();
-                        onClick(item);
+                        onClick && 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}
@@ -229,7 +247,9 @@ const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedT
           </g>);
             case "image-table":
             case "background":
-                return (<g key={id} onClick={() => onClick(item)}>
+                return (<g key={id} onClick={() => {
+                        onClick && onClick(item);
+                    }}>
             <image href={src} x={x} y={y} width={width} height={height} transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`} {...commonProps}/>
             {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
                         var _a, _b, _c, _d;

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/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/features/board/index.d.ts

@@ -2,5 +2,5 @@ interface BoardTemplateProps {
     onSelectComponent?: (items: any) => void;
     mappingKey?: string;
 }
-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

@@ -25,6 +25,12 @@ const BoardTemplate = ({ onSelectComponent }) => {
     const activeTool = useAppSelector((state) => state.tool.active);
     const { components: componentsProps, extraComponents: extraComponentsProps, flagChange, } = useAppSelector((state) => state.board);
     const isTouching = useRef(false);
+    useEffect(() => {
+        var _a;
+        if (activeTool !== ((_a = shadowShape[0]) === null || _a === void 0 ? void 0 : _a.shape)) {
+            setShadowShape([]);
+        }
+    }, [activeTool]);
     // const [isDragging, setIsDragging] = useState(false);
     const [resizeDirection, setResizeDirection] = useState(null);
     const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
@@ -82,7 +88,8 @@ const BoardTemplate = ({ onSelectComponent }) => {
             isSyncingFromRedux.current = false;
             return;
         }
-        if (!isEqual(componentsState, componentsProps) && !isEqual(componentsState, [])) {
+        if (!isEqual(componentsState, componentsProps) &&
+            !isEqual(componentsState, [])) {
             debouncedSyncComponents.current(componentsState);
         }
         if (!isEqual(extraComponentsState, extraComponentsProps)) {
@@ -140,7 +147,7 @@ const BoardTemplate = ({ onSelectComponent }) => {
                 const dx = Math.abs(event.clientX - startPos.current.x);
                 const dy = Math.abs(event.clientY - startPos.current.y);
                 if (dx > 1 || dy > 1) {
-                    if (!moveComponent.current) {
+                    if (!moveComponent.current && item) {
                         dispatch({ type: "panel/setSelectedComponent", payload: item });
                         setSelectedComponent(item);
                     }
@@ -157,9 +164,11 @@ const BoardTemplate = ({ onSelectComponent }) => {
                     isDragging.current = true;
                     moveComponent.current = false;
                     setResizeDirection(direction);
-                    dispatch({ type: "panel/setSelectedComponent", payload: item });
-                    dispatch({ type: "panel/setShow", payload: true });
-                    setSelectedComponent(item);
+                    if (item) {
+                        dispatch({ type: "panel/setSelectedComponent", payload: item });
+                        dispatch({ type: "panel/setShow", payload: true });
+                        setSelectedComponent(item);
+                    }
                 }
             };
             // Pasang ke `document` agar global
@@ -231,6 +240,7 @@ const BoardTemplate = ({ onSelectComponent }) => {
             "table-seat-circle",
             "table-seat-square",
             "text",
+            "ruler",
         ].includes(activeTool)) {
             const { x, y } = getSvgCoords(e);
             setShadowShape([createShape(x, y, theme === null || theme === void 0 ? void 0 : theme.primaryColor)]);
@@ -390,7 +400,7 @@ const BoardTemplate = ({ onSelectComponent }) => {
     };
     const handleTouchStart = (e, items, direction) => {
         var _a, _b, _c, _d;
-        if (activeTool === "select" && !direction) {
+        if (activeTool === "select" && !direction && items) {
             // dispatch({ type: "panel/setShow", payload: false });
             // setMoveComponent(true);
             moveComponent.current = true;
@@ -589,6 +599,9 @@ const BoardTemplate = ({ onSelectComponent }) => {
         else if (activeTool === "grab") {
             return "grab";
         }
+        else if (activeTool === "ruler") {
+            return "crosshair";
+        }
     };
     const renderMiniMap = () => {
         return (<MiniMap width={250} height={250}>
@@ -642,8 +655,6 @@ const BoardTemplate = ({ onSelectComponent }) => {
             <Button icon={<ZoomOut />} onClick={handleZoomOut}/>
           </div>
         </div>
-        {moveComponent.current && (<h1>Move Component</h1>)}
-        
         <TransformWrapper ref={transformRef} panning={{ disabled: activeTool === "select" }} 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: 1, disabled: activeTool === "select" }} disablePadding>
           {scale > 1 && (<div className="absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10">
@@ -663,6 +674,7 @@ const BoardTemplate = ({ onSelectComponent }) => {
         }} onMouseLeave={handleMouseLeave} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
             background: backgroundColor,
             display: "block",
+            cursor: activeTool === "ruler" ? "crosshair" : "auto",
         }}>
               <Layers shadowShape={shadowShape} components={[...extraComponentsState, ...componentsState]} style={{
             cursor: getCursorStyle(),
@@ -671,6 +683,30 @@ const BoardTemplate = ({ onSelectComponent }) => {
     onMouseDown={handleMouseDown} 
     // onMouseUp={handleMouseUp}
     onBlur={handleUnSelectComponent} selectedComponent={selectedComponent} activeTool={activeTool} onTouchStart={(e, item, direction) => handleTouchStart(e, item, direction)} onTouchMove={(e) => handleTouchMove(e)} onTouchEnd={handleTouchEnd}/>
+              {activeTool === "ruler" && (<>
+                  <g id="horizontal-ruler">
+                    <rect x="0" y="0" width={window.innerWidth} height="30" fill="#e0e0e0"/>
+                    <g stroke="#888" font-size="10" text-anchor="middle">
+                      {Array.from({ length: window.innerWidth / 50 }, (_, i) => (<g key={i}>
+                            <line x1={i * 50} y1="0" x2={i * 50} y2="10"/>
+                            <text x={i * 50} y="15">
+                              {i * 50}
+                            </text>
+                          </g>))}
+                    </g>
+                  </g>
+                  <g id="vertical-ruler">
+                    <rect x="0" y="0" width="30" height={window.innerHeight} fill="#e0e0e0"/>
+                    <g stroke="#888" font-size="10" text-anchor="middle">
+                      {Array.from({ length: window.innerHeight / 10 }, (_, i) => (<g key={i}>
+                            <line x1="0" y1={i * 50} x2="10" y2={i * 50}/>
+                            <text x="15" y={i * 50}>
+                              {i * 50}
+                            </text>
+                          </g>))}
+                    </g>
+                  </g>
+                </>)}
             </svg>
           </TransformComponent>
         </TransformWrapper>

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;

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

@@ -23,5 +23,5 @@ export interface TableEditorProps {
     dragOnly?: boolean;
     viewOnly?: boolean;
 }
-declare const TableEditor: (props: TableEditorProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableEditor: (props: TableEditorProps) => import("react").JSX.Element;
 export default TableEditor;

package/dist/features/package/index.jsx

@@ -9,8 +9,16 @@ import LayerView from "../view";
 const TableEditor = (props) => {
     const [initialValue, setInitialValue] = useState(null);
     const { componentProps, extraComponentProps, onCurrentStateChange, dragOnly, mappingKey, viewOnly, } = props;
-    const { components, extraComponents } = useAppSelector((state) => state.board);
+    const { components, extraComponents, backgroundColor } = useAppSelector((state) => state.board);
     const dispatch = useAppDispatch();
+    useEffect(() => {
+        if (!viewOnly) {
+            dispatch({
+                type: "panel/setSelectedComponent",
+                payload: null,
+            });
+        }
+    }, [viewOnly]);
     const onUpdateCurrentState = () => {
         let matchInitialValueWithComponents = initialValue === null || initialValue === void 0 ? void 0 : initialValue.map((item) => {
             if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
@@ -35,6 +43,7 @@ const TableEditor = (props) => {
             onCurrentStateChange({
                 components: matchInitialValueWithComponents,
                 extraComponents,
+                background: backgroundColor,
             });
         }
     };
@@ -43,7 +52,7 @@ const TableEditor = (props) => {
             !isEqual(extraComponents, extraComponentProps)) {
             onCurrentStateChange && onUpdateCurrentState();
         }
-    }, [components, extraComponents]);
+    }, [components, extraComponents, backgroundColor]);
     const convertComponentProps = () => {
         let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
             if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {

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

@@ -7,5 +7,5 @@ interface ControlPanelsProps {
         src: string;
     };
 }
-declare const ControlPanels: (props: ControlPanelsProps) => import("react/jsx-runtime").JSX.Element;
+declare const ControlPanels: (props: ControlPanelsProps) => import("react").JSX.Element;
 export default ControlPanels;

package/dist/features/panel/index.jsx

@@ -28,6 +28,7 @@ const ControlPanels = (props) => {
     const [form] = Form.useForm();
     let values = Form.useWatch([], form);
     useEffect(() => {
+        form.resetFields();
         if (selectedComponent) {
             const isDifferentId = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) !== (values === null || values === void 0 ? void 0 : values.id) || !(values === null || values === void 0 ? void 0 : values.id);
             const isSameIdAndSameDimensions = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === (values === null || values === void 0 ? void 0 : values.id) &&
@@ -91,8 +92,12 @@ const ControlPanels = (props) => {
         });
     };
     // if(!show) return null
-    return (<Drawer open={show} onClose={handleClose} title="Panel">
-      <div className="bg-white h-full max-h-screen overflow-y-auto w-full">
+    return (<Drawer open={show} onClose={handleClose} title="Panel" styles={{
+            body: {
+                paddingBottom: 0
+            }
+        }}>
+      <div className="bg-white h-full max-h-screen w-full p-2">
         <Form layout="vertical" form={form} name="table" onFinish={(values) => { }} onValuesChange={handleChangeComponent} initialValues={{ labels: [{}] }}>
           <Form.Item name="id" hidden>
             <Input />

package/dist/features/panel/select-tool.d.ts

@@ -2,5 +2,5 @@ declare const SelectToolForm: ({ title, action, responseMapping }: {
     title?: string;
     action: any;
     responseMapping: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SelectToolForm;

package/dist/features/panel/square-circle-tool.d.ts

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

package/dist/features/panel/table-seat-circle.d.ts

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

package/dist/features/panel/text-tool.d.ts

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

package/dist/features/panel/upload-tool.d.ts

@@ -10,5 +10,5 @@ interface UploadToolProps {
     };
     defaultValue?: any;
 }
-declare const UploadTool: ({ name, type, action, responseMapping, defaultValue, }: UploadToolProps) => import("react/jsx-runtime").JSX.Element;
+declare const UploadTool: ({ name, type, action, responseMapping, defaultValue, }: UploadToolProps) => import("react").JSX.Element;
 export default UploadTool;

package/dist/features/panel/upload-tool.jsx

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { useState, useEffect } from "react";
-import { Upload, message, Image, Button } from "antd";
+import { Upload, Image, Button } from "antd";
 import { InboxOutlined } from "@ant-design/icons";
 import { useAppDispatch } from "../../hooks/use-redux";
 import SectionLabel from "../../components/form-tools/label";
@@ -40,13 +40,13 @@ const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
         id: id || new Date().getTime(),
         x: 0,
         y: 0,
-        width,
-        height,
+        width: width < 1 ? 100 : width,
+        height: height < 1 ? 100 : height,
         rotation: 0,
         shape: name,
         src,
     });
-    const props = {
+    const propsUpload = {
         name: "file",
         multiple: true,
         maxCount: 1,
@@ -61,7 +61,7 @@ const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
                     // ⬇️ IF ada custom action (upload ke server)
                     if (action) {
                         const res = yield action(file);
-                        srcFromResponse = res;
+                        srcFromResponse = URL.createObjectURL(file);
                         img.onload = () => {
                             const scaleX = widthWorkspace / img.width;
                             const scaleY = heightWorkspace / img.height;
@@ -90,10 +90,10 @@ const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
                                 });
                             }
                             dispatch({ type: "board/setFlagChange", payload: true });
-                            message.success(`${info.file.name} uploaded successfully.`);
+                            // message.success(`${info.file.name} uploaded successfully.`);
                         };
                         // Set img src AFTER onload
-                        img.src = srcFromResponse;
+                        img.src = URL.createObjectURL(file);
                     }
                     // ⬇️ IF local upload
                     else {
@@ -125,15 +125,14 @@ const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
                                 });
                             }
                             dispatch({ type: "board/setFlagChange", payload: true });
-                            message.success(`${info.file.name} uploaded successfully.`);
+                            // message.success(`${info.file.name} uploaded successfully.`);
                         };
                         // Set img src AFTER onload
                         img.src = URL.createObjectURL(file);
                     }
                 }
                 catch (e) {
-                    console.error("Upload error:", e);
-                    message.error("Upload failed, please try again.");
+                    // message.error("Upload failed, please try again.");
                 }
             }
         }),
@@ -149,7 +148,7 @@ const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
           <Button type="primary" onClick={handleDelete}>
             Edit
           </Button>
-        </>) : (<Dragger {...props}>
+        </>) : (<Dragger {...propsUpload} action={""}>
           <p className="ant-upload-drag-icon">
             <InboxOutlined />
           </p>

package/dist/features/side-tool/index.d.ts

@@ -1,4 +1,4 @@
 declare const SideTool: ({ dragOnly }: {
     dragOnly?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SideTool;

package/dist/features/side-tool/index.jsx

@@ -1,5 +1,5 @@
 "use client";
-import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers } from "lucide-react";
+import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Ruler } from "lucide-react";
 import ButtonTools from "../../components/button-tools";
 import { Divider, ColorPicker, Button, } from "antd";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
@@ -21,6 +21,11 @@ const SideTool = ({ dragOnly }) => {
             id: "grab",
             name: "Grab Tool",
             icon: <Hand />,
+        },
+        {
+            id: "ruler",
+            name: "Ruler",
+            icon: <Ruler />,
         }
     ];
     const actionsTools = [
@@ -78,7 +83,7 @@ const SideTool = ({ dragOnly }) => {
         // }
     ];
     const hanldeSelectTool = (id) => {
-        if (id === "background" || id === "text" || id === "image-table") {
+        if (id === "background" || id === "image-table") {
             dispatch({
                 type: "panel/setShow",
                 payload: true,

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

@@ -15,5 +15,5 @@ export interface LayerViewProps {
     containerProps?: any;
     svgProps?: any;
 }
-declare const LayerView: (props: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const LayerView: (props: LayerViewProps) => import("react").JSX.Element;
 export default LayerView;

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

@@ -15,5 +15,5 @@ export interface LayerViewProps {
     containerProps?: any;
     svgProps?: any;
 }
-declare const LayerView: (props: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const LayerView: (props: LayerViewProps) => import("react").JSX.Element;
 export default LayerView;