seat-editor 3.4.8 → 3.5.0

package/dist/components/form-tools/label.jsx

@@ -1,11 +1,11 @@
 "use client";
-import { Button, ColorPicker, Flex, Form, Input, InputNumber, Divider, } from "antd";
+import { ColorPicker, Flex, Form, Input, InputNumber, Divider } from "antd";
 const SectionLabel = () => {
     return (<div className="py-2">
       <h1 className="heading-s">Section Labeling</h1>
       <Divider style={{ margin: 4 }}/>
 
-      <Form.Item label="Labels in table" name={"labels"} className="w-full">
+      <Form.Item label="Labels in table" name={["labels", 0, "label"]} className="w-full">
         <Form.List name="labels">
           {(fields, { add, remove }) => (<>
               {fields.map((field) => (<div key={field.key} className="w-full flex-col mb-2">
@@ -40,33 +40,43 @@ const SectionLabel = () => {
                       <ColorPicker allowClear format="hex" defaultFormat="hex"/>
                     </Form.Item>
                   </Flex>
-                  {fields.length > 1 && (<Flex gap={2} className="w-full">
-                      <Button 
-                // type="dashed"
-                onClick={() => remove(fields.indexOf(field))} className="w-full">
-                        Remove
-                      </Button>
-                    </Flex>)}
+                  {/* {fields.length > 1 && (
+                  <Flex gap={2} className="w-full">
+                    <Button
+                      // type="dashed"
+                      onClick={() => remove(fields.indexOf(field))}
+                      className="w-full"
+                    >
+                      Remove
+                    </Button>
+                  </Flex>
+                )} */}
                 </div>))}
-              <Flex gap={2} className="w-full mt-2">
-                {/* <Button
-              // type="dashed"
-              onClick={() => remove(fields.length - 1)}
-              className="w-full"
-            >
-              Remove
-            </Button> */}
-                <Button type="primary" onClick={() => add({
-                label: "",
-                fontColor: "#000000",
-                x: 0,
-                y: 0,
-                fontSize: 12,
-                rotation: 0,
-            })} className="w-full">
-                  Add
-                </Button>
-              </Flex>
+              {/* <Flex gap={2} className="w-full mt-2">
+              <Button
+                // type="dashed"
+                onClick={() => remove(fields.length - 1)}
+                className="w-full"
+              >
+                Remove
+              </Button>
+              <Button
+                type="primary"
+                onClick={() =>
+                  add({
+                    label: "",
+                    fontColor: "#000000",
+                    x: 0,
+                    y: 0,
+                    fontSize: 12,
+                    rotation: 0,
+                  })
+                }
+                className="w-full"
+              >
+                Add
+              </Button>
+            </Flex> */}
             </>)}
         </Form.List>
       </Form.Item>

package/dist/components/form-tools/shape.d.ts

@@ -4,5 +4,5 @@ export declare const optionsShape: {
 }[];
 declare const SectionShape: ({ allowChangeShape, }: {
     allowChangeShape?: boolean;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SectionShape;

package/dist/components/form-tools/shape.js

@@ -46,26 +46,26 @@ const SectionShape = ({ allowChangeShape = true, }) => {
                             const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
                             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", children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", children: _jsx(InputNumber, { suffix: "px", controls: true, parser: (value) => {
+                        }) }) }) })), _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, name: "width", step: 1, 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) => {
+                            } }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", children: _jsx(InputNumber, { suffix: "px", controls: true, step: 1, name: "height", 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));
-                            } }) }), !(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && (_jsx(Form.Item, { label: "Radius", name: "radius", className: "w-full", children: _jsx(InputNumber, { suffix: "px", parser: (value) => {
+                            } }) }), !(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && (_jsx(Form.Item, { label: "Radius", name: "radius", className: "w-full", children: _jsx(InputNumber, { suffix: "px", name: "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 === "" ? 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) => {
+                            } }) }))] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Position X", name: "x", className: "w-full", children: _jsx(InputNumber, { name: "x", step: 1 }) }), _jsx(Form.Item, { label: "Position Y", name: "y", className: "w-full", children: _jsx(InputNumber, { name: "y", step: 1 }) }), _jsx(Form.Item, { label: "Rotation", name: "rotation", className: "w-full", children: _jsx(InputNumber, { suffix: "\u00B0", min: 0, step: 1, max: 360, name: "rotation", 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));
-                            } }) })] }), _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 Fill", name: "stroke", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Stroke", name: "strokeWidth", className: "w-full", children: _jsx(InputNumber, {}) })] }), _jsx(Flex, { children: _jsx(Form.Item, { label: "opacity", name: "opacity", className: "w-full", children: _jsx(InputNumber, { step: 10, max: 100, min: 0, parser: (value) => {
+                            } }) })] }), _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 Fill", name: "stroke", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Stroke Size", name: "strokeWidth", className: "w-full", children: _jsx(InputNumber, {}) })] }), _jsx(Flex, { children: _jsx(Form.Item, { label: "opacity", name: "opacity", className: "w-full", children: _jsx(InputNumber, { step: 10, max: 100, min: 0, name: "opacity", parser: (value) => {
                             if (value === undefined || value === null || value === "")
                                 return null;
                             const cleaned = value.replace(/[^0-9.]/g, "");

package/dist/components/form-tools/shape.jsx

@@ -58,21 +58,21 @@ const SectionShape = ({ allowChangeShape = true, }) => {
         </Flex>)}
       <Flex gap={2} className="w-full">
         <Form.Item label="Width" name="width" className="w-full">
-          <InputNumber suffix="px" controls parser={(value) => {
+          <InputNumber suffix="px" controls name="width" step={1} 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));
         }}/>
         </Form.Item>
         <Form.Item label="Height" name="height" className="w-full">
-          <InputNumber suffix="px" parser={(value) => {
+          <InputNumber suffix="px" controls step={1} name="height" 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));
         }}/>
         </Form.Item>
         {!(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && (<Form.Item label="Radius" name="radius" className="w-full">
-            <InputNumber suffix="px" parser={(value) => {
+            <InputNumber suffix="px" name="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 === "" ? 1 : Math.max(1, Number(onlyNumber));
@@ -81,13 +81,13 @@ const SectionShape = ({ allowChangeShape = true, }) => {
       </Flex>
       <Flex gap={2}>
         <Form.Item label="Position X" name="x" className="w-full">
-          <InputNumber />
+          <InputNumber name="x" step={1}/>
         </Form.Item>
         <Form.Item label="Position Y" name="y" className="w-full">
-          <InputNumber />
+          <InputNumber name="y" step={1}/>
         </Form.Item>
         <Form.Item label="Rotation" name="rotation" className="w-full">
-          <InputNumber suffix="°" min={0} max={360} parser={(value) => {
+          <InputNumber suffix="°" min={0} step={1} max={360} name="rotation" parser={(value) => {
             if (!value)
                 return 0;
             const num = Number(value.replace(/\D/g, ""));
@@ -104,13 +104,13 @@ const SectionShape = ({ allowChangeShape = true, }) => {
         <Form.Item label="Stroke Fill" name={"stroke"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
           <ColorPicker allowClear format="hex" defaultFormat="hex"/>
         </Form.Item>
-        <Form.Item label="Stroke" name={"strokeWidth"} className="w-full">
+        <Form.Item label="Stroke Size" name={"strokeWidth"} className="w-full">
           <InputNumber />
         </Form.Item>
       </Flex>
       <Flex>
         <Form.Item label="opacity" name={"opacity"} className="w-full">
-          <InputNumber step={10} max={100} min={0} parser={(value) => {
+          <InputNumber step={10} max={100} min={0} name="opacity" parser={(value) => {
             if (value === undefined || value === null || value === "")
                 return null;
             const cleaned = value.replace(/[^0-9.]/g, "");

package/dist/components/input/number-indicator.d.ts

@@ -3,5 +3,5 @@ interface NumberIndicatorProps {
     defaultValue?: number;
     onChange: (value: number) => void;
 }
-declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react").JSX.Element;
+declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react/jsx-runtime").JSX.Element;
 export default NumberIndicator;

package/dist/components/joystick/index.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 type JoystickPosition = {
     x: number;
     y: number;
@@ -8,5 +7,5 @@ type JoystickProps = {
     onMove?: (pos: JoystickPosition) => void;
     onEnd?: () => void;
 };
-export declare const Joystick: ({ size, onMove, onEnd, }: JoystickProps) => React.JSX.Element;
+export declare const Joystick: ({ size, onMove, onEnd, }: JoystickProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/layer/index.d.ts

@@ -15,5 +15,5 @@ interface LayersProps {
     onTouchMove?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
     onTouchEnd?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
 }
-declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchEnd, onTouchMove, onTouchStart }: LayersProps) => import("react").JSX.Element;
+declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchEnd, onTouchMove, onTouchStart }: LayersProps) => import("react/jsx-runtime").JSX.Element;
 export default Layers;

package/dist/components/layer-v2/index.d.ts

@@ -15,5 +15,5 @@ interface LayersProps {
     onTouchMove?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
     onTouchEnd?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
 }
-declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchStart }: LayersProps) => import("react").JSX.Element;
+declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchStart }: LayersProps) => import("react/jsx-runtime").JSX.Element;
 export default Layers;

package/dist/components/layer-v3/index.d.ts

@@ -9,5 +9,5 @@ interface LayersProps {
     activeTool?: string;
     selectionLines?: SelectionLines;
 }
-declare const Layers: ({ components, selectedComponent, activeTool, selectionLines, }: LayersProps) => import("react").JSX.Element;
+declare const Layers: ({ components, selectedComponent, activeTool, selectionLines, }: LayersProps) => import("react/jsx-runtime").JSX.Element;
 export default Layers;

package/dist/components/layer-v3/index.js

@@ -4,10 +4,18 @@ import { createElement as _createElement } from "react";
 import { isEmpty, omit } from "lodash";
 import { arcByDirection, distributeWithSpacing, rectToPolygonNodes, rectToPolygonPoints, } from "./utils";
 import { useAppSelector } from "../../hooks/use-redux";
+import { useMemo } from "react";
 const Layers = ({ components, selectedComponent, activeTool, selectionLines, }) => {
     var _a;
     const hasPoints = selectionLines && !isEmpty(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.points);
     const lockBackground = useAppSelector((state) => state.tool.lockBackground);
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    const allSelectionId = useMemo(() => {
+        const ids = (selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.map((item) => item === null || item === void 0 ? void 0 : item.id)) || [];
+        if (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id)
+            ids.push(selectedComponent.id);
+        return ids;
+    }, [selectedGroup, selectedComponent]);
     const renderShape = (item) => {
         var _a, _b, _c, _d, _e, _f;
         const { id, x, y, width, height, fill, opacity, rotation = 0, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, label, seatFill, src, points, seatPositions, radius = 0, } = item;
@@ -17,6 +25,19 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
             stroke,
             strokeWidth,
         };
+        const selectionBox = {
+            stroke: "#3b82f6",
+            strokeWidth: 4,
+            width: width + strokeWidth + 2,
+            height: height + strokeWidth + 2,
+            x: x - strokeWidth / 2,
+            y: y - strokeWidth / 2,
+            opacity: 0,
+        };
+        if (allSelectionId === null || allSelectionId === void 0 ? void 0 : allSelectionId.includes(id)) {
+            commonProps.stroke = "#ffa39e";
+            commonProps.strokeWidth = 4;
+        }
         switch (shape) {
             case "square":
                 return (_jsx("g", { "data-id": id, id: `${id}`, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_createElement("rect", Object.assign({}, commonProps, { key: id, width: width, height: height, rx: radius })), _jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
@@ -42,7 +63,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                 const showPoints = (selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.id) == id;
                 return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_createElement("polygon", Object.assign({}, commonProps, { key: id, points: finalPoint, x: "0", y: "0" })), (showPoints || !isClosed) &&
                                 points.map((_, index) => {
-                                    return (_jsxs(_Fragment, { children: [_jsx("rect", { "data-point": JSON.stringify(_), id: `${index}`, x: (_ === null || _ === void 0 ? void 0 : _.x) - 5, y: (_ === null || _ === void 0 ? void 0 : _.y) - 5, width: 10, height: 10, fill: "#4a90e2", cursor: "pointer" }, `${id}-point-${index}`), _jsx("circle", { "data-point": JSON.stringify(_), id: `${index}`, cx: _ === null || _ === void 0 ? void 0 : _.x, cy: _ === null || _ === void 0 ? void 0 : _.y, r: 15, fill: "transparent", cursor: "pointer" }, `${id}-point-${index}`)] }));
+                                    return (_jsxs(_Fragment, { children: [_jsx("rect", { "data-point": JSON.stringify(_), id: `${index}`, x: (_ === null || _ === void 0 ? void 0 : _.x) - 5, y: (_ === null || _ === void 0 ? void 0 : _.y) - 5, width: 10, height: 10, fill: "#4a90e2", cursor: "pointer" }, `${id}-point-${index}`), _jsx("circle", { "data-point": JSON.stringify(_), id: `${index}`, cx: _ === null || _ === void 0 ? void 0 : _.x, cy: _ === null || _ === void 0 ? void 0 : _.y, r: 15, fill: "transparent", cursor: "pointer" }, `${id}-point-${index - 100}`)] }));
                                 })] }) }, id));
             case "selection-box":
                 const pointsFormat = rectToPolygonPoints(x, y, width, height);
@@ -85,7 +106,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                     const cy = centerY + (tableRadius + seatRadius) * Math.sin(angle);
                     return { cx, cy };
                 });
-                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: centerX, cy: centerY, r: tableRadius, fill: fill }, commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius, fill: seatFill }, `${id}-seat-${i}`))) }), _jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: centerX, cy: centerY, r: tableRadius, fill: fill }, commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", Object.assign({ cx: cx, cy: cy, r: seatRadius, fill: seatFill }, commonProps), `${id}-seat-${i}`))) }), _jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
                                     var _a, _b, _c, _d, _e, _f, _g;
                                     const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
                                     const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
@@ -434,7 +455,23 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                                     ]), { transform: `rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`, key: `${id}-label-${index}`, x: width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0), y: height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0), fill: (_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black", fontSize: `${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle" }), _ === null || _ === void 0 ? void 0 : _.label));
                                 }) })] }) }, id));
             case "bounding-box": {
-                return (_jsx("g", { transform: `translate(${x}, ${y})`, "data-bounding-box": id, children: _jsx("rect", { width: width, height: height, fill: "none", stroke: "#3b82f6", strokeWidth: 1, strokeDasharray: "6 4", pointerEvents: "none" }) }, id));
+                const topLine = `${0},${0} ${width},${0}`;
+                const rightLine = `${width},${0} ${width},${height}`;
+                const bottomLine = `${width},${height} ${0},${height}`;
+                const leftLine = `${0},${height} ${0},${0}`;
+                return (_jsxs("g", { id: "bounding-box", transform: `translate(${x}, ${y})`, "data-bounding-box": id, children: [_jsx("rect", { width: width, height: height, fill: "none", stroke: "#3b82f6", strokeWidth: 1, strokeDasharray: "6 4", pointerEvents: "none" }), _jsx("polyline", { points: topLine, fill: "none", stroke: "transparent", strokeWidth: 3, "data-position": "top-boundaries", style: {
+                                pointerEvents: activeTool === "bounding-box" ? "none" : "stroke",
+                                cursor: "row-resize",
+                            } }), _jsx("polyline", { points: rightLine, fill: "none", stroke: "transparent", strokeWidth: 3, "data-position": "right-boundaries", style: {
+                                pointerEvents: activeTool === "bounding-box" ? "none" : "stroke",
+                                cursor: "col-resize",
+                            } }), _jsx("polyline", { points: bottomLine, fill: "none", stroke: "transparent", strokeWidth: 3, "data-position": "bottom-boundaries", style: {
+                                pointerEvents: activeTool === "bounding-box" ? "none" : "stroke",
+                                cursor: "row-resize",
+                            } }), _jsx("polyline", { points: leftLine, fill: "none", stroke: "transparent", strokeWidth: 3, "data-position": "left-boundaries", style: {
+                                pointerEvents: activeTool === "bounding-box" ? "none" : "stroke",
+                                cursor: "col-resize",
+                            } })] }, id));
             }
             default:
                 return _jsx("g", {}, id);
@@ -442,6 +479,10 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
     };
     let date = new Date();
     const nodesRaw = rectToPolygonNodes(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.width, selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.height);
+    // const nodesRawNew = rectToPolygonNodes(
+    //   selectionLinesPoints?.width,
+    //   selectionLinesPoints?.height
+    // );
     return (_jsxs("g", { id: "selection-layer", children: [components === null || components === void 0 ? void 0 : components.map(renderShape), !isEmpty(selectionLines) && activeTool === "select" && (_jsxs(_Fragment, { children: [nodesRaw.map((p1, index) => {
                         const p2 = nodesRaw[(index + 2) % nodesRaw.length];
                         const side = index === 0

package/dist/components/layer-v3/index.jsx

@@ -2,10 +2,18 @@
 import { isEmpty, omit } from "lodash";
 import { arcByDirection, distributeWithSpacing, rectToPolygonNodes, rectToPolygonPoints, } from "./utils";
 import { useAppSelector } from "../../hooks/use-redux";
+import { useMemo } from "react";
 const Layers = ({ components, selectedComponent, activeTool, selectionLines, }) => {
     var _a;
     const hasPoints = selectionLines && !isEmpty(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.points);
     const lockBackground = useAppSelector((state) => state.tool.lockBackground);
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    const allSelectionId = useMemo(() => {
+        const ids = (selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.map((item) => item === null || item === void 0 ? void 0 : item.id)) || [];
+        if (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id)
+            ids.push(selectedComponent.id);
+        return ids;
+    }, [selectedGroup, selectedComponent]);
     const renderShape = (item) => {
         var _a, _b, _c, _d, _e, _f;
         const { id, x, y, width, height, fill, opacity, rotation = 0, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, label, seatFill, src, points, seatPositions, radius = 0, } = item;
@@ -15,6 +23,19 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
             stroke,
             strokeWidth,
         };
+        const selectionBox = {
+            stroke: "#3b82f6",
+            strokeWidth: 4,
+            width: width + strokeWidth + 2,
+            height: height + strokeWidth + 2,
+            x: x - strokeWidth / 2,
+            y: y - strokeWidth / 2,
+            opacity: 0,
+        };
+        if (allSelectionId === null || allSelectionId === void 0 ? void 0 : allSelectionId.includes(id)) {
+            commonProps.stroke = "#ffa39e";
+            commonProps.strokeWidth = 4;
+        }
         switch (shape) {
             case "square":
                 return (<g key={id} data-id={id} id={`${id}`} transform={`translate(${x}, ${y})`}>
@@ -54,7 +75,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                         points.map((_, index) => {
                             return (<>
                       <rect data-point={JSON.stringify(_)} id={`${index}`} key={`${id}-point-${index}`} x={(_ === null || _ === void 0 ? void 0 : _.x) - 5} y={(_ === null || _ === void 0 ? void 0 : _.y) - 5} width={10} height={10} fill="#4a90e2" cursor={"pointer"}/>
-                      <circle data-point={JSON.stringify(_)} id={`${index}`} key={`${id}-point-${index}`} cx={_ === null || _ === void 0 ? void 0 : _.x} cy={_ === null || _ === void 0 ? void 0 : _.y} r={15} fill="transparent" cursor={"pointer"}/>
+                      <circle data-point={JSON.stringify(_)} id={`${index}`} key={`${id}-point-${index - 100}`} cx={_ === null || _ === void 0 ? void 0 : _.x} cy={_ === null || _ === void 0 ? void 0 : _.y} r={15} fill="transparent" cursor={"pointer"}/>
                     </>);
                         })}
             </g>
@@ -129,7 +150,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
               <circle cx={centerX} cy={centerY} r={tableRadius} fill={fill} {...commonProps}/>
               {/* Seat */}
               <g data-seat={`${id}-seats`}>
-                {seatCircles.map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius} fill={seatFill}/>))}
+                {seatCircles.map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius} fill={seatFill} {...commonProps}/>))}
               </g>
 
               <g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
@@ -556,8 +577,32 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
             </g>
           </g>);
             case "bounding-box": {
-                return (<g key={id} transform={`translate(${x}, ${y})`} data-bounding-box={id}>
+                const topLine = `${0},${0} ${width},${0}`;
+                const rightLine = `${width},${0} ${width},${height}`;
+                const bottomLine = `${width},${height} ${0},${height}`;
+                const leftLine = `${0},${height} ${0},${0}`;
+                return (<g key={id} id="bounding-box" transform={`translate(${x}, ${y})`} data-bounding-box={id}>
             <rect width={width} height={height} fill="none" stroke="#3b82f6" strokeWidth={1} strokeDasharray="6 4" pointerEvents="none"/>
+            {/* top polyline */}
+            <polyline points={topLine} fill="none" stroke="transparent" strokeWidth={3} data-position="top-boundaries" style={{
+                        pointerEvents: activeTool === "bounding-box" ? "none" : "stroke",
+                        cursor: "row-resize",
+                    }}/>
+            {/* right polyline */}
+            <polyline points={rightLine} fill="none" stroke="transparent" strokeWidth={3} data-position="right-boundaries" style={{
+                        pointerEvents: activeTool === "bounding-box" ? "none" : "stroke",
+                        cursor: "col-resize",
+                    }}/>
+            {/* bottom polyline */}
+            <polyline points={bottomLine} fill="none" stroke="transparent" strokeWidth={3} data-position="bottom-boundaries" style={{
+                        pointerEvents: activeTool === "bounding-box" ? "none" : "stroke",
+                        cursor: "row-resize",
+                    }}/>
+            {/* left polyline */}
+            <polyline points={leftLine} fill="none" stroke="transparent" strokeWidth={3} data-position="left-boundaries" style={{
+                        pointerEvents: activeTool === "bounding-box" ? "none" : "stroke",
+                        cursor: "col-resize",
+                    }}/>
           </g>);
             }
             default:
@@ -566,6 +611,10 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
     };
     let date = new Date();
     const nodesRaw = rectToPolygonNodes(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.width, selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.height);
+    // const nodesRawNew = rectToPolygonNodes(
+    //   selectionLinesPoints?.width,
+    //   selectionLinesPoints?.height
+    // );
     return (<g key={`${date}`} id="selection-layer">
       {components === null || components === void 0 ? void 0 : components.map(renderShape)}
       {!isEmpty(selectionLines) && activeTool === "select" && (<>
@@ -625,6 +674,74 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                 }))}
             </g>
           </g>
+          {/* {!isEmpty(selectionLinesPoints) && (
+              <g
+                key={`selection-${date}`}
+                id="selection-lines"
+                data-selection={`selection-${
+                  selectedComponent?.id ?? selectionLines?.id
+                }`}
+                transform={`translate(${selectionLinesPoints?.x},${selectionLinesPoints?.y})`}
+              >
+                <g transform={`rotate(${0}, 0,0)`}>
+                  <rect
+                    width={selectionLinesPoints?.width}
+                    height={selectionLinesPoints?.height}
+                    fill="none"
+                    stroke="red"
+                    strokeWidth={1}
+                    id="rect-box-selection"
+                  />
+  
+                  {nodesRawNew?.map((node: Point, index: number) => {
+                      const corner = (index: number) => {
+                        switch (index) {
+                          case 0:
+                            return "top-left";
+                          case 1:
+                            return "top";
+                          case 2:
+                            return "top-right";
+                          case 3:
+                            return "right";
+                          case 4:
+                            return "bottom-right";
+                          case 5:
+                            return "bottom";
+                          case 6:
+                            return "bottom-left";
+                          case 7:
+                            return "left";
+                        }
+                      };
+  
+                      return (
+                        <>
+                          <circle
+                            data-position={corner(index)}
+                            key={index}
+                            r={5}
+                            cx={node.x}
+                            cy={node.y}
+                            fill="transparent"
+                            style={{ cursor: "pointer" }}
+                          />
+                          <circle
+                            data-position={corner(index)}
+                            key={index}
+                            r={5}
+                            cx={node.x}
+                            cy={node.y}
+                            fill="red"
+                            id={`circle-corner-${selectedComponent?.id}`}
+                            style={{ cursor: "pointer" }}
+                          />
+                        </>
+                      );
+                    })}
+                </g>
+              </g>
+            )} */}
         </>)}
     </g>);
 };

package/dist/components/layer-v4/index.d.ts

@@ -20,5 +20,5 @@ interface LayersProps {
         items: string[];
     }[];
 }
-declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags, }: LayersProps) => import("react").JSX.Element;
+declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags, }: LayersProps) => import("react/jsx-runtime").JSX.Element;
 export default Layers;

package/dist/components/layer-v5/constant.d.ts

@@ -0,0 +1,60 @@
+export declare const tagsDummy: (name: string, icon: string) => ({
+    gap: string;
+    key: string;
+    items: {
+        type: string;
+        value: string;
+    }[];
+    direction: string;
+    offsetX?: undefined;
+    offsetY?: undefined;
+} | {
+    gap: string;
+    key: string;
+    items: {
+        type: string;
+        value: string;
+    }[];
+    offsetX: string;
+    offsetY: string;
+    direction: string;
+} | {
+    gap: string;
+    key: string;
+    items: ({
+        type: string;
+        value: string;
+        fontWeight: string;
+        textDecoration: string;
+        symbol?: undefined;
+    } | {
+        type: string;
+        value: string;
+        fontWeight?: undefined;
+        textDecoration?: undefined;
+        symbol?: undefined;
+    } | {
+        type: string;
+        value: string;
+        symbol: {
+            value: string;
+            gap: number;
+            position: string;
+        };
+        fontWeight?: undefined;
+        textDecoration?: undefined;
+    })[];
+    direction: string;
+    offsetY: number;
+    offsetX?: undefined;
+})[];
+export declare const PRIVILEGED_TAGS: {
+    CURRENT_TIME: {
+        key: string;
+        items: string[];
+    }[];
+    NEXT_3_RESERVATION: {
+        key: string;
+        items: string[];
+    }[];
+};