Added (mirror:x), (mirror:y) and (orient), fixes #103

README.md

@@ -40,7 +40,7 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
 
 - `(import path shape ~alpha)` Imports a graphic file with format.
 - `(export path ~format ~quality)` Exports a graphic file with format.
-- `(open path ~ratio ~orientation ~mirrorx ~mirrory)` Imports a graphic file and resizes the frame.
+- `(open path ~ratio)` Imports a graphic file and resizes the frame.
 - `(exit ~force)` Exits Ronin.
 - `(pos ~x ~y)` Returns a position shape.
 - `(line ax ay bx by)` Returns a line shape.
@@ -62,7 +62,9 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
 - `(drag ~rect)` Drag a part of the canvas.
 - `(view a b)` View a part of the canvas.
 - `(pick ~shape)` Returns the color of a pixel at pos, or of the average of the pixels in rect.
-- `(transform)` The transform toolkit.
+- `(orient ~deg)` Orient canvas with angle in degrees.
+- `(mirror)` Mirror canvas, methods: `x`, `y`.
+- `(transform)` The transform toolkit, methods `push`, `pop`, `reset`, `move`, `scale`, `rotate`.
 - `(stroke shape color ~thickness)` Strokes a shape.
 - `(fill ~rect)` Fills a shape.
 - `(clear ~rect)` Clears a rect.

desktop/sources/scripts/commander.js

@@ -76,7 +76,6 @@ function Commander (ronin) {
     const pos = this._input.value.substr(0, this._input.selectionStart).lastIndexOf('(')
     return this._input.value.substr(pos).split(' ')[0].replace(/\(/g, '').replace(/\)/g, '').trim()
   }
-  
 
   this.reindent = function () {
     let val = this._input.value.replace(/\n/g, '').replace(/ \)/g, ')').replace(/ +(?= )/g, '').replace(/\( \(/g, '((').replace(/\) \)/g, '))').trim()

desktop/sources/scripts/docs.js

@@ -1,5 +1,4 @@
 function Docs (ronin) {
-  
   this.dict = {}
 
   this.load = () => {

desktop/sources/scripts/library.js

@@ -19,8 +19,8 @@ function Library (ronin) {
     return path
   }
 
-  this.open = async (path, ratio = 1, orientation = 0, mirrorx = 1, mirrory = 1) => { // Imports a graphic file and resizes the frame.
+  this.open = async (path, ratio = 1) => { // Imports a graphic file and resizes the frame.
-    return ronin.surface.open(path, ratio, orientation, mirrorx, mirrory)
+    return ronin.surface.open(path, ratio)
   }
 
   this.exit = (force = false) => { // Exits Ronin.
@@ -144,9 +144,46 @@ function Library (ronin) {
     return this.color(this.floor(sum[0] / count), this.floor(sum[1] / count), this.floor(sum[2] / count))
   }
 
+  this.orient = async (deg = 0) => { // Orient canvas with angle in degrees.
+    const mode = Math.floor(deg / 90) % 4
+    const img = document.createElement('img')
+    img.onload = () => {
+      const offset = { x: [0, 0, -img.width, -img.width], y: [0, -img.height, -img.height, 0] }
+      const rect = { x: 0, y: 0, w: (mode === 1 || mode === 3 ? img.height : img.width), h: (mode === 1 || mode === 3 ? img.width : img.height) }
+      ronin.surface.resize(rect, false)
+      ronin.surface.context.save()
+      ronin.surface.context.rotate(this.rad(mode * 90))
+      ronin.surface.context.translate(offset.x[mode], offset.y[mode])
+      ronin.surface.context.drawImage(img, 0, 0)
+      ronin.surface.context.restore()
+    }
+    img.src = ronin.surface.el.toDataURL()
+  }
+
+  this.mirror = { // Mirror canvas, methods: `x`, `y`.
+    x: async (j = 0) => {
+      const img = document.createElement('img')
+      img.src = ronin.surface.el.toDataURL()
+      ronin.surface.context.save()
+      ronin.surface.context.translate(img.width, 0)
+      ronin.surface.context.scale(-1, 1)
+      ronin.surface.context.drawImage(img, 0, 0)
+      ronin.surface.context.restore()
+    },
+    y: async (j = 0) => {
+      const img = document.createElement('img')
+      img.src = ronin.surface.el.toDataURL()
+      ronin.surface.context.save()
+      ronin.surface.context.translate(0, img.height)
+      ronin.surface.context.scale(1, -1)
+      ronin.surface.context.drawImage(img, 0, 0)
+      ronin.surface.context.restore()
+    }
+  }
+
   // Transforms
 
-  this.transform = { // The transform toolkit.
+  this.transform = { // The transform toolkit, methods `push`, `pop`, `reset`, `move`, `scale`, `rotate`.
     push: () => {
       ronin.surface.context.save()
     },

desktop/sources/scripts/surface.js

@@ -21,8 +21,6 @@ function Surface (ronin) {
     this._guide.addEventListener('keydown', ronin.onKeyDown, false)
     this._guide.addEventListener('keyup', ronin.onKeyUp, false)
     this._guide.addEventListener('keypress', ronin.onKeyPress, false)
-
-    this.frame = this.getFrame()
   }
 
   this.start = function () {
@@ -151,36 +149,19 @@ function Surface (ronin) {
 
   // IO
 
-  this.open = function (path, ratio = 1, orientation = 0, mirrorx = 1, mirrory = 1) {
+  this.open = (path, ratio = 1) => {
     return new Promise(resolve => {
       const img = new Image()
       img.src = path
       img.onload = () => {
-        this.drawWithOrientation(img, ratio, orientation, mirrorx, mirrory)
+        const rect = { x: 0, y: 0, w: img.width * ratio, h: img.height * ratio }
+        this.resize(rect)
+        this.context.drawImage(img, rect.x, rect.y, rect.w, rect.h)
         resolve()
       }
     })
   }
 
-  this.drawWithOrientation = function (img, ratio, orientation = 0, mirrorx = 1, mirrory = 1) { // x, y, w, h, degrees
-    const outputRect = { x: 0, y: 0, w: parseInt((orientation === 1 || orientation === 3 ? img.height : img.width) * ratio), h: parseInt((orientation === 1 || orientation === 3 ? img.width : img.height) * ratio) }
-    const rect = { x: 0, y: 0, w: parseInt(img.width * ratio), h: parseInt(img.height * ratio) }
-    this.resize(outputRect, true)
-    this.context.save()
-
-    this.context.rotate((orientation * 90) * Math.PI / 180.0)
-    if (orientation === 1) {
-      this.context.translate(0, -rect.h)
-    } else if (orientation === 2) {
-      this.context.translate(-rect.w, -rect.h)
-    } else if (orientation === 3) {
-      this.context.translate(-rect.w, 0)
-    }
-    this.context.scale(mirrorx, mirrorx)
-    this.context.drawImage(img, rect.x, rect.y, rect.w * mirrorx, rect.h * mirrory)
-    this.context.restore()
-  }
-
   this.draw = function (img, shape = this.getFrame(), alpha = 1) {
     return new Promise(resolve => {
       img.onload = () => {
@@ -227,7 +208,6 @@ function Surface (ronin) {
     if (shape.circle) {
       this.stroke(shape.circle, 'black', 4, context)
     }
-
     this.stroke(shape.rect || shape, color, 1.5, context)
     if (shape.pos) { this.stroke(shape.pos, color, 1.5, context) }
     if (shape.line) { this.stroke(shape.line, color, 1.5, context) }
@@ -248,7 +228,6 @@ function Surface (ronin) {
     this._guide.height = size.h
     this._guide.style.width = (size.w / this.ratio) + 'px'
     this._guide.style.height = (size.h / this.ratio) + 'px'
-    this.frame = this.getFrame()
     if (fit === true) {
       this.fitWindow(size)
     }