lost-sia 2.0.1-alpha15 → 2.0.1-alpha17

package/dist/Annotation/ui/AnnotationComponent.js

@@ -1 +1 @@
-import{jsxs as G,jsx as l}from"react/jsx-runtime";import h from"../../models/AnnotationTool.js";import{getDefaultColor as L}from"../../utils/color.js";import H from"./tools/Point.js";import J from"./tools/Line.js";import K from"./atoms/AnnoBar.js";import Q from"../../models/CanvasAction.js";import X from"./tools/BBox.js";import Y from"./tools/Polygon.js";import{useState as I,useRef as x,useEffect as M}from"react";import e from"../../models/AnnotationMode.js";import Z from"../../utils/TimeUtils.js";const lo=({scaledAnnotation:r,annotationSettings:m,possibleLabels:b,svgScale:i,svgTranslation:f,pageToStageOffset:a,strokeWidth:B,nodeRadius:P,isSelected:c,isDisabled:V=!1,onFinishAnnoCreate:w,onLabelIconClicked:W,onAction:k=(n,C)=>{},onAnnoChanged:A=n=>{},onAnnotationModeChange:F=n=>{},onNotification:O=n=>{}})=>{const[n,C]=I(r.coordinates),[t,d]=I(r.mode),[j,D]=I(!1),R=x(void 0),[_,U]=I();M(()=>{R.current=_},[_]);const y=x(n);M(()=>{y.current=n},[n]);const N=()=>{d(e.VIEW);const o={...r,coordinates:y.current};w(o)},q=o=>b.find(s=>s.id===o),T=(()=>{if(!r.labelIds||r.labelIds.length==0)return L();const o=q(r.labelIds[0]);return o===void 0||o.color===void 0||o.color===null?L():o.color})(),u={stroke:T,fill:T,strokeWidth:B/i,r:P/i},p=o=>{C(o);let s=o;[e.ADD,e.MOVE].includes(t)&&(s=o.slice(0,-1)),A({...r,coordinates:s})},g=o=>{[e.ADD,e.CREATE,e.MOVE].includes(t)||(d(e.MOVE),U(performance.now())),C(o)},E=()=>{d(e.VIEW);const o=Z.getRoundedDuration(R.current,performance.now()),s=isNaN(r.annoTime)||r.annoTime===null?o:r.annoTime+o;A({...r,coordinates:y.current,annoTime:s})};M(()=>{F(t)},[t]),M(()=>{t===e.CREATE||t===e.ADD||C(r.coordinates)},[r]);const z=()=>{switch(r.type){case h.Point:return l(H,{isSelected:c,annotationSettings:m,coordinates:n[0],pageToStageOffset:a,svgScale:i,svgTranslation:f,style:u,onMoving:o=>g([o]),onMoved:E,onIsDraggingStateChanged:D});case h.Line:return l(J,{annotationSettings:m,coordinates:n,isSelected:c,pageToStageOffset:a,annotationMode:t,setAnnotationMode:d,svgScale:i,svgTranslation:f,style:u,onAddNode:p,onDeleteNode:p,onMoving:g,onMoved:E,onIsDraggingStateChanged:D,onFinishAnnoCreate:N});case h.BBox:return l(X,{annotationMode:t,annotationSettings:m,startCoords:n[0],endCoords:n[1],isSelected:c,pageToStageOffset:a,style:u,svgScale:i,svgTranslation:f,onDeleteNode:()=>{console.log("TODO")},onIsDraggingStateChanged:D,onFinishAnnoCreate:N,onMoving:g,onMoved:E});case h.Polygon:return l(Y,{annotationSettings:m,coordinates:n,isSelected:c,isDisabled:V,pageToStageOffset:a,annotationMode:t,setAnnotationMode:d,svgScale:i,svgTranslation:f,style:u,onAddNode:p,onDeleteNode:p,onMoving:g,onMoved:E,onNotification:O,onIsDraggingStateChanged:D,onFinishAnnoCreate:N})}};return G("g",{onClick:o=>{o.stopPropagation(),k(r,Q.ANNO_SELECTED)},children:[!j&&t!==e.CREATE&&l(K,{annotationCoordinates:n,canLabel:m.canLabel,labels:b,color:T,isSelected:c,selectedLabelIds:r.labelIds,style:u,svgScale:i,onLabelIconClicked:W}),z()]})};export{lo as default};
+import{jsxs as G,jsx as d}from"react/jsx-runtime";import E from"../../models/AnnotationTool.js";import{getDefaultColor as L}from"../../utils/color.js";import H from"./tools/Point.js";import J from"./tools/Line.js";import K from"./atoms/AnnoBar.js";import Q from"../../models/CanvasAction.js";import X from"./tools/BBox.js";import Y from"./tools/Polygon.js";import{useState as h,useRef as x,useEffect as I}from"react";import e from"../../models/AnnotationMode.js";import Z from"../../utils/TimeUtils.js";const fo=({scaledAnnotation:r,annotationSettings:m,possibleLabels:A,svgScale:i,svgTranslation:f,pageToStageOffset:a,strokeWidth:B,nodeRadius:P,isSelected:c,isDisabled:V=!1,onFinishAnnoCreate:w,onLabelIconClicked:W,onAction:k=(n,l)=>{},onAnnoChanged:b=n=>{},onAnnotationModeChange:F=n=>{},onNotification:O=n=>{}})=>{const[n,l]=h(r.coordinates),[t,M]=h(r.mode),[j,C]=h(!1),R=x(void 0),[_,U]=h();I(()=>{R.current=_},[_]);const N=x(n);I(()=>{N.current=n},[n]);const y=()=>{M(e.VIEW);const o={...r,coordinates:N.current};w(o)},q=o=>A.find(s=>s.id===o),T=(()=>{if(!r.labelIds||r.labelIds.length==0)return L();const o=q(r.labelIds[0]);return(o==null?void 0:o.color)===void 0||o.color===null?L():o.color})(),u={stroke:T,fill:T,strokeWidth:B/i,r:P/i},D=o=>{l(o);let s=o;[e.ADD,e.MOVE].includes(t)&&(s=o.slice(0,-1)),b({...r,coordinates:s})},p=o=>{[e.ADD,e.CREATE,e.MOVE].includes(t)||(M(e.MOVE),U(performance.now())),l(o)},g=()=>{M(e.VIEW);const o=Z.getRoundedDuration(R.current,performance.now()),s=Number.isNaN(r.annoTime)||r.annoTime===null?o:r.annoTime+o;b({...r,coordinates:N.current,annoTime:s})};I(()=>{F(t)},[t]),I(()=>{t===e.CREATE||t===e.ADD||l(r.coordinates)},[r]);const z=()=>{switch(r.type){case E.Point:return d(H,{isSelected:c,annotationSettings:m,coordinates:n[0],pageToStageOffset:a,svgScale:i,svgTranslation:f,style:u,onMoving:o=>p([o]),onMoved:g,onIsDraggingStateChanged:C});case E.Line:return d(J,{annotationSettings:m,coordinates:n,isSelected:c,pageToStageOffset:a,annotationMode:t,svgScale:i,svgTranslation:f,style:u,onAddNode:D,onDeleteNode:D,onMoving:p,onMoved:g,onIsDraggingStateChanged:C,onFinishAnnoCreate:y});case E.BBox:return d(X,{annotationMode:t,annotationSettings:m,startCoords:n[0],endCoords:n[1],isSelected:c,pageToStageOffset:a,style:u,svgScale:i,svgTranslation:f,onDeleteNode:()=>{console.log("TODO")},onIsDraggingStateChanged:C,onFinishAnnoCreate:y,onMoving:p,onMoved:g});case E.Polygon:return d(Y,{annotationSettings:m,coordinates:n,isSelected:c,isDisabled:V,pageToStageOffset:a,annotationMode:t,svgScale:i,svgTranslation:f,style:u,onAddNode:D,onDeleteNode:D,onMoving:p,onMoved:g,onNotification:O,onIsDraggingStateChanged:C,onFinishAnnoCreate:y})}};return G("g",{onClick:o=>{o.stopPropagation(),k(r,Q.ANNO_SELECTED)},children:[!j&&t!==e.CREATE&&d(K,{annotationCoordinates:n,canLabel:m.canLabel,labels:A,color:T,isSelected:c,selectedLabelIds:r.labelIds,style:u,svgScale:i,onLabelIconClicked:W}),z()]})};export{fo as default};

package/dist/Annotation/ui/atoms/Node.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { Point, AnnotationSettings } from '../../../types';
+import { AnnotationSettings, Point } from '../../../types';
 type NodeProps = {
     index: number;
     coordinates: Point;

package/dist/Annotation/ui/atoms/Node.js

@@ -1 +1 @@
-import{jsxs as H,jsx as u}from"react/jsx-runtime";import{useState as c,useRef as h,useEffect as m}from"react";import L from"../../../utils/mouse.js";const K=({index:v,coordinates:t,annotationSettings:o,pageToStageOffset:x,svgScale:r,svgTranslation:y,style:p,onDeleteNode:D,onMoving:I,onMoved:g,onIsDraggingStateChanged:A})=>{const[E,i]=c(!1),[n,l]=c(!1),[s,a]=c(!1),f=h(s);m(()=>{f.current=s},[s]);const M=e=>{if(!n)return;const C=L.getAntiScaledMouseStagePosition(e,x,r,y);(e.movementX!==0||e.movementY!==0)&&(a(!0),I(v,C))};m(()=>{if(A(n),!n)return;const e=()=>{l(!1),f.current&&g(),a(!1)};return window.addEventListener("mouseup",e),()=>{window.removeEventListener("mouseup",e)}},[n]);const d=e=>{o.canEdit&&(e.ctrlKey?D():l(!0))},w=()=>u("circle",{cx:t.x,cy:t.y,r:12/r,onMouseLeave:e=>o.canEdit&&i(!1),onMouseDown:d,onContextMenu:e=>e.preventDefault()});return H("g",{children:[n&&u("circle",{cx:t.x,cy:t.y,r:"100%",style:{opacity:0},onMouseMove:e=>M(e),onContextMenu:e=>e.preventDefault()}),E&&w(),u("circle",{cx:t.x,cy:t.y,r:10/r,style:p,onMouseOver:()=>{o.canEdit&&i(!0)},onMouseDown:d,onMouseMove:e=>M(e),onContextMenu:e=>e.preventDefault()})]})};export{K as default};
+import{jsxs as H,jsx as u}from"react/jsx-runtime";import{useState as l,useRef as L,useEffect as m}from"react";import S from"../../../utils/mouse.js";const T=({index:v,coordinates:t,annotationSettings:o,pageToStageOffset:x,svgScale:r,svgTranslation:y,style:p,onDeleteNode:g,onMoving:D,onMoved:I,onIsDraggingStateChanged:A})=>{const[E,c]=l(!1),[n,i]=l(!1),[s,a]=l(!1),f=L(s);m(()=>{f.current=s},[s]);const M=e=>{if(!n)return;const C=S.getAntiScaledMouseStagePosition(e,x,r,y);(e.movementX!==0||e.movementY!==0)&&(a(!0),D(v,C))};m(()=>{if(A(n),!n)return;const e=()=>{i(!1),f.current&&I(),a(!1)};return globalThis.addEventListener("mouseup",e),()=>{globalThis.removeEventListener("mouseup",e)}},[n]);const d=e=>{o.canEdit&&(e.ctrlKey?g():i(!0))},h=()=>u("circle",{cx:t.x,cy:t.y,r:12/r,onMouseLeave:e=>o.canEdit&&c(!1),onMouseDown:d,onContextMenu:e=>e.preventDefault()});return H("g",{children:[n&&u("circle",{cx:t.x,cy:t.y,r:"100%",style:{opacity:0},onMouseMove:e=>M(e),onContextMenu:e=>e.preventDefault()}),E&&h(),u("circle",{cx:t.x,cy:t.y,r:10/r,style:p,onMouseOver:()=>{o.canEdit&&c(!0)},onMouseDown:d,onMouseMove:e=>M(e),onContextMenu:e=>e.preventDefault()})]})};export{T as default};

package/dist/Annotation/ui/atoms/PolygonArea.d.ts

@@ -1,20 +1,16 @@
 import { CSSProperties } from 'react';
-import { Point, AnnotationSettings } from '../../../types';
+import { Point } from '../../../types';
 import { default as AnnotationMode } from '../../../models/AnnotationMode';
 type PolygonAreaProps = {
     coordinates: Point[];
     isSelected: boolean;
     isDisabled?: boolean;
     annotationMode: AnnotationMode;
-    annotationSettings: AnnotationSettings;
-    pageToStageOffset: Point;
-    svgScale: number;
     style: CSSProperties;
     onFinishAnnoCreate?: () => void;
     onMouseDown: (e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
     onMouseUp?: (e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
     onMouseMove: (e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
-    onIsDraggingStateChanged: (bool: any) => void;
 };
 declare const PolygonArea: ({ coordinates, isSelected, isDisabled, annotationMode, style, onFinishAnnoCreate, onMouseDown, onMouseUp, onMouseMove, }: PolygonAreaProps) => import("react/jsx-runtime").JSX.Element;
 export default PolygonArea;

package/dist/Annotation/ui/tools/BBox.js

@@ -1 +1 @@
-import{jsxs as H,jsx as v}from"react/jsx-runtime";import{useState as l,useRef as J,useEffect as x}from"react";import K from"../atoms/Node.js";import d from"../../../models/AnnotationMode.js";import Q from"../../../utils/mouse.js";import V from"../atoms/PolygonArea.js";import W from"../atoms/Edge.js";const re=({annotationMode:m,annotationSettings:i,pageToStageOffset:w,startCoords:R,endCoords:b,svgScale:s,svgTranslation:C,isSelected:E,style:M,onDeleteNode:j,onFinishAnnoCreate:z,onIsDraggingStateChanged:p,onMoving:A,onMoved:k})=>{const n=[R,{x:R.x,y:b.y},b,{x:b.x,y:R.y}],[L,B]=l(m===d.CREATE),[a,N]=l(!1),[f,X]=l(!1),[_,$]=l(0),[D,y]=l(!1),g=J(D);x(()=>{g.current=D},[D]);const Y=e=>{i.canEdit!==!1&&E&&m!==d.CREATE&&e.button===0&&N(!0)},T=e=>{i.canEdit!==!1&&E&&m!==d.CREATE&&e.button===0&&X(!0)},h=e=>{if(a){const r=[{...n[0]},{...n[2]}].map(t=>({x:t.x+=e.movementX/s,y:t.y+=e.movementY/s}));(e.movementX!==0||e.movementY!==0)&&(y(!0),A(r))}if(m===d.CREATE){const o=Q.getAntiScaledMouseStagePosition(e,w,s,C),t=[[...n][0],o];A(t)}};x(()=>{if(!L)return;const e=o=>{o.button===2&&(z(),B(!1))};return window.addEventListener("mouseup",e),()=>{window.removeEventListener("mouseup",e)}},[L]),x(()=>{if(p(a),!a)return;const e=()=>{N(!1),g.current&&k(),y(!1)};return window.addEventListener("mouseup",e),()=>{window.removeEventListener("mouseup",e)}},[a]),x(()=>{if(p(f),!f)return;const e=()=>{X(!1),g.current&&k(),y(!1)};return window.addEventListener("mouseup",e),()=>{window.removeEventListener("mouseup",e)}},[f]);const q=()=>n.map((o,r)=>v(K,{index:r,annotationSettings:i,coordinates:o,pageToStageOffset:w,svgScale:s,svgTranslation:C,style:M,onDeleteNode:()=>{const t=[...n];t.splice(r,1),j(t)},onMoving:(t,c)=>{const u=[n[0],n[2]];switch(t){case 0:u[0]=c;break;case 1:u[0].x=c.x,u[1].y=c.y;break;case 2:u[1]=c;break;case 3:u[1].x=c.x,u[0].y=c.y;break}A(u)},onMoved:()=>k(),onIsDraggingStateChanged:p},`node_${r}`)),I=(e,o)=>{const r=[n[0],n[2]];switch(e){case 0:r[0].x+=o.movementX/s;break;case 1:r[1].y+=o.movementY/s;break;case 2:r[1].x+=o.movementX/s;break;case 3:r[0].y+=o.movementY/s;break}(o.movementX!==0||o.movementY!==0)&&(y(!0),A(r))},G=()=>n.map((o,r)=>{const t=r+1<n.length?n[r+1]:n[0],c=r%2===0?"ew-resize":"ns-resize";return v(W,{startCoordinate:o,endCoordinate:t,pageToStageOffset:w,svgScale:s,svgTranslation:C,style:{...M,cursor:c},onMouseDown:T,onMouseMove:u=>{$(r),f&&I(r,u)}},`edge_${r}`)}),U=e=>v("circle",{cx:n[0].x,cy:n[0].y,r:"100%",style:{opacity:0},onMouseDown:Y,onMouseMove:o=>{e&&f&&I(_,o),e||h(o)},onContextMenu:o=>o.preventDefault()});return H("g",{children:[(a||m===d.CREATE)&&U(!1),v(V,{annotationSettings:i,coordinates:n,isSelected:E,annotationMode:m,pageToStageOffset:w,style:M,svgScale:s,onIsDraggingStateChanged:p,onMouseDown:Y,onMouseMove:h}),f&&U(!0),E&&i.canEdit&&G(),E&&m!==d.CREATE&&q()]})};export{re as default};
+import{jsxs as H,jsx as A}from"react/jsx-runtime";import{useState as E,useRef as J,useEffect as v}from"react";import K from"../atoms/Node.js";import i from"../../../models/AnnotationMode.js";import Q from"../../../utils/mouse.js";import V from"../atoms/PolygonArea.js";import W from"../atoms/Edge.js";const se=({annotationMode:m,annotationSettings:d,pageToStageOffset:y,startCoords:b,endCoords:x,svgScale:c,svgTranslation:R,isSelected:a,style:h,onDeleteNode:U,onFinishAnnoCreate:j,onIsDraggingStateChanged:w,onMoving:p,onMoved:C})=>{const t=[b,{x:b.x,y:x.y},x,{x:x.x,y:b.y}],[k,z]=E(m===i.CREATE),[l,T]=E(!1),[f,L]=E(!1),[B,_]=E(0),[D,g]=E(!1),M=J(D);v(()=>{M.current=D},[D]);const X=e=>{d.canEdit!==!1&&a&&m!==i.CREATE&&e.button===0&&T(!0)},$=e=>{d.canEdit!==!1&&a&&m!==i.CREATE&&e.button===0&&L(!0)},Y=e=>{if(l){const s=[{...t[0]},{...t[2]}].map(n=>{const u=n.x+=e.movementX/c,r=n.y+=e.movementY/c;return{x:u,y:r}});(e.movementX!==0||e.movementY!==0)&&(g(!0),p(s))}if(m===i.CREATE){const o=Q.getAntiScaledMouseStagePosition(e,y,c,R),n=[[...t][0],o];p(n)}};v(()=>{if(!k)return;const e=o=>{o.button===2&&(j(),z(!1))};return globalThis.addEventListener("mouseup",e),()=>{globalThis.removeEventListener("mouseup",e)}},[k]),v(()=>{if(w(l),!l)return;const e=()=>{T(!1),M.current&&C(),g(!1)};return globalThis.addEventListener("mouseup",e),()=>{globalThis.removeEventListener("mouseup",e)}},[l]),v(()=>{if(w(f),!f)return;const e=()=>{L(!1),M.current&&C(),g(!1)};return globalThis.addEventListener("mouseup",e),()=>{globalThis.removeEventListener("mouseup",e)}},[f]);const q=()=>t.map((o,s)=>A(K,{index:s,annotationSettings:d,coordinates:o,pageToStageOffset:y,svgScale:c,svgTranslation:R,style:h,onDeleteNode:()=>{const n=[...t];n.splice(s,1),U(n)},onMoving:(n,u)=>{const r=[t[0],t[2]];switch(n){case 0:r[0]=u;break;case 1:r[0].x=u.x,r[1].y=u.y;break;case 2:r[1]=u;break;case 3:r[1].x=u.x,r[0].y=u.y;break}p(r)},onMoved:()=>C(),onIsDraggingStateChanged:w},`node_${s}`)),I=(e,o)=>{const s=[t[0],t[2]];switch(e){case 0:s[0].x+=o.movementX/c;break;case 1:s[1].y+=o.movementY/c;break;case 2:s[1].x+=o.movementX/c;break;case 3:s[0].y+=o.movementY/c;break}(o.movementX!==0||o.movementY!==0)&&(g(!0),p(s))},G=()=>t.map((o,s)=>{const n=s+1<t.length?t[s+1]:t[0],u=s%2===0?"ew-resize":"ns-resize";return A(W,{startCoordinate:o,endCoordinate:n,pageToStageOffset:y,svgScale:c,svgTranslation:R,style:{...h,cursor:u},onMouseDown:$,onMouseMove:r=>{_(s),f&&I(s,r)}},`edge_${s}`)}),N=e=>A("circle",{cx:t[0].x,cy:t[0].y,r:"100%",style:{opacity:0},onMouseDown:X,onMouseMove:o=>{e&&f&&I(B,o),e||Y(o)},onContextMenu:o=>o.preventDefault()});return H("g",{children:[(l||m===i.CREATE)&&N(!1),A(V,{coordinates:t,isSelected:a,annotationMode:m,style:h,onMouseDown:X,onMouseMove:Y}),f&&N(!0),a&&d.canEdit&&G(),a&&m!==i.CREATE&&q()]})};export{se as default};

package/dist/Annotation/ui/tools/Line.d.ts

@@ -6,7 +6,6 @@ type LineProps = {
     coordinates: Point[];
     isSelected: boolean;
     annotationMode: AnnotationMode;
-    setAnnotationMode: (annotationMode: AnnotationMode) => void;
     pageToStageOffset: Point;
     svgScale: number;
     svgTranslation: Point;

package/dist/Annotation/ui/tools/Line.js

@@ -1 +1 @@
-import{jsxs as k,jsx as A}from"react/jsx-runtime";import{useState as b,useRef as U,useEffect as x}from"react";import q from"../atoms/Node.js";import m from"../../../models/AnnotationMode.js";import z from"../atoms/Edge.js";import I from"../../../utils/mouse.js";const Q=({annotationSettings:p,coordinates:n,isSelected:C,annotationMode:r,pageToStageOffset:c,svgScale:s,svgTranslation:f,style:w,onAddNode:R,onDeleteNode:L,onFinishAnnoCreate:j,onMoving:E,onMoved:v,onIsDraggingStateChanged:y})=>{const[i,D]=b(!1),[d,M]=b(!1),N=U(d);x(()=>{N.current=d},[d]);const h=t=>{if(p.canEdit!==!1&&(C&&r!==m.CREATE&&t.button===0&&D(!0),t.button===2&&r==m.CREATE)){const o=I.getAntiScaledMouseStagePosition(t,c,s,f),e=[...n];e.push(o),R(e)}},g=t=>{if(i){const o=n.map(e=>({x:e.x+=t.movementX/s,y:e.y+=t.movementY/s}));(t.movementX!==0||t.movementY!==0)&&(M(!0),E(o))}if(r===m.CREATE){const o=I.getAntiScaledMouseStagePosition(t,c,s,f);let e=[...n];n.length>1&&(e=n.slice(0,-1)),e.push(o),E(e)}};x(()=>{if(y(i),!i)return;const t=()=>{D(!1),N.current&&v(),M(!1)};return window.addEventListener("mouseup",t),()=>{window.removeEventListener("mouseup",t)}},[i]);const X=()=>A("circle",{cx:n[0].x,cy:n[0].y,r:"100%",style:{opacity:0},onMouseDown:h,onMouseMove:g,onContextMenu:t=>t.preventDefault()}),Y=()=>n.map((o,e)=>A(q,{index:e,annotationSettings:p,coordinates:o,pageToStageOffset:c,svgScale:s,svgTranslation:f,style:w,onDeleteNode:()=>{const u=[...n];u.splice(e,1),L(u)},onMoving:(u,l)=>{const P=[...n];P[u]=l,E(P)},onMoved:()=>v(),onIsDraggingStateChanged:y},`node_${e}`)),_=()=>n.map((o,e)=>{if(!(e+1>=n.length))return A(z,{startCoordinate:o,endCoordinate:n[e+1],pageToStageOffset:c,svgScale:s,svgTranslation:f,style:w,onAddNode:u=>{const l=[...n];l.splice(e+1,0,u),R(l)},onDoubleClick:()=>r===m.CREATE&&j(),onMouseDown:h,onMouseMove:g},`edge_${e}`)}),$=C&&r!==m.CREATE;return k("g",{children:[(i||r===m.CREATE)&&X(),_(),$&&Y()]})};export{Q as default};
+import{jsxs as $,jsx as d}from"react/jsx-runtime";import{useState as P,useRef as k,useEffect as x}from"react";import U from"../atoms/Node.js";import i from"../../../models/AnnotationMode.js";import q from"../atoms/Edge.js";import I from"../../../utils/mouse.js";const K=({annotationSettings:p,coordinates:n,isSelected:C,annotationMode:r,pageToStageOffset:l,svgScale:u,svgTranslation:f,style:R,onAddNode:v,onDeleteNode:L,onFinishAnnoCreate:X,onMoving:E,onMoved:w,onIsDraggingStateChanged:y})=>{const[c,h]=P(!1),[A,g]=P(!1),D=k(A);x(()=>{D.current=A},[A]);const M=t=>{if(p.canEdit!==!1&&(C&&r!==i.CREATE&&t.button===0&&h(!0),t.button===2&&r==i.CREATE)){const o=I.getAntiScaledMouseStagePosition(t,l,u,f),e=[...n];e.push(o),v(e)}},N=t=>{if(c){const o=n.map(e=>{const s=e.x+=t.movementX/u,m=e.y+=t.movementY/u;return{x:s,y:m}});(t.movementX!==0||t.movementY!==0)&&(g(!0),E(o))}if(r===i.CREATE){const o=I.getAntiScaledMouseStagePosition(t,l,u,f);let e=[...n];n.length>1&&(e=n.slice(0,-1)),e.push(o),E(e)}};x(()=>{if(y(c),!c)return;const t=()=>{h(!1),D.current&&w(),g(!1)};return globalThis.addEventListener("mouseup",t),()=>{globalThis.removeEventListener("mouseup",t)}},[c]);const Y=()=>d("circle",{cx:n[0].x,cy:n[0].y,r:"100%",style:{opacity:0},onMouseDown:M,onMouseMove:N,onContextMenu:t=>t.preventDefault()}),j=()=>n.map((o,e)=>d(U,{index:e,annotationSettings:p,coordinates:o,pageToStageOffset:l,svgScale:u,svgTranslation:f,style:R,onDeleteNode:()=>{const s=[...n];s.splice(e,1),L(s)},onMoving:(s,m)=>{const b=[...n];b[s]=m,E(b)},onMoved:()=>w(),onIsDraggingStateChanged:y},`node_${e}`)),T=()=>n.map((o,e)=>{if(!(e+1>=n.length))return d(q,{startCoordinate:o,endCoordinate:n[e+1],pageToStageOffset:l,svgScale:u,svgTranslation:f,style:R,onAddNode:s=>{const m=[...n];m.splice(e+1,0,s),v(m)},onDoubleClick:()=>r===i.CREATE&&X(),onMouseDown:M,onMouseMove:N},`edge_${e}`)}),_=C&&r!==i.CREATE;return $("g",{children:[(c||r===i.CREATE)&&Y(),T(),_&&j()]})};export{K as default};

package/dist/Annotation/ui/tools/Polygon.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { Point, SIANotification, AnnotationSettings } from '../../../types';
+import { AnnotationSettings, Point, SIANotification } from '../../../types';
 import { default as AnnotationMode } from '../../../models/AnnotationMode';
 type PolygonProps = {
     annotationSettings: AnnotationSettings;
@@ -7,7 +7,6 @@ type PolygonProps = {
     isSelected: boolean;
     isDisabled?: boolean;
     annotationMode: AnnotationMode;
-    setAnnotationMode: (annotationMode: AnnotationMode) => void;
     pageToStageOffset: Point;
     svgScale: number;
     svgTranslation: Point;

package/dist/Annotation/ui/tools/Polygon.js

@@ -1 +1 @@
-import{jsxs as q,jsx as C}from"react/jsx-runtime";import{useState as j,useRef as z,useEffect as F}from"react";import B from"../atoms/Node.js";import G from"../atoms/PolygonArea.js";import s from"../../../models/AnnotationMode.js";import H from"../atoms/Edge.js";import I from"../../../utils/mouse.js";import L from"../../../models/NotificationType.js";const a=({annotationSettings:i,coordinates:e,isSelected:E,isDisabled:P=!1,annotationMode:t,pageToStageOffset:f,svgScale:u,svgTranslation:p,style:c,onAddNode:v,onDeleteNode:X,onFinishAnnoCreate:Y,onIsDraggingStateChanged:y,onMoving:R,onMoved:g,onNotification:N=m=>{}})=>{const[m,b]=j(!1),[d,x]=j(!1),M=z(d),_=()=>{if(e.length<3)return N({message:"Polygons must have at least 3 nodes",title:"Polygon Error",type:L.ERROR});Y()};F(()=>{M.current=d},[d]);const h=o=>{if(i.canEdit!==!1&&(E&&t!==s.CREATE&&t!==s.ADD&&o.button===0&&b(!0),o.button===2&&[s.CREATE,s.ADD].includes(t))){const n=I.getAntiScaledMouseStagePosition(o,f,u,p),r=[...e];r.push(n),v(r)}},D=o=>{if(m){const n=e.map(r=>({x:r.x+=o.movementX/u,y:r.y+=o.movementY/u}));(o.movementX!==0||o.movementY!==0)&&(x(!0),R(n))}if(t===s.CREATE){const n=I.getAntiScaledMouseStagePosition(o,f,u,p);let r=[...e];e.length>1&&(r=e.slice(0,-1)),r.push(n),R(r)}};F(()=>{if(y(m),!m)return;const o=()=>{b(!1),M.current&&g(),x(!1)};return window.addEventListener("mouseup",o),()=>{window.removeEventListener("mouseup",o)}},[m]);const $=()=>e.map((n,r)=>C(B,{index:r,annotationSettings:i,coordinates:n,pageToStageOffset:f,svgScale:u,svgTranslation:p,style:c,onDeleteNode:()=>{if(e.length<4)return N({message:"Polygons must have at least 3 nodes",title:"Polygon Error",type:L.ERROR});const l=[...e];l.splice(r,1),X(l)},onMoving:(l,w)=>{const A=[...e];A[l]=w,R(A)},onMoved:()=>g(),onIsDraggingStateChanged:y},`node_${r}`)),k=()=>e.map((n,r)=>{const l=r+1<e.length?e[r+1]:e[0];return C(H,{startCoordinate:n,endCoordinate:l,isDisabled:P&&E,pageToStageOffset:f,svgScale:u,svgTranslation:p,style:c,onAddNode:w=>{const A=[...e];A.splice(r+1,0,w),v(A)},onDoubleClick:()=>t===s.CREATE&&_(),onMouseDown:h,onMouseMove:D},`edge_${r}`)}),U=()=>C("circle",{cx:e[0].x,cy:e[0].y,r:"100%",style:{opacity:0},onMouseDown:h,onMouseMove:D,onContextMenu:o=>o.preventDefault()});return q("g",{children:[(m||t===s.CREATE||t===s.ADD)&&U(),C(G,{annotationSettings:i,coordinates:e,isSelected:E,isDisabled:P,annotationMode:t,pageToStageOffset:f,style:c,svgScale:u,onFinishAnnoCreate:_,onIsDraggingStateChanged:y,onMouseDown:h,onMouseMove:D}),E&&i.canEdit&&k(),E&&t!==s.CREATE&&$()]})};export{a as default};
+import{jsxs as U,jsx as c}from"react/jsx-runtime";import{useState as T,useRef as a,useEffect as X}from"react";import q from"../atoms/Node.js";import z from"../atoms/PolygonArea.js";import s from"../../../models/AnnotationMode.js";import B from"../atoms/Edge.js";import Y from"../../../utils/mouse.js";import _ from"../../../models/NotificationType.js";const O=({annotationSettings:C,coordinates:e,isSelected:f,isDisabled:D=!1,annotationMode:o,pageToStageOffset:A,svgScale:m,svgTranslation:p,style:y,onAddNode:v,onDeleteNode:j,onFinishAnnoCreate:F,onIsDraggingStateChanged:P,onMoving:g,onMoved:w,onNotification:b=l=>{}})=>{const[l,N]=T(!1),[h,x]=T(!1),I=a(h),M=()=>{if(e.length<3)return b({message:"Polygons must have at least 3 nodes",title:"Polygon Error",type:_.ERROR});F()};X(()=>{I.current=h},[h]);const R=n=>{if(C.canEdit!==!1&&(f&&o!==s.CREATE&&o!==s.ADD&&n.button===0&&N(!0),n.button===2&&[s.CREATE,s.ADD].includes(o))){const r=Y.getAntiScaledMouseStagePosition(n,A,m,p),t=[...e];t.push(r),v(t)}},d=n=>{if(l){const r=e.map(t=>{const u=t.x+=n.movementX/m,i=t.y+=n.movementY/m;return{x:u,y:i}});(n.movementX!==0||n.movementY!==0)&&(x(!0),g(r))}if(o===s.CREATE){const r=Y.getAntiScaledMouseStagePosition(n,A,m,p);let t=[...e];e.length>1&&(t=e.slice(0,-1)),t.push(r),g(t)}};X(()=>{if(P(l),!l)return;const n=()=>{N(!1),I.current&&w(),x(!1)};return globalThis.addEventListener("mouseup",n),()=>{globalThis.removeEventListener("mouseup",n)}},[l]);const L=()=>e.map((r,t)=>c(q,{index:t,annotationSettings:C,coordinates:r,pageToStageOffset:A,svgScale:m,svgTranslation:p,style:y,onDeleteNode:()=>{if(e.length<4)return b({message:"Polygons must have at least 3 nodes",title:"Polygon Error",type:_.ERROR});const u=[...e];u.splice(t,1),j(u)},onMoving:(u,i)=>{const E=[...e];E[u]=i,g(E)},onMoved:()=>w(),onIsDraggingStateChanged:P},`node_${t}`)),$=()=>e.map((r,t)=>{const u=t+1<e.length?e[t+1]:e[0];return c(B,{startCoordinate:r,endCoordinate:u,isDisabled:D&&f,pageToStageOffset:A,svgScale:m,svgTranslation:p,style:y,onAddNode:i=>{const E=[...e];E.splice(t+1,0,i),v(E)},onDoubleClick:()=>o===s.CREATE&&M(),onMouseDown:R,onMouseMove:d},`edge_${t}`)}),k=()=>c("circle",{cx:e[0].x,cy:e[0].y,r:"100%",style:{opacity:0},onMouseDown:R,onMouseMove:d,onContextMenu:n=>n.preventDefault()});return U("g",{children:[(l||o===s.CREATE||o===s.ADD)&&k(),c(z,{coordinates:e,isSelected:f,isDisabled:D,annotationMode:o,style:y,onFinishAnnoCreate:M,onMouseDown:R,onMouseMove:d}),f&&C.canEdit&&$(),f&&o!==s.CREATE&&L()]})};export{O as default};

package/dist/Canvas/Canvas.d.ts

@@ -1,6 +1,6 @@
 import { default as AnnotationTool } from '../models/AnnotationTool';
 import { default as Annotation } from '../Annotation/logic/Annotation';
-import { AnnotationSettings, Label, UiConfig, PolygonOperationResult, SIANotification } from '../types';
+import { AnnotationSettings, Label, PolygonOperationResult, SIANotification, UiConfig } from '../types';
 type CanvasProps = {
     annotations?: Annotation[];
     annotationSettings: AnnotationSettings;

package/dist/Canvas/Canvas.js

@@ -1 +1 @@
-import{jsxs as W,jsx as x,Fragment as Qe}from"react/jsx-runtime";import{useState as E,useRef as Z,useEffect as M}from"react";import w from"../models/AnnotationTool.js";import i from"../models/EditorModes.js";import Ze from"../utils/KeyMapper.js";import a from"../models/KeyAction.js";import pe from"../Annotation/logic/Annotation.js";import qe from"../models/CanvasAction.js";import et from"../Annotation/ui/AnnotationComponent.js";import he from"../utils/mouse.js";import N from"../models/AnnotationMode.js";import tt from"./LabelInput.js";import{FontAwesomeIcon as nt}from"@fortawesome/react-fontawesome";import{faBan as ot}from"@fortawesome/free-solid-svg-icons";import D from"../models/AnnotationStatus.js";import C from"../utils/transform.js";import rt from"../models/NotificationType.js";import st from"../utils/TimeUtils.js";import xe from"../utils/windowViewport.js";const wt=({annotations:O=[],annotationSettings:B,defaultLabelId:q,image:ee,isFullscreen:Ce=!1,isImageJunk:K=!1,isPolygonSelectionMode:F=!1,polygonOperationResult:X={annotationsToDelete:[],polygonsToCreate:[]},possibleLabels:te,preventScrolling:ne=!0,selectedAnnotation:r,selectedAnnoTool:R,toolbarHeight:U=0,uiConfig:z,onAnnoCreated:Oe,onAnnoCreationFinished:oe,onAnnoChanged:re,onAnnoEditing:Te=g=>{},onNotification:se=g=>{},onRequestNewAnnoId:k,onSelectAnnotation:A,onSetIsImageJunk:ve,onSetSelectedTool:Ae=g=>{},onShouldDeleteAnno:ie})=>{const[g,T]=E(i.VIEW),[Me,Ie]=E(),[ce,we]=E(q),[V,De]=E({x:-1,y:-1}),[ae,le]=E(0),L={x:V.x,y:V.y},[u,Y]=E({x:-1,y:-1}),[d,G]=E({x:-1,y:-1}),[m,de]=E({x:-1,y:-1}),[l,P]=E(1),[c,S]=E({x:0,y:0}),H={x:c.x+ae,y:c.y},[p,$]=E(),[j,_]=E(!1),fe=Z(null),h=Z(null),y=Z(null),v=((e,t)=>{if(e.x===0||e.y===0||t.x===0||t.y===0)return 0;const n=t.x/e.x,o=t.y/e.y;return Math.min(n,o)})(u,d),Se=()=>{if((y==null?void 0:y.current)===null)return{x:0,y:0};const e=u.x*v;if(z.imageCentered&&d.x>e){const f=(d.x-e)/2;le(f)}else le(0);const{top:t,left:n}=h.current.getBoundingClientRect(),o={x:n+window.scrollX,y:t+window.scrollY};De(o)},_e=new Ze(e=>Pe(e)),be=e=>{T(i.CREATE);const t=C.convertStageCoordinatesToPercentaged([e],v,u);R===w.BBox&&t.push(t[0]);const n=k(),o=new pe(n,R,t);if(Ie(performance.now()),ce!==void 0&&(o.labelIds=[ce]),Oe(o),R===w.Point){const s={...o,coordinates:[e],annoTime:0};Q(s)}},Ne=()=>{if(r&&![w.Line,w.Polygon].includes(r.type))return;const e=O.find(n=>n.internalId===(r==null?void 0:r.internalId));if(e===void 0)return;T(i.CREATE),Ae(e.type);const t={...e,mode:N.CREATE,status:D.CREATING,internalId:k(),selectedNode:e.coordinates.length-1};Te(t)},Re=()=>{const e=r?r.internalId:0,t=O.find(n=>n.internalId>e);if(t)return A(t);if(O.length>0)return A(O[0])},ke=()=>{const e=r?r.internalId:0,t=[...O];t.sort((o,s)=>s.internalId-o.internalId);const n=t.find(o=>o.internalId<e);if(n)return A(n);if(O.length>0)return A(O[O.length-1])},Ve=()=>{if(r){const e=JSON.stringify(r);localStorage.setItem("lostAnnotationClipboard",e);const t={title:"Success",message:"Annotation copied",type:rt.SUCCESS};se(t)}},Le=()=>{const e=localStorage.getItem("lostAnnotationClipboard");if(e==null)return;const t=JSON.parse(e);t.internalId=k(),t.externalId="",oe(t,!0),A(t)},Pe=e=>{switch(e){case a.EDIT_LABEL:r&&_(!0);break;case a.DELETE_ANNO:r&&ie(r.internalId);break;case a.DELETE_ANNO_IN_CREATION:g===i.CREATE&&(ie(r.internalId),T(i.VIEW));break;case a.ENTER_ANNO_ADD_MODE:console.log("KeyAction TODO: ENTER_ANNO_ADD_MODE");break;case a.LEAVE_ANNO_ADD_MODE:console.log("KeyAction TODO: LEAVE_ANNO_ADD_MODE");break;case a.UNDO:console.log("KeyAction TODO: UNDO");break;case a.REDO:console.log("KeyAction TODO: REDO");break;case a.TRAVERSE_ANNOS:Re();break;case a.TRAVERSE_ANNOS_BACKWARDS:ke();break;case a.CAM_MOVE_LEFT:b(20*l,0);break;case a.CAM_MOVE_RIGHT:b(-20*l,0);break;case a.CAM_MOVE_UP:b(0,20*l);break;case a.CAM_MOVE_DOWN:b(0,-20*l);break;case a.CAM_MOVE_STOP:console.log("KeyAction TODO: CAM_MOVE_STOP");break;case a.COPY_ANNOTATION:Ve();break;case a.PASTE_ANNOTATION:Le();break;case a.RECREATE_ANNO:console.log("KeyAction TODO: RECREATE_ANNO"),Ne();break;case a.TOGGLE_IMAGE_JUNK:if(g===i.ADD||g===i.CREATE)return;ve(!K);break;default:console.log("Unknown KeyAction",e);break}},b=(e,t)=>{let n=c.x+e/l,o=c.y+t/l;const s=d.x*.45,f=d.x*.55,I=d.y*.45,je=d.y*.55,Je={x:0,y:0},Ee=xe.getViewportCoordinates(c,d,l,Je),me=xe.getViewportCoordinates(c,d,l,d);Ee.vX>=s?n=c.x-5:me.vX<=f?n=c.x+5:Ee.vY>=I?o=c.y-5:me.vY<=je&&(o=c.y+5),S({x:n,y:o})},J=(e=>m.x<=0||m.y<=0||u.x<=0||u.y<=0?[]:O.map(n=>({...n,coordinates:C.convertPercentagedCoordinatesToStage(n.coordinates,u,m)})))(),We=()=>{if(T(i.VIEW),de({x:-1,y:-1}),y.current!==null){const{width:e,height:t}=y.current.getBoundingClientRect();Y({x:e,y:t})}P(1),S({x:0,y:0}),$(void 0),_(!1)};M(()=>{var e;(e=fe.current)==null||e.focus()},[]),M(()=>{if((h==null?void 0:h.current)!==void 0){const{width:e,height:t}=h.current.getBoundingClientRect(),n=t-U;G({x:e,y:n});const o=new ResizeObserver(()=>{const{width:s,height:f}=h.current.getBoundingClientRect(),I=f-U;G({x:s,y:I})});return o.observe(h.current),()=>o.disconnect()}We()},[ee,Ce]),M(()=>{Se()},[y,c,d]),M(()=>{if(h.current===null)return;const{width:e,height:t}=h.current.getBoundingClientRect(),n=t-U;G({x:e,y:n})},[h]),M(()=>{if(y.current===null)return;const{width:e,height:t}=y.current.getBoundingClientRect();Y({x:e,y:t});const n=new ResizeObserver(()=>{const{width:o,height:s}=y.current.getBoundingClientRect();Y({x:o,y:s})});return n.observe(y.current),()=>n.disconnect()},[y]),M(()=>{if(v===0)return;const e={x:u.x*v,y:u.y*v};de(e)},[v,u]),M(()=>{F&&X.polygonsToCreate!==void 0&&X.polygonsToCreate.forEach(e=>{const t=k(),n=new pe(t,e.type,C.convertPercentagedCoordinatesToStage(e.coordinates,u,m),N.VIEW,D.CREATED);Q(n)})},[X]);const Q=e=>{T(i.VIEW);const t={...e,mode:N.VIEW};if(e.type!==w.Point){const s=st.getRoundedDuration(Me,performance.now());t.annoTime=s}const n=C.convertStageCoordinatesToPercentaged(e.coordinates,v,u);t.coordinates=n,re(t);const o=R===w.Point||F;oe(t,o)},Be=e=>{e.preventDefault(),_e.keyDown(e.key,e.shiftKey,e.ctrlKey)},Ke=e=>{e.preventDefault()},Fe=e=>{if(e.button!==0){if(e.button===1)T(i.CAMERA_MOVE);else if(e.button===2){if(!B.canCreate||g===i.ADD||g===i.CREATE)return;const t=he.getAntiScaledMouseStagePosition(e,L,l,c),n={x:t.x-ae,y:t.y};be(n)}}},Xe=()=>{ne&&(document.body.style.overflow="hidden")},Ue=e=>{switch(e.button){case 1:T(i.VIEW);break}},ue=(e,t)=>{g===i.CAMERA_MOVE&&b(e,t)},ze=()=>{ne&&(document.body.style.overflow="")},Ye=e=>{const o=(e.deltaY<0?1:-1)>0?l*1.25:l/1.25,s=he.getAntiScaledMouseStagePosition(e,L,l,c),f=l/o,I={x:f*(s.x+c.x)-s.x,y:f*(s.y+c.y)-s.y};o<1?(P(1),(c.x!=0||c.y!=0)&&S({x:0,y:0})):o>200?(P(200),S(I)):(P(o),S(I))},Ge=(e,t)=>{if(t!==qe.ANNO_SELECTED){console.log("Unknown Canvas Action:",t);return}const n={...e,coordinates:C.convertStageCoordinatesToPercentaged([...e.coordinates],v,u)};A(n);const o=C.getMostLeftPoints(e.coordinates),s=C.getTopPoint(o)[0],f=C.convertStageToPage(s,L,l,c);$(f)},ge=e=>{const t=C.convertStageCoordinatesToPercentaged(e.coordinates,v,u),n={...e,coordinates:t};n.status===D.LOADED&&(n.status=D.CHANGED),re(n)},He=()=>{if(g===i.CAMERA_MOVE)return x(Qe,{});const t=[i.CREATE,i.ADD,i.MOVE].includes(g),n=J.map(o=>{const s=o.internalId===(r==null?void 0:r.internalId);return t&&!s?x("g",{},`annotationComponent_${o.internalId}`):x(et,{scaledAnnotation:o,annotationSettings:B,possibleLabels:te,svgScale:l,svgTranslation:H,pageToStageOffset:L,nodeRadius:z.nodeRadius,strokeWidth:z.strokeWidth,isSelected:s,isDisabled:F&&s,onFinishAnnoCreate:Q,onLabelIconClicked:()=>_(!0),onAction:Ge,onAnnoChanged:ge,onAnnotationModeChange:f=>{f===N.MOVE&&T(i.MOVE),g===i.MOVE&&f===N.VIEW&&T(i.VIEW)},onNotification:se},`annotationComponent_${o.internalId}`)});if(r){const o=J.find(f=>f.internalId===(r==null?void 0:r.internalId)),s=J.indexOf(o);n.push(n.splice(s,1)[0])}return x("g",{children:n})},$e=()=>x("circle",{cx:m.x/2,cy:m.y/2,r:"100%",style:{opacity:0},onContextMenu:e=>e.preventDefault(),onClick:()=>{_(!1)}}),ye={x:V.x+d.x/2,y:V.y+d.y/2};return W("div",{ref:h,style:{flex:"1 1 auto",minHeight:0,display:"flex",flexDirection:"column"},children:[x("div",{style:{position:"absolute",left:(p==null?void 0:p.x)!==void 0?p.x:0,top:(p==null?void 0:p.y)!==void 0?p.y:0,display:(p==null?void 0:p.y)!==void 0?"inherit":"none",zIndex:j?7e3:-1},children:x(tt,{defaultLabelId:q,isVisible:j,selectedLabelsIds:r==null?void 0:r.labelIds,possibleLabels:te,isMultilabel:B.canHaveMultipleLabels,onLabelSelect:e=>{if(_(!1),e.length>0){const o=e.filter(s=>!r.labelIds.includes(s));o.length>0&&we(o[0])}const t=r.status===D.LOADED?D.CHANGED:r.status,n={...r,coordinates:C.convertPercentagedCoordinatesToStage(r.coordinates,u,m),labelIds:[...e],status:t};ge(n)}})}),K&&W("div",{style:{position:"absolute",left:ye.x,top:ye.y,transform:"translate(-50%, -50%)",textAlign:"center",color:"white"},children:[x(nt,{icon:ot,size:"5x",style:{marginBottom:15}}),x("h2",{children:"Marked as Junk"})]}),W("svg",{ref:fe,style:{flex:"1 1 auto",minHeight:0},onKeyDown:Be,onKeyUp:Ke,onMouseMove:e=>ue(e.movementX,e.movementY),tabIndex:0,onMouseDown:e=>Fe(e),children:[W("g",{transform:`scale(${l}) translate(${H.x}, ${H.y})`,onMouseOver:Xe,onMouseLeave:ze,onMouseUp:Ue,onWheel:Ye,onMouseMove:e=>ue(e.movementX,e.movementY),onClick:()=>{A(void 0)},children:[x("image",{onContextMenu:e=>e.preventDefault(),href:ee,ref:y,width:m.x>0?m.x:void 0,height:m.y>0?m.y:void 0}),He()]}),j&&$e(),K&&x("rect",{x:"0",y:"0",width:d.x,height:d.y,style:{opacity:.8},onContextMenu:e=>e.preventDefault(),onClick:()=>{$(void 0)}})]})]})};export{wt as default};
+import{jsxs as K,jsx as h,Fragment as Qe}from"react/jsx-runtime";import{useState as E,useRef as Z,useEffect as M}from"react";import D from"../models/AnnotationTool.js";import i from"../models/EditorModes.js";import Ze from"../utils/KeyMapper.js";import a from"../models/KeyAction.js";import pe from"../Annotation/logic/Annotation.js";import qe from"../models/CanvasAction.js";import et from"../Annotation/ui/AnnotationComponent.js";import he from"../utils/mouse.js";import N from"../models/AnnotationMode.js";import tt from"./LabelInput.js";import{FontAwesomeIcon as nt}from"@fortawesome/react-fontawesome";import{faBan as ot}from"@fortawesome/free-solid-svg-icons";import w from"../models/AnnotationStatus.js";import x from"../utils/transform.js";import rt from"../models/NotificationType.js";import st from"../utils/TimeUtils.js";import xe from"../utils/windowViewport.js";const Dt=({annotations:A=[],annotationSettings:W,defaultLabelId:q,image:ee,isFullscreen:Ce=!1,isImageJunk:B=!1,isPolygonSelectionMode:F=!1,polygonOperationResult:X={annotationsToDelete:[],polygonsToCreate:[]},possibleLabels:te,preventScrolling:ne=!0,selectedAnnotation:r,selectedAnnoTool:R,toolbarHeight:U=0,uiConfig:z,onAnnoCreated:Oe,onAnnoCreationFinished:oe,onAnnoChanged:re,onAnnoEditing:Te=g=>{},onNotification:se=g=>{},onRequestNewAnnoId:V,onSelectAnnotation:v,onSetIsImageJunk:Ae,onSetSelectedTool:ve=g=>{},onShouldDeleteAnno:ie})=>{const[g,C]=E(i.VIEW),[Me,Ie]=E(),[ce,De]=E(q),[k,we]=E({x:-1,y:-1}),[ae,le]=E(0),L={x:k.x,y:k.y},[u,Y]=E({x:-1,y:-1}),[d,G]=E({x:-1,y:-1}),[m,de]=E({x:-1,y:-1}),[l,P]=E(1),[c,S]=E({x:0,y:0}),H={x:c.x+ae,y:c.y},[O,$]=E(),[j,_]=E(!1),fe=Z(null),p=Z(null),y=Z(null),T=((e,t)=>{if(e.x===0||e.y===0||t.x===0||t.y===0)return 0;const n=t.x/e.x,o=t.y/e.y;return Math.min(n,o)})(u,d),Se=()=>{if((y==null?void 0:y.current)===null)return{x:0,y:0};const e=u.x*T;if(z.imageCentered&&d.x>e){const f=(d.x-e)/2;le(f)}else le(0);const{top:t,left:n}=p.current.getBoundingClientRect(),o={x:n+window.scrollX,y:t+window.scrollY};we(o)},_e=new Ze(e=>Pe(e)),be=e=>{C(i.CREATE);const t=x.convertStageCoordinatesToPercentaged([e],T,u);R===D.BBox&&t.push(t[0]);const n=V(),o=new pe(n,R,t);if(Ie(performance.now()),ce!==void 0&&(o.labelIds=[ce]),Oe(o),R===D.Point){const s={...o,coordinates:[e],annoTime:0};Q(s)}},Ne=()=>{if(r&&![D.Line,D.Polygon].includes(r.type))return;const e=A.find(n=>n.internalId===(r==null?void 0:r.internalId));if(e===void 0)return;C(i.CREATE),ve(e.type);const t={...e,mode:N.CREATE,status:w.CREATING,internalId:V(),selectedNode:e.coordinates.length-1};Te(t)},Re=()=>{const e=r?r.internalId:0,t=A.find(n=>n.internalId>e);if(t)return v(t);if(A.length>0)return v(A[0])},Ve=()=>{const e=r?r.internalId:0,t=[...A];t.sort((o,s)=>s.internalId-o.internalId);const n=t.find(o=>o.internalId<e);if(n)return v(n);if(A.length>0)return v(A.at(-1))},ke=()=>{if(r){const e=JSON.stringify(r);localStorage.setItem("lostAnnotationClipboard",e);const t={title:"Success",message:"Annotation copied",type:rt.SUCCESS};se(t)}},Le=()=>{const e=localStorage.getItem("lostAnnotationClipboard");if(e==null)return;const t=JSON.parse(e);t.internalId=V(),t.externalId="",oe(t,!0),v(t)},Pe=e=>{switch(e){case a.EDIT_LABEL:r&&_(!0);break;case a.DELETE_ANNO:r&&ie(r.internalId);break;case a.DELETE_ANNO_IN_CREATION:g===i.CREATE&&(ie(r.internalId),C(i.VIEW));break;case a.ENTER_ANNO_ADD_MODE:console.log("KeyAction TODO: ENTER_ANNO_ADD_MODE");break;case a.LEAVE_ANNO_ADD_MODE:console.log("KeyAction TODO: LEAVE_ANNO_ADD_MODE");break;case a.UNDO:console.log("KeyAction TODO: UNDO");break;case a.REDO:console.log("KeyAction TODO: REDO");break;case a.TRAVERSE_ANNOS:Re();break;case a.TRAVERSE_ANNOS_BACKWARDS:Ve();break;case a.CAM_MOVE_LEFT:b(20*l,0);break;case a.CAM_MOVE_RIGHT:b(-20*l,0);break;case a.CAM_MOVE_UP:b(0,20*l);break;case a.CAM_MOVE_DOWN:b(0,-20*l);break;case a.CAM_MOVE_STOP:console.log("KeyAction TODO: CAM_MOVE_STOP");break;case a.COPY_ANNOTATION:ke();break;case a.PASTE_ANNOTATION:Le();break;case a.RECREATE_ANNO:console.log("KeyAction TODO: RECREATE_ANNO"),Ne();break;case a.TOGGLE_IMAGE_JUNK:if(g===i.ADD||g===i.CREATE)return;Ae(!B);break;default:console.log("Unknown KeyAction",e);break}},b=(e,t)=>{let n=c.x+e/l,o=c.y+t/l;const s=d.x*.45,f=d.x*.55,I=d.y*.45,je=d.y*.55,Je={x:0,y:0},Ee=xe.getViewportCoordinates(c,d,l,Je),me=xe.getViewportCoordinates(c,d,l,d);Ee.vX>=s?n=c.x-5:me.vX<=f?n=c.x+5:Ee.vY>=I?o=c.y-5:me.vY<=je&&(o=c.y+5),S({x:n,y:o})},J=(e=>m.x<=0||m.y<=0||u.x<=0||u.y<=0?[]:A.map(n=>({...n,coordinates:x.convertPercentagedCoordinatesToStage(n.coordinates,u,m)})))(),Ke=()=>{if(C(i.VIEW),de({x:-1,y:-1}),y.current!==null){const{width:e,height:t}=y.current.getBoundingClientRect();Y({x:e,y:t})}P(1),S({x:0,y:0}),$(void 0),_(!1)};M(()=>{var e;(e=fe.current)==null||e.focus()},[]),M(()=>{if((p==null?void 0:p.current)!==void 0){const{width:e,height:t}=p.current.getBoundingClientRect(),n=t-U;G({x:e,y:n});const o=new ResizeObserver(()=>{const{width:s,height:f}=p.current.getBoundingClientRect(),I=f-U;G({x:s,y:I})});return o.observe(p.current),()=>o.disconnect()}Ke()},[ee,Ce]),M(()=>{Se()},[y,c,d]),M(()=>{if(p.current===null)return;const{width:e,height:t}=p.current.getBoundingClientRect(),n=t-U;G({x:e,y:n})},[p]),M(()=>{if(y.current===null)return;const{width:e,height:t}=y.current.getBoundingClientRect();Y({x:e,y:t});const n=new ResizeObserver(()=>{const{width:o,height:s}=y.current.getBoundingClientRect();Y({x:o,y:s})});return n.observe(y.current),()=>n.disconnect()},[y]),M(()=>{if(T===0)return;const e={x:u.x*T,y:u.y*T};de(e)},[T,u]),M(()=>{F&&X.polygonsToCreate!==void 0&&X.polygonsToCreate.forEach(e=>{const t=V(),n=new pe(t,e.type,x.convertPercentagedCoordinatesToStage(e.coordinates,u,m),N.VIEW,w.CREATED);Q(n)})},[X]);const Q=e=>{C(i.VIEW);const t={...e,mode:N.VIEW};if(e.type!==D.Point){const s=st.getRoundedDuration(Me,performance.now());t.annoTime=s}const n=x.convertStageCoordinatesToPercentaged(e.coordinates,T,u);t.coordinates=n,re(t);const o=R===D.Point||F;oe(t,o)},We=e=>{_e.keyDown(e.key,e.shiftKey,e.ctrlKey)&&e.preventDefault()},Be=e=>{e.preventDefault()},Fe=e=>{if(e.button!==0){if(e.button===1)C(i.CAMERA_MOVE);else if(e.button===2){if(!W.canCreate||g===i.ADD||g===i.CREATE)return;const t=he.getAntiScaledMouseStagePosition(e,L,l,c),n={x:t.x-ae,y:t.y};be(n)}}},Xe=()=>{ne&&(document.body.style.overflow="hidden")},Ue=e=>{e.button===1&&C(i.VIEW)},ue=(e,t)=>{g===i.CAMERA_MOVE&&b(e,t)},ze=()=>{ne&&(document.body.style.overflow="")},Ye=e=>{const o=(e.deltaY<0?1:-1)>0?l*1.25:l/1.25,s=he.getAntiScaledMouseStagePosition(e,L,l,c),f=l/o,I={x:f*(s.x+c.x)-s.x,y:f*(s.y+c.y)-s.y};o<1?(P(1),(c.x!=0||c.y!=0)&&S({x:0,y:0})):o>200?(P(200),S(I)):(P(o),S(I))},Ge=(e,t)=>{if(t!==qe.ANNO_SELECTED){console.log("Unknown Canvas Action:",t);return}const n={...e,coordinates:x.convertStageCoordinatesToPercentaged([...e.coordinates],T,u)};v(n);const o=x.getMostLeftPoints(e.coordinates),s=x.getTopPoint(o)[0],f=x.convertStageToPage(s,L,l,c);$(f)},ge=e=>{const t=x.convertStageCoordinatesToPercentaged(e.coordinates,T,u),n={...e,coordinates:t};n.status===w.LOADED&&(n.status=w.CHANGED),re(n)},He=()=>{if(g===i.CAMERA_MOVE)return h(Qe,{});const t=[i.CREATE,i.ADD,i.MOVE].includes(g),n=J.map(o=>{const s=o.internalId===(r==null?void 0:r.internalId);return t&&!s?h("g",{},`annotationComponent_${o.internalId}`):h(et,{scaledAnnotation:o,annotationSettings:W,possibleLabels:te,svgScale:l,svgTranslation:H,pageToStageOffset:L,nodeRadius:z.nodeRadius,strokeWidth:z.strokeWidth,isSelected:s,isDisabled:F&&s,onFinishAnnoCreate:Q,onLabelIconClicked:()=>_(!0),onAction:Ge,onAnnoChanged:ge,onAnnotationModeChange:f=>{f===N.MOVE&&C(i.MOVE),g===i.MOVE&&f===N.VIEW&&C(i.VIEW)},onNotification:se},`annotationComponent_${o.internalId}`)});if(r){const o=J.find(f=>f.internalId===(r==null?void 0:r.internalId)),s=J.indexOf(o);n.push(n.splice(s,1)[0])}return h("g",{children:n})},$e=()=>h("circle",{cx:m.x/2,cy:m.y/2,r:"100%",style:{opacity:0},onContextMenu:e=>e.preventDefault(),onClick:()=>{_(!1)}}),ye={x:k.x+d.x/2,y:k.y+d.y/2};return K("div",{ref:p,style:{flex:"1 1 auto",minHeight:0,display:"flex",flexDirection:"column"},children:[h("div",{style:{position:"absolute",left:(O==null?void 0:O.x)??0,top:(O==null?void 0:O.y)??0,display:(O==null?void 0:O.y)===void 0?"none":"inherit",zIndex:j?7e3:-1},children:h(tt,{defaultLabelId:q,isVisible:j,selectedLabelsIds:r==null?void 0:r.labelIds,possibleLabels:te,isMultilabel:W.canHaveMultipleLabels,onLabelSelect:e=>{if(_(!1),e.length>0){const o=e.filter(s=>!r.labelIds.includes(s));o.length>0&&De(o[0])}const t=r.status===w.LOADED?w.CHANGED:r.status,n={...r,coordinates:x.convertPercentagedCoordinatesToStage(r.coordinates,u,m),labelIds:[...e],status:t};ge(n)}})}),B&&K("div",{style:{position:"absolute",left:ye.x,top:ye.y,transform:"translate(-50%, -50%)",textAlign:"center",color:"white"},children:[h(nt,{icon:ot,size:"5x",style:{marginBottom:15}}),h("h2",{children:"Marked as Junk"})]}),K("svg",{ref:fe,style:{flex:"1 1 auto",minHeight:0},onKeyDown:We,onKeyUp:Be,onMouseMove:e=>ue(e.movementX,e.movementY),tabIndex:0,onMouseDown:e=>Fe(e),children:[K("g",{transform:`scale(${l}) translate(${H.x}, ${H.y})`,onMouseOver:Xe,onMouseLeave:ze,onMouseUp:Ue,onWheel:Ye,onMouseMove:e=>ue(e.movementX,e.movementY),onClick:()=>{v(void 0)},children:[h("image",{onContextMenu:e=>e.preventDefault(),href:ee,ref:y,width:m.x>0?m.x:void 0,height:m.y>0?m.y:void 0}),He()]}),j&&$e(),B&&h("rect",{x:"0",y:"0",width:d.x,height:d.y,style:{opacity:.8},onContextMenu:e=>e.preventDefault(),onClick:()=>{$(void 0)}})]})]})};export{Dt as default};

package/dist/Canvas/LabelInput.js

@@ -1 +1 @@
-import{jsxs as r,Fragment as v,jsx as o}from"react/jsx-runtime";import{useState as g}from"react";import{CPopover as w,CDropdown as D,CDropdownToggle as x,CDropdownMenu as y,CFormInput as F,CDropdownDivider as I,CDropdownItem as c}from"@coreui/react";const S=({defaultLabelId:i,isVisible:d,selectedLabelsIds:l,possibleLabels:s,isMultilabel:m=!1,onLabelSelect:f})=>{const[a,C]=g(""),p=s.filter(e=>e.name.toLowerCase().includes(a.toLowerCase())),h=e=>{let n=[];if(m){n=[...l];const u=l.indexOf(e.id);u!==-1?n.splice(u,1):n.push(e.id)}else n=[e.id];f(n)},t=i?s.find(e=>e.id===i):void 0;return r(v,{children:[o(w,{content:`Default Label: ${t==null?void 0:t.name}`,visible:d&&t!==void 0,children:o("div",{style:{marginLeft:80}})}),r(D,{visible:d,autoClose:!1,style:{marginTop:-25},children:[o(x,{style:{display:"none"}}),r(y,{children:[o("div",{className:"px-3 py-2",children:o(F,{placeholder:"Filter label...",value:a,onChange:e=>C(e.target.value),autoFocus:!0})}),o(I,{}),p.length>0?p.map(e=>o(c,{onClick:()=>h(e),children:e.name},e.id)):o(c,{disabled:!0,children:"No results"})]})]})]})};export{S as default};
+import{jsxs as r,Fragment as v,jsx as o}from"react/jsx-runtime";import{useState as g}from"react";import{CPopover as w,CDropdown as D,CDropdownToggle as x,CDropdownMenu as y,CFormInput as F,CDropdownDivider as I,CDropdownItem as c}from"@coreui/react";const S=({defaultLabelId:i,isVisible:d,selectedLabelsIds:l,possibleLabels:s,isMultilabel:m=!1,onLabelSelect:f})=>{const[a,C]=g(""),p=s.filter(e=>e.name.toLowerCase().includes(a.toLowerCase())),h=e=>{let n=[];if(m){n=[...l];const u=l.indexOf(e.id);u===-1?n.push(e.id):n.splice(u,1)}else n=[e.id];f(n)},t=i?s.find(e=>e.id===i):void 0;return r(v,{children:[o(w,{content:`Default Label: ${t==null?void 0:t.name}`,visible:d&&t!==void 0,children:o("div",{style:{marginLeft:80}})}),r(D,{visible:d,autoClose:!1,style:{marginTop:-25},children:[o(x,{style:{display:"none"}}),r(y,{children:[o("div",{className:"px-3 py-2",children:o(F,{placeholder:"Filter label...",value:a,onChange:e=>C(e.target.value),autoFocus:!0})}),o(I,{}),p.length>0?p.map(e=>o(c,{onClick:()=>h(e),children:e.name},e.id)):o(c,{disabled:!0,children:"No results"})]})]})]})};export{S as default};

package/dist/IconButton.d.ts

@@ -7,18 +7,18 @@ type IconButtonProps = {
     margin?: number;
     icon?: IconDefinition;
     text?: string;
-    size?: 'sm' | 'lg' | undefined;
+    size?: 'sm' | 'lg';
     isTextLeft?: boolean;
     style?: CSSProperties;
     id?: string;
-    type?: 'button' | 'submit' | 'reset' | undefined;
+    type?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     onClick?: () => void;
     className?: string;
     color?: string;
     isOutline?: boolean;
     tooltip?: string;
-    ttipPlacement?: 'top' | 'left' | 'right' | 'auto' | 'bottom' | undefined;
+    ttipPlacement?: 'top' | 'left' | 'right' | 'auto' | 'bottom';
     shape?: string;
 };
 declare const IconButton: ({ loadingSize, isLoading, margin, icon, text, size, isTextLeft, style, id, type, disabled, onClick, className, color, isOutline, tooltip, ttipPlacement, shape, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/IconButton.js

@@ -1 +1 @@
-import{jsx as t,jsxs as w}from"react/jsx-runtime";import{faSync as A}from"@fortawesome/free-solid-svg-icons";import{FontAwesomeIcon as v}from"@fortawesome/react-fontawesome";import{CTooltip as F,CButton as y}from"@coreui/react";const D=({loadingSize:o="1x",isLoading:n=!1,margin:c=5,icon:B,text:i="",size:s,isTextLeft:j=!1,style:a={},id:I=void 0,type:N="button",disabled:e=!1,onClick:u,className:l="",color:m="primary",isOutline:C=!0,tooltip:f="",ttipPlacement:T="top",shape:b=""})=>{const r=B,p=C?"outline":void 0,x=()=>{if(n)return w("div",{className:"flex justify-center items-center",children:[t(v,{className:"mr-3",size:o||"2x",icon:A,spin:!0}),t("span",{className:"text-center",children:"Loading"})]});const d=r&&r.iconName&&r.prefix?t(v,{icon:r,size:o||"2x"},"icon"):null,h=i?t("span",{style:{marginLeft:c,marginRight:c},children:i},"text"):null;return j?[h,d]:[d,h]};return f!=""?t(F,{content:f,placement:T,children:t(y,{id:I,size:s,className:l,style:a,variant:p,disabled:e||n,onClick:u,color:e||n?"secondary":m,shape:b,children:x()})}):t(y,{size:s,type:N,className:l,style:a,variant:p,disabled:e||n,onClick:u,color:e||n?"secondary":m,children:x()})};export{D as default};
+import{jsx as t,jsxs as A}from"react/jsx-runtime";import{faSync as F}from"@fortawesome/free-solid-svg-icons";import{FontAwesomeIcon as v}from"@fortawesome/react-fontawesome";import{CTooltip as I,CButton as y}from"@coreui/react";const D=({loadingSize:o="1x",isLoading:n=!1,margin:c=5,icon:j,text:i="",size:s,isTextLeft:N=!1,style:a={},id:B=void 0,type:C="button",disabled:r=!1,onClick:l,className:m="",color:f="primary",isOutline:T=!0,tooltip:u="",ttipPlacement:b="top",shape:w=""})=>{const e=j,p=T?"outline":void 0,x=()=>{if(n)return A("div",{className:"flex justify-center items-center",children:[t(v,{className:"mr-3",size:o||"2x",icon:F,spin:!0}),t("span",{className:"text-center",children:"Loading"})]});const d=e!=null&&e.iconName&&e.prefix?t(v,{icon:e,size:o||"2x"},"icon"):null,h=i?t("span",{style:{marginLeft:c,marginRight:c},children:i},"text"):null;return N?[h,d]:[d,h]};return u!=""?t(I,{content:u,placement:b,children:t(y,{id:B,size:s,className:m,style:a,variant:p,disabled:r||n,onClick:l,color:r||n?"secondary":f,shape:w,children:x()})}):t(y,{size:s,type:C,className:m,style:a,variant:p,disabled:r||n,onClick:l,color:r||n?"secondary":f,children:x()})};export{D as default};

package/dist/Sia.d.ts

@@ -3,7 +3,7 @@ import { default as AnnotationTool } from './models/AnnotationTool';
 import { default as Annotation } from './Annotation/logic/Annotation';
 import { AllowedTools, AnnotationSettings, ExternalAnnotation, Label, PolygonOperationResult, SIANotification, UiConfig } from './types';
 type SiaProps = {
-    additionalButtons?: ReactElement | undefined;
+    additionalButtons?: ReactElement;
     allowedTools?: AllowedTools;
     polygonOperationResult?: PolygonOperationResult;
     annotationSettings?: AnnotationSettings;

package/dist/Sia.js

@@ -1 +1 @@
-import{jsx as d,jsxs as W}from"react/jsx-runtime";import{useRef as cn,useState as s,useEffect as u}from"react";import{CSpinner as q}from"@coreui/react";import fn from"./Canvas/Canvas.js";import un from"./models/AnnotationTool.js";import In from"./Toolbar/Toolbar.js";import mn from"./models/AnnotationMode.js";import hn from"./models/AnnotationStatus.js";const yn=({additionalButtons:z,allowedTools:S,polygonOperationResult:c={annotationsToDelete:[],polygonsToCreate:[]},annotationSettings:A,uiConfig:g,defaultAnnotationTool:w,defaultLabelId:M,image:I,isLoading:y=!1,isPolygonSelectionMode:D=!1,initialAnnotations:x=[],initialImageLabelIds:_=[],initialIsImageJunk:V=!1,possibleLabels:b,onAnnoCreated:G=(f,m)=>{},onAnnoCreationFinished:K=(f,m)=>{},onAnnoChanged:Q=(f,m)=>{},onAnnoDeleted:k=(f,m)=>{},onImageLabelsChanged:X=()=>{},onIsImageJunk:Y=()=>{},onNotification:Z=f=>{},onSelectAnnotation:$=f=>{}})=>{const m=cn(null),[p,E]=s(),[i,r]=s([]),[j,R]=s(),[O,nn]=s(),[l,h]=s(),[N,B]=s(w!==void 0?w:un.Point),[en,Sn]=s({flex:"1 1 auto",minHeight:0,display:"flex",flexDirection:"column"}),[tn,F]=s(_),[J,L]=s(),[C,on]=s(!1),[U,H]=s([]),T=n=>{const e=i.findIndex(a=>a.internalId===n),t=[...i],o=t.splice(e,1)[0];r(t),h(void 0),k(o,t)},sn=()=>{l!==void 0&&T(l.internalId)},an=()=>{let n=0;const e=x.map(t=>({...t,internalId:n++,mode:mn.VIEW,selectedNode:1,status:t.status,annoTime:t.annoTime!==void 0?t.annoTime:0}));H([...Array(n).keys()]),r(e)},rn=()=>{let n=0;for(;U.includes(n);)n++;const e=[...U];return e.push(n),H(e),n},ln=n=>{const e=[...i],t=e.findIndex(v=>v.internalId===(l==null?void 0:l.internalId));if(t===-1)return;const o=e.splice(t,1)[0];k(o,e);const a=[...e];a.push(n),r(a),h(n)},P=n=>{L(n),Y(n)};u(()=>{I===void 0&&(r([]),h(void 0))},[I]),u(()=>{L(V),!(I!==void 0||x.length===0)&&an()},[x]),u(()=>{F(_)},[_]),u(()=>{const e={...{canCreate:!0,canEdit:!0,canHaveMultipleLabels:!1,canLabel:!0,minimalArea:250},...A};R(e)},[A]),u(()=>{const e={...{nodeRadius:4,strokeWidth:4,imageCentered:!1},...g};nn(e)},[g]),u(()=>{const n={bbox:!0,point:!0,line:!0,junk:!0,polygon:!0};if(S===void 0)return E(n);E(S)},[S]);const dn={position:"fixed",top:0,left:0,zIndex:6e3,backgroundColor:"#ffff",width:"100%",height:"100%",padding:15};return p===void 0?d("div",{className:"d-flex justify-content-center",children:d(q,{color:"primary",style:{width:"5rem",height:"5rem"}})}):W("div",{style:{...C?dn:{},flex:"1 1 auto",minHeight:0,display:"flex",flexDirection:"column"},children:[d("div",{ref:m,style:{marginBottom:10},children:d(In,{annotationSettings:j,allowedTools:p,additionalButtons:z,isDisabled:y,isFullscreen:C,isImageJunk:J,imageLabelIds:tn,possibleLabels:b,selectedTool:N,onImageLabelsChanged:n=>{F(n),X(n)},onSetIsFullscreen:on,onSetIsImageJunk:P,onSetSelectedTool:B,onShouldDeleteSelectedAnnotation:sn})}),W("div",{style:en,children:[y&&d("div",{className:"d-flex justify-content-center",children:d(q,{color:"primary",style:{width:"5rem",height:"5rem",marginTop:200}})}),I&&i&&d(fn,{annotations:i,annotationSettings:j,defaultLabelId:M,image:I,isFullscreen:C,isImageJunk:J,isPolygonSelectionMode:D,selectedAnnotation:l,selectedAnnoTool:N,polygonOperationResult:c,possibleLabels:b,uiConfig:O,onAnnoCreated:n=>{const e=[...i];e.push(n),r(e),h(n),G(n,e)},onAnnoChanged:n=>{const e=i.findIndex(o=>o.internalId===n.internalId);if(e===-1)return;const t=[...i];t[e]=n,r(t),Q(n,t)},onAnnoCreationFinished:(n,e)=>{const t=[...i];if(D&&(c==null?void 0:c.annotationsToDelete)!==void 0&&(c.annotationsToDelete.push(l),c.annotationsToDelete.forEach(o=>{T(o.internalId);const a=t.findIndex(v=>v.internalId===o.internalId);t.splice(a,1)})),e)t.push(n);else{const o=i.findIndex(a=>a.internalId===n.internalId);t[o]=n}r(t),n.status=hn.CREATED,K(n,t)},onAnnoEditing:ln,onSetIsImageJunk:P,onNotification:Z,onRequestNewAnnoId:rn,onSelectAnnotation:n=>{h(n),$(n)},onSetSelectedTool:B,onShouldDeleteAnno:T})]})]})};export{yn as default};
+import{jsx as r,jsxs as P}from"react/jsx-runtime";import{useRef as cn,useState as i,useEffect as u}from"react";import{CSpinner as W}from"@coreui/react";import fn from"./Canvas/Canvas.js";import un from"./models/AnnotationTool.js";import In from"./Toolbar/Toolbar.js";import mn from"./models/AnnotationMode.js";import hn from"./models/AnnotationStatus.js";const wn=({additionalButtons:q,allowedTools:S,polygonOperationResult:c={annotationsToDelete:[],polygonsToCreate:[]},annotationSettings:T,uiConfig:g,defaultAnnotationTool:z,defaultLabelId:M,image:I,isLoading:w=!1,isPolygonSelectionMode:y=!1,initialAnnotations:x=void 0,initialImageLabelIds:_=void 0,initialIsImageJunk:V=!1,possibleLabels:D,onAnnoCreated:G=(f,m)=>{},onAnnoCreationFinished:K=(f,m)=>{},onAnnoChanged:Q=(f,m)=>{},onAnnoDeleted:b=(f,m)=>{},onImageLabelsChanged:X=()=>{},onIsImageJunk:Y=()=>{},onNotification:Z=f=>{},onSelectAnnotation:$=f=>{}})=>{const m=cn(null),[k,p]=i(),[s,d]=i([]),[E,R]=i(),[O,nn]=i(),[l,h]=i(),[j,N]=i(z??un.Point),[en,B]=i(_),[F,J]=i(),[v,tn]=i(!1),[L,U]=i([]),A=n=>{const e=s.findIndex(a=>a.internalId===n),t=[...s],o=t.splice(e,1)[0];d(t),h(void 0),b(o,t)},on=()=>{l!==void 0&&A(l.internalId)},sn=()=>{let n=0;const e=x.map(t=>({...t,internalId:n++,mode:mn.VIEW,selectedNode:1,status:t.status,annoTime:t.annoTime??0}));U([...new Array(n).keys()]),d(e)},an=()=>{let n=0;for(;L.includes(n);)n++;const e=[...L];return e.push(n),U(e),n},dn=n=>{const e=[...s],t=e.findIndex(C=>C.internalId===(l==null?void 0:l.internalId));if(t===-1)return;const o=e.splice(t,1)[0];b(o,e);const a=[...e];a.push(n),d(a),h(n)},H=n=>{J(n),Y(n)};u(()=>{I===void 0&&(d([]),h(void 0))},[I]),u(()=>{J(V),!(I!==void 0||x===void 0||x.length===0)&&sn()},[x]),u(()=>{B(_)},[_]),u(()=>{const e={...{canCreate:!0,canEdit:!0,canHaveMultipleLabels:!1,canLabel:!0,minimalArea:250},...T};R(e)},[T]),u(()=>{const e={...{nodeRadius:4,strokeWidth:4,imageCentered:!1},...g};nn(e)},[g]),u(()=>{const n={bbox:!0,point:!0,line:!0,junk:!0,polygon:!0};if(S===void 0)return p(n);p(S)},[S]);const ln={position:"fixed",top:0,left:0,zIndex:6e3,backgroundColor:"#ffff",width:"100%",height:"100%",padding:15},rn={flex:"1 1 auto",minHeight:0,display:"flex",flexDirection:"column"};return k===void 0?r("div",{className:"d-flex justify-content-center",children:r(W,{color:"primary",style:{width:"5rem",height:"5rem"}})}):P("div",{style:{...v?ln:{},flex:"1 1 auto",minHeight:0,display:"flex",flexDirection:"column"},children:[r("div",{ref:m,style:{marginBottom:10},children:r(In,{annotationSettings:E,allowedTools:k,additionalButtons:q,isDisabled:w,isFullscreen:v,isImageJunk:F,imageLabelIds:en,possibleLabels:D,selectedTool:j,onImageLabelsChanged:n=>{B(n),X(n)},onSetIsFullscreen:tn,onSetIsImageJunk:H,onSetSelectedTool:N,onShouldDeleteSelectedAnnotation:on})}),P("div",{style:rn,children:[w&&r("div",{className:"d-flex justify-content-center",children:r(W,{color:"primary",style:{width:"5rem",height:"5rem",marginTop:200}})}),I&&s&&r(fn,{annotations:s,annotationSettings:E,defaultLabelId:M,image:I,isFullscreen:v,isImageJunk:F,isPolygonSelectionMode:y,selectedAnnotation:l,selectedAnnoTool:j,polygonOperationResult:c,possibleLabels:D,uiConfig:O,onAnnoCreated:n=>{const e=[...s];e.push(n),d(e),h(n),G(n,e)},onAnnoChanged:n=>{const e=s.findIndex(o=>o.internalId===n.internalId);if(e===-1)return;const t=[...s];t[e]=n,d(t),Q(n,t)},onAnnoCreationFinished:(n,e)=>{const t=[...s];if(y&&(c==null?void 0:c.annotationsToDelete)!==void 0){c.annotationsToDelete.push(l);for(const o of c.annotationsToDelete){A(o.internalId);const a=t.findIndex(C=>C.internalId===o.internalId);t.splice(a,1)}}if(e)t.push(n);else{const o=s.findIndex(a=>a.internalId===n.internalId);t[o]=n}d(t),n.status=hn.CREATED,K(n,t)},onAnnoEditing:dn,onSetIsImageJunk:H,onNotification:Z,onRequestNewAnnoId:an,onSelectAnnotation:n=>{h(n),$(n)},onSetSelectedTool:N,onShouldDeleteAnno:A})]})]})};export{wn as default};

package/dist/Toolbar/Toolbar.d.ts

@@ -4,7 +4,7 @@ import { AllowedTools, AnnotationSettings, Label } from '../types';
 type ToolbarProps = {
     annotationSettings: AnnotationSettings;
     allowedTools: AllowedTools;
-    additionalButtons?: ReactElement | undefined;
+    additionalButtons?: ReactElement;
     isImageJunk?: boolean;
     imageLabelIds?: number[];
     isDisabled?: boolean;

package/dist/Toolbar/Toolbar.js

@@ -1 +1 @@
-import{jsxs as j,jsx as o}from"react/jsx-runtime";import{CRow as C,CCol as e}from"@coreui/react";import g from"./ToolbarItems/AnnoToolSelector.js";import y from"./ToolbarItems/ImageTools.js";import T from"./ToolbarItems/AccessibilityTools.js";const J=({annotationSettings:c,allowedTools:t,additionalButtons:n,isImageJunk:m=!1,imageLabelIds:f=[],isDisabled:r=!1,isFullscreen:a=!1,possibleLabels:l,selectedTool:s,onImageLabelsChanged:p=()=>{},onSetIsFullscreen:x=()=>{},onSetIsImageJunk:i=()=>{},onSetSelectedTool:u=()=>{},onShouldDeleteSelectedAnnotation:h=()=>{}})=>j(C,{className:"d-flex justify-content-center flex-wrap align-items-center gap-0 py-2 px-4",children:[o(e,{xs:"auto",children:o(y,{canJunk:t.junk,isImageJunk:m,imageLabelIds:f,isDisabled:r,isFullscreen:a,possibleLabels:l,onImageLabelsChanged:p,onSetIsImageJunk:i})}),o(e,{xs:"auto",children:o(T,{isDisabled:r,isFullscreen:a,onSetIsFullscreen:x})}),c.canCreate&&o(e,{xs:"auto",children:o(g,{allowedTools:t,isDisabled:r,selectedTool:s,onSetSelectedTool:u,onShouldDeleteSelectedAnnotation:h})}),n&&n]});export{J as default};
+import{jsxs as j,jsx as o}from"react/jsx-runtime";import{CRow as C,CCol as t}from"@coreui/react";import d from"./ToolbarItems/AnnoToolSelector.js";import g from"./ToolbarItems/ImageTools.js";import y from"./ToolbarItems/AccessibilityTools.js";const J=({annotationSettings:a,allowedTools:e,additionalButtons:c,isImageJunk:m=!1,imageLabelIds:f=[],isDisabled:r=!1,isFullscreen:n=!1,possibleLabels:l,selectedTool:s,onImageLabelsChanged:i=()=>{},onSetIsFullscreen:p=()=>{},onSetIsImageJunk:x=()=>{},onSetSelectedTool:u=()=>{},onShouldDeleteSelectedAnnotation:h=()=>{}})=>j(C,{className:"d-flex justify-content-center flex-wrap align-items-center gap-0 py-2 px-4",children:[o(t,{xs:"auto",children:o(g,{canJunk:e.junk,isImageJunk:m,imageLabelIds:f,isDisabled:r,isFullscreen:n,possibleLabels:l,onImageLabelsChanged:i,onSetIsImageJunk:x})}),o(t,{xs:"auto",children:o(y,{isDisabled:r,isFullscreen:n,onSetIsFullscreen:p})}),a.canCreate&&o(t,{xs:"auto",children:o(d,{allowedTools:e,isDisabled:r,selectedTool:s,onSetSelectedTool:u,onShouldDeleteSelectedAnnotation:h})}),c]});export{J as default};

package/dist/Toolbar/ToolbarItems/ImageToolItems/ImageLabelInput.d.ts

@@ -1,6 +1,5 @@
 import { Label } from '../../../types';
 type ImageLabelInputProps = {
-    defaultLabelId?: number;
     isDisabled: boolean;
     isVisible: boolean;
     selectedLabelsIds: number[];

package/dist/Toolbar/ToolbarItems/ImageToolItems/ImageLabelInput.js

@@ -1 +1 @@
-import{jsx as r,jsxs as s}from"react/jsx-runtime";import{useState as C}from"react";import{CTooltip as L,CDropdown as w,CDropdownToggle as v,CDropdownMenu as T,CFormInput as x,CDropdownDivider as y,CDropdownItem as d}from"@coreui/react";import{FontAwesomeIcon as D}from"@fortawesome/react-fontawesome";import{faTag as b}from"@fortawesome/free-solid-svg-icons";import F from"./TagLabel.js";const M=({isDisabled:c,isVisible:m,selectedLabelsIds:t,possibleLabels:n,isMultilabel:p=!1,onLabelSelect:u})=>{const[i,f]=C(""),a=n.filter(e=>e.name.toLowerCase().includes(i.toLowerCase())),g=e=>{let o=[];if(p){o=[...t];const l=t.indexOf(e.id);l!==-1?o.splice(l,1):o.push(e.id)}else o=[e.id];u(o)},h=()=>n.filter(o=>t.includes(o.id));return r(L,{content:"Add Image Label",children:s(w,{visible:m,autoClose:!1,children:[r(v,{variant:"outline",caret:!1,color:c?"secondary":"primary",style:{paddingTop:0,paddingBottom:0},as:"div",children:t.length===0?r("div",{style:{marginTop:6},children:r(D,{icon:b})}):h().map(o=>r(F,{name:o.name,color:o.color,size:25,triangleSize:17,style:{marginLeft:1,marginTop:5}},o.name))}),s(T,{children:[r("div",{className:"px-3 py-2",children:r(x,{placeholder:"Filter label...",value:i,onChange:e=>f(e.target.value),autoFocus:!0})}),r(y,{}),a.length>0?a.map(e=>r(d,{onClick:()=>g(e),children:e.name},e.id)):r(d,{disabled:!0,children:"No results"})]})]})})};export{M as default};
+import{jsx as r,jsxs as s}from"react/jsx-runtime";import{useState as C}from"react";import{CTooltip as L,CDropdown as w,CDropdownToggle as v,CDropdownMenu as T,CFormInput as x,CDropdownDivider as y,CDropdownItem as d}from"@coreui/react";import{FontAwesomeIcon as D}from"@fortawesome/react-fontawesome";import{faTag as b}from"@fortawesome/free-solid-svg-icons";import F from"./TagLabel.js";const M=({isDisabled:c,isVisible:m,selectedLabelsIds:t,possibleLabels:n,isMultilabel:p=!1,onLabelSelect:u})=>{const[i,f]=C(""),a=n.filter(e=>e.name.toLowerCase().includes(i.toLowerCase())),g=e=>{let o=[];if(p){o=[...t];const l=t.indexOf(e.id);l===-1?o.push(e.id):o.splice(l,1)}else o=[e.id];u(o)},h=()=>n.filter(o=>t.includes(o.id));return r(L,{content:"Add Image Label",children:s(w,{visible:m,autoClose:!1,children:[r(v,{variant:"outline",caret:!1,color:c?"secondary":"primary",style:{paddingTop:0,paddingBottom:0},as:"div",children:t.length===0?r("div",{style:{marginTop:6},children:r(D,{icon:b})}):h().map(o=>r(F,{name:o.name,color:o.color,size:25,triangleSize:17,style:{marginLeft:1,marginTop:5}},o.name))}),s(T,{children:[r("div",{className:"px-3 py-2",children:r(x,{placeholder:"Filter label...",value:i,onChange:e=>f(e.target.value),autoFocus:!0})}),r(y,{}),a.length>0?a.map(e=>r(d,{onClick:()=>g(e),children:e.name},e.id)):r(d,{disabled:!0,children:"No results"})]})]})})};export{M as default};

package/dist/Toolbar/ToolbarItems/ImageToolItems/TagLabel.js

@@ -1 +1 @@
-import{jsxs as l,jsx as p}from"react/jsx-runtime";const x=({name:n,color:t="#2185d0",size:o=32,style:s={},triangleSize:e=22,onClick:r})=>{const a={display:"inline-flex",alignItems:"center",backgroundColor:t,color:"#000",height:`${o}px`,fontSize:`${o*.45}px`,padding:"0 1rem 0 0.75rem",borderRadius:"0 0.25rem 0.25rem 0",marginLeft:`${e/1.4}px`,position:"relative",overflow:"visible",cursor:r?"pointer":"default",...s},i={position:"absolute",left:`-${e/2}px`,width:`${e}px`,height:`${e}px`,backgroundColor:t,transform:"rotate(45deg)",zIndex:-1,pointerEvents:"none"};return l("span",{style:a,onClick:r,children:[p("span",{style:i}),n]})};export{x as default};
+import{jsxs as l,jsx as p}from"react/jsx-runtime";const x=({name:n,color:t="#2185d0",size:o=32,style:s={},triangleSize:e=22,onClick:r})=>{const i={display:"inline-flex",alignItems:"center",backgroundColor:t,color:"#000",height:`${o}px`,fontSize:`${o*.45}px`,padding:"0 1rem 0 0.75rem",border:0,borderRadius:"0 0.25rem 0.25rem 0",marginLeft:`${e/1.4}px`,position:"relative",overflow:"visible",cursor:r?"pointer":"default",...s},a={position:"absolute",left:`-${e/2}px`,width:`${e}px`,height:`${e}px`,backgroundColor:t,transform:"rotate(45deg)",zIndex:-1,pointerEvents:"none"};return l("button",{style:i,onClick:r,children:[p("span",{style:a}),n]})};export{x as default};

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

@@ -4,7 +4,7 @@ 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 | undefined;
+        additionalButtons?: import('react').ReactElement;
         allowedTools?: AllowedTools;
         polygonOperationResult?: import('..').PolygonOperationResult;
         annotationSettings?: import('..').AnnotationSettings;
@@ -33,30 +33,6 @@ declare const meta: {
     tags: string[];
     excludeStories: RegExp;
     args: {};
-    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
-        additionalButtons?: import('react').ReactElement | undefined;
-        allowedTools?: 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?: import('..').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>;

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

@@ -1,6 +1,5 @@
 import { StoryObj } from '@storybook/react';
 import { default as AnnotationTool } from '../../models/AnnotationTool';
-import { default as Annotation } from '../../Annotation/logic/Annotation';
 import { AnnotationSettings, UiConfig } from '../../types';
 export declare const ActionsData: {
     onAnnoEvent: import('@vitest/spy').Mock<(...args: any[]) => any>;
@@ -10,27 +9,27 @@ export declare const ActionsData: {
 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, }: {
-        annotations?: Annotation[];
+        annotations?: import('../../models').Annotation[];
         annotationSettings: AnnotationSettings;
         defaultLabelId?: number;
         image: string;
         isFullscreen?: boolean;
         isImageJunk?: boolean;
         isPolygonSelectionMode?: boolean;
-        selectedAnnotation: Annotation | undefined;
+        selectedAnnotation: import('../../models').Annotation | undefined;
         selectedAnnoTool: AnnotationTool;
         toolbarHeight?: number;
         polygonOperationResult?: import('../..').PolygonOperationResult;
         possibleLabels: import('../..').Label[];
         preventScrolling?: boolean;
         uiConfig: UiConfig;
-        onAnnoCreated: (createdAnno: Annotation) => void;
-        onAnnoCreationFinished: (createdAnno: Annotation, hasAnnotationExisted: boolean) => void;
-        onAnnoChanged: (changedAnno: Annotation) => void;
-        onAnnoEditing: (annoToEdit: Annotation) => void;
+        onAnnoCreated: (createdAnno: import('../../models').Annotation) => void;
+        onAnnoCreationFinished: (createdAnno: import('../../models').Annotation, hasAnnotationExisted: boolean) => void;
+        onAnnoChanged: (changedAnno: import('../../models').Annotation) => void;
+        onAnnoEditing: (annoToEdit: import('../../models').Annotation) => void;
         onNotification?: (notification: import('../..').SIANotification) => void;
         onRequestNewAnnoId: () => number;
-        onSelectAnnotation: (annotation?: Annotation) => void;
+        onSelectAnnotation: (annotation?: import('../../models').Annotation) => void;
         onSetIsImageJunk: (newJunkState: boolean) => void;
         onSetSelectedTool: (tool: AnnotationTool) => void;
         onShouldDeleteAnno: (internalAnnoId: number) => void;

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

@@ -1,6 +1,5 @@
 import { default as Annotation } from '../../Annotation/logic/Annotation';
 import { default as AnnotationTool } from '../../models/AnnotationTool';
-import { default as CanvasAction } from '../../models/CanvasAction';
 import { Label, UiConfig } from '../../types';
 type CanvasProps = {
     annotations?: Annotation[];
@@ -9,9 +8,6 @@ type CanvasProps = {
     possibleLabels: Label[];
     preventScrolling: boolean;
     uiConfig: UiConfig;
-    onAnnoEvent?: (annotation: Annotation, canvasAction: CanvasAction) => void | undefined;
-    onKeyDown?: (e: any) => void | undefined;
-    onKeyUp?: (e: any) => void | undefined;
 };
 declare const CanvasWithOffset: ({ annotations, image, selectedAnnoTool, possibleLabels, preventScrolling, uiConfig, }: CanvasProps) => import("react/jsx-runtime").JSX.Element;
 export default CanvasWithOffset;

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

@@ -1,6 +1,5 @@
 import { StoryObj } from '@storybook/react';
 import { default as AnnotationTool } from '../../models/AnnotationTool';
-import { default as Annotation } from '../../Annotation/logic/Annotation';
 import { UiConfig } from '../../types';
 export declare const ActionsData: {
     onAnnoEvent: import('@vitest/spy').Mock<(...args: any[]) => any>;
@@ -10,15 +9,12 @@ export declare const ActionsData: {
 declare const meta: {
     title: string;
     component: ({ annotations, image, selectedAnnoTool, possibleLabels, preventScrolling, uiConfig, }: {
-        annotations?: Annotation[];
+        annotations?: import('../../models').Annotation[];
         image: string;
         selectedAnnoTool: AnnotationTool;
         possibleLabels: import('../..').Label[];
         preventScrolling: boolean;
         uiConfig: UiConfig;
-        onAnnoEvent?: (annotation: Annotation, canvasAction: import('../../models/CanvasAction').default) => void | undefined;
-        onKeyDown?: (e: any) => void | undefined;
-        onKeyUp?: (e: any) => void | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;

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

@@ -4,7 +4,7 @@ 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 | undefined;
+        additionalButtons?: import('react').ReactElement;
         allowedTools?: import('..').AllowedTools;
         polygonOperationResult?: import('..').PolygonOperationResult;
         annotationSettings?: import('..').AnnotationSettings;
@@ -34,7 +34,7 @@ declare const meta: {
     excludeStories: RegExp;
     args: {};
     decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
-        additionalButtons?: import('react').ReactElement | undefined;
+        additionalButtons?: import('react').ReactElement;
         allowedTools?: import('..').AllowedTools;
         polygonOperationResult?: import('..').PolygonOperationResult;
         annotationSettings?: import('..').AnnotationSettings;

package/dist/stories/{SIA2 → SIA}/DemoWrapper.stories.d.ts

@@ -1,10 +1,10 @@
 import { StoryObj } from '@storybook/react';
-import { AnnotationSettings, ExternalAnnotation } from '../../types';
+import { AnnotationSettings } from '../../types';
 export declare const ActionsData: {};
 declare const meta: {
     title: string;
     component: ({ annotations, annotationSettings, isLoading, }: {
-        annotations?: ExternalAnnotation[];
+        annotations?: import('../..').ExternalAnnotation[];
         annotationSettings?: AnnotationSettings;
         isLoading?: boolean;
     }) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/{SIA2/Sia2.stories.d.ts → SIA/SIA.stories.d.ts}

@@ -1,10 +1,10 @@
 import { StoryObj } from '@storybook/react';
-import { Label, UiConfig } from '../../types';
+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 | undefined;
+        additionalButtons?: import('react').ReactElement;
         allowedTools?: import('../..').AllowedTools;
         polygonOperationResult?: import('../..').PolygonOperationResult;
         annotationSettings?: import('../..').AnnotationSettings;
@@ -16,7 +16,7 @@ declare const meta: {
         initialAnnotations?: import('../..').ExternalAnnotation[];
         initialImageLabelIds?: number[];
         initialIsImageJunk?: boolean;
-        possibleLabels: Label[];
+        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;
@@ -34,7 +34,7 @@ declare const meta: {
     excludeStories: RegExp;
     args: {};
     decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
-        additionalButtons?: import('react').ReactElement | undefined;
+        additionalButtons?: import('react').ReactElement;
         allowedTools?: import('../..').AllowedTools;
         polygonOperationResult?: import('../..').PolygonOperationResult;
         annotationSettings?: import('../..').AnnotationSettings;
@@ -46,7 +46,7 @@ declare const meta: {
         initialAnnotations?: import('../..').ExternalAnnotation[];
         initialImageLabelIds?: number[];
         initialIsImageJunk?: boolean;
-        possibleLabels: Label[];
+        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;

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

@@ -6,7 +6,7 @@ declare const meta: {
     component: ({ annotationSettings, allowedTools, additionalButtons, isImageJunk, imageLabelIds, isDisabled, isFullscreen, possibleLabels, selectedTool, onImageLabelsChanged, onSetIsFullscreen, onSetIsImageJunk, onSetSelectedTool, onShouldDeleteSelectedAnnotation, }: {
         annotationSettings: AnnotationSettings;
         allowedTools: AllowedTools;
-        additionalButtons?: import('react').ReactElement | undefined;
+        additionalButtons?: import('react').ReactElement;
         isImageJunk?: boolean;
         imageLabelIds?: number[];
         isDisabled?: boolean;

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;