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