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,39 +6,79 @@
<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"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <link rel="stylesheet" href="jgraduate/css/jPicker-1.0.9.css" type="text/css"/>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/js-hotkeys/jquery.hotkeys.min.js"></script> <link rel="stylesheet" href="jgraduate/css/jGraduate-0.2.0.css" type="text/css"/>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/jgraduate/jpicker-1.0.9.min.js"></script> <link rel="stylesheet" href="svg-editor.css" type="text/css"/>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/jgraduate/jquery.jgraduate.js"></script> <link rel="stylesheet" href="spinbtn/JQuerySpinBtn.css" type="text/css"/>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/spinbtn/JQuerySpinBtn.js"></script> <!-- Development version of script tags: -->
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/svgcanvas.js"></script> <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.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/json2.js"></script>
<script type="text/javascript" src="http://svg-edit.googlecode.com/svn/trunk/wave/wave.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="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>
<div id="svg_editor"> <div id="svg_editor">
<div id="workarea"> <div id="workarea">
<style id="styleoverrides" type="text/css"></style> <style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style>
<div id="svgcanvas"></div> <div id="svgcanvas"></div>
</div> </div>
<div id="sidepanels" style="display:none"> <div id="sidepanels">
<p><b>TODO: Side Panels go here.</b></p> <div id="layerpanel">
<p><b>By default, this panel will be collapsed. It will be expandable by some button/handle.</b></p> <h3 id="layersLabel">Layers</h3>
<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> <fieldset id="layerbuttons">
<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_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>
<div id="layer_rename" class="layer_button" title="Rename Layer"></div>
<div id="layer_up" class="layer_button" title="Move Layer Up"></div>
<div id="layer_down" class="layer_button" title="Move Layer Down"></div>
</fieldset>
<table id="layerlist">
<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>
<div id="logo"> <div id="logo">
<a href="http://svg-edit.googlecode.com/" target="_blank" title="SVG-edit Home Page"> <a href="http://svg-edit.googlecode.com/" target="_blank" title="SVG-edit Home Page">
<img src="images/logo.png" alt="logo" />
</a> </a>
</div> </div>
@ -46,223 +86,256 @@
<!-- 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 class="tool_button" id="tool_wireframe" title="Wireframe Mode [F]"></div>
</div> </div>
<!-- History buttons --> <!-- History buttons -->
<div id="history_panel"> <div id="history_panel">
<div class="tool_sep" alt="|"></div> <div class="tool_sep"></div>
<div class="tool_button tool_button_disabled" id="tool_undo" title="Undo [Z]"></div> <div class="push_button tool_button_disabled" id="tool_undo" title="Undo [Z]"></div>
<div class="tool_button tool_button_disabled" id="tool_redo" title="Redo [Y]"></div> <div class="push_button tool_button_disabled" id="tool_redo" title="Redo [Y]"></div>
</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>
<li>75%</li>
<li>100%</li>
</ul>
</div>
</div>
<div class="toolset">
<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>
<div id="xy_panel" class="toolset">
<label class="selected_tool">x:</label>
<input id="selected_x" class="selected_tool attr_changer" title="Change X coordinate" size="3" data-attr="x"/>
<label class="selected_tool">y:</label>
<input id="selected_y" class="selected_tool attr_changer" title="Change Y coordinate" size="3" data-attr="y"/>
</div>
</div> </div>
<!-- Buttons when multiple elements are selected --> <!-- Buttons when multiple elements are selected -->
<div id="multiselected_panel"> <div id="multiselected_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="tool_sep"></div>
<img class="tool_button" id="tool_clone_multi" src="images/clone.png" title="Clone Elements [C]" alt="Clone"/> <div class="push_button" id="tool_clone_multi" title="Clone Elements [C]"></div>
<img class="tool_button" id="tool_delete_multi" src="images/delete.png" title="Delete Selected Elements [Delete/Backspace]" alt="Delete"/> <div class="push_button" id="tool_delete_multi" title="Delete Selected Elements [Delete/Backspace]"></div>
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="tool_sep"></div>
<div class="tool_button" id="tool_alignleft" title="Align Left"></div> <div class="push_button" id="tool_group" title="Group Elements [G]"></div>
<div class="tool_button" id="tool_aligncenter" title="Align Center"></div> <div class="push_button" id="tool_alignleft" title="Align Left"></div>
<div class="tool_button" id="tool_alignright" title="Align Right"></div> <div class="push_button" id="tool_aligncenter" title="Align Center"></div>
<div class="tool_button" id="tool_aligntop" title="Align Top"></div> <div class="push_button" id="tool_alignright" title="Align Right"></div>
<div class="tool_button" id="tool_alignmiddle" title="Align Middle"></div> <div class="push_button" id="tool_aligntop" title="Align Top"></div>
<div class="tool_button" id="tool_alignbottom" title="Align Bottom"></div> <div class="push_button" id="tool_alignmiddle" title="Align Middle"></div>
<span class="selected_tool">relative to:</span> <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 ..."> <select id="align_relative_to" class="selected_tool" title="Align relative to ...">
<option value="selected">selected objects</option> <option id="selected_objects" value="selected">selected objects</option>
<option value="largest">largest object</option> <option id="largest_object" value="largest">largest object</option>
<option value="smallest">smallest object</option> <option id="smallest_object" value="smallest">smallest object</option>
<option value="page">page</option> <option id="page" value="page">page</option>
</select> </select>
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="tool_sep"></div>
<img class="tool_button" id="tool_group" src="images/shape_group.png" title="Group Elements [G]" alt="Group"/>
</div> </div>
<div id="g_panel"> <div id="g_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="tool_sep"></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_ungroup" title="Ungroup Elements [G]"></div>
</div> </div>
<div id="rect_panel"> <div id="rect_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="toolset">
<label class="rect_tool">x:</label> <label id="rwidthLabel" class="rect_tool">width:</label>
<input id="rect_x" class="rect_tool attr_changer" title="Change rectangle X coordinate" alt="x" size="3"/> <input id="rect_width" class="rect_tool attr_changer" title="Change rectangle width" size="3" data-attr="width"/>
<label class="rect_tool">y:</label> <label id="rheightLabel" class="rect_tool">height:</label>
<input id="rect_y" class="rect_tool attr_changer" title="Change rectangle Y coordinate" alt="y" size="3"/> <input id="rect_height" class="rect_tool attr_changer" title="Change rectangle height" size="3" data-attr="height"/>
<label class="rect_tool">width:</label> </div>
<input id="rect_width" class="rect_tool attr_changer" title="Change rectangle width" alt="width" size="3"/> <div class="toolset">
<label class="rect_tool">height:</label> <label id="cornerRadiusLabel" class="rect_tool">Corner Radius:</label>
<input id="rect_height" class="rect_tool attr_changer" title="Change rectangle height" alt="height" size="3"/> <input id="rect_rx" size="3" value="0" class="rect_tool" type="text" title="Change Rectangle Corner Radius" data-attr="Corner Radius"/>
<label class="rect_tool">Corner Radius:</label> </div>
<input id="rect_rx" size="3" value="0" class="rect_tool" type="text" title="Change Rectangle Corner Radius" alt="Corner Radius"/>
</div> </div>
<div id="image_panel"> <div id="image_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="toolset">
<label class="image_tool">x:</label> <label id="iwidthLabel" class="image_tool">width:</label>
<input id="image_x" class="image_tool attr_changer" title="Change image X coordinate" alt="x" size="3"/> <input id="image_width" class="image_tool attr_changer" title="Change image width" size="3" data-attr="width"/>
<label class="image_tool">y:</label> <label id="iheightLabel" class="image_tool">height:</label>
<input id="image_y" class="image_tool attr_changer" title="Change image Y coordinate" alt="y" size="3"/> <input id="image_height" class="image_tool attr_changer" title="Change image height" size="3" data-attr="height"/>
<label class="image_tool">width:</label> </div>
<input id="image_width" class="image_tool attr_changer" title="Change image width" alt="width" size="3"/> <div class="toolset">
<label class="image_tool">height:</label>
<input id="image_height" class="image_tool attr_changer" title="Change image height" alt="height" size="3"/>
<label class="image_tool">url:</label> <label class="image_tool">url:</label>
<input id="image_url" class="image_tool" type="text" title="Change URL" size="35"/> <input id="image_url" class="image_tool" type="text" title="Change URL" size="35"/>
<button id="change_image_url" style="display:none;">Change Image</button>
<div id="url_notice" title="NOTE: This image cannot be embedded. It will depend on this path to be displayed"></div>
</div>
</div> </div>
<div id="circle_panel"> <div id="circle_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="toolset">
<label class="circle_tool">cx:</label> <label class="circle_tool">cx:</label>
<input id="circle_cx" class="circle_tool attr_changer" title="Change circle's cx coordinate" alt="cx" size="3"/> <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> <label class="circle_tool">cy:</label>
<input id="circle_cy" class="circle_tool attr_changer" title="Change circle's cy coordinate" alt="cy" size="3"/> <input id="circle_cy" class="circle_tool attr_changer" title="Change circle's cy coordinate" size="3" data-attr="cy"/>
</div>
<div class="toolset">
<label class="circle_tool">r:</label> <label class="circle_tool">r:</label>
<input id="circle_r" class="circle_tool attr_changer" title="Change circle's radius" alt="r" size="3"/> <input id="circle_r" class="circle_tool attr_changer" title="Change circle's radius" size="3" data-attr="r"/>
</div>
</div> </div>
<div id="ellipse_panel"> <div id="ellipse_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="toolset">
<label class="ellipse_tool">cx:</label> <label class="ellipse_tool">cx:</label>
<input id="ellipse_cx" class="ellipse_tool attr_changer" title="Change ellipse's cx coordinate" alt="cx" size="3"/> <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> <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"/> <input id="ellipse_cy" class="ellipse_tool attr_changer" title="Change ellipse's cy coordinate" size="3" data-attr="cy"/>
</div>
<div class="toolset">
<label class="ellipse_tool">rx:</label> <label class="ellipse_tool">rx:</label>
<input id="ellipse_rx" class="ellipse_tool attr_changer" title="Change ellipse's x radius" alt="rx" size="3"/> <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> <label class="ellipse_tool">ry:</label>
<input id="ellipse_ry" class="ellipse_tool attr_changer" title="Change ellipse's y radius" alt="ry" size="3"/> <input id="ellipse_ry" class="ellipse_tool attr_changer" title="Change ellipse's y radius" size="3" data-attr="ry"/>
</div>
</div> </div>
<div id="line_panel"> <div id="line_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="toolset">
<label class="line_tool">x1:</label> <label class="line_tool">x1:</label>
<input id="line_x1" class="line_tool attr_changer" title="Change line's starting x coordinate" alt="x1" size="3"/> <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> <label class="line_tool">y1:</label>
<input id="line_y1" class="line_tool attr_changer" title="Change line's starting y coordinate" alt="y1" size="3"/> <input id="line_y1" class="line_tool attr_changer" title="Change line's starting y coordinate" size="3" data-attr="y1"/>
</div>
<div class="toolset">
<label class="line_tool">x2:</label> <label class="line_tool">x2:</label>
<input id="line_x2" class="line_tool attr_changer" title="Change line's ending x coordinate" alt="x2" size="3"/> <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> <label class="line_tool">y2:</label>
<input id="line_y2" class="line_tool attr_changer" title="Change line's ending y coordinate" alt="x1" size="3"/> <input id="line_y2" class="line_tool attr_changer" title="Change line's ending y coordinate" size="3" data-attr="y2"/>
</div>
</div> </div>
<div id="text_panel"> <div id="text_panel">
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
<label class="text_tool">x:</label> <div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
<input id="text_x" class="text_tool attr_changer" title="Change text X coordinate" alt="x" size="3"/>
<label class="text_tool">y:</label> <div class="toolset">
<input id="text_y" class="text_tool attr_changer" title="Change text Y coordinate" alt="y" size="3"/> <input id="font_family" class="text_tool" type="text" title="Change Font Family" size="12"/>
<img class="tool_button" id="tool_bold" src="images/bold.png" title="Bold Text [B]" alt="Bold"/> <div id="font_family_dropdown" class="dropdown">
<img class="tool_button" id="tool_italic" src="images/italic.png" title="Italic Text [I]" alt="Italic"/> <button></button>
<select id="font_family" class="text_tool" title="Change Font Family"> <ul>
<option selected="selected" value="serif">serif</option> <li style="font-family:serif">Serif</li>
<option value="sans-serif">sans-serif</option> <li style="font-family:sans-serif">Sans-serif</li>
<option value="cursive">cursive</option> <li style="font-family:cursive">Cursive</li>
<option value="fantasy">fantasy</option> <li style="font-family:fantasy">Fantasy</li>
<option value="monospace">monospace</option> <li style="font-family:monospace">Monospace</li>
</select> </ul>
<select id="font_size" class="text_tool" title="Change Font Size"> </div>
<option value="6pt">6pt</option> </div>
<option value="8pt">8pt</option>
<option value="10pt">10pt</option> <div class="toolset">
<option selected="selected" value="12pt">12pt</option> <label id="font_sizeLabel" class="text_tool" for="font_size">size:</label>
<option value="14pt">14pt</option> <input id="font_size" class="text_tool" title="Change Font Size" size="3" value="0" type="text"/>
<option value="16pt">16pt</option> </div>
<option value="20pt">20pt</option>
<option value="24pt">24pt</option>
<option value="32pt">32pt</option>
<option value="48pt">48pt</option>
<option value="64pt">64pt</option>
<option value="72pt">72pt</option>
<option value="80pt">80pt</option>
<option value="96pt">96pt</option>
<option value="120pt">120pt</option>
</select>
<input id="text" class="text_tool" type="text" title="Change text contents" size="35"/> <input id="text" class="text_tool" type="text" title="Change text contents" size="35"/>
</div> </div>
<div id="path_node_panel">
<div class="tool_sep"></div>
<div class="tool_button" id="tool_node_link" title="Link Control Points"></div>
<div class="tool_sep"></div>
<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>
<div class="tool_button" id="tool_node_clone" title="Clone Node"></div>
<div class="tool_button" id="tool_node_delete" title="Delete Node"></div>
</div>
</div> <!-- tools_top --> </div> <!-- tools_top -->
<div id="tools_left" class="tools_panel"> <div id="tools_left" class="tools_panel">
<img class="tool_button_current" id="tool_select" src="images/select.png" title="Select Tool [1]" alt="Select"/><br/> <div class="tool_button_current" id="tool_select" title="Select Tool [1]"></div>
<img class="tool_button" id="tool_path" src="images/path.png" title="Pencil Tool [2]" alt="Pencil"/><br/> <div class="tool_button" id="tool_fhpath" title="Pencil Tool [2]"></div>
<img class="tool_button" id="tool_line" src="images/line.png" title="Line Tool [3]" alt="Line"/><br/> <div class="tool_button" id="tool_line" title="Line Tool [3]"></div>
<img class="tool_button" id="tools_rect_show" src="images/square.png" title="Square/Rect Tool [4/Shift+4]" alt="Square"/> <div class="tool_button" id="tools_rect_show" title="Square/Rect Tool [4/Shift+4]"></div>
<img class="flyout_arrow_horiz" src="images/flyouth.png"/> <div class="flyout_arrow_horiz"></div>
<img class="tool_button" id="tools_ellipse_show" src="images/circle.png" title="Ellipse/Circle Tool [5/Shift+5]" alt="Circle"/><br/> <div class="tool_button" id="tools_ellipse_show" title="Ellipse/Circle Tool [5/Shift+5]"></div>
<img class="flyout_arrow_horiz" src="images/flyouth.png"/> <div class="flyout_arrow_horiz"></div>
<img class="tool_button" id="tool_text" src="images/text.png" title="Text Tool [6]" alt="Text"/> <div class="tool_button" id="tool_path" title="Path Tool [7]"></div>
<img class="tool_button" id="tool_poly" src="images/polygon.png" title="Poly Tool [7]" alt="Poly"/> <div class="tool_button" id="tool_text" title="Text Tool [6]"></div>
<img class="tool_button" id="tool_image" src="images/image.png" title="Image Tool [8]" alt="Image"/> <div class="tool_button" id="tool_image" title="Image Tool [8]"></div>
<img class="tool_button" id="tool_zoom" src="images/zoom.png" title="Zoom Tool [Ctrl+Up/Down]" alt="Zoom"/> <div class="tool_button" id="tool_zoom" title="Zoom Tool [Ctrl+Up/Down]"></div>
</div> <!-- tools_left --> </div> <!-- tools_left -->
<div id="tools_bottom" class="tools_panel"> <div id="tools_bottom" class="tools_panel">
<!-- Zoom buttons --> <!-- Zoom buttons -->
<div id="zoom_panel"> <div id="zoom_panel" class="magic_field">
<span class="zoom_tool">zoom:</span> <span id="zoomLabel" class="zoom_tool label">zoom:</span>
<input id="zoom" class="zoom_tool" title="Change zoom level" alt="Zoom %" size="3" value="100" type="text"/> <input id="zoom" class="zoom_tool" title="Change zoom level" size="3" value="100" type="text" />
<div id="zoom_dropdown"> <div id="zoom_dropdown" class="dropdown">
<button></button> <button></button>
<ul> <ul>
<li>100%</li>
<li data-val="content">Fit to content</li>
<li data-val="selection">Fit to selection</li>
<li 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> <li>1000%</li>
<li>400%</li>
<li>200%</li>
<li>100%</li>
<li>50%</li>
<li>25%</li>
<li id="fit_to_canvas" data-val="canvas">Fit to canvas</li>
<li id="fit_to_sel" data-val="selection">Fit to selection</li>
<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>
<li>100%</li>
</ul> </ul>
</div> </div>
<img class="tool_sep" src="images/sep.png" alt="|"/> <div class="tool_sep"></div>
</div> </div>
<div id="tools_bottom_2"> <div id="tools_bottom_2">
<table> <table>
<tr> <tr>
<td>fill:</td> <td id="fill_tool_bottom" class="label">fill:</td>
<td><div id="fill_color" class="color_block" title="Change fill color"></div></td> <td><div id="fill_bg"></div><div id="fill_color" class="color_block" title="Change fill color"></div></td>
<td><div id="fill_opacity">100%</div></td> <td colspan="3"><div id="fill_opacity" class="label">100%</div></td>
</tr><tr> </tr><tr>
<td>stroke:</td> <td id="stroke_tool_bottom" class="label">stroke:</td>
<td><div id="stroke_color" class="color_block" title="Change stroke color"></div></td> <td><div id="stroke_bg"></div><div id="stroke_color" class="color_block" title="Change stroke color"></div></td>
<td><div id="stroke_opacity">100 %</div></td> <td><div id="stroke_opacity" class="label">100 %</div></td>
<td> <td>
<input id="stroke_width" title="Change stroke width" alt="Stroke Width" size="2" value="5" type="text"/> <input id="stroke_width" title="Change stroke width" size="2" value="5" type="text" data-attr="Stroke Width"/>
</td> </td>
<td> <td>
<select id="stroke_style" title="Change stroke dash style"> <select id="stroke_style" title="Change stroke dash style">
@ -279,22 +352,22 @@
<div id="tools_bottom_3"> <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 id="palette_holder"><div id="palette" title="Click to change fill color, shift-click to change stroke color"></div></div>
<div id="copyright">Powered by <a href="http://svg-edit.googlecode.com/" target="_blank">SVG-edit v2.4-unstable</a></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> </div>
<!-- hidden divs --> <!-- hidden divs -->
<div id="color_picker"></div> <div id="color_picker"></div>
<div id="tools_rect" class="tools_flyout"> <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_rect" class="tool_flyout_button" title="Rectangle"></div>
<div id="tool_square" class="tool_flyout_button" title="Square"></div>
<div id="tool_fhrect" class="tool_flyout_button" title="Free-Hand Rectangle"></div> <div id="tool_fhrect" class="tool_flyout_button" title="Free-Hand Rectangle"></div>
</div> </div>
<div id="tools_ellipse" class="tools_flyout"> <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_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 id="tool_fhellipse" class="tool_flyout_button" title="Free-Hand Ellipse"></div>
</div> </div>
@ -304,11 +377,11 @@
<div id="svg_source_overlay"></div> <div id="svg_source_overlay"></div>
<div id="svg_source_container"> <div id="svg_source_container">
<div id="tool_source_back" class="toolbar_button"> <div id="tool_source_back" class="toolbar_button">
<button id="tool_source_save">Save</button> <button id="tool_source_save">Apply Changes</button>
<button id="tool_source_cancel">Cancel</button> <button id="tool_source_cancel">Cancel</button>
</div> </div>
<form> <form>
<textarea id="svg_source_textarea"></textarea> <textarea id="svg_source_textarea" spellcheck="false"></textarea>
</form> </form>
</div> </div>
</div> </div>
@ -317,31 +390,97 @@
<div id="svg_docprops_overlay"></div> <div id="svg_docprops_overlay"></div>
<div id="svg_docprops_container"> <div id="svg_docprops_container">
<div id="tool_docprops_back" class="toolbar_button"> <div id="tool_docprops_back" class="toolbar_button">
<button id="tool_docprops_save">Save</button> <button id="tool_docprops_save">OK</button>
<button id="tool_docprops_cancel">Cancel</button> <button id="tool_docprops_cancel">Cancel</button>
<div id="change_background">
<label>Canvas Background:</label>
<div id="bkgnd_color" class="color_block" title="Change background color/opacity"></div>
</div> </div>
<div id="change_resolution">
<label>Resolution:</label> <fieldset id="svg_docprops_docprops">
<select id="resolution" label="Resolution:"> <legend id="svginfo_image_props">Image Properties</legend>
<option selected="selected">640x480</option> <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>800x600</option>
<option>1024x768</option> <option>1024x768</option>
<option>1280x960</option> <option>1280x960</option>
<option>1600x1200</option> <option>1600x1200</option>
<option>Fit to Content</option> <option id="fitToContent" value="content">Fit to Content</option>
<option>Custom</option>
</select> </select>
</div> </label>
</div> </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>
</fieldset>
</div> </div>
</div> </div>
<div id="dialog_box">
<div id="dialog_box_overlay"></div>
<div id="dialog_container">
<div id="dialog_content">
Test message
</div>
<div id="dialog_buttons"></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}