changeset 415:17a44134af07

SvgEditor: svg-edit adapted
author Reimar Bauer <rb.proj AT googlemail DOT com>
date Sat, 12 Sep 2009 00:11:50 +0200
parents 16562b44f9ae
children e5eeb143b2ae
files data/plugin/action/SvgEditor.py htdocs/svg-edit/editor/svg-editor.css htdocs/svg-edit/editor/svg-editor.js
diffstat 3 files changed, 77 insertions(+), 15 deletions(-) [+]
line wrap: on
line diff
--- a/data/plugin/action/SvgEditor.py	Fri Sep 11 22:33:42 2009 +0200
+++ b/data/plugin/action/SvgEditor.py	Sat Sep 12 00:11:50 2009 +0200
@@ -113,9 +113,9 @@
 <!--script type="text/javascript" src="%(htdocs)s/js-hotkeys/jquery.hotkeys-0.7.9.js"></script-->
 <script type="text/javascript" src="%(htdocs)s/jgraduate/jpicker-1.0.9.min.js"></script>
 <script type="text/javascript" src="%(htdocs)s/jgraduate/jquery.jgraduate.js"></script>
+<!--script type="text/javascript" src="%(htdocs)s/jgraduate/jquery.jgraduate.min.js"></script-->
 <script type="text/javascript" src="%(htdocs)s/spinbtn/JQuerySpinBtn.js"></script>
 <!--script type="text/javascript" src="%(htdocs)s/spinbtn/JQuerySpinBtn.min.js"></script-->
-<!--script type="text/javascript" src="%(htdocs)s/jgraduate/jquery.jgraduate.min.js"></script-->
 <script type="text/javascript" src="%(htdocs)s/svgcanvas.js"></script>
 <!--script type="text/javascript" src="%(htdocs)s/svgcanvas.min.js"></script-->
 <script type="text/javascript" src="%(htdocs)s/svg-editor.js"></script>
@@ -174,6 +174,8 @@
             <option value="0.3">30 %%</option>
             <option value="0.2">20 %%</option>
             <option value="0.1">10 %%</option>
+            <option value="0">0 %%</option>
+
         </select>
         <span class="selected_tool">angle:</span>
         <input id="angle" class="selected_tool" title="Change rotation angle" alt="Rotation Angle" size="2" value="0" type="text"/>
@@ -198,7 +200,14 @@
         <option value="smallest">smallest object</option>
         <option value="page">page</option>
         </select>
-    </div>
+        <img class="tool_sep" src="(htdocs)s/images/sep.png" alt="|"/>
+        <img class="tool_button" id="tool_group" src="(htdocs)s/images/shape_group.png" title="Group Elements [G]" alt="Group"/>
+        </div>
+        <div id="g_panel">
+        <img class="tool_sep" src="images/sep.png" alt="|"/>
+        <img class="tool_button" id="tool_ungroup" src="(htdocs)s/images/shape_ungroup.png" title="Ungroup Elements [G]" alt="Ungroup"/>
+        </div>
+
 
     <div id="rect_panel">
         <img class="tool_sep" src="%(htdocs)s/images/sep.png" alt="|"/>
@@ -213,6 +222,20 @@
         <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>
+    <div id="image_panel">
+         <img class="tool_sep" src="%(htdocs)s/images/sep.png" alt="|"/>
+         <label class="image_tool">x:</label>
+         <input id="image_x" class="image_tool attr_changer" title="Change image X coordinate" alt="x" size="3"/>
+         <label class="image_tool">y:</label>
+         <input id="image_y" class="image_tool attr_changer" title="Change image Y coordinate" alt="y" size="3"/>
+         <label class="image_tool">width:</label>
+         <input id="image_width" class="image_tool attr_changer" title="Change image width" alt="width" size="3"/>
+         <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>
+         <input id="image_url" class="image_tool" type="text" title="Change URL" size="35"/>
+    </div>
+
 
     <div id="circle_panel">
         <img class="tool_sep" src="%(htdocs)s/images/sep.png" alt="|"/>
@@ -294,6 +317,7 @@
     <img class="flyout_arrow_horiz" src="%(htdocs)s/images/flyouth.png"/>
     <img class="tool_button" id="tool_text" src="%(htdocs)s/images/text.png" title="Text Tool [6]" alt="Text"/>
     <img class="tool_button" id="tool_poly" src="%(htdocs)s/images/polygon.png" title="Poly Tool [7]" alt="Poly"/>
+    <img class="tool_button" id="tool_image" src="%(htdocs)s/images/image.png" title="Image Tool [8]" alt="Image"/>
 </div> <!-- tools_left -->
 
 <div id="tools_bottom" class="tools_panel">
--- a/htdocs/svg-edit/editor/svg-editor.css	Fri Sep 11 22:33:42 2009 +0200
+++ b/htdocs/svg-edit/editor/svg-editor.css	Sat Sep 12 00:11:50 2009 +0200
@@ -3,6 +3,9 @@
 }
 
 #svg_editor {
+	position: relative;
+	width: 660px;
+	height: 640px;
 	font-size: 8pt;
 	font-family: Verdana, Helvetica, Arial;
 	color: #000000;
@@ -26,6 +29,7 @@
 }
 
 #svg_editor #svgcanvas {
+	position: relative;
 	background-color: #FFFFFF;
 	text-align: center;
 	vertical-align: middle;
@@ -35,6 +39,7 @@
 }
 
 #svg_editor div#palette_holder {
+	position: relative;
 	overflow-x: scroll;
 	overflow-y: hidden;
 	height: 31px;
@@ -57,11 +62,12 @@
 }
 
 #svg_editor div#workarea {
-	position:absolute;
-	top: 70px;
+	position: relative;
+	width: 100%;
+	top: 80px;
 	left: 40px;
 	right: 2px;
-	bottom: 60px;
+	bottom: 0px;
 	background-color: #A0A0A0;
 	border: 1px solid #808080;
 	overflow: auto;
@@ -74,6 +80,7 @@
 }
 
 #svg_editor #logo {
+	display: None;
 	position: absolute;
 	top: 4px;
 	left: 4px;
@@ -91,7 +98,7 @@
 	left: 38px;
 	right: 2px;
 	top: 2px;
-	height: 68px;
+	height: 58px;
 	border-bottom: none;
 }
 
@@ -204,6 +211,7 @@
 }
 
 #svg_editor .tool_button_current {
+	position: relative;
 	border-left: 1px solid #808080;
 	border-top: 1px solid #808080;
 	border-right: 1px solid #FFFFFF;
@@ -212,11 +220,13 @@
 }
 
 #svg_editor .tool_button_disabled {
+	position: relative;
 	opacity: 0.5;
 	cursor: default;
 }
 
 #svg_editor .tool_sep {
+	position: relative;
 	width: 2px;
 	height: 24px;
 	margin: 2px;
@@ -272,6 +282,7 @@
 }
 
 #svg_editor #tools_rect .tool_flyout_button_current, #svg_editor #tools_ellipse .tool_flyout_button_current {
+	position: relative;
 	border-left: 1px solid #808080;
 	border-top: 1px solid #808080;
 	border-right: 1px solid #FFFFFF;
@@ -280,14 +291,16 @@
 }
 
 #svg_editor #tools_bottom {
-	position: absolute;
+	position: relative;
+	top: 80px;
 	left: 40px;
 	right: 2px;
 	bottom: 2px;
-	height: 60px;
+	height: 0px;
 }
 
 #svg_editor #tools_bottom_1 {
+	display: none;
 	width: 115px;
 	float: left;
 }
@@ -298,6 +311,7 @@
 }
 
 #svg_editor #tools_bottom_3 {
+	position: relative;
 }
 
 #svg_editor #copyright {
--- a/htdocs/svg-edit/editor/svg-editor.js	Fri Sep 11 22:33:42 2009 +0200
+++ b/htdocs/svg-edit/editor/svg-editor.js	Sat Sep 12 00:11:50 2009 +0200
@@ -10,7 +10,21 @@
 
 	var isMac = false; //(navigator.platform.indexOf("Mac") != -1);
 	var modKey = ""; //(isMac ? "meta+" : "ctrl+");
+	var htdocs = document.getElementById("htdocs").innerHTML.replace('<!-- ', '').replace(' -->', '');
+	var svg = document.getElementById("svgdata");
 	var svgCanvas = new SvgCanvas(document.getElementById("svgcanvas"));
+	var filecontent =  svg.innerHTML;
+	// because moin uses currently HTML 4.0.1 we send the data as a comment in the HTML code
+	filecontent = filecontent.replace('<!-- ', '').replace(' -->', '');
+	if (filecontent != '') {
+	    if (!svgCanvas.setSvgString(filecontent)) {
+	        if(!confirm('There were parsing errors in your SVG source.\nRevert back to original SVG source?') ) {
+	           return false;
+	        }
+	    }
+	    svgCanvas.clearSelection();
+	}
+
 
 	var setSelectMode = function() {
 		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
@@ -36,7 +50,17 @@
 	// with a gradient will appear black in Firefox, etc.  See bug 308590
 	// https://bugzilla.mozilla.org/show_bug.cgi?id=308590
 	var saveHandler = function(window,svg) {
-		window.open("data:image/svg+xml;base64," + Utils.encode64(svg));
+	var titlename = window.content.parent.document.title.split('-')[0];
+	titlename = titlename.replace(' ', '');
+	var svg_data = Utils.encode64(svg);
+	var pagename = titlename.split(':')[0];
+	var svg_target = titlename.split(':')[1];
+	$.post(
+	        pagename,
+	        {'action': "SvgEditor", 'do': "save", 'target': svg_target, 'svg_data': svg_data}
+	      );
+
+		//window.open("data:image/svg+xml;base64," + Utils.encode64(svg));
 	};
 
 	// called when we've selected a different element
@@ -429,14 +453,14 @@
 			flyoutspeed = 'normal';
 			svgCanvas.setMode('square');
 		}
-		$('#tools_rect_show').attr('src', 'images/square.png');
+		$('#tools_rect_show').attr('src', htdocs + 'images/square.png');
 	};
 
 	var clickRect = function(){
 		if (toolButtonClick('#tools_rect_show')) {
 			svgCanvas.setMode('rect');
 		}
-		$('#tools_rect_show').attr('src', 'images/rect.png');
+		$('#tools_rect_show').attr('src', htdocs + 'images/rect.png');
 	};
 
 	var clickImage = function(){
@@ -449,7 +473,7 @@
 		if (toolButtonClick('#tools_rect_show')) {
 			svgCanvas.setMode('fhrect');
 		}
-		$('#tools_rect_show').attr('src', 'images/freehand-square.png');
+		$('#tools_rect_show').attr('src', htdocs + 'images/freehand-square.png');
 	};
 
 	var clickCircle = function(){
@@ -457,21 +481,21 @@
 			flyoutspeed = 'normal';
 			svgCanvas.setMode('circle');
 		}
-		$('#tools_ellipse_show').attr('src', 'images/circle.png');
+		$('#tools_ellipse_show').attr('src', htdocs + 'images/circle.png');
 	};
 
 	var clickEllipse = function(){
 		if (toolButtonClick('#tools_ellipse_show')) {
 			svgCanvas.setMode('ellipse');
 		}
-		$('#tools_ellipse_show').attr('src', 'images/ellipse.png');
+		$('#tools_ellipse_show').attr('src', htdocs + 'images/ellipse.png');
 	};
 
 	var clickFHEllipse = function(){
 		if (toolButtonClick('#tools_ellipse_show')) {
 			svgCanvas.setMode('fhellipse');
 		}
-		$('#tools_ellipse_show').attr('src', 'images/freehand-circle.png');
+		$('#tools_ellipse_show').attr('src', htdocs + 'images/freehand-circle.png');
 	};
 
 	var clickText = function(){