seat-editor 2.1.2 → 3.0.0

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

@@ -0,0 +1,20 @@
+import { EventHandleType } from "@/dto/event-handler";
+import { PropertiesProps } from "@/dto/table";
+import { TableMatchEvent } from "@/features/view-only-3";
+interface LayersProps {
+    components?: PropertiesProps[];
+    selectedComponent?: PropertiesProps;
+    activeTool?: string;
+    onBlur?: () => void;
+    selectedTable?: PropertiesProps;
+    iconTags?: {
+        icon: React.JSX.Element;
+        key: string;
+    }[];
+    eventMatchTable?: TableMatchEvent[];
+    onHighlightGroup?: (group: SVGGElement, eventType: EventHandleType) => void;
+    onForceRestoreGroup?: (group: SVGGElement, eventType: EventHandleType) => void;
+    selectedTableColor?: string;
+}
+declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, }: LayersProps) => import("react/jsx-runtime").JSX.Element;
+export default Layers;

package/dist/components/layer-v4/index.js

@@ -0,0 +1,445 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { isEmpty, omit } from "lodash";
+import { TABLE_KEYS } from "@/utils/constant";
+import { distributeWithSpacing } from "../layer-v3";
+const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, }) => {
+    const renderShape = (item) => {
+        var _a, _b, _c, _d, _e;
+        const { id, x, y, width, height, fill, opacity, rotate = 0, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, seatFill, src, tags, gapTags, label, } = item;
+        const renderTags = (tags) => {
+            const gapBetweenTags = gapTags || 0;
+            const defaultFontSize = fontSize || 12;
+            // Hitung total tinggi semua grup tag (buat center vertikal)
+            const totalTagHeight = (tags === null || tags === void 0 ? void 0 : tags.reduce((sum, tag) => {
+                var _a;
+                const items = tag.items || [];
+                const isColumn = (_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column");
+                const tagHeight = isColumn
+                    ? items.length * defaultFontSize +
+                        (items.length - 1) * (Number(tag.gap) || 2)
+                    : defaultFontSize; // horizontal = 1 line
+                return sum + tagHeight + gapBetweenTags;
+            }, 0)) - gapBetweenTags;
+            const startY = height / 2 - totalTagHeight / 2; // titik awal supaya semua di tengah
+            let currentY = startY;
+            return tags === null || tags === void 0 ? void 0 : tags.map((tag, tagIndex) => {
+                var _a;
+                const direction = ((_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column")) ? "column" : "flex";
+                const gap = Number(tag.gap) || 2;
+                const items = tag.items || [];
+                const fontSize = defaultFontSize;
+                const isColumn = direction === "column";
+                const groupHeight = isColumn
+                    ? items.length * fontSize + (items.length - 1) * gap
+                    : fontSize;
+                const centerX = width / 2;
+                const centerY = currentY + groupHeight / 2;
+                // naikkan posisi Y untuk grup berikutnya
+                currentY += groupHeight + gapBetweenTags;
+                // kumpulkan elemen yang akan dirender (bisa mix text + icon)
+                const elements = items.map((item, i) => {
+                    var _a, _b;
+                    const offsetY = isColumn
+                        ? i * (fontSize + gap) - groupHeight / 2 + fontSize / 2
+                        : 0;
+                    const offsetX = !isColumn
+                        ? i * (fontSize + gap) - ((items.length - 1) * (fontSize + gap)) / 2
+                        : 0;
+                    const posX = centerX + offsetX + ((_a = tag.offsetX) !== null && _a !== void 0 ? _a : 0);
+                    const posY = centerY + offsetY + ((_b = tag.offsetY) !== null && _b !== void 0 ? _b : 0);
+                    const renderSymbol = (symbol) => {
+                        if (!symbol)
+                            return null;
+                        const { position = "right", size = (item === null || item === void 0 ? void 0 : item.fontSize) || 12, gap: symbolGap = 0, } = symbol;
+                        let offsetSymbolX = 0;
+                        let offsetSymbolY = 0;
+                        switch (position) {
+                            case "right":
+                                offsetSymbolX = size + symbolGap;
+                                break;
+                            case "left":
+                                offsetSymbolX = -(size + symbolGap);
+                                break;
+                            case "top":
+                                offsetSymbolY = -(size + symbolGap);
+                                break;
+                            case "bottom":
+                                offsetSymbolY = size + symbolGap;
+                                break;
+                            case "right-top":
+                                offsetSymbolX = size + symbolGap;
+                                offsetSymbolY = -(size / 4);
+                                break;
+                            case "right-bottom":
+                                offsetSymbolX = size + symbolGap;
+                                offsetSymbolY = size / 4;
+                                break;
+                            case "left-top":
+                                offsetSymbolX = -size - symbolGap;
+                                offsetSymbolY = -(size / 4);
+                                break;
+                            case "left-bottom":
+                                offsetSymbolX = -size - symbolGap;
+                                offsetSymbolY = size / 4;
+                                break;
+                        }
+                        return (_createElement("tspan", Object.assign({}, symbol, { key: `symbol-${tagIndex}-${i}`, x: posX + offsetSymbolX, y: posY + offsetSymbolY, textAnchor: "middle", dominantBaseline: "middle", transform: `rotate(${rotate} ${posX} ${posY})` }), symbol.value));
+                    };
+                    if (item.type === "icon") {
+                        const iconTag = iconTags === null || iconTags === void 0 ? void 0 : iconTags.find((icon) => icon.key === item.value);
+                        if (!iconTag)
+                            return null;
+                        return (_createElement("g", Object.assign({}, item, { key: `icon-${tagIndex}-${i}`, transform: `translate(${posX - 10}, ${posY - 10})` }), iconTag.icon));
+                    }
+                    if (item.type === "text") {
+                        return (_createElement("text", Object.assign({}, item, { key: `text-${tagIndex}-${i}`, x: posX, y: posY, textAnchor: "middle", dominantBaseline: "middle", transform: `rotate(${rotate} ${posX} ${posY})` }),
+                            item.value,
+                            " ",
+                            renderSymbol(item === null || item === void 0 ? void 0 : item.symbol)));
+                    }
+                    return null;
+                });
+                return _jsx("g", { children: elements }, `group-${tagIndex}`);
+            });
+        };
+        let commonProps = {
+            fill,
+            opacity,
+            stroke,
+            strokeWidth,
+        };
+        const hasSelected = (selectedTable === null || selectedTable === void 0 ? void 0 : selectedTable.id) === id;
+        if (hasSelected) {
+            const eventSelectedStyles = eventMatchTable === null || eventMatchTable === void 0 ? void 0 : eventMatchTable.find((style) => style.event === "selected");
+            commonProps = Object.assign(Object.assign({}, commonProps), eventSelectedStyles === null || eventSelectedStyles === void 0 ? void 0 : eventSelectedStyles.properties);
+        }
+        // helper: highlight / unhighlight dengan enter-counter
+        let properties = {};
+        const highlightGroup = (group, eventType) => {
+            if (!group)
+                return;
+            onHighlightGroup === null || onHighlightGroup === void 0 ? void 0 : onHighlightGroup(group, eventType);
+            eventMatchTable === null || eventMatchTable === void 0 ? void 0 : eventMatchTable.forEach((styleConfig) => {
+                if (styleConfig.event === eventType) {
+                    properties = styleConfig.properties;
+                }
+            });
+            if (isEmpty(properties))
+                return;
+            // counter
+            const count = Number(group.dataset.dragEnterCount || "0") + 1;
+            group.dataset.dragEnterCount = String(count);
+            // selalu ubah warna, tapi simpan original hanya sekali
+            ["rect", "circle"].forEach((selector) => {
+                const el = group.querySelector(selector);
+                if (!el)
+                    return;
+                Object.entries(properties).forEach(([key]) => {
+                    el.dataset[key] = el.getAttribute(key) || "";
+                });
+                Object.entries(properties).forEach(([key, value]) => {
+                    el.setAttribute(key, value);
+                });
+            });
+        };
+        const unhighlightGroup = (group) => {
+            if (!group)
+                return;
+            const count = Math.max(0, Number(group.dataset.dragEnterCount || "0") - 1);
+            group.dataset.dragEnterCount = String(count);
+            // restore hanya saat counter = 0
+            if (count === 0) {
+                ["rect", "circle"].forEach((selector) => {
+                    const el = group.querySelector(selector);
+                    if (!el)
+                        return;
+                    // bersihkan data
+                    const dataset = el.dataset;
+                    Object.entries(dataset).forEach(([key, value]) => {
+                        el.setAttribute(key, value);
+                        delete el.dataset[key];
+                        properties = {};
+                    });
+                });
+                delete group.dataset.dragEnterCount;
+            }
+        };
+        const forceRestoreGroup = (group, type) => {
+            // langsung restore (dipanggil pada drop)
+            onForceRestoreGroup === null || onForceRestoreGroup === void 0 ? void 0 : onForceRestoreGroup(group, type);
+            ["rect", "circle"].forEach((selector) => {
+                const el = group === null || group === void 0 ? void 0 : group.querySelector(selector);
+                if (!el)
+                    return;
+                const dataset = el.dataset;
+                Object.entries(dataset).forEach(([key, value]) => {
+                    el.setAttribute(key, value);
+                    delete el.dataset[key];
+                    properties = {};
+                });
+            });
+            delete group.dataset.dragEnterCount;
+        };
+        const transformRotate = `rotate(${rotate} ${x + width / 2} ${y + height / 2})`;
+        switch (shape) {
+            case "square":
+                return (_jsxs("g", { "data-id": id, style: { pointerEvents: "all" }, onContextMenu: (e) => e.preventDefault(), onDragEnter: (e) => {
+                        const group = e.currentTarget;
+                        highlightGroup(group, "dragenter");
+                    }, onDragOver: (e) => {
+                        e.preventDefault(); // agar drop diterima
+                    }, onDragLeave: (e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }, onDrop: (e) => {
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group, "drop");
+                    }, onPointerOver: (e) => {
+                        // e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "pointerover");
+                    }, onPointerOut: (e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }, onPointerUp: (e) => {
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group, "pointerup");
+                    }, onPointerDown: (e) => {
+                        const group = e.currentTarget;
+                        highlightGroup(group, "pointerdown");
+                    }, 
+                    // onPointerEnter={(e) => {
+                    //   const group = e.currentTarget as SVGGElement;
+                    //   highlightGroup(group, "pointerenter");
+                    // }}
+                    onPointerLeave: (e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }, onMouseEnter: (e) => {
+                        // e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mouseenter");
+                    }, onMouseLeave: (e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }, children: [_jsx("rect", Object.assign({ x: x, y: y, width: width, height: height, fill: fill, className: "blink-2", transform: transformRotate }, omit(item, TABLE_KEYS), commonProps), `${id}-rect`), renderTags(tags), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                            var _a, _b, _c, _d;
+                            return (_createElement("text", Object.assign({}, omit(commonProps, ["opacity", "stroke", "strokeWidth"]), { key: `${id}-label-${index}`, x: x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0), fill: (_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black", fontSize: `${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: transformRotate }, _), _ === null || _ === void 0 ? void 0 : _.label));
+                        })] }, id));
+            case "circle":
+                return (_jsxs("g", { style: { pointerEvents: "all" }, "data-id": id, onContextMenu: (e) => e.preventDefault(), onDragEnter: (e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "dragenter");
+                    }, onDragOver: (e) => {
+                        e.preventDefault(); // agar drop diterima
+                    }, onDragLeave: (e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }, onDrop: (e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }, onPointerOver: (e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "pointerover");
+                    }, onPointerOut: (e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }, onPointerUp: (e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }, onMouseDown: (e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mousedown");
+                    }, onMouseEnter: (e) => {
+                        // e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mouseenter");
+                    }, onMouseLeave: (e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }, children: [_jsx("circle", Object.assign({ cx: x + width / 2, cy: y + height / 2, r: width / 2 }, commonProps), id), renderTags(tags), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                            var _a, _b, _c, _d;
+                            return (_jsx("text", { x: x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0), fill: (_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black", fontSize: `${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: transformRotate, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
+                        })] }, id));
+            case "table-seat-circle": {
+                const seatCount = item.seatCount;
+                const openSpace = (_a = item.openSpace) !== null && _a !== void 0 ? _a : 0;
+                // LOCAL SPACE (tanpa x,y)
+                const centerX = width / 2;
+                const centerY = height / 2;
+                // meja
+                const tableRadius = Math.min(width, height) / 2;
+                // seat statis
+                const seatRadius = 10;
+                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 };
+                });
+                return (_jsxs("g", { style: { pointerEvents: "all" }, "data-id": id, transform: `translate(${x}, ${y})`, 
+                    // data-table={JSON.stringify(item)}
+                    // data-id={id}
+                    onContextMenu: (e) => e.preventDefault(), onDragEnter: (e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "dragenter");
+                    }, onDragOver: (e) => {
+                        e.preventDefault(); // agar drop diterima
+                    }, onDragLeave: (e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }, onDrop: (e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }, onPointerOver: (e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "pointerover");
+                    }, onPointerOut: (e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }, onPointerUp: (e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }, onMouseDown: (e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mousedown");
+                    }, onMouseEnter: (e) => {
+                        // e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mouseenter");
+                    }, onMouseLeave: (e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }, children: [_jsx("circle", Object.assign({ cx: centerX, cy: centerY, r: tableRadius, fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill }, commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius, fill: seatFill || "white" }, `${id}-seat-${i}`))) }), renderTags(tags), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                            var _a, _b, _c, _d;
+                            return (_jsx("text", { x: x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0), fill: (_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black", fontSize: `${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: transformRotate, children: _ === null || _ === void 0 ? void 0 : _.label }, `${id}-label-${index}`));
+                        })] }, id));
+            }
+            case "table-seat-square": {
+                const openSpace = item.openSpace || 0; // from 0 to 0.9
+                const r = 10;
+                const seatPositions = item.seatPositions;
+                const topCount = (_b = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.top) !== null && _b !== void 0 ? _b : 0;
+                const bottomCount = (_c = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.bottom) !== null && _c !== void 0 ? _c : 0;
+                const leftCount = (_d = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.left) !== null && _d !== void 0 ? _d : 0;
+                const rightCount = (_e = seatPositions === null || seatPositions === void 0 ? void 0 : seatPositions.right) !== null && _e !== void 0 ? _e : 0;
+                // split seats evenly on top and bottom
+                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;
+                const topXs = distributeWithSpacing({
+                    start: x,
+                    length: width,
+                    count: topCount,
+                    radius: r,
+                    spacing: spacingWidth,
+                });
+                const topSeats = topXs.map((cx) => ({ cx, cy: y - r, id: "top" }));
+                // TOP
+                const bottomSeats = distributeWithSpacing({
+                    start: x,
+                    length: width,
+                    count: bottomCount,
+                    radius: r,
+                    spacing: spacingWidth,
+                }).map((cx) => ({
+                    cx: cx,
+                    cy: y + height + r,
+                    id: "bottom",
+                }));
+                const leftYs = distributeWithSpacing({
+                    start: y,
+                    length: height,
+                    count: leftCount,
+                    radius: r,
+                    spacing: spacingHeight,
+                });
+                const leftSeats = leftYs.map((cy) => ({ cx: x - r, cy, id: "left" }));
+                const rightSeats = distributeWithSpacing({
+                    start: y,
+                    length: height,
+                    count: rightCount,
+                    radius: r,
+                    spacing: spacingHeight,
+                }).map((cy) => ({
+                    cx: x + width + r,
+                    cy,
+                    id: "right",
+                }));
+                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotate}, 0, 0)`, children: [_jsx("rect", Object.assign({ width: width, height: height }, commonProps, { fill: selectedTableColor !== null && selectedTableColor !== void 0 ? selectedTableColor : fill })), renderTags(tags), _jsx("g", { fill: "#e6b9c0", stroke: "#c49ba3", strokeWidth: "1", "data-seat": `${id}-seats`, transform: `translate(${-x}, ${-y})`, children: [...topSeats, ...bottomSeats, ...leftSeats, ...rightSeats].map(({ cx, cy, id }, i) => (_jsx("circle", { id: `seat-${id}`, cx: cx, cy: cy, r: r, fill: seatFill }, `${id}-seat-${i}`))) }, `${id}-seats`), _jsx("text", { x: x + width / 2, y: y + height / 2, fill: fontColor !== null && fontColor !== void 0 ? fontColor : "black", fontSize: `${fontSize !== null && fontSize !== void 0 ? fontSize : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", children: label })] }) }, id));
+            }
+            case "text":
+                return (_jsxs("g", { onContextMenu: (e) => e.preventDefault(), children: [_jsx("rect", { x: x, y: y, width: width, height: height, fill: "transparent", opacity: opacity }), _jsx("text", Object.assign({ x: x + width / 2, y: y + height / 2, textAnchor: "middle", dominantBaseline: "middle", fill: fontColor, fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : height * 0.6, opacity: opacity }, omit(commonProps, ["fill", "opacity"]), { children: text }))] }, id));
+            case "image-table":
+                return (_jsxs("g", { onContextMenu: (e) => e.preventDefault(), onDragEnter: (e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "dragenter");
+                    }, onDragOver: (e) => {
+                        e.preventDefault(); // agar drop diterima
+                    }, onDragLeave: (e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }, onDrop: (e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }, onPointerOver: (e) => {
+                        e.preventDefault(); // penting
+                        const group = e.currentTarget;
+                        highlightGroup(group, "pointerover");
+                    }, onPointerOut: (e) => {
+                        const group = e.currentTarget;
+                        unhighlightGroup(group);
+                    }, onPointerUp: (e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        // restore langsung dan reset
+                        forceRestoreGroup(group);
+                    }, onMouseDown: (e) => {
+                        e.preventDefault();
+                        const group = e.currentTarget;
+                        highlightGroup(group, "mousedown");
+                    }, children: [_jsx("image", Object.assign({ href: src, x: x, y: y, "data-id": id, width: width, height: height, transform: transformRotate }, commonProps)), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                            var _a, _b, _c, _d;
+                            return (_jsx("text", { x: x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0), fill: (_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black", fontSize: `${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: transformRotate, children: _ === null || _ === void 0 ? void 0 : _.label }, index));
+                        })] }, id));
+            case "background":
+                return (_jsxs("g", { onContextMenu: (e) => e.preventDefault(), children: [_jsx("image", Object.assign({ href: src, x: x, y: y, width: width, height: height, transform: transformRotate }, commonProps)), labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                            var _a, _b, _c, _d;
+                            return (_jsx("text", { x: x + width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0), y: y + height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0), fill: (_c = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _c !== void 0 ? _c : "black", fontSize: `${(_d = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _d !== void 0 ? _d : 10}px`, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: transformRotate, children: _ === null || _ === void 0 ? void 0 : _.label }, index));
+                        })] }, id));
+            default:
+                return _jsx("g", {}, id);
+        }
+    };
+    let date = new Date();
+    return _jsx("g", { children: components === null || components === void 0 ? void 0 : components.map(renderShape) }, `${date}`);
+};
+export default Layers;

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

@@ -1,4 +1,4 @@
-import LayerView from "../../features/view";
+import LayerView from "../../features/view-only";
 export interface LayerViewProps {
     componentProps: any[];
     extraComponentProps: any[];

package/dist/components/lib/index.js

@@ -4,7 +4,7 @@ import { useEffect } from "react";
 import Board from "../../features/board";
 import SideTool from "../../features/side-tool";
 import ControlPanels from "../../features/panel";
-import LayerView from "../../features/view";
+import LayerView from "../../features/view-only";
 import { useAppDispatch } from "../../hooks/use-redux";
 const TableEditor = ({ componentProps = [], extraComponentProps = [], }) => {
     const dispatch = useAppDispatch();

package/dist/features/board/index.js

@@ -6,7 +6,7 @@ import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
 import Layers from "../../components/layer";
 import { throttle } from "lodash";
 import ModalPreview from "../../components/modal-preview";
-import LayerView from "../view";
+import LayerView from "../view-only";
 import { isEqual, debounce } from "lodash";
 import { ZoomIn, ZoomOut } from "lucide-react";
 import { Button } from "antd";

package/dist/features/board-v2/index.js

@@ -6,7 +6,7 @@ import { useAppSelector, useAppDispatch } from "../../hooks/use-redux";
 import Layers from "../../components/layer-v2";
 import { throttle } from "lodash";
 import ModalPreview from "../../components/modal-preview";
-import LayerView from "../view";
+import LayerView from "../view-only-2";
 import { isEqual, debounce } from "lodash";
 import { ZoomIn, ZoomOut } from "lucide-react";
 import { Button } from "antd";

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

@@ -10,6 +10,7 @@ export interface InitialState {
     flagChange: boolean;
     historyChanges: any[];
     pointer: number;
+    updateBy: "global" | "local";
 }
 export declare const addComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/addComponent">, removeComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/removeComponent">, updateComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/updateComponent">, setBackgroundColor: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/setBackgroundColor">, removeExtraComponent: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, "board/removeExtraComponent">;
 declare const _default: import("redux").Reducer<InitialState>;

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

@@ -6,13 +6,17 @@ const initialState = {
     extraComponents: [],
     flagChange: false,
     historyChanges: [],
-    pointer: 0
+    pointer: 0,
+    updateBy: "global",
 };
 const MAX_HISTORY_CHANGES = 20;
 const boardSlice = createSlice({
     name: "board",
     initialState,
     reducers: {
+        setUpdateBy: (state, action) => {
+            state.updateBy = action.payload;
+        },
         addComponent: (state, action) => {
             state.components.push(action.payload);
         },
@@ -39,10 +43,23 @@ const boardSlice = createSlice({
                 state.extraComponents[indexExtra] = Object.assign(Object.assign({}, state.extraComponents[indexExtra]), action.payload);
             }
         },
+        updateAllComponents: (state, action) => {
+            [...state.components, ...state.extraComponents].forEach((component) => {
+                const updatedComponent = action.payload.find((comp) => comp.id === component.id);
+                if (updatedComponent) {
+                    Object.assign(component, Object.assign(Object.assign({}, component), updatedComponent));
+                }
+            });
+        },
         setBackgroundColor: (state, action) => {
             state.backgroundColor = action.payload;
         },
         setNewComponents: (state, action) => {
+            const currentPointer = state.pointer;
+            const totalHistory = state.historyChanges.length;
+            if (currentPointer < totalHistory) {
+                state.historyChanges = state.historyChanges.slice(0, currentPointer + 1);
+            }
             state.components = action.payload;
             state.historyChanges.push(state.components);
             if (state.historyChanges.length > MAX_HISTORY_CHANGES) {
@@ -61,8 +78,14 @@ const boardSlice = createSlice({
         },
         undoHistory: (state) => {
             if (state.pointer > 1) {
-                state.pointer -= 1;
-                const prev = state.historyChanges[state.pointer - 1];
+                const lengthHistory = state.historyChanges.length;
+                if (lengthHistory === state.pointer) {
+                    state.pointer = lengthHistory - 2;
+                }
+                else {
+                    state.pointer -= 1;
+                }
+                const prev = state.historyChanges[state.pointer];
                 state.components = current(prev);
             }
             else if (state.pointer === 1) {

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

@@ -0,0 +1,5 @@
+declare const MIN_HEIGHT = 10;
+declare const MIN_WIDTH = 10;
+declare const MIN_X = 10;
+declare const MIN_Y = 10;
+export { MIN_HEIGHT, MIN_WIDTH, MIN_X, MIN_Y };

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

@@ -0,0 +1,5 @@
+const MIN_HEIGHT = 10;
+const MIN_WIDTH = 10;
+const MIN_X = 10;
+const MIN_Y = 10;
+export { MIN_HEIGHT, MIN_WIDTH, MIN_X, MIN_Y };

package/dist/features/board-v3/index copy.d.ts

@@ -0,0 +1,47 @@
+interface BoardTemplateProps {
+    onSelectComponent?: (items: any) => void;
+    mappingKey?: string;
+    viewOnly?: boolean;
+}
+declare const BoardTemplate: ({ onSelectComponent, viewOnly }: BoardTemplateProps) => import("react/jsx-runtime").JSX.Element;
+export default BoardTemplate;
+export declare function getTranslate(el: any): {
+    x: number;
+    y: number;
+};
+export declare function getSize(el: any): {
+    width: any;
+    height: any;
+};
+type ResizeSide = string;
+export declare function getPolygonCenter(points: Pt[]): {
+    cx: number;
+    cy: number;
+};
+type Pt = {
+    x: number;
+    y: number;
+};
+type ResizeResult = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    cx: number;
+    cy: number;
+};
+export declare function applyResizeToSvgElement(element: SVGGraphicsElement, group: SVGGElement, resize: ResizeResult, inner: any): 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;