Atlas48/pointvec
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #46 from hundredrabbits/mon

Browse Source 
Mon
This commit is contained in:
Лu Лinveгa 2019-01-10 09:05:52 +12:00 committed by GitHub
commit 235cc6a3de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 636 additions and 667 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
desktop/main.js
View File

@ -3,7 +3,7 @@ const path = require('path')
const url = require('url')
const shell = require('electron').shell
let is_shown = true
let isShown = true
app.on('ready', () => {
app.win = new BrowserWindow({
@ -27,11 +27,11 @@ app.on('ready', () => {
})
app.win.on('hide', function () {
is_shown = false
isShown = false
})
app.win.on('show', function () {
is_shown = true
isShown = true
})
app.on('window-all-closed', () => {
@ -51,15 +51,15 @@ app.inspect = function () {
app.win.toggleDevTools()
}
app.toggle_fullscreen = function () {
app.toggleFullscreen = function () {
app.win.setFullScreen(!app.win.isFullScreen())
}
app.toggle_visible = function () {
app.toggleVisible = 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() }
if (isShown && !app.win.isFullScreen()) { app.win.hide() } else { app.win.show() }
}
}

46
desktop/sources/index.html
View File

@ -4,20 +4,20 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Generics -->
<script type="text/javascript" src="scripts/lib/theme.js"></script>
<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/lib/controller.js"></script>
<!-- Dotgrid -->
<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/manager.js"></script>
<script type="text/javascript" src="scripts/renderer.js"></script>
<script type="text/javascript" src="scripts/cursor.js"></script>
<script type="text/javascript" src="scripts/interface.js"></script>
<script type="text/javascript" src="scripts/tool.js"></script>
<script type="text/javascript" src="scripts/generator.js"></script>
<script type="text/javascript" src="scripts/picker.js"></script>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="links/reset.css"/>
<link rel="stylesheet" type="text/css" href="links/fonts.css"/>
<link rel="stylesheet" type="text/css" href="links/main.css"/>
@ -35,8 +35,8 @@
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","*","Fullscreen",() => { app.toggleFullscreen(); },"CmdOrCtrl+Enter");
DOTGRID.controller.add("default","*","Hide",() => { app.toggleVisible(); },"CmdOrCtrl+H");
DOTGRID.controller.add("default","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+.");
DOTGRID.controller.add("default","*","Reset",() => { DOTGRID.reset(); DOTGRID.theme.reset(); },"CmdOrCtrl+Backspace");
DOTGRID.controller.add("default","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q");
@ -71,31 +71,31 @@
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.addVertex(DOTGRID.cursor.pos); DOTGRID.renderer.update() },"Enter");
DOTGRID.controller.add("default","Manual","Move Up",() => { DOTGRID.cursor.pos.y -= 15; DOTGRID.renderer.update() },"Up");
DOTGRID.controller.add("default","Manual","Move Right",() => { DOTGRID.cursor.pos.x += 15; DOTGRID.renderer.update() },"Right");
DOTGRID.controller.add("default","Manual","Move Down",() => { DOTGRID.cursor.pos.y += 15; DOTGRID.renderer.update() },"Down");
DOTGRID.controller.add("default","Manual","Move Left",() => { DOTGRID.cursor.pos.x -= 15; DOTGRID.renderer.update() },"Left");
DOTGRID.controller.add("default","Manual","Remove Point",() => { DOTGRID.tool.removeSegmentsAt(DOTGRID.cursor.pos); },"Shift+Backspace");
DOTGRID.controller.add("default","Manual","Remove Segment",() => { DOTGRID.tool.removeSegment(); },"Backspace");
DOTGRID.controller.add("default","Layers","Foreground",() => { DOTGRID.tool.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.selectLayer(0) },"CmdOrCtrl+1");
DOTGRID.controller.add("default","Layers","Middleground",() => { DOTGRID.tool.selectLayer(1) },"CmdOrCtrl+2");
DOTGRID.controller.add("default","Layers","Background",() => { DOTGRID.tool.selectLayer(2) },"CmdOrCtrl+3");
DOTGRID.controller.add("default","Layers","Next Layer",() => { DOTGRID.tool.selectNextLayer() },"Tab");
DOTGRID.controller.add("default","Layers","Prev Layer",() => { DOTGRID.tool.selectPrevLayer() },"Shift+Tab");
DOTGRID.controller.add("default","Layers","Merge Layers",() => { DOTGRID.tool.merge() },"M");
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","Toggle Grid",() => { DOTGRID.renderer.toggle(); },"H");
DOTGRID.controller.add("default","Theme","Open Theme",() => { DOTGRID.theme.open(); },"CmdOrCtrl+Shift+o")
DOTGRID.controller.add("default","Theme","Reset Theme",() => { DOTGRID.theme.reset(); },"CmdOrCtrl+Shift+Backspace")
DOTGRID.controller.add("default","Theme","Download Themes..",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes'); })
DOTGRID.controller.add("picker","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,");
DOTGRID.controller.add("picker","*","Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter");
DOTGRID.controller.add("picker","*","Hide",() => { app.toggle_visible(); },"CmdOrCtrl+H");
DOTGRID.controller.add("picker","*","Fullscreen",() => { app.toggleFullscreen(); },"CmdOrCtrl+Enter");
DOTGRID.controller.add("picker","*","Hide",() => { app.toggleVisible(); },"CmdOrCtrl+H");
DOTGRID.controller.add("picker","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+.");
DOTGRID.controller.add("picker","*","Documentation",() => { DOTGRID.controller.docs(); },"CmdOrCtrl+Esc");
DOTGRID.controller.add("picker","*","Reset",() => { DOTGRID.reset(); DOTGRID.theme.reset(); },"CmdOrCtrl+Backspace");

2
desktop/sources/links/main.css
View File

@ -8,7 +8,7 @@ body { padding: 0px; font-family: 'input_mono_regular'; -webkit-user-select: non
/* Interface */
#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 100%; position:fixed; bottom:20px; left:45px; height:30px; max-width:calc(100vw - 90px); overflow: hidden;}
#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 100%; position:fixed; bottom:20px; left:35px; height:30px; max-width:calc(100vw - 80px); overflow: hidden;}
#interface.hidden { bottom:10px;opacity: 0 }
#interface.visible { bottom:20px; opacity: 1 }
#interface #menu { opacity: 1; position: absolute; top:0px; transition: all 250ms; z-index: 900; overflow: hidden; height:30px; width:100%;}

41
desktop/sources/scripts/cursor.js
View File

@ -1,6 +1,6 @@
'use strict'
DOTGRID.Cursor = function () {
function Cursor () {
this.pos = { x: 0, y: 0 }
this.translation = null
this.operation = null
@ -17,14 +17,14 @@ DOTGRID.Cursor = function () {
}
this.down = function (e) {
this.pos = this.pos_from_event(e)
this.pos = this.atEvent(e)
// Translation
if (DOTGRID.tool.vertex_at(this.pos)) {
if (DOTGRID.tool.vertexAt(this.pos)) {
this.translate(this.pos, this.pos, e.shiftKey, e.ctrlKey || e.metaKey, e.altKey)
}
DOTGRID.guide.update()
DOTGRID.renderer.update()
DOTGRID.interface.update()
e.preventDefault()
}
@ -32,7 +32,7 @@ DOTGRID.Cursor = function () {
this.last_pos = { x: 0, y: 0 }
this.move = function (e) {
this.pos = this.pos_from_event(e)
this.pos = this.atEvent(e)
// Translation
if (this.translation) {
@ -40,7 +40,7 @@ DOTGRID.Cursor = function () {
}
if (this.last_pos.x != this.pos.x || this.last_pos.y != this.pos.y) {
DOTGRID.guide.update()
DOTGRID.renderer.update()
}
DOTGRID.interface.update()
@ -50,26 +50,26 @@ DOTGRID.Cursor = function () {
}
this.up = function (e) {
this.pos = this.pos_from_event(e)
this.pos = this.atEvent(e)
if (this.translation && !is_equal(this.translation.from, this.translation.to)) {
if (this.translation.layer === true) { DOTGRID.tool.translate_layer(this.translation.from, this.translation.to) } else if (this.translation.copy) { DOTGRID.tool.translate_copy(this.translation.from, this.translation.to) } else 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.layer === true) { DOTGRID.tool.translateLayer(this.translation.from, this.translation.to) } else if (this.translation.copy) { DOTGRID.tool.translateCopy(this.translation.from, this.translation.to) } else if (this.translation.multi) { DOTGRID.tool.translateMulti(this.translation.from, this.translation.to) } else { DOTGRID.tool.translate(this.translation.from, this.translation.to) }
} else if (e.target.id == 'guide') {
DOTGRID.tool.add_vertex({ x: this.pos.x, y: this.pos.y })
DOTGRID.tool.addVertex({ x: this.pos.x, y: this.pos.y })
DOTGRID.picker.stop()
}
this.translate()
DOTGRID.interface.update()
DOTGRID.guide.update()
DOTGRID.renderer.update()
e.preventDefault()
}
this.alt = function (e) {
this.pos = this.pos_from_event(e)
this.pos = this.atEvent(e)
DOTGRID.tool.remove_segments_at(this.pos)
DOTGRID.tool.removeSegmentsAt(this.pos)
e.preventDefault()
setTimeout(() => { DOTGRID.tool.clear() }, 150)
@ -77,22 +77,21 @@ DOTGRID.Cursor = function () {
// Position Mods
this.pos_from_event = function (e) {
return this.pos_snap(this.pos_relative({ x: e.clientX, y: e.clientY }))
this.atEvent = function (e) {
return this.snapPos(this.relativePos({ x: e.clientX, y: e.clientY }))
}
this.pos_relative = function (pos) {
this.relativePos = function (pos) {
return {
x: pos.x - DOTGRID.guide.el.offsetLeft,
y: pos.y - DOTGRID.guide.el.offsetTop
x: pos.x - DOTGRID.renderer.el.offsetLeft,
y: pos.y - DOTGRID.renderer.el.offsetTop
}
}
this.pos_snap = function (pos) {
const grid = DOTGRID.tool.settings.size.width / DOTGRID.grid_x
this.snapPos = function (pos) {
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, 15), 15, DOTGRID.tool.settings.size.width),
y: clamp(step(pos.y, 15), 15, DOTGRID.tool.settings.size.height)
}
}

177
desktop/sources/scripts/dotgrid.js
View File

@ -1,29 +1,33 @@
'use strict'
function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
this.controller = null
const defaultTheme = { background: '#eee', f_high: '#000', f_med: '#999', f_low: '#ccc', f_inv: '#000', b_high: '#000', b_med: '#888', b_low: '#aaa', b_inv: '#ffb545' }
this.theme = new Theme(defaultTheme)
this.history = new History()
this.grid_x = grid_x
this.grid_y = grid_y
this.block_x = block_x
this.block_y = block_y
function Dotgrid (width, height) {
const defaultTheme = {
background: '#eee',
f_high: '#000',
f_med: '#999',
f_low: '#ccc',
f_inv: '#000',
b_high: '#000',
b_med: '#888',
b_low: '#aaa',
b_inv: '#ffb545'
}
// 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.theme = new Theme(defaultTheme)
this.history = new History()
this.manager = new Manager(this)
this.renderer = new Renderer(this)
this.tool = new Tool(this)
this.interface = new Interface(this)
this.picker = new Picker(this)
this.cursor = new Cursor(this)
host.appendChild(this.renderer.el)
this.manager.install()
this.interface.install(host)
this.theme.install(host, this.update)
}
@ -31,7 +35,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
this.start = function () {
this.theme.start()
this.tool.start()
this.guide.start()
this.renderer.start()
this.interface.start()
document.addEventListener('mousedown', function (e) { DOTGRID.cursor.down(e) }, false)
@ -50,15 +54,29 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
this.update = function () {
DOTGRID.resize()
DOTGRID.manager.update()
DOTGRID.interface.update()
DOTGRID.guide.update()
DOTGRID.renderer.update()
}
this.clear = function () {
this.history.clear()
this.tool.reset()
this.reset()
this.renderer.update()
this.interface.update(true)
}
this.reset = function () {
this.tool.clear()
this.update()
}
// File
this.new = function () {
this.set_zoom(1.0)
this.set_size({ width: 300, height: 300 })
this.setZoom(1.0)
this.setSize({ width: 300, height: 300 })
this.history.push(this.tool.layers)
this.clear()
}
@ -73,10 +91,25 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
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.renderer.update()
})
}
this.save = function () {
if (DOTGRID.tool.length() < 1) { console.warn('Nothing to save'); return }
this.manager.toGRID(grab)
}
this.export = function () {
if (DOTGRID.tool.length() < 1) { console.warn('Nothing to export'); return }
this.manager.toSVG(grab)
}
this.render = function () {
if (DOTGRID.tool.length() < 1) { console.warn('Nothing to render'); return }
this.manager.toPNG({ width: DOTGRID.tool.settings.size.width * 2, height: DOTGRID.tool.settings.size.height * 2 }, grab)
}
function grab (base64, name) {
const link = document.createElement('a')
link.setAttribute('href', base64)
@ -84,28 +117,16 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
link.dispatchEvent(new MouseEvent(`click`, { bubbles: true, cancelable: true, view: window }))
}
this.save = function () {
if (DOTGRID.tool.length() < 1) { console.warn('Nothing to save'); return }
this.renderer.to_grid(grab)
}
this.export = function () {
if (DOTGRID.tool.length() < 1) { console.warn('Nothing to export'); return }
this.renderer.to_svg(grab)
}
this.render = function () {
if (DOTGRID.tool.length() < 1) { console.warn('Nothing to render'); return }
const size = { width: DOTGRID.tool.settings.size.width * 2, height: DOTGRID.tool.settings.size.height * 2 }
this.renderer.to_png(size, grab)
}
// Basics
this.set_size = function (size = { width: 300, height: 300 }, ui = true, scale = 1) {
this.getSize = function () {
return { markers: {
w: parseInt(this.tool.settings.size.width / 15),
h: parseInt(this.tool.settings.size.height / 15) }
}
}
this.setSize = 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
@ -113,25 +134,18 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
try {
const win = require('electron').remote.getCurrentWindow()
win.setSize((size.width + 100) * scale, (size.height + 100 + (ui ? 10 : 0)) * scale, true)
win.setSize((size.width + 100) * scale, (size.height + 100) * scale, true)
} 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
DOTGRID.guide.resize(size)
this.renderer.resize(size)
this.interface.update()
DOTGRID.guide.update()
this.renderer.update()
}
this.set_zoom = function (scale) {
this.set_size({ width: this.tool.settings.size.width, height: this.tool.settings.size.height }, true, scale)
this.setZoom = function (scale) {
this.setSize({ width: this.tool.settings.size.width, height: this.tool.settings.size.height }, true, scale)
try {
webFrame.setZoomFactor(scale)
@ -142,42 +156,25 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
// Draw
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.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 == this.tool.settings.size.width && size.height == this.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
this.tool.settings.size.width = size.width
this.tool.settings.size.height = size.height
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.guide.resize(size)
this.renderer.resize(size)
document.title = `Dotgrid — ${size.width}x${size.height}`
}
// Events
this.drag = function (e) {
e.preventDefault()
e.stopPropagation()
@ -193,38 +190,38 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
const data = e.target && e.target.result ? e.target.result : ''
if (data && !isJson(data)) { return }
DOTGRID.tool.replace(JSON.parse(`${data}`))
DOTGRID.guide.update()
DOTGRID.renderer.update()
}
reader.readAsText(file)
}
this.copy = function (e) {
DOTGRID.guide.update()
DOTGRID.renderer.update()
if (e.target !== this.picker.input) {
e.clipboardData.setData('text/source', DOTGRID.tool.export(DOTGRID.tool.layer()))
e.clipboardData.setData('text/plain', DOTGRID.tool.path())
e.clipboardData.setData('text/html', DOTGRID.renderer.svg_el.outerHTML)
e.clipboardData.setData('text/svg+xml', DOTGRID.renderer.svg_el.outerHTML)
e.clipboardData.setData('text/html', DOTGRID.manager.svg_el.outerHTML)
e.clipboardData.setData('text/svg+xml', DOTGRID.manager.svg_el.outerHTML)
e.preventDefault()
}
DOTGRID.guide.update()
DOTGRID.renderer.update()
}
this.cut = function (e) {
DOTGRID.guide.update()
DOTGRID.renderer.update()
if (e.target !== this.picker.input) {
e.clipboardData.setData('text/source', DOTGRID.tool.export(DOTGRID.tool.layer()))
e.clipboardData.setData('text/plain', DOTGRID.tool.export(DOTGRID.tool.layer()))
e.clipboardData.setData('text/html', DOTGRID.renderer.svg_el.outerHTML)
e.clipboardData.setData('text/svg+xml', DOTGRID.renderer.svg_el.outerHTML)
e.clipboardData.setData('text/html', DOTGRID.manager.svg_el.outerHTML)
e.clipboardData.setData('text/svg+xml', DOTGRID.manager.svg_el.outerHTML)
DOTGRID.tool.layers[DOTGRID.tool.index] = []
e.preventDefault()
}
DOTGRID.guide.update()
DOTGRID.renderer.update()
}
this.paste = function (e) {
@ -237,7 +234,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
e.preventDefault()
}
DOTGRID.guide.update()
DOTGRID.renderer.update()
}
}
@ -260,4 +257,4 @@ function isEqual (a, b) { return a && b && a.x == b.x && a.y == b.y }
function clamp (v, min, max) { return v < min ? min : v > max ? max : v }
function step (v, s) { return Math.round(v / s) * s }
const DOTGRID = new Dotgrid(300, 300, 20, 20, 4, 4)
const DOTGRID = new Dotgrid(300, 300)

19
desktop/sources/scripts/generator.js
View File

@ -19,7 +19,7 @@ function Generator (layer, style) {
// 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)
seg.vertices[k2] = rotatePoint(seg.vertices[k2], center, angle)
// Scale
seg.vertices[k2].x *= scale
@ -40,7 +40,7 @@ function Generator (layer, style) {
let vertex = vertices[id]
let next = vertices[parseInt(id) + 1]
let after_next = vertices[parseInt(id) + 2]
let afterNext = 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} `
@ -61,7 +61,7 @@ function Generator (layer, style) {
let clock = mirror > 0 ? '1,1' : '1,0'
html += this._arc(vertex, next, clock)
} else if (type == 'bezier') {
html += this._bezier(next, after_next)
html += this._bezier(next, afterNext)
skip = 1
}
}
@ -109,20 +109,9 @@ function Generator (layer, style) {
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 == 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) } }
function rotatePoint (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) } }
}

276
desktop/sources/scripts/guide.js
View File

@ -1,276 +0,0 @@
'use strict'
DOTGRID.Guide = function () {
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.showExtras = true
this.scale = 2
this.start = function () {
this.clear()
this.update()
}
this.update = function (force = false) {
this.clear()
this.el.getContext('2d').restore()
this.drawMirror()
this.drawRulers()
if (DOTGRID.tool.index == 2) { this.drawMarkers(); this.drawVertices() }
this.drawPath(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.drawMarkers(); this.drawVertices() }
this.drawPath(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.drawMarkers(); this.drawVertices() }
this.drawPath(new Generator(DOTGRID.tool.layers[0], DOTGRID.tool.styles[0]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[0])
this.drawHandles()
this.drawTranslation()
this.drawCursor()
this.drawPreview()
}
this.clear = function () {
this.el.getContext('2d').clearRect(0, 0, this.el.width * this.scale, this.el.height * this.scale)
}
this.toggle = function () {
this.showExtras = !this.showExtras
this.update()
DOTGRID.interface.update(true)
}
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.drawMirror = function () {
if (!this.showExtras) { return }
if (DOTGRID.tool.style().mirror_style === 0) { return }
const middle = { x: DOTGRID.tool.settings.size.width + (DOTGRID.grid_width), y: DOTGRID.tool.settings.size.height + (2 * DOTGRID.grid_height) }
if (DOTGRID.tool.style().mirror_style === 1 || DOTGRID.tool.style().mirror_style === 3) {
this.drawRule({ x: middle.x, y: DOTGRID.grid_height * 2 }, { x: middle.x, y: (DOTGRID.tool.settings.size.height + DOTGRID.grid_height) * 2 })
}
if (DOTGRID.tool.style().mirror_style === 2 || DOTGRID.tool.style().mirror_style === 3) {
this.drawRule({ x: DOTGRID.grid_width * 2, y: middle.y }, { x: (DOTGRID.tool.settings.size.width + DOTGRID.grid_width) * 2, y: middle.y })
}
}
this.drawHandles = function () {
if (!this.showExtras) { 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.drawHandle(vertex)
}
}
}
this.drawVertices = function () {
for (const id in DOTGRID.tool.vertices) {
this.drawVertex(DOTGRID.tool.vertices[id])
}
}
this.drawMarkers = function () {
if (!this.showExtras) { return }
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
// 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 }
this.drawMarker({
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.drawMarker = 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.drawVertex = 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.drawRule = 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()
}
this.drawRuler = function (pos) {
let offset = 15 * this.scale
let top = 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.drawRule({ x: pos.x * this.scale, y: top }, { x: pos.x * this.scale, y: bottom })
this.drawRule({ x: left, y: pos.y * this.scale }, { x: right, y: pos.y * this.scale })
}
this.drawRulers = function () {
if (!DOTGRID.cursor.translation) { return }
let ctx = this.el.getContext('2d')
this.drawRuler(DOTGRID.cursor.translation.to)
ctx.setLineDash([])
ctx.restore()
}
this.drawHandle = 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.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()
}
this.drawPath = 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
if (style.fill && style.fill != 'none') {
ctx.fillStyle = style.color
ctx.fill(p)
}
// Dash
if (style.strokeLineDash) { ctx.setLineDash(style.strokeLineDash) } else { ctx.setLineDash([]) }
ctx.stroke(p)
}
this.drawTranslation = 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.cursor.translation.multi === true ? DOTGRID.theme.active.b_inv : DOTGRID.cursor.translation.copy === true ? DOTGRID.theme.active.f_med : DOTGRID.theme.active.f_low
ctx.setLineDash([5, 10])
ctx.stroke()
ctx.closePath()
ctx.setLineDash([])
ctx.restore()
}
this.drawCursor = 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), clamp(radius, 5, 100), 0, 2 * Math.PI, false)
ctx.strokeStyle = DOTGRID.theme.active.f_med
ctx.stroke()
ctx.closePath()
}
this.drawPreview = function () {
let ctx = this.el.getContext('2d')
let operation = DOTGRID.cursor.operation && DOTGRID.cursor.operation.cast ? DOTGRID.cursor.operation.cast : null
if (!DOTGRID.tool.canCast(operation)) { return }
if (operation == 'close') { return }
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]
}
this.drawPath(path, style)
ctx.setLineDash([])
ctx.restore()
}
function isEqual (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 }
}

72
desktop/sources/scripts/interface.js
View File

@ -1,6 +1,6 @@
'use strict'
DOTGRID.Interface = function () {
function Interface (dotgrid) {
this.el = document.createElement('div')
this.el.id = 'interface'
@ -65,80 +65,80 @@ DOTGRID.Interface = function () {
}
}
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.renderer.update(true)
}
this.out = function (type, name) {
DOTGRID.cursor.operation = ''
DOTGRID.guide.update(true)
dotgrid.cursor.operation = ''
dotgrid.renderer.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.renderer.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.renderer.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 multiVertices = null
let segments = dotgrid.tool.layer()
const sumSegments = dotgrid.tool.length()
for (const i in segments) {
if (segments[i].vertices.length > 2) { multi_vertices = true; break }
if (segments[i].vertices.length > 2) { multiVertices = true; break }
}
document.getElementById('option_line').className.baseVal = !DOTGRID.tool.canCast('line') ? 'icon inactive' : 'icon'
document.getElementById('option_arc_c').className.baseVal = !DOTGRID.tool.canCast('arc_c') ? 'icon inactive' : 'icon'
document.getElementById('option_arc_r').className.baseVal = !DOTGRID.tool.canCast('arc_r') ? 'icon inactive' : 'icon'
document.getElementById('option_bezier').className.baseVal = !DOTGRID.tool.canCast('bezier') ? 'icon inactive' : 'icon'
document.getElementById('option_close').className.baseVal = !DOTGRID.tool.canCast('close') ? 'icon inactive' : 'icon'
document.getElementById('option_line').className.baseVal = !dotgrid.tool.canCast('line') ? 'icon inactive' : 'icon'
document.getElementById('option_arc_c').className.baseVal = !dotgrid.tool.canCast('arc_c') ? 'icon inactive' : 'icon'
document.getElementById('option_arc_r').className.baseVal = !dotgrid.tool.canCast('arc_r') ? 'icon inactive' : 'icon'
document.getElementById('option_bezier').className.baseVal = !dotgrid.tool.canCast('bezier') ? 'icon inactive' : 'icon'
document.getElementById('option_close').className.baseVal = !dotgrid.tool.canCast('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 || !multiVertices ? '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
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 = sumSegments < 1 ? 'icon inactive source' : 'icon source'
document.getElementById('option_export').className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source'
document.getElementById('option_render').className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source'
document.getElementById('option_grid').className.baseVal = DOTGRID.guide.showExtras ? 'icon inactive source' : 'icon source'
document.getElementById('option_grid').className.baseVal = dotgrid.renderer.showExtras ? 'icon inactive source' : 'icon source'
// Grid
if (DOTGRID.guide.showExtras) { 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.renderer.showExtras) { 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 L180,120 L210,90 M240,240 L240,240 L180,180 L120,180 L90,210') } 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 L180,120 L210,90 M240,240 L240,240 L180,180 L120,180 L90,210') } 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 () {

14
desktop/sources/scripts/lib/controller.js
View File

@ -62,18 +62,18 @@ function Controller () {
}
this.generate_svg = function (m) {
let svg_html = ''
let html = ''
for (const id in this.layout) {
let key = this.layout[id]
let acc = this.accelerator_for_key(key.name, m)
svg_html += `<rect x="${key.x + 1}" y="${key.y + 1}" width="${key.width - 2}" height="${key.height - 2}" rx="4" ry="4" title="${key.name}" stroke="#ccc" fill="none" stroke-width="1"/>`
svg_html += `<rect x="${key.x + 3}" y="${key.y + 3}" width="${key.width - 6}" height="${key.height - 12}" rx="3" ry="3" title="${key.name}" stroke="${acc.basic ? '#000' : acc.ctrl ? '#ccc' : '#fff'}" fill="${acc.basic ? '#000' : acc.ctrl ? '#ccc' : '#fff'}" stroke-width="1"/>`
svg_html += `<text x="${key.x + 10}" y="${key.y + 20}" font-size='11' font-family='Input Mono' stroke-width='0' fill='${acc.basic ? '#fff' : '#000'}'>${key.name.toUpperCase()}</text>`
svg_html += acc && acc.basic ? `<text x="${key.x + 10}" y="${key.y + 35}" font-size='7' font-family='Input Mono' stroke-width='0' fill='#fff'>${acc.basic}</text>` : ''
svg_html += acc && acc.ctrl ? `<text x="${key.x + 10}" y="${key.y + 45}" font-size='7' font-family='Input Mono' stroke-width='0' fill='#000'>${acc.ctrl}</text>` : ''
html += `<rect x="${key.x + 1}" y="${key.y + 1}" width="${key.width - 2}" height="${key.height - 2}" rx="4" ry="4" title="${key.name}" stroke="#ccc" fill="none" stroke-width="1"/>`
html += `<rect x="${key.x + 3}" y="${key.y + 3}" width="${key.width - 6}" height="${key.height - 12}" rx="3" ry="3" title="${key.name}" stroke="${acc.basic ? '#000' : acc.ctrl ? '#ccc' : '#fff'}" fill="${acc.basic ? '#000' : acc.ctrl ? '#ccc' : '#fff'}" stroke-width="1"/>`
html += `<text x="${key.x + 10}" y="${key.y + 20}" font-size='11' font-family='Input Mono' stroke-width='0' fill='${acc.basic ? '#fff' : '#000'}'>${key.name.toUpperCase()}</text>`
html += acc && acc.basic ? `<text x="${key.x + 10}" y="${key.y + 35}" font-size='7' font-family='Input Mono' stroke-width='0' fill='#fff'>${acc.basic}</text>` : ''
html += acc && acc.ctrl ? `<text x="${key.x + 10}" y="${key.y + 45}" font-size='7' font-family='Input Mono' stroke-width='0' fill='#000'>${acc.ctrl}</text>` : ''
}
return `<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="900" height="300" version="1.0" style="fill:none;stroke:black;stroke-width:2px;">${svg_html}</svg>`
return `<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="900" height="300" version="1.0" style="fill:none;stroke:black;stroke-width:2px;">${html}</svg>`
}
this.documentation = function () {

82
desktop/sources/scripts/manager.js Normal file
View File

@ -0,0 +1,82 @@
'use strict'
// Manages the SVG file
function Manager (dotgrid) {
// Create SVG parts
this.el = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
this.el.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
this.el.setAttribute('baseProfile', 'full')
this.el.setAttribute('version', '1.1')
this.el.style.fill = 'none'
this.layers = []
this.install = function () {
this.el.appendChild(this.layers[2] = document.createElementNS('http://www.w3.org/2000/svg', 'path'))
this.el.appendChild(this.layers[1] = document.createElementNS('http://www.w3.org/2000/svg', 'path'))
this.el.appendChild(this.layers[0] = document.createElementNS('http://www.w3.org/2000/svg', 'path'))
}
this.update = function () {
this.el.setAttribute('width', (DOTGRID.tool.settings.size.width + 15) + 'px')
this.el.setAttribute('height', (DOTGRID.tool.settings.size.height + 15) + 'px')
this.el.style.width = (DOTGRID.tool.settings.size.width + 15)
this.el.style.height = DOTGRID.tool.settings.size.height + 15
const styles = DOTGRID.tool.styles
const paths = DOTGRID.tool.paths()
for (const id in this.layers) {
const style = styles[id]
const path = paths[id]
const layer = this.layers[id]
layer.style.strokeWidth = style.thickness
layer.style.strokeLinecap = style.strokeLinecap
layer.style.strokeLinejoin = style.strokeLinejoin
layer.style.stroke = style.color
layer.style.fill = style.fill
layer.style.transform = style.transform
layer.setAttribute('d', paths[id])
}
}
this.svg64 = function () {
let xml = new XMLSerializer().serializeToString(this.el)
let svg64 = btoa(xml)
let b64Start = 'data:image/svg+xml;base64,'
return b64Start + svg64
}
// Exporters
this.toPNG = function (size = DOTGRID.tool.settings.size, callback) {
this.update()
let image64 = this.svg64()
let img = new Image()
let canvas = document.createElement('canvas')
canvas.width = (size.width) * 2
canvas.height = (size.height) * 2
img.onload = function () {
canvas.getContext('2d').drawImage(img, 0, 0, (size.width) * 2, (size.height) * 2)
callback(canvas.toDataURL('image/png'), 'export.png')
}
img.src = image64
}
this.toSVG = function (callback) {
this.update()
const image64 = this.svg64()
callback(image64, 'export.svg')
}
this.toGRID = function (callback) {
this.update()
const text = DOTGRID.tool.export()
const file = new Blob([text], { type: 'text/plain' })
callback(URL.createObjectURL(file), 'export.grid')
}
}

8
desktop/sources/scripts/picker.js
View File

@ -1,6 +1,6 @@
'use strict'
DOTGRID.Picker = function () {
function Picker (dotgrid) {
this.memory = ''
this.el = document.createElement('div')
this.el.id = 'picker'
@ -46,7 +46,7 @@ DOTGRID.Picker = function () {
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.renderer.update() }, 250)
}
this.validate = function () {
@ -61,7 +61,7 @@ DOTGRID.Picker = function () {
}
this.listen = function (e, is_down = false) {
if (is_down && !is_color_char(e.key)) {
if (is_down && !isColorChar(e.key)) {
e.preventDefault()
return
}
@ -90,7 +90,7 @@ DOTGRID.Picker = function () {
return re.test(val)
}
function is_color_char (val) {
function isColorChar (val) {
const re = /[0-9A-Fa-f]/g
return re.test(val)
}

328
desktop/sources/scripts/renderer.js
View File

@ -1,89 +1,267 @@
'use strict'
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')
this.svg_el.setAttribute('baseProfile', 'full')
this.svg_el.setAttribute('version', '1.1')
this.svg_el.style.fill = 'none'
function Renderer (dotgrid) {
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.context = this.el.getContext('2d')
this.showExtras = true
this.layer_1 = document.createElementNS('http://www.w3.org/2000/svg', 'path')
this.layer_2 = document.createElementNS('http://www.w3.org/2000/svg', 'path')
this.layer_3 = document.createElementNS('http://www.w3.org/2000/svg', 'path')
this.scale = 2
this.svg_el.appendChild(this.layer_3)
this.svg_el.appendChild(this.layer_2)
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
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
this.layer_1.style.strokeLinejoin = styles[0].strokeLinejoin
this.layer_1.style.stroke = styles[0].color
this.layer_1.style.fill = styles[0].fill
this.layer_1.setAttribute('d', paths[0])
this.layer_2.style.strokeWidth = styles[1].thickness
this.layer_2.style.strokeLinecap = styles[1].strokeLinecap
this.layer_2.style.strokeLinejoin = styles[1].strokeLinejoin
this.layer_2.style.stroke = styles[1].color
this.layer_2.style.fill = styles[1].fill
this.layer_2.setAttribute('d', paths[1])
this.layer_3.style.strokeWidth = styles[2].thickness
this.layer_3.style.strokeLinecap = styles[2].strokeLinecap
this.layer_3.style.strokeLinejoin = styles[2].strokeLinejoin
this.layer_3.style.stroke = styles[2].color
this.layer_3.style.fill = styles[2].fill
this.layer_3.setAttribute('d', paths[2])
}
this.svg64 = function () {
this.start = function () {
this.update()
let xml = new XMLSerializer().serializeToString(this.svg_el)
let svg64 = btoa(xml)
let b64Start = 'data:image/svg+xml;base64,'
return b64Start + svg64
}
this.to_png = function (size = DOTGRID.tool.settings.size, callback) {
let image64 = this.svg64()
let img = new Image()
let canvas = document.createElement('canvas')
canvas.width = (size.width) * 2
canvas.height = (size.height + 30) * 2
let ctx = canvas.getContext('2d')
img.onload = function () {
ctx.drawImage(img, 0, 0, (size.width) * 2, (size.height + 30) * 2)
let data = canvas.toDataURL('image/png')
callback(data, 'export.png')
this.update = function (force = false) {
dotgrid.manager.update()
let render = new Image()
render.onload = () => {
this.draw(render)
}
img.src = image64
render.src = dotgrid.manager.svg64()
}
this.to_svg = function (callback) {
const image64 = this.svg64()
callback(image64, 'export.svg')
this.draw = function (render) {
this.clear()
this.drawMirror()
this.drawRulers()
this.drawGrid()
this.drawRender(render) //
this.drawVertices()
this.drawHandles()
this.drawTranslation()
this.drawCursor()
this.drawPreview()
}
this.to_grid = function (callback) {
const text = DOTGRID.tool.export()
const file = new Blob([text], { type: 'text/plain' })
callback(URL.createObjectURL(file), 'export.grid')
this.clear = function () {
this.context.clearRect(0, 0, this.el.width * this.scale, this.el.height * this.scale)
}
this.toggle = function () {
this.showExtras = !this.showExtras
this.update()
dotgrid.interface.update(true)
}
this.resize = function (size) {
const pad = 15
this.el.width = (size.width + pad) * this.scale
this.el.height = (size.height + pad) * this.scale
this.el.style.width = (size.width + pad) + 'px'
this.el.style.height = (size.height + pad) + 'px'
this.update()
}
// Collections
this.drawMirror = function () {
if (!this.showExtras) { return }
if (dotgrid.tool.style().mirror_style === 0) { return }
const middle = { x: dotgrid.tool.settings.size.width + 15, y: dotgrid.tool.settings.size.height + (this.scale * 15) }
if (dotgrid.tool.style().mirror_style === 1 || dotgrid.tool.style().mirror_style === 3) {
this.drawRule({ x: middle.x, y: 15 * this.scale }, { x: middle.x, y: (dotgrid.tool.settings.size.height + 15) * this.scale })
}
if (dotgrid.tool.style().mirror_style === 2 || dotgrid.tool.style().mirror_style === 3) {
this.drawRule({ x: 15 * this.scale, y: middle.y }, { x: (dotgrid.tool.settings.size.width + 15) * this.scale, y: middle.y })
}
}
this.drawHandles = function () {
if (!this.showExtras) { return }
for (const segmentId in dotgrid.tool.layer()) {
const segment = dotgrid.tool.layer()[segmentId]
for (const vertexId in segment.vertices) {
const vertex = segment.vertices[vertexId]
this.drawHandle(vertex)
}
}
}
this.drawVertices = function () {
for (const id in dotgrid.tool.vertices) {
this.drawVertex(dotgrid.tool.vertices[id])
}
}
this.drawGrid = function () {
if (!this.showExtras) { return }
const cursor = { x: parseInt(dotgrid.cursor.pos.x / 15), y: parseInt(dotgrid.cursor.pos.y / 15) }
const markers = dotgrid.getSize().markers
for (let x = markers.w - 1; x >= 0; x--) {
for (let y = markers.h; y >= 0; y--) {
let is_step = x % 4 == 0 && y % 4 == 0
// Color
let color = is_step ? dotgrid.theme.active.b_med : dotgrid.theme.active.b_low
if ((y == 0 || y == markers.h) && cursor.x == x + 1) { color = dotgrid.theme.active.b_high } else if ((x == 0 || x == markers.w - 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.drawMarker({
x: parseInt(x * 15) + 15,
y: parseInt(y * 15) + 15
}, is_step ? 2.5 : 1.5, color)
}
}
}
this.drawRulers = function () {
if (!dotgrid.cursor.translation) { return }
const pos = dotgrid.cursor.translation.to
const bottom = (dotgrid.tool.settings.size.height * this.scale)
const right = (dotgrid.tool.settings.size.width * this.scale)
this.drawRule({ x: pos.x * this.scale, y: 0 }, { x: pos.x * this.scale, y: bottom })
this.drawRule({ x: 0, y: pos.y * this.scale }, { x: right, y: pos.y * this.scale })
}
this.drawPreview = function () {
let operation = dotgrid.cursor.operation && dotgrid.cursor.operation.cast ? dotgrid.cursor.operation.cast : null
if (!dotgrid.tool.canCast(operation)) { return }
if (operation == 'close') { return }
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]
}
this.drawPath(path, style)
}
// Elements
this.drawMarker = function (pos, radius = 1, color) {
this.context.beginPath()
this.context.lineWidth = 2
this.context.arc(pos.x * this.scale, pos.y * this.scale, radius, 0, 2 * Math.PI, false)
this.context.fillStyle = color
this.context.fill()
this.context.closePath()
}
this.drawVertex = function (pos, radius = 5) {
this.context.beginPath()
this.context.lineWidth = 2
this.context.arc((pos.x * this.scale), (pos.y * this.scale), radius, 0, 2 * Math.PI, false)
this.context.fillStyle = dotgrid.theme.active.f_med
this.context.fill()
this.context.closePath()
}
this.drawRule = function (from, to) {
this.context.beginPath()
this.context.moveTo(from.x, from.y)
this.context.lineTo(to.x, to.y)
this.context.lineCap = 'round'
this.context.lineWidth = 3
this.context.strokeStyle = dotgrid.theme.active.b_low
this.context.stroke()
this.context.closePath()
}
this.drawHandle = function (pos, radius = 6) {
this.context.beginPath()
this.context.lineWidth = 3
this.context.lineCap = 'round'
this.context.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), radius + 3, 0, 2 * Math.PI, false)
this.context.fillStyle = dotgrid.theme.active.f_high
this.context.fill()
this.context.strokeStyle = dotgrid.theme.active.f_high
this.context.stroke()
this.context.closePath()
this.context.beginPath()
this.context.arc((pos.x * this.scale), (pos.y * this.scale), radius, 0, 2 * Math.PI, false)
this.context.fillStyle = dotgrid.theme.active.f_low
this.context.fill()
this.context.closePath()
this.context.beginPath()
this.context.arc((pos.x * this.scale), (pos.y * this.scale), radius - 3, 0, 2 * Math.PI, false)
this.context.fillStyle = dotgrid.theme.active.f_high
this.context.fill()
this.context.closePath()
}
this.drawPath = function (path, style) {
let p = new Path2D(path)
this.context.strokeStyle = style.color
this.context.lineWidth = style.thickness * this.scale
this.context.lineCap = style.strokeLinecap
this.context.lineJoin = style.strokeLinejoin
if (style.fill && style.fill != 'none') {
this.context.fillStyle = style.color
this.context.fill(p)
}
// Dash
this.context.save()
if (style.strokeLineDash) { this.context.setLineDash(style.strokeLineDash) } else { this.context.setLineDash([]) }
this.context.stroke(p)
this.context.restore()
}
this.drawTranslation = function () {
if (!dotgrid.cursor.translation) { return }
this.context.save()
this.context.beginPath()
this.context.moveTo((dotgrid.cursor.translation.from.x * this.scale), (dotgrid.cursor.translation.from.y * this.scale))
this.context.lineTo((dotgrid.cursor.translation.to.x * this.scale), (dotgrid.cursor.translation.to.y * this.scale))
this.context.lineCap = 'round'
this.context.lineWidth = 5
this.context.strokeStyle = dotgrid.cursor.translation.multi === true ? dotgrid.theme.active.b_inv : dotgrid.cursor.translation.copy === true ? dotgrid.theme.active.f_med : dotgrid.theme.active.f_low
this.context.setLineDash([5, 10])
this.context.stroke()
this.context.closePath()
this.context.setLineDash([])
this.context.restore()
}
this.drawCursor = function (pos = dotgrid.cursor.pos, radius = dotgrid.tool.style().thickness - 1) {
this.context.save()
this.context.beginPath()
this.context.lineWidth = 3
this.context.lineCap = 'round'
this.context.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), 5, 0, 2 * Math.PI, false)
this.context.strokeStyle = dotgrid.theme.active.background
this.context.stroke()
this.context.closePath()
this.context.beginPath()
this.context.lineWidth = 3
this.context.lineCap = 'round'
this.context.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), clamp(radius, 5, 100), 0, 2 * Math.PI, false)
this.context.strokeStyle = dotgrid.theme.active.f_med
this.context.stroke()
this.context.closePath()
this.context.restore()
}
this.drawRender = function (render) {
this.context.drawImage(render, 0, 0, this.el.width, this.el.height)
}
function isEqual (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 }
}

209
desktop/sources/scripts/tool.js
View File

@ -1,21 +1,21 @@
'use strict'
DOTGRID.Tool = function () {
function Tool (dotgrid) {
this.index = 0
this.settings = { size: { width: 300, height: 300 } }
this.layers = [[], [], []]
this.styles = [
{ thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#f00', fill: 'none', mirror_style: 0 },
{ thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#0f0', fill: 'none', mirror_style: 0 },
{ thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#00f', fill: 'none', mirror_style: 0 }
{ thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#f00', fill: 'none', mirror_style: 0, transform: 'rotate(45)' },
{ thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#0f0', fill: 'none', mirror_style: 0, transform: 'rotate(45)' },
{ thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#00f', fill: 'none', mirror_style: 0, transform: 'rotate(45)' }
]
this.vertices = []
this.reqs = { line: 2, arc_c: 2, arc_r: 2, arc_c_full: 2, arc_r_full: 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.erase = function () {
@ -36,20 +36,20 @@ DOTGRID.Tool = function () {
this.clear = function () {
this.vertices = []
DOTGRID.guide.update()
DOTGRID.interface.update(true)
dotgrid.renderer.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.renderer.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.renderer.update()
dotgrid.interface.update(true)
}
this.length = function () {
@ -64,10 +64,10 @@ DOTGRID.Tool = function () {
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.renderer.update()
dotgrid.interface.update(true)
}
this.replace = function (dot) {
@ -77,7 +77,7 @@ DOTGRID.Tool = function () {
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.setSize({ width: dot.settings.size.width, height: dot.settings.size.height })
}
this.layers = dot.layers
@ -85,46 +85,46 @@ DOTGRID.Tool = function () {
this.settings = dot.settings
this.clear()
DOTGRID.guide.update()
DOTGRID.interface.update(true)
DOTGRID.history.push(this.layers)
dotgrid.renderer.update()
dotgrid.interface.update(true)
dotgrid.history.push(this.layers)
}
// EDIT
this.remove_segment = function () {
this.removeSegment = function () {
if (this.vertices.length > 0) { this.clear(); return }
this.layer().pop()
this.clear()
DOTGRID.guide.update()
DOTGRID.interface.update(true)
dotgrid.renderer.update()
dotgrid.interface.update(true)
}
this.remove_segments_at = function (pos) {
for (const segment_id in this.layer()) {
let segment = this.layer()[segment_id]
for (const vertex_id in segment.vertices) {
let vertex = segment.vertices[vertex_id]
this.removeSegmentsAt = function (pos) {
for (const segmentId in this.layer()) {
let segment = this.layer()[segmentId]
for (const vertexId in segment.vertices) {
let vertex = segment.vertices[vertexId]
if (Math.abs(pos.x) == Math.abs(vertex.x) && Math.abs(pos.y) == Math.abs(vertex.y)) {
segment.vertices.splice(vertex_id, 1)
segment.vertices.splice(vertexId, 1)
}
}
if (segment.vertices.length < 2) {
this.layers[this.index].splice(segment_id, 1)
this.layers[this.index].splice(segmentId, 1)
}
}
this.clear()
DOTGRID.guide.update()
DOTGRID.interface.update(true)
dotgrid.renderer.update()
dotgrid.interface.update(true)
}
this.select_segment_at = function (pos, source = this.layer()) {
this.selectSegmentAt = function (pos, source = this.layer()) {
let target_segment = null
for (const segment_id in source) {
let segment = source[segment_id]
for (const vertex_id in segment.vertices) {
let vertex = segment.vertices[vertex_id]
for (const segmentId in source) {
let segment = source[segmentId]
for (const vertexId in segment.vertices) {
let vertex = segment.vertices[vertexId]
if (vertex.x == Math.abs(pos.x) && vertex.y == Math.abs(pos.y)) {
return segment
}
@ -133,17 +133,17 @@ DOTGRID.Tool = function () {
return null
}
this.add_vertex = function (pos) {
this.addVertex = 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) {
for (const segment_id in this.layer()) {
let segment = this.layer()[segment_id]
for (const vertex_id in segment.vertices) {
let vertex = segment.vertices[vertex_id]
this.vertexAt = function (pos) {
for (const segmentId in this.layer()) {
let segment = this.layer()[segmentId]
for (const vertexId in segment.vertices) {
let vertex = segment.vertices[vertexId]
if (vertex.x == Math.abs(pos.x) && vertex.y == Math.abs(pos.y)) {
return vertex
}
@ -152,8 +152,8 @@ DOTGRID.Tool = function () {
return null
}
this.add_segment = function (type, vertices) {
let append_target = this.can_append({ type: type, vertices: vertices })
this.addSegment = function (type, vertices) {
let append_target = this.canAppend({ type: type, vertices: vertices })
if (append_target) {
this.layer()[append_target].vertices = this.layer()[append_target].vertices.concat(vertices)
} else {
@ -165,13 +165,13 @@ DOTGRID.Tool = function () {
if (!this.layer()) { this.layers[this.index] = [] }
if (!this.canCast(type)) { console.warn('Cannot cast'); return }
this.add_segment(type, this.vertices.slice())
this.addSegment(type, this.vertices.slice())
DOTGRID.history.push(this.layers)
dotgrid.history.push(this.layers)
this.clear()
DOTGRID.guide.update()
DOTGRID.interface.update(true)
dotgrid.renderer.update()
dotgrid.interface.update(true)
console.log(`Casted ${type} -> ${this.layer().length} elements`)
}
@ -196,25 +196,25 @@ DOTGRID.Tool = function () {
} else {
console.warn('Unknown', type)
}
DOTGRID.interface.update(true)
DOTGRID.guide.update()
dotgrid.interface.update(true)
dotgrid.renderer.update()
}
this.misc = function (type) {
DOTGRID.picker.start()
dotgrid.picker.start()
}
this.source = function (type) {
if (type == 'grid') { DOTGRID.guide.toggle() }
if (type == 'screen') { app.toggle_fullscreen() }
if (type == 'grid') { dotgrid.renderer.toggle() }
if (type == 'screen') { app.toggleFullscreen() }
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) {
this.canAppend = function (content) {
for (const id in this.layer()) {
let stroke = this.layer()[id]
if (stroke.type != content.type) { continue }
@ -245,78 +245,77 @@ DOTGRID.Tool = function () {
}
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: 0, y: 0 }, 1)
let l2 = new Generator(dotgrid.tool.layers[1], dotgrid.tool.styles[1]).toString({ x: 0, y: 0 }, 1)
let l3 = new Generator(dotgrid.tool.layers[2], dotgrid.tool.styles[2]).toString({ x: 0, y: 0 }, 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: 0, y: 0 }, 1)
}
this.translate = function (a, b) {
for (const segment_id in this.layer()) {
let segment = this.layer()[segment_id]
for (const vertex_id in segment.vertices) {
let vertex = segment.vertices[vertex_id]
for (const segmentId in this.layer()) {
let segment = this.layer()[segmentId]
for (const vertexId in segment.vertices) {
let vertex = segment.vertices[vertexId]
if (vertex.x == Math.abs(a.x) && vertex.y == Math.abs(a.y)) {
segment.vertices[vertex_id] = { x: Math.abs(b.x), y: Math.abs(b.y) }
segment.vertices[vertexId] = { x: Math.abs(b.x), y: Math.abs(b.y) }
}
}
}
DOTGRID.history.push(this.layers)
dotgrid.history.push(this.layers)
this.clear()
DOTGRID.guide.update()
dotgrid.renderer.update()
}
this.translate_multi = function (a, b) {
this.translateMulti = function (a, b) {
const offset = { x: a.x - b.x, y: a.y - b.y }
const segment = this.select_segment_at(a)
const segment = this.selectSegmentAt(a)
if (!segment) { return }
for (const vertex_id in segment.vertices) {
let vertex = segment.vertices[vertex_id]
segment.vertices[vertex_id] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
for (const vertexId in segment.vertices) {
let vertex = segment.vertices[vertexId]
segment.vertices[vertexId] = { 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.renderer.update()
}
this.translate_layer = function (a, b) {
console.log(a, b)
this.translateLayer = function (a, b) {
const offset = { x: a.x - b.x, y: a.y - b.y }
for (const segment_id in this.layer()) {
let segment = this.layer()[segment_id]
for (const vertex_id in segment.vertices) {
let vertex = segment.vertices[vertex_id]
segment.vertices[vertex_id] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
for (const segmentId in this.layer()) {
let segment = this.layer()[segmentId]
for (const vertexId in segment.vertices) {
let vertex = segment.vertices[vertexId]
segment.vertices[vertexId] = { 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.renderer.update()
}
this.translate_copy = function (a, b) {
this.translateCopy = function (a, b) {
const offset = { x: a.x - b.x, y: a.y - b.y }
const segment = this.select_segment_at(a, copy(this.layer()))
const segment = this.selectSegmentAt(a, copy(this.layer()))
if (!segment) { return }
for (const vertex_id in segment.vertices) {
let vertex = segment.vertices[vertex_id]
segment.vertices[vertex_id] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
for (const vertexId in segment.vertices) {
let vertex = segment.vertices[vertexId]
segment.vertices[vertexId] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
}
this.layer().push(segment)
DOTGRID.history.push(this.layers)
dotgrid.history.push(this.layers)
this.clear()
DOTGRID.guide.update()
dotgrid.renderer.update()
}
this.merge = function () {
@ -324,9 +323,9 @@ DOTGRID.Tool = function () {
this.erase()
this.layers[this.index] = merged
DOTGRID.history.push(this.layers)
dotgrid.history.push(this.layers)
this.clear()
DOTGRID.guide.update()
dotgrid.renderer.update()
}
// Style
@ -347,22 +346,22 @@ DOTGRID.Tool = function () {
return this.layers[this.index]
}
this.select_layer = function (id) {
this.selectLayer = function (id) {
this.index = clamp(id, 0, 2)
this.clear()
DOTGRID.guide.update()
DOTGRID.interface.update(true)
dotgrid.renderer.update()
dotgrid.interface.update(true)
console.log(`layer:${this.index}`)
}
this.select_next_layer = function () {
this.selectNextLayer = function () {
this.index = this.index >= 2 ? 0 : this.index++
this.select_layer(this.index)
this.selectLayer(this.index)
}
this.select_prev_layer = function () {
this.selectPrevLayer = function () {
this.index = this.index >= 0 ? 2 : this.index--
this.select_layer(this.index)
this.selectLayer(this.index)
}
function copy (data) { return data ? JSON.parse(JSON.stringify(data)) : [] }

5
index.html
View File

@ -21,10 +21,11 @@
<!-- Generics -->
<script type="text/javascript" src="desktop/sources/scripts/lib/theme.js"></script>
<script type="text/javascript" src="desktop/sources/scripts/lib/history.js"></script>
<!-- Dotgrid -->
<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/manager.js"></script>
<script type="text/javascript" src="desktop/sources/scripts/renderer.js"></script>
<script type="text/javascript" src="desktop/sources/scripts/cursor.js"></script>
<script type="text/javascript" src="desktop/sources/scripts/interface.js"></script>
<script type="text/javascript" src="desktop/sources/scripts/tool.js"></script>
<script type="text/javascript" src="desktop/sources/scripts/generator.js"></script>

12
web/events.js
View File

@ -12,14 +12,14 @@ document.onkeyup = (e) =>
if((e.ctrlKey || e.metaKey) && ch == "e"){ DOTGRID.export(); e.preventDefault(); return; }
if(ch == "backspace" && e.ctrlKey){ DOTGRID.theme.reset(); e.preventDefault(); }
if(ch == "backspace"){ DOTGRID.tool.remove_segment(); e.preventDefault(); }
if(ch == "backspace"){ DOTGRID.tool.removeSegment(); e.preventDefault(); }
if(ch == "escape"){ DOTGRID.tool.clear(); DOTGRID.picker.stop(); e.preventDefault(); }
if(ch == "1"){ DOTGRID.tool.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.selectLayer(0); e.preventDefault(); }
if(ch == "2"){ DOTGRID.tool.selectLayer(1); e.preventDefault(); }
if(ch == "3"){ DOTGRID.tool.selectLayer(2); e.preventDefault(); }
if(ch == "h"){ DOTGRID.guide.toggle(); e.preventDefault(); }
if(ch == "h"){ DOTGRID.renderer.toggle(); e.preventDefault(); }
if(ch == "?"){ DOTGRID.reset(); DOTGRID.theme.reset(); e.preventDefault(); }
if(ch == "a"){ DOTGRID.tool.cast("line"); e.preventDefault(); }
@ -47,5 +47,5 @@ document.onkeyup = (e) =>
document.onkeydown = (e) =>
{
if(e.keyCode == 9){ DOTGRID.tool.select_next_layer(); e.preventDefault(); }
if(e.keyCode == 9){ DOTGRID.tool.selectNextLayer(); e.preventDefault(); }
}