@mindexec/cli 0.2.218 → 0.2.220

package/wwwroot/_content/MindExecution.Shared/js/mind-map-css3d-manager.js

@@ -830,7 +830,11 @@
             body.is-zooming .css3d-resolution-wrapper,
             body.is-panning .css3d-resolution-wrapper,
             body.mindcanvas-is-moving .css3d-resolution-wrapper,
-            body.mindcanvas-is-dense .css3d-resolution-wrapper {
+            body.mindcanvas-is-dense .css3d-resolution-wrapper,
+            #css3d-dom-wrapper.is-zooming .css3d-resolution-wrapper,
+            #css3d-dom-wrapper.is-panning .css3d-resolution-wrapper,
+            #css3d-dom-wrapper.mindcanvas-is-moving .css3d-resolution-wrapper,
+            #css3d-dom-wrapper.mindcanvas-is-dense .css3d-resolution-wrapper {
                 transition: none !important;
                 -webkit-transition: none !important;
                 filter: none !important;
@@ -844,7 +848,15 @@
             body.is-zooming .css3d-resolution-wrapper [id^="css3d-node-"],
             body.is-panning .css3d-resolution-wrapper [id^="css3d-node-"],
             body.mindcanvas-is-moving .css3d-resolution-wrapper [id^="css3d-node-"],
-            body.mindcanvas-is-dense .css3d-resolution-wrapper [id^="css3d-node-"] {
+            body.mindcanvas-is-dense .css3d-resolution-wrapper [id^="css3d-node-"],
+            #css3d-dom-wrapper.is-zooming .css3d-resolution-wrapper .css3d-dynamic-node,
+            #css3d-dom-wrapper.is-panning .css3d-resolution-wrapper .css3d-dynamic-node,
+            #css3d-dom-wrapper.mindcanvas-is-moving .css3d-resolution-wrapper .css3d-dynamic-node,
+            #css3d-dom-wrapper.mindcanvas-is-dense .css3d-resolution-wrapper .css3d-dynamic-node,
+            #css3d-dom-wrapper.is-zooming .css3d-resolution-wrapper [id^="css3d-node-"],
+            #css3d-dom-wrapper.is-panning .css3d-resolution-wrapper [id^="css3d-node-"],
+            #css3d-dom-wrapper.mindcanvas-is-moving .css3d-resolution-wrapper [id^="css3d-node-"],
+            #css3d-dom-wrapper.mindcanvas-is-dense .css3d-resolution-wrapper [id^="css3d-node-"] {
                 box-shadow: none !important;
                 filter: none !important;
                 -webkit-filter: none !important;
@@ -858,6 +870,12 @@
             body.is-zooming .embed-card *,
             body.is-zooming .embed-action,
             body.is-zooming .embed-play-button,
+            #css3d-dom-wrapper.is-zooming .embed-content iframe,
+            #css3d-dom-wrapper.is-zooming .embed-iframe-host iframe,
+            #css3d-dom-wrapper.is-zooming .embed-card,
+            #css3d-dom-wrapper.is-zooming .embed-card *,
+            #css3d-dom-wrapper.is-zooming .embed-action,
+            #css3d-dom-wrapper.is-zooming .embed-play-button,
             body.is-panning .embed-content iframe,
             body.is-panning .embed-iframe-host iframe,
             body.is-panning .embed-card,
@@ -876,6 +894,12 @@
             body.mindcanvas-is-moving .embed-card *,
             body.mindcanvas-is-moving .embed-action,
             body.mindcanvas-is-moving .embed-play-button,
+            #css3d-dom-wrapper.mindcanvas-is-moving .embed-content iframe,
+            #css3d-dom-wrapper.mindcanvas-is-moving .embed-iframe-host iframe,
+            #css3d-dom-wrapper.mindcanvas-is-moving .embed-card,
+            #css3d-dom-wrapper.mindcanvas-is-moving .embed-card *,
+            #css3d-dom-wrapper.mindcanvas-is-moving .embed-action,
+            #css3d-dom-wrapper.mindcanvas-is-moving .embed-play-button,
             .is-dragging .embed-content iframe,
             .is-dragging .embed-iframe-host iframe,
             .is-dragging .embed-card,
@@ -908,12 +932,16 @@
 
             body.is-zooming .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host,
             body.is-zooming .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host iframe,
+            #css3d-dom-wrapper.is-zooming .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host,
+            #css3d-dom-wrapper.is-zooming .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host iframe,
             body.is-panning .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host,
             body.is-panning .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host iframe,
             body.is-node-dragging .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host,
             body.is-node-dragging .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host iframe,
             body.mindcanvas-is-moving .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host,
             body.mindcanvas-is-moving .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host iframe,
+            #css3d-dom-wrapper.mindcanvas-is-moving .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host,
+            #css3d-dom-wrapper.mindcanvas-is-moving .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host iframe,
             .is-dragging .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host,
             .is-dragging .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host iframe,
             .is-panning .css3d-resolution-wrapper.node-type-embed .embed-content[data-iframe-interacting="true"] .embed-iframe-host,
@@ -928,7 +956,15 @@
             body.is-zooming .css3d-resolution-wrapper .map-node-memo__agent-console-panel,
             body.is-panning .css3d-resolution-wrapper .map-node-memo__agent-console-panel,
             body.mindcanvas-is-moving .css3d-resolution-wrapper .map-node-memo__agent-console-panel,
-            body.mindcanvas-is-dense .css3d-resolution-wrapper .map-node-memo__agent-console-panel {
+            body.mindcanvas-is-dense .css3d-resolution-wrapper .map-node-memo__agent-console-panel,
+            #css3d-dom-wrapper.is-zooming .ai-loading-row.ai-loading-row-media,
+            #css3d-dom-wrapper.is-panning .ai-loading-row.ai-loading-row-media,
+            #css3d-dom-wrapper.mindcanvas-is-moving .ai-loading-row.ai-loading-row-media,
+            #css3d-dom-wrapper.mindcanvas-is-dense .ai-loading-row.ai-loading-row-media,
+            #css3d-dom-wrapper.is-zooming .css3d-resolution-wrapper .map-node-memo__agent-console-panel,
+            #css3d-dom-wrapper.is-panning .css3d-resolution-wrapper .map-node-memo__agent-console-panel,
+            #css3d-dom-wrapper.mindcanvas-is-moving .css3d-resolution-wrapper .map-node-memo__agent-console-panel,
+            #css3d-dom-wrapper.mindcanvas-is-dense .css3d-resolution-wrapper .map-node-memo__agent-console-panel {
                 box-shadow: none !important;
                 backdrop-filter: none !important;
                 -webkit-backdrop-filter: none !important;
@@ -9742,6 +9778,99 @@
         }
     }
 
+    function getBusinessAutomationCachedViewportMetrics(module) {
+        const width = Math.max(0, Number(module?._lastViewportWidth || 0));
+        const height = Math.max(0, Number(module?._lastViewportHeight || 0));
+        if (width > 0 && height > 0) {
+            return { width, height };
+        }
+
+        return {
+            width: Math.max(1, Number(module?.container?.clientWidth || 0)),
+            height: Math.max(1, Number(module?.container?.clientHeight || 0))
+        };
+    }
+
+    function recordBusinessAutomationEdgeCameraState(module, width, height) {
+        if (!module?.camera) {
+            return;
+        }
+
+        module._lastBusinessAutomationEdgeCameraState = {
+            x: Number(module.camera.position?.x || 0),
+            y: Number(module.camera.position?.y || 0),
+            z: Math.max(1, Number(module.camera.position?.z || 1)),
+            width: Math.max(1, Number(width || 1)),
+            height: Math.max(1, Number(height || 1)),
+            fov: Number(module.camera.fov || 45)
+        };
+    }
+
+    function clearBusinessAutomationEdgeCameraTransform(module) {
+        const layers = [
+            module?._businessAutomationEdgeVisualLayer || null,
+            module?._businessAutomationEdgeLayer || null
+        ].filter(Boolean);
+        if (layers.length === 0 || module?._businessAutomationEdgeCameraTransformActive !== true) {
+            return false;
+        }
+
+        for (const layer of layers) {
+            if (!layer?.style) continue;
+            layer.style.transform = '';
+            layer.style.transformOrigin = '';
+            layer.style.willChange = '';
+        }
+        module._businessAutomationEdgeCameraTransformActive = false;
+        module._lastBusinessAutomationEdgeTransformKey = '';
+        return true;
+    }
+
+    function syncBusinessAutomationEdgesForCameraMotion(module = _module) {
+        const visualLayer = module?._businessAutomationEdgeVisualLayer || null;
+        const hitLayer = module?._businessAutomationEdgeLayer || null;
+        const camera = module?.camera || null;
+        const last = module?._lastBusinessAutomationEdgeCameraState || null;
+        if (!camera || !last || (!visualLayer?.isConnected && !hitLayer?.isConnected)) {
+            return false;
+        }
+
+        const viewportMetrics = getBusinessAutomationCachedViewportMetrics(module);
+        const width = Math.max(1, Number(viewportMetrics.width || last.width || 1));
+        const height = Math.max(1, Number(viewportMetrics.height || last.height || 1));
+        const currentZ = Math.max(1, Number(camera.position?.z || 1));
+        const lastZ = Math.max(1, Number(last.z || currentZ));
+        const vfov = (Number(camera.fov || last.fov || 45) * Math.PI) / 180;
+        const viewHeight = 2 * Math.tan(vfov / 2) * currentZ;
+        const pxPerWorld = height / Math.max(1, viewHeight);
+        const scale = Math.max(0.05, Math.min(20, lastZ / currentZ));
+        const currentX = Number(camera.position?.x || 0);
+        const currentY = Number(camera.position?.y || 0);
+        const translateX = (Number(last.x || 0) - currentX) * pxPerWorld;
+        const translateY = (currentY - Number(last.y || 0)) * pxPerWorld;
+        const transformKey = [
+            Math.round(width),
+            Math.round(height),
+            Math.round(translateX * 100),
+            Math.round(translateY * 100),
+            Math.round(scale * 10000)
+        ].join('|');
+
+        if (transformKey !== module._lastBusinessAutomationEdgeTransformKey) {
+            const transform = `translate3d(${translateX.toFixed(3)}px, ${translateY.toFixed(3)}px, 0) scale(${scale.toFixed(5)})`;
+            for (const layer of [visualLayer, hitLayer]) {
+                if (!layer?.style) continue;
+                layer.style.transformOrigin = '50% 50%';
+                layer.style.willChange = 'transform';
+                layer.style.transform = transform;
+            }
+            module._lastBusinessAutomationEdgeTransformKey = transformKey;
+        }
+
+        module._businessAutomationEdgeCameraTransformActive = true;
+        return true;
+    }
+
     function getBusinessAutomationPinAnchorElement(pinElement) {
         return pinElement?.querySelector?.('.map-node-memo__automation-pin-dot') || pinElement || null;
     }
@@ -10086,14 +10215,46 @@
         }
 
         const rects = collectBusinessAutomationResidentOcclusionRects(module, containerRect, viewportWidth, viewportHeight);
+        const renderState = module?._businessAutomationEdgeRenderState || null;
         if (rects.length === 0) {
             visualGroup.removeAttribute('mask');
+            if (renderState?.occlusionMaskState) {
+                renderState.occlusionMaskState.activeCount = 0;
+                renderState.occlusionMaskState.blackRects?.forEach?.(element => {
+                    if (element?.parentNode) {
+                        element.remove();
+                    }
+                });
+            }
             return;
         }
 
         const maskId = 'mind-map-business-automation-resident-occlusion-mask';
-        const defs = createBusinessAutomationSvgElement('defs');
-        const mask = createBusinessAutomationSvgElement('mask', {
+        const state = renderState || {};
+        let maskState = state.occlusionMaskState || null;
+        if (!maskState) {
+            maskState = {
+                defs: createBusinessAutomationSvgElement('defs'),
+                mask: createBusinessAutomationSvgElement('mask'),
+                baseRect: createBusinessAutomationSvgElement('rect'),
+                blackRects: [],
+                activeCount: 0
+            };
+            maskState.mask.style.maskType = 'luminance';
+            maskState.mask.appendChild(maskState.baseRect);
+            maskState.defs.appendChild(maskState.mask);
+            if (renderState) {
+                renderState.occlusionMaskState = maskState;
+            }
+        }
+
+        if (maskState.defs.parentNode !== visualLayer) {
+            visualLayer.insertBefore(maskState.defs, visualGroup);
+        } else if (maskState.defs.nextSibling !== visualGroup && visualGroup.parentNode === visualLayer) {
+            visualLayer.insertBefore(maskState.defs, visualGroup);
+        }
+
+        setBusinessAutomationSvgAttributes(maskState.mask, {
             id: maskId,
             x: '-80',
             y: '-80',
@@ -10101,17 +10262,21 @@
             height: String(viewportHeight + 160),
             maskUnits: 'userSpaceOnUse'
         });
-        mask.style.maskType = 'luminance';
-        mask.appendChild(createBusinessAutomationSvgElement('rect', {
+        setBusinessAutomationSvgAttributes(maskState.baseRect, {
             x: '-80',
             y: '-80',
             width: String(viewportWidth + 160),
             height: String(viewportHeight + 160),
             fill: '#ffffff'
-        }));
+        });
 
-        rects.forEach(rect => {
-            mask.appendChild(createBusinessAutomationSvgElement('rect', {
+        rects.forEach((rect, index) => {
+            let element = maskState.blackRects[index] || null;
+            if (!element) {
+                element = createBusinessAutomationSvgElement('rect');
+                maskState.blackRects[index] = element;
+            }
+            setBusinessAutomationSvgAttributes(element, {
                 x: rect.x.toFixed(1),
                 y: rect.y.toFixed(1),
                 width: rect.width.toFixed(1),
@@ -10119,11 +10284,19 @@
                 rx: '6',
                 ry: '6',
                 fill: '#000000'
-            }));
+            });
+            if (element.parentNode !== maskState.mask) {
+                maskState.mask.appendChild(element);
+            }
         });
+        for (let i = rects.length; i < maskState.blackRects.length; i++) {
+            const element = maskState.blackRects[i];
+            if (element?.parentNode) {
+                element.remove();
+            }
+        }
+        maskState.activeCount = rects.length;
 
-        defs.appendChild(mask);
-        visualLayer.appendChild(defs);
         visualGroup.setAttribute('mask', `url(#${maskId})`);
     }
 
@@ -10194,11 +10367,26 @@
         return true;
     }
 
-    function createBusinessAutomationSvgElement(name, attributes) {
-        const element = document.createElementNS('http://www.w3.org/2000/svg', name);
+    function setBusinessAutomationSvgAttribute(element, key, value) {
+        if (!element || !key) {
+            return;
+        }
+
+        const nextValue = String(value ?? '');
+        if (element.getAttribute(key) !== nextValue) {
+            element.setAttribute(key, nextValue);
+        }
+    }
+
+    function setBusinessAutomationSvgAttributes(element, attributes) {
         Object.entries(attributes || {}).forEach(([key, value]) => {
-            element.setAttribute(key, String(value));
+            setBusinessAutomationSvgAttribute(element, key, value);
         });
+    }
+
+    function createBusinessAutomationSvgElement(name, attributes) {
+        const element = document.createElementNS('http://www.w3.org/2000/svg', name);
+        setBusinessAutomationSvgAttributes(element, attributes);
         return element;
     }
 
@@ -10330,6 +10518,144 @@
         };
     }
 
+    function setBusinessAutomationSvgElementsVisible(elements, visible) {
+        const display = visible ? '' : 'none';
+        (Array.isArray(elements) ? elements : [elements]).forEach(element => {
+            if (element?.style && element.style.display !== display) {
+                element.style.display = display;
+            }
+        });
+    }
+
+    function ensureBusinessAutomationEdgeRenderState(module, visualLayer, hitLayer) {
+        let state = module._businessAutomationEdgeRenderState || null;
+        if (!state) {
+            state = {
+                edgeItems: new Map(),
+                visualGroup: createBusinessAutomationSvgElement('g'),
+                hitGroup: createBusinessAutomationSvgElement('g'),
+                draftPath: createBusinessAutomationSvgElement('path'),
+                draftTarget: createBusinessAutomationSvgElement('circle'),
+                occlusionMaskState: null
+            };
+            state.draftPath.style.pointerEvents = 'none';
+            state.draftTarget.style.pointerEvents = 'none';
+            module._businessAutomationEdgeRenderState = state;
+        }
+
+        setBusinessAutomationSvgAttributes(state.visualGroup, {
+            fill: 'none',
+            'stroke-linecap': 'round',
+            'stroke-linejoin': 'round'
+        });
+        setBusinessAutomationSvgAttributes(state.hitGroup, {
+            fill: 'none',
+            'stroke-linecap': 'round',
+            'stroke-linejoin': 'round'
+        });
+
+        if (state.visualGroup.parentNode !== visualLayer) {
+            visualLayer.appendChild(state.visualGroup);
+        }
+        if (state.hitGroup.parentNode !== hitLayer) {
+            hitLayer.appendChild(state.hitGroup);
+        }
+
+        return state;
+    }
+
+    function ensureBusinessAutomationEdgeItem(renderState, edgeId) {
+        const normalizedId = String(edgeId || '').trim();
+        let item = renderState.edgeItems.get(normalizedId) || null;
+        if (item) {
+            return item;
+        }
+
+        const hitPath = createBusinessAutomationSvgElement('path', {
+            class: 'mind-map-business-automation-edge-hit',
+            stroke: '#000000',
+            'stroke-width': '18',
+            opacity: '0'
+        });
+        hitPath.style.cursor = 'pointer';
+        hitPath.addEventListener('pointerdown', handleBusinessAutomationEdgePointerDown);
+        hitPath.addEventListener('wheel', handleBusinessAutomationEdgeWheel, { passive: false });
+        hitPath.addEventListener('click', handleBusinessAutomationEdgeClick);
+
+        const path = createBusinessAutomationSvgElement('path');
+        path.style.pointerEvents = 'none';
+        const sourceDot = createBusinessAutomationSvgElement('circle');
+        sourceDot.style.pointerEvents = 'none';
+        const targetDot = createBusinessAutomationSvgElement('circle');
+        targetDot.style.pointerEvents = 'none';
+
+        renderState.hitGroup.appendChild(hitPath);
+        renderState.visualGroup.appendChild(path);
+        renderState.visualGroup.appendChild(sourceDot);
+        renderState.visualGroup.appendChild(targetDot);
+
+        item = { edgeId: normalizedId, hitPath, path, sourceDot, targetDot };
+        renderState.edgeItems.set(normalizedId, item);
+        return item;
+    }
+
+    function removeBusinessAutomationEdgeItem(item) {
+        if (!item) {
+            return;
+        }
+
+        item.hitPath?.remove?.();
+        item.path?.remove?.();
+        item.sourceDot?.remove?.();
+        item.targetDot?.remove?.();
+    }
+
+    function updateBusinessAutomationEdgeItem(item, edge, pathData, source, target, theme, isContextEdge, isSelected, isRelationHighlighted, hitPointerEvents) {
+        setBusinessAutomationSvgAttributes(item.hitPath, {
+            d: pathData,
+            class: 'mind-map-business-automation-edge-hit',
+            stroke: '#000000',
+            'stroke-width': '18',
+            opacity: '0',
+            'pointer-events': hitPointerEvents,
+            'data-edge-id': edge.id,
+            'data-edge-contract': edge.contract || ''
+        });
+        item.hitPath.style.pointerEvents = hitPointerEvents;
+
+        setBusinessAutomationSvgAttributes(item.path, {
+            d: pathData,
+            class: `mind-map-business-automation-edge-path${isSelected ? ' is-selected' : ''}${isRelationHighlighted ? ' is-relation-highlight' : ''}`,
+            stroke: theme.edge,
+            'stroke-width': isSelected ? '3.6' : (isRelationHighlighted ? (isContextEdge ? '2.45' : '2.65') : (isContextEdge ? '2.1' : '2.4')),
+            opacity: isSelected ? '0.96' : (isRelationHighlighted ? (isContextEdge ? '0.72' : '0.78') : (isContextEdge ? '0.68' : '0.82')),
+            'stroke-dasharray': isContextEdge ? '7 7' : '',
+            filter: ''
+        });
+        item.path.dataset.edgeId = edge.id;
+        item.path.dataset.edgeContract = edge.contract || '';
+
+        setBusinessAutomationSvgAttributes(item.sourceDot, {
+            cx: source.x.toFixed(1),
+            cy: source.y.toFixed(1),
+            r: isSelected ? '4.2' : (isRelationHighlighted ? '3.7' : '3.2'),
+            fill: '#ffffff',
+            stroke: theme.edge,
+            'stroke-width': '1.8',
+            opacity: isSelected ? '0.96' : (isRelationHighlighted ? '0.84' : (isContextEdge ? '0.82' : '0.96'))
+        });
+        setBusinessAutomationSvgAttributes(item.targetDot, {
+            cx: target.x.toFixed(1),
+            cy: target.y.toFixed(1),
+            r: isSelected ? '4.2' : (isRelationHighlighted ? '3.7' : '3.2'),
+            fill: theme.edge,
+            stroke: '#ffffff',
+            'stroke-width': '1.4',
+            opacity: isSelected ? '0.96' : (isRelationHighlighted ? '0.84' : (isContextEdge ? '0.82' : '0.96'))
+        });
+        setBusinessAutomationSvgElementsVisible([item.hitPath, item.path, item.sourceDot, item.targetDot], true);
+    }
+
     function renderBusinessAutomationEdges(module = _module) {
         if (!module?.container) {
             return;
@@ -10338,7 +10664,7 @@
         const edges = collectBusinessAutomationEdges(module);
         const relationContext = syncBusinessAutomationSelectionContext(module, {
             edges,
-            force: true,
+            force: false,
             scheduleRender: false
         });
         if (_businessAutomationSelectedEdgeId
@@ -10352,33 +10678,38 @@
             return;
         }
         syncBusinessAutomationEdgeLayerOrder(module);
+        clearBusinessAutomationEdgeCameraTransform(module);
 
         const containerRect = module.container.getBoundingClientRect();
         const width = Math.max(1, Math.round(containerRect.width || 1));
         const height = Math.max(1, Math.round(containerRect.height || 1));
+        recordBusinessAutomationEdgeCameraState(module, width, height);
         for (const layer of [visualLayer, hitLayer]) {
-            layer.setAttribute('viewBox', `0 0 ${width} ${height}`);
-            layer.setAttribute('width', String(width));
-            layer.setAttribute('height', String(height));
-            layer.replaceChildren();
+            setBusinessAutomationSvgAttributes(layer, {
+                viewBox: `0 0 ${width} ${height}`,
+                width: String(width),
+                height: String(height)
+            });
         }
+        const renderState = ensureBusinessAutomationEdgeRenderState(module, visualLayer, hitLayer);
+        const currentEdgeIds = new Set(
+            edges
+                .map(edge => String(edge?.id || '').trim())
+                .filter(Boolean)
+        );
 
         if (edges.length === 0 && !_businessAutomationConnectionDraft) {
+            setBusinessAutomationSvgElementsVisible([renderState.visualGroup, renderState.hitGroup], false);
             return;
         }
-
-        const visualGroup = createBusinessAutomationSvgElement('g', {
-            fill: 'none',
-            'stroke-linecap': 'round',
-            'stroke-linejoin': 'round'
-        });
-        const hitGroup = createBusinessAutomationSvgElement('g', {
-            fill: 'none',
-            'stroke-linecap': 'round',
-            'stroke-linejoin': 'round'
-        });
+        setBusinessAutomationSvgElementsVisible([renderState.visualGroup, renderState.hitGroup], true);
+        const liveEdgeIds = new Set();
 
         for (const edge of edges) {
+            const edgeId = String(edge?.id || '').trim();
+            if (!edgeId) {
+                continue;
+            }
             const sourcePin = findBusinessAutomationPinElement(module, edge.sourceNodeId, edge.sourcePinId, 'output');
             const targetPin = findBusinessAutomationPinElement(module, edge.targetNodeId, edge.targetPinId, 'input');
             const source = getBusinessAutomationEndpointRelativeToContainer(
@@ -10398,10 +10729,18 @@
                 containerRect
             );
             if (!source || !target) {
+                const existing = renderState.edgeItems.get(edgeId);
+                if (existing) {
+                    setBusinessAutomationSvgElementsVisible([existing.hitPath, existing.path, existing.sourceDot, existing.targetDot], false);
+                }
                 continue;
             }
 
             if (!doesBusinessAutomationSegmentIntersectViewport(source, target, width, height)) {
+                const existing = renderState.edgeItems.get(edgeId);
+                if (existing) {
+                    setBusinessAutomationSvgElementsVisible([existing.hitPath, existing.path, existing.sourceDot, existing.targetDot], false);
+                }
                 continue;
             }
 
@@ -10420,63 +10759,24 @@
             const isSelected = String(edge.id || '') === _businessAutomationSelectedEdgeId;
             const isRelationHighlighted = relationContext?.edgeIds?.has?.(String(edge.id || '').trim()) === true;
             const hitPointerEvents = _businessAutomationConnectionDraft ? 'none' : 'stroke';
-            const hitPath = createBusinessAutomationSvgElement('path', {
-                d: pathData,
-                class: 'mind-map-business-automation-edge-hit',
-                stroke: '#000000',
-                'stroke-width': '18',
-                opacity: '0',
-                'pointer-events': hitPointerEvents,
-                'data-edge-id': edge.id,
-                'data-edge-contract': edge.contract || ''
-            });
-            hitPath.style.pointerEvents = hitPointerEvents;
-            hitPath.style.cursor = 'pointer';
-            hitPath.addEventListener('pointerdown', handleBusinessAutomationEdgePointerDown);
-            hitPath.addEventListener('wheel', handleBusinessAutomationEdgeWheel, { passive: false });
-            hitPath.addEventListener('click', handleBusinessAutomationEdgeClick);
-
-            const path = createBusinessAutomationSvgElement('path', {
-                d: pathData,
-                class: `mind-map-business-automation-edge-path${isSelected ? ' is-selected' : ''}${isRelationHighlighted ? ' is-relation-highlight' : ''}`,
-                stroke: theme.edge,
-                'stroke-width': isSelected ? '3.6' : (isRelationHighlighted ? (isContextEdge ? '2.45' : '2.65') : (isContextEdge ? '2.1' : '2.4')),
-                opacity: isSelected ? '0.96' : (isRelationHighlighted ? (isContextEdge ? '0.72' : '0.78') : (isContextEdge ? '0.68' : '0.82')),
-                'stroke-dasharray': isContextEdge ? '7 7' : '',
-                filter: ''
-            });
-            path.style.pointerEvents = 'none';
-            path.dataset.edgeId = edge.id;
-            path.dataset.edgeContract = edge.contract || '';
-
-            const sourceDot = createBusinessAutomationSvgElement('circle', {
-                cx: source.x.toFixed(1),
-                cy: source.y.toFixed(1),
-                r: isSelected ? '4.2' : (isRelationHighlighted ? '3.7' : '3.2'),
-                fill: '#ffffff',
-                stroke: theme.edge,
-                'stroke-width': '1.8',
-                opacity: isSelected ? '0.96' : (isRelationHighlighted ? '0.84' : (isContextEdge ? '0.82' : '0.96'))
-            });
-            sourceDot.style.pointerEvents = 'none';
-            const targetDot = createBusinessAutomationSvgElement('circle', {
-                cx: target.x.toFixed(1),
-                cy: target.y.toFixed(1),
-                r: isSelected ? '4.2' : (isRelationHighlighted ? '3.7' : '3.2'),
-                fill: theme.edge,
-                stroke: '#ffffff',
-                'stroke-width': '1.4',
-                opacity: isSelected ? '0.96' : (isRelationHighlighted ? '0.84' : (isContextEdge ? '0.82' : '0.96'))
-            });
-            targetDot.style.pointerEvents = 'none';
-
-            hitGroup.appendChild(hitPath);
-            visualGroup.appendChild(path);
-            visualGroup.appendChild(sourceDot);
-            visualGroup.appendChild(targetDot);
+            const item = ensureBusinessAutomationEdgeItem(renderState, edgeId);
+            updateBusinessAutomationEdgeItem(item, edge, pathData, source, target, theme, isContextEdge, isSelected, isRelationHighlighted, hitPointerEvents);
+            liveEdgeIds.add(edgeId);
         }
 
+        renderState.edgeItems.forEach((item, edgeId) => {
+            if (!liveEdgeIds.has(edgeId) && !currentEdgeIds.has(edgeId)) {
+                removeBusinessAutomationEdgeItem(item);
+                renderState.edgeItems.delete(edgeId);
+                return;
+            }
+            if (!liveEdgeIds.has(edgeId)) {
+                setBusinessAutomationSvgElementsVisible([item.hitPath, item.path, item.sourceDot, item.targetDot], false);
+            }
+        });
+
         const draft = _businessAutomationConnectionDraft;
+        let draftVisible = false;
         if (draft) {
             const sourcePin = findBusinessAutomationPinElement(module, draft.sourceNodeId, draft.sourcePinId, 'output');
             const source = getBusinessAutomationEndpointRelativeToContainer(
@@ -10493,7 +10793,7 @@
                 const theme = isContextDraft
                     ? AUTOMATION_CONTEXT_PIN_THEME
                     : getAutomationPinTheme(draft.sourceType || 'Text');
-                const draftPath = createBusinessAutomationSvgElement('path', {
+                setBusinessAutomationSvgAttributes(renderState.draftPath, {
                     d: buildBusinessAutomationEdgePathData(source, target),
                     class: 'mind-map-business-automation-edge-draft',
                     stroke: theme.edge,
@@ -10501,8 +10801,7 @@
                     'stroke-dasharray': isContextDraft ? '7 7' : '8 7',
                     opacity: isContextDraft ? '0.66' : '0.72'
                 });
-                draftPath.style.pointerEvents = 'none';
-                const draftTarget = createBusinessAutomationSvgElement('circle', {
+                setBusinessAutomationSvgAttributes(renderState.draftTarget, {
                     cx: target.x.toFixed(1),
                     cy: target.y.toFixed(1),
                     r: '4',
@@ -10511,15 +10810,18 @@
                     'stroke-width': '2',
                     opacity: '0.9'
                 });
-                draftTarget.style.pointerEvents = 'none';
-                visualGroup.appendChild(draftPath);
-                visualGroup.appendChild(draftTarget);
+                if (renderState.draftPath.parentNode !== renderState.visualGroup) {
+                    renderState.visualGroup.appendChild(renderState.draftPath);
+                }
+                if (renderState.draftTarget.parentNode !== renderState.visualGroup) {
+                    renderState.visualGroup.appendChild(renderState.draftTarget);
+                }
+                draftVisible = true;
             }
         }
+        setBusinessAutomationSvgElementsVisible([renderState.draftPath, renderState.draftTarget], draftVisible);
 
-        applyBusinessAutomationResidentOcclusionMask(visualLayer, visualGroup, module, containerRect, width, height);
-        visualLayer.appendChild(visualGroup);
-        hitLayer.appendChild(hitGroup);
+        applyBusinessAutomationResidentOcclusionMask(visualLayer, renderState.visualGroup, module, containerRect, width, height);
     }
 
     function hasBusinessAutomationConnectionDraft() {
@@ -19014,7 +19316,7 @@
             });
         };
         getDeviceCards().forEach(card => {
-            ['pointerdown', 'mousedown', 'mouseup', 'dblclick'].forEach(eventName => {
+            ['pointerdown', 'mousedown', 'mouseup'].forEach(eventName => {
                 card.addEventListener(eventName, event => {
                     if (event.button === 1 || event.button === 2) {
                         if (eventName === 'mousedown') {
@@ -23576,6 +23878,7 @@
         openRemoteFleetControlPopupForTest: openRemoteFleetControlPopup,
         closeRemoteFleetControlPopupForTest: closeRemoteFleetControlPopup,
         hasBusinessAutomationConnectionDraft: hasBusinessAutomationConnectionDraft,
+        syncBusinessAutomationEdgesForCameraMotion: syncBusinessAutomationEdgesForCameraMotion,
         renderBusinessAutomationEdges: renderBusinessAutomationEdges,
         scheduleBusinessAutomationEdgeRender: scheduleBusinessAutomationEdgeRender,
         syncBusinessAutomationSelectionContext: syncBusinessAutomationSelectionContext,