From 8189d5191247f945326c30abb8831872e911244b Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Sat, 27 Jul 2019 13:03:13 +0900
Subject: [PATCH] Improved UX for $drag

---
 desktop/sources/scripts/commander.js |  4 ++--
 desktop/sources/scripts/library.js   | 17 +++++++++++------
 desktop/sources/scripts/surface.js   |  8 ++++----
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/desktop/sources/scripts/commander.js b/desktop/sources/scripts/commander.js
index 3395942..5c7d08d 100644
--- a/desktop/sources/scripts/commander.js
+++ b/desktop/sources/scripts/commander.js
@@ -139,12 +139,12 @@ function Commander (ronin) {
       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()
+      this._input.value = this.cache.replace('$drag', `(drag (rect ${rect.x} ${rect.y} ${rect.w} ${rect.h}) $line)`)
     }
     if (end === true) {
       this.cache = this._input.value
     }
+    this.run()
   }
 
   // Display
diff --git a/desktop/sources/scripts/library.js b/desktop/sources/scripts/library.js
index 3ef678b..91dd30b 100644
--- a/desktop/sources/scripts/library.js
+++ b/desktop/sources/scripts/library.js
@@ -54,7 +54,7 @@ function Library (ronin) {
 
   // Shapes
 
-  this.pos = (x, y) => { // Returns a position shape.
+  this.pos = (x = 0, y = 0) => { // Returns a position shape.
     return { x, y }
   }
 
@@ -104,8 +104,8 @@ function Library (ronin) {
     return ronin.surface.linearGradient(line.a.x, line.a.y, line.b.x, line.b.y, colors)
   }
 
-  this.guide = (shape) => { // Draws a shape on the guide layer.
-    ronin.surface.drawGuide(shape)
+  this.guide = (shape, color) => { // Draws a shape on the guide layer.
+    ronin.surface.drawGuide(shape, color)
     return shape
   }
 
@@ -155,10 +155,15 @@ 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.drag = (rect = this.frame(), line = this.line()) => {
+    const pos = { x: line.b.x - line.a.x, y: line.b.y - line.a.y }
+    const crop = ronin.surface.getCrop(rect)
+    ronin.surface.clear(rect)
+    this.guide({ a: { x: rect.x, y: rect.y }, b: { x: pos.x + rect.x, y: pos.y + rect.y } })
     this.guide(rect)
-    this.guide(this.offset(rect, { x, y }))
+    this.guide(this.offset(rect, { x: pos.x, y: pos.y }))
+
+    ronin.surface.context.drawImage(crop, rect.x, rect.y)
   }
 
   this.theme = (variable, el = document.documentElement) => {
diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js
index 206e9c3..b67de4a 100644
--- a/desktop/sources/scripts/surface.js
+++ b/desktop/sources/scripts/surface.js
@@ -167,14 +167,14 @@ function Surface (ronin) {
     context.clearRect(rect.x, rect.y, rect.w, rect.h)
   }
 
-  this.drawGuide = function (shape, context = this.guide) {
+  this.drawGuide = function (shape, color = 'white', context = this.guide) {
     if (!shape) { return }
     this.stroke(shape.rect || shape, 3, 'black', context)
     if (shape.line) { this.stroke(shape.line, 3, 'black', context) }
     if (shape.circle) { this.stroke(shape.circle, 3, 'black', context) }
-    this.stroke(shape.rect || shape, 1.5, 'white', context)
-    if (shape.line) { this.stroke(shape.line, 1.5, 'white', context) }
-    if (shape.circle) { this.stroke(shape.circle, 1.5, 'white', context) }
+    this.stroke(shape.rect || shape, 1.5, color, context)
+    if (shape.line) { this.stroke(shape.line, 1.5, color, context) }
+    if (shape.circle) { this.stroke(shape.circle, 1.5, color, context) }
   }
 
   this.clone = function (a, b) {