Added option to toggle guides, fixes #99

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)` 
+- `(transform)` The transform toolkit, see examples.
-- `(rotate angle)` 
-- `(scale w h)` 
-- `(transform a b c d e f)` 
-- `(setTransform a b c d e f)` 
-- `(resetTransform)` 
-- `(pushTransform)` 
-- `(popTransform)` 
 - `(stroke shape color ~thickness)` Strokes a shape.
 - `(fill ~rect)` Fills a shape.
 - `(clear ~rect)` Clears a rect.

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");

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,<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; 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,<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; 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; }
 

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 = {
+  this.transform = { // The transform toolkit, use like (transform:move 10 10).
-    push: () => { ronin.surface.context.save() },
+    push: () => {
-    pop: () => { ronin.surface.context.restore() },
+      ronin.surface.context.save()
+    },
+    pop: () => {
+      ronin.surface.context.restore()
+    },
     reset: () => {
       ronin.surface.context.resetTransform()
       ronin.surface.guide.resetTransform()

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)
   }