feat(CrosshairsTool): implement crosshairs for same-orientation viewports

[nagychris]

Context

So far, the CrosshairsTool was not available for viewports with the same orientation (e.g. three AXIAL / ACQUSITION).

However, it might be useful to have the crosshairs also available in these cases, as we might want to display the same position on different sequences (e.g. to find a specific component of a body part that is relatively small, like lymph nodes).

Changes & Results

For same orientation viewports, we can also render a crosshairs now. The crosshairs does not change the camera of the viewports (scroll through slices etc.), it just syncs the crosshairs between the three viewports on the current 2D (x, y) plane:

Screencast.from.2025-10-27.13-24-41.mp4

MPR works just the same as before:

Screencast.from.2025-10-27.13-23-39.mp4

Testing

• checkout this PR
• change packages/tools/examples/crossHairs/index.ts to render two / three viewports with the same orientation (example see below)
• run the example via yarn example crossHairs
• check the functionality of the new crosshairs

You can use the following viewportInputArray (l. 306):

  const viewportInputArray = [
    {
      viewportId: viewportId1,
      type: ViewportType.ORTHOGRAPHIC,
      element: element1,
      defaultOptions: {
        orientation: Enums.OrientationAxis.AXIAL,
        background: <Types.Point3>[0, 0, 0],
      },
    },
    {
      viewportId: viewportId2,
      type: ViewportType.ORTHOGRAPHIC,
      element: element2,
      defaultOptions: {
        orientation: Enums.OrientationAxis.AXIAL, // changed to AXIAL
        background: <Types.Point3>[0, 0, 0],
      },
    },
    {
      viewportId: viewportId3,
      type: ViewportType.ORTHOGRAPHIC,
      element: element3,
      defaultOptions: {
        orientation: Enums.OrientationAxis.AXIAL, // changed to AXIAL
        background: <Types.Point3>[0, 0, 0],
      },
    },
  ];

Checklist

PR

• My Pull Request title is descriptive, accurate and follows the
  semantic-release format and guidelines.

Code

• My code has been well-documented (function documentation, inline comments,
  etc.)

Public Documentation Updates

• [] The documentation page has been updated as necessary for any public API
  additions or removals.

-> do we need to update the docs for this?

Tested Environment

• [] OS: Ubuntu 24
• [] Node version:
• [] Browser: Chromium / Brave / Chrome

[sedghi]

why is centerPoint removed

[nagychris]

This was an error during merging, I could re-add it again if we decide to move on with the PR.

[sedghi]

I think our current crosshair implementation is pretty rough, maybe one of the worst in cs3d. At the same time, I've noticed your pull request doesn't really fix the existing problems. Instead, it seems to tie the crosshair implementation more closely to the 2 and 3 viewport settings.

Generally, the crosshair shouldn't be concerned with how many viewports are displayed. It should instead calculate the distinct views and project lines from each viewport onto the others. For example, in your PR, what happens with two identical axial views and a sagittal view? Or what about four identical views?

I realize this will solve your specific use case, but I'd rather fix the crosshairs in a more practical way, not by adding more limitations to how it works. Hopefully, that makes sense.

CC @wayfarer3130

[nagychris]

@sedghi I agree, this PR only adds some additional complexity to handle the specific case of 2 or 3 viewports with the same orientation. Probably the cleanest solution (long-term) would be to have a more generic CrosshairsTool that handles >3 viewports with flexible orientations (also allowing for dynamic switching).

However, I guess this would involve much more effort, and maybe even a rewrite of the current tool. As I am highly interested in an improved Crosshairs with same-orientation support, are there any plans of implementing this in the near future? Otherwise, are there any downsides of integrating this into the library until the refactoring & extension takes place? Or can we maybe modify this PR in a way that suits your plan in a better way?