diff --git a/public/svg-edit/editor/images/svg_edit_icons.svg b/public/svg-edit/editor/images/svg_edit_icons.svg index 02a15dbd..5f37fefe 100644 --- a/public/svg-edit/editor/images/svg_edit_icons.svg +++ b/public/svg-edit/editor/images/svg_edit_icons.svg @@ -300,6 +300,12 @@ + + + + + + @@ -678,6 +684,108 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/svg-edit/editor/svg-editor.css b/public/svg-edit/editor/svg-editor.css index 938ff576..cbcbb398 100644 --- a/public/svg-edit/editor/svg-editor.css +++ b/public/svg-edit/editor/svg-editor.css @@ -1,4 +1,4 @@ -body { +body { background: #D8D8D8; } @@ -54,6 +54,8 @@ body { border-top: none; margin-top: 2px; margin-left: 4px; + position: relative; + z-index: 2; } #svg_editor #stroke_bg, @@ -116,7 +118,7 @@ body { bottom: 0px; right: 0px; width: 0px; - overflow: hidden; + overflow: scroll; margin: 0px; } @@ -629,6 +631,7 @@ span.zoom_tool { display: none; background: #E8E8E8; height: 350px; + z-index: 4; } #svg_editor .tools_flyout { @@ -713,6 +716,59 @@ span.zoom_tool { white-space: nowrap; } +#svg_editor .stroke_tool button { + margin-top: 3px; + background: #F0F0F0; +} + +#svg_editor .stroke_tool div div { + -moz-user-select: none; + width: 20px; + height: 20px; + margin: 1px 0; + padding: 1px; + border: 1px solid #DDD; +} + +#svg_editor .stroke_tool:hover div > * { + background-color: #FFC; +} + +#svg_editor .stroke_tool.down div div, +#svg_editor .stroke_tool.down button { + border: 1px inset gray; + background: #F4E284; +} + +.stroke_tool > div { + width: 42px; +} + +.stroke_tool > div > * { + float: left; +} + +#option_lists ul { + display: none; + position: absolute; + height: 90px; + z-index: 3; + margin: 0; + list-style: none; + padding-left: 0; +} + +#svg_editor ul li.current { + background-color: #F4E284; +} + +#svg_editor #option_lists ul li { + margin: 0; + border-radius: 0; + -moz-border-radius: 0; + -webkit-border-radius: 0; +} + .color_tool > *:first-child { -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; @@ -749,12 +805,6 @@ span.zoom_tool { width: 140px; } - -#svg_editor #tools_bottom_3 { -// position: relative; - z-index: 2; -} - #svg_editor #copyright { text-align: right; padding-right: .3em; diff --git a/public/svg-edit/editor/svg-editor.html b/public/svg-edit/editor/svg-editor.html index 7746b8ce..9072f81b 100644 --- a/public/svg-edit/editor/svg-editor.html +++ b/public/svg-edit/editor/svg-editor.html @@ -433,6 +433,7 @@ script type="text/javascript" src="locale/locale.min.js"> Dash: - - - - - + + + +
>>
- - - @@ -498,6 +491,21 @@ script type="text/javascript" src="locale/locale.min.js"> +
+ + + +
+ +
diff --git a/public/svg-edit/editor/svg-editor.js b/public/svg-edit/editor/svg-editor.js index 74e7a52e..a3a299c4 100644 --- a/public/svg-edit/editor/svg-editor.js +++ b/public/svg-edit/editor/svg-editor.js @@ -6,7 +6,7 @@ * Copyright(c) 2010 Alexis Deveria * Copyright(c) 2010 Pavol Rusnak * Copyright(c) 2010 Jeff Schiller - * Copyright(c) 2010 Narendra Sisodya + * Copyright(c) 2010 Narendra Sisodiya * */ @@ -310,6 +310,14 @@ '#tool_alignmiddle':'align_middle', '#tool_alignbottom':'align_bottom', + '#linecap_butt,#cur_linecap':'linecap_butt', + '#linecap_round':'linecap_round', + '#linecap_square':'linecap_square', + + '#linejoin_miter,#cur_linejoin':'linejoin_miter', + '#linejoin_round':'linejoin_round', + '#linejoin_bevel':'linejoin_bevel', + '#url_notice':'warning', '#layer_up':'go_up', @@ -330,7 +338,8 @@ '.dropdown button .svg_icon': 7, '#main_button .dropdown .svg_icon': 9, '.palette_item:first .svg_icon, #fill_bg .svg_icon, #stroke_bg .svg_icon': 16, - '.toolbar_button button .svg_icon':16 + '.toolbar_button button .svg_icon':16, + '.stroke_tool div div .svg_icon': 20 }, callback: function(icons) { $('.toolbar_button button > svg, .toolbar_button button > img').each(function() { @@ -1015,8 +1024,12 @@ $('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1); $('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none"); - $('#stroke_linejoin').val(selectedElement.getAttribute("stroke-linejoin")||"miter"); - $('#stroke_linecap').val(selectedElement.getAttribute("stroke-linecap")||"butt"); + + var attr = selectedElement.getAttribute("stroke-linejoin") || 'miter'; + $('#linejoin_' + attr).mouseup(); + + var attr = selectedElement.getAttribute("stroke-linecap") || 'butt'; + $('#linecap_' + attr).mouseup(); } // All elements including image and group have opacity @@ -1297,10 +1310,10 @@ operaRepaint(); }); - $('#stroke_linecap').change(function(){ - svgCanvas.setStrokeAttr('stroke-linecap', $(this).val()); - operaRepaint(); - }); +// $('#stroke_linecap').change(function(){ +// svgCanvas.setStrokeAttr('stroke-linecap', $(this).val()); +// operaRepaint(); +// }); // Lose focus for select elements when changed (Allows keyboard shortcuts to work better) @@ -1584,6 +1597,55 @@ }); } + // TODO: Combine this with addDropDown or find other way to optimize + var addAltDropDown = function(elem, list, callback, dropUp) { + var button = $(elem); + var list = $(list); + var on_button = false; + if(dropUp) { + $(elem).addClass('dropup'); + } + + list.find('li').bind('mouseup', function() { + callback.apply(this, arguments); + $(this).addClass('current').siblings().removeClass('current'); + }); + + $(window).mouseup(function(evt) { + if(!on_button) { + button.removeClass('down'); + list.hide(); + list.css({top:0, left:0}); + } + on_button = false; + }); + + var height = list.height(); + + $(elem).bind('mousedown',function() { + var off = $(elem).offset(); + off.top -= list.height(); + off.left += 8; + $(list).offset(off); + + if (!button.hasClass('down')) { + button.addClass('down'); + list.show(); + on_button = true; + return false; + } else { + button.removeClass('down'); + // CSS position must be reset for Webkit + list.hide(); + list.css({top:0, left:0}); + } + }).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(); @@ -1619,6 +1681,28 @@ } }, true); +// $('#cur_linecap').mousedown(function() { +// $('#linecap_opts').show(); +// }); + + addAltDropDown('#stroke_linecap', '#linecap_opts', function() { + var val = this.id.split('_')[1]; + svgCanvas.setStrokeAttr('stroke-linecap', val); + operaRepaint(); + var icon = $.getSvgIcon(this.id).clone(); + $('#cur_linecap').empty().append(icon); + $.resizeSvgIcons({'#cur_linecap .svg_icon': 20}); + }, true); + + addAltDropDown('#stroke_linejoin', '#linejoin_opts', function() { + var val = this.id.split('_')[1]; + svgCanvas.setStrokeAttr('stroke-linejoin', val); + operaRepaint(); + var icon = $.getSvgIcon(this.id).clone(); + $('#cur_linejoin').empty().append(icon); + $.resizeSvgIcons({'#cur_linejoin .svg_icon': 20}); + }, true); + /* When a flyout icon is selected @@ -3193,7 +3277,7 @@ updateCanvas(true); // }); - // var revnums = "svg-editor.js ($Rev: 1498 $) "; + // var revnums = "svg-editor.js ($Rev: 1505 $) "; // revnums += svgCanvas.getVersion(); // $('#copyright')[0].setAttribute("title", revnums); diff --git a/public/svg-edit/editor/svgcanvas.js b/public/svg-edit/editor/svgcanvas.js index 5330f444..03f24f5f 100644 --- a/public/svg-edit/editor/svgcanvas.js +++ b/public/svg-edit/editor/svgcanvas.js @@ -1,4 +1,4 @@ -/* +/* * svgcanvas.js * * Licensed under the Apache License, Version 2 @@ -5980,7 +5980,9 @@ function BatchCommand(text) { } }); } - + this.contentW = attrs['width']; + this.contentH = attrs['height']; + content.attr(attrs); batchCmd.addSubCommand(new InsertElementCommand(svgcontent)); // update root to the correct size @@ -6742,6 +6744,8 @@ function BatchCommand(text) { svgcontent.setAttribute('width', x); svgcontent.setAttribute('height', y); + this.contentW = x; + this.contentH = y; batchCmd.addSubCommand(new ChangeElementCommand(svgcontent, {"width":w, "height":h})); svgcontent.setAttribute("viewBox", [0, 0, x/current_zoom, y/current_zoom].join(' ')); @@ -7866,23 +7870,29 @@ function BatchCommand(text) { }; } + this.contentW = this.getResolution().w; + this.contentH = this.getResolution().h; + this.updateCanvas = function(w, h, w_orig, h_orig) { svgroot.setAttribute("width", w); svgroot.setAttribute("height", h); var bg = $('#canvasBackground')[0]; var old_x = svgcontent.getAttribute('x'); var old_y = svgcontent.getAttribute('y'); - var x = (w/2 - svgcontent.getAttribute('width')*current_zoom/2); - var y = (h/2 - svgcontent.getAttribute('height')*current_zoom/2); - + var x = (w/2 - this.contentW*current_zoom/2); + var y = (h/2 - this.contentH*current_zoom/2); + assignAttributes(svgcontent, { + width: this.contentW*current_zoom, + height: this.contentH*current_zoom, 'x': x, - 'y': y + 'y': y, + "viewBox" : "0 0 " + this.contentW + " " + this.contentH }); assignAttributes(bg, { - width: svgcontent.getAttribute('width') * current_zoom, - height: svgcontent.getAttribute('height') * current_zoom, + width: svgcontent.getAttribute('width'), + height: svgcontent.getAttribute('height'), x: x, y: y }); @@ -8303,7 +8313,7 @@ function BatchCommand(text) { // Function: getVersion // Returns a string which describes the revision number of SvgCanvas. this.getVersion = function() { - return "svgcanvas.js ($Rev: 1498 $)"; + return "svgcanvas.js ($Rev: 1504 $)"; }; this.setUiStrings = function(strs) {