seat-editor 3.0.0 → 3.0.2

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

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

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

@@ -1,6 +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 React, { useCallback, useEffect, useRef, useState } from "react";
 import { TransformWrapper, TransformComponent, MiniMap, } from "react-zoom-pan-pinch";
 import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
 import Layers from "../../components/layer-v2";
@@ -696,15 +695,21 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
         }
     };
     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;
@@ -775,33 +780,90 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
             setNodes(newNodes);
         }
     };
-    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 }), _jsx(Button, { onClick: addNode, children: "Add Node" }), _jsx(Button, { onClick: removeNode, children: "Remove Node" })] }) }), _jsxs(TransformWrapper, { ref: transformRef, panning: { disabled: ["node", "select"].includes(activeTool) }, 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}
-                                    // onMouseUp={handleEnd}
-                                    onTouchMove: handleMouseMove, onTouchEnd: handleMouseUp, 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",
-                                        touchAction: "none",
-                                    }, children: [_jsx(Layers, { shadowShape: shadowShape, components: [...extraComponentsState, ...componentsState], style: {
-                                                cursor: getCursorStyle(),
-                                            }, 
-                                            // onClick={handleSelectComponent}
-                                            onMouseDown: handleMouseDown, 
-                                            // onMouseUp={handleMouseUp}
-                                            // onBlur={handleUnSelectComponent}
-                                            selectedComponent: selectedComponent, activeTool: activeTool, onTouchStart: handleMouseDown }), 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}/>
+            <Button onClick={addNode}>Add Node</Button>
+            <Button onClick={removeNode}>Remove Node</Button>
+          </div>
+        </div>
+        <TransformWrapper ref={transformRef} panning={{ disabled: ["node", "select"].includes(activeTool) }} 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}
+    // onMouseUp={handleEnd}
+    onTouchMove={handleMouseMove} onTouchEnd={handleMouseUp} 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",
+            touchAction: "none",
+        }}>
+              <Layers shadowShape={shadowShape} components={[...extraComponentsState, ...componentsState]} style={{
+            cursor: getCursorStyle(),
+        }} 
+    // onClick={handleSelectComponent}
+    onMouseDown={handleMouseDown} 
+    // onMouseUp={handleMouseUp}
+    // onBlur={handleUnSelectComponent}
+    selectedComponent={selectedComponent} activeTool={activeTool} onTouchStart={handleMouseDown}/>
+      
+              {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;

package/dist/features/board-v3/index copy.d.ts

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

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

@@ -1,6 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
 import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
 import Layers from "../../components/layer-v3";
@@ -1551,54 +1550,133 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
             //lin helper from start to move
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(ModalPreview, { children: _jsx(LayerView, { statusKey: "status" }) }), touch && _jsx(Button, { onClick: () => setTouch(false), children: "Stop Touch" }), _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: [
-                                "node",
-                                "select",
-                                "square",
-                                "circle",
-                                "table-seat-circle",
-                            ].includes(activeTool),
-                        }, centerZoomedOut: true, 
-                        // onTransformed={handleTransformed}
-                        minScale: 0.1, maxScale: 1000, initialScale: scale, pinch: { step: 1 }, wheel: { disabled: true }, smooth: true, doubleClick: { step: 1, disabled: activeTool === "select" }, disablePadding: true, centerOnInit: true, children: [_jsx("div", { className: "absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10" }), _jsxs(TransformComponent, { wrapperStyle: {
-                                    width: "100%",
-                                    height: "100%",
-                                }, contentStyle: { width: boardSize.width, height: boardSize.height }, children: [isLoading && (_jsx("div", { className: "absolute z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", children: "Loading..." })), _jsxs("svg", { id: "workspace", ref: svgRef, width: boardSize.width, height: boardSize.height, viewBox: `${minCoords.x} ${minCoords.y} ${boardSize.width} ${boardSize.height}`, 
-                                        // viewBox={`0 0 ${widthBoard} ${heightBoard}`}
-                                        // className="h-screen"
-                                        // onMouseUp={handleMouseUp}
-                                        // onPointerMove={handleMouseMove}
-                                        onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, 
-                                        // onMouseEnter={handleMouseEnter}
-                                        // onMouseUp={handleEnd}
-                                        // onTouchMove={handleMouseMove}
-                                        // onTouchEnd={handleMouseUp}
-                                        // onClick={(e) => {
-                                        //   e.stopPropagation();
-                                        //   handleMouseClick(e);
-                                        // }}
-                                        // onMouseLeave={handleMouseLeave}
-                                        xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
-                                            // background: backgroundColor,
-                                            background: "black",
-                                            display: "block",
-                                            cursor: activeTool === "ruler" ? "crosshair" : "auto",
-                                            touchAction: "none",
-                                            pointerEvents: "all",
-                                            userSelect: "none",
-                                        }, children: [_jsx(Layers, { shadowShape: shadowShape, components: [
-                                                    ...extraComponentsState,
-                                                    ...componentsState,
-                                                    polygonElementRef === null || polygonElementRef === void 0 ? void 0 : polygonElementRef.current,
-                                                ], style: {
-                                                    cursor: getCursorStyle(),
-                                                }, 
-                                                // onClick={handleSelectComponent}
-                                                // onMouseDown={handleMouseDown}
-                                                // onMouseUp={handleMouseUp}
-                                                // onBlur={handleUnSelectComponent}
-                                                selectedComponent: selectedComponent, selectionLines: selectedLines, activeTool: activeTool }), activeTool === "polygon" && (_jsx("polyline", { id: "polyline-helper", stroke: "white", fill: "transparent", strokeWidth: 2 })), 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 * scale) }, (_, i) => (_jsx("line", { x1: i * 10 * scale, y1: 0, x2: i * 10 * scale, y2: heightBoard }, `v-${i}`))), Array.from({ length: heightBoard / (10 * scale) }, (_, i) => (_jsx("line", { x1: 0, y1: i * 10 * scale, x2: widthBoard, y2: i * 10 * scale }, `h-${i}`)))] }))] })] })] })] })] }));
+    return (<>
+      <ModalPreview>
+        <LayerView statusKey="status"/>
+      </ModalPreview>
+      {touch && <Button onClick={() => setTouch(false)}>Stop Touch</Button>}
+      <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: [
+                "node",
+                "select",
+                "square",
+                "circle",
+                "table-seat-circle",
+            ].includes(activeTool),
+        }} centerZoomedOut={true} 
+    // onTransformed={handleTransformed}
+    minScale={0.1} // sangat kecil = bisa zoom out jauh
+     maxScale={1000} initialScale={scale} pinch={{ step: 1 }} wheel={{ disabled: true }} smooth={true} doubleClick={{ step: 1, disabled: activeTool === "select" }} disablePadding centerOnInit>
+          {/* {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%",
+        }} contentStyle={{ width: boardSize.width, height: boardSize.height }}>
+            {isLoading && (<div className="absolute z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+                Loading...
+              </div>)}
+            <svg id="workspace" ref={svgRef} width={boardSize.width} height={boardSize.height} viewBox={`${minCoords.x} ${minCoords.y} ${boardSize.width} ${boardSize.height}`} 
+    // viewBox={`0 0 ${widthBoard} ${heightBoard}`}
+    // className="h-screen"
+    // onMouseUp={handleMouseUp}
+    // onPointerMove={handleMouseMove}
+    onPointerDown={handlePointerDown} onPointerMove={handlePointerMove} 
+    // onMouseEnter={handleMouseEnter}
+    // onMouseUp={handleEnd}
+    // onTouchMove={handleMouseMove}
+    // onTouchEnd={handleMouseUp}
+    // onClick={(e) => {
+    //   e.stopPropagation();
+    //   handleMouseClick(e);
+    // }}
+    // onMouseLeave={handleMouseLeave}
+    xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
+            // background: backgroundColor,
+            background: "black",
+            display: "block",
+            cursor: activeTool === "ruler" ? "crosshair" : "auto",
+            touchAction: "none",
+            pointerEvents: "all",
+            userSelect: "none",
+        }}>
+              <Layers shadowShape={shadowShape} components={[
+            ...extraComponentsState,
+            ...componentsState,
+            polygonElementRef === null || polygonElementRef === void 0 ? void 0 : polygonElementRef.current,
+        ]} style={{
+            cursor: getCursorStyle(),
+        }} 
+    // onClick={handleSelectComponent}
+    // onMouseDown={handleMouseDown}
+    // onMouseUp={handleMouseUp}
+    // onBlur={handleUnSelectComponent}
+    selectedComponent={selectedComponent} selectionLines={selectedLines} activeTool={activeTool}/>
+              {/* <polygon
+          points={nodes.map((n) => `${n.x},${n.y}`).join(" ")}
+          fill="transparent"
+          stroke="blue"
+        /> */}
+              {/* Nodes */}
+              {/* {nodes.map((node, index) => (
+          <circle
+            key={index}
+            cx={node.x}
+            cy={node.y}
+            r={10}
+            fill="red"
+            onMouseDown={onTouchStartLine}
+            onTouchStart={onTouchStartLine}
+            onTouchEnd={onTouchEndLine}
+          />
+        ))} */}
+              {activeTool === "polygon" && (<polyline id="polyline-helper" stroke="white" fill="transparent" strokeWidth={2}/>)}
+              {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 * scale) }, (_, i) => (<line key={`v-${i}`} x1={i * 10 * scale} y1={0} x2={i * 10 * scale} y2={heightBoard}/>))}
+
+                  {/* Horizontal lines */}
+                  {Array.from({ length: heightBoard / (10 * scale) }, (_, i) => (<line key={`h-${i}`} x1={0} y1={i * 10 * scale} x2={widthBoard} y2={i * 10 * scale}/>))}
+                </g>)}
+            </svg>
+          </TransformComponent>
+        </TransformWrapper>
+      </div>
+    </>);
 };
 export default BoardTemplate;
 function getGlobalBBox(svg, el) {

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

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

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

@@ -1,6 +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 React, { useCallback, useEffect, useRef, useState } from "react";
 import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
 import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
 import Layers from "../../components/layer-v3";
@@ -1513,35 +1512,114 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
             //lin helper from start to move
         }
     };
-    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 })] }) }), _jsx(TransformWrapper, { ref: transformRef, 
-                        // limitToBounds={true}
-                        panning: {
-                            disabled: [
-                                "node",
-                                "select",
-                                "square",
-                                "circle",
-                                "table-seat-circle",
-                            ].includes(activeTool),
-                        }, 
-                        // centerZoomedOut={true}
-                        // onTransformed={handleTransformed}
-                        minScale: 0.1, maxScale: 1000, initialScale: scale, pinch: { step: 1 }, wheel: { disabled: true }, smooth: true, doubleClick: { step: 1, disabled: activeTool === "select" }, disablePadding: true, centerOnInit: true, children: _jsxs(TransformComponent, { wrapperStyle: {
-                                width: "100%",
-                                height: "100%",
-                            }, contentStyle: { width: boardSize.width, height: boardSize.height }, children: [isLoading && (_jsx("div", { className: "absolute z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", children: "Loading..." })), _jsxs("svg", { id: "workspace", ref: svgRef, width: boardSize.width, height: boardSize.height, viewBox: `${minCoords.x} ${minCoords.y} ${boardSize.width} ${boardSize.height}`, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
-                                        background: backgroundColor,
-                                        display: "block",
-                                        cursor: activeTool === "ruler" ? "crosshair" : "auto",
-                                        touchAction: "none",
-                                        pointerEvents: "all",
-                                        userSelect: "none",
-                                    }, children: [_jsx(Layers, { shadowShape: shadowShape, components: [
-                                                ...extraComponentsState,
-                                                ...componentsState,
-                                                polygonElementRef === null || polygonElementRef === void 0 ? void 0 : polygonElementRef.current,
-                                            ], style: {
-                                                cursor: getCursorStyle(),
-                                            }, selectedComponent: selectedComponent, selectionLines: selectedLines, activeTool: activeTool }), activeTool === "polygon" && (_jsx("polyline", { id: "polyline-helper", stroke: "#4a90e2", fill: "transparent", strokeWidth: 2 })), 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 * scale) }, (_, i) => (_jsx("line", { x1: i * 10 * scale, y1: 0, x2: i * 10 * scale, y2: heightBoard }, `v-${i}`))), Array.from({ length: heightBoard / (10 * scale) }, (_, i) => (_jsx("line", { x1: 0, y1: i * 10 * scale, x2: widthBoard, y2: i * 10 * scale }, `h-${i}`)))] }))] })] }) })] })] }));
+    return (<>
+      <ModalPreview>
+        <LayerView statusKey="status"/>
+      </ModalPreview>
+      {/* {touch && <Button onClick={() => setTouch(false)}>Stop Touch</Button>} */}
+      <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} 
+    // limitToBounds={true}
+    panning={{
+            disabled: [
+                "node",
+                "select",
+                "square",
+                "circle",
+                "table-seat-circle",
+            ].includes(activeTool),
+        }} 
+    // centerZoomedOut={true}
+    // onTransformed={handleTransformed}
+    minScale={0.1} // sangat kecil = bisa zoom out jauh
+     maxScale={1000} initialScale={scale} pinch={{ step: 1 }} wheel={{ disabled: true }} smooth={true} doubleClick={{ step: 1, disabled: activeTool === "select" }} disablePadding centerOnInit>
+          {/* {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%",
+        }} contentStyle={{ width: boardSize.width, height: boardSize.height }}>
+            {isLoading && (<div className="absolute z-20 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+                Loading...
+              </div>)}
+            <svg id="workspace" ref={svgRef} width={boardSize.width} height={boardSize.height} viewBox={`${minCoords.x} ${minCoords.y} ${boardSize.width} ${boardSize.height}`} onPointerDown={handlePointerDown} onPointerMove={handlePointerMove} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
+            background: backgroundColor,
+            display: "block",
+            cursor: activeTool === "ruler" ? "crosshair" : "auto",
+            touchAction: "none",
+            pointerEvents: "all",
+            userSelect: "none",
+        }}>
+              <Layers shadowShape={shadowShape} components={[
+            ...extraComponentsState,
+            ...componentsState,
+            polygonElementRef === null || polygonElementRef === void 0 ? void 0 : polygonElementRef.current,
+        ]} style={{
+            cursor: getCursorStyle(),
+        }} selectedComponent={selectedComponent} selectionLines={selectedLines} activeTool={activeTool}/>
+              {/* <polygon
+          points={nodes.map((n) => `${n.x},${n.y}`).join(" ")}
+          fill="transparent"
+          stroke="blue"
+        /> */}
+              {/* Nodes */}
+              {/* {nodes.map((node, index) => (
+          <circle
+            key={index}
+            cx={node.x}
+            cy={node.y}
+            r={10}
+            fill="red"
+            onMouseDown={onTouchStartLine}
+            onTouchStart={onTouchStartLine}
+            onTouchEnd={onTouchEndLine}
+          />
+        ))} */}
+              {activeTool === "polygon" && (<polyline id="polyline-helper" stroke="#4a90e2" fill="transparent" strokeWidth={2}/>)}
+              {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 * scale) }, (_, i) => (<line key={`v-${i}`} x1={i * 10 * scale} y1={0} x2={i * 10 * scale} y2={heightBoard}/>))}
+
+                  {/* Horizontal lines */}
+                  {Array.from({ length: heightBoard / (10 * scale) }, (_, i) => (<line key={`h-${i}`} x1={0} y1={i * 10 * scale} x2={widthBoard} y2={i * 10 * scale}/>))}
+                </g>)}
+            </svg>
+          </TransformComponent>
+        </TransformWrapper>
+      </div>
+    </>);
 };
 export default BoardTemplate;

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

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

package/dist/features/navbar/index.jsx

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

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

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

package/dist/features/package/{index.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, useState } from "react";
 import Board from "../board-v3";
 import SideTool from "../side-tool";
@@ -95,10 +94,21 @@ const TableEditor = (props) => {
             dispatch({ type: "board/setFlagChange", payload: true });
         }
     }, [componentProps, extraComponentProps, props === null || props === void 0 ? void 0 : props.defaultBackground]);
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full h-screen flex relative", children: [_jsx("div", { className: "w-full h-full flex relative", style: {
-                        display: !viewOnly ? "none" : "flex",
-                    }, children: _jsx(LayerView, { statusKey: "status" }) }), _jsxs("div", { className: "w-full h-full flex relative", style: {
-                        display: viewOnly ? "none" : "flex",
-                    }, children: [_jsx(SideTool, { dragOnly: dragOnly, deleteAutorized: deleteAutorized }), _jsx(Board, { onSelectComponent: props.onSelectComponent, viewOnly: viewOnly }), _jsx(ControlPanels, { action: props.action, responseMapping: props.responseMapping })] })] }) }));
+    return (<>
+      <div className="w-full h-screen flex relative">
+        <div className="w-full h-full flex relative" style={{
+            display: !viewOnly ? "none" : "flex",
+        }}>
+          <LayerView statusKey="status"/>
+        </div>
+        <div className="w-full h-full flex relative" style={{
+            display: viewOnly ? "none" : "flex",
+        }}>
+          <SideTool dragOnly={dragOnly} deleteAutorized={deleteAutorized}/>
+          <Board onSelectComponent={props.onSelectComponent} viewOnly={viewOnly}/>
+          <ControlPanels action={props.action} responseMapping={props.responseMapping}/>
+        </div>
+      </div>
+    </>);
 };
 export default TableEditor;

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

@@ -7,5 +7,5 @@ interface ControlPanelsProps {
         src: string;
     };
 }
-declare const ControlPanels: (props: ControlPanelsProps) => import("react/jsx-runtime").JSX.Element;
+declare const ControlPanels: (props: ControlPanelsProps) => import("react").JSX.Element;
 export default ControlPanels;