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

Added new icons to menu

Browse Source
This commit is contained in:
Devine Lu Linvega 2018-08-04 15:55:08 +12:00
parent ca84c32877
commit 3b2a8bd0c1
4 changed files with 87 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
desktop/sources/links/main.css
View File

@ -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 */

5
desktop/sources/scripts/dotgrid.js
View File

@ -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;

80
desktop/sources/scripts/interface.js
View File

@ -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 += `<svg id="${name}" title="${tool[0].capitalize()}" onmouseout="dotgrid.interface.out('${type}','${name}')" onmouseup="dotgrid.interface.up('${type}','${name}')" onmouseover="dotgrid.interface.over('${type}','${name}')" viewBox="0 0 300 300" class="icon"><path id="${name}_path" class="icon_path" d="${tool[1]}"/>${name == "depth" ? `<path class="icon_path inactive" d=""/>` : ""}<rect ar="${name}" width="300" height="300" opacity="0"><title>${name.capitalize()}${shortcut ? '('+shortcut+')' : ''}</title></rect></svg>`
html += `
<svg
id="option_${name}"
title="${name.capitalize()}"
onmouseout="dotgrid.interface.out('${type}','${name}')"
onmouseup="dotgrid.interface.up('${type}','${name}')"
onmouseover="dotgrid.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=""/>` : ""}
<rect ar="${name}" width="300" height="300" opacity="0">
<title>${name.capitalize()}${tool.key ? '('+tool.key+')' : ''}</title>
</rect>
</svg>`
}
}
@ -74,26 +93,35 @@ 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") }

18
desktop/sources/scripts/tool.js
View File

@ -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);