optica-core 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optica-core",
-  "version": "0.2.1",
+  "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)
     }
-}
+}