lost-sia 1.3.0 → 2.0.0-alpha1

package/src/Annotation/Edge.jsx

@@ -0,0 +1,82 @@
+import React, {Component} from 'react'
+import './Annotation.scss'
+
+
+
+class Edge extends Component{
+
+    constructor(props){
+        super(props)
+        this.state = {
+            haloCss: 'node-halo-off'
+        }
+    }
+
+    componentDidUpdate(){
+    }
+    
+    onMouseOver(e){
+        if (this.props.isSelected){
+            this.setState({haloCss: 'node-halo-on'})
+        }
+    }
+
+    onMouseLeave(e){
+        if (this.props.isSelected){
+            this.setState({haloCss: 'node-halo-off'})
+        }
+    }
+
+    onMouseDown(e){
+        if (this.props.onMouseDown){
+            this.props.onMouseDown(e, this.props.idx)
+        }
+    }
+
+    onMouseUp(e){
+        e.stopPropagation()
+    }
+
+    render(){
+        let p1, p2
+        if (!this.props.closingEdge){
+            if (this.props.idx - 1 < 0 ){
+                return null
+            }
+            if (this.props.idx > this.props.anno.length - 1){
+                return null
+            }
+            p1 = this.props.anno[this.props.idx - 1 ]
+            p2 = this.props.anno[this.props.idx]
+        } else {
+            if (this.props.idx === 0 && this.props.anno.length === 1) return null
+            p1 = this.props.anno[this.props.anno.length-1]
+            p2 = this.props.anno[0]
+        }
+        return(<g
+            onMouseOver={(e) => {this.onMouseOver(e)}}
+            onMouseLeave={e => {this.onMouseLeave(e)}}
+            
+        >
+            <line x1={p1.x} y1={p1.y} 
+                x2={p2.x} y2={p2.y} stroke="black"
+                // style={this.props.style} 
+                strokeWidth={this.props.style.strokeWidth*3}
+                className={this.state.haloCss}
+                onMouseOver={(e) => {this.onMouseOver(e)}}
+                onMouseDown={e => this.onMouseDown(e)}
+                onMouseUp={e => this.onMouseUp(e)}
+                />
+            <line x1={p1.x} y1={p1.y} 
+                x2={p2.x} y2={p2.y} stroke="black"
+                style={this.props.style} 
+                className={this.props.className}
+                onMouseDown={e => this.onMouseDown(e)}
+                onMouseUp={e => this.onMouseUp(e)}
+                />
+                </g>
+            )
+    }
+}
+
+export default Edge;

package/src/Annotation/InfSelectionArea.jsx

@@ -0,0 +1,71 @@
+import React, {Component} from 'react'
+
+class InfSelectionArea extends Component{
+
+    constructor(props){
+        super(props)
+        this.state = {
+            selAreaCss: 'sel-area-off',
+        }        
+    }
+
+    componentDidMount(){
+        if (this.props.enable){
+            this.enableSelArea()
+        } else {
+            this.disableSelArea()
+        }
+    }
+
+    componentDidUpdate(){
+        if (this.props.enable){
+            this.enableSelArea()
+        } else {
+            this.disableSelArea()
+        }
+    }
+
+    onMouseMove(e){
+        if (this.props.onMouseMove){
+            this.props.onMouseMove(e)
+        }
+    }
+
+    onMouseUp(e){
+        if (this.props.onMouseUp){
+            this.props.onMouseUp(e)
+        }
+    }
+
+    enableSelArea(){
+        if (this.state.selAreaCss !== 'sel-area-on'){
+            this.setState({selAreaCss: 'sel-area-on'})
+        }
+    }
+
+    disableSelArea(){
+        if (this.state.selAreaCss !== 'sel-area-off'){
+            this.setState({selAreaCss: 'sel-area-off'})
+        }
+    }
+
+
+    /*************
+     * RENDERING *
+    **************/
+    render(){
+        return(
+            <circle 
+                cx={this.props.svg.width/2} 
+                cy={this.props.svg.height/2} 
+                r={'100%'}
+                className={this.state.selAreaCss}
+                onMouseMove={e => {this.onMouseMove(e)}}
+                onMouseUp={e => {this.onMouseUp(e)}}
+            />
+        )
+        
+    }
+}
+
+export default InfSelectionArea

package/src/Annotation/Line.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import Polygon from './Polygon'
+import Edge from './Edge'
+
+import * as modes from '../types/modes'
+
+
+
+class Line extends Polygon{
+
+    /*************
+    *  RENDERING *
+    **************/
+
+    renderEdges(){
+        if (!this.props.isSelected) return null
+        switch (this.state.anno.mode){
+            case modes.VIEW:
+            case modes.ADD:
+                return this.state.anno.data.map((e, idx) => {
+                    return <Edge anno={this.state.anno.data} 
+                        idx={idx} key={idx} style={this.props.style}
+                        className={this.props.className}
+                        isSelected={this.props.isSelected}
+                        onMouseDown={(e, idx) => {this.onEdgeMouseDown(e, idx)}}                
+                        />
+                })
+            default:
+                return null
+        }
+    }
+
+    renderPolyline(){
+        return <polyline points={this.toPolygonStr(this.state.anno.data)}
+            fill='none' stroke="purple" 
+            style={{...this.props.style, fill:'none'}}
+            className={this.props.className}
+        />
+    }
+    render(){
+        if (this.state.anno){
+            return (
+                <g
+                    onMouseMove={e => this.onMouseMove(e)}
+                    onMouseUp={e => this.onMouseUp(e)}
+                    onMouseDown={e => this.onMouseDown(e)}
+                >
+                    {this.renderPolyline()}
+                    {this.renderEdges()}
+                    {this.renderNodes()}
+                    {this.renderInfSelectionArea()}
+                </g>
+            )
+        } else {
+            return <g></g>
+        }
+    }
+}
+
+export default Line;

package/src/Annotation/Node.jsx

@@ -0,0 +1,278 @@
+import React, { Component } from 'react'
+import './Annotation.scss'
+import * as modes from '../types/modes'
+import * as cursorstyles from '../types/cursorstyles'
+
+
+class Node extends Component {
+
+    /*************
+     * LIFECYCLE *
+    **************/
+    constructor(props) {
+        super(props)
+        this.state = {
+            haloCss: 'node-halo-off',
+            selAreaCss: 'sel-area-off',
+            // anno: undefined,
+            nodeSelected: false,
+            style: {}
+        }
+    }
+
+    componentDidMount() {
+        this.setState({
+            // anno: this.props.anno,
+            style: {
+                ...this.props.style,
+                cursor: this.getCursorStyle(this.props.mode)
+            }
+        })
+        // switch (this.props.mode){
+        //     case modes.CREATE:
+        //         if (this.props.idx !== 0){
+        //             this.turnSelAreaOn()
+        //         }
+        //     default:
+        //         break
+        // }
+    }
+
+    componentDidUpdate(prevProps) {
+        switch (this.props.mode) {
+            case modes.CREATE:
+                if (this.props.idx !== 0 || this.props.isPoint) {
+                    this.turnSelAreaOn()
+                }
+                break
+            case modes.EDIT:
+                this.turnSelAreaOn()
+                break
+            default:
+                break
+        }
+        //on mode change
+        if (prevProps.mode !== this.props.mode) {
+            this.setState({
+                style: {
+                    ...this.state.style,
+                    cursor: this.getCursorStyle(this.props.mode)
+                }
+            })
+        }
+        if (prevProps.style !== this.props.style) {
+            this.setState({
+                style:
+                {
+                    ...this.state.style,
+                    ...this.props.style,
+                    cursor: this.getCursorStyle(this.props.mode)
+                }
+            })
+        }
+    }
+
+    /*************
+     * EVENTS    *
+    **************/
+
+    onClick(e) {
+        this.turnHaloOn()
+        if (this.props.onClick) {
+            this.props.onClick(e, this.props.idx)
+        }
+    }
+
+    onMouseMove(e) {
+        if (this.props.onMouseMove) {
+            this.props.onMouseMove(e, this.props.idx)
+        }
+        // switch (this.props.mode){
+        //     case modes.CREATE:
+        //         let newAnno = [...this.state.anno]
+        //         const mousePos = mouse.getMousePosition(e, this.props.svg)
+        //         newAnno[this.props.idx].x = mousePos.x
+        //         newAnno[this.props.idx].y = mousePos.y
+        //         this.setState({
+        //             anno: newAnno
+        //         })
+        //         if (this.props.onAnnoUpdate){
+        //             this.props.onAnnoUpdate(e, this.props.idx, newAnno)
+        //         }
+        //     default:
+        //         break
+        // }
+    }
+
+    onContextMenu(e) {
+        e.preventDefault()
+    }
+
+    onMouseUp(e) {
+        switch (this.props.mode) {
+            case modes.EDIT:
+                switch (e.button) {
+                    case 0:
+                        this.turnSelAreaOff()
+                        break
+                    default:
+                        break
+                }
+                break
+            default:
+                break
+        }
+        if (this.props.onMouseUp) {
+            this.props.onMouseUp(e, this.props.idx)
+        }
+    }
+
+    onMouseDown(e) {
+        e.stopPropagation()
+        if (this.props.onMouseDown) {
+            this.props.onMouseDown(e, this.props.idx)
+        }
+        switch (this.props.mode) {
+            case modes.CREATE:
+                switch (e.button) {
+                    case 0:
+                        this.turnSelAreaOff()
+                        break
+                    case 2:
+                        this.turnSelAreaOff()
+                        break
+                    default:
+                        break
+                }
+                // case modes.EDIT:
+                //     switch (e.button){
+                //         case 0:
+                //             this.turnSelAreaOn()
+                //             break
+                //         default:
+                //             break
+                //     }
+                break
+            default:
+                break
+        }
+    }
+
+    onMouseOver(e) {
+        if (this.props.isSelected) {
+            this.turnHaloOn()
+        }
+    }
+
+    onMouseLeave(e) {
+        if (this.props.isSelected) {
+            this.turnHaloOff()
+        }
+    }
+
+    onDoubleClick(e) {
+        if (this.props.onDoubleClick) {
+            this.props.onDoubleClick(e, this.props.idx)
+        }
+    }
+
+    handleMouseLeave(e) {
+        if (this.props.onMouseLeave) {
+            this.props.onMouseLeave(e, this.props.idx)
+        }
+    }
+
+
+    /*************
+     * LOGIC     *
+    **************/
+    getCursorStyle(mode) {
+        switch (mode) {
+            case modes.CREATE:
+                return cursorstyles.CREATE_NODE
+            case modes.EDIT:
+                return cursorstyles.EDIT_NODE
+            case modes.VIEW:
+                return cursorstyles.NORMAL_NODE
+            default:
+                break
+        }
+    }
+
+    turnSelAreaOn() {
+        if (this.state.selAreaCss !== 'sel-area-on') {
+            this.setState({
+                selAreaCss: 'sel-area-on'
+            })
+        }
+    }
+
+    turnSelAreaOff() {
+        if (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'
+        })
+    }
+
+    /*************
+     * RENDERING *
+    **************/
+    renderHalo() {
+        if (this.state.haloCss === 'node-halo-off') return null
+        const data = this.props.anno[this.props.idx]
+
+        return <circle cx={data.x} cy={data.y} r={this.props.style.r * 3}
+            className={this.state.haloCss}
+            onMouseLeave={e => this.onMouseLeave(e)}
+        />
+    }
+    renderNodes() {
+        const data = this.props.anno[this.props.idx]
+        if (data === undefined) { return }
+        return (
+            <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)}
+            >
+                <circle cx={data.x} cy={data.y} r={'100%'}
+                    className={this.state.selAreaCss}
+                />
+                {this.renderHalo()}
+                <circle cx={data.x}
+                    cy={data.y}
+                    r={3} fill="red"
+                    style={this.state.style}
+                    className={this.props.className}
+                    onMouseOver={e => this.onMouseOver(e)}
+                />
+            </g>
+        )
+    }
+    render() {
+        return (
+            <g>
+                {this.renderNodes()}
+            </g>
+        )
+    }
+}
+
+export default Node;

package/src/Annotation/Point.jsx

@@ -0,0 +1,196 @@
+import React, {Component} from 'react'
+import InfSelectionArea from './InfSelectionArea'
+import Node from './Node'
+import * as modes from '../types/modes'
+import * as transform from '../utils/transform'
+import * as canvasActions from '../types/canvasActions'
+
+class Point extends Component{
+
+    /*************
+     * LIFECYCLE *
+    **************/
+    constructor(props){
+        super(props)
+        this.state = {
+            anno: undefined,
+        }
+    }
+
+    componentDidMount(prevProps){
+        if (this.props.anno.mode === modes.CREATE){
+            const data = this.props.anno.data[0]
+            const newAnno = {
+                ...this.props.anno,
+                data: [
+                    {x: data.x, y: data.y}
+                ],
+                selectedNode: 0
+            }
+            this.setState({
+                anno: newAnno
+            })
+        } else {
+            this.setState({anno: {...this.props.anno}})
+        }
+    }
+
+    componentDidUpdate(prevProps){
+        if (prevProps.anno !== this.props.anno){
+            this.setState({anno: {...this.props.anno}})
+        }
+    }
+    
+    /**************
+    * ANNO EVENTS *
+    ***************/
+    onMouseMove(e){
+        switch (this.state.anno.mode){
+            case modes.MOVE:
+                this.move(
+                    e.movementX/this.props.svg.scale, 
+                    e.movementY/this.props.svg.scale
+                )
+                break
+            default:
+                break
+        }
+    }
+
+    onMouseUp(e){
+        switch (this.state.anno.mode){
+            case modes.MOVE:
+                if (e.button === 0){
+                    this.requestModeChange(this.state.anno, modes.VIEW)
+                    this.performedAction(this.state.anno, canvasActions.ANNO_MOVED)
+                }
+                break
+            case modes.CREATE:
+                this.requestModeChange(this.state.anno, modes.VIEW)
+
+                this.performedAction(this.state.anno, canvasActions.ANNO_CREATED)
+                break
+            default:
+                break
+        }
+    }
+
+    onNodeMouseDown(e, idx){
+        switch (this.state.anno.mode){
+            case modes.VIEW:
+                if (e.button === 0){
+                    if (this.props.isSelected){
+                        this.requestModeChange(this.state.anno, modes.MOVE)
+                    }
+                }
+                break
+            default:
+                break
+        }
+    }
+
+    /*************
+    *  LOGIC     *
+    **************/
+    getResult(){
+        return this.state.anno
+    }
+    
+    performedAction(anno, pAction){
+        if (this.props.onAction){
+            this.props.onAction(anno, pAction)
+        }
+    }
+
+    requestModeChange(anno, mode){
+        this.props.onModeChangeRequest(anno, mode)
+    }
+
+    move(movementX, movementY){
+        this.setState({
+            anno : {
+                ...this.state.anno,
+                data: transform.move(this.state.anno.data, movementX, movementY)
+            }
+        })
+    }
+
+    renderInfSelectionArea(){
+        switch (this.state.anno.mode){
+            case modes.MOVE:
+                return <InfSelectionArea enable={true} 
+                        svg={this.props.svg}
+                    />
+            default:
+                return null
+        }
+    }
+
+    renderNode(){
+        if (!this.props.isSelected) return null 
+        switch(this.state.anno.mode){
+            case modes.EDIT_LABEL:
+            case modes.MOVE:
+                return null
+            case modes.EDIT:
+            case modes.CREATE:
+                return <Node anno={this.state.anno.data}
+                            key={this.state.selectedNode}
+                            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={(e, idx) => this.onNodeMouseDown(e,idx)}
+                            isPoint={true}
+                        />
+            default:
+                return this.state.anno.data.map((e, idx) => {
+                    return <Node anno={this.state.anno.data} idx={idx} 
+                        key={idx} style={this.props.style}
+                        className={this.props.className} 
+                        isSelected={this.props.isSelected}
+                        mode={this.state.anno.mode}
+                        svg={this.props.svg}
+                        onMouseDown={(e, idx) => this.onNodeMouseDown(e,idx)}
+                        isPoint={true}
+                        />
+                })
+        }
+    }
+
+    renderPoint(){
+        return this.state.anno.data.map((e, idx) => {
+            return (
+                <circle key={idx} 
+                    cx={e.x} 
+                    cy={e.y} 
+                    r={10} fill="red" 
+                    style={this.props.style}
+                    className={this.props.className}
+                />
+            )
+        })
+            
+    }
+
+    render(){
+        if (this.state.anno){
+            return(
+                <g
+                    onMouseMove={e => this.onMouseMove(e)}
+                    onMouseUp={e => this.onMouseUp(e)}
+                >
+                    {this.renderPoint()}
+                    {this.renderNode()}
+                    {this.renderInfSelectionArea()}
+                </g>
+                )
+        } else {
+            return null
+        }
+    }
+}
+
+export default Point;