lost-sia 2.0.0-alpha0 → 2.0.0-alpha2

package/src/Annotation/Point.jsx

@@ -1,196 +1,200 @@
-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,
-        }
-    }
+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";
 
-    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}})
-        }
-    }
+class Point extends Component {
+  /*************
+   * LIFECYCLE *
+   **************/
+  constructor(props) {
+    super(props);
+    this.state = {
+      anno: undefined,
+    };
+  }
 
-    componentDidUpdate(prevProps){
-        if (prevProps.anno !== this.props.anno){
-            this.setState({anno: {...this.props.anno}})
-        }
+  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 } });
     }
-    
-    /**************
-    * 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
-        }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.anno !== this.props.anno) {
+      this.setState({ anno: { ...this.props.anno } });
     }
+  }
 
-    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
-        }
+  /**************
+   * 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;
     }
+  }
 
-    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
+  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);
 
-    /*************
-    *  LOGIC     *
-    **************/
-    getResult(){
-        return this.state.anno
+        this.performedAction(this.state.anno, canvasActions.ANNO_CREATED);
+        break;
+      default:
+        break;
     }
-    
-    performedAction(anno, pAction){
-        if (this.props.onAction){
-            this.props.onAction(anno, pAction)
+  }
+
+  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;
     }
+  }
 
-    requestModeChange(anno, mode){
-        this.props.onModeChangeRequest(anno, mode)
-    }
+  /*************
+   *  LOGIC     *
+   **************/
+  getResult() {
+    return this.state.anno;
+  }
 
-    move(movementX, movementY){
-        this.setState({
-            anno : {
-                ...this.state.anno,
-                data: transform.move(this.state.anno.data, movementX, movementY)
-            }
-        })
+  performedAction(anno, pAction) {
+    if (this.props.onAction) {
+      this.props.onAction(anno, pAction);
     }
+  }
 
-    renderInfSelectionArea(){
-        switch (this.state.anno.mode){
-            case modes.MOVE:
-                return <InfSelectionArea enable={true} 
-                        svg={this.props.svg}
-                    />
-            default:
-                return null
-        }
-    }
+  requestModeChange(anno, mode) {
+    this.props.onModeChangeRequest(anno, mode);
+  }
 
-    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}
-                        />
-                })
-        }
+  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;
     }
+  }
 
-    renderPoint(){
+  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 (
-                <circle key={idx} 
-                    cx={e.x} 
-                    cy={e.y} 
-                    r={10} fill="red" 
-                    style={this.props.style}
-                    className={this.props.className}
-                />
-            )
-        })
-            
+          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}
+            />
+          );
+        });
     }
+  }
 
-    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
-        }
+  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;
+export default Point;