Added excellent grid/snapping extension by redou.mine
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1700 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Alexis Deveria
parent
df2fc99450
commit
e6dd5ea757
|
|
@ -0,0 +1,150 @@
|
|||
/*
|
||||
* 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');
|
||||
}
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
});
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<!--
|
||||
Sample icons file. This file looks like an SVG file with groups as its
|
||||
children. Each group element has an ID that must match the ID of the button given
|
||||
in the extension. The SVG inside the group makes up the actual icon, and
|
||||
needs use a viewBox instead of width/height for it to scale properly.
|
||||
|
||||
Multiple icons can be included, each within their own group.
|
||||
-->
|
||||
<g id="view_grid">
|
||||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<g>
|
||||
<rect fill="#ffffff" stroke="#848484" x="2" y="2" width="20" height="20"/>
|
||||
<line fill="none" stroke="#848484" x1="11.84375" y1="-1.53125" x2="11.84375" y2="18.46875" transform="rotate(90, 11.8429, 8.46955)"/>
|
||||
<line fill="none" stroke="#848484" x1="11.90625" y1="5.21875" x2="11.90625" y2="25.21875" transform="rotate(90, 11.9054, 15.2196)"/>
|
||||
<line fill="none" stroke="#848484" x1="8.5" y1="2.03125" x2="8.5" y2="22.03125"/>
|
||||
<line fill="none" stroke="#848484" x1="15.5" y1="2.03125" x2="15.5" y2="22.03125"/>
|
||||
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="3.25" y="3.28125" width="4" height="4"/>
|
||||
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="10" y="3.28125" width="4" height="4"/>
|
||||
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="16.75" y="3.28125" width="4" height="4"/>
|
||||
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="3.28125" y="9.75" width="4" height="4"/>
|
||||
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="10.03125" y="9.75" width="4" height="4"/>
|
||||
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="16.78125" y="9.75" width="4" height="4"/>
|
||||
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="3.3125" y="16.59375" width="4" height="4"/>
|
||||
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="10.0625" y="16.59375" width="4" height="4"/>
|
||||
<rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="16.8125" y="16.59375" width="4" height="4"/>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
Loading…
Reference in New Issue