zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Check in another fix for Issue 93: rotated poly points drag ok now. Check in Erik's patch for widgetizing SVG-edit (Issue 99) 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@413 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Jeff Schiller 2009-08-19 03:42:27 +00:00
parent 546c96ed14
commit 8550d59362
8 changed files with 145 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
editor/svg-editor.css
View File

@ -31,6 +31,7 @@ body {
vertical-align: middle;
width: 640px;
height: 480px;
-apple-dashboard-region:dashboard-region(control rectangle 0px 0px 0px 0px); /* for widget regions that shouldn't react to dragging */
}
#svg_editor div#palette_holder {

1
editor/svg-editor.html
View File

@ -42,6 +42,7 @@
<div>
<img class="tool_sep" src="images/sep.png" alt="|"/>
<img class="tool_button" id="tool_clear" src="images/clear.png" title="New Image [N]" alt="Clear" />
<img style="display:none" class="tool_button" id="tool_open" src="images/open.png" title="Open Image [O]" alt="Open"/>
<img class="tool_button" id="tool_save" src="images/save.png" title="Save Image [S]" alt="Save"/>
<img class="tool_button" id="tool_source" src="images/source.png" title="Edit Source [U]" alt="Source"/>
</div>

46
editor/svg-editor.js
View File

@ -33,7 +33,35 @@ function svg_edit_setup() {
// 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));
if(window.opera && window.opera.io && window.opera.io.filesystem)
{
try {
window.opera.io.filesystem.browseForSave(
new Date().getTime(), /* mountpoint name */
"", /* default location */
function(file) {
try {
if (file) {
var fstream = file.open(file, "w");
fstream.write(svg, "UTF-8");
fstream.close();
}
}
catch(e) {
console.log("Write to file failed.");
}
},
false /* not persistent */
);
}
catch(e) {
console.log("Save file failed.");
}
}
else
{
window.open("data:image/svg+xml;base64," + Utils.encode64(svg));
}
};
// called when we've selected a different element
@ -469,6 +497,10 @@ function svg_edit_setup() {
var clickSave = function(){
svgCanvas.save();
};
var clickOpen = function(){
svgCanvas.open();
};
var clickUndo = function(){
if (svgCanvas.getUndoStackSize() > 0)
@ -568,6 +600,7 @@ function svg_edit_setup() {
$('#tool_poly').click(clickPoly);
$('#tool_clear').click(clickClear);
$('#tool_save').click(clickSave);
$('#tool_open').click(clickOpen);
$('#tool_source').click(showSourceEditor);
$('#tool_source_cancel,#svg_source_overlay').click(cancelSourceEditor);
$('#tool_source_save').click(saveSourceEditor);
@ -594,7 +627,7 @@ function svg_edit_setup() {
// added these event handlers for all the push buttons so they
// behave more like buttons being pressed-in and not images
function setPushButtons() {
var toolnames = ['clear','save','source','delete','delete_multi','paste','clone','clone_multi','move_top','move_bottom'];
var toolnames = ['clear','open','save','source','delete','delete_multi','paste','clone','clone_multi','move_top','move_bottom'];
var all_tools = '';
var cur_class = 'tool_button_current';
@ -646,6 +679,7 @@ function svg_edit_setup() {
['7', clickPoly],
[modKey+'N', function(evt){clickClear();evt.preventDefault();}],
[modKey+'S', function(evt){editingsource?saveSourceEditor():clickSave();evt.preventDefault();}],
[modKey+'O', function(evt){clickOpen();evt.preventDefault();}],
['del', function(evt){deleteSelected();evt.preventDefault();}],
['backspace', function(evt){deleteSelected();evt.preventDefault();}],
['shift+up', moveToTopSelected],
@ -829,5 +863,13 @@ function svg_edit_setup() {
$('#stroke_width').SpinButton({ min: 1, max: 99, step: 1, callback: changeStrokeWidth });
$('#angle').SpinButton({ min: -359, max: 359, step: 5, callback: changeRotationAngle });
// if Opera and in widget form, enable the Open button
if (window.opera) {
opera.postError('opera.io=' + opera.io);
if(opera && opera.io && opera.io.filesystem) {
$('#tool_open').show();
}
}
return svgCanvas;
};

63
editor/svgcanvas.js
View File

@ -1360,8 +1360,6 @@ function SvgCanvas(c)
freehand_max_y = Math.max(y, freehand_max_y);
// break; missing on purpose
case "path":
// var dx = x - start_x;
// var dy = y - start_y;
start_x = x;
start_y = y;
d_attr += + x + "," + y + " ";
@ -1379,8 +1377,29 @@ function SvgCanvas(c)
// if we are dragging a point, let's move it
if (current_poly_pt_drag != -1 && current_poly) {
var i = current_poly_pt_drag * 2;
var dx = x - current_poly_pts[i],
dy = y - current_poly_pts[i+1];
// if the image is rotated, then we must modify the x,y mouse coordinates
// and rotate them into the shape's rotated coordinate system
// FIXME: the problem is that the element's rotation is controlled by
// two things: an angle and a rotation point (the center of the element).
// If the element's bbox is changed, its center changes. In this case,
// we keep the rotation center where it is (parse it out from the transform
// attribute), and move the poly point appropriately). This looks good while
// dragging, but looks funny when you subsequently rotate the element again.
if (angle) {
// extract the shape's (potentially) old 'center' from the transform attribute
var matched_numbers = current_poly.getAttribute('transform').match(/([\d\.\-\+]+)/g);
var cx = parseFloat(matched_numbers[1]),
cy = parseFloat(matched_numbers[2]);
var bbox = canvas.getBBox(current_poly);
var dx = x - cx, dy = y - cy;
var r = Math.sqrt( dx*dx + dy*dy );
var theta = Math.atan2(dy,dx) - angle;
x = cx + r * Math.cos(theta);
y = cy + r * Math.sin(theta);
}
current_poly_pts[i] = x;
current_poly_pts[i+1] = y;
@ -1394,7 +1413,7 @@ function SvgCanvas(c)
arr[0] = ["M", curx, ",", cury].join('');
for (var j = 1; j < len; ++j) {
var px = current_poly_pts[j*2], py = current_poly_pts[j*2+1];
arr[j] = ["l", (px-curx), ",", (py-cury)].join('');
arr[j] = ["l", parseInt(px-curx), ",", parseInt(py-cury)].join('');
curx = px;
cury = py;
}
@ -1785,6 +1804,40 @@ function SvgCanvas(c)
// public functions
this.open = function() {
if(window.opera && window.opera.io && window.opera.io.filesystem)
{
try {
window.opera.io.filesystem.browseForFile(
new Date().getTime(), /* mountpoint name */
"", /* default location */
function(file) {
try {
if (file) {
fstream = file.open(file, "r");
var output = "";
while (!fstream.eof) {
output += fstream.readLine("UTF-16");
}
canvas.setSvgString(output); /* 'this' is bound to the filestream object here */
}
}
catch(e) {
console.log("Reading file failed.");
}
},
false, /* not persistent */
false, /* no multiple selections */
"*.svg" /* file extension filter */
);
}
catch(e) {
console.log("Open file failed.");
}
}
};
this.save = function() {
// remove the selected outline before serializing
this.clearSelection();

12
widget/Makefile Normal file
View File

@ -0,0 +1,12 @@
ZIP = zip
PACKAGE = svgedit-2.3
FILEMASK = \*.html \*.css \*.js \*.txt \*.png \*.jpg \*.gif \*.svg \*.xml
clean:
rm -f *.*~
rm -rf ./editor/
widget: clean
rm -f $(PACKAGE).wgt
cp -r ../editor .
$(ZIP) $(PACKAGE).wgt -r . -i $(FILEMASK)

16
widget/config.xml Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0"?>
<widget>
<widgetname>SVG Edit</widgetname>
<description>
A simple SVG Editor.
</description>
<width>800</width>
<height>600</height>
<id>
<name>SVG Edit</name>
<revised>2009-08</revised>
</id>
<feature name="http://xmlns.opera.com/fileio">
<param name="folderhint" value="home" />
</feature>
</widget>

11
widget/index.html Normal file
View File

@ -0,0 +1,11 @@
<html>
<head>
<title>SVG Edit</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<object id="container" data="editor/svg-editor.html">
Failed to load for some reason.
</object>
</body>
</html>

2
widget/style.css Normal file
View File

@ -0,0 +1,2 @@
body { margin: 0px; padding: 0px; }
#container { width: 100%; height: 100%; border: none; }