Skip to content

Commit

Permalink
Merge branch 'multiple-gradient-overlays'
Browse files Browse the repository at this point in the history
  • Loading branch information
@dirkschulze
dirkschulze committed Feb 2, 2015
2 parents 50b7b08 + b69bba1 commit 94d919c
Show file tree
Hide file tree
Showing 20 changed files with 1,639 additions and 1,012 deletions.
12 changes: 7 additions & 5 deletions svgOMGeneratorStyles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,20 +222,22 @@
svgNode.style.fx.chromeFX.color = omgUtils.toColor(color);
}

if (svgNode.style.fx.gradientFill) {
var gradient = omgUtils.toGradient(svgNode.style.fx.gradientFill);
svgNode.style.fx.gradientFill.gradient = gradient;
}

function prepareColor (ele) {
color = ele.color;
ele.color = omgUtils.toColor(color);
ele.opacity = ele.opacity ? ele.opacity.value / 100 : 1;
}

function prepareGradient (ele) {
var gradient = omgUtils.toGradient(ele);
ele.gradient = gradient;
ele.opacity = ele.opacity ? ele.opacity.value / 100 : 1;
}

prepareEffect('solidFill', prepareColor);
prepareEffect('dropShadow', prepareColor);
prepareEffect('innerShadow', prepareColor);
prepareEffect('gradientFill', prepareGradient);

if (svgNode.style.fx.frameFX) {
var stroke = {},
Expand Down
104 changes: 61 additions & 43 deletions svgWriterFx.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@
function SVGWriterFx() {

this.hasFx = function (ctx) {
return (this.hasEffect(ctx, 'dropShadow') ||
this.hasGradientOverlay(ctx) ||
return (this.hasEffect(ctx, 'dropShadow') ||
this.hasEffect(ctx, 'gradientFill', this.hasColorNoise) ||
this.hasEffect(ctx, 'solidFill') ||
this.hasSatin(ctx) ||
this.hasEffect(ctx, 'innerShadow'));
Expand Down Expand Up @@ -87,7 +87,7 @@
iFx++;
filterFlavor = "outer-glow";
}
if (this.hasGradientOverlay(ctx)) {
if (this.hasEffect(ctx, 'gradientFill', this.hasColorNoise)) {
iFx++;
filterFlavor = "gradient-overlay";
}
Expand Down Expand Up @@ -146,12 +146,19 @@
}
};

this.hasEffect = function (ctx, effect) {
this.hasColorNoise = function (ele) {
return ele.gradient.gradientForm !== 'colorNoise';
}

this.hasEffect = function (ctx, effect, custom) {
var omIn = ctx.currentOMNode;

effect += 'Multi';
if (omIn && omIn.style && omIn.style.fx && omIn.style.fx[effect]) {
return omIn.style.fx[effect].some(function(ele) {
if (custom) {
return ele.enabled && custom(ele);
}
return ele.enabled;
});
}
Expand Down Expand Up @@ -276,51 +283,62 @@
return JSON.stringify({ c: outerGlow.color, g: outerGlow.gradient, o: opacity, b: blur });
};

this.hasGradientOverlay = function (ctx) {
var omIn = ctx.currentOMNode,
gradientFill;

if (omIn && omIn.style && omIn.style.fx) {
gradientFill = omIn.style.fx.gradientFill;
if (gradientFill && gradientFill.enabled && gradientFill.gradient &&
gradientFill.gradient.gradientForm !== 'colorNoise') {
return true;
}
}
return false;
};
this.externalizeGradientOverlay = function (ctx, param) {
if (!this.hasEffect(ctx, 'gradientFill', this.hasColorNoise)) {
return false;
}

var omIn = ctx.currentOMNode,
gradientFill = omIn.style.fx.gradientFill,
bounds = omIn.shapeBounds,
pseudoCtx = new SVGWriterContext(omIn),
opacity;
gradientFillMulti = omIn.style.fx.gradientFillMulti,
self = this,
specifies = [];

if (!gradientFill || !gradientFill.enabled) {
return;
}
opacity = round1k(gradientFill.opacity.value / 100);
function writeGradientFill (ctx, gradientFill) {
var omIn = ctx.currentOMNode,
bounds = omIn.shapeBounds,
pseudoCtx = new SVGWriterContext(omIn),
opacity = round1k(gradientFill.opacity);

svgWriterUtils.writeGradientOverlay(pseudoCtx, gradientFill.gradient, ctx.svgOM.viewBox, 'grad');
svgWriterUtils.writeGradientOverlay(pseudoCtx, gradientFill.gradient, ctx.svgOM.viewBox, 'grad');

var string = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"' +
' width="' + (bounds.right - bounds.left) + '" height="' + (bounds.bottom - bounds.top) + '">' +
pseudoCtx.sOut + '<rect width="100%" height="100%"';
if (opacity != 1) {
string += ' opacity="' + opacity + '"';
var string = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"' +
' width="' + (bounds.right - bounds.left) + '" height="' + (bounds.bottom - bounds.top) + '">' +
pseudoCtx.sOut + '<rect width="100%" height="100%"',
base64;

if (opacity != 1) {
string += ' opacity="' + opacity + '"';
}
string += ' fill="url(#grad)"/></svg>';
base64 = svgWriterUtils.toBase64(string);

write(ctx, ctx.currentIndent + '<feImage');
writeAttrIfNecessary(ctx, 'x', bounds.left);
writeAttrIfNecessary(ctx, 'y', bounds.top);
writeAttrIfNecessary(ctx, 'width', bounds.right - bounds.left);
writeAttrIfNecessary(ctx, 'height', bounds.bottom - bounds.top);
writeAttrIfNecessary(ctx, 'preserveAspectRatio', 'none');
writeAttrIfNecessary(ctx, 'xlink:href', 'data:image/svg+xml;base64,' + base64);
writeln(ctx, '/>');
writeFeComposite(ctx, 'in', {in2: 'SourceGraphic'});

return { l: bounds.left, r: bounds.right, t: bounds.top, b: bounds.bottom, mo: gradientFill.mode, base: base64 };
}
string += ' fill="url(#grad)"/></svg>';
var base64 = svgWriterUtils.toBase64(string);

writeln(ctx, ctx.currentIndent + "<feImage x=\"" + bounds.left + "\" y=\"" + bounds.top + "\"" +
' preserveAspectRatio="none"' +
' width="' + (bounds.right - bounds.left) + '" height="' + (bounds.bottom - bounds.top) + '"' +
' xlink:href="data:image/svg+xml;base64,' + base64 + '"/>');
writeFeComposite(ctx, 'in', {in2: 'SourceGraphic'});
writeFeBlend(ctx, gradientFill.mode, {in2: param.pass, result: 'gradientFill'});
param.pass = 'gradientFill';

return JSON.stringify({ l: bounds.left, r: bounds.right, t: bounds.top, b: bounds.bottom, mo: gradientFill.mode, base: base64 });

gradientFillMulti.forEach(function (ele) {
if (!ele.enabled || !self.hasColorNoise(ele)) {
return;
}
var num = specifies.length,
ind = num ? '-' + num : '',
input = param.pass;

specifies.push(writeGradientFill(ctx, ele));
param.pass = 'gradientFill' + ind;
writeFeBlend(ctx, ele.mode, {in2: input, result: param.pass});
});

return JSON.stringify(specifies);
};

this.externalizeColorOverlay = function (ctx, param) {
Expand Down
111 changes: 55 additions & 56 deletions tests/data/gradient-color-overlay-om.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,62 +26,6 @@ module.exports = {
}
},
"fx": {
"gradientFill": {
"enabled": true,
"mode": "normal",
"opacity": {
"value": 100,
"units": "percentUnit"
},
"gradient": {
"stops": [
{
"position": 0,
"color": {
"r": 41.003892,
"g": 10,
"b": 89.003893,
"a": 1
}
},
{
"position": 100,
"color": {
"r": 255,
"g": 124,
"b": 0,
"a": 1
}
}
],
"scale": 1,
"type": "linear",
"angle": 90,
"gradientSpace": "objectBoundingBox"
},
"angle": {
"value": 90,
"units": "angleUnit"
},
"type": "linear",
"reverse": false,
"dither": false,
"align": true,
"scale": {
"value": 100,
"units": "percentUnit"
},
"offset": {
"horizontal": {
"value": 0,
"units": "percentUnit"
},
"vertical": {
"value": 0,
"units": "percentUnit"
}
}
},
"solidFillMulti": [
{
"enabled": true,
Expand All @@ -94,6 +38,61 @@ module.exports = {
"a": 1
}
}
],
"gradientFillMulti": [
{
"enabled": true,
"mode": "normal",
"opacity": 1,
"gradient": {
"stops": [
{
"position": 0,
"color": {
"r": 41.003892,
"g": 10,
"b": 89.003893,
"a": 1
}
},
{
"position": 100,
"color": {
"r": 255,
"g": 124,
"b": 0,
"a": 1
}
}
],
"scale": 1,
"type": "linear",
"angle": 90,
"gradientSpace": "objectBoundingBox"
},
"angle": {
"value": 90,
"units": "angleUnit"
},
"type": "linear",
"reverse": false,
"dither": false,
"align": true,
"scale": {
"value": 100,
"units": "percentUnit"
},
"offset": {
"horizontal": {
"value": 0,
"units": "percentUnit"
},
"vertical": {
"value": 0,
"units": "percentUnit"
}
}
}
]
}
},
Expand Down
2 changes: 1 addition & 1 deletion tests/data/gradient-color-overlay.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 94d919c

Please sign in to comment.