2009-10-27 20:22:28 +00:00
<!DOCTYPE html>
< html >
<!-- removed for now, causes problems in Firefox: manifest="svg - editor.manifest" -->
< head >
< meta http-equiv = "Content-type" content = "text/html;charset=UTF-8" / >
< meta http-equiv = "X-UA-Compatible" content = "chrome=1" / >
< link rel = "icon" type = "image/png" href = "images/logo.png" >
< link rel = "stylesheet" href = "jgraduate/css/jPicker-1.0.9.css" type = "text/css" / >
< link rel = "stylesheet" href = "jgraduate/css/jGraduate-0.2.0.css" type = "text/css" / >
< link rel = "stylesheet" href = "svg-editor.css" type = "text/css" / >
< link rel = "stylesheet" href = "spinbtn/JQuerySpinBtn.css" type = "text/css" / >
<!-- Development version of script tags: -->
< script type = "text/javascript" src = "jquery.js" > < / script >
< script type = "text/javascript" src = "js-hotkeys/jquery.hotkeys.min.js" > < / script >
< script type = "text/javascript" src = "jgraduate/jquery.jgraduate.js" > < / script >
< script type = "text/javascript" src = "spinbtn/JQuerySpinBtn.js" > < / script >
< 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 >
2009-11-05 21:25:33 +00:00
<!-- <script type="text/javascript" src="../../../svg - icon - loader/jquery.svgicons.js"></script> -->
2009-10-30 19:40:38 +00:00
< script type = "text/javascript" src = "http://svg-icon-loader.googlecode.com/svn/trunk/jquery.svgicons.js" > < / script >
2009-10-27 20:22:28 +00:00
< style >
2009-11-04 21:00:21 +00:00
#svg_editor .tool_button,
#svg_editor #tools_rect .tool_flyout_button,
#svg_editor #tools_ellipse .tool_flyout_button {
padding: 2px;
2009-10-27 20:22:28 +00:00
width: 24px;
height: 24px;
}
2009-11-05 21:25:33 +00:00
#svg_editor .tool_sep {
width: 1px;
background: #888;
background-image: none;
border-left: 1px outset #EEE;
margin: 2px 3px;
padding: 0;
height: 24px;
}
2009-10-30 19:39:33 +00:00
#layerbuttons {
overflow: auto;
}
2009-11-05 21:25:33 +00:00
#svg_editor #layerlist td.layervis {
background: none;
}
#layerlist td.layervis .svg_icon {
display: block;
}
#layerlist td.layerinvis .svg_icon {
display: none;
}
2009-10-30 19:39:33 +00:00
.layer_button {
display: block;
float: left;
margin-right: 3px;
}
2009-10-27 20:22:28 +00:00
.flyout_arrow_horiz {
margin-top: -3px;
}
2009-10-30 19:39:33 +00:00
#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;
}
2009-11-04 21:00:21 +00:00
#svg_editor #tool_square,
#svg_editor #tool_rect,
#svg_editor #tool_fhrect,
#svg_editor #tool_circle,
#svg_editor #tool_ellipse,
#svg_editor #tool_fhellipse {
background: none;
}
2009-10-27 20:22:28 +00:00
< / style >
< script >
2009-11-04 21:00:21 +00:00
/*
TODO for SVG icons:
- Make alignment SVG icons
2009-11-05 21:25:33 +00:00
- Make. "open" SVG icon
- Convert source-view icons
2009-11-04 21:00:21 +00:00
- Other sizing tweaks
2009-11-05 21:25:33 +00:00
- Make layer icons bigger for l and xl (not s)
2009-11-04 21:00:21 +00:00
2009-11-05 21:25:33 +00:00
- Make layer eye SVG icon work when making new layers
- Make transparency icon clone to fill/stroke box when clicked
2009-11-04 21:00:21 +00:00
*/
2009-10-27 20:22:28 +00:00
$(function() {
2009-11-05 21:25:33 +00:00
$.svgIcons('images/svg_edit_icons.svgz', {
2009-10-27 20:22:28 +00:00
w:24, h:24,
id_match: false,
2009-11-05 21:25:33 +00:00
no_img: true,
2009-10-27 20:22:28 +00:00
fallback_path:'images/',
fallback:{
'new_image':'clear.png',
'save':'save.png',
'source':'source.png',
'docprops':'document-properties.png',
'wireframe':'wireframe.png',
'undo':'undo.png',
'redo':'redo.png',
'select':'select.png',
'pencil':'fhpath.png',
'pen':'line.png',
'square':'square.png',
2009-11-04 21:00:21 +00:00
'rect':'rect.png',
'fh_rect':'freehand-square.png',
2009-10-27 20:22:28 +00:00
'circle':'circle.png',
2009-11-04 21:00:21 +00:00
'ellipse':'ellipse.png',
'fh_ellipse':'freehand-circle.png',
'path':'path.png',
2009-10-27 20:22:28 +00:00
'text':'text.png',
'image':'image.png',
'zoom':'zoom.png',
2009-10-29 19:43:34 +00:00
'clone':'clone.png',
2009-10-30 19:39:33 +00:00
'delete':'delete.png',
2009-11-04 21:00:21 +00:00
'group':'shape_group.png',
'ungroup':'shape_ungroup.png',
'move_top':'move_top.png',
'move_bottom':'move_bottom.png',
'go_up':'go-up.png',
'go_down':'go-down.png',
2009-10-29 19:43:34 +00:00
2009-11-04 21:00:21 +00:00
'arrow_right':'flyouth.png',
'arrow_down':'dropdown.gif'
2009-10-27 20:22:28 +00:00
},
placement: {
2009-11-05 21:25:33 +00:00
'#logo a':'logo',
2009-10-30 19:39:33 +00:00
'#tool_clear,#layer_new':'new_image',
2009-10-27 20:22:28 +00:00
'#tool_save':'save',
'#tool_source':'source',
'#tool_docprops':'docprops',
'#tool_wireframe':'wireframe',
'#tool_undo':'undo',
'#tool_redo':'redo',
'#tool_select':'select',
'#tool_fhpath':'pencil',
'#tool_line':'pen',
2009-11-04 21:00:21 +00:00
'#tool_square,#tools_rect_show':'square',
'#tool_rect':'rect',
'#tool_fhrect':'fh_rect',
'#tool_circle,#tools_ellipse_show':'circle',
'#tool_ellipse':'ellipse',
'#tool_fhellipse':'fh_ellipse',
2009-10-27 20:22:28 +00:00
'#tool_path':'path',
2009-10-30 19:39:33 +00:00
'#tool_text,#layer_rename':'text',
2009-10-27 20:22:28 +00:00
'#tool_image':'image',
'#tool_zoom':'zoom',
2009-10-29 19:43:34 +00:00
'#tool_clone,#tool_clone_multi,#tool_node_clone':'clone',
2009-10-30 19:39:33 +00:00
'#layer_delete,#tool_delete,#tool_delete_multi,#tool_node_delete':'delete',
'#tool_move_top':'move_top',
'#tool_move_bottom':'move_bottom',
2009-11-04 21:00:21 +00:00
'#tool_group':'group',
'#tool_ungroup':'ungroup',
2009-10-29 19:43:34 +00:00
2009-10-30 19:39:33 +00:00
'#layer_up':'go_up',
'#layer_down':'go_down',
2009-11-05 21:25:33 +00:00
'#layerlist td.layervis':'eye',
2009-10-30 19:39:33 +00:00
'.flyout_arrow_horiz':'arrow_right',
2009-11-05 21:25:33 +00:00
'.dropdown button':'arrow_down',
'#palette .palette_item:first':'no_color'
2009-10-27 20:22:28 +00:00
},
2009-10-30 19:39:33 +00:00
resize: {
2009-11-05 21:25:33 +00:00
'#logo .svg_icon': 32,
2009-10-30 19:39:33 +00:00
'.flyout_arrow_horiz .svg_icon': 5,
2009-11-05 21:25:33 +00:00
'.layer_button .svg_icon, #layerlist td.layervis .svg_icon': 14,
'.dropdown button .svg_icon': 7,
'#palette .svg_icon': 16
},
callback: function(icons) {
var tleft = $('#tools_left')
var min_height = tleft.offset().top + tleft.outerHeight();
if($(window).height() < min_height ) {
// Make smaller
$('#iconsize').val('s').change()
}
2009-10-30 19:39:33 +00:00
}
});
2009-11-04 21:00:21 +00:00
/* Unchanged, just here because they're private methods */
var flyoutspeed = 1250;
var toolButtonClick = function(button, fadeFlyouts) {
if ($(button).hasClass('tool_button_disabled')) return false;
var fadeFlyouts = fadeFlyouts || 'normal';
$('.tools_flyout').fadeOut(fadeFlyouts);
$('#styleoverrides').text('');
$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
$(button).addClass('tool_button_current');
// when a tool is selected, we should deselect any currently selected elements
svgCanvas.clearSelection();
return true;
};
// New function to add
var setIcon = function(holder_sel, id) {
var icon = $.getSvgIcon(id).clone();
var holder = $(holder_sel);
icon[0].setAttribute('width',holder.width());
icon[0].setAttribute('height',holder.height());
holder.empty().append(icon);
}
2009-11-05 21:25:33 +00:00
$('#palette .palette_item:first').css('background','none');
2009-11-04 21:00:21 +00:00
// Change in last line of each of these.
var clickSquare = function(){
if (toolButtonClick('#tools_rect_show', flyoutspeed)) {
flyoutspeed = 'normal';
svgCanvas.setMode('square');
}
setIcon('#tools_rect_show','square');
};
var clickRect = function(){
if (toolButtonClick('#tools_rect_show')) {
svgCanvas.setMode('rect');
}
setIcon('#tools_rect_show','rect');
};
var clickFHRect = function(){
if (toolButtonClick('#tools_rect_show')) {
svgCanvas.setMode('fhrect');
}
setIcon('#tools_rect_show','fh_rect');
};
var clickCircle = function(){
if (toolButtonClick('#tools_ellipse_show', flyoutspeed)) {
flyoutspeed = 'normal';
svgCanvas.setMode('circle');
}
setIcon('#tools_ellipse_show','circle');
};
var clickEllipse = function(){
if (toolButtonClick('#tools_ellipse_show')) {
svgCanvas.setMode('ellipse');
}
setIcon('#tools_ellipse_show','ellipse');
};
var clickFHEllipse = function(){
if (toolButtonClick('#tools_ellipse_show')) {
svgCanvas.setMode('fhellipse');
}
setIcon('#tools_ellipse_show','fh_ellipse');
};
// Bind replacements (no need to move over)
$('#tool_square').unbind('mouseup').mouseup(clickSquare);
$('#tool_rect').unbind('mouseup').mouseup(clickRect);
$('#tool_fhrect').unbind('mouseup').mouseup(clickFHRect);
$('#tool_circle').unbind('mouseup').mouseup(clickCircle);
$('#tool_ellipse').unbind('mouseup').mouseup(clickEllipse);
$('#tool_fhellipse').unbind('mouseup').mouseup(clickFHEllipse);
// This should only occur on docprops "OK", not immediately
2009-10-30 19:39:33 +00:00
$('#iconsize').change(function() {
2009-11-04 16:48:33 +00:00
var size = this.value;
2009-11-04 21:00:21 +00:00
var icon_sizes = { s:16, m:24, l:32, xl:48 };
2009-10-30 19:39:33 +00:00
2009-11-04 16:48:33 +00:00
// Change icon size
2009-11-04 21:00:21 +00:00
$('.tool_button, .push_button, .tool_button_current, .tool_button_disabled, .tool_flyout_button')
2009-10-30 19:39:33 +00:00
.find('.svg_icon').each(function() {
2009-11-04 16:48:33 +00:00
this.setAttribute('width',icon_sizes[size]);
this.setAttribute('height',icon_sizes[size]);
2009-10-30 19:39:33 +00:00
});
2009-11-04 16:48:33 +00:00
2009-11-05 21:25:33 +00:00
$.resizeSvgIcons({
'.flyout_arrow_horiz .svg_icon': icon_sizes[size] / 3,
'#logo .svg_icon': icon_sizes[size] * 1.3
2009-11-04 21:00:21 +00:00
});
2009-11-04 16:48:33 +00:00
// Note that all rules will be prefixed with '#svg_editor' when parsed
var cssResizeRules = {
".tool_button,\
.push_button,\
.tool_button_current,\
2009-11-04 21:00:21 +00:00
.tool_button_disabled,\
#tools_rect .tool_flyout_button,\
#tools_ellipse .tool_flyout_button": {
2009-11-04 16:48:33 +00:00
'width': {s: '16px', l: '32px', xl: '48px'},
'height': {s: '16px', l: '32px', xl: '48px'},
'padding': {s: '1px', l: '2px', xl: '3px'}
},
".tool_sep": {
2009-11-05 21:25:33 +00:00
'height': {s: '16px', l: '32px', xl: '48px'},
'margin': {s: '2px 2px', l: '2px 5px', xl: '2px 8px'}
},
"#tools_top": {
'left': {s: '27px', l: '50px', xl: '70px'}
2009-11-04 16:48:33 +00:00
},
"#tools_left": {
'width': {s: '26px', l: '34px', xl: '42px'},
'top': {s: '50px', l: '87px', xl: '125px'}
},
"div#workarea": {
'left': {s: '27px', l: '46px', xl: '65px'},
2009-11-04 21:00:21 +00:00
'top': {s: '50px', l: '88px', xl: '125px'},
'bottom': {s: '50px', l: '60px', xl: '65px'}
2009-11-04 16:48:33 +00:00
},
"#tools_bottom": {
2009-11-05 21:25:33 +00:00
'left': {s: '50px', l: '56', xl: '65px'},
'height': {s: '50px', l: '56', xl: '65px'}
2009-11-04 16:48:33 +00:00
},
2009-11-04 21:00:21 +00:00
"#tools_top input, #tools_bottom input": {
2009-11-04 16:48:33 +00:00
'margin-top': {s: '2px', l: '4px', xl: '5px'},
'height': {s: '12px', l: '29px', xl: '45px'},
'border': {s: '1px solid #555', l: 'auto', xl: 'auto'},
'font-size': {s: '.9em', l: '1.7em', xl: '2.5em'}
},
2009-11-04 21:00:21 +00:00
"#tools_bottom input": {
'margin-top': {s: '6px', l: '4px', xl: '5px'},
},
2009-11-04 16:48:33 +00:00
"#tools_top > div, #tools_top": {
'line-height': {s: '17px', l: '34px', xl: '50px'}
},
2009-11-04 21:00:21 +00:00
".dropdown button": {
2009-11-04 16:48:33 +00:00
'height': {s: '18px', l: '34px', xl: '50px'}
},
2009-11-04 21:00:21 +00:00
"#tools_top label, #tools_bottom label": {
2009-11-04 16:48:33 +00:00
'font-size': {s: '1em', l: '1.5em', xl: '2em'},
'margin-top': {s: '1px', l: '3px', xl: '5px'}
},
"#tool_bold, #tool_italic": {
'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}
},
"#sidepanels": {
2009-11-04 21:00:21 +00:00
'top': {s: '50px', l: '88px', xl: '125px'},
2009-11-05 21:25:33 +00:00
'bottom': {s: '50px', l: '58px', xl: '65px'},
2009-11-04 21:00:21 +00:00
},
".flyout_arrow_horiz": {
'left': {s: '-5px', l: '5px', xl: '14px'},
'top': {s: '-13px', l: '-13px', xl: '-20px'}
2009-11-05 21:25:33 +00:00
},
"input.spin-button": {
'background-image': {l: "url('images/spinbtn_updn_big.png')", xl: "url('images/spinbtn_updn_big.png')"},
'background-position': {l: '100% -3px', xl: '100% 4px'}
},
"input.spin-button.up": {
'background-position': {l: '100% -43px', xl: '100% -36px'}
},
"input.spin-button.down": {
'background-position': {l: '100% -83px', xl: '100% -76px'}
2009-11-04 16:48:33 +00:00
}
};
var rule_elem = $('#tool_size_rules');
if(!rule_elem.length) {
rule_elem = $('< style id = "tool_size_rules" > < \ / s t y l e > ' ) . a p p e n d T o ( ' h e a d ' ) ;
} else {
rule_elem.empty();
}
if(size != 'm') {
var style_str = '';
$.each(cssResizeRules, function(selector, rules) {
selector = '#svg_editor ' + selector.replace(/,/g,', #svg_editor');
style_str += selector + '{';
$.each(rules, function(prop, values) {
2009-11-05 21:25:33 +00:00
if(values[size]) {
style_str += (prop + ':' + values[size] + ';');
}
2009-11-04 16:48:33 +00:00
});
style_str += '}';
});
rule_elem.text(style_str);
}
2009-11-04 21:00:21 +00:00
var pos = $('#tools_rect_show').offset();
$('#tools_rect').css({'left': pos.left, 'top': pos.top});
pos = $('#tools_ellipse_show').offset();
$('#tools_ellipse').css({'left': pos.left, 'top': pos.top});
2009-10-27 20:22:28 +00:00
});
2009-11-04 21:00:21 +00:00
// For quick testing
// window.setTimeout(function() {
2009-11-05 21:25:33 +00:00
// $('#iconsize').val('xl').change();
2009-11-04 21:00:21 +00:00
// },1000);
2009-10-27 20:22:28 +00:00
});
< / script >
<!-- Release version of script tags: >
< script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" > < / script >
< script type = "text/javascript" src = "js-hotkeys/jquery.hotkeys-0.7.9.js" > < / script >
< script type = "text/javascript" src = "jgraduate/jquery.jgraduate.min.js" > < / script >
< script type = "text/javascript" src = "spinbtn/JQuerySpinBtn.min.js" > < / script >
< script type = "text/javascript" src = "svgcanvas.min.js" > < / script >
< script type = "text/javascript" src = "svg-editor.min.js" > < / script >
script type="text/javascript" src="locale/locale.min.js">< / script-- >
<!-- always minified scripts -->
< script type = "text/javascript" src = "jquery-ui/jquery-ui-1.7.2.custom.min.js" > < / script >
< script type = "text/javascript" src = "jgraduate/jpicker-1.0.9.min.js" > < / script >
<!-- feeds -->
< link rel = "alternate" type = "application/atom+xml" title = "SVG-edit General Discussion" href = "http://groups.google.com/group/svg-edit/feed/atom_v1_0_msgs.xml" / >
< link rel = "alternate" type = "application/atom+xml" title = "SVG-edit Updates (Issues/Fixes/Commits)" href = "http://code.google.com/feeds/p/svg-edit/updates/basic" / >
<!-- Add script with custom handlers here -->
< title > SVG-edit demo (w/SVG icons)< / title >
< / head >
< body >
< div id = "svg_editor" >
< div id = "workarea" >
< style id = "styleoverrides" type = "text/css" media = "screen" scoped = "scoped" > < / style >
< div id = "svgcanvas" > < / div >
< / div >
< div id = "sidepanels" >
< div id = "layerpanel" >
< h3 id = "layersLable" > Layers< / h3 >
< fieldset id = "layerbuttons" >
2009-10-30 19:39:33 +00:00
< 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 >
2009-10-27 20:22:28 +00:00
< / fieldset >
< table id = "layerlist" >
< tr class = "layer" >
< td class = "layervis" > < / td >
< td class = "layername" > Layer 1< / td >
< / tr >
< / table >
< span id = "selLayerLabel" > Move elements to:< / span >
< select id = "selLayerNames" title = "Move selected elements to a different layer" disabled = "disabled" >
< option selected = "selected" value = "layer1" > Layer 1< / option >
< / select >
< / div >
< div id = "sidepanel_handle" onselectstart = "return false;" title = "Drag left/right to resize side panel [X]" > L a y e r s< / div >
< / div >
< div id = "logo" >
< a href = "http://svg-edit.googlecode.com/" target = "_blank" title = "SVG-edit Home Page" >
< / a >
< / div >
< div id = "tools_top" class = "tools_panel" >
<!-- File - like buttons: New, Save, Source -->
< div id = "file_panel" >
< div class = "push_button" id = "tool_clear" title = "New Image [N]" > < / div >
< img style = "display:none" class = "push_button" id = "tool_open" src = "images/open.png" title = "Open Image [O]" alt = "Open" / >
< div class = "push_button" id = "tool_save" title = "Save Image [S]" > < / div >
< div class = "push_button" id = "tool_docprops" title = "Document Properties [I]" > < / div >
< div class = "push_button" id = "tool_source" title = "Edit Source [U]" > < / div >
< div class = "tool_button" id = "tool_wireframe" title = "Wireframe Mode [F]" > < / div >
< / div >
<!-- History buttons -->
< div id = "history_panel" >
< div class = "tool_sep" > < / div >
< div class = "push_button tool_button_disabled" id = "tool_undo" title = "Undo [Z]" > < / div >
< div class = "push_button tool_button_disabled" id = "tool_redo" title = "Redo [Y]" > < / div >
< / div >
<!-- Buttons when a single element is selected -->
< div id = "selected_panel" >
2009-11-05 21:25:33 +00:00
< div class = "tool_sep" > < / div >
2009-10-29 19:43:34 +00:00
< div class = "push_button" id = "tool_clone" title = "Clone Element [C]" > < / div >
2009-10-30 19:39:33 +00:00
< div class = "push_button" id = "tool_delete" title = "Delete Element [Delete/Backspace]" > < / div >
2009-11-05 21:25:33 +00:00
< div class = "tool_sep" > < / div >
2009-10-30 19:39:33 +00:00
< 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 >
2009-11-05 21:25:33 +00:00
< div class = "tool_sep" > < / div >
2009-10-27 20:22:28 +00:00
< label id = "group_opacityLabel" class = "selected_tool" for = "group_opacity" > opac:< / label >
< input id = "group_opacity" class = "selected_tool" title = "Change selected item opacity" size = "3" value = "100" type = "text" / >
< div id = "opacity_dropdown" class = "dropdown" >
< button > < / button >
< ul >
< li class = "special" > < div id = "opac_slider" > < / div > < / li >
< li > 100% (no transparency)< / li >
< li > 0%< / li >
< li > 25%< / li >
< li > 50%< / li >
< li > 75%< / li >
< li > 100%< / li >
< / ul >
< / div >
< label id = "angleLabel" class = "selected_tool" > angle:< / label >
< input id = "angle" class = "selected_tool" title = "Change rotation angle" size = "2" value = "0" type = "text" / >
< / div >
<!-- Buttons when multiple elements are selected -->
< div id = "multiselected_panel" >
2009-11-05 21:25:33 +00:00
< div class = "tool_sep" > < / div >
2009-10-29 19:43:34 +00:00
< div class = "push_button" id = "tool_clone_multi" title = "Clone Elements [C]" > < / div >
2009-10-30 19:39:33 +00:00
< div class = "push_button" id = "tool_delete_multi" title = "Delete Selected Elements [Delete/Backspace]" > < / div >
2009-11-05 21:25:33 +00:00
< div class = "tool_sep" > < / div >
2009-11-04 21:00:21 +00:00
< div class = "push_button" id = "tool_group" title = "Group Elements [G]" > < / div >
2009-10-27 20:22:28 +00:00
< div class = "push_button" id = "tool_alignleft" title = "Align Left" > < / div >
< div class = "push_button" id = "tool_aligncenter" title = "Align Center" > < / div >
< div class = "push_button" id = "tool_alignright" title = "Align Right" > < / div >
< div class = "push_button" id = "tool_aligntop" title = "Align Top" > < / div >
< div class = "push_button" id = "tool_alignmiddle" title = "Align Middle" > < / div >
< div class = "push_button" id = "tool_alignbottom" title = "Align Bottom" > < / div >
< span id = "relativeToLabel" class = "selected_tool" > relative to:< / span >
< select id = "align_relative_to" class = "selected_tool" title = "Align relative to ..." >
< option id = "selected_objects" value = "selected" > selected objects< / option >
< option id = "largest_object" value = "largest" > largest object< / option >
< option id = "smallest_object" value = "smallest" > smallest object< / option >
< option id = "page" value = "page" > page< / option >
< / select >
2009-11-05 21:25:33 +00:00
< div class = "tool_sep" > < / div >
2009-10-27 20:22:28 +00:00
< / div >
< div id = "g_panel" >
2009-11-05 21:25:33 +00:00
< div class = "tool_sep" > < / div >
2009-11-04 21:00:21 +00:00
< div class = "push_button" id = "tool_ungroup" title = "Ungroup Elements [G]" > < / div >
2009-10-27 20:22:28 +00:00
< / div >
< div id = "rect_panel" >
2009-11-05 21:25:33 +00:00
< div class = "tool_sep" > < / div >
2009-10-27 20:22:28 +00:00
< label class = "rect_tool" > x:< / label >
< input id = "rect_x" class = "rect_tool attr_changer" title = "Change rectangle X coordinate" size = "3" data-attr = "x" / >
< label class = "rect_tool" > y:< / label >
< input id = "rect_y" class = "rect_tool attr_changer" title = "Change rectangle Y coordinate" size = "3" data-attr = "y" / >
< label id = "rwidthLabel" class = "rect_tool" > width:< / label >
< input id = "rect_width" class = "rect_tool attr_changer" title = "Change rectangle width" size = "3" data-attr = "width" / >
< label id = "rheightLabel" class = "rect_tool" > height:< / label >
< input id = "rect_height" class = "rect_tool attr_changer" title = "Change rectangle height" size = "3" data-attr = "height" / >
< label id = "cornerRadiusLabel" class = "rect_tool" > Corner Radius:< / label >
< input id = "rect_rx" size = "3" value = "0" class = "rect_tool" type = "text" title = "Change Rectangle Corner Radius" data-attr = "Corner Radius" / >
< / div >
< div id = "image_panel" >
2009-11-05 21:25:33 +00:00
< div class = "tool_sep" > < / div >
2009-10-27 20:22:28 +00:00
< label class = "image_tool" > x:< / label >
< input id = "image_x" class = "image_tool attr_changer" title = "Change image X coordinate" size = "3" data-attr = "x" / >
< label class = "image_tool" > y:< / label >
< input id = "image_y" class = "image_tool attr_changer" title = "Change image Y coordinate" size = "3" data-attr = "y" / >
< label id = "iwidthLabel" class = "image_tool" > width:< / label >
< input id = "image_width" class = "image_tool attr_changer" title = "Change image width" size = "3" data-attr = "width" / >
< label id = "iheightLabel" class = "image_tool" > height:< / label >
< input id = "image_height" class = "image_tool attr_changer" title = "Change image height" size = "3" data-attr = "height" / >
< label class = "image_tool" > url:< / label >
< input id = "image_url" class = "image_tool" type = "text" title = "Change URL" size = "35" / >
< / div >
< div id = "circle_panel" >
2009-11-05 21:25:33 +00:00
< div class = "tool_sep" > < / div >
2009-10-27 20:22:28 +00:00
< label class = "circle_tool" > cx:< / label >
< input id = "circle_cx" class = "circle_tool attr_changer" title = "Change circle's cx coordinate" size = "3" data-attr = "cx" / >
< label class = "circle_tool" > cy:< / label >
< input id = "circle_cy" class = "circle_tool attr_changer" title = "Change circle's cy coordinate" size = "3" data-attr = "cy" / >
< label class = "circle_tool" > r:< / label >
< input id = "circle_r" class = "circle_tool attr_changer" title = "Change circle's radius" size = "3" data-attr = "r" / >
< / div >
< div id = "ellipse_panel" >
2009-11-05 21:25:33 +00:00
< div class = "tool_sep" > < / div >
2009-10-27 20:22:28 +00:00
< label class = "ellipse_tool" > cx:< / label >
< input id = "ellipse_cx" class = "ellipse_tool attr_changer" title = "Change ellipse's cx coordinate" size = "3" data-attr = "cx" / >
< label class = "ellipse_tool" > cy:< / label >
< input id = "ellipse_cy" class = "ellipse_tool attr_changer" title = "Change ellipse's cy coordinate" size = "3" data-attr = "cy" / >
< label class = "ellipse_tool" > rx:< / label >
< input id = "ellipse_rx" class = "ellipse_tool attr_changer" title = "Change ellipse's x radius" size = "3" data-attr = "rx" / >
< label class = "ellipse_tool" > ry:< / label >
< input id = "ellipse_ry" class = "ellipse_tool attr_changer" title = "Change ellipse's y radius" size = "3" data-attr = "ry" / >
< / div >
< div id = "line_panel" >
2009-11-05 21:25:33 +00:00
< div class = "tool_sep" > < / div >
2009-10-27 20:22:28 +00:00
< label class = "line_tool" > x1:< / label >
< input id = "line_x1" class = "line_tool attr_changer" title = "Change line's starting x coordinate" size = "3" data-attr = "x1" / >
< label class = "line_tool" > y1:< / label >
< input id = "line_y1" class = "line_tool attr_changer" title = "Change line's starting y coordinate" size = "3" data-attr = "y1" / >
< label class = "line_tool" > x2:< / label >
< input id = "line_x2" class = "line_tool attr_changer" title = "Change line's ending x coordinate" size = "3" data-attr = "x2" / >
< label class = "line_tool" > y2:< / label >
< input id = "line_y2" class = "line_tool attr_changer" title = "Change line's ending y coordinate" size = "3" data-attr = "y2" / >
< / div >
< div id = "text_panel" >
2009-11-05 21:25:33 +00:00
< div class = "tool_sep" > < / div >
2009-10-27 20:22:28 +00:00
< label class = "text_tool" > x:< / label >
< 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" / >
2009-10-30 19:39:33 +00:00
< 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 >
2009-10-27 20:22:28 +00:00
< 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 >
< option value = "cursive" > cursive< / option >
< option value = "fantasy" > fantasy< / option >
< option value = "monospace" > monospace< / option >
< / select >
< label id = "font_sizeLabel" class = "text_tool" for = "font_size" > size:< / label >
< input id = "font_size" class = "text_tool" title = "Change Font Size" size = "3" value = "0" type = "text" / >
< input id = "text" class = "text_tool" type = "text" title = "Change text contents" size = "35" / >
< / div >
< div id = "path_node_panel" >
2009-11-05 21:25:33 +00:00
< div class = "tool_sep" > < / div >
2009-10-27 20:22:28 +00:00
< label class = "path_node_tool" > x:< / label >
< input id = "path_node_x" class = "path_node_tool attr_changer" title = "Change node's x coordinate" size = "3" data-attr = "x" / >
< label class = "path_node_tool" > y:< / label >
< input id = "path_node_y" class = "path_node_tool attr_changer" title = "Change node's y coordinate" size = "3" data-attr = "y" / >
< select id = "seg_type" class = "path_node_tool" title = "Change Segment type" >
< option id = "straight_segments" selected = "selected" value = "4" > Straight< / option >
< option id = "curve_segments" value = "6" > Curve< / option >
< / select >
2009-10-29 19:43:34 +00:00
< div class = "tool_button" id = "tool_node_clone" title = "Clone Node" > < / div >
2009-10-30 19:39:33 +00:00
< div class = "tool_button" id = "tool_node_delete" title = "Delete Node" > < / div >
2009-10-27 20:22:28 +00:00
< / div >
< / div > <!-- tools_top -->
< div id = "tools_left" class = "tools_panel" >
< div class = "tool_button_current" id = "tool_select" title = "Select Tool [1]" > < / div >
< div class = "tool_button" id = "tool_fhpath" title = "Pencil Tool [2]" > < / div >
< div class = "tool_button" id = "tool_line" title = "Line Tool [3]" > < / div >
< div class = "tool_button" id = "tools_rect_show" title = "Square/Rect Tool [4/Shift+4]" > < / div >
< div class = "flyout_arrow_horiz" > < / div >
< div class = "tool_button" id = "tools_ellipse_show" title = "Ellipse/Circle Tool [5/Shift+5]" > < / div >
< div class = "flyout_arrow_horiz" > < / div >
< div class = "tool_button" id = "tool_path" title = "Path Tool [7]" > < / div >
< div class = "tool_button" id = "tool_text" title = "Text Tool [6]" > < / div >
< div class = "tool_button" id = "tool_image" title = "Image Tool [8]" > < / div >
< div class = "tool_button" id = "tool_zoom" title = "Zoom Tool [Ctrl+Up/Down]" > < / div >
< / div > <!-- tools_left -->
< div id = "tools_bottom" class = "tools_panel" >
<!-- Zoom buttons -->
< div id = "zoom_panel" class = "magic_field" >
< span id = "zoomLabel" class = "zoom_tool" > zoom:< / span >
< input id = "zoom" class = "zoom_tool" title = "Change zoom level" size = "3" value = "100" type = "text" / >
< div id = "zoom_dropdown" class = "dropdown" >
< button > < / button >
< ul >
< li > 100%< / li >
< li id = "fit_to_all" data-val = "content" > Fit to all content< / li >
< li id = "fit_to_layer_content" data-val = "layer" > Fit to layer content< / li >
< li id = "fit_to_sel" data-val = "selection" > Fit to selection< / li >
< li id = "fit_to_canvas" data-val = "canvas" > Fit to canvas< / li >
< li > 25%< / li >
< li > 50%< / li >
< li > 100%< / li >
< li > 200%< / li >
< li > 400%< / li >
< li > 1000%< / li >
< / ul >
< / div >
2009-11-05 21:25:33 +00:00
< div class = "tool_sep" > < / div >
2009-10-27 20:22:28 +00:00
< / div >
< div id = "tools_bottom_2" >
< table >
< tr >
< td id = "fill_tool_bottom" > fill:< / td >
< td > < div id = "fill_color" class = "color_block" title = "Change fill color" > < / div > < / td >
< td colspan = "3" > < div id = "fill_opacity" > 100%< / div > < / td >
< / tr > < tr >
< td id = "stroke_tool_bottom" > stroke:< / td >
< td > < div id = "stroke_color" class = "color_block" title = "Change stroke color" > < / div > < / td >
< td > < div id = "stroke_opacity" > 100 %< / div > < / td >
< td >
< input id = "stroke_width" title = "Change stroke width" size = "2" value = "5" type = "text" data-attr = "Stroke Width" / >
< / td >
< td >
< select id = "stroke_style" 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 >
< / td >
< / tr >
< / table >
< / div >
< div id = "tools_bottom_3" >
< div id = "palette_holder" > < div id = "palette" title = "Click to change fill color, shift-click to change stroke color" > < / div > < / div >
< / div >
< div id = "copyright" > Powered by < a href = "http://svg-edit.googlecode.com/" target = "_blank" > SVG-edit v2.4-alpha< / a > < / div >
< / div >
<!-- hidden divs -->
< div id = "color_picker" > < / div >
< div id = "tools_rect" class = "tools_flyout" >
< div id = "tool_square" class = "tool_flyout_button" title = "Square" > < / div >
< div id = "tool_rect" class = "tool_flyout_button" title = "Rectangle" > < / div >
< div id = "tool_fhrect" class = "tool_flyout_button" title = "Free-Hand Rectangle" > < / div >
< / div >
< div id = "tools_ellipse" class = "tools_flyout" >
< div id = "tool_circle" class = "tool_flyout_button" title = "Circle" > < / div >
< div id = "tool_ellipse" class = "tool_flyout_button" title = "Ellipse" > < / div >
< div id = "tool_fhellipse" class = "tool_flyout_button" title = "Free-Hand Ellipse" > < / div >
< / div >
< / div > <!-- svg_editor -->
< div id = "svg_source_editor" >
< div id = "svg_source_overlay" > < / div >
< div id = "svg_source_container" >
< div id = "tool_source_back" class = "toolbar_button" >
< button id = "tool_source_save" > Apply Changes< / button >
< button id = "tool_source_cancel" > Cancel< / button >
< / div >
< form >
< textarea id = "svg_source_textarea" spellcheck = "false" > < / textarea >
< / form >
< / div >
< / div >
< div id = "svg_docprops" >
< div id = "svg_docprops_overlay" > < / div >
< div id = "svg_docprops_container" >
< div id = "tool_docprops_back" class = "toolbar_button" >
2009-10-29 19:43:34 +00:00
< button id = "tool_docprops_save" > OK< / button >
2009-10-27 20:22:28 +00:00
< button id = "tool_docprops_cancel" > Cancel< / button >
< label > < span id = "svginfo_title" > Image title:< / span > < input type = "text" id = "canvas_title" size = "24" > < / label >
< fieldset id = "change_background" >
< legend id = "svginfo_change_background" > Editor Background< / legend >
< div id = "bg_blocks" > < / div >
< label > < span id = "svginfo_bg_url" > URL:< / span > < input type = "text" id = "canvas_bg_url" size = "17" > < / label >
< / fieldset >
< fieldset id = "change_resolution" >
< legend id = "svginfo_dim" > Canvas Dimensions< / legend >
< label > < span id = "svginfo_width" > Width:< / span > < input type = "text" id = "canvas_width" size = "6" > < / label >
< label > < span id = "svginfo_height" > Height:< / span > < input type = "text" id = "canvas_height" size = "6" > < / label >
< label >
< select id = "resolution" >
< option id = "selectedPredefined" selected = "selected" > Select predefined:< / option >
< option > 640x480< / option >
< option > 800x600< / option >
< option > 1024x768< / option >
< option > 1280x960< / option >
< option > 1600x1200< / option >
< option id = "fitToContent" value = "content" > Fit to Content< / option >
< / select >
< / label >
2009-10-30 19:39:33 +00:00
< / 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 >
2009-11-04 16:48:33 +00:00
< option id = "icon_xlarge" value = "xl" > Extra Large< / option >
2009-10-30 19:39:33 +00:00
< / select >
2009-10-27 20:22:28 +00:00
< / fieldset >
< / div >
< / div >
< / div >
< / body >
< / html >
