From baaaecdebb9510bbca3e5ae0b31ede8c49526b19 Mon Sep 17 00:00:00 2001 From: Forrest Date: Thu, 19 Oct 2023 10:01:46 -0400 Subject: [PATCH 1/5] POC of offscreen canvas --- src/components/VtkThreeView.vue | 46 ++++++++++++++++++++++++++++----- src/components/VtkTwoView.vue | 44 ++++++++++++++++++++++++++----- src/composables/useViewProxy.ts | 4 ++- src/vtk/LPSView3DProxy/index.js | 12 ++++++++- 4 files changed, 92 insertions(+), 14 deletions(-) diff --git a/src/components/VtkThreeView.vue b/src/components/VtkThreeView.vue index 1e7d17f01..d12911b4d 100644 --- a/src/components/VtkThreeView.vue +++ b/src/components/VtkThreeView.vue @@ -6,7 +6,9 @@ class="vtk-view" ref="vtkContainerRef" data-testid="vtk-view vtk-three-view" - /> + > + +
@@ -77,6 +79,7 @@ import type { Vector3 } from '@kitware/vtk.js/types'; import { useProxyManager } from '@/src/composables/proxyManager'; import ViewOverlayGrid from '@/src/components/ViewOverlayGrid.vue'; +import { onVTKEvent } from '@/src/composables/onVTKEvent'; import { useResizeObserver } from '../composables/useResizeObserver'; import { useCurrentImage } from '../composables/useCurrentImage'; import { useCameraOrientation } from '../composables/useCameraOrientation'; @@ -427,22 +430,47 @@ export default defineComponent({ // --- view proxy setup --- // - const { viewProxy, setContainer: setViewProxyContainer } = - useViewProxy(viewID, ViewProxyType.Volume); + const { viewProxy } = useViewProxy( + viewID, + ViewProxyType.Volume + ); + + const canvasRef = ref(null); + + const interactor = computed(() => viewProxy.value.getInteractor()); + onVTKEvent(interactor, 'onRenderEvent', () => { + if (!canvasRef.value) return; + const ctx = canvasRef.value.getContext('2d'); + const src = viewProxy.value.getOpenGLRenderWindow().getCanvas(); + if (ctx && src) ctx.drawImage(src, 0, 0); + if (src) console.log(src.width, src.height); + }); onMounted(() => { viewProxy.value.setOrientationAxesVisibility(true); viewProxy.value.setOrientationAxesType('cube'); viewProxy.value.setBackground([0, 0, 0, 0]); - setViewProxyContainer(vtkContainerRef.value); + // setViewProxyContainer(vtkContainerRef.value); }); onBeforeUnmount(() => { - setViewProxyContainer(null); + // setViewProxyContainer(null); viewProxy.value.setContainer(null); }); - useResizeObserver(vtkContainerRef, () => viewProxy.value.resize()); + useResizeObserver(vtkContainerRef, (entry) => { + const bbox = entry.contentRect; + canvasRef.value?.setAttribute( + 'width', + String(bbox.width * window.devicePixelRatio) + ); + canvasRef.value?.setAttribute( + 'height', + String(bbox.height * window.devicePixelRatio) + ); + + viewProxy.value.setSize(bbox.width, bbox.height); + }); // --- scene setup --- // @@ -606,6 +634,7 @@ export default defineComponent({ return { vtkContainerRef, + canvasRef, viewID, active: false, topLeftLabel: computed( @@ -628,4 +657,9 @@ export default defineComponent({ background-color: black; grid-template-columns: auto; } + +.ccc { + width: 100%; + height: 100%; +} diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue index 542f9dc05..cfd69e2d8 100644 --- a/src/components/VtkTwoView.vue +++ b/src/components/VtkTwoView.vue @@ -38,7 +38,9 @@ class="vtk-view" ref="vtkContainerRef" data-testid="vtk-view vtk-two-view" - /> + > + +
@@ -208,6 +210,7 @@ import { useToolSelectionStore } from '@/src/store/tools/toolSelection'; import { useAnnotationToolStore } from '@/src/store/tools'; import { doesToolFrameMatchViewAxis } from '@/src/composables/annotationTool'; import type { TypedArray } from '@kitware/vtk.js/types'; +import { onVTKEvent } from '@/src/composables/onVTKEvent'; import { useResizeObserver } from '../composables/useResizeObserver'; import { useOrientationLabels } from '../composables/useOrientationLabels'; import { getLPSAxisFromDir } from '../utils/lps'; @@ -397,8 +400,20 @@ export default defineComponent({ // --- view proxy setup --- // - const { viewProxy, setContainer: setViewProxyContainer } = - useViewProxy(viewID, ViewProxyType.Slice); + const { viewProxy } = useViewProxy( + viewID, + ViewProxyType.Slice + ); + + const canvasRef = ref(null); + + const interactor = computed(() => viewProxy.value.getInteractor()); + onVTKEvent(interactor, 'onRenderEvent', () => { + if (!canvasRef.value) return; + const ctx = canvasRef.value.getContext('2d'); + const src = viewProxy.value.getOpenGLRenderWindow().getCanvas(); + if (ctx && src) ctx.drawImage(src, 0, 0); + }); onBeforeMount(() => { // do this before mount, as the ManipulatorTools run onMounted @@ -407,12 +422,12 @@ export default defineComponent({ }); onMounted(() => { - setViewProxyContainer(vtkContainerRef.value); + // setViewProxyContainer(vtkContainerRef.value); viewProxy.value.setOrientationAxesVisibility(false); }); onBeforeUnmount(() => { - setViewProxyContainer(null); + // setViewProxyContainer(null); }); // --- Slicing setup --- // @@ -457,7 +472,19 @@ export default defineComponent({ // --- resizing --- // - useResizeObserver(vtkContainerRef, () => viewProxy.value.resize()); + useResizeObserver(vtkContainerRef, (entry) => { + const bbox = entry.contentRect; + canvasRef.value?.setAttribute( + 'width', + String(bbox.width * window.devicePixelRatio) + ); + canvasRef.value?.setAttribute( + 'height', + String(bbox.height * window.devicePixelRatio) + ); + + viewProxy.value.setSize(bbox.width, bbox.height); + }); // Used by SVG tool widgets for resizeCallback const toolContainer = ref(); @@ -877,6 +904,7 @@ export default defineComponent({ return { vtkContainerRef, + canvasRef, toolContainer, viewID, viewProxy, @@ -911,4 +939,8 @@ export default defineComponent({ height: 32px; cursor: pointer; } +.ccc { + width: 100%; + height: 100%; +} diff --git a/src/composables/useViewProxy.ts b/src/composables/useViewProxy.ts index e2a85ce5f..98af5cf5c 100644 --- a/src/composables/useViewProxy.ts +++ b/src/composables/useViewProxy.ts @@ -23,7 +23,9 @@ export function useViewProxy( ); watch(viewProxy, (curViewProxy, oldViewProxy) => { - oldViewProxy.setContainer(null); + if (oldViewProxy !== curViewProxy) { + oldViewProxy.setContainer(null); + } curViewProxy.setContainer(container.value); }); diff --git a/src/vtk/LPSView3DProxy/index.js b/src/vtk/LPSView3DProxy/index.js index 879185fb6..82adb6d88 100644 --- a/src/vtk/LPSView3DProxy/index.js +++ b/src/vtk/LPSView3DProxy/index.js @@ -4,11 +4,12 @@ import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy'; export function commonViewCustomizations(publicAPI, model) { const delayedRender = macro.debounce(model.renderWindow.render, 5); + model.size = { width: 0, height: 0 }; // override resize to avoid flickering from rendering later publicAPI.resize = () => { if (model.container) { - const dims = model.container.getBoundingClientRect(); + const dims = model.size; if (dims.width === dims.height && dims.width === 0) { return; } @@ -68,6 +69,15 @@ export function commonViewCustomizations(publicAPI, model) { resetCamera(args); model.renderer.updateLightsGeometryToFollowCamera(); }; + + publicAPI.setSize = (width, height) => { + model.size = { width, height }; + publicAPI.resize(); + }; + + // initialize + + publicAPI.setContainer(document.createElement('div')); } function vtkLPSView3DProxy(publicAPI, model) { From 3252b0bebd620c4f053e2f652b6152b68458f2f1 Mon Sep 17 00:00:00 2001 From: Forrest Date: Fri, 10 Nov 2023 16:47:31 -0500 Subject: [PATCH 2/5] Add offscreen render window interactor --- src/components/VtkThreeView.vue | 2 - src/components/VtkTwoView.vue | 1 + src/vtk/LPSView2DProxy/index.d.ts | 8 +- src/vtk/LPSView3DProxy/index.d.ts | 9 +- src/vtk/LPSView3DProxy/index.js | 42 +++++++- .../index.ts | 95 +++++++++++++++++++ 6 files changed, 148 insertions(+), 9 deletions(-) create mode 100644 src/vtk/vtkOffscreenRenderWindowInteractor/index.ts diff --git a/src/components/VtkThreeView.vue b/src/components/VtkThreeView.vue index d12911b4d..c304fcd9f 100644 --- a/src/components/VtkThreeView.vue +++ b/src/components/VtkThreeView.vue @@ -443,7 +443,6 @@ export default defineComponent({ const ctx = canvasRef.value.getContext('2d'); const src = viewProxy.value.getOpenGLRenderWindow().getCanvas(); if (ctx && src) ctx.drawImage(src, 0, 0); - if (src) console.log(src.width, src.height); }); onMounted(() => { @@ -455,7 +454,6 @@ export default defineComponent({ onBeforeUnmount(() => { // setViewProxyContainer(null); - viewProxy.value.setContainer(null); }); useResizeObserver(vtkContainerRef, (entry) => { diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue index cfd69e2d8..489f70b1f 100644 --- a/src/components/VtkTwoView.vue +++ b/src/components/VtkTwoView.vue @@ -423,6 +423,7 @@ export default defineComponent({ onMounted(() => { // setViewProxyContainer(vtkContainerRef.value); + viewProxy.value.setInteractionContainer(canvasRef.value); viewProxy.value.setOrientationAxesVisibility(false); }); diff --git a/src/vtk/LPSView2DProxy/index.d.ts b/src/vtk/LPSView2DProxy/index.d.ts index a3d0d6e11..402acd2c3 100644 --- a/src/vtk/LPSView2DProxy/index.d.ts +++ b/src/vtk/LPSView2DProxy/index.d.ts @@ -1,8 +1,12 @@ import { vec3 } from 'gl-matrix'; import { vtkView2DProxy } from '@kitware/vtk.js/Proxy/Core/View2DProxy'; -import { ViewProxyCustomizations } from '@/src/vtk/LPSView3DProxy'; +import vtkLPSView3DProxy, { + ViewProxyCustomizations, +} from '@/src/vtk/LPSView3DProxy'; -export interface vtkLPSView2DProxy extends vtkView2DProxy { +export interface vtkLPSView2DProxy + extends vtkView2DProxy, + ViewProxyCustomizations { resizeToFit(lookAxis: Vector3, viewUpAxis: Vector3, worldDims: Vector3); resetCamera(boundsToUse?: number[]); /** diff --git a/src/vtk/LPSView3DProxy/index.d.ts b/src/vtk/LPSView3DProxy/index.d.ts index dee06dd6b..6eea544b4 100644 --- a/src/vtk/LPSView3DProxy/index.d.ts +++ b/src/vtk/LPSView3DProxy/index.d.ts @@ -1,14 +1,21 @@ import { vec3 } from 'gl-matrix'; import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy'; import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator'; +import { Maybe } from '@/src/types'; -export interface vtkLPSView3DProxy extends vtkViewProxy { +export interface ViewProxyCustomizations { removeAllRepresentations(): void; updateCamera(directionOfProjection: vec3, viewUp: vec3, focalPoint: vec3); getInteractorStyle2D(): vtkInteractorStyleManipulator; getInteractorStyle3D(): vtkInteractorStyleManipulator; + setInteractionContainer(el: Maybe): boolean; + getInteractionContainer(): Maybe; } +export interface vtkLPSView3DProxy + extends vtkViewProxy, + ViewProxyCustomizations {} + export function commonViewCustomizations(publicAPI: any, model: any): void; // TODO extend, newInstance... diff --git a/src/vtk/LPSView3DProxy/index.js b/src/vtk/LPSView3DProxy/index.js index 82adb6d88..d39ba0b55 100644 --- a/src/vtk/LPSView3DProxy/index.js +++ b/src/vtk/LPSView3DProxy/index.js @@ -1,15 +1,33 @@ import { vec3 } from 'gl-matrix'; import macro from '@kitware/vtk.js/macro'; import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy'; +import vtkOffscreenRenderWindowInteractor from '@/src/vtk/vtkOffscreenRenderWindowInteractor'; + +export function replaceInteractor(publicAPI, model) { + // prep to remove the old interactor + const style = model.interactor.getInteractorStyle(); + const orientationWidgetEnabled = model.orientationWidget.getEnabled(); + model.orientationWidget.setEnabled(false); + + // delete the old interactor in favor of the new one + model.interactor.delete(); + + model.interactor = vtkOffscreenRenderWindowInteractor.newInstance(); + model.interactor.setView(model._openGLRenderWindow); + model.interactor.setInteractorStyle(style); + model.orientationWidget.setInteractor(model.interactor); + model.orientationWidget.setEnabled(orientationWidgetEnabled); +} export function commonViewCustomizations(publicAPI, model) { const delayedRender = macro.debounce(model.renderWindow.render, 5); - model.size = { width: 0, height: 0 }; + + replaceInteractor(publicAPI, model); // override resize to avoid flickering from rendering later publicAPI.resize = () => { if (model.container) { - const dims = model.size; + const dims = model.container.getBoundingClientRect(); if (dims.width === dims.height && dims.width === 0) { return; } @@ -71,13 +89,29 @@ export function commonViewCustomizations(publicAPI, model) { }; publicAPI.setSize = (width, height) => { - model.size = { width, height }; + const container = publicAPI.getContainer(); + if (!container) throw new Error('No container'); + container.style.width = `${width}px`; + container.style.height = `${height}px`; publicAPI.resize(); }; + publicAPI.setInteractionContainer = (el) => { + return model.interactor.setInteractionContainer(el); + }; + + publicAPI.getInteractionContainer = () => { + return model.interactor.getInteractionContainer(); + }; + // initialize - publicAPI.setContainer(document.createElement('div')); + const container = document.createElement('div'); + container.style.display = 'block'; + container.style.visibility = 'hidden'; + container.style.position = 'absolute'; + document.body.appendChild(container); + publicAPI.setContainer(container); } function vtkLPSView3DProxy(publicAPI, model) { diff --git a/src/vtk/vtkOffscreenRenderWindowInteractor/index.ts b/src/vtk/vtkOffscreenRenderWindowInteractor/index.ts new file mode 100644 index 000000000..be27fd1c5 --- /dev/null +++ b/src/vtk/vtkOffscreenRenderWindowInteractor/index.ts @@ -0,0 +1,95 @@ +import { Maybe } from '@/src/types'; +import * as macros from '@kitware/vtk.js/macros'; +import vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor'; + +export interface vtkOffscreenRenderWindowInteractor + extends vtkRenderWindowInteractor { + bindInteractionContainer(): void; + unbindInteractionContainer(): void; + setInteractionContainer(el: Maybe): boolean; + getInteractionContainer(): Maybe; +} + +interface Model { + interactor: vtkRenderWindowInteractor; + interactionContainer: Maybe; + [prop: string]: any; +} + +function replaceGetScreenEventPositionFor( + publicAPI: vtkOffscreenRenderWindowInteractor, + model: Model +) { + function updateCurrentRenderer(x: number, y: number) { + if (!model._forcedRenderer) { + model.currentRenderer = publicAPI.findPokedRenderer(x, y); + } + } + + function getScreenEventPositionFor(source: PointerEvent) { + if (!model.interactionContainer) + throw new Error('Interaction container is not set!'); + + const canvas = model._view.getCanvas(); + const bounds = model.interactionContainer.getBoundingClientRect(); + const scaleX = canvas.width / bounds.width; + const scaleY = canvas.height / bounds.height; + const position = { + x: scaleX * (source.clientX - bounds.left), + y: scaleY * (bounds.height - source.clientY + bounds.top), + z: 0, + }; + + updateCurrentRenderer(position.x, position.y); + return position; + } + + model._getScreenEventPositionFor = getScreenEventPositionFor; +} + +function vtkOffscreenRenderWindowInteractor( + publicAPI: vtkOffscreenRenderWindowInteractor, + model: Model +) { + const { setInteractionContainer } = publicAPI; + + publicAPI.setInteractionContainer = (el: Maybe) => { + if (model.container) { + publicAPI.unbindEvents(); + } + + const changed = setInteractionContainer(el); + + if (el) { + publicAPI.bindEvents(el); + } + + return changed; + }; +} + +export function extend( + publicAPI: vtkOffscreenRenderWindowInteractor, + model: Model, + initialValues = {} +) { + // should happen before extending the RenderWindowInteractor + replaceGetScreenEventPositionFor(publicAPI, model); + + vtkRenderWindowInteractor.extend(publicAPI, model, initialValues); + + macros.setGet(publicAPI, model, ['interactionContainer']); + + vtkOffscreenRenderWindowInteractor( + publicAPI as vtkOffscreenRenderWindowInteractor, + model as Model + ); +} + +export const newInstance = macros.newInstance( + // @ts-ignore TODO fix this typing issue + extend, + 'vtkOffscreenRenderWindowInteractor' +); + +export default { newInstance, extend }; From 4cf689bc4226e49365791b426036bdffa5d14f6a Mon Sep 17 00:00:00 2001 From: Forrest Date: Fri, 10 Nov 2023 17:13:33 -0500 Subject: [PATCH 3/5] Attempt to avoid resizeobserver errors Separating the interaction container and the rendering container currently results in one resizeobserver (on the interaction el) to trigger a resize on the rendering el, but then that in turn triggers rendering el resize listeners (nested resizeobserver). setTimeout in resize() is a workaround. --- src/components/VtkThreeView.vue | 3 +++ src/components/VtkTwoView.vue | 2 ++ src/composables/useViewProxy.ts | 17 +++++------------ src/vtk/LPSView3DProxy/index.js | 8 +++++--- 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/VtkThreeView.vue b/src/components/VtkThreeView.vue index c304fcd9f..4854682e7 100644 --- a/src/components/VtkThreeView.vue +++ b/src/components/VtkThreeView.vue @@ -449,6 +449,7 @@ export default defineComponent({ viewProxy.value.setOrientationAxesVisibility(true); viewProxy.value.setOrientationAxesType('cube'); viewProxy.value.setBackground([0, 0, 0, 0]); + viewProxy.value.setInteractionContainer(canvasRef.value); // setViewProxyContainer(vtkContainerRef.value); }); @@ -458,6 +459,8 @@ export default defineComponent({ useResizeObserver(vtkContainerRef, (entry) => { const bbox = entry.contentRect; + if (!bbox.width || !bbox.height) return; + canvasRef.value?.setAttribute( 'width', String(bbox.width * window.devicePixelRatio) diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue index 489f70b1f..e8bc9f471 100644 --- a/src/components/VtkTwoView.vue +++ b/src/components/VtkTwoView.vue @@ -475,6 +475,8 @@ export default defineComponent({ useResizeObserver(vtkContainerRef, (entry) => { const bbox = entry.contentRect; + if (!bbox.width || !bbox.height) return; + canvasRef.value?.setAttribute( 'width', String(bbox.width * window.devicePixelRatio) diff --git a/src/composables/useViewProxy.ts b/src/composables/useViewProxy.ts index 98af5cf5c..dd9413cae 100644 --- a/src/composables/useViewProxy.ts +++ b/src/composables/useViewProxy.ts @@ -1,6 +1,6 @@ import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy'; -import { computed, onUnmounted, ref, unref, watch, watchEffect } from 'vue'; -import { MaybeRef, useElementSize } from '@vueuse/core'; +import { computed, onUnmounted, ref, unref, watch } from 'vue'; +import { MaybeRef } from '@vueuse/core'; import { onVTKEvent } from '@/src/composables/onVTKEvent'; import { Maybe } from '@/src/types'; import { ViewProxyType } from '../core/proxies'; @@ -44,21 +44,14 @@ export function useViewProxy( function useMountedViewProxy( viewProxy: MaybeRef> ) { - const mounted = ref(false); - const container = ref>(unref(viewProxy)?.getContainer()); onVTKEvent(viewProxy, 'onModified', () => { container.value = unref(viewProxy)?.getContainer(); }); - const { width, height } = useElementSize(container); - - const updateMounted = () => { - // view is considered mounted when the container has a non-zero size - mounted.value = !!(width.value && height.value); - }; - - watchEffect(() => updateMounted()); + const mounted = computed(() => { + return !!container.value; + }); return mounted; } diff --git a/src/vtk/LPSView3DProxy/index.js b/src/vtk/LPSView3DProxy/index.js index d39ba0b55..5e53da7ae 100644 --- a/src/vtk/LPSView3DProxy/index.js +++ b/src/vtk/LPSView3DProxy/index.js @@ -91,9 +91,11 @@ export function commonViewCustomizations(publicAPI, model) { publicAPI.setSize = (width, height) => { const container = publicAPI.getContainer(); if (!container) throw new Error('No container'); - container.style.width = `${width}px`; - container.style.height = `${height}px`; - publicAPI.resize(); + setTimeout(() => { + container.style.width = `${width}px`; + container.style.height = `${height}px`; + publicAPI.resize(); + }, 0); }; publicAPI.setInteractionContainer = (el) => { From dee193469ffaec424c9fd3288e8578c8e80d46e6 Mon Sep 17 00:00:00 2001 From: Forrest Date: Fri, 10 Nov 2023 17:25:58 -0500 Subject: [PATCH 4/5] clear rect --- src/components/VtkThreeView.vue | 5 ++++- src/components/VtkTwoView.vue | 5 ++++- src/vtk/vtkOffscreenRenderWindowInteractor/index.ts | 2 ++ 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/VtkThreeView.vue b/src/components/VtkThreeView.vue index 4854682e7..8ca298b75 100644 --- a/src/components/VtkThreeView.vue +++ b/src/components/VtkThreeView.vue @@ -442,7 +442,10 @@ export default defineComponent({ if (!canvasRef.value) return; const ctx = canvasRef.value.getContext('2d'); const src = viewProxy.value.getOpenGLRenderWindow().getCanvas(); - if (ctx && src) ctx.drawImage(src, 0, 0); + if (ctx && src) { + ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height); + ctx.drawImage(src, 0, 0); + } }); onMounted(() => { diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue index e8bc9f471..85edb4c56 100644 --- a/src/components/VtkTwoView.vue +++ b/src/components/VtkTwoView.vue @@ -412,7 +412,10 @@ export default defineComponent({ if (!canvasRef.value) return; const ctx = canvasRef.value.getContext('2d'); const src = viewProxy.value.getOpenGLRenderWindow().getCanvas(); - if (ctx && src) ctx.drawImage(src, 0, 0); + if (ctx && src) { + ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height); + ctx.drawImage(src, 0, 0); + } }); onBeforeMount(() => { diff --git a/src/vtk/vtkOffscreenRenderWindowInteractor/index.ts b/src/vtk/vtkOffscreenRenderWindowInteractor/index.ts index be27fd1c5..be38fe8ed 100644 --- a/src/vtk/vtkOffscreenRenderWindowInteractor/index.ts +++ b/src/vtk/vtkOffscreenRenderWindowInteractor/index.ts @@ -51,6 +51,8 @@ function vtkOffscreenRenderWindowInteractor( publicAPI: vtkOffscreenRenderWindowInteractor, model: Model ) { + model.classHierarchy.push('vtkOffscreenRenderWindowInteractor'); + const { setInteractionContainer } = publicAPI; publicAPI.setInteractionContainer = (el: Maybe) => { From 8831e01b0cfb6c16922c4b81080638474a5f12d0 Mon Sep 17 00:00:00 2001 From: Forrest Date: Fri, 10 Nov 2023 17:32:38 -0500 Subject: [PATCH 5/5] Hacks to fix typing --- src/components/VtkThreeView.vue | 2 +- src/components/VtkTwoView.vue | 2 +- src/vtk/LPSView3DProxy/index.d.ts | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/VtkThreeView.vue b/src/components/VtkThreeView.vue index 8ca298b75..7e7ab3298 100644 --- a/src/components/VtkThreeView.vue +++ b/src/components/VtkThreeView.vue @@ -438,7 +438,7 @@ export default defineComponent({ const canvasRef = ref(null); const interactor = computed(() => viewProxy.value.getInteractor()); - onVTKEvent(interactor, 'onRenderEvent', () => { + onVTKEvent(interactor, 'onRenderEvent' as 'onModified', () => { if (!canvasRef.value) return; const ctx = canvasRef.value.getContext('2d'); const src = viewProxy.value.getOpenGLRenderWindow().getCanvas(); diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue index 85edb4c56..8a5b6e701 100644 --- a/src/components/VtkTwoView.vue +++ b/src/components/VtkTwoView.vue @@ -408,7 +408,7 @@ export default defineComponent({ const canvasRef = ref(null); const interactor = computed(() => viewProxy.value.getInteractor()); - onVTKEvent(interactor, 'onRenderEvent', () => { + onVTKEvent(interactor, 'onRenderEvent' as 'onModified', () => { if (!canvasRef.value) return; const ctx = canvasRef.value.getContext('2d'); const src = viewProxy.value.getOpenGLRenderWindow().getCanvas(); diff --git a/src/vtk/LPSView3DProxy/index.d.ts b/src/vtk/LPSView3DProxy/index.d.ts index 6eea544b4..705daf603 100644 --- a/src/vtk/LPSView3DProxy/index.d.ts +++ b/src/vtk/LPSView3DProxy/index.d.ts @@ -10,6 +10,7 @@ export interface ViewProxyCustomizations { getInteractorStyle3D(): vtkInteractorStyleManipulator; setInteractionContainer(el: Maybe): boolean; getInteractionContainer(): Maybe; + setSize(w: number, h: number): boolean; } export interface vtkLPSView3DProxy