optica-core 0.2.2 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optica-core",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Shared frontend core of the Optica viewers",
   "license": "GPL-3.0-or-later",
   "type": "module",
@@ -31,7 +31,6 @@
   },
   "peerDependencies": {
     "@phosphor-icons/vue": "^2.2.1",
-    "@tanstack/vue-query": "^5.51.16",
     "@vueuse/core": "^11.3.0",
     "axios": "^1.6.7",
     "class-variance-authority": "^0.7.1",
@@ -49,14 +48,10 @@
   "peerDependenciesMeta": {
     "vee-validate": {
       "optional": true
-    },
-    "@tanstack/vue-query": {
-      "optional": true
     }
   },
   "devDependencies": {
     "@phosphor-icons/vue": "^2.2.1",
-    "@tanstack/vue-query": "^5.51.16",
     "@types/color": "^4.2.0",
     "@vue/tsconfig": "^0.5.1",
     "@vueuse/core": "^11.3.0",

package/src/components/ui/app-menu/AppMenu.vue

@@ -43,7 +43,7 @@ defineSlots<{
   menus?(): any
 }>()
 
-const isDark = useDark({ storageKey: "localStorage" })
+const isDark = useDark()
 const toggleDark = useToggle(isDark)
 
 const importOpen = ref<boolean>(false)

package/src/components/ui/credits/Credits.vue

@@ -26,9 +26,7 @@ function initials(name: string): string {
     .join('')
 }
 
-const isDark = useDark({
-  storageKey: 'localStorage'
-})
+const isDark = useDark()
 </script>
 
 <template>

package/src/components/ui/distance/DistanceIteration.vue

@@ -1,29 +1,26 @@
 <script setup lang="ts" generic="D extends ListDistance">
 import { computed, ref, useTemplateRef } from "vue"
-import { round } from "mathjs"
 import draggable from "vuedraggable"
 import { PhEraser, PhEye, PhEyeSlash, PhX } from "@phosphor-icons/vue"
-import { ROUNDING, Scale, toScale, type ScaleUnit } from "../../../lib/utils"
+import type { ScaleUnit } from "../../../lib/utils"
 import { Button } from "../button"
 import { Input } from "../input"
 import { Label } from "../label"
 import { LandmarkIteration } from "../landmark"
 import { SelectScale } from "../select-scale"
-import type { ListDistance } from "./types"
-
-const scale = defineModel<ScaleUnit>('scale', { required: true })
+import type { ListAnnotations, ListDistance } from "./types"
 
 const props = withDefaults(defineProps<{
   distance: D
+  // its scale select changes the scale of the annotations
+  annotations: ListAnnotations<D>
   index: number
   // the selected distance shows its landmarks and its length
   selected?: boolean
-  adjustFactor?: number
   // units of the scale select
   units?: ScaleUnit[]
 }>(), {
   selected: true,
-  adjustFactor: 1,
 })
 
 const emit = defineEmits<{
@@ -41,12 +38,11 @@ defineSlots<{
 }>()
 
 const input = useTemplateRef('input')
+// the label is being typed
+const editing = ref<boolean>(false)
 const scrollSnapType = ref<boolean>(true)
 
-const length = computed(() => {
-  const value = props.distance.length(scale.value)
-  return value == undefined ? 0 : round(toScale(value, props.adjustFactor) / Scale[scale.value], ROUNDING)
-})
+const length = computed(() => props.annotations.scaled(props.distance))
 
 function changeColor(event: Event) {
   const target = event.currentTarget as HTMLInputElement | null
@@ -95,7 +91,7 @@ function showInput(event: MouseEvent) {
     emit('select', props.index)
     return
   }
-  props.distance.edit_label = true
+  editing.value = true
   input.value?.$el?.focus?.()
 }
 </script>
@@ -108,13 +104,13 @@ function showInput(event: MouseEvent) {
           <input type="color"
             class="h-8 w-8 block bg-white border border-gray-950 cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-300"
             :value="distance.getColorHEX()" title="Choose your color" @change="changeColor($event)">
-          <Label v-show="!distance.edit_label" class="flex whitespace-nowrap w-36 font-normal text-lg"
+          <Label v-show="!editing" class="flex whitespace-nowrap w-36 font-normal text-lg"
             @dblclick.stop="showInput">
             {{ distance.label }}
           </Label>
-          <Input v-show="distance.edit_label" ref="input" type="text" :model-value="distance.label"
-            class="flex h-auto w-full px-0" @focusout="distance.edit_label = false"
-            @keyup.enter="distance.edit_label = false" @update:model-value="changeLabel($event)" />
+          <Input v-show="editing" ref="input" type="text" :model-value="distance.label"
+            class="flex h-auto w-full px-0" @focusout="editing = false"
+            @keyup.enter="editing = false" @update:model-value="changeLabel($event)" />
         </div>
         <div class="flex row justify-end items-center space-x-3">
           <slot name="info" :distance="distance" />
@@ -152,9 +148,9 @@ function showInput(event: MouseEvent) {
     <div class="flex row justify-between">
       <div class="flex row space-x-1">
         <Label class="flex whitespace-nowrap w-auto items-center">Distance :</Label>
-        <Label class="flex whitespace-nowrap w-auto items-center">{{ length }} {{ scale }}</Label>
+        <Label class="flex whitespace-nowrap w-auto items-center">{{ length }} {{ annotations.scale }}</Label>
       </div>
-      <SelectScale v-if="selected" v-model="scale" :units="units" />
+      <SelectScale v-if="selected" v-model="annotations.scale" :units="units" />
       <div v-else />
       
     </div>

package/src/components/ui/distance/DistanceList.vue

@@ -6,20 +6,17 @@ import { PhCircle } from "@phosphor-icons/vue"
 import { Button } from "../button"
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../select"
 import DistanceIteration from "./DistanceIteration.vue"
-import type { ListDistance } from "./types"
+import type { ListAnnotations, ListDistance } from "./types"
 
 const distances = defineModel<D[]>({ required: true })
 // index of the selected distance, -1: the next landmark creates a new distance
 const selectedIndex = defineModel<number>('selected', { required: true })
-const scale = defineModel<ScaleUnit>('scale', { required: true })
-
-withDefaults(defineProps<{
-  adjustFactor?: number
+defineProps<{
+  // scale of the lengths and its calibration
+  annotations: ListAnnotations<D>
   // units of the scale select
   units?: ScaleUnit[]
-}>(), {
-  adjustFactor: 1,
-})
+}>()
 
 defineSlots<{
   info?(props: { distance: D }): any
@@ -76,14 +73,14 @@ function deleteDistance(index: number) {
       </Select>
       <Button variant="secondary" @click="select(-1)">New..</Button>
     </div>
-    <DistanceIteration v-if="selectedDistance" v-model:scale="scale" :distance="selectedDistance"
-      :index="selectedIndex" :selected="true" :adjust-factor="adjustFactor" :units="units"
+    <DistanceIteration v-if="selectedDistance" :distance="selectedDistance"
+      :index="selectedIndex" :selected="true" :annotations="annotations" :units="units"
       @delete="deleteDistance">
       <template v-if="$slots.info" #info="slotProps"><slot name="info" v-bind="slotProps" /></template>
       <template v-if="$slots['landmark-info']" #landmark-info="slotProps"><slot name="landmark-info" v-bind="slotProps" /></template>
     </DistanceIteration>
-    <DistanceIteration v-for="{ distance, index } in others" :key="index" v-model:scale="scale" :distance="distance"
-      :index="index" :selected="false" :adjust-factor="adjustFactor" :units="units" @delete="deleteDistance"
+    <DistanceIteration v-for="{ distance, index } in others" :key="index" :distance="distance"
+      :index="index" :selected="false" :annotations="annotations" :units="units" @delete="deleteDistance"
       @select="select">
       <template v-if="$slots.info" #info="slotProps"><slot name="info" v-bind="slotProps" /></template>
     </DistanceIteration>

package/src/components/ui/distance/types.ts

@@ -4,8 +4,6 @@ import type { ListLandmark } from "../landmark/types"
 // What the distance lists need, the core Distance fits
 export interface ListDistance<L extends ListLandmark = ListLandmark> {
   label: string
-  edit_label: boolean
-  edit_distance: boolean
   landmarks: L[]
   show: boolean
   getColorHEX(): string
@@ -15,3 +13,11 @@ export interface ListDistance<L extends ListLandmark = ListLandmark> {
   // length in image units for a scale, undefined while it can't be measured
   length(scale?: ScaleUnit): number | undefined
 }
+
+// What the distance lists need from the annotations, the core Annotations fits.
+// The scale select changes `scale`
+export interface ListAnnotations<D extends ListDistance = ListDistance> {
+  scale: ScaleUnit
+  // length of the distance shown in `scale`, calibrated and rounded
+  scaled(distance: D): number
+}

package/src/components/ui/image-viewer/ImageViewer.vue

@@ -20,6 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <script setup lang="ts" generic="L extends ViewerLandmark">
 import { onBeforeUnmount, onMounted, shallowRef, useTemplateRef, watch, type HTMLAttributes } from 'vue'
 import { cn, DOT_RADIUS, ZOOM_MAX, ZOOM_MIN } from '../../../lib/utils'
+import { interaction } from '../../../lib/interaction'
 import type { Coordinates } from '../../../data/models/coordinates'
 import type { ProjectImage, Ratio, Size } from '../../../data/models/image'
 import type { Camera } from '../../../data/models/camera'
@@ -127,6 +128,8 @@ loadImage()
 watch(() => [props.image.name, props.image.image, props.image.thumbnail], loadImage)
 watch(() => [props.landmarks, props.distances, props.extraLandmarks], () => update(), { deep: true })
 watch(() => [props.size.width, props.size.height, props.camera.zoom], () => update())
+// a landmark pressed in a list is drawn bigger
+watch(() => interaction.pressed, () => update())
 
 let resizeObserver: ResizeObserver | null = null
 
@@ -145,6 +148,9 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   resizeObserver?.disconnect()
+  if (landmarkDragged.value) {
+    interaction.dragged = null
+  }
   loadToken++
 })
 
@@ -267,7 +273,7 @@ function drawImage(c: HTMLCanvasElement) {
       drawTarget(ctx, toCanvas(marker), dotRadius)
     } else {
       const stroke = (props.markerStroke ?? defaultMarkerStroke)(landmark)
-      drawDot(ctx, toCanvas(marker), landmark.isClicked ? dotRadius * 2 : dotRadius, landmark.getColorHEX(), stroke)
+      drawDot(ctx, toCanvas(marker), interaction.pressed == landmark.id ? dotRadius * 2 : dotRadius, landmark.getColorHEX(), stroke)
     }
   }
 
@@ -405,7 +411,7 @@ function startDrag(event: MouseEvent) {
       if (landmark) {
         emit('select', landmark)
         if (props.canDrag?.(landmark) ?? true) {
-          landmark.isDragged = true
+          interaction.dragged = landmark.id
           draggedPos = markerOf(landmark) ?? pos
           landmarkDragged.value = landmark
         }
@@ -442,7 +448,7 @@ function stopDrag(event: MouseEvent) {
   const landmark = landmarkDragged.value
   if (landmark != null) {
     const pos = clampToImage(eventPos(event))
-    landmark.isDragged = false
+    interaction.dragged = null
     landmarkDragged.value = null
     draggedPos = { x: -1, y: -1 }
     emit('move', landmark, pos)

package/src/components/ui/image-viewer/types.ts

@@ -4,8 +4,6 @@ import type { Coordinates } from "../../../data/models/coordinates"
 export interface ViewerLandmark {
   id: string
   show?: boolean
-  isClicked?: boolean
-  isDragged?: boolean
   getColorHEX(): string
 }
 

package/src/components/ui/landmark/LandmarkIteration.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts" generic="L extends ListLandmark">
-import { nextTick, onBeforeUnmount, useTemplateRef, watch } from "vue"
+import { computed, nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from "vue"
 import { PhEye, PhEyeSlash, PhX } from "@phosphor-icons/vue"
 import { Button } from "../button"
 import { Input } from "../input"
 import { Label } from "../label"
 import { Separator } from "../separator"
+import { interaction } from "../../../lib/interaction"
 import type { ListLandmark } from "./types"
 
 const props = withDefaults(defineProps<{
@@ -33,6 +34,10 @@ defineSlots<{
   actions?(props: { landmark: L }): any
 }>()
 
+// the label is being typed
+const editing = ref<boolean>(false)
+const dragged = computed(() => interaction.dragged == props.landmark.id)
+
 function changeColor(event: Event) {
   const target = event.currentTarget as HTMLInputElement | null
   if (target == null) {
@@ -42,19 +47,21 @@ function changeColor(event: Event) {
 }
 
 function changeLabel(payload: string | number) {
-  props.landmark.setLabel(payload.toString())
+  props.landmark.label = payload.toString()
 }
 
-// isClicked stays true from pointer down until release, even while dragging the row.
+// The landmark stays pressed from pointer down until release, even while dragging the row.
 // The release is listened on window: during a drag the pointer is no longer over this row.
 function release() {
-  props.landmark.isClicked = false
+  if (interaction.pressed == props.landmark.id) {
+    interaction.pressed = null
+  }
   window.removeEventListener('pointerup', release)
   window.removeEventListener('pointercancel', release)
 }
 
 function press() {
-  props.landmark.isClicked = true
+  interaction.pressed = props.landmark.id
   window.addEventListener('pointerup', release)
   window.addEventListener('pointercancel', release)
 }
@@ -62,9 +69,9 @@ function press() {
 onBeforeUnmount(release)
 
 // Scroll the row into view when its landmark is dragged in the image viewer.
-// immediate: the row is often mounted after isDragged is set (sidebar tab/selection switch).
+// immediate: the row is often mounted after the drag started (sidebar tab/selection switch).
 const row = useTemplateRef('row')
-watch(() => props.landmark.isDragged, (isDragged) => {
+watch(dragged, (isDragged) => {
   if (isDragged) {
     nextTick(() => row.value?.scrollIntoView({ block: 'nearest' }))
   }
@@ -73,7 +80,7 @@ watch(() => props.landmark.isDragged, (isDragged) => {
 
 <template>
   <div ref="row" class="scroll-align border flex grow p-2" @pointerdown="press"
-    :class="{ 'dark:bg-purple-800 bg-purple-400': landmark.isDragged || highlighted }">
+    :class="{ 'dark:bg-purple-800 bg-purple-400': dragged || highlighted }">
     <div class="h-12 flex grow flex-row justify-between items-center font-normal px-3 py-2">
       <div class="flex flex-row w-full items-center justify-start space-x-3 py-3 mr-3">
         <svg v-if="handle" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor"
@@ -85,11 +92,11 @@ watch(() => props.landmark.isDragged, (isDragged) => {
         <input v-if="colorPicker" type="color"
           class="flex-none h-8 w-8 block bg-white border border-gray-950 cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-300"
           :value="landmark.getColorHEX()" title="Choose your color" @change="changeColor($event)">
-        <Label v-show="!landmark.getEdit()" class="whitespace-nowrap" @dblclick.stop="landmark.setEdit(true)">
+        <Label v-show="!editing" class="whitespace-nowrap" @dblclick.stop="editing = true">
           {{ landmark.label }}
         </Label>
-        <Input v-show="landmark.getEdit()" @dblclick.stop="" type="text" :model-value="landmark.label"
-          class="flex grow h-auto" @focusout="landmark.setEdit(false)" @keyup.enter="landmark.setEdit(false)"
+        <Input v-show="editing" @dblclick.stop="" type="text" :model-value="landmark.label"
+          class="flex grow h-auto" @focusout="editing = false" @keyup.enter="editing = false"
           @update:model-value="changeLabel($event)" />
       </div>
       <div v-if="$slots.info" class="flex items-center h-full w-auto justify-end space-x-3 pr-3">
@@ -108,7 +115,7 @@ watch(() => props.landmark.isDragged, (isDragged) => {
           </Button>
         </template>
         <slot name="actions" :landmark="landmark" />
-        <Button class="w-6 h-6 p-0" variant="destructive" @click="emit('remove', landmark.getId())">
+        <Button class="w-6 h-6 p-0" variant="destructive" @click="emit('remove', landmark.id)">
           <PhX class="relative w-4 h-4 p-0" />
         </Button>
       </div>

package/src/components/ui/landmark/LandmarkList.vue

@@ -32,7 +32,7 @@ defineSlots<{
 const scrollSnapType = ref<boolean>(true)
 
 function removeLandmark(id: string) {
-  landmarks.value = landmarks.value.filter((landmark) => landmark.getId() != id)
+  landmarks.value = landmarks.value.filter((landmark) => landmark.id != id)
   emit('remove', id)
 }
 </script>

package/src/components/ui/landmark/types.ts

@@ -3,9 +3,5 @@ import type { ViewerLandmark } from "../image-viewer/types"
 // What the lists need from a landmark, the core Landmark fits, so do the app ones
 export interface ListLandmark extends ViewerLandmark {
   label: string
-  getId(): string
-  getEdit(): boolean
-  setEdit(edit: boolean): void
-  setLabel(label: string): void
   setColorHEX(color: string): void
 }

package/src/components/ui/project-loader/ProjectLoader.vue

@@ -1,36 +1,39 @@
 <script setup lang="ts" generic="T">
-import { useQuery } from "@tanstack/vue-query"
+import { ref, shallowRef } from "vue"
 import { PhSpinnerGap } from "@phosphor-icons/vue"
 
-// Spinner / error / content around the loading of a project (the old CameraViewer wrappers)
-const props = withDefaults(defineProps<{
+// Spinner / error / content around the loading of a project (the old CameraViewer wrappers).
+// Loaded once: the apps read the object from the url at startup (?series=) and keep it for the session.
+// An app switching objects without reloading the page remounts it (:key="objectPath").
+const props = defineProps<{
   load: () => Promise<T>
-  queryKey?: unknown[]
-}>(), {
-  queryKey: () => ["all_images"],
-})
+}>()
 
 defineSlots<{
   default(props: { data: T }): any
 }>()
 
-const { isPending, isError, data, error } = useQuery({
-  queryKey: props.queryKey,
-  queryFn: () => props.load(),
-  // load() replaces the project of the store (shown image back to the first one):
-  // the images do not change during a session, never load them again on their own
-  staleTime: Infinity,
-  refetchOnWindowFocus: false,
-  refetchOnReconnect: false,
-})
+const status = ref<"pending" | "error" | "loaded">("pending")
+const data = shallowRef<T>()
+const error = ref<unknown>(null)
+
+props.load()
+  .then((loaded) => {
+    data.value = loaded
+    status.value = "loaded"
+  })
+  .catch((reason) => {
+    error.value = reason
+    status.value = "error"
+  })
 </script>
 
 <template>
   <div class="w-full h-full border flex justify-center items-center">
-    <div v-if="isPending" class="w-full h-full flex justify-center items-center">
+    <div v-if="status == 'pending'" class="w-full h-full flex justify-center items-center">
       <PhSpinnerGap class="animate-spin" width="10%" height="10%" />
     </div>
-    <div v-else-if="isError" class="w-full h-full flex justify-center items-center">
+    <div v-else-if="status == 'error'" class="w-full h-full flex justify-center items-center">
       <div class="text-red-600">{{ error }}</div>
     </div>
     <div v-else-if="data !== undefined" class="w-full h-full flex flex-col items-center">

package/src/config/appSettings.ts

@@ -2,7 +2,3 @@ export const providerSettings = {
     type : import.meta.env.VITE_BACKEND_TYPE,
     url: import.meta.env.VITE_BACKEND_URL
 }
-
-export const repositorySettings = {
-    type : import.meta.env.VITE_REPOSITORY,
-}

package/src/data/models/annotations.ts

@@ -1,11 +1,12 @@
 import { round } from "mathjs"
-import { adjustFactorFor, isScaleUnit, randomID, ROUNDING, Scale, toScale, type ScaleUnit } from "../../lib/utils"
+import { adjustFactorFor, isScaleUnit, randomID, ROUNDING, Scale, type ScaleUnit } from "../../lib/utils"
+import { is3D } from "./coordinates"
 import { Distance, type DistanceObject } from "./distance"
 import { Landmark, type LandmarkObject } from "./landmark"
 
 // Saved form of a distance of the annotations: with its length shown in the scale of the annotations (not read back)
 export type DistanceAnnotationObject = DistanceObject & {
-    value: number
+    distance: number
 }
 
 // Saved form of the annotations of an acquisition (scale_factor: key of the first polar exports)
@@ -46,7 +47,7 @@ export function landmarkCSVRow(type: string, group: string, landmark: Landmark):
     const { marker, image } = landmark.pose
     const position = landmark.position
     return [type, group, landmark.label, landmark.getColorHEX(), marker.x.toFixed(5).toString(), marker.y.toFixed(5).toString(),
-        image.name, image.label, position.x.toFixed(5).toString(), position.y.toFixed(5).toString(), position.z?.toFixed(5).toString() ?? ""]
+        image.name, image.label, position.x.toFixed(5).toString(), position.y.toFixed(5).toString(), is3D(position) ? position.z.toFixed(5).toString() : ""]
 }
 
 // Landmarks and distances of an acquisition: all its images (group and standalone) share
@@ -91,15 +92,26 @@ export class Annotations implements AnnotationsSet {
         return this.distances[index]!
     }
 
-    // length in image units shown in the current scale, corrected by the calibration and rounded
-    scaled(length: number): number {
-        return round(toScale(length, this.adjustFactor) / Scale[this.scale], ROUNDING)
+    // length of the distance shown in the current scale, corrected by the calibration and rounded (0 while it can't be measured)
+    scaled(distance: Distance): number {
+        return this.toUnit(distance.length(this.scale))
     }
 
-    // typing a known length on a distance calibrates the coordinate space
+    // length in image units -> in the current scale, corrected by the calibration.
+    // Pixels for the "px" scale: the calibration is made on physical lengths, it doesn't apply to them
+    protected inScale(length: number): number {
+        return this.scale == "px" ? length : length * this.adjustFactor / Scale[this.scale]
+    }
+
+    // inScale rounded for display (0 while it can't be measured)
+    protected toUnit(length: number | undefined): number {
+        return length == undefined ? 0 : round(this.inScale(length), ROUNDING)
+    }
+
+    // typing a known length on a distance calibrates the coordinate space (not in pixels, see inScale)
     calibrate(distance: Distance, target: number) {
         const value = distance.length(this.scale)
-        if (value && target > 0) {
+        if (this.scale != "px" && value && target > 0) {
             this.adjustFactor = adjustFactorFor(value, target, this.scale)
         }
     }
@@ -129,7 +141,7 @@ export class Annotations implements AnnotationsSet {
             landmarks: this.landmarks.map((landmark) => landmark.toJSON()),
             distances: this.distances.map((distance) => ({
                 ...distance.toJSON(),
-                value: this.scaled(distance.length(this.scale) ?? 0),
+                distance: this.scaled(distance),
             })),
         }
     }

package/src/data/models/coordinates.ts

@@ -12,21 +12,25 @@ export type Coords3D = {
     z: number
 }
 
-// Physical position returned by the backend, z is only given by 3D-aware apps
-export type Position = Coordinates & { z?: number }
+// Physical position returned by the backend: 2D (polar, spectral) or 3D (stack, depth).
+// What is known to be 3D is typed Coords3D (the 3D repositories), the shared models keep a Position
+export type Position = Coordinates | Coords3D
+
+export function is3D(position: Position): position is Coords3D {
+    return "z" in position && typeof position.z === "number"
+}
 
 export function vectorToString(vector: Position) {
-    const values = [vector.x, vector.y, ...(vector.z === undefined ? [] : [vector.z])]
+    const values = is3D(vector) ? [vector.x, vector.y, vector.z] : [vector.x, vector.y]
     return `(${values.map((v) => v.toFixed(ROUNDING)).join("; ")})`
 }
 
+// 3D only if both are
 export function distanceVector(first: Position, second: Position): Position {
-    const distance: Position = {
-        x: math.abs(second.x - first.x),
-        y: math.abs(second.y - first.y),
-    }
-    if (first.z !== undefined && second.z !== undefined) {
-        distance.z = math.abs(second.z - first.z)
+    const x = math.abs(second.x - first.x)
+    const y = math.abs(second.y - first.y)
+    if (is3D(first) && is3D(second)) {
+        return { x, y, z: math.abs(second.z - first.z) }
     }
-    return distance
+    return { x, y }
 }

package/src/data/models/dequeMax2.ts

@@ -1,30 +1,68 @@
-export class DequeMax2{
-    deque : Array<string>
+// At most two items in order of addition, adding a third one drops the first
+// (sphaer: the two selected landmarks, depth: the ends of a profile).
+// Items are compared with their equals, which also finds them by id (landmarks)
+export class DequeMax2<T extends { equals(other: T | string): boolean }> {
+    items: T[] = []
 
-    constructor(){
-        this.deque= new Array()
+    constructor(items: T[] = []) {
+        items.forEach((item) => this.add(item))
     }
 
-    add(landmark : string){
-        if(this.selected(landmark) || landmark == null){
-            return;
+    get length(): number {
+        return this.items.length
+    }
+
+    get first(): T | undefined {
+        return this.items[0]
+    }
+
+    get last(): T | undefined {
+        return this.items[this.items.length - 1]
+    }
+
+    isEmpty(): boolean {
+        return this.items.length == 0
+    }
+
+    isFull(): boolean {
+        return this.items.length == 2
+    }
+
+    // an item already in is not added again
+    add(item: T) {
+        if (this.contains(item)) {
+            return
         }
-        if(this.deque.length == 2){
-            this.deque.shift()
+        if (this.isFull()) {
+            this.items.shift()
         }
-        this.deque.push(landmark)
+        this.items.push(item)
+    }
+
+    popFirst() {
+        this.items.shift()
+    }
+
+    popLast() {
+        this.items.pop()
     }
-    
-    remove(landmark: string){
-        let index : number = this.deque.indexOf(landmark)
-        this.deque.splice(index, 1)
+
+    permute() {
+        this.items.reverse()
+    }
+
+    contains(item: T | string | null | undefined): boolean {
+        if (item == null) {
+            return false
+        }
+        return this.items.some((other) => other.equals(item))
     }
 
-    selected(landmark: string){
-        return this.deque.indexOf(landmark) >= 0
+    remove(item: T | string) {
+        this.items = this.items.filter((other) => !other.equals(item))
     }
 
-    fullSelected(){
-        return this.deque.length == 2
+    forEach(callback: (item: T) => void) {
+        this.items.forEach(callback)
     }
-}
+}

package/src/data/models/distance.ts

@@ -1,6 +1,6 @@
 import Color from "color"
 import { Landmark, type LandmarkObject } from "./landmark"
-import { distanceVector, type Coordinates, type Position } from "./coordinates"
+import { distanceVector, type Position } from "./coordinates"
 import { computeDistance, randomColorRGB, type ScaleUnit } from "../../lib/utils"
 
 export type DistanceObject = {
@@ -9,52 +9,40 @@ export type DistanceObject = {
     color: string,
 }
 
+// sum of the segments between consecutive landmarks, `point`: where a landmark is. undefined under two landmarks
+function sumOfSegments(landmarks: Landmark[], point: (landmark: Landmark) => Position) : number | undefined {
+    if(landmarks.length < 2 ){
+        return undefined
+    }
+    return computeDistance(landmarks.slice(1).map((landmark, i) => distanceVector(point(landmarks[i]!), point(landmark))))
+}
+
 export class Distance {
     label : string
     landmarks : Array<Landmark>
     color: Color
-    edit_label: boolean
-    edit_distance: boolean
     show : boolean
 
     constructor(label: string, landmarks : Array<Landmark> | null = null, color: Color | null = null){
         this.label = label
         this.landmarks = landmarks || new Array()
-        this.edit_label = false
-        this.edit_distance = false
         this.show = true
         this.color = color || Color.rgb(randomColorRGB())
     }
 
-    // Physical vector between each consecutive pair of landmarks
-    get distance() : Position[] | undefined{
-        if(this.landmarks.length < 2 ){
-            return undefined
-        }
-        let distance : Position[] = new Array()
-        for(let i = 1; i < this.landmarks.length; i++){
-            distance.push(distanceVector(this.landmarks[i-1].position, this.landmarks[i].position))
-        }
-        return distance
+    // physical length: sum of the segments between consecutive landmarks, undefined under two landmarks
+    get distance() : number | undefined {
+        return sumOfSegments(this.landmarks, (landmark) => landmark.position)
     }
 
-    // Pixel vector between each consecutive pair of landmarks
-    get distancePx() : Coordinates[] | undefined{
-        if(this.landmarks.length < 2 ){
-            return undefined
-        }
-        let distance : Coordinates[] = new Array()
-        for(let i = 1; i < this.landmarks.length; i++){
-            distance.push(distanceVector(this.landmarks[i-1].pose.marker, this.landmarks[i].pose.marker))
-        }
-        return distance
+    // pixel length: sum of the segments between consecutive markers, undefined under two landmarks
+    get distancePx() : number | undefined {
+        return sumOfSegments(this.landmarks, (landmark) => landmark.pose.marker)
     }
 
-    // length in image units: pixel length for the "px" scale, physical length otherwise.
-    // undefined while it can't be measured
+    // length in image units: pixel length for the "px" scale, physical length otherwise
     length(scale?: ScaleUnit) : number | undefined {
-        const intervals = scale == "px" ? this.distancePx : this.distance
-        return intervals === undefined ? undefined : computeDistance(intervals)
+        return scale == "px" ? this.distancePx : this.distance
     }
 
     in(landmark : Landmark | string) : boolean{

package/src/data/models/landmark.ts

@@ -23,9 +23,6 @@ export class Landmark {
     position : Position
     color: Color
     show: boolean
-    edit: boolean
-    isClicked: boolean
-    isDragged: boolean
 
     // pose.image may be the full image, only its reference is kept
     constructor(id: string, label: string, pose: Pose, position : Position, color: Color | null = null) {
@@ -33,11 +30,8 @@ export class Landmark {
         this.label = label
         this.pose = { marker: pose.marker, image: imageRef(pose.image) }
         this.position = position
-        this.edit = false
         this.color = color || Color.rgb(randomColorRGB())
         this.show = true
-        this.isClicked = false
-        this.isDragged = false
     }
 
     equals(other : Landmark | string | null | undefined){
@@ -58,16 +52,6 @@ export class Landmark {
         return { id: this.id, label: this.label, pose: this.pose, position : this.position, color: this.color.hex() }
     }
 
-    getId() : string {
-        return this.id
-    }
-    getLabel() : string {
-        return this.label
-    }
-    setLabel(label : string){
-        this.label = label
-    }
-
     getColorHEX() : string{
         return this.color.hex()
     }
@@ -87,23 +71,4 @@ export class Landmark {
             image : imageRef(image)
         }
     }
-
-    getPose() : Pose {
-        return this.pose
-    }
-
-    setPosition(position : Position) {
-        this.position = position
-    }
-
-    getPosition() : Position {
-        return this.position
-    }
-
-    getEdit() : boolean{
-        return this.edit
-    }
-    setEdit(edit : boolean){
-        this.edit = edit
-    }
 }

package/src/data/providers/backend.ts

@@ -0,0 +1,28 @@
+import type { DataProvider } from "./providers";
+import { WebProvider } from "./web_providers";
+import { OrthancProvider } from "./orthanc_providers";
+import { providerSettings } from "../../config/appSettings"
+
+// Backends an app can be served by (VITE_BACKEND_TYPE)
+export type BackendType = "WEB" | "ORTHANC"
+
+// how to build the provider of each backend from its url (VITE_BACKEND_URL)
+export type ProviderBuilders<P extends DataProvider> = Record<BackendType, (url: string) => P>
+
+// The core providers, `plugin`: the path of the app in Orthanc
+export function coreProviders(plugin: string): ProviderBuilders<DataProvider> {
+    return {
+        WEB: (url) => new WebProvider(url),
+        ORTHANC: (url) => new OrthancProvider(url, plugin),
+    }
+}
+
+// Provider of the backend set in the environment (.env: VITE_BACKEND_TYPE, VITE_BACKEND_URL).
+// Apps with their own routes pass their own providers (sphaer)
+export function createProvider<P extends DataProvider>(builders: ProviderBuilders<P>): P {
+    const type = providerSettings.type
+    if (!(type in builders)) {
+        throw new Error(`Unknown VITE_BACKEND_TYPE "${type}", expected one of ${Object.keys(builders).join(", ")}`)
+    }
+    return builders[type as BackendType](providerSettings.url)
+}

package/src/data/repositories/data_repository.ts

@@ -5,7 +5,7 @@ import type { ImageName, ProjectImage } from "../models/image";
 import type { Pose } from "../models/landmark";
 
 // Common part of every app repository, apps only have to parse their /images payload
-export abstract class DataRepository<TData> implements Repository<TData> {
+export abstract class DataRepository<TData, TPosition extends Position = Position> implements Repository<TData, TPosition> {
     provider: DataProvider;
 
     constructor(provider: DataProvider) {
@@ -14,9 +14,9 @@ export abstract class DataRepository<TData> implements Repository<TData> {
 
     abstract getImages(objectPath: string): Promise<TData>
 
-    computeLandmarkPosition(objectPath: string, pose: Pose) : Promise<Position> {
+    computeLandmarkPosition(objectPath: string, pose: Pose) : Promise<TPosition> {
         return this.provider.computeLandmarkPosition(objectPath, pose.image.name, pose.marker).then((res) => {
-            return res.data as Position
+            return res.data as TPosition
         })
     }
 

package/src/data/repositories/project_repository.ts

@@ -1,4 +1,5 @@
 import type { DataProvider } from "../providers/providers";
+import type { Position } from "../models/coordinates";
 import type { ProjectImage } from "../models/image";
 import { Acquisition, Project, type AcquisitionObject } from "../models/project";
 import type { AnnotationsSet } from "../models/annotations";
@@ -16,8 +17,9 @@ export function parseAcquisitions<TImage extends ProjectImage>(data: any): Acqui
 }
 
 // Loads /images as a Project, apps whose payload differs pass a parser
-export class ProjectRepository<TImage extends ProjectImage = ProjectImage, TAcquisition extends Acquisition<TImage, AnnotationsSet> = Acquisition<TImage>>
-    extends DataRepository<Project<TImage, TAcquisition>> {
+// TPosition: Coords3D when the backend gives 3D positions (stack, depth)
+export class ProjectRepository<TImage extends ProjectImage = ProjectImage, TAcquisition extends Acquisition<TImage, AnnotationsSet> = Acquisition<TImage>, TPosition extends Position = Position>
+    extends DataRepository<Project<TImage, TAcquisition>, TPosition> {
     parse: ProjectParser<TImage>
     createAcquisition: AcquisitionFactory<TImage, TAcquisition>
 

package/src/data/repositories/repository.ts

@@ -1,9 +1,10 @@
 import type { Position } from "../models/coordinates";
 import type { Pose } from "../models/landmark";
 
-export interface Repository<TData = unknown> {
+// TPosition: Coords3D for the apps whose backend gives 3D positions (stack, depth)
+export interface Repository<TData = unknown, TPosition extends Position = Position> {
     getImages : (objectPath:string) => Promise<TData>;
     getFullImage : (objectPath:string, imageName : string) => string;
     getThumbnail : (objectPath:string, imageName : string) => string;
-    computeLandmarkPosition : (objectPath:string, pose : Pose) => Promise<Position>;
+    computeLandmarkPosition : (objectPath:string, pose : Pose) => Promise<TPosition>;
 }

package/src/env.d.ts

@@ -3,5 +3,4 @@
 interface ImportMetaEnv {
     readonly VITE_BACKEND_TYPE: string
     readonly VITE_BACKEND_URL: string
-    readonly VITE_REPOSITORY: string
 }

package/src/index.ts

@@ -1,13 +1,13 @@
 export * from "./lib/utils"
 export * from "./lib/export"
 export * from "./lib/persistence"
+export * from "./lib/interaction"
 export * from "./config/appSettings"
 
 export * from "./data/models/coordinates"
 export * from "./data/models/image"
 export * from "./data/models/camera"
 export * from "./data/models/project"
-export * from "./data/models/marker"
 export * from "./data/models/landmark"
 export * from "./data/models/distance"
 export * from "./data/models/dequeMax2"
@@ -17,9 +17,8 @@ export * from "./data/providers/routes"
 export * from "./data/providers/providers"
 export * from "./data/providers/web_providers"
 export * from "./data/providers/orthanc_providers"
-export * from "./data/providers/provider_factory"
+export * from "./data/providers/backend"
 
 export * from "./data/repositories/repository"
 export * from "./data/repositories/data_repository"
 export * from "./data/repositories/project_repository"
-export * from "./data/repositories/repository_factory"

package/src/lib/interaction.ts

@@ -0,0 +1,10 @@
+import { reactive } from "vue"
+
+// What the user is doing with the landmarks right now, shared by the lists and the ImageViewer.
+// Not part of the models: never saved, one landmark at a time (by id).
+export const interaction = reactive({
+    // pressed in a list, until the pointer is released: the viewer draws it bigger
+    pressed: null as string | null,
+    // dragged in the viewer: its row in the lists is highlighted and scrolled to
+    dragged: null as string | null,
+})

package/src/lib/persistence.ts

@@ -34,17 +34,22 @@ export function usePersistedAnnotations(project: () => Project<any, any> | null
         }
     }, { immediate: true })
 
-    // watch the annotations only, not the images of the project.
+    // Watches what is saved, serialized: only a change of it writes the storage, not the
+    // display state of the annotations (hover, drag) nor the images of the project.
     // Registered after the restore: it saves the restored annotations, never empty ones over them.
-    watch(() => project()?.acquisitions.map((acquisition) => acquisition.annotations), () => {
+    watch(() => {
         const loaded = project()
         if (!loaded) {
-            return
+            return undefined
         }
         const saved: SavedAnnotations = {
             annotations: loaded.annotationsToJSON(),
             selection: Object.fromEntries(loaded.acquisitions.map((acquisition) => [acquisition.id, acquisition.annotations.getSelection()])),
         }
-        storage.setItem(key(loaded.objectPath), JSON.stringify(saved))
-    }, { deep: true })
+        return { objectPath: loaded.objectPath, json: JSON.stringify(saved) }
+    }, (saved, previous) => {
+        if (saved && (saved.objectPath != previous?.objectPath || saved.json != previous.json)) {
+            storage.setItem(key(saved.objectPath), saved.json)
+        }
+    })
 }

package/src/lib/utils.ts

@@ -31,9 +31,12 @@ export function randomColorRGB(): [number, number, number] {
   return [Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), Math.floor(Math.random() * 256)]
 }
 
-// short random base-36 id (landmarks)
-export function randomID(): string {
-  return (Math.random() + 1).toString(36).substring(7)
+const ID_CHARS = "0123456789abcdefghijklmnopqrstuvwxyz"
+
+// random base-36 id of `length` characters (landmarks, also their first label: kept short).
+// getRandomValues works on http too, unlike crypto.randomUUID
+export function randomID(length: number = 5): string {
+  return Array.from(crypto.getRandomValues(new Uint8Array(length)), (byte) => ID_CHARS[byte % ID_CHARS.length]).join("")
 }
 
 export enum Scale {
@@ -63,11 +66,6 @@ export const DOT_RADIUS = 4.5
 export const SPACE_TARGET = 0.2
 export const ROUNDING = 2
 
-// length in image units -> length shown in `scale`, corrected by the calibration factor
-export function toScale(length: number, adjustFactor: number): number {
-  return length * adjustFactor
-}
-
 // calibration factor so that `length` is shown as `target` in `scale`
 export function adjustFactorFor(length: number, target: number, scale: ScaleUnit): number {
   return target / length * Scale[scale]

package/tests/annotations.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, it } from "vitest"
 import { effectScope, isReactive, nextTick, reactive, shallowRef } from "vue"
 import Color from "color"
 import {
-  Acquisition, Annotations, Distance, Landmark, Project, usePersistedAnnotations,
+  Acquisition, Annotations, DequeMax2, Distance, Landmark, Project, usePersistedAnnotations,
   type ProjectImage,
 } from "../src"
 
@@ -90,7 +90,7 @@ describe("Project annotations", () => {
   it("lets an app use its own Annotations", () => {
     const a = new TaggedAcquisition({ id: "a", images: [image("i0")], size })
     expect(a.annotations.tagged).toBe(true)
-    a.annotations.restore({ distances: [{ label: "d", color: "#00ff00", landmarks: [], value: 0 }] })
+    a.annotations.restore({ distances: [{ label: "d", color: "#00ff00", landmarks: [], distance: 0 }] })
     expect(a.annotations.distances[0]).toBeInstanceOf(Distance)
   })
 
@@ -170,6 +170,28 @@ describe("usePersistedAnnotations", () => {
     scope2.stop()
   })
 
+  it("doesn't write the storage for what isn't saved", async () => {
+    const storage = new MemoryStorage()
+    const current = shallowRef<Project | null>(null)
+    const scope = effectScope()
+    scope.run(() => usePersistedAnnotations(() => current.value, storage))
+    current.value = reactive(new Project("A1", [acquisition("rotation")])) as Project
+    await nextTick()
+    const annotations = current.value.acquisition!.annotations
+    annotations.landmarks.push(landmark("kept"))
+    await nextTick()
+    let writes = 0
+    const setItem = storage.setItem.bind(storage)
+    storage.setItem = (key, value) => { writes++; setItem(key, value) }
+    annotations.landmarks[0]!.show = false
+    await nextTick()
+    expect(writes).toBe(0)
+    annotations.landmarks[0]!.label = "renamed"
+    await nextTick()
+    expect(writes).toBe(1)
+    scope.stop()
+  })
+
   it("ignores a saved selection that doesn't fit the annotations", () => {
     const annotations = new Annotations()
     annotations.newDistance()
@@ -179,3 +201,42 @@ describe("usePersistedAnnotations", () => {
     expect(annotations.selectedDistanceIndex).toBe(-1)
   })
 })
+
+describe("scale", () => {
+  const distance = () => new Distance("d", [
+    new Landmark("a", "a", { marker: { x: 0, y: 0 }, image: image("i0") }, { x: 0, y: 0 }),
+    new Landmark("b", "b", { marker: { x: 3, y: 4 }, image: image("i0") }, { x: 30, y: 40 }),
+  ])
+
+  it("applies the calibration to physical lengths, not to pixels", () => {
+    const annotations = new Annotations()
+    annotations.adjustFactor = 2
+    annotations.scale = "cm"
+    expect(annotations.scaled(distance())).toBe(10)
+    annotations.scale = "px"
+    expect(annotations.scaled(distance())).toBe(5)
+  })
+
+  it("doesn't calibrate in pixels", () => {
+    const annotations = new Annotations()
+    annotations.scale = "px"
+    annotations.calibrate(distance(), 10)
+    expect(annotations.adjustFactor).toBe(1)
+    annotations.scale = "mm"
+    annotations.calibrate(distance(), 10)
+    expect(annotations.adjustFactor).toBe(0.2)
+  })
+})
+
+describe("DequeMax2", () => {
+  it("keeps the last two items, finds them with equals", () => {
+    const deque = new DequeMax2([landmark("a"), landmark("b"), landmark("c")])
+    expect(deque.items.map((l) => l.id)).toEqual(["b", "c"])
+    deque.add(landmark("c"))
+    expect(deque.items.map((l) => l.id)).toEqual(["b", "c"])
+    expect([deque.contains("b"), deque.contains(landmark("a")), deque.contains(null)]).toEqual([true, false, false])
+    deque.remove("unknown")
+    deque.remove("b")
+    expect([deque.first?.id, deque.last?.id, deque.isFull()]).toEqual(["c", "c", false])
+  })
+})

package/src/data/models/marker.ts

@@ -1,8 +0,0 @@
-import Color from "color"
-import type { Coordinates } from "./coordinates"
-
-export type Marker = {
-    id : string,
-    pos : Coordinates,
-    color : Color
-}

package/src/data/providers/provider_factory.ts

@@ -1,32 +0,0 @@
-import type { DataProvider } from "./providers";
-import { WebProvider } from "./web_providers";
-import { providerSettings } from "../../config/appSettings"
-
-type ProviderBuilder = (url: string) => DataProvider
-
-// "ORTHANC" needs the plugin name of the app, register it with
-// ProviderFactory.register("ORTHANC", (url) => new OrthancProvider(url, "polaroptica"))
-export class ProviderFactory{
-    private static _instances = new Map<string, DataProvider>()
-    private static _builders = new Map<string, ProviderBuilder>([
-        ["WEB", (url) => new WebProvider(url)],
-    ])
-
-    static register(type : string, builder : ProviderBuilder){
-        this._builders.set(type, builder)
-        this._instances.delete(type)
-    }
-
-    static get(type : string = providerSettings.type) : DataProvider{
-        let instance = this._instances.get(type)
-        if(instance == null){
-            const builder = this._builders.get(type)
-            if(builder == null){
-                throw new Error(`Unknown provider type "${type}"`)
-            }
-            instance = builder(providerSettings.url)
-            this._instances.set(type, instance)
-        }
-        return instance
-    }
-}

package/src/data/repositories/repository_factory.ts

@@ -1,31 +0,0 @@
-import type { Repository } from "./repository";
-import type { DataProvider } from "../providers/providers";
-import { ProviderFactory } from "../providers/provider_factory";
-import { providerSettings, repositorySettings } from "../../config/appSettings"
-
-type RepositoryBuilder = (provider: DataProvider) => Repository<any>
-
-// Apps register their repository at startup:
-// RepositoryFactory.register("DATA", (provider) => new StackRepository(provider))
-export class RepositoryFactory{
-    private static _instances = new Map<string, Repository<any>>()
-    private static _builders = new Map<string, RepositoryBuilder>()
-
-    static register(type : string, builder : RepositoryBuilder){
-        this._builders.set(type, builder)
-        this._instances.delete(type)
-    }
-
-    static get<R extends Repository<any> = Repository>(type : string = repositorySettings.type) : R{
-        let instance = this._instances.get(type)
-        if(instance == null){
-            const builder = this._builders.get(type)
-            if(builder == null){
-                throw new Error(`Unknown repository type "${type}"`)
-            }
-            instance = builder(ProviderFactory.get(providerSettings.type))
-            this._instances.set(type, instance)
-        }
-        return instance as R
-    }
-}