seat-editor 3.3.13 → 3.3.15

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

@@ -0,0 +1,28 @@
+import { AllTypElement } from "./resize-element";
+export type Point = {
+    x: number;
+    y: number;
+};
+export interface PolygonBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    minX?: number;
+    minY?: number;
+    maxX?: number;
+    maxY?: number;
+}
+/**
+ * Parse SVG polygon string → array of points
+ * Example input: "10,20 30,40 50,10"
+ */
+export declare function parsePolygonPoints(pointsStr: string): Point[];
+/**
+ * Convert polygon points → bounding box
+ */
+export declare function polygonPointsToBoxFromString(pointsStr: string): PolygonBox;
+export declare function resizePolygon(target: {
+    g: SVGGElement;
+    element: AllTypElement;
+}, handle: string, dx: number, dy: number): void;

package/dist/features/board-v3/polygon.js

@@ -0,0 +1,109 @@
+/**
+ * Parse SVG polygon string → array of points
+ * Example input: "10,20 30,40 50,10"
+ */
+export function parsePolygonPoints(pointsStr) {
+    if (!pointsStr.trim())
+        return [];
+    return pointsStr
+        .trim()
+        .split(/\s+/) // split via spaces
+        .map(pair => {
+        const [x, y] = pair.split(/,| /).map(Number); // support "10,20" or "10 20"
+        return { x, y };
+    })
+        .filter(p => !Number.isNaN(p.x) && !Number.isNaN(p.y));
+}
+/**
+ * Convert polygon points → bounding box
+ */
+export function polygonPointsToBoxFromString(pointsStr) {
+    const points = parsePolygonPoints(pointsStr);
+    if (points.length === 0) {
+        return { x: 0, y: 0, width: 0, height: 0, minX: 0, minY: 0, maxX: 0, maxY: 0 };
+    }
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const p of points) {
+        if (p.x < minX)
+            minX = p.x;
+        if (p.y < minY)
+            minY = p.y;
+        if (p.x > maxX)
+            maxX = p.x;
+        if (p.y > maxY)
+            maxY = p.y;
+    }
+    return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY,
+        // minX,
+        // minY,
+        // maxX,
+        // maxY
+    };
+}
+export function resizePolygon(target, handle, dx, dy) {
+    const { g, element } = target;
+    const polygon = element;
+    // --- 1. Ambil points asli ---
+    const points = [];
+    for (let i = 0; i < polygon.points.numberOfItems; i++) {
+        const p = polygon.points.getItem(i);
+        points.push({ x: p.x, y: p.y });
+    }
+    // --- 2. Hitung bounding box polygon ---
+    let minX = Infinity, minY = Infinity;
+    let maxX = -Infinity, maxY = -Infinity;
+    for (const p of points) {
+        if (p.x < minX)
+            minX = p.x;
+        if (p.y < minY)
+            minY = p.y;
+        if (p.x > maxX)
+            maxX = p.x;
+        if (p.y > maxY)
+            maxY = p.y;
+    }
+    let w = maxX - minX;
+    let h = maxY - minY;
+    // posisi group translate
+    let gx = g.transform.baseVal.getItem(0).matrix.e;
+    let gy = g.transform.baseVal.getItem(0).matrix.f;
+    console.log({ gx, gy });
+    // --- 3. Map handle operations (mirip punya kamu) ---
+    const ops = {
+        n: () => { h -= dy; gy += dy; },
+        s: () => { h += dy; },
+        w: () => { w -= dx; gx += dx; },
+        e: () => { w += dx; },
+        nw: () => { ops.n(); ops.w(); },
+        ne: () => { ops.n(); ops.e(); },
+        sw: () => { ops.s(); ops.w(); },
+        se: () => { ops.s(); ops.e(); }
+    };
+    ops[handle]();
+    // --- 4. Minimal width/height ---
+    w = Math.max(10, w);
+    h = Math.max(10, h);
+    // --- 5. Scale ulang semua points berdasarkan bounding box baru ---
+    const oldW = maxX - minX;
+    const oldH = maxY - minY;
+    const sx = w / oldW;
+    const sy = h / oldH;
+    const newPoints = points.map(p => ({
+        x: (p.x - minX) * sx + minX,
+        y: (p.y - minY) * sy + minY,
+    }));
+    // --- 6. Update points polygon ---
+    polygon.points.clear();
+    newPoints.forEach(np => {
+        const pt = polygon.ownerSVGElement.createSVGPoint();
+        pt.x = np.x;
+        pt.y = np.y;
+        polygon.points.appendItem(pt);
+    });
+    // --- 7. Update posisi group (gx/gy) ---
+    g.setAttribute("transform", `translate(${gx}, ${gy})`);
+}

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

@@ -0,0 +1,9 @@
+import { AllTypElement } from "./resize-element";
+export declare function resizeRect(target: {
+    g: SVGGElement;
+    element: AllTypElement;
+}, handle: string, dx: number, dy: number): void;
+export declare function resizeRectTes(target: {
+    g: SVGGElement;
+    element: AllTypElement;
+}, handle: string, dx: number, dy: number): void;

package/dist/features/board-v3/rect.js

@@ -0,0 +1,152 @@
+export function resizeRect(target, handle, dx, dy) {
+    var _a;
+    const { g, element } = target;
+    const rect = element;
+    let w = rect.width.baseVal.value;
+    let h = rect.height.baseVal.value;
+    let gx = g.transform.baseVal.getItem(0).matrix.e;
+    let gy = g.transform.baseVal.getItem(0).matrix.f;
+    let angle = (_a = g.firstChild) === null || _a === void 0 ? void 0 : _a.transform.baseVal.getItem(0).angle;
+    console.log({ dx, dy });
+    if (angle !== 0) {
+        const rad = angle * Math.PI / 180;
+        const localDx = dx * Math.cos(-rad) - dy * Math.sin(-rad);
+        const localDy = dx * Math.sin(-rad) + dy * Math.cos(-rad);
+        console.log({ localDx, localDy });
+        if (handle === "se") {
+            w = gx + localDx;
+            h = gy + localDy;
+        }
+        console.log({ w, h });
+        rect.width.baseVal.value = w;
+        rect.height.baseVal.value = h;
+        // apply new translate (for left/top resizing)
+        const transform = g.transform.baseVal.getItem(0);
+        transform.setTranslate(gx, gy);
+    }
+    else {
+        const ops = {
+            n: () => {
+                h -= dy;
+                gy += dy;
+            },
+            s: () => {
+                h = gy + dy;
+            },
+            w: () => {
+                w -= dx;
+                gx += dx;
+            },
+            e: () => {
+                w = gx + dx;
+            },
+            nw: () => {
+                ops.n();
+                ops.w();
+            },
+            ne: () => {
+                ops.n();
+                ops.e();
+            },
+            sw: () => {
+                ops.s();
+                ops.w();
+            },
+            se: () => {
+                ops.s();
+                ops.e();
+            },
+        };
+        const op = ops[handle];
+        ops[handle]();
+        //
+        // minimal constraints
+        w = Math.max(10, w);
+        h = Math.max(10, h);
+        rect.width.baseVal.value = w;
+        rect.height.baseVal.value = h;
+        // apply new translate (for left/top resizing)
+        // const transform = g.transform.baseVal.getItem(0);
+        // transform.setTranslate(gx, gy);
+    }
+}
+export function resizeRectTes(target, handle, dx, dy) {
+    var _a;
+    const { g, element } = target;
+    const rect = element;
+    let w = rect.width.baseVal.value;
+    let h = rect.height.baseVal.value;
+    let gx = g.transform.baseVal.getItem(0).matrix.e;
+    let gy = g.transform.baseVal.getItem(0).matrix.f;
+    // angle dari group inner
+    const angle = ((_a = g.firstChild) === null || _a === void 0 ? void 0 : _a.transform.baseVal.getItem(0).angle) || 0;
+    //   // RIGHT
+    //   const newW = pos.x - gx;
+    //   scaleX = newW / gw;
+    //   ax = gx;
+    //   ay = gy;
+    //   newW1 = Math.max(minW, pos.x - gx);
+    //   newX1 = gx;
+    //   // BOTTOM
+    //   const newH = pos.y - gy;
+    //   scaleY = newH / gh;
+    //   ax = gx;
+    //   ay = gy;
+    //   newH1 = pos.y - y;
+    //   newY1 = y;
+    console.log({ angle });
+    if (angle !== 0) {
+        const opsScale = {
+            se: () => {
+                ops.s();
+                ops.e();
+            },
+        };
+        opsScale[handle]();
+    }
+    const rad = -angle * (Math.PI / 180); // inverse rotation
+    // convert mouse movement ke local axis
+    const localDx = dx * Math.cos(rad) - dy * Math.sin(rad);
+    const localDy = dx * Math.sin(rad) + dy * Math.cos(rad);
+    const ops = {
+        n: () => {
+            h -= localDy;
+            gy += localDy;
+        },
+        s: () => {
+            h += localDy;
+        },
+        w: () => {
+            w -= localDx;
+            gx += localDx;
+        },
+        e: () => {
+            w += localDx;
+        },
+        nw: () => {
+            ops.n();
+            ops.w();
+        },
+        ne: () => {
+            ops.n();
+            ops.e();
+        },
+        sw: () => {
+            ops.s();
+            ops.w();
+        },
+        se: () => {
+            ops.s();
+            ops.e();
+        },
+    };
+    ops[handle]();
+    // minimal constraints
+    w = Math.max(10, w);
+    h = Math.max(10, h);
+    rect.width.baseVal.value = w;
+    rect.height.baseVal.value = h;
+    // apply new translate (for left/top resizing)
+    const transform = g.transform.baseVal.getItem(0);
+    transform.setTranslate(gx, gy);
+}

package/dist/features/board-v3/resize-element.d.ts

@@ -0,0 +1,12 @@
+export type AllTypElement = SVGRectElement | SVGPolygonElement;
+interface ResizeTarget {
+    g: SVGGElement;
+    inner: SVGGElement;
+    element: AllTypElement;
+    seats?: NodeListOf<SVGGElement>;
+    seatGroup?: SVGGElement;
+    points?: any[];
+}
+export declare function getAttributeElement(root: SVGSVGElement, id: string): ResizeTarget | null;
+export declare function getAttributeElements(root: SVGSVGElement, id: string[]): ResizeTarget[];
+export {};

package/dist/features/board-v3/resize-element.js

@@ -0,0 +1,43 @@
+import { pointsStringToArray } from "./utils";
+export function getAttributeElement(root, id) {
+    var _a;
+    const g = root.querySelector(`g[data-id="${id}"]`);
+    const seats = root.querySelectorAll(`g[data-seat="${id}-seats"]`);
+    const seatGroup = root.querySelector(`g[data-seat="${id}-seats"]`);
+    if (!g)
+        return { g, inner: null, element: null };
+    const inner = g.querySelector("g");
+    const tagName = (_a = inner === null || inner === void 0 ? void 0 : inner.firstChild) === null || _a === void 0 ? void 0 : _a.tagName;
+    let listSeats = [];
+    let element = null;
+    let points = [];
+    if (tagName === "polygon") {
+        const polygon = (inner === null || inner === void 0 ? void 0 : inner.firstChild);
+        const rawPoints = polygon === null || polygon === void 0 ? void 0 : polygon.getAttribute("points");
+        //convert to json x y 
+        points = pointsStringToArray(rawPoints);
+        element = polygon;
+        // const coor = polygonPointsToBoxFromString(polygonPoints);
+    }
+    if (tagName === "rect") {
+        const rect = inner === null || inner === void 0 ? void 0 : inner.querySelector("rect");
+        element = rect;
+    }
+    if (tagName === "circle") {
+        const circle = inner === null || inner === void 0 ? void 0 : inner.querySelector("circle");
+        element = circle;
+    }
+    if (tagName === "image") {
+        const image = inner === null || inner === void 0 ? void 0 : inner.querySelector("image");
+        element = image;
+    }
+    if (seats.length !== 0) {
+        listSeats = seats[0].children;
+    }
+    if (!inner || !element)
+        return null;
+    return { g, inner, element, seats: listSeats, seatGroup, points };
+}
+export function getAttributeElements(root, id) {
+    return id.map((id) => getAttributeElement(root, id));
+}

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

@@ -0,0 +1,180 @@
+export declare const resizeElementSelection: ({ selectionStart, currentSelection, rotate, element, mouse, mouseCurrent, }: {
+    selectionStart: any;
+    currentSelection: any;
+    rotate: any;
+    element: any;
+    mouse: any;
+    mouseCurrent: any;
+}) => {
+    width: number;
+    height: number;
+};
+export declare function resizeBox({ box, dx, dy, rotate, handle }: {
+    box: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    dx: number;
+    dy: number;
+    rotate: number;
+    handle: ResizeHandle;
+}): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type ResizeHandle = "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+export declare function getAnchorByHandle(handle: ResizeHandle, box: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}): {
+    ax: number;
+    ay: number;
+};
+interface ResizeSeatSquare {
+    seatsPositions: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    r: number;
+    openSpace: number;
+    newElement: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    seats: NodeListOf<SVGGElement>;
+    seatGroup: SVGGElement;
+}
+export declare const resizeSeatSquare: ({ seatsPositions, r, openSpace, newElement, seats, seatGroup, }: ResizeSeatSquare) => void;
+export declare const resizeSeatCircle: ({ seatCount, r, openSpace, seats, seatGroup, newElement, }: {
+    seatCount: any;
+    r?: number;
+    openSpace: any;
+    seats: any;
+    seatGroup: any;
+    newElement: any;
+}) => void;
+export declare const resizeSeatSide: ({ seatsPositions, r, openSpace, newElement, seats, seatGroup, }: ResizeSeatSquare) => void;
+export declare const resizeSeatRectCircle: ({ seatsPositions, r, openSpace, newElement, seats, seatGroup, }: ResizeSeatSquare) => void;
+export declare const resizeSeatRectSquare: ({ seatsPositions, r, openSpace, newElement, seats, seatGroup, }: ResizeSeatSquare) => void;
+export declare function mergeById<T extends {
+    id?: string;
+}>(base: T[], updates: Partial<T>[]): T[];
+export declare function updateSingleComponent<T extends {
+    id?: any;
+}>(state: T[], component: Partial<T>, setState: (v: T[]) => void): T[];
+export declare function updateManyComponents<T extends {
+    id?: string;
+}>(state: T[], components: Partial<T>[], setState: (v: T[]) => void): T[];
+export declare function normalizeAngle(angle: number): number;
+export declare function createTableGhost({ x, y, width, height, fill, shape, id, }: {
+    x: any;
+    y: any;
+    width: any;
+    height: any;
+    fill: any;
+    shape: any;
+    id?: string;
+}): any;
+export declare function updateSelectionBox(svg: SVGSVGElement, boxSelection: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, id?: string, unFollowCursor?: boolean): void;
+export declare function getGlobalBBox(svg: SVGSVGElement, el: SVGGraphicsElement): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare function getTranslate(el: any): {
+    x: number;
+    y: number;
+};
+export declare function getSize(el: any): {
+    width: any;
+    height: any;
+};
+export declare function stabilizeRotation(tx: any, ty: any, W: any, H: any, oldAngle: any, newAngle: any): {
+    tx: any;
+    ty: any;
+};
+export declare function isClosingPolygon(mouseX: any, mouseY: any, points: any): boolean;
+type ResizeSide = string;
+export declare function getPolygonCenter(points: Pt[]): {
+    cx: number;
+    cy: number;
+};
+type Pt = {
+    x: number;
+    y: number;
+};
+export declare function stabilizeTranslateOnRotate({ points, oldAngle, newAngle, tx, ty, }: {
+    points: Pt[];
+    oldAngle: number;
+    newAngle: number;
+    tx: number;
+    ty: number;
+}): {
+    tx: number;
+    ty: number;
+};
+export declare function pointsStringToArray(pointsStr: string): Pt[];
+export declare function arrayToSvgPointsAttr(points: Pt[]): string;
+type Size = {
+    width: number;
+    height: number;
+};
+export declare function getSvgElementSize(el: SVGGraphicsElement): Size | null;
+type ResizeResult = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    points?: Pt[];
+};
+type ElementComponent = {
+    fill: string;
+};
+export declare function applyResizeToSvgElement(element: SVGGraphicsElement, group: SVGGElement, resize: ResizeResult, component?: ElementComponent): void;
+type ResizeParams = {
+    element: SVGGraphicsElement;
+    group: SVGGElement;
+    resizeSide: ResizeSide;
+    widthOriginal: number;
+    heightOriginal: number;
+    deltaLocalX: number;
+    deltaLocalY: number;
+    xOriginal: number;
+    yOriginal: number;
+    angle: number;
+    seats?: any;
+};
+export declare function applyResizeWithRotation({ element, group, resizeSide, widthOriginal, heightOriginal, deltaLocalX, deltaLocalY, xOriginal, yOriginal, angle, seats, }: ResizeParams): void;
+export declare function getRotation(transformList: any): any;
+type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+type GuideLineIds = {
+    vLeft: string;
+    vCenter: string;
+    vRight: string;
+    hTop: string;
+    hCenter: string;
+    hBottom: string;
+};
+export declare const updateSelectionGuides: (svg: SVGSVGElement | null, rect: Rect, ids: GuideLineIds, range?: number) => void;
+export {};