seat-editor 3.4.7 → 3.5.0

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

@@ -4,10 +4,18 @@ import { createElement as _createElement } from "react";
 import { isEmpty, omit } from "lodash";
 import { arcByDirection, distributeWithSpacing, rectToPolygonNodes, rectToPolygonPoints, } from "./utils";
 import { useAppSelector } from "../../hooks/use-redux";
+import { useMemo } from "react";
 const Layers = ({ components, selectedComponent, activeTool, selectionLines, }) => {
     var _a;
     const hasPoints = selectionLines && !isEmpty(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.points);
     const lockBackground = useAppSelector((state) => state.tool.lockBackground);
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    const allSelectionId = useMemo(() => {
+        const ids = (selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.map((item) => item === null || item === void 0 ? void 0 : item.id)) || [];
+        if (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id)
+            ids.push(selectedComponent.id);
+        return ids;
+    }, [selectedGroup, selectedComponent]);
     const renderShape = (item) => {
         var _a, _b, _c, _d, _e, _f;
         const { id, x, y, width, height, fill, opacity, rotation = 0, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, label, seatFill, src, points, seatPositions, radius = 0, } = item;
@@ -17,6 +25,19 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
             stroke,
             strokeWidth,
         };
+        const selectionBox = {
+            stroke: "#3b82f6",
+            strokeWidth: 4,
+            width: width + strokeWidth + 2,
+            height: height + strokeWidth + 2,
+            x: x - strokeWidth / 2,
+            y: y - strokeWidth / 2,
+            opacity: 0,
+        };
+        if (allSelectionId === null || allSelectionId === void 0 ? void 0 : allSelectionId.includes(id)) {
+            commonProps.stroke = "#ffa39e";
+            commonProps.strokeWidth = 4;
+        }
         switch (shape) {
             case "square":
                 return (_jsx("g", { "data-id": id, id: `${id}`, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_createElement("rect", Object.assign({}, commonProps, { key: id, width: width, height: height, rx: radius })), _jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
@@ -42,7 +63,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                 const showPoints = (selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.id) == id;
                 return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_createElement("polygon", Object.assign({}, commonProps, { key: id, points: finalPoint, x: "0", y: "0" })), (showPoints || !isClosed) &&
                                 points.map((_, index) => {
-                                    return (_jsxs(_Fragment, { children: [_jsx("rect", { "data-point": JSON.stringify(_), id: `${index}`, x: (_ === null || _ === void 0 ? void 0 : _.x) - 5, y: (_ === null || _ === void 0 ? void 0 : _.y) - 5, width: 10, height: 10, fill: "#4a90e2", cursor: "pointer" }, `${id}-point-${index}`), _jsx("circle", { "data-point": JSON.stringify(_), id: `${index}`, cx: _ === null || _ === void 0 ? void 0 : _.x, cy: _ === null || _ === void 0 ? void 0 : _.y, r: 15, fill: "transparent", cursor: "pointer" }, `${id}-point-${index}`)] }));
+                                    return (_jsxs(_Fragment, { children: [_jsx("rect", { "data-point": JSON.stringify(_), id: `${index}`, x: (_ === null || _ === void 0 ? void 0 : _.x) - 5, y: (_ === null || _ === void 0 ? void 0 : _.y) - 5, width: 10, height: 10, fill: "#4a90e2", cursor: "pointer" }, `${id}-point-${index}`), _jsx("circle", { "data-point": JSON.stringify(_), id: `${index}`, cx: _ === null || _ === void 0 ? void 0 : _.x, cy: _ === null || _ === void 0 ? void 0 : _.y, r: 15, fill: "transparent", cursor: "pointer" }, `${id}-point-${index - 100}`)] }));
                                 })] }) }, id));
             case "selection-box":
                 const pointsFormat = rectToPolygonPoints(x, y, width, height);
@@ -85,7 +106,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                     const cy = centerY + (tableRadius + seatRadius) * Math.sin(angle);
                     return { cx, cy };
                 });
-                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: centerX, cy: centerY, r: tableRadius, fill: fill }, commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", { cx: cx, cy: cy, r: seatRadius, fill: seatFill }, `${id}-seat-${i}`))) }), _jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
+                return (_jsx("g", { "data-id": id, transform: `translate(${x}, ${y})`, children: _jsxs("g", { transform: `rotate(${rotation}, 0, 0)`, children: [_jsx("circle", Object.assign({ cx: centerX, cy: centerY, r: tableRadius, fill: fill }, commonProps)), _jsx("g", { "data-seat": `${id}-seats`, children: seatCircles.map(({ cx, cy }, i) => (_jsx("circle", Object.assign({ cx: cx, cy: cy, r: seatRadius, fill: seatFill }, commonProps), `${id}-seat-${i}`))) }), _jsx("g", { transform: `rotate(${-rotation}, ${width / 2}, ${height / 2})`, children: 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);
@@ -434,7 +455,23 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                                     ]), { 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));
                                 }) })] }) }, id));
             case "bounding-box": {
-                return (_jsx("g", { transform: `translate(${x}, ${y})`, "data-bounding-box": id, children: _jsx("rect", { width: width, height: height, fill: "none", stroke: "#3b82f6", strokeWidth: 1, strokeDasharray: "6 4", pointerEvents: "none" }) }, id));
+                const topLine = `${0},${0} ${width},${0}`;
+                const rightLine = `${width},${0} ${width},${height}`;
+                const bottomLine = `${width},${height} ${0},${height}`;
+                const leftLine = `${0},${height} ${0},${0}`;
+                return (_jsxs("g", { id: "bounding-box", transform: `translate(${x}, ${y})`, "data-bounding-box": id, children: [_jsx("rect", { width: width, height: height, fill: "none", stroke: "#3b82f6", strokeWidth: 1, strokeDasharray: "6 4", pointerEvents: "none" }), _jsx("polyline", { points: topLine, fill: "none", stroke: "transparent", strokeWidth: 3, "data-position": "top-boundaries", style: {
+                                pointerEvents: activeTool === "bounding-box" ? "none" : "stroke",
+                                cursor: "row-resize",
+                            } }), _jsx("polyline", { points: rightLine, fill: "none", stroke: "transparent", strokeWidth: 3, "data-position": "right-boundaries", style: {
+                                pointerEvents: activeTool === "bounding-box" ? "none" : "stroke",
+                                cursor: "col-resize",
+                            } }), _jsx("polyline", { points: bottomLine, fill: "none", stroke: "transparent", strokeWidth: 3, "data-position": "bottom-boundaries", style: {
+                                pointerEvents: activeTool === "bounding-box" ? "none" : "stroke",
+                                cursor: "row-resize",
+                            } }), _jsx("polyline", { points: leftLine, fill: "none", stroke: "transparent", strokeWidth: 3, "data-position": "left-boundaries", style: {
+                                pointerEvents: activeTool === "bounding-box" ? "none" : "stroke",
+                                cursor: "col-resize",
+                            } })] }, id));
             }
             default:
                 return _jsx("g", {}, id);
@@ -442,6 +479,10 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
     };
     let date = new Date();
     const nodesRaw = rectToPolygonNodes(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.width, selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.height);
+    // const nodesRawNew = rectToPolygonNodes(
+    //   selectionLinesPoints?.width,
+    //   selectionLinesPoints?.height
+    // );
     return (_jsxs("g", { id: "selection-layer", children: [components === null || components === void 0 ? void 0 : components.map(renderShape), !isEmpty(selectionLines) && activeTool === "select" && (_jsxs(_Fragment, { children: [nodesRaw.map((p1, index) => {
                         const p2 = nodesRaw[(index + 2) % nodesRaw.length];
                         const side = index === 0

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

@@ -2,10 +2,18 @@
 import { isEmpty, omit } from "lodash";
 import { arcByDirection, distributeWithSpacing, rectToPolygonNodes, rectToPolygonPoints, } from "./utils";
 import { useAppSelector } from "../../hooks/use-redux";
+import { useMemo } from "react";
 const Layers = ({ components, selectedComponent, activeTool, selectionLines, }) => {
     var _a;
     const hasPoints = selectionLines && !isEmpty(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.points);
     const lockBackground = useAppSelector((state) => state.tool.lockBackground);
+    const selectedGroup = useAppSelector((state) => state.panel.selectedGroup);
+    const allSelectionId = useMemo(() => {
+        const ids = (selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.map((item) => item === null || item === void 0 ? void 0 : item.id)) || [];
+        if (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id)
+            ids.push(selectedComponent.id);
+        return ids;
+    }, [selectedGroup, selectedComponent]);
     const renderShape = (item) => {
         var _a, _b, _c, _d, _e, _f;
         const { id, x, y, width, height, fill, opacity, rotation = 0, shape, text, stroke, strokeWidth, labels, fontSize, fontColor, label, seatFill, src, points, seatPositions, radius = 0, } = item;
@@ -15,6 +23,19 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
             stroke,
             strokeWidth,
         };
+        const selectionBox = {
+            stroke: "#3b82f6",
+            strokeWidth: 4,
+            width: width + strokeWidth + 2,
+            height: height + strokeWidth + 2,
+            x: x - strokeWidth / 2,
+            y: y - strokeWidth / 2,
+            opacity: 0,
+        };
+        if (allSelectionId === null || allSelectionId === void 0 ? void 0 : allSelectionId.includes(id)) {
+            commonProps.stroke = "#ffa39e";
+            commonProps.strokeWidth = 4;
+        }
         switch (shape) {
             case "square":
                 return (<g key={id} data-id={id} id={`${id}`} transform={`translate(${x}, ${y})`}>
@@ -54,7 +75,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                         points.map((_, index) => {
                             return (<>
                       <rect data-point={JSON.stringify(_)} id={`${index}`} key={`${id}-point-${index}`} x={(_ === null || _ === void 0 ? void 0 : _.x) - 5} y={(_ === null || _ === void 0 ? void 0 : _.y) - 5} width={10} height={10} fill="#4a90e2" cursor={"pointer"}/>
-                      <circle data-point={JSON.stringify(_)} id={`${index}`} key={`${id}-point-${index}`} cx={_ === null || _ === void 0 ? void 0 : _.x} cy={_ === null || _ === void 0 ? void 0 : _.y} r={15} fill="transparent" cursor={"pointer"}/>
+                      <circle data-point={JSON.stringify(_)} id={`${index}`} key={`${id}-point-${index - 100}`} cx={_ === null || _ === void 0 ? void 0 : _.x} cy={_ === null || _ === void 0 ? void 0 : _.y} r={15} fill="transparent" cursor={"pointer"}/>
                     </>);
                         })}
             </g>
@@ -129,7 +150,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
               <circle cx={centerX} cy={centerY} r={tableRadius} fill={fill} {...commonProps}/>
               {/* Seat */}
               <g data-seat={`${id}-seats`}>
-                {seatCircles.map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius} fill={seatFill}/>))}
+                {seatCircles.map(({ cx, cy }, i) => (<circle key={`${id}-seat-${i}`} cx={cx} cy={cy} r={seatRadius} fill={seatFill} {...commonProps}/>))}
               </g>
 
               <g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
@@ -556,8 +577,32 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
             </g>
           </g>);
             case "bounding-box": {
-                return (<g key={id} transform={`translate(${x}, ${y})`} data-bounding-box={id}>
+                const topLine = `${0},${0} ${width},${0}`;
+                const rightLine = `${width},${0} ${width},${height}`;
+                const bottomLine = `${width},${height} ${0},${height}`;
+                const leftLine = `${0},${height} ${0},${0}`;
+                return (<g key={id} id="bounding-box" transform={`translate(${x}, ${y})`} data-bounding-box={id}>
             <rect width={width} height={height} fill="none" stroke="#3b82f6" strokeWidth={1} strokeDasharray="6 4" pointerEvents="none"/>
+            {/* top polyline */}
+            <polyline points={topLine} fill="none" stroke="transparent" strokeWidth={3} data-position="top-boundaries" style={{
+                        pointerEvents: activeTool === "bounding-box" ? "none" : "stroke",
+                        cursor: "row-resize",
+                    }}/>
+            {/* right polyline */}
+            <polyline points={rightLine} fill="none" stroke="transparent" strokeWidth={3} data-position="right-boundaries" style={{
+                        pointerEvents: activeTool === "bounding-box" ? "none" : "stroke",
+                        cursor: "col-resize",
+                    }}/>
+            {/* bottom polyline */}
+            <polyline points={bottomLine} fill="none" stroke="transparent" strokeWidth={3} data-position="bottom-boundaries" style={{
+                        pointerEvents: activeTool === "bounding-box" ? "none" : "stroke",
+                        cursor: "row-resize",
+                    }}/>
+            {/* left polyline */}
+            <polyline points={leftLine} fill="none" stroke="transparent" strokeWidth={3} data-position="left-boundaries" style={{
+                        pointerEvents: activeTool === "bounding-box" ? "none" : "stroke",
+                        cursor: "col-resize",
+                    }}/>
           </g>);
             }
             default:
@@ -566,6 +611,10 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
     };
     let date = new Date();
     const nodesRaw = rectToPolygonNodes(selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.width, selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.height);
+    // const nodesRawNew = rectToPolygonNodes(
+    //   selectionLinesPoints?.width,
+    //   selectionLinesPoints?.height
+    // );
     return (<g key={`${date}`} id="selection-layer">
       {components === null || components === void 0 ? void 0 : components.map(renderShape)}
       {!isEmpty(selectionLines) && activeTool === "select" && (<>
@@ -625,6 +674,74 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
                 }))}
             </g>
           </g>
+          {/* {!isEmpty(selectionLinesPoints) && (
+              <g
+                key={`selection-${date}`}
+                id="selection-lines"
+                data-selection={`selection-${
+                  selectedComponent?.id ?? selectionLines?.id
+                }`}
+                transform={`translate(${selectionLinesPoints?.x},${selectionLinesPoints?.y})`}
+              >
+                <g transform={`rotate(${0}, 0,0)`}>
+                  <rect
+                    width={selectionLinesPoints?.width}
+                    height={selectionLinesPoints?.height}
+                    fill="none"
+                    stroke="red"
+                    strokeWidth={1}
+                    id="rect-box-selection"
+                  />
+  
+                  {nodesRawNew?.map((node: Point, index: number) => {
+                      const corner = (index: number) => {
+                        switch (index) {
+                          case 0:
+                            return "top-left";
+                          case 1:
+                            return "top";
+                          case 2:
+                            return "top-right";
+                          case 3:
+                            return "right";
+                          case 4:
+                            return "bottom-right";
+                          case 5:
+                            return "bottom";
+                          case 6:
+                            return "bottom-left";
+                          case 7:
+                            return "left";
+                        }
+                      };
+  
+                      return (
+                        <>
+                          <circle
+                            data-position={corner(index)}
+                            key={index}
+                            r={5}
+                            cx={node.x}
+                            cy={node.y}
+                            fill="transparent"
+                            style={{ cursor: "pointer" }}
+                          />
+                          <circle
+                            data-position={corner(index)}
+                            key={index}
+                            r={5}
+                            cx={node.x}
+                            cy={node.y}
+                            fill="red"
+                            id={`circle-corner-${selectedComponent?.id}`}
+                            style={{ cursor: "pointer" }}
+                          />
+                        </>
+                      );
+                    })}
+                </g>
+              </g>
+            )} */}
         </>)}
     </g>);
 };

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

@@ -51,7 +51,8 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                         ? PRIVILEGED_TAGS["NEXT_3_RESERVATION"]
                         : undefined;
             if (tags && (tags === null || tags === void 0 ? void 0 : tags.length) > 0) {
-                const gapBetweenTags = Number(gapTags || 20);
+                const scaleDefault = Number(fontSize || fontSizeFromLabel || 12) / 12;
+                const gapBetweenTags = Number(gapTags || 20) * scaleDefault;
                 const defaultFontSize = Number(fontSize || fontSizeFromLabel || 12);
                 // Hitung total tinggi semua grup tag (buat center vertikal)
                 const totalTagHeight = (tags === null || tags === void 0 ? void 0 : tags.filter((tag) => privileged === null || privileged === void 0 ? void 0 : privileged.find((p) => p.key === tag.key)).reduce((sum, tag) => {
@@ -73,7 +74,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     const direction = ((_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column"))
                         ? "column"
                         : "flex";
-                    const gap = Number(tag.gap || 2);
+                    const gap = Number(tag.gap || 2) * scaleDefault;
                     const items = tag.items || [];
                     const fontSize = Number(defaultFontSize);
                     const isColumn = direction === "column";

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

@@ -49,7 +49,8 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                         ? PRIVILEGED_TAGS["NEXT_3_RESERVATION"]
                         : undefined;
             if (tags && (tags === null || tags === void 0 ? void 0 : tags.length) > 0) {
-                const gapBetweenTags = Number(gapTags || 20);
+                const scaleDefault = Number(fontSize || fontSizeFromLabel || 12) / 12;
+                const gapBetweenTags = Number(gapTags || 20) * scaleDefault;
                 const defaultFontSize = Number(fontSize || fontSizeFromLabel || 12);
                 // Hitung total tinggi semua grup tag (buat center vertikal)
                 const totalTagHeight = (tags === null || tags === void 0 ? void 0 : tags.filter((tag) => privileged === null || privileged === void 0 ? void 0 : privileged.find((p) => p.key === tag.key)).reduce((sum, tag) => {
@@ -71,7 +72,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     const direction = ((_a = tag.direction) === null || _a === void 0 ? void 0 : _a.includes("column"))
                         ? "column"
                         : "flex";
-                    const gap = Number(tag.gap || 2);
+                    const gap = Number(tag.gap || 2) * scaleDefault;
                     const items = tag.items || [];
                     const fontSize = Number(defaultFontSize);
                     const isColumn = direction === "column";

package/dist/components/layer-v5/constant.d.ts

@@ -0,0 +1,60 @@
+export declare const tagsDummy: (name: string, icon: string) => ({
+    gap: string;
+    key: string;
+    items: {
+        type: string;
+        value: string;
+    }[];
+    direction: string;
+    offsetX?: undefined;
+    offsetY?: undefined;
+} | {
+    gap: string;
+    key: string;
+    items: {
+        type: string;
+        value: string;
+    }[];
+    offsetX: string;
+    offsetY: string;
+    direction: string;
+} | {
+    gap: string;
+    key: string;
+    items: ({
+        type: string;
+        value: string;
+        fontWeight: string;
+        textDecoration: string;
+        symbol?: undefined;
+    } | {
+        type: string;
+        value: string;
+        fontWeight?: undefined;
+        textDecoration?: undefined;
+        symbol?: undefined;
+    } | {
+        type: string;
+        value: string;
+        symbol: {
+            value: string;
+            gap: number;
+            position: string;
+        };
+        fontWeight?: undefined;
+        textDecoration?: undefined;
+    })[];
+    direction: string;
+    offsetY: number;
+    offsetX?: undefined;
+})[];
+export declare const PRIVILEGED_TAGS: {
+    CURRENT_TIME: {
+        key: string;
+        items: string[];
+    }[];
+    NEXT_3_RESERVATION: {
+        key: string;
+        items: string[];
+    }[];
+};

package/dist/components/layer-v5/constant.js

@@ -0,0 +1,93 @@
+export const tagsDummy = (name, icon) => [
+    {
+        gap: "8",
+        key: "table",
+        items: [
+            {
+                type: "text",
+                value: name,
+            },
+            {
+                type: "icon",
+                value: icon,
+            },
+        ],
+        direction: "column",
+    },
+    {
+        gap: "8",
+        key: "pax",
+        items: [
+            {
+                type: "icon",
+                value: "people",
+            },
+            {
+                type: "text",
+                value: "0/8",
+            },
+        ],
+        offsetX: "3",
+        offsetY: "1",
+        direction: "flex",
+    },
+    {
+        gap: "2",
+        key: "rsvp_time",
+        items: [
+            {
+                type: "text",
+                value: "18:00",
+                fontWeight: "bold",
+                textDecoration: "underline",
+            },
+            {
+                type: "text",
+                value: "19:00",
+            },
+            {
+                type: "text",
+                value: "22:00",
+                symbol: {
+                    value: "+1",
+                    gap: 1,
+                    position: "right-top"
+                },
+            },
+            // as Position, // right | right-top | right-bottom | left | left-top | left-bottom | top | bottom
+            // {
+            //   type: "text",
+            //   value: "23:00",
+            //   symbol: {
+            //     value: "+1",
+            //     gap: 1,
+            //     position: "right-top" as Position, // right | right-top | right-bottom | left | left-top | left-bottom | top | bottom
+            //   },
+            // },
+        ],
+        direction: "column",
+        offsetY: -35,
+    },
+];
+export const PRIVILEGED_TAGS = {
+    CURRENT_TIME: [
+        {
+            key: "table",
+            items: ["text", "icon"],
+        },
+        {
+            key: "pax",
+            items: ["text", "icon"],
+        },
+    ],
+    NEXT_3_RESERVATION: [
+        {
+            key: "table",
+            items: ["text"],
+        },
+        {
+            key: "rsvp_time",
+            items: ["text"],
+        },
+    ],
+};

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

@@ -0,0 +1,24 @@
+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;
+    privilegedTags?: {
+        key: string;
+        items: string[];
+    }[];
+}
+declare const Layers: ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags, }: LayersProps) => import("react/jsx-runtime").JSX.Element;
+export default Layers;