seat-editor 3.4.8 → 3.5.0

package/dist/features/board-v3/resize-element.js

@@ -4,6 +4,11 @@ export function getAttributeElement(root, id) {
     const g = root.querySelector(`g[data-id="${id}"]`);
     const seats = root.querySelectorAll(`g[data-seat="${id}-seats"]`);
     const seatGroup = root.querySelector(`g[data-seat="${id}-seats"]`);
+    const boundingBox = root.querySelector(`g[data-bounding-box="${id}"]`);
+    if (boundingBox) {
+        const element = boundingBox.querySelector("rect");
+        return { g: boundingBox, inner: null, element, seats, seatGroup };
+    }
     if (!g)
         return { g, inner: null, element: null };
     const inner = g.querySelector("g");

package/dist/features/board-v3/utils.d.ts

@@ -37,6 +37,7 @@ export declare function getAnchorByHandle(handle: ResizeHandle, box: {
     ax: number;
     ay: number;
 };
+import { TableProps } from "@/dto/table";
 interface ResizeSeatSquare {
     seatsPositions: {
         top: number;
@@ -98,6 +99,12 @@ export declare function getGlobalBBox(svg: SVGSVGElement, el: SVGGraphicsElement
     width: number;
     height: number;
 };
+export declare function functionGetGlobalBBoxById(svg: SVGSVGElement, id: string): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
 export declare function getTranslate(el: any): {
     x: number;
     y: number;
@@ -178,4 +185,5 @@ type GuideLineIds = {
     hBottom: string;
 };
 export declare const updateSelectionGuides: (svg: SVGSVGElement | null, rect: Rect, ids: GuideLineIds, range?: number) => void;
+export declare const getAllSelectionBox: (elements: TableProps[]) => TableProps;
 export {};

package/dist/features/board-v3/utils.js

@@ -226,7 +226,7 @@ export const resizeSeatSquare = ({ seatsPositions, r = 10, openSpace, newElement
         id: "left",
     }));
     const bottomXs = distributeWithSpacing({
-        start: newElement.x,
+        start: 0,
         length: newElement.width,
         count: bottomCount,
         radius: r,
@@ -854,6 +854,12 @@ export function getGlobalBBox(svg, el) {
         // rotation
     };
 }
+export function functionGetGlobalBBoxById(svg, id) {
+    const el = svg.getElementById(id);
+    if (!el)
+        return null;
+    return getGlobalBBox(svg, el);
+}
 function localToWorld(dx, dy, angle) {
     const cosR = Math.cos(angle);
     const sinR = Math.sin(angle);
@@ -1017,18 +1023,18 @@ export function applyResizeToSvgElement(element, group, resize, component) {
         case "rect":
         case "image": {
             updateSvgAttrs(element, {
-                width: resize.width < 60 ? 60 : resize.width,
-                height: resize.height < MIN_HEIGHT ? MIN_HEIGHT : resize.height,
+                width: resize.width < 60 ? 60 : Math.round(resize.width),
+                height: resize.height < MIN_HEIGHT ? MIN_HEIGHT : Math.round(resize.height),
                 // fill: component.fill,
             });
             updateSvgAttrs(group, {
-                transform: `translate(${resize.x}, ${resize.y})`,
+                transform: `translate(${Math.round(resize.x)}, ${Math.round(resize.y)})`,
             });
             break;
         }
         case "circle": {
-            const width = resize.width < MIN_WIDTH ? MIN_WIDTH : resize.width;
-            const height = resize.height < MIN_HEIGHT ? MIN_HEIGHT : resize.height;
+            const width = resize.width < MIN_WIDTH ? MIN_WIDTH : Math.round(resize.width);
+            const height = resize.height < MIN_HEIGHT ? MIN_HEIGHT : Math.round(resize.height);
             const r = Math.min(width, height) / 2;
             updateSvgAttrs(element, {
                 r,
@@ -1036,7 +1042,7 @@ export function applyResizeToSvgElement(element, group, resize, component) {
                 cy: height / 2,
                 // fill: component.fill,
             });
-            group.setAttribute("transform", `translate(${resize.x}, ${resize.y})`);
+            group.setAttribute("transform", `translate(${Math.round(resize.x)}, ${Math.round(resize.y)})`);
             // inner
             break;
         }
@@ -1259,3 +1265,13 @@ export const updateSelectionGuides = (svg, rect, ids, range = 10000) => {
     h(ids.hCenter, cy);
     h(ids.hBottom, y + height);
 };
+export const getAllSelectionBox = (elements) => {
+    return {
+        x: Math.min(...elements.map((el) => el.x)),
+        y: Math.min(...elements.map((el) => el.y)),
+        width: Math.max(...elements.map((el) => el.x + el.width)) -
+            Math.min(...elements.map((el) => el.x)),
+        height: Math.max(...elements.map((el) => el.y + el.height)) -
+            Math.min(...elements.map((el) => el.y)),
+    };
+};

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/package/index.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { RefsType } from "../board-v3";
 import { OnCurrentStateChange } from "../view-only-3";
 import { PropertiesProps } from "../../dto/table";
@@ -44,6 +45,7 @@ export interface TableEditorProps<TMeta = undefined> {
     };
     disabledView?: boolean;
     defaultSeatCountKey?: string;
+    header?: React.ReactNode;
 }
-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

@@ -172,6 +172,6 @@ const TableEditor = (props) => {
                         switch: false,
                         drop: false,
                         rightClick: false,
-                    } }, `${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, disabled: props === null || props === void 0 ? void 0 : props.disabledView }, `${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}`)) }) }));
+                    } }, `${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("div", { className: "absolute top-0 left-0 w-full bg-white pointer-events-none p-[20px] z-[51] border-b border-gray-200", children: props.header ? (props.header) : (_jsx("div", { className: "text-xl font-bold h-[38px] leading-[38px] flex ", children: "Navbar" })) }), _jsx(SideTool, { dragOnly: dragOnly, deleteAutorized: deleteAutorized }), _jsx(Board, { refs: refsBoard, loadingRender: props === null || props === void 0 ? void 0 : props.loadingRender, disabled: props === null || props === void 0 ? void 0 : props.disabledView }, `${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/package/index.jsx

@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
 import Board from "../board-v3";
 import SideTool from "../side-tool";
 import ControlPanels from "../panel";
@@ -179,6 +179,11 @@ const TableEditor = (props) => {
             {loading && !isPreview && (<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">
                 {(loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.element) || <Spin />}
               </div>)}
+            <div className="absolute top-0 left-0 w-full bg-white pointer-events-none p-[20px] z-[51] border-b border-gray-200">
+              {props.header ? (props.header) : (<div className="text-xl font-bold h-[38px] leading-[38px] flex ">
+                  Navbar
+                </div>)}
+            </div>
             <SideTool dragOnly={dragOnly} deleteAutorized={deleteAutorized}/>
             <Board key={`${viewOnly}`} refs={refsBoard} loadingRender={props === null || props === void 0 ? void 0 : props.loadingRender} disabled={props === null || props === void 0 ? void 0 : props.disabledView}/>
             <ControlPanels action={props.action} transform={(_a = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _a === void 0 ? void 0 : _a.transformRef}/>

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

@@ -2,5 +2,13 @@ interface ControlPanelsProps {
     action?: (file: File) => Promise<string>;
     transform?: any;
 }
-declare const ControlPanels: (props: ControlPanelsProps) => import("react").JSX.Element;
+interface FormPlaceholderContextType {
+    placeholders: Record<string, string>;
+    setPlaceholder: (name: string, placeholder: string) => void;
+    unsetPlaceholder: (name: string) => void;
+    setPlaceholderBulk: (bulk: Record<string, string>) => void;
+    resetPlaceholders: () => void;
+}
+declare const ControlPanels: (props: ControlPanelsProps) => import("react/jsx-runtime").JSX.Element;
 export default ControlPanels;
+export declare const useFormPlaceholder: () => FormPlaceholderContextType;

package/dist/features/panel/index.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, createContext, useRef, useState, useContext } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { Form, Input } from "antd";
 import SelectToolForm from "./select-tool";
@@ -26,6 +26,7 @@ import { SEAT_SHAPES } from "../../utils/constant";
 import { adjustHeightWidthForSeatShape, getSeatCount, getSeatPosition, isSeatShape, } from "./utils";
 import SeatSquare from "./table-seat-square";
 import _ from "lodash";
+const FormPlaceholderContext = createContext(null);
 const ControlPanels = (props) => {
     const { action, transform } = props;
     const dispatch = useAppDispatch();
@@ -37,29 +38,67 @@ const ControlPanels = (props) => {
     const components = useAppSelector((state) => state.board.components);
     const extraComponents = useAppSelector((state) => state.board.extraComponents);
     const svgRef = useRef(null);
+    const [bufferValueForm, setBufferValueForm] = useState(null);
     useEffect(() => {
         svgRef.current = document.querySelectorAll("#workspace");
     }, []);
     const { show } = useAppSelector((state) => state.panel);
     const [open, setOpen] = useState(false);
     const [form] = Form.useForm();
+    const [placeholders, setPlaceholders] = useState({});
+    const [groupBufferSelected, setGroupBufferSelected] = useState([]);
     let values = Form.useWatch([], form);
+    const setPlaceholder = (name, placeholder) => {
+        setPlaceholders((prev) => (Object.assign(Object.assign({}, prev), { [name]: placeholder })));
+    };
+    const unsetPlaceholder = (name) => {
+        setPlaceholders((prev) => {
+            const next = Object.assign({}, prev);
+            delete next[name];
+            return next;
+        });
+    };
+    const setPlaceholderBulk = (bulk) => {
+        setPlaceholders((prev) => (Object.assign(Object.assign({}, prev), bulk)));
+    };
+    const resetPlaceholders = () => setPlaceholders({});
+    useEffect(() => {
+        if (tool.active === "background" || tool.active === "image-table") {
+            setOpen(true);
+        }
+        else {
+            setOpen(false);
+        }
+    }, [tool, show]);
     useEffect(() => {
         if (selectedComponent) {
-            form.resetFields();
+            const id = values === null || values === void 0 ? void 0 : values.id;
+            if (id !== selectedComponent.id) {
+                form.resetFields();
+            }
             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)) {
+            const isPolygon = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "polygon";
+            if (show && (isDifferentId || isSameIdAndSameDimensions || isPolygon)) {
                 setOpen(true);
             }
             form.setFieldsValue(Object.assign(Object.assign({}, selectedComponent), { opacity: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.opacity) * 100, openSpace: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.openSpace) * 100 }));
         }
         else if (selectedGroup) {
-            form.resetFields();
+            // form.resetFields();
+            if (selectedGroup.length === 0) {
+                form.resetFields();
+                return;
+            }
+            const notSameGroup = (selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.length) !== (groupBufferSelected === null || groupBufferSelected === void 0 ? void 0 : groupBufferSelected.length);
+            if (notSameGroup) {
+                form.resetFields();
+                setBufferValueForm(null);
+            }
             if (show)
                 setOpen(true);
             if (!show)
@@ -68,53 +107,100 @@ const ControlPanels = (props) => {
                 if (!arr || arr.length === 0)
                     return false;
                 const firstValue = arr[0][key];
-                return arr.every((item) => item[key] === firstValue);
+                return arr.every((item) => (item === null || item === void 0 ? void 0 : item[key]) === firstValue);
             }
             function getValueIfSame(arr, key) {
+                var _a;
                 if (key === "opacity") {
                     return isSameAllByKey(arr, key)
                         ? Number(arr[0][key]) * 100
                         : undefined;
                 }
                 if (key === "labels") {
-                    const test = arr === null || arr === void 0 ? void 0 : arr.every((item) => _.isEqual(item[key], arr[0][key]));
-                    return (arr === null || arr === void 0 ? void 0 : arr.every((item) => _.isEqual(item[key], arr[0][key])))
-                        ? arr[0][key]
+                    const test = arr === null || arr === void 0 ? void 0 : arr.every((item) => { var _a; return _.isEqual(item === null || item === void 0 ? void 0 : item[key], (_a = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _a === void 0 ? void 0 : _a[key]); });
+                    return (arr === null || arr === void 0 ? void 0 : arr.every((item) => { var _a; return _.isEqual(item === null || item === void 0 ? void 0 : item[key], (_a = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _a === void 0 ? void 0 : _a[key]); }))
+                        ? (_a = arr === null || arr === void 0 ? void 0 : arr[0]) === null || _a === void 0 ? void 0 : _a[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"),
-                seatCount: getValueIfSame(selectedGroup, "seatCount"),
-                seatPositions: getValueIfSame(selectedGroup, "seatPositions"),
-                seatFill: getValueIfSame(selectedGroup, "seatFill"),
-                openSpace: getValueIfSame(selectedGroup, "openSpace"),
-            });
-        }
-        else {
-            setOpen(false);
-        }
-    }, [selectedComponent, selectedGroup, show]);
-    useEffect(() => {
-        if (tool.active === "background" || tool.active === "image-table") {
-            setOpen(true);
+            function getAllValuesKey(arr, key) {
+                return arr
+                    .map((item) => item === null || item === void 0 ? void 0 : item[key])
+                    .filter((value) => value !== undefined)
+                    .sort((a, b) => {
+                    if (typeof a === "number" && typeof b === "number")
+                        return a - b;
+                    return String(a).localeCompare(String(b));
+                })
+                    .filter((value, index, self) => self.indexOf(value) === index);
+            }
+            function showAllValueNotSame(arr, key) {
+                if (key === "opacity") {
+                    return !isSameAllByKey(arr, key)
+                        ? `${getAllValuesKey(arr, key)
+                            .map((value) => Number(value) * 100)
+                            .join(", ")}`
+                        : `${Number(arr[0][key]) * 100}`;
+                }
+                return !isSameAllByKey(arr, key)
+                    ? `${getAllValuesKey(arr, key)}`
+                    : `${arr[0][key]}`;
+            }
+            const fields = [
+                "width",
+                "height",
+                "x",
+                "y",
+                "opacity",
+                "rotation",
+                "radius",
+                "fill",
+                "stroke",
+                "strokeWidth",
+                "shape",
+                "labels",
+                "seatCount",
+                "seatPositions",
+                "seatFill",
+                "openSpace",
+            ];
+            // placeholder (khusus field tertentu saja)
+            const placeholderFields = [
+                "width",
+                "height",
+                "x",
+                "y",
+                "opacity",
+                "rotation",
+                "radius",
+                "strokeWidth",
+            ];
+            // build placeholder
+            const placeholder = Object.fromEntries(placeholderFields.map((key) => [
+                key,
+                showAllValueNotSame(selectedGroup, key),
+            ]));
+            // build values
+            const values = Object.fromEntries(fields.map((key) => [
+                key,
+                (bufferValueForm === null || bufferValueForm === void 0 ? void 0 : bufferValueForm.key) === key
+                    ? bufferValueForm.value
+                    : getValueIfSame(selectedGroup, key),
+            ]));
+            // apply
+            setPlaceholderBulk(placeholder);
+            form.setFieldsValue(values);
+            setGroupBufferSelected(selectedGroup);
+            if (notSameGroup) {
+                form.setFieldValue(`${bufferValueForm === null || bufferValueForm === void 0 ? void 0 : bufferValueForm.key}`, getValueIfSame(selectedGroup, bufferValueForm === null || bufferValueForm === void 0 ? void 0 : bufferValueForm.key));
+            }
         }
         else {
-            setOpen(false);
+            if (tool.active !== "background")
+                setOpen(false);
         }
-    }, [tool, show]);
+    }, [selectedComponent, selectedGroup, show, groupBufferSelected, tool]);
     const createShape = (shape, props = {}, selectedComponent) => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         const defaults = (_a = SEAT_SHAPES[shape]) !== null && _a !== void 0 ? _a : {};
@@ -250,6 +336,7 @@ const ControlPanels = (props) => {
         switch (tool.active) {
             case "select":
             case "text":
+            case "polygon":
                 return _jsx(SelectToolForm, { action: action, tranform: transform });
             case "square":
             case "circle":
@@ -274,7 +361,42 @@ const ControlPanels = (props) => {
             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()] }) }) }));
+    return (_jsx(FormPlaceholderContext.Provider, { value: {
+            placeholders,
+            setPlaceholder,
+            unsetPlaceholder,
+            setPlaceholderBulk,
+            resetPlaceholders,
+        }, children: _jsx("div", { className: clsx("w-[300px] h-full absolute top-0 z-50 transition-all duration-300 overflow-y-scroll mt-[78px]", open ? "right-0" : "right-[-1000px]"), 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", colon: false, onValuesChange: handleChangeComponent, onFocus: (e) => {
+                        var _a, _b, _c;
+                        e.stopPropagation();
+                        const name = e.target.name;
+                        const placeholder = (_c = (_b = (_a = placeholders === null || placeholders === void 0 ? void 0 : placeholders[name]) === null || _a === void 0 ? void 0 : _a.split(",")) === null || _b === void 0 ? void 0 : _b.map(Number)) === null || _c === void 0 ? void 0 : _c.filter((item) => !_.isNaN(item));
+                        const averageValuePlaceHolder = (placeholder === null || placeholder === void 0 ? void 0 : placeholder.reduce((a, b) => a + b, 0)) / (placeholder === null || placeholder === void 0 ? void 0 : placeholder.length);
+                        const value = Math.round(averageValuePlaceHolder);
+                        if (placeholder && placeholder.length > 0) {
+                            setBufferValueForm({
+                                key: name,
+                                value: value,
+                            });
+                            form.setFieldsValue({
+                                [name]: value,
+                            });
+                        }
+                    }, onBlur: (e) => {
+                        e.stopPropagation();
+                        setBufferValueForm(null);
+                        const name = e.target.name;
+                        const value = e.target.value;
+                        if (value) {
+                            handleChangeComponent({ [name]: value }, form.getFieldsValue());
+                        }
+                    }, initialValues: { labels: [{}] }, children: [_jsx(Form.Item, { name: "id", hidden: true, children: _jsx(Input, {}) }), _jsx(Form.Item, { name: "shape", hidden: true, children: _jsx(Input, {}) }), renderFormPanel()] }) }) }) }));
 };
 export default ControlPanels;
+export const useFormPlaceholder = () => {
+    const ctx = useContext(FormPlaceholderContext);
+    if (!ctx)
+        throw new Error("useFormPlaceholder must be used within FormPlaceholderProvider");
+    return ctx;
+};