Progress on the drag helper.

README.md

@@ -49,6 +49,7 @@ Additional functions can be found in the [includes](https://github.com/hundredra
 - `(line ax ay bx by)` Returns a line shape.
 - `(text x y p t ~f)` Returns a text shape.
 - `(svg x y d)` Returns a svg shape.
+- `(offset a b)` Returns the offset between two pos.
 - `(stroke ~shape)` Strokes a shape.
 - `(fill ~rect)` Fills a shape.
 - `(gradient line ~colors 'black'])` Defines a gradient color.
@@ -60,6 +61,7 @@ Additional functions can be found in the [includes](https://github.com/hundredra
 - `(rescale w h)` Rescales the canvas to target ratio of w and h, returns the rect.
 - `(crop rect)` Crop canvas to rect.
 - `(clone a b)` 
+- `(drag x y ~rect)` 
 - `(theme variable ~el)` 
 - `(pixels rect fn q)` 
 - `(saturation pixel ~q)` 

desktop/sources/scripts/commander.js

@@ -137,6 +137,10 @@ function Commander (ronin) {
     } else if (word.substr(0, 6) === 'circle' && shape.circle) {
       const circle = shape.circle
       this._input.value = this.cache.replace('$circle', `(circle ${circle.cx} ${circle.cy} ${circle.r})`)
+    } else if (word.substr(0, 4) === 'drag' && shape.line) {
+      const rect = shape.rect
+      this._input.value = this.cache.replace('$drag', `(drag ${rect.w} ${rect.h})`)
+      this.run()
     }
     if (end === true) {
       this.cache = this._input.value
@@ -209,34 +213,6 @@ function Commander (ronin) {
 
   this.splash = `; welcome to ronin - v2.2
 (clear) 
-; ronin path 
-(defn rec 
-  (v) 
-  (if 
-    (gt v 0) 
-    ( 
-      ; params 
-      (def spiral-x 
-        (add frame-rect:c 
-          (mul 
-            (cos 
-              (add 
-                (div v 17) 
-                (time 0.001))) 
-            (div v 2)))) 
-      (def spiral-y 
-        (add frame-rect:m 
-          (mul 
-            (sin 
-              (div v 11)) 
-            (div v 2)))) 
-      (def spiral-r v) 
-      ; draw 
-      (stroke 
-        (circle spiral-x spiral-y spiral-r) 1 "#72dec211") 
-      (rec 
-        (sub v 0.3))))) 
-(rec 300)
 (def align { :x 
   (sub frame-rect:c 150) :y 
   (sub frame-rect:m 150)})

desktop/sources/scripts/library.js

@@ -82,6 +82,12 @@ function Library (ronin) {
     return { x, y, d }
   }
 
+  this.offset = (a, b) => { // Returns the offset between two pos.
+    a.x += b.x
+    a.y += b.y
+    return a
+  }
+
   // Actions
 
   this.stroke = (shape = this.frame(), thickness, color) => { // Strokes a shape.
@@ -149,6 +155,12 @@ function Library (ronin) {
     return [a, b]
   }
 
+  this.drag = (x, y, rect = this.frame()) => {
+    this.guide({ a: { x: rect.x, y: rect.y }, b: { x: x + rect.x, y: y + rect.y } })
+    this.guide(rect)
+    this.guide(this.offset(rect, { x, y }))
+  }
+
   this.theme = (variable, el = document.documentElement) => {
     // ex. (theme "f_main") -> :root { --f_main: "#fff" }
     return getComputedStyle(el).getPropertyValue(`--${variable}`)

desktop/sources/scripts/ronin.js

@@ -118,12 +118,10 @@ function Ronin () {
 
   this.onMouseOver = (e) => {
     this.mouseOrigin = null
-    this.surface.clearGuide()
   }
 
   this.onMouseOut = (e) => {
     this.mouseOrigin = null
-    this.surface.clearGuide()
   }
 
   this.mouseShape = (position, type) => {