seat-editor 2.1.0 → 2.1.2

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

@@ -0,0 +1,337 @@
+"use client";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 _jsx("polygon", Object.assign({ points: pointsFormat }, commonProps), id);
+            case "circle":
+                return (_jsx("circle", Object.assign({ cx: x + width / 2, cy: y + height / 2, r: width / 2 }, commonProps), id));
+            case "diamond":
+                return (_jsx("rect", Object.assign({ x: x, y: y, width: width, height: height, transform: `rotate(${rotation}, ${x}, ${y})` }, commonProps), id));
+            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 (_jsxs("g", { transform: `rotate(${rotation} ${centerX} ${centerY})`, children: [_jsx("circle", Object.assign({ 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 })), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                            var _a, _b, _c, _d;
+                            return (_jsx("text", { 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);
+                                }, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
+                        }), _jsx("g", { fill: "#e6b9c0", opacity: id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity, stroke: "#c49ba3", strokeWidth: "1", children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius, fill: seatFill }, `${id}-seat-${i}`))) })] }, id));
+            }
+            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 (_jsxs("g", { children: [_jsx("rect", Object.assign({ x: x, y: y, width: width, height: height }, commonProps)), _jsx("g", { fill: "#e6b9c0", fillOpacity: "0.5", stroke: "#c49ba3", strokeWidth: "1", children: [...topSeats, ...bottomSeats].map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius }, `${id}-seat-${i}`))) }, `${id}-seats`)] }, id));
+            }
+            case "text":
+                return (_jsxs("g", { onClick: () => {
+                        onClick && onClick(item);
+                    }, children: [_jsx("rect", { x: x, y: y, width: width, height: height, fill: "transparent", opacity: opacity }), _jsx("text", { x: x + width / 2, y: y + height / 2, textAnchor: "middle", dominantBaseline: "middle", fill: fontColor, fontSize: height * 0.6, opacity: opacity, children: text })] }, id));
+            case "ruler":
+                return (_jsxs("g", { children: [_jsx("rect", { x: x - (window.innerWidth * 3) / 2, y: y, width: window.innerWidth * 3, height: 1, fill: "black" }), _jsx("rect", { x: x, y: y - (window.innerHeight * 3) / 2, width: 1, height: window.innerHeight * 3, fill: "black" })] }, id));
+            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 (_jsx("g", { children: _createElement("polygon", Object.assign({}, commonProps, { key: id, points: pointsFormat })) }, id));
+            // 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 (_jsxs("g", { children: [_jsx("circle", Object.assign({ 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")), id), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                            var _a, _b, _c, _d;
+                            return (_jsx("text", { 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);
+                                }, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
+                        })] }, id));
+            case "diamond":
+                return (_jsxs("g", { children: [_jsx("rect", Object.assign({ 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 }), id), _jsx("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", children: label })] }, id));
+            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 (_jsxs("g", { transform: `rotate(${rotation} ${centerX} ${centerY})`, children: [_jsx("circle", Object.assign({ 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 })), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                            var _a, _b, _c, _d;
+                            return (_jsx("text", { 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);
+                                }, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
+                        }), _jsx("g", { fill: "#e6b9c0", opacity: id === (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) ? 0.5 : opacity, stroke: "#c49ba3", strokeWidth: "1", children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius, fill: seatFill }, `${id}-seat-${i}`))) })] }, id));
+            }
+            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 (_jsxs("g", { transform: `rotate(${rotation}, ${x}, ${y})`, children: [_jsx("rect", Object.assign({ 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 })), _jsx("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", children: label }), _jsx("g", { fill: "#e6b9c0", fillOpacity: "0.5", stroke: "#c49ba3", strokeWidth: "1", children: [...topSeats, ...bottomSeats].map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius }, `${id}-seat-${i}`))) }, `${id}-seats`)] }, id));
+            }
+            case "text":
+                return (_jsxs("g", { children: [_jsx("rect", { x: x, y: y, width: width, height: height, fill: "transparent", opacity: opacity, onClick: (e) => {
+                                e.stopPropagation();
+                                onClick && onClick(item);
+                            } }), _jsx("text", Object.assign({ 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"]), { children: text }))] }, id));
+            case "image-table":
+            case "background":
+                return (_jsxs("g", { onClick: () => {
+                        onClick && onClick(item);
+                    }, children: [_jsx("image", Object.assign({ 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 (_jsx("text", { 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})`, children: _ === null || _ === void 0 ? void 0 : _.label }, index));
+                        })] }, id));
+            default:
+                return _jsx("g", {}, 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 (_jsxs("g", { children: [components === null || components === void 0 ? void 0 : components.map(renderShape), shadowShape === null || shadowShape === void 0 ? void 0 : shadowShape.map(renderShadowShape), selectedComponent && activeTool === "select" && (_jsxs(_Fragment, { children: [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 (_jsx("polyline", { 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);
+                                }
+                            } }, index));
+                    }), 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 (_jsx("rect", { 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);
+                            } }, index));
+                    }), _jsx("polyline", { points: polylinePoints, fill: "none", stroke: "blue", strokeWidth: 1 })] }))] }, `${date}`));
+};
+export default Layers;

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

@@ -3,6 +3,6 @@ export interface LayerViewProps {
     componentProps: any[];
     extraComponentProps: any[];
 }
-declare const TableEditor: ({ componentProps, extraComponentProps, }: LayerViewProps) => import("react").JSX.Element;
+declare const TableEditor: ({ componentProps, extraComponentProps, }: LayerViewProps) => import("react/jsx-runtime").JSX.Element;
 export default TableEditor;
 export { LayerView };

package/dist/components/lib/{index.jsx → index.js}

@@ -1,4 +1,5 @@
 "use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect } from "react";
 import Board from "../../features/board";
 import SideTool from "../../features/side-tool";
@@ -21,13 +22,7 @@ const TableEditor = ({ componentProps = [], extraComponentProps = [], }) => {
             });
         }
     }, [componentProps, extraComponentProps]);
-    return (<>
-      <div className="w-full h-screen flex relative">
-        <SideTool />
-        <Board />
-        <ControlPanels />
-      </div>
-    </>);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx(SideTool, {}), _jsx(Board, {}), _jsx(ControlPanels, {})] }) }));
 };
 export default TableEditor;
 export { LayerView };

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

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

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

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

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

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

package/dist/features/board/{index.jsx → index.js}

@@ -1,4 +1,5 @@
 "use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { TransformWrapper, TransformComponent, MiniMap, } from "react-zoom-pan-pinch";
 import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
@@ -606,21 +607,15 @@ const BoardTemplate = ({ onSelectComponent }) => {
         }
     };
     const renderMiniMap = () => {
-        return (<MiniMap width={250} height={250}>
-        <div className="w-full h-full">
-          <svg id="workspace" width="100%" height="100%" viewBox={`0 0 ${widthBoard} ${heightBoard}`} className="h-screen w-full" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
-                background: "#f5f5f5",
-                display: "block",
-            }}>
-            <Layers shadowShape={shadowShape} components={[...extraComponentsState, ...componentsState]} activeTool={activeTool} 
-        // onClick={handleSelectComponent}
-        // onMouseDown={handleMouseDown}
-        // onMouseUp={handleMouseUp}
-        // onBlur={handleUnSelectComponent}
-        selectedComponent={selectedComponent}/>
-          </svg>
-        </div>
-      </MiniMap>);
+        return (_jsx(MiniMap, { width: 250, height: 250, children: _jsx("div", { className: "w-full h-full", children: _jsx("svg", { id: "workspace", width: "100%", height: "100%", viewBox: `0 0 ${widthBoard} ${heightBoard}`, className: "h-screen w-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
+                        background: "#f5f5f5",
+                        display: "block",
+                    }, children: _jsx(Layers, { shadowShape: shadowShape, components: [...extraComponentsState, ...componentsState], activeTool: activeTool, 
+                        // onClick={handleSelectComponent}
+                        // onMouseDown={handleMouseDown}
+                        // onMouseUp={handleMouseUp}
+                        // onBlur={handleUnSelectComponent}
+                        selectedComponent: selectedComponent }) }) }) }));
     };
     const handelZoomIn = () => {
         var _a;
@@ -646,80 +641,26 @@ const BoardTemplate = ({ onSelectComponent }) => {
     //     moveComponent &&
     //     isTouching.current &&
     //     !resizeDirection
-    return (<>
-      <ModalPreview>
-        <LayerView statusKey="status"/>
-      </ModalPreview>
-      <div className="relative w-full h-screen flex-1 overflow-hidden" ref={containerRef}>
-        <div className="absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10">
-          <div className="flex gap-2">
-            <Button icon={<ZoomIn />} onClick={handelZoomIn}/>
-            <Button icon={<ZoomOut />} onClick={handleZoomOut}/>
-          </div>
-        </div>
-        <TransformWrapper ref={transformRef} panning={{ disabled: activeTool === "select" }} centerZoomedOut={true} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} // sangat kecil = bisa zoom out jauh
-     maxScale={1000} initialScale={1} pinch={{ step: 1 }} smooth={true} doubleClick={{ step: 1, disabled: activeTool === "select" }} disablePadding>
-          {scale > 1 && (<div className="absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10">
-              {renderMiniMap()}
-            </div>)}
-          <TransformComponent wrapperStyle={{
-            width: "100%",
-            height: "100%",
-            overflow: "hidden",
-        }} contentStyle={{
-            width: "100%",
-            height: "100%",
-        }}>
-            <svg id="workspace" ref={svgRef} width="100%" height="100%" viewBox={`0 0 ${widthBoard} ${heightBoard}`} className="h-screen" onMouseUp={handleMouseUp} onMouseMove={handleMouseMove} onMouseEnter={handleMouseEnter} onClick={(e) => {
-            e.stopPropagation();
-            handleMouseClick(e);
-        }} onMouseLeave={handleMouseLeave} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
-            background: backgroundColor,
-            display: "block",
-            cursor: activeTool === "ruler" ? "crosshair" : "auto",
-        }}>
-              <Layers shadowShape={shadowShape} components={[...extraComponentsState, ...componentsState]} style={{
-            cursor: getCursorStyle(),
-        }} 
-    // onClick={handleSelectComponent}
-    onMouseDown={handleMouseDown} 
-    // onMouseUp={handleMouseUp}
-    onBlur={handleUnSelectComponent} selectedComponent={selectedComponent} activeTool={activeTool} onTouchStart={(e, item, direction) => handleTouchStart(e, item, direction)} onTouchMove={(e) => handleTouchMove(e)} onTouchEnd={handleTouchEnd}/>
-              {activeTool === "ruler" && (<>
-                  <g id="horizontal-ruler">
-                    <rect x="0" y="0" width={window.innerWidth} height="30" fill="#e0e0e0"/>
-                    <g stroke="#888" font-size="10" text-anchor="middle">
-                      {Array.from({ length: window.innerWidth / 50 }, (_, i) => (<g key={i}>
-                            <line x1={i * 50} y1="0" x2={i * 50} y2="10"/>
-                            <text x={i * 50} y="15">
-                              {i * 50}
-                            </text>
-                          </g>))}
-                    </g>
-                  </g>
-                  <g id="vertical-ruler">
-                    <rect x="0" y="0" width="30" height={window.innerHeight} fill="#e0e0e0"/>
-                    <g stroke="#888" font-size="10" text-anchor="middle">
-                      {Array.from({ length: window.innerHeight / 10 }, (_, i) => (<g key={i}>
-                            <line x1="0" y1={i * 50} x2="10" y2={i * 50}/>
-                            <text x="15" y={i * 50}>
-                              {i * 50}
-                            </text>
-                          </g>))}
-                    </g>
-                  </g>
-                </>)}
-              {grid && (<g stroke="#ddd" strokeWidth={0.5}>
-                {/* Vertical lines */}
-                {Array.from({ length: widthBoard / 10 }, (_, i) => (<line key={`v-${i}`} x1={i * 10} y1={0} x2={i * 10} y2={heightBoard}/>))}
-            
-                {/* Horizontal lines */}
-                {Array.from({ length: heightBoard / 10 }, (_, i) => (<line key={`h-${i}`} x1={0} y1={i * 10} x2={widthBoard} y2={i * 10}/>))}
-              </g>)}
-            </svg>
-          </TransformComponent>
-        </TransformWrapper>
-      </div>
-    </>);
+    return (_jsxs(_Fragment, { children: [_jsx(ModalPreview, { children: _jsx(LayerView, { statusKey: "status" }) }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn }), _jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut })] }) }), _jsxs(TransformWrapper, { ref: transformRef, panning: { disabled: activeTool === "select" }, centerZoomedOut: true, onTransformed: ({ state: { scale } }) => setScale(scale), minScale: 1, maxScale: 1000, initialScale: 1, pinch: { step: 1 }, smooth: true, doubleClick: { step: 1, disabled: activeTool === "select" }, disablePadding: true, children: [scale > 1 && (_jsx("div", { className: "absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10", children: renderMiniMap() })), _jsx(TransformComponent, { wrapperStyle: {
+                                    width: "100%",
+                                    height: "100%",
+                                    overflow: "hidden",
+                                }, contentStyle: {
+                                    width: "100%",
+                                    height: "100%",
+                                }, children: _jsxs("svg", { id: "workspace", ref: svgRef, width: "100%", height: "100%", viewBox: `0 0 ${widthBoard} ${heightBoard}`, className: "h-screen", onMouseUp: handleMouseUp, onMouseMove: handleMouseMove, onMouseEnter: handleMouseEnter, onClick: (e) => {
+                                        e.stopPropagation();
+                                        handleMouseClick(e);
+                                    }, onMouseLeave: handleMouseLeave, xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
+                                        background: backgroundColor,
+                                        display: "block",
+                                        cursor: activeTool === "ruler" ? "crosshair" : "auto",
+                                    }, children: [_jsx(Layers, { shadowShape: shadowShape, components: [...extraComponentsState, ...componentsState], style: {
+                                                cursor: getCursorStyle(),
+                                            }, 
+                                            // onClick={handleSelectComponent}
+                                            onMouseDown: handleMouseDown, 
+                                            // onMouseUp={handleMouseUp}
+                                            onBlur: handleUnSelectComponent, selectedComponent: selectedComponent, activeTool: activeTool, onTouchStart: (e, item, direction) => handleTouchStart(e, item, direction), onTouchMove: (e) => handleTouchMove(e), onTouchEnd: handleTouchEnd }), activeTool === "ruler" && (_jsxs(_Fragment, { children: [_jsxs("g", { id: "horizontal-ruler", children: [_jsx("rect", { x: "0", y: "0", width: window.innerWidth, height: "30", fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerWidth / 50 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: i * 50, y1: "0", x2: i * 50, y2: "10" }), _jsx("text", { x: i * 50, y: "15", children: i * 50 })] }, i))) })] }), _jsxs("g", { id: "vertical-ruler", children: [_jsx("rect", { x: "0", y: "0", width: "30", height: window.innerHeight, fill: "#e0e0e0" }), _jsx("g", { stroke: "#888", "font-size": "10", "text-anchor": "middle", children: Array.from({ length: window.innerHeight / 10 }, (_, i) => (_jsxs("g", { children: [_jsx("line", { x1: "0", y1: i * 50, x2: "10", y2: i * 50 }), _jsx("text", { x: "15", y: i * 50, children: i * 50 })] }, i))) })] })] })), grid && (_jsxs("g", { stroke: "#ddd", strokeWidth: 0.5, children: [Array.from({ length: widthBoard / 10 }, (_, i) => (_jsx("line", { x1: i * 10, y1: 0, x2: i * 10, y2: heightBoard }, `v-${i}`))), Array.from({ length: heightBoard / 10 }, (_, i) => (_jsx("line", { x1: 0, y1: i * 10, x2: widthBoard, y2: i * 10 }, `h-${i}`)))] }))] }) })] })] })] }));
 };
 export default BoardTemplate;

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

@@ -1,8 +1,7 @@
-import React from "react";
 interface BoardTemplateProps {
     onSelectComponent?: (items: any) => void;
     mappingKey?: string;
     viewOnly?: boolean;
 }
-declare const BoardTemplate: ({ onSelectComponent, viewOnly }: BoardTemplateProps) => React.JSX.Element;
+declare const BoardTemplate: ({ onSelectComponent, viewOnly }: BoardTemplateProps) => import("react/jsx-runtime").JSX.Element;
 export default BoardTemplate;