123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- import {
- createElementID,
- } from '../../../utils/common';
- import createNS from '../../../utils/helpers/svg_elements';
- var _svgMatteSymbols = [];
- function SVGMatte3Effect(filterElem, filterManager, elem) {
- this.initialized = false;
- this.filterManager = filterManager;
- this.filterElem = filterElem;
- this.elem = elem;
- elem.matteElement = createNS('g');
- elem.matteElement.appendChild(elem.layerElement);
- elem.matteElement.appendChild(elem.transformedElement);
- elem.baseElement = elem.matteElement;
- }
- SVGMatte3Effect.prototype.findSymbol = function (mask) {
- var i = 0;
- var len = _svgMatteSymbols.length;
- while (i < len) {
- if (_svgMatteSymbols[i] === mask) {
- return _svgMatteSymbols[i];
- }
- i += 1;
- }
- return null;
- };
- SVGMatte3Effect.prototype.replaceInParent = function (mask, symbolId) {
- var parentNode = mask.layerElement.parentNode;
- if (!parentNode) {
- return;
- }
- var children = parentNode.children;
- var i = 0;
- var len = children.length;
- while (i < len) {
- if (children[i] === mask.layerElement) {
- break;
- }
- i += 1;
- }
- var nextChild;
- if (i <= len - 2) {
- nextChild = children[i + 1];
- }
- var useElem = createNS('use');
- useElem.setAttribute('href', '#' + symbolId);
- if (nextChild) {
- parentNode.insertBefore(useElem, nextChild);
- } else {
- parentNode.appendChild(useElem);
- }
- };
- SVGMatte3Effect.prototype.setElementAsMask = function (elem, mask) {
- if (!this.findSymbol(mask)) {
- var symbolId = createElementID();
- var masker = createNS('mask');
- masker.setAttribute('id', mask.layerId);
- masker.setAttribute('mask-type', 'alpha');
- _svgMatteSymbols.push(mask);
- var defs = elem.globalData.defs;
- defs.appendChild(masker);
- var symbol = createNS('symbol');
- symbol.setAttribute('id', symbolId);
- this.replaceInParent(mask, symbolId);
- symbol.appendChild(mask.layerElement);
- defs.appendChild(symbol);
- var useElem = createNS('use');
- useElem.setAttribute('href', '#' + symbolId);
- masker.appendChild(useElem);
- mask.data.hd = false;
- mask.show();
- }
- elem.setMatte(mask.layerId);
- };
- SVGMatte3Effect.prototype.initialize = function () {
- var ind = this.filterManager.effectElements[0].p.v;
- var elements = this.elem.comp.elements;
- var i = 0;
- var len = elements.length;
- while (i < len) {
- if (elements[i] && elements[i].data.ind === ind) {
- this.setElementAsMask(this.elem, elements[i]);
- }
- i += 1;
- }
- this.initialized = true;
- };
- SVGMatte3Effect.prototype.renderFrame = function () {
- if (!this.initialized) {
- this.initialize();
- }
- };
- export default SVGMatte3Effect;
|