seat-editor 3.3.13 → 3.3.15

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

@@ -0,0 +1,57 @@
+"use client";
+import { ColorPicker, Flex, Form, Input, InputNumber } from "antd";
+const TextTool = () => {
+    return (<div className="py-2">
+      <Form.Item label="Name" name="shape" className="w-full hidden">
+        <Input defaultValue={"text"}/>
+      </Form.Item>
+
+      <Form.Item name="text" label="Text">
+        <Input />
+      </Form.Item>
+      <Flex className="w-full" gap={2}>
+        <Form.Item name={"fontColor"} label="Color" getValueFromEvent={(color) => color.toHexString()}>
+          <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+        </Form.Item>
+        <Form.Item name={"fontSize"} label="Size">
+          <InputNumber suffix="px"/>
+        </Form.Item>
+      </Flex>
+      <Flex gap={2} className="w-full">
+        <Form.Item label="Width" name="width" className="w-full">
+          <InputNumber suffix="px" controls parser={(value) => {
+            var _a;
+            const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
+            return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
+        }}/>
+        </Form.Item>
+        <Form.Item label="Height" name="height" className="w-full">
+          <InputNumber suffix="px" parser={(value) => {
+            var _a;
+            const onlyNumber = (_a = value === null || value === void 0 ? void 0 : value.replace(/\D/g, "")) !== null && _a !== void 0 ? _a : "";
+            return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
+        }}/>
+        </Form.Item>
+      </Flex>
+      <Flex gap={2}>
+        <Form.Item label="Position X" name="x" className="w-full">
+          <InputNumber />
+        </Form.Item>
+        <Form.Item label="Position Y" name="y" className="w-full">
+          <InputNumber />
+        </Form.Item>
+        <Form.Item label="Rotation" name="rotation" className="w-full">
+          <InputNumber suffix="°" min={0} max={360} 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));
+        }}/>
+        </Form.Item>
+      </Flex>
+     
+    </div>);
+};
+export default TextTool;

package/dist/features/panel/upload-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, defaultValue, transform }: UploadToolProps) => import("react").JSX.Element;
+export default UploadTool;

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

@@ -0,0 +1,176 @@
+"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 } from "antd";
+import { InboxOutlined, LoadingOutlined } from "@ant-design/icons";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
+import SectionLabel from "../../components/form-tools/label";
+import SectionShape from "../../components/form-tools/shape";
+const { Dragger } = Upload;
+const UploadTool = ({ name, type, action, defaultValue, 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 selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    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(false);
+    const [loading, setLoading] = useState(false);
+    useEffect(() => {
+        if (defaultValue) {
+            setDefaultSrc(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.src);
+            setIsEdit(true);
+            setLoading(false);
+        }
+    }, [defaultValue]);
+    useEffect(() => {
+        if (selectedComponent && selectedComponent.shape === name) {
+            setDefaultSrc(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.src);
+            setIsEdit(true);
+            setLoading(false);
+        }
+    }, [selectedComponent]);
+    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 || new Date().getTime(),
+        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,
+    });
+    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);
+                        if (isEdit) {
+                            dispatch({
+                                type: "board/updateComponent",
+                                payload: Object.assign({}, defaultFormatValue(selectedComponent.width, selectedComponent.height, src, Number(selectedComponent.id), selectedComponent.x, selectedComponent.y)),
+                            });
+                            dispatch({
+                                type: "panel/setSelectedComponent",
+                                payload: Object.assign({}, defaultFormatValue(selectedComponent.width, selectedComponent.height, src, Number(selectedComponent.id), selectedComponent.x, selectedComponent.y)),
+                            });
+                            setDefaultSrc(src);
+                            dispatch({ type: "board/setFlagChange", payload: true });
+                            dispatch({ type: "board/setUpdateBy", payload: "global" });
+                        }
+                        else {
+                            const defaultValue = Object.assign({}, defaultFormatValue(0, 0, src));
+                            dispatch({
+                                type: type === "component"
+                                    ? "board/addComponent"
+                                    : "board/setExtraComponent",
+                                payload: defaultValue,
+                            });
+                            dispatch({
+                                type: "panel/setSelectedComponent",
+                                payload: defaultValue,
+                            });
+                        }
+                    }
+                    // ⬇️ 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: "board/updateComponent",
+                                    payload: Object.assign({}, defaultFormatValue(selectedComponent.width, selectedComponent.height, img.src, Number(selectedComponent.id), selectedComponent.x, selectedComponent.y)),
+                                });
+                                dispatch({
+                                    type: "panel/setSelectedComponent",
+                                    payload: Object.assign({}, defaultFormatValue(selectedComponent.width, selectedComponent.height, img.src, Number(selectedComponent.id), selectedComponent.x, selectedComponent.y)),
+                                });
+                                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);
+    };
+    return (<Form.Item label="" name="src" className="w-full">
+      {defaultSrc ? (<>
+          <div className="w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto">
+            <Image src={defaultSrc}/>
+          </div>
+          <Button type="primary" onClick={handleDelete}>
+            Edit
+          </Button>
+        </>) : (<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>)}
+
+      <SectionShape allowChangeShape={type === "component"}/>
+      <SectionLabel />
+    </Form.Item>);
+};
+export default UploadTool;

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

@@ -0,0 +1,5 @@
+import { SeatShape } from "../../utils/constant";
+export declare const isSeatShape: (shape: string) => shape is SeatShape;
+export declare const getSeatCount: (shape: string, props: any) => any;
+export declare const getSeatPosition: (shape: string, props: any) => any;
+export declare const adjustHeightWidthForSeatShape: (shape: string, props: any) => any;

package/dist/features/panel/utils.js

@@ -0,0 +1,47 @@
+import { SEAT_SHAPES } from "../../utils/constant";
+import { MIN_HEIGHT, MIN_WIDTH } from "../board-v3/constant";
+export const isSeatShape = (shape) => SEAT_SHAPES.includes(shape);
+export const getSeatCount = (shape, props) => {
+    // if (shape === "table-seat-circle") {
+    //   if (props?.seatCount) {
+    //     return props.seatCount;
+    //   } else if (props?.seatPositions) {
+    //     const { top = 0, bottom = 0, left = 0, right = 0 } = props.seatPositions;
+    //     return top + bottom + left + right;
+    //   }
+    // }
+    return (props === null || props === void 0 ? void 0 : props.seatCount) || 0;
+};
+export const getSeatPosition = (shape, props) => {
+    // if (shape === "table-seat-square" || shape === "table-seat-rect-square") {
+    //   if (props?.seatPositions) {
+    //     return props.seatPositions;
+    //   } else if (props?.seatCount) {
+    //     const totalSeat = props.seatCount;
+    //     const seatPerSide = Math.floor(totalSeat / 4);
+    //     return {
+    //       top: seatPerSide,
+    //       bottom: seatPerSide,
+    //       left: seatPerSide,
+    //       right: seatPerSide,
+    //     };
+    //   }
+    // }
+    if (shape === "table-seat-rect-circle") {
+        return {
+            top: 1,
+            bottom: 1,
+            left: 1,
+            right: 1,
+        };
+    }
+    return (props === null || props === void 0 ? void 0 : props.seatPositions) || { top: 0, bottom: 0, left: 0, right: 0 };
+};
+export const adjustHeightWidthForSeatShape = (shape, props) => {
+    if (shape === null || shape === void 0 ? void 0 : shape.includes("circle")) {
+        const sizeDefault = Math.min(props.width, props.height);
+        const sizeFinal = sizeDefault < MIN_WIDTH ? MIN_WIDTH : sizeDefault;
+        return Object.assign(Object.assign({}, props), { height: isNaN(sizeFinal) ? MIN_WIDTH : sizeFinal, width: isNaN(sizeFinal) ? MIN_HEIGHT : sizeFinal });
+    }
+    return props;
+};

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

@@ -0,0 +1,8 @@
+declare const SideTool: ({ dragOnly, deleteAutorized, }: {
+    dragOnly?: boolean;
+    deleteAutorized?: {
+        component: boolean;
+        extraComponent: boolean;
+    };
+}) => import("react").JSX.Element;
+export default SideTool;