Picking tube between points of PolyLineWidget

PaulHax · August 15, 2023, 4:46pm

I’ed like to click on a “line” of the PolyLineWidget and add a point/handle there. I don’t know how to get the index of where I want to insert a new handle. How to do that?

Assuming I want the “cell” of the line, attempted some things with

HardwarePicker: I don’t know how to inteprate the attributeID (attributeID = cellID? But attributeID changes as mouse moves over same line.)
CellPicker: picker.getActors().length always = 0

github.com

PaulHax/vtk-js/blob/pick-line/Sources/Widgets/Widgets3D/PolyLineWidget/example/index.js#L118-L223


      
          function eventToWindowXY(event) {
            // We know we are full screen => window.innerXXX
            // Otherwise we can use pixel device ratio or else...
            const { clientX, clientY } = event;
            const [width, height] = apiSpecificRenderWindow.getSize();
            const x = Math.round((width * clientX) / window.innerWidth);
            const y = Math.round(height * (1 - clientY / window.innerHeight)); // Need to flip Y
            return [x, y];
          }
          
          function processSelections(selections) {
            if (!selections || selections.length === 0) {
              return;
            }
            const {
              // worldPosition: rayHitWorldPosition,
              // compositeID,
              // prop,
              // propID,
              attributeID,

This file has been truncated. show original

finetjul · August 15, 2023, 7:44pm

I’m not sure how you get values for attributeID. I tried the PolyLineWidget example and failed to have an attributeID other than undefined in the widget manager.

CompositeID is only valid/useful when mousing over a GlyphMapper actor (only the GlyphMapper calls renderCompositeIndex).

Problem is, vtkPolyLineRepresentation is using a vtkTubeFilter and a regular mapper (and not a vtkGlyphMapper).
An idea 1) would be to change vtkPolyLineRepresentation to rely on the GlyphMapper (one glyph per handle) by deriving from vtkGlyphRepresentation. The glyph mesh could be a cylinder, and the “scale” would be the distance between the handle and the next handle.

You would then have an automatic mapping between the clicked cylinder and the handle state.
That is not perfect though:

not fixable: you wouldn’t have a nice joint between each cylinder (which the tube filter does well )
fixable: you would have to tweak the cylinder radius to support scaleInPixels.

Option 2: keep investigating what this attributeID is, maybe you could enhance the vtkTubeFilter polydata to pass useful information to the picker.

PaulHax · August 22, 2023, 5:30pm

Thanks for the guidance Julien!

I went with the GlyphMapper approach.

github.com/Kitware/vtk-js

SegmentedLineRepresentation to connect widget handles

Kitware:master ← PaulHax:segment-rep

opened 05:29PM - 22 Aug 23 UTC

PaulHax

+322 -56

Not sure we want to burden the repo with this niche possibly duplicate code, but tossing this out there. ### Context  I wanted to click on a segment of the PolyLineWidget and insert a handle in the middle of the line. https://discourse.vtk.org/t/picking-tube-between-points-of-polylinewidget/12154 ### Results  Ran with @finetjul suggestion to use a Glyph mapper with cylanders to connect the points of a line. Can get the index of the cylander from WidgetManager `const insertHandleIndex = widgetManager.getSelections()[0].getProperties().compositeID + 1;` ### Changes  - [ ] Documentation and TypeScript definitions were updated to match those changes ### PR and Code Checklist  - [ ] [semantic-release](https://github.com/semantic-release/semantic-release) commit messages - [ ] Run `npm run reformat` to have correctly formatted code ### Testing  - [ ] This change adds or fixes unit tests - [ ] Tested environment: - **vtk.js**: - **OS**: - **Browser**:

Upgrading TubeFilter looked tricky. attributeID from the HardwareSelector is the cellID (if hardwareSelector.setFieldAssociation( FieldAssociations.FIELD_ASSOCIATION_CELLS ); The TubeFilter cells are triangle strips that extend along the entire line/tube. So cellID does not help narrow down the clicked “segment.” Would need to impliment some special render mode like GlyphMapper’s renderCompositeIndex with the color coming from “segment” index/ID?