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