lost-sia 3.0.0 → 3.1.1-alpha3

package/dist/stories/AnnotationTools.stories.d.ts

@@ -3,7 +3,7 @@ import { AllowedTools } from '../types';
 export declare const ActionsData: {};
 declare const meta: {
     title: string;
-    component: ({ additionalButtons, allowedTools: propAllowedTools, polygonOperationResult, annotationSettings: propAnnotationSettings, uiConfig: propUiConfig, defaultAnnotationTool, defaultLabelId, image, isLoading, isPolygonSelectionMode, initialAnnotations, initialImageLabelIds, initialIsImageJunk, possibleLabels, onAnnoCreated, onAnnoCreationFinished, onAnnoChanged, onAnnoDeleted, onImageLabelsChanged, onIsImageJunk, onNotification, onSelectAnnotation, }: {
+    component: ({ additionalButtons, allowedTools: propAllowedTools, polygonOperationResult, annotationSettings: propAnnotationSettings, uiConfig: propUiConfig, defaultAnnotationTool, defaultLabelId, image, isLoading, isPolygonSelectionMode, initialAnnotations, initialImageLabelIds, initialIsImageJunk, possibleLabels, onAnnoCreated, onAnnoCreationFinished, onAnnoChanged, onAnnoDeleted, onImageLabelsChanged, onIsImageJunk, onNotification, onSelectAnnotation, onTimeTravel, }: {
         additionalButtons?: import('react').ReactElement;
         allowedTools?: AllowedTools;
         polygonOperationResult?: import('..').PolygonOperationResult;
@@ -26,6 +26,7 @@ declare const meta: {
         onIsImageJunk?: (isJunk: boolean) => void;
         onNotification?: (notification: import('..').SIANotification) => void;
         onSelectAnnotation?: (annotation: import('../models').Annotation) => void;
+        onTimeTravel?: (timeTravelAction: import('..').TimeTravelChanges) => void;
     }) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;

package/dist/stories/Canvas/Canvas.stories.d.ts

@@ -2,13 +2,13 @@ import { StoryObj } from '@storybook/react';
 import { default as AnnotationTool } from '../../models/AnnotationTool';
 import { AnnotationSettings, UiConfig } from '../../types';
 export declare const ActionsData: {
-    onAnnoEvent: import('@vitest/spy').Mock<(...args: any[]) => any>;
-    onKeyDown: import('@vitest/spy').Mock<(...args: any[]) => any>;
-    onKeyUp: import('@vitest/spy').Mock<(...args: any[]) => any>;
+    onAnnoEvent: any;
+    onKeyDown: any;
+    onKeyUp: any;
 };
 declare const meta: {
     title: string;
-    component: ({ annotations, annotationSettings, defaultLabelId, image, isFullscreen, isImageJunk, isPolygonSelectionMode, polygonOperationResult, possibleLabels, preventScrolling, selectedAnnotation, selectedAnnoTool, toolbarHeight, uiConfig, onAnnoCreated, onAnnoCreationFinished, onAnnoChanged, onAnnoEditing, onNotification, onRequestNewAnnoId, onSelectAnnotation, onSetIsImageJunk, onSetSelectedTool, onShouldDeleteAnno, }: {
+    component: ({ annotations, annotationSettings, defaultLabelId, image, isFullscreen, isImageJunk, isPolygonSelectionMode, polygonOperationResult, possibleLabels, preventScrolling, selectedAnnotation, selectedAnnoTool, toolbarHeight, uiConfig, onAnnoCreated, onAnnoCreationFinished, onAnnoChanged, onAnnoEditing, onNotification, onRequestNewAnnoId, onSelectAnnotation, onSetIsImageJunk, onSetSelectedTool, onShouldDeleteAnno, onTraverseAnnotationHistory, }: {
         annotations?: import('../../models').Annotation[];
         annotationSettings: AnnotationSettings;
         defaultLabelId?: number;
@@ -33,6 +33,7 @@ declare const meta: {
         onSetIsImageJunk: (newJunkState: boolean) => void;
         onSetSelectedTool: (tool: AnnotationTool) => void;
         onShouldDeleteAnno: (internalAnnoId: number) => void;
+        onTraverseAnnotationHistory: (isUndo: boolean) => void;
     }) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;

package/dist/stories/Canvas/CanvasWithOffset.stories.d.ts

@@ -2,9 +2,9 @@ import { StoryObj } from '@storybook/react';
 import { default as AnnotationTool } from '../../models/AnnotationTool';
 import { UiConfig } from '../../types';
 export declare const ActionsData: {
-    onAnnoEvent: import('@vitest/spy').Mock<(...args: any[]) => any>;
-    onKeyDown: import('@vitest/spy').Mock<(...args: any[]) => any>;
-    onKeyUp: import('@vitest/spy').Mock<(...args: any[]) => any>;
+    onAnnoEvent: any;
+    onKeyDown: any;
+    onKeyUp: any;
 };
 declare const meta: {
     title: string;
@@ -22,9 +22,9 @@ declare const meta: {
     tags: string[];
     excludeStories: RegExp;
     args: {
-        onAnnoEvent: import('@vitest/spy').Mock<(...args: any[]) => any>;
-        onKeyDown: import('@vitest/spy').Mock<(...args: any[]) => any>;
-        onKeyUp: import('@vitest/spy').Mock<(...args: any[]) => any>;
+        onAnnoEvent: any;
+        onKeyDown: any;
+        onKeyUp: any;
     };
 };
 export default meta;

package/dist/stories/MinimalSia.stories.d.ts

@@ -3,7 +3,7 @@ import { Label } from '../types';
 export declare const ActionsData: {};
 declare const meta: {
     title: string;
-    component: ({ additionalButtons, allowedTools: propAllowedTools, polygonOperationResult, annotationSettings: propAnnotationSettings, uiConfig: propUiConfig, defaultAnnotationTool, defaultLabelId, image, isLoading, isPolygonSelectionMode, initialAnnotations, initialImageLabelIds, initialIsImageJunk, possibleLabels, onAnnoCreated, onAnnoCreationFinished, onAnnoChanged, onAnnoDeleted, onImageLabelsChanged, onIsImageJunk, onNotification, onSelectAnnotation, }: {
+    component: ({ additionalButtons, allowedTools: propAllowedTools, polygonOperationResult, annotationSettings: propAnnotationSettings, uiConfig: propUiConfig, defaultAnnotationTool, defaultLabelId, image, isLoading, isPolygonSelectionMode, initialAnnotations, initialImageLabelIds, initialIsImageJunk, possibleLabels, onAnnoCreated, onAnnoCreationFinished, onAnnoChanged, onAnnoDeleted, onImageLabelsChanged, onIsImageJunk, onNotification, onSelectAnnotation, onTimeTravel, }: {
         additionalButtons?: import('react').ReactElement;
         allowedTools?: import('..').AllowedTools;
         polygonOperationResult?: import('..').PolygonOperationResult;
@@ -26,6 +26,7 @@ declare const meta: {
         onIsImageJunk?: (isJunk: boolean) => void;
         onNotification?: (notification: import('..').SIANotification) => void;
         onSelectAnnotation?: (annotation: import('../models').Annotation) => void;
+        onTimeTravel?: (timeTravelAction: import('..').TimeTravelChanges) => void;
     }) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
@@ -56,6 +57,7 @@ declare const meta: {
         onIsImageJunk?: (isJunk: boolean) => void;
         onNotification?: (notification: import('..').SIANotification) => void;
         onSelectAnnotation?: (annotation: import('../models').Annotation) => void;
+        onTimeTravel?: (timeTravelAction: import('..').TimeTravelChanges) => void;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/dist/stories/SIA/SIA.stories.d.ts

@@ -3,7 +3,7 @@ import { UiConfig } from '../../types';
 export declare const ActionsData: {};
 declare const meta: {
     title: string;
-    component: ({ additionalButtons, allowedTools: propAllowedTools, polygonOperationResult, annotationSettings: propAnnotationSettings, uiConfig: propUiConfig, defaultAnnotationTool, defaultLabelId, image, isLoading, isPolygonSelectionMode, initialAnnotations, initialImageLabelIds, initialIsImageJunk, possibleLabels, onAnnoCreated, onAnnoCreationFinished, onAnnoChanged, onAnnoDeleted, onImageLabelsChanged, onIsImageJunk, onNotification, onSelectAnnotation, }: {
+    component: ({ additionalButtons, allowedTools: propAllowedTools, polygonOperationResult, annotationSettings: propAnnotationSettings, uiConfig: propUiConfig, defaultAnnotationTool, defaultLabelId, image, isLoading, isPolygonSelectionMode, initialAnnotations, initialImageLabelIds, initialIsImageJunk, possibleLabels, onAnnoCreated, onAnnoCreationFinished, onAnnoChanged, onAnnoDeleted, onImageLabelsChanged, onIsImageJunk, onNotification, onSelectAnnotation, onTimeTravel, }: {
         additionalButtons?: import('react').ReactElement;
         allowedTools?: import('../..').AllowedTools;
         polygonOperationResult?: import('../..').PolygonOperationResult;
@@ -26,6 +26,7 @@ declare const meta: {
         onIsImageJunk?: (isJunk: boolean) => void;
         onNotification?: (notification: import('../..').SIANotification) => void;
         onSelectAnnotation?: (annotation: import('../../models').Annotation) => void;
+        onTimeTravel?: (timeTravelAction: import('../..').TimeTravelChanges) => void;
     }) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
@@ -56,6 +57,7 @@ declare const meta: {
         onIsImageJunk?: (isJunk: boolean) => void;
         onNotification?: (notification: import('../..').SIANotification) => void;
         onSelectAnnotation?: (annotation: import('../../models').Annotation) => void;
+        onTimeTravel?: (timeTravelAction: import('../..').TimeTravelChanges) => void;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/dist/types.d.ts

@@ -55,3 +55,8 @@ export type Vector2 = {
     x: number;
     y: number;
 };
+export type TimeTravelChanges = {
+    addedAnnotations: Annotation[];
+    removedAnnotations: Annotation[];
+    changedAnnotations: Annotation[];
+};

package/dist/utils/KeyMapper.js

@@ -1 +1 @@
-var c=Object.defineProperty;var s=(i,t,r)=>t in i?c(i,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):i[t]=r;var A=(i,t,r)=>s(i,typeof t!="symbol"?t+"":t,r);import e from"../models/KeyAction.js";class o{constructor(t=void 0){A(this,"isControlDown",!1);A(this,"keyActionHandler");this.keyActionHandler=t}keyDown(t,r=!1,a=!1){switch(t){case"Enter":this.triggerKeyAction(e.EDIT_LABEL);break;case"Delete":this.triggerKeyAction(e.DELETE_ANNO);break;case"Backspace":this.triggerKeyAction(e.DELETE_ANNO);break;case"z":a&&this.triggerKeyAction(e.UNDO);break;case"y":a&&this.triggerKeyAction(e.REDO);break;case"Tab":r?this.triggerKeyAction(e.TRAVERSE_ANNOS_BACKWARDS):this.triggerKeyAction(e.TRAVERSE_ANNOS);break;case"w":this.triggerKeyAction(e.CAM_MOVE_UP);break;case"s":this.triggerKeyAction(e.CAM_MOVE_DOWN);break;case"a":this.triggerKeyAction(e.CAM_MOVE_LEFT);break;case"d":this.triggerKeyAction(e.CAM_MOVE_RIGHT);break;case"e":this.triggerKeyAction(e.RECREATE_ANNO);break;case"j":this.triggerKeyAction(e.TOGGLE_IMAGE_JUNK);break;case"c":a?this.triggerKeyAction(e.COPY_ANNOTATION):this.triggerKeyAction(e.TOGGLE_ANNO_COMMENT_INPUT);break;case"v":a&&this.triggerKeyAction(e.PASTE_ANNOTATION);break;case"Escape":this.triggerKeyAction(e.DELETE_ANNO_IN_CREATION);break;default:return!1}return!0}triggerKeyAction(t){this.keyActionHandler&&this.keyActionHandler(t)}}export{o as default};
+import e from"../models/KeyAction.js";class c{isControlDown=!1;keyActionHandler;constructor(t=void 0){this.keyActionHandler=t}keyDown(t,r=!1,i=!1){switch(t){case"Enter":this.triggerKeyAction(e.EDIT_LABEL);break;case"Delete":this.triggerKeyAction(e.DELETE_ANNO);break;case"Backspace":this.triggerKeyAction(e.DELETE_ANNO);break;case"z":i&&this.triggerKeyAction(e.UNDO);break;case"y":i&&this.triggerKeyAction(e.REDO);break;case"Tab":r?this.triggerKeyAction(e.TRAVERSE_ANNOS_BACKWARDS):this.triggerKeyAction(e.TRAVERSE_ANNOS);break;case"w":this.triggerKeyAction(e.CAM_MOVE_UP);break;case"s":this.triggerKeyAction(e.CAM_MOVE_DOWN);break;case"a":this.triggerKeyAction(e.CAM_MOVE_LEFT);break;case"d":this.triggerKeyAction(e.CAM_MOVE_RIGHT);break;case"e":this.triggerKeyAction(e.RECREATE_ANNO);break;case"j":this.triggerKeyAction(e.TOGGLE_IMAGE_JUNK);break;case"c":i?this.triggerKeyAction(e.COPY_ANNOTATION):this.triggerKeyAction(e.TOGGLE_ANNO_COMMENT_INPUT);break;case"v":i&&this.triggerKeyAction(e.PASTE_ANNOTATION);break;case"Escape":this.triggerKeyAction(e.DELETE_ANNO_IN_CREATION);break;default:return!1}return!0}triggerKeyAction(t){this.keyActionHandler&&this.keyActionHandler(t)}}export{c as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lost-sia",
-  "version": "3.0.0",
+  "version": "3.1.1-alpha3",
   "description": "Single Image Annotation Tool",
   "license": "MIT",
   "repository": "l3p-cv/lost-sia",
@@ -57,36 +57,34 @@
     "pretty": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json}\""
   },
   "dependencies": {
-    "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-draggable": "^4.4.6",
-    "sass": "^1.89.2",
+    "@fortawesome/free-regular-svg-icons": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.1",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "react-draggable": "^4.5.0",
+    "sass": "^1.95.0",
     "semantic-ui-css": "2.5.0",
     "semantic-ui-react": "^2.0.3"
   },
   "peerDependencies": {
     "@coreui/react": "^5.9.1",
     "prop-types": "^15.5.4",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.39.1",
     "@microsoft/api-extractor": "^7.52.13",
-    "@storybook/addon-docs": "^9.1.10",
-    "@storybook/addon-links": "^9.0.12",
-    "@storybook/react": "^9.0.12",
-    "@storybook/react-vite": "^9.0.12",
-    "@storybook/test": "9.0.0-alpha.2",
-    "@types/react": "^19.1.16",
+    "@storybook/addon-docs": "^10.1.6",
+    "@storybook/addon-links": "^10.1.6",
+    "@storybook/react": "^10.1.6",
+    "@storybook/react-vite": "^10.1.6",
+    "@types/react": "^19.2.7",
     "@typescript-eslint/eslint-plugin": "^8.46.1",
     "@typescript-eslint/parser": "^8.46.1",
-    "@vitejs/plugin-react": "^4.3.0",
-    "cross-env": "^7.0.3",
+    "@vitejs/plugin-react": "^5.1.2",
     "eslint": "^9.39.1",
     "eslint-config-standard": "^17.1.0",
     "eslint-config-standard-react": "^13.0.0",
@@ -96,15 +94,15 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-standard": "^5.0.0",
     "eslint-plugin-storybook": "^10.0.7",
-    "glob": "^11.0.3",
+    "glob": "^13.0.0",
     "lodash-es": "^4.17.21",
     "prettier": "^3.3.3",
     "react-redux": "^9.1.2",
     "redux": "^5.0.1",
-    "storybook": "^9.0.12",
+    "storybook": "^10.1.6",
     "unplugin-dts": "^1.0.0-beta.6",
-    "vite": "^5.4.19",
-    "vitest": "^1.6.1"
+    "vite": "^7.2.7",
+    "vitest": "^4.0.15"
   },
   "eslintConfig": {
     "extends": [

package/src/Annotation/ui/atoms/AnnoBar.tsx

@@ -48,7 +48,9 @@ const AnnoBar = ({
   useEffect(() => {
     // get the most top left point from the annotation
     const topPoints: Point[] = transform.getTopPoint(annotationCoordinates)
-    const newTopLeftPoint: Point = transform.getMostLeftPoints(topPoints)[0]
+    const newTopLeftPoints: Point[] = transform.getMostLeftPoints(topPoints)
+    const newTopLeftPoint: Point =
+      newTopLeftPoints.length > 0 ? newTopLeftPoints[0] : { x: 0, y: 0 }
 
     setTopLeftPoint(newTopLeftPoint)
 

package/src/Canvas/Canvas.tsx

@@ -63,6 +63,7 @@ type CanvasProps = {
   onSetIsImageJunk: (newJunkState: boolean) => void
   onSetSelectedTool: (tool: AnnotationTool) => void
   onShouldDeleteAnno: (internalAnnoId: number) => void
+  onTraverseAnnotationHistory: (isUndo: boolean) => void
 }
 
 const Canvas = ({
@@ -92,6 +93,7 @@ const Canvas = ({
   onSetIsImageJunk,
   onSetSelectedTool = (_) => {},
   onShouldDeleteAnno,
+  onTraverseAnnotationHistory,
 }: CanvasProps) => {
   const [editorMode, setEditorMode] = useState<EditorModes>(EditorModes.VIEW)
   const [annoTimestamp, setAnnoTimestamp] = useState<number | undefined>()
@@ -335,10 +337,28 @@ const Canvas = ({
     onSelectAnnotation(annotationToPaste)
   }
 
+  /** Returns the page-space position of an annotation's top-left corner.
+   * @param stageCoords - annotation coordinates already in stage (pixel) space
+   */
+  const getAnnoTopLeftPagePosition = (stageCoords: Point[]): Point => {
+    const leftPoints: Point[] = transform.getMostLeftPoints(stageCoords)
+    const topLeftPoint: Point = transform.getTopPoint(leftPoints)[0]
+    return transform.convertStageToPage(topLeftPoint, pageToStageOffset, svgScale, svgTranslation)
+  }
+
   const handleKeyAction = (keyAction: KeyAction) => {
     switch (keyAction) {
       case KeyAction.EDIT_LABEL:
-        if (selectedAnnotation) setIsLabelInputVisible(true)
+        if (selectedAnnotation) {
+          // selectedAnnotation coordinates are in the percentaged system — convert to stage first
+          const stageCoords = transform.convertPercentagedCoordinatesToStage(
+            selectedAnnotation.coordinates,
+            imgSize,
+            stageSize,
+          )
+          setLabelInputPosition(getAnnoTopLeftPagePosition(stageCoords))
+          setIsLabelInputVisible(true)
+        }
         break
       case KeyAction.DELETE_ANNO:
         if (selectedAnnotation) onShouldDeleteAnno(selectedAnnotation.internalId)
@@ -360,10 +380,10 @@ const Canvas = ({
         console.log('KeyAction TODO: LEAVE_ANNO_ADD_MODE')
         break
       case KeyAction.UNDO:
-        console.log('KeyAction TODO: UNDO')
+        onTraverseAnnotationHistory(true)
         break
       case KeyAction.REDO:
-        console.log('KeyAction TODO: REDO')
+        onTraverseAnnotationHistory(false)
         break
       case KeyAction.TRAVERSE_ANNOS:
         traverseAnnos()
@@ -741,16 +761,7 @@ const Canvas = ({
     onSelectAnnotation(percentagedAnnotation)
 
     // get top left point of annotation
-    const leftPoints: Point[] = transform.getMostLeftPoints(annotation.coordinates)
-    const topLeftPoint: Point = transform.getTopPoint(leftPoints)[0]
-    const pageTopLeftPoint: Point = transform.convertStageToPage(
-      topLeftPoint,
-      pageToStageOffset,
-      svgScale,
-      svgTranslation,
-    )
-
-    setLabelInputPosition(pageTopLeftPoint)
+    setLabelInputPosition(getAnnoTopLeftPagePosition(annotation.coordinates))
   }
 
   const handleOnAnnoChanged = (annotation: Annotation) => {
@@ -919,22 +930,21 @@ const Canvas = ({
               }
             }
 
+            // Look up the current annotation from scaledAnnotations
+            const currentScaled = scaledAnnotations.find(
+              (a) => a.internalId === selectedAnnotation.internalId,
+            )
+            if (!currentScaled) return
+
             // change the status to CHANGED when the annotation was loaded (initialAnnotations)
             const newAnnotationStatus: AnnotationStatus =
-              selectedAnnotation.status === AnnotationStatus.LOADED
+              currentScaled.status === AnnotationStatus.LOADED
                 ? AnnotationStatus.CHANGED
-                : selectedAnnotation.status
+                : currentScaled.status
 
-            // selectedAnnotation comes from SIA and is therefore in the percentaged system
-            // convert it first
-            // also update the new labels
             const updatedAnno: Annotation = {
               ...selectedAnnotation,
-              coordinates: transform.convertPercentagedCoordinatesToStage(
-                selectedAnnotation.coordinates,
-                imgSize,
-                stageSize,
-              ),
+              coordinates: currentScaled.coordinates,
               labelIds: [...selectedLabelIds],
               status: newAnnotationStatus,
             }

package/src/Canvas/LabelInput.tsx

@@ -67,7 +67,7 @@ const LabelInput = ({
       </CPopover>
 
       <CDropdown visible={isVisible} autoClose={false} style={{ marginTop: -25 }}>
-        {/* this invisible toggle has to be here, othervise the menu is not showing as intended */}
+        {/* this invisible toggle has to be here, otherwise the menu is not showing as intended */}
         <CDropdownToggle style={{ display: 'none' }} />
         <CDropdownMenu>
           <div className="px-3 py-2">

package/src/Sia.tsx

@@ -13,6 +13,7 @@ import {
   Label,
   PolygonOperationResult,
   SIANotification,
+  TimeTravelChanges,
   UiConfig,
 } from './types'
 
@@ -39,12 +40,13 @@ type SiaProps = {
   onIsImageJunk?: (isJunk: boolean) => void
   onNotification?: (notification: SIANotification) => void
   onSelectAnnotation?: (annotation: Annotation) => void
+  onTimeTravel?: (timeTravelAction: TimeTravelChanges) => void
 }
 
 /**
  * Main SIA component
  */
-const Sia2 = ({
+const Sia = ({
   additionalButtons,
   allowedTools: propAllowedTools,
   polygonOperationResult = { annotationsToDelete: [], polygonsToCreate: [] },
@@ -67,6 +69,7 @@ const Sia2 = ({
   onIsImageJunk = () => {},
   onNotification = (_) => {},
   onSelectAnnotation = (_) => {},
+  onTimeTravel = (_) => {},
 }: SiaProps) => {
   const marginBetweenToolbarAndContainerPixels: number = 10
 
@@ -78,6 +81,12 @@ const Sia2 = ({
   const [annotations, setAnnotations] = useState<Annotation[]>([])
   const [annotationSettings, setAnnotationSettings] = useState<AnnotationSettings>()
 
+  // tracks how far we went back in the history
+  const [annotationHistoryIndex, setAnnotationHistoryIndex] = useState<
+    number | undefined
+  >()
+  const [annotationHistory, setAnnotationHistory] = useState<Annotation[][]>([])
+
   const [uiConfig, setUiConfig] = useState<UiConfig>()
 
   const [selectedAnnotation, setSelectedAnnotation] = useState<Annotation>()
@@ -86,6 +95,26 @@ const Sia2 = ({
     defaultAnnotationTool ?? AnnotationTool.Point,
   )
 
+  const updateAnnotationHistory = (annotations: Annotation[]) => {
+    const _annotations = [...annotations]
+    const _annotationHistory = [...annotationHistory]
+
+    // user did some changes from within the past
+    // time to create an alternative timeline and delete the original one
+    if (annotationHistoryIndex !== undefined) {
+      // remove everything after the state the user is
+      _annotationHistory.splice(annotationHistoryIndex + 1)
+    }
+
+    // update the list with out latest change (it is always living in the present)
+    _annotationHistory.push(_annotations)
+
+    // keep history index marker in the present
+    setAnnotationHistoryIndex(undefined)
+
+    setAnnotationHistory(_annotationHistory)
+  }
+
   // for adjusting the container/canvas size
   // const [toolbarHeight, setToolbarHeight] = useState<number>(-1);
 
@@ -121,6 +150,7 @@ const Sia2 = ({
 
     setAnnotations(_annotations)
     setSelectedAnnotation(undefined)
+    updateAnnotationHistory(_annotations)
 
     // inform the outside world about our changes
     onAnnoDeleted(removedAnno, _annotations)
@@ -159,6 +189,7 @@ const Sia2 = ({
     setUsedInternalIds([...new Array(internalAnnoId).keys()])
 
     setAnnotations(_annotations)
+    updateAnnotationHistory(_annotations)
   }
 
   const createNewInternalAnnotationId = (): number => {
@@ -206,11 +237,86 @@ const Sia2 = ({
     onIsImageJunk(newJunkState)
   }
 
+  const handleTraverseAnnotationHistory = (isUndo: boolean) => {
+    // undefined -> last element
+    const _annotationHistoryIndex = annotationHistoryIndex ?? annotationHistory.length - 1
+
+    const isPresent = _annotationHistoryIndex == annotationHistory.length - 1
+    const isFirst = _annotationHistoryIndex == 0
+
+    // we cannot go into the future (yet) or past the past
+    if ((isPresent && !isUndo) || (isFirst && isUndo)) return
+
+    // request time travel using state update
+    const newHistoryIndex = _annotationHistoryIndex + (isUndo ? -1 : 1)
+    setAnnotationHistoryIndex(newHistoryIndex)
+  }
+
+  const getTimeTravelInductedChanges = (
+    timeTravelledAnnotations: Annotation[],
+  ): TimeTravelChanges => {
+    const addedAnnotations: Annotation[] = []
+    const removedAnnotations: Annotation[] = []
+    const changedAnnotations: Annotation[] = []
+
+    // check which items have been added or changed
+    for (const travelledAnno of timeTravelledAnnotations) {
+      const currentAnno = annotations.find(
+        (anno) => anno.internalId === travelledAnno.internalId,
+      )
+
+      if (!currentAnno) {
+        addedAnnotations.push(travelledAnno)
+      } else if (JSON.stringify(currentAnno) !== JSON.stringify(travelledAnno)) {
+        changedAnnotations.push(travelledAnno)
+      }
+    }
+
+    // check which items have been deleted
+    for (const anno of annotations) {
+      const travelledAnno = timeTravelledAnnotations.find(
+        (tAnno) => tAnno.internalId === anno.internalId,
+      )
+
+      if (!travelledAnno) {
+        removedAnnotations.push(anno)
+      }
+    }
+
+    return { addedAnnotations, removedAnnotations, changedAnnotations }
+  }
+
+  useEffect(() => {
+    if (
+      annotationHistoryIndex == undefined ||
+      annotationHistoryIndex < 0 ||
+      annotationHistoryIndex > annotationHistory.length - 1
+    )
+      return
+
+    // update the shown annotations when we travel in time using the history index
+    const refSelectedAnnotationsFromHistory = annotationHistory[annotationHistoryIndex]
+    const selectedAnnotationsFromHistory: Annotation[] = [
+      ...refSelectedAnnotationsFromHistory,
+    ]
+
+    setAnnotations(selectedAnnotationsFromHistory)
+
+    const timeTravelInductedChanges: TimeTravelChanges = getTimeTravelInductedChanges(
+      selectedAnnotationsFromHistory,
+    )
+    onTimeTravel(timeTravelInductedChanges)
+  }, [annotationHistoryIndex])
+
   useEffect(() => {
     // remove current annotations when the image changes
     if (image === undefined) {
       setAnnotations([])
       setSelectedAnnotation(undefined)
+
+      // reset time machine
+      setAnnotationHistory([])
+      setAnnotationHistoryIndex(undefined)
     }
   }, [image])
 
@@ -397,6 +503,7 @@ const Sia2 = ({
               setAnnotations(_annotations)
               setSelectedAnnotation(annotation)
               onAnnoCreated(annotation, _annotations)
+              // dont update history here - we dont have a finished anno at this point
             }}
             onAnnoChanged={(changedAnno: Annotation) => {
               // update annotation list
@@ -411,6 +518,11 @@ const Sia2 = ({
               _annotations[annoListIndex] = changedAnno
               setAnnotations(_annotations)
 
+              // only update history for full/finished annotations
+              if (changedAnno.status !== AnnotationStatus.CREATING) {
+                updateAnnotationHistory(_annotations)
+              }
+
               // inform the outside world about our change
               onAnnoChanged(changedAnno, _annotations)
             }}
@@ -445,6 +557,8 @@ const Sia2 = ({
                   }
                 }
               }
+              // mark annotation as fully created before storing it
+              changedAnno.status = AnnotationStatus.CREATED
 
               // are we just marking an existing annotation as finished or did we created it in the same frame
               if (hasAnnoJustBeenCreated) _annotations.push(changedAnno)
@@ -457,9 +571,7 @@ const Sia2 = ({
               }
 
               setAnnotations(_annotations)
-
-              // mark annotation as fully created
-              changedAnno.status = AnnotationStatus.CREATED
+              updateAnnotationHistory(_annotations)
 
               // inform the outer world about our changes
               onAnnoCreationFinished(changedAnno, _annotations)
@@ -474,6 +586,7 @@ const Sia2 = ({
             }}
             onSetSelectedTool={setSelectedAnnoTool}
             onShouldDeleteAnno={deleteAnnotationByInternalId}
+            onTraverseAnnotationHistory={handleTraverseAnnotationHistory}
           />
         )}
       </div>
@@ -481,4 +594,4 @@ const Sia2 = ({
   )
 }
 
-export default Sia2
+export default Sia

package/src/types.ts

@@ -65,3 +65,9 @@ export type Vector2 = {
   x: number
   y: number
 }
+
+export type TimeTravelChanges = {
+  addedAnnotations: Annotation[]
+  removedAnnotations: Annotation[]
+  changedAnnotations: Annotation[]
+}