Improved cursor tools

desktop/sources/scripts/commander.js

@@ -109,20 +109,35 @@ function Commander (ronin) {
   this.cache = this._input.value
 
   this.capture = function () {
-    if (this._input.value.indexOf('$') < 1) { return }
-    console.log('capture')
+    if (this._input.value.indexOf('$') < 0) { return }
     this.cache = this._input.value
   }
 
   this.injectPath = function (path) {
-    if (this._input.value.indexOf('$') < 1) { return }
+    if (this._input.value.indexOf('$') < 0) { return }
     this._input.value = this._input.value.replace('$path', `"${path}"`)
   }
 
   this.commit = function (shape) {
-    if (this._input.value.indexOf('$') < 1) { return }
-    console.log('inject')
-    this._input.value = this.cache.replace('$rect', `(rect ${shape.x} ${shape.y} ${shape.w} ${shape.h})`).replace('$pos', `(pos ${shape.x} ${shape.y})`).replace('$line', `(line ${shape.a.x} ${shape.a.y} ${shape.b.x} ${shape.b.y})`)
+    if (this._input.value.indexOf('$') < 0) { return }
+    const segs = this.cache.split('$')
+    const seg = segs[1]
+    const words = seg.split(' ')
+    const word = words[0]
+    if (word === 'rect' && shape.rect) {
+      const rect = shape.rect
+      this._input.value = this.cache.replace('$rect', `(rect ${rect.x} ${rect.y} ${rect.w} ${rect.h})`)
+    } else if (word === 'pos' && shape.pos) {
+      const pos = shape.pos
+      this._input.value = this.cache.replace('$pos', `(pos ${pos.x} ${pos.y})`)
+    } else if (word === 'line' && shape.line) {
+      const line = shape.line
+      this._input.value = this.cache.replace('$line', `(line ${line.a.x} ${line.a.y} ${line.b.x} ${line.b.y})`)
+    } else if (word === 'circle' && shape.circle) {
+      const circle = shape.circle
+      console.log(circle)
+      this._input.value = this.cache.replace('$circle', `(circle ${circle.cx} ${circle.cy} ${circle.r})`)
+    }
   }
 
   // Display

desktop/sources/scripts/library.js

@@ -393,7 +393,7 @@ function Library (ronin) {
         acc += img.data[x * 4 + y * rect.w * 4 + i % 4] * kernel[kx][ky] / sigma
       }
       out[i] = acc
-      if (i % 4 == 3) out[i] = 255
+      if (i % 4 === 3) out[i] = 255
     }
     img.data.set(out, 0)
     ronin.surface.context.putImageData(img, rect.x, rect.y)

desktop/sources/scripts/ronin.js

@@ -76,11 +76,12 @@ function Ronin () {
 
   // Cursor
 
-  this.mouseTouch = null
+  this.mouseOrigin = null
 
   this.onMouseDown = (e, id = 'mouse-down') => {
-    this.mouseTouch = { x: e.offsetX, y: e.offsetY }
-    const shape = this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, id)
+    const pos = { x: e.offsetX * ronin.surface.ratio, y: e.offsetY * ronin.surface.ratio }
+    this.mouseOrigin = pos
+    const shape = this.mouseShape(pos, id)
     if (this.bindings[id]) {
       this.bindings[id](shape)
     }
@@ -89,35 +90,49 @@ function Ronin () {
   }
 
   this.onMouseMove = (e, id = 'mouse-move') => {
-    const shape = this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, id)
+    const pos = { x: e.offsetX * ronin.surface.ratio, y: e.offsetY * ronin.surface.ratio }
+    const shape = this.mouseShape(pos, id)
     if (this.bindings[id]) {
       this.bindings[id](shape)
     }
-    if (this.mouseTouch) {
+    if (this.mouseOrigin) {
       this.commander.commit(shape)
       this.surface.drawGuide(shape)
     }
   }
 
   this.onMouseUp = (e, id = 'mouse-up') => {
-    const shape = this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, id)
-    this.mouseTouch = null
+    const pos = { x: e.offsetX * ronin.surface.ratio, y: e.offsetY * ronin.surface.ratio }
+    const shape = this.mouseShape(pos, id)
     if (this.bindings[id]) {
       this.bindings[id](shape)
     }
+    this.mouseOrigin = null
     this.surface.clearGuide()
-    console.log(this.bindings)
   }
 
-  this.makeMouseOffset = (pos, type) => {
-    if (!this.mouseTouch) { return }
-    const x = this.mouseTouch.x * ronin.surface.ratio
-    const y = this.mouseTouch.y * ronin.surface.ratio
-    const w = this.mouseTouch.x ? (pos.x * ronin.surface.ratio) - (this.mouseTouch.x * ronin.surface.ratio) : 0
-    const h = this.mouseTouch.y ? (pos.y * ronin.surface.ratio) - (this.mouseTouch.y * ronin.surface.ratio) : 0
-    const a = { x, y }
-    const b = { x: x + w, y: y + h }
-    return { x, y, w, h, a, b, type, 'is-down': this.mouseTouch !== null }
+  this.mouseShape = (position, type) => {
+    if (!this.mouseOrigin) { return }
+    const x = position.x
+    const y = position.y
+    const pos = { x, y }
+    const rect = {
+      x: this.mouseOrigin.x,
+      y: this.mouseOrigin.y,
+      w: this.mouseOrigin.x ? pos.x - this.mouseOrigin.x : 0,
+      h: this.mouseOrigin.y ? pos.y - this.mouseOrigin.y : 0
+    }
+    const line = {
+      a: { x: this.mouseOrigin.x, y: this.mouseOrigin.y },
+      b: { x: pos.x, y: pos.y }
+    }
+    const distance = Math.sqrt(((line.a.x - line.b.x) * (line.a.x - line.b.x)) + ((line.a.y - line.b.y) * (line.a.y - line.b.y)))
+    const circle = {
+      cx: this.mouseOrigin.x,
+      cy: this.mouseOrigin.y,
+      r: distance
+    }
+    return { x, y, line, rect, pos, circle, type, 'is-down': type !== 'mouse-up' ? true : null }
   }
 
   // Zoom

desktop/sources/scripts/surface.js

@@ -166,8 +166,12 @@ function Surface (ronin) {
 
   this.drawGuide = function (shape, context = this.guide) {
     this.clearGuide()
-    this.stroke(shape, 3, 'black', context)
-    this.stroke(shape, 1.5, 'white', context)
+    this.stroke(shape.rect, 3, 'black', context)
+    this.stroke(shape.line, 3, 'black', context)
+    this.stroke(shape.circle, 3, 'black', context)
+    this.stroke(shape.rect, 1.5, 'white', context)
+    this.stroke(shape.line, 1.5, 'white', context)
+    this.stroke(shape.circle, 1.5, 'white', context)
   }
 
   this.clone = function (a, b) {