Added basic rulers for issue 628
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1773 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Alexis Deveria
parent
d114662767
commit
50b942d0ce
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -49,9 +49,21 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
<body>
|
||||
<div id="svg_editor">
|
||||
|
||||
<div id="rulers">
|
||||
<div id="ruler_corner"></div>
|
||||
<div id="ruler_x">
|
||||
<canvas height="15"></canvas>
|
||||
</div>
|
||||
<div id="ruler_y">
|
||||
<canvas width="15"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="workarea">
|
||||
<style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style>
|
||||
<div id="svgcanvas"></div>
|
||||
<div id="svgcanvas" style="position:relative">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidepanels">
|
||||
|
|
@ -667,6 +679,11 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
<label><span id="svginfo_snap_step">Snapping Step-Size:</span> <input type="text" id="grid_snapping_step" size="3" value="10"/></label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="units_rulers">
|
||||
<legend id="svginfo_units_rulers">Units & Rulers</legend>
|
||||
<label><span id="svginfo_rulers_onoff">Show rulers</span><input type="checkbox" value="show_rulers" id="show_rulers" checked></label>
|
||||
</fieldset>
|
||||
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue