igeom/src/app/core/drawers/selectable-drawer.js

import { Drawer } from "./drawer";
import { stageManager as StageManager } from "../application/stage-manager";
import { ELEMENTS_CLASS } from "../enums/elements-class-enum";
import { app as App } from "../../app";
import { COMPONENT_TYPE } from "../enums/component-type-enum";
const HOVER_STYLE = {
  fill: "#33BCFF",
  strokeWidth: 6,
  stroke: "#33BCFF"
};
const STYLE_STROKE = {
  fill: "grey",
  strokeWidth: 2,
  stroke: "grey"
};
const STYLE_POINT = {
  fill: "#9bc364",
  fill2: "#828783",
  strokeWidth: 1,
  stroke: "#9bc364"
};

export class SelectableDrawer extends Drawer {
  constructor() {
    super();
    this.setElementClass(ELEMENTS_CLASS.SELECTOR);
  }
  static setSelectableIfIntersectionChanged(konvaObject) {
    konvaObject.on("mouseover", function () {
      const selectedTool = App.getSelectedTool();
      if (
        selectedTool != undefined &&
        selectedTool.drawer != undefined && (
          selectedTool.drawer.elementClass == ELEMENTS_CLASS.INTERSECTION_POINT
        )
      ) {
        this.strokeWidth(HOVER_STYLE.strokeWidth);
        this.stroke(HOVER_STYLE.stroke);
        StageManager.getCurrentKonvaStage().draw();
      }
    });
    konvaObject.on("mouseout", function () {
      if (konvaObject == undefined) return;
      this.strokeWidth(STYLE_STROKE.strokeWidth);
      this.stroke(konvaObject.attrs.style.stroke);
      StageManager.getCurrentKonvaStage().draw();
    });
    return konvaObject;
  }
  static setSelectableIfSelectorChanged(konvaObject) {
    konvaObject.on("mouseover", function () {
      const selectedTool = App.getSelectedTool();
      if (
        selectedTool != undefined &&
        selectedTool.drawer != undefined &&
        selectedTool.options.type === COMPONENT_TYPE.SELECTOR
        || selectedTool.drawer.elementClass == ELEMENTS_CLASS.CIRCUMFERENCE
        || selectedTool.drawer.elementClass == ELEMENTS_CLASS.LINE_SEGMENT
      ) {
        this.strokeWidth(HOVER_STYLE.strokeWidth);
        this.stroke(HOVER_STYLE.stroke);
        StageManager.getCurrentKonvaStage().draw();
      }
    });
    konvaObject.on("mouseout", function () {
      if (konvaObject == undefined) return;
      this.strokeWidth(STYLE_STROKE.strokeWidth);
      this.stroke(konvaObject.attrs.style.stroke);
      StageManager.getCurrentKonvaStage().draw();
    });
    return konvaObject;
  }
  static setSelectable(konvaObject) {
    konvaObject.on("mouseover", function () {
      this.strokeWidth(HOVER_STYLE.strokeWidth);
      this.stroke(HOVER_STYLE.stroke);
      StageManager.getCurrentKonvaStage().draw();
    });
    konvaObject.on("mouseout", function () {
      this.strokeWidth(STYLE_POINT.strokeWidth);
      this.stroke(konvaObject.attrs.style.stroke);
      StageManager.getCurrentKonvaStage().draw();
    });
    return konvaObject;
  }
}