@zenfg/inspector 0.1.0-beta.3 → 0.1.0

package/dist/panelCytoscapeGraphRenderer.d.ts

@@ -1,3 +1,4 @@
+import { type GraphVisualTheme } from './panelVisualTheme.ts';
 import type cytoscape from 'cytoscape';
 import type { ELK } from 'elkjs/lib/elk-api';
 import type { GraphRenderer, GraphRenderRequest } from './panelGraphRenderer.ts';
@@ -13,7 +14,7 @@ export type GraphResizeSubscription = {
 export type GraphRendererEnvironment = {
     readonly createElement: (tagName: string) => HTMLElement;
     readonly loadRuntime: () => Promise<GraphRendererRuntime>;
-    readonly layoutScene: (elk: ELK, scene: GraphScene) => Promise<GraphLayoutResult>;
+    readonly layoutScene: (elk: ELK, scene: GraphScene, theme?: GraphVisualTheme) => Promise<GraphLayoutResult>;
     readonly observeResize?: (element: HTMLElement, onResize: () => void) => GraphResizeSubscription;
 };
 export declare class CytoscapeGraphRenderer implements GraphRenderer {
@@ -25,6 +26,9 @@ export declare class CytoscapeGraphRenderer implements GraphRenderer {
     private readonly statusMessage;
     private readonly retryButton;
     private readonly resizeSubscription;
+    private theme;
+    private geometryRevision;
+    private wasVisible;
     private core;
     private elk;
     private loading;
@@ -40,10 +44,17 @@ export declare class CytoscapeGraphRenderer implements GraphRenderer {
     private anchorTargetContentKey;
     private failedSceneContentKey;
     private overview;
+    private dragPanning;
+    private pointerInside;
+    private pointerOverElement;
+    private readonly cancelPointerInteraction;
+    private pendingReveal;
     private pendingGroupTap;
     constructor(host: HTMLElement, environment?: GraphRendererEnvironment);
     render(request: GraphRenderRequest): void;
+    setTheme(theme: GraphVisualTheme): void;
     resize(): void;
+    cancelReveal(): void;
     fit(): void;
     relayout(): void;
     destroy(): void;
@@ -56,17 +67,19 @@ export declare class CytoscapeGraphRenderer implements GraphRenderer {
     private syncInteraction;
     private consumeFitIfCurrentTarget;
     private consumeAnchorIfCurrentTarget;
+    private consumeReveal;
     private targetNeedsApply;
     private updateSemanticZoom;
     private positionTooltip;
     private hideTooltip;
     private cancelGroupTap;
     private clearHover;
+    private updateCursor;
     private showStatus;
     private hideStatus;
     private resolveCurrentRequest;
 }
-export declare function updateElementData(core: cytoscape.Core, scene: GraphScene): void;
+export declare function updateElementData(core: cytoscape.Core, scene: GraphScene, theme?: GraphVisualTheme): void;
 export { createCytoscapeEdgeRouteData, createElkLayoutGraph, layoutGraphScene, } from './panelGraphLayout.ts';
 export type { CytoscapeEdgeRouteData, GraphEdgeRoute, GraphLayoutResult, GraphPosition, } from './panelGraphLayout.ts';
 export { createGraphStyles, expandedGroupLabelMaxWidth, graphEdgeDisplayLabel, graphLayoutGeometryKey, isOverviewGraphScale, } from './panelGraphVisuals.ts';

package/dist/panelCytoscapeGraphRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panelCytoscapeGraphRenderer.d.ts","sourceRoot":"","sources":["../src/panelCytoscapeGraphRenderer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"panelCytoscapeGraphRenderer.d.ts","sourceRoot":"","sources":["../src/panelCytoscapeGraphRenderer.ts"],"names":[],"mappings":"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"}

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,17 +29,30 @@ export class CytoscapeGraphRenderer {
     anchorTargetContentKey;
     failedSceneContentKey;
     overview = false;
+    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('pointerleave', () => this.clearHover());
+        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;
@@ -49,11 +66,19 @@ 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();
@@ -63,6 +88,14 @@ export class CytoscapeGraphRenderer {
             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;
         }
@@ -92,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)
@@ -132,6 +197,7 @@ export class CytoscapeGraphRenderer {
         this.cancelGroupTap();
         this.requestVersion++;
         this.resizeSubscription?.disconnect();
+        this.canvasHost.ownerDocument?.defaultView?.removeEventListener('blur', this.cancelPointerInteraction);
         this.hideTooltip();
         this.core?.destroy();
         this.core = undefined;
@@ -165,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)
@@ -190,6 +256,7 @@ export class CytoscapeGraphRenderer {
                     this.syncInteraction(request);
                     this.consumeFitIfCurrentTarget();
                     this.consumeAnchorIfCurrentTarget();
+                    this.consumeReveal();
                     this.hideStatus();
                     this.processedVersion = version;
                     continue;
@@ -208,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;
@@ -243,6 +313,7 @@ export class CytoscapeGraphRenderer {
                     restoreViewport(core, previousViewport);
                 }
                 this.consumeAnchorIfCurrentTarget();
+                this.consumeReveal();
                 this.updateSemanticZoom(true);
                 this.hideStatus();
                 this.processedVersion = version;
@@ -278,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,
@@ -321,10 +392,13 @@ export class CytoscapeGraphRenderer {
         });
         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');
@@ -342,6 +416,19 @@ export class CytoscapeGraphRenderer {
         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() {
@@ -385,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)
@@ -395,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;
@@ -424,9 +532,14 @@ export class CytoscapeGraphRenderer {
         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;
         this.statusMessage.textContent = message;
@@ -489,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();
@@ -499,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);
@@ -513,21 +626,29 @@ 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.passKind : undefined,
@@ -535,9 +656,10 @@ function nodeRenderableData(node) {
         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,