Stack with different image sizes causes a discrepancy in the viewing experience

[PintoGideon]

Hi there ,

I am working on an image viewer using react-cornerstone-viewport. I have a series where the pilot image is of a different size. This introduces a discrepancy in the viewing experience with the stack scroll or a cine player.

Pilot Image:

2nd Image

I tracked the issue here and tried making some edits to see if things worked.

              <CornerstoneViewport
                  isPlaying={this.props.inPlay}
                  frameRate={this.state.frameRate}
                  activeTool={this.state.activeTool}
                  tools={this.state.tools}
                  imageIds={this.state.imageIds}
                  onElementEnabled={(elementEnabledEvt: any) => {
                    const cornerstoneElement = elementEnabledEvt.detail.element;
                    this.setState({
                      element: cornerstoneElement,
                    });

                    cornerstoneElement.addEventListener(
                      "cornerstoneimagerendered",
                      (eventData: any) => {
                      const viewport = cornerstone.getViewport(element) || {};
                      viewport.voi = viewport.voi || {};
                      viewport.voi.windowWidth = image.windowWidth;
                     viewport.voi.windowCenter = image.windowCenter;

                     if (!viewport.displayedArea) {
                        viewport.displayedArea = {
                          // Top Left Hand Corner
                         tlhc: {
                          x: 1,
                          y: 1
                         },
                // Bottom Right Hand Corner
                       brhc: {
                          x: 256,
                         y: 256
                       },
                        rowPixelSpacing: 1,
                       columnPixelSpacing: 1,
                       presentationSizeMode: 'None'
              };
            }
               cornerstone.setViewport(
                cornerstoneElement,
                 viewport
                        );
                      }
                    );
                  }}
                />

Let me know if you have insights for me. I'll look into the innards of cornerstone to find a possible solution. Doing a cornerstone.reset(this.state.element) after every image render event works, but it does not allow for tooling ofcourse.

[ron51]

@PintoGideon can you give an example of how to add zoom in/out actions with react viewport?