seat-editor 3.0.0 → 3.0.2

package/dist/app/test/{page.js → page.jsx}

@@ -1,6 +1,5 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 export default function DraggableRect() {
     const rectRef = useRef(null);
     const [pos, setPos] = useState({ x: 100, y: 100 });
@@ -39,5 +38,8 @@ export default function DraggableRect() {
     const handleEnd = () => {
         setDragging(false);
     };
-    return (_jsx("svg", { width: "100%", height: "500", viewBox: "0 0 800 600", style: { border: "1px solid black", touchAction: "none" }, onMouseMove: handleMove, onMouseUp: handleEnd, onTouchMove: handleMove, onTouchEnd: handleEnd, children: _jsx("rect", { ref: rectRef, x: pos.x, y: pos.y, width: "150", height: "100", fill: "tomato", onMouseDown: handleStart, onTouchStart: handleStart, style: { cursor: "grab" } }) }));
+    return (<svg width="100%" height="500" viewBox="0 0 800 600" style={{ border: "1px solid black", touchAction: "none" }} // important!
+     onMouseMove={handleMove} onMouseUp={handleEnd} onTouchMove={handleMove} onTouchEnd={handleEnd}>
+      <rect ref={rectRef} x={pos.x} y={pos.y} width="150" height="100" fill="tomato" onMouseDown={handleStart} onTouchStart={handleStart} style={{ cursor: "grab" }}/>
+    </svg>);
 }

package/dist/app/v2/page.d.ts

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

package/dist/app/v2/page.jsx

@@ -0,0 +1,13 @@
+import Board from "../../features/board-v2";
+import SideTool from "../../features/side-tool";
+import ControlPanels from "../../features/panel";
+const TableEditor = () => {
+    return (<>
+      <div className="w-full h-screen flex relative">
+        <SideTool />
+        <Board />
+        <ControlPanels />
+      </div>
+    </>);
+};
+export default TableEditor;

package/dist/components/button-tools/index.d.ts

@@ -7,5 +7,5 @@ interface ButtonToolsProps {
     }>;
     popoverProps?: PopoverProps;
 }
-declare const ButtonTools: (props: ButtonToolsProps) => import("react/jsx-runtime").JSX.Element;
+declare const ButtonTools: (props: ButtonToolsProps) => import("react").JSX.Element;
 export default ButtonTools;

package/dist/components/button-tools/index.jsx

@@ -0,0 +1,17 @@
+"use client";
+import { Button, Popover } from "antd";
+const ButtonTools = (props) => {
+    const { buttonProps, items, popoverProps } = props;
+    if (items.length === 0) {
+        return (<Popover trigger="hover" {...popoverProps}>
+        <Button {...buttonProps}/>
+      </Popover>);
+    }
+    return (<Popover content={<div>
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+        </div>} trigger="click">
+      <Button {...buttonProps}/>
+    </Popover>);
+};
+export default ButtonTools;

package/dist/components/form-tools/label.d.ts

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

package/dist/components/form-tools/label.jsx

@@ -0,0 +1,44 @@
+"use client";
+import { Button, ColorPicker, Flex, Form, Input, InputNumber } from "antd";
+const SectionLabel = () => {
+    return (<div className="py-2">
+      <h1 className="heading-s">Section Labeling</h1>
+      <Form.Item label="Labels in square" name={"labels"}>
+        <Form.List name="labels">
+          {(fields, { add, remove }) => (<>
+              {fields.map((field) => (<div key={field.key}>
+                  <Flex gap={2}>
+                    <Form.Item name={[field.name, "label"]} label="Text">
+                      <Input />
+                    </Form.Item>
+                    <Form.Item name={[field.name, "fontColor"]} label="Color" getValueFromEvent={(color) => color.toHexString()}>
+                      <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+                    </Form.Item>
+                  </Flex>
+                  <Flex gap={2}>
+                    <Form.Item name={[field.name, "x"]} label="X">
+                      <InputNumber />
+                    </Form.Item>
+                    <Form.Item name={[field.name, "y"]} label="Y">
+                      <InputNumber />
+                    </Form.Item>
+                    <Form.Item name={[field.name, "fontSize"]} label="Size">
+                      <InputNumber suffix="px"/>
+                    </Form.Item>
+                  </Flex>
+                </div>))}
+              <Flex gap={2}>
+                <Button type="primary" onClick={() => add()} className="btn btn-primary">
+                  Add
+                </Button>
+                <Button type="primary" onClick={() => remove(fields.length - 1)} className="btn btn-primary">
+                  Remove
+                </Button>
+              </Flex>
+            </>)}
+        </Form.List>
+      </Form.Item>
+      <div className="divider-dashed"/>
+    </div>);
+};
+export default SectionLabel;

package/dist/components/form-tools/shape.d.ts

@@ -1,4 +1,4 @@
 declare const SectionShape: ({ allowChangeShape, }: {
     allowChangeShape?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SectionShape;

package/dist/components/form-tools/shape.jsx

@@ -0,0 +1,66 @@
+"use client";
+import { ColorPicker, Flex, Form, InputNumber, Select } from "antd";
+const SectionShape = ({ allowChangeShape = true, }) => {
+    const optionsShape = [
+        {
+            value: "circle",
+            label: "Circle",
+        },
+        {
+            value: "square",
+            label: "Square",
+        },
+        {
+            value: "table-seat-circle",
+            label: "Table Seat Circle",
+        },
+        {
+            label: "Image Table",
+            value: "image-table",
+        },
+    ];
+    return (<div className="py-2">
+      <h1 className="heading-s">Shape</h1>
+      {allowChangeShape && (<Flex gap={2} className="w-full">
+          <Form.Item label="Name" name="shape" className="w-full">
+            <Select options={optionsShape} className="w-full"/>
+          </Form.Item>
+        </Flex>)}
+      <Flex gap={2} className="w-full">
+        <Form.Item label="Width" name="width" className="w-full">
+          <InputNumber suffix="px"/>
+        </Form.Item>
+        <Form.Item label="Height" name="height" className="w-full">
+          <InputNumber suffix="px"/>
+        </Form.Item>
+      </Flex>
+      <Flex gap={2}>
+        <Form.Item label="Position X" name="x" className="w-full">
+          <InputNumber />
+        </Form.Item>
+        <Form.Item label="Position Y" name="y" className="w-full">
+          <InputNumber />
+        </Form.Item>
+        <Form.Item label="Rotation" name="rotation" className="w-full">
+          <InputNumber />
+        </Form.Item>
+      </Flex>
+      <Flex gap={2}>
+        <Form.Item label="Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
+          <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+        </Form.Item>
+        <Form.Item label="Stroke" name={"stroke"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
+          <ColorPicker allowClear format="hex" defaultFormat="hex"/>
+        </Form.Item>
+      </Flex>
+      <Flex>
+        <Form.Item label="Stroke Width" name={"strokeWidth"} className="w-full">
+          <InputNumber />
+        </Form.Item>
+        <Form.Item label="opacity" name={"opacity"} className="w-full">
+          <InputNumber step={0.1} max={1} min={0}/>
+        </Form.Item>
+      </Flex>
+    </div>);
+};
+export default SectionShape;

package/dist/components/input/number-indicator.d.ts

@@ -3,5 +3,5 @@ interface NumberIndicatorProps {
     defaultValue?: number;
     onChange: (value: number) => void;
 }
-declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react").JSX.Element;
 export default NumberIndicator;

package/dist/components/input/{number-indicator.js → number-indicator.jsx}

@@ -1,5 +1,4 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Input, Button, Flex, Form } from "antd";
 import { ArrowRight, ArrowLeft } from "lucide-react";
@@ -22,6 +21,16 @@ const NumberIndicator = ({ name, defaultValue, onChange }) => {
         form.setFieldsValue({ [name]: value + 1 });
         onChange(value + 1);
     };
-    return (_jsxs(Flex, { gap: 2, children: [_jsx(Button, { onClick: handlePrev, children: _jsx(ArrowLeft, {}) }), _jsx(Form.Item, { name: name, noStyle: true, children: _jsx(Input, { className: "flex text-center", type: "number", value: value, name: name, onChange: (e) => setValue(parseInt(e.target.value)) }) }), _jsx(Button, { onClick: handleNext, children: _jsx(ArrowRight, {}) })] }));
+    return (<Flex gap={2}>
+      <Button onClick={handlePrev}>
+        <ArrowLeft />
+      </Button>
+      <Form.Item name={name} noStyle>
+      <Input className="flex text-center" type="number" value={value} name={name} onChange={(e) => setValue(parseInt(e.target.value))}/>
+      </Form.Item>
+      <Button onClick={handleNext}>
+        <ArrowRight />
+      </Button>
+    </Flex>);
 };
 export default NumberIndicator;

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

@@ -1,3 +1,4 @@
+import React from "react";
 type JoystickPosition = {
     x: number;
     y: number;
@@ -7,5 +8,5 @@ type JoystickProps = {
     onMove?: (pos: JoystickPosition) => void;
     onEnd?: () => void;
 };
-export declare const Joystick: ({ size, onMove, onEnd, }: JoystickProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Joystick: ({ size, onMove, onEnd, }: JoystickProps) => React.JSX.Element;
 export {};

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

@@ -1,6 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 // Joystick.tsx
-import { useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 export const Joystick = ({ size = 120, onMove, onEnd, }) => {
     const baseRef = useRef(null);
     const [position, setPosition] = useState({ x: 0, y: 0 });
@@ -27,7 +26,7 @@ export const Joystick = ({ size = 120, onMove, onEnd, }) => {
         setPosition({ x: 0, y: 0 });
         onEnd === null || onEnd === void 0 ? void 0 : onEnd();
     };
-    return (_jsx("div", { ref: baseRef, onMouseMove: (e) => e.buttons === 1 && handleMove(e), onMouseUp: handleEnd, onMouseLeave: handleEnd, onTouchMove: handleMove, onTouchEnd: handleEnd, style: {
+    return (<div ref={baseRef} onMouseMove={(e) => e.buttons === 1 && handleMove(e)} onMouseUp={handleEnd} onMouseLeave={handleEnd} onTouchMove={handleMove} onTouchEnd={handleEnd} style={{
             width: size,
             height: size,
             background: "#ddd",
@@ -35,14 +34,16 @@ export const Joystick = ({ size = 120, onMove, onEnd, }) => {
             position: "relative",
             touchAction: "none",
             userSelect: "none",
-        }, children: _jsx("div", { onMouseDown: handleMove, onTouchStart: handleMove, style: {
-                width: 40,
-                height: 40,
-                background: "#3E97FF",
-                borderRadius: "50%",
-                position: "absolute",
-                left: `calc(50% + ${position.x}px - 20px)`,
-                top: `calc(50% + ${position.y}px - 20px)`,
-                touchAction: "none",
-            } }) }));
+        }}>
+      <div onMouseDown={handleMove} onTouchStart={handleMove} style={{
+            width: 40,
+            height: 40,
+            background: "#3E97FF",
+            borderRadius: "50%",
+            position: "absolute",
+            left: `calc(50% + ${position.x}px - 20px)`,
+            top: `calc(50% + ${position.y}px - 20px)`,
+            touchAction: "none",
+        }}/>
+    </div>);
 };

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

@@ -15,5 +15,5 @@ interface LayersProps {
     onTouchMove?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
     onTouchEnd?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>) => void;
 }
-declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchEnd, onTouchMove, onTouchStart }: LayersProps) => import("react/jsx-runtime").JSX.Element;
+declare const Layers: ({ shadowShape, components, onClick, selectedComponent, selectedTable, activeTool, onMouseDown, onMouseUp, onBlur, selectedTableColor, mode, style, onTouchEnd, onTouchMove, onTouchStart }: LayersProps) => import("react").JSX.Element;
 export default Layers;