From e3f1e72e961a86ba3112ce7dde762a5773ae16a0 Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Sat, 20 Jul 2019 16:56:25 +0900
Subject: [PATCH] Fixed issue with mouse click erasing main canvas

---
 desktop/sources/scripts/commander.js | 36 ++++++++++++++++------------
 desktop/sources/scripts/surface.js   |  9 +++----
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/desktop/sources/scripts/commander.js b/desktop/sources/scripts/commander.js
index 5dbbbf7..95892a5 100644
--- a/desktop/sources/scripts/commander.js
+++ b/desktop/sources/scripts/commander.js
@@ -105,37 +105,43 @@ function Commander (ronin) {
 
   this.onMouseDown = (e) => {
     this.mouseDown = true
-    this.mouseRect.x = e.offsetX
-    this.mouseRect.y = e.offsetY
-    this.mouseRect.a.x = e.offsetX
-    this.mouseRect.a.y = e.offsetY
+    const offset = this.makeMouseOffset({ x: e.offsetX, y: e.offsetY })
+    this.mouseRect.x = offset.x
+    this.mouseRect.y = offset.y
+    this.mouseRect.a.x = offset.x
+    this.mouseRect.a.y = offset.y
     this.mouseRect.t = 'pos'
     this.capture()
     this.show()
   }
 
   this.onMouseMove = (e) => {
-    if (this.mouseDown === true) {
-      this.mouseRect.w = e.offsetX - this.mouseRect.x
-      this.mouseRect.h = e.offsetY - this.mouseRect.y
-      this.mouseRect.b.x = e.offsetX
-      this.mouseRect.b.y = e.offsetY
-      this.commit()
-    }
+    if (this.mouseDown !== true) { return }
+    const offset = this.makeMouseOffset({ x: e.offsetX, y: e.offsetY })
+    this.mouseRect.w = offset.x - this.mouseRect.x
+    this.mouseRect.h = offset.y - this.mouseRect.y
+    this.mouseRect.b.x = offset.x
+    this.mouseRect.b.y = offset.y
+    this.commit()
   }
 
   this.onMouseUp = (e) => {
     this.mouseDown = false
-    this.mouseRect.w = e.offsetX - this.mouseRect.x
-    this.mouseRect.h = e.offsetY - this.mouseRect.y
-    this.mouseRect.b.x = e.offsetX
-    this.mouseRect.b.y = e.offsetY
+    const offset = this.makeMouseOffset({ x: e.offsetX, y: e.offsetY })
+    this.mouseRect.w = offset.x - this.mouseRect.x
+    this.mouseRect.h = offset.y - this.mouseRect.y
+    this.mouseRect.b.x = offset.x
+    this.mouseRect.b.y = offset.y
     this.mouseRect.t = ''
     this.commit()
     this._input.focus()
     ronin.surface.clearGuide()
   }
 
+  this.makeMouseOffset = (pos) => {
+    return { x: pos.x * ronin.surface.ratio, y: pos.y * ronin.surface.ratio }
+  }
+
   // Injection
 
   this.cache = ''
diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js
index 36ab155..b2ee463 100644
--- a/desktop/sources/scripts/surface.js
+++ b/desktop/sources/scripts/surface.js
@@ -6,7 +6,7 @@ function Surface (ronin) {
   this.ratio = window.devicePixelRatio
   // Contexts
   this.context = this.el.getContext('2d')
-  this.guide = this.el.getContext('2d')
+  this.guide = this._guide.getContext('2d')
 
   this.install = function (host) {
     host.appendChild(this.el)
@@ -15,9 +15,6 @@ function Surface (ronin) {
     this._guide.addEventListener('mousedown', ronin.commander.onMouseDown, false)
     this._guide.addEventListener('mousemove', ronin.commander.onMouseMove, false)
     this._guide.addEventListener('mouseup', ronin.commander.onMouseUp, false)
-    // this.context.imageSmoothingEnabled = false
-    this.context.scale(this.ratio, this.ratio)
-    this.guide.scale(this.ratio, this.ratio)
   }
 
   this.start = function () {
@@ -151,8 +148,8 @@ function Surface (ronin) {
     context.clearRect(rect.x, rect.y, rect.w, rect.h)
   }
 
-  this.clearGuide = function () {
-    this.clear(ronin.surface.getFrame(), ronin.surface.guide)
+  this.clearGuide = function (rect = this.getFrame(), context = this.guide) {
+    context.clearRect(rect.x, rect.y, rect.w, rect.h)
   }
 
   this.clone = function (a, b) {