Problem when using PaintWidget

Web
1

Hello. Im trying to use the PaintWidget and I get the following error in the console:
Uncaught ReferenceError: _toConsumableArray$1 is not defined
at d215de43-467b-4325-a63d-983ea8728018:616

I tracked this method and it is used in the file PaintFilter.worker.js
Apparently it is a method from Babel library. So I think this could be a problem with my babel configuration.
I am using the package @kitware/vtk.js with Vue2 and Quasar2.

Steps to reproduce

My code for using the widget:

// Load the rendering pieces we want to use (for both WebGL and WebGPU)
import '@kitware/vtk.js/Rendering/Profiles/All'

import vtkPaintWidget from '@kitware/vtk.js/Widgets/Widgets3D/PaintWidget'
import vtkPaintFilter from '@kitware/vtk.js/Filters/General/PaintFilter'
import { ViewTypes } from '@kitware/vtk.js/Widgets/Core/WidgetManager/Constants'
import { SlicingMode } from '@kitware/vtk.js/Rendering/Core/ImageMapper/Constants'

import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction'
import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction'
import vtkImageMapper from '@kitware/vtk.js/Rendering/Core/ImageMapper'
import vtkImageSlice from '@kitware/vtk.js/Rendering/Core/ImageSlice'

export default {
  data () {
    return {
      painter: null,
      paintWidget: null,
      paintHandle: null
    }
  },
  props: {
  },
  computed: {
  },
  methods: {
    createPaintWidget (image) {
      this.painter = vtkPaintFilter.newInstance()
      this.paintWidget = vtkPaintWidget.newInstance()
      this.paintHandle = this.widgetManager.addWidget(
        this.paintWidget,
        ViewTypes.SLICE
      )

      this.labelMap = {
        imageMapper: vtkImageMapper.newInstance(),
        actor: vtkImageSlice.newInstance(),
        cfun: vtkColorTransferFunction.newInstance(),
        ofun: vtkPiecewiseFunction.newInstance()
      }

      // this.labelMap pipeline
      this.labelMap.actor.setMapper(this.labelMap.imageMapper)
      this.labelMap.imageMapper.setInputConnection(this.painter.getOutputPort())

      // set up this.labelMap color and opacity mapping
      this.labelMap.cfun.addRGBPoint(1, 0, 0, 1) // label "1" will be blue
      this.labelMap.ofun.addPoint(0, 0) // our background value, 0, will be invisible
      this.labelMap.ofun.addPoint(1, 1) // all values above 1 will be fully opaque

      this.labelMap.actor.getProperty().setRGBTransferFunction(this.labelMap.cfun)
      this.labelMap.actor.getProperty().setPiecewiseFunction(this.labelMap.ofun)
      // opacity is applied to entire this.labelMap
      this.labelMap.actor.getProperty().setOpacity(0.5)

      // add actors to renderers
      this.renderer.addViewProp(this.labelMap.actor)

      // update paint filter
      this.painter.setBackgroundImage(image)

      // don't set to 0, since that's our empty label color from our pwf
      this.painter.setLabel(1)

      // set custom threshold
      // painter.setVoxelFunc((bgValue, idx) => bgValue < 145);

      // default slice orientation/mode and camera view
      const sliceMode = SlicingMode.K
      this.painter.setSlicingMode(sliceMode)

      const direction = [0, 0, 0]
      direction[sliceMode] = 1
      this.paintHandle.getWidgetState().getHandle().setDirection(direction)

      const r = 5
      this.paintWidget.setRadius(r)
      this.painter.setRadius(r)

      const activeWidget = 'paintWidget'
      this.paintHandle.setVisibility(activeWidget === 'paintWidget')

      this.updatePaintWidget(sliceMode, this.imgSlice, image)
      this.initializeHandlePaintWidget(this.paintHandle)

      // start edit
      this.widgetManager.grabFocus(this.paintWidget)
    },
    initializeHandlePaintWidget (handle) {
      // handle.onStartInteractionEvent(() => {
      //   this.painter.startStroke()
      // })

      handle.onStartInteractionEvent(() => {
        this.painter.startStroke()
        this.painter.addPoint(this.paintWidget.getWidgetState().getTrueOrigin())
      })

      handle.onInteractionEvent(() => {
        this.painter.addPoint(this.paintWidget.getWidgetState().getTrueOrigin())
      })

      handle.onEndInteractionEvent(() => {
        this.painter.endStroke()
      })
    },
    updatePaintWidget (sliceMode, slice, data) {
      const ijk = [0, 0, 0]
      const position = [0, 0, 0]

      // position
      ijk[sliceMode] = slice
      data.indexToWorld(ijk, position)

      this.painter.setSlicingMode(sliceMode)
      this.paintWidget.getManipulator().setOrigin(position)
      this.paintHandle.updateRepresentationForRender()

      // update this.labelMap layer
      this.labelMap.imageMapper.set({ slice, sliceMode })
    }
  },
  watch: {
    image (newValue) {
      this.createPaintWidget(newValue)
    },
    imgSlice (newValue) {
      this.updatePaintWidget(SlicingMode.K, newValue, this.image)
    }
  },
  mounted () {
  }
}

Environment

  • vtk.js: @kitware/vtk.js": “^19.2.9”
  • OS: Windows 10
  • Browser: Chrome Version 94.0.4606.81 and Firefox 92
2

This may be an issue with how vtk.js currently bundles certain dependencies. I suspect this pending PR will fix your issue. I will update this post when it’s merged.

3

Thank you! Do you have an estimated time for that merge?

4

It has been merged.

1 Like