seat-editor 3.5.13 → 3.5.14

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

@@ -5,13 +5,14 @@ import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
 import { useAppSelector } from "../../hooks/use-redux";
 import { useFormPlaceholder } from ".";
 import { MIN_HEIGHT, MIN_WIDTH, MIN_X, MIN_Y } from "../board-v3/constant";
+import UploadGroupTool from "./upload-group-tool";
 const { Option } = Select;
-const SelectedGroup = () => {
-    var _a;
+const SelectedGroup = ({ action, }) => {
     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 allImageSelected = allShapeSelected.every((shape) => ["image-table", "background"].includes(shape));
     const hasExtraComponent = allShapeSelected.some((shape) => ["text", "background", "polygon"].includes(shape));
     const allExtraComponent = allShapeSelected.every((shape) => ["text", "background", "polygon"].includes(shape));
     // const sameShape = [
@@ -27,7 +28,7 @@ const SelectedGroup = () => {
     // );
     const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
     const shapeAllIncludePolygon = allShapeSelected.includes("polygon");
-    const optionsSelect = (_a = optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.slice(0, -1)) === null || _a === void 0 ? void 0 : _a.map((item) => {
+    const optionsSelect = optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
         return Object.assign(Object.assign({}, item), { disabled: allShapeSelected.includes(item.value) });
     });
     const maxSeat = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.some((item) => (item === null || item === void 0 ? void 0 : item[seatKey]) > 4);
@@ -36,16 +37,16 @@ const SelectedGroup = () => {
     }
     return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Group Selection" }), _jsxs("div", { className: "py-2", children: [!hasExtraComponent && (_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: optionsSelect === null || optionsSelect === void 0 ? void 0 : optionsSelect.map((item) => {
                                         const disabled = item.value === "table-seat-rect-circle" && maxSeat;
-                                        return (_jsx(Option, { value: item.value, disabled: disabled, children: item.value === "table-seat-rect-circle"
-                                                ? `Type 5 (only for 4 ${seatKey})`
-                                                : item.label }, item.value));
-                                    }) }) }) })), _jsxs(Flex, { gap: 2, className: "w-full", vertical: true, children: [!shapeAllIncludePolygon && (_jsxs(_Fragment, { children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { suffix: "px", name: "width", min: MIN_WIDTH, placeholder: placeholders["width"], style: { width: "100%" } }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { suffix: "px", name: "height", min: MIN_HEIGHT, placeholder: placeholders["height"], style: { width: "100%" } }) })] })), !(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && !shapeAllIncludePolygon && (_jsx(Form.Item, { label: "Radius", name: "radius", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { name: "radius", suffix: "px", style: { width: "100%" }, placeholder: placeholders["radius"], parser: (value) => {
+                                        return (_jsx(Option, { value: item.value, disabled: disabled, className: "flex w-full justify-between items-center", children: _jsxs(Flex, { gap: 5, align: "center", justify: "between", children: [item.icon, _jsx("span", { children: item.value === "table-seat-rect-circle"
+                                                            ? `Type 5 (only for 4 ${seatKey})`
+                                                            : item.label })] }) }, item.value));
+                                    }) }) }) })), allImageSelected && (_jsx(UploadGroupTool, { type: "component", name: "image-table", action: action })), _jsxs(Flex, { gap: 2, className: "w-full", vertical: true, children: [!shapeAllIncludePolygon && (_jsxs(_Fragment, { children: [_jsx(Form.Item, { label: "Width", name: "width", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { suffix: "px", name: "width", min: MIN_WIDTH, placeholder: placeholders["width"], style: { width: "100%" } }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(InputNumber, { suffix: "px", name: "height", min: MIN_HEIGHT, placeholder: placeholders["height"], style: { width: "100%" } }) })] })), !(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && !shapeAllIncludePolygon && (_jsx(Form.Item, { label: "Radius", name: "radius", className: "w-full", layout: "horizontal", labelCol: { style: { width: 100, textAlign: "left" } }, wrapperCol: { style: { flex: 1 } }, children: _jsx(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));
-                                        } }) }))] }), !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: [_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", 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

@@ -4,13 +4,14 @@ import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
 import { useAppSelector } from "../../hooks/use-redux";
 import { useFormPlaceholder } from ".";
 import { MIN_HEIGHT, MIN_WIDTH, MIN_X, MIN_Y } from "../board-v3/constant";
+import UploadGroupTool from "./upload-group-tool";
 const { Option } = Select;
-const SelectedGroup = () => {
-    var _a;
+const SelectedGroup = ({ action, }) => {
     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 allImageSelected = allShapeSelected.every((shape) => ["image-table", "background"].includes(shape));
     const hasExtraComponent = allShapeSelected.some((shape) => ["text", "background", "polygon"].includes(shape));
     const allExtraComponent = allShapeSelected.every((shape) => ["text", "background", "polygon"].includes(shape));
     // const sameShape = [
@@ -26,7 +27,7 @@ const SelectedGroup = () => {
     // );
     const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
     const shapeAllIncludePolygon = allShapeSelected.includes("polygon");
-    const optionsSelect = (_a = optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.slice(0, -1)) === null || _a === void 0 ? void 0 : _a.map((item) => {
+    const optionsSelect = optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
         return Object.assign(Object.assign({}, item), { disabled: allShapeSelected.includes(item.value) });
     });
     const maxSeat = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.some((item) => (item === null || item === void 0 ? void 0 : item[seatKey]) > 4);
@@ -48,15 +49,21 @@ const SelectedGroup = () => {
                 <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"
+                return (<Option key={item.value} value={item.value} disabled={disabled} className="flex w-full justify-between items-center">
+                        <Flex gap={5} align="center" justify="between">
+                        {item.icon}
+                          <span>
+                            {item.value === "table-seat-rect-circle"
                         ? `Type 5 (only for 4 ${seatKey})`
                         : item.label}
+                          </span>
+                        </Flex>
                       </Option>);
             })}
                 </Select>
               </Form.Item>
             </Flex>)}
+          {allImageSelected && (<UploadGroupTool type="component" name="image-table" action={action}/>)}
           {/* <Flex gap={2} className="w-full">
           {["table-seat-circle", "table-seat-rect-circle"].includes(
             shape
@@ -103,9 +110,9 @@ const SelectedGroup = () => {
               </Flex>
             </>)}
           <Flex gap={2}>
-            <Form.Item label="Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
-              <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-            </Form.Item>
+            {!allImageSelected && (<Form.Item label="Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
+                <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+              </Form.Item>)}
             <Form.Item label="Stroke" name={"stroke"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
               <ColorPicker allowClear format="hex" defaultFormat="hex"/>
             </Form.Item>

package/dist/features/panel/upload-group-tool.d.ts

@@ -0,0 +1,10 @@
+import { PropertiesProps } from "../../dto/table";
+interface UploadToolProps {
+    name: string;
+    type?: "component" | "background" | "assets";
+    action?: (file: File) => Promise<string>;
+    defaultValue?: PropertiesProps;
+    transform?: any;
+}
+declare const UploadTool: ({ name, type, action, transform, }: UploadToolProps) => import("react/jsx-runtime").JSX.Element;
+export default UploadTool;

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

@@ -0,0 +1,147 @@
+"use client";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Upload, Image, Button, Form, Flex } from "antd";
+import { InboxOutlined, LoadingOutlined } from "@ant-design/icons";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
+const { Dragger } = Upload;
+const UploadTool = ({ name, type, action, transform, }) => {
+    // const src = Form.useWatch("src");
+    // const height = Form.useWatch("height");
+    // const width = Form.useWatch("width");
+    // const x = Form.useWatch("x");
+    // const y = Form.useWatch("y");
+    // const shape = Form.useWatch("shape");
+    var _a, _b, _c;
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    const transformState = (_a = transform === null || transform === void 0 ? void 0 : transform.instance) === null || _a === void 0 ? void 0 : _a.transformState;
+    const [defaultSrc, setDefaultSrc] = useState(null);
+    const [isEdit, setIsEdit] = useState(true);
+    const [loading, setLoading] = useState(false);
+    useEffect(() => {
+        var _a, _b;
+        const allSameSrc = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.every((item) => item.src === selectedGroup[0].src);
+        if (allSameSrc && ((_a = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup[0]) === null || _a === void 0 ? void 0 : _a.shape) === name) {
+            setDefaultSrc((_b = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup[0]) === null || _b === void 0 ? void 0 : _b.src);
+            setIsEdit(true);
+            setLoading(false);
+        }
+    }, [selectedGroup]);
+    const dispatch = useAppDispatch();
+    const widthWorkspace = ((_b = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0;
+    const heightWorkspace = ((_c = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0;
+    const defaultFormatValue = (width, height, src, id, x, y) => ({
+        id: id ? String(id) : `${Date.now()}`,
+        x: x || Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionX),
+        y: y || Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionY),
+        width: width < 1 ? 200 : width,
+        height: height < 1 ? 200 : height,
+        rotation: 0,
+        shape: name,
+        src,
+        opacity: 1,
+    });
+    const propsUpload = {
+        name: "file",
+        multiple: true,
+        maxCount: 1,
+        showUploadList: false,
+        onChange: (info) => __awaiter(void 0, void 0, void 0, function* () {
+            setLoading(true);
+            if (info.file) {
+                const file = info.file;
+                const img = new window.Image();
+                let srcFromResponse = "";
+                try {
+                    // ⬇️ IF ada custom action (upload ke server)
+                    if (action) {
+                        const src = yield action(file);
+                        // updateComponentsBulk
+                        if (isEdit) {
+                            const payload = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.map((item) => (Object.assign({}, defaultFormatValue(item.width, item.height, src, String(item.id), item.x, item.y))));
+                            dispatch({
+                                type: "board/updateComponentsBulk",
+                                payload,
+                            });
+                            dispatch({
+                                type: "panel/setSelectedGroup",
+                                payload,
+                            });
+                            setDefaultSrc(src);
+                            dispatch({ type: "board/setFlagChange", payload: true });
+                            dispatch({ type: "board/setUpdateBy", payload: "global" });
+                        }
+                    }
+                    // ⬇️ IF local upload
+                    else {
+                        img.onload = () => {
+                            const scaleX = widthWorkspace / img.width;
+                            const scaleY = heightWorkspace / img.height;
+                            const scale = Math.min(1, scaleX, scaleY);
+                            const width = img.width * scale;
+                            const height = img.height * scale;
+                            if (isEdit) {
+                                const payload = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.map((item) => (Object.assign({}, defaultFormatValue(item.width, item.height, img.src, String(item.id), item.x, item.y))));
+                                dispatch({
+                                    type: "board/updateComponentsBulk",
+                                    payload,
+                                });
+                                dispatch({
+                                    type: "panel/setSelectedGroup",
+                                    payload,
+                                });
+                                setDefaultSrc(img.src);
+                                dispatch({ type: "board/setFlagChange", payload: true });
+                                dispatch({ type: "board/setUpdateBy", payload: "global" });
+                            }
+                            else {
+                                dispatch({
+                                    type: type === "component"
+                                        ? "board/addComponent"
+                                        : "board/setExtraComponent",
+                                    payload: Object.assign({}, defaultFormatValue(width, height, img.src)),
+                                });
+                            }
+                            setDefaultSrc(img.src);
+                            dispatch({ type: "board/setFlagChange", payload: true });
+                            dispatch({ type: "board/setUpdateBy", payload: "global" });
+                            // message.success(`${info.file.name} uploaded successfully.`);
+                        };
+                        // Set img src AFTER onload
+                        img.src = URL.createObjectURL(file);
+                    }
+                }
+                catch (e) {
+                    // message.error("Upload failed, please try again.");
+                }
+            }
+        }),
+    };
+    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 (_jsx(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(Flex, { vertical: true, gap: 5, children: _jsx(Button, { type: "default", onClick: handleDelete, className: "w-full mt-4", loading: loading, 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." })] })) }))) }));
+};
+export default UploadTool;

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

@@ -0,0 +1,180 @@
+"use client";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useState, useEffect } from "react";
+import { Upload, Image, Button, Form, Flex } from "antd";
+import { InboxOutlined, LoadingOutlined } from "@ant-design/icons";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
+const { Dragger } = Upload;
+const UploadTool = ({ name, type, action, transform, }) => {
+    // const src = Form.useWatch("src");
+    // const height = Form.useWatch("height");
+    // const width = Form.useWatch("width");
+    // const x = Form.useWatch("x");
+    // const y = Form.useWatch("y");
+    // const shape = Form.useWatch("shape");
+    var _a, _b, _c;
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    const transformState = (_a = transform === null || transform === void 0 ? void 0 : transform.instance) === null || _a === void 0 ? void 0 : _a.transformState;
+    const [defaultSrc, setDefaultSrc] = useState(null);
+    const [isEdit, setIsEdit] = useState(true);
+    const [loading, setLoading] = useState(false);
+    useEffect(() => {
+        var _a, _b;
+        const allSameSrc = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.every((item) => item.src === selectedGroup[0].src);
+        if (allSameSrc && ((_a = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup[0]) === null || _a === void 0 ? void 0 : _a.shape) === name) {
+            setDefaultSrc((_b = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup[0]) === null || _b === void 0 ? void 0 : _b.src);
+            setIsEdit(true);
+            setLoading(false);
+        }
+    }, [selectedGroup]);
+    const dispatch = useAppDispatch();
+    const widthWorkspace = ((_b = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0;
+    const heightWorkspace = ((_c = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0;
+    const defaultFormatValue = (width, height, src, id, x, y) => ({
+        id: id ? String(id) : `${Date.now()}`,
+        x: x || Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionX),
+        y: y || Math.abs(transformState === null || transformState === void 0 ? void 0 : transformState.positionY),
+        width: width < 1 ? 200 : width,
+        height: height < 1 ? 200 : height,
+        rotation: 0,
+        shape: name,
+        src,
+        opacity: 1,
+    });
+    const propsUpload = {
+        name: "file",
+        multiple: true,
+        maxCount: 1,
+        showUploadList: false,
+        onChange: (info) => __awaiter(void 0, void 0, void 0, function* () {
+            setLoading(true);
+            if (info.file) {
+                const file = info.file;
+                const img = new window.Image();
+                let srcFromResponse = "";
+                try {
+                    // ⬇️ IF ada custom action (upload ke server)
+                    if (action) {
+                        const src = yield action(file);
+                        // updateComponentsBulk
+                        if (isEdit) {
+                            const payload = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.map((item) => (Object.assign({}, defaultFormatValue(item.width, item.height, src, String(item.id), item.x, item.y))));
+                            dispatch({
+                                type: "board/updateComponentsBulk",
+                                payload,
+                            });
+                            dispatch({
+                                type: "panel/setSelectedGroup",
+                                payload,
+                            });
+                            setDefaultSrc(src);
+                            dispatch({ type: "board/setFlagChange", payload: true });
+                            dispatch({ type: "board/setUpdateBy", payload: "global" });
+                        }
+                    }
+                    // ⬇️ IF local upload
+                    else {
+                        img.onload = () => {
+                            const scaleX = widthWorkspace / img.width;
+                            const scaleY = heightWorkspace / img.height;
+                            const scale = Math.min(1, scaleX, scaleY);
+                            const width = img.width * scale;
+                            const height = img.height * scale;
+                            if (isEdit) {
+                                const payload = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.map((item) => (Object.assign({}, defaultFormatValue(item.width, item.height, img.src, String(item.id), item.x, item.y))));
+                                dispatch({
+                                    type: "board/updateComponentsBulk",
+                                    payload,
+                                });
+                                dispatch({
+                                    type: "panel/setSelectedGroup",
+                                    payload,
+                                });
+                                setDefaultSrc(img.src);
+                                dispatch({ type: "board/setFlagChange", payload: true });
+                                dispatch({ type: "board/setUpdateBy", payload: "global" });
+                            }
+                            else {
+                                dispatch({
+                                    type: type === "component"
+                                        ? "board/addComponent"
+                                        : "board/setExtraComponent",
+                                    payload: Object.assign({}, defaultFormatValue(width, height, img.src)),
+                                });
+                            }
+                            setDefaultSrc(img.src);
+                            dispatch({ type: "board/setFlagChange", payload: true });
+                            dispatch({ type: "board/setUpdateBy", payload: "global" });
+                            // message.success(`${info.file.name} uploaded successfully.`);
+                        };
+                        // Set img src AFTER onload
+                        img.src = URL.createObjectURL(file);
+                    }
+                }
+                catch (e) {
+                    // message.error("Upload failed, please try again.");
+                }
+            }
+        }),
+    };
+    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>
+          <Flex vertical gap={5}>
+            <Button type="default" onClick={handleDelete} className="w-full mt-4" loading={loading}>
+              Edit
+            </Button>
+            {/* <Button
+              type="primary"
+              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 />
+            </div>) : (<>
+              <p className="ant-upload-drag-icon">
+                <InboxOutlined />
+              </p>
+              <p className="ant-upload-text">
+                Click or drag file to this area to upload
+              </p>
+              <p className="ant-upload-hint">
+                Support for a single or bulk upload. Strictly prohibited from
+                uploading company data or other banned files.
+              </p>
+            </>)}
+        </Dragger>)}
+    </Form.Item>);
+};
+export default UploadTool;

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

@@ -6,5 +6,5 @@ interface UploadToolProps {
     defaultValue?: PropertiesProps;
     transform?: any;
 }
-declare const UploadTool: ({ name, type, action, defaultValue, transform, }: UploadToolProps) => import("react/jsx-runtime").JSX.Element;
-export default UploadTool;
+declare const UploadToolForm: (props: UploadToolProps) => import("react/jsx-runtime").JSX.Element;
+export default UploadToolForm;

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

@@ -10,10 +10,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { Upload, Image, Button, Form, Flex } from "antd";
+import { Upload, Image as ImageAntd, Button, Form, Flex, Select, InputNumber, ColorPicker, } from "antd";
 import { InboxOutlined, LoadingOutlined } from "@ant-design/icons";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
-import SectionShape from "../../components/form-tools/shape";
+import { MIN_HEIGHT, MIN_WIDTH, MIN_X, MIN_Y } from "../board-v3/constant";
+import { optionsShape } from "@/components/form-tools/shape";
 const { Dragger } = Upload;
 const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
     // const src = Form.useWatch("src");
@@ -160,6 +161,46 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
         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) && (_jsx(_Fragment, { children: _jsx(SectionShape, { allowChangeShape: type === "component" }) }))] }));
+    return (_jsx(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(ImageAntd, { src: defaultSrc }) }), _jsxs(Flex, { vertical: true, gap: 5, children: [_jsx(Button, { type: "default", onClick: handleDelete, className: "w-full mt-4", loading: loading, children: "Edit" }), _jsx(Button, { type: "primary", 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." })] })) }))) }));
 };
-export default UploadTool;
+const { Option } = Select;
+const UploadToolForm = (props) => {
+    const shape = Form.useWatch("shape");
+    const seatKey = useAppSelector((state) => state.panel.seatDefaultKey);
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    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) => {
+                            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"
+                                                ? `Type 5 (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) => {
+                                var _a;
+                                const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
+                                return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
+                            } }) }), _jsx(Form.Item, { label: "Height", name: "height", className: "w-full", children: _jsx(InputNumber, { suffix: "px", controls: true, step: 1, name: "height", min: MIN_HEIGHT, parser: (value) => {
+                                var _a;
+                                const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
+                                return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
+                            } }) }), !(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && (_jsx(Form.Item, { label: "Radius", name: "radius", className: "w-full", children: _jsx(InputNumber, { suffix: "px", name: "radius", parser: (value) => {
+                                var _a;
+                                const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
+                                return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
+                            } }) }))] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Position X", name: "x", className: "w-full", children: _jsx(InputNumber, { name: "x", step: 1, min: MIN_X }) }), _jsx(Form.Item, { label: "Position Y", name: "y", className: "w-full", children: _jsx(InputNumber, { name: "y", step: 1, min: MIN_Y }) }), _jsx(Form.Item, { label: "Rotation", name: "rotation", className: "w-full", children: _jsx(InputNumber, { suffix: "\u00B0", min: 0, step: 1, max: 360, name: "rotation", parser: (value) => {
+                                if (!value)
+                                    return 0;
+                                const num = Number(value.replace(/\D/g, ""));
+                                if (Number.isNaN(num))
+                                    return 0;
+                                return Math.min(360, Math.max(0, num));
+                            } }) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Stroke Fill", name: "stroke", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Stroke Size", name: "strokeWidth", className: "w-full", children: _jsx(InputNumber, {}) })] }), _jsx(Flex, { children: _jsx(Form.Item, { label: "opacity", name: "opacity", className: "w-full", children: _jsx(InputNumber, { step: 10, max: 100, min: 0, name: "opacity", parser: (value) => {
+                            if (value === undefined || value === null || value === "")
+                                return null;
+                            const cleaned = value.replace(/[^0-9.]/g, "");
+                            const num = Number(cleaned);
+                            if (Number.isNaN(num))
+                                return null;
+                            return Math.min(100, Math.max(0, num));
+                        }, suffix: "%" }) }) })] }));
+};
+export default UploadToolForm;