seat-editor 3.3.35 → 3.3.36

package/dist/features/navbar/index.d.ts

@@ -1,2 +1,2 @@
-declare const Navbar: () => import("react").JSX.Element;
+declare const Navbar: () => import("react/jsx-runtime").JSX.Element;
 export default Navbar;

package/dist/features/navbar/index.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Navbar = () => {
+    return _jsx("div", { children: "Navbar" });
+};
+export default Navbar;

package/dist/features/package/index.d.ts

@@ -43,5 +43,5 @@ export interface TableEditorProps<TMeta = undefined> {
         element: React.JSX.Element;
     };
 }
-declare const TableEditor: <TMeta>(props: TableEditorProps<TMeta>) => import("react").JSX.Element;
+declare const TableEditor: <TMeta>(props: TableEditorProps<TMeta>) => import("react/jsx-runtime").JSX.Element;
 export default TableEditor;

package/dist/features/package/index.js

@@ -0,0 +1,166 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import Board from "../board-v3";
+import SideTool from "../side-tool";
+import ControlPanels from "../panel";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
+import { isEqual } from "lodash";
+import LayerView from "../view-only-3";
+import { Spin } from "antd";
+const TableEditor = (props) => {
+    var _a;
+    const [initialValue, setInitialValue] = useState(null);
+    const { componentProps, extraComponentProps, onCurrentStateChange, dragOnly, mappingKey, viewOnly, deleteAutorized, refs, loadingRender, } = props;
+    const { components, extraComponents, backgroundColor, boundingBox } = useAppSelector((state) => state.board);
+    const { loading } = useAppSelector((state) => state.panel);
+    const { isPreview } = useAppSelector((state) => state.tool);
+    const dispatch = useAppDispatch();
+    const refsBoard = useRef(null);
+    useImperativeHandle(refs, () => {
+        var _a, _b, _c;
+        return ({
+            svgRef: (_a = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _a === void 0 ? void 0 : _a.svgRef,
+            transformRef: (_b = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _b === void 0 ? void 0 : _b.transformRef,
+            containerRef: (_c = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _c === void 0 ? void 0 : _c.containerRef,
+        });
+    });
+    useEffect(() => {
+        if (!viewOnly) {
+            dispatch({
+                type: "panel/setSelectedComponent",
+                payload: null,
+            });
+        }
+        dispatch({
+            type: "tool/setActiveTool",
+            payload: "",
+        });
+        if (viewOnly) {
+            dispatch({ type: "board/setFlagChange", payload: true });
+            dispatch({ type: "board/setUpdateBy", payload: "global" });
+        }
+    }, [viewOnly]);
+    const onUpdateCurrentState = () => {
+        let matchInitialValueWithComponents = initialValue === null || initialValue === void 0 ? void 0 : initialValue.map((item) => {
+            if (item && mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
+                let findComponent = components === null || components === void 0 ? void 0 : components.find((c) => { var _a; return c.id === ((_a = item === null || item === void 0 ? void 0 : item[mappingKey]) === null || _a === void 0 ? void 0 : _a.id); });
+                if (!findComponent)
+                    return undefined;
+                if (findComponent) {
+                    return Object.assign(Object.assign({}, item), { [mappingKey]: Object.assign({}, findComponent) });
+                }
+            }
+            else {
+                let findComponent = components === null || components === void 0 ? void 0 : components.find((c) => c.id === (item === null || item === void 0 ? void 0 : item.id));
+                if (!findComponent)
+                    return undefined;
+                if (findComponent) {
+                    return Object.assign(Object.assign({}, item), findComponent);
+                }
+            }
+        });
+        const hasUndefined = matchInitialValueWithComponents === null || matchInitialValueWithComponents === void 0 ? void 0 : matchInitialValueWithComponents.some((item) => item === undefined);
+        if (!hasUndefined && !viewOnly) {
+            onCurrentStateChange({
+                // @ts-ignore
+                components: matchInitialValueWithComponents,
+                // @ts-ignore
+                extraComponents: extraComponents,
+                background: backgroundColor,
+                boundingBox,
+            });
+        }
+    };
+    useEffect(() => {
+        if (!isEqual(components, convertComponentProps()) ||
+            !isEqual(extraComponents, extraComponentProps) ||
+            !isEqual(backgroundColor, props === null || props === void 0 ? void 0 : props.defaultBackground) ||
+            !isEqual(boundingBox, props === null || props === void 0 ? void 0 : props.defaultBoundingBox)) {
+            onCurrentStateChange && onUpdateCurrentState();
+        }
+    }, [components, extraComponents, backgroundColor, boundingBox]);
+    const convertComponentProps = () => {
+        let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
+            if (item && mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
+                return Object.assign({}, (typeof (item === null || item === void 0 ? void 0 : item[mappingKey]) === "object" &&
+                    (item === null || item === void 0 ? void 0 : item[mappingKey]) !== null
+                    ? item === null || item === void 0 ? void 0 : item[mappingKey]
+                    : {}));
+            }
+            return item;
+        });
+        return mappingData;
+    };
+    useEffect(() => {
+        if (!loading && (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state)) {
+            dispatch({ type: "panel/setLoading", payload: true });
+        }
+        const initialComponent = !isEqual(components, convertComponentProps()) && componentProps;
+        const initialExtraComponent = !isEqual(extraComponents, extraComponentProps) && extraComponentProps;
+        if (initialComponent || initialExtraComponent) {
+            let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
+                if (item && mappingKey && (item === null || item === void 0 ? void 0 : item[props.mappingKey])) {
+                    return Object.assign({}, (typeof item[props.mappingKey] === "object" &&
+                        item[props.mappingKey] !== null
+                        ? item[props.mappingKey]
+                        : {}));
+                }
+                return item;
+            });
+            if (mappingKey) {
+                setInitialValue(componentProps);
+            }
+            dispatch({
+                type: "board/setInitialValue",
+                payload: {
+                    components: mappingData,
+                    extraComponents: extraComponentProps,
+                    backgroundColor: props === null || props === void 0 ? void 0 : props.defaultBackground,
+                    boundingBox: (props === null || props === void 0 ? void 0 : props.defaultBoundingBox) || null,
+                },
+            });
+            // dispatch({
+            //   type: "board/setNewComponents",
+            //   payload: mappingData,
+            // });
+            dispatch({ type: "board/setFlagChange", payload: true });
+        }
+        // const isEmptyComponents = components?.length === 0
+        // const isEmptyExtraComponents = extraComponents?.length === 0;
+        // // const isEmptyBoundingBox = boundingBox === null;
+        // if(isEmptyComponents){
+        //   dispatch({
+        //     type: "board/setInitialValue",
+        //     payload: {
+        //       components: [],
+        //       extraComponents: extraComponents,
+        //       backgroundColor: props?.defaultBackground,
+        //       boundingBox: props?.defaultBoundingBox || null,
+        //     },
+        //   });
+        // }
+        // if(isEmptyExtraComponents){
+        //   dispatch({
+        //     type: "board/setInitialValue",
+        //     payload: {
+        //       components: components,
+        //       extraComponents: [],
+        //       backgroundColor: props?.defaultBackground,
+        //       boundingBox: props?.defaultBoundingBox || null,
+        //     },
+        //   })
+        // }
+        setTimeout(() => {
+            dispatch({ type: "panel/setLoading", payload: false });
+        }, 1000);
+    }, [
+        componentProps,
+        extraComponentProps,
+        props === null || props === void 0 ? void 0 : props.defaultBackground,
+        props === null || props === void 0 ? void 0 : props.defaultBoundingBox,
+        loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state,
+    ]);
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "w-full h-screen flex relative", children: viewOnly ? (_jsx("div", { className: "w-full h-full flex relative", children: _jsx(LayerView, { statusKey: "status", loadingRender: props === null || props === void 0 ? void 0 : props.loadingRender }, `${viewOnly}`) })) : (_jsxs("div", { className: "w-full h-full flex relative", children: [(loading && !isPreview) && (_jsx("div", { className: "absolute z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-opacity-50 bg-white w-full h-full flex items-center justify-center", children: (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || _jsx(Spin, {}) })), _jsx(SideTool, { dragOnly: dragOnly, deleteAutorized: deleteAutorized }), _jsx(Board, { refs: refsBoard, loadingRender: props === null || props === void 0 ? void 0 : props.loadingRender }, `${viewOnly}`), _jsx(ControlPanels, { action: props.action, transform: (_a = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _a === void 0 ? void 0 : _a.transformRef })] }, `${viewOnly}`)) }) }));
+};
+export default TableEditor;

package/dist/features/panel/index.d.ts

@@ -2,5 +2,5 @@ interface ControlPanelsProps {
     action?: (file: File) => Promise<string>;
     transform?: any;
 }
-declare const ControlPanels: (props: ControlPanelsProps) => import("react").JSX.Element;
+declare const ControlPanels: (props: ControlPanelsProps) => import("react/jsx-runtime").JSX.Element;
 export default ControlPanels;

package/dist/features/panel/index.js

@@ -0,0 +1,243 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
+import { Form, Input } from "antd";
+import SelectToolForm from "./select-tool";
+import SquareToolForm from "./square-circle-tool";
+import SeatCircle from "./table-seat-circle";
+import UploadTool from "./upload-tool";
+import { debounce } from "lodash";
+import clsx from "clsx";
+import { getAttributeElement } from "../board-v3/resize-element";
+import { applyResizeToSvgElement, getGlobalBBox, updateSelectionBox, } from "../board-v3/utils";
+import { SEAT_SHAPES } from "../../utils/constant";
+import { adjustHeightWidthForSeatShape, getSeatCount, getSeatPosition, isSeatShape, } from "./utils";
+import SeatSquare from "./table-seat-square";
+const ControlPanels = (props) => {
+    const { action, transform } = props;
+    const dispatch = useAppDispatch();
+    const theme = useAppSelector((state) => state.theme);
+    const tool = useAppSelector((state) => state.tool);
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    const components = useAppSelector((state) => state.board.components);
+    const extraComponents = useAppSelector((state) => state.board.extraComponents);
+    const svgRef = useRef(null);
+    useEffect(() => {
+        svgRef.current = document.querySelectorAll("#workspace");
+    }, []);
+    const { show } = useAppSelector((state) => state.panel);
+    const [open, setOpen] = useState(false);
+    const [form] = Form.useForm();
+    let values = Form.useWatch([], form);
+    useEffect(() => {
+        if (selectedComponent) {
+            const isDifferentId = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) !== (values === null || values === void 0 ? void 0 : values.id) || !(values === null || values === void 0 ? void 0 : values.id);
+            const isSameIdAndSameDimensions = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === (values === null || values === void 0 ? void 0 : values.id) &&
+                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height) === (values === null || values === void 0 ? void 0 : values.height) &&
+                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.width) === (values === null || values === void 0 ? void 0 : values.width) &&
+                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.x) === (values === null || values === void 0 ? void 0 : values.x) &&
+                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.y) === (values === null || values === void 0 ? void 0 : values.y);
+            if (show && (isDifferentId || isSameIdAndSameDimensions)) {
+                setOpen(true);
+            }
+            form.setFieldsValue(selectedComponent);
+        }
+        else if (selectedGroup) {
+            if (show)
+                setOpen(true);
+            if (!show)
+                setOpen(false);
+            function isSameAllByKey(arr, key) {
+                if (!arr || arr.length === 0)
+                    return false;
+                const firstValue = arr[0][key];
+                return arr.every((item) => item[key] === firstValue);
+            }
+            function getValueIfSame(arr, key) {
+                return isSameAllByKey(arr, key) ? arr[0][key] : undefined;
+            }
+            form.setFieldsValue({
+                width: getValueIfSame(selectedGroup, "width"),
+                height: getValueIfSame(selectedGroup, "height"),
+                x: getValueIfSame(selectedGroup, "x"),
+                y: getValueIfSame(selectedGroup, "y"),
+                fill: getValueIfSame(selectedGroup, "fill"),
+                stroke: getValueIfSame(selectedGroup, "stroke"),
+                opacity: getValueIfSame(selectedGroup, "opacity"),
+                rotation: getValueIfSame(selectedGroup, "rotation"),
+                strokeWidth: getValueIfSame(selectedGroup, "strokeWidth"),
+                radius: getValueIfSame(selectedGroup, "radius"),
+                shape: getValueIfSame(selectedGroup, "shape"),
+                labels: getValueIfSame(selectedGroup, "labels"),
+            });
+        }
+        else {
+            setOpen(false);
+        }
+    }, [selectedComponent, selectedGroup, show]);
+    useEffect(() => {
+        if (tool.active === "background" || tool.active === "image-table") {
+            setOpen(true);
+        }
+    }, [tool, show]);
+    const createShape = (shape, props = {}) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const defaults = (_a = SEAT_SHAPES[shape]) !== null && _a !== void 0 ? _a : {};
+        return Object.assign(Object.assign(Object.assign({}, defaults), props), { shape: (_b = props.shape) !== null && _b !== void 0 ? _b : shape, height: (_c = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _c === void 0 ? void 0 : _c.height, width: (_d = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _d === void 0 ? void 0 : _d.width, fill: props.fill, seatCount: getSeatCount(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props), seatPositions: getSeatPosition(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props), openSpace: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape) ? (_e = props.openSpace) !== null && _e !== void 0 ? _e : 0 : undefined, seatFill: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape)
+                ? props.seatFill
+                : undefined, text: shape === "text" ? (_f = props.text) !== null && _f !== void 0 ? _f : defaults.text : undefined, fontColor: shape === "text" ? (_g = props.fontColor) !== null && _g !== void 0 ? _g : defaults.fontColor : undefined, radius: props.radius });
+    };
+    const debouncedSyncComponents = useRef(debounce((data) => {
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
+        dispatch({
+            type: "board/updateComponent",
+            payload: data,
+        });
+        dispatch({
+            type: "panel/updateSelectedComponent",
+            payload: data,
+        });
+    }, 300));
+    const debouncedSyncSelectedComponents = useRef(debounce((data) => {
+        dispatch({
+            type: "panel/updateSelectedComponent",
+            payload: data,
+        });
+    }, 300));
+    const debouncedSyncSelectedSelectionLines = useRef(debounce((data) => {
+        dispatch({
+            type: "panel/setSelectionLines",
+            payload: data,
+        });
+    }));
+    const debounceSyncSelectedGroup = useRef(debounce((data) => {
+        dispatch({
+            type: "panel/updateSelectedGroup",
+            payload: data,
+        });
+    }, 300));
+    const debounceSyncDataSelectedGroup = useRef(debounce((data) => {
+        dispatch({
+            type: "panel/updateSelectedGroup",
+            payload: data,
+        });
+        dispatch({
+            type: "board/updateComponentsBulk",
+            payload: data,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
+    }, 300));
+    const debouncedSyncForm = useRef(debounce(() => {
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
+    }, 300));
+    const updateElement = (id, values) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        let findElement = [...components, ...extraComponents].find((item) => item.id === id);
+        const isAdjustSize = ["circle"].includes((findElement === null || findElement === void 0 ? void 0 : findElement.shape) || "");
+        let forceSize = {
+            width: Math.min(findElement.width, findElement.height),
+            height: Math.min(findElement.width, findElement.height),
+        };
+        if (!findElement)
+            return;
+        const newElement = Object.assign(Object.assign(Object.assign({}, findElement), values), { x: (_a = values.x) !== null && _a !== void 0 ? _a : findElement.x, y: (_b = values.y) !== null && _b !== void 0 ? _b : findElement.y, width: isAdjustSize ? forceSize.width : (_c = values.width) !== null && _c !== void 0 ? _c : findElement.width, height: isAdjustSize
+                ? forceSize.height
+                : (_d = values.height) !== null && _d !== void 0 ? _d : findElement.height });
+        const svg = (_f = (_e = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _e === void 0 ? void 0 : _e[1]) !== null && _f !== void 0 ? _f : (_g = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _g === void 0 ? void 0 : _g[0];
+        const { g, element } = getAttributeElement(svg, id);
+        applyResizeToSvgElement(element, g, newElement);
+        const getBBox = getGlobalBBox(svg, g);
+        debouncedSyncSelectedSelectionLines.current(Object.assign({}, getBBox));
+        updateSelectionBox(svg, getBBox);
+    };
+    const handleChangeComponent = (values, allValues) => {
+        const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
+        const newValues = createShape(shape, restProps);
+        if (selectedComponent) {
+            updateElement(allValues.id, values);
+            debouncedSyncComponents.current(Object.assign(Object.assign({}, (selectedComponent || {})), newValues));
+        }
+        if ((selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.length) > 0) {
+            const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, labels } = newValues;
+            const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {})), (shape !== undefined ? { shape } : {})), (seatCount !== undefined ? { seatCount } : {})), (seatFill !== undefined ? { seatFill } : {})), (seatPositions !== undefined ? { seatPositions } : {})), (labels !== undefined ? { labels } : {}))));
+            let minX = Infinity;
+            let minY = Infinity;
+            let maxX = -Infinity;
+            let maxY = -Infinity;
+            updatedGroup.forEach((comp) => {
+                minX = Math.min(minX, comp.x);
+                minY = Math.min(minY, comp.y);
+                maxX = Math.max(maxX, comp.x + comp.width);
+                maxY = Math.max(maxY, comp.y + comp.height);
+            });
+            const newSelectionGroup = {
+                x: minX,
+                y: minY,
+                width: maxX - minX,
+                height: maxY - minY,
+                shape: "selection-box",
+                id: `${Date.now()}`,
+                fill: "transparent",
+                rotation: 0,
+                stroke: "red",
+            };
+            dispatch({
+                type: "panel/setSelectionLines",
+                payload: newSelectionGroup,
+            });
+            // dispatch({
+            //   type: "panel/updateSelectedGroup",
+            //   payload: updatedGroup,
+            // });
+            debounceSyncDataSelectedGroup.current(updatedGroup);
+        }
+        // debouncedSyncForm.current();
+    };
+    const renderFormPanel = () => {
+        switch (tool.active) {
+            case "select":
+            case "text":
+                return _jsx(SelectToolForm, { action: action, tranform: transform });
+            case "square":
+            case "circle":
+                return _jsx(SquareToolForm, {});
+            case "table-seat-circle":
+                return _jsx(SeatCircle, {});
+            case "table-seat-square":
+                return _jsx(SeatSquare, {});
+            case "image-table":
+                return (_jsx(UploadTool, { name: tool.active, type: "component", action: action, transform: transform }));
+            case "background":
+                return (_jsx(UploadTool, { name: tool.active, type: "background", action: action, transform: transform }));
+            default:
+                return null;
+        }
+    };
+    const handleClose = () => {
+        setOpen(false);
+        // HIDE SEMENTARA
+        dispatch({
+            type: "panel/setShow",
+            payload: false,
+        });
+    };
+    // if(!show) return null
+    return (_jsx("div", { className: clsx("w-[300px] h-full absolute top-0  z-50 transition-all duration-300 overflow-y-scroll ", open ? "right-0" : "right-[-300px]"), children: _jsx("div", { className: "bg-white h-full max-h-screen w-full p-2 overflow-y-auto border-l border-gray-300", children: _jsxs(Form, { layout: "vertical", form: form, name: "table", onValuesChange: handleChangeComponent, initialValues: { labels: [{}] }, children: [_jsx(Form.Item, { name: "id", hidden: true, children: _jsx(Input, {}) }), renderFormPanel()] }) }) }));
+};
+export default ControlPanels;

package/dist/features/panel/select-tool.d.ts

@@ -2,5 +2,5 @@ declare const SelectToolForm: ({ title, action, tranform }: {
     title?: string;
     action: any;
     tranform: any;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SelectToolForm;

package/dist/features/panel/select-tool.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppSelector } from "../../hooks/use-redux";
+import SquareToolForm from "./square-circle-tool";
+import SeatCircle from "./table-seat-circle";
+import SeatSquare from "./table-seat-square";
+import UploadTool from "./upload-tool";
+import TextTool from "./text-tool";
+import SelectedGroup from "./selected-group";
+const SelectToolForm = ({ title = "Title", action, tranform }) => {
+    const components = useAppSelector((state) => state.board.components);
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const extraComponents = useAppSelector((state) => state.board.extraComponents);
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    const SummaryComponents = () => {
+        const countByShape = components === null || components === void 0 ? void 0 : components.reduce((acc, item) => {
+            acc[item.shape] = (acc[item.shape] || 0) + 1;
+            return acc;
+        }, {});
+        const variableFormatToString = (variable) => {
+            return variable
+                .replace(/-/g, " ")
+                .replace(/\b\w/g, (char) => char.toUpperCase());
+        };
+        return (_jsxs("div", { className: "flex flex-col", children: [_jsx("h1", { className: "heading-s", children: title }), _jsx("div", { className: "flex flex-col gap-2 mt-5", children: Object.entries(countByShape).map(([shape, count]) => (_jsxs("div", { children: [_jsxs("span", { className: "font-bold", children: [variableFormatToString(shape), ":"] }), " ", count] }, shape))) })] }));
+    };
+    const renderComponent = () => {
+        switch (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) {
+            case "square":
+            case "circle":
+                return _jsx(SquareToolForm, {});
+            case "table-seat-circle":
+            case "table-seat-rect-circle":
+                return _jsx(SeatCircle, {});
+            case "table-seat-square":
+            case "table-seat-half-square":
+            case "table-seat-rect-square":
+                return _jsx(SeatSquare, {});
+            case "image-table":
+            case "background":
+                return (_jsx(UploadTool, { action: action, name: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape, defaultValue: selectedComponent, type: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background"
+                        ? "background"
+                        : "component", transform: tranform }));
+            case "text":
+                return _jsx(TextTool, {});
+            default:
+                return null;
+        }
+    };
+    const renderSelectionComponent = () => {
+        if (selectedGroup) {
+            return _jsx(SelectedGroup, {});
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(SummaryComponents, {}), renderComponent(), renderSelectionComponent()] }));
+};
+export default SelectToolForm;

package/dist/features/panel/selected-group.d.ts

@@ -1,2 +1,2 @@
-declare const SelectedGroup: () => import("react").JSX.Element;
+declare const SelectedGroup: () => import("react/jsx-runtime").JSX.Element;
 export default SelectedGroup;

package/dist/features/panel/selected-group.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { optionsShape } from "../../components/form-tools/shape";
+import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
+import SeatCircle from "./table-seat-circle";
+import SeatSquare from "./table-seat-square";
+import { useAppSelector } from "../../hooks/use-redux";
+const SelectedGroup = () => {
+    const shape = Form.useWatch("shape");
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    const sameShape = [
+        "table-seat-circle",
+        "table-seat-rect-circle",
+        "table-seat-square",
+        "table-seat-square",
+        "table-seat-rect-square",
+        "table-seat-half-square"
+    ].includes(shape);
+    const allShapeSelected = selectedGroup.map((item) => item.shape);
+    const shapeIncludeImage = ["background", "image-table", "polygon"].some((shape) => allShapeSelected.includes(shape));
+    const shapeAllIncludePolygon = allShapeSelected.includes("polygon");
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Group Selection" }), _jsxs("div", { className: "py-2", children: [!shapeIncludeImage && (_jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Form.Item, { label: "Name", name: "shape", className: "w-full", children: _jsx(Select, { options: optionsShape, className: "w-full" }) }) })), _jsxs(Flex, { gap: 2, className: "w-full", children: [["table-seat-circle", "table-seat-rect-circle"].includes(shape) && _jsx(SeatCircle, {}), [
+                                    "table-seat-square",
+                                    "table-seat-square",
+                                    "table-seat-rect-square",
+                                    "table-seat-half-square"
+                                ].includes(shape) && _jsx(SeatSquare, {})] }), !sameShape && (_jsxs(_Fragment, { children: [_jsxs(Flex, { gap: 2, className: "w-full", children: [!shapeAllIncludePolygon && (_jsxs(_Fragment, { children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", children: _jsx(InputNumber, { suffix: "px" }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", children: _jsx(InputNumber, { suffix: "px" }) })] })), (!(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && !shapeAllIncludePolygon) && (_jsx(Form.Item, { label: "Radius", name: "radius", className: "w-full", children: _jsx(InputNumber, { suffix: "px", parser: (value) => {
+                                                    var _a;
+                                                    const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
+                                                    return onlyNumber === ""
+                                                        ? 1
+                                                        : Math.max(1, Number(onlyNumber));
+                                                } }) }))] }), !shapeAllIncludePolygon && (_jsx(_Fragment, { children: _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Position X", name: "x", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "Position Y", name: "y", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "Rotation", name: "rotation", className: "w-full", children: _jsx(InputNumber, { max: 360, min: 0 }) })] }) })), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Fill", name: "fill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Stroke", name: "stroke", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsxs(Flex, { children: [_jsx(Form.Item, { label: "Stroke Width", name: "strokeWidth", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "opacity", name: "opacity", className: "w-full", children: _jsx(InputNumber, { step: 0.1, max: 1, min: 0 }) })] })] }))] })] }) }));
+};
+export default SelectedGroup;

package/dist/features/panel/square-circle-tool.d.ts

@@ -1,2 +1,2 @@
-declare const SquareToolForm: () => import("react").JSX.Element;
+declare const SquareToolForm: () => import("react/jsx-runtime").JSX.Element;
 export default SquareToolForm;

package/dist/features/panel/square-circle-tool.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import SectionLabel from "../../components/form-tools/label";
+import SectionShape from "../../components/form-tools/shape";
+const SquareToolForm = () => {
+    return (_jsxs(_Fragment, { children: [_jsx(SectionShape, {}), _jsx(SectionLabel, {})] }));
+};
+export default SquareToolForm;

package/dist/features/panel/table-seat-circle.d.ts

@@ -1,2 +1,2 @@
-declare const SeatCircle: () => import("react").JSX.Element;
+declare const SeatCircle: () => import("react/jsx-runtime").JSX.Element;
 export default SeatCircle;

package/dist/features/panel/table-seat-circle.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ColorPicker, Flex, Form, InputNumber } from "antd";
+import SectionLabel from "../../components/form-tools/label";
+import SectionShape from "../../components/form-tools/shape";
+const SeatCircle = () => {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Round table" }), _jsxs(Flex, { children: [_jsx(Form.Item, { name: "seatCount", label: "Seat Count", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: "openSpace", label: "Open Space", className: "w-full", children: _jsx(InputNumber, { max: 1, min: 0, step: 0.1 }) })] }), _jsx(Flex, { gap: 2, children: _jsx(Form.Item, { label: "Seat Fill", name: "seatFill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }) }), _jsx(SectionShape, {}), _jsx(SectionLabel, {})] }) }));
+};
+export default SeatCircle;

package/dist/features/panel/table-seat-square.d.ts

@@ -1,2 +1,2 @@
-declare const SeatSquare: () => import("react").JSX.Element;
+declare const SeatSquare: () => import("react/jsx-runtime").JSX.Element;
 export default SeatSquare;

package/dist/features/panel/table-seat-square.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Col, ColorPicker, Flex, Form, InputNumber, Row, } from "antd";
+import SectionLabel from "../../components/form-tools/label";
+import SectionShape from "../../components/form-tools/shape";
+const SeatSquare = () => {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Square table" }), _jsx(Flex, { className: "w-full", children: _jsx(Form.Item, { name: "openSpace", label: "Open Space", className: "w-full", children: _jsx(InputNumber, { max: 1, min: 0, step: 0.1 }) }) }), _jsxs(Row, { gutter: [16, 16], children: [_jsxs(Col, { span: 12, children: [_jsx(Form.Item, { name: ["seatPositions", "top"], label: "Top", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 1 }) }), _jsx(Form.Item, { name: ["seatPositions", "left"], label: "Left", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 1 }) })] }), _jsxs(Col, { span: 12, children: [_jsx(Form.Item, { name: ["seatPositions", "right"], label: "Right", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 1 }) }), _jsx(Form.Item, { name: ["seatPositions", "bottom"], label: "Bottom", className: "w-full", children: _jsx(InputNumber, { max: 100, min: 0, step: 1 }) })] })] }), _jsx(Flex, { gap: 2, children: _jsx(Form.Item, { label: "Seat Fill", name: "seatFill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }) }), _jsx(SectionShape, {}), _jsx(SectionLabel, {})] }) }));
+};
+export default SeatSquare;

package/dist/features/panel/text-tool.d.ts

@@ -1,2 +1,2 @@
-declare const TextTool: () => import("react").JSX.Element;
+declare const TextTool: () => import("react/jsx-runtime").JSX.Element;
 export default TextTool;

package/dist/features/panel/text-tool.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColorPicker, Flex, Form, Input, InputNumber } from "antd";
+const TextTool = () => {
+    return (_jsxs("div", { className: "py-2", children: [_jsx(Form.Item, { label: "Name", name: "shape", className: "w-full hidden", children: _jsx(Input, { defaultValue: "text" }) }), _jsx(Form.Item, { name: "text", label: "Text", children: _jsx(Input, {}) }), _jsxs(Flex, { className: "w-full", gap: 2, children: [_jsx(Form.Item, { name: "fontColor", label: "Color", getValueFromEvent: (color) => color.toHexString(), children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { name: "fontSize", label: "Size", children: _jsx(InputNumber, { suffix: "px" }) })] }), _jsxs(Flex, { gap: 2, className: "w-full", children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", children: _jsx(InputNumber, { suffix: "px", controls: true, parser: (value) => {
+                                var _a;
+                                const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
+                                return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
+                            } }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", children: _jsx(InputNumber, { suffix: "px", parser: (value) => {
+                                var _a;
+                                const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
+                                return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
+                            } }) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Position X", name: "x", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "Position Y", name: "y", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { label: "Rotation", name: "rotation", className: "w-full", children: _jsx(InputNumber, { suffix: "\u00B0", min: 0, max: 360, parser: (value) => {
+                                if (!value)
+                                    return 0;
+                                const num = Number(value.replace(/\D/g, ""));
+                                if (Number.isNaN(num))
+                                    return 0;
+                                return Math.min(360, Math.max(0, num));
+                            } }) })] })] }));
+};
+export default TextTool;