seat-editor 3.5.5 → 3.5.6

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

@@ -1878,6 +1878,15 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         };
     }, []);
     const hasSelectionBox = !isEmpty(selectedLines);
+    const [cursor, setCursor] = useState("auto");
+    useEffect(() => {
+        if (activeTool === "grab") {
+            setCursor("grab");
+        }
+        else {
+            setCursor("auto");
+        }
+    }, [activeTool]);
     return (_jsxs(_Fragment, { children: [_jsxs(ModalPreview, { children: [_jsx(LayerView, { statusKey: "status", loadingRender: loadingRender, actionPrivileged: {
                             select: false,
                             move: false,
@@ -1922,13 +1931,21 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                         }, 
                         // centerZoomedOut={true}
                         // onTransformed={handleTransformed}
-                        minScale: 0.2, maxScale: 2, initialScale: scale, pinch: { step: 1 }, wheel: { disabled: true }, smooth: true, doubleClick: { step: 1, disabled: activeTool === "select" }, disablePadding: true, centerOnInit: true, children: _jsx(TransformComponent, { wrapperStyle: {
+                        minScale: 0.2, maxScale: 2, initialScale: scale, pinch: { step: 1 }, wheel: { disabled: true }, smooth: true, onPanning: (e) => { }, onPanningStop: (e) => {
+                            if (activeTool === "grab") {
+                                setCursor("grab");
+                            }
+                        }, onPanningStart: (e) => {
+                            if (activeTool === "grab") {
+                                setCursor("grabbing");
+                            }
+                        }, doubleClick: { step: 1, disabled: activeTool === "select" }, disablePadding: true, centerOnInit: true, children: _jsx(TransformComponent, { wrapperStyle: {
                                 width: "100%",
                                 height: "100%",
                             }, contentStyle: { width: boardSize.width, height: boardSize.height }, children: _jsxs("svg", { id: "workspace", ref: svgRef, width: boardSize.width, height: boardSize.height, viewBox: `${minCoords.x} ${minCoords.y} ${boardSize.width} ${boardSize.height}`, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
                                     background: backgroundColor,
                                     display: "block",
-                                    cursor: activeTool === "ruler" ? "crosshair" : "auto",
+                                    cursor,
                                     touchAction: "none",
                                     pointerEvents: "all",
                                     userSelect: "none",

package/dist/features/board-v3/index.jsx

@@ -1877,6 +1877,15 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         };
     }, []);
     const hasSelectionBox = !isEmpty(selectedLines);
+    const [cursor, setCursor] = useState("auto");
+    useEffect(() => {
+        if (activeTool === "grab") {
+            setCursor("grab");
+        }
+        else {
+            setCursor("auto");
+        }
+    }, [activeTool]);
     return (<>
       <ModalPreview>
         <LayerView statusKey="status" loadingRender={loadingRender} actionPrivileged={{
@@ -1958,7 +1967,15 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
     // centerZoomedOut={true}
     // onTransformed={handleTransformed}
     minScale={0.2} // sangat kecil = bisa zoom out jauh
-     maxScale={2} initialScale={scale} pinch={{ step: 1 }} wheel={{ disabled: true }} smooth={true} doubleClick={{ step: 1, disabled: activeTool === "select" }} disablePadding centerOnInit>
+     maxScale={2} initialScale={scale} pinch={{ step: 1 }} wheel={{ disabled: true }} smooth={true} onPanning={(e) => { }} onPanningStop={(e) => {
+            if (activeTool === "grab") {
+                setCursor("grab");
+            }
+        }} onPanningStart={(e) => {
+            if (activeTool === "grab") {
+                setCursor("grabbing");
+            }
+        }} doubleClick={{ step: 1, disabled: activeTool === "select" }} disablePadding centerOnInit>
           {/* {scale !== 1 && ( */}
           {/* <div className="absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10"> */}
           {/* {renderMiniMap()} */}
@@ -1971,7 +1988,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             <svg id="workspace" ref={svgRef} width={boardSize.width} height={boardSize.height} viewBox={`${minCoords.x} ${minCoords.y} ${boardSize.width} ${boardSize.height}`} onPointerDown={handlePointerDown} onPointerMove={handlePointerMove} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
             background: backgroundColor,
             display: "block",
-            cursor: activeTool === "ruler" ? "crosshair" : "auto",
+            cursor,
             touchAction: "none",
             pointerEvents: "all",
             userSelect: "none",

package/dist/features/panel/index.js

@@ -23,7 +23,7 @@ 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 { adjustHeightWidthForSeatShape, getSeatCount, getSeatPosition, getValueIfSame, isSeatShape, showAllValueNotSame, } from "./utils";
 import SeatSquare from "./table-seat-square";
 import _ from "lodash";
 const FormPlaceholderContext = createContext(null);
@@ -105,50 +105,6 @@ const ControlPanels = (props) => {
                 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 === 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) => { 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;
-            }
-            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",
@@ -203,11 +159,11 @@ const ControlPanels = (props) => {
                 setOpen(false);
         }
     }, [selectedComponent, selectedGroup, show, groupBufferSelected, tool]);
-    const createShape = (shape, props = {}, selectedComponent) => {
+    const createShape = (shape, props = {}, selectedComponent, valuesChanges) => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         const defaults = (_a = SEAT_SHAPES[shape]) !== null && _a !== void 0 ? _a : {};
         const seatDefault = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey];
-        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, seatDefault), seatPositions: getSeatPosition(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props, seatDefault), openSpace: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape)
+        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, valuesChanges)) === 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, valuesChanges)) === 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, seatDefault), seatPositions: getSeatPosition(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props, seatDefault), 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)
                 ? (_f = props.seatFill) !== null && _f !== void 0 ? _f : theme === null || theme === void 0 ? void 0 : theme.primaryColor
@@ -282,7 +238,7 @@ const ControlPanels = (props) => {
     const handleChangeComponent = (values, allValues) => {
         var _a, _b, _c;
         const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
-        const newValues = createShape(shape, restProps, selectedComponent);
+        const newValues = createShape(shape, restProps, selectedComponent, values);
         if (selectedComponent) {
             updateElement(allValues.id, values);
             debouncedSyncComponents.current(Object.assign(Object.assign(Object.assign({}, (selectedComponent || {})), newValues), { opacity: ((_a = newValues === null || newValues === void 0 ? void 0 : newValues.opacity) !== null && _a !== void 0 ? _a : 100) / 100, openSpace: ((_b = newValues === null || newValues === void 0 ? void 0 : newValues.openSpace) !== null && _b !== void 0 ? _b : 0) / 100 }));

package/dist/features/panel/index.jsx

@@ -22,7 +22,7 @@ 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 { adjustHeightWidthForSeatShape, getSeatCount, getSeatPosition, getValueIfSame, isSeatShape, showAllValueNotSame, } from "./utils";
 import SeatSquare from "./table-seat-square";
 import _ from "lodash";
 const FormPlaceholderContext = createContext(null);
@@ -104,50 +104,6 @@ const ControlPanels = (props) => {
                 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 === 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) => { 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;
-            }
-            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",
@@ -202,11 +158,11 @@ const ControlPanels = (props) => {
                 setOpen(false);
         }
     }, [selectedComponent, selectedGroup, show, groupBufferSelected, tool]);
-    const createShape = (shape, props = {}, selectedComponent) => {
+    const createShape = (shape, props = {}, selectedComponent, valuesChanges) => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         const defaults = (_a = SEAT_SHAPES[shape]) !== null && _a !== void 0 ? _a : {};
         const seatDefault = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey];
-        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, seatDefault), seatPositions: getSeatPosition(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props, seatDefault), openSpace: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape)
+        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, valuesChanges)) === 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, valuesChanges)) === 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, seatDefault), seatPositions: getSeatPosition(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props, seatDefault), 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)
                 ? (_f = props.seatFill) !== null && _f !== void 0 ? _f : theme === null || theme === void 0 ? void 0 : theme.primaryColor
@@ -281,7 +237,7 @@ const ControlPanels = (props) => {
     const handleChangeComponent = (values, allValues) => {
         var _a, _b, _c;
         const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
-        const newValues = createShape(shape, restProps, selectedComponent);
+        const newValues = createShape(shape, restProps, selectedComponent, values);
         if (selectedComponent) {
             updateElement(allValues.id, values);
             debouncedSyncComponents.current(Object.assign(Object.assign(Object.assign({}, (selectedComponent || {})), newValues), { opacity: ((_a = newValues === null || newValues === void 0 ? void 0 : newValues.opacity) !== null && _a !== void 0 ? _a : 100) / 100, openSpace: ((_b = newValues === null || newValues === void 0 ? void 0 : newValues.openSpace) !== null && _b !== void 0 ? _b : 0) / 100 }));

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

@@ -39,7 +39,7 @@ const SelectedGroup = () => {
                                         return (_jsx(Option, { value: item.value, disabled: disabled, children: item.value === "table-seat-rect-circle"
                                                 ? `Type 5 (only for 4 ${seatKey})`
                                                 : item.label }, item.value));
-                                    }) }) }) })), _jsxs(Flex, { gap: 2, className: "w-full", vertical: true, children: [!shapeAllIncludePolygon && (_jsxs(_Fragment, { children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { suffix: "px", name: "width", placeholder: placeholders["width"], style: { width: "100%" } }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { suffix: "px", name: "height", placeholder: placeholders["height"], style: { width: "100%" } }) })] })), !(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && !shapeAllIncludePolygon && (_jsx(Form.Item, { label: "Radius", name: "radius", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { name: "radius", suffix: "px", style: { width: "100%" }, placeholder: placeholders["radius"], parser: (value) => {
+                                    }) }) }) })), _jsxs(Flex, { gap: 2, className: "w-full", vertical: true, children: [!shapeAllIncludePolygon && (_jsxs(_Fragment, { children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { suffix: "px", name: "width", changeOnWheel: true, placeholder: placeholders["width"], style: { width: "100%" } }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { suffix: "px", name: "height", placeholder: placeholders["height"], style: { width: "100%" } }) })] })), !(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && !shapeAllIncludePolygon && (_jsx(Form.Item, { label: "Radius", name: "radius", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { name: "radius", suffix: "px", style: { width: "100%" }, placeholder: placeholders["radius"], 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 === ""

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

@@ -73,7 +73,7 @@ const SelectedGroup = () => {
           <Flex gap={2} className="w-full" vertical>
             {!shapeAllIncludePolygon && (<>
                 <Form.Item label="Width" name="width" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
-                  <InputNumber suffix="px" name="width" placeholder={placeholders["width"]} style={{ width: "100%" }}/>
+                  <InputNumber suffix="px" name="width" changeOnWheel placeholder={placeholders["width"]} style={{ width: "100%" }}/>
                 </Form.Item>
                 <Form.Item label="Height" name="height" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
                   <InputNumber suffix="px" name="height" placeholder={placeholders["height"]} style={{ width: "100%" }}/>

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

@@ -13,7 +13,6 @@ import { useState, useEffect } from "react";
 import { Upload, Image, Button, Form, Flex } from "antd";
 import { InboxOutlined, LoadingOutlined } from "@ant-design/icons";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
-import SectionLabel from "../../components/form-tools/label";
 import SectionShape from "../../components/form-tools/shape";
 const { Dragger } = Upload;
 const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
@@ -161,6 +160,6 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
         dispatch({ type: "panel/setShow", payload: false });
         dispatch({ type: "tool/setActiveTool", payload: "select" });
     };
-    return (_jsxs(Form.Item, { label: "", name: "src", className: "w-full", children: [defaultSrc ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto", children: _jsx(Image, { src: defaultSrc }) }), _jsxs(Flex, { vertical: true, gap: 5, children: [_jsx(Button, { type: "primary", onClick: handleDelete, className: "w-full mt-4", loading: loading, children: "Edit" }), _jsx(Button, { type: "default", onClick: deleteImages, className: "w-full", loading: loading, children: "Delete" })] })] })) : (_jsx(Dragger, Object.assign({ beforeUpload: () => false }, propsUpload, { children: loading ? (_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px]", children: _jsx(LoadingOutlined, {}) })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "ant-upload-drag-icon", children: _jsx(InboxOutlined, {}) }), _jsx("p", { className: "ant-upload-text", children: "Click or drag file to this area to upload" }), _jsx("p", { className: "ant-upload-hint", children: "Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files." })] })) }))), (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) && (_jsxs(_Fragment, { children: [_jsx(SectionShape, { allowChangeShape: type === "component" }), _jsx(SectionLabel, {})] }))] }));
+    return (_jsxs(Form.Item, { label: "", name: "src", className: "w-full", children: [defaultSrc ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto", children: _jsx(Image, { src: defaultSrc }) }), _jsxs(Flex, { vertical: true, gap: 5, children: [_jsx(Button, { type: "primary", onClick: handleDelete, className: "w-full mt-4", loading: loading, children: "Edit" }), _jsx(Button, { type: "default", onClick: deleteImages, className: "w-full", loading: loading, children: "Delete" })] })] })) : (_jsx(Dragger, Object.assign({ beforeUpload: () => false }, propsUpload, { children: loading ? (_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px]", children: _jsx(LoadingOutlined, {}) })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "ant-upload-drag-icon", children: _jsx(InboxOutlined, {}) }), _jsx("p", { className: "ant-upload-text", children: "Click or drag file to this area to upload" }), _jsx("p", { className: "ant-upload-hint", children: "Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files." })] })) }))), (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) && (_jsx(_Fragment, { children: _jsx(SectionShape, { allowChangeShape: type === "component" }) }))] }));
 };
 export default UploadTool;

package/dist/features/panel/upload-tool.jsx

@@ -12,7 +12,6 @@ import { useState, useEffect } from "react";
 import { Upload, Image, Button, Form, Flex } from "antd";
 import { InboxOutlined, LoadingOutlined } from "@ant-design/icons";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
-import SectionLabel from "../../components/form-tools/label";
 import SectionShape from "../../components/form-tools/shape";
 const { Dragger } = Upload;
 const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
@@ -191,7 +190,7 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
         </Dragger>)}
       {(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) && (<>
           <SectionShape allowChangeShape={type === "component"}/>
-          <SectionLabel />
+          {/* <SectionLabel /> */}
         </>)}
     </Form.Item>);
 };

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

@@ -8,4 +8,19 @@ export declare const getSeatPosition: (shape: string, props: PropertiesProps, de
     bottom: number;
     left: number;
 };
-export declare const adjustHeightWidthForSeatShape: (shape: string, props: any) => any;
+export declare const adjustHeightWidthForSeatShape: (shape: string, props: any, valuesChanges: {
+    [key: string]: any;
+}) => any;
+type SeatPosition = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare function normalizeSeatPosition(input: SeatPosition): SeatPosition;
+export declare function getTotalSeats(position: SeatPosition): number;
+export declare function isSameAllByKey<T>(arr: T[] | undefined, key: keyof T): boolean;
+export declare function getValueIfSame<T>(arr: T[], key: keyof T): number | any[] | T[keyof T];
+export declare function getAllValuesKey<T>(arr: T[], key: keyof T): T[keyof T][];
+export declare function showAllValueNotSame(arr: any[], key: string): string;
+export {};

package/dist/features/panel/utils.js

@@ -1,3 +1,4 @@
+import _ from "lodash";
 import { SEAT_SHAPES } from "../../utils/constant";
 import { MIN_HEIGHT, MIN_WIDTH } from "../board-v3/constant";
 export const isSeatShape = (shape) => SEAT_SHAPES.includes(shape);
@@ -56,10 +57,13 @@ export const getSeatPosition = (shape, props, defaultValue) => {
     }
     return distributeSeats(seatCountDefault);
 };
-export const adjustHeightWidthForSeatShape = (shape, props) => {
+export const adjustHeightWidthForSeatShape = (shape, props, valuesChanges) => {
     if (shape === null || shape === void 0 ? void 0 : shape.includes("circle")) {
         const sizeDefault = Math.min(props.width, props.height);
-        const sizeFinal = sizeDefault < MIN_WIDTH ? MIN_WIDTH : sizeDefault;
+        let sizeFinal = sizeDefault < MIN_WIDTH ? MIN_WIDTH : sizeDefault;
+        if ((valuesChanges === null || valuesChanges === void 0 ? void 0 : valuesChanges.width) || (valuesChanges === null || valuesChanges === void 0 ? void 0 : valuesChanges.height)) {
+            sizeFinal = (valuesChanges === null || valuesChanges === void 0 ? void 0 : valuesChanges.width) || (valuesChanges === null || valuesChanges === void 0 ? void 0 : valuesChanges.height) || sizeDefault;
+        }
         return Object.assign(Object.assign({}, props), { height: isNaN(sizeFinal) ? MIN_WIDTH : sizeFinal, width: isNaN(sizeFinal) ? MIN_HEIGHT : sizeFinal });
     }
     return props;
@@ -82,7 +86,7 @@ function distributeSeats(seatCount) {
     }
     return result;
 }
-function normalizeSeatPosition(input) {
+export function normalizeSeatPosition(input) {
     const clamp = (value) => Math.max(0, Math.min(1, value));
     return {
         top: clamp(input.top),
@@ -91,7 +95,7 @@ function normalizeSeatPosition(input) {
         left: clamp(input.left),
     };
 }
-function getTotalSeats(position) {
+export function getTotalSeats(position) {
     const { top, right, bottom, left } = position || {
         top: 0,
         right: 0,
@@ -100,3 +104,46 @@ function getTotalSeats(position) {
     };
     return top + right + bottom + left;
 }
+export function isSameAllByKey(arr, key) {
+    if (!arr || arr.length === 0)
+        return false;
+    const firstValue = arr[0][key];
+    return arr.every((item) => (item === null || item === void 0 ? void 0 : item[key]) === firstValue);
+}
+export function getValueIfSame(arr, key) {
+    var _a;
+    if (key === "opacity") {
+        return isSameAllByKey(arr, key)
+            ? Number(arr[0][key]) * 100
+            : undefined;
+    }
+    if (key === "labels") {
+        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;
+}
+export 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);
+}
+export 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]}`;
+}

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Grid, Lock, LockOpen, Undo2, Redo2, PenTool, Scan, ScanEye, } from "lucide-react";
+import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Type, Upload, Hand, Layers, Grid, Lock, LockOpen, Undo2, Redo2, PenTool, Scan, ScanEye, } from "lucide-react";
 import ButtonTools from "../../components/button-tools";
 import { Divider, ColorPicker, Button, message, Popover, Flex, } from "antd";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
@@ -367,15 +367,6 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
                     content: _jsx("div", { children: "Grid Tool" }),
                     trigger: "hover",
                     placement: "right",
-                } }), _jsx(ButtonTools, { buttonProps: {
-                    onClick: () => handleRemoveComponent(),
-                    icon: _jsx(Trash, {}),
-                    type: "text",
-                    name: "trash",
-                }, items: [], popoverProps: {
-                    content: _jsx("div", { children: "Trash Tool" }),
-                    trigger: "hover",
-                    placement: "right",
                 } }), _jsx(ButtonTools, { buttonProps: {
                     onClick: () => toogleSetLockBackground(),
                     icon: lockBackground ? _jsx(Lock, {}) : _jsx(LockOpen, {}),

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

@@ -1,5 +1,5 @@
 "use client";
-import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Grid, Lock, LockOpen, Undo2, Redo2, PenTool, Scan, ScanEye, } from "lucide-react";
+import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Type, Upload, Hand, Layers, Grid, Lock, LockOpen, Undo2, Redo2, PenTool, Scan, ScanEye, } from "lucide-react";
 import ButtonTools from "../../components/button-tools";
 import { Divider, ColorPicker, Button, message, Popover, Flex, } from "antd";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
@@ -392,16 +392,20 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
             trigger: "hover",
             placement: "right",
         }}/>
-      <ButtonTools buttonProps={{
+      {/* <ButtonTools
+          buttonProps={{
             onClick: () => handleRemoveComponent(),
             icon: <Trash />,
             type: "text",
             name: "trash",
-        }} items={[]} popoverProps={{
+          }}
+          items={[]}
+          popoverProps={{
             content: <div>Trash Tool</div>,
             trigger: "hover",
             placement: "right",
-        }}/>
+          }}
+        /> */}
       <ButtonTools buttonProps={{
             onClick: () => toogleSetLockBackground(),
             icon: lockBackground ? <Lock /> : <LockOpen />,

package/package.json

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