Added clone function

desktop/main.js

@@ -9,7 +9,7 @@ app.win = null
 
 app.on('ready', () => {
   app.win = new BrowserWindow({
-    width: 660,
+    width: 780,
     height: 392,
     minWidth: 320,
     minHeight: 320,

desktop/sources/links/main.css

@@ -3,8 +3,8 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular
 *:focus {outline: none; }
 
 #ronin { background:var(--b_low); height: 100vh; width:100vw; -webkit-app-region: drag; }
-#ronin #commander { z-index: 9000; top: 15px; position: absolute; left: 15px; width: calc(50vw - 60px); height: calc(100vh - 60px); padding: 15px; border-right: 1px solid #333; -webkit-app-region: no-drag;}
+#ronin #commander { z-index: 9000; top: 0px; left: 0px; position: absolute; width: calc(50vw - 90px); height: calc(100vh - 60px); margin: 30px; border-right: 1px solid #333; -webkit-app-region: no-drag; padding-right: 30px;}
 #ronin #commander textarea { background: none; width: 100%; height: calc(100vh - 75px); resize: none; font-size: 12px;color: white; }
 #ronin #commander div#status { color:#555; }
 
-#ronin canvas#surface { position: absolute; right:15px; top:15px; 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; -webkit-user-select: none;-webkit-app-region: no-drag;}
+#ronin canvas#surface { position: absolute; right:30px; top:30px; 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; -webkit-user-select: none;-webkit-app-region: no-drag;}

desktop/sources/scripts/commander.js

@@ -17,7 +17,7 @@ function Commander (ronin) {
   }
 
   this.start = function () {
-    this._status.textContent = 'Idle, RUN(cmd+enter).'
+    this._status.textContent = 'Idle. (zoom 100%)'
     this._input.focus()
     this.run()
   }

desktop/sources/scripts/library.js

@@ -4,6 +4,14 @@ function Library (ronin) {
 
   // Rects
 
+  this.pos = (x, y) => {
+    return { x, y }
+  }
+
+  this.size = (w, h) => {
+    return { w, h }
+  }
+
   this.rect = (x, y, w, h) => {
     return { x, y, w, h }
   }
@@ -12,17 +20,23 @@ function Library (ronin) {
     return { x: 0, y: 0, w: Math.floor(window.innerWidth / 2) - 15, h: Math.floor(window.innerHeight) - 30 }
   }
 
-  this.stroke = (rect, thickness, color) => {
+  // Copy/Paste
+
+  this.clone = (a, b) => {
+    ronin.surface.clone(a, b)
+  }
+
+  this.stroke = (rect = this.frame(), thickness, color) => {
     ronin.surface.stroke(rect, thickness, color)
     return rect
   }
 
-  this.fill = (rect = this.frame(), thickness, color) => {
+  this.fill = (rect = this.frame(), color) => {
-    ronin.surface.fill(rect, thickness, color)
+    ronin.surface.fill(rect, color)
     return rect
   }
 
-  this.clear = (rect) => {
+  this.clear = (rect = this.frame()) => {
     ronin.surface.clear(rect)
     return rect
   }

desktop/sources/scripts/surface.js

@@ -35,23 +35,26 @@ function Surface (ronin) {
     this.context.closePath()
   }
 
-  this.fill = (rect, width, color) => {
+  this.fill = (rect, color) => {
     this.context.beginPath()
     this.context.moveTo(rect.x, rect.y)
     this.context.lineTo(rect.x + rect.w, rect.y)
     this.context.lineTo(rect.x + rect.w, rect.y + rect.h)
     this.context.lineTo(rect.x, rect.y + rect.h)
     this.context.lineTo(rect.x, rect.y)
-    this.context.lineWidth = width
     this.context.fillStyle = color
     this.context.fill()
     this.context.closePath()
   }
 
-  this.clear = function (rect) {
+  this.clear = function (rect = this.getRect()) {
     this.context.clearRect(rect.x, rect.y, rect.w, rect.h)
   }
 
+  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)
+  }
+
   this.addGuide = function (rect) {
     this.guides.push(rect)
     this.update()
@@ -73,6 +76,6 @@ function Surface (ronin) {
   }
 
   this.getRect = function () {
-    return { x: 0, y: 0, w: Math.floor(window.innerWidth / 2) - 15, h: Math.floor(window.innerHeight) - 30 }
+    return { x: 0, y: 0, w: Math.floor(window.innerWidth / 2) - 30, h: Math.floor(window.innerHeight) - 60 }
   }
 }

examples/test1.lisp

@@ -1,5 +1,7 @@
 ; test file
 
-((stroke (rect 15 15 120 80) 2 "red")
+((clear)
-(fill (rect 30 30 120 80) 2 "blue")
+  (stroke (rect 15 15 120 80) 2 "red")
-(clear (rect 45 45 45 45)))
+  (fill (rect 30 30 120 80) "#72dec2")
+  (clear (rect 45 45 45 45))
+  (clone (rect 0 0 200 200) (rect 100 100 200 200)))