Let's get this party started
This commit is contained in:
Devine Lu Linvega
parent
a56b66433b
commit
371c255022
39
BUILD.md
39
BUILD.md
@ -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;`
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 22 KiB |
@ -1,4 +1,5 @@
|
||||
# Ronin
|
||||
|
||||
Ronin is a graphic design tool under development.
|
||||
|
||||
<img src='https://raw.githubusercontent.com/hundredrabbits/Ronin/master/PREVIEW.jpg' width='600'/>
|
||||
|
||||
98
main.js
98
main.js
@ -1,64 +1,76 @@
|
||||
const {app, BrowserWindow, webFrame, Menu, dialog} = require('electron')
|
||||
const { app, BrowserWindow, webFrame, Menu } = require('electron')
|
||||
const path = require('path')
|
||||
const url = require('url')
|
||||
const shell = require('electron').shell
|
||||
|
||||
let is_shown = true;
|
||||
let isShown = true
|
||||
|
||||
app.inspect = function()
|
||||
{
|
||||
app.win.toggleDevTools();
|
||||
}
|
||||
app.win = null
|
||||
|
||||
app.toggle_fullscreen = function()
|
||||
{
|
||||
app.win.setFullScreen(app.win.isFullScreen() ? false : true);
|
||||
}
|
||||
app.on('ready', () => {
|
||||
app.win = new BrowserWindow({
|
||||
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()
|
||||
{
|
||||
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.loadURL(`file://${__dirname}/sources/index.html`)
|
||||
// app.inspect()
|
||||
|
||||
app.win.on('closed', () => {
|
||||
win = null
|
||||
app.quit()
|
||||
})
|
||||
|
||||
app.win.on('hide',function() {
|
||||
is_shown = false;
|
||||
app.win.on('hide', function () {
|
||||
isShown = false
|
||||
})
|
||||
|
||||
app.win.on('show',function() {
|
||||
is_shown = true;
|
||||
app.win.on('show', function () {
|
||||
isShown = true
|
||||
})
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
app.quit()
|
||||
})
|
||||
|
||||
app.on('activate', () => {
|
||||
if (app.win === null) {
|
||||
createWindow()
|
||||
} else {
|
||||
app.win.show()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
app.on('window-all-closed', () =>
|
||||
{
|
||||
app.quit()
|
||||
})
|
||||
app.inspect = function () {
|
||||
app.win.toggleDevTools()
|
||||
}
|
||||
|
||||
app.on('activate', () => {
|
||||
if (app.win === null) {
|
||||
createWindow()
|
||||
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() }
|
||||
}
|
||||
else{
|
||||
|
||||
}
|
||||
|
||||
app.injectMenu = function (menu) {
|
||||
try {
|
||||
Menu.setApplicationMenu(Menu.buildFromTemplate(menu))
|
||||
} catch (err) {
|
||||
console.warn('Cannot inject menu.')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -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"
|
||||
},
|
||||
"devDependencies": {
|
||||
"electron": "^1.8.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"electron-packager": "^8.4.0"
|
||||
"electron": "^5.0.6",
|
||||
"electron-packager": "^13.1.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,7 +46,21 @@
|
||||
const app_path = app.getAppPath();
|
||||
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,164 +1,72 @@
|
||||
function Controller()
|
||||
{
|
||||
this.menu = {default:{}};
|
||||
this.mode = "default";
|
||||
'use strict'
|
||||
|
||||
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)
|
||||
{
|
||||
if(!this.menu[mode]){ this.menu[mode] = {}; }
|
||||
if(!this.menu[mode][cat]){ this.menu[mode][cat] = {}; }
|
||||
this.menu[mode][cat][label] = {fn:fn,accelerator:accelerator};
|
||||
console.log(`${mode}/${cat}/${label} <${accelerator}>`);
|
||||
this.add = function (mode, cat, label, fn, accelerator) {
|
||||
if (!this.menu[mode]) { this.menu[mode] = {} }
|
||||
if (!this.menu[mode][cat]) { this.menu[mode][cat] = {} }
|
||||
this.menu[mode][cat][label] = { fn: fn, accelerator: accelerator }
|
||||
}
|
||||
|
||||
this.add_role = function(mode,cat,label)
|
||||
{
|
||||
if(!this.menu[mode]){ this.menu[mode] = {}; }
|
||||
if(!this.menu[mode][cat]){ this.menu[mode][cat] = {}; }
|
||||
this.menu[mode][cat][label] = {role:label};
|
||||
this.addRole = function (mode, cat, label) {
|
||||
if (!this.menu[mode]) { this.menu[mode] = {} }
|
||||
if (!this.menu[mode][cat]) { this.menu[mode][cat] = {} }
|
||||
this.menu[mode][cat][label] = { role: label }
|
||||
}
|
||||
|
||||
this.set = function(mode = "default")
|
||||
{
|
||||
this.mode = mode;
|
||||
this.commit();
|
||||
this.clearCat = function (mode, cat) {
|
||||
if (this.menu[mode]) { this.menu[mode][cat] = {} }
|
||||
}
|
||||
|
||||
this.format = function()
|
||||
{
|
||||
var f = [];
|
||||
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})
|
||||
this.set = function (mode = 'default') {
|
||||
this.mode = mode
|
||||
this.commit()
|
||||
}
|
||||
|
||||
this.format = function () {
|
||||
const f = []
|
||||
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});
|
||||
f.push({ label: cat, submenu: submenu })
|
||||
}
|
||||
return f;
|
||||
return f
|
||||
}
|
||||
|
||||
this.commit = function()
|
||||
{
|
||||
this.app.inject_menu(this.format());
|
||||
this.commit = function () {
|
||||
this.app.injectMenu(this.format())
|
||||
}
|
||||
|
||||
this.docs = function()
|
||||
{
|
||||
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)
|
||||
{
|
||||
var svg_html = "";
|
||||
|
||||
for(id in this.layout){
|
||||
var key = this.layout[id];
|
||||
var acc = this.accelerator_for_key(key.name,m);
|
||||
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"/>`;
|
||||
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;
|
||||
this.accelerator_for_key = function (key, menu) {
|
||||
const acc = { basic: null, ctrl: null }
|
||||
for (cat in menu) {
|
||||
const options = menu[cat]
|
||||
for (const id in options.submenu) {
|
||||
const 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()
|
||||
|
||||
@ -1,148 +1,128 @@
|
||||
function Commander()
|
||||
{
|
||||
this.el = document.createElement('yu');
|
||||
this.el.id = "commander";
|
||||
this.input_el = document.createElement('input');
|
||||
this.input_el.value = "";
|
||||
function Commander () {
|
||||
this.el = document.createElement('yu')
|
||||
this.el.id = 'commander'
|
||||
this.input_el = document.createElement('input')
|
||||
this.input_el.value = ''
|
||||
|
||||
this.install = function()
|
||||
{
|
||||
this.el.appendChild(this.input_el);
|
||||
ronin.el.appendChild(this.el);
|
||||
this.input_el.focus();
|
||||
this.install = function () {
|
||||
this.el.appendChild(this.input_el)
|
||||
ronin.el.appendChild(this.el)
|
||||
this.input_el.focus()
|
||||
}
|
||||
|
||||
this.validate = function(q = ronin.commander.query())
|
||||
{
|
||||
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){ this.validate_multi(q); return; }
|
||||
this.validate = function (q = ronin.commander.query()) {
|
||||
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) { this.validate_multi(q); return }
|
||||
|
||||
// Run methods
|
||||
for(method_id in q.methods){
|
||||
var method_param = q.methods[method_id];
|
||||
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);
|
||||
for (method_id in q.methods) {
|
||||
var method_param = q.methods[method_id]
|
||||
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.commander.input_el.value = "";
|
||||
ronin.hint.update();
|
||||
ronin.guide.update();
|
||||
ronin.commander.input_el.value = ''
|
||||
ronin.hint.update()
|
||||
ronin.guide.update()
|
||||
}
|
||||
|
||||
this.queue = [];
|
||||
this.queue = []
|
||||
|
||||
this.validate_multi = function(q)
|
||||
{
|
||||
var queue = [];
|
||||
var queries = q.string.split(";");
|
||||
this.validate_multi = function (q) {
|
||||
var queue = []
|
||||
var queries = q.string.split(';')
|
||||
|
||||
for(id in queries){
|
||||
var q = new Query(queries[id].trim());
|
||||
queue.push(q);
|
||||
for (id in queries) {
|
||||
var q = new Query(queries[id].trim())
|
||||
queue.push(q)
|
||||
}
|
||||
this.queue = queue;
|
||||
this.run_queue();
|
||||
this.queue = queue
|
||||
this.run_queue()
|
||||
}
|
||||
|
||||
this.run_queue = function()
|
||||
{
|
||||
if(ronin.commander.queue.length == 0){ return; }
|
||||
|
||||
ronin.commander.validate(ronin.commander.queue[0]);
|
||||
this.run_queue = function () {
|
||||
if (ronin.commander.queue.length == 0) { return }
|
||||
|
||||
ronin.commander.queue = ronin.commander.queue.splice(1,ronin.commander.queue.length-1)
|
||||
ronin.commander.validate(ronin.commander.queue[0])
|
||||
|
||||
setTimeout(ronin.commander.run_queue,250);
|
||||
ronin.commander.queue = ronin.commander.queue.splice(1, ronin.commander.queue.length - 1)
|
||||
|
||||
setTimeout(ronin.commander.run_queue, 250)
|
||||
}
|
||||
|
||||
this.update = function()
|
||||
{
|
||||
var q = ronin.commander.query();
|
||||
if(ronin.modules[q.module] && ronin.modules[q.module]["preview"]){
|
||||
ronin.modules[q.module].preview(q);
|
||||
}
|
||||
ronin.hint.update();
|
||||
ronin.guide.update();
|
||||
this.update = function () {
|
||||
var q = ronin.commander.query()
|
||||
if (ronin.modules[q.module] && ronin.modules[q.module]['preview']) {
|
||||
ronin.modules[q.module].preview(q)
|
||||
}
|
||||
ronin.hint.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();
|
||||
if(ac.lenght < 1 || !ac[0]){ return; }
|
||||
if(ronin.commander.query().string.length < 1){ return; }
|
||||
|
||||
this.append(ac[0]);
|
||||
this.append(ac[0])
|
||||
}
|
||||
|
||||
this.on_input = function(e)
|
||||
{
|
||||
ronin.commander.update();
|
||||
this.on_input = function (e) {
|
||||
ronin.commander.update()
|
||||
}
|
||||
|
||||
this.is_focused = function()
|
||||
{
|
||||
return this.input_el === document.activeElement;
|
||||
this.is_focused = function () {
|
||||
return this.input_el === document.activeElement
|
||||
}
|
||||
|
||||
this.focus = function()
|
||||
{
|
||||
this.input_el.focus();
|
||||
this.focus = function () {
|
||||
this.input_el.focus()
|
||||
}
|
||||
|
||||
this.blur = function()
|
||||
{
|
||||
this.input_el.blur();
|
||||
this.blur = function () {
|
||||
this.input_el.blur()
|
||||
}
|
||||
|
||||
this.active_module = function()
|
||||
{
|
||||
return this.query().module;
|
||||
this.active_module = function () {
|
||||
return this.query().module
|
||||
}
|
||||
|
||||
this.inject = function(str)
|
||||
{
|
||||
ronin.commander.input_el.value = str;
|
||||
ronin.commander.update();
|
||||
ronin.commander.show();
|
||||
this.inject = function (str) {
|
||||
ronin.commander.input_el.value = str
|
||||
ronin.commander.update()
|
||||
ronin.commander.show()
|
||||
}
|
||||
|
||||
this.append = function(str)
|
||||
{
|
||||
ronin.commander.input_el.value += str;
|
||||
ronin.commander.update();
|
||||
this.append = function (str) {
|
||||
ronin.commander.input_el.value += str
|
||||
ronin.commander.update()
|
||||
}
|
||||
|
||||
this.activate = function()
|
||||
{
|
||||
ronin.commander.autocomplete();
|
||||
ronin.commander.show();
|
||||
setTimeout(()=>{ronin.commander.focus},100)
|
||||
this.activate = function () {
|
||||
ronin.commander.autocomplete()
|
||||
ronin.commander.show()
|
||||
setTimeout(() => { ronin.commander.focus }, 100)
|
||||
}
|
||||
|
||||
this.deactivate = function()
|
||||
{
|
||||
this.blur();
|
||||
this.hide();
|
||||
this.deactivate = function () {
|
||||
this.blur()
|
||||
this.hide()
|
||||
}
|
||||
|
||||
this.show = function()
|
||||
{
|
||||
this.el.className = "visible";
|
||||
this.show = function () {
|
||||
this.el.className = 'visible'
|
||||
}
|
||||
|
||||
this.hide = function()
|
||||
{
|
||||
this.el.className = "hidden";
|
||||
this.hide = function () {
|
||||
this.el.className = 'hidden'
|
||||
}
|
||||
|
||||
this.query = function()
|
||||
{
|
||||
return new Query(ronin.commander.input_el.value);
|
||||
this.query = function () {
|
||||
return new Query(ronin.commander.input_el.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,188 +1,160 @@
|
||||
function Cursor(rune)
|
||||
{
|
||||
this.line = {origin:null,from:null,to:null,destination:null};
|
||||
this.is_down = false;
|
||||
this.query = null;
|
||||
this.mode = "vertex";
|
||||
function Cursor (rune) {
|
||||
this.line = { origin: null, from: null, to: null, destination: null }
|
||||
this.is_down = false
|
||||
this.query = null
|
||||
this.mode = 'vertex'
|
||||
|
||||
this.size = 2;
|
||||
this.pos = {x:0,y:0};
|
||||
this.size = 2
|
||||
this.pos = { x: 0, y: 0 }
|
||||
|
||||
this.target = null;
|
||||
|
||||
this.mouse_pos = function(e)
|
||||
{
|
||||
var pos = {x:e.clientX,y:e.clientY};
|
||||
this.target = null
|
||||
|
||||
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;
|
||||
this.mouse_pos = function (e) {
|
||||
var pos = { x: e.clientX, y: e.clientY }
|
||||
|
||||
pos.x -= (ronin.frame.zoom.offset.x / ronin.frame.zoom.scale);
|
||||
pos.y -= (ronin.frame.zoom.offset.y / ronin.frame.zoom.scale);
|
||||
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
|
||||
|
||||
return pos;
|
||||
pos.x -= (ronin.frame.zoom.offset.x / ronin.frame.zoom.scale)
|
||||
pos.y -= (ronin.frame.zoom.offset.y / ronin.frame.zoom.scale)
|
||||
|
||||
return pos
|
||||
}
|
||||
|
||||
this.mouse_down = function(e)
|
||||
{
|
||||
e.preventDefault();
|
||||
this.mouse_down = function (e) {
|
||||
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.from = {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 }
|
||||
|
||||
// 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 */ }
|
||||
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 (ronin.commander.active_module()) { /* DO NOTHING */ } else if (e.shiftKey) { /* DO NOTHING */ } else if (e.altKey && e.shiftKey) { ronin.brush.methods.pick.run(pos) } else if (e.altKey) { ronin.brush.erase(ronin.cursor.line) } else { ronin.brush.stroke(ronin.cursor.line) }
|
||||
|
||||
if(e.shiftKey){ ronin.cursor.mode = "rect"; }
|
||||
if(e.altKey){ ronin.cursor.mode = "arc_to"; }
|
||||
if(e.ctrlKey){ ronin.cursor.mode = "cc_arc_to"; }
|
||||
if (e.shiftKey) { ronin.cursor.mode = 'rect' }
|
||||
if (e.altKey) { ronin.cursor.mode = 'arc_to' }
|
||||
if (e.ctrlKey) { ronin.cursor.mode = 'cc_arc_to' }
|
||||
}
|
||||
|
||||
this.mouse_move = function(e)
|
||||
{
|
||||
e.preventDefault();
|
||||
this.mouse_move = function (e) {
|
||||
e.preventDefault()
|
||||
|
||||
var pos = ronin.cursor.mouse_pos(e);
|
||||
ronin.cursor.pos = pos;
|
||||
var pos = ronin.cursor.mouse_pos(e)
|
||||
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(); }
|
||||
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); }
|
||||
if (ronin.commander.active_module()) { ronin.cursor.inject_query() } else if (e.altKey && e.shiftKey) { ronin.brush.methods.pick.run(pos) } else if (e.shiftKey) { ronin.cursor.drag(ronin.cursor.line) } else if (e.altKey) { ronin.brush.erase(ronin.cursor.line) } else { ronin.brush.stroke(ronin.cursor.line) }
|
||||
|
||||
ronin.cursor.line.from = {x:pos.x,y:pos.y};
|
||||
ronin.cursor.line.from = { x: pos.x, y: pos.y }
|
||||
}
|
||||
|
||||
this.mouse_up = function(e)
|
||||
{
|
||||
e.preventDefault();
|
||||
this.mouse_up = function (e) {
|
||||
e.preventDefault()
|
||||
|
||||
var pos = ronin.cursor.mouse_pos(e);
|
||||
|
||||
ronin.cursor.line.destination = {x:pos.x,y:pos.y};
|
||||
var pos = ronin.cursor.mouse_pos(e)
|
||||
|
||||
ronin.cursor.inject_query();
|
||||
|
||||
ronin.cursor.is_down = false;
|
||||
ronin.cursor.line = {};
|
||||
ronin.cursor.mode = "vertex";
|
||||
ronin.cursor.line.destination = { x: pos.x, y: pos.y }
|
||||
|
||||
ronin.cursor.query = ronin.commander.input_el.value;
|
||||
ronin.brush.absolute_thickness = 0;
|
||||
ronin.cursor.inject_query()
|
||||
|
||||
ronin.cursor.is_down = false
|
||||
ronin.cursor.line = {}
|
||||
ronin.cursor.mode = 'vertex'
|
||||
|
||||
ronin.cursor.query = ronin.commander.input_el.value
|
||||
ronin.brush.absolute_thickness = 0
|
||||
}
|
||||
|
||||
this.mouse_alt = function(e)
|
||||
{
|
||||
console.log(e);
|
||||
this.mouse_alt = function (e) {
|
||||
console.log(e)
|
||||
}
|
||||
|
||||
this.drag = function(line)
|
||||
{
|
||||
var offset = make_offset(line.from,line.to);
|
||||
var data = ronin.cursor.target.select();
|
||||
ronin.cursor.target.clear();
|
||||
ronin.cursor.target.context().putImageData(data, offset.x * -2, offset.y * -2);
|
||||
this.drag = function (line) {
|
||||
var offset = make_offset(line.from, line.to)
|
||||
var data = ronin.cursor.target.select()
|
||||
ronin.cursor.target.clear()
|
||||
ronin.cursor.target.context().putImageData(data, offset.x * -2, offset.y * -2)
|
||||
}
|
||||
|
||||
this.swap_layer = function()
|
||||
{
|
||||
this.target = this.target.name == "above" ? ronin.layers.below : ronin.layers.above;
|
||||
ronin.commander.update();
|
||||
this.swap_layer = function () {
|
||||
this.target = this.target.name == 'above' ? ronin.layers.below : ronin.layers.above
|
||||
ronin.commander.update()
|
||||
}
|
||||
|
||||
this.select_layer = function(layer)
|
||||
{
|
||||
this.target = layer;
|
||||
ronin.commander.update();
|
||||
this.select_layer = function (layer) {
|
||||
this.target = layer
|
||||
ronin.commander.update()
|
||||
}
|
||||
|
||||
function make_offset(a,b)
|
||||
{
|
||||
return {x:a.x-b.x,y:a.y-b.y};
|
||||
function make_offset (a, b) {
|
||||
return { x: a.x - b.x, y: a.y - b.y }
|
||||
}
|
||||
|
||||
this.inject_query = function()
|
||||
{
|
||||
if(ronin.cursor.query && ronin.cursor.query.indexOf("$") < 0){ return; }
|
||||
this.inject_query = function () {
|
||||
if (ronin.cursor.query && ronin.cursor.query.indexOf('$') < 0) { return }
|
||||
|
||||
var a = ronin.cursor.line.origin;
|
||||
var b = ronin.cursor.line.destination ? ronin.cursor.line.destination : ronin.cursor.line.from;
|
||||
var a = ronin.cursor.line.origin
|
||||
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"){
|
||||
str = b.x+","+b.y;
|
||||
if (ronin.cursor.mode == 'vertex') {
|
||||
str = b.x + ',' + b.y
|
||||
} else if (ronin.cursor.mode == 'rect') {
|
||||
var offset = a.x + ',' + a.y
|
||||
var rect = (b.x - a.x) + 'x' + (b.y - a.y)
|
||||
str = offset + '|' + rect
|
||||
} else if (ronin.cursor.mode == 'arc_to') {
|
||||
str = '@>' + b.x + ',' + b.y
|
||||
} else if (ronin.cursor.mode == 'cc_arc_to') {
|
||||
str = '@<' + b.x + ',' + b.y
|
||||
}
|
||||
else if(ronin.cursor.mode == "rect"){
|
||||
var offset = a.x+","+a.y;
|
||||
var rect = (b.x - a.x)+"x"+(b.y - a.y);
|
||||
str = offset+"|"+rect;
|
||||
}
|
||||
else if(ronin.cursor.mode == "arc_to"){
|
||||
str = "@>"+b.x+","+b.y;
|
||||
}
|
||||
else if(ronin.cursor.mode == "cc_arc_to"){
|
||||
str = "@<"+b.x+","+b.y;
|
||||
}
|
||||
//
|
||||
var i = ronin.cursor.query ? ronin.cursor.query.indexOf("$") : '';
|
||||
var i1 = ronin.cursor.query ? ronin.cursor.query.substr(i,2) : '';
|
||||
var e1 = ronin.cursor.query ? ronin.cursor.query.substr(i-1,2) : '';
|
||||
//
|
||||
var i = ronin.cursor.query ? ronin.cursor.query.indexOf('$') : ''
|
||||
var i1 = ronin.cursor.query ? ronin.cursor.query.substr(i, 2) : ''
|
||||
var e1 = ronin.cursor.query ? ronin.cursor.query.substr(i - 1, 2) : ''
|
||||
|
||||
if(e1 == "#$"){
|
||||
var r = parseInt((b.x/ronin.frame.width) * 255);
|
||||
var g = 255 - parseInt((b.x/ronin.frame.width) * 255);
|
||||
var b = parseInt((b.y/ronin.frame.height) * 255);
|
||||
var str = new Color().rgb_to_hex([r,g,b]);
|
||||
ronin.commander.inject(ronin.cursor.query.replace("#$",str+" "));
|
||||
}
|
||||
else if(i1 == "$+"){
|
||||
ronin.commander.inject(ronin.cursor.query.replace("$+",str+"&$+"));
|
||||
}
|
||||
else if(ronin.cursor.query){
|
||||
ronin.commander.inject(ronin.cursor.query.replace("$",str));
|
||||
if (e1 == '#$') {
|
||||
var r = parseInt((b.x / ronin.frame.width) * 255)
|
||||
var g = 255 - parseInt((b.x / ronin.frame.width) * 255)
|
||||
var b = parseInt((b.y / ronin.frame.height) * 255)
|
||||
var str = new Color().rgb_to_hex([r, g, b])
|
||||
ronin.commander.inject(ronin.cursor.query.replace('#$', str + ' '))
|
||||
} else if (i1 == '$+') {
|
||||
ronin.commander.inject(ronin.cursor.query.replace('$+', str + '&$+'))
|
||||
} else if (ronin.cursor.query) {
|
||||
ronin.commander.inject(ronin.cursor.query.replace('$', str))
|
||||
}
|
||||
}
|
||||
|
||||
this.hint = function()
|
||||
{
|
||||
var html = "";
|
||||
this.hint = function () {
|
||||
var html = ''
|
||||
|
||||
var mode = "paint";
|
||||
var mode = 'paint'
|
||||
|
||||
if(ronin.keyboard.is_down["Alt"] && ronin.keyboard.is_down["Shift"]){
|
||||
mode = "pick";
|
||||
}
|
||||
else if(ronin.keyboard.is_down["Alt"]){
|
||||
mode = "erase";
|
||||
}
|
||||
else if(ronin.keyboard.is_down["Shift"]){
|
||||
mode = "drag";
|
||||
if (ronin.keyboard.is_down['Alt'] && ronin.keyboard.is_down['Shift']) {
|
||||
mode = 'pick'
|
||||
} else if (ronin.keyboard.is_down['Alt']) {
|
||||
mode = 'erase'
|
||||
} else if (ronin.keyboard.is_down['Shift']) {
|
||||
mode = 'drag'
|
||||
}
|
||||
|
||||
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>
|
||||
${ronin.brush.swatch.hint()}`;
|
||||
${ronin.brush.swatch.hint()}`
|
||||
}
|
||||
|
||||
function distance_between(a,b)
|
||||
{
|
||||
return Math.sqrt( (a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y) );
|
||||
function distance_between (a, b) {
|
||||
return Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,67 +1,61 @@
|
||||
function Docs()
|
||||
{
|
||||
this.export = function()
|
||||
{
|
||||
var html = "";
|
||||
function Docs () {
|
||||
this.export = function () {
|
||||
var html = ''
|
||||
|
||||
html += this.print_intro();
|
||||
html += this.print_intro()
|
||||
|
||||
html += "## Cursor\n";
|
||||
html += "Include `$` in a query and click on the canvas to inject the cursor position in the query.\n";
|
||||
html += "- `$ click` inject a **Pos**.\n";
|
||||
html += "- `$+ click` inject a **Pos**, and append `$+` for multiple positions.\n";
|
||||
html += "- `$ shift click` inject a **Rect**.\n";
|
||||
html += "- `#$ click` inject a **Color**.\n";
|
||||
html += "- `x` swap **Color** with secondary.\n\n";
|
||||
html += "- `z` draw under render.\n\n";
|
||||
|
||||
html += "## Modules\n";
|
||||
html += this.print_modules(ronin.modules);
|
||||
html += this.print_license();
|
||||
html += '## Cursor\n'
|
||||
html += 'Include `$` in a query and click on the canvas to inject the cursor position in the query.\n'
|
||||
html += '- `$ click` inject a **Pos**.\n'
|
||||
html += '- `$+ click` inject a **Pos**, and append `$+` for multiple positions.\n'
|
||||
html += '- `$ shift click` inject a **Rect**.\n'
|
||||
html += '- `#$ click` inject a **Color**.\n'
|
||||
html += '- `x` swap **Color** with secondary.\n\n'
|
||||
html += '- `z` draw under render.\n\n'
|
||||
|
||||
fs.writeFile("/Users/VillaMoirai/Github/HundredRabbits/Ronin/README.md", html, (err) => {
|
||||
if(err){ alert("An error ocurred creating the file "+ err.message); return; }
|
||||
});
|
||||
html += '## Modules\n'
|
||||
html += this.print_modules(ronin.modules)
|
||||
html += this.print_license()
|
||||
|
||||
return html;
|
||||
fs.writeFile('/Users/VillaMoirai/Github/HundredRabbits/Ronin/README.md', html, (err) => {
|
||||
if (err) { alert('An error ocurred creating the file ' + err.message) }
|
||||
})
|
||||
|
||||
return html
|
||||
}
|
||||
|
||||
this.print_intro = function()
|
||||
{
|
||||
html = "# Ronin\n";
|
||||
html += "Ronin is a graphic design tool, to paint, resize and export graphics.\n\n";
|
||||
html += "<img src='https://raw.githubusercontent.com/hundredrabbits/Ronin/master/PREVIEW.jpg' width='600'/>\n\n";
|
||||
return html;
|
||||
this.print_intro = function () {
|
||||
html = '# Ronin\n'
|
||||
html += 'Ronin is a graphic design tool, to paint, resize and export graphics.\n\n'
|
||||
html += "<img src='https://raw.githubusercontent.com/hundredrabbits/Ronin/master/PREVIEW.jpg' width='600'/>\n\n"
|
||||
return html
|
||||
}
|
||||
|
||||
this.print_modules = function(modules)
|
||||
{
|
||||
var html = "";
|
||||
this.print_modules = function (modules) {
|
||||
var html = ''
|
||||
|
||||
for(module_name in modules){
|
||||
var module = modules[module_name];
|
||||
html += "## "+module_name+"\n\n";
|
||||
html += module.docs+"\n\n";
|
||||
html += this.print_methods(module.methods)+"\n";
|
||||
for (module_name in modules) {
|
||||
var module = modules[module_name]
|
||||
html += '## ' + module_name + '\n\n'
|
||||
html += module.docs + '\n\n'
|
||||
html += this.print_methods(module.methods) + '\n'
|
||||
}
|
||||
return html+"\n";
|
||||
return html + '\n'
|
||||
}
|
||||
|
||||
this.print_methods = function(methods)
|
||||
{
|
||||
var html = "### Methods\n";
|
||||
this.print_methods = function (methods) {
|
||||
var html = '### Methods\n'
|
||||
|
||||
for(method_name in methods){
|
||||
var method = methods[method_name];
|
||||
html += "- `"+method_name+":"+method.params+"` "+method.info+"\n";
|
||||
for (method_name in methods) {
|
||||
var method = methods[method_name]
|
||||
html += '- `' + method_name + ':' + method.params + '` ' + method.info + '\n'
|
||||
}
|
||||
return html;
|
||||
return html
|
||||
}
|
||||
|
||||
this.print_license = function()
|
||||
{
|
||||
html = "## License\n";
|
||||
html += "See the [LICENSE](LICENSE.md) file for license rights and limitations.\n";
|
||||
return html;
|
||||
this.print_license = function () {
|
||||
html = '## License\n'
|
||||
html += 'See the [LICENSE](LICENSE.md) file for license rights and limitations.\n'
|
||||
return html
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,79 +1,68 @@
|
||||
function Hint()
|
||||
{
|
||||
this.el = document.createElement('yu');
|
||||
this.el.id = "hint";
|
||||
this.cursor_hint_el = document.createElement('yu');
|
||||
this.cursor_hint_el.id = "cursor_hint";
|
||||
function Hint () {
|
||||
this.el = document.createElement('yu')
|
||||
this.el.id = 'hint'
|
||||
this.cursor_hint_el = document.createElement('yu')
|
||||
this.cursor_hint_el.id = 'cursor_hint'
|
||||
|
||||
this.install = function()
|
||||
{
|
||||
ronin.commander.el.appendChild(this.el);
|
||||
ronin.commander.el.appendChild(this.cursor_hint_el);
|
||||
this.install = function () {
|
||||
ronin.commander.el.appendChild(this.el)
|
||||
ronin.commander.el.appendChild(this.cursor_hint_el)
|
||||
}
|
||||
|
||||
this.find_autocomplete = function(collection,append = "")
|
||||
{
|
||||
var target = ronin.commander.query().last;
|
||||
var a = [];
|
||||
this.find_autocomplete = function (collection, append = '') {
|
||||
var target = ronin.commander.query().last
|
||||
var a = []
|
||||
|
||||
for(id in collection){
|
||||
var name = collection[id].name;
|
||||
if(name && name.substr(0,target.length) == target){
|
||||
a.push(name.substr(target.length,20)+append)
|
||||
for (id in collection) {
|
||||
var name = collection[id].name
|
||||
if (name && name.substr(0, target.length) == target) {
|
||||
a.push(name.substr(target.length, 20) + append)
|
||||
}
|
||||
}
|
||||
|
||||
return a;
|
||||
return a
|
||||
}
|
||||
|
||||
this.update = function(e = null)
|
||||
{
|
||||
var html = ""
|
||||
this.update = function (e = null) {
|
||||
var html = ''
|
||||
|
||||
for(module_id in ronin.modules){
|
||||
var module = ronin.modules[module_id];
|
||||
html += module_id+" ";
|
||||
for (module_id in ronin.modules) {
|
||||
var module = ronin.modules[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
|
||||
|
||||
if(ronin.commander.input_el.value == ""){
|
||||
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."
|
||||
if (ronin.commander.input_el.value == '') {
|
||||
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{
|
||||
this.el.innerHTML = this.pad(ronin.commander.input_el.value)+" "+ronin.modules[target_module].hint();
|
||||
} else {
|
||||
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.'
|
||||
}
|
||||
}
|
||||
else{
|
||||
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.cursor_hint_el.innerHTML = ronin.cursor.hint()
|
||||
}
|
||||
|
||||
this.pad = function(input)
|
||||
{
|
||||
var s = "";
|
||||
for (i = 0; i < input.length; i++){
|
||||
s += "_";
|
||||
this.pad = function (input) {
|
||||
var s = ''
|
||||
for (i = 0; i < input.length; i++) {
|
||||
s += '_'
|
||||
}
|
||||
return "<span style='color:RGBA(0,0,0,0)'>"+s+"</span>";
|
||||
return "<span style='color:RGBA(0,0,0,0)'>" + s + '</span>'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,26 +1,23 @@
|
||||
function Keyboard()
|
||||
{
|
||||
this.is_down = {};
|
||||
function Keyboard () {
|
||||
this.is_down = {}
|
||||
|
||||
this.key_up = function(e)
|
||||
{
|
||||
ronin.hint.update(e);
|
||||
this.key_up = function (e) {
|
||||
ronin.hint.update(e)
|
||||
}
|
||||
|
||||
this.key_down = function(e)
|
||||
{
|
||||
ronin.keyboard.is_down[e.key] = true;
|
||||
this.key_down = function (e) {
|
||||
ronin.keyboard.is_down[e.key] = true
|
||||
|
||||
if(ronin.commander.is_focused() && e.key == "Enter"){
|
||||
e.preventDefault();
|
||||
ronin.commander.validate();
|
||||
if (ronin.commander.is_focused() && e.key == 'Enter') {
|
||||
e.preventDefault()
|
||||
ronin.commander.validate()
|
||||
}
|
||||
|
||||
if(ronin.commander.is_focused()){
|
||||
ronin.hint.update(e);
|
||||
return;
|
||||
if (ronin.commander.is_focused()) {
|
||||
ronin.hint.update(e)
|
||||
return
|
||||
}
|
||||
|
||||
ronin.hint.update(e);
|
||||
ronin.hint.update(e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,72 +1,61 @@
|
||||
function Layer(name)
|
||||
{
|
||||
this.name = name;
|
||||
this.el = document.createElement('canvas');
|
||||
this.el.id = name;
|
||||
this.el.className = "layer";
|
||||
function Layer (name) {
|
||||
this.name = name
|
||||
this.el = document.createElement('canvas')
|
||||
this.el.id = name
|
||||
this.el.className = 'layer'
|
||||
|
||||
this.install = function()
|
||||
{
|
||||
ronin.frame.el.appendChild(this.el);
|
||||
this.install = function () {
|
||||
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()
|
||||
{
|
||||
return this.el.getContext('2d');
|
||||
this.context = function () {
|
||||
return this.el.getContext('2d')
|
||||
}
|
||||
|
||||
this.resize_to = function(size)
|
||||
{
|
||||
console.log(`Resized ${this.name}`);
|
||||
this.el.width = ronin.frame.width * 2;
|
||||
this.el.height = ronin.frame.height * 2;
|
||||
this.update();
|
||||
this.resize_to = function (size) {
|
||||
console.log(`Resized ${this.name}`)
|
||||
this.el.width = ronin.frame.width * 2
|
||||
this.el.height = ronin.frame.height * 2
|
||||
this.update()
|
||||
}
|
||||
|
||||
this.select = function(x = 0,y = 0,width = ronin.frame.width,height = ronin.frame.width)
|
||||
{
|
||||
return this.context().getImageData(x, y, width * 2, height * 2);
|
||||
this.select = function (x = 0, y = 0, width = ronin.frame.width, height = ronin.frame.width) {
|
||||
return this.context().getImageData(x, y, width * 2, height * 2)
|
||||
}
|
||||
|
||||
this.to_base64 = function(format = 'png', quality = 0.9)
|
||||
{
|
||||
return format == 'png' ? this.el.toDataURL('image/png') : this.el.toDataURL('image/jpeg',0.9);
|
||||
this.to_base64 = function (format = 'png', quality = 0.9) {
|
||||
return format == 'png' ? this.el.toDataURL('image/png') : this.el.toDataURL('image/jpeg', 0.9)
|
||||
}
|
||||
|
||||
this.to_img = function()
|
||||
{
|
||||
var img = new Image();
|
||||
img.src = this.to_base64();
|
||||
return img;
|
||||
this.to_img = function () {
|
||||
var img = new Image()
|
||||
img.src = this.to_base64()
|
||||
return img
|
||||
}
|
||||
|
||||
this.clear = function()
|
||||
{
|
||||
this.context().clearRect(0, 0, this.el.width * 2, this.el.height * 2);
|
||||
this.clear = function () {
|
||||
this.context().clearRect(0, 0, this.el.width * 2, this.el.height * 2)
|
||||
}
|
||||
|
||||
this.fill = function(color = "red")
|
||||
{
|
||||
var ctx = this.context();
|
||||
this.fill = function (color = 'red') {
|
||||
var ctx = this.context()
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.globalCompositeOperation="source-over";
|
||||
ctx.moveTo(0,0);
|
||||
ctx.lineTo(this.el.width,0);
|
||||
ctx.lineTo(this.el.width,this.el.height);
|
||||
ctx.lineTo(0,this.el.height);
|
||||
ctx.lineTo(0,0);
|
||||
ctx.fillStyle = color;
|
||||
ctx.fill();
|
||||
ctx.closePath();
|
||||
ctx.beginPath()
|
||||
ctx.globalCompositeOperation = 'source-over'
|
||||
ctx.moveTo(0, 0)
|
||||
ctx.lineTo(this.el.width, 0)
|
||||
ctx.lineTo(this.el.width, this.el.height)
|
||||
ctx.lineTo(0, this.el.height)
|
||||
ctx.lineTo(0, 0)
|
||||
ctx.fillStyle = color
|
||||
ctx.fill()
|
||||
ctx.closePath()
|
||||
}
|
||||
|
||||
this.zoom = function(zoom = {scale:1,offset:{x:0,y:0}})
|
||||
{
|
||||
this.update(zoom);
|
||||
this.zoom = function (zoom = { scale: 1, offset: { x: 0, y: 0 } }) {
|
||||
this.update(zoom)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,17 +1,14 @@
|
||||
function Method(name,params,info = "Missing documentation",f)
|
||||
{
|
||||
this.name = name;
|
||||
this.params = params;
|
||||
this.info = info;
|
||||
this.run = f;
|
||||
function Method (name, params, info = 'Missing documentation', f) {
|
||||
this.name = name
|
||||
this.params = params
|
||||
this.info = info
|
||||
this.run = f
|
||||
|
||||
this.hint = function()
|
||||
{
|
||||
return "<b>"+this.name+"</b>:"+this.params+" ";
|
||||
this.hint = function () {
|
||||
return '<b>' + this.name + '</b>:' + this.params + ' '
|
||||
}
|
||||
|
||||
this.docs = function()
|
||||
{
|
||||
return "<b>"+this.params+"</b> <i>"+this.info+"</i>";
|
||||
this.docs = function () {
|
||||
return '<b>' + this.params + '</b> <i>' + this.info + '</i>'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +1,17 @@
|
||||
function Module(name,docs = "Missing documentation.")
|
||||
{
|
||||
this.name = name;
|
||||
this.methods = {};
|
||||
function Module (name, docs = 'Missing documentation.') {
|
||||
this.name = name
|
||||
this.methods = {}
|
||||
|
||||
this.docs = docs;
|
||||
this.docs = docs
|
||||
|
||||
this.hint = function()
|
||||
{
|
||||
var html = "";
|
||||
this.hint = function () {
|
||||
var html = ''
|
||||
|
||||
for(id in this.methods){
|
||||
var v = this.methods[id];
|
||||
html += v.hint();
|
||||
for (id in this.methods) {
|
||||
var v = this.methods[id]
|
||||
html += v.hint()
|
||||
}
|
||||
|
||||
return html.trim() != "" ? " "+html.trim() : "";
|
||||
|
||||
return html.trim() != '' ? ' ' + html.trim() : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,22 +1,20 @@
|
||||
function Port(host,name,input,output,value,max,docs)
|
||||
{
|
||||
this.host = host;
|
||||
function Port (host, name, input, output, value, max, docs) {
|
||||
this.host = host
|
||||
|
||||
this.name = name;
|
||||
this.input = input;
|
||||
this.output = output;
|
||||
this.value = value;
|
||||
this.max = max;
|
||||
this.docs = docs;
|
||||
this.name = name
|
||||
this.input = input
|
||||
this.output = output
|
||||
this.value = value
|
||||
this.max = max
|
||||
this.docs = docs
|
||||
|
||||
this.write = function(value)
|
||||
{
|
||||
this.value = value;
|
||||
var target = this.host.routes[this.name];
|
||||
this.write = function (value) {
|
||||
this.value = value
|
||||
var target = this.host.routes[this.name]
|
||||
|
||||
if(!this.output){ return; }
|
||||
if(!target){ console.log("No output for",this.name); return; }
|
||||
|
||||
this.host.ports[target].write(this.value);
|
||||
if (!this.output) { return }
|
||||
if (!target) { console.log('No output for', this.name); return }
|
||||
|
||||
this.host.ports[target].write(this.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,113 +1,104 @@
|
||||
function Query(query_str = "")
|
||||
{
|
||||
function Query (query_str = '') {
|
||||
// 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.module = query_str.split(" ")[0];
|
||||
var parts = query_str.split(" ").splice(1);
|
||||
this.raw = parts.join(" ");
|
||||
this.methods = {};
|
||||
this.routes = {};
|
||||
this.last = query_str.indexOf(" ") > -1 ? query_str.split(" ")[query_str.split(" ").length-1] : query_str;
|
||||
this.last_char = query_str.trim().substr(query_str.trim().length-1,1);
|
||||
this.string = query_str
|
||||
this.module = query_str.split(' ')[0]
|
||||
var parts = query_str.split(' ').splice(1)
|
||||
this.raw = parts.join(' ')
|
||||
this.methods = {}
|
||||
this.routes = {}
|
||||
this.last = query_str.indexOf(' ') > -1 ? query_str.split(' ')[query_str.split(' ').length - 1] : query_str
|
||||
this.last_char = query_str.trim().substr(query_str.trim().length - 1, 1)
|
||||
|
||||
for(part_id in parts){
|
||||
var part = parts[part_id];
|
||||
for (part_id in parts) {
|
||||
var part = parts[part_id]
|
||||
// Method
|
||||
if(part.indexOf(":") > -1){
|
||||
var key = part.indexOf(":") > -1 ? part.split(":")[0] : "any";
|
||||
var value = part.indexOf(":") > -1 ? part.split(":")[1] : part;
|
||||
this.methods[key] = parse_parameters(value);
|
||||
if (part.indexOf(':') > -1) {
|
||||
var key = part.indexOf(':') > -1 ? part.split(':')[0] : 'any'
|
||||
var value = part.indexOf(':') > -1 ? part.split(':')[1] : part
|
||||
this.methods[key] = parse_parameters(value)
|
||||
}
|
||||
// Port
|
||||
else if(part.indexOf("->") > -1){
|
||||
var key = part.indexOf("->") > -1 ? part.split("->")[0] : "any";
|
||||
var value = part.indexOf("->") > -1 ? part.split("->")[1] : part;
|
||||
this.routes[key] = value;
|
||||
else if (part.indexOf('->') > -1) {
|
||||
var key = part.indexOf('->') > -1 ? part.split('->')[0] : 'any'
|
||||
var value = part.indexOf('->') > -1 ? part.split('->')[1] : part
|
||||
this.routes[key] = value
|
||||
}
|
||||
}
|
||||
|
||||
function parse_parameters(param_str)
|
||||
{
|
||||
function parse_parameters (param_str) {
|
||||
// Modifier
|
||||
if(param_str.indexOf(">>") > -1){
|
||||
return parse_modifier(param_str);
|
||||
}
|
||||
else{
|
||||
if(param_str.indexOf("&") > -1){
|
||||
return parse_sequence(param_str);
|
||||
}
|
||||
else{
|
||||
return parse_unit(param_str);
|
||||
if (param_str.indexOf('>>') > -1) {
|
||||
return parse_modifier(param_str)
|
||||
} else {
|
||||
if (param_str.indexOf('&') > -1) {
|
||||
return parse_sequence(param_str)
|
||||
} else {
|
||||
return parse_unit(param_str)
|
||||
}
|
||||
}
|
||||
return param_str;
|
||||
return param_str
|
||||
}
|
||||
|
||||
function parse_modifier(mod_str)
|
||||
{
|
||||
var h = {};
|
||||
function parse_modifier (mod_str) {
|
||||
var h = {}
|
||||
|
||||
var parts = mod_str.split(">>");
|
||||
var parts = mod_str.split('>>')
|
||||
|
||||
if(parts[0].indexOf("&") > -1){
|
||||
h.from = parse_sequence(parts[0]);
|
||||
}
|
||||
else{
|
||||
h.from = parse_unit(parts[0]);
|
||||
if (parts[0].indexOf('&') > -1) {
|
||||
h.from = parse_sequence(parts[0])
|
||||
} else {
|
||||
h.from = parse_unit(parts[0])
|
||||
}
|
||||
|
||||
if(parts[1].indexOf("&") > -1){
|
||||
h.to = parse_sequence(parts[1]);
|
||||
if (parts[1].indexOf('&') > -1) {
|
||||
h.to = parse_sequence(parts[1])
|
||||
} else {
|
||||
h.to = parse_unit(parts[1])
|
||||
}
|
||||
else{
|
||||
h.to = parse_unit(parts[1]);
|
||||
}
|
||||
return h;
|
||||
return h
|
||||
}
|
||||
|
||||
function parse_sequence(seq_str)
|
||||
{
|
||||
var a = [];
|
||||
function parse_sequence (seq_str) {
|
||||
var a = []
|
||||
|
||||
var parts = seq_str.split("&");
|
||||
for(part_id in parts){
|
||||
var part = parts[part_id];
|
||||
a.push(parse_unit(part));
|
||||
var parts = seq_str.split('&')
|
||||
for (part_id in parts) {
|
||||
var part = parts[part_id]
|
||||
a.push(parse_unit(part))
|
||||
}
|
||||
return a;
|
||||
return a
|
||||
}
|
||||
|
||||
function parse_unit(unit_str)
|
||||
{
|
||||
function parse_unit (unit_str) {
|
||||
// Arc
|
||||
if(unit_str.indexOf("@") == 0 ){
|
||||
unit_str = unit_str.substr(1,unit_str.length-1);
|
||||
var clockwise = unit_str.indexOf(">") == 0 ? true : false;
|
||||
unit_str = unit_str.substr(1,unit_str.length-1);
|
||||
return {x:parseInt(unit_str.split(",")[0]),y:parseInt(unit_str.split(",")[1]),clockwise:clockwise};
|
||||
if (unit_str.indexOf('@') == 0) {
|
||||
unit_str = unit_str.substr(1, unit_str.length - 1)
|
||||
var clockwise = unit_str.indexOf('>') == 0
|
||||
unit_str = unit_str.substr(1, unit_str.length - 1)
|
||||
return { x: parseInt(unit_str.split(',')[0]), y: parseInt(unit_str.split(',')[1]), clockwise: clockwise }
|
||||
}
|
||||
if(unit_str.indexOf(".") > -1 && unit_str.indexOf("/") > -1 ){
|
||||
return unit_str;
|
||||
if (unit_str.indexOf('.') > -1 && unit_str.indexOf('/') > -1) {
|
||||
return unit_str
|
||||
}
|
||||
// Rect
|
||||
if(unit_str.indexOf("|") > -1 && unit_str.indexOf(",") > -1 && unit_str.indexOf("x") > -1){
|
||||
return Object.assign(parse_unit(unit_str.split("|")[0]), parse_unit(unit_str.split("|")[1]));
|
||||
if (unit_str.indexOf('|') > -1 && unit_str.indexOf(',') > -1 && unit_str.indexOf('x') > -1) {
|
||||
return Object.assign(parse_unit(unit_str.split('|')[0]), parse_unit(unit_str.split('|')[1]))
|
||||
}
|
||||
// Pos
|
||||
if(unit_str.indexOf(",") > -1){
|
||||
return {x:parseInt(unit_str.split(",")[0]),y:parseInt(unit_str.split(",")[1])};
|
||||
if (unit_str.indexOf(',') > -1) {
|
||||
return { x: parseInt(unit_str.split(',')[0]), y: parseInt(unit_str.split(',')[1]) }
|
||||
}
|
||||
// Size
|
||||
if(unit_str.indexOf("x") > -1 && !isNaN(unit_str.split("x")[0]) && !isNaN(unit_str.split("x")[1])){
|
||||
return {width:parseInt(unit_str.split("x")[0]),height:parseInt(unit_str.split("x")[1])};
|
||||
if (unit_str.indexOf('x') > -1 && !isNaN(unit_str.split('x')[0]) && !isNaN(unit_str.split('x')[1])) {
|
||||
return { width: parseInt(unit_str.split('x')[0]), height: parseInt(unit_str.split('x')[1]) }
|
||||
}
|
||||
// Float
|
||||
if(unit_str.indexOf(".") > -1 ){
|
||||
return parseFloat(unit_str);
|
||||
if (unit_str.indexOf('.') > -1) {
|
||||
return parseFloat(unit_str)
|
||||
}
|
||||
// Any
|
||||
return unit_str;
|
||||
return unit_str
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,31 +1,25 @@
|
||||
function Swatch()
|
||||
{
|
||||
this.index = 0;
|
||||
this.colors = [];
|
||||
|
||||
this.start = function()
|
||||
{
|
||||
this.update();
|
||||
}
|
||||
|
||||
this.update = function()
|
||||
{
|
||||
this.colors = [ronin.theme.active.f_high,ronin.theme.active.f_med,ronin.theme.active.f_low];
|
||||
function Swatch () {
|
||||
this.index = 0
|
||||
this.colors = []
|
||||
|
||||
this.start = function () {
|
||||
this.update()
|
||||
}
|
||||
|
||||
this.swap = function()
|
||||
{
|
||||
this.index += 1;
|
||||
this.update = function () {
|
||||
this.colors = [ronin.theme.active.f_high, ronin.theme.active.f_med, ronin.theme.active.f_low]
|
||||
}
|
||||
|
||||
this.color = function(offset = 0)
|
||||
{
|
||||
return this.colors[(this.index + offset) % this.colors.length];
|
||||
this.swap = function () {
|
||||
this.index += 1
|
||||
}
|
||||
|
||||
this.hint = function()
|
||||
{
|
||||
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>`;
|
||||
this.color = function (offset = 0) {
|
||||
return this.colors[(this.index + offset) % this.colors.length]
|
||||
}
|
||||
}
|
||||
|
||||
this.hint = function () {
|
||||
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>`
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,230 +1,216 @@
|
||||
function Guide()
|
||||
{
|
||||
Layer.call(this);
|
||||
|
||||
this.el.id = "guide";
|
||||
this.inspect = true;
|
||||
function Guide () {
|
||||
Layer.call(this)
|
||||
|
||||
this.update = function()
|
||||
{
|
||||
this.clear();
|
||||
this.el.id = 'guide'
|
||||
this.inspect = true
|
||||
|
||||
var units = this.find_units();
|
||||
this.update = function () {
|
||||
this.clear()
|
||||
|
||||
if(this.inspect){
|
||||
this.draw_inspector();
|
||||
var units = this.find_units()
|
||||
|
||||
if (this.inspect) {
|
||||
this.draw_inspector()
|
||||
}
|
||||
|
||||
if(ronin.commander.input_el.value == "~"){
|
||||
this.toggle_color_picker(true);
|
||||
if (ronin.commander.input_el.value == '~') {
|
||||
this.toggle_color_picker(true)
|
||||
}
|
||||
|
||||
// Brush mirrors
|
||||
for(id in ronin.brush.pointers){
|
||||
var pointer = ronin.brush.pointers[id];
|
||||
if(!pointer.options.mirror){ continue; }
|
||||
units.push({x1:pointer.options.mirror.x,y1:0,x2:pointer.options.mirror.x,y2:ronin.frame.height})
|
||||
for (id in ronin.brush.pointers) {
|
||||
var pointer = ronin.brush.pointers[id]
|
||||
if (!pointer.options.mirror) { continue }
|
||||
units.push({ x1: pointer.options.mirror.x, y1: 0, x2: pointer.options.mirror.x, y2: ronin.frame.height })
|
||||
}
|
||||
|
||||
if(units.length == 0){ return; }
|
||||
|
||||
for(i in units){
|
||||
this.draw(units[i]);
|
||||
if (units.length == 0) { return }
|
||||
|
||||
for (i in units) {
|
||||
this.draw(units[i])
|
||||
}
|
||||
}
|
||||
|
||||
this.toggle = function()
|
||||
{
|
||||
this.toggle = function () {
|
||||
this.el.style.opacity = this.el.style.opacity == 0 ? 1 : 0
|
||||
}
|
||||
|
||||
this.toggle_color_picker = function(show)
|
||||
{
|
||||
if(!show){ return; }
|
||||
var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2);
|
||||
var data = originalData.data;
|
||||
for(var i = 0; i < data.length; i += 4) {
|
||||
var x = i % (ronin.frame.width*8)
|
||||
var y = i / (ronin.frame.width*32)
|
||||
data[i] = x/32;
|
||||
data[i + 1] = 255 - (x/32);
|
||||
data[i + 2] = y;
|
||||
data[i + 3] = 255;
|
||||
this.toggle_color_picker = function (show) {
|
||||
if (!show) { return }
|
||||
var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width * 2, ronin.frame.height * 2)
|
||||
var data = originalData.data
|
||||
for (var i = 0; i < data.length; i += 4) {
|
||||
var x = i % (ronin.frame.width * 8)
|
||||
var y = i / (ronin.frame.width * 32)
|
||||
data[i] = x / 32
|
||||
data[i + 1] = 255 - (x / 32)
|
||||
data[i + 2] = y
|
||||
data[i + 3] = 255
|
||||
}
|
||||
ronin.layers.guide.context().putImageData(originalData, 0, 0);
|
||||
ronin.layers.guide.context().putImageData(originalData, 0, 0)
|
||||
}
|
||||
|
||||
this.draw = function(u = null)
|
||||
{
|
||||
if(u && u.x1 != null && u.y1 != null && u.x2 != null && u.y2 != null){
|
||||
this.draw_line({x:u.x1,y:u.y1},{x:u.x2,y:u.y2})
|
||||
this.draw = function (u = null) {
|
||||
if (u && u.x1 != null && u.y1 != null && u.x2 != null && u.y2 != null) {
|
||||
this.draw_line({ x: u.x1, y: u.y1 }, { x: u.x2, y: u.y2 })
|
||||
}
|
||||
|
||||
if(u && u.x && u.y){
|
||||
this.draw_pos(u);
|
||||
if (u && u.x && u.y) {
|
||||
this.draw_pos(u)
|
||||
}
|
||||
if(u && u.width && u.height){
|
||||
this.draw_rect(u);
|
||||
this.draw_pos({x:u.x + (u.width/2),y:u.y + (u.height/2)});
|
||||
if (u && u.width && u.height) {
|
||||
this.draw_rect(u)
|
||||
this.draw_pos({ x: u.x + (u.width / 2), y: u.y + (u.height / 2) })
|
||||
}
|
||||
}
|
||||
|
||||
this.draw_rect = function(u)
|
||||
{
|
||||
var ctx = this.context();
|
||||
this.draw_rect = function (u) {
|
||||
var ctx = this.context()
|
||||
|
||||
u.x = !u.x ? 0 : u.x;
|
||||
u.y = !u.y ? 0 : u.y;
|
||||
u.x = !u.x ? 0 : u.x
|
||||
u.y = !u.y ? 0 : u.y
|
||||
|
||||
var offset = {x:u.x * 2, y:u.y * 2};
|
||||
var rect = {width:u.width * 2,height:u.height * 2};
|
||||
var offset = { x: u.x * 2, y: u.y * 2 }
|
||||
var rect = { width: u.width * 2, height: u.height * 2 }
|
||||
|
||||
// Outline
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.globalCompositeOperation="source-over";
|
||||
ctx.moveTo(offset.x,offset.y);
|
||||
ctx.lineTo(offset.x + rect.width,offset.y);
|
||||
ctx.lineTo(offset.x + rect.width,offset.y + rect.height);
|
||||
ctx.lineTo(offset.x,offset.y + rect.height);
|
||||
ctx.lineTo(offset.x,offset.y);
|
||||
ctx.lineCap="round";
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeStyle = "#000";
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
ctx.beginPath()
|
||||
ctx.globalCompositeOperation = 'source-over'
|
||||
ctx.moveTo(offset.x, offset.y)
|
||||
ctx.lineTo(offset.x + rect.width, offset.y)
|
||||
ctx.lineTo(offset.x + rect.width, offset.y + rect.height)
|
||||
ctx.lineTo(offset.x, offset.y + rect.height)
|
||||
ctx.lineTo(offset.x, offset.y)
|
||||
ctx.lineCap = 'round'
|
||||
ctx.lineWidth = 2
|
||||
ctx.strokeStyle = '#000'
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
}
|
||||
|
||||
this.draw_line = function (u1, u2, color = '#000') {
|
||||
var ctx = this.context()
|
||||
|
||||
this.draw_line = function(u1,u2, color = "#000")
|
||||
{
|
||||
var ctx = this.context();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.globalCompositeOperation="source-over";
|
||||
ctx.moveTo(u1.x * 2,u1.y * 2);
|
||||
ctx.lineTo(u2.x * 2,u2.y * 2);
|
||||
ctx.lineCap="round";
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.strokeStyle = color;
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
ctx.beginPath()
|
||||
ctx.globalCompositeOperation = 'source-over'
|
||||
ctx.moveTo(u1.x * 2, u1.y * 2)
|
||||
ctx.lineTo(u2.x * 2, u2.y * 2)
|
||||
ctx.lineCap = 'round'
|
||||
ctx.lineWidth = 0.5
|
||||
ctx.strokeStyle = color
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
}
|
||||
|
||||
this.draw_pos = function(u)
|
||||
{
|
||||
var ctx = this.context();
|
||||
this.draw_pos = function (u) {
|
||||
var ctx = this.context()
|
||||
|
||||
var offset = 2;
|
||||
var radius = 5;
|
||||
var offset = 2
|
||||
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.globalCompositeOperation="source-over";
|
||||
ctx.moveTo(pos.x+offset,pos.y);
|
||||
ctx.lineTo(pos.x+radius,pos.y);
|
||||
ctx.moveTo(pos.x,pos.y+offset);
|
||||
ctx.lineTo(pos.x,pos.y+radius);
|
||||
ctx.moveTo(pos.x-offset,pos.y);
|
||||
ctx.lineTo(pos.x-radius,pos.y);
|
||||
ctx.moveTo(pos.x,pos.y-offset);
|
||||
ctx.lineTo(pos.x,pos.y-radius);
|
||||
ctx.lineCap="round";
|
||||
ctx.lineWidth = 4;
|
||||
ctx.strokeStyle = "#000";
|
||||
ctx.stroke();
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeStyle = "#fff";
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
ctx.beginPath()
|
||||
ctx.globalCompositeOperation = 'source-over'
|
||||
ctx.moveTo(pos.x + offset, pos.y)
|
||||
ctx.lineTo(pos.x + radius, pos.y)
|
||||
ctx.moveTo(pos.x, pos.y + offset)
|
||||
ctx.lineTo(pos.x, pos.y + radius)
|
||||
ctx.moveTo(pos.x - offset, pos.y)
|
||||
ctx.lineTo(pos.x - radius, pos.y)
|
||||
ctx.moveTo(pos.x, pos.y - offset)
|
||||
ctx.lineTo(pos.x, pos.y - radius)
|
||||
ctx.lineCap = 'round'
|
||||
ctx.lineWidth = 4
|
||||
ctx.strokeStyle = '#000'
|
||||
ctx.stroke()
|
||||
ctx.lineWidth = 2
|
||||
ctx.strokeStyle = '#fff'
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
}
|
||||
|
||||
this.find_units = function(q = ronin.commander.query())
|
||||
{
|
||||
var a = [];
|
||||
this.find_units = function (q = ronin.commander.query()) {
|
||||
var a = []
|
||||
|
||||
for(method_id in q.methods){
|
||||
var params = q.methods[method_id];
|
||||
if(params.from && params.to){
|
||||
a = a.concat(params.from);
|
||||
a = a.concat(params.to);
|
||||
}
|
||||
else{
|
||||
a = a.concat(params);
|
||||
for (method_id in q.methods) {
|
||||
var params = q.methods[method_id]
|
||||
if (params.from && params.to) {
|
||||
a = a.concat(params.from)
|
||||
a = a.concat(params.to)
|
||||
} else {
|
||||
a = a.concat(params)
|
||||
}
|
||||
}
|
||||
return a;
|
||||
return a
|
||||
}
|
||||
|
||||
this.draw_inspector = function()
|
||||
{
|
||||
var color = "black"
|
||||
this.draw_inspector = function () {
|
||||
var color = 'black'
|
||||
|
||||
// Center
|
||||
this.draw_line({x:0,y:ronin.frame.height/2},{x:10,y:ronin.frame.height/2},color);
|
||||
this.draw_line({x:ronin.frame.width-10,y:ronin.frame.height/2},{x:ronin.frame.width,y:ronin.frame.height/2},color);
|
||||
this.draw_line({x:(ronin.frame.width/2)-10,y:ronin.frame.height/2},{x:(ronin.frame.width/2)+10,y:ronin.frame.height/2},color);
|
||||
this.draw_line({x:ronin.frame.width/2,y:0},{x:ronin.frame.width/2,y:10},color);
|
||||
this.draw_line({x:ronin.frame.width/2,y:ronin.frame.height-10},{x:ronin.frame.width/2,y:ronin.frame.height},color);
|
||||
this.draw_line({x:ronin.frame.width/2,y:(ronin.frame.height/2)-10},{x:ronin.frame.width/2,y:(ronin.frame.height/2)+10},color);
|
||||
this.draw_line({ x: 0, y: ronin.frame.height / 2 }, { x: 10, y: ronin.frame.height / 2 }, color)
|
||||
this.draw_line({ x: ronin.frame.width - 10, y: ronin.frame.height / 2 }, { x: ronin.frame.width, y: ronin.frame.height / 2 }, color)
|
||||
this.draw_line({ x: (ronin.frame.width / 2) - 10, y: ronin.frame.height / 2 }, { x: (ronin.frame.width / 2) + 10, y: ronin.frame.height / 2 }, color)
|
||||
this.draw_line({ x: ronin.frame.width / 2, y: 0 }, { x: ronin.frame.width / 2, y: 10 }, color)
|
||||
this.draw_line({ x: ronin.frame.width / 2, y: ronin.frame.height - 10 }, { x: ronin.frame.width / 2, y: ronin.frame.height }, color)
|
||||
this.draw_line({ x: ronin.frame.width / 2, y: (ronin.frame.height / 2) - 10 }, { x: ronin.frame.width / 2, y: (ronin.frame.height / 2) + 10 }, color)
|
||||
|
||||
var ctx = this.context();
|
||||
var ctx = this.context()
|
||||
|
||||
var w = ronin.frame.width * 2;
|
||||
var h = ronin.frame.height * 2;
|
||||
var angle = 45;
|
||||
|
||||
ctx.translate(w/2,h/2);
|
||||
var w = ronin.frame.width * 2
|
||||
var h = ronin.frame.height * 2
|
||||
var angle = 45
|
||||
|
||||
ctx.rotate(angle*Math.PI/180);
|
||||
ctx.translate(w / 2, h / 2)
|
||||
|
||||
this.line(ctx,-w,0,w,0,color);
|
||||
ctx.rotate(angle * Math.PI / 180)
|
||||
|
||||
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, w, 0, 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.4, -h, w * 0.4, h, color)
|
||||
this.line(ctx, -w * 0.4, -h, -w * 0.4, 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, h * 0.25, w, h * 0.25, color)
|
||||
this.line(ctx, -w, -h * 0.25, w, -h * 0.25, 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.line(ctx, w * 0.1, 0, w * 0.1, h, color)
|
||||
this.line(ctx, -w * 0.1, 0, -w * 0.1, -h, color)
|
||||
|
||||
ctx.font = "5px Arial";
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillText(angle+"'",(w*0.4)+10,10);
|
||||
this.circle(ctx, w * 0.4, -h * 0.25, w * 0.05, 1, 1.5, color)
|
||||
this.circle(ctx, -w * 0.4, h * 0.25, w * 0.05, 0, 0.5, color)
|
||||
|
||||
ctx.font = "5px Arial";
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillText(angle+"'",(-w*0.4)-20,-10);
|
||||
ctx.font = '5px Arial'
|
||||
ctx.fillStyle = color
|
||||
ctx.fillText(angle + "'", (w * 0.4) + 10, 10)
|
||||
|
||||
ctx.rotate(-angle*Math.PI/180);
|
||||
ctx.translate(-w/2,-h/2);
|
||||
ctx.font = '5px Arial'
|
||||
ctx.fillStyle = color
|
||||
ctx.fillText(angle + "'", (-w * 0.4) - 20, -10)
|
||||
|
||||
ctx.rotate(-angle * Math.PI / 180)
|
||||
ctx.translate(-w / 2, -h / 2)
|
||||
}
|
||||
|
||||
this.line = function(context,x1,x2,y1,y2,color)
|
||||
{
|
||||
context.beginPath();
|
||||
context.moveTo(x1,x2);
|
||||
context.lineTo(y1,y2);
|
||||
context.lineCap="round";
|
||||
context.lineWidth = 0.5;
|
||||
context.strokeStyle = color;
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
this.line = function (context, x1, x2, y1, y2, color) {
|
||||
context.beginPath()
|
||||
context.moveTo(x1, x2)
|
||||
context.lineTo(y1, y2)
|
||||
context.lineCap = 'round'
|
||||
context.lineWidth = 0.5
|
||||
context.strokeStyle = color
|
||||
context.stroke()
|
||||
context.closePath()
|
||||
}
|
||||
|
||||
this.circle = function(context,x,y,r,c1,c2,color)
|
||||
{
|
||||
context.beginPath();
|
||||
context.arc(x,y,r,c1*Math.PI,c2*Math.PI);
|
||||
context.lineCap="round";
|
||||
context.lineWidth = 0.5;
|
||||
context.strokeStyle = color;
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
this.circle = function (context, x, y, r, c1, c2, color) {
|
||||
context.beginPath()
|
||||
context.arc(x, y, r, c1 * Math.PI, c2 * Math.PI)
|
||||
context.lineCap = 'round'
|
||||
context.lineWidth = 0.5
|
||||
context.strokeStyle = color
|
||||
context.stroke()
|
||||
context.closePath()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,119 +1,108 @@
|
||||
function Brush()
|
||||
{
|
||||
Module.call(this,"brush");
|
||||
function Brush () {
|
||||
Module.call(this, 'brush')
|
||||
|
||||
this.speed = 0;
|
||||
this.swatch = new Swatch();
|
||||
this.speed = 0
|
||||
this.swatch = new Swatch()
|
||||
|
||||
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){
|
||||
var offset = q.length ? q[0] : q;
|
||||
var mirror = q.length ? q[1] : null;
|
||||
ronin.brush.pointers.push(new Pointer({offset:offset,mirror:mirror}));
|
||||
this.methods.add = new Method('add', 'x,y&mirror_x,mirror_y', 'Add a new pointer to the brush', function (q) {
|
||||
var offset = q.length ? q[0] : q
|
||||
var mirror = q.length ? q[1] : null
|
||||
ronin.brush.pointers.push(new Pointer({ offset: offset, mirror: mirror }))
|
||||
})
|
||||
|
||||
this.methods.remove = new Method("remove","","Remove last pointer",function(q){
|
||||
ronin.brush.pointers.pop();
|
||||
this.methods.remove = new Method('remove', '', 'Remove last pointer', function (q) {
|
||||
ronin.brush.pointers.pop()
|
||||
})
|
||||
|
||||
this.methods.pick = new Method("pick","x,y","Set brush color to a position's pixel.",function(q){
|
||||
var pixel = (ronin.commander.input_el.value == "~" ? ronin.guide: ronin.cursor.target).context() .getImageData(q.x*2, q.y*2, 1, 1).data;
|
||||
var c = new Color().rgb_to_hex(pixel);
|
||||
var color = new Color(c);
|
||||
ronin.cursor.color = color.hex;
|
||||
ronin.hint.update();
|
||||
this.methods.pick = new Method('pick', 'x,y', "Set brush color to a position's pixel.", function (q) {
|
||||
var pixel = (ronin.commander.input_el.value == '~' ? ronin.guide : ronin.cursor.target).context().getImageData(q.x * 2, q.y * 2, 1, 1).data
|
||||
var c = new Color().rgb_to_hex(pixel)
|
||||
var color = new Color(c)
|
||||
ronin.cursor.color = color.hex
|
||||
ronin.hint.update()
|
||||
})
|
||||
|
||||
this.methods.set_color = new Method("set_color","#ff0033","Set color",function(q){
|
||||
ronin.cursor.color = q;
|
||||
this.methods.set_color = new Method('set_color', '#ff0033', 'Set color', function (q) {
|
||||
ronin.cursor.color = q
|
||||
})
|
||||
|
||||
this.absolute_thickness = 0;
|
||||
this.absolute_thickness = 0
|
||||
|
||||
this.thickness = function(line)
|
||||
{
|
||||
var ratio = clamp(1 - (ronin.brush.speed/20),0,1)
|
||||
var t = ronin.cursor.size * ratio;
|
||||
this.absolute_thickness = t > this.absolute_thickness ? this.absolute_thickness+0.25 : this.absolute_thickness-0.25;
|
||||
return this.absolute_thickness;
|
||||
this.thickness = function (line) {
|
||||
var ratio = clamp(1 - (ronin.brush.speed / 20), 0, 1)
|
||||
var t = ronin.cursor.size * ratio
|
||||
this.absolute_thickness = t > this.absolute_thickness ? this.absolute_thickness + 0.25 : this.absolute_thickness - 0.25
|
||||
return this.absolute_thickness
|
||||
}
|
||||
|
||||
this.stroke = function(line)
|
||||
{
|
||||
this.speed = distance_between(line.from,line.to);
|
||||
this.stroke = function (line) {
|
||||
this.speed = distance_between(line.from, line.to)
|
||||
|
||||
for(pointer_id in this.pointers){
|
||||
this.pointers[pointer_id].stroke(line);
|
||||
for (pointer_id in this.pointers) {
|
||||
this.pointers[pointer_id].stroke(line)
|
||||
}
|
||||
}
|
||||
|
||||
this.erase = function(line)
|
||||
{
|
||||
this.speed = distance_between(line.from,line.to);
|
||||
this.erase = function (line) {
|
||||
this.speed = distance_between(line.from, line.to)
|
||||
|
||||
for(pointer_id in this.pointers){
|
||||
this.pointers[pointer_id].stroke(line,true);
|
||||
for (pointer_id in this.pointers) {
|
||||
this.pointers[pointer_id].stroke(line, true)
|
||||
}
|
||||
}
|
||||
|
||||
this.pick = function(line)
|
||||
{
|
||||
if(!line.to){
|
||||
this.pick = function (line) {
|
||||
if (!line.to) {
|
||||
line.to = line.from
|
||||
}
|
||||
|
||||
var pixel = ronin.cursor.target.context().getImageData(line.to.x*2, line.to.y*2, 1, 1).data;
|
||||
var pixel = ronin.cursor.target.context().getImageData(line.to.x * 2, line.to.y * 2, 1, 1).data
|
||||
}
|
||||
|
||||
this.mod_size = function(mod)
|
||||
{
|
||||
ronin.cursor.size = clamp(parseInt(ronin.cursor.size)+mod,1,100);
|
||||
this.mod_size = function (mod) {
|
||||
ronin.cursor.size = clamp(parseInt(ronin.cursor.size) + mod, 1, 100)
|
||||
}
|
||||
|
||||
function clamp(v, min, max)
|
||||
{
|
||||
return v < min ? min : v > max ? max : v;
|
||||
function clamp (v, min, max) {
|
||||
return v < min ? min : v > max ? max : v
|
||||
}
|
||||
|
||||
function distance_between(a,b)
|
||||
{
|
||||
return a && b ? Math.sqrt( (a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y) ) : 0;
|
||||
function distance_between (a, b) {
|
||||
return a && b ? Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y)) : 0
|
||||
}
|
||||
}
|
||||
|
||||
function Pointer(options)
|
||||
{
|
||||
this.options = options;
|
||||
function Pointer (options) {
|
||||
this.options = options
|
||||
|
||||
this.stroke = function(line,erase = false)
|
||||
{
|
||||
var ctx = ronin.cursor.target.context();
|
||||
this.stroke = function (line, erase = false) {
|
||||
var ctx = ronin.cursor.target.context()
|
||||
|
||||
if(this.options.mirror){
|
||||
line.from.x = (this.options.mirror.x *2) - line.from.x;
|
||||
line.to.x = (this.options.mirror.x*2) - line.to.x;
|
||||
if (this.options.mirror) {
|
||||
line.from.x = (this.options.mirror.x * 2) - line.from.x
|
||||
line.to.x = (this.options.mirror.x * 2) - line.to.x
|
||||
}
|
||||
|
||||
if(!line.to){
|
||||
if (!line.to) {
|
||||
line.to = line.from
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.globalCompositeOperation = erase ? "destination-out" : "source-over";
|
||||
ctx.moveTo((line.from.x * 2) + this.options.offset.x,(line.from.y * 2) + this.options.offset.y);
|
||||
ctx.lineTo((line.to.x * 2) + this.options.offset.x,(line.to.y * 2) + this.options.offset.y);
|
||||
ctx.lineCap="round";
|
||||
ctx.lineWidth = ronin.brush.thickness(line);
|
||||
ctx.strokeStyle = ronin.brush.swatch.color();
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
ctx.beginPath()
|
||||
ctx.globalCompositeOperation = erase ? 'destination-out' : 'source-over'
|
||||
ctx.moveTo((line.from.x * 2) + this.options.offset.x, (line.from.y * 2) + this.options.offset.y)
|
||||
ctx.lineTo((line.to.x * 2) + this.options.offset.x, (line.to.y * 2) + this.options.offset.y)
|
||||
ctx.lineCap = 'round'
|
||||
ctx.lineWidth = ronin.brush.thickness(line)
|
||||
ctx.strokeStyle = ronin.brush.swatch.color()
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
}
|
||||
|
||||
function clamp(v, min, max)
|
||||
{
|
||||
return v < min ? min : v > max ? max : v;
|
||||
function clamp (v, min, max) {
|
||||
return v < min ? min : v > max ? max : v
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,64 +1,60 @@
|
||||
function Filter()
|
||||
{
|
||||
Module.call(this,"filter","Pixel filter");
|
||||
function 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);
|
||||
var data = originalData.data;
|
||||
|
||||
for(var i = 0; i < data.length; i += 4) {
|
||||
data[i] = data[i] * (color.r + 0.5);
|
||||
data[i + 1] = data[i + 1] * (color.g + 0.5);
|
||||
data[i + 2] = data[i + 2] * (color.b + 0.5);
|
||||
for (var i = 0; i < data.length; i += 4) {
|
||||
data[i] = data[i] * (color.r + 0.5)
|
||||
data[i + 1] = data[i + 1] * (color.g + 0.5)
|
||||
data[i + 2] = data[i + 2] * (color.b + 0.5)
|
||||
}
|
||||
|
||||
ronin.cursor.target.context().putImageData(originalData, 0, 0);
|
||||
});
|
||||
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);
|
||||
var data = originalData.data;
|
||||
|
||||
for(var i = 0; i < data.length; i += 4) {
|
||||
var r = data[i];
|
||||
var g = data[i+1];
|
||||
var b = data[i+2];
|
||||
var v = color.r*r + color.g*g + color.b*b;
|
||||
data[i] = data[i+1] = data[i+2] = v
|
||||
for (var i = 0; i < data.length; i += 4) {
|
||||
var r = data[i]
|
||||
var g = data[i + 1]
|
||||
var b = data[i + 2]
|
||||
var v = color.r * r + color.g * g + color.b * b
|
||||
data[i] = data[i + 1] = data[i + 2] = v
|
||||
}
|
||||
|
||||
ronin.cursor.target.context().putImageData(originalData, 0, 0);
|
||||
});
|
||||
ronin.cursor.target.context().putImageData(originalData, 0, 0)
|
||||
})
|
||||
|
||||
this.preview = function(q)
|
||||
{
|
||||
if(!q.methods.saturation){ return; }
|
||||
this.preview = function (q) {
|
||||
if (!q.methods.saturation) { return }
|
||||
|
||||
ronin.preview.clear();
|
||||
ronin.preview.clear()
|
||||
|
||||
// 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 data = originalData.data;
|
||||
var originalData = ronin.cursor.target.context().getImageData(0, 0, ronin.frame.width * 2, ronin.frame.height * 2)
|
||||
var data = originalData.data
|
||||
|
||||
for(var i = 0; i < data.length; i += 4) {
|
||||
var r = data[i];
|
||||
var g = data[i+1];
|
||||
var b = data[i+2];
|
||||
var v = (r + g + b)/3;
|
||||
data[i] = (r*x)+(v*(1-x))
|
||||
data[i+1] = (g*x)+(v*(1-x))
|
||||
data[i+2] = (b*x)+(v*(1-x))
|
||||
for (var i = 0; i < data.length; i += 4) {
|
||||
var r = data[i]
|
||||
var g = data[i + 1]
|
||||
var b = data[i + 2]
|
||||
var v = (r + g + b) / 3
|
||||
data[i] = (r * x) + (v * (1 - x))
|
||||
data[i + 1] = (g * x) + (v * (1 - x))
|
||||
data[i + 2] = (b * x) + (v * (1 - x))
|
||||
}
|
||||
|
||||
ronin.preview.context().putImageData(originalData, 0, 0);
|
||||
ronin.preview.context().putImageData(originalData, 0, 0)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,93 +1,90 @@
|
||||
function Frame()
|
||||
{
|
||||
Module.call(this,"frame","Manager for the canvas size");
|
||||
|
||||
this.el = document.createElement('surface');
|
||||
this.background = "pink";
|
||||
function Frame () {
|
||||
Module.call(this, 'frame', 'Manager for the canvas size')
|
||||
|
||||
this.install = function()
|
||||
{
|
||||
ronin.el.appendChild(this.el);
|
||||
this.el = document.createElement('surface')
|
||||
this.background = 'pink'
|
||||
|
||||
this.install = function () {
|
||||
ronin.el.appendChild(this.el)
|
||||
}
|
||||
|
||||
this.methods.new = new Method("new","WxH","New Canvas",function(q){
|
||||
ronin.layers.above.clear();
|
||||
ronin.layers.below.clear();
|
||||
ronin.frame.resize_to({width:900,height:540});
|
||||
});
|
||||
this.methods.new = new Method('new', 'WxH', 'New Canvas', function (q) {
|
||||
ronin.layers.above.clear()
|
||||
ronin.layers.below.clear()
|
||||
ronin.frame.resize_to({ width: 900, height: 540 })
|
||||
})
|
||||
|
||||
this.width = 400;
|
||||
this.height = 400;
|
||||
this.zoom = {scale:1,offset:{x:0,y:0}};
|
||||
this.width = 400
|
||||
this.height = 400
|
||||
this.zoom = { scale: 1, offset: { x: 0, y: 0 } }
|
||||
|
||||
this.methods.set_background = new Method("set_background","WxH","Resize canvas to size.",function(q){
|
||||
ronin.frame.background = q;
|
||||
ronin.frame.el.style.backgroundColor = q;
|
||||
});
|
||||
this.methods.set_background = new Method('set_background', 'WxH', 'Resize canvas to size.', function (q) {
|
||||
ronin.frame.background = q
|
||||
ronin.frame.el.style.backgroundColor = q
|
||||
})
|
||||
|
||||
this.methods.resize = new Method("resize","WxH","Resize canvas to size.",function(q){
|
||||
var data = ronin.cursor.target.select(0,0,ronin.frame.width,ronin.frame.height);
|
||||
ronin.cursor.target.clear();
|
||||
ronin.frame.resize_to(q);
|
||||
ronin.cursor.target.context().putImageData(data, 0, 0);
|
||||
});
|
||||
this.methods.resize = new Method('resize', 'WxH', 'Resize canvas to size.', function (q) {
|
||||
var data = ronin.cursor.target.select(0, 0, ronin.frame.width, ronin.frame.height)
|
||||
ronin.cursor.target.clear()
|
||||
ronin.frame.resize_to(q)
|
||||
ronin.cursor.target.context().putImageData(data, 0, 0)
|
||||
})
|
||||
|
||||
this.methods.rescale = new Method("rescale","0.5","Rescale canvas to float.",function(p){
|
||||
var new_size = {width:ronin.frame.width * p,height:ronin.frame.height * p};
|
||||
ronin.cursor.target.context().drawImage(ronin.cursor.target.to_img(),0,0,new_size.width * 2,new_size.height * 2);
|
||||
setTimeout(function(){ ronin.frame.methods.resize.run(new_size);},500)
|
||||
});
|
||||
this.methods.rescale = new Method('rescale', '0.5', 'Rescale canvas to float.', function (p) {
|
||||
var new_size = { width: ronin.frame.width * p, height: ronin.frame.height * p }
|
||||
ronin.cursor.target.context().drawImage(ronin.cursor.target.to_img(), 0, 0, new_size.width * 2, new_size.height * 2)
|
||||
setTimeout(function () { ronin.frame.methods.resize.run(new_size) }, 500)
|
||||
})
|
||||
|
||||
this.methods.crop = new Method("crop","X,Y|WxH","Crop canvas to rect.",function(p){
|
||||
var data = ronin.cursor.target.select(0,0,p.width*2,p.height*2);
|
||||
ronin.cursor.target.clear();
|
||||
ronin.frame.resize_to(p);
|
||||
setTimeout(function(){ ronin.cursor.target.context().putImageData(data, p.x*-2, p.y*-2);},500)
|
||||
});
|
||||
this.methods.crop = new Method('crop', 'X,Y|WxH', 'Crop canvas to rect.', function (p) {
|
||||
var data = ronin.cursor.target.select(0, 0, p.width * 2, p.height * 2)
|
||||
ronin.cursor.target.clear()
|
||||
ronin.frame.resize_to(p)
|
||||
setTimeout(function () { ronin.cursor.target.context().putImageData(data, p.x * -2, p.y * -2) }, 500)
|
||||
})
|
||||
|
||||
this.methods.clear = new Method("clear","","Erase entire canvas",function(q){
|
||||
ronin.cursor.target.clear();
|
||||
});
|
||||
this.methods.clear = new Method('clear', '', 'Erase entire canvas', function (q) {
|
||||
ronin.cursor.target.clear()
|
||||
})
|
||||
|
||||
this.methods.fill = new Method("fill","#f00","Fill entire canvas with color",function(q){
|
||||
ronin.cursor.target.fill(q ? q : ronin.cursor.color);
|
||||
});
|
||||
this.methods.fill = new Method('fill', '#f00', 'Fill entire canvas with color', function (q) {
|
||||
ronin.cursor.target.fill(q || ronin.cursor.color)
|
||||
})
|
||||
|
||||
this.methods.inspect = new Method("inspect","","View canvas details",function(q){
|
||||
ronin.guide.inspect = ronin.guide.inspect ? false : true;
|
||||
ronin.guide.draw();
|
||||
});
|
||||
this.methods.inspect = new Method('inspect', '', 'View canvas details', function (q) {
|
||||
ronin.guide.inspect = !ronin.guide.inspect
|
||||
ronin.guide.draw()
|
||||
})
|
||||
|
||||
this.methods.zoom = new Method("zoom","","Zoom canvas",function(q){
|
||||
if(ronin.frame.zoom.scale == parseInt(q)){ return; }
|
||||
this.methods.zoom = new Method('zoom', '', 'Zoom canvas', function (q) {
|
||||
if (ronin.frame.zoom.scale == parseInt(q)) { return }
|
||||
|
||||
ronin.frame.zoom.scale = parseInt(q);
|
||||
ronin.frame.zoom.scale = parseInt(q)
|
||||
|
||||
ronin.frame.el.style.width = `${ronin.frame.width * ronin.frame.zoom.scale}px`;
|
||||
ronin.frame.el.style.height = `${ronin.frame.height * ronin.frame.zoom.scale}px`;
|
||||
ronin.frame.zoom.offset.x = ronin.frame.zoom.scale == 1 ? 0 : ((-ronin.cursor.pos.x * ronin.frame.zoom.scale) + (ronin.frame.width/2));
|
||||
ronin.frame.zoom.offset.y = ronin.frame.zoom.scale == 1 ? 0 : ((-ronin.cursor.pos.y * ronin.frame.zoom.scale) + (ronin.frame.height/2));
|
||||
ronin.frame.el.style.width = `${ronin.frame.width * ronin.frame.zoom.scale}px`
|
||||
ronin.frame.el.style.height = `${ronin.frame.height * ronin.frame.zoom.scale}px`
|
||||
ronin.frame.zoom.offset.x = ronin.frame.zoom.scale == 1 ? 0 : ((-ronin.cursor.pos.x * ronin.frame.zoom.scale) + (ronin.frame.width / 2))
|
||||
ronin.frame.zoom.offset.y = ronin.frame.zoom.scale == 1 ? 0 : ((-ronin.cursor.pos.y * ronin.frame.zoom.scale) + (ronin.frame.height / 2))
|
||||
|
||||
// Normalize
|
||||
if(ronin.frame.zoom.offset.x > 0){ ronin.frame.zoom.offset.x = 0; }
|
||||
if(ronin.frame.zoom.offset.y > 0){ ronin.frame.zoom.offset.y = 0; }
|
||||
if (ronin.frame.zoom.offset.x > 0) { ronin.frame.zoom.offset.x = 0 }
|
||||
if (ronin.frame.zoom.offset.y > 0) { ronin.frame.zoom.offset.y = 0 }
|
||||
|
||||
ronin.frame.el.style.top = `${ronin.frame.zoom.offset.y}px`;
|
||||
ronin.frame.el.style.left = `${ronin.frame.zoom.offset.x}px`;
|
||||
});
|
||||
ronin.frame.el.style.top = `${ronin.frame.zoom.offset.y}px`
|
||||
ronin.frame.el.style.left = `${ronin.frame.zoom.offset.x}px`
|
||||
})
|
||||
|
||||
this.resize_to = function(size)
|
||||
{
|
||||
this.el.style.width = `${size.width}px`;
|
||||
this.el.style.height = `${size.height}px`;
|
||||
ronin.frame.width = size.width;
|
||||
ronin.frame.height = size.height;
|
||||
this.resize_to = function (size) {
|
||||
this.el.style.width = `${size.width}px`
|
||||
this.el.style.height = `${size.height}px`
|
||||
ronin.frame.width = size.width
|
||||
ronin.frame.height = size.height
|
||||
|
||||
const {dialog,app} = require('electron').remote;
|
||||
var win = require('electron').remote.getCurrentWindow();
|
||||
win.setSize(size.width,size.height);
|
||||
ronin.layers.above.resize_to(size);
|
||||
ronin.layers.below.resize_to(size);
|
||||
ronin.guide.resize_to(size);
|
||||
const { dialog, app } = require('electron').remote
|
||||
var win = require('electron').remote.getCurrentWindow()
|
||||
win.setSize(size.width, size.height)
|
||||
ronin.layers.above.resize_to(size)
|
||||
ronin.layers.below.resize_to(size)
|
||||
ronin.guide.resize_to(size)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,137 +1,131 @@
|
||||
function IO()
|
||||
{
|
||||
Module.call(this,"io","File import/export tools.");
|
||||
|
||||
this.image = null;
|
||||
function IO () {
|
||||
Module.call(this, 'io', 'File import/export tools.')
|
||||
|
||||
this.methods.open = new Method("open","browser","Press enter to open the file browser.",function(q){
|
||||
var filepath = q ? [q] : dialog.showOpenDialog({properties: ['openFile']});
|
||||
this.image = null
|
||||
|
||||
if(!filepath){ console.log("Nothing to load"); return; }
|
||||
this.methods.open = new Method('open', 'browser', 'Press enter to open the file browser.', function (q) {
|
||||
var filepath = q ? [q] : dialog.showOpenDialog({ properties: ['openFile'] })
|
||||
|
||||
if (!filepath) { console.log('Nothing to load'); return }
|
||||
|
||||
fs.readFile(filepath[0], 'utf-8', (err, data) => {
|
||||
if(err){ alert("An error ocurred reading the file :" + err.message); return; }
|
||||
var img = new Image();
|
||||
img.src = filepath[0];
|
||||
img.onload = function() {
|
||||
var width = parseInt(img.naturalWidth * 0.5);
|
||||
var height = parseInt(img.naturalHeight * 0.5);
|
||||
ronin.frame.resize_to({width:width,height:height});
|
||||
ronin.io.draw_image(ronin.cursor.target.context(),img,{x:0,y:0,width:width,height:height});
|
||||
if (err) { alert('An error ocurred reading the file :' + err.message); return }
|
||||
var img = new Image()
|
||||
img.src = filepath[0]
|
||||
img.onload = function () {
|
||||
var width = parseInt(img.naturalWidth * 0.5)
|
||||
var height = parseInt(img.naturalHeight * 0.5)
|
||||
ronin.frame.resize_to({ width: width, height: height })
|
||||
ronin.io.draw_image(ronin.cursor.target.context(), img, { x: 0, y: 0, width: width, height: height })
|
||||
}
|
||||
});
|
||||
})
|
||||
})
|
||||
|
||||
this.methods.load = new Method("load","browser","Press enter to open the file browser.",function(q){
|
||||
var filepath = q ? [q] : dialog.showOpenDialog({properties: ['openFile']});
|
||||
this.methods.load = new Method('load', 'browser', 'Press enter to open the file browser.', function (q) {
|
||||
var filepath = q ? [q] : dialog.showOpenDialog({ properties: ['openFile'] })
|
||||
|
||||
if(!filepath){ console.log("Nothing to load"); return; }
|
||||
if (!filepath) { console.log('Nothing to load'); return }
|
||||
|
||||
fs.readFile(filepath[0], 'utf-8', (err, data) => {
|
||||
if(err){ alert("An error ocurred reading the file :" + err.message); return; }
|
||||
var img = new Image();
|
||||
img.src = filepath[0];
|
||||
img.onload = function() {
|
||||
ronin.io.image = img;
|
||||
ronin.commander.inject("io draw:20,20|100x100");
|
||||
if (err) { alert('An error ocurred reading the file :' + err.message); return }
|
||||
var img = new Image()
|
||||
img.src = filepath[0]
|
||||
img.onload = function () {
|
||||
ronin.io.image = img
|
||||
ronin.commander.inject('io draw:20,20|100x100')
|
||||
}
|
||||
});
|
||||
});
|
||||
})
|
||||
})
|
||||
|
||||
this.methods.render = new Method("render","png","Export canvas.",function(q){
|
||||
var ext = "png";
|
||||
var fs = require('fs');
|
||||
var data = ronin.io.render().to_base64(ext).replace(/^data:image\/\w+;base64,/, "");
|
||||
var buf = new Buffer(data, 'base64');
|
||||
this.methods.render = new Method('render', 'png', 'Export canvas.', function (q) {
|
||||
var ext = 'png'
|
||||
var fs = require('fs')
|
||||
var data = ronin.io.render().to_base64(ext).replace(/^data:image\/\w+;base64,/, '')
|
||||
var buf = new Buffer(data, 'base64')
|
||||
|
||||
dialog.showSaveDialog((fileName) => {
|
||||
if (fileName === undefined){ return; }
|
||||
fs.writeFile(fileName+'.'+ext, buf);
|
||||
});
|
||||
});
|
||||
if (fileName === undefined) { return }
|
||||
fs.writeFile(fileName + '.' + ext, buf)
|
||||
})
|
||||
})
|
||||
|
||||
this.methods.export = new Method("render","jpg","Export canvas.",function(q){
|
||||
var ext = "jpg";
|
||||
var fs = require('fs');
|
||||
var data = ronin.io.render(ronin.frame.background).to_base64(ext).replace(/^data:image\/\w+;base64,/, "");
|
||||
var buf = new Buffer(data, 'base64');
|
||||
this.methods.export = new Method('render', 'jpg', 'Export canvas.', function (q) {
|
||||
var ext = 'jpg'
|
||||
var fs = require('fs')
|
||||
var data = ronin.io.render(ronin.frame.background).to_base64(ext).replace(/^data:image\/\w+;base64,/, '')
|
||||
var buf = new Buffer(data, 'base64')
|
||||
|
||||
dialog.showSaveDialog((fileName) => {
|
||||
if (fileName === undefined){ return; }
|
||||
fs.writeFile(fileName+'.'+ext, buf);
|
||||
});
|
||||
});
|
||||
if (fileName === undefined) { return }
|
||||
fs.writeFile(fileName + '.' + ext, buf)
|
||||
})
|
||||
})
|
||||
|
||||
this.methods.draw = new Method("draw","X,Y|WxH","Draw the loaded image pixels.",function(q){
|
||||
if(!ronin.io.image){ return; }
|
||||
this.methods.draw = new Method('draw', 'X,Y|WxH', 'Draw the loaded image pixels.', function (q) {
|
||||
if (!ronin.io.image) { return }
|
||||
|
||||
ronin.io.draw_image(ronin.cursor.target.context(), ronin.io.image, ronin.commander.query().methods.draw)
|
||||
ronin.io.image = null
|
||||
})
|
||||
|
||||
ronin.io.draw_image(ronin.cursor.target.context(),ronin.io.image,ronin.commander.query().methods.draw);
|
||||
ronin.io.image = null;
|
||||
});
|
||||
|
||||
// this.preview = function(q)
|
||||
// {
|
||||
// ronin.preview.clear();
|
||||
|
||||
// if(ronin.commander.query().methods.draw && this.image){
|
||||
// this.draw_image(ronin.preview.context(),this.image,ronin.commander.query().methods.draw);
|
||||
// this.draw_image(ronin.preview.context(),this.image,ronin.commander.query().methods.draw);
|
||||
// }
|
||||
// }
|
||||
|
||||
this.render = function(fill = null)
|
||||
{
|
||||
var export_layer = new Layer();
|
||||
this.render = function (fill = null) {
|
||||
var export_layer = new Layer()
|
||||
|
||||
export_layer.el.width = ronin.frame.width * 2;
|
||||
export_layer.el.height = ronin.frame.height * 2;
|
||||
export_layer.el.width = ronin.frame.width * 2
|
||||
export_layer.el.height = ronin.frame.height * 2
|
||||
|
||||
if(fill){
|
||||
export_layer.fill(fill);
|
||||
if (fill) {
|
||||
export_layer.fill(fill)
|
||||
}
|
||||
export_layer.context().drawImage(ronin.layers.below.el,0,0)
|
||||
export_layer.context().drawImage(ronin.layers.above.el,0,0)
|
||||
return export_layer;
|
||||
export_layer.context().drawImage(ronin.layers.below.el, 0, 0)
|
||||
export_layer.context().drawImage(ronin.layers.above.el, 0, 0)
|
||||
return export_layer
|
||||
}
|
||||
|
||||
this.draw_image = function(ctx,img,params)
|
||||
{
|
||||
var width = parseInt(img.naturalWidth * 0.5);
|
||||
var height = parseInt(img.naturalHeight * 0.5);
|
||||
this.draw_image = function (ctx, img, params) {
|
||||
var width = parseInt(img.naturalWidth * 0.5)
|
||||
var height = parseInt(img.naturalHeight * 0.5)
|
||||
|
||||
var scale = params.width > params.height ? (params.width/width) * 2 : (params.height/height) * 2;
|
||||
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)
|
||||
{
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
});
|
||||
window.addEventListener('dragover', function (e) {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
e.dataTransfer.dropEffect = 'copy'
|
||||
})
|
||||
|
||||
window.addEventListener('drop', function(e)
|
||||
{
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
window.addEventListener('drop', function (e) {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
|
||||
var files = e.dataTransfer.files;
|
||||
var file = files[0];
|
||||
var path = file.path ? file.path : file.name;
|
||||
var files = e.dataTransfer.files
|
||||
var file = files[0]
|
||||
var path = file.path ? file.path : file.name
|
||||
|
||||
if(path.substr(-4,4) == ".thm"){ return; }
|
||||
|
||||
if (file.type && !file.type.match(/image.*/)) { console.log("Not image", file.type); return false; }
|
||||
if (path.substr(-4, 4) == '.thm') { return }
|
||||
|
||||
var reader = new FileReader();
|
||||
if (file.type && !file.type.match(/image.*/)) { console.log('Not image', file.type); return false }
|
||||
|
||||
reader.onload = function(event)
|
||||
{
|
||||
var img = new Image();
|
||||
img.src = event.target.result;
|
||||
ronin.io.image = img;
|
||||
ronin.commander.inject("io draw:20,20|100x100");
|
||||
var reader = new FileReader()
|
||||
|
||||
reader.onload = function (event) {
|
||||
var img = new Image()
|
||||
img.src = event.target.result
|
||||
ronin.io.image = img
|
||||
ronin.commander.inject('io draw:20,20|100x100')
|
||||
}
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
reader.readAsDataURL(file)
|
||||
})
|
||||
|
||||
@ -1,76 +1,69 @@
|
||||
function Line()
|
||||
{
|
||||
Module.call(this,"line","Drawing lines. Tween expects something in the `$&$>>$&$` format.");
|
||||
function Line () {
|
||||
Module.call(this, 'line', 'Drawing lines. Tween expects something in the `$&$>>$&$` format.')
|
||||
|
||||
this.ports.step = new Port(this,"step",false,true,0,100,"The tween line index.");
|
||||
this.ports.thickness = new Port(this,"thickness",true,true,1,100,"The tween line thickness.");
|
||||
this.ports.step = new Port(this, 'step', false, true, 0, 100, 'The tween line index.')
|
||||
this.ports.thickness = new Port(this, 'thickness', true, true, 1, 100, 'The tween line thickness.')
|
||||
|
||||
this.methods.stroke = new Method("stroke","x1,y1&x2,y2","Stroke positions.",function(q){
|
||||
this.methods.stroke = new Method('stroke', 'x1,y1&x2,y2', 'Stroke positions.', function (q) {
|
||||
ronin.line.stroke_multi(q)
|
||||
})
|
||||
|
||||
this.methods.tween = new Method("tween","tween:$&$>>$&$ step->thickness","Stroke lines between strokes.",function(q){
|
||||
var from = q.from;
|
||||
var to = q.to;
|
||||
this.methods.tween = new Method('tween', 'tween:$&$>>$&$ step->thickness', 'Stroke lines between strokes.', function (q) {
|
||||
var from = q.from
|
||||
var to = q.to
|
||||
|
||||
ronin.line.ports.step.write(0);
|
||||
while(ronin.line.ports.step.value < ronin.line.ports.step.max){
|
||||
var progress = ronin.line.ports.step.value/parseFloat(ronin.line.ports.step.max);
|
||||
var new_positions = tween_positions(from,to,progress);
|
||||
ronin.line.stroke_multi(new_positions);
|
||||
ronin.line.ports.step.write(ronin.line.ports.step.value+1);
|
||||
ronin.line.ports.step.write(0)
|
||||
while (ronin.line.ports.step.value < ronin.line.ports.step.max) {
|
||||
var progress = ronin.line.ports.step.value / parseFloat(ronin.line.ports.step.max)
|
||||
var new_positions = tween_positions(from, to, progress)
|
||||
ronin.line.stroke_multi(new_positions)
|
||||
ronin.line.ports.step.write(ronin.line.ports.step.value + 1)
|
||||
}
|
||||
})
|
||||
|
||||
this.preview = function(q)
|
||||
{
|
||||
this.preview = function (q) {
|
||||
// TODO
|
||||
// console.log(q);
|
||||
}
|
||||
|
||||
this.stroke_multi = function(coordinates)
|
||||
{
|
||||
var from = coordinates[0];
|
||||
for(pos_id in coordinates){
|
||||
var pos = coordinates[pos_id];
|
||||
ronin.line.stroke(from,pos);
|
||||
from = pos;
|
||||
this.stroke_multi = function (coordinates) {
|
||||
var from = coordinates[0]
|
||||
for (pos_id in coordinates) {
|
||||
var pos = coordinates[pos_id]
|
||||
ronin.line.stroke(from, pos)
|
||||
from = pos
|
||||
}
|
||||
}
|
||||
|
||||
this.stroke = function(from,to,ctx = ronin.cursor.target.context())
|
||||
{
|
||||
ctx.beginPath();
|
||||
ctx.globalCompositeOperation="source-over";
|
||||
ctx.moveTo((from.x * 2),(from.y * 2));
|
||||
ctx.lineTo((to.x * 2),(to.y * 2));
|
||||
ctx.lineCap="round";
|
||||
ctx.lineWidth = clamp(ronin.line.ports.thickness.value,1,200) * 0.1;
|
||||
ctx.strokeStyle = "#000";
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
}
|
||||
|
||||
function clamp(v, min, max)
|
||||
{
|
||||
return v < min ? min : v > max ? max : v;
|
||||
this.stroke = function (from, to, ctx = ronin.cursor.target.context()) {
|
||||
ctx.beginPath()
|
||||
ctx.globalCompositeOperation = 'source-over'
|
||||
ctx.moveTo((from.x * 2), (from.y * 2))
|
||||
ctx.lineTo((to.x * 2), (to.y * 2))
|
||||
ctx.lineCap = 'round'
|
||||
ctx.lineWidth = clamp(ronin.line.ports.thickness.value, 1, 200) * 0.1
|
||||
ctx.strokeStyle = '#000'
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
}
|
||||
|
||||
function tween_positions(froms,tos,progress)
|
||||
{
|
||||
var a = [];
|
||||
for(pos_id in froms){
|
||||
var from = froms[pos_id];
|
||||
var to = tos[pos_id];
|
||||
a.push(tween_position(from,to,progress));
|
||||
function clamp (v, min, max) {
|
||||
return v < min ? min : v > max ? max : v
|
||||
}
|
||||
|
||||
function tween_positions (froms, tos, progress) {
|
||||
var a = []
|
||||
for (pos_id in froms) {
|
||||
var from = froms[pos_id]
|
||||
var to = tos[pos_id]
|
||||
a.push(tween_position(from, to, progress))
|
||||
}
|
||||
|
||||
return a;
|
||||
return a
|
||||
}
|
||||
|
||||
function tween_position(from,to,progress)
|
||||
{
|
||||
var offset = {x:to.x - from.x,y:to.y - from.y};
|
||||
return {x:from.x + offset.x * progress,y:from.y + offset.y * progress};
|
||||
function tween_position (from, to, progress) {
|
||||
var offset = { x: to.x - from.x, y: to.y - from.y }
|
||||
return { x: from.x + offset.x * progress, y: from.y + offset.y * progress }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,29 +1,27 @@
|
||||
function Magnet()
|
||||
{
|
||||
Module.call(this,"magnet","Cursor magnetisation settings, changes are reflected on the grid layer.");
|
||||
function Magnet () {
|
||||
Module.call(this, 'magnet', 'Cursor magnetisation settings, changes are reflected on the grid layer.')
|
||||
|
||||
this.size = 0;
|
||||
this.step = 4;
|
||||
this.size = 0
|
||||
this.step = 4
|
||||
|
||||
this.methods.lock = new Method("lock","10","Magnetize cursor",function(q){
|
||||
var size = parseInt(q);
|
||||
if(size < 5){ this.unlock(); return; }
|
||||
ronin.magnet.size = size;
|
||||
ronin.grid.draw(size,ronin.magnet.step);
|
||||
this.methods.lock = new Method('lock', '10', 'Magnetize cursor', function (q) {
|
||||
var size = parseInt(q)
|
||||
if (size < 5) { this.unlock(); return }
|
||||
ronin.magnet.size = size
|
||||
ronin.grid.draw(size, ronin.magnet.step)
|
||||
})
|
||||
|
||||
this.methods.unlock = new Method("unlock","","Release cursor",function(q){
|
||||
ronin.magnet.size = 0;
|
||||
ronin.grid.clear();
|
||||
this.methods.unlock = new Method('unlock', '', 'Release cursor', function (q) {
|
||||
ronin.magnet.size = 0
|
||||
ronin.grid.clear()
|
||||
})
|
||||
|
||||
this.filter = function(pos)
|
||||
{
|
||||
if(this.size < 5){
|
||||
return pos;
|
||||
this.filter = function (pos) {
|
||||
if (this.size < 5) {
|
||||
return pos
|
||||
}
|
||||
|
||||
var s = this.size;
|
||||
return {x:parseInt(pos.x/s)*s,y:parseInt(pos.y/s)*s};
|
||||
var s = this.size
|
||||
return { x: parseInt(pos.x / s) * s, y: parseInt(pos.y / s) * s }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,97 +1,90 @@
|
||||
function Path()
|
||||
{
|
||||
Module.call(this,"path","Trace lines and draw shapes.");
|
||||
function Path () {
|
||||
Module.call(this, 'path', 'Trace lines and draw shapes.')
|
||||
|
||||
this.settings = {cap:"square"};
|
||||
|
||||
this.methods.stroke = new Method("stroke","x,y&","",function(q){
|
||||
ronin.preview.clear();
|
||||
this.settings = { cap: 'square' }
|
||||
|
||||
var path = ronin.path.create_path(q);
|
||||
this.methods.stroke = new Method('stroke', 'x,y&', '', function (q) {
|
||||
ronin.preview.clear()
|
||||
|
||||
var ctx = ronin.cursor.target.context();
|
||||
var path = ronin.path.create_path(q)
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.lineCap = ronin.path.settings.cap;
|
||||
ctx.lineWidth = ronin.cursor.size;
|
||||
ctx.strokeStyle = ronin.cursor.color;
|
||||
ctx.stroke(new Path2D(path));
|
||||
ctx.closePath();
|
||||
});
|
||||
var ctx = ronin.cursor.target.context()
|
||||
|
||||
this.methods.fill = new Method("fill","x,y&","",function(q){
|
||||
ronin.preview.clear();
|
||||
ctx.beginPath()
|
||||
ctx.lineCap = ronin.path.settings.cap
|
||||
ctx.lineWidth = ronin.cursor.size
|
||||
ctx.strokeStyle = ronin.cursor.color
|
||||
ctx.stroke(new Path2D(path))
|
||||
ctx.closePath()
|
||||
})
|
||||
|
||||
var path = ronin.path.create_path(q);
|
||||
this.methods.fill = new Method('fill', 'x,y&', '', function (q) {
|
||||
ronin.preview.clear()
|
||||
|
||||
var ctx = ronin.cursor.target.context();
|
||||
var path = ronin.path.create_path(q)
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.lineCap = ronin.path.settings.cap;
|
||||
ctx.lineWidth = ronin.cursor.size;
|
||||
ctx.fillStyle = ronin.cursor.color;
|
||||
ctx.fill(new Path2D(path));
|
||||
ctx.closePath();
|
||||
});
|
||||
var ctx = ronin.cursor.target.context()
|
||||
|
||||
this.methods.svg = new Method("svg","M0,0 L100,100","",function(q){
|
||||
var path = ronin.commander.query().raw.replace("svg:","").trim();
|
||||
var ctx = ronin.cursor.target.context();
|
||||
ctx.beginPath();
|
||||
ctx.lineCap = ronin.path.settings.cap;
|
||||
ctx.lineWidth = ronin.cursor.size;
|
||||
ctx.strokeStyle = ronin.cursor.color;
|
||||
ctx.stroke(new Path2D(path));
|
||||
ctx.closePath();
|
||||
});
|
||||
ctx.beginPath()
|
||||
ctx.lineCap = ronin.path.settings.cap
|
||||
ctx.lineWidth = ronin.cursor.size
|
||||
ctx.fillStyle = ronin.cursor.color
|
||||
ctx.fill(new Path2D(path))
|
||||
ctx.closePath()
|
||||
})
|
||||
|
||||
this.preview = function(q)
|
||||
{
|
||||
if(!q.methods.stroke){ return; }
|
||||
this.methods.svg = new Method('svg', 'M0,0 L100,100', '', function (q) {
|
||||
var path = ronin.commander.query().raw.replace('svg:', '').trim()
|
||||
var ctx = ronin.cursor.target.context()
|
||||
ctx.beginPath()
|
||||
ctx.lineCap = ronin.path.settings.cap
|
||||
ctx.lineWidth = ronin.cursor.size
|
||||
ctx.strokeStyle = ronin.cursor.color
|
||||
ctx.stroke(new Path2D(path))
|
||||
ctx.closePath()
|
||||
})
|
||||
|
||||
ronin.preview.clear();
|
||||
var path = ronin.path.create_path(q.methods.stroke);
|
||||
this.preview = function (q) {
|
||||
if (!q.methods.stroke) { return }
|
||||
|
||||
var ctx = ronin.preview.context();
|
||||
ctx.beginPath();
|
||||
ctx.lineCap = ronin.path.settings.cap;
|
||||
ctx.lineWidth = ronin.cursor.size;
|
||||
ctx.strokeStyle = ronin.cursor.color;
|
||||
ctx.stroke(new Path2D(path));
|
||||
ctx.closePath();
|
||||
ronin.preview.clear()
|
||||
var path = ronin.path.create_path(q.methods.stroke)
|
||||
|
||||
var ctx = ronin.preview.context()
|
||||
ctx.beginPath()
|
||||
ctx.lineCap = ronin.path.settings.cap
|
||||
ctx.lineWidth = ronin.cursor.size
|
||||
ctx.strokeStyle = ronin.cursor.color
|
||||
ctx.stroke(new Path2D(path))
|
||||
ctx.closePath()
|
||||
}
|
||||
|
||||
this.create_path = function(q_array)
|
||||
{
|
||||
var svg_path = "";
|
||||
var prev = {x:0,y:0};
|
||||
for(q_id in q_array){
|
||||
var coord = q_array[q_id];
|
||||
if(!coord.x || !coord.y){ continue; }
|
||||
coord.x *= 2; coord.y *= 2;
|
||||
if(svg_path == ""){
|
||||
var origin = {x:coord.x,y:coord.y};
|
||||
svg_path += "M"+(coord.x)+","+(coord.y)+" ";
|
||||
this.create_path = function (q_array) {
|
||||
var svg_path = ''
|
||||
var prev = { x: 0, y: 0 }
|
||||
for (q_id in q_array) {
|
||||
var coord = q_array[q_id]
|
||||
if (!coord.x || !coord.y) { continue }
|
||||
coord.x *= 2; coord.y *= 2
|
||||
if (svg_path == '') {
|
||||
var origin = { x: coord.x, y: coord.y }
|
||||
svg_path += 'M' + (coord.x) + ',' + (coord.y) + ' '
|
||||
} else if (coord.clockwise == true) {
|
||||
var offset = make_offset(coord, prev)
|
||||
svg_path += 'a' + (offset.x) + ',' + (offset.y) + ' 0 0,1 ' + (offset.x) + ',' + (offset.y)
|
||||
} else if (coord.clockwise == false) {
|
||||
var offset = make_offset(coord, prev)
|
||||
svg_path += 'a' + (offset.x) + ',' + (offset.y) + ' 0 0,0 ' + (offset.x) + ',' + (offset.y)
|
||||
} else {
|
||||
var offset = make_offset(coord, prev)
|
||||
svg_path += 'l' + (offset.x) + ',' + (offset.y) + ' '
|
||||
}
|
||||
else if(coord.clockwise == true){
|
||||
var offset = make_offset(coord,prev);
|
||||
svg_path += "a"+(offset.x)+","+(offset.y)+" 0 0,1 "+(offset.x)+","+(offset.y);
|
||||
}
|
||||
else if(coord.clockwise == false){
|
||||
var offset = make_offset(coord,prev);
|
||||
svg_path += "a"+(offset.x)+","+(offset.y)+" 0 0,0 "+(offset.x)+","+(offset.y);
|
||||
}
|
||||
else{
|
||||
var offset = make_offset(coord,prev);
|
||||
svg_path += "l"+(offset.x)+","+(offset.y)+" ";
|
||||
}
|
||||
prev = coord;
|
||||
prev = coord
|
||||
}
|
||||
return svg_path;
|
||||
return svg_path
|
||||
}
|
||||
|
||||
function make_offset(a,b)
|
||||
{
|
||||
return {x:a.x-b.x,y:a.y-b.y};
|
||||
function make_offset (a, b) {
|
||||
return { x: a.x - b.x, y: a.y - b.y }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,31 +1,28 @@
|
||||
function Type()
|
||||
{
|
||||
Module.call(this,"type");
|
||||
function 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){
|
||||
|
||||
var rect = q[1];
|
||||
this.methods.write = new Method('write', 'text&x,y|WxH', 'Draw text', function (q) {
|
||||
var rect = q[1]
|
||||
var size = rect.height * 2
|
||||
ronin.preview.clear();
|
||||
ronin.preview.clear()
|
||||
|
||||
ronin.cursor.target.context().textAlign = ronin.type.settings.anchor;
|
||||
ronin.cursor.target.context().font = size+"px "+ronin.type.settings.font.replace("+"," ");
|
||||
ronin.cursor.target.context().fillText(q[0].replace("+"," "),rect.x * 2,(rect.y * 2)+size);
|
||||
ronin.cursor.target.context().textAlign = ronin.type.settings.anchor
|
||||
ronin.cursor.target.context().font = size + 'px ' + ronin.type.settings.font.replace('+', ' ')
|
||||
ronin.cursor.target.context().fillText(q[0].replace('+', ' '), rect.x * 2, (rect.y * 2) + size)
|
||||
})
|
||||
|
||||
this.preview = function(q)
|
||||
{
|
||||
if(!q.methods.write || !q.methods.write[1]){ return; }
|
||||
this.preview = function (q) {
|
||||
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
|
||||
|
||||
ronin.preview.clear();
|
||||
|
||||
ronin.preview.context().textAlign = this.settings.anchor;
|
||||
ronin.preview.context().font = size+"px "+this.settings.font.replace("+"," ");
|
||||
ronin.preview.context().fillText(q.methods.write[0].replace("+"," "),rect.x * 2,(rect.y * 2)+size);
|
||||
ronin.preview.clear()
|
||||
|
||||
ronin.preview.context().textAlign = this.settings.anchor
|
||||
ronin.preview.context().font = size + 'px ' + this.settings.font.replace('+', ' ')
|
||||
ronin.preview.context().fillText(q.methods.write[0].replace('+', ' '), rect.x * 2, (rect.y * 2) + size)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,149 +1,115 @@
|
||||
function Ronin()
|
||||
{
|
||||
this.el = document.createElement('yu');
|
||||
this.el.id = "ronin";
|
||||
function Ronin () {
|
||||
const defaultTheme = {
|
||||
background: '#eee',
|
||||
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.controller = new Controller();
|
||||
this.el = document.createElement('yu')
|
||||
this.el.id = 'ronin'
|
||||
|
||||
this.keyboard = new Keyboard();
|
||||
this.commander = new Commander();
|
||||
this.cursor = new Cursor();
|
||||
this.hint = new Hint();
|
||||
this.docs = new Docs();
|
||||
this.theme = new Theme(defaultTheme)
|
||||
|
||||
this.guide = new Guide();
|
||||
this.above = new Layer("above");
|
||||
this.below = new Layer("below");
|
||||
this.keyboard = new Keyboard()
|
||||
this.commander = new Commander()
|
||||
this.cursor = new Cursor()
|
||||
this.hint = new Hint()
|
||||
this.docs = new Docs()
|
||||
|
||||
this.io = new IO();
|
||||
this.brush = new Brush();
|
||||
this.frame = new Frame();
|
||||
this.path = new Path();
|
||||
this.filter = new Filter();
|
||||
this.type = new Type();
|
||||
this.guide = new Guide()
|
||||
this.above = new Layer('above')
|
||||
this.below = new Layer('below')
|
||||
|
||||
this.io = new IO()
|
||||
this.brush = new Brush()
|
||||
this.frame = new Frame()
|
||||
this.path = new Path()
|
||||
this.filter = new Filter()
|
||||
this.type = new Type()
|
||||
|
||||
this.layers = {
|
||||
guide : this.guide,
|
||||
above : this.above,
|
||||
below : this.below,
|
||||
cursor : this.cursor,
|
||||
guide : this.guide,
|
||||
};
|
||||
guide: this.guide,
|
||||
above: this.above,
|
||||
below: this.below,
|
||||
cursor: this.cursor,
|
||||
guide: this.guide
|
||||
}
|
||||
|
||||
this.modules = {
|
||||
brush : this.brush,
|
||||
frame : this.frame,
|
||||
io : this.io,
|
||||
path : this.path,
|
||||
filter : this.filter,
|
||||
type : this.type
|
||||
};
|
||||
|
||||
this.install = function()
|
||||
{
|
||||
this.theme.start();
|
||||
this.brush.swatch.start();
|
||||
brush: this.brush,
|
||||
frame: this.frame,
|
||||
io: this.io,
|
||||
path: this.path,
|
||||
filter: this.filter,
|
||||
type: this.type
|
||||
}
|
||||
|
||||
document.body.appendChild(this.el);
|
||||
this.install = function (host) {
|
||||
this.brush.swatch.start()
|
||||
|
||||
this.frame.width = window.innerWidth;
|
||||
this.frame.height = window.innerHeight;
|
||||
document.body.appendChild(this.el)
|
||||
|
||||
this.commander.install();
|
||||
this.frame.install();
|
||||
this.frame.width = window.innerWidth
|
||||
this.frame.height = window.innerHeight
|
||||
|
||||
this.cursor.target = this.layers.above;
|
||||
this.commander.install()
|
||||
this.frame.install()
|
||||
|
||||
this.cursor.target = this.layers.above
|
||||
|
||||
// this.guide.install();
|
||||
this.above.install();
|
||||
this.below.install();
|
||||
this.guide.install();
|
||||
this.above.install()
|
||||
this.below.install()
|
||||
this.guide.install()
|
||||
|
||||
this.guide.update();
|
||||
this.guide.update()
|
||||
|
||||
this.hint.install();
|
||||
|
||||
this.start();
|
||||
this.hint.install()
|
||||
this.theme.install(host, () => { this.update() })
|
||||
}
|
||||
|
||||
this.start = function()
|
||||
{
|
||||
this.controller.add("default","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Ronin'); },"CmdOrCtrl+,");
|
||||
this.controller.add("default","*","Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter");
|
||||
this.controller.add("default","*","Hide",() => { app.toggle_visible(); },"CmdOrCtrl+H");
|
||||
this.controller.add("default","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+.");
|
||||
this.controller.add("default","*","Documentation",() => { ronin.controller.docs(); },"CmdOrCtrl+Esc");
|
||||
this.controller.add("default","*","Reset",() => { ronin.reset(); },"CmdOrCtrl+Backspace");
|
||||
this.controller.add("default","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q");
|
||||
this.start = function () {
|
||||
this.theme.start()
|
||||
window.addEventListener('dragover', ronin.io.drag_over)
|
||||
window.addEventListener('drop', ronin.io.drop)
|
||||
ronin.frame.el.addEventListener('mousedown', ronin.cursor.mouse_down)
|
||||
ronin.frame.el.addEventListener('mousemove', ronin.cursor.mouse_move)
|
||||
ronin.frame.el.addEventListener('mouseup', ronin.cursor.mouse_up)
|
||||
ronin.frame.el.addEventListener('contextmenu', ronin.cursor.mouse_alt)
|
||||
window.addEventListener('keydown', ronin.keyboard.key_down)
|
||||
window.addEventListener('keyup', ronin.keyboard.key_up)
|
||||
ronin.commander.input_el.addEventListener('input', ronin.commander.on_input)
|
||||
|
||||
this.controller.add("default","File","New Image",() => { ronin.frame.methods.new.run(); },"CmdOrCtrl+N");
|
||||
this.controller.add("default","File","Open Image",() => { ronin.io.methods.open.run(); },"CmdOrCtrl+O");
|
||||
this.controller.add("default","File","Import Image",() => { ronin.io.methods.load.run(); },"CmdOrCtrl+I");
|
||||
this.controller.add("default","File","Render Image(PNG)",() => { ronin.io.methods.render.run(); },"CmdOrCtrl+R");
|
||||
this.controller.add("default","File","Save Images(PNGs)",() => { ronin.io.methods.save.run(); },"CmdOrCtrl+S");
|
||||
this.controller.add("default","File","Export Image(JPG)",() => { ronin.io.methods.export.run(); },"CmdOrCtrl+E");
|
||||
console.log('Ronin', 'Started')
|
||||
this.above.update()
|
||||
this.below.update()
|
||||
this.guide.update()
|
||||
this.commander.update()
|
||||
|
||||
this.controller.add_role("default","Edit","undo");
|
||||
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.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.frame.resize_to({ width: 900, height: 540 })
|
||||
|
||||
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.load()
|
||||
}
|
||||
|
||||
this.reset = function()
|
||||
{
|
||||
this.theme.reset();
|
||||
this.reset = function () {
|
||||
this.theme.reset()
|
||||
}
|
||||
|
||||
this.load = function(content = this.default())
|
||||
{
|
||||
this.update = function () {
|
||||
|
||||
}
|
||||
|
||||
this.default = function()
|
||||
{
|
||||
return "select_layer:below ; fill:#fff ; select_layer:above ; add_cursor:1,1 ; add_cursor:-1,-1"
|
||||
this.load = function (content = this.default()) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
this.default = function () {
|
||||
return 'select_layer:below ; fill:#fff ; select_layer:above ; add_cursor:1,1 ; add_cursor:-1,-1'
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,80 +1,127 @@
|
||||
function Theme()
|
||||
{
|
||||
var app = this;
|
||||
'use strict'
|
||||
|
||||
this.el = document.createElement("style");
|
||||
this.el.type = 'text/css';
|
||||
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;
|
||||
function Theme (_default) {
|
||||
const themer = this
|
||||
|
||||
this.start = function()
|
||||
{
|
||||
this.load(localStorage.theme ? localStorage.theme : this.default);
|
||||
window.addEventListener('dragover',this.drag_enter);
|
||||
window.addEventListener('drop', this.drag);
|
||||
document.head.appendChild(this.el)
|
||||
this.active = _default
|
||||
|
||||
this.el = document.createElement('style')
|
||||
this.el.type = 'text/css'
|
||||
|
||||
this.install = function (host = document.body, callback) {
|
||||
host.appendChild(this.el)
|
||||
this.callback = callback
|
||||
}
|
||||
|
||||
this.load = function(t)
|
||||
{
|
||||
var theme = is_json(t) ? JSON.parse(t) : t;
|
||||
|
||||
if(!theme.background){ return; }
|
||||
|
||||
var css = `
|
||||
: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};
|
||||
}`;
|
||||
|
||||
this.active = theme;
|
||||
this.el.textContent = css;
|
||||
localStorage.setItem("theme", JSON.stringify(theme));
|
||||
}
|
||||
|
||||
this.reset = function()
|
||||
{
|
||||
this.load(this.default);
|
||||
}
|
||||
|
||||
this.drag_enter = function(e)
|
||||
{
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
}
|
||||
|
||||
this.drag = function(e)
|
||||
{
|
||||
e.preventDefault();
|
||||
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)
|
||||
{
|
||||
try{
|
||||
JSON.parse(text);
|
||||
return true;
|
||||
this.start = function () {
|
||||
console.log('Theme', 'Starting..')
|
||||
if (isJson(localStorage.theme)) {
|
||||
const storage = JSON.parse(localStorage.theme)
|
||||
if (validate(storage)) {
|
||||
console.log('Theme', 'Loading localStorage..')
|
||||
this.load(storage)
|
||||
return
|
||||
}
|
||||
}
|
||||
catch (error){
|
||||
return false;
|
||||
this.load(_default)
|
||||
}
|
||||
|
||||
this.load = function (data) {
|
||||
const theme = parse(data)
|
||||
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.reset = function () {
|
||||
this.load(_default)
|
||||
}
|
||||
|
||||
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) }
|
||||
return null
|
||||
}
|
||||
|
||||
// Drag
|
||||
|
||||
this.drag = function (e) {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
e.dataTransfer.dropEffect = 'copy'
|
||||
}
|
||||
|
||||
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 }
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,63 +1,54 @@
|
||||
function Color(hex = '#000000', rgb)
|
||||
{
|
||||
if(rgb){
|
||||
this.rgb = rgb;
|
||||
this.hex = "#"+("0" + parseInt(rgb.r,10).toString(16)).slice(-2)+("0" + parseInt(rgb.g,10).toString(16)).slice(-2)+("0" + parseInt(rgb.b,10).toString(16)).slice(-2);
|
||||
}
|
||||
else{
|
||||
this.hex = hex;
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(this.hex);
|
||||
this.rgb = {r: parseInt(result[1], 16),g: parseInt(result[2], 16),b: parseInt(result[3], 16)}
|
||||
function Color (hex = '#000000', rgb) {
|
||||
if (rgb) {
|
||||
this.rgb = rgb
|
||||
this.hex = '#' + ('0' + parseInt(rgb.r, 10).toString(16)).slice(-2) + ('0' + parseInt(rgb.g, 10).toString(16)).slice(-2) + ('0' + parseInt(rgb.b, 10).toString(16)).slice(-2)
|
||||
} else {
|
||||
this.hex = hex
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(this.hex)
|
||||
this.rgb = { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) }
|
||||
}
|
||||
|
||||
this.r = this.rgb.r;
|
||||
this.g = this.rgb.g;
|
||||
this.b = this.rgb.b;
|
||||
this.r = this.rgb.r
|
||||
this.g = this.rgb.g
|
||||
this.b = this.rgb.b
|
||||
|
||||
this.average = parseInt((this.r + this.g + this.b)/3)
|
||||
this.invert = {r:255-this.rgb.r, g:255-this.rgb.g, b:255-this.rgb.b};
|
||||
|
||||
this.rgba = function()
|
||||
{
|
||||
return "rgba("+this.rgb().r+","+this.rgb().g+","+this.rgb().b+",1)";
|
||||
this.average = parseInt((this.r + this.g + this.b) / 3)
|
||||
this.invert = { r: 255 - this.rgb.r, g: 255 - this.rgb.g, b: 255 - this.rgb.b }
|
||||
|
||||
this.rgba = function () {
|
||||
return 'rgba(' + this.rgb().r + ',' + this.rgb().g + ',' + this.rgb().b + ',1)'
|
||||
}
|
||||
|
||||
this.floats = function()
|
||||
{
|
||||
var rgb = this.rgb;
|
||||
return { r:rgb.r/255, g:rgb.g/255, b:rgb.b/255 }
|
||||
}
|
||||
|
||||
this.render = function()
|
||||
{
|
||||
return this.hex;
|
||||
}
|
||||
|
||||
this.rgb_to_hex = function(rgb)
|
||||
{
|
||||
return "#"+("0" + parseInt(rgb[0],10).toString(16)).slice(-2)+("0" + parseInt(rgb[1],10).toString(16)).slice(-2)+("0" + parseInt(rgb[2],10).toString(16)).slice(-2);
|
||||
this.floats = function () {
|
||||
var rgb = this.rgb
|
||||
return { r: rgb.r / 255, g: rgb.g / 255, b: rgb.b / 255 }
|
||||
}
|
||||
|
||||
this.brightness = function()
|
||||
{
|
||||
return this.rgb() ? (this.rgb().r + this.rgb().g + this.rgb().b)/3 : 0;
|
||||
this.render = function () {
|
||||
return this.hex
|
||||
}
|
||||
|
||||
this.style = function()
|
||||
{
|
||||
return this.brightness() > 150 ? "bright" : "dark";
|
||||
this.rgb_to_hex = function (rgb) {
|
||||
return '#' + ('0' + parseInt(rgb[0], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2)
|
||||
}
|
||||
|
||||
this.tween = function(target,value)
|
||||
{
|
||||
var c1 = this.floats();
|
||||
var c2 = target.floats();
|
||||
|
||||
var r = ((255 * c1.r) * value) + ((255 * c2.r) * (1-value));
|
||||
var g = ((255 * c1.g) * value) + ((255 * c2.g) * (1-value));
|
||||
var b = ((255 * c1.b) * value) + ((255 * c2.b) * (1-value));
|
||||
var rgb = [parseInt(r),parseInt(g),parseInt(b)];
|
||||
var hex = new Color().rgb_to_hex(rgb);
|
||||
return hex;
|
||||
this.brightness = function () {
|
||||
return this.rgb() ? (this.rgb().r + this.rgb().g + this.rgb().b) / 3 : 0
|
||||
}
|
||||
}
|
||||
|
||||
this.style = function () {
|
||||
return this.brightness() > 150 ? 'bright' : 'dark'
|
||||
}
|
||||
|
||||
this.tween = function (target, value) {
|
||||
var c1 = this.floats()
|
||||
var c2 = target.floats()
|
||||
|
||||
var r = ((255 * c1.r) * value) + ((255 * c2.r) * (1 - value))
|
||||
var g = ((255 * c1.g) * value) + ((255 * c2.g) * (1 - value))
|
||||
var b = ((255 * c1.b) * value) + ((255 * c2.b) * (1 - value))
|
||||
var rgb = [parseInt(r), parseInt(g), parseInt(b)]
|
||||
var hex = new Color().rgb_to_hex(rgb)
|
||||
return hex
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user