From 3b2a8bd0c17fae73db5d3b4b94ecabdb68d3afd7 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Sat, 4 Aug 2018 15:55:08 +1200 Subject: [PATCH] Added new icons to menu --- desktop/sources/links/main.css | 22 ++++---- desktop/sources/scripts/dotgrid.js | 5 ++ desktop/sources/scripts/interface.js | 80 +++++++++++++++++++--------- desktop/sources/scripts/tool.js | 18 ++++++- 4 files changed, 87 insertions(+), 38 deletions(-) diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css index f98e97a..b98152a 100644 --- a/desktop/sources/links/main.css +++ b/desktop/sources/links/main.css @@ -3,27 +3,27 @@ body { padding: 0px; font-family: 'input_mono_regular'; -webkit-user-select: non /* Core */ #app { -webkit-app-region: drag; padding: 35px;width:calc(100vw - 60px);height:calc(100vh - 60px)} -#guide { position: absolute;width: 300px;height: 300px; transition: opacity 150ms; -webkit-app-region: no-drag;} +#guide { position: absolute;width: 300px;height: 300px; transition: opacity 150ms; -webkit-app-region: no-drag; border-radius: 3px} #render { display: none } #vector { z-index: 1000;position: relative;width:300px; height:300px; } /* Interface */ -#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 315px; position:fixed; bottom:20px; left:calc(50vw - 155px); height:30px;} -#interface svg.inactive { opacity: 0.2 } -#interface svg path.inactive { opacity: 0.2 } -#interface svg:hover { opacity: 0.5 } -#interface svg.icon:last-child { margin-right: 0; } -#interface svg path { fill:none; stroke-linecap: round; stroke-linejoin: round; stroke-width:12px; } +#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 100%; position:fixed; bottom:20px; left:45px; height:30px; max-width:calc(100vw - 90px); overflow: hidden;} #interface.hidden { bottom:10px;opacity: 0 } #interface.visible { bottom:20px; opacity: 1 } -#interface #menu { opacity: 1; position: absolute; top:0px; transition: all 250ms; z-index: 900} -#interface #picker { background:red; position: absolute; line-height: 30px; z-index: 0; width:250px; top:5px; opacity: 0; transition: all 250ms;} +#interface #menu { opacity: 1; position: absolute; top:0px; transition: all 250ms; z-index: 900; overflow: hidden; height:30px; width:100%;} +#interface #menu svg.icon { width:30px; height:30px; margin-right:-9px; opacity: 0.7 } +#interface #menu svg.icon.inactive { opacity: 0.2 } +#interface #menu svg.icon:hover { cursor: pointer; opacity: 1.0 } +#interface #menu svg.icon:last-child { margin-right: 0; } +#interface #menu svg.icon path { fill:none; stroke-linecap: round; stroke-linejoin: round; stroke-width:12px; } +#interface #menu svg.icon.source { float:right; margin-left:-2px; margin-right:0px; } + +#interface #picker { background:red; position: absolute; line-height: 30px; z-index: 0; width:250px; top:5px; opacity: 0; transition: all 250ms; padding-left:2.5px;} #interface #color_path { transition: all 500ms; fill:red; } #interface.picker #menu { opacity: 0; top:-5px; z-index: 0 } #interface.picker #picker { opacity: 1; top:0px; z-index: 900 } -#interface .icon { width:30px; height:30px; margin-right:-2px; opacity: 1} -#interface .icon:hover { cursor: pointer; opacity: 1 } /* Theme Overrides */ diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index e2771b1..5bd2bc2 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -133,6 +133,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.save = function(content = this.tool.export()) { + if(dotgrid.tool.length() < 1){ console.log("Nothing to save"); return; } + dialog.showSaveDialog({ title:"Save to .grid", filters: [{name: "Dotgrid", extensions: ["grid", "dot"]}] @@ -147,6 +149,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.render = function(content = this.renderer.to_png({width:dotgrid.tool.settings.size.width*2,height:dotgrid.tool.settings.size.height*2}), ready = null, size = null) { if(!ready){return; } + if(dotgrid.tool.length() < 1){ console.log("Nothing to render"); return; } dialog.showSaveDialog({title:"Render to .png"},(fileName) => { if (fileName === undefined){ return; } @@ -158,6 +161,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.export = function(content = this.renderer.to_svg()) { + if(dotgrid.tool.length() < 1){ console.log("Nothing to export"); return; } + dialog.showSaveDialog({title:"Export to .svg"},(fileName) => { if (fileName === undefined){ return; } fileName = fileName.substr(-4,4) != ".svg" ? fileName+".svg" : fileName; diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js index 6f35c41..55e8336 100644 --- a/desktop/sources/scripts/interface.js +++ b/desktop/sources/scripts/interface.js @@ -17,21 +17,28 @@ function Interface() var html = "" var options = { cast:{ - line: ["line","M60,60 L240,240","A"], - arc_c: ["arc clockwise","M60,60 A180,180 0 0,1 240,240","S"], - arc_r: ["arc reverse","M60,60 A180,180 0 0,0 240,240","D"], - bezier: ["bezier","M60,60 Q60,150 150,150 Q240,150 240,240","F"], - close: ["close","M60,60 A180,180 0 0,1 240,240 M60,60 A180,180 0 0,0 240,240","Z"] + 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: ["linecap","M60,60 L60,60 L180,180 L240,180 L240,240 L180,240 L180,180","Q"], - linejoin: ["linejoin","M60,60 L120,120 L180,120 M120,180 L180,180 L240,240","W"], - thickness: ["thickness","M120,90 L120,90 L90,120 L180,210 L210,180 Z M105,105 L105,105 L60,60 M195,195 L195,195 L240,240"], - mirror: ["mirror","M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210","E"], - fill: ["fill","M60,60 L60,150 L150,150 L240,150 L240,240 Z","R"] + 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:"F",icon:"M60,60 L60,150 L150,150 L240,150 L240,240 Z" } }, misc:{ - color: ["color","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","G"] + 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:"", 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:"", 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:"", 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:"", 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:"M95,95 L95,95 L95,95 M125,95 L125,95 L125,95 M155,95 L155,95 L155,95 M185,95 L185,95 L185,95 M215,95 L215,95 L215,95 M95,125 L95,125 L95,125 M125,125 L125,125 L125,125 M155,125 L155,125 L155,125 M185,125 L185,125 L185,125 M215,125 L215,125 L215,125 M95,155 L95,155 L95,155 M125,155 L125,155 L125,155 M155,155 L155,155 L155,155 M185,155 L185,155 L185,155 M215,155 L215,155 L215,155 M95,185 L95,185 L95,185 M125,185 L125,185 L125,185 M155,185 L155,185 L155,185 M185,185 L185,185 L185,185 M215,185 L215,185 L215,185 M95,215 L95,215 L95,215 M125,215 L125,215 L125,215 M155,215 L155,215 L155,215 M185,215 L185,215 L185,215 M215,215 L215,215 L215,215 "}, } } @@ -39,8 +46,20 @@ function Interface() var tools = options[type]; for(name in tools){ var tool = tools[name]; - var shortcut = tool[2]; - html += `${name == "depth" ? `` : ""}${name.capitalize()}${shortcut ? '('+shortcut+')' : ''}` + html += ` + + ${name == "depth" ? `` : ""} + + ${name.capitalize()}${tool.key ? '('+tool.key+')' : ''} + + ` } } @@ -74,27 +93,36 @@ function Interface() var multi_vertices = null; var segments = dotgrid.tool.layer() + var sum_segments = dotgrid.tool.length(); for(id in segments){ if(segments[id].vertices.length > 2){ multi_vertices = true; break; } } - document.getElementById("line").className.baseVal = !dotgrid.tool.can_cast("line") ? "icon inactive" : "icon"; - document.getElementById("arc_c").className.baseVal = !dotgrid.tool.can_cast("arc_c") ? "icon inactive" : "icon"; - document.getElementById("arc_r").className.baseVal = !dotgrid.tool.can_cast("arc_r") ? "icon inactive" : "icon"; - document.getElementById("bezier").className.baseVal = !dotgrid.tool.can_cast("bezier") ? "icon inactive" : "icon"; - document.getElementById("close").className.baseVal = !dotgrid.tool.can_cast("close") ? "icon inactive" : "icon"; + document.getElementById("option_line").className.baseVal = !dotgrid.tool.can_cast("line") ? "icon inactive" : "icon"; + document.getElementById("option_arc_c").className.baseVal = !dotgrid.tool.can_cast("arc_c") ? "icon inactive" : "icon"; + document.getElementById("option_arc_r").className.baseVal = !dotgrid.tool.can_cast("arc_r") ? "icon inactive" : "icon"; + document.getElementById("option_bezier").className.baseVal = !dotgrid.tool.can_cast("bezier") ? "icon inactive" : "icon"; + document.getElementById("option_close").className.baseVal = !dotgrid.tool.can_cast("close") ? "icon inactive" : "icon"; - document.getElementById("thickness").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; - document.getElementById("linecap").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; - document.getElementById("linejoin").className.baseVal = dotgrid.tool.layer().length < 1 || !multi_vertices ? "icon inactive" : "icon"; - document.getElementById("mirror").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon"; - document.getElementById("fill").className.baseVal = dotgrid.tool.layer().length < 1 ? "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 || !multi_vertices ? "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("color").children[0].style.fill = dotgrid.tool.style().color; - document.getElementById("color").children[0].style.stroke = dotgrid.tool.style().color; - document.getElementById("color").className.baseVal = "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").className.baseVal = "icon"; + // Source + + document.getElementById("option_save").className.baseVal = sum_segments < 1 ? "icon inactive source" : "icon source"; + document.getElementById("option_export").className.baseVal = sum_segments < 1 ? "icon inactive source" : "icon source"; + document.getElementById("option_render").className.baseVal = sum_segments < 1 ? "icon inactive source" : "icon source"; + + document.getElementById("option_grid").className.baseVal = !dotgrid.guide.show_extras ? "icon inactive source" : "icon source"; + // 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") } diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index 83a37c5..d88360e 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -46,6 +46,11 @@ function Tool() dotgrid.interface.refresh(true); } + this.length = function() + { + return this.layers[0].length + this.layers[1].length + this.layers[2].length + } + // I/O this.export = function(target = {settings:this.settings,layers:this.layers,styles:this.styles}) @@ -193,6 +198,17 @@ function Tool() dotgrid.picker.start(); } + this.source = function(type) + { + if(type == "grid"){ dotgrid.guide.toggle(); } + if(type == "screen"){ app.toggle_fullscreen(); } + + if(type == "open"){ dotgrid.open(); } + if(type == "save"){ dotgrid.save(); } + if(type == "render"){ dotgrid.render(); } + if(type == "export"){ dotgrid.export(); } + } + this.can_append = function(content) { for(id in this.layer()){ @@ -263,7 +279,7 @@ function Tool() var segment = this.layer()[segment_id]; for(vertex_id in segment.vertices){ var vertex = segment.vertices[vertex_id]; - segment.vertices[vertex_id] = {x:vertex.x+offset.x,y:vertex.y-offset.y}; + segment.vertices[vertex_id] = {x:vertex.x-offset.x,y:vertex.y-offset.y}; } } dotgrid.history.push(this.layers);