seat-editor 1.6.25 → 1.6.27

package/dist/app/page.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import Board from "../features/board";
+import Board from "../features/board-v2";
 import SideTool from "../features/side-tool";
 import ControlPanels from "../features/panel";
 const TableEditor = () => {

package/dist/app/page.jsx

@@ -1,4 +1,4 @@
-import Board from "../features/board";
+import Board from "../features/board-v2";
 import SideTool from "../features/side-tool";
 import ControlPanels from "../features/panel";
 const TableEditor = () => {

package/dist/features/board-v2/index.js

@@ -139,6 +139,7 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
         seatFill: activeTool === "table-seat-circle" ? "#DADADA" : undefined,
         text: activeTool === "text" ? "Text" : "",
         fontColor: activeTool === "text" ? "#DADADA" : undefined,
+        points: [],
     });
     const getCoords = (e) => {
         const svgRect = svgRef.current.getBoundingClientRect();
@@ -746,7 +747,35 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
     //     moveComponent &&
     //     isTouching.current &&
     //     !resizeDirection
-    return (_jsxs(_Fragment, { children: [_jsx(ModalPreview, { children: _jsx(LayerView, { statusKey: "status" }) }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn }), _jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut })] }) }), _jsxs(TransformWrapper, { ref: transformRef, panning: { disabled: ["node", "select"].includes(activeTool) }, centerZoomedOut: true, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, pinch: { step: 1 }, smooth: true, doubleClick: { step: 1, disabled: activeTool === "select" }, disablePadding: true, children: [scale > 1 && (_jsx("div", { className: "absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10", children: renderMiniMap() })), _jsx(TransformComponent, { wrapperStyle: {
+    const [nodes, setNodes] = useState([
+        { x: 80, y: 40 },
+        { x: 220, y: 40 },
+        { x: 260, y: 160 },
+        { x: 40, y: 160 },
+    ]);
+    const addNode = () => {
+        if (nodes.length < 30) {
+            const midIndex = Math.floor(nodes.length / 2);
+            const prev = nodes[midIndex - 1];
+            const curr = nodes[midIndex];
+            const newNode = {
+                x: (prev.x + curr.x) / 2,
+                y: (prev.y + curr.y) / 2,
+            };
+            const newNodes = [...nodes];
+            newNodes.splice(midIndex, 0, newNode);
+            setNodes(newNodes);
+        }
+    };
+    const removeNode = () => {
+        if (nodes.length > 3) {
+            const midIndex = Math.floor(nodes.length / 2);
+            const newNodes = [...nodes];
+            newNodes.splice(midIndex, 1);
+            setNodes(newNodes);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(ModalPreview, { children: _jsx(LayerView, { statusKey: "status" }) }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn }), _jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut }), _jsx(Button, { onClick: addNode, children: "Add Node" }), _jsx(Button, { onClick: removeNode, children: "Remove Node" })] }) }), _jsxs(TransformWrapper, { ref: transformRef, panning: { disabled: ["node", "select"].includes(activeTool) }, centerZoomedOut: true, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, pinch: { step: 1 }, smooth: true, doubleClick: { step: 1, disabled: activeTool === "select" }, disablePadding: true, children: [scale > 1 && (_jsx("div", { className: "absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10", children: renderMiniMap() })), _jsx(TransformComponent, { wrapperStyle: {
                                     width: "100%",
                                     height: "100%",
                                     overflow: "hidden",
@@ -773,6 +802,6 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
                                             onMouseDown: handleMouseDown, 
                                             // onMouseUp={handleMouseUp}
                                             // onBlur={handleUnSelectComponent}
-                                            selectedComponent: selectedComponent, activeTool: activeTool, onTouchStart: handleMouseDown }), activeTool === "ruler" && (_jsxs(_Fragment, { children: [_jsxs("g", { id: "horizontal-ruler", children: [_jsx("rect", { x: "0", y: "0", width: window.innerWidth, height: "30", fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerWidth / 50 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: i * 50, y1: "0", x2: i * 50, y2: "10" }), _jsx("text", { x: i * 50, y: "15", children: i * 50 })] }, i))) })] }), _jsxs("g", { id: "vertical-ruler", children: [_jsx("rect", { x: "0", y: "0", width: "30", height: window.innerHeight, fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerHeight / 10 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: "0", y1: i * 50, x2: "10", y2: i * 50 }), _jsx("text", { x: "15", y: i * 50, children: i * 50 })] }, i))) })] })] })), grid && (_jsxs("g", { stroke: "#ddd", strokeWidth: 0.5, children: [Array.from({ length: widthBoard / 10 }, (_, i) => (_jsx("line", { x1: i * 10, y1: 0, x2: i * 10, y2: heightBoard }, `v-${i}`))), Array.from({ length: heightBoard / 10 }, (_, i) => (_jsx("line", { x1: 0, y1: i * 10, x2: widthBoard, y2: i * 10 }, `h-${i}`)))] }))] }) })] })] })] }));
+                                            selectedComponent: selectedComponent, activeTool: activeTool, onTouchStart: handleMouseDown }), _jsx("polygon", { points: nodes.map(n => `${n.x},${n.y}`).join(" "), fill: "lightblue", stroke: "black" }), nodes.map((node, index) => (_jsx("circle", { cx: node.x, cy: node.y, r: 5, fill: "red" }, index))), activeTool === "ruler" && (_jsxs(_Fragment, { children: [_jsxs("g", { id: "horizontal-ruler", children: [_jsx("rect", { x: "0", y: "0", width: window.innerWidth, height: "30", fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerWidth / 50 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: i * 50, y1: "0", x2: i * 50, y2: "10" }), _jsx("text", { x: i * 50, y: "15", children: i * 50 })] }, i))) })] }), _jsxs("g", { id: "vertical-ruler", children: [_jsx("rect", { x: "0", y: "0", width: "30", height: window.innerHeight, fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerHeight / 10 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: "0", y1: i * 50, x2: "10", y2: i * 50 }), _jsx("text", { x: "15", y: i * 50, children: i * 50 })] }, i))) })] })] })), grid && (_jsxs("g", { stroke: "#ddd", strokeWidth: 0.5, children: [Array.from({ length: widthBoard / 10 }, (_, i) => (_jsx("line", { x1: i * 10, y1: 0, x2: i * 10, y2: heightBoard }, `v-${i}`))), Array.from({ length: heightBoard / 10 }, (_, i) => (_jsx("line", { x1: 0, y1: i * 10, x2: widthBoard, y2: i * 10 }, `h-${i}`)))] }))] }) })] })] })] }));
 };
 export default BoardTemplate;

package/dist/features/board-v2/index.jsx

@@ -138,6 +138,7 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
         seatFill: activeTool === "table-seat-circle" ? "#DADADA" : undefined,
         text: activeTool === "text" ? "Text" : "",
         fontColor: activeTool === "text" ? "#DADADA" : undefined,
+        points: [],
     });
     const getCoords = (e) => {
         const svgRect = svgRef.current.getBoundingClientRect();
@@ -751,6 +752,34 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
     //     moveComponent &&
     //     isTouching.current &&
     //     !resizeDirection
+    const [nodes, setNodes] = useState([
+        { x: 80, y: 40 },
+        { x: 220, y: 40 },
+        { x: 260, y: 160 },
+        { x: 40, y: 160 },
+    ]);
+    const addNode = () => {
+        if (nodes.length < 30) {
+            const midIndex = Math.floor(nodes.length / 2);
+            const prev = nodes[midIndex - 1];
+            const curr = nodes[midIndex];
+            const newNode = {
+                x: (prev.x + curr.x) / 2,
+                y: (prev.y + curr.y) / 2,
+            };
+            const newNodes = [...nodes];
+            newNodes.splice(midIndex, 0, newNode);
+            setNodes(newNodes);
+        }
+    };
+    const removeNode = () => {
+        if (nodes.length > 3) {
+            const midIndex = Math.floor(nodes.length / 2);
+            const newNodes = [...nodes];
+            newNodes.splice(midIndex, 1);
+            setNodes(newNodes);
+        }
+    };
     return (<>
       <ModalPreview>
         <LayerView statusKey="status"/>
@@ -760,6 +789,8 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
           <div className="flex gap-2">
             <Button icon={<ZoomIn />} onClick={handelZoomIn}/>
             <Button icon={<ZoomOut />} onClick={handleZoomOut}/>
+            <Button onClick={addNode}>Add Node</Button>
+            <Button onClick={removeNode}>Remove Node</Button>
           </div>
         </div>
         <TransformWrapper ref={transformRef} panning={{ disabled: ["node", "select"].includes(activeTool) }} centerZoomedOut={true} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} // sangat kecil = bisa zoom out jauh
@@ -797,6 +828,9 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
     // onMouseUp={handleMouseUp}
     // onBlur={handleUnSelectComponent}
     selectedComponent={selectedComponent} activeTool={activeTool} onTouchStart={handleMouseDown}/>
+               <polygon points={nodes.map(n => `${n.x},${n.y}`).join(" ")} fill="lightblue" stroke="black"/>
+        {/* Nodes */}
+        {nodes.map((node, index) => (<circle key={index} cx={node.x} cy={node.y} r={5} fill="red"/>))}
               {activeTool === "ruler" && (<>
                   <g id="horizontal-ruler">
                     <rect x="0" y="0" width={window.innerWidth} height="30" fill="#e0e0e0"/>

package/dist/features/view/index.js

@@ -77,7 +77,7 @@ const LayerView = (props) => {
         if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
             return { minX: 0, minY: 0, width: 500, height: 500 };
         }
-        let minX = 1000, minY = 1000, maxX = -1000, maxY = -1000;
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
         componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.forEach((_) => {
             var _a, _b, _c, _d;
             const hasMappingKey = mappingKey && _[mappingKey];

package/dist/features/view/index.jsx

@@ -76,7 +76,7 @@ const LayerView = (props) => {
         if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
             return { minX: 0, minY: 0, width: 500, height: 500 };
         }
-        let minX = 1000, minY = 1000, maxX = -1000, maxY = -1000;
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
         componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.forEach((_) => {
             var _a, _b, _c, _d;
             const hasMappingKey = mappingKey && _[mappingKey];

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

@@ -0,0 +1,19 @@
+export interface LayerViewProps {
+    componentProps?: any[];
+    extraComponentProps?: any[];
+    onCurrentStateChange?: (state: any) => void;
+    onSelectComponent?: (component: any) => void;
+    mappingKey?: string;
+    selectedTableColor?: string;
+    colorMatchKey?: {
+        color: string;
+        key: string;
+    }[];
+    statusKey: string;
+    defaultBackground?: string;
+    transformProps?: any;
+    containerProps?: any;
+    svgProps?: any;
+}
+declare const LayerView: (props: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
+export default LayerView;

package/dist/features/view-only-2/index.js

@@ -0,0 +1,178 @@
+"use client";
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
+import Layers from "../../components/layer";
+const LayerView = (props) => {
+    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, selectedTableColor, colorMatchKey, statusKey, defaultBackground, } = props;
+    const transformRef = useRef(null);
+    const containerRef = useRef(null);
+    const svgRef = useRef(null);
+    const [scale, setScale] = useState(1);
+    const [selectedTable, setSelectedTable] = useState(null);
+    const { components: componentsEditor, extraComponents: extraComponentsEditor, } = useAppSelector((state) => state.board);
+    const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
+    const dispatch = useAppDispatch();
+    useEffect(() => {
+        if ((componentProps === null || componentProps === void 0 ? void 0 : componentProps.length) > 0) {
+            dispatch({
+                type: "board/setNewComponents",
+                payload: componentProps,
+            });
+        }
+        if ((extraComponentProps === null || extraComponentProps === void 0 ? void 0 : extraComponentProps.length) > 0) {
+            dispatch({
+                type: "board/setNewExtraComponents",
+                payload: extraComponentProps,
+            });
+        }
+        if (defaultBackground) {
+            dispatch({
+                type: "board/setBackgroundColor",
+                payload: defaultBackground,
+            });
+        }
+    }, [componentProps, extraComponentProps, defaultBackground]);
+    useEffect(() => {
+        onCurrentStateChange &&
+            onCurrentStateChange({
+                components: componentsEditor,
+                extraComponents: extraComponentsEditor,
+            });
+    }, [componentsEditor, extraComponentsEditor]);
+    const handleSelectComponent = (items) => {
+        const find = componentsEditor.find((item) => {
+            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
+                return item[mappingKey].id === (items === null || items === void 0 ? void 0 : items.id);
+            }
+            return (item === null || item === void 0 ? void 0 : item.id) === (items === null || items === void 0 ? void 0 : items.id);
+        });
+        onSelectComponent && onSelectComponent(find);
+        setSelectedTable(find);
+    };
+    const boundingBox = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
+            return { minX: 0, minY: 0, width: 500, height: 500 };
+        }
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.forEach((_) => {
+            var _a, _b, _c, _d;
+            let values = mappingKey ? _[mappingKey] : _;
+            if (!values)
+                return;
+            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("square")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("circle")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_c = values === null || values === void 0 ? void 0 : values.shape) === null || _c === void 0 ? void 0 : _c.includes("table-seat-circle")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_d = values === null || values === void 0 ? void 0 : values.shape) === null || _d === void 0 ? void 0 : _d.includes("image-table")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+        });
+        extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.forEach((values) => {
+            var _a, _b;
+            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("background")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("text")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+        });
+        let backgroundHasOne = false;
+        if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 1 && ((_b = (_a = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _a === void 0 ? void 0 : _a.shape) === null || _b === void 0 ? void 0 : _b.includes("background"))) {
+            backgroundHasOne = true;
+            minX = (_c = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _c === void 0 ? void 0 : _c.x;
+            minY = (_d = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _d === void 0 ? void 0 : _d.y;
+            maxX = (_e = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _e === void 0 ? void 0 : _e.width;
+            maxY = (_f = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _f === void 0 ? void 0 : _f.height;
+        }
+        if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) < 1 && ["background", "text"].includes((_g = componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor[0]) === null || _g === void 0 ? void 0 : _g.shape)) {
+            minX = minX - minX * 0.5;
+            minY = minY - minY * 0.5;
+        }
+        return {
+            minX: backgroundHasOne ? minX : minX - minX * 0.5,
+            minY: backgroundHasOne ? minY : minY - minY * 0.5,
+            width: maxX,
+            height: maxY,
+        };
+    }, [componentsEditor, extraComponentsEditor]);
+    const renderElements = (elementEditor, mappingKey, colorMatchKey) => {
+        return elementEditor.map((editorItem, i) => {
+            var _a, _b, _c, _d;
+            const isUsingMapping = mappingKey &&
+                typeof editorItem[mappingKey] === "object" &&
+                editorItem[mappingKey] !== null;
+            const finalProps = isUsingMapping ? editorItem[mappingKey] : editorItem;
+            if (colorMatchKey) {
+                if (isUsingMapping) {
+                    return Object.assign(Object.assign({}, finalProps), { fill: (_b = (_a = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : finalProps.fill });
+                }
+                else {
+                    return Object.assign(Object.assign({}, finalProps), { fill: (_d = (_c = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : finalProps.fill });
+                }
+            }
+            return finalProps;
+        });
+    };
+    const [fingerCount, setFingerCount] = useState(0);
+    useEffect(() => {
+        const container = document.getElementById("workspace");
+        const handleTouchStart = (e) => {
+            const count = e.touches.length;
+            setFingerCount(count);
+        };
+        const handleTouchEnd = () => {
+            setFingerCount(0);
+        };
+        if (container) {
+            container.addEventListener("touchstart", handleTouchStart);
+            container.addEventListener("touchend", handleTouchEnd);
+        }
+        return () => {
+            if (container) {
+                container.removeEventListener("touchstart", handleTouchStart);
+                container.removeEventListener("touchend", handleTouchEnd);
+            }
+        };
+    }, []);
+    return (_jsx("div", Object.assign({ className: "relative w-full h-full flex-1", ref: containerRef, style: {
+            height: "100vh",
+            overflow: "auto",
+            WebkitOverflowScrolling: "touch",
+            touchAction: "pan-y",
+        } }, props.containerProps, { children: _jsx("svg", Object.assign({}, props.svgProps, { id: "workspace", ref: svgRef, width: "100%", height: "100%", viewBox: `${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`, className: "h-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
+                background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
+                display: "block",
+                pointerEvents: "auto",
+                // touchAction: "pan-y",
+            }, children: _jsx(Layers, { mode: "view", components: [
+                    ...extraComponentsEditor,
+                    ...renderElements(componentsEditor, mappingKey, colorMatchKey),
+                ], onClick: handleSelectComponent, selectedTable: selectedTable, selectedTableColor: selectedTableColor }) })) })));
+};
+export default LayerView;

package/dist/features/view-only-2/index.jsx

@@ -0,0 +1,217 @@
+"use client";
+"use client";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
+import Layers from "../../components/layer";
+const LayerView = (props) => {
+    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, selectedTableColor, colorMatchKey, statusKey, defaultBackground, } = props;
+    const transformRef = useRef(null);
+    const containerRef = useRef(null);
+    const svgRef = useRef(null);
+    const [scale, setScale] = useState(1);
+    const [selectedTable, setSelectedTable] = useState(null);
+    const { components: componentsEditor, extraComponents: extraComponentsEditor, } = useAppSelector((state) => state.board);
+    const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
+    const dispatch = useAppDispatch();
+    useEffect(() => {
+        if ((componentProps === null || componentProps === void 0 ? void 0 : componentProps.length) > 0) {
+            dispatch({
+                type: "board/setNewComponents",
+                payload: componentProps,
+            });
+        }
+        if ((extraComponentProps === null || extraComponentProps === void 0 ? void 0 : extraComponentProps.length) > 0) {
+            dispatch({
+                type: "board/setNewExtraComponents",
+                payload: extraComponentProps,
+            });
+        }
+        if (defaultBackground) {
+            dispatch({
+                type: "board/setBackgroundColor",
+                payload: defaultBackground,
+            });
+        }
+    }, [componentProps, extraComponentProps, defaultBackground]);
+    useEffect(() => {
+        onCurrentStateChange &&
+            onCurrentStateChange({
+                components: componentsEditor,
+                extraComponents: extraComponentsEditor,
+            });
+    }, [componentsEditor, extraComponentsEditor]);
+    const handleSelectComponent = (items) => {
+        const find = componentsEditor.find((item) => {
+            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
+                return item[mappingKey].id === (items === null || items === void 0 ? void 0 : items.id);
+            }
+            return (item === null || item === void 0 ? void 0 : item.id) === (items === null || items === void 0 ? void 0 : items.id);
+        });
+        onSelectComponent && onSelectComponent(find);
+        setSelectedTable(find);
+    };
+    const boundingBox = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
+            return { minX: 0, minY: 0, width: 500, height: 500 };
+        }
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.forEach((_) => {
+            var _a, _b, _c, _d;
+            let values = mappingKey ? _[mappingKey] : _;
+            if (!values)
+                return;
+            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("square")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("circle")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_c = values === null || values === void 0 ? void 0 : values.shape) === null || _c === void 0 ? void 0 : _c.includes("table-seat-circle")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_d = values === null || values === void 0 ? void 0 : values.shape) === null || _d === void 0 ? void 0 : _d.includes("image-table")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+        });
+        extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.forEach((values) => {
+            var _a, _b;
+            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("background")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+            if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("text")) {
+                minX = Math.min(minX, values.x);
+                minY = Math.min(minY, values.y);
+                maxX = Math.max(maxX, values.x + values.width);
+                maxY = Math.max(maxY, values.y + values.height);
+            }
+        });
+        let backgroundHasOne = false;
+        if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 1 && ((_b = (_a = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _a === void 0 ? void 0 : _a.shape) === null || _b === void 0 ? void 0 : _b.includes("background"))) {
+            backgroundHasOne = true;
+            minX = (_c = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _c === void 0 ? void 0 : _c.x;
+            minY = (_d = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _d === void 0 ? void 0 : _d.y;
+            maxX = (_e = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _e === void 0 ? void 0 : _e.width;
+            maxY = (_f = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _f === void 0 ? void 0 : _f.height;
+        }
+        if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) < 1 && ["background", "text"].includes((_g = componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor[0]) === null || _g === void 0 ? void 0 : _g.shape)) {
+            minX = minX - minX * 0.5;
+            minY = minY - minY * 0.5;
+        }
+        return {
+            minX: backgroundHasOne ? minX : minX - minX * 0.5,
+            minY: backgroundHasOne ? minY : minY - minY * 0.5,
+            width: maxX,
+            height: maxY,
+        };
+    }, [componentsEditor, extraComponentsEditor]);
+    const renderElements = (elementEditor, mappingKey, colorMatchKey) => {
+        return elementEditor.map((editorItem, i) => {
+            var _a, _b, _c, _d;
+            const isUsingMapping = mappingKey &&
+                typeof editorItem[mappingKey] === "object" &&
+                editorItem[mappingKey] !== null;
+            const finalProps = isUsingMapping ? editorItem[mappingKey] : editorItem;
+            if (colorMatchKey) {
+                if (isUsingMapping) {
+                    return Object.assign(Object.assign({}, finalProps), { fill: (_b = (_a = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : finalProps.fill });
+                }
+                else {
+                    return Object.assign(Object.assign({}, finalProps), { fill: (_d = (_c = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : finalProps.fill });
+                }
+            }
+            return finalProps;
+        });
+    };
+    const [fingerCount, setFingerCount] = useState(0);
+    useEffect(() => {
+        const container = document.getElementById("workspace");
+        const handleTouchStart = (e) => {
+            const count = e.touches.length;
+            setFingerCount(count);
+        };
+        const handleTouchEnd = () => {
+            setFingerCount(0);
+        };
+        if (container) {
+            container.addEventListener("touchstart", handleTouchStart);
+            container.addEventListener("touchend", handleTouchEnd);
+        }
+        return () => {
+            if (container) {
+                container.removeEventListener("touchstart", handleTouchStart);
+                container.removeEventListener("touchend", handleTouchEnd);
+            }
+        };
+    }, []);
+    return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{
+            height: "100vh",
+            overflow: "auto",
+            WebkitOverflowScrolling: "touch",
+            touchAction: "pan-y",
+        }} {...props.containerProps}>
+      {/* <TransformWrapper
+          ref={transformRef}
+          {...props.transformProps}
+          disabled={fingerCount === 1 && scale === 1}
+          disablePadding={true}
+          // panning={{
+          //   disabled: false,
+          //   velocityDisabled: true,
+          // }}
+          // limitToBounds={false}
+          // doubleClick={{ disabled: true }}
+          // pinch={{ disabled: false }}
+          // wheel={{ disabled: true }}
+          // disabled={true}
+          // disablePadding={true}
+          centerZoomedOut={true}
+          onTransformed={({ state: { scale } }) => setScale(scale)}
+          minScale={1}
+          maxScale={1000}
+          initialScale={1}
+          // pinch={{ step: 1 }}
+          smooth={true}
+        >
+          <TransformComponent
+            wrapperStyle={{
+              width: "100%",
+              height: "100%",
+              overflow: "visible",
+            }}
+            contentStyle={{
+              width: "100%",
+              height: "100%",
+            }}
+          > */}
+          <svg {...props.svgProps} id="workspace" ref={svgRef} width="100%" height="100%" viewBox={`${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`} className="h-full" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
+            background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
+            display: "block",
+            pointerEvents: "auto",
+            // touchAction: "pan-y",
+        }}>
+            <Layers mode="view" components={[
+            ...extraComponentsEditor,
+            ...renderElements(componentsEditor, mappingKey, colorMatchKey),
+        ]} onClick={handleSelectComponent} selectedTable={selectedTable} selectedTableColor={selectedTableColor}/>
+          </svg>
+        {/* </TransformComponent>
+      </TransformWrapper> */}
+    </div>);
+};
+export default LayerView;

package/dist/index.d.ts

@@ -3,5 +3,6 @@ import Board from "./features/board";
 import SideTool from "./features/side-tool";
 import ControlPanels from "./features/panel";
 import LayerView, { type LayerViewProps } from "./features/view-only";
+import LayerView2, { type LayerViewProps as LayerViewProps2 } from "./features/view-only-2";
 import TableEditor from "./features/package";
-export { StoreProvider as ProviderSeatEditor, Board, SideTool, ControlPanels, LayerView, LayerViewProps, TableEditor as SeatEditor };
+export { StoreProvider as ProviderSeatEditor, Board, SideTool, ControlPanels, LayerView, LayerView2, LayerViewProps2, LayerViewProps, TableEditor as SeatEditor };

package/dist/index.js

@@ -3,5 +3,6 @@ import Board from "./features/board";
 import SideTool from "./features/side-tool";
 import ControlPanels from "./features/panel";
 import LayerView from "./features/view-only";
+import LayerView2 from "./features/view-only-2";
 import TableEditor from "./features/package";
-export { StoreProvider as ProviderSeatEditor, Board, SideTool, ControlPanels, LayerView, TableEditor as SeatEditor };
+export { StoreProvider as ProviderSeatEditor, Board, SideTool, ControlPanels, LayerView, LayerView2, TableEditor as SeatEditor };

package/package.json

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