zcy
/
websch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

many changes

master
Mark MacKay 2021-05-24 21:51:31 -05:00
parent 12a592ab86
commit d3ec6740d8
15 changed files with 447 additions and 434 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/css/app.css
View File

@ -22,13 +22,15 @@
#workarea { #workarea {
display: flex; display: flex;
position:absolute; position:absolute;
top: 30px; top: var(--x8);
left: 50px; left: var(--x12);
bottom: 40px; bottom: var(--x10);
right: 175px; right: calc(var(--panel-width) + var(--x4));
background-color: var(--z2); background-color: var(--z2);
overflow: auto; overflow: auto;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: transform 500ms cubic-bezier(0.13,0.66,0.24,0.92); transition: transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
border-radius: var(--x2);
box-shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.2);
} }

2
src/css/base.css
View File

@ -90,11 +90,13 @@
--x13: 52px; --x13: 52px;
--x14: 56px; --x14: 56px;
--x15: 60px; --x15: 60px;
--x16: 64px;
--mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; --mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
--ui-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; --ui-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
--transition-duration: 333ms; --transition-duration: 333ms;
--transition-fast: 200ms; --transition-fast: 200ms;
--panel-width: calc(var(--x10)*2*2 + var(--x1));
} }
a, a:link, a:active, a:visited { a, a:link, a:active, a:visited {

26
src/css/color-tool.css
View File

@ -20,12 +20,12 @@
content: ''; content: '';
position: absolute; position: absolute;
display: block; display: block;
width: 8px; left: var(--x1);
height: 8px; right: var(--x1);
left: 8px; top: var(--x1);
top: 8px; bottom: var(--x1);
background: var(--z9); background: var(--z1);
box-shadow: 0 0 0 1px var(--z0); box-shadow: 0 0 0 1px var(--z13);
} }
#tool_switch { #tool_switch {
@ -34,27 +34,27 @@
height: 11px; height: 11px;
position: absolute; position: absolute;
top: -5px; top: -5px;
left: 30px; right: var(--x3);
cursor: nwse-resize cursor: nwse-resize
} }
#tool_switch svg { #tool_switch svg {
fill: var(--z10); fill: var(--z6);
} }
#tool_switch:hover svg { #tool_switch:hover svg {
fill: var(--z15); fill: var(--z15);
} }
#tool_stroke:hover #stroke_color:after { #stroke_color:hover:after {
background: var(--z15); box-shadow: 0 0 0 1px var(--z15);
} }
.color_block { .color_block {
width: 24px; width: var(--x5);
height: 24px; height: var(--x5);
overflow: hidden; overflow: hidden;
border: solid #ccc 1px; border: solid var(--z12) 1px;
} }
.color_block:hover { .color_block:hover {

24
src/css/draginput.css
View File

@ -1,12 +1,18 @@
.draginputs {
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
}
.draginput { .draginput {
background: var(--z2); background: var(--z2);
border-radius: 3px; border-radius: var(--x1);
width: 70px; width: calc(50% - var(--x2));
height: 70px; height: calc(var(--x9) * 2);
display: block; display: block;
position: relative; position: relative;
float: left; margin: 0 var(--x2) var(--x2) 0;
margin: 0 5px 5px 0;
overflow: hidden; overflow: hidden;
} }
@ -73,11 +79,7 @@
} }
.draginput.twocol { .draginput.twocol {
width: 145px; width: 100%;
}
.draginput.twocol {
width: 145px;
} }
.draginput input, .draginput input:hover, .draginput input:active { .draginput input, .draginput input:hover, .draginput input:active {
@ -125,7 +127,7 @@
text-align: center; text-align: center;
} }
.draginput select { .draginput select {
-webkit-appearance: none; -webkit-appearance: none;
opacity: 0; opacity: 0;
display: block; display: block;

58
src/css/menu.css
View File

@ -1,20 +1,8 @@
#menu {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 30px;
background: #000;
z-index: 10;
color: #fff;
}
#menu_bar { #menu_bar {
padding: 0 0 0 var(--x12); padding: 0 0 0 var(--x12);
background: var(--z1);
position: relative; position: relative;
z-index: 2; z-index: 2;
height: var(--x8);
} }
#menu_bar.active .menu.open .menu_list { #menu_bar.active .menu.open .menu_list {
@ -28,45 +16,41 @@
display: inline-block; display: inline-block;
} }
.menu_title { .menu_title {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
padding: 7px 10px;
z-index: 10; z-index: 10;
color: var(--z15); color: var(--z15);
position: relative; position: relative;
height: 16px; line-height: var(--x8);
padding: 0 var(--x3);
vertical-align: top; vertical-align: top;
} }
.menu .menu_title:hover { .menu .menu_title:hover {
background: rgba(255,255,255,0.1); background: var(--z2);
} }
.menu_list .separator { .menu_list .separator {
margin: 5px 0; margin: var(--x1) 0;
border-top: solid var(--z14) 1px; border-top: solid var(--z14) 1px;
} }
.menu_list { .menu_list {
display: none; display: none;
position: absolute; position: absolute;
top: 28px;
left: 0; left: 0;
top: var(--x8);
white-space: nowrap; white-space: nowrap;
background: var(--z15); background: var(--z15);
padding: 7px 0; padding: var(--x2) 0;
border-radius: 0 3px 3px 3px; border-radius: 0 var(--x2) var(--x2) var(--x2);
box-shadow: 0 0 20px rgba(0,0,0,0.8); box-shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.4);
}
.touch .menu_list {
top: 38px;
} }
#menu_bar.active .menu.open .menu_title { #menu_bar.active .menu.open .menu_title {
background: white; background: var(--z15);
color: #333; color: var(--z1);
} }
.menu .menu_list { .menu .menu_list {
@ -77,8 +61,8 @@
.menu_list .menu_item { .menu_list .menu_item {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
line-height: 22px; line-height: var(--x6);
padding: 5px 69px 5px 25px; padding: var(--x1) var(--x16) var(--x1) var(--x6);
cursor: default; cursor: default;
color: var(--z3); color: var(--z3);
} }
@ -87,7 +71,7 @@
background: transparent; background: transparent;
border: none; border: none;
margin: 0; margin: 0;
padding: 5px 55px 5px 25px; padding: var(--x1) var(--x16) var(--x1) var(--x6);
height: auto; height: auto;
width: auto; width: auto;
} }
@ -96,10 +80,8 @@
content: '✔'; content: '✔';
position: absolute; position: absolute;
display: block; display: block;
left: 7px; left: 6px;
top: 3px; top: var(--x1);
width: 20px;
height: 20px;
} }
.menu_list .menu_item:hover, .menu_list .menu_item:hover,
@ -126,14 +108,14 @@
display: block; display: block;
position: absolute; position: absolute;
right: var(--x2); right: var(--x2);
padding: 0 var(--x1); padding: 0 var(--x2);
background: var(--z14); background: var(--z14);
top: 50%; top: 50%;
transform: translate(0, -50%); transform: translate(0, -50%);
text-align: center; text-align: center;
font-size: 11px; font-size: 12px;
line-height: var(--x6); line-height: var(--x6);
border-radius: 2px; border-radius: var(--x1);
font-weight: 600; font-weight: 600;
} }

96
src/css/method-draw.css
View File

@ -24,9 +24,10 @@ html, body {
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 5px; width: var(--x1);
height: 5px; height: var(--x1);
background: #444; background: transparent;
position: absolute;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@ -252,16 +253,11 @@ input[type=file] {
#tools_bottom { #tools_bottom {
position: absolute; position: absolute;
left: 50px; left: var(--x12);
right: 0; right: 0;
bottom: 0; bottom: 0;
height: 40px; height: var(--x10);
overflow: visible; overflow: visible;
background-color: var(--z1);
}
.toolset {
position: relative;
} }
.draginput.text-input input, .draginput.text-input input,
@ -361,73 +357,6 @@ input[type=file] {
clear:both; clear:both;
} }
#group_title {display: none;}
#tool_font_family .caret {
right: 40px;
top: 55%;
}
#tool_font_family select {
width: 110px;
}
#tool_bold, #tool_italic {
font: bold 20px/35px serif;
text-align: center;
position: absolute;
padding: 0 0 0 0;
color: #ccc;
background: transparent;
border: none;
width: 35px;
height: 35px;
margin: 0;
top: 0;
right: 0;
}
#tool_italic {
border-top: solid var(--z1) 2px;
top: 35px;
font-weight: bold;
font-style: italic;
font-size: 24px;
}
#tool_bold:hover, #tool_italic:hover {
color: #fff;
}
#tool_bold.active, #tool_italic.active {
color: #50A0FF;
}
#preview_font {
font-size: 20px;
color: #fff;
height: 70px;
line-height: 75px;
padding: 0 0 0 10px;
white-space: nowrap;
width: 100px;
overflow: hidden;
border-right: solid var(--z1) 2px;
position: relative;
}
#preview_font:after {
content: '';
position: absolute;
right: 0;
top: 3px;
bottom: 3px;
width: 15px;
border-right: solid var(--z2) 10px;
background: linear-gradient(to right, rgba(0,0,0,0), var(--z2));
}
#zoom_label { #zoom_label {
height: 20px; height: 20px;
@ -455,6 +384,7 @@ input[type=file] {
#logo svg { #logo svg {
pointer-events: none; pointer-events: none;
margin-top: var(--x2);
} }
#zoomLabel { #zoomLabel {
@ -515,13 +445,13 @@ input[readonly=readonly]:focus {
} }
#tool_angle_indicator { #tool_angle_indicator {
width: 50px; width: var(--x12);
height: 50px; height: var(--x12);
border-radius: 50px; border-radius: var(--x12);
background: rgba(255,255,255,0.05); background: var(--z3);
position: absolute; position: absolute;
bottom: 2px; bottom: var(--x1);
left: 10px; left: 12px;
} }
#tool_angle_indicator_cursor { #tool_angle_indicator_cursor {

12
src/css/panel.css
View File

@ -1,13 +1,12 @@
#panels { #panels {
position: absolute; position: absolute;
width: 160px; box-sizing: border-box;
height: 100%; width: var(--panel-width);
background: var(--z1); right: var(--x1);
right: 0; top: var(--x5);
top: 20px;
border-bottom: none; border-bottom: none;
overflow: visible; overflow: visible;
padding: 0 0 0 15px; padding: 0;
} }
.context_panel { .context_panel {
@ -27,7 +26,6 @@
white-space: nowrap; white-space: nowrap;
} }
#align_tools { #align_tools {
display: none; display: none;
} }

11
src/css/rulers.css
View File

@ -7,29 +7,30 @@
} }
#rulers #ruler_corner { #rulers #ruler_corner {
top: 30px; top: var(--x8);
left: var(--x12); left: var(--x12);
width: var(--x4); width: var(--x4);
height: var(--x4); height: var(--x4);
z-index: 2; z-index: 2;
border-radius: var(--x2) 0 0 0;
} }
#ruler_x { #ruler_x {
height: var(--x4); height: var(--x4);
top: 30px; top: var(--x8);
left: var(--x12); left: var(--x12);
margin-left: 2px; right: calc(var(--panel-width) + var(--x4));;
right: 175px;
overflow: hidden; overflow: hidden;
border-radius: var(--x2);
} }
#ruler_y { #ruler_y {
width: var(--x4); width: var(--x4);
top: var(--x8); top: var(--x8);
margin-top: -2px;
left: var(--x12); left: var(--x12);
bottom: var(--x10); bottom: var(--x10);
overflow: hidden; overflow: hidden;
border-radius: var(--x2);
} }
#ruler_x > div, #ruler_x > div,

8
src/css/select.css
View File

@ -1,9 +1,9 @@
.select { .select-input {
margin: var(--x2) 0; margin: var(--x2) 0;
position: relative; position: relative;
} }
.select:after { .select-input:after {
content: '↓'; content: '↓';
font-weight: bold; font-weight: bold;
position: absolute; position: absolute;
@ -13,7 +13,7 @@
transform: translate(0, -50%); transform: translate(0, -50%);
} }
.select select { .select-input select {
-webkit-appearance: none; -webkit-appearance: none;
background-color: var(--z3); background-color: var(--z3);
color: var(--z14); color: var(--z14);
@ -25,7 +25,7 @@
border-radius: var(--x1); border-radius: var(--x1);
} }
.select select:focus { .select-input select:focus {
outline: none; outline: none;
box-shadow: 0 0 0 1px var(--d7); box-shadow: 0 0 0 1px var(--d7);

67
src/css/text.css Normal file
View File

@ -0,0 +1,67 @@
#group_title {display: none;}
#tool_bold, #tool_italic {
font: bold 20px/35px serif;
text-align: center;
position: absolute;
padding: 0 0 0 0;
color: var(--z13);
background: transparent;
border: none;
margin: 0;
width: 50%;
top: var(--x8);
line-height: var(--x10);
bottom: 0;
border-top: solid var(--z1) 2px;
}
#tool_bold {
right: 0;
}
#tool_italic {
border-right: solid var(--z1) 2px;
line-height: var(--x9);
left: 0;
font-weight: bold;
font-style: italic;
font-size: 24px;
}
#tool_bold:hover, #tool_italic:hover {
color: var(--z15);
}
#tool_bold.disabled,
#tool_italic.disabled {
opacity: 1;
color: var(--z4);
}
#tool_bold.active, #tool_italic.active {
color: #50A0FF;
}
#preview_font {
color: var(--z15);
font-size: 2em;
line-height: 80px;
padding: 0 var(--x2);
}
#preview_font + .caret {
right: var(--x2);
}
#preview_font:after {
content: '';
position: absolute;
right: 0;
top: 3px;
bottom: 3px;
width: 15px;
border-right: solid var(--z2) 10px;
background: linear-gradient(to right, rgba(0,0,0,0), var(--z2));
}

3
src/css/tools.css
View File

@ -2,10 +2,9 @@
position: absolute; position: absolute;
border-right: none; border-right: none;
width: var(--x12); width: var(--x12);
top: 30px; top: var(--x8);
bottom: 0; bottom: 0;
left: 0; left: 0;
background: var(--z1);
z-index: 4; z-index: 4;
} }

555
src/index.html
View File

@ -34,6 +34,7 @@
<link rel="stylesheet" href="css/select.css" type="text/css"/> <link rel="stylesheet" href="css/select.css" type="text/css"/>
<link rel="stylesheet" href="css/panel.css" type="text/css"/> <link rel="stylesheet" href="css/panel.css" type="text/css"/>
<link rel="stylesheet" href="css/align_buttons.css" type="text/css"/> <link rel="stylesheet" href="css/align_buttons.css" type="text/css"/>
<link rel="stylesheet" href="css/text.css" type="text/css"/>
<!-- endbuild --> <!-- endbuild -->
</head> </head>
<body> <body>
@ -130,234 +131,253 @@
<div id="canvas_panel" class="context_panel"> <div id="canvas_panel" class="context_panel">
<h4 class="clearfix">Canvas</h4> <h4>Canvas</h4>
<label data-title="Change canvas width"> <div class="draginputs">
<input id="canvas_width" type="text" pattern="[0-9]*" value="800" />
<span class="icon_label">Width</span>
</label>
<label data-title="Change canvas height"> <label data-title="Change canvas width" class="draginput">
<input id="canvas_height" type="text" pattern="[0-9]*" value="600" /> <input id="canvas_width" type="text" pattern="[0-9]*" value="800" />
<span class="icon_label">Height</span> <span class="icon_label">Width</span>
</label> </label>
<label data-title="Change canvas color" class="draginput"> <label data-title="Change canvas height" class="draginput">
<span>Color</span> <input id="canvas_height" type="text" pattern="[0-9]*" value="600" />
<div id="color_canvas_tools"> <span class="icon_label">Height</span>
<div class="color_tool active" id="tool_canvas"> </label>
<div class="color_block">
<div id="canvas_bg"></div> <label data-title="Change canvas color" class="draginput">
<div id="canvas_color"></div> <span>Color</span>
<div id="color_canvas_tools">
<div class="color_tool active" id="tool_canvas">
<div class="color_block">
<div id="canvas_bg"></div>
<div id="canvas_color"></div>
</div>
</div> </div>
</div> </div>
</div> </label>
</label>
<div class="draginput"> <div class="draginput">
<span>Sizes</span> <span>Sizes</span>
<select id="resolution"> <select id="resolution">
<option id="selectedPredefined" selected="selected">Custom</option> <option id="selectedPredefined" selected="selected">Custom</option>
<option id="fitToContent" value="content">Fit to Content</option> <option id="fitToContent" value="content">Fit to Content</option>
<optgroup label="Social Media"> <optgroup label="Social Media">
<option value="1012x506">Twitter Post (1012 × 506)</option> <option value="1012x506">Twitter Post (1012 × 506)</option>
<option value="1500x500">Twitter Header (1500 × 500)</option> <option value="1500x500">Twitter Header (1500 × 500)</option>
<option value="1200x630">Facebook Post (1200 × 630)</option> <option value="1200x630">Facebook Post (1200 × 630)</option>
<option value="820x312">Facebook Cover (820 × 312)</option> <option value="820x312">Facebook Cover (820 × 312)</option>
<option value="1080x1080">Instagram Post (1080 × 1080)</option> <option value="1080x1080">Instagram Post (1080 × 1080)</option>
<option value="1080x1920">Instagram Story (1080 × 1920)</option> <option value="1080x1920">Instagram Story (1080 × 1920)</option>
<option value="300">Dribble Shot (400 × 300)</option> <option value="300">Dribble Shot (400 × 300)</option>
<option value="800x600">Dribble Shot HD (800 × 600)</option> <option value="800x600">Dribble Shot HD (800 × 600)</option>
<option value="1584x396">LinkedIn Cover (1584 × 396)</option> <option value="1584x396">LinkedIn Cover (1584 × 396)</option>
</optgroup> </optgroup>
<optgroup label="Presentation"> <optgroup label="Presentation">
<option value="1920x1080">16:9 (1920 × 1080)</option> <option value="1920x1080">16:9 (1920 × 1080)</option>
<option value="1024x768">4:3 (1024 × 768)</option> <option value="1024x768">4:3 (1024 × 768)</option>
</optgroup> </optgroup>
<optgroup label="Desktop">
<option value="1140x1024">Desktop (1140 × 1024)</option>
<option value="375x700">MacBook (834 × 1194)</option>
<option value="1440x900">MacBook Pro (1024 × 1366)</option>
<option value="1500x1000">Surface Book (1440 × 990)</option>
<option value="1280x720">iMac (1368 × 912)</option>
</optgroup>
<optgroup label="Tablet">
<option value="414x896">iPad Mini (768 × 1024)</option>
<option value="375x812">iPad Pro 11" (834 × 1194)</option>
<option value="375x812">iPad Pro 12.9" (1024 × 1366)</option>
<option value="414x736">Surface Pro 3 (1440 × 990)</option>
<option value="414x736">Surface Pro 4 (1368 × 912)</option>
</optgroup>
<optgroup label="Phone">
<option value="414x896">iPhone 11 ProMax (414 × 896)</option>
<option value="375x812">iPhone 11 Pro / X (375 × 812)</option>
<option value="414x736">iPhone 8 Plus (414 × 736)</option>
<option value="375x667">iPhone 8 (375 × 667)</option>
<option value="411x731">Google Pixel 2 (411 × 731)</option>
<option value="411x823">Google Pixel XL (411 × 823)</option>
<option value="360x640">Android (360 × 640)</option>
</optgroup>
<optgroup label="Paper">
<option value="595x842">A4 (595 × 842)</option>
<option value="420x595">A5 (420 × 595)</option>
<option value="297x420">A6 (297 × 420)</option>
<option value="612x792">Letter (612 × 792) </option>
<option value="792x1224">Tabloid (792 × 1224)</option>
</optgroup> <optgroup label="Desktop">
</select> <option value="1140x1024">Desktop (1140 × 1024)</option>
<div class="caret"></div> <option value="375x700">MacBook (834 × 1194)</option>
<label id="resolution_label">Custom</label> <option value="1440x900">MacBook Pro (1024 × 1366)</option>
</div> <option value="1500x1000">Surface Book (1440 × 990)</option>
<option value="1280x720">iMac (1368 × 912)</option>
</optgroup>
<optgroup label="Tablet">
<option value="414x896">iPad Mini (768 × 1024)</option>
<option value="375x812">iPad Pro 11" (834 × 1194)</option>
<option value="375x812">iPad Pro 12.9" (1024 × 1366)</option>
<option value="414x736">Surface Pro 3 (1440 × 990)</option>
<option value="414x736">Surface Pro 4 (1368 × 912)</option>
</optgroup>
<optgroup label="Phone">
<option value="414x896">iPhone 11 ProMax (414 × 896)</option>
<option value="375x812">iPhone 11 Pro / X (375 × 812)</option>
<option value="414x736">iPhone 8 Plus (414 × 736)</option>
<option value="375x667">iPhone 8 (375 × 667)</option>
<option value="411x731">Google Pixel 2 (411 × 731)</option>
<option value="411x823">Google Pixel XL (411 × 823)</option>
<option value="360x640">Android (360 × 640)</option>
</optgroup>
<optgroup label="Paper">
<option value="595x842">A4 (595 × 842)</option>
<option value="420x595">A5 (420 × 595)</option>
<option value="297x420">A6 (297 × 420)</option>
<option value="612x792">Letter (612 × 792) </option>
<option value="792x1224">Tabloid (792 × 1224)</option>
</optgroup>
</select>
<div class="caret"></div>
<label id="resolution_label">Custom</label>
</div>
</div>
</div> </div>
<div id="rect_panel" class="context_panel"> <div id="rect_panel" class="context_panel">
<h4 class="clearfix">Rectangle</h4> <h4>Rectangle</h4>
<label> <div class="draginputs">
<input id="rect_x" class="attr_changer" data-title="Change X coordinate" data-attr="x" pattern="[0-9]*" /> <label class="draginput">
<span>X</span> <input id="rect_x" class="attr_changer" data-title="Change X coordinate" data-attr="x" pattern="[0-9]*" />
</label> <span>X</span>
<label> </label>
<input id="rect_y" class="attr_changer" data-title="Change Y coordinate" data-attr="y" pattern="[0-9]*" /> <label class="draginput">
<span>Y</span> <input id="rect_y" class="attr_changer" data-title="Change Y coordinate" data-attr="y" pattern="[0-9]*" />
</label> <span>Y</span>
<label id="rect_width_tool attr_changer" data-title="Change rectangle width"> </label>
<input id="rect_width" class="attr_changer" data-attr="width" type="text" pattern="[0-9]*" /> <label class="draginput" id="rect_width_tool attr_changer" data-title="Change rectangle width">
<span class="icon_label">Width</span> <input id="rect_width" class="attr_changer" data-attr="width" type="text" pattern="[0-9]*" />
</label> <span class="icon_label">Width</span>
<label id="rect_height_tool" data-title="Change rectangle height"> </label>
<input id="rect_height" class="attr_changer" data-attr="height" type="text" pattern="[0-9]*" /> <label class="draginput" id="rect_height_tool" data-title="Change rectangle height">
<span class="icon_label">Height</span> <input id="rect_height" class="attr_changer" data-attr="height" type="text" pattern="[0-9]*" />
</label> <span class="icon_label">Height</span>
</label>
</div>
</div> </div>
<div id="path_panel" class="context_panel clearfix"> <div id="path_panel" class="context_panel clearfix">
<h4 class="clearfix">Path</h4> <h4>Path</h4>
<label> <div class="draginputs">
<input id="path_x" class="attr_changer" data-title="Change ellipse's cx coordinate" data-attr="x" pattern="[0-9]*" /> <label>
<span>X</span> <input id="path_x" class="attr_changer" data-title="Change ellipse's cx coordinate" data-attr="x" pattern="[0-9]*" />
</label> <span>X</span>
<label> </label>
<input id="path_y" class="attr_changer" data-title="Change ellipse's cy coordinate" data-attr="y" pattern="[0-9]*" /> <label>
<span>Y</span> <input id="path_y" class="attr_changer" data-title="Change ellipse's cy coordinate" data-attr="y" pattern="[0-9]*" />
</label> <span>Y</span>
</label>
</div>
</div> </div>
<div id="image_panel" class="context_panel clearfix"> <div id="image_panel" class="context_panel clearfix">
<h4>Image</h4> <h4>Image</h4>
<label> <div class="draginputs">
<input id="image_x" class="attr_changer" data-title="Change X coordinate" data-attr="x" pattern="[0-9]*"/> <label class="draginput">
<span>X</span> <input id="image_x" class="attr_changer" data-title="Change X coordinate" data-attr="x" pattern="[0-9]*"/>
</label> <span>X</span>
<label> </label>
<input id="image_y" class="attr_changer" data-title="Change Y coordinate" data-attr="y" pattern="[0-9]*"/> <label class="draginput">
<span>Y</span> <input id="image_y" class="attr_changer" data-title="Change Y coordinate" data-attr="y" pattern="[0-9]*"/>
</label> <span>Y</span>
<label> </label>
<input id="image_width" class="attr_changer" data-title="Change image width" data-attr="width" pattern="[0-9]*" /> <label class="draginput">
<span class="icon_label">Width</span> <input id="image_width" class="attr_changer" data-title="Change image width" data-attr="width" pattern="[0-9]*" />
</label> <span class="icon_label">Width</span>
<label> </label>
<input id="image_height" class="attr_changer" data-title="Change image height" data-attr="height" pattern="[0-9]*" /> <label class="draginput">
<span class="icon_label">Height</span> <input id="image_height" class="attr_changer" data-title="Change image height" data-attr="height" pattern="[0-9]*" />
</label> <span class="icon_label">Height</span>
</label>
</div>
</div> </div>
<div id="circle_panel" class="context_panel"> <div id="circle_panel" class="context_panel">
<h4>Circle</h4> <h4>Circle</h4>
<label id="tool_circle_cx"> <div class="draginputs">
<span>Center X</span> <label id="tool_circle_cx" class="draginput">
<input id="circle_cx" class="attr_changer" title="Change circle's cx coordinate" data-attr="cx"/> <span>Center X</span>
</label> <input id="circle_cx" class="attr_changer" title="Change circle's cx coordinate" data-attr="cx"/>
<label id="tool_circle_cy"> </label>
<span>Center Y</span> <label id="tool_circle_cy" class="draginput">
<input id="circle_cy" class="attr_changer" title="Change circle's cy coordinate" data-attr="cy"/> <span>Center Y</span>
</label> <input id="circle_cy" class="attr_changer" title="Change circle's cy coordinate" data-attr="cy"/>
<label id="tool_circle_r"> </label>
<span>Radius</span> <label id="tool_circle_r" class="draginput">
<input id="circle_r" class="attr_changer" title="Change circle's radius" data-attr="r"/> <span>Radius</span>
</label> <input id="circle_r" class="attr_changer" title="Change circle's radius" data-attr="r"/>
</label>
</div>
</div> </div>
<div id="ellipse_panel" class="context_panel clearfix"> <div id="ellipse_panel" class="context_panel">
<h4>Ellipse</h4> <h4>Ellipse</h4>
<label id="tool_ellipse_cx"> <div class="draginputs">
<input id="ellipse_cx" class="attr_changer" data-title="Change ellipse's cx coordinate" data-attr="cx" pattern="[0-9]*" /> <label id="tool_ellipse_cx">
<span>X</span> <input id="ellipse_cx" class="attr_changer" data-title="Change ellipse's cx coordinate" data-attr="cx" pattern="[0-9]*" />
</label> <span>X</span>
<label id="tool_ellipse_cy"> </label>
<input id="ellipse_cy" class="attr_changer" data-title="Change ellipse's cy coordinate" data-attr="cy" pattern="[0-9]*" /> <label id="tool_ellipse_cy">
<span>Y</span> <input id="ellipse_cy" class="attr_changer" data-title="Change ellipse's cy coordinate" data-attr="cy" pattern="[0-9]*" />
</label> <span>Y</span>
<label id="tool_ellipse_rx"> </label>
<input id="ellipse_rx" class="attr_changer" data-title="Change ellipse's x radius" data-attr="rx" pattern="[0-9]*" /> <label id="tool_ellipse_rx">
<span>Radius X</span> <input id="ellipse_rx" class="attr_changer" data-title="Change ellipse's x radius" data-attr="rx" pattern="[0-9]*" />
</label> <span>Radius X</span>
<label id="tool_ellipse_ry"> </label>
<input id="ellipse_ry" class="attr_changer" data-title="Change ellipse's y radius" data-attr="ry" pattern="[0-9]*" /> <label id="tool_ellipse_ry">
<span>Radius Y</span> <input id="ellipse_ry" class="attr_changer" data-title="Change ellipse's y radius" data-attr="ry" pattern="[0-9]*" />
</label> <span>Radius Y</span>
</label>
</div>
</div> </div>
<div id="line_panel" class="context_panel clearfix"> <div id="line_panel" class="context_panel clearfix">
<h4>Line</h4> <h4>Line</h4>
<label id="tool_line_x1"> <div class="draginputs">
<input id="line_x1" class="attr_changer" data-title="Change line's starting x coordinate" data-attr="x1" pattern="[0-9]*" /> <label id="tool_line_x1">
<span>Start X</span> <input id="line_x1" class="attr_changer" data-title="Change line's starting x coordinate" data-attr="x1" pattern="[0-9]*" />
</label> <span>Start X</span>
<label id="tool_line_y1"> </label>
<input id="line_y1" class="attr_changer" data-title="Change line's starting y coordinate" data-attr="y1" pattern="[0-9]*" /> <label id="tool_line_y1">
<span>Start Y</span> <input id="line_y1" class="attr_changer" data-title="Change line's starting y coordinate" data-attr="y1" pattern="[0-9]*" />
</label> <span>Start Y</span>
<label id="tool_line_x2"> </label>
<input id="line_x2" class="attr_changer" data-title="Change line's ending x coordinate" data-attr="x2" pattern="[0-9]*" /> <label id="tool_line_x2">
<span>End X</span> <input id="line_x2" class="attr_changer" data-title="Change line's ending x coordinate" data-attr="x2" pattern="[0-9]*" />
</label> <span>End X</span>
<label id="tool_line_y2"> </label>
<input id="line_y2" class="attr_changer" data-title="Change line's ending y coordinate" data-attr="y2" pattern="[0-9]*" /> <label id="tool_line_y2">
<span>End Y</span> <input id="line_y2" class="attr_changer" data-title="Change line's ending y coordinate" data-attr="y2" pattern="[0-9]*" />
</label> <span>End Y</span>
</label>
</div>
</div> </div>
<div id="text_panel" class="context_panel"> <div id="text_panel" class="context_panel">
<h4>Text</h4> <h4>Text</h4>
<label class="draginput twocol textcontent" data-title="Change Content"> <div class="draginputs">
<span>Content</span> <label class="draginput twocol textcontent" data-title="Change Content">
<input id="text" type="text"/> <span>Content</span>
</label> <input id="text" type="text"/>
<label> </label>
<input id="text_x" class="attr_changer" data-title="Change text x coordinate" data-attr="x" pattern="[0-9]*" /> <label>
<span>X</span> <input id="text_x" class="attr_changer" data-title="Change text x coordinate" data-attr="x" pattern="[0-9]*" />
</label> <span>X</span>
<label> </label>
<input id="text_y" class="attr_changer" data-title="Change text y coordinate" data-attr="y" pattern="[0-9]*" /> <label>
<span>Y</span> <input id="text_y" class="attr_changer" data-title="Change text y coordinate" data-attr="y" pattern="[0-9]*" />
</label> <span>Y</span>
<div class="toolset draginput twocol" id="tool_font_family"> </label>
<!-- Font family --> <div class="toolset draginput twocol" id="tool_font_family">
<span>Font</span> <!-- Font family -->
<div id="preview_font" style="font-family: sans-serif">sans-serif</div> <span>Font</span>
<div class="caret"></div> <div id="preview_font" style="font-family: sans-serif">sans-serif</div>
<input id="font_family" data-title="Change Font Family" size="12" type="hidden" /> <div class="caret"></div>
<select id="font_family_dropdown"> <input id="font_family" data-title="Change Font Family" size="12" type="hidden" />
</select> <select id="font_family_dropdown">
<div id="tool_bold" data-title="Bold Text [B]">B</div> </select>
<div id="tool_italic" data-title="Italic Text [I]">i</div> </div>
<div class="draginput">
<span>Font Style</span>
<div id="tool_bold" data-title="Bold Text [B]">B</div>
<div id="tool_italic" data-title="Italic Text [I]">i</div>
</div>
<label id="tool_font_size" data-title="Change Font Size">
<input id="font_size" value="0" />
<span id="font_sizeLabel" class="icon_label">Font Size</span>
</label>
</div> </div>
<label id="tool_font_size" data-title="Change Font Size">
<input id="font_size" value="0" />
<span id="font_sizeLabel" class="icon_label">Font Size</span>
</label>
</div> </div>
<!-- formerly gsvg_panel --> <!-- formerly gsvg_panel -->
@ -365,41 +385,46 @@
</div> </div>
<div id="use_panel" class="context_panel clearfix"> <div id="use_panel" class="context_panel clearfix">
<div class="button" id="tool_unlink_use" data-title="Break link to reference element (make unique)">Break link reference</div> <div class="button" id="tool_unlink_use" data-title="Break link">Break link reference</div>
</div> </div>
<div id="g_panel" class="context_panel clearfix"> <div id="g_panel" class="context_panel clearfix">
<h4>Group</h4> <h4>Group</h4>
<label> <div class="draginput">
<input id="g_x" class="attr_changer" data-title="Change groups's x coordinate" data-attr="x" pattern="[0-9]*" /> <label>
<span>X</span> <input id="g_x" class="attr_changer" data-title="Change groups's x coordinate" data-attr="x" pattern="[0-9]*" />
</label> <span>X</span>
<label> </label>
<input id="g_y" class="attr_changer" data-title="Change groups's y coordinate" data-attr="y" pattern="[0-9]*" /> <label>
<span>Y</span> <input id="g_y" class="attr_changer" data-title="Change groups's y coordinate" data-attr="y" pattern="[0-9]*" />
</label> <span>Y</span>
</label>
</div>
</div> </div>
<div id="path_node_panel" class="context_panel clearfix"> <div id="path_node_panel" class="context_panel clearfix">
<h4>Edit Path</h4> <h4>Edit Path</h4>
<label id="tool_node_x"> <div class="draginputs">
<input id="path_node_x" class="attr_changer" data-title="Change node's x coordinate" data-attr="x" /> <label id="tool_node_x">
<span>X</span> <input id="path_node_x" class="attr_changer" data-title="Change node's x coordinate" data-attr="x" />
</label> <span>X</span>
<label id="tool_node_y"> </label>
<input id="path_node_y" class="attr_changer" data-title="Change node's y coordinate" data-attr="y" /> <label id="tool_node_y">
<span>Y</span> <input id="path_node_y" class="attr_changer" data-title="Change node's y coordinate" data-attr="y" />
</label> <span>Y</span>
</label>
<div id="segment_type" class="draginput label">
<span>Segment Type</span> <div id="segment_type" class="draginput label">
<select id="seg_type" data-title="Change Segment type"> <span>Segment Type</span>
<option id="straight_segments" selected="selected" value="4">Straight</option> <select id="seg_type" data-title="Change Segment type">
<option id="curve_segments" value="6">Curve</option> <option id="straight_segments" selected="selected" value="4">Straight</option>
</select> <option id="curve_segments" value="6">Curve</option>
<div class="caret"></div> </select>
<label id="seg_type_label">Straight</label> <div class="caret"></div>
<label id="seg_type_label">Straight</label>
</div>
</div> </div>
<div class="button-container clearfix"> <div class="button-container clearfix">
@ -411,33 +436,33 @@
<!-- Buttons when a single element is selected --> <!-- Buttons when a single element is selected -->
<div id="selected_panel" class="context_panel"> <div id="selected_panel" class="context_panel">
<div class="draginputs">
<label id="tool_angle" data-title="Change rotation angle" class="draginput"> <label id="tool_angle" data-title="Change rotation angle" class="draginput">
<input id="angle" class="attr_changer" size="2" value="0" data-attr="transform" data-min="-180" data-max="180" type="text"/> <input id="angle" class="attr_changer" size="2" value="0" data-attr="transform" data-min="-180" data-max="180" type="text"/>
<span class="icon_label">Rotation</span> <span class="icon_label">Rotation</span>
<div id="tool_angle_indicator"> <div id="tool_angle_indicator">
<div id="tool_angle_indicator_cursor"></div> <div id="tool_angle_indicator_cursor"></div>
</div> </div>
</label> </label>
<label class="toolset" id="tool_opacity" data-title="Change selected item opacity"> <label id="tool_opacity" data-title="Change selected item opacity">
<input id="group_opacity" class="attr_changer" data-attr="opacity" value="100" step="5" min="0" max="100" /> <input id="group_opacity" class="attr_changer" data-attr="opacity" value="100" step="5" min="0" max="100" />
<span id="group_opacityLabel" class="icon_label">Opacity</span> <span id="group_opacityLabel" class="icon_label">Opacity</span>
</label> </label>
<div class="toolset" id="tool_blur" data-title="Change gaussian blur value"> <label id="tool_blur" data-title="Change gaussian blur value">
<label> <input id="blur" size="2" value="0" step=".1" min="0" max="10" />
<input id="blur" size="2" value="0" step=".1" min="0" max="10" /> <span class="icon_label">Blur</span>
<span class="icon_label">Blur</span>
</label> </label>
<label id="cornerRadiusLabel" data-title="Change Rectangle Corner Radius">
<input id="rect_rx" value="0" data-attr="rx" class="attr_changer" type="text" pattern="[0-9]*" />
<span class="icon_label">Roundness</span>
</label>
</div> </div>
<label id="cornerRadiusLabel" data-title="Change Rectangle Corner Radius">
<input id="rect_rx" value="0" data-attr="rx" class="attr_changer" type="text" pattern="[0-9]*" />
<span class="icon_label">Roundness</span>
</label>
<div class="clearfix"></div>
<div id="align_tools"> <div id="align_tools">
<h4>Align</h4> <h4>Align</h4>
<div class="toolset align_buttons" id="tool_position"> <div class="toolset align_buttons" id="tool_position">
@ -485,7 +510,7 @@
<div class="toolset align_buttons"> <div class="toolset align_buttons">
<label id="tool_align_relative"> <label id="tool_align_relative">
<div class="select"> <div class="select-input">
<select id="align_relative_to" title="Align relative to ..." class="select_tool"> <select id="align_relative_to" title="Align relative to ..." class="select_tool">
<option id="selected_objects" value="selected">Align to objects</option> <option id="selected_objects" value="selected">Align to objects</option>
<option id="page" value="page">Align to page</option> <option id="page" value="page">Align to page</option>
@ -529,35 +554,35 @@
</div> </div>
<div id="stroke_panel" class="context_panel clearfix"> <div id="stroke_panel" class="context_panel">
<div class="clearfix"></div>
<h4>Stroke</h4> <h4>Stroke</h4>
<div class="toolset" data-title="Change stroke"> <div class="draginputs">
<label> <label class="draginput" data-title="Change stroke">
<input id="stroke_width" size="2" value="1" data-attr="stroke-width" min="0" max="99" step="1" /> <input id="stroke_width" size="2" value="1" data-attr="stroke-width" min="0" max="99" step="1" />
<span class="icon_label">Width</span> <span class="icon_label">Width</span>
</label> </label>
<div class="stroke_tool draginput">
<span>Dash</span>
<select id="stroke_style" data-title="Change stroke dash style">
<option selected="selected" value="none">—</option>
<option value="2,2">···</option>
<option value="5,5">- -</option>
<option value="5,2,2,2">-·-</option>
<option value="5,2,2,2,2,2">-··-</option>
</select>
<div class="caret"></div>
<label id="stroke_style_label">—</label>
</div>
<label style="display: none;">
<span class="icon_label">Stroke Join</span>
</label>
<label style="display: none;">
<span class="icon_label">Stroke Cap</span>
</label>
</div> </div>
<div class="stroke_tool draginput">
<span>Dash</span>
<select id="stroke_style" data-title="Change stroke dash style">
<option selected="selected" value="none">—</option>
<option value="2,2">···</option>
<option value="5,5">- -</option>
<option value="5,2,2,2">-·-</option>
<option value="5,2,2,2,2,2">-··-</option>
</select>
<div class="caret"></div>
<label id="stroke_style_label">—</label>
</div>
<label style="display: none;">
<span class="icon_label">Stroke Join</span>
</label>
<label style="display: none;">
<span class="icon_label">Stroke Cap</span>
</label>
</div> </div>
</div> <!-- tools_top --> </div> <!-- tools_top -->

2
src/js/Import.js
View File

@ -56,7 +56,7 @@ MD.Import = function(){
svgCanvas.selectOnly([newImage]) svgCanvas.selectOnly([newImage])
svgCanvas.alignSelectedElements("m", "page") svgCanvas.alignSelectedElements("m", "page")
svgCanvas.alignSelectedElements("c", "page") svgCanvas.alignSelectedElements("c", "page")
updateContextPanel(); editor.panel.updateContextPanel();
} }
// put a placeholder img so we know the default dimensions // put a placeholder img so we know the default dimensions
var img_width = 100; var img_width = 100;

5
src/js/Panel.js
View File

@ -248,7 +248,10 @@ MD.Panel = function(){
$('#preview_font').text(cleanFontFamily).css('font-family', font_family); $('#preview_font').text(cleanFontFamily).css('font-family', font_family);
} // text } // text
else if(el_name === 'image') { else if(el_name === 'image') {
setImageURL(svgCanvas.getHref(elem)); const url = svgCanvas.getHref(elem)
if(!url) url = default_img_url;
svgCanvas.setImageURL(url);
$('#image_url').val(url);
} // image } // image
else if(el_name === 'g' || el_name === 'use') { else if(el_name === 'g' || el_name === 'use') {
$('#container_panel').show(); $('#container_panel').show();

2
src/js/Text.js
View File

@ -1,11 +1,13 @@
MD.Text = function(){ MD.Text = function(){
function setBold(){ function setBold(){
if ($(this).hasClass("disabled")) return;
svgCanvas.setBold( !svgCanvas.getBold() ); svgCanvas.setBold( !svgCanvas.getBold() );
editor.panel.updateContextPanel(); editor.panel.updateContextPanel();
} }
function setItalic(){ function setItalic(){
if ($(this).hasClass("disabled")) return;
svgCanvas.setItalic( !svgCanvas.getItalic() ); svgCanvas.setItalic( !svgCanvas.getItalic() );
editor.panel.updateContextPanel(); editor.panel.updateContextPanel();
} }