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