seat-editor 1.6.17 → 1.6.19

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

@@ -147,15 +147,15 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
         dispatch({ type: "board/setFlagChange", payload: true });
     };
     const handleRemoveComponent = () => {
-        if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) !== "background" && !(deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.component)) {
+        const exludedShapes = ["background", "text"];
+        if (!exludedShapes.includes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) && !(deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.component)) {
             message.error("You are not authorized to delete this table.");
             return;
         }
-        if ((selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background" && !(deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.extraComponent)) {
+        if (exludedShapes.includes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) && !(deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.extraComponent)) {
             message.error("You are not authorized to delete this background.");
             return;
         }
-        const exludedShapes = ["background", "text"];
         if ((deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.component) && !exludedShapes.includes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape)) {
             dispatch({
                 type: "board/removeComponent",

package/dist/features/view/index.js

@@ -73,7 +73,7 @@ const LayerView = (props) => {
         setSelectedTable(find);
     };
     const boundingBox = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f;
+        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 };
         }
@@ -131,7 +131,7 @@ const LayerView = (props) => {
             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) {
+        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;
         }

package/dist/features/view/index.jsx

@@ -0,0 +1,226 @@
+"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);
+            }
+        });
+        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"))) {
+            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,
+            minY,
+            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/package.json

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

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

@@ -1,69 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-import SeatEditor from "../../features/package";
-import { constantData } from "../constant";
-export default function NewBoard() {
-    const [initialValue, setInitialValue] = useState([]);
-    const [extraComponents, setExtraComponents] = useState([]);
-    const [backgroundColor, setBackgroundColor] = useState("#ffffff");
-    const [viewOnly, setViewOnly] = useState(true);
-    useEffect(() => {
-        setInitialValue(constantData);
-        setExtraComponents([{
-                src: "https://d3l3j4e3k9p181.cloudfront.net/dev/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1751350513582817819_download (10).jpg",
-                id: 1747388267450,
-                x: 0,
-                y: 0,
-                shape: "background",
-                width: 100,
-                height: 100,
-            },
-            {
-                src: "https://d3l3j4e3k9p181.cloudfront.net/dev/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1751350513582817819_download (10).jpg",
-                id: 1747388267451,
-                x: 100,
-                y: 100,
-                shape: "background",
-                width: 100,
-                height: 100,
-            }]);
-    }, []);
-    return (<>
-      <div className="w-full h-screen flex flex-col relative justify-center">
-        {/* <div className="w-full h-[1000px] bg-white border-r border-gray-200"> */}
-        {/* <LayerView
-          componentProps={initialValue}
-          mappingKey="properties"
-          extraComponentProps={[]}
-          defaultBackground="#ffffff"
-          // dragOnly={true}
-          statusKey="status"
-          
-        /> */}
-        {/* </div> */}
-        <button className="bg-blue-500 text-white px-4 py-2 rounded" onClick={() => setViewOnly(!viewOnly)}>
-          {viewOnly ? "Edit Mode" : "View Mode"}
-        </button>
-        <div className="flex-1 h-full">
-          <SeatEditor componentProps={initialValue} viewOnly={viewOnly} dragOnly deleteAutorized={{
-            component: true,
-            extraComponent: true,
-        }} mappingKey="properties" onCurrentStateChange={(setState) => {
-            var _a, _b, _c, _d;
-            if (((_a = setState === null || setState === void 0 ? void 0 : setState.components) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                setInitialValue((_b = setState === null || setState === void 0 ? void 0 : setState.components) !== null && _b !== void 0 ? _b : []);
-            }
-            if (setState === null || setState === void 0 ? void 0 : setState.background) {
-                setBackgroundColor(setState === null || setState === void 0 ? void 0 : setState.backgroundColor);
-            }
-            if (((_c = setState === null || setState === void 0 ? void 0 : setState.extraComponents) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-                setExtraComponents((_d = setState === null || setState === void 0 ? void 0 : setState.extraComponents) !== null && _d !== void 0 ? _d : []);
-            }
-        }} extraComponentProps={extraComponents} defaultBackground={backgroundColor} 
-    // dragOnly={true}
-    statusKey="status"/>
-          </div>
-
-      </div>
-    </>);
-}