Split up doc props and editor prefs, added support for base units (issue 628)

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1776 eee81c28-f429-11dd-99c0-75d572ba1ddd

editor/svg-editor.css

@@ -1020,7 +1020,8 @@ span.zoom_tool {
 	margin-left: 30px;
 }
 
-#svg_docprops #svg_docprops_container {
+#svg_docprops #svg_docprops_container,
+#svg_prefs #svg_prefs_container {
 	position: absolute;
 	top: 50px;
 	padding: 10px;
@@ -1042,40 +1043,45 @@ span.zoom_tool {
 	max-width: 14em;
 }
 
-#tool_docprops_back {
+#tool_docprops_back, 
+#tool_prefs_back {
 	margin-left: 1em;
 	overflow: auto;
 }
 
 #svg_docprops_container #svg_docprops_docprops, 
-#svg_docprops_container #svg_docprops_prefs {
+#svg_prefs #svg_docprops_prefs {
 	float: left;
 	width: 221px;
 	margin: 5px .7em; 
 	overflow: hidden;
 }
 
-#svg_docprops_container #svg_docprops_prefs {
+#svg_prefs_container fieldset + fieldset {
 	float: right;
 }
 
-#svg_docprops legend {
+#svg_docprops legend, 
+#svg_prefs legend {
 	max-width: 195px;
 }
 
-#svg_docprops_docprops > legend, #svg_docprops_prefs > legend {
+#svg_docprops_docprops > legend, 
+#svg_prefs_container > fieldset > legend {
 	font-weight: bold;
 	font-size: 1.1em;
 }
 
 
-#svg_docprops_container fieldset {
+#svg_docprops_container fieldset,
+#svg_prefs fieldset {
 	padding: 5px;
 	margin: 5px;
 	border: 1px solid #DDD;
 }
 
-#svg_docprops_container label {
+#svg_docprops_container label,
+#svg_prefs_container label {
 	display: block;
 	margin: .5em;
 }
@@ -1105,7 +1111,7 @@ span.zoom_tool {
 	padding-left: 20px;
 }
 
-#svg_docprops_container div.color_block {
+#svg_prefs_container div.color_block {
 	float: left;
 	margin: 2px;
 	padding: 20px;
@@ -1123,12 +1129,14 @@ span.zoom_tool {
 	text-align: left;
 }
 
-#svg_docprops button {
+#svg_docprops button,
+#svg_prefs button {
 	margin-top: 0;
 	margin-bottom: 5px;
 }
 
-#svg_docprops {
+#svg_docprops,
+#svg_prefs {
 	display: none;
 }
 
@@ -1140,7 +1148,8 @@ span.zoom_tool {
 	margin-left: 0;
 }
 
-#svg_docprops #svg_docprops_overlay {
+#svg_docprops #svg_docprops_overlay,
+#svg_prefs #svg_prefs_overlay {
 	position: absolute;
 	top: 0px;
 	right: 0px;
@@ -1151,6 +1160,10 @@ span.zoom_tool {
 	z-index: 20000;
 }
 
+#tool_prefs_option {
+	float: right;
+}
+
 .toolbar_button button {
     border:1px solid #dedede;
     line-height:130%;

editor/svg-editor.html

@@ -137,13 +137,18 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 				Document Properties [P]
 			</li>
 		</ul>
-		
+
 		<p>
 			<a href="http://svg-edit.googlecode.com/" target="_blank">
 				SVG-edit Home Page
 			</a>
 		</p>
 
+		<button id="tool_prefs_option">
+			Editor Options
+		</button>
+
+
 	</div>
 </div>
 
@@ -587,6 +592,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 	</div>
 </div>
 
+
 <div id="svg_docprops">
 	<div id="svg_docprops_overlay"></div>
 	<div id="svg_docprops_container">
@@ -628,11 +634,20 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 				<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">
+	</div>
+</div>
+
+<div id="svg_prefs">
+	<div id="svg_prefs_overlay"></div>
+	<div id="svg_prefs_container">
+		<div id="tool_prefs_back" class="toolbar_button">
+			<button id="tool_prefs_save">OK</button>
+			<button id="tool_prefs_cancel">Cancel</button>
+		</div>
+
+		<fieldset>
 			<legend id="svginfo_editor_prefs">Editor Preferences</legend>
 
 			<label><span id="svginfo_lang">Language:</span>
@@ -682,8 +697,21 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 			<fieldset id="units_rulers">
 				<legend id="svginfo_units_rulers">Units & Rulers</legend>
 				<label><span id="svginfo_rulers_onoff">Show rulers</span><input type="checkbox" value="show_rulers" id="show_rulers" checked></label>
+				<label>
+					<span id="svginfo_unit">Base Unit:</span>
+					<select id="base_unit">
+						<option value="px" selected>Pixels</option>
+						<option value="cm">Centimeters</option>
+						<option value="mm">Millimeters</option>
+						<option value="pt">Points</option>
+						<option value="pc">Picas</option>
+						<option value="em">Ems</option>
+						<option value="ex">Exs</option>
+					</select>
+				</label>
+				</label>
 			</fieldset>
-
+	
 		</fieldset>
 
 	</div>

editor/svg-editor.js

@@ -51,6 +51,7 @@
 				wireframe: false,
 				colorPickerCSS: null,
 				gridSnapping: false,
+				baseUnit: 'px',
 				snappingStep: 10,
 				showRulers: true
 			},
@@ -375,8 +376,8 @@
 					'#layer_moreopts':'context_menu',
 					'#layerlist td.layervis':'eye',
 					
-					'#tool_source_save,#tool_docprops_save':'ok',
+					'#tool_source_save,#tool_docprops_save,#tool_prefs_save':'ok',
-					'#tool_source_cancel,#tool_docprops_cancel':'cancel',
+					'#tool_source_cancel,#tool_docprops_cancel,#tool_prefs_cancel':'cancel',
 					
 					'#rwidthLabel, #iwidthLabel':'width',
 					'#rheightLabel, #iheightLabel':'height',
@@ -559,6 +560,7 @@
 			var multiselected = false;
 			var editingsource = false;
 			var docprops = false;
+			var preferences = false;
 			var cur_context = '';
 			var orig_title = $('title:first').text();
 			
@@ -1789,6 +1791,13 @@
 					this.value = selectedElement.getAttribute(attr);
 					return false;
 				}
+				
+				// Convert unitless value to one with given unit
+				if(curConfig.baseUnit !== 'px' && !isNaN(val) ) {
+					val += curConfig.baseUnit;
+					this.value = val;
+				}
+				
 				// 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") {
@@ -2578,7 +2587,7 @@
 				$('#svg_source_textarea').focus();
 			};
 			
-			$('#svg_docprops_container').draggable({cancel:'button,fieldset'});
+			$('#svg_docprops_container, #svg_prefs_container').draggable({cancel:'button,fieldset'});
 			
 			var showDocProperties = function(){
 				if (docprops) return;
@@ -2593,6 +2602,15 @@
 				$('#canvas_height').val(res.h);
 				$('#canvas_title').val(svgCanvas.getDocumentTitle());
 				
+				$('#svg_docprops').fadeIn();
+			};
+			
+			
+			var showPreferences = function(){
+				if (preferences) return;
+				preferences = true;
+				$('#main_menu').hide();
+				
 				// Update background color with current one
 				var blocks = $('#bg_blocks div');
 				var cur_bg = 'cur_background';
@@ -2616,8 +2634,8 @@
 				    $('#grid_snapping_on').removeAttr('checked');
 				}
 				
-				$('#svg_docprops').fadeIn();
+				$('#svg_prefs').fadeIn();
-			};
+			};			
 			
 			var properlySourceSizeTextArea = function(){
 				// TODO: remove magic numbers here and get values from CSS
@@ -2690,7 +2708,11 @@
 				// set image save option
 				curPrefs.img_save = $('#image_save_opts :checked').val();
 				$.pref('img_save',curPrefs.img_save);
-				
+				updateCanvas();
+				hideDocProperties();
+			};
+			
+			var savePreferences = function() {
 				// set background
 				var color = $('#bg_blocks div.cur_background').css('background-color') || '#FFF';
 				setBackground(color, $('#canvas_bg_url').val());
@@ -2711,12 +2733,13 @@
 				
 				$('#rulers').toggle(curConfig.showRulers);
 				if(curConfig.showRulers) updateRulers();
+				curConfig.baseUnit = $('#base_unit').val();
 				
 				svgCanvas.setConfig(curConfig);
 
 				updateCanvas();
-				hideDocProperties();
+				hidePreferences();
-			};
+			}
 			
 			function setBackground(color, url) {
 // 				if(color == curPrefs.bkgd_color && url == curPrefs.bkgd_url) return;
@@ -3008,7 +3031,7 @@
 		
 			var cancelOverlays = function() {
 				$('#dialog_box').hide();
-				if (!editingsource && !docprops) {
+				if (!editingsource && !docprops && !preferences) {
 					if(cur_context) {
 						svgCanvas.leaveContext();
 					}
@@ -3027,6 +3050,8 @@
 				}
 				else if (docprops) {
 					hideDocProperties();
+				} else if (preferences) {
+					hidePreferences();
 				}
 		
 			};
@@ -3044,6 +3069,11 @@
 				$('#image_save_opts input').val([curPrefs.img_save]);
 				docprops = false;
 			};
+			
+			var hidePreferences = function(){
+				$('#svg_prefs').hide();
+				preferences = false;
+			};
 
 			var win_wh = {width:$(window).width(), height:$(window).height()};
 			
@@ -3697,10 +3727,12 @@
 					{sel:'#tool_import', fn: clickImport, evt: 'mouseup'},
 					{sel:'#tool_source', fn: showSourceEditor, evt: 'click', key: ['U', true]},
 					{sel:'#tool_wireframe', fn: clickWireframe, evt: 'click', key: ['F', true]},
-					{sel:'#tool_source_cancel,#svg_source_overlay,#tool_docprops_cancel', fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true},
+					{sel:'#tool_source_cancel,#svg_source_overlay,#tool_docprops_cancel,#tool_prefs_cancel', fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true},
 					{sel:'#tool_source_save', fn: saveSourceEditor, evt: 'click'},
 					{sel:'#tool_docprops_save', fn: saveDocProperties, evt: 'click'},
 					{sel:'#tool_docprops', fn: showDocProperties, evt: 'mouseup', key: ['P', true]},
+					{sel:'#tool_prefs_save', fn: savePreferences, evt: 'click'},
+					{sel:'#tool_prefs_option', fn: function() {showPreferences();return false}, evt: 'mouseup', key: ['I', true]},
 					{sel:'#tool_delete,#tool_delete_multi', fn: deleteSelected, evt: 'click', key: ['del/backspace', true]},
 					{sel:'#tool_reorient', fn: reorientPath, evt: 'click'},
 					{sel:'#tool_node_link', fn: linkControlPoints, evt: 'click'},
@@ -3911,6 +3943,10 @@
 				if(curConfig.gridSnapping) {
 					$('#grid_snapping_on')[0].checked = true;
 				}
+
+				if(curConfig.baseUnit) {
+					$('#base_unit').val(curConfig.baseUnit);
+				}
 				
 				if(curConfig.snappingStep) {
 					$('#grid_snapping_step').val(curConfig.snappingStep);
@@ -4158,6 +4194,9 @@
 				
 				var c_elem = svgCanvas.getContentElem();
 				
+				var units = svgCanvas.getUnits();
+				var unit = units[curConfig.baseUnit]; // 1 = 1px
+			
 				for(var d = 0; d < 2; d++) {
 					var is_x = (d === 0);
 					var dim = is_x ? 'x' : 'y';
@@ -4170,11 +4209,10 @@
 					var len = hcanv[lentype] = scanvas[lentype]();
 					var ctx = hcanv.getContext("2d");
 					
-					var unit = 1; // 1 = 1px
+					var u_multi = unit * zoom;
 					
 					// Calculate the main number interval
-					var raw_m = 50 / zoom;
+					var raw_m = 50 / u_multi;
-					
 					var multi = 1;
 					for(var i = 0; i < r_intervals.length; i++) {
 						var num = r_intervals[i];
@@ -4184,11 +4222,11 @@
 						}
 					}
 					
-					var big_int = unit * multi * zoom;
+					var big_int = multi * u_multi;
-					
+
 					ctx.font = "9px sans-serif";
 					
-					var ruler_d = ((content_d / zoom) % multi) * zoom;
+					var ruler_d = ((content_d / u_multi) % multi) * u_multi;
 					
 					for (; ruler_d < len; ruler_d += big_int) {
 						var real_d = Math.round((ruler_d) - content_d );
@@ -4202,7 +4240,14 @@
 							ctx.lineTo(0, cur_d);
 						}
 	
-						var label = Math.round(real_d / zoom);
+	
+						var num = real_d / u_multi;
+						if(multi >= 1) {
+							label = Math.round(num);
+						} else {
+							var decs = (multi+'').split('.')[1].length;
+							label = num.toFixed(decs)-0;
+						}
 						
 						// Do anything special for negative numbers?
 // 						var is_neg = label < 0;

editor/svgcanvas.js

@@ -447,8 +447,8 @@ var canvas = this,
 	htmlns = "http://www.w3.org/1999/xhtml",
 	mathns = "http://www.w3.org/1998/Math/MathML",
 	
-	// Map of units, those set to 0 are updated later based on calculations
+	// Map of units, updated later based on px conversion.
-	unit_types = {'em':0,'ex':0,'px':1,'cm':35.43307,'mm':3.543307,'in':90,'pt':1.25,'pc':15,'%':0},
+	unit_types = {px: 1},
 
 	//nonce to uniquify id's
 	nonce = Math.floor(Math.random()*100001),
@@ -538,7 +538,7 @@ $(opac_ani).attr({
 // Group: Unit conversion functions
 
 // Set the scope for these functions
-var convertToNum, convertToUnit, setUnitAttr;
+var convertToNum, convertToUnit, setUnitAttr, unitConvertAttrs;
 
 (function() {
 	var w_attrs = ['x', 'x1', 'cx', 'rx', 'width'];
@@ -590,7 +590,7 @@ var convertToNum, convertToUnit, setUnitAttr;
 			// New value is a number, so check currently used unit
 			var old_val = elem.getAttribute(attr);
 			
-			if(old_val !== null && isNaN(old_val)) {
+			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) === '%') {
@@ -604,9 +604,12 @@ var convertToNum, convertToUnit, setUnitAttr;
 					} else {
 						return val / Math.sqrt((res.w*res.w) + (res.h*res.h))/Math.sqrt(2);
 					}
-
 				} else {
-					unit = old_val.substr(-2);
+					if(curConfig.baseUnit !== 'px') {
+						unit = curConfig.baseUnit;
+					} else {
+						unit = old_val.substr(-2);
+					}
 					val = val / unit_types[unit];
 				}
 				
@@ -656,6 +659,56 @@ var convertToNum, convertToUnit, setUnitAttr;
 		return valid;
 	}
 	
+	// Function: getUnits
+	// Returns the unit object with values for each unit
+	canvas.getUnits = function() {
+		return unit_types;
+	}
+	
+	// Function: unitConvertAttrs
+	// Converts all applicable attributes to the given baseUnit
+	unitConvertAttrs = canvas.unitConvertAttrs = function(element) {
+		var elName = element.tagName;
+		var unit = curConfig.baseUnit;
+		var attrs;
+		switch (elName)
+		{
+			case "line":
+				attrs = ['x1', 'x2', 'y1', 'y2'];
+				break;
+			case "circle":
+				attrs = ['cx', 'cy', 'r'];
+				break;
+			case "ellipse":
+				attrs = ['cx', 'cy', 'rx', 'ry'];
+				break;
+			case "foreignObject":
+			case "rect":
+			case "image":
+			case "use":
+				attrs = ['x', 'y', 'width', 'height'];
+				break;
+			case "text":
+				attrs = ['x', 'y'];
+				break;
+		}
+		if(!attrs) return;
+		var len = attrs.length
+		for(var i = 0; i < len; i++) {
+			var attr = attrs[i];
+			var cur = element.getAttribute(attr);
+			if(cur) {
+				if(!isNaN(cur)) {
+					element.setAttribute(attr, (cur / unit_types[unit]) + unit);
+				} else {
+					// Convert existing?
+				}
+			}
+		}
+		
+		
+	}
+	
 })();
 
 
@@ -2045,6 +2098,8 @@ var shortFloat = function(val) {
 		return Number(Number(val).toFixed(digits));
 	} else if($.isArray(val)) {
 		return shortFloat(val[0]) + ',' + shortFloat(val[1]);
+	} else {
+		return parseFloat(val).toFixed(digits) - 0;
 	}
 }
 	
@@ -5106,7 +5161,8 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 
 		var real_x = x;
 		var real_y = y;
-
+		
+		var useUnit = (curConfig.baseUnit !== 'px');
 		
 		started = false;
 		switch (current_mode)
@@ -5341,6 +5397,8 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 		} else if (element != null) {
 			canvas.addedNew = true;
 			
+			if(useUnit) unitConvertAttrs(element);
+			
 			var ani_dur = .2, c_ani;
 			if(opac_ani.beginElement && element.getAttribute('opacity') != cur_shape.opacity) {
 				c_ani = $(opac_ani).clone().attr({
@@ -7799,6 +7857,9 @@ var svgCanvasToString = this.svgCanvasToString = function() {
 // String with the given element as an SVG tag
 var svgToString = this.svgToString = function(elem, indent) {
 	var out = new Array(), toXml = Utils.toXml;
+	
+	var unit = curConfig.baseUnit
+	var unit_re = new RegExp('^-?[\\d\\.]+' + unit + '$');
 
 	if (elem) {
 		cleanupElement(elem);
@@ -7861,6 +7922,8 @@ var svgToString = this.svgToString = function(elem, indent) {
 					if(attr.localName === 'd') attrVal = pathActions.convertPath(elem, true);
 					if(!isNaN(attrVal)) {
 						attrVal = shortFloat(attrVal);
+					} else if(unit_re.test(attrVal)) {
+						attrVal = shortFloat(attrVal) + unit;
 					}
 					
 					// Embed images when saving 
@@ -11331,10 +11394,18 @@ function disableAdvancedTextEdit() {
 	var rect = document.createElementNS(svgns,'rect');
 	rect.setAttribute('width',"1em");
 	rect.setAttribute('height',"1ex");
+	rect.setAttribute('x',"1in");
 	svgcontent.appendChild(rect);
 	var bb = rect.getBBox();
 	unit_types.em = bb.width;
 	unit_types.ex = bb.height;
+	var inch = bb.x;
+	unit_types['in'] = inch;
+	unit_types.cm = inch / 2.54;
+	unit_types.mm = inch / 25.4;
+	unit_types.pt = inch / 72;
+	unit_types.pc = inch / 6;
+	unit_types['%'] = 0;
 	svgcontent.removeChild(rect);
 }());