seat-editor 3.3.2 → 3.3.3

package/dist/components/form-tools/shape.d.ts

@@ -1,3 +1,7 @@
+export declare const optionsShape: {
+    value: string;
+    label: string;
+}[];
 declare const SectionShape: ({ allowChangeShape, }: {
     allowChangeShape?: boolean;
 }) => import("react").JSX.Element;

package/dist/components/form-tools/shape.jsx

@@ -1,40 +1,41 @@
 "use client";
 import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
+export const optionsShape = [
+    {
+        value: "circle",
+        label: "Circle",
+    },
+    {
+        value: "square",
+        label: "Square",
+    },
+    {
+        value: "table-seat-circle",
+        label: "Type 1",
+    },
+    {
+        value: "table-seat-square",
+        label: "Type 2",
+    },
+    {
+        value: "table-seat-half-square",
+        label: "Type 3",
+    },
+    {
+        value: "table-seat-rect-square",
+        label: "Type 4",
+    },
+    {
+        value: "table-seat-rect-circle",
+        label: "Type 5",
+    },
+    {
+        label: "Image Table",
+        value: "image-table",
+    },
+];
 const SectionShape = ({ allowChangeShape = true, }) => {
-    const optionsShape = [
-        {
-            value: "circle",
-            label: "Circle",
-        },
-        {
-            value: "square",
-            label: "Square",
-        },
-        {
-            value: "table-seat-circle",
-            label: "Type 1",
-        },
-        {
-            value: "table-seat-square",
-            label: "Type 2",
-        },
-        {
-            value: "table-seat-half-square",
-            label: "Type 3",
-        },
-        {
-            value: "table-seat-rect-square",
-            label: "Type 4",
-        },
-        {
-            value: "table-seat-rect-circle",
-            label: "Type 5",
-        },
-        {
-            label: "Image Table",
-            value: "image-table",
-        },
-    ];
+    const shape = Form.useWatch("shape");
     return (<div className="py-2">
       <h1 className="heading-s">Shape</h1>
       {allowChangeShape && (<Flex gap={2} className="w-full">
@@ -57,7 +58,6 @@ const SectionShape = ({ allowChangeShape = true, }) => {
             return onlyNumber === "" ? 1 : Math.max(1, Number(onlyNumber));
         }}/>
         </Form.Item>
-       
       </Flex>
       <Flex gap={2}>
         <Form.Item label="Position X" name="x" className="w-full">
@@ -89,13 +89,13 @@ const SectionShape = ({ allowChangeShape = true, }) => {
         <Form.Item label="Stroke" name={"strokeWidth"} className="w-full">
           <InputNumber />
         </Form.Item>
-        <Form.Item label="Radius" name="radius" 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>
+        {!(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && (<Form.Item label="Radius" name="radius" 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>)}
         <Form.Item label="opacity" name={"opacity"} className="w-full">
           <InputNumber step={0.1} max={1} min={0} parser={(value) => {
             if (value === undefined || value === null || value === "")

package/dist/features/board-v3/board-slice.js

@@ -237,7 +237,7 @@ const boardSlice = createSlice({
         setInitialValue: (state, action) => {
             const { components, extraComponents, backgroundColor, boundingBox } = action.payload;
             state.components = components;
-            state.extraComponents = extraComponents;
+            state.extraComponents = extraComponents === null || extraComponents === void 0 ? void 0 : extraComponents.filter((item) => item.shape);
             state.pointer = 0;
             state.backgroundColor = backgroundColor;
             state.boundingBox = boundingBox;

package/dist/features/panel/index.jsx

@@ -79,6 +79,8 @@ const ControlPanels = (props) => {
                 rotation: getValueIfSame(selectedGroup, "rotation"),
                 strokeWidth: getValueIfSame(selectedGroup, "strokeWidth"),
                 radius: getValueIfSame(selectedGroup, "radius"),
+                shape: getValueIfSame(selectedGroup, "shape"),
+                labels: getValueIfSame(selectedGroup, "labels"),
             });
             const values = form.getFieldsValue();
         }
@@ -92,11 +94,11 @@ const ControlPanels = (props) => {
         }
     }, [tool, show]);
     const createShape = (shape, props = {}) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const defaults = (_a = SEAT_SHAPES[shape]) !== null && _a !== void 0 ? _a : {};
-        return Object.assign(Object.assign(Object.assign({}, defaults), props), { shape, height: (_b = adjustHeightWidthForSeatShape(shape, props)) === null || _b === void 0 ? void 0 : _b.height, width: (_c = adjustHeightWidthForSeatShape(shape, props)) === null || _c === void 0 ? void 0 : _c.width, fill: props.fill, seatCount: getSeatCount(shape, props), seatPositions: getSeatPosition(shape, props), openSpace: isSeatShape(shape) ? (_d = props.openSpace) !== null && _d !== void 0 ? _d : 0 : undefined, seatFill: isSeatShape(shape)
-                ? (_e = props.seatFill) !== null && _e !== void 0 ? _e : "transparent"
-                : undefined, text: shape === "text" ? (_f = props.text) !== null && _f !== void 0 ? _f : defaults.text : undefined, fontColor: shape === "text" ? (_g = props.fontColor) !== null && _g !== void 0 ? _g : defaults.fontColor : undefined });
+        return Object.assign(Object.assign(Object.assign({}, defaults), props), { shape: (_b = props.shape) !== null && _b !== void 0 ? _b : shape, height: (_c = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _c === void 0 ? void 0 : _c.height, width: (_d = adjustHeightWidthForSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props)) === null || _d === void 0 ? void 0 : _d.width, fill: props.fill, seatCount: getSeatCount(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props), seatPositions: getSeatPosition(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape, props), openSpace: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape) ? (_e = props.openSpace) !== null && _e !== void 0 ? _e : 0 : undefined, seatFill: isSeatShape(shape !== null && shape !== void 0 ? shape : props === null || props === void 0 ? void 0 : props.shape)
+                ? (_f = props.seatFill) !== null && _f !== void 0 ? _f : "transparent"
+                : undefined, text: shape === "text" ? (_g = props.text) !== null && _g !== void 0 ? _g : defaults.text : undefined, fontColor: shape === "text" ? (_h = props.fontColor) !== null && _h !== void 0 ? _h : defaults.fontColor : undefined, radius: props.radius });
     };
     const debouncedSyncComponents = useRef(debounce((data) => {
         dispatch({ type: "board/setFlagChange", payload: true });
@@ -172,8 +174,8 @@ const ControlPanels = (props) => {
             debouncedSyncComponents.current(Object.assign(Object.assign({}, (selectedComponent || {})), newValues));
         }
         if ((selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.length) > 0) {
-            const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, } = newValues;
-            const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {}))));
+            const { width, height, x, y, fill, stroke, opacity, rotation, strokeWidth, radius, shape, seatCount, seatFill, seatPositions, labels } = newValues;
+            const updatedGroup = selectedGroup.map((comp) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, comp), (width !== undefined ? { width } : {})), (height !== undefined ? { height } : {})), (x !== undefined ? { x } : {})), (y !== undefined ? { y } : {})), (fill !== undefined ? { fill } : {})), (stroke !== undefined ? { stroke } : {})), (opacity !== undefined ? { opacity } : {})), (rotation !== undefined ? { rotation } : {})), (strokeWidth !== undefined ? { strokeWidth } : {})), (radius !== undefined ? { radius } : {})), (shape !== undefined ? { shape } : {})), (seatCount !== undefined ? { seatCount } : {})), (seatFill !== undefined ? { seatFill } : {})), (seatPositions !== undefined ? { seatPositions } : {})), (labels !== undefined ? { labels } : {}))));
             let minX = Infinity;
             let minY = Infinity;
             let maxX = -Infinity;

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

@@ -1,49 +1,80 @@
 "use client";
-import { ColorPicker, Flex, Form, InputNumber } from "antd";
+import { optionsShape } from "@/components/form-tools/shape";
+import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
+import SeatCircle from "./table-seat-circle";
+import SeatSquare from "./table-seat-square";
 const SelectedGroup = () => {
+    const shape = Form.useWatch("shape");
+    const sameShape = [
+        "table-seat-circle",
+        "table-seat-rect-circle",
+        "table-seat-square",
+        "table-seat-square",
+        "table-seat-rect-square",
+    ].includes(shape);
     return (<>
       <div className="py-2">
         <h1 className="heading-s"> Group Selection</h1>
         <div className="py-2">
           <Flex gap={2} className="w-full">
-            <Form.Item label="Width" name="width" className="w-full">
-              <InputNumber suffix="px"/>
-            </Form.Item>
-            <Form.Item label="Height" name="height" className="w-full">
-              <InputNumber suffix="px"/>
-            </Form.Item>
-            <Form.Item label="Radius" name={"radius"} className="w-full">
-              <InputNumber step={1} max={1} min={0}/>
-            </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 max={360} min={0}/>
+            <Form.Item label="Name" name="shape" className="w-full">
+              <Select options={optionsShape} className="w-full"/>
             </Form.Item>
           </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>
-            <Form.Item label="Stroke" name={"stroke"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
-              <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-            </Form.Item>
-          </Flex>
-          <Flex>
-            <Form.Item label="Stroke Width" name={"strokeWidth"} className="w-full">
-              <InputNumber />
-            </Form.Item>
-            <Form.Item label="opacity" name={"opacity"} className="w-full">
-              <InputNumber step={0.1} max={1} min={0}/>
-            </Form.Item>
-           
+          <Flex gap={2} className="w-full">
+            {["table-seat-circle", "table-seat-rect-circle"].includes(shape) && <SeatCircle />}
+            {[
+            "table-seat-square",
+            "table-seat-square",
+            "table-seat-rect-square",
+        ].includes(shape) && <SeatSquare />}
           </Flex>
+          {!sameShape && (<>
+              <Flex gap={2} className="w-full">
+                <Form.Item label="Width" name="width" className="w-full">
+                  <InputNumber suffix="px"/>
+                </Form.Item>
+                <Form.Item label="Height" name="height" className="w-full">
+                  <InputNumber suffix="px"/>
+                </Form.Item>
+                {!(shape === null || shape === void 0 ? void 0 : shape.includes("circle")) && (<Form.Item label="Radius" name={"radius"} 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 max={360} min={0}/>
+                </Form.Item>
+              </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>
+                <Form.Item label="Stroke" name={"stroke"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
+                  <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+                </Form.Item>
+              </Flex>
+              <Flex>
+                <Form.Item label="Stroke Width" name={"strokeWidth"} className="w-full">
+                  <InputNumber />
+                </Form.Item>
+                <Form.Item label="opacity" name={"opacity"} className="w-full">
+                  <InputNumber step={0.1} max={1} min={0}/>
+                </Form.Item>
+              </Flex>
+            </>)}
         </div>
       </div>
     </>);

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

@@ -19,9 +19,14 @@ const SeatCircle = () => {
           <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>
+          {/* <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 />

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

@@ -34,9 +34,14 @@ const SeatSquare = () => {
           <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>
+          {/* <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 />

package/dist/features/panel/utils.js

@@ -1,4 +1,5 @@
 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") {
@@ -39,7 +40,8 @@ export const getSeatPosition = (shape, props) => {
 export const adjustHeightWidthForSeatShape = (shape, props) => {
     if (shape === null || shape === void 0 ? void 0 : shape.includes("circle")) {
         const sizeDefault = Math.min(props.width, props.height);
-        return Object.assign(Object.assign({}, props), { height: sizeDefault, width: sizeDefault });
+        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/view-only-3/index.jsx

@@ -23,7 +23,7 @@ const LayerView = (props) => {
     const [panningGroup, setPanningGroup] = useState(false);
     const [scale, setScale] = useState(1);
     const [selectedTable, setSelectedTable] = useState(null);
-    const { components: componentsEditor, extraComponents: extraComponentsEditor, boundingBox: boundingBoxProps } = useAppSelector((state) => state.board);
+    const { components: componentsEditor, extraComponents: extraComponentsEditor, boundingBox: boundingBoxProps, } = useAppSelector((state) => state.board);
     const backgroundColor = useAppSelector((state) => state.board.backgroundColor);
     const { loading } = useAppSelector((state) => state.panel);
     useImperativeHandle(refs, () => ({
@@ -38,7 +38,7 @@ const LayerView = (props) => {
     }));
     const dispatch = useAppDispatch();
     useEffect(() => {
-        if ((!loading && (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state))) {
+        if (!loading && (loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state)) {
             dispatch({ type: "panel/setLoading", payload: true });
         }
         if ((componentProps === null || componentProps === void 0 ? void 0 : componentProps.length) > 0) {
@@ -563,7 +563,6 @@ const LayerView = (props) => {
             touchAction: "none",
             userSelect: "none",
         }} {...props.svgProps}>
-            
             {hasBoundingBox && (<defs>
                 <clipPath id="contentCrop">
                   <rect x={boundingBox.minX} y={boundingBox.minY} width={boundingBox.width} height={boundingBox.height}/>

package/package.json

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