lost-sia/dist/Annotation/Polygon.js

Single Image Annotation Tool

import{jsx as n,jsxs as N}from"react/jsx-runtime";import{Component as M}from"react";import l from"./Edge.js";import u from"./Node.js";import D from"./InfSelectionArea.js";import{move as g}from"../utils/transform.js";import{ANNO_MOVED as f,ANNO_EDITED as A,ANNO_CREATED_NODE as w,ANNO_CREATED_FINAL_NODE as E,ANNO_ADDED_NODE as y,ANNO_REMOVED_SPECIFIC_NODE as v,ANNO_REMOVED_NODE as S}from"../types/canvasActions.js";/* empty css               */import{CREATE as r,MOVE as a,VIEW as i,EDIT as h,ADD as p}from"../types/modes.js";import{getMousePosition as m}from"../utils/mouse.js";class T extends M{constructor(t){super(t),this.state={anno:void 0}}componentDidMount(){if(this.props.anno.mode===r){const t=this.props.anno.data[0],e={...this.props.anno,data:[{x:t.x,y:t.y},{x:t.x+1,y:t.y}],selectedNode:1};this.setState({anno:e})}else this.setState({anno:{...this.props.anno}})}componentDidUpdate(t){t.anno!==this.props.anno&&this.setState({anno:{...this.props.anno}})}onMouseMove(t){switch(this.state.anno.mode){case a:this.move(t.movementX/this.props.svg.scale,t.movementY/this.props.svg.scale);break}}onMouseUp(t){switch(this.state.anno.mode){case a:t.button===0&&(this.performedAction(this.state.anno,f),this.requestModeChange(this.state.anno,i));break}}onMouseDown(t){switch(this.state.anno.mode){case i:t.button===0&&this.props.isSelected&&this.requestModeChange(this.state.anno,a);break}}onNodeMouseUp(t,e){switch(this.state.anno.mode){case h:this.performedAction(this.state.anno,A),this.requestModeChange(this.state.anno,i);break}}onNodeMouseDown(t,e){switch(this.state.anno.mode){case r:if(t.button===2){let s=[...this.state.anno.data];s.push({x:s[e].x,y:s[e].y});const o={...this.state.anno,data:s,selectedNode:this.state.anno.selectedNode+1};this.setState({anno:o}),this.performedAction(o,w)}break;case i:t.button===0&&this.requestModeChange({...this.state.anno,selectedNode:e},h);break;case p:t.button===0&&this.removeNode(t,e);break}}onNodeMouseMove(t,e){switch(this.state.anno.mode){case r:this.updateAnnoByMousePos(t,e);break;case h:t.stopPropagation(),this.updateAnnoByMousePos(t,e);break}}onNodeDoubleClick(t,e){switch(this.state.anno.mode){case r:this.performedAction(this.state.anno,E);break}}onEdgeMouseDown(t,e){switch(this.state.anno.mode){case p:this.addNode(t,e);break;case i:t.button===0&&this.requestModeChange(this.state.anno,a);break}}performedAction(t,e){this.props.onAction&&this.props.onAction(t,e)}toPolygonStr(t){return t.map(e=>`${e.x},${e.y}`).join(" ")}requestModeChange(t,e){this.props.onModeChangeRequest(t,e)}move(t,e){this.setState({anno:{...this.state.anno,data:g(this.state.anno.data,t,e)}})}addNode(t,e){const s=m(t,this.props.svg);let o=this.state.anno.data.slice(0,e);o.push(s);const d=this.state.anno.data.slice(e),c={...this.state.anno,data:o.concat(d)};this.setState({anno:c}),this.performedAction(c,y)}removeNode(t,e){let s=[...this.state.anno.data];s.splice(e,1);const o={...this.state.anno,data:s};this.setState({anno:o}),this.performedAction(o,v)}removeLastNode(){const t={...this.state.anno,data:[...this.state.anno.data.slice(0,this.state.anno.data.length-1)],selectedNode:this.state.anno.selectedNode-1};this.setState({anno:t}),this.performedAction(t,S)}updateAnnoByMousePos(t,e){const s=m(t,this.props.svg);let o=[...this.state.anno.data];o[e].x=s.x,o[e].y=s.y,this.setState({anno:{...this.state.anno,data:o}})}getResult(){return this.state.anno}renderNodes(){if(!this.props.isSelected)return null;switch(this.state.anno.mode){case a:return null;case h:case r:return n(u,{anno:this.state.anno.data,idx:this.state.anno.selectedNode,style:this.props.style,className:this.props.className,isSelected:this.props.isSelected,mode:this.state.anno.mode,svg:this.props.svg,onMouseDown:(t,e)=>this.onNodeMouseDown(t,e),onMouseUp:(t,e)=>this.onNodeMouseUp(t,e),onDoubleClick:(t,e)=>this.onNodeDoubleClick(t,e),onMouseMove:(t,e)=>this.onNodeMouseMove(t,e)},this.state.anno.selectedNode);default:return this.state.anno.data.map((t,e)=>n(u,{anno:this.state.anno.data,idx:e,style:this.props.style,className:this.props.className,isSelected:this.props.isSelected,mode:this.state.anno.mode,svg:this.props.svg,onMouseDown:(s,o)=>this.onNodeMouseDown(s,o),onMouseUp:(s,o)=>this.onNodeMouseUp(s,o),onDoubleClick:(s,o)=>this.onNodeDoubleClick(s,o),onMouseMove:(s,o)=>this.onNodeMouseMove(s,o)},e))}}renderEdges(){if(!this.props.isSelected)return null;switch(this.state.anno.mode){case i:case p:let t=this.state.anno.data.map((e,s)=>n(l,{anno:this.state.anno.data,idx:s,style:this.props.style,className:this.props.className,isSelected:this.props.isSelected,onMouseDown:(o,d)=>{this.onEdgeMouseDown(o,d)}},s));return t.push(n(l,{anno:this.state.anno.data,closingEdge:!0,idx:0,style:this.props.style,className:this.props.className,isSelected:this.props.isSelected,onMouseDown:(e,s)=>{this.onEdgeMouseDown(e,s)}},t.length)),t;default:return null}}renderPolygon(){return n("polygon",{points:this.toPolygonStr(this.state.anno.data),fill:"none",stroke:"purple",style:this.props.style,className:this.props.className})}renderInfSelectionArea(){switch(this.state.anno.mode){case a:return n(D,{enable:!0,svg:this.props.svg});default:return null}}render(){return this.state.anno?N("g",{onMouseMove:t=>this.onMouseMove(t),onMouseUp:t=>this.onMouseUp(t),onMouseDown:t=>this.onMouseDown(t),children:[this.renderPolygon(),this.renderEdges(),this.renderNodes(),this.renderInfSelectionArea()]}):n("g",{})}}export{T as default};