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

Improved theme support

Browse Source
This commit is contained in:
neauoire 2019-11-10 10:48:31 -05:00
parent dd5b66247c
commit 014590a6a1
11 changed files with 198 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
desktop/sources/index.html
View File

@ -24,7 +24,7 @@
<script type="text/javascript" src="scripts/lib/history.js"></script> <script type="text/javascript" src="scripts/lib/history.js"></script>
<script type="text/javascript" src="scripts/lib/source.js"></script> <script type="text/javascript" src="scripts/lib/source.js"></script>
<!-- Dotgrid --> <!-- Dotgrid -->
<script type="text/javascript" src="scripts/dotgrid.js"></script> <script type="text/javascript" src="scripts/client.js"></script>
<script type="text/javascript" src="scripts/manager.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/renderer.js"></script>
<script type="text/javascript" src="scripts/cursor.js"></script> <script type="text/javascript" src="scripts/cursor.js"></script>
@ -43,13 +43,13 @@
<script> <script>
'use strict' 'use strict'
const dotgrid = new Dotgrid() const client = new Client()
dotgrid.install(document.body) client.install(document.body)
window.addEventListener('load', () => { window.addEventListener('load', () => {
dotgrid.start() client.start()
dotgrid.acels.inject('Dotgrid') client.acels.inject('Dotgrid')
}) })
</script> </script>
</body> </body>

15
desktop/sources/scripts/dotgrid.js → desktop/sources/scripts/client.js
View File

@ -14,9 +14,9 @@
/* global FileReader */ /* global FileReader */
function Dotgrid () { function Client () {
this.install = function (host) { this.install = function (host) {
console.info('Dotgrid', 'Installing..') console.info('Client', 'Installing..')
this.acels = new Acels(this) this.acels = new Acels(this)
this.theme = new Theme(this) this.theme = new Theme(this)
@ -48,7 +48,6 @@ function Dotgrid () {
this.acels.set('File', 'Save', 'CmdOrCtrl+S', () => { this.source.write('dotgrid', 'grid', this.tool.export(), 'text/plain') }) this.acels.set('File', 'Save', 'CmdOrCtrl+S', () => { this.source.write('dotgrid', 'grid', this.tool.export(), 'text/plain') })
this.acels.set('File', 'Export Vector', 'CmdOrCtrl+E', () => { this.source.write('dotgrid', 'svg', this.manager.toString(), 'image/svg+xml') }) this.acels.set('File', 'Export Vector', 'CmdOrCtrl+E', () => { this.source.write('dotgrid', 'svg', this.manager.toString(), 'image/svg+xml') })
this.acels.set('File', 'Export Image', 'CmdOrCtrl+Shift+E', () => { this.manager.toPNG(this.tool.settings.size, (dataUrl) => { this.source.download('dotgrid', 'png', dataUrl, 'image/png') }) }) this.acels.set('File', 'Export Image', 'CmdOrCtrl+Shift+E', () => { this.manager.toPNG(this.tool.settings.size, (dataUrl) => { this.source.download('dotgrid', 'png', dataUrl, 'image/png') }) })
this.acels.set('File', 'Revert', 'CmdOrCtrl+W', () => { this.source.revert() })
this.acels.set('History', 'Undo', 'CmdOrCtrl+Z', () => { this.history.undo() }) this.acels.set('History', 'Undo', 'CmdOrCtrl+Z', () => { this.history.undo() })
this.acels.set('History', 'Redo', 'CmdOrCtrl+Shift+Z', () => { this.history.redo() }) this.acels.set('History', 'Redo', 'CmdOrCtrl+Shift+Z', () => { this.history.redo() })
this.acels.set('Stroke', 'Line', 'A', () => { this.tool.cast('line') }) this.acels.set('Stroke', 'Line', 'A', () => { this.tool.cast('line') })
@ -89,7 +88,7 @@ function Dotgrid () {
} }
this.start = () => { this.start = () => {
console.log('Dotgrid', 'Starting..') console.log('Client', 'Starting..')
console.info(`${this.acels}`) console.info(`${this.acels}`)
this.theme.start() this.theme.start()
@ -131,7 +130,7 @@ function Dotgrid () {
this.fitSize = () => { this.fitSize = () => {
if (this.requireResize() === false) { return } if (this.requireResize() === false) { return }
console.log('Dotgrid', `Will resize to: ${printSize(this.getRequiredSize())}`) console.log('Client', `Will resize to: ${printSize(this.getRequiredSize())}`)
this.update() this.update()
} }
@ -164,7 +163,7 @@ function Dotgrid () {
const _required = this.getRequiredSize() const _required = this.getRequiredSize()
const offset = sizeOffset(_window, _required) const offset = sizeOffset(_window, _required)
if (offset.width !== 0 || offset.height !== 0) { if (offset.width !== 0 || offset.height !== 0) {
console.log('Dotgrid', `Require ${printSize(_required)}, but window is ${printSize(_window)}(${printSize(offset)})`) console.log('Client', `Require ${printSize(_required)}, but window is ${printSize(_window)}(${printSize(offset)})`)
return true return true
} }
return false return false
@ -175,7 +174,7 @@ function Dotgrid () {
const _padded = this.getPaddedSize() const _padded = this.getPaddedSize()
const offset = sizeOffset(_padded, _project) const offset = sizeOffset(_padded, _project)
if (offset.width !== 0 || offset.height !== 0) { if (offset.width !== 0 || offset.height !== 0) {
console.log('Dotgrid', `Resize project to ${printSize(_padded)}`) console.log('Client', `Resize project to ${printSize(_padded)}`)
this.tool.settings.size = _padded this.tool.settings.size = _padded
} }
this.update() this.update()
@ -190,7 +189,7 @@ function Dotgrid () {
const file = e.dataTransfer.files[0] const file = e.dataTransfer.files[0]
const filename = file.path ? file.path : file.name ? file.name : '' const filename = file.path ? file.path : file.name ? file.name : ''
if (filename.indexOf('.grid') < 0) { console.warn('Dotgrid', 'Not a .grid file'); return } if (filename.indexOf('.grid') < 0) { console.warn('Client', 'Not a .grid file'); return }
const reader = new FileReader() const reader = new FileReader()

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

@ -1,6 +1,6 @@
'use strict' 'use strict'
function Cursor (dotgrid) { function Cursor (client) {
this.pos = { x: 0, y: 0 } this.pos = { x: 0, y: 0 }
this.lastPos = { x: 0, y: 0 } this.lastPos = { x: 0, y: 0 }
this.translation = null this.translation = null
@ -17,11 +17,11 @@ function Cursor (dotgrid) {
this.down = function (e) { this.down = function (e) {
this.pos = this.atEvent(e) this.pos = this.atEvent(e)
if (dotgrid.tool.vertexAt(this.pos)) { if (client.tool.vertexAt(this.pos)) {
this.translate(this.pos, this.pos, e.shiftKey, e.ctrlKey || e.metaKey, e.altKey) this.translate(this.pos, this.pos, e.shiftKey, e.ctrlKey || e.metaKey, e.altKey)
} }
dotgrid.renderer.update() client.renderer.update()
dotgrid.interface.update() client.interface.update()
e.preventDefault() e.preventDefault()
} }
@ -31,9 +31,9 @@ function Cursor (dotgrid) {
this.translate(null, this.pos) this.translate(null, this.pos)
} }
if (this.lastPos.x !== this.pos.x || this.lastPos.y !== this.pos.y) { if (this.lastPos.x !== this.pos.x || this.lastPos.y !== this.pos.y) {
dotgrid.renderer.update() client.renderer.update()
} }
dotgrid.interface.update() client.interface.update()
this.lastPos = this.pos this.lastPos = this.pos
e.preventDefault() e.preventDefault()
} }
@ -41,23 +41,23 @@ function Cursor (dotgrid) {
this.up = function (e) { this.up = function (e) {
this.pos = this.atEvent(e) this.pos = this.atEvent(e)
if (this.translation && !isEqual(this.translation.from, this.translation.to)) { if (this.translation && !isEqual(this.translation.from, this.translation.to)) {
if (this.translation.layer === true) { dotgrid.tool.translateLayer(this.translation.from, this.translation.to) } else if (this.translation.copy) { dotgrid.tool.translateCopy(this.translation.from, this.translation.to) } else if (this.translation.multi) { dotgrid.tool.translateMulti(this.translation.from, this.translation.to) } else { dotgrid.tool.translate(this.translation.from, this.translation.to) } if (this.translation.layer === true) { client.tool.translateLayer(this.translation.from, this.translation.to) } else if (this.translation.copy) { client.tool.translateCopy(this.translation.from, this.translation.to) } else if (this.translation.multi) { client.tool.translateMulti(this.translation.from, this.translation.to) } else { client.tool.translate(this.translation.from, this.translation.to) }
} else if (e.target.id === 'guide') { } else if (e.target.id === 'guide') {
dotgrid.tool.addVertex({ x: this.pos.x, y: this.pos.y }) client.tool.addVertex({ x: this.pos.x, y: this.pos.y })
dotgrid.picker.stop() client.picker.stop()
} }
this.translate() this.translate()
dotgrid.interface.update() client.interface.update()
dotgrid.renderer.update() client.renderer.update()
e.preventDefault() e.preventDefault()
} }
this.alt = function (e) { this.alt = function (e) {
this.pos = this.atEvent(e) this.pos = this.atEvent(e)
dotgrid.tool.removeSegmentsAt(this.pos) client.tool.removeSegmentsAt(this.pos)
e.preventDefault() e.preventDefault()
setTimeout(() => { setTimeout(() => {
dotgrid.tool.clear() client.tool.clear()
}, 150) }, 150)
} }
@ -67,15 +67,15 @@ function Cursor (dotgrid) {
this.relativePos = function (pos) { this.relativePos = function (pos) {
return { return {
x: pos.x - dotgrid.renderer.el.offsetLeft, x: pos.x - client.renderer.el.offsetLeft,
y: pos.y - dotgrid.renderer.el.offsetTop y: pos.y - client.renderer.el.offsetTop
} }
} }
this.snapPos = function (pos) { this.snapPos = function (pos) {
return { return {
x: clamp(step(pos.x, 15), 15, dotgrid.tool.settings.size.width - 15), x: clamp(step(pos.x, 15), 15, client.tool.settings.size.width - 15),
y: clamp(step(pos.y, 15), 15, dotgrid.tool.settings.size.height - 15) y: clamp(step(pos.y, 15), 15, client.tool.settings.size.height - 15)
} }
} }

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

@ -1,6 +1,6 @@
'use strict' 'use strict'
/* global dotgrid */ /* global client */
function Generator (layer, style) { function Generator (layer, style) {
this.layer = layer this.layer = layer
@ -12,13 +12,13 @@ function Generator (layer, style) {
for (const k1 in l) { for (const k1 in l) {
const seg = l[k1] const seg = l[k1]
for (const k2 in seg.vertices) { for (const k2 in seg.vertices) {
if (mirror === 1 || mirror === 3) { seg.vertices[k2].x = (dotgrid.tool.settings.size.width) - seg.vertices[k2].x } if (mirror === 1 || mirror === 3) { seg.vertices[k2].x = (client.tool.settings.size.width) - seg.vertices[k2].x }
if (mirror === 2 || mirror === 3) { seg.vertices[k2].y = (dotgrid.tool.settings.size.height) - seg.vertices[k2].y } if (mirror === 2 || mirror === 3) { seg.vertices[k2].y = (client.tool.settings.size.height) - seg.vertices[k2].y }
// Offset // Offset
seg.vertices[k2].x += offset.x seg.vertices[k2].x += offset.x
seg.vertices[k2].y += offset.y seg.vertices[k2].y += offset.y
// Rotate // 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: (client.tool.settings.size.width / 2) + offset.x + (7.5), y: (client.tool.settings.size.height / 2) + offset.y + 30 }
seg.vertices[k2] = rotatePoint(seg.vertices[k2], center, angle) seg.vertices[k2] = rotatePoint(seg.vertices[k2], center, angle)
// Scale // Scale
seg.vertices[k2].x *= scale seg.vertices[k2].x *= scale

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

@ -1,6 +1,6 @@
'use strict' 'use strict'
function Interface (dotgrid) { function Interface (client) {
this.el = document.createElement('div') this.el = document.createElement('div')
this.el.id = 'interface' this.el.id = 'interface'
@ -51,10 +51,10 @@ function Interface (dotgrid) {
<svg <svg
id="option_${name}" id="option_${name}"
title="${capitalize(name)}" title="${capitalize(name)}"
onmouseout="dotgrid.interface.out('${type}','${name}')" onmouseout="client.interface.out('${type}','${name}')"
onmouseup="dotgrid.interface.up('${type}','${name}')" onmouseup="client.interface.up('${type}','${name}')"
onmousedown="dotgrid.interface.down('${type}','${name}', event)" onmousedown="client.interface.down('${type}','${name}', event)"
onmouseover="dotgrid.interface.over('${type}','${name}')" onmouseover="client.interface.over('${type}','${name}')"
viewBox="0 0 300 300" viewBox="0 0 300 300"
class="icon ${type}"> class="icon ${type}">
<path id="${name}_path" class="icon_path" d="${tool.icon}"/>${name === 'depth' ? '<path class="icon_path inactive" d=""/>' : ''} <path id="${name}_path" class="icon_path" d="${tool.icon}"/>${name === 'depth' ? '<path class="icon_path inactive" d=""/>' : ''}
@ -65,63 +65,63 @@ function Interface (dotgrid) {
} }
} }
this.menu_el.innerHTML = html this.menu_el.innerHTML = html
this.menu_el.appendChild(dotgrid.picker.el) this.menu_el.appendChild(client.picker.el)
} }
this.over = function (type, name) { this.over = function (type, name) {
dotgrid.cursor.operation = {} client.cursor.operation = {}
dotgrid.cursor.operation[type] = name client.cursor.operation[type] = name
this.update(true) this.update(true)
dotgrid.renderer.update(true) client.renderer.update(true)
} }
this.out = function (type, name) { this.out = function (type, name) {
dotgrid.cursor.operation = '' client.cursor.operation = ''
dotgrid.renderer.update(true) client.renderer.update(true)
} }
this.up = function (type, name) { this.up = function (type, name) {
if (!dotgrid.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, dotgrid.tool); return } if (!client.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, client.tool); return }
this.update(true) this.update(true)
dotgrid.renderer.update(true) client.renderer.update(true)
} }
this.down = function (type, name, event) { this.down = function (type, name, event) {
if (!dotgrid.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, dotgrid.tool); return } if (!client.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, client.tool); return }
const mod = event.button === 2 ? -1 : 1 const mod = event.button === 2 ? -1 : 1
dotgrid.tool[type](name, mod) client.tool[type](name, mod)
this.update(true) this.update(true)
dotgrid.renderer.update(true) client.renderer.update(true)
} }
this.prev_operation = null this.prev_operation = null
this.update = function (force = false, id) { this.update = function (force = false, id) {
if (this.prev_operation === dotgrid.cursor.operation && force === false) { return } if (this.prev_operation === client.cursor.operation && force === false) { return }
let multiVertices = null let multiVertices = null
const segments = dotgrid.tool.layer() const segments = client.tool.layer()
const sumSegments = dotgrid.tool.length() const sumSegments = client.tool.length()
for (const i in segments) { for (const i in segments) {
if (segments[i].vertices.length > 2) { multiVertices = 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_line').className.baseVal = !client.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_c').className.baseVal = !client.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_arc_r').className.baseVal = !client.tool.canCast('arc_r') ? 'icon inactive' : 'icon'
document.getElementById('option_bezier').className.baseVal = !dotgrid.tool.canCast('bezier') ? 'icon inactive' : 'icon' document.getElementById('option_bezier').className.baseVal = !client.tool.canCast('bezier') ? 'icon inactive' : 'icon'
document.getElementById('option_close').className.baseVal = !dotgrid.tool.canCast('close') ? 'icon inactive' : 'icon' document.getElementById('option_close').className.baseVal = !client.tool.canCast('close') ? 'icon inactive' : 'icon'
document.getElementById('option_thickness').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' document.getElementById('option_thickness').className.baseVal = client.tool.layer().length < 1 ? 'icon inactive' : 'icon'
document.getElementById('option_linecap').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' document.getElementById('option_linecap').className.baseVal = client.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_linejoin').className.baseVal = client.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_mirror').className.baseVal = client.tool.layer().length < 1 ? 'icon inactive' : 'icon'
document.getElementById('option_fill').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' document.getElementById('option_fill').className.baseVal = client.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.fill = client.tool.style().color
document.getElementById('option_color').children[0].style.stroke = dotgrid.tool.style().color document.getElementById('option_color').children[0].style.stroke = client.tool.style().color
document.getElementById('option_color').className.baseVal = 'icon' document.getElementById('option_color').className.baseVal = 'icon'
// Source // Source
@ -130,15 +130,15 @@ function Interface (dotgrid) {
document.getElementById('option_export').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_render').className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source'
document.getElementById('option_grid').className.baseVal = dotgrid.renderer.showExtras ? 'icon inactive source' : 'icon source' document.getElementById('option_grid').className.baseVal = client.renderer.showExtras ? 'icon inactive source' : 'icon source'
// Grid // Grid
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 ') } if (client.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 // 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 (client.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 (client.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 (client.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 (client.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 (client.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 = client.cursor.operation
} }
this.toggle = function () { this.toggle = function () {
@ -148,7 +148,7 @@ function Interface (dotgrid) {
document.onkeydown = function (e) { document.onkeydown = function (e) {
if (e.key === 'Tab') { if (e.key === 'Tab') {
dotgrid.interface.toggle() client.interface.toggle()
e.preventDefault() e.preventDefault()
} }
} }

32
desktop/sources/scripts/lib/theme.js
View File

@ -11,13 +11,13 @@ function Theme (client) {
this.active = {} this.active = {}
this.default = { this.default = {
background: '#eeeeee', background: '#eeeeee',
f_high: '#000000', f_high: '#0a0a0a',
f_med: '#666666', f_med: '#4a4a4a',
f_low: '#888888', f_low: '#6a6a6a',
f_inv: '#000000', f_inv: '#111111',
b_high: '#ffffff', b_high: '#a1a1a1',
b_med: '#cccccc', b_med: '#c1c1c1',
b_low: '#dddddd', b_low: '#ffffff',
b_inv: '#ffb545' b_inv: '#ffb545'
} }
@ -144,15 +144,15 @@ function Theme (client) {
function isValid (json) { function isValid (json) {
if (!json) { return false } if (!json) { return false }
if (!json.background) { return false } if (!json.background || !isColor(json.background)) { return false }
if (!json.f_high) { return false } if (!json.f_high || !isColor(json.f_high)) { return false }
if (!json.f_med) { return false } if (!json.f_med || !isColor(json.f_med)) { return false }
if (!json.f_low) { return false } if (!json.f_low || !isColor(json.f_low)) { return false }
if (!json.f_inv) { return false } if (!json.f_inv || !isColor(json.f_inv)) { return false }
if (!json.b_high) { return false } if (!json.b_high || !isColor(json.b_high)) { return false }
if (!json.b_med) { return false } if (!json.b_med || !isColor(json.b_med)) { return false }
if (!json.b_low) { return false } if (!json.b_low || !isColor(json.b_low)) { return false }
if (!json.b_inv) { return false } if (!json.b_inv || !isColor(json.b_inv)) { return false }
return true return true
} }

18
desktop/sources/scripts/manager.js
View File

@ -5,7 +5,7 @@
/* global Image */ /* global Image */
/* global Blob */ /* global Blob */
function Manager (dotgrid) { function Manager (client) {
// Create SVG parts // Create SVG parts
this.el = document.createElementNS('http://www.w3.org/2000/svg', 'svg') this.el = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
this.el.setAttribute('xmlns', 'http://www.w3.org/2000/svg') this.el.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
@ -22,13 +22,13 @@ function Manager (dotgrid) {
} }
this.update = function () { this.update = function () {
this.el.setAttribute('width', (dotgrid.tool.settings.size.width) + 'px') this.el.setAttribute('width', (client.tool.settings.size.width) + 'px')
this.el.setAttribute('height', (dotgrid.tool.settings.size.height) + 'px') this.el.setAttribute('height', (client.tool.settings.size.height) + 'px')
this.el.style.width = (dotgrid.tool.settings.size.width) this.el.style.width = (client.tool.settings.size.width)
this.el.style.height = dotgrid.tool.settings.size.height this.el.style.height = client.tool.settings.size.height
const styles = dotgrid.tool.styles const styles = client.tool.styles
const paths = dotgrid.tool.paths() const paths = client.tool.paths()
for (const id in this.layers) { for (const id in this.layers) {
const style = styles[id] const style = styles[id]
@ -54,7 +54,7 @@ function Manager (dotgrid) {
// Exporters // Exporters
this.toPNG = function (size = dotgrid.tool.settings.size, callback) { this.toPNG = function (size = client.tool.settings.size, callback) {
this.update() this.update()
const image64 = this.svg64() const image64 = this.svg64()
@ -79,7 +79,7 @@ function Manager (dotgrid) {
this.toGRID = function (callback) { this.toGRID = function (callback) {
this.update() this.update()
const text = dotgrid.tool.export() const text = client.tool.export()
const file = new Blob([text], { type: 'text/plain' }) const file = new Blob([text], { type: 'text/plain' })
callback(URL.createObjectURL(file), 'export.grid') callback(URL.createObjectURL(file), 'export.grid')
} }

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

@ -1,6 +1,6 @@
'use strict' 'use strict'
function Picker (dotgrid) { function Picker (client) {
this.memory = '' this.memory = ''
this.el = document.createElement('div') this.el = document.createElement('div')
this.el.id = 'picker' this.el.id = 'picker'
@ -15,17 +15,17 @@ function Picker (dotgrid) {
this.isActive = true this.isActive = true
this.input.setAttribute('placeholder', `${dotgrid.tool.style().color.replace('#', '').trim()}`) this.input.setAttribute('placeholder', `${client.tool.style().color.replace('#', '').trim()}`)
this.input.setAttribute('maxlength', 6) this.input.setAttribute('maxlength', 6)
this.input.addEventListener('keydown', this.onKeyDown, false) this.input.addEventListener('keydown', this.onKeyDown, false)
this.input.addEventListener('keyup', this.onKeyUp, false) this.input.addEventListener('keyup', this.onKeyUp, false)
dotgrid.interface.el.className = 'picker' client.interface.el.className = 'picker'
this.input.focus() this.input.focus()
this.input.value = '' this.input.value = ''
try { dotgrid.controller.set('picker') } catch (err) { } try { client.controller.set('picker') } catch (err) { }
} }
this.update = function () { this.update = function () {
@ -43,13 +43,13 @@ function Picker (dotgrid) {
this.isActive = false this.isActive = false
dotgrid.interface.el.className = '' client.interface.el.className = ''
this.input.blur() this.input.blur()
this.input.value = '' this.input.value = ''
try { dotgrid.controller.set() } catch (err) { console.log('No controller') } try { client.controller.set() } catch (err) { console.log('No controller') }
setTimeout(() => { dotgrid.interface.update(true); dotgrid.renderer.update() }, 250) setTimeout(() => { client.interface.update(true); client.renderer.update() }, 250)
} }
this.validate = function () { this.validate = function () {
@ -57,8 +57,8 @@ function Picker (dotgrid) {
const hex = `#${this.input.value}` const hex = `#${this.input.value}`
dotgrid.tool.style().color = hex client.tool.style().color = hex
dotgrid.tool.style().fill = dotgrid.tool.style().fill !== 'none' ? hex : 'none' client.tool.style().fill = client.tool.style().fill !== 'none' ? hex : 'none'
this.stop() this.stop()
} }

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

@ -4,7 +4,7 @@
/* global Path2D */ /* global Path2D */
/* global Generator */ /* global Generator */
function Renderer (dotgrid) { function Renderer (client) {
this.el = document.createElement('canvas') this.el = document.createElement('canvas')
this.el.id = 'guide' this.el.id = 'guide'
this.el.width = 640 this.el.width = 640
@ -22,19 +22,19 @@ function Renderer (dotgrid) {
this.update = function (force = false) { this.update = function (force = false) {
this.resize() this.resize()
dotgrid.manager.update() client.manager.update()
const render = new Image() const render = new Image()
render.onload = () => { render.onload = () => {
this.draw(render) this.draw(render)
} }
render.src = dotgrid.manager.svg64() render.src = client.manager.svg64()
} }
this.draw = function (render) { this.draw = function (render) {
this.clear() this.clear()
this.drawMirror() this.drawMirror()
this.drawRulers()
this.drawGrid() this.drawGrid()
this.drawRulers()
this.drawRender(render) // this.drawRender(render) //
this.drawVertices() this.drawVertices()
this.drawHandles() this.drawHandles()
@ -50,11 +50,11 @@ function Renderer (dotgrid) {
this.toggle = function () { this.toggle = function () {
this.showExtras = !this.showExtras this.showExtras = !this.showExtras
this.update() this.update()
dotgrid.interface.update(true) client.interface.update(true)
} }
this.resize = function () { this.resize = function () {
const _target = dotgrid.getPaddedSize() const _target = client.getPaddedSize()
const _current = { width: this.el.width / this.scale, height: this.el.height / this.scale } const _current = { width: this.el.width / this.scale, height: this.el.height / this.scale }
const offset = sizeOffset(_target, _current) const offset = sizeOffset(_target, _current)
if (offset.width === 0 && offset.height === 0) { if (offset.width === 0 && offset.height === 0) {
@ -72,23 +72,23 @@ function Renderer (dotgrid) {
this.drawMirror = function () { this.drawMirror = function () {
if (!this.showExtras) { return } if (!this.showExtras) { return }
if (dotgrid.tool.style().mirror_style === 0) { return } if (client.tool.style().mirror_style === 0) { return }
const middle = { x: dotgrid.tool.settings.size.width, y: dotgrid.tool.settings.size.height } const middle = { x: client.tool.settings.size.width, y: client.tool.settings.size.height }
if (dotgrid.tool.style().mirror_style === 1 || dotgrid.tool.style().mirror_style === 3) { if (client.tool.style().mirror_style === 1 || client.tool.style().mirror_style === 3) {
this.drawRule({ x: middle.x, y: 15 * this.scale }, { x: middle.x, y: (dotgrid.tool.settings.size.height) * this.scale }) this.drawRule({ x: middle.x, y: 15 * this.scale }, { x: middle.x, y: (client.tool.settings.size.height) * this.scale })
} }
if (dotgrid.tool.style().mirror_style === 2 || dotgrid.tool.style().mirror_style === 3) { if (client.tool.style().mirror_style === 2 || client.tool.style().mirror_style === 3) {
this.drawRule({ x: 15 * this.scale, y: middle.y }, { x: (dotgrid.tool.settings.size.width) * this.scale, y: middle.y }) this.drawRule({ x: 15 * this.scale, y: middle.y }, { x: (client.tool.settings.size.width) * this.scale, y: middle.y })
} }
} }
this.drawHandles = function () { this.drawHandles = function () {
if (!this.showExtras) { return } if (!this.showExtras) { return }
for (const segmentId in dotgrid.tool.layer()) { for (const segmentId in client.tool.layer()) {
const segment = dotgrid.tool.layer()[segmentId] const segment = client.tool.layer()[segmentId]
for (const vertexId in segment.vertices) { for (const vertexId in segment.vertices) {
const vertex = segment.vertices[vertexId] const vertex = segment.vertices[vertexId]
this.drawHandle(vertex) this.drawHandle(vertex)
@ -97,15 +97,15 @@ function Renderer (dotgrid) {
} }
this.drawVertices = function () { this.drawVertices = function () {
for (const id in dotgrid.tool.vertices) { for (const id in client.tool.vertices) {
this.drawVertex(dotgrid.tool.vertices[id]) this.drawVertex(client.tool.vertices[id])
} }
} }
this.drawGrid = function () { this.drawGrid = function () {
if (!this.showExtras) { return } if (!this.showExtras) { return }
const markers = { w: parseInt(dotgrid.tool.settings.size.width / 15), h: parseInt(dotgrid.tool.settings.size.height / 15) } const markers = { w: parseInt(client.tool.settings.size.width / 15), h: parseInt(client.tool.settings.size.height / 15) }
for (let x = markers.w - 1; x >= 0; x--) { for (let x = markers.w - 1; x >= 0; x--) {
for (let y = markers.h - 1; y >= 0; y--) { for (let y = markers.h - 1; y >= 0; y--) {
@ -115,31 +115,31 @@ function Renderer (dotgrid) {
this.drawMarker({ this.drawMarker({
x: parseInt(x * 15), x: parseInt(x * 15),
y: parseInt(y * 15) y: parseInt(y * 15)
}, isStep ? 2.5 : 1.5, isStep ? dotgrid.theme.active.b_med : dotgrid.theme.active.b_low) }, isStep ? 2.5 : 1.5, client.theme.active.b_med)
} }
} }
} }
this.drawRulers = function () { this.drawRulers = function () {
if (!dotgrid.cursor.translation) { return } if (!client.cursor.translation) { return }
const pos = dotgrid.cursor.translation.to const pos = client.cursor.translation.to
const bottom = (dotgrid.tool.settings.size.height * this.scale) const bottom = (client.tool.settings.size.height * this.scale)
const right = (dotgrid.tool.settings.size.width * this.scale) const right = (client.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: 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.drawRule({ x: 0, y: pos.y * this.scale }, { x: right, y: pos.y * this.scale })
} }
this.drawPreview = function () { this.drawPreview = function () {
const operation = dotgrid.cursor.operation && dotgrid.cursor.operation.cast ? dotgrid.cursor.operation.cast : null const operation = client.cursor.operation && client.cursor.operation.cast ? client.cursor.operation.cast : null
if (!dotgrid.tool.canCast(operation)) { return } if (!client.tool.canCast(operation)) { return }
if (operation === 'close') { return } if (operation === 'close') { return }
const path = new Generator([{ vertices: dotgrid.tool.vertices, type: operation }]).toString({ x: 0, y: 0 }, 2) const path = new Generator([{ vertices: client.tool.vertices, type: operation }]).toString({ x: 0, y: 0 }, 2)
const style = { const style = {
color: dotgrid.theme.active.f_med, color: client.theme.active.f_med,
thickness: 2, thickness: 2,
strokeLinecap: 'round', strokeLinecap: 'round',
strokeLinejoin: 'round', strokeLinejoin: 'round',
@ -163,7 +163,7 @@ function Renderer (dotgrid) {
this.context.beginPath() this.context.beginPath()
this.context.lineWidth = 2 this.context.lineWidth = 2
this.context.arc((pos.x * this.scale), (pos.y * this.scale), radius, 0, 2 * Math.PI, false) 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.fillStyle = client.theme.active.f_low
this.context.fill() this.context.fill()
this.context.closePath() this.context.closePath()
} }
@ -174,31 +174,20 @@ function Renderer (dotgrid) {
this.context.lineTo(to.x, to.y) this.context.lineTo(to.x, to.y)
this.context.lineCap = 'round' this.context.lineCap = 'round'
this.context.lineWidth = 3 this.context.lineWidth = 3
this.context.strokeStyle = dotgrid.theme.active.b_low this.context.strokeStyle = client.theme.active.b_low
this.context.stroke() this.context.stroke()
this.context.closePath() this.context.closePath()
} }
this.drawHandle = function (pos, radius = 6) { this.drawHandle = function (pos, radius = 6) {
this.context.beginPath() 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.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.fillStyle = client.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.fill()
this.context.closePath() this.context.closePath()
this.context.beginPath() this.context.beginPath()
this.context.arc((pos.x * this.scale), (pos.y * this.scale), radius - 3, 0, 2 * Math.PI, false) 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.fillStyle = client.theme.active.b_low
this.context.fill() this.context.fill()
this.context.closePath() this.context.closePath()
} }
@ -224,16 +213,16 @@ function Renderer (dotgrid) {
} }
this.drawTranslation = function () { this.drawTranslation = function () {
if (!dotgrid.cursor.translation) { return } if (!client.cursor.translation) { return }
this.context.save() this.context.save()
this.context.beginPath() this.context.beginPath()
this.context.moveTo((dotgrid.cursor.translation.from.x * this.scale), (dotgrid.cursor.translation.from.y * this.scale)) this.context.moveTo((client.cursor.translation.from.x * this.scale), (client.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.lineTo((client.cursor.translation.to.x * this.scale), (client.cursor.translation.to.y * this.scale))
this.context.lineCap = 'round' this.context.lineCap = 'round'
this.context.lineWidth = 5 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.strokeStyle = client.cursor.translation.multi === true ? client.theme.active.b_inv : client.cursor.translation.copy === true ? client.theme.active.f_med : client.theme.active.f_low
this.context.setLineDash([5, 10]) this.context.setLineDash([5, 10])
this.context.stroke() this.context.stroke()
this.context.closePath() this.context.closePath()
@ -242,14 +231,14 @@ function Renderer (dotgrid) {
this.context.restore() this.context.restore()
} }
this.drawCursor = function (pos = dotgrid.cursor.pos, radius = dotgrid.tool.style().thickness - 1) { this.drawCursor = function (pos = client.cursor.pos, radius = client.tool.style().thickness - 1) {
this.context.save() this.context.save()
this.context.beginPath() this.context.beginPath()
this.context.lineWidth = 3 this.context.lineWidth = 3
this.context.lineCap = 'round' 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.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.strokeStyle = client.theme.active.background
this.context.stroke() this.context.stroke()
this.context.closePath() this.context.closePath()
@ -257,7 +246,7 @@ function Renderer (dotgrid) {
this.context.lineWidth = 3 this.context.lineWidth = 3
this.context.lineCap = 'round' 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.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.strokeStyle = client.theme.active.f_med
this.context.stroke() this.context.stroke()
this.context.closePath() this.context.closePath()

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

@ -2,22 +2,22 @@
/* global Generator */ /* global Generator */
function Tool (dotgrid) { function Tool (client) {
this.index = 0 this.index = 0
this.settings = { size: { width: 600, height: 300 } } this.settings = { size: { width: 600, height: 300 } }
this.layers = [[], [], []] this.layers = [[], [], []]
this.styles = [ this.styles = [
{ thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#f00', fill: 'none', mirror_style: 0, transform: 'rotate(45)' }, { thickness: 15, 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: 15, 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)' } { thickness: 15, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#00f', fill: 'none', mirror_style: 0, transform: 'rotate(45)' }
] ]
this.vertices = [] 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.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.start = function () {
this.styles[0].color = dotgrid.theme.active.f_high this.styles[0].color = client.theme.active.f_high
this.styles[1].color = dotgrid.theme.active.f_med this.styles[1].color = client.theme.active.f_med
this.styles[2].color = dotgrid.theme.active.f_low this.styles[2].color = client.theme.active.f_low
} }
this.erase = function () { this.erase = function () {
@ -38,20 +38,20 @@ function Tool (dotgrid) {
this.clear = function () { this.clear = function () {
this.vertices = [] this.vertices = []
dotgrid.renderer.update() client.renderer.update()
dotgrid.interface.update(true) client.interface.update(true)
} }
this.undo = function () { this.undo = function () {
this.layers = dotgrid.history.prev() this.layers = client.history.prev()
dotgrid.renderer.update() client.renderer.update()
dotgrid.interface.update(true) client.interface.update(true)
} }
this.redo = function () { this.redo = function () {
this.layers = dotgrid.history.next() this.layers = client.history.next()
dotgrid.renderer.update() client.renderer.update()
dotgrid.interface.update(true) client.interface.update(true)
} }
this.length = function () { this.length = function () {
@ -66,10 +66,10 @@ function Tool (dotgrid) {
this.import = function (layer) { this.import = function (layer) {
this.layers[this.index] = this.layers[this.index].concat(layer) this.layers[this.index] = this.layers[this.index].concat(layer)
dotgrid.history.push(this.layers) client.history.push(this.layers)
this.clear() this.clear()
dotgrid.renderer.update() client.renderer.update()
dotgrid.interface.update(true) client.interface.update(true)
} }
this.replace = function (dot) { this.replace = function (dot) {
@ -84,10 +84,10 @@ function Tool (dotgrid) {
this.settings = dot.settings this.settings = dot.settings
this.clear() this.clear()
dotgrid.fitSize() client.fitSize()
dotgrid.renderer.update() client.renderer.update()
dotgrid.interface.update(true) client.interface.update(true)
dotgrid.history.push(this.layers) client.history.push(this.layers)
} }
// EDIT // EDIT
@ -97,8 +97,8 @@ function Tool (dotgrid) {
this.layer().pop() this.layer().pop()
this.clear() this.clear()
dotgrid.renderer.update() client.renderer.update()
dotgrid.interface.update(true) client.interface.update(true)
} }
this.removeSegmentsAt = function (pos) { this.removeSegmentsAt = function (pos) {
@ -115,8 +115,8 @@ function Tool (dotgrid) {
} }
} }
this.clear() this.clear()
dotgrid.renderer.update() client.renderer.update()
dotgrid.interface.update(true) client.interface.update(true)
} }
this.selectSegmentAt = function (pos, source = this.layer()) { this.selectSegmentAt = function (pos, source = this.layer()) {
@ -135,7 +135,7 @@ function Tool (dotgrid) {
this.addVertex = function (pos) { this.addVertex = function (pos) {
pos = { x: Math.abs(pos.x), y: Math.abs(pos.y) } pos = { x: Math.abs(pos.x), y: Math.abs(pos.y) }
this.vertices.push(pos) this.vertices.push(pos)
dotgrid.interface.update(true) client.interface.update(true)
} }
this.vertexAt = function (pos) { this.vertexAt = function (pos) {
@ -166,11 +166,11 @@ function Tool (dotgrid) {
this.addSegment(type, this.vertices.slice()) this.addSegment(type, this.vertices.slice())
dotgrid.history.push(this.layers) client.history.push(this.layers)
this.clear() this.clear()
dotgrid.renderer.update() client.renderer.update()
dotgrid.interface.update(true) client.interface.update(true)
console.log(`Casted ${type} -> ${this.layer().length} elements`) console.log(`Casted ${type} -> ${this.layer().length} elements`)
} }
@ -195,20 +195,20 @@ function Tool (dotgrid) {
} else { } else {
console.warn('Unknown', type) console.warn('Unknown', type)
} }
dotgrid.interface.update(true) client.interface.update(true)
dotgrid.renderer.update() client.renderer.update()
} }
this.misc = function (type) { this.misc = function (type) {
dotgrid.picker.start() client.picker.start()
} }
this.source = function (type) { this.source = function (type) {
if (type === 'grid') { dotgrid.renderer.toggle() } if (type === 'grid') { client.renderer.toggle() }
if (type === 'open') { dotgrid.source.open('grid', dotgrid.whenOpen) } if (type === 'open') { client.source.open('grid', client.whenOpen) }
if (type === 'save') { dotgrid.source.download('dotgrid', 'grid', dotgrid.tool.export(), 'text/plain') } if (type === 'save') { client.source.download('dotgrid', 'grid', client.tool.export(), 'text/plain') }
if (type === 'export') { dotgrid.source.download('dotgrid', 'svg', dotgrid.manager.toString(), 'image/svg+xml') } if (type === 'export') { client.source.download('dotgrid', 'svg', client.manager.toString(), 'image/svg+xml') }
if (type === 'render') { dotgrid.manager.toPNG(dotgrid.tool.settings.size, (dataUrl) => { dotgrid.source.download('dotgrid', 'png', dataUrl, 'image/png') }) } if (type === 'render') { client.manager.toPNG(client.tool.settings.size, (dataUrl) => { client.source.download('dotgrid', 'png', dataUrl, 'image/png') }) }
} }
this.canAppend = function (content, index = this.index) { this.canAppend = function (content, index = this.index) {
@ -242,15 +242,15 @@ function Tool (dotgrid) {
} }
this.paths = function () { this.paths = function () {
const l1 = new Generator(dotgrid.tool.layers[0], dotgrid.tool.styles[0]).toString({ x: 0, y: 0 }, 1) const l1 = new Generator(client.tool.layers[0], client.tool.styles[0]).toString({ x: 0, y: 0 }, 1)
const l2 = new Generator(dotgrid.tool.layers[1], dotgrid.tool.styles[1]).toString({ x: 0, y: 0 }, 1) const l2 = new Generator(client.tool.layers[1], client.tool.styles[1]).toString({ x: 0, y: 0 }, 1)
const l3 = new Generator(dotgrid.tool.layers[2], dotgrid.tool.styles[2]).toString({ x: 0, y: 0 }, 1) const l3 = new Generator(client.tool.layers[2], client.tool.styles[2]).toString({ x: 0, y: 0 }, 1)
return [l1, l2, l3] return [l1, l2, l3]
} }
this.path = function () { this.path = function () {
return new Generator(dotgrid.tool.layer(), dotgrid.tool.style()).toString({ x: 0, y: 0 }, 1) return new Generator(client.tool.layer(), client.tool.style()).toString({ x: 0, y: 0 }, 1)
} }
this.translate = function (a, b) { this.translate = function (a, b) {
@ -263,9 +263,9 @@ function Tool (dotgrid) {
} }
} }
} }
dotgrid.history.push(this.layers) client.history.push(this.layers)
this.clear() this.clear()
dotgrid.renderer.update() client.renderer.update()
} }
this.translateMulti = function (a, b) { this.translateMulti = function (a, b) {
@ -279,9 +279,9 @@ function Tool (dotgrid) {
segment.vertices[vertexId] = { x: vertex.x - offset.x, y: vertex.y - offset.y } segment.vertices[vertexId] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
} }
dotgrid.history.push(this.layers) client.history.push(this.layers)
this.clear() this.clear()
dotgrid.renderer.update() client.renderer.update()
} }
this.translateLayer = function (a, b) { this.translateLayer = function (a, b) {
@ -293,9 +293,9 @@ function Tool (dotgrid) {
segment.vertices[vertexId] = { x: vertex.x - offset.x, y: vertex.y - offset.y } segment.vertices[vertexId] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
} }
} }
dotgrid.history.push(this.layers) client.history.push(this.layers)
this.clear() this.clear()
dotgrid.renderer.update() client.renderer.update()
} }
this.translateCopy = function (a, b) { this.translateCopy = function (a, b) {
@ -310,9 +310,9 @@ function Tool (dotgrid) {
} }
this.layer().push(segment) this.layer().push(segment)
dotgrid.history.push(this.layers) client.history.push(this.layers)
this.clear() this.clear()
dotgrid.renderer.update() client.renderer.update()
} }
this.merge = function () { this.merge = function () {
@ -320,9 +320,9 @@ function Tool (dotgrid) {
this.erase() this.erase()
this.layers[this.index] = merged this.layers[this.index] = merged
dotgrid.history.push(this.layers) client.history.push(this.layers)
this.clear() this.clear()
dotgrid.renderer.update() client.renderer.update()
} }
// Style // Style
@ -346,8 +346,8 @@ function Tool (dotgrid) {
this.selectLayer = function (id) { this.selectLayer = function (id) {
this.index = clamp(id, 0, 2) this.index = clamp(id, 0, 2)
this.clear() this.clear()
dotgrid.renderer.update() client.renderer.update()
dotgrid.interface.update(true) client.interface.update(true)
console.log(`layer:${this.index}`) console.log(`layer:${this.index}`)
} }

8
index.html
View File

@ -24,7 +24,7 @@
<script type="text/javascript" src="desktop/sources/scripts/lib/history.js"></script> <script type="text/javascript" src="desktop/sources/scripts/lib/history.js"></script>
<script type="text/javascript" src="desktop/sources/scripts/lib/source.js"></script> <script type="text/javascript" src="desktop/sources/scripts/lib/source.js"></script>
<!-- Dotgrid --> <!-- Dotgrid -->
<script type="text/javascript" src="desktop/sources/scripts/dotgrid.js"></script> <script type="text/javascript" src="desktop/sources/scripts/client.js"></script>
<script type="text/javascript" src="desktop/sources/scripts/manager.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/renderer.js"></script>
<script type="text/javascript" src="desktop/sources/scripts/cursor.js"></script> <script type="text/javascript" src="desktop/sources/scripts/cursor.js"></script>
@ -43,12 +43,12 @@
<script> <script>
'use strict' 'use strict'
const dotgrid = new Dotgrid() const client = new Client()
dotgrid.install(document.body) client.install(document.body)
window.addEventListener('load', () => { window.addEventListener('load', () => {
dotgrid.start() client.start()
}) })
</script> </script>
</body> </body>