Starting guides and draw

desktop/sources/scripts/commander.js

@@ -16,18 +16,8 @@ function Commander (ronin) {
   this.start = function () {
     this._input.value = `
 (clear)
-
+(stroke (rect 15 15 120 80))
-; Get Image
+`.trim()
-
-(load "../media/test.png" 
-  (rect 0 0 600 600))
-
-; Some operations
-
-(scale 0.5 0.5 
-  (resize 150 150 
-    (crop 
-      (rect 0 0 300 300))))`.trim()
 
     this._status.textContent = 'Idle, RUN(cmd+enter).'
 

desktop/sources/scripts/library.js

@@ -1,5 +1,14 @@
 function Library (ronin) {
-  this.clear = function () {
+  this.clear = (rect = this.select_all()) => {
-    console.log('clear')
+  }
+
+  this.select = (x, y, w, h) => {
+    const rect = { x, y, w, h }
+    ronin.surface.addGuide(rect)
+    return rect
+  }
+
+  this.select_all = () => {
+    ronin.surface.getRect()
   }
 }

desktop/sources/scripts/surface.js

@@ -2,6 +2,9 @@ function Surface (ronin) {
   this.el = document.createElement('canvas')
   this.el.id = 'surface'
   this.ratio = window.devicePixelRatio
+  this.context = this.el.getContext('2d')
+
+  this.guides = []
 
   this.install = function (host) {
     host.appendChild(this.el)
@@ -14,7 +17,37 @@ function Surface (ronin) {
   }
 
   this.update = function () {
+    for (const id in this.guides) {
+      this.drawRect(this.guides[id])
+    }
+  }
 
+  this.drawRect = function (u) {
+    console.log(u)
+    u.x = !u.x ? 0 : u.x
+    u.y = !u.y ? 0 : u.y
+
+    var offset = { x: u.x * 2, y: u.y * 2 }
+    var rect = { w: u.w * 2, h: u.h * 2 }
+
+    // Outline
+
+    this.context.beginPath()
+    this.context.moveTo(offset.x, offset.y)
+    this.context.lineTo(offset.x + rect.w, offset.y)
+    this.context.lineTo(offset.x + rect.w, offset.y + rect.h)
+    this.context.lineTo(offset.x, offset.y + rect.h)
+    this.context.lineTo(offset.x, offset.y)
+    this.context.lineCap = 'round'
+    this.context.lineWidth = 2
+    this.context.strokeStyle = '#f00'
+    this.context.stroke()
+    this.context.closePath()
+  }
+
+  this.addGuide = function (rect) {
+    this.guides.push(rect)
+    this.update()
   }
 
   this.resize = function (size) {
@@ -25,11 +58,14 @@ function Surface (ronin) {
   }
 
   this.maximize = function () {
-    const size = { w: Math.floor(window.innerWidth / 2) - 15, h: Math.floor(window.innerHeight) - 30 }
+    this.resize(this.getRect())
-    this.resize(size)
   }
 
   this.onResize = function () {
     this.maximize()
   }
+
+  this.getRect = function () {
+    return { x: 0, y: 0, w: Math.floor(window.innerWidth / 2) - 15, h: Math.floor(window.innerHeight) - 30 }
+  }
 }