zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added basic rulers for issue 628 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1773 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Alexis Deveria 2010-10-01 18:59:12 +00:00
parent d114662767
commit 50b942d0ce
3 changed files with 197 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
editor/svg-editor.css
View File

@ -54,6 +54,59 @@
background: -webkit-gradient(radial, center center, 3, center center, 1000, from(#bbb), to(#222)); 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 { #svg_editor div#palette_holder {
overflow-x: scroll; overflow-x: scroll;
overflow-y: hidden; overflow-y: hidden;
@ -721,6 +774,7 @@ span.zoom_tool {
display: none; display: none;
cursor: pointer; cursor: pointer;
width: 400px; width: 400px;
z-index: 1;
} }
#svg_editor .tools_flyout_v { #svg_editor .tools_flyout_v {

19
editor/svg-editor.html
View File

@ -49,9 +49,21 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<body> <body>
<div id="svg_editor"> <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"> <div id="workarea">
<style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style> <style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style>
<div id="svgcanvas"></div> <div id="svgcanvas" style="position:relative">
</div>
</div> </div>
<div id="sidepanels"> <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> <label><span id="svginfo_snap_step">Snapping Step-Size:</span> <input type="text" id="grid_snapping_step" size="3" value="10"/></label>
</fieldset> </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> </fieldset>
</div> </div>

129
editor/svg-editor.js
View File

@ -51,7 +51,8 @@
wireframe: false, wireframe: false,
colorPickerCSS: null, colorPickerCSS: null,
gridSnapping: false, gridSnapping: false,
snappingStep: 10 snappingStep: 10,
showRulers: true
}, },
uiStrings = Editor.uiStrings = { uiStrings = Editor.uiStrings = {
"invalidAttrValGiven":"Invalid value given", "invalidAttrValGiven":"Invalid value given",
@ -739,6 +740,7 @@
var contextChanged = function(win, context) { var contextChanged = function(win, context) {
$('#workarea,#sidepanels').css('top', context?100:75); $('#workarea,#sidepanels').css('top', context?100:75);
$('#rulers').toggleClass('moved', context);
if(cur_context && !context) { if(cur_context && !context) {
// Back to normal // Back to normal
workarea[0].scrollTop -= 25; workarea[0].scrollTop -= 25;
@ -2699,6 +2701,11 @@
// set grid setting // set grid setting
curConfig.gridSnapping = $('#grid_snapping_on')[0].checked; curConfig.gridSnapping = $('#grid_snapping_on')[0].checked;
curConfig.snappingStep = $('#grid_snapping_step').val(); curConfig.snappingStep = $('#grid_snapping_step').val();
curConfig.showRulers = $('#show_rulers')[0].checked;
$('#rulers').toggle(curConfig.showRulers);
if(curConfig.showRulers) updateRulers();
svgCanvas.setConfig(curConfig); svgCanvas.setConfig(curConfig);
updateCanvas(); 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() { $('#url_notice').click(function() {
$.alert(this.title); $.alert(this.title);
}); });
@ -3434,6 +3449,8 @@
workarea.css('right', parseInt(workarea.css('right'))+deltax); workarea.css('right', parseInt(workarea.css('right'))+deltax);
sidepanels.css('width', parseInt(sidepanels.css('width'))+deltax); sidepanels.css('width', parseInt(sidepanels.css('width'))+deltax);
layerpanel.css('width', parseInt(layerpanel.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') $('#sidepanel_handle')
@ -3465,9 +3482,11 @@
var deltax = (w > 2 || close ? 2 : SIDEPANEL_OPENWIDTH) - w; var deltax = (w > 2 || close ? 2 : SIDEPANEL_OPENWIDTH) - w;
var sidepanels = $('#sidepanels'); var sidepanels = $('#sidepanels');
var layerpanel = $('#layerpanel'); var layerpanel = $('#layerpanel');
workarea.css('right', parseInt(workarea.css('right'))+deltax); var ruler_x = $('#ruler_x');
sidepanels.css('width', parseInt(sidepanels.css('width'))+deltax); workarea.css('right', parseInt(workarea.css('right')) + deltax);
layerpanel.css('width', parseInt(layerpanel.css('width'))+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) // 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].scrollLeft = new_ctr.x - w_orig/2;
w_area[0].scrollTop = new_ctr.y - h_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() { // $(function() {