Axis Aligned Bounding box disappears when editing

[dlangenk]

Problem

When editing an axis-aligned box annotation and dragging a corner so that two adjacent corners align on the same axis (i.e. the box collapses to zero width or height), the box disappears. After reloading, the box reappears but with a degenerated edge at the image origin.

Root cause

In @biigle/ol (biigle/openlayers repo), the function updateRectangleGeometry in src/ol/interaction/Modify.js normalizes direction vectors by dividing by their length. When an edge collapses to zero length, this produces a division by zero (0/0 = NaN), which propagates to all corner coordinates. The polygon can no longer render (disappears), and when saved, NaN values are serialized as 0, placing an edge at the image origin.

Change

File: src/ol/interaction/Modify.js — function updateRectangleGeometry

Wrapped both vector normalization + projection blocks in if (length > 0) guards. When the edge length is zero, the adjacent vertex stays at its current position instead of receiving NaN coordinates.

  let length = Math.sqrt(acrossToLeft[0] * acrossToLeft[0] + acrossToLeft[1] * acrossToLeft[1]);
- acrossToLeft[0] = acrossToLeft[0] / length;
- acrossToLeft[1] = acrossToLeft[1] / length;
- let dot = acrossToVertex[0] * acrossToLeft[0] + acrossToVertex[1] * acrossToLeft[1];
- coords[(segmentData.index + index + 1) % 4] = [
-   across[0] + dot * acrossToLeft[0],
-   across[1] + dot * acrossToLeft[1],
- ];
+ if (length > 0) {
+   acrossToLeft[0] = acrossToLeft[0] / length;
+   acrossToLeft[1] = acrossToLeft[1] / length;
+   let dot = acrossToVertex[0] * acrossToLeft[0] + acrossToVertex[1] * acrossToLeft[1];
+   coords[(segmentData.index + index + 1) % 4] = [
+     across[0] + dot * acrossToLeft[0],
+     across[1] + dot * acrossToLeft[1],
+   ];
+ }

The same guard is applied to the acrossToRight block below it.

How to verify

1. Open the image annotation tool and create an axis-aligned box (Shift+S)
2. Select the box so it enters edit/modify mode
3. Open Vue devtools, select the annotationCanvas component, then run in the browser console:

let features = $vm.ctx.annotationSource.getFeatures();
let rect = features.find(f => f.getGeometry().getType() === 'Rectangle');
let coords = rect.getGeometry().getCoordinates();
// Collapse height to zero
coords[0][0][1] = coords[0][2][1];
coords[0][1][1] = coords[0][2][1];
rect.getGeometry().setCoordinates(coords);

4. Drag any corner of the now-degenerate box

Before fix: The box disappears immediately. After reload, an edge is at the image origin.
After fix: The box stays visible and recovers to a normal shape as you continue dragging.

[dlangenk]

Video proof of the problem can be found here: #1372