feat(annotation) Add default annontation properties

add line length property

Author: chrisj

src/annotation/index.ts

@@ -18,6 +18,7 @@
  * @file Basic annotation data structures.
  */
 
+import { vec3 } from "gl-matrix";
 import type {
   BoundingBox,
   CoordinateSpaceTransform,
@@ -695,6 +696,13 @@ export interface AnnotationTypeHandler<T extends Annotation = Annotation> {
     annotation: T,
     callback: (vec: Float32Array, isVector: boolean) => void,
   ) => void;
+  defaultProperties: (
+    annotation: T,
+    scales: vec3,
+  ) => {
+    properties: AnnotationNumericPropertySpec[];
+    values: number[];
+  };
 }
 
 function serializeFloatVector(
@@ -814,6 +822,24 @@ export const annotationTypeHandlers: Record<
       callback(annotation.pointA, false);
       callback(annotation.pointB, false);
     },
+    defaultProperties(annotation: Line, scales: vec3) {
+      return {
+        properties: [
+          {
+            type: "float32",
+            identifier: "Length",
+            default: 0,
+            description: "Length of the line annotation in nanometers",
+          },
+        ],
+        values: [
+          vec3.dist(
+            vec3.mul(vec3.create(), scales, annotation.pointA as vec3),
+            vec3.mul(vec3.create(), scales, annotation.pointB as vec3),
+          ),
+        ],
+      };
+    },
   },
   [AnnotationType.POINT]: {
     icon: "⚬",
@@ -858,6 +884,11 @@ export const annotationTypeHandlers: Record<
     visitGeometry(annotation: Point, callback) {
       callback(annotation.point, false);
     },
+    defaultProperties(annotation: Point, scales: vec3) {
+      annotation;
+      scales;
+      return { properties: [], values: [] };
+    },
   },
   [AnnotationType.AXIS_ALIGNED_BOUNDING_BOX]: {
     icon: "❑",
@@ -926,6 +957,11 @@ export const annotationTypeHandlers: Record<
       callback(annotation.pointA, false);
       callback(annotation.pointB, false);
     },
+    defaultProperties(annotation: AxisAlignedBoundingBox, scales: vec3) {
+      annotation;
+      scales;
+      return { properties: [], values: [] };
+    },
   },
   [AnnotationType.ELLIPSOID]: {
     icon: "◎",
@@ -994,6 +1030,11 @@ export const annotationTypeHandlers: Record<
       callback(annotation.center, false);
       callback(annotation.radii, true);
     },
+    defaultProperties(annotation: Ellipsoid, scales: vec3) {
+      annotation;
+      scales;
+      return { properties: [], values: [] };
+    },
   },
 };
 

src/ui/annotations.ts

@@ -1854,6 +1854,22 @@ export function UserLayerWithAnnotationsMixin<
 
                 const { relationships, properties } = annotationLayer.source;
                 const sourceReadonly = annotationLayer.source.readonly;
+                const globalCoordinateSpace =
+                  this.manager.root.coordinateSpace.value;
+                const scales = new Float32Array(
+                  globalCoordinateSpace.scales.map((x) => x / 1e-9),
+                ) as vec3;
+                const defaultProperties = annotationTypeHandlers[
+                  annotation.type
+                ].defaultProperties(annotation, scales);
+                const allProperties = [
+                  ...defaultProperties.properties,
+                  ...properties,
+                ];
+                const allValues = [
+                  ...defaultProperties.values,
+                  ...annotation.properties,
+                ];
 
                 // Add the ID to the annotation details.
                 const label = document.createElement("label");
@@ -1872,8 +1888,10 @@ export function UserLayerWithAnnotationsMixin<
                 label.appendChild(valueElement);
                 parent.appendChild(label);
 
-                for (let i = 0, count = properties.length; i < count; ++i) {
-                  const property = properties[i];
+                for (let i = 0, count = allProperties.length; i < count; ++i) {
+                  const property = allProperties[i];
+                  const value = allValues[i];
+
                   const label = document.createElement("label");
                   label.classList.add("neuroglancer-annotation-property");
                   const idElement = document.createElement("span");
@@ -1886,7 +1904,6 @@ export function UserLayerWithAnnotationsMixin<
                   if (description !== undefined) {
                     label.title = description;
                   }
-                  const value = annotation.properties[i];
                   const valueElement = document.createElement("span");
                   valueElement.classList.add(
                     "neuroglancer-annotation-property-value",