2012-05-17 22:50:00 +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" / >
2012-07-17 18:37:08 +00:00
<!-- {if svg_edit_release}>
2012-06-23 19:40:40 +00:00
< link rel = "stylesheet" href = "svgedit.compiled.css" type = "text/css" / >
<!{else}-->
2012-07-14 06:09:23 +00:00
< link rel = "stylesheet" href = "fonts.css" type = "text/css" / >
2012-06-23 19:40:40 +00:00
< link rel = "stylesheet" href = "jgraduate/css/jPicker.css" type = "text/css" / >
< link rel = "stylesheet" href = "jgraduate/css/jgraduate.css" type = "text/css" / >
< link rel = "stylesheet" href = "svg-editor.css" type = "text/css" / >
< link rel = "stylesheet" href = "spinbtn/JQuerySpinBtn.css" type = "text/css" / >
2012-07-17 18:56:06 +00:00
<!-- {endif} -->
2012-06-23 19:40:40 +00:00
< meta name = "viewport" content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" / >
< meta name = "apple-mobile-web-app-capable" content = "yes" / >
2012-05-17 22:50:00 +00:00
2012-07-17 18:56:06 +00:00
< script type = "text/javascript" src = "/assets/jquery.js" > < / script >
2012-05-17 22:50:00 +00:00
<!-- {if svg_edit_release}>
< script type = "text/javascript" src = "svgedit.compiled.js" > < / script >
<!{else}-->
2012-06-23 19:40:40 +00:00
< script type = "text/javascript" src = "js-hotkeys/jquery.hotkeys.min.js" > < / script >
< script type = "text/javascript" src = "jquerybbq/jquery.bbq.min.js" > < / script >
< script type = "text/javascript" src = "svgicons/jquery.svgicons.js" > < / script >
2012-07-24 02:30:12 +00:00
< script type = "text/javascript" src = "jgraduate/jquery.jgraduate.js" > < / script >
2012-06-23 19:40:40 +00:00
< script type = "text/javascript" src = "touch.js" > < / script >
2012-05-17 22:50:00 +00:00
< script type = "text/javascript" src = "contextmenu/jquery.contextMenu.js" > < / script >
< script type = "text/javascript" src = "browser.js" > < / script >
< script type = "text/javascript" src = "svgtransformlist.js" > < / script >
< script type = "text/javascript" src = "math.js" > < / script >
< script type = "text/javascript" src = "units.js" > < / script >
< script type = "text/javascript" src = "svgutils.js" > < / script >
< script type = "text/javascript" src = "sanitize.js" > < / script >
< script type = "text/javascript" src = "history.js" > < / script >
< script type = "text/javascript" src = "select.js" > < / script >
2012-07-19 14:54:50 +00:00
< script type = "text/javascript" src = "hover.js" > < / script >
2012-05-17 22:50:00 +00:00
< script type = "text/javascript" src = "draw.js" > < / script >
< script type = "text/javascript" src = "path.js" > < / script >
< script type = "text/javascript" src = "svgcanvas.js" > < / script >
< script type = "text/javascript" src = "svg-editor.js" > < / script >
2012-07-24 02:30:12 +00:00
< script type = "text/javascript" src = "jquery-draginput.js" > < / script >
2012-05-17 22:50:00 +00:00
< script type = "text/javascript" src = "contextmenu.js" > < / script >
2012-06-23 19:40:40 +00:00
< script type = "text/javascript" src = "jquery-ui/jquery-ui-1.8.17.custom.min.js" > < / script >
< script type = "text/javascript" src = "jgraduate/jpicker.min.js" > < / script >
2012-07-04 14:42:50 +00:00
< script type = "text/javascript" src = "mousewheel.js" > < / script >
2012-07-19 14:54:50 +00:00
< script type = "text/javascript" src = "extensions/ext-eyedropper.js" > < / script >
2012-07-24 02:30:12 +00:00
< script type = "text/javascript" src = "extensions/ext-shapes.js" > < / script >
< script type = "text/javascript" src = "extensions/ext-markers.js" > < / script >
< script type = "text/javascript" src = "requestanimationframe.js" > < / script >
2012-05-17 22:50:00 +00:00
<!-- {endif} -->
<!-- you can load extensions here -->
2012-06-17 14:41:39 +00:00
<!-- Font Loader Start
2012-06-12 01:31:43 +00:00
< script type = "text/javascript" src = "http://www.google.com/jsapi" > < / script >
< script type = "text/javascript" >
google.load("webfont", "1");
< / script >
< script type = "text/javascript" src = "font-selector/font-selector.js" > < / script >
< script >
$(function(){
Smm.init('tool_font_family');
});
2012-06-17 14:41:39 +00:00
< / script > -->
2012-05-17 22:50:00 +00:00
<!-- Add script with custom handlers here -->
2012-06-23 19:40:40 +00:00
< title > Method Draw< / title >
2012-05-17 22:50:00 +00:00
< / head >
< body >
< div id = "svg_editor" >
< div id = "rulers" >
< div id = "ruler_corner" > < / div >
< div id = "ruler_x" >
2012-06-13 01:26:24 +00:00
< div id = "ruler_x_cursor" > < / div >
2012-05-17 22:50:00 +00:00
< div >
< canvas height = "15" > < / canvas >
< / div >
< / div >
< div id = "ruler_y" >
2012-06-13 01:26:24 +00:00
< div id = "ruler_y_cursor" > < / div >
2012-05-17 22:50:00 +00:00
< div >
< canvas width = "15" > < / canvas >
< / div >
< / div >
< / div >
< div id = "workarea" >
< div id = "svgcanvas" style = "position:relative" >
< / div >
< / div >
2012-05-30 04:55:00 +00:00
< div id = "menu_bar" >
2012-06-12 01:31:43 +00:00
< a class = "menu" >
2012-07-24 02:30:12 +00:00
< div class = "menu_title" id = "logo" > < / div >
2012-06-12 01:31:43 +00:00
< div class = "menu_list" >
< div id = "tool_about" class = "menu_item" > About this Editor...< / div >
< / div >
< / a >
2012-05-30 04:55:00 +00:00
< div class = "menu" >
< div class = "menu_title" > File< / div >
< div class = "menu_list" id = "file_menu" >
2012-06-12 01:31:43 +00:00
< div id = "tool_clear" class = "menu_item" > New Image< / div >
2012-07-24 02:30:12 +00:00
< div id = "tool_open" class = "menu_item" > < div id = "fileinputs" > < / div > Place Image...< / div >
2012-06-12 01:31:43 +00:00
< div id = "tool_import" class = "menu_item" > < div id = "fileinputs_import" > < / div > Import SVG...< / div >
2012-07-13 16:06:05 +00:00
< div id = "tool_save" class = "menu_item" > Save Image... < span class = "shortcut" > ⌘S< / span > < / div >
2012-06-12 01:31:43 +00:00
< div id = "tool_export" class = "menu_item" > Export as PNG< / div >
2012-05-30 04:55:00 +00:00
< / div >
< / div >
2012-05-17 22:50:00 +00:00
2012-05-30 04:55:00 +00:00
< div class = "menu" >
< div class = "menu_title" > Edit< / div >
< div class = "menu_list" id = "edit_menu" >
2012-07-13 16:06:05 +00:00
< div class = "menu_item" id = "tool_undo" > Undo < span class = "shortcut" > ⌘Z< / span > < / div >
< div class = "menu_item" id = "tool_redo" > Redo < span class = "shortcut" > ⌘Y< / span > < / div >
2012-05-30 04:55:00 +00:00
< div class = "separator" > < / div >
2012-07-19 15:38:48 +00:00
< div class = "menu_item action_selected disabled" id = "tool_cut" > Cut < span class = "shortcut" > ⌘X< / span > < / div >
2012-07-13 16:06:05 +00:00
< div class = "menu_item action_selected disabled" id = "tool_copy" > Copy < span class = "shortcut" > ⌘C< / span > < / div >
< div class = "menu_item action_selected disabled" id = "tool_paste" > Paste < span class = "shortcut" > ⌘V< / span > < / div >
< div class = "menu_item action_selected disabled" id = "tool_clone" > Duplicate < span class = "shortcut" > ⌘D< / span > < / div >
2012-06-12 01:31:43 +00:00
< div class = "menu_item action_selected disabled" id = "tool_delete" > Delete < span > ⌫< / span > < / div >
2012-05-30 04:55:00 +00:00
< / div >
< / div >
< div class = "menu" >
< div class = "menu_title" > Object< / div >
< div class = "menu_list" id = "object_menu" >
2012-07-13 16:06:05 +00:00
< div class = "menu_item action_selected disabled" id = "tool_move_top" > Bring to Front < span class = "shortcut" > ⌘⇧↑ < / span > < / div >
< div class = "menu_item action_selected disabled" id = "tool_move_up" > Bring Forward < span class = "shortcut" > ⌘↑ < / span > < / div >
< div class = "menu_item action_selected disabled" id = "tool_move_down" > Send Backward < span class = "shortcut" > ⌘↓ < / span > < / div >
< div class = "menu_item action_selected disabled" id = "tool_move_bottom" > Send to Back < span class = "shortcut" > ⌘⇧↓ < / span > < / div >
2012-05-30 04:55:00 +00:00
< div class = "separator" > < / div >
2012-07-13 16:06:05 +00:00
< div class = "menu_item action_multi_selected disabled" id = "tool_group" > Group Elements < span class = "shortcut" > ⌘G< / span > < / div >
< div class = "menu_item action_group_selected disabled" id = "tool_ungroup" > Ungroup Elements < span class = "shortcut" > ⌘⇧G< / span > < / div >
2012-06-12 01:31:43 +00:00
< div class = "separator" > < / div >
2012-06-17 14:41:39 +00:00
< div class = "menu_item action_path_convert_selected disabled" id = "tool_topath" > Convert to Path< / div >
2012-06-12 01:31:43 +00:00
< div class = "menu_item action_path_selected disabled" id = "tool_reorient" > Reorient path< / div >
2012-05-30 04:55:00 +00:00
< / div >
< / div >
2012-05-17 22:50:00 +00:00
2012-05-30 04:55:00 +00:00
< div class = "menu" >
< div class = "menu_title" > View< / div >
< div class = "menu_list" id = "view_menu" >
< div class = "menu_item push_button_pressed" id = "tool_rulers" > View Rulers< / div >
< div class = "menu_item" id = "tool_wireframe" > View Wireframe< / div >
2012-07-19 14:54:50 +00:00
< div class = "menu_item" id = "tool_snap" > Snap to Grid< / div >
2012-05-30 04:55:00 +00:00
< div class = "separator" > < / div >
2012-07-13 16:06:05 +00:00
< div class = "menu_item" id = "tool_source" > Source... < span class = "shortcut" > ⌘U< / span > < / div >
2012-05-30 04:55:00 +00:00
< / div >
< / div >
2012-05-17 22:50:00 +00:00
2012-05-30 04:55:00 +00:00
< / div >
2012-05-17 22:50:00 +00:00
< div id = "tools_top" class = "tools_panel" >
2012-07-24 02:30:12 +00:00
< div id = "canvas_panel" class = "context_panel clearfix" >
2012-05-30 04:55:00 +00:00
2012-07-24 02:30:12 +00:00
< h4 class = "clearfix" > Canvas< / h4 >
< label data-title = "Change canvas width" >
< span class = "icon_label" > Width< / span >
< input size = "3" id = "canvas_width" type = "text" pattern = "[0-9]*" / >
< / label >
< label data-title = "Change canvas height" >
< span class = "icon_label" > Height< / span >
< input id = "canvas_height" size = "3" type = "text" pattern = "[0-9]*" / >
< / label >
2012-07-13 16:06:05 +00:00
2012-07-24 02:30:12 +00:00
< label data-title = "Change canvas color" class = "draginput" >
< 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 >
2012-07-13 23:40:28 +00:00
< / label >
2012-07-13 16:06:05 +00:00
2012-07-24 02:30:12 +00:00
< label class = "draginput" >
< span > Sizes< / span >
< select id = "resolution" >
< option id = "selectedPredefined" selected = "selected" > Custom< / 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 >
< div class = "caret" > < / div >
< label id = "resolution_label" > Custom< / label >
< / label >
2012-05-17 22:50:00 +00:00
< / div >
2012-05-30 04:55:00 +00:00
2012-07-18 01:03:31 +00:00
< div id = "rect_panel" class = "context_panel" >
2012-07-24 02:30:12 +00:00
< h4 class = "clearfix" > Rectangle< / h4 >
< label >
< span > X< / span >
< input id = "rect_x" class = "attr_changer" data-title = "Change X coordinate" size = "3" data-attr = "x" pattern = "[0-9]*" / >
< / label >
< label >
< span > Y< / span >
< input id = "rect_y" class = "attr_changer" data-title = "Change Y coordinate" size = "3" data-attr = "y" pattern = "[0-9]*" / >
< / label >
< label id = "rect_width_tool attr_changer" data-title = "Change rectangle width" >
< span class = "icon_label" > Width< / span >
< input id = "rect_width" class = "attr_changer" size = "3" data-attr = "width" type = "text" pattern = "[0-9]*" / >
< / label >
< label id = "rect_height_tool" data-title = "Change rectangle height" >
< span class = "icon_label" > Height< / span >
< input id = "rect_height" class = "attr_changer" size = "3" data-attr = "height" type = "text" pattern = "[0-9]*" / >
< / label >
< label id = "cornerRadiusLabel" data-title = "Change Rectangle Corner Radius" >
2012-05-30 04:55:00 +00:00
< span class = "icon_label" > Roundness< / span >
2012-07-24 02:30:12 +00:00
< input id = "rect_rx" size = "3" value = "0" data-attr = "rx" class = "attr_changer" type = "text" pattern = "[0-9]*" / >
2012-05-17 22:50:00 +00:00
< / label >
< / div >
2012-06-17 14:41:39 +00:00
2012-07-24 02:30:12 +00:00
< div id = "path_panel" class = "context_panel clearfix" >
< h4 class = "clearfix" > Path< / h4 >
< label > < span > X< / span >
< input id = "path_x" class = "attr_changer" data-title = "Change ellipse's cx coordinate" size = "3" data-attr = "x" pattern = "[0-9]*" / >
< / label >
< label > < span > Y< / span >
< input id = "path_y" class = "attr_changer" data-title = "Change ellipse's cy coordinate" size = "3" data-attr = "y" pattern = "[0-9]*" / >
< / label >
2012-06-17 14:41:39 +00:00
< / div >
2012-05-17 22:50:00 +00:00
2012-07-24 02:30:12 +00:00
< div id = "image_panel" class = "context_panel clearfix" >
2012-05-30 04:55:00 +00:00
< h4 > Image< / h4 >
2012-07-24 02:30:12 +00:00
< label >
< span > X< / span >
< input id = "image_x" class = "attr_changer" data-title = "Change X coordinate" size = "3" data-attr = "x" pattern = "[0-9]*" / >
2012-05-17 22:50:00 +00:00
< / label >
2012-07-24 02:30:12 +00:00
< label >
< span > Y< / span >
< input id = "image_y" class = "attr_changer" data-title = "Change Y coordinate" size = "3" data-attr = "y" pattern = "[0-9]*" / >
2012-05-17 22:50:00 +00:00
< / label >
2012-07-24 02:30:12 +00:00
< label > < span class = "icon_label" > Width< / span >
< input id = "image_width" class = "attr_changer" data-title = "Change image width" size = "3" data-attr = "width" pattern = "[0-9]*" / >
2012-05-17 22:50:00 +00:00
< / label >
2012-07-24 02:30:12 +00:00
< label >
< span class = "icon_label" > Height< / span >
< input id = "image_height" class = "attr_changer" data-title = "Change image height" size = "3" data-attr = "height" pattern = "[0-9]*" / >
2012-05-17 22:50:00 +00:00
< / label >
< / div >
2012-07-24 02:30:12 +00:00
< div id = "ellipse_panel" class = "context_panel clearfix" >
2012-05-30 04:55:00 +00:00
< h4 > Ellipse< / h4 >
2012-07-24 02:30:12 +00:00
< label id = "tool_ellipse_cx" > < span > X< / span >
< input id = "ellipse_cx" class = "attr_changer" data-title = "Change ellipse's cx coordinate" size = "3" data-attr = "cx" pattern = "[0-9]*" / >
< / label >
< label id = "tool_ellipse_cy" > < span > Y< / span >
< input id = "ellipse_cy" class = "attr_changer" data-title = "Change ellipse's cy coordinate" size = "3" data-attr = "cy" pattern = "[0-9]*" / >
< / label >
< label id = "tool_ellipse_rx" > < span > Radius X< / span >
< input id = "ellipse_rx" class = "attr_changer" data-title = "Change ellipse's x radius" size = "3" data-attr = "rx" pattern = "[0-9]*" / >
< / label >
< label id = "tool_ellipse_ry" > < span > Radius Y< / span >
< input id = "ellipse_ry" class = "attr_changer" data-title = "Change ellipse's y radius" size = "3" data-attr = "ry" pattern = "[0-9]*" / >
< / label >
2012-05-17 22:50:00 +00:00
< / div >
2012-07-24 02:30:12 +00:00
< div id = "line_panel" class = "context_panel clearfix" >
2012-05-30 04:55:00 +00:00
< h4 > Line< / h4 >
2012-07-24 02:30:12 +00:00
< label id = "tool_line_x1" > < span > Start X< / span >
< input id = "line_x1" class = "attr_changer" data-title = "Change line's starting x coordinate" size = "3" data-attr = "x1" pattern = "[0-9]*" / >
< / label >
< label id = "tool_line_y1" > < span > Start Y< / span >
< input id = "line_y1" class = "attr_changer" data-title = "Change line's starting y coordinate" size = "3" data-attr = "y1" pattern = "[0-9]*" / >
< / label >
< label id = "tool_line_x2" > < span > End X< / span >
< input id = "line_x2" class = "attr_changer" data-title = "Change line's ending x coordinate" size = "3" data-attr = "x2" pattern = "[0-9]*" / >
< / label >
< label id = "tool_line_y2" > < span > End Y< / span >
< input id = "line_y2" class = "attr_changer" data-title = "Change line's ending y coordinate" size = "3" data-attr = "y2" pattern = "[0-9]*" / >
< / label >
2012-05-17 22:50:00 +00:00
< / div >
2012-07-24 02:30:12 +00:00
< div id = "text_panel" class = "context_panel clearfix" >
2012-05-30 04:55:00 +00:00
< h4 > Text< / h4 >
2012-07-24 02:30:12 +00:00
< label > < span > X< / span >
< input id = "text_x" class = "attr_changer" data-title = "Change text x coordinate" size = "3" data-attr = "x" pattern = "[0-9]*" / >
< / label >
< label > < span > Y< / span >
< input id = "text_y" class = "attr_changer" data-title = "Change text y coordinate" size = "3" data-attr = "y" pattern = "[0-9]*" / >
< / label >
2012-05-17 22:50:00 +00:00
< div class = "toolset" id = "tool_font_family" >
<!-- Font family -->
2012-07-24 02:30:12 +00:00
< input id = "font_family" class = "wide" type = "text" data-title = "Change Font Family" size = "12" / >
2012-05-17 22:50:00 +00:00
< div id = "font_family_dropdown" class = "dropdown" >
< button > < / button >
< ul >
2012-06-17 14:41:39 +00:00
< li style = "font-family:Helvetica, Arial, sans-serif" > Helvetica< / li >
< li style = "font-family: Junction, sans-serif" > Junction< / li >
< li style = "font-family: 'Museo Slab', serif" > Museo Slab< / li >
< li style = "font-family: Anivers, sans-serif" > Anivers< / li >
< li style = "font-family: Fertigo, sans-serif" > Fertigo< / li >
< li style = "font-family: Fanwood, serif" > Fanwood< / li >
< li style = "font-family: 'League Gothic', serif" > League Gothic< / li >
< li style = "font-family: Georgia, serif;" > Georgia< / li >
< li style = "font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif" > Palatino< / li >
< li style = "font-family: 'Times New Roman', Times, serif" > Times< / li >
< li style = "font-family: 'Courier New', Courier, monospace" > Courier< / li >
2012-05-17 22:50:00 +00:00
< / ul >
< / div >
2012-06-12 01:31:43 +00:00
< / label >
2012-05-17 22:50:00 +00:00
< / div >
2012-06-17 14:41:39 +00:00
2012-07-14 02:04:34 +00:00
< div class = "toolset clearfix" >
2012-07-24 02:30:12 +00:00
< div class = "tool_button" id = "tool_bold" data-title = "Bold Text [B]" > < span > < / span > B< / div >
< div class = "tool_button" id = "tool_italic" data-title = "Italic Text [I]" > < span > < / span > i< / div >
2012-06-17 14:41:39 +00:00
< / div >
2012-05-17 22:50:00 +00:00
2012-07-24 02:30:12 +00:00
< label id = "tool_font_size" data-title = "Change Font Size" >
2012-06-12 01:31:43 +00:00
< span id = "font_sizeLabel" class = "icon_label" > Font Size< / span >
2012-07-24 02:30:12 +00:00
< input id = "font_size" size = "3" value = "0" / >
2012-05-17 22:50:00 +00:00
< / label >
<!-- Not visible, but still used -->
< input id = "text" type = "text" size = "35" / >
< / div >
<!-- formerly gsvg_panel -->
2012-07-24 02:30:12 +00:00
< div id = "container_panel" class = "context_panel clearfix" >
2012-05-17 22:50:00 +00:00
<!-- Add viewBox field here? -->
2012-07-24 02:30:12 +00:00
< label id = "group_title" data-title = "Group identification label" >
2012-05-30 04:55:00 +00:00
< h4 > Group< / h4 >
2012-05-17 22:50:00 +00:00
< / div >
2012-07-24 02:30:12 +00:00
< div id = "use_panel" class = "context_panel clearfix" >
< div class = "push_button" id = "tool_unlink_use" data-title = "Break link to reference element (make unique)" > < / div >
2012-05-17 22:50:00 +00:00
< / div >
2012-07-24 02:30:12 +00:00
< div id = "g_panel" class = "context_panel clearfix" >
2012-06-17 14:41:39 +00:00
< h4 > Group< / h4 >
2012-07-24 02:30:12 +00:00
< label > < span > X< / span >
< input id = "group_x" class = "attr_changer" data-title = "Change ellipse's cx coordinate" size = "3" data-attr = "x" pattern = "[0-9]*" / >
< / label >
< label > < span > Y< / span >
< input id = "group_y" class = "attr_changer" data-title = "Change ellipse's cy coordinate" size = "3" data-attr = "y" pattern = "[0-9]*" / >
< / label >
2012-06-17 14:41:39 +00:00
< / div >
2012-05-17 22:50:00 +00:00
<!-- For anchor elements -->
2012-07-24 02:30:12 +00:00
< div id = "a_panel" class = "context_panel clearfix" >
< label id = "tool_link_url" data-title = "Set link URL (leave empty to remove)" >
2012-05-17 22:50:00 +00:00
< span id = "linkLabel" class = "icon_label" > < / span >
< input id = "link_url" type = "text" size = "35" / >
< / label >
< / div >
2012-07-24 02:30:12 +00:00
< div id = "path_node_panel" class = "context_panel clearfix" >
2012-06-23 19:40:40 +00:00
< h4 > Edit Path< / h4 >
2012-05-17 22:50:00 +00:00
< div class = "tool_sep" > < / div >
2012-07-24 02:30:12 +00:00
< div class = "tool_button push_button_pressed" id = "tool_node_link" data-title = "Link Control Points" > < input type = "checkbox" checked > Linked Control Points< / div >
2012-06-23 19:40:40 +00:00
< label id = "tool_node_x" > < span > X< / span >
2012-07-24 02:30:12 +00:00
< input id = "path_node_x" class = "attr_changer" data-title = "Change node's x coordinate" size = "3" data-attr = "x" / >
2012-05-17 22:50:00 +00:00
< / label >
2012-06-23 19:40:40 +00:00
< label id = "tool_node_y" > < span > Y< / span >
2012-07-24 02:30:12 +00:00
< input id = "path_node_y" class = "attr_changer" data-title = "Change node's y coordinate" size = "3" data-attr = "y" / >
2012-05-17 22:50:00 +00:00
< / label >
2012-07-24 02:30:12 +00:00
< label id = "segment_type" class = "draginput label" >
< span > Segment Type< / span >
< select id = "seg_type" data-title = "Change Segment type" >
2012-05-17 22:50:00 +00:00
< option id = "straight_segments" selected = "selected" value = "4" > Straight< / option >
< option id = "curve_segments" value = "6" > Curve< / option >
< / select >
2012-07-24 02:30:12 +00:00
< / label >
< div class = "clearfix" > < / div >
< div class = "tool_button" id = "tool_node_clone" title = "Adds a node" > Add Node< / div >
2012-06-23 19:40:40 +00:00
< div class = "tool_button" id = "tool_node_delete" title = "Delete Node" > Delete Node< / div >
< div class = "tool_button" id = "tool_openclose_path" title = "Open/close sub-path" > Open Path< / div >
<!-- <div class="tool_button" id="tool_add_subpath" title="Add sub - path"></div> -->
2012-05-17 22:50:00 +00:00
< / div >
2012-05-30 04:55:00 +00:00
<!-- Buttons when a single element is selected -->
2012-07-24 02:30:12 +00:00
< div id = "selected_panel" class = "context_panel clearfix" >
2012-05-30 04:55:00 +00:00
2012-07-24 02:30:12 +00:00
< label id = "tool_angle" data-title = "Change rotation angle" class = "draginput" >
2012-05-30 04:55:00 +00:00
< span class = "icon_label" > Rotation< / span >
2012-07-24 02:30:12 +00:00
< input id = "angle" class = "attr_changer" size = "2" value = "0" data-min = "-180" data-max = "180" type = "text" / >
< div id = "tool_angle_indicator" >
< div id = "tool_angle_indicator_cursor" > < / div >
< / div >
2012-05-30 04:55:00 +00:00
< / label >
2012-07-24 02:30:12 +00:00
< label class = "toolset" id = "tool_opacity" data-title = "Change selected item opacity" >
2012-06-17 14:41:39 +00:00
< span id = "group_opacityLabel" class = "icon_label" > Opacity< / span >
2012-07-24 02:30:12 +00:00
< input id = "group_opacity" size = "3" value = "100" step = "5" min = "0" max = "100" / >
2012-06-17 14:41:39 +00:00
< / label >
2012-07-24 02:30:12 +00:00
< div class = "toolset" id = "tool_blur" data-title = "Change gaussian blur value" >
2012-06-12 01:31:43 +00:00
< label >
2012-05-30 04:55:00 +00:00
< span class = "icon_label" > Blur< / span >
2012-07-24 02:30:12 +00:00
< input id = "blur" size = "2" value = "0" class = "attr_changer" step = ".5" min = "0" max = "10" / >
2012-05-30 04:55:00 +00:00
< / label >
< / div >
2012-07-24 02:30:12 +00:00
< div class = "clearfix" > < / div >
2012-06-17 14:41:39 +00:00
< h4 > Stroke< / h4 >
2012-07-24 02:30:12 +00:00
< div class = "toolset" data-title = "Change stroke" >
2012-06-17 14:41:39 +00:00
< label >
< span class = "icon_label" > Stroke Width< / span >
2012-07-24 02:30:12 +00:00
< input id = "stroke_width" size = "2" value = "5" data-attr = "stroke-width" min = "0" max = "99" step = "1" / >
2012-06-17 14:41:39 +00:00
< / label >
< / div >
2012-07-24 02:30:12 +00:00
< label class = "stroke_tool draginput" >
< span > Stroke Dash< / span >
< select id = "stroke_style" data-title = "Change stroke dash style" >
2012-06-17 14:41:39 +00:00
< 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 >
< / label >
< label style = "display: none;" >
< span class = "icon_label" > Stroke Join< / span >
< / label >
< label style = "display: none;" >
< span class = "icon_label" > Stroke Cap< / span >
< / label >
< h4 > Align< / h4 >
2012-06-12 01:31:43 +00:00
< div class = "toolset align_buttons" id = "tool_position" >
2012-05-30 04:55:00 +00:00
< label >
2012-06-12 01:31:43 +00:00
< div class = "col last clear" id = "position_opts" >
< div class = "push_button" id = "tool_posleft" title = "Align Left" > < / div >
< div class = "push_button" id = "tool_poscenter" title = "Align Center" > < / div >
< div class = "push_button" id = "tool_posright" title = "Align Right" > < / div >
< div class = "push_button" id = "tool_postop" title = "Align Top" > < / div >
< div class = "push_button" id = "tool_posmiddle" title = "Align Middle" > < / div >
< div class = "push_button" id = "tool_posbottom" title = "Align Bottom" > < / div >
< / div >
2012-05-30 04:55:00 +00:00
< / label >
< / div >
< / div >
<!-- Buttons when multiple elements are selected -->
2012-07-24 02:30:12 +00:00
< div id = "multiselected_panel" class = "context_panel clearfix" >
2012-06-17 14:41:39 +00:00
< h4 > Multiple Elements< / h4 >
2012-06-12 01:31:43 +00:00
<!-- <div class="tool_sep"></div> -->
<!-- <div class="push_button" id="tool_clone_multi" title="Clone Elements [C]"></div> -->
<!-- <div class="push_button" id="tool_delete_multi" title="Delete Selected Elements [Delete/Backspace]"></div> -->
<!-- <div class="tool_sep"></div> -->
<!-- div class="push_button" id="tool_group" title="Group Elements [G]"></div> -->
<!-- <div class="push_button" id="tool_make_link_multi" title="Make (hyper)link"></div> -->
< div class = "toolset align_buttons" >
2012-06-17 14:41:39 +00:00
< h4 > Align< / h4 >
2012-06-12 01:31:43 +00:00
< label >
< div class = "col last clear" >
< 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 >
< / div >
< / label >
< / div >
2012-05-30 04:55:00 +00:00
< label id = "tool_align_relative" >
2012-06-17 14:41:39 +00:00
< span id = "relativeToLabel" > Relative to:< / span >
2012-05-30 04:55:00 +00:00
< select id = "align_relative_to" title = "Align relative to ..." >
2012-06-17 14:41:39 +00:00
< option id = "selected_objects" value = "selected" > Objects< / option >
< option id = "page" value = "page" > Page< / option >
2012-05-30 04:55:00 +00:00
< / select >
< / label >
< div class = "tool_sep" > < / div >
< / div >
2012-05-17 22:50:00 +00:00
< / div > <!-- tools_top -->
< div id = "cur_context_panel" >
< / div >
< div id = "tools_left" class = "tools_panel" >
2012-07-24 02:30:12 +00:00
< div class = "tool_button" id = "tool_select" title = "Select Tool [V]" > < / div >
< div class = "tool_button" id = "tool_fhpath" title = "Pencil Tool [P]" > < / div >
< div class = "tool_button" id = "tool_line" title = "Line Tool [L]" > < / div >
< div class = "tool_button" id = "tool_rect" title = "Square/Rect Tool [R]" > < / div >
< div class = "tool_button" id = "tool_ellipse" title = "Ellipse/Circle Tool [C]" > < / div >
< div class = "tool_button" id = "tool_path" title = "Path Tool [P]" > < / div >
< div class = "tool_button" id = "tool_text" title = "Text Tool [T]" > < / div >
2012-05-17 22:50:00 +00:00
< div class = "tool_button" id = "tool_zoom" title = "Zoom Tool [Ctrl+Up/Down]" > < / div >
2012-06-17 14:41:39 +00:00
< div id = "color_tools" >
2012-07-24 02:30:12 +00:00
< div id = "tool_switch" title = "Switch stroke and fill colors [X]" > < / div >
2012-06-17 14:41:39 +00:00
< div class = "color_tool active" id = "tool_fill" >
< label class = "icon_label" title = "Change fill color" > < / label >
< div class = "color_block" >
< div id = "fill_bg" > < / div >
< div id = "fill_color" class = "color_block" > < / div >
< / div >
< / div >
< div class = "color_tool" id = "tool_stroke" >
< label class = "icon_label" title = "Change stroke color" > < / label >
< div class = "color_block" >
< div id = "stroke_bg" > < / div >
< div id = "stroke_color" class = "color_block" title = "Change stroke color" > < / div >
< / div >
< / div >
< / div >
2012-05-17 22:50:00 +00:00
< / div > <!-- tools_left -->
< div id = "tools_bottom" class = "tools_panel" >
<!-- Zoom buttons -->
< div id = "zoom_panel" class = "toolset" title = "Change zoom level" >
< label >
2012-06-12 01:31:43 +00:00
< span id = "zoomLabel" class = "zoom_tool icon_label" > < / span >
< input id = "zoom" size = "3" value = "100" type = "text" / >
2012-05-17 22:50:00 +00:00
< / label >
< / 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 >
<!-- hidden divs -->
< div id = "color_picker" > < / div >
< / div > <!-- svg_editor -->
< div id = "svg_source_editor" >
< div id = "svg_source_overlay" > < / div >
< div id = "svg_source_container" >
< div id = "save_output_btns" >
< p id = "copy_save_note" > Copy the contents of this box into a text editor, then save the file with a .svg extension.< / p >
< button id = "copy_save_done" > Done< / button >
< / div >
< form >
< textarea id = "svg_source_textarea" spellcheck = "false" > < / textarea >
< / form >
2012-06-17 14:41:39 +00:00
< div id = "tool_source_back" class = "toolbar_button" >
< button id = "tool_source_cancel" class = "cancel" > Cancel< / button >
< button id = "tool_source_save" class = "ok" > Apply Changes< / button >
< / div >
2012-05-17 22:50:00 +00:00
< / div >
< / div >
2012-07-19 14:54:50 +00:00
< div id = "base_unit_container" >
< select id = "base_unit" >
< option value = "px" > Pixels< / option >
< option value = "cm" > Centimeters< / option >
< option value = "mm" > Millimeters< / option >
< option value = "in" > Inches< / option >
< option value = "pt" > Points< / option >
< option value = "pc" > Picas< / option >
< option value = "em" > Ems< / option >
< option value = "ex" > Exs< / option >
< / select >
< / div >
2012-05-17 22:50:00 +00:00
< div id = "dialog_box" >
< div id = "dialog_box_overlay" > < / div >
< div id = "dialog_container" >
< div id = "dialog_content" > < / div >
< div id = "dialog_buttons" > < / div >
< / div >
< / div >
< ul id = "cmenu_canvas" class = "contextMenu" >
2012-07-24 02:30:12 +00:00
< li > < a href = "#cut" > Cut < span class = "shortcut" > ⌘X;< / span > < / a > < / li >
< li > < a href = "#copy" > Copy< span class = "shortcut" > ⌘C< / span > < / a > < / li >
< li > < a href = "#paste" > Paste< span class = "shortcut" > ⌘V< / span > < / a > < / li >
< li class = "separator" > < a href = "#delete" > Delete< span class = "shortcut" > ⌫< / span > < / a > < / li >
< li class = "separator" > < a href = "#group" > Group< span class = "shortcut" > ⌘G< / span > < / a > < / li >
< li > < a href = "#ungroup" > Ungroup< span class = "shortcut" > ⌘⇧G< / span > < / a > < / li >
< li class = "separator" > < a href = "#move_front" > Bring to Front< span class = "shortcut" > ⌘⇧↑ < / span > < / a > < / li >
< li > < a href = "#move_up" > Bring Forward< span class = "shortcut" > ⌘↑ < / span > < / a > < / li >
< li > < a href = "#move_down" > Send Backward< span class = "shortcut" > ⌘↓ < / span > < / a > < / li >
< li > < a href = "#move_back" > Send to Back< span class = "shortcut" > ⌘⇧↓ < / span > < / a > < / li >
2012-05-17 22:50:00 +00:00
< / ul >
< / body >
< / html >
