diff --git a/desktop/main.js b/desktop/main.js index 544d214..20058d3 100644 --- a/desktop/main.js +++ b/desktop/main.js @@ -1,81 +1,72 @@ -const {app, BrowserWindow, webFrame, Menu, dialog} = require('electron') +const { app, BrowserWindow, webFrame, Menu, dialog } = require('electron') const path = require('path') const url = require('url') const shell = require('electron').shell -let is_shown = true; +let is_shown = true -app.on('ready', () => -{ +app.on('ready', () => { app.win = new BrowserWindow({ - width: 405, - height: 420, - minWidth: 405, + width: 405, + height: 420, + minWidth: 405, minHeight: 420, - webPreferences: {zoomFactor: 1.0}, - backgroundColor:"#000", - frame:false, - autoHideMenuBar: true, + webPreferences: { zoomFactor: 1.0 }, + backgroundColor: '#000', + frame: false, + autoHideMenuBar: true, icon: __dirname + '/icon.ico' }) - - 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 () { + is_shown = false }) - app.win.on('show',function() { - is_shown = true; + app.win.on('show', function () { + is_shown = true }) - app.on('window-all-closed', () => - { + app.on('window-all-closed', () => { app.quit() }) app.on('activate', () => { if (app.win === null) { createWindow() - } - else{ - app.win.show(); + } else { + app.win.show() } }) }) -app.inspect = function() -{ - app.win.toggleDevTools(); +app.inspect = function () { + app.win.toggleDevTools() } -app.toggle_fullscreen = function() -{ - app.win.setFullScreen(app.win.isFullScreen() ? false : true); +app.toggle_fullscreen = function () { + app.win.setFullScreen(!app.win.isFullScreen()) } -app.toggle_visible = function() -{ - if(process.platform == "win32"){ - if(!app.win.isMinimized()){ app.win.minimize(); } else{ app.win.restore(); } - } - else{ - if(is_shown && !app.win.isFullScreen()){ app.win.hide(); } else{ app.win.show(); } +app.toggle_visible = function () { + if (process.platform == 'win32') { + if (!app.win.isMinimized()) { app.win.minimize() } else { app.win.restore() } + } else { + if (is_shown && !app.win.isFullScreen()) { app.win.hide() } else { app.win.show() } } } -app.inject_menu = function(menu) -{ - try{ - Menu.setApplicationMenu(Menu.buildFromTemplate(menu)); +app.inject_menu = function (menu) { + try { + Menu.setApplicationMenu(Menu.buildFromTemplate(menu)) + } catch (err) { + console.warn('Cannot inject menu.') } - catch(err){ - console.warn("Cannot inject menu.") - } -} \ No newline at end of file +} diff --git a/desktop/sources/scripts/cursor.js b/desktop/sources/scripts/cursor.js index d89bde0..d4163e0 100644 --- a/desktop/sources/scripts/cursor.js +++ b/desktop/sources/scripts/cursor.js @@ -1,113 +1,102 @@ -'use strict'; +'use strict' -function Cursor() -{ - this.pos = {x:0,y:0}; - this.translation = null; - this.operation = null; +function Cursor () { + this.pos = { x: 0, y: 0 } + this.translation = null + this.operation = null - this.translate = function(from = null,to = null, multi = false) - { - if((from || to) && this.translation == null){ this.translation = {multi:multi}; console.log("Begin translation") } + this.translate = function (from = null, to = null, multi = false) { + if ((from || to) && this.translation == null) { this.translation = { multi: multi }; console.log('Begin translation') } - if(from){ this.translation.from = from; } - if(to){ this.translation.to = to; } + if (from) { this.translation.from = from } + if (to) { this.translation.to = to } - if(!from && !to){ - this.translation = null; + if (!from && !to) { + this.translation = null } } - this.down = function(e) - { - this.pos = this.pos_from_event(e); - - // Translation - if(dotgrid.tool.vertex_at(this.pos)){ - this.translate(this.pos,this.pos,e.shiftKey) - } - - dotgrid.guide.update(); - dotgrid.interface.update(); - e.preventDefault(); - } - - this.last_pos = {x:0,y:0} - - this.move = function(e) - { + this.down = function (e) { this.pos = this.pos_from_event(e) // Translation - if(this.translation){ - this.translate(null,this.pos) + if (dotgrid.tool.vertex_at(this.pos)) { + this.translate(this.pos, this.pos, e.shiftKey) } - if(this.last_pos.x != this.pos.x || this.last_pos.y != this.pos.y){ - dotgrid.guide.update(); - } - - dotgrid.interface.update(); - e.preventDefault(); - - this.last_pos = this.pos; + dotgrid.guide.update() + dotgrid.interface.update() + e.preventDefault() } - this.up = function(e) - { + this.last_pos = { x: 0, y: 0 } + + this.move = function (e) { this.pos = this.pos_from_event(e) - if(e.altKey){ dotgrid.tool.remove_segments_at(this.pos); this.translate(); return; } - - if(this.translation && !is_equal(this.translation.from,this.translation.to)){ - if(this.translation.multi){ dotgrid.tool.translate_multi(this.translation.from,this.translation.to); } - else{ dotgrid.tool.translate(this.translation.from,this.translation.to); } - } - else if(e.target.id == "guide"){ - dotgrid.tool.add_vertex({x:this.pos.x,y:this.pos.y}); - dotgrid.picker.stop(); + // Translation + if (this.translation) { + this.translate(null, this.pos) } - this.translate(); + if (this.last_pos.x != this.pos.x || this.last_pos.y != this.pos.y) { + dotgrid.guide.update() + } - dotgrid.interface.update(); - dotgrid.guide.update(); - e.preventDefault(); + dotgrid.interface.update() + e.preventDefault() + + this.last_pos = this.pos } - this.alt = function(e) - { + this.up = function (e) { this.pos = this.pos_from_event(e) - dotgrid.tool.remove_segments_at(this.pos); - e.preventDefault(); + if (e.altKey) { dotgrid.tool.remove_segments_at(this.pos); this.translate(); return } - setTimeout(() => { dotgrid.tool.clear(); },150); + if (this.translation && !is_equal(this.translation.from, this.translation.to)) { + if (this.translation.multi) { dotgrid.tool.translate_multi(this.translation.from, this.translation.to) } else { dotgrid.tool.translate(this.translation.from, this.translation.to) } + } else if (e.target.id == 'guide') { + dotgrid.tool.add_vertex({ x: this.pos.x, y: this.pos.y }) + dotgrid.picker.stop() + } + + this.translate() + + dotgrid.interface.update() + dotgrid.guide.update() + e.preventDefault() + } + + this.alt = function (e) { + this.pos = this.pos_from_event(e) + + dotgrid.tool.remove_segments_at(this.pos) + e.preventDefault() + + setTimeout(() => { dotgrid.tool.clear() }, 150) } // Position Mods - this.pos_from_event = function(e) - { - return this.pos_snap(this.pos_relative({x:e.clientX,y:e.clientY})) + this.pos_from_event = function (e) { + return this.pos_snap(this.pos_relative({ x: e.clientX, y: e.clientY })) } - this.pos_relative = function(pos) - { + this.pos_relative = function (pos) { return { - x:pos.x - dotgrid.guide.el.offsetLeft, - y:pos.y - dotgrid.guide.el.offsetTop - }; + x: pos.x - dotgrid.guide.el.offsetLeft, + y: pos.y - dotgrid.guide.el.offsetTop + } } - this.pos_snap = function(pos) - { - const grid = dotgrid.tool.settings.size.width/dotgrid.grid_x; + this.pos_snap = function (pos) { + const grid = dotgrid.tool.settings.size.width / dotgrid.grid_x return { - x:clamp(step(pos.x,grid),grid,dotgrid.tool.settings.size.width), - y:clamp(step(pos.y,grid),grid,dotgrid.tool.settings.size.height+grid) - }; + x: clamp(step(pos.x, grid), grid, dotgrid.tool.settings.size.width), + y: clamp(step(pos.y, grid), grid, dotgrid.tool.settings.size.height + grid) + } } - function is_equal(a,b){ return a.x == b.x && a.y == b.y; } -} \ No newline at end of file + function is_equal (a, b) { return a.x == b.x && a.y == b.y } +} diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 1416d1a..aecc4a3 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -1,310 +1,284 @@ -'use strict'; +'use strict' -function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) -{ - this.controller = null; - this.theme = new Theme(); - this.interface = new Interface(); - this.history = new History(); - this.guide = new Guide(); - this.renderer = new Renderer(); - this.tool = new Tool(); - this.picker = new Picker(); - this.cursor = new Cursor(); +function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { + this.controller = null + this.theme = new Theme() + this.interface = new Interface() + this.history = new History() + this.guide = new Guide() + this.renderer = new Renderer() + this.tool = new Tool() + this.picker = new Picker() + this.cursor = new Cursor() - this.grid_x = grid_x; - this.grid_y = grid_y; - this.block_x = block_x; - this.block_y = block_y; + this.grid_x = grid_x + this.grid_y = grid_y + this.block_x = block_x + this.block_y = block_y // ISU - this.install = function(host) - { - host.appendChild(this.guide.el); + this.install = function (host) { + host.appendChild(this.guide.el) - this.interface.install(host); - this.theme.install(host,this.update); + this.interface.install(host) + this.theme.install(host, this.update) } - this.start = function() - { - this.theme.start(); - this.tool.start(); - this.guide.start(); - this.interface.start(); + this.start = function () { + this.theme.start() + this.tool.start() + this.guide.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.new() - setTimeout(() => { document.body.className += ' ready'; }, 250) + setTimeout(() => { document.body.className += ' ready' }, 250) } - this.update = function() - { - dotgrid.resize(); - dotgrid.interface.update(); - dotgrid.guide.update(); + this.update = function () { + dotgrid.resize() + dotgrid.interface.update() + dotgrid.guide.update() } // File - this.new = function() - { + this.new = function () { this.set_zoom(1.0) - this.set_size({width:300,height:300}) - this.history.push(this.tool.layers); - this.clear(); + this.set_size({ width: 300, height: 300 }) + this.history.push(this.tool.layers) + this.clear() } - this.open = function() - { - if(!dialog){ return; } + this.open = function () { + if (!dialog) { return } - const paths = dialog.showOpenDialog({properties: ['openFile'],filters:[{name:"Dotgrid Image",extensions:["dot","grid"]}]}); + const paths = dialog.showOpenDialog({ properties: ['openFile'], filters: [{ name: 'Dotgrid Image', extensions: ['dot', 'grid'] }] }) - if(!paths){ console.warn("Nothing to load"); return; } + 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.guide.update(); - }); - } - - this.save = function(content = this.tool.export()) - { - if(dotgrid.tool.length() < 1){ console.warn("Nothing to save"); return; } - - if(!dialog){ this.save_web(content); return; } - - dialog.showSaveDialog({title:"Save to .grid",filters: [{name: "Dotgrid Format", extensions: ["grid", "dot"]}]},(fileName) => { - if (fileName === undefined){ return; } - fileName = fileName.substr(-5,5) != ".grid" ? fileName+".grid" : fileName; - fs.writeFileSync(fileName, content); - dotgrid.guide.update() - }); - } - - this.save_web = function(content) - { - console.info("Web Save"); - const win = window.open("", "Save", `toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=480,top=${screen.height-200},left=${screen.width-640}`); - win.document.body.innerHTML = `
To save: Copy this into a .grid file.
To load: Drag the .grid onto the browser window.
${content}`; - } - - this.render = function(content = this.renderer.to_png({width:dotgrid.tool.settings.size.width*2,height:dotgrid.tool.settings.size.height*2}), ready = null, size = null) - { - if(!ready){return; } - if(dotgrid.tool.length() < 1){ console.warn("Nothing to render"); return; } - - if(!dialog){ dotgrid.render_web(content); return; } - - dialog.showSaveDialog({title:"Save to .png",filters: [{name: "Image Format", extensions: ["png"]}]},(fileName) => { - if (fileName === undefined){ return; } - fileName = fileName.substr(-4,4) != ".png" ? fileName+".png" : fileName; - console.log(`Rendered ${size.width}x${size.height}`) - fs.writeFileSync(fileName, ready); - }); - } - - this.render_web = function(content,window) - { - // Handled in Renderer - console.info("Web Render"); - } - - this.export = function(content = this.renderer.to_svg()) - { - if(dotgrid.tool.length() < 1){ console.warn("Nothing to export"); return; } - - if(!dialog){ this.export_web(content); return; } - - dialog.showSaveDialog({title:"Save to .svg",filters: [{name: "Vector Format", extensions: ["svg"]}]},(fileName) => { - if (fileName === undefined){ return; } - fileName = fileName.substr(-4,4) != ".svg" ? fileName+".svg" : fileName; - fs.writeFileSync(fileName, content); + if (err) { alert('An error ocurred reading the file :' + err.message); return } + this.tool.replace(JSON.parse(data.toString().trim())) this.guide.update() - }); + }) } - this.export_web = function(content) - { - console.info("Web Export"); - const win = window.open("", "Save", `toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=480,top=${screen.height-200},left=${screen.width-640}`); - win.document.body.innerHTML = `${dotgrid.renderer.to_svg()}`; + this.save = function (content = this.tool.export()) { + if (dotgrid.tool.length() < 1) { console.warn('Nothing to save'); return } + + if (!dialog) { this.save_web(content); return } + + dialog.showSaveDialog({ title: 'Save to .grid', filters: [{ name: 'Dotgrid Format', extensions: ['grid', 'dot'] }] }, (fileName) => { + if (fileName === undefined) { return } + fileName = fileName.substr(-5, 5) != '.grid' ? fileName + '.grid' : fileName + fs.writeFileSync(fileName, content) + dotgrid.guide.update() + }) + } + + this.save_web = function (content) { + console.info('Web Save') + const win = window.open('', 'Save', `toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=480,top=${screen.height - 200},left=${screen.width - 640}`) + win.document.body.innerHTML = `
To save: Copy this into a .grid file.
To load: Drag the .grid onto the browser window.
${content}` + } + + this.render = function (content = this.renderer.to_png({ width: dotgrid.tool.settings.size.width * 2, height: dotgrid.tool.settings.size.height * 2 }), ready = null, size = null) { + if (!ready) { return } + if (dotgrid.tool.length() < 1) { console.warn('Nothing to render'); return } + + if (!dialog) { dotgrid.render_web(content); return } + + dialog.showSaveDialog({ title: 'Save to .png', filters: [{ name: 'Image Format', extensions: ['png'] }] }, (fileName) => { + if (fileName === undefined) { return } + fileName = fileName.substr(-4, 4) != '.png' ? fileName + '.png' : fileName + console.log(`Rendered ${size.width}x${size.height}`) + fs.writeFileSync(fileName, ready) + }) + } + + this.render_web = function (content, window) { + // Handled in Renderer + console.info('Web Render') + } + + this.export = function (content = this.renderer.to_svg()) { + if (dotgrid.tool.length() < 1) { console.warn('Nothing to export'); return } + + if (!dialog) { this.export_web(content); return } + + dialog.showSaveDialog({ title: 'Save to .svg', filters: [{ name: 'Vector Format', extensions: ['svg'] }] }, (fileName) => { + if (fileName === undefined) { return } + fileName = fileName.substr(-4, 4) != '.svg' ? fileName + '.svg' : fileName + fs.writeFileSync(fileName, content) + this.guide.update() + }) + } + + this.export_web = function (content) { + console.info('Web Export') + const win = window.open('', 'Save', `toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=480,top=${screen.height - 200},left=${screen.width - 640}`) + win.document.body.innerHTML = `${dotgrid.renderer.to_svg()}` } // Basics - this.set_size = function(size = {width:300,height:300},ui = true,scale = 1) - { - size = { width:clamp(step(size.width,15),105,1080),height:clamp(step(size.height,15),120,1080)} + this.set_size = function (size = { width: 300, height: 300 }, ui = true, scale = 1) { + size = { width: clamp(step(size.width, 15), 105, 1080), height: clamp(step(size.height, 15), 120, 1080) } this.tool.settings.size.width = size.width this.tool.settings.size.height = size.height - try{ - const win = require('electron').remote.getCurrentWindow(); - win.setSize((size.width+100)*scale,(size.height+100+(ui ? 10 : 0))*scale,true); + try { + const win = require('electron').remote.getCurrentWindow() + win.setSize((size.width + 100) * scale, (size.height + 100 + (ui ? 10 : 0)) * scale, true) + } catch (err) { + console.log('No window') } - catch(err){ - console.log("No window") - } - - this.grid_x = size.width/15 - this.grid_y = size.height/15 - this.grid_width = this.tool.settings.size.width/this.grid_x; - this.grid_height = this.tool.settings.size.height/this.grid_y; + this.grid_x = size.width / 15 + this.grid_y = size.height / 15 - dotgrid.guide.resize(size); + this.grid_width = this.tool.settings.size.width / this.grid_x + this.grid_height = this.tool.settings.size.height / this.grid_y - this.interface.update(); - dotgrid.guide.update(); + dotgrid.guide.resize(size) + + this.interface.update() + dotgrid.guide.update() } - this.set_zoom = function(scale) - { - this.set_size({width:this.tool.settings.size.width,height:this.tool.settings.size.height},true,scale) + this.set_zoom = function (scale) { + this.set_size({ width: this.tool.settings.size.width, height: this.tool.settings.size.height }, true, scale) - try{ - webFrame.setZoomFactor(scale) - } - catch(err){ - console.log("Cannot zoom") + try { + webFrame.setZoomFactor(scale) + } catch (err) { + console.log('Cannot zoom') } } // Draw - this.reset = function() - { - this.tool.clear(); - this.update(); + this.reset = function () { + this.tool.clear() + this.update() } - this.clear = function() - { - this.history.clear(); - this.tool.reset(); - this.reset(); - dotgrid.guide.update(); - dotgrid.interface.update(true); + this.clear = function () { + this.history.clear() + this.tool.reset() + this.reset() + dotgrid.guide.update() + dotgrid.interface.update(true) } - this.resize = function() - { - const size = {width:step(window.innerWidth-90,15),height:step(window.innerHeight-120,15)} + this.resize = function () { + const size = { width: step(window.innerWidth - 90, 15), height: step(window.innerHeight - 120, 15) } - if(size.width == dotgrid.tool.settings.size.width && size.height == dotgrid.tool.settings.size.height){ - return; + if (size.width == dotgrid.tool.settings.size.width && size.height == dotgrid.tool.settings.size.height) { + return } console.log(`Resized: ${size.width}x${size.height}`) - + dotgrid.tool.settings.size.width = size.width dotgrid.tool.settings.size.height = size.height - dotgrid.grid_x = size.width/15 - dotgrid.grid_y = size.height/15 + dotgrid.grid_x = size.width / 15 + dotgrid.grid_y = size.height / 15 - dotgrid.grid_width = dotgrid.tool.settings.size.width/dotgrid.grid_x; - dotgrid.grid_height = dotgrid.tool.settings.size.height/dotgrid.grid_y; + dotgrid.grid_width = dotgrid.tool.settings.size.width / dotgrid.grid_x + dotgrid.grid_height = dotgrid.tool.settings.size.height / dotgrid.grid_y - dotgrid.guide.resize(size); + dotgrid.guide.resize(size) document.title = `Dotgrid — ${size.width}x${size.height}` } - this.drag = function(e) - { - e.preventDefault(); - e.stopPropagation(); + this.drag = function (e) { + e.preventDefault() + e.stopPropagation() - const file = e.dataTransfer.files[0]; + const file = e.dataTransfer.files[0] - if(!file || !file.path || file.path.indexOf(".dot") < 0 && file.path.indexOf(".grid") < 0){ console.warn("Dotgrid","Not a dot file"); return; } + if (!file || !file.path || file.path.indexOf('.dot') < 0 && file.path.indexOf('.grid') < 0) { console.warn('Dotgrid', 'Not a dot file'); return } - const reader = new FileReader(); - reader.onload = function(e){ - dotgrid.tool.replace(JSON.parse(e.target.result.toString().trim())); - dotgrid.guide.update(); - }; - reader.readAsText(file); + const reader = new FileReader() + reader.onload = function (e) { + dotgrid.tool.replace(JSON.parse(e.target.result.toString().trim())) + dotgrid.guide.update() + } + reader.readAsText(file) } - this.copy = function(e) - { - dotgrid.guide.update(); + this.copy = function (e) { + dotgrid.guide.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.renderer.to_svg()); - e.clipboardData.setData('text/svg+xml', dotgrid.renderer.to_svg()); - e.preventDefault(); + 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.renderer.to_svg()) + e.clipboardData.setData('text/svg+xml', dotgrid.renderer.to_svg()) + e.preventDefault() } - dotgrid.guide.update(); + dotgrid.guide.update() } - this.cut = function(e) - { - dotgrid.guide.update(); + this.cut = function (e) { + dotgrid.guide.update() - if(e.target !== this.picker.input){ - e.clipboardData.setData('text/plain', dotgrid.tool.export(dotgrid.tool.layer())); - e.clipboardData.setData('text/html', dotgrid.renderer.to_svg()); - e.clipboardData.setData('text/svg+xml', dotgrid.renderer.to_svg()); - dotgrid.tool.layers[dotgrid.tool.index] = []; - e.preventDefault(); + if (e.target !== this.picker.input) { + e.clipboardData.setData('text/plain', dotgrid.tool.export(dotgrid.tool.layer())) + e.clipboardData.setData('text/html', dotgrid.renderer.to_svg()) + e.clipboardData.setData('text/svg+xml', dotgrid.renderer.to_svg()) + dotgrid.tool.layers[dotgrid.tool.index] = [] + e.preventDefault() } - dotgrid.guide.update(); + dotgrid.guide.update() } - this.paste = function(e) - { - if(e.target !== this.picker.el){ - const data = e.clipboardData.getData("text/source"); + this.paste = function (e) { + if (e.target !== this.picker.el) { + const data = e.clipboardData.getData('text/source') if (is_json(data)) { - data = JSON.parse(data.trim()); - dotgrid.tool.import(data); + data = JSON.parse(data.trim()) + dotgrid.tool.import(data) } - e.preventDefault(); + e.preventDefault() } - dotgrid.guide.update(); + dotgrid.guide.update() } } -window.addEventListener('resize', function(e) -{ - dotgrid.update(); -}, false); +window.addEventListener('resize', function (e) { + dotgrid.update() +}, false) -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' +}) -String.prototype.capitalize = function() -{ - return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase(); +String.prototype.capitalize = function () { + return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase() } -function is_json(text){ try{ JSON.parse(text);return true; } catch(error){ return false; }} -function pos_is_equal(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; } +function is_json (text) { try { JSON.parse(text); return true } catch (error) { return false } } +function pos_is_equal (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 } diff --git a/desktop/sources/scripts/generator.js b/desktop/sources/scripts/generator.js index e8e39aa..c800aa6 100644 --- a/desktop/sources/scripts/generator.js +++ b/desktop/sources/scripts/generator.js @@ -1,115 +1,106 @@ -'use strict'; +'use strict' -function Generator(layer,style) -{ - this.layer = layer; - this.style = style; +function Generator (layer, style) { + this.layer = layer + this.style = style - function operate(layer,offset,scale,mirror = 0,angle = 0) - { + function operate (layer, offset, scale, mirror = 0, angle = 0) { const l = copy(layer) - for(const k1 in l){ - const seg = l[k1]; - for(const k2 in seg.vertices){ - if(mirror == 1){ seg.vertices[k2].x = (dotgrid.tool.settings.size.width) - seg.vertices[k2].x + 15 } - if(mirror == 2){ seg.vertices[k2].y = (dotgrid.tool.settings.size.height) - seg.vertices[k2].y + 30 } + for (const k1 in l) { + const seg = l[k1] + for (const k2 in seg.vertices) { + if (mirror == 1) { seg.vertices[k2].x = (dotgrid.tool.settings.size.width) - seg.vertices[k2].x + 15 } + if (mirror == 2) { seg.vertices[k2].y = (dotgrid.tool.settings.size.height) - seg.vertices[k2].y + 30 } // 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} - seg.vertices[k2] = rotate_point(seg.vertices[k2],center,angle) + 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] = rotate_point(seg.vertices[k2], center, angle) // Scale seg.vertices[k2].x *= scale seg.vertices[k2].y *= scale } } - return l; + return l } - this.render = function(prev,segment,mirror = 0) - { - const type = segment.type; - const vertices = segment.vertices; - let html = ''; - let skip = 0; + this.render = function (prev, segment, mirror = 0) { + const type = segment.type + const vertices = segment.vertices + let html = '' + let skip = 0 + + for (const id in vertices) { + if (skip > 0) { skip -= 1; continue } - for(const id in vertices){ - if(skip > 0){ skip -= 1; continue; } - let vertex = vertices[id] - let next = vertices[parseInt(id)+1] - let after_next = vertices[parseInt(id)+2] + let next = vertices[parseInt(id) + 1] + let after_next = vertices[parseInt(id) + 2] - if(id == 0 && !prev || id == 0 && prev && (prev.x != vertex.x || prev.y != vertex.y)){ - html += `M${vertex.x},${vertex.y} ` + if (id == 0 && !prev || id == 0 && prev && (prev.x != vertex.x || prev.y != vertex.y)) { + html += `M${vertex.x},${vertex.y} ` } - - if(type == "line"){ - html += `L${vertex.x},${vertex.y} `; - } - else if(type == "arc_c"){ + + if (type == 'line') { + html += `L${vertex.x},${vertex.y} ` + } else if (type == 'arc_c') { let clock = mirror > 0 ? '0,0' : '0,1' - html += next ? `A${Math.abs(next.x - vertex.x)},${Math.abs(next.y - vertex.y)} 0 ${clock} ${next.x},${next.y} ` : ''; - } - else if(type == "arc_r"){ + html += next ? `A${Math.abs(next.x - vertex.x)},${Math.abs(next.y - vertex.y)} 0 ${clock} ${next.x},${next.y} ` : '' + } else if (type == 'arc_r') { let clock = mirror > 0 ? '0,1' : '0,0' - html += next ? `A${Math.abs(next.x - vertex.x)},${Math.abs(next.y - vertex.y)} 0 ${clock} ${next.x},${next.y} ` : ''; - } - else if(type == "bezier"){ - html += next && after_next ?`Q${next.x},${next.y} ${after_next.x},${after_next.y} ` : ''; + html += next ? `A${Math.abs(next.x - vertex.x)},${Math.abs(next.y - vertex.y)} 0 ${clock} ${next.x},${next.y} ` : '' + } else if (type == 'bezier') { + html += next && after_next ? `Q${next.x},${next.y} ${after_next.x},${after_next.y} ` : '' skip = 1 - } - else{ + } else { console.warn(`unknown type:${type}`) } } - if(segment.type == "close"){ - html += "Z " + if (segment.type == 'close') { + html += 'Z ' } - + return html } - this.convert = function(layer,mirror,angle) - { - let s = "" + this.convert = function (layer, mirror, angle) { + let s = '' let prev = null - for(const id in layer){ - const seg = layer[id]; - s += `${this.render(prev,seg,mirror)}` - prev = seg.vertices ? seg.vertices[seg.vertices.length-1] : null + for (const id in layer) { + const seg = layer[id] + s += `${this.render(prev, seg, mirror)}` + prev = seg.vertices ? seg.vertices[seg.vertices.length - 1] : null } - return s; + return s } - this.toString = function(offset = {x:0,y:0}, scale = 1, mirror = this.style && this.style.mirror_style ? this.style.mirror_style : 0) - { - let s = this.convert(operate(this.layer,offset,scale)) + this.toString = function (offset = { x: 0, y: 0 }, scale = 1, mirror = this.style && this.style.mirror_style ? this.style.mirror_style : 0) { + let s = this.convert(operate(this.layer, offset, scale)) - if(mirror == 1 || mirror == 2){ - s += this.convert(operate(this.layer,offset,scale,mirror),mirror) + if (mirror == 1 || mirror == 2) { + s += this.convert(operate(this.layer, offset, scale, mirror), mirror) } - if(mirror == 3){ - s += this.convert(operate(this.layer,offset,scale,mirror,120),mirror) - s += this.convert(operate(this.layer,offset,scale,mirror,240),mirror) + if (mirror == 3) { + s += this.convert(operate(this.layer, offset, scale, mirror, 120), mirror) + s += this.convert(operate(this.layer, offset, scale, mirror, 240), mirror) } - if(mirror == 4){ - s += this.convert(operate(this.layer,offset,scale,mirror,72),mirror) - s += this.convert(operate(this.layer,offset,scale,mirror,144),mirror) - s += this.convert(operate(this.layer,offset,scale,mirror,216),mirror) - s += this.convert(operate(this.layer,offset,scale,mirror,288),mirror) + if (mirror == 4) { + s += this.convert(operate(this.layer, offset, scale, mirror, 72), mirror) + s += this.convert(operate(this.layer, offset, scale, mirror, 144), mirror) + s += this.convert(operate(this.layer, offset, scale, mirror, 216), mirror) + s += this.convert(operate(this.layer, offset, scale, mirror, 288), mirror) } return s } - function copy(data){ return data ? JSON.parse(JSON.stringify(data)) : []; } - function rotate_point(point, origin, angle){ angle = angle * Math.PI / 180.0; return { x: (Math.cos(angle) * (point.x-origin.x) - Math.sin(angle) * (point.y-origin.y) + origin.x).toFixed(1), y: (Math.sin(angle) * (point.x-origin.x) + Math.cos(angle) * (point.y-origin.y) + origin.y).toFixed(1) }; } -} \ No newline at end of file + function copy (data) { return data ? JSON.parse(JSON.stringify(data)) : [] } + function rotate_point (point, origin, angle) { angle = angle * Math.PI / 180.0; return { x: (Math.cos(angle) * (point.x - origin.x) - Math.sin(angle) * (point.y - origin.y) + origin.x).toFixed(1), y: (Math.sin(angle) * (point.x - origin.x) + Math.cos(angle) * (point.y - origin.y) + origin.y).toFixed(1) } } +} diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index 2d49254..96bea05 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -1,281 +1,259 @@ -'use strict'; +'use strict' -function Guide() -{ - this.el = document.createElement("canvas"); - this.el.id = "guide"; - this.el.width = 640; - this.el.height = 640; - this.el.style.width = "320px"; - this.el.style.height = "320px"; - this.show_extras = true; +function Guide () { + this.el = document.createElement('canvas') + this.el.id = 'guide' + this.el.width = 640 + this.el.height = 640 + this.el.style.width = '320px' + this.el.style.height = '320px' + this.show_extras = true - this.scale = 2; + this.scale = 2 - this.start = function() - { - this.clear(); - this.update(); - } - - this.update = function(force = false) - { - this.clear(); - - this.el.getContext('2d').restore(); - - this.draw_rulers(); - - if(dotgrid.tool.index == 2){ this.draw_markers() ; this.draw_vertices() } - this.draw_path(new Generator(dotgrid.tool.layers[2],dotgrid.tool.styles[2]).toString({x:0,y:0},this.scale),dotgrid.tool.styles[2]) - if(dotgrid.tool.index == 1){ this.draw_markers() ; this.draw_vertices() } - this.draw_path(new Generator(dotgrid.tool.layers[1],dotgrid.tool.styles[1]).toString({x:0,y:0},this.scale),dotgrid.tool.styles[1]) - if(dotgrid.tool.index == 0){ this.draw_markers(); this.draw_vertices() } - this.draw_path(new Generator(dotgrid.tool.layers[0],dotgrid.tool.styles[0]).toString({x:0,y:0},this.scale),dotgrid.tool.styles[0]) - - this.draw_handles() - this.draw_translation(); - this.draw_cursor(); - this.draw_preview(); - } - - this.clear = function() - { - this.el.getContext('2d').clearRect(0, 0, this.el.width*this.scale, this.el.height*this.scale); - } - - this.toggle = function() - { - this.show_extras = this.show_extras ? false : true; + this.start = function () { + this.clear() this.update() } - this.resize = function(size) - { - const offset = 15 - this.el.width = (size.width+offset)*this.scale; - this.el.height = (size.height+(offset*2))*this.scale; - this.el.style.width = (size.width+offset)+"px"; - this.el.style.height = (size.height+(offset*2))+"px"; + this.update = function (force = false) { + this.clear() - this.update(); + this.el.getContext('2d').restore() + + this.draw_rulers() + + if (dotgrid.tool.index == 2) { this.draw_markers(); this.draw_vertices() } + this.draw_path(new Generator(dotgrid.tool.layers[2], dotgrid.tool.styles[2]).toString({ x: 0, y: 0 }, this.scale), dotgrid.tool.styles[2]) + if (dotgrid.tool.index == 1) { this.draw_markers(); this.draw_vertices() } + this.draw_path(new Generator(dotgrid.tool.layers[1], dotgrid.tool.styles[1]).toString({ x: 0, y: 0 }, this.scale), dotgrid.tool.styles[1]) + if (dotgrid.tool.index == 0) { this.draw_markers(); this.draw_vertices() } + this.draw_path(new Generator(dotgrid.tool.layers[0], dotgrid.tool.styles[0]).toString({ x: 0, y: 0 }, this.scale), dotgrid.tool.styles[0]) + + this.draw_handles() + this.draw_translation() + this.draw_cursor() + this.draw_preview() } - this.draw_handles = function() - { - if(!this.show_extras){ return; } + this.clear = function () { + this.el.getContext('2d').clearRect(0, 0, this.el.width * this.scale, this.el.height * this.scale) + } - for(const segment_id in dotgrid.tool.layer()){ - const segment = dotgrid.tool.layer()[segment_id]; - for(const vertex_id in segment.vertices){ - const vertex = segment.vertices[vertex_id]; - this.draw_handle(vertex); + this.toggle = function () { + this.show_extras = !this.show_extras + this.update() + } + + this.resize = function (size) { + const offset = 15 + this.el.width = (size.width + offset) * this.scale + this.el.height = (size.height + (offset * 2)) * this.scale + this.el.style.width = (size.width + offset) + 'px' + this.el.style.height = (size.height + (offset * 2)) + 'px' + + this.update() + } + + this.draw_handles = function () { + if (!this.show_extras) { return } + + for (const segment_id in dotgrid.tool.layer()) { + const segment = dotgrid.tool.layer()[segment_id] + for (const vertex_id in segment.vertices) { + const vertex = segment.vertices[vertex_id] + this.draw_handle(vertex) } } } - this.draw_vertices = function() - { - for(const id in dotgrid.tool.vertices){ - this.draw_vertex(dotgrid.tool.vertices[id]); + this.draw_vertices = function () { + for (const id in dotgrid.tool.vertices) { + this.draw_vertex(dotgrid.tool.vertices[id]) } } - this.draw_markers = function() - { - if(!this.show_extras){ return; } + this.draw_markers = function () { + if (!this.show_extras) { return } - const cursor = {x:parseInt(dotgrid.cursor.pos.x/dotgrid.grid_width),y:parseInt(dotgrid.cursor.pos.y/dotgrid.grid_width)} + const cursor = { x: parseInt(dotgrid.cursor.pos.x / dotgrid.grid_width), y: parseInt(dotgrid.cursor.pos.y / dotgrid.grid_width) } - for (let x = dotgrid.grid_x-1; x >= 0; x--) { + for (let x = dotgrid.grid_x - 1; x >= 0; x--) { for (let y = dotgrid.grid_y; y >= 0; y--) { - let is_step = x % dotgrid.block_x == 0 && y % dotgrid.block_y == 0; + let is_step = x % dotgrid.block_x == 0 && y % dotgrid.block_y == 0 // Color - let color = is_step ? dotgrid.theme.active.b_med : dotgrid.theme.active.b_low; - if((y == 0 || y == dotgrid.grid_y) && cursor.x == x+1){ color = dotgrid.theme.active.b_high; } - else if((x == 0 || x == dotgrid.grid_x-1) && cursor.y == y+1){ color = dotgrid.theme.active.b_high; } - else if(cursor.x == x+1 && cursor.y == y+1){ color = dotgrid.theme.active.b_high; } + let color = is_step ? dotgrid.theme.active.b_med : dotgrid.theme.active.b_low + if ((y == 0 || y == dotgrid.grid_y) && cursor.x == x + 1) { color = dotgrid.theme.active.b_high } else if ((x == 0 || x == dotgrid.grid_x - 1) && cursor.y == y + 1) { color = dotgrid.theme.active.b_high } else if (cursor.x == x + 1 && cursor.y == y + 1) { color = dotgrid.theme.active.b_high } this.draw_marker({ - x:parseInt(x * dotgrid.grid_width) + dotgrid.grid_width, - y:parseInt(y * dotgrid.grid_height) + dotgrid.grid_height - },is_step ? 2.5 : 1.5,color); + x: parseInt(x * dotgrid.grid_width) + dotgrid.grid_width, + y: parseInt(y * dotgrid.grid_height) + dotgrid.grid_height + }, is_step ? 2.5 : 1.5, color) } } } - this.draw_marker = function(pos,radius = 1,color) - { - let ctx = this.el.getContext('2d'); - ctx.beginPath(); - ctx.lineWidth = 2; - ctx.arc(pos.x * this.scale, pos.y * this.scale, radius, 0, 2 * Math.PI, false); - ctx.fillStyle = color; - ctx.fill(); - ctx.closePath(); + this.draw_marker = function (pos, radius = 1, color) { + let ctx = this.el.getContext('2d') + ctx.beginPath() + ctx.lineWidth = 2 + ctx.arc(pos.x * this.scale, pos.y * this.scale, radius, 0, 2 * Math.PI, false) + ctx.fillStyle = color + ctx.fill() + ctx.closePath() } - this.draw_vertex = function(pos, radius = 5) - { - let ctx = this.el.getContext('2d'); - ctx.beginPath(); - ctx.lineWidth = 2; - ctx.arc((pos.x * this.scale), (pos.y * this.scale), radius, 0, 2 * Math.PI, false); - ctx.fillStyle = dotgrid.theme.active.f_med; - ctx.fill(); - ctx.closePath(); + this.draw_vertex = function (pos, radius = 5) { + let ctx = this.el.getContext('2d') + ctx.beginPath() + ctx.lineWidth = 2 + ctx.arc((pos.x * this.scale), (pos.y * this.scale), radius, 0, 2 * Math.PI, false) + ctx.fillStyle = dotgrid.theme.active.f_med + ctx.fill() + ctx.closePath() } - this.draw_rule = function(from,to) - { - let ctx = this.el.getContext('2d'); + this.draw_rule = function (from, to) { + let ctx = this.el.getContext('2d') - ctx.beginPath(); - ctx.moveTo(from.x,from.y); - ctx.lineTo(to.x,to.y); - ctx.lineCap="round"; - ctx.lineWidth = 3; - ctx.strokeStyle = dotgrid.theme.active.b_low; - ctx.stroke(); - ctx.closePath(); + ctx.beginPath() + ctx.moveTo(from.x, from.y) + ctx.lineTo(to.x, to.y) + ctx.lineCap = 'round' + ctx.lineWidth = 3 + ctx.strokeStyle = dotgrid.theme.active.b_low + ctx.stroke() + ctx.closePath() } - this.draw_ruler = function(pos) - { - let offset = 15 * this.scale; + this.draw_ruler = function (pos) { + let offset = 15 * this.scale let top = offset - let bottom = (dotgrid.tool.settings.size.height * this.scale)+offset + let bottom = (dotgrid.tool.settings.size.height * this.scale) + offset let left = offset let right = (dotgrid.tool.settings.size.width * this.scale) // Translation - this.draw_rule({x:pos.x * this.scale,y:top},{x:pos.x * this.scale,y:bottom}); - this.draw_rule({x:left,y:pos.y * this.scale},{x:right,y:pos.y * this.scale}); + this.draw_rule({ x: pos.x * this.scale, y: top }, { x: pos.x * this.scale, y: bottom }) + this.draw_rule({ x: left, y: pos.y * this.scale }, { x: right, y: pos.y * this.scale }) } - this.draw_rulers = function() - { - if(!dotgrid.cursor.translation){ return; } + this.draw_rulers = function () { + if (!dotgrid.cursor.translation) { return } - let ctx = this.el.getContext('2d'); + let ctx = this.el.getContext('2d') this.draw_ruler(dotgrid.cursor.translation.to) - ctx.setLineDash([]); - ctx.restore(); + ctx.setLineDash([]) + ctx.restore() } - this.draw_handle = function(pos, radius = 6) - { - let ctx = this.el.getContext('2d'); + this.draw_handle = function (pos, radius = 6) { + let ctx = this.el.getContext('2d') - ctx.beginPath(); - ctx.lineWidth = 3; - ctx.lineCap="round"; - ctx.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), radius+3, 0, 2 * Math.PI, false); - ctx.fillStyle = dotgrid.theme.active.f_high; - ctx.fill(); - ctx.strokeStyle = dotgrid.theme.active.f_high; - ctx.stroke(); - ctx.closePath(); + ctx.beginPath() + ctx.lineWidth = 3 + ctx.lineCap = 'round' + ctx.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), radius + 3, 0, 2 * Math.PI, false) + ctx.fillStyle = dotgrid.theme.active.f_high + ctx.fill() + ctx.strokeStyle = dotgrid.theme.active.f_high + ctx.stroke() + ctx.closePath() - ctx.beginPath(); - ctx.arc((pos.x * this.scale), (pos.y * this.scale), radius, 0, 2 * Math.PI, false); - ctx.fillStyle = dotgrid.theme.active.f_low; - ctx.fill(); - ctx.closePath(); + ctx.beginPath() + ctx.arc((pos.x * this.scale), (pos.y * this.scale), radius, 0, 2 * Math.PI, false) + ctx.fillStyle = dotgrid.theme.active.f_low + ctx.fill() + ctx.closePath() - ctx.beginPath(); - ctx.arc((pos.x * this.scale), (pos.y * this.scale), radius-3, 0, 2 * Math.PI, false); - ctx.fillStyle = dotgrid.theme.active.f_high; - ctx.fill(); - ctx.closePath(); + ctx.beginPath() + ctx.arc((pos.x * this.scale), (pos.y * this.scale), radius - 3, 0, 2 * Math.PI, false) + ctx.fillStyle = dotgrid.theme.active.f_high + ctx.fill() + ctx.closePath() } - this.draw_path = function(path,style) - { - let ctx = this.el.getContext('2d'); - let p = new Path2D(path); + this.draw_path = function (path, style) { + let ctx = this.el.getContext('2d') + let p = new Path2D(path) - ctx.strokeStyle = style.color; - ctx.lineWidth = style.thickness * this.scale; - ctx.lineCap = style.strokeLinecap; - ctx.lineJoin = style.strokeLinejoin; + ctx.strokeStyle = style.color + ctx.lineWidth = style.thickness * this.scale + ctx.lineCap = style.strokeLinecap + ctx.lineJoin = style.strokeLinejoin - if(style.fill && style.fill != "none"){ + if (style.fill && style.fill != 'none') { ctx.fillStyle = style.color - ctx.fill(p); + ctx.fill(p) } // Dash - if(style.strokeLineDash){ ctx.setLineDash(style.strokeLineDash); } - else{ ctx.setLineDash([]); } - ctx.stroke(p); + if (style.strokeLineDash) { ctx.setLineDash(style.strokeLineDash) } else { ctx.setLineDash([]) } + ctx.stroke(p) } - this.draw_translation = function() - { - if(!dotgrid.cursor.translation){ return; } + this.draw_translation = function () { + if (!dotgrid.cursor.translation) { return } - let ctx = this.el.getContext('2d'); - - ctx.beginPath(); - ctx.moveTo((dotgrid.cursor.translation.from.x * this.scale),(dotgrid.cursor.translation.from.y * this.scale)); - ctx.lineTo((dotgrid.cursor.translation.to.x * this.scale),(dotgrid.cursor.translation.to.y * this.scale)); - ctx.lineCap="round"; - ctx.lineWidth = 5; - ctx.strokeStyle = dotgrid.theme.active.f_low; - ctx.setLineDash([5,10]); - ctx.stroke(); - ctx.closePath(); + let ctx = this.el.getContext('2d') - ctx.setLineDash([]); - ctx.restore(); + ctx.beginPath() + ctx.moveTo((dotgrid.cursor.translation.from.x * this.scale), (dotgrid.cursor.translation.from.y * this.scale)) + ctx.lineTo((dotgrid.cursor.translation.to.x * this.scale), (dotgrid.cursor.translation.to.y * this.scale)) + ctx.lineCap = 'round' + ctx.lineWidth = 5 + ctx.strokeStyle = dotgrid.theme.active.f_low + ctx.setLineDash([5, 10]) + ctx.stroke() + ctx.closePath() + + ctx.setLineDash([]) + ctx.restore() } - this.draw_cursor = function(pos = dotgrid.cursor.pos,radius = dotgrid.tool.style().thickness-1) - { - let ctx = this.el.getContext('2d'); + this.draw_cursor = function (pos = dotgrid.cursor.pos, radius = dotgrid.tool.style().thickness - 1) { + let ctx = this.el.getContext('2d') - ctx.beginPath(); - ctx.lineWidth = 3; - ctx.lineCap = "round"; - ctx.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), 5, 0, 2 * Math.PI, false); - ctx.strokeStyle = dotgrid.theme.active.background; - ctx.stroke(); - ctx.closePath(); + ctx.beginPath() + ctx.lineWidth = 3 + ctx.lineCap = 'round' + ctx.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), 5, 0, 2 * Math.PI, false) + ctx.strokeStyle = dotgrid.theme.active.background + ctx.stroke() + ctx.closePath() - ctx.beginPath(); - ctx.lineWidth = 3; - ctx.lineCap = "round"; - ctx.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), clamp(radius,5,100), 0, 2 * Math.PI, false); - ctx.strokeStyle = dotgrid.theme.active.f_med; - ctx.stroke(); - ctx.closePath(); + ctx.beginPath() + ctx.lineWidth = 3 + ctx.lineCap = 'round' + ctx.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), clamp(radius, 5, 100), 0, 2 * Math.PI, false) + ctx.strokeStyle = dotgrid.theme.active.f_med + ctx.stroke() + ctx.closePath() } - this.draw_preview = function() - { - let ctx = this.el.getContext('2d'); + this.draw_preview = function () { + let ctx = this.el.getContext('2d') let operation = dotgrid.cursor.operation && dotgrid.cursor.operation.cast ? dotgrid.cursor.operation.cast : null - if(!dotgrid.tool.can_cast(operation)){ return; } - if(operation == "close"){ return; } + if (!dotgrid.tool.can_cast(operation)) { return } + if (operation == 'close') { return } - let path = new Generator([{vertices:dotgrid.tool.vertices,type:operation}]).toString({x:0,y:0},2) + let path = new Generator([{ vertices: dotgrid.tool.vertices, type: operation }]).toString({ x: 0, y: 0 }, 2) let style = { - color:dotgrid.theme.active.f_med, - thickness:2, - strokeLinecap:"round", - strokeLinejoin:"round", - strokeLineDash:[5, 15] + color: dotgrid.theme.active.f_med, + thickness: 2, + strokeLinecap: 'round', + strokeLinejoin: 'round', + strokeLineDash: [5, 15] } - this.draw_path(path,style) + this.draw_path(path, style) - ctx.setLineDash([]); - ctx.restore(); + ctx.setLineDash([]) + ctx.restore() } - function pos_is_equal(a,b){ return a && b && Math.abs(a.x) == Math.abs(b.x) && Math.abs(a.y) == Math.abs(b.y) } - function clamp(v, min, max) { return v < min ? min : v > max ? max : v; } + function pos_is_equal (a, b) { return a && b && Math.abs(a.x) == Math.abs(b.x) && Math.abs(a.y) == Math.abs(b.y) } + function clamp (v, min, max) { return v < min ? min : v > max ? max : v } } diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js index 7782cf2..6d96dab 100644 --- a/desktop/sources/scripts/interface.js +++ b/desktop/sources/scripts/interface.js @@ -1,55 +1,52 @@ -'use strict'; +'use strict' -function Interface() -{ - this.el = document.createElement("div"); - this.el.id = "interface"; +function Interface () { + this.el = document.createElement('div') + this.el.id = 'interface' - this.el.appendChild(this.menu_el = document.createElement("div")); - this.menu_el.id = "menu"; + this.el.appendChild(this.menu_el = document.createElement('div')) + this.menu_el.id = 'menu' - this.is_visible = true; - this.zoom = false; + this.is_visible = true + this.zoom = false - this.install = function(host) - { - host.appendChild(this.el); + this.install = function (host) { + host.appendChild(this.el) } - this.start = function(host) - { - let html = "" + this.start = function (host) { + let html = '' let options = { - cast:{ - line: { key:"A",icon:"M60,60 L240,240" }, - arc_c: { key:"S",icon:"M60,60 A180,180 0 0,1 240,240" }, - arc_r: { key:"D",icon:"M60,60 A180,180 0 0,0 240,240" }, - bezier: { key:"F",icon:"M60,60 Q60,150 150,150 Q240,150 240,240" }, - close: { key:"Z",icon:"M60,60 A180,180 0 0,1 240,240 M60,60 A180,180 0 0,0 240,240" } + cast: { + line: { key: 'A', icon: 'M60,60 L240,240' }, + arc_c: { key: 'S', icon: 'M60,60 A180,180 0 0,1 240,240' }, + arc_r: { key: 'D', icon: 'M60,60 A180,180 0 0,0 240,240' }, + bezier: { key: 'F', icon: 'M60,60 Q60,150 150,150 Q240,150 240,240' }, + close: { key: 'Z', icon: 'M60,60 A180,180 0 0,1 240,240 M60,60 A180,180 0 0,0 240,240' } }, - toggle:{ - linecap: { key:"Q",icon:"M60,60 L60,60 L180,180 L240,180 L240,240 L180,240 L180,180" }, - linejoin: { key:"W",icon:"M60,60 L120,120 L180,120 M120,180 L180,180 L240,240" }, - thickness: { key:"",icon:"M120,90 L120,90 L90,120 L180,210 L210,180 Z M105,105 L105,105 L60,60 M195,195 L195,195 L240,240" }, - mirror: { key:"E",icon:"M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210" }, - fill: { key:"R",icon:"M60,60 L60,150 L150,150 L240,150 L240,240 Z" } + toggle: { + linecap: { key: 'Q', icon: 'M60,60 L60,60 L180,180 L240,180 L240,240 L180,240 L180,180' }, + linejoin: { key: 'W', icon: 'M60,60 L120,120 L180,120 M120,180 L180,180 L240,240' }, + thickness: { key: '', icon: 'M120,90 L120,90 L90,120 L180,210 L210,180 Z M105,105 L105,105 L60,60 M195,195 L195,195 L240,240' }, + mirror: { key: 'E', icon: 'M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210' }, + fill: { key: 'R', icon: 'M60,60 L60,150 L150,150 L240,150 L240,240 Z' } }, - misc:{ - color: { key:"G",icon:"M150,60 A90,90 0 0,1 240,150 A-90,90 0 0,1 150,240 A-90,-90 0 0,1 60,150 A90,-90 0 0,1 150,60"} + misc: { + color: { key: 'G', icon: 'M150,60 A90,90 0 0,1 240,150 A-90,90 0 0,1 150,240 A-90,-90 0 0,1 60,150 A90,-90 0 0,1 150,60' } }, - source:{ - open: { key:"c-O", icon:"M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M155,95 A60,60 0 0,1 215,155 A60,60 0 0,1 155,215 A60,60 0 0,1 95,155 A60,60 0 0,1 155,95 "}, - render: { key:"c-R", icon:"M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M110,155 L110,155 L200,155 "}, - export: { key:"c-E", icon:"M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M110,140 L110,140 L200,140 M110,170 L110,170 L200,170"}, - save: { key:"c-S", icon:"M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M110,155 L110,155 L200,155 M110,185 L110,185 L200,185 M110,125 L110,125 L200,125"}, - grid: { key:"H", icon:"M65,155 Q155,245 245,155 M65,155 Q155,65 245,155 M155,125 A30,30 0 0,1 185,155 A30,30 0 0,1 155,185 A30,30 0 0,1 125,155 A30,30 0 0,1 155,125 "}, - } + source: { + open: { key: 'c-O', icon: 'M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M155,95 A60,60 0 0,1 215,155 A60,60 0 0,1 155,215 A60,60 0 0,1 95,155 A60,60 0 0,1 155,95 ' }, + render: { key: 'c-R', icon: 'M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M110,155 L110,155 L200,155 ' }, + export: { key: 'c-E', icon: 'M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M110,140 L110,140 L200,140 M110,170 L110,170 L200,170' }, + save: { key: 'c-S', icon: 'M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M110,155 L110,155 L200,155 M110,185 L110,185 L200,185 M110,125 L110,125 L200,125' }, + grid: { key: 'H', icon: 'M65,155 Q155,245 245,155 M65,155 Q155,65 245,155 M155,125 A30,30 0 0,1 185,155 A30,30 0 0,1 155,185 A30,30 0 0,1 125,155 A30,30 0 0,1 155,125 ' } + } } - for(const type in options){ - const tools = options[type]; - for(const name in tools){ - const tool = tools[name]; + for (const type in options) { + const tools = options[type] + for (const name in tools) { + const tool = tools[name] html += ` ` } - } this.menu_el.innerHTML = html this.menu_el.appendChild(dotgrid.picker.el) } - this.over = function(type,name) - { + this.over = function (type, name) { dotgrid.cursor.operation = {} - dotgrid.cursor.operation[type] = name; + dotgrid.cursor.operation[type] = name } - this.out = function(type,name) - { - dotgrid.cursor.operation = "" + this.out = function (type, name) { + dotgrid.cursor.operation = '' } - this.up = function(type,name) - { - if(!dotgrid.tool[type]){ console.warn(`Unknown option(type): ${type}.${name}`,dotgrid.tool); return; } + this.up = function (type, name) { + if (!dotgrid.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, dotgrid.tool); return } - this.update(true); + this.update(true) } - this.down = function(type,name) - { - if(!dotgrid.tool[type]){ console.warn(`Unknown option(type): ${type}.${name}`,dotgrid.tool); return; } + this.down = function (type, name) { + if (!dotgrid.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, dotgrid.tool); return } dotgrid.tool[type](name) - this.update(true); + this.update(true) } - this.prev_operation = null; + this.prev_operation = null - this.update = function(force = false,id) - { - if(this.prev_operation == dotgrid.cursor.operation && force == false){ return; } + this.update = function (force = false, id) { + if (this.prev_operation == dotgrid.cursor.operation && force == false) { return } - let multi_vertices = null; + let multi_vertices = null let segments = dotgrid.tool.layer() - const sum_segments = dotgrid.tool.length(); + const sum_segments = dotgrid.tool.length() - for(const i in segments){ - if(segments[i].vertices.length > 2){ multi_vertices = true; break; } + for (const i in segments) { + if (segments[i].vertices.length > 2) { multi_vertices = true; break } } - document.getElementById("option_line").className.baseVal = !dotgrid.tool.can_cast("line") ? "icon inactive" : "icon"; - document.getElementById("option_arc_c").className.baseVal = !dotgrid.tool.can_cast("arc_c") ? "icon inactive" : "icon"; - document.getElementById("option_arc_r").className.baseVal = !dotgrid.tool.can_cast("arc_r") ? "icon inactive" : "icon"; - document.getElementById("option_bezier").className.baseVal = !dotgrid.tool.can_cast("bezier") ? "icon inactive" : "icon"; - document.getElementById("option_close").className.baseVal = !dotgrid.tool.can_cast("close") ? "icon inactive" : "icon"; - - document.getElementById("option_thickness").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; - document.getElementById("option_linecap").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; - document.getElementById("option_linejoin").className.baseVal = dotgrid.tool.layer().length < 1 || !multi_vertices ? "icon inactive" : "icon"; - document.getElementById("option_mirror").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; - document.getElementById("option_fill").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; - - document.getElementById("option_color").children[0].style.fill = dotgrid.tool.style().color; - document.getElementById("option_color").children[0].style.stroke = dotgrid.tool.style().color; - document.getElementById("option_color").className.baseVal = "icon"; + document.getElementById('option_line').className.baseVal = !dotgrid.tool.can_cast('line') ? 'icon inactive' : 'icon' + document.getElementById('option_arc_c').className.baseVal = !dotgrid.tool.can_cast('arc_c') ? 'icon inactive' : 'icon' + document.getElementById('option_arc_r').className.baseVal = !dotgrid.tool.can_cast('arc_r') ? 'icon inactive' : 'icon' + document.getElementById('option_bezier').className.baseVal = !dotgrid.tool.can_cast('bezier') ? 'icon inactive' : 'icon' + document.getElementById('option_close').className.baseVal = !dotgrid.tool.can_cast('close') ? 'icon inactive' : 'icon' + + document.getElementById('option_thickness').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' + document.getElementById('option_linecap').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' + document.getElementById('option_linejoin').className.baseVal = dotgrid.tool.layer().length < 1 || !multi_vertices ? 'icon inactive' : 'icon' + document.getElementById('option_mirror').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' + document.getElementById('option_fill').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' + + document.getElementById('option_color').children[0].style.fill = dotgrid.tool.style().color + document.getElementById('option_color').children[0].style.stroke = dotgrid.tool.style().color + document.getElementById('option_color').className.baseVal = 'icon' // Source - document.getElementById("option_save").className.baseVal = sum_segments < 1 ? "icon inactive source" : "icon source"; - document.getElementById("option_export").className.baseVal = sum_segments < 1 ? "icon inactive source" : "icon source"; - document.getElementById("option_render").className.baseVal = sum_segments < 1 ? "icon inactive source" : "icon source"; + document.getElementById('option_save').className.baseVal = sum_segments < 1 ? 'icon inactive source' : 'icon source' + document.getElementById('option_export').className.baseVal = sum_segments < 1 ? 'icon inactive source' : 'icon source' + document.getElementById('option_render').className.baseVal = sum_segments < 1 ? 'icon inactive source' : 'icon source' + + document.getElementById('option_grid').className.baseVal = dotgrid.guide.show_extras ? 'icon inactive source' : 'icon source' - document.getElementById("option_grid").className.baseVal = dotgrid.guide.show_extras ? "icon inactive source" : "icon source"; - // Grid - if(dotgrid.guide.show_extras){ document.getElementById("grid_path").setAttribute("d","M65,155 Q155,245 245,155 M65,155 Q155,65 245,155 M155,125 A30,30 0 0,1 185,155 A30,30 0 0,1 155,185 A30,30 0 0,1 125,155 A30,30 0 0,1 155,125 ") } - else{ document.getElementById("grid_path").setAttribute("d","M65,155 Q155,245 245,155 M65,155 ") } + if (dotgrid.guide.show_extras) { document.getElementById('grid_path').setAttribute('d', 'M65,155 Q155,245 245,155 M65,155 Q155,65 245,155 M155,125 A30,30 0 0,1 185,155 A30,30 0 0,1 155,185 A30,30 0 0,1 125,155 A30,30 0 0,1 155,125 ') } else { document.getElementById('grid_path').setAttribute('d', 'M65,155 Q155,245 245,155 M65,155 ') } // Mirror - if(dotgrid.tool.style().mirror_style == 0){ document.getElementById("mirror_path").setAttribute("d","M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210") } - else if(dotgrid.tool.style().mirror_style == 1){ document.getElementById("mirror_path").setAttribute("d","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210") } - else if(dotgrid.tool.style().mirror_style == 2){ document.getElementById("mirror_path").setAttribute("d","M210,90 L210,90 L90,210 M60,60 L60,60 L120,120 M180,180 L180,180 L240,240") } - else if(dotgrid.tool.style().mirror_style == 3){ document.getElementById("mirror_path").setAttribute("d","M60,60 L60,60 L120,120 L120,120 L180,120 M120,150 L120,150 L180,150 M120,180 L120,180 L180,180 L180,180 L240,240 ") } - else if(dotgrid.tool.style().mirror_style == 4){ document.getElementById("mirror_path").setAttribute("d","M120,120 L120,120 L120,120 L180,120 M120,150 L120,150 L180,150 M120,180 L120,180 L180,180 L180,180 L180,180 L240,240 M120,210 L120,210 L180,210 M120,90 L120,90 L180,90 M60,60 L60,60 L120,120 ") } + if (dotgrid.tool.style().mirror_style == 0) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210') } else if (dotgrid.tool.style().mirror_style == 1) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L240,240 M180,120 L210,90 M120,180 L90,210') } else if (dotgrid.tool.style().mirror_style == 2) { document.getElementById('mirror_path').setAttribute('d', 'M210,90 L210,90 L90,210 M60,60 L60,60 L120,120 M180,180 L180,180 L240,240') } else if (dotgrid.tool.style().mirror_style == 3) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L60,60 L120,120 L120,120 L180,120 M120,150 L120,150 L180,150 M120,180 L120,180 L180,180 L180,180 L240,240 ') } else if (dotgrid.tool.style().mirror_style == 4) { document.getElementById('mirror_path').setAttribute('d', 'M120,120 L120,120 L120,120 L180,120 M120,150 L120,150 L180,150 M120,180 L120,180 L180,180 L180,180 L180,180 L240,240 M120,210 L120,210 L180,210 M120,90 L120,90 L180,90 M60,60 L60,60 L120,120 ') } - this.prev_operation = dotgrid.cursor.operation; + this.prev_operation = dotgrid.cursor.operation } - this.toggle = function() - { - this.is_visible = this.is_visible ? false : true; - this.el.className = this.is_visible ? "visible" : "hidden"; + this.toggle = function () { + this.is_visible = !this.is_visible + this.el.className = this.is_visible ? 'visible' : 'hidden' } } diff --git a/desktop/sources/scripts/lib/controller.js b/desktop/sources/scripts/lib/controller.js index 786f75f..1448b26 100644 --- a/desktop/sources/scripts/lib/controller.js +++ b/desktop/sources/scripts/lib/controller.js @@ -1,198 +1,185 @@ -'use strict'; +'use strict' -function Controller() -{ - this.menu = {default:{}}; - this.mode = "default"; +function Controller () { + this.menu = { default: {} } + this.mode = 'default' - this.app = require('electron').remote.app; + this.app = require('electron').remote.app - this.start = function() - { + 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 } + console.log(`${mode}/${cat}/${label} <${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.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.set = function(mode = "default") - { - this.mode = mode; - this.commit(); + this.set = function (mode = 'default') { + this.mode = mode + this.commit() } - this.format = function() - { - let f = []; - let m = this.menu[this.mode]; - for(const cat in m){ - let submenu = []; - for(const name in m[cat]){ - let option = m[cat][name]; - if(option.role){ - submenu.push({role:option.role}) - } - else{ - submenu.push({label:name,accelerator:option.accelerator,click:option.fn}) + this.format = function () { + let f = [] + let m = this.menu[this.mode] + for (const cat in m) { + let submenu = [] + for (const name in m[cat]) { + let 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.inject_menu(this.format()) } - this.docs = function() - { - console.log("Generating docs.."); + this.docs = function () { + console.log('Generating docs..') let svg = this.generate_svg(this.format()) - let txt = this.documentation(this.format()); + let txt = this.documentation(this.format()) dialog.showSaveDialog((fileName) => { - if (fileName === undefined){ return; } - fileName = fileName.substr(-4,4) != ".svg" ? fileName+".svg" : fileName; - fs.writeFile(fileName,svg); - fs.writeFile(fileName.replace(".svg",".md"),txt); - }); + if (fileName === undefined) { return } + fileName = fileName.substr(-4, 4) != '.svg' ? fileName + '.svg' : fileName + fs.writeFile(fileName, svg) + fs.writeFile(fileName.replace('.svg', '.md'), txt) + }) } - this.generate_svg = function(m) - { - let svg_html = ""; + this.generate_svg = function (m) { + let svg_html = '' - for(const id in this.layout){ - let key = this.layout[id]; - let acc = this.accelerator_for_key(key.name,m); - svg_html += `