seat-editor 3.4.7 → 3.5.0

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

@@ -1,16 +1,18 @@
 "use client";
 import { optionsShape } from "../../components/form-tools/shape";
 import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
-import SeatCircle from "./table-seat-circle";
-import SeatSquare from "./table-seat-square";
 import { useAppSelector } from "../../hooks/use-redux";
 import SectionLabel from "../../components/form-tools/label";
+import { useFormPlaceholder } from ".";
 const { Option } = Select;
 const SelectedGroup = () => {
     var _a;
+    const { placeholders, setPlaceholder, unsetPlaceholder, setPlaceholderBulk, resetPlaceholders, } = useFormPlaceholder();
     const shape = Form.useWatch("shape");
     const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
     const allShapeSelected = selectedGroup.map((item) => item.shape);
+    const hasExtraComponent = allShapeSelected.some((shape) => ["text", "background", "polygon"].includes(shape));
+    console.log({ hasExtraComponent });
     const sameShape = [
         "table-seat-circle",
         "table-seat-rect-circle",
@@ -30,60 +32,62 @@ const SelectedGroup = () => {
       <div className="py-2">
         <h1 className="heading-s"> Group Selection</h1>
         <div className="py-2">
-          {/* {!shapeIncludeImage && ( */}
-          <Flex gap={2} className="w-full">
+          {!hasExtraComponent && (<Flex gap={2} className="w-full">
             <Form.Item label="Name" name="shape" className="w-full">
               <Select className="w-full">
                 {optionsSelect === null || optionsSelect === void 0 ? void 0 : optionsSelect.map((item) => {
-            const disabled = item.value === "table-seat-rect-circle" && maxSeat;
-            return (<Option key={item.value} value={item.value} disabled={disabled}>
-                      {item.value === "table-seat-rect-circle" ?
-                    `Type 5 (only for 4 ${seatKey})` : item.label}
+                const disabled = item.value === "table-seat-rect-circle" && maxSeat;
+                return (<Option key={item.value} value={item.value} disabled={disabled}>
+                      {item.value === "table-seat-rect-circle"
+                        ? `Type 5 (only for 4 ${seatKey})`
+                        : item.label}
                     </Option>);
-        })}
+            })}
               </Select>
             </Form.Item>
-          </Flex>
-          {/* )} */}
-          <Flex gap={2} className="w-full">
-            {["table-seat-circle", "table-seat-rect-circle"].includes(shape) && <SeatCircle />}
-            {[
+          </Flex>)} 
+          {/* <Flex gap={2} className="w-full">
+          {["table-seat-circle", "table-seat-rect-circle"].includes(
+            shape
+          ) && <SeatCircle />}
+          {[
             "table-seat-square",
             "table-seat-square",
             "table-seat-rect-square",
             "table-seat-half-square",
-        ].includes(shape) && <SeatSquare />}
-          </Flex>
-          {!sameShape && (<>
-              <Flex gap={2} className="w-full">
+          ].includes(shape) && <SeatSquare />}
+        </Flex> */}
+          {/* {!sameShape && (
+          <> */}
+              <Flex gap={2} className="w-full" vertical>
                 {!shapeAllIncludePolygon && (<>
-                    <Form.Item label="Width" name="width" className="w-full">
-                      <InputNumber suffix="px"/>
+                    <Form.Item label="Width" name="width" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
+                      <InputNumber suffix="px" name="width" placeholder={placeholders["width"]} style={{ width: "100%" }}/>
                     </Form.Item>
-                    <Form.Item label="Height" name="height" className="w-full">
-                      <InputNumber suffix="px"/>
+                    <Form.Item label="Height" name="height" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
+                      <InputNumber suffix="px" name="height" placeholder={placeholders["height"]} style={{ width: "100%" }}/>
                     </Form.Item>
                   </>)}
-                {!(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && !shapeAllIncludePolygon && (<Form.Item label="Radius" name={"radius"} className="w-full">
-                    <InputNumber suffix="px" parser={(value) => {
-                    var _a;
-                    const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
-                    return onlyNumber === ""
-                        ? 1
-                        : Math.max(1, Number(onlyNumber));
-                }}/>
+                {!(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && !shapeAllIncludePolygon && (<Form.Item label="Radius" name={"radius"} className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
+                    <InputNumber name={"radius"} suffix="px" style={{ width: "100%" }} placeholder={placeholders["radius"]} parser={(value) => {
+                var _a;
+                const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
+                return onlyNumber === ""
+                    ? 1
+                    : Math.max(1, Number(onlyNumber));
+            }}/>
                   </Form.Item>)}
               </Flex>
               {!shapeAllIncludePolygon && (<>
-                  <Flex gap={2}>
-                    <Form.Item label="Position X" name="x" className="w-full">
-                      <InputNumber />
+                  <Flex gap={2} vertical>
+                    <Form.Item label="Position X" name="x" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
+                      <InputNumber placeholder={placeholders["x"]} style={{ width: "100%" }} suffix="px" name="x"/>
                     </Form.Item>
-                    <Form.Item label="Position Y" name="y" className="w-full">
-                      <InputNumber />
+                    <Form.Item label="Position Y" name="y" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
+                      <InputNumber suffix="px" name="y" placeholder={placeholders["y"]} style={{ width: "100%" }}/>
                     </Form.Item>
-                    <Form.Item label="Rotation" name="rotation" className="w-full">
-                      <InputNumber max={360} min={0}/>
+                    <Form.Item label="Rotation" name="rotation" className="w-full" layout="horizontal" labelCol={{ style: { width: 100, textAlign: "left" } }} wrapperCol={{ style: { flex: 1 } }}>
+                      <InputNumber name="rotation" suffix="°" max={360} min={0} style={{ width: "100%" }} placeholder={placeholders["rotation"]}/>
                     </Form.Item>
                   </Flex>
                 </>)}
@@ -95,24 +99,25 @@ const SelectedGroup = () => {
                   <ColorPicker allowClear format="hex" defaultFormat="hex"/>
                 </Form.Item>
               </Flex>
-              <Flex>
-                <Form.Item label="Stroke Width" name={"strokeWidth"} className="w-full">
-                  <InputNumber />
+              <Flex vertical>
+                <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">
-                  <InputNumber step={10} max={100} min={0} parser={(value) => {
-                if (value === undefined || value === null || value === "")
-                    return null;
-                const cleaned = value.replace(/[^0-9.]/g, "");
-                const num = Number(cleaned);
-                if (Number.isNaN(num))
-                    return null;
-                return Math.min(100, Math.max(0, num));
-            }} suffix="%"/>
+                <Form.Item label="opacity" 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;
+            const cleaned = value.replace(/[^0-9.]/g, "");
+            const num = Number(cleaned);
+            if (Number.isNaN(num))
+                return null;
+            return Math.min(100, Math.max(0, num));
+        }} suffix="%"/>
                 </Form.Item>
               </Flex>
               <SectionLabel />
-            </>)}
+            {/* </>
+      )} */}
         </div>
       </div>
     </>);

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

@@ -1,7 +1,22 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ColorPicker, Flex, Form, Input, InputNumber } from "antd";
+import { useAppDispatch, useAppSelector } from "@/hooks/use-redux";
+import { Button, ColorPicker, Flex, Form, Input, InputNumber } from "antd";
 const TextTool = () => {
+    const dispatch = useAppDispatch();
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const deleteText = () => {
+        dispatch({
+            type: "board/removeExtraComponent",
+            payload: selectedComponent,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
+        dispatch({ type: "panel/setSelectedComponent", payload: null });
+        dispatch({ type: "panel/setSelectedGroup", payload: null });
+        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) => {
                                 var _a;
                                 const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
@@ -17,6 +32,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" })] }));
 };
 export default TextTool;

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

@@ -1,6 +1,21 @@
 "use client";
-import { ColorPicker, Flex, Form, Input, InputNumber } from "antd";
+import { useAppDispatch, useAppSelector } from "@/hooks/use-redux";
+import { Button, ColorPicker, Flex, Form, Input, InputNumber } from "antd";
 const TextTool = () => {
+    const dispatch = useAppDispatch();
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const deleteText = () => {
+        dispatch({
+            type: "board/removeExtraComponent",
+            payload: selectedComponent,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
+        dispatch({ type: "panel/setSelectedComponent", payload: null });
+        dispatch({ type: "panel/setSelectedGroup", payload: null });
+        dispatch({ type: "panel/setShow", payload: false });
+        dispatch({ type: "tool/setActiveTool", payload: "select" });
+    };
     return (<div className="py-2">
       <Form.Item label="Name" name="shape" className="w-full hidden">
         <Input defaultValue={"text"}/>
@@ -51,7 +66,9 @@ const TextTool = () => {
         }}/>
         </Form.Item>
       </Flex>
-     
+      <Button type="default" onClick={deleteText} className="w-full">
+        Delete
+      </Button>
     </div>);
 };
 export default TextTool;

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

@@ -8,9 +8,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { Upload, Image, Button, Form } from "antd";
+import { Upload, Image, Button, Form, Flex } from "antd";
 import { InboxOutlined, LoadingOutlined } from "@ant-design/icons";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import SectionLabel from "../../components/form-tools/label";
@@ -55,6 +55,7 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
         rotation: 0,
         shape: name,
         src,
+        opacity: 1,
     });
     const propsUpload = {
         name: "file",
@@ -147,6 +148,19 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
     const handleDelete = () => {
         setDefaultSrc(null);
     };
-    return (_jsxs(Form.Item, { label: "", name: "src", className: "w-full", children: [defaultSrc ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto", children: _jsx(Image, { src: defaultSrc }) }), _jsx(Button, { type: "primary", onClick: handleDelete, className: "w-full mt-4", children: "Edit" })] })) : (_jsx(Dragger, Object.assign({ beforeUpload: () => false }, propsUpload, { children: loading ? (_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px]", children: _jsx(LoadingOutlined, {}) })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "ant-upload-drag-icon", children: _jsx(InboxOutlined, {}) }), _jsx("p", { className: "ant-upload-text", children: "Click or drag file to this area to upload" }), _jsx("p", { className: "ant-upload-hint", children: "Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files." })] })) }))), (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) && (_jsxs(_Fragment, { children: [_jsx(SectionShape, { allowChangeShape: type === "component" }), _jsx(SectionLabel, {})] }))] }));
+    const deleteImages = () => {
+        setLoading(true);
+        dispatch({
+            type: "board/removeExtraComponent",
+            payload: selectedComponent,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
+        dispatch({ type: "panel/setSelectedComponent", payload: null });
+        dispatch({ type: "panel/setSelectedGroup", payload: null });
+        dispatch({ type: "panel/setShow", payload: false });
+        dispatch({ type: "tool/setActiveTool", payload: "select" });
+    };
+    return (_jsxs(Form.Item, { label: "", name: "src", className: "w-full", children: [defaultSrc ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto", children: _jsx(Image, { src: defaultSrc }) }), _jsxs(Flex, { vertical: true, gap: 5, children: [_jsx(Button, { type: "primary", onClick: handleDelete, className: "w-full mt-4", loading: loading, children: "Edit" }), _jsx(Button, { type: "default", onClick: deleteImages, className: "w-full", loading: loading, children: "Delete" })] })] })) : (_jsx(Dragger, Object.assign({ beforeUpload: () => false }, propsUpload, { children: loading ? (_jsx("div", { className: "w-full flex flex-col items-center gap-2 max-h-[200px]", children: _jsx(LoadingOutlined, {}) })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "ant-upload-drag-icon", children: _jsx(InboxOutlined, {}) }), _jsx("p", { className: "ant-upload-text", children: "Click or drag file to this area to upload" }), _jsx("p", { className: "ant-upload-hint", children: "Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files." })] })) }))), (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) && (_jsxs(_Fragment, { children: [_jsx(SectionShape, { allowChangeShape: type === "component" }), _jsx(SectionLabel, {})] }))] }));
 };
 export default UploadTool;

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

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { useState, useEffect } from "react";
-import { Upload, Image, Button, Form } from "antd";
+import { Upload, Image, Button, Form, Flex } from "antd";
 import { InboxOutlined, LoadingOutlined } from "@ant-design/icons";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import SectionLabel from "../../components/form-tools/label";
@@ -54,6 +54,7 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
         rotation: 0,
         shape: name,
         src,
+        opacity: 1,
     });
     const propsUpload = {
         name: "file",
@@ -146,14 +147,32 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
     const handleDelete = () => {
         setDefaultSrc(null);
     };
+    const deleteImages = () => {
+        setLoading(true);
+        dispatch({
+            type: "board/removeExtraComponent",
+            payload: selectedComponent,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
+        dispatch({ type: "panel/setSelectedComponent", payload: null });
+        dispatch({ type: "panel/setSelectedGroup", payload: null });
+        dispatch({ type: "panel/setShow", payload: false });
+        dispatch({ type: "tool/setActiveTool", payload: "select" });
+    };
     return (<Form.Item label="" name="src" className="w-full">
       {defaultSrc ? (<>
           <div className="w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto">
             <Image src={defaultSrc}/>
           </div>
-          <Button type="primary" onClick={handleDelete} className="w-full mt-4">
-            Edit
-          </Button>
+          <Flex vertical gap={5}>
+            <Button type="primary" onClick={handleDelete} className="w-full mt-4" loading={loading}>
+              Edit
+            </Button>
+            <Button type="default" onClick={deleteImages} className="w-full" loading={loading}>
+              Delete
+            </Button>
+          </Flex>
         </>) : (<Dragger beforeUpload={() => false} {...propsUpload}>
           {loading ? (<div className="w-full flex flex-col items-center gap-2 max-h-[200px]">
               <LoadingOutlined />

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

@@ -79,12 +79,12 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
     const controlTools = [
         {
             id: "background",
-            name: "Background",
+            name: "Image Tool",
             icon: _jsx(Image, {}),
         },
         {
             id: "text",
-            name: "Text",
+            name: "Text Tool",
             icon: _jsx(Type, {}),
         },
         {
@@ -267,13 +267,17 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
         dispatch({ type: "board/undoHistory" });
         dispatch({ type: "board/setFlagChange", payload: true });
         dispatch({ type: "board/setUpdateBy", payload: "global" });
+        dispatch({ type: "panel/setShow", payload: false });
     };
     const handleRedo = () => {
         dispatch({ type: "board/redoHistory" });
         dispatch({ type: "board/setFlagChange", payload: true });
         dispatch({ type: "board/setUpdateBy", payload: "global" });
+        dispatch({ type: "panel/setShow", payload: false });
     };
-    return (_jsxs("div", { className: "h-full left-0 flex flex-col items-center border-r-2 border-gray-300 bg-white px-2 pt-4", children: [tools === null || tools === void 0 ? void 0 : tools.map((tool) => (_jsx(ButtonTools, { buttonProps: {
+    const [openPreview, setOpenPreview] = useState(false);
+    const [colorPickerOpen, setColorPickerOpen] = useState(false);
+    return (_jsxs("div", { className: "h-full left-0 flex flex-col items-center border-r-2 border-gray-300 bg-white px-2 pt-4 mt-[78px]", children: [tools === null || tools === void 0 ? void 0 : tools.map((tool) => (_jsx(ButtonTools, { buttonProps: {
                     icon: tool.icon,
                     type: "text",
                     name: tool.name,
@@ -330,13 +334,46 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
                     content: _jsx("div", { children: tool.name }),
                     trigger: "hover",
                     placement: "right",
-                }, items: [] }, tool.id))), _jsx(ColorPicker, { value: color, onChange: handleChangeColorBackground, children: _jsx(Button, { icon: _jsx(PaintBucket, {}), type: "text", name: "Background Color", onClick: () => hanldeSelectTool("background-color"), style: active === "background-color" ? { color: "red" } : {} }) }), _jsx(Popover, { trigger: "hover", placement: "right", 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: _jsx(Button, { icon: _jsx(ScanEye, {}), type: "text" }) }), _jsx(Button, { icon: _jsx(Grid, {}), type: "text", name: "Grid", onClick: () => toggleGrid() }), _jsx(ButtonTools, { buttonProps: {
+                }, items: [] }, tool.id))), _jsx(ColorPicker, { value: color, open: colorPickerOpen, onOpenChange: setColorPickerOpen, onChange: handleChangeColorBackground, placement: "right", children: _jsx(ButtonTools, { buttonProps: {
+                        icon: _jsx(PaintBucket, {}),
+                        type: "text",
+                        name: "background-color",
+                        style: active === "background-color" ? { color: "red" } : {},
+                        onClick: () => {
+                            hanldeSelectTool("background-color");
+                            setColorPickerOpen((prev) => !prev);
+                        },
+                    }, items: [], popoverProps: {
+                        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: _jsx(ButtonTools, { buttonProps: {
+                        icon: _jsx(ScanEye, {}),
+                        type: "text",
+                        name: "Preview",
+                        onClick: () => setOpenPreview((prev) => !prev),
+                        style: (active === "bounding-box") || (active === "preview") ? { color: "red" } : {},
+                    }, items: [], popoverProps: {
+                        content: _jsx("div", { children: "Layour View Tool" }),
+                        trigger: "hover",
+                        placement: "right",
+                    } }) }), _jsx(ButtonTools, { buttonProps: {
+                    icon: _jsx(Grid, {}),
+                    onClick: () => toggleGrid(),
+                    type: "text",
+                    name: "Grid",
+                    style: active === "grid" ? { color: "red" } : {},
+                }, items: [], popoverProps: {
+                    content: _jsx("div", { children: "Grid Tool" }),
+                    trigger: "hover",
+                    placement: "right",
+                } }), _jsx(ButtonTools, { buttonProps: {
                     onClick: () => handleRemoveComponent(),
                     icon: _jsx(Trash, {}),
                     type: "text",
                     name: "trash",
                 }, items: [], popoverProps: {
-                    content: _jsx("div", { children: "Trash" }),
+                    content: _jsx("div", { children: "Trash Tool" }),
                     trigger: "hover",
                     placement: "right",
                 } }), _jsx(ButtonTools, { buttonProps: {
@@ -345,7 +382,7 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
                     type: "text",
                     name: "trash",
                 }, items: [], popoverProps: {
-                    content: (_jsx("div", { children: lockBackground ? "Unlock Background" : "Lock Background" })),
+                    content: (_jsx("div", { children: lockBackground ? "Unlock Images Tool" : "Lock Images Tool" })),
                     trigger: "hover",
                     placement: "right",
                 } }), _jsx(ButtonTools, { buttonProps: {

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

@@ -78,12 +78,12 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
     const controlTools = [
         {
             id: "background",
-            name: "Background",
+            name: "Image Tool",
             icon: <Image />,
         },
         {
             id: "text",
-            name: "Text",
+            name: "Text Tool",
             icon: <Type />,
         },
         {
@@ -266,13 +266,17 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
         dispatch({ type: "board/undoHistory" });
         dispatch({ type: "board/setFlagChange", payload: true });
         dispatch({ type: "board/setUpdateBy", payload: "global" });
+        dispatch({ type: "panel/setShow", payload: false });
     };
     const handleRedo = () => {
         dispatch({ type: "board/redoHistory" });
         dispatch({ type: "board/setFlagChange", payload: true });
         dispatch({ type: "board/setUpdateBy", payload: "global" });
+        dispatch({ type: "panel/setShow", payload: false });
     };
-    return (<div className="h-full left-0 flex flex-col items-center border-r-2 border-gray-300 bg-white px-2 pt-4">
+    const [openPreview, setOpenPreview] = useState(false);
+    const [colorPickerOpen, setColorPickerOpen] = useState(false);
+    return (<div className="h-full left-0 flex flex-col items-center border-r-2 border-gray-300 bg-white px-2 pt-4 mt-[78px]">
       {tools === null || tools === void 0 ? void 0 : tools.map((tool) => (<ButtonTools key={tool.id} buttonProps={{
                 icon: tool.icon,
                 type: "text",
@@ -343,25 +347,58 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
                 trigger: "hover",
                 placement: "right",
             }} items={[]}/>))}
-      <ColorPicker value={color} onChange={handleChangeColorBackground}>
-        <Button icon={<PaintBucket />} type="text" name="Background Color" onClick={() => hanldeSelectTool("background-color")} style={active === "background-color" ? { color: "red" } : {}}/>
+      <ColorPicker value={color} open={colorPickerOpen} onOpenChange={setColorPickerOpen} onChange={handleChangeColorBackground} placement="right">
+        <ButtonTools buttonProps={{
+            icon: <PaintBucket />,
+            type: "text",
+            name: "background-color",
+            style: active === "background-color" ? { color: "red" } : {},
+            onClick: () => {
+                hanldeSelectTool("background-color");
+                setColorPickerOpen((prev) => !prev);
+            },
+        }} items={[]} popoverProps={{
+            content: <div>Fill Tool</div>,
+            trigger: "hover",
+            placement: "right",
+        }}/>
       </ColorPicker>
 
-      <Popover trigger={"hover"} placement="right" content={<Flex vertical>
+      <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" } : {}}/>
           </Flex>}>
-        <Button icon={<ScanEye />} type="text"/>
+        <ButtonTools buttonProps={{
+            icon: <ScanEye />,
+            type: "text",
+            name: "Preview",
+            onClick: () => setOpenPreview((prev) => !prev),
+            style: (active === "bounding-box") || (active === "preview") ? { color: "red" } : {},
+        }} items={[]} popoverProps={{
+            content: <div>Layour View Tool</div>,
+            trigger: "hover",
+            placement: "right",
+        }}/>
       </Popover>
 
-      <Button icon={<Grid />} type="text" name="Grid" onClick={() => toggleGrid()}/>
+      <ButtonTools buttonProps={{
+            icon: <Grid />,
+            onClick: () => toggleGrid(),
+            type: "text",
+            name: "Grid",
+            style: active === "grid" ? { color: "red" } : {},
+        }} items={[]} popoverProps={{
+            content: <div>Grid Tool</div>,
+            trigger: "hover",
+            placement: "right",
+        }}/>
       <ButtonTools buttonProps={{
             onClick: () => handleRemoveComponent(),
             icon: <Trash />,
             type: "text",
             name: "trash",
         }} items={[]} popoverProps={{
-            content: <div>Trash</div>,
+            content: <div>Trash Tool</div>,
             trigger: "hover",
             placement: "right",
         }}/>
@@ -372,7 +409,7 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
             name: "trash",
         }} items={[]} popoverProps={{
             content: (<div>
-              {lockBackground ? "Unlock Background" : "Lock Background"}
+              {lockBackground ? "Unlock Images Tool" : "Lock Images Tool"}
             </div>),
             trigger: "hover",
             placement: "right",

package/dist/features/view-only-4/connect-handle.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    cx: number;
+    cy: number;
+    width: number;
+    height: number;
+    nodeId: string;
+    rotation?: number;
+    isConnecting: boolean;
+    onStartConnect: (nodeId: string) => void;
+    onEndConnect: (nodeId: string) => void;
+};
+export declare const ConnectHandle: React.FC<Props>;
+export {};

package/dist/features/view-only-4/connect-handle.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, // ← tambah ini
+isConnecting, onStartConnect, onEndConnect, }) => {
+    const hw = width / 2;
+    const hh = height / 2;
+    // Tombol ⊕ di pojok kanan atas (dalam local space)
+    const btnLocalX = hw - 2;
+    const btnLocalY = -hh - 8;
+    return (
+    // Semua di-wrap dalam g dengan translate ke center + rotate
+    // Sama persis seperti struktur render node aslinya
+    _jsx("g", { transform: `translate(${cx}, ${cy}) rotate(${rotation})`, children: isConnecting ? (
+        // Mode connecting: overlay seluruh node
+        _jsx("rect", { x: -hw - 4, y: -hh - 4, width: width + 8, height: height + 8, fill: "transparent", stroke: "#a78bfa", strokeWidth: 1.5, strokeDasharray: "4 2", rx: 4, style: { cursor: "crosshair" }, onMouseDown: (e) => {
+                e.stopPropagation();
+                onEndConnect(nodeId);
+            } })) : (
+        // Tombol ⊕ — posisi relatif dari center node
+        _jsxs("g", { transform: `translate(${btnLocalX}, ${btnLocalY})`, style: { cursor: "crosshair" }, onMouseDown: (e) => {
+                e.stopPropagation();
+                onStartConnect(nodeId);
+            }, children: [_jsx("circle", { r: 8, fill: "#0a0e1a", stroke: "#38bdf8", strokeWidth: 1.2, opacity: 0.9 }), _jsx("text", { textAnchor: "middle", dominantBaseline: "middle", fill: "#38bdf8", fontSize: 11, fontWeight: 700, style: { pointerEvents: "none", userSelect: "none" }, children: "\u2295" })] })) }));
+};

package/dist/features/view-only-4/connect-handle.jsx

@@ -0,0 +1,30 @@
+export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, // ← tambah ini
+isConnecting, onStartConnect, onEndConnect, }) => {
+    const hw = width / 2;
+    const hh = height / 2;
+    // Tombol ⊕ di pojok kanan atas (dalam local space)
+    const btnLocalX = hw - 2;
+    const btnLocalY = -hh - 8;
+    return (
+    // Semua di-wrap dalam g dengan translate ke center + rotate
+    // Sama persis seperti struktur render node aslinya
+    <g transform={`translate(${cx}, ${cy}) rotate(${rotation})`}>
+      
+      {isConnecting ? (
+        // Mode connecting: overlay seluruh node
+        <rect x={-hw - 4} y={-hh - 4} width={width + 8} height={height + 8} fill="transparent" stroke="#a78bfa" strokeWidth={1.5} strokeDasharray="4 2" rx={4} style={{ cursor: "crosshair" }} onMouseDown={(e) => {
+                e.stopPropagation();
+                onEndConnect(nodeId);
+            }}/>) : (
+        // Tombol ⊕ — posisi relatif dari center node
+        <g transform={`translate(${btnLocalX}, ${btnLocalY})`} style={{ cursor: "crosshair" }} onMouseDown={(e) => {
+                e.stopPropagation();
+                onStartConnect(nodeId);
+            }}>
+          <circle r={8} fill="#0a0e1a" stroke="#38bdf8" strokeWidth={1.2} opacity={0.9}/>
+          <text textAnchor="middle" dominantBaseline="middle" fill="#38bdf8" fontSize={11} fontWeight={700} style={{ pointerEvents: "none", userSelect: "none" }}>
+            ⊕
+          </text>
+        </g>)}
+    </g>);
+};

package/dist/features/view-only-4/connection-layer.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { NodeType } from "./utils";
+import { EdgeType } from "./utils";
+type Props = {
+    edges: EdgeType[];
+    selectedEdge: string | null;
+    connecting: {
+        fromId: string;
+    } | null;
+    mousePos: {
+        x: number;
+        y: number;
+    };
+    getNodeById: (id: string) => NodeType | null;
+    onSelectEdge: (edgeId: string) => void;
+    onStartDragWaypoint: (e: React.MouseEvent, edgeId: string, index: number) => void;
+    onInsertWaypoint: (e: React.MouseEvent, edgeId: string, insertIndex: number, x: number, y: number) => void;
+    onRemoveWaypoint: (e: React.MouseEvent, edgeId: string, index: number) => void;
+};
+export declare const ConnectionLayer: React.FC<Props>;
+export {};