From 64f58531562c505a015e930834ce01e89e9e4763 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Mon, 22 Apr 2019 08:49:47 +0900 Subject: [PATCH] Cleanup in progress --- desktop/.eslintrc.json | 2 +- desktop/main.js | 2 +- desktop/package.json | 2 +- desktop/sources/index.html | 152 +++++++++++----------- desktop/sources/scripts/cursor.js | 32 ++--- desktop/sources/scripts/dotgrid.js | 112 +++++----------- desktop/sources/scripts/generator.js | 6 +- desktop/sources/scripts/interface.js | 10 +- desktop/sources/scripts/lib/controller.js | 2 +- desktop/sources/scripts/manager.js | 20 +-- desktop/sources/scripts/picker.js | 20 +-- desktop/sources/scripts/source.js | 45 +++++++ desktop/sources/scripts/tool.js | 2 +- index.html | 5 +- web/events.js | 62 ++++----- 15 files changed, 241 insertions(+), 233 deletions(-) create mode 100644 desktop/sources/scripts/source.js diff --git a/desktop/.eslintrc.json b/desktop/.eslintrc.json index 461c71d..1e72195 100644 --- a/desktop/.eslintrc.json +++ b/desktop/.eslintrc.json @@ -5,6 +5,6 @@ "node": true }, "globals": { - "DOTGRID": true + "dotgrid": true } } diff --git a/desktop/main.js b/desktop/main.js index 685764f..3b79e80 100644 --- a/desktop/main.js +++ b/desktop/main.js @@ -24,7 +24,7 @@ app.on('ready', () => { }) app.win.loadURL(`file://${__dirname}/sources/index.html`) - // app.inspect() + app.inspect() app.win.on('closed', () => { win = null diff --git a/desktop/package.json b/desktop/package.json index f33c16e..3979269 100644 --- a/desktop/package.json +++ b/desktop/package.json @@ -32,7 +32,7 @@ "dependencies": {}, "standard": { "globals": [ - "DOTGRID" + "dotgrid" ] } } diff --git a/desktop/sources/index.html b/desktop/sources/index.html index ba5c8e0..3dca48d 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -11,6 +11,7 @@ + @@ -33,94 +34,97 @@ const {dialog,app} = require('electron').remote; const fs = require('fs'); - DOTGRID.controller = new Controller(); + const dotgrid = new Dotgrid() + + dotgrid.controller = new Controller(); - DOTGRID.controller.add("default","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,"); - DOTGRID.controller.add("default","*","Fullscreen",() => { app.toggleFullscreen(); },"CmdOrCtrl+Enter"); - DOTGRID.controller.add("default","*","Hide",() => { app.toggleVisible(); },"CmdOrCtrl+H"); - DOTGRID.controller.add("default","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+."); - DOTGRID.controller.add("default","*","Reset",() => { DOTGRID.reset(); DOTGRID.theme.reset(); },"CmdOrCtrl+Backspace"); - DOTGRID.controller.add("default","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q"); + dotgrid.controller.add("default","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,"); + dotgrid.controller.add("default","*","Fullscreen",() => { app.toggleFullscreen(); },"CmdOrCtrl+Enter"); + dotgrid.controller.add("default","*","Hide",() => { app.toggleVisible(); },"CmdOrCtrl+H"); + dotgrid.controller.add("default","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+."); + dotgrid.controller.add("default","*","Reset",() => { dotgrid.reset(); dotgrid.theme.reset(); },"CmdOrCtrl+Backspace"); + dotgrid.controller.add("default","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q"); - DOTGRID.controller.add("default","File","New",() => { DOTGRID.new(); },"CmdOrCtrl+N"); - DOTGRID.controller.add("default","File","Open",() => { DOTGRID.open(); },"CmdOrCtrl+O"); - DOTGRID.controller.add("default","File","Save(.grid)",() => { DOTGRID.save(); },"CmdOrCtrl+S"); - DOTGRID.controller.add("default","File","Render(.png)",() => { DOTGRID.render(); },"CmdOrCtrl+R"); - DOTGRID.controller.add("default","File","Export(.svg)",() => { DOTGRID.export(); },"CmdOrCtrl+E"); + dotgrid.controller.add("default","File","New",() => { dotgrid.source.new(); },"CmdOrCtrl+N"); + dotgrid.controller.add("default","File","Open",() => { dotgrid.source.open(); },"CmdOrCtrl+O"); + dotgrid.controller.add("default","File","Save(.grid)",() => { dotgrid.source.save(); },"CmdOrCtrl+S"); + dotgrid.controller.add("default","File","Render(.png)",() => { dotgrid.source.render(); },"CmdOrCtrl+R"); + dotgrid.controller.add("default","File","Export(.svg)",() => { dotgrid.source.export(); },"CmdOrCtrl+E"); - DOTGRID.controller.add_role("default","Edit","copy"); - DOTGRID.controller.add_role("default","Edit","cut"); - DOTGRID.controller.add_role("default","Edit","paste"); - DOTGRID.controller.add("default","Edit","Undo",() => { DOTGRID.tool.undo() },"CmdOrCtrl+Z"); - DOTGRID.controller.add("default","Edit","Redo",() => { DOTGRID.tool.redo() },"CmdOrCtrl+Shift+Z"); + dotgrid.controller.addRole("default","Edit","copy"); + dotgrid.controller.addRole("default","Edit","cut"); + dotgrid.controller.addRole("default","Edit","paste"); + dotgrid.controller.add("default","Edit","Undo",() => { dotgrid.tool.undo() },"CmdOrCtrl+Z"); + dotgrid.controller.add("default","Edit","Redo",() => { dotgrid.tool.redo() },"CmdOrCtrl+Shift+Z"); - DOTGRID.controller.add("default","Stroke","Line",() => { DOTGRID.tool.cast("line"); },"A"); - DOTGRID.controller.add("default","Stroke","Arc",() => { DOTGRID.tool.cast("arc_c"); },"S"); // 0,1 - DOTGRID.controller.add("default","Stroke","Arc Rev",() => { DOTGRID.tool.cast("arc_r")},"D"); // 0,0 - DOTGRID.controller.add("default","Stroke","Bezier",() => { DOTGRID.tool.cast("bezier") },"F"); - DOTGRID.controller.add("default","Stroke","Close",() => { DOTGRID.tool.cast("close") },"Z"); - DOTGRID.controller.add("default","Stroke","Arc(full)",() => { DOTGRID.tool.cast("arc_c_full"); },"T"); // 1,1 - DOTGRID.controller.add("default","Stroke","Arc Rev(full)",() => { DOTGRID.tool.cast("arc_r_full")},"Y"); // 1,0 - DOTGRID.controller.add("default","Stroke","Clear Selection",() => { DOTGRID.tool.clear(); },"Escape"); + dotgrid.controller.add("default","Stroke","Line",() => { dotgrid.tool.cast("line"); },"A"); + dotgrid.controller.add("default","Stroke","Arc",() => { dotgrid.tool.cast("arc_c"); },"S"); // 0,1 + dotgrid.controller.add("default","Stroke","Arc Rev",() => { dotgrid.tool.cast("arc_r")},"D"); // 0,0 + dotgrid.controller.add("default","Stroke","Bezier",() => { dotgrid.tool.cast("bezier") },"F"); + dotgrid.controller.add("default","Stroke","Close",() => { dotgrid.tool.cast("close") },"Z"); + dotgrid.controller.add("default","Stroke","Arc(full)",() => { dotgrid.tool.cast("arc_c_full"); },"T"); // 1,1 + dotgrid.controller.add("default","Stroke","Arc Rev(full)",() => { dotgrid.tool.cast("arc_r_full")},"Y"); // 1,0 + dotgrid.controller.add("default","Stroke","Clear Selection",() => { dotgrid.tool.clear(); },"Escape"); - DOTGRID.controller.add("default","Effect","Linecap",() => { DOTGRID.tool.toggle("linecap"); },"Q"); - DOTGRID.controller.add("default","Effect","Linejoin",() => { DOTGRID.tool.toggle("linejoin"); },"W"); - DOTGRID.controller.add("default","Effect","Mirror",() => { DOTGRID.tool.toggle("mirror"); },"E"); - DOTGRID.controller.add("default","Effect","Fill",() => { DOTGRID.tool.toggle("fill"); },"R"); - DOTGRID.controller.add("default","Effect","Thicker",() => { DOTGRID.tool.toggle("thickness",1) },"}"); - DOTGRID.controller.add("default","Effect","Thinner",() => { DOTGRID.tool.toggle("thickness",-1) },"{"); - DOTGRID.controller.add("default","Effect","Thicker +5",() => { DOTGRID.tool.toggle("thickness",5) },"]"); - DOTGRID.controller.add("default","Effect","Thinner -5",() => { DOTGRID.tool.toggle("thickness",-5) },"["); - DOTGRID.controller.add("default","Effect","Toggle Crest",() => { DOTGRID.tool.toggleCrest(); }, "CmdOrCtrl+K"); + dotgrid.controller.add("default","Effect","Linecap",() => { dotgrid.tool.toggle("linecap"); },"Q"); + dotgrid.controller.add("default","Effect","Linejoin",() => { dotgrid.tool.toggle("linejoin"); },"W"); + dotgrid.controller.add("default","Effect","Mirror",() => { dotgrid.tool.toggle("mirror"); },"E"); + dotgrid.controller.add("default","Effect","Fill",() => { dotgrid.tool.toggle("fill"); },"R"); + dotgrid.controller.add("default","Effect","Thicker",() => { dotgrid.tool.toggle("thickness",1) },"}"); + dotgrid.controller.add("default","Effect","Thinner",() => { dotgrid.tool.toggle("thickness",-1) },"{"); + dotgrid.controller.add("default","Effect","Thicker +5",() => { dotgrid.tool.toggle("thickness",5) },"]"); + dotgrid.controller.add("default","Effect","Thinner -5",() => { dotgrid.tool.toggle("thickness",-5) },"["); + dotgrid.controller.add("default","Effect","Toggle Crest",() => { dotgrid.tool.toggleCrest(); }, "CmdOrCtrl+K"); - DOTGRID.controller.add("default","Manual","Add Point",() => { DOTGRID.tool.addVertex(DOTGRID.cursor.pos); DOTGRID.renderer.update() },"Enter"); - DOTGRID.controller.add("default","Manual","Move Up",() => { DOTGRID.cursor.pos.y -= 15; DOTGRID.renderer.update() },"Up"); - DOTGRID.controller.add("default","Manual","Move Right",() => { DOTGRID.cursor.pos.x += 15; DOTGRID.renderer.update() },"Right"); - DOTGRID.controller.add("default","Manual","Move Down",() => { DOTGRID.cursor.pos.y += 15; DOTGRID.renderer.update() },"Down"); - DOTGRID.controller.add("default","Manual","Move Left",() => { DOTGRID.cursor.pos.x -= 15; DOTGRID.renderer.update() },"Left"); - DOTGRID.controller.add("default","Manual","Remove Point",() => { DOTGRID.tool.removeSegmentsAt(DOTGRID.cursor.pos); },"Shift+Backspace"); - DOTGRID.controller.add("default","Manual","Remove Segment",() => { DOTGRID.tool.removeSegment(); },"Backspace"); + dotgrid.controller.add("default","Manual","Add Point",() => { dotgrid.tool.addVertex(dotgrid.cursor.pos); dotgrid.renderer.update() },"Enter"); + dotgrid.controller.add("default","Manual","Move Up",() => { dotgrid.cursor.pos.y -= 15; dotgrid.renderer.update() },"Up"); + dotgrid.controller.add("default","Manual","Move Right",() => { dotgrid.cursor.pos.x += 15; dotgrid.renderer.update() },"Right"); + dotgrid.controller.add("default","Manual","Move Down",() => { dotgrid.cursor.pos.y += 15; dotgrid.renderer.update() },"Down"); + dotgrid.controller.add("default","Manual","Move Left",() => { dotgrid.cursor.pos.x -= 15; dotgrid.renderer.update() },"Left"); + dotgrid.controller.add("default","Manual","Remove Point",() => { dotgrid.tool.removeSegmentsAt(dotgrid.cursor.pos); },"Shift+Backspace"); + dotgrid.controller.add("default","Manual","Remove Segment",() => { dotgrid.tool.removeSegment(); },"Backspace"); - DOTGRID.controller.add("default","Layers","Foreground",() => { DOTGRID.tool.selectLayer(0) },"CmdOrCtrl+1"); - DOTGRID.controller.add("default","Layers","Middleground",() => { DOTGRID.tool.selectLayer(1) },"CmdOrCtrl+2"); - DOTGRID.controller.add("default","Layers","Background",() => { DOTGRID.tool.selectLayer(2) },"CmdOrCtrl+3"); - DOTGRID.controller.add("default","Layers","Next Layer",() => { DOTGRID.tool.selectNextLayer() }); - DOTGRID.controller.add("default","Layers","Prev Layer",() => { DOTGRID.tool.selectPrevLayer() }); - DOTGRID.controller.add("default","Layers","Merge Layers",() => { DOTGRID.tool.merge() },"M"); + dotgrid.controller.add("default","Layers","Foreground",() => { dotgrid.tool.selectLayer(0) },"CmdOrCtrl+1"); + dotgrid.controller.add("default","Layers","Middleground",() => { dotgrid.tool.selectLayer(1) },"CmdOrCtrl+2"); + dotgrid.controller.add("default","Layers","Background",() => { dotgrid.tool.selectLayer(2) },"CmdOrCtrl+3"); + dotgrid.controller.add("default","Layers","Next Layer",() => { dotgrid.tool.selectNextLayer() }); + dotgrid.controller.add("default","Layers","Prev Layer",() => { dotgrid.tool.selectPrevLayer() }); + dotgrid.controller.add("default","Layers","Merge Layers",() => { dotgrid.tool.merge() },"M"); - DOTGRID.controller.add("default","View","Zoom In",() => { DOTGRID.modZoom(0.25) },"CmdOrCtrl+=") - DOTGRID.controller.add("default","View","Zoom Out",() => { DOTGRID.modZoom(-0.25) },"CmdOrCtrl+-") - DOTGRID.controller.add("default","View","Zoom Reset",() => { DOTGRID.modZoom(1,true) },"CmdOrCtrl+0") - DOTGRID.controller.add("default","View","Color Picker",() => { DOTGRID.picker.start(); },"G"); - DOTGRID.controller.add("default","View","Toggle Grid",() => { DOTGRID.renderer.toggle(); },"H"); - DOTGRID.controller.add("default","View","Toggle Interface",() => { DOTGRID.interface.toggle(); },"Tab"); + dotgrid.controller.add("default","View","Zoom In",() => { dotgrid.modZoom(0.25) },"CmdOrCtrl+=") + dotgrid.controller.add("default","View","Zoom Out",() => { dotgrid.modZoom(-0.25) },"CmdOrCtrl+-") + dotgrid.controller.add("default","View","Zoom Reset",() => { dotgrid.modZoom(1,true) },"CmdOrCtrl+0") + dotgrid.controller.add("default","View","Color Picker",() => { dotgrid.picker.start(); },"G"); + dotgrid.controller.add("default","View","Toggle Grid",() => { dotgrid.renderer.toggle(); },"H"); + dotgrid.controller.add("default","View","Toggle Interface",() => { dotgrid.interface.toggle(); },"Tab"); - DOTGRID.controller.add("default","Theme","Open Theme",() => { DOTGRID.theme.open(); },"CmdOrCtrl+Shift+o") - DOTGRID.controller.add("default","Theme","Reset Theme",() => { DOTGRID.theme.reset(); },"CmdOrCtrl+Shift+Backspace") - DOTGRID.controller.add("default","Theme","Download Themes..",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes'); }) + dotgrid.controller.add("default","Theme","Open Theme",() => { dotgrid.theme.open(); },"CmdOrCtrl+Shift+o") + dotgrid.controller.add("default","Theme","Reset Theme",() => { dotgrid.theme.reset(); },"CmdOrCtrl+Shift+Backspace") + dotgrid.controller.add("default","Theme","Download Themes..",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes'); }) - DOTGRID.controller.add("picker","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,"); - DOTGRID.controller.add("picker","*","Fullscreen",() => { app.toggleFullscreen(); },"CmdOrCtrl+Enter"); - DOTGRID.controller.add("picker","*","Hide",() => { app.toggleVisible(); },"CmdOrCtrl+H"); - DOTGRID.controller.add("picker","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+."); - DOTGRID.controller.add("picker","*","Documentation",() => { DOTGRID.controller.docs(); },"CmdOrCtrl+Esc"); - DOTGRID.controller.add("picker","*","Reset",() => { DOTGRID.reset(); DOTGRID.theme.reset(); },"CmdOrCtrl+Backspace"); - DOTGRID.controller.add("picker","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q"); + dotgrid.controller.add("picker","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,"); + dotgrid.controller.add("picker","*","Fullscreen",() => { app.toggleFullscreen(); },"CmdOrCtrl+Enter"); + dotgrid.controller.add("picker","*","Hide",() => { app.toggleVisible(); },"CmdOrCtrl+H"); + dotgrid.controller.add("picker","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+."); + dotgrid.controller.add("picker","*","Documentation",() => { dotgrid.controller.docs(); },"CmdOrCtrl+Esc"); + dotgrid.controller.add("picker","*","Reset",() => { dotgrid.reset(); dotgrid.theme.reset(); },"CmdOrCtrl+Backspace"); + dotgrid.controller.add("picker","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q"); - DOTGRID.controller.add_role("picker","Edit","undo"); - DOTGRID.controller.add_role("picker","Edit","redo"); - DOTGRID.controller.add_role("picker","Edit","cut"); - DOTGRID.controller.add_role("picker","Edit","copy"); - DOTGRID.controller.add_role("picker","Edit","paste"); - DOTGRID.controller.add_role("picker","Edit","delete"); - DOTGRID.controller.add_role("picker","Edit","selectall"); + dotgrid.controller.addRole("picker","Edit","undo"); + dotgrid.controller.addRole("picker","Edit","redo"); + dotgrid.controller.addRole("picker","Edit","cut"); + dotgrid.controller.addRole("picker","Edit","copy"); + dotgrid.controller.addRole("picker","Edit","paste"); + dotgrid.controller.addRole("picker","Edit","delete"); + dotgrid.controller.addRole("picker","Edit","selectall"); - DOTGRID.controller.add("picker","Mode","Stop Picker Mode",() => { DOTGRID.picker.stop(); },"Escape"); + dotgrid.controller.add("picker","Mode","Stop Picker Mode",() => { dotgrid.picker.stop(); },"Escape"); - DOTGRID.controller.commit(); + dotgrid.controller.commit(); - DOTGRID.install(document.body); - DOTGRID.start(); + dotgrid.install(document.body); + + window.addEventListener('load', () => { dotgrid.start(); }) diff --git a/desktop/sources/scripts/cursor.js b/desktop/sources/scripts/cursor.js index 8c8d2fe..223b9e9 100644 --- a/desktop/sources/scripts/cursor.js +++ b/desktop/sources/scripts/cursor.js @@ -20,12 +20,12 @@ function Cursor () { this.pos = this.atEvent(e) // Translation - if (DOTGRID.tool.vertexAt(this.pos)) { + if (dotgrid.tool.vertexAt(this.pos)) { this.translate(this.pos, this.pos, e.shiftKey, e.ctrlKey || e.metaKey, e.altKey) } - DOTGRID.renderer.update() - DOTGRID.interface.update() + dotgrid.renderer.update() + dotgrid.interface.update() e.preventDefault() } @@ -40,10 +40,10 @@ function Cursor () { } if (this.last_pos.x !== this.pos.x || this.last_pos.y !== this.pos.y) { - DOTGRID.renderer.update() + dotgrid.renderer.update() } - DOTGRID.interface.update() + dotgrid.interface.update() e.preventDefault() this.last_pos = this.pos @@ -53,26 +53,26 @@ function Cursor () { this.pos = this.atEvent(e) if (this.translation && !isEqual(this.translation.from, this.translation.to)) { - if (this.translation.layer === true) { DOTGRID.tool.translateLayer(this.translation.from, this.translation.to) } else if (this.translation.copy) { DOTGRID.tool.translateCopy(this.translation.from, this.translation.to) } else if (this.translation.multi) { DOTGRID.tool.translateMulti(this.translation.from, this.translation.to) } else { DOTGRID.tool.translate(this.translation.from, this.translation.to) } + if (this.translation.layer === true) { dotgrid.tool.translateLayer(this.translation.from, this.translation.to) } else if (this.translation.copy) { dotgrid.tool.translateCopy(this.translation.from, this.translation.to) } else if (this.translation.multi) { dotgrid.tool.translateMulti(this.translation.from, this.translation.to) } else { dotgrid.tool.translate(this.translation.from, this.translation.to) } } else if (e.target.id === 'guide') { - DOTGRID.tool.addVertex({ x: this.pos.x, y: this.pos.y }) - DOTGRID.picker.stop() + dotgrid.tool.addVertex({ x: this.pos.x, y: this.pos.y }) + dotgrid.picker.stop() } this.translate() - DOTGRID.interface.update() - DOTGRID.renderer.update() + dotgrid.interface.update() + dotgrid.renderer.update() e.preventDefault() } this.alt = function (e) { this.pos = this.atEvent(e) - DOTGRID.tool.removeSegmentsAt(this.pos) + dotgrid.tool.removeSegmentsAt(this.pos) e.preventDefault() - setTimeout(() => { DOTGRID.tool.clear() }, 150) + setTimeout(() => { dotgrid.tool.clear() }, 150) } // Position Mods @@ -83,15 +83,15 @@ function Cursor () { this.relativePos = function (pos) { return { - x: pos.x - DOTGRID.renderer.el.offsetLeft, - y: pos.y - DOTGRID.renderer.el.offsetTop + x: pos.x - dotgrid.renderer.el.offsetLeft, + y: pos.y - dotgrid.renderer.el.offsetTop } } this.snapPos = function (pos) { return { - x: clamp(step(pos.x, 15), 15, DOTGRID.tool.settings.size.width), - y: clamp(step(pos.y, 15), 15, DOTGRID.tool.settings.size.height) + x: clamp(step(pos.x, 15), 15, dotgrid.tool.settings.size.width), + y: clamp(step(pos.y, 15), 15, dotgrid.tool.settings.size.height) } } diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 84b0c9d..6589691 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -18,6 +18,8 @@ function Dotgrid () { this.install = function (host) { this.theme = new Theme(defaultTheme) this.history = new History() + + this.source = new Source(this) this.manager = new Manager(this) this.renderer = new Renderer(this) this.tool = new Tool(this) @@ -39,25 +41,25 @@ function Dotgrid () { this.renderer.start() this.interface.start() - document.addEventListener('mousedown', function (e) { DOTGRID.cursor.down(e) }, false) - document.addEventListener('mousemove', function (e) { DOTGRID.cursor.move(e) }, false) - document.addEventListener('contextmenu', function (e) { DOTGRID.cursor.alt(e) }, false) - document.addEventListener('mouseup', function (e) { DOTGRID.cursor.up(e) }, false) - document.addEventListener('copy', function (e) { DOTGRID.copy(e) }, false) - document.addEventListener('cut', function (e) { DOTGRID.cut(e) }, false) - document.addEventListener('paste', function (e) { DOTGRID.paste(e) }, false) - window.addEventListener('drop', DOTGRID.drag) + document.addEventListener('mousedown', function (e) { dotgrid.cursor.down(e) }, false) + document.addEventListener('mousemove', function (e) { dotgrid.cursor.move(e) }, false) + document.addEventListener('contextmenu', function (e) { dotgrid.cursor.alt(e) }, false) + document.addEventListener('mouseup', function (e) { dotgrid.cursor.up(e) }, false) + document.addEventListener('copy', function (e) { dotgrid.copy(e) }, false) + document.addEventListener('cut', function (e) { dotgrid.cut(e) }, false) + document.addEventListener('paste', function (e) { dotgrid.paste(e) }, false) + window.addEventListener('drop', dotgrid.drag) - this.new() + this.source.new() setTimeout(() => { document.body.className += ' ready' }, 250) } this.update = function () { - DOTGRID.resize() - DOTGRID.manager.update() - DOTGRID.interface.update() - DOTGRID.renderer.update() + this.resize() + this.manager.update() + this.interface.update() + this.renderer.update() } this.clear = function () { @@ -73,50 +75,6 @@ function Dotgrid () { this.update() } - // File - - this.new = function () { - this.setZoom(1.0) - this.history.push(this.tool.layers) - this.clear() - } - - this.open = function () { - if (!dialog) { return } - - const paths = dialog.showOpenDialog({ properties: ['openFile'], filters: [{ name: 'Dotgrid Image', extensions: ['dot', 'grid'] }] }) - - if (!paths) { console.warn('Nothing to load'); return } - - fs.readFile(paths[0], 'utf-8', (err, data) => { - if (err) { alert('An error ocurred reading the file :' + err.message); return } - this.tool.replace(JSON.parse(data.toString().trim())) - this.renderer.update() - }) - } - - this.save = function () { - if (DOTGRID.tool.length() < 1) { console.warn('Nothing to save'); return } - this.manager.toGRID(grab) - } - - this.export = function () { - if (DOTGRID.tool.length() < 1) { console.warn('Nothing to export'); return } - this.manager.toSVG(grab) - } - - this.render = function () { - if (DOTGRID.tool.length() < 1) { console.warn('Nothing to render'); return } - this.manager.toPNG({ width: DOTGRID.tool.settings.size.width * 2, height: DOTGRID.tool.settings.size.height * 2 }, grab) - } - - function grab (base64, name) { - const link = document.createElement('a') - link.setAttribute('href', base64) - link.setAttribute('download', name) - link.dispatchEvent(new MouseEvent(`click`, { bubbles: true, cancelable: true, view: window })) - } - // Basics this.getSize = function () { @@ -132,6 +90,8 @@ function Dotgrid () { this.tool.settings.size.width = size.width this.tool.settings.size.height = size.height + console.log(this.tool.settings.size) + try { const win = require('electron').remote.getCurrentWindow() win.setSize((size.width + 100) * scale, (size.height + 100) * scale, false) @@ -196,39 +156,39 @@ function Dotgrid () { reader.onload = function (e) { const data = e.target && e.target.result ? e.target.result : '' if (data && !isJson(data)) { return } - DOTGRID.tool.replace(JSON.parse(`${data}`)) - DOTGRID.renderer.update() + dotgrid.tool.replace(JSON.parse(`${data}`)) + dotgrid.renderer.update() } reader.readAsText(file) } this.copy = function (e) { - DOTGRID.renderer.update() + dotgrid.renderer.update() if (e.target !== this.picker.input) { - e.clipboardData.setData('text/source', DOTGRID.tool.export(DOTGRID.tool.layer())) - e.clipboardData.setData('text/plain', DOTGRID.tool.path()) - e.clipboardData.setData('text/html', DOTGRID.manager.el.outerHTML) - e.clipboardData.setData('text/svg+xml', DOTGRID.manager.el.outerHTML) + e.clipboardData.setData('text/source', dotgrid.tool.export(dotgrid.tool.layer())) + e.clipboardData.setData('text/plain', dotgrid.tool.path()) + e.clipboardData.setData('text/html', dotgrid.manager.el.outerHTML) + e.clipboardData.setData('text/svg+xml', dotgrid.manager.el.outerHTML) e.preventDefault() } - DOTGRID.renderer.update() + dotgrid.renderer.update() } this.cut = function (e) { - DOTGRID.renderer.update() + dotgrid.renderer.update() if (e.target !== this.picker.input) { - e.clipboardData.setData('text/source', DOTGRID.tool.export(DOTGRID.tool.layer())) - e.clipboardData.setData('text/plain', DOTGRID.tool.export(DOTGRID.tool.layer())) - e.clipboardData.setData('text/html', DOTGRID.manager.el.outerHTML) - e.clipboardData.setData('text/svg+xml', DOTGRID.manager.el.outerHTML) - DOTGRID.tool.layers[DOTGRID.tool.index] = [] + e.clipboardData.setData('text/source', dotgrid.tool.export(dotgrid.tool.layer())) + e.clipboardData.setData('text/plain', dotgrid.tool.export(dotgrid.tool.layer())) + e.clipboardData.setData('text/html', dotgrid.manager.el.outerHTML) + e.clipboardData.setData('text/svg+xml', dotgrid.manager.el.outerHTML) + dotgrid.tool.layers[dotgrid.tool.index] = [] e.preventDefault() } - DOTGRID.renderer.update() + dotgrid.renderer.update() } this.paste = function (e) { @@ -236,17 +196,17 @@ function Dotgrid () { let data = e.clipboardData.getData('text/source') if (isJson(data)) { data = JSON.parse(data.trim()) - DOTGRID.tool.import(data) + dotgrid.tool.import(data) } e.preventDefault() } - DOTGRID.renderer.update() + dotgrid.renderer.update() } } window.addEventListener('resize', function (e) { - DOTGRID.update() + dotgrid.update() }, false) window.addEventListener('dragover', function (e) { @@ -263,5 +223,3 @@ function isJson (text) { try { JSON.parse(text); return true } catch (error) { r function isEqual (a, b) { return a && b && a.x === b.x && a.y === b.y } function clamp (v, min, max) { return v < min ? min : v > max ? max : v } function step (v, s) { return Math.round(v / s) * s } - -const DOTGRID = new Dotgrid() diff --git a/desktop/sources/scripts/generator.js b/desktop/sources/scripts/generator.js index bf98c8c..5057795 100644 --- a/desktop/sources/scripts/generator.js +++ b/desktop/sources/scripts/generator.js @@ -10,15 +10,15 @@ function Generator (layer, style) { for (const k1 in l) { const seg = l[k1] for (const k2 in seg.vertices) { - if (mirror === 1 || mirror === 3) { seg.vertices[k2].x = (DOTGRID.tool.settings.size.width) - seg.vertices[k2].x + 15 } - if (mirror === 2 || mirror === 3) { seg.vertices[k2].y = (DOTGRID.tool.settings.size.height) - seg.vertices[k2].y + 15 } + if (mirror === 1 || mirror === 3) { seg.vertices[k2].x = (dotgrid.tool.settings.size.width) - seg.vertices[k2].x + 15 } + if (mirror === 2 || mirror === 3) { seg.vertices[k2].y = (dotgrid.tool.settings.size.height) - seg.vertices[k2].y + 15 } // Offset seg.vertices[k2].x += offset.x seg.vertices[k2].y += offset.y // Rotate - const center = { x: (DOTGRID.tool.settings.size.width / 2) + offset.x + (7.5), y: (DOTGRID.tool.settings.size.height / 2) + offset.y + 30 } + const center = { x: (dotgrid.tool.settings.size.width / 2) + offset.x + (7.5), y: (dotgrid.tool.settings.size.height / 2) + offset.y + 30 } seg.vertices[k2] = rotatePoint(seg.vertices[k2], center, angle) // Scale diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js index 5467032..fbe8d8e 100644 --- a/desktop/sources/scripts/interface.js +++ b/desktop/sources/scripts/interface.js @@ -51,10 +51,10 @@ function Interface (dotgrid) { ${name === 'depth' ? `` : ''} @@ -148,7 +148,7 @@ function Interface (dotgrid) { document.onkeydown = function (e) { if (e.key === 'Tab') { - DOTGRID.interface.toggle() + dotgrid.interface.toggle() e.preventDefault() } } diff --git a/desktop/sources/scripts/lib/controller.js b/desktop/sources/scripts/lib/controller.js index c7ed963..44f7f1c 100644 --- a/desktop/sources/scripts/lib/controller.js +++ b/desktop/sources/scripts/lib/controller.js @@ -18,7 +18,7 @@ function Controller () { this.menu[mode][cat][label] = { fn: fn, accelerator: accelerator } } - this.add_role = function (mode, cat, label) { + this.addRole = function (mode, cat, label) { if (!this.menu[mode]) { this.menu[mode] = {} } if (!this.menu[mode][cat]) { this.menu[mode][cat] = {} } this.menu[mode][cat][label] = { role: label } diff --git a/desktop/sources/scripts/manager.js b/desktop/sources/scripts/manager.js index 43dcc41..101382d 100644 --- a/desktop/sources/scripts/manager.js +++ b/desktop/sources/scripts/manager.js @@ -19,23 +19,23 @@ function Manager (dotgrid) { } this.update = function () { - this.el.setAttribute('width', (DOTGRID.tool.settings.size.width + 15) + 'px') - this.el.setAttribute('height', (DOTGRID.tool.settings.size.height + 15) + 'px') - this.el.style.width = (DOTGRID.tool.settings.size.width + 15) - this.el.style.height = DOTGRID.tool.settings.size.height + 15 + this.el.setAttribute('width', (dotgrid.tool.settings.size.width + 15) + 'px') + this.el.setAttribute('height', (dotgrid.tool.settings.size.height + 15) + 'px') + this.el.style.width = (dotgrid.tool.settings.size.width + 15) + this.el.style.height = dotgrid.tool.settings.size.height + 15 - const styles = DOTGRID.tool.styles - const paths = DOTGRID.tool.paths() + const styles = dotgrid.tool.styles + const paths = dotgrid.tool.paths() for (const id in this.layers) { let style = styles[id] let path = paths[id] let layer = this.layers[id] // Easter Egg - if (DOTGRID.tool.settings.crest === true) { + if (dotgrid.tool.settings.crest === true) { style = styles[0] path = paths[0] - layer.setAttribute('transform', `rotate(${parseInt(id) * 120} ${(DOTGRID.tool.settings.size.width / 2) + 7.5} ${(DOTGRID.tool.settings.size.height / 2) + 7.5})`) + layer.setAttribute('transform', `rotate(${parseInt(id) * 120} ${(dotgrid.tool.settings.size.width / 2) + 7.5} ${(dotgrid.tool.settings.size.height / 2) + 7.5})`) } layer.style.strokeWidth = style.thickness @@ -57,7 +57,7 @@ function Manager (dotgrid) { // Exporters - this.toPNG = function (size = DOTGRID.tool.settings.size, callback) { + this.toPNG = function (size = dotgrid.tool.settings.size, callback) { this.update() let image64 = this.svg64() @@ -82,7 +82,7 @@ function Manager (dotgrid) { this.toGRID = function (callback) { this.update() - const text = DOTGRID.tool.export() + const text = dotgrid.tool.export() const file = new Blob([text], { type: 'text/plain' }) callback(URL.createObjectURL(file), 'export.grid') } diff --git a/desktop/sources/scripts/picker.js b/desktop/sources/scripts/picker.js index 29821c6..edcca45 100644 --- a/desktop/sources/scripts/picker.js +++ b/desktop/sources/scripts/picker.js @@ -15,14 +15,14 @@ function Picker (dotgrid) { this.isActive = true - this.input.setAttribute('placeholder', `${DOTGRID.tool.style().color.replace('#', '').trim()}`) + this.input.setAttribute('placeholder', `${dotgrid.tool.style().color.replace('#', '').trim()}`) this.input.setAttribute('maxlength', 6) - DOTGRID.interface.el.className = 'picker' + dotgrid.interface.el.className = 'picker' this.input.focus() this.input.value = '' - try { DOTGRID.controller.set('picker') } catch (err) { } + try { dotgrid.controller.set('picker') } catch (err) { } } this.update = function () { @@ -40,13 +40,13 @@ function Picker (dotgrid) { this.isActive = false - DOTGRID.interface.el.className = '' + dotgrid.interface.el.className = '' this.input.blur() this.input.value = '' - try { DOTGRID.controller.set() } catch (err) { console.log('No controller') } + try { dotgrid.controller.set() } catch (err) { console.log('No controller') } - setTimeout(() => { DOTGRID.interface.update(true); DOTGRID.renderer.update() }, 250) + setTimeout(() => { dotgrid.interface.update(true); dotgrid.renderer.update() }, 250) } this.validate = function () { @@ -54,8 +54,8 @@ function Picker (dotgrid) { const hex = `#${this.input.value}` - DOTGRID.tool.style().color = hex - DOTGRID.tool.style().fill = DOTGRID.tool.style().fill !== 'none' ? hex : 'none' + dotgrid.tool.style().color = hex + dotgrid.tool.style().fill = dotgrid.tool.style().fill !== 'none' ? hex : 'none' this.stop() } @@ -95,6 +95,6 @@ function Picker (dotgrid) { return re.test(val) } - this.input.onkeydown = function (event) { DOTGRID.picker.listen(event, true) } - this.input.onkeyup = function (event) { DOTGRID.picker.listen(event) } + this.input.onkeydown = function (event) { dotgrid.picker.listen(event, true) } + this.input.onkeyup = function (event) { dotgrid.picker.listen(event) } } diff --git a/desktop/sources/scripts/source.js b/desktop/sources/scripts/source.js new file mode 100644 index 0000000..6d6df7e --- /dev/null +++ b/desktop/sources/scripts/source.js @@ -0,0 +1,45 @@ +'use strict' + +function Source (dotgrid) { + this.new = function () { + dotgrid.setZoom(1.0) + dotgrid.history.push(dotgrid.tool.layers) + dotgrid.clear() + } + + this.open = function () { + if (!dialog) { return } + + const paths = dialog.showOpenDialog({ properties: ['openFile'], filters: [{ name: 'Dotgrid Image', extensions: ['dot', 'grid'] }] }) + + if (!paths) { console.warn('Nothing to load'); return } + + fs.readFile(paths[0], 'utf-8', (err, data) => { + if (err) { alert('An error ocurred reading the file :' + err.message); return } + dotgrid.tool.replace(JSON.parse(data.toString().trim())) + dotgrid.renderer.update() + }) + } + + this.save = function () { + if (dotgrid.tool.length() < 1) { console.warn('Nothing to save'); return } + dotgrid.manager.toGRID(grab) + } + + this.export = function () { + if (dotgrid.tool.length() < 1) { console.warn('Nothing to export'); return } + dotgrid.manager.toSVG(grab) + } + + this.render = function () { + if (dotgrid.tool.length() < 1) { console.warn('Nothing to render'); return } + dotgrid.manager.toPNG({ width: dotgrid.tool.settings.size.width * 2, height: dotgrid.tool.settings.size.height * 2 }, grab) + } + + function grab (base64, name) { + const link = document.createElement('a') + link.setAttribute('href', base64) + link.setAttribute('download', name) + link.dispatchEvent(new MouseEvent(`click`, { bubbles: true, cancelable: true, view: window })) + } +} diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index 4e681c5..4fa2db3 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -78,7 +78,7 @@ function Tool (dotgrid) { dot.settings.size = { width: dot.settings.width, height: dot.settings.height } } if (this.settings && (this.settings.size.width !== dot.settings.size.width || this.settings.size.height !== dot.settings.size.height)) { - dotgrid.setSize({ width: dot.settings.size.width / 15, height: dot.settings.size.height / 15 }) + dotgrid.setSize({ width: dot.settings.size.width, height: dot.settings.size.height }) } this.layers = dot.layers diff --git a/index.html b/index.html index 7bd204e..eb355a5 100644 --- a/index.html +++ b/index.html @@ -32,6 +32,7 @@ + @@ -44,8 +45,8 @@ 'use strict'; function Listener(){} const dialog = null; - DOTGRID.install(document.body); - DOTGRID.start(); + dotgrid.install(document.body); + dotgrid.start(); diff --git a/web/events.js b/web/events.js index 7c97c27..ac4e72a 100644 --- a/web/events.js +++ b/web/events.js @@ -7,46 +7,46 @@ document.onkeyup = (e) => if(e.target && e.target.id === "picker_input"){ return; } // Output - if((e.ctrlKey || e.metaKey) && ch === "s"){ DOTGRID.save(); e.preventDefault(); return; } - if((e.ctrlKey || e.metaKey) && ch === "r"){ DOTGRID.render(); e.preventDefault(); return; } - if((e.ctrlKey || e.metaKey) && ch === "e"){ DOTGRID.export(); e.preventDefault(); return; } - if((e.ctrlKey || e.metaKey) && ch === "k"){ DOTGRID.tool.toggleCrest(); e.preventDefault(); return; } + if((e.ctrlKey || e.metaKey) && ch === "s"){ dotgrid.save(); e.preventDefault(); return; } + if((e.ctrlKey || e.metaKey) && ch === "r"){ dotgrid.render(); e.preventDefault(); return; } + if((e.ctrlKey || e.metaKey) && ch === "e"){ dotgrid.export(); e.preventDefault(); return; } + if((e.ctrlKey || e.metaKey) && ch === "k"){ dotgrid.tool.toggleCrest(); e.preventDefault(); return; } - if(ch === "backspace" && e.ctrlKey){ DOTGRID.theme.reset(); e.preventDefault(); } - if(ch === "backspace"){ DOTGRID.tool.removeSegment(); e.preventDefault(); } - if(ch === "escape"){ DOTGRID.tool.clear(); DOTGRID.picker.stop(); e.preventDefault(); } + if(ch === "backspace" && e.ctrlKey){ dotgrid.theme.reset(); e.preventDefault(); } + if(ch === "backspace"){ dotgrid.tool.removeSegment(); e.preventDefault(); } + if(ch === "escape"){ dotgrid.tool.clear(); dotgrid.picker.stop(); e.preventDefault(); } - if(ch === "1"){ DOTGRID.tool.selectLayer(0); e.preventDefault(); } - if(ch === "2"){ DOTGRID.tool.selectLayer(1); e.preventDefault(); } - if(ch === "3"){ DOTGRID.tool.selectLayer(2); e.preventDefault(); } + if(ch === "1"){ dotgrid.tool.selectLayer(0); e.preventDefault(); } + if(ch === "2"){ dotgrid.tool.selectLayer(1); e.preventDefault(); } + if(ch === "3"){ dotgrid.tool.selectLayer(2); e.preventDefault(); } - if(ch === "h"){ DOTGRID.renderer.toggle(); e.preventDefault(); } - if(ch === "?"){ DOTGRID.reset(); DOTGRID.theme.reset(); e.preventDefault(); } + if(ch === "h"){ dotgrid.renderer.toggle(); e.preventDefault(); } + if(ch === "?"){ dotgrid.reset(); dotgrid.theme.reset(); e.preventDefault(); } - if(ch === "a"){ DOTGRID.tool.cast("line"); e.preventDefault(); } - if(ch === "s"){ DOTGRID.tool.cast("arc_c"); e.preventDefault(); } - if(ch === "d"){ DOTGRID.tool.cast("arc_r"); e.preventDefault(); } - if(ch === "t"){ DOTGRID.tool.cast("arc_c_full"); e.preventDefault(); } - if(ch === "y"){ DOTGRID.tool.cast("arc_r_full"); e.preventDefault(); } - if(ch === "f"){ DOTGRID.tool.cast("bezier"); e.preventDefault(); } - if(ch === "z"){ DOTGRID.tool.cast("close"); e.preventDefault(); } + if(ch === "a"){ dotgrid.tool.cast("line"); e.preventDefault(); } + if(ch === "s"){ dotgrid.tool.cast("arc_c"); e.preventDefault(); } + if(ch === "d"){ dotgrid.tool.cast("arc_r"); e.preventDefault(); } + if(ch === "t"){ dotgrid.tool.cast("arc_c_full"); e.preventDefault(); } + if(ch === "y"){ dotgrid.tool.cast("arc_r_full"); e.preventDefault(); } + if(ch === "f"){ dotgrid.tool.cast("bezier"); e.preventDefault(); } + if(ch === "z"){ dotgrid.tool.cast("close"); e.preventDefault(); } - if(ch === "q"){ DOTGRID.tool.toggle("linecap"); e.preventDefault(); } - if(ch === "w"){ DOTGRID.tool.toggle("linejoin"); e.preventDefault(); } - if(ch === "e"){ DOTGRID.tool.toggle("mirror"); e.preventDefault(); } - if(ch === "r"){ DOTGRID.tool.toggle("fill"); e.preventDefault(); } - if(ch === "g"){ DOTGRID.picker.start(); e.preventDefault(); } - if(ch === "}"){ DOTGRID.tool.toggle("thickness",1); e.preventDefault(); } - if(ch === "{"){ DOTGRID.tool.toggle("thickness",-1); e.preventDefault(); } - if(ch === "]"){ DOTGRID.tool.toggle("thickness",5); e.preventDefault(); } - if(ch === "["){ DOTGRID.tool.toggle("thickness",-5); e.preventDefault(); } + if(ch === "q"){ dotgrid.tool.toggle("linecap"); e.preventDefault(); } + if(ch === "w"){ dotgrid.tool.toggle("linejoin"); e.preventDefault(); } + if(ch === "e"){ dotgrid.tool.toggle("mirror"); e.preventDefault(); } + if(ch === "r"){ dotgrid.tool.toggle("fill"); e.preventDefault(); } + if(ch === "g"){ dotgrid.picker.start(); e.preventDefault(); } + if(ch === "}"){ dotgrid.tool.toggle("thickness",1); e.preventDefault(); } + if(ch === "{"){ dotgrid.tool.toggle("thickness",-1); e.preventDefault(); } + if(ch === "]"){ dotgrid.tool.toggle("thickness",5); e.preventDefault(); } + if(ch === "["){ dotgrid.tool.toggle("thickness",-5); e.preventDefault(); } - if(ch === "m"){ DOTGRID.tool.merge(); e.preventDefault(); } + if(ch === "m"){ dotgrid.tool.merge(); e.preventDefault(); } - if(ch === "i"){ DOTGRID.theme.invert(); e.preventDefault(); } + if(ch === "i"){ dotgrid.theme.invert(); e.preventDefault(); } } document.onkeydown = (e) => { - if(e.keyCode === 9){ DOTGRID.tool.selectNextLayer(); e.preventDefault(); } + if(e.keyCode === 9){ dotgrid.tool.selectNextLayer(); e.preventDefault(); } } \ No newline at end of file