Added more SVG icons, added experimental option to change icon size, fixed clone offset on zoom
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@889 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Alexis Deveria
parent
0e578d675c
commit
20d7b92b58
|
|
@ -159,6 +159,13 @@
|
|||
</svg>
|
||||
</foreignContent>
|
||||
|
||||
<foreignContent id="arrow_down">
|
||||
<svg viewBox="0 0 50 40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<path transform="rotate(90, 26, 13)" d="m14,-12l0,50l25,-25l-25,-25z" fill="#000000" stroke="#000000"/>
|
||||
</svg>
|
||||
</foreignContent>
|
||||
|
||||
|
||||
<foreignContent id="new_image">
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
|
||||
|
|
@ -304,6 +311,90 @@
|
|||
</svg>
|
||||
</foreignContent>
|
||||
|
||||
<foreignContent id="delete">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
|
||||
<g>
|
||||
<title>Layer 1</title>
|
||||
<rect ry="3" rx="3" stroke="#800000" fill="#aa0000" id="svg_37" height="20.29514" width="21.17486" y="1.70304" x="1.42011"/>
|
||||
<rect ry="3" rx="3" stroke="#ff5555" fill="#aa0000" id="svg_67" height="18.63022" width="19.61118" y="2.53597" x="2.20258"/>
|
||||
<line stroke-width="2" fill="none" stroke="#ffffff" id="svg_68" y2="16.85127" x2="17.00646" y1="6.85127" x1="7.00646"/>
|
||||
<line stroke-width="2" id="svg_70" fill="none" stroke="#ffffff" y2="16.85127" x2="7.00646" y1="6.85127" x1="17.00646"/>
|
||||
</g>
|
||||
</svg>
|
||||
</foreignContent>
|
||||
|
||||
<foreignContent id="go_up">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
|
||||
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
|
||||
<defs>
|
||||
<linearGradient y2="0" x2="0.7" y1="0" x1="0" id="svg_74">
|
||||
<stop stop-opacity="1" stop-color="#afe853" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#52a310" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<title>Layer 1</title>
|
||||
<path stroke="#008000" fill="url(#svg_74)" id="svg_33" d="m5.38492,16.77043l7.07692,0l0,-5.23077l4.15385,0l-7.69231,-10.15385l-7.69231,10.15385l4.15385,0l0,5.23077z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</foreignContent>
|
||||
|
||||
<foreignContent id="go_down">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
|
||||
<defs>
|
||||
<linearGradient y2="0" x2="0.7" y1="0" x1="0" id="svg_75">
|
||||
<stop stop-opacity="1" stop-color="#afe853" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#52a310" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<title>Layer 1</title>
|
||||
<path stroke="#008000" fill="url(#svg_75)" id="svg_33" d="m5.3015,1.69202l6.93483,0l0,5.07323l4.07045,0l-7.53786,9.84803l-7.53786,-9.84803l4.07045,0l0,-5.07323z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</foreignContent>
|
||||
|
||||
<foreignContent id="move_bottom">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23">
|
||||
<defs>
|
||||
<linearGradient y2="0" x2="1" y1="0" x1="0" id="svg_80">
|
||||
<stop stop-opacity="1" stop-color="#bc7f05" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#fcfc9f" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<title>Layer 1</title>
|
||||
<line stroke-width="2" fill="none" stroke="#000000" id="svg_72" y2="2.5" x2="22" y1="2.5" x1="10.5"/>
|
||||
<line id="svg_73" stroke-width="2" fill="none" stroke="#000000" y2="6.5" x2="21.99844" y1="6.5" x1="10.49844"/>
|
||||
<line id="svg_74" stroke-width="2" fill="none" stroke="#000000" y2="10.5" x2="21.99922" y1="10.5" x1="10.49922"/>
|
||||
<line id="svg_75" stroke-width="2" fill="none" stroke="#000000" y2="14.5" x2="21.99922" y1="14.5" x1="10.49922"/>
|
||||
<rect stroke="#000000" fill="url(#svg_80)" id="svg_77" height="2.2" width="20" y="17.65" x="1.65"/>
|
||||
<path stroke-width="0" stroke="#000000" fill="#000000" id="svg_81" d="m4.25,1.55l2.35,0l0,11.05l2,0l-3.175,3.45l-3.175,-3.45l2,0l0,-11.05z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</foreignContent>
|
||||
|
||||
<foreignContent id="move_top">
|
||||
<svg viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient id="svg_86" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0" stop-color="#9fdcf4" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#617e96" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<title>Layer 1</title>
|
||||
<line x1="1.3" y1="8.19922" x2="12.8" y2="8.19922" id="svg_72" stroke="#000000" fill="none" stroke-width="2"/>
|
||||
<line x1="1.29844" y1="12.19922" x2="12.79844" y2="12.19922" stroke="#000000" fill="none" stroke-width="2" id="svg_73"/>
|
||||
<line x1="1.29922" y1="16.19922" x2="12.79922" y2="16.19922" stroke="#000000" fill="none" stroke-width="2" id="svg_74"/>
|
||||
<line x1="1.29922" y1="20.19922" x2="12.79922" y2="20.19922" stroke="#000000" fill="none" stroke-width="2" id="svg_75"/>
|
||||
<rect x="1.55" y="1.85" width="20" height="3.2" id="svg_77" fill="url(#svg_86)" stroke="#000000"/>
|
||||
<path d="m16.83475,21.14603l2.33207,0l0,-11.04578l1.98474,0l-3.15077,-3.44869l-3.15077,3.44869l1.98474,0l0,11.04578z" id="svg_81" fill="#000000" stroke="#000000" stroke-width="0"/>
|
||||
</g>
|
||||
</svg>
|
||||
</foreignContent>
|
||||
|
||||
<g id="svg_eof"/>
|
||||
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 22 KiB |
|
|
@ -17,8 +17,8 @@
|
|||
<script type="text/javascript" src="svgcanvas.js"></script>
|
||||
<script type="text/javascript" src="svg-editor.js"></script>
|
||||
<script type="text/javascript" src="locale/locale.js"></script>
|
||||
<!-- <script type="text/javascript" src="../../svg-icon-loader/jquery.svgicons.js"></script> -->
|
||||
<script type="text/javascript" src="http://svg-icon-loader.googlecode.com/svn/trunk/jquery.svgicons.js"></script>
|
||||
<script type="text/javascript" src="../../svg-icon-loader/jquery.svgicons.js"></script>
|
||||
<!-- <script type="text/javascript" src="http://svg-icon-loader.googlecode.com/svn/trunk/jquery.svgicons.js"></script> -->
|
||||
|
||||
<style>
|
||||
#svg_editor .tools_panel div.tool_button {
|
||||
|
|
@ -26,9 +26,165 @@
|
|||
height: 24px;
|
||||
}
|
||||
|
||||
#layerbuttons {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.layer_button {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.flyout_arrow_horiz {
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
#tool_bold, #tool_italic {
|
||||
font: bold 2.1em/1.1em serif;
|
||||
text-align: center;
|
||||
padding-left: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#tool_bold span, #tool_italic span {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0; left: 0;
|
||||
background: #000;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#tool_italic {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#svg_editor .dropdown button {
|
||||
background: none;
|
||||
padding: 0;
|
||||
|
||||
border-left: 1px solid #FFFFFF;
|
||||
border-top: 1px solid #FFFFFF;
|
||||
border-right: 1px solid #808080;
|
||||
border-bottom: 1px solid #808080;
|
||||
}
|
||||
|
||||
/* Adjust size of all tools */
|
||||
body.small_tools #svg_editor .tool_button,
|
||||
body.small_tools #svg_editor .push_button,
|
||||
body.small_tools #svg_editor .tool_button_current,
|
||||
body.small_tools #svg_editor .tool_button_disabled {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
body.small_tools #svg_editor .tool_sep {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
body.small_tools #svg_editor #tools_left {
|
||||
width: 26px;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
body.small_tools #svg_editor div#workarea {
|
||||
left: 27px;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
body.small_tools #svg_editor #tools_top input {
|
||||
margin-top: 2px;
|
||||
height: 12px;
|
||||
border: 1px solid #555;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
body.small_tools #svg_editor #tools_top > div, #tools_top {
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
body.small_tools #tools_top .dropdown button {
|
||||
margin-top: 2px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
body.small_tools #tools_top label {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
body.small_tools #tool_bold,
|
||||
body.small_tools #tool_italic {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
body.small_tools #svg_editor #sidepanels {
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
|
||||
body.large_tools #svg_editor .tool_button,
|
||||
body.large_tools #svg_editor .push_button,
|
||||
body.large_tools #svg_editor .tool_button_current,
|
||||
body.large_tools #svg_editor .tool_button_disabled {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
body.large_tools #svg_editor .tool_sep {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
body.large_tools #svg_editor #tools_left {
|
||||
width: 42px;
|
||||
top: 125px;
|
||||
}
|
||||
|
||||
body.large_tools #svg_editor div#workarea {
|
||||
left: 65px;
|
||||
top: 125px;
|
||||
}
|
||||
|
||||
body.large_tools #svg_editor #tools_top input {
|
||||
margin-top: 5px;
|
||||
height: 45px;
|
||||
/* border: 1px solid #555;*/
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
body.large_tools #svg_editor #tools_top > div, #tools_top {
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
body.large_tools #tools_top .dropdown button {
|
||||
margin-top: 4px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
body.large_tools #tools_top label {
|
||||
font-size: 2em;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
body.large_tools #tool_bold,
|
||||
body.large_tools #tool_italic {
|
||||
font-size: 4.5em;
|
||||
}
|
||||
|
||||
body.large_tools #svg_editor select {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
body.large_tools #svg_editor #sidepanels {
|
||||
top: 125px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
|
|
@ -57,11 +213,12 @@ $(function() {
|
|||
'zoom':'zoom.png',
|
||||
|
||||
'clone':'clone.png',
|
||||
'delete':'delete.png',
|
||||
|
||||
'arrow_right':'flyouth.png'
|
||||
},
|
||||
placement: {
|
||||
'#tool_clear':'new_image',
|
||||
'#tool_clear,#layer_new':'new_image',
|
||||
'#tool_save':'save',
|
||||
'#tool_source':'source',
|
||||
'#tool_docprops':'docprops',
|
||||
|
|
@ -76,18 +233,50 @@ $(function() {
|
|||
'#tools_ellipse_show':'circle',
|
||||
'#tools_rect_show':'square',
|
||||
'#tool_path':'path',
|
||||
'#tool_text':'text',
|
||||
'#tool_text,#layer_rename':'text',
|
||||
'#tool_image':'image',
|
||||
'#tool_zoom':'zoom',
|
||||
|
||||
'#tool_clone,#tool_clone_multi,#tool_node_clone':'clone',
|
||||
'#layer_delete,#tool_delete,#tool_delete_multi,#tool_node_delete':'delete',
|
||||
'#tool_move_top':'move_top',
|
||||
'#tool_move_bottom':'move_bottom',
|
||||
|
||||
'.flyout_arrow_horiz':'arrow_right'
|
||||
'#layer_up':'go_up',
|
||||
'#layer_down':'go_down',
|
||||
|
||||
'.flyout_arrow_horiz':'arrow_right',
|
||||
'.dropdown button':'arrow_down'
|
||||
},
|
||||
callback: function() {
|
||||
$('.flyout_arrow_horiz .svg_icon').width(5).height(5);
|
||||
resize: {
|
||||
'.flyout_arrow_horiz .svg_icon': 5,
|
||||
'.layer_button .svg_icon': 14,
|
||||
'.dropdown button .svg_icon': 7
|
||||
}
|
||||
});
|
||||
|
||||
$('#iconsize').change(function() {
|
||||
var size, size_num;
|
||||
switch ( this.value ) {
|
||||
case 's':
|
||||
size = 'small', size_num = 16;
|
||||
break;
|
||||
case 'm':
|
||||
size = 'medium', size_num = 24;
|
||||
break;
|
||||
case 'l':
|
||||
size = 'large', size_num = 48;
|
||||
break;
|
||||
}
|
||||
|
||||
$('body').removeClass('small_tools large_tools');
|
||||
if(size != 'medium') $('body').addClass(size + '_tools');
|
||||
$('.tool_button, .push_button, .tool_button_current, .tool_button_disabled')
|
||||
.find('.svg_icon').each(function() {
|
||||
this.setAttribute('width',size_num);
|
||||
this.setAttribute('height',size_num);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -125,11 +314,11 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
<div id="layerpanel">
|
||||
<h3 id="layersLable">Layers</h3>
|
||||
<fieldset id="layerbuttons">
|
||||
<img id="layer_new" class="layer_button" src="images/clear.png" alt="New Layer" title="New Layer"/>
|
||||
<img id="layer_delete" class="layer_button" src="images/delete.png" alt="Delete Layer" title="Delete Layer"/>
|
||||
<img id="layer_rename" class="layer_button" src="images/view-refresh.png" alt="Rename Layer" title="Rename Layer"/>
|
||||
<img id="layer_up" class="layer_button" src="images/go-up.png" alt="Move Layer up" title="Move Layer Up"/>
|
||||
<img id="layer_down" class="layer_button" src="images/go-down.png" alt="Move Layer Down" title="Move Layer Down"/>
|
||||
<div id="layer_new" class="layer_button" title="New Layer"></div>
|
||||
<div id="layer_delete" class="layer_button" title="Delete Layer"></div>
|
||||
<div id="layer_rename" class="layer_button" title="Rename Layer"></div>
|
||||
<div id="layer_up" class="layer_button" title="Move Layer Up"></div>
|
||||
<div id="layer_down" class="layer_button" title="Move Layer Down"></div>
|
||||
</fieldset>
|
||||
|
||||
<table id="layerlist">
|
||||
|
|
@ -175,10 +364,10 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
<div id="selected_panel">
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<div class="push_button" id="tool_clone" title="Clone Element [C]"></div>
|
||||
<img class="push_button" id="tool_delete" src="images/delete.png" title="Delete Element [Delete/Backspace]" alt="Delete"/>
|
||||
<div class="push_button" id="tool_delete" title="Delete Element [Delete/Backspace]"></div>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<img class="push_button" id="tool_move_top" src="images/move_top.png" title="Move to Top [Shift+Up]" alt="Top"/>
|
||||
<img class="push_button" id="tool_move_bottom" src="images/move_bottom.png" title="Move to Bottom [Shift+Down]" alt="Bottom"/>
|
||||
<div class="push_button" id="tool_move_top" title="Move to Top [Shift+Up]"></div>
|
||||
<div class="push_button" id="tool_move_bottom" title="Move to Bottom [Shift+Down]"></div>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
|
||||
<label id="group_opacityLabel" class="selected_tool" for="group_opacity">opac:</label>
|
||||
|
|
@ -204,7 +393,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
<div id="multiselected_panel">
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<div class="push_button" id="tool_clone_multi" title="Clone Elements [C]"></div>
|
||||
<img class="push_button" id="tool_delete_multi" src="images/delete.png" title="Delete Selected Elements [Delete/Backspace]" alt="Delete"/>
|
||||
<div class="push_button" id="tool_delete_multi" title="Delete Selected Elements [Delete/Backspace]"></div>
|
||||
<img class="tool_sep" src="images/sep.png" alt="|"/>
|
||||
<img class="push_button" id="tool_group" src="images/shape_group.png" title="Group Elements [G]" alt="Group"/>
|
||||
<div class="push_button" id="tool_alignleft" title="Align Left"></div>
|
||||
|
|
@ -297,8 +486,8 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
<input id="text_x" class="text_tool attr_changer" title="Change text X coordinate" size="3" data-attr="x"/>
|
||||
<label class="text_tool">y:</label>
|
||||
<input id="text_y" class="text_tool attr_changer" title="Change text Y coordinate" size="3" data-attr="y"/>
|
||||
<img class="tool_button" id="tool_bold" src="images/bold.png" title="Bold Text [B]" alt="Bold"/>
|
||||
<img class="tool_button" id="tool_italic" src="images/italic.png" title="Italic Text [I]" alt="Italic"/>
|
||||
<div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
|
||||
<div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
|
||||
<select id="font_family" class="text_tool" title="Change Font Family">
|
||||
<option selected="selected" value="serif">serif</option>
|
||||
<option value="sans-serif">sans-serif</option>
|
||||
|
|
@ -322,7 +511,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
<option id="curve_segments" value="6">Curve</option>
|
||||
</select>
|
||||
<div class="tool_button" id="tool_node_clone" title="Clone Node"></div>
|
||||
<img class="tool_button" id="tool_node_delete" src="images/delete.png" title="Delete Node" alt="Delete"/>
|
||||
<div class="tool_button" id="tool_node_delete" title="Delete Node"></div>
|
||||
</div>
|
||||
|
||||
</div> <!-- tools_top -->
|
||||
|
|
@ -462,7 +651,15 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
<option id="fitToContent" value="content">Fit to Content</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="change_iconsize">
|
||||
<legend id="svginfo_icons">Icon size</legend>
|
||||
<select id="iconsize">
|
||||
<option id="icon_small" value="s">Small</option>
|
||||
<option id="icon_medium" value="m" selected="selected">Medium</option>
|
||||
<option id="icon_large" value="l">Large</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4964,8 +4964,8 @@ function BatchCommand(text) {
|
|||
// if undoable is not sent, default to true
|
||||
// if single values, scale them to the zoom
|
||||
if (dx.constructor != Array) {
|
||||
dx *= current_zoom;
|
||||
dy *= current_zoom;
|
||||
dx /= current_zoom;
|
||||
dy /= current_zoom;
|
||||
}
|
||||
var undoable = undoable || true;
|
||||
var batchCmd = new BatchCommand("position");
|
||||
|
|
|
|||
Loading…
Reference in New Issue