diff --git a/editor/svg-editor.css b/editor/svg-editor.css index a9f51dc2..c6926bb7 100644 --- a/editor/svg-editor.css +++ b/editor/svg-editor.css @@ -96,14 +96,23 @@ } -#ruler_x canvas { +#ruler_x canvas:first-child { margin-left: -16px; } +#ruler_x canvas { + float: left; +} + #ruler_y canvas { margin-top: -16px; } +#ruler_x > div, +#ruler_y > div { + overflow: hidden; +} + diff --git a/editor/svg-editor.html b/editor/svg-editor.html index abda0d43..c9b2a448 100644 --- a/editor/svg-editor.html +++ b/editor/svg-editor.html @@ -52,10 +52,14 @@ script type="text/javascript" src="locale/locale.min.js">
- +
+ +
- +
+ +
diff --git a/editor/svg-editor.js b/editor/svg-editor.js index 3f1cb957..b592135d 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -729,7 +729,14 @@ if(!z_info) return; var zoomlevel = z_info.zoom, bb = z_info.bbox; - $('#zoom').val(Math.round(zoomlevel*100)); + + if(zoomlevel < .001) { + changeZoom({value: .1}); + return; + } + +// $('#zoom').val(Math.round(zoomlevel*100)); + $('#zoom').val(zoomlevel*100); if(autoCenter) { updateCanvas(); @@ -1670,6 +1677,10 @@ } var changeZoom = function(ctl) { var zoomlevel = ctl.value / 100; + if(zoomlevel < .001) { + ctl.value = .1; + return; + } var zoom = svgCanvas.getZoom(); var w_area = workarea; @@ -4234,6 +4245,8 @@ if(!zoom) zoom = svgCanvas.getZoom(); if(!scanvas) scanvas = $("#svgcanvas"); + var limit = 30000; + var c_elem = svgCanvas.getContentElem(); var units = svgCanvas.getUnits(); @@ -4243,13 +4256,44 @@ var is_x = (d === 0); var dim = is_x ? 'x' : 'y'; var lentype = is_x?'width':'height'; - var content_d = c_elem.getAttribute(dim)-0; - var hcanv = $('#ruler_' + dim + ' canvas')[0]; + var $hcanv = $('#ruler_' + dim + ' canvas:first'); + var hcanv = $hcanv[0]; + // Set the canvas size to the width of the container - var len = hcanv[lentype] = scanvas[lentype](); + hcanv.setAttribute(lentype, 0); + var ruler_len = scanvas[lentype](); + var total_len = ruler_len; + hcanv.parentNode.style[lentype] = total_len + 'px'; + + var canv_count = 1; + var ctx_num = 0; + var ctx_arr; var ctx = hcanv.getContext("2d"); + + // Remove any existing canvasses + $hcanv.siblings().remove(); + + // Create multiple canvases when necessary (due to browser limits) + if(ruler_len >= limit) { + var num = parseInt(ruler_len / limit) + 1; + ctx_arr = Array(num); + ctx_arr[0] = ctx; + for(var i = 1; i < num; i++) { + hcanv[lentype] = limit; + var copy = hcanv.cloneNode(true); + hcanv.parentNode.appendChild(copy); + ctx_arr[i] = copy.getContext('2d'); + } + + copy[lentype] = ruler_len % limit; + + // set copy width to last + ruler_len = limit; + } + + hcanv[lentype] = ruler_len; var u_multi = unit * zoom; @@ -4267,12 +4311,13 @@ var big_int = multi * u_multi; ctx.font = "9px sans-serif"; - + var ruler_d = ((content_d / u_multi) % multi) * u_multi; - - for (; ruler_d < len; ruler_d += big_int) { - var real_d = Math.round((ruler_d) - content_d ); - + var label_pos = ruler_d - big_int; + for (; ruler_d < total_len; ruler_d += big_int) { + label_pos += big_int; + var real_d = ruler_d - content_d; + var cur_d = Math.round(ruler_d) + .5; if(is_x) { ctx.moveTo(cur_d, 15); @@ -4282,8 +4327,7 @@ ctx.lineTo(0, cur_d); } - - var num = real_d / u_multi; + var num = (label_pos - content_d) / u_multi; if(multi >= 1) { label = Math.round(num); } else { @@ -4312,6 +4356,19 @@ var part = big_int / 10; for(var i = 1; i < 10; i++) { var sub_d = Math.round(ruler_d + part * i) + .5; + if(ctx_arr && sub_d > ruler_len) { + ctx_num++; + ctx.stroke(); + if(ctx_num >= ctx_arr.length) { + i = 10; + ruler_d = total_len; + continue; + } + ctx = ctx_arr[ctx_num]; + ruler_d -= limit; + sub_d = Math.round(ruler_d + part * i) + .5; + } + var line_num = (i % 2)?12:10; if(is_x) { ctx.moveTo(sub_d, 15); diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index 4e79dcc1..4358abad 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -1560,7 +1560,7 @@ var SelectorManager; 'height': dims[1], 'x': 0, 'y': 0, - 'overflow': 'visible', + 'overflow': (isWebkit ? 'none' : 'visible'), // Chrome 7 has a problem with this when zooming out 'style': 'pointer-events:none' }); @@ -2444,7 +2444,7 @@ var copyElem = function(el) { // Opera's "d" value needs to be reset for Opera/Win/non-EN // Also needed for webkit (else does not keep curved segments on clone) - if((isWebkit) && el.nodeName == 'path') { + if(isWebkit && el.nodeName == 'path') { var fixed_d = pathActions.convertPath(el); new_el.setAttribute('d', fixed_d); }