diff --git a/desktop/sources/scripts/commander.js b/desktop/sources/scripts/commander.js index ad5df23..2ec92c4 100644 --- a/desktop/sources/scripts/commander.js +++ b/desktop/sources/scripts/commander.js @@ -16,18 +16,8 @@ function Commander (ronin) { this.start = function () { this._input.value = ` (clear) - -; Get Image - -(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() +(stroke (rect 15 15 120 80)) +`.trim() this._status.textContent = 'Idle, RUN(cmd+enter).' diff --git a/desktop/sources/scripts/library.js b/desktop/sources/scripts/library.js index 8419e09..dd7639a 100644 --- a/desktop/sources/scripts/library.js +++ b/desktop/sources/scripts/library.js @@ -1,5 +1,14 @@ function Library (ronin) { - this.clear = function () { - console.log('clear') + this.clear = (rect = this.select_all()) => { + } + + this.select = (x, y, w, h) => { + const rect = { x, y, w, h } + ronin.surface.addGuide(rect) + return rect + } + + this.select_all = () => { + ronin.surface.getRect() } } diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js index 582b2ea..07d6455 100644 --- a/desktop/sources/scripts/surface.js +++ b/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(size) + this.resize(this.getRect()) } 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 } + } }