Moved everything to /desktop

desktop/sources/scripts/core/commander.js

@@ -0,0 +1,24 @@
+function Commander () {
+  this.el = document.createElement('yu')
+  this.el.id = 'commander'
+  this.input_el = document.createElement('textarea')
+  this.input_el.value = `
+(scale 0.5 0.5 
+  (resize 150 150 
+    (crop 
+      (rect 0 0 300 300))))`.trim()
+
+  this.install = function () {
+    this.el.appendChild(this.input_el)
+    ronin.el.appendChild(this.el)
+    this.input_el.focus()
+  }
+
+  this.update = function () {
+
+  }
+
+  this.getQuery = function () {
+
+  }
+}

desktop/sources/scripts/core/cursor.js

@@ -0,0 +1,137 @@
+function Cursor (rune) {
+  this.line = { origin: null, from: null, to: null, destination: null }
+  this.is_down = false
+  this.query = null
+  this.mode = 'vertex'
+
+  this.size = 2
+  this.pos = { x: 0, y: 0 }
+
+  this.target = null
+
+  this.mouse_pos = function (e) {
+    var pos = { x: e.clientX, y: e.clientY }
+
+    pos.x = ((pos.x / ronin.frame.width) / ronin.frame.zoom.scale) * ronin.frame.width
+    pos.y = ((pos.y / ronin.frame.height) / ronin.frame.zoom.scale) * ronin.frame.height
+
+    pos.x -= (ronin.frame.zoom.offset.x / ronin.frame.zoom.scale)
+    pos.y -= (ronin.frame.zoom.offset.y / ronin.frame.zoom.scale)
+
+    return pos
+  }
+
+  this.mouse_down = function (e) {
+    e.preventDefault()
+
+    var pos = ronin.cursor.mouse_pos(e)
+
+    ronin.commander.blur()
+
+    ronin.cursor.line.origin = { x: pos.x, y: pos.y }
+    ronin.cursor.line.from = { x: pos.x, y: pos.y }
+
+    // Save original query
+    ronin.cursor.query = ronin.commander.input_el.value
+
+    if (ronin.commander.active_module()) { /* DO NOTHING */ } else if (e.shiftKey) { /* DO NOTHING */ } else if (e.altKey && e.shiftKey) { ronin.brush.methods.pick.run(pos) } else if (e.altKey) { ronin.brush.erase(ronin.cursor.line) } else { ronin.brush.stroke(ronin.cursor.line) }
+
+    if (e.shiftKey) { ronin.cursor.mode = 'rect' }
+    if (e.altKey) { ronin.cursor.mode = 'arc_to' }
+    if (e.ctrlKey) { ronin.cursor.mode = 'cc_arc_to' }
+  }
+
+  this.mouse_move = function (e) {
+    e.preventDefault()
+
+    var pos = ronin.cursor.mouse_pos(e)
+    ronin.cursor.pos = pos
+
+    if (!ronin.cursor.line.from) { return }
+
+    ronin.cursor.line.to = { x: pos.x, y: pos.y }
+
+    if (ronin.commander.active_module()) { ronin.cursor.inject_query() } else if (e.altKey && e.shiftKey) { ronin.brush.methods.pick.run(pos) } else if (e.shiftKey) { ronin.cursor.drag(ronin.cursor.line) } else if (e.altKey) { ronin.brush.erase(ronin.cursor.line) } else { ronin.brush.stroke(ronin.cursor.line) }
+
+    ronin.cursor.line.from = { x: pos.x, y: pos.y }
+  }
+
+  this.mouse_up = function (e) {
+    e.preventDefault()
+
+    var pos = ronin.cursor.mouse_pos(e)
+
+    ronin.cursor.line.destination = { x: pos.x, y: pos.y }
+
+    ronin.cursor.inject_query()
+
+    ronin.cursor.is_down = false
+    ronin.cursor.line = {}
+    ronin.cursor.mode = 'vertex'
+
+    ronin.cursor.query = ronin.commander.input_el.value
+    ronin.brush.absolute_thickness = 0
+  }
+
+  this.mouse_alt = function (e) {
+    console.log(e)
+  }
+
+  this.drag = function (line) {
+    var offset = make_offset(line.from, line.to)
+    var data = ronin.cursor.target.select()
+    ronin.cursor.target.clear()
+    ronin.cursor.target.context().putImageData(data, offset.x * -2, offset.y * -2)
+  }
+
+  this.swap_layer = function () {
+    this.target = this.target.name == 'above' ? ronin.layers.below : ronin.layers.above
+    ronin.commander.update()
+  }
+
+  this.select_layer = function (layer) {
+    this.target = layer
+    ronin.commander.update()
+  }
+
+  function make_offset (a, b) {
+    return { x: a.x - b.x, y: a.y - b.y }
+  }
+
+  this.inject_query = function () {
+    if (ronin.cursor.query && ronin.cursor.query.indexOf('$') < 0) { return }
+
+    var a = ronin.cursor.line.origin
+    var b = ronin.cursor.line.destination ? ronin.cursor.line.destination : ronin.cursor.line.from
+
+    var str = '<error>'
+
+    if (ronin.cursor.mode == 'vertex') {
+      str = b.x + ',' + b.y
+    } else if (ronin.cursor.mode == 'rect') {
+      var offset = a.x + ',' + a.y
+      var rect = (b.x - a.x) + 'x' + (b.y - a.y)
+      str = offset + '|' + rect
+    } else if (ronin.cursor.mode == 'arc_to') {
+      str = '@>' + b.x + ',' + b.y
+    } else if (ronin.cursor.mode == 'cc_arc_to') {
+      str = '@<' + b.x + ',' + b.y
+    }
+    //
+    var i = ronin.cursor.query ? ronin.cursor.query.indexOf('$') : ''
+    var i1 = ronin.cursor.query ? ronin.cursor.query.substr(i, 2) : ''
+    var e1 = ronin.cursor.query ? ronin.cursor.query.substr(i - 1, 2) : ''
+
+    if (e1 == '#$') {
+      var r = parseInt((b.x / ronin.frame.width) * 255)
+      var g = 255 - parseInt((b.x / ronin.frame.width) * 255)
+      var b = parseInt((b.y / ronin.frame.height) * 255)
+      var str = new Color().rgb_to_hex([r, g, b])
+      ronin.commander.inject(ronin.cursor.query.replace('#$', str + ' '))
+    } else if (i1 == '$+') {
+      ronin.commander.inject(ronin.cursor.query.replace('$+', str + '&$+'))
+    } else if (ronin.cursor.query) {
+      ronin.commander.inject(ronin.cursor.query.replace('$', str))
+    }
+  }
+}

desktop/sources/scripts/core/docs.js

@@ -0,0 +1,61 @@
+function Docs () {
+  this.export = function () {
+    var html = ''
+
+    html += this.print_intro()
+
+    html += '## Cursor\n'
+    html += 'Include `$` in a query and click on the canvas to inject the cursor position in the query.\n'
+    html += '- `$ click` inject a **Pos**.\n'
+    html += '- `$+ click` inject a **Pos**, and append `$+` for multiple positions.\n'
+    html += '- `$ shift click` inject a **Rect**.\n'
+    html += '- `#$ click` inject a **Color**.\n'
+    html += '- `x` swap **Color** with secondary.\n\n'
+    html += '- `z` draw under render.\n\n'
+
+    html += '## Modules\n'
+    html += this.print_modules(ronin.modules)
+    html += this.print_license()
+
+    fs.writeFile('/Users/VillaMoirai/Github/HundredRabbits/Ronin/README.md', html, (err) => {
+      if (err) { alert('An error ocurred creating the file ' + err.message) }
+    })
+
+    return html
+  }
+
+  this.print_intro = function () {
+    html = '# Ronin\n'
+    html += 'Ronin is a graphic design tool, to paint, resize and export graphics.\n\n'
+    html += "<img src='https://raw.githubusercontent.com/hundredrabbits/Ronin/master/PREVIEW.jpg' width='600'/>\n\n"
+    return html
+  }
+
+  this.print_modules = function (modules) {
+    var html = ''
+
+    for (module_name in modules) {
+      var module = modules[module_name]
+      html += '## ' + module_name + '\n\n'
+      html += module.docs + '\n\n'
+      html += this.print_methods(module.methods) + '\n'
+    }
+    return html + '\n'
+  }
+
+  this.print_methods = function (methods) {
+    var html = '### Methods\n'
+
+    for (method_name in methods) {
+      var method = methods[method_name]
+      html += '- `' + method_name + ':' + method.params + '` ' + method.info + '\n'
+    }
+    return html
+  }
+
+  this.print_license = function () {
+    html = '## License\n'
+    html += 'See the [LICENSE](LICENSE.md) file for license rights and limitations.\n'
+    return html
+  }
+}

desktop/sources/scripts/core/keyboard.js

@@ -0,0 +1,19 @@
+function Keyboard () {
+  this.is_down = {}
+
+  this.key_up = function (e) {
+  }
+
+  this.key_down = function (e) {
+    ronin.keyboard.is_down[e.key] = true
+
+    if (ronin.commander.is_focused() && e.key == 'Enter') {
+      e.preventDefault()
+      ronin.commander.validate()
+    }
+
+    if (ronin.commander.is_focused()) {
+
+    }
+  }
+}

desktop/sources/scripts/core/layer.js

@@ -0,0 +1,61 @@
+function Layer (name) {
+  this.name = name
+  this.el = document.createElement('canvas')
+  this.el.id = name
+  this.el.className = 'layer'
+
+  this.install = function () {
+    ronin.frame.el.appendChild(this.el)
+  }
+
+  this.update = function (zoom = { scale: 1, offset: { x: 0, y: 0 } }) {
+  }
+
+  this.context = function () {
+    return this.el.getContext('2d')
+  }
+
+  this.resize_to = function (size) {
+    console.log(`Resized ${this.name}`)
+    this.el.width = ronin.frame.width * 2
+    this.el.height = ronin.frame.height * 2
+    this.update()
+  }
+
+  this.select = function (x = 0, y = 0, width = ronin.frame.width, height = ronin.frame.width) {
+    return this.context().getImageData(x, y, width * 2, height * 2)
+  }
+
+  this.to_base64 = function (format = 'png', quality = 0.9) {
+    return format == 'png' ? this.el.toDataURL('image/png') : this.el.toDataURL('image/jpeg', 0.9)
+  }
+
+  this.to_img = function () {
+    var img = new Image()
+    img.src = this.to_base64()
+    return img
+  }
+
+  this.clear = function () {
+    this.context().clearRect(0, 0, this.el.width * 2, this.el.height * 2)
+  }
+
+  this.fill = function (color = 'red') {
+    var ctx = this.context()
+
+    ctx.beginPath()
+    ctx.globalCompositeOperation = 'source-over'
+    ctx.moveTo(0, 0)
+    ctx.lineTo(this.el.width, 0)
+    ctx.lineTo(this.el.width, this.el.height)
+    ctx.lineTo(0, this.el.height)
+    ctx.lineTo(0, 0)
+    ctx.fillStyle = color
+    ctx.fill()
+    ctx.closePath()
+  }
+
+  this.zoom = function (zoom = { scale: 1, offset: { x: 0, y: 0 } }) {
+    this.update(zoom)
+  }
+}

desktop/sources/scripts/core/method.js

@@ -0,0 +1,10 @@
+function Method (name, params, info = 'Missing documentation', f) {
+  this.name = name
+  this.params = params
+  this.info = info
+  this.run = f
+
+  this.docs = function () {
+    return '<b>' + this.params + '</b> <i>' + this.info + '</i>'
+  }
+}

desktop/sources/scripts/core/module.js

@@ -0,0 +1,6 @@
+function Module (name, docs = 'Missing documentation.') {
+  this.name = name
+  this.methods = {}
+
+  this.docs = docs
+}

desktop/sources/scripts/core/port.js

@@ -0,0 +1,20 @@
+function Port (host, name, input, output, value, max, docs) {
+  this.host = host
+
+  this.name = name
+  this.input = input
+  this.output = output
+  this.value = value
+  this.max = max
+  this.docs = docs
+
+  this.write = function (value) {
+    this.value = value
+    var target = this.host.routes[this.name]
+
+    if (!this.output) { return }
+    if (!target) { console.log('No output for', this.name); return }
+
+    this.host.ports[target].write(this.value)
+  }
+}

desktop/sources/scripts/core/query.js

@@ -0,0 +1,104 @@
+function Query (query_str = '') {
+  // Strip trailing variables
+  query_str = query_str.indexOf('&$+') > -1 ? query_str.replace('&$+', '').trim() : query_str
+
+  this.string = query_str
+  this.module = query_str.split(' ')[0]
+  var parts = query_str.split(' ').splice(1)
+  this.raw = parts.join(' ')
+  this.methods = {}
+  this.routes = {}
+  this.last = query_str.indexOf(' ') > -1 ? query_str.split(' ')[query_str.split(' ').length - 1] : query_str
+  this.last_char = query_str.trim().substr(query_str.trim().length - 1, 1)
+
+  for (part_id in parts) {
+    var part = parts[part_id]
+    // Method
+    if (part.indexOf(':') > -1) {
+      var key = part.indexOf(':') > -1 ? part.split(':')[0] : 'any'
+      var value = part.indexOf(':') > -1 ? part.split(':')[1] : part
+      this.methods[key] = parse_parameters(value)
+    }
+    // Port
+    else if (part.indexOf('->') > -1) {
+      var key = part.indexOf('->') > -1 ? part.split('->')[0] : 'any'
+      var value = part.indexOf('->') > -1 ? part.split('->')[1] : part
+      this.routes[key] = value
+    }
+  }
+
+  function parse_parameters (param_str) {
+    // Modifier
+    if (param_str.indexOf('>>') > -1) {
+      return parse_modifier(param_str)
+    } else {
+      if (param_str.indexOf('&') > -1) {
+        return parse_sequence(param_str)
+      } else {
+        return parse_unit(param_str)
+      }
+    }
+    return param_str
+  }
+
+  function parse_modifier (mod_str) {
+    var h = {}
+
+    var parts = mod_str.split('>>')
+
+    if (parts[0].indexOf('&') > -1) {
+      h.from = parse_sequence(parts[0])
+    } else {
+      h.from = parse_unit(parts[0])
+    }
+
+    if (parts[1].indexOf('&') > -1) {
+      h.to = parse_sequence(parts[1])
+    } else {
+      h.to = parse_unit(parts[1])
+    }
+    return h
+  }
+
+  function parse_sequence (seq_str) {
+    var a = []
+
+    var parts = seq_str.split('&')
+    for (part_id in parts) {
+      var part = parts[part_id]
+      a.push(parse_unit(part))
+    }
+    return a
+  }
+
+  function parse_unit (unit_str) {
+    // Arc
+    if (unit_str.indexOf('@') == 0) {
+      unit_str = unit_str.substr(1, unit_str.length - 1)
+      var clockwise = unit_str.indexOf('>') == 0
+      unit_str = unit_str.substr(1, unit_str.length - 1)
+      return { x: parseInt(unit_str.split(',')[0]), y: parseInt(unit_str.split(',')[1]), clockwise: clockwise }
+    }
+    if (unit_str.indexOf('.') > -1 && unit_str.indexOf('/') > -1) {
+      return unit_str
+    }
+    // Rect
+    if (unit_str.indexOf('|') > -1 && unit_str.indexOf(',') > -1 && unit_str.indexOf('x') > -1) {
+      return Object.assign(parse_unit(unit_str.split('|')[0]), parse_unit(unit_str.split('|')[1]))
+    }
+    // Pos
+    if (unit_str.indexOf(',') > -1) {
+      return { x: parseInt(unit_str.split(',')[0]), y: parseInt(unit_str.split(',')[1]) }
+    }
+    // Size
+    if (unit_str.indexOf('x') > -1 && !isNaN(unit_str.split('x')[0]) && !isNaN(unit_str.split('x')[1])) {
+      return { width: parseInt(unit_str.split('x')[0]), height: parseInt(unit_str.split('x')[1]) }
+    }
+    // Float
+    if (unit_str.indexOf('.') > -1) {
+      return parseFloat(unit_str)
+    }
+    // Any
+    return unit_str
+  }
+}

desktop/sources/scripts/core/swatch.js

@@ -0,0 +1,20 @@
+function Swatch () {
+  this.index = 0
+  this.colors = []
+
+  this.start = function () {
+    this.update()
+  }
+
+  this.update = function () {
+    this.colors = [ronin.theme.active.f_high, ronin.theme.active.f_med, ronin.theme.active.f_low]
+  }
+
+  this.swap = function () {
+    this.index += 1
+  }
+
+  this.color = function (offset = 0) {
+    return this.colors[(this.index + offset) % this.colors.length]
+  }
+}