Fixed issue with mouse click erasing main canvas

This commit is contained in:
Devine Lu Linvega 2019-07-20 16:56:25 +09:00
parent 51c40b822f
commit e3f1e72e96
2 changed files with 24 additions and 21 deletions

View File

@ -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 = ''

View File

@ -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) {