lost-sia 3.1.2 → 3.2.0-alpha0

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

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

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

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

package/dist/Canvas/Canvas.js

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

package/dist/Sia.js

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

package/dist/SiaViewer.d.ts

@@ -0,0 +1,19 @@
+import { default as Annotation } from './Annotation/logic/Annotation';
+import { ExternalAnnotation, Label, UiConfig } from './types';
+type SiaViewerProps = {
+    image: string;
+    annotations?: ExternalAnnotation[];
+    possibleLabels: Label[];
+    isJunk?: boolean;
+    uiConfig?: Partial<UiConfig>;
+    enableZoom?: boolean;
+    canSelect?: boolean;
+    onSelectAnnotation?: (annotation?: Annotation) => void;
+};
+/**
+ * View-only SIA component. Renders image + annotations without a toolbar and
+ * blocks all mutations (create / edit / delete / label). Zoom and selection
+ * can be toggled via props.
+ */
+declare const SiaViewer: ({ image, annotations: propAnnotations, possibleLabels, isJunk, uiConfig: propUiConfig, enableZoom, canSelect, onSelectAnnotation, }: SiaViewerProps) => import("react/jsx-runtime").JSX.Element;
+export default SiaViewer;

package/dist/SiaViewer.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{useState as s,useEffect as c}from"react";import p from"./Canvas/Canvas.js";import N from"./models/AnnotationMode.js";import h from"./models/AnnotationTool.js";const E={canCreate:!1,canEdit:!1,canLabel:!1,canHaveMultipleLabels:!1},f={nodeRadius:4,strokeWidth:4,imageCentered:!1},y={flex:"1 1 auto",minHeight:0,display:"flex",flexDirection:"column"},H=({image:n,annotations:e,possibleLabels:u,isJunk:m=!1,uiConfig:a,enableZoom:A=!0,canSelect:l=!0,onSelectAnnotation:I=()=>{}})=>{const[S,d]=s([]),[T,t]=s(),[C,g]=s(f);return c(()=>{if(n===void 0||e===void 0){d([]),t(void 0);return}let o=0;const v=e.map(i=>({...i,internalId:o++,mode:N.VIEW,selectedNode:1,status:i.status,annoTime:i.annoTime??0}));d(v),t(void 0)},[e,n]),c(()=>{g({...f,...a})},[a]),r("div",{style:y,onWheelCapture:o=>{A||o.stopPropagation()},children:r(p,{annotations:S,annotationSettings:E,image:n,isImageJunk:m,isPolygonSelectionMode:!1,possibleLabels:u,selectedAnnotation:l?T:void 0,selectedAnnoTool:h.Point,uiConfig:C,onAnnoCreated:()=>{},onAnnoChanged:()=>{},onAnnoCreationFinished:()=>{},onAnnoEditing:()=>{},onNotification:()=>{},onRequestNewAnnoId:()=>0,onSelectAnnotation:l?o=>{t(o),I(o)}:()=>{},onSetIsImageJunk:()=>{},onSetSelectedTool:()=>{},onShouldDeleteAnno:()=>{},onTraverseAnnotationHistory:()=>{}})})};export{H as default};

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

@@ -2,7 +2,7 @@ import { Label } from '../../../types';
 type ImageLabelInputProps = {
     isDisabled: boolean;
     isVisible: boolean;
-    selectedLabelsIds: number[];
+    selectedLabelsIds: number[] | undefined;
     possibleLabels: Label[];
     isMultilabel?: boolean;
     onLabelSelect: (selectedLabelIds: number[]) => void;

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.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};
+import{jsx as r,jsxs as d}from"react/jsx-runtime";import{useState as C}from"react";import{CTooltip as w,CDropdown as L,CDropdownToggle as v,CDropdownMenu as T,CFormInput as x,CDropdownDivider as y,CDropdownItem as s}from"@coreui/react";import{FontAwesomeIcon as D}from"@fortawesome/react-fontawesome";import{faTag as F}from"@fortawesome/free-solid-svg-icons";import b 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(w,{content:"Add Image Label",children:d(L,{visible:m,autoClose:"outside",children:[r(v,{variant:"outline",caret:!1,color:c?"secondary":"primary",style:{paddingTop:0,paddingBottom:0},as:"div",children:!t||t.length===0?r("div",{style:{marginTop:6},children:r(D,{icon:F})}):h().map(o=>r(b,{name:o.name,color:o.color,size:25,triangleSize:17,style:{marginLeft:1,marginTop:5}},o.name))}),d(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(s,{onClick:()=>g(e),children:e.name},e.id)):r(s,{disabled:!0,children:"No results"})]})]})})};export{M as default};

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './types';
 export { default as IconButton } from './IconButton';
 export { default as Sia } from './Sia';
+export { default as SiaViewer } from './SiaViewer';
 export { default as transform } from './utils/transform';
 export { default as TagLabel } from './Toolbar/ToolbarItems/ImageToolItems/TagLabel';

package/dist/index.js

@@ -1 +1 @@
-/* empty css                                             *//* empty css        */import{default as e}from"./IconButton.js";import{default as m}from"./Sia.js";import{default as l}from"./utils/transform.js";import{default as u}from"./Toolbar/ToolbarItems/ImageToolItems/TagLabel.js";export{e as IconButton,m as Sia,u as TagLabel,l as transform};
+/* empty css        */import{default as t}from"./IconButton.js";import{default as f}from"./Sia.js";import{default as l}from"./SiaViewer.js";import{default as s}from"./utils/transform.js";import{default as d}from"./Toolbar/ToolbarItems/ImageToolItems/TagLabel.js";export{t as IconButton,f as Sia,l as SiaViewer,d as TagLabel,s as transform};

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

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

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

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

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

@@ -0,0 +1,52 @@
+import { StoryObj } from '@storybook/react';
+export declare const ActionsData: {};
+declare const meta: {
+    title: string;
+    component: ({ image, annotations: propAnnotations, possibleLabels, isJunk, uiConfig: propUiConfig, enableZoom, canSelect, onSelectAnnotation, }: {
+        image: string;
+        annotations?: import('../..').ExternalAnnotation[];
+        possibleLabels: import('../..').Label[];
+        isJunk?: boolean;
+        uiConfig?: Partial<import('../..').UiConfig>;
+        enableZoom?: boolean;
+        canSelect?: boolean;
+        onSelectAnnotation?: (annotation?: import('../../models').Annotation) => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    excludeStories: RegExp;
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * SiaViewer with point annotations. No toolbar, no editing.
+ * Try clicking annotations to select them and scrolling to zoom.
+ */
+export declare const WithPointAnnotations: Story;
+/**
+ * SiaViewer with bbox annotations.
+ */
+export declare const WithBBoxAnnotations: Story;
+/**
+ * SiaViewer with line annotations.
+ */
+export declare const WithLineAnnotations: Story;
+/**
+ * SiaViewer with polygon annotations.
+ */
+export declare const WithPolygonAnnotations: Story;
+/**
+ * SiaViewer with zoom disabled.
+ */
+export declare const ZoomDisabled: Story;
+/**
+ * SiaViewer with selection disabled. Annotations cannot be clicked.
+ */
+export declare const SelectionDisabled: Story;
+/**
+ * SiaViewer marked as junk.
+ */
+export declare const Junk: Story;

package/dist/types.d.ts

@@ -45,6 +45,7 @@ export type SIANotification = {
 export type ToolCoordinates = {
     coordinates: Point[];
     type: AnnotationTool;
+    labelIds?: number[];
 };
 export type UiConfig = {
     strokeWidth: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lost-sia",
-  "version": "3.1.2",
+  "version": "3.2.0-alpha0",
   "description": "Single Image Annotation Tool",
   "license": "MIT",
   "repository": "l3p-cv/lost-sia",
@@ -63,9 +63,7 @@
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "react-draggable": "^4.5.0",
-    "sass": "^1.95.0",
-    "semantic-ui-css": "2.5.0",
-    "semantic-ui-react": "^2.0.3"
+    "sass": "^1.95.0"
   },
   "peerDependencies": {
     "@coreui/react": "^5.9.1",
@@ -81,6 +79,7 @@
     "@storybook/addon-links": "^10.1.6",
     "@storybook/react": "^10.1.6",
     "@storybook/react-vite": "^10.1.6",
+    "@storybook/test": "^8.6.15",
     "@types/react": "^19.2.7",
     "@typescript-eslint/eslint-plugin": "^8.46.1",
     "@typescript-eslint/parser": "^8.46.1",

package/src/Annotation/ui/tools/Line.tsx

@@ -54,6 +54,14 @@ const Line = ({
   const onMouseDown = (e: MouseEvent) => {
     if (annotationSettings.canEdit === false) return
 
+    // prevent middle-click from bubbling to the canvas during annotation creation
+    // also prevent default browser behavior (auto-scroll / paste on Linux)
+    if (e.button === 1 && annotationMode === AnnotationMode.CREATE) {
+      e.preventDefault()
+      e.stopPropagation()
+      return
+    }
+
     if (isSelected && annotationMode !== AnnotationMode.CREATE && e.button === 0)
       setIsAnnoDragging(true)
 

package/src/Annotation/ui/tools/Polygon.tsx

@@ -71,6 +71,17 @@ const Polygon = ({
   const onMouseDown = (e: MouseEvent) => {
     if (annotationSettings.canEdit === false) return
 
+    // prevent middle-click from bubbling to the canvas during annotation creation
+    // also prevent default browser behavior (auto-scroll / paste on Linux)
+    if (
+      e.button === 1 &&
+      [AnnotationMode.CREATE, AnnotationMode.ADD].includes(annotationMode)
+    ) {
+      e.preventDefault()
+      e.stopPropagation()
+      return
+    }
+
     if (
       isSelected &&
       annotationMode !== AnnotationMode.CREATE &&

package/src/Canvas/Canvas.tsx

@@ -343,7 +343,12 @@ const Canvas = ({
   const getAnnoTopLeftPagePosition = (stageCoords: Point[]): Point => {
     const leftPoints: Point[] = transform.getMostLeftPoints(stageCoords)
     const topLeftPoint: Point = transform.getTopPoint(leftPoints)[0]
-    return transform.convertStageToPage(topLeftPoint, pageToStageOffset, svgScale, svgTranslation)
+    return transform.convertStageToPage(
+      topLeftPoint,
+      pageToStageOffset,
+      svgScale,
+      svgTranslation,
+    )
   }
 
   const handleKeyAction = (keyAction: KeyAction) => {
@@ -499,9 +504,24 @@ const Canvas = ({
     svgRef.current?.focus()
   }, [])
 
+  // reset CAMERA_MOVE mode on middle-mouse release, even if it happens outside the SVG boundary
+  useEffect(() => {
+    const handleWindowMouseUp = (e: MouseEvent) => {
+      if (e.button === 1 && editorMode === EditorModes.CAMERA_MOVE) {
+        setEditorMode(EditorModes.VIEW)
+      }
+    }
+    window.addEventListener('mouseup', handleWindowMouseUp)
+    return () => window.removeEventListener('mouseup', handleWindowMouseUp)
+  }, [editorMode])
+
   // image changed after init -> reset everything
   useEffect(() => {
     if (canvasRef?.current !== undefined) {
+      // clear stale sizing state only when the canvas ref is ready, to avoid
+      // leaving imgSize stuck at {x:-1, y:-1} on the early-exit path
+      resetCanvas()
+
       const { width, height } = canvasRef.current!.getBoundingClientRect()
 
       // for whatever reason the ref adds the toolbars height to the available space, leading to a container size reaching outside the bottom
@@ -522,13 +542,13 @@ const Canvas = ({
       // cleanup
       return () => resizeObserver.disconnect()
     }
-
-    resetCanvas()
   }, [image, isFullscreen])
 
   useEffect(() => {
     calculatePageToCanvasOffset()
-  }, [imageRef, svgTranslation, canvasSize])
+    // imgSize and uiConfig are read inside calculatePageToCanvasOffset for the imageCentered path;
+    // include them to avoid a stale closure when imgSize changes without canvasSize changing.
+  }, [canvasSize, imgSize, uiConfig])
 
   // notify component about available size
   useEffect(() => {
@@ -543,23 +563,14 @@ const Canvas = ({
   }, [canvasRef])
 
   // notify component about default image size
+  // read rendered size when image or canvas size changes — no ResizeObserver needed here
+  // since canvasRef's ResizeObserver already handles container resize events and updates canvasSize
   useEffect(() => {
     if (imageRef.current === null) return
 
     const { width, height } = imageRef.current.getBoundingClientRect()
-
     setImgSize({ x: width, y: height })
-
-    // listen for size changes on div element
-    const imgResizeObserver = new ResizeObserver(() => {
-      const { width, height } = imageRef.current!.getBoundingClientRect()
-
-      setImgSize({ x: width, y: height })
-    })
-    imgResizeObserver.observe(imageRef.current)
-
-    return () => imgResizeObserver.disconnect()
-  }, [imageRef])
+  }, [image, canvasSize])
 
   useEffect(() => {
     if (imageToStageFactor === 0) return
@@ -592,6 +603,10 @@ const Canvas = ({
           AnnotationStatus.CREATED,
         )
 
+        if (polygonToCreate.labelIds !== undefined) {
+          newAnnotation.labelIds = polygonToCreate.labelIds
+        }
+
         onFinishCreateAnno(newAnnotation)
       },
     )
@@ -649,7 +664,11 @@ const Canvas = ({
     if (e.button === 0) {
       // left click
     } else if (e.button === 1) {
-      // click on mouse wheel
+      // click on mouse wheel - ignore during annotation creation to prevent abandoning in-progress annotations
+      if (editorMode === EditorModes.CREATE || editorMode === EditorModes.ADD) {
+        e.preventDefault()
+        return
+      }
       setEditorMode(EditorModes.CAMERA_MOVE)
     } else if (e.button === 2) {
       // check if annotation creation allowed in settings
@@ -686,7 +705,7 @@ const Canvas = ({
   }
 
   const onMouseUp = (e) => {
-    if (e.button === 1) {
+    if (e.button === 1 && editorMode === EditorModes.CAMERA_MOVE) {
       setEditorMode(EditorModes.VIEW)
     }
   }
@@ -761,7 +780,9 @@ const Canvas = ({
     onSelectAnnotation(percentagedAnnotation)
 
     // get top left point of annotation
-    setLabelInputPosition(getAnnoTopLeftPagePosition(annotation.coordinates))
+    if (annotationSettings.canLabel) {
+      setLabelInputPosition(getAnnoTopLeftPagePosition(annotation.coordinates))
+    }
   }
 
   const handleOnAnnoChanged = (annotation: Annotation) => {
@@ -900,6 +921,7 @@ const Canvas = ({
         flexDirection: 'column',
       }}
     >
+      {annotationSettings.canLabel && (
       <div
         style={{
           position: 'absolute',
@@ -954,6 +976,7 @@ const Canvas = ({
           }}
         />
       </div>
+      )}
 
       {isImageJunk && (
         <div

package/src/Sia.tsx

@@ -410,7 +410,7 @@ const Sia = ({
     position: 'fixed',
     top: 0,
     left: 0,
-    zIndex: 6000,
+    zIndex: 1040,
     backgroundColor: '#ffff',
     width: '100%',
     height: '100%',

package/src/SiaViewer.tsx

@@ -0,0 +1,125 @@
+import { CSSProperties, useEffect, useState, WheelEvent } from 'react'
+import Canvas from './Canvas/Canvas'
+import Annotation from './Annotation/logic/Annotation'
+import AnnotationMode from './models/AnnotationMode'
+import AnnotationTool from './models/AnnotationTool'
+import { AnnotationSettings, ExternalAnnotation, Label, UiConfig } from './types'
+
+type SiaViewerProps = {
+  image: string
+  annotations?: ExternalAnnotation[]
+  possibleLabels: Label[]
+  isJunk?: boolean
+  uiConfig?: Partial<UiConfig>
+  enableZoom?: boolean
+  canSelect?: boolean
+  onSelectAnnotation?: (annotation?: Annotation) => void
+}
+
+const VIEW_ANNOTATION_SETTINGS: AnnotationSettings = {
+  canCreate: false,
+  canEdit: false,
+  canLabel: false,
+  canHaveMultipleLabels: false,
+}
+
+const DEFAULT_UI_CONFIG: UiConfig = {
+  nodeRadius: 4,
+  strokeWidth: 4,
+  imageCentered: false,
+}
+
+const containerStyle: CSSProperties = {
+  flex: '1 1 auto',
+  minHeight: 0,
+  display: 'flex',
+  flexDirection: 'column',
+}
+
+/**
+ * View-only SIA component. Renders image + annotations without a toolbar and
+ * blocks all mutations (create / edit / delete / label). Zoom and selection
+ * can be toggled via props.
+ */
+const SiaViewer = ({
+  image,
+  annotations: propAnnotations,
+  possibleLabels,
+  isJunk = false,
+  uiConfig: propUiConfig,
+  enableZoom = true,
+  canSelect = true,
+  onSelectAnnotation = () => {},
+}: SiaViewerProps) => {
+  const [annotations, setAnnotations] = useState<Annotation[]>([])
+  const [selectedAnnotation, setSelectedAnnotation] = useState<
+    Annotation | undefined
+  >()
+  const [uiConfig, setUiConfig] = useState<UiConfig>(DEFAULT_UI_CONFIG)
+
+  // (re)initialize annotations whenever the annotations or image prop changes
+  useEffect(() => {
+    if (image === undefined || propAnnotations === undefined) {
+      setAnnotations([])
+      setSelectedAnnotation(undefined)
+      return
+    }
+
+    let internalId = 0
+    const next: Annotation[] = propAnnotations.map((externalAnno) => ({
+      ...externalAnno,
+      internalId: internalId++,
+      mode: AnnotationMode.VIEW,
+      selectedNode: 1,
+      status: externalAnno.status,
+      annoTime: externalAnno.annoTime ?? 0,
+    }))
+
+    setAnnotations(next)
+    setSelectedAnnotation(undefined)
+  }, [propAnnotations, image])
+
+  useEffect(() => {
+    setUiConfig({ ...DEFAULT_UI_CONFIG, ...propUiConfig })
+  }, [propUiConfig])
+
+  const stopZoom = (e: WheelEvent) => {
+    if (!enableZoom) e.stopPropagation()
+  }
+
+  return (
+    <div style={containerStyle} onWheelCapture={stopZoom}>
+      <Canvas
+        annotations={annotations}
+        annotationSettings={VIEW_ANNOTATION_SETTINGS}
+        image={image}
+        isImageJunk={isJunk}
+        isPolygonSelectionMode={false}
+        possibleLabels={possibleLabels}
+        selectedAnnotation={canSelect ? selectedAnnotation : undefined}
+        selectedAnnoTool={AnnotationTool.Point}
+        uiConfig={uiConfig}
+        onAnnoCreated={() => {}}
+        onAnnoChanged={() => {}}
+        onAnnoCreationFinished={() => {}}
+        onAnnoEditing={() => {}}
+        onNotification={() => {}}
+        onRequestNewAnnoId={() => 0}
+        onSelectAnnotation={
+          canSelect
+            ? (annotation) => {
+                setSelectedAnnotation(annotation)
+                onSelectAnnotation(annotation)
+              }
+            : () => {}
+        }
+        onSetIsImageJunk={() => {}}
+        onSetSelectedTool={() => {}}
+        onShouldDeleteAnno={() => {}}
+        onTraverseAnnotationHistory={() => {}}
+      />
+    </div>
+  )
+}
+
+export default SiaViewer