lost-sia
Version:
Single Image Annotation Tool
2 lines (1 loc) • 2.86 kB
JavaScript
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};