HBaseElement.js 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. import {
  2. styleDiv,
  3. } from '../../utils/common';
  4. import createNS from '../../utils/helpers/svg_elements';
  5. import createTag from '../../utils/helpers/html_elements';
  6. import BaseRenderer from '../../renderers/BaseRenderer';
  7. import SVGBaseElement from '../svgElements/SVGBaseElement';
  8. import CVEffects from '../canvasElements/CVEffects';
  9. import MaskElement from '../../mask';
  10. function HBaseElement() {}
  11. HBaseElement.prototype = {
  12. checkBlendMode: function () {},
  13. initRendererElement: function () {
  14. this.baseElement = createTag(this.data.tg || 'div');
  15. if (this.data.hasMask) {
  16. this.svgElement = createNS('svg');
  17. this.layerElement = createNS('g');
  18. this.maskedElement = this.layerElement;
  19. this.svgElement.appendChild(this.layerElement);
  20. this.baseElement.appendChild(this.svgElement);
  21. } else {
  22. this.layerElement = this.baseElement;
  23. }
  24. styleDiv(this.baseElement);
  25. },
  26. createContainerElements: function () {
  27. this.renderableEffectsManager = new CVEffects(this);
  28. this.transformedElement = this.baseElement;
  29. this.maskedElement = this.layerElement;
  30. if (this.data.ln) {
  31. this.layerElement.setAttribute('id', this.data.ln);
  32. }
  33. if (this.data.cl) {
  34. this.layerElement.setAttribute('class', this.data.cl);
  35. }
  36. if (this.data.bm !== 0) {
  37. this.setBlendMode();
  38. }
  39. },
  40. renderElement: function () {
  41. var transformedElementStyle = this.transformedElement ? this.transformedElement.style : {};
  42. if (this.finalTransform._matMdf) {
  43. var matrixValue = this.finalTransform.mat.toCSS();
  44. transformedElementStyle.transform = matrixValue;
  45. transformedElementStyle.webkitTransform = matrixValue;
  46. }
  47. if (this.finalTransform._opMdf) {
  48. transformedElementStyle.opacity = this.finalTransform.mProp.o.v;
  49. }
  50. },
  51. renderFrame: function () {
  52. // If it is exported as hidden (data.hd === true) no need to render
  53. // If it is not visible no need to render
  54. if (this.data.hd || this.hidden) {
  55. return;
  56. }
  57. this.renderTransform();
  58. this.renderRenderable();
  59. this.renderElement();
  60. this.renderInnerContent();
  61. if (this._isFirstFrame) {
  62. this._isFirstFrame = false;
  63. }
  64. },
  65. destroy: function () {
  66. this.layerElement = null;
  67. this.transformedElement = null;
  68. if (this.matteElement) {
  69. this.matteElement = null;
  70. }
  71. if (this.maskManager) {
  72. this.maskManager.destroy();
  73. this.maskManager = null;
  74. }
  75. },
  76. createRenderableComponents: function () {
  77. this.maskManager = new MaskElement(this.data, this, this.globalData);
  78. },
  79. addEffects: function () {
  80. },
  81. setMatte: function () {},
  82. };
  83. HBaseElement.prototype.getBaseElement = SVGBaseElement.prototype.getBaseElement;
  84. HBaseElement.prototype.destroyBaseElement = HBaseElement.prototype.destroy;
  85. HBaseElement.prototype.buildElementParenting = BaseRenderer.prototype.buildElementParenting;
  86. export default HBaseElement;