Overhaul of grid extension to make grid appear better and change based on the current unit type
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1813 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Alexis Deveria
parent
5aabcff60c
commit
f367dde12b
|
|
@ -4,51 +4,23 @@
|
|||
* Licensed under the Apache License, Version 2
|
||||
*
|
||||
* Copyright(c) 2010 Redou Mine
|
||||
* Copyright(c) 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
|
||||
svgEditor.addExtension("view_grid", function(s) {
|
||||
/*
|
||||
* Config for grid-lines
|
||||
*/
|
||||
var gridConfig = {
|
||||
'1x1': { height: 1, width: 1, color: '#CCC', strokeWidth: 0.05, opacity: 1 },
|
||||
'5x5': { height: 5, width: 5, color: '#BBB', strokeWidth: 0.2, opacity: 1 },
|
||||
'10x10': { height: 10, width: 10, color: '#AAA', strokeWidth: 0.2, opacity: 1 },
|
||||
'100x100': { height: 100, width: 100, color: '#888', strokeWidth: 0.2, opacity: 1 }
|
||||
};
|
||||
|
||||
var svgdoc = document.getElementById("svgcanvas").ownerDocument,
|
||||
svgns = "http://www.w3.org/2000/svg",
|
||||
dims = svgEditor.curConfig.dimensions,
|
||||
svgroot = s.svgroot;
|
||||
|
||||
/*
|
||||
* copied from svgcanvas.js line 1138-1157 (version: 2.5 rc1)
|
||||
*/
|
||||
var assignAttributes = function(node, attrs, suspendLength, unitCheck) {
|
||||
if (!suspendLength) suspendLength = 0;
|
||||
// Opera has a problem with suspendRedraw() apparently
|
||||
var handle = null;
|
||||
if (!window.opera) svgroot.suspendRedraw(suspendLength);
|
||||
var showGrid = false;
|
||||
var assignAttributes = svgCanvas.assignAttributes;
|
||||
|
||||
var hcanvas = document.createElement('canvas');
|
||||
$(hcanvas).hide().appendTo('body');
|
||||
|
||||
for (var i in attrs) {
|
||||
var ns = (i.substr(0, 4) == "xml:" ? xmlns :
|
||||
i.substr(0, 6) == "xlink:" ? xlinkns : null);
|
||||
|
||||
if (ns || !unitCheck) {
|
||||
node.setAttributeNS(ns, i, attrs[i]);
|
||||
} else {
|
||||
setUnitAttr(node, i, attrs[i]);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (!window.opera) svgroot.unsuspendRedraw(handle);
|
||||
};
|
||||
|
||||
|
||||
// create svg for grid
|
||||
var canvasgrid = svgdoc.createElementNS(svgns, "svg");
|
||||
assignAttributes(canvasgrid, {
|
||||
'id': 'canvasGrid',
|
||||
|
|
@ -57,46 +29,32 @@ svgEditor.addExtension("view_grid", function(s) {
|
|||
'x': 0,
|
||||
'y': 0,
|
||||
'overflow': 'visible',
|
||||
'viewBox': '0 0 ' + dims[0] + ' ' + dims[1],
|
||||
'display': 'none'
|
||||
});
|
||||
$('#canvasBackground').append(canvasgrid);
|
||||
|
||||
var canvBG = $('#canvasBackground');
|
||||
canvBG.append(canvasgrid);
|
||||
|
||||
// create each grid
|
||||
$.each(gridConfig, function(key, value) {
|
||||
// grid-pattern
|
||||
var gridPattern = svgdoc.createElementNS(svgns, "pattern");
|
||||
assignAttributes(gridPattern, {
|
||||
'id': 'gridpattern' + key,
|
||||
'id': 'gridpattern',
|
||||
'patternUnits': 'userSpaceOnUse',
|
||||
'x': -(value.strokeWidth / 2), // position for strokewidth
|
||||
'y': -(value.strokeWidth / 2), // position for strokewidth
|
||||
'width': value.width,
|
||||
'height': value.height
|
||||
'x': 0, //-(value.strokeWidth / 2), // position for strokewidth
|
||||
'y': 0, //-(value.strokeWidth / 2), // position for strokewidth
|
||||
'width': 100,
|
||||
'height': 100
|
||||
});
|
||||
var gridPattern_hoLine = svgdoc.createElementNS(svgns, "line");
|
||||
assignAttributes(gridPattern_hoLine, {
|
||||
'fill': 'none',
|
||||
'stroke-width': value.strokeWidth,
|
||||
'x1': 0,
|
||||
'y1': 0,
|
||||
'x2': value.width,
|
||||
'y2': 0,
|
||||
'stroke': value.color
|
||||
|
||||
var gridimg = svgdoc.createElementNS(svgns, "image");
|
||||
assignAttributes(gridimg, {
|
||||
'x': 0,
|
||||
'y': 0,
|
||||
'width': 100,
|
||||
'height': 100
|
||||
});
|
||||
var gridPattern_veLine = svgdoc.createElementNS(svgns, "line");
|
||||
assignAttributes(gridPattern_veLine, {
|
||||
'fill': 'none',
|
||||
'stroke-width': value.strokeWidth,
|
||||
'x1': 0,
|
||||
'y1': 0,
|
||||
'x2': 0,
|
||||
'y2': value.height,
|
||||
'stroke': value.color
|
||||
});
|
||||
|
||||
gridPattern.appendChild(gridPattern_hoLine);
|
||||
gridPattern.appendChild(gridPattern_veLine);
|
||||
|
||||
gridPattern.appendChild(gridimg);
|
||||
$('#svgroot defs').append(gridPattern);
|
||||
|
||||
// grid-box
|
||||
|
|
@ -108,21 +66,92 @@ svgEditor.addExtension("view_grid", function(s) {
|
|||
'y': 0,
|
||||
'stroke-width': 0,
|
||||
'stroke': 'none',
|
||||
'fill': 'url(#gridpattern' + key + ')',
|
||||
'opacity': value.opacity,
|
||||
'fill': 'url(#gridpattern)',
|
||||
'style': 'pointer-events: none; display:visible;'
|
||||
});
|
||||
$('#canvasGrid').append(gridBox);
|
||||
});
|
||||
// });
|
||||
|
||||
function updateGrid(zoom) {
|
||||
// TODO: Try this with <line> elements, then compare performance difference
|
||||
|
||||
var bgwidth = +canvBG.attr('width');
|
||||
var bgheight = +canvBG.attr('height');
|
||||
|
||||
var units = svgCanvas.getUnits();
|
||||
var unit = units[svgEditor.curConfig.baseUnit]; // 1 = 1px
|
||||
var r_intervals = [.01, .1, 1, 10, 100, 1000];
|
||||
|
||||
var d = 0;
|
||||
var is_x = (d === 0);
|
||||
var dim = is_x ? 'x' : 'y';
|
||||
var lentype = is_x?'width':'height';
|
||||
var c_elem = svgCanvas.getContentElem();
|
||||
var content_d = c_elem.getAttribute(dim)-0;
|
||||
|
||||
var hcanv = hcanvas;
|
||||
|
||||
var u_multi = unit * zoom;
|
||||
|
||||
// Calculate the main number interval
|
||||
var raw_m = 100 / u_multi;
|
||||
var multi = 1;
|
||||
for(var i = 0; i < r_intervals.length; i++) {
|
||||
var num = r_intervals[i];
|
||||
multi = num;
|
||||
if(raw_m <= num) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
var big_int = multi * u_multi;
|
||||
|
||||
// Set the canvas size to the width of the container
|
||||
hcanv.width = big_int;
|
||||
hcanv.height = big_int;
|
||||
var ctx = hcanv.getContext("2d");
|
||||
|
||||
var ruler_d = 0;
|
||||
var cur_d = .5;
|
||||
|
||||
var part = big_int / 10;
|
||||
|
||||
ctx.globalAlpha = 0.2;
|
||||
ctx.strokeStyle = "#000";
|
||||
for(var i = 1; i < 10; i++) {
|
||||
var sub_d = Math.round(part * i) + .5;
|
||||
// var line_num = (i % 2)?12:10;
|
||||
var line_num = 0;
|
||||
ctx.moveTo(sub_d, big_int);
|
||||
ctx.lineTo(sub_d, line_num);
|
||||
ctx.moveTo(big_int, sub_d);
|
||||
ctx.lineTo(line_num ,sub_d);
|
||||
}
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.globalAlpha = 0.5;
|
||||
ctx.moveTo(cur_d, big_int);
|
||||
ctx.lineTo(cur_d, 0);
|
||||
|
||||
ctx.moveTo(big_int, cur_d);
|
||||
ctx.lineTo(0, cur_d);
|
||||
ctx.stroke();
|
||||
|
||||
var datauri = hcanv.toDataURL('image/png');
|
||||
gridimg.setAttribute('width', big_int);
|
||||
gridimg.setAttribute('height', big_int);
|
||||
gridimg.parentNode.setAttribute('width', big_int);
|
||||
gridimg.parentNode.setAttribute('height', big_int);
|
||||
svgCanvas.setHref(gridimg, datauri);
|
||||
}
|
||||
|
||||
return {
|
||||
name: "view_grid",
|
||||
svgicons: "extensions/grid-icon.xml",
|
||||
|
||||
zoomChanged: function(zoomlevel) {
|
||||
zoomChanged: function(zoom) {
|
||||
// update size
|
||||
var viewBox = "0 0 " + svgCanvas.contentW + " " + svgCanvas.contentH;
|
||||
$('#canvasGrid').attr("viewBox", viewBox);
|
||||
if(showGrid) updateGrid(zoom);
|
||||
},
|
||||
|
||||
buttons: [{
|
||||
|
|
@ -134,12 +163,13 @@ svgEditor.addExtension("view_grid", function(s) {
|
|||
'click': function() {
|
||||
var gr = !$('#view_grid').hasClass('push_button_pressed');
|
||||
if (gr) {
|
||||
svgEditor.curConfig.gridSnapping = true;
|
||||
svgEditor.curConfig.showGrid = showGrid = true;
|
||||
$('#view_grid').addClass('push_button_pressed').removeClass('tool_button');
|
||||
$('#canvasGrid').attr('display', 'normal');
|
||||
updateGrid(svgCanvas.getZoom());
|
||||
}
|
||||
else {
|
||||
svgEditor.curConfig.gridSnapping = false;
|
||||
svgEditor.curConfig.showGrid = showGrid = false;
|
||||
$('#view_grid').removeClass('push_button_pressed').addClass('tool_button');
|
||||
$('#canvasGrid').attr('display', 'none');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -402,6 +402,10 @@ var Utils = this.Utils = function() {
|
|||
// round value to for snapping
|
||||
"snapToGrid" : function(value){
|
||||
var stepSize = curConfig.snappingStep;
|
||||
var unit = curConfig.baseUnit;
|
||||
if(unit !== "px") {
|
||||
stepSize *= unit_types[unit];
|
||||
}
|
||||
value = Math.round(value/stepSize)*stepSize;
|
||||
return value;
|
||||
},
|
||||
|
|
@ -488,6 +492,7 @@ var canvas = this,
|
|||
|
||||
container.appendChild(svgroot);
|
||||
|
||||
|
||||
// The actual element that represents the final output SVG element
|
||||
var svgcontent = svgdoc.createElementNS(svgns, "svg");
|
||||
$(svgcontent).attr({
|
||||
|
|
@ -8515,10 +8520,6 @@ var convertToGroup = this.convertToGroup = function(elem) {
|
|||
|
||||
selectOnly([g]);
|
||||
|
||||
// Temporary hack to get rid of matrix
|
||||
// TODO: See what ungroupSelectedElement does to absorb matrix
|
||||
// canvas.ungroupSelectedElement();
|
||||
// canvas.groupSelectedElements();
|
||||
batchCmd.addSubCommand(pushGroupProperties(g, true));
|
||||
//
|
||||
addCommandToHistory(batchCmd);
|
||||
|
|
|
|||
Loading…
Reference in New Issue