seat-editor 3.1.10 → 3.1.12

package/dist/app/constant.d.ts

@@ -100,6 +100,127 @@ export declare const data3: {
     is_fdc: number;
     max_pax_fdc: number;
 }[];
+export declare const test4: ({
+    x: number;
+    y: number;
+    id: number;
+    fill: string;
+    tags: ({
+        gap: string;
+        key: string;
+        items: ({
+            type: string;
+            value: string;
+            fontSize: number;
+        } | {
+            type: string;
+            value: string;
+            fontSize?: undefined;
+        })[];
+        direction: string;
+        offsetY?: undefined;
+        offsetX?: undefined;
+    } | {
+        gap: string;
+        key: string;
+        items: ({
+            type: string;
+            value: string;
+            fontSize: number;
+        } | {
+            type: string;
+            value: string;
+            fontSize?: undefined;
+        })[];
+        direction: string;
+        offsetY: number;
+        offsetX: number;
+    })[];
+    shape: string;
+    width: number;
+    height: number;
+    labels: {
+        x: number;
+        y: number;
+        label: string;
+        fontSize: number;
+        fontColor: string;
+    }[];
+    opacity: number;
+    rotation: number;
+    seatCount: number;
+    uuid_table: string;
+    gapTags: number;
+    properties?: undefined;
+} | {
+    properties: {
+        x: number;
+        y: number;
+        id: string;
+        fill: string;
+        stroke: string;
+        strokeWidth: number;
+        text: string;
+        shape: Shape;
+        width: number;
+        height: number;
+        gapTags: number;
+        labels: {
+            x: number;
+            y: number;
+            label: string;
+            fontSize: number;
+            fontColor: string;
+        }[];
+        tags: ({
+            key: string;
+            items: ({
+                type: TagType;
+                value: string;
+                fontSize: number;
+                fontWeight: number;
+                fill: string;
+            } | {
+                type: string;
+                value: string;
+                fontSize?: undefined;
+                fontWeight?: undefined;
+                fill?: undefined;
+            })[];
+            direction: string;
+            gap: number;
+            offsetX: number;
+            offsetY: number;
+        } | {
+            key: string;
+            items: {
+                value: string;
+                type: TagType;
+            }[];
+            direction: string;
+            gap: number;
+            offsetX?: undefined;
+            offsetY?: undefined;
+        })[];
+        opacity: number;
+        rotation: number;
+        seatCount: number;
+    };
+    x?: undefined;
+    y?: undefined;
+    id?: undefined;
+    fill?: undefined;
+    tags?: undefined;
+    shape?: undefined;
+    width?: undefined;
+    height?: undefined;
+    labels?: undefined;
+    opacity?: undefined;
+    rotation?: undefined;
+    seatCount?: undefined;
+    uuid_table?: undefined;
+    gapTags?: undefined;
+})[];
 export declare const data4: ({
     uuid_table: string;
     status: number;

package/dist/app/constant.js

@@ -3062,6 +3062,159 @@ export const data3 = [
         max_pax_fdc: 0,
     },
 ];
+export const test4 = [{
+        "x": 359.7921676635742,
+        "y": 109.07066345214844,
+        "id": 1753965738978,
+        "fill": "#bca16a",
+        "tags": [
+            {
+                "gap": "5",
+                "key": "table",
+                "items": [
+                    {
+                        "type": "text",
+                        "value": "VIP 1",
+                        "fontSize": 10
+                    },
+                    {
+                        "type": "icon",
+                        "value": "chair"
+                    }
+                ],
+                "direction": "column",
+            },
+            {
+                "gap": "8",
+                "key": "pax",
+                "items": [
+                    {
+                        "type": "text",
+                        "value": "8/2",
+                        "fontSize": 10
+                    },
+                    {
+                        "type": "icon",
+                        "value": "user"
+                    }
+                ],
+                "direction": "flex",
+                "offsetY": 1,
+                "offsetX": 3
+            },
+            {
+                "gap": "2",
+                "key": "rsvp_time",
+                "items": [
+                    {
+                        "type": "text",
+                        "value": "17:30"
+                    }
+                ],
+                "direction": "column",
+                "offsetY": 1,
+                "offsetX": 3
+            }
+        ],
+        "shape": "square",
+        "width": 50,
+        "height": 80,
+        "labels": [
+            {
+                "x": 0,
+                "y": 4,
+                "label": "V 1",
+                "fontSize": 12,
+                "fontColor": "#0d0c0c"
+            }
+        ],
+        "opacity": 0.5,
+        "rotation": 0,
+        "seatCount": 0,
+        "uuid_table": "d088bba0-e990-410e-aea9-08548175a0b9",
+        "gapTags": 20
+    },
+    {
+        properties: {
+            x: 400,
+            y: 20,
+            id: "1761194669729223400",
+            fill: "#D7F7D4",
+            stroke: "#47B63D", //warna border
+            strokeWidth: 1,
+            text: "",
+            shape: "square",
+            width: 100,
+            height: 100,
+            gapTags: 20, //gap antara tags secara vertical,
+            labels: [
+                {
+                    x: 0,
+                    y: 27,
+                    label: "New Table 5",
+                    fontSize: 12,
+                    fontColor: "#0d0c0c",
+                },
+            ],
+            tags: [
+                {
+                    key: "table", //key untuk penamaan tag
+                    items: [
+                        {
+                            type: "text", //tipe text atau icon
+                            value: "V1", //value untuk text atau icon
+                            fontSize: 14,
+                            fontWeight: 600,
+                            fill: "#3F4254",
+                        },
+                        {
+                            "type": "icon",
+                            "value": "chair"
+                        }
+                    ],
+                    direction: "column", // flex untuk horizontal dan column untuk vertikal
+                    gap: 5, //gap antara item
+                    offsetX: 0, //offset x antara item
+                    offsetY: 0, //offset y antara item
+                },
+                {
+                    key: "status",
+                    items: [
+                        {
+                            value: "chair",
+                            type: "icon",
+                        },
+                    ],
+                    direction: "column",
+                    gap: 1,
+                },
+                {
+                    key: "pax",
+                    items: [
+                        {
+                            value: "user",
+                            type: "icon",
+                        },
+                        {
+                            value: "0/4",
+                            type: "text",
+                            fontSize: 12,
+                            fontWeight: 600,
+                            fill: "#3F4254",
+                        },
+                    ],
+                    direction: "flex",
+                    gap: 10,
+                    offsetX: 0,
+                    offsetY: 10,
+                },
+            ],
+            opacity: 1,
+            rotation: 0,
+            seatCount: 0,
+        },
+    },
+];
 export const data4 = [
     {
         uuid_table: "axxxxx",

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

@@ -184,7 +184,7 @@ const TouchScrollDetect = () => {
           <button className="p-4 bg-gray-400" onClick={() => handleZoomIn()}>+</button>
           <button className="p-4 bg-gray-400" onClick={() => handleZoomOut()}>-</button>
         </div>
-          <LayerView refs={refLayer} statusKey="status" defaultBackground="#000000" mappingKey="properties" componentProps={data4} onDrop={(e, data) => handleDrop(e, data)} onSwitch={(e, data) => handleSwitch(e, data)} extraComponentProps={[]} onSelectComponent={(component) => {
+          <LayerView refs={refLayer} statusKey="status" privilegedTags={["pax", "table"]} defaultBackground="#000000" mappingKey="properties" componentProps={data4} onDrop={(e, data) => handleDrop(e, data)} onSwitch={(e, data) => handleSwitch(e, data)} extraComponentProps={[]} onSelectComponent={(component) => {
             handleSelectTable(component);
         }} dragTableBlockKey={[
             {

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

@@ -15,6 +15,7 @@ interface LayersProps {
     onHighlightGroup?: (group: SVGGElement, eventType: EventHandleType) => void;
     onForceRestoreGroup?: (group: SVGGElement, eventType: EventHandleType) => void;
     selectedTableColor?: string;
+    privilegedTags?: string[];
 }
-declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, }: LayersProps) => import("react").JSX.Element;
+declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags }: LayersProps) => import("react").JSX.Element;
 export default Layers;

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

@@ -1,11 +1,12 @@
 "use client";
 import { isEmpty, omit } from "lodash";
 import { arcByDirection, distributeWithSpacing } from "../layer-v3/utils";
-const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, }) => {
+const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags }) => {
     const renderShape = (item) => {
         var _a, _b, _c, _d, _e, _f;
         const { id, x, y, width, height, fill, opacity, rotate = 0, rotation, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, seatFill, src, tags, gapTags, label, points, seatPositions, radius, } = item;
         const renderTags = (tags) => {
+            var _a;
             const gapBetweenTags = gapTags || 0;
             const defaultFontSize = fontSize || 12;
             // Hitung total tinggi semua grup tag (buat center vertikal)
@@ -21,7 +22,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
             }, 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) => {
+            return (_a = tags.filter((tag) => privilegedTags === null || privilegedTags === void 0 ? void 0 : privilegedTags.includes(tag.key))) === null || _a === void 0 ? void 0 : _a.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;
@@ -32,7 +33,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     ? items.length * fontSize + (items.length - 1) * gap
                     : fontSize;
                 const centerX = width / 2;
-                const centerY = currentY + groupHeight / 2;
+                const centerY = currentY + groupHeight;
                 // naikkan posisi Y untuk grup berikutnya
                 currentY += groupHeight + gapBetweenTags;
                 // kumpulkan elemen yang akan dirender (bisa mix text + icon)
@@ -235,20 +236,20 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                 {...omit(item, ["x", "y", "label", "points"])} {...commonProps}/>
 
               {renderTags(tags)}
-              <g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
-                {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
-                        var _a, _b, _c, _d, _e, _f, _g;
-                        const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
-                        const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
-                        return (<text {...omit(commonProps, [
-                            "opacity",
-                            "stroke",
-                            "strokeWidth",
-                        ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
-                      {_ === null || _ === void 0 ? void 0 : _.label}
-                    </text>);
-                    })}
-              </g>
+              {!iconTags && (<g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
+                  {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                            var _a, _b, _c, _d, _e, _f, _g;
+                            const cx = width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0);
+                            const cy = height / 2 + ((_b = _ === null || _ === void 0 ? void 0 : _.y) !== null && _b !== void 0 ? _b : 0);
+                            return (<text {...omit(commonProps, [
+                                "opacity",
+                                "stroke",
+                                "strokeWidth",
+                            ])} transform={`rotate(${(_c = _ === null || _ === void 0 ? void 0 : _.rotation) !== null && _c !== void 0 ? _c : 0}, ${cx},${cy})`} key={`${id}-label-${index}`} x={width / 2 + ((_d = _ === null || _ === void 0 ? void 0 : _.x) !== null && _d !== void 0 ? _d : 0)} y={height / 2 + ((_e = _ === null || _ === void 0 ? void 0 : _.y) !== null && _e !== void 0 ? _e : 0)} fill={(_f = _ === null || _ === void 0 ? void 0 : _.fontColor) !== null && _f !== void 0 ? _f : "black"} fontSize={`${(_g = _ === null || _ === void 0 ? void 0 : _.fontSize) !== null && _g !== void 0 ? _g : 10}px`} fontWeight="bold" textAnchor="middle" dominantBaseline="middle">
+                        {_ === null || _ === void 0 ? void 0 : _.label}
+                      </text>);
+                        })}
+                </g>)}
             </g>
           </g>);
             case "polygon":

package/dist/features/package/index.jsx

@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
 import Board from "../board-v3";
 import SideTool from "../side-tool";
 import ControlPanels from "../panel";
@@ -11,6 +11,15 @@ const TableEditor = (props) => {
     const { componentProps, extraComponentProps, onCurrentStateChange, dragOnly, mappingKey, viewOnly, deleteAutorized, refs } = props;
     const { components, extraComponents, backgroundColor } = useAppSelector((state) => state.board);
     const dispatch = useAppDispatch();
+    const refsBoard = useRef(null);
+    useImperativeHandle(refs, () => {
+        var _a, _b, _c;
+        return ({
+            svgRef: (_a = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _a === void 0 ? void 0 : _a.svgRef,
+            transformRef: (_b = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _b === void 0 ? void 0 : _b.transformRef,
+            containerRef: (_c = refsBoard === null || refsBoard === void 0 ? void 0 : refsBoard.current) === null || _c === void 0 ? void 0 : _c.containerRef
+        });
+    });
     useEffect(() => {
         if (!viewOnly) {
             dispatch({
@@ -105,7 +114,7 @@ const TableEditor = (props) => {
             display: viewOnly ? "none" : "flex",
         }}>
           <SideTool dragOnly={dragOnly} deleteAutorized={deleteAutorized}/>
-          <Board refs={refs}/>
+          <Board refs={refsBoard}/>
           <ControlPanels action={props.action} responseMapping={props.responseMapping}/>
         </div>
       </div>

package/dist/features/view-only-3/index.d.ts

@@ -47,6 +47,7 @@ export interface LayerViewProps {
         icon: React.JSX.Element;
         key: string;
     }[];
+    privilegedTags?: string[];
     tooltipProps?: {
         className?: string;
         style?: CSSProperties;

package/dist/features/view-only-3/index.jsx

@@ -5,7 +5,7 @@ import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import Layers from "../../components/layer-v4";
 import { getTranslate } from "../board-v3/utils";
 const LayerView = (props) => {
-    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, } = props;
+    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags } = props;
     const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
     const tableGhost = useRef(null);
     const hoverUnderghostId = useRef(null);
@@ -17,7 +17,6 @@ const LayerView = (props) => {
         y: 0,
         visible: false,
     });
-    console.log("tooltip", tooltip);
     const isDragging = useRef(false);
     const [panningGroup, setPanningGroup] = useState(false);
     const [scale, setScale] = useState(1);
@@ -373,15 +372,12 @@ const LayerView = (props) => {
                 else if (relY === centerY) {
                     newY = relY;
                 }
-                console.log({ dataGroupEmty, }, e.button);
                 const rightClick = e.button === 2 && !dataGroupEmty && allowTooltip;
-                console.log({ rightClick });
                 setTooltip({
                     x: newX,
                     y: newY,
                     visible: rightClick,
                 });
-                // console.log("klik");
                 const findDayaById = originalData({ id: dataId, type: "find" });
                 handleSelectComponent(findDayaById, e);
             }
@@ -534,7 +530,7 @@ const LayerView = (props) => {
               <Layers components={[
             ...extraComponentsEditor,
             ...renderElements(componentsEditor, mappingKey, tableMatchKey),
-        ]} selectedTable={selectedTable} iconTags={iconTags} eventMatchTable={eventMatchTable}/>
+        ]} selectedTable={selectedTable} iconTags={iconTags} eventMatchTable={eventMatchTable} privilegedTags={privilegedTags}/>
             </g>
             {/* 🧠 Ghost universal */}
           </svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seat-editor",
-  "version": "3.1.10",
+  "version": "3.1.12",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",