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

Made zoom and multi-select boxes flexible regardless of grid snapping, turned snapping off by default 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1707 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Alexis Deveria 2010-09-10 13:23:31 +00:00
parent a6a2e7c469
commit 2f767163b0
3 changed files with 60 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
editor/svg-editor.html
View File

@ -660,8 +660,8 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<fieldset id="change_grid"> <fieldset id="change_grid">
<legend id="svginfo_grid_settings">Grid</legend> <legend id="svginfo_grid_settings">Grid</legend>
<label><span id="svginfo_snap_onoff">Snapping on/off</span><input type="checkbox" checked value="snapping_on" id="grid_snapping_on"></label> <label><span id="svginfo_snap_onoff">Snapping on/off</span><input type="checkbox" value="snapping_on" id="grid_snapping_on"></label>
<label><span id="svginfo_snap_step">Snapping Step-Size:</span> <input type="text" id="grid_snapping_step" size="3" value="1"/></label> <label><span id="svginfo_snap_step">Snapping Step-Size:</span> <input type="text" id="grid_snapping_step" size="3" value="10"/></label>
</fieldset> </fieldset>
</fieldset> </fieldset>

14
editor/svg-editor.js
View File

@ -52,8 +52,8 @@
initTool: 'select', initTool: 'select',
wireframe: false, wireframe: false,
colorPickerCSS: null, colorPickerCSS: null,
gridSnapping: true, gridSnapping: false,
snappingStep: 1 snappingStep: 10
}, },
uiStrings = Editor.uiStrings = { uiStrings = Editor.uiStrings = {
"invalidAttrValGiven":"Invalid value given", "invalidAttrValGiven":"Invalid value given",
@ -2598,7 +2598,7 @@
setIconSize($('#iconsize').val()); setIconSize($('#iconsize').val());
// set grid setting // set grid setting
curConfig.gridSnapping = $('#grid_snapping_on').attr('checked'); curConfig.gridSnapping = $('#grid_snapping_on')[0].checked;
curConfig.snappingStep = $('#grid_snapping_step').val(); curConfig.snappingStep = $('#grid_snapping_step').val();
updateCanvas(); updateCanvas();
@ -3774,6 +3774,14 @@
if(curConfig.showlayers) { if(curConfig.showlayers) {
toggleSidePanel(); toggleSidePanel();
} }
if(curConfig.gridSnapping) {
$('#grid_snapping_on')[0].checked = true;
}
if(curConfig.snappingStep) {
$('#grid_snapping_step').val(curConfig.snappingStep);
}
}); });
$('#rect_rx').SpinButton({ min: 0, max: 1000, step: 1, callback: changeRectRadius }); $('#rect_rx').SpinButton({ min: 0, max: 1000, step: 1, callback: changeRectRadius });

87
editor/svgcanvas.js
View File

@ -4255,6 +4255,8 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
var d_attr = null, var d_attr = null,
start_x = null, start_x = null,
start_y = null, start_y = null,
r_start_x = null,
r_start_y = null,
init_bbox = {}, init_bbox = {},
freehand = { freehand = {
minx: null, minx: null,
@ -4302,12 +4304,15 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
y = mouse_y / current_zoom, y = mouse_y / current_zoom,
mouse_target = getMouseTarget(evt); mouse_target = getMouseTarget(evt);
start_x = x; // real_x/y ignores grid-snap value
start_y = y; var real_x = r_start_x = start_x = x;
var real_y = r_start_y = start_y = y;
if(svgEditor.curConfig.gridSnapping){ if(svgEditor.curConfig.gridSnapping){
x = Utils.snapToGrid(x); x = Utils.snapToGrid(x);
y = Utils.snapToGrid(y); y = Utils.snapToGrid(y);
start_x = Utils.snapToGrid(start_x);
start_y = Utils.snapToGrid(start_y);
} }
// if it is a selector grip, then it must be a single element selected, // if it is a selector grip, then it must be a single element selected,
@ -4366,16 +4371,16 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
if (rubberBox == null) { if (rubberBox == null) {
rubberBox = selectorManager.getRubberBandBox(); rubberBox = selectorManager.getRubberBandBox();
} }
start_x *= current_zoom; r_start_x *= current_zoom;
start_y *= current_zoom; r_start_y *= current_zoom;
// console.log('p',[evt.pageX, evt.pageY]); // console.log('p',[evt.pageX, evt.pageY]);
// console.log('c',[evt.clientX, evt.clientY]); // console.log('c',[evt.clientX, evt.clientY]);
// console.log('o',[evt.offsetX, evt.offsetY]); // console.log('o',[evt.offsetX, evt.offsetY]);
// console.log('s',[start_x, start_y]); // console.log('s',[start_x, start_y]);
assignAttributes(rubberBox, { assignAttributes(rubberBox, {
'x': start_x, 'x': r_start_x,
'y': start_y, 'y': r_start_y,
'width': 0, 'width': 0,
'height': 0, 'height': 0,
'display': 'inline' 'display': 'inline'
@ -4384,14 +4389,12 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
break; break;
case "zoom": case "zoom":
started = true; started = true;
start_x = x;
start_y = y;
if (rubberBox == null) { if (rubberBox == null) {
rubberBox = selectorManager.getRubberBandBox(); rubberBox = selectorManager.getRubberBandBox();
} }
assignAttributes(rubberBox, { assignAttributes(rubberBox, {
'x': start_x * current_zoom, 'x': real_x * current_zoom,
'y': start_y * current_zoom, 'y': real_x * current_zoom,
'width': 0, 'width': 0,
'height': 0, 'height': 0,
'display': 'inline' 'display': 'inline'
@ -4619,14 +4622,12 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
mouse_y = -(off_y - evt.pageY); mouse_y = -(off_y - evt.pageY);
} }
x = mouse_x / current_zoom; var real_x = x = mouse_x / current_zoom;
y = mouse_y / current_zoom; var real_y = y = mouse_y / current_zoom;
if(svgEditor.curConfig.gridSnapping){ if(svgEditor.curConfig.gridSnapping){
x = Utils.snapToGrid(x); x = Utils.snapToGrid(x);
y = Utils.snapToGrid(y); y = Utils.snapToGrid(y);
start_x = Utils.snapToGrid(start_x);
start_y = Utils.snapToGrid(start_y);
} }
evt.preventDefault(); evt.preventDefault();
@ -4681,13 +4682,13 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
} }
break; break;
case "multiselect": case "multiselect":
x *= current_zoom; real_x *= current_zoom;
y *= current_zoom; real_y *= current_zoom;
assignAttributes(rubberBox, { assignAttributes(rubberBox, {
'x': Math.min(start_x,x), 'x': Math.min(r_start_x, real_x),
'y': Math.min(start_y,y), 'y': Math.min(r_start_y, real_y),
'width': Math.abs(x-start_x), 'width': Math.abs(real_x - r_start_x),
'height': Math.abs(y-start_y) 'height': Math.abs(real_y - r_start_y)
},100); },100);
// for each selected: // for each selected:
@ -4816,13 +4817,13 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
selectorManager.requestSelector(selected).resize(); selectorManager.requestSelector(selected).resize();
break; break;
case "zoom": case "zoom":
x *= current_zoom; real_x *= current_zoom;
y *= current_zoom; real_y *= current_zoom;
assignAttributes(rubberBox, { assignAttributes(rubberBox, {
'x': Math.min(start_x*current_zoom,x), 'x': Math.min(r_start_x*current_zoom, real_x),
'y': Math.min(start_y*current_zoom,y), 'y': Math.min(r_start_y*current_zoom, real_y),
'width': Math.abs(x-start_x*current_zoom), 'width': Math.abs(real_x - r_start_x*current_zoom),
'height': Math.abs(y-start_y*current_zoom) 'height': Math.abs(real_y - r_start_y*current_zoom)
},100); },100);
break; break;
case "text": case "text":
@ -4946,10 +4947,10 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
if(rubberBox && rubberBox.getAttribute('display') != 'none') { if(rubberBox && rubberBox.getAttribute('display') != 'none') {
assignAttributes(rubberBox, { assignAttributes(rubberBox, {
'x': Math.min(start_x,x), 'x': Math.min(r_start_x, real_x),
'y': Math.min(start_y,y), 'y': Math.min(r_start_y, real_y),
'width': Math.abs(x-start_x), 'width': Math.abs(real_x - r_start_x),
'height': Math.abs(y-start_y) 'height': Math.abs(real_y - r_start_y)
},100); },100);
} }
@ -5023,6 +5024,10 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
element = getElem(getId()), element = getElem(getId()),
keep = false; keep = false;
var real_x = x;
var real_y = y;
started = false; started = false;
switch (current_mode) switch (current_mode)
{ {
@ -5098,10 +5103,10 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
} }
var factor = evt.shiftKey?.5:2; var factor = evt.shiftKey?.5:2;
call("zoomed", { call("zoomed", {
'x': Math.min(start_x,x), 'x': Math.min(r_start_x, real_x),
'y': Math.min(start_y,y), 'y': Math.min(r_start_y, real_y),
'width': Math.abs(x-start_x), 'width': Math.abs(real_x - r_start_x),
'height': Math.abs(y-start_y), 'height': Math.abs(real_y - r_start_y),
'factor': factor 'factor': factor
}); });
return; return;
@ -6833,11 +6838,11 @@ var pathActions = this.pathActions = function() {
var x = mouse_x/current_zoom, var x = mouse_x/current_zoom,
y = mouse_y/current_zoom, y = mouse_y/current_zoom,
stretchy = getElem("path_stretch_line"); stretchy = getElem("path_stretch_line");
if(svgEditor.curConfig.gridSnapping){ if(svgEditor.curConfig.gridSnapping){
x = Utils.snapToGrid(x); x = Utils.snapToGrid(x);
y = Utils.snapToGrid(y); y = Utils.snapToGrid(y);
} }
if (!stretchy) { if (!stretchy) {
stretchy = document.createElementNS(svgns, "line"); stretchy = document.createElementNS(svgns, "line");
@ -8199,6 +8204,8 @@ this.setSvgString = function(xmlString) {
}); });
// Set ref element for <use> elements // Set ref element for <use> elements
// TODO: This should also be done if the object is re-added through "redo"
content.find('use').each(function() { content.find('use').each(function() {
var id = getHref(this).substr(1); var id = getHref(this).substr(1);
var ref_elem = getElem(id); var ref_elem = getElem(id);