Optimized interface
This commit is contained in:
neauoire
parent
a3e5b28e7d
commit
591f25f945
@ -105,7 +105,7 @@ function Client () {
|
||||
|
||||
this.interface.update(true) // force an update
|
||||
|
||||
setTimeout(() => { document.body.className += ' ready'; }, 250)
|
||||
setTimeout(() => { document.body.className += ' ready' }, 250)
|
||||
}
|
||||
|
||||
this.update = () => {
|
||||
|
||||
@ -37,6 +37,14 @@ function Interface (client) {
|
||||
}
|
||||
}
|
||||
|
||||
const mirrorPaths = [
|
||||
'M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210',
|
||||
'M60,60 L240,240 M180,120 L210,90 M120,180 L90,210',
|
||||
'M210,90 L210,90 L90,210 M60,60 L60,60 L120,120 M180,180 L180,180 L240,240',
|
||||
'M60,60 L60,60 L120,120 L180,120 L210,90 M240,240 L240,240 L180,180 L120,180 L90,210',
|
||||
'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.install = function (host) {
|
||||
host.appendChild(this.el)
|
||||
}
|
||||
@ -65,7 +73,18 @@ function Interface (client) {
|
||||
</svg>`
|
||||
}
|
||||
}
|
||||
|
||||
this.menu_el.innerHTML = html
|
||||
|
||||
// Connect interface
|
||||
for (const type in options) {
|
||||
const tools = options[type]
|
||||
for (const name in tools) {
|
||||
const tool = tools[name]
|
||||
tool.el = document.getElementById('option_' + name)
|
||||
}
|
||||
}
|
||||
|
||||
this.menu_el.appendChild(client.picker.el)
|
||||
}
|
||||
|
||||
@ -109,36 +128,29 @@ function Interface (client) {
|
||||
if (segments[i].vertices.length > 2) { multiVertices = true; break }
|
||||
}
|
||||
|
||||
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 = 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 = client.tool.style().color
|
||||
document.getElementById('option_color').children[0].style.stroke = client.tool.style().color
|
||||
document.getElementById('option_color').className.baseVal = 'icon'
|
||||
|
||||
// Source
|
||||
|
||||
document.getElementById('option_save').className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source'
|
||||
document.getElementById('option_export').className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source'
|
||||
document.getElementById('option_render').className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source'
|
||||
|
||||
document.getElementById('option_grid').className.baseVal = client.renderer.showExtras ? 'icon inactive source' : 'icon source'
|
||||
options.cast.line.el.className.baseVal = !client.tool.canCast('line') ? 'icon inactive' : 'icon'
|
||||
options.cast.arc_c.el.className.baseVal = !client.tool.canCast('arc_c') ? 'icon inactive' : 'icon'
|
||||
options.cast.arc_r.el.className.baseVal = !client.tool.canCast('arc_r') ? 'icon inactive' : 'icon'
|
||||
options.cast.bezier.el.className.baseVal = !client.tool.canCast('bezier') ? 'icon inactive' : 'icon'
|
||||
options.cast.close.el.className.baseVal = !client.tool.canCast('close') ? 'icon inactive' : 'icon'
|
||||
options.toggle.thickness.el.className.baseVal = client.tool.layer().length < 1 ? 'icon inactive' : 'icon'
|
||||
options.toggle.linecap.el.className.baseVal = client.tool.layer().length < 1 ? 'icon inactive' : 'icon'
|
||||
options.toggle.linejoin.el.className.baseVal = client.tool.layer().length < 1 || !multiVertices ? 'icon inactive' : 'icon'
|
||||
options.toggle.mirror.el.className.baseVal = client.tool.layer().length < 1 ? 'icon inactive' : 'icon'
|
||||
options.toggle.fill.el.className.baseVal = client.tool.layer().length < 1 ? 'icon inactive' : 'icon'
|
||||
options.misc.color.el.children[0].style.fill = client.tool.style().color
|
||||
options.misc.color.el.children[0].style.stroke = client.tool.style().color
|
||||
options.misc.color.el.className.baseVal = 'icon'
|
||||
options.source.save.el.className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source'
|
||||
options.source.export.el.className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source'
|
||||
options.source.render.el.className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source'
|
||||
options.source.grid.el.className.baseVal = client.renderer.showExtras ? 'icon inactive source' : 'icon source'
|
||||
|
||||
// Grid
|
||||
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 ') }
|
||||
document.getElementById('grid_path').setAttribute('d', client.renderer.showExtras ? '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 ' : 'M65,155 Q155,245 245,155 M65,155 ')
|
||||
|
||||
// Mirror
|
||||
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 ') }
|
||||
|
||||
document.getElementById('mirror_path').setAttribute('d', mirrorPaths[client.tool.style().mirror_style])
|
||||
this.prev_operation = client.cursor.operation
|
||||
}
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ function cleanup (txt) {
|
||||
|
||||
// Create release
|
||||
|
||||
const release_body = `
|
||||
fs.writeFileSync('index.html', cleanup(`
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html>
|
||||
@ -43,13 +43,11 @@ const release_body = `
|
||||
${styles.reduce((acc, item) => { return `${acc}/* Including Style ${item} */ \n\n${fs.readFileSync('./links/' + item, 'utf8')}\n` }, '')}
|
||||
</style>
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
fs.writeFileSync('index.html', cleanup(release_body))
|
||||
</html>`))
|
||||
|
||||
// Create debug
|
||||
|
||||
const debug_body = `
|
||||
fs.writeFileSync('debug.html', `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html>
|
||||
@ -70,8 +68,6 @@ const debug_body = `
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
fs.writeFileSync('debug.html', debug_body)
|
||||
</html>`)
|
||||
|
||||
console.log(`Built ${id}`)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user