Implemented eslint
This commit is contained in:
Devine Lu Linvega
parent
2feaec6c0a
commit
f1f0c41ee0
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"extends": "standard",
|
||||
"env": {
|
||||
"browser": true,
|
||||
"node": true
|
||||
},
|
||||
"globals": {
|
||||
"DOTGRID": true
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
{
|
||||
"name": "Dotgrid",
|
||||
"productName": "Dotgrid",
|
||||
"version": "0.1.0",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"start": "electron .",
|
||||
"lint": "eslint --ignore-path ../.gitignore .",
|
||||
"clean": "rm -r ~/Desktop/Dotgrid-darwin-x64/ ; rm -r ~/Desktop/Dotgrid-linux-x64/ ; rm -r ~/Desktop/Dotgrid-win32-x64/ ; rm -r ~/Desktop/Dotgrid-linux-armv7l/ ; echo 'cleaned build location'",
|
||||
"build_osx": "electron-packager . Dotgrid --platform=darwin --arch=x64 --out ~/Desktop/ --overwrite --icon=icon.icns ; echo 'Built for OSX'",
|
||||
"build_linux": "electron-packager . Dotgrid --platform=linux --arch=x64 --out ~/Desktop/ --overwrite --icon=icon.ico ; echo 'Built for LINUX'",
|
||||
|
|
@ -17,9 +19,19 @@
|
|||
"push": "npm run build ; npm run push_theme ; npm run push_osx ; npm run push_linux ; npm run push_win ; npm run clean ; npm run push_status"
|
||||
},
|
||||
"devDependencies": {
|
||||
"electron": "^1.8.8"
|
||||
"electron": "^1.8.8",
|
||||
"electron-packager": "^12.1.1",
|
||||
"eslint": "^5.6.1",
|
||||
"eslint-config-standard": "^12.0.0",
|
||||
"eslint-plugin-import": "^2.14.0",
|
||||
"eslint-plugin-node": "^7.0.1",
|
||||
"eslint-plugin-promise": "^4.0.1",
|
||||
"eslint-plugin-standard": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"electron-packager": "^12.1.1"
|
||||
|
||||
},
|
||||
"standard": {
|
||||
"globals": [ "DOTGRID" ]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script type="text/javascript" src="scripts/lib/controller.js"></script>
|
||||
<script type="text/javascript" src="scripts/lib/history.js"></script>
|
||||
|
||||
<script type="text/javascript" src="scripts/dotgrid.js"></script>
|
||||
<script type="text/javascript" src="scripts/DOTGRID.js"></script>
|
||||
<script type="text/javascript" src="scripts/cursor.js"></script>
|
||||
<script type="text/javascript" src="scripts/guide.js"></script>
|
||||
<script type="text/javascript" src="scripts/renderer.js"></script>
|
||||
|
|
@ -32,87 +32,86 @@
|
|||
const {dialog,app} = require('electron').remote;
|
||||
const fs = require('fs');
|
||||
|
||||
const dotgrid = new Dotgrid(300,300,20,20,4,4);
|
||||
dotgrid.controller = new Controller();
|
||||
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.toggle_fullscreen(); },"CmdOrCtrl+Enter");
|
||||
dotgrid.controller.add("default","*","Hide",() => { app.toggle_visible(); },"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.toggle_fullscreen(); },"CmdOrCtrl+Enter");
|
||||
DOTGRID.controller.add("default","*","Hide",() => { app.toggle_visible(); },"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.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_role("default","Edit","copy");
|
||||
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.add("default","Edit","Redo",() => { dotgrid.tool.clear() },"Escape");
|
||||
DOTGRID.controller.add_role("default","Edit","copy");
|
||||
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.add("default","Edit","Redo",() => { 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","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","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","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","Manual","Add Point",() => { dotgrid.tool.add_vertex(dotgrid.cursor.pos); dotgrid.guide.update() },"Enter");
|
||||
dotgrid.controller.add("default","Manual","Move Up",() => { dotgrid.cursor.pos.y -= 15; dotgrid.guide.update() },"Up");
|
||||
dotgrid.controller.add("default","Manual","Move Right",() => { dotgrid.cursor.pos.x += 15; dotgrid.guide.update() },"Right");
|
||||
dotgrid.controller.add("default","Manual","Move Down",() => { dotgrid.cursor.pos.y += 15; dotgrid.guide.update() },"Down");
|
||||
dotgrid.controller.add("default","Manual","Move Left",() => { dotgrid.cursor.pos.x -= 15; dotgrid.guide.update() },"Left");
|
||||
dotgrid.controller.add("default","Manual","Remove Point",() => { dotgrid.tool.remove_segments_at(dotgrid.cursor.pos); },"Shift+Backspace");
|
||||
dotgrid.controller.add("default","Manual","Remove Segment",() => { dotgrid.tool.remove_segment(); },"Backspace");
|
||||
DOTGRID.controller.add("default","Manual","Add Point",() => { DOTGRID.tool.add_vertex(DOTGRID.cursor.pos); DOTGRID.guide.update() },"Enter");
|
||||
DOTGRID.controller.add("default","Manual","Move Up",() => { DOTGRID.cursor.pos.y -= 15; DOTGRID.guide.update() },"Up");
|
||||
DOTGRID.controller.add("default","Manual","Move Right",() => { DOTGRID.cursor.pos.x += 15; DOTGRID.guide.update() },"Right");
|
||||
DOTGRID.controller.add("default","Manual","Move Down",() => { DOTGRID.cursor.pos.y += 15; DOTGRID.guide.update() },"Down");
|
||||
DOTGRID.controller.add("default","Manual","Move Left",() => { DOTGRID.cursor.pos.x -= 15; DOTGRID.guide.update() },"Left");
|
||||
DOTGRID.controller.add("default","Manual","Remove Point",() => { DOTGRID.tool.remove_segments_at(DOTGRID.cursor.pos); },"Shift+Backspace");
|
||||
DOTGRID.controller.add("default","Manual","Remove Segment",() => { DOTGRID.tool.remove_segment(); },"Backspace");
|
||||
|
||||
dotgrid.controller.add("default","Layers","Foreground",() => { dotgrid.tool.select_layer(0) },"CmdOrCtrl+1");
|
||||
dotgrid.controller.add("default","Layers","Middleground",() => { dotgrid.tool.select_layer(1) },"CmdOrCtrl+2");
|
||||
dotgrid.controller.add("default","Layers","Background",() => { dotgrid.tool.select_layer(2) },"CmdOrCtrl+3");
|
||||
dotgrid.controller.add("default","Layers","Next Layer",() => { dotgrid.tool.select_next_layer() },"Tab");
|
||||
dotgrid.controller.add("default","Layers","Prev Layer",() => { dotgrid.tool.select_prev_layer() },"Shift+Tab");
|
||||
DOTGRID.controller.add("default","Layers","Foreground",() => { DOTGRID.tool.select_layer(0) },"CmdOrCtrl+1");
|
||||
DOTGRID.controller.add("default","Layers","Middleground",() => { DOTGRID.tool.select_layer(1) },"CmdOrCtrl+2");
|
||||
DOTGRID.controller.add("default","Layers","Background",() => { DOTGRID.tool.select_layer(2) },"CmdOrCtrl+3");
|
||||
DOTGRID.controller.add("default","Layers","Next Layer",() => { DOTGRID.tool.select_next_layer() },"Tab");
|
||||
DOTGRID.controller.add("default","Layers","Prev Layer",() => { DOTGRID.tool.select_prev_layer() },"Shift+Tab");
|
||||
|
||||
dotgrid.controller.add("default","View","Color Picker",() => { dotgrid.picker.start(); },"G");
|
||||
dotgrid.controller.add("default","View","Toggle Grid",() => { dotgrid.guide.toggle(); },"H");
|
||||
DOTGRID.controller.add("default","View","Color Picker",() => { DOTGRID.picker.start(); },"G");
|
||||
DOTGRID.controller.add("default","View","Toggle Grid",() => { DOTGRID.guide.toggle(); },"H");
|
||||
|
||||
dotgrid.controller.add("default","Theme","Noir",() => { dotgrid.theme.noir(); },"CmdOrCtrl+Shift+1");
|
||||
dotgrid.controller.add("default","Theme","Pale",() => { dotgrid.theme.pale(); },"CmdOrCtrl+Shift+2");
|
||||
dotgrid.controller.add("default","Theme","Invert",() => { dotgrid.theme.invert(); },"CmdOrCtrl+Shift+I");
|
||||
dotgrid.controller.add("default","Theme","Install",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes'); });
|
||||
DOTGRID.controller.add("default","Theme","Noir",() => { DOTGRID.theme.noir(); },"CmdOrCtrl+Shift+1");
|
||||
DOTGRID.controller.add("default","Theme","Pale",() => { DOTGRID.theme.pale(); },"CmdOrCtrl+Shift+2");
|
||||
DOTGRID.controller.add("default","Theme","Invert",() => { DOTGRID.theme.invert(); },"CmdOrCtrl+Shift+I");
|
||||
DOTGRID.controller.add("default","Theme","Install",() => { 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.toggle_fullscreen(); },"CmdOrCtrl+Enter");
|
||||
dotgrid.controller.add("picker","*","Hide",() => { app.toggle_visible(); },"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.toggle_fullscreen(); },"CmdOrCtrl+Enter");
|
||||
DOTGRID.controller.add("picker","*","Hide",() => { app.toggle_visible(); },"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.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.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);
|
||||
DOTGRID.start();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use strict'
|
||||
|
||||
function Cursor () {
|
||||
DOTGRID.Cursor = function() {
|
||||
this.pos = { x: 0, y: 0 }
|
||||
this.translation = null
|
||||
this.operation = null
|
||||
|
|
@ -20,12 +20,12 @@ function Cursor () {
|
|||
this.pos = this.pos_from_event(e)
|
||||
|
||||
// Translation
|
||||
if (dotgrid.tool.vertex_at(this.pos)) {
|
||||
if (DOTGRID.tool.vertex_at(this.pos)) {
|
||||
this.translate(this.pos, this.pos, e.shiftKey)
|
||||
}
|
||||
|
||||
dotgrid.guide.update()
|
||||
dotgrid.interface.update()
|
||||
DOTGRID.guide.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.guide.update()
|
||||
DOTGRID.guide.update()
|
||||
}
|
||||
|
||||
dotgrid.interface.update()
|
||||
DOTGRID.interface.update()
|
||||
e.preventDefault()
|
||||
|
||||
this.last_pos = this.pos
|
||||
|
|
@ -52,29 +52,29 @@ function Cursor () {
|
|||
this.up = function (e) {
|
||||
this.pos = this.pos_from_event(e)
|
||||
|
||||
if (e.altKey) { dotgrid.tool.remove_segments_at(this.pos); this.translate(); return }
|
||||
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) }
|
||||
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()
|
||||
DOTGRID.tool.add_vertex({ x: this.pos.x, y: this.pos.y })
|
||||
DOTGRID.picker.stop()
|
||||
}
|
||||
|
||||
this.translate()
|
||||
|
||||
dotgrid.interface.update()
|
||||
dotgrid.guide.update()
|
||||
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)
|
||||
DOTGRID.tool.remove_segments_at(this.pos)
|
||||
e.preventDefault()
|
||||
|
||||
setTimeout(() => { dotgrid.tool.clear() }, 150)
|
||||
setTimeout(() => { DOTGRID.tool.clear() }, 150)
|
||||
}
|
||||
|
||||
// Position Mods
|
||||
|
|
@ -85,16 +85,16 @@ function Cursor () {
|
|||
|
||||
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
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,10 @@
|
|||
'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()
|
||||
|
||||
this.grid_x = grid_x
|
||||
this.grid_y = grid_y
|
||||
|
|
@ -19,6 +14,13 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
|
|||
// ISU
|
||||
|
||||
this.install = function (host) {
|
||||
|
||||
this.guide = new this.Guide()
|
||||
this.tool = new this.Tool()
|
||||
this.interface = new this.Interface()
|
||||
this.renderer = new this.Renderer()
|
||||
this.picker = new this.Picker()
|
||||
this.cursor = new this.Cursor()
|
||||
host.appendChild(this.guide.el)
|
||||
|
||||
this.interface.install(host)
|
||||
|
|
@ -31,14 +33,14 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
|
|||
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()
|
||||
|
||||
|
|
@ -46,9 +48,9 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
|
|||
}
|
||||
|
||||
this.update = function () {
|
||||
dotgrid.resize()
|
||||
dotgrid.interface.update()
|
||||
dotgrid.guide.update()
|
||||
DOTGRID.resize()
|
||||
DOTGRID.interface.update()
|
||||
DOTGRID.guide.update()
|
||||
}
|
||||
|
||||
// File
|
||||
|
|
@ -75,7 +77,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
|
|||
}
|
||||
|
||||
this.save = function (content = this.tool.export()) {
|
||||
if (dotgrid.tool.length() < 1) { console.warn('Nothing to save'); return }
|
||||
if (DOTGRID.tool.length() < 1) { console.warn('Nothing to save'); return }
|
||||
|
||||
if (!dialog) { this.save_web(content); return }
|
||||
|
||||
|
|
@ -83,21 +85,21 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
|
|||
if (fileName === undefined) { return }
|
||||
fileName = fileName.substr(-5, 5) != '.grid' ? fileName + '.grid' : fileName
|
||||
fs.writeFileSync(fileName, content)
|
||||
dotgrid.guide.update()
|
||||
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 = `<style>body { background:${dotgrid.theme.active.background}; color:${dotgrid.theme.active.f_med}} pre { color:${dotgrid.theme.active.f_high} }</style><p>To save: Copy this into a .grid file.<br />To load: Drag the .grid onto the browser window.</p><pre>${content}</pre>`
|
||||
win.document.body.innerHTML = `<style>body { background:${DOTGRID.theme.active.background}; color:${DOTGRID.theme.active.f_med}} pre { color:${DOTGRID.theme.active.f_high} }</style><p>To save: Copy this into a .grid file.<br />To load: Drag the .grid onto the browser window.</p><pre>${content}</pre>`
|
||||
}
|
||||
|
||||
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) {
|
||||
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 (DOTGRID.tool.length() < 1) { console.warn('Nothing to render'); return }
|
||||
|
||||
if (!dialog) { dotgrid.render_web(content); 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 }
|
||||
|
|
@ -113,7 +115,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
|
|||
}
|
||||
|
||||
this.export = function (content = this.renderer.to_svg()) {
|
||||
if (dotgrid.tool.length() < 1) { console.warn('Nothing to export'); return }
|
||||
if (DOTGRID.tool.length() < 1) { console.warn('Nothing to export'); return }
|
||||
|
||||
if (!dialog) { this.export_web(content); return }
|
||||
|
||||
|
|
@ -128,7 +130,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
|
|||
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 = `<style>body { background:${dotgrid.theme.active.background}}</style>${dotgrid.renderer.to_svg()}`
|
||||
win.document.body.innerHTML = `<style>body { background:${DOTGRID.theme.active.background}}</style>${DOTGRID.renderer.to_svg()}`
|
||||
}
|
||||
|
||||
// Basics
|
||||
|
|
@ -152,10 +154,10 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
|
|||
this.grid_width = this.tool.settings.size.width / this.grid_x
|
||||
this.grid_height = this.tool.settings.size.height / this.grid_y
|
||||
|
||||
dotgrid.guide.resize(size)
|
||||
DOTGRID.guide.resize(size)
|
||||
|
||||
this.interface.update()
|
||||
dotgrid.guide.update()
|
||||
DOTGRID.guide.update()
|
||||
}
|
||||
|
||||
this.set_zoom = function (scale) {
|
||||
|
|
@ -179,29 +181,29 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
|
|||
this.history.clear()
|
||||
this.tool.reset()
|
||||
this.reset()
|
||||
dotgrid.guide.update()
|
||||
dotgrid.interface.update(true)
|
||||
DOTGRID.guide.update()
|
||||
DOTGRID.interface.update(true)
|
||||
}
|
||||
|
||||
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) {
|
||||
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.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}`
|
||||
}
|
||||
|
|
@ -216,38 +218,38 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
|
|||
|
||||
const reader = new FileReader()
|
||||
reader.onload = function (e) {
|
||||
dotgrid.tool.replace(JSON.parse(e.target.result.toString().trim()))
|
||||
dotgrid.guide.update()
|
||||
DOTGRID.tool.replace(JSON.parse(e.target.result.toString().trim()))
|
||||
DOTGRID.guide.update()
|
||||
}
|
||||
reader.readAsText(file)
|
||||
}
|
||||
|
||||
this.copy = function (e) {
|
||||
dotgrid.guide.update()
|
||||
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.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()
|
||||
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.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) {
|
||||
|
|
@ -255,17 +257,17 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
|
|||
let data = e.clipboardData.getData('text/source')
|
||||
if (is_json(data)) {
|
||||
data = JSON.parse(data.trim())
|
||||
dotgrid.tool.import(data)
|
||||
DOTGRID.tool.import(data)
|
||||
}
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
dotgrid.guide.update()
|
||||
DOTGRID.guide.update()
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function (e) {
|
||||
dotgrid.update()
|
||||
DOTGRID.update()
|
||||
}, false)
|
||||
|
||||
window.addEventListener('dragover', function (e) {
|
||||
|
|
@ -282,3 +284,7 @@ function is_json (text) { try { JSON.parse(text); return true } catch (error) {
|
|||
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 }
|
||||
|
||||
const DOTGRID = new Dotgrid(300,300,20,20,4,4);
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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) { 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 }
|
||||
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 }
|
||||
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
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use strict'
|
||||
|
||||
function Guide () {
|
||||
DOTGRID.Guide = function(){
|
||||
this.el = document.createElement('canvas')
|
||||
this.el.id = 'guide'
|
||||
this.el.width = 640
|
||||
|
|
@ -23,12 +23,12 @@ function Guide () {
|
|||
|
||||
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])
|
||||
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()
|
||||
|
|
@ -58,8 +58,8 @@ function Guide () {
|
|||
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 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)
|
||||
|
|
@ -68,26 +68,26 @@ function Guide () {
|
|||
}
|
||||
|
||||
this.draw_vertices = function () {
|
||||
for (const id in dotgrid.tool.vertices) {
|
||||
this.draw_vertex(dotgrid.tool.vertices[id])
|
||||
for (const id in DOTGRID.tool.vertices) {
|
||||
this.draw_vertex(DOTGRID.tool.vertices[id])
|
||||
}
|
||||
}
|
||||
|
||||
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 y = dotgrid.grid_y; y >= 0; y--) {
|
||||
let is_step = x % dotgrid.block_x == 0 && y % dotgrid.block_y == 0
|
||||
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
|
||||
// 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
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
|
@ -108,7 +108,7 @@ function Guide () {
|
|||
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.fillStyle = DOTGRID.theme.active.f_med
|
||||
ctx.fill()
|
||||
ctx.closePath()
|
||||
}
|
||||
|
|
@ -121,7 +121,7 @@ function Guide () {
|
|||
ctx.lineTo(to.x, to.y)
|
||||
ctx.lineCap = 'round'
|
||||
ctx.lineWidth = 3
|
||||
ctx.strokeStyle = dotgrid.theme.active.b_low
|
||||
ctx.strokeStyle = DOTGRID.theme.active.b_low
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
}
|
||||
|
|
@ -129,9 +129,9 @@ function Guide () {
|
|||
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)
|
||||
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 })
|
||||
|
|
@ -139,11 +139,11 @@ function Guide () {
|
|||
}
|
||||
|
||||
this.draw_rulers = function () {
|
||||
if (!dotgrid.cursor.translation) { return }
|
||||
if (!DOTGRID.cursor.translation) { return }
|
||||
|
||||
let ctx = this.el.getContext('2d')
|
||||
|
||||
this.draw_ruler(dotgrid.cursor.translation.to)
|
||||
this.draw_ruler(DOTGRID.cursor.translation.to)
|
||||
|
||||
ctx.setLineDash([])
|
||||
ctx.restore()
|
||||
|
|
@ -156,21 +156,21 @@ function Guide () {
|
|||
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.fillStyle = DOTGRID.theme.active.f_high
|
||||
ctx.fill()
|
||||
ctx.strokeStyle = dotgrid.theme.active.f_high
|
||||
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.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.fillStyle = DOTGRID.theme.active.f_high
|
||||
ctx.fill()
|
||||
ctx.closePath()
|
||||
}
|
||||
|
|
@ -195,16 +195,16 @@ function Guide () {
|
|||
}
|
||||
|
||||
this.draw_translation = function () {
|
||||
if (!dotgrid.cursor.translation) { return }
|
||||
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.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.strokeStyle = DOTGRID.theme.active.f_low
|
||||
ctx.setLineDash([5, 10])
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
|
|
@ -213,14 +213,14 @@ function Guide () {
|
|||
ctx.restore()
|
||||
}
|
||||
|
||||
this.draw_cursor = function (pos = dotgrid.cursor.pos, radius = dotgrid.tool.style().thickness - 1) {
|
||||
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.strokeStyle = DOTGRID.theme.active.background
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
|
||||
|
|
@ -228,21 +228,21 @@ function Guide () {
|
|||
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.strokeStyle = DOTGRID.theme.active.f_med
|
||||
ctx.stroke()
|
||||
ctx.closePath()
|
||||
}
|
||||
|
||||
this.draw_preview = function () {
|
||||
let ctx = this.el.getContext('2d')
|
||||
let operation = dotgrid.cursor.operation && dotgrid.cursor.operation.cast ? dotgrid.cursor.operation.cast : null
|
||||
let operation = DOTGRID.cursor.operation && DOTGRID.cursor.operation.cast ? DOTGRID.cursor.operation.cast : null
|
||||
|
||||
if (!dotgrid.tool.can_cast(operation)) { 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,
|
||||
color: DOTGRID.theme.active.f_med,
|
||||
thickness: 2,
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use strict'
|
||||
|
||||
function Interface () {
|
||||
DOTGRID.Interface = function(){
|
||||
this.el = document.createElement('div')
|
||||
this.el.id = 'interface'
|
||||
|
||||
|
|
@ -51,10 +51,10 @@ function Interface () {
|
|||
<svg
|
||||
id="option_${name}"
|
||||
title="${name.capitalize()}"
|
||||
onmouseout="dotgrid.interface.out('${type}','${name}')"
|
||||
onmouseup="dotgrid.interface.up('${type}','${name}')"
|
||||
onmousedown="dotgrid.interface.down('${type}','${name}')"
|
||||
onmouseover="dotgrid.interface.over('${type}','${name}')"
|
||||
onmouseout="DOTGRID.interface.out('${type}','${name}')"
|
||||
onmouseup="DOTGRID.interface.up('${type}','${name}')"
|
||||
onmousedown="DOTGRID.interface.down('${type}','${name}')"
|
||||
onmouseover="DOTGRID.interface.over('${type}','${name}')"
|
||||
viewBox="0 0 300 300"
|
||||
class="icon ${type}">
|
||||
<path id="${name}_path" class="icon_path" d="${tool.icon}"/>${name == 'depth' ? `<path class="icon_path inactive" d=""/>` : ''}
|
||||
|
|
@ -65,63 +65,63 @@ function Interface () {
|
|||
}
|
||||
}
|
||||
this.menu_el.innerHTML = html
|
||||
this.menu_el.appendChild(dotgrid.picker.el)
|
||||
this.menu_el.appendChild(DOTGRID.picker.el)
|
||||
}
|
||||
|
||||
this.over = function (type, name) {
|
||||
dotgrid.cursor.operation = {}
|
||||
dotgrid.cursor.operation[type] = name
|
||||
DOTGRID.cursor.operation = {}
|
||||
DOTGRID.cursor.operation[type] = name
|
||||
this.update(true)
|
||||
dotgrid.guide.update(true);
|
||||
DOTGRID.guide.update(true);
|
||||
}
|
||||
|
||||
this.out = function (type, name) {
|
||||
dotgrid.cursor.operation = ''
|
||||
dotgrid.guide.update(true)
|
||||
DOTGRID.cursor.operation = ''
|
||||
DOTGRID.guide.update(true)
|
||||
}
|
||||
|
||||
this.up = function (type, name) {
|
||||
if (!dotgrid.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, dotgrid.tool); return }
|
||||
if (!DOTGRID.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, DOTGRID.tool); return }
|
||||
|
||||
this.update(true)
|
||||
dotgrid.guide.update(true)
|
||||
DOTGRID.guide.update(true)
|
||||
}
|
||||
|
||||
this.down = function (type, name) {
|
||||
if (!dotgrid.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, dotgrid.tool); return }
|
||||
if (!DOTGRID.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, DOTGRID.tool); return }
|
||||
|
||||
dotgrid.tool[type](name)
|
||||
DOTGRID.tool[type](name)
|
||||
this.update(true)
|
||||
dotgrid.guide.update(true);
|
||||
DOTGRID.guide.update(true);
|
||||
}
|
||||
|
||||
this.prev_operation = null
|
||||
|
||||
this.update = function (force = false, id) {
|
||||
if (this.prev_operation == dotgrid.cursor.operation && force == false) { return }
|
||||
if (this.prev_operation == DOTGRID.cursor.operation && force == false) { return }
|
||||
|
||||
let multi_vertices = null
|
||||
let segments = dotgrid.tool.layer()
|
||||
const sum_segments = dotgrid.tool.length()
|
||||
let segments = DOTGRID.tool.layer()
|
||||
const sum_segments = DOTGRID.tool.length()
|
||||
|
||||
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_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_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').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
|
||||
|
|
@ -130,15 +130,15 @@ function Interface () {
|
|||
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 () {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use strict'
|
||||
|
||||
function Picker () {
|
||||
DOTGRID.Picker = function() {
|
||||
this.memory = ''
|
||||
this.el = document.createElement('div')
|
||||
this.el.id = 'picker'
|
||||
|
|
@ -15,14 +15,14 @@ function Picker () {
|
|||
|
||||
this.is_active = 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 () {
|
|||
|
||||
this.is_active = 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.guide.update() }, 250)
|
||||
setTimeout(() => { DOTGRID.interface.update(true); DOTGRID.guide.update() }, 250)
|
||||
}
|
||||
|
||||
this.validate = function () {
|
||||
|
|
@ -54,8 +54,8 @@ function Picker () {
|
|||
|
||||
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 () {
|
|||
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) }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use strict'
|
||||
|
||||
function Renderer () {
|
||||
DOTGRID.Renderer = function(){
|
||||
// Create SVG parts
|
||||
this.svg_el = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
|
||||
this.svg_el.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
|
||||
|
|
@ -17,14 +17,14 @@ function Renderer () {
|
|||
this.svg_el.appendChild(this.layer_1)
|
||||
|
||||
this.update = function () {
|
||||
this.svg_el.setAttribute('width', (dotgrid.tool.settings.size.width - (5)) + 'px')
|
||||
this.svg_el.setAttribute('height', (dotgrid.tool.settings.size.height + (10)) + 'px')
|
||||
this.svg_el.style.width = (dotgrid.tool.settings.size.width - (5))
|
||||
this.svg_el.style.height = dotgrid.tool.settings.size.height + (10)
|
||||
this.svg_el.style.strokeWidth = dotgrid.tool.style().thickness
|
||||
this.svg_el.setAttribute('width', (DOTGRID.tool.settings.size.width - (5)) + 'px')
|
||||
this.svg_el.setAttribute('height', (DOTGRID.tool.settings.size.height + (10)) + 'px')
|
||||
this.svg_el.style.width = (DOTGRID.tool.settings.size.width - (5))
|
||||
this.svg_el.style.height = DOTGRID.tool.settings.size.height + (10)
|
||||
this.svg_el.style.strokeWidth = DOTGRID.tool.style().thickness
|
||||
|
||||
let styles = dotgrid.tool.styles
|
||||
let paths = dotgrid.tool.paths()
|
||||
let styles = DOTGRID.tool.styles
|
||||
let paths = DOTGRID.tool.paths()
|
||||
|
||||
this.layer_1.style.strokeWidth = styles[0].thickness
|
||||
this.layer_1.style.strokeLinecap = styles[0].strokeLinecap
|
||||
|
|
@ -48,7 +48,7 @@ function Renderer () {
|
|||
this.layer_3.setAttribute('d', paths[2])
|
||||
}
|
||||
|
||||
this.to_png = function (size = dotgrid.tool.settings.size, callback = dotgrid.render) {
|
||||
this.to_png = function (size = DOTGRID.tool.settings.size, callback = DOTGRID.render) {
|
||||
if (!dialog) { return this.to_png_web(size) }
|
||||
|
||||
this.update()
|
||||
|
|
@ -69,7 +69,7 @@ function Renderer () {
|
|||
img.onload = function () {
|
||||
ctx.drawImage(img, 0, 0, (size.width) * 2, (size.height + 30) * 2)
|
||||
let data = canvas.toDataURL('image/png').replace(/^data:image\/\w+;base64,/, '')
|
||||
dotgrid.renderer.to_png_ready(callback, new Buffer(data, 'base64'), size)
|
||||
DOTGRID.renderer.to_png_ready(callback, new Buffer(data, 'base64'), size)
|
||||
}
|
||||
img.src = image64
|
||||
}
|
||||
|
|
@ -79,7 +79,7 @@ function Renderer () {
|
|||
}
|
||||
|
||||
this.to_png_web = function (size) {
|
||||
if (dotgrid.tool.length() < 1) { console.warn('Nothing to render'); return }
|
||||
if (DOTGRID.tool.length() < 1) { console.warn('Nothing to render'); return }
|
||||
this.update()
|
||||
|
||||
let xml = new XMLSerializer().serializeToString(this.svg_el)
|
||||
|
|
@ -98,7 +98,7 @@ function Renderer () {
|
|||
|
||||
img.onload = function () {
|
||||
ctx.drawImage(img, 0, 0, size.width * 2, size.height * 2)
|
||||
win.document.write(`<style>body { background:${dotgrid.theme.active.background}}</style><img width='${size.width / 2}' height='${size.height / 2}' src='${canvas.toDataURL('image/png')}' alt='from canvas'/>`)
|
||||
win.document.write(`<style>body { background:${DOTGRID.theme.active.background}}</style><img width='${size.width / 2}' height='${size.height / 2}' src='${canvas.toDataURL('image/png')}' alt='from canvas'/>`)
|
||||
}
|
||||
img.src = image64
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use strict'
|
||||
|
||||
function Tool () {
|
||||
DOTGRID.Tool = function(){
|
||||
this.index = 0
|
||||
this.settings = { size: { width: 300, height: 300 } }
|
||||
this.layers = [[], [], []]
|
||||
|
|
@ -13,9 +13,9 @@ function Tool () {
|
|||
this.reqs = { line: 2, arc_c: 2, arc_r: 2, bezier: 3, close: 0 }
|
||||
|
||||
this.start = function () {
|
||||
this.styles[0].color = dotgrid.theme.active.f_high
|
||||
this.styles[1].color = dotgrid.theme.active.f_med
|
||||
this.styles[2].color = dotgrid.theme.active.f_low
|
||||
this.styles[0].color = DOTGRID.theme.active.f_high
|
||||
this.styles[1].color = DOTGRID.theme.active.f_med
|
||||
this.styles[2].color = DOTGRID.theme.active.f_low
|
||||
}
|
||||
|
||||
this.reset = function () {
|
||||
|
|
@ -26,20 +26,20 @@ function Tool () {
|
|||
|
||||
this.clear = function () {
|
||||
this.vertices = []
|
||||
dotgrid.guide.update()
|
||||
dotgrid.interface.update(true)
|
||||
DOTGRID.guide.update()
|
||||
DOTGRID.interface.update(true)
|
||||
}
|
||||
|
||||
this.undo = function () {
|
||||
this.layers = dotgrid.history.prev()
|
||||
dotgrid.guide.update()
|
||||
dotgrid.interface.update(true)
|
||||
this.layers = DOTGRID.history.prev()
|
||||
DOTGRID.guide.update()
|
||||
DOTGRID.interface.update(true)
|
||||
}
|
||||
|
||||
this.redo = function () {
|
||||
this.layers = dotgrid.history.next()
|
||||
dotgrid.guide.update()
|
||||
dotgrid.interface.update(true)
|
||||
this.layers = DOTGRID.history.next()
|
||||
DOTGRID.guide.update()
|
||||
DOTGRID.interface.update(true)
|
||||
}
|
||||
|
||||
this.length = function () {
|
||||
|
|
@ -54,10 +54,10 @@ function Tool () {
|
|||
|
||||
this.import = function (layer) {
|
||||
this.layers[this.index] = this.layers[this.index].concat(layer)
|
||||
dotgrid.history.push(this.layers)
|
||||
DOTGRID.history.push(this.layers)
|
||||
this.clear()
|
||||
dotgrid.guide.update()
|
||||
dotgrid.interface.update(true)
|
||||
DOTGRID.guide.update()
|
||||
DOTGRID.interface.update(true)
|
||||
}
|
||||
|
||||
this.replace = function (dot) {
|
||||
|
|
@ -67,7 +67,7 @@ function Tool () {
|
|||
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.set_size({ width: dot.settings.size.width, height: dot.settings.size.height })
|
||||
DOTGRID.set_size({ width: dot.settings.size.width, height: dot.settings.size.height })
|
||||
}
|
||||
|
||||
this.layers = dot.layers
|
||||
|
|
@ -75,9 +75,9 @@ function Tool () {
|
|||
this.settings = dot.settings
|
||||
|
||||
this.clear()
|
||||
dotgrid.guide.update()
|
||||
dotgrid.interface.update(true)
|
||||
dotgrid.history.push(this.layers)
|
||||
DOTGRID.guide.update()
|
||||
DOTGRID.interface.update(true)
|
||||
DOTGRID.history.push(this.layers)
|
||||
}
|
||||
|
||||
// EDIT
|
||||
|
|
@ -87,8 +87,8 @@ function Tool () {
|
|||
|
||||
this.layer().pop()
|
||||
this.clear()
|
||||
dotgrid.guide.update()
|
||||
dotgrid.interface.update(true)
|
||||
DOTGRID.guide.update()
|
||||
DOTGRID.interface.update(true)
|
||||
}
|
||||
|
||||
this.remove_segments_at = function (pos) {
|
||||
|
|
@ -105,14 +105,14 @@ function Tool () {
|
|||
}
|
||||
}
|
||||
this.clear()
|
||||
dotgrid.guide.update()
|
||||
dotgrid.interface.update(true)
|
||||
DOTGRID.guide.update()
|
||||
DOTGRID.interface.update(true)
|
||||
}
|
||||
|
||||
this.add_vertex = function (pos) {
|
||||
pos = { x: Math.abs(pos.x), y: Math.abs(pos.y) }
|
||||
this.vertices.push(pos)
|
||||
dotgrid.interface.update(true)
|
||||
DOTGRID.interface.update(true)
|
||||
}
|
||||
|
||||
this.vertex_at = function (pos) {
|
||||
|
|
@ -140,11 +140,11 @@ function Tool () {
|
|||
this.layer().push({ type: type, vertices: this.vertices.slice() })
|
||||
}
|
||||
|
||||
dotgrid.history.push(this.layers)
|
||||
DOTGRID.history.push(this.layers)
|
||||
|
||||
this.clear()
|
||||
dotgrid.guide.update()
|
||||
dotgrid.interface.update(true)
|
||||
DOTGRID.guide.update()
|
||||
DOTGRID.interface.update(true)
|
||||
|
||||
console.log(`Casted ${type} -> ${this.layer().length} elements`)
|
||||
}
|
||||
|
|
@ -169,22 +169,22 @@ function Tool () {
|
|||
} else {
|
||||
console.warn('Unknown', type)
|
||||
}
|
||||
dotgrid.interface.update(true)
|
||||
dotgrid.guide.update()
|
||||
DOTGRID.interface.update(true)
|
||||
DOTGRID.guide.update()
|
||||
}
|
||||
|
||||
this.misc = function (type) {
|
||||
dotgrid.picker.start()
|
||||
DOTGRID.picker.start()
|
||||
}
|
||||
|
||||
this.source = function (type) {
|
||||
if (type == 'grid') { dotgrid.guide.toggle() }
|
||||
if (type == 'grid') { DOTGRID.guide.toggle() }
|
||||
if (type == 'screen') { app.toggle_fullscreen() }
|
||||
|
||||
if (type == 'open') { dotgrid.open() }
|
||||
if (type == 'save') { dotgrid.save() }
|
||||
if (type == 'render') { dotgrid.render() }
|
||||
if (type == 'export') { dotgrid.export() }
|
||||
if (type == 'open') { DOTGRID.open() }
|
||||
if (type == 'save') { DOTGRID.save() }
|
||||
if (type == 'render') { DOTGRID.render() }
|
||||
if (type == 'export') { DOTGRID.export() }
|
||||
}
|
||||
|
||||
this.can_append = function (content) {
|
||||
|
|
@ -218,15 +218,15 @@ function Tool () {
|
|||
}
|
||||
|
||||
this.paths = function () {
|
||||
let l1 = new Generator(dotgrid.tool.layers[0], dotgrid.tool.styles[0]).toString({ x: -10, y: -10 }, 1)
|
||||
let l2 = new Generator(dotgrid.tool.layers[1], dotgrid.tool.styles[1]).toString({ x: -10, y: -10 }, 1)
|
||||
let l3 = new Generator(dotgrid.tool.layers[2], dotgrid.tool.styles[2]).toString({ x: -10, y: -10 }, 1)
|
||||
let l1 = new Generator(DOTGRID.tool.layers[0], DOTGRID.tool.styles[0]).toString({ x: -10, y: -10 }, 1)
|
||||
let l2 = new Generator(DOTGRID.tool.layers[1], DOTGRID.tool.styles[1]).toString({ x: -10, y: -10 }, 1)
|
||||
let l3 = new Generator(DOTGRID.tool.layers[2], DOTGRID.tool.styles[2]).toString({ x: -10, y: -10 }, 1)
|
||||
|
||||
return [l1, l2, l3]
|
||||
}
|
||||
|
||||
this.path = function () {
|
||||
return new Generator(dotgrid.tool.layer(), dotgrid.tool.style()).toString({ x: -10, y: -10 }, 1)
|
||||
return new Generator(DOTGRID.tool.layer(), DOTGRID.tool.style()).toString({ x: -10, y: -10 }, 1)
|
||||
}
|
||||
|
||||
this.translate = function (a, b) {
|
||||
|
|
@ -239,9 +239,9 @@ function Tool () {
|
|||
}
|
||||
}
|
||||
}
|
||||
dotgrid.history.push(this.layers)
|
||||
DOTGRID.history.push(this.layers)
|
||||
this.clear()
|
||||
dotgrid.guide.update()
|
||||
DOTGRID.guide.update()
|
||||
}
|
||||
|
||||
this.translate_multi = function (a, b) {
|
||||
|
|
@ -254,9 +254,9 @@ function Tool () {
|
|||
segment.vertices[vertex_id] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
|
||||
}
|
||||
}
|
||||
dotgrid.history.push(this.layers)
|
||||
DOTGRID.history.push(this.layers)
|
||||
this.clear()
|
||||
dotgrid.guide.update()
|
||||
DOTGRID.guide.update()
|
||||
}
|
||||
|
||||
// Style
|
||||
|
|
@ -280,8 +280,8 @@ function Tool () {
|
|||
this.select_layer = function (id) {
|
||||
this.index = clamp(id, 0, 2)
|
||||
this.clear()
|
||||
dotgrid.guide.update()
|
||||
dotgrid.interface.update(true)
|
||||
DOTGRID.guide.update()
|
||||
DOTGRID.interface.update(true)
|
||||
console.log(`layer:${this.index}`)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script type="text/javascript" src="desktop/sources/scripts/lib/theme.js"></script>
|
||||
<script type="text/javascript" src="desktop/sources/scripts/lib/history.js"></script>
|
||||
|
||||
<script type="text/javascript" src="desktop/sources/scripts/dotgrid.js"></script>
|
||||
<script type="text/javascript" src="desktop/sources/scripts/DOTGRID.js"></script>
|
||||
<script type="text/javascript" src="desktop/sources/scripts/cursor.js"></script>
|
||||
<script type="text/javascript" src="desktop/sources/scripts/guide.js"></script>
|
||||
<script type="text/javascript" src="desktop/sources/scripts/renderer.js"></script>
|
||||
|
|
@ -30,9 +30,8 @@
|
|||
<script>
|
||||
'use strict';
|
||||
const dialog = null;
|
||||
const dotgrid = new Dotgrid(300,300,20,20,4,4);
|
||||
dotgrid.install(document.body);
|
||||
dotgrid.start();
|
||||
DOTGRID.install(document.body);
|
||||
DOTGRID.start();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,37 +6,37 @@ document.onkeyup = (e) =>
|
|||
|
||||
if(e.target && e.target.id == "picker_input"){ return; }
|
||||
|
||||
if(ch == "backspace" && e.ctrlKey){ dotgrid.theme.reset(); e.preventDefault(); }
|
||||
if(ch == "backspace"){ dotgrid.tool.remove_segment(); 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.remove_segment(); e.preventDefault(); }
|
||||
if(ch == "escape"){ DOTGRID.tool.clear(); DOTGRID.picker.stop(); e.preventDefault(); }
|
||||
|
||||
if(ch == "1"){ dotgrid.tool.select_layer(0); e.preventDefault(); }
|
||||
if(ch == "2"){ dotgrid.tool.select_layer(1); e.preventDefault(); }
|
||||
if(ch == "3"){ dotgrid.tool.select_layer(2); e.preventDefault(); }
|
||||
if(ch == "1"){ DOTGRID.tool.select_layer(0); e.preventDefault(); }
|
||||
if(ch == "2"){ DOTGRID.tool.select_layer(1); e.preventDefault(); }
|
||||
if(ch == "3"){ DOTGRID.tool.select_layer(2); e.preventDefault(); }
|
||||
|
||||
if(ch == "h"){ dotgrid.guide.toggle(); e.preventDefault(); }
|
||||
if(ch == "?"){ dotgrid.reset(); dotgrid.theme.reset(); e.preventDefault(); }
|
||||
if(ch == "h"){ DOTGRID.guide.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 == "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 == "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 == "i"){ dotgrid.theme.invert(); e.preventDefault(); }
|
||||
if(ch == "i"){ DOTGRID.theme.invert(); e.preventDefault(); }
|
||||
}
|
||||
|
||||
document.onkeydown = (e) =>
|
||||
{
|
||||
if(e.keyCode == 9){ dotgrid.tool.select_next_layer(); e.preventDefault(); }
|
||||
if(e.keyCode == 9){ DOTGRID.tool.select_next_layer(); e.preventDefault(); }
|
||||
}
|
||||
Loading…
Reference in New Issue