seat-editor 3.0.4 → 3.0.6

package/dist/app/constant.js

@@ -3068,7 +3068,7 @@ export const data4 = [
         status: 0,
         properties: {
             x: 100,
-            y: 20,
+            y: 520,
             id: "1761194669729132000",
             stroke: "#347ADB", //warna border
             fill: "#E1F4FF", //warna latar belakang

package/dist/app/only-view/constant.js

@@ -1,13 +1,13 @@
 export const dummyImage = [
     {
         "id": 1747388267450,
-        "x": 0,
-        "y": 0,
-        "width": 973.391304347826,
+        "x": 368,
+        "y": 77.54706573486328,
+        "width": 751.9405198530717,
         "height": 812,
         "rotation": 0,
         "shape": "background",
-        "src": "http://192.168.88.99:9106/v1/public/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/1745396181_floor_boi.jpeg",
+        "src": "https://cdn.table.link/prod/5bf923de-2366-4a11-9b8b-e92de0afbf05/3a65cb36-7d85-4c38-9403-a15f94641920/68d45207-d66b-4bb5-92a2-4e5a87715e98/rsvp/1753965985769725756_BOI Reg.png",
         "fill": "#bca16a",
         "opacity": 1,
         "labels": [

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

@@ -229,14 +229,19 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     }} onMouseLeave={(e) => {
                         const group = e.currentTarget;
                         unhighlightGroup(group);
-                    }}>
-            <rect key={`${id}-rect`} x={x} y={y} width={width} height={height} fill={fill} className="blink-2" transform={transformRotate} {...omit(item, TABLE_KEYS)} {...commonProps}/>
+                    }} transform={`translate(${x}, ${y})`}>
+            <rect key={`${id}-rect`} 
+                // x={}
+                // y={y}
+                width={width} height={height} fill={fill} className="blink-2" 
+                // transform={transformRotate}
+                {...omit(item, [...TABLE_KEYS, "x", "y", "label"])} {...commonProps}/>
 
             {renderTags(tags)}
 
             {labels === null || labels === void 0 ? void 0 : labels.map((_, index) => {
                         var _a, _b, _c, _d;
-                        return (<text {...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} {..._}>
+                        return (<text {...omit(commonProps, ["opacity", "stroke", "strokeWidth"])} key={`${id}-label-${index}`} x={width / 2 + ((_a = _ === null || _ === void 0 ? void 0 : _.x) !== null && _a !== void 0 ? _a : 0)} 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}
                 </text>);
                     })}

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

@@ -4,6 +4,7 @@ import { TransformWrapper, TransformComponent, } from "react-zoom-pan-pinch";
 import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
 import Layers from "../../components/layer-v4";
 import { isEmpty } from "lodash";
+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 widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
@@ -154,11 +155,13 @@ const LayerView = (props) => {
             minX = minX - minX * 0.5;
             minY = minY - minY * 0.5;
         }
+        const paddingY = maxY * 0.2 + minY * 0.2;
+        const paddingX = maxX * 0.2 + minX * 0.1;
         return {
-            minX: backgroundHasOne ? minX : minX - minX * 0.5,
-            minY: backgroundHasOne ? minY : minY - minY * 0.5,
-            width: maxX,
-            height: maxY,
+            minX: (minX - paddingX) - (minX - paddingX) * 0.5,
+            minY: minY - paddingY * 2,
+            width: maxX + paddingX * 2,
+            height: maxY + paddingY + (maxY + paddingY) * 0.5,
         };
     }, [componentsEditor, extraComponentsEditor]);
     const renderElements = (elementEditor, mappingKey, tableMatchKey) => {
@@ -198,7 +201,6 @@ const LayerView = (props) => {
     const handleTableEvent = (event, type) => {
         var _a;
         event.preventDefault();
-        console.log("drop");
         // cari elemen yg diklik
         const elementTarget = event.target;
         if (!elementTarget)
@@ -230,8 +232,17 @@ const LayerView = (props) => {
             console.error("Invalid data-id JSON:", err);
         }
     };
+    const getSvgCoords = (e) => {
+        var _a;
+        const svg = svgRef.current;
+        const point = svg.createSVGPoint();
+        point.x = e.clientX;
+        point.y = e.clientY;
+        const transformed = point.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+        return { x: transformed.x, y: transformed.y };
+    };
     const handlePointerDown = (e) => {
-        var _a, _b;
+        var _a;
         const svg = svgRef.current;
         if (!e.isPrimary)
             return;
@@ -241,6 +252,7 @@ const LayerView = (props) => {
         let hasMoved = false;
         const startX = e.clientX;
         const startY = e.clientY;
+        const { x, y } = getSvgCoords(e);
         const targetGroup = e.target.closest("g[data-id]");
         if (!targetGroup) {
             setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
@@ -267,20 +279,15 @@ const LayerView = (props) => {
         const pt = svg.createSVGPoint();
         pt.x = e.clientX;
         pt.y = e.clientY;
-        const pointerSVG = pt.matrixTransform((_b = svg.getScreenCTM()) === null || _b === void 0 ? void 0 : _b.inverse());
-        const box = targetGroup.getBBox();
-        const mousePositionInGroup = {
-            x: pointerSVG.x - box.x,
-            y: pointerSVG.y - box.y,
-        };
+        const startBox = getTranslate(targetGroup);
         const groupCTM = targetGroup.getCTM();
         if (!groupCTM) {
             setTooltip((prev) => (Object.assign(Object.assign({}, prev), { visible: false })));
             return;
         }
         const offset = {
-            x: box.x + mousePositionInGroup.x,
-            y: box.y + mousePositionInGroup.y,
+            x: x - startBox.x,
+            y: y - startBox.y,
         };
         const pointerMoveGhost = (ev) => {
             var _a;
@@ -477,7 +484,10 @@ const LayerView = (props) => {
                 handlePan(0, -speedPanning);
         }
     };
-    return (<div className="relative w-full h-full flex-1" ref={containerRef} {...props.containerProps}>
+    return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{
+            overflow: "auto",
+            WebkitOverflowScrolling: "touch",
+        }} {...props.containerProps}>
       {/* {isDragging?.current && (
           <div className="absolute bottom-1/2 left-1  flex gap-4 z-[10]">
             <button className="p-4 bg-gray-400">+</button>

package/package.json

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