dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Let's get this party started

Browse Source
This commit is contained in:
Devine Lu Linvega 2019-07-12 20:10:53 +09:00
parent a56b66433b
commit 371c255022
30 changed files with 1390 additions and 1651 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
BUILD.md
View File

@ -1,39 +0,0 @@
## Build
Don't forget to ```npm cache clean```!
### Build Linux64 / Darwin64 / Windows64(Offsite)
```
cd /xxiivv/Nataniev/public/public.projects/sources/Ronin/
git pull
rm -r /xxiivv/Nataniev/public/public.projects/builds/Ronin-linux-x64/
rm /xxiivv/Nataniev/public/public.projects/builds/ronin_lin64.zip
electron-packager . Ronin --platform=linux --arch=x64 --out /xxiivv/Nataniev/public/public.projects/builds --overwrite --electron-version=1.7.5 --icon=icon.ico
rm -r /xxiivv/Nataniev/public/public.projects/builds/Ronin-win32-x64/
rm /xxiivv/Nataniev/public/public.projects/builds/ronin_win64.zip
electron-packager . Ronin --platform=win32 --arch=x64 --out /xxiivv/Nataniev/public/public.projects/builds --overwrite --electron-version=1.7.5 --icon=icon.ico
rm -r /xxiivv/Nataniev/public/public.projects/builds/Ronin-darwin-x64/
rm /xxiivv/Nataniev/public/public.projects/builds/ronin_osx64.zip
electron-packager . Ronin --platform=darwin --arch=x64 --out /xxiivv/Nataniev/public/public.projects/builds --overwrite --electron-version=1.7.5 --icon=icon.icns
cd /xxiivv/Nataniev/public/public.projects/builds/
~/butler push /xxiivv/Nataniev/public/public.projects/builds/Ronin-linux-x64/ hundredrabbits/ronin:linux-64
~/butler push /xxiivv/Nataniev/public/public.projects/builds/Ronin-win32-x64/ hundredrabbits/ronin:windows-64
~/butler push /xxiivv/Nataniev/public/public.projects/builds/Ronin-darwin-x64/ hundredrabbits/ronin:osx-64
rm -r /xxiivv/Nataniev/public/public.projects/builds/Ronin-darwin-x64/
rm -r /xxiivv/Nataniev/public/public.projects/builds/Ronin-linux-x64/
rm -r /xxiivv/Nataniev/public/public.projects/builds/Ronin-win32-x64/
~/butler status hundredrabbits/ronin
```
### Etcs.
`var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;`

1
LAYOUT.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

1
README.md
View File

@ -1,4 +1,5 @@
# Ronin # Ronin
Ronin is a graphic design tool under development. Ronin is a graphic design tool under development.
<img src='https://raw.githubusercontent.com/hundredrabbits/Ronin/master/PREVIEW.jpg' width='600'/> <img src='https://raw.githubusercontent.com/hundredrabbits/Ronin/master/PREVIEW.jpg' width='600'/>

94
main.js
View File

@ -1,64 +1,76 @@
const {app, BrowserWindow, webFrame, Menu, dialog} = require('electron') const { app, BrowserWindow, webFrame, Menu } = require('electron')
const path = require('path') const path = require('path')
const url = require('url') const url = require('url')
const shell = require('electron').shell const shell = require('electron').shell
let is_shown = true; let isShown = true
app.inspect = function() app.win = null
{
app.win.toggleDevTools();
}
app.toggle_fullscreen = function() app.on('ready', () => {
{ app.win = new BrowserWindow({
app.win.setFullScreen(app.win.isFullScreen() ? false : true); width: 660,
} height: 390,
minWidth: 320,
minHeight: 320,
backgroundColor: '#000',
icon: path.join(__dirname, { darwin: 'icon.icns', linux: 'icon.png', win32: 'icon.ico' }[process.platform] || 'icon.ico'),
resizable: true,
frame: process.platform !== 'darwin',
skipTaskbar: process.platform === 'darwin',
autoHideMenuBar: process.platform === 'darwin',
webPreferences: { zoomFactor: 1.0, nodeIntegration: true, backgroundThrottling: false }
})
app.toggle_visible = function() app.win.loadURL(`file://${__dirname}/sources/index.html`)
{ // app.inspect()
if(is_shown){ app.win.hide(); } else{ app.win.show(); }
}
app.inject_menu = function(m)
{
Menu.setApplicationMenu(Menu.buildFromTemplate(m));
}
app.win = null;
app.on('ready', () =>
{
app.win = new BrowserWindow({width: 900, height: 540, minWidth: 900, minHeight: 540, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'})
app.win.toggleDevTools();
app.win.loadURL(`file://${__dirname}/sources/index.html`);
app.win.on('closed', () => { app.win.on('closed', () => {
win = null win = null
app.quit() app.quit()
}) })
app.win.on('hide',function() { app.win.on('hide', function () {
is_shown = false; isShown = false
}) })
app.win.on('show',function() { app.win.on('show', function () {
is_shown = true; isShown = true
}) })
})
app.on('window-all-closed', () => app.on('window-all-closed', () => {
{
app.quit() app.quit()
}) })
app.on('activate', () => { app.on('activate', () => {
if (app.win === null) { if (app.win === null) {
createWindow() createWindow()
} else {
app.win.show()
} }
else{ })
}
}) })
app.inspect = function () {
app.win.toggleDevTools()
}
app.toggleFullscreen = function () {
app.win.setFullScreen(!app.win.isFullScreen())
}
app.toggleVisible = function () {
if (process.platform === 'win32') {
if (!app.win.isMinimized()) { app.win.minimize() } else { app.win.restore() }
} else {
if (isShown && !app.win.isFullScreen()) { app.win.hide() } else { app.win.show() }
}
}
app.injectMenu = function (menu) {
try {
Menu.setApplicationMenu(Menu.buildFromTemplate(menu))
} catch (err) {
console.warn('Cannot inject menu.')
}
}

6
package.json
View File

@ -17,9 +17,7 @@
"push" : "npm run build ; npm run push_theme ; npm run push_osx ; npm run push_linux ; npm run push_win ; npm run clean ; npm run push_status" "push" : "npm run build ; npm run push_theme ; npm run push_osx ; npm run push_linux ; npm run push_win ; npm run clean ; npm run push_status"
}, },
"devDependencies": { "devDependencies": {
"electron": "^1.8.1" "electron": "^5.0.6",
}, "electron-packager": "^13.1.1"
"dependencies": {
"electron-packager": "^8.4.0"
} }
} }

16
sources/index.html
View File

@ -46,7 +46,21 @@
const app_path = app.getAppPath(); const app_path = app.getAppPath();
var ronin = new Ronin(); var ronin = new Ronin();
ronin.install();
ronin.controller = new Controller();
ronin.controller.add("default","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,");
ronin.controller.add("default","*","Fullscreen",() => { app.toggleFullscreen(); },"CmdOrCtrl+Enter");
ronin.controller.add("default","*","Hide",() => { app.toggleVisible(); },"CmdOrCtrl+H");
ronin.controller.add("default","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+.");
ronin.controller.add("default","*","Reset",() => { dotgrid.reset(); dotgrid.theme.reset(); },"CmdOrCtrl+Backspace");
ronin.controller.add("default","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q");
ronin.controller.commit();
ronin.install(document.body);
window.addEventListener('load', () => { ronin.start(); })
</script> </script>
</body> </body>
</html> </html>

194
sources/scripts/controller.js
View File

@ -1,164 +1,72 @@
function Controller() 'use strict'
{
this.menu = {default:{}};
this.mode = "default";
this.app = require('electron').remote.app; function Controller () {
const fs = require('fs')
const { dialog, app } = require('electron').remote
this.start = function() this.menu = { default: {} }
{ this.mode = 'default'
this.app = require('electron').remote.app
this.start = function () {
} }
this.add = function(mode,cat,label,fn,accelerator) this.add = function (mode, cat, label, fn, accelerator) {
{ if (!this.menu[mode]) { this.menu[mode] = {} }
if(!this.menu[mode]){ this.menu[mode] = {}; } if (!this.menu[mode][cat]) { this.menu[mode][cat] = {} }
if(!this.menu[mode][cat]){ this.menu[mode][cat] = {}; } this.menu[mode][cat][label] = { fn: fn, accelerator: accelerator }
this.menu[mode][cat][label] = {fn:fn,accelerator:accelerator};
console.log(`${mode}/${cat}/${label} <${accelerator}>`);
} }
this.add_role = function(mode,cat,label) this.addRole = function (mode, cat, label) {
{ if (!this.menu[mode]) { this.menu[mode] = {} }
if(!this.menu[mode]){ this.menu[mode] = {}; } if (!this.menu[mode][cat]) { this.menu[mode][cat] = {} }
if(!this.menu[mode][cat]){ this.menu[mode][cat] = {}; } this.menu[mode][cat][label] = { role: label }
this.menu[mode][cat][label] = {role:label};
} }
this.set = function(mode = "default") this.clearCat = function (mode, cat) {
{ if (this.menu[mode]) { this.menu[mode][cat] = {} }
this.mode = mode;
this.commit();
} }
this.format = function() this.set = function (mode = 'default') {
{ this.mode = mode
var f = []; this.commit()
var m = this.menu[this.mode];
for(cat in m){
var submenu = [];
for(name in m[cat]){
var option = m[cat][name];
if(option.role){
submenu.push({role:option.role})
}
else{
submenu.push({label:name,accelerator:option.accelerator,click:option.fn})
}
}
f.push({label:cat,submenu:submenu});
}
return f;
} }
this.commit = function() this.format = function () {
{ const f = []
this.app.inject_menu(this.format()); const m = this.menu[this.mode]
for (const cat in m) {
const submenu = []
for (const name in m[cat]) {
const option = m[cat][name]
if (option.role) {
submenu.push({ role: option.role })
} else {
submenu.push({ label: name, accelerator: option.accelerator, click: option.fn })
}
}
f.push({ label: cat, submenu: submenu })
}
return f
} }
this.docs = function() this.commit = function () {
{ this.app.injectMenu(this.format())
console.log("Generating docs..");
var svg = this.generate(this.format())
dialog.showSaveDialog((fileName) => {
if (fileName === undefined){ return; }
fileName = fileName.substr(-4,4) != ".svg" ? fileName+".svg" : fileName;
fs.writeFile(fileName,svg);
});
} }
this.generate = function(m) this.accelerator_for_key = function (key, menu) {
{ const acc = { basic: null, ctrl: null }
var svg_html = ""; for (cat in menu) {
const options = menu[cat]
for(id in this.layout){ for (const id in options.submenu) {
var key = this.layout[id]; const option = options.submenu[id]; if (option.role) { continue }
var acc = this.accelerator_for_key(key.name,m); acc.basic = (option.accelerator.toLowerCase() === key.toLowerCase()) ? option.label.toUpperCase().replace('TOGGLE ', '').substr(0, 8).trim() : acc.basic
svg_html += `<rect x="${key.x + 1}" y="${key.y + 1}" width="${key.width - 2}" height="${key.height - 2}" rx="4" ry="4" title="${key.name}" stroke="#ccc" fill="none" stroke-width="1"/>`; acc.ctrl = (option.accelerator.toLowerCase() === ('CmdOrCtrl+' + key).toLowerCase()) ? option.label.toUpperCase().replace('TOGGLE ', '').substr(0, 8).trim() : acc.ctrl
svg_html += `<rect x="${key.x + 3}" y="${key.y + 3}" width="${key.width - 6}" height="${key.height - 12}" rx="3" ry="3" title="${key.name}" stroke="${acc.basic ? '#000' : acc.ctrl ? '#ccc' : '#fff'}" fill="${acc.basic ? '#000' : acc.ctrl ? '#ccc' : '#fff'}" stroke-width="1"/>`;
svg_html += `<text x="${key.x + 10}" y="${key.y + 20}" font-size='11' font-family='Input Mono' stroke-width='0' fill='${acc.basic ? '#fff' : '#000'}'>${key.name.toUpperCase()}</text>`;
svg_html += acc && acc.basic ? `<text x="${key.x + 10}" y="${key.y + 35}" font-size='7' font-family='Input Mono' stroke-width='0' fill='#fff'>${acc.basic}</text>` : '';
svg_html += acc && acc.ctrl ? `<text x="${key.x + 10}" y="${key.y + 45}" font-size='7' font-family='Input Mono' stroke-width='0' fill='#000'>${acc.ctrl}</text>` : '';
}
return `<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="900" height="300" version="1.0" style="fill:none;stroke:black;stroke-width:2px;">${svg_html}</svg>`;
}
this.accelerator_for_key = function(key,menu)
{
var acc = {basic:null,ctrl:null}
for(cat in menu){
var options = menu[cat];
for(id in options.submenu){
var option = options.submenu[id]; if(option.role){ continue; }
acc.basic = (option.accelerator.toLowerCase() == key.toLowerCase()) ? option.label.toUpperCase().replace("TOGGLE ","").substr(0,8).trim() : acc.basic;
acc.ctrl = (option.accelerator.toLowerCase() == ("CmdOrCtrl+"+key).toLowerCase()) ? option.label.toUpperCase().replace("TOGGLE ","").substr(0,8).trim() : acc.ctrl;
} }
} }
return acc; return acc
} }
this.layout = [
{x:0, y:0, width:60, height:60, name:"esc"},
{x:60, y:0, width:60, height:60, name:"1"},
{x:120, y:0, width:60, height:60, name:"2"},
{x:180, y:0, width:60, height:60, name:"3"},
{x:240, y:0, width:60, height:60, name:"4"},
{x:300, y:0, width:60, height:60, name:"5"},
{x:360, y:0, width:60, height:60, name:"6"},
{x:420, y:0, width:60, height:60, name:"7"},
{x:480, y:0, width:60, height:60, name:"8"},
{x:540, y:0, width:60, height:60, name:"9"},
{x:600, y:0, width:60, height:60, name:"0"},
{x:660, y:0, width:60, height:60, name:"-"},
{x:720, y:0, width:60, height:60, name:"plus"},
{x:780, y:0, width:120, height:60, name:"backspace"},
{x:0, y:60, width:90, height:60, name:"tab"},
{x:90, y:60, width:60, height:60, name:"q"},
{x:150, y:60, width:60, height:60, name:"w"},
{x:210, y:60, width:60, height:60, name:"e"},
{x:270, y:60, width:60, height:60, name:"r"},
{x:330, y:60, width:60, height:60, name:"t"},
{x:390, y:60, width:60, height:60, name:"y"},
{x:450, y:60, width:60, height:60, name:"u"},
{x:510, y:60, width:60, height:60, name:"i"},
{x:570, y:60, width:60, height:60, name:"o"},
{x:630, y:60, width:60, height:60, name:"p"},
{x:690, y:60, width:60, height:60, name:"["},
{x:750, y:60, width:60, height:60, name:"]"},
{x:810, y:60, width:90, height:60, name:"|"},
{x:0, y:120, width:105, height:60, name:"caps"},
{x:105, y:120, width:60, height:60, name:"a"},
{x:165, y:120, width:60, height:60, name:"s"},
{x:225, y:120, width:60, height:60, name:"d"},
{x:285, y:120, width:60, height:60, name:"f"},
{x:345, y:120, width:60, height:60, name:"g"},
{x:405, y:120, width:60, height:60, name:"h"},
{x:465, y:120, width:60, height:60, name:"j"},
{x:525, y:120, width:60, height:60, name:"k"},
{x:585, y:120, width:60, height:60, name:"l"},
{x:645, y:120, width:60, height:60, name:";"},
{x:705, y:120, width:60, height:60, name:"'"},
{x:765, y:120, width:135, height:60, name:"enter"},
{x:0, y:180, width:135, height:60, name:"shift"},
{x:135, y:180, width:60, height:60, name:"z"},
{x:195, y:180, width:60, height:60, name:"x"},
{x:255, y:180, width:60, height:60, name:"c"},
{x:315, y:180, width:60, height:60, name:"v"},
{x:375, y:180, width:60, height:60, name:"b"},
{x:435, y:180, width:60, height:60, name:"n"},
{x:495, y:180, width:60, height:60, name:"m"},
{x:555, y:180, width:60, height:60, name:","},
{x:615, y:180, width:60, height:60, name:"."},
{x:675, y:180, width:60, height:60, name:"/"},
{x:735, y:180, width:165, height:60, name:"capslock"},
{x:0, y:240, width:90, height:60, name:"ctrl"},
{x:90, y:240, width:90, height:60, name:"cmd"},
{x:180, y:240, width:90, height:60, name:"alt"},
{x:270, y:240, width:270, height:60, name:"space"},
{x:810, y:240, width:90, height:60, name:"ctrl"},
{x:720, y:240, width:90, height:60, name:"pn"},
{x:630, y:240, width:90, height:60, name:"fn"},
{x:540, y:240, width:90, height:60, name:"alt"}
];
} }
module.exports = new Controller(); module.exports = new Controller()

174
sources/scripts/core/commander.js
View File

@ -1,148 +1,128 @@
function Commander() function Commander () {
{ this.el = document.createElement('yu')
this.el = document.createElement('yu'); this.el.id = 'commander'
this.el.id = "commander"; this.input_el = document.createElement('input')
this.input_el = document.createElement('input'); this.input_el.value = ''
this.input_el.value = "";
this.install = function() this.install = function () {
{ this.el.appendChild(this.input_el)
this.el.appendChild(this.input_el); ronin.el.appendChild(this.el)
ronin.el.appendChild(this.el); this.input_el.focus()
this.input_el.focus();
} }
this.validate = function(q = ronin.commander.query()) this.validate = function (q = ronin.commander.query()) {
{ if (!ronin.modules[q.module]) { console.log('Unknown module', q.module); return }
if(!ronin.modules[q.module]){ console.log("Unknown module",q.module); return; } if (q.raw.indexOf('$') > -1) { console.log('Variables present'); return }
if(q.raw.indexOf("$") > -1){ console.log("Variables present"); return; } if (q.raw.indexOf(';') > -1) { this.validate_multi(q); return }
if(q.raw.indexOf(";") > -1){ this.validate_multi(q); return; }
// Run methods // Run methods
for(method_id in q.methods){ for (method_id in q.methods) {
var method_param = q.methods[method_id]; var method_param = q.methods[method_id]
if(!ronin.modules[q.module].methods[method_id]){ console.log("Missing method",method_id); return; } if (!ronin.modules[q.module].methods[method_id]) { console.log('Missing method', method_id); return }
ronin.modules[q.module].methods[method_id].run(method_param); ronin.modules[q.module].methods[method_id].run(method_param)
} }
ronin.commander.input_el.value = ""; ronin.commander.input_el.value = ''
ronin.hint.update(); ronin.hint.update()
ronin.guide.update(); ronin.guide.update()
} }
this.queue = []; this.queue = []
this.validate_multi = function(q) this.validate_multi = function (q) {
{ var queue = []
var queue = []; var queries = q.string.split(';')
var queries = q.string.split(";");
for(id in queries){ for (id in queries) {
var q = new Query(queries[id].trim()); var q = new Query(queries[id].trim())
queue.push(q); queue.push(q)
} }
this.queue = queue; this.queue = queue
this.run_queue(); this.run_queue()
} }
this.run_queue = function() this.run_queue = function () {
{ if (ronin.commander.queue.length == 0) { return }
if(ronin.commander.queue.length == 0){ return; }
ronin.commander.validate(ronin.commander.queue[0]); ronin.commander.validate(ronin.commander.queue[0])
ronin.commander.queue = ronin.commander.queue.splice(1,ronin.commander.queue.length-1) ronin.commander.queue = ronin.commander.queue.splice(1, ronin.commander.queue.length - 1)
setTimeout(ronin.commander.run_queue,250); setTimeout(ronin.commander.run_queue, 250)
} }
this.update = function() this.update = function () {
{ var q = ronin.commander.query()
var q = ronin.commander.query(); if (ronin.modules[q.module] && ronin.modules[q.module]['preview']) {
if(ronin.modules[q.module] && ronin.modules[q.module]["preview"]){ ronin.modules[q.module].preview(q)
ronin.modules[q.module].preview(q);
} }
ronin.hint.update(); ronin.hint.update()
ronin.guide.update(); ronin.guide.update()
} }
this.autocomplete = function() this.autocomplete = function () {
{ var target_module = ronin.commander.query().module
var target_module = ronin.commander.query().module; var ac = ronin.modules[target_module] ? ronin.hint.find_autocomplete(ronin.modules[target_module].methods, ':') : ronin.hint.find_autocomplete(ronin.modules, ' ')
var ac = ronin.modules[target_module] ? ronin.hint.find_autocomplete(ronin.modules[target_module].methods,":") : ronin.hint.find_autocomplete(ronin.modules," ") this.focus()
if (ac.lenght < 1 || !ac[0]) { return }
if (ronin.commander.query().string.length < 1) { return }
this.focus(); this.append(ac[0])
if(ac.lenght < 1 || !ac[0]){ return; }
if(ronin.commander.query().string.length < 1){ return; }
this.append(ac[0]);
} }
this.on_input = function(e) this.on_input = function (e) {
{ ronin.commander.update()
ronin.commander.update();
} }
this.is_focused = function() this.is_focused = function () {
{ return this.input_el === document.activeElement
return this.input_el === document.activeElement;
} }
this.focus = function() this.focus = function () {
{ this.input_el.focus()
this.input_el.focus();
} }
this.blur = function() this.blur = function () {
{ this.input_el.blur()
this.input_el.blur();
} }
this.active_module = function() this.active_module = function () {
{ return this.query().module
return this.query().module;
} }
this.inject = function(str) this.inject = function (str) {
{ ronin.commander.input_el.value = str
ronin.commander.input_el.value = str; ronin.commander.update()
ronin.commander.update(); ronin.commander.show()
ronin.commander.show();
} }
this.append = function(str) this.append = function (str) {
{ ronin.commander.input_el.value += str
ronin.commander.input_el.value += str; ronin.commander.update()
ronin.commander.update();
} }
this.activate = function() this.activate = function () {
{ ronin.commander.autocomplete()
ronin.commander.autocomplete(); ronin.commander.show()
ronin.commander.show(); setTimeout(() => { ronin.commander.focus }, 100)
setTimeout(()=>{ronin.commander.focus},100)
} }
this.deactivate = function() this.deactivate = function () {
{ this.blur()
this.blur(); this.hide()
this.hide();
} }
this.show = function() this.show = function () {
{ this.el.className = 'visible'
this.el.className = "visible";
} }
this.hide = function() this.hide = function () {
{ this.el.className = 'hidden'
this.el.className = "hidden";
} }
this.query = function() this.query = function () {
{ return new Query(ronin.commander.input_el.value)
return new Query(ronin.commander.input_el.value);
} }
} }

228
sources/scripts/core/cursor.js
View File

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

90
sources/scripts/core/docs.js
View File

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

103
sources/scripts/core/hint.js
View File

@ -1,79 +1,68 @@
function Hint() function Hint () {
{ this.el = document.createElement('yu')
this.el = document.createElement('yu'); this.el.id = 'hint'
this.el.id = "hint"; this.cursor_hint_el = document.createElement('yu')
this.cursor_hint_el = document.createElement('yu'); this.cursor_hint_el.id = 'cursor_hint'
this.cursor_hint_el.id = "cursor_hint";
this.install = function() this.install = function () {
{ ronin.commander.el.appendChild(this.el)
ronin.commander.el.appendChild(this.el); ronin.commander.el.appendChild(this.cursor_hint_el)
ronin.commander.el.appendChild(this.cursor_hint_el);
} }
this.find_autocomplete = function(collection,append = "") this.find_autocomplete = function (collection, append = '') {
{ var target = ronin.commander.query().last
var target = ronin.commander.query().last; var a = []
var a = [];
for(id in collection){ for (id in collection) {
var name = collection[id].name; var name = collection[id].name
if(name && name.substr(0,target.length) == target){ if (name && name.substr(0, target.length) == target) {
a.push(name.substr(target.length,20)+append) a.push(name.substr(target.length, 20) + append)
} }
} }
return a; return a
} }
this.update = function(e = null) this.update = function (e = null) {
{ var html = ''
var html = ""
for(module_id in ronin.modules){ for (module_id in ronin.modules) {
var module = ronin.modules[module_id]; var module = ronin.modules[module_id]
html += module_id+" "; html += module_id + ' '
} }
var target_module = ronin.commander.query().module; var target_module = ronin.commander.query().module
var target_method = Object.keys(ronin.commander.query().methods).length > 0 ? Object.keys(ronin.commander.query().methods)[0] : null var target_method = Object.keys(ronin.commander.query().methods).length > 0 ? Object.keys(ronin.commander.query().methods)[0] : null
if(ronin.commander.input_el.value == ""){ if (ronin.commander.input_el.value == '') {
this.el.innerHTML = html; this.el.innerHTML = html
} else if (ronin.modules[target_module] && ronin.modules[target_module].methods[target_method]) {
this.el.innerHTML = this.pad(ronin.commander.input_el.value) + ' ' + ronin.modules[target_module].methods[target_method].docs()
} else if (ronin.modules[target_module]) {
var ac = this.find_autocomplete(ronin.modules[target_module].methods, ':')
if (ac.length > 0) {
this.el.innerHTML = this.pad(ronin.commander.input_el.value) + "<span class='autocomplete'>" + ac[0] + '</span> > Press tab to autocomplete.'
} else {
this.el.innerHTML = this.pad(ronin.commander.input_el.value) + ' ' + ronin.modules[target_module].hint()
} }
else if(ronin.modules[target_module] && ronin.modules[target_module].methods[target_method]){ } else {
this.el.innerHTML = this.pad(ronin.commander.input_el.value)+" "+ronin.modules[target_module].methods[target_method].docs(); var ac = this.find_autocomplete(ronin.modules)
} if (ac.length > 0) {
else if(ronin.modules[target_module]){ this.el.innerHTML = this.pad(ronin.commander.input_el.value) + "<span class='autocomplete'>" + ac[0] + '</span> > Press tab to autocomplete.'
var ac = this.find_autocomplete(ronin.modules[target_module].methods,":"); } else if (ronin.commander.input_el.value == '~') {
if(ac.length > 0){ this.el.innerHTML = this.pad(ronin.commander.input_el.value) + ' > Select a color.'
this.el.innerHTML = this.pad(ronin.commander.input_el.value)+"<span class='autocomplete'>"+ac[0]+"</span> > Press tab to autocomplete." } else {
} this.el.innerHTML = this.pad(ronin.commander.input_el.value) + ' > Unknown command.'
else{
this.el.innerHTML = this.pad(ronin.commander.input_el.value)+" "+ronin.modules[target_module].hint();
} }
} }
else{ this.cursor_hint_el.innerHTML = ronin.cursor.hint()
var ac = this.find_autocomplete(ronin.modules);
if(ac.length > 0){
this.el.innerHTML = this.pad(ronin.commander.input_el.value)+"<span class='autocomplete'>"+ac[0]+"</span> > Press tab to autocomplete."
}
else if(ronin.commander.input_el.value == "~"){
this.el.innerHTML = this.pad(ronin.commander.input_el.value)+" > Select a color."
}
else{
this.el.innerHTML = this.pad(ronin.commander.input_el.value)+" > Unknown command."
}
}
this.cursor_hint_el.innerHTML = ronin.cursor.hint();
} }
this.pad = function(input) this.pad = function (input) {
{ var s = ''
var s = ""; for (i = 0; i < input.length; i++) {
for (i = 0; i < input.length; i++){ s += '_'
s += "_";
} }
return "<span style='color:RGBA(0,0,0,0)'>"+s+"</span>"; return "<span style='color:RGBA(0,0,0,0)'>" + s + '</span>'
} }
} }

29
sources/scripts/core/keyboard.js
View File

@ -1,26 +1,23 @@
function Keyboard() function Keyboard () {
{ this.is_down = {}
this.is_down = {};
this.key_up = function(e) this.key_up = function (e) {
{ ronin.hint.update(e)
ronin.hint.update(e);
} }
this.key_down = function(e) this.key_down = function (e) {
{ ronin.keyboard.is_down[e.key] = true
ronin.keyboard.is_down[e.key] = true;
if(ronin.commander.is_focused() && e.key == "Enter"){ if (ronin.commander.is_focused() && e.key == 'Enter') {
e.preventDefault(); e.preventDefault()
ronin.commander.validate(); ronin.commander.validate()
} }
if(ronin.commander.is_focused()){ if (ronin.commander.is_focused()) {
ronin.hint.update(e); ronin.hint.update(e)
return; return
} }
ronin.hint.update(e); ronin.hint.update(e)
} }
} }

89
sources/scripts/core/layer.js
View File

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

21
sources/scripts/core/method.js
View File

@ -1,17 +1,14 @@
function Method(name,params,info = "Missing documentation",f) function Method (name, params, info = 'Missing documentation', f) {
{ this.name = name
this.name = name; this.params = params
this.params = params; this.info = info
this.info = info; this.run = f
this.run = f;
this.hint = function() this.hint = function () {
{ return '<b>' + this.name + '</b>:' + this.params + ' '
return "<b>"+this.name+"</b>:"+this.params+" ";
} }
this.docs = function() this.docs = function () {
{ return '<b>' + this.params + '</b> <i>' + this.info + '</i>'
return "<b>"+this.params+"</b> <i>"+this.info+"</i>";
} }
} }

22
sources/scripts/core/module.js
View File

@ -1,19 +1,17 @@
function Module(name,docs = "Missing documentation.") function Module (name, docs = 'Missing documentation.') {
{ this.name = name
this.name = name; this.methods = {}
this.methods = {};
this.docs = docs; this.docs = docs
this.hint = function() this.hint = function () {
{ var html = ''
var html = "";
for(id in this.methods){ for (id in this.methods) {
var v = this.methods[id]; var v = this.methods[id]
html += v.hint(); html += v.hint()
} }
return html.trim() != "" ? " "+html.trim() : ""; return html.trim() != '' ? ' ' + html.trim() : ''
} }
} }

30
sources/scripts/core/port.js
View File

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

139
sources/scripts/core/query.js
View File

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

34
sources/scripts/core/swatch.js
View File

@ -1,31 +1,25 @@
function Swatch() function Swatch () {
{ this.index = 0
this.index = 0; this.colors = []
this.colors = [];
this.start = function() this.start = function () {
{ this.update()
this.update();
} }
this.update = function() this.update = function () {
{ this.colors = [ronin.theme.active.f_high, ronin.theme.active.f_med, ronin.theme.active.f_low]
this.colors = [ronin.theme.active.f_high,ronin.theme.active.f_med,ronin.theme.active.f_low];
} }
this.swap = function() this.swap = function () {
{ this.index += 1
this.index += 1;
} }
this.color = function(offset = 0) this.color = function (offset = 0) {
{ return this.colors[(this.index + offset) % this.colors.length]
return this.colors[(this.index + offset) % this.colors.length];
} }
this.hint = function() this.hint = function () {
{ this.update()
this.update(); return `<svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" id='swatch' style='background-color:${this.color(1)}'><circle cx='10' cy='10' r='${ronin.cursor.size * 0.75}' fill='${this.color()}'/></svg>`
return `<svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" id='swatch' style='background-color:${this.color(1)}'><circle cx='10' cy='10' r='${ronin.cursor.size * 0.75}' fill='${this.color()}'/></svg>`;
} }
} }

312
sources/scripts/layers/guide.js
View File

@ -1,230 +1,216 @@
function Guide() function Guide () {
{ Layer.call(this)
Layer.call(this);
this.el.id = "guide"; this.el.id = 'guide'
this.inspect = true; this.inspect = true
this.update = function() this.update = function () {
{ this.clear()
this.clear();
var units = this.find_units(); var units = this.find_units()
if(this.inspect){ if (this.inspect) {
this.draw_inspector(); this.draw_inspector()
} }
if(ronin.commander.input_el.value == "~"){ if (ronin.commander.input_el.value == '~') {
this.toggle_color_picker(true); this.toggle_color_picker(true)
} }
// Brush mirrors // Brush mirrors
for(id in ronin.brush.pointers){ for (id in ronin.brush.pointers) {
var pointer = ronin.brush.pointers[id]; var pointer = ronin.brush.pointers[id]
if(!pointer.options.mirror){ continue; } if (!pointer.options.mirror) { continue }
units.push({x1:pointer.options.mirror.x,y1:0,x2:pointer.options.mirror.x,y2:ronin.frame.height}) units.push({ x1: pointer.options.mirror.x, y1: 0, x2: pointer.options.mirror.x, y2: ronin.frame.height })
} }
if(units.length == 0){ return; } if (units.length == 0) { return }
for(i in units){ for (i in units) {
this.draw(units[i]); this.draw(units[i])
} }
} }
this.toggle = function() this.toggle = function () {
{
this.el.style.opacity = this.el.style.opacity == 0 ? 1 : 0 this.el.style.opacity = this.el.style.opacity == 0 ? 1 : 0
} }
this.toggle_color_picker = function(show) this.toggle_color_picker = function (show) {
{ if (!show) { return }
if(!show){ return; } var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width * 2, ronin.frame.height * 2)
var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2); var data = originalData.data
var data = originalData.data; for (var i = 0; i < data.length; i += 4) {
for(var i = 0; i < data.length; i += 4) { var x = i % (ronin.frame.width * 8)
var x = i % (ronin.frame.width*8) var y = i / (ronin.frame.width * 32)
var y = i / (ronin.frame.width*32) data[i] = x / 32
data[i] = x/32; data[i + 1] = 255 - (x / 32)
data[i + 1] = 255 - (x/32); data[i + 2] = y
data[i + 2] = y; data[i + 3] = 255
data[i + 3] = 255;
} }
ronin.layers.guide.context().putImageData(originalData, 0, 0); ronin.layers.guide.context().putImageData(originalData, 0, 0)
} }
this.draw = function(u = null) this.draw = function (u = null) {
{ if (u && u.x1 != null && u.y1 != null && u.x2 != null && u.y2 != 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 })
this.draw_line({x:u.x1,y:u.y1},{x:u.x2,y:u.y2})
} }
if(u && u.x && u.y){ if (u && u.x && u.y) {
this.draw_pos(u); this.draw_pos(u)
} }
if(u && u.width && u.height){ if (u && u.width && u.height) {
this.draw_rect(u); this.draw_rect(u)
this.draw_pos({x:u.x + (u.width/2),y:u.y + (u.height/2)}); this.draw_pos({ x: u.x + (u.width / 2), y: u.y + (u.height / 2) })
} }
} }
this.draw_rect = function(u) this.draw_rect = function (u) {
{ var ctx = this.context()
var ctx = this.context();
u.x = !u.x ? 0 : u.x; u.x = !u.x ? 0 : u.x
u.y = !u.y ? 0 : u.y; u.y = !u.y ? 0 : u.y
var offset = {x:u.x * 2, y:u.y * 2}; var offset = { x: u.x * 2, y: u.y * 2 }
var rect = {width:u.width * 2,height:u.height * 2}; var rect = { width: u.width * 2, height: u.height * 2 }
// Outline // Outline
ctx.beginPath(); ctx.beginPath()
ctx.globalCompositeOperation="source-over"; ctx.globalCompositeOperation = 'source-over'
ctx.moveTo(offset.x,offset.y); ctx.moveTo(offset.x, offset.y)
ctx.lineTo(offset.x + rect.width,offset.y); ctx.lineTo(offset.x + rect.width, offset.y)
ctx.lineTo(offset.x + rect.width,offset.y + rect.height); ctx.lineTo(offset.x + rect.width, offset.y + rect.height)
ctx.lineTo(offset.x,offset.y + rect.height); ctx.lineTo(offset.x, offset.y + rect.height)
ctx.lineTo(offset.x,offset.y); ctx.lineTo(offset.x, offset.y)
ctx.lineCap="round"; ctx.lineCap = 'round'
ctx.lineWidth = 2; ctx.lineWidth = 2
ctx.strokeStyle = "#000"; ctx.strokeStyle = '#000'
ctx.stroke(); ctx.stroke()
ctx.closePath(); ctx.closePath()
} }
this.draw_line = function (u1, u2, color = '#000') {
var ctx = this.context()
this.draw_line = function(u1,u2, color = "#000") ctx.beginPath()
{ ctx.globalCompositeOperation = 'source-over'
var ctx = this.context(); ctx.moveTo(u1.x * 2, u1.y * 2)
ctx.lineTo(u2.x * 2, u2.y * 2)
ctx.beginPath(); ctx.lineCap = 'round'
ctx.globalCompositeOperation="source-over"; ctx.lineWidth = 0.5
ctx.moveTo(u1.x * 2,u1.y * 2); ctx.strokeStyle = color
ctx.lineTo(u2.x * 2,u2.y * 2); ctx.stroke()
ctx.lineCap="round"; ctx.closePath()
ctx.lineWidth = 0.5;
ctx.strokeStyle = color;
ctx.stroke();
ctx.closePath();
} }
this.draw_pos = function(u) this.draw_pos = function (u) {
{ var ctx = this.context()
var ctx = this.context();
var offset = 2; var offset = 2
var radius = 5; var radius = 5
var pos = {x:u.x * 2, y:u.y * 2}; var pos = { x: u.x * 2, y: u.y * 2 }
ctx.beginPath(); ctx.beginPath()
ctx.globalCompositeOperation="source-over"; ctx.globalCompositeOperation = 'source-over'
ctx.moveTo(pos.x+offset,pos.y); ctx.moveTo(pos.x + offset, pos.y)
ctx.lineTo(pos.x+radius,pos.y); ctx.lineTo(pos.x + radius, pos.y)
ctx.moveTo(pos.x,pos.y+offset); ctx.moveTo(pos.x, pos.y + offset)
ctx.lineTo(pos.x,pos.y+radius); ctx.lineTo(pos.x, pos.y + radius)
ctx.moveTo(pos.x-offset,pos.y); ctx.moveTo(pos.x - offset, pos.y)
ctx.lineTo(pos.x-radius,pos.y); ctx.lineTo(pos.x - radius, pos.y)
ctx.moveTo(pos.x,pos.y-offset); ctx.moveTo(pos.x, pos.y - offset)
ctx.lineTo(pos.x,pos.y-radius); ctx.lineTo(pos.x, pos.y - radius)
ctx.lineCap="round"; ctx.lineCap = 'round'
ctx.lineWidth = 4; ctx.lineWidth = 4
ctx.strokeStyle = "#000"; ctx.strokeStyle = '#000'
ctx.stroke(); ctx.stroke()
ctx.lineWidth = 2; ctx.lineWidth = 2
ctx.strokeStyle = "#fff"; ctx.strokeStyle = '#fff'
ctx.stroke(); ctx.stroke()
ctx.closePath(); ctx.closePath()
} }
this.find_units = function(q = ronin.commander.query()) this.find_units = function (q = ronin.commander.query()) {
{ var a = []
var a = [];
for(method_id in q.methods){ for (method_id in q.methods) {
var params = q.methods[method_id]; var params = q.methods[method_id]
if(params.from && params.to){ if (params.from && params.to) {
a = a.concat(params.from); a = a.concat(params.from)
a = a.concat(params.to); a = a.concat(params.to)
} } else {
else{ a = a.concat(params)
a = a.concat(params);
} }
} }
return a; return a
} }
this.draw_inspector = function() this.draw_inspector = function () {
{ var color = 'black'
var color = "black"
// Center // Center
this.draw_line({x:0,y:ronin.frame.height/2},{x:10,y:ronin.frame.height/2},color); 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 - 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) - 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: 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 - 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); 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 ctx = this.context()
var w = ronin.frame.width * 2; var w = ronin.frame.width * 2
var h = ronin.frame.height * 2; var h = ronin.frame.height * 2
var angle = 45; var angle = 45
ctx.translate(w/2,h/2); ctx.translate(w / 2, h / 2)
ctx.rotate(angle*Math.PI/180); ctx.rotate(angle * Math.PI / 180)
this.line(ctx,-w,0,w,0,color); 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*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,-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.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, 1, 1.5, color)
this.circle(ctx,-w*0.4,h*0.25,w*0.05,0,0.5,color); this.circle(ctx, -w * 0.4, h * 0.25, w * 0.05, 0, 0.5, color)
ctx.font = "5px Arial"; ctx.font = '5px Arial'
ctx.fillStyle = color; ctx.fillStyle = color
ctx.fillText(angle+"'",(w*0.4)+10,10); ctx.fillText(angle + "'", (w * 0.4) + 10, 10)
ctx.font = "5px Arial"; ctx.font = '5px Arial'
ctx.fillStyle = color; ctx.fillStyle = color
ctx.fillText(angle+"'",(-w*0.4)-20,-10); ctx.fillText(angle + "'", (-w * 0.4) - 20, -10)
ctx.rotate(-angle*Math.PI/180); ctx.rotate(-angle * Math.PI / 180)
ctx.translate(-w/2,-h/2); ctx.translate(-w / 2, -h / 2)
} }
this.line = function(context,x1,x2,y1,y2,color) this.line = function (context, x1, x2, y1, y2, color) {
{ context.beginPath()
context.beginPath(); context.moveTo(x1, x2)
context.moveTo(x1,x2); context.lineTo(y1, y2)
context.lineTo(y1,y2); context.lineCap = 'round'
context.lineCap="round"; context.lineWidth = 0.5
context.lineWidth = 0.5; context.strokeStyle = color
context.strokeStyle = color; context.stroke()
context.stroke(); context.closePath()
context.closePath();
} }
this.circle = function(context,x,y,r,c1,c2,color) this.circle = function (context, x, y, r, c1, c2, color) {
{ context.beginPath()
context.beginPath(); context.arc(x, y, r, c1 * Math.PI, c2 * Math.PI)
context.arc(x,y,r,c1*Math.PI,c2*Math.PI); context.lineCap = 'round'
context.lineCap="round"; context.lineWidth = 0.5
context.lineWidth = 0.5; context.strokeStyle = color
context.strokeStyle = color; context.stroke()
context.stroke(); context.closePath()
context.closePath();
} }
} }

135
sources/scripts/modules/brush.js
View File

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

82
sources/scripts/modules/filter.js
View File

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

139
sources/scripts/modules/frame.js
View File

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

174
sources/scripts/modules/io.js
View File

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

93
sources/scripts/modules/line.js
View File

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

36
sources/scripts/modules/magnet.js
View File

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

145
sources/scripts/modules/path.js
View File

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

35
sources/scripts/modules/type.js
View File

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

202
sources/scripts/ronin.js
View File

@ -1,149 +1,115 @@
function Ronin() function Ronin () {
{ const defaultTheme = {
this.el = document.createElement('yu'); background: '#eee',
this.el.id = "ronin"; f_high: '#000',
f_med: '#999',
f_low: '#ccc',
f_inv: '#000',
b_high: '#000',
b_med: '#888',
b_low: '#aaa',
b_inv: '#ffb545'
}
this.theme = new Theme(); this.el = document.createElement('yu')
this.controller = new Controller(); this.el.id = 'ronin'
this.keyboard = new Keyboard(); this.theme = new Theme(defaultTheme)
this.commander = new Commander();
this.cursor = new Cursor();
this.hint = new Hint();
this.docs = new Docs();
this.guide = new Guide(); this.keyboard = new Keyboard()
this.above = new Layer("above"); this.commander = new Commander()
this.below = new Layer("below"); this.cursor = new Cursor()
this.hint = new Hint()
this.docs = new Docs()
this.io = new IO(); this.guide = new Guide()
this.brush = new Brush(); this.above = new Layer('above')
this.frame = new Frame(); this.below = new Layer('below')
this.path = new Path();
this.filter = new Filter(); this.io = new IO()
this.type = new Type(); this.brush = new Brush()
this.frame = new Frame()
this.path = new Path()
this.filter = new Filter()
this.type = new Type()
this.layers = { this.layers = {
guide : this.guide, guide: this.guide,
above : this.above, above: this.above,
below : this.below, below: this.below,
cursor : this.cursor, cursor: this.cursor,
guide : this.guide, guide: this.guide
}; }
this.modules = { this.modules = {
brush : this.brush, brush: this.brush,
frame : this.frame, frame: this.frame,
io : this.io, io: this.io,
path : this.path, path: this.path,
filter : this.filter, filter: this.filter,
type : this.type type: this.type
}; }
this.install = function() this.install = function (host) {
{ this.brush.swatch.start()
this.theme.start();
this.brush.swatch.start();
document.body.appendChild(this.el); document.body.appendChild(this.el)
this.frame.width = window.innerWidth; this.frame.width = window.innerWidth
this.frame.height = window.innerHeight; this.frame.height = window.innerHeight
this.commander.install(); this.commander.install()
this.frame.install(); this.frame.install()
this.cursor.target = this.layers.above; this.cursor.target = this.layers.above
// this.guide.install(); // this.guide.install();
this.above.install(); this.above.install()
this.below.install(); this.below.install()
this.guide.install(); this.guide.install()
this.guide.update(); this.guide.update()
this.hint.install(); this.hint.install()
this.theme.install(host, () => { this.update() })
this.start();
} }
this.start = function() this.start = function () {
{ this.theme.start()
this.controller.add("default","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Ronin'); },"CmdOrCtrl+,"); window.addEventListener('dragover', ronin.io.drag_over)
this.controller.add("default","*","Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter"); window.addEventListener('drop', ronin.io.drop)
this.controller.add("default","*","Hide",() => { app.toggle_visible(); },"CmdOrCtrl+H"); ronin.frame.el.addEventListener('mousedown', ronin.cursor.mouse_down)
this.controller.add("default","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+."); ronin.frame.el.addEventListener('mousemove', ronin.cursor.mouse_move)
this.controller.add("default","*","Documentation",() => { ronin.controller.docs(); },"CmdOrCtrl+Esc"); ronin.frame.el.addEventListener('mouseup', ronin.cursor.mouse_up)
this.controller.add("default","*","Reset",() => { ronin.reset(); },"CmdOrCtrl+Backspace"); ronin.frame.el.addEventListener('contextmenu', ronin.cursor.mouse_alt)
this.controller.add("default","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q"); window.addEventListener('keydown', ronin.keyboard.key_down)
window.addEventListener('keyup', ronin.keyboard.key_up)
ronin.commander.input_el.addEventListener('input', ronin.commander.on_input)
this.controller.add("default","File","New Image",() => { ronin.frame.methods.new.run(); },"CmdOrCtrl+N"); console.log('Ronin', 'Started')
this.controller.add("default","File","Open Image",() => { ronin.io.methods.open.run(); },"CmdOrCtrl+O"); this.above.update()
this.controller.add("default","File","Import Image",() => { ronin.io.methods.load.run(); },"CmdOrCtrl+I"); this.below.update()
this.controller.add("default","File","Render Image(PNG)",() => { ronin.io.methods.render.run(); },"CmdOrCtrl+R"); this.guide.update()
this.controller.add("default","File","Save Images(PNGs)",() => { ronin.io.methods.save.run(); },"CmdOrCtrl+S"); this.commander.update()
this.controller.add("default","File","Export Image(JPG)",() => { ronin.io.methods.export.run(); },"CmdOrCtrl+E");
this.controller.add_role("default","Edit","undo"); this.frame.resize_to({ width: 900, height: 540 })
this.controller.add_role("default","Edit","redo");
this.controller.add_role("default","Edit","cut");
this.controller.add_role("default","Edit","copy");
this.controller.add_role("default","Edit","paste");
this.controller.add_role("default","Edit","delete");
this.controller.add_role("default","Edit","selectall");
this.controller.add("default","Layers","Above Layer",() => { ronin.cursor.select_layer(ronin.layers.above); },"c"); this.load()
this.controller.add("default","Layers","Below Layer",() => { ronin.cursor.select_layer(ronin.layers.below); },"z");
this.controller.add("default","Layers","Toggle Layer",() => { ronin.cursor.brush.swatch.swap(); },"x");
this.controller.add("default","Brush","Inc Size",() => { ronin.brush.mod_size(1); },"]");
this.controller.add("default","Brush","Dec Size",() => { ronin.brush.mod_size(-1); },"[");
this.controller.add("default","Brush","Toggle Color",() => { ronin.brush.swatch.swap(); },"x");
this.controller.add("default","Commander","Show",() => { ronin.commander.activate(); },"`");
this.controller.add("default","Commander","Hide",() => { ronin.commander.deactivate(); },"Escape");
this.controller.add("default","Commander","Fill With $",() => { ronin.commander.inject("fill:$"); },"CmdOrCtrl+F");
this.controller.add("default","View","Zoom Reset",() => { ronin.frame.methods.zoom.run(1); },"1");
this.controller.add("default","View","Zoom 2x",() => { ronin.frame.methods.zoom.run(2); },"2");
this.controller.add("default","View","Zoom 4x",() => { ronin.frame.methods.zoom.run(4); },"3");
this.controller.add("default","View","Toggle Guide",() => { ronin.guide.toggle(); },"h");
this.controller.commit();
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);
ronin.commander.input_el.addEventListener('input', ronin.commander.on_input);
console.log("Ronin","Started");
this.above.update();
this.below.update();
this.guide.update();
this.commander.update();
this.frame.resize_to({width:900,height:540});
this.load();
} }
this.reset = function() this.reset = function () {
{ this.theme.reset()
this.theme.reset();
} }
this.load = function(content = this.default()) this.update = function () {
{
} }
this.default = function() this.load = function (content = this.default()) {
{
return "select_layer:below ; fill:#fff ; select_layer:above ; add_cursor:1,1 ; add_cursor:-1,-1" }
this.default = function () {
return 'select_layer:below ; fill:#fff ; select_layer:above ; add_cursor:1,1 ; add_cursor:-1,-1'
} }
} }

175
sources/scripts/theme.js
View File

@ -1,80 +1,127 @@
function Theme() 'use strict'
{
var app = this;
this.el = document.createElement("style"); function Theme (_default) {
this.el.type = 'text/css'; const themer = this
this.default = { 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" }
this.active = this.default;
this.start = function() this.active = _default
{
this.load(localStorage.theme ? localStorage.theme : this.default); this.el = document.createElement('style')
window.addEventListener('dragover',this.drag_enter); this.el.type = 'text/css'
window.addEventListener('drop', this.drag);
document.head.appendChild(this.el) this.install = function (host = document.body, callback) {
host.appendChild(this.el)
this.callback = callback
} }
this.load = function(t) this.start = function () {
{ console.log('Theme', 'Starting..')
var theme = is_json(t) ? JSON.parse(t) : t; if (isJson(localStorage.theme)) {
const storage = JSON.parse(localStorage.theme)
if(!theme.background){ return; } if (validate(storage)) {
console.log('Theme', 'Loading localStorage..')
var css = ` this.load(storage)
:root { return
--background: ${theme.background}; }
--f_high: ${theme.f_high}; }
--f_med: ${theme.f_med}; this.load(_default)
--f_low: ${theme.f_low};
--f_inv: ${theme.f_inv};
--b_high: ${theme.b_high};
--b_med: ${theme.b_med};
--b_low: ${theme.b_low};
--b_inv: ${theme.b_inv};
}`;
this.active = theme;
this.el.textContent = css;
localStorage.setItem("theme", JSON.stringify(theme));
} }
this.reset = function() this.load = function (data) {
{ const theme = parse(data)
this.load(this.default); if (!validate(theme)) { console.warn('Theme', 'Not a theme', theme); return }
console.log('Theme', `Loaded theme!`)
this.el.innerHTML = `:root { --background: ${theme.background}; --f_high: ${theme.f_high}; --f_med: ${theme.f_med}; --f_low: ${theme.f_low}; --f_inv: ${theme.f_inv}; --b_high: ${theme.b_high}; --b_med: ${theme.b_med}; --b_low: ${theme.b_low}; --b_inv: ${theme.b_inv}; }`
localStorage.setItem('theme', JSON.stringify(theme))
this.active = theme
if (this.callback) {
this.callback()
}
} }
this.drag_enter = function(e) this.reset = function () {
{ this.load(_default)
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
} }
this.drag = function(e) function parse (any) {
{ if (any && any.background) { return any } else if (any && any.data) { return any.data } else if (any && isJson(any)) { return JSON.parse(any) } else if (any && isHtml(any)) { return extract(any) }
e.preventDefault(); return null
e.stopPropagation();
var file = e.dataTransfer.files[0];
if(!file.name || !file.name.indexOf(".thm") < 0){ console.log("Theme","Not a theme"); return; }
var reader = new FileReader();
reader.onload = function(e){
app.load(e.target.result);
};
reader.readAsText(file);
} }
function is_json(text) // Drag
{
try{ this.drag = function (e) {
JSON.parse(text); e.stopPropagation()
return true; e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
} }
catch (error){
return false; this.drop = function (e) {
e.preventDefault()
e.stopPropagation()
const file = e.dataTransfer.files[0]
if (!file || !file.name) { console.warn('Theme', 'Unnamed file.'); return }
if (file.name.indexOf('.thm') < 0 && file.name.indexOf('.svg') < 0) { console.warn('Theme', 'Skipped, not a theme'); return }
const reader = new FileReader()
reader.onload = function (e) {
themer.load(e.target.result)
} }
reader.readAsText(file)
}
this.open = function () {
const fs = require('fs')
const { dialog, app } = require('electron').remote
let paths = dialog.showOpenDialog(app.win, { properties: ['openFile'], filters: [{ name: 'Themes', extensions: ['svg'] }] })
if (!paths) { console.log('Nothing to load'); return }
fs.readFile(paths[0], 'utf8', function (err, data) {
if (err) throw err
themer.load(data)
})
}
window.addEventListener('dragover', this.drag)
window.addEventListener('drop', this.drop)
// Helpers
function validate (json) {
if (!json) { return false }
if (!json.background) { return false }
if (!json.f_high) { return false }
if (!json.f_med) { return false }
if (!json.f_low) { return false }
if (!json.f_inv) { return false }
if (!json.b_high) { return false }
if (!json.b_med) { return false }
if (!json.b_low) { return false }
if (!json.b_inv) { return false }
return true
}
function extract (text) {
const svg = new DOMParser().parseFromString(text, 'text/xml')
try {
return {
'background': svg.getElementById('background').getAttribute('fill'),
'f_high': svg.getElementById('f_high').getAttribute('fill'),
'f_med': svg.getElementById('f_med').getAttribute('fill'),
'f_low': svg.getElementById('f_low').getAttribute('fill'),
'f_inv': svg.getElementById('f_inv').getAttribute('fill'),
'b_high': svg.getElementById('b_high').getAttribute('fill'),
'b_med': svg.getElementById('b_med').getAttribute('fill'),
'b_low': svg.getElementById('b_low').getAttribute('fill'),
'b_inv': svg.getElementById('b_inv').getAttribute('fill')
}
} catch (err) {
console.warn('Theme', 'Incomplete SVG Theme', err)
}
}
function isJson (text) {
try { JSON.parse(text); return true } catch (error) { return false }
}
function isHtml (text) {
try { new DOMParser().parseFromString(text, 'text/xml'); return true } catch (error) { return false }
} }
} }

79
sources/scripts/units/color.js
View File

@ -1,63 +1,54 @@
function Color(hex = '#000000', rgb) function Color (hex = '#000000', rgb) {
{ if (rgb) {
if(rgb){ this.rgb = 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)
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
else{ var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(this.hex)
this.hex = hex; this.rgb = { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) }
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.r = this.rgb.r
this.g = this.rgb.g; this.g = this.rgb.g
this.b = this.rgb.b; this.b = this.rgb.b
this.average = parseInt((this.r + this.g + this.b)/3) 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.invert = { r: 255 - this.rgb.r, g: 255 - this.rgb.g, b: 255 - this.rgb.b }
this.rgba = function() this.rgba = function () {
{ return 'rgba(' + this.rgb().r + ',' + this.rgb().g + ',' + this.rgb().b + ',1)'
return "rgba("+this.rgb().r+","+this.rgb().g+","+this.rgb().b+",1)";
} }
this.floats = function() this.floats = function () {
{ var rgb = this.rgb
var rgb = this.rgb; return { r: rgb.r / 255, g: rgb.g / 255, b: rgb.b / 255 }
return { r:rgb.r/255, g:rgb.g/255, b:rgb.b/255 }
} }
this.render = function() this.render = function () {
{ return this.hex
return this.hex;
} }
this.rgb_to_hex = function(rgb) 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)
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() this.brightness = function () {
{ return this.rgb() ? (this.rgb().r + this.rgb().g + this.rgb().b) / 3 : 0
return this.rgb() ? (this.rgb().r + this.rgb().g + this.rgb().b)/3 : 0;
} }
this.style = function() this.style = function () {
{ return this.brightness() > 150 ? 'bright' : 'dark'
return this.brightness() > 150 ? "bright" : "dark";
} }
this.tween = function(target,value) this.tween = function (target, value) {
{ var c1 = this.floats()
var c1 = this.floats(); var c2 = target.floats()
var c2 = target.floats();
var r = ((255 * c1.r) * value) + ((255 * c2.r) * (1-value)); var r = ((255 * c1.r) * value) + ((255 * c2.r) * (1 - value))
var g = ((255 * c1.g) * value) + ((255 * c2.g) * (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 b = ((255 * c1.b) * value) + ((255 * c2.b) * (1 - value))
var rgb = [parseInt(r),parseInt(g),parseInt(b)]; var rgb = [parseInt(r), parseInt(g), parseInt(b)]
var hex = new Color().rgb_to_hex(rgb); var hex = new Color().rgb_to_hex(rgb)
return hex; return hex
} }
} }