seat-editor 3.0.0 → 3.0.2

package/dist/components/layer-v4/{index.js → index.jsx}

@@ -1,6 +1,4 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
 import { isEmpty, omit } from "lodash";
 import { TABLE_KEYS } from "@/utils/constant";
 import { distributeWithSpacing } from "../layer-v3";
@@ -85,23 +83,26 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                                 offsetSymbolY = size / 4;
                                 break;
                         }
-                        return (_createElement("tspan", Object.assign({}, symbol, { key: `symbol-${tagIndex}-${i}`, x: posX + offsetSymbolX, y: posY + offsetSymbolY, textAnchor: "middle", dominantBaseline: "middle", transform: `rotate(${rotate} ${posX} ${posY})` }), symbol.value));
+                        return (<tspan {...symbol} key={`symbol-${tagIndex}-${i}`} x={posX + offsetSymbolX} y={posY + offsetSymbolY} textAnchor="middle" dominantBaseline="middle" transform={`rotate(${rotate} ${posX} ${posY})`}>
+                {symbol.value}
+              </tspan>);
                     };
                     if (item.type === "icon") {
                         const iconTag = iconTags === null || iconTags === void 0 ? void 0 : iconTags.find((icon) => icon.key === item.value);
                         if (!iconTag)
                             return null;
-                        return (_createElement("g", Object.assign({}, item, { key: `icon-${tagIndex}-${i}`, transform: `translate(${posX - 10}, ${posY - 10})` }), iconTag.icon));
+                        return (<g {...item} key={`icon-${tagIndex}-${i}`} transform={`translate(${posX - 10}, ${posY - 10})`}>
+                {iconTag.icon}
+              </g>);
                     }
                     if (item.type === "text") {
-                        return (_createElement("text", Object.assign({}, item, { key: `text-${tagIndex}-${i}`, x: posX, y: posY, textAnchor: "middle", dominantBaseline: "middle", transform: `rotate(${rotate} ${posX} ${posY})` }),
-                            item.value,
-                            " ",
-                            renderSymbol(item === null || item === void 0 ? void 0 : item.symbol)));
+                        return (<text {...item} key={`text-${tagIndex}-${i}`} x={posX} y={posY} textAnchor="middle" dominantBaseline="middle" transform={`rotate(${rotate} ${posX} ${posY})`}>
+                {item.value} {renderSymbol(item === null || item === void 0 ? void 0 : item.symbol)}
+              </text>);
                     }
                     return null;
                 });
-                return _jsx("g", { children: elements }, `group-${tagIndex}`);
+                return <g key={`group-${tagIndex}`}>{elements}</g>;
             });
         };
         let commonProps = {
@@ -185,93 +186,111 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
         const transformRotate = `rotate(${rotate} ${x + width / 2} ${y + height / 2})`;
         switch (shape) {
             case "square":
-                return (_jsxs("g", { "data-id": id, style: { pointerEvents: "all" }, onContextMenu: (e) => e.preventDefault(), onDragEnter: (e) => {
+                return (<g key={id} 
+                // data-table={JSON.stringify(item)}
+                data-id={id} style={{ pointerEvents: "all" }} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
                         const group = e.currentTarget;
                         highlightGroup(group, "dragenter");
-                    }, onDragOver: (e) => {
+                    }} onDragOver={(e) => {
                         e.preventDefault(); // agar drop diterima
-                    }, onDragLeave: (e) => {
+                    }} onDragLeave={(e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, onDrop: (e) => {
+                    }} onDrop={(e) => {
                         const group = e.currentTarget;
                         // restore langsung dan reset
                         forceRestoreGroup(group, "drop");
-                    }, onPointerOver: (e) => {
+                    }} onPointerOver={(e) => {
                         // e.preventDefault(); // penting
                         const group = e.currentTarget;
                         highlightGroup(group, "pointerover");
-                    }, onPointerOut: (e) => {
+                    }} onPointerOut={(e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, onPointerUp: (e) => {
+                    }} onPointerUp={(e) => {
                         const group = e.currentTarget;
                         // restore langsung dan reset
                         forceRestoreGroup(group, "pointerup");
-                    }, onPointerDown: (e) => {
+                    }} onPointerDown={(e) => {
                         const group = e.currentTarget;
                         highlightGroup(group, "pointerdown");
-                    }, 
-                    // onPointerEnter={(e) => {
-                    //   const group = e.currentTarget as SVGGElement;
-                    //   highlightGroup(group, "pointerenter");
-                    // }}
-                    onPointerLeave: (e) => {
+                    }} 
+                // onPointerEnter={(e) => {
+                //   const group = e.currentTarget as SVGGElement;
+                //   highlightGroup(group, "pointerenter");
+                // }}
+                onPointerLeave={(e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, onMouseEnter: (e) => {
+                    }} onMouseEnter={(e) => {
                         // e.preventDefault(); // penting
                         const group = e.currentTarget;
                         highlightGroup(group, "mouseenter");
-                    }, onMouseLeave: (e) => {
+                    }} onMouseLeave={(e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, children: [_jsx("rect", Object.assign({ x: x, y: y, width: width, height: height, fill: fill, className: "blink-2", transform: transformRotate }, omit(item, TABLE_KEYS), commonProps), `${id}-rect`), renderTags(tags), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                            var _a, _b, _c, _d;
-                            return (_createElement("text", Object.assign({}, omit(commonProps, ["opacity", "stroke", "strokeWidth"]), { 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: transformRotate }, _), _ === null || _ === void 0 ? void 0 : _.label));
-                        })] }, id));
+                    }}>
+            <rect key={`${id}-rect`} x={x} y={y} width={width} height={height} fill={fill} className="blink-2" transform={transformRotate} {...omit(item, TABLE_KEYS)} {...commonProps}/>
+
+            {renderTags(tags)}
+
+            {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                        var _a, _b, _c, _d;
+                        return (<text {...omit(commonProps, ["opacity", "stroke", "strokeWidth"])} 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={transformRotate} {..._}>
+                  {_ === null || _ === void 0 ? void 0 : _.label}
+                </text>);
+                    })}
+          </g>);
             case "circle":
-                return (_jsxs("g", { style: { pointerEvents: "all" }, "data-id": id, onContextMenu: (e) => e.preventDefault(), onDragEnter: (e) => {
+                return (<g key={id} style={{ pointerEvents: "all" }} 
+                // data-table={JSON.stringify(item)}
+                data-id={id} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
                         e.preventDefault(); // penting
                         const group = e.currentTarget;
                         highlightGroup(group, "dragenter");
-                    }, onDragOver: (e) => {
+                    }} onDragOver={(e) => {
                         e.preventDefault(); // agar drop diterima
-                    }, onDragLeave: (e) => {
+                    }} onDragLeave={(e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, onDrop: (e) => {
+                    }} onDrop={(e) => {
                         e.preventDefault();
                         const group = e.currentTarget;
                         // restore langsung dan reset
                         forceRestoreGroup(group);
-                    }, onPointerOver: (e) => {
+                    }} onPointerOver={(e) => {
                         e.preventDefault(); // penting
                         const group = e.currentTarget;
                         highlightGroup(group, "pointerover");
-                    }, onPointerOut: (e) => {
+                    }} onPointerOut={(e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, onPointerUp: (e) => {
+                    }} onPointerUp={(e) => {
                         e.preventDefault();
                         const group = e.currentTarget;
                         // restore langsung dan reset
                         forceRestoreGroup(group);
-                    }, onMouseDown: (e) => {
+                    }} onMouseDown={(e) => {
                         e.preventDefault();
                         const group = e.currentTarget;
                         highlightGroup(group, "mousedown");
-                    }, onMouseEnter: (e) => {
+                    }} onMouseEnter={(e) => {
                         // e.preventDefault(); // penting
                         const group = e.currentTarget;
                         highlightGroup(group, "mouseenter");
-                    }, onMouseLeave: (e) => {
+                    }} onMouseLeave={(e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, children: [_jsx("circle", Object.assign({ cx: x + width / 2, cy: y + height / 2, r: width / 2 }, commonProps), id), renderTags(tags), 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: transformRotate, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
-                        })] }, id));
+                    }}>
+            <circle key={id} cx={x + width / 2} cy={y + height / 2} r={width / 2} {...commonProps}/>
+            {renderTags(tags)}
+            {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={transformRotate}>
+                  {_ === null || _ === void 0 ? void 0 : _.label}
+                </text>);
+                    })}
+          </g>);
             case "table-seat-circle": {
                 const seatCount = item.seatCount;
                 const openSpace = (_a = item.openSpace) !== null && _a !== void 0 ? _a : 0;
@@ -292,50 +311,76 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     const cy = centerY + (tableRadius + seatRadius) * Math.sin(angle);
                     return { cx, cy };
                 });
-                return (_jsxs("g", { style: { pointerEvents: "all" }, "data-id": id, transform: `translate(${x}, ${y})`, 
-                    // data-table={JSON.stringify(item)}
-                    // data-id={id}
-                    onContextMenu: (e) => e.preventDefault(), onDragEnter: (e) => {
+                return (<g key={id} style={{ pointerEvents: "all" }} data-id={id} transform={`translate(${x}, ${y})`} 
+                // data-table={JSON.stringify(item)}
+                // data-id={id}
+                onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
                         e.preventDefault(); // penting
                         const group = e.currentTarget;
                         highlightGroup(group, "dragenter");
-                    }, onDragOver: (e) => {
+                    }} onDragOver={(e) => {
                         e.preventDefault(); // agar drop diterima
-                    }, onDragLeave: (e) => {
+                    }} onDragLeave={(e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, onDrop: (e) => {
+                    }} onDrop={(e) => {
                         e.preventDefault();
                         const group = e.currentTarget;
                         // restore langsung dan reset
                         forceRestoreGroup(group);
-                    }, onPointerOver: (e) => {
+                    }} onPointerOver={(e) => {
                         e.preventDefault(); // penting
                         const group = e.currentTarget;
                         highlightGroup(group, "pointerover");
-                    }, onPointerOut: (e) => {
+                    }} onPointerOut={(e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, onPointerUp: (e) => {
+                    }} onPointerUp={(e) => {
                         e.preventDefault();
                         const group = e.currentTarget;
                         // restore langsung dan reset
                         forceRestoreGroup(group);
-                    }, onMouseDown: (e) => {
+                    }} onMouseDown={(e) => {
                         e.preventDefault();
                         const group = e.currentTarget;
                         highlightGroup(group, "mousedown");
-                    }, onMouseEnter: (e) => {
+                    }} onMouseEnter={(e) => {
                         // e.preventDefault(); // penting
                         const group = e.currentTarget;
                         highlightGroup(group, "mouseenter");
-                    }, onMouseLeave: (e) => {
+                    }} onMouseLeave={(e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, children: [_jsx("circle", Object.assign({ cx: centerX, cy: centerY, r: tableRadius, fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill }, commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius, fill: seatFill || "white" }, `${id}-seat-${i}`))) }), renderTags(tags), 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: transformRotate, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
-                        })] }, id));
+                    }}>
+            <circle cx={centerX} cy={centerY} r={tableRadius} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill} {...commonProps}/>
+            <g data-seat={`${id}-seats`}>
+              {seatCircles.map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius} fill={seatFill || "white"}/>))}
+            </g>
+            {renderTags(tags)}
+
+            {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={transformRotate}>
+                  {_ === null || _ === void 0 ? void 0 : _.label}
+                </text>);
+                    })}
+            {/* <g
+                      fill="#e6b9c0"
+                      stroke="#c49ba3"
+                      key={`${id}-seats`}
+                      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 openSpace = item.openSpace || 0; // from 0 to 0.9
@@ -391,55 +436,87 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     cy,
                     id: "right",
                 }));
-                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotate}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height }, commonProps, { fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill })), renderTags(tags), _jsx("g", { fill: "#e6b9c0", stroke: "#c49ba3", strokeWidth: "1", "data-seat": `${id}-seats`, transform: `translate(${-x}, ${-y})`, children: [...topSeats, ...bottomSeats, ...leftSeats, ...rightSeats].map(({ cx, cy, id }, i) => (_jsx("circle", { id: `seat-${id}`, cx: cx, cy: cy, r: r, fill: seatFill }, `${id}-seat-${i}`))) }, `${id}-seats`), _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));
+                return (<g key={id} data-id={id} transform={`translate(${x}, ${y})`}>
+            <g transform={`rotate(${rotate}, 0, 0)`}>
+              {/* Square Table */}
+              <rect width={width} height={height} {...commonProps} fill={selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill}/>
+              {renderTags(tags)}
+
+              {/* Seats */}
+              <g fill="#e6b9c0" stroke="#c49ba3" strokeWidth="1" key={`${id}-seats`} data-seat={`${id}-seats`} transform={`translate(${-x}, ${-y})`}>
+                {[...topSeats, ...bottomSeats, ...leftSeats, ...rightSeats].map(({ cx, cy, id }, i) => (<circle key={`${id}-seat-${i}`} id={`seat-${id}`} cx={cx} cy={cy} r={r} fill={seatFill}/>))}
+              </g>
+
+              <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>
+          </g>);
             }
             case "text":
-                return (_jsxs("g", { onContextMenu: (e) => e.preventDefault(), children: [_jsx("rect", { x: x, y: y, width: width, height: height, fill: "transparent", opacity: opacity }), _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));
+                return (<g key={id} onContextMenu={(e) => e.preventDefault()}>
+            <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={fontSize !== null && fontSize !== void 0 ? fontSize : height * 0.6} opacity={opacity} {...omit(commonProps, ["fill", "opacity"])}>
+              {text}
+            </text>
+          </g>);
             case "image-table":
-                return (_jsxs("g", { onContextMenu: (e) => e.preventDefault(), onDragEnter: (e) => {
+                return (<g key={id} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
                         e.preventDefault(); // penting
                         const group = e.currentTarget;
                         highlightGroup(group, "dragenter");
-                    }, onDragOver: (e) => {
+                    }} onDragOver={(e) => {
                         e.preventDefault(); // agar drop diterima
-                    }, onDragLeave: (e) => {
+                    }} onDragLeave={(e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, onDrop: (e) => {
+                    }} onDrop={(e) => {
                         e.preventDefault();
                         const group = e.currentTarget;
                         // restore langsung dan reset
                         forceRestoreGroup(group);
-                    }, onPointerOver: (e) => {
+                    }} onPointerOver={(e) => {
                         e.preventDefault(); // penting
                         const group = e.currentTarget;
                         highlightGroup(group, "pointerover");
-                    }, onPointerOut: (e) => {
+                    }} onPointerOut={(e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }, onPointerUp: (e) => {
+                    }} onPointerUp={(e) => {
                         e.preventDefault();
                         const group = e.currentTarget;
                         // restore langsung dan reset
                         forceRestoreGroup(group);
-                    }, onMouseDown: (e) => {
+                    }} onMouseDown={(e) => {
                         e.preventDefault();
                         const group = e.currentTarget;
                         highlightGroup(group, "mousedown");
-                    }, children: [_jsx("image", Object.assign({ href: src, x: x, y: y, "data-id": id, width: width, height: height, transform: transformRotate }, 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: transformRotate, children: _ === null || _ === void 0 ? void 0 : _.label }, index));
-                        })] }, id));
+                    }}>
+            <image href={src} x={x} y={y} 
+                // data-table={JSON.stringify(item)}
+                data-id={id} width={width} height={height} transform={transformRotate} {...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={transformRotate}>
+                  {_ === null || _ === void 0 ? void 0 : _.label}
+                </text>);
+                    })}
+          </g>);
             case "background":
-                return (_jsxs("g", { onContextMenu: (e) => e.preventDefault(), children: [_jsx("image", Object.assign({ href: src, x: x, y: y, width: width, height: height, transform: transformRotate }, 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: transformRotate, children: _ === null || _ === void 0 ? void 0 : _.label }, index));
-                        })] }, id));
+                return (<g key={id} onContextMenu={(e) => e.preventDefault()}>
+            <image href={src} x={x} y={y} width={width} height={height} transform={transformRotate} {...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={transformRotate}>
+                  {_ === null || _ === void 0 ? void 0 : _.label}
+                </text>);
+                    })}
+          </g>);
             default:
-                return _jsx("g", {}, id);
+                return <g key={id}/>;
         }
     };
     let date = new Date();
-    return _jsx("g", { children: components === null || components === void 0 ? void 0 : components.map(renderShape) }, `${date}`);
+    return <g key={`${date}`}>{components === null || components === void 0 ? void 0 : components.map(renderShape)}</g>;
 };
 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-runtime").JSX.Element;
+declare const TableEditor: ({ componentProps, extraComponentProps, }: LayerViewProps) => import("react").JSX.Element;
 export default TableEditor;
 export { LayerView };

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

@@ -1,5 +1,4 @@
 "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";
@@ -22,7 +21,13 @@ const TableEditor = ({ componentProps = [], extraComponentProps = [], }) => {
             });
         }
     }, [componentProps, extraComponentProps]);
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx(SideTool, {}), _jsx(Board, {}), _jsx(ControlPanels, {})] }) }));
+    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 +1,4 @@
 declare const ModalPreview: ({ children }: {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default ModalPreview;

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

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

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

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

@@ -1,5 +1,4 @@
 "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";
@@ -607,15 +606,21 @@ const BoardTemplate = ({ onSelectComponent }) => {
         }
     };
     const renderMiniMap = () => {
-        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 }) }) }) }));
+        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>);
     };
     const handelZoomIn = () => {
         var _a;
@@ -641,26 +646,80 @@ const BoardTemplate = ({ onSelectComponent }) => {
     //     moveComponent &&
     //     isTouching.current &&
     //     !resizeDirection
-    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}`)))] }))] }) })] })] })] }));
+    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>
+    </>);
 };
 export default BoardTemplate;