seat-editor 3.3.35 → 3.3.36

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

@@ -0,0 +1,198 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
+import Layers from "../../components/layer";
+const LayerView = (props) => {
+    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, 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(TransformWrapper, Object.assign({ 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, children: _jsx(TransformComponent, { wrapperStyle: {
+                    width: "100%",
+                    height: "100%",
+                    overflow: "visible",
+                }, contentStyle: {
+                    width: "100%",
+                    height: "100%",
+                }, 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.d.ts

@@ -15,5 +15,5 @@ export interface LayerViewProps {
     containerProps?: any;
     svgProps?: any;
 }
-declare const LayerView: (props: LayerViewProps) => import("react").JSX.Element;
+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,187 @@
+"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;
+        }
+        const hasBoundingBox = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.some((item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.shape) === null || _a === void 0 ? void 0 : _a.includes("bounding-box"); });
+        if (hasBoundingBox) {
+            const findBoundingBox = extraComponentsEditor.find((item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.shape) === null || _a === void 0 ? void 0 : _a.includes("bounding-box"); });
+            return {
+                minX: findBoundingBox.x,
+                minY: findBoundingBox.y,
+                width: findBoundingBox.width,
+                height: findBoundingBox.height,
+            };
+        }
+        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 }, 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: "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-3/index.d.ts

@@ -85,5 +85,5 @@ export interface LayerViewProps<TMeta = undefined> {
     defaultBoundingBox?: PropertiesProps;
     viewOnly?: boolean;
 }
-declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => React.JSX.Element;
+declare const LayerView: <TMeta>(props: LayerViewProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
 export default LayerView;