@oml/markdown 0.11.0 → 0.13.0

package/src/renderers/diagram-renderer.ts

@@ -109,7 +109,7 @@ const TYPE_IRIS: Readonly<Record<NodeKind | 'Edge', string>> = {
 };
 const LIST_ITEM_IRI = `${D}ListItem`;
 const CSS_EDITOR_FOREGROUND = 'var(--vscode-editor-foreground, var(--oml-static-foreground, #24292f))';
-const CSS_EDITOR_BACKGROUND = 'var(--vscode-editor-background, transparent)';
+const CSS_EDITOR_BACKGROUND = 'var(--vscode-editor-background, var(--oml-static-background, #ffffff))';
 const CSS_CANVAS_BACKGROUND = 'var(--vscode-editor-background, var(--oml-static-background, #ffffff))';
 const CSS_FOCUS_BORDER = 'var(--vscode-focusBorder, var(--oml-static-link, #0969da))';
 
@@ -242,6 +242,7 @@ async function renderWithX6(
             minScale: 0.4,
             maxScale: 2.5,
             factor: 1.1,
+            modifiers: ['meta', 'ctrl'],
         },
         connecting: {
             router: 'normal',
@@ -275,9 +276,75 @@ async function renderWithX6(
                 return;
             }
             boundPortContainers.add(container);
+            const portIri = String(port.id ?? '').trim();
+            const applyPortNativeTitle = (): void => {
+                if (!portIri) {
+                    return;
+                }
+                container.setAttribute('title', portIri);
+                for (const element of Array.from(container.querySelectorAll<HTMLElement | SVGElement>('*'))) {
+                    element.setAttribute('title', portIri);
+                    if (element instanceof SVGElement) {
+                        let titleNode: SVGTitleElement | null = null;
+                        for (const child of Array.from(element.children)) {
+                            if (child instanceof SVGTitleElement) {
+                                titleNode = child;
+                                break;
+                            }
+                        }
+                        if (!titleNode) {
+                            titleNode = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+                            element.insertBefore(titleNode, element.firstChild);
+                        }
+                        titleNode.textContent = portIri;
+                    }
+                }
+            };
             container.setAttribute('data-port-id', String(port.id));
+            applyPortNativeTitle();
             container.style.cursor = 'grab';
             container.style.touchAction = 'none';
+            container.addEventListener('mouseenter', (event: MouseEvent) => {
+                const iri = portIri;
+                if (!iri) {
+                    return;
+                }
+                applyPortNativeTitle();
+                const rect = container.getBoundingClientRect();
+                liveCanvas.dispatchEvent(new CustomEvent('md-show-iri-hover', {
+                    bubbles: true,
+                    detail: {
+                        iri,
+                        previewEnabled: /^Mac/i.test(navigator.platform) ? event.metaKey : event.ctrlKey,
+                        anchorRect: {
+                            left: rect.left,
+                            right: rect.right,
+                            top: rect.top,
+                            bottom: rect.bottom,
+                            width: rect.width,
+                            height: rect.height,
+                        },
+                    },
+                }));
+            });
+            container.addEventListener('mouseleave', () => {
+                liveCanvas.dispatchEvent(new CustomEvent('md-hide-iri-hover', { bubbles: true }));
+            });
+            container.addEventListener('dblclick', (event: MouseEvent) => {
+                const iri = String(port.id ?? '').trim();
+                if (!iri) {
+                    return;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                if (typeof event.stopImmediatePropagation === 'function') {
+                    event.stopImmediatePropagation();
+                }
+                liveCanvas.dispatchEvent(new CustomEvent('md-navigate-iri', {
+                    bubbles: true,
+                    detail: { iri },
+                }));
+            });
             container.addEventListener('pointerdown', (event: PointerEvent) => {
                 if (typeof graphView.cleanSelection === 'function') {
                     graphView.cleanSelection();
@@ -1208,10 +1275,109 @@ async function renderWithX6(
     resizeHandle.addEventListener('pointerup', onResizePointerEnd);
     resizeHandle.addEventListener('pointercancel', onResizePointerEnd);
 
+    installDiagramNodeInteractions(liveCanvas, graphView);
     installDiagramToolbar(liveCanvas, graphView, graph, actions);
 
 }
 
+function installDiagramNodeInteractions(canvas: HTMLElement, graphView: any): void {
+    const ensureSvgNativeTitle = (element: SVGElement, iri: string): void => {
+        let titleNode: SVGTitleElement | null = null;
+        for (const child of Array.from(element.children)) {
+            if (child instanceof SVGTitleElement) {
+                titleNode = child;
+                break;
+            }
+        }
+        if (!titleNode) {
+            titleNode = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+            element.insertBefore(titleNode, element.firstChild);
+        }
+        titleNode.textContent = iri;
+    };
+
+    const applyNativeTooltipTitle = (container: Element | undefined, iri: string, eventTarget?: EventTarget | null): void => {
+        if (!iri) {
+            return;
+        }
+        if (container instanceof HTMLElement || container instanceof SVGElement) {
+            container.setAttribute('title', iri);
+        }
+        if (container instanceof Element) {
+            for (const element of Array.from(container.querySelectorAll<HTMLElement | SVGElement>('*'))) {
+                element.setAttribute('title', iri);
+                if (element instanceof SVGElement) {
+                    ensureSvgNativeTitle(element, iri);
+                }
+            }
+            if (container instanceof SVGElement) {
+                ensureSvgNativeTitle(container, iri);
+            }
+        }
+        if (eventTarget instanceof HTMLElement || eventTarget instanceof SVGElement) {
+            eventTarget.setAttribute('title', iri);
+            if (eventTarget instanceof SVGElement) {
+                ensureSvgNativeTitle(eventTarget, iri);
+            }
+        }
+    };
+
+    const clearHover = (): void => {
+        canvas.dispatchEvent(new CustomEvent('md-hide-iri-hover', { bubbles: true }));
+    };
+
+    graphView.on('node:mouseenter', ({ node, e }: { node: any; e?: MouseEvent }) => {
+        const iri = String(node?.id ?? '');
+        if (iri) {
+            const view = graphView.findViewByCell?.(node);
+            const bbox = view?.container?.getBoundingClientRect?.();
+            applyNativeTooltipTitle(view?.container as Element | undefined, iri, e?.target ?? null);
+            if (!bbox) {
+                return;
+            }
+            canvas.dispatchEvent(new CustomEvent('md-show-iri-hover', {
+                bubbles: true,
+                detail: {
+                    iri,
+                    previewEnabled: !!e && (/^Mac/i.test(navigator.platform) ? e.metaKey : e.ctrlKey),
+                    anchorRect: {
+                        left: bbox.left,
+                        right: bbox.right,
+                        top: bbox.top,
+                        bottom: bbox.bottom,
+                        width: bbox.width,
+                        height: bbox.height,
+                    },
+                },
+            }));
+        }
+    });
+
+    graphView.on('node:mouseleave', () => {
+        clearHover();
+    });
+
+    graphView.on('blank:mousemove', () => {
+        clearHover();
+    });
+
+    graphView.on('node:dblclick', ({ node, e }: { node: any; e: MouseEvent }) => {
+        const iri = String(node?.id ?? '');
+        if (!iri) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        if (typeof (e as any).stopImmediatePropagation === 'function') {
+            (e as any).stopImmediatePropagation();
+        }
+        canvas.dispatchEvent(new CustomEvent('md-navigate-iri', {
+            bubbles: true,
+            detail: { iri },
+        }));
+    });
+}
+
 function installDiagramToolbar(
     graphRoot: HTMLElement,
     graphView: any,