import { APP_STATE } from "../enums/app-state-enum"; import { stages as Stages } from "../components/stages"; import { state as State } from "../components/state"; import { objects as Objects } from "../components/objects"; class Selector { constructor() { this._objects = []; this._selectorPosStart; this._selectorPosNow; this._mode = ""; this._stage = Stages.getCurrentStage(); this._layer = Stages.getCurrentLayer(); this._selectorRect = new Konva.Rect({ x: 0, y: 0, width: 0, height: 0, stroke: "#33BCFF", dash: [2, 2] }); } bootstrap() { this.configureSelectorEvents(); this.addToLayer(); } addToLayer() { this._selectorRect.listening(false); this._layer.add(this._selectorRect); } getSelectedObjects() { return this._objects; } startDragSelector(posIn) { this._selectorPosStart = { x: posIn.x, y: posIn.y }; this._selectorPosNow = { x: posIn.x, y: posIn.y }; } configureSelectorEvents() { var _this = this; this._stage.on("mousedown", function(e) { _this._mode = "drawing"; _this.startDragSelector({ x: e.evt.layerX, y: e.evt.layerY }); }); this._stage.on("mousemove", function(e) { if (_this._mode === "drawing") { _this.updateDragSelector({ x: e.evt.layerX, y: e.evt.layerY }); } }); this._stage.on("mouseup", function(e) { _this._mode = ""; _this._selectorRect.visible(false); _this._stage.draw(); }); } updateDragSelector(posIn) { if (State.getCurrentState() != APP_STATE.NONE) return; let currentObjects = Objects.get(); let posRect = this.reverse(this._selectorPosStart, this._selectorPosNow); this._selectorPosNow = { x: posIn.x, y: posIn.y }; this._selectorRect.x(posRect.x1); this._selectorRect.y(posRect.y1); this._selectorRect.width(posRect.x2 - posRect.x1); this._selectorRect.height(posRect.y2 - posRect.y1); this._selectorRect.visible(true); for (let i = 0; i < currentObjects.length; i = i + 1) { let object = currentObjects[i]; if (object.children != undefined && object.children.length > 0) { for (let j = 0; j < object.children.length; j++) { this.style(object.children[j], this._selectorRect); } } else { this.style(object, this._selectorRect); } } this._stage.draw(); } style(object, selectorRect) { if (object.attrs.selectable != undefined) { if (object.attrs.selectable == false) { return; } } if (this.hitCheck(object, selectorRect)) { object.stroke("#33BCFF"); object.fill("#33BCFF"); this.setObject(object); } else { if (object.attrs.style != undefined) { this.removeObject(object); object.stroke(object.attrs.style.stroke); object.fill(object.attrs.style.fill); } else { this.removeObject(object); object.stroke("black"); } } } hitCheck(shape1, shape2) { let s1 = shape1.getClientRect(); let s2 = shape2.getClientRect(); let X = s1.x; let Y = s1.y; let A = s1.x + s1.width; let B = s1.y + s1.height; let X1 = s2.x; let A1 = s2.x + s2.width; let Y1 = s2.y; let B1 = s2.y + s2.height; if (A < X1 || A1 < X || B < Y1 || B1 < Y) { return false; } else { return true; } } setObject(object) { if (this._objects.includes(object)) return; this._objects.push(object); } removeObject(object) { if (this._objects.length == 0) return; this._objects.splice(this._objects.indexOf(object), 1); } reverse(r1, r2) { let r1x = r1.x, r1y = r1.y, r2x = r2.x, r2y = r2.y, d; if (r1x > r2x) { d = Math.abs(r1x - r2x); r1x = r2x; r2x = r1x + d; } if (r1y > r2y) { d = Math.abs(r1y - r2y); r1y = r2y; r2y = r1y + d; } return { x1: r1x, y1: r1y, x2: r2x, y2: r2y }; } } export const selector = new Selector();