@zenfg/inspector 0.1.0-beta.2 → 0.1.0-beta.4

package/dist/panelCytoscapeGraphRenderer.js

@@ -1,6 +1,7 @@
+import { GRAPH_VISUAL_THEME } from "./panelVisualTheme.js";
 import { applyGraphLayout, layoutGraphScene, syncExpandedGroupLabelGeometry, } from "./panelGraphLayout.js";
 import { selectionKey, } from "./panelGraphScene.js";
-import { createGraphStyles, expandedGroupLabelMaxWidth, GRAPH_GEOMETRY, graphEdgeDisplayLabel, graphLayoutGeometryKey, isOverviewGraphScale, nodeDimensions, } from "./panelGraphVisuals.js";
+import { createGraphStyles, fitGraphLabel, fitCollapsedGroupLabel, graphLabelFontSize, expandedGroupLabelMaxWidth, GRAPH_GEOMETRY, graphEdgeDisplayLabel, graphLayoutGeometryKey, isOverviewGraphScale, nodeDimensions, } from "./panelGraphVisuals.js";
 export class CytoscapeGraphRenderer {
     host;
     environment;
@@ -10,6 +11,9 @@ export class CytoscapeGraphRenderer {
     statusMessage;
     retryButton;
     resizeSubscription;
+    theme = GRAPH_VISUAL_THEME;
+    geometryRevision = 0;
+    wasVisible = false;
     core;
     elk;
     loading;
@@ -25,15 +29,30 @@ export class CytoscapeGraphRenderer {
     anchorTargetContentKey;
     failedSceneContentKey;
     overview = false;
-    lastTap;
+    dragPanning = false;
+    pointerInside = false;
+    pointerOverElement = false;
+    cancelPointerInteraction = () => {
+        this.dragPanning = false;
+        this.cancelGroupTap();
+        this.clearHover();
+    };
+    pendingReveal;
+    pendingGroupTap;
     constructor(host, environment = browserGraphRendererEnvironment) {
         this.host = host;
         this.environment = environment;
         this.canvasHost = environment.createElement('div');
         this.canvasHost.className = 'zenfg-inspector-graph-canvas';
+        this.updateCursor();
         this.tooltip = environment.createElement('div');
         this.tooltip.className = 'zenfg-inspector-graph-tooltip';
         this.tooltip.hidden = true;
+        // Cytoscape's node mouseout is not guaranteed when leaving its canvas directly.
+        this.canvasHost.addEventListener('pointerenter', () => { this.pointerInside = true; });
+        this.canvasHost.addEventListener('pointerleave', () => { this.pointerInside = false; this.clearHover(); });
+        this.canvasHost.addEventListener('pointercancel', this.cancelPointerInteraction);
+        this.canvasHost.ownerDocument?.defaultView?.addEventListener('blur', this.cancelPointerInteraction);
         this.status = environment.createElement('div');
         this.status.className = 'zenfg-inspector-graph-status';
         this.status.hidden = true;
@@ -47,12 +66,36 @@ export class CytoscapeGraphRenderer {
         this.retryButton.addEventListener('click', () => this.relayout());
         this.status.append(this.statusMessage, this.retryButton);
         this.host.replaceChildren(this.canvasHost, this.status, this.tooltip);
-        this.resizeSubscription = environment.observeResize?.(host, () => this.core?.resize());
+        this.resizeSubscription = environment.observeResize?.(host, () => {
+            const visible = host.clientWidth > 0 && host.clientHeight > 0;
+            if (visible && !this.wasVisible)
+                this.latestRequest?.onVisible?.();
+            this.wasVisible = visible;
+            this.core?.resize();
+        });
     }
     render(request) {
         if (this.destroyed)
             return;
+        if (request.theme)
+            this.setTheme(request.theme);
+        if (this.latestRequest?.scene !== request.scene
+            || (this.latestRequest?.selected && selectionKey(this.latestRequest.selected)) !== (request.selected && selectionKey(request.selected))) {
+            this.cancelGroupTap();
+        }
+        if ((!request.hovered && !this.tooltip.hidden) || this.latestRequest?.scene.contentKey !== request.scene.contentKey) {
+            this.hideTooltip();
+            this.core?.elements().removeClass('semantic-hover');
+        }
         this.latestRequest = request;
+        if (request.reveal) {
+            this.pendingReveal = { request: request.reveal, contentKey: request.scene.contentKey, captureRevision: request.captureRevision };
+        }
+        else if (this.pendingReveal && (this.pendingReveal.captureRevision !== request.captureRevision
+            || this.pendingReveal.contentKey !== request.scene.contentKey
+            || !request.selected || selectionKey(request.selected) !== selectionKey(this.pendingReveal.request.selection))) {
+            this.pendingReveal = undefined;
+        }
         if (request.fit) {
             this.fitTargetContentKey = request.scene.contentKey;
         }
@@ -82,14 +125,46 @@ export class CytoscapeGraphRenderer {
             this.syncInteraction(request);
             this.consumeFitIfCurrentTarget();
             this.consumeAnchorIfCurrentTarget();
+            this.consumeReveal();
             this.processedVersion = version;
             return;
         }
         this.scheduleProcessing();
     }
+    setTheme(theme) {
+        if (this.destroyed || JSON.stringify(theme) === JSON.stringify(this.theme))
+            return;
+        const typographyChanged = theme.fontFamily !== this.theme.fontFamily || theme.fontSize !== this.theme.fontSize;
+        this.theme = theme;
+        this.core?.style().fromJson(createGraphStyles(theme)).update();
+        if (!typographyChanged)
+            return;
+        this.geometryRevision++;
+        if (this.core && this.latestRequest && this.appliedScene) {
+            const selected = this.core.nodes('.semantic-selected').first();
+            const center = this.core.extent();
+            const target = selected.nonempty() ? selected : this.core.nodes().filter(node => !node.isParent()).sort((a, b) => {
+                const distance = (node) => Math.hypot(node.position('x') - center.x1 - center.w / 2, node.position('y') - center.y1 - center.h / 2);
+                return distance(a) - distance(b);
+            }).first();
+            if (target.nonempty()) {
+                this.anchorElementId = target.id();
+                this.anchorTargetContentKey = this.latestRequest.scene.contentKey;
+            }
+            this.forceRelayout = true;
+            ++this.requestVersion;
+            this.scheduleProcessing();
+        }
+        this.updateSemanticZoom(true);
+    }
     resize() {
         this.core?.resize();
     }
+    cancelReveal() {
+        this.pendingReveal = undefined;
+        this.cancelGroupTap();
+        this.clearHover();
+    }
     fit() {
         const targetContentKey = this.latestRequest?.scene.contentKey;
         if (targetContentKey)
@@ -105,6 +180,7 @@ export class CytoscapeGraphRenderer {
     relayout() {
         if (!this.latestRequest || this.destroyed)
             return;
+        this.cancelGroupTap();
         this.failedSceneContentKey = undefined;
         this.forceRelayout = true;
         this.fitTargetContentKey = this.latestRequest.scene.contentKey;
@@ -118,8 +194,10 @@ export class CytoscapeGraphRenderer {
         if (this.destroyed)
             return;
         this.destroyed = true;
+        this.cancelGroupTap();
         this.requestVersion++;
         this.resizeSubscription?.disconnect();
+        this.canvasHost.ownerDocument?.defaultView?.removeEventListener('blur', this.cancelPointerInteraction);
         this.hideTooltip();
         this.core?.destroy();
         this.core = undefined;
@@ -153,7 +231,7 @@ export class CytoscapeGraphRenderer {
             if (request.scene.nodes.length === 0) {
                 this.hideTooltip();
                 if (this.core)
-                    replaceElements(this.core, request.scene);
+                    replaceElements(this.core, request.scene, this.theme);
                 this.appliedScene = request.scene;
                 this.forceRelayout = false;
                 if (this.fitTargetContentKey === request.scene.contentKey)
@@ -178,6 +256,7 @@ export class CytoscapeGraphRenderer {
                     this.syncInteraction(request);
                     this.consumeFitIfCurrentTarget();
                     this.consumeAnchorIfCurrentTarget();
+                    this.consumeReveal();
                     this.hideStatus();
                     this.processedVersion = version;
                     continue;
@@ -196,20 +275,23 @@ export class CytoscapeGraphRenderer {
                 let laidOut = false;
                 if (geometryChanged || this.forceRelayout) {
                     this.showStatus('layout', 'Laying out graph…');
-                    const result = await this.environment.layoutScene(this.elk, request.scene);
+                    const geometryRevision = this.geometryRevision;
+                    const result = await this.environment.layoutScene(this.elk, request.scene, this.theme);
+                    if (geometryRevision !== this.geometryRevision)
+                        continue;
                     const layoutRequest = this.resolveCurrentRequest(version, request.scene.contentKey);
                     if (!layoutRequest)
                         continue;
                     ({ version, request } = layoutRequest);
                     if (topologyChanged || !this.appliedScene)
-                        replaceElements(core, request.scene);
+                        replaceElements(core, request.scene, this.theme);
                     else
-                        updateElementData(core, request.scene);
+                        updateElementData(core, request.scene, this.theme);
                     applyGraphLayout(core, request.scene, result);
                     laidOut = true;
                 }
                 else {
-                    updateElementData(core, request.scene);
+                    updateElementData(core, request.scene, this.theme);
                 }
                 syncExpandedGroupLabelGeometry(core);
                 this.appliedScene = request.scene;
@@ -231,6 +313,7 @@ export class CytoscapeGraphRenderer {
                     restoreViewport(core, previousViewport);
                 }
                 this.consumeAnchorIfCurrentTarget();
+                this.consumeReveal();
                 this.updateSemanticZoom(true);
                 this.hideStatus();
                 this.processedVersion = version;
@@ -266,7 +349,7 @@ export class CytoscapeGraphRenderer {
         this.core = runtime.createCore({
             container: this.canvasHost,
             elements: [],
-            style: createGraphStyles(),
+            style: createGraphStyles(this.theme),
             layout: { name: 'preset' },
             minZoom: 0.03,
             maxZoom: 4,
@@ -284,29 +367,38 @@ export class CytoscapeGraphRenderer {
                 return;
             const id = event.target.id();
             const selection = request.scene.interaction.selectionByElementId.get(id);
-            if (selection)
-                request.onSelect(selection);
-            const now = performance.now();
-            if (this.lastTap?.id === id && now - this.lastTap.at <= 350 && selection?.kind === 'group') {
+            const doubleTap = this.pendingGroupTap?.id === id;
+            this.cancelGroupTap();
+            if (selection?.kind !== 'group') {
+                if (selection)
+                    request.onSelect(selection);
+            }
+            else if (doubleTap) {
                 request.onToggleGroup(selection.pathKey);
-                this.lastTap = undefined;
             }
             else {
-                this.lastTap = { id, at: now };
+                // Defer group selection so expansion does not replace the inspected resource.
+                this.pendingGroupTap = { id, timer: setTimeout(() => {
+                        this.pendingGroupTap = undefined;
+                        this.interactiveRequest()?.onSelect(selection);
+                    }, 350) };
             }
         };
         core.on('tap', 'node', selectElement);
         core.on('tap', 'edge', selectElement);
         core.on('tap', (event) => {
             if (event.target === core)
-                this.lastTap = undefined;
+                this.cancelGroupTap();
         });
         const hoverElement = (event) => {
             const request = this.interactiveRequest();
-            if (!request)
+            if (!request || this.dragPanning)
                 return;
             const id = event.target.id();
             const selection = request.scene.interaction.selectionByElementId.get(id);
+            this.pointerInside = true;
+            this.pointerOverElement = !!selection;
+            this.updateCursor();
             if (selection)
                 request.onHover(selection);
             const title = event.target.data('tooltip');
@@ -321,12 +413,22 @@ export class CytoscapeGraphRenderer {
         const moveTooltip = (event) => this.positionTooltip(event.renderedPosition);
         core.on('mousemove', 'node', moveTooltip);
         core.on('mousemove', 'edge', moveTooltip);
-        const clearHover = () => {
-            this.hideTooltip();
-            this.latestRequest?.onHover(undefined);
-        };
+        const clearHover = () => this.clearHover();
         core.on('mouseout', 'node', clearHover);
         core.on('mouseout', 'edge', clearHover);
+        core.on('dragpan', () => {
+            if (this.dragPanning)
+                return;
+            this.dragPanning = true;
+            this.cancelGroupTap();
+            this.clearHover();
+        });
+        core.on('tapend', (event) => {
+            this.dragPanning = false;
+            this.pointerOverElement = this.pointerInside && event.target !== core
+                && !!this.interactiveRequest()?.scene.interaction.selectionByElementId.get(event.target.id());
+            this.updateCursor();
+        });
         core.on('zoom', () => this.updateSemanticZoom());
     }
     interactiveRequest() {
@@ -340,7 +442,7 @@ export class CytoscapeGraphRenderer {
         core.batch(() => {
             core.elements().removeClass('semantic-selected semantic-hover');
             if (request.hovered) {
-                for (const id of request.scene.interaction.relatedElementIdsBySelection.get(selectionKey(request.hovered)) ?? []) {
+                for (const id of request.scene.interaction.hoverElementIdsBySelection.get(selectionKey(request.hovered)) ?? []) {
                     core.getElementById(id).addClass('semantic-hover');
                 }
             }
@@ -370,6 +472,27 @@ export class CytoscapeGraphRenderer {
         this.anchorElementId = undefined;
         this.anchorTargetContentKey = undefined;
     }
+    consumeReveal() {
+        const pending = this.pendingReveal;
+        const request = this.latestRequest;
+        if (!pending || !request || !this.core || this.targetNeedsApply())
+            return;
+        this.pendingReveal = undefined;
+        if (pending.captureRevision !== request.captureRevision || pending.contentKey !== request.scene.contentKey)
+            return;
+        const ids = request.scene.interaction.primaryElementIdsBySelection.get(selectionKey(pending.request.selection)) ?? [];
+        const targets = this.core.collection();
+        for (const id of ids)
+            targets.merge(this.core.getElementById(id));
+        if (!targets.length)
+            return;
+        this.core.resize();
+        this.core.fit(targets, 64);
+        if (this.core.zoom() > 1.2)
+            this.core.zoom(1.2);
+        this.core.center(targets);
+        this.updateSemanticZoom();
+    }
     targetNeedsApply() {
         const target = this.latestRequest?.scene;
         if (!target || !this.appliedScene)
@@ -380,7 +503,7 @@ export class CytoscapeGraphRenderer {
         const core = this.core;
         if (!core)
             return;
-        const overview = isOverviewGraphScale(core.zoom());
+        const overview = isOverviewGraphScale(core.zoom(), this.theme);
         if (!force && overview === this.overview)
             return;
         this.overview = overview;
@@ -402,7 +525,20 @@ export class CytoscapeGraphRenderer {
     hideTooltip() {
         this.tooltip.hidden = true;
         this.tooltip.textContent = '';
-        this.lastTap = undefined;
+    }
+    cancelGroupTap() {
+        if (this.pendingGroupTap)
+            clearTimeout(this.pendingGroupTap.timer);
+        this.pendingGroupTap = undefined;
+    }
+    clearHover() {
+        this.pointerOverElement = false;
+        this.updateCursor();
+        this.hideTooltip();
+        this.latestRequest?.onHover(undefined);
+    }
+    updateCursor() {
+        this.canvasHost.style.cursor = this.dragPanning ? 'grabbing' : this.pointerOverElement ? 'pointer' : 'grab';
     }
     showStatus(kind, message, retry = false) {
         this.status.dataset.state = kind;
@@ -466,9 +602,9 @@ const browserGraphRendererEnvironment = {
         };
     },
 };
-function replaceElements(core, scene) {
+function replaceElements(core, scene, theme = GRAPH_VISUAL_THEME) {
     const definitions = [
-        ...scene.nodes.map(nodeDefinition),
+        ...scene.nodes.map(node => nodeDefinition(node, theme)),
         ...scene.edges.map(edgeDefinition),
     ];
     core.startBatch();
@@ -476,12 +612,12 @@ function replaceElements(core, scene) {
     core.add(definitions);
     core.endBatch();
 }
-export function updateElementData(core, scene) {
+export function updateElementData(core, scene, theme = GRAPH_VISUAL_THEME) {
     core.batch(() => {
         for (const node of scene.nodes) {
             const element = core.getElementById(node.id);
             if (element.nonempty())
-                element.data(nodeRenderableData(node));
+                element.data(nodeRenderableData(node, theme));
         }
         for (const edge of scene.edges) {
             const element = core.getElementById(edge.id);
@@ -490,31 +626,40 @@ export function updateElementData(core, scene) {
         }
     });
 }
-function nodeDefinition(node) {
+function nodeDefinition(node, theme) {
     return {
         group: 'nodes',
+        pannable: true,
         data: {
             id: node.id,
             parent: node.parentId,
-            ...nodeRenderableData(node),
+            ...nodeRenderableData(node, theme),
         },
     };
 }
-function nodeRenderableData(node) {
-    const dimensions = nodeDimensions(node);
+function nodeRenderableData(node, theme) {
+    const dimensions = nodeDimensions(node, theme);
     const labelMaxWidth = node.kind === 'group' && node.collapsed
         ? expandedGroupLabelMaxWidth(dimensions.width)
-        : 160;
+        : 160 * theme.fontSize / GRAPH_GEOMETRY.baseFontSize;
+    const fitLabel = (label) => node.kind !== 'group'
+        ? fitGraphLabel(label, labelMaxWidth, theme)
+        : node.collapsed ? fitCollapsedGroupLabel(label, labelMaxWidth, theme) : label;
+    const detailLabel = fitLabel(node.label);
+    const labelFontSize = node.kind === 'group' && !node.collapsed
+        ? theme.fontSize * 1.2
+        : graphLabelFontSize(detailLabel, labelMaxWidth, dimensions.height - 12 * theme.fontSize / GRAPH_GEOMETRY.baseFontSize, theme);
     return {
         kind: node.kind,
-        passKind: node.kind === 'pass' || node.kind === 'culled-pass' ? node.passKind : undefined,
-        resourceKind: node.kind === 'resource' ? node.resourceKind : undefined,
+        passKind: node.kind === 'pass' ? node.passKind : undefined,
+        resourceKind: (node.kind === 'resource' || node.kind === 'root') ? node.resourceKind : undefined,
         collapsed: node.kind === 'group' && node.collapsed ? 1 : 0,
         hasCulled: node.kind === 'group' && node.culledNodeCount > 0 ? 1 : 0,
         depthBand: node.kind === 'group' ? node.depthBand : undefined,
-        detailLabel: node.label,
-        overviewLabel: node.overviewLabel,
-        displayLabel: node.label,
+        detailLabel,
+        labelFontSize,
+        overviewLabel: fitLabel(node.overviewLabel),
+        displayLabel: detailLabel,
         tooltip: node.title,
         labelMaxWidth,
         width: dimensions.width,
@@ -536,9 +681,6 @@ function edgeRenderableData(edge) {
     const detailLabel = graphEdgeDisplayLabel(edge);
     return {
         kind: edge.kind,
-        dependencyKind: edge.kind === 'dependency' ? edge.dependencyKind : undefined,
-        accessMode: edge.kind === 'access' ? edge.accessMode : undefined,
-        dashed: edge.kind === 'access' && edge.dashed ? 1 : 0,
         detailLabel,
         displayLabel: detailLabel,
         tooltip: edge.title,