Improved theme support
This commit is contained in:
neauoire
parent
dd5b66247c
commit
014590a6a1
|
|
@ -24,7 +24,7 @@
|
|||
<script type="text/javascript" src="scripts/lib/history.js"></script>
|
||||
<script type="text/javascript" src="scripts/lib/source.js"></script>
|
||||
<!-- 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/renderer.js"></script>
|
||||
<script type="text/javascript" src="scripts/cursor.js"></script>
|
||||
|
|
@ -43,13 +43,13 @@
|
|||
<script>
|
||||
'use strict'
|
||||
|
||||
const dotgrid = new Dotgrid()
|
||||
const client = new Client()
|
||||
|
||||
dotgrid.install(document.body)
|
||||
client.install(document.body)
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
dotgrid.start()
|
||||
dotgrid.acels.inject('Dotgrid')
|
||||
client.start()
|
||||
client.acels.inject('Dotgrid')
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@
|
|||
|
||||
/* global FileReader */
|
||||
|
||||
function Dotgrid () {
|
||||
function Client () {
|
||||
this.install = function (host) {
|
||||
console.info('Dotgrid', 'Installing..')
|
||||
console.info('Client', 'Installing..')
|
||||
|
||||
this.acels = new Acels(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', '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', 'Revert', 'CmdOrCtrl+W', () => { this.source.revert() })
|
||||
this.acels.set('History', 'Undo', 'CmdOrCtrl+Z', () => { this.history.undo() })
|
||||
this.acels.set('History', 'Redo', 'CmdOrCtrl+Shift+Z', () => { this.history.redo() })
|
||||
this.acels.set('Stroke', 'Line', 'A', () => { this.tool.cast('line') })
|
||||
|
|
@ -89,7 +88,7 @@ function Dotgrid () {
|
|||
}
|
||||
|
||||
this.start = () => {
|
||||
console.log('Dotgrid', 'Starting..')
|
||||
console.log('Client', 'Starting..')
|
||||
console.info(`${this.acels}`)
|
||||
|
||||
this.theme.start()
|
||||
|
|
@ -131,7 +130,7 @@ function Dotgrid () {
|
|||
|
||||
this.fitSize = () => {
|
||||
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()
|
||||
}
|
||||
|
||||
|
|
@ -164,7 +163,7 @@ function Dotgrid () {
|
|||
const _required = this.getRequiredSize()
|
||||
const offset = sizeOffset(_window, _required)
|
||||
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 false
|
||||
|
|
@ -175,7 +174,7 @@ function Dotgrid () {
|
|||
const _padded = this.getPaddedSize()
|
||||
const offset = sizeOffset(_padded, _project)
|
||||
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.update()
|
||||
|
|
@ -190,7 +189,7 @@ function Dotgrid () {
|
|||
const file = e.dataTransfer.files[0]
|
||||
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()
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
'use strict'
|
||||
|
||||
function Cursor (dotgrid) {
|
||||
function Cursor (client) {
|
||||
this.pos = { x: 0, y: 0 }
|
||||
this.lastPos = { x: 0, y: 0 }
|
||||
this.translation = null
|
||||
|
|
@ -17,11 +17,11 @@ function Cursor (dotgrid) {
|
|||
|
||||
this.down = function (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)
|
||||
}
|
||||
dotgrid.renderer.update()
|
||||
dotgrid.interface.update()
|
||||
client.renderer.update()
|
||||
client.interface.update()
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
|
|
@ -31,9 +31,9 @@ function Cursor (dotgrid) {
|
|||
this.translate(null, this.pos)
|
||||
}
|
||||
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
|
||||
e.preventDefault()
|
||||
}
|
||||
|
|
@ -41,23 +41,23 @@ function Cursor (dotgrid) {
|
|||
this.up = function (e) {
|
||||
this.pos = this.atEvent(e)
|
||||
if (this.translation && !isEqual(this.translation.from, this.translation.to)) {
|
||||
if (this.translation.layer === true) { dotgrid.tool.translateLayer(this.translation.from, this.translation.to) } else if (this.translation.copy) { dotgrid.tool.translateCopy(this.translation.from, this.translation.to) } else if (this.translation.multi) { dotgrid.tool.translateMulti(this.translation.from, this.translation.to) } else { dotgrid.tool.translate(this.translation.from, this.translation.to) }
|
||||
if (this.translation.layer === true) { 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') {
|
||||
dotgrid.tool.addVertex({ x: this.pos.x, y: this.pos.y })
|
||||
dotgrid.picker.stop()
|
||||
client.tool.addVertex({ x: this.pos.x, y: this.pos.y })
|
||||
client.picker.stop()
|
||||
}
|
||||
this.translate()
|
||||
dotgrid.interface.update()
|
||||
dotgrid.renderer.update()
|
||||
client.interface.update()
|
||||
client.renderer.update()
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
this.alt = function (e) {
|
||||
this.pos = this.atEvent(e)
|
||||
dotgrid.tool.removeSegmentsAt(this.pos)
|
||||
client.tool.removeSegmentsAt(this.pos)
|
||||
e.preventDefault()
|
||||
setTimeout(() => {
|
||||
dotgrid.tool.clear()
|
||||
client.tool.clear()
|
||||
}, 150)
|
||||
}
|
||||
|
||||
|
|
@ -67,15 +67,15 @@ function Cursor (dotgrid) {
|
|||
|
||||
this.relativePos = function (pos) {
|
||||
return {
|
||||
x: pos.x - dotgrid.renderer.el.offsetLeft,
|
||||
y: pos.y - dotgrid.renderer.el.offsetTop
|
||||
x: pos.x - client.renderer.el.offsetLeft,
|
||||
y: pos.y - client.renderer.el.offsetTop
|
||||
}
|
||||
}
|
||||
|
||||
this.snapPos = function (pos) {
|
||||
return {
|
||||
x: clamp(step(pos.x, 15), 15, dotgrid.tool.settings.size.width - 15),
|
||||
y: clamp(step(pos.y, 15), 15, dotgrid.tool.settings.size.height - 15)
|
||||
x: clamp(step(pos.x, 15), 15, client.tool.settings.size.width - 15),
|
||||
y: clamp(step(pos.y, 15), 15, client.tool.settings.size.height - 15)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use strict'
|
||||
|
||||
/* global dotgrid */
|
||||
/* global client */
|
||||
|
||||
function Generator (layer, style) {
|
||||
this.layer = layer
|
||||
|
|
@ -12,13 +12,13 @@ function Generator (layer, style) {
|
|||
for (const k1 in l) {
|
||||
const seg = l[k1]
|
||||
for (const k2 in seg.vertices) {
|
||||
if (mirror === 1 || mirror === 3) { seg.vertices[k2].x = (dotgrid.tool.settings.size.width) - seg.vertices[k2].x }
|
||||
if (mirror === 2 || mirror === 3) { seg.vertices[k2].y = (dotgrid.tool.settings.size.height) - seg.vertices[k2].y }
|
||||
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 = (client.tool.settings.size.height) - seg.vertices[k2].y }
|
||||
// Offset
|
||||
seg.vertices[k2].x += offset.x
|
||||
seg.vertices[k2].y += offset.y
|
||||
// Rotate
|
||||
const center = { x: (dotgrid.tool.settings.size.width / 2) + offset.x + (7.5), y: (dotgrid.tool.settings.size.height / 2) + offset.y + 30 }
|
||||
const center = { x: (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)
|
||||
// Scale
|
||||
seg.vertices[k2].x *= scale
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use strict'
|
||||
|
||||
function Interface (dotgrid) {
|
||||
function Interface (client) {
|
||||
this.el = document.createElement('div')
|
||||
this.el.id = 'interface'
|
||||
|
||||
|
|
@ -51,10 +51,10 @@ function Interface (dotgrid) {
|
|||
<svg
|
||||
id="option_${name}"
|
||||
title="${capitalize(name)}"
|
||||
onmouseout="dotgrid.interface.out('${type}','${name}')"
|
||||
onmouseup="dotgrid.interface.up('${type}','${name}')"
|
||||
onmousedown="dotgrid.interface.down('${type}','${name}', event)"
|
||||
onmouseover="dotgrid.interface.over('${type}','${name}')"
|
||||
onmouseout="client.interface.out('${type}','${name}')"
|
||||
onmouseup="client.interface.up('${type}','${name}')"
|
||||
onmousedown="client.interface.down('${type}','${name}', event)"
|
||||
onmouseover="client.interface.over('${type}','${name}')"
|
||||
viewBox="0 0 300 300"
|
||||
class="icon ${type}">
|
||||
<path id="${name}_path" class="icon_path" d="${tool.icon}"/>${name === 'depth' ? '<path class="icon_path inactive" d=""/>' : ''}
|
||||
|
|
@ -65,63 +65,63 @@ function Interface (dotgrid) {
|
|||
}
|
||||
}
|
||||
this.menu_el.innerHTML = html
|
||||
this.menu_el.appendChild(dotgrid.picker.el)
|
||||
this.menu_el.appendChild(client.picker.el)
|
||||
}
|
||||
|
||||
this.over = function (type, name) {
|
||||
dotgrid.cursor.operation = {}
|
||||
dotgrid.cursor.operation[type] = name
|
||||
client.cursor.operation = {}
|
||||
client.cursor.operation[type] = name
|
||||
this.update(true)
|
||||
dotgrid.renderer.update(true)
|
||||
client.renderer.update(true)
|
||||
}
|
||||
|
||||
this.out = function (type, name) {
|
||||
dotgrid.cursor.operation = ''
|
||||
dotgrid.renderer.update(true)
|
||||
client.cursor.operation = ''
|
||||
client.renderer.update(true)
|
||||
}
|
||||
|
||||
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)
|
||||
dotgrid.renderer.update(true)
|
||||
client.renderer.update(true)
|
||||
}
|
||||
|
||||
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
|
||||
dotgrid.tool[type](name, mod)
|
||||
client.tool[type](name, mod)
|
||||
this.update(true)
|
||||
dotgrid.renderer.update(true)
|
||||
client.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 === client.cursor.operation && force === false) { return }
|
||||
|
||||
let multiVertices = null
|
||||
const segments = dotgrid.tool.layer()
|
||||
const sumSegments = dotgrid.tool.length()
|
||||
const segments = client.tool.layer()
|
||||
const sumSegments = client.tool.length()
|
||||
|
||||
for (const i in segments) {
|
||||
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 = !client.tool.canCast('line') ? '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 = !client.tool.canCast('arc_r') ? 'icon inactive' : 'icon'
|
||||
document.getElementById('option_bezier').className.baseVal = !client.tool.canCast('bezier') ? '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_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_thickness').className.baseVal = client.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 = client.tool.layer().length < 1 || !multiVertices ? 'icon inactive' : 'icon'
|
||||
document.getElementById('option_mirror').className.baseVal = client.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.stroke = dotgrid.tool.style().color
|
||||
document.getElementById('option_color').children[0].style.fill = client.tool.style().color
|
||||
document.getElementById('option_color').children[0].style.stroke = client.tool.style().color
|
||||
document.getElementById('option_color').className.baseVal = 'icon'
|
||||
|
||||
// Source
|
||||
|
|
@ -130,15 +130,15 @@ function Interface (dotgrid) {
|
|||
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.renderer.showExtras ? 'icon inactive source' : 'icon source'
|
||||
document.getElementById('option_grid').className.baseVal = client.renderer.showExtras ? 'icon inactive source' : 'icon source'
|
||||
|
||||
// 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
|
||||
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 () {
|
||||
|
|
@ -148,7 +148,7 @@ function Interface (dotgrid) {
|
|||
|
||||
document.onkeydown = function (e) {
|
||||
if (e.key === 'Tab') {
|
||||
dotgrid.interface.toggle()
|
||||
client.interface.toggle()
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@ function Theme (client) {
|
|||
this.active = {}
|
||||
this.default = {
|
||||
background: '#eeeeee',
|
||||
f_high: '#000000',
|
||||
f_med: '#666666',
|
||||
f_low: '#888888',
|
||||
f_inv: '#000000',
|
||||
b_high: '#ffffff',
|
||||
b_med: '#cccccc',
|
||||
b_low: '#dddddd',
|
||||
f_high: '#0a0a0a',
|
||||
f_med: '#4a4a4a',
|
||||
f_low: '#6a6a6a',
|
||||
f_inv: '#111111',
|
||||
b_high: '#a1a1a1',
|
||||
b_med: '#c1c1c1',
|
||||
b_low: '#ffffff',
|
||||
b_inv: '#ffb545'
|
||||
}
|
||||
|
||||
|
|
@ -144,15 +144,15 @@ function Theme (client) {
|
|||
|
||||
function isValid (json) {
|
||||
if (!json) { return false }
|
||||
if (!json.background) { return false }
|
||||
if (!json.f_high) { return false }
|
||||
if (!json.f_med) { return false }
|
||||
if (!json.f_low) { return false }
|
||||
if (!json.f_inv) { return false }
|
||||
if (!json.b_high) { return false }
|
||||
if (!json.b_med) { return false }
|
||||
if (!json.b_low) { return false }
|
||||
if (!json.b_inv) { return false }
|
||||
if (!json.background || !isColor(json.background)) { return false }
|
||||
if (!json.f_high || !isColor(json.f_high)) { return false }
|
||||
if (!json.f_med || !isColor(json.f_med)) { return false }
|
||||
if (!json.f_low || !isColor(json.f_low)) { return false }
|
||||
if (!json.f_inv || !isColor(json.f_inv)) { return false }
|
||||
if (!json.b_high || !isColor(json.b_high)) { return false }
|
||||
if (!json.b_med || !isColor(json.b_med)) { return false }
|
||||
if (!json.b_low || !isColor(json.b_low)) { return false }
|
||||
if (!json.b_inv || !isColor(json.b_inv)) { return false }
|
||||
return true
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
/* global Image */
|
||||
/* global Blob */
|
||||
|
||||
function Manager (dotgrid) {
|
||||
function Manager (client) {
|
||||
// Create SVG parts
|
||||
this.el = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
|
||||
this.el.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
|
||||
|
|
@ -22,13 +22,13 @@ function Manager (dotgrid) {
|
|||
}
|
||||
|
||||
this.update = function () {
|
||||
this.el.setAttribute('width', (dotgrid.tool.settings.size.width) + 'px')
|
||||
this.el.setAttribute('height', (dotgrid.tool.settings.size.height) + 'px')
|
||||
this.el.style.width = (dotgrid.tool.settings.size.width)
|
||||
this.el.style.height = dotgrid.tool.settings.size.height
|
||||
this.el.setAttribute('width', (client.tool.settings.size.width) + 'px')
|
||||
this.el.setAttribute('height', (client.tool.settings.size.height) + 'px')
|
||||
this.el.style.width = (client.tool.settings.size.width)
|
||||
this.el.style.height = client.tool.settings.size.height
|
||||
|
||||
const styles = dotgrid.tool.styles
|
||||
const paths = dotgrid.tool.paths()
|
||||
const styles = client.tool.styles
|
||||
const paths = client.tool.paths()
|
||||
|
||||
for (const id in this.layers) {
|
||||
const style = styles[id]
|
||||
|
|
@ -54,7 +54,7 @@ function Manager (dotgrid) {
|
|||
|
||||
// Exporters
|
||||
|
||||
this.toPNG = function (size = dotgrid.tool.settings.size, callback) {
|
||||
this.toPNG = function (size = client.tool.settings.size, callback) {
|
||||
this.update()
|
||||
|
||||
const image64 = this.svg64()
|
||||
|
|
@ -79,7 +79,7 @@ function Manager (dotgrid) {
|
|||
this.toGRID = function (callback) {
|
||||
this.update()
|
||||
|
||||
const text = dotgrid.tool.export()
|
||||
const text = client.tool.export()
|
||||
const file = new Blob([text], { type: 'text/plain' })
|
||||
callback(URL.createObjectURL(file), 'export.grid')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use strict'
|
||||
|
||||
function Picker (dotgrid) {
|
||||
function Picker (client) {
|
||||
this.memory = ''
|
||||
this.el = document.createElement('div')
|
||||
this.el.id = 'picker'
|
||||
|
|
@ -15,17 +15,17 @@ function Picker (dotgrid) {
|
|||
|
||||
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.addEventListener('keydown', this.onKeyDown, false)
|
||||
this.input.addEventListener('keyup', this.onKeyUp, false)
|
||||
|
||||
dotgrid.interface.el.className = 'picker'
|
||||
client.interface.el.className = 'picker'
|
||||
this.input.focus()
|
||||
this.input.value = ''
|
||||
|
||||
try { dotgrid.controller.set('picker') } catch (err) { }
|
||||
try { client.controller.set('picker') } catch (err) { }
|
||||
}
|
||||
|
||||
this.update = function () {
|
||||
|
|
@ -43,13 +43,13 @@ function Picker (dotgrid) {
|
|||
|
||||
this.isActive = false
|
||||
|
||||
dotgrid.interface.el.className = ''
|
||||
client.interface.el.className = ''
|
||||
this.input.blur()
|
||||
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 () {
|
||||
|
|
@ -57,8 +57,8 @@ function Picker (dotgrid) {
|
|||
|
||||
const hex = `#${this.input.value}`
|
||||
|
||||
dotgrid.tool.style().color = hex
|
||||
dotgrid.tool.style().fill = dotgrid.tool.style().fill !== 'none' ? hex : 'none'
|
||||
client.tool.style().color = hex
|
||||
client.tool.style().fill = client.tool.style().fill !== 'none' ? hex : 'none'
|
||||
|
||||
this.stop()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
/* global Path2D */
|
||||
/* global Generator */
|
||||
|
||||
function Renderer (dotgrid) {
|
||||
function Renderer (client) {
|
||||
this.el = document.createElement('canvas')
|
||||
this.el.id = 'guide'
|
||||
this.el.width = 640
|
||||
|
|
@ -22,19 +22,19 @@ function Renderer (dotgrid) {
|
|||
|
||||
this.update = function (force = false) {
|
||||
this.resize()
|
||||
dotgrid.manager.update()
|
||||
client.manager.update()
|
||||
const render = new Image()
|
||||
render.onload = () => {
|
||||
this.draw(render)
|
||||
}
|
||||
render.src = dotgrid.manager.svg64()
|
||||
render.src = client.manager.svg64()
|
||||
}
|
||||
|
||||
this.draw = function (render) {
|
||||
this.clear()
|
||||
this.drawMirror()
|
||||
this.drawRulers()
|
||||
this.drawGrid()
|
||||
this.drawRulers()
|
||||
this.drawRender(render) //
|
||||
this.drawVertices()
|
||||
this.drawHandles()
|
||||
|
|
@ -50,11 +50,11 @@ function Renderer (dotgrid) {
|
|||
this.toggle = function () {
|
||||
this.showExtras = !this.showExtras
|
||||
this.update()
|
||||
dotgrid.interface.update(true)
|
||||
client.interface.update(true)
|
||||
}
|
||||
|
||||
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 offset = sizeOffset(_target, _current)
|
||||
if (offset.width === 0 && offset.height === 0) {
|
||||
|
|
@ -72,23 +72,23 @@ function Renderer (dotgrid) {
|
|||
this.drawMirror = function () {
|
||||
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) {
|
||||
this.drawRule({ x: middle.x, y: 15 * this.scale }, { x: middle.x, y: (dotgrid.tool.settings.size.height) * this.scale })
|
||||
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: (client.tool.settings.size.height) * 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) * this.scale, y: middle.y })
|
||||
if (client.tool.style().mirror_style === 2 || client.tool.style().mirror_style === 3) {
|
||||
this.drawRule({ x: 15 * this.scale, y: middle.y }, { x: (client.tool.settings.size.width) * 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 segmentId in client.tool.layer()) {
|
||||
const segment = client.tool.layer()[segmentId]
|
||||
for (const vertexId in segment.vertices) {
|
||||
const vertex = segment.vertices[vertexId]
|
||||
this.drawHandle(vertex)
|
||||
|
|
@ -97,15 +97,15 @@ function Renderer (dotgrid) {
|
|||
}
|
||||
|
||||
this.drawVertices = function () {
|
||||
for (const id in dotgrid.tool.vertices) {
|
||||
this.drawVertex(dotgrid.tool.vertices[id])
|
||||
for (const id in client.tool.vertices) {
|
||||
this.drawVertex(client.tool.vertices[id])
|
||||
}
|
||||
}
|
||||
|
||||
this.drawGrid = function () {
|
||||
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 y = markers.h - 1; y >= 0; y--) {
|
||||
|
|
@ -115,31 +115,31 @@ function Renderer (dotgrid) {
|
|||
this.drawMarker({
|
||||
x: parseInt(x * 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 () {
|
||||
if (!dotgrid.cursor.translation) { return }
|
||||
if (!client.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)
|
||||
const pos = client.cursor.translation.to
|
||||
const bottom = (client.tool.settings.size.height * 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: 0, y: pos.y * this.scale }, { x: right, y: pos.y * this.scale })
|
||||
}
|
||||
|
||||
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 }
|
||||
|
||||
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 = {
|
||||
color: dotgrid.theme.active.f_med,
|
||||
color: client.theme.active.f_med,
|
||||
thickness: 2,
|
||||
strokeLinecap: 'round',
|
||||
strokeLinejoin: 'round',
|
||||
|
|
@ -163,7 +163,7 @@ function Renderer (dotgrid) {
|
|||
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.fillStyle = client.theme.active.f_low
|
||||
this.context.fill()
|
||||
this.context.closePath()
|
||||
}
|
||||
|
|
@ -174,31 +174,20 @@ function Renderer (dotgrid) {
|
|||
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.strokeStyle = client.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.fillStyle = client.theme.active.f_high
|
||||
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.fillStyle = client.theme.active.b_low
|
||||
this.context.fill()
|
||||
this.context.closePath()
|
||||
}
|
||||
|
|
@ -224,16 +213,16 @@ function Renderer (dotgrid) {
|
|||
}
|
||||
|
||||
this.drawTranslation = function () {
|
||||
if (!dotgrid.cursor.translation) { return }
|
||||
if (!client.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.moveTo((client.cursor.translation.from.x * this.scale), (client.cursor.translation.from.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.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.stroke()
|
||||
this.context.closePath()
|
||||
|
|
@ -242,14 +231,14 @@ function Renderer (dotgrid) {
|
|||
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.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.strokeStyle = client.theme.active.background
|
||||
this.context.stroke()
|
||||
this.context.closePath()
|
||||
|
||||
|
|
@ -257,7 +246,7 @@ function Renderer (dotgrid) {
|
|||
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.strokeStyle = client.theme.active.f_med
|
||||
this.context.stroke()
|
||||
this.context.closePath()
|
||||
|
||||
|
|
|
|||
|
|
@ -2,22 +2,22 @@
|
|||
|
||||
/* global Generator */
|
||||
|
||||
function Tool (dotgrid) {
|
||||
function Tool (client) {
|
||||
this.index = 0
|
||||
this.settings = { size: { width: 600, height: 300 } }
|
||||
this.layers = [[], [], []]
|
||||
this.styles = [
|
||||
{ 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)' }
|
||||
{ thickness: 15, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#f00', 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: 15, 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 = client.theme.active.f_high
|
||||
this.styles[1].color = client.theme.active.f_med
|
||||
this.styles[2].color = client.theme.active.f_low
|
||||
}
|
||||
|
||||
this.erase = function () {
|
||||
|
|
@ -38,20 +38,20 @@ function Tool (dotgrid) {
|
|||
|
||||
this.clear = function () {
|
||||
this.vertices = []
|
||||
dotgrid.renderer.update()
|
||||
dotgrid.interface.update(true)
|
||||
client.renderer.update()
|
||||
client.interface.update(true)
|
||||
}
|
||||
|
||||
this.undo = function () {
|
||||
this.layers = dotgrid.history.prev()
|
||||
dotgrid.renderer.update()
|
||||
dotgrid.interface.update(true)
|
||||
this.layers = client.history.prev()
|
||||
client.renderer.update()
|
||||
client.interface.update(true)
|
||||
}
|
||||
|
||||
this.redo = function () {
|
||||
this.layers = dotgrid.history.next()
|
||||
dotgrid.renderer.update()
|
||||
dotgrid.interface.update(true)
|
||||
this.layers = client.history.next()
|
||||
client.renderer.update()
|
||||
client.interface.update(true)
|
||||
}
|
||||
|
||||
this.length = function () {
|
||||
|
|
@ -66,10 +66,10 @@ function Tool (dotgrid) {
|
|||
|
||||
this.import = function (layer) {
|
||||
this.layers[this.index] = this.layers[this.index].concat(layer)
|
||||
dotgrid.history.push(this.layers)
|
||||
client.history.push(this.layers)
|
||||
this.clear()
|
||||
dotgrid.renderer.update()
|
||||
dotgrid.interface.update(true)
|
||||
client.renderer.update()
|
||||
client.interface.update(true)
|
||||
}
|
||||
|
||||
this.replace = function (dot) {
|
||||
|
|
@ -84,10 +84,10 @@ function Tool (dotgrid) {
|
|||
this.settings = dot.settings
|
||||
|
||||
this.clear()
|
||||
dotgrid.fitSize()
|
||||
dotgrid.renderer.update()
|
||||
dotgrid.interface.update(true)
|
||||
dotgrid.history.push(this.layers)
|
||||
client.fitSize()
|
||||
client.renderer.update()
|
||||
client.interface.update(true)
|
||||
client.history.push(this.layers)
|
||||
}
|
||||
|
||||
// EDIT
|
||||
|
|
@ -97,8 +97,8 @@ function Tool (dotgrid) {
|
|||
|
||||
this.layer().pop()
|
||||
this.clear()
|
||||
dotgrid.renderer.update()
|
||||
dotgrid.interface.update(true)
|
||||
client.renderer.update()
|
||||
client.interface.update(true)
|
||||
}
|
||||
|
||||
this.removeSegmentsAt = function (pos) {
|
||||
|
|
@ -115,8 +115,8 @@ function Tool (dotgrid) {
|
|||
}
|
||||
}
|
||||
this.clear()
|
||||
dotgrid.renderer.update()
|
||||
dotgrid.interface.update(true)
|
||||
client.renderer.update()
|
||||
client.interface.update(true)
|
||||
}
|
||||
|
||||
this.selectSegmentAt = function (pos, source = this.layer()) {
|
||||
|
|
@ -135,7 +135,7 @@ function Tool (dotgrid) {
|
|||
this.addVertex = function (pos) {
|
||||
pos = { x: Math.abs(pos.x), y: Math.abs(pos.y) }
|
||||
this.vertices.push(pos)
|
||||
dotgrid.interface.update(true)
|
||||
client.interface.update(true)
|
||||
}
|
||||
|
||||
this.vertexAt = function (pos) {
|
||||
|
|
@ -166,11 +166,11 @@ function Tool (dotgrid) {
|
|||
|
||||
this.addSegment(type, this.vertices.slice())
|
||||
|
||||
dotgrid.history.push(this.layers)
|
||||
client.history.push(this.layers)
|
||||
|
||||
this.clear()
|
||||
dotgrid.renderer.update()
|
||||
dotgrid.interface.update(true)
|
||||
client.renderer.update()
|
||||
client.interface.update(true)
|
||||
|
||||
console.log(`Casted ${type} -> ${this.layer().length} elements`)
|
||||
}
|
||||
|
|
@ -195,20 +195,20 @@ function Tool (dotgrid) {
|
|||
} else {
|
||||
console.warn('Unknown', type)
|
||||
}
|
||||
dotgrid.interface.update(true)
|
||||
dotgrid.renderer.update()
|
||||
client.interface.update(true)
|
||||
client.renderer.update()
|
||||
}
|
||||
|
||||
this.misc = function (type) {
|
||||
dotgrid.picker.start()
|
||||
client.picker.start()
|
||||
}
|
||||
|
||||
this.source = function (type) {
|
||||
if (type === 'grid') { dotgrid.renderer.toggle() }
|
||||
if (type === 'open') { dotgrid.source.open('grid', dotgrid.whenOpen) }
|
||||
if (type === 'save') { dotgrid.source.download('dotgrid', 'grid', dotgrid.tool.export(), 'text/plain') }
|
||||
if (type === 'export') { dotgrid.source.download('dotgrid', 'svg', dotgrid.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 === 'grid') { client.renderer.toggle() }
|
||||
if (type === 'open') { client.source.open('grid', client.whenOpen) }
|
||||
if (type === 'save') { client.source.download('dotgrid', 'grid', client.tool.export(), 'text/plain') }
|
||||
if (type === 'export') { client.source.download('dotgrid', 'svg', client.manager.toString(), 'image/svg+xml') }
|
||||
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) {
|
||||
|
|
@ -242,15 +242,15 @@ function Tool (dotgrid) {
|
|||
}
|
||||
|
||||
this.paths = function () {
|
||||
const l1 = new Generator(dotgrid.tool.layers[0], dotgrid.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 l3 = new Generator(dotgrid.tool.layers[2], dotgrid.tool.styles[2]).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(client.tool.layers[1], client.tool.styles[1]).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]
|
||||
}
|
||||
|
||||
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) {
|
||||
|
|
@ -263,9 +263,9 @@ function Tool (dotgrid) {
|
|||
}
|
||||
}
|
||||
}
|
||||
dotgrid.history.push(this.layers)
|
||||
client.history.push(this.layers)
|
||||
this.clear()
|
||||
dotgrid.renderer.update()
|
||||
client.renderer.update()
|
||||
}
|
||||
|
||||
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 }
|
||||
}
|
||||
|
||||
dotgrid.history.push(this.layers)
|
||||
client.history.push(this.layers)
|
||||
this.clear()
|
||||
dotgrid.renderer.update()
|
||||
client.renderer.update()
|
||||
}
|
||||
|
||||
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 }
|
||||
}
|
||||
}
|
||||
dotgrid.history.push(this.layers)
|
||||
client.history.push(this.layers)
|
||||
this.clear()
|
||||
dotgrid.renderer.update()
|
||||
client.renderer.update()
|
||||
}
|
||||
|
||||
this.translateCopy = function (a, b) {
|
||||
|
|
@ -310,9 +310,9 @@ function Tool (dotgrid) {
|
|||
}
|
||||
this.layer().push(segment)
|
||||
|
||||
dotgrid.history.push(this.layers)
|
||||
client.history.push(this.layers)
|
||||
this.clear()
|
||||
dotgrid.renderer.update()
|
||||
client.renderer.update()
|
||||
}
|
||||
|
||||
this.merge = function () {
|
||||
|
|
@ -320,9 +320,9 @@ function Tool (dotgrid) {
|
|||
this.erase()
|
||||
this.layers[this.index] = merged
|
||||
|
||||
dotgrid.history.push(this.layers)
|
||||
client.history.push(this.layers)
|
||||
this.clear()
|
||||
dotgrid.renderer.update()
|
||||
client.renderer.update()
|
||||
}
|
||||
|
||||
// Style
|
||||
|
|
@ -346,8 +346,8 @@ function Tool (dotgrid) {
|
|||
this.selectLayer = function (id) {
|
||||
this.index = clamp(id, 0, 2)
|
||||
this.clear()
|
||||
dotgrid.renderer.update()
|
||||
dotgrid.interface.update(true)
|
||||
client.renderer.update()
|
||||
client.interface.update(true)
|
||||
console.log(`layer:${this.index}`)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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/source.js"></script>
|
||||
<!-- 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/renderer.js"></script>
|
||||
<script type="text/javascript" src="desktop/sources/scripts/cursor.js"></script>
|
||||
|
|
@ -43,12 +43,12 @@
|
|||
<script>
|
||||
'use strict'
|
||||
|
||||
const dotgrid = new Dotgrid()
|
||||
const client = new Client()
|
||||
|
||||
dotgrid.install(document.body)
|
||||
client.install(document.body)
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
dotgrid.start()
|
||||
client.start()
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user