@lumen5/lottie-web 5.14.0

package/player/js/elements/htmlElements/HCameraElement.js

@@ -0,0 +1,170 @@
+import {
+  degToRads,
+} from '../../utils/common';
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import PropertyFactory from '../../utils/PropertyFactory';
+import BaseElement from '../BaseElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import Matrix from '../../3rd_party/transformation-matrix';
+
+function HCameraElement(data, globalData, comp) {
+  this.initFrame();
+  this.initBaseData(data, globalData, comp);
+  this.initHierarchy();
+  var getProp = PropertyFactory.getProp;
+  this.pe = getProp(this, data.pe, 0, 0, this);
+  if (data.ks.p.s) {
+    this.px = getProp(this, data.ks.p.x, 1, 0, this);
+    this.py = getProp(this, data.ks.p.y, 1, 0, this);
+    this.pz = getProp(this, data.ks.p.z, 1, 0, this);
+  } else {
+    this.p = getProp(this, data.ks.p, 1, 0, this);
+  }
+  if (data.ks.a) {
+    this.a = getProp(this, data.ks.a, 1, 0, this);
+  }
+  if (data.ks.or.k.length && data.ks.or.k[0].to) {
+    var i;
+    var len = data.ks.or.k.length;
+    for (i = 0; i < len; i += 1) {
+      data.ks.or.k[i].to = null;
+      data.ks.or.k[i].ti = null;
+    }
+  }
+  this.or = getProp(this, data.ks.or, 1, degToRads, this);
+  this.or.sh = true;
+  this.rx = getProp(this, data.ks.rx, 0, degToRads, this);
+  this.ry = getProp(this, data.ks.ry, 0, degToRads, this);
+  this.rz = getProp(this, data.ks.rz, 0, degToRads, this);
+  this.mat = new Matrix();
+  this._prevMat = new Matrix();
+  this._isFirstFrame = true;
+
+  // TODO: find a better way to make the HCamera element to be compatible with the LayerInterface and TransformInterface.
+  this.finalTransform = {
+    mProp: this,
+  };
+}
+extendPrototype([BaseElement, FrameElement, HierarchyElement], HCameraElement);
+
+HCameraElement.prototype.setup = function () {
+  var i;
+  var len = this.comp.threeDElements.length;
+  var comp;
+  var perspectiveStyle;
+  var containerStyle;
+  for (i = 0; i < len; i += 1) {
+    // [perspectiveElem,container]
+    comp = this.comp.threeDElements[i];
+    if (comp.type === '3d') {
+      perspectiveStyle = comp.perspectiveElem.style;
+      containerStyle = comp.container.style;
+      var perspective = this.pe.v + 'px';
+      var origin = '0px 0px 0px';
+      var matrix = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)';
+      perspectiveStyle.perspective = perspective;
+      perspectiveStyle.webkitPerspective = perspective;
+      containerStyle.transformOrigin = origin;
+      containerStyle.mozTransformOrigin = origin;
+      containerStyle.webkitTransformOrigin = origin;
+      perspectiveStyle.transform = matrix;
+      perspectiveStyle.webkitTransform = matrix;
+    }
+  }
+};
+
+HCameraElement.prototype.createElements = function () {
+};
+
+HCameraElement.prototype.hide = function () {
+};
+
+HCameraElement.prototype.renderFrame = function () {
+  var _mdf = this._isFirstFrame;
+  var i;
+  var len;
+  if (this.hierarchy) {
+    len = this.hierarchy.length;
+    for (i = 0; i < len; i += 1) {
+      _mdf = this.hierarchy[i].finalTransform.mProp._mdf || _mdf;
+    }
+  }
+  if (_mdf || this.pe._mdf || (this.p && this.p._mdf) || (this.px && (this.px._mdf || this.py._mdf || this.pz._mdf)) || this.rx._mdf || this.ry._mdf || this.rz._mdf || this.or._mdf || (this.a && this.a._mdf)) {
+    this.mat.reset();
+
+    if (this.hierarchy) {
+      len = this.hierarchy.length - 1;
+      for (i = len; i >= 0; i -= 1) {
+        var mTransf = this.hierarchy[i].finalTransform.mProp;
+        this.mat.translate(-mTransf.p.v[0], -mTransf.p.v[1], mTransf.p.v[2]);
+        this.mat.rotateX(-mTransf.or.v[0]).rotateY(-mTransf.or.v[1]).rotateZ(mTransf.or.v[2]);
+        this.mat.rotateX(-mTransf.rx.v).rotateY(-mTransf.ry.v).rotateZ(mTransf.rz.v);
+        this.mat.scale(1 / mTransf.s.v[0], 1 / mTransf.s.v[1], 1 / mTransf.s.v[2]);
+        this.mat.translate(mTransf.a.v[0], mTransf.a.v[1], mTransf.a.v[2]);
+      }
+    }
+    if (this.p) {
+      this.mat.translate(-this.p.v[0], -this.p.v[1], this.p.v[2]);
+    } else {
+      this.mat.translate(-this.px.v, -this.py.v, this.pz.v);
+    }
+    if (this.a) {
+      var diffVector;
+      if (this.p) {
+        diffVector = [this.p.v[0] - this.a.v[0], this.p.v[1] - this.a.v[1], this.p.v[2] - this.a.v[2]];
+      } else {
+        diffVector = [this.px.v - this.a.v[0], this.py.v - this.a.v[1], this.pz.v - this.a.v[2]];
+      }
+      var mag = Math.sqrt(Math.pow(diffVector[0], 2) + Math.pow(diffVector[1], 2) + Math.pow(diffVector[2], 2));
+      // var lookDir = getNormalizedPoint(getDiffVector(this.a.v,this.p.v));
+      var lookDir = [diffVector[0] / mag, diffVector[1] / mag, diffVector[2] / mag];
+      var lookLengthOnXZ = Math.sqrt(lookDir[2] * lookDir[2] + lookDir[0] * lookDir[0]);
+      var mRotationX = (Math.atan2(lookDir[1], lookLengthOnXZ));
+      var mRotationY = (Math.atan2(lookDir[0], -lookDir[2]));
+      this.mat.rotateY(mRotationY).rotateX(-mRotationX);
+    }
+    this.mat.rotateX(-this.rx.v).rotateY(-this.ry.v).rotateZ(this.rz.v);
+    this.mat.rotateX(-this.or.v[0]).rotateY(-this.or.v[1]).rotateZ(this.or.v[2]);
+    this.mat.translate(this.globalData.compSize.w / 2, this.globalData.compSize.h / 2, 0);
+    this.mat.translate(0, 0, this.pe.v);
+
+    var hasMatrixChanged = !this._prevMat.equals(this.mat);
+    if ((hasMatrixChanged || this.pe._mdf) && this.comp.threeDElements) {
+      len = this.comp.threeDElements.length;
+      var comp;
+      var perspectiveStyle;
+      var containerStyle;
+      for (i = 0; i < len; i += 1) {
+        comp = this.comp.threeDElements[i];
+        if (comp.type === '3d') {
+          if (hasMatrixChanged) {
+            var matValue = this.mat.toCSS();
+            containerStyle = comp.container.style;
+            containerStyle.transform = matValue;
+            containerStyle.webkitTransform = matValue;
+          }
+          if (this.pe._mdf) {
+            perspectiveStyle = comp.perspectiveElem.style;
+            perspectiveStyle.perspective = this.pe.v + 'px';
+            perspectiveStyle.webkitPerspective = this.pe.v + 'px';
+          }
+        }
+      }
+      this.mat.clone(this._prevMat);
+    }
+  }
+  this._isFirstFrame = false;
+};
+
+HCameraElement.prototype.prepareFrame = function (num) {
+  this.prepareProperties(num, true);
+};
+
+HCameraElement.prototype.destroy = function () {
+};
+HCameraElement.prototype.getBaseElement = function () { return null; };
+
+export default HCameraElement;

package/player/js/elements/htmlElements/HCompElement.js

@@ -0,0 +1,61 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import {
+  createSizedArray,
+} from '../../utils/helpers/arrays';
+import PropertyFactory from '../../utils/PropertyFactory';
+import HybridRendererBase from '../../renderers/HybridRendererBase';
+import HBaseElement from './HBaseElement';
+import ICompElement from '../CompElement';
+import SVGCompElement from '../svgElements/SVGCompElement';
+
+function HCompElement(data, globalData, comp) {
+  this.layers = data.layers;
+  this.supports3d = !data.hasMask;
+  this.completeLayers = false;
+  this.pendingElements = [];
+  this.elements = this.layers ? createSizedArray(this.layers.length) : [];
+  this.initElement(data, globalData, comp);
+  this.tm = data.tm ? PropertyFactory.getProp(this, data.tm, 0, globalData.frameRate, this) : { _placeholder: true };
+}
+
+extendPrototype([HybridRendererBase, ICompElement, HBaseElement], HCompElement);
+HCompElement.prototype._createBaseContainerElements = HCompElement.prototype.createContainerElements;
+
+HCompElement.prototype.createContainerElements = function () {
+  this._createBaseContainerElements();
+  // divElement.style.clip = 'rect(0px, '+this.data.w+'px, '+this.data.h+'px, 0px)';
+  if (this.data.hasMask) {
+    this.svgElement.setAttribute('width', this.data.w);
+    this.svgElement.setAttribute('height', this.data.h);
+    this.transformedElement = this.baseElement;
+  } else {
+    this.transformedElement = this.layerElement;
+  }
+};
+
+HCompElement.prototype.addTo3dContainer = function (elem, pos) {
+  var j = 0;
+  var nextElement;
+  while (j < pos) {
+    if (this.elements[j] && this.elements[j].getBaseElement) {
+      nextElement = this.elements[j].getBaseElement();
+    }
+    j += 1;
+  }
+  if (nextElement) {
+    this.layerElement.insertBefore(elem, nextElement);
+  } else {
+    this.layerElement.appendChild(elem);
+  }
+};
+
+HCompElement.prototype.createComp = function (data) {
+  if (!this.supports3d) {
+    return new SVGCompElement(data, this.globalData, this);
+  }
+  return new HCompElement(data, this.globalData, this);
+};
+
+export default HCompElement;

package/player/js/elements/htmlElements/HEffects.js

@@ -0,0 +1,3 @@
+function HEffects() {
+}
+HEffects.prototype.renderFrame = function () {};

package/player/js/elements/htmlElements/HImageElement.js

@@ -0,0 +1,42 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import createNS from '../../utils/helpers/svg_elements';
+import RenderableElement from '../helpers/RenderableElement';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import HBaseElement from './HBaseElement';
+import HSolidElement from './HSolidElement';
+
+function HImageElement(data, globalData, comp) {
+  this.assetData = globalData.getAssetData(data.refId);
+  this.initElement(data, globalData, comp);
+}
+
+extendPrototype([BaseElement, TransformElement, HBaseElement, HSolidElement, HierarchyElement, FrameElement, RenderableElement], HImageElement);
+
+HImageElement.prototype.createContent = function () {
+  var assetPath = this.globalData.getAssetsPath(this.assetData);
+  var img = new Image();
+
+  if (this.data.hasMask) {
+    this.imageElem = createNS('image');
+    this.imageElem.setAttribute('width', this.assetData.w + 'px');
+    this.imageElem.setAttribute('height', this.assetData.h + 'px');
+    this.imageElem.setAttributeNS('http://www.w3.org/1999/xlink', 'href', assetPath);
+    this.layerElement.appendChild(this.imageElem);
+    this.baseElement.setAttribute('width', this.assetData.w);
+    this.baseElement.setAttribute('height', this.assetData.h);
+  } else {
+    this.layerElement.appendChild(img);
+  }
+  img.crossOrigin = 'anonymous';
+  img.src = assetPath;
+  if (this.data.ln) {
+    this.baseElement.setAttribute('id', this.data.ln);
+  }
+};
+
+export default HImageElement;

package/player/js/elements/htmlElements/HShapeElement.js

@@ -0,0 +1,261 @@
+import {
+  bmPow,
+  bmMax,
+  bmMin,
+  bmSqrt,
+} from '../../utils/common';
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import createNS from '../../utils/helpers/svg_elements';
+import RenderableElement from '../helpers/RenderableElement';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import HBaseElement from './HBaseElement';
+import HSolidElement from './HSolidElement';
+import SVGShapeElement from '../svgElements/SVGShapeElement';
+
+function HShapeElement(data, globalData, comp) {
+  // List of drawable elements
+  this.shapes = [];
+  // Full shape data
+  this.shapesData = data.shapes;
+  // List of styles that will be applied to shapes
+  this.stylesList = [];
+  // List of modifiers that will be applied to shapes
+  this.shapeModifiers = [];
+  // List of items in shape tree
+  this.itemsData = [];
+  // List of items in previous shape tree
+  this.processedElements = [];
+  // List of animated components
+  this.animatedContents = [];
+  this.shapesContainer = createNS('g');
+  this.initElement(data, globalData, comp);
+  // Moving any property that doesn't get too much access after initialization because of v8 way of handling more than 10 properties.
+  // List of elements that have been created
+  this.prevViewData = [];
+  this.currentBBox = {
+    x: 999999,
+    y: -999999,
+    h: 0,
+    w: 0,
+  };
+}
+extendPrototype([BaseElement, TransformElement, HSolidElement, SVGShapeElement, HBaseElement, HierarchyElement, FrameElement, RenderableElement], HShapeElement);
+HShapeElement.prototype._renderShapeFrame = HShapeElement.prototype.renderInnerContent;
+
+HShapeElement.prototype.createContent = function () {
+  var cont;
+  this.baseElement.style.fontSize = 0;
+  if (this.data.hasMask) {
+    this.layerElement.appendChild(this.shapesContainer);
+    cont = this.svgElement;
+  } else {
+    cont = createNS('svg');
+    var size = this.comp.data ? this.comp.data : this.globalData.compSize;
+    cont.setAttribute('width', size.w);
+    cont.setAttribute('height', size.h);
+    cont.appendChild(this.shapesContainer);
+    this.layerElement.appendChild(cont);
+  }
+
+  this.searchShapes(this.shapesData, this.itemsData, this.prevViewData, this.shapesContainer, 0, [], true);
+  this.filterUniqueShapes();
+  this.shapeCont = cont;
+};
+
+HShapeElement.prototype.getTransformedPoint = function (transformers, point) {
+  var i;
+  var len = transformers.length;
+  for (i = 0; i < len; i += 1) {
+    point = transformers[i].mProps.v.applyToPointArray(point[0], point[1], 0);
+  }
+  return point;
+};
+
+HShapeElement.prototype.calculateShapeBoundingBox = function (item, boundingBox) {
+  var shape = item.sh.v;
+  var transformers = item.transformers;
+  var i;
+  var len = shape._length;
+  var vPoint;
+  var oPoint;
+  var nextIPoint;
+  var nextVPoint;
+  if (len <= 1) {
+    return;
+  }
+  for (i = 0; i < len - 1; i += 1) {
+    vPoint = this.getTransformedPoint(transformers, shape.v[i]);
+    oPoint = this.getTransformedPoint(transformers, shape.o[i]);
+    nextIPoint = this.getTransformedPoint(transformers, shape.i[i + 1]);
+    nextVPoint = this.getTransformedPoint(transformers, shape.v[i + 1]);
+    this.checkBounds(vPoint, oPoint, nextIPoint, nextVPoint, boundingBox);
+  }
+  if (shape.c) {
+    vPoint = this.getTransformedPoint(transformers, shape.v[i]);
+    oPoint = this.getTransformedPoint(transformers, shape.o[i]);
+    nextIPoint = this.getTransformedPoint(transformers, shape.i[0]);
+    nextVPoint = this.getTransformedPoint(transformers, shape.v[0]);
+    this.checkBounds(vPoint, oPoint, nextIPoint, nextVPoint, boundingBox);
+  }
+};
+
+HShapeElement.prototype.checkBounds = function (vPoint, oPoint, nextIPoint, nextVPoint, boundingBox) {
+  this.getBoundsOfCurve(vPoint, oPoint, nextIPoint, nextVPoint);
+  var bounds = this.shapeBoundingBox;
+  boundingBox.x = bmMin(bounds.left, boundingBox.x);
+  boundingBox.xMax = bmMax(bounds.right, boundingBox.xMax);
+  boundingBox.y = bmMin(bounds.top, boundingBox.y);
+  boundingBox.yMax = bmMax(bounds.bottom, boundingBox.yMax);
+};
+
+HShapeElement.prototype.shapeBoundingBox = {
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+};
+
+HShapeElement.prototype.tempBoundingBox = {
+  x: 0,
+  xMax: 0,
+  y: 0,
+  yMax: 0,
+  width: 0,
+  height: 0,
+};
+
+HShapeElement.prototype.getBoundsOfCurve = function (p0, p1, p2, p3) {
+  var bounds = [[p0[0], p3[0]], [p0[1], p3[1]]];
+
+  for (var a, b, c, t, b2ac, t1, t2, i = 0; i < 2; ++i) { // eslint-disable-line no-plusplus
+    b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i];
+    a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i];
+    c = 3 * p1[i] - 3 * p0[i];
+
+    b |= 0; // eslint-disable-line no-bitwise
+    a |= 0; // eslint-disable-line no-bitwise
+    c |= 0; // eslint-disable-line no-bitwise
+
+    if (a === 0 && b === 0) {
+      //
+    } else if (a === 0) {
+      t = -c / b;
+
+      if (t > 0 && t < 1) {
+        bounds[i].push(this.calculateF(t, p0, p1, p2, p3, i));
+      }
+    } else {
+      b2ac = b * b - 4 * c * a;
+
+      if (b2ac >= 0) {
+        t1 = (-b + bmSqrt(b2ac)) / (2 * a);
+        if (t1 > 0 && t1 < 1) bounds[i].push(this.calculateF(t1, p0, p1, p2, p3, i));
+        t2 = (-b - bmSqrt(b2ac)) / (2 * a);
+        if (t2 > 0 && t2 < 1) bounds[i].push(this.calculateF(t2, p0, p1, p2, p3, i));
+      }
+    }
+  }
+
+  this.shapeBoundingBox.left = bmMin.apply(null, bounds[0]);
+  this.shapeBoundingBox.top = bmMin.apply(null, bounds[1]);
+  this.shapeBoundingBox.right = bmMax.apply(null, bounds[0]);
+  this.shapeBoundingBox.bottom = bmMax.apply(null, bounds[1]);
+};
+
+HShapeElement.prototype.calculateF = function (t, p0, p1, p2, p3, i) {
+  return bmPow(1 - t, 3) * p0[i]
+        + 3 * bmPow(1 - t, 2) * t * p1[i]
+        + 3 * (1 - t) * bmPow(t, 2) * p2[i]
+        + bmPow(t, 3) * p3[i];
+};
+
+HShapeElement.prototype.calculateBoundingBox = function (itemsData, boundingBox) {
+  var i;
+  var len = itemsData.length;
+  for (i = 0; i < len; i += 1) {
+    if (itemsData[i] && itemsData[i].sh) {
+      this.calculateShapeBoundingBox(itemsData[i], boundingBox);
+    } else if (itemsData[i] && itemsData[i].it) {
+      this.calculateBoundingBox(itemsData[i].it, boundingBox);
+    } else if (itemsData[i] && itemsData[i].style && itemsData[i].w) {
+      this.expandStrokeBoundingBox(itemsData[i].w, boundingBox);
+    }
+  }
+};
+
+HShapeElement.prototype.expandStrokeBoundingBox = function (widthProperty, boundingBox) {
+  var width = 0;
+  if (widthProperty.keyframes) {
+    for (var i = 0; i < widthProperty.keyframes.length; i += 1) {
+      var kfw = widthProperty.keyframes[i].s;
+      if (kfw > width) {
+        width = kfw;
+      }
+    }
+    width *= widthProperty.mult;
+  } else {
+    width = widthProperty.v * widthProperty.mult;
+  }
+
+  boundingBox.x -= width;
+  boundingBox.xMax += width;
+  boundingBox.y -= width;
+  boundingBox.yMax += width;
+};
+
+HShapeElement.prototype.currentBoxContains = function (box) {
+  return this.currentBBox.x <= box.x
+    && this.currentBBox.y <= box.y
+    && this.currentBBox.width + this.currentBBox.x >= box.x + box.width
+    && this.currentBBox.height + this.currentBBox.y >= box.y + box.height;
+};
+
+HShapeElement.prototype.renderInnerContent = function () {
+  this._renderShapeFrame();
+
+  if (!this.hidden && (this._isFirstFrame || this._mdf)) {
+    var tempBoundingBox = this.tempBoundingBox;
+    var max = 999999;
+    tempBoundingBox.x = max;
+    tempBoundingBox.xMax = -max;
+    tempBoundingBox.y = max;
+    tempBoundingBox.yMax = -max;
+    this.calculateBoundingBox(this.itemsData, tempBoundingBox);
+    tempBoundingBox.width = tempBoundingBox.xMax < tempBoundingBox.x ? 0 : tempBoundingBox.xMax - tempBoundingBox.x;
+    tempBoundingBox.height = tempBoundingBox.yMax < tempBoundingBox.y ? 0 : tempBoundingBox.yMax - tempBoundingBox.y;
+    // var tempBoundingBox = this.shapeCont.getBBox();
+    if (this.currentBoxContains(tempBoundingBox)) {
+      return;
+    }
+    var changed = false;
+    if (this.currentBBox.w !== tempBoundingBox.width) {
+      this.currentBBox.w = tempBoundingBox.width;
+      this.shapeCont.setAttribute('width', tempBoundingBox.width);
+      changed = true;
+    }
+    if (this.currentBBox.h !== tempBoundingBox.height) {
+      this.currentBBox.h = tempBoundingBox.height;
+      this.shapeCont.setAttribute('height', tempBoundingBox.height);
+      changed = true;
+    }
+    if (changed || this.currentBBox.x !== tempBoundingBox.x || this.currentBBox.y !== tempBoundingBox.y) {
+      this.currentBBox.w = tempBoundingBox.width;
+      this.currentBBox.h = tempBoundingBox.height;
+      this.currentBBox.x = tempBoundingBox.x;
+      this.currentBBox.y = tempBoundingBox.y;
+
+      this.shapeCont.setAttribute('viewBox', this.currentBBox.x + ' ' + this.currentBBox.y + ' ' + this.currentBBox.w + ' ' + this.currentBBox.h);
+      var shapeStyle = this.shapeCont.style;
+      var shapeTransform = 'translate(' + this.currentBBox.x + 'px,' + this.currentBBox.y + 'px)';
+      shapeStyle.transform = shapeTransform;
+      shapeStyle.webkitTransform = shapeTransform;
+    }
+  }
+};
+
+export default HShapeElement;

package/player/js/elements/htmlElements/HSolidElement.js

@@ -0,0 +1,36 @@
+import {
+  extendPrototype,
+} from '../../utils/functionExtensions';
+import createNS from '../../utils/helpers/svg_elements';
+import createTag from '../../utils/helpers/html_elements';
+import BaseElement from '../BaseElement';
+import TransformElement from '../helpers/TransformElement';
+import HierarchyElement from '../helpers/HierarchyElement';
+import FrameElement from '../helpers/FrameElement';
+import RenderableDOMElement from '../helpers/RenderableDOMElement';
+import HBaseElement from './HBaseElement';
+
+function HSolidElement(data, globalData, comp) {
+  this.initElement(data, globalData, comp);
+}
+extendPrototype([BaseElement, TransformElement, HBaseElement, HierarchyElement, FrameElement, RenderableDOMElement], HSolidElement);
+
+HSolidElement.prototype.createContent = function () {
+  var rect;
+  if (this.data.hasMask) {
+    rect = createNS('rect');
+    rect.setAttribute('width', this.data.sw);
+    rect.setAttribute('height', this.data.sh);
+    rect.setAttribute('fill', this.data.sc);
+    this.svgElement.setAttribute('width', this.data.sw);
+    this.svgElement.setAttribute('height', this.data.sh);
+  } else {
+    rect = createTag('div');
+    rect.style.width = this.data.sw + 'px';
+    rect.style.height = this.data.sh + 'px';
+    rect.style.backgroundColor = this.data.sc;
+  }
+  this.layerElement.appendChild(rect);
+};
+
+export default HSolidElement;