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

Optimized interface

Browse Source
This commit is contained in:
neauoire 2020-03-24 20:39:49 +09:00
parent a3e5b28e7d
commit 591f25f945
3 changed files with 67 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scripts/client.js
View File

@ -105,7 +105,7 @@ function Client () {
this.interface.update(true) // force an update this.interface.update(true) // force an update
setTimeout(() => { document.body.className += ' ready'; }, 250) setTimeout(() => { document.body.className += ' ready' }, 250)
} }
this.update = () => { this.update = () => {

64
scripts/interface.js
View File

@ -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) { this.install = function (host) {
host.appendChild(this.el) host.appendChild(this.el)
} }
@ -65,7 +73,18 @@ function Interface (client) {
</svg>` </svg>`
} }
} }
this.menu_el.innerHTML = html 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) this.menu_el.appendChild(client.picker.el)
} }
@ -109,36 +128,29 @@ function Interface (client) {
if (segments[i].vertices.length > 2) { multiVertices = true; break } if (segments[i].vertices.length > 2) { multiVertices = true; break }
} }
document.getElementById('option_line').className.baseVal = !client.tool.canCast('line') ? 'icon inactive' : 'icon' options.cast.line.el.className.baseVal = !client.tool.canCast('line') ? 'icon inactive' : 'icon'
document.getElementById('option_arc_c').className.baseVal = !client.tool.canCast('arc_c') ? 'icon inactive' : 'icon' options.cast.arc_c.el.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' options.cast.arc_r.el.className.baseVal = !client.tool.canCast('arc_r') ? 'icon inactive' : 'icon'
document.getElementById('option_bezier').className.baseVal = !client.tool.canCast('bezier') ? 'icon inactive' : 'icon' options.cast.bezier.el.className.baseVal = !client.tool.canCast('bezier') ? 'icon inactive' : 'icon'
document.getElementById('option_close').className.baseVal = !client.tool.canCast('close') ? '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'
document.getElementById('option_thickness').className.baseVal = client.tool.layer().length < 1 ? 'icon inactive' : 'icon' options.toggle.linecap.el.className.baseVal = client.tool.layer().length < 1 ? 'icon inactive' : 'icon'
document.getElementById('option_linecap').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'
document.getElementById('option_linejoin').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'
document.getElementById('option_mirror').className.baseVal = client.tool.layer().length < 1 ? 'icon inactive' : 'icon' options.toggle.fill.el.className.baseVal = client.tool.layer().length < 1 ? 'icon inactive' : 'icon'
document.getElementById('option_fill').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
document.getElementById('option_color').children[0].style.fill = client.tool.style().color options.misc.color.el.className.baseVal = 'icon'
document.getElementById('option_color').children[0].style.stroke = client.tool.style().color options.source.save.el.className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source'
document.getElementById('option_color').className.baseVal = 'icon' 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'
// Source options.source.grid.el.className.baseVal = client.renderer.showExtras ? 'icon inactive source' : 'icon source'
document.getElementById('option_save').className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source'
document.getElementById('option_export').className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source'
document.getElementById('option_render').className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source'
document.getElementById('option_grid').className.baseVal = client.renderer.showExtras ? 'icon inactive source' : 'icon source'
// Grid // 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 // 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 this.prev_operation = client.cursor.operation
} }

12
scripts/lib/build.js
View File

@ -20,7 +20,7 @@ function cleanup (txt) {
// Create release // Create release
const release_body = ` fs.writeFileSync('index.html', cleanup(`
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<html> <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` }, '')} ${styles.reduce((acc, item) => { return `${acc}/* Including Style ${item} */ \n\n${fs.readFileSync('./links/' + item, 'utf8')}\n` }, '')}
</style> </style>
</body> </body>
</html>` </html>`))
fs.writeFileSync('index.html', cleanup(release_body))
// Create debug // Create debug
const debug_body = ` fs.writeFileSync('debug.html', `
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<html> <html>
@ -70,8 +68,6 @@ const debug_body = `
}) })
</script> </script>
</body> </body>
</html>` </html>`)
fs.writeFileSync('debug.html', debug_body)
console.log(`Built ${id}`) console.log(`Built ${id}`)