ShadowManager.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. import { __extends } from "tslib";
  2. import Definable from './Definable.js';
  3. import { normalizeColor } from '../core.js';
  4. var ShadowManager = (function (_super) {
  5. __extends(ShadowManager, _super);
  6. function ShadowManager(zrId, svgRoot) {
  7. var _this = _super.call(this, zrId, svgRoot, ['filter'], '__filter_in_use__', '_shadowDom') || this;
  8. _this._shadowDomMap = {};
  9. _this._shadowDomPool = [];
  10. return _this;
  11. }
  12. ShadowManager.prototype._getFromPool = function () {
  13. var shadowDom = this._shadowDomPool.pop();
  14. if (!shadowDom) {
  15. shadowDom = this.createElement('filter');
  16. shadowDom.setAttribute('id', 'zr' + this._zrId + '-shadow-' + this.nextId++);
  17. var domChild = this.createElement('feDropShadow');
  18. shadowDom.appendChild(domChild);
  19. this.addDom(shadowDom);
  20. }
  21. return shadowDom;
  22. };
  23. ShadowManager.prototype.update = function (svgElement, displayable) {
  24. var style = displayable.style;
  25. if (hasShadow(style)) {
  26. var shadowKey = getShadowKey(displayable);
  27. var shadowDom = displayable._shadowDom = this._shadowDomMap[shadowKey];
  28. if (!shadowDom) {
  29. shadowDom = this._getFromPool();
  30. this._shadowDomMap[shadowKey] = shadowDom;
  31. }
  32. this.updateDom(svgElement, displayable, shadowDom);
  33. }
  34. else {
  35. this.remove(svgElement, displayable);
  36. }
  37. };
  38. ShadowManager.prototype.remove = function (svgElement, displayable) {
  39. if (displayable._shadowDom != null) {
  40. displayable._shadowDom = null;
  41. svgElement.removeAttribute('filter');
  42. }
  43. };
  44. ShadowManager.prototype.updateDom = function (svgElement, displayable, shadowDom) {
  45. var domChild = shadowDom.children[0];
  46. var style = displayable.style;
  47. var globalScale = displayable.getGlobalScale();
  48. var scaleX = globalScale[0];
  49. var scaleY = globalScale[1];
  50. if (!scaleX || !scaleY) {
  51. return;
  52. }
  53. var offsetX = style.shadowOffsetX || 0;
  54. var offsetY = style.shadowOffsetY || 0;
  55. var blur = style.shadowBlur;
  56. var normalizedColor = normalizeColor(style.shadowColor);
  57. domChild.setAttribute('dx', offsetX / scaleX + '');
  58. domChild.setAttribute('dy', offsetY / scaleY + '');
  59. domChild.setAttribute('flood-color', normalizedColor.color);
  60. domChild.setAttribute('flood-opacity', normalizedColor.opacity + '');
  61. var stdDx = blur / 2 / scaleX;
  62. var stdDy = blur / 2 / scaleY;
  63. var stdDeviation = stdDx + ' ' + stdDy;
  64. domChild.setAttribute('stdDeviation', stdDeviation);
  65. shadowDom.setAttribute('x', '-100%');
  66. shadowDom.setAttribute('y', '-100%');
  67. shadowDom.setAttribute('width', '300%');
  68. shadowDom.setAttribute('height', '300%');
  69. displayable._shadowDom = shadowDom;
  70. var id = shadowDom.getAttribute('id');
  71. svgElement.setAttribute('filter', 'url(#' + id + ')');
  72. };
  73. ShadowManager.prototype.removeUnused = function () {
  74. var defs = this.getDefs(false);
  75. if (!defs) {
  76. return;
  77. }
  78. var shadowDomsPool = this._shadowDomPool;
  79. var shadowDomMap = this._shadowDomMap;
  80. for (var key in shadowDomMap) {
  81. if (shadowDomMap.hasOwnProperty(key)) {
  82. shadowDomsPool.push(shadowDomMap[key]);
  83. }
  84. }
  85. this._shadowDomMap = {};
  86. };
  87. return ShadowManager;
  88. }(Definable));
  89. export default ShadowManager;
  90. function hasShadow(style) {
  91. return style
  92. && (style.shadowBlur || style.shadowOffsetX || style.shadowOffsetY);
  93. }
  94. function getShadowKey(displayable) {
  95. var style = displayable.style;
  96. var globalScale = displayable.getGlobalScale();
  97. return [
  98. style.shadowColor,
  99. (style.shadowBlur || 0).toFixed(2),
  100. (style.shadowOffsetX || 0).toFixed(2),
  101. (style.shadowOffsetY || 0).toFixed(2),
  102. globalScale[0],
  103. globalScale[1]
  104. ].join(',');
  105. }