@antv/l7-layers 2.9.32-alpha.3 → 2.9.32-alpha.4

package/es/Geometry/models/sprite.js

@@ -0,0 +1,301 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import { gl } from '@antv/l7-core';
+import { Version } from '@antv/l7-maps';
+import BaseModel from "../../core/BaseModel";
+
+/* babel-plugin-inline-import '../shaders/sprite_frag.glsl' */
+var spriteFrag = "\nuniform sampler2D u_texture;\nuniform float u_mapFlag;\nuniform float u_opacity;\n\nvarying vec3 v_Color;\nvarying float v_d;\n\nvoid main() {\n\n  if(v_d < 0.0) {\n    discard;\n  }\n\n  if(u_mapFlag > 0.0) {\n    gl_FragColor = texture2D(u_texture, gl_PointCoord);\n    gl_FragColor.a *= u_opacity;\n  } else {\n    gl_FragColor = vec4(v_Color, u_opacity);\n  }\n}\n";
+
+/* babel-plugin-inline-import '../shaders/sprite_vert.glsl' */
+var spriteVert = "precision highp float;\n\nattribute vec3 a_Position;\nattribute vec3 a_Color;\n\nuniform mat4 u_ModelMatrix;\nuniform mat4 u_Mvp;\nuniform float u_opacity;\nuniform float u_Scale;\nvarying vec3 v_Color;\nvarying float v_d;\n\n#pragma include \"projection\"\nvoid main() {\n   v_Color = a_Color;\n  \n   vec4 project_pos = project_position(vec4(a_Position, 1.0));\n\n   v_d = a_Position.z;\n\n   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x\n      gl_Position = u_Mvp * (vec4(project_pos.xy, a_Position.z, 1.0));\n   } else {\n      gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, a_Position.z, 1.0));\n   }\n\n   gl_PointSize = pow((u_Zoom - 1.0), 2.0) * u_Scale;\n}\n";
+var SPRITE_ANIMATE_DIR;
+
+(function (SPRITE_ANIMATE_DIR) {
+  SPRITE_ANIMATE_DIR["UP"] = "up";
+  SPRITE_ANIMATE_DIR["DOWN"] = "down";
+})(SPRITE_ANIMATE_DIR || (SPRITE_ANIMATE_DIR = {}));
+
+var SpriteModel = /*#__PURE__*/function (_BaseModel) {
+  _inherits(SpriteModel, _BaseModel);
+
+  var _super = _createSuper(SpriteModel);
+
+  function SpriteModel() {
+    var _this;
+
+    _classCallCheck(this, SpriteModel);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "planeGeometryUpdateTriangulation", function () {
+      var _ref = _this.layer.getLayerConfig(),
+          _ref$spriteBottom = _ref.spriteBottom,
+          spriteBottom = _ref$spriteBottom === void 0 ? -100000 : _ref$spriteBottom;
+
+      var updateZ = _this.spriteUpdate;
+      var bottomZ = spriteBottom;
+      var topZ = _this.spriteTop;
+
+      for (var i = 0; i < _this.positions.length; i += 5) {
+        if (_this.spriteAnimate === SPRITE_ANIMATE_DIR.UP) {
+          _this.positions[i + 2] += updateZ;
+
+          if (_this.positions[i + 2] > topZ) {
+            _this.positions[i + 2] = bottomZ;
+          }
+        } else {
+          _this.positions[i + 2] -= updateZ;
+
+          if (_this.positions[i + 2] < bottomZ) {
+            _this.positions[i + 2] = topZ;
+          }
+        }
+      }
+
+      return {
+        vertices: _this.positions,
+        indices: _this.indices,
+        size: 5
+      };
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "updateModel", function () {
+      // @ts-ignore
+      var attributes = _this.layer.createAttributes({
+        triangulation: _this.planeGeometryUpdateTriangulation
+      });
+
+      _this.layer.models.map(function (m) {
+        m.updateAttributes(attributes);
+      });
+
+      _this.layerService.throttleRenderLayers();
+
+      _this.timer = requestAnimationFrame(_this.updateModel);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "planeGeometryTriangulation", function () {
+      var _this2;
+
+      var _ref2 = _this.layer.getLayerConfig(),
+          _ref2$center = _ref2.center,
+          center = _ref2$center === void 0 ? [120, 30] : _ref2$center,
+          _ref2$spriteCount = _ref2.spriteCount,
+          spriteCount = _ref2$spriteCount === void 0 ? 100 : _ref2$spriteCount,
+          _ref2$spriteRadius = _ref2.spriteRadius,
+          spriteRadius = _ref2$spriteRadius === void 0 ? 10 : _ref2$spriteRadius;
+
+      var _this$initSprite = (_this2 = _this).initSprite.apply(_this2, [spriteRadius, spriteCount].concat(_toConsumableArray(center))),
+          indices = _this$initSprite.indices,
+          positions = _this$initSprite.positions;
+
+      _this.positions = positions;
+      _this.indices = indices;
+      return {
+        vertices: positions,
+        indices: indices,
+        size: 5
+      };
+    });
+
+    return _this;
+  }
+
+  _createClass(SpriteModel, [{
+    key: "initSprite",
+    value: function initSprite() {
+      var radius = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+      var spriteCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
+      var lng = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 120;
+      var lat = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 30;
+      var indices = [];
+      var positions = [];
+      var mapService = this.mapService;
+      var heightLimit = this.spriteAnimate === SPRITE_ANIMATE_DIR.UP ? -this.spriteTop : this.spriteTop;
+
+      for (var i = 0; i < spriteCount; i++) {
+        var height = Math.random() * heightLimit;
+        positions.push.apply(positions, _toConsumableArray(getPos(height)));
+      }
+
+      for (var _i = 0; _i < spriteCount; _i++) {
+        indices.push(_i);
+      }
+
+      function getPos(z) {
+        var randomX = radius * Math.random();
+        var randomY = radius * Math.random();
+        var x = -radius / 2 + randomX;
+        var y = -radius / 2 + randomY;
+
+        if (mapService.version === Version['GAODE2.x']) {
+          // @ts-ignore
+          var _ref3 = mapService.lngLatToCoord([x + lng, -y + lat]),
+              _ref4 = _slicedToArray(_ref3, 2),
+              a = _ref4[0],
+              b = _ref4[1];
+
+          return [a, b, z, 0, 0];
+        } else {
+          return [x + lng, -y + lat, z, 0, 0];
+        }
+      }
+
+      return {
+        indices: indices,
+        positions: positions
+      };
+    }
+  }, {
+    key: "getUninforms",
+    value: function getUninforms() {
+      var _ref5 = this.layer.getLayerConfig(),
+          opacity = _ref5.opacity,
+          mapTexture = _ref5.mapTexture,
+          _ref5$spriteScale = _ref5.spriteScale,
+          spriteScale = _ref5$spriteScale === void 0 ? 1 : _ref5$spriteScale;
+
+      if (this.mapTexture !== mapTexture) {
+        var _this$texture;
+
+        this.mapTexture = mapTexture;
+        (_this$texture = this.texture) === null || _this$texture === void 0 ? void 0 : _this$texture.destroy();
+        this.updateTexture(mapTexture);
+      }
+
+      return {
+        u_opacity: opacity || 1,
+        u_mapFlag: mapTexture ? 1 : 0,
+        u_texture: this.texture,
+        u_Scale: spriteScale
+      };
+    }
+  }, {
+    key: "clearModels",
+    value: function clearModels() {
+      var _this$texture2;
+
+      cancelAnimationFrame(this.timer);
+      (_this$texture2 = this.texture) === null || _this$texture2 === void 0 ? void 0 : _this$texture2.destroy();
+    }
+  }, {
+    key: "initModels",
+    value: function initModels(callbackModel) {
+      var _this3 = this;
+
+      var _ref6 = this.layer.getLayerConfig(),
+          mapTexture = _ref6.mapTexture,
+          _ref6$spriteTop = _ref6.spriteTop,
+          spriteTop = _ref6$spriteTop === void 0 ? 5000000 : _ref6$spriteTop,
+          _ref6$spriteUpdate = _ref6.spriteUpdate,
+          spriteUpdate = _ref6$spriteUpdate === void 0 ? 10000 : _ref6$spriteUpdate,
+          _ref6$spriteAnimate = _ref6.spriteAnimate,
+          spriteAnimate = _ref6$spriteAnimate === void 0 ? SPRITE_ANIMATE_DIR.DOWN : _ref6$spriteAnimate;
+
+      this.mapTexture = mapTexture;
+      this.spriteTop = spriteTop;
+      this.spriteUpdate = spriteUpdate;
+      spriteAnimate === 'up' ? this.spriteAnimate = SPRITE_ANIMATE_DIR.UP : this.spriteAnimate = SPRITE_ANIMATE_DIR.DOWN;
+      var createTexture2D = this.rendererService.createTexture2D;
+      this.texture = createTexture2D({
+        height: 0,
+        width: 0
+      });
+      this.updateTexture(mapTexture);
+      setTimeout(function () {
+        _this3.updateModel();
+      }, 100);
+      this.layer.buildLayerModel({
+        moduleName: 'geometrySprite',
+        vertexShader: spriteVert,
+        fragmentShader: spriteFrag,
+        triangulation: this.planeGeometryTriangulation,
+        primitive: gl.POINTS,
+        depth: {
+          enable: false
+        },
+        blend: this.getBlend()
+      }).then(function (model) {
+        callbackModel([model]);
+      }).catch(function (err) {
+        console.warn(err);
+        callbackModel([]);
+      });
+    }
+  }, {
+    key: "buildModels",
+    value: function buildModels(callbackModel) {
+      this.initModels(callbackModel);
+    }
+  }, {
+    key: "updateTexture",
+    value: function updateTexture(mapTexture) {
+      var _this4 = this;
+
+      var createTexture2D = this.rendererService.createTexture2D;
+
+      if (mapTexture) {
+        var img = new Image();
+        img.crossOrigin = 'anonymous';
+
+        img.onload = function () {
+          _this4.texture = createTexture2D({
+            data: img,
+            width: img.width,
+            height: img.height,
+            wrapS: gl.CLAMP_TO_EDGE,
+            wrapT: gl.CLAMP_TO_EDGE
+          });
+
+          _this4.layerService.reRender();
+        };
+
+        img.src = mapTexture;
+      } else {
+        this.texture = createTexture2D({
+          width: 0,
+          height: 0
+        });
+      }
+    }
+  }, {
+    key: "getConfigSchema",
+    value: function getConfigSchema() {
+      return {
+        properties: {
+          opacity: {
+            type: 'number',
+            minimum: 0,
+            maximum: 1
+          }
+        }
+      };
+    }
+  }, {
+    key: "registerBuiltinAttributes",
+    value: function registerBuiltinAttributes() {
+      return '';
+    }
+  }]);
+
+  return SpriteModel;
+}(BaseModel);
+
+export { SpriteModel as default };

package/es/Geometry/shaders/billboard_frag.glsl

@@ -0,0 +1,13 @@
+
+uniform sampler2D u_texture;
+uniform float u_opacity;
+
+varying vec3 v_Color;
+varying vec2 v_uv;
+
+#pragma include "picking"
+void main() {
+  gl_FragColor = texture2D(u_texture, vec2(v_uv.x, 1.0 - v_uv.y));
+  gl_FragColor.a *= u_opacity;
+  gl_FragColor = filterColor(gl_FragColor);
+}

package/es/Geometry/shaders/billboard_vert.glsl

@@ -0,0 +1,50 @@
+precision highp float;
+uniform mat4 u_ModelMatrix;
+uniform float u_raisingHeight: 0.0;
+uniform mat4 u_Mvp;
+uniform float u_opacity;
+uniform vec2 u_size: [1.0, 1.0];
+uniform mat2 u_RotateMatrix;
+
+attribute vec3 a_Extrude;
+attribute vec3 a_Position;
+attribute vec2 a_Uv;
+attribute vec3 a_Color;
+
+varying vec3 v_Color;
+varying vec2 v_uv;
+
+#pragma include "projection"
+#pragma include "picking"
+void main() {
+   vec3 extrude = a_Extrude;
+   v_Color = a_Color;
+   v_uv = a_Uv;
+
+   float raiseHeight = u_raisingHeight;
+   if(u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT || u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
+      float mapboxZoomScale = 4.0/pow(2.0, 21.0 - u_Zoom);
+      raiseHeight = u_raisingHeight * mapboxZoomScale;
+   }
+
+   // 计算经纬度点位坐标
+   vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));
+
+   // 计算绕 z 轴旋转后的偏移
+   vec2 offsetXY = project_pixel(u_RotateMatrix * vec2(extrude.x * u_size.x, 0.0));
+   // 绕 z 轴旋转
+   float x = project_pos.x + offsetXY.x;
+   float y = project_pos.y + offsetXY.y;
+   // z 轴不参与旋转
+   float z = project_pixel(extrude.y * u_size.y + raiseHeight);
+
+
+   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+      // gl_Position = u_Mvp * (vec4(project_pos.xy, a_Position.z, 1.0));
+      gl_Position = u_Mvp * (vec4(x, y, z, 1.0));
+   } else {
+      gl_Position = project_common_position_to_clipspace(vec4(x , y, z , 1.0));
+   }
+
+   setPickingColor(a_PickingColor);
+}

package/es/Geometry/shaders/plane_frag.glsl

@@ -0,0 +1,22 @@
+
+uniform sampler2D u_texture;
+uniform float u_mapFlag;
+uniform float u_opacity;
+
+varying vec3 v_Color;
+varying vec2 v_uv;
+varying float v_clip;
+
+#pragma include "picking"
+void main() {
+  // gl_FragColor = vec4(v_Color, u_opacity);
+  if(u_mapFlag > 0.0) {
+    gl_FragColor = texture2D(u_texture, vec2(v_uv.x, 1.0 - v_uv.y));
+    gl_FragColor.a *= u_opacity;
+  } else {
+    // gl_FragColor = vec4(v_uv, 0.0, u_opacity);
+    gl_FragColor = vec4(v_Color, u_opacity);
+  }
+  gl_FragColor.a *= v_clip;
+  gl_FragColor = filterColor(gl_FragColor);
+}

package/es/Geometry/shaders/plane_vert.glsl

@@ -0,0 +1,53 @@
+precision highp float;
+uniform mat4 u_ModelMatrix;
+
+uniform mat4 u_Mvp;
+uniform float u_opacity;
+uniform float u_terrainClipHeight;
+
+attribute vec3 a_Position;
+attribute vec2 a_Uv;
+attribute vec3 a_Color;
+
+varying vec3 v_Color;
+varying vec2 v_uv;
+varying float v_clip;
+
+#pragma include "projection"
+#pragma include "picking"
+void main() {
+   v_Color = a_Color;
+   v_uv = a_Uv;
+  
+   vec4 project_pos = project_position(vec4(a_Position, 1.0));
+
+   v_clip = 1.0;
+   if(a_Position.z < u_terrainClipHeight) {
+      v_clip = 0.0;
+   }
+  
+   // gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy,0., 1.0));
+
+   // float x = 1.0;
+   // float y = 0.0;
+   // float z = 0.0;
+   // mat3 translateMatrix = mat3(
+   //    1.0, 0.0, 0.0 
+   //    0.0, 1.0, 0.0
+   //    -project_pos.x,    -project_pos.y,  1.0
+   // );
+   //  mat4 translateMatrix = mat4(
+   //    1.0, 0.0, 0.0, 0.0 ,
+   //    0.0, 1.0, 0.0, 0.0,
+   //    0.0, 0.0, 1.0, 0.0,
+   //    1.0, 0.0, 0.0, 1.0
+   // );
+
+   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+      gl_Position = u_Mvp * (vec4(project_pos.xy, a_Position.z, 1.0));
+   } else {
+      gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, a_Position.z, 1.0));
+   }
+
+   setPickingColor(a_PickingColor);
+}

package/es/Geometry/shaders/sprite_frag.glsl

@@ -0,0 +1,21 @@
+
+uniform sampler2D u_texture;
+uniform float u_mapFlag;
+uniform float u_opacity;
+
+varying vec3 v_Color;
+varying float v_d;
+
+void main() {
+
+  if(v_d < 0.0) {
+    discard;
+  }
+
+  if(u_mapFlag > 0.0) {
+    gl_FragColor = texture2D(u_texture, gl_PointCoord);
+    gl_FragColor.a *= u_opacity;
+  } else {
+    gl_FragColor = vec4(v_Color, u_opacity);
+  }
+}

package/es/Geometry/shaders/sprite_vert.glsl

@@ -0,0 +1,28 @@
+precision highp float;
+
+attribute vec3 a_Position;
+attribute vec3 a_Color;
+
+uniform mat4 u_ModelMatrix;
+uniform mat4 u_Mvp;
+uniform float u_opacity;
+uniform float u_Scale;
+varying vec3 v_Color;
+varying float v_d;
+
+#pragma include "projection"
+void main() {
+   v_Color = a_Color;
+  
+   vec4 project_pos = project_position(vec4(a_Position, 1.0));
+
+   v_d = a_Position.z;
+
+   if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) { // gaode2.x
+      gl_Position = u_Mvp * (vec4(project_pos.xy, a_Position.z, 1.0));
+   } else {
+      gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy, a_Position.z, 1.0));
+   }
+
+   gl_PointSize = pow((u_Zoom - 1.0), 2.0) * u_Scale;
+}

package/es/canvas/index.d.ts

@@ -0,0 +1,23 @@
+import BaseLayer from '../core/BaseLayer';
+import { ILayer } from '@antv/l7-core';
+import { ICanvasLayerStyleOptions } from '../core/interface';
+import { CanvasModelType } from './models/index';
+export default class CanvasLayer extends BaseLayer<ICanvasLayerStyleOptions> {
+    type: string;
+    forceRender: boolean;
+    buildModels(): void;
+    rebuildModels(): void;
+    hide(): ILayer;
+    renderModels(): this;
+    protected getConfigSchema(): {
+        properties: {
+            opacity: {
+                type: string;
+                minimum: number;
+                maximum: number;
+            };
+        };
+    };
+    protected getDefaultConfig(): {};
+    protected getModelType(): CanvasModelType;
+}

package/es/canvas/index.js

@@ -0,0 +1,121 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import BaseLayer from "../core/BaseLayer";
+import CanvasModels from "./models/index";
+
+var CanvasLayer = /*#__PURE__*/function (_BaseLayer) {
+  _inherits(CanvasLayer, _BaseLayer);
+
+  var _super = _createSuper(CanvasLayer);
+
+  function CanvasLayer() {
+    var _this;
+
+    _classCallCheck(this, CanvasLayer);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "type", 'CanvasLayer');
+
+    _defineProperty(_assertThisInitialized(_this), "forceRender", true);
+
+    return _this;
+  }
+
+  _createClass(CanvasLayer, [{
+    key: "buildModels",
+    value: function buildModels() {
+      var _this2 = this;
+
+      var modelType = this.getModelType();
+      this.layerModel = new CanvasModels[modelType](this);
+      this.layerModel.initModels(function (models) {
+        _this2.dispatchModelLoad(models);
+      });
+    }
+  }, {
+    key: "rebuildModels",
+    value: function rebuildModels() {
+      var _this3 = this;
+
+      this.layerModel.buildModels(function (models) {
+        _this3.dispatchModelLoad(models);
+      });
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      var _this$layerModel;
+
+      // 清除画布
+      this.layerModel.clearCanvas && ((_this$layerModel = this.layerModel) === null || _this$layerModel === void 0 ? void 0 : _this$layerModel.clearCanvas());
+      this.updateLayerConfig({
+        visible: false
+      });
+      this.reRender();
+      return this;
+    }
+  }, {
+    key: "renderModels",
+    value: function renderModels() {
+      var _this$layerModel2,
+          _this4 = this;
+
+      if (this !== null && this !== void 0 && (_this$layerModel2 = this.layerModel) !== null && _this$layerModel2 !== void 0 && _this$layerModel2.renderUpdate) {
+        this.layerModel.renderUpdate();
+      }
+
+      this.models.forEach(function (model) {
+        model.draw({
+          uniforms: _this4.layerModel.getUninforms()
+        }, false);
+      });
+      return this;
+    }
+  }, {
+    key: "getConfigSchema",
+    value: function getConfigSchema() {
+      return {
+        properties: {
+          opacity: {
+            type: 'number',
+            minimum: 0,
+            maximum: 1
+          }
+        }
+      };
+    }
+  }, {
+    key: "getDefaultConfig",
+    value: function getDefaultConfig() {
+      var type = this.getModelType();
+      var defaultConfig = {
+        canvas: {}
+      };
+      return defaultConfig[type];
+    }
+  }, {
+    key: "getModelType",
+    value: function getModelType() {
+      return 'canvas';
+    }
+  }]);
+
+  return CanvasLayer;
+}(BaseLayer);
+
+export { CanvasLayer as default };

package/es/canvas/models/canvas.d.ts

@@ -0,0 +1,18 @@
+import BaseModel from '../../core/BaseModel';
+import { CanvasUpdateType } from '../../core/interface';
+export default class CanvaModel extends BaseModel {
+    protected updateMode: CanvasUpdateType;
+    protected canvas: HTMLCanvasElement;
+    protected ctx: CanvasRenderingContext2D;
+    protected prevSize: [number, number];
+    renderUpdate: () => void;
+    unBindListener: () => void;
+    bindListener: () => void;
+    clearModels(): void;
+    initModels(): never[];
+    initCanvas(): void;
+    clearCanvas: () => void;
+    renderCanvas: () => void;
+    buildModels(): never[];
+    protected registerBuiltinAttributes(): void;
+}