lost-sia
Version:
Single Image Annotation Tool
2 lines (1 loc) • 2.67 kB
JavaScript
import{jsx as o,jsxs as p}from"react/jsx-runtime";import{Component as d}from"react";import c from"./InfSelectionArea.js";import r from"./Node.js";import{CREATE as a,MOVE as s,VIEW as i,EDIT as l,EDIT_LABEL as m}from"../types/modes.js";import{move as u}from"../utils/transform.js";import{ANNO_CREATED as f,ANNO_MOVED as M}from"../types/canvasActions.js";class E extends d{constructor(t){super(t),this.state={anno:void 0}}componentDidMount(t){if(this.props.anno.mode===a){const e=this.props.anno.data[0],n={...this.props.anno,data:[{x:e.x,y:e.y}],selectedNode:0};this.setState({anno:n})}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 s:this.move(t.movementX/this.props.svg.scale,t.movementY/this.props.svg.scale);break}}onMouseUp(t){switch(this.state.anno.mode){case s:t.button===0&&(this.requestModeChange(this.state.anno,i),this.performedAction(this.state.anno,M));break;case a:this.requestModeChange(this.state.anno,i),this.performedAction(this.state.anno,f);break}}onNodeMouseDown(t,e){switch(this.state.anno.mode){case i:t.button===0&&this.props.isSelected&&this.requestModeChange(this.state.anno,s);break}}getResult(){return this.state.anno}performedAction(t,e){this.props.onAction&&this.props.onAction(t,e)}requestModeChange(t,e){this.props.onModeChangeRequest(t,e)}move(t,e){this.setState({anno:{...this.state.anno,data:u(this.state.anno.data,t,e)}})}renderInfSelectionArea(){switch(this.state.anno.mode){case s:return o(c,{enable:!0,svg:this.props.svg});default:return null}}renderNode(){if(!this.props.isSelected)return null;switch(this.state.anno.mode){case m:case s:return null;case l:case a:return o(r,{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),isPoint:!0},this.state.selectedNode);default:return this.state.anno.data.map((t,e)=>o(r,{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:(n,h)=>this.onNodeMouseDown(n,h),isPoint:!0},e))}}renderPoint(){return this.state.anno.data.map((t,e)=>o("circle",{cx:t.x,cy:t.y,r:10,fill:"red",style:this.props.style,className:this.props.className},e))}render(){return this.state.anno?p("g",{onMouseMove:t=>this.onMouseMove(t),onMouseUp:t=>this.onMouseUp(t),children:[this.renderPoint(),this.renderNode(),this.renderInfSelectionArea()]}):null}}export{E as default};