Added splash & add offset to SVG

desktop/sources/scripts/commander.js

@@ -26,7 +26,7 @@ function Commander (ronin) {
 
   this.start = function () {
     this.setStatus('Ready.')
-    this.run()
+    this.load(this.splash)
     this.show()
   }
 
@@ -41,6 +41,10 @@ function Commander (ronin) {
     this.run(txt)
   }
 
+  this.clear = function () {
+    this.load('')
+  }
+
   this.reindent = function () {
     let val = this._input.value.replace(/\n/g, '').replace(/ +(?= )/g, '').replace(/\( \(/g, '((').replace(/\) \)/g, '))').trim()
     let depth = 0
@@ -212,5 +216,24 @@ function Commander (ronin) {
     }
   }
 
+  // Splash
+
+  this.splash = `; welcome to ronin - v2.1
+(clear) 
+; ronin path 
+(def align {
+    :x (sub (of (frame) :center) 500) 
+    :y (sub (of (frame) :middle) 150)})
+; outline 
+(fill 
+  (svg 
+    (of align :x) 
+    (of align :y) "M15,15 L15,15 L285,15 L285,285 L15,285 Z") "#fff")
+; stroke
+(stroke 
+  (svg 
+    (of align :x) 
+    (of align :y) "M60,60 L195,60 A45,45 0 0,1 240,105 A45,45 0 0,1 195,150 L60,150 M195,150 A45,45 0 0,1 240,195 L240,240 ") 5 "#000")`
+
   String.prototype.insert = function (s, i) { return [this.slice(0, i), `${s}`, this.slice(i)].join('') }
 }

desktop/sources/scripts/library.js

@@ -78,8 +78,8 @@ function Library (ronin) {
     return { x, y, p, t, f }
   }
 
-  this.svg = (d) => { // Returns a svg shape.
-    return { d }
+  this.svg = (x, y, d) => { // Returns a svg shape.
+    return { x, y, d }
   }
 
   // Actions

desktop/sources/scripts/source.js

@@ -15,6 +15,7 @@ function Source (ronin) {
     console.log('Source', 'Make a new file..')
     this.path = null
     ronin.surface.clear()
+    ronin.commander.clear()
     ronin.log(`New file.`)
   }
 

desktop/sources/scripts/surface.js

@@ -34,7 +34,10 @@ function Surface (ronin) {
     } else if (isSvg(shape)) {
       context.lineWidth = width
       context.strokeStyle = color
+      context.save()
+      context.translate(shape.x, shape.y)
       context.stroke(new Path2D(shape.d))
+      context.restore()
     } else {
       context.stroke()
     }
@@ -48,11 +51,14 @@ function Surface (ronin) {
     context.fillStyle = color
     this.trace(shape, context)
     if (isText(shape)) {
-      context.font = `${shape.g}px ${shape.f}`
-      context.fillText(shape.s, shape.x, shape.y)
+      context.font = `${shape.p}px ${shape.f}`
+      context.fillText(shape.t, shape.x, shape.y)
     } else if (isSvg(shape)) {
       context.fillStyle = color
+      context.save()
+      context.translate(shape.x, shape.y)
       context.fill(new Path2D(shape.d))
+      context.restore()
     } else {
       context.fill()
     }
@@ -174,7 +180,7 @@ function Surface (ronin) {
   }
 
   this.getFrame = function () {
-    return { x: 0, y: 0, w: this.el.width, h: this.el.height, t: 'rect' }
+    return { x: 0, y: 0, w: this.el.width, h: this.el.height, t: 'rect', c: this.el.width / 2, m: this.el.height / 2 }
   }
 
   this.fitWindow = function (size) {

examples/basics/svg.lisp

@@ -1,8 +1,20 @@
-
+; welcome to ronin - v2.1
 (clear) 
 ; ronin path 
-(stroke 
-  (svg "M60,60 L195,60 A45,45 0 0,1 240,105 A45,45 0 0,1 195,150 L60,150 M195,150 A45,45 0 0,1 240,195 L240,240 ") 2 "white")
+(def align {:x 
+  (sub 
+    (of 
+      (frame) :center) 500) :y 
+  (sub 
+    (of 
+      (frame) :middle) 150)})
 ; outline 
+(fill 
+  (svg 
+    (of align :x) 
+    (of align :y) "M15,15 L15,15 L285,15 L285,285 L15,285 Z") "#fff")
+; stroke
 (stroke 
-  (svg "M15,15 L15,15 L285,15 L285,285 L15,285 Z") 1 "#555")
+  (svg 
+    (of align :x) 
+    (of align :y) "M60,60 L195,60 A45,45 0 0,1 240,105 A45,45 0 0,1 195,150 L60,150 M195,150 A45,45 0 0,1 240,195 L240,240 ") 5 "#000")