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