Moved everything to /desktop

desktop/sources/scripts/modules/brush.js

@@ -0,0 +1,107 @@
+function Brush () {
+  Module.call(this, 'brush')
+
+  this.speed = 0
+  this.swatch = new Swatch()
+
+  this.pointers = [
+    new Pointer({ offset: { x: 0, y: 0 } })
+  ]
+
+  this.methods.add = new Method('add', 'x,y&mirror_x,mirror_y', 'Add a new pointer to the brush', function (q) {
+    var offset = q.length ? q[0] : q
+    var mirror = q.length ? q[1] : null
+    ronin.brush.pointers.push(new Pointer({ offset: offset, mirror: mirror }))
+  })
+
+  this.methods.remove = new Method('remove', '', 'Remove last pointer', function (q) {
+    ronin.brush.pointers.pop()
+  })
+
+  this.methods.pick = new Method('pick', 'x,y', "Set brush color to a position's pixel.", function (q) {
+    var pixel = (ronin.commander.input_el.value == '~' ? ronin.guide : ronin.cursor.target).context().getImageData(q.x * 2, q.y * 2, 1, 1).data
+    var c = new Color().rgb_to_hex(pixel)
+    var color = new Color(c)
+    ronin.cursor.color = color.hex
+  })
+
+  this.methods.set_color = new Method('set_color', '#ff0033', 'Set color', function (q) {
+    ronin.cursor.color = q
+  })
+
+  this.absolute_thickness = 0
+
+  this.thickness = function (line) {
+    var ratio = clamp(1 - (ronin.brush.speed / 20), 0, 1)
+    var t = ronin.cursor.size * ratio
+    this.absolute_thickness = t > this.absolute_thickness ? this.absolute_thickness + 0.25 : this.absolute_thickness - 0.25
+    return this.absolute_thickness
+  }
+
+  this.stroke = function (line) {
+    this.speed = distance_between(line.from, line.to)
+
+    for (pointer_id in this.pointers) {
+      this.pointers[pointer_id].stroke(line)
+    }
+  }
+
+  this.erase = function (line) {
+    this.speed = distance_between(line.from, line.to)
+
+    for (pointer_id in this.pointers) {
+      this.pointers[pointer_id].stroke(line, true)
+    }
+  }
+
+  this.pick = function (line) {
+    if (!line.to) {
+      line.to = line.from
+    }
+
+    var pixel = ronin.cursor.target.context().getImageData(line.to.x * 2, line.to.y * 2, 1, 1).data
+  }
+
+  this.mod_size = function (mod) {
+    ronin.cursor.size = clamp(parseInt(ronin.cursor.size) + mod, 1, 100)
+  }
+
+  function clamp (v, min, max) {
+    return v < min ? min : v > max ? max : v
+  }
+
+  function distance_between (a, b) {
+    return a && b ? Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y)) : 0
+  }
+}
+
+function Pointer (options) {
+  this.options = options
+
+  this.stroke = function (line, erase = false) {
+    var ctx = ronin.cursor.target.context()
+
+    if (this.options.mirror) {
+      line.from.x = (this.options.mirror.x * 2) - line.from.x
+      line.to.x = (this.options.mirror.x * 2) - line.to.x
+    }
+
+    if (!line.to) {
+      line.to = line.from
+    }
+
+    ctx.beginPath()
+    ctx.globalCompositeOperation = erase ? 'destination-out' : 'source-over'
+    ctx.moveTo((line.from.x * 2) + this.options.offset.x, (line.from.y * 2) + this.options.offset.y)
+    ctx.lineTo((line.to.x * 2) + this.options.offset.x, (line.to.y * 2) + this.options.offset.y)
+    ctx.lineCap = 'round'
+    ctx.lineWidth = ronin.brush.thickness(line)
+    ctx.strokeStyle = ronin.brush.swatch.color()
+    ctx.stroke()
+    ctx.closePath()
+  }
+
+  function clamp (v, min, max) {
+    return v < min ? min : v > max ? max : v
+  }
+}

desktop/sources/scripts/modules/filter.js

@@ -0,0 +1,60 @@
+function Filter () {
+  Module.call(this, 'filter', 'Pixel filter')
+
+  this.methods.balance = new Method('balance', '#ff0033', 'Filter color balance.', function (q) {
+    var color = new Color(q).floats()
+
+    var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width * 2, ronin.frame.height * 2)
+    var data = originalData.data
+
+    for (var i = 0; i < data.length; i += 4) {
+      data[i] = data[i] * (color.r + 0.5)
+      data[i + 1] = data[i + 1] * (color.g + 0.5)
+      data[i + 2] = data[i + 2] * (color.b + 0.5)
+    }
+
+    ronin.cursor.target.context().putImageData(originalData, 0, 0)
+  })
+
+  this.methods.saturation = new Method('saturation', '#ff00333', 'Filter color saturation.', function (q) {
+    var color = new Color(q).floats()
+
+    var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width * 2, ronin.frame.height * 2)
+    var data = originalData.data
+
+    for (var i = 0; i < data.length; i += 4) {
+      var r = data[i]
+      var g = data[i + 1]
+      var b = data[i + 2]
+      var v = color.r * r + color.g * g + color.b * b
+      data[i] = data[i + 1] = data[i + 2] = v
+    }
+
+    ronin.cursor.target.context().putImageData(originalData, 0, 0)
+  })
+
+  this.preview = function (q) {
+    if (!q.methods.saturation) { return }
+
+    ronin.preview.clear()
+
+    // var color = new Color(q).floats();
+
+    var x = q.methods.saturation.x / ronin.frame.width
+
+    var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width * 2, ronin.frame.height * 2)
+    var data = originalData.data
+
+    for (var i = 0; i < data.length; i += 4) {
+      var r = data[i]
+      var g = data[i + 1]
+      var b = data[i + 2]
+      var v = (r + g + b) / 3
+      data[i] = (r * x) + (v * (1 - x))
+      data[i + 1] = (g * x) + (v * (1 - x))
+      data[i + 2] = (b * x) + (v * (1 - x))
+    }
+
+    ronin.preview.context().putImageData(originalData, 0, 0)
+  }
+}

desktop/sources/scripts/modules/frame.js

@@ -0,0 +1,90 @@
+function Frame () {
+  Module.call(this, 'frame', 'Manager for the canvas size')
+
+  this.el = document.createElement('surface')
+  this.background = 'pink'
+
+  this.install = function () {
+    ronin.el.appendChild(this.el)
+  }
+
+  this.methods.new = new Method('new', 'WxH', 'New Canvas', function (q) {
+    ronin.layers.above.clear()
+    ronin.layers.below.clear()
+    ronin.frame.resize_to({ width: 900, height: 540 })
+  })
+
+  this.width = 400
+  this.height = 400
+  this.zoom = { scale: 1, offset: { x: 0, y: 0 } }
+
+  this.methods.set_background = new Method('set_background', 'WxH', 'Resize canvas to size.', function (q) {
+    ronin.frame.background = q
+    ronin.frame.el.style.backgroundColor = q
+  })
+
+  this.methods.resize = new Method('resize', 'WxH', 'Resize canvas to size.', function (q) {
+    var data = ronin.cursor.target.select(0, 0, ronin.frame.width, ronin.frame.height)
+    ronin.cursor.target.clear()
+    ronin.frame.resize_to(q)
+    ronin.cursor.target.context().putImageData(data, 0, 0)
+  })
+
+  this.methods.rescale = new Method('rescale', '0.5', 'Rescale canvas to float.', function (p) {
+    var new_size = { width: ronin.frame.width * p, height: ronin.frame.height * p }
+    ronin.cursor.target.context().drawImage(ronin.cursor.target.to_img(), 0, 0, new_size.width * 2, new_size.height * 2)
+    setTimeout(function () { ronin.frame.methods.resize.run(new_size) }, 500)
+  })
+
+  this.methods.crop = new Method('crop', 'X,Y|WxH', 'Crop canvas to rect.', function (p) {
+    var data = ronin.cursor.target.select(0, 0, p.width * 2, p.height * 2)
+    ronin.cursor.target.clear()
+    ronin.frame.resize_to(p)
+    setTimeout(function () { ronin.cursor.target.context().putImageData(data, p.x * -2, p.y * -2) }, 500)
+  })
+
+  this.methods.clear = new Method('clear', '', 'Erase entire canvas', function (q) {
+    ronin.cursor.target.clear()
+  })
+
+  this.methods.fill = new Method('fill', '#f00', 'Fill entire canvas with color', function (q) {
+    ronin.cursor.target.fill(q || ronin.cursor.color)
+  })
+
+  this.methods.inspect = new Method('inspect', '', 'View canvas details', function (q) {
+    ronin.guide.inspect = !ronin.guide.inspect
+    ronin.guide.draw()
+  })
+
+  this.methods.zoom = new Method('zoom', '', 'Zoom canvas', function (q) {
+    if (ronin.frame.zoom.scale == parseInt(q)) { return }
+
+    ronin.frame.zoom.scale = parseInt(q)
+
+    ronin.frame.el.style.width = `${ronin.frame.width * ronin.frame.zoom.scale}px`
+    ronin.frame.el.style.height = `${ronin.frame.height * ronin.frame.zoom.scale}px`
+    ronin.frame.zoom.offset.x = ronin.frame.zoom.scale == 1 ? 0 : ((-ronin.cursor.pos.x * ronin.frame.zoom.scale) + (ronin.frame.width / 2))
+    ronin.frame.zoom.offset.y = ronin.frame.zoom.scale == 1 ? 0 : ((-ronin.cursor.pos.y * ronin.frame.zoom.scale) + (ronin.frame.height / 2))
+
+    // Normalize
+    if (ronin.frame.zoom.offset.x > 0) { ronin.frame.zoom.offset.x = 0 }
+    if (ronin.frame.zoom.offset.y > 0) { ronin.frame.zoom.offset.y = 0 }
+
+    ronin.frame.el.style.top = `${ronin.frame.zoom.offset.y}px`
+    ronin.frame.el.style.left = `${ronin.frame.zoom.offset.x}px`
+  })
+
+  this.resize_to = function (size) {
+    this.el.style.width = `${size.width}px`
+    this.el.style.height = `${size.height}px`
+    ronin.frame.width = size.width
+    ronin.frame.height = size.height
+
+    const { dialog, app } = require('electron').remote
+    var win = require('electron').remote.getCurrentWindow()
+    win.setSize(size.width, size.height)
+    ronin.layers.above.resize_to(size)
+    ronin.layers.below.resize_to(size)
+    ronin.guide.resize_to(size)
+  }
+}

desktop/sources/scripts/modules/io.js

@@ -0,0 +1,131 @@
+function IO () {
+  Module.call(this, 'io', 'File import/export tools.')
+
+  this.image = null
+
+  this.methods.open = new Method('open', 'browser', 'Press enter to open the file browser.', function (q) {
+    var filepath = q ? [q] : dialog.showOpenDialog({ properties: ['openFile'] })
+
+    if (!filepath) { console.log('Nothing to load'); return }
+
+    fs.readFile(filepath[0], 'utf-8', (err, data) => {
+      if (err) { alert('An error ocurred reading the file :' + err.message); return }
+      var img = new Image()
+      img.src = filepath[0]
+      img.onload = function () {
+        var width = parseInt(img.naturalWidth * 0.5)
+        var height = parseInt(img.naturalHeight * 0.5)
+        ronin.frame.resize_to({ width: width, height: height })
+        ronin.io.draw_image(ronin.cursor.target.context(), img, { x: 0, y: 0, width: width, height: height })
+      }
+    })
+  })
+
+  this.methods.load = new Method('load', 'browser', 'Press enter to open the file browser.', function (q) {
+    var filepath = q ? [q] : dialog.showOpenDialog({ properties: ['openFile'] })
+
+    if (!filepath) { console.log('Nothing to load'); return }
+
+    fs.readFile(filepath[0], 'utf-8', (err, data) => {
+      if (err) { alert('An error ocurred reading the file :' + err.message); return }
+      var img = new Image()
+      img.src = filepath[0]
+      img.onload = function () {
+        ronin.io.image = img
+        ronin.commander.inject('io draw:20,20|100x100')
+      }
+    })
+  })
+
+  this.methods.render = new Method('render', 'png', 'Export canvas.', function (q) {
+    var ext = 'png'
+    var fs = require('fs')
+    var data = ronin.io.render().to_base64(ext).replace(/^data:image\/\w+;base64,/, '')
+    var buf = new Buffer(data, 'base64')
+
+    dialog.showSaveDialog((fileName) => {
+      if (fileName === undefined) { return }
+      fs.writeFile(fileName + '.' + ext, buf)
+    })
+  })
+
+  this.methods.export = new Method('render', 'jpg', 'Export canvas.', function (q) {
+    var ext = 'jpg'
+    var fs = require('fs')
+    var data = ronin.io.render(ronin.frame.background).to_base64(ext).replace(/^data:image\/\w+;base64,/, '')
+    var buf = new Buffer(data, 'base64')
+
+    dialog.showSaveDialog((fileName) => {
+      if (fileName === undefined) { return }
+      fs.writeFile(fileName + '.' + ext, buf)
+    })
+  })
+
+  this.methods.draw = new Method('draw', 'X,Y|WxH', 'Draw the loaded image pixels.', function (q) {
+    if (!ronin.io.image) { return }
+
+    ronin.io.draw_image(ronin.cursor.target.context(), ronin.io.image, ronin.commander.query().methods.draw)
+    ronin.io.image = null
+  })
+
+  // this.preview = function(q)
+  // {
+  //   ronin.preview.clear();
+
+  //   if(ronin.commander.query().methods.draw && this.image){
+  //     this.draw_image(ronin.preview.context(),this.image,ronin.commander.query().methods.draw);
+  //   }
+  // }
+
+  this.render = function (fill = null) {
+    var export_layer = new Layer()
+
+    export_layer.el.width = ronin.frame.width * 2
+    export_layer.el.height = ronin.frame.height * 2
+
+    if (fill) {
+      export_layer.fill(fill)
+    }
+    export_layer.context().drawImage(ronin.layers.below.el, 0, 0)
+    export_layer.context().drawImage(ronin.layers.above.el, 0, 0)
+    return export_layer
+  }
+
+  this.draw_image = function (ctx, img, params) {
+    var width = parseInt(img.naturalWidth * 0.5)
+    var height = parseInt(img.naturalHeight * 0.5)
+
+    var scale = params.width > params.height ? (params.width / width) * 2 : (params.height / height) * 2
+
+    ctx.drawImage(img, params.x * 2, params.y * 2, width * scale, height * scale)
+  }
+}
+
+window.addEventListener('dragover', function (e) {
+  e.stopPropagation()
+  e.preventDefault()
+  e.dataTransfer.dropEffect = 'copy'
+})
+
+window.addEventListener('drop', function (e) {
+  e.stopPropagation()
+  e.preventDefault()
+
+  var files = e.dataTransfer.files
+  var file = files[0]
+  var path = file.path ? file.path : file.name
+
+  if (path.substr(-4, 4) == '.thm') { return }
+
+  if (file.type && !file.type.match(/image.*/)) { console.log('Not image', file.type); return false }
+
+  var reader = new FileReader()
+
+  reader.onload = function (event) {
+    var img = new Image()
+    img.src = event.target.result
+    ronin.io.image = img
+    ronin.commander.inject('io draw:20,20|100x100')
+  }
+  reader.readAsDataURL(file)
+})

desktop/sources/scripts/modules/line.js

@@ -0,0 +1,69 @@
+function Line () {
+  Module.call(this, 'line', 'Drawing lines. Tween expects something in the `$&$>>$&$` format.')
+
+  this.ports.step = new Port(this, 'step', false, true, 0, 100, 'The tween line index.')
+  this.ports.thickness = new Port(this, 'thickness', true, true, 1, 100, 'The tween line thickness.')
+
+  this.methods.stroke = new Method('stroke', 'x1,y1&x2,y2', 'Stroke positions.', function (q) {
+    ronin.line.stroke_multi(q)
+  })
+
+  this.methods.tween = new Method('tween', 'tween:$&$>>$&$ step->thickness', 'Stroke lines between strokes.', function (q) {
+    var from = q.from
+    var to = q.to
+
+    ronin.line.ports.step.write(0)
+    while (ronin.line.ports.step.value < ronin.line.ports.step.max) {
+      var progress = ronin.line.ports.step.value / parseFloat(ronin.line.ports.step.max)
+      var new_positions = tween_positions(from, to, progress)
+      ronin.line.stroke_multi(new_positions)
+      ronin.line.ports.step.write(ronin.line.ports.step.value + 1)
+    }
+  })
+
+  this.preview = function (q) {
+    // TODO
+    // console.log(q);
+  }
+
+  this.stroke_multi = function (coordinates) {
+    var from = coordinates[0]
+    for (pos_id in coordinates) {
+      var pos = coordinates[pos_id]
+      ronin.line.stroke(from, pos)
+      from = pos
+    }
+  }
+
+  this.stroke = function (from, to, ctx = ronin.cursor.target.context()) {
+    ctx.beginPath()
+    ctx.globalCompositeOperation = 'source-over'
+    ctx.moveTo((from.x * 2), (from.y * 2))
+    ctx.lineTo((to.x * 2), (to.y * 2))
+    ctx.lineCap = 'round'
+    ctx.lineWidth = clamp(ronin.line.ports.thickness.value, 1, 200) * 0.1
+    ctx.strokeStyle = '#000'
+    ctx.stroke()
+    ctx.closePath()
+  }
+
+  function clamp (v, min, max) {
+    return v < min ? min : v > max ? max : v
+  }
+
+  function tween_positions (froms, tos, progress) {
+    var a = []
+    for (pos_id in froms) {
+      var from = froms[pos_id]
+      var to = tos[pos_id]
+      a.push(tween_position(from, to, progress))
+    }
+
+    return a
+  }
+
+  function tween_position (from, to, progress) {
+    var offset = { x: to.x - from.x, y: to.y - from.y }
+    return { x: from.x + offset.x * progress, y: from.y + offset.y * progress }
+  }
+}

desktop/sources/scripts/modules/magnet.js

@@ -0,0 +1,27 @@
+function Magnet () {
+  Module.call(this, 'magnet', 'Cursor magnetisation settings, changes are reflected on the grid layer.')
+
+  this.size = 0
+  this.step = 4
+
+  this.methods.lock = new Method('lock', '10', 'Magnetize cursor', function (q) {
+    var size = parseInt(q)
+    if (size < 5) { this.unlock(); return }
+    ronin.magnet.size = size
+    ronin.grid.draw(size, ronin.magnet.step)
+  })
+
+  this.methods.unlock = new Method('unlock', '', 'Release cursor', function (q) {
+    ronin.magnet.size = 0
+    ronin.grid.clear()
+  })
+
+  this.filter = function (pos) {
+    if (this.size < 5) {
+      return pos
+    }
+
+    var s = this.size
+    return { x: parseInt(pos.x / s) * s, y: parseInt(pos.y / s) * s }
+  }
+}

desktop/sources/scripts/modules/path.js

@@ -0,0 +1,90 @@
+function Path () {
+  Module.call(this, 'path', 'Trace lines and draw shapes.')
+
+  this.settings = { cap: 'square' }
+
+  this.methods.stroke = new Method('stroke', 'x,y&', '', function (q) {
+    ronin.preview.clear()
+
+    var path = ronin.path.create_path(q)
+
+    var ctx = ronin.cursor.target.context()
+
+    ctx.beginPath()
+    ctx.lineCap = ronin.path.settings.cap
+    ctx.lineWidth = ronin.cursor.size
+    ctx.strokeStyle = ronin.cursor.color
+    ctx.stroke(new Path2D(path))
+    ctx.closePath()
+  })
+
+  this.methods.fill = new Method('fill', 'x,y&', '', function (q) {
+    ronin.preview.clear()
+
+    var path = ronin.path.create_path(q)
+
+    var ctx = ronin.cursor.target.context()
+
+    ctx.beginPath()
+    ctx.lineCap = ronin.path.settings.cap
+    ctx.lineWidth = ronin.cursor.size
+    ctx.fillStyle = ronin.cursor.color
+    ctx.fill(new Path2D(path))
+    ctx.closePath()
+  })
+
+  this.methods.svg = new Method('svg', 'M0,0 L100,100', '', function (q) {
+    var path = ronin.commander.query().raw.replace('svg:', '').trim()
+    var ctx = ronin.cursor.target.context()
+    ctx.beginPath()
+    ctx.lineCap = ronin.path.settings.cap
+    ctx.lineWidth = ronin.cursor.size
+    ctx.strokeStyle = ronin.cursor.color
+    ctx.stroke(new Path2D(path))
+    ctx.closePath()
+  })
+
+  this.preview = function (q) {
+    if (!q.methods.stroke) { return }
+
+    ronin.preview.clear()
+    var path = ronin.path.create_path(q.methods.stroke)
+
+    var ctx = ronin.preview.context()
+    ctx.beginPath()
+    ctx.lineCap = ronin.path.settings.cap
+    ctx.lineWidth = ronin.cursor.size
+    ctx.strokeStyle = ronin.cursor.color
+    ctx.stroke(new Path2D(path))
+    ctx.closePath()
+  }
+
+  this.create_path = function (q_array) {
+    var svg_path = ''
+    var prev = { x: 0, y: 0 }
+    for (q_id in q_array) {
+      var coord = q_array[q_id]
+      if (!coord.x || !coord.y) { continue }
+      coord.x *= 2; coord.y *= 2
+      if (svg_path == '') {
+        var origin = { x: coord.x, y: coord.y }
+        svg_path += 'M' + (coord.x) + ',' + (coord.y) + ' '
+      } else if (coord.clockwise == true) {
+        var offset = make_offset(coord, prev)
+        svg_path += 'a' + (offset.x) + ',' + (offset.y) + ' 0 0,1 ' + (offset.x) + ',' + (offset.y)
+      } else if (coord.clockwise == false) {
+        var offset = make_offset(coord, prev)
+        svg_path += 'a' + (offset.x) + ',' + (offset.y) + ' 0 0,0 ' + (offset.x) + ',' + (offset.y)
+      } else {
+        var offset = make_offset(coord, prev)
+        svg_path += 'l' + (offset.x) + ',' + (offset.y) + ' '
+      }
+      prev = coord
+    }
+    return svg_path
+  }
+
+  function make_offset (a, b) {
+    return { x: a.x - b.x, y: a.y - b.y }
+  }
+}

desktop/sources/scripts/modules/type.js

@@ -0,0 +1,28 @@
+function Type () {
+  Module.call(this, 'type')
+
+  this.settings = { color: '#000000', font: 'Gotham Light', anchor: 'center' }
+
+  this.methods.write = new Method('write', 'text&x,y|WxH', 'Draw text', function (q) {
+    var rect = q[1]
+    var size = rect.height * 2
+    ronin.preview.clear()
+
+    ronin.cursor.target.context().textAlign = ronin.type.settings.anchor
+    ronin.cursor.target.context().font = size + 'px ' + ronin.type.settings.font.replace('+', ' ')
+    ronin.cursor.target.context().fillText(q[0].replace('+', ' '), rect.x * 2, (rect.y * 2) + size)
+  })
+
+  this.preview = function (q) {
+    if (!q.methods.write || !q.methods.write[1]) { return }
+
+    var rect = q.methods.write[1]
+    var size = rect.height * 2
+
+    ronin.preview.clear()
+
+    ronin.preview.context().textAlign = this.settings.anchor
+    ronin.preview.context().font = size + 'px ' + this.settings.font.replace('+', ' ')
+    ronin.preview.context().fillText(q.methods.write[0].replace('+', ' '), rect.x * 2, (rect.y * 2) + size)
+  }
+}