lost-sia 2.0.1-alpha10 → 2.0.1-alpha12

package/dist/Annotation/logic/Annotation.d.ts

@@ -5,14 +5,13 @@ import { Point } from '../../types';
 declare class Annotation {
     internalId: number;
     externalId?: string;
-    annoTime?: number;
+    annoTime: number;
     coordinates: Point[];
     labelIds?: number[];
     mode: AnnotationMode;
     selectedNode: number;
     status: AnnotationStatus;
     type: AnnotationTool;
-    timestamp?: DOMHighResTimeStamp;
     constructor(internalId: number, type: AnnotationTool, coordinates: Point[], mode?: AnnotationMode, status?: AnnotationStatus, externalId?: string);
 }
 export default Annotation;

package/dist/Annotation/logic/Annotation.js

@@ -1 +1 @@
-var r=Object.defineProperty;var m=(s,e,o)=>e in s?r(s,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):s[e]=o;var t=(s,e,o)=>m(s,typeof e!="symbol"?e+"":e,o);import l from"../../models/AnnotationMode.js";import h from"../../models/AnnotationStatus.js";class u{constructor(e,o,n,i=l.CREATE,a=h.CREATING,d=""){t(this,"internalId");t(this,"externalId");t(this,"annoTime");t(this,"coordinates");t(this,"labelIds");t(this,"mode");t(this,"selectedNode");t(this,"status");t(this,"type");t(this,"timestamp");this.internalId=e,this.externalId=d,this.labelIds=[],this.type=o,this.mode=i,this.status=a,this.coordinates=n,this.selectedNode=1,this.timestamp=performance.now(),this.annoTime=0}}export{u as default};
+var r=Object.defineProperty;var l=(o,e,s)=>e in o?r(o,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):o[e]=s;var t=(o,e,s)=>l(o,typeof e!="symbol"?e+"":e,s);import h from"../../models/AnnotationMode.js";import m from"../../models/AnnotationStatus.js";class u{constructor(e,s,n,i=h.CREATE,a=m.CREATING,d=""){t(this,"internalId");t(this,"externalId");t(this,"annoTime");t(this,"coordinates");t(this,"labelIds");t(this,"mode");t(this,"selectedNode");t(this,"status");t(this,"type");this.internalId=e,this.externalId=d,this.labelIds=[],this.type=s,this.mode=i,this.status=a,this.coordinates=n,this.selectedNode=1,this.annoTime=0}}export{u as default};

package/dist/Annotation/ui/AnnotationComponent.js

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

package/dist/Canvas/Canvas.js

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

package/dist/Sia2.js

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

package/dist/Toolbar/Toolbar.js

@@ -1 +1 @@
-import{jsxs as g,jsx as r}from"react/jsx-runtime";import{CRow as j,CCol as m}from"@coreui/react";import u from"./ToolbarItems/AnnoToolSelector.js";import T from"./ToolbarItems/ImageTools.js";import k from"./ToolbarItems/AccessibilityTools.js";const R=({annotationSettings:t,allowedTools:e,additionalButtons:x,isImageJunk:s=!1,imageLabelIds:c=[],isDisabled:o=!1,isFullscreen:l=!1,possibleLabels:f,selectedTool:n,onImageLabelsChanged:p=()=>{},onSetIsFullscreen:a=()=>{},onSetIsImageJunk:i=()=>{},onSetSelectedTool:h=()=>{},onShouldDeleteSelectedAnnotation:C=()=>{}})=>g(j,{xs:{gutterY:2},children:[r(m,{xs:4,sm:2,xxl:2,children:r(T,{canJunk:e.junk,isImageJunk:s,imageLabelIds:c,isDisabled:o,isFullscreen:l,possibleLabels:f,onImageLabelsChanged:p,onSetIsImageJunk:i})}),r(m,{xs:2,lg:2,children:r(k,{isDisabled:o,isFullscreen:l,onSetIsFullscreen:a})}),t.canCreate&&r(m,{xs:8,sm:5,md:4,xl:3,xxl:3,children:r(u,{allowedTools:e,isDisabled:o,selectedTool:n,onSetSelectedTool:h,onShouldDeleteSelectedAnnotation:C})}),x&&x]});export{R as default};
+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};

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

@@ -0,0 +1,12 @@
+import { Label } from '../../../types';
+type ImageLabelInputProps = {
+    defaultLabelId?: number;
+    isDisabled: boolean;
+    isVisible: boolean;
+    selectedLabelsIds: number[];
+    possibleLabels: Label[];
+    isMultilabel?: boolean;
+    onLabelSelect: (selectedLabelIds: number[]) => void;
+};
+declare const ImageLabelInput: ({ isDisabled, isVisible, selectedLabelsIds, possibleLabels, isMultilabel, onLabelSelect, }: ImageLabelInputProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageLabelInput;

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

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

package/dist/Toolbar/ToolbarItems/ImageTools.js

@@ -1 +1 @@
-import{jsxs as u,jsx as o}from"react/jsx-runtime";import{CButtonGroup as b,CPopover as v,CButton as r}from"@coreui/react";import{faTag as g,faBan as h}from"@fortawesome/free-solid-svg-icons";import{FontAwesomeIcon as i}from"@fortawesome/react-fontawesome";import x from"./ImageToolItems/ImageLabel.js";import{useState as I,useEffect as y}from"react";const S=({canJunk:a,isDisabled:t=!1,isFullscreen:s=!1,isImageJunk:l=!1,imageLabelIds:n=[],possibleLabels:m,onImageLabelsChanged:p=()=>{},onSetIsImageJunk:c=()=>{}})=>{const[f,e]=I(!1),d={"--cui-popover-max-width":"800px",zIndex:7e3};return y(()=>{e(!1)},[s]),u(b,{role:"group","aria-label":"Image Tools",children:[o(v,{placement:"bottom",visible:f,onShow:()=>e(!0),onHide:()=>e(!1),content:o(x,{selectedLabelIds:n,possibleLabels:m,onImageLabelsChanged:p}),style:d,children:o(r,{color:"primary",variant:"outline",disabled:t,children:o(i,{icon:g,size:"lg"})})}),a&&o(r,{color:"primary",variant:l?void 0:"outline",disabled:t,onClick:()=>c(!l),children:o(i,{icon:h,size:"lg"})})]})};export{S as default};
+import{jsxs as u,jsx as e}from"react/jsx-runtime";import{CButtonGroup as c,CButton as b}from"@coreui/react";import{faBan as d}from"@fortawesome/free-solid-svg-icons";import{FontAwesomeIcon as I}from"@fortawesome/react-fontawesome";import{useState as g,useEffect as L}from"react";import x from"./ImageToolItems/ImageLabelInput.js";const P=({canJunk:a,isDisabled:o=!1,isFullscreen:s=!1,isImageJunk:l=!1,imageLabelIds:i=[],possibleLabels:t,onImageLabelsChanged:f=()=>{},onSetIsImageJunk:m=()=>{}})=>{const[n,r]=g(!1);return L(()=>{r(!1)},[s]),u(c,{role:"group","aria-label":"Image Tools",children:[t&&e(x,{isDisabled:o,isMultilabel:!0,isVisible:n,selectedLabelsIds:i,possibleLabels:t,onLabelSelect:p=>{r(!1),f(p)}}),a&&e(b,{color:"primary",variant:l?void 0:"outline",disabled:o,onClick:()=>m(!l),children:e(I,{icon:d,size:"lg"})})]})};export{P as default};

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

@@ -1,11 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ possibleLabels, selectedLabelIds, onImageLabelsChanged, }: {
-        possibleLabels: import('../../..').Label[];
-        selectedLabelIds?: number[];
-        onImageLabelsChanged?: (selectedImageIds: number[]) => void;
-    }) => import("react/jsx-runtime").JSX.Element;
+    component: any;
     argTypes: {};
     parameters: {
         layout: string;

package/dist/types.d.ts

@@ -22,7 +22,6 @@ export type ExternalAnnotation = {
     status: AnnotationStatus;
     labelIds: number[];
     type: AnnotationTool;
-    timestamp?: DOMHighResTimeStamp;
 };
 export type Label = {
     id: number;

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 parseFloat(n)},u={getRoundedDuration:r};export{u as default};

package/dist/utils/index.d.ts

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

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{SIA_INITIAL_UI_CONFIG as e,uiConfig as f}from"./uiConfig.js";import{default as r}from"./TimeUtils.js";export{e as SIA_INITIAL_UI_CONFIG,r as TimeUtils,f as uiConfig};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lost-sia",
-  "version": "2.0.1-alpha10",
+  "version": "2.0.1-alpha12",
   "description": "Single Image Annotation Tool",
   "license": "MIT",
   "repository": "l3p-cv/lost-sia",

package/src/Annotation/logic/Annotation.ts

@@ -6,14 +6,13 @@ import { Point } from "../../types";
 class Annotation {
   internalId: number;
   externalId?: string;
-  annoTime?: number;
+  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;
 
   constructor(
     internalId: number,
@@ -31,7 +30,6 @@ class Annotation {
     this.status = status;
     this.coordinates = coordinates;
     this.selectedNode = 1;
-    this.timestamp = performance.now();
     this.annoTime = 0.0;
   }
 }

package/src/Annotation/ui/AnnotationComponent.tsx

@@ -10,6 +10,7 @@ import Polygon from "./tools/Polygon";
 import { useEffect, useRef, useState } from "react";
 import { AnnotationSettings, Label, Point, SIANotification } from "../../types";
 import AnnotationMode from "../../models/AnnotationMode";
+import TimeUtils from "../../utils/TimeUtils";
 
 type AnnotationComponentProps = {
   scaledAnnotation: Annotation;
@@ -57,6 +58,13 @@ const AnnotationComponent = ({
   );
   const [isDragging, setIsDragging] = useState<boolean>(false);
 
+  const annoTimestampRef = useRef<number | undefined>(undefined);
+  const [annoTimestamp, setAnnoTimestamp] = useState<number | undefined>();
+
+  useEffect(() => {
+    annoTimestampRef.current = annoTimestamp;
+  }, [annoTimestamp]);
+
   /**
    * during user editing of the annotation, multiple events are fired by the children
    * onMoving for updating the data
@@ -128,21 +136,40 @@ const AnnotationComponent = ({
 
   const onMoving = (newCoords: Point[]) => {
     if (
-      annotationMode !== AnnotationMode.CREATE &&
-      annotationMode !== AnnotationMode.ADD
-    )
+      ![
+        AnnotationMode.ADD,
+        AnnotationMode.CREATE,
+        AnnotationMode.MOVE,
+      ].includes(annotationMode)
+    ) {
       setAnnotationMode(AnnotationMode.MOVE);
 
+      setAnnoTimestamp(performance.now());
+    }
+
     setCoordinates(newCoords);
   };
 
   const onMoved = () => {
     setAnnotationMode(AnnotationMode.VIEW);
 
+    const annoEditDuration: number = TimeUtils.getRoundedDuration(
+      annoTimestampRef.current,
+      performance.now(),
+    );
+
+    // add annotation time (or set it if there was no time before)
+    // null seems to be a number in the JS world
+    const newAnnoTime: number =
+      isNaN(scaledAnnotation.annoTime) || scaledAnnotation.annoTime === null
+        ? annoEditDuration
+        : scaledAnnotation.annoTime + annoEditDuration;
+
     // moving finished - send event to canvas
     onAnnoChanged({
       ...scaledAnnotation,
       coordinates: coordinatesRef.current,
+      annoTime: newAnnoTime,
     });
   };
 
@@ -173,10 +200,7 @@ const AnnotationComponent = ({
             svgScale={svgScale}
             svgTranslation={svgTranslation}
             style={annotationStyle}
-            onMoving={(newPoint: Point) => {
-              setAnnotationMode(AnnotationMode.MOVE);
-              setCoordinates([newPoint]);
-            }}
+            onMoving={(point: Point) => onMoving([point])}
             onMoved={onMoved}
             onIsDraggingStateChanged={setIsDragging}
           />

package/src/Canvas/Canvas.tsx

@@ -30,6 +30,7 @@ import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import AnnotationStatus from "../models/AnnotationStatus";
 import transform2 from "../utils/transform2";
 import NotificationType from "../models/NotificationType";
+import TimeUtils from "../utils/TimeUtils";
 
 type CanvasProps = {
   annotations?: Annotation[];
@@ -91,6 +92,7 @@ const Canvas = ({
   onShouldDeleteAnno,
 }: CanvasProps) => {
   const [editorMode, setEditorMode] = useState<EditorModes>(EditorModes.VIEW);
+  const [annoTimestamp, setAnnoTimestamp] = useState<number | undefined>();
 
   // remember which label was added last
   const [currentLabelId, setCurrentLabelId] = useState<number | undefined>(
@@ -222,6 +224,8 @@ const Canvas = ({
       percentagedInitialCoords,
     );
 
+    setAnnoTimestamp(performance.now());
+
     // automatically select the last used label
     if (currentLabelId !== undefined) newAnnotation.labelIds = [currentLabelId];
 
@@ -233,9 +237,10 @@ const Canvas = ({
     if (selectedAnnoTool === AnnotationTool.Point) {
       // onFinishCreateAnno assumes coordinates are in stage
       // quickly convert them before calling it
-      const newPointAnnotation = {
+      const newPointAnnotation: Annotation = {
         ...newAnnotation,
         coordinates: [antiScaledMouseStagePosition],
+        annoTime: 0, // its literally one frame
       };
       onFinishCreateAnno(newPointAnnotation);
     }
@@ -547,14 +552,12 @@ const Canvas = ({
 
   useEffect(() => {
     if (!isPolygonSelectionMode) return;
-
-    const newAnnotationInternalId: number = onRequestNewAnnoId();
-
     if (polygonOperationResult.polygonsToCreate === undefined) return;
 
     // create all polygons calculated from the outside world
     polygonOperationResult.polygonsToCreate.forEach(
       (polygonToCreate: ToolCoordinates) => {
+        const newAnnotationInternalId: number = onRequestNewAnnoId();
         const newAnnotation: Annotation = new Annotation(
           newAnnotationInternalId,
           polygonToCreate.type,
@@ -575,7 +578,19 @@ const Canvas = ({
   const onFinishCreateAnno = (fullyCreatedAnnotation: Annotation) => {
     setEditorMode(EditorModes.VIEW);
 
-    fullyCreatedAnnotation.mode = AnnotationMode.VIEW;
+    const newAnnotation: Annotation = {
+      ...fullyCreatedAnnotation,
+      mode: AnnotationMode.VIEW,
+    };
+
+    // handle annoTime (not for points though - they are created in only one frame)
+    if (fullyCreatedAnnotation.type !== AnnotationTool.Point) {
+      const annoEditDuration: number = TimeUtils.getRoundedDuration(
+        annoTimestamp,
+        performance.now(),
+      );
+      newAnnotation.annoTime = annoEditDuration;
+    }
 
     // convert the coordinates from our local scaled sytem into the percentaged one
     const percentagedCoordinates =
@@ -584,15 +599,15 @@ const Canvas = ({
         imageToStageFactor,
         imgSize,
       );
-    fullyCreatedAnnotation.coordinates = percentagedCoordinates;
+    newAnnotation.coordinates = percentagedCoordinates;
 
-    onAnnoChanged(fullyCreatedAnnotation);
+    onAnnoChanged(newAnnotation);
 
-    // if point: inform annotation that we just created it
-    onAnnoCreationFinished(
-      fullyCreatedAnnotation,
-      selectedAnnoTool === AnnotationTool.Point,
-    );
+    // inform annotation that we just created it
+    const hasAnnoJustBeenCreated: boolean =
+      selectedAnnoTool === AnnotationTool.Point || isPolygonSelectionMode;
+
+    onAnnoCreationFinished(newAnnotation, hasAnnoJustBeenCreated);
   };
 
   const onKeyDown = (e: KeyboardEvent) => {
@@ -756,6 +771,10 @@ const Canvas = ({
       coordinates: percentagedCoordinates,
     };
 
+    // mark loaded annotations as changed (they wont be saved otherwise)
+    if (newAnnotation.status === AnnotationStatus.LOADED)
+      newAnnotation.status = AnnotationStatus.CHANGED;
+
     // send event to parent component
     onAnnoChanged(newAnnotation);
   };
@@ -764,21 +783,29 @@ const Canvas = ({
     // hide all annotations when image is moved
     if (editorMode === EditorModes.CAMERA_MOVE) return <></>;
 
+    const editorModesOtherAnnosShouldBeHiddenIn = [
+      EditorModes.CREATE,
+      EditorModes.ADD,
+      EditorModes.MOVE,
+    ];
+
+    const shouldHideOtherAnnos: boolean =
+      editorModesOtherAnnosShouldBeHiddenIn.includes(editorMode);
+
     // draw the annotation using the AnnotationComponent and the scaled coordinates
     const annos: ReactElement[] = scaledAnnotations.map(
       (scaledAnnotation: Annotation): ReactElement => {
         // only show selected anno in specific editor modes
-        const editorModesOtherAnnosShouldBeHiddenIn = [
-          EditorModes.CREATE,
-          EditorModes.ADD,
-          EditorModes.MOVE,
-        ];
-
-        if (
-          editorModesOtherAnnosShouldBeHiddenIn.includes(editorMode) &&
-          scaledAnnotation.internalId !== selectedAnnotation?.internalId
-        )
-          return <></>;
+        const isAnnoSelected: boolean =
+          scaledAnnotation.internalId === selectedAnnotation?.internalId;
+
+        if (shouldHideOtherAnnos && !isAnnoSelected)
+          return (
+            // yes, this is for returning nothing
+            // we still need to provide a key, otherwise we got 10 nothings and react cannot differ between them (it wants to)
+            // use an empty svg g element because <></> cannot have a key
+            <g key={`annotationComponent_${scaledAnnotation.internalId}`} />
+          );
 
         return (
           <AnnotationComponent
@@ -791,13 +818,10 @@ const Canvas = ({
             pageToStageOffset={pageToStageOffset}
             nodeRadius={uiConfig.nodeRadius}
             strokeWidth={uiConfig.strokeWidth}
-            isSelected={
-              scaledAnnotation.internalId === selectedAnnotation?.internalId
-            }
+            isSelected={isAnnoSelected}
             isDisabled={
               // dont let annotation be selected twice in polygon selection mode
-              isPolygonSelectionMode &&
-              scaledAnnotation.internalId === selectedAnnotation?.internalId
+              isPolygonSelectionMode && isAnnoSelected
             }
             onFinishAnnoCreate={onFinishCreateAnno}
             onLabelIconClicked={() => setIsLabelInputVisible(true)}
@@ -858,7 +882,7 @@ const Canvas = ({
           left: labelInputPosition?.x !== undefined ? labelInputPosition.x : 0,
           top: labelInputPosition?.y !== undefined ? labelInputPosition.y : 0,
           display: labelInputPosition?.y !== undefined ? "inherit" : "none",
-          zIndex: 7000,
+          zIndex: isLabelInputVisible ? 7000 : -1,
         }}
       >
         <LabelInput

package/src/Sia2.tsx

@@ -158,10 +158,6 @@ const Sia2 = ({
           status: externalAnno.status,
           annoTime:
             externalAnno.annoTime !== undefined ? externalAnno.annoTime : 0.0,
-          timestamp:
-            externalAnno.timestamp !== undefined
-              ? externalAnno.timestamp
-              : performance.now(),
         };
 
         return _anno;
@@ -206,6 +202,10 @@ const Sia2 = ({
     createInitialAnnotations();
   }, [initialAnnotations]);
 
+  useEffect(() => {
+    setImageLabelIds(initialImageLabelIds);
+  }, [initialImageLabelIds]);
+
   // update annotation settings if changed in the parent
   useEffect(() => {
     const defaultAnnotationSettigs: AnnotationSettings = {
@@ -364,6 +364,10 @@ const Sia2 = ({
               const annoListIndex: number = annotations.findIndex(
                 (anno) => anno.internalId === changedAnno.internalId,
               );
+
+              // only fire event if item found
+              if (annoListIndex === -1) return;
+
               const _annotations: Annotation[] = [...annotations];
               _annotations[annoListIndex] = changedAnno;
               setAnnotations(_annotations);
@@ -373,7 +377,7 @@ const Sia2 = ({
             }}
             onAnnoCreationFinished={(
               changedAnno: Annotation,
-              hasAnnotationExisted: boolean,
+              hasAnnoJustBeenCreated: boolean,
             ) => {
               // update annotation list
               const _annotations: Annotation[] = [...annotations];
@@ -404,18 +408,10 @@ const Sia2 = ({
                     },
                   );
                 }
-
-                // the polygon selection mode hands annotations to SIA in one single frame
-                // add the new annotation here
-                _annotations.push(changedAnno);
               }
 
-              // point annotations are created in one frame
-              // they dont exist in the annotations list yet, so just append them
-              // if (changedAnno.type === AnnotationTool.Point)
-
               // are we just marking an existing annotation as finished or did we created it in the same frame
-              if (hasAnnotationExisted) _annotations.push(changedAnno);
+              if (hasAnnoJustBeenCreated) _annotations.push(changedAnno);
               else {
                 // all other annotation types
                 const annoListIndex: number = annotations.findIndex(
@@ -442,10 +438,7 @@ const Sia2 = ({
 
               _annotations[selectedAnnotationId] = annotation;
 
-              // _annotations.push(annotation);
               setAnnotations(_annotations);
-              // setSelectedAnnotation(annotation);
-              // onAnnoCreated(annotation, _annotations);
             }}
             onNotification={onNotification}
             onRequestNewAnnoId={createNewInternalAnnotationId}

package/src/Toolbar/Toolbar.tsx

@@ -41,8 +41,8 @@ const Toolbar = ({
   onShouldDeleteSelectedAnnotation = () => {},
 }: ToolbarProps) => {
   return (
-    <CRow xs={{ gutterY: 2 }}>
-      <CCol xs={4} sm={2} xxl={2}>
+    <CRow className="d-flex justify-content-center flex-wrap align-items-center gap-0 py-2 px-4">
+      <CCol xs="auto">
         <ImageTools
           canJunk={allowedTools.junk}
           isImageJunk={isImageJunk}
@@ -55,7 +55,7 @@ const Toolbar = ({
         />
       </CCol>
 
-      <CCol xs={2} lg={2}>
+      <CCol xs="auto">
         <AccessibilityTools
           isDisabled={isDisabled}
           isFullscreen={isFullscreen}
@@ -64,7 +64,7 @@ const Toolbar = ({
       </CCol>
 
       {annotationSettings.canCreate && (
-        <CCol xs={8} sm={5} md={4} xl={3} xxl={3}>
+        <CCol xs="auto">
           <AnnoToolSelector
             allowedTools={allowedTools}
             isDisabled={isDisabled}

package/src/Toolbar/ToolbarItems/ImageToolItems/ImageLabelInput.tsx

@@ -0,0 +1,125 @@
+import { useState } from "react";
+import {
+  CDropdown,
+  CDropdownMenu,
+  CDropdownItem,
+  CFormInput,
+  CDropdownDivider,
+  CDropdownToggle,
+} from "@coreui/react";
+import { Label } from "../../../types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTag } from "@fortawesome/free-solid-svg-icons";
+import { IconProps } from "semantic-ui-react";
+import TagLabel from "./TagLabel";
+
+type ImageLabelInputProps = {
+  defaultLabelId?: number;
+  isDisabled: boolean;
+  isVisible: boolean;
+  selectedLabelsIds: number[];
+  possibleLabels: Label[];
+  isMultilabel?: boolean;
+  onLabelSelect: (selectedLabelIds: number[]) => void;
+};
+
+const ImageLabelInput = ({
+  isDisabled,
+  isVisible,
+  selectedLabelsIds,
+  possibleLabels,
+  isMultilabel = false,
+  onLabelSelect,
+}: ImageLabelInputProps) => {
+  const [filter, setFilter] = useState("");
+
+  const filteredLabels: Label[] = possibleLabels.filter((label: Label) =>
+    label.name.toLowerCase().includes(filter.toLowerCase()),
+  );
+
+  const updateSelectedLabels = (clickedLabel: Label) => {
+    let newLabelIds: number[] = [];
+
+    if (isMultilabel) {
+      newLabelIds = [...selectedLabelsIds];
+      // check if item in list (get its index if so)
+      const foundIndex: number = selectedLabelsIds.indexOf(clickedLabel.id);
+      // add label if not in list, remove label if in list
+      if (foundIndex !== -1) newLabelIds.splice(foundIndex, 1);
+      else newLabelIds.push(clickedLabel.id);
+    }
+    // single-label: just replace list with clicked item
+    else newLabelIds = [clickedLabel.id];
+
+    onLabelSelect(newLabelIds);
+  };
+
+  const getSelectedLabels = () => {
+    const selectedLabels: Label[] = possibleLabels.filter((label: Label) =>
+      selectedLabelsIds.includes(label.id),
+    );
+
+    return selectedLabels;
+  };
+
+  const renderLabels = () => {
+    if (selectedLabelsIds.length === 0)
+      return (
+        <div style={{ marginTop: 6 }}>
+          <FontAwesomeIcon icon={faTag as IconProps} size="lg" />
+        </div>
+      );
+
+    const selectedLabels = getSelectedLabels();
+    return selectedLabels.map((label: Label) => (
+      <TagLabel
+        key={label.name}
+        name={label.name}
+        color={label.color}
+        size={25}
+        triangleSize={17}
+        style={{ marginLeft: 1, marginTop: 5 }}
+      />
+    ));
+  };
+
+  return (
+    <CDropdown visible={isVisible} autoClose={false}>
+      {/* this invisible toggle has to be here, othervise the menu is not showing as intended */}
+      <CDropdownToggle
+        variant="outline"
+        caret={false}
+        color={isDisabled ? "secondary" : "primary"}
+        style={{ paddingTop: 0, paddingBottom: 0 }}
+        as="div"
+      >
+        {renderLabels()}
+      </CDropdownToggle>
+      <CDropdownMenu>
+        <div className="px-3 py-2">
+          <CFormInput
+            placeholder="Filter label..."
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            autoFocus
+          />
+        </div>
+        <CDropdownDivider />
+        {filteredLabels.length > 0 ? (
+          filteredLabels.map((label: Label) => (
+            <CDropdownItem
+              key={label.id}
+              onClick={() => updateSelectedLabels(label)}
+            >
+              {label.name}
+            </CDropdownItem>
+          ))
+        ) : (
+          <CDropdownItem disabled>No results</CDropdownItem>
+        )}
+      </CDropdownMenu>
+    </CDropdown>
+  );
+};
+
+export default ImageLabelInput;

package/src/Toolbar/ToolbarItems/ImageTools.tsx

@@ -1,10 +1,10 @@
-import { CButton, CButtonGroup, CPopover } from "@coreui/react";
-import { faBan, faTag } from "@fortawesome/free-solid-svg-icons";
+import { CButton, CButtonGroup } from "@coreui/react";
+import { faBan } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import ImageLabel from "./ImageToolItems/ImageLabel";
 import { useEffect, useState } from "react";
 import { Label } from "../../types";
+import ImageLabelInput from "./ImageToolItems/ImageLabelInput";
 
 type ImageToolsProps = {
   canJunk: boolean;
@@ -30,11 +30,6 @@ const ImageTools = ({
   const [isLabelPopupVisible, setIsLabelPopupVisible] =
     useState<boolean>(false);
 
-  const customPopoverStyle = {
-    "--cui-popover-max-width": "800px",
-    zIndex: 7000,
-  };
-
   // close modal when the fullscreen state changes
   useEffect(() => {
     setIsLabelPopupVisible(false);
@@ -42,25 +37,19 @@ const ImageTools = ({
 
   return (
     <CButtonGroup role="group" aria-label="Image Tools">
-      <CPopover
-        placement="bottom"
-        visible={isLabelPopupVisible}
-        // make sure the visible var stays updated (otherwise we cannot close it)
-        onShow={() => setIsLabelPopupVisible(true)}
-        onHide={() => setIsLabelPopupVisible(false)}
-        content={
-          <ImageLabel
-            selectedLabelIds={imageLabelIds}
-            possibleLabels={possibleLabels}
-            onImageLabelsChanged={onImageLabelsChanged}
-          />
-        }
-        style={customPopoverStyle}
-      >
-        <CButton color="primary" variant="outline" disabled={isDisabled}>
-          <FontAwesomeIcon icon={faTag as IconProp} size="lg" />
-        </CButton>
-      </CPopover>
+      {possibleLabels && (
+        <ImageLabelInput
+          isDisabled={isDisabled}
+          isMultilabel={true}
+          isVisible={isLabelPopupVisible}
+          selectedLabelsIds={imageLabelIds}
+          possibleLabels={possibleLabels}
+          onLabelSelect={(selectedLabelIds: number[]) => {
+            setIsLabelPopupVisible(false);
+            onImageLabelsChanged(selectedLabelIds);
+          }}
+        />
+      )}
 
       {canJunk && (
         <CButton

package/src/types.ts

@@ -25,7 +25,6 @@ export type ExternalAnnotation = {
   status: AnnotationStatus;
   labelIds: number[];
   type: AnnotationTool;
-  timestamp?: DOMHighResTimeStamp;
 };
 
 export type Label = {

package/src/utils/TimeUtils.ts

@@ -0,0 +1,14 @@
+const getRoundedDuration = (
+  startTimestamp: number,
+  stopTimestamp: number,
+): number => {
+  const duration: number = (stopTimestamp - startTimestamp) / 1000;
+  const roundedDurationString: string = duration.toFixed(2);
+  const roundedDuration: number = parseFloat(roundedDurationString);
+
+  return roundedDuration;
+};
+
+export default {
+  getRoundedDuration,
+};

package/src/utils/index.ts

@@ -1,3 +1,4 @@
 import { uiConfig, SIA_INITIAL_UI_CONFIG } from "./uiConfig";
+import TimeUtils from "./TimeUtils";
 
-export { uiConfig, SIA_INITIAL_UI_CONFIG };
+export { uiConfig, SIA_INITIAL_UI_CONFIG, TimeUtils };

package/dist/Annotation/logic/AnnotationUtils.d.ts

@@ -1,30 +0,0 @@
-import { Point } from '../../types';
-import { default as Annotation } from './Annotation';
-declare const _default: {
-    addNode: (annotation: Annotation, point: Point) => {
-        internalId: number;
-        externalId?: string;
-        annoTime?: number;
-        coordinates: Point[];
-        labelIds?: number[];
-        mode: import('../../models').AnnotationMode;
-        selectedNode: number;
-        status: import('../../models').AnnotationStatus;
-        type: import('../../models').AnnotationTool;
-        timestamp?: DOMHighResTimeStamp;
-    };
-    startAnnotimeMeasure: (annotation: Annotation) => {
-        internalId: number;
-        externalId?: string;
-        annoTime?: number;
-        coordinates: Point[];
-        labelIds?: number[];
-        mode: import('../../models').AnnotationMode;
-        selectedNode: number;
-        status: import('../../models').AnnotationStatus;
-        type: import('../../models').AnnotationTool;
-        timestamp?: DOMHighResTimeStamp;
-    };
-    stopAnnotimeMeasure: (annotation: Annotation) => [Annotation, number];
-};
-export default _default;

package/dist/Annotation/logic/AnnotationUtils.js

@@ -1 +0,0 @@
-const a=(t,n)=>{const o={...t};return o.coordinates.push(n),o},s=t=>{const n={...t};return n.timestamp=performance.now(),n},r=t=>{const n={...t},o=performance.now(),e=(o-n.timestamp)/1e3;return n.annoTime+=e,n.timestamp=o,[n,e]},i={addNode:a,startAnnotimeMeasure:s,stopAnnotimeMeasure:r};export{i as default};

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

@@ -1,8 +0,0 @@
-import { Label } from '../../../types';
-type ImageLabelProps = {
-    possibleLabels: Label[];
-    selectedLabelIds?: number[];
-    onImageLabelsChanged?: (selectedImageIds: number[]) => void;
-};
-declare const ImageLabel: ({ possibleLabels, selectedLabelIds, onImageLabelsChanged, }: ImageLabelProps) => import("react/jsx-runtime").JSX.Element;
-export default ImageLabel;

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

@@ -1 +0,0 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{CContainer as a,CRow as l,CCol as n}from"@coreui/react";import m from"./TagLabel.js";import h from"../../../Canvas/LabelInput.js";const p=({possibleLabels:i,selectedLabelIds:c=[],onImageLabelsChanged:s=()=>{}})=>{const d=()=>i.filter(r=>c.includes(r.id));return e(a,{children:t(l,{children:[t(n,{children:[e(l,{children:e("b",{children:"Selected Labels:"})}),e(l,{xs:{gutterY:1},children:d().map(r=>e(n,{children:e(m,{name:r.name,color:r.color})},r.name))})]}),t(n,{children:[e(l,{children:e("b",{children:"Change selection:"})}),e(l,{style:{minWidth:250,minHeight:100},children:e(h,{isVisible:!0,isMultilabel:!0,selectedLabelsIds:c,possibleLabels:i,onLabelSelect:s})})]})]})})};export{p as default};

package/src/Annotation/logic/AnnotationUtils.ts

@@ -1,30 +0,0 @@
-import { Point } from "../../types";
-import Annotation from "./Annotation";
-
-const addNode = (annotation: Annotation, point: Point) => {
-  const _annotation = { ...annotation };
-  _annotation.coordinates.push(point);
-  return _annotation;
-};
-
-const startAnnotimeMeasure = (annotation: Annotation) => {
-  const _annotation = { ...annotation };
-  _annotation.timestamp = performance.now();
-  return _annotation;
-};
-
-const stopAnnotimeMeasure = (annotation: Annotation): [Annotation, number] => {
-  const _annotation = { ...annotation };
-  const now = performance.now();
-  const duration = (now - _annotation.timestamp) / 1000;
-  _annotation.annoTime += duration;
-  _annotation.timestamp = now;
-
-  return [_annotation, duration];
-};
-
-export default {
-  addNode,
-  startAnnotimeMeasure,
-  stopAnnotimeMeasure,
-};

package/src/Toolbar/ToolbarItems/ImageToolItems/ImageLabel.tsx

@@ -1,62 +0,0 @@
-import { CCol, CContainer, CRow } from "@coreui/react";
-import TagLabel from "./TagLabel";
-import LabelInput from "../../../Canvas/LabelInput";
-import { Label } from "../../../types";
-
-type ImageLabelProps = {
-  possibleLabels: Label[];
-  selectedLabelIds?: number[];
-  onImageLabelsChanged?: (selectedImageIds: number[]) => void;
-};
-
-const ImageLabel = ({
-  possibleLabels,
-  selectedLabelIds = [],
-  onImageLabelsChanged = () => {},
-}: ImageLabelProps) => {
-  const getSelectedLabels = () => {
-    const selectedLabels: Label[] = possibleLabels.filter((label: Label) =>
-      selectedLabelIds.includes(label.id),
-    );
-
-    return selectedLabels;
-  };
-
-  const renderLabels = () => {
-    const selectedLabels = getSelectedLabels();
-    return selectedLabels.map((label: Label) => (
-      <CCol key={label.name}>
-        <TagLabel name={label.name} color={label.color} />
-      </CCol>
-    ));
-  };
-
-  return (
-    <CContainer>
-      <CRow>
-        <CCol>
-          <CRow>
-            <b>Selected Labels:</b>
-          </CRow>
-          <CRow xs={{ gutterY: 1 }}>{renderLabels()}</CRow>
-        </CCol>
-        <CCol>
-          <CRow>
-            <b>Change selection:</b>
-          </CRow>
-          <CRow style={{ minWidth: 250, minHeight: 100 }}>
-            <LabelInput
-              isVisible={true}
-              isMultilabel={true}
-              selectedLabelsIds={selectedLabelIds}
-              possibleLabels={possibleLabels}
-              onLabelSelect={onImageLabelsChanged}
-            />
-          </CRow>
-        </CCol>
-      </CRow>
-    </CContainer>
-  );
-};
-
-export default ImageLabel;

package/src/utils/index.js

@@ -1 +0,0 @@
-export { uiConfig, SIA_INITIAL_UI_CONFIG } from "./uiConfig";