seat-editor 1.2.21 → 1.2.23

package/dist/features/package/index.jsx

@@ -1,46 +0,0 @@
-"use client";
-import { useEffect } from "react";
-import Board from "../board";
-import SideTool from "../side-tool";
-import ControlPanels from "../panel";
-import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
-const TableEditor = (props) => {
-    const { componentProps, extraComponentProps, onCurrentStateChange } = props;
-    const { components, extraComponents } = useAppSelector((state) => state.board);
-    const dispatch = useAppDispatch();
-    useEffect(() => {
-        onCurrentStateChange &&
-            onCurrentStateChange({
-                components,
-                extraComponents,
-            });
-    }, [components, extraComponents]);
-    useEffect(() => {
-        if ((componentProps === null || componentProps === void 0 ? void 0 : componentProps.length) > 0) {
-            dispatch({
-                type: "board/setNewComponents",
-                payload: componentProps,
-            });
-        }
-        if ((extraComponentProps === null || extraComponentProps === void 0 ? void 0 : extraComponentProps.length) > 0) {
-            dispatch({
-                type: "board/setNewExtraComponent",
-                payload: extraComponentProps,
-            });
-        }
-        if (props === null || props === void 0 ? void 0 : props.defaultBackground) {
-            dispatch({
-                type: "board/setBackgroundColor",
-                payload: props === null || props === void 0 ? void 0 : props.defaultBackground,
-            });
-        }
-    }, [componentProps, extraComponentProps, props === null || props === void 0 ? void 0 : props.defaultBackground]);
-    return (<>
-      <div className="w-full h-screen flex relative">
-        <SideTool />
-        <Board onSelectComponent={props.onSelectComponent}/>
-        <ControlPanels action={props.action} responseMapping={props.responseMapping}/>
-      </div>
-    </>);
-};
-export default TableEditor;

package/dist/features/panel/index.jsx

@@ -1,86 +0,0 @@
-"use client";
-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 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 handleChangeComponent = (values, allValues) => {
-        dispatch({
-            type: "board/updateComponent",
-            payload: Object.assign(Object.assign({}, (selectedComponent || {})), allValues),
-        });
-        dispatch({
-            type: "panel/updateSelectedComponent",
-            payload: Object.assign(Object.assign({}, (selectedComponent || {})), allValues),
-        });
-    };
-    const renderFormPanel = () => {
-        switch (tool.active) {
-            case "select":
-                return <SelectToolForm />;
-            case "square":
-            case "circle":
-                return <SquareToolForm />;
-            case "table-seat-circle":
-                return <SeatCircle />;
-            case "image-table":
-                return (<UploadTool name={tool.active} type="component" action={action} responseMapping={responseMapping}/>);
-            case "background":
-                return (<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 (<Drawer open={show} onClose={handleClose} title="Panel">
-      <div className="bg-white h-full max-h-screen overflow-y-auto w-[300px]">
-        <Form layout="vertical" form={form} name="table" onFinish={(values) => { }} onValuesChange={handleChangeComponent} initialValues={{ labels: [{}] }}>
-          <Form.Item name="id" hidden>
-            <Input />
-          </Form.Item>
-          {renderFormPanel()}
-        </Form>
-      </div>
-    </Drawer>);
-};
-export default ControlPanels;

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

@@ -1,45 +0,0 @@
-"use client";
-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 SummaryComponents = () => {
-        const countByShape = components === null || components === void 0 ? void 0 : components.reduce((acc, item) => {
-            acc[item.shape] = (acc[item.shape] || 0) + 1;
-            return acc;
-        }, {});
-        return (<div className="flex flex-col">
-        <h1 className="heading-s">{title}</h1>
-        <div className="flex flex-col gap-2 mt-5">
-          {Object.entries(countByShape).map(([shape, count]) => (<div key={shape}>
-              <span className="font-bold">{shape}:</span> {count}
-            </div>))}
-        </div>
-      </div>);
-    };
-    const renderComponent = () => {
-        switch (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) {
-            case "square":
-            case "circle":
-                return <SquareToolForm />;
-            case "table-seat-circle":
-                return <SeatCircle />;
-            case "image-table":
-            case "background":
-                return <UploadTool name={selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.name}/>;
-            case "text":
-                return <TextTool />;
-            default:
-                return null;
-        }
-    };
-    return (<div className="flex flex-col gap-2">
-      <SummaryComponents />
-      {renderComponent()}
-    </div>);
-};
-export default SelectToolForm;

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

@@ -1,10 +0,0 @@
-"use client";
-import SectionLabel from "../../components/form-tools/label";
-import SectionShape from "../../components/form-tools/shape";
-const SquareToolForm = () => {
-    return (<>
-      <SectionShape />
-      <SectionLabel />
-    </>);
-};
-export default SquareToolForm;

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

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

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

@@ -1,22 +0,0 @@
-"use client";
-import { ColorPicker, Form, Input, InputNumber } from "antd";
-const TextTool = () => {
-    return (<div className="py-2">
-      <Form.Item name="text" label="Text">
-        <Input />
-      </Form.Item>
-      <Form.Item name={"fontColor"} label="Color" getValueFromEvent={(color) => color.toHexString()}>
-        <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-      </Form.Item>
-      <Form.Item name={"x"} label="X">
-        <InputNumber />
-      </Form.Item>
-      <Form.Item name={"y"} label="Y">
-        <InputNumber />
-      </Form.Item>
-      <Form.Item name={"fontSize"} label="Size">
-        <InputNumber suffix="px"/>
-      </Form.Item>
-    </div>);
-};
-export default TextTool;

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

@@ -1,133 +0,0 @@
-"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 { Upload, message } 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, }) => {
-    var _a, _b;
-    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 props = {
-        name: "file",
-        multiple: false,
-        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;
-                                dispatch({
-                                    type: type === "component"
-                                        ? "board/addComponent"
-                                        : "board/setExtraComponent",
-                                    payload: {
-                                        id: new Date().getTime(),
-                                        x: 0,
-                                        y: 0,
-                                        width,
-                                        height,
-                                        rotation: 0,
-                                        shape: name,
-                                        src: srcFromResponse,
-                                    },
-                                });
-                                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;
-                            dispatch({
-                                type: type === "component"
-                                    ? "board/addComponent"
-                                    : "board/setExtraComponent",
-                                payload: {
-                                    id: new Date().getTime(),
-                                    x: 0,
-                                    y: 0,
-                                    width,
-                                    height,
-                                    rotation: 0,
-                                    shape: name,
-                                    src: img.src,
-                                },
-                            });
-                            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.");
-                }
-            }
-        }),
-    };
-    return (<>
-      <Dragger {...props}>
-        <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>
-      <SectionShape />
-      <SectionLabel />
-    </>);
-};
-export default UploadTool;

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

@@ -1,211 +0,0 @@
-"use client";
-import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, } from "lucide-react";
-import ButtonTools from "../../components/button-tools";
-import { Divider, ColorPicker, Button, } from "antd";
-import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
-import { useState } from "react";
-const SideTool = () => {
-    const [color, setColor] = useState("#000000");
-    const dispatch = useAppDispatch();
-    const { active } = useAppSelector((state) => state.tool);
-    const { selectedComponent } = useAppSelector((state) => state.panel);
-    const { components } = useAppSelector((state) => state.board);
-    const [preview, setPreview] = useState(false);
-    const tools = [
-        {
-            id: "select",
-            name: "Select Tool",
-            icon: <MousePointer />,
-        },
-    ];
-    const actionsTools = [
-        // {
-        //   id: "table-split",
-        //   name: "Table Split",
-        //   icon: <TableCellsSplit />,
-        // },
-        {
-            id: "square",
-            name: "Square",
-            icon: <SquareMousePointer />,
-        },
-        {
-            id: "circle",
-            name: "Circle",
-            icon: <Circle />,
-        },
-        {
-            id: "table-seat-circle",
-            name: "Table Seat Circle",
-            icon: <Ratio />,
-        },
-        {
-            id: "image-table",
-            name: "Image Table",
-            icon: <Upload />,
-        },
-        // {
-        //   id: "table-seat-square",
-        //   name: "Table Seat Square",
-        //   icon: <Dock />,
-        // },
-        // {
-        //   id: "diamond",
-        //   name: "Diamond",
-        //   icon: <Diamond />,
-        // },
-    ];
-    const controlTools = [
-        {
-            id: "background",
-            name: "Background",
-            icon: <Image />,
-        },
-        {
-            id: "text",
-            name: "Text",
-            icon: <Type />,
-        },
-        // {
-        //   id: "background-color",
-        //   name: "Background Color",
-        //   icon: <PaintBucket/>
-        // }
-    ];
-    const hanldeSelectTool = (id) => {
-        if (id === "background" || id === "text" || id === "image-table") {
-            dispatch({
-                type: "panel/setShow",
-                payload: true
-            });
-        }
-        dispatch({
-            type: "tool/setActiveTool",
-            payload: id,
-        });
-    };
-    const handleChangeColorBackground = (color) => {
-        setColor(color.toHexString());
-        dispatch({
-            type: "board/setBackgroundColor",
-            payload: color.toHexString(),
-        });
-    };
-    const handleOpenModalPreview = () => {
-        dispatch({
-            type: "tool/setTooglePreview",
-            payload: true,
-        });
-    };
-    const handleRemoveComponent = () => {
-        dispatch({
-            type: "board/removeComponent",
-            payload: selectedComponent,
-        });
-    };
-    const handleDuplicateComponent = () => {
-        const newComponent = Object.assign(Object.assign({}, selectedComponent), { x: selectedComponent.x + 20, y: selectedComponent.y + 20, id: Date.now() });
-        dispatch({
-            type: "board/addComponent",
-            payload: newComponent
-        });
-        dispatch({
-            type: "panel/setSelectedComponent",
-            payload: newComponent
-        });
-    };
-    function swapOneStepById(arr, id, direction) {
-        const index = arr.findIndex(item => (item === null || item === void 0 ? void 0 : item.id) === id);
-        if (index === -1)
-            return arr; // id tidak ditemukan
-        const newArr = [...arr];
-        if (direction === 'left' && index > 0) {
-            [newArr[index - 1], newArr[index]] = [newArr[index], newArr[index - 1]];
-        }
-        if (direction === 'right' && index < arr.length - 1) {
-            [newArr[index + 1], newArr[index]] = [newArr[index], newArr[index + 1]];
-        }
-        return newArr;
-    }
-    const handleOverride = () => {
-        const newArr = swapOneStepById(components, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id, 'right');
-        dispatch({
-            type: "board/setNewComponents",
-            payload: newArr
-        });
-    };
-    return (<div className="h-screen left-0 flex flex-col items-center border-r-2 border-gray-300 bg-white px-2 pt-4">
-      {tools === null || tools === void 0 ? void 0 : tools.map((tool) => (<ButtonTools key={tool.id} buttonProps={{
-                icon: tool.icon,
-                type: "text",
-                name: tool.name,
-                onClick: () => hanldeSelectTool(tool.id),
-                style: active === tool.id ? { color: "red" } : {},
-            }} popoverProps={{
-                content: <div>{tool.name}</div>,
-                trigger: "hover",
-                placement: "right",
-            }} items={[]}/>))}
-      <ButtonTools buttonProps={{
-            icon: <CopyPlus />,
-            type: "text",
-            name: "duplicate",
-            onClick: () => handleDuplicateComponent(),
-        }} items={[]} popoverProps={{
-            content: <div>Duplicate</div>,
-            trigger: "hover",
-            placement: "right",
-        }}/>
-      <ButtonTools buttonProps={{
-            onClick: () => handleRemoveComponent(),
-            icon: <Trash />,
-            type: "text",
-            name: "trash",
-        }} items={[]} popoverProps={{
-            content: <div>Trash</div>,
-            trigger: "hover",
-            placement: "right",
-        }}/>
-      <ButtonTools buttonProps={{
-            onClick: () => handleOverride(),
-            icon: <Layers2 />,
-            type: "text",
-            name: "override",
-        }} items={[]} popoverProps={{
-            content: <div>Override</div>,
-            trigger: "hover",
-            placement: "right",
-        }}/>
-
-      <Divider />
-      {actionsTools === null || actionsTools === void 0 ? void 0 : actionsTools.map((tool) => (<ButtonTools key={tool.id} buttonProps={{
-                icon: tool.icon,
-                type: "text",
-                name: tool.name,
-                onClick: () => hanldeSelectTool(tool.id),
-                style: active === tool.id ? { color: "red" } : {},
-            }} popoverProps={{
-                content: <div>{tool.name}</div>,
-                trigger: "hover",
-                placement: "right",
-            }} items={[]}/>))}
-
-      <Divider />
-      {controlTools === null || controlTools === void 0 ? void 0 : controlTools.map((tool) => (<ButtonTools key={tool.id} buttonProps={{
-                icon: tool.icon,
-                type: "text",
-                name: tool.name,
-                onClick: () => hanldeSelectTool(tool.id),
-                style: active === tool.id ? { color: "red" } : {},
-            }} popoverProps={{
-                content: <div>{tool.name}</div>,
-                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>
-      <Button icon={preview ? <EyeOff /> : <Eye />} type="text" name="Preview" onClick={handleOpenModalPreview} style={active === "preview" ? { color: "red" } : {}}/>
-    </div>);
-};
-export default SideTool;