lost-sia 2.0.1-alpha13 → 2.0.1-alpha15

package/dist/Annotation/ui/AnnotationComponent.js

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

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

@@ -5,5 +5,5 @@ type DaviIconProps = {
     size: number;
     onClick?: () => void;
 };
-declare const DaviIcon: ({ x, y, color, size, onClick, }: DaviIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const DaviIcon: ({ x, y, color, size, onClick }: DaviIconProps) => import("react/jsx-runtime").JSX.Element;
 export default DaviIcon;

package/dist/Canvas/Canvas.js

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

package/dist/IconButton.d.ts

@@ -0,0 +1,25 @@
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { CSSProperties } from 'react';
+import { SizeProp } from '@fortawesome/fontawesome-svg-core';
+type IconButtonProps = {
+    loadingSize?: SizeProp;
+    isLoading?: boolean;
+    margin?: number;
+    icon?: IconDefinition;
+    text?: string;
+    size?: 'sm' | 'lg' | undefined;
+    isTextLeft?: boolean;
+    style?: CSSProperties;
+    id?: string;
+    type?: 'button' | 'submit' | 'reset' | undefined;
+    disabled?: boolean;
+    onClick?: () => void;
+    className?: string;
+    color?: string;
+    isOutline?: boolean;
+    tooltip?: string;
+    ttipPlacement?: 'top' | 'left' | 'right' | 'auto' | 'bottom' | undefined;
+    shape?: string;
+};
+declare const IconButton: ({ loadingSize, isLoading, margin, icon, text, size, isTextLeft, style, id, type, disabled, onClick, className, color, isOutline, tooltip, ttipPlacement, shape, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default IconButton;

package/dist/IconButton.js

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

package/dist/Sia.js

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

package/dist/Toolbar/ToolbarItems/AccessibilityTools.js

@@ -1 +1 @@
-import{jsxs as a,jsx as o}from"react/jsx-runtime";import{CButtonGroup as c,CButton as e}from"@coreui/react";import{faMaximize as m,faQuestion as p}from"@fortawesome/free-solid-svg-icons";import{FontAwesomeIcon as s}from"@fortawesome/react-fontawesome";import{useState as u}from"react";import f from"./InstructionsModal.js";const g=({isDisabled:i=!1,isFullscreen:r=!1,onSetIsFullscreen:n=()=>{}})=>{const[l,t]=u(!1);return a(c,{role:"group","aria-label":"Basic example",children:[o(e,{color:"primary",disabled:i,variant:r?void 0:"outline",onClick:()=>n(!r),children:o(s,{icon:m,size:"lg"})}),o(e,{color:"primary",disabled:i,variant:"outline",onClick:()=>t(!0),children:o(s,{icon:p,size:"lg"})}),o(f,{isOpen:l,setIsOpen:t})]})};export{g as default};
+import{jsxs as n,jsx as o}from"react/jsx-runtime";import{CButtonGroup as a}from"@coreui/react";import{faMaximize as c,faQuestion as p}from"@fortawesome/free-solid-svg-icons";import{useState as m}from"react";import u from"./InstructionsModal.js";import s from"../../IconButton.js";const M=({isDisabled:i=!1,isFullscreen:t=!1,onSetIsFullscreen:e=()=>{}})=>{const[l,r]=m(!1);return n(a,{role:"group","aria-label":"Basic example",children:[o(s,{color:"primary",icon:c,isOutline:!t,disabled:i,onClick:()=>e(!t),tooltip:"Toggle fullscreen"}),o(s,{color:"primary",icon:p,isOutline:!0,disabled:i,onClick:()=>r(!0),tooltip:"Open instructions"}),o(u,{isOpen:l,setIsOpen:r})]})};export{M as default};

package/dist/Toolbar/ToolbarItems/AnnoToolSelector.js

@@ -1 +1 @@
-import{jsxs as p,jsx as r}from"react/jsx-runtime";import{CButtonGroup as l,CButton as n}from"@coreui/react";import{pointIcon as u,lineIcon as f,bBoxIcon as v,polygonIcon as y}from"../../utils/siaIcons.js";import o from"../../models/AnnotationTool.js";import{FontAwesomeIcon as d}from"@fortawesome/react-fontawesome";import{faTrash as x}from"@fortawesome/free-solid-svg-icons";const k=({allowedTools:a,isDisabled:i=!1,selectedTool:t,onSetSelectedTool:c,onShouldDeleteSelectedAnnotation:m=()=>{}})=>p(l,{role:"group","aria-label":"Basic example",children:[a.point&&r(n,{color:"primary",disabled:i,variant:t==o.Point?void 0:"outline",onClick:()=>c(o.Point),children:u()}),a.line&&r(n,{color:"primary",disabled:i,variant:t==o.Line?void 0:"outline",onClick:()=>c(o.Line),children:f()}),a.bbox&&r(n,{color:"primary",disabled:i,variant:t==o.BBox?void 0:"outline",onClick:()=>c(o.BBox),children:v()}),a.polygon&&r(n,{color:"primary",disabled:i,variant:t==o.Polygon?void 0:"outline",onClick:()=>c(o.Polygon),children:y()}),r(n,{color:"primary",variant:"outline",disabled:i,onClick:m,children:r(d,{icon:x,size:"lg"})})]});export{k as default};
+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};

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

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

package/dist/Toolbar/ToolbarItems/ImageTools.js

@@ -1 +1 @@
-import{jsxs as u,jsx as e}from"react/jsx-runtime";import{CButtonGroup as c,CButton as b}from"@coreui/react";import{faBan as d}from"@fortawesome/free-solid-svg-icons";import{FontAwesomeIcon as I}from"@fortawesome/react-fontawesome";import{useState as g,useEffect as L}from"react";import x from"./ImageToolItems/ImageLabelInput.js";const P=({canJunk:a,isDisabled:o=!1,isFullscreen:s=!1,isImageJunk:l=!1,imageLabelIds:i=[],possibleLabels:t,onImageLabelsChanged:f=()=>{},onSetIsImageJunk:m=()=>{}})=>{const[n,r]=g(!1);return L(()=>{r(!1)},[s]),u(c,{role:"group","aria-label":"Image Tools",children:[t&&e(x,{isDisabled:o,isMultilabel:!0,isVisible:n,selectedLabelsIds:i,possibleLabels:t,onLabelSelect:p=>{r(!1),f(p)}}),a&&e(b,{color:"primary",variant:l?void 0:"outline",disabled:o,onClick:()=>m(!l),children:e(I,{icon:d,size:"lg"})})]})};export{P as default};
+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};

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './types';
+export { default as IconButton } from './IconButton';
 export { default as Sia } from './Sia';
 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"./Sia.js";import{default as m}from"./utils/transform.js";import{default as l}from"./Toolbar/ToolbarItems/ImageToolItems/TagLabel.js";export{e as Sia,l as TagLabel,m as transform};
+/* 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};

package/dist/models/index.d.ts

@@ -3,4 +3,4 @@ import { default as AnnotationMode } from './AnnotationMode';
 import { default as AnnotationStatus } from './AnnotationStatus';
 import { default as AnnotationTool } from './AnnotationTool';
 import { default as NotificationType } from './NotificationType';
-export { Annotation, AnnotationMode, AnnotationStatus, AnnotationTool, NotificationType, };
+export { Annotation, AnnotationMode, AnnotationStatus, AnnotationTool, NotificationType };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lost-sia",
-  "version": "2.0.1-alpha13",
+  "version": "2.0.1-alpha15",
   "description": "Single Image Annotation Tool",
   "license": "MIT",
   "repository": "l3p-cv/lost-sia",
@@ -53,7 +53,8 @@
     "start": "storybook dev -p 6006",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "format": "prettier --write src/"
+    "format": "prettier --write src/",
+    "pretty": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json}\""
   },
   "dependencies": {
     "@fortawesome/free-regular-svg-icons": "^6.7.2",

package/src/AnnoExampleViewer.jsx

@@ -1,24 +1,24 @@
-import Prompt from "./Prompt";
-import React from "react";
-import { Card, Image } from "semantic-ui-react";
+import Prompt from './Prompt'
+import React from 'react'
+import { Card, Image } from 'semantic-ui-react'
 
 const LabelExampleViewer = (props) => {
   const requestExample = (e) => {
-    e.stopPropagation();
+    e.stopPropagation()
     if (props.onRequestExample) {
-      props.onRequestExample();
+      props.onRequestExample()
     }
-  };
+  }
   const renderContent = () => {
-    if (!props.lbl) return null;
-    if (!props.exampleImg) return null;
+    if (!props.lbl) return null
+    if (!props.exampleImg) return null
     const description = (
       <div>
         {props.lbl.description}
         <h4>Comment:</h4>
-        {props.exampleImg.anno ? props.exampleImg.anno.comment : "no comment"}
+        {props.exampleImg.anno ? props.exampleImg.anno.comment : 'no comment'}
       </div>
-    );
+    )
     return (
       <div>
         <Card
@@ -46,24 +46,24 @@ const LabelExampleViewer = (props) => {
             {props.lbl.description}
             <Image src={props.exampleImg.img} centered size='medium'></Image> */}
       </div>
-    );
-  };
+    )
+  }
 
   const handlePromptClick = () => {
     if (props.onClose) {
-      props.onClose();
+      props.onClose()
     }
-  };
+  }
 
   return (
     <Prompt
       onClick={() => {
-        handlePromptClick();
+        handlePromptClick()
       }}
       active={props.active}
       content={renderContent()}
     />
-  );
-};
+  )
+}
 
-export default LabelExampleViewer;
+export default LabelExampleViewer

package/src/Annotation/logic/Annotation.ts

@@ -1,18 +1,18 @@
-import { AnnotationMode } from "../../models";
-import AnnotationStatus from "../../models/AnnotationStatus";
-import AnnotationTool from "../../models/AnnotationTool";
-import { Point } from "../../types";
+import { AnnotationMode } from '../../models'
+import AnnotationStatus from '../../models/AnnotationStatus'
+import AnnotationTool from '../../models/AnnotationTool'
+import { Point } from '../../types'
 
 class Annotation {
-  internalId: number;
-  externalId?: string;
-  annoTime: number;
-  coordinates: Point[];
-  labelIds?: number[];
-  mode: AnnotationMode; // do we even need this globally? - only really used inside AnnotationComponent
-  selectedNode: number;
-  status: AnnotationStatus;
-  type: AnnotationTool;
+  internalId: number
+  externalId?: string
+  annoTime: number
+  coordinates: Point[]
+  labelIds?: number[]
+  mode: AnnotationMode // do we even need this globally? - only really used inside AnnotationComponent
+  selectedNode: number
+  status: AnnotationStatus
+  type: AnnotationTool
 
   constructor(
     internalId: number,
@@ -20,18 +20,18 @@ class Annotation {
     coordinates: Point[],
     mode: AnnotationMode = AnnotationMode.CREATE,
     status: AnnotationStatus = AnnotationStatus.CREATING,
-    externalId: string = "",
+    externalId: string = '',
   ) {
-    this.internalId = internalId;
-    this.externalId = externalId;
-    this.labelIds = [];
-    this.type = type;
-    this.mode = mode;
-    this.status = status;
-    this.coordinates = coordinates;
-    this.selectedNode = 1;
-    this.annoTime = 0.0;
+    this.internalId = internalId
+    this.externalId = externalId
+    this.labelIds = []
+    this.type = type
+    this.mode = mode
+    this.status = status
+    this.coordinates = coordinates
+    this.selectedNode = 1
+    this.annoTime = 0.0
   }
 }
 
-export default Annotation;
+export default Annotation