diff --git a/README.md b/README.md
index 6bc4951..da2a487 100644
--- a/README.md
+++ b/README.md
@@ -53,7 +53,7 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
- `(text x y p t ~a ~f)` Returns a text shape.
- `(svg x y d)` Returns a svg shape.
- `(color r g b ~a)` Returns a color object.
-- `(hsl r g b ~a)` Returns a HSL color object.
+- `(hsl h s l ~a)` returns a HSL color object
- `(frame)` Returns a rect of the frame.
- `(resize ~w)` Resizes the canvas to target w and h, returns the rect.
- `(rescale ~w ~h)` Rescales the canvas to target ratio of w and h, returns the rect.
@@ -63,14 +63,7 @@ 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.
-- `(move x y)`
-- `(rotate angle)`
-- `(scale w h)`
-- `(transform a b c d e f)`
-- `(setTransform a b c d e f)`
-- `(resetTransform)`
-- `(pushTransform)`
-- `(popTransform)`
+- `(transform)` The transform toolkit, see examples.
- `(stroke shape color ~thickness)` Strokes a shape.
- `(fill ~rect)` Fills a shape.
- `(clear ~rect)` Clears a rect.
diff --git a/desktop/sources/index.html b/desktop/sources/index.html
index f9e649f..5050581 100644
--- a/desktop/sources/index.html
+++ b/desktop/sources/index.html
@@ -48,6 +48,7 @@
ronin.controller.add("default","View","Zoom Out",() => { ronin.modZoom(-0.25) },"CmdOrCtrl+-")
ronin.controller.add("default","View","Zoom Reset",() => { ronin.modZoom(1,true) },"CmdOrCtrl+0")
ronin.controller.add("default","View","Toggle Commander",() => { ronin.commander.toggle(); },"CmdOrCtrl+K");
+ ronin.controller.add("default","View","Toggle Guides",() => { ronin.surface.toggleGuides(); },"CmdOrCtrl+Shift+H");
ronin.controller.add("default","View","Expand Commander",() => { ronin.commander.toggle(true); },"CmdOrCtrl+Shift+K");
ronin.controller.add("default","Project","Run",() => { ronin.commander.run(); },"CmdOrCtrl+R");
ronin.controller.add("default","Project","Reload Run",() => { ronin.source.revert(); ronin.commander.run(); },"CmdOrCtrl+Shift+R");
diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css
index 0dfadf6..cb8cb72 100644
--- a/desktop/sources/links/main.css
+++ b/desktop/sources/links/main.css
@@ -10,13 +10,15 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_regular
#ronin #wrapper #commander #status #run { display: block; width: 26px; height: 26px; position: absolute; top: 0px; border-radius: 15px; left:0px; cursor: pointer; border:2px solid #fff; transition: background-color 250ms, border-color 250ms}
#ronin #wrapper #commander #status #run:hover { background: none; transition: none }
#ronin.expand #wrapper #commander { width:100%; }
-#ronin #surface,#ronin #guide { position: absolute; top:0px; -webkit-user-select: none;-webkit-app-region: no-drag; background-image: url("data:image/svg+xml;utf8,"); background-size: 10px 10px; background-position: -4px -4px; width:100%; height:100%; transition: left 250ms}
+#ronin #surface, #ronin #guide { position: absolute; top:0px; -webkit-user-select: none;-webkit-app-region: no-drag; background-image: url("data:image/svg+xml;utf8,"); background-size: 10px 10px; background-position: -4px -4px; width:100%; height:100%; transition: left 250ms, opacity 250ms; opacity: 1; }
/* Default */
#ronin.hidden #wrapper #commander { margin-left:-40vw; }
#ronin.hidden #surface, #ronin.hidden #guide { left:0; }
+#ronin #guide.hidden { opacity: 0 }
+
#ronin.hidden #wrapper #commander { margin-left:-50vw; }
#ronin #surface,#ronin #guide { left:50vw; }
diff --git a/desktop/sources/scripts/library.js b/desktop/sources/scripts/library.js
index a664ccd..2c0f25b 100644
--- a/desktop/sources/scripts/library.js
+++ b/desktop/sources/scripts/library.js
@@ -75,7 +75,7 @@ function Library (ronin) {
}
this.hsl = (h, s, l, a = 1) => { // returns a HSL color object
- return { h, s, l, a, toString: () => { return `hsla(${h},${s}%,${l}%,${a})` }, 0: h, 1: s, 2: l, 3: a, f: [h / 360, s / 100, l / 100, a] }
+ return { h, s, l, a, toString: () => { return `hsla(${h},${s}%,${l}%,${a})` }, 0: h, 1: s, 2: l, 3: a, f: [h / 360, s / 100, l / 100, a] }
}
// Frame
@@ -149,9 +149,13 @@ function Library (ronin) {
// Transforms
- this.transform = {
- push: () => { ronin.surface.context.save() },
- pop: () => { ronin.surface.context.restore() },
+ this.transform = { // The transform toolkit, use like (transform:move 10 10).
+ push: () => {
+ ronin.surface.context.save()
+ },
+ pop: () => {
+ ronin.surface.context.restore()
+ },
reset: () => {
ronin.surface.context.resetTransform()
ronin.surface.guide.resetTransform()
diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js
index 64f7355..c490093 100644
--- a/desktop/sources/scripts/surface.js
+++ b/desktop/sources/scripts/surface.js
@@ -304,6 +304,10 @@ function Surface (ronin) {
})
}
+ this.toggleGuides = function () {
+ this._guide.className = this._guide.className === 'hidden' ? '' : 'hidden'
+ }
+
function isRect (shape) {
return shape && !isNaN(shape.x) && !isNaN(shape.y) && !isNaN(shape.w) && !isNaN(shape.h)
}