',{id:'flyout_arrow_horiz'})
var tls_id = ref_btn[0].id.replace('tool_','tools_')
var show_btn = ref_btn.clone()
.attr('id',tls_id + '_show')
.append($('
',{'class':'flyout_arrow_horiz'}));
ref_btn.before(show_btn);
// Create a flyout div
flyout_holder = makeFlyoutHolder(tls_id, ref_btn);
}
var ref_data = Actions.getButtonData(opts.button);
if(opts.isDefault) {
placement_obj['#' + tls_id + '_show'] = btn.id;
}
// TODO: Find way to set the current icon using the iconloader if this is not default
// Include data for extension button as well as ref button
var cur_h = holders['#'+flyout_holder[0].id] = [{
sel: '#'+id,
fn: btn.events.click,
icon: btn.id,
isDefault: btn.includeWith?btn.includeWith.isDefault:0
}, ref_data];
// {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'}
var pos = ("position" in opts)?opts.position:'last';
var len = flyout_holder.children().length;
// Add at given position or end
if(!isNaN(pos) && pos >= 0 && pos < len) {
flyout_holder.children().eq(pos).before(button);
} else {
flyout_holder.append(button);
cur_h.reverse();
}
}
if(!svgicons) {
button.append(icon);
}
// Add given events to button
$.each(btn.events, function(name, func) {
if(name == "click") {
if(btn.type == 'mode') {
button.bind(name, func);
if(btn.key) {
$(document).bind('keydown', {combi: btn.key}, func);
if(btn.title) button.attr("title", btn.title + ' ['+btn.key+']');
}
}
} else {
button.bind(name, func);
}
});
setupFlyouts(holders);
});
$.svgIcons(svgicons, {
w:24, h:24,
id_match: false,
no_img: true,
fallback: fallback_obj,
placement: placement_obj,
callback: function(icons) {
// Bad hack to make the icon match the current size
// TODO: Write better hack!
var old = curPrefs.iconsize;
if(curPrefs.iconsize != 'm') {
setIconSize('m');
setIconSize(old);
}
}
});
}
};
var getPaint = function(color, opac) {
// update the editor's fill paint
var opts = null;
if (color.substr(0,5) == "url(#") {
opts = {
alpha: opac,
linearGradient: document.getElementById(color.substr(5,color.length-6))
};
}
else if (color.substr(0,1) == "#") {
opts = {
alpha: opac,
solidColor: color.substr(1)
};
}
else {
opts = {
alpha: opac,
solidColor: 'none'
};
}
return new $.jGraduate.Paint(opts);
};
// updates the toolbar (colors, opacity, etc) based on the selected element
var updateToolbar = function() {
if (selectedElement != null &&
selectedElement.tagName != "image" &&
selectedElement.tagName != "g")
{
// get opacity values
var fillOpacity = parseFloat(selectedElement.getAttribute("fill-opacity"));
if (isNaN(fillOpacity)) {
fillOpacity = 1.0;
}
var strokeOpacity = parseFloat(selectedElement.getAttribute("stroke-opacity"));
if (isNaN(strokeOpacity)) {
strokeOpacity = 1.0;
}
// update fill color and opacity
var fillColor = selectedElement.getAttribute("fill")||"black";
// prevent undo on these canvas changes
svgCanvas.setFillColor(fillColor, true);
svgCanvas.setFillOpacity(fillOpacity, true);
// update stroke color and opacity
var strokeColor = selectedElement.getAttribute("stroke")||"none";
// prevent undo on these canvas changes
svgCanvas.setStrokeColor(strokeColor, true);
svgCanvas.setStrokeOpacity(strokeOpacity, true);
fillOpacity *= 100;
strokeOpacity *= 100;
fillPaint = getPaint(fillColor, fillOpacity);
strokePaint = getPaint(strokeColor, strokeOpacity);
fillOpacity = fillOpacity + " %";
strokeOpacity = strokeOpacity + " %";
// update fill color
if (fillColor == "none") {
fillOpacity = "N/A";
}
document.getElementById("gradbox_fill").parentNode.firstChild.setAttribute("fill", fillColor);
if (strokeColor == null || strokeColor == "" || strokeColor == "none") {
strokeColor = "none";
strokeOpacity = "N/A";
}
// update the rect inside #fill_color
document.getElementById("gradbox_stroke").parentNode.firstChild.setAttribute("fill", strokeColor);
$('#fill_opacity').html(fillOpacity);
$('#stroke_opacity').html(strokeOpacity);
$('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1);
$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none");
}
// All elements including image and group have opacity
if(selectedElement != null) {
var opac_perc = ((selectedElement.getAttribute("opacity")||1.0)*100);
$('#group_opacity').val(opac_perc);
$('#opac_slider').slider('option', 'value', opac_perc);
}
updateToolButtonState();
};
// updates the context panel tools based on the selected element
var updateContextPanel = function() {
var elem = selectedElement;
// If element has just been deleted, consider it null
if(elem != null && !elem.parentNode) elem = null;
var currentLayer = svgCanvas.getCurrentLayer();
var currentMode = svgCanvas.getMode();
// No need to update anything else in rotate mode
if (currentMode == 'rotate' && elem != null) {
var ang = svgCanvas.getRotationAngle(elem);
$('#angle').val(ang);
$('#tool_reorient').toggleClass('tool_button_disabled', ang == 0);
return;
}
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();
if (elem != null) {
var elname = elem.nodeName;
var angle = svgCanvas.getRotationAngle(elem);
$('#angle').val(angle);
if(svgCanvas.addedNew) {
if(elname == 'image') {
promptImgURL();
} else if(elname == 'text') {
// TODO: Do something here for new text
}
}
if(!is_node && currentMode != 'pathedit') {
$('#selected_panel').show();
// Elements in this array already have coord fields
if($.inArray(elname, ['line', 'circle', 'ellipse']) != -1) {
$('#xy_panel').hide();
} else {
var x,y;
// Get BBox vals for g, polyline and path
if($.inArray(elname, ['g', 'polyline', 'path']) != -1) {
var bb = svgCanvas.getStrokedBBox([elem]);
if(bb) {
x = bb.x;
y = bb.y;
}
} else {
x = elem.getAttribute('x');
y = elem.getAttribute('y');
}
$('#selected_x').val(x || 0);
$('#selected_y').val(y || 0);
$('#xy_panel').show();
}
// Elements in this array cannot be converted to a path
var no_path = $.inArray(elname, ['image', 'text', 'path', 'g', 'use']) == -1;
$('#tool_topath').toggle(no_path);
$('#tool_reorient').toggle(elname == 'path');
$('#tool_reorient').toggleClass('tool_button_disabled', angle == 0);
} else {
var point = path.getNodePoint();
$('#tool_node_delete').toggleClass('tool_button_disabled', !path.canDeleteNodes);
if(point) {
var seg_type = $('#seg_type');
$('#path_node_x').val(point.x);
$('#path_node_y').val(point.y);
if(point.type) {
seg_type.val(point.type).removeAttr('disabled');
} else {
seg_type.val(4).attr('disabled','disabled');
}
}
return;
}
// update contextual tools here
var panels = {
g: [],
rect: ['rx','width','height'],
image: ['width','height'],
circle: ['cx','cy','r'],
ellipse: ['cx','cy','rx','ry'],
line: ['x1','y1','x2','y2'],
text: []
};
var el_name = elem.tagName;
if(panels[el_name]) {
var cur_panel = panels[el_name];
$('#' + el_name + '_panel').show();
$.each(cur_panel, function(i, item) {
$('#' + el_name + '_' + item).val(elem.getAttribute(item) || 0);
});
if(el_name == 'text') {
$('#text_panel').css("display", "inline");
if (svgCanvas.getItalic()) {
$('#tool_italic').addClass('tool_button_current');
}
else {
$('#tool_italic').removeClass('tool_button_current');
}
if (svgCanvas.getBold()) {
$('#tool_bold').addClass('tool_button_current');
}
else {
$('#tool_bold').removeClass('tool_button_current');
}
$('#font_family').val(elem.getAttribute("font-family"));
$('#font_size').val(elem.getAttribute("font-size"));
$('#text').val(elem.textContent);
if (svgCanvas.addedNew) {
$('#text').focus().select();
}
} // text
else if(el_name == 'image') {
var xlinkNS="http://www.w3.org/1999/xlink";
var href = elem.getAttributeNS(xlinkNS, "href");
setImageURL(href);
} // image
}
} // if (elem != null)
else if (multiselected) {
$('#multiselected_panel').show();
}
// update history buttons
if (svgCanvas.getUndoStackSize() > 0) {
$('#tool_undo').removeClass( 'tool_button_disabled');
}
else {
$('#tool_undo').addClass( 'tool_button_disabled');
}
if (svgCanvas.getRedoStackSize() > 0) {
$('#tool_redo').removeClass( 'tool_button_disabled');
}
else {
$('#tool_redo').addClass( 'tool_button_disabled');
}
svgCanvas.addedNew = false;
if ( (elem && !is_node) || multiselected) {
// update the selected elements' layer
$('#selLayerNames').removeAttr('disabled').val(currentLayer);
}
else {
$('#selLayerNames').attr('disabled', 'disabled');
}
};
$('#text').focus( function(){ textBeingEntered = true; } );
$('#text').blur( function(){ textBeingEntered = false; } );
// bind the selected event to our function that handles updates to the UI
svgCanvas.bind("selected", selectedChanged);
svgCanvas.bind("changed", elementChanged);
svgCanvas.bind("saved", saveHandler);
svgCanvas.bind("zoomed", zoomChanged);
svgCanvas.bind("extension_added", extAdded);
var str = ''
$.each(palette, function(i,item){
str += '';
});
$('#palette').append(str);
// Set up editor background functionality
// TODO add checkerboard as "pattern"
var color_blocks = ['#FFF','#888','#000']; // ,'url(data:image/gif;base64,R0lGODlhEAAQAIAAAP%2F%2F%2F9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG%2Bgq4jM3IFLJgpswNly%2FXkcBpIiVaInlLJr9FZWAQA7)'];
var str = '';
$.each(color_blocks, function() {
str += '';
});
$('#bg_blocks').append(str);
var blocks = $('#bg_blocks div');
var cur_bg = 'cur_background';
blocks.each(function() {
var blk = $(this);
blk.click(function() {
blocks.removeClass(cur_bg);
$(this).addClass(cur_bg);
});
});
if($.pref('bkgd_color')) {
setBackground($.pref('bkgd_color'), $.pref('bkgd_url'));
}
if($.pref('img_save')) {
curPrefs.img_save = $.pref('img_save');
$('#image_save_opts input').val([curPrefs.img_save]);
}
var changeRectRadius = function(ctl) {
svgCanvas.setRectRadius(ctl.value);
}
var changeFontSize = function(ctl) {
svgCanvas.setFontSize(ctl.value);
}
var changeStrokeWidth = function(ctl) {
var val = ctl.value;
if(val == 0 && selectedElement && $.inArray(selectedElement.nodeName, ['line', 'polyline']) != -1) {
val = ctl.value = 1;
}
svgCanvas.setStrokeWidth(val);
}
var changeRotationAngle = function(ctl) {
svgCanvas.setRotationAngle(ctl.value);
$('#tool_reorient').toggleClass('tool_button_disabled', ctl.value == 0);
}
var changeZoom = function(ctl) {
var zoomlevel = ctl.value / 100;
var zoom = svgCanvas.getZoom();
var w_area = workarea;
zoomChanged(window, {
width: 0,
height: 0,
// center pt of scroll position
x: (w_area[0].scrollLeft + w_area.width()/2)/zoom,
y: (w_area[0].scrollTop + w_area.height()/2)/zoom,
zoom: zoomlevel
}, true);
}
var changeOpacity = function(ctl, val) {
if(val == null) val = ctl.value;
$('#group_opacity').val(val);
if(!ctl || !ctl.handle) {
$('#opac_slider').slider('option', 'value', val);
}
svgCanvas.setOpacity(val/100);
}
var operaRepaint = function() {
// Repaints canvas in Opera. Needed for stroke-dasharray change as well as fill change
if(!window.opera) return;
$('').hide().appendTo('body').remove();
}
$('#stroke_style').change(function(){
svgCanvas.setStrokeStyle(this.options[this.selectedIndex].value);
operaRepaint();
});
// Lose focus for select elements when changed (Allows keyboard shortcuts to work better)
$('select').change(function(){$(this).blur();});
// fired when user wants to move elements to another layer
var promptMoveLayerOnce = false;
$('#selLayerNames').change(function(){
var destLayer = this.options[this.selectedIndex].value;
var confirm_str = uiStrings.QmoveElemsToLayer.replace('%s',destLayer);
var moveToLayer = function(ok) {
if(!ok) return;
promptMoveLayerOnce = true;
svgCanvas.moveSelectedToLayer(destLayer);
svgCanvas.clearSelection();
populateLayers();
}
if (destLayer) {
if(promptMoveLayerOnce) {
moveToLayer(true);
} else {
$.confirm(confirm_str, moveToLayer);
}
}
});
$('#font_family').change(function() {
svgCanvas.setFontFamily(this.value);
});
$('#seg_type').change(function() {
svgCanvas.setSegType($(this).val());
});
$('#text').keyup(function(){
svgCanvas.setTextContent(this.value);
});
$('#image_url').change(function(){
setImageURL(this.value);
});
$('.attr_changer').change(function() {
var attr = this.getAttribute("data-attr");
var val = this.value;
var valid = false;
if($.inArray(attr, length_attrs) != -1) {
if(!isNaN(val)) {
valid = true;
} else {
//TODO: Allow the values in length_types, then uncomment this:
// val = val.toLowerCase();
// $.each(length_types, function(i, unit) {
// if(valid) return;
// var re = new RegExp('^-?[\\d\\.]+' + unit + '$');
// if(re.test(val)) valid = true;
// });
}
} else valid = true;
if(!valid) {
$.alert(uiStrings.invalidAttrValGiven);
this.value = selectedElement.getAttribute(attr);
return false;
}
svgCanvas.changeSelectedAttribute(attr, val);
});
// Prevent selection of elements when shift-clicking
$('#palette').mouseover(function() {
var inp = $('');
$(this).append(inp);
inp.focus().remove();
});
$('.palette_item').click(function(evt){
var picker = (evt.shiftKey ? "stroke" : "fill");
var id = (evt.shiftKey ? '#stroke_' : '#fill_');
var color = $(this).attr('data-rgb');
var rectbox = document.getElementById("gradbox_"+picker).parentNode.firstChild;
var paint = null;
// Webkit-based browsers returned 'initial' here for no stroke
if (color == 'transparent' || color == 'initial') {
color = 'none';
$(id + "opacity").html("N/A");
paint = new $.jGraduate.Paint();
}
else {
paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
}
rectbox.setAttribute("fill", color);
if (evt.shiftKey) {
strokePaint = paint;
if (svgCanvas.getStrokeColor() != color) {
svgCanvas.setStrokeColor(color);
}
if (color != 'none' && svgCanvas.getStrokeOpacity() != 1) {
svgCanvas.setStrokeOpacity(1.0);
$("#stroke_opacity").html("100 %");
}
} else {
fillPaint = paint;
if (svgCanvas.getFillColor() != color) {
svgCanvas.setFillColor(color);
}
if (color != 'none' && svgCanvas.getFillOpacity() != 1) {
svgCanvas.setFillOpacity(1.0);
$("#fill_opacity").html("100 %");
}
}
updateToolButtonState();
});
// This is a common function used when a tool has been clicked (chosen)
// It does several common things:
// - removes the tool_button_current class from whatever tool currently has it
// - hides any flyouts
// - adds the tool_button_current class to the button passed in
var toolButtonClick = function(button, fadeFlyouts) {
if ($(button).hasClass('tool_button_disabled')) return false;
if($(button).parent().hasClass('tools_flyout')) return true;
var fadeFlyouts = fadeFlyouts || 'normal';
$('.tools_flyout').fadeOut(fadeFlyouts);
$('#styleoverrides').text('');
$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
$(button).addClass('tool_button_current');
// when a tool is selected, we should deselect any currently selected elements
svgCanvas.clearSelection();
return true;
};
(function() {
var button = $('#main_icon');
var overlay = $('#main_icon span');
var list = $('#main_menu');
var on_button = false;
var height = 0;
var js_hover = true;
var set_click = false;
var hideMenu = function() {
list.fadeOut(200);
};
$(window).mouseup(function(evt) {
if(!on_button) {
button.removeClass('down');
// do not hide if it was the file input as that input needs to be visible
// for its change event to fire
if (evt.target.localName != "input") {
list.fadeOut(200);
} else if(!set_click) {
set_click = true;
$(evt.target).click(function() {
list.css('margin-left','-9999px').show();
});
}
}
on_button = false;
}).mousedown(function() {
$('.tools_flyout:visible').fadeOut();
});
overlay.bind('mousedown',function() {
if (!button.hasClass('down')) {
button.addClass('down');
// Margin must be reset in case it was changed before;
list.css('margin-left',0).show();
if(!height) {
height = list.height();
}
// Using custom animation as slideDown has annoying "bounce effect"
list.css('height',0).animate({
'height': height
},200);
on_button = true;
return false;
} else {
button.removeClass('down');
list.fadeOut(200);
}
}).hover(function() {
on_button = true;
}).mouseout(function() {
on_button = false;
});
var list_items = $('#main_menu li');
// Check if JS method of hovering needs to be used (Webkit bug)
list_items.mouseover(function() {
js_hover = ($(this).css('background-color') == 'rgba(0, 0, 0, 0)');
list_items.unbind('mouseover');
if(js_hover) {
list_items.mouseover(function() {
this.style.backgroundColor = '#FFC';
}).mouseout(function() {
this.style.backgroundColor = 'transparent';
return true;
});
}
});
}());
var addDropDown = function(elem, callback, dropUp) {
var button = $(elem).find('button');
var list = $(elem).find('ul');
var on_button = false;
if(dropUp) {
$(elem).addClass('dropup');
}
$(elem).find('li').bind('mouseup', callback);
$(window).mouseup(function(evt) {
if(!on_button) {
button.removeClass('down');
list.hide();
}
on_button = false;
});
button.bind('mousedown',function() {
if (!button.hasClass('down')) {
button.addClass('down');
list.show();
on_button = true;
} else {
button.removeClass('down');
list.hide();
}
}).hover(function() {
on_button = true;
}).mouseout(function() {
on_button = false;
});
}
addDropDown('#font_family_dropdown', function() {
var fam = $(this).text();
$('#font_family').val($(this).text()).change();
});
addDropDown('#opacity_dropdown', function() {
if($(this).find('div').length) return;
var perc = parseInt($(this).text().split('%')[0]);
changeOpacity(false, perc);
});
// For slider usage, see: http://jqueryui.com/demos/slider/
$("#opac_slider").slider({
start: function() {
$('#opacity_dropdown li:not(.special)').hide();
},
stop: function() {
$('#opacity_dropdown li').show();
$(window).mouseup();
},
slide: function(evt, ui){
changeOpacity(ui);
}
});
addDropDown('#zoom_dropdown', function() {
var item = $(this);
var val = item.attr('data-val');
if(val) {
zoomChanged(window, val);
} else {
changeZoom({value:parseInt(item.text())});
}
}, true);
/*
When a flyout icon is selected
(if flyout) {
- Change the icon
- Make pressing the button run its stuff
}
- Run its stuff
When its shortcut key is pressed
- If not current in list, do as above
, else:
- Just run its stuff
*/
// var setIcon = function(holder_sel, id) {
// var icon = $.getSvgIcon(id).clone();
// var holder = $(holder_sel);
// icon[0].setAttribute('width',holder.width());
// icon[0].setAttribute('height',holder.height());
// holder.empty().append(icon)
// .attr('data-curopt', holder_sel.replace('_show','')); // This sets the current mode
// }
var clickSelect = function() {
if (toolButtonClick('#tool_select')) {
svgCanvas.setMode('select');
$('#styleoverrides').text('#svgcanvas svg *{cursor:move;pointer-events:all}, #svgcanvas svg{cursor:default}');
}
};
var clickFHPath = function() {
if (toolButtonClick('#tool_fhpath')) {
svgCanvas.setMode('fhpath');
}
};
var clickLine = function() {
if (toolButtonClick('#tool_line')) {
svgCanvas.setMode('line');
}
};
var clickSquare = function(){
svgCanvas.setMode('square');
};
var clickRect = function(){
svgCanvas.setMode('rect');
};
var clickFHRect = function(){
svgCanvas.setMode('fhrect');
};
var clickCircle = function(){
svgCanvas.setMode('circle');
};
var clickEllipse = function(){
svgCanvas.setMode('ellipse');
};
var clickFHEllipse = function(){
svgCanvas.setMode('fhellipse');
};
var clickImage = function(){
if (toolButtonClick('#tool_image')) {
svgCanvas.setMode('image');
}
};
var clickZoom = function(){
if (toolButtonClick('#tool_zoom')) {
workarea.css('cursor','crosshair');
svgCanvas.setMode('zoom');
}
};
var dblclickZoom = function(){
if (toolButtonClick('#tool_zoom')) {
zoomImage();
setSelectMode();
}
};
var clickText = function(){
toolButtonClick('#tool_text');
svgCanvas.setMode('text');
};
var clickPath = function(){
toolButtonClick('#tool_path');
svgCanvas.setMode('path');
};
// Delete is a contextual tool that only appears in the ribbon if
// an element has been selected
var deleteSelected = function() {
if (selectedElement != null || multiselected) {
svgCanvas.deleteSelectedElements();
}
};
var moveToTopSelected = function() {
if (selectedElement != null) {
svgCanvas.moveToTopSelectedElement();
}
};
var moveToBottomSelected = function() {
if (selectedElement != null) {
svgCanvas.moveToBottomSelectedElement();
}
};
var convertToPath = function() {
if (selectedElement != null) {
svgCanvas.convertToPath();
}
}
var reorientPath = function() {
if (selectedElement != null) {
path.reorient();
}
}
var moveSelected = function(dx,dy) {
if (selectedElement != null || multiselected) {
svgCanvas.moveSelectedElements(dx,dy);
}
};
var linkControlPoints = function() {
$('#tool_node_link').toggleClass('push_button_pressed');
var linked = $('#tool_node_link').hasClass('push_button_pressed');
path.linkControlPoints(linked);
}
var clonePathNode = function() {
if (path.getNodePoint()) {
path.clonePathNode();
}
};
var deletePathNode = function() {
if (path.getNodePoint()) {
path.deletePathNode();
}
};
var selectNext = function() {
svgCanvas.cycleElement(1);
}
var selectPrev = function() {
svgCanvas.cycleElement(0);
}
var rotateSelected = function(cw) {
if (selectedElement == null || multiselected) return;
var step = 5;
if(!cw) step *= -1;
var new_angle = $('#angle').val()*1 + step;
svgCanvas.setRotationAngle(new_angle);
updateContextPanel();
}
var clickClear = function(){
$.confirm(uiStrings.QwantToClear, function(ok) {
if(!ok) return;
setSelectMode();
svgCanvas.clear();
svgCanvas.setResolution(640, 480);
updateCanvas(true);
zoomImage();
populateLayers();
updateContextPanel();
});
};
var clickBold = function(){
svgCanvas.setBold( !svgCanvas.getBold() );
updateContextPanel();
};
var clickItalic = function(){
svgCanvas.setItalic( !svgCanvas.getItalic() );
updateContextPanel();
};
var clickSave = function(){
// In the future, more options can be provided here
var saveOpts = {
'images': curPrefs.img_save,
'round_digits': 6
}
svgCanvas.save(saveOpts);
};
// by default, svgCanvas.open() is a no-op.
// it is up to an extension mechanism (opera widget, etc)
// to call setCustomHandlers() which will make it do something
var clickOpen = function(){
svgCanvas.open();
};
var clickUndo = function(){
if (svgCanvas.getUndoStackSize() > 0) {
svgCanvas.undo();
populateLayers();
}
};
var clickRedo = function(){
if (svgCanvas.getRedoStackSize() > 0) {
svgCanvas.redo();
populateLayers();
}
};
var clickGroup = function(){
// group
if (multiselected) {
svgCanvas.groupSelectedElements();
}
// ungroup
else if(selectedElement && selectedElement.tagName == 'g'){
svgCanvas.ungroupSelectedElement();
}
};
var clickClone = function(){
svgCanvas.cloneSelectedElements();
};
var clickAlign = function() {
var letter = this.id.replace('tool_align','').charAt(0);
svgCanvas.alignSelectedElements(letter, $('#align_relative_to').val());
};
var zoomImage = function(multiplier) {
var res = svgCanvas.getResolution();
multiplier = multiplier?res.zoom * multiplier:1;
// setResolution(res.w * multiplier, res.h * multiplier, true);
$('#zoom').val(multiplier * 100);
svgCanvas.setZoom(multiplier);
zoomDone();
updateCanvas(true);
};
var zoomDone = function() {
// updateBgImage();
updateWireFrame();
//updateCanvas(); // necessary?
}
var clickWireframe = function() {
$('#tool_wireframe').toggleClass('push_button_pressed');
workarea.toggleClass('wireframe');
if(supportsNonSS) return;
var wf_rules = $('#wireframe_rules');
if(!wf_rules.length) {
wf_rules = $('