deac/instiki
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Gaussian Blur (and other fun stuff)

Browse source 
Sync with latest SVG-edit.
This commit is contained in:
Jacques Distler 2010-04-12 00:33:24 -05:00
parent 6d5db0739a
commit 324cc12320
4 changed files with 238 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
public/svg-edit/editor/svg-editor.css
View file

@ -398,6 +398,7 @@
opacity: 1;
pointer-events: stroke;
vector-effect: non-scaling-stroke;
filter: none;
}
#workarea.wireframe #svgcontent text {
@ -751,7 +752,7 @@ span.zoom_tool {
#option_lists ul {
display: none;
position: absolute;
height: 90px;
height: auto;
z-index: 3;
margin: 0;
list-style: none;

13
public/svg-edit/editor/svg-editor.html
View file

@ -168,6 +168,19 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<input id="angle" title="Change rotation angle" size="2" value="0" type="text"/>
</label>
<div class="toolset" id="tool_blur">
<label>
<span id="blurLabel">blur:</span>
<input id="blur" title="Change gaussian blur value" size="2" value="0" type="text"/>
</label>
<div id="blur_dropdown" class="dropdown">
<button></button>
<ul>
<li class="special"><div id="blur_slider"></div></li>
</ul>
</div>
</div>
<div id="xy_panel" class="toolset">
<label>
x: <input id="selected_x" class="attr_changer" title="Change X coordinate" size="3" data-attr="x"/>

73
public/svg-edit/editor/svg-editor.js
View file

@ -963,12 +963,7 @@
// 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 &&
selectedElement.tagName != "image" &&
selectedElement.tagName != "text" &&
selectedElement.tagName != "foreignObject" &&
selectedElement.tagName != "g")
{
if (selectedElement != null && $.inArray(selectedElement.tagName, ['image', 'text', 'foreignObject', 'g', 'a']) === -1) {
// get opacity values
var fillOpacity = parseFloat(selectedElement.getAttribute("fill-opacity"));
if (isNaN(fillOpacity)) {
@ -1062,8 +1057,21 @@
#ellipse_panel, #line_panel, #text_panel, #image_panel').hide();
if (elem != null) {
var elname = elem.nodeName;
// If this is a link with no transform and one child, pretend
// its child is selected
// console.log('go', elem)
// if(elname === 'a') { // && !$(elem).attr('transform')) {
// elem = elem.firstChild;
// }
var angle = svgCanvas.getRotationAngle(elem);
$('#angle').val(angle);
var blurval = svgCanvas.getBlur(elem);
$('#blur').val(blurval);
$('#blur_slider').slider('option', 'value', blurval);
if(svgCanvas.addedNew) {
if(elname == 'image') {
@ -1294,6 +1302,15 @@
svgCanvas.setOpacity(val/100);
}
var changeBlur = function(ctl, val, noUndo) {
if(val == null) val = ctl.value;
$('#blur').val(val);
if(!ctl || !ctl.handle) {
$('#blur_slider').slider('option', 'value', val);
}
svgCanvas.setBlur(val, noUndo);
}
var operaRepaint = function() {
// Repaints canvas in Opera. Needed for stroke-dasharray change as well as fill change
if(!window.opera) return;
@ -1671,6 +1688,23 @@
}
});
addDropDown('#blur_dropdown', function() {
});
$("#blur_slider").slider({
max: 10,
step: .1,
stop: function(evt, ui) {
changeBlur(ui);
$('#blur_dropdown li').show();
$(window).mouseup();
},
slide: function(evt, ui){
changeBlur(ui, null, true);
}
});
addDropDown('#zoom_dropdown', function() {
var item = $(this);
var val = item.attr('data-val');
@ -1681,10 +1715,6 @@
}
}, 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);
@ -2237,7 +2267,8 @@
'line-height': {s: '15px'}
},
"#tools_bottom_2": {
'width': {l: '295px', xl: '355px'}
'width': {l: '295px', xl: '355px'},
'top': {s: '4px'}
},
"#tools_top > div, #tools_top": {
'line-height': {s: '17px', l: '34px', xl: '50px'}
@ -2364,6 +2395,7 @@
function setImageURL(url) {
if(!url) url = default_img_url;
svgCanvas.setImageURL(url);
$('#image_url').val(url);
@ -2568,6 +2600,13 @@
var supportsNonSS = (test_el.style.vectorEffect == 'non-scaling-stroke');
test_el.removeAttribute('style');
// Use this to test support for blur element. Seems to work to test support in Webkit
var blur_test = svgdocbox.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
if(typeof blur_test.stdDeviationX === "undefined") {
$('#tool_blur').hide();
}
$(blur_test).remove();
// Test for embedImage support (use timeout to not interfere with page load)
setTimeout(function() {
svgCanvas.embedImage('images/logo.png', function(datauri) {
@ -3153,6 +3192,7 @@
$('#angle').SpinButton({ min: -180, max: 180, step: 5, callback: changeRotationAngle });
$('#font_size').SpinButton({ step: 1, min: 0.001, stepfunc: stepFontSize, callback: changeFontSize });
$('#group_opacity').SpinButton({ step: 5, min: 0, max: 100, callback: changeOpacity });
$('#blur').SpinButton({ step: .1, min: 0, max: 10, callback: changeBlur });
$('#zoom').SpinButton({ min: 0.001, max: 10000, step: 50, stepfunc: stepZoom, callback: changeZoom });
window.onbeforeunload = function() {
@ -3215,7 +3255,6 @@
var w = workarea.width(), h = workarea.height();
var w_orig = w, h_orig = h;
var zoom = svgCanvas.getZoom();
var res = svgCanvas.getResolution();
var w_area = workarea;
var cnvs = $("#svgcanvas");
@ -3225,8 +3264,8 @@
};
var multi = curConfig.canvas_expansion;
w = Math.max(w_orig, res.w * multi * zoom);
h = Math.max(h_orig, res.h * multi * zoom);
w = Math.max(w_orig, svgCanvas.contentW * zoom * multi);
h = Math.max(h_orig, svgCanvas.contentH * zoom * multi);
if(w == w_orig && h == h_orig) {
workarea.css('overflow','hidden');
@ -3255,8 +3294,8 @@
var new_y = new_can_y + old_dist_y * ratio;
new_ctr = {
x: new_x, // + res.w/2,
y: new_y //+ res.h/2,
x: new_x,
y: new_y
};
} else {
@ -3277,7 +3316,7 @@
updateCanvas(true);
// });
// var revnums = "svg-editor.js ($Rev: 1505 $) ";
// var revnums = "svg-editor.js ($Rev: 1514 $) ";
// revnums += svgCanvas.getVersion();
// $('#copyright')[0].setAttribute("title", revnums);

194
public/svg-edit/editor/svgcanvas.js
View file

@ -1,4 +1,4 @@
/*
/*
* svgcanvas.js
*
* Licensed under the Apache License, Version 2
@ -197,6 +197,7 @@ function ChangeElementCommand(elem, attrs, text) {
this.oldValues = attrs;
for (var attr in attrs) {
if (attr == "#text") this.newValues[attr] = elem.textContent;
else if (attr == "#href") this.newValues[attr] = elem.getAttributeNS(xlinkns, "href");
else this.newValues[attr] = elem.getAttribute(attr);
}
@ -205,6 +206,7 @@ function ChangeElementCommand(elem, attrs, text) {
for(var attr in this.newValues ) {
if (this.newValues[attr]) {
if (attr == "#text") this.elem.textContent = this.newValues[attr];
else if (attr == "#href") this.elem.setAttributeNS(xlinkns, "xlink:href", this.newValues[attr])
else this.elem.setAttribute(attr, this.newValues[attr]);
}
else {
@ -241,6 +243,7 @@ function ChangeElementCommand(elem, attrs, text) {
for(var attr in this.oldValues ) {
if (this.oldValues[attr]) {
if (attr == "#text") this.elem.textContent = this.oldValues[attr];
else if (attr == "#href") this.elem.setAttributeNS(xlinkns, "xlink:href", this.oldValues[attr]);
else this.elem.setAttribute(attr, this.oldValues[attr]);
}
else {
@ -1140,6 +1143,7 @@ function BatchCommand(text) {
var handle = svgroot.suspendRedraw(60);
var defaults = {
'fill-opacity':1,
'stop-opacity':1,
'opacity':1,
'stroke':'none',
'stroke-dasharray':'none',
@ -1599,15 +1603,36 @@ function BatchCommand(text) {
if(elem.id == 'svgcontent') {
// Process root element separately
var res = canvas.getResolution();
// console.log('res',res);
out.push(' width="' + res.w + '" height="' + res.h + '" xmlns="'+svgns+'"');
var nsuris = {};
// Check elements for namespaces, add if found
$(elem).find('*').andSelf().each(function() {
var el = this;
$.each(this.attributes, function(i, attr) {
var uri = attr.namespaceURI;
if(uri && !nsuris[uri] && nsMap[uri] !== 'xmlns') {
nsuris[uri] = true;
out.push(" xmlns:" + nsMap[uri] + '="' + uri +'"');
}
});
});
var i = attrs.length;
while (i--) {
attr = attrs.item(i);
var attrVal = toXml(attr.nodeValue);
// Namespaces have already been dealt with, so skip
if(attr.nodeName.indexOf('xmlns:') === 0) continue;
// only serialize attributes we don't use internally
if (attrVal != "" &&
$.inArray(attr.localName, ['width','height','xmlns','x','y','viewBox','id','overflow']) == -1)
{
if(!attr.namespaceURI || nsMap[attr.namespaceURI]) {
out.push(' ');
out.push(attr.nodeName); out.push("=\"");
@ -2148,6 +2173,10 @@ function BatchCommand(text) {
ty = 0;
if (child.nodeType == 1) {
var childTlist = canvas.getTransformList(child);
// some children might not have a transform (<metadata>, <defs>, etc)
if (!childTlist) continue;
var m = transformListToTransform(childTlist).matrix;
var angle = canvas.getRotationAngle(child);
@ -2589,6 +2618,11 @@ function BatchCommand(text) {
}
}
}
if(selectedElements[0] && selectedElements.length === 1 && selectedElements[0].tagName == 'a') {
// Make "a" element's child be the selected element
selectedElements[0] = selectedElements[0].firstChild;
}
call("selected", selectedElements);
if (showGrips || selectedElements.length == 1) {
@ -3603,7 +3637,8 @@ function BatchCommand(text) {
case "rect":
case "image":
var attrs = $(element).attr(["width", "height"]);
keep = (attrs.width != 0 || attrs.height != 0);
// Image should be kept regardless of size (use inherit dimensions later)
keep = (attrs.width != 0 || attrs.height != 0) || current_mode === "image";
break;
case "circle":
keep = (element.getAttribute('r') != 0);
@ -5093,12 +5128,17 @@ function BatchCommand(text) {
},
clear: function(remove) {
if(remove && current_mode == "path") {
if (current_mode == "path" && current_path_pts.length > 0) {
var elem = getElem(getId());
if(elem) elem.parentNode.removeChild(elem);
$(getElem("path_stretch_line")).remove();
$(elem).remove();
$(getElem("pathpointgrip_container")).find('*').attr('display', 'none');
current_path_pts = [];
started = false;
} else if (current_mode == "pathedit") {
this.toSelectMode();
}
if(path) path.init().show(false);
current_path = null;
},
resetOrientation: function(path) {
if(path == null || path.nodeName != 'path') return false;
@ -5138,20 +5178,6 @@ function BatchCommand(text) {
path.update();
}
},
modeChange: function() {
// toss out half-drawn path
if (current_mode == "path" && current_path_pts.length > 0) {
var elem = getElem(getId());
elem.parentNode.removeChild(elem);
this.clear();
canvas.clearSelection();
started = false;
}
else if (current_mode == "pathedit") {
this.clear();
this.toSelectMode();
}
},
getNodePoint: function() {
var sel_pt = path.selected_pts.length ? path.selected_pts[0] : 1;
@ -5980,10 +6006,11 @@ function BatchCommand(text) {
}
});
}
content.attr(attrs);
this.contentW = attrs['width'];
this.contentH = attrs['height'];
content.attr(attrs);
batchCmd.addSubCommand(new InsertElementCommand(svgcontent));
// update root to the correct size
var changes = content.attr(["width", "height"]);
@ -6655,8 +6682,8 @@ function BatchCommand(text) {
// return {'w':vb[2], 'h':vb[3], 'zoom': current_zoom};
return {
'w':svgcontent.getAttribute("width"),
'h':svgcontent.getAttribute("height"),
'w':svgcontent.getAttribute("width")/current_zoom,
'h':svgcontent.getAttribute("height")/current_zoom,
'zoom': current_zoom
};
};
@ -6824,7 +6851,7 @@ function BatchCommand(text) {
};
this.setMode = function(name) {
pathActions.modeChange();
pathActions.clear(true);
cur_properties = (selectedElements[0] && selectedElements[0].nodeName == 'text') ? cur_text : cur_shape;
current_mode = name;
@ -6951,7 +6978,7 @@ function BatchCommand(text) {
if(diff) continue;
}
// else could be a duplicate, iterate through stops
var stops = grad.getElementsByTagNameNS(svgns, "stop");
var ostops = og.getElementsByTagNameNS(svgns, "stop");
@ -7084,6 +7111,82 @@ function BatchCommand(text) {
this.changeSelectedAttribute("opacity", val);
};
this.getBlur = function() {
var val = 0;
var elem = selectedElements[0];
if(elem) {
var filter_url = elem.getAttribute('filter');
if(filter_url) {
var blur = getElem(elem.id + '_blur');
if(blur) {
val = blur.firstChild.getAttribute('stdDeviation');
}
}
}
return val;
}
this.setBlur = function(val, noUndo) {
// Looks for associated blur, creates one if not found
var elem_id = selectedElements[0].id;
var filter = getElem(elem_id + '_blur');
val -= 0;
// Blur found!
if(filter) {
if(val === 0) {
$(filter).remove();
} else {
var elem = filter.firstChild;
if(noUndo) {
this.changeSelectedAttributeNoUndo('stdDeviation', val, [elem]);
} else {
this.changeSelectedAttribute('stdDeviation', val, [elem]);
}
}
} else {
// Not found, so create
var newblur = addSvgElementFromJson({ "element": "feGaussianBlur",
"attr": {
"in": 'SourceGraphic',
"stdDeviation": val
}
});
filter = addSvgElementFromJson({ "element": "filter",
"attr": {
"id": elem_id + '_blur'
}
});
filter.appendChild(newblur);
findDefs().appendChild(filter);
}
if(val === 0) {
selectedElements[0].removeAttribute("filter");
} else {
this.changeSelectedAttribute("filter", 'url(#' + elem_id + '_blur)');
if(val > 3) {
// TODO: Create algorithm here where size is based on expected blur
assignAttributes(filter, {
x: '-50%',
y: '-50%',
width: '200%',
height: '200%',
}, 100);
} else {
filter.removeAttribute('x');
filter.removeAttribute('y');
filter.removeAttribute('width');
filter.removeAttribute('height');
}
}
};
this.getFillOpacity = function() {
return cur_shape.fill_opacity;
};
@ -7331,7 +7434,44 @@ function BatchCommand(text) {
};
this.setImageURL = function(val) {
svgCanvas.changeSelectedAttribute("#href", val);
var elem = selectedElements[0];
if(!elem) return;
var attrs = $(elem).attr(['width', 'height']);
var setsize = (!attrs.width || !attrs.height);
var cur_href = elem.getAttributeNS(xlinkns, "href");
// Do nothing if no URL change or size change
if(cur_href !== val) {
setsize = true;
} else if(!setsize) return;
var batchCmd = new BatchCommand("Change Image URL");
elem.setAttributeNS(xlinkns, "xlink:href", val);
batchCmd.addSubCommand(new ChangeElementCommand(elem, {
"#href": cur_href
}));
if(setsize) {
$(new Image()).load(function() {
var changes = $(elem).attr(['width', 'height']);
$(elem).attr({
width: this.width,
height: this.height
});
selectorManager.requestSelector(elem).resize();
batchCmd.addSubCommand(new ChangeElementCommand(elem, changes));
addCommandToHistory(batchCmd);
call("changed", elem);
}).attr('src',val);
} else {
addCommandToHistory(batchCmd);
}
};
this.setRectRadius = function(val) {
@ -8313,7 +8453,7 @@ function BatchCommand(text) {
// Function: getVersion
// Returns a string which describes the revision number of SvgCanvas.
this.getVersion = function() {
return "svgcanvas.js ($Rev: 1504 $)";
return "svgcanvas.js ($Rev: 1514 $)";
};
this.setUiStrings = function(strs) {