diff --git a/editor/extensions/ext-grid.js b/editor/extensions/ext-grid.js index 0de10e32..bbb7e084 100644 --- a/editor/extensions/ext-grid.js +++ b/editor/extensions/ext-grid.js @@ -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 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'); } diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index 97bcec44..4e79dcc1 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -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);