lost-sia 1.2.0 → 2.0.0-alpha0

package/src/Annotation/Annotation.jsx

@@ -0,0 +1,358 @@
+import React, { Component } from 'react'
+
+import AnnoBar from './AnnoBar'
+import Point from './Point'
+import BBox from './BBox'
+import Line from './Line'
+import Polygon from './Polygon'
+import * as modes from '../types/modes'
+import * as canvasActions from '../types/canvasActions'
+import * as annoStatus from '../types/annoStatus'
+import * as colorlut from '../utils/colorlut'
+import * as constraints from '../utils/constraints'
+import * as transform from '../utils/transform'
+import * as notificationType from '../types/notificationType'
+
+class Annotation extends Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            // mode: modes.VIEW,
+            selAreaCss: 'sel-area-off',
+            visibility: 'visible',
+            anno: undefined
+        }
+        this.myAnno = React.createRef()
+
+    }
+
+    componentWillMount() {
+        this.setState({ anno: { ...this.props.data } })
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.data !== this.props.data) {
+            this.setState({ anno: { ...this.props.data } })
+        }
+        if (prevProps.showSingleAnno !== this.props.showSingleAnno) {
+            if (this.props.showSingleAnno === undefined) {
+                this.setVisible(true)
+            } else {
+                if (this.props.showSingleAnno !== this.props.data.id) {
+                    this.setVisible(false)
+                } else {
+                    this.setVisible(true)
+                }
+            }
+        }
+        if (this.props.showSingleAnno === undefined) {
+            if (this.state.anno.visible !== undefined) {
+                if (this.state.anno.visible) {
+                    this.setVisible(true)
+                } else {
+                    this.setVisible(false)
+                }
+            }
+        }
+
+    }
+
+    /*************
+     * EVENTS    *
+    **************/
+    onClick(e) {
+        e.stopPropagation()
+        this.performedAction(this.state.anno, canvasActions.ANNO_SELECTED)
+    }
+
+    onMouseDown(e) {
+        e.preventDefault()
+        if (this.props.onMouseDown) {
+            this.props.onMouseDown(e)
+        }
+    }
+
+    onContextMenu(e) {
+        e.preventDefault()
+    }
+
+    handleModeChangeRequest(anno, mode) {
+        this.setMode(anno, mode)
+    }
+
+    /*************
+     * LOGIC     *
+     *************/
+
+    /**
+    * Trigger callback when this annotation performed an action
+    * 
+    * @param {String} pAction 
+    */
+    performedAction(anno, pAction) {
+
+        if (this.props.onAction) {
+            this.props.onAction(anno, pAction)
+        }
+    }
+
+
+    notify(messageObj) {
+        if (this.props.onNotification) {
+            this.props.onNotification(messageObj)
+        }
+    }
+
+    /**
+     * Handle a performed action from a specific annotation
+     * 
+     * @param {list} annoData - Annotation data that define a box, line, 
+     *      polygon, point
+     * @param {string} pAction - The performed action
+     * @param {int} selectedNode - The node of the annotation that 
+     *      was selected
+     */
+    performedAnnoAction(anno, pAction) {
+
+        switch (pAction) {
+            case canvasActions.ANNO_CREATED_FINAL_NODE:
+            case canvasActions.ANNO_EDITED:
+            case canvasActions.ANNO_MOVED:
+            case canvasActions.ANNO_CREATED:
+                // Check if annoation is within image bounds
+                const corrected = transform.correctAnnotation(anno.data, this.props.svg, this.props.imageOffset)
+                let newAnno = { ...anno, data: corrected }
+                const area = transform.getArea(corrected, this.props.svg, anno.type, this.props.image)
+                if (area !== undefined) {
+                    if (area < this.props.canvasConfig.annos.minArea) {
+                        this.notify({
+                            title: "Annotation to small",
+                            message: 'Annotation area was ' + Math.round(area) + 'px but needs to be bigger than ' + this.props.canvasConfig.annos.minArea + ' px',
+                            type: notificationType.WARNING
+                        })
+                        // newAnno = {...newAnno, mode: modes.DELETED}
+                        this.setMode(newAnno, modes.DELETED)
+                    } else {
+                        this.performedAction(newAnno, pAction)
+                    }
+                } else {
+                    this.performedAction(newAnno, pAction)
+                }
+                break
+            default:
+                this.performedAction(anno, pAction)
+                break
+        }
+    }
+
+    setAnnoMode(anno, mode) {
+        this.setState({
+            anno: {
+                ...anno,
+                mode: mode
+            }
+        })
+    }
+
+    setMode(anno, mode) {
+        if (anno.mode !== mode) {
+            switch (mode) {
+                case modes.EDIT_LABEL:
+                    if (constraints.allowedToLabel(
+                        this.props.allowedActions,
+                        anno
+                    )) {
+                        this.setAnnoMode(anno, mode)
+                    }
+                    break
+                case modes.DELETED:
+                    // if(constraints.allowedToDelete(
+                    //     this.props.allowedActions,
+                    //     anno
+                    // )){
+                    this.setAnnoMode(anno, mode)
+                    const newAnno = {
+                        ...anno,
+                        // status: annoStatus.DELETED
+                        mode: mode.DELETED
+                    }
+                    // this.setState({
+                    //     anno: newAnno
+                    // })
+                    this.performedAction(newAnno, canvasActions.ANNO_DELETED)
+                    // }
+                    break
+                case modes.MOVE:
+                    this.setAnnoMode(anno, mode)
+                    this.performedAction(anno, canvasActions.ANNO_ENTER_MOVE_MODE)
+                    break
+                case modes.EDIT:
+                    this.setAnnoMode(anno, mode)
+                    this.performedAction(anno, canvasActions.ANNO_ENTER_EDIT_MODE)
+                    break
+                default:
+                    this.setAnnoMode(anno, mode)
+                    break
+            }
+        }
+    }
+
+    setVisible(visible) {
+        if (visible) {
+            if (this.state.visibility !== 'visible') {
+                this.setState({ visibility: 'visible' })
+            }
+        } else {
+            if (this.state.visibility !== 'hidden') {
+                this.setState({ visibility: 'hidden' })
+            }
+        }
+    }
+
+    isSelected() {
+        if (constraints.allowedToEdit(this.props.allowedActions, this.state.anno)) {
+            return this.props.selectedAnno === this.props.data.id
+        } else {
+            return false
+        }
+    }
+
+    getResult() {
+        return {
+            ...this.state.anno,
+            data: this.myAnno.current.state.anno,
+            createMode: this.myAnno.current.state.mode === modes.CREATE
+        }
+    }
+
+    getLabel(lblId) {
+        return this.props.possibleLabels.find(e => {
+            return e.id === lblId
+        })
+    }
+
+    getColor() {
+        if (this.state.anno.labelIds && this.state.anno.labelIds.length > 0) {
+            return this.getLabel(this.state.anno.labelIds[0]).color
+        }
+        else {
+            return colorlut.getDefaultColor()
+        }
+    }
+
+    getStyle() {
+        const color = this.getColor()
+        if (this.isSelected()) {
+            return {
+                stroke: color,
+                fill: color,
+                strokeWidth: this.props.uiConfig.strokeWidth / this.props.svg.scale,
+                r: this.props.uiConfig.nodeRadius / this.props.svg.scale
+
+            }
+        } else {
+            return {
+                stroke: color,
+                fill: color,
+                strokeWidth: this.props.uiConfig.strokeWidth / this.props.svg.scale,
+                r: this.props.uiConfig.nodeRadius / this.props.svg.scale
+            }
+        }
+    }
+
+    getCssClass() {
+        if (this.isSelected()) {
+            return 'selected'
+        } else {
+            return 'not-selected'
+        }
+    }
+
+    /*************
+     * RENDERING *
+    **************/
+    renderAnno() {
+        const type = this.props.type
+        // const allowedToEdit = constraints.allowedToEditBounds(
+        //     this.props.allowedActions,
+        //     this.state.anno
+        // )
+        switch (type) {
+            case 'point':
+                return <Point ref={this.myAnno} anno={this.state.anno}
+                    style={this.getStyle()}
+                    className={this.getCssClass()}
+                    isSelected={this.isSelected()}
+                    svg={this.props.svg}
+                    onModeChangeRequest={(anno, mode) => this.handleModeChangeRequest(anno, mode)}
+                    onAction={(anno, pAction) => this.performedAnnoAction(anno, pAction)}
+                />
+            case 'bBox':
+                return <BBox ref={this.myAnno} anno={this.state.anno}
+                    style={this.getStyle()}
+                    className={this.getCssClass()}
+                    onNodeClick={(e, idx) => this.onNodeClick(e, idx)}
+                    onNodeMouseDown={(e, idx) => this.onNodeMouseDown(e, idx)}
+                    isSelected={this.isSelected()}
+                    svg={this.props.svg}
+                    onModeChangeRequest={(anno, mode) => this.handleModeChangeRequest(anno, mode)}
+                    onAction={(anno, pAction) => this.performedAnnoAction(anno, pAction)}
+                />
+            case 'polygon':
+                return <Polygon ref={this.myAnno} anno={this.state.anno}
+                    style={this.getStyle()}
+                    className={this.getCssClass()}
+                    onNodeClick={(e, idx) => this.onNodeClick(e, idx)}
+                    isSelected={this.isSelected()}
+                    svg={this.props.svg}
+                    onModeChangeRequest={(anno, mode) => this.handleModeChangeRequest(anno, mode)}
+                    onAction={(anno, pAction) => this.performedAnnoAction(anno, pAction)}
+                />
+            case 'line':
+                return <Line ref={this.myAnno} anno={this.state.anno}
+                    style={this.getStyle()}
+                    className={this.getCssClass()}
+                    isSelected={this.isSelected()}
+                    svg={this.props.svg}
+                    onAction={(anno, pAction) => this.performedAnnoAction(anno, pAction)}
+                    onModeChangeRequest={(anno, mode) => this.handleModeChangeRequest(anno, mode)}
+                />
+            default:
+                console.error("Wrong annoType for annotations: ",
+                    this.props.annoType)
+        }
+    }
+
+    renderAnnoBar() {
+        return <AnnoBar
+            anno={this.state.anno}
+            mode={this.state.anno.mode}
+            possibleLabels={this.props.possibleLabels}
+            onClick={e => this.onClick(e)}
+            style={this.getStyle()}
+            svg={this.props.svg}
+            defaultLabel={this.props.defaultLabel}
+        />
+    }
+    render() {
+        if (!this.state.anno.data) return null
+        if (!this.props.possibleLabels) return null
+        if (this.state.anno.status === annoStatus.DELETED) return null
+        return (
+            <g>
+                <g visibility={this.state.visibility}
+                    onClick={e => this.onClick(e)}
+                    onMouseDown={e => this.onMouseDown(e)}
+                    onContextMenu={e => this.onContextMenu(e)}
+                >
+                    {this.renderAnnoBar()}
+                    {this.renderAnno()}
+
+                </g>
+            </g>
+        )
+    }
+}
+
+export default Annotation

package/src/Annotation/Annotation.scss

@@ -0,0 +1,47 @@
+//*******************
+//* General styling *
+//*******************
+.sel-area-off{
+    fill: none;
+}
+
+.sel-area-on{
+    fill: blue;
+    fill-opacity:  0.001;
+}
+
+//**********************
+//* Annotation styling *
+//**********************
+.selected{
+    fill-opacity: 0.01;
+    cursor: grab;
+}
+
+circle.selected{
+    fill-opacity: 1.0;
+}
+
+.not-selected{
+    fill-opacity: 0.3;
+}
+
+circle.not-selected{
+    fill-opacity: 1.0;
+}
+
+//****************
+//* Node styling *
+//****************
+.node-halo-on{
+    fill: orange;
+    stroke: orange;
+    fill-opacity: 0.1;
+    stroke-opacity: 0.2;
+    cursor: grab;
+}
+
+.node-halo-off{
+    fill: none;
+    stroke: none;
+}

package/src/Annotation/BBox.jsx

@@ -0,0 +1,291 @@
+import React, {Component} from 'react'
+import './Annotation.scss';
+import * as modes from '../types/modes'
+import * as transform from '../utils/transform'
+import * as canvasActions from '../types/canvasActions'
+import * as mouse from '../utils/mouse'
+import InfSelectionArea from './InfSelectionArea'
+import Node from './Node'
+
+class BBox 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},
+                    {x: data.x+1, y: data.y},
+                    {x: data.x+1, y: data.y+1},
+                    {x: data.x, y: data.y+1}
+                ],
+                selectedNode: 2
+            }
+            this.setState({
+                anno: newAnno
+            })
+            // this.performedAction(newAnno, canvasActions.ANNO_START_CREATING)
+            
+        } else {
+            this.setState({anno: {...this.props.anno}})
+        }
+    }
+
+    componentDidUpdate(prevProps){
+        if (prevProps.anno !== this.props.anno){
+            this.setState({anno: {...this.props.anno}})
+        }
+    }
+
+    /*************
+    * EVENTS    *
+    **************/
+    onNodeMouseMove(e, idx){
+        switch (this.state.anno.mode){
+            case modes.CREATE:
+            case modes.EDIT:
+                const mousePos = mouse.getMousePosition(e, this.props.svg)
+                const idxMinus = idx - 1 < 0 ? 3 : idx -1
+                const idxPlus = idx + 1 > 3 ? 0 : idx +1
+                let newAnnoData = [...this.state.anno.data]
+                if (idx % 2 === 0){
+                    newAnnoData[idxMinus].x = mousePos.x
+                    newAnnoData[idx].x = mousePos.x
+                    newAnnoData[idx].y = mousePos.y
+                    newAnnoData[idxPlus].y = mousePos.y
+                } else {
+                    newAnnoData[idxMinus].y = mousePos.y
+                    newAnnoData[idx].x = mousePos.x
+                    newAnnoData[idx].y = mousePos.y
+                    newAnnoData[idxPlus].x = mousePos.x
+                }
+                this.setState({
+                    anno: {
+                        ...this.state.anno,
+                        data: newAnnoData
+                    }
+                })
+                break
+            default:
+                break
+        }
+    }
+
+    onNodeMouseDown(e,idx){
+        switch(this.state.anno.mode){
+            case modes.VIEW:
+                if (e.button === 0){
+                    this.requestModeChange(
+                        {...this.state.anno, selectedNode:idx}, 
+                        modes.EDIT
+                    )
+                }
+                break
+            default:
+                break
+        }
+    }
+
+    onNodeMouseUp(e, idx){
+        switch(this.state.anno.mode){
+            case modes.EDIT:
+                if (e.button === 0){
+                    this.requestModeChange(this.state.anno, modes.VIEW)
+                    this.performedAction(this.state.anno, canvasActions.ANNO_EDITED)
+                }
+                break
+            case modes.CREATE:
+                if (e.button === 2){
+                    this.requestModeChange(this.state.anno, modes.VIEW)
+                    this.performedAction(this.state.anno, canvasActions.ANNO_CREATED)
+                }
+                break
+            default:
+                break
+        }
+    }
+
+    handleNodeMouseLeave(e, idx){
+        switch(this.state.anno.mode){
+            //if mouse left Canvas in create mode, transit to VIEW mode
+            case modes.CREATE:
+                this.requestModeChange(this.state.anno, modes.VIEW)
+                this.performedAction(this.state.anno, canvasActions.ANNO_CREATED)
+                break
+            default:
+                break
+        }
+    }
+
+    /**************
+    * 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
+            default:
+                break
+        }
+    }
+
+    onMouseDown(e){
+        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
+    }
+    
+    requestModeChange(anno, mode){
+        this.props.onModeChangeRequest(anno, mode)
+    }
+
+    performedAction(anno, pAction){
+        if (this.props.onAction){
+            this.props.onAction(anno, pAction)
+        }
+    }
+
+    toPolygonStr(data){
+        return data.map( (e => {
+            return `${e.x},${e.y}`
+        })).join(' ')
+        
+    }
+
+    move(movementX, movementY){
+        this.setState({
+            anno : {
+                ...this.state.anno,
+                data: transform.move(this.state.anno.data, movementX, movementY)
+            }
+        })
+    }
+
+    /*************
+     * RENDERING *
+    **************/
+
+    renderPolygon(){
+        switch(this.state.anno.mode){
+            default:
+                return <polygon 
+                    points={this.toPolygonStr(this.state.anno.data)}
+                    fill='none' stroke="purple" 
+                    style={this.props.style}
+                    className={this.props.className}
+                    onMouseDown={e => this.onMouseDown(e)}
+                    onMouseUp={e => this.onMouseUp(e)}
+                /> 
+        }
+    }
+
+    renderNodes(){
+        if (!this.props.isSelected) return null 
+        switch(this.state.anno.mode){
+            case modes.MOVE:
+            case modes.EDIT_LABEL:
+                return null
+            case modes.EDIT:
+            case modes.CREATE:
+                return <Node anno={this.state.anno.data}
+                            key={this.state.anno.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)}
+                            onMouseUp={(e, idx) => this.onNodeMouseUp(e, idx)}
+                            onMouseMove={(e, idx) => this.onNodeMouseMove(e, idx)}
+                            onMouseLeave={(e, idx) => this.handleNodeMouseLeave(e, idx)}
+                        />
+            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)}
+                        onMouseUp={(e, idx) => this.onNodeMouseUp(e, idx)}
+                        onMouseLeave={(e, idx) => this.handleNodeMouseLeave(e, idx)}
+                        />
+                })
+        }
+    }
+
+    renderInfSelectionArea(){
+        switch (this.state.anno.mode){
+            case modes.MOVE:
+                return <InfSelectionArea enable={true} 
+                        svg={this.props.svg}
+                    />
+            default:
+                return null
+        }
+    }
+
+    render(){
+        if (this.state.anno){
+            return (
+            <g
+                onMouseMove={e => this.onMouseMove(e)}
+                onMouseUp={e => this.onMouseUp(e)}
+                onMouseDown={e => this.onMouseDown(e)}
+            >
+                {this.renderPolygon()}
+                {this.renderNodes()}
+                {this.renderInfSelectionArea()}
+            </g>)
+        } else {
+            return null
+        }
+    }
+
+}
+
+export default BBox;