101 lines
3.7 KiB
JavaScript
101 lines
3.7 KiB
JavaScript
import {
|
|
degToRads,
|
|
createElementID,
|
|
} from '../../../utils/common';
|
|
import { getLocationHref } from '../../../main';
|
|
import {
|
|
extendPrototype,
|
|
} from '../../../utils/functionExtensions';
|
|
import DynamicPropertyContainer from '../../../utils/helpers/dynamicProperties';
|
|
import PropertyFactory from '../../../utils/PropertyFactory';
|
|
import createNS from '../../../utils/helpers/svg_elements';
|
|
import GradientProperty from '../../../utils/shapes/GradientProperty';
|
|
import {
|
|
lineCapEnum,
|
|
lineJoinEnum,
|
|
} from '../../../utils/helpers/shapeEnums';
|
|
|
|
function SVGGradientFillStyleData(elem, data, styleOb) {
|
|
this.initDynamicPropertyContainer(elem);
|
|
this.getValue = this.iterateDynamicProperties;
|
|
this.initGradientData(elem, data, styleOb);
|
|
}
|
|
|
|
SVGGradientFillStyleData.prototype.initGradientData = function (elem, data, styleOb) {
|
|
this.o = PropertyFactory.getProp(elem, data.o, 0, 0.01, this);
|
|
this.s = PropertyFactory.getProp(elem, data.s, 1, null, this);
|
|
this.e = PropertyFactory.getProp(elem, data.e, 1, null, this);
|
|
this.h = PropertyFactory.getProp(elem, data.h || { k: 0 }, 0, 0.01, this);
|
|
this.a = PropertyFactory.getProp(elem, data.a || { k: 0 }, 0, degToRads, this);
|
|
this.g = new GradientProperty(elem, data.g, this);
|
|
this.style = styleOb;
|
|
this.stops = [];
|
|
this.setGradientData(styleOb.pElem, data);
|
|
this.setGradientOpacity(data, styleOb);
|
|
this._isAnimated = !!this._isAnimated;
|
|
};
|
|
|
|
SVGGradientFillStyleData.prototype.setGradientData = function (pathElement, data) {
|
|
var gradientId = createElementID();
|
|
var gfill = createNS(data.t === 1 ? 'linearGradient' : 'radialGradient');
|
|
gfill.setAttribute('id', gradientId);
|
|
gfill.setAttribute('spreadMethod', 'pad');
|
|
gfill.setAttribute('gradientUnits', 'userSpaceOnUse');
|
|
var stops = [];
|
|
var stop;
|
|
var j;
|
|
var jLen;
|
|
jLen = data.g.p * 4;
|
|
for (j = 0; j < jLen; j += 4) {
|
|
stop = createNS('stop');
|
|
gfill.appendChild(stop);
|
|
stops.push(stop);
|
|
}
|
|
pathElement.setAttribute(data.ty === 'gf' ? 'fill' : 'stroke', 'url(' + getLocationHref() + '#' + gradientId + ')');
|
|
this.gf = gfill;
|
|
this.cst = stops;
|
|
};
|
|
|
|
SVGGradientFillStyleData.prototype.setGradientOpacity = function (data, styleOb) {
|
|
if (this.g._hasOpacity && !this.g._collapsable) {
|
|
var stop;
|
|
var j;
|
|
var jLen;
|
|
var mask = createNS('mask');
|
|
var maskElement = createNS('path');
|
|
mask.appendChild(maskElement);
|
|
var opacityId = createElementID();
|
|
var maskId = createElementID();
|
|
mask.setAttribute('id', maskId);
|
|
var opFill = createNS(data.t === 1 ? 'linearGradient' : 'radialGradient');
|
|
opFill.setAttribute('id', opacityId);
|
|
opFill.setAttribute('spreadMethod', 'pad');
|
|
opFill.setAttribute('gradientUnits', 'userSpaceOnUse');
|
|
jLen = data.g.k.k[0].s ? data.g.k.k[0].s.length : data.g.k.k.length;
|
|
var stops = this.stops;
|
|
for (j = data.g.p * 4; j < jLen; j += 2) {
|
|
stop = createNS('stop');
|
|
stop.setAttribute('stop-color', 'rgb(255,255,255)');
|
|
opFill.appendChild(stop);
|
|
stops.push(stop);
|
|
}
|
|
maskElement.setAttribute(data.ty === 'gf' ? 'fill' : 'stroke', 'url(' + getLocationHref() + '#' + opacityId + ')');
|
|
if (data.ty === 'gs') {
|
|
maskElement.setAttribute('stroke-linecap', lineCapEnum[data.lc || 2]);
|
|
maskElement.setAttribute('stroke-linejoin', lineJoinEnum[data.lj || 2]);
|
|
if (data.lj === 1) {
|
|
maskElement.setAttribute('stroke-miterlimit', data.ml);
|
|
}
|
|
}
|
|
this.of = opFill;
|
|
this.ms = mask;
|
|
this.ost = stops;
|
|
this.maskId = maskId;
|
|
styleOb.msElem = maskElement;
|
|
}
|
|
};
|
|
|
|
extendPrototype([DynamicPropertyContainer], SVGGradientFillStyleData);
|
|
|
|
export default SVGGradientFillStyleData;
|