Browse Source

fix tablet bug

Victor Luiz Domingues 4 years ago
parent
commit
fa94b17c06
3 changed files with 50 additions and 23 deletions
  1. 1 1
      package.json
  2. 48 21
      src/app/core/application/selector.js
  3. 1 1
      src/app/core/drawers/stage.js

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "igeom",
-  "version": "beta-1.0.0",
+  "version": "1.0.1",
   "description": "",
   "private": true,
   "main": "index.js",

+ 48 - 21
src/app/core/application/selector.js

@@ -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();

+ 1 - 1
src/app/core/drawers/stage.js

@@ -54,7 +54,7 @@ export class Stage {
   }
   configureStageEvents(stage) {
     stage.on("mousedown ", this._mouseDown.bind(this));
-    stage.on("click tap", this._clickTap.bind(this));
+    stage.on("click", this._clickTap.bind(this));
   }
 
   _mouseDown(e) {