seat-editor 3.5.16 → 3.5.18

package/dist/app/new-board/page.js

@@ -92,7 +92,8 @@ export default function NewBoard() {
                             if (setState === null || setState === void 0 ? void 0 : setState.extraComponents) {
                                 setExtraComponents((_c = setState.extraComponents) !== null && _c !== void 0 ? _c : []);
                             }
-                        }, extraComponentProps: extraComponents, defaultBackground: backgroundColor, 
+                        }, extraComponentProps: extraComponents, 
+                        // defaultBackground={backgroundColor}
                         // dragOnly={true}
                         statusKey: "status", 
                         // action={async (action: any) => {

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

@@ -100,7 +100,8 @@ export default function NewBoard() {
             if (setState === null || setState === void 0 ? void 0 : setState.extraComponents) {
                 setExtraComponents((_c = setState.extraComponents) !== null && _c !== void 0 ? _c : []);
             }
-        }} extraComponentProps={extraComponents} defaultBackground={backgroundColor} 
+        }} extraComponentProps={extraComponents} 
+    // defaultBackground={backgroundColor}
     // dragOnly={true}
     statusKey="status" 
     // action={async (action: any) => {

package/dist/components/button-tools/index.jsx

@@ -12,18 +12,8 @@ const ButtonTools = (props) => {
                 maxWidth: "fit-content",
             },
         }} {...popoverProps}>
-      {/* <Popover
-          title={buttonProps?.name}
-          trigger={"hover"}
-          placement="right"
-          styles={{
-            body: {
-              minWidth: "max-content",
-            },
-          }}
-        > */}
+     
         <Button {...buttonProps}/>
-      {/* </Popover> */}
     </Popover>);
 };
 export default ButtonTools;

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

@@ -9,6 +9,6 @@ const SectionLabel = () => {
                                                     if (Number.isNaN(num))
                                                         return 0;
                                                     return Math.min(360, Math.max(0, num));
-                                                } }) })] }), _jsxs(Flex, { gap: 5, children: [_jsx(Form.Item, { name: [field.name, "fontSize"], label: "Size", children: _jsx(InputNumber, { suffix: "px" }) }), _jsx(Form.Item, { name: [field.name, "fontColor"], label: "Color", getValueFromEvent: (color) => color.toHexString(), children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] })] }, field.key))) })) }) }), _jsx("div", { className: "divider-dashed" })] }));
+                                                } }) })] }), _jsxs(Flex, { gap: 5, children: [_jsx(Form.Item, { name: [field.name, "fontSize"], label: "Size", children: _jsx(InputNumber, { suffix: "px" }) }), _jsx(Form.Item, { name: [field.name, "fontColor"], label: "Text Color", getValueFromEvent: (color) => color.toHexString(), children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] })] }, field.key))) })) }) }), _jsx("div", { className: "divider-dashed" })] }));
 };
 export default SectionLabel;

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

@@ -36,7 +36,7 @@ const SectionLabel = () => {
                     <Form.Item name={[field.name, "fontSize"]} label="Size">
                       <InputNumber suffix="px"/>
                     </Form.Item>
-                    <Form.Item name={[field.name, "fontColor"]} label="Color" getValueFromEvent={(color) => color.toHexString()}>
+                    <Form.Item name={[field.name, "fontColor"]} label="Text Color" getValueFromEvent={(color) => color.toHexString()}>
                       <ColorPicker allowClear format="hex" defaultFormat="hex"/>
                     </Form.Item>
                   </Flex>

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

@@ -77,7 +77,7 @@ const SectionShape = ({ allowChangeShape = true, }) => {
                                 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 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) => {
+                            } }) })] }), _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 Fill", 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

@@ -126,7 +126,7 @@ const SectionShape = ({ allowChangeShape = true, }) => {
         </Form.Item>
       </Flex>
       <Flex>
-        <Form.Item label="opacity" name={"opacity"} className="w-full">
+        <Form.Item label="Opacity Fill" name={"opacity"} className="w-full">
           <InputNumber step={10} max={100} min={0} name="opacity" parser={(value) => {
             if (value === undefined || value === null || value === "")
                 return null;

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

@@ -439,7 +439,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                                 }) })] }) }, id));
             }
             case "text":
-                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", { width: width, height: height, fill: "transparent", opacity: opacity }), _jsx("text", Object.assign({ 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"]), { children: text }))] }) }, id));
+                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height, fill: "transparent", opacity: opacity }, omit(commonProps, ["fill", "opacity"]))), _jsx("text", Object.assign({ "data-text-raw": `${id}-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", "stroke", "strokeWidth"]), { children: text }))] }) }, id));
             case "image-table":
             case "background":
                 return (_jsx("g", { id: `${id}`, "data-id": id, transform: `translate(${x}, ${y})`, style: {

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

@@ -547,8 +547,8 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
             case "text":
                 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={fill !== null && fill !== void 0 ? 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} {...omit(commonProps, ["fill", "opacity"])}/>
+              <text data-text-raw={`${id}-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", "stroke", "strokeWidth"])}>
                 {text}
               </text>
             </g>

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

@@ -2,6 +2,12 @@ export interface Component {
     id: string;
     [key: string]: any;
 }
+export interface HistoryEntry {
+    components: Component[];
+    extraComponents: Component[];
+    boundingBox: any;
+    backgroundColor: string;
+}
 export interface InitialState {
     components: Component[];
     backgroundColor: string;
@@ -9,7 +15,7 @@ export interface InitialState {
     extraComponents: Component[];
     boundingBox: any;
     flagChange: boolean;
-    historyChanges: any[];
+    historyChanges: HistoryEntry[];
     pointer: number;
     updateBy: "global" | "local";
     isShowTagType: "default" | "type-1" | "type-2";

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

@@ -1,5 +1,6 @@
 import { createSlice, current } from "@reduxjs/toolkit";
 import { forEach } from "lodash";
+const MAX_HISTORY_CHANGES = 20;
 const initialState = {
     components: [],
     backgroundColor: "#FFFFFF",
@@ -12,7 +13,26 @@ const initialState = {
     updateBy: "global",
     isShowTagType: "default",
 };
-const MAX_HISTORY_CHANGES = 20;
+// ─── Helper ──────────────────────────────────────────────────────────────────
+const pushHistory = (state) => {
+    if (state.pointer < state.historyChanges.length - 1) {
+        state.historyChanges = state.historyChanges.slice(0, state.pointer + 1);
+    }
+    state.historyChanges.push({
+        components: [...state.components],
+        extraComponents: [...state.extraComponents],
+        boundingBox: state.boundingBox,
+        backgroundColor: state.backgroundColor,
+    });
+    if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
+        state.historyChanges.shift();
+        state.pointer = MAX_HISTORY_CHANGES - 1;
+    }
+    else {
+        state.pointer = state.historyChanges.length - 1;
+    }
+};
+// ─── Slice ───────────────────────────────────────────────────────────────────
 const boardSlice = createSlice({
     name: "board",
     initialState,
@@ -23,65 +43,34 @@ const boardSlice = createSlice({
         setUpdateBy: (state, action) => {
             state.updateBy = action.payload;
         },
+        setFlagChange: (state, action) => {
+            state.flagChange = action.payload;
+        },
         addComponent: (state, action) => {
-            const currentPointer = state.pointer;
-            const totalHistory = state.historyChanges.length;
-            if (currentPointer < totalHistory) {
-                state.historyChanges = state.historyChanges.slice(0, currentPointer + 1);
-            }
-            if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
-                state.historyChanges.shift();
-            }
-            state.pointer += 1;
             state.components.push(action.payload);
-            const component = state.components;
-            const extraComponent = state.extraComponents;
-            const boundingBox = state.boundingBox;
-            const backgroundColor = state.backgroundColor;
-            state.historyChanges.push({
-                component,
-                extraComponent,
-                boundingBox,
-                backgroundColor,
-            });
+            pushHistory(state);
         },
         removeComponent: (state, action) => {
-            state.components = state.components.filter((component) => (component === null || component === void 0 ? void 0 : component.id) !== action.payload.id);
+            state.components = state.components.filter((c) => c.id !== action.payload.id);
         },
         removeExtraComponent: (state, action) => {
-            state.extraComponents = state.extraComponents.filter((component) => component.id !== action.payload.id);
+            state.extraComponents = state.extraComponents.filter((c) => c.id !== action.payload.id);
         },
         updateComponent: (state, action) => {
-            const index = state.components.findIndex((component) => String(component.id) == String(action.payload.id));
-            const indexExtra = state.extraComponents.findIndex((extraComponent) => String(extraComponent.id) == String(action.payload.id));
-            // state.historyChanges.push({
-            //   components: [...state.components],
-            //   extraComponents: [...state.extraComponents],
-            // });
+            const index = state.components.findIndex((c) => String(c.id) === String(action.payload.id));
+            const indexExtra = state.extraComponents.findIndex((e) => String(e.id) === String(action.payload.id));
             if (index !== -1) {
-                // Update component biasa
                 state.components[index] = Object.assign(Object.assign({}, state.components[index]), action.payload);
             }
             else if (indexExtra !== -1) {
-                // Update extraComponent
                 state.extraComponents[indexExtra] = Object.assign(Object.assign({}, state.extraComponents[indexExtra]), action.payload);
             }
-            state.historyChanges.push({
-                components: [...state.components],
-                extraComponents: [...state.extraComponents],
-                boundingBox: state.boundingBox,
-                backgroundColor: state.backgroundColor,
-            });
-            if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
-                state.historyChanges.shift();
-            }
-            state.pointer += 1;
+            pushHistory(state);
         },
         updateComponentsBulk: (state, action) => {
-            const updates = action.payload;
-            updates.forEach((update) => {
-                const index = state.components.findIndex((component) => component.id == update.id);
-                const indexExtra = state.extraComponents.findIndex((extra) => extra.id == update.id);
+            action.payload.forEach((update) => {
+                const index = state.components.findIndex((c) => c.id == update.id);
+                const indexExtra = state.extraComponents.findIndex((e) => e.id == update.id);
                 if (index !== -1) {
                     state.components[index] = Object.assign(Object.assign({}, state.components[index]), update);
                 }
@@ -89,185 +78,75 @@ const boardSlice = createSlice({
                     state.extraComponents[indexExtra] = Object.assign(Object.assign({}, state.extraComponents[indexExtra]), update);
                 }
             });
-            if (state.pointer < state.historyChanges.length - 1) {
-                state.historyChanges = state.historyChanges.slice(0, state.pointer + 1);
-            }
-            state.historyChanges.push({
-                components: [...state.components],
-                extraComponents: [...state.extraComponents],
-                boundingBox: state.boundingBox,
-                backgroundColor: state.backgroundColor,
-            });
-            if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
-                state.historyChanges.shift();
-            }
-            state.pointer += 1;
+            pushHistory(state);
         },
         updateSelectedGroupComponent: (state, action) => {
-            const allComponents = action.payload;
-            forEach(allComponents, (component) => {
+            forEach(action.payload, (component) => {
                 const index = state.components.findIndex((c) => c.id == component.id);
                 if (index !== -1) {
                     state.components[index] = Object.assign(Object.assign({}, state.components[index]), component);
                 }
             });
-            state.historyChanges.push({
-                components: [...state.components],
-                extraComponents: [...state.extraComponents],
-                boundingBox: state.boundingBox,
-                backgroundColor: state.backgroundColor,
-            });
-            if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
-                state.historyChanges.shift();
-            }
-            state.pointer += 1;
+            pushHistory(state);
         },
         setBackgroundColor: (state, action) => {
-            const currentPointer = state.pointer;
-            const totalHistory = state.historyChanges.length;
-            if (currentPointer < totalHistory) {
-                state.historyChanges = state.historyChanges.slice(0, currentPointer + 1);
-            }
-            if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
-                state.historyChanges.shift();
-            }
-            state.pointer += 1;
             state.backgroundColor = action.payload;
-            state.historyChanges.push({
-                components: [...state.components],
-                extraComponents: [...state.extraComponents],
-                boundingBox: state.boundingBox,
-                backgroundColor: state.backgroundColor,
-            });
+            pushHistory(state);
+        },
+        setBoundingBox: (state, action) => {
+            state.boundingBox = action.payload;
+            pushHistory(state);
         },
         setNewComponents: (state, action) => {
-            const currentPointer = state.pointer;
-            const totalHistory = state.historyChanges.length;
-            if (currentPointer < totalHistory) {
-                state.historyChanges = state.historyChanges.slice(0, currentPointer + 1);
-            }
             state.components = action.payload;
-            state.historyChanges.push({
-                components: [...state.components],
-                extraComponents: [...state.extraComponents],
-                boundingBox: state.boundingBox,
-                backgroundColor: state.backgroundColor,
-            });
-            if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
-                state.historyChanges.shift();
-            }
-            state.pointer += 1;
+            pushHistory(state);
         },
         setNewExtraComponents: (state, action) => {
-            const currentPointer = state.pointer;
-            const totalHistory = state.historyChanges.length;
-            if (currentPointer < totalHistory) {
-                state.historyChanges = state.historyChanges.slice(0, currentPointer + 1);
-            }
-            if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
-                state.historyChanges.shift();
-            }
-            state.pointer += 1;
-            state.extraComponents = action.payload.filter((item) => item.shape) || [];
-            state.historyChanges.push({
-                components: [...state.components],
-                extraComponents: [...state.extraComponents],
-                boundingBox: state.boundingBox,
-                backgroundColor: state.backgroundColor,
-            });
+            var _a;
+            state.extraComponents =
+                (_a = action.payload.filter((item) => item.shape)) !== null && _a !== void 0 ? _a : [];
+            pushHistory(state);
         },
         setExtraComponent: (state, action) => {
-            const currentPointer = state.pointer;
-            const totalHistory = state.historyChanges.length;
-            if (currentPointer < totalHistory) {
-                state.historyChanges = state.historyChanges.slice(0, currentPointer + 1);
-            }
-            if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
-                state.historyChanges.shift();
-            }
-            state.pointer += 1;
             state.extraComponents.push(action.payload);
-            const component = state.components;
-            const extraComponent = state.extraComponents;
-            state.historyChanges.push({
-                components: [...component],
-                extraComponents: [...extraComponent],
-                boundingBox: state.boundingBox,
-                backgroundColor: state.backgroundColor,
-            });
-        },
-        setFlagChange: (state, action) => {
-            state.flagChange = action.payload;
+            pushHistory(state);
         },
+        // ─── Undo / Redo ─────────────────────────────────────────────────────────
         undoHistory: (state) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            if (state.pointer > 1) {
-                const lengthHistory = state.historyChanges.length;
-                if (lengthHistory == state.pointer) {
-                    state.pointer = lengthHistory - 2;
-                }
-                else {
-                    state.pointer -= 1;
-                }
-                const prev = state.historyChanges[state.pointer];
-                state.components = prev === null || prev === void 0 ? void 0 : prev.components;
-                state.extraComponents = prev === null || prev === void 0 ? void 0 : prev.extraComponents;
-                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) {
-                state.components = (_b = (_a = state.historyChanges) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.components;
-                state.extraComponents = (_d = (_c = state.historyChanges) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.extraComponents;
-                state.boundingBox = (_f = (_e = state.historyChanges) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.boundingBox;
-                state.backgroundColor = (_h = (_g = state.historyChanges) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.backgroundColor;
-                state.pointer = 0;
-            }
+            if (state.pointer <= 0)
+                return;
+            state.pointer -= 1;
+            const prev = state.historyChanges[state.pointer];
+            state.components = prev.components;
+            state.extraComponents = prev.extraComponents;
+            state.boundingBox = prev.boundingBox;
+            state.backgroundColor = prev.backgroundColor;
             state.updateBy = "global";
         },
         redoHistory: (state) => {
-            if (state.pointer < state.historyChanges.length - 1) {
-                const next = state.historyChanges[state.pointer + 1];
-                state.components = current(next === null || next === void 0 ? void 0 : next.components);
-                state.extraComponents = current(next === null || next === void 0 ? void 0 : next.extraComponents);
-                state.boundingBox = next === null || next === void 0 ? void 0 : next.boundingBox;
-                state.pointer += 1;
-                state.updateBy = "global";
-            }
+            if (state.pointer >= state.historyChanges.length - 1)
+                return;
+            state.pointer += 1;
+            const next = state.historyChanges[state.pointer];
+            state.components = current(next.components);
+            state.extraComponents = current(next.extraComponents);
+            state.boundingBox = next.boundingBox;
+            state.backgroundColor = next.backgroundColor;
+            state.updateBy = "global";
         },
         setInitialValue: (state, action) => {
+            var _a;
             const { components, extraComponents, backgroundColor, boundingBox } = action.payload;
             state.components = components;
-            state.extraComponents = (extraComponents === null || extraComponents === void 0 ? void 0 : extraComponents.filter((item) => item.shape)) || [];
-            state.pointer = 0;
+            state.extraComponents =
+                (_a = extraComponents === null || extraComponents === void 0 ? void 0 : extraComponents.filter((item) => item.shape)) !== null && _a !== void 0 ? _a : [];
             state.backgroundColor = backgroundColor;
             state.boundingBox = boundingBox;
+            state.pointer = 0;
             state.historyChanges = [
-                {
-                    components,
-                    extraComponents,
-                    boundingBox,
-                    backgroundColor,
-                },
+                { components, extraComponents, boundingBox, backgroundColor },
             ];
         },
-        setBoundingBox: (state, action) => {
-            const currentPointer = state.pointer;
-            const totalHistory = state.historyChanges.length;
-            if (currentPointer < totalHistory) {
-                state.historyChanges = state.historyChanges.slice(0, currentPointer + 1);
-            }
-            if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
-                state.historyChanges.shift();
-            }
-            state.pointer += 1;
-            state.boundingBox = action.payload;
-            state.historyChanges.push({
-                components: [...state.components],
-                extraComponents: [...state.extraComponents],
-                boundingBox: state.boundingBox,
-                backgroundColor: state.backgroundColor,
-            });
-        },
     },
 });
 export const { addComponent, removeComponent, updateComponent, setBackgroundColor, removeExtraComponent, } = boardSlice.actions;

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

@@ -13,6 +13,7 @@ import { Button, Flex, Radio, Slider, Tag, } from "antd";
 import { getAttributeElement, getAttributeElements } from "./resize-element";
 import { applyResizeToSvgElement, arrayToSvgPointsAttr, createTableGhost, getGlobalBBox, getRotation, getSvgElementSize, getTranslate, isClosingPolygon, normalizeAngle, pointsStringToArray, resizeBox, resizeSeatCircle, resizeSeatRectCircle, resizeSeatRectSquare, resizeSeatSide, resizeSeatSquare, stabilizeRotation, stabilizeTranslateOnRotate, updateManyComponents, updateSelectionBox, updateSelectionGuides, updateSingleComponent, } from "./utils";
 import { getOS } from "../../utils/agent";
+import { MIN_HEIGHT, MIN_WIDTH } from "./constant";
 const toolElement = ["square", "circle", "table-seat-circle"];
 const idSelectionBoxGhost = "selection-box-ghost";
 const nameShapeSelectionBoxGhost = "selection-box";
@@ -78,7 +79,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
     const [selectedLines, setSelectedLines] = useState(null);
     useEffect(() => {
         if (activeTool === "select" || activeTool !== "select") {
-            handleUnSelectComponent();
+            (selectedComponentProps === null || selectedComponentProps === void 0 ? void 0 : selectedComponentProps.shape) !== "text" && handleUnSelectComponent();
         }
         if (activeTool !== "polygon") {
             isOnMakePolygonRef.current = false;
@@ -416,7 +417,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         };
     }, [dataElementSelectionGroupRef.current]);
     const handlePointerDown = (e) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         const shiftActive = e.shiftKey;
         if (activeTool === "grab") {
             return;
@@ -466,15 +467,16 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             isCreateElementRef.current = true;
         }
         else if (isInitialCreateText) {
-            const tables = createTableGhost({
+            const [elTemp, el] = createTableGhost({
                 x,
                 y,
-                width: 100 * scale,
-                height: 50 * scale,
+                width: MIN_WIDTH,
+                height: MIN_HEIGHT,
                 fill: "#000000",
                 shape: activeTool,
             });
-            (_c = svgRef.current) === null || _c === void 0 ? void 0 : _c.appendChild(tables);
+            (_c = svgRef.current) === null || _c === void 0 ? void 0 : _c.appendChild(elTemp);
+            (_d = svgRef.current) === null || _d === void 0 ? void 0 : _d.appendChild(el);
             isCreateElementRef.current = true;
         }
         const targetSelection = e.target.closest("g[id='selection-lines']");
@@ -485,14 +487,14 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         }
         let positionSelection = null;
         if (activeTool === "select") {
-            positionSelection = (_e = (_d = e.target.closest(`polyline[data-position]`)) === null || _d === void 0 ? void 0 : _d.dataset) === null || _e === void 0 ? void 0 : _e.position;
+            positionSelection = (_f = (_e = e.target.closest(`polyline[data-position]`)) === null || _e === void 0 ? void 0 : _e.dataset) === null || _f === void 0 ? void 0 : _f.position;
         }
         // RESIZE
         const targetGroup = e.target.closest("g[data-id]");
         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 = (_g = (_f = targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.dataset) === null || _f === void 0 ? void 0 : _f.selection) === null || _g === void 0 ? void 0 : _g.replace("selection-", "");
+        const selectionTarget = (_h = (_g = targetSelection === null || targetSelection === void 0 ? void 0 : targetSelection.dataset) === null || _g === void 0 ? void 0 : _g.selection) === null || _h === void 0 ? void 0 : _h.replace("selection-", "");
         const activeId = selectionTarget !== null && selectionTarget !== void 0 ? selectionTarget : idTargetElement;
         const isInSelectionTarget = !isUndefined(selectionTarget);
         const isInTargetElement = !isPlainObject(idTargetElement);
@@ -500,7 +502,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         const { g } = getAttributeElement(svg, activeId);
         if (targetGroup && shiftActive) {
             const findById = [...componentsState, ...extraComponentsState].find((comp) => comp.id == activeId);
-            const currentSelection = (_h = dataElementSelectionGroupRef.current) !== null && _h !== void 0 ? _h : [];
+            const currentSelection = (_j = dataElementSelectionGroupRef.current) !== null && _j !== void 0 ? _j : [];
             if (currentSelection.length == 0 && selectedComponent) {
                 currentSelection.push(selectedComponent);
             }
@@ -520,7 +522,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
         const hitPoint = document.elementFromPoint(clientX, clientY);
         // CHECK FOR HIT ON SVG FOR SELECTION BOX
         // MAKE AND UNMAKE SELECTION BOX START ------
-        const hadSelectionBox = ((_j = dataElementSelectionGroupRef.current) === null || _j === void 0 ? void 0 : _j.length) > 0 && !isSingleSelection;
+        const hadSelectionBox = ((_k = dataElementSelectionGroupRef.current) === null || _k === void 0 ? void 0 : _k.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 &&
@@ -558,7 +560,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 shape: nameShapeSelectionBoxGhost,
                 id: idSelectionBoxGhost,
             });
-            (_k = svgRef.current) === null || _k === void 0 ? void 0 : _k.appendChild(boxSelection);
+            (_l = svgRef.current) === null || _l === void 0 ? void 0 : _l.appendChild(boxSelection);
         }
         // MAKE AND UNMAKE SELECTION BOX END ------
         // RESIZE SELECTION BOX
@@ -830,7 +832,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 updateSelectionBox(svg, resultSelection);
                 const scaleX = resultSelection.width / oldSel.width;
                 const scaleY = resultSelection.height / oldSel.height;
-                allGroupsAttribute.forEach(({ g, element, seatGroup, seats, text }, i) => {
+                allGroupsAttribute.forEach(({ g, element, seatGroup, seats, text, textRaw }, i) => {
                     var _a, _b;
                     const activeId = JSON.parse(g === null || g === void 0 ? void 0 : g.getAttribute("data-id"));
                     const elementOld = allDataRealSelection === null || allDataRealSelection === void 0 ? void 0 : allDataRealSelection.find((el) => el.id == activeId);
@@ -915,7 +917,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                             });
                         }
                     }
-                    applyResizeToSvgElement(element, g, newElement, text);
+                    applyResizeToSvgElement(element, g, newElement, text, textRaw);
                 });
             };
             if (downAtResizePositionAndHasSelectionBox)
@@ -1058,7 +1060,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                 var _a, _b;
                 const activeId = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id;
                 const svg = svgRef.current;
-                const { g, element, seats, seatGroup, text } = getAttributeElement(svg, activeId);
+                const { g, element, seats, seatGroup, text, textRaw } = getAttributeElement(svg, activeId);
                 const isZeroRotate = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.rotation) === 0 &&
                     !(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape.includes("circle"));
                 const elementSelect = {
@@ -1197,7 +1199,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                         });
                     }
                 }
-                applyResizeToSvgElement(element, g, newElement, text);
+                applyResizeToSvgElement(element, g, newElement, text, textRaw);
                 isResizeRef.current = true;
             };
             // const hasSelectedOneElement =
@@ -1605,7 +1607,8 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             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 });
+                console.log({ getBBox });
+                const text = Object.assign(Object.assign({}, getBBox), { id: `${Date.now()}`, shape: "text", fill: "#000000", text: "Text", fontSize: 14, rotation: 0 });
                 addComponents(text);
                 dispatch({
                     type: "panel/setShow",
@@ -1615,6 +1618,11 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                     type: "panel/setSelectedComponent",
                     payload: text,
                 });
+                setSelectedComponent(text);
+                dispatch({
+                    type: "tool/setActiveTool",
+                    payload: "select",
+                });
                 (_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;
             }
@@ -1944,7 +1952,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                             if (activeTool === "grab") {
                                 setCursor("grabbing");
                             }
-                        }, doubleClick: { step: 1, disabled: activeTool === "select" }, disablePadding: true, centerOnInit: true, children: _jsx(TransformComponent, { wrapperStyle: {
+                        }, doubleClick: { disabled: true }, disablePadding: true, centerOnInit: true, children: _jsx(TransformComponent, { wrapperStyle: {
                                 width: "100%",
                                 height: "100%",
                             }, contentStyle: { width: boardSize.width, height: boardSize.height }, children: _jsxs("svg", { id: "workspace", ref: svgRef, width: boardSize.width, height: boardSize.height, viewBox: `${minCoords.x} ${minCoords.y} ${boardSize.width} ${boardSize.height}`, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {