seat-editor 3.3.13 → 3.3.15

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

@@ -0,0 +1,1235 @@
+// interface ResizeParams {
+//   selectionStart: {
+//     x: number;
+//     y: number;
+//     width: number;
+//     height: number;
+//   };
+//   rotate: number;
+//   element: {
+//     x: number;
+//     y: number;
+//     width: number;
+//     height: number;
+//   };
+//   mouse: {
+//     x: number;
+//     y: number;
+//   };
+//   mouseCurrent: {
+//     x: number;
+//     y: number;
+//   };
+// }
+export const resizeElementSelection = ({ selectionStart, currentSelection, rotate, element, mouse, mouseCurrent, }) => {
+    const dx = mouse.x - mouseCurrent.x;
+    const dy = mouse.y - mouseCurrent.y;
+    const startX = selectionStart.x;
+    const startY = selectionStart.y;
+    const angle = (rotate * Math.PI) / 180;
+    const localDx = dx * Math.cos(angle) + dy * Math.sin(angle);
+    const localDy = -dx * Math.sin(angle) + dy * Math.cos(angle);
+    const scaleYSelection = (selectionStart.height + localDy) / currentSelection.height;
+    const scaleXSelection = (selectionStart.width + localDx) / currentSelection.width;
+    const scaleConsist = Math.min(scaleXSelection, scaleYSelection);
+    const x = startX + localDx * scaleXSelection;
+    const y = startY + localDy * scaleYSelection;
+    const width = element.width * scaleConsist;
+    const height = element.height * scaleConsist;
+    return {
+        // x,
+        // y,
+        width,
+        height,
+    };
+};
+export function resizeBox({ box, dx, dy, rotate, handle }) {
+    // 1. mouse → local
+    const local = toLocalDelta(dx, dy, rotate);
+    // 2. scale
+    const { sx, sy } = calcScaleByHandle(handle, local.x, local.y, box.width, box.height);
+    const scale = (sx + sy) / 2;
+    // 3. anchor
+    const { ax, ay } = getAnchor(handle, box);
+    // 4. ukuran baru
+    const newWidth = box.width * scale;
+    const newHeight = box.height * scale;
+    // 5. posisi baru dari anchor
+    const newX = ax - newWidth * ((ax - box.x) / box.width);
+    const newY = ay - newHeight * ((ay - box.y) / box.height);
+    return {
+        x: newX,
+        y: newY,
+        width: newWidth,
+        height: newHeight,
+    };
+}
+function getAnchor(handle, box) {
+    const l = box.x;
+    const r = box.x + box.width;
+    const t = box.y;
+    const b = box.y + box.height;
+    const cx = box.x + box.width / 2;
+    const cy = box.y + box.height / 2;
+    switch (handle) {
+        case "top":
+            return { ax: cx, ay: b };
+        case "bottom":
+            return { ax: cx, ay: t };
+        case "left":
+            return { ax: r, ay: cy };
+        case "right":
+            return { ax: l, ay: cy };
+        case "top-left":
+            return { ax: r, ay: b };
+        case "top-right":
+            return { ax: l, ay: b };
+        case "bottom-left":
+            return { ax: r, ay: t };
+        case "bottom-right":
+            return { ax: l, ay: t };
+    }
+}
+function calcScaleByHandle(handle, localDx, localDy, w, h) {
+    let sx = 1;
+    let sy = 1;
+    if (handle.includes("right")) {
+        sx = (w + localDx) / w;
+    }
+    if (handle.includes("left")) {
+        sx = (w - localDx) / w;
+    }
+    if (handle.includes("bottom")) {
+        sy = (h + localDy) / h;
+    }
+    if (handle.includes("top")) {
+        sy = (h - localDy) / h;
+    }
+    return { sx, sy };
+}
+function toLocalDelta(dx, dy, rotate) {
+    const rad = (rotate * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    return {
+        x: dx * cos + dy * sin,
+        y: -dx * sin + dy * cos,
+    };
+}
+export function getAnchorByHandle(handle, box) {
+    const l = box.x;
+    const r = box.x + box.width;
+    const t = box.y;
+    const b = box.y + box.height;
+    const cx = box.x + box.width / 2;
+    const cy = box.y + box.height / 2;
+    switch (handle) {
+        case "top":
+            return { ax: cx, ay: b };
+        case "bottom":
+            return { ax: cx, ay: t };
+        case "left":
+            return { ax: r, ay: cy };
+        case "right":
+            return { ax: l, ay: cy };
+        case "top-left":
+            return { ax: r, ay: b };
+        case "top-right":
+            return { ax: l, ay: b };
+        case "bottom-left":
+            return { ax: r, ay: t };
+        case "bottom-right":
+            return { ax: l, ay: t };
+    }
+}
+import { isEqual } from "lodash";
+import { arcByDirection, distributeWithSpacing, rectToPolygonNodes, } from "../../components/layer-v3/utils";
+import { MIN_HEIGHT, MIN_WIDTH } from "./constant";
+export const resizeSeatSquare = ({ seatsPositions, r = 10, openSpace, newElement, seats, seatGroup, }) => {
+    let top = [];
+    let left = [];
+    let bottom = [];
+    let right = [];
+    const topCount = seatsPositions.top;
+    const rightCount = seatsPositions.right;
+    const bottomCount = seatsPositions.bottom;
+    const leftCount = seatsPositions.left;
+    const seatCountTopBottom = Math.ceil(Math.max(topCount, bottomCount) / 2);
+    const seatCountLeftRight = Math.ceil(Math.max(leftCount, rightCount) / 2);
+    const availableWidth = newElement.width * (1 - openSpace);
+    const availableHeight = newElement.height * (1 - openSpace);
+    const spacingWidth = availableWidth / seatCountTopBottom;
+    const spacingHeight = availableHeight / seatCountLeftRight;
+    for (let seat of seats) {
+        const sideById = seat === null || seat === void 0 ? void 0 : seat.getAttribute("id");
+        if (sideById.includes("top")) {
+            top.push(seat);
+        }
+        if (sideById.includes("left")) {
+            left.push(seat);
+        }
+        if (sideById.includes("bottom")) {
+            bottom.push(seat);
+        }
+        if (sideById.includes("right")) {
+            right.push(seat);
+        }
+    }
+    const topXs = distributeWithSpacing({
+        start: newElement.x,
+        length: newElement.width,
+        count: topCount,
+        radius: r,
+        spacing: spacingWidth,
+    });
+    const topSeats = topXs.map((cx) => ({
+        cx,
+        cy: newElement.y - r,
+        id: "top",
+    }));
+    const leftYs = distributeWithSpacing({
+        start: newElement.y,
+        length: newElement.height,
+        count: leftCount,
+        radius: r,
+        spacing: spacingHeight,
+    });
+    const leftSeats = leftYs.map((cy) => ({
+        cx: newElement.x - r,
+        cy,
+        id: "left",
+    }));
+    const bottomXs = distributeWithSpacing({
+        start: newElement.x,
+        length: newElement.width,
+        count: bottomCount,
+        radius: r,
+        spacing: spacingWidth,
+    });
+    const bottomSeats = bottomXs.map((cx) => ({
+        cx,
+        cy: newElement.y + newElement.height + r,
+        id: "bottom",
+    }));
+    const rightYs = distributeWithSpacing({
+        start: newElement.y,
+        length: newElement.height,
+        count: rightCount,
+        radius: r,
+        spacing: spacingHeight,
+    });
+    const rightSeats = rightYs.map((cy) => ({
+        cx: newElement.x + newElement.width + r,
+        cy,
+        id: "right",
+    }));
+    top === null || top === void 0 ? void 0 : top.forEach((seat, i) => {
+        var _a, _b;
+        const cx = (_a = topSeats[i]) === null || _a === void 0 ? void 0 : _a.cx;
+        const cy = (_b = topSeats[i]) === null || _b === void 0 ? void 0 : _b.cy;
+        seat.setAttribute("cx", cx);
+        seat.setAttribute("cy", cy);
+    });
+    left === null || left === void 0 ? void 0 : left.forEach((seat, i) => {
+        var _a, _b;
+        const cx = (_a = leftSeats[i]) === null || _a === void 0 ? void 0 : _a.cx;
+        const cy = (_b = leftSeats[i]) === null || _b === void 0 ? void 0 : _b.cy;
+        seat.setAttribute("cx", cx);
+        seat.setAttribute("cy", cy);
+    });
+    bottom === null || bottom === void 0 ? void 0 : bottom.forEach((seat, i) => {
+        var _a, _b;
+        const cx = (_a = bottomSeats[i]) === null || _a === void 0 ? void 0 : _a.cx;
+        const cy = (_b = bottomSeats[i]) === null || _b === void 0 ? void 0 : _b.cy;
+        seat.setAttribute("cx", cx);
+        seat.setAttribute("cy", cy);
+    });
+    right === null || right === void 0 ? void 0 : right.forEach((seat, i) => {
+        var _a, _b;
+        const cx = (_a = rightSeats[i]) === null || _a === void 0 ? void 0 : _a.cx;
+        const cy = (_b = rightSeats[i]) === null || _b === void 0 ? void 0 : _b.cy;
+        seat.setAttribute("cx", cx);
+        seat.setAttribute("cy", cy);
+    });
+    seatGroup === null || seatGroup === void 0 ? void 0 : seatGroup.setAttribute("transform", `translate(${-newElement.x}, ${-newElement.y})`);
+};
+export const resizeSeatCircle = ({ seatCount, r = 10, openSpace, seats, seatGroup, newElement, }) => {
+    const centerX = newElement.width / 2;
+    const centerY = newElement.height / 2;
+    const tableRadius = Math.min(newElement.width, newElement.height) / 2;
+    const seatRadius = r;
+    const fullAngle = Math.PI * 2;
+    const availableAngle = fullAngle * (1 - openSpace);
+    const angleStart = (fullAngle - availableAngle) / 2;
+    const angleStep = availableAngle / seatCount;
+    const seatCircles = Array.from({ length: seatCount }, (_, i) => {
+        const angle = angleStart + i * angleStep;
+        const cx = centerX + (tableRadius + seatRadius) * Math.cos(angle);
+        const cy = centerY + (tableRadius + seatRadius) * Math.sin(angle);
+        return { cx, cy };
+    });
+    seatCircles.forEach((seatCircle, i) => {
+        const seat = seats[i];
+        seat.setAttribute("cx", seatCircle.cx);
+        seat.setAttribute("cy", seatCircle.cy);
+    });
+};
+export const resizeSeatSide = ({ seatsPositions, r = 10, openSpace, newElement, seats, seatGroup, }) => {
+    let top = [];
+    let left = [];
+    let bottom = [];
+    let right = [];
+    const seatRaidus = Math.max(newElement.width, newElement.height) * 0.15;
+    const topCount = seatsPositions.top;
+    const rightCount = seatsPositions.right;
+    const bottomCount = seatsPositions.bottom;
+    const leftCount = seatsPositions.left;
+    const seatCountTopBottom = Math.ceil(Math.max(topCount, bottomCount) / 2);
+    const seatCountLeftRight = Math.ceil(Math.max(leftCount, rightCount) / 2);
+    const availableWidth = newElement.width * (1 - openSpace);
+    const availableHeight = newElement.height * (1 - openSpace);
+    const spacingWidth = availableWidth / seatCountTopBottom;
+    const spacingHeight = availableHeight / seatCountLeftRight;
+    for (let seat of seats) {
+        const sideById = seat === null || seat === void 0 ? void 0 : seat.getAttribute("id");
+        if (sideById.includes("top")) {
+            top.push(seat);
+        }
+        if (sideById.includes("left")) {
+            left.push(seat);
+        }
+        if (sideById.includes("bottom")) {
+            bottom.push(seat);
+        }
+        if (sideById.includes("right")) {
+            right.push(seat);
+        }
+    }
+    const topXs = distributeWithSpacing({
+        start: newElement.x,
+        length: newElement.width,
+        count: topCount,
+        radius: seatRaidus,
+        spacing: spacingWidth,
+    });
+    const topSeats = topXs.map((cx) => ({
+        cx,
+        cy: newElement.y - seatRaidus,
+        id: "top",
+        d: arcByDirection({
+            cx,
+            cy: newElement.y - seatRaidus * 0.1,
+            r: seatRaidus,
+            direction: "top",
+            fraction: 0.4,
+        }),
+    }));
+    const leftYs = distributeWithSpacing({
+        start: newElement.y,
+        length: newElement.height,
+        count: leftCount,
+        radius: seatRaidus,
+        spacing: spacingHeight,
+    });
+    const leftSeats = leftYs.map((cy) => ({
+        cx: newElement.x - seatRaidus * 0.1,
+        cy,
+        id: "left",
+        d: arcByDirection({
+            cx: newElement.x - seatRaidus * 0.1,
+            cy,
+            r: seatRaidus,
+            direction: "left",
+            fraction: 0.4,
+        }),
+    }));
+    const bottomXs = distributeWithSpacing({
+        start: newElement.x,
+        length: newElement.width,
+        count: bottomCount,
+        radius: seatRaidus,
+        spacing: spacingWidth,
+    });
+    const bottomSeats = bottomXs.map((cx) => ({
+        cx,
+        cy: newElement.y + newElement.height + seatRaidus * 0.1,
+        id: "bottom",
+        d: arcByDirection({
+            cx,
+            cy: newElement.y + newElement.height + seatRaidus * 0.1,
+            r: seatRaidus,
+            direction: "bottom",
+            fraction: 0.4,
+        }),
+    }));
+    const rightYs = distributeWithSpacing({
+        start: newElement.y,
+        length: newElement.height,
+        count: rightCount,
+        radius: r,
+        spacing: spacingHeight,
+    });
+    const rightSeats = rightYs.map((cy) => ({
+        cx: newElement.x + newElement.width + +seatRaidus * 0.1,
+        cy,
+        id: "right",
+        d: arcByDirection({
+            cx: newElement.x + newElement.width + +seatRaidus * 0.1,
+            cy,
+            r,
+            direction: "right",
+            fraction: 0.4,
+        }),
+    }));
+    top === null || top === void 0 ? void 0 : top.forEach((seat, i) => {
+        var _a;
+        seat.setAttribute("d", (_a = topSeats[i]) === null || _a === void 0 ? void 0 : _a.d);
+    });
+    left === null || left === void 0 ? void 0 : left.forEach((seat, i) => {
+        var _a;
+        seat.setAttribute("d", (_a = leftSeats[i]) === null || _a === void 0 ? void 0 : _a.d);
+    });
+    bottom === null || bottom === void 0 ? void 0 : bottom.forEach((seat, i) => {
+        var _a;
+        seat.setAttribute("d", (_a = bottomSeats[i]) === null || _a === void 0 ? void 0 : _a.d);
+    });
+    right === null || right === void 0 ? void 0 : right.forEach((seat, i) => {
+        var _a;
+        seat.setAttribute("d", (_a = rightSeats[i]) === null || _a === void 0 ? void 0 : _a.d);
+    });
+    seatGroup === null || seatGroup === void 0 ? void 0 : seatGroup.setAttribute("transform", `translate(${-newElement.x}, ${-newElement.y})`);
+};
+export const resizeSeatRectCircle = ({ seatsPositions, r = 10, openSpace, newElement, seats, seatGroup, }) => {
+    let top = [];
+    let left = [];
+    let bottom = [];
+    let right = [];
+    const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+    const width = newElement.width;
+    const height = newElement.height;
+    const x = newElement.x;
+    const y = newElement.y;
+    const seatRadius = Math.min(width, height) * 0.2;
+    const topCount = seatsPositions.top;
+    const rightCount = seatsPositions.right;
+    const bottomCount = seatsPositions.bottom;
+    const leftCount = seatsPositions.left;
+    const seatCountTopBottom = Math.ceil(Math.max(topCount, bottomCount) / 2);
+    const seatCountLeftRight = Math.ceil(Math.max(leftCount, rightCount) / 2);
+    const availableWidth = newElement.width * (1 - openSpace);
+    const availableHeight = newElement.height * (1 - openSpace);
+    const spacingWidth = availableWidth / seatCountTopBottom;
+    const spacingHeight = availableHeight / seatCountLeftRight;
+    const base = clamp(Math.min(width, height) * 0.08, 12, 28);
+    const seatSizeTB = {
+        w: base * 1.8, // lebih panjang
+        h: base * 0.9, // lebih tipis
+    };
+    const seatSizeLR = {
+        w: base * 0.9, // lebih tipis
+        h: base * 1.8, // lebih panjang
+    };
+    for (let seat of seats) {
+        const sideById = seat === null || seat === void 0 ? void 0 : seat.getAttribute("id");
+        if (sideById.includes("top")) {
+            top.push(seat);
+        }
+        if (sideById.includes("left")) {
+            left.push(seat);
+        }
+        if (sideById.includes("bottom")) {
+            bottom.push(seat);
+        }
+        if (sideById.includes("right")) {
+            right.push(seat);
+        }
+    }
+    const topXs = distributeWithSpacing({
+        start: newElement.x,
+        length: newElement.width,
+        count: topCount,
+        radius: seatRadius,
+        spacing: spacingWidth,
+    });
+    const topSeats = topXs.map((cx) => ({
+        x: cx - seatSizeTB.w / 2,
+        y: y - seatSizeTB.h,
+        width: seatSizeTB.w,
+        height: seatSizeTB.h,
+        id: "top",
+    }));
+    const leftYs = distributeWithSpacing({
+        start: newElement.y,
+        length: newElement.height,
+        count: leftCount,
+        radius: seatRadius,
+        spacing: spacingHeight,
+    });
+    const leftSeats = leftYs.map((cy) => ({
+        x: -seatSizeLR.w,
+        y: cy - seatSizeLR.h / 2,
+        width: seatSizeLR.w,
+        height: seatSizeLR.h,
+        id: "left",
+    }));
+    const bottomXs = distributeWithSpacing({
+        start: newElement.x,
+        length: newElement.width,
+        count: bottomCount,
+        radius: seatRadius,
+        spacing: spacingWidth,
+    });
+    const bottomSeats = bottomXs.map((cx) => ({
+        x: cx - seatSizeTB.w / 2,
+        y: y + height,
+        width: seatSizeTB.w,
+        height: seatSizeTB.h,
+        id: "bottom",
+    }));
+    const rightYs = distributeWithSpacing({
+        start: newElement.y,
+        length: newElement.height,
+        count: rightCount,
+        radius: seatRadius,
+        spacing: spacingHeight,
+    });
+    const rightSeats = rightYs.map((cy) => ({
+        x: width,
+        y: cy - seatSizeLR.h / 2,
+        width: seatSizeLR.w,
+        height: seatSizeLR.h,
+        id: "right",
+    }));
+    top === null || top === void 0 ? void 0 : top.forEach((seat, i) => {
+        var _a, _b, _c, _d;
+        seat.setAttribute("x", (_a = topSeats[i]) === null || _a === void 0 ? void 0 : _a.x);
+        seat.setAttribute("y", (_b = topSeats[i]) === null || _b === void 0 ? void 0 : _b.y);
+        seat.setAttribute("height", (_c = topSeats[i]) === null || _c === void 0 ? void 0 : _c.height);
+        seat.setAttribute("width", (_d = topSeats[i]) === null || _d === void 0 ? void 0 : _d.width);
+    });
+    left === null || left === void 0 ? void 0 : left.forEach((seat, i) => {
+        var _a, _b, _c, _d;
+        seat.setAttribute("x", (_a = leftSeats[i]) === null || _a === void 0 ? void 0 : _a.x);
+        seat.setAttribute("y", (_b = leftSeats[i]) === null || _b === void 0 ? void 0 : _b.y);
+        seat.setAttribute("height", (_c = leftSeats[i]) === null || _c === void 0 ? void 0 : _c.height);
+        seat.setAttribute("width", (_d = leftSeats[i]) === null || _d === void 0 ? void 0 : _d.width);
+    });
+    bottom === null || bottom === void 0 ? void 0 : bottom.forEach((seat, i) => {
+        var _a, _b, _c, _d;
+        seat.setAttribute("x", (_a = bottomSeats[i]) === null || _a === void 0 ? void 0 : _a.x);
+        seat.setAttribute("y", (_b = bottomSeats[i]) === null || _b === void 0 ? void 0 : _b.y);
+        seat.setAttribute("height", (_c = bottomSeats[i]) === null || _c === void 0 ? void 0 : _c.height);
+        seat.setAttribute("width", (_d = bottomSeats[i]) === null || _d === void 0 ? void 0 : _d.width);
+    });
+    right === null || right === void 0 ? void 0 : right.forEach((seat, i) => {
+        var _a, _b, _c, _d;
+        seat.setAttribute("x", (_a = rightSeats[i]) === null || _a === void 0 ? void 0 : _a.x);
+        seat.setAttribute("y", (_b = rightSeats[i]) === null || _b === void 0 ? void 0 : _b.y);
+        seat.setAttribute("height", (_c = rightSeats[i]) === null || _c === void 0 ? void 0 : _c.height);
+        seat.setAttribute("width", (_d = rightSeats[i]) === null || _d === void 0 ? void 0 : _d.width);
+    });
+    seatGroup === null || seatGroup === void 0 ? void 0 : seatGroup.setAttribute("transform", `translate(${-newElement.x}, ${-newElement.y})`);
+};
+export const resizeSeatRectSquare = ({ seatsPositions, r = 10, openSpace, newElement, seats, seatGroup, }) => {
+    let top = [];
+    let left = [];
+    let bottom = [];
+    let right = [];
+    const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+    const width = newElement.width;
+    const height = newElement.height;
+    const y = newElement.y;
+    const x = newElement.x;
+    const base = clamp(Math.min(width, height) * 0.08, 12, 28);
+    const seatSizeTB = {
+        w: base * 1.8, // lebih panjang
+        h: base * 0.9, // lebih tipis
+    };
+    const seatSizeLR = {
+        w: base * 0.9, // lebih tipis
+        h: base * 1.8, // lebih panjang
+    };
+    const seatRadius = Math.min(width, height) * 0.2;
+    const topCount = seatsPositions.top;
+    const rightCount = seatsPositions.right;
+    const bottomCount = seatsPositions.bottom;
+    const leftCount = seatsPositions.left;
+    const seatCountTopBottom = Math.ceil(Math.max(topCount, bottomCount) / 2);
+    const seatCountLeftRight = Math.ceil(Math.max(leftCount, rightCount) / 2);
+    const availableWidth = width * (1 - openSpace);
+    const availableHeight = height * (1 - openSpace);
+    const spacingWidth = availableWidth / seatCountTopBottom;
+    const spacingHeight = availableHeight / seatCountLeftRight;
+    for (let seat of seats) {
+        const sideById = seat === null || seat === void 0 ? void 0 : seat.getAttribute("id");
+        if (sideById.includes("top")) {
+            top.push(seat);
+        }
+        if (sideById.includes("left")) {
+            left.push(seat);
+        }
+        if (sideById.includes("bottom")) {
+            bottom.push(seat);
+        }
+        if (sideById.includes("right")) {
+            right.push(seat);
+        }
+    }
+    const topXs = distributeWithSpacing({
+        start: newElement.x,
+        length: width,
+        count: topCount,
+        radius: seatRadius,
+        spacing: spacingWidth,
+    });
+    const topSeats = topXs.map((cx) => ({
+        x: (cx) - seatSizeTB.w / 2,
+        y: y - seatSizeTB.h,
+        width: seatSizeTB.w,
+        height: seatSizeTB.h,
+        id: "top",
+    }));
+    const leftYs = distributeWithSpacing({
+        start: newElement.y,
+        length: height,
+        count: leftCount,
+        radius: seatRadius,
+        spacing: spacingHeight,
+    });
+    const leftSeats = leftYs.map((cy) => ({
+        x: -seatSizeLR.w,
+        y: cy - seatSizeLR.h / 2,
+        width: seatSizeLR.w,
+        height: seatSizeLR.h,
+        id: "left",
+    }));
+    const bottomXs = distributeWithSpacing({
+        start: newElement.x,
+        length: newElement.width,
+        count: bottomCount,
+        radius: seatRadius,
+        spacing: spacingWidth,
+    });
+    const bottomSeats = bottomXs.map((cx) => ({
+        x: cx - seatSizeTB.w / 2,
+        y: y + height,
+        width: seatSizeTB.w,
+        height: seatSizeTB.h,
+        id: "bottom",
+    }));
+    const rightYs = distributeWithSpacing({
+        start: newElement.y,
+        length: newElement.height,
+        count: rightCount,
+        radius: seatRadius,
+        spacing: spacingHeight,
+    });
+    const rightSeats = rightYs.map((cy) => ({
+        x: width,
+        y: cy - seatSizeLR.h / 2,
+        width: seatSizeLR.w,
+        height: seatSizeLR.h,
+        id: "right",
+    }));
+    top === null || top === void 0 ? void 0 : top.forEach((seat, i) => {
+        var _a, _b, _c, _d;
+        seat.setAttribute("x", (_a = topSeats[i]) === null || _a === void 0 ? void 0 : _a.x);
+        seat.setAttribute("y", (_b = topSeats[i]) === null || _b === void 0 ? void 0 : _b.y);
+        seat.setAttribute("height", (_c = topSeats[i]) === null || _c === void 0 ? void 0 : _c.height);
+        seat.setAttribute("width", (_d = topSeats[i]) === null || _d === void 0 ? void 0 : _d.width);
+    });
+    left === null || left === void 0 ? void 0 : left.forEach((seat, i) => {
+        var _a, _b, _c, _d;
+        seat.setAttribute("x", (_a = leftSeats[i]) === null || _a === void 0 ? void 0 : _a.x);
+        seat.setAttribute("y", (_b = leftSeats[i]) === null || _b === void 0 ? void 0 : _b.y);
+        seat.setAttribute("height", (_c = leftSeats[i]) === null || _c === void 0 ? void 0 : _c.height);
+        seat.setAttribute("width", (_d = leftSeats[i]) === null || _d === void 0 ? void 0 : _d.width);
+    });
+    bottom === null || bottom === void 0 ? void 0 : bottom.forEach((seat, i) => {
+        var _a, _b, _c, _d;
+        seat.setAttribute("x", (_a = bottomSeats[i]) === null || _a === void 0 ? void 0 : _a.x);
+        seat.setAttribute("y", (_b = bottomSeats[i]) === null || _b === void 0 ? void 0 : _b.y);
+        seat.setAttribute("height", (_c = bottomSeats[i]) === null || _c === void 0 ? void 0 : _c.height);
+        seat.setAttribute("width", (_d = bottomSeats[i]) === null || _d === void 0 ? void 0 : _d.width);
+    });
+    right === null || right === void 0 ? void 0 : right.forEach((seat, i) => {
+        var _a, _b, _c, _d;
+        seat.setAttribute("x", (_a = rightSeats[i]) === null || _a === void 0 ? void 0 : _a.x);
+        seat.setAttribute("y", (_b = rightSeats[i]) === null || _b === void 0 ? void 0 : _b.y);
+        seat.setAttribute("height", (_c = rightSeats[i]) === null || _c === void 0 ? void 0 : _c.height);
+        seat.setAttribute("width", (_d = rightSeats[i]) === null || _d === void 0 ? void 0 : _d.width);
+    });
+    seatGroup === null || seatGroup === void 0 ? void 0 : seatGroup.setAttribute("transform", `translate(${-newElement.x}, ${-newElement.y})`);
+};
+export function mergeById(base, updates) {
+    const map = new Map(updates.map((item) => [item.id, item]));
+    return base.map((item) => map.has(item.id) ? Object.assign(Object.assign({}, item), map.get(item.id)) : item);
+}
+export function updateSingleComponent(state, component, setState) {
+    const prev = state.find((item) => item.id === component.id);
+    if (!prev || isEqual(prev, component))
+        return;
+    const next = mergeById(state, [component]);
+    setState(next);
+    return next;
+}
+export function updateManyComponents(state, components, setState) {
+    if (!components.length)
+        return state;
+    const next = mergeById(state, components);
+    setState(next);
+    return next;
+}
+export function normalizeAngle(angle) {
+    return ((angle % 360) + 360) % 360;
+}
+export function createTableGhost({ x, y, width, height, fill, shape, id = "ghost-element-create", }) {
+    // buat group dulu
+    const SVG_NS = "http://www.w3.org/2000/svg";
+    let el = null;
+    // tambahkan rectangle
+    if (shape === "square" ||
+        shape === "table-seat-circle" ||
+        shape === "selection-box" ||
+        shape === "bounding-box") {
+        el = document.createElementNS(SVG_NS, "rect");
+        el.setAttribute("id", id);
+        el.setAttribute("x", x);
+        el.setAttribute("y", y);
+        el.setAttribute("width", width);
+        el.setAttribute("height", height);
+        el.setAttribute("fill", fill);
+        el.setAttribute("stroke", "blue");
+        el.setAttribute("data-table", JSON.stringify({
+            x,
+            y,
+            width,
+            height,
+            shape,
+            fill,
+            stroke: "blue",
+            rotation: 0,
+        }));
+    }
+    else if (shape === "circle") {
+        el = document.createElementNS(SVG_NS, "circle");
+        el.setAttribute("id", id);
+        el.setAttribute("cx", x);
+        el.setAttribute("cy", y);
+        el.setAttribute("r", Math.min(width, height) / 2);
+        el.setAttribute("fill", fill);
+        el.setAttribute("stroke", "blue");
+        el.setAttribute("data-table", JSON.stringify({
+            x,
+            y,
+            width,
+            height,
+            shape,
+            fill,
+            stroke: "blue",
+            rotation: 0,
+        }));
+    }
+    else if (shape === "text") {
+        el = document.createElementNS(SVG_NS, "text");
+        el.setAttribute("id", id);
+        el.setAttribute("x", x);
+        el.setAttribute("y", y + height / 2);
+        el.setAttribute("fill", "#000000");
+        el.setAttribute("data-table", JSON.stringify({
+            x,
+            y,
+            width,
+            height,
+            shape,
+            fill,
+            stroke: "blue",
+            rotation: 0,
+            fontSize: 14,
+        }));
+        el.textContent = "Text";
+        el.setAttribute("color", "white");
+        el.setAttribute("fontSize", "14px");
+    }
+    return el;
+}
+export function updateSelectionBox(svg, boxSelection, id, unFollowCursor) {
+    var _a, _b, _c, _d, _e;
+    const rect = svg.querySelector("#selection-lines");
+    if (!rect)
+        return;
+    const nodes = svg.querySelectorAll(`#circle-corner-${id}`);
+    const helperRotate = svg.querySelector("#help-group-0");
+    const lineHelp = svg.querySelector("#line-help");
+    const circleHelp = svg.querySelector("#circle-help");
+    // 1. Move selection group
+    rect.setAttribute("transform", `translate(${boxSelection.x}, ${boxSelection.y})`);
+    const nodesRaw = rectToPolygonNodes(boxSelection.width, boxSelection.height);
+    if (!unFollowCursor) {
+        const mx = (_a = nodesRaw === null || nodesRaw === void 0 ? void 0 : nodesRaw[1]) === null || _a === void 0 ? void 0 : _a.x;
+        const my = (_b = nodesRaw === null || nodesRaw === void 0 ? void 0 : nodesRaw[3]) === null || _b === void 0 ? void 0 : _b.y;
+        const x1 = mx;
+        const y1 = my;
+        const x2 = mx;
+        const y2 = my - boxSelection.height + 10;
+        lineHelp === null || lineHelp === void 0 ? void 0 : lineHelp.setAttribute("x1", String(x1));
+        lineHelp === null || lineHelp === void 0 ? void 0 : lineHelp.setAttribute("y1", String(y1));
+        lineHelp === null || lineHelp === void 0 ? void 0 : lineHelp.setAttribute("x2", String(x2));
+        lineHelp === null || lineHelp === void 0 ? void 0 : lineHelp.setAttribute("y2", String(y2));
+        circleHelp === null || circleHelp === void 0 ? void 0 : circleHelp.setAttribute("cx", String(x2));
+        circleHelp === null || circleHelp === void 0 ? void 0 : circleHelp.setAttribute("cy", String(y2));
+        helperRotate.setAttribute("transform", `translate(${boxSelection.x}, ${boxSelection.y})`);
+    }
+    // 2. Resize rect
+    const selectionRect = (_e = (_d = (_c = rect.children) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.children) === null || _e === void 0 ? void 0 : _e[0];
+    if (selectionRect) {
+        selectionRect.setAttribute("width", String(boxSelection.width));
+        selectionRect.setAttribute("height", String(boxSelection.height));
+    }
+    // 3. Update corner nodes
+    const points = rectToPolygonNodes(boxSelection.width, boxSelection.height);
+    nodes.forEach((node, index) => {
+        const p = points[index];
+        if (!p)
+            return;
+        node.setAttribute("cx", String(p.x));
+        node.setAttribute("cy", String(p.y));
+    });
+}
+export function getGlobalBBox(svg, el) {
+    var _a;
+    const bbox = el === null || el === void 0 ? void 0 : el.getBBox();
+    // matrix dari element ke screen pixel
+    const m = el === null || el === void 0 ? void 0 : el.getScreenCTM();
+    if (!m)
+        return null;
+    // matrix dari screen pixel ke svg user coords
+    const screenToSvg = (_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse();
+    if (!screenToSvg)
+        return null;
+    function transformPoint(x, y) {
+        const p = new DOMPoint(x, y)
+            .matrixTransform(m)
+            .matrixTransform(screenToSvg);
+        return { x: p.x, y: p.y };
+    }
+    const p1 = transformPoint(bbox.x, bbox.y);
+    const p2 = transformPoint(bbox.x + bbox.width, bbox.y);
+    const p3 = transformPoint(bbox.x + bbox.width, bbox.y + bbox.height);
+    const p4 = transformPoint(bbox.x, bbox.y + bbox.height);
+    const xs = [p1.x, p2.x, p3.x, p4.x];
+    const ys = [p1.y, p2.y, p3.y, p4.y];
+    // const rotation = Math.atan2(p2.y - p1.y, p2.x - p1.x) * (180 / Math.PI);
+    return {
+        x: Math.min(...xs),
+        y: Math.min(...ys),
+        width: Math.max(...xs) - Math.min(...xs),
+        height: Math.max(...ys) - Math.min(...ys),
+        // rotation
+    };
+}
+function localToWorld(dx, dy, angle) {
+    const cosR = Math.cos(angle);
+    const sinR = Math.sin(angle);
+    return {
+        x: dx * cosR - dy * sinR,
+        y: dx * sinR + dy * cosR,
+    };
+}
+export function getTranslate(el) {
+    if (!el)
+        return {
+            x: null,
+            y: null,
+        };
+    const t = el.getAttribute("transform") || "";
+    // cari pola translate( x , y )
+    const match = t.match(/translate\(\s*([-\d.]+)[ ,]+([-\d.]+)\s*\)/);
+    if (!match)
+        return { x: 0, y: 0 };
+    return {
+        x: parseFloat(match[1]),
+        y: parseFloat(match[2]),
+    };
+}
+export function getSize(el) {
+    const bbox = el.getBBox();
+    return {
+        width: bbox.width,
+        height: bbox.height,
+    };
+}
+export function stabilizeRotation(tx, ty, W, H, oldAngle, newAngle) {
+    const cx = W / 2;
+    const cy = H / 2;
+    const oldA = (oldAngle * Math.PI) / 180;
+    const newA = (newAngle * Math.PI) / 180;
+    // old center global
+    const oldGx = tx + (cx * Math.cos(oldA) - cy * Math.sin(oldA));
+    const oldGy = ty + (cx * Math.sin(oldA) + cy * Math.cos(oldA));
+    // new center global
+    const newGx = tx + (cx * Math.cos(newA) - cy * Math.sin(newA));
+    const newGy = ty + (cx * Math.sin(newA) + cy * Math.cos(newA));
+    // delta shift
+    const dx = oldGx - newGx;
+    const dy = oldGy - newGy;
+    return { tx: tx + dx, ty: ty + dy };
+}
+const SNAP_RADIUS = 10;
+export function isClosingPolygon(mouseX, mouseY, points) {
+    const p0 = points[0]; // titik awal
+    const dx = mouseX - p0.x;
+    const dy = mouseY - p0.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    return dist < SNAP_RADIUS;
+}
+export function getPolygonCenter(points) {
+    if (!points.length) {
+        return { cx: 0, cy: 0 };
+    }
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let 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 {
+        cx: (minX + maxX) / 2,
+        cy: (minY + maxY) / 2,
+    };
+}
+export function stabilizeTranslateOnRotate({ points, oldAngle, newAngle, tx, ty, }) {
+    // center polygon (bbox center)
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const p of points) {
+        minX = Math.min(minX, p.x);
+        minY = Math.min(minY, p.y);
+        maxX = Math.max(maxX, p.x);
+        maxY = Math.max(maxY, p.y);
+    }
+    const cx = (minX + maxX) / 2;
+    const cy = (minY + maxY) / 2;
+    const r0 = (oldAngle * Math.PI) / 180;
+    const r1 = (newAngle * Math.PI) / 180;
+    const x0 = cx * Math.cos(r0) - cy * Math.sin(r0);
+    const y0 = cx * Math.sin(r0) + cy * Math.cos(r0);
+    const x1 = cx * Math.cos(r1) - cy * Math.sin(r1);
+    const y1 = cx * Math.sin(r1) + cy * Math.cos(r1);
+    return {
+        tx: tx + (x0 - x1),
+        ty: ty + (y0 - y1),
+    };
+}
+export function pointsStringToArray(pointsStr) {
+    return pointsStr
+        .trim()
+        .split(/\s+/) // pisah antar titik
+        .map((pair) => {
+        const [x, y] = pair.split(",").map(Number);
+        return { x, y };
+    })
+        .filter((p) => !Number.isNaN(p.x) && !Number.isNaN(p.y));
+}
+export function arrayToSvgPointsAttr(points) {
+    return points === null || points === void 0 ? void 0 : points.map((p) => `${p.x},${p.y}`).join(" ");
+}
+export function getSvgElementSize(el) {
+    if (el instanceof SVGRectElement) {
+        return {
+            width: el.width.baseVal.value,
+            height: el.height.baseVal.value,
+        };
+    }
+    if (el instanceof SVGCircleElement) {
+        const r = el.r.baseVal.value;
+        return {
+            width: r * 2,
+            height: r * 2,
+        };
+    }
+    if (el instanceof SVGEllipseElement) {
+        return {
+            width: el.rx.baseVal.value * 2,
+            height: el.ry.baseVal.value * 2,
+        };
+    }
+    if (el instanceof SVGImageElement) {
+        return {
+            width: el.width.baseVal.value,
+            height: el.height.baseVal.value,
+        };
+    }
+    return {
+        width: 0,
+        height: 0,
+    };
+}
+const updateSvgAttrs = (el, attrs) => {
+    if (!el)
+        return;
+    for (const key in attrs) {
+        const value = attrs[key];
+        if (value == null)
+            continue;
+        const next = String(value);
+        if (el.getAttribute(key) !== next) {
+            el.setAttribute(key, next);
+        }
+    }
+};
+export function applyResizeToSvgElement(element, group, resize, component) {
+    const tagName = element.tagName.toLowerCase();
+    switch (tagName) {
+        case "rect":
+        case "image": {
+            updateSvgAttrs(element, {
+                width: resize.width < 60 ? 60 : resize.width,
+                height: resize.height < MIN_HEIGHT ? MIN_HEIGHT : resize.height,
+                // fill: component.fill,
+            });
+            updateSvgAttrs(group, {
+                transform: `translate(${resize.x}, ${resize.y})`,
+            });
+            break;
+        }
+        case "circle": {
+            const width = resize.width < MIN_WIDTH ? MIN_WIDTH : resize.width;
+            const height = resize.height < MIN_HEIGHT ? MIN_HEIGHT : resize.height;
+            const r = Math.min(width, height) / 2;
+            updateSvgAttrs(element, {
+                r,
+                cx: width / 2,
+                cy: height / 2,
+                // fill: component.fill,
+            });
+            group.setAttribute("transform", `translate(${resize.x}, ${resize.y})`);
+            // inner
+            break;
+        }
+        case "ellipse": {
+            element.setAttribute("rx", String(resize.width / 2));
+            element.setAttribute("ry", String(resize.height / 2));
+            break;
+        }
+        case "polygon": {
+            const points = resize.points;
+            element.setAttribute("points", arrayToSvgPointsAttr(points));
+            break;
+        }
+        default: {
+            console.warn(`[applyResizeToSvgElement] Unsupported SVG tag: ${tagName}`);
+        }
+    }
+    // translate selalu di group
+}
+function applySizeToSvgElement(element, width, height) {
+    const tag = element.tagName.toLowerCase();
+    if (tag === "rect" || tag === "image") {
+        element.setAttribute("width", String(width));
+        element.setAttribute("height", String(height));
+        return;
+    }
+    if (tag === "circle") {
+        const r = Math.max(0, Math.min(width, height) / 2);
+        element.setAttribute("r", String(r));
+        element.setAttribute("cx", String(width / 2));
+        element.setAttribute("cy", String(height / 2));
+        return;
+    }
+    if (tag === "ellipse") {
+        element.setAttribute("rx", String(width / 2));
+        element.setAttribute("ry", String(height / 2));
+        return;
+    }
+}
+const RESIZE_RULES_SECOND = {
+    right: {
+        widthFactor: 1,
+        heightFactor: 0,
+        moveX: () => 0,
+        moveY: () => 0,
+    },
+    left: {
+        widthFactor: -1,
+        heightFactor: 0,
+        moveX: (dx) => dx,
+        moveY: () => 0,
+    },
+    bottom: {
+        widthFactor: 0,
+        heightFactor: 1,
+        moveX: () => 0,
+        moveY: () => 0,
+    },
+    top: {
+        widthFactor: 0,
+        heightFactor: -1,
+        moveX: () => 0,
+        moveY: (dy) => dy,
+    },
+    "bottom-right": {
+        widthFactor: 1,
+        heightFactor: 1,
+        moveX: () => 0,
+        moveY: () => 0,
+    },
+    "bottom-left": {
+        widthFactor: -1,
+        heightFactor: 1,
+        moveX: (dx) => dx,
+        moveY: () => 0,
+    },
+    "top-right": {
+        widthFactor: 1,
+        heightFactor: -1,
+        moveX: () => 0,
+        moveY: (dy) => dy,
+    },
+    "top-left": {
+        widthFactor: -1,
+        heightFactor: -1,
+        moveX: (dx) => dx,
+        moveY: (dy) => dy,
+    },
+};
+const RESIZE_RULES = {
+    "bottom-right": {
+        widthFactor: 1,
+        heightFactor: 1,
+        moveLocalX: () => 0,
+        moveLocalY: () => 0,
+    },
+    "bottom-left": {
+        widthFactor: -1,
+        heightFactor: 1,
+        moveLocalX: (dx) => dx,
+        moveLocalY: () => 0,
+    },
+    "top-left": {
+        widthFactor: -1,
+        heightFactor: -1,
+        moveLocalX: (dx) => dx,
+        moveLocalY: (_, dy) => dy,
+    },
+    "top-right": {
+        widthFactor: 1,
+        heightFactor: -1,
+        moveLocalX: () => 0,
+        moveLocalY: (_, dy) => dy,
+    },
+    left: {
+        widthFactor: -1,
+        heightFactor: 0,
+        moveLocalX: (dx) => dx,
+        moveLocalY: () => 0,
+    },
+    right: {
+        widthFactor: 1,
+        heightFactor: 0,
+        moveLocalX: () => 0,
+        moveLocalY: () => 0,
+    },
+    top: {
+        widthFactor: 0,
+        heightFactor: -1,
+        moveLocalX: () => 0,
+        moveLocalY: (_, dy) => dy,
+    },
+    bottom: {
+        widthFactor: 0,
+        heightFactor: 1,
+        moveLocalX: () => 0,
+        moveLocalY: () => 0,
+    },
+};
+export function applyResizeWithRotation({ element, group, resizeSide, widthOriginal, heightOriginal, deltaLocalX, deltaLocalY, xOriginal, yOriginal, angle, seats, }) {
+    const rule = RESIZE_RULES[resizeSide];
+    let newWidth = widthOriginal;
+    let newHeight = heightOriginal;
+    if (rule.widthFactor !== 0) {
+        newWidth = widthOriginal + rule.widthFactor * deltaLocalX;
+    }
+    if (rule.heightFactor !== 0) {
+        newHeight = heightOriginal + rule.heightFactor * deltaLocalY;
+    }
+    // clamp
+    newWidth = Math.max(0, newWidth);
+    newHeight = Math.max(0, newHeight);
+    // 🔹 apply size (rect / circle / ellipse)
+    applySizeToSvgElement(element, newWidth, newHeight);
+    // 🔹 move anchor (kalau perlu)
+    const moveLocalX = rule.moveLocalX(deltaLocalX, deltaLocalY);
+    const moveLocalY = rule.moveLocalY(deltaLocalX, deltaLocalY);
+    if (moveLocalX !== 0 || moveLocalY !== 0) {
+        const { x: mx, y: my } = localToWorld(moveLocalX, moveLocalY, angle);
+        group.setAttribute("transform", `translate(${xOriginal + mx}, ${yOriginal + my})`);
+    }
+}
+export function getRotation(transformList) {
+    for (let i = 0; i < (transformList === null || transformList === void 0 ? void 0 : transformList.numberOfItems); i++) {
+        const t = transformList.getItem(i);
+        if (t.type === SVGTransform.SVG_TRANSFORM_ROTATE) {
+            return t.angle;
+        }
+    }
+    return 0;
+}
+function toLocal(x, y, cx, cy, angle) {
+    const dx = x - cx;
+    const dy = y - cy;
+    const cos = Math.cos(-angle);
+    const sin = Math.sin(-angle);
+    return {
+        x: dx * cos - dy * sin,
+        y: dx * sin + dy * cos,
+    };
+}
+function toGlobal(lx, ly, cx, cy, angle) {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    return {
+        x: cx + lx * cos - ly * sin,
+        y: cy + lx * sin + ly * cos,
+    };
+}
+export const updateSelectionGuides = (svg, rect, ids, range = 10000) => {
+    if (!svg)
+        return;
+    const { x, y, width, height } = rect;
+    const cx = x + width / 2;
+    const cy = y + height / 2;
+    const v = (id, xPos) => {
+        const line = svg.querySelector(`#${id}`);
+        if (!line)
+            return;
+        line.setAttribute("x1", `${xPos}`);
+        line.setAttribute("x2", `${xPos}`);
+        line.setAttribute("y1", `${-range}`);
+        line.setAttribute("y2", `${range}`);
+    };
+    const h = (id, yPos) => {
+        const line = svg.querySelector(`#${id}`);
+        if (!line)
+            return;
+        line.setAttribute("y1", `${yPos}`);
+        line.setAttribute("y2", `${yPos}`);
+        line.setAttribute("x1", `${-range}`);
+        line.setAttribute("x2", `${range}`);
+    };
+    // vertical guides (dipakai top & bottom)
+    v(ids.vLeft, x);
+    v(ids.vCenter, cx);
+    v(ids.vRight, x + width);
+    // horizontal guides (dipakai left & right)
+    h(ids.hTop, y);
+    h(ids.hCenter, cy);
+    h(ids.hBottom, y + height);
+};