seat-editor 3.5.17 → 3.5.18

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/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: {

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

@@ -12,6 +12,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";
@@ -77,7 +78,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;
@@ -415,7 +416,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;
@@ -465,15 +466,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']");
@@ -484,14 +486,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);
@@ -499,7 +501,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);
             }
@@ -519,7 +521,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 &&
@@ -557,7 +559,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
@@ -829,7 +831,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);
@@ -914,7 +916,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                             });
                         }
                     }
-                    applyResizeToSvgElement(element, g, newElement, text);
+                    applyResizeToSvgElement(element, g, newElement, text, textRaw);
                 });
             };
             if (downAtResizePositionAndHasSelectionBox)
@@ -1057,7 +1059,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 = {
@@ -1196,7 +1198,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
                         });
                     }
                 }
-                applyResizeToSvgElement(element, g, newElement, text);
+                applyResizeToSvgElement(element, g, newElement, text, textRaw);
                 isResizeRef.current = true;
             };
             // const hasSelectedOneElement =
@@ -1604,7 +1606,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",
@@ -1614,6 +1617,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;
             }
@@ -1981,7 +1989,7 @@ const BoardTemplate = ({ refs, loadingRender, disabled = false, }) => {
             if (activeTool === "grab") {
                 setCursor("grabbing");
             }
-        }} doubleClick={{ step: 1, disabled: activeTool === "select" }} disablePadding centerOnInit>
+        }} doubleClick={{ disabled: true }} disablePadding centerOnInit>
           {/* {scale !== 1 && ( */}
           {/* <div className="absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10"> */}
           {/* {renderMiniMap()} */}

package/dist/features/board-v3/resize-element.d.ts

@@ -7,6 +7,7 @@ interface ResizeTarget {
     seatGroup?: SVGGElement;
     points?: any[];
     text?: SVGGElement | null;
+    textRaw?: SVGGElement | null;
 }
 export declare function getAttributeElement(root: SVGSVGElement, id: string): ResizeTarget | null;
 export declare function getAttributeElements(root: SVGSVGElement, id: string[]): ResizeTarget[];

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

@@ -6,6 +6,8 @@ export function getAttributeElement(root, id) {
     const seatGroup = root.querySelector(`g[data-seat="${id}-seats"]`);
     const boundingBox = root.querySelector(`g[data-bounding-box="${id}"]`);
     const text = root === null || root === void 0 ? void 0 : root.querySelector(`g[data-text="${id}-text"]`);
+    const textRaw = root === null || root === void 0 ? void 0 : root.querySelector(`text[data-text-raw="${id}-text"]`);
+    console.log({ textRaw });
     if (boundingBox) {
         const element = boundingBox.querySelector("rect");
         return { g: boundingBox, inner: null, element, seats, seatGroup };
@@ -42,7 +44,7 @@ export function getAttributeElement(root, id) {
     }
     if (!inner || !element)
         return null;
-    return { g, inner, element, seats: listSeats, seatGroup, points, text };
+    return { g, inner, element, seats: listSeats, seatGroup, points, text, textRaw };
 }
 export function getAttributeElements(root, id) {
     return id.map((id) => getAttributeElement(root, id));

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

@@ -153,7 +153,7 @@ type ResizeResult = {
     rotation?: number;
     labels?: Label[];
 };
-export declare function applyResizeToSvgElement(element: SVGGraphicsElement, group: SVGGElement, resize: ResizeResult, text?: SVGGElement | null): void;
+export declare function applyResizeToSvgElement(element: SVGGraphicsElement, group: SVGGElement, resize: ResizeResult, text?: SVGGElement | null, textRaw?: SVGGElement | null): void;
 type ResizeParams = {
     element: SVGGraphicsElement;
     group: SVGGElement;

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

@@ -713,6 +713,7 @@ export function createTableGhost({ x, y, width, height, fill, shape, id = "ghost
     // buat group dulu
     const SVG_NS = "http://www.w3.org/2000/svg";
     let el = null;
+    let elTemp = null;
     // tambahkan rectangle
     if (shape === "square" ||
         shape === "table-seat-circle" ||
@@ -757,10 +758,20 @@ export function createTableGhost({ x, y, width, height, fill, shape, id = "ghost
         }));
     }
     else if (shape === "text") {
+        elTemp = document.createElementNS(SVG_NS, "rect");
+        elTemp.setAttribute("id", id);
+        elTemp.setAttribute("x", Math.round(x - (width / 2)));
+        elTemp.setAttribute("y", Math.round(y - (height / 2)));
+        elTemp.setAttribute("width", width);
+        elTemp.setAttribute("height", height);
+        elTemp.setAttribute("fill", "transparent");
+        elTemp.setAttribute("stroke", "blue");
         el = document.createElementNS(SVG_NS, "text");
         el.setAttribute("id", id);
-        el.setAttribute("x", x);
-        el.setAttribute("y", y + height / 2);
+        el.setAttribute("x", Math.round(x - (width / 4)));
+        el.setAttribute("y", Math.round(y + (height / 15)));
+        el.setAttribute("width", width);
+        el.setAttribute("height", height);
         el.setAttribute("fill", "#000000");
         el.setAttribute("data-table", JSON.stringify({
             x,
@@ -777,7 +788,7 @@ export function createTableGhost({ x, y, width, height, fill, shape, id = "ghost
         el.setAttribute("color", "white");
         el.setAttribute("fontSize", "14px");
     }
-    return el;
+    return elTemp ? [elTemp, el] : el;
 }
 export function updateSelectionBox(svg, boxSelection, id, unFollowCursor) {
     var _a, _b, _c, _d, _e;
@@ -1017,9 +1028,10 @@ const updateSvgAttrs = (el, attrs) => {
         }
     }
 };
-export function applyResizeToSvgElement(element, group, resize, text) {
+export function applyResizeToSvgElement(element, group, resize, text, textRaw) {
     var _a, _b, _c, _d;
     const tagName = element.tagName.toLowerCase();
+    console.log({ tagName, textRaw });
     switch (tagName) {
         case "rect":
         case "image": {
@@ -1036,6 +1048,8 @@ export function applyResizeToSvgElement(element, group, resize, text) {
                 transform: `translate(${Math.round(resize.x)}, ${Math.round(resize.y)})`,
             });
             text === null || text === void 0 ? void 0 : text.setAttribute("transform", `rotate(${-rotation}, ${width / 2}, ${height / 2})`);
+            textRaw === null || textRaw === void 0 ? void 0 : textRaw.setAttribute("x", String(width / 2));
+            textRaw === null || textRaw === void 0 ? void 0 : textRaw.setAttribute("y", String(height / 2));
             const origintext = text === null || text === void 0 ? void 0 : text.querySelector("text");
             if (origintext) {
                 origintext.setAttribute("x", String((width / 2) + ((_c = labelsDefault === null || labelsDefault === void 0 ? void 0 : labelsDefault[0]) === null || _c === void 0 ? void 0 : _c.x)));

package/dist/features/panel/index.js

@@ -329,7 +329,11 @@ const ControlPanels = (props) => {
             unsetPlaceholder,
             setPlaceholderBulk,
             resetPlaceholders,
-        }, children: _jsx("div", { className: clsx("w-[300px] h-full absolute top-0 z-50 transition-all duration-300 overflow-y-scroll mt-[78px]", open ? "right-0" : "right-[-1000px]"), children: _jsx("div", { className: "bg-white h-full max-h-screen w-full p-2 overflow-y-auto border-l border-gray-300", children: _jsxs(Form, { layout: "vertical", form: form, name: "table", colon: false, onValuesChange: handleChangeComponent, onFocus: (e) => {
+        }, children: _jsx("div", { className: clsx("w-[300px] h-full absolute top-0 z-50 transition-all duration-300 overflow-y-scroll mt-[78px]", open ? "right-0" : "right-[-1000px]"), onTransitionEnd: (e) => {
+                if (open) {
+                    form.focusField("text");
+                }
+            }, children: _jsx("div", { className: "bg-white h-full max-h-screen w-full p-2 overflow-y-auto border-l border-gray-300", children: _jsxs(Form, { layout: "vertical", form: form, name: "table", colon: false, onValuesChange: handleChangeComponent, onFocus: (e) => {
                         var _a, _b, _c;
                         e.stopPropagation();
                         const name = e.target.name;

package/dist/features/panel/index.jsx

@@ -329,7 +329,11 @@ const ControlPanels = (props) => {
             setPlaceholderBulk,
             resetPlaceholders,
         }}>
-      <div className={clsx("w-[300px] h-full absolute top-0 z-50 transition-all duration-300 overflow-y-scroll mt-[78px]", open ? "right-0" : "right-[-1000px]")}>
+      <div className={clsx("w-[300px] h-full absolute top-0 z-50 transition-all duration-300 overflow-y-scroll mt-[78px]", open ? "right-0" : "right-[-1000px]")} onTransitionEnd={(e) => {
+            if (open) {
+                form.focusField("text");
+            }
+        }}>
         <div className="bg-white h-full max-h-screen w-full p-2 overflow-y-auto border-l border-gray-300">
           <Form layout="vertical" form={form} name="table" colon={false} onValuesChange={handleChangeComponent} onFocus={(e) => {
             var _a, _b, _c;

package/dist/features/panel/polygon.js

@@ -24,7 +24,7 @@ const PolygonTool = () => {
                                 if (Number.isNaN(num))
                                     return 0;
                                 return Math.min(360, Math.max(0, num));
-                            } }) }), _jsx(Form.Item, { label: "opacity", name: "opacity", className: "w-full", children: _jsx(InputNumber, { step: 10, max: 100, min: 0, name: "opacity", parser: (value) => {
+                            } }) }), _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/features/panel/polygon.jsx

@@ -40,7 +40,7 @@ const PolygonTool = () => {
             return Math.min(360, Math.max(0, num));
         }}/>
         </Form.Item>
-        <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/features/panel/selected-group.js

@@ -46,7 +46,7 @@ const SelectedGroup = ({ action, }) => {
                                             return onlyNumber === ""
                                                 ? 1
                                                 : Math.max(1, Number(onlyNumber));
-                                        } }) }))] }), !shapeAllIncludePolygon && (_jsx(_Fragment, { children: _jsxs(Flex, { gap: 2, vertical: true, children: [_jsx(Form.Item, { label: "Position X", name: "x", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { placeholder: placeholders["x"], style: { width: "100%" }, min: MIN_X, suffix: "px", name: "x" }) }), _jsx(Form.Item, { label: "Position Y", name: "y", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { suffix: "px", name: "y", min: MIN_Y, placeholder: placeholders["y"], style: { width: "100%" } }) }), _jsx(Form.Item, { label: "Rotation", name: "rotation", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { name: "rotation", suffix: "\u00B0", max: 360, min: 0, style: { width: "100%" }, placeholder: placeholders["rotation"] }) })] }) })), _jsxs(Flex, { gap: 2, children: [!allImageSelected && (_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", name: "stroke", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsxs(Flex, { vertical: true, children: [_jsx(Form.Item, { label: "Stroke Size", name: "strokeWidth", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { name: "strokeWidth", suffix: "px", style: { width: "100%" }, placeholder: placeholders["strokeWidth"] }) }), _jsx(Form.Item, { label: "opacity", name: "opacity", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { style: { width: "100%" }, step: 10, max: 100, min: 0, placeholder: placeholders["opacity"], parser: (value) => {
+                                        } }) }))] }), !shapeAllIncludePolygon && (_jsx(_Fragment, { children: _jsxs(Flex, { gap: 2, vertical: true, children: [_jsx(Form.Item, { label: "Position X", name: "x", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { placeholder: placeholders["x"], style: { width: "100%" }, min: MIN_X, suffix: "px", name: "x" }) }), _jsx(Form.Item, { label: "Position Y", name: "y", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { suffix: "px", name: "y", min: MIN_Y, placeholder: placeholders["y"], style: { width: "100%" } }) }), _jsx(Form.Item, { label: "Rotation", name: "rotation", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { name: "rotation", suffix: "\u00B0", max: 360, min: 0, style: { width: "100%" }, placeholder: placeholders["rotation"] }) })] }) })), _jsxs(Flex, { gap: 2, children: [!allImageSelected && (_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", name: "stroke", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsxs(Flex, { vertical: true, children: [_jsx(Form.Item, { label: "Stroke Size", name: "strokeWidth", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { name: "strokeWidth", suffix: "px", style: { width: "100%" }, placeholder: placeholders["strokeWidth"] }) }), _jsx(Form.Item, { label: "Opacity Fill", name: "opacity", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { style: { width: "100%" }, step: 10, max: 100, min: 0, placeholder: placeholders["opacity"], parser: (value) => {
                                             if (value === undefined || value === null || value === "")
                                                 return null;
                                             const cleaned = value.replace(/[^0-9.]/g, "");

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

@@ -121,7 +121,7 @@ const SelectedGroup = ({ action, }) => {
             <Form.Item label="Stroke Size" name={"strokeWidth"} className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
               <InputNumber name={"strokeWidth"} suffix="px" style={{ width: "100%" }} placeholder={placeholders["strokeWidth"]}/>
             </Form.Item>
-            <Form.Item label="opacity" name={"opacity"} className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
+            <Form.Item label="Opacity Fill" name={"opacity"} className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
               <InputNumber style={{ width: "100%" }} step={10} max={100} min={0} placeholder={placeholders["opacity"]} parser={(value) => {
             if (value === undefined || value === null || value === "")
                 return null;

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { Button, ColorPicker, Flex, Form, Input, InputNumber } from "antd";
 const TextTool = () => {
+    const [form] = Form.useForm();
     const dispatch = useAppDispatch();
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
     const deleteText = () => {
@@ -17,7 +18,13 @@ const TextTool = () => {
         dispatch({ type: "panel/setShow", payload: false });
         dispatch({ type: "tool/setActiveTool", payload: "select" });
     };
-    return (_jsxs("div", { className: "py-2", children: [_jsx(Form.Item, { label: "Name", name: "shape", className: "w-full hidden", children: _jsx(Input, { defaultValue: "text" }) }), _jsx(Form.Item, { name: "text", label: "Text", children: _jsx(Input, {}) }), _jsxs(Flex, { className: "w-full", gap: 2, children: [_jsx(Form.Item, { name: "fontColor", label: "Color", getValueFromEvent: (color) => color.toHexString(), children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { name: "fontSize", label: "Size", children: _jsx(InputNumber, { suffix: "px" }) })] }), _jsxs(Flex, { gap: 2, className: "w-full", children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", children: _jsx(InputNumber, { suffix: "px", controls: true, parser: (value) => {
+    // const textInputRef = useRef<InputRef>(null);
+    // useEffect(() => {
+    //   if (textInputRef.current) {
+    //     textInputRef.current.focus();
+    //   }
+    // }, []);
+    return (_jsxs("div", { className: "py-2", children: [_jsx(Form.Item, { label: "Name", name: "shape", className: "w-full hidden", children: _jsx(Input, { defaultValue: "text" }) }), _jsx(Form.Item, { name: "text", label: "Text", children: _jsx(Input, {}) }), _jsxs(Flex, { className: "w-full", gap: 2, children: [_jsx(Form.Item, { name: "fontColor", label: "Text Color", getValueFromEvent: (color) => color.toHexString(), children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { name: "fontSize", label: "Size", children: _jsx(InputNumber, { suffix: "px" }) })] }), _jsxs(Flex, { gap: 2, className: "w-full", children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", children: _jsx(InputNumber, { suffix: "px", controls: true, parser: (value) => {
                                 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));
@@ -32,6 +39,6 @@ const TextTool = () => {
                                 if (Number.isNaN(num))
                                     return 0;
                                 return Math.min(360, Math.max(0, num));
-                            } }) })] }), _jsx(Button, { type: "default", onClick: deleteText, className: "w-full", children: "Delete" })] }));
+                            } }) })] }), _jsx(Button, { type: "primary", onClick: deleteText, className: "w-full", children: "Delete" })] }));
 };
 export default TextTool;

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

@@ -2,6 +2,7 @@
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { Button, ColorPicker, Flex, Form, Input, InputNumber } from "antd";
 const TextTool = () => {
+    const [form] = Form.useForm();
     const dispatch = useAppDispatch();
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
     const deleteText = () => {
@@ -16,6 +17,12 @@ const TextTool = () => {
         dispatch({ type: "panel/setShow", payload: false });
         dispatch({ type: "tool/setActiveTool", payload: "select" });
     };
+    // const textInputRef = useRef<InputRef>(null);
+    // useEffect(() => {
+    //   if (textInputRef.current) {
+    //     textInputRef.current.focus();
+    //   }
+    // }, []);
     return (<div className="py-2">
       <Form.Item label="Name" name="shape" className="w-full hidden">
         <Input defaultValue={"text"}/>
@@ -25,7 +32,7 @@ const TextTool = () => {
         <Input />
       </Form.Item>
       <Flex className="w-full" gap={2}>
-        <Form.Item name={"fontColor"} label="Color" getValueFromEvent={(color) => color.toHexString()}>
+        <Form.Item name={"fontColor"} label="Text Color" getValueFromEvent={(color) => color.toHexString()}>
           <ColorPicker allowClear format="hex" defaultFormat="hex"/>
         </Form.Item>
         <Form.Item name={"fontSize"} label="Size">
@@ -66,7 +73,7 @@ const TextTool = () => {
         }}/>
         </Form.Item>
       </Flex>
-      <Button type="default" onClick={deleteText} className="w-full">
+      <Button type="primary" onClick={deleteText} className="w-full">
         Delete
       </Button>
     </div>);

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

@@ -55,6 +55,8 @@ const UploadTool = ({ name, type, action, transform, }) => {
         multiple: true,
         maxCount: 1,
         showUploadList: false,
+        // png jpg jpeg
+        accept: ".png,.jpg,.jpeg",
         onChange: (info) => __awaiter(void 0, void 0, void 0, function* () {
             setLoading(true);
             if (info.file) {

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

@@ -54,6 +54,8 @@ const UploadTool = ({ name, type, action, transform, }) => {
         multiple: true,
         maxCount: 1,
         showUploadList: false,
+        // png jpg jpeg
+        accept: ".png,.jpg,.jpeg",
         onChange: (info) => __awaiter(void 0, void 0, void 0, function* () {
             setLoading(true);
             if (info.file) {

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

@@ -62,6 +62,7 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
         multiple: true,
         maxCount: 1,
         showUploadList: false,
+        accept: ".png,.jpg,.jpeg",
         onChange: (info) => __awaiter(void 0, void 0, void 0, function* () {
             setLoading(true);
             if (info.file) {
@@ -168,13 +169,15 @@ const UploadToolForm = (props) => {
     const shape = Form.useWatch("shape");
     const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const extraComponents = useAppSelector((state) => state.board.extraComponents);
+    const isExtraComponent = extraComponents.some((item) => item.id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id));
     const maxSeat = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey]) || 0;
-    return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Shape" }), _jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Form.Item, { label: "Name", name: "shape", className: "w-full", children: _jsx(Select, { className: "w-full", children: optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
+    return (_jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: "Shape" }), (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) && !isExtraComponent && (_jsx(Flex, { gap: 2, className: "w-full", children: _jsx(Form.Item, { label: "Name", name: "shape", className: "w-full", children: _jsx(Select, { className: "w-full", children: optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
                             const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
                             return (_jsx(Option, { value: item.value, disabled: disabled, className: "flex w-full items-center", children: _jsxs(Flex, { gap: 5, align: "center", justify: "between", children: [item.icon, _jsx("span", { children: item.value === "table-seat-rect-circle"
                                                 ? `Circle Type 2 (only for 4 ${seatKey})`
                                                 : item.label })] }) }, item.value));
-                        }) }) }) }), _jsx(UploadTool, Object.assign({}, props)), _jsxs(Flex, { gap: 2, className: "w-full", children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", children: _jsx(InputNumber, { suffix: "px", controls: true, name: "width", min: MIN_WIDTH, step: 1, parser: (value) => {
+                        }) }) }) })), _jsx(UploadTool, Object.assign({}, props)), _jsxs(Flex, { gap: 2, className: "w-full", children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", children: _jsx(InputNumber, { suffix: "px", controls: true, name: "width", min: MIN_WIDTH, step: 1, parser: (value) => {
                                 var _a;
                                 const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
                                 return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
@@ -193,7 +196,7 @@ const UploadToolForm = (props) => {
                                 if (Number.isNaN(num))
                                     return 0;
                                 return Math.min(360, Math.max(0, num));
-                            } }) })] }), _jsxs(Flex, { gap: 2, children: [_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: "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/features/panel/upload-tool.jsx

@@ -61,6 +61,7 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
         multiple: true,
         maxCount: 1,
         showUploadList: false,
+        accept: ".png,.jpg,.jpeg",
         onChange: (info) => __awaiter(void 0, void 0, void 0, function* () {
             setLoading(true);
             if (info.file) {
@@ -196,28 +197,30 @@ const UploadToolForm = (props) => {
     const shape = Form.useWatch("shape");
     const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
     const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const extraComponents = useAppSelector((state) => state.board.extraComponents);
+    const isExtraComponent = extraComponents.some((item) => item.id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id));
     const maxSeat = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent[seatKey]) || 0;
     return (<div className="py-2">
       <h1 className="heading-s">Shape</h1>
-      <Flex gap={2} className="w-full">
-        <Form.Item label="Name" name="shape" className="w-full">
-          <Select className="w-full">
-            {optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
-            const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
-            return (<Option key={item.value} value={item.value} disabled={disabled} className="flex w-full items-center">
-                  <Flex gap={5} align="center" justify="between">
-                  {item.icon}
-                    <span>
-                      {item.value === "table-seat-rect-circle"
-                    ? `Circle Type 2 (only for 4 ${seatKey})`
-                    : item.label}
-                    </span>
-                  </Flex>
-                </Option>);
-        })}
-          </Select>
-        </Form.Item>
-      </Flex>
+      {(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) && !isExtraComponent && (<Flex gap={2} className="w-full">
+          <Form.Item label="Name" name="shape" className="w-full">
+            <Select className="w-full">
+              {optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
+                const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
+                return (<Option key={item.value} value={item.value} disabled={disabled} className="flex w-full items-center">
+                    <Flex gap={5} align="center" justify="between">
+                      {item.icon}
+                      <span>
+                        {item.value === "table-seat-rect-circle"
+                        ? `Circle Type 2 (only for 4 ${seatKey})`
+                        : item.label}
+                      </span>
+                    </Flex>
+                  </Option>);
+            })}
+            </Select>
+          </Form.Item>
+        </Flex>)}
       <UploadTool {...props}/>
       <Flex gap={2} className="w-full">
         <Form.Item label="Width" name="width" className="w-full">
@@ -278,7 +281,7 @@ const UploadToolForm = (props) => {
         </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/features/side-tool/index.js

@@ -2,9 +2,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Type, Upload, Hand, Layers, Grid, Lock, LockOpen, Undo2, Redo2, PenTool, Scan, ScanEye, } from "lucide-react";
 import ButtonTools from "../../components/button-tools";
-import { Divider, ColorPicker, Button, message, Popover, Flex, } from "antd";
+import { Divider, ColorPicker, message, Popover, Flex, } from "antd";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { useState } from "react";
+import clsx from "clsx";
 const SideTool = ({ dragOnly, deleteAutorized, }) => {
     const [color, setColor] = useState("#000000");
     const dispatch = useAppDispatch();
@@ -158,6 +159,8 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
         dispatch({ type: "board/setFlagChange", payload: true });
     };
     const handleOpenModalPreview = () => {
+        setOpenPreview(false);
+        hanldeSelectTool("select");
         dispatch({
             type: "tool/setTooglePreview",
             payload: true,
@@ -347,7 +350,27 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
                         content: _jsx("div", { children: "Fill Tool" }),
                         trigger: "hover",
                         placement: "right",
-                    } }) }), _jsx(Popover, { trigger: "click", placement: "right", open: openPreview, onOpenChange: setOpenPreview, content: _jsxs(Flex, { vertical: true, children: [_jsx(Button, { icon: _jsx(Scan, {}), type: "text", name: "Bounding Box", onClick: () => hanldeSelectTool("bounding-box"), style: active === "bounding-box" ? { color: "red" } : {} }), _jsx(Button, { icon: preview ? _jsx(EyeOff, {}) : _jsx(Eye, {}), type: "text", name: "Preview", onClick: handleOpenModalPreview, style: active === "preview" ? { color: "red" } : {} })] }), children: _jsxs(Flex, { className: "relative", children: [_jsx(ButtonTools, { buttonProps: {
+                    } }) }), _jsx(Popover, { trigger: "click", placement: "right", open: openPreview, onOpenChange: setOpenPreview, content: _jsxs(Flex, { vertical: true, children: [_jsx(ButtonTools, { buttonProps: {
+                                icon: _jsx(Scan, {}),
+                                type: "text",
+                                name: "Bounding Box",
+                                onClick: () => hanldeSelectTool("bounding-box"),
+                                style: active === "bounding-box" ? { color: "red" } : {},
+                            }, items: [], popoverProps: {
+                                content: _jsx("div", { children: "Framing Tool" }),
+                                trigger: "hover",
+                                placement: "right",
+                            } }), _jsx(ButtonTools, { buttonProps: {
+                                icon: preview ? _jsx(EyeOff, {}) : _jsx(Eye, {}),
+                                type: "text",
+                                name: "Preview",
+                                onClick: handleOpenModalPreview,
+                                style: active === "preview" ? { color: "red" } : {},
+                            }, items: [], popoverProps: {
+                                content: _jsx("div", { children: "Preview Tool" }),
+                                trigger: "hover",
+                                placement: "right",
+                            } })] }), children: _jsxs(Flex, { className: "relative", children: [_jsx(ButtonTools, { buttonProps: {
                                 icon: _jsx(ScanEye, {}),
                                 type: "text",
                                 name: "Preview",
@@ -356,10 +379,13 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
                                     ? { color: "red" }
                                     : {},
                             }, items: [], popoverProps: {
-                                content: _jsx("div", { children: "Layour View Tool" }),
+                                content: _jsx("div", { children: "Layout View Tool" }),
                                 trigger: "hover",
                                 placement: "right",
-                            } }), _jsx("span", { className: "absolute right-[-5px] top-[2px]", children: ">" })] }) }), _jsx(ButtonTools, { buttonProps: {
+                                open: openPreview ? false : undefined,
+                            } }), _jsx("span", { className: clsx("absolute right-[-5px] top-[2px]", {
+                                "text-red-500": active === "bounding-box" || active === "preview",
+                            }), children: ">" })] }) }), _jsx(ButtonTools, { buttonProps: {
                     icon: _jsx(Grid, {}),
                     onClick: () => toggleGrid(),
                     type: "text",

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

@@ -1,9 +1,10 @@
 "use client";
 import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Type, Upload, Hand, Layers, Grid, Lock, LockOpen, Undo2, Redo2, PenTool, Scan, ScanEye, } from "lucide-react";
 import ButtonTools from "../../components/button-tools";
-import { Divider, ColorPicker, Button, message, Popover, Flex, } from "antd";
+import { Divider, ColorPicker, message, Popover, Flex, } from "antd";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import { useState } from "react";
+import clsx from "clsx";
 const SideTool = ({ dragOnly, deleteAutorized, }) => {
     const [color, setColor] = useState("#000000");
     const dispatch = useAppDispatch();
@@ -157,6 +158,8 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
         dispatch({ type: "board/setFlagChange", payload: true });
     };
     const handleOpenModalPreview = () => {
+        setOpenPreview(false);
+        hanldeSelectTool("select");
         dispatch({
             type: "tool/setTooglePreview",
             payload: true,
@@ -365,8 +368,41 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
       </ColorPicker>
 
       <Popover trigger={"click"} placement="right" open={openPreview} onOpenChange={setOpenPreview} content={<Flex vertical>
-            <Button icon={<Scan />} type="text" name="Bounding Box" onClick={() => hanldeSelectTool("bounding-box")} style={active === "bounding-box" ? { color: "red" } : {}}/>
-            <Button icon={preview ? <EyeOff /> : <Eye />} type="text" name="Preview" onClick={handleOpenModalPreview} style={active === "preview" ? { color: "red" } : {}}/>
+            <ButtonTools buttonProps={{
+                icon: <Scan />,
+                type: "text",
+                name: "Bounding Box",
+                onClick: () => hanldeSelectTool("bounding-box"),
+                style: active === "bounding-box" ? { color: "red" } : {},
+            }} items={[]} popoverProps={{
+                content: <div>Framing Tool</div>,
+                trigger: "hover",
+                placement: "right",
+            }}/>
+            {/* icon={<Scan />}
+              type="text"
+              name="Bounding Box"
+              onClick={() => hanldeSelectTool("bounding-box")}
+              style={active === "bounding-box" ? { color: "red" } : {}}
+            /> */}
+
+            <ButtonTools buttonProps={{
+                icon: preview ? <EyeOff /> : <Eye />,
+                type: "text",
+                name: "Preview",
+                onClick: handleOpenModalPreview,
+                style: active === "preview" ? { color: "red" } : {},
+            }} items={[]} popoverProps={{
+                content: <div>Preview Tool</div>,
+                trigger: "hover",
+                placement: "right",
+            }}/>
+            {/* icon={preview ? <EyeOff /> : <Eye />}
+              type="text"
+              name="Preview"
+              onClick={handleOpenModalPreview}
+              style={active === "preview" ? { color: "red" } : {}}
+            /> */}
           </Flex>}>
         <Flex className="relative">
           <ButtonTools buttonProps={{
@@ -378,11 +414,16 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
                 ? { color: "red" }
                 : {},
         }} items={[]} popoverProps={{
-            content: <div>Layour View Tool</div>,
+            content: <div>Layout View Tool</div>,
             trigger: "hover",
             placement: "right",
+            open: openPreview ? false : undefined,
         }}/>
-          <span className="absolute right-[-5px] top-[2px]">{">"}</span>
+          <span className={clsx("absolute right-[-5px] top-[2px]", {
+            "text-red-500": active === "bounding-box" || active === "preview",
+        })}>
+            {">"}
+          </span>
         </Flex>
       </Popover>
 

package/package.json

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