You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.8 KiB
101 lines
3.8 KiB
import { __extends } from "tslib";
|
|
import Definable from './Definable';
|
|
var ShadowManager = (function (_super) {
|
|
__extends(ShadowManager, _super);
|
|
function ShadowManager(zrId, svgRoot) {
|
|
var _this = _super.call(this, zrId, svgRoot, ['filter'], '__filter_in_use__', '_shadowDom') || this;
|
|
_this._shadowDomMap = {};
|
|
_this._shadowDomPool = [];
|
|
return _this;
|
|
}
|
|
ShadowManager.prototype._getFromPool = function () {
|
|
var shadowDom = this._shadowDomPool.pop();
|
|
if (!shadowDom) {
|
|
shadowDom = this.createElement('filter');
|
|
shadowDom.setAttribute('id', 'zr' + this._zrId + '-shadow-' + this.nextId++);
|
|
var domChild = this.createElement('feDropShadow');
|
|
shadowDom.appendChild(domChild);
|
|
this.addDom(shadowDom);
|
|
}
|
|
return shadowDom;
|
|
};
|
|
ShadowManager.prototype.update = function (svgElement, displayable) {
|
|
var style = displayable.style;
|
|
if (hasShadow(style)) {
|
|
var shadowKey = getShadowKey(displayable);
|
|
var shadowDom = displayable._shadowDom = this._shadowDomMap[shadowKey];
|
|
if (!shadowDom) {
|
|
shadowDom = this._getFromPool();
|
|
this._shadowDomMap[shadowKey] = shadowDom;
|
|
}
|
|
this.updateDom(svgElement, displayable, shadowDom);
|
|
}
|
|
else {
|
|
this.remove(svgElement, displayable);
|
|
}
|
|
};
|
|
ShadowManager.prototype.remove = function (svgElement, displayable) {
|
|
if (displayable._shadowDom != null) {
|
|
displayable._shadowDom = null;
|
|
svgElement.style.filter = '';
|
|
}
|
|
};
|
|
ShadowManager.prototype.updateDom = function (svgElement, displayable, shadowDom) {
|
|
var domChild = shadowDom.children[0];
|
|
var style = displayable.style;
|
|
var globalScale = displayable.getGlobalScale();
|
|
var scaleX = globalScale[0];
|
|
var scaleY = globalScale[1];
|
|
if (!scaleX || !scaleY) {
|
|
return;
|
|
}
|
|
var offsetX = style.shadowOffsetX || 0;
|
|
var offsetY = style.shadowOffsetY || 0;
|
|
var blur = style.shadowBlur;
|
|
var color = style.shadowColor;
|
|
domChild.setAttribute('dx', offsetX / scaleX + '');
|
|
domChild.setAttribute('dy', offsetY / scaleY + '');
|
|
domChild.setAttribute('flood-color', color);
|
|
var stdDx = blur / 2 / scaleX;
|
|
var stdDy = blur / 2 / scaleY;
|
|
var stdDeviation = stdDx + ' ' + stdDy;
|
|
domChild.setAttribute('stdDeviation', stdDeviation);
|
|
shadowDom.setAttribute('x', '-100%');
|
|
shadowDom.setAttribute('y', '-100%');
|
|
shadowDom.setAttribute('width', '300%');
|
|
shadowDom.setAttribute('height', '300%');
|
|
displayable._shadowDom = shadowDom;
|
|
var id = shadowDom.getAttribute('id');
|
|
svgElement.style.filter = 'url(#' + id + ')';
|
|
};
|
|
ShadowManager.prototype.removeUnused = function () {
|
|
var defs = this.getDefs(false);
|
|
if (!defs) {
|
|
return;
|
|
}
|
|
var shadowDomsPool = this._shadowDomPool;
|
|
for (var key in this._shadowDomMap) {
|
|
var dom = this._shadowDomMap[key];
|
|
shadowDomsPool.push(dom);
|
|
}
|
|
this._shadowDomMap = {};
|
|
};
|
|
return ShadowManager;
|
|
}(Definable));
|
|
export default ShadowManager;
|
|
function hasShadow(style) {
|
|
return style
|
|
&& (style.shadowBlur || style.shadowOffsetX || style.shadowOffsetY);
|
|
}
|
|
function getShadowKey(displayable) {
|
|
var style = displayable.style;
|
|
var globalScale = displayable.getGlobalScale();
|
|
return [
|
|
style.shadowColor,
|
|
(style.shadowBlur || 0).toFixed(2),
|
|
(style.shadowOffsetX || 0).toFixed(2),
|
|
(style.shadowOffsetY || 0).toFixed(2),
|
|
globalScale[0],
|
|
globalScale[1]
|
|
].join(',');
|
|
}
|
|
|