seat-editor 3.3.16 → 3.3.18

package/dist/app/new-board/page.jsx

@@ -1,7 +1,6 @@
 "use client";
 import { useEffect, useState } from "react";
 import SeatEditor from "../../features/package";
-import { dummyExtra6 } from "../constant";
 export default function NewBoard() {
     const [initialValue, setInitialValue] = useState([]);
     const [extraComponents, setExtraComponents] = useState([]);
@@ -9,7 +8,7 @@ export default function NewBoard() {
     const [viewOnly, setViewOnly] = useState(false);
     useEffect(() => {
         setInitialValue([]);
-        setExtraComponents(dummyExtra6);
+        setExtraComponents([]);
     }, []);
     const handleUploadImage = (file) => {
         const test = new Promise((resolve, reject) => {
@@ -20,6 +19,23 @@ export default function NewBoard() {
         });
         return test;
     };
+    const test = [{
+            test: "test",
+            properties: {
+                shape: "image-table",
+                width: 200,
+                height: 200,
+                x: 100,
+                y: 100,
+                backgroundColor: "#ffffff",
+                src: "dummyImage",
+            }
+        }];
+    // const ayo =test?.map((item) => {
+    //   return {
+    //     properties: item?.properties?.
+    //   }
+    // })
     return (<>
       <div className="w-full h-screen flex flex-col relative justify-center">
         <div className="w-full h-[1000px] bg-white border-r border-gray-200">
@@ -31,7 +47,7 @@ export default function NewBoard() {
           {viewOnly ? "Edit Mode ddd" : "View Mode"}
         </button> */}
         <div className="flex-1 h-full">
-          <SeatEditor componentProps={initialValue} viewOnly={viewOnly} dragOnly={true} deleteAutorized={{
+          <SeatEditor componentProps={test} viewOnly={viewOnly} dragOnly={true} deleteAutorized={{
             component: true,
             extraComponent: true,
         }} action={handleUploadImage} mappingKey="properties" onCurrentStateChange={(setState) => {
@@ -45,7 +61,7 @@ export default function NewBoard() {
             if (((_c = setState === null || setState === void 0 ? void 0 : setState.extraComponents) === null || _c === void 0 ? void 0 : _c.length) > 0) {
                 setExtraComponents((_d = setState.extraComponents) !== null && _d !== void 0 ? _d : []);
             }
-        }} extraComponentProps={dummyExtra6} defaultBackground={backgroundColor} 
+        }} extraComponentProps={extraComponents} defaultBackground={backgroundColor} 
     // dragOnly={true}
     statusKey="status"/>
           </div>

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

@@ -1,7 +1,7 @@
 "use client";
 import LayerView from "../../features/view-only-3";
 import { useState, useRef } from "react";
-import { data4, test1 } from "../constant";
+// import { data4, test4, test1 } from "../constant";
 import { ChairIcon } from "./chair";
 import { UserIcon } from "./user";
 import { Modal } from "antd";
@@ -154,9 +154,8 @@ const TouchScrollDetect = () => {
         setTable(data);
     };
     const handleDrop = (e, data) => {
-        var _a;
         console.log("data drop", data);
-        const targetData = (_a = data === null || data === void 0 ? void 0 : data.targetTable) === null || _a === void 0 ? void 0 : _a.test;
+        const targetData = data === null || data === void 0 ? void 0 : data.targetTable;
         e.preventDefault();
         setOpen(!open);
         setTable(data);
@@ -172,12 +171,15 @@ const TouchScrollDetect = () => {
         </div>
       </Modal>);
     };
+    const testData = [];
     return (<div className="w-full h-screen border-2 border-black overflow-auto" id="scroll-container">
       {renderModal()}
       <div className="flex">
         <div className="h-screen bg-gray-500 w-1/3">
           <div className="p-4">
-            {data4.map((item, index) => (<Card key={index} {...item}/>))}
+            {/* {data4.map((item, index) => (
+          <Card key={index} {...item} />
+        ))} */}
           </div>
         </div>
         <div className="h-screen w-2/3 relative">
@@ -198,7 +200,12 @@ const TouchScrollDetect = () => {
                 key: "rsvp_time",
                 items: ["text", "icon"],
             },
-        ]} defaultBackground="#000000" mappingKey="properties" componentProps={test1} onDrop={(e, data) => handleDrop(e, data)} onSwitch={(e, data) => handleSwitch(e, data)} extraComponentProps={[]} onSelectComponent={(component) => {
+        ]} defaultBackground="#000000" mappingKey="properties" componentProps={testData === null || testData === void 0 ? void 0 : testData.map((item) => {
+            return {
+                properties: item === null || item === void 0 ? void 0 : item.properties,
+                test: item === null || item === void 0 ? void 0 : item.test,
+            };
+        })} onDrop={(e, data) => handleDrop(e, data)} onSwitch={(e, data) => handleSwitch(e, data)} extraComponentProps={[]} onSelectComponent={(component) => {
             handleSelectTable(component);
         }} 
     // dragTableBlockKey={[

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

@@ -1,7 +1,7 @@
 import { PropertiesProps, BaseElement, Point } from "../../dto/table";
 export interface SelectionLines extends BaseElement {
     points?: Point[];
-    id?: string;
+    id?: string | number;
 }
 interface LayersProps {
     components?: PropertiesProps[];

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

@@ -17,7 +17,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
         };
         switch (shape) {
             case "square":
-                return (<g key={id} data-id={id} id={id} transform={`translate(${x}, ${y})`}>
+                return (<g key={id} data-id={id} id={`${id}`} transform={`translate(${x}, ${y})`}>
             <g transform={`rotate(${rotation}, 0, 0)`}>
               <rect {...commonProps} key={id} width={width} height={height} rx={radius}/>
               <g transform={`rotate(${-rotation}, ${width / 2}, ${height / 2})`}>
@@ -534,7 +534,7 @@ const Layers = ({ components, selectedComponent, activeTool, selectionLines, })
           </g>);
             case "image-table":
             case "background":
-                return (<g key={id} id={id} data-id={id} transform={`translate(${x}, ${y})`} style={{
+                return (<g key={id} id={`${id}`} data-id={id} transform={`translate(${x}, ${y})`} style={{
                         pointerEvents: lockBackground ? "none" : "auto",
                     }}>
             <g transform={`rotate(${rotation}, 0, 0)`}>

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

@@ -242,7 +242,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
         const transformRotate = `rotate(${rotate} ${x + width / 2} ${y + height / 2})`;
         switch (shape) {
             case "square":
-                return (<g key={id} id={id} data-id={id} transform={`translate(${x}, ${y})`} style={{ pointerEvents: "all" }} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
+                return (<g key={id} id={`${id}`} data-id={id} transform={`translate(${x}, ${y})`} style={{ pointerEvents: "all" }} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
                         const group = e.currentTarget;
                         highlightGroup(group, "dragenter");
                     }} onDragOver={(e) => {
@@ -389,7 +389,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     const cy = centerY + (tableRadius + seatRadius) * Math.sin(angle);
                     return { cx, cy };
                 });
-                return (<g key={id} style={{ pointerEvents: "all" }} data-id={id} id={id} transform={`translate(${x}, ${y})`} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
+                return (<g key={id} style={{ pointerEvents: "all" }} data-id={id} id={`${id}`} transform={`translate(${x}, ${y})`} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
                         e.preventDefault(); // penting
                         const group = e.currentTarget;
                         highlightGroup(group, "dragenter");
@@ -982,7 +982,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
             </g>
           </g>);
             case "image-table":
-                return (<g key={id} id={id} data-id={id} transform={`translate(${x}, ${y})`} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
+                return (<g key={id} id={`${id}`} data-id={id} transform={`translate(${x}, ${y})`} onContextMenu={(e) => e.preventDefault()} onDragEnter={(e) => {
                         e.preventDefault(); // penting
                         const group = e.currentTarget;
                         highlightGroup(group, "dragenter");

package/dist/dto/table.d.ts

@@ -33,7 +33,7 @@ export interface Tag {
     gap?: number;
 }
 export interface TableProps {
-    id?: string;
+    id?: string | number;
     labels?: Label[];
     fontColor?: string;
     src?: string;

package/dist/features/board-v3/index.jsx

@@ -599,7 +599,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                 const { tx, ty } = stabilizeRotation(x0, y0, w0, h0, 0, newAngle);
                 selectionLines === null || selectionLines === void 0 ? void 0 : selectionLines.setAttribute("transform", `translate(${tx}, ${ty}) `);
                 // ROTATE ALL ELEMENT IN SELECTION
-                const allID = (_d = dataElementSelectionGroupRef.current) === null || _d === void 0 ? void 0 : _d.map((el) => el.id);
+                const allID = (_d = dataElementSelectionGroupRef.current) === null || _d === void 0 ? void 0 : _d.map((el) => String(el.id));
                 const deltaAngle = newAngle - 0;
                 const rad = (deltaAngle * Math.PI) / 180;
                 const cosA = Math.cos(rad);
@@ -638,11 +638,11 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                     width: selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.width,
                     height: selectedLines === null || selectedLines === void 0 ? void 0 : selectedLines.height,
                 };
-                const allID = (_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.map((el) => el.id);
+                const allID = (_a = dataElementSelectionGroupRef.current) === null || _a === void 0 ? void 0 : _a.map((el) => String(el.id));
                 const allDataRealSelection = (_b = [
                     ...componentsState,
                     ...(lockBackground ? [] : extraComponentsState),
-                ]) === null || _b === void 0 ? void 0 : _b.filter((el) => allID.includes(el.id));
+                ]) === null || _b === void 0 ? void 0 : _b.filter((el) => allID.includes(String(el.id)));
                 const allGroupsAttribute = getAttributeElements(svg, allID);
                 const resultSelection = resizeBox({
                     box: oldSel,
@@ -721,7 +721,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                     ...(lockBackground ? [] : extraComponentsState),
                 ]) === null || _b === void 0 ? void 0 : _b.filter((el) => allID.includes(el.id));
                 allDataRealSelection.forEach((item) => {
-                    const { g } = getAttributeElement(svg, item.id);
+                    const { g } = getAttributeElement(svg, String(item.id));
                     const newX = pos.x - x;
                     const newY = pos.y - y;
                     g.setAttribute("transform", `translate(${item.x + newX}, ${item.y + newY})`);
@@ -780,7 +780,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                     ...(lockBackground ? [] : extraComponentsState),
                 ]
                     .filter((c) => selectedIds.map(String).includes(String(c.id)))) === null || _b === void 0 ? void 0 : _b.map((item) => {
-                    const { g } = getAttributeElement(svg, item.id);
+                    const { g } = getAttributeElement(svg, String(item.id));
                     // const { x, y } = getTranslate(g);
                     const box = getGlobalBBox(svg, g);
                     return Object.assign(Object.assign({}, item), { 
@@ -978,7 +978,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                     return;
                 const lineHelper = svg.querySelector("#line-help");
                 const circleHelper = svg.querySelector("#circle-help");
-                const { inner, g } = getAttributeElement(svg, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id);
+                const { inner, g } = getAttributeElement(svg, String(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id));
                 if (!inner || !g)
                     return;
                 // mouse → SVG space
@@ -1130,7 +1130,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                 const newPoints = Object.assign(Object.assign({}, selectedComponent), { points: [...selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points, newCoord] });
                 (_c = svg.querySelector("#polyline-helper")) === null || _c === void 0 ? void 0 : _c.setAttribute("opacity", "1");
                 if (closing && ((_d = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.points) === null || _d === void 0 ? void 0 : _d.length) > 2) {
-                    const { g, inner } = getAttributeElement(svg, selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id);
+                    const { g, inner } = getAttributeElement(svg, String(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id));
                     const { height, width } = getGlobalBBox(svg, inner);
                     isOnMakePolygonRef.current = false;
                     setSelectedComponent(null);
@@ -1160,7 +1160,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
             // ROTATE
             if (targetRotate && !isRotateSelectionBox) {
                 const activeId = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id;
-                const { g } = getAttributeElement(svg, activeId);
+                const { g } = getAttributeElement(svg, String(activeId));
                 const boxLines = getGlobalBBox(svg, g);
                 const findById = [...componentsState, ...extraComponentsState].find((c) => c.id == activeId);
                 const { x, y } = getTranslate(g);
@@ -1226,7 +1226,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                     let y2 = [];
                     allElementSelectionGroup.forEach((element) => {
                         const activeId = element.id;
-                        const { g } = getAttributeElement(svg, activeId);
+                        const { g } = getAttributeElement(svg, String(activeId));
                         const { x, y, width, height } = getGlobalBBox(svg, g);
                         xs.push(x);
                         ys.push(y);
@@ -1279,7 +1279,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
             if (isMightResizeElement) {
                 const activeId = selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id;
                 const svg = svgRef.current;
-                const { g, element, points } = getAttributeElement(svg, activeId);
+                const { g, element, points } = getAttributeElement(svg, String(activeId));
                 const selectionBox = getGlobalBBox(svg, g);
                 const { width, height } = getSvgElementSize(element);
                 const { x, y } = getTranslate(g);
@@ -1311,7 +1311,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                 let y2 = [];
                 allElementSelectionGroup.forEach((element) => {
                     const activeId = element.id;
-                    const { g, inner, element: el } = getAttributeElement(svg, activeId);
+                    const { g, inner, element: el } = getAttributeElement(svg, String(activeId));
                     const { x, y, width, height } = getGlobalBBox(svg, g);
                     xs.push(x);
                     ys.push(y);
@@ -1377,7 +1377,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
             if (downAtResizePositionAndHasSelectionBox || isRotateSelectionBox) {
                 isResizeSelectionRef.current = false;
                 const results = (_q = dataElementSelectionGroupRef.current) === null || _q === void 0 ? void 0 : _q.map((item) => {
-                    const { g, element, inner, points } = getAttributeElement(svg, item.id);
+                    const { g, element, inner, points } = getAttributeElement(svg, String(item.id));
                     const { x, y } = getTranslate(g);
                     const { width, height } = getSvgElementSize(element);
                     const rotate = getRotation(inner.transform.baseVal);
@@ -1425,7 +1425,7 @@ const BoardTemplate = ({ refs, loadingRender }) => {
                 !isRotateSelectionBox) {
                 isResizeSelectionRef.current = false;
                 const results = (_r = dataElementSelectionGroupRef.current) === null || _r === void 0 ? void 0 : _r.map((item) => {
-                    const { g } = getAttributeElement(svg, item.id);
+                    const { g } = getAttributeElement(svg, String(item.id));
                     const { x, y } = getTranslate(g);
                     const getBBox = getGlobalBBox(svg, g);
                     const findComponent = [

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

@@ -67,13 +67,13 @@ export declare const resizeSeatSide: ({ seatsPositions, r, openSpace, newElement
 export declare const resizeSeatRectCircle: ({ seatsPositions, r, openSpace, newElement, seats, seatGroup, }: ResizeSeatSquare) => void;
 export declare const resizeSeatRectSquare: ({ seatsPositions, r, openSpace, newElement, seats, seatGroup, }: ResizeSeatSquare) => void;
 export declare function mergeById<T extends {
-    id?: string;
+    id?: string | number;
 }>(base: T[], updates: Partial<T>[]): T[];
 export declare function updateSingleComponent<T extends {
     id?: any;
 }>(state: T[], component: Partial<T>, setState: (v: T[]) => void): T[];
 export declare function updateManyComponents<T extends {
-    id?: string;
+    id?: string | number;
 }>(state: T[], components: Partial<T>[], setState: (v: T[]) => void): T[];
 export declare function normalizeAngle(angle: number): number;
 export declare function createTableGhost({ x, y, width, height, fill, shape, id, }: {
@@ -90,7 +90,7 @@ export declare function updateSelectionBox(svg: SVGSVGElement, boxSelection: {
     y: number;
     width: number;
     height: number;
-}, id?: string, unFollowCursor?: boolean): void;
+}, id?: string | number, unFollowCursor?: boolean): void;
 export declare function getGlobalBBox(svg: SVGSVGElement, el: SVGGraphicsElement): {
     x: number;
     y: number;

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

@@ -15,9 +15,7 @@ export type TableMatchEvent = {
     event: EventHandleType;
     properties: PropertiesProps;
 };
-export type ComponentProps<T = undefined> = PropertiesProps & T & {
-    [key: string]: PropertiesProps;
-};
+export type ComponentProps<T = undefined> = T extends undefined ? PropertiesProps : Omit<PropertiesProps, keyof T> & T;
 export type OnCurrentStateChange<TMeta = undefined> = ({ components, extraComponents, background, boundingBox, }: {
     components: ComponentProps<TMeta>[];
     extraComponents: ComponentProps[];

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

@@ -80,7 +80,12 @@ const LayerView = (props) => {
         setTimeout(() => {
             dispatch({ type: "panel/setLoading", payload: false });
         }, 1000);
-    }, [componentProps, extraComponentProps, defaultBackground, loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state]);
+    }, [
+        componentProps,
+        extraComponentProps,
+        defaultBackground,
+        loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state,
+    ]);
     useEffect(() => {
         setTooltip(Object.assign(Object.assign({}, tooltip), { visible: false }));
     }, [privilegedTags]);
@@ -140,7 +145,8 @@ const LayerView = (props) => {
                 maxX = Math.max(maxX, values.x + values.width);
                 maxY = Math.max(maxY, values.y + values.height);
             }
-            if ((i === componentsEditor.length - 1) && (extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 0) {
+            if (i === componentsEditor.length - 1 &&
+                (extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.length) === 0) {
                 minX = minX > 10 ? minX - 10 : minX;
                 minY = minY > 10 ? minY - 10 : minY;
                 maxX = maxX + 10;
@@ -300,8 +306,9 @@ const LayerView = (props) => {
         // clone element yang diklik
         let ghost = targetGroup.cloneNode(true);
         const ghostId = JSON.parse(targetGroup.getAttribute("data-id") || "{}");
-        const allowedDrag = !(props === null || props === void 0 ? void 0 : props.dragTableBlockKey) ? true :
-            (_a = props === null || props === void 0 ? void 0 : props.dragTableBlockKey) === null || _a === void 0 ? void 0 : _a.some((_) => {
+        const allowedDrag = !(props === null || props === void 0 ? void 0 : props.dragTableBlockKey)
+            ? true
+            : (_a = props === null || props === void 0 ? void 0 : props.dragTableBlockKey) === null || _a === void 0 ? void 0 : _a.some((_) => {
                 const dataRaw = originalData({ id: ghostId, type: "find" });
                 return _.value !== (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
             });

package/package.json

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