seat-editor 3.3.13 → 3.3.15

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

@@ -0,0 +1,2 @@
+declare const Navbar: () => import("react").JSX.Element;
+export default Navbar;

package/dist/features/navbar/index.jsx

@@ -0,0 +1,5 @@
+"use client";
+const Navbar = () => {
+    return <div>Navbar</div>;
+};
+export default Navbar;

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

@@ -0,0 +1,6 @@
+interface ControlPanelsProps {
+    action?: (file: File) => Promise<string>;
+    transform?: any;
+}
+declare const ControlPanels: (props: ControlPanelsProps) => import("react").JSX.Element;
+export default ControlPanels;

package/dist/features/panel/index.jsx

@@ -0,0 +1,251 @@
+"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 { useEffect, useRef, useState } from "react";
+import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
+import { Form, 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";
+import { debounce } from "lodash";
+import clsx from "clsx";
+import { getAttributeElement } from "../board-v3/resize-element";
+import { applyResizeToSvgElement, getGlobalBBox, updateSelectionBox, } from "../board-v3/utils";
+import { SEAT_SHAPES } from "../../utils/constant";
+import { adjustHeightWidthForSeatShape, getSeatCount, getSeatPosition, isSeatShape, } from "./utils";
+import SeatSquare from "./table-seat-square";
+const ControlPanels = (props) => {
+    const { action, transform } = props;
+    const dispatch = useAppDispatch();
+    const theme = useAppSelector((state) => state.theme);
+    const tool = useAppSelector((state) => state.tool);
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    const components = useAppSelector((state) => state.board.components);
+    const extraComponents = useAppSelector((state) => state.board.extraComponents);
+    const svgRef = useRef(null);
+    useEffect(() => {
+        svgRef.current = document.querySelectorAll("#workspace");
+    }, []);
+    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 if (selectedGroup) {
+            if (show)
+                setOpen(true);
+            if (!show)
+                setOpen(false);
+            function isSameAllByKey(arr, key) {
+                if (!arr || arr.length === 0)
+                    return false;
+                const firstValue = arr[0][key];
+                return arr.every((item) => item[key] === firstValue);
+            }
+            function getValueIfSame(arr, key) {
+                return isSameAllByKey(arr, key) ? arr[0][key] : undefined;
+            }
+            form.setFieldsValue({
+                width: getValueIfSame(selectedGroup, "width"),
+                height: getValueIfSame(selectedGroup, "height"),
+                x: getValueIfSame(selectedGroup, "x"),
+                y: getValueIfSame(selectedGroup, "y"),
+                fill: getValueIfSame(selectedGroup, "fill"),
+                stroke: getValueIfSame(selectedGroup, "stroke"),
+                opacity: getValueIfSame(selectedGroup, "opacity"),
+                rotation: getValueIfSame(selectedGroup, "rotation"),
+                strokeWidth: getValueIfSame(selectedGroup, "strokeWidth"),
+                radius: getValueIfSame(selectedGroup, "radius"),
+                shape: getValueIfSame(selectedGroup, "shape"),
+                labels: getValueIfSame(selectedGroup, "labels"),
+            });
+        }
+        else {
+            setOpen(false);
+        }
+    }, [selectedComponent, selectedGroup, show]);
+    useEffect(() => {
+        if (tool.active === "background" || tool.active === "image-table") {
+            setOpen(true);
+        }
+    }, [tool, show]);
+    const createShape = (shape, props = {}) => {
+        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: (_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 });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
+        dispatch({
+            type: "board/updateComponent",
+            payload: data,
+        });
+        dispatch({
+            type: "panel/updateSelectedComponent",
+            payload: data,
+        });
+    }, 300));
+    const debouncedSyncSelectedComponents = useRef(debounce((data) => {
+        dispatch({
+            type: "panel/updateSelectedComponent",
+            payload: data,
+        });
+    }, 300));
+    const debouncedSyncSelectedSelectionLines = useRef(debounce((data) => {
+        dispatch({
+            type: "panel/setSelectionLines",
+            payload: data,
+        });
+    }));
+    const debounceSyncSelectedGroup = useRef(debounce((data) => {
+        dispatch({
+            type: "panel/updateSelectedGroup",
+            payload: data,
+        });
+    }, 300));
+    const debounceSyncDataSelectedGroup = useRef(debounce((data) => {
+        dispatch({
+            type: "panel/updateSelectedGroup",
+            payload: data,
+        });
+        dispatch({
+            type: "board/updateComponentsBulk",
+            payload: data,
+        });
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
+    }, 300));
+    const debouncedSyncForm = useRef(debounce(() => {
+        dispatch({ type: "board/setFlagChange", payload: true });
+        dispatch({ type: "board/setUpdateBy", payload: "global" });
+    }, 300));
+    const updateElement = (id, values) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        let findElement = [...components, ...extraComponents].find((item) => item.id === id);
+        const isAdjustSize = ["circle"].includes((findElement === null || findElement === void 0 ? void 0 : findElement.shape) || "");
+        let forceSize = {
+            width: Math.min(findElement.width, findElement.height),
+            height: Math.min(findElement.width, findElement.height),
+        };
+        if (!findElement)
+            return;
+        const newElement = Object.assign(Object.assign(Object.assign({}, findElement), values), { x: (_a = values.x) !== null && _a !== void 0 ? _a : findElement.x, y: (_b = values.y) !== null && _b !== void 0 ? _b : findElement.y, width: isAdjustSize ? forceSize.width : (_c = values.width) !== null && _c !== void 0 ? _c : findElement.width, height: isAdjustSize
+                ? forceSize.height
+                : (_d = values.height) !== null && _d !== void 0 ? _d : findElement.height });
+        const svg = (_f = (_e = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _e === void 0 ? void 0 : _e[1]) !== null && _f !== void 0 ? _f : (_g = svgRef === null || svgRef === void 0 ? void 0 : svgRef.current) === null || _g === void 0 ? void 0 : _g[0];
+        const { g, element } = getAttributeElement(svg, id);
+        applyResizeToSvgElement(element, g, newElement);
+        const getBBox = getGlobalBBox(svg, g);
+        debouncedSyncSelectedSelectionLines.current(Object.assign({}, getBBox));
+        updateSelectionBox(svg, getBBox);
+    };
+    const handleChangeComponent = (values, allValues) => {
+        const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
+        const newValues = createShape(shape, restProps);
+        if (selectedComponent) {
+            updateElement(allValues.id, values);
+            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, 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;
+            let maxY = -Infinity;
+            updatedGroup.forEach((comp) => {
+                minX = Math.min(minX, comp.x);
+                minY = Math.min(minY, comp.y);
+                maxX = Math.max(maxX, comp.x + comp.width);
+                maxY = Math.max(maxY, comp.y + comp.height);
+            });
+            const newSelectionGroup = {
+                x: minX,
+                y: minY,
+                width: maxX - minX,
+                height: maxY - minY,
+                shape: "selection-box",
+                id: `${Date.now()}`,
+                fill: "transparent",
+                rotation: 0,
+                stroke: "red",
+            };
+            dispatch({
+                type: "panel/setSelectionLines",
+                payload: newSelectionGroup,
+            });
+            // dispatch({
+            //   type: "panel/updateSelectedGroup",
+            //   payload: updatedGroup,
+            // });
+            debounceSyncDataSelectedGroup.current(updatedGroup);
+        }
+        // debouncedSyncForm.current();
+    };
+    const renderFormPanel = () => {
+        switch (tool.active) {
+            case "select":
+            case "text":
+                return <SelectToolForm action={action} tranform={transform}/>;
+            case "square":
+            case "circle":
+                return <SquareToolForm />;
+            case "table-seat-circle":
+                return <SeatCircle />;
+            case "table-seat-square":
+                return <SeatSquare />;
+            case "image-table":
+                return (<UploadTool name={tool.active} type="component" action={action} transform={transform}/>);
+            case "background":
+                return (<UploadTool name={tool.active} type="background" action={action} transform={transform}/>);
+            default:
+                return null;
+        }
+    };
+    const handleClose = () => {
+        setOpen(false);
+        // HIDE SEMENTARA
+        dispatch({
+            type: "panel/setShow",
+            payload: false,
+        });
+    };
+    // if(!show) return null
+    return (<div className={clsx("w-[300px] h-full absolute top-0  z-50 transition-all duration-300 overflow-y-scroll ", open ? "right-0" : "right-[-300px]")}>
+      <div className="bg-white h-full max-h-screen w-full p-2 overflow-y-auto border-l border-gray-300">
+        <Form layout="vertical" form={form} name="table" onValuesChange={handleChangeComponent} initialValues={{ labels: [{}] }}>
+          <Form.Item name="id" hidden>
+            <Input />
+          </Form.Item>
+          {renderFormPanel()}
+        </Form>
+      </div>
+    </div>);
+};
+export default ControlPanels;

package/dist/features/panel/panel-slice.d.ts

@@ -0,0 +1,23 @@
+import { PayloadAction } from "@reduxjs/toolkit";
+export interface PanelState {
+    selectedComponent: any;
+    history: any[];
+    active: string;
+    show: boolean;
+    selectedGroup: any;
+    selectionLines?: any;
+    loading?: boolean;
+}
+export declare const panelSlice: import("@reduxjs/toolkit").Slice<PanelState, {
+    setLoading: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<boolean>) => void;
+    setSelectedComponent: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<any>) => void;
+    setUnSelectedComponent: (state: import("immer").WritableDraft<PanelState>) => void;
+    updateSelectedComponent: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<any>) => void;
+    setShow: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<boolean>) => void;
+    setSelectedGroup: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<any>) => void;
+    updateSelectedGroup: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<any>) => void;
+    setSelectionLines: (state: import("immer").WritableDraft<PanelState>, action: PayloadAction<any>) => void;
+}, "panel", "panel", import("@reduxjs/toolkit").SliceSelectors<PanelState>>;
+export declare const setSelectedComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "panel/setSelectedComponent">, setUnSelectedComponent: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<"panel/setUnSelectedComponent">, setShow: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<boolean, "panel/setShow">;
+declare const _default: import("redux").Reducer<PanelState>;
+export default _default;

package/dist/features/panel/panel-slice.js

@@ -0,0 +1,46 @@
+import { createSlice } from "@reduxjs/toolkit";
+const initialState = {
+    selectedComponent: null,
+    history: [],
+    active: "",
+    show: false,
+    selectedGroup: null,
+    selectionLines: null,
+    loading: false,
+};
+export const panelSlice = createSlice({
+    name: "panel",
+    initialState,
+    reducers: {
+        setLoading: (state, action) => {
+            state.loading = action.payload;
+        },
+        setSelectedComponent: (state, action) => {
+            state.selectedComponent = action.payload;
+        },
+        setUnSelectedComponent: (state) => {
+            state.selectedComponent = null;
+        },
+        updateSelectedComponent: (state, action) => {
+            state.selectedComponent = Object.assign({}, action.payload);
+            state.history.push(state.selectedComponent);
+            if (state.history.length > 20) {
+                state.history.shift();
+            }
+        },
+        setShow: (state, action) => {
+            state.show = action.payload;
+        },
+        setSelectedGroup: (state, action) => {
+            state.selectedGroup = action.payload;
+        },
+        updateSelectedGroup: (state, action) => {
+            state.selectedGroup = action.payload;
+        },
+        setSelectionLines: (state, action) => {
+            state.selectionLines = action.payload;
+        }
+    },
+});
+export const { setSelectedComponent, setUnSelectedComponent, setShow } = panelSlice.actions;
+export default panelSlice.reducer;

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

@@ -0,0 +1,6 @@
+declare const SelectToolForm: ({ title, action, tranform }: {
+    title?: string;
+    action: any;
+    tranform: any;
+}) => import("react").JSX.Element;
+export default SelectToolForm;

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

@@ -0,0 +1,70 @@
+"use client";
+import { useAppSelector } from "../../hooks/use-redux";
+import SquareToolForm from "./square-circle-tool";
+import SeatCircle from "./table-seat-circle";
+import SeatSquare from "./table-seat-square";
+import UploadTool from "./upload-tool";
+import TextTool from "./text-tool";
+import SelectedGroup from "./selected-group";
+const SelectToolForm = ({ title = "Title", action, tranform }) => {
+    const components = useAppSelector((state) => state.board.components);
+    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
+    const extraComponents = useAppSelector((state) => state.board.extraComponents);
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    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 variableFormatToString = (variable) => {
+            return variable
+                .replace(/-/g, " ")
+                .replace(/\b\w/g, (char) => char.toUpperCase());
+        };
+        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">
+                {variableFormatToString(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":
+            case "table-seat-rect-circle":
+                return <SeatCircle />;
+            case "table-seat-square":
+            case "table-seat-half-square":
+            case "table-seat-rect-square":
+                return <SeatSquare />;
+            case "image-table":
+            case "background":
+                return (<UploadTool action={action} 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"} transform={tranform}/>);
+            case "text":
+                return <TextTool />;
+            default:
+                return null;
+        }
+    };
+    const renderSelectionComponent = () => {
+        if (selectedGroup) {
+            return <SelectedGroup />;
+        }
+    };
+    return (<div className="flex flex-col gap-2">
+      <SummaryComponents />
+      {renderComponent()}
+      {renderSelectionComponent()}
+    </div>);
+};
+export default SelectToolForm;

package/dist/features/panel/selected-group.d.ts

@@ -0,0 +1,2 @@
+declare const SelectedGroup: () => import("react").JSX.Element;
+export default SelectedGroup;

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

@@ -0,0 +1,93 @@
+"use client";
+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";
+import { useAppSelector } from "../../hooks/use-redux";
+const SelectedGroup = () => {
+    const shape = Form.useWatch("shape");
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    const sameShape = [
+        "table-seat-circle",
+        "table-seat-rect-circle",
+        "table-seat-square",
+        "table-seat-square",
+        "table-seat-rect-square",
+        "table-seat-half-square"
+    ].includes(shape);
+    const allShapeSelected = selectedGroup.map((item) => item.shape);
+    const shapeIncludeImage = ["background", "image-table", "polygon"].some((shape) => allShapeSelected.includes(shape));
+    const shapeAllIncludePolygon = allShapeSelected.includes("polygon");
+    return (<>
+      <div className="py-2">
+        <h1 className="heading-s"> Group Selection</h1>
+        <div className="py-2">
+          {!shapeIncludeImage && (<Flex gap={2} className="w-full">
+              <Form.Item label="Name" name="shape" className="w-full">
+                <Select options={optionsShape} className="w-full"/>
+              </Form.Item>
+            </Flex>)}
+          <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",
+            "table-seat-half-square"
+        ].includes(shape) && <SeatSquare />}
+          </Flex>
+          {!sameShape && (<>
+              <Flex gap={2} className="w-full">
+                {!shapeAllIncludePolygon && (<>
+                    <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")) && !shapeAllIncludePolygon) && (<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>
+              {!shapeAllIncludePolygon && (<>
+                  <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>
+    </>);
+};
+export default SelectedGroup;

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

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

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

@@ -0,0 +1,10 @@
+"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.d.ts

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

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

@@ -0,0 +1,36 @@
+"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/table-seat-square.d.ts

@@ -0,0 +1,2 @@
+declare const SeatSquare: () => import("react").JSX.Element;
+export default SeatSquare;

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

@@ -0,0 +1,51 @@
+"use client";
+import { Col, ColorPicker, Flex, Form, InputNumber, Row, } from "antd";
+import SectionLabel from "../../components/form-tools/label";
+import SectionShape from "../../components/form-tools/shape";
+const SeatSquare = () => {
+    return (<>
+      <div className="py-2">
+        <h1 className="heading-s"> Square table</h1>
+        <Flex className="w-full">
+          <Form.Item name="openSpace" label="Open Space" className="w-full">
+            <InputNumber max={1} min={0} step={0.1}/>
+          </Form.Item>
+        </Flex>
+        <Row gutter={[16, 16]}>
+          <Col span={12}>
+            <Form.Item name={["seatPositions", "top"]} label="Top" className="w-full">
+               <InputNumber max={100} min={0} step={1}/>
+            </Form.Item>
+            <Form.Item name={["seatPositions", "left"]} label="Left" className="w-full">
+               <InputNumber max={100} min={0} step={1}/>
+            </Form.Item>
+          </Col>
+          <Col span={12}>
+            <Form.Item name={["seatPositions", "right"]} label="Right" className="w-full">
+               <InputNumber max={100} min={0} step={1}/>
+            </Form.Item>
+            <Form.Item name={["seatPositions", "bottom"]} label="Bottom" className="w-full">
+               <InputNumber max={100} min={0} step={1}/>
+            </Form.Item>
+          </Col>
+        </Row>
+
+        <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 SeatSquare;

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

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