seat-editor 2.0.0 → 2.1.1

package/dist/app/only-view/page.d.ts

@@ -1,2 +0,0 @@
-declare const TouchScrollDetect: () => import("react").JSX.Element;
-export default TouchScrollDetect;

package/dist/app/only-view/page.jsx

@@ -1,40 +0,0 @@
-"use client";
-import LayerView from "@/features/view";
-import { useState, useEffect } from "react";
-import { dataDummy } from "./constant";
-const TouchScrollDetect = () => {
-    const [fingerCount, setFingerCount] = useState(0);
-    const [scrollType, setScrollType] = useState(""); // untuk kondisi tampilan
-    useEffect(() => {
-        const container = document.getElementById("scroll-container");
-        const handleTouchStart = (e) => {
-            const count = e.touches.length;
-            setFingerCount(count);
-            if (count === 1) {
-                setScrollType("one");
-            }
-            else if (count === 2) {
-                setScrollType("two");
-            }
-            else {
-                setScrollType("other");
-            }
-        };
-        const handleTouchEnd = () => {
-            setFingerCount(0);
-            setScrollType(""); // reset saat tidak ada sentuhan
-        };
-        if (container) {
-            container.addEventListener("touchstart", handleTouchStart);
-            container.addEventListener("touchend", handleTouchEnd);
-        }
-        return () => {
-            if (container) {
-                container.removeEventListener("touchstart", handleTouchStart);
-                container.removeEventListener("touchend", handleTouchEnd);
-            }
-        };
-    }, []);
-    return (<LayerView statusKey="status" defaultBackground="#000000" componentProps={dataDummy} extraComponentProps={[]}/>);
-};
-export default TouchScrollDetect;

package/dist/app/page.d.ts

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

package/dist/app/page.jsx

@@ -1,13 +0,0 @@
-import Board from "../features/board-v3";
-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/app/test/page.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export default function DraggableRect(): React.JSX.Element;

package/dist/app/test/page.jsx

@@ -1,45 +0,0 @@
-"use client";
-import React, { useRef, useState } from "react";
-export default function DraggableRect() {
-    const rectRef = useRef(null);
-    const [pos, setPos] = useState({ x: 100, y: 100 });
-    const [dragging, setDragging] = useState(false);
-    const [offset, setOffset] = useState({ x: 0, y: 0 });
-    const getCoords = (e) => {
-        if ("touches" in e) {
-            return {
-                x: e.touches[0].clientX,
-                y: e.touches[0].clientY,
-            };
-        }
-        return {
-            x: e.clientX,
-            y: e.clientY,
-        };
-    };
-    const handleStart = (e) => {
-        e.preventDefault();
-        const coords = getCoords(e);
-        setOffset({
-            x: coords.x - pos.x,
-            y: coords.y - pos.y,
-        });
-        setDragging(true);
-    };
-    const handleMove = (e) => {
-        if (!dragging)
-            return;
-        const coords = getCoords(e);
-        setPos({
-            x: coords.x - offset.x,
-            y: coords.y - offset.y,
-        });
-    };
-    const handleEnd = () => {
-        setDragging(false);
-    };
-    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 +0,0 @@
-declare const TableEditor: () => import("react").JSX.Element;
-export default TableEditor;

package/dist/app/v2/page.jsx

@@ -1,13 +0,0 @@
-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

@@ -1,11 +0,0 @@
-import { ButtonProps, PopoverProps } from "antd";
-interface ButtonToolsProps {
-    buttonProps: ButtonProps;
-    items: Array<{
-        label: string;
-        onClick: () => void;
-    }>;
-    popoverProps?: PopoverProps;
-}
-declare const ButtonTools: (props: ButtonToolsProps) => import("react").JSX.Element;
-export default ButtonTools;

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

@@ -1,17 +0,0 @@
-"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 +0,0 @@
-declare const SectionLabel: () => import("react").JSX.Element;
-export default SectionLabel;

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

@@ -1,44 +0,0 @@
-"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 +0,0 @@
-declare const SectionShape: ({ allowChangeShape, }: {
-    allowChangeShape?: boolean;
-}) => import("react").JSX.Element;
-export default SectionShape;

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

@@ -1,66 +0,0 @@
-"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

@@ -1,7 +0,0 @@
-interface NumberIndicatorProps {
-    name: string;
-    defaultValue?: number;
-    onChange: (value: number) => void;
-}
-declare const NumberIndicator: ({ name, defaultValue, onChange }: NumberIndicatorProps) => import("react").JSX.Element;
-export default NumberIndicator;

package/dist/components/input/number-indicator.jsx

@@ -1,36 +0,0 @@
-"use client";
-import { useState, useEffect } from "react";
-import { Input, Button, Flex, Form } from "antd";
-import { ArrowRight, ArrowLeft } from "lucide-react";
-const NumberIndicator = ({ name, defaultValue, onChange }) => {
-    const [value, setValue] = useState(0);
-    const form = Form.useFormInstance();
-    useEffect(() => {
-        if (defaultValue) {
-            setValue(defaultValue);
-            form.setFieldsValue({ [name]: defaultValue });
-        }
-    }, [defaultValue]);
-    const handlePrev = () => {
-        setValue(value - 1);
-        form.setFieldsValue({ [name]: value - 1 });
-        onChange(value - 1);
-    };
-    const handleNext = () => {
-        setValue(value + 1);
-        form.setFieldsValue({ [name]: value + 1 });
-        onChange(value + 1);
-    };
-    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,12 +0,0 @@
-import React from "react";
-type JoystickPosition = {
-    x: number;
-    y: number;
-};
-type JoystickProps = {
-    size?: number;
-    onMove?: (pos: JoystickPosition) => void;
-    onEnd?: () => void;
-};
-export declare const Joystick: ({ size, onMove, onEnd, }: JoystickProps) => React.JSX.Element;
-export {};

package/dist/components/joystick/index.jsx

@@ -1,49 +0,0 @@
-// Joystick.tsx
-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 });
-    const handleMove = (e) => {
-        const base = baseRef.current;
-        if (!base)
-            return;
-        const rect = base.getBoundingClientRect();
-        const isTouch = "touches" in e;
-        const clientX = isTouch ? e.touches[0].clientX : e.clientX;
-        const clientY = isTouch ? e.touches[0].clientY : e.clientY;
-        const centerX = rect.left + rect.width / 2;
-        const centerY = rect.top + rect.height / 2;
-        const dx = clientX - centerX;
-        const dy = clientY - centerY;
-        const distance = Math.min(Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)), size / 2 - 20);
-        const angle = Math.atan2(dy, dx);
-        const x = Math.cos(angle) * distance;
-        const y = Math.sin(angle) * distance;
-        setPosition({ x, y });
-        onMove === null || onMove === void 0 ? void 0 : onMove({ x, y });
-    };
-    const handleEnd = () => {
-        setPosition({ x: 0, y: 0 });
-        onEnd === null || onEnd === void 0 ? void 0 : onEnd();
-    };
-    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",
-            borderRadius: "50%",
-            position: "relative",
-            touchAction: "none",
-            userSelect: "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

@@ -1,19 +0,0 @@
-interface LayersProps {
-    shadowShape?: any[];
-    components?: any[];
-    onClick?: (items: any) => void;
-    selectedComponent?: any;
-    activeTool?: string;
-    onMouseDown?: (e: React.MouseEvent, item: any, direction?: string) => void;
-    onMouseUp?: (e: React.MouseEvent) => void;
-    onBlur?: () => void;
-    selectedTable?: any;
-    selectedTableColor?: string;
-    style?: any;
-    mode?: "view" | "edit";
-    onTouchStart?: (e: React.TouchEvent<SVGRectElement | SVGCircleElement | SVGTextElement | SVGImageElement>, items: any, direction?: string) => void;
-    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.Element;
-export default Layers;