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

Begin change of unit system - currently no longer uses CSS units to allow decent interoperability

Browse Source 
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1809 eee81c28-f429-11dd-99c0-75d572ba1ddd
This commit is contained in:
Alexis Deveria
2010-10-19 17:20:28 +00:00
parent 91f14298e0
commit b7e8adca8a
3 changed files with 148 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
editor/svg-editor.html
View File

@@ -701,16 +701,30 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<label>
<span id="svginfo_unit">Base Unit:</span>
<select id="base_unit">
<option value="px" selected>Pixels</option>
<option value="px">Pixels</option>
<option value="cm">Centimeters</option>
<option value="mm">Millimeters</option>
<option value="in">Inches</option>
<option value="pt">Points</option>
<option value="pc">Picas</option>
<option value="em">Ems</option>
<option value="ex">Exs</option>
</select>
</label>
<!-- Should this be an export option instead? -->
<!--
<span id="svginfo_unit_system">Unit System:</span>
<label>
<input type="radio" name="unit_system" value="single" checked="checked"/>
<span id="svginfo_single_type_unit">Single type unit</span>
<small id="svginfo_single_type_unit_sub">CSS unit type is set on root element. If a different unit type is entered in a text field, it is converted back to user units on export.</small>
</label>
<label>
<input type="radio" name="unit_system" value="multi"/>
<span id="svginfo_multi_units">Multiple CSS units</span>
<small id="svginfo_single_type_unit_sub">Attributes can be given different CSS units, which may lead to inconsistant results among viewers.</small>
</label>
-->
</fieldset>
</fieldset>

43
editor/svg-editor.js
View File

@@ -1389,6 +1389,8 @@
$('#tool_reorient').toggleClass('disabled', ang == 0);
return;
}
var unit = curConfig.baseUnit !== 'px' ? curConfig.baseUnit : null;
var is_node = currentMode == 'pathedit'; //elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false;
var menu_items = $('#cmenu_canvas li');
$('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,\
@@ -1412,7 +1414,7 @@
$('#blur_slider').slider('option', 'value', blurval);
if(svgCanvas.addedNew) {
if(elname == 'image') {
if(elname === 'image') {
// Prompt for URL if not a data URL
if(svgCanvas.getHref(elem).indexOf('data:') !== 0) {
promptImgURL();
@@ -1429,6 +1431,7 @@
$('#xy_panel').hide();
} else {
var x,y;
// Get BBox vals for g, polyline and path
if(['g', 'polyline', 'path'].indexOf(elname) >= 0) {
var bb = svgCanvas.getStrokedBBox([elem]);
@@ -1440,6 +1443,12 @@
x = elem.getAttribute('x');
y = elem.getAttribute('y');
}
if(unit) {
x = svgCanvas.convertUnit(x);
y = svgCanvas.convertUnit(y);
}
$('#selected_x').val(x || 0);
$('#selected_y').val(y || 0);
$('#xy_panel').show();
@@ -1460,6 +1469,10 @@
if(point) {
var seg_type = $('#seg_type');
if(unit) {
point.x = svgCanvas.convertUnit(point.x);
point.y = svgCanvas.convertUnit(point.y);
}
$('#path_node_x').val(point.x);
$('#path_node_y').val(point.y);
if(point.type) {
@@ -1496,7 +1509,13 @@
$('#' + el_name + '_panel').show();
$.each(cur_panel, function(i, item) {
$('#' + el_name + '_' + item).val(elem.getAttribute(item) || 0);
var attrVal = elem.getAttribute(item);
if(curConfig.baseUnit !== 'px' && elem[item]) {
var bv = elem[item].baseVal.value;
attrVal = svgCanvas.convertUnit(bv);
}
$('#' + el_name + '_' + item).val(attrVal || 0);
});
if(el_name == 'text') {
@@ -1762,15 +1781,25 @@
return false;
}
// Convert unitless value to one with given unit
if(curConfig.baseUnit !== 'px' && !isNaN(val) ) {
val += curConfig.baseUnit;
this.value = val;
if(isNaN(val)) {
val = svgCanvas.convertToNum(attr, val);
} else if(curConfig.baseUnit !== 'px') {
// Convert unitless value to one with given unit
// val = svgCanvas.convertUnit(bv, "px");
// selectedElement[attr].baseVal.newValueSpecifiedUnits();
// this.value = val;
// selectedElement[attr].baseVal
var unitData = svgCanvas.getUnits();
if(selectedElement[attr] || svgCanvas.getMode() === "pathedit" || attr === "x" || attr === "y") {
val *= unitData[curConfig.baseUnit];
}
}
// if the user is changing the id, then de-select the element first
// change the ID, then re-select it with the new ID
if (attr == "id") {
if (attr === "id") {
var elem = selectedElement;
svgCanvas.clearSelection();
elem.id = val;

144
editor/svgcanvas.js
View File

@@ -78,7 +78,7 @@ if(window.opera) {
}
return this;
};
}());
// Class: SvgCanvas
@@ -427,9 +427,17 @@ var Utils = this.Utils = function() {
}
catch(e){ throw new Error("Error parsing XML string"); };
return out;
},
bboxToObj: function(bbox) {
return {
x: bbox.x,
y: bbox.y,
width: bbox.width,
height: bbox.height
}
}
}
}();
var snapToGrid = Utils.snapToGrid;
@@ -545,6 +553,20 @@ var convertToNum, convertToUnit, setUnitAttr, unitConvertAttrs;
var w_attrs = ['x', 'x1', 'cx', 'rx', 'width'];
var h_attrs = ['y', 'y1', 'cy', 'ry', 'height'];
var unit_attrs = $.merge(['r','radius'], w_attrs);
var unitNumMap = {
'%': 2,
em: 3,
ex: 4,
px: 5,
cm: 6,
mm: 7,
'in': 8,
pt: 9,
pc: 10
};
$.merge(unit_attrs, h_attrs);
// Function: convertToNum
@@ -554,7 +576,7 @@ var convertToNum, convertToUnit, setUnitAttr, unitConvertAttrs;
// Parameters:
// attr - String with the name of the attribute associated with the value
// val - String with the attribute value to convert
convertToNum = function(attr, val) {
convertToNum = canvas.convertToNum = function(attr, val) {
// Return a number if that's what it already is
if(!isNaN(val)) return val-0;
@@ -591,31 +613,32 @@ var convertToNum, convertToUnit, setUnitAttr, unitConvertAttrs;
// New value is a number, so check currently used unit
var old_val = elem.getAttribute(attr);
if(old_val !== null && (isNaN(old_val) || curConfig.baseUnit !== 'px')) {
// Old value was a number, so get unit, then convert
var unit;
if(old_val.substr(-1) === '%') {
var res = getResolution();
unit = '%';
val *= 100;
if(w_attrs.indexOf(attr) >= 0) {
val = val / res.w;
} else if(h_attrs.indexOf(attr) >= 0) {
val = val / res.h;
} else {
return val / Math.sqrt((res.w*res.w) + (res.h*res.h))/Math.sqrt(2);
}
} else {
if(curConfig.baseUnit !== 'px') {
unit = curConfig.baseUnit;
} else {
unit = old_val.substr(-2);
}
val = val / unit_types[unit];
}
val += unit;
}
// Enable this for alternate mode
// if(old_val !== null && (isNaN(old_val) || curConfig.baseUnit !== 'px')) {
// // Old value was a number, so get unit, then convert
// var unit;
// if(old_val.substr(-1) === '%') {
// var res = getResolution();
// unit = '%';
// val *= 100;
// if(w_attrs.indexOf(attr) >= 0) {
// val = val / res.w;
// } else if(h_attrs.indexOf(attr) >= 0) {
// val = val / res.h;
// } else {
// return val / Math.sqrt((res.w*res.w) + (res.h*res.h))/Math.sqrt(2);
// }
// } else {
// if(curConfig.baseUnit !== 'px') {
// unit = curConfig.baseUnit;
// } else {
// unit = old_val.substr(-2);
// }
// val = val / unit_types[unit];
// }
//
// val += unit;
// }
}
elem.setAttribute(attr, val);
}
@@ -666,6 +689,16 @@ var convertToNum, convertToUnit, setUnitAttr, unitConvertAttrs;
return unit_types;
}
// Function: convertUnit
// Converts the number to given unit or baseUnit
canvas.convertUnit = function(val, unit) {
unit = unit || curConfig.baseUnit;
// baseVal.convertToSpecifiedUnits(unitNumMap[unit]);
// var val = baseVal.valueInSpecifiedUnits;
// baseVal.convertToSpecifiedUnits(1);
return shortFloat(val / unit_types[unit]);
}
// Function: unitConvertAttrs
// Converts all applicable attributes to the given baseUnit
unitConvertAttrs = canvas.unitConvertAttrs = function(element) {
@@ -1292,7 +1325,7 @@ var SelectorManager;
selected = this.selectedElement,
sw = selected.getAttribute("stroke-width");
var offset = 1/current_zoom;
if (selected.getAttribute("stroke") != "none" && !isNaN(sw)) {
if (selected.getAttribute("stroke") !== "none" && !isNaN(sw)) {
offset += (sw/2);
}
@@ -1305,11 +1338,7 @@ var SelectorManager;
// get the bbox based on its children.
var stroked_bbox = getStrokedBBox(selected.childNodes);
if(stroked_bbox) {
var bb = {};
$.each(bbox, function(key, val) {
bb[key] = stroked_bbox[key];
});
bbox = bb;
bbox = stroked_bbox;
}
}
@@ -2238,7 +2267,7 @@ var getStrokedBBox = this.getStrokedBBox = function(elems) {
var parent = elem.parentNode;
parent.appendChild(g);
g.appendChild(clone);
bb = g.getBBox();
bb = bboxToObj(g.getBBox());
parent.removeChild(g);
}
@@ -2288,12 +2317,6 @@ var getStrokedBBox = this.getStrokedBBox = function(elems) {
if(full_bb) return;
if(!this.parentNode) return;
full_bb = getCheckedBBox(this);
if(full_bb) {
var b = {};
for(var i in full_bb) b[i] = full_bb[i];
full_bb = b;
}
});
// This shouldn't ever happen...
@@ -2716,6 +2739,8 @@ var getRefElem = this.getRefElem = function(attrVal) {
return getElem(getUrlFromAttr(attrVal).substr(1));
}
var bboxToObj = Utils.bboxToObj;
// Function: getBBox
// Get the given/selected element's bounding box object, convert it to be more
// usable when necessary
@@ -2758,6 +2783,9 @@ var getBBox = this.getBBox = function(elem) {
}
}
}
if(ret) {
ret = bboxToObj(ret);
}
// get the bounding box from the DOM (which is in that element's coordinate system)
return ret;
@@ -3376,15 +3404,22 @@ var recalculateDimensions = this.recalculateDimensions = function(selected) {
// combine matrix + translate
k = tlist.numberOfItems;
if(k === 2 && tlist.getItem(0).type === 1 && tlist.getItem(1).type === 2) {
if(k >= 2 && tlist.getItem(k-2).type === 1 && tlist.getItem(k-1).type === 2) {
console.log('combine')
var mt = svgroot.createSVGTransform();
// logMatrix(tlist.getItem(0).matrix);
// logMatrix(transformListToTransform(tlist).matrix);
mt.setMatrix(transformListToTransform(tlist).matrix);
tlist.clear();
tlist.appendItem(mt);
console.log(selected.getAttribute('transform'));
// mt.setMatrix(transformListToTransform(tlist).matrix, 1, 2);
// tlist.removeItem(k-2);
// tlist.removeItem(k-2);
// tlist.appendItem(mt);
// console.log(selected.getAttribute('transform'));
}
}
@@ -5237,7 +5272,8 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
var real_x = x;
var real_y = y;
var useUnit = (curConfig.baseUnit !== 'px');
// TODO: Make true when in multi-unit mode
var useUnit = false; // (curConfig.baseUnit !== 'px');
started = false;
switch (current_mode)
@@ -7900,7 +7936,7 @@ var svgCanvasToString = this.svgCanvasToString = function() {
// Keep SVG-Edit comment on top
$.each(svgcontent.childNodes, function(i, node) {
if(i && node.nodeType == 8 && node.data.indexOf('Created with') >= 0) {
if(i && node.nodeType === 8 && node.data.indexOf('Created with') >= 0) {
svgcontent.insertBefore(node, svgcontent.firstChild);
}
});
@@ -7969,7 +8005,21 @@ var svgToString = this.svgToString = function(elem, indent) {
if(elem.id === 'svgcontent') {
// Process root element separately
var res = getResolution();
out.push(' width="' + res.w + '" height="' + res.h + '" xmlns="'+svgns+'"');
var vb = "";
// TODO: Allow this by dividing all values by current baseVal
// Note that this also means we should properly deal with this on import
// if(curConfig.baseUnit !== "px") {
// var unit = curConfig.baseUnit;
// var unit_m = unit_types[unit];
// res.w = shortFloat(res.w / unit_m)
// res.h = shortFloat(res.h / unit_m)
// vb = ' viewBox="' + [0, 0, res.w, res.h].join(' ') + '"';
// res.w += unit;
// res.h += unit;
// }
out.push(' width="' + res.w + '" height="' + res.h + '"' + vb + ' xmlns="'+svgns+'"');
var nsuris = {};