@file-viewer/renderer-dicom 3.0.0

package/dist/dicom.js

@@ -0,0 +1,525 @@
+import { createFileViewerViewStateChange, createFileViewerViewStateChangeEmitter, createFileViewerZoomChangeEmitter, registerFileViewerViewStateProvider, registerFileViewerZoomProvider, unregisterFileViewerViewStateProvider, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
+import { cache, Enums, getWebWorkerManager, registerImageLoader, init as initCornerstone, isCornerstoneInitialized, TiledRenderingEngine, } from '@cornerstonejs/core';
+import { wadouri } from '@cornerstonejs/dicom-image-loader';
+import { Enums as MetadataEnums, metaData as cornerstoneMetadata, registerDefaultProviders, } from '@cornerstonejs/metadata';
+import { inspectDicomPart10 } from './inspect.js';
+const MIN_ZOOM = 0.1;
+const MAX_ZOOM = 10;
+const MAX_CODEC_WORKERS = 4;
+const CODEC_WORKER_NAME = 'dicomImageLoader';
+let dicomLoaderInitialized = false;
+let renderingEngineSerial = 0;
+const dicomStyle = `
+.dicom-viewer{position:relative;display:flex;width:100%;height:100%;min-height:360px;flex-direction:column;overflow:hidden;background:#05080d;color:#e2e8f0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-sizing:border-box}
+.dicom-viewer *{box-sizing:border-box}
+.dicom-toolbar{position:relative;z-index:3;display:flex;min-height:48px;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid rgba(148,163,184,.22);background:rgba(15,23,42,.96);box-shadow:0 8px 24px rgba(0,0,0,.22)}
+.dicom-tool-group{display:flex;align-items:center;gap:5px}
+.dicom-toolbar button{display:grid;min-width:32px;height:32px;place-items:center;border:1px solid rgba(148,163,184,.26);border-radius:7px;padding:0 8px;background:#172033;color:#e5edf7;font:700 13px/1 system-ui,sans-serif;cursor:pointer}
+.dicom-toolbar button:hover:not(:disabled){border-color:#60a5fa;background:#1e3a5f;color:#fff}
+.dicom-toolbar button:focus-visible,.dicom-toolbar input:focus-visible,.dicom-stage:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}
+.dicom-toolbar button:disabled{cursor:not-allowed;opacity:.42}
+.dicom-frame-meter,.dicom-zoom-meter{min-width:58px;color:#cbd5e1;font:700 12px/1 system-ui,sans-serif;text-align:center;white-space:nowrap}
+.dicom-window-controls{display:flex;align-items:center;gap:7px;margin-left:auto}
+.dicom-window-controls label{display:flex;align-items:center;gap:4px;color:#94a3b8;font:700 11px/1 system-ui,sans-serif}
+.dicom-window-controls input{width:76px;height:30px;border:1px solid rgba(148,163,184,.3);border-radius:6px;padding:0 7px;background:#0b1220;color:#f8fafc;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
+.dicom-body{position:relative;min-height:0;flex:1;overflow:hidden;background:#05080d}
+.dicom-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;outline:none;user-select:none;-webkit-user-select:none}
+.dicom-stage.is-panning{cursor:grabbing}
+.dicom-stage canvas{display:block}
+.dicom-meta{position:absolute;z-index:2;left:10px;bottom:10px;max-width:calc(100% - 20px);border:1px solid rgba(148,163,184,.22);border-radius:7px;padding:6px 8px;background:rgba(2,6,23,.72);color:#cbd5e1;font:600 11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;pointer-events:none;backdrop-filter:blur(8px)}
+.dicom-state{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(5,8,13,.92);color:#cbd5e1;font-size:13px;font-weight:700;text-align:center}
+.dicom-state[hidden]{display:none}
+.dicom-state.error{color:#fca5a5}
+@media(max-width:720px){.dicom-toolbar{align-items:flex-start;flex-wrap:wrap}.dicom-window-controls{width:100%;margin-left:0}.dicom-window-controls label{flex:1}.dicom-window-controls input{width:100%;min-width:0}.dicom-body{min-height:300px}}
+`;
+const copyByLocale = {
+    'de-DE': {
+        fit: 'Ansicht einpassen', loading: 'DICOM wird geladen ...', next: 'Nächstes Bild', previous: 'Vorheriges Bild',
+        rotateLeft: 'Nach links drehen', rotateRight: 'Nach rechts drehen', windowCenter: 'Fenstermitte',
+        windowWidth: 'Fensterbreite', zoomIn: 'Vergrößern', zoomOut: 'Verkleinern',
+    },
+    'en-US': {
+        fit: 'Fit to view', loading: 'Loading DICOM ...', next: 'Next frame', previous: 'Previous frame',
+        rotateLeft: 'Rotate left', rotateRight: 'Rotate right', windowCenter: 'Window center',
+        windowWidth: 'Window width', zoomIn: 'Zoom in', zoomOut: 'Zoom out',
+    },
+    'ja-JP': {
+        fit: '画面に合わせる', loading: 'DICOM を読み込み中 ...', next: '次のフレーム', previous: '前のフレーム',
+        rotateLeft: '左に回転', rotateRight: '右に回転', windowCenter: 'ウィンドウ中心',
+        windowWidth: 'ウィンドウ幅', zoomIn: '拡大', zoomOut: '縮小',
+    },
+    'zh-CN': {
+        fit: '适合视图', loading: '正在加载 DICOM ...', next: '下一帧', previous: '上一帧',
+        rotateLeft: '向左旋转', rotateRight: '向右旋转', windowCenter: '窗位',
+        windowWidth: '窗宽', zoomIn: '放大', zoomOut: '缩小',
+    },
+};
+const resolveCopy = (context) => {
+    var _a, _b, _c, _d;
+    const requested = (_a = context === null || context === void 0 ? void 0 : context.options) === null || _a === void 0 ? void 0 : _a.locale;
+    if (requested && requested !== 'auto' && requested in copyByLocale) {
+        return copyByLocale[requested];
+    }
+    const language = ((_d = (_c = (_b = context === null || context === void 0 ? void 0 : context.surface) === null || _b === void 0 ? void 0 : _b.container) === null || _c === void 0 ? void 0 : _c.ownerDocument.defaultView) === null || _d === void 0 ? void 0 : _d.navigator.language) ||
+        (typeof navigator !== 'undefined' ? navigator.language : 'en-US');
+    if (language.toLowerCase().startsWith('zh'))
+        return copyByLocale['zh-CN'];
+    if (language.toLowerCase().startsWith('ja'))
+        return copyByLocale['ja-JP'];
+    if (language.toLowerCase().startsWith('de'))
+        return copyByLocale['de-DE'];
+    return copyByLocale['en-US'];
+};
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const finitePositiveInteger = (value, label) => {
+    const number = typeof value === 'number' ? value : Number.parseInt(String(value || ''), 10);
+    if (!Number.isSafeInteger(number) || number < 1) {
+        throw new Error(`DICOM ${label} must be a positive integer.`);
+    }
+    return number;
+};
+const finiteNumber = (value, fallback) => {
+    const number = typeof value === 'number' ? value : Number.parseFloat(String(value || ''));
+    return Number.isFinite(number) ? number : fallback;
+};
+const resolveCodecWorkerCount = (requested) => {
+    const hardware = typeof navigator !== 'undefined' ? navigator.hardwareConcurrency || 2 : 2;
+    const defaultCount = Math.min(2, Math.max(1, Math.floor(hardware / 2)));
+    if (requested === undefined)
+        return defaultCount;
+    return clamp(finitePositiveInteger(requested, 'codec worker count'), 1, MAX_CODEC_WORKERS);
+};
+const ensureDicomRuntime = (maxWebWorkers) => {
+    if (!isCornerstoneInitialized())
+        initCornerstone();
+    if (!dicomLoaderInitialized) {
+        const workerManager = getWebWorkerManager();
+        if (!workerManager.workerRegistry[CODEC_WORKER_NAME]) {
+            // Cornerstone's public init() purges the host's global image/metadata
+            // caches. Register only the local-file loader and worker non-destructively.
+            registerDefaultProviders();
+            registerImageLoader('dicomfile', wadouri.loadImageFromNaturalizedMetadata);
+            workerManager.registerWorker(CODEC_WORKER_NAME, () => new Worker(new URL('./decode-worker.js', import.meta.url), { type: 'module' }), { maxWorkerInstances: resolveCodecWorkerCount(maxWebWorkers) });
+        }
+        dicomLoaderInitialized = true;
+    }
+};
+const createElement = (documentRef, tag, className, text) => {
+    const element = documentRef.createElement(tag);
+    if (className)
+        element.className = className;
+    if (text !== undefined)
+        element.textContent = text;
+    return element;
+};
+const createButton = (documentRef, label, text) => {
+    const button = createElement(documentRef, 'button', undefined, text);
+    button.type = 'button';
+    button.title = label;
+    button.setAttribute('aria-label', label);
+    return button;
+};
+const createStyle = (documentRef) => {
+    const style = documentRef.createElement('style');
+    style.textContent = dicomStyle;
+    return style;
+};
+const parseFileManagerIndex = (baseImageId) => {
+    const match = /^dicomfile:(\d+)$/.exec(baseImageId);
+    return match ? Number.parseInt(match[1], 10) : -1;
+};
+const cleanupDicomResources = (baseImageId, imageIds, renderingEngine, viewportId) => {
+    if (renderingEngine && !renderingEngine.hasBeenDestroyed) {
+        try {
+            renderingEngine.disableElement(viewportId);
+        }
+        catch {
+            // The viewport may already be disabled by a host teardown.
+        }
+        renderingEngine.destroy();
+    }
+    for (const imageId of imageIds) {
+        try {
+            if (cache.getImageLoadObject(imageId) || cache.getImage(imageId)) {
+                cache.removeImageLoadObject(imageId, { force: true });
+            }
+        }
+        catch {
+            // A pending load may have removed the entry between the check and decache.
+        }
+        cornerstoneMetadata.clearQuery(MetadataEnums.MetadataModules.NATURALIZED, imageId);
+    }
+    cornerstoneMetadata.clearQuery(MetadataEnums.MetadataModules.NATURALIZED, baseImageId);
+    const fileIndex = parseFileManagerIndex(baseImageId);
+    if (fileIndex >= 0)
+        wadouri.fileManager.remove(fileIndex);
+};
+const makeImageIds = (baseImageId, frameCount) => {
+    return Array.from({ length: frameCount }, (_, index) => `${baseImageId}?frame=${index + 1}`);
+};
+const normalizeZoom = (value) => clamp(Number(value.toFixed(3)), MIN_ZOOM, MAX_ZOOM);
+const safeErrorMessage = (error) => {
+    if (error instanceof Error && error.message)
+        return error.message;
+    return 'Unable to render this DICOM file.';
+};
+export default async function renderDicom(buffer, target, _type, context, options) {
+    var _a, _b, _c, _d, _e;
+    if ((_a = context === null || context === void 0 ? void 0 : context.signal) === null || _a === void 0 ? void 0 : _a.aborted) {
+        throw context.signal.reason || new DOMException('DICOM render aborted.', 'AbortError');
+    }
+    const inspected = inspectDicomPart10(buffer, options === null || options === void 0 ? void 0 : options.limits);
+    const documentRef = target.ownerDocument;
+    const copy = resolveCopy(context);
+    const root = createElement(documentRef, 'div', 'dicom-viewer');
+    Object.assign(root.dataset, {
+        status: 'loading', renderer: 'dicom', rows: String(inspected.rows), columns: String(inspected.columns),
+        frameCount: String(inspected.frameCount), currentFrame: '1', windowWidth: String(inspected.windowWidth),
+        windowCenter: String(inspected.windowCenter), panX: '0', panY: '0', rotation: '0',
+    });
+    const toolbar = createElement(documentRef, 'div', 'dicom-toolbar');
+    const navigation = createElement(documentRef, 'div', 'dicom-tool-group');
+    const previousButton = createButton(documentRef, copy.previous, '‹');
+    const frameMeter = createElement(documentRef, 'span', 'dicom-frame-meter', `1 / ${inspected.frameCount}`);
+    frameMeter.setAttribute('aria-live', 'polite');
+    const nextButton = createButton(documentRef, copy.next, '›');
+    navigation.append(previousButton, frameMeter, nextButton);
+    const zoomTools = createElement(documentRef, 'div', 'dicom-tool-group');
+    const zoomOutButton = createButton(documentRef, copy.zoomOut, '−');
+    const zoomMeter = createElement(documentRef, 'span', 'dicom-zoom-meter', '100%');
+    const zoomInButton = createButton(documentRef, copy.zoomIn, '+');
+    const fitButton = createButton(documentRef, copy.fit, 'Fit');
+    const rotateLeftButton = createButton(documentRef, copy.rotateLeft, '↶');
+    const rotateRightButton = createButton(documentRef, copy.rotateRight, '↷');
+    zoomTools.append(zoomOutButton, zoomMeter, zoomInButton, fitButton, rotateLeftButton, rotateRightButton);
+    const windowControls = createElement(documentRef, 'div', 'dicom-window-controls');
+    const widthLabel = createElement(documentRef, 'label', undefined, 'WW');
+    widthLabel.title = copy.windowWidth;
+    const widthInput = createElement(documentRef, 'input');
+    widthInput.type = 'number';
+    widthInput.min = '1';
+    widthInput.step = '1';
+    widthInput.value = String(Math.round(inspected.windowWidth));
+    widthInput.setAttribute('aria-label', copy.windowWidth);
+    widthLabel.append(widthInput);
+    const centerLabel = createElement(documentRef, 'label', undefined, 'WC');
+    centerLabel.title = copy.windowCenter;
+    const centerInput = createElement(documentRef, 'input');
+    centerInput.type = 'number';
+    centerInput.step = '1';
+    centerInput.value = String(Math.round(inspected.windowCenter));
+    centerInput.setAttribute('aria-label', copy.windowCenter);
+    centerLabel.append(centerInput);
+    windowControls.append(widthLabel, centerLabel);
+    toolbar.append(navigation, zoomTools, windowControls);
+    const body = createElement(documentRef, 'div', 'dicom-body');
+    const stage = createElement(documentRef, 'div', 'dicom-stage');
+    stage.tabIndex = 0;
+    stage.setAttribute('role', 'application');
+    stage.setAttribute('aria-label', 'DICOM image viewport');
+    const metadata = createElement(documentRef, 'div', 'dicom-meta', `${inspected.columns}×${inspected.rows} · ${inspected.frameCount} frame${inspected.frameCount === 1 ? '' : 's'} · ${inspected.modality || 'OT'} · ${inspected.photometricInterpretation || 'unknown'}`);
+    const state = createElement(documentRef, 'div', 'dicom-state', copy.loading);
+    state.setAttribute('role', 'status');
+    body.append(stage, metadata, state);
+    root.append(toolbar, body);
+    target.replaceChildren(createStyle(documentRef), root);
+    let baseImageId = '';
+    let imageIds = [];
+    let renderingEngine = null;
+    let viewport = null;
+    let destroyed = false;
+    let currentFrame = 0;
+    let frameQueue = Promise.resolve();
+    let currentWindowWidth = inspected.windowWidth;
+    let currentWindowCenter = inspected.windowCenter;
+    let currentRotation = 0;
+    let resizeObserver = null;
+    let pointerId = null;
+    let pointerStart = [0, 0];
+    let panStart = [0, 0];
+    const listeners = [];
+    const zoomEmitter = createFileViewerZoomChangeEmitter();
+    const viewStateEmitter = createFileViewerViewStateChangeEmitter();
+    const listen = (element, type, listener, listenerOptions) => {
+        element.addEventListener(type, listener, listenerOptions);
+        listeners.push(() => element.removeEventListener(type, listener, listenerOptions));
+    };
+    const getZoomState = () => {
+        const scale = normalizeZoom((viewport === null || viewport === void 0 ? void 0 : viewport.getZoom()) || 1);
+        return { scale, label: `${Math.round(scale * 100)}%`, canZoomIn: scale < MAX_ZOOM, canZoomOut: scale > MIN_ZOOM, canReset: Math.abs(scale - 1) > 0.001, minScale: MIN_ZOOM, maxScale: MAX_ZOOM };
+    };
+    const syncZoomUi = () => {
+        const zoom = getZoomState();
+        root.dataset.zoom = String(zoom.scale);
+        zoomMeter.textContent = zoom.label;
+        zoomInButton.disabled = !zoom.canZoomIn;
+        zoomOutButton.disabled = !zoom.canZoomOut;
+        zoomEmitter.emit();
+    };
+    const getViewState = () => {
+        const zoom = getZoomState();
+        const pan = (viewport === null || viewport === void 0 ? void 0 : viewport.getPan()) || [0, 0];
+        return { renderer: 'dicom', page: currentFrame + 1, pageCount: inspected.frameCount, scale: zoom.scale, zoom, rotation: currentRotation, extra: { pan: [Number(pan[0].toFixed(3)), Number(pan[1].toFixed(3))], windowCenter: currentWindowCenter, windowWidth: currentWindowWidth } };
+    };
+    const emitViewState = (action, source) => {
+        const next = getViewState();
+        viewStateEmitter.emit(createFileViewerViewStateChange(next, { action, source }));
+        return next;
+    };
+    const setZoom = (value, action = 'zoom-change', source = 'api') => {
+        const next = normalizeZoom(value);
+        viewport === null || viewport === void 0 ? void 0 : viewport.setZoom(next);
+        viewport === null || viewport === void 0 ? void 0 : viewport.render();
+        syncZoomUi();
+        emitViewState(action, source);
+        return getZoomState();
+    };
+    const setRotation = (value, action = 'rotation-change', source = 'api') => {
+        const next = ((Math.round(value / 90) * 90) % 360 + 360) % 360;
+        currentRotation = next;
+        viewport === null || viewport === void 0 ? void 0 : viewport.setRotation(next);
+        viewport === null || viewport === void 0 ? void 0 : viewport.render();
+        root.dataset.rotation = String(next);
+        return emitViewState(action, source);
+    };
+    const fitToView = (request, source = 'api') => {
+        if (!viewport)
+            return { applied: false, mode: (request === null || request === void 0 ? void 0 : request.mode) || 'contain', resize: (request === null || request === void 0 ? void 0 : request.resize) || 'initial', reason: 'not-ready', provider: 'zoom' };
+        viewport.resetCamera({ resetPan: true, resetZoom: true, resetToCenter: true });
+        viewport.setRotation(currentRotation);
+        viewport.render();
+        const pan = viewport.getPan();
+        root.dataset.panX = String(Number(pan[0].toFixed(3)));
+        root.dataset.panY = String(Number(pan[1].toFixed(3)));
+        syncZoomUi();
+        emitViewState('fit', source);
+        return { applied: true, mode: (request === null || request === void 0 ? void 0 : request.mode) || 'contain', resize: (request === null || request === void 0 ? void 0 : request.resize) || 'initial', scale: getZoomState().scale, source, provider: 'zoom', state: getViewState() };
+    };
+    const syncFrameUi = () => {
+        root.dataset.currentFrame = String(currentFrame + 1);
+        frameMeter.textContent = `${currentFrame + 1} / ${inspected.frameCount}`;
+        previousButton.disabled = currentFrame <= 0;
+        nextButton.disabled = currentFrame >= inspected.frameCount - 1;
+    };
+    const setFrame = (frame, source = 'user') => {
+        const requested = clamp(Math.round(frame), 0, inspected.frameCount - 1);
+        frameQueue = frameQueue.then(async () => {
+            if (destroyed || !viewport || requested === currentFrame)
+                return;
+            await viewport.setImageIdIndex(requested);
+            if (destroyed)
+                return;
+            currentFrame = requested;
+            syncFrameUi();
+            viewport.render();
+            emitViewState('page-change', source);
+        });
+        return frameQueue;
+    };
+    const applyWindow = () => {
+        if (!viewport)
+            return;
+        const width = Math.max(1, finiteNumber(widthInput.value, currentWindowWidth));
+        const center = finiteNumber(centerInput.value, currentWindowCenter);
+        currentWindowWidth = width;
+        currentWindowCenter = center;
+        widthInput.value = String(Math.round(width * 1000) / 1000);
+        centerInput.value = String(Math.round(center * 1000) / 1000);
+        root.dataset.windowWidth = String(width);
+        root.dataset.windowCenter = String(center);
+        viewport.setProperties({ voiRange: { lower: center - width / 2, upper: center + width / 2 } });
+        viewport.render();
+        emitViewState('window-change', 'user');
+    };
+    const cleanup = () => {
+        var _a;
+        if (destroyed)
+            return;
+        destroyed = true;
+        (_a = context === null || context === void 0 ? void 0 : context.registerThumbnailAdapter) === null || _a === void 0 ? void 0 : _a.call(context, null);
+        unregisterFileViewerViewStateProvider(root);
+        unregisterFileViewerZoomProvider(root);
+        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        resizeObserver = null;
+        listeners.splice(0).forEach(remove => remove());
+        cleanupDicomResources(baseImageId, imageIds, renderingEngine, viewport ? viewport.id : '');
+        viewport = null;
+        renderingEngine = null;
+        // Cornerstone owns the global codec worker pool. Do not terminate it here:
+        // the host application may have independent Cornerstone viewports.
+        target.replaceChildren();
+    };
+    const abort = () => cleanup();
+    if (context === null || context === void 0 ? void 0 : context.signal) {
+        context.signal.addEventListener('abort', abort, { once: true });
+        listeners.push(() => { var _a; return (_a = context.signal) === null || _a === void 0 ? void 0 : _a.removeEventListener('abort', abort); });
+    }
+    try {
+        ensureDicomRuntime(options === null || options === void 0 ? void 0 : options.maxWebWorkers);
+        const fileName = ((_b = context === null || context === void 0 ? void 0 : context.filename) === null || _b === void 0 ? void 0 : _b.trim()) || 'preview.dcm';
+        baseImageId = wadouri.fileManager.add(new File([buffer], fileName, { type: 'application/dicom' }));
+        imageIds = makeImageIds(baseImageId, inspected.frameCount);
+        root.dataset.dicomImageId = baseImageId;
+        const renderingEngineId = `file-viewer-dicom-engine-${Date.now()}-${++renderingEngineSerial}`;
+        root.dataset.renderingEngineId = renderingEngineId;
+        const viewportId = `${renderingEngineId}-stack`;
+        // A renderer instance owns one stack viewport, so a one-context tiled engine
+        // avoids allocating Cornerstone's multi-context pool for every File Viewer.
+        renderingEngine = new TiledRenderingEngine(renderingEngineId);
+        renderingEngine.enableElement({ element: stage, viewportId, type: Enums.ViewportType.STACK, defaultOptions: { background: [0.015, 0.025, 0.045] } });
+        viewport = renderingEngine.getViewport(viewportId);
+        await viewport.setStack(imageIds, 0);
+        if (destroyed || ((_c = context === null || context === void 0 ? void 0 : context.signal) === null || _c === void 0 ? void 0 : _c.aborted))
+            throw ((_d = context === null || context === void 0 ? void 0 : context.signal) === null || _d === void 0 ? void 0 : _d.reason) || new DOMException('DICOM render aborted.', 'AbortError');
+        viewport.setProperties({ voiRange: { lower: currentWindowCenter - currentWindowWidth / 2, upper: currentWindowCenter + currentWindowWidth / 2 } });
+        viewport.resetCamera({ resetPan: true, resetZoom: true, resetToCenter: true });
+        viewport.render();
+        registerFileViewerZoomProvider(root, {
+            zoomIn: () => setZoom(getZoomState().scale * 1.2, 'zoom-in', 'api'),
+            zoomOut: () => setZoom(getZoomState().scale / 1.2, 'zoom-out', 'api'),
+            resetZoom: () => { fitToView(undefined, 'api'); return getZoomState(); },
+            setZoom: value => setZoom(value, 'zoom-change', 'api'),
+            fit: request => fitToView(request, request.source), getState: getZoomState, subscribe: zoomEmitter.subscribe,
+        });
+        registerFileViewerViewStateProvider(root, {
+            getState: getViewState,
+            async applyState(nextState, applyOptions = {}) {
+                var _a, _b;
+                const source = applyOptions.source || 'api';
+                if (Number.isFinite(nextState.page))
+                    await setFrame(Number(nextState.page) - 1, source);
+                const nextScale = Number((_a = nextState.scale) !== null && _a !== void 0 ? _a : (_b = nextState.zoom) === null || _b === void 0 ? void 0 : _b.scale);
+                if (Number.isFinite(nextScale))
+                    setZoom(nextScale, 'zoom-change', source);
+                if (Number.isFinite(nextState.rotation))
+                    setRotation(Number(nextState.rotation), 'rotation-change', source);
+                const extra = nextState.extra || {};
+                const nextWidth = finiteNumber(extra.windowWidth, Number.NaN);
+                const nextCenter = finiteNumber(extra.windowCenter, Number.NaN);
+                if (Number.isFinite(nextWidth) && Number.isFinite(nextCenter)) {
+                    widthInput.value = String(nextWidth);
+                    centerInput.value = String(nextCenter);
+                    applyWindow();
+                }
+                const nextPan = Array.isArray(extra.pan) ? extra.pan : [];
+                if (nextPan.length >= 2 && Number.isFinite(nextPan[0]) && Number.isFinite(nextPan[1])) {
+                    viewport === null || viewport === void 0 ? void 0 : viewport.setPan([Number(nextPan[0]), Number(nextPan[1])]);
+                    viewport === null || viewport === void 0 ? void 0 : viewport.render();
+                    root.dataset.panX = String(Number(nextPan[0]));
+                    root.dataset.panY = String(Number(nextPan[1]));
+                }
+                const action = applyOptions.action || 'restore';
+                return applyOptions.notify === false ? getViewState() : emitViewState(action, source);
+            },
+            fit: request => fitToView(request, request.source), subscribe: viewStateEmitter.subscribe,
+        });
+        listen(previousButton, 'click', () => void setFrame(currentFrame - 1));
+        listen(nextButton, 'click', () => void setFrame(currentFrame + 1));
+        listen(zoomOutButton, 'click', () => setZoom(getZoomState().scale / 1.2, 'zoom-out', 'user'));
+        listen(zoomInButton, 'click', () => setZoom(getZoomState().scale * 1.2, 'zoom-in', 'user'));
+        listen(fitButton, 'click', () => fitToView(undefined, 'user'));
+        listen(rotateLeftButton, 'click', () => setRotation(currentRotation - 90, 'rotate-left', 'user'));
+        listen(rotateRightButton, 'click', () => setRotation(currentRotation + 90, 'rotate-right', 'user'));
+        listen(widthInput, 'change', applyWindow);
+        listen(centerInput, 'change', applyWindow);
+        listen(stage, 'wheel', event => {
+            event.preventDefault();
+            if (event.ctrlKey || event.metaKey || inspected.frameCount === 1) {
+                setZoom(getZoomState().scale * (event.deltaY < 0 ? 1.12 : 1 / 1.12), 'zoom-change', 'user');
+            }
+            else
+                void setFrame(currentFrame + (event.deltaY > 0 ? 1 : -1));
+        }, { passive: false });
+        listen(stage, 'keydown', event => {
+            if (event.key === 'ArrowLeft' || event.key === 'ArrowUp' || event.key === 'PageUp') {
+                event.preventDefault();
+                void setFrame(currentFrame - 1);
+            }
+            else if (event.key === 'ArrowRight' || event.key === 'ArrowDown' || event.key === 'PageDown') {
+                event.preventDefault();
+                void setFrame(currentFrame + 1);
+            }
+            else if (event.key === '+' || event.key === '=') {
+                event.preventDefault();
+                setZoom(getZoomState().scale * 1.2, 'zoom-in', 'user');
+            }
+            else if (event.key === '-') {
+                event.preventDefault();
+                setZoom(getZoomState().scale / 1.2, 'zoom-out', 'user');
+            }
+            else if (event.key === '0' || event.key === 'Home') {
+                event.preventDefault();
+                fitToView(undefined, 'user');
+            }
+            else if (event.key === '[' || (event.key.toLowerCase() === 'r' && event.shiftKey)) {
+                event.preventDefault();
+                setRotation(currentRotation - 90, 'rotate-left', 'user');
+            }
+            else if (event.key === ']' || event.key.toLowerCase() === 'r') {
+                event.preventDefault();
+                setRotation(currentRotation + 90, 'rotate-right', 'user');
+            }
+        });
+        listen(stage, 'pointerdown', event => {
+            if (event.button !== 0 || !viewport)
+                return;
+            pointerId = event.pointerId;
+            pointerStart = [event.clientX, event.clientY];
+            const pan = viewport.getPan();
+            panStart = [pan[0], pan[1]];
+            stage.setPointerCapture(event.pointerId);
+            stage.classList.add('is-panning');
+            stage.focus({ preventScroll: true });
+        });
+        listen(stage, 'pointermove', event => {
+            if (pointerId !== event.pointerId || !viewport)
+                return;
+            const nextPan = [panStart[0] + event.clientX - pointerStart[0], panStart[1] + event.clientY - pointerStart[1]];
+            viewport.setPan(nextPan);
+            viewport.render();
+            root.dataset.panX = String(Number(nextPan[0].toFixed(3)));
+            root.dataset.panY = String(Number(nextPan[1].toFixed(3)));
+        });
+        const endPointer = (event) => {
+            if (pointerId !== event.pointerId)
+                return;
+            if (stage.hasPointerCapture(event.pointerId))
+                stage.releasePointerCapture(event.pointerId);
+            pointerId = null;
+            stage.classList.remove('is-panning');
+            emitViewState('pan-change', 'user');
+        };
+        listen(stage, 'pointerup', endPointer);
+        listen(stage, 'pointercancel', endPointer);
+        const ResizeObserverConstructor = (_e = documentRef.defaultView) === null || _e === void 0 ? void 0 : _e.ResizeObserver;
+        if (ResizeObserverConstructor) {
+            resizeObserver = new ResizeObserverConstructor(() => {
+                if (!destroyed && renderingEngine && !renderingEngine.hasBeenDestroyed)
+                    renderingEngine.resize(true, true);
+            });
+            resizeObserver.observe(body);
+        }
+        previousButton.disabled = true;
+        nextButton.disabled = inspected.frameCount <= 1;
+        root.dataset.status = 'ready';
+        state.hidden = true;
+        syncFrameUi();
+        syncZoomUi();
+        emitViewState('init', 'viewer');
+    }
+    catch (error) {
+        if (!destroyed) {
+            root.dataset.status = 'error';
+            state.hidden = false;
+            state.classList.add('error');
+            state.textContent = safeErrorMessage(error);
+        }
+        cleanup();
+        // An abort can destroy the viewport while its initial worker request is
+        // settling. Purge the owner-scoped cache a second time after setStack has
+        // rejected/resolved so late metadata cannot survive the failed session.
+        cleanupDicomResources(baseImageId, imageIds, null, '');
+        throw error;
+    }
+    return { $el: root, destroy: cleanup };
+}

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import type { FileRenderHandler, FileViewerRenderedInstance, FileViewerRendererPlugin, RendererDefinition } from '@file-viewer/core';
+export interface FileViewerDicomLimits {
+    /** Maximum encoded Part 10 file size. Defaults to 64 MiB. */
+    maxSourceBytes?: number;
+    /** Maximum number of frames exposed by one file. Defaults to 256. */
+    maxFrames?: number;
+    /** Maximum decoded samples in one frame. Defaults to 16 million. */
+    maxFramePixels?: number;
+    /** Maximum decoded samples addressable by one file. Defaults to 48 million. */
+    maxTotalPixels?: number;
+}
+export interface FileViewerDicomRendererOptions {
+    limits?: FileViewerDicomLimits;
+    /** Number of codec workers initialized after a DICOM file is selected. Defaults to at most 2. */
+    maxWebWorkers?: number;
+}
+export declare const dicomRendererDefinition: RendererDefinition;
+export declare const renderFileViewerDicom: FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>;
+export declare const createDicomRenderer: (options?: FileViewerDicomRendererOptions) => FileViewerRendererPlugin<FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>>;
+export declare const dicomRenderer: FileViewerRendererPlugin<FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>>;
+export default dicomRenderer;

package/dist/index.js

@@ -0,0 +1,34 @@
+export const dicomRendererDefinition = {
+    id: 'dicom',
+    label: 'DICOM medical image',
+    category: 'image',
+    extensions: ['dcm', 'dicom'],
+    async: true,
+    supportLevel: 'basic',
+    status: 'experimental',
+    packageName: '@file-viewer/renderer-dicom',
+    presets: [],
+    knownLimits: [
+        'This MVP is tested with Implicit/Explicit VR Little Endian, JPEG Lossless Process 14 SV1, JPEG-LS Lossless, and JPEG 2000 Lossless Part 10 files; other transfer syntaxes and DICOMweb are not included.',
+        'The MVP renders one single-frame or multi-frame local file as a stack; series assembly, PACS/DICOMweb, MPR, and diagnostic use are not included.',
+    ],
+    capabilities: {
+        download: true,
+        print: false,
+        exportHtml: false,
+        zoom: true,
+    },
+};
+const createHandler = (options) => (buffer, target, type, context) => import('./dicom.js').then(({ default: renderDicom }) => (renderDicom(buffer, target, type, context, options)));
+export const renderFileViewerDicom = createHandler();
+export const createDicomRenderer = (options) => ({
+    id: 'file-viewer-renderer-dicom',
+    label: 'Flyfish File Viewer opt-in DICOM renderer',
+    definitions: [dicomRendererDefinition],
+    handlers: [{
+            rendererId: dicomRendererDefinition.id,
+            handler: options ? createHandler(options) : renderFileViewerDicom,
+        }],
+});
+export const dicomRenderer = createDicomRenderer();
+export default dicomRenderer;

package/dist/inspect.d.ts

@@ -0,0 +1,17 @@
+import type { FileViewerDicomLimits } from './index.js';
+export declare const DEFAULT_DICOM_LIMITS: Readonly<Required<FileViewerDicomLimits>>;
+/** Transfer syntaxes accepted by this tested MVP (intentionally narrower than the loader). */
+export declare const SUPPORTED_DICOM_TRANSFER_SYNTAXES: Set<string>;
+export interface InspectedDicomPart10 {
+    bitsAllocated: number;
+    columns: number;
+    frameCount: number;
+    modality: string;
+    photometricInterpretation: string;
+    rows: number;
+    samplesPerPixel: number;
+    transferSyntax: string;
+    windowCenter: number;
+    windowWidth: number;
+}
+export declare const inspectDicomPart10: (buffer: ArrayBuffer, limitsInput?: FileViewerDicomLimits) => InspectedDicomPart10;