From d4efdcf813d8dd45140a4afc68d565a8c5fad213 Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Thu, 25 Jul 2019 13:44:28 +0900
Subject: [PATCH] Draw stretch with (draw $line)

---
 WORKSHOP.md                        |  6 +++---
 desktop/sources/scripts/library.js |  4 ++--
 desktop/sources/scripts/surface.js | 10 ++++++++--
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/WORKSHOP.md b/WORKSHOP.md
index c8c652e..8802eb4 100644
--- a/WORKSHOP.md
+++ b/WORKSHOP.md
@@ -25,14 +25,14 @@ To import an image onto the current canvas, type the following text, drag an ima
 
 ```
 (import $path 
-  (rect 50 100 250 200))
+  (guide $rect))
 ```
 
-The previous code will import an image, and position it at `50,100`, at a size of `250x200`. Alternatively, you could use a `(pos)` to position the image and not resize it.
+The previous code will import an image, and position it at `50,100`, at a size of `250x200`. Alternatively, you could use a `(line)` to stretch the image.
 
 ```
 (import $path 
-  (pos 50 100))
+  (guide $line))
 ```
 
 ### Crop
diff --git a/desktop/sources/scripts/library.js b/desktop/sources/scripts/library.js
index dc176e8..6bc46dd 100644
--- a/desktop/sources/scripts/library.js
+++ b/desktop/sources/scripts/library.js
@@ -1,8 +1,8 @@
 function Library (ronin) {
-  this.import = async (path, rect) => { // Imports a graphic file with format.
+  this.import = async (path, shape) => { // Imports a graphic file with format.
     const img = new Image()
     img.src = path
-    return ronin.surface.draw(img, rect)
+    return ronin.surface.draw(img, shape)
   }
 
   this.export = (path, format = 'image/png', quality = 1.0) => { // Exports a graphic file with format.
diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js
index 52c2697..7bd0813 100644
--- a/desktop/sources/scripts/surface.js
+++ b/desktop/sources/scripts/surface.js
@@ -133,11 +133,17 @@ function Surface (ronin) {
     })
   }
 
-  this.draw = function (img, rect = this.getFrame()) {
+  this.draw = function (img, shape = this.getFrame()) {
     return new Promise(resolve => {
       img.onload = () => {
         ronin.log(`Draw ${img.width}x${img.height}`)
-        this.context.drawImage(img, rect.x, rect.y, rect.w, rect.h) // no strect: img.height * (rect.w / img.width)
+        if (isLine(shape)) {
+          this.context.drawImage(img, shape.a.x, shape.a.y, shape.b.x - shape.a.x, shape.b.y - shape.a.y)
+        } else if (isRect(shape)) {
+          this.context.drawImage(img, shape.x, shape.y, shape.w, img.height * (shape.w / img.width))
+        } else {
+          this.context.drawImage(img, shape.x, shape.y, img.width, img.height)
+        }
         resolve()
       }
     })