seat-editor 3.4.4 → 3.4.5

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

@@ -6,13 +6,14 @@ 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, loadingRender, actionPrivileged = {
+    const { componentProps, extraComponentProps, onSelectComponent, onDoubleClick, onCurrentStateChange, mappingKey, statusKey, defaultBackground, defaultBoundingBox, iconTags, tooltipProps, onRightClick, allowTooltip = true, tableMatchKey, eventMatchTable, ghostAttributes, onDrop, onSwitch, refs, privilegedTags, loadingRender, actionPrivileged = {
         select: true,
         move: true,
         switch: true,
         drop: true,
-        rightClick: true
-    } } = props;
+        rightClick: true,
+        double: true,
+    }, } = props;
     const widthTooltip = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.minWidth) || 168;
     const tableGhost = useRef(null);
     const hoverUnderghostId = useRef(null);
@@ -130,6 +131,18 @@ const LayerView = (props) => {
         }
         return data;
     };
+    const handleDoubleClick = (items, e) => {
+        const find = componentsEditor.find((item) => {
+            var _a;
+            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
+                return item[mappingKey].id == ((_a = items[mappingKey]) === null || _a === void 0 ? void 0 : _a.id);
+            }
+            return (item === null || item === void 0 ? void 0 : item.id) == (items === null || items === void 0 ? void 0 : items.id);
+        });
+        onDoubleClick && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.double) && onDoubleClick(find);
+        const seletedTable = mappingKey ? find[mappingKey] : find;
+        setSelectedTable(seletedTable);
+    };
     const handleSelectComponent = (items, e) => {
         const find = componentsEditor.find((item) => {
             var _a;
@@ -139,9 +152,14 @@ const LayerView = (props) => {
             return (item === null || item === void 0 ? void 0 : item.id) == (items === null || items === void 0 ? void 0 : items.id);
         });
         const rightClick = e.button === 2;
-        const click = e.button === 0;
-        (onRightClick && rightClick && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.rightClick)) && onRightClick(e, find);
-        (onSelectComponent && !rightClick && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.select)) && onSelectComponent(find);
+        onRightClick &&
+            rightClick &&
+            (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.rightClick) &&
+            onRightClick(e, find);
+        onSelectComponent &&
+            !rightClick &&
+            (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.select) &&
+            onSelectComponent(find);
         const seletedTable = mappingKey ? find[mappingKey] : find;
         setSelectedTable(seletedTable);
     };
@@ -163,10 +181,15 @@ const LayerView = (props) => {
             }
             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;
-                maxY = maxY + 10;
+                const centerX = (minX + maxX) / 2;
+                const centerY = (minY + maxY) / 2;
+                const padding = 20;
+                const width = maxX - minX + padding * 2;
+                const height = maxY - minY + padding * 2;
+                minX = centerX - width / 2;
+                minY = centerY - height / 2;
+                maxX = maxX - minX + padding * 2;
+                maxY = maxY - minY + padding * 2;
             }
         });
         extraComponentsEditor === null || extraComponentsEditor === void 0 ? void 0 : extraComponentsEditor.forEach((values) => {
@@ -216,7 +239,7 @@ const LayerView = (props) => {
         //   width: maxX + paddingX * 2,
         //   height: maxY + paddingY + (maxY + paddingY) * 0.5,
         // };
-        // console.log(minX, minY, maxX, maxY,props?.viewStyles, "bounding box");
+        // console.log(minX, minY, maxX, maxY, props?.viewStyles, "bounding box");
         return {
             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),
@@ -279,7 +302,7 @@ const LayerView = (props) => {
             };
             // drop from out layout editor
             if (type === "drop") {
-                (onDrop && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.drop)) && onDrop(event, data);
+                onDrop && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.drop) && onDrop(event, data);
             }
             // cari elemen bentuk (rect / circle / path)
             const shape = group.querySelector("rect") ||
@@ -301,6 +324,10 @@ const LayerView = (props) => {
         const transformed = point.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
         return { x: transformed.x, y: transformed.y };
     };
+    const lastClickRef = useRef(0);
+    const clickTimerRef = useRef(null);
+    const ignoreNextRef = useRef(false);
+    const DOUBLE_DELAY = 250;
     const handlePointerDown = (e) => {
         var _a;
         const svg = svgRef.current;
@@ -327,7 +354,9 @@ const LayerView = (props) => {
             : !((_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]);
-            }))) && ((actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.move) && (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.switch));
+            }))) &&
+            (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.move) &&
+            (actionPrivileged === null || actionPrivileged === void 0 ? void 0 : actionPrivileged.switch);
         if (ghostAttributes) {
             Object.keys(ghostAttributes).forEach((key) => {
                 ghost.setAttribute(key, ghostAttributes[key]);
@@ -430,7 +459,27 @@ const LayerView = (props) => {
                     visible: rightClick,
                 });
                 const findDayaById = originalData({ id: dataId, type: "find" });
-                handleSelectComponent(findDayaById, e);
+                const now = Date.now();
+                if (ignoreNextRef.current) {
+                    ignoreNextRef.current = false;
+                    return;
+                }
+                const diff = now - lastClickRef.current;
+                if (diff < DOUBLE_DELAY) {
+                    if (clickTimerRef.current) {
+                        handleDoubleClick(findDayaById, e);
+                        clearTimeout(clickTimerRef.current);
+                        clickTimerRef.current = null;
+                    }
+                    ignoreNextRef.current = true;
+                    lastClickRef.current = 0;
+                    return;
+                }
+                lastClickRef.current = now;
+                clickTimerRef.current = window.setTimeout(() => {
+                    handleSelectComponent(findDayaById, e);
+                    clickTimerRef.current = null;
+                }, DOUBLE_DELAY);
             }
             if (isDragging.current && hasMoved && allowedDrag) {
                 // drag between group
@@ -578,7 +627,11 @@ const LayerView = (props) => {
             wheelPanning: true,
         }} wheel={{
             disabled: false,
-        }} onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} maxScale={1000} initialScale={1} smooth={true} centerOnInit={true} {...props.transformProps}>
+        }} 
+    // doubleClick={{
+    //   disabled: true,
+    // }}
+    onTransformed={({ state: { scale } }) => setScale(scale)} minScale={1} maxScale={1000} initialScale={1} smooth={true} centerOnInit={true} {...props.transformProps}>
         <TransformComponent wrapperStyle={{
             width: "100%",
             height: "100%",
@@ -589,7 +642,9 @@ const LayerView = (props) => {
             height: "100%",
             // pointerEvents: disabled ? "none" : "auto",
         }}>
-          <svg id="workspace" onContextMenu={(e) => e.preventDefault()} onDrop={(e) => handleTableEvent(e, "drop")} onPointerDown={handlePointerDown} onPointerUp={handleMouseUp} ref={svgRef} width="100%" height="100%" 
+          <svg id="workspace" onContextMenu={(e) => e.preventDefault()} onDrop={(e) => handleTableEvent(e, "drop")} onPointerDown={handlePointerDown} onPointerUp={handleMouseUp} 
+    // onDoubleClick={handleDoubleClick}
+    ref={svgRef} width="100%" height="100%" 
     // scale={5}
     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,

package/package.json

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