lost-sia 2.0.0-alpha0 → 2.0.0-alpha2

package/src/Annotation/Edge.jsx

@@ -1,82 +1,92 @@
-import React, {Component} from 'react'
-import './Annotation.scss'
+import React, { Component } from "react";
+import "./Annotation.scss";
 
+class Edge extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      haloCss: "node-halo-off",
+    };
+  }
 
+  componentDidUpdate() {}
 
-class Edge extends Component{
-
-    constructor(props){
-        super(props)
-        this.state = {
-            haloCss: 'node-halo-off'
-        }
+  onMouseOver(e) {
+    if (this.props.isSelected) {
+      this.setState({ haloCss: "node-halo-on" });
     }
+  }
 
-    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" });
     }
+  }
 
-    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);
     }
+  }
 
-    onMouseDown(e){
-        if (this.props.onMouseDown){
-            this.props.onMouseDown(e, this.props.idx)
-        }
-    }
-
-    onMouseUp(e){
-        e.stopPropagation()
-    }
+  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>
-            )
+  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;
+export default Edge;

package/src/Annotation/InfSelectionArea.jsx

@@ -1,71 +1,72 @@
-import React, {Component} from 'react'
+import React, { Component } from "react";
 
-class InfSelectionArea extends Component{
+class InfSelectionArea extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selAreaCss: "sel-area-off",
+    };
+  }
 
-    constructor(props){
-        super(props)
-        this.state = {
-            selAreaCss: 'sel-area-off',
-        }        
+  componentDidMount() {
+    if (this.props.enable) {
+      this.enableSelArea();
+    } else {
+      this.disableSelArea();
     }
+  }
 
-    componentDidMount(){
-        if (this.props.enable){
-            this.enableSelArea()
-        } else {
-            this.disableSelArea()
-        }
+  componentDidUpdate() {
+    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);
     }
+  }
 
-    onMouseMove(e){
-        if (this.props.onMouseMove){
-            this.props.onMouseMove(e)
-        }
+  onMouseUp(e) {
+    if (this.props.onMouseUp) {
+      this.props.onMouseUp(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" });
     }
+  }
 
-    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" });
     }
+  }
 
-    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)}}
-            />
-        )
-        
-    }
+  /*************
+   * 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
+export default InfSelectionArea;

package/src/Annotation/Line.jsx

@@ -1,60 +1,68 @@
-import React from 'react'
-import Polygon from './Polygon'
-import Edge from './Edge'
+import React from "react";
+import Polygon from "./Polygon";
+import Edge from "./Edge";
 
-import * as modes from '../types/modes'
+import * as modes from "../types/modes";
 
+class Line extends Polygon {
+  /*************
+   *  RENDERING *
+   **************/
 
-
-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
-        }
+  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>
-        }
+  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;
+export default Line;