Added mouse picking

desktop/sources/scripts/commander.js

@@ -45,6 +45,74 @@ function Commander (ronin) {
 
   }
 
+  // Mouse
+
+  this.mouseRect = { x: 0, y: 0, w: 0, h: 0, a: { x: 0, y: 0 }, b: { x: 0, y: 0 } }
+  this.mouseDown = false
+
+  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
+    this._status.textContent = `${this.mouseRect.x},${this.mouseRect.y} ${this.mouseRect.w},${this.mouseRect.h}`
+    this.capture()
+  }
+
+  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._status.textContent = `${this.mouseRect.x},${this.mouseRect.y} ${this.mouseRect.w},${this.mouseRect.h}`
+      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
+    this._status.textContent = `${this.mouseRect.x},${this.mouseRect.y} ${this.mouseRect.w},${this.mouseRect.h}`
+    this.commit()
+  }
+
+  // Injection
+
+  this.cache = ''
+
+  this.capture = function () {
+    this.cache = this._input.value
+  }
+
+  this.commit = function () {
+    let value = this.cache
+
+    if (value.indexOf('$') < 0) {
+      return
+    }
+
+    const next = value.split('$')[1]
+
+    if (next.substr(0, 4) === 'pos)') {
+      value = value.replace('($pos)', `(pos ${this.mouseRect.x} ${this.mouseRect.y})`)
+    }
+
+    if (next.substr(0, 5) === 'rect)') {
+      value = value.replace('($rect)', `(rect ${this.mouseRect.x} ${this.mouseRect.y} ${this.mouseRect.w} ${this.mouseRect.h})`)
+    }
+
+    if (next.substr(0, 5) === 'line)') {
+      value = value.replace('($line)', `(line (pos ${this.mouseRect.a.x} ${this.mouseRect.a.y}) (pos ${this.mouseRect.b.x} ${this.mouseRect.b.y}))`)
+    }
+
+    this._input.value = value
+  }
+
   // Events
 
   this.drag = function (e) {

desktop/sources/scripts/surface.js

@@ -9,6 +9,10 @@ function Surface (ronin) {
   this.install = function (host) {
     host.appendChild(this.el)
     window.addEventListener('resize', (e) => { this.onResize() }, false)
+
+    this.el.addEventListener('mousedown', ronin.commander.onMouseDown, false)
+    this.el.addEventListener('mousemove', ronin.commander.onMouseMove, false)
+    this.el.addEventListener('mouseup', ronin.commander.onMouseUp, false)
   }
 
   this.start = function () {