Progress on WORKSHOP

WORKSHOP.md

@@ -35,6 +35,24 @@ The previous code will import an image, and position it at `50,100`, at a size o
   (pos 50 100))
 ```
 
+### Crop
+
+To crop the canvas, type the following text, drag an image file onto the Ronin window press `cmd+r`:
+
+```
+(import "~/Desktop/photo.jpg" 
+  (pos 50 100))
+(crop (rect 50 50 300 300)
+```
+
+Alternatively, you could select the cropping area with the cursor with the following code, and selecting an area in the canvas:
+
+```
+(import "~/Desktop/photo.jpg" 
+  (pos 50 100))
+(crop $rect)
+```
+
 ### Export
 
 To export the resulting image, type the following text, drag an image file onto the Ronin window, then drag a folder and add the new file's name, and press `cmd+r`:
@@ -45,7 +63,13 @@ To export the resulting image, type the following text, drag an image file onto
 (export $path)
 ```
 
-### Crop
+For example, a version of that same code with file paths, might look something like:
+
+```
+(import "~/Desktop/photo.jpg" 
+  (pos 50 100))
+(export "~/Desktop/export.png")
+```
 
 ## Draw
 

desktop/sources/scripts/commander.js

@@ -106,52 +106,20 @@ function Commander (ronin) {
 
   // Injection
 
-  this.cache = ''
+  this.cache = this._input.value
 
   this.capture = function () {
+    console.log('capture')
     this.cache = this._input.value
   }
 
-  this.canInject = function () {
-    return this._input.value.indexOf('$path') > -1
-  }
-
   this.injectPath = function (path) {
-    if (this.canInject()) {
-      this._input.value = this._input.value.replace('$path', `"${path}"`)
-    }
+    this._input.value = this._input.value.replace('$path', `"${path}"`)
   }
 
-  this.commit = function () {
-    let value = this.cache
-
-    if (value.indexOf('$') < 0) {
-      return
-    }
-
-    ronin.surface.clearGuide()
-
-    const next = value.split('$')[1]
-
-    if (next.substr(0, 4) === 'pos)') {
-      value = value.replace('($pos)', `(pos ${this.mouseRect.x} ${this.mouseRect.y})`)
-      this.mouseRect.t = 'pos'
-      ronin.surface.stroke(this.mouseRect, 2, 'white', ronin.surface.guide)
-    }
-
-    if (next.substr(0, 5) === 'rect)') {
-      value = value.replace('($rect)', `(rect ${this.mouseRect.x} ${this.mouseRect.y} ${this.mouseRect.w} ${this.mouseRect.h})`)
-      this.mouseRect.t = 'rect'
-      ronin.surface.stroke(this.mouseRect, 2, 'white', ronin.surface.guide)
-    }
-
-    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.mouseRect.t = 'line'
-      ronin.surface.stroke(this.mouseRect, 2, 'white', ronin.surface.guide)
-    }
-
-    this._input.value = value
+  this.commit = function (shape) {
+    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})`)
   }
 
   // Display

desktop/sources/scripts/library.js

@@ -93,7 +93,7 @@ function Library (ronin) {
     ronin.surface.fill(rect, color)
     return rect
   }
-  
+
   this.gradient = (line, colors = ['white', 'black']) => {
     return ronin.surface.linearGradient(line.a.x, line.a.y, line.b.x, line.b.y, colors)
   }

desktop/sources/scripts/ronin.js

@@ -72,30 +72,49 @@ function Ronin () {
     this.bindings[event] = fn
   }
 
-  this.mouseIsDown = false
+  // Cursor
+
+  this.mouseTouch = null
 
   this.onMouseDown = (e, id = 'mouse-down') => {
-    this.mouseIsDown = true
+    this.mouseTouch = { x: e.offsetX, y: e.offsetY }
+    const shape = this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, id)
     if (this.bindings[id]) {
-      this.bindings[id](this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, 'mouse-down'))
+      this.bindings[id](shape)
     }
+    this.commander.capture()
+    this.surface.drawGuide(shape)
   }
 
   this.onMouseMove = (e, id = 'mouse-move') => {
+    const shape = this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, id)
     if (this.bindings[id]) {
-      this.bindings[id](this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, 'mouse-move'))
+      this.bindings[id](shape)
+    }
+    if (this.mouseTouch) {
+      this.commander.commit(shape)
+      this.surface.drawGuide(shape)
     }
   }
 
   this.onMouseUp = (e, id = 'mouse-up') => {
-    this.mouseIsDown = false
+    this.mouseTouch = null
+    const shape = this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, id)
     if (this.bindings[id]) {
-      this.bindings[id](this.makeMouseOffset({ x: e.offsetX, y: e.offsetY }, 'mouse-up'))
+      this.bindings[id](shape)
     }
+    this.surface.clearGuide()
   }
 
   this.makeMouseOffset = (pos, type) => {
-    return { x: pos.x * ronin.surface.ratio, y: pos.y * ronin.surface.ratio, 'type': type, 'is-down': this.mouseIsDown }
+    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 }
   }
 
   // Zoom
@@ -133,7 +152,7 @@ function Ronin () {
     const file = e.dataTransfer.files[0]
     if (!file || !file.name) { console.warn('File', 'Not a valid file.'); return }
     const path = file.path ? file.path : file.name
-    if (this.commander.canInject()) {
+    if (this.commander._input.value.indexOf('$path') > -1) {
       this.commander.injectPath(file.path)
       this.commander.show()
     } else if (path.indexOf('.lisp') > -1) {

desktop/sources/scripts/surface.js

@@ -79,16 +79,16 @@ function Surface (ronin) {
   this.trace = function (shape, context) {
     if (isRect(shape)) {
       this.traceRect(shape, context)
-    } else if (isLine(shape)) {
+    }
+    if (isLine(shape)) {
       this.traceLine(shape, context)
-    } else if (isCircle(shape)) {
+    }
+    if (isCircle(shape)) {
       this.traceCircle(shape, context)
     } else if (isText(shape)) {
       this.traceText(shape, context)
     } else if (isSvg(shape)) {
       this.traceSVG(shape, context)
-    } else {
-      console.warn('Unknown type', shape)
     }
   }
 
@@ -158,6 +158,12 @@ function Surface (ronin) {
     context.clearRect(rect.x, rect.y, rect.w, rect.h)
   }
 
+  this.drawGuide = function (shape, context = this.guide) {
+    this.clearGuide()
+    this.stroke(shape, 5, 'black', context)
+    this.stroke(shape, 2, 'white', context)
+  }
+
   this.clone = function (a, b) {
     this.context.drawImage(this.el, a.x, a.y, a.w, a.h, b.x, b.y, b.w, b.h)
   }