seat-editor 1.6.11 → 1.6.13

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

@@ -1,8 +1,9 @@
 "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";
-import Layers from "../../components/layer";
+import Layers from "../../components/layer-v2";
 import { throttle } from "lodash";
 import ModalPreview from "../../components/modal-preview";
 import LayerView from "../view";
@@ -137,7 +138,7 @@ const BoardTemplate = ({ onSelectComponent }) => {
         fontColor: activeTool === "text" ? "#DADADA" : undefined,
     });
     const handleMouseDown = (e, item, direction) => {
-        if (activeTool === "select" && item && !direction) {
+        if (["node", "select"].includes(activeTool) && item && !direction) {
             startPos.current = { x: e.clientX, y: e.clientY };
             const rectBox = (e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect();
             setDragOffset({
@@ -165,7 +166,6 @@ const BoardTemplate = ({ onSelectComponent }) => {
                     isDragging.current = true;
                     moveComponent.current = false;
                     setResizeDirection(direction);
-                    console.log({ item });
                     if (item) {
                         dispatch({ type: "panel/setSelectedComponent", payload: item });
                         dispatch({ type: "panel/setShow", payload: true });
@@ -205,7 +205,7 @@ const BoardTemplate = ({ onSelectComponent }) => {
         setShadowShape([]);
     };
     const handleMouseClick = (e) => {
-        if (activeTool === "select" && selectedComponent) {
+        if (["select", "node"].includes(activeTool) && selectedComponent) {
             handleUnSelectComponent();
             return;
         }
@@ -248,7 +248,7 @@ const BoardTemplate = ({ onSelectComponent }) => {
             setShadowShape([createShape(x, y, theme === null || theme === void 0 ? void 0 : theme.primaryColor)]);
             return;
         }
-        if (activeTool === "select" &&
+        if (activeTool === "node" &&
             selectedComponent &&
             moveComponent.current &&
             dragOffset &&
@@ -258,8 +258,8 @@ const BoardTemplate = ({ onSelectComponent }) => {
             const newX = e.clientX - workspaceRect.left - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.x);
             const newY = e.clientY - workspaceRect.top - (dragOffset === null || dragOffset === void 0 ? void 0 : dragOffset.y);
             let newPosition = {
-                x: newX,
-                y: newY,
+                x: newX / scale,
+                y: newY / scale,
             };
             requestAnimationFrame(() => {
                 setComponentsState((prev) => {
@@ -386,7 +386,7 @@ const BoardTemplate = ({ onSelectComponent }) => {
         }
     };
     const handleMouseUp = () => {
-        if (activeTool === "select" && selectedComponent && isDragging.current) {
+        if (["select", "node"].includes(activeTool) && selectedComponent && isDragging.current) {
             setResizeDirection(null);
         }
     };
@@ -403,7 +403,7 @@ const BoardTemplate = ({ onSelectComponent }) => {
     };
     const handleTouchStart = (e, items, direction) => {
         var _a, _b, _c, _d;
-        if (activeTool === "select" && !direction && items) {
+        if (activeTool === "node" && !direction && items) {
             // dispatch({ type: "panel/setShow", payload: false });
             // setMoveComponent(true);
             moveComponent.current = true;
@@ -458,7 +458,7 @@ const BoardTemplate = ({ onSelectComponent }) => {
         }
     };
     const handleTouchMove = (e) => {
-        if (activeTool === "select" &&
+        if (activeTool === "node" &&
             moveComponent &&
             isTouching.current &&
             !resizeDirection) {
@@ -607,21 +607,15 @@ const BoardTemplate = ({ onSelectComponent }) => {
         }
     };
     const renderMiniMap = () => {
-        return (<MiniMap width={250} height={250}>
-        <div className="w-full h-full">
-          <svg id="workspace" width="100%" height="100%" viewBox={`0 0 ${widthBoard} ${heightBoard}`} className="h-screen w-full" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
-                background: "#f5f5f5",
-                display: "block",
-            }}>
-            <Layers shadowShape={shadowShape} components={[...extraComponentsState, ...componentsState]} activeTool={activeTool} 
-        // onClick={handleSelectComponent}
-        // onMouseDown={handleMouseDown}
-        // onMouseUp={handleMouseUp}
-        // onBlur={handleUnSelectComponent}
-        selectedComponent={selectedComponent}/>
-          </svg>
-        </div>
-      </MiniMap>);
+        return (_jsx(MiniMap, { width: 250, height: 250, children: _jsx("div", { className: "w-full h-full", children: _jsx("svg", { id: "workspace", width: "100%", height: "100%", viewBox: `0 0 ${widthBoard} ${heightBoard}`, className: "h-screen w-full", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", style: {
+                        background: "#f5f5f5",
+                        display: "block",
+                    }, children: _jsx(Layers, { shadowShape: shadowShape, components: [...extraComponentsState, ...componentsState], activeTool: activeTool, 
+                        // onClick={handleSelectComponent}
+                        // onMouseDown={handleMouseDown}
+                        // onMouseUp={handleMouseUp}
+                        // onBlur={handleUnSelectComponent}
+                        selectedComponent: selectedComponent }) }) }) }));
     };
     const handelZoomIn = () => {
         var _a;
@@ -647,80 +641,26 @@ const BoardTemplate = ({ onSelectComponent }) => {
     //     moveComponent &&
     //     isTouching.current &&
     //     !resizeDirection
-    return (<>
-      <ModalPreview>
-        <LayerView statusKey="status"/>
-      </ModalPreview>
-      <div className="relative w-full h-screen flex-1 overflow-hidden" ref={containerRef}>
-        <div className="absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10">
-          <div className="flex gap-2">
-            <Button icon={<ZoomIn />} onClick={handelZoomIn}/>
-            <Button icon={<ZoomOut />} onClick={handleZoomOut}/>
-          </div>
-        </div>
-        <TransformWrapper ref={transformRef} panning={{ disabled: activeTool === "select" }} centerZoomedOut={true} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} // sangat kecil = bisa zoom out jauh
-     maxScale={1000} initialScale={1} pinch={{ step: 1 }} smooth={true} doubleClick={{ step: 1, disabled: activeTool === "select" }} disablePadding>
-          {scale > 1 && (<div className="absolute bottom-[60px] left-1/2 transform -translate-x-1/2 z-10">
-              {renderMiniMap()}
-            </div>)}
-          <TransformComponent wrapperStyle={{
-            width: "100%",
-            height: "100%",
-            overflow: "hidden",
-        }} contentStyle={{
-            width: "100%",
-            height: "100%",
-        }}>
-            <svg id="workspace" ref={svgRef} width="100%" height="100%" viewBox={`0 0 ${widthBoard} ${heightBoard}`} className="h-screen" onMouseUp={handleMouseUp} onMouseMove={handleMouseMove} onMouseEnter={handleMouseEnter} onClick={(e) => {
-            e.stopPropagation();
-            handleMouseClick(e);
-        }} onMouseLeave={handleMouseLeave} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
-            background: backgroundColor,
-            display: "block",
-            cursor: activeTool === "ruler" ? "crosshair" : "auto",
-        }}>
-              <Layers shadowShape={shadowShape} components={[...extraComponentsState, ...componentsState]} style={{
-            cursor: getCursorStyle(),
-        }} 
-    // onClick={handleSelectComponent}
-    onMouseDown={handleMouseDown} 
-    // onMouseUp={handleMouseUp}
-    onBlur={handleUnSelectComponent} selectedComponent={selectedComponent} activeTool={activeTool} onTouchStart={(e, item, direction) => handleTouchStart(e, item, direction)} onTouchMove={(e) => handleTouchMove(e)} onTouchEnd={handleTouchEnd}/>
-              {activeTool === "ruler" && (<>
-                  <g id="horizontal-ruler">
-                    <rect x="0" y="0" width={window.innerWidth} height="30" fill="#e0e0e0"/>
-                    <g stroke="#888" font-size="10" text-anchor="middle">
-                      {Array.from({ length: window.innerWidth / 50 }, (_, i) => (<g key={i}>
-                            <line x1={i * 50} y1="0" x2={i * 50} y2="10"/>
-                            <text x={i * 50} y="15">
-                              {i * 50}
-                            </text>
-                          </g>))}
-                    </g>
-                  </g>
-                  <g id="vertical-ruler">
-                    <rect x="0" y="0" width="30" height={window.innerHeight} fill="#e0e0e0"/>
-                    <g stroke="#888" font-size="10" text-anchor="middle">
-                      {Array.from({ length: window.innerHeight / 10 }, (_, i) => (<g key={i}>
-                            <line x1="0" y1={i * 50} x2="10" y2={i * 50}/>
-                            <text x="15" y={i * 50}>
-                              {i * 50}
-                            </text>
-                          </g>))}
-                    </g>
-                  </g>
-                </>)}
-              {grid && (<g stroke="#ddd" strokeWidth={0.5}>
-                {/* Vertical lines */}
-                {Array.from({ length: widthBoard / 10 }, (_, i) => (<line key={`v-${i}`} x1={i * 10} y1={0} x2={i * 10} y2={heightBoard}/>))}
-            
-                {/* Horizontal lines */}
-                {Array.from({ length: heightBoard / 10 }, (_, i) => (<line key={`h-${i}`} x1={0} y1={i * 10} x2={widthBoard} y2={i * 10}/>))}
-              </g>)}
-            </svg>
-          </TransformComponent>
-        </TransformWrapper>
-      </div>
-    </>);
+    return (_jsxs(_Fragment, { children: [_jsx(ModalPreview, { children: _jsx(LayerView, { statusKey: "status" }) }), _jsxs("div", { className: "relative w-full h-screen flex-1 overflow-hidden", ref: containerRef, children: [_jsx("div", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 z-10", children: _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { icon: _jsx(ZoomIn, {}), onClick: handelZoomIn }), _jsx(Button, { icon: _jsx(ZoomOut, {}), onClick: handleZoomOut })] }) }), _jsxs(TransformWrapper, { ref: transformRef, panning: { disabled: ["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, 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) }), 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/package/index.js

@@ -1,7 +1,7 @@
 "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";
+import Board from "../board-v2";
 import SideTool from "../side-tool";
 import ControlPanels from "../panel";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";

package/dist/features/panel/index.js

@@ -57,9 +57,7 @@ const ControlPanels = (props) => {
     };
     const handleChangeComponent = (values, allValues) => {
         const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
-        console.log({ allValues });
         const newValues = createShape(shape, restProps);
-        console.log({ newValues });
         dispatch({
             type: "board/updateComponent",
             payload: Object.assign(Object.assign({}, (selectedComponent || {})), newValues),

package/dist/features/side-tool/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Ruler, Grid } from "lucide-react";
+import { Circle, CopyPlus, Eye, EyeOff, Image, Layers2, MousePointer, PaintBucket, Ratio, SquareMousePointer, Trash, Type, Upload, Hand, Layers, Ruler, Grid, MousePointer2 } from "lucide-react";
 import ButtonTools from "../../components/button-tools";
 import { Divider, ColorPicker, Button, } from "antd";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
@@ -27,6 +27,11 @@ const SideTool = ({ dragOnly }) => {
             id: "ruler",
             name: "Ruler",
             icon: _jsx(Ruler, {}),
+        },
+        {
+            id: "node",
+            name: "Node Tool",
+            icon: _jsx(MousePointer2, {}),
         }
     ];
     const actionsTools = [
@@ -84,6 +89,13 @@ const SideTool = ({ dragOnly }) => {
         // }
     ];
     const hanldeSelectTool = (id) => {
+        if (active === id) {
+            dispatch({
+                type: "tool/setActiveTool",
+                payload: "",
+            });
+            return;
+        }
         if (id === "background" || id === "image-table") {
             dispatch({
                 type: "panel/setShow",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seat-editor",
-  "version": "1.6.11",
+  "version": "1.6.13",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/app/layout.jsx

@@ -1,27 +0,0 @@
-import localFont from "next/font/local";
-import "./globals.css";
-import { Layout } from "antd";
-import { StoreProvider } from "../provider/store-provider";
-const geistSans = localFont({
-    src: "./fonts/GeistVF.woff",
-    variable: "--font-geist-sans",
-    weight: "100 900",
-});
-const geistMono = localFont({
-    src: "./fonts/GeistMonoVF.woff",
-    variable: "--font-geist-mono",
-    weight: "100 900",
-});
-export const metadata = {
-    title: "Create Next App",
-    description: "Generated by create next app",
-};
-export default function RootLayout({ children, }) {
-    return (<html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        <StoreProvider>
-          <Layout>{children}</Layout>
-        </StoreProvider>
-      </body>
-    </html>);
-}

package/dist/app/new-board/page.jsx

@@ -1,53 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-import SeatEditor from "../../features/package";
-import { constantData } from "../constant";
-export default function NewBoard() {
-    const [initialValue, setInitialValue] = useState([]);
-    const [extraComponents, setExtraComponents] = useState([]);
-    const [viewOnly, setViewOnly] = useState(true);
-    useEffect(() => {
-        setInitialValue(constantData);
-        setExtraComponents([{
-                src: "https://d3l3j4e3k9p181.cloudfront.net/dev/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1751350513582817819_download (10).jpg",
-                id: 1747388267450,
-                x: 0,
-                y: 0,
-                shape: "background",
-                width: 100,
-                height: 100,
-            }]);
-    }, []);
-    return (<>
-      <div className="w-full h-screen flex flex-col relative justify-center">
-        {/* <div className="w-full h-[1000px] bg-white border-r border-gray-200"> */}
-        {/* <LayerView
-          componentProps={initialValue}
-          mappingKey="properties"
-          extraComponentProps={[]}
-          defaultBackground="#ffffff"
-          // dragOnly={true}
-          statusKey="status"
-          
-        /> */}
-        {/* </div> */}
-        <button className="bg-blue-500 text-white px-4 py-2 rounded" onClick={() => setViewOnly(!viewOnly)}>
-          {viewOnly ? "Edit Mode" : "View Mode"}
-        </button>
-        <div className="flex-1 h-full">
-          <SeatEditor componentProps={initialValue} viewOnly={viewOnly} dragOnly mappingKey="properties" onCurrentStateChange={(setState) => {
-            var _a, _b, _c, _d;
-            if (((_a = setState === null || setState === void 0 ? void 0 : setState.components) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                setInitialValue((_b = setState === null || setState === void 0 ? void 0 : setState.components) !== null && _b !== void 0 ? _b : []);
-            }
-            if (((_c = setState === null || setState === void 0 ? void 0 : setState.extraComponents) === null || _c === void 0 ? void 0 : _c.length) > 0) {
-                setExtraComponents((_d = setState === null || setState === void 0 ? void 0 : setState.extraComponents) !== null && _d !== void 0 ? _d : []);
-            }
-        }} extraComponentProps={extraComponents} defaultBackground="#ffffff" 
-    // dragOnly={true}
-    statusKey="status"/>
-          </div>
-
-      </div>
-    </>);
-}