@mindexec/cli 0.2.59 → 0.2.61

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

@@ -9838,6 +9838,7 @@
         const edges = collectBusinessAutomationEdges(module);
         const relationContext = syncBusinessAutomationSelectionContext(module, {
             edges,
+            force: true,
             scheduleRender: false
         });
         if (_businessAutomationSelectedEdgeId
@@ -9939,12 +9940,12 @@
                 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.8' : '3') : (isContextEdge ? '2.1' : '2.4')),
-                opacity: isSelected ? '0.96' : (isRelationHighlighted ? '0.94' : (isContextEdge ? '0.68' : '0.82')),
+                '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: isSelected
                     ? `drop-shadow(0 0 7px ${theme.edge})`
-                    : (isRelationHighlighted ? `drop-shadow(0 0 5px ${theme.edge})` : '')
+                    : (isRelationHighlighted ? `drop-shadow(0 0 3px ${theme.edge})` : '')
             });
             path.style.pointerEvents = 'none';
             path.dataset.edgeId = edge.id;
@@ -9953,21 +9954,21 @@
             const sourceDot = createBusinessAutomationSvgElement('circle', {
                 cx: source.x.toFixed(1),
                 cy: source.y.toFixed(1),
-                r: (isSelected || isRelationHighlighted) ? '4.2' : '3.2',
+                r: isSelected ? '4.2' : (isRelationHighlighted ? '3.7' : '3.2'),
                 fill: '#ffffff',
                 stroke: theme.edge,
                 'stroke-width': '1.8',
-                opacity: isRelationHighlighted ? '0.96' : (isContextEdge ? '0.82' : '0.96')
+                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 || isRelationHighlighted) ? '4.2' : '3.2',
+                r: isSelected ? '4.2' : (isRelationHighlighted ? '3.7' : '3.2'),
                 fill: theme.edge,
                 stroke: '#ffffff',
                 'stroke-width': '1.4',
-                opacity: isRelationHighlighted ? '0.96' : (isContextEdge ? '0.82' : '0.96')
+                opacity: isSelected ? '0.96' : (isRelationHighlighted ? '0.84' : (isContextEdge ? '0.82' : '0.96'))
             });
             targetDot.style.pointerEvents = 'none';
 
@@ -12863,6 +12864,7 @@
     const REMOTE_FLEET_HOST_LEASE_REFRESH_MS = 10000;
     const remoteFleetHostLeaseTimers = new Map();
     const remoteFleetLocalHostTargets = new Map();
+    let activeRemoteFleetControlPopup = null;
 
     function findRemoteFleetBodyByNodeId(nodeId) {
         const id = String(nodeId || '').trim();
@@ -13233,7 +13235,7 @@
         if (canvas.height !== nextHeight) {
             canvas.height = nextHeight;
         }
-        return { width: nextWidth, height: nextHeight };
+        return { width: nextWidth, height: nextHeight, cssWidth, cssHeight, dpr };
     }
 
     function getRemoteFleetBitmapSize(bitmap) {
@@ -13245,7 +13247,7 @@
         };
     }
 
-    function drawRemoteFleetFrameToCanvas(canvas, bitmap) {
+    function drawRemoteFleetFrameToCanvas(canvas, bitmap, fitMode = 'cover') {
         if (!canvas || !bitmap) {
             return false;
         }
@@ -13272,18 +13274,40 @@
         let sy = 0;
         let sw = source.width;
         let sh = source.height;
-        if (sourceAspect > targetAspect) {
-            sw = source.height * targetAspect;
-            sx = (source.width - sw) / 2;
-        } else if (sourceAspect < targetAspect) {
-            sh = source.width / targetAspect;
-            sy = (source.height - sh) / 2;
+        let dx = 0;
+        let dy = 0;
+        let dw = size.width;
+        let dh = size.height;
+        if (fitMode === 'contain') {
+            if (sourceAspect > targetAspect) {
+                dh = size.width / sourceAspect;
+                dy = (size.height - dh) / 2;
+            } else if (sourceAspect < targetAspect) {
+                dw = size.height * sourceAspect;
+                dx = (size.width - dw) / 2;
+            }
+        } else {
+            if (sourceAspect > targetAspect) {
+                sw = source.height * targetAspect;
+                sx = (source.width - sw) / 2;
+            } else if (sourceAspect < targetAspect) {
+                sh = source.width / targetAspect;
+                sy = (source.height - sh) / 2;
+            }
         }
 
         context.imageSmoothingEnabled = true;
         context.imageSmoothingQuality = 'medium';
+        context.fillStyle = '#020617';
         context.clearRect(0, 0, size.width, size.height);
-        context.drawImage(bitmap, sx, sy, sw, sh, 0, 0, size.width, size.height);
+        context.fillRect(0, 0, size.width, size.height);
+        context.drawImage(bitmap, sx, sy, sw, sh, dx, dy, dw, dh);
+        canvas._remoteFleetContentRect = {
+            left: dx / size.dpr,
+            top: dy / size.dpr,
+            width: dw / size.dpr,
+            height: dh / size.dpr
+        };
         return true;
     }
 
@@ -13696,6 +13720,503 @@
         bodyView._remoteFleetFrameLoopRaf = requestRemoteFleetFrameLoopFrame(loop);
     }
 
+    function getRemoteFleetControlPoint(event, canvas, allowClamp = false) {
+        if (!event || !canvas) {
+            return null;
+        }
+
+        const canvasRect = canvas.getBoundingClientRect?.();
+        if (!canvasRect || canvasRect.width <= 0 || canvasRect.height <= 0) {
+            return null;
+        }
+
+        const content = canvas._remoteFleetContentRect || {
+            left: 0,
+            top: 0,
+            width: canvasRect.width,
+            height: canvasRect.height
+        };
+        if (!content.width || !content.height) {
+            return null;
+        }
+
+        let x = event.clientX - canvasRect.left - content.left;
+        let y = event.clientY - canvasRect.top - content.top;
+        const outside = x < 0 || y < 0 || x > content.width || y > content.height;
+        if (outside && !allowClamp) {
+            return null;
+        }
+
+        x = Math.max(0, Math.min(content.width, x));
+        y = Math.max(0, Math.min(content.height, y));
+        return {
+            normalizedX: x / content.width,
+            normalizedY: y / content.height
+        };
+    }
+
+    function getRemoteFleetPointerButton(event) {
+        switch (Number(event?.button ?? 0)) {
+            case 1:
+                return 'middle';
+            case 2:
+                return 'right';
+            default:
+                return 'left';
+        }
+    }
+
+    function closeRemoteFleetControlPopup(reason = 'close') {
+        const session = activeRemoteFleetControlPopup;
+        if (!session) {
+            return;
+        }
+
+        activeRemoteFleetControlPopup = null;
+        session.active = false;
+        if (session.timer) {
+            clearTimeout(session.timer);
+            session.timer = null;
+        }
+        if (session.moveTimer) {
+            clearTimeout(session.moveTimer);
+            session.moveTimer = null;
+        }
+        session.overlay?.remove?.();
+        window.RuntimeTrace?.emit?.('remote.control.closed', {
+            nodeId: session.nodeId,
+            deviceId: session.deviceId,
+            reason
+        });
+
+        if (session.startedStream && !session.wasLiveActive) {
+            invokeDotNetAsync('StopRemoteFleetLiveStreamFromJs', session.nodeId, session.deviceId, session.streamId || '')
+                .catch(() => undefined);
+        }
+    }
+
+    async function paintRemoteFleetControlFrame(session, frame) {
+        if (!session?.active || !frame || !isRemoteFleetFrameSource(frame.frameUrl)) {
+            return false;
+        }
+
+        try {
+            const bitmap = await loadRemoteFleetFrameBitmap(frame);
+            if (!bitmap || !session.active) {
+                return false;
+            }
+
+            requestRemoteFleetFrameLoopFrame(() => {
+                if (!session.active || !document.body.contains(session.overlay)) {
+                    if (typeof bitmap.close === 'function') {
+                        bitmap.close();
+                    }
+                    return;
+                }
+
+                drawRemoteFleetFrameToCanvas(session.canvas, bitmap, 'contain');
+                session.canvas.style.display = 'block';
+                if (typeof bitmap.close === 'function') {
+                    bitmap.close();
+                }
+            });
+            return true;
+        } catch {
+            return false;
+        }
+    }
+
+    function sendRemoteFleetControlInput(session, payload, throttleMove = false) {
+        if (!session?.active || !payload?.type) {
+            return;
+        }
+
+        const send = next => {
+            if (!session.active) {
+                return;
+            }
+            invokeDotNetAsync('SendRemoteFleetInputFromJs', session.nodeId, session.deviceId, {
+                ...next,
+                controlLeaseId: session.controlLeaseId,
+                issuedAt: new Date().toISOString()
+            }).catch(error => {
+                session.status.textContent = error?.message || 'Input failed';
+            });
+        };
+
+        if (!throttleMove) {
+            send(payload);
+            return;
+        }
+
+        const now = performance.now();
+        const elapsed = now - (session.lastMoveSentAt || 0);
+        if (elapsed >= 32) {
+            session.lastMoveSentAt = now;
+            send(payload);
+            return;
+        }
+
+        session.pendingMove = payload;
+        if (session.moveTimer) {
+            return;
+        }
+
+        session.moveTimer = setTimeout(() => {
+            session.moveTimer = null;
+            const next = session.pendingMove;
+            session.pendingMove = null;
+            if (next) {
+                session.lastMoveSentAt = performance.now();
+                send(next);
+            }
+        }, Math.max(1, 32 - elapsed));
+    }
+
+    function bindRemoteFleetControlInput(session) {
+        const { overlay, shell, stage, canvas } = session;
+        let pointerActive = false;
+
+        ['mousedown', 'mouseup', 'click', 'dblclick', 'keydown', 'keyup', 'wheel', 'contextmenu'].forEach(eventName => {
+            overlay.addEventListener(eventName, event => event.stopPropagation(), true);
+        });
+
+        stage.addEventListener('pointerdown', event => {
+            const point = getRemoteFleetControlPoint(event, canvas, false);
+            if (!point) {
+                return;
+            }
+
+            event.preventDefault();
+            event.stopPropagation();
+            pointerActive = true;
+            shell.focus({ preventScroll: true });
+            stage.setPointerCapture?.(event.pointerId);
+            sendRemoteFleetControlInput(session, {
+                type: 'pointerDown',
+                ...point,
+                button: getRemoteFleetPointerButton(event)
+            });
+        });
+
+        stage.addEventListener('pointermove', event => {
+            const point = getRemoteFleetControlPoint(event, canvas, pointerActive);
+            if (!point) {
+                return;
+            }
+
+            event.preventDefault();
+            event.stopPropagation();
+            sendRemoteFleetControlInput(session, {
+                type: 'pointerMove',
+                ...point,
+                button: getRemoteFleetPointerButton(event)
+            }, true);
+        });
+
+        stage.addEventListener('pointerup', event => {
+            const point = getRemoteFleetControlPoint(event, canvas, true);
+            event.preventDefault();
+            event.stopPropagation();
+            pointerActive = false;
+            stage.releasePointerCapture?.(event.pointerId);
+            if (!point) {
+                return;
+            }
+
+            sendRemoteFleetControlInput(session, {
+                type: 'pointerUp',
+                ...point,
+                button: getRemoteFleetPointerButton(event)
+            });
+        });
+
+        stage.addEventListener('pointercancel', event => {
+            pointerActive = false;
+            stage.releasePointerCapture?.(event.pointerId);
+        });
+
+        stage.addEventListener('wheel', event => {
+            const point = getRemoteFleetControlPoint(event, canvas, false);
+            if (!point) {
+                return;
+            }
+
+            event.preventDefault();
+            event.stopPropagation();
+            sendRemoteFleetControlInput(session, {
+                type: 'wheel',
+                ...point,
+                deltaX: event.deltaX,
+                deltaY: event.deltaY
+            });
+        }, { passive: false });
+
+        stage.addEventListener('contextmenu', event => {
+            event.preventDefault();
+            event.stopPropagation();
+        });
+
+        shell.addEventListener('keydown', event => {
+            if (event.target?.closest?.('[data-remote-fleet-control-close="true"]')) {
+                return;
+            }
+
+            event.preventDefault();
+            event.stopPropagation();
+            sendRemoteFleetControlInput(session, {
+                type: 'keyDown',
+                key: event.key,
+                code: event.code,
+                repeat: event.repeat === true
+            });
+        });
+
+        shell.addEventListener('keyup', event => {
+            if (event.target?.closest?.('[data-remote-fleet-control-close="true"]')) {
+                return;
+            }
+
+            event.preventDefault();
+            event.stopPropagation();
+            sendRemoteFleetControlInput(session, {
+                type: 'keyUp',
+                key: event.key,
+                code: event.code,
+                repeat: event.repeat === true
+            });
+        });
+    }
+
+    function openRemoteFleetControlPopup(bodyView, nodeModel, deviceId) {
+        const nodeId = String(nodeModel?.id ?? nodeModel?.Id ?? '').trim();
+        const targetId = String(deviceId || '').trim();
+        if (!bodyView || !nodeId || !targetId) {
+            return;
+        }
+
+        closeRemoteFleetControlPopup('replace');
+        const devices = parseRemoteFleetDevices(nodeModel);
+        const device = devices.find(item => getRemoteFleetDeviceId(item) === targetId) || null;
+        const name = device ? getRemoteFleetDeviceName(device) : targetId;
+        const wasLiveActive = device ? isRemoteFleetLiveActive(device) : false;
+
+        const overlay = document.createElement('div');
+        overlay.dataset.remoteFleetControlPopup = 'true';
+        overlay.style.cssText = `
+            position: fixed;
+            inset: 0;
+            z-index: 2147483000;
+            display: grid;
+            place-items: center;
+            padding: 24px;
+            background: rgba(15, 23, 42, 0.24);
+            pointer-events: auto;
+            box-sizing: border-box;
+        `;
+
+        const shell = document.createElement('section');
+        shell.tabIndex = 0;
+        shell.dataset.remoteFleetControlShell = 'true';
+        shell.style.cssText = `
+            width: min(96vw, 1280px);
+            height: min(90vh, 860px);
+            min-width: min(720px, calc(100vw - 28px));
+            min-height: min(420px, calc(100vh - 28px));
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            border-radius: 8px;
+            border: 1px solid rgba(148, 163, 184, 0.34);
+            background: #020617;
+            box-shadow: 0 24px 70px rgba(15, 23, 42, 0.35);
+            outline: none;
+            box-sizing: border-box;
+        `;
+
+        const header = document.createElement('header');
+        header.style.cssText = `
+            flex: 0 0 auto;
+            height: 42px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            padding: 0 10px 0 14px;
+            background: rgba(15, 23, 42, 0.96);
+            border-bottom: 1px solid rgba(148, 163, 184, 0.20);
+            box-sizing: border-box;
+        `;
+
+        const title = document.createElement('strong');
+        title.textContent = name;
+        title.title = `${name} (${targetId})`;
+        title.style.cssText = `
+            min-width: 0;
+            color: #f8fafc;
+            font-size: 13px;
+            font-weight: 950;
+            line-height: 1;
+            letter-spacing: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        `;
+
+        const right = document.createElement('div');
+        right.style.cssText = 'flex:0 0 auto;display:flex;align-items:center;gap:8px;min-width:0;';
+        const status = document.createElement('span');
+        status.dataset.remoteFleetControlStatus = 'true';
+        status.textContent = 'Connecting';
+        status.style.cssText = `
+            color: #cbd5e1;
+            font-size: 11px;
+            font-weight: 850;
+            letter-spacing: 0;
+            white-space: nowrap;
+        `;
+        const closeButton = document.createElement('button');
+        closeButton.type = 'button';
+        closeButton.dataset.remoteFleetControlClose = 'true';
+        closeButton.textContent = 'X';
+        closeButton.title = 'Close';
+        closeButton.style.cssText = `
+            width: 30px;
+            height: 30px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 7px;
+            border: 1px solid rgba(148, 163, 184, 0.34);
+            background: rgba(30, 41, 59, 0.96);
+            color: #f8fafc;
+            font-size: 13px;
+            font-weight: 950;
+            line-height: 1;
+            cursor: pointer;
+            pointer-events: auto;
+        `;
+
+        const stage = document.createElement('div');
+        stage.dataset.remoteFleetControlStage = 'true';
+        stage.style.cssText = `
+            position: relative;
+            flex: 1 1 auto;
+            min-height: 0;
+            overflow: hidden;
+            background: #020617;
+            cursor: crosshair;
+            touch-action: none;
+        `;
+
+        const canvas = document.createElement('canvas');
+        canvas.dataset.remoteFleetControlCanvas = 'true';
+        canvas.style.cssText = `
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            display: block;
+            background: #020617;
+        `;
+
+        right.appendChild(status);
+        right.appendChild(closeButton);
+        header.appendChild(title);
+        header.appendChild(right);
+        stage.appendChild(canvas);
+        shell.appendChild(header);
+        shell.appendChild(stage);
+        overlay.appendChild(shell);
+        document.body.appendChild(overlay);
+
+        const session = {
+            active: true,
+            nodeId,
+            deviceId: targetId,
+            overlay,
+            shell,
+            stage,
+            canvas,
+            status,
+            wasLiveActive,
+            startedStream: false,
+            streamId: '',
+            controlLeaseId: `control-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`,
+            timer: null,
+            moveTimer: null,
+            pendingMove: null,
+            lastMoveSentAt: 0
+        };
+        activeRemoteFleetControlPopup = session;
+        bindRemoteFleetControlInput(session);
+
+        const refresh = async () => {
+            if (!session.active) {
+                return;
+            }
+
+            try {
+                const result = await invokeDotNetAsync('GetRemoteFleetFrameFromJs', nodeId, targetId, 'live');
+                const frame = normalizeRemoteFleetFramePayload(result?.frame || result?.Frame, 'live');
+                if (frame) {
+                    frame.deviceId = frame.deviceId || targetId;
+                    await paintRemoteFleetControlFrame(session, frame);
+                    applyRemoteFleetFramePatches(bodyView, [frame]);
+                    status.textContent = 'Control';
+                } else if (result?.error || result?.Error) {
+                    status.textContent = result.error || result.Error;
+                }
+            } catch (error) {
+                status.textContent = error?.message || 'Frame failed';
+            } finally {
+                if (session.active) {
+                    session.timer = setTimeout(refresh, REMOTE_FLEET_LIVE_FRAME_REFRESH_MS);
+                }
+            }
+        };
+
+        closeButton.addEventListener('click', event => {
+            event.preventDefault();
+            event.stopPropagation();
+            closeRemoteFleetControlPopup('button');
+        });
+        overlay.addEventListener('pointerdown', event => {
+            if (event.target === overlay) {
+                event.preventDefault();
+                event.stopPropagation();
+                shell.focus({ preventScroll: true });
+            }
+        });
+
+        shell.focus({ preventScroll: true });
+        window.RuntimeTrace?.emit?.('remote.control.opened', {
+            nodeId,
+            deviceId: targetId
+        });
+
+        invokeDotNetAsync('StartRemoteFleetLiveStreamFromJs', nodeId, targetId)
+            .then(async result => {
+                if (!session.active) {
+                    return;
+                }
+
+                await syncRemoteFleetNodeStateFromResult(result);
+                session.startedStream = result?.success === true || result?.Success === true;
+                session.streamId = String(result?.streamId || result?.StreamId || '');
+                status.textContent = session.startedStream ? 'Control' : (result?.error || result?.Error || 'View');
+                refresh();
+            })
+            .catch(error => {
+                if (!session.active) {
+                    return;
+                }
+
+                status.textContent = error?.message || 'Start failed';
+                refresh();
+            });
+    }
+
     function isRemoteFleetLiveActive(device) {
         return getRemoteFleetDeviceField(device, 'liveStreamActive', 'LiveStreamActive', false) === true;
     }
@@ -15155,7 +15676,15 @@
                 : 'Offline';
 
             panel.dataset.deviceId = deviceId;
-            panel.appendChild(createDevicePreview(device, 'detail'));
+            const detailPreview = createDevicePreview(device, 'detail');
+            detailPreview.style.cursor = 'pointer';
+            detailPreview.addEventListener('dblclick', event => {
+                event.preventDefault();
+                event.stopPropagation();
+                bodyView.dataset.remoteFleetSelectedDeviceId = deviceId;
+                openRemoteFleetControlPopup(bodyView, nodeModel, deviceId);
+            });
+            panel.appendChild(detailPreview);
 
             const header = document.createElement('div');
             header.style.cssText = 'display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0;';
@@ -15712,6 +16241,14 @@
             ['mousedown', 'mouseup', 'dblclick'].forEach(eventName => {
                 card.addEventListener(eventName, event => event.stopPropagation());
             });
+            card.addEventListener('dblclick', event => {
+                event.preventDefault();
+                event.stopPropagation();
+                const deviceId = String(card.dataset.deviceId || '').trim();
+                if (!deviceId) return;
+                bodyView.dataset.remoteFleetSelectedDeviceId = deviceId;
+                openRemoteFleetControlPopup(bodyView, nodeModel, deviceId);
+            });
             const selectCard = event => {
                 event.preventDefault();
                 event.stopPropagation();
@@ -20057,6 +20594,8 @@
         renderRemoteFleetMonitorForTest: renderRemoteFleetMonitor,
         renderRemoteFleetDeviceForTest: renderRemoteFleetDevice,
         applyRemoteFleetFramePatchesForTest: applyRemoteFleetFramePatches,
+        openRemoteFleetControlPopupForTest: openRemoteFleetControlPopup,
+        closeRemoteFleetControlPopupForTest: closeRemoteFleetControlPopup,
         renderBusinessAutomationEdges: renderBusinessAutomationEdges,
         scheduleBusinessAutomationEdgeRender: scheduleBusinessAutomationEdgeRender,
         syncBusinessAutomationSelectionContext: syncBusinessAutomationSelectionContext,