lost-sia 2.0.1-alpha8 → 3.0.0

package/src/Annotation/Node.jsx

@@ -1,282 +0,0 @@
-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

@@ -1,200 +0,0 @@
-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;