seat-editor 3.5.13 → 3.5.14

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

@@ -9,10 +9,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 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");
@@ -162,13 +163,13 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
     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}/>
+            <ImageAntd src={defaultSrc}/>
           </div>
           <Flex vertical gap={5}>
-            <Button type="primary" onClick={handleDelete} className="w-full mt-4" loading={loading}>
+            <Button type="default" onClick={handleDelete} className="w-full mt-4" loading={loading}>
               Edit
             </Button>
-            <Button type="default" onClick={deleteImages} className="w-full" loading={loading}>
+            <Button type="primary" onClick={deleteImages} className="w-full" loading={loading}>
               Delete
             </Button>
           </Flex>
@@ -188,10 +189,107 @@ const UploadTool = ({ name, type, action, defaultValue, transform, }) => {
               </p>
             </>)}
         </Dragger>)}
-      {(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) && (<>
-          <SectionShape allowChangeShape={type === "component"}/>
-          {/* <SectionLabel /> */}
-        </>)}
     </Form.Item>);
 };
-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 (<div className="py-2">
+      <h1 className="heading-s">Shape</h1>
+      <Flex gap={2} className="w-full">
+        <Form.Item label="Name" name="shape" className="w-full">
+          <Select className="w-full">
+            {optionsShape === null || optionsShape === void 0 ? void 0 : optionsShape.map((item) => {
+            const disabled = item.value === "table-seat-rect-circle" && maxSeat > 4;
+            return (<Option key={item.value} value={item.value} disabled={disabled} className="flex w-full 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>
+      <UploadTool {...props}/>
+      <Flex gap={2} className="w-full">
+        <Form.Item label="Width" name="width" className="w-full">
+          <InputNumber suffix="px" controls 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));
+        }}/>
+        </Form.Item>
+        <Form.Item label="Height" name="height" className="w-full">
+          <InputNumber suffix="px" controls 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));
+        }}/>
+        </Form.Item>
+        {!(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && (<Form.Item label="Radius" name="radius" className="w-full">
+            <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));
+            }}/>
+          </Form.Item>)}
+      </Flex>
+      <Flex gap={2}>
+        <Form.Item label="Position X" name="x" className="w-full">
+          <InputNumber name="x" step={1} min={MIN_X}/>
+        </Form.Item>
+        <Form.Item label="Position Y" name="y" className="w-full">
+          <InputNumber name="y" step={1} min={MIN_Y}/>
+        </Form.Item>
+        <Form.Item label="Rotation" name="rotation" className="w-full">
+          <InputNumber suffix="°" 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));
+        }}/>
+        </Form.Item>
+      </Flex>
+      <Flex gap={2}>
+        {/* <Form.Item
+          label="Fill"
+          name={"fill"}
+          getValueFromEvent={(color) => color.toHexString()}
+          className="w-full "
+          disabled
+        >
+          <ColorPicker allowClear format="hex" defaultFormat="hex" />
+        </Form.Item> */}
+        <Form.Item label="Stroke Fill" name={"stroke"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
+          <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+        </Form.Item>
+        <Form.Item label="Stroke Size" name={"strokeWidth"} className="w-full">
+          <InputNumber />
+        </Form.Item>
+      </Flex>
+      <Flex>
+        <Form.Item label="opacity" name={"opacity"} className="w-full">
+          <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="%"/>
+        </Form.Item>
+      </Flex>
+    </div>);
+};
+export default UploadToolForm;

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

@@ -347,17 +347,19 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
                         content: _jsx("div", { children: "Fill Tool" }),
                         trigger: "hover",
                         placement: "right",
-                    } }) }), _jsx(Popover, { trigger: "click", placement: "right", open: openPreview, onOpenChange: setOpenPreview, content: _jsxs(Flex, { vertical: true, children: [_jsx(Button, { icon: _jsx(Scan, {}), type: "text", name: "Bounding Box", onClick: () => hanldeSelectTool("bounding-box"), style: active === "bounding-box" ? { color: "red" } : {} }), _jsx(Button, { icon: preview ? _jsx(EyeOff, {}) : _jsx(Eye, {}), type: "text", name: "Preview", onClick: handleOpenModalPreview, style: active === "preview" ? { color: "red" } : {} })] }), children: _jsx(ButtonTools, { buttonProps: {
-                        icon: _jsx(ScanEye, {}),
-                        type: "text",
-                        name: "Preview",
-                        onClick: () => setOpenPreview((prev) => !prev),
-                        style: (active === "bounding-box") || (active === "preview") ? { color: "red" } : {},
-                    }, items: [], popoverProps: {
-                        content: _jsx("div", { children: "Layour View Tool" }),
-                        trigger: "hover",
-                        placement: "right",
-                    } }) }), _jsx(ButtonTools, { buttonProps: {
+                    } }) }), _jsx(Popover, { trigger: "click", placement: "right", open: openPreview, onOpenChange: setOpenPreview, content: _jsxs(Flex, { vertical: true, children: [_jsx(Button, { icon: _jsx(Scan, {}), type: "text", name: "Bounding Box", onClick: () => hanldeSelectTool("bounding-box"), style: active === "bounding-box" ? { color: "red" } : {} }), _jsx(Button, { icon: preview ? _jsx(EyeOff, {}) : _jsx(Eye, {}), type: "text", name: "Preview", onClick: handleOpenModalPreview, style: active === "preview" ? { color: "red" } : {} })] }), children: _jsxs(Flex, { className: "relative", children: [_jsx(ButtonTools, { buttonProps: {
+                                icon: _jsx(ScanEye, {}),
+                                type: "text",
+                                name: "Preview",
+                                onClick: () => setOpenPreview((prev) => !prev),
+                                style: active === "bounding-box" || active === "preview"
+                                    ? { color: "red" }
+                                    : {},
+                            }, items: [], popoverProps: {
+                                content: _jsx("div", { children: "Layour View Tool" }),
+                                trigger: "hover",
+                                placement: "right",
+                            } }), _jsx("span", { className: "absolute right-[-5px] top-[2px]", children: ">" })] }) }), _jsx(ButtonTools, { buttonProps: {
                     icon: _jsx(Grid, {}),
                     onClick: () => toggleGrid(),
                     type: "text",

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

@@ -368,17 +368,22 @@ const SideTool = ({ dragOnly, deleteAutorized, }) => {
             <Button icon={<Scan />} type="text" name="Bounding Box" onClick={() => hanldeSelectTool("bounding-box")} style={active === "bounding-box" ? { color: "red" } : {}}/>
             <Button icon={preview ? <EyeOff /> : <Eye />} type="text" name="Preview" onClick={handleOpenModalPreview} style={active === "preview" ? { color: "red" } : {}}/>
           </Flex>}>
-        <ButtonTools buttonProps={{
+        <Flex className="relative">
+          <ButtonTools buttonProps={{
             icon: <ScanEye />,
             type: "text",
             name: "Preview",
             onClick: () => setOpenPreview((prev) => !prev),
-            style: (active === "bounding-box") || (active === "preview") ? { color: "red" } : {},
+            style: active === "bounding-box" || active === "preview"
+                ? { color: "red" }
+                : {},
         }} items={[]} popoverProps={{
             content: <div>Layour View Tool</div>,
             trigger: "hover",
             placement: "right",
         }}/>
+          <span className="absolute right-[-5px] top-[2px]">{">"}</span>
+        </Flex>
       </Popover>
 
       <ButtonTools buttonProps={{

package/dist/provider/antd-provider.js

@@ -37,6 +37,9 @@ export const AntdProvider = ({ children, themeColor }) => {
                     },
                     Button: {
                         colorPrimary: themeColor
+                    },
+                    Select: {
+                        optionHeight: 40,
                     }
                 },
             }, children: children }) }));

package/dist/provider/antd-provider.jsx

@@ -37,6 +37,9 @@ export const AntdProvider = ({ children, themeColor }) => {
                 },
                 Button: {
                     colorPrimary: themeColor
+                },
+                Select: {
+                    optionHeight: 40,
                 }
             },
         }}>

package/dist/utils/agent.d.ts

@@ -0,0 +1 @@
+export declare const getOS: () => "mac" | "windows";

package/dist/utils/agent.js

@@ -0,0 +1,8 @@
+export const getOS = () => {
+    const ua = navigator.userAgent.toLowerCase();
+    if (ua.includes("mac"))
+        return "mac";
+    if (ua.includes("win"))
+        return "windows";
+    return "windows";
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seat-editor",
-  "version": "3.5.13",
+  "version": "3.5.14",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",