@cornerstonejs/tools 4.18.4 → 5.0.0-beta.1

package/dist/esm/tools/VolumeCroppingControlTool.js

@@ -1,18 +1,25 @@
-import { vec2 } from 'gl-matrix';
+import { vec2, vec3 } from 'gl-matrix';
 import vtkMath from '@kitware/vtk.js/Common/Core/Math';
 import { AnnotationTool } from './base';
-import { getRenderingEngine, getEnabledElementByIds, getEnabledElement, Enums, CONSTANTS, triggerEvent, eventTarget, convertColorArrayToRgbString, } from '@cornerstonejs/core';
-import { getToolGroup } from '../store/ToolGroupManager';
+import { getRenderingEngine, getEnabledElementByIds, getEnabledElement, utilities as csUtils, Enums, CONSTANTS, triggerEvent, eventTarget, } from '@cornerstonejs/core';
+import { getToolGroup, getToolGroupForViewport, } from '../store/ToolGroupManager';
 import { addAnnotation, getAnnotations, removeAnnotation, } from '../stateManagement/annotation/annotationState';
 import { drawCircle as drawCircleSvg, drawLine as drawLineSvg, } from '../drawingSvg';
 import { state } from '../store/state';
 import { Events } from '../enums';
 import { getViewportIdsWithToolToRender } from '../utilities/viewportFilters';
 import { resetElementCursor, hideElementCursor, } from '../cursors/elementCursor';
+import liangBarksyClip from '../utilities/math/vec2/liangBarksyClip';
 import * as lineSegment from '../utilities/math/line';
 import { isAnnotationLocked } from '../stateManagement/annotation/annotationLocking';
 import triggerAnnotationRenderForViewportIds from '../utilities/triggerAnnotationRenderForViewportIds';
-import { NUM_CLIPPING_PLANES, LINE_INTERSECTION_TOLERANCE, POINT_PROXIMITY_THRESHOLD_PIXELS, copyClippingPlanes, getColorKeyForPlaneIndex, getOrientationFromNormal, computePlanePlaneIntersection, findLineBoundsIntersection, } from '../utilities/volumeCropping';
+const { RENDERING_DEFAULTS } = CONSTANTS;
+function defaultReferenceLineColor() {
+    return 'rgb(0, 200, 0)';
+}
+function defaultReferenceLineControllable() {
+    return true;
+}
 const OPERATION = {
     DRAG: 1,
     ROTATE: 2,
@@ -45,7 +52,12 @@ class VolumeCroppingControlTool extends AnnotationTool {
         },
     }) {
         super(toolProps, defaultToolProps);
-        this.clippingPlanes = [];
+        this._virtualAnnotations = [];
+        this.sphereStates = [];
+        this.draggingSphereIndex = null;
+        this.toolCenter = [0, 0, 0];
+        this.toolCenterMin = [0, 0, 0];
+        this.toolCenterMax = [0, 0, 0];
         this.initializeViewport = ({ renderingEngineId, viewportId, }) => {
             if (!renderingEngineId || !viewportId) {
                 console.warn('VolumeCroppingControlTool: Missing renderingEngineId or viewportId');
@@ -56,21 +68,15 @@ class VolumeCroppingControlTool extends AnnotationTool {
                 return;
             }
             const { viewport } = enabledElement;
-            const volumeActors = viewport.getActors();
-            if (volumeActors && volumeActors.length > 0) {
-                const imageData = volumeActors[0].actor.getMapper().getInputData();
-                if (imageData) {
-                    this.seriesInstanceUID = imageData.seriesInstanceUID || 'unknown';
-                }
-            }
+            this._updateToolCentersFromViewport(viewport);
             const { element } = viewport;
-            const { position, focalPoint } = viewport.getCamera();
+            const { position, focalPoint, viewPlaneNormal } = viewport.getCamera();
             let annotations = this._getAnnotations(enabledElement);
             annotations = this.filterInteractableAnnotationsForElement(element, annotations);
             if (annotations?.length) {
                 removeAnnotation(annotations[0].annotationUID);
             }
-            const orientation = getOrientationFromNormal(viewport.getCamera().viewPlaneNormal);
+            const orientation = this._getOrientationFromNormal(viewport.getCamera().viewPlaneNormal);
             const annotation = {
                 highlighted: false,
                 metadata: {
@@ -80,11 +86,11 @@ class VolumeCroppingControlTool extends AnnotationTool {
                 },
                 data: {
                     handles: {
-                        activeOperation: null,
-                        clippingPlanes: this.clippingPlanes.length > 0
-                            ? copyClippingPlanes(this.clippingPlanes)
-                            : [],
+                        toolCenter: this.toolCenter,
+                        toolCenterMin: this.toolCenterMin,
+                        toolCenterMax: this.toolCenterMax,
                     },
+                    activeOperation: null,
                     activeViewportIds: [],
                     viewportId,
                     referenceLines: [],
@@ -92,6 +98,10 @@ class VolumeCroppingControlTool extends AnnotationTool {
                 },
             };
             addAnnotation(annotation, element);
+            return {
+                normal: viewPlaneNormal,
+                point: viewport.canvasToWorld([100, 100]),
+            };
         };
         this._getViewportsInfo = () => {
             const viewports = getToolGroup(this.toolGroupId).viewportsInfo;
@@ -124,22 +134,139 @@ class VolumeCroppingControlTool extends AnnotationTool {
                 }
                 viewport.render();
             }
-            this._initializeViewports(viewportsInfo);
+            this._computeToolCenter(viewportsInfo);
+        };
+        this.computeToolCenter = () => {
+            const viewportsInfo = this._getViewportsInfo();
         };
-        this._initializeViewports = (viewportsInfo) => {
-            if (!viewportsInfo?.length || !viewportsInfo[0]) {
-                console.warn('VolumeCroppingControlTool: No valid viewportsInfo for initialization.');
+        this._computeToolCenter = (viewportsInfo) => {
+            if (!viewportsInfo || !viewportsInfo[0]) {
+                console.warn('  _computeToolCenter : No valid viewportsInfo for computeToolCenter.');
                 return;
             }
-            viewportsInfo.forEach((vpInfo) => {
-                this.initializeViewport(vpInfo);
+            const orientationIds = ['AXIAL', 'CORONAL', 'SAGITTAL'];
+            const presentOrientations = viewportsInfo
+                .map((vp) => {
+                if (vp.renderingEngineId) {
+                    const renderingEngine = getRenderingEngine(vp.renderingEngineId);
+                    const viewport = renderingEngine.getViewport(vp.viewportId);
+                    if (viewport && viewport.getCamera) {
+                        const orientation = this._getOrientationFromNormal(viewport.getCamera().viewPlaneNormal);
+                        if (orientation) {
+                            return orientation;
+                        }
+                    }
+                }
+                return null;
+            })
+                .filter(Boolean);
+            const missingOrientation = orientationIds.find((id) => !presentOrientations.includes(id));
+            const presentNormals = [];
+            const presentCenters = [];
+            const presentViewportInfos = viewportsInfo.filter((vp) => {
+                let orientation = null;
+                if (vp.renderingEngineId) {
+                    const renderingEngine = getRenderingEngine(vp.renderingEngineId);
+                    const viewport = renderingEngine.getViewport(vp.viewportId);
+                    if (viewport && viewport.getCamera) {
+                        orientation = this._getOrientationFromNormal(viewport.getCamera().viewPlaneNormal);
+                    }
+                }
+                return orientation && orientationIds.includes(orientation);
             });
-            triggerAnnotationRenderForViewportIds(viewportsInfo.map(({ viewportId }) => viewportId));
+            presentViewportInfos.forEach((vpInfo) => {
+                const { normal, point } = this.initializeViewport(vpInfo);
+                presentNormals.push(normal);
+                presentCenters.push(point);
+            });
+            if (presentViewportInfos.length === 2 && missingOrientation) {
+                const virtualNormal = [0, 0, 0];
+                vec3.cross(virtualNormal, presentNormals[0], presentNormals[1]);
+                vec3.normalize(virtualNormal, virtualNormal);
+                const virtualCenter = [
+                    (presentCenters[0][0] + presentCenters[1][0]) / 2,
+                    (presentCenters[0][1] + presentCenters[1][1]) / 2,
+                    (presentCenters[0][2] + presentCenters[1][2]) / 2,
+                ];
+                const orientation = null;
+                const virtualAnnotation = {
+                    highlighted: false,
+                    metadata: {
+                        cameraPosition: [...virtualCenter],
+                        cameraFocalPoint: [...virtualCenter],
+                        toolName: this.getToolName(),
+                    },
+                    data: {
+                        handles: {
+                            activeOperation: null,
+                            toolCenter: this.toolCenter,
+                            toolCenterMin: this.toolCenterMin,
+                            toolCenterMax: this.toolCenterMax,
+                        },
+                        activeViewportIds: [],
+                        viewportId: missingOrientation,
+                        referenceLines: [],
+                        orientation,
+                    },
+                    isVirtual: true,
+                    virtualNormal,
+                };
+                this._virtualAnnotations = [virtualAnnotation];
+            }
+            else if (presentViewportInfos.length === 1) {
+                let presentOrientation = null;
+                const vpInfo = presentViewportInfos[0];
+                if (vpInfo.renderingEngineId) {
+                    const renderingEngine = getRenderingEngine(vpInfo.renderingEngineId);
+                    const viewport = renderingEngine.getViewport(vpInfo.viewportId);
+                    if (viewport && viewport.getCamera) {
+                        presentOrientation = this._getOrientationFromNormal(viewport.getCamera().viewPlaneNormal);
+                    }
+                }
+                const presentCenter = presentCenters[0];
+                const canonicalNormals = {
+                    AXIAL: [0, 0, 1],
+                    CORONAL: [0, 1, 0],
+                    SAGITTAL: [1, 0, 0],
+                };
+                const missingIds = orientationIds.filter((id) => id !== presentOrientation);
+                const virtualAnnotations = missingIds.map((orientation) => {
+                    const normal = canonicalNormals[orientation];
+                    const virtualAnnotation = {
+                        highlighted: false,
+                        metadata: {
+                            cameraPosition: [...presentCenter],
+                            cameraFocalPoint: [...presentCenter],
+                            toolName: this.getToolName(),
+                        },
+                        data: {
+                            handles: {
+                                activeOperation: null,
+                                toolCenter: this.toolCenter,
+                                toolCenterMin: this.toolCenterMin,
+                                toolCenterMax: this.toolCenterMax,
+                            },
+                            activeViewportIds: [],
+                            viewportId: orientation,
+                            referenceLines: [],
+                            orientation,
+                        },
+                        isVirtual: true,
+                        virtualNormal: normal,
+                    };
+                    return virtualAnnotation;
+                });
+                this._virtualAnnotations = virtualAnnotations;
+            }
+            if (viewportsInfo && viewportsInfo.length) {
+                triggerAnnotationRenderForViewportIds(viewportsInfo.map(({ viewportId }) => viewportId));
+            }
         };
         this.cancel = () => {
+            console.log('Not implemented yet');
         };
         this.isPointNearTool = (element, annotation, canvasCoords, proximity) => {
-            if (this._pointNearTool(element, annotation, canvasCoords, POINT_PROXIMITY_THRESHOLD_PIXELS)) {
+            if (this._pointNearTool(element, annotation, canvasCoords, 6)) {
                 return true;
             }
             return false;
@@ -171,8 +298,13 @@ class VolumeCroppingControlTool extends AnnotationTool {
                 if (!data.handles) {
                     continue;
                 }
+                const previousActiveOperation = data.handles.activeOperation;
+                const previousActiveViewportIds = data.activeViewportIds && data.activeViewportIds.length > 0
+                    ? [...data.activeViewportIds]
+                    : [];
                 data.activeViewportIds = [];
-                const near = this._pointNearTool(element, annotation, canvasCoords, POINT_PROXIMITY_THRESHOLD_PIXELS);
+                let near = false;
+                near = this._pointNearTool(element, annotation, canvasCoords, 6);
                 const nearToolAndNotMarkedActive = near && !highlighted;
                 const notNearToolAndMarkedActive = !near && highlighted;
                 if (nearToolAndNotMarkedActive || notNearToolAndMarkedActive) {
@@ -189,9 +321,12 @@ class VolumeCroppingControlTool extends AnnotationTool {
             const enabledElement = getEnabledElement(element);
             let orientation = null;
             if (enabledElement.viewport && enabledElement.viewport.getCamera) {
-                orientation = getOrientationFromNormal(enabledElement.viewport.getCamera().viewPlaneNormal);
+                orientation = this._getOrientationFromNormal(enabledElement.viewport.getCamera().viewPlaneNormal);
             }
             const filtered = annotations.filter((annotation) => {
+                if (annotation.isVirtual) {
+                    return true;
+                }
                 if (annotation.data.orientation &&
                     orientation &&
                     annotation.data.orientation === orientation) {
@@ -208,7 +343,7 @@ class VolumeCroppingControlTool extends AnnotationTool {
                 const s2_x = q2[0] - q1[0];
                 const s2_y = q2[1] - q1[1];
                 const denom = -s2_x * s1_y + s1_x * s2_y;
-                if (Math.abs(denom) < LINE_INTERSECTION_TOLERANCE) {
+                if (Math.abs(denom) < 1e-8) {
                     return null;
                 }
                 const s = (-s1_y * (p1[0] - q1[0]) + s1_x * (p1[1] - q1[1])) / denom;
@@ -225,7 +360,10 @@ class VolumeCroppingControlTool extends AnnotationTool {
             let renderStatus = false;
             const { viewport, renderingEngine } = enabledElement;
             const { element } = viewport;
-            const annotations = this._getAnnotations(enabledElement);
+            let annotations = this._getAnnotations(enabledElement);
+            if (this._virtualAnnotations && this._virtualAnnotations.length) {
+                annotations = annotations.concat(this._virtualAnnotations);
+            }
             const camera = viewport.getCamera();
             const filteredToolAnnotations = this.filterInteractableAnnotationsForElement(element, annotations);
             const viewportAnnotation = filteredToolAnnotations[0];
@@ -236,65 +374,135 @@ class VolumeCroppingControlTool extends AnnotationTool {
             const { clientWidth, clientHeight } = viewport.canvas;
             const canvasDiagonalLength = Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight);
             const data = viewportAnnotation.data;
-            let clippingPlanes = viewportAnnotation.data.handles.clippingPlanes;
-            if (!clippingPlanes || clippingPlanes.length < NUM_CLIPPING_PLANES) {
-                if (this.clippingPlanes &&
-                    this.clippingPlanes.length >= NUM_CLIPPING_PLANES) {
-                    clippingPlanes = this.clippingPlanes;
-                    data.handles.clippingPlanes = copyClippingPlanes(this.clippingPlanes);
-                }
-                else {
-                    return false;
-                }
-            }
-            const { viewPlaneNormal, focalPoint } = camera;
+            const otherViewportAnnotations = annotations;
+            const volumeCroppingCenterCanvasMin = viewport.worldToCanvas(this.toolCenterMin);
+            const volumeCroppingCenterCanvasMax = viewport.worldToCanvas(this.toolCenterMax);
             const referenceLines = [];
-            const planeTypes = [
-                'min',
-                'max',
-                'min',
-                'max',
-                'min',
-                'max',
-            ];
-            for (let planeIndex = 0; planeIndex < NUM_CLIPPING_PLANES; planeIndex++) {
-                const clippingPlane = clippingPlanes[planeIndex];
-                const intersection = computePlanePlaneIntersection(clippingPlane, viewPlaneNormal, focalPoint);
-                if (!intersection) {
-                    continue;
+            const canvasBox = [0, 0, clientWidth, clientHeight];
+            otherViewportAnnotations.forEach((annotation) => {
+                const data = annotation.data;
+                const isVirtual = 'isVirtual' in annotation &&
+                    annotation.isVirtual === true;
+                data.handles.toolCenter = this.toolCenter;
+                let otherViewport, otherCamera, clientWidth, clientHeight, otherCanvasDiagonalLength, otherCanvasCenter, otherViewportCenterWorld;
+                if (isVirtual) {
+                    const realViewports = viewportsInfo.filter((vp) => vp.viewportId !== data.viewportId);
+                    if (realViewports.length === 2) {
+                        const vp1 = renderingEngine.getViewport(realViewports[0].viewportId);
+                        const vp2 = renderingEngine.getViewport(realViewports[1].viewportId);
+                        const normal1 = vp1.getCamera().viewPlaneNormal;
+                        const normal2 = vp2.getCamera().viewPlaneNormal;
+                        const virtualNormal = vec3.create();
+                        vec3.cross(virtualNormal, normal1, normal2);
+                        vec3.normalize(virtualNormal, virtualNormal);
+                        otherCamera = {
+                            viewPlaneNormal: virtualNormal,
+                            position: data.handles.toolCenter,
+                            focalPoint: data.handles.toolCenter,
+                            viewUp: [0, 1, 0],
+                        };
+                        clientWidth = viewport.canvas.clientWidth;
+                        clientHeight = viewport.canvas.clientHeight;
+                        otherCanvasDiagonalLength = Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight);
+                        otherCanvasCenter = [clientWidth * 0.5, clientHeight * 0.5];
+                        otherViewportCenterWorld = data.handles.toolCenter;
+                        otherViewport = {
+                            id: data.viewportId,
+                            canvas: viewport.canvas,
+                            canvasToWorld: () => data.handles.toolCenter,
+                        };
+                    }
+                    else {
+                        const virtualNormal = annotation
+                            .virtualNormal ?? [0, 0, 1];
+                        otherCamera = {
+                            viewPlaneNormal: virtualNormal,
+                            position: data.handles.toolCenter,
+                            focalPoint: data.handles.toolCenter,
+                            viewUp: [0, 1, 0],
+                        };
+                        clientWidth = viewport.canvas.clientWidth;
+                        clientHeight = viewport.canvas.clientHeight;
+                        otherCanvasDiagonalLength = Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight);
+                        otherCanvasCenter = [clientWidth * 0.5, clientHeight * 0.5];
+                        otherViewportCenterWorld = data.handles.toolCenter;
+                        otherViewport = {
+                            id: data.viewportId,
+                            canvas: viewport.canvas,
+                            canvasToWorld: () => data.handles.toolCenter,
+                        };
+                    }
                 }
-                const lineBounds = findLineBoundsIntersection(intersection.point, intersection.direction, viewport);
-                if (!lineBounds) {
-                    continue;
+                else {
+                    otherViewport = renderingEngine.getViewport(data.viewportId);
+                    otherCamera = otherViewport.getCamera();
+                    clientWidth = otherViewport.canvas.clientWidth;
+                    clientHeight = otherViewport.canvas.clientHeight;
+                    otherCanvasDiagonalLength = Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight);
+                    otherCanvasCenter = [clientWidth * 0.5, clientHeight * 0.5];
+                    otherViewportCenterWorld =
+                        otherViewport.canvasToWorld(otherCanvasCenter);
                 }
+                const otherViewportControllable = this._getReferenceLineControllable(otherViewport.id);
+                const direction = [0, 0, 0];
+                vtkMath.cross(camera.viewPlaneNormal, otherCamera.viewPlaneNormal, direction);
+                vtkMath.normalize(direction);
+                vtkMath.multiplyScalar(direction, otherCanvasDiagonalLength);
+                const pointWorld0 = [0, 0, 0];
+                vtkMath.add(otherViewportCenterWorld, direction, pointWorld0);
+                const pointWorld1 = [0, 0, 0];
+                vtkMath.subtract(otherViewportCenterWorld, direction, pointWorld1);
+                const pointCanvas0 = viewport.worldToCanvas(pointWorld0);
+                const otherViewportCenterCanvas = viewport.worldToCanvas([
+                    otherViewportCenterWorld[0] ?? 0,
+                    otherViewportCenterWorld[1] ?? 0,
+                    otherViewportCenterWorld[2] ?? 0,
+                ]);
+                const canvasUnitVectorFromCenter = vec2.create();
+                vec2.subtract(canvasUnitVectorFromCenter, pointCanvas0, otherViewportCenterCanvas);
+                vec2.normalize(canvasUnitVectorFromCenter, canvasUnitVectorFromCenter);
+                const canvasVectorFromCenterLong = vec2.create();
+                vec2.scale(canvasVectorFromCenterLong, canvasUnitVectorFromCenter, canvasDiagonalLength * 100);
+                const refLinesCenterMin = otherViewportControllable
+                    ? vec2.clone(volumeCroppingCenterCanvasMin)
+                    : vec2.clone(otherViewportCenterCanvas);
+                const refLinePointMinOne = vec2.create();
+                const refLinePointMinTwo = vec2.create();
+                vec2.add(refLinePointMinOne, refLinesCenterMin, canvasVectorFromCenterLong);
+                vec2.subtract(refLinePointMinTwo, refLinesCenterMin, canvasVectorFromCenterLong);
+                liangBarksyClip(refLinePointMinOne, refLinePointMinTwo, canvasBox);
                 referenceLines.push([
-                    {
-                        id: viewport.id,
-                        canvas: viewport.canvas,
-                    },
-                    lineBounds.start,
-                    lineBounds.end,
-                    planeTypes[planeIndex],
-                    planeIndex,
+                    otherViewport,
+                    refLinePointMinOne,
+                    refLinePointMinTwo,
+                    'min',
                 ]);
-            }
+                const refLinesCenterMax = otherViewportControllable
+                    ? vec2.clone(volumeCroppingCenterCanvasMax)
+                    : vec2.clone(otherViewportCenterCanvas);
+                const refLinePointMaxOne = vec2.create();
+                const refLinePointMaxTwo = vec2.create();
+                vec2.add(refLinePointMaxOne, refLinesCenterMax, canvasVectorFromCenterLong);
+                vec2.subtract(refLinePointMaxTwo, refLinesCenterMax, canvasVectorFromCenterLong);
+                liangBarksyClip(refLinePointMaxOne, refLinePointMaxTwo, canvasBox);
+                referenceLines.push([
+                    otherViewport,
+                    refLinePointMaxOne,
+                    refLinePointMaxTwo,
+                    'max',
+                ]);
+            });
             data.referenceLines = referenceLines;
             const viewportColor = this._getReferenceLineColor(viewport.id);
-            const defaultColor = viewportColor !== undefined ? viewportColor : 'rgb(200, 200, 200)';
+            const color = viewportColor !== undefined ? viewportColor : 'rgb(200, 200, 200)';
             referenceLines.forEach((line, lineIndex) => {
-                const [otherViewport, startPoint, endPoint, type, planeIndex] = line;
-                if (planeIndex === undefined ||
-                    planeIndex < 0 ||
-                    planeIndex >= NUM_CLIPPING_PLANES) {
-                    return;
-                }
                 const intersections = [];
                 for (let j = 0; j < referenceLines.length; ++j) {
                     if (j === lineIndex) {
                         continue;
                     }
                     const otherLine = referenceLines[j];
-                    const intersection = lineIntersection2D(startPoint, endPoint, otherLine[1], otherLine[2]);
+                    const intersection = lineIntersection2D(line[1], line[2], otherLine[1], otherLine[2]);
                     if (intersection) {
                         intersections.push({
                             with: otherLine[3],
@@ -302,12 +510,32 @@ class VolumeCroppingControlTool extends AnnotationTool {
                         });
                     }
                 }
-                const colorKey = getColorKeyForPlaneIndex(planeIndex);
+                const otherViewport = line[0];
+                let orientation = null;
+                if (otherViewport && otherViewport.id) {
+                    const annotationForViewport = annotations.find((a) => a.data.viewportId === otherViewport.id);
+                    if (annotationForViewport && annotationForViewport.data.orientation) {
+                        orientation = String(annotationForViewport.data.orientation).toUpperCase();
+                    }
+                    else {
+                        const idUpper = otherViewport.id.toUpperCase();
+                        if (idUpper.includes('AXIAL')) {
+                            orientation = 'AXIAL';
+                        }
+                        else if (idUpper.includes('CORONAL')) {
+                            orientation = 'CORONAL';
+                        }
+                        else if (idUpper.includes('SAGITTAL')) {
+                            orientation = 'SAGITTAL';
+                        }
+                    }
+                }
                 const lineColors = this.configuration.lineColors || {};
-                const colorArr = colorKey
-                    ? lineColors[colorKey] || lineColors.UNKNOWN || [1.0, 0.0, 0.0]
-                    : [1.0, 0.0, 0.0];
-                const color = convertColorArrayToRgbString(colorArr);
+                const colorArr = lineColors[orientation] ||
+                    lineColors.unknown || [1.0, 0.0, 0.0];
+                const color = Array.isArray(colorArr)
+                    ? `rgb(${colorArr.map((v) => Math.round(v * 255)).join(',')})`
+                    : colorArr;
                 const viewportControllable = this._getReferenceLineControllable(otherViewport.id);
                 const selectedViewportId = data.activeViewportIds.find((id) => id === otherViewport.id);
                 let lineWidth = this.configuration.lineWidth ?? 1.5;
@@ -317,29 +545,28 @@ class VolumeCroppingControlTool extends AnnotationTool {
                 if (lineActive) {
                     lineWidth = this.configuration.activeLineWidth ?? 2.5;
                 }
-                const lineUID = `plane_${planeIndex}`;
-                if (intersections.length === 2) {
-                    drawLineSvg(svgDrawingHelper, annotationUID, lineUID, intersections[0].point, intersections[1].point, {
-                        color,
-                        lineWidth,
-                    });
-                }
-                else {
-                    drawLineSvg(svgDrawingHelper, annotationUID, lineUID, startPoint, endPoint, {
-                        color,
-                        lineWidth,
-                    });
-                }
-                if (this.configuration.extendReferenceLines &&
-                    intersections.length === 2) {
-                    const sortedIntersections = intersections
-                        .map((intersection) => ({
-                        ...intersection,
-                        distance: vec2.distance(startPoint, intersection.point),
-                    }))
-                        .sort((a, b) => a.distance - b.distance);
-                    drawLineSvg(svgDrawingHelper, annotationUID, lineUID + '_dashed_before', startPoint, sortedIntersections[0].point, { color, lineWidth, lineDash: [4, 4] });
-                    drawLineSvg(svgDrawingHelper, annotationUID, lineUID + '_dashed_after', sortedIntersections[1].point, endPoint, { color, lineWidth, lineDash: [4, 4] });
+                const lineUID = `${lineIndex}`;
+                if (viewportControllable) {
+                    if (intersections.length === 2) {
+                        drawLineSvg(svgDrawingHelper, annotationUID, lineUID, intersections[0].point, intersections[1].point, {
+                            color,
+                            lineWidth,
+                        });
+                    }
+                    if (this.configuration.extendReferenceLines &&
+                        intersections.length === 2) {
+                        if (this.configuration.extendReferenceLines &&
+                            intersections.length === 2) {
+                            const sortedIntersections = intersections
+                                .map((intersection) => ({
+                                ...intersection,
+                                distance: vec2.distance(line[1], intersection.point),
+                            }))
+                                .sort((a, b) => a.distance - b.distance);
+                            drawLineSvg(svgDrawingHelper, annotationUID, lineUID + '_dashed_before', line[1], sortedIntersections[0].point, { color, lineWidth, lineDash: [4, 4] });
+                            drawLineSvg(svgDrawingHelper, annotationUID, lineUID + '_dashed_after', sortedIntersections[1].point, line[2], { color, lineWidth, lineDash: [4, 4] });
+                        }
+                    }
                 }
             });
             renderStatus = true;
@@ -353,7 +580,7 @@ class VolumeCroppingControlTool extends AnnotationTool {
                 ];
                 const circleRadius = viewportIndicatorsConfig?.circleRadius || canvasDiagonalLength * 0.01;
                 const circleUID = '0';
-                drawCircleSvg(svgDrawingHelper, annotationUID, circleUID, referenceColorCoordinates, circleRadius, { color: defaultColor, fill: defaultColor });
+                drawCircleSvg(svgDrawingHelper, annotationUID, circleUID, referenceColorCoordinates, circleRadius, { color, fill: color });
             }
             return renderStatus;
         };
@@ -375,7 +602,40 @@ class VolumeCroppingControlTool extends AnnotationTool {
                 if (evt.detail.seriesInstanceUID !== this.seriesInstanceUID) {
                     return;
                 }
-                return;
+                const { draggingSphereIndex, toolCenter } = evt.detail;
+                const newMin = [...this.toolCenterMin];
+                const newMax = [...this.toolCenterMax];
+                if (draggingSphereIndex >= 0 && draggingSphereIndex <= 5) {
+                    const axis = Math.floor(draggingSphereIndex / 2);
+                    const isMin = draggingSphereIndex % 2 === 0;
+                    (isMin ? newMin : newMax)[axis] = toolCenter[axis];
+                    this.setToolCenter(newMin, 'min');
+                    this.setToolCenter(newMax, 'max');
+                    return;
+                }
+                if (draggingSphereIndex >= 6 && draggingSphereIndex <= 13) {
+                    const idx = draggingSphereIndex;
+                    if (idx < 10) {
+                        newMin[0] = toolCenter[0];
+                    }
+                    else {
+                        newMax[0] = toolCenter[0];
+                    }
+                    if ([6, 7, 10, 11].includes(idx)) {
+                        newMin[1] = toolCenter[1];
+                    }
+                    else {
+                        newMax[1] = toolCenter[1];
+                    }
+                    if (idx % 2 === 0) {
+                        newMin[2] = toolCenter[2];
+                    }
+                    else {
+                        newMax[2] = toolCenter[2];
+                    }
+                    this.setToolCenter(newMin, 'min');
+                    this.setToolCenter(newMax, 'max');
+                }
             }
         };
         this._onNewVolume = () => {
@@ -383,28 +643,72 @@ class VolumeCroppingControlTool extends AnnotationTool {
             if (viewportsInfo && viewportsInfo.length > 0) {
                 const { viewportId, renderingEngineId } = viewportsInfo[0];
                 const renderingEngine = getRenderingEngine(renderingEngineId);
-                if (!renderingEngine) {
-                    return;
-                }
                 const viewport = renderingEngine.getViewport(viewportId);
-                if (!viewport) {
-                    return;
-                }
                 const volumeActors = viewport.getActors();
                 if (volumeActors.length > 0) {
                     const imageData = volumeActors[0].actor.getMapper().getInputData();
                     if (imageData) {
                         this.seriesInstanceUID = imageData.seriesInstanceUID;
+                        this._updateToolCentersFromViewport(viewport);
+                        const annotations = getAnnotations(this.getToolName(), viewportId) || [];
+                        annotations.forEach((annotation) => {
+                            if (annotation.data && annotation.data.handles) {
+                                annotation.data.handles.toolCenter = [...this.toolCenter];
+                            }
+                        });
                     }
                 }
             }
-            this._initializeViewports(viewportsInfo);
+            this._computeToolCenter(viewportsInfo);
             triggerEvent(eventTarget, Events.VOLUMECROPPINGCONTROL_TOOL_CHANGED, {
                 toolGroupId: this.toolGroupId,
                 viewportsInfo: viewportsInfo,
                 seriesInstanceUID: this.seriesInstanceUID,
             });
         };
+        this._getAnnotationsForViewportsWithDifferentCameras = (enabledElement, annotations) => {
+            const { viewportId, renderingEngine, viewport } = enabledElement;
+            const otherViewportAnnotations = annotations.filter((annotation) => annotation.data.viewportId !== viewportId);
+            if (!otherViewportAnnotations || !otherViewportAnnotations.length) {
+                return [];
+            }
+            const camera = viewport.getCamera();
+            const { viewPlaneNormal, position } = camera;
+            const viewportsWithDifferentCameras = otherViewportAnnotations.filter((annotation) => {
+                const { viewportId } = annotation.data;
+                const targetViewport = renderingEngine.getViewport(viewportId);
+                const cameraOfTarget = targetViewport.getCamera();
+                return !(csUtils.isEqual(cameraOfTarget.viewPlaneNormal, viewPlaneNormal, 1e-2) && csUtils.isEqual(cameraOfTarget.position, position, 1));
+            });
+            return viewportsWithDifferentCameras;
+        };
+        this._filterViewportWithSameOrientation = (enabledElement, referenceAnnotation, annotations) => {
+            const { renderingEngine } = enabledElement;
+            const { data } = referenceAnnotation;
+            const viewport = renderingEngine.getViewport(data.viewportId);
+            const linkedViewportAnnotations = annotations.filter((annotation) => {
+                const { data } = annotation;
+                const otherViewport = renderingEngine.getViewport(data.viewportId);
+                const otherViewportControllable = this._getReferenceLineControllable(otherViewport.id);
+                return otherViewportControllable === true;
+            });
+            if (!linkedViewportAnnotations || !linkedViewportAnnotations.length) {
+                return [];
+            }
+            const camera = viewport.getCamera();
+            const viewPlaneNormal = camera.viewPlaneNormal;
+            vtkMath.normalize(viewPlaneNormal);
+            const otherViewportsAnnotationsWithSameCameraDirection = linkedViewportAnnotations.filter((annotation) => {
+                const { viewportId } = annotation.data;
+                const otherViewport = renderingEngine.getViewport(viewportId);
+                const otherCamera = otherViewport.getCamera();
+                const otherViewPlaneNormal = otherCamera.viewPlaneNormal;
+                vtkMath.normalize(otherViewPlaneNormal);
+                return (csUtils.isEqual(viewPlaneNormal, otherViewPlaneNormal, 1e-2) &&
+                    csUtils.isEqual(camera.viewUp, otherCamera.viewUp, 1e-2));
+            });
+            return otherViewportsAnnotationsWithSameCameraDirection;
+        };
         this._activateModify = (element) => {
             state.isInteractingWithTool = !this.configuration.mobile?.enabled;
             element.addEventListener(Events.MOUSE_UP, this._endCallback);
@@ -456,71 +760,48 @@ class VolumeCroppingControlTool extends AnnotationTool {
                 return;
             }
             const { handles } = viewportAnnotation.data;
-            const clippingPlanes = handles.clippingPlanes;
-            if (handles.activeOperation === OPERATION.DRAG &&
-                clippingPlanes &&
-                clippingPlanes.length >= NUM_CLIPPING_PLANES) {
-                if (handles.activePlaneIndex !== undefined &&
-                    handles.activePlaneIndex >= 0 &&
-                    handles.activePlaneIndex < NUM_CLIPPING_PLANES) {
-                    const planeIndex = handles.activePlaneIndex;
-                    const plane = clippingPlanes[planeIndex];
-                    const normal = plane.normal;
-                    const dotProd = vtkMath.dot(delta, normal);
-                    const moveDistance = dotProd;
-                    plane.origin[0] += normal[0] * moveDistance;
-                    plane.origin[1] += normal[1] * moveDistance;
-                    plane.origin[2] += normal[2] * moveDistance;
-                }
-                else if (handles.activeType === 'min') {
-                    clippingPlanes[0].origin[0] += delta[0];
-                    clippingPlanes[2].origin[1] += delta[1];
-                    clippingPlanes[4].origin[2] += delta[2];
+            if (handles.activeOperation === OPERATION.DRAG) {
+                if (handles.activeType === 'min') {
+                    this.toolCenterMin[0] += delta[0];
+                    this.toolCenterMin[1] += delta[1];
+                    this.toolCenterMin[2] += delta[2];
                 }
                 else if (handles.activeType === 'max') {
-                    clippingPlanes[1].origin[0] += delta[0];
-                    clippingPlanes[3].origin[1] += delta[1];
-                    clippingPlanes[5].origin[2] += delta[2];
+                    this.toolCenterMax[0] += delta[0];
+                    this.toolCenterMax[1] += delta[1];
+                    this.toolCenterMax[2] += delta[2];
+                }
+                else {
+                    this.toolCenter[0] += delta[0];
+                    this.toolCenter[1] += delta[1];
+                    this.toolCenter[2] += delta[2];
                 }
-                this.clippingPlanes = copyClippingPlanes(clippingPlanes);
                 const viewportsInfo = this._getViewportsInfo();
-                viewportsInfo.forEach(({ viewportId, renderingEngineId }) => {
-                    const enabledElement = getEnabledElementByIds(viewportId, renderingEngineId);
-                    if (enabledElement) {
-                        const annotations = this._getAnnotations(enabledElement);
-                        annotations.forEach((annotation) => {
-                            if (annotation.data?.handles) {
-                                annotation.data.handles.clippingPlanes = copyClippingPlanes(this.clippingPlanes);
-                            }
-                        });
-                    }
-                });
                 triggerAnnotationRenderForViewportIds(viewportsInfo.map(({ viewportId }) => viewportId));
                 triggerEvent(eventTarget, Events.VOLUMECROPPINGCONTROL_TOOL_CHANGED, {
                     toolGroupId: this.toolGroupId,
-                    clippingPlanes: this.clippingPlanes,
+                    toolCenter: this.toolCenter,
+                    toolCenterMin: this.toolCenterMin,
+                    toolCenterMax: this.toolCenterMax,
                     handleType: handles.activeType,
+                    viewportOrientation: [],
                     seriesInstanceUID: this.seriesInstanceUID,
                 });
             }
         };
         this._getReferenceLineColor =
             toolProps.configuration?.getReferenceLineColor ||
-                (() => 'rgb(0, 200, 0)');
+                defaultReferenceLineColor;
         this._getReferenceLineControllable =
-            toolProps.configuration?.getReferenceLineControllable || (() => true);
+            toolProps.configuration?.getReferenceLineControllable ||
+                defaultReferenceLineControllable;
         const viewportsInfo = getToolGroup(this.toolGroupId)?.viewportsInfo;
         eventTarget.addEventListener(Events.VOLUMECROPPING_TOOL_CHANGED, this._onSphereMoved);
         if (viewportsInfo && viewportsInfo.length > 0) {
             const { viewportId, renderingEngineId } = viewportsInfo[0];
+            const enabledElement = getEnabledElementByIds(viewportId, renderingEngineId);
             const renderingEngine = getRenderingEngine(renderingEngineId);
-            if (!renderingEngine) {
-                return;
-            }
             const viewport = renderingEngine.getViewport(viewportId);
-            if (!viewport) {
-                return;
-            }
             const volumeActors = viewport.getActors();
             if (!volumeActors || !volumeActors.length) {
                 console.warn(`VolumeCroppingControlTool: No volume actors found in viewport ${viewportId}.`);
@@ -528,11 +809,67 @@ class VolumeCroppingControlTool extends AnnotationTool {
             }
             const imageData = volumeActors[0].actor.getMapper().getInputData();
             if (imageData) {
+                const dimensions = imageData.getDimensions();
+                const spacing = imageData.getSpacing();
+                const origin = imageData.getOrigin();
                 this.seriesInstanceUID = imageData.seriesInstanceUID || 'unknown';
+                const cropFactor = this.configuration.initialCropFactor ?? 0.2;
+                this.toolCenter = [
+                    origin[0] + cropFactor * (dimensions[0] - 1) * spacing[0],
+                    origin[1] + cropFactor * (dimensions[1] - 1) * spacing[1],
+                    origin[2] + cropFactor * (dimensions[2] - 1) * spacing[2],
+                ];
+                const maxCropFactor = 1 - cropFactor;
+                this.toolCenterMin = [
+                    origin[0] + cropFactor * (dimensions[0] - 1) * spacing[0],
+                    origin[1] + cropFactor * (dimensions[1] - 1) * spacing[1],
+                    origin[2] + cropFactor * (dimensions[2] - 1) * spacing[2],
+                ];
+                this.toolCenterMax = [
+                    origin[0] + maxCropFactor * (dimensions[0] - 1) * spacing[0],
+                    origin[1] + maxCropFactor * (dimensions[1] - 1) * spacing[1],
+                    origin[2] + maxCropFactor * (dimensions[2] - 1) * spacing[2],
+                ];
             }
         }
     }
+    _updateToolCentersFromViewport(viewport) {
+        const volumeActors = viewport.getActors();
+        if (!volumeActors || !volumeActors.length) {
+            return;
+        }
+        const imageData = volumeActors[0].actor.getMapper().getInputData();
+        if (!imageData) {
+            return;
+        }
+        this.seriesInstanceUID = imageData.seriesInstanceUID || 'unknown';
+        const dimensions = imageData.getDimensions();
+        const spacing = imageData.getSpacing();
+        const origin = imageData.getOrigin();
+        const cropFactor = this.configuration.initialCropFactor ?? 0.2;
+        const cropStart = cropFactor / 2;
+        const cropEnd = 1 - cropFactor / 2;
+        this.toolCenter = [
+            origin[0] +
+                ((cropStart + cropEnd) / 2) * (dimensions[0] - 1) * spacing[0],
+            origin[1] +
+                ((cropStart + cropEnd) / 2) * (dimensions[1] - 1) * spacing[1],
+            origin[2] +
+                ((cropStart + cropEnd) / 2) * (dimensions[2] - 1) * spacing[2],
+        ];
+        this.toolCenterMin = [
+            origin[0] + cropStart * (dimensions[0] - 1) * spacing[0],
+            origin[1] + cropStart * (dimensions[1] - 1) * spacing[1],
+            origin[2] + cropStart * (dimensions[2] - 1) * spacing[2],
+        ];
+        this.toolCenterMax = [
+            origin[0] + cropEnd * (dimensions[0] - 1) * spacing[0],
+            origin[1] + cropEnd * (dimensions[1] - 1) * spacing[1],
+            origin[2] + cropEnd * (dimensions[2] - 1) * spacing[2],
+        ];
+    }
     onSetToolInactive() {
+        console.debug(`VolumeCroppingControlTool: onSetToolInactive called for tool ${this.getToolName()}`);
     }
     onSetToolActive() {
         const viewportsInfo = this._getViewportsInfo();
@@ -548,7 +885,7 @@ class VolumeCroppingControlTool extends AnnotationTool {
         if (!anyAnnotationExists) {
             this._unsubscribeToViewportNewVolumeSet(viewportsInfo);
             this._subscribeToViewportNewVolumeSet(viewportsInfo);
-            this._initializeViewports(viewportsInfo);
+            this._computeToolCenter(viewportsInfo);
             triggerEvent(eventTarget, Events.VOLUMECROPPINGCONTROL_TOOL_CHANGED, {
                 toolGroupId: this.toolGroupId,
                 viewportsInfo: viewportsInfo,
@@ -572,12 +909,13 @@ class VolumeCroppingControlTool extends AnnotationTool {
         }
     }
     onSetToolEnabled() {
-        eventTarget.addEventListener(Events.VOLUMECROPPING_TOOL_CHANGED, this._onSphereMoved);
+        console.debug(`VolumeCroppingControlTool: onSetToolEnabled called for tool ${this.getToolName()}`);
+        const viewportsInfo = this._getViewportsInfo();
     }
     onSetToolDisabled() {
+        console.debug(`VolumeCroppingControlTool: onSetToolDisabled called for tool ${this.getToolName()}`);
         const viewportsInfo = this._getViewportsInfo();
         this._unsubscribeToViewportNewVolumeSet(viewportsInfo);
-        eventTarget.removeEventListener(Events.VOLUMECROPPING_TOOL_CHANGED, this._onSphereMoved);
         viewportsInfo.forEach(({ renderingEngineId, viewportId }) => {
             const enabledElement = getEnabledElementByIds(viewportId, renderingEngineId);
             if (!enabledElement) {
@@ -591,24 +929,176 @@ class VolumeCroppingControlTool extends AnnotationTool {
             }
         });
     }
-    _syncWithVolumeCroppingTool(originalClippingPlanes) {
-        if (!originalClippingPlanes ||
-            originalClippingPlanes.length < NUM_CLIPPING_PLANES) {
-            return;
+    _getOrientationFromNormal(normal) {
+        if (!normal) {
+            return null;
         }
-        this.clippingPlanes = copyClippingPlanes(originalClippingPlanes);
-        const viewportsInfo = this._getViewportsInfo();
-        viewportsInfo.forEach(({ viewportId, renderingEngineId }) => {
-            const enabledElement = getEnabledElementByIds(viewportId, renderingEngineId);
-            if (enabledElement) {
-                const annotations = this._getAnnotations(enabledElement);
-                annotations.forEach((annotation) => {
-                    if (annotation.data?.handles) {
-                        annotation.data.handles.clippingPlanes = copyClippingPlanes(this.clippingPlanes);
+        const canonical = {
+            AXIAL: [0, 0, 1],
+            CORONAL: [0, 1, 0],
+            SAGITTAL: [1, 0, 0],
+        };
+        const tol = 1e-2;
+        for (const [key, value] of Object.entries(canonical)) {
+            if (Math.abs(normal[0] - value[0]) < tol &&
+                Math.abs(normal[1] - value[1]) < tol &&
+                Math.abs(normal[2] - value[2]) < tol) {
+                return key;
+            }
+            if (Math.abs(normal[0] + value[0]) < tol &&
+                Math.abs(normal[1] + value[1]) < tol &&
+                Math.abs(normal[2] + value[2]) < tol) {
+                return key;
+            }
+        }
+        return null;
+    }
+    _syncWithVolumeCroppingTool(originalClippingPlanes) {
+        const planes = originalClippingPlanes;
+        if (planes.length >= 6) {
+            this.toolCenterMin = [
+                planes[0].origin[0],
+                planes[2].origin[1],
+                planes[4].origin[2],
+            ];
+            this.toolCenterMax = [
+                planes[1].origin[0],
+                planes[3].origin[1],
+                planes[5].origin[2],
+            ];
+            this.toolCenter = [
+                (this.toolCenterMin[0] + this.toolCenterMax[0]) / 2,
+                (this.toolCenterMin[1] + this.toolCenterMax[1]) / 2,
+                (this.toolCenterMin[2] + this.toolCenterMax[2]) / 2,
+            ];
+            const viewportsInfo = this._getViewportsInfo();
+            viewportsInfo.forEach(({ viewportId, renderingEngineId }) => {
+                const enabledElement = getEnabledElementByIds(viewportId, renderingEngineId);
+                if (enabledElement) {
+                    const annotations = this._getAnnotations(enabledElement);
+                    annotations.forEach((annotation) => {
+                        if (annotation.data &&
+                            annotation.data.handles &&
+                            annotation.data.orientation) {
+                            const orientation = annotation.data.orientation;
+                            if (orientation === 'AXIAL') {
+                                annotation.data.handles.toolCenterMin = [
+                                    planes[0].origin[0],
+                                    planes[2].origin[1],
+                                    annotation.data.handles.toolCenterMin[2],
+                                ];
+                                annotation.data.handles.toolCenterMax = [
+                                    planes[1].origin[0],
+                                    planes[3].origin[1],
+                                    annotation.data.handles.toolCenterMax[2],
+                                ];
+                            }
+                            else if (orientation === 'CORONAL') {
+                                annotation.data.handles.toolCenterMin = [
+                                    planes[0].origin[0],
+                                    annotation.data.handles.toolCenterMin[1],
+                                    planes[4].origin[2],
+                                ];
+                                annotation.data.handles.toolCenterMax = [
+                                    planes[1].origin[0],
+                                    annotation.data.handles.toolCenterMax[1],
+                                    planes[5].origin[2],
+                                ];
+                            }
+                            else if (orientation === 'SAGITTAL') {
+                                annotation.data.handles.toolCenterMin = [
+                                    annotation.data.handles.toolCenterMin[0],
+                                    planes[2].origin[1],
+                                    planes[4].origin[2],
+                                ];
+                                annotation.data.handles.toolCenterMax = [
+                                    annotation.data.handles.toolCenterMax[0],
+                                    planes[3].origin[1],
+                                    planes[5].origin[2],
+                                ];
+                            }
+                            annotation.data.handles.toolCenter = [
+                                (annotation.data.handles.toolCenterMin[0] +
+                                    annotation.data.handles.toolCenterMax[0]) /
+                                    2,
+                                (annotation.data.handles.toolCenterMin[1] +
+                                    annotation.data.handles.toolCenterMax[1]) /
+                                    2,
+                                (annotation.data.handles.toolCenterMin[2] +
+                                    annotation.data.handles.toolCenterMax[2]) /
+                                    2,
+                            ];
+                        }
+                    });
+                }
+            });
+            if (this._virtualAnnotations && this._virtualAnnotations.length > 0) {
+                this._virtualAnnotations.forEach((annotation) => {
+                    if (annotation.data &&
+                        annotation.data.handles &&
+                        annotation.data.orientation) {
+                        const orientation = annotation.data.orientation.toUpperCase();
+                        if (orientation === 'AXIAL') {
+                            annotation.data.handles.toolCenterMin = [
+                                planes[0].origin[0],
+                                planes[2].origin[1],
+                                annotation.data.handles.toolCenterMin[2],
+                            ];
+                            annotation.data.handles.toolCenterMax = [
+                                planes[1].origin[0],
+                                planes[3].origin[1],
+                                annotation.data.handles.toolCenterMax[2],
+                            ];
+                        }
+                        else if (orientation === 'CORONAL') {
+                            annotation.data.handles.toolCenterMin = [
+                                planes[0].origin[0],
+                                annotation.data.handles.toolCenterMin[1],
+                                planes[4].origin[2],
+                            ];
+                            annotation.data.handles.toolCenterMax = [
+                                planes[1].origin[0],
+                                annotation.data.handles.toolCenterMax[1],
+                                planes[5].origin[2],
+                            ];
+                        }
+                        else if (orientation === 'SAGITTAL') {
+                            annotation.data.handles.toolCenterMin = [
+                                annotation.data.handles.toolCenterMin[0],
+                                planes[2].origin[1],
+                                planes[4].origin[2],
+                            ];
+                            annotation.data.handles.toolCenterMax = [
+                                annotation.data.handles.toolCenterMax[0],
+                                planes[3].origin[1],
+                                planes[5].origin[2],
+                            ];
+                        }
+                        annotation.data.handles.toolCenter = [
+                            (annotation.data.handles.toolCenterMin[0] +
+                                annotation.data.handles.toolCenterMax[0]) /
+                                2,
+                            (annotation.data.handles.toolCenterMin[1] +
+                                annotation.data.handles.toolCenterMax[1]) /
+                                2,
+                            (annotation.data.handles.toolCenterMin[2] +
+                                annotation.data.handles.toolCenterMax[2]) /
+                                2,
+                        ];
                     }
                 });
             }
-        });
+            triggerAnnotationRenderForViewportIds(viewportsInfo.map(({ viewportId }) => viewportId));
+        }
+    }
+    setToolCenter(toolCenter, handleType) {
+        if (handleType === 'min') {
+            this.toolCenterMin = [...toolCenter];
+        }
+        else if (handleType === 'max') {
+            this.toolCenterMax = [...toolCenter];
+        }
+        const viewportsInfo = this._getViewportsInfo();
         triggerAnnotationRenderForViewportIds(viewportsInfo.map(({ viewportId }) => viewportId));
     }
     addNewAnnotation(evt) {
@@ -633,6 +1123,7 @@ class VolumeCroppingControlTool extends AnnotationTool {
                 continue;
             }
             viewportIdArray.push(otherViewport.id);
+            i++;
         }
         data.activeViewportIds = [...viewportIdArray];
         data.handles.activeOperation = OPERATION.DRAG;
@@ -658,22 +1149,51 @@ class VolumeCroppingControlTool extends AnnotationTool {
             element.addEventListener(Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME, this._onNewVolume);
         });
     }
+    _applyDeltaShiftToSelectedViewportCameras(renderingEngine, viewportsAnnotationsToUpdate, delta) {
+        viewportsAnnotationsToUpdate.forEach((annotation) => {
+            this._applyDeltaShiftToViewportCamera(renderingEngine, annotation, delta);
+        });
+    }
+    _applyDeltaShiftToViewportCamera(renderingEngine, annotation, delta) {
+        const { data } = annotation;
+        const viewport = renderingEngine.getViewport(data.viewportId);
+        const camera = viewport.getCamera();
+        const normal = camera.viewPlaneNormal;
+        const dotProd = vtkMath.dot(delta, normal);
+        const projectedDelta = [...normal];
+        vtkMath.multiplyScalar(projectedDelta, dotProd);
+        if (Math.abs(projectedDelta[0]) > 1e-3 ||
+            Math.abs(projectedDelta[1]) > 1e-3 ||
+            Math.abs(projectedDelta[2]) > 1e-3) {
+            const newFocalPoint = [0, 0, 0];
+            const newPosition = [0, 0, 0];
+            vtkMath.add(camera.focalPoint, projectedDelta, newFocalPoint);
+            vtkMath.add(camera.position, projectedDelta, newPosition);
+            viewport.setCamera({
+                focalPoint: newFocalPoint,
+                position: newPosition,
+            });
+            viewport.render();
+        }
+    }
     _pointNearTool(element, annotation, canvasCoords, proximity) {
         const { data } = annotation;
         const referenceLines = data.referenceLines;
         const viewportIdArray = [];
         if (referenceLines) {
             for (let i = 0; i < referenceLines.length; ++i) {
-                const [otherViewport, startPoint, endPoint, type, planeIndex] = referenceLines[i];
-                const distance = lineSegment.distanceToPoint(startPoint, endPoint, [
+                const otherViewport = referenceLines[i][0];
+                const start1 = referenceLines[i][1];
+                const end1 = referenceLines[i][2];
+                const type = referenceLines[i][3];
+                const distance1 = lineSegment.distanceToPoint(start1, end1, [
                     canvasCoords[0],
                     canvasCoords[1],
                 ]);
-                if (distance <= proximity) {
+                if (distance1 <= proximity) {
                     viewportIdArray.push(otherViewport.id);
-                    data.handles.activeOperation = OPERATION.DRAG;
+                    data.handles.activeOperation = 1;
                     data.handles.activeType = type;
-                    data.handles.activePlaneIndex = planeIndex;
                 }
             }
         }
@@ -681,7 +1201,7 @@ class VolumeCroppingControlTool extends AnnotationTool {
         this.editData = {
             annotation,
         };
-        return data.handles.activeOperation === OPERATION.DRAG ? true : false;
+        return data.handles.activeOperation === 1 ? true : false;
     }
 }
 VolumeCroppingControlTool.toolName = 'VolumeCroppingControl';