seat-editor 1.2.6 → 1.2.8

package/dist/features/navbar/index.jsx

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

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

@@ -13,5 +13,5 @@ export interface TableEditorProps {
     ];
     statusKey: string;
 }
-declare const TableEditor: (props: TableEditorProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableEditor: (props: TableEditorProps) => import("react").JSX.Element;
 export default TableEditor;

package/dist/features/package/index.jsx

@@ -0,0 +1,39 @@
+"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,
+            });
+        }
+    }, [componentProps, extraComponentProps]);
+    return (<>
+      <div className="w-full h-screen flex relative">
+        <SideTool />
+        <Board onSelectComponent={props.onSelectComponent}/>
+        <ControlPanels />
+      </div>
+    </>);
+};
+export default TableEditor;

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

@@ -1,2 +1,2 @@
-declare const ControlPanels: () => import("react/jsx-runtime").JSX.Element;
+declare const ControlPanels: () => import("react").JSX.Element;
 export default ControlPanels;

package/dist/features/panel/index.jsx

@@ -0,0 +1,91 @@
+"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 = () => {
+    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(() => {
+        console.log("masuuuuk");
+        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);
+            console.log({ isDifferentId, isSameIdAndSameDimensions, show });
+            if (show && (isDifferentId || isSameIdAndSameDimensions)) {
+                setOpen(true);
+            }
+            console.log("turee");
+            form.setFieldsValue(selectedComponent);
+        }
+        else {
+            console.log("false");
+            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"/>;
+            case "background":
+                return <UploadTool name={tool.active} type="background"/>;
+            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) => {
+            console.log(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.d.ts

@@ -1,4 +1,4 @@
 declare const SelectToolForm: ({ title }: {
     title?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SelectToolForm;

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

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

@@ -1,2 +1,2 @@
-declare const SquareToolForm: () => import("react/jsx-runtime").JSX.Element;
+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

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

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

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

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

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

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

@@ -2,5 +2,5 @@ interface UploadToolProps {
     name: string;
     type?: "component" | "background";
 }
-declare const UploadTool: ({ name, type }: UploadToolProps) => import("react/jsx-runtime").JSX.Element;
+declare const UploadTool: ({ name, type }: UploadToolProps) => import("react").JSX.Element;
 export default UploadTool;

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

@@ -0,0 +1,80 @@
+"use client";
+import { Upload, message, } from "antd";
+import { InboxOutlined } from "@ant-design/icons";
+import { useAppDispatch } from "../../hooks/use-redux";
+import { useState } from "react";
+import SectionLabel from "../../components/form-tools/label";
+import SectionShape from "../../components/form-tools/shape";
+const { Dragger } = Upload;
+const UploadTool = ({ name, type }) => {
+    var _a, _b;
+    const [imageUrl, setImageUrl] = useState(null);
+    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) {
+            const { status } = info.file;
+            if (status !== "uploading" && info.file.originFileObj) {
+                const file = info.file.originFileObj;
+                if (file) {
+                    const img = new window.Image();
+                    img.onload = () => {
+                        const scaleX = widthWorkspace / img.width;
+                        const scaleY = heightWorkspace / img.height;
+                        // Ambil skala terkecil supaya semua image masuk workspace
+                        const scale = Math.min(1, scaleX, scaleY); // maksimum 1 (jangan perbesar)
+                        // Terapkan skala ke dimensi gambar
+                        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,
+                            },
+                        });
+                    };
+                    img.src = URL.createObjectURL(file);
+                    setImageUrl(img.src);
+                }
+            }
+            if (status === "done") {
+                message.success(`${info.file.name} file uploaded successfully.`);
+            }
+            else if (status === "error") {
+                message.error(`${info.file.name} file upload failed.`);
+            }
+        },
+        onDrop(e) {
+            console.log("Dropped files", e.dataTransfer.files);
+        },
+    };
+    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.d.ts

@@ -1,2 +1,2 @@
-declare const SideTool: () => import("react/jsx-runtime").JSX.Element;
+declare const SideTool: () => import("react").JSX.Element;
 export default SideTool;

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

@@ -0,0 +1,211 @@
+"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;

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

@@ -11,5 +11,5 @@ export interface LayerViewProps {
     }[];
     statusKey: string;
 }
-declare const LayerView: (props: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const LayerView: (props: LayerViewProps) => import("react").JSX.Element;
 export default LayerView;

package/dist/features/view/index.jsx

@@ -103,18 +103,17 @@ const LayerView = (props) => {
     console.log({ elementEditor });
     const renderElements = (elementEditor, mappingKey, colorMatchKey) => {
         return elementEditor.map((editorItem, i) => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const isUsingMapping = mappingKey &&
                 typeof editorItem[mappingKey] === "object" &&
                 editorItem[mappingKey] !== null;
             const finalProps = isUsingMapping ? editorItem[mappingKey] : editorItem;
             if (colorMatchKey) {
                 if (isUsingMapping) {
-                    return Object.assign(Object.assign({}, finalProps), { fill: (_a = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _a === void 0 ? void 0 : _a.color });
+                    return Object.assign(Object.assign({}, finalProps), { fill: (_b = (_a = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : finalProps.fill });
                 }
                 else {
-                    console.log("masuuuk");
-                    return Object.assign(Object.assign({}, finalProps), { fill: (_c = (_b = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : finalProps.fill });
+                    return Object.assign(Object.assign({}, finalProps), { fill: (_d = (_c = colorMatchKey.find((item) => item.key == (editorItem === null || editorItem === void 0 ? void 0 : editorItem[statusKey]))) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : finalProps.fill });
                 }
             }
             return finalProps;
@@ -134,7 +133,7 @@ const LayerView = (props) => {
             background: backgroundColor,
             display: "block",
         }}>
-            <Layers components={[
+            <Layers mode="view" components={[
             ...extraComponentsEditor,
             ...renderElements(componentsEditor, mappingKey, colorMatchKey),
         ]} onClick={handleSelectComponent} selectedTable={selectedTable} selectedTableColor={selectedTableColor}/>

package/dist/index.d.ts

@@ -4,4 +4,4 @@ import SideTool from "./features/side-tool";
 import ControlPanels from "./features/panel";
 import LayerView, { type LayerViewProps } from "./features/view";
 import TableEditor from "./features/package";
-export { StoreProvider as ProviderSeatEditor, Board, SideTool, ControlPanels, LayerView, LayerViewProps, TableEditor };
+export { StoreProvider as ProviderSeatEditor, Board, SideTool, ControlPanels, LayerView, LayerViewProps, TableEditor as SeatEditor };

package/dist/index.js

@@ -4,4 +4,4 @@ import SideTool from "./features/side-tool";
 import ControlPanels from "./features/panel";
 import LayerView from "./features/view";
 import TableEditor from "./features/package";
-export { StoreProvider as ProviderSeatEditor, Board, SideTool, ControlPanels, LayerView, TableEditor };
+export { StoreProvider as ProviderSeatEditor, Board, SideTool, ControlPanels, LayerView, TableEditor as SeatEditor };