Merge pull request #5189 from 3drepo/ISSUE_4897

Issue 4897 - 2d Milestone 3

frontend/assets/icons/icons.types.ts

@@ -0,0 +1,20 @@
+/**
+ *  Copyright (C) 2024 3D Repo Ltd
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as
+ *  published by the Free Software Foundation, either version 3 of the
+ *  License, or (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export type IProps = {
+	className?: any;
+} & React.SVGProps<SVGSVGElement>;

frontend/assets/icons/viewer/2d/control_point_2d.svg.tsx

@@ -0,0 +1,33 @@
+/**
+ *  Copyright (C) 2024 3D Repo Ltd
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as
+ *  published by the Free Software Foundation, either version 3 of the
+ *  License, or (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { IProps } from '@assets/icons/icons.types';
+
+export default ({ className, ...rest }: IProps) => (
+	<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...rest} >
+		<path
+			d="M50 65C58.2843 65 65 58.2843 65 50C65 41.7157 58.2843 35 50 35C41.7157 35 35 41.7157 35 50C35 58.2843 41.7157 65 50 65Z"
+			fill="currentColor"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M5 12C5 8.68629 7.68629 6 11 6H89C92.3137 6 95 8.68629 95 12V90C95 93.3137 92.3137 96 89 96H11C7.68629 96 5 93.3137 5 90V12ZM12 89V13H88V89H12Z"
+			fill="currentColor"
+		/>
+	</svg>
+);

frontend/assets/icons/viewer/2d/edge_line.svg.tsx

@@ -0,0 +1,27 @@
+/**
+ *  Copyright (C) 2024 3D Repo Ltd
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as
+ *  published by the Free Software Foundation, either version 3 of the
+ *  License, or (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { IProps } from '@assets/icons/icons.types';
+
+export default ({ className, ...rest }: IProps) => (
+	<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...rest} >
+		<path
+			d="M92.4749 7.52513C91.108 6.15829 88.892 6.15829 87.5251 7.52513L57.8405 37.2098C55.559 35.8082 52.8739 35 50 35C47.1261 35 44.441 35.8082 42.1595 37.2098L12.4749 7.52513C11.108 6.15829 8.89196 6.15829 7.52513 7.52513C6.1583 8.89196 6.1583 11.108 7.52513 12.4749L37.2098 42.1595C35.8082 44.441 35 47.1261 35 50C35 52.8739 35.8082 55.559 37.2098 57.8405L7.52513 87.5251C6.15829 88.892 6.15829 91.108 7.52513 92.4749C8.89196 93.8417 11.108 93.8417 12.4749 92.4749L42.1595 62.7902C44.441 64.1918 47.1261 65 50 65C52.8739 65 55.559 64.1918 57.8405 62.7902L87.5251 92.4749C88.892 93.8417 91.108 93.8417 92.4749 92.4749C93.8417 91.108 93.8417 88.892 92.4749 87.5251L62.7902 57.8405C64.1918 55.559 65 52.8739 65 50C65 47.1261 64.1918 44.441 62.7902 42.1595L92.4749 12.4749C93.8417 11.108 93.8417 8.89196 92.4749 7.52513Z"
+			fill="currentColor" 
+		/>
+	</svg>
+);

frontend/assets/icons/viewer/2d/intersection_corner.svg.tsx

@@ -0,0 +1,29 @@
+/**
+ *  Copyright (C) 2024 3D Repo Ltd
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as
+ *  published by the Free Software Foundation, either version 3 of the
+ *  License, or (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { IProps } from '@assets/icons/icons.types';
+
+export default ({ className, ...rest }: IProps) => (
+	<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...rest} >
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M92.4749 7.52513C91.108 6.15829 88.892 6.15829 87.5251 7.52513L63.0251 32.0252L53.2855 22.2856C50.9423 19.9425 47.1434 19.9425 44.8002 22.2856L36.0178 31.068L12.4749 7.52513C11.108 6.15829 8.89197 6.15829 7.52513 7.52513C6.1583 8.89196 6.1583 11.108 7.52513 12.4749L31.068 36.0178L20.5178 46.5681C18.1746 48.9112 18.1746 52.7102 20.5178 55.0533L30.2573 64.7929L7.52513 87.5251C6.15829 88.892 6.15829 91.108 7.52513 92.4749C8.89196 93.8417 11.108 93.8417 12.4749 92.4749L35.2071 69.7427L44.8002 79.3358C47.1434 81.6789 50.9424 81.6789 53.2855 79.3358L63.8358 68.7855L87.5251 92.4749C88.892 93.8417 91.108 93.8417 92.4749 92.4749C93.8417 91.108 93.8417 88.892 92.4749 87.5251L68.7855 63.8358L77.5679 55.0533C79.9111 52.7102 79.9111 48.9112 77.5679 46.5681L67.9748 36.9749L92.4749 12.4749C93.8417 11.108 93.8417 8.89196 92.4749 7.52513ZM58.0753 36.9749L49.0429 27.9425L40.9675 36.0178L50 45.0502L58.0753 36.9749ZM36.0178 40.9675L26.1746 50.8107L35.2071 59.8432L45.0503 50L36.0178 40.9675ZM40.1568 64.7929L49.0429 73.6789L58.886 63.8358L50 54.9497L40.1568 64.7929ZM63.8358 58.886L54.9498 50L63.0251 41.9247L71.9111 50.8107L63.8358 58.886Z"
+			fill="currentColor"
+		/>
+	</svg>
+);

frontend/assets/icons/viewer/2d/surface.svg.tsx

@@ -0,0 +1,24 @@
+/**
+ *  Copyright (C) 2024 3D Repo Ltd
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as
+ *  published by the Free Software Foundation, either version 3 of the
+ *  License, or (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { IProps } from '@assets/icons/icons.types';
+
+export default ({ className, ...rest }: IProps) => (
+	<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...rest} >
+		<circle cx="50" cy="50" r="15" fill="currentColor" />
+	</svg>
+);

frontend/assets/icons/viewer/vertical_calibration.svg.tsx

@@ -0,0 +1,29 @@
+/**
+ *  Copyright (C) 2024 3D Repo Ltd
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU Affero General Public License as
+ *  published by the Free Software Foundation, either version 3 of the
+ *  License, or (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU Affero General Public License for more details.
+ *
+ *  You should have received a copy of the GNU Affero General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+type IProps = {
+	className?: any;
+};
+
+export default ({ className }: IProps) => (
+	<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+		<path d="M21 1.23828C21 1.64602 20.6695 1.97656 20.2617 1.97656L12.2739 1.97656C11.8662 1.97656 11.5356 1.64602 11.5356 1.23828C11.5356 0.83054 11.8662 0.5 12.2739 0.5L20.2617 0.5C20.6695 0.5 21 0.83054 21 1.23828Z" fill="currentColor"/>
+		<path fillRule="evenodd" clipRule="evenodd" d="M0.750587 0.5C0.336049 0.5 1.1266e-06 0.83605 1.08484e-06 1.25059L0 20.7494C-2.30677e-08 21.164 0.336128 21.5 0.750586 21.5H6.11953C6.53407 21.5 6.87012 21.1639 6.87012 20.7494L6.87012 1.25059C6.87012 0.836061 6.53408 0.500001 6.11953 0.500001L0.750587 0.5ZM1.47656 20.0234L1.47656 1.97656L5.39356 1.97656V5.38086H3.594C3.18625 5.38086 2.85571 5.7114 2.85571 6.11914C2.85571 6.52688 3.18625 6.85742 3.594 6.85742H5.39356V10.2617H3.59399C3.18625 10.2617 2.85571 10.5923 2.85571 11C2.85571 11.4077 3.18625 11.7383 3.59399 11.7383H5.39356V15.1426H3.59399C3.18625 15.1426 2.85571 15.4731 2.85571 15.8809C2.85571 16.2886 3.18625 16.6191 3.59399 16.6191H5.39356L5.39355 20.0234H1.47656Z" fill="currentColor"/>
+		<path d="M17.4305 5.13674C17.7189 5.42506 18.1863 5.42506 18.4746 5.13674C18.7629 4.84842 18.7629 4.38097 18.4746 4.09265L16.7859 2.40389C16.6474 2.26543 16.4596 2.18765 16.2638 2.18765C16.068 2.18765 15.8802 2.26543 15.7418 2.40389L14.0553 4.09038C13.767 4.37869 13.767 4.84615 14.0553 5.13446C14.3436 5.42278 14.8111 5.42278 15.0994 5.13446L15.5136 4.7202L15.5221 17.2906L15.0949 16.8633C14.8066 16.575 14.3391 16.575 14.0508 16.8633C13.7625 17.1517 13.7625 17.6191 14.0508 17.9074L15.7396 19.5962C15.878 19.7347 16.0658 19.8124 16.2616 19.8124C16.4574 19.8124 16.6452 19.7347 16.7836 19.5962L18.4701 17.9097C18.7584 17.6214 18.7584 17.1539 18.4701 16.8656C18.1818 16.5773 17.7144 16.5773 17.426 16.8656L16.9987 17.293L16.9902 4.69638L17.4305 5.13674Z" fill="currentColor"/>
+		<path d="M20.2617 21.5C20.6695 21.5 21 21.1695 21 20.7617C21 20.354 20.6695 20.0234 20.2617 20.0234H12.2739C11.8662 20.0234 11.5356 20.354 11.5356 20.7617C11.5356 21.1695 11.8662 21.5 12.2739 21.5H20.2617Z" fill="currentColor"/>
+	</svg>
+);

frontend/package.json

@@ -51,6 +51,7 @@
 		"@mui/system": "5.4.1",
 		"@mui/x-date-pickers": "5.0.3",
 		"@popperjs/core": "2.6.0",
+		"@types/three": "0.167.1",
 		"@webscopeio/react-textarea-autocomplete": "4.9.0",
 		"axios": "1.6.5",
 		"bezier-easing": "2.1.0",
@@ -77,6 +78,7 @@
 		"modern-screenshot": "4.4.39",
 		"normalize.css": "8.0.1",
 		"normalizr": "3.4.0",
+		"path-data-polyfill": "1.0.6",
 		"pdf-lib": "1.17.1",
 		"prop-types": "15.5.8",
 		"query-string": "6.2.0",
@@ -121,6 +123,7 @@
 		"simplebar-react": "2.4.3",
 		"socket.io-client": "4.6.1",
 		"styled-components": "5.3.9",
+		"three": "0.167.1",
 		"type-fest": "2.3.2",
 		"ua-parser-js": "1.0.37",
 		"uuidv4": "5.0.1",

frontend/src/globals/unity-util.ts

@@ -25,6 +25,8 @@ import { ExternalWebRequestHandler } from './unity-externalwebrequesthandler';
 declare let SendMessage;
 declare let createUnityInstance;
 
+type DrawingImageSource = ImageBitmap | ImageData | HTMLImageElement | HTMLCanvasElement | OffscreenCanvas;
+
 export class UnityUtil {
 	/** @hidden */
 	private static errorCallback: any;
@@ -135,6 +137,21 @@ export class UnityUtil {
 	 */
 	private static indexedDBAvailable = true;
 
+	/**
+	 * Temporarily holds references to DOM objects that can be bound to a WebGL texture by id (a number).
+	 * Use the corresponding counter to ensure numbers are unique. References will be removed automatically
+	 * by bindWebGLTexture. DrawingImageSource is a subset of types defined for TexImageSource, but not
+	 * including video types.
+	 */
+	/** @hidden */
+	private static domTextureReferences: { [id: number] : DrawingImageSource } = {};
+
+	/**
+	 * Convenience member to provide ids for domTextureReferences.
+	 */
+	/** @hidden */
+	private static domTextureReferenceCounter = 0;
+
 	/**
 	 * Contains a list of calls to make during the Unity Update method. One
 	 * call is made per Unity frame.
@@ -720,6 +737,16 @@ export class UnityUtil {
 		}
 	}
 
+	/**
+	 * Called by the Calibration Tool when a user action changes the heights of the vertical planes.
+	 * Heights are given in Project coordinates from the origin.
+	 */
+	/** @hidden */
+	public static calibrationPlanesChanged(planesJson) {
+		const planes = JSON.parse(planesJson);
+		UnityUtil.viewer.calibrationPlanesChanged([planes.lower, planes.upper]);
+	}
+
 	/*
 	 * =============== TO UNITY ====================
 	 */
@@ -2446,6 +2473,142 @@ export class UnityUtil {
 		});
 	}
 
+	/**
+	 * Sets and enables the active Calibration Mode. There is no need to explicitly enable or disable the Calibration Tool.
+	 * Enabling Vertical Mode will store the current clip planes, and disabling it will restore them - the frontend must
+	 * disable the Clip Tool itself however.
+	 * @category Calibration
+	 * @param mode A string, ["Vector", "Vertical", "None"].
+	 */
+	public static setCalibrationToolMode(mode: string) {
+		UnityUtil.toUnity('SetCalibrationToolMode', UnityUtil.LoadingState.VIEWER_READY, mode);
+	}
+
+	/**
+	 * Activates the Gizmo for the specified vertical plane, or none, if a valid plane is not given.
+	 * @category Calibration
+	 */
+	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)
+		}
+	}
+
+	/**
+	 * Sets the lower and upper range of the vertical planes (the floor) in Project coordinates.
+	 * This does not change the default floor height even if the magnitude of the range is different.
+	 * @category Calibration
+	 */
+	public static setCalibrationToolVerticalPlanes(min: number, max: number) {
+		var range = {
+			min,
+			max,
+		};
+		UnityUtil.toUnity('SetCalibrationToolVerticalPlanes', UnityUtil.LoadingState.VIEWER_READY, JSON.stringify(range));
+	}
+
+	/**
+	 * Aligns the Lower floor plane to the top of the specified mesh, and the Upper floor plane to the default floor height above this.
+	 * The interactive state of the planes is unchanged.
+	 * @category Calibration
+	 */
+	public static setCalibrationToolFloorToObject(teamspace: string, modelid: string, meshid: string) {
+		var parms = {
+			teamspace: teamspace,
+			modelId: modelid,
+			meshes: [ meshid ],
+		};
+		UnityUtil.toUnity('SetCalibrationToolFloorToObject', UnityUtil.LoadingState.VIEWER_READY, JSON.stringify(parms));
+	}
+
+	/**
+	 * Sets the default height of the floor used when calling setCalibrationToolFloorToObject, in meters.
+	 * @category Calibration
+	 */
+	public static setCalibrationToolFloorHeight(height: number) {
+		UnityUtil.toUnity('SetCalibrationToolFloorHeight', UnityUtil.LoadingState.VIEWER_READY, height);
+	}
+
+	/**
+	 * Sets or removes the Start and End of the Calibration Vector. If Start or End are set to null, the tool
+	 * will immediately allow the user to place them again. Vector Mode must be explicitly enabled - calling
+	 * this will not automatically enable the tool.
+	 * @category Calibration
+	 */
+	public static setCalibrationToolVector(start: number[] | null, end: number[] | null) {
+		UnityUtil.toUnity('SetCalibrationToolVector', UnityUtil.LoadingState.VIEWER_READY, JSON.stringify({ start, end }));
+	}
+
+	/**
+	 * 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 setCalibrationToolVerticalPlaneColours(plane: 'lower' | 'upper', fill: string, border: string, drawing: string) {
+		UnityUtil.toUnity('SetCalibrationToolVerticalPlaneColours', UnityUtil.LoadingState.VIEWER_READY, JSON.stringify({ plane, fill, border, drawing }));
+
+	}
+
+	/**
+	 * Sets the additional transparency that is applied, as a multiplier, to the image tint colour set by
+	 * setCalibrationToolSelectedColors or setCalibrationToolUnselectedColors when part of the preview
+	 * plane is obscured by model geometry. This should be between 0 and 1.
+	 * @category Calibration
+	 */
+	public static setCalibrationToolOcclusionOpacity(opacity: number) {
+		UnityUtil.toUnity('SetCalibrationToolOcclusionOpacity', UnityUtil.LoadingState.VIEWER_READY, opacity);
+	}
+
+	/**
+	 * Shows the DrawingImageSource for the Lower and Upper vertical planes at the horizontal location specified by rect.
+	 * rect should be the size and location of the image, given as the location of three corners (bottomLeft, bottomRight,
+	 * topLeft) in Project coordinates. The height will be taken from the current state of the Vertical Planes. If image is
+	 * null, the location of the existing image is updated. If no image has ever been loaded, a white rectangle is shown in
+	 * its place.
+	 * @category Calibration
+	 */
+	public static setCalibrationToolDrawing(image: DrawingImageSource, rect: number[]) {
+		let index = -1;
+		let dimensions = [0, 0];
+
+		if (image !== null) {
+			index = this.domTextureReferenceCounter++;
+			this.domTextureReferences[index] = image; // Store a reference to the image, as the viewer will request it momentarily
+			dimensions = [image.width, image.height];
+		}
+
+		var parms = {
+			worldRect: rect, //[bottomLeftX, bottomLeftY, bottomRightX, bottomRightY, topLeftX, topLeftY]
+			domId: index,
+			dimensions,
+		};
+		UnityUtil.toUnity('SetCalibrationToolDrawing', UnityUtil.LoadingState.VIEWER_READY, JSON.stringify(parms));
+	}
+
+	/**
+	 * Populates the provided WebGLTexture texture with the contents of the DrawingImageSource indexed by id.
+	 * (This method could be moved entirely inside Unity if desired in the future.)
+	 * @param ctx The rendering context used by Module
+	 * @param id The index of the DrawingImageSource in domTextureReferences. This will be removed from domTextureReferences.
+	 * @param texture The WebGLTexture created by Unity
+	 */
+	/** @hidden */
+	public static copyToWebGLTexture(ctx: WebGL2RenderingContext, index: number, texture: WebGLTexture) {
+		ctx.bindTexture(ctx.TEXTURE_2D, texture);
+		const image = this.domTextureReferences[index];
+		ctx.texSubImage2D(ctx.TEXTURE_2D, 0, 0, 0, image.width, image.height, ctx.RGBA, ctx.UNSIGNED_BYTE, image);
+		delete this.domTextureReferences[index];
+	}
+
 	/**
 	 * Sets the maximum number of responses WebRequestManager2 should attempt to
 	 * handle at any one time. The higher this is the faster models will load but

frontend/src/v4/constants/viewer.ts

@@ -89,6 +89,7 @@ export const VIEWER_EVENTS = {
 	UNHIGHLIGHT_OBJECTS: 'VIEWER_UNHIGHLIGHT_OBJECTS',
 	UNITY_ERROR: 'VIEWER_EVENT_UNITY_ERROR',
 	UNITY_READY: 'VIEWER_EVENT_UNITY_READY',
+	UPDATE_CALIBRATION_PLANES: 'VIEWER_UPDATE_CALIBRATION_PLANES',
 	UPDATE_CLIP: 'VIEWER_UPDATE_CLIP',
 	UPDATE_CLIP_EDIT: 'VIEWER_SET_CLIP_EDIT',
 	UPDATE_CLIP_MODE: 'VIEWER_UPDATE_CLIP_MODE',