seat-editor 1.3.20 → 1.4.2

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

@@ -1,6 +1,6 @@
 "use client";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
+import { TransformWrapper, TransformComponent, MiniMap, } from "react-zoom-pan-pinch";
 import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
 import Layers from "../../components/layer";
 import { throttle } from "lodash";
@@ -126,14 +126,16 @@ const BoardTemplate = ({ onSelectComponent }) => {
         fontColor: activeTool === "text" ? "#DADADA" : undefined,
     });
     const handleMouseDown = (e, item, direction) => {
+        console.log("handleMouseDown", e, item, direction);
         if (activeTool === "select" && direction) {
             setResizeDirection(direction);
             setIsDragging(true);
         }
-        if (activeTool === "select") {
+        if (activeTool === "select" && !direction && !moveComponent) {
             if (e) {
                 dispatch({ type: "panel/setShow", payload: false });
                 setMoveComponent(true);
+                setIsDragging(true);
                 // dispatch({ type: "panel/setSelectedComponent", payload: null });
                 // setSelectedComponent(null)
                 const rectBox = (e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect();
@@ -145,7 +147,7 @@ const BoardTemplate = ({ onSelectComponent }) => {
         }
     };
     const handleMouseUp = () => {
-        if (activeTool === "select") {
+        if (activeTool === "select" && selectedComponent) {
             setMoveComponent(false);
             dispatch({ type: "panel/setShow", payload: false });
             dispatch({ type: "panel/setSelectedComponent", payload: null });
@@ -188,7 +190,7 @@ const BoardTemplate = ({ onSelectComponent }) => {
         ].includes(activeTool)) {
             return;
         }
-        const { x, y } = getSvgCoords(event);
+        const { x, y } = getSvgCoords(e);
         setStartPoint({ x, y });
         handleAddComponent(createShape(x, y, theme === null || theme === void 0 ? void 0 : theme.primaryColor));
     };
@@ -212,7 +214,7 @@ const BoardTemplate = ({ onSelectComponent }) => {
             "table-seat-square",
             "text",
         ].includes(activeTool)) {
-            const { x, y } = getSvgCoords(event);
+            const { x, y } = getSvgCoords(e);
             setShadowShape([createShape(x, y, theme === null || theme === void 0 ? void 0 : theme.primaryColor)]);
             return;
         }
@@ -220,8 +222,9 @@ const BoardTemplate = ({ onSelectComponent }) => {
             selectedComponent &&
             moveComponent &&
             dragOffset &&
-            !isTouching.current &&
+            // !isTouching.current &&
             !resizeDirection) {
+            console.log("masukk");
             const workspaceRect = e.currentTarget.getBoundingClientRect();
             const newX = e.clientX - workspaceRect.left - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.x);
             const newY = e.clientY - workspaceRect.top - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.y);
@@ -354,8 +357,10 @@ const BoardTemplate = ({ onSelectComponent }) => {
         }
     };
     const handleSelectComponent = (items) => {
-        if (activeTool === "select" && !isDragging) {
-            setIsDragging(false);
+        if (activeTool === "select") {
+            console.log("handleSelectComponent", items);
+            setIsDragging(true);
+            setMoveComponent(false);
             onSelectComponent && onSelectComponent(items);
             setSelectedComponent(items);
             dispatch({ type: "panel/setSelectedComponent", payload: items });
@@ -427,12 +432,14 @@ const BoardTemplate = ({ onSelectComponent }) => {
             // }
         }
     };
+    const [isMove, setIsMove] = useState(false);
     const handleTouchMove = (e) => {
         if (activeTool === "select" &&
             moveComponent &&
             isTouching.current &&
             !resizeDirection) {
             setIsDragging(true);
+            setIsMove(true);
             const touch = e.touches[0];
             const svg = e.currentTarget.ownerSVGElement;
             if (!svg)
@@ -442,22 +449,26 @@ const BoardTemplate = ({ onSelectComponent }) => {
             pt.y = touch.clientY;
             const cursorpt = pt.matrixTransform(screenCTMRef.current);
             requestAnimationFrame(() => {
-                setComponentsState((prev) => {
-                    return prev.map((component) => {
-                        if (component.id === selectedComponent.id) {
-                            return Object.assign(Object.assign({}, component), { x: cursorpt.x - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.x), y: cursorpt.y - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.y) });
-                        }
-                        return component;
+                if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) != "background") {
+                    setComponentsState((prev) => {
+                        return prev.map((component) => {
+                            if (component.id === selectedComponent.id) {
+                                return Object.assign(Object.assign({}, component), { x: cursorpt.x - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.x), y: cursorpt.y - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.y) });
+                            }
+                            return component;
+                        });
                     });
-                });
-                setExtraComponentsState((prev) => {
-                    return prev.map((component) => {
-                        if (component.id === selectedComponent.id) {
-                            return Object.assign(Object.assign({}, component), { x: cursorpt.x - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.x), y: cursorpt.y - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.y) });
-                        }
-                        return component;
+                }
+                if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) == "background") {
+                    setExtraComponentsState((prev) => {
+                        return prev.map((component) => {
+                            if (component.id === selectedComponent.id) {
+                                return Object.assign(Object.assign({}, component), { x: cursorpt.x - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.x), y: cursorpt.y - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.y) });
+                            }
+                            return component;
+                        });
                     });
-                });
+                }
                 setSelectedComponent(Object.assign(Object.assign({}, selectedComponent), { x: cursorpt.x - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.x), y: cursorpt.y - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.y) }));
             });
             // updateComponentRef({
@@ -565,6 +576,44 @@ const BoardTemplate = ({ onSelectComponent }) => {
             return "grab";
         }
     };
+    const renderMiniMap = () => {
+        return (<MiniMap width={250} height={250}>
+        <div className="w-full h-full">
+          <svg id="workspace" width="100%" height="100%" viewBox={`0 0 ${widthBoard} ${heightBoard}`} className="h-screen w-full" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
+                background: "#f5f5f5",
+                display: "block",
+            }}>
+            <Layers shadowShape={shadowShape} components={[...extraComponentsState, ...componentsState]} activeTool={activeTool} onClick={handleSelectComponent} onMouseDown={handleMouseDown} onMouseUp={handleMouseUp} 
+        // onBlur={handleUnSelectComponent}
+        selectedComponent={selectedComponent} onTouchStart={(e, item, direction) => handleTouchStart(e, item, direction)} onTouchMove={(e) => handleTouchMove(e)} onTouchEnd={handleTouchEnd}/>
+          </svg>
+        </div>
+      </MiniMap>);
+    };
+    const handelZoomIn = () => {
+        var _a;
+        if (activeTool !== "grab") {
+            dispatch({
+                type: "tool/setActiveTool",
+                payload: "grab",
+            });
+        }
+        (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.zoomIn();
+    };
+    const handleZoomOut = () => {
+        var _a;
+        if (activeTool !== "grab") {
+            dispatch({
+                type: "tool/setActiveTool",
+                payload: "grab",
+            });
+        }
+        (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.zoomOut();
+    };
+    // activeTool === "select" &&
+    //     moveComponent &&
+    //     isTouching.current &&
+    //     !resizeDirection
     return (<>
       <ModalPreview>
         <LayerView statusKey="status"/>
@@ -574,12 +623,15 @@ const BoardTemplate = ({ onSelectComponent }) => {
         }} ref={containerRef}>
         <div className="absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10">
           <div className="flex gap-2">
-            <Button icon={<ZoomIn />} onClick={() => { var _a; return (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.zoomIn(); }}/>
-            <Button icon={<ZoomOut />} onClick={() => { var _a; return (_a = transformRef.current) === null || _a === void 0 ? void 0 : _a.zoomOut(); }}/>
+            <Button icon={<ZoomIn />} onClick={handelZoomIn}/>
+            <Button icon={<ZoomOut />} onClick={handleZoomOut}/>
           </div>
         </div>
         <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">
+              {renderMiniMap()}
+            </div>)}
           <TransformComponent wrapperStyle={{
             width: "100%",
             height: "100%",

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 } from "lucide-react";
+import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers } from "lucide-react";
 import ButtonTools from "../../components/button-tools";
 import { Divider, ColorPicker, Button, } from "antd";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
@@ -9,7 +9,7 @@ const SideTool = ({ dragOnly }) => {
     const dispatch = useAppDispatch();
     const { active } = useAppSelector((state) => state.tool);
     const { selectedComponent } = useAppSelector((state) => state.panel);
-    const { components } = useAppSelector((state) => state.board);
+    const { components, extraComponents } = useAppSelector((state) => state.board);
     const [preview, setPreview] = useState(false);
     const tools = [
         {
@@ -123,6 +123,7 @@ const SideTool = ({ dragOnly }) => {
             type: "panel/setSelectedComponent",
             payload: newComponent,
         });
+        dispatch({ type: "board/setFlagChange", payload: true });
     };
     function swapOneStepById(arr, id, direction) {
         const index = arr.findIndex((item) => (item === null || item === void 0 ? void 0 : item.id) === id);
@@ -138,11 +139,38 @@ const SideTool = ({ dragOnly }) => {
         return newArr;
     }
     const handleOverride = () => {
+        if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background") {
+            const setNewExtraComponents = swapOneStepById(extraComponents, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id, "right");
+            dispatch({
+                type: "board/setNewExtraComponents",
+                payload: setNewExtraComponents,
+            });
+            dispatch({ type: "board/setFlagChange", payload: true });
+            return;
+        }
         const newArr = swapOneStepById(components, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id, "right");
         dispatch({
             type: "board/setNewComponents",
             payload: newArr,
         });
+        dispatch({ type: "board/setFlagChange", payload: true });
+    };
+    const handleOverrideLeft = () => {
+        if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background") {
+            const setNewExtraComponents = swapOneStepById(extraComponents, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id, "left");
+            dispatch({
+                type: "board/setNewExtraComponents",
+                payload: setNewExtraComponents,
+            });
+            dispatch({ type: "board/setFlagChange", payload: true });
+            return;
+        }
+        const newArr = swapOneStepById(components, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id, "left");
+        dispatch({
+            type: "board/setNewComponents",
+            payload: newArr,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
     };
     return (<div className="h-full left-0 flex flex-col items-center border-r-2 border-gray-300 bg-white px-2 pt-4">
       {tools === null || tools === void 0 ? void 0 : tools.map((tool) => (<ButtonTools key={tool.id} buttonProps={{
@@ -183,7 +211,17 @@ const SideTool = ({ dragOnly }) => {
                 type: "text",
                 name: "override",
             }} items={[]} popoverProps={{
-                content: <div>Override</div>,
+                content: <div>Override Right</div>,
+                trigger: "hover",
+                placement: "right",
+            }}/>
+          <ButtonTools buttonProps={{
+                onClick: () => handleOverrideLeft(),
+                icon: <Layers />,
+                type: "text",
+                name: "override",
+            }} items={[]} popoverProps={{
+                content: <div>Override Left</div>,
                 trigger: "hover",
                 placement: "right",
             }}/>

package/dist/seat-editor.css

@@ -1 +1 @@
-*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.bottom-2{bottom:.5rem}.bottom-5{bottom:1.25rem}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.z-10{z-index:10}.mb-2{margin-bottom:.5rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.block{display:block}.flex{display:flex}.table{display:table}.hidden{display:none}.h-3{height:.75rem}.h-\[500px\]{height:500px}.h-full{height:100%}.h-screen{height:100vh}.max-h-screen{max-height:100vh}.w-16{width:4rem}.w-3{width:.75rem}.w-\[300px\]{width:300px}.w-full{width:100%}.flex-1{flex:1 1 0%}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-crosshair{cursor:crosshair}.cursor-default{cursor:default}.cursor-move{cursor:move}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.border{border-width:1px}.border-2{border-width:2px}.border-r-2{border-right-width:2px}.border-dashed{border-style:dashed}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1))}.border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.object-cover{-o-object-fit:cover;object-fit:cover}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-bottom:1rem}.pt-4,.py-4{padding-top:1rem}.text-center{text-align:center}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.heading-s{font-size:20px;font-weight:600;line-height:24px;letter-spacing:-.0006em}.text-sm{font-size:12px;font-weight:500;line-height:16px;letter-spacing:0}.divider-dashed{border-top:1px dashed var(--netral-04);width:100%;margin:16px 0}:root{--background:#fff;--foreground:#171717;--primary-color:#181e49;--secondary-color:#f0f2f5;--background-color:#f5f5f5;--success-color:#63cc47;--netral-03:#ededed;--netral-04:#e0e0e0;--netral-05:#c2c2c2;--netral-06:#9e9e9e;--netral-07:#757575;--netral-08:#616161;--netral-09:#404040;--netral-10:#0a0a0a;--danger:#cb3a31;--accent:#ff9800;--info:#3267e3}@media (prefers-color-scheme:dark){:root{--background:#0a0a0a;--foreground:#ededed}}body{color:var(--foreground);background:var(--background);font-family:Arial,Helvetica,sans-serif}.custom-styles .excalidraw{--color-primary:#fcc6d9;--color-primary-darker:#f783ac;--color-primary-darkest:#e64980;--color-primary-light:#f2a9c4}.custom-styles .excalidraw.theme--dark{--color-primary:#d494aa;--color-primary-darker:#d64c7e;--color-primary-darkest:#e86e99;--color-primary-light:#dcbec9}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.ant-drawer-mask{background:none!important}
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.bottom-2{bottom:.5rem}.bottom-5{bottom:1.25rem}.bottom-\[60px\]{bottom:60px}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.z-10{z-index:10}.mb-2{margin-bottom:.5rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.block{display:block}.flex{display:flex}.table{display:table}.hidden{display:none}.h-3{height:.75rem}.h-\[500px\]{height:500px}.h-full{height:100%}.h-screen{height:100vh}.max-h-screen{max-height:100vh}.w-16{width:4rem}.w-3{width:.75rem}.w-\[300px\]{width:300px}.w-full{width:100%}.flex-1{flex:1 1 0%}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-crosshair{cursor:crosshair}.cursor-default{cursor:default}.cursor-move{cursor:move}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.border{border-width:1px}.border-2{border-width:2px}.border-r-2{border-right-width:2px}.border-dashed{border-style:dashed}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity,1))}.border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.object-cover{-o-object-fit:cover;object-fit:cover}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-bottom:1rem}.pt-4,.py-4{padding-top:1rem}.text-center{text-align:center}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.heading-s{font-size:20px;font-weight:600;line-height:24px;letter-spacing:-.0006em}.text-sm{font-size:12px;font-weight:500;line-height:16px;letter-spacing:0}.divider-dashed{border-top:1px dashed var(--netral-04);width:100%;margin:16px 0}:root{--background:#fff;--foreground:#171717;--primary-color:#181e49;--secondary-color:#f0f2f5;--background-color:#f5f5f5;--success-color:#63cc47;--netral-03:#ededed;--netral-04:#e0e0e0;--netral-05:#c2c2c2;--netral-06:#9e9e9e;--netral-07:#757575;--netral-08:#616161;--netral-09:#404040;--netral-10:#0a0a0a;--danger:#cb3a31;--accent:#ff9800;--info:#3267e3}@media (prefers-color-scheme:dark){:root{--background:#0a0a0a;--foreground:#ededed}}body{color:var(--foreground);background:var(--background);font-family:Arial,Helvetica,sans-serif}.custom-styles .excalidraw{--color-primary:#fcc6d9;--color-primary-darker:#f783ac;--color-primary-darkest:#e64980;--color-primary-light:#f2a9c4}.custom-styles .excalidraw.theme--dark{--color-primary:#d494aa;--color-primary-darker:#d64c7e;--color-primary-darkest:#e86e99;--color-primary-light:#dcbec9}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.ant-drawer-mask{background:none!important}

package/package.json

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

package/dist/app/constant.d.ts

@@ -1,23 +0,0 @@
-export declare const constantData: ({
-    id: number;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    rotation: number;
-    shape: string;
-    src: string;
-    color?: undefined;
-    pax?: undefined;
-} | {
-    id: number;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    color: string;
-    pax: string;
-    rotation: number;
-    shape: string;
-    src?: undefined;
-})[];