lost-sia 2.0.1-alpha12 → 2.0.1-alpha14

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/AnnoBar.js

@@ -1 +1 @@
-import{jsxs as _,jsx as x}from"react/jsx-runtime";import{useState as r,useRef as C,useEffect as f}from"react";import T from"../../../utils/transform2.js";import H from"./DaviIcon.js";const R=10,a=15,j=3,U=({annotationCoordinates:u,canLabel:y,color:b,labels:E,selectedLabelIds:h=[],isSelected:L,svgScale:t,style:d,onLabelIconClicked:P})=>{const[c,w]=r({x:0,y:0}),e={x:c.x+7/t,y:c.y-10/t},[p,D]=r(0),[z,A]=r(0),[l,B]=r(0),[m,F]=r(""),s=C(null);f(()=>{F(W())},[h]),f(()=>{const o=T.getTopPoint(u),i=T.getMostLeftPoints(o)[0];w(i);const n=Math.ceil(R/t);B(n),A(a/t)},[t]),f(()=>{if(s===void 0)return;const n=(s.current.getBoundingClientRect().width+j)/t;D(n)},[s,m,l]);const W=()=>{const i=E.filter(n=>h.includes(n.id)).map(n=>n.name).join(", ");return i.length?i:"no label"};return _("g",{children:[L&&y&&x(H,{x:e.x-33/t,y:e.y-30/t,color:b,size:60/t,onClick:()=>P(c)}),x("rect",{x:e.x,y:e.y-6/(t*1.2),width:p,height:z,rx:5/t,opacity:"0.5",style:d}),x("text",{x:e.x+1/t,y:e.y+6/t,fill:"white",textAnchor:"start",alignmentBaseline:"central",ref:s,fontSize:`${l}pt`,children:m}),x("rect",{x:e.x,y:e.y-6/(t*1.2),width:p,height:a,rx:5/t,opacity:"0.01",style:d,onContextMenu:o=>o.preventDefault()})]})};export{U as default};
+import{jsxs as _,jsx as x}from"react/jsx-runtime";import{useState as r,useRef as C,useEffect as f}from"react";import T from"../../../utils/transform.js";import H from"./DaviIcon.js";const R=10,a=15,j=3,U=({annotationCoordinates:u,canLabel:y,color:b,labels:E,selectedLabelIds:h=[],isSelected:L,svgScale:t,style:d,onLabelIconClicked:P})=>{const[c,w]=r({x:0,y:0}),e={x:c.x+7/t,y:c.y-10/t},[p,D]=r(0),[z,A]=r(0),[l,B]=r(0),[m,F]=r(""),s=C(null);f(()=>{F(W())},[h]),f(()=>{const o=T.getTopPoint(u),i=T.getMostLeftPoints(o)[0];w(i);const n=Math.ceil(R/t);B(n),A(a/t)},[t]),f(()=>{if(s===void 0)return;const n=(s.current.getBoundingClientRect().width+j)/t;D(n)},[s,m,l]);const W=()=>{const i=E.filter(n=>h.includes(n.id)).map(n=>n.name).join(", ");return i.length?i:"no label"};return _("g",{children:[L&&y&&x(H,{x:e.x-33/t,y:e.y-30/t,color:b,size:60/t,onClick:()=>P(c)}),x("rect",{x:e.x,y:e.y-6/(t*1.2),width:p,height:z,rx:5/t,opacity:"0.5",style:d}),x("text",{x:e.x+1/t,y:e.y+6/t,fill:"white",textAnchor:"start",alignmentBaseline:"central",ref:s,fontSize:`${l}pt`,children:m}),x("rect",{x:e.x,y:e.y-6/(t*1.2),width:p,height:a,rx:5/t,opacity:"0.01",style:d,onContextMenu:o=>o.preventDefault()})]})};export{U 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/Annotation/ui/atoms/Edge.js

@@ -1 +1 @@
-import{jsx as i}from"react/jsx-runtime";import d from"../../../utils/mouse2.js";const S=({startCoordinate:o,endCoordinate:t,isDisabled:s=!1,pageToStageOffset:r,style:n,svgScale:a,svgTranslation:l,onAddNode:u=()=>{},onDoubleClick:x=()=>{},onMouseDown:c,onMouseMove:m})=>{const y=e=>{const f=d.getAntiScaledMouseStagePosition(e,r,a,l);u(f)};return i("line",{x1:o.x,y1:o.y,x2:t.x,y2:t.y,style:n,onClick:e=>e.ctrlKey&&y(e),onDoubleClick:x,onMouseDown:c,onMouseMove:m,onContextMenu:e=>e.preventDefault(),strokeDasharray:s?"10,5":"0"})};export{S as default};
+import{jsx as i}from"react/jsx-runtime";import d from"../../../utils/mouse.js";const S=({startCoordinate:o,endCoordinate:t,isDisabled:s=!1,pageToStageOffset:r,style:n,svgScale:a,svgTranslation:l,onAddNode:u=()=>{},onDoubleClick:x=()=>{},onMouseDown:c,onMouseMove:m})=>{const y=e=>{const f=d.getAntiScaledMouseStagePosition(e,r,a,l);u(f)};return i("line",{x1:o.x,y1:o.y,x2:t.x,y2:t.y,style:n,onClick:e=>e.ctrlKey&&y(e),onDoubleClick:x,onMouseDown:c,onMouseMove:m,onContextMenu:e=>e.preventDefault(),strokeDasharray:s?"10,5":"0"})};export{S as default};

package/dist/Annotation/ui/atoms/Node.js

@@ -1 +1 @@
-import{jsxs as H,jsx as u}from"react/jsx-runtime";import{useState as c,useRef as h,useEffect as m}from"react";import L from"../../../utils/mouse2.js";const K=({index:v,coordinates:t,annotationSettings:o,pageToStageOffset:x,svgScale:r,svgTranslation:y,style:p,onDeleteNode:D,onMoving:I,onMoved:g,onIsDraggingStateChanged:A})=>{const[E,i]=c(!1),[n,l]=c(!1),[s,a]=c(!1),f=h(s);m(()=>{f.current=s},[s]);const M=e=>{if(!n)return;const C=L.getAntiScaledMouseStagePosition(e,x,r,y);(e.movementX!==0||e.movementY!==0)&&(a(!0),I(v,C))};m(()=>{if(A(n),!n)return;const e=()=>{l(!1),f.current&&g(),a(!1)};return window.addEventListener("mouseup",e),()=>{window.removeEventListener("mouseup",e)}},[n]);const d=e=>{o.canEdit&&(e.ctrlKey?D():l(!0))},w=()=>u("circle",{cx:t.x,cy:t.y,r:12/r,onMouseLeave:e=>o.canEdit&&i(!1),onMouseDown:d,onContextMenu:e=>e.preventDefault()});return H("g",{children:[n&&u("circle",{cx:t.x,cy:t.y,r:"100%",style:{opacity:0},onMouseMove:e=>M(e),onContextMenu:e=>e.preventDefault()}),E&&w(),u("circle",{cx:t.x,cy:t.y,r:10/r,style:p,onMouseOver:()=>{o.canEdit&&i(!0)},onMouseDown:d,onMouseMove:e=>M(e),onContextMenu:e=>e.preventDefault()})]})};export{K as default};
+import{jsxs as H,jsx as u}from"react/jsx-runtime";import{useState as c,useRef as h,useEffect as m}from"react";import L from"../../../utils/mouse.js";const K=({index:v,coordinates:t,annotationSettings:o,pageToStageOffset:x,svgScale:r,svgTranslation:y,style:p,onDeleteNode:D,onMoving:I,onMoved:g,onIsDraggingStateChanged:A})=>{const[E,i]=c(!1),[n,l]=c(!1),[s,a]=c(!1),f=h(s);m(()=>{f.current=s},[s]);const M=e=>{if(!n)return;const C=L.getAntiScaledMouseStagePosition(e,x,r,y);(e.movementX!==0||e.movementY!==0)&&(a(!0),I(v,C))};m(()=>{if(A(n),!n)return;const e=()=>{l(!1),f.current&&g(),a(!1)};return window.addEventListener("mouseup",e),()=>{window.removeEventListener("mouseup",e)}},[n]);const d=e=>{o.canEdit&&(e.ctrlKey?D():l(!0))},w=()=>u("circle",{cx:t.x,cy:t.y,r:12/r,onMouseLeave:e=>o.canEdit&&i(!1),onMouseDown:d,onContextMenu:e=>e.preventDefault()});return H("g",{children:[n&&u("circle",{cx:t.x,cy:t.y,r:"100%",style:{opacity:0},onMouseMove:e=>M(e),onContextMenu:e=>e.preventDefault()}),E&&w(),u("circle",{cx:t.x,cy:t.y,r:10/r,style:p,onMouseOver:()=>{o.canEdit&&i(!0)},onMouseDown:d,onMouseMove:e=>M(e),onContextMenu:e=>e.preventDefault()})]})};export{K as default};

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

@@ -1 +1 @@
-import{jsxs as H,jsx as v}from"react/jsx-runtime";import{useState as l,useRef as J,useEffect as x}from"react";import K from"../atoms/Node.js";import d from"../../../models/AnnotationMode.js";import Q from"../../../utils/mouse2.js";import V from"../atoms/PolygonArea.js";import W from"../atoms/Edge.js";const re=({annotationMode:m,annotationSettings:i,pageToStageOffset:w,startCoords:R,endCoords:b,svgScale:s,svgTranslation:C,isSelected:E,style:M,onDeleteNode:j,onFinishAnnoCreate:z,onIsDraggingStateChanged:p,onMoving:A,onMoved:k})=>{const n=[R,{x:R.x,y:b.y},b,{x:b.x,y:R.y}],[L,B]=l(m===d.CREATE),[a,N]=l(!1),[f,X]=l(!1),[_,$]=l(0),[D,y]=l(!1),g=J(D);x(()=>{g.current=D},[D]);const Y=e=>{i.canEdit!==!1&&E&&m!==d.CREATE&&e.button===0&&N(!0)},T=e=>{i.canEdit!==!1&&E&&m!==d.CREATE&&e.button===0&&X(!0)},h=e=>{if(a){const r=[{...n[0]},{...n[2]}].map(t=>({x:t.x+=e.movementX/s,y:t.y+=e.movementY/s}));(e.movementX!==0||e.movementY!==0)&&(y(!0),A(r))}if(m===d.CREATE){const o=Q.getAntiScaledMouseStagePosition(e,w,s,C),t=[[...n][0],o];A(t)}};x(()=>{if(!L)return;const e=o=>{o.button===2&&(z(),B(!1))};return window.addEventListener("mouseup",e),()=>{window.removeEventListener("mouseup",e)}},[L]),x(()=>{if(p(a),!a)return;const e=()=>{N(!1),g.current&&k(),y(!1)};return window.addEventListener("mouseup",e),()=>{window.removeEventListener("mouseup",e)}},[a]),x(()=>{if(p(f),!f)return;const e=()=>{X(!1),g.current&&k(),y(!1)};return window.addEventListener("mouseup",e),()=>{window.removeEventListener("mouseup",e)}},[f]);const q=()=>n.map((o,r)=>v(K,{index:r,annotationSettings:i,coordinates:o,pageToStageOffset:w,svgScale:s,svgTranslation:C,style:M,onDeleteNode:()=>{const t=[...n];t.splice(r,1),j(t)},onMoving:(t,c)=>{const u=[n[0],n[2]];switch(t){case 0:u[0]=c;break;case 1:u[0].x=c.x,u[1].y=c.y;break;case 2:u[1]=c;break;case 3:u[1].x=c.x,u[0].y=c.y;break}A(u)},onMoved:()=>k(),onIsDraggingStateChanged:p},`node_${r}`)),I=(e,o)=>{const r=[n[0],n[2]];switch(e){case 0:r[0].x+=o.movementX/s;break;case 1:r[1].y+=o.movementY/s;break;case 2:r[1].x+=o.movementX/s;break;case 3:r[0].y+=o.movementY/s;break}(o.movementX!==0||o.movementY!==0)&&(y(!0),A(r))},G=()=>n.map((o,r)=>{const t=r+1<n.length?n[r+1]:n[0],c=r%2===0?"ew-resize":"ns-resize";return v(W,{startCoordinate:o,endCoordinate:t,pageToStageOffset:w,svgScale:s,svgTranslation:C,style:{...M,cursor:c},onMouseDown:T,onMouseMove:u=>{$(r),f&&I(r,u)}},`edge_${r}`)}),U=e=>v("circle",{cx:n[0].x,cy:n[0].y,r:"100%",style:{opacity:0},onMouseDown:Y,onMouseMove:o=>{e&&f&&I(_,o),e||h(o)},onContextMenu:o=>o.preventDefault()});return H("g",{children:[(a||m===d.CREATE)&&U(!1),v(V,{annotationSettings:i,coordinates:n,isSelected:E,annotationMode:m,pageToStageOffset:w,style:M,svgScale:s,onIsDraggingStateChanged:p,onMouseDown:Y,onMouseMove:h}),f&&U(!0),E&&i.canEdit&&G(),E&&m!==d.CREATE&&q()]})};export{re as default};
+import{jsxs as H,jsx as v}from"react/jsx-runtime";import{useState as l,useRef as J,useEffect as x}from"react";import K from"../atoms/Node.js";import d from"../../../models/AnnotationMode.js";import Q from"../../../utils/mouse.js";import V from"../atoms/PolygonArea.js";import W from"../atoms/Edge.js";const re=({annotationMode:m,annotationSettings:i,pageToStageOffset:w,startCoords:R,endCoords:b,svgScale:s,svgTranslation:C,isSelected:E,style:M,onDeleteNode:j,onFinishAnnoCreate:z,onIsDraggingStateChanged:p,onMoving:A,onMoved:k})=>{const n=[R,{x:R.x,y:b.y},b,{x:b.x,y:R.y}],[L,B]=l(m===d.CREATE),[a,N]=l(!1),[f,X]=l(!1),[_,$]=l(0),[D,y]=l(!1),g=J(D);x(()=>{g.current=D},[D]);const Y=e=>{i.canEdit!==!1&&E&&m!==d.CREATE&&e.button===0&&N(!0)},T=e=>{i.canEdit!==!1&&E&&m!==d.CREATE&&e.button===0&&X(!0)},h=e=>{if(a){const r=[{...n[0]},{...n[2]}].map(t=>({x:t.x+=e.movementX/s,y:t.y+=e.movementY/s}));(e.movementX!==0||e.movementY!==0)&&(y(!0),A(r))}if(m===d.CREATE){const o=Q.getAntiScaledMouseStagePosition(e,w,s,C),t=[[...n][0],o];A(t)}};x(()=>{if(!L)return;const e=o=>{o.button===2&&(z(),B(!1))};return window.addEventListener("mouseup",e),()=>{window.removeEventListener("mouseup",e)}},[L]),x(()=>{if(p(a),!a)return;const e=()=>{N(!1),g.current&&k(),y(!1)};return window.addEventListener("mouseup",e),()=>{window.removeEventListener("mouseup",e)}},[a]),x(()=>{if(p(f),!f)return;const e=()=>{X(!1),g.current&&k(),y(!1)};return window.addEventListener("mouseup",e),()=>{window.removeEventListener("mouseup",e)}},[f]);const q=()=>n.map((o,r)=>v(K,{index:r,annotationSettings:i,coordinates:o,pageToStageOffset:w,svgScale:s,svgTranslation:C,style:M,onDeleteNode:()=>{const t=[...n];t.splice(r,1),j(t)},onMoving:(t,c)=>{const u=[n[0],n[2]];switch(t){case 0:u[0]=c;break;case 1:u[0].x=c.x,u[1].y=c.y;break;case 2:u[1]=c;break;case 3:u[1].x=c.x,u[0].y=c.y;break}A(u)},onMoved:()=>k(),onIsDraggingStateChanged:p},`node_${r}`)),I=(e,o)=>{const r=[n[0],n[2]];switch(e){case 0:r[0].x+=o.movementX/s;break;case 1:r[1].y+=o.movementY/s;break;case 2:r[1].x+=o.movementX/s;break;case 3:r[0].y+=o.movementY/s;break}(o.movementX!==0||o.movementY!==0)&&(y(!0),A(r))},G=()=>n.map((o,r)=>{const t=r+1<n.length?n[r+1]:n[0],c=r%2===0?"ew-resize":"ns-resize";return v(W,{startCoordinate:o,endCoordinate:t,pageToStageOffset:w,svgScale:s,svgTranslation:C,style:{...M,cursor:c},onMouseDown:T,onMouseMove:u=>{$(r),f&&I(r,u)}},`edge_${r}`)}),U=e=>v("circle",{cx:n[0].x,cy:n[0].y,r:"100%",style:{opacity:0},onMouseDown:Y,onMouseMove:o=>{e&&f&&I(_,o),e||h(o)},onContextMenu:o=>o.preventDefault()});return H("g",{children:[(a||m===d.CREATE)&&U(!1),v(V,{annotationSettings:i,coordinates:n,isSelected:E,annotationMode:m,pageToStageOffset:w,style:M,svgScale:s,onIsDraggingStateChanged:p,onMouseDown:Y,onMouseMove:h}),f&&U(!0),E&&i.canEdit&&G(),E&&m!==d.CREATE&&q()]})};export{re as default};

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

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

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

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

package/dist/Canvas/Canvas.d.ts

@@ -23,8 +23,9 @@ type CanvasProps = {
     onNotification?: (notification: SIANotification) => void;
     onRequestNewAnnoId: () => number;
     onSelectAnnotation: (annotation?: Annotation) => void;
+    onSetIsImageJunk: (newJunkState: boolean) => void;
     onSetSelectedTool: (tool: AnnotationTool) => void;
     onShouldDeleteAnno: (internalAnnoId: number) => void;
 };
-declare const Canvas: ({ annotations, annotationSettings, defaultLabelId, image, isFullscreen, isImageJunk, isPolygonSelectionMode, polygonOperationResult, possibleLabels, preventScrolling, selectedAnnotation, selectedAnnoTool, toolbarHeight, uiConfig, onAnnoCreated, onAnnoCreationFinished, onAnnoChanged, onAnnoEditing, onNotification, onRequestNewAnnoId, onSelectAnnotation, onSetSelectedTool, onShouldDeleteAnno, }: CanvasProps) => import("react/jsx-runtime").JSX.Element;
+declare const Canvas: ({ annotations, annotationSettings, defaultLabelId, image, isFullscreen, isImageJunk, isPolygonSelectionMode, polygonOperationResult, possibleLabels, preventScrolling, selectedAnnotation, selectedAnnoTool, toolbarHeight, uiConfig, onAnnoCreated, onAnnoCreationFinished, onAnnoChanged, onAnnoEditing, onNotification, onRequestNewAnnoId, onSelectAnnotation, onSetIsImageJunk, onSetSelectedTool, onShouldDeleteAnno, }: CanvasProps) => import("react/jsx-runtime").JSX.Element;
 export default Canvas;

package/dist/Canvas/Canvas.js

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

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{jsxs as F,jsx as C}from"react/jsx-runtime";import{useState as i,useRef as G,useEffect as l}from"react";import R from"./Canvas.js";import{noAnnos as E}from"./siaDummyData.js";import P from"./ToolBar.js";import{CANVAS_UI_CONFIG_UPDATE as A,CANVAS_SVG_UPDATE as w}from"./types/canvasActions.js";import{EDIT_NODE_RADIUS as W,EDIT_STROKE_WIDTH as K,SHOW_ANNO_STATS as M,SHOW_LABEL_INFO as V,SHOW_ANNO_DETAILS as H,SET_FULLSCREEN as J}from"./types/toolbarEvents.js";const Z=e=>{const[k,m]=i(""),[s,f]=i(),[S,g]=i(E),[c,I]=i(0),[T,h]=i(),[x,d]=i(!1),[a,o]=i({nodeRadius:4,strokeWidth:4,annoDetails:{visible:!1},labelInfo:{visible:!1},annoStats:{visible:!1},layoutOffset:{left:20,top:0,bottom:5,right:5},imgBarVisible:!0,imgLabelInputVisible:!1,centerCanvasInContainer:!0,maxCanvas:!0}),b=G();l(()=>{v()},[e.layoutUpdate]),l(()=>{},[S]),l(()=>{e.annos?g(e.annos):g({...E})},[e.annos]),l(()=>{typeof e.fullscreen=="boolean"&&s!==e.fullscreen&&f(e.fullscreen)},[e.fullscreen]),l(()=>{s!==void 0&&O(s)},[s]),l(()=>{d(!0),o({...a,...e.uiConfig})},[e.uiConfig]),l(()=>{x?d(!1):e.onCanvasEvent&&e.onCanvasEvent(A,a)},[a]);const v=()=>{I(c+1)},B=(n,t,u)=>{e.onAnnoEvent&&e.onAnnoEvent(n,t,u)},D=n=>{e.onNotification&&e.onNotification(n)},_=n=>{e.onCanvasKeyDown&&e.onCanvasKeyDown(n)},r=(n,t)=>{switch(n){case w:h(t);break;case A:o({...a,...t});break}e.onCanvasEvent&&e.onCanvasEvent(n,t)},y=n=>{e.onGetFunction&&e.onGetFunction(n)},N=(n,t)=>{e.onAnnoSaveEvent&&e.onAnnoSaveEvent(n,t)},O=n=>{n?(m("sia-fullscreen"),o({...a,layoutOffset:{...a.layoutOffset,left:50,top:5}}),v()):(m(""),o({...a,layoutOffset:{...a.layoutOffset,left:20,top:0}}),v())},U=()=>{f(!s)},L=(n,t)=>{switch(n){case J:U();break;case H:o({...a,annoDetails:{...a.annoDetails,visible:!a.annoDetails.visible}});break;case V:o({...a,labelInfo:{...a.labelInfo,visible:!a.labelInfo.visible}});break;case M:o({...a,annoStats:{...a.annoStats,visible:!a.annoStats.visible}});break;case K:o({...a,strokeWidth:t});break;case W:o({...a,nodeRadius:t});break}e.onToolBarEvent&&e.onToolBarEvent(n,t)};return e.canvasConfig.tools,F("div",{className:`sia-app ${k}`,ref:b,children:[C(R,{container:b,onAnnoEvent:(n,t,u)=>B(n,t,u),onNotification:n=>D(n),onKeyDown:n=>_(n),onCanvasEvent:(n,t)=>r(n,t),onGetAnnoExample:n=>e.onGetAnnoExample?e.onGetAnnoExample(n):{},onGetFunction:n=>y(n),onAnnoSaveEvent:n=>N(n),annoSaveResponse:e.annoSaveResponse,canvasConfig:e.canvasConfig,uiConfig:a,annos:S,annoTaskId:e.annoTaskId,imageMeta:e.imageMeta,imageBlob:e.imageBlob,possibleLabels:e.possibleLabels,exampleImg:e.exampleImg,lockedAnnos:e.lockedAnnos,layoutUpdate:c,selectedTool:e.selectedTool,isJunk:e.isJunk,blocked:e.blockCanvas,defaultLabel:e.defaultLabel,preventScrolling:e.preventScrolling,isImageChanging:e.isImageChanging,isStaticPosition:e.isStaticPosition,fixedImageSize:e.fixedImageSize,samPoints:e.samPoints||[],onSamPointClick:e.onSamPointClick,samBBox:e.samBBox||null,onUpdateSamBBox:e.onUpdateSamBBox}),C(P,{onToolBarEvent:(n,t)=>L(n,t),imageMeta:e.imageMeta,layoutUpdate:c,svg:T,active:{isJunk:e.isJunk,selectedTool:e.selectedTool,fullscreen:e.fullscreenMode},enabled:e.toolbarEnabled,canvasConfig:e.canvasConfig,uiConfig:a,filter:e.filter,onImgageSearchClicked:()=>{if(e.onImgageSearchClicked)return e.onImgageSearchClicked()}})]})};export{Z as default};
+import{jsx as l,jsxs as q}from"react/jsx-runtime";import{useRef as cn,useState as s,useEffect as u}from"react";import{CSpinner as z}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:H,allowedTools:S,polygonOperationResult:c={annotationsToDelete:[],polygonsToCreate:[]},annotationSettings:x,uiConfig:g,defaultAnnotationTool:w,defaultLabelId:M,image:I,isLoading:y=!1,isPolygonSelectionMode:b=!1,initialAnnotations:_=[],initialImageLabelIds:C=[],initialIsImageJunk:V=!1,possibleLabels:k,onAnnoCreated:G=(f,m)=>{},onAnnoCreationFinished:K=(f,m)=>{},onAnnoChanged:Q=(f,m)=>{},onAnnoDeleted:E=(f,m)=>{},onImageLabelsChanged:X=()=>{},onIsImageJunk:Y=()=>{},onNotification:Z=f=>{},onSelectAnnotation:$=f=>{}})=>{const m=cn(null),[D,p]=s(),[i,r]=s([]),[j,R]=s(),[O,nn]=s(),[d,h]=s(),[N,B]=s(w!==void 0?w:un.Point),[en,Sn]=s({height:"100%"}),[tn,F]=s(C),[J,L]=s(),[T,on]=s(!1),[U,P]=s([]),v=n=>{const e=i.findIndex(a=>a.internalId===n),t=[...i],o=t.splice(e,1)[0];r(t),h(void 0),E(o,t)},sn=()=>{d!==void 0&&v(d.internalId)},an=()=>{let n=0;const e=_.map(t=>({...t,internalId:n++,mode:mn.VIEW,selectedNode:1,status:t.status,annoTime:t.annoTime!==void 0?t.annoTime:0}));P([...Array(n).keys()]),r(e)},rn=()=>{let n=0;for(;U.includes(n);)n++;const e=[...U];return e.push(n),P(e),n},dn=n=>{const e=[...i],t=e.findIndex(A=>A.internalId===(d==null?void 0:d.internalId));if(t===-1)return;const o=e.splice(t,1)[0];E(o,e);const a=[...e];a.push(n),r(a),h(n)},W=n=>{L(n),Y(n)};u(()=>{I===void 0&&(r([]),h(void 0))},[I]),u(()=>{L(V),!(I!==void 0||_.length===0)&&an()},[_]),u(()=>{F(C)},[C]),u(()=>{const e={...{canCreate:!0,canEdit:!0,canHaveMultipleLabels:!1,canLabel:!0,minimalArea:250},...x};R(e)},[x]),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 p(n);p(S)},[S]);const ln={position:"fixed",top:0,left:0,zIndex:6e3,backgroundColor:"#ffff",width:"100%",height:"100%",padding:15};return D===void 0?l("div",{className:"d-flex justify-content-center",children:l(z,{color:"primary",style:{width:"5rem",height:"5rem"}})}):q("div",{style:{...T?ln:{},width:"100%",height:"100%"},children:[l("div",{ref:m,style:{marginBottom:10},children:l(In,{annotationSettings:j,allowedTools:D,additionalButtons:H,isDisabled:y,isFullscreen:T,isImageJunk:J,imageLabelIds:tn,possibleLabels:k,selectedTool:N,onImageLabelsChanged:n=>{F(n),X(n)},onSetIsFullscreen:on,onSetIsImageJunk:W,onSetSelectedTool:B,onShouldDeleteSelectedAnnotation:sn})}),q("div",{style:en,children:[y&&l("div",{className:"d-flex justify-content-center",children:l(z,{color:"primary",style:{width:"5rem",height:"5rem",marginTop:200}})}),I&&i&&l(fn,{annotations:i,annotationSettings:j,defaultLabelId:M,image:I,isFullscreen:T,isImageJunk:J,isPolygonSelectionMode:b,selectedAnnotation:d,selectedAnnoTool:N,polygonOperationResult:c,possibleLabels:k,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(b&&(c==null?void 0:c.annotationsToDelete)!==void 0&&(c.annotationsToDelete.push(d),c.annotationsToDelete.forEach(o=>{v(o.internalId);const a=t.findIndex(A=>A.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:dn,onSetIsImageJunk:W,onNotification:Z,onRequestNewAnnoId:rn,onSelectAnnotation:n=>{h(n),$(n)},onSetSelectedTool:B,onShouldDeleteAnno:v})]})]})};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,13 +1,5 @@
 export * from './types';
-export { default as Canvas } from './Canvas.jsx';
+export { default as IconButton } from './IconButton';
 export { default as Sia } from './Sia';
-export { default as Sia2 } from './Sia2';
-export { default as dummyData } from './siaDummyData';
 export { default as transform } from './utils/transform';
-export { default as annoConversion } from './utils/annoConversion';
-export { default as canvasActions } from './types/canvasActions';
 export { default as TagLabel } from './Toolbar/ToolbarItems/ImageToolItems/TagLabel';
-export { default as tools } from './types/tools';
-export { default as filterTools } from './filterTools.js';
-export { default as toolbarEvents } from './types/toolbarEvents';
-export { default as notificationType } from './types/notificationType';

package/dist/index.js

@@ -1 +1 @@
-/* empty css                                             *//* empty css        */import{default as e}from"./Canvas.js";import{default as s}from"./Sia.js";import{default as m}from"./Sia2.js";import{default as d}from"./siaDummyData.js";import{default as x}from"./utils/transform.js";import{default as i}from"./utils/annoConversion.js";import{default as c}from"./types/canvasActions.js";import{default as b}from"./Toolbar/ToolbarItems/ImageToolItems/TagLabel.js";import{default as C}from"./types/tools.js";import{default as g}from"./filterTools.js";import{default as D}from"./types/toolbarEvents.js";import{default as L}from"./types/notificationType.js";export{e as Canvas,s as Sia,m as Sia2,b as TagLabel,i as annoConversion,c as canvasActions,d as dummyData,g as filterTools,L as notificationType,D as toolbarEvents,C as tools,x 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/KeyAction.d.ts

@@ -16,6 +16,7 @@ declare enum KeyAction {
     PASTE_ANNOTATION = 14,
     RECREATE_ANNO = 15,
     DELETE_ANNO_IN_CREATION = 16,
-    TOGGLE_ANNO_COMMENT_INPUT = 17
+    TOGGLE_ANNO_COMMENT_INPUT = 17,
+    TOGGLE_IMAGE_JUNK = 18
 }
 export default KeyAction;

package/dist/models/KeyAction.js

@@ -1 +1 @@
-var _=(E=>(E[E.EDIT_LABEL=0]="EDIT_LABEL",E[E.DELETE_ANNO=1]="DELETE_ANNO",E[E.ENTER_ANNO_ADD_MODE=2]="ENTER_ANNO_ADD_MODE",E[E.LEAVE_ANNO_ADD_MODE=3]="LEAVE_ANNO_ADD_MODE",E[E.UNDO=4]="UNDO",E[E.REDO=5]="REDO",E[E.TRAVERSE_ANNOS=6]="TRAVERSE_ANNOS",E[E.TRAVERSE_ANNOS_BACKWARDS=7]="TRAVERSE_ANNOS_BACKWARDS",E[E.CAM_MOVE_UP=8]="CAM_MOVE_UP",E[E.CAM_MOVE_DOWN=9]="CAM_MOVE_DOWN",E[E.CAM_MOVE_LEFT=10]="CAM_MOVE_LEFT",E[E.CAM_MOVE_RIGHT=11]="CAM_MOVE_RIGHT",E[E.CAM_MOVE_STOP=12]="CAM_MOVE_STOP",E[E.COPY_ANNOTATION=13]="COPY_ANNOTATION",E[E.PASTE_ANNOTATION=14]="PASTE_ANNOTATION",E[E.RECREATE_ANNO=15]="RECREATE_ANNO",E[E.DELETE_ANNO_IN_CREATION=16]="DELETE_ANNO_IN_CREATION",E[E.TOGGLE_ANNO_COMMENT_INPUT=17]="TOGGLE_ANNO_COMMENT_INPUT",E))(_||{});export{_ as default};
+var _=(E=>(E[E.EDIT_LABEL=0]="EDIT_LABEL",E[E.DELETE_ANNO=1]="DELETE_ANNO",E[E.ENTER_ANNO_ADD_MODE=2]="ENTER_ANNO_ADD_MODE",E[E.LEAVE_ANNO_ADD_MODE=3]="LEAVE_ANNO_ADD_MODE",E[E.UNDO=4]="UNDO",E[E.REDO=5]="REDO",E[E.TRAVERSE_ANNOS=6]="TRAVERSE_ANNOS",E[E.TRAVERSE_ANNOS_BACKWARDS=7]="TRAVERSE_ANNOS_BACKWARDS",E[E.CAM_MOVE_UP=8]="CAM_MOVE_UP",E[E.CAM_MOVE_DOWN=9]="CAM_MOVE_DOWN",E[E.CAM_MOVE_LEFT=10]="CAM_MOVE_LEFT",E[E.CAM_MOVE_RIGHT=11]="CAM_MOVE_RIGHT",E[E.CAM_MOVE_STOP=12]="CAM_MOVE_STOP",E[E.COPY_ANNOTATION=13]="COPY_ANNOTATION",E[E.PASTE_ANNOTATION=14]="PASTE_ANNOTATION",E[E.RECREATE_ANNO=15]="RECREATE_ANNO",E[E.DELETE_ANNO_IN_CREATION=16]="DELETE_ANNO_IN_CREATION",E[E.TOGGLE_ANNO_COMMENT_INPUT=17]="TOGGLE_ANNO_COMMENT_INPUT",E[E.TOGGLE_IMAGE_JUNK=18]="TOGGLE_IMAGE_JUNK",E))(_||{});export{_ as default};

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/dist/stories/Canvas/Canvas.stories.d.ts

@@ -9,7 +9,7 @@ export declare const ActionsData: {
 };
 declare const meta: {
     title: string;
-    component: ({ annotations, annotationSettings, defaultLabelId, image, isFullscreen, isImageJunk, isPolygonSelectionMode, polygonOperationResult, possibleLabels, preventScrolling, selectedAnnotation, selectedAnnoTool, toolbarHeight, uiConfig, onAnnoCreated, onAnnoCreationFinished, onAnnoChanged, onAnnoEditing, onNotification, onRequestNewAnnoId, onSelectAnnotation, onSetSelectedTool, onShouldDeleteAnno, }: {
+    component: ({ annotations, annotationSettings, defaultLabelId, image, isFullscreen, isImageJunk, isPolygonSelectionMode, polygonOperationResult, possibleLabels, preventScrolling, selectedAnnotation, selectedAnnoTool, toolbarHeight, uiConfig, onAnnoCreated, onAnnoCreationFinished, onAnnoChanged, onAnnoEditing, onNotification, onRequestNewAnnoId, onSelectAnnotation, onSetIsImageJunk, onSetSelectedTool, onShouldDeleteAnno, }: {
         annotations?: Annotation[];
         annotationSettings: AnnotationSettings;
         defaultLabelId?: number;
@@ -31,6 +31,7 @@ declare const meta: {
         onNotification?: (notification: import('../..').SIANotification) => void;
         onRequestNewAnnoId: () => number;
         onSelectAnnotation: (annotation?: Annotation) => void;
+        onSetIsImageJunk: (newJunkState: boolean) => void;
         onSetSelectedTool: (tool: AnnotationTool) => void;
         onShouldDeleteAnno: (internalAnnoId: number) => void;
     }) => import("react/jsx-runtime").JSX.Element;

package/dist/utils/KeyMapper.js

@@ -1 +1 @@
-var a=Object.defineProperty;var s=(t,i,r)=>i in t?a(t,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[i]=r;var c=(t,i,r)=>s(t,typeof i!="symbol"?i+"":i,r);import e from"../models/KeyAction.js";class n{constructor(i=void 0){c(this,"isControlDown");c(this,"keyActionHandler");this.isControlDown=!1,this.keyActionHandler=i}keyDown(i,r=!1,A){switch(i){case"Enter":this.triggerKeyAction(e.EDIT_LABEL);break;case"Delete":this.triggerKeyAction(e.DELETE_ANNO);break;case"Backspace":this.triggerKeyAction(e.DELETE_ANNO);break;case"z":A&&this.triggerKeyAction(e.UNDO);break;case"y":A&&this.triggerKeyAction(e.REDO);break;case"Tab":r?this.triggerKeyAction(e.TRAVERSE_ANNOS_BACKWARDS):this.triggerKeyAction(e.TRAVERSE_ANNOS);break;case"w":this.triggerKeyAction(e.CAM_MOVE_UP);break;case"s":this.triggerKeyAction(e.CAM_MOVE_DOWN);break;case"a":this.triggerKeyAction(e.CAM_MOVE_LEFT);break;case"d":this.triggerKeyAction(e.CAM_MOVE_RIGHT);break;case"e":this.triggerKeyAction(e.RECREATE_ANNO);break;case"c":A?this.triggerKeyAction(e.COPY_ANNOTATION):this.triggerKeyAction(e.TOGGLE_ANNO_COMMENT_INPUT);break;case"v":A&&this.triggerKeyAction(e.PASTE_ANNOTATION);break;case"Escape":this.triggerKeyAction(e.DELETE_ANNO_IN_CREATION);break}}triggerKeyAction(i){this.keyActionHandler&&this.keyActionHandler(i)}}export{n as default};
+var a=Object.defineProperty;var s=(t,i,r)=>i in t?a(t,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[i]=r;var c=(t,i,r)=>s(t,typeof i!="symbol"?i+"":i,r);import e from"../models/KeyAction.js";class n{constructor(i=void 0){c(this,"isControlDown");c(this,"keyActionHandler");this.isControlDown=!1,this.keyActionHandler=i}keyDown(i,r=!1,A){switch(i){case"Enter":this.triggerKeyAction(e.EDIT_LABEL);break;case"Delete":this.triggerKeyAction(e.DELETE_ANNO);break;case"Backspace":this.triggerKeyAction(e.DELETE_ANNO);break;case"z":A&&this.triggerKeyAction(e.UNDO);break;case"y":A&&this.triggerKeyAction(e.REDO);break;case"Tab":r?this.triggerKeyAction(e.TRAVERSE_ANNOS_BACKWARDS):this.triggerKeyAction(e.TRAVERSE_ANNOS);break;case"w":this.triggerKeyAction(e.CAM_MOVE_UP);break;case"s":this.triggerKeyAction(e.CAM_MOVE_DOWN);break;case"a":this.triggerKeyAction(e.CAM_MOVE_LEFT);break;case"d":this.triggerKeyAction(e.CAM_MOVE_RIGHT);break;case"e":this.triggerKeyAction(e.RECREATE_ANNO);break;case"j":this.triggerKeyAction(e.TOGGLE_IMAGE_JUNK);break;case"c":A?this.triggerKeyAction(e.COPY_ANNOTATION):this.triggerKeyAction(e.TOGGLE_ANNO_COMMENT_INPUT);break;case"v":A&&this.triggerKeyAction(e.PASTE_ANNOTATION);break;case"Escape":this.triggerKeyAction(e.DELETE_ANNO_IN_CREATION);break}}triggerKeyAction(i){this.keyActionHandler&&this.keyActionHandler(i)}}export{n as default};

package/dist/utils/mouse.js

@@ -1 +1 @@
-function a(e,t){const o=n(e,t);return{x:o.x/t.scale-t.translateX,y:o.y/t.scale-t.translateY}}function n(e,t){return{x:e.pageX-t.left,y:e.pageY-t.top}}export{a as getMousePosition,n as getMousePositionAbs};
+const d=(o,t,e,s)=>{const a={x:o.pageX,y:o.pageY},n={x:a.x-t.x,y:a.y-t.y},x={x:n.x/e,y:n.y/e};return{x:x.x-s.x,y:x.y-s.y}},y={getAntiScaledMouseStagePosition:d};export{y as default};

package/dist/utils/siaIcons.js

@@ -1,12 +1,12 @@
-import{jsx as n}from"react/jsx-runtime";import"react";function r(){return n("svg",{version:"1.1",id:"Linie",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1190.549 841.891",width:"17px",children:n("path",{fill:"currentColor",d:`M986.331,109.582c7.141-10.669,28.926-51.179-2.968-85.299S891.011,8.972,891.011,8.972L539.125,133.474
+import{jsx as n}from"react/jsx-runtime";function o(){return n("svg",{version:"1.1",id:"Linie",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1190.549 841.891",width:"17px",children:n("path",{fill:"currentColor",d:`M986.331,109.582c7.141-10.669,28.926-51.179-2.968-85.299S891.011,8.972,891.011,8.972L539.125,133.474
                 L63.239,302.022c-21.503,7.998-53.586,30.072-60.956,61.716s-2.116,58.538,22.414,96.79S211.33,752.213,228.564,777.28
                 c26.453,36.868,62.16,58.042,105.507,57.154s365.665-7.485,365.665-7.485l331.7-8.325l89.453-2.293c0,0,70.998-7.179,69.861-60.287
                 c-1.135-53.108-74.618-62.721-74.618-62.721s-733.215,15.553-749.148,15.576c-22.688,0.201-45.355-15.278-54.146-28.928
                 s-175.79-272.956-175.79-272.956l600.587-212.338c0,0-73.179,67.087-99.315,100.041s-30.56,74.565-5.053,95.237
-                c31.188,24.081,91.974-3.708,123.127-39.312C782.35,323.912,979.191,120.251,986.331,109.582z`})})}function t(){return n("svg",{version:"1.1",id:"Linie",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1190.549 841.891",width:"17px",children:n("path",{fill:"none",stroke:"currentColor",strokeWidth:"120",strokeMiterlimit:"10",d:`M929.775,710.655
+                c31.188,24.081,91.974-3.708,123.127-39.312C782.35,323.912,979.191,120.251,986.331,109.582z`})})}function r(){return n("svg",{version:"1.1",id:"Linie",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1190.549 841.891",width:"17px",children:n("path",{fill:"none",stroke:"currentColor",strokeWidth:"120",strokeMiterlimit:"10",d:`M929.775,710.655
                 c0,23.386-19.134,42.52-42.52,42.52H278.991c-23.386,0-42.52-19.134-42.52-42.52V102.392c0-23.386,19.134-42.52,42.52-42.52
-                h608.264c23.386,0,42.52,19.134,42.52,42.52V710.655z`})})}function c(){return n("svg",{version:"1.1",id:"Linie",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1190.549 841.891",width:"17px",children:n("path",{fill:"none",stroke:"currentColor",strokeWidth:"120",strokeMiterlimit:"10",d:`M342.327,769.938
+                h608.264c23.386,0,42.52,19.134,42.52,42.52V710.655z`})})}function t(){return n("svg",{version:"1.1",id:"Linie",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1190.549 841.891",width:"17px",children:n("path",{fill:"none",stroke:"currentColor",strokeWidth:"120",strokeMiterlimit:"10",d:`M342.327,769.938
                 c-23.379,0.548-52.922-15.056-65.65-34.674L65.479,409.738c-12.729-19.619-5.085-41.998,16.984-49.732L917.331,67.421
                 c22.07-7.734,26.86-0.275,10.645,16.576L691.761,329.475c-16.216,16.852-14.503,42.542,3.807,57.092l425.212,337.901
-                c18.31,14.549,14.16,26.901-9.219,27.449L342.327,769.938z`})})}function e(){return n("svg",{version:"1.1",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1190.549 841.891",width:"17px",children:n("path",{fill:"currentColor",d:`M748.197,408.286c0,151.355-122.699,274.058-274.059,274.058c-151.357,0-274.057-122.703-274.057-274.058
-                c0-151.356,122.7-274.057,274.057-274.057C625.497,134.229,748.197,256.929,748.197,408.286z`})})}export{t as bBoxIcon,r as lineIcon,e as pointIcon,c as polygonIcon};
+                c18.31,14.549,14.16,26.901-9.219,27.449L342.327,769.938z`})})}function c(){return n("svg",{version:"1.1",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1190.549 841.891",width:"17px",children:n("path",{fill:"currentColor",d:`M748.197,408.286c0,151.355-122.699,274.058-274.059,274.058c-151.357,0-274.057-122.703-274.057-274.058
+                c0-151.356,122.7-274.057,274.057-274.057C625.497,134.229,748.197,256.929,748.197,408.286z`})})}export{r as bBoxIcon,o as lineIcon,c as pointIcon,t as polygonIcon};

package/dist/utils/transform.js

@@ -1 +1 @@
-function L(r,o,t,n){switch(t){case"bBox":const x=o.width*r.w,c=o.height*r.h,y=n.x+o.width*r.x-x/2,h=n.y+o.height*r.y-c/2;return[{x:y,y:h},{x:y+x,y:h},{x:y+x,y:h+c},{x:y,y:h+c}];case"point":return[{x:n.x+o.width*r.x,y:n.y+o.height*r.y}];case"line":case"polygon":return r.map(i=>({x:n.x+o.width*i.x,y:n.y+o.height*i.y}))}}function p(r,o,t,n={x:0,y:0}){const x=o.width-2*n.x,c=o.height-2*n.y;switch(t){case"bBox":const y=r.map(s=>s.x),h=r.map(s=>s.y),i=Math.min(...y)-n.x,M=Math.max(...y)-n.x,u=Math.min(...h)-n.y,d=Math.max(...h)-n.y,e=M-i,a=d-u,b=i+e/2,B=u+a/2;return{x:b/x,y:B/c,w:e/x,h:a/c};case"point":return{x:(r[0].x-n.x)/x,y:(r[0].y-n.y)/c};case"line":case"polygon":return r.map(s=>({x:(s.x-n.x)/x,y:(s.y-n.y)/c}))}}function P(r){const o=r.map(c=>c.x),t=r.map(c=>c.y),n={x:Math.min(...o),y:Math.min(...t)},x={x:Math.max(...o),y:Math.max(...t)};return[n,x]}function X(r,o,t,n){const x=p(r,o,t);switch(t){case"bBox":return Math.abs(x.w*x.h)*n.width*n.height;case"line":case"point":return;case"polygon":let c=0;if(x.length>2){let y=x.length-1;for(let h=0;h<x.length;h++)c=c+(x[y].x+x[h].x)*(x[y].y-x[h].y),y=h}return Math.abs(c/2)*n.width*n.height;default:return}}function Y(r,o,t){return r.map(n=>({x:n.x+o,y:n.y+t}))}function w(r,o){switch(o){case"bBox":return r;case"point":case"line":case"polygon":let t=0,n=0,x=1/0,c=1/0;return r.forEach(y=>{y.x>t&&(t=y.x),y.y>n&&(n=y.y),y.x<x&&(x=y.x),y.y<c&&(c=y.y)}),[{x,y:c},{x:t,y:c},{x,y:n},{x:t,y:n}]}}function l(r,o){let t;switch(o){case"point":return r[0];case"line":case"polygon":case"bBox":t=w(r,o);const n=t[1].x-t[0].x,x=t[3].y-t[0].y;return{x:t[0].x+n/2,y:t[0].y+x/2}}}function m(r){let o=1/0,t=[];return r.forEach(n=>{n.x<o?(o=n.x,t=[],t.push(n)):n.x===o&&t.push(n)}),t}function A(r){let o=1/0,t=[];return r.forEach(n=>{n.y<o?(o=n.y,t=[],t.push(n)):n.y===o&&t.push(n)}),t}function I(r,o,t){const n=o.width-2*t.x,x=o.height-2*t.y;return r.map(y=>{let h=y.x,i=y.y;return y.x<=t.x?h=t.x:y.x>n+t.x&&(h=n+t.x),y.y<t.y?i=t.y:y.y>x+t.y&&(i=x+t.y),{x:h,y:i}})}function E(r,o,t){return t=t*(Math.PI/180),r.map(x=>({x:Math.round(Math.cos(t)*(x.x-o.x)-Math.sin(t)*(x.y-o.y)+o.x),y:Math.round(Math.sin(t)*(x.x-o.x)+Math.cos(t)*(x.y-o.y)+o.y)}))}function D(r,o,t){const n=t.width/o.width,x=t.height/o.height;return r.map(c=>({x:parseInt(c.x*n),y:parseInt(c.y*x)}))}const H={toSia:L,toBackend:p,getMinMaxPoints:P,getArea:X,move:Y,getBox:w,getCenter:l,getMostLeftPoint:m,getTopPoint:A,correctAnnotation:I,rotateAnnotation:E,resizeAnnoData:D};export{I as correctAnnotation,H as default,X as getArea,w as getBox,l as getCenter,P as getMinMaxPoints,m as getMostLeftPoint,A as getTopPoint,Y as move,D as resizeAnnoData,E as rotateAnnotation,p as toBackend,L as toSia};
+const c=(r,o,t)=>{const e=t.x/o.x;return r.map(s=>({x:s.x*e,y:s.y*e}))},d=(r,o)=>r.map(e=>({x:e.x*o.x,y:e.y*o.y})),y=(r,o,t)=>{const e=d(r,o);return c(e,o,t)},x=(r,o)=>r.map(e=>({x:e.x/o,y:e.y/o})),C=(r,o,t)=>x(r,o).map(n=>(n.x<0&&(n.x=0),n.y<0&&(n.y=0),n.x>t.x&&(n.x=t.x),n.y>t.y&&(n.y=t.y),n)).map(n=>({x:n.x/t.x,y:n.y/t.y})),g=(r,o,t,e)=>{const a={x:r.x+e.x,y:r.y+e.y},s={x:a.x*t,y:a.y*t};return{x:s.x+o.x,y:s.y+o.y}},u=r=>{let o=1/0,t=[];return r.forEach(e=>{e.x<o?(o=e.x,t=[],t.push(e)):e.x===o&&t.push(e)}),t},m=r=>{let o=1/0,t=[];return r.forEach(e=>{e.y<o?(o=e.y,t=[],t.push(e)):e.y===o&&t.push(e)}),t},f={convertImageCoordinatesToStage:c,convertPercentagedCoordinatesToImage:d,convertPercentagedCoordinatesToStage:y,convertStageCoordinatesToImage:x,convertStageCoordinatesToPercentaged:C,convertStageToPage:g,getMostLeftPoints:u,getTopPoint:m};export{f as default,u as getMostLeftPoints,m as getTopPoint};

package/dist/utils/windowViewport.d.ts

@@ -0,0 +1,22 @@
+import { Point, Vector2 } from '../types';
+declare const _default: {
+    getViewportCoordinates: (svgTranslation: Vector2, canvasSize: Vector2, svgScale: number, pointInViewport: Point) => {
+        window: {
+            xMin: number;
+            xMax: number;
+            yMin: number;
+            yMax: number;
+        };
+        viewport: {
+            xMin: number;
+            xMax: number;
+            yMin: number;
+            yMax: number;
+        };
+        vX: number;
+        vY: number;
+        scaleX: number;
+        scaleY: number;
+    };
+};
+export default _default;

package/dist/utils/windowViewport.js

@@ -1 +1 @@
-function r(i,n){const t={xMin:-1*n.translateX,xMax:-1*n.translateX+n.width/n.scale,yMin:-1*n.translateY,yMax:-1*n.translateY+n.height/n.scale},a={xMin:0,xMax:n.width,yMin:0,yMax:n.height},x=(a.xMax-a.xMin)/(t.xMax-t.xMin),e=(a.yMax-a.yMin)/(t.yMax-t.yMin),M=a.xMin+(i.x-t.xMin)*x,o=a.yMin+(i.y-t.yMin)*e;return{window:t,viewport:a,vX:M,vY:o,scaleX:x,scaleY:e}}function y(i,n,t){const a=n.scale;let x={x:0,y:0};return x.x=a/t*(i.x+n.translateX)-i.x,x.y=a/t*(i.y+n.translateY)-i.y,x}export{r as getViewportCoordinates,y as getZoomTranslation};
+const d=(y,n,o,t)=>{const x={xMin:-1*y.x,xMax:-1*y.x+n.x/o,yMin:-1*y.y,yMax:-1*y.y+n.y/o},M={xMin:0,xMax:n.x,yMin:0,yMax:n.y},i=(M.xMax-M.xMin)/(x.xMax-x.xMin),c=(M.yMax-M.yMin)/(x.yMax-x.yMin),w=M.xMin+(t.x-x.xMin)*i,e=M.yMin+(t.y-x.yMin)*c;return{window:x,viewport:M,vX:w,vY:e,scaleX:i,scaleY:c}},r={getViewportCoordinates:d};export{r as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lost-sia",
-  "version": "2.0.1-alpha12",
+  "version": "2.0.1-alpha14",
   "description": "Single Image Annotation Tool",
   "license": "MIT",
   "repository": "l3p-cv/lost-sia",
@@ -25,13 +25,12 @@
       "require": "./dist/index.js"
     },
     "./utils": {
-      "development": "./src/utils/index.js",
       "types": "./dist/utils/index.d.ts",
       "import": "./dist/utils/index.js",
       "require": "./dist/utils/index.js"
     },
     "./models": {
-      "development": "./src/models/index.js",
+      "bun": "./src/models/index.js",
       "types": "./dist/models/index.d.ts",
       "import": "./dist/models/index.js",
       "require": "./dist/models/index.js"
@@ -54,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",
@@ -74,6 +74,8 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.39.1",
     "@microsoft/api-extractor": "^7.52.13",
     "@storybook/addon-docs": "^9.1.10",
     "@storybook/addon-links": "^9.0.12",
@@ -85,16 +87,16 @@
     "@typescript-eslint/parser": "^8.46.1",
     "@vitejs/plugin-react": "^4.3.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.0.1",
+    "eslint": "^9.39.1",
     "eslint-config-standard": "^17.1.0",
     "eslint-config-standard-react": "^13.0.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.6.0",
-    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-promise": "^7.2.1",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-storybook": "^9.1.12",
-    "glob": "^10.4.5",
+    "eslint-plugin-storybook": "^10.0.7",
+    "glob": "^11.0.3",
     "lodash-es": "^4.17.21",
     "prettier": "^3.3.3",
     "react-redux": "^9.1.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