diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index e54a25b9..5a1499f9 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -54,6 +54,59 @@
background: -webkit-gradient(radial, center center, 3, center center, 1000, from(#bbb), to(#222));
}
+#rulers > div {
+ position: absolute;
+ background: #DDD;
+ z-index: 1;
+ overflow: hidden;
+}
+
+#ruler_corner {
+ top: 76px;
+ left: 41px;
+ width: 15px;
+ height: 15px;
+}
+
+#ruler_x {
+ height: 15px;
+ top: 76px;
+ left: 56px;
+ right: 30px;
+ border-bottom: 1px solid;
+ border-left: 1px solid #777;
+}
+
+#rulers.moved #ruler_corner,
+#rulers.moved #ruler_x {
+ top: 101px;
+}
+
+#ruler_y {
+ width: 15px;
+ top: 91px;
+ left: 41px;
+ bottom: 78px;
+ border-right: 1px solid;
+ border-top: 1px solid #777;
+}
+
+#rulers.moved #ruler_y {
+ top: 116px;
+}
+
+
+#ruler_x canvas {
+ margin-left: -16px;
+}
+
+#ruler_y canvas {
+ margin-top: -16px;
+}
+
+
+
+
#svg_editor div#palette_holder {
overflow-x: scroll;
overflow-y: hidden;
@@ -721,6 +774,7 @@ span.zoom_tool {
display: none;
cursor: pointer;
width: 400px;
+ z-index: 1;
}
#svg_editor .tools_flyout_v {
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index 94a826ef..4f27f1e4 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -49,9 +49,21 @@ script type="text/javascript" src="locale/locale.min.js">
+
+
@@ -667,6 +679,11 @@ script type="text/javascript" src="locale/locale.min.js">
+
+
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 3c88cf98..f608b3b0 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -51,7 +51,8 @@
wireframe: false,
colorPickerCSS: null,
gridSnapping: false,
- snappingStep: 10
+ snappingStep: 10,
+ showRulers: true
},
uiStrings = Editor.uiStrings = {
"invalidAttrValGiven":"Invalid value given",
@@ -739,6 +740,7 @@
var contextChanged = function(win, context) {
$('#workarea,#sidepanels').css('top', context?100:75);
+ $('#rulers').toggleClass('moved', context);
if(cur_context && !context) {
// Back to normal
workarea[0].scrollTop -= 25;
@@ -2699,6 +2701,11 @@
// set grid setting
curConfig.gridSnapping = $('#grid_snapping_on')[0].checked;
curConfig.snappingStep = $('#grid_snapping_step').val();
+ curConfig.showRulers = $('#show_rulers')[0].checked;
+
+ $('#rulers').toggle(curConfig.showRulers);
+ if(curConfig.showRulers) updateRulers();
+
svgCanvas.setConfig(curConfig);
updateCanvas();
@@ -3046,6 +3053,14 @@
});
});
+ (function() {
+ workarea.scroll(function() {
+ $('#ruler_x')[0].scrollLeft = workarea[0].scrollLeft;
+ $('#ruler_y')[0].scrollTop = workarea[0].scrollTop;
+ });
+
+ }());
+
$('#url_notice').click(function() {
$.alert(this.title);
});
@@ -3434,6 +3449,8 @@
workarea.css('right', parseInt(workarea.css('right'))+deltax);
sidepanels.css('width', parseInt(sidepanels.css('width'))+deltax);
layerpanel.css('width', parseInt(layerpanel.css('width'))+deltax);
+ var ruler_x = $('#ruler_x');
+ ruler_x.css('right', parseInt(ruler_x.css('right')) + deltax);
}
$('#sidepanel_handle')
@@ -3465,9 +3482,11 @@
var deltax = (w > 2 || close ? 2 : SIDEPANEL_OPENWIDTH) - w;
var sidepanels = $('#sidepanels');
var layerpanel = $('#layerpanel');
- workarea.css('right', parseInt(workarea.css('right'))+deltax);
- sidepanels.css('width', parseInt(sidepanels.css('width'))+deltax);
- layerpanel.css('width', parseInt(layerpanel.css('width'))+deltax);
+ var ruler_x = $('#ruler_x');
+ workarea.css('right', parseInt(workarea.css('right')) + deltax);
+ sidepanels.css('width', parseInt(sidepanels.css('width')) + deltax);
+ layerpanel.css('width', parseInt(layerpanel.css('width')) + deltax);
+ ruler_x.css('right', parseInt(ruler_x.css('right')) + deltax);
};
// this function highlights the layer passed in (by fading out the other layers)
@@ -4112,6 +4131,108 @@
w_area[0].scrollLeft = new_ctr.x - w_orig/2;
w_area[0].scrollTop = new_ctr.y - h_orig/2;
}
+
+ if(curConfig.showRulers) {
+ updateRulers(cnvs, zoom);
+ workarea.scroll();
+ }
+ }
+
+ // Make [1,2,5] array
+ var r_intervals = [];
+ for(var i = .1; i < 1E5; i *= 10) {
+ r_intervals.push(1 * i);
+ r_intervals.push(2 * i);
+ r_intervals.push(5 * i);
+ }
+
+ function updateRulers(scanvas, zoom) {
+ if(!zoom) zoom = svgCanvas.getZoom();
+ if(!scanvas) scanvas = $("#svgcanvas");
+
+ var c_elem = svgCanvas.getContentElem();
+
+ for(var d = 0; d < 2; d++) {
+ 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];
+ // Set the canvas size to the width of the container
+ var len = hcanv[lentype] = scanvas[lentype]();
+ var ctx = hcanv.getContext("2d");
+
+ var unit = 1; // 1 = 1px
+
+ // Calculate the main number interval
+ var raw_m = 50 / zoom;
+
+ 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 = unit * multi * zoom;
+
+ ctx.font = "10px sans-serif";
+
+ var ruler_d = ((content_d / zoom) % multi) * zoom;
+
+ for (; ruler_d < len; ruler_d += big_int) {
+ var real_d = Math.round((ruler_d) - content_d );
+
+ var cur_d = Math.round(ruler_d) + .5;
+ if(is_x) {
+ ctx.moveTo(cur_d, 15);
+ ctx.lineTo(cur_d, 0);
+ } else {
+ ctx.moveTo(15, cur_d);
+ ctx.lineTo(0, cur_d);
+ }
+
+ var label = Math.round(real_d / zoom);
+
+ // Do anything special for negative numbers?
+// var is_neg = label < 0;
+// real_d2 = Math.abs(real_d2);
+
+ // Change 1000s to Ks
+ if(label !== 0 && label !== 1000 && label % 1000 === 0) {
+ label = (label / 1000) + 'K';
+ }
+
+ if(is_x) {
+ ctx.fillText(label, ruler_d+2, 8);
+ } else {
+ var str = (label+'').split('');
+ for(var i = 0; i < str.length; i++) {
+ ctx.fillText(str[i], 1, (ruler_d+9) + i*9);
+ }
+ }
+
+ var part = big_int / 10;
+ for(var i = 1; i < 10; i++) {
+ var sub_d = Math.round(ruler_d + part * i) + .5;
+ var line_num = (i % 2)?12:10;
+ if(is_x) {
+ ctx.moveTo(sub_d, 15);
+ ctx.lineTo(sub_d, line_num);
+ } else {
+ ctx.moveTo(15, sub_d);
+ ctx.lineTo(line_num ,sub_d);
+ }
+ }
+ }
+
+ ctx.strokeStyle = "#000";
+ ctx.stroke();
+ }
}
// $(function() {