lost-sia 2.0.1-alpha14 → 2.0.1-alpha15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Canvas/Canvas.js +1 -1
- package/dist/Sia.js +1 -1
- package/package.json +1 -1
- package/src/Canvas/Canvas.tsx +12 -4
- package/src/Sia.tsx +14 -3
package/dist/Canvas/Canvas.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
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
|
|
1
|
+
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/Sia.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
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/package.json
CHANGED
package/src/Canvas/Canvas.tsx
CHANGED
|
@@ -884,8 +884,13 @@ const Canvas = ({
|
|
|
884
884
|
<div
|
|
885
885
|
ref={canvasRef}
|
|
886
886
|
style={{
|
|
887
|
-
|
|
888
|
-
|
|
887
|
+
// use the max available height as a flex child
|
|
888
|
+
flex: '1 1 auto',
|
|
889
|
+
minHeight: 0,
|
|
890
|
+
|
|
891
|
+
// give the max available height to the next child
|
|
892
|
+
display: 'flex',
|
|
893
|
+
flexDirection: 'column',
|
|
889
894
|
}}
|
|
890
895
|
>
|
|
891
896
|
<div
|
|
@@ -964,8 +969,11 @@ const Canvas = ({
|
|
|
964
969
|
|
|
965
970
|
<svg
|
|
966
971
|
ref={svgRef}
|
|
967
|
-
|
|
968
|
-
|
|
972
|
+
style={{
|
|
973
|
+
// use the max available height as a flex child
|
|
974
|
+
flex: '1 1 auto',
|
|
975
|
+
minHeight: 0,
|
|
976
|
+
}}
|
|
969
977
|
onKeyDown={onKeyDown}
|
|
970
978
|
onKeyUp={onKeyUp}
|
|
971
979
|
onMouseMove={(e) => onMouseMove(e.movementX, e.movementY)}
|
package/src/Sia.tsx
CHANGED
|
@@ -90,7 +90,13 @@ const Sia2 = ({
|
|
|
90
90
|
// const [toolbarHeight, setToolbarHeight] = useState<number>(-1);
|
|
91
91
|
|
|
92
92
|
const [outerContainerStyle, setOuterContainerStyle] = useState<CSSProperties>({
|
|
93
|
-
height
|
|
93
|
+
// use the max available height as a flex child
|
|
94
|
+
flex: '1 1 auto',
|
|
95
|
+
minHeight: 0,
|
|
96
|
+
|
|
97
|
+
// give the max available height to the next child
|
|
98
|
+
display: 'flex',
|
|
99
|
+
flexDirection: 'column',
|
|
94
100
|
})
|
|
95
101
|
|
|
96
102
|
const [imageLabelIds, setImageLabelIds] = useState<number[]>(initialImageLabelIds)
|
|
@@ -311,8 +317,13 @@ const Sia2 = ({
|
|
|
311
317
|
<div
|
|
312
318
|
style={{
|
|
313
319
|
...(isFullscreen ? fullscreenStyle : {}),
|
|
314
|
-
|
|
315
|
-
|
|
320
|
+
// use the max available height as a flex child
|
|
321
|
+
flex: '1 1 auto',
|
|
322
|
+
minHeight: 0,
|
|
323
|
+
|
|
324
|
+
// give the max available height to the next child
|
|
325
|
+
display: 'flex',
|
|
326
|
+
flexDirection: 'column',
|
|
316
327
|
}}
|
|
317
328
|
>
|
|
318
329
|
<div
|