Merge branch 'master' of github.com:hundredrabbits/Ronin

desktop/sources/links/main.css

@@ -9,4 +9,5 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular
 #ronin #wrapper #commander div#status { color:#555; position: absolute; bottom: 0px; }
 #ronin #wrapper #commander.hidden { margin-left:-331px; }
 
-#ronin canvas#surface { position: absolute; right:0px; top:0px; -webkit-user-select: none;-webkit-app-region: no-drag; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='1' fill='%23555'></circle></svg>"); background-size: 10px 10px; background-position: -4px -4px; }
+#ronin canvas#surface,#ronin canvas#guide { position: absolute; right:0px; top:0px; -webkit-user-select: none;-webkit-app-region: no-drag; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='1' fill='%23555'></circle></svg>"); background-size: 10px 10px; background-position: -4px -4px; }
+#ronin canvas#guide { background:none; }

desktop/sources/scripts/commander.js

@@ -34,7 +34,7 @@ function Commander (ronin) {
   }
 
   this.setStatus = function (msg) {
-    this._status.textContent = `${msg}`
+    this._status.textContent = `${msg.substr(0, 40)}`
   }
 
   this.update = function () {
@@ -60,6 +60,7 @@ function Commander (ronin) {
     this.mouseRect.y = e.offsetY
     this.mouseRect.a.x = e.offsetX
     this.mouseRect.a.y = e.offsetY
+    this.mouseRect.t = 'pos'
     this._status.textContent = `${this.mouseRect.x},${this.mouseRect.y} ${this.mouseRect.w},${this.mouseRect.h}`
     this.capture()
     this.show()
@@ -82,9 +83,11 @@ function Commander (ronin) {
     this.mouseRect.h = e.offsetY - this.mouseRect.y
     this.mouseRect.b.x = e.offsetX
     this.mouseRect.b.y = e.offsetY
+    this.mouseRect.t = ''
     this._status.textContent = `${this.mouseRect.x},${this.mouseRect.y} ${this.mouseRect.w},${this.mouseRect.h}`
     this.commit()
     this._input.focus()
+    ronin.surface.clearGuide()
   }
 
   // Injection
@@ -106,18 +109,26 @@ function Commander (ronin) {
       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

desktop/sources/scripts/source.js

@@ -101,7 +101,7 @@ function Source (ronin) {
     console.log('Source', 'Looking for changes..')
     if (!this.path) {
       console.log('Source', 'File is unsaved..')
-      if (ronin.commander._input.value.length() > 2) {
+      if (ronin.commander._input.value.length > 2) {
         console.log('Source', `File is not empty.`)
         return true
       }

desktop/sources/scripts/surface.js

@@ -1,15 +1,19 @@
 function Surface (ronin) {
   this.el = document.createElement('canvas')
   this.el.id = 'surface'
+  this._guide = document.createElement('canvas')
+  this._guide.id = 'guide'
   this.ratio = window.devicePixelRatio
   this.context = this.el.getContext('2d')
+  this.guide = this.el.getContext('2d')
 
   this.install = function (host) {
     host.appendChild(this.el)
+    host.appendChild(this._guide)
     window.addEventListener('resize', (e) => { this.onResize() }, false)
-    this.el.addEventListener('mousedown', ronin.commander.onMouseDown, false)
+    this._guide.addEventListener('mousedown', ronin.commander.onMouseDown, false)
-    this.el.addEventListener('mousemove', ronin.commander.onMouseMove, false)
+    this._guide.addEventListener('mousemove', ronin.commander.onMouseMove, false)
-    this.el.addEventListener('mouseup', ronin.commander.onMouseUp, false)
+    this._guide.addEventListener('mouseup', ronin.commander.onMouseUp, false)
   }
 
   this.start = function () {
@@ -32,54 +36,54 @@ function Surface (ronin) {
 
   // Shape
 
-  this.stroke = (shape, width, color) => {
+  this.stroke = (shape, width, color, context = this.context) => {
-    this.context.beginPath()
+    context.beginPath()
-    this.trace(shape)
+    this.trace(shape, context)
-    this.context.lineWidth = width
+    context.lineWidth = width
-    this.context.strokeStyle = color
+    context.strokeStyle = color
-    this.context.stroke()
+    context.stroke()
-    this.context.closePath()
+    context.closePath()
   }
 
   // Fill
 
-  this.fill = (shape, color) => {
+  this.fill = (shape, color, context) => {
-    this.context.beginPath()
+    context.beginPath()
-    this.trace(shape)
+    this.trace(shape, context)
-    this.context.fillStyle = color
+    context.fillStyle = color
-    this.context.fill()
+    context.fill()
-    this.context.closePath()
+    context.closePath()
   }
 
   // Tracers
 
-  this.trace = function (shape) {
+  this.trace = function (shape, context) {
     if (shape.t === 'rect') {
-      this.traceRect(shape)
+      this.traceRect(shape, context)
     } else if (shape.t === 'line') {
-      this.traceLine(shape)
+      this.traceLine(shape, context)
     } else if (shape.t === 'circle') {
-      this.traceCircle(shape)
+      this.traceCircle(shape, context)
     } else {
       console.warn('Unknown type')
     }
   }
 
-  this.traceRect = function (rect) {
+  this.traceRect = function (rect, context) {
-    this.context.moveTo(rect.x, rect.y)
+    context.moveTo(rect.x, rect.y)
-    this.context.lineTo(rect.x + rect.w, rect.y)
+    context.lineTo(rect.x + rect.w, rect.y)
-    this.context.lineTo(rect.x + rect.w, rect.y + rect.h)
+    context.lineTo(rect.x + rect.w, rect.y + rect.h)
-    this.context.lineTo(rect.x, rect.y + rect.h)
+    context.lineTo(rect.x, rect.y + rect.h)
-    this.context.lineTo(rect.x, rect.y)
+    context.lineTo(rect.x, rect.y)
   }
 
-  this.traceLine = function (line) {
+  this.traceLine = function (line, context) {
-    this.context.moveTo(line.a.x, line.a.y)
+    context.moveTo(line.a.x, line.a.y)
-    this.context.lineTo(line.b.x, line.b.y)
+    context.lineTo(line.b.x, line.b.y)
   }
 
-  this.traceCircle = function (circle) {
+  this.traceCircle = function (circle, context) {
-    this.context.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI)
+    context.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI)
   }
 
   // IO
@@ -107,8 +111,12 @@ function Surface (ronin) {
     }
   }
 
-  this.clear = function (rect = this.getFrame()) {
+  this.clear = function (rect = this.getFrame(), context = this.context) {
-    this.context.clearRect(rect.x, rect.y, rect.w, rect.h)
+    context.clearRect(rect.x, rect.y, rect.w, rect.h)
+  }
+
+  this.clearGuide = function () {
+    this.clear(ronin.surface.getFrame(), ronin.surface.guide)
   }
 
   this.clone = function (a, b) {
@@ -120,6 +128,10 @@ function Surface (ronin) {
     this.el.height = size.h
     this.el.style.width = size.w + 'px'
     this.el.style.height = size.h + 'px'
+    this._guide.width = size.w
+    this._guide.height = size.h
+    this._guide.style.width = size.w + 'px'
+    this._guide.style.height = size.h + 'px'
   }
 
   this.maximize = function () {

examples/logic.lisp

@@ -1,11 +0,0 @@
-(
-  (echo (lt 3 4))
-
-  (echo (and 1 2 true 4))
-
-  (echo (and 1 false 2))
-
-  (echo (or false false 2 false))
-
-  (if (gt 1 2) (echo "ok") (echo "not ok"))
-)

examples/math.lisp

@@ -1,5 +0,0 @@
-(
-    (echo (add 2 3))
-    (echo (sub 22 3 4 5))
-    (echo (mul 2 3 4 5))
-)

examples/pixels.lisp

@@ -4,6 +4,6 @@
 
   ; Draw photo 
   
-  (draw (path "/Users/VillaMoirai/Desktop/510.jpg"))
+  (draw (path "/Users/VillaMoirai/Desktop/clip.jpg"))
   (print (select (rect 0 0 10 10)))
 )