npm - seat-editor - Versions diffs - 3.3.2 → 3.3.5 - Mend

seat-editor 3.3.2 → 3.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/dist/app/new-board/page.jsx +0 -1
package/dist/app/only-view/page.jsx +1 -1
package/dist/components/form-tools/shape.d.ts +4 -0
package/dist/components/form-tools/shape.jsx +42 -42
package/dist/components/layer-v3/index.jsx +1 -1
package/dist/components/layer-v4/index.jsx +27 -13
package/dist/features/board-v3/board-slice.js +2 -2
package/dist/features/board-v3/index.jsx +82 -61
package/dist/features/board-v3/utils.js +21 -0
package/dist/features/package/index.d.ts +1 -1
package/dist/features/panel/index.jsx +9 -7
package/dist/features/panel/selected-group.jsx +80 -38
package/dist/features/panel/table-seat-circle.jsx +8 -3
package/dist/features/panel/table-seat-square.jsx +8 -3
package/dist/features/panel/text-tool.jsx +48 -17
package/dist/features/panel/upload-tool.d.ts +1 -1
package/dist/features/panel/upload-tool.jsx +9 -3
package/dist/features/panel/utils.js +3 -1
package/dist/features/side-tool/index.jsx +20 -13
package/dist/features/view-only-3/index.jsx +27 -44
package/package.json +1 -1

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

@@ -18,7 +18,6 @@ export default function NewBoard() {
             reader.onerror = reject;
             reader.readAsDataURL(file);
         });
-        console.log({ test });
         return test;
     };
     return (<>

package/dist/app/only-view/page.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 "use client";
-import LayerView from "@/features/view-only-3";
+import LayerView from "../../features/view-only-3";
 import { useState, useRef } from "react";
 import { data4, test1 } from "../constant";
 import { ChairIcon } from "./chair";

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

@@ -1,3 +1,7 @@
+export declare const optionsShape: {
+    value: string;
+    label: string;
+}[];
 declare const SectionShape: ({ allowChangeShape, }: {
     allowChangeShape?: boolean;
 }) => import("react").JSX.Element;

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

@@ -1,40 +1,41 @@
 "use client";
 import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
+export const optionsShape = [
+    {
+        value: "circle",
+        label: "Circle",
+    },
+    {
+        value: "square",
+        label: "Square",
+    },
+    {
+        value: "table-seat-circle",
+        label: "Type 1",
+    },
+    {
+        value: "table-seat-square",
+        label: "Type 2",
+    },
+    {
+        value: "table-seat-half-square",
+        label: "Type 3",
+    },
+    {
+        value: "table-seat-rect-square",
+        label: "Type 4",
+    },
+    {
+        value: "table-seat-rect-circle",
+        label: "Type 5",
+    },
+    {
+        label: "Image Table",
+        value: "image-table",
+    },
+];
 const SectionShape = ({ allowChangeShape = true, }) => {
-    const optionsShape = [
-        {
-            value: "circle",
-            label: "Circle",
-        },
-        {
-            value: "square",
-            label: "Square",
-        },
-        {
-            value: "table-seat-circle",
-            label: "Type 1",
-        },
-        {
-            value: "table-seat-square",
-            label: "Type 2",
-        },
-        {
-            value: "table-seat-half-square",
-            label: "Type 3",
-        },
-        {
-            value: "table-seat-rect-square",
-            label: "Type 4",
-        },
-        {
-            value: "table-seat-rect-circle",
-            label: "Type 5",
-        },
-        {
-            label: "Image Table",
-            value: "image-table",
-        },
-    ];
+    const shape = Form.useWatch("shape");
     return (<div className="py-2">
       <h1 className="heading-s">Shape</h1>
       {allowChangeShape && (<Flex gap={2} className="w-full">
@@ -57,7 +58,6 @@ const SectionShape = ({ allowChangeShape = true, }) => {
             return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
         }}/>
         </Form.Item>
       </Flex>
       <Flex gap={2}>
         <Form.Item label="Position X" name="x" className="w-full">
@@ -89,13 +89,13 @@ const SectionShape = ({ allowChangeShape = true, }) => {
         <Form.Item label="Stroke" name={"strokeWidth"} className="w-full">
           <InputNumber />
         </Form.Item>
-        <Form.Item label="Radius" name="radius" className="w-full">
-          <InputNumber suffix="px" parser={(value) => {
-            var _a;
-            const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
-            return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
-        }}/>
-        </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) => {
+                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="opacity" name={"opacity"} className="w-full">
           <InputNumber step={0.1} max={1} min={0} parser={(value) => {
             if (value === undefined || value === null || value === "")

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

@@ -527,7 +527,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                 return (<g key={id} data-id={id} transform={`translate(${x}, ${y})`}>
             <g transform={`rotate(${rotation}, 0, 0)`}>
               <rect width={width} height={height} fill="transparent" opacity={opacity}/>
-              <text x={width / 2} y={height / 2} textAnchor="middle" dominantBaseline="middle" fill={fontColor} fontSize={fontSize !== null && fontSize !== void 0 ? fontSize : height * 0.6} opacity={opacity} {...omit(commonProps, ["fill", "opacity"])}>
+              <text x={width / 2} y={height / 2} textAnchor="middle" dominantBaseline="middle" fill={fill !== null && fill !== void 0 ? fill : fontColor} fontSize={fontSize !== null && fontSize !== void 0 ? fontSize : height * 0.6} opacity={opacity} {...omit(commonProps, ["fill", "opacity"])}>
                 {text}
               </text>
             </g>

package/dist/components/layer-v4/index.jsx CHANGED Viewed

@@ -5,7 +5,17 @@ import { PRIVILEGED_TAGS, tagsDummy } from "./constant";
 import { useAppSelector } from "../../hooks/use-redux";
 import { RsvpIcons } from "../../features/board-v3/icons";
 const toKebabCase = (str) => str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
-const iconNames = ["upcoming", "late", "overtime", "overlapping", "hold", "reserved", "armchair", "cheque", "people"];
+const iconNames = [
+    "upcoming",
+    "late",
+    "overtime",
+    "overlapping",
+    "hold",
+    "reserved",
+    "armchair",
+    "cheque",
+    "people",
+];
 const dummyIconTags = iconNames === null || iconNames === void 0 ? void 0 : iconNames.map((item) => {
     const Icon = RsvpIcons === null || RsvpIcons === void 0 ? void 0 : RsvpIcons[item];
     return {
@@ -23,14 +33,20 @@ const getIconFromId = (data) => {
 };
 const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags = [], }) => {
     const { isShowTagType } = useAppSelector((state) => state.board);
-    const showLabels = !(["type-1", "type-2"].includes(isShowTagType)) && !iconTags;
+    const showLabels = !["type-1", "type-2"].includes(isShowTagType) && !iconTags;
     const renderShape = (item) => {
         var _a, _b, _c, _d, _e, _f;
         const { id, x, y, width, height, fill, opacity, rotate = 0, rotation, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, seatFill, src, tags, gapTags, label, points, seatPositions, radius, } = item;
         const renderTags = (data) => {
             var _a;
             const tags = data !== null && data !== void 0 ? data : tagsDummy(((_a = labels === null || labels === void 0 ? void 0 : labels[0]) === null || _a === void 0 ? void 0 : _a.label) || "Table", getIconFromId(id));
-            const privileged = !isEmpty(privilegedTags) ? privilegedTags : isShowTagType === "type-1" ? PRIVILEGED_TAGS["CURRENT_TIME"] : isShowTagType === "type-2" ? PRIVILEGED_TAGS["NEXT_3_RESERVATION"] : undefined;
+            const privileged = !isEmpty(privilegedTags)
+                ? privilegedTags
+                : isShowTagType === "type-1"
+                    ? PRIVILEGED_TAGS["CURRENT_TIME"]
+                    : isShowTagType === "type-2"
+                        ? PRIVILEGED_TAGS["NEXT_3_RESERVATION"]
+                        : undefined;
             if (tags && (tags === null || tags === void 0 ? void 0 : tags.length) > 0) {
                 const gapBetweenTags = Number(gapTags || 20);
                 const defaultFontSize = Number(fontSize || 12);
@@ -40,8 +56,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     const items = tag.items || [];
                     const isColumn = (_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column");
                     const tagHeight = isColumn
-                        ? items.length * defaultFontSize +
-                            (2) * (Number(tag.gap) || 2)
+                        ? items.length * defaultFontSize + 2 * (Number(tag.gap) || 2)
                         : defaultFontSize; // horizontal = 1 line
                     return sum + tagHeight + gapBetweenTags;
                 }, 0)) - gapBetweenTags;
@@ -60,7 +75,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     const fontSize = Number(defaultFontSize);
                     const isColumn = direction === "column";
                     const groupHeight = isColumn
-                        ? items.length * fontSize + (2) * gap
+                        ? items.length * fontSize + 2 * gap
                         : fontSize;
                     const centerX = width / 2;
                     const centerY = currentY + groupHeight;
@@ -74,8 +89,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                             ? i * (fontSize + gap) - groupHeight / 2 + fontSize / 2
                             : 0;
                         const offsetX = !isColumn
-                            ? i * (fontSize + gap) -
-                                ((1) * (fontSize + gap)) / 2
+                            ? i * (fontSize + gap) - (1 * (fontSize + gap)) / 2
                             : 0;
                         const posX = centerX + offsetX + Number((_a = tag.offsetX) !== null && _a !== void 0 ? _a : 0);
                         const posY = centerY + offsetY + Number((_b = tag.offsetY) !== null && _b !== void 0 ? _b : 0);
@@ -117,8 +131,8 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                                     break;
                             }
                             return (<tspan {...symbol} key={`symbol-${tagIndex}-${i}`} x={posX + offsetSymbolX} y={posY + offsetSymbolY} textAnchor="middle" dominantBaseline="middle" fontSize={`${sizeFont}px`}>
-                        {symbol.value}
-                      </tspan>);
+                      {symbol.value}
+                    </tspan>);
                         };
                         if (item.type === "icon") {
                             const icons = iconTags !== null && iconTags !== void 0 ? iconTags : dummyIconTags;
@@ -137,7 +151,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                         return null;
                     });
                     return (<g key={`group-${tagIndex}`} pointerEvents="none">
-                {elements}
+                {elements}
               </g>);
                 });
             }
@@ -961,8 +975,8 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
             case "text":
                 return (<g key={id} onContextMenu={(e) => e.preventDefault()} data-id={id} transform={`translate(${x}, ${y})`}>
             <g transform={`rotate(${rotation}, 0, 0)`}>
-              <rect x={x} y={y} width={width} height={height} fill="transparent" opacity={opacity}/>
-              <text x={x + width / 2} y={y + height / 2} textAnchor="middle" dominantBaseline="middle" fill={fontColor} fontSize={fontSize !== null && fontSize !== void 0 ? fontSize : height * 0.6} opacity={opacity} {...omit(commonProps, ["fill", "opacity"])}>
+              <rect width={width} height={height} fill="transparent" opacity={opacity}/>
+              <text x={width / 2} y={height / 2} textAnchor="middle" dominantBaseline="middle" fill={fill} fontSize={fontSize !== null && fontSize !== void 0 ? fontSize : height * 0.6} opacity={opacity} {...omit(commonProps, ["fill", "opacity"])}>
                 {text}
               </text>
             </g>

package/dist/features/board-v3/board-slice.js CHANGED Viewed

@@ -212,7 +212,7 @@ const boardSlice = createSlice({
                 const prev = state.historyChanges[state.pointer];
                 state.components = current(prev === null || prev === void 0 ? void 0 : prev.components);
                 state.extraComponents = current(prev === null || prev === void 0 ? void 0 : prev.extraComponents);
-                state.boundingBox = current(prev === null || prev === void 0 ? void 0 : prev.boundingBox);
+                state.boundingBox = prev === null || prev === void 0 ? void 0 : prev.boundingBox;
                 state.backgroundColor = prev === null || prev === void 0 ? void 0 : prev.backgroundColor;
             }
             else if (state.pointer === 1) {
@@ -237,7 +237,7 @@ const boardSlice = createSlice({
         setInitialValue: (state, action) => {
             const { components, extraComponents, backgroundColor, boundingBox } = action.payload;
             state.components = components;
-            state.extraComponents = extraComponents;
+            state.extraComponents = extraComponents === null || extraComponents === void 0 ? void 0 : extraComponents.filter((item) => item.shape);
             state.pointer = 0;
             state.backgroundColor = backgroundColor;
             state.boundingBox = boundingBox;

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

@@ -86,53 +86,40 @@ const BoardTemplate = ({ refs, loadingRender }) => {
         }
     }, [selectionLines]);
     useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (hasInitialized)
             return;
         let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
         // let widthMinX = 0;
         // let heightMinY = 0;
-        componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.forEach((_) => {
-            var _a, _b, _c, _d;
+        componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.forEach((_, i) => {
             let values = _;
-            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("square")) {
-                minX = Math.min(minX, values.x);
-                minY = Math.min(minY, values.y);
-                maxX = Math.max(maxX, values.x + values.width);
-                maxY = Math.max(maxY, values.y + values.height);
-            }
-            if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("circle")) {
+            if (values === null || values === void 0 ? void 0 : values.shape) {
                 minX = Math.min(minX, values.x);
                 minY = Math.min(minY, values.y);
                 maxX = Math.max(maxX, values.x + values.width);
                 maxY = Math.max(maxY, values.y + values.height);
             }
-            if ((_c = values === null || values === void 0 ? void 0 : values.shape) === null || _c === void 0 ? void 0 : _c.includes("table-seat-circle")) {
-                minX = Math.min(minX, values.x);
-                minY = Math.min(minY, values.y);
-                maxX = Math.max(maxX, values.x + values.width);
-                maxY = Math.max(maxY, values.y + values.height);
-            }
-            if ((_d = values === null || values === void 0 ? void 0 : values.shape) === null || _d === void 0 ? void 0 : _d.includes("image-table")) {
-                minX = Math.min(minX, values.x);
-                minY = Math.min(minY, values.y);
-                maxX = Math.max(maxX, values.x + values.width);
-                maxY = Math.max(maxY, values.y + values.height);
+            if (i === componentsProps.length - 1) {
+                minX = minX > 10 ? minX - 10 : minX;
+                minY = minY > 10 ? minY - 10 : minY;
+                maxX = maxX + 10;
+                maxY = maxY + 10;
             }
         });
-        extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps.forEach((values) => {
-            var _a, _b;
-            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("background")) {
-                minX = Math.min(minX, values.x);
-                minY = Math.min(minY, values.y);
-                maxX = Math.max(maxX, values.x + values.width);
-                maxY = Math.max(maxY, values.y + values.height);
+        extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps.forEach((values, i) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            if (values === null || values === void 0 ? void 0 : values.shape) {
+                minX = Math.min(minX, values.x - ((_a = values === null || values === void 0 ? void 0 : values.width) !== null && _a !== void 0 ? _a : 0));
+                minY = Math.min(minY, values.y - ((_b = values === null || values === void 0 ? void 0 : values.height) !== null && _b !== void 0 ? _b : 0));
+                maxX = Math.max(maxX, values.x + ((_c = values === null || values === void 0 ? void 0 : values.width) !== null && _c !== void 0 ? _c : 0));
+                maxY = Math.max(maxY, values.y + ((_d = values === null || values === void 0 ? void 0 : values.height) !== null && _d !== void 0 ? _d : 0));
             }
-            if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("text")) {
-                minX = Math.min(minX, values.x);
-                minY = Math.min(minY, values.y);
-                maxX = Math.max(maxX, values.x + values.width);
-                maxY = Math.max(maxY, values.y + values.height);
+            if ((_e = values === null || values === void 0 ? void 0 : values.shape) === null || _e === void 0 ? void 0 : _e.includes("polygon")) {
+                minX = Math.min(minX, (_f = values === null || values === void 0 ? void 0 : values.points) === null || _f === void 0 ? void 0 : _f.reduce((min, point) => Math.min(min, point.x), Infinity));
+                minY = Math.min(minY, (_g = values === null || values === void 0 ? void 0 : values.points) === null || _g === void 0 ? void 0 : _g.reduce((min, point) => Math.min(min, point.y), Infinity));
+                maxX = Math.max(maxX, (_h = values === null || values === void 0 ? void 0 : values.points) === null || _h === void 0 ? void 0 : _h.reduce((max, point) => Math.max(max, point.x), -Infinity));
+                maxY = Math.max(maxY, (_j = values === null || values === void 0 ? void 0 : values.points) === null || _j === void 0 ? void 0 : _j.reduce((max, point) => Math.max(max, point.y), -Infinity));
             }
         });
         let backgroundHasOne = false;
@@ -144,20 +131,23 @@ const BoardTemplate = ({ refs, loadingRender }) => {
             maxX = (_e = extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps[0]) === null || _e === void 0 ? void 0 : _e.width;
             maxY = (_f = extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps[0]) === null || _f === void 0 ? void 0 : _f.height;
         }
-        if ((extraComponentsProps === null || extraComponentsProps === void 0 ? void 0 : extraComponentsProps.length) < 1 &&
-            ["background", "text"].includes((_g = componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps[0]) === null || _g === void 0 ? void 0 : _g.shape)) {
-            minX = minX;
-            minY = minY;
-            maxX = maxX;
-            maxY = maxY;
-        }
+        // if (
+        //   extraComponentsProps?.length < 1 &&
+        //   ["background", "text"].includes(componentsProps?.[0]?.shape)
+        // ) {
+        //   minX = minX;
+        //   minY = minY;
+        //   maxX = maxX;
+        //   maxY = maxY;
+        // }
         const hasBoundingBox = !isEmpty(boundingBox);
         if (hasBoundingBox) {
             minX = boundingBox.x;
             minY = boundingBox.y;
         }
         if ((minX !== Infinity || minY !== Infinity) && !activeTool) {
-            (_h = transformRef.current) === null || _h === void 0 ? void 0 : _h.setTransform(-minX, -minY, scale);
+            // console.log("initialized");
+            (_g = transformRef.current) === null || _g === void 0 ? void 0 : _g.setTransform(-minX, -minY, scale);
             setHasInitialzed(true);
         }
     }, [componentsProps, extraComponentsProps]);
@@ -324,8 +314,11 @@ const BoardTemplate = ({ refs, loadingRender }) => {
         };
     }, [dataElementSelectionGroupRef.current]);
     const handlePointerDown = (e) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const shiftActive = e.shiftKey;
+        if (activeTool === "grab") {
+            return;
+        }
         const svg = svgRef.current;
         if (!e.isPrimary)
             return;
@@ -343,6 +336,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
         //CREATE ELEMENT
         const isInitialCreateElemente = toolElement.includes(activeTool) && !isCreateElementRef.current;
         const isInitialCreateBoundingBox = activeTool === "bounding-box";
+        const isInitialCreateText = activeTool === "text" && !isCreateElementRef.current;
         if (isInitialCreateElemente) {
             const tables = createTableGhost({
                 x,
@@ -368,6 +362,18 @@ const BoardTemplate = ({ refs, loadingRender }) => {
             (_b = svgRef.current) === null || _b === void 0 ? void 0 : _b.appendChild(tables);
             isCreateElementRef.current = true;
         }
+        else if (isInitialCreateText) {
+            const tables = createTableGhost({
+                x,
+                y,
+                width: 100 * scale,
+                height: 50 * scale,
+                fill: "#000000",
+                shape: activeTool,
+            });
+            (_c = svgRef.current) === null || _c === void 0 ? void 0 : _c.appendChild(tables);
+            isCreateElementRef.current = true;
+        }
         const targetSelection = e.target.closest("g[id='selection-lines']");
         //ROTATE
         const targetRotate = e.target.closest("circle[data-role]");
@@ -380,7 +386,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
         const targetPointPolygon = e.target.closest("circle[data-point]");
         // TARGET ELEMENT
         let idTargetElement = JSON.parse((targetGroup === null || targetGroup === void 0 ? void 0 : targetGroup.getAttribute("data-id")) || "{}");
-        const selectionTarget = (_d = (_c = targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.dataset) === null || _c === void 0 ? void 0 : _c.selection) === null || _d === void 0 ? void 0 : _d.replace("selection-", "");
+        const selectionTarget = (_e = (_d = targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.dataset) === null || _d === void 0 ? void 0 : _d.selection) === null || _e === void 0 ? void 0 : _e.replace("selection-", "");
         const activeId = selectionTarget !== null && selectionTarget !== void 0 ? selectionTarget : idTargetElement;
         const isInSelectionTarget = !isUndefined(selectionTarget);
         const isInTargetElement = !isPlainObject(idTargetElement);
@@ -388,7 +394,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
         const { g } = getAttributeElement(svg, activeId);
         if (targetGroup && shiftActive) {
             const findById = [...componentsState, ...extraComponentsState].find((comp) => comp.id == activeId);
-            const currentSelection = (_e = dataElementSelectionGroupRef.current) !== null && _e !== void 0 ? _e : [];
+            const currentSelection = (_f = dataElementSelectionGroupRef.current) !== null && _f !== void 0 ? _f : [];
             const alreadySelected = currentSelection.some((comp) => comp.id == activeId);
             let newSelection;
             if (alreadySelected) {
@@ -399,14 +405,13 @@ const BoardTemplate = ({ refs, loadingRender }) => {
             }
             dataElementSelectionGroupRef.current = newSelection;
         }
-        const box = getGlobalBBox(svg, g);
         const { x: initialXG, y: initialYG } = getTranslate(g);
         const targetDragPosition = e.target.closest("circle[data-position]");
         const { clientX, clientY } = e;
         const hitPoint = document.elementFromPoint(clientX, clientY);
         // CHECK FOR HIT ON SVG FOR SELECTION BOX
         // MAKE AND UNMAKE SELECTION BOX START ------
-        const hadSelectionBox = ((_f = dataElementSelectionGroupRef.current) === null || _f === void 0 ? void 0 : _f.length) > 0 && !isSingleSelection;
+        const hadSelectionBox = ((_g = dataElementSelectionGroupRef.current) === null || _g === void 0 ? void 0 : _g.length) > 0 && !isSingleSelection;
         const downInSelectionBox = hadSelectionBox && (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) !== "svg";
         const downOutSelectionBox = hadSelectionBox && (hitPoint === null || hitPoint === void 0 ? void 0 : hitPoint.nodeName) === "svg";
         const downBeforeHasSelectionBox = !downInSelectionBox &&
@@ -443,7 +448,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                 shape: nameShapeSelectionBoxGhost,
                 id: idSelectionBoxGhost,
             });
-            (_g = svgRef.current) === null || _g === void 0 ? void 0 : _g.appendChild(boxSelection);
+            (_h = svgRef.current) === null || _h === void 0 ? void 0 : _h.appendChild(boxSelection);
         }
         // MAKE AND UNMAKE SELECTION BOX END ------
         // RESIZE SELECTION BOX
@@ -502,7 +507,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
             });
             dispatch({
                 type: "panel/setSelectedGroup",
-                payload: null
+                payload: null,
             });
             isOnMakePolygonRef.current = true;
         }
@@ -644,7 +649,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                     dx,
                     dy,
                     rotate: 0,
-                    handle: resizeSide
+                    handle: resizeSide,
                 });
                 updateSelectionBox(svg, resultSelection);
                 const scaleX = resultSelection.width / oldSel.width;
@@ -867,7 +872,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                     dx,
                     dy,
                     rotate: 0,
-                    handle: resizeSide
+                    handle: resizeSide,
                 });
                 updateSelectionGuides(svg, resultSelection, {
                     vLeft: "v-left",
@@ -1076,7 +1081,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
             }
         };
         const pointerHandleUp = (e) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             updateSelectionGuides(svg, {
                 x: 0,
                 y: 0,
@@ -1109,7 +1114,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                 });
                 dispatch({
                     type: "panel/setSelectedGroup",
-                    payload: null
+                    payload: null,
                 });
             }
             //POLYGON
@@ -1147,7 +1152,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                     });
                     dispatch({
                         type: "panel/setSelectedGroup",
-                        payload: null
+                        payload: null,
                     });
                     polygonElementRef.current = newPoints;
                 }
@@ -1172,7 +1177,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                 });
                 dispatch({
                     type: "panel/setSelectedGroup",
-                    payload: null
+                    payload: null,
                 });
                 //LOGIC FOR SET SHOW
                 dispatch({ type: "panel/setShow", payload: false });
@@ -1263,7 +1268,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                         });
                         dispatch({
                             type: "panel/setSelectedGroup",
-                            payload: null
+                            payload: null,
                         });
                     }
                 }
@@ -1289,7 +1294,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                 });
                 dispatch({
                     type: "panel/setSelectedGroup",
-                    payload: null
+                    payload: null,
                 });
                 updateComponentAttribute(newSelectedComponent);
                 //LOGIC FOR SET SHOW
@@ -1341,6 +1346,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                 });
                 rotationSelectionRef.current = 0;
                 (_k = (_j = svgRef.current) === null || _j === void 0 ? void 0 : _j.querySelectorAll("#selection-box-ghost")) === null || _k === void 0 ? void 0 : _k.forEach((el) => el.remove());
+                isCreateElementRef.current = false;
             }
             if (isInitialCreateBoundingBox) {
                 const ghost = svg.querySelector("#ghost-element-create");
@@ -1351,11 +1357,26 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                 });
                 (_m = (_l = svgRef.current) === null || _l === void 0 ? void 0 : _l.querySelectorAll("#ghost-element-create")) === null || _m === void 0 ? void 0 : _m.forEach((el) => el.remove());
             }
+            if (isInitialCreateText) {
+                const ghost = svg.querySelector("#ghost-element-create");
+                const getBBox = getGlobalBBox(svg, ghost);
+                const text = Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "text", fill: "#000000", text: "Text", fontSize: 14 });
+                addComponents(text);
+                dispatch({
+                    type: "panel/setShow",
+                    payload: true,
+                });
+                dispatch({
+                    type: "panel/setSelectedComponent",
+                    payload: text,
+                });
+                (_p = (_o = svgRef.current) === null || _o === void 0 ? void 0 : _o.querySelectorAll("#ghost-element-create")) === null || _p === void 0 ? void 0 : _p.forEach((el) => el.remove());
+                isCreateElementRef.current = false;
+            }
             //RESIZE SELECTION BOX UP
             if (downAtResizePositionAndHasSelectionBox || isRotateSelectionBox) {
-                const selectionLines = (_o = svgRef.current) === null || _o === void 0 ? void 0 : _o.querySelector("#selection-lines");
                 isResizeSelectionRef.current = false;
-                const results = (_p = dataElementSelectionGroupRef.current) === null || _p === void 0 ? void 0 : _p.map((item) => {
+                const results = (_q = dataElementSelectionGroupRef.current) === null || _q === void 0 ? void 0 : _q.map((item) => {
                     const { g, element, inner, points } = getAttributeElement(svg, item.id);
                     const { x, y } = getTranslate(g);
                     const { width, height } = getSvgElementSize(element);
@@ -1403,8 +1424,8 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                 !shiftActive &&
                 !isRotateSelectionBox) {
                 isResizeSelectionRef.current = false;
-                const results = (_q = dataElementSelectionGroupRef.current) === null || _q === void 0 ? void 0 : _q.map((item) => {
-                    const { g, element, inner } = getAttributeElement(svg, item.id);
+                const results = (_r = dataElementSelectionGroupRef.current) === null || _r === void 0 ? void 0 : _r.map((item) => {
+                    const { g } = getAttributeElement(svg, item.id);
                     const { x, y } = getTranslate(g);
                     const getBBox = getGlobalBBox(svg, g);
                     const findComponent = [
@@ -1445,7 +1466,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                 hadSelectionRef.current = false;
             }
             //DELETE GHOST ELEMENT BISA MEMBU
-            (_r = svgRef.current) === null || _r === void 0 ? void 0 : _r.querySelectorAll("#ghost-element").forEach((el) => el.remove());
+            (_s = svgRef.current) === null || _s === void 0 ? void 0 : _s.querySelectorAll("#ghost-element").forEach((el) => el.remove());
             //UPDATE DATASET TO STATE IF MOVEk
             // if (releaseGroupRef.current) return;
             if ((isMightMove &&

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

@@ -730,6 +730,27 @@ export function createTableGhost({ x, y, width, height, fill, shape, id = "ghost
             rotation: 0,
         }));
     }
+    else if (shape === "text") {
+        el = document.createElementNS(SVG_NS, "text");
+        el.setAttribute("id", id);
+        el.setAttribute("x", x);
+        el.setAttribute("y", y + height / 2);
+        el.setAttribute("fill", "#000000");
+        el.setAttribute("data-table", JSON.stringify({
+            x,
+            y,
+            width,
+            height,
+            shape,
+            fill,
+            stroke: "blue",
+            rotation: 0,
+            fontSize: 14,
+        }));
+        el.textContent = "Text";
+        el.setAttribute("color", "white");
+        el.setAttribute("fontSize", "14px");
+    }
     return el;
 }
 export function updateSelectionBox(svg, boxSelection, id, unFollowCursor) {

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

@@ -1,5 +1,5 @@
 import { RefsType } from "../board-v3";
-import { PropertiesProps } from "@/dto/table";
+import { PropertiesProps } from "../../dto/table";
 export interface TableEditorProps {
     componentProps: PropertiesProps[];
     extraComponentProps: PropertiesProps[];

package/dist/features/panel/index.jsx CHANGED Viewed

@@ -79,8 +79,9 @@ const ControlPanels = (props) => {
                 rotation: getValueIfSame(selectedGroup, "rotation"),
                 strokeWidth: getValueIfSame(selectedGroup, "strokeWidth"),
                 radius: getValueIfSame(selectedGroup, "radius"),
+                shape: getValueIfSame(selectedGroup, "shape"),
+                labels: getValueIfSame(selectedGroup, "labels"),
             });
-            const values = form.getFieldsValue();
         }
         else {
             setOpen(false);
@@ -92,11 +93,11 @@ const ControlPanels = (props) => {
         }
     }, [tool, show]);
     const createShape = (shape, props = {}) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const defaults = (_a = SEAT_SHAPES[shape]) !== null && _a !== void 0 ? _a : {};
-        return Object.assign(Object.assign(Object.assign({}, defaults), props), { shape, height: (_b = adjustHeightWidthForSeatShape(shape, props)) === null || _b === void 0 ? void 0 : _b.height, width: (_c = adjustHeightWidthForSeatShape(shape, props)) === null || _c === void 0 ? void 0 : _c.width, fill: props.fill, seatCount: getSeatCount(shape, props), seatPositions: getSeatPosition(shape, props), openSpace: isSeatShape(shape) ? (_d = props.openSpace) !== null && _d !== void 0 ? _d : 0 : undefined, seatFill: isSeatShape(shape)
-                ? (_e = props.seatFill) !== null && _e !== void 0 ? _e : "transparent"
-                : undefined, text: shape === "text" ? (_f = props.text) !== null && _f !== void 0 ? _f : defaults.text : undefined, fontColor: shape === "text" ? (_g = props.fontColor) !== null && _g !== void 0 ? _g : defaults.fontColor : undefined });
+        return Object.assign(Object.assign(Object.assign({}, defaults), props), { shape: (_b = props.shape) !== null && _b !== void 0 ? _b : shape, height: (_c = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _c === void 0 ? void 0 : _c.height, width: (_d = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _d === void 0 ? void 0 : _d.width, fill: props.fill, seatCount: getSeatCount(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props), seatPositions: getSeatPosition(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props), openSpace: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape) ? (_e = props.openSpace) !== null && _e !== void 0 ? _e : 0 : undefined, seatFill: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape)
+                ? (_f = props.seatFill) !== null && _f !== void 0 ? _f : "transparent"
+                : undefined, text: shape === "text" ? (_g = props.text) !== null && _g !== void 0 ? _g : defaults.text : undefined, fontColor: shape === "text" ? (_h = props.fontColor) !== null && _h !== void 0 ? _h : defaults.fontColor : undefined, radius: props.radius });
     };
     const debouncedSyncComponents = useRef(debounce((data) => {
         dispatch({ type: "board/setFlagChange", payload: true });
@@ -172,8 +173,8 @@ const ControlPanels = (props) => {
             debouncedSyncComponents.current(Object.assign(Object.assign({}, (selectedComponent || {})), newValues));
         }
         if ((selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.length) > 0) {
-            const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, } = newValues;
-            const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {}))));
+            const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, labels } = newValues;
+            const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {})), (shape !== undefined ? { shape } : {})), (seatCount !== undefined ? { seatCount } : {})), (seatFill !== undefined ? { seatFill } : {})), (seatPositions !== undefined ? { seatPositions } : {})), (labels !== undefined ? { labels } : {}))));
             let minX = Infinity;
             let minY = Infinity;
             let maxX = -Infinity;
@@ -210,6 +211,7 @@ const ControlPanels = (props) => {
     const renderFormPanel = () => {
         switch (tool.active) {
             case "select":
+            case "text":
                 return <SelectToolForm action={action} tranform={transform}/>;
             case "square":
             case "circle":

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

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

package/dist/features/panel/table-seat-circle.jsx CHANGED Viewed

@@ -19,9 +19,14 @@ const SeatCircle = () => {
           <Form.Item label="Seat Fill" name={"seatFill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
             <ColorPicker allowClear format="hex" defaultFormat="hex"/>
           </Form.Item>
-          <Form.Item label="Table Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
-            <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-          </Form.Item>
+          {/* <Form.Item
+          label="Table Fill"
+          name={"fill"}
+          getValueFromEvent={(color) => color.toHexString()}
+          className="w-full "
+        >
+          <ColorPicker allowClear format="hex" defaultFormat="hex" />
+        </Form.Item> */}
         </Flex>
         <SectionShape />
         <SectionLabel />

package/dist/features/panel/table-seat-square.jsx CHANGED Viewed

@@ -34,9 +34,14 @@ const SeatSquare = () => {
           <Form.Item label="Seat Fill" name={"seatFill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
             <ColorPicker allowClear format="hex" defaultFormat="hex"/>
           </Form.Item>
-          <Form.Item label="Table Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
-            <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-          </Form.Item>
+          {/* <Form.Item
+          label="Table Fill"
+          name={"fill"}
+          getValueFromEvent={(color) => color.toHexString()}
+          className="w-full "
+        >
+          <ColorPicker allowClear format="hex" defaultFormat="hex" />
+        </Form.Item> */}
         </Flex>
         <SectionShape />
         <SectionLabel />

package/dist/features/panel/text-tool.jsx CHANGED Viewed

@@ -1,26 +1,57 @@
 "use client";
-import { ColorPicker, Form, Input, InputNumber } from "antd";
+import { ColorPicker, Flex, Form, Input, InputNumber } from "antd";
 const TextTool = () => {
     return (<div className="py-2">
-        <Form.Item label="Name" name="shape" className="w-full hidden">
-          <Input defaultValue={"text"}/>
-        </Form.Item>
+      <Form.Item label="Name" name="shape" className="w-full hidden">
+        <Input defaultValue={"text"}/>
+      </Form.Item>
       <Form.Item name="text" label="Text">
         <Input />
       </Form.Item>
-      <Form.Item name={"fontColor"} label="Color" getValueFromEvent={(color) => color.toHexString()}>
-        <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-      </Form.Item>
-      <Form.Item name={"x"} label="X">
-        <InputNumber />
-      </Form.Item>
-      <Form.Item name={"y"} label="Y">
-        <InputNumber />
-      </Form.Item>
-      <Form.Item name={"fontSize"} label="Size">
-        <InputNumber suffix="px"/>
-      </Form.Item>
+      <Flex className="w-full" gap={2}>
+        <Form.Item name={"fontColor"} label="Color" getValueFromEvent={(color) => color.toHexString()}>
+          <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+        </Form.Item>
+        <Form.Item name={"fontSize"} label="Size">
+          <InputNumber suffix="px"/>
+        </Form.Item>
+      </Flex>
+      <Flex gap={2} className="w-full">
+        <Form.Item label="Width" name="width" className="w-full">
+          <InputNumber suffix="px" controls 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) => {
+            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>
+      </Flex>
+      <Flex gap={2}>
+        <Form.Item label="Position X" name="x" className="w-full">
+          <InputNumber />
+        </Form.Item>
+        <Form.Item label="Position Y" name="y" className="w-full">
+          <InputNumber />
+        </Form.Item>
+        <Form.Item label="Rotation" name="rotation" className="w-full">
+          <InputNumber suffix="°" min={0} max={360} parser={(value) => {
+            if (!value)
+                return 0;
+            const num = Number(value.replace(/\D/g, ""));
+            if (Number.isNaN(num))
+                return 0;
+            return Math.min(360, Math.max(0, num));
+        }}/>
+        </Form.Item>
+      </Flex>
     </div>);
 };
 export default TextTool;

package/dist/features/panel/upload-tool.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { PropertiesProps } from "@/dto/table";
+import { PropertiesProps } from "../../dto/table";
 interface UploadToolProps {
     name: string;
     type?: "component" | "background" | "assets";

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

@@ -9,13 +9,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { useState, useEffect } from "react";
-import { Upload, Image, Button } from "antd";
+import { Upload, Image, Button, Form } 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 }) => {
+    // const src = Form.useWatch("src");
+    // const height = Form.useWatch("height");
+    // const width = Form.useWatch("width");
+    // const x = Form.useWatch("x");
+    // const y = Form.useWatch("y");
+    // const shape = Form.useWatch("shape");
     var _a, _b, _c;
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
     const transformState = (_a = transform === null || transform === void 0 ? void 0 : transform.instance) === null || _a === void 0 ? void 0 : _a.transformState;
@@ -138,7 +144,7 @@ const UploadTool = ({ name, type, action, defaultValue, transform }) => {
     const handleDelete = () => {
         setDefaultSrc(null);
     };
-    return (<>
+    return (<Form.Item label="" name="src" className="w-full">
       {defaultSrc ? (<>
           <div className="w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto">
             <Image src={defaultSrc}/>
@@ -165,6 +171,6 @@ const UploadTool = ({ name, type, action, defaultValue, transform }) => {
       <SectionShape allowChangeShape={type === "component"}/>
       <SectionLabel />
-    </>);
+    </Form.Item>);
 };
 export default UploadTool;

package/dist/features/panel/utils.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { SEAT_SHAPES } from "../../utils/constant";
+import { MIN_HEIGHT, MIN_WIDTH } from "../board-v3/constant";
 export const isSeatShape = (shape) => SEAT_SHAPES.includes(shape);
 export const getSeatCount = (shape, props) => {
     // if (shape === "table-seat-circle") {
@@ -39,7 +40,8 @@ export const getSeatPosition = (shape, props) => {
 export const adjustHeightWidthForSeatShape = (shape, props) => {
     if (shape === null || shape === void 0 ? void 0 : shape.includes("circle")) {
         const sizeDefault = Math.min(props.width, props.height);
-        return Object.assign(Object.assign({}, props), { height: sizeDefault, width: sizeDefault });
+        const sizeFinal = sizeDefault < MIN_WIDTH ? MIN_WIDTH : sizeDefault;
+        return Object.assign(Object.assign({}, props), { height: isNaN(sizeFinal) ? MIN_WIDTH : sizeFinal, width: isNaN(sizeFinal) ? MIN_HEIGHT : sizeFinal });
     }
     return props;
 };

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

@@ -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 } from "lucide-react";
+import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Grid, Lock, LockOpen, Undo2, Redo2, PenTool, Scan, } from "lucide-react";
 import ButtonTools from "../../components/button-tools";
 import { Divider, ColorPicker, Button, message, } from "antd";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
@@ -27,11 +27,11 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
         //   name: "Ruler",
         //   icon: <Ruler />,
         // },
-        {
-            id: "bounding-box",
-            name: "Bounding Box Tool",
-            icon: <Scan />,
-        }
+        // {
+        //   id: "bounding-box",
+        //   name: "Bounding Box Tool",
+        //   icon: <Scan />,
+        // }
         // {
         //   id: "node",
         //   name: "Node Tool",
@@ -90,7 +90,7 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
             id: "polygon",
             name: "Polygon Tool",
             icon: <PenTool />,
-        }
+        },
         // {
         //   id: "background-color",
         //   name: "Background Color",
@@ -166,21 +166,25 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
         const exludedShapes = ["background", "text"];
         if (!selectedComponent)
             return;
-        if (!exludedShapes.includes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) && !(deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.component)) {
+        if (!exludedShapes.includes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) &&
+            !(deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.component)) {
             message.error("You are not authorized to delete this table.");
             return;
         }
-        if (exludedShapes.includes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) && !(deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.extraComponent)) {
+        if (exludedShapes.includes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) &&
+            !(deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.extraComponent)) {
             message.error("You are not authorized to delete this background.");
             return;
         }
-        if ((deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.component) && !exludedShapes.includes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape)) {
+        if ((deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.component) &&
+            !exludedShapes.includes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape)) {
             dispatch({
                 type: "board/removeComponent",
                 payload: selectedComponent,
             });
         }
-        if ((deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.extraComponent) && exludedShapes.includes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape)) {
+        if ((deleteAutorized === null || deleteAutorized === void 0 ? void 0 : deleteAutorized.extraComponent) &&
+            exludedShapes.includes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape)) {
             dispatch({
                 type: "board/removeExtraComponent",
                 payload: selectedComponent,
@@ -336,6 +340,7 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
       <ColorPicker value={color} onChange={handleChangeColorBackground}>
         <Button icon={<PaintBucket />} type="text" name="Background Color" onClick={() => hanldeSelectTool("background-color")} style={active === "background-color" ? { color: "red" } : {}}/>
       </ColorPicker>
+      <Button icon={<Scan />} type="text" name="Preview" onClick={() => hanldeSelectTool("bounding-box")} style={active === "preview" ? { color: "red" } : {}}/>
       <Button icon={preview ? <EyeOff /> : <Eye />} type="text" name="Preview" onClick={handleOpenModalPreview} style={active === "preview" ? { color: "red" } : {}}/>
       <Button icon={<Grid />} type="text" name="Grid" onClick={() => toggleGrid()}/>
       <ButtonTools buttonProps={{
@@ -348,13 +353,15 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
             trigger: "hover",
             placement: "right",
         }}/>
-       <ButtonTools buttonProps={{
+      <ButtonTools buttonProps={{
             onClick: () => toogleSetLockBackground(),
             icon: lockBackground ? <Lock /> : <LockOpen />,
             type: "text",
             name: "trash",
         }} items={[]} popoverProps={{
-            content: <div>{lockBackground ? "Unlock Background" : "Lock Background"}</div>,
+            content: (<div>
+              {lockBackground ? "Unlock Background" : "Lock Background"}
+            </div>),
             trigger: "hover",
             placement: "right",
         }}/>

package/dist/features/view-only-3/index.jsx CHANGED Viewed

@@ -23,7 +23,7 @@ const LayerView = (props) => {
     const [panningGroup, setPanningGroup] = useState(false);
     const [scale, setScale] = useState(1);
     const [selectedTable, setSelectedTable] = useState(null);
-    const { components: componentsEditor, extraComponents: extraComponentsEditor, boundingBox: boundingBoxProps } = useAppSelector((state) => state.board);
+    const { components: componentsEditor, extraComponents: extraComponentsEditor, boundingBox: boundingBoxProps, } = useAppSelector((state) => state.board);
     const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
     const { loading } = useAppSelector((state) => state.panel);
     useImperativeHandle(refs, () => ({
@@ -38,7 +38,7 @@ const LayerView = (props) => {
     }));
     const dispatch = useAppDispatch();
     useEffect(() => {
-        if ((!loading && (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state))) {
+        if (!loading && (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state)) {
             dispatch({ type: "panel/setLoading", payload: true });
         }
         if ((componentProps === null || componentProps === void 0 ? void 0 : componentProps.length) > 0) {
@@ -106,72 +106,53 @@ const LayerView = (props) => {
         setSelectedTable(seletedTable);
     };
     const boundingBox = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
             return { minX: 0, minY: 0, width: 500, height: 500 };
         }
         let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-        componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.forEach((_) => {
-            var _a, _b, _c, _d;
+        componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.forEach((_, i) => {
             let values = mappingKey ? _[mappingKey] : _;
             if (!values)
                 return;
-            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("square")) {
+            if (values === null || values === void 0 ? void 0 : values.shape) {
                 minX = Math.min(minX, values.x);
                 minY = Math.min(minY, values.y);
                 maxX = Math.max(maxX, values.x + values.width);
                 maxY = Math.max(maxY, values.y + values.height);
             }
-            if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("circle")) {
-                minX = Math.min(minX, values.x);
-                minY = Math.min(minY, values.y);
-                maxX = Math.max(maxX, values.x + values.width);
-                maxY = Math.max(maxY, values.y + values.height);
-            }
-            if ((_c = values === null || values === void 0 ? void 0 : values.shape) === null || _c === void 0 ? void 0 : _c.includes("table-seat-circle")) {
-                minX = Math.min(minX, values.x);
-                minY = Math.min(minY, values.y);
-                maxX = Math.max(maxX, values.x + values.width);
-                maxY = Math.max(maxY, values.y + values.height);
-            }
-            if ((_d = values === null || values === void 0 ? void 0 : values.shape) === null || _d === void 0 ? void 0 : _d.includes("image-table")) {
-                minX = Math.min(minX, values.x);
-                minY = Math.min(minY, values.y);
-                maxX = Math.max(maxX, values.x + values.width);
-                maxY = Math.max(maxY, values.y + values.height);
+            if ((i === componentsEditor.length - 1) && (extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 0) {
+                minX = minX > 10 ? minX - 10 : minX;
+                minY = minY > 10 ? minY - 10 : minY;
+                maxX = maxX + 10;
+                maxY = maxY + 10;
             }
         });
         extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.forEach((values) => {
-            var _a, _b;
-            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("background")) {
+            var _a, _b, _c, _d, _e;
+            if (values === null || values === void 0 ? void 0 : values.shape) {
                 minX = Math.min(minX, values.x);
                 minY = Math.min(minY, values.y);
                 maxX = Math.max(maxX, values.x + values.width);
                 maxY = Math.max(maxY, values.y + values.height);
             }
-            if ((_b = values === null || values === void 0 ? void 0 : values.shape) === null || _b === void 0 ? void 0 : _b.includes("text")) {
-                minX = Math.min(minX, values.x);
-                minY = Math.min(minY, values.y);
-                maxX = Math.max(maxX, values.x + values.width);
-                maxY = Math.max(maxY, values.y + values.height);
+            if ((_a = values === null || values === void 0 ? void 0 : values.shape) === null || _a === void 0 ? void 0 : _a.includes("polygon")) {
+                minX = Math.min(minX, (_b = values === null || values === void 0 ? void 0 : values.points) === null || _b === void 0 ? void 0 : _b.reduce((min, point) => Math.min(min, point.x), Infinity));
+                minY = Math.min(minY, (_c = values === null || values === void 0 ? void 0 : values.points) === null || _c === void 0 ? void 0 : _c.reduce((min, point) => Math.min(min, point.y), Infinity));
+                maxX = Math.max(maxX, (_d = values === null || values === void 0 ? void 0 : values.points) === null || _d === void 0 ? void 0 : _d.reduce((max, point) => Math.max(max, point.x), -Infinity));
+                maxY = Math.max(maxY, (_e = values === null || values === void 0 ? void 0 : values.points) === null || _e === void 0 ? void 0 : _e.reduce((max, point) => Math.max(max, point.y), -Infinity));
             }
         });
         let backgroundHasOne = false;
         if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 1 &&
             ((_b = (_a = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _a === void 0 ? void 0 : _a.shape) === null || _b === void 0 ? void 0 : _b.includes("background"))) {
             backgroundHasOne = true;
+            // console.log({ backgroundHasOne },"shini")
             minX = (_c = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _c === void 0 ? void 0 : _c.x;
             minY = (_d = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _d === void 0 ? void 0 : _d.y;
             maxX = (_e = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _e === void 0 ? void 0 : _e.width;
             maxY = (_f = extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor[0]) === null || _f === void 0 ? void 0 : _f.height;
         }
-        if ((extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) < 1 &&
-            ["background", "text"].includes((_g = componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor[0]) === null || _g === void 0 ? void 0 : _g.shape)) {
-            minX = minX;
-            minY = minY;
-            maxX = maxX;
-            maxY = maxY;
-        }
         const hasBoundingBox = boundingBoxProps;
         // const paddingY =
         //   maxY * (props?.viewStyles?.paddingY || 0) +
@@ -194,11 +175,12 @@ const LayerView = (props) => {
         //   width: maxX + paddingX * 2,
         //   height: maxY + paddingY + (maxY + paddingY) * 0.5,
         // };
+        // console.log(minX, minY, maxX, maxY,props?.viewStyles, "bounding box");
         return {
-            minX: minX - (((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingLeft) || 0),
-            minY: minY - (((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingTop) || 0),
-            width: maxX + (((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingRight) || 0),
-            height: maxY + (((_l = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _l === void 0 ? void 0 : _l.paddingBottom) || 0),
+            minX: minX - (((_g = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _g === void 0 ? void 0 : _g.paddingLeft) || 0),
+            minY: minY - (((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingTop) || 0),
+            width: maxX + (((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingRight) || 0),
+            height: maxY + (((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingBottom) || 0),
         };
     }, [componentsEditor, extraComponentsEditor]);
     const renderElements = (elementEditor, mappingKey, tableMatchKey) => {
@@ -464,6 +446,8 @@ const LayerView = (props) => {
             x = bounds.minPositionX;
         setTransform(x, y, scale, 100, "linear");
     };
+    // const instance = transformRef.current?.instance;
+    // console.log({ instance })
     const getCoords = (e) => {
         var _a;
         const svg = svgRef.current;
@@ -484,7 +468,7 @@ const LayerView = (props) => {
             return null;
         }
         const svgRect = svg.getBoundingClientRect();
-        const viewBox = svg.viewBox.baseVal;
+        // const viewBox = svg.viewBox.baseVal;
         const xLeft = (clientX - svgRect.left + positionX) / scale;
         const yTop = (clientY - svgRect.top + positionY) / scale;
         const xRight = clientX - svgRect.left + positionX - svgRect.width / scale;
@@ -543,7 +527,7 @@ const LayerView = (props) => {
             wheelPanning: true,
         }} wheel={{
             disabled: false,
-        }} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} maxScale={1000} initialScale={1} smooth={true} {...props.transformProps}>
+        }} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} maxScale={1000} initialScale={1} smooth={true} centerOnInit={true} {...props.transformProps}>
         <TransformComponent wrapperStyle={{
             width: "100%",
             height: "100%",
@@ -563,7 +547,6 @@ const LayerView = (props) => {
             touchAction: "none",
             userSelect: "none",
         }} {...props.svgProps}>
             {hasBoundingBox && (<defs>
                 <clipPath id="contentCrop">
                   <rect x={boundingBox.minX} y={boundingBox.minY} width={boundingBox.width} height={boundingBox.height}/>

package/package.json CHANGED Viewed

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