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;
}
}