lost-sia 3.1.3 → 3.2.0-alpha0

package/dist/Canvas/Canvas.js

@@ -1 +1 @@
-import{jsxs as K,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 _ 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 w 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:F,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:N,toolbarHeight:G=0,uiConfig:R,onAnnoCreated:Ie,onAnnoCreationFinished:ne,onAnnoChanged:oe,onAnnoEditing:Te=c=>{},onNotification:se=c=>{},onRequestNewAnnoId:V,onSelectAnnotation:I,onSetIsImageJunk:Me,onSetSelectedTool:Oe=c=>{},onShouldDeleteAnno:re,onTraverseAnnotationHistory:ie})=>{const[c,y]=g(r.VIEW),[we,be]=g(),[ae,De]=g(q),[P,Se]=g({x:-1,y:-1}),[ce,le]=g(0),k={x:P.x,y:P.y},[u,de]=g({x:-1,y:-1}),[d,H]=g({x:-1,y:-1}),[m,fe]=g({x:-1,y:-1}),[f,L]=g(1),[l,b]=g({x:0,y:0}),$={x:l.x+ce,y:l.y},[j,W]=g(),[J,D]=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(R.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);N===O.BBox&&t.push(t[0]);const n=V(),o=new xe(n,N,t);if(be(performance.now()),ae!==void 0&&(o.labelIds=[ae]),Ie(o),N===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:_.CREATE,status:w.CREATING,internalId:V(),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=V(),t.externalId="",ne(t,!0),I(t)},Ee=e=>{const t=A.getMostLeftPoints(e),n=A.getTopPoint(t)[0];return A.convertStageToPage(n,k,f,l)},Be=e=>{switch(e){case a.EDIT_LABEL:if(i){const t=A.convertPercentagedCoordinatesToStage(i.coordinates,u,m);W(Ee(t)),D(!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:S(20*f,0);break;case a.CAM_MOVE_RIGHT:S(-20*f,0);break;case a.CAM_MOVE_UP:S(0,20*f);break;case a.CAM_MOVE_DOWN:S(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}},S=(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),b({x:n,y:o})},B=(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})}L(1),b({x:0,y:0}),W(void 0),D(!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,R]),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=V(),n=new xe(t,e.type,A.convertPercentagedCoordinatesToStage(e.coordinates,u,m),_.VIEW,w.CREATED);e.labelIds!==void 0&&(n.labelIds=e.labelIds),Q(n)})},[z]);const Q=e=>{y(r.VIEW);const t={...e,mode:_.VIEW};if(e.type!==O.Point){const s=at.getRoundedDuration(we,performance.now());t.annoTime=s}const n=A.convertStageCoordinatesToPercentaged(e.coordinates,C,u);t.coordinates=n,oe(t);const o=N===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(!F.canCreate||c===r.ADD||c===r.CREATE)return;const t=Ce.getAntiScaledMouseStagePosition(e,k,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&&S(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,k,f,l),E=f/o,M={x:E*(s.x+l.x)-s.x,y:E*(s.y+l.y)-s.y};o<1?(L(1),(l.x!=0||l.y!=0)&&b({x:0,y:0})):o>200?(L(200),b(M)):(L(o),b(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(Ee(e.coordinates))},me=e=>{const t=A.convertStageCoordinatesToPercentaged(e.coordinates,C,u),n={...e,coordinates:t};n.status===w.LOADED&&(n.status=w.CHANGED),oe(n)},je=()=>{if(c===r.CAMERA_MOVE)return p(qe,{});const t=[r.CREATE,r.ADD,r.MOVE].includes(c),n=B.map(o=>{const s=o.internalId===i?.internalId;return t&&!s?p("g",{},`annotationComponent_${o.internalId}`):p(nt,{scaledAnnotation:o,annotationSettings:F,possibleLabels:ee,svgScale:f,svgTranslation:$,pageToStageOffset:k,nodeRadius:R.nodeRadius,strokeWidth:R.strokeWidth,isSelected:s,isDisabled:Y&&s,onFinishAnnoCreate:Q,onLabelIconClicked:()=>D(!0),onAction:$e,onAnnoChanged:me,onAnnotationModeChange:E=>{E===_.MOVE&&y(r.MOVE),c===r.MOVE&&E===_.VIEW&&y(r.VIEW)},onNotification:se},`annotationComponent_${o.internalId}`)});if(i){const o=B.find(E=>E.internalId===i?.internalId),s=B.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:()=>{D(!1)}}),pe={x:P.x+d.x/2,y:P.y+d.y/2};return K("div",{ref:x,style:{flex:"1 1 auto",minHeight:0,display:"flex",flexDirection:"column"},children:[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:F.canHaveMultipleLabels,onLabelSelect:e=>{if(setTimeout(()=>D(!1),0),e.length>0){const s=e.filter(E=>!i.labelIds.includes(E));s.length>0&&De(s[0])}const t=B.find(s=>s.internalId===i.internalId);if(!t)return;const n=t.status===w.LOADED?w.CHANGED:t.status,o={...i,coordinates:t.coordinates,labelIds:[...e],status:n};me(o)}})}),U&&K("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"})]}),K("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:[K("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:()=>{W(void 0)}})]})]})};export{Dt 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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lost-sia",
-  "version": "3.1.3",
+  "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/Canvas/Canvas.tsx

@@ -780,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) => {
@@ -919,6 +921,7 @@ const Canvas = ({
         flexDirection: 'column',
       }}
     >
+      {annotationSettings.canLabel && (
       <div
         style={{
           position: 'absolute',
@@ -973,6 +976,7 @@ const Canvas = ({
           }}
         />
       </div>
+      )}
 
       {isImageJunk && (
         <div

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

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

@@ -11,7 +11,6 @@ import {
 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 = {
@@ -69,7 +68,7 @@ const ImageLabelInput = ({
     if (!selectedLabelsIds || selectedLabelsIds.length === 0)
       return (
         <div style={{ marginTop: 6 }}>
-          <FontAwesomeIcon icon={faTag as IconProps} />
+          <FontAwesomeIcon icon={faTag} />
         </div>
       )
 

package/src/index.ts

@@ -1,4 +1,3 @@
-import 'semantic-ui-css/semantic.min.css'
 import './SIA.scss'
 
 // export all type definitions
@@ -6,5 +5,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/src/stories/SIA/SiaViewer.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import SiaViewer from '../../SiaViewer'
+
+import exampleImage from '../exampleData/exampleImage'
+import exampleLabels from '../exampleData/exampleLabels'
+import exampleExternalAnnotations from '../exampleData/exampleExternalAnnotations'
+
+export const ActionsData = {}
+
+const meta = {
+  title: 'Components/SiaViewer',
+  component: SiaViewer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/,
+  args: {
+    ...ActionsData,
+  },
+} satisfies Meta<typeof SiaViewer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultArgs = {
+  ...ActionsData,
+  image: exampleImage,
+  possibleLabels: exampleLabels.voc,
+}
+
+/**
+ * SiaViewer with point annotations. No toolbar, no editing.
+ * Try clicking annotations to select them and scrolling to zoom.
+ */
+export const WithPointAnnotations: Story = {
+  args: {
+    ...defaultArgs,
+    annotations: exampleExternalAnnotations.point,
+  },
+}
+
+/**
+ * SiaViewer with bbox annotations.
+ */
+export const WithBBoxAnnotations: Story = {
+  args: {
+    ...defaultArgs,
+    annotations: exampleExternalAnnotations.bbox,
+  },
+}
+
+/**
+ * SiaViewer with line annotations.
+ */
+export const WithLineAnnotations: Story = {
+  args: {
+    ...defaultArgs,
+    annotations: exampleExternalAnnotations.line,
+  },
+}
+
+/**
+ * SiaViewer with polygon annotations.
+ */
+export const WithPolygonAnnotations: Story = {
+  args: {
+    ...defaultArgs,
+    annotations: exampleExternalAnnotations.polygon,
+  },
+}
+
+/**
+ * SiaViewer with zoom disabled.
+ */
+export const ZoomDisabled: Story = {
+  args: {
+    ...defaultArgs,
+    annotations: exampleExternalAnnotations.polygon,
+    enableZoom: false,
+  },
+}
+
+/**
+ * SiaViewer with selection disabled. Annotations cannot be clicked.
+ */
+export const SelectionDisabled: Story = {
+  args: {
+    ...defaultArgs,
+    annotations: exampleExternalAnnotations.polygon,
+    canSelect: false,
+  },
+}
+
+/**
+ * SiaViewer marked as junk.
+ */
+export const Junk: Story = {
+  args: {
+    ...defaultArgs,
+    annotations: exampleExternalAnnotations.polygon,
+    isJunk: true,
+  },
+}

package/src/stories/exampleData/exampleExternalAnnotations.ts

@@ -37,10 +37,10 @@ const point: ExternalAnnotation[] = [
 const line: ExternalAnnotation[] = [
   {
     coordinates: [
-      { x: 50, y: 50 },
-      { x: 200, y: 100 },
-      { x: 250, y: 100 },
-      { x: 250, y: 200 },
+      { x: 0.05, y: 0.05 },
+      { x: 0.2, y: 0.1 },
+      { x: 0.25, y: 0.1 },
+      { x: 0.25, y: 0.2 },
     ],
     labelIds: [5],
     type: AnnotationTool.Line,
@@ -48,11 +48,11 @@ const line: ExternalAnnotation[] = [
   },
   {
     coordinates: [
-      { x: 259.883, y: 300.424 },
-      { x: 350, y: 331.5263919270834 },
-      { x: 355, y: 320 },
-      { x: 370, y: 300 },
-      { x: 270, y: 250 },
+      { x: 0.26, y: 0.3 },
+      { x: 0.35, y: 0.33 },
+      { x: 0.36, y: 0.32 },
+      { x: 0.37, y: 0.3 },
+      { x: 0.27, y: 0.25 },
     ],
     labelIds: [8, 11],
     type: AnnotationTool.Line,
@@ -63,8 +63,8 @@ const line: ExternalAnnotation[] = [
 const bbox: ExternalAnnotation[] = [
   {
     coordinates: [
-      { x: 50, y: 50 },
-      { x: 200, y: 200 },
+      { x: 0.05, y: 0.05 },
+      { x: 0.2, y: 0.2 },
     ],
     labelIds: [5],
     type: AnnotationTool.BBox,
@@ -72,8 +72,8 @@ const bbox: ExternalAnnotation[] = [
   },
   {
     coordinates: [
-      { x: 250, y: 100 },
-      { x: 450, y: 150 },
+      { x: 0.25, y: 0.1 },
+      { x: 0.45, y: 0.15 },
     ],
     labelIds: [8, 11],
     type: AnnotationTool.BBox,
@@ -84,10 +84,10 @@ const bbox: ExternalAnnotation[] = [
 const polygon: ExternalAnnotation[] = [
   {
     coordinates: [
-      { x: 50, y: 50 },
-      { x: 200, y: 100 },
-      { x: 250, y: 100 },
-      { x: 250, y: 200 },
+      { x: 0.05, y: 0.05 },
+      { x: 0.2, y: 0.1 },
+      { x: 0.25, y: 0.1 },
+      { x: 0.25, y: 0.2 },
     ],
     labelIds: [5],
     status: AnnotationStatus.LOADED,
@@ -95,11 +95,11 @@ const polygon: ExternalAnnotation[] = [
   },
   {
     coordinates: [
-      { x: 259.883, y: 300.424 },
-      { x: 350, y: 331.5263919270834 },
-      { x: 355, y: 320 },
-      { x: 370, y: 300 },
-      { x: 270, y: 250 },
+      { x: 0.26, y: 0.3 },
+      { x: 0.35, y: 0.33 },
+      { x: 0.36, y: 0.32 },
+      { x: 0.37, y: 0.3 },
+      { x: 0.27, y: 0.25 },
     ],
     labelIds: [8, 11],
     status: AnnotationStatus.LOADED,