lost-sia 2.0.1-alpha9 → 3.0.0

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

@@ -0,0 +1,72 @@
+import { StoryObj } from '@storybook/react';
+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, }: {
+        additionalButtons?: import('react').ReactElement;
+        allowedTools?: import('../..').AllowedTools;
+        polygonOperationResult?: import('../..').PolygonOperationResult;
+        annotationSettings?: import('../..').AnnotationSettings;
+        defaultAnnotationTool?: import('../../models').AnnotationTool;
+        defaultLabelId?: number;
+        image?: string;
+        isLoading?: boolean;
+        isPolygonSelectionMode?: boolean;
+        initialAnnotations?: import('../..').ExternalAnnotation[];
+        initialImageLabelIds?: number[];
+        initialIsImageJunk?: boolean;
+        possibleLabels: import('../..').Label[];
+        uiConfig?: UiConfig;
+        onAnnoCreated?: (createdAnno: import('../../models').Annotation, allAnnos: import('../../models').Annotation[]) => void;
+        onAnnoCreationFinished?: (createdAnno: import('../../models').Annotation, allAnnos: import('../../models').Annotation[]) => void;
+        onAnnoChanged?: (changedAnno: import('../../models').Annotation, allAnnos: import('../../models').Annotation[]) => void;
+        onAnnoDeleted?: (deletedAnno: import('../../models').Annotation, allAnnos: import('../../models').Annotation[]) => void;
+        onImageLabelsChanged?: (selectedImageIds: number[]) => void;
+        onIsImageJunk?: (isJunk: boolean) => void;
+        onNotification?: (notification: import('../..').SIANotification) => void;
+        onSelectAnnotation?: (annotation: import('../../models').Annotation) => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    excludeStories: RegExp;
+    args: {};
+    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        additionalButtons?: import('react').ReactElement;
+        allowedTools?: import('../..').AllowedTools;
+        polygonOperationResult?: import('../..').PolygonOperationResult;
+        annotationSettings?: import('../..').AnnotationSettings;
+        defaultAnnotationTool?: import('../../models').AnnotationTool;
+        defaultLabelId?: number;
+        image?: string;
+        isLoading?: boolean;
+        isPolygonSelectionMode?: boolean;
+        initialAnnotations?: import('../..').ExternalAnnotation[];
+        initialImageLabelIds?: number[];
+        initialIsImageJunk?: boolean;
+        possibleLabels: import('../..').Label[];
+        uiConfig?: UiConfig;
+        onAnnoCreated?: (createdAnno: import('../../models').Annotation, allAnnos: import('../../models').Annotation[]) => void;
+        onAnnoCreationFinished?: (createdAnno: import('../../models').Annotation, allAnnos: import('../../models').Annotation[]) => void;
+        onAnnoChanged?: (changedAnno: import('../../models').Annotation, allAnnos: import('../../models').Annotation[]) => void;
+        onAnnoDeleted?: (deletedAnno: import('../../models').Annotation, allAnnos: import('../../models').Annotation[]) => void;
+        onImageLabelsChanged?: (selectedImageIds: number[]) => void;
+        onIsImageJunk?: (isJunk: boolean) => void;
+        onNotification?: (notification: import('../..').SIANotification) => void;
+        onSelectAnnotation?: (annotation: import('../../models').Annotation) => void;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * SIA with dummy data
+ */
+export declare const Default: Story;
+/**
+ * Minimal SIA example
+ */
+export declare const Minimal: Story;
+export declare const Loading: Story;
+export declare const Junk: Story;

package/dist/stories/Toolbar/ImageTools/TagLabel.stories.d.ts

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ name, color, size: bodySize, style, triangleSize, onClick, }: {
+        name: string;
+        color?: string;
+        size?: number;
+        style?: import('react').CSSProperties;
+        triangleSize?: number;
+        onClick?: () => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {};
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const DifferentColor: Story;
+export declare const DifferentSize: Story;

package/dist/stories/Toolbar/Instructions.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: () => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/stories/Toolbar/Toolbar.stories.d.ts

@@ -0,0 +1,37 @@
+import { StoryObj } from '@storybook/react';
+import { default as AnnotationTool } from '../../models/AnnotationTool';
+import { AllowedTools, AnnotationSettings } from '../../types';
+declare const meta: {
+    title: string;
+    component: ({ annotationSettings, allowedTools, additionalButtons, isImageJunk, imageLabelIds, isDisabled, isFullscreen, possibleLabels, selectedTool, onImageLabelsChanged, onSetIsFullscreen, onSetIsImageJunk, onSetSelectedTool, onShouldDeleteSelectedAnnotation, }: {
+        annotationSettings: AnnotationSettings;
+        allowedTools: AllowedTools;
+        additionalButtons?: import('react').ReactElement;
+        isImageJunk?: boolean;
+        imageLabelIds?: number[];
+        isDisabled?: boolean;
+        isFullscreen?: boolean;
+        possibleLabels: import('../..').Label[];
+        selectedTool: AnnotationTool;
+        onImageLabelsChanged?: (selectedImageIds: number[]) => void;
+        onSetIsFullscreen?: (isFullscreen: boolean) => void;
+        onSetIsImageJunk?: (isImageJunk: boolean) => void;
+        onSetSelectedTool?: (selectedTool: AnnotationTool) => void;
+        onShouldDeleteSelectedAnnotation?: () => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+    argTypes: {
+        selectedTool: {
+            control: "select";
+            options: AnnotationTool[];
+        };
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const DifferentDefaultTool: Story;
+export declare const LimitedAllowedTools: Story;
+export declare const WithImageLabels: Story;

package/dist/stories/exampleData/exampleAnnotations.d.ts

@@ -0,0 +1,8 @@
+import { Annotation } from '../../models';
+declare const _default: {
+    bbox: Annotation[];
+    line: Annotation[];
+    point: Annotation[];
+    polygon: Annotation[];
+};
+export default _default;

package/dist/stories/exampleData/exampleExternalAnnotations.d.ts

@@ -0,0 +1,8 @@
+import { ExternalAnnotation } from '../../types';
+declare const _default: {
+    bbox: ExternalAnnotation[];
+    line: ExternalAnnotation[];
+    point: ExternalAnnotation[];
+    polygon: ExternalAnnotation[];
+};
+export default _default;

package/dist/stories/exampleData/exampleImage.d.ts

@@ -0,0 +1,2 @@
+declare const imageBlob: string;
+export default imageBlob;

package/dist/stories/exampleData/exampleLabels.d.ts

@@ -0,0 +1,6 @@
+import { Label } from '../../types';
+declare const _default: {
+    voc: Label[];
+    minimal: Label[];
+};
+export default _default;

package/dist/types.d.ts

@@ -0,0 +1,57 @@
+import { default as Annotation } from './Annotation/logic/Annotation';
+import { AnnotationStatus, AnnotationTool } from './models';
+import { default as NotificationType } from './models/NotificationType';
+export type AllowedTools = {
+    bbox: boolean;
+    junk: boolean;
+    line: boolean;
+    point: boolean;
+    polygon: boolean;
+};
+export type AnnotationSettings = {
+    minimalArea?: number;
+    canHaveMultipleLabels: boolean;
+    canEdit?: boolean;
+    canCreate: boolean;
+    canLabel: boolean;
+};
+export type ExternalAnnotation = {
+    externalId?: string;
+    annoTime?: number;
+    coordinates: Point[];
+    status: AnnotationStatus;
+    labelIds: number[];
+    type: AnnotationTool;
+};
+export type Label = {
+    id: number;
+    name: string;
+    description: string;
+    color?: string;
+};
+export type Point = {
+    x: number;
+    y: number;
+};
+export type PolygonOperationResult = {
+    polygonsToCreate: ToolCoordinates[];
+    annotationsToDelete: Annotation[];
+};
+export type SIANotification = {
+    title: string;
+    message: string;
+    type: NotificationType;
+};
+export type ToolCoordinates = {
+    coordinates: Point[];
+    type: AnnotationTool;
+};
+export type UiConfig = {
+    strokeWidth: number;
+    nodeRadius: number;
+    imageCentered: boolean;
+};
+export type Vector2 = {
+    x: number;
+    y: number;
+};

package/dist/utils/KeyMapper.d.ts

@@ -0,0 +1,9 @@
+import { default as KeyAction } from '../models/KeyAction';
+declare class KeyMapper {
+    isControlDown: boolean;
+    keyActionHandler: ((keyAction: any) => void) | undefined;
+    constructor(keyActionHandler?: ((keyAction: any) => void) | undefined);
+    keyDown(key: string, isShiftKeyPressed?: boolean, isCtrlKeyPressed?: boolean): boolean;
+    triggerKeyAction(keyAction: KeyAction): void;
+}
+export default KeyMapper;

package/dist/utils/KeyMapper.js

@@ -1 +1 @@
-import e from"../models/KeyAction.js";class s{constructor(t=void 0){this.isControlDown=!1,this.keyActionHandler=t}keyDown(t){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"Control":this.isControlDown=!0,this.triggerKeyAction(e.ENTER_ANNO_ADD_MODE);break;case"z":this.isControlDown&&this.triggerKeyAction(e.UNDO);break;case"r":this.isControlDown&&this.triggerKeyAction(e.REDO);break;case"Tab":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"c":this.isControlDown?this.triggerKeyAction(e.COPY_ANNOTATION):this.triggerKeyAction(e.TOGGLE_ANNO_COMMENT_INPUT);break;case"v":this.isControlDown&&this.triggerKeyAction(e.PASTE_ANNOTATION);break;case"Escape":this.triggerKeyAction(e.DELETE_ANNO_IN_CREATION);break}}keyUp(t){switch(t){case"Control":this.isControlDown=!1,this.triggerKeyAction(e.LEAVE_ANNO_ADD_MODE);break}}triggerKeyAction(t){this.keyActionHandler&&this.keyActionHandler(t)}}export{s as default};
+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};

package/dist/utils/TimeUtils.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    getRoundedDuration: (startTimestamp: number, stopTimestamp: number) => number;
+};
+export default _default;

package/dist/utils/TimeUtils.js

@@ -0,0 +1 @@
+const r=(t,o)=>{const n=((o-t)/1e3).toFixed(2);return Number.parseFloat(n)},d={getRoundedDuration:r};export{d as default};

package/dist/utils/color.d.ts

@@ -0,0 +1,2 @@
+export declare const getColor: (index?: number) => string;
+export declare const getDefaultColor: () => string;

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TimeUtils } from './TimeUtils';
+export { uiConfig, SIA_INITIAL_UI_CONFIG } from './uiConfig';

package/dist/utils/index.js

@@ -1 +1 @@
-import{SIA_INITIAL_UI_CONFIG as _,uiConfig as f}from"./uiConfig.js";export{_ as SIA_INITIAL_UI_CONFIG,f as uiConfig};
+import{default as e}from"./TimeUtils.js";import{SIA_INITIAL_UI_CONFIG as i,uiConfig as r}from"./uiConfig.js";export{i as SIA_INITIAL_UI_CONFIG,e as TimeUtils,r as uiConfig};

package/dist/utils/mouse.d.ts

@@ -0,0 +1,6 @@
+import { MouseEvent } from 'react';
+import { Point, Vector2 } from '../types';
+declare const _default: {
+    getAntiScaledMouseStagePosition: (e: MouseEvent, pageToStageOffset: Point, svgScale: number, svgTranslation: Vector2) => Point;
+};
+export default _default;

package/dist/utils/mouse.js

@@ -1 +1 @@
-function a(e,t){const o=n(e,t);return{x:o.x/t.scale-t.translateX,y:o.y/t.scale-t.translateY}}function n(e,t){return{x:e.pageX-t.left,y:e.pageY-t.top}}export{a as getMousePosition,n as getMousePositionAbs};
+const d=(o,t,e,s)=>{const a={x:o.pageX,y:o.pageY},n={x:a.x-t.x,y:a.y-t.y},x={x:n.x/e,y:n.y/e};return{x:x.x-s.x,y:x.y-s.y}},y={getAntiScaledMouseStagePosition:d};export{y as default};

package/dist/utils/siaIcons.js

@@ -1,12 +1,12 @@
-import{jsx as n}from"react/jsx-runtime";import"react";function r(){return n("svg",{version:"1.1",id:"Linie",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1190.549 841.891",width:"17px",children:n("path",{fill:"currentColor",d:`M986.331,109.582c7.141-10.669,28.926-51.179-2.968-85.299S891.011,8.972,891.011,8.972L539.125,133.474
+import{jsx as n}from"react/jsx-runtime";function o(){return n("svg",{version:"1.1",id:"Linie",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1190.549 841.891",width:"17px",children:n("path",{fill:"currentColor",d:`M986.331,109.582c7.141-10.669,28.926-51.179-2.968-85.299S891.011,8.972,891.011,8.972L539.125,133.474
                 L63.239,302.022c-21.503,7.998-53.586,30.072-60.956,61.716s-2.116,58.538,22.414,96.79S211.33,752.213,228.564,777.28
                 c26.453,36.868,62.16,58.042,105.507,57.154s365.665-7.485,365.665-7.485l331.7-8.325l89.453-2.293c0,0,70.998-7.179,69.861-60.287
                 c-1.135-53.108-74.618-62.721-74.618-62.721s-733.215,15.553-749.148,15.576c-22.688,0.201-45.355-15.278-54.146-28.928
                 s-175.79-272.956-175.79-272.956l600.587-212.338c0,0-73.179,67.087-99.315,100.041s-30.56,74.565-5.053,95.237
-                c31.188,24.081,91.974-3.708,123.127-39.312C782.35,323.912,979.191,120.251,986.331,109.582z`})})}function t(){return n("svg",{version:"1.1",id:"Linie",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1190.549 841.891",width:"17px",children:n("path",{fill:"none",stroke:"currentColor",strokeWidth:"120",strokeMiterlimit:"10",d:`M929.775,710.655
+                c31.188,24.081,91.974-3.708,123.127-39.312C782.35,323.912,979.191,120.251,986.331,109.582z`})})}function r(){return n("svg",{version:"1.1",id:"Linie",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1190.549 841.891",width:"17px",children:n("path",{fill:"none",stroke:"currentColor",strokeWidth:"120",strokeMiterlimit:"10",d:`M929.775,710.655
                 c0,23.386-19.134,42.52-42.52,42.52H278.991c-23.386,0-42.52-19.134-42.52-42.52V102.392c0-23.386,19.134-42.52,42.52-42.52
-                h608.264c23.386,0,42.52,19.134,42.52,42.52V710.655z`})})}function c(){return n("svg",{version:"1.1",id:"Linie",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1190.549 841.891",width:"17px",children:n("path",{fill:"none",stroke:"currentColor",strokeWidth:"120",strokeMiterlimit:"10",d:`M342.327,769.938
+                h608.264c23.386,0,42.52,19.134,42.52,42.52V710.655z`})})}function t(){return n("svg",{version:"1.1",id:"Linie",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1190.549 841.891",width:"17px",children:n("path",{fill:"none",stroke:"currentColor",strokeWidth:"120",strokeMiterlimit:"10",d:`M342.327,769.938
                 c-23.379,0.548-52.922-15.056-65.65-34.674L65.479,409.738c-12.729-19.619-5.085-41.998,16.984-49.732L917.331,67.421
                 c22.07-7.734,26.86-0.275,10.645,16.576L691.761,329.475c-16.216,16.852-14.503,42.542,3.807,57.092l425.212,337.901
-                c18.31,14.549,14.16,26.901-9.219,27.449L342.327,769.938z`})})}function e(){return n("svg",{version:"1.1",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1190.549 841.891",width:"17px",children:n("path",{fill:"currentColor",d:`M748.197,408.286c0,151.355-122.699,274.058-274.059,274.058c-151.357,0-274.057-122.703-274.057-274.058
-                c0-151.356,122.7-274.057,274.057-274.057C625.497,134.229,748.197,256.929,748.197,408.286z`})})}export{t as bBoxIcon,r as lineIcon,e as pointIcon,c as polygonIcon};
+                c18.31,14.549,14.16,26.901-9.219,27.449L342.327,769.938z`})})}function c(){return n("svg",{version:"1.1",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1190.549 841.891",width:"17px",children:n("path",{fill:"currentColor",d:`M748.197,408.286c0,151.355-122.699,274.058-274.059,274.058c-151.357,0-274.057-122.703-274.057-274.058
+                c0-151.356,122.7-274.057,274.057-274.057C625.497,134.229,748.197,256.929,748.197,408.286z`})})}export{r as bBoxIcon,o as lineIcon,c as pointIcon,t as polygonIcon};

package/dist/utils/transform.d.ts

@@ -0,0 +1,28 @@
+import { Point, Vector2 } from '../types';
+/**
+ * Get point that is closest to the left browser side.
+ *
+ * @param points list of points {x,y}
+ * @returns {object} A list of point [{x,y}...]. Multiple points are
+ *  returned when multiple points have the same distance to the left side.
+ */
+export declare const getMostLeftPoints: (points: Point[]) => Point[];
+/**
+ * Get point that is closest to the top of the browser.
+ *
+ * @param points list of points [x,y]
+ * @returns A list of point [[x,y]...]. Multiple points are
+ *  returned when multiple points have the same distance to the top.
+ */
+export declare const getTopPoint: (points: Point[]) => Point[];
+declare const _default: {
+    convertImageCoordinatesToStage: (imageCoordinates: Point[], imageSize: Vector2, stageSize: Vector2) => Point[];
+    convertPercentagedCoordinatesToImage: (percentagedCoordinates: Point[], imageSize: Vector2) => Point[];
+    convertPercentagedCoordinatesToStage: (percentagedCoordinates: Point[], imageSize: Vector2, stageSize: Vector2) => Point[];
+    convertStageCoordinatesToImage: (stageCoordinates: Point[], imageToStageFactor: number) => Point[];
+    convertStageCoordinatesToPercentaged: (scaledCoordinates: Point[], imageToStageFactor: number, imageSize: Vector2) => Point[];
+    convertStageToPage: (stageCoordinates: Point, pageToStageOffset: Point, svgScale: number, svgTranslation: Vector2) => Point;
+    getMostLeftPoints: (points: Point[]) => Point[];
+    getTopPoint: (points: Point[]) => Point[];
+};
+export default _default;

package/dist/utils/transform.js

@@ -1 +1 @@
-function L(r,o,t,n){switch(t){case"bBox":const x=o.width*r.w,c=o.height*r.h,y=n.x+o.width*r.x-x/2,h=n.y+o.height*r.y-c/2;return[{x:y,y:h},{x:y+x,y:h},{x:y+x,y:h+c},{x:y,y:h+c}];case"point":return[{x:n.x+o.width*r.x,y:n.y+o.height*r.y}];case"line":case"polygon":return r.map(i=>({x:n.x+o.width*i.x,y:n.y+o.height*i.y}))}}function p(r,o,t,n={x:0,y:0}){const x=o.width-2*n.x,c=o.height-2*n.y;switch(t){case"bBox":const y=r.map(s=>s.x),h=r.map(s=>s.y),i=Math.min(...y)-n.x,M=Math.max(...y)-n.x,u=Math.min(...h)-n.y,d=Math.max(...h)-n.y,e=M-i,a=d-u,b=i+e/2,B=u+a/2;return{x:b/x,y:B/c,w:e/x,h:a/c};case"point":return{x:(r[0].x-n.x)/x,y:(r[0].y-n.y)/c};case"line":case"polygon":return r.map(s=>({x:(s.x-n.x)/x,y:(s.y-n.y)/c}))}}function P(r){const o=r.map(c=>c.x),t=r.map(c=>c.y),n={x:Math.min(...o),y:Math.min(...t)},x={x:Math.max(...o),y:Math.max(...t)};return[n,x]}function X(r,o,t,n){const x=p(r,o,t);switch(t){case"bBox":return Math.abs(x.w*x.h)*n.width*n.height;case"line":case"point":return;case"polygon":let c=0;if(x.length>2){let y=x.length-1;for(let h=0;h<x.length;h++)c=c+(x[y].x+x[h].x)*(x[y].y-x[h].y),y=h}return Math.abs(c/2)*n.width*n.height;default:return}}function Y(r,o,t){return r.map(n=>({x:n.x+o,y:n.y+t}))}function w(r,o){switch(o){case"bBox":return r;case"point":case"line":case"polygon":let t=0,n=0,x=1/0,c=1/0;return r.forEach(y=>{y.x>t&&(t=y.x),y.y>n&&(n=y.y),y.x<x&&(x=y.x),y.y<c&&(c=y.y)}),[{x,y:c},{x:t,y:c},{x,y:n},{x:t,y:n}]}}function l(r,o){let t;switch(o){case"point":return r[0];case"line":case"polygon":case"bBox":t=w(r,o);const n=t[1].x-t[0].x,x=t[3].y-t[0].y;return{x:t[0].x+n/2,y:t[0].y+x/2}}}function m(r){let o=1/0,t=[];return r.forEach(n=>{n.x<o?(o=n.x,t=[],t.push(n)):n.x===o&&t.push(n)}),t}function A(r){let o=1/0,t=[];return r.forEach(n=>{n.y<o?(o=n.y,t=[],t.push(n)):n.y===o&&t.push(n)}),t}function I(r,o,t){const n=o.width-2*t.x,x=o.height-2*t.y;return r.map(y=>{let h=y.x,i=y.y;return y.x<=t.x?h=t.x:y.x>n+t.x&&(h=n+t.x),y.y<t.y?i=t.y:y.y>x+t.y&&(i=x+t.y),{x:h,y:i}})}function E(r,o,t){return t=t*(Math.PI/180),r.map(x=>({x:Math.round(Math.cos(t)*(x.x-o.x)-Math.sin(t)*(x.y-o.y)+o.x),y:Math.round(Math.sin(t)*(x.x-o.x)+Math.cos(t)*(x.y-o.y)+o.y)}))}function D(r,o,t){const n=t.width/o.width,x=t.height/o.height;return r.map(c=>({x:parseInt(c.x*n),y:parseInt(c.y*x)}))}const H={toSia:L,toBackend:p,getMinMaxPoints:P,getArea:X,move:Y,getBox:w,getCenter:l,getMostLeftPoint:m,getTopPoint:A,correctAnnotation:I,rotateAnnotation:E,resizeAnnoData:D};export{I as correctAnnotation,H as default,X as getArea,w as getBox,l as getCenter,P as getMinMaxPoints,m as getMostLeftPoint,A as getTopPoint,Y as move,D as resizeAnnoData,E as rotateAnnotation,p as toBackend,L as toSia};
+const c=(r,o,t)=>{const e=t.x/o.x;return r.map(s=>({x:s.x*e,y:s.y*e}))},d=(r,o)=>r.map(e=>({x:e.x*o.x,y:e.y*o.y})),y=(r,o,t)=>{const e=d(r,o);return c(e,o,t)},x=(r,o)=>r.map(e=>({x:e.x/o,y:e.y/o})),C=(r,o,t)=>x(r,o).map(n=>(n.x<0&&(n.x=0),n.y<0&&(n.y=0),n.x>t.x&&(n.x=t.x),n.y>t.y&&(n.y=t.y),n)).map(n=>({x:n.x/t.x,y:n.y/t.y})),g=(r,o,t,e)=>{const a={x:r.x+e.x,y:r.y+e.y},s={x:a.x*t,y:a.y*t};return{x:s.x+o.x,y:s.y+o.y}},u=r=>{let o=1/0,t=[];return r.forEach(e=>{e.x<o?(o=e.x,t=[],t.push(e)):e.x===o&&t.push(e)}),t},m=r=>{let o=1/0,t=[];return r.forEach(e=>{e.y<o?(o=e.y,t=[],t.push(e)):e.y===o&&t.push(e)}),t},f={convertImageCoordinatesToStage:c,convertPercentagedCoordinatesToImage:d,convertPercentagedCoordinatesToStage:y,convertStageCoordinatesToImage:x,convertStageCoordinatesToPercentaged:C,convertStageToPage:g,getMostLeftPoints:u,getTopPoint:m};export{f as default,u as getMostLeftPoints,m as getTopPoint};

package/dist/utils/windowViewport.d.ts

@@ -0,0 +1,22 @@
+import { Point, Vector2 } from '../types';
+declare const _default: {
+    getViewportCoordinates: (svgTranslation: Vector2, canvasSize: Vector2, svgScale: number, pointInViewport: Point) => {
+        window: {
+            xMin: number;
+            xMax: number;
+            yMin: number;
+            yMax: number;
+        };
+        viewport: {
+            xMin: number;
+            xMax: number;
+            yMin: number;
+            yMax: number;
+        };
+        vX: number;
+        vY: number;
+        scaleX: number;
+        scaleY: number;
+    };
+};
+export default _default;

package/dist/utils/windowViewport.js

@@ -1 +1 @@
-function r(i,n){const t={xMin:-1*n.translateX,xMax:-1*n.translateX+n.width/n.scale,yMin:-1*n.translateY,yMax:-1*n.translateY+n.height/n.scale},a={xMin:0,xMax:n.width,yMin:0,yMax:n.height},x=(a.xMax-a.xMin)/(t.xMax-t.xMin),e=(a.yMax-a.yMin)/(t.yMax-t.yMin),M=a.xMin+(i.x-t.xMin)*x,o=a.yMin+(i.y-t.yMin)*e;return{window:t,viewport:a,vX:M,vY:o,scaleX:x,scaleY:e}}function y(i,n,t){const a=n.scale;let x={x:0,y:0};return x.x=a/t*(i.x+n.translateX)-i.x,x.y=a/t*(i.y+n.translateY)-i.y,x}export{r as getViewportCoordinates,y as getZoomTranslation};
+const d=(y,n,o,t)=>{const x={xMin:-1*y.x,xMax:-1*y.x+n.x/o,yMin:-1*y.y,yMax:-1*y.y+n.y/o},M={xMin:0,xMax:n.x,yMin:0,yMax:n.y},i=(M.xMax-M.xMin)/(x.xMax-x.xMin),c=(M.yMax-M.yMin)/(x.yMax-x.yMin),w=M.xMin+(t.x-x.xMin)*i,e=M.yMin+(t.y-x.yMin)*c;return{window:x,viewport:M,vX:w,vY:e,scaleX:i,scaleY:c}},r={getViewportCoordinates:d};export{r as default};

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "lost-sia",
-  "version": "2.0.1-alpha9",
+  "version": "3.0.0",
   "description": "Single Image Annotation Tool",
   "license": "MIT",
   "repository": "l3p-cv/lost-sia",
-  "main": "src/index.js",
-  "module": "src/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "type": "module",
-  "types": "src/index.d.ts",
+  "types": "./dist/index.d.ts",
   "keywords": [
     "lost",
     "annotation",
@@ -20,22 +20,17 @@
   },
   "exports": {
     ".": {
-      "development": {
-        "types": "./src/types.ts",
-        "import": "./src/index.ts"
-      },
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
     "./utils": {
-      "development": "./src/utils/index.js",
       "types": "./dist/utils/index.d.ts",
       "import": "./dist/utils/index.js",
       "require": "./dist/utils/index.js"
     },
     "./models": {
-      "development": "./src/models/index.js",
+      "bun": "./src/models/index.js",
       "types": "./dist/models/index.d.ts",
       "import": "./dist/models/index.js",
       "require": "./dist/models/index.js"
@@ -58,7 +53,8 @@
     "start": "storybook dev -p 6006",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "format": "prettier --write src/"
+    "format": "prettier --write src/",
+    "pretty": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json}\""
   },
   "dependencies": {
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
@@ -72,28 +68,35 @@
     "semantic-ui-react": "^2.0.3"
   },
   "peerDependencies": {
-    "@coreui/react": "^5.7.0",
+    "@coreui/react": "^5.9.1",
     "prop-types": "^15.5.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "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",
+    "@typescript-eslint/eslint-plugin": "^8.46.1",
+    "@typescript-eslint/parser": "^8.46.1",
     "@vitejs/plugin-react": "^4.3.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.0.1",
+    "eslint": "^9.39.1",
     "eslint-config-standard": "^17.1.0",
     "eslint-config-standard-react": "^13.0.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.6.0",
-    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-promise": "^7.2.1",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-standard": "^5.0.0",
-    "glob": "^10.4.5",
+    "eslint-plugin-storybook": "^10.0.7",
+    "glob": "^11.0.3",
     "lodash-es": "^4.17.21",
     "prettier": "^3.3.3",
     "react-redux": "^9.1.2",

package/src/AnnoExampleViewer.jsx

@@ -1,24 +1,24 @@
-import Prompt from "./Prompt";
-import React from "react";
-import { Card, Image } from "semantic-ui-react";
+import Prompt from './Prompt'
+import React from 'react'
+import { Card, Image } from 'semantic-ui-react'
 
 const LabelExampleViewer = (props) => {
   const requestExample = (e) => {
-    e.stopPropagation();
+    e.stopPropagation()
     if (props.onRequestExample) {
-      props.onRequestExample();
+      props.onRequestExample()
     }
-  };
+  }
   const renderContent = () => {
-    if (!props.lbl) return null;
-    if (!props.exampleImg) return null;
+    if (!props.lbl) return null
+    if (!props.exampleImg) return null
     const description = (
       <div>
         {props.lbl.description}
         <h4>Comment:</h4>
-        {props.exampleImg.anno ? props.exampleImg.anno.comment : "no comment"}
+        {props.exampleImg.anno ? props.exampleImg.anno.comment : 'no comment'}
       </div>
-    );
+    )
     return (
       <div>
         <Card
@@ -46,24 +46,24 @@ const LabelExampleViewer = (props) => {
             {props.lbl.description}
             <Image src={props.exampleImg.img} centered size='medium'></Image> */}
       </div>
-    );
-  };
+    )
+  }
 
   const handlePromptClick = () => {
     if (props.onClose) {
-      props.onClose();
+      props.onClose()
     }
-  };
+  }
 
   return (
     <Prompt
       onClick={() => {
-        handlePromptClick();
+        handlePromptClick()
       }}
       active={props.active}
       content={renderContent()}
     />
-  );
-};
+  )
+}
 
-export default LabelExampleViewer;
+export default LabelExampleViewer

package/src/Annotation/logic/Annotation.ts

@@ -1,19 +1,18 @@
-import AnnotationMode from "../../models/AnnotationMode";
-import AnnotationStatus from "../../models/AnnotationStatus";
-import AnnotationTool from "../../models/AnnotationTool";
-import { Point } from "../../types";
+import { AnnotationMode } from '../../models'
+import AnnotationStatus from '../../models/AnnotationStatus'
+import AnnotationTool from '../../models/AnnotationTool'
+import { Point } from '../../types'
 
 class Annotation {
-  internalId: number;
-  externalId?: string;
-  annoTime?: number;
-  coordinates: Point[];
-  labelIds?: number[];
-  mode: AnnotationMode; // do we even need this globally? - only really used inside AnnotationComponent
-  selectedNode: number;
-  status?: AnnotationStatus;
-  type: AnnotationTool;
-  timestamp?: DOMHighResTimeStamp;
+  internalId: number
+  externalId?: string
+  annoTime: number
+  coordinates: Point[]
+  labelIds?: number[]
+  mode: AnnotationMode // do we even need this globally? - only really used inside AnnotationComponent
+  selectedNode: number
+  status: AnnotationStatus
+  type: AnnotationTool
 
   constructor(
     internalId: number,
@@ -21,19 +20,18 @@ class Annotation {
     coordinates: Point[],
     mode: AnnotationMode = AnnotationMode.CREATE,
     status: AnnotationStatus = AnnotationStatus.CREATING,
-    externalId: string = "",
+    externalId: string = '',
   ) {
-    this.internalId = internalId;
-    this.externalId = externalId;
-    this.labelIds = [];
-    this.type = type;
-    this.mode = mode;
-    this.status = status;
-    this.coordinates = coordinates;
-    this.selectedNode = 1;
-    this.timestamp = performance.now();
-    this.annoTime = 0.0;
+    this.internalId = internalId
+    this.externalId = externalId
+    this.labelIds = []
+    this.type = type
+    this.mode = mode
+    this.status = status
+    this.coordinates = coordinates
+    this.selectedNode = 1
+    this.annoTime = 0
   }
 }
 
-export default Annotation;
+export default Annotation