More work on properly sizing imported SVG.

Still ignores preserveAspectRatio, percentages, units on import <svg>.
Also ignores zoom level of SVG-edit.



git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1423 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Jeff Schiller 2010-02-21 16:36:50 +00:00
parent 5b0f6e480c
commit fc82f2965b
3 changed files with 43 additions and 51 deletions

View File

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="205.5" xmlns="http://www.w3.org/2000/svg" height="255.87"> <svg width="100" xmlns="http://www.w3.org/2000/svg" height="100" viewBox="0 0 205.5 255.87">
<g display="inline"> <g display="inline">
<title>Layer 1</title> <title>Layer 1</title>
<path id="svg_1" d="m10.671,231.42c89.543,56.086,188.11-10.029,193.33-94.559-1.7286-101.53-92.171-150.4-160.16-128.01,35.129,15.844,73.4,62.729,73.871,88.013-3.4428,7.5157-5.8714,16.373,1.5286,18.844-2,12.857-18.486,33.571-21.043,40.643-2.5571,7.0714,2.2143,9.8443,5.4429,10.357,0.2,6.0586-4.4429,8.3572-5.3572,12.156-7.9,3.13-8.4714,9.9872-7.3286,14.844-19.714,18.571-20.571,27.143-80.286,37.714z" stroke="#000" stroke-width="5" fill="#f6c700"/> <path id="svg_1" d="m10.671,231.42c89.543,56.086,188.11-10.029,193.33-94.559-1.7286-101.53-92.171-150.4-160.16-128.01,35.129,15.844,73.4,62.729,73.871,88.013-3.4428,7.5157-5.8714,16.373,1.5286,18.844-2,12.857-18.486,33.571-21.043,40.643-2.5571,7.0714,2.2143,9.8443,5.4429,10.357,0.2,6.0586-4.4429,8.3572-5.3572,12.156-7.9,3.13-8.4714,9.9872-7.3286,14.844-19.714,18.571-20.571,27.143-80.286,37.714z" stroke="#000" stroke-width="5" fill="#f6c700"/>

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -1460,7 +1460,6 @@ function svg_edit_setup() {
svgCanvas.open(); svgCanvas.open();
}; };
var clickImport = function(){ var clickImport = function(){
svgCanvas.import();
}; };
var clickUndo = function(){ var clickUndo = function(){

View File

@ -2164,11 +2164,14 @@ function BatchCommand(text) {
start_transform = child.getAttribute("transform"); start_transform = child.getAttribute("transform");
var childTlist = canvas.getTransformList(child); var childTlist = canvas.getTransformList(child);
var newxlate = svgroot.createSVGTransform(); // some children might not have a transform (<metadata>, <defs>, etc)
newxlate.setTranslate(tx,ty); if (childTlist) {
childTlist.insertItemBefore(newxlate, 0); var newxlate = svgroot.createSVGTransform();
batchCmd.addSubCommand( recalculateDimensions(child) ); newxlate.setTranslate(tx,ty);
start_transform = old_start_transform; childTlist.insertItemBefore(newxlate, 0);
batchCmd.addSubCommand( recalculateDimensions(child) );
start_transform = old_start_transform;
}
} }
} }
start_transform = old_start_transform; start_transform = old_start_transform;
@ -2263,6 +2266,7 @@ function BatchCommand(text) {
} }
// else, it's a non-group // else, it's a non-group
else { else {
// FIXME: box might be null for some elements (<metadata> etc), need to handle this
var box = canvas.getBBox(selected), var box = canvas.getBBox(selected),
oldcenter = {x: box.x+box.width/2, y: box.y+box.height/2}, oldcenter = {x: box.x+box.width/2, y: box.y+box.height/2},
newcenter = transformPoint(box.x+box.width/2, box.y+box.height/2, newcenter = transformPoint(box.x+box.width/2, box.y+box.height/2,
@ -2706,7 +2710,6 @@ function BatchCommand(text) {
} }
tobj.text = "rotate(" + xform.angle + " " + tobj.cx*z + "," + tobj.cy*z + ")"; tobj.text = "rotate(" + xform.angle + " " + tobj.cx*z + "," + tobj.cy*z + ")";
break; break;
// TODO: matrix, skewX, skewY
} }
return tobj; return tobj;
}; };
@ -4484,7 +4487,7 @@ function BatchCommand(text) {
return; return;
} }
// TODO: Make sure current_path isn't null at this point // Make sure current_path isn't null at this point
if(!current_path) return; if(!current_path) return;
current_path_oldd = getD(); current_path_oldd = getD();
@ -5023,7 +5026,7 @@ function BatchCommand(text) {
current_path_pts.splice(pt*2 + 2, 0, abs_x, abs_y); current_path_pts.splice(pt*2 + 2, 0, abs_x, abs_y);
// TODO: This should select the new path points but breaks // TODO: This should select the new path points but breaks
// when doing several times seleting many nodes // when doing several times selecting many nodes
nums.push(pt + i); nums.push(pt + i);
nums.push(pt + i + 1); nums.push(pt + i + 1);
} }
@ -5525,9 +5528,6 @@ function BatchCommand(text) {
this.open = function() { this.open = function() {
// Nothing by default, handled by optional widget/extension // Nothing by default, handled by optional widget/extension
}; };
this.import = function() {
// Nothing by default, handled by optional widget/extension
};
// Function: save // Function: save
// Serializes the current drawing into SVG XML text and returns it to the 'saved' handler. // Serializes the current drawing into SVG XML text and returns it to the 'saved' handler.
@ -5693,8 +5693,9 @@ function BatchCommand(text) {
// Returns: // Returns:
// This function returns false if the import was unsuccessful, true otherwise. // This function returns false if the import was unsuccessful, true otherwise.
// TODO: import should happen in top-left of current zoomed viewport
// TODO: create a new layer for the imported SVG // TODO: create a new layer for the imported SVG
// TODO: properly size the new group // TODO: properly re-identify all elements and references in the imported SVG
this.importSvgString = function(xmlString) { this.importSvgString = function(xmlString) {
try { try {
// convert string into XML document // convert string into XML document
@ -5708,9 +5709,33 @@ function BatchCommand(text) {
var importedNode = svgdoc.importNode(newDoc.documentElement, true); var importedNode = svgdoc.importNode(newDoc.documentElement, true);
if (current_layer) { if (current_layer) {
// TODO: properly handle if width/height are not specified or if in percentages
// TODO: properly handle if width/height are in units (px, etc)
var innerw = importedNode.getAttribute("width"),
innerh = importedNode.getAttribute("height"),
innervb = importedNode.getAttribute("viewBox"),
// if no explicit viewbox, create one out of the width and height
vb = innervb ? innervb.split(" ") : [0,0,innerw,innerh];
for (var j = 0; j < 4; ++j)
vb[j] = Number(vb[j]);
// TODO: properly handle preserveAspectRatio
var canvasw = Number(svgcontent.getAttribute("width")),
canvash = Number(svgcontent.getAttribute("height"));
// imported content should be 1/3 of the canvas on its largest dimension
if (innerh > innerw) {
var ts = "scale(" + (canvash/3)/vb[3] + ")";
}
else {
var ts = "scale(" + (canvash/3)/vb[2] + ")";
}
// add all children of the imported <svg> to the <g> we create // add all children of the imported <svg> to the <g> we create
var g = svgdoc.createElementNS(svgns, "g"); var g = svgdoc.createElementNS(svgns, "g");
while (importedNode.hasChildNodes()) { g.appendChild(importedNode.firstChild); } while (importedNode.hasChildNodes())
g.appendChild(importedNode.firstChild);
if (ts)
g.setAttribute("transform", ts);
current_layer.appendChild(g); current_layer.appendChild(g);
} }
@ -5752,42 +5777,10 @@ function BatchCommand(text) {
} }
deepdive(importedNode); deepdive(importedNode);
// var content = $(svgcontent);
// var attrs = {
// id: 'svgcontent',
// overflow: 'visible'
// };
// determine proper size
// if (content.attr("viewBox")) {
// var vb = content.attr("viewBox").split(' ');
// attrs.width = vb[2];
// attrs.height = vb[3];
// }
// // handle content that doesn't have a viewBox
// else {
// $.each(['width', 'height'], function(i, dim) {
// // Set to 100 if not given
// var val = content.attr(dim) || 100;
//
// if((val+'').substr(-1) === "%") {
// // Use user units if percentage given
// attrs[dim] = parseInt(val);
// } else {
// attrs[dim] = convertToNum(dim, val);
// }
// });
// }
// content.attr(attrs);
batchCmd.addSubCommand(new InsertElementCommand(svgcontent)); batchCmd.addSubCommand(new InsertElementCommand(svgcontent));
// update root to the correct size
// var changes = content.attr(["width", "height"]);
// batchCmd.addSubCommand(new ChangeElementCommand(svgroot, changes));
// reset zoom // reset zoom - TODO: why?
current_zoom = 1; // current_zoom = 1;
// identify layers // identify layers
// identifyLayers(); // identifyLayers();