diff --git a/desktop/sources/index.html b/desktop/sources/index.html
index ac6e138..ec7de92 100644
--- a/desktop/sources/index.html
+++ b/desktop/sources/index.html
@@ -1,36 +1,12 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
+
+
+
diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css
index 70478cc..1a4195d 100644
--- a/desktop/sources/links/main.css
+++ b/desktop/sources/links/main.css
@@ -5,19 +5,9 @@ yu { display:block; }
:root { --background: "#222"; --f_high: "#fff";--f_med: "#777";--f_low: "#444";--f_inv: "#000";--b_high: "#000";--b_med: "#affec7";--b_low: "#000";--b_inv: "#affec7"; }
-#cursor { z-index:899; position: absolute; }
-#guide { z-index:810;position: absolute; transition: opacity 250ms; opacity: 0}
-#above { z-index:800; position: absolute; }
-#below { z-index:799; position: absolute; }
-
#ronin { background:var(--b_low); height: 100vh; width:100vw; }
-#commander { z-index: 9000; top: 15px; position: absolute; transition: all 150ms; left: 15px; width: calc(50vw - 60px); height: calc(100vh - 60px); padding: 15px; border-right: 1px solid #333;}
-#commander textarea { background: none; width: 100%; height: calc(100vh - 75px); resize: none; font-size: 12px;color: white; }
-#commander div#status { color:#555; }
-
-#commander.hidden { top:-40px; }
-#commander.visible { top:0px; }
-
-surface { display: block; background:var(--background); position: absolute; top:0px; transition: all 100ms; }
-surface .layer { border-radius: 4px; overflow: hidden; width:100%; height:100%;}
+#ronin #commander { z-index: 9000; top: 15px; position: absolute; transition: all 150ms; left: 15px; width: calc(50vw - 60px); height: calc(100vh - 60px); padding: 15px; border-right: 1px solid #333;}
+#ronin #commander textarea { background: none; width: 100%; height: calc(100vh - 75px); resize: none; font-size: 12px;color: white; }
+#ronin #commander div#status { color:#555; }
+#ronin canvas#surface { background:red; position: absolute; left:50vw; }
\ No newline at end of file
diff --git a/desktop/sources/scripts/core/commander.js b/desktop/sources/scripts/commander.js
similarity index 92%
rename from desktop/sources/scripts/core/commander.js
rename to desktop/sources/scripts/commander.js
index c83c629..1495c23 100644
--- a/desktop/sources/scripts/core/commander.js
+++ b/desktop/sources/scripts/commander.js
@@ -15,6 +15,8 @@ function Commander () {
this.start = function () {
this._input.value = `
+(clear)
+
; Get Image
(load "../media/test.png"
@@ -27,7 +29,7 @@ function Commander () {
(crop
(rect 0 0 300 300))))`.trim()
- this._status.textContent = 'Idle.'
+ this._status.textContent = 'Idle, RUN(cmd+enter).'
this._input.focus()
}
diff --git a/desktop/sources/scripts/core/cursor.js b/desktop/sources/scripts/core/cursor.js
deleted file mode 100644
index 4fa4caf..0000000
--- a/desktop/sources/scripts/core/cursor.js
+++ /dev/null
@@ -1,137 +0,0 @@
-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 = ''
-
- 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))
- }
- }
-}
diff --git a/desktop/sources/scripts/core/docs.js b/desktop/sources/scripts/core/docs.js
deleted file mode 100644
index 30528ed..0000000
--- a/desktop/sources/scripts/core/docs.js
+++ /dev/null
@@ -1,61 +0,0 @@
-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 += "
\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
- }
-}
diff --git a/desktop/sources/scripts/core/keyboard.js b/desktop/sources/scripts/core/keyboard.js
deleted file mode 100644
index 0605f56..0000000
--- a/desktop/sources/scripts/core/keyboard.js
+++ /dev/null
@@ -1,19 +0,0 @@
-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()) {
-
- }
- }
-}
diff --git a/desktop/sources/scripts/core/layer.js b/desktop/sources/scripts/core/layer.js
deleted file mode 100644
index aef37da..0000000
--- a/desktop/sources/scripts/core/layer.js
+++ /dev/null
@@ -1,61 +0,0 @@
-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)
- }
-}
diff --git a/desktop/sources/scripts/core/method.js b/desktop/sources/scripts/core/method.js
deleted file mode 100644
index a269d00..0000000
--- a/desktop/sources/scripts/core/method.js
+++ /dev/null
@@ -1,10 +0,0 @@
-function Method (name, params, info = 'Missing documentation', f) {
- this.name = name
- this.params = params
- this.info = info
- this.run = f
-
- this.docs = function () {
- return '' + this.params + ' ' + this.info + ''
- }
-}
diff --git a/desktop/sources/scripts/core/module.js b/desktop/sources/scripts/core/module.js
deleted file mode 100644
index d03f226..0000000
--- a/desktop/sources/scripts/core/module.js
+++ /dev/null
@@ -1,6 +0,0 @@
-function Module (name, docs = 'Missing documentation.') {
- this.name = name
- this.methods = {}
-
- this.docs = docs
-}
diff --git a/desktop/sources/scripts/core/port.js b/desktop/sources/scripts/core/port.js
deleted file mode 100644
index 5cbfcf6..0000000
--- a/desktop/sources/scripts/core/port.js
+++ /dev/null
@@ -1,20 +0,0 @@
-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)
- }
-}
diff --git a/desktop/sources/scripts/core/query.js b/desktop/sources/scripts/core/query.js
deleted file mode 100644
index 2e58c4d..0000000
--- a/desktop/sources/scripts/core/query.js
+++ /dev/null
@@ -1,104 +0,0 @@
-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
- }
-}
diff --git a/desktop/sources/scripts/core/swatch.js b/desktop/sources/scripts/core/swatch.js
deleted file mode 100644
index 1fb7869..0000000
--- a/desktop/sources/scripts/core/swatch.js
+++ /dev/null
@@ -1,20 +0,0 @@
-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]
- }
-}
diff --git a/desktop/sources/scripts/layers/guide.js b/desktop/sources/scripts/layers/guide.js
deleted file mode 100644
index a56e271..0000000
--- a/desktop/sources/scripts/layers/guide.js
+++ /dev/null
@@ -1,212 +0,0 @@
-function Guide () {
- Layer.call(this)
-
- this.el.id = 'guide'
- this.inspect = true
-
- this.update = function () {
- this.clear()
-
- var units = this.find_units()
-
- if (this.inspect) {
- this.draw_inspector()
- }
-
- // Brush mirrors
- for (id in ronin.brush.pointers) {
- var pointer = ronin.brush.pointers[id]
- if (!pointer.options.mirror) { continue }
- units.push({ x1: pointer.options.mirror.x, y1: 0, x2: pointer.options.mirror.x, y2: ronin.frame.height })
- }
-
- if (units.length == 0) { return }
-
- for (i in units) {
- this.draw(units[i])
- }
- }
-
- this.toggle = function () {
- this.el.style.opacity = this.el.style.opacity == 0 ? 1 : 0
- }
-
- this.toggle_color_picker = function (show) {
- if (!show) { return }
- 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 x = i % (ronin.frame.width * 8)
- var y = i / (ronin.frame.width * 32)
- data[i] = x / 32
- data[i + 1] = 255 - (x / 32)
- data[i + 2] = y
- data[i + 3] = 255
- }
- ronin.layers.guide.context().putImageData(originalData, 0, 0)
- }
-
- this.draw = function (u = null) {
- if (u && u.x1 != null && u.y1 != null && u.x2 != null && u.y2 != null) {
- this.draw_line({ x: u.x1, y: u.y1 }, { x: u.x2, y: u.y2 })
- }
-
- if (u && u.x && u.y) {
- this.draw_pos(u)
- }
- if (u && u.width && u.height) {
- this.draw_rect(u)
- this.draw_pos({ x: u.x + (u.width / 2), y: u.y + (u.height / 2) })
- }
- }
-
- this.draw_rect = function (u) {
- var ctx = this.context()
-
- 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 = { width: u.width * 2, height: u.height * 2 }
-
- // Outline
-
- ctx.beginPath()
- ctx.globalCompositeOperation = 'source-over'
- ctx.moveTo(offset.x, offset.y)
- ctx.lineTo(offset.x + rect.width, offset.y)
- ctx.lineTo(offset.x + rect.width, offset.y + rect.height)
- ctx.lineTo(offset.x, offset.y + rect.height)
- ctx.lineTo(offset.x, offset.y)
- ctx.lineCap = 'round'
- ctx.lineWidth = 2
- ctx.strokeStyle = '#000'
- ctx.stroke()
- ctx.closePath()
- }
-
- this.draw_line = function (u1, u2, color = '#000') {
- var ctx = this.context()
-
- ctx.beginPath()
- ctx.globalCompositeOperation = 'source-over'
- ctx.moveTo(u1.x * 2, u1.y * 2)
- ctx.lineTo(u2.x * 2, u2.y * 2)
- ctx.lineCap = 'round'
- ctx.lineWidth = 0.5
- ctx.strokeStyle = color
- ctx.stroke()
- ctx.closePath()
- }
-
- this.draw_pos = function (u) {
- var ctx = this.context()
-
- var offset = 2
- var radius = 5
-
- var pos = { x: u.x * 2, y: u.y * 2 }
-
- ctx.beginPath()
- ctx.globalCompositeOperation = 'source-over'
- ctx.moveTo(pos.x + offset, pos.y)
- ctx.lineTo(pos.x + radius, pos.y)
- ctx.moveTo(pos.x, pos.y + offset)
- ctx.lineTo(pos.x, pos.y + radius)
- ctx.moveTo(pos.x - offset, pos.y)
- ctx.lineTo(pos.x - radius, pos.y)
- ctx.moveTo(pos.x, pos.y - offset)
- ctx.lineTo(pos.x, pos.y - radius)
- ctx.lineCap = 'round'
- ctx.lineWidth = 4
- ctx.strokeStyle = '#000'
- ctx.stroke()
- ctx.lineWidth = 2
- ctx.strokeStyle = '#fff'
- ctx.stroke()
- ctx.closePath()
- }
-
- this.find_units = function (q = ronin.commander.getQuery()) {
- var a = []
-
- // for (method_id in q.methods) {
- // var params = q.methods[method_id]
- // if (params.from && params.to) {
- // a = a.concat(params.from)
- // a = a.concat(params.to)
- // } else {
- // a = a.concat(params)
- // }
- // }
- return a
- }
-
- this.draw_inspector = function () {
- var color = 'black'
-
- // Center
- this.draw_line({ x: 0, y: ronin.frame.height / 2 }, { x: 10, y: ronin.frame.height / 2 }, color)
- this.draw_line({ x: ronin.frame.width - 10, y: ronin.frame.height / 2 }, { x: ronin.frame.width, y: ronin.frame.height / 2 }, color)
- this.draw_line({ x: (ronin.frame.width / 2) - 10, y: ronin.frame.height / 2 }, { x: (ronin.frame.width / 2) + 10, y: ronin.frame.height / 2 }, color)
- this.draw_line({ x: ronin.frame.width / 2, y: 0 }, { x: ronin.frame.width / 2, y: 10 }, color)
- this.draw_line({ x: ronin.frame.width / 2, y: ronin.frame.height - 10 }, { x: ronin.frame.width / 2, y: ronin.frame.height }, color)
- this.draw_line({ x: ronin.frame.width / 2, y: (ronin.frame.height / 2) - 10 }, { x: ronin.frame.width / 2, y: (ronin.frame.height / 2) + 10 }, color)
-
- var ctx = this.context()
-
- var w = ronin.frame.width * 2
- var h = ronin.frame.height * 2
- var angle = 45
-
- ctx.translate(w / 2, h / 2)
-
- ctx.rotate(angle * Math.PI / 180)
-
- this.line(ctx, -w, 0, w, 0, color)
-
- this.line(ctx, w * 0.4, -h, w * 0.4, h, color)
- this.line(ctx, -w * 0.4, -h, -w * 0.4, h, color)
-
- this.line(ctx, -w, h * 0.25, w, h * 0.25, color)
- this.line(ctx, -w, -h * 0.25, w, -h * 0.25, color)
-
- this.line(ctx, w * 0.1, 0, w * 0.1, h, color)
- this.line(ctx, -w * 0.1, 0, -w * 0.1, -h, color)
-
- this.circle(ctx, w * 0.4, -h * 0.25, w * 0.05, 1, 1.5, color)
- this.circle(ctx, -w * 0.4, h * 0.25, w * 0.05, 0, 0.5, color)
-
- ctx.font = '5px Arial'
- ctx.fillStyle = color
- ctx.fillText(angle + "'", (w * 0.4) + 10, 10)
-
- ctx.font = '5px Arial'
- ctx.fillStyle = color
- ctx.fillText(angle + "'", (-w * 0.4) - 20, -10)
-
- ctx.rotate(-angle * Math.PI / 180)
- ctx.translate(-w / 2, -h / 2)
- }
-
- this.line = function (context, x1, x2, y1, y2, color) {
- context.beginPath()
- context.moveTo(x1, x2)
- context.lineTo(y1, y2)
- context.lineCap = 'round'
- context.lineWidth = 0.5
- context.strokeStyle = color
- context.stroke()
- context.closePath()
- }
-
- this.circle = function (context, x, y, r, c1, c2, color) {
- context.beginPath()
- context.arc(x, y, r, c1 * Math.PI, c2 * Math.PI)
- context.lineCap = 'round'
- context.lineWidth = 0.5
- context.strokeStyle = color
- context.stroke()
- context.closePath()
- }
-}
diff --git a/desktop/sources/scripts/controller.js b/desktop/sources/scripts/lib/controller.js
similarity index 100%
rename from desktop/sources/scripts/controller.js
rename to desktop/sources/scripts/lib/controller.js
diff --git a/desktop/sources/scripts/theme.js b/desktop/sources/scripts/lib/theme.js
similarity index 100%
rename from desktop/sources/scripts/theme.js
rename to desktop/sources/scripts/lib/theme.js
diff --git a/desktop/sources/scripts/lisp.js b/desktop/sources/scripts/lisp.js
new file mode 100644
index 0000000..4adba58
--- /dev/null
+++ b/desktop/sources/scripts/lisp.js
@@ -0,0 +1,108 @@
+'use strict'
+
+// Originally created by maryrosecook
+// https://github.com/maryrosecook/littlelisp
+
+function Lisp (input, lib, tables, host) {
+ const TYPES = { identifier: 0, keyword: 1, number: 2, string: 3, bool: 4 }
+ const Context = function (scope, parent) {
+ this.scope = scope
+ this.parent = parent
+
+ this.get = function (identifier) {
+ if (identifier in this.scope) {
+ return this.scope[identifier]
+ } else if (this.parent !== undefined) {
+ return this.parent.get(identifier)
+ }
+ }
+ }
+
+ const special = {
+ let: function (input, context) {
+ const letContext = input[1].reduce(function (acc, x) {
+ acc.scope[x[0].value] = interpret(x[1], context)
+ return acc
+ }, new Context({}, context))
+
+ return interpret(input[2], letContext)
+ },
+
+ lambda: function (input, context) {
+ return function () {
+ const lambdaArguments = arguments
+ const lambdaScope = input[1].reduce(function (acc, x, i) {
+ acc[x.value] = lambdaArguments[i]
+ return acc
+ }, {})
+
+ return interpret(input[2], new Context(lambdaScope, context))
+ }
+ }
+ }
+
+ const interpretList = function (input, context) {
+ if (input.length > 0 && input[0].value in special) {
+ return special[input[0].value](input, context)
+ }
+ const list = input.map(function (x) { return interpret(x, context) })
+ return list[0] instanceof Function ? list[0].apply(undefined, list.slice(1)) : list
+ }
+
+ const interpret = function (input, context) {
+ if (context === undefined) {
+ return interpret(input, new Context(lib))
+ } else if (input instanceof Array) {
+ return interpretList(input, context)
+ } else if (input.type === TYPES.identifier) {
+ return context.get(input.value)
+ } else if (input.type === TYPES.keyword) {
+ return host[input.value] ? host[input.value] : null
+ } else if (input.type === TYPES.number || input.type === TYPES.string || input.type === TYPES.bool) {
+ return input.value
+ }
+ }
+
+ const categorize = function (input) {
+ if (!isNaN(parseFloat(input))) {
+ return { type: TYPES.number, value: parseFloat(input) }
+ } else if (input[0] === '"' && input.slice(-1) === '"') {
+ return { type: TYPES.string, value: input.slice(1, -1) }
+ } else if (input[0] === ':') {
+ return { type: TYPES.keyword, value: input.substr(1, input.length - 1) }
+ } else if (input === 'true' || input === 'false') {
+ return { type: TYPES.bool, value: input === 'true' }
+ } else {
+ return { type: TYPES.identifier, value: input }
+ }
+ }
+
+ const parenthesize = function (input, list) {
+ if (list === undefined) { return parenthesize(input, []) }
+
+ const token = input.shift()
+
+ if (token === undefined) {
+ return list.pop()
+ } else if (token === '(') {
+ list.push(parenthesize(input, []))
+ return parenthesize(input, list)
+ } else if (token === ')') {
+ return list
+ } else {
+ return parenthesize(input, list.concat(categorize(token)))
+ }
+ }
+
+ const tokenize = function (input) {
+ return input.replace(/^\;.*\n?/gm, '').split('"').map(function (x, i) { return i % 2 === 0 ? x.replace(/\(/g, ' ( ').replace(/\)/g, ' ) ') : x.replace(/ /g, '!whitespace!') }).join('"').trim().split(/\s+/).map(function (x) { return x.replace(/!whitespace!/g, ' ') })
+ }
+
+ this.parse = function (input) {
+ return parenthesize(tokenize(input))
+ }
+
+ this.toString = function () {
+ return `${interpret(this.parse(input))}`
+ }
+}
diff --git a/desktop/sources/scripts/modules/brush.js b/desktop/sources/scripts/modules/brush.js
deleted file mode 100644
index b30bd28..0000000
--- a/desktop/sources/scripts/modules/brush.js
+++ /dev/null
@@ -1,107 +0,0 @@
-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
- }
-}
diff --git a/desktop/sources/scripts/modules/filter.js b/desktop/sources/scripts/modules/filter.js
deleted file mode 100644
index 504fb0c..0000000
--- a/desktop/sources/scripts/modules/filter.js
+++ /dev/null
@@ -1,60 +0,0 @@
-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)
- }
-}
diff --git a/desktop/sources/scripts/modules/frame.js b/desktop/sources/scripts/modules/frame.js
deleted file mode 100644
index bc45a1f..0000000
--- a/desktop/sources/scripts/modules/frame.js
+++ /dev/null
@@ -1,90 +0,0 @@
-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)
- }
-}
diff --git a/desktop/sources/scripts/modules/io.js b/desktop/sources/scripts/modules/io.js
deleted file mode 100644
index 315bac1..0000000
--- a/desktop/sources/scripts/modules/io.js
+++ /dev/null
@@ -1,131 +0,0 @@
-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)
-})
diff --git a/desktop/sources/scripts/modules/line.js b/desktop/sources/scripts/modules/line.js
deleted file mode 100644
index be24d12..0000000
--- a/desktop/sources/scripts/modules/line.js
+++ /dev/null
@@ -1,69 +0,0 @@
-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 }
- }
-}
diff --git a/desktop/sources/scripts/modules/magnet.js b/desktop/sources/scripts/modules/magnet.js
deleted file mode 100644
index d81e37f..0000000
--- a/desktop/sources/scripts/modules/magnet.js
+++ /dev/null
@@ -1,27 +0,0 @@
-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 }
- }
-}
diff --git a/desktop/sources/scripts/modules/path.js b/desktop/sources/scripts/modules/path.js
deleted file mode 100644
index 3b26bd7..0000000
--- a/desktop/sources/scripts/modules/path.js
+++ /dev/null
@@ -1,90 +0,0 @@
-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 }
- }
-}
diff --git a/desktop/sources/scripts/modules/type.js b/desktop/sources/scripts/modules/type.js
deleted file mode 100644
index a063e51..0000000
--- a/desktop/sources/scripts/modules/type.js
+++ /dev/null
@@ -1,28 +0,0 @@
-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)
- }
-}
diff --git a/desktop/sources/scripts/ronin.js b/desktop/sources/scripts/ronin.js
index c26a941..9192da0 100644
--- a/desktop/sources/scripts/ronin.js
+++ b/desktop/sources/scripts/ronin.js
@@ -15,81 +15,33 @@ function Ronin () {
this.el.id = 'ronin'
this.theme = new Theme(defaultTheme)
-
- this.keyboard = new Keyboard()
this.commander = new Commander()
- this.cursor = new Cursor()
- this.docs = new Docs()
+ this.surface = new Surface()
- this.guide = new Guide()
- this.above = new Layer('above')
- this.below = new Layer('below')
-
- this.io = new IO()
- this.brush = new Brush()
- this.frame = new Frame()
- this.path = new Path()
- this.filter = new Filter()
- this.type = new Type()
-
- this.layers = {
- guide: this.guide,
- above: this.above,
- below: this.below,
- cursor: this.cursor,
- guide: this.guide
- }
-
- this.modules = {
- brush: this.brush,
- frame: this.frame,
- io: this.io,
- path: this.path,
- filter: this.filter,
- type: this.type
- }
-
- this.install = function (host) {
- this.brush.swatch.start()
-
- document.body.appendChild(this.el)
-
- this.frame.width = window.innerWidth
- this.frame.height = window.innerHeight
+ this.install = function (host = document.body) {
+ host.appendChild(this.el)
this.commander.install(this.el)
- this.frame.install()
+ this.surface.install(this.el)
- this.cursor.target = this.layers.above
-
- // this.guide.install();
- this.above.install()
- this.below.install()
- this.guide.install()
-
- this.guide.update()
this.theme.install(host, () => { this.update() })
}
this.start = function () {
this.theme.start()
this.commander.start()
+ this.surface.start()
- window.addEventListener('dragover', ronin.io.drag_over)
- window.addEventListener('drop', ronin.io.drop)
- ronin.frame.el.addEventListener('mousedown', ronin.cursor.mouse_down)
- ronin.frame.el.addEventListener('mousemove', ronin.cursor.mouse_move)
- ronin.frame.el.addEventListener('mouseup', ronin.cursor.mouse_up)
- ronin.frame.el.addEventListener('contextmenu', ronin.cursor.mouse_alt)
- window.addEventListener('keydown', ronin.keyboard.key_down)
- window.addEventListener('keyup', ronin.keyboard.key_up)
+ // window.addEventListener('dragover', ronin.io.drag_over)
+ // window.addEventListener('drop', ronin.io.drop)
+ // ronin.frame.el.addEventListener('mousedown', ronin.cursor.mouse_down)
+ // ronin.frame.el.addEventListener('mousemove', ronin.cursor.mouse_move)
+ // ronin.frame.el.addEventListener('mouseup', ronin.cursor.mouse_up)
+ // ronin.frame.el.addEventListener('contextmenu', ronin.cursor.mouse_alt)
+ // window.addEventListener('keydown', ronin.keyboard.key_down)
+ // window.addEventListener('keyup', ronin.keyboard.key_up)
console.log('Ronin', 'Started')
- this.above.update()
- this.below.update()
- this.guide.update()
-
- this.load()
}
this.reset = function () {
@@ -103,8 +55,4 @@ function Ronin () {
this.load = function (content = this.default()) {
}
-
- this.default = function () {
- return 'select_layer:below ; fill:#fff ; select_layer:above ; add_cursor:1,1 ; add_cursor:-1,-1'
- }
}
diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js
new file mode 100644
index 0000000..bbea9ab
--- /dev/null
+++ b/desktop/sources/scripts/surface.js
@@ -0,0 +1,16 @@
+function Surface () {
+ this.el = document.createElement('canvas')
+ this.el.id = 'surface'
+
+ this.install = function (host) {
+ host.appendChild(this.el)
+ }
+
+ this.start = function () {
+
+ }
+
+ this.update = function () {
+
+ }
+}
diff --git a/desktop/sources/scripts/units/color.js b/desktop/sources/scripts/units/color.js
deleted file mode 100644
index 0d44dd3..0000000
--- a/desktop/sources/scripts/units/color.js
+++ /dev/null
@@ -1,54 +0,0 @@
-function Color (hex = '#000000', rgb) {
- if (rgb) {
- this.rgb = rgb
- this.hex = '#' + ('0' + parseInt(rgb.r, 10).toString(16)).slice(-2) + ('0' + parseInt(rgb.g, 10).toString(16)).slice(-2) + ('0' + parseInt(rgb.b, 10).toString(16)).slice(-2)
- } else {
- this.hex = hex
- var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(this.hex)
- this.rgb = { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) }
- }
-
- this.r = this.rgb.r
- this.g = this.rgb.g
- this.b = this.rgb.b
-
- this.average = parseInt((this.r + this.g + this.b) / 3)
- this.invert = { r: 255 - this.rgb.r, g: 255 - this.rgb.g, b: 255 - this.rgb.b }
-
- this.rgba = function () {
- return 'rgba(' + this.rgb().r + ',' + this.rgb().g + ',' + this.rgb().b + ',1)'
- }
-
- this.floats = function () {
- var rgb = this.rgb
- return { r: rgb.r / 255, g: rgb.g / 255, b: rgb.b / 255 }
- }
-
- this.render = function () {
- return this.hex
- }
-
- this.rgb_to_hex = function (rgb) {
- return '#' + ('0' + parseInt(rgb[0], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2)
- }
-
- this.brightness = function () {
- return this.rgb() ? (this.rgb().r + this.rgb().g + this.rgb().b) / 3 : 0
- }
-
- this.style = function () {
- return this.brightness() > 150 ? 'bright' : 'dark'
- }
-
- this.tween = function (target, value) {
- var c1 = this.floats()
- var c2 = target.floats()
-
- var r = ((255 * c1.r) * value) + ((255 * c2.r) * (1 - value))
- var g = ((255 * c1.g) * value) + ((255 * c2.g) * (1 - value))
- var b = ((255 * c1.b) * value) + ((255 * c2.b) * (1 - value))
- var rgb = [parseInt(r), parseInt(g), parseInt(b)]
- var hex = new Color().rgb_to_hex(rgb)
- return hex
- }
-}