Added line type

desktop/sources/scripts/commander.js

@@ -25,7 +25,6 @@ function Commander (ronin) {
   this.run = function (txt = this._input.value) {
     console.log('========')
     const inter = new Lisp(txt, ronin.library)
-    console.log(inter)
     inter.toPixels()
   }
 

desktop/sources/scripts/library.js

@@ -12,8 +12,12 @@ function Library (ronin) {
     return { w, h }
   }
 
-  this.rect = (x, y, w, h) => {
-    return { x, y, w, h }
+  this.rect = (x, y, w, h, t = 'rect') => {
+    return { x, y, w, h, t }
+  }
+
+  this.line = (a, b, t = 'line') => {
+    return { a, b, t }
   }
 
   this.frame = () => {
@@ -24,11 +28,12 @@ function Library (ronin) {
 
   this.clone = (a, b) => {
     ronin.surface.clone(a, b)
+    return [a, b]
   }
 
-  this.stroke = (rect = this.frame(), thickness, color) => {
-    ronin.surface.stroke(rect, thickness, color)
-    return rect
+  this.stroke = (shape = this.frame(), thickness, color) => {
+    ronin.surface.stroke(shape, thickness, color)
+    return shape
   }
 
   this.fill = (rect = this.frame(), color) => {

desktop/sources/scripts/surface.js

@@ -22,7 +22,17 @@ function Surface (ronin) {
     }
   }
 
-  this.stroke = (rect, width, color) => {
+  // Shape
+
+  this.stroke = (shape, width, color) => {
+    if (shape.t === 'rect') {
+      this.strokeRect(shape, width, color)
+    } else if (shape.t === 'line') {
+      this.strokeLine(shape, width, color)
+    }
+  }
+
+  this.strokeRect = (rect, width, color) => {
     this.context.beginPath()
     this.context.moveTo(rect.x, rect.y)
     this.context.lineTo(rect.x + rect.w, rect.y)
@@ -35,7 +45,25 @@ function Surface (ronin) {
     this.context.closePath()
   }
 
-  this.fill = (rect, color) => {
+  this.strokeLine = function (line, width, color) {
+    this.context.beginPath()
+    this.context.moveTo(line.a.x, line.a.y)
+    this.context.lineTo(line.b.x, line.b.y)
+    this.context.lineWidth = width
+    this.context.strokeStyle = color
+    this.context.stroke()
+    this.context.closePath()
+  }
+
+  // Fill
+
+  this.fill = (shape, color) => {
+    if (shape.t === 'rect') {
+      this.fillRect(shape, color)
+    }
+  }
+
+  this.fillRect = (rect, color) => {
     this.context.beginPath()
     this.context.moveTo(rect.x, rect.y)
     this.context.lineTo(rect.x + rect.w, rect.y)

examples/test1.lisp

@@ -4,4 +4,6 @@
   (stroke (rect 15 15 120 80) 2 "red")
   (fill (rect 30 30 120 80) "#72dec2")
   (clear (rect 45 45 45 45))
-  (clone (rect 0 0 200 200) (rect 100 100 200 200)))
+  (clone (rect 0 0 200 200) (rect 100 100 200 200))
+  (stroke (line (pos 15 15) (pos 200 200)) 10 "red")
+)