seat-editor 3.0.2 → 3.0.3

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;

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

@@ -1,5 +1,6 @@
 "use client";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+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";
 import Layers from "../../components/layer-v2";
@@ -695,21 +696,15 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
         }
     };
     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;
@@ -780,90 +775,33 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
             setNodes(newNodes);
         }
     };
-    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>
-    </>);
+    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}`)))] }))] }) })] })] })] }));
 };
 export default BoardTemplate;

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

@@ -1,10 +1,9 @@
-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;
 export declare function getTranslate(el: any): {
     x: number;

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

@@ -1,5 +1,6 @@
 "use client";
-import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { 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";
@@ -1550,133 +1551,54 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
             //lin helper from start to move
         }
     };
-    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>
-    </>);
+    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}`)))] }))] })] })] })] })] }));
 };
 export default BoardTemplate;
 function getGlobalBBox(svg, el) {

package/dist/features/board-v3/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;

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

@@ -1,5 +1,6 @@
 "use client";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { 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";
@@ -1512,114 +1513,35 @@ const BoardTemplate = ({ onSelectComponent, viewOnly }) => {
             //lin helper from start to move
         }
     };
-    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>
-    </>);
+    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}`)))] }))] })] }) })] })] }));
 };
 export default BoardTemplate;

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

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

package/dist/features/navbar/index.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Navbar = () => {
+    return _jsx("div", { children: "Navbar" });
+};
+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.Element;
+declare const TableEditor: (props: TableEditorProps) => import("react/jsx-runtime").JSX.Element;
 export default TableEditor;

package/dist/features/package/{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, useState } from "react";
 import Board from "../board-v3";
 import SideTool from "../side-tool";
@@ -94,21 +95,10 @@ const TableEditor = (props) => {
             dispatch({ type: "board/setFlagChange", payload: true });
         }
     }, [componentProps, extraComponentProps, props === null || props === void 0 ? void 0 : props.defaultBackground]);
-    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>
-    </>);
+    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 })] })] }) }));
 };
 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.Element;
+declare const ControlPanels: (props: ControlPanelsProps) => import("react/jsx-runtime").JSX.Element;
 export default ControlPanels;