seat-editor 3.3.38 → 3.3.40

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

@@ -6,7 +6,7 @@ import Layers from "../../components/layer-v4";
 import { getTranslate } from "../board-v3/utils";
 import { Spin } from "antd";
 const LayerView = (props) => {
-    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, disabled, loadingRender, } = props;
+    const { componentProps, extraComponentProps, onSelectComponent, onCurrentStateChange, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, disabled = true, loadingRender, } = props;
     const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
     const tableGhost = useRef(null);
     const hoverUnderghostId = useRef(null);
@@ -92,7 +92,7 @@ const LayerView = (props) => {
         defaultBackground,
         loadingRender === null || loadingRender === void 0 ? void 0 : loadingRender.state,
         props === null || props === void 0 ? void 0 : props.viewOnly,
-        defaultBoundingBox
+        defaultBoundingBox,
     ]);
     useEffect(() => {
         setTooltip(Object.assign(Object.assign({}, tooltip), { visible: false }));
@@ -138,7 +138,7 @@ const LayerView = (props) => {
         setSelectedTable(seletedTable);
     };
     const boundingBox = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         if (!componentsEditor && (componentsEditor === null || componentsEditor === void 0 ? void 0 : componentsEditor.length) === 0) {
             return { minX: 0, minY: 0, width: 500, height: 500 };
         }
@@ -196,10 +196,10 @@ const LayerView = (props) => {
         if (hasBoundingBox) {
             hasBoundingBoxRef.current = true;
             return {
-                minX: boundingBoxProps.x,
-                minY: boundingBoxProps.y,
-                width: boundingBoxProps.width,
-                height: boundingBoxProps.height,
+                minX: boundingBoxProps.x - (((_g = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _g === void 0 ? void 0 : _g.paddingLeft) || 0),
+                minY: boundingBoxProps.y - (((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingTop) || 0),
+                width: boundingBoxProps.width + (((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingRight) || 0),
+                height: boundingBoxProps.height + (((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingBottom) || 0),
             };
         }
         // return {
@@ -210,10 +210,10 @@ const LayerView = (props) => {
         // };
         // console.log(minX, minY, maxX, maxY,props?.viewStyles, "bounding box");
         return {
-            minX: minX - (((_g = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _g === void 0 ? void 0 : _g.paddingLeft) || 0),
-            minY: minY - (((_h = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _h === void 0 ? void 0 : _h.paddingTop) || 0),
-            width: maxX + (((_j = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _j === void 0 ? void 0 : _j.paddingRight) || 0),
-            height: maxY + (((_k = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _k === void 0 ? void 0 : _k.paddingBottom) || 0),
+            minX: minX - (((_l = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _l === void 0 ? void 0 : _l.paddingLeft) || 0),
+            minY: minY - (((_m = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _m === void 0 ? void 0 : _m.paddingTop) || 0),
+            width: maxX + (((_o = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _o === void 0 ? void 0 : _o.paddingRight) || 0),
+            height: maxY + (((_p = props === null || props === void 0 ? void 0 : props.viewStyles) === null || _p === void 0 ? void 0 : _p.paddingBottom) || 0),
         };
     }, [componentsEditor, extraComponentsEditor, boundingBoxProps]);
     const renderElements = (elementEditor, mappingKey, tableMatchKey) => {
@@ -314,12 +314,12 @@ 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)
+        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]);
-            });
+                return _.value != (dataRaw === null || dataRaw === void 0 ? void 0 : dataRaw[_.key]);
+            })) && !disabled;
         if (ghostAttributes) {
             Object.keys(ghostAttributes).forEach((key) => {
                 ghost.setAttribute(key, ghostAttributes[key]);
@@ -345,35 +345,35 @@ const LayerView = (props) => {
         };
         const pointerMoveGhost = (ev) => {
             var _a;
-            isDragging.current = true;
-            const p = svg.createSVGPoint();
-            p.x = ev.clientX;
-            p.y = ev.clientY;
-            const dx = ev.clientX - startX;
-            const dy = ev.clientY - startY;
-            const distance = Math.sqrt(dx * dx + dy * dy);
-            onPanning(ev);
-            if (!hasMoved && distance > 0) {
-                // transformRef?.current?.instance
-                // only move ghost if the mouse has moved more than 5 pixels
-                hasMoved = true;
-                isDragging.current = true;
-            }
-            // ✅ DETEKSI ELEMEN YANG DILEWATI POINTER
-            ghost.style.display = "none";
-            const elemUnderPointer = document.elementFromPoint(ev.clientX, ev.clientY);
-            ghost.style.display = "";
-            const hoveredGroup = elemUnderPointer === null || elemUnderPointer === void 0 ? void 0 : elemUnderPointer.closest("g[data-id]");
-            const dataHoveredGhostId = JSON.parse((hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute("data-id")) || "{}");
-            const dataGhostId = JSON.parse(ghost.getAttribute("data-id") || "{}");
-            if (dataHoveredGhostId !== dataGhostId) {
-                hoverUnderghostId.current = dataHoveredGhostId;
-            }
-            const posSVG = p.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
-            // posisi awal ghost di bawah kursor tanpa matrix dulu
-            const newX = posSVG.x - offset.x;
-            const newY = posSVG.y - offset.y;
             if (allowedDrag) {
+                isDragging.current = true;
+                const p = svg.createSVGPoint();
+                p.x = ev.clientX;
+                p.y = ev.clientY;
+                const dx = ev.clientX - startX;
+                const dy = ev.clientY - startY;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                onPanning(ev);
+                if (!hasMoved && distance > 0) {
+                    // transformRef?.current?.instance
+                    // only move ghost if the mouse has moved more than 5 pixels
+                    hasMoved = true;
+                    isDragging.current = true;
+                }
+                // ✅ DETEKSI ELEMEN YANG DILEWATI POINTER
+                ghost.style.display = "none";
+                const elemUnderPointer = document.elementFromPoint(ev.clientX, ev.clientY);
+                ghost.style.display = "";
+                const hoveredGroup = elemUnderPointer === null || elemUnderPointer === void 0 ? void 0 : elemUnderPointer.closest("g[data-id]");
+                const dataHoveredGhostId = JSON.parse((hoveredGroup === null || hoveredGroup === void 0 ? void 0 : hoveredGroup.getAttribute("data-id")) || "{}");
+                const dataGhostId = JSON.parse(ghost.getAttribute("data-id") || "{}");
+                if (dataHoveredGhostId !== dataGhostId) {
+                    hoverUnderghostId.current = dataHoveredGhostId;
+                }
+                const posSVG = p.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+                // posisi awal ghost di bawah kursor tanpa matrix dulu
+                const newX = posSVG.x - offset.x;
+                const newY = posSVG.y - offset.y;
                 ghost.setAttribute("transform", `translate(${newX}, ${newY})`);
             }
         };
@@ -539,6 +539,15 @@ const LayerView = (props) => {
         }
     };
     const hasBoundingBox = hasBoundingBoxRef.current;
+    const isValidBoundingBox = Number.isFinite(boundingBox.minX) &&
+        Number.isFinite(boundingBox.minY) &&
+        Number.isFinite(boundingBox.width) &&
+        Number.isFinite(boundingBox.height) &&
+        boundingBox.width > 0 &&
+        boundingBox.height > 0;
+    const viewBox = isValidBoundingBox
+        ? `${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`
+        : "0 0 1000 1000";
     return (<div className="relative w-full h-full flex-1" ref={containerRef} style={{
             overflow: "auto",
             WebkitOverflowScrolling: "touch",
@@ -575,7 +584,7 @@ const LayerView = (props) => {
         }}>
           <svg id="workspace" onContextMenu={(e) => e.preventDefault()} onDrop={(e) => handleTableEvent(e, "drop")} onPointerDown={handlePointerDown} onPointerUp={handleMouseUp} ref={svgRef} width="100%" height="100%" 
     // scale={5}
-    overflow="hidden" viewBox={`${boundingBox.minX} ${boundingBox.minY} ${boundingBox.width} ${boundingBox.height}`} className={"h-full"} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
+    overflow="hidden" viewBox={viewBox} className={"h-full"} xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" style={{
             background: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : defaultBackground,
             display: "block",
             pointerEvents: disabled ? "none" : "all",
@@ -587,7 +596,7 @@ const LayerView = (props) => {
                   <rect x={boundingBox.minX} y={boundingBox.minY} width={boundingBox.width} height={boundingBox.height}/>
                 </clipPath>
               </defs>)}
-            <g id="main-layer" clip-path="url(#contentCrop)">
+            <g id="main-layer" clipPath="url(#contentCrop)">
               <Layers components={[
             ...extraComponentsEditor,
             ...renderElements(componentsEditor, mappingKey, tableMatchKey),

package/dist/provider/redux-provider.d.ts

@@ -1,3 +1,3 @@
 export declare const ReduxProvider: ({ children }: {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/dist/provider/store-provider.d.ts

@@ -1,4 +1,4 @@
 export declare const StoreProvider: ({ children, themeColor, }: {
     children: React.ReactNode;
     themeColor?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/package.json

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