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

Implemented new icon size scaling method 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1645 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Alexis Deveria 2010-07-27 13:37:52 +00:00
parent 32aec94b36
commit 0d1284ca23
5 changed files with 292 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
editor/spinbtn/JQuerySpinBtn.js
View File

@ -117,10 +117,12 @@ $.fn.SpinButton = function(cfg){
var x = e.pageX || e.x; var x = e.pageX || e.x;
var y = e.pageY || e.y; var y = e.pageY || e.y;
var el = e.target || e.srcElement; var el = e.target || e.srcElement;
var height = $(el).outerHeight()/2; var scale = svgEditor.tool_scale || 1;
var height = $(el).height()/2;
var direction = var direction =
(x > coord(el,'offsetLeft') + el.offsetWidth - this.spinCfg._btn_width) (x > coord(el,'offsetLeft') + el.offsetWidth*scale - this.spinCfg._btn_width)
? ((y < coord(el,'offsetTop') + height) ? 1 : -1) : 0; ? ((y < coord(el,'offsetTop') + height*scale) ? 1 : -1) : 0;
if (direction !== this.spinCfg._direction) { if (direction !== this.spinCfg._direction) {
// Style up/down buttons: // Style up/down buttons:

13
editor/svg-editor.css
View File

@ -2,6 +2,13 @@
background: #D8D8D8; background: #D8D8D8;
} }
#svg_editor * {
transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
#svg_editor { #svg_editor {
font-size: 8pt; font-size: 8pt;
font-family: Verdana, Helvetica, Arial; font-family: Verdana, Helvetica, Arial;
@ -278,6 +285,7 @@
position: absolute; position: absolute;
top: 4px; top: 4px;
left: 4px; left: 4px;
z-index: 5;
} }
@ -466,6 +474,11 @@
height: 34px; height: 34px;
} }
#svg_editor div.toolset label span {
/* outline: 1px solid red;*/
padding-top: 3px;
display: inline-block;
}
#tools_top > div > * { #tools_top > div > * {
float: left; float: left;

4
editor/svg-editor.html
View File

@ -166,7 +166,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</label> </label>
</div> </div>
<label id="tool_angle" title="Change rotation angle"> <label id="tool_angle" title="Change rotation angle" class="toolset">
<span id="angleLabel" class="icon_label"></span> <span id="angleLabel" class="icon_label"></span>
<input id="angle" size="2" value="0" type="text"/> <input id="angle" size="2" value="0" type="text"/>
</label> </label>
@ -247,7 +247,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<input id="rect_height" class="attr_changer" size="3" data-attr="height"/> <input id="rect_height" class="attr_changer" size="3" data-attr="height"/>
</label> </label>
</div> </div>
<label id="cornerRadiusLabel" title="Change Rectangle Corner Radius"> <label id="cornerRadiusLabel" title="Change Rectangle Corner Radius" class="toolset">
<span class="icon_label"></span> <span class="icon_label"></span>
<input id="rect_rx" size="3" value="0" type="text" data-attr="Corner Radius"/> <input id="rect_rx" size="3" value="0" type="text" data-attr="Corner Radius"/>
</label> </label>

416
editor/svg-editor.js
View File

@ -82,6 +82,8 @@
Editor.curConfig = curConfig; Editor.curConfig = curConfig;
Editor.tool_scale = 1;
// Store and retrieve preferences // Store and retrieve preferences
$.pref = function(key, val) { $.pref = function(key, val) {
if(val) curPrefs[key] = val; if(val) curPrefs[key] = val;
@ -385,18 +387,17 @@
$(this).parent().prepend(this); $(this).parent().prepend(this);
}); });
// Use small icons by default if not all left tools are visible
var tleft = $('#tools_left'); var tleft = $('#tools_left');
if (tleft.length != 0) { if (tleft.length != 0) {
var min_height = tleft.offset().top + tleft.outerHeight(); var min_height = tleft.offset().top + tleft.outerHeight();
} }
var size = $.pref('iconsize'); // var size = $.pref('iconsize');
if(size && size != 'm') { // if(size && size != 'm') {
svgEditor.setIconSize(size); // svgEditor.setIconSize(size);
} else if($(window).height() < min_height) { // } else if($(window).height() < min_height) {
// Make smaller // // Make smaller
svgEditor.setIconSize('s'); // svgEditor.setIconSize('s');
} // }
// Look for any missing flyout icons from plugins // Look for any missing flyout icons from plugins
$('.tools_flyout').each(function() { $('.tools_flyout').each(function() {
@ -438,7 +439,8 @@
default_img_url = curConfig.imgPath + "logo.png", default_img_url = curConfig.imgPath + "logo.png",
workarea = $("#workarea"), workarea = $("#workarea"),
show_save_warning = false, show_save_warning = false,
exportWindow = null; exportWindow = null,
tool_scale = 1;
// This sets up alternative dialog boxes. They mostly work the same way as // This sets up alternative dialog boxes. They mostly work the same way as
// their UI counterparts, expect instead of returning the result, a callback // their UI counterparts, expect instead of returning the result, a callback
@ -783,7 +785,7 @@
var shower = $('#' + this.id + '_show'); var shower = $('#' + this.id + '_show');
var pos = shower.offset(); var pos = shower.offset();
var w = shower.outerWidth(); var w = shower.outerWidth();
$(this).css({left: pos.left + w, top: pos.top}); $(this).css({left: (pos.left + w)*tool_scale, top: pos.top});
}); });
} }
@ -798,11 +800,28 @@
}); });
} }
var resize_timer;
var extAdded = function(window, ext) { var extAdded = function(window, ext) {
var cb_called = false; var cb_called = false;
var resize_done = false;
var cb_ready = true; // Set to false to delay callback (e.g. wait for $.svgIcons) var cb_ready = true; // Set to false to delay callback (e.g. wait for $.svgIcons)
function prepResize() {
if(resize_timer) {
clearTimeout(resize_timer);
resize_timer = null;
}
if(!resize_done) {
resize_timer = setTimeout(function() {
resize_done = true;
setIconSize(curPrefs.iconsize);
}, 50);
}
}
var runCallback = function() { var runCallback = function() {
if(ext.callback && !cb_called && cb_ready) { if(ext.callback && !cb_called && cb_ready) {
cb_called = true; cb_called = true;
@ -1128,7 +1147,7 @@
callback: function(icons) { callback: function(icons) {
// Non-ideal hack to make the icon match the current size // Non-ideal hack to make the icon match the current size
if(curPrefs.iconsize && curPrefs.iconsize != 'm') { if(curPrefs.iconsize && curPrefs.iconsize != 'm') {
setIconSize(curPrefs.iconsize, true); prepResize();
} }
cb_ready = true; // Ready for callback cb_ready = true; // Ready for callback
runCallback(); runCallback();
@ -2527,159 +2546,253 @@
} }
icon = icon.clone(); icon = icon.clone();
$(elem).empty().append(icon); $(elem).empty().append(icon);
if(forcedSize) { // if(forcedSize) {
var obj = {}; // var obj = {};
obj[elem + ' .svg_icon'] = forcedSize; // obj[elem + ' .svg_icon'] = forcedSize;
$.resizeSvgIcons(obj); // $.resizeSvgIcons(obj);
} else { // } else {
var size = curPrefs.iconsize; // var size = curPrefs.iconsize;
if(size && size !== 'm') { // if(size && size !== 'm') {
var icon_sizes = { s:16, m:24, l:32, xl:48}, obj = {}; // var icon_sizes = { s:16, m:24, l:32, xl:48}, obj = {};
obj[elem + ' .svg_icon'] = icon_sizes[size]; // obj[elem + ' .svg_icon'] = icon_sizes[size];
$.resizeSvgIcons(obj); // $.resizeSvgIcons(obj);
// }
// }
}
var ua_prefix;
(ua_prefix = function() {
var regex = /^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/;
var someScript = document.getElementsByTagName('script')[0];
for(var prop in someScript.style) {
if(regex.test(prop)) {
// test is faster than match, so it's better to perform
// that on the lot and match only when necessary
return prop.match(regex)[0];
} }
} }
// Nothing found so far?
if('WebkitOpacity' in someScript.style) return 'Webkit';
if('KhtmlOpacity' in someScript.style) return 'Khtml';
return '';
}());
var scaleElements = function(elems, scale) {
var prefix = '-' + ua_prefix.toLowerCase() + '-';
var sides = ['top', 'left', 'bottom', 'right'];
elems.each(function() {
// console.log('go', scale);
// Handled in CSS
// this.style[ua_prefix + 'Transform'] = 'scale(' + scale + ')';
var el = $(this);
var w = el.outerWidth() * (scale - 1);
var h = el.outerHeight() * (scale - 1);
var margins = {};
for(var i = 0; i < 4; i++) {
var s = sides[i];
var cur = el.data('orig_margin-' + s);
if(cur == null) {
cur = parseInt(el.css('margin-' + s));
// Cache the original margin
el.data('orig_margin-' + s, cur);
}
var val = cur * scale;
if(s === 'right') {
val += w;
} else if(s === 'bottom') {
val += h;
}
el.css('margin-' + s, val);
// el.css('outline', '1px solid red');
}
});
} }
var setIconSize = Editor.setIconSize = function(size, force) { var setIconSize = Editor.setIconSize = function(size, force) {
if(size == curPrefs.size && !force) return; if(size == curPrefs.size && !force) return;
// return;
// var elems = $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open');
console.log('size', size);
var sel_toscale = '#tools_top .toolset, #editor_panel > *, #history_panel > *,\
#main_button, #tools_left > *, #path_node_panel > *, #multiselected_panel > *,\
#g_panel > *, #tool_font_size > *, .tools_flyout';
var elems = $(sel_toscale);
var scale = 1;
if(typeof size == 'number') {
scale = size;
} else {
var icon_sizes = { s:.75, m:1, l:1.25, xl:1.5 };
scale = icon_sizes[size];
}
Editor.tool_scale = tool_scale = scale;
setFlyoutPositions();
// $('.tools_flyout').each(function() {
// var pos = $(this).position();
// console.log($(this), pos.left+(34 * scale));
// $(this).css({'left': pos.left+(34 * scale), 'top': pos.top+(77 * scale)});
// console.log('l', $(this).css('left'));
// });
// var scale = .75;//0.75;
var hidden_ps = elems.parents(':hidden');
hidden_ps.css('visibility', 'hidden').show();
scaleElements(elems, scale);
hidden_ps.css('visibility', 'visible').hide();
// console.timeEnd('elems');
// return;
$.pref('iconsize', size); $.pref('iconsize', size);
$('#iconsize').val(size); $('#iconsize').val(size);
var icon_sizes = { s:16, m:24, l:32, xl:48 };
var size_num = icon_sizes[size];
// Change icon size // Change icon size
$('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open') // $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open')
.find('> svg, > img').each(function() { // .find('> svg, > img').each(function() {
this.setAttribute('width',size_num); // this.setAttribute('width',size_num);
this.setAttribute('height',size_num); // this.setAttribute('height',size_num);
}); // });
//
$.resizeSvgIcons({ // $.resizeSvgIcons({
'.flyout_arrow_horiz > svg, .flyout_arrow_horiz > img': size_num / 5, // '.flyout_arrow_horiz > svg, .flyout_arrow_horiz > img': size_num / 5,
'#logo > svg, #logo > img': size_num * 1.3, // '#logo > svg, #logo > img': size_num * 1.3,
'#tools_bottom .icon_label > *': (size_num === 16 ? 18 : size_num * .75) // '#tools_bottom .icon_label > *': (size_num === 16 ? 18 : size_num * .75)
}); // });
if(size != 's') { // if(size != 's') {
$.resizeSvgIcons({'#layerbuttons svg, #layerbuttons img': size_num * .6}); // $.resizeSvgIcons({'#layerbuttons svg, #layerbuttons img': size_num * .6});
} // }
// Note that all rules will be prefixed with '#svg_editor' when parsed // Note that all rules will be prefixed with '#svg_editor' when parsed
var cssResizeRules = { var cssResizeRules = {
".tool_button,\ // ".tool_button,\
.push_button,\ // .push_button,\
.tool_button_current,\ // .tool_button_current,\
.push_button_pressed,\ // .push_button_pressed,\
.disabled,\ // .disabled,\
.icon_label,\ // .icon_label,\
.tools_flyout .tool_button": { // .tools_flyout .tool_button": {
'width': {s: '16px', l: '32px', xl: '48px'}, // 'width': {s: '16px', l: '32px', xl: '48px'},
'height': {s: '16px', l: '32px', xl: '48px'}, // 'height': {s: '16px', l: '32px', xl: '48px'},
'padding': {s: '1px', l: '2px', xl: '3px'} // 'padding': {s: '1px', l: '2px', xl: '3px'}
}, // },
".tool_sep": { // ".tool_sep": {
'height': {s: '16px', l: '32px', xl: '48px'}, // 'height': {s: '16px', l: '32px', xl: '48px'},
'margin': {s: '2px 2px', l: '2px 5px', xl: '2px 8px'} // 'margin': {s: '2px 2px', l: '2px 5px', xl: '2px 8px'}
}, // },
"#main_icon": { // "#main_icon": {
'width': {s: '31px', l: '53px', xl: '75px'}, // 'width': {s: '31px', l: '53px', xl: '75px'},
'height': {s: '22px', l: '42px', xl: '64px'} // 'height': {s: '22px', l: '42px', xl: '64px'}
}, // },
"#tools_top": { "#tools_top": {
'left': {s: '36px', l: '60px', xl: '80px'}, 'left': 50,
'height': {s: '50px', l: '88px', xl: '125px'} 'height': 72
}, },
"#tools_left": { "#tools_left": {
'width': {s: '22px', l: '30px', xl: '38px'}, 'width': 31,
'top': {s: '50px', l: '87px', xl: '125px'} 'top': 74
}, },
"div#workarea": { "div#workarea": {
'left': {s: '27px', l: '46px', xl: '65px'}, 'left': 38,
'top': {s: '50px', l: '88px', xl: '125px'}, 'top': 74
'bottom': {s: '55px', l: '98px', xl: '145px'}
}, },
"#tools_bottom": { // "#tools_bottom": {
'left': {s: '27px', l: '46px', xl: '65px'}, // 'left': {s: '27px', l: '46px', xl: '65px'},
'height': {s: '58px', l: '98px', xl: '145px'} // 'height': {s: '58px', l: '98px', xl: '145px'}
}, // },
"#color_tools": { // "#color_tools": {
'border-spacing': {s: '0 1px'}, // 'border-spacing': {s: '0 1px'},
'margin-top': {s: '-1px'} // 'margin-top': {s: '-1px'}
}, // },
"#color_tools .icon_label": { // "#color_tools .icon_label": {
'width': {l:'43px', xl: '60px'} // 'width': {l:'43px', xl: '60px'}
}, // },
".color_tool": { // ".color_tool": {
'height': {s: '20px'} // 'height': {s: '20px'}
}, // },
"#tool_opacity": { // "#tool_opacity": {
'top': {s: '1px'}, // 'top': {s: '1px'},
'height': {s: 'auto', l:'auto', xl:'auto'} // 'height': {s: 'auto', l:'auto', xl:'auto'}
}, // },
"#tools_top input, #tools_bottom input": { // "#tools_top input, #tools_bottom input": {
'margin-top': {s: '2px', l: '4px', xl: '5px'}, // 'margin-top': {s: '2px', l: '4px', xl: '5px'},
'height': {s: 'auto', l: 'auto', xl: 'auto'}, // 'height': {s: 'auto', l: 'auto', xl: 'auto'},
'border': {s: '1px solid #555', l: 'auto', xl: 'auto'}, // 'border': {s: '1px solid #555', l: 'auto', xl: 'auto'},
'font-size': {s: '.9em', l: '1.2em', xl: '1.4em'} // 'font-size': {s: '.9em', l: '1.2em', xl: '1.4em'}
}, // },
"#zoom_panel": { // "#zoom_panel": {
'margin-top': {s: '3px', l: '4px', xl: '5px'} // 'margin-top': {s: '3px', l: '4px', xl: '5px'}
}, // },
"#copyright, #tools_bottom .label": { // "#copyright, #tools_bottom .label": {
'font-size': {l: '1.5em', xl: '2em'}, // 'font-size': {l: '1.5em', xl: '2em'},
'line-height': {s: '15px'} // 'line-height': {s: '15px'}
}, // },
"#tools_bottom_2": { // "#tools_bottom_2": {
'width': {l: '295px', xl: '355px'}, // 'width': {l: '295px', xl: '355px'},
'top': {s: '4px'} // 'top': {s: '4px'}
}, // },
"#tools_top > div, #tools_top": { // "#tools_top > div, #tools_top": {
'line-height': {s: '17px', l: '34px', xl: '50px'} // 'line-height': {s: '17px', l: '34px', xl: '50px'}
}, // },
".dropdown button": { // ".dropdown button": {
'height': {s: '18px', l: '34px', xl: '40px'}, // 'height': {s: '18px', l: '34px', xl: '40px'},
'line-height': {s: '18px', l: '34px', xl: '40px'}, // 'line-height': {s: '18px', l: '34px', xl: '40px'},
'margin-top': {s: '3px'} // 'margin-top': {s: '3px'}
}, // },
"#tools_top label, #tools_bottom label": { // "#tools_top label, #tools_bottom label": {
'font-size': {s: '1em', l: '1.5em', xl: '2em'}, // 'font-size': {s: '1em', l: '1.5em', xl: '2em'},
'height': {s: '25px', l: '42px', xl: '64px'} // 'height': {s: '25px', l: '42px', xl: '64px'}
}, // },
"div.toolset": { // "div.toolset": {
'height': {s: '25px', l: '42px', xl: '64px'} // 'height': {s: '25px', l: '42px', xl: '64px'}
}, // },
"#tool_bold, #tool_italic": { // "#tool_bold, #tool_italic": {
'font-size': {s: '1.5em', l: '3em', xl: '4.5em'} // 'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}
}, // },
"#sidepanels": { // "#sidepanels": {
'top': {s: '50px', l: '88px', xl: '125px'}, // 'top': {s: '50px', l: '88px', xl: '125px'},
'bottom': {s: '51px', l: '68px', xl: '65px'} // 'bottom': {s: '51px', l: '68px', xl: '65px'}
}, // },
'#layerbuttons': { // '#layerbuttons': {
'width': {l: '130px', xl: '175px'}, // 'width': {l: '130px', xl: '175px'},
'height': {l: '24px', xl: '30px'} // 'height': {l: '24px', xl: '30px'}
}, // },
'#layerlist': { // '#layerlist': {
'width': {l: '128px', xl: '150px'} // 'width': {l: '128px', xl: '150px'}
}, // },
'.layer_button': { // '.layer_button': {
'width': {l: '19px', xl: '28px'}, // 'width': {l: '19px', xl: '28px'},
'height': {l: '19px', xl: '28px'} // 'height': {l: '19px', xl: '28px'}
}, // },
"input.spin-button": { // "input.spin-button": {
'background-image': {l: "url('images/spinbtn_updn_big.png')", xl: "url('images/spinbtn_updn_big.png')"}, // 'background-image': {l: "url('images/spinbtn_updn_big.png')", xl: "url('images/spinbtn_updn_big.png')"},
'background-position': {l: '100% -5px', xl: '100% -2px'}, // 'background-position': {l: '100% -5px', xl: '100% -2px'},
'padding-right': {l: '24px', xl: '24px' } // 'padding-right': {l: '24px', xl: '24px' }
}, // },
"input.spin-button.up": { // "input.spin-button.up": {
'background-position': {l: '100% -45px', xl: '100% -42px'} // 'background-position': {l: '100% -45px', xl: '100% -42px'}
}, // },
"input.spin-button.down": { // "input.spin-button.down": {
'background-position': {l: '100% -85px', xl: '100% -82px'} // 'background-position': {l: '100% -85px', xl: '100% -82px'}
}, // },
"#position_opts": { // "#position_opts": {
'width': {all: (size_num*4) +'px'} // 'width': {all: (size_num*4) +'px'}
} // }
}; };
var rule_elem = $('#tool_size_rules'); var rule_elem = $('#tool_size_rules');
@ -2695,12 +2808,21 @@
selector = '#svg_editor ' + selector.replace(/,/g,', #svg_editor'); selector = '#svg_editor ' + selector.replace(/,/g,', #svg_editor');
style_str += selector + '{'; style_str += selector + '{';
$.each(rules, function(prop, values) { $.each(rules, function(prop, values) {
if(values[size] || values.all) { if(typeof values === 'number') {
style_str += (prop + ':' + (values[size] || values.all) + ';'); var val = (values * scale) + 'px';
} else if(values[size] || values.all) {
var val = (values[size] || values.all);
} }
style_str += (prop + ':' + val + ';');
}); });
style_str += '}'; style_str += '}';
}); });
//this.style[ua_prefix + 'Transform'] = 'scale(' + scale + ')';
var prefix = '-' + ua_prefix.toLowerCase() + '-';
style_str += (sel_toscale + '{' + prefix + 'transform: scale(' + scale + ');}'
+ ' #svg_editor div.toolset .toolset {' + prefix + 'transform: scale(1); margin: 1px !important;}' // Hack for markers
+ ' #svg_editor .ui-slider {' + prefix + 'transform: scale(' + (1/scale) + ');}' // Hack for sliders
);
rule_elem.text(style_str); rule_elem.text(style_str);
} }

2
editor/svgicons/jquery.svgicons.js
View File

@ -254,7 +254,7 @@ $(function() {
} }
if(isOpera) { if(isOpera) {
setTimeout(function() { setTimeout(function() {
icon.attr('style','visibility:visible;'); icon.removeAttr('style');
},1); },1);
} }
} }