From cd02c01f0de78f893e1d1ead3afd3ed56cc279c3 Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Wed, 9 Jan 2019 15:01:01 +1200
Subject: [PATCH] Cleaning up the guide

---
 desktop/sources/scripts/dotgrid.js  |  1 +
 desktop/sources/scripts/guide.js    | 28 ++++++++++++++--------------
 desktop/sources/scripts/renderer.js |  1 +
 desktop/sources/scripts/tool.js     |  6 +++---
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js
index a8155ef..23bf31d 100644
--- a/desktop/sources/scripts/dotgrid.js
+++ b/desktop/sources/scripts/dotgrid.js
@@ -51,6 +51,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
 
   this.update = function () {
     DOTGRID.resize()
+    DOTGRID.renderer.update()
     DOTGRID.interface.update()
     DOTGRID.guide.update()
   }
diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js
index d11f5b8..2e60710 100644
--- a/desktop/sources/scripts/guide.js
+++ b/desktop/sources/scripts/guide.js
@@ -7,6 +7,7 @@ DOTGRID.Guide = function () {
   this.el.height = 640
   this.el.style.width = '320px'
   this.el.style.height = '320px'
+  this.context = this.el.getContext('2d')
   this.showExtras = true
 
   this.scale = 2
@@ -17,27 +18,20 @@ DOTGRID.Guide = function () {
   }
 
   this.update = function (force = false) {
+
+    DOTGRID.renderer.update()
+    
     this.clear()
 
-    this.el.getContext('2d').restore()
+    this.context.restore()
 
     this.drawMirror()
     this.drawRulers()
 
-    DOTGRID.renderer.update()
-    let ctx = this.el.getContext('2d')
-    let image64 = DOTGRID.renderer.svg64()
-    let img = new Image()
-    img.src = image64
-    ctx.drawImage(img, 0, 0, this.el.width, this.el.height)
-
-    if (DOTGRID.tool.index == 2) { this.drawMarkers(); this.drawVertices() }
-    // this.drawPath(new Generator(DOTGRID.tool.layers[2], DOTGRID.tool.styles[2]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[2])
-    if (DOTGRID.tool.index == 1) { this.drawMarkers(); this.drawVertices() }
-    // this.drawPath(new Generator(DOTGRID.tool.layers[1], DOTGRID.tool.styles[1]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[1])
-    if (DOTGRID.tool.index == 0) { this.drawMarkers(); this.drawVertices() }
-    // this.drawPath(new Generator(DOTGRID.tool.layers[0], DOTGRID.tool.styles[0]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[0])
+    this.drawRender()
 
+    this.drawMarkers() 
+    this.drawVertices()
     this.drawHandles()
     this.drawTranslation()
     this.drawCursor()
@@ -278,6 +272,12 @@ DOTGRID.Guide = function () {
     ctx.restore()
   }
 
+  this.drawRender = function(ctx = this.context){
+    let img = new Image()
+    img.src = DOTGRID.renderer.svg64()
+    this.context.drawImage(img, 0, 0, this.el.width, this.el.height)
+  }
+
   function isEqual (a, b) { return a && b && Math.abs(a.x) == Math.abs(b.x) && Math.abs(a.y) == Math.abs(b.y) }
   function clamp (v, min, max) { return v < min ? min : v > max ? max : v }
 }
diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js
index 94e4088..951346d 100644
--- a/desktop/sources/scripts/renderer.js
+++ b/desktop/sources/scripts/renderer.js
@@ -38,6 +38,7 @@ DOTGRID.Renderer = function () {
       layer.style.strokeLinejoin = style.strokeLinejoin
       layer.style.stroke = style.color
       layer.style.fill = style.fill
+      layer.style.transform = style.transform
       layer.setAttribute('d', paths[id])
     }
   }
diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js
index 4271788..31ce0a1 100644
--- a/desktop/sources/scripts/tool.js
+++ b/desktop/sources/scripts/tool.js
@@ -5,9 +5,9 @@ DOTGRID.Tool = function () {
   this.settings = { size: { width: 300, height: 300 } }
   this.layers = [[], [], []]
   this.styles = [
-    { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#f00', fill: 'none', mirror_style: 0 },
-    { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#0f0', fill: 'none', mirror_style: 0 },
-    { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#00f', fill: 'none', mirror_style: 0 }
+    { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#f00', fill: 'none', mirror_style: 0, transform:'rotate(45)' },
+    { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#0f0', fill: 'none', mirror_style: 0, transform:'rotate(45)' },
+    { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#00f', fill: 'none', mirror_style: 0, transform:'rotate(45)' }
   ]
   this.vertices = []
   this.reqs = { line: 2, arc_c: 2, arc_r: 2, arc_c_full: 2, arc_r_full: 2, bezier: 3, close: 0 }