Update SVG-Edit
Version 2.5.1
This commit is contained in:
Jacques Distler
parent
8e57e97869
commit
113e0af736
10 changed files with 723 additions and 335 deletions
|
|
@ -45,9 +45,11 @@
|
|||
imgPath: 'images/',
|
||||
langPath: 'locale/',
|
||||
extPath: 'extensions/',
|
||||
jGraduatePath: 'jgraduate/images/',
|
||||
extensions: ['ext-markers.js','ext-connector.js', 'ext-eyedropper.js', 'ext-imagelib.js', 'ext-itex.js'],
|
||||
initTool: 'select',
|
||||
wireframe: false
|
||||
wireframe: false,
|
||||
colorPickerCSS: null
|
||||
},
|
||||
uiStrings = Editor.uiStrings = {
|
||||
"invalidAttrValGiven":"Invalid value given",
|
||||
|
|
@ -82,6 +84,8 @@
|
|||
|
||||
Editor.curConfig = curConfig;
|
||||
|
||||
Editor.tool_scale = 1;
|
||||
|
||||
// Store and retrieve preferences
|
||||
$.pref = function(key, val) {
|
||||
if(val) curPrefs[key] = val;
|
||||
|
|
@ -147,6 +151,7 @@
|
|||
Editor.setCustomHandlers = function(opts) {
|
||||
Editor.ready(function() {
|
||||
if(opts.open) {
|
||||
$('#tool_open > input[type="file"]').remove();
|
||||
$('#tool_open').show();
|
||||
svgCanvas.open = opts.open;
|
||||
}
|
||||
|
|
@ -207,7 +212,15 @@
|
|||
|
||||
var extFunc = function() {
|
||||
$.each(curConfig.extensions, function() {
|
||||
$.getScript(curConfig.extPath + this);
|
||||
var extname = this;
|
||||
$.getScript(curConfig.extPath + extname, function(d) {
|
||||
// Fails locally in Chrome 5
|
||||
if(!d) {
|
||||
var s = document.createElement('script');
|
||||
s.src = curConfig.extPath + extname;
|
||||
document.querySelector('head').appendChild(s);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -320,6 +333,7 @@
|
|||
'#tool_reorient':'reorient',
|
||||
'#tool_group':'group',
|
||||
'#tool_ungroup':'ungroup',
|
||||
'#tool_unlink_use':'unlink_use',
|
||||
|
||||
'#tool_alignleft, #tool_posleft':'align_left',
|
||||
'#tool_aligncenter, #tool_poscenter':'align_center',
|
||||
|
|
@ -377,18 +391,17 @@
|
|||
$(this).parent().prepend(this);
|
||||
});
|
||||
|
||||
// Use small icons by default if not all left tools are visible
|
||||
var tleft = $('#tools_left');
|
||||
if (tleft.length != 0) {
|
||||
var min_height = tleft.offset().top + tleft.outerHeight();
|
||||
}
|
||||
var size = $.pref('iconsize');
|
||||
if(size && size != 'm') {
|
||||
svgEditor.setIconSize(size);
|
||||
} else if($(window).height() < min_height) {
|
||||
// Make smaller
|
||||
svgEditor.setIconSize('s');
|
||||
}
|
||||
// var size = $.pref('iconsize');
|
||||
// if(size && size != 'm') {
|
||||
// svgEditor.setIconSize(size);
|
||||
// } else if($(window).height() < min_height) {
|
||||
// // Make smaller
|
||||
// svgEditor.setIconSize('s');
|
||||
// }
|
||||
|
||||
// Look for any missing flyout icons from plugins
|
||||
$('.tools_flyout').each(function() {
|
||||
|
|
@ -430,7 +443,8 @@
|
|||
default_img_url = curConfig.imgPath + "logo.png",
|
||||
workarea = $("#workarea"),
|
||||
show_save_warning = false,
|
||||
exportWindow = null;
|
||||
exportWindow = null,
|
||||
tool_scale = 1;
|
||||
|
||||
// This sets up alternative dialog boxes. They mostly work the same way as
|
||||
// their UI counterparts, expect instead of returning the result, a callback
|
||||
|
|
@ -521,7 +535,7 @@
|
|||
|
||||
// by default, we add the XML prolog back, systems integrating SVG-edit (wikis, CMSs)
|
||||
// can just provide their own custom save handler and might not want the XML prolog
|
||||
svg = "<?xml version='1.0'?>\n" + svg;
|
||||
svg = '<?xml version="1.0"?>\n' + svg;
|
||||
|
||||
// Opens the SVG in new window, with warning about Mozilla bug #308590 when applicable
|
||||
|
||||
|
|
@ -566,15 +580,21 @@
|
|||
var datauri = c.toDataURL('image/png');
|
||||
exportWindow.location.href = datauri;
|
||||
|
||||
var note = uiStrings.saveFromBrowser.replace('%s', 'PNG');
|
||||
|
||||
// Check if there's issues
|
||||
|
||||
if(issues.length) {
|
||||
var pre = "\n \u2022 ";
|
||||
note += ("\n\n" + uiStrings.noteTheseIssues + pre + issues.join(pre));
|
||||
}
|
||||
exportWindow.alert(note);
|
||||
var done = $.pref('export_notice_done');
|
||||
if(done !== "all") {
|
||||
var note = uiStrings.saveFromBrowser.replace('%s', 'PNG');
|
||||
|
||||
// Check if there's issues
|
||||
if(issues.length) {
|
||||
var pre = "\n \u2022 ";
|
||||
note += ("\n\n" + uiStrings.noteTheseIssues + pre + issues.join(pre));
|
||||
}
|
||||
|
||||
// Note that this will also prevent the notice even though new issues may appear later.
|
||||
// May want to find a way to deal with that without annoying the user
|
||||
$.pref('export_notice_done', 'all');
|
||||
exportWindow.alert(note);
|
||||
}
|
||||
};
|
||||
|
||||
// called when we've selected a different element
|
||||
|
|
@ -618,8 +638,8 @@
|
|||
}
|
||||
// Update selectedElement if element is no longer part of the image.
|
||||
// This occurs for the text elements in Firefox
|
||||
else if(elem && selectedElement && selectedElement.parentNode == null
|
||||
|| elem && elem.tagName == "path" && !multiselected) {
|
||||
else if(elem && selectedElement && selectedElement.parentNode == null) {
|
||||
// || elem && elem.tagName == "path" && !multiselected) { // This was added in r1430, but not sure why
|
||||
selectedElement = elem;
|
||||
}
|
||||
}
|
||||
|
|
@ -775,7 +795,7 @@
|
|||
var shower = $('#' + this.id + '_show');
|
||||
var pos = shower.offset();
|
||||
var w = shower.outerWidth();
|
||||
$(this).css({left: pos.left + w, top: pos.top});
|
||||
$(this).css({left: (pos.left + w)*tool_scale, top: pos.top});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -789,13 +809,31 @@
|
|||
shower[0].title = tooltips.join(' / ');
|
||||
});
|
||||
}
|
||||
|
||||
var resize_timer;
|
||||
|
||||
var extAdded = function(window, ext) {
|
||||
|
||||
var cb_called = false;
|
||||
var resize_done = false;
|
||||
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() {
|
||||
if(ext.callback && !cb_called) {
|
||||
if(ext.callback && !cb_called && cb_ready) {
|
||||
cb_called = true;
|
||||
ext.callback();
|
||||
}
|
||||
|
|
@ -1106,6 +1144,9 @@
|
|||
$.each(btn_selects, function() {
|
||||
addAltDropDown(this.elem, this.list, this.callback, {seticon: true});
|
||||
});
|
||||
|
||||
if (svgicons)
|
||||
cb_ready = false; // Delay callback
|
||||
|
||||
$.svgIcons(svgicons, {
|
||||
w:24, h:24,
|
||||
|
|
@ -1116,8 +1157,9 @@
|
|||
callback: function(icons) {
|
||||
// Non-ideal hack to make the icon match the current size
|
||||
if(curPrefs.iconsize && curPrefs.iconsize != 'm') {
|
||||
setIconSize(curPrefs.iconsize, true);
|
||||
prepResize();
|
||||
}
|
||||
cb_ready = true; // Ready for callback
|
||||
runCallback();
|
||||
}
|
||||
|
||||
|
|
@ -1153,7 +1195,8 @@
|
|||
// updates the toolbar (colors, opacity, etc) based on the selected element
|
||||
// This function also updates the opacity and id elements that are in the context panel
|
||||
var updateToolbar = function() {
|
||||
if (selectedElement != null && $.inArray(selectedElement.tagName, ['image', 'text', 'foreignObject', 'g', 'a']) === -1) {
|
||||
if (selectedElement != null && $.inArray(selectedElement.tagName, ['use', 'image', 'foreignObject', 'g', 'a']) === -1) {
|
||||
|
||||
// get opacity values
|
||||
var fillOpacity = parseFloat(selectedElement.getAttribute("fill-opacity"));
|
||||
if (isNaN(fillOpacity)) {
|
||||
|
|
@ -1207,8 +1250,8 @@
|
|||
strokeOpacity = "N/A";
|
||||
}
|
||||
|
||||
$('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1);
|
||||
$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none");
|
||||
$('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1).change();
|
||||
$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none").change();
|
||||
|
||||
var attr = selectedElement.getAttribute("stroke-linejoin") || 'miter';
|
||||
|
||||
|
|
@ -1260,6 +1303,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
var setInputWidth = function(elem) {
|
||||
var w = Math.min(Math.max(12 + elem.value.length * 6, 50), 300);
|
||||
$(elem).width(w);
|
||||
}
|
||||
|
||||
// updates the context panel tools based on the selected element
|
||||
var updateContextPanel = function() {
|
||||
var elem = selectedElement;
|
||||
|
|
@ -1276,7 +1324,7 @@
|
|||
}
|
||||
var is_node = currentMode == 'pathedit'; //elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false;
|
||||
$('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,\
|
||||
#ellipse_panel, #line_panel, #text_panel, #image_panel').hide();
|
||||
#ellipse_panel, #line_panel, #text_panel, #image_panel, #container_panel, #use_panel').hide();
|
||||
if (elem != null) {
|
||||
var elname = elem.nodeName;
|
||||
|
||||
|
|
@ -1365,14 +1413,15 @@
|
|||
circle: ['cx','cy','r'],
|
||||
ellipse: ['cx','cy','rx','ry'],
|
||||
line: ['x1','y1','x2','y2'],
|
||||
text: []
|
||||
text: [],
|
||||
'use': []
|
||||
};
|
||||
|
||||
var el_name = elem.tagName;
|
||||
|
||||
if($(elem).data('gsvg')) {
|
||||
el_name = 'svg';
|
||||
}
|
||||
// if($(elem).data('gsvg')) {
|
||||
// $('#g_panel').show();
|
||||
// }
|
||||
|
||||
if(panels[el_name]) {
|
||||
var cur_panel = panels[el_name];
|
||||
|
|
@ -1410,6 +1459,19 @@
|
|||
var href = elem.getAttributeNS(xlinkNS, "href");
|
||||
setImageURL(href);
|
||||
} // image
|
||||
else if(el_name == 'g' || el_name == 'use') {
|
||||
$('#container_panel').show();
|
||||
var title = svgCanvas.getTitle();
|
||||
var label = $('#g_title')[0];
|
||||
label.value = title;
|
||||
setInputWidth(label);
|
||||
var d = 'disabled';
|
||||
if(el_name == 'use') {
|
||||
label.setAttribute(d, d);
|
||||
} else {
|
||||
label.removeAttribute(d);
|
||||
}
|
||||
}
|
||||
}
|
||||
} // if (elem != null)
|
||||
else if (multiselected) {
|
||||
|
|
@ -1604,6 +1666,12 @@
|
|||
$('#image_url').change(function(){
|
||||
setImageURL(this.value);
|
||||
});
|
||||
|
||||
$('#g_title').change(function() {
|
||||
svgCanvas.setGroupTitle(this.value);
|
||||
setInputWidth(this);
|
||||
|
||||
});
|
||||
|
||||
$('.attr_changer').change(function() {
|
||||
var attr = this.getAttribute("data-attr");
|
||||
|
|
@ -1828,8 +1896,9 @@
|
|||
}
|
||||
});
|
||||
}());
|
||||
|
||||
var addDropDown = function(elem, callback, dropUp) {
|
||||
// Made public for UI customization.
|
||||
// TODO: Group UI functions into a public svgEditor.ui interface.
|
||||
Editor.addDropDown = function(elem, callback, dropUp) {
|
||||
var button = $(elem).find('button');
|
||||
var list = $(elem).find('ul');
|
||||
var on_button = false;
|
||||
|
|
@ -1925,12 +1994,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
addDropDown('#font_family_dropdown', function() {
|
||||
Editor.addDropDown('#font_family_dropdown', function() {
|
||||
var fam = $(this).text();
|
||||
$('#font_family').val($(this).text()).change();
|
||||
});
|
||||
|
||||
addDropDown('#opacity_dropdown', function() {
|
||||
Editor.addDropDown('#opacity_dropdown', function() {
|
||||
if($(this).find('div').length) return;
|
||||
var perc = parseInt($(this).text().split('%')[0]);
|
||||
changeOpacity(false, perc);
|
||||
|
|
@ -1950,7 +2019,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
addDropDown('#blur_dropdown', function() {
|
||||
Editor.addDropDown('#blur_dropdown', function() {
|
||||
});
|
||||
|
||||
var slideStart = false;
|
||||
|
|
@ -1973,7 +2042,7 @@
|
|||
});
|
||||
|
||||
|
||||
addDropDown('#zoom_dropdown', function() {
|
||||
Editor.addDropDown('#zoom_dropdown', function() {
|
||||
var item = $(this);
|
||||
var val = item.attr('data-val');
|
||||
if(val) {
|
||||
|
|
@ -2027,6 +2096,11 @@
|
|||
workarea.mousedown(unfocus);
|
||||
}).blur(function() {
|
||||
workarea.unbind('mousedown', unfocus);
|
||||
|
||||
// Go back to selecting text if in textedit mode
|
||||
if(svgCanvas.getMode() == 'textedit') {
|
||||
$('#text').focus();
|
||||
}
|
||||
});
|
||||
}());
|
||||
|
||||
|
|
@ -2134,7 +2208,7 @@
|
|||
svgCanvas.moveToBottomSelectedElement();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var convertToPath = function() {
|
||||
if (selectedElement != null) {
|
||||
svgCanvas.convertToPath();
|
||||
|
|
@ -2226,11 +2300,13 @@
|
|||
var clickBold = function(){
|
||||
svgCanvas.setBold( !svgCanvas.getBold() );
|
||||
updateContextPanel();
|
||||
return false;
|
||||
};
|
||||
|
||||
var clickItalic = function(){
|
||||
svgCanvas.setItalic( !svgCanvas.getItalic() );
|
||||
updateContextPanel();
|
||||
return false;
|
||||
};
|
||||
|
||||
var clickSave = function(){
|
||||
|
|
@ -2289,7 +2365,7 @@
|
|||
svgCanvas.groupSelectedElements();
|
||||
}
|
||||
// ungroup
|
||||
else if(selectedElement && selectedElement.tagName == 'g'){
|
||||
else if(selectedElement){
|
||||
svgCanvas.ungroupSelectedElement();
|
||||
}
|
||||
};
|
||||
|
|
@ -2487,161 +2563,260 @@
|
|||
}
|
||||
|
||||
var setIcon = Editor.setIcon = function(elem, icon_id, forcedSize) {
|
||||
var icon = (typeof icon_id == 'string') ? $.getSvgIcon(icon_id).clone() : icon_id.clone();
|
||||
$(elem).empty().append(icon);
|
||||
if(forcedSize) {
|
||||
var obj = {};
|
||||
obj[elem + ' .svg_icon'] = forcedSize;
|
||||
$.resizeSvgIcons(obj);
|
||||
} else {
|
||||
var size = curPrefs.iconsize;
|
||||
if(size && size !== 'm') {
|
||||
var icon_sizes = { s:16, m:24, l:32, xl:48}, obj = {};
|
||||
obj[elem + ' .svg_icon'] = icon_sizes[size];
|
||||
$.resizeSvgIcons(obj);
|
||||
}
|
||||
var icon = (typeof icon_id == 'string') ? $.getSvgIcon(icon_id) : icon_id;
|
||||
if(!icon) {
|
||||
console.log('NOTE: Icon image missing: ' + icon_id);
|
||||
return;
|
||||
}
|
||||
icon = icon.clone();
|
||||
$(elem).empty().append(icon);
|
||||
// if(forcedSize) {
|
||||
// var obj = {};
|
||||
// obj[elem + ' .svg_icon'] = forcedSize;
|
||||
// $.resizeSvgIcons(obj);
|
||||
// } else {
|
||||
// var size = curPrefs.iconsize;
|
||||
// if(size && size !== 'm') {
|
||||
// var icon_sizes = { s:16, m:24, l:32, xl:48}, obj = {};
|
||||
// obj[elem + ' .svg_icon'] = icon_sizes[size];
|
||||
// $.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) {
|
||||
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);
|
||||
$('#iconsize').val(size);
|
||||
var icon_sizes = { s:16, m:24, l:32, xl:48 };
|
||||
var size_num = icon_sizes[size];
|
||||
|
||||
|
||||
// Change icon size
|
||||
$('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open')
|
||||
.find('> svg, > img').each(function() {
|
||||
this.setAttribute('width',size_num);
|
||||
this.setAttribute('height',size_num);
|
||||
});
|
||||
|
||||
$.resizeSvgIcons({
|
||||
'.flyout_arrow_horiz > svg, .flyout_arrow_horiz > img': size_num / 5,
|
||||
'#logo > svg, #logo > img': size_num * 1.3,
|
||||
'#tools_bottom .icon_label > *': (size_num === 16 ? 18 : size_num * .75)
|
||||
});
|
||||
if(size != 's') {
|
||||
$.resizeSvgIcons({'#layerbuttons svg, #layerbuttons img': size_num * .6});
|
||||
}
|
||||
// $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open')
|
||||
// .find('> svg, > img').each(function() {
|
||||
// this.setAttribute('width',size_num);
|
||||
// this.setAttribute('height',size_num);
|
||||
// });
|
||||
//
|
||||
// $.resizeSvgIcons({
|
||||
// '.flyout_arrow_horiz > svg, .flyout_arrow_horiz > img': size_num / 5,
|
||||
// '#logo > svg, #logo > img': size_num * 1.3,
|
||||
// '#tools_bottom .icon_label > *': (size_num === 16 ? 18 : size_num * .75)
|
||||
// });
|
||||
// if(size != 's') {
|
||||
// $.resizeSvgIcons({'#layerbuttons svg, #layerbuttons img': size_num * .6});
|
||||
// }
|
||||
|
||||
// Note that all rules will be prefixed with '#svg_editor' when parsed
|
||||
var cssResizeRules = {
|
||||
".tool_button,\
|
||||
.push_button,\
|
||||
.tool_button_current,\
|
||||
.push_button_pressed,\
|
||||
.disabled,\
|
||||
.icon_label,\
|
||||
.tools_flyout .tool_button": {
|
||||
'width': {s: '16px', l: '32px', xl: '48px'},
|
||||
'height': {s: '16px', l: '32px', xl: '48px'},
|
||||
'padding': {s: '1px', l: '2px', xl: '3px'}
|
||||
},
|
||||
".tool_sep": {
|
||||
'height': {s: '16px', l: '32px', xl: '48px'},
|
||||
'margin': {s: '2px 2px', l: '2px 5px', xl: '2px 8px'}
|
||||
},
|
||||
"#main_icon": {
|
||||
'width': {s: '31px', l: '53px', xl: '75px'},
|
||||
'height': {s: '22px', l: '42px', xl: '64px'}
|
||||
},
|
||||
// ".tool_button,\
|
||||
// .push_button,\
|
||||
// .tool_button_current,\
|
||||
// .push_button_pressed,\
|
||||
// .disabled,\
|
||||
// .icon_label,\
|
||||
// .tools_flyout .tool_button": {
|
||||
// 'width': {s: '16px', l: '32px', xl: '48px'},
|
||||
// 'height': {s: '16px', l: '32px', xl: '48px'},
|
||||
// 'padding': {s: '1px', l: '2px', xl: '3px'}
|
||||
// },
|
||||
// ".tool_sep": {
|
||||
// 'height': {s: '16px', l: '32px', xl: '48px'},
|
||||
// 'margin': {s: '2px 2px', l: '2px 5px', xl: '2px 8px'}
|
||||
// },
|
||||
// "#main_icon": {
|
||||
// 'width': {s: '31px', l: '53px', xl: '75px'},
|
||||
// 'height': {s: '22px', l: '42px', xl: '64px'}
|
||||
// },
|
||||
"#tools_top": {
|
||||
'left': {s: '36px', l: '60px', xl: '80px'},
|
||||
'height': {s: '50px', l: '88px', xl: '125px'}
|
||||
'left': 50,
|
||||
'height': 72
|
||||
},
|
||||
"#tools_left": {
|
||||
'width': {s: '22px', l: '30px', xl: '38px'},
|
||||
'top': {s: '50px', l: '87px', xl: '125px'}
|
||||
'width': 31,
|
||||
'top': 74
|
||||
},
|
||||
"div#workarea": {
|
||||
'left': {s: '27px', l: '46px', xl: '65px'},
|
||||
'top': {s: '50px', l: '88px', xl: '125px'},
|
||||
'bottom': {s: '55px', l: '98px', xl: '145px'}
|
||||
'left': 38,
|
||||
'top': 74
|
||||
},
|
||||
"#tools_bottom": {
|
||||
'left': {s: '27px', l: '46px', xl: '65px'},
|
||||
'height': {s: '58px', l: '98px', xl: '145px'}
|
||||
},
|
||||
"#color_tools": {
|
||||
'border-spacing': {s: '0 1px'},
|
||||
'margin-top': {s: '-1px'}
|
||||
},
|
||||
"#color_tools .icon_label": {
|
||||
'width': {l:'43px', xl: '60px'}
|
||||
},
|
||||
".color_tool": {
|
||||
'height': {s: '20px'}
|
||||
},
|
||||
"#tool_opacity": {
|
||||
'top': {s: '1px'},
|
||||
'height': {s: 'auto', l:'auto', xl:'auto'}
|
||||
},
|
||||
"#tools_top input, #tools_bottom input": {
|
||||
'margin-top': {s: '2px', l: '4px', xl: '5px'},
|
||||
'height': {s: 'auto', l: 'auto', xl: 'auto'},
|
||||
'border': {s: '1px solid #555', l: 'auto', xl: 'auto'},
|
||||
'font-size': {s: '.9em', l: '1.2em', xl: '1.4em'}
|
||||
},
|
||||
"#zoom_panel": {
|
||||
'margin-top': {s: '3px', l: '4px', xl: '5px'}
|
||||
},
|
||||
"#copyright, #tools_bottom .label": {
|
||||
'font-size': {l: '1.5em', xl: '2em'},
|
||||
'line-height': {s: '15px'}
|
||||
},
|
||||
"#tools_bottom_2": {
|
||||
'width': {l: '295px', xl: '355px'},
|
||||
'top': {s: '4px'}
|
||||
},
|
||||
"#tools_top > div, #tools_top": {
|
||||
'line-height': {s: '17px', l: '34px', xl: '50px'}
|
||||
},
|
||||
".dropdown button": {
|
||||
'height': {s: '18px', l: '34px', xl: '40px'},
|
||||
'line-height': {s: '18px', l: '34px', xl: '40px'},
|
||||
'margin-top': {s: '3px'}
|
||||
},
|
||||
"#tools_top label, #tools_bottom label": {
|
||||
'font-size': {s: '1em', l: '1.5em', xl: '2em'},
|
||||
'height': {s: '25px', l: '42px', xl: '64px'}
|
||||
},
|
||||
"div.toolset": {
|
||||
'height': {s: '25px', l: '42px', xl: '64px'}
|
||||
},
|
||||
"#tool_bold, #tool_italic": {
|
||||
'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}
|
||||
},
|
||||
"#sidepanels": {
|
||||
'top': {s: '50px', l: '88px', xl: '125px'},
|
||||
'bottom': {s: '51px', l: '68px', xl: '65px'}
|
||||
},
|
||||
'#layerbuttons': {
|
||||
'width': {l: '130px', xl: '175px'},
|
||||
'height': {l: '24px', xl: '30px'}
|
||||
},
|
||||
'#layerlist': {
|
||||
'width': {l: '128px', xl: '150px'}
|
||||
},
|
||||
'.layer_button': {
|
||||
'width': {l: '19px', xl: '28px'},
|
||||
'height': {l: '19px', xl: '28px'}
|
||||
},
|
||||
"input.spin-button": {
|
||||
'background-image': {l: "url('images/spinbtn_updn_big.png')", xl: "url('images/spinbtn_updn_big.png')"},
|
||||
'background-position': {l: '100% -5px', xl: '100% -2px'},
|
||||
'padding-right': {l: '24px', xl: '24px' }
|
||||
},
|
||||
"input.spin-button.up": {
|
||||
'background-position': {l: '100% -45px', xl: '100% -42px'}
|
||||
},
|
||||
"input.spin-button.down": {
|
||||
'background-position': {l: '100% -85px', xl: '100% -82px'}
|
||||
},
|
||||
"#position_opts": {
|
||||
'width': {all: (size_num*4) +'px'}
|
||||
}
|
||||
// "#tools_bottom": {
|
||||
// 'left': {s: '27px', l: '46px', xl: '65px'},
|
||||
// 'height': {s: '58px', l: '98px', xl: '145px'}
|
||||
// },
|
||||
// "#color_tools": {
|
||||
// 'border-spacing': {s: '0 1px'},
|
||||
// 'margin-top': {s: '-1px'}
|
||||
// },
|
||||
// "#color_tools .icon_label": {
|
||||
// 'width': {l:'43px', xl: '60px'}
|
||||
// },
|
||||
// ".color_tool": {
|
||||
// 'height': {s: '20px'}
|
||||
// },
|
||||
// "#tool_opacity": {
|
||||
// 'top': {s: '1px'},
|
||||
// 'height': {s: 'auto', l:'auto', xl:'auto'}
|
||||
// },
|
||||
// "#tools_top input, #tools_bottom input": {
|
||||
// 'margin-top': {s: '2px', l: '4px', xl: '5px'},
|
||||
// 'height': {s: 'auto', l: 'auto', xl: 'auto'},
|
||||
// 'border': {s: '1px solid #555', l: 'auto', xl: 'auto'},
|
||||
// 'font-size': {s: '.9em', l: '1.2em', xl: '1.4em'}
|
||||
// },
|
||||
// "#zoom_panel": {
|
||||
// 'margin-top': {s: '3px', l: '4px', xl: '5px'}
|
||||
// },
|
||||
// "#copyright, #tools_bottom .label": {
|
||||
// 'font-size': {l: '1.5em', xl: '2em'},
|
||||
// 'line-height': {s: '15px'}
|
||||
// },
|
||||
// "#tools_bottom_2": {
|
||||
// 'width': {l: '295px', xl: '355px'},
|
||||
// 'top': {s: '4px'}
|
||||
// },
|
||||
// "#tools_top > div, #tools_top": {
|
||||
// 'line-height': {s: '17px', l: '34px', xl: '50px'}
|
||||
// },
|
||||
// ".dropdown button": {
|
||||
// 'height': {s: '18px', l: '34px', xl: '40px'},
|
||||
// 'line-height': {s: '18px', l: '34px', xl: '40px'},
|
||||
// 'margin-top': {s: '3px'}
|
||||
// },
|
||||
// "#tools_top label, #tools_bottom label": {
|
||||
// 'font-size': {s: '1em', l: '1.5em', xl: '2em'},
|
||||
// 'height': {s: '25px', l: '42px', xl: '64px'}
|
||||
// },
|
||||
// "div.toolset": {
|
||||
// 'height': {s: '25px', l: '42px', xl: '64px'}
|
||||
// },
|
||||
// "#tool_bold, #tool_italic": {
|
||||
// 'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}
|
||||
// },
|
||||
// "#sidepanels": {
|
||||
// 'top': {s: '50px', l: '88px', xl: '125px'},
|
||||
// 'bottom': {s: '51px', l: '68px', xl: '65px'}
|
||||
// },
|
||||
// '#layerbuttons': {
|
||||
// 'width': {l: '130px', xl: '175px'},
|
||||
// 'height': {l: '24px', xl: '30px'}
|
||||
// },
|
||||
// '#layerlist': {
|
||||
// 'width': {l: '128px', xl: '150px'}
|
||||
// },
|
||||
// '.layer_button': {
|
||||
// 'width': {l: '19px', xl: '28px'},
|
||||
// 'height': {l: '19px', xl: '28px'}
|
||||
// },
|
||||
// "input.spin-button": {
|
||||
// 'background-image': {l: "url('images/spinbtn_updn_big.png')", xl: "url('images/spinbtn_updn_big.png')"},
|
||||
// 'background-position': {l: '100% -5px', xl: '100% -2px'},
|
||||
// 'padding-right': {l: '24px', xl: '24px' }
|
||||
// },
|
||||
// "input.spin-button.up": {
|
||||
// 'background-position': {l: '100% -45px', xl: '100% -42px'}
|
||||
// },
|
||||
// "input.spin-button.down": {
|
||||
// 'background-position': {l: '100% -85px', xl: '100% -82px'}
|
||||
// },
|
||||
// "#position_opts": {
|
||||
// 'width': {all: (size_num*4) +'px'}
|
||||
// }
|
||||
};
|
||||
|
||||
var rule_elem = $('#tool_size_rules');
|
||||
|
|
@ -2657,12 +2832,21 @@
|
|||
selector = '#svg_editor ' + selector.replace(/,/g,', #svg_editor');
|
||||
style_str += selector + '{';
|
||||
$.each(rules, function(prop, values) {
|
||||
if(values[size] || values.all) {
|
||||
style_str += (prop + ':' + (values[size] || values.all) + ';');
|
||||
if(typeof values === 'number') {
|
||||
var val = (values * scale) + 'px';
|
||||
} else if(values[size] || values.all) {
|
||||
var val = (values[size] || values.all);
|
||||
}
|
||||
style_str += (prop + ':' + val + ';');
|
||||
});
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -2778,12 +2962,12 @@
|
|||
var pos = elem.position();
|
||||
$("#color_picker")
|
||||
.draggable({cancel:'.jPicker_table,.jGraduate_lgPick,.jGraduate_rgPick'})
|
||||
.css({'left': pos.left, 'bottom': 50 - pos.top})
|
||||
.css(curConfig.colorPickerCSS || {'left': pos.left, 'bottom': 50 - pos.top})
|
||||
.jGraduate(
|
||||
{
|
||||
paint: paint,
|
||||
window: { pickerTitle: title },
|
||||
images: { clientPath: "jgraduate/images/" }
|
||||
images: { clientPath: curConfig.jGraduatePath }
|
||||
},
|
||||
function(p) {
|
||||
paint = new $.jGraduate.Paint(p);
|
||||
|
|
@ -3341,6 +3525,7 @@
|
|||
{sel:'#tool_clone,#tool_clone_multi', fn: clickClone, evt: 'click', key: [modKey+'C', true]},
|
||||
{sel:'#tool_group', fn: clickGroup, evt: 'click', key: [modKey+'G', true]},
|
||||
{sel:'#tool_ungroup', fn: clickGroup, evt: 'click'},
|
||||
{sel:'#tool_unlink_use', fn: clickGroup, evt: 'click'},
|
||||
{sel:'[id^=tool_align]', fn: clickAlign, evt: 'click'},
|
||||
// these two lines are required to make Opera work properly with the flyout mechanism
|
||||
// {sel:'#tools_rect_show', fn: clickRect, evt: 'click'},
|
||||
|
|
@ -3650,7 +3835,7 @@
|
|||
updateCanvas(true);
|
||||
// });
|
||||
|
||||
// var revnums = "svg-editor.js ($Rev: 1638 $) ";
|
||||
// var revnums = "svg-editor.js ($Rev: 1659 $) ";
|
||||
// revnums += svgCanvas.getVersion();
|
||||
// $('#copyright')[0].setAttribute("title", revnums);
|
||||
|
||||
|
|
@ -3823,7 +4008,6 @@
|
|||
|
||||
})();
|
||||
|
||||
|
||||
// ?iconsize=s&bkgd_color=555
|
||||
|
||||
// svgEditor.setConfig({
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue