seat-editor 2.0.0 → 2.1.1

package/dist/components/layer-v3/index.jsx

@@ -1,418 +0,0 @@
-"use client";
-import { useRef } from "react";
-import { isArray, isEmpty, omit } from "lodash";
-import clsx from "clsx";
-const Layers = ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode = "edit", style, 
-// onTouchEnd,
-// onTouchMove,
-onTouchStart, }) => {
-    const refItemTemp = useRef(null);
-    const handleOnHover = (item) => {
-        if (mode === "edit") {
-            refItemTemp.current = item;
-        }
-    };
-    function rectToPolygonPoints(x, y, width, height) {
-        const topLeft = [x, y];
-        const topRight = [x + width, y];
-        const bottomRight = [x + width, y + height];
-        const bottomLeft = [x, y + height];
-        const points = [topLeft, topRight, bottomRight, bottomLeft]
-            .map((point) => point.join(","))
-            .join(" ");
-        return points;
-    }
-    function rectToPolygonNodes(x, y, width, height) {
-        const points = [
-            { x: x, y: y },
-            { x: x + width, y: y },
-            { x: x + width, y: y + height },
-            { x: x, y: y + height },
-        ];
-        return points;
-    }
-    const renderShadowShape = (item) => {
-        var _a;
-        const { id, x, y, width, height, fill, opacity, rotation, shape, fontColor, text, seatFill, labels, points, } = item;
-        const commonProps = { fill, opacity };
-        switch (shape) {
-            case "square":
-            case "polygon":
-                const pointsFormat = !isEmpty(points)
-                    ? points
-                    : rectToPolygonPoints(x, y, width, height);
-                return <polygon key={id} points={pointsFormat} {...commonProps}/>;
-            case "circle":
-                return (<circle key={id} cx={x + width / 2} cy={y + height / 2} r={width / 2} {...commonProps}/>);
-            case "diamond":
-                return (<rect key={id} x={x} y={y} width={width} height={height} transform={`rotate(${rotation}, ${x}, ${y})`} {...commonProps}/>);
-            case "table-seat-circle": {
-                const seatCount = item.seatCount;
-                const openSpace = (_a = item.openSpace) !== null && _a !== void 0 ? _a : 0;
-                const centerX = x + width / 2;
-                const centerY = y + height / 2;
-                const baseSize = Math.min(width, height);
-                const radius = baseSize / 2; // jarak kursi dari pusat
-                const seatRadius = baseSize / 6; // ukuran kursi
-                const fullAngle = 2 * Math.PI;
-                const availableAngle = fullAngle * (1 - openSpace);
-                const angleStart = (fullAngle - availableAngle) / 2;
-                const angleStep = availableAngle / seatCount;
-                const seatInsetFactor = 0.3;
-                const seatCircles = Array.from({ length: seatCount }, (_, i) => {
-                    const angle = angleStart + i * angleStep;
-                    const inset = seatRadius * seatInsetFactor; // default 0.3
-                    const cx = centerX + (radius - inset) * Math.cos(angle);
-                    const cy = centerY + (radius - inset) * Math.sin(angle);
-                    return { cx, cy };
-                });
-                return (<g key={id} transform={`rotate(${rotation} ${centerX} ${centerY})`}>
-            {/* Meja */}
-            <circle cx={centerX} cy={centerY} r={radius - 15} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} {...commonProps} opacity={id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity}/>
-
-            {/* Label */}
-            {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                        var _a, _b, _c, _d;
-                        return (<text key={`${id}-label-${index}`} x={centerX + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={centerY + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0)} fill={(_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black"} fontSize={`${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle" transform={`rotate(${rotation} ${centerX} ${centerY})`} onClick={(e) => {
-                                e.stopPropagation();
-                                onClick && onClick(item);
-                            }}>
-                {_ === null || _ === void 0 ? void 0 : _.label}
-              </text>);
-                    })}
-
-            {/* Kursi */}
-            <g fill="#e6b9c0" opacity={id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity} stroke="#c49ba3" strokeWidth="1">
-              {seatCircles.map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius} fill={seatFill}/>))}
-            </g>
-          </g>);
-            }
-            case "table-seat-square": {
-                const seatCount = item.seatCount || 6;
-                const openSpace = item.openSpace || 0; // from 0 to 0.9
-                const seatRadius = width / 6;
-                // split seats evenly on top and bottom
-                const seatCountPerSide = Math.ceil(seatCount / 2);
-                const availableWidth = width * (1 - openSpace);
-                const startX = x + (width * openSpace) / 2;
-                const spacing = seatCountPerSide > 1 ? availableWidth / (seatCountPerSide - 1) : 0;
-                const topSeats = Array.from({ length: seatCountPerSide }, (_, i) => ({
-                    cx: startX + i * spacing,
-                    cy: y - seatRadius * 1.5,
-                }));
-                const bottomSeats = Array.from({ length: seatCount - seatCountPerSide }, // in case it's odd
-                (_, i) => ({
-                    cx: startX + i * spacing,
-                    cy: y + height + seatRadius * 1.5,
-                }));
-                return (<g key={id}>
-            {/* Square Table */}
-            <rect x={x} y={y} width={width} height={height} {...commonProps}/>
-
-            {/* Seats */}
-            <g fill="#e6b9c0" fillOpacity="0.5" stroke="#c49ba3" strokeWidth="1" key={`${id}-seats`}>
-              {[...topSeats, ...bottomSeats].map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius}/>))}
-            </g>
-          </g>);
-            }
-            case "text":
-                return (<g key={id} onClick={() => {
-                        onClick && onClick(item);
-                    }}>
-            <rect x={x} y={y} width={width} height={height} fill="transparent" opacity={opacity}/>
-            <text x={x + width / 2} y={y + height / 2} textAnchor="middle" dominantBaseline="middle" fill={fontColor} fontSize={height * 0.6} opacity={opacity}>
-              {text}
-            </text>
-          </g>);
-            case "ruler":
-                return (<g key={id}>
-            <rect x={x - (window.innerWidth * 3) / 2} y={y} width={window.innerWidth * 3} height={1} fill="black"/>
-            <rect x={x} y={y - (window.innerHeight * 3) / 2} width={1} height={window.innerHeight * 3} fill="black"/>
-          </g>);
-            default:
-                return null;
-        }
-    };
-    const renderShape = (item) => {
-        var _a;
-        const { id, x, y, width, height, fill, opacity, rotation = 0, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, label, seatFill, src, points, } = item;
-        const commonProps = {
-            fill,
-            opacity,
-            stroke,
-            strokeWidth,
-            onMouseDown: (e) => {
-                onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e, item || refItemTemp.current);
-            },
-            onMouseEnter: (e) => {
-                // e.stopPropagation();
-                handleOnHover === null || handleOnHover === void 0 ? void 0 : handleOnHover(item);
-            },
-            onClick: (e) => {
-                // e.stopPropagation();
-                onClick === null || onClick === void 0 ? void 0 : onClick(item);
-            },
-            onMouseUp: (e) => {
-                // e.stopPropagation();
-                onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(e);
-            },
-            onBlur: (e) => {
-                // e.stopPropagation();
-                onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-            },
-            // onTouchMove: (
-            //   e: React.TouchEvent<
-            //     SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement
-            //   >
-            // ) => {
-            //   // e.stopPropagation();
-            //   onTouchMove?.(e);
-            // },
-            onTouchStart: (e) => {
-                // e.stopPropagation();
-                onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(e, item);
-            },
-            // onTouchEnd: (
-            //   e: React.TouchEvent<
-            //     SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement
-            //   >
-            // ) => {
-            //   // e.stopPropagation();
-            //   onTouchEnd?.(e);
-            // },
-            onDoubleClick: (e) => {
-                // e.stopPropagation();
-                onClick === null || onClick === void 0 ? void 0 : onClick(item);
-            },
-        };
-        switch (shape) {
-            case "square":
-            case "polygon":
-                const pointsFormat = !isEmpty(points)
-                    ? points
-                    : rectToPolygonPoints(x, y, width, height);
-                return (<g key={id}>
-            <polygon {...commonProps} key={id} points={pointsFormat}/>
-          </g>);
-            // return (
-            //   <g key={id}>
-            //     <rect
-            //       key={id}
-            //       x={x}
-            //       y={y}
-            //       width={width}
-            //       height={height}
-            //       fill={selectedTableColor ?? fill}
-            //       style={{
-            //         cursor: mode === "view" ? "pointer" : "default",
-            //         ...style,
-            //       }}
-            //       opacity={id === selectedComponent?.id ? 0.5 : opacity}
-            //       {...omit(commonProps, "opacity")}
-            //       transform={`rotate(${rotation} ${x + width / 2} ${
-            //         y + height / 2
-            //       })`}
-            //     />
-            //     {labels?.map((_: any, index: number) => {
-            //       return (
-            //         <text
-            //           {...omit(commonProps, ["opacity", "stroke", "strokeWidth"])}
-            //           key={`${id}-label-${index}`}
-            //           x={x + width / 2 + (_?.x ?? 0)}
-            //           y={y + height / 2 + (_?.y ?? 0)}
-            //           fill={_?.fontColor ?? "black"}
-            //           fontSize={`${_?.fontSize ?? 10}px`}
-            //           fontWeight="bold"
-            //           textAnchor="middle"
-            //           dominantBaseline="middle"
-            //           transform={`rotate(${rotation} ${x + width / 2} ${
-            //             y + height / 2
-            //           })`}
-            //           onClick={(e) => {
-            //             e.stopPropagation();
-            //             onClick&& onClick(item);
-            //           }}
-            //         >
-            //           {_?.label}
-            //         </text>
-            //       );
-            //     })}
-            //   </g>
-            // );
-            case "circle":
-                return (<g key={id}>
-            <circle key={id} cx={x + width / 2} cy={y + height / 2} r={Math.min(width, height) / 2} style={Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style)} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} opacity={id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity} {...omit(commonProps, "opacity")}/>
-            {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                        var _a, _b, _c, _d;
-                        return (<text key={`${id}-label-${index}`} x={x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0)} fill={(_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black"} fontSize={`${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle" transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`} onClick={(e) => {
-                                e.stopPropagation();
-                                onClick && onClick(item);
-                            }}>
-                  {_ === null || _ === void 0 ? void 0 : _.label}
-                </text>);
-                    })}
-          </g>);
-            case "diamond":
-                return (<g key={id}>
-            <rect key={id} x={x} y={y} width={width} height={height} style={Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style)} transform={`rotate(${rotation}, ${x}, ${y})`} {...commonProps} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill}/>
-            <text x={x + width / 2} y={y + height / 2} fill={fontColor !== null && fontColor !== void 0 ? fontColor : "black"} fontSize={`${fontSize !== null && fontSize !== void 0 ? fontSize : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
-              {label}
-            </text>
-          </g>);
-            case "table-seat-circle": {
-                const seatCount = item.seatCount;
-                const openSpace = (_a = item.openSpace) !== null && _a !== void 0 ? _a : 0;
-                const centerX = x + width / 2;
-                const centerY = y + height / 2;
-                const baseSize = Math.min(width, height);
-                const radius = baseSize / 2; // jarak kursi dari pusat
-                const seatRadius = baseSize / 6; // ukuran kursi
-                const fullAngle = 2 * Math.PI;
-                const availableAngle = fullAngle * (1 - openSpace);
-                const angleStart = (fullAngle - availableAngle) / 2;
-                const angleStep = availableAngle / seatCount;
-                const seatInsetFactor = 0.3;
-                const seatCircles = Array.from({ length: seatCount }, (_, i) => {
-                    const angle = angleStart + i * angleStep;
-                    const inset = seatRadius * seatInsetFactor; // default 0.3
-                    const cx = centerX + (radius - inset) * Math.cos(angle);
-                    const cy = centerY + (radius - inset) * Math.sin(angle);
-                    return { cx, cy };
-                });
-                return (<g key={id} transform={`rotate(${rotation} ${centerX} ${centerY})`}>
-            {/* Meja */}
-            <circle cx={centerX} cy={centerY} r={radius - 15} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} {...commonProps} opacity={id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity}/>
-
-            {/* Label */}
-            {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                        var _a, _b, _c, _d;
-                        return (<text key={`${id}-label-${index}`} x={centerX + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={centerY + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0)} fill={(_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black"} fontSize={`${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle" transform={`rotate(${rotation} ${centerX} ${centerY})`} onClick={(e) => {
-                                e.stopPropagation();
-                                onClick && onClick(item);
-                            }}>
-                {_ === null || _ === void 0 ? void 0 : _.label}
-              </text>);
-                    })}
-
-            {/* Kursi */}
-            <g fill="#e6b9c0" opacity={id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity} stroke="#c49ba3" strokeWidth="1">
-              {seatCircles.map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius} fill={seatFill}/>))}
-            </g>
-          </g>);
-            }
-            case "table-seat-square": {
-                const seatCount = item.seatCount || 6;
-                const openSpace = item.openSpace || 0; // from 0 to 0.9
-                const seatRadius = width / 6;
-                // split seats evenly on top and bottom
-                const seatCountPerSide = Math.ceil(seatCount / 2);
-                const availableWidth = width * (1 - openSpace);
-                const startX = x + (width * openSpace) / 2;
-                const spacing = seatCountPerSide > 1 ? availableWidth / (seatCountPerSide - 1) : 0;
-                const topSeats = Array.from({ length: seatCountPerSide }, (_, i) => ({
-                    cx: startX + i * spacing,
-                    cy: y - seatRadius * 1.5,
-                }));
-                const bottomSeats = Array.from({ length: seatCount - seatCountPerSide }, // in case it's odd
-                (_, i) => ({
-                    cx: startX + i * spacing,
-                    cy: y + height + seatRadius * 1.5,
-                }));
-                return (<g key={id} transform={`rotate(${rotation}, ${x}, ${y})`}>
-            {/* Square Table */}
-            <rect x={x} y={y} style={Object.assign({ cursor: mode === "view" ? "pointer" : "default" }, style)} width={width} height={height} {...commonProps} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill}/>
-            <text x={x + width / 2} y={y + height / 2} fill={fontColor !== null && fontColor !== void 0 ? fontColor : "black"} fontSize={`${fontSize !== null && fontSize !== void 0 ? fontSize : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
-              {label}
-            </text>
-            {/* Seats */}
-            <g fill="#e6b9c0" fillOpacity="0.5" stroke="#c49ba3" strokeWidth="1" key={`${id}-seats`}>
-              {[...topSeats, ...bottomSeats].map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius}/>))}
-            </g>
-          </g>);
-            }
-            case "text":
-                return (<g key={id}>
-            <rect x={x} y={y} width={width} height={height} fill="transparent" opacity={opacity} onClick={(e) => {
-                        e.stopPropagation();
-                        onClick && onClick(item);
-                    }}/>
-            <text x={x + width / 2} y={y + height / 2} textAnchor="middle" dominantBaseline="middle" fill={fontColor} fontSize={fontSize !== null && fontSize !== void 0 ? fontSize : height * 0.6} opacity={opacity} {...omit(commonProps, ["fill", "opacity"])}>
-              {text}
-            </text>
-          </g>);
-            case "image-table":
-            case "background":
-                return (<g key={id} onClick={() => {
-                        onClick && onClick(item);
-                    }}>
-            <image href={src} x={x} y={y} width={width} height={height} transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`} {...commonProps}/>
-            {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                        var _a, _b, _c, _d;
-                        return (<text key={index} x={x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} y={y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0)} fill={(_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black"} fontSize={`${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle" transform={`rotate(${rotation} ${x + width / 2} ${y + height / 2})`}>
-                  {_ === null || _ === void 0 ? void 0 : _.label}
-                </text>);
-                    })}
-          </g>);
-            default:
-                return <g key={id}/>;
-        }
-    };
-    let date = new Date();
-    const nodesRaw = !isEmpty(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.nodes) && isArray(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.nodes)
-        ? selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.nodes
-        : rectToPolygonNodes(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.x, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.y, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.width, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height);
-    const polylinePoints = [...nodesRaw, nodesRaw[0]]
-        .map((n) => `${n.x},${n.y}`)
-        .join(" ");
-    return (<g key={`${date}`}>
-      {components === null || components === void 0 ? void 0 : components.map(renderShape)}
-      {shadowShape === null || shadowShape === void 0 ? void 0 : shadowShape.map(renderShadowShape)}
-      {selectedComponent && activeTool === "select" && (<>
-          {nodesRaw.map((p1, index) => {
-                const p2 = nodesRaw[(index + 1) % nodesRaw.length]; // sisi berikutnya (wrap ke awal)
-                const side = index === 0
-                    ? "top"
-                    : index === 1
-                        ? "right"
-                        : index === 2
-                            ? "bottom"
-                            : "left";
-                return (<polyline key={index} points={`${p1.x},${p1.y} ${p2.x},${p2.y}`} fill="none" stroke="transparent" strokeWidth={5} className={clsx([
-                        {
-                            "cursor-ns-resize": side === "top" || side === "bottom",
-                            "cursor-ew-resize": side === "left" || side === "right",
-                        },
-                    ])} onMouseDown={(e) => {
-                        e.stopPropagation();
-                        if (side === "top" || side === "bottom") {
-                            onMouseDown(e, selectedComponent, side); // misal "top" / "bottom"
-                        }
-                        else if (side === "left" || side === "right") {
-                            onMouseDown(e, selectedComponent, side);
-                        }
-                    }}/>);
-            })}
-          {nodesRaw === null || nodesRaw === void 0 ? void 0 : nodesRaw.map((node, index) => {
-                const corner = index === 0
-                    ? "top-left"
-                    : index === 1
-                        ? "top-right"
-                        : index === 2
-                            ? "bottom-right"
-                            : "bottom-left";
-                return (<rect key={index} x={node.x - 10} y={node.y - 10} width={20} height={20} fill="transparent" className={clsx([
-                        {
-                            "cursor-nwse-resize": corner === "top-left" || corner === "bottom-right",
-                            "cursor-nesw-resize": corner === "top-right" || corner === "bottom-left",
-                        },
-                    ])} onMouseDown={(e) => {
-                        e.stopPropagation();
-                        onMouseDown(e, selectedComponent, corner);
-                    }}/>);
-            })}
-          <polyline points={polylinePoints} fill="none" stroke="blue" strokeWidth={1}/>
-        </>)}
-      
-    </g>);
-};
-export default Layers;

package/dist/components/lib/index.d.ts

@@ -1,8 +0,0 @@
-import LayerView from "../../features/view";
-export interface LayerViewProps {
-    componentProps: any[];
-    extraComponentProps: any[];
-}
-declare const TableEditor: ({ componentProps, extraComponentProps, }: LayerViewProps) => import("react").JSX.Element;
-export default TableEditor;
-export { LayerView };

package/dist/components/lib/index.jsx

@@ -1,33 +0,0 @@
-"use client";
-import { useEffect } from "react";
-import Board from "../../features/board";
-import SideTool from "../../features/side-tool";
-import ControlPanels from "../../features/panel";
-import LayerView from "../../features/view";
-import { useAppDispatch } from "../../hooks/use-redux";
-const TableEditor = ({ componentProps = [], extraComponentProps = [], }) => {
-    const dispatch = useAppDispatch();
-    useEffect(() => {
-        if (componentProps.length > 0) {
-            dispatch({
-                type: "board/setNewComponents",
-                payload: componentProps,
-            });
-        }
-        if (extraComponentProps.length > 0) {
-            dispatch({
-                type: "board/setNewExtraComponent",
-                payload: extraComponentProps,
-            });
-        }
-    }, [componentProps, extraComponentProps]);
-    return (<>
-      <div className="w-full h-screen flex relative">
-        <SideTool />
-        <Board />
-        <ControlPanels />
-      </div>
-    </>);
-};
-export default TableEditor;
-export { LayerView };

package/dist/components/modal-preview/index.d.ts

@@ -1,4 +0,0 @@
-declare const ModalPreview: ({ children }: {
-    children: React.ReactNode;
-}) => import("react").JSX.Element;
-export default ModalPreview;

package/dist/components/modal-preview/index.jsx

@@ -1,11 +0,0 @@
-"use client";
-import { Modal } from "antd";
-import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
-const ModalPreview = ({ children }) => {
-    const { isPreview } = useAppSelector((state) => state.tool);
-    const dispatch = useAppDispatch();
-    return (<Modal open={isPreview} onCancel={() => dispatch({ type: "tool/setTooglePreview", payload: false })} width={700} title="Preview Board" centered footer={null}>
-      <div className="flex flex-col p-4 h-[500px]">{children}</div>
-    </Modal>);
-};
-export default ModalPreview;

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

@@ -1,14 +0,0 @@
-export interface Component {
-    id: string;
-    [key: string]: any;
-}
-export interface InitialState {
-    components: Component[];
-    backgroundColor: string;
-    themeColor: string;
-    extraComponents: Component[];
-    flagChange: boolean;
-}
-export declare const addComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/addComponent">, removeComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/removeComponent">, updateComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/updateComponent">, setBackgroundColor: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/setBackgroundColor">, removeExtraComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/removeExtraComponent">;
-declare const _default: import("redux").Reducer<InitialState>;
-export default _default;

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

@@ -1,52 +0,0 @@
-import { createSlice } from "@reduxjs/toolkit";
-const initialState = {
-    components: [],
-    backgroundColor: "#FFFFFF",
-    themeColor: "#4A90E2",
-    extraComponents: [],
-    flagChange: false
-};
-const boardSlice = createSlice({
-    name: "board",
-    initialState,
-    reducers: {
-        addComponent: (state, action) => {
-            state.components.push(action.payload);
-        },
-        removeComponent: (state, action) => {
-            state.components = state.components.filter((component) => component.id !== action.payload.id);
-        },
-        removeExtraComponent: (state, action) => {
-            state.extraComponents = state.extraComponents.filter((component) => component.id !== action.payload.id);
-        },
-        updateComponent: (state, action) => {
-            const index = state.components.findIndex((component) => component.id === action.payload.id);
-            const indexExtra = state.extraComponents.findIndex((extraComponent) => extraComponent.id === action.payload.id);
-            if (index !== -1) {
-                // Update component biasa
-                state.components[index] = Object.assign(Object.assign({}, state.components[index]), action.payload);
-            }
-            else if (indexExtra !== -1) {
-                // Update extraComponent
-                state.extraComponents[indexExtra] = Object.assign(Object.assign({}, state.extraComponents[indexExtra]), action.payload);
-            }
-        },
-        setBackgroundColor: (state, action) => {
-            state.backgroundColor = action.payload;
-        },
-        setNewComponents: (state, action) => {
-            state.components = action.payload;
-        },
-        setNewExtraComponents: (state, action) => {
-            state.extraComponents = action.payload;
-        },
-        setExtraComponent: (state, action) => {
-            state.extraComponents.push(action.payload);
-        },
-        setFlagChange: (state, action) => {
-            state.flagChange = action.payload;
-        },
-    },
-});
-export const { addComponent, removeComponent, updateComponent, setBackgroundColor, removeExtraComponent } = boardSlice.actions;
-export default boardSlice.reducer;

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

@@ -1,6 +0,0 @@
-interface BoardTemplateProps {
-    onSelectComponent?: (items: any) => void;
-    mappingKey?: string;
-}
-declare const BoardTemplate: ({ onSelectComponent }: BoardTemplateProps) => import("react").JSX.Element;
-export default BoardTemplate;