/* * svg-editor.js * * Licensed under the Apache License, Version 2 * * Copyright(c) 2010 Alexis Deveria * Copyright(c) 2010 Pavol Rusnak * Copyright(c) 2010 Jeff Schiller * Copyright(c) 2010 Narendra Sisodya * */ function svg_edit_setup() { var uiStrings = { 'invalidAttrValGiven':'Invalid value given', 'noContentToFitTo':'No content to fit to', 'layer':"Layer", 'dupeLayerName':"There is already a layer named that!", 'enterUniqueLayerName':"Please enter a unique layer name", 'enterNewLayerName':"Please enter the new layer name", 'layerHasThatName':"Layer already has that name", 'QmoveElemsToLayer':"Move selected elements to layer '%s'?", 'QwantToClear':'Do you want to clear the drawing?\nThis will also erase your undo history!', 'QerrorsRevertToSource':'There were parsing errors in your SVG source.\nRevert back to original SVG source?', 'QignoreSourceChanges':'Ignore changes made to SVG source?', 'featNotSupported':'Feature not supported', 'enterNewImgURL':'Enter the new image URL', 'ok':'OK', 'cancel':'Cancel', 'key_up':'Up', 'key_down':'Down', 'key_backspace':'Backspace', 'key_del':'Del' }, palette = ["#000000","#202020","#404040","#606060","#808080","#a0a0a0","#c0c0c0","#e0e0e0","#ffffff","#800000","#ff0000","#808000","#ffff00","#008000","#00ff00","#008080","#00ffff","#000080","#0000ff","#800080","#ff00ff","#2b0000","#550000","#800000","#aa0000","#d40000","#ff0000","#ff2a2a","#ff5555","#ff8080","#ffaaaa","#ffd5d5","#280b0b","#501616","#782121","#a02c2c","#c83737","#d35f5f","#de8787","#e9afaf","#f4d7d7","#241c1c","#483737","#6c5353","#916f6f","#ac9393","#c8b7b7","#e3dbdb","#2b1100","#552200","#803300","#aa4400","#d45500","#ff6600","#ff7f2a","#ff9955","#ffb380","#ffccaa","#ffe6d5","#28170b","#502d16","#784421","#a05a2c","#c87137","#d38d5f","#deaa87","#e9c6af","#f4e3d7","#241f1c","#483e37","#6c5d53","#917c6f","#ac9d93","#c8beb7","#e3dedb","#2b2200","#554400","#806600","#aa8800","#d4aa00","#ffcc00","#ffd42a","#ffdd55","#ffe680","#ffeeaa","#fff6d5","#28220b","#504416","#786721","#a0892c","#c8ab37","#d3bc5f","#decd87","#e9ddaf","#f4eed7","#24221c","#484537","#6c6753","#918a6f","#aca793","#c8c4b7","#e3e2db","#222b00","#445500","#668000","#88aa00","#aad400","#ccff00","#d4ff2a","#ddff55","#e5ff80","#eeffaa","#f6ffd5","#22280b","#445016","#677821","#89a02c","#abc837","#bcd35f","#cdde87","#dde9af","#eef4d7","#22241c","#454837","#676c53","#8a916f","#a7ac93","#c4c8b7","#e2e3db","#112b00","#225500","#338000","#44aa00","#55d400","#66ff00","#7fff2a","#99ff55","#b3ff80","#ccffaa","#e5ffd5","#17280b","#2d5016","#447821","#5aa02c","#71c837","#8dd35f","#aade87","#c6e9af","#e3f4d7","#1f241c","#3e4837","#5d6c53","#7c916f","#9dac93","#bec8b7","#dee3db","#002b00","#005500","#008000","#00aa00","#00d400","#00ff00","#2aff2a","#55ff55","#80ff80","#aaffaa","#d5ffd5","#0b280b","#165016","#217821","#2ca02c","#37c837","#5fd35f","#87de87","#afe9af","#d7f4d7","#1c241c","#374837","#536c53","#6f916f","#93ac93","#b7c8b7","#dbe3db","#002b11","#005522","#008033","#00aa44","#00d455","#00ff66","#2aff80","#55ff99","#80ffb3","#aaffcc","#d5ffe6","#0b2817","#16502d","#217844","#2ca05a","#37c871","#5fd38d","#87deaa","#afe9c6","#d7f4e3","#1c241f","#37483e","#536c5d","#6f917c","#93ac9d","#b7c8be","#dbe3de","#002b22","#005544","#008066","#00aa88","#00d4aa","#00ffcc","#2affd5","#55ffdd","#80ffe6","#aaffee","#d5fff6","#0b2822","#165044","#217867","#2ca089","#37c8ab","#5fd3bc","#87decd","#afe9dd","#d7f4ee","#1c2422","#374845","#536c67","#6f918a","#93aca7","#b7c8c4","#dbe3e2","#00222b","#004455","#006680","#0088aa","#00aad4","#00ccff","#2ad4ff","#55ddff","#80e5ff","#aaeeff","#d5f6ff","#0b2228","#164450","#216778","#2c89a0","#37abc8","#5fbcd3","#87cdde","#afdde9","#d7eef4","#1c2224","#374548","#53676c","#6f8a91","#93a7ac","#b7c4c8","#dbe2e3","#00112b","#002255","#003380","#0044aa","#0055d4","#0066ff","#2a7fff","#5599ff","#80b3ff","#aaccff","#d5e5ff","#0b1728","#162d50","#214478","#2c5aa0","#3771c8","#5f8dd3","#87aade","#afc6e9","#d7e3f4","#1c1f24","#373e48","#535d6c","#6f7c91","#939dac","#b7bec8","#dbdee3","#00002b","#000055","#000080","#0000aa","#0000d4","#0000ff","#2a2aff","#5555ff","#8080ff","#aaaaff","#d5d5ff","#0b0b28","#161650","#212178","#2c2ca0","#3737c8","#5f5fd3","#8787de","#afafe9","#d7d7f4","#1c1c24","#373748","#53536c","#6f6f91","#9393ac","#b7b7c8","#dbdbe3","#11002b","#220055","#330080","#4400aa","#5500d4","#6600ff","#7f2aff","#9955ff","#b380ff","#ccaaff","#e5d5ff","#170b28","#2d1650","#442178","#5a2ca0","#7137c8","#8d5fd3","#aa87de","#c6afe9","#e3d7f4","#1f1c24","#3e3748","#5d536c","#7c6f91","#9d93ac","#beb7c8","#dedbe3","#22002b","#440055","#660080","#8800aa","#aa00d4","#cc00ff","#d42aff","#dd55ff","#e580ff","#eeaaff","#f6d5ff","#220b28","#441650","#672178","#892ca0","#ab37c8","#bc5fd3","#cd87de","#ddafe9","#eed7f4","#221c24","#453748","#67536c","#8a6f91","#a793ac","#c4b7c8","#e2dbe3","#2b0022","#550044","#800066","#aa0088","#d400aa","#ff00cc","#ff2ad4","#ff55dd","#ff80e5","#ffaaee","#ffd5f6","#280b22","#501644","#782167","#a02c89","#c837ab","#d35fbc","#de87cd","#e9afdd","#f4d7ee","#241c22","#483745","#6c5367","#916f8a","#ac93a7","#c8b7c4","#e3dbe2","#2b0011","#550022","#800033","#aa0044","#d40055","#ff0066","#ff2a7f","#ff5599","#ff80b2","#ffaacc","#ffd5e5","#280b17","#50162d","#782144","#a02c5a","#c83771","#d35f8d","#de87aa","#e9afc6","#f4d7e3","#241c1f","#48373e","#6c535d","#916f7c","#ac939d","#c8b7be","#e3dbde"], isMac = false, //(navigator.platform.indexOf("Mac") != -1); modKey = "", //(isMac ? "meta+" : "ctrl+"); svgCanvas = new SvgCanvas(document.getElementById("svgcanvas")), path = svgCanvas.pathActions, default_img_url = "images/logo.png", workarea = $("#workarea"); // Store and retrieve preferences $.pref = function(key, val) { if(val) curPrefs[key] = val; key = 'svg-edit-'+key; var host = location.hostname, onweb = host && host.indexOf('.') != -1, store = (val != undefined), storage = false; // Some FF versions throw security errors here try { if(window.localStorage && onweb) { storage = localStorage; } } catch(e) {} try { if(window.globalStorage && onweb) { storage = globalStorage[host]; } } catch(e) {} if(storage) { if(store) storage.setItem(key, val); else return storage.getItem(key); } else if(window.widget) { if(store) widget.setPreferenceForKey(val, key); else return widget.preferenceForKey(key); } else { if(store) { var d = new Date(); d.setTime(d.getTime() + 31536000000); val = encodeURIComponent(val); document.cookie = key+'='+val+'; expires='+d.toUTCString(); } else { var result = document.cookie.match(new RegExp(key + "=([^;]+)")); return result?decodeURIComponent(result[1]):''; } } } var curPrefs = { lang:'en', iconsize:'m', bkgd_color:'#FFF', bkgd_url:'', img_save:'embed' }; // This sets up alternative dialog boxes. They mostly work the same way as // their UI counterparts, expect instead of returning the result, a callback // needs to be included that returns the result as its first parameter. // In the future we may want to add additional types of dialog boxes, since // they should be easy to handle this way. (function() { $('#dialog_container').draggable({cancel:'#dialog_content, #dialog_buttons *'}); var box = $('#dialog_box'), btn_holder = $('#dialog_buttons'); var dbox = function(type, msg, callback, defText) { $('#dialog_content').html('

'+msg.replace(/\n/g,'

')+'

') .toggleClass('prompt',(type=='prompt')); btn_holder.empty(); var ok = $('').appendTo(btn_holder); if(type != 'alert') { $('') .appendTo(btn_holder) .click(function() { box.hide();callback(false)}); } if(type == 'prompt') { var input = $('').prependTo(btn_holder); input.val(defText || ''); input.bind('keydown', {combi:'return'}, function() {ok.click();}); } box.show(); ok.click(function() { box.hide(); var resp = (type == 'prompt')?input.val():true; if(callback) callback(resp); }).focus(); if(type == 'prompt') input.focus(); } $.alert = function(msg, cb) { dbox('alert', msg, cb);}; $.confirm = function(msg, cb) { dbox('confirm', msg, cb);}; $.prompt = function(msg, txt, cb) { dbox('prompt', msg, cb, txt);}; }()); var setSelectMode = function() { $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); $('#tool_select').addClass('tool_button_current').removeClass('tool_button'); $('#styleoverrides').text('#svgcanvas svg *{cursor:move;pointer-events:all} #svgcanvas svg{cursor:default}'); svgCanvas.setMode('select'); }; var togglePathEditMode = function(editmode, elems) { $('#path_node_panel').toggle(editmode); $('#tools_bottom_2,#tools_bottom_3').toggle(!editmode); var size = $('#tool_select > svg, #tool_select > img')[0].getAttribute('width'); if(editmode) { // Change select icon $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); $('#tool_select').addClass('tool_button_current').removeClass('tool_button') .empty().append($.getSvgIcon('select_node')); multiselected = false; if(elems.length) { selectedElement = elems[0]; } } else { $('#tool_select').empty().append($.getSvgIcon('select')); } $.resizeSvgIcons({'#tool_select .svg_icon':size}); } // used to make the flyouts stay on the screen longer the very first time var flyoutspeed = 1250; var textBeingEntered = false; var selectedElement = null; var multiselected = false; var editingsource = false; var docprops = false; var fillPaint = new $.jGraduate.Paint({solidColor: "FF0000"}); // solid red var strokePaint = new $.jGraduate.Paint({solidColor: "000000"}); // solid black var saveHandler = function(window,svg) { // 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 = "\n" + svg; // Creates and opens an HTML page that provides a link to the SVG, a preview, and the markup. // Also includes warning about Mozilla bug #308590 when applicable var win = window.open("data:image/svg+xml;base64," + Utils.encode64(svg)); // Alert will only appear the first time saved OR the first time the bug is encountered var done = $.pref('save_notice_done') + ""; // TODO: Find out why this returns an object in FF when online if(done !== "all") { var note = 'Select "Save As..." in your browser to save this image as an SVG file.'; // Check if FF and has if(navigator.userAgent.indexOf('Gecko/') !== -1) { if(svg.indexOf('= 2 && elems[1] != null); if (selectedElement != null) { // unless we're already in always set the mode of the editor to select because // upon creation of a text element the editor is switched into // select mode and this event fires - we need our UI to be in sync if (mode != "multiselect" && !is_node) { setSelectMode(); updateToolbar(); } } // if (elem != null) // Deal with pathedit mode togglePathEditMode(is_node, elems); updateContextPanel(); svgCanvas.runExtensions("selectedChanged", { elems: elems, selectedElement: selectedElement, multiselected: multiselected }); }; // called when any element has changed var elementChanged = function(window,elems) { for (var i = 0; i < elems.length; ++i) { var elem = elems[i]; // if the element changed was the svg, then it could be a resolution change if (elem && elem.tagName == "svg") { populateLayers(); updateCanvas(); } // 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) { selectedElement = elem; } } // we update the contextual panel with potentially new // positional/sizing information (we DON'T want to update the // toolbar here as that creates an infinite loop) // also this updates the history buttons // we tell it to skip focusing the text control if the // text element was previously in focus updateContextPanel(); svgCanvas.runExtensions("elementChanged", { elems: elems }); }; var zoomChanged = function(window, bbox, autoCenter) { var scrbar = 15, res = svgCanvas.getResolution(), w_area = workarea, canvas_pos = $('#svgcanvas').position(); w_area.css('cursor','auto'); var z_info = svgCanvas.setBBoxZoom(bbox, w_area.width()-scrbar, w_area.height()-scrbar); if(!z_info) return; var zoomlevel = z_info.zoom, bb = z_info.bbox; $('#zoom').val(Math.round(zoomlevel*100)); if(autoCenter) { updateCanvas(); } else { updateCanvas(false, {x: bb.x * zoomlevel + (bb.width * zoomlevel)/2, y: bb.y * zoomlevel + (bb.height * zoomlevel)/2}); } if(svgCanvas.getMode() == 'zoom' && bb.width) { // Go to select if a zoom box was drawn setSelectMode(); } zoomDone(); } var flyout_funcs = {}; var setupFlyouts = function(holders) { $.each(holders, function(hold_sel, btn_opts) { var buttons = $(hold_sel).children(); var show_sel = hold_sel + '_show'; var def = false; buttons.addClass('tool_button') .unbind('click mousedown mouseup') // may not be necessary .each(function(i) { // Get this buttons options var opts = btn_opts[i]; // Remember the function that goes with this ID flyout_funcs[opts.sel] = opts.fn; if(opts.isDefault) def = i; // Clicking the icon in flyout should set this set's icon var func = function() { if($(this).hasClass('disabled')) return false; if (toolButtonClick(show_sel)) { opts.fn(); } if(opts.icon) { var icon = $.getSvgIcon(opts.icon).clone(); } else { // var icon = $(opts.sel).children().eq(0).clone(); } var shower = $(show_sel); icon[0].setAttribute('width',shower.width()); icon[0].setAttribute('height',shower.height()); shower.children(':not(.flyout_arrow_horiz)').remove(); shower.append(icon).attr('data-curopt', opts.sel); // This sets the current mode } $(this).mouseup(func); if(opts.key) { $(document).bind('keydown', {combi: opts.key+'', disableInInput:true}, func); } }); if(def) { $(show_sel).attr('data-curopt', btn_opts[def].sel); } else if(!$(show_sel).attr('data-curopt')) { // Set first as default $(show_sel).attr('data-curopt', btn_opts[0].sel); } var timer; // Clicking the "show" icon should set the current mode $(show_sel).mousedown(function(evt) { if($(show_sel).hasClass('disabled')) return false; var holder = $(show_sel.replace('_show','')); var l = holder.css('left'); var w = holder.width()*-1; var time = holder.data('shown_popop')?200:0; timer = setTimeout(function() { // Show corresponding menu holder.css('left', w).show().animate({ left: l },150); holder.data('shown_popop',true); },time); evt.preventDefault(); }).mouseup(function() { clearTimeout(timer); var opt = $(this).attr('data-curopt'); if (toolButtonClick(show_sel)) { flyout_funcs[opt](); } }); // $('#tools_rect').mouseleave(function(){$('#tools_rect').fadeOut();}); var pos = $(show_sel).position(); $(hold_sel).css({'left': pos.left+34, 'top': pos.top+77}); }); setFlyoutTitles(); } var makeFlyoutHolder = function(id, child) { var div = $('
',{ 'class': 'tools_flyout', id: id }).appendTo('#svg_editor').append(child); return div; } var setFlyoutPositions = function() { $('.tools_flyout').each(function() { var shower = $('#' + this.id + '_show'); var pos = shower.offset(); var w = shower.outerWidth(); $(this).css({left: pos.left + w, top: pos.top}); }); } var setFlyoutTitles = function() { $('.tools_flyout').each(function() { var shower = $('#' + this.id + '_show'); var tooltips = []; $(this).children().each(function() { tooltips.push(this.title); }); shower[0].title = tooltips.join(' / '); }); } var extAdded = function(window, ext) { var cb_called = false; var runCallback = function() { if(ext.callback && !cb_called) { cb_called = true; ext.callback(); } } if(ext.context_tools) { $.each(ext.context_tools, function(i, tool) { // Add select tool var cont_id = tool.container_id?(' id="' + tool.container_id + '"'):""; var panel = $('#' + tool.panel); // create the panel if it doesn't exist if(!panel.length) panel = $('
', {id: tool.panel}).appendTo("#tools_top"); // TODO: Allow support for other types, or adding to existing tool switch (tool.type) { case 'tool_button': var html = '
' + tool.id + '
'; var div = $(html).appendTo(panel); if (tool.events) { $.each(tool.events, function(evt, func) { $(div).bind(evt, func); }); } break; case 'select': var html = '' + '"; // Creates the tool, hides & adds it, returns the select element var sel = $(html).appendTo(panel).find('select'); $.each(tool.events, function(evt, func) { $(sel).bind(evt, func); }); break; case 'input': var html = '' + '' + tool.label + ':' + '' // Creates the tool, hides & adds it, returns the select element // Add to given tool.panel var inp = $(html).appendTo(panel).find('input'); if(tool.spindata) { inp.SpinButton(tool.spindata); } if(tool.events) { $.each(tool.events, function(evt, func) { inp.bind(evt, func); }); } break; default: break; } }); } if(ext.buttons) { var fallback_obj = {}, placement_obj = {}, svgicons = ext.svgicons; var holders = {}; // Add buttons given by extension $.each(ext.buttons, function(i, btn) { var icon; var id = btn.id; var num = i; // Give button a unique ID while($('#'+id).length) { id = btn.id + '_' + (++num); } if(!svgicons) { icon = $(''); } else { fallback_obj[id] = btn.icon; placement_obj['#' + id] = btn.id; } var cls, parent; // Set button up according to its type switch ( btn.type ) { case 'mode': cls = 'tool_button'; parent = "#tools_left"; break; case 'context': cls = 'tool_button'; parent = "#" + btn.panel; // create the panel if it doesn't exist if(!$(parent).length) $('
', {id: btn.panel}).appendTo("#tools_top"); break; } var button = $('
') .attr("id", id) .attr("title", btn.title) .addClass(cls); if(!btn.includeWith) { button.appendTo(parent); } else { // Add to flyout menu / make flyout menu var opts = btn.includeWith; // opts.button, default, position var ref_btn = $(opts.button); var flyout_holder = ref_btn.parent(); // Create a flyout menu if there isn't one already if(!ref_btn.parent().hasClass('tools_flyout')) { // Create flyout placeholder var arr_div = $('
',{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, key: btn.key, 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') { if(btn.includeWith) { button.bind(name, func); } else { button.bind(name, function() { if(toolButtonClick(button)) { func(); } }); } if(btn.key) { $(document).bind('keydown', {combi: btn.key, disableInInput: true}, func); if(btn.title) button.attr("title", btn.title + ' ['+btn.key+']'); } } else { button.bind(name, func); } } 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); } runCallback(); } }); } runCallback(); }; 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 != "text" && selectedElement.tagName != "foreignObject" && 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('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('disabled', angle == 0); } else { var point = path.getNodePoint(); $('#tool_node_delete').toggleClass('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('push_button_pressed').removeClass('tool_button'); } else { $('#tool_italic').removeClass('push_button_pressed').addClass('tool_button'); } if (svgCanvas.getBold()) { $('#tool_bold').addClass('push_button_pressed').removeClass('tool_button'); } else { $('#tool_bold').removeClass('push_button_pressed').addClass('tool_button'); } $('#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( 'disabled'); } else { $('#tool_undo').addClass( 'disabled'); } if (svgCanvas.getRedoStackSize() > 0) { $('#tool_redo').removeClass( 'disabled'); } else { $('#tool_redo').addClass( '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('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 = svgCanvas.isValidUnit(attr, val); 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('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').removeClass('tool_button'); // 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('buttondown'); // 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('buttondown')) { button.addClass('buttondown').removeClass('buttonup') // 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('buttondown').addClass('buttonup'); 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() { var linked = !$('#tool_node_link').hasClass('push_button_pressed'); if (linked) $('#tool_node_link').addClass('push_button_pressed').removeClass('tool_button'); else $('#tool_node_link').removeClass('push_button_pressed').addClass('tool_button'); 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 clickImport = function(){ }; 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() { var wf = !$('#tool_wireframe').hasClass('push_button_pressed'); if (wf) $('#tool_wireframe').addClass('push_button_pressed').removeClass('tool_button'); else $('#tool_wireframe').removeClass('push_button_pressed').addClass('tool_button'); workarea.toggleClass('wireframe'); if(supportsNonSS) return; var wf_rules = $('#wireframe_rules'); if(!wf_rules.length) { wf_rules = $('