diff --git a/README.md b/README.md
index 3a505c1..3f3ca9d 100644
--- a/README.md
+++ b/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.
diff --git a/desktop/sources/scripts/commander.js b/desktop/sources/scripts/commander.js
index 9a0e32c..35e6997 100644
--- a/desktop/sources/scripts/commander.js
+++ b/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()
diff --git a/desktop/sources/scripts/docs.js b/desktop/sources/scripts/docs.js
index ea8dce1..b23d3f0 100644
--- a/desktop/sources/scripts/docs.js
+++ b/desktop/sources/scripts/docs.js
@@ -1,5 +1,4 @@
function Docs (ronin) {
-
this.dict = {}
this.load = () => {
diff --git a/desktop/sources/scripts/library.js b/desktop/sources/scripts/library.js
index 6fb9869..dbbdc2e 100644
--- a/desktop/sources/scripts/library.js
+++ b/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.
- return ronin.surface.open(path, ratio, orientation, mirrorx, mirrory)
+ this.open = async (path, ratio = 1) => { // Imports a graphic file and resizes the frame.
+ 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()
},
diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js
index d4970e3..c7bb04d 100644
--- a/desktop/sources/scripts/surface.js
+++ b/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)
}