@cornerstonejs/core 3.30.3 → 3.31.0

package/dist/esm/RenderingEngine/BaseRenderingEngine.js

@@ -8,9 +8,10 @@ import BaseVolumeViewport from './BaseVolumeViewport';
 import StackViewport from './StackViewport';
 import viewportTypeUsesCustomRenderingPipeline from './helpers/viewportTypeUsesCustomRenderingPipeline';
 import getOrCreateCanvas from './helpers/getOrCreateCanvas';
-import { getShouldUseCPURendering, isCornerstoneInitialized } from '../init';
+import { getShouldUseCPURendering, isCornerstoneInitialized, getConfiguration, } from '../init';
 import viewportTypeToViewportClass from './helpers/viewportTypeToViewportClass';
 import { OrientationAxis } from '../enums';
+import { StatsOverlay } from './helpers/stats';
 export const VIEWPORT_MIN_SIZE = 2;
 class BaseRenderingEngine {
     constructor(id) {
@@ -34,6 +35,10 @@ class BaseRenderingEngine {
         }
         this._viewports = new Map();
         this.hasBeenDestroyed = false;
+        const config = getConfiguration();
+        if (config?.debug?.statsOverlay) {
+            StatsOverlay.setup();
+        }
     }
     enableElement(viewportInputEntry) {
         const viewportInput = this._normalizeViewportInputEntry(viewportInputEntry);
@@ -169,6 +174,7 @@ class BaseRenderingEngine {
         if (this.hasBeenDestroyed) {
             return;
         }
+        StatsOverlay.cleanup();
         if (!this.useCPURendering) {
             const viewports = this._getViewportsAsArray();
             viewports.forEach((vp) => {

package/dist/esm/RenderingEngine/helpers/stats/StatsOverlay.d.ts

@@ -0,0 +1,28 @@
+import type { StatsInstance } from './types';
+export declare class StatsOverlay implements StatsInstance {
+    private static instance;
+    dom: HTMLDivElement | null;
+    private currentMode;
+    private startTime;
+    private lastUpdateTime;
+    private frameCount;
+    private panels;
+    private animationFrameId;
+    private isSetup;
+    private constructor();
+    static getInstance(): StatsOverlay;
+    setup(): void;
+    cleanup(): void;
+    showPanel(panelType: number): void;
+    update(): void;
+    private createOverlayElement;
+    private applyOverlayStyles;
+    private handleClick;
+    private initializePanels;
+    private isMemoryAvailable;
+    private addPanel;
+    private startLoop;
+    private stopLoop;
+    private updateStats;
+    private updateMemoryPanel;
+}

package/dist/esm/RenderingEngine/helpers/stats/StatsOverlay.js

@@ -0,0 +1,137 @@
+import { StatsPanel } from './StatsPanel';
+import { PanelType } from './enums';
+import { STATS_CONFIG, PANEL_CONFIGS, CONVERSION } from './constants';
+export class StatsOverlay {
+    static { this.instance = null; }
+    constructor() {
+        this.dom = null;
+        this.currentMode = 0;
+        this.startTime = 0;
+        this.lastUpdateTime = 0;
+        this.frameCount = 0;
+        this.panels = new Map();
+        this.animationFrameId = null;
+        this.isSetup = false;
+    }
+    static getInstance() {
+        if (!StatsOverlay.instance) {
+            StatsOverlay.instance = new StatsOverlay();
+        }
+        return StatsOverlay.instance;
+    }
+    setup() {
+        if (this.isSetup) {
+            return;
+        }
+        try {
+            this.dom = this.createOverlayElement();
+            this.startTime = performance.now();
+            this.lastUpdateTime = this.startTime;
+            this.initializePanels();
+            this.showPanel(PanelType.FPS);
+            this.applyOverlayStyles();
+            document.body.appendChild(this.dom);
+            this.startLoop();
+            this.isSetup = true;
+        }
+        catch (error) {
+            console.warn('Failed to setup stats overlay:', error);
+        }
+    }
+    cleanup() {
+        this.stopLoop();
+        if (this.dom && this.dom.parentNode) {
+            this.dom.parentNode.removeChild(this.dom);
+        }
+        this.dom = null;
+        this.panels.clear();
+        this.isSetup = false;
+    }
+    showPanel(panelType) {
+        const children = Array.from(this.dom.children);
+        children.forEach((child, index) => {
+            child.style.display = index === panelType ? 'block' : 'none';
+        });
+        this.currentMode = panelType;
+    }
+    update() {
+        this.startTime = this.updateStats();
+    }
+    createOverlayElement() {
+        const element = document.createElement('div');
+        element.addEventListener('click', this.handleClick.bind(this), false);
+        return element;
+    }
+    applyOverlayStyles() {
+        Object.assign(this.dom.style, STATS_CONFIG.OVERLAY_STYLES);
+    }
+    handleClick(event) {
+        event.preventDefault();
+        const panelCount = this.dom.children.length;
+        this.showPanel((this.currentMode + 1) % panelCount);
+    }
+    initializePanels() {
+        const fpsPanel = new StatsPanel(PANEL_CONFIGS[PanelType.FPS].name, PANEL_CONFIGS[PanelType.FPS].foregroundColor, PANEL_CONFIGS[PanelType.FPS].backgroundColor);
+        this.addPanel(PanelType.FPS, fpsPanel);
+        const msPanel = new StatsPanel(PANEL_CONFIGS[PanelType.MS].name, PANEL_CONFIGS[PanelType.MS].foregroundColor, PANEL_CONFIGS[PanelType.MS].backgroundColor);
+        this.addPanel(PanelType.MS, msPanel);
+        if (this.isMemoryAvailable()) {
+            const memPanel = new StatsPanel(PANEL_CONFIGS[PanelType.MEMORY].name, PANEL_CONFIGS[PanelType.MEMORY].foregroundColor, PANEL_CONFIGS[PanelType.MEMORY].backgroundColor);
+            this.addPanel(PanelType.MEMORY, memPanel);
+        }
+    }
+    isMemoryAvailable() {
+        const perf = performance;
+        return perf.memory !== undefined;
+    }
+    addPanel(type, panel) {
+        this.dom.appendChild(panel.dom);
+        this.panels.set(type, panel);
+    }
+    startLoop() {
+        const loop = () => {
+            this.update();
+            this.animationFrameId = requestAnimationFrame(loop);
+        };
+        this.animationFrameId = requestAnimationFrame(loop);
+    }
+    stopLoop() {
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
+    }
+    updateStats() {
+        this.frameCount++;
+        const currentTime = performance.now();
+        const deltaTime = currentTime - this.startTime;
+        const msPanel = this.panels.get(PanelType.MS);
+        if (msPanel) {
+            msPanel.update(deltaTime, STATS_CONFIG.MAX_MS_VALUE);
+        }
+        if (currentTime >= this.lastUpdateTime + STATS_CONFIG.UPDATE_INTERVAL) {
+            const fps = (this.frameCount * CONVERSION.MS_PER_SECOND) /
+                (currentTime - this.lastUpdateTime);
+            const fpsPanel = this.panels.get(PanelType.FPS);
+            if (fpsPanel) {
+                fpsPanel.update(fps, STATS_CONFIG.MAX_FPS_VALUE);
+            }
+            this.lastUpdateTime = currentTime;
+            this.frameCount = 0;
+            this.updateMemoryPanel();
+        }
+        return currentTime;
+    }
+    updateMemoryPanel() {
+        const memPanel = this.panels.get(PanelType.MEMORY);
+        if (!memPanel) {
+            return;
+        }
+        const perf = performance;
+        if (perf.memory) {
+            const memoryMB = perf.memory.usedJSHeapSize / CONVERSION.BYTES_TO_MB;
+            const maxMemoryMB = perf.memory.jsHeapSizeLimit / CONVERSION.BYTES_TO_MB;
+            memPanel.update(memoryMB, maxMemoryMB);
+        }
+    }
+}

package/dist/esm/RenderingEngine/helpers/stats/StatsPanel.d.ts

@@ -0,0 +1,24 @@
+import type { Panel } from './types';
+export declare class StatsPanel implements Panel {
+    dom: HTMLCanvasElement;
+    private context;
+    private minValue;
+    private maxValue;
+    private readonly name;
+    private readonly foregroundColor;
+    private readonly backgroundColor;
+    private readonly devicePixelRatio;
+    private readonly dimensions;
+    constructor(name: string, foregroundColor: string, backgroundColor: string);
+    update(value: number, maxValue: number): void;
+    private calculateDimensions;
+    private createCanvas;
+    private initializeContext;
+    private drawInitialPanel;
+    private updateMinMax;
+    private clearTextArea;
+    private drawText;
+    private formatText;
+    private scrollGraph;
+    private drawNewValue;
+}

package/dist/esm/RenderingEngine/helpers/stats/StatsPanel.js

@@ -0,0 +1,101 @@
+import { PANEL_CONFIG } from './constants';
+export class StatsPanel {
+    constructor(name, foregroundColor, backgroundColor) {
+        this.minValue = Infinity;
+        this.maxValue = 0;
+        this.name = name;
+        this.foregroundColor = foregroundColor;
+        this.backgroundColor = backgroundColor;
+        this.devicePixelRatio = Math.round(window.devicePixelRatio || 1);
+        this.dimensions = this.calculateDimensions();
+        this.dom = this.createCanvas();
+        this.context = this.initializeContext();
+        this.drawInitialPanel();
+    }
+    update(value, maxValue) {
+        this.updateMinMax(value);
+        this.clearTextArea();
+        this.drawText(value);
+        this.scrollGraph();
+        this.drawNewValue(value, maxValue);
+    }
+    calculateDimensions() {
+        const pr = this.devicePixelRatio;
+        return {
+            width: PANEL_CONFIG.WIDTH * pr,
+            height: PANEL_CONFIG.HEIGHT * pr,
+            textX: PANEL_CONFIG.TEXT_PADDING * pr,
+            textY: PANEL_CONFIG.TEXT_Y_OFFSET * pr,
+            graphX: PANEL_CONFIG.TEXT_PADDING * pr,
+            graphY: PANEL_CONFIG.GRAPH_Y_OFFSET * pr,
+            graphWidth: PANEL_CONFIG.GRAPH_WIDTH * pr,
+            graphHeight: PANEL_CONFIG.GRAPH_HEIGHT * pr,
+        };
+    }
+    createCanvas() {
+        const canvas = document.createElement('canvas');
+        canvas.width = this.dimensions.width;
+        canvas.height = this.dimensions.height;
+        canvas.style.cssText = `width:${PANEL_CONFIG.WIDTH}px;height:${PANEL_CONFIG.HEIGHT}px`;
+        return canvas;
+    }
+    initializeContext() {
+        const ctx = this.dom.getContext('2d');
+        if (!ctx) {
+            throw new Error('Failed to get 2D context');
+        }
+        ctx.font = `bold ${PANEL_CONFIG.FONT_SIZE * this.devicePixelRatio}px ${PANEL_CONFIG.FONT_FAMILY}`;
+        ctx.textBaseline = 'top';
+        return ctx;
+    }
+    drawInitialPanel() {
+        const { width, height, textX, textY, graphX, graphY, graphWidth, graphHeight, } = this.dimensions;
+        this.context.fillStyle = this.backgroundColor;
+        this.context.fillRect(0, 0, width, height);
+        this.context.fillStyle = this.foregroundColor;
+        this.context.fillText(this.name, textX, textY);
+        this.context.fillRect(graphX, graphY, graphWidth, graphHeight);
+        this.context.fillStyle = this.backgroundColor;
+        this.context.globalAlpha = PANEL_CONFIG.GRAPH_ALPHA;
+        this.context.fillRect(graphX, graphY, graphWidth, graphHeight);
+        this.context.globalAlpha = 1;
+    }
+    updateMinMax(value) {
+        this.minValue = Math.min(this.minValue, value);
+        this.maxValue = Math.max(this.maxValue, value);
+    }
+    clearTextArea() {
+        const { width, graphY } = this.dimensions;
+        this.context.fillStyle = this.backgroundColor;
+        this.context.fillRect(0, 0, width, graphY);
+    }
+    drawText(value) {
+        const { textX, textY } = this.dimensions;
+        const text = this.formatText(value);
+        this.context.fillStyle = this.foregroundColor;
+        this.context.fillText(text, textX, textY);
+    }
+    formatText(value) {
+        const roundedValue = Math.round(value);
+        const roundedMin = Math.round(this.minValue);
+        const roundedMax = Math.round(this.maxValue);
+        return `${roundedValue} ${this.name} (${roundedMin}-${roundedMax})`;
+    }
+    scrollGraph() {
+        const { graphX, graphY, graphWidth, graphHeight } = this.dimensions;
+        const pr = this.devicePixelRatio;
+        this.context.drawImage(this.dom, graphX + pr, graphY, graphWidth - pr, graphHeight, graphX, graphY, graphWidth - pr, graphHeight);
+    }
+    drawNewValue(value, maxValue) {
+        const { graphX, graphY, graphWidth, graphHeight } = this.dimensions;
+        const pr = this.devicePixelRatio;
+        const x = graphX + graphWidth - pr;
+        this.context.fillStyle = this.foregroundColor;
+        this.context.fillRect(x, graphY, pr, graphHeight);
+        const normalizedHeight = Math.round((1 - value / maxValue) * graphHeight);
+        this.context.fillStyle = this.backgroundColor;
+        this.context.globalAlpha = PANEL_CONFIG.GRAPH_ALPHA;
+        this.context.fillRect(x, graphY, pr, normalizedHeight);
+        this.context.globalAlpha = 1;
+    }
+}

package/dist/esm/RenderingEngine/helpers/stats/constants.d.ts

@@ -0,0 +1,44 @@
+declare const PANEL_CONFIG: {
+    readonly WIDTH: 160;
+    readonly HEIGHT: 96;
+    readonly TEXT_PADDING: 3;
+    readonly TEXT_Y_OFFSET: 2;
+    readonly GRAPH_Y_OFFSET: 15;
+    readonly GRAPH_WIDTH: 150;
+    readonly GRAPH_HEIGHT: 70;
+    readonly FONT_SIZE: 9;
+    readonly FONT_FAMILY: "Helvetica,Arial,sans-serif";
+    readonly GRAPH_ALPHA: 0.9;
+};
+declare const STATS_CONFIG: {
+    readonly UPDATE_INTERVAL: 1000;
+    readonly MAX_MS_VALUE: 200;
+    readonly MAX_FPS_VALUE: 300;
+    readonly OVERLAY_STYLES: {
+        readonly position: "fixed";
+        readonly top: "0px";
+        readonly right: "0px";
+        readonly left: "auto";
+        readonly zIndex: "9999";
+        readonly cursor: "pointer";
+        readonly opacity: "0.9";
+    };
+};
+declare const CONVERSION: {
+    readonly BYTES_TO_MB: 1048576;
+    readonly MS_PER_SECOND: 1000;
+};
+declare const PANEL_CONFIGS: readonly [{
+    readonly name: "FPS";
+    readonly foregroundColor: "#0ff";
+    readonly backgroundColor: "#002";
+}, {
+    readonly name: "MS";
+    readonly foregroundColor: "#0f0";
+    readonly backgroundColor: "#020";
+}, {
+    readonly name: "MB";
+    readonly foregroundColor: "#f08";
+    readonly backgroundColor: "#201";
+}];
+export { PANEL_CONFIG, STATS_CONFIG, CONVERSION, PANEL_CONFIGS };

package/dist/esm/RenderingEngine/helpers/stats/constants.js

@@ -0,0 +1,36 @@
+const PANEL_CONFIG = {
+    WIDTH: 160,
+    HEIGHT: 96,
+    TEXT_PADDING: 3,
+    TEXT_Y_OFFSET: 2,
+    GRAPH_Y_OFFSET: 15,
+    GRAPH_WIDTH: 150,
+    GRAPH_HEIGHT: 70,
+    FONT_SIZE: 9,
+    FONT_FAMILY: 'Helvetica,Arial,sans-serif',
+    GRAPH_ALPHA: 0.9,
+};
+const STATS_CONFIG = {
+    UPDATE_INTERVAL: 1000,
+    MAX_MS_VALUE: 200,
+    MAX_FPS_VALUE: 300,
+    OVERLAY_STYLES: {
+        position: 'fixed',
+        top: '0px',
+        right: '0px',
+        left: 'auto',
+        zIndex: '9999',
+        cursor: 'pointer',
+        opacity: '0.9',
+    },
+};
+const CONVERSION = {
+    BYTES_TO_MB: 1048576,
+    MS_PER_SECOND: 1000,
+};
+const PANEL_CONFIGS = [
+    { name: 'FPS', foregroundColor: '#0ff', backgroundColor: '#002' },
+    { name: 'MS', foregroundColor: '#0f0', backgroundColor: '#020' },
+    { name: 'MB', foregroundColor: '#f08', backgroundColor: '#201' },
+];
+export { PANEL_CONFIG, STATS_CONFIG, CONVERSION, PANEL_CONFIGS };

package/dist/esm/RenderingEngine/helpers/stats/enums.d.ts

@@ -0,0 +1,6 @@
+declare enum PanelType {
+    FPS = 0,
+    MS = 1,
+    MEMORY = 2
+}
+export { PanelType };

package/dist/esm/RenderingEngine/helpers/stats/enums.js

@@ -0,0 +1,7 @@
+var PanelType;
+(function (PanelType) {
+    PanelType[PanelType["FPS"] = 0] = "FPS";
+    PanelType[PanelType["MS"] = 1] = "MS";
+    PanelType[PanelType["MEMORY"] = 2] = "MEMORY";
+})(PanelType || (PanelType = {}));
+export { PanelType };

package/dist/esm/RenderingEngine/helpers/stats/index.d.ts

@@ -0,0 +1,2 @@
+import { StatsOverlay as Class } from './StatsOverlay';
+export declare const StatsOverlay: Class;

package/dist/esm/RenderingEngine/helpers/stats/index.js

@@ -0,0 +1,2 @@
+import { StatsOverlay as Class } from './StatsOverlay';
+export const StatsOverlay = Class.getInstance();

package/dist/esm/RenderingEngine/helpers/stats/types.d.ts

@@ -0,0 +1,22 @@
+interface Panel {
+    dom: HTMLCanvasElement;
+    update: (value: number, maxValue: number) => void;
+}
+interface StatsInstance {
+    dom: HTMLDivElement;
+    showPanel: (id: number) => void;
+    update: () => void;
+    destroy?: () => void;
+}
+interface PerformanceWithMemory extends Performance {
+    memory?: {
+        usedJSHeapSize: number;
+        jsHeapSizeLimit: number;
+    };
+}
+interface PanelConfig {
+    name: string;
+    foregroundColor: string;
+    backgroundColor: string;
+}
+export type { Panel, StatsInstance, PerformanceWithMemory, PanelConfig };

package/dist/esm/init.js

@@ -14,6 +14,9 @@ const defaultConfig = {
         renderingEngineMode: RenderingEngineModeEnum.ContextPool,
         webGlContextCount: 7,
     },
+    debug: {
+        statsOverlay: false,
+    },
     peerImport: (moduleId) => null,
 };
 let config = {

package/dist/esm/types/Cornerstone3DConfig.d.ts

@@ -11,6 +11,9 @@ interface Cornerstone3DConfig {
         renderingEngineMode?: RenderingEngineModeType;
         webGlContextCount?: number;
     };
+    debug: {
+        statsOverlay?: boolean;
+    };
     peerImport?: (moduleId: string) => Promise<any>;
 }
 export type { Cornerstone3DConfig as default };

package/dist/esm/version.d.ts

@@ -1 +1 @@
-export declare const version = "3.30.3";
+export declare const version = "3.31.0";

package/dist/esm/version.js

@@ -1 +1 @@
-export const version = '3.30.3';
+export const version = '3.31.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cornerstonejs/core",
-  "version": "3.30.3",
+  "version": "3.31.0",
   "description": "Cornerstone3D Core",
   "module": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
@@ -97,5 +97,5 @@
     "type": "individual",
     "url": "https://ohif.org/donate"
   },
-  "gitHead": "ff959f1bf57c60b727e2cd6563db13b194cbabb0"
+  "gitHead": "ea3e44970a9e535db1f38c8186653ffb7376ecf9"
 }