lost-sia 3.2.0-alpha1 → 3.3.0-rc.1

package/dist/Canvas/Canvas.js

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

package/dist/Canvas/LabelInput.js

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

package/dist/Toolbar/Toolbar.js

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

package/dist/Toolbar/ToolbarItems/AnnoToolSelector.js

@@ -1 +1 @@
-import{jsxs as l,jsx as i}from"react/jsx-runtime";import{CButtonGroup as e}from"@coreui/react";import{pointIcon as c,lineIcon as x,bBoxIcon as u,polygonIcon as g}from"../../utils/siaIcons.js";import o from"../../models/AnnotationTool.js";import{faTrash as y}from"@fortawesome/free-solid-svg-icons";import t from"../../IconButton.js";const k=({allowedTools:r,isDisabled:n=!1,selectedTool:a,onSetSelectedTool:p,onShouldDeleteSelectedAnnotation:m=()=>{}})=>l(e,{role:"group","aria-label":"Basic example",children:[r.point&&i(t,{color:"primary",text:c(),isOutline:a!=o.Point,disabled:n,onClick:()=>p(o.Point),tooltip:"Create Point Annotation",margin:0}),r.line&&i(t,{color:"primary",text:x(),isOutline:a!=o.Line,disabled:n,onClick:()=>p(o.Line),tooltip:"Create Line Annotation",margin:0}),r.bbox&&i(t,{color:"primary",text:u(),isOutline:a!=o.BBox,disabled:n,onClick:()=>p(o.BBox),tooltip:"Create BBox Annotation",margin:0}),r.polygon&&i(t,{color:"primary",text:g(),isOutline:a!=o.Polygon,disabled:n,onClick:()=>p(o.Polygon),tooltip:"Create Polygon Annotation",margin:0}),i(t,{color:"primary",icon:y,isOutline:!0,disabled:n,onClick:m,tooltip:"Delete selected annotation",margin:0})]});export{k as default};
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import{CButtonGroup as l}from"@coreui/react";import{pointIcon as c,lineIcon as x,bBoxIcon as u,polygonIcon as g}from"../../utils/siaIcons.js";import o from"../../models/AnnotationTool.js";import{faTrash as y}from"@fortawesome/free-solid-svg-icons";import r from"../../IconButton.js";const k=({allowedTools:n,isDisabled:t=!1,selectedTool:a,onSetSelectedTool:p,onShouldDeleteSelectedAnnotation:m=()=>{}})=>e(l,{role:"group","aria-label":"Basic example",children:[n.point&&i(r,{color:"primary",text:c(),isOutline:a!=o.Point,disabled:t,onClick:()=>p(o.Point),tooltip:"Create Point Annotation",margin:0}),n.line&&i(r,{color:"primary",text:x(),isOutline:a!=o.Line,disabled:t,onClick:()=>p(o.Line),tooltip:"Create Line Annotation",margin:0}),n.bbox&&i(r,{color:"primary",text:u(),isOutline:a!=o.BBox,disabled:t,onClick:()=>p(o.BBox),tooltip:"Create BBox Annotation",margin:0}),n.polygon&&i(r,{color:"primary",text:g(),isOutline:a!=o.Polygon,disabled:t,onClick:()=>p(o.Polygon),tooltip:"Create Polygon Annotation",margin:0}),n.delete&&i(r,{color:"primary",icon:y,isOutline:!0,disabled:t,onClick:m,tooltip:"Delete selected annotation",margin:0})]});export{k as default};

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

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

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

@@ -1 +1 @@
-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};
+import{jsx as t,jsxs as u}from"react/jsx-runtime";import{useState as y,useRef as f,useCallback as D}from"react";import{CTooltip as S,CDropdown as F,CDropdownToggle as R,CDropdownMenu as I,CFormInput as T,CDropdownDivider as E,CDropdownItem as p}from"@coreui/react";import{FontAwesomeIcon as N}from"@fortawesome/react-fontawesome";import{faTag as W}from"@fortawesome/free-solid-svg-icons";import b from"./TagLabel.js";const O=({isDisabled:m,isVisible:h,isFullscreen:g=!1,selectedLabelsIds:n,possibleLabels:a,isMultilabel:v=!1,onLabelSelect:x})=>{const[s,w]=y(""),i=f(null),l=f(null),C=D(e=>{if(i.current&&l.current&&i.current.removeEventListener("wheel",l.current),i.current=e,l.current=null,!e)return;const r=o=>{o.preventDefault(),e.scrollLeft+=o.deltaY*.2};l.current=r,e.addEventListener("wheel",r,{passive:!1})},[]),c=a.filter(e=>e.name.toLowerCase().includes(s.toLowerCase())),d=e=>{let r=[];if(v){r=[...n??[]];const o=(n??[]).indexOf(e.id);o===-1?r.push(e.id):r.splice(o,1)}else r=[e.id];x(r)},L=()=>a.filter(r=>n?.includes(r.id));return t(S,{content:"Add Image Label",children:u(F,{visible:h,autoClose:"outside",children:[t(R,{variant:"outline",caret:!1,color:m?"secondary":"primary",as:"div",children:(()=>{if(!n||n.length===0)return t("div",{children:t(N,{icon:W})});const e=L();return t("div",{ref:C,style:{display:"flex",flexWrap:"nowrap",overflowX:"auto",maxWidth:g?"500px":"300px",alignItems:"center",gap:"10px",scrollbarWidth:"thin"},className:"tag-scroll",children:e.map(r=>t(b,{name:r.name,color:r.color,size:25,triangleSize:17,style:{flexShrink:0},onRemove:()=>d(r)},r.name))})})()}),u(I,{as:"div",style:{padding:0},children:[t("div",{className:"px-3 py-2",children:t(T,{placeholder:"Filter label...",value:s,onChange:e=>w(e.target.value),autoFocus:!0})}),t(E,{}),t("div",{style:{maxHeight:"200px",overflowY:"auto"},children:c.length>0?c.map(e=>{const r=n?.includes(e.id);return t(p,{onClick:()=>d(e),active:r,children:e.name},e.id)}):t(p,{disabled:!0,children:"No results"})})]})]})})};export{O as default};

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

@@ -6,6 +6,7 @@ type TagLabelProps = {
     style?: CSSProperties;
     triangleSize?: number;
     onClick?: () => void;
+    onRemove?: () => void;
 };
-declare const TagLabel: ({ name, color, size: bodySize, style, triangleSize, onClick, }: TagLabelProps) => import("react/jsx-runtime").JSX.Element;
+declare const TagLabel: ({ name, color, size: bodySize, style, triangleSize, onClick, onRemove, }: TagLabelProps) => import("react/jsx-runtime").JSX.Element;
 export default TagLabel;

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

@@ -1 +1 @@
-import{jsxs as l,jsx as p}from"react/jsx-runtime";const x=({name:n,color:t="#2185d0",size:o=32,style:s={},triangleSize:e=22,onClick:r})=>{const i={display:"inline-flex",alignItems:"center",backgroundColor:t,color:"#000",height:`${o}px`,fontSize:`${o*.45}px`,padding:"0 1rem 0 0.75rem",border:0,borderRadius:"0 0.25rem 0.25rem 0",marginLeft:`${e/1.4}px`,position:"relative",overflow:"visible",cursor:r?"pointer":"default",...s},a={position:"absolute",left:`-${e/2}px`,width:`${e}px`,height:`${e}px`,backgroundColor:t,transform:"rotate(45deg)",zIndex:-1,pointerEvents:"none"};return l("button",{style:i,onClick:r,children:[p("span",{style:a}),n]})};export{x as default};
+import{jsxs as f,jsx as n}from"react/jsx-runtime";import{FontAwesomeIcon as m}from"@fortawesome/react-fontawesome";import{faXmark as c}from"@fortawesome/free-solid-svg-icons";const b=({name:s,color:i="#2185d0",size:o=32,style:l={},triangleSize:e=22,onClick:a,onRemove:r})=>{const p={display:"inline-flex",alignItems:"center",backgroundColor:i,color:"#000",height:`${o}px`,fontSize:`${o*.45}px`,padding:"0 1rem 0 0.75rem",border:0,borderRadius:"0 0.25rem 0.25rem 0",marginLeft:`${e/1.4}px`,position:"relative",overflow:"visible",cursor:a?"pointer":"default",...l},d={position:"absolute",left:`-${e/2}px`,width:`${e}px`,height:`${e}px`,backgroundColor:i,transform:"rotate(45deg)",zIndex:-1,pointerEvents:"none"};return f("button",{style:p,onClick:a,children:[n("span",{style:d}),s,r&&n("span",{role:"button",tabIndex:0,onClick:t=>{t.stopPropagation(),r()},onKeyDown:t=>{(t.key==="Enter"||t.key===" ")&&(t.stopPropagation(),r())},style:{marginLeft:"6px",cursor:"pointer",opacity:.6,fontSize:`${o*.4}px`,lineHeight:1,display:"inline-flex",alignItems:"center"},"aria-label":"Remove tag",children:n(m,{icon:c})})]})};export{b as default};

package/dist/Toolbar/ToolbarItems/ImageTools.d.ts

@@ -1,6 +1,7 @@
 import { Label } from '../../types';
 type ImageToolsProps = {
     canJunk: boolean;
+    canLabel?: boolean;
     imageLabelIds?: number[];
     isDisabled?: boolean;
     isFullscreen?: boolean;
@@ -9,5 +10,5 @@ type ImageToolsProps = {
     onImageLabelsChanged?: (selectedImageIds: number[]) => void;
     onSetIsImageJunk?: (isImageJunk: boolean) => void;
 };
-declare const ImageTools: ({ canJunk, isDisabled, isFullscreen, isImageJunk, imageLabelIds, possibleLabels, onImageLabelsChanged, onSetIsImageJunk, }: ImageToolsProps) => import("react/jsx-runtime").JSX.Element;
+declare const ImageTools: ({ canJunk, canLabel, isDisabled, isFullscreen, isImageJunk, imageLabelIds, possibleLabels, onImageLabelsChanged, onSetIsImageJunk, }: ImageToolsProps) => import("react/jsx-runtime").JSX.Element;
 export default ImageTools;

package/dist/Toolbar/ToolbarItems/ImageTools.js

@@ -1 +1 @@
-import{jsxs as n,jsx as r}from"react/jsx-runtime";import{CButtonGroup as c}from"@coreui/react";import{faBan as b}from"@fortawesome/free-solid-svg-icons";import{useState as I,useEffect as d}from"react";import g from"./ImageToolItems/ImageLabelInput.js";import L from"../../IconButton.js";const S=({canJunk:a,isDisabled:e=!1,isFullscreen:s=!1,isImageJunk:o=!1,imageLabelIds:i=[],possibleLabels:l,onImageLabelsChanged:f=()=>{},onSetIsImageJunk:m=()=>{}})=>{const[p,t]=I(!1);return d(()=>{t(!1)},[s]),n(c,{role:"group","aria-label":"Image Tools",children:[l&&r(g,{isDisabled:e,isMultilabel:!0,isVisible:p,selectedLabelsIds:i,possibleLabels:l,onLabelSelect:u=>{t(!1),f(u)}}),a&&r(L,{color:"primary",icon:b,isOutline:!o,disabled:e,onClick:()=>m(!o),tooltip:"Junk image"})]})};export{S as default};
+import{jsxs as c,jsx as a}from"react/jsx-runtime";import{CButtonGroup as b}from"@coreui/react";import{faBan as I}from"@fortawesome/free-solid-svg-icons";import{useState as d,useEffect as g}from"react";import L from"./ImageToolItems/ImageLabelInput.js";import x from"../../IconButton.js";const T=({canJunk:i,canLabel:s=!0,isDisabled:e=!1,isFullscreen:o=!1,isImageJunk:t=!1,imageLabelIds:f=[],possibleLabels:l,onImageLabelsChanged:m=()=>{},onSetIsImageJunk:p=()=>{}})=>{const[u,r]=d(!1);return g(()=>{r(!1)},[o]),c(b,{role:"group","aria-label":"Image Tools",children:[l&&s&&a(L,{isDisabled:e,isMultilabel:!0,isFullscreen:o,isVisible:u,selectedLabelsIds:f,possibleLabels:l,onLabelSelect:n=>{r(!1),m(n)}}),i&&a(x,{color:"primary",icon:I,isOutline:!t,disabled:e,onClick:()=>p(!t),tooltip:"Junk image"})]})};export{T as default};

package/dist/assets/SIA-CoOqcT1a.css

@@ -0,0 +1 @@
+.sia-fullscreen{position:fixed;top:0;left:0;z-index:6000;width:100%;height:100%;background-color:#fff}.tag-scroll::-webkit-scrollbar{height:4px}.tag-scroll::-webkit-scrollbar-track{background:transparent}.tag-scroll::-webkit-scrollbar-thumb{background-color:#00000040;border-radius:2px}