ISSUE #5125 - Milestone 3: Tweaks to calibration plane overlays

frontend/src/globals/unity-util.ts

@@ -2485,19 +2485,15 @@ export class UnityUtil {
 	}
 
 	/**
-	 * Highlights the Lower Floor Plane in Vertical mode, and makes it interactive.
+	 * Activates the Gizmo for the specified vertical plane, or none, if a valid plane is not given.
 	 * @category Calibration
 	 */
-	public static selectCalibrationToolLowerPlane() {
-		UnityUtil.toUnity('SelectCalibrationToolLowerPlane', UnityUtil.LoadingState.VIEWER_READY);
-	}
-
-	/**
-	 * Highlights the Upper Floor Plane in Vertical mode, and makes it interactive.
-	 * @category Calibration
-	 */
-	public static selectCalibrationToolUpperPlane() {
-		UnityUtil.toUnity('SelectCalibrationToolUpperPlane', UnityUtil.LoadingState.VIEWER_READY);
+	public static selectCalibrationToolVerticalPlane(plane: 'upper' | 'lower' | undefined) {
+		if (plane) {
+			UnityUtil.toUnity('SelectCalibrationToolVerticalPlane', UnityUtil.LoadingState.VIEWER_READY, plane);
+		} else {
+			UnityUtil.toUnity('SelectCalibrationToolVerticalPlane', UnityUtil.LoadingState.VIEWER_READY, 'none'); // (Don't try to call sendMessage with null)
+		}
 	}
 
 	/**
@@ -2546,21 +2542,20 @@ export class UnityUtil {
 	}
 
 	/**
-	 * Sets tint and border colours of the image in the image preview, for the level that is selected.
-	 * Both properties must be provided, and as HTML colour strings.
+	 * Sets the colour scheme of the image preview plane, for the specific level. All three colours should be
+	 * provided as HTML colour strings (see: https://docs.unity3d.com/ScriptReference/ColorUtility.TryParseHtmlString.html)
+	 *  fill is the tint applied to the image, including the background.
+	 *  border is the colour of the border around the image.
+	 *  drawing is the tint applied to the image, before the background.
+	 *
+	 * All three arguments support alpha values. For example, setting drawing to #00000000 and fill to #ff000008 would
+	 * result in a purely red plane with an alpha value of 0.5 compared to the geometry.
+	 *
 	 * @category Calibration
 	 */
-	public static setCalibrationToolSelectedColors(fill: string, border: string) {
-		UnityUtil.toUnity('SetCalibrationToolSelectedColours', UnityUtil.LoadingState.VIEWER_READY, JSON.stringify({ fill, border }));
-	}
+	public static setCalibrationToolVerticalPlaneColours(plane: 'lower' | 'upper', fill: string, border: string, drawing: string) {
+		UnityUtil.toUnity('SetCalibrationToolVerticalPlaneColours', UnityUtil.LoadingState.VIEWER_READY, JSON.stringify({ plane, fill, border, drawing }));
 
-	/**
-	 * Sets tint and border colours of the image in the image preview, for the level that is not selected.
-	 * Both properties must be provided, and as HTML colour strings.
-	 * @category Calibration
-	 */
-	public static setCalibrationToolUnselectedColors(fill: string, border: string) {
-		UnityUtil.toUnity('SetCalibrationToolUnselectedColours', UnityUtil.LoadingState.VIEWER_READY, JSON.stringify({ fill, border }));
 	}
 
 	/**

frontend/src/v4/routes/viewer3D/calibration3DInfoBox/calibration3DInfoBox.component.tsx

@@ -20,6 +20,8 @@ import { CalibrationContext } from '@/v5/ui/routes/dashboard/projects/calibratio
 import { CalibrationInfoBox } from '@/v5/ui/routes/dashboard/projects/calibration/calibrationInfoBox/calibrationInfoBox.component';
 import { useContext } from 'react';
 import CalibrationIcon from '@assets/icons/filled/calibration-filled.svg';
+import VerticalCalibrationIcon from '@assets/icons/viewer/vertical_calibration.svg';
+
 
 export const Calibration3DInfoBox = () => {
 	const { step } = useContext(CalibrationContext);
@@ -46,10 +48,10 @@ export const Calibration3DInfoBox = () => {
 				description={formatMessage({
 					id: 'infoBox.verticalExtents.description',
 					defaultMessage: `
-						This step filters features from 3D to make them visible in 2D (i.e. Custom Tickets).
-						Place the bottom and top planes to define the vertical extents of your drawing.
+						This step filters features from 3D to make them visible in 2D (i.e. Custom Tickets). 
+						Click on the {icon} to position the bottom plane and adjust the top plane to define the vertical extents of your drawing.
 					`,
-				})}
+				},  { icon: <VerticalCalibrationIcon /> })}
 			/>
 		);
 	};

frontend/src/v4/services/viewer/viewer.tsx

@@ -19,6 +19,7 @@ import EventEmitter from 'eventemitter3';
 
 import { UnityUtil } from '@/globals/unity-util';
 import { isEmpty, isString } from 'lodash';
+import { COLOR, hexToOpacity } from '@/v5/ui/themes/theme';
 import { IS_DEVELOPMENT } from '../../constants/environment';
 import {
 	VIEWER_EVENTS,
@@ -1327,23 +1328,29 @@ export class ViewerService {
 
 	}
 
+	// part of the hacek for callibratio tool plane
+	private calibrationtoolmode = 'none';
+
 	/**
 	 * Drawings Calibration
 	 */
 	public setCalibrationToolMode(mode: string) {
 		UnityUtil.setCalibrationToolMode(mode);
+		this.calibrationtoolmode = mode;
 	}
 
 	public setCalibrationToolVerticalPlanes(lower, upper) {
 		UnityUtil.setCalibrationToolVerticalPlanes(lower, upper);
 	}
 
-	public selectCalibrationToolUpperPlane() {
-		UnityUtil.selectCalibrationToolUpperPlane();
-	}
+	public selectCalibrationToolPlane(plane) {
+		const selectedPlane = plane === 'none' ? 'upper' : plane; // If none plane is selected show as if the top plane is selected.
+		const unselectedPlane = selectedPlane === 'upper' ? 'lower' : 'upper';
 
-	public selectCalibrationToolLowerPlane() {
-		UnityUtil.selectCalibrationToolLowerPlane();
+		Viewer.setCalibrationToolVerticalPlaneColours(selectedPlane, hexToOpacity(COLOR.PRIMARY_MAIN_CONTRAST, 44), COLOR.PRIMARY_MAIN,  COLOR.PRIMARY_MAIN_CONTRAST);
+		Viewer.setCalibrationToolVerticalPlaneColours(unselectedPlane, hexToOpacity(COLOR.PRIMARY_MAIN_CONTRAST, 0), COLOR.PRIMARY_MAIN, hexToOpacity(COLOR.PRIMARY_MAIN_CONTRAST, 0));
+
+		UnityUtil.selectCalibrationToolVerticalPlane(plane);
 	}
 
 	public setCalibrationToolDrawing(image: any, rect: number[]) {
@@ -1358,16 +1365,8 @@ export class ViewerService {
 		UnityUtil.setCalibrationToolFloorToObject(teamspace, modelId, meshId);
 	}
 
-	public setCalibrationToolSelectedColors(fill, border) {
-		UnityUtil.setCalibrationToolSelectedColors(fill, border);
-	}
-
-	public setCalibrationToolUnselectedColors(fill, border) {
-		UnityUtil.setCalibrationToolUnselectedColors(fill, border);
-	}
-
-	public setCalibrationToolOcclusionOpacity(opacity) {
-		UnityUtil.setCalibrationToolOcclusionOpacity(opacity);
+	public setCalibrationToolVerticalPlaneColours(plane, fill, border, drawing) {
+		UnityUtil.setCalibrationToolVerticalPlaneColours(plane, fill, border, drawing);
 	}
 }
 

frontend/src/v5/ui/routes/dashboard/projects/calibration/calibration.types.ts

@@ -27,4 +27,5 @@ export type Vector3D = Vector<Coord3D>;
 export enum PlaneType {
 	UPPER = 'upper',
 	LOWER = 'lower',
+	NONE = 'none',
 }

frontend/src/v5/ui/routes/dashboard/projects/calibration/calibrationStep/calibration2DHandler/calibration2DHandler.component.tsx

@@ -21,9 +21,7 @@ import { CalibrationContext } from '../../calibrationContext';
 import { EMPTY_VECTOR } from '../../calibration.constants';
 
 export const Calibration2DHandler = () => {
-	const { isCalibrating, step, setIsCalibrating2D, setVector2D } = useContext(CalibrationContext);
-
-	const canCalibrate2D = isCalibrating && step === 1;
+	const { setIsCalibrating2D, setVector2D } = useContext(CalibrationContext);
 
 	useEffect(() => {
 		UnityUtil.setCalibrationToolMode('Vector');
@@ -34,9 +32,5 @@ export const Calibration2DHandler = () => {
 		};
 	}, []);
 
-	useEffect(() => {
-		setIsCalibrating2D(canCalibrate2D);
-	}, [canCalibrate2D]);
-
 	return null;
 };

frontend/src/v5/ui/routes/dashboard/projects/calibration/calibrationStep/calibration3DHandler/calibration3DHandler.component.tsx

@@ -60,7 +60,6 @@ export const Calibration3DHandler = () => {
 
 	useEffect(() => {
 		UnityUtil.setCalibrationToolMode('Vector');
-		Viewer.isModelReady().then(() => setIsCalibrating3D(true));
 
 		return () => {
 			setIsCalibrating3D(false);

frontend/src/v5/ui/routes/dashboard/projects/calibration/calibrationStep/verticalSpatialBoundariesHandler/verticalSpatialBoundariesHandler.component.tsx

@@ -25,7 +25,6 @@ import { TreeActionsDispatchers } from '@/v5/services/actionsDispatchers';
 import { getTransformationMatrix } from '../../calibration.helpers';
 import { Vector2 } from 'three';
 import { isNull } from 'lodash';
-import { COLOR, hexToOpacity } from '@/v5/ui/themes/theme';
 import { useParams } from 'react-router';
 import { ViewerParams } from '@/v5/ui/routes/routes.constants';
 import { DrawingRevisionsHooksSelectors } from '@/v5/services/selectorsHooks';
@@ -53,9 +52,6 @@ export const VerticalSpatialBoundariesHandler = () => {
 			[bottomLeft, bottomRight, topLeft].map((corner) => corner.applyMatrix3(tMatrix));
 
 			Viewer.setCalibrationToolDrawing(i, [...bottomLeft, ...bottomRight, ...topLeft]);
-			Viewer.setCalibrationToolSelectedColors(hexToOpacity(COLOR.PRIMARY_MAIN_CONTRAST, 40), COLOR.PRIMARY_MAIN);
-			Viewer.setCalibrationToolUnselectedColors(hexToOpacity(COLOR.PRIMARY_MAIN_CONTRAST, 10), COLOR.PRIMARY_MAIN_CONTRAST);
-			Viewer.setCalibrationToolOcclusionOpacity(0.5);
 		};
 	};
 
@@ -64,31 +60,36 @@ export const VerticalSpatialBoundariesHandler = () => {
 	}, [verticalPlanes]);
 
 	useEffect(() => {
-		if (isCalibratingPlanes) {
-			Viewer.setCalibrationToolMode(planesAreSet ? 'Vertical' : 'None');
-			Viewer.on(VIEWER_EVENTS.UPDATE_CALIBRATION_PLANES, setVerticalPlanes);
-			return () => {
-				Viewer.setCalibrationToolMode('None');
-				Viewer.off(VIEWER_EVENTS.UPDATE_CALIBRATION_PLANES, setVerticalPlanes);
-				Viewer.clipToolDelete();
-			};
+		if (planesAreSet) {
+			Viewer.clipToolDelete();
 		}
-	}, [isCalibratingPlanes, planesAreSet]);
+
+		Viewer.on(VIEWER_EVENTS.UPDATE_CALIBRATION_PLANES, setVerticalPlanes);
+
+		return () => {
+			Viewer.off(VIEWER_EVENTS.UPDATE_CALIBRATION_PLANES, setVerticalPlanes);
+		};
+
+	}, [planesAreSet]);
 
 	useEffect(() => {
-		if (!planesAreSet) {
+		Viewer.setCalibrationToolMode(planesAreSet ? 'Vertical' : 'None');
+		setSelectedPlane(isCalibratingPlanes ? PlaneType.UPPER : PlaneType.NONE);
+
+		if (!planesAreSet && isCalibratingPlanes) {
 			const onClickFloorToObject = ({ account, model, id }) => {
 				Viewer.setCalibrationToolFloorToObject(account, model, id);
 				setSelectedPlane(PlaneType.UPPER);
 			};
+
 			TreeActionsDispatchers.stopListenOnSelections();
 			Viewer.on(VIEWER_EVENTS.OBJECT_SELECTED, onClickFloorToObject);
 			return () => {
 				TreeActionsDispatchers.startListenOnSelections();
 				Viewer.off(VIEWER_EVENTS.OBJECT_SELECTED, onClickFloorToObject);
 			};
 		}
-	}, [planesAreSet]);
+	}, [planesAreSet, isCalibratingPlanes]);
 
 	useEffect(() => {
 		if (isAlignPlaneActive && planesAreSet) {
@@ -113,20 +114,15 @@ export const VerticalSpatialBoundariesHandler = () => {
 	}, [isAlignPlaneActive, selectedPlane, planesAreSet]);
 
 	useEffect(() => {
-		if (selectedPlane === PlaneType.LOWER) {
-			Viewer.selectCalibrationToolLowerPlane();
-		} else if (selectedPlane === PlaneType.UPPER) {
-			Viewer.selectCalibrationToolUpperPlane();
-		}
+		Viewer.selectCalibrationToolPlane(selectedPlane);
 	}, [selectedPlane]);
 
 	useEffect(() => {
-		if (!src) return;
+		if (!src || !tMatrix) return;
 		applyImageToPlane();
 	}, [src, tMatrix]);
 
 	useEffect(() => {
-		setIsCalibratingPlanes(true);
 		Viewer.setCalibrationToolVerticalPlanes(...verticalPlanes);
 
 		return () => {