From 591f25f94574f875aa6e30c2c187287d71735002 Mon Sep 17 00:00:00 2001 From: neauoire Date: Tue, 24 Mar 2020 20:39:49 +0900 Subject: [PATCH] Optimized interface --- scripts/client.js | 2 +- scripts/interface.js | 112 ++++++++++++++++++++++++------------------- scripts/lib/build.js | 12 ++--- 3 files changed, 67 insertions(+), 59 deletions(-) diff --git a/scripts/client.js b/scripts/client.js index 79145b9..e6dfe28 100644 --- a/scripts/client.js +++ b/scripts/client.js @@ -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 = () => { diff --git a/scripts/interface.js b/scripts/interface.js index 29343a4..a34dd15 100644 --- a/scripts/interface.js +++ b/scripts/interface.js @@ -11,31 +11,39 @@ function Interface (client) { this.zoom = false const options = { - cast: { - line: { key: 'A', icon: 'M60,60 L240,240' }, - arc_c: { key: 'S', icon: 'M60,60 A180,180 0 0,1 240,240' }, - arc_r: { key: 'D', icon: 'M60,60 A180,180 0 0,0 240,240' }, - bezier: { key: 'F', icon: 'M60,60 Q60,150 150,150 Q240,150 240,240' }, - close: { key: 'Z', icon: 'M60,60 A180,180 0 0,1 240,240 M60,60 A180,180 0 0,0 240,240' } - }, - toggle: { - linecap: { key: 'Q', icon: 'M60,60 L60,60 L180,180 L240,180 L240,240 L180,240 L180,180' }, - linejoin: { key: 'W', icon: 'M60,60 L120,120 L180,120 M120,180 L180,180 L240,240' }, - thickness: { key: '', icon: 'M120,90 L120,90 L90,120 L180,210 L210,180 Z M105,105 L105,105 L60,60 M195,195 L195,195 L240,240' }, - mirror: { key: 'E', icon: 'M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210' }, - fill: { key: 'R', icon: 'M60,60 L60,150 L150,150 L240,150 L240,240 Z' } - }, - misc: { - color: { key: 'G', icon: 'M150,60 A90,90 0 0,1 240,150 A-90,90 0 0,1 150,240 A-90,-90 0 0,1 60,150 A90,-90 0 0,1 150,60' } - }, - source: { - open: { key: 'c-O', icon: 'M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M155,95 A60,60 0 0,1 215,155 A60,60 0 0,1 155,215 A60,60 0 0,1 95,155 A60,60 0 0,1 155,95 ' }, - render: { key: 'c-R', icon: 'M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M110,155 L110,155 L200,155 ' }, - export: { key: 'c-E', icon: 'M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M110,140 L110,140 L200,140 M110,170 L110,170 L200,170' }, - save: { key: 'c-S', icon: 'M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M110,155 L110,155 L200,155 M110,185 L110,185 L200,185 M110,125 L110,125 L200,125' }, - grid: { key: 'H', icon: '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 ' } - } + cast: { + line: { key: 'A', icon: 'M60,60 L240,240' }, + arc_c: { key: 'S', icon: 'M60,60 A180,180 0 0,1 240,240' }, + arc_r: { key: 'D', icon: 'M60,60 A180,180 0 0,0 240,240' }, + bezier: { key: 'F', icon: 'M60,60 Q60,150 150,150 Q240,150 240,240' }, + close: { key: 'Z', icon: 'M60,60 A180,180 0 0,1 240,240 M60,60 A180,180 0 0,0 240,240' } + }, + toggle: { + linecap: { key: 'Q', icon: 'M60,60 L60,60 L180,180 L240,180 L240,240 L180,240 L180,180' }, + linejoin: { key: 'W', icon: 'M60,60 L120,120 L180,120 M120,180 L180,180 L240,240' }, + thickness: { key: '', icon: 'M120,90 L120,90 L90,120 L180,210 L210,180 Z M105,105 L105,105 L60,60 M195,195 L195,195 L240,240' }, + mirror: { key: 'E', icon: 'M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210' }, + fill: { key: 'R', icon: 'M60,60 L60,150 L150,150 L240,150 L240,240 Z' } + }, + misc: { + color: { key: 'G', icon: 'M150,60 A90,90 0 0,1 240,150 A-90,90 0 0,1 150,240 A-90,-90 0 0,1 60,150 A90,-90 0 0,1 150,60' } + }, + source: { + open: { key: 'c-O', icon: 'M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M155,95 A60,60 0 0,1 215,155 A60,60 0 0,1 155,215 A60,60 0 0,1 95,155 A60,60 0 0,1 155,95 ' }, + render: { key: 'c-R', icon: 'M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M110,155 L110,155 L200,155 ' }, + export: { key: 'c-E', icon: 'M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M110,140 L110,140 L200,140 M110,170 L110,170 L200,170' }, + save: { key: 'c-S', icon: 'M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M110,155 L110,155 L200,155 M110,185 L110,185 L200,185 M110,125 L110,125 L200,125' }, + grid: { key: 'H', icon: '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 ' } } + } + + 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) { ` } } + 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 } diff --git a/scripts/lib/build.js b/scripts/lib/build.js index 5d70266..c77eec6 100644 --- a/scripts/lib/build.js +++ b/scripts/lib/build.js @@ -20,7 +20,7 @@ function cleanup (txt) { // Create release -const release_body = ` +fs.writeFileSync('index.html', cleanup(` @@ -43,13 +43,11 @@ const release_body = ` ${styles.reduce((acc, item) => { return `${acc}/* Including Style ${item} */ \n\n${fs.readFileSync('./links/' + item, 'utf8')}\n` }, '')} -` - -fs.writeFileSync('index.html', cleanup(release_body)) +`)) // Create debug -const debug_body = ` +fs.writeFileSync('debug.html', ` @@ -70,8 +68,6 @@ const debug_body = ` }) -` - -fs.writeFileSync('debug.html', debug_body) +`) console.log(`Built ${id}`)