lost-sia/dist/Annotation/Node.js

Single Image Annotation Tool

import{jsx as t,jsxs as i}from"react/jsx-runtime";import{Component as n}from"react";/* empty css               */import{EDIT as o,CREATE as r,VIEW as a}from"../types/modes.js";import{NORMAL_NODE as h,EDIT_NODE as p,CREATE_NODE as l}from"../types/cursorstyles.js";class m extends n{constructor(s){super(s),this.state={haloCss:"node-halo-off",selAreaCss:"sel-area-off",nodeSelected:!1,style:{}}}componentDidMount(){this.setState({style:{...this.props.style,cursor:this.getCursorStyle(this.props.mode)}})}componentDidUpdate(s){switch(this.props.mode){case r:(this.props.idx!==0||this.props.isPoint)&&this.turnSelAreaOn();break;case o:this.turnSelAreaOn();break}s.mode!==this.props.mode&&this.setState({style:{...this.state.style,cursor:this.getCursorStyle(this.props.mode)}}),s.style!==this.props.style&&this.setState({style:{...this.state.style,...this.props.style,cursor:this.getCursorStyle(this.props.mode)}})}onClick(s){this.turnHaloOn(),this.props.onClick&&this.props.onClick(s,this.props.idx)}onMouseMove(s){this.props.onMouseMove&&this.props.onMouseMove(s,this.props.idx)}onContextMenu(s){s.preventDefault()}onMouseUp(s){switch(this.props.mode){case o:switch(s.button){case 0:this.turnSelAreaOff();break}break}this.props.onMouseUp&&this.props.onMouseUp(s,this.props.idx)}onMouseDown(s){switch(s.stopPropagation(),this.props.onMouseDown&&this.props.onMouseDown(s,this.props.idx),this.props.mode){case r:switch(s.button){case 0:this.turnSelAreaOff();break;case 2:this.turnSelAreaOff();break}break}}onMouseOver(s){this.props.isSelected&&this.turnHaloOn()}onMouseLeave(s){this.props.isSelected&&this.turnHaloOff()}onDoubleClick(s){this.props.onDoubleClick&&this.props.onDoubleClick(s,this.props.idx)}handleMouseLeave(s){this.props.onMouseLeave&&this.props.onMouseLeave(s,this.props.idx)}getCursorStyle(s){switch(s){case r:return l;case o:return p;case a:return h}}turnSelAreaOn(){this.state.selAreaCss!=="sel-area-on"&&this.setState({selAreaCss:"sel-area-on"})}turnSelAreaOff(){this.state.selAreaCss!=="sel-area-off"&&this.setState({selAreaCss:"sel-area-off"})}turnHaloOn(){this.setState({haloCss:"node-halo-on"})}turnHaloOff(){this.setState({haloCss:"node-halo-off"})}renderHalo(){if(this.state.haloCss==="node-halo-off")return null;const s=this.props.anno[this.props.idx];return t("circle",{cx:s.x,cy:s.y,r:this.props.style.r*3,className:this.state.haloCss,onMouseLeave:e=>this.onMouseLeave(e)})}renderNodes(){const s=this.props.anno[this.props.idx];if(s!==void 0)return i("g",{onClick:e=>this.onClick(e),onMouseMove:e=>this.onMouseMove(e),onContextMenu:e=>this.onContextMenu(e),onMouseUp:e=>this.onMouseUp(e),onMouseDown:e=>this.onMouseDown(e),onDoubleClick:e=>this.onDoubleClick(e),onMouseLeave:e=>this.handleMouseLeave(e),children:[t("circle",{cx:s.x,cy:s.y,r:"100%",className:this.state.selAreaCss}),this.renderHalo(),t("circle",{cx:s.x,cy:s.y,r:3,fill:"red",style:this.state.style,className:this.props.className,onMouseOver:e=>this.onMouseOver(e)})]})}render(){return t("g",{children:this.renderNodes()})}}export{m as default};