seat-editor 1.4.19 → 1.4.21

package/dist/features/package/index.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import Board from "../board";
+import SideTool from "../side-tool";
+import ControlPanels from "../panel";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
+import { isEqual } from "lodash";
+const TableEditor = (props) => {
+    const [initialValue, setInitialValue] = useState(null);
+    const { componentProps, extraComponentProps, onCurrentStateChange, dragOnly, mappingKey, } = props;
+    const { components, extraComponents } = useAppSelector((state) => state.board);
+    const dispatch = useAppDispatch();
+    const onUpdateCurrentState = () => {
+        let matchInitialValueWithComponents = initialValue === null || initialValue === void 0 ? void 0 : initialValue.map((item) => {
+            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
+                let findComponent = components === null || components === void 0 ? void 0 : components.find((c) => { var _a; return c.id === ((_a = item === null || item === void 0 ? void 0 : item[mappingKey]) === null || _a === void 0 ? void 0 : _a.id); });
+                if (findComponent) {
+                    return Object.assign(Object.assign({}, item), { [mappingKey]: Object.assign({}, findComponent) });
+                }
+            }
+            else {
+                let findComponent = components === null || components === void 0 ? void 0 : components.find((c) => c.id === (item === null || item === void 0 ? void 0 : item.id));
+                if (findComponent) {
+                    return Object.assign(Object.assign({}, item), findComponent);
+                }
+            }
+        });
+        onCurrentStateChange({
+            components: matchInitialValueWithComponents !== null && matchInitialValueWithComponents !== void 0 ? matchInitialValueWithComponents : [],
+            extraComponents,
+        });
+    };
+    useEffect(() => {
+        onCurrentStateChange && onUpdateCurrentState();
+    }, [components, initialValue, extraComponents]);
+    // if (!isEqual(componentsProps, componentsState)) {
+    //         isSyncingFromRedux.current = true;
+    //         setComponentsState(componentsProps);
+    //       }
+    //       if (!isEqual(extraComponentsProps, extraComponentsState)) {
+    //         isSyncingFromRedux.current = true;
+    //         setExtraComponentsState(extraComponentsProps);
+    //       }
+    //       if (!isEqual(selectedComponentProps, selectedComponent)) {
+    //         isSyncingFromRedux.current = true;
+    //         setSelectedComponent(selectedComponentProps);
+    //       }
+    // useEffect(() => {
+    //   if (componentProps && componentProps.length > 0) {
+    //     let hasMappingKeyEveryComponent = componentProps.every(
+    //       (item) => mappingKey && item[mappingKey]
+    //     );
+    //     if(componentProps
+    //     setInitialValue(componentProps);
+    //   }
+    // }
+    // , [componentProps]);
+    const convertComponentProps = () => {
+        let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
+            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
+                return Object.assign({}, item[mappingKey]);
+            }
+            return item;
+        });
+        return mappingData;
+    };
+    useEffect(() => {
+        if (!isEqual(components, convertComponentProps())) {
+            let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
+                if (mappingKey && (item === null || item === void 0 ? void 0 : item[props.mappingKey])) {
+                    return Object.assign({}, item[props.mappingKey]);
+                }
+                return item;
+            });
+            if (mappingKey) {
+                setInitialValue(componentProps);
+            }
+            dispatch({
+                type: "board/setNewComponents",
+                payload: mappingData,
+            });
+            dispatch({ type: "board/setFlagChange", payload: true });
+        }
+        if (!isEqual(extraComponents, extraComponentProps)) {
+            dispatch({
+                type: "board/setNewExtraComponents",
+                payload: extraComponentProps,
+            });
+            dispatch({ type: "board/setFlagChange", payload: true });
+        }
+        if (props === null || props === void 0 ? void 0 : props.defaultBackground) {
+            dispatch({
+                type: "board/setBackgroundColor",
+                payload: props === null || props === void 0 ? void 0 : props.defaultBackground,
+            });
+            dispatch({ type: "board/setFlagChange", payload: true });
+        }
+    }, [componentProps, extraComponentProps, props === null || props === void 0 ? void 0 : props.defaultBackground]);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx(SideTool, { dragOnly: dragOnly }), _jsx(Board, { onSelectComponent: props.onSelectComponent }), _jsx(ControlPanels, { action: props.action, responseMapping: props.responseMapping })] }) }));
+};
+export default TableEditor;

package/dist/features/package/index.jsx

@@ -8,13 +8,12 @@ import { isEqual } from "lodash";
 const TableEditor = (props) => {
     const [initialValue, setInitialValue] = useState(null);
     const { componentProps, extraComponentProps, onCurrentStateChange, dragOnly, mappingKey, } = props;
-    console.log("componentProps", initialValue, componentProps);
     const { components, extraComponents } = useAppSelector((state) => state.board);
     const dispatch = useAppDispatch();
     const onUpdateCurrentState = () => {
         let matchInitialValueWithComponents = initialValue === null || initialValue === void 0 ? void 0 : initialValue.map((item) => {
-            if (mappingKey && item[mappingKey]) {
-                let findComponent = components === null || components === void 0 ? void 0 : components.find((c) => { var _a; return c.id === ((_a = item[mappingKey]) === null || _a === void 0 ? void 0 : _a.id); });
+            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
+                let findComponent = components === null || components === void 0 ? void 0 : components.find((c) => { var _a; return c.id === ((_a = item === null || item === void 0 ? void 0 : item[mappingKey]) === null || _a === void 0 ? void 0 : _a.id); });
                 if (findComponent) {
                     return Object.assign(Object.assign({}, item), { [mappingKey]: Object.assign({}, findComponent) });
                 }
@@ -26,7 +25,6 @@ const TableEditor = (props) => {
                 }
             }
         });
-        console.log("matchInitialValueWithComponents", matchInitialValueWithComponents, initialValue, components);
         onCurrentStateChange({
             components: matchInitialValueWithComponents !== null && matchInitialValueWithComponents !== void 0 ? matchInitialValueWithComponents : [],
             extraComponents,
@@ -58,19 +56,18 @@ const TableEditor = (props) => {
     // }
     // , [componentProps]);
     const convertComponentProps = () => {
-        let mappingData = componentProps.map((item) => {
-            if (mappingKey && item[mappingKey]) {
+        let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
+            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
                 return Object.assign({}, item[mappingKey]);
             }
             return item;
         });
-        console.log("convertComponentProps", mappingData);
         return mappingData;
     };
     useEffect(() => {
         if (!isEqual(components, convertComponentProps())) {
-            let mappingData = componentProps.map((item) => {
-                if (mappingKey && item[props.mappingKey]) {
+            let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
+                if (mappingKey && (item === null || item === void 0 ? void 0 : item[props.mappingKey])) {
                     return Object.assign({}, item[props.mappingKey]);
                 }
                 return item;

package/dist/features/panel/index.d.ts

@@ -7,5 +7,5 @@ interface ControlPanelsProps {
         src: string;
     };
 }
-declare const ControlPanels: (props: ControlPanelsProps) => import("react").JSX.Element;
+declare const ControlPanels: (props: ControlPanelsProps) => import("react/jsx-runtime").JSX.Element;
 export default ControlPanels;

package/dist/features/panel/index.js

@@ -0,0 +1,97 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
+import { Form, Drawer, Input } from "antd";
+import SelectToolForm from "./select-tool";
+import SquareToolForm from "./square-circle-tool";
+import SeatCircle from "./table-seat-circle";
+import UploadTool from "./upload-tool";
+const ControlPanels = (props) => {
+    const { action, responseMapping } = props;
+    const dispatch = useAppDispatch();
+    const theme = useAppSelector((state) => state.theme);
+    const tool = useAppSelector((state) => state.tool);
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const { show } = useAppSelector((state) => state.panel);
+    const [open, setOpen] = useState(false);
+    const [form] = Form.useForm();
+    let values = Form.useWatch([], form);
+    useEffect(() => {
+        if (selectedComponent) {
+            const isDifferentId = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) !== (values === null || values === void 0 ? void 0 : values.id) || !(values === null || values === void 0 ? void 0 : values.id);
+            const isSameIdAndSameDimensions = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === (values === null || values === void 0 ? void 0 : values.id) &&
+                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height) === (values === null || values === void 0 ? void 0 : values.height) &&
+                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.width) === (values === null || values === void 0 ? void 0 : values.width) &&
+                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.x) === (values === null || values === void 0 ? void 0 : values.x) &&
+                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.y) === (values === null || values === void 0 ? void 0 : values.y);
+            if (show && (isDifferentId || isSameIdAndSameDimensions)) {
+                setOpen(true);
+            }
+            form.setFieldsValue(selectedComponent);
+        }
+        else {
+            setOpen(false);
+        }
+    }, [selectedComponent]);
+    useEffect(() => {
+        if (tool.active === "background" || tool.active === "image-table") {
+            setOpen(true);
+        }
+    }, [tool]);
+    const createShape = (shape, ...props) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        return (Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props[0]), { shape, fill: (_b = (_a = props === null || props === void 0 ? void 0 : props[0]) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : theme === null || theme === void 0 ? void 0 : theme.primaryColor, seatCount: shape === "table-seat-circle" ? (_d = (_c = props === null || props === void 0 ? void 0 : props[0]) === null || _c === void 0 ? void 0 : _c.seatCount) !== null && _d !== void 0 ? _d : 6 : 0, openSpace: shape === "table-seat-circle" ? (_f = (_e = props === null || props === void 0 ? void 0 : props[0]) === null || _e === void 0 ? void 0 : _e.openSpace) !== null && _f !== void 0 ? _f : 0 : undefined, seatFill: shape === "table-seat-circle" ? (_h = (_g = props === null || props === void 0 ? void 0 : props[0]) === null || _g === void 0 ? void 0 : _g.seatFill) !== null && _h !== void 0 ? _h : "#DADADA" : undefined, text: shape === "text" ? "Text" : "", fontColor: shape === "text" ? (_k = (_j = props === null || props === void 0 ? void 0 : props[0]) === null || _j === void 0 ? void 0 : _j.fontColor) !== null && _k !== void 0 ? _k : "#DADADA" : undefined }));
+    };
+    const handleChangeComponent = (values, allValues) => {
+        const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
+        const newValues = createShape(shape, restProps);
+        dispatch({
+            type: "board/updateComponent",
+            payload: Object.assign(Object.assign({}, (selectedComponent || {})), newValues),
+        });
+        dispatch({
+            type: "panel/updateSelectedComponent",
+            payload: Object.assign(Object.assign({}, (selectedComponent || {})), newValues),
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+    };
+    const renderFormPanel = () => {
+        switch (tool.active) {
+            case "select":
+                return _jsx(SelectToolForm, {});
+            case "square":
+            case "circle":
+                return _jsx(SquareToolForm, {});
+            case "table-seat-circle":
+                return _jsx(SeatCircle, {});
+            case "image-table":
+                return (_jsx(UploadTool, { name: tool.active, type: "component", action: action, responseMapping: responseMapping }));
+            case "background":
+                return (_jsx(UploadTool, { name: tool.active, type: "background", action: action, responseMapping: responseMapping }));
+            default:
+                return null;
+        }
+    };
+    const handleClose = () => {
+        setOpen(false);
+        dispatch({
+            type: "panel/setShow",
+            payload: false,
+        });
+    };
+    // if(!show) return null
+    return (_jsx(Drawer, { open: show, onClose: handleClose, title: "Panel", children: _jsx("div", { className: "bg-white h-full max-h-screen overflow-y-auto w-full", children: _jsxs(Form, { layout: "vertical", form: form, name: "table", onFinish: (values) => { }, onValuesChange: handleChangeComponent, initialValues: { labels: [{}] }, children: [_jsx(Form.Item, { name: "id", hidden: true, children: _jsx(Input, {}) }), renderFormPanel()] }) }) }));
+};
+export default ControlPanels;

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

@@ -1,4 +1,4 @@
 declare const SelectToolForm: ({ title }: {
     title?: string;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SelectToolForm;

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

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppSelector } from "../../hooks/use-redux";
+import SquareToolForm from "./square-circle-tool";
+import SeatCircle from "./table-seat-circle";
+import UploadTool from "./upload-tool";
+import TextTool from "./text-tool";
+const SelectToolForm = ({ title = "Title" }) => {
+    const components = useAppSelector((state) => state.board.components);
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const extraComponents = useAppSelector((state) => state.board.extraComponents);
+    const SummaryComponents = () => {
+        const countByShape = components === null || components === void 0 ? void 0 : components.reduce((acc, item) => {
+            acc[item.shape] = (acc[item.shape] || 0) + 1;
+            return acc;
+        }, {});
+        const extraCountByShape = extraComponents === null || extraComponents === void 0 ? void 0 : extraComponents.reduce((acc, item) => {
+            acc[item.shape] = (acc[item.shape] || 0) + 1;
+            return acc;
+        }, {});
+        const variableFormatToString = (variable) => {
+            return variable.replace(/-/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
+        };
+        return (_jsxs("div", { className: "flex flex-col", children: [_jsx("h1", { className: "heading-s", children: title }), _jsx("div", { className: "flex flex-col gap-2 mt-5", children: Object.entries(countByShape).map(([shape, count]) => (_jsxs("div", { children: [_jsxs("span", { className: "font-bold", children: [variableFormatToString(shape), ":"] }), " ", count] }, shape))) })] }));
+    };
+    const renderComponent = () => {
+        switch (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) {
+            case "square":
+            case "circle":
+                return _jsx(SquareToolForm, {});
+            case "table-seat-circle":
+                return _jsx(SeatCircle, {});
+            case "image-table":
+            case "background":
+                return _jsx(UploadTool, { name: selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape, defaultValue: selectedComponent, type: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background" ? "background" : "component" });
+            case "text":
+                return _jsx(TextTool, {});
+            default:
+                return null;
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(SummaryComponents, {}), renderComponent()] }));
+};
+export default SelectToolForm;

package/dist/features/panel/square-circle-tool.d.ts

@@ -1,2 +1,2 @@
-declare const SquareToolForm: () => import("react").JSX.Element;
+declare const SquareToolForm: () => import("react/jsx-runtime").JSX.Element;
 export default SquareToolForm;

package/dist/features/panel/square-circle-tool.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import SectionLabel from "../../components/form-tools/label";
+import SectionShape from "../../components/form-tools/shape";
+const SquareToolForm = () => {
+    return (_jsxs(_Fragment, { children: [_jsx(SectionShape, {}), _jsx(SectionLabel, {})] }));
+};
+export default SquareToolForm;

package/dist/features/panel/table-seat-circle.d.ts

@@ -1,2 +1,2 @@
-declare const SeatCircle: () => import("react").JSX.Element;
+declare const SeatCircle: () => import("react/jsx-runtime").JSX.Element;
 export default SeatCircle;

package/dist/features/panel/table-seat-circle.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ColorPicker, Flex, Form, InputNumber } from "antd";
+import SectionLabel from "../../components/form-tools/label";
+import SectionShape from "../../components/form-tools/shape";
+const SeatCircle = () => {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "py-2", children: [_jsx("h1", { className: "heading-s", children: " Round table" }), _jsxs(Flex, { children: [_jsx(Form.Item, { name: "seatCount", label: "Seat Count", className: "w-full", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: "openSpace", label: "Open Space", className: "w-full", children: _jsx(InputNumber, { max: 1, min: 0, step: 0.1 }) })] }), _jsxs(Flex, { gap: 2, children: [_jsx(Form.Item, { label: "Seat Fill", name: "seatFill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { label: "Table Fill", name: "fill", getValueFromEvent: (color) => color.toHexString(), className: "w-full ", children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) })] }), _jsx(SectionShape, {}), _jsx(SectionLabel, {})] }) }));
+};
+export default SeatCircle;

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

@@ -1,2 +1,2 @@
-declare const TextTool: () => import("react").JSX.Element;
+declare const TextTool: () => import("react/jsx-runtime").JSX.Element;
 export default TextTool;

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

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColorPicker, Form, Input, InputNumber } from "antd";
+const TextTool = () => {
+    return (_jsxs("div", { className: "py-2", children: [_jsx(Form.Item, { name: "text", label: "Text", children: _jsx(Input, {}) }), _jsx(Form.Item, { name: "fontColor", label: "Color", getValueFromEvent: (color) => color.toHexString(), children: _jsx(ColorPicker, { allowClear: true, format: "hex", defaultFormat: "hex" }) }), _jsx(Form.Item, { name: "x", label: "X", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: "y", label: "Y", children: _jsx(InputNumber, {}) }), _jsx(Form.Item, { name: "fontSize", label: "Size", children: _jsx(InputNumber, { suffix: "px" }) })] }));
+};
+export default TextTool;

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

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

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

@@ -0,0 +1,155 @@
+"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, message, Image, Button } from "antd";
+import { InboxOutlined } from "@ant-design/icons";
+import { useAppDispatch } from "../../hooks/use-redux";
+import SectionLabel from "../../components/form-tools/label";
+import SectionShape from "../../components/form-tools/shape";
+const { Dragger } = Upload;
+// const actionResponseBased = {
+//   status: 200,
+//   message: "Upload successful",
+//   data: {
+//     id: "12345",
+//     url: "https://example.com/image.png",
+//   },
+// };
+const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
+    var _a, _b;
+    const [defaultSrc, setDefaultSrc] = useState(null);
+    const [isEdit, setIsEdit] = useState(false);
+    useEffect(() => {
+        if (defaultValue) {
+            setDefaultSrc(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.src);
+            setIsEdit(true);
+        }
+    }, [defaultValue]);
+    const dispatch = useAppDispatch();
+    const widthWorkspace = ((_a = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
+    const heightWorkspace = ((_b = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0;
+    const defaultFormatValue = (width, height, src, id) => ({
+        id: id || new Date().getTime(),
+        x: 0,
+        y: 0,
+        width,
+        height,
+        rotation: 0,
+        shape: name,
+        src,
+    });
+    const props = {
+        name: "file",
+        multiple: true,
+        maxCount: 1,
+        showUploadList: false,
+        onChange: (info) => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            const { status } = info.file;
+            if (status !== "uploading" && info.file.originFileObj) {
+                const file = info.file.originFileObj;
+                const img = new window.Image();
+                let srcFromResponse = "";
+                try {
+                    // ⬇️ IF ada custom action (upload ke server)
+                    if (action && responseMapping) {
+                        const res = yield action(file);
+                        const isSuccess = (res === null || res === void 0 ? void 0 : res[responseMapping.status]) === 200;
+                        if (isSuccess) {
+                            srcFromResponse =
+                                (_a = res === null || res === void 0 ? void 0 : res[responseMapping.data]) === null || _a === void 0 ? void 0 : _a[responseMapping.src];
+                            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) {
+                                    dispatch({
+                                        type: type === "component"
+                                            ? "board/updateComponent"
+                                            : "board/updateExtraComponent",
+                                        payload: Object.assign({}, defaultFormatValue(width, height, srcFromResponse, defaultValue.id)),
+                                    });
+                                    dispatch({
+                                        type: "panel/setSelectedComponent",
+                                        payload: Object.assign({}, defaultFormatValue(width, height, srcFromResponse, defaultValue.id)),
+                                    });
+                                    setDefaultSrc(srcFromResponse);
+                                }
+                                else {
+                                    dispatch({
+                                        type: type === "component"
+                                            ? "board/addComponent"
+                                            : "board/setExtraComponent",
+                                        payload: Object.assign({}, defaultFormatValue(width, height, srcFromResponse)),
+                                    });
+                                }
+                                dispatch({ type: "board/setFlagChange", payload: true });
+                                message.success(`${info.file.name} uploaded successfully.`);
+                            };
+                            // Set img src AFTER onload
+                            img.src = srcFromResponse;
+                        }
+                        else {
+                            message.error((res === null || res === void 0 ? void 0 : res[responseMapping.message]) || "Upload failed");
+                        }
+                    }
+                    // ⬇️ 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) {
+                                dispatch({
+                                    type: type === "component"
+                                        ? "board/updateComponent"
+                                        : "board/updateExtraComponent",
+                                    payload: Object.assign({}, defaultFormatValue(width, height, img.src, defaultValue.id)),
+                                });
+                                dispatch({
+                                    type: "panel/setSelectedComponent",
+                                    payload: Object.assign({}, defaultFormatValue(width, height, srcFromResponse, defaultValue.id)),
+                                });
+                                setDefaultSrc(img.src);
+                            }
+                            else {
+                                dispatch({
+                                    type: type === "component"
+                                        ? "board/addComponent"
+                                        : "board/setExtraComponent",
+                                    payload: Object.assign({}, defaultFormatValue(width, height, img.src)),
+                                });
+                            }
+                            dispatch({ type: "board/setFlagChange", payload: true });
+                            message.success(`${info.file.name} uploaded successfully.`);
+                        };
+                        // Set img src AFTER onload
+                        img.src = URL.createObjectURL(file);
+                    }
+                }
+                catch (e) {
+                    console.error("Upload error:", e);
+                    message.error("Upload failed, please try again.");
+                }
+            }
+        }),
+    };
+    const handleDelete = () => {
+        setDefaultSrc(null);
+    };
+    return (_jsxs(_Fragment, { 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, children: "Edit" })] })) : (_jsxs(Dragger, Object.assign({}, props, { 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." })] }))), _jsx(SectionShape, {}), _jsx(SectionLabel, {})] }));
+};
+export default UploadTool;

package/dist/features/side-tool/index.d.ts

@@ -1,4 +1,4 @@
 declare const SideTool: ({ dragOnly }: {
     dragOnly?: boolean;
-}) => import("react").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default SideTool;