|
@@ -77,38 +77,20 @@ export class Selector {
|
|
|
this._selectorPosNow = { x: posIn.x, y: posIn.y };
|
|
|
}
|
|
|
|
|
|
- configureSelectorEvents() {
|
|
|
- var _this = this;
|
|
|
- this._stage.on("mousedown", function(e) {
|
|
|
- Stages.getCurrentKonvaLayer().add(_this._selectorRect);
|
|
|
- _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._selectorRect.remove();
|
|
|
- _this._mode = "";
|
|
|
- _this._selectorRect.visible(false);
|
|
|
- _this._stage.draw();
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
updateDragSelector(posIn) {
|
|
|
if (State.getCurrentState() != APP_STATE.NONE) return;
|
|
|
App.clearSelectedTool();
|
|
|
const currentObjects = Objects.get();
|
|
|
const posRect = this.reverse(this._selectorPosStart, this._selectorPosNow);
|
|
|
this._selectorPosNow = { x: posIn.x, y: posIn.y };
|
|
|
+ console.info(" his._selectorPosStart", this._selectorPosStart);
|
|
|
+ console.info("posRect", posRect);
|
|
|
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);
|
|
|
+ console.info("this._selectorRect", this._selectorRect);
|
|
|
for (let i = 0; i < currentObjects.length; i = i + 1) {
|
|
|
const aggregator = currentObjects[i];
|
|
|
const object = aggregator.konvaObject;
|
|
@@ -222,6 +204,51 @@ export class Selector {
|
|
|
object.stroke("grey");
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ configureSelectorEvents() {
|
|
|
+ this._stage.on("mousedown touchstart", this.start.bind(this));
|
|
|
+ this._stage.on("mousemove touchmove", this.move.bind(this));
|
|
|
+ this._stage.on("mouseup touchend", this.end.bind(this));
|
|
|
+ }
|
|
|
+
|
|
|
+ start(event) {
|
|
|
+ const pos = {
|
|
|
+ x: undefined,
|
|
|
+ y: undefined
|
|
|
+ };
|
|
|
+ if (event.evt.type === "touchstart") {
|
|
|
+ pos.x = event.target.pointerPos.x;
|
|
|
+ pos.y = event.target.pointerPos.y;
|
|
|
+ } else {
|
|
|
+ pos.x = event.evt.layerX;
|
|
|
+ pos.y = event.evt.layerY;
|
|
|
+ }
|
|
|
+ Stages.getCurrentKonvaLayer().add(this._selectorRect);
|
|
|
+ this._mode = "drawing";
|
|
|
+ this.startDragSelector(pos);
|
|
|
+ }
|
|
|
+ move(event) {
|
|
|
+ const pos = {
|
|
|
+ x: undefined,
|
|
|
+ y: undefined
|
|
|
+ };
|
|
|
+ if (event.evt.type === "touchmove") {
|
|
|
+ pos.x = event.target.pointerPos.x;
|
|
|
+ pos.y = event.target.pointerPos.y;
|
|
|
+ } else {
|
|
|
+ pos.x = event.evt.layerX;
|
|
|
+ pos.y = event.evt.layerY;
|
|
|
+ }
|
|
|
+ if (this._mode === "drawing") {
|
|
|
+ this.updateDragSelector(pos);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ end(event) {
|
|
|
+ this._selectorRect.remove();
|
|
|
+ this._mode = "";
|
|
|
+ this._selectorRect.visible(false);
|
|
|
+ this._stage.draw();
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
export const selector = new Selector();
|