It turns out that now that svg-edit uses querySelector to get a shape that the old IDs have invalid characters so now i replaced getID with an overly complicated solution

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1147 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Kevin Kwok 2010-01-04 22:06:40 +00:00
parent c7e65bb77d
commit c78c8fcd98
2 changed files with 483 additions and 332 deletions

View File

@ -6,342 +6,481 @@
<Content type="html"> <Content type="html">
<![CDATA[ <![CDATA[
<base href="http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html"></base>
<link rel="stylesheet" href="http://svg-edit.googlecode.com/svn/trunk/editor/jpicker/jpicker.css" type="text/css"/> <base href="http://svg-edit.googlecode.com/svn-history/r1142/branches/2.4/editor/svg-editor.html">
<link rel="stylesheet" href="http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.css" type="text/css"/>
<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="http://gist.github.com/raw/268884/ab93d38e4b89effbb21541d406d5b3362da37c97/jquery.svgicons.hacked.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>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/wave/json2.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/wave/wave.js"></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="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/js-hotkeys/jquery.hotkeys.min.js"></script> <script type="text/javascript" src="js-hotkeys/jquery.hotkeys-0.7.9.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/jgraduate/jpicker-1.0.9.min.js"></script> <script type="text/javascript" src="jgraduate/jquery.jgraduate.min.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/jgraduate/jquery.jgraduate.js"></script> <script type="text/javascript" src="spinbtn/JQuerySpinBtn.min.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/spinbtn/JQuerySpinBtn.js"></script> <script type="text/javascript" src="svgcanvas.min.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/svgcanvas.js"></script> <script type="text/javascript" src="svg-editor.min.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.js"></script> script type="text/javascript" src="locale/locale.min.js"></script-->
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/wave/json2.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/wave/wave.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>
<div id="svg_editor">
<div id="svg_editor"> <div id="workarea">
<style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style>
<div id="workarea"> <div id="svgcanvas"></div>
<style id="styleoverrides" type="text/css"></style> </div>
<div id="svgcanvas"></div>
</div> <div id="sidepanels">
<div id="layerpanel">
<div id="sidepanels" style="display:none"> <h3 id="layersLabel">Layers</h3>
<p><b>TODO: Side Panels go here.</b></p> <fieldset id="layerbuttons">
<p><b>By default, this panel will be collapsed. It will be expandable by some button/handle.</b></p> <div id="layer_new" class="layer_button" title="New Layer"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div id="layer_delete" class="layer_button" title="Delete Layer"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div id="layer_rename" class="layer_button" title="Rename Layer"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div id="layer_up" class="layer_button" title="Move Layer Up"></div>
</div> <div id="layer_down" class="layer_button" title="Move Layer Down"></div>
</fieldset>
<div id="logo">
<a href="http://svg-edit.googlecode.com/" target="_blank" title="SVG-edit Home Page"> <table id="layerlist">
<img src="images/logo.png" alt="logo" /> <tr class="layer">
</a> <td class="layervis"></td>
</div> <td class="layername">Layer 1</td>
</tr>
<div id="tools_top" class="tools_panel"> </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 --> <!-- File-like buttons: New, Save, Source -->
<div id="file_panel"> <div id="file_panel">
<img class="tool_button" id="tool_clear" src="images/clear.png" title="New Image [N]" alt="Clear" /> <div class="push_button" id="tool_clear" title="New Image [N]"></div>
<img style="display:none" class="tool_button" id="tool_open" src="images/open.png" title="Open Image [O]" alt="Open"/> <div class="push_button" id="tool_open" title="Open Image [O]" style="display:none"></div>
<img class="tool_button" id="tool_save" src="images/save.png" title="Save Image [S]" alt="Save"/> <div class="push_button" id="tool_save" title="Save Image [S]"></div>
<img class="tool_button" id="tool_source" src="images/source.png" title="Edit Source [U]" alt="Source"/> <div class="push_button" id="tool_docprops" title="Document Properties [I]"></div>
<img class="tool_button" id="tool_docprops" src="images/document-properties.png" title="Document Properties [I]"/> <div class="push_button" id="tool_source" title="Edit Source [U]"></div>
</div> <div class="tool_button" id="tool_wireframe" title="Wireframe Mode [F]"></div>
</div>
<!-- History buttons -->
<div id="history_panel"> <!-- History buttons -->
<div class="tool_sep" alt="|"></div> <div id="history_panel">
<div class="tool_button tool_button_disabled" id="tool_undo" title="Undo [Z]"></div> <div class="tool_sep"></div>
<div class="tool_button tool_button_disabled" id="tool_redo" title="Redo [Y]"></div> <div class="push_button tool_button_disabled" id="tool_undo" title="Undo [Z]"></div>
</div> <div class="push_button tool_button_disabled" id="tool_redo" title="Redo [Y]"></div>
</div>
<!-- Buttons when a single element is selected --> <!-- Buttons when a single element is selected -->
<div id="selected_panel"> <div id="selected_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="toolset">
<img class="tool_button" id="tool_clone" src="images/clone.png" title="Clone Element [C]" alt="Copy"/> <div class="tool_sep"></div>
<img class="tool_button" id="tool_delete" src="images/delete.png" title="Delete Element [Delete/Backspace]" alt="Delete"/> <div class="push_button" id="tool_clone" title="Clone Element [C]"></div>
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="push_button" id="tool_delete" title="Delete Element [Delete/Backspace]"></div>
<img class="tool_button" id="tool_move_top" src="images/move_top.png" title="Move to Top [Shift+Up]" alt="Top"/> <div class="tool_sep"></div>
<img class="tool_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>
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="push_button" id="tool_move_bottom" title="Move to Bottom [Shift+Down]"></div>
<select id="group_opacity" class="selected_tool" title="Change selected item opacity"> <div class="push_button" id="tool_topath" title="Convert to Path"></div>
<option selected="selected" value="1">100 %</option> <div class="push_button" id="tool_reorient" title="Reorient path"></div>
<option value="0.9">90 %</option> <div class="tool_sep"></div>
<option value="0.8">80 %</option> </div>
<option value="0.7">70 %</option> <div class="toolset">
<option value="0.6">60 %</option> <label id="group_opacityLabel" class="selected_tool" for="group_opacity">opac:</label>
<option value="0.5">50 %</option> <input id="group_opacity" class="selected_tool" title="Change selected item opacity" size="3" value="100" type="text"/>
<option value="0.4">40 %</option> <div id="opacity_dropdown" class="dropdown">
<option value="0.3">30 %</option> <button></button>
<option value="0.2">20 %</option> <ul>
<option value="0.1">10 %</option> <li class="special"><div id="opac_slider"></div></li>
<option value="0">0 %</option> <li>100% (no transparency)</li>
</select> <li>0%</li>
<span class="selected_tool">angle:</span> <li>25%</li>
<input id="angle" class="selected_tool" title="Change rotation angle" alt="Rotation Angle" size="2" value="0" type="text"/> <li>50%</li>
</div> <li>75%</li>
<li>100%</li>
<!-- Buttons when multiple elements are selected --> </ul>
<div id="multiselected_panel"> </div>
<img class="tool_sep" src="images/sep.png" alt="|"/> </div>
<img class="tool_button" id="tool_clone_multi" src="images/clone.png" title="Clone Elements [C]" alt="Clone"/> <div class="toolset">
<img class="tool_button" id="tool_delete_multi" src="images/delete.png" title="Delete Selected Elements [Delete/Backspace]" alt="Delete"/> <label id="angleLabel" class="selected_tool">angle:</label>
<img class="tool_sep" src="images/sep.png" alt="|"/> <input id="angle" class="selected_tool" title="Change rotation angle" size="2" value="0" type="text"/>
<div class="tool_button" id="tool_alignleft" title="Align Left"></div> </div>
<div class="tool_button" id="tool_aligncenter" title="Align Center"></div> <div id="xy_panel" class="toolset">
<div class="tool_button" id="tool_alignright" title="Align Right"></div> <label class="selected_tool">x:</label>
<div class="tool_button" id="tool_aligntop" title="Align Top"></div> <input id="selected_x" class="selected_tool attr_changer" title="Change X coordinate" size="3" data-attr="x"/>
<div class="tool_button" id="tool_alignmiddle" title="Align Middle"></div> <label class="selected_tool">y:</label>
<div class="tool_button" id="tool_alignbottom" title="Align Bottom"></div> <input id="selected_y" class="selected_tool attr_changer" title="Change Y coordinate" size="3" data-attr="y"/>
<span class="selected_tool">relative to:</span> </div>
<select id="align_relative_to" class="selected_tool" title="Align relative to ..."> </div>
<option value="selected">selected objects</option>
<option value="largest">largest object</option> <!-- Buttons when multiple elements are selected -->
<option value="smallest">smallest object</option> <div id="multiselected_panel">
<option value="page">page</option> <div class="tool_sep"></div>
</select> <div class="push_button" id="tool_clone_multi" title="Clone Elements [C]"></div>
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="push_button" id="tool_delete_multi" title="Delete Selected Elements [Delete/Backspace]"></div>
<img class="tool_button" id="tool_group" src="images/shape_group.png" title="Group Elements [G]" alt="Group"/> <div class="tool_sep"></div>
</div> <div class="push_button" id="tool_group" title="Group Elements [G]"></div>
<div class="push_button" id="tool_alignleft" title="Align Left"></div>
<div id="g_panel"> <div class="push_button" id="tool_aligncenter" title="Align Center"></div>
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="push_button" id="tool_alignright" title="Align Right"></div>
<img class="tool_button" id="tool_ungroup" src="images/shape_ungroup.png" title="Ungroup Elements [G]" alt="Ungroup"/> <div class="push_button" id="tool_aligntop" title="Align Top"></div>
</div> <div class="push_button" id="tool_alignmiddle" title="Align Middle"></div>
<div class="push_button" id="tool_alignbottom" title="Align Bottom"></div>
<div id="rect_panel"> <span id="relativeToLabel" class="selected_tool">relative to:</span>
<img class="tool_sep" src="images/sep.png" alt="|"/> <select id="align_relative_to" class="selected_tool" title="Align relative to ...">
<label class="rect_tool">x:</label> <option id="selected_objects" value="selected">selected objects</option>
<input id="rect_x" class="rect_tool attr_changer" title="Change rectangle X coordinate" alt="x" size="3"/> <option id="largest_object" value="largest">largest object</option>
<label class="rect_tool">y:</label> <option id="smallest_object" value="smallest">smallest object</option>
<input id="rect_y" class="rect_tool attr_changer" title="Change rectangle Y coordinate" alt="y" size="3"/> <option id="page" value="page">page</option>
<label class="rect_tool">width:</label> </select>
<input id="rect_width" class="rect_tool attr_changer" title="Change rectangle width" alt="width" size="3"/> <div class="tool_sep"></div>
<label class="rect_tool">height:</label>
<input id="rect_height" class="rect_tool attr_changer" title="Change rectangle height" alt="height" size="3"/> </div>
<label class="rect_tool">Corner Radius:</label>
<input id="rect_rx" size="3" value="0" class="rect_tool" type="text" title="Change Rectangle Corner Radius" alt="Corner Radius"/> <div id="g_panel">
</div> <div class="tool_sep"></div>
<div class="push_button" id="tool_ungroup" title="Ungroup Elements [G]"></div>
<div id="image_panel"> </div>
<img class="tool_sep" src="images/sep.png" alt="|"/>
<label class="image_tool">x:</label> <div id="rect_panel">
<input id="image_x" class="image_tool attr_changer" title="Change image X coordinate" alt="x" size="3"/> <div class="toolset">
<label class="image_tool">y:</label> <label id="rwidthLabel" class="rect_tool">width:</label>
<input id="image_y" class="image_tool attr_changer" title="Change image Y coordinate" alt="y" size="3"/> <input id="rect_width" class="rect_tool attr_changer" title="Change rectangle width" size="3" data-attr="width"/>
<label class="image_tool">width:</label> <label id="rheightLabel" class="rect_tool">height:</label>
<input id="image_width" class="image_tool attr_changer" title="Change image width" alt="width" size="3"/> <input id="rect_height" class="rect_tool attr_changer" title="Change rectangle height" size="3" data-attr="height"/>
<label class="image_tool">height:</label> </div>
<input id="image_height" class="image_tool attr_changer" title="Change image height" alt="height" size="3"/> <div class="toolset">
<label class="image_tool">url:</label> <label id="cornerRadiusLabel" class="rect_tool">Corner Radius:</label>
<input id="image_url" class="image_tool" type="text" title="Change URL" size="35"/> <input id="rect_rx" size="3" value="0" class="rect_tool" type="text" title="Change Rectangle Corner Radius" data-attr="Corner Radius"/>
</div> </div>
</div>
<div id="circle_panel"> <div id="image_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="toolset">
<label class="circle_tool">cx:</label> <label id="iwidthLabel" class="image_tool">width:</label>
<input id="circle_cx" class="circle_tool attr_changer" title="Change circle's cx coordinate" alt="cx" size="3"/> <input id="image_width" class="image_tool attr_changer" title="Change image width" size="3" data-attr="width"/>
<label class="circle_tool">cy:</label> <label id="iheightLabel" class="image_tool">height:</label>
<input id="circle_cy" class="circle_tool attr_changer" title="Change circle's cy coordinate" alt="cy" size="3"/> <input id="image_height" class="image_tool attr_changer" title="Change image height" size="3" data-attr="height"/>
<label class="circle_tool">r:</label> </div>
<input id="circle_r" class="circle_tool attr_changer" title="Change circle's radius" alt="r" size="3"/> <div class="toolset">
</div> <label class="image_tool">url:</label>
<input id="image_url" class="image_tool" type="text" title="Change URL" size="35"/>
<div id="ellipse_panel"> <button id="change_image_url" style="display:none;">Change Image</button>
<img class="tool_sep" src="images/sep.png" alt="|"/> <div id="url_notice" title="NOTE: This image cannot be embedded. It will depend on this path to be displayed"></div>
<label class="ellipse_tool">cx:</label> </div>
<input id="ellipse_cx" class="ellipse_tool attr_changer" title="Change ellipse's cx coordinate" alt="cx" size="3"/> </div>
<label class="ellipse_tool">cy:</label>
<input id="ellipse_cy" class="ellipse_tool attr_changer" title="Change ellipse's cy coordinate" alt="cy" size="3"/> <div id="circle_panel">
<label class="ellipse_tool">rx:</label> <div class="toolset">
<input id="ellipse_rx" class="ellipse_tool attr_changer" title="Change ellipse's x radius" alt="rx" size="3"/> <label class="circle_tool">cx:</label>
<label class="ellipse_tool">ry:</label> <input id="circle_cx" class="circle_tool attr_changer" title="Change circle's cx coordinate" size="3" data-attr="cx"/>
<input id="ellipse_ry" class="ellipse_tool attr_changer" title="Change ellipse's y radius" alt="ry" size="3"/> <label class="circle_tool">cy:</label>
</div> <input id="circle_cy" class="circle_tool attr_changer" title="Change circle's cy coordinate" size="3" data-attr="cy"/>
</div>
<div id="line_panel"> <div class="toolset">
<img class="tool_sep" src="images/sep.png" alt="|"/> <label class="circle_tool">r:</label>
<label class="line_tool">x1:</label> <input id="circle_r" class="circle_tool attr_changer" title="Change circle's radius" size="3" data-attr="r"/>
<input id="line_x1" class="line_tool attr_changer" title="Change line's starting x coordinate" alt="x1" size="3"/> </div>
<label class="line_tool">y1:</label> </div>
<input id="line_y1" class="line_tool attr_changer" title="Change line's starting y coordinate" alt="y1" size="3"/>
<label class="line_tool">x2:</label> <div id="ellipse_panel">
<input id="line_x2" class="line_tool attr_changer" title="Change line's ending x coordinate" alt="x2" size="3"/> <div class="toolset">
<label class="line_tool">y2:</label> <label class="ellipse_tool">cx:</label>
<input id="line_y2" class="line_tool attr_changer" title="Change line's ending y coordinate" alt="x1" size="3"/> <input id="ellipse_cx" class="ellipse_tool attr_changer" title="Change ellipse's cx coordinate" size="3" data-attr="cx"/>
</div> <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"/>
<div id="text_panel"> </div>
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="toolset">
<label class="text_tool">x:</label> <label class="ellipse_tool">rx:</label>
<input id="text_x" class="text_tool attr_changer" title="Change text X coordinate" alt="x" size="3"/> <input id="ellipse_rx" class="ellipse_tool attr_changer" title="Change ellipse's x radius" size="3" data-attr="rx"/>
<label class="text_tool">y:</label> <label class="ellipse_tool">ry:</label>
<input id="text_y" class="text_tool attr_changer" title="Change text Y coordinate" alt="y" size="3"/> <input id="ellipse_ry" class="ellipse_tool attr_changer" title="Change ellipse's y radius" size="3" data-attr="ry"/>
<img class="tool_button" id="tool_bold" src="images/bold.png" title="Bold Text [B]" alt="Bold"/> </div>
<img class="tool_button" id="tool_italic" src="images/italic.png" title="Italic Text [I]" alt="Italic"/> </div>
<select id="font_family" class="text_tool" title="Change Font Family">
<option selected="selected" value="serif">serif</option> <div id="line_panel">
<option value="sans-serif">sans-serif</option> <div class="toolset">
<option value="cursive">cursive</option> <label class="line_tool">x1:</label>
<option value="fantasy">fantasy</option> <input id="line_x1" class="line_tool attr_changer" title="Change line's starting x coordinate" size="3" data-attr="x1"/>
<option value="monospace">monospace</option> <label class="line_tool">y1:</label>
</select> <input id="line_y1" class="line_tool attr_changer" title="Change line's starting y coordinate" size="3" data-attr="y1"/>
<select id="font_size" class="text_tool" title="Change Font Size"> </div>
<option value="6pt">6pt</option> <div class="toolset">
<option value="8pt">8pt</option> <label class="line_tool">x2:</label>
<option value="10pt">10pt</option> <input id="line_x2" class="line_tool attr_changer" title="Change line's ending x coordinate" size="3" data-attr="x2"/>
<option selected="selected" value="12pt">12pt</option> <label class="line_tool">y2:</label>
<option value="14pt">14pt</option> <input id="line_y2" class="line_tool attr_changer" title="Change line's ending y coordinate" size="3" data-attr="y2"/>
<option value="16pt">16pt</option> </div>
<option value="20pt">20pt</option> </div>
<option value="24pt">24pt</option>
<option value="32pt">32pt</option> <div id="text_panel">
<option value="48pt">48pt</option> <div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
<option value="64pt">64pt</option> <div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
<option value="72pt">72pt</option>
<option value="80pt">80pt</option> <div class="toolset">
<option value="96pt">96pt</option> <input id="font_family" class="text_tool" type="text" title="Change Font Family" size="12"/>
<option value="120pt">120pt</option> <div id="font_family_dropdown" class="dropdown">
</select> <button></button>
<input id="text" class="text_tool" type="text" title="Change text contents" size="35"/> <ul>
</div> <li style="font-family:serif">Serif</li>
</div> <!-- tools_top --> <li style="font-family:sans-serif">Sans-serif</li>
<li style="font-family:cursive">Cursive</li>
<div id="tools_left" class="tools_panel"> <li style="font-family:fantasy">Fantasy</li>
<img class="tool_button_current" id="tool_select" src="images/select.png" title="Select Tool [1]" alt="Select"/><br/> <li style="font-family:monospace">Monospace</li>
<img class="tool_button" id="tool_path" src="images/path.png" title="Pencil Tool [2]" alt="Pencil"/><br/> </ul>
<img class="tool_button" id="tool_line" src="images/line.png" title="Line Tool [3]" alt="Line"/><br/> </div>
<img class="tool_button" id="tools_rect_show" src="images/square.png" title="Square/Rect Tool [4/Shift+4]" alt="Square"/> </div>
<img class="flyout_arrow_horiz" src="images/flyouth.png"/>
<img class="tool_button" id="tools_ellipse_show" src="images/circle.png" title="Ellipse/Circle Tool [5/Shift+5]" alt="Circle"/><br/> <div class="toolset">
<img class="flyout_arrow_horiz" src="images/flyouth.png"/> <label id="font_sizeLabel" class="text_tool" for="font_size">size:</label>
<img class="tool_button" id="tool_text" src="images/text.png" title="Text Tool [6]" alt="Text"/> <input id="font_size" class="text_tool" title="Change Font Size" size="3" value="0" type="text"/>
<img class="tool_button" id="tool_poly" src="images/polygon.png" title="Poly Tool [7]" alt="Poly"/> </div>
<img class="tool_button" id="tool_image" src="images/image.png" title="Image Tool [8]" alt="Image"/> <input id="text" class="text_tool" type="text" title="Change text contents" size="35"/>
<img class="tool_button" id="tool_zoom" src="images/zoom.png" title="Zoom Tool [Ctrl+Up/Down]" alt="Zoom"/> </div>
</div> <!-- tools_left -->
<div id="path_node_panel">
<div id="tools_bottom" class="tools_panel"> <div class="tool_sep"></div>
<div class="tool_button" id="tool_node_link" title="Link Control Points"></div>
<!-- Zoom buttons --> <div class="tool_sep"></div>
<div id="zoom_panel"> <label class="path_node_tool">x:</label>
<span class="zoom_tool">zoom:</span> <input id="path_node_x" class="path_node_tool attr_changer" title="Change node's x coordinate" size="3" data-attr="x"/>
<input id="zoom" class="zoom_tool" title="Change zoom level" alt="Zoom %" size="3" value="100" type="text"/> <label class="path_node_tool">y:</label>
<div id="zoom_dropdown"> <input id="path_node_y" class="path_node_tool attr_changer" title="Change node's y coordinate" size="3" data-attr="y"/>
<button></button> <select id="seg_type" class="path_node_tool" title="Change Segment type">
<ul> <option id="straight_segments" selected="selected" value="4">Straight</option>
<li>100%</li> <option id="curve_segments" value="6">Curve</option>
<li data-val="content">Fit to content</li> </select>
<li data-val="selection">Fit to selection</li> <div class="tool_button" id="tool_node_clone" title="Clone Node"></div>
<li data-val="canvas">Fit to canvas</li> <div class="tool_button" id="tool_node_delete" title="Delete Node"></div>
<li>25%</li> </div>
<li>50%</li>
<li>100%</li> </div> <!-- tools_top -->
<li>200%</li>
<li>400%</li> <div id="tools_left" class="tools_panel">
<li>1000%</li> <div class="tool_button_current" id="tool_select" title="Select Tool [1]"></div>
</ul> <div class="tool_button" id="tool_fhpath" title="Pencil Tool [2]"></div>
</div> <div class="tool_button" id="tool_line" title="Line Tool [3]"></div>
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="tool_button" id="tools_rect_show" title="Square/Rect Tool [4/Shift+4]"></div>
</div> <div class="flyout_arrow_horiz"></div>
<div class="tool_button" id="tools_ellipse_show" title="Ellipse/Circle Tool [5/Shift+5]"></div>
<div id="tools_bottom_2"> <div class="flyout_arrow_horiz"></div>
<table> <div class="tool_button" id="tool_path" title="Path Tool [7]"></div>
<tr> <div class="tool_button" id="tool_text" title="Text Tool [6]"></div>
<td>fill:</td> <div class="tool_button" id="tool_image" title="Image Tool [8]"></div>
<td><div id="fill_color" class="color_block" title="Change fill color"></div></td> <div class="tool_button" id="tool_zoom" title="Zoom Tool [Ctrl+Up/Down]"></div>
<td><div id="fill_opacity">100%</div></td> </div> <!-- tools_left -->
</tr><tr>
<td>stroke:</td> <div id="tools_bottom" class="tools_panel">
<td><div id="stroke_color" class="color_block" title="Change stroke color"></div></td>
<td><div id="stroke_opacity">100 %</div></td> <!-- Zoom buttons -->
<td> <div id="zoom_panel" class="magic_field">
<input id="stroke_width" title="Change stroke width" alt="Stroke Width" size="2" value="5" type="text"/> <span id="zoomLabel" class="zoom_tool label">zoom:</span>
</td> <input id="zoom" class="zoom_tool" title="Change zoom level" size="3" value="100" type="text" />
<td> <div id="zoom_dropdown" class="dropdown">
<select id="stroke_style" title="Change stroke dash style"> <button></button>
<option selected="selected" value="none">---</option> <ul>
<option value="2,2">...</option> <li>1000%</li>
<option value="5,5">- -</option> <li>400%</li>
<option value="5,2,2,2">- .</option> <li>200%</li>
<option value="5,2,2,2,2,2">- ..</option> <li>100%</li>
</select> <li>50%</li>
</td> <li>25%</li>
</tr> <li id="fit_to_canvas" data-val="canvas">Fit to canvas</li>
</table> <li id="fit_to_sel" data-val="selection">Fit to selection</li>
</div> <li id="fit_to_layer_content" data-val="layer">Fit to layer content</li>
<li id="fit_to_all" data-val="content">Fit to all content</li>
<div id="tools_bottom_3"> <li>100%</li>
<div id="palette_holder"><div id="palette" title="Click to change fill color, shift-click to change stroke color"></div></div> </ul>
<div id="copyright">Powered by <a href="http://svg-edit.googlecode.com/" target="_blank">SVG-edit v2.4-unstable</a></div> </div>
</div> <div class="tool_sep"></div>
</div> </div>
<!-- hidden divs --> <div id="tools_bottom_2">
<div id="color_picker"></div> <table>
<tr>
<div id="tools_rect" class="tools_flyout"> <td id="fill_tool_bottom" class="label">fill:</td>
<div id="tool_square" class="tool_flyout_button" title="Square"></div> <td><div id="fill_bg"></div><div id="fill_color" class="color_block" title="Change fill color"></div></td>
<div id="tool_rect" class="tool_flyout_button" title="Rectangle"></div> <td colspan="3"><div id="fill_opacity" class="label">100%</div></td>
<div id="tool_fhrect" class="tool_flyout_button" title="Free-Hand Rectangle"></div> </tr><tr>
</div> <td id="stroke_tool_bottom" class="label">stroke:</td>
<td><div id="stroke_bg"></div><div id="stroke_color" class="color_block" title="Change stroke color"></div></td>
<div id="tools_ellipse" class="tools_flyout"> <td><div id="stroke_opacity" class="label">100 %</div></td>
<div id="tool_circle" class="tool_flyout_button" title="Circle"></div> <td>
<div id="tool_ellipse" class="tool_flyout_button" title="Ellipse"></div> <input id="stroke_width" title="Change stroke width" size="2" value="5" type="text" data-attr="Stroke Width"/>
<div id="tool_fhellipse" class="tool_flyout_button" title="Free-Hand Ellipse"></div> </td>
</div> <td>
<select id="stroke_style" title="Change stroke dash style">
</div> <!-- svg_editor --> <option selected="selected" value="none">---</option>
<option value="2,2">...</option>
<div id="svg_source_editor"> <option value="5,5">- -</option>
<div id="svg_source_overlay"></div> <option value="5,2,2,2">- .</option>
<div id="svg_source_container"> <option value="5,2,2,2,2,2">- ..</option>
<div id="tool_source_back" class="toolbar_button"> </select>
<button id="tool_source_save">Save</button> </td>
<button id="tool_source_cancel">Cancel</button> </tr>
</div> </table>
<form> </div>
<textarea id="svg_source_textarea"></textarea>
</form> <div id="tools_bottom_3">
</div> <div id="palette_holder"><div id="palette" title="Click to change fill color, shift-click to change stroke color"></div></div>
</div> </div>
<div id="copyright">Powered by <a href="http://svg-edit.googlecode.com/" target="_blank">SVG-edit v2.4-beta</a></div>
<div id="svg_docprops"> </div>
<div id="svg_docprops_overlay"></div>
<div id="svg_docprops_container"> <!-- hidden divs -->
<div id="tool_docprops_back" class="toolbar_button"> <div id="color_picker"></div>
<button id="tool_docprops_save">Save</button>
<button id="tool_docprops_cancel">Cancel</button> <div id="tools_rect" class="tools_flyout">
<div id="tool_rect" class="tool_flyout_button" title="Rectangle"></div>
<div id="change_background"> <div id="tool_square" class="tool_flyout_button" title="Square"></div>
<label>Canvas Background:</label> <div id="tool_fhrect" class="tool_flyout_button" title="Free-Hand Rectangle"></div>
<div id="bkgnd_color" class="color_block" title="Change background color/opacity"></div> </div>
</div>
<div id="tools_ellipse" class="tools_flyout">
<div id="tool_ellipse" class="tool_flyout_button" title="Ellipse"></div>
<div id="tool_circle" class="tool_flyout_button" title="Circle"></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">
<button id="tool_docprops_save">OK</button>
<button id="tool_docprops_cancel">Cancel</button>
</div>
<fieldset id="svg_docprops_docprops">
<legend id="svginfo_image_props">Image Properties</legend>
<label>
<span id="svginfo_title">Title:</span>
<input type="text" id="canvas_title" size="24">
</label>
<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>
</fieldset>
<fieldset id="image_save_opts">
<legend id="includedImages">Included Images</legend>
<label><input type="radio" name="image_opt" value="embed" checked="checked"/> <span id="image_opt_embed">Embed data (local files)</span> </label>
<label><input type="radio" name="image_opt" value="ref"/> <span id="image_opt_ref">Use file reference</span> </label>
</fieldset>
</fieldset>
<fieldset id="svg_docprops_prefs">
<legend id="svginfo_editor_prefs">Editor Preferences</legend>
<label><span id="svginfo_lang">Language:</span>
<!-- Source: http://en.wikipedia.org/wiki/Language_names -->
<select id="lang_select">
<option id="lang_cs" value="cs">Čeština</option>
<option id="lang_de" value="de">Deutsch</option>
<option id="lang_en" value="en" selected="selected">English</option>
<option id="lang_es" value="es">Español</option>
<option id="lang_fr" value="fr">Français</option>
<option id="lang_nl" value="nl">Nederlands</option>
<option id="lang_ro" value="ro">Româneşte</option>
<option id="lang_sk" value="sk">Slovenčina</option>
</select>
</label>
<label><span id="svginfo_icons">Icon size:</span>
<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>
<option id="icon_xlarge" value="xl">Extra Large</option>
</select>
</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="21"></label>
<p id="svginfo_bg_note">Note: Background will not be saved with image.</p>
</fieldset>
<div id="change_resolution"> </fieldset>
<label>Resolution:</label>
<select id="resolution" label="Resolution:"> </div>
<option selected="selected">640x480</option> </div>
<option>800x600</option>
<option>1024x768</option> <div id="dialog_box">
<option>1280x960</option> <div id="dialog_box_overlay"></div>
<option>1600x1200</option> <div id="dialog_container">
<option>Fit to Content</option> <div id="dialog_content">
<option>Custom</option> Test message
</select> </div>
</div> <div id="dialog_buttons"></div>
</div> </div>
</div> </div>
</div>
<script type='text/javascript'
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
]]> ]]>
</Content> </Content>
</Module> </Module>

View File

@ -56,7 +56,14 @@ function stateUpdated() {
function getId(canvas, objnum) { function getId(canvas, objnum) {
return "svg_"+wave.getViewer().getId()+"_"+objnum; var id = wave.getViewer().getId().split("@")[0];
var extra = SHA256(wave.getViewer().getId()); //in case the next step kills all the characters
for(var i = 0, l = id.length, n = ""; i < l; i++){
if("abcdefghijklmnopqrstuvwxyz0123456789".indexOf(id[i]) != -1){
n+=i;
}
}
return "svg_"+n+"_"+extra.substr(0,5)+"_"+objnum;
} }
function main() { function main() {
@ -117,3 +124,8 @@ function main() {
} }
gadgets.util.registerOnLoadHandler(main); gadgets.util.registerOnLoadHandler(main);
//and why not use my stuff?
function SHA256(b){function h(j,k){return(j>>e)+(k>>e)+((p=(j&o)+(k&o))>>e)<<e|p&o}function f(j,k){return j>>>k|j<<32-k}var g=[],d,c=3,l=[2],p,i,q,a,m=[],n=[];i=b.length*8;for(var e=16,o=65535,r="";c<312;c++){for(d=l.length;d--&&c%l[d]!=0;);d<0&&l.push(c)}b+="\u0080";for(c=0;c<=i;c+=8)n[c>>5]|=(b.charCodeAt(c/8)&255)<<24-c%32;n[(i+64>>9<<4)+15]=i;for(c=8;c--;)m[c]=parseInt(Math.pow(l[c],0.5).toString(e).substr(2,8),e);for(c=0;c<n.length;c+=e){a=m.slice(0);for(b=0;b<64;b++){g[b]=b<e?n[b+c]:h(h(h(f(g[b-2],17)^f(g[b-2],19)^g[b-2]>>>10,g[b-7]),f(g[b-15],7)^f(g[b-15],18)^g[b-15]>>>3),g[b-e]);i=h(h(h(h(a[7],f(a[4],6)^f(a[4],11)^f(a[4],25)),a[4]&a[5]^~a[4]&a[6]),parseInt(Math.pow(l[b],1/3).toString(e).substr(2,8),e)),g[b]);q=(f(a[0],2)^f(a[0],13)^f(a[0],22))+(a[0]&a[1]^a[0]&a[2]^a[1]&a[2]);for(d=8;--d;)a[d]=d==4?h(a[3],i):a[d-1];a[0]=h(i,q)}for(d=8;d--;)m[d]+=a[d]}for(c=0;c<8;c++)for(b=8;b--;)r+=(m[c]>>>b*4&15).toString(e);return r}