@mindexec/cli 0.2.384 → 0.2.385

package/wwwroot/_content/MindExecution.Shared/js/mindmap-toolbar.js

@@ -0,0 +1,639 @@
+// MindMap Toolbar Helper Functions
+(function () {
+    'use strict';
+
+    const dropdownOutsideCloseHandlers = new WeakMap();
+    const surfaceOutsideClickCloseStatesByHelper = new WeakMap();
+    const surfaceOutsideClickCloseStatesByRoot = new WeakMap();
+    let layoutDotNetHelper = null;
+    let fallbackReadModeActive = false;
+    let fullscreenEventsRegistered = false;
+    let visibilityEventsRegistered = false;
+    let surfaceInteractionEventsRegistered = false;
+    let documentHiddenAtUtc = null;
+
+    function supportsFullscreenApi() {
+        const root = document.documentElement;
+        return !!(
+            root?.requestFullscreen ||
+            root?.webkitRequestFullscreen ||
+            root?.msRequestFullscreen ||
+            document.exitFullscreen ||
+            document.webkitExitFullscreen ||
+            document.msExitFullscreen
+        );
+    }
+
+    function getFullscreenElement() {
+        return document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement || null;
+    }
+
+    function getCurrentReadModeState() {
+        return supportsFullscreenApi() ? !!getFullscreenElement() : fallbackReadModeActive === true;
+    }
+
+    function notifyLayoutFullscreenChanged(isActive) {
+        layoutDotNetHelper?.invokeMethodAsync?.('OnMindCanvasFullscreenChanged', isActive === true)
+            ?.catch?.(() => { });
+    }
+
+    function ensureFullscreenListeners() {
+        if (fullscreenEventsRegistered) {
+            return;
+        }
+
+        const handler = () => {
+            if (supportsFullscreenApi()) {
+                fallbackReadModeActive = false;
+            }
+            notifyLayoutFullscreenChanged(getCurrentReadModeState());
+        };
+
+        document.addEventListener('fullscreenchange', handler);
+        document.addEventListener('webkitfullscreenchange', handler);
+        document.addEventListener('MSFullscreenChange', handler);
+        fullscreenEventsRegistered = true;
+    }
+
+    function notifyLayoutDocumentVisibilityChanged() {
+        if (!layoutDotNetHelper?.invokeMethodAsync) {
+            return;
+        }
+
+        const isVisible = document.visibilityState !== 'hidden';
+        const nowUtc = new Date().toISOString();
+        if (!isVisible) {
+            documentHiddenAtUtc = nowUtc;
+        }
+
+        const eventAtUtc = isVisible ? (documentHiddenAtUtc || nowUtc) : documentHiddenAtUtc;
+        layoutDotNetHelper.invokeMethodAsync('OnDocumentVisibilityChanged', isVisible, eventAtUtc)
+            .catch(() => { });
+
+        if (isVisible) {
+            documentHiddenAtUtc = null;
+        }
+    }
+
+    function ensureDocumentVisibilityListeners() {
+        if (visibilityEventsRegistered) {
+            return;
+        }
+
+        document.addEventListener('visibilitychange', notifyLayoutDocumentVisibilityChanged);
+        window.addEventListener('pageshow', notifyLayoutDocumentVisibilityChanged);
+        window.addEventListener('focus', () => {
+            if (document.visibilityState !== 'hidden') {
+                notifyLayoutDocumentVisibilityChanged();
+            }
+        });
+        visibilityEventsRegistered = true;
+    }
+
+    function notifyMindCanvasSurfaceInteraction(event) {
+        if (!layoutDotNetHelper?.invokeMethodAsync) {
+            return;
+        }
+
+        const reason = String(event?.detail?.reason || 'canvas-interaction');
+        layoutDotNetHelper.invokeMethodAsync('OnMindCanvasSurfaceInteraction', reason)
+            .catch(() => { });
+    }
+
+    function ensureMindCanvasSurfaceInteractionListener() {
+        if (surfaceInteractionEventsRegistered) {
+            return;
+        }
+
+        window.addEventListener('mindcanvas:surface-interaction', notifyMindCanvasSurfaceInteraction);
+        surfaceInteractionEventsRegistered = true;
+    }
+
+    function isEventInsideRoot(rootElement, event) {
+        if (!rootElement || !event) {
+            return false;
+        }
+
+        const path = typeof event.composedPath === 'function'
+            ? event.composedPath()
+            : null;
+        if (Array.isArray(path) && path.includes(rootElement)) {
+            return true;
+        }
+
+        const target = event.target;
+        return !!target && rootElement.contains(target);
+    }
+
+    function isEventInsideIgnoredSelector(ignoreSelector, event) {
+        if (!ignoreSelector || !event) {
+            return false;
+        }
+
+        const path = typeof event.composedPath === 'function'
+            ? event.composedPath()
+            : null;
+        if (Array.isArray(path)) {
+            for (const entry of path) {
+                if (entry && typeof entry.matches === 'function' && entry.matches(ignoreSelector)) {
+                    return true;
+                }
+            }
+        }
+
+        const target = event.target;
+        return !!target && typeof target.closest === 'function' && !!target.closest(ignoreSelector);
+    }
+
+    function isNativeSelectEvent(event) {
+        if (!event) {
+            return false;
+        }
+
+        const path = typeof event.composedPath === 'function'
+            ? event.composedPath()
+            : null;
+        if (Array.isArray(path)) {
+            for (const entry of path) {
+                const tagName = entry?.tagName;
+                if (tagName === 'SELECT' || tagName === 'OPTION' || tagName === 'OPTGROUP') {
+                    return true;
+                }
+            }
+        }
+
+        const tagName = event.target?.tagName;
+        return tagName === 'SELECT' || tagName === 'OPTION' || tagName === 'OPTGROUP';
+    }
+
+    function getInteractionTime() {
+        return typeof performance !== 'undefined' && typeof performance.now === 'function'
+            ? performance.now()
+            : Date.now();
+    }
+
+    function markNativeSelectInteraction(state) {
+        if (!state) {
+            return;
+        }
+
+        state.nativeSelectInteractionActive = true;
+        state.nativeSelectInteractionAt = getInteractionTime();
+    }
+
+    function isNativeSelectFocusedInside(rootElement) {
+        const activeElement = document.activeElement;
+        return !!rootElement &&
+            !!activeElement &&
+            rootElement.contains(activeElement) &&
+            activeElement.tagName === 'SELECT';
+    }
+
+    function scheduleNativeSelectInteractionClear(state) {
+        if (!state) {
+            return;
+        }
+
+        window.setTimeout(() => {
+            if (!isNativeSelectFocusedInside(state.rootElement)) {
+                state.nativeSelectInteractionActive = false;
+            }
+        }, 500);
+    }
+
+    function shouldIgnoreDocumentClickForNativeSelect(state) {
+        if (!state?.nativeSelectInteractionActive) {
+            return false;
+        }
+
+        if (isNativeSelectFocusedInside(state.rootElement)) {
+            return true;
+        }
+
+        return getInteractionTime() - state.nativeSelectInteractionAt < 350;
+    }
+
+    function resolveSurfaceRootElement(rootElement, options) {
+        const selector = options?.rootSelector;
+        if (selector && typeof document.querySelector === 'function') {
+            const currentElement = document.querySelector(selector);
+            if (currentElement) {
+                return currentElement;
+            }
+        }
+
+        return rootElement;
+    }
+
+    function isPointerWithinElementBounds(element, event) {
+        if (!element || !event) {
+            return false;
+        }
+
+        const clientX = Number(event.clientX);
+        const clientY = Number(event.clientY);
+        if (!Number.isFinite(clientX) || !Number.isFinite(clientY)) {
+            return false;
+        }
+
+        const rect = element.getBoundingClientRect?.();
+        if (!rect) {
+            return false;
+        }
+
+        return clientX >= rect.left &&
+            clientX <= rect.right &&
+            clientY >= rect.top &&
+            clientY <= rect.bottom;
+    }
+
+    function isSurfaceOwnedPointerEvent(state, rootElement, event) {
+        if (!state || !event) {
+            return false;
+        }
+
+        return isEventInsideRoot(rootElement, event) ||
+            isPointerWithinElementBounds(rootElement, event) ||
+            isEventInsideIgnoredSelector(state.options?.ignoreSelector, event);
+    }
+
+    function rememberSurfacePointerDown(state, event) {
+        if (!state || !event) {
+            return;
+        }
+
+        const currentRootElement = resolveSurfaceRootElement(state.rootElement, state.options);
+        const isInsideSurface = isSurfaceOwnedPointerEvent(state, currentRootElement, event);
+        state.lastPointerDownInsideSurface = isInsideSurface;
+        state.lastPointerDownAt = getInteractionTime();
+
+        if (isInsideSurface) {
+            state.suppressNextDocumentClick = true;
+        }
+
+        if (isNativeSelectEvent(event)) {
+            markNativeSelectInteraction(state);
+        }
+    }
+
+    function getUploadDropPosition(viewport) {
+        const fallbackRect = viewport.getBoundingClientRect();
+        const fallbackPosition = {
+            clientX: fallbackRect.left + (fallbackRect.width / 2),
+            clientY: fallbackRect.top + (fallbackRect.height / 2)
+        };
+
+        const cursorPosition = window.mindMap?.getCursorClientPosition?.();
+        if (!cursorPosition || !Number.isFinite(cursorPosition.clientX) || !Number.isFinite(cursorPosition.clientY)) {
+            return fallbackPosition;
+        }
+
+        return cursorPosition;
+    }
+
+    // Simulate a file drop event at the current cursor position
+    window.triggerMindMapFileUpload = function (inputElementId) {
+        const input = document.getElementById(inputElementId);
+        if (!input || !input.files || input.files.length === 0) {
+            console.warn('[MindMapToolbar] No file selected');
+            return false;
+        }
+
+        const files = Array.from(input.files);
+        const dataTransfer = new DataTransfer();
+        files.forEach((file) => dataTransfer.items.add(file));
+
+        const viewport = document.getElementById('mind-map-viewport');
+        if (!viewport) {
+            console.error('[MindMapToolbar] Viewport not found');
+            return false;
+        }
+
+        try {
+            const { clientX, clientY } = getUploadDropPosition(viewport);
+            const mockEvent = new DragEvent('drop', {
+                bubbles: true,
+                cancelable: true,
+                dataTransfer: dataTransfer
+            });
+
+            Object.defineProperty(mockEvent, 'clientX', {
+                value: clientX,
+                writable: false
+            });
+            Object.defineProperty(mockEvent, 'clientY', {
+                value: clientY,
+                writable: false
+            });
+
+            viewport.dispatchEvent(mockEvent);
+            console.log('[MindMapToolbar] File drop event triggered for:', files.map((file) => file.name));
+
+            // Reset file input so selecting the same file(s) again still fires change.
+            input.value = '';
+            return true;
+        } catch (error) {
+            console.error('[MindMapToolbar] Error triggering file drop:', error);
+            return false;
+        }
+    };
+
+    // Focus on the global textarea
+    window.focusGlobalTextarea = function () {
+        const textarea = document.getElementById('global-input-textarea');
+        if (textarea) {
+            textarea.focus();
+            return true;
+        }
+        return false;
+    };
+
+    window.setMindMapPageScrollLock = function (active) {
+        const shouldLock = active === true;
+        const html = document.documentElement;
+        const body = document.body;
+
+        html?.classList.toggle('mind-map-scroll-locked', shouldLock);
+        body?.classList.toggle('mind-map-scroll-locked', shouldLock);
+
+        if (shouldLock) {
+            if (html) {
+                html.scrollTop = 0;
+                html.scrollLeft = 0;
+            }
+            if (body) {
+                body.scrollTop = 0;
+                body.scrollLeft = 0;
+            }
+            window.scrollTo(0, 0);
+        }
+
+        return shouldLock;
+    };
+
+    window.initMindCanvasLayout = function (helper) {
+        layoutDotNetHelper = helper || null;
+        ensureFullscreenListeners();
+        ensureDocumentVisibilityListeners();
+        ensureMindCanvasSurfaceInteractionListener();
+        notifyLayoutFullscreenChanged(getCurrentReadModeState());
+        notifyLayoutDocumentVisibilityChanged();
+        return true;
+    };
+
+    window.getMindCanvasFullscreenState = function () {
+        return getCurrentReadModeState();
+    };
+
+    window.setMindCanvasFullscreen = async function (enabled) {
+        const shouldEnable = enabled === true;
+        const root = document.documentElement;
+        if (!root) {
+            return false;
+        }
+
+        if (!supportsFullscreenApi()) {
+            fallbackReadModeActive = shouldEnable;
+            notifyLayoutFullscreenChanged(fallbackReadModeActive);
+            return fallbackReadModeActive;
+        }
+
+        try {
+            if (shouldEnable) {
+                if (!getFullscreenElement()) {
+                    if (root.requestFullscreen) {
+                        await root.requestFullscreen();
+                    } else if (root.webkitRequestFullscreen) {
+                        await root.webkitRequestFullscreen();
+                    } else if (root.msRequestFullscreen) {
+                        await root.msRequestFullscreen();
+                    }
+                }
+            } else if (getFullscreenElement()) {
+                if (document.exitFullscreen) {
+                    await document.exitFullscreen();
+                } else if (document.webkitExitFullscreen) {
+                    await document.webkitExitFullscreen();
+                } else if (document.msExitFullscreen) {
+                    await document.msExitFullscreen();
+                }
+            }
+        } catch (error) {
+            console.warn('[MindMapToolbar] Fullscreen toggle failed, falling back to read-mode only:', error);
+            fallbackReadModeActive = shouldEnable;
+            notifyLayoutFullscreenChanged(fallbackReadModeActive);
+            return fallbackReadModeActive;
+        }
+
+        fallbackReadModeActive = false;
+        const nextState = getCurrentReadModeState();
+        notifyLayoutFullscreenChanged(nextState);
+        return nextState;
+    };
+
+    window.toggleMindCanvasReadMode = function () {
+        return window.setMindCanvasFullscreen(!getCurrentReadModeState());
+    };
+
+    window.registerDropdownOutsideClose = function (rootElement, helper) {
+        if (!rootElement || !helper) {
+            return false;
+        }
+
+        window.unregisterDropdownOutsideClose(rootElement);
+
+        const handler = (event) => {
+            const target = event.target;
+            if (!target || rootElement.contains(target)) {
+                return;
+            }
+
+            helper.invokeMethodAsync('CloseFromOutsidePointer')
+                .catch(() => { });
+        };
+
+        document.addEventListener('pointerdown', handler, true);
+        dropdownOutsideCloseHandlers.set(rootElement, handler);
+        return true;
+    };
+
+    window.unregisterDropdownOutsideClose = function (rootElement) {
+        if (!rootElement) {
+            return false;
+        }
+
+        const handler = dropdownOutsideCloseHandlers.get(rootElement);
+        if (!handler) {
+            return false;
+        }
+
+        document.removeEventListener('pointerdown', handler, true);
+        dropdownOutsideCloseHandlers.delete(rootElement);
+        return true;
+    };
+
+    function detachSurfaceOutsideClickCloseState(state) {
+        if (!state) {
+            return false;
+        }
+
+        if (state.rootElement && state.rootPointerDownHandler) {
+            state.rootElement.removeEventListener('pointerdown', state.rootPointerDownHandler, true);
+        }
+
+        if (state.rootElement && state.rootClickHandler) {
+            state.rootElement.removeEventListener('click', state.rootClickHandler, true);
+        }
+
+        if (state.rootElement && state.rootChangeHandler) {
+            state.rootElement.removeEventListener('change', state.rootChangeHandler, true);
+        }
+
+        if (state.rootElement && state.rootFocusOutHandler) {
+            state.rootElement.removeEventListener('focusout', state.rootFocusOutHandler, true);
+        }
+
+        if (state.documentClickHandler) {
+            document.removeEventListener('click', state.documentClickHandler, false);
+        }
+
+        if (state.documentPointerDownHandler) {
+            document.removeEventListener('pointerdown', state.documentPointerDownHandler, true);
+        }
+
+        if (state.helper) {
+            surfaceOutsideClickCloseStatesByHelper.delete(state.helper);
+        }
+
+        if (state.rootElement) {
+            surfaceOutsideClickCloseStatesByRoot.delete(state.rootElement);
+        }
+
+        return true;
+    }
+
+    window.registerSurfaceOutsideClickClose = function (rootElement, helper, options) {
+        if (!rootElement || !helper) {
+            return false;
+        }
+
+        detachSurfaceOutsideClickCloseState(surfaceOutsideClickCloseStatesByHelper.get(helper));
+        detachSurfaceOutsideClickCloseState(surfaceOutsideClickCloseStatesByRoot.get(rootElement));
+
+        const state = {
+            helper,
+            options,
+            rootElement,
+            suppressNextDocumentClick: false,
+            nativeSelectInteractionActive: false,
+            nativeSelectInteractionAt: 0,
+            lastPointerDownInsideSurface: false,
+            lastPointerDownAt: 0,
+            rootPointerDownHandler: null,
+            rootClickHandler: null,
+            rootChangeHandler: null,
+            rootFocusOutHandler: null,
+            documentPointerDownHandler: null,
+            documentClickHandler: null
+        };
+
+        state.rootPointerDownHandler = (event) => {
+            state.suppressNextDocumentClick = true;
+            if (isNativeSelectEvent(event)) {
+                markNativeSelectInteraction(state);
+            }
+        };
+
+        state.rootClickHandler = (event) => {
+            state.suppressNextDocumentClick = true;
+            if (isNativeSelectEvent(event)) {
+                markNativeSelectInteraction(state);
+            }
+        };
+
+        state.rootChangeHandler = (event) => {
+            if (isNativeSelectEvent(event)) {
+                state.suppressNextDocumentClick = true;
+                markNativeSelectInteraction(state);
+            }
+        };
+
+        state.rootFocusOutHandler = () => {
+            scheduleNativeSelectInteractionClear(state);
+        };
+
+        state.documentPointerDownHandler = (event) => {
+            rememberSurfacePointerDown(state, event);
+        };
+
+        state.documentClickHandler = (event) => {
+            if (typeof event.button === 'number' && event.button !== 0) {
+                return;
+            }
+
+            if (state.suppressNextDocumentClick) {
+                state.suppressNextDocumentClick = false;
+                return;
+            }
+
+            const currentRootElement = resolveSurfaceRootElement(state.rootElement, state.options);
+            if (currentRootElement && currentRootElement !== state.rootElement) {
+                state.rootElement.removeEventListener('pointerdown', state.rootPointerDownHandler, true);
+                state.rootElement.removeEventListener('click', state.rootClickHandler, true);
+                state.rootElement.removeEventListener('change', state.rootChangeHandler, true);
+                state.rootElement.removeEventListener('focusout', state.rootFocusOutHandler, true);
+                surfaceOutsideClickCloseStatesByRoot.delete(state.rootElement);
+                state.rootElement = currentRootElement;
+                surfaceOutsideClickCloseStatesByRoot.set(state.rootElement, state);
+                state.rootElement.addEventListener('pointerdown', state.rootPointerDownHandler, true);
+                state.rootElement.addEventListener('click', state.rootClickHandler, true);
+                state.rootElement.addEventListener('change', state.rootChangeHandler, true);
+                state.rootElement.addEventListener('focusout', state.rootFocusOutHandler, true);
+            }
+
+            if (shouldIgnoreDocumentClickForNativeSelect(state)) {
+                return;
+            }
+
+            if (state.lastPointerDownInsideSurface === true && getInteractionTime() - state.lastPointerDownAt < 1000) {
+                return;
+            }
+
+            if (isEventInsideRoot(currentRootElement, event)) {
+                return;
+            }
+
+            if (isPointerWithinElementBounds(currentRootElement, event)) {
+                return;
+            }
+
+            if (isEventInsideIgnoredSelector(state.options?.ignoreSelector, event)) {
+                return;
+            }
+
+            state.helper.invokeMethodAsync('CloseFromOutsidePointer')
+                .catch(() => { });
+        };
+
+        state.rootElement.addEventListener('pointerdown', state.rootPointerDownHandler, true);
+        state.rootElement.addEventListener('click', state.rootClickHandler, true);
+        state.rootElement.addEventListener('change', state.rootChangeHandler, true);
+        state.rootElement.addEventListener('focusout', state.rootFocusOutHandler, true);
+        document.addEventListener('pointerdown', state.documentPointerDownHandler, true);
+        document.addEventListener('click', state.documentClickHandler, false);
+
+        surfaceOutsideClickCloseStatesByHelper.set(helper, state);
+        surfaceOutsideClickCloseStatesByRoot.set(rootElement, state);
+        return true;
+    };
+
+    window.unregisterSurfaceOutsideClickClose = function (rootElement) {
+        if (!rootElement) {
+            return false;
+        }
+
+        return detachSurfaceOutsideClickCloseState(surfaceOutsideClickCloseStatesByRoot.get(rootElement));
+    };
+
+    console.log('? mindmap-toolbar.js loaded');
+})();