151 lines
4.8 KiB
JavaScript
151 lines
4.8 KiB
JavaScript
/*
|
|
* ext-grid.js
|
|
*
|
|
* Licensed under the Apache License, Version 2
|
|
*
|
|
* Copyright(c) 2010 Redou Mine
|
|
*
|
|
*/
|
|
|
|
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);
|
|
|
|
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',
|
|
'width': '100%',
|
|
'height': '100%',
|
|
'x': 0,
|
|
'y': 0,
|
|
'overflow': 'visible',
|
|
'viewBox': '0 0 ' + dims[0] + ' ' + dims[1],
|
|
'display': 'none'
|
|
});
|
|
$('#canvasBackground').append(canvasgrid);
|
|
|
|
// create each grid
|
|
$.each(gridConfig, function(key, value) {
|
|
// grid-pattern
|
|
var gridPattern = svgdoc.createElementNS(svgns, "pattern");
|
|
assignAttributes(gridPattern, {
|
|
'id': 'gridpattern' + key,
|
|
'patternUnits': 'userSpaceOnUse',
|
|
'x': -(value.strokeWidth / 2), // position for strokewidth
|
|
'y': -(value.strokeWidth / 2), // position for strokewidth
|
|
'width': value.width,
|
|
'height': value.height
|
|
});
|
|
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 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);
|
|
$('#svgroot defs').append(gridPattern);
|
|
|
|
// grid-box
|
|
var gridBox = svgdoc.createElementNS(svgns, "rect");
|
|
assignAttributes(gridBox, {
|
|
'width': '100%',
|
|
'height': '100%',
|
|
'x': 0,
|
|
'y': 0,
|
|
'stroke-width': 0,
|
|
'stroke': 'none',
|
|
'fill': 'url(#gridpattern' + key + ')',
|
|
'opacity': value.opacity,
|
|
'style': 'pointer-events: none; display:visible;'
|
|
});
|
|
$('#canvasGrid').append(gridBox);
|
|
});
|
|
|
|
return {
|
|
name: "view_grid",
|
|
svgicons: "extensions/grid-icon.xml",
|
|
|
|
zoomChanged: function(zoomlevel) {
|
|
// update size
|
|
var viewBox = "0 0 " + svgCanvas.contentW + " " + svgCanvas.contentH;
|
|
$('#canvasGrid').attr("viewBox", viewBox);
|
|
},
|
|
|
|
buttons: [{
|
|
id: "view_grid",
|
|
type: "context",
|
|
panel: "editor_panel",
|
|
title: "Show/Hide Grid [G]",
|
|
events: {
|
|
'click': function() {
|
|
var gr = !$('#view_grid').hasClass('push_button_pressed');
|
|
if (gr) {
|
|
svgEditor.curConfig.gridSnapping = true;
|
|
$('#view_grid').addClass('push_button_pressed').removeClass('tool_button');
|
|
$('#canvasGrid').attr('display', 'normal');
|
|
}
|
|
else {
|
|
svgEditor.curConfig.gridSnapping = false;
|
|
$('#view_grid').removeClass('push_button_pressed').addClass('tool_button');
|
|
$('#canvasGrid').attr('display', 'none');
|
|
}
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
});
|