seat-editor 2.0.0 → 2.1.1

package/dist/features/view/index.jsx

@@ -1,228 +0,0 @@
-"use client";
-"use client";
-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";
-import { isEqual } from "lodash";
-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();
-    const convertComponentProps = () => {
-        let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
-            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
-                return Object.assign({}, item === null || item === void 0 ? void 0 : item[mappingKey]);
-            }
-            return item;
-        });
-        return mappingData;
-    };
-    useEffect(() => {
-        if (componentProps) {
-            if (!isEqual(componentsEditor, convertComponentProps())) {
-                let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
-                    if (mappingKey && (item === null || item === void 0 ? void 0 : item[props.mappingKey])) {
-                        return Object.assign({}, item[props.mappingKey]);
-                    }
-                    return item;
-                });
-                dispatch({
-                    type: "board/setNewComponents",
-                    payload: mappingData,
-                });
-            }
-        }
-        if (extraComponentsEditor) {
-            if (!isEqual(extraComponentsEditor, extraComponentProps)) {
-                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;
-            const hasMappingKey = mappingKey && _[mappingKey];
-            let values = hasMappingKey ? _[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 === null || elementEditor === void 0 ? void 0 : 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 === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) > 0 ? extraComponentsEditor : []),
-            ...renderElements(componentsEditor, mappingKey, colorMatchKey),
-        ]} onClick={handleSelectComponent} selectedTable={selectedTable} selectedTableColor={selectedTableColor}/>
-          </svg>
-        </TransformComponent>
-      </TransformWrapper>
-    </div>);
-};
-export default LayerView;

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

@@ -1,19 +0,0 @@
-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.Element;
-export default LayerView;

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

@@ -1,206 +0,0 @@
-"use client";
-"use client";
-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 (<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/features/view-only-2/index.d.ts

@@ -1,19 +0,0 @@
-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.Element;
-export default LayerView;

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

@@ -1,181 +0,0 @@
-"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} {...props.containerProps}>
-      <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: "auto",
-            // touchAction: "pan-y",
-        }}>
-        <Layers mode="view" components={[
-            ...extraComponentsEditor,
-            ...renderElements(componentsEditor, mappingKey, colorMatchKey),
-        ]} onClick={handleSelectComponent} selectedTable={selectedTable} selectedTableColor={selectedTableColor}/>
-      </svg>
-    </div>);
-};
-export default LayerView;

package/dist/hooks/use-redux.d.ts

@@ -1,4 +0,0 @@
-import { TypedUseSelectorHook } from "react-redux";
-import type { RootState, AppDispatch } from "../libs/store";
-export declare const useAppDispatch: () => AppDispatch;
-export declare const useAppSelector: TypedUseSelectorHook<RootState>;

package/dist/hooks/use-redux.js

@@ -1,3 +0,0 @@
-import { useDispatch, useSelector } from "react-redux";
-export const useAppDispatch = useDispatch;
-export const useAppSelector = useSelector;