index.js

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('karas')) :
  typeof define === 'function' && define.amd ? define(['exports', 'karas'], factory) :
  (global = global || self, factory(global.karas = {}, global.karas));
}(this, (function (exports, karas) { 'use strict';

  karas = karas && Object.prototype.hasOwnProperty.call(karas, 'default') ? karas['default'] : karas;

  function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  }

  function _defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    Object.defineProperty(Constructor, "prototype", {
      writable: false
    });
    return Constructor;
  }

  function _defineProperty(obj, key, value) {
    if (key in obj) {
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
      });
    } else {
      obj[key] = value;
    }

    return obj;
  }

  function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
      throw new TypeError("Super expression must either be null or a function");
    }

    subClass.prototype = Object.create(superClass && superClass.prototype, {
      constructor: {
        value: subClass,
        writable: true,
        configurable: true
      }
    });
    Object.defineProperty(subClass, "prototype", {
      writable: false
    });
    if (superClass) _setPrototypeOf(subClass, superClass);
  }

  function _getPrototypeOf(o) {
    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
      return o.__proto__ || Object.getPrototypeOf(o);
    };
    return _getPrototypeOf(o);
  }

  function _setPrototypeOf(o, p) {
    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
      o.__proto__ = p;
      return o;
    };

    return _setPrototypeOf(o, p);
  }

  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;
    }
  }

  function _assertThisInitialized(self) {
    if (self === void 0) {
      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }

    return self;
  }

  function _possibleConstructorReturn(self, call) {
    if (call && (typeof call === "object" || typeof call === "function")) {
      return call;
    } else if (call !== void 0) {
      throw new TypeError("Derived constructors may only return object or undefined");
    }

    return _assertThisInitialized(self);
  }

  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 _superPropBase(object, property) {
    while (!Object.prototype.hasOwnProperty.call(object, property)) {
      object = _getPrototypeOf(object);
      if (object === null) break;
    }

    return object;
  }

  function _get() {
    if (typeof Reflect !== "undefined" && Reflect.get) {
      _get = Reflect.get;
    } else {
      _get = function _get(target, property, receiver) {
        var base = _superPropBase(target, property);

        if (!base) return;
        var desc = Object.getOwnPropertyDescriptor(base, property);

        if (desc.get) {
          return desc.get.call(arguments.length < 3 ? target : receiver);
        }

        return desc.value;
      };
    }

    return _get.apply(this, arguments);
  }

  var version = "0.72.3";

  var toString = {}.toString;
  var isFunction = function isFunction(obj) {
    return toString.call(obj) === '[object CallbackFunction]' || toString.call(obj) === '[object Function]';
  };

  var CANVAS = {};
  function injectCanvas1(karas, createVd, Root) {
    var newRoot = /*#__PURE__*/function (_Root) {
      _inherits(newRoot, _Root);

      var _super = _createSuper(newRoot);

      function newRoot() {
        _classCallCheck(this, newRoot);

        return _super.apply(this, arguments);
      }

      _createClass(newRoot, [{
        key: "refresh",
        value: function refresh(cb, isFirst) {
          var self = this;
          var ctx = self.ctx; // 小程序bug，可能restore失败，刷新前手动restore下

          ctx.restore();

          function wrap() {
            ctx.draw && ctx.draw(true, function () {
              self.emit('myRefresh');
            });
          }

          _get(_getPrototypeOf(newRoot.prototype), "refresh", this).call(this, wrap, isFirst);
        }
      }]);

      return newRoot;
    }(Root);

    karas.createVd = function (tagName, props, children) {
      if (['canvas', 'svg'].indexOf(tagName) > -1) {
        return new newRoot(tagName, props, children);
      }

      return createVd(tagName, props, children);
    };

    var IMG = karas.inject.IMG;
    var INIT = karas.inject.INIT;
    var LOADING = karas.inject.LOADING;
    var LOADED = karas.inject.LOADED;

    karas.inject.checkSupportFontFamily = function () {
      return false;
    };

    karas.inject.measureImg = function (url, cb) {
      var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

      if (url.indexOf('data:') === 0) {
        var _options$width = options.width,
            width = _options$width === void 0 ? {} : _options$width,
            _options$height = options.height,
            height = _options$height === void 0 ? {} : _options$height;
        cb({
          success: true,
          width: width.value,
          height: height.value,
          url: url,
          source: url
        });
        return;
      }

      var cache = IMG[url] = IMG[url] || {
        state: INIT,
        task: []
      };

      if (cache.state === LOADED) {
        cb(cache);
      } else if (cache.state === LOADING) {
        cache.task.push(cb);
      } else {
        cache.state = LOADING;
        cache.task.push(cb);
        my.getImageInfo({
          src: url,
          success: function success(res) {
            cache.state = LOADED;
            cache.success = true;
            cache.width = res.width;
            cache.height = res.height;
            cache.source = url;
            cache.url = url;
            var list = cache.task.splice(0);
            list.forEach(function (cb) {
              return cb(cache);
            });
          },
          fail: function fail() {
            cache.state = LOADED;
            cache.success = false;
            cache.url = url;
            var list = cache.task.splice(0);
            list.forEach(function (cb) {
              return cb(cache);
            });
          }
        });
      }
    };

    karas.inject.isDom = function (o) {
      return o && (o.getContext || o.arc);
    };

    karas.inject.hasCacheCanvas = function (key) {
      return key && CANVAS.hasOwnProperty(key);
    };

    karas.inject.getCacheCanvas = function (w, h, key, message) {
      if (message) {
        key = message;
      } // console.log(message,CANVAS);


      if (!CANVAS[key]) {
        throw new Error('Need a cache canvas');
      }

      var o = CANVAS[key];
      return {
        ctx: o,
        canvas: o,
        draw: function draw() {
          o.draw(true);
        }
      };
    };

    karas.inject.setCacheCanvas = function (k, v) {
      CANVAS[k] = v;
    };

    karas.inject.releaseCacheCanvas = function (o) {
    };

    karas.inject.delCacheCanvas = function (key) {
      key && delete CANVAS[key];
    };
  }

  var CANVAS$1 = {};
  function injectCanvas1$1(karas, createVd, Root) {
    var newRoot = /*#__PURE__*/function (_Root) {
      _inherits(newRoot, _Root);

      var _super = _createSuper(newRoot);

      function newRoot() {
        _classCallCheck(this, newRoot);

        return _super.apply(this, arguments);
      }

      _createClass(newRoot, [{
        key: "refresh",
        value: function refresh(cb, isFirst) {
          var self = this;
          var ctx = self.ctx; // 小程序bug，可能restore失败，刷新前手动restore下

          ctx.restore();

          function wrap() {
            ctx.draw && ctx.draw(false, function () {
              self.emit('myRefresh');
            });
          }

          _get(_getPrototypeOf(newRoot.prototype), "refresh", this).call(this, wrap, isFirst);
        }
      }]);

      return newRoot;
    }(Root);

    karas.createVd = function (tagName, props, children) {
      if (['canvas', 'svg'].indexOf(tagName) > -1) {
        return new newRoot(tagName, props, children);
      }

      return createVd(tagName, props, children);
    };

    var IMG = karas.inject.IMG;
    var INIT = karas.inject.INIT;
    var LOADING = karas.inject.LOADING;
    var LOADED = karas.inject.LOADED;

    karas.inject.checkSupportFontFamily = function () {
      return false;
    };

    karas.inject.measureImg = function (url, cb) {
      var optinos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

      if (url.indexOf('data:') === 0) {
        var _optinos$width = optinos.width,
            width = _optinos$width === void 0 ? {} : _optinos$width,
            _optinos$height = optinos.height,
            height = _optinos$height === void 0 ? {} : _optinos$height;
        cb({
          success: true,
          width: width.value,
          height: height.value,
          url: url,
          source: url
        });
        return;
      }

      var cache = IMG[url] = IMG[url] || {
        state: INIT,
        task: []
      };

      if (cache.state === LOADED) {
        cb(cache);
      } else if (cache.state === LOADING) {
        cache.task.push(cb);
      } else {
        cache.state = LOADING;
        cache.task.push(cb);
        my.getImageInfo({
          src: url,
          success: function success(res) {
            cache.state = LOADED;
            cache.success = true;
            cache.width = res.width;
            cache.height = res.height;
            cache.source = url;
            cache.url = url;
            var list = cache.task.splice(0);
            list.forEach(function (cb) {
              return cb(cache);
            });
          },
          fail: function fail() {
            cache.state = LOADED;
            cache.success = false;
            cache.url = url;
            var list = cache.task.splice(0);
            list.forEach(function (cb) {
              return cb(cache);
            });
          }
        });
      }
    };

    karas.inject.isDom = function (o) {
      return o && (o.getContext || o.arc);
    };

    karas.inject.hasCacheCanvas = function (key) {
      return key && CANVAS$1.hasOwnProperty(key);
    };

    karas.inject.getCacheCanvas = function (w, h, key, message) {
      if (message) {
        key = message;
      } // console.log(message,CANVAS);


      if (!CANVAS$1[key]) {
        throw new Error('Need a cache canvas');
      }

      var o = CANVAS$1[key];
      return {
        ctx: o,
        canvas: o,
        draw: function draw() {
          o.draw(false);
        }
      };
    };

    karas.inject.setCacheCanvas = function (k, v) {
      CANVAS$1[k] = v;
    };

    karas.inject.releaseCacheCanvas = function (o) {
    };

    karas.inject.delCacheCanvas = function (key) {
      key && delete CANVAS$1[key];
    };
  }

  function recursion(dom, hash) {
    if (dom.tagName === 'img') {
      if (dom.src) {
        hash[dom.src] = true;
      }
    } else if (Array.isArray(dom.children)) {
      dom.children.forEach(function (item) {
        recursion(item, hash);
      });
    }

    var backgroundImage = dom.currentStyle[karas.enums.STYLE_KEY.BACKGROUND_IMAGE];

    if (backgroundImage && /url/i.test(backgroundImage)) {
      var url = /url(\([^)]+\))/.exec(backgroundImage);

      if (url) {
        hash[url[1]] = true;
      }
    }
  }

  var IMG_COUNTER = {};
  function injectCanvas2 () {
    var Root = /*#__PURE__*/function (_karas$Root) {
      _inherits(Root, _karas$Root);

      var _super = _createSuper(Root);

      function Root() {
        _classCallCheck(this, Root);

        return _super.apply(this, arguments);
      }

      _createClass(Root, [{
        key: "appendTo",
        value: function appendTo(dom) {
          if (dom && dom.getContext) {
            this.__dom = dom;
            this.__ctx = dom.getContext('2d');
          } else {
            this.__dom = dom.canvas;
            this.__ctx = dom;
          }

          this.__children = karas.builder.initRoot(this.__cd, this);

          this.__initProps();

          this.__root = this;
          this.cache = !!this.props.cache;
          this.__refreshLevel = karas.refresh.level.REFLOW;
          this.__renderMode = karas.mode.CANVAS;
          this.__defs = {
            clear: function clear() {}
          };
          this.refresh(null, true);

          if (this.__dom.__root) {
            this.__dom.__root.destroy();
          }

          this.__dom.root = this; // 收集img

          var imgHash = {};
          recursion(this, imgHash);
          var imgList = [];
          Object.keys(imgHash).forEach(function (url) {
            imgList.push(url);
            IMG_COUNTER[url] = IMG_COUNTER[url] || 0;
            IMG_COUNTER[url]++;
          });
          this.__imgList = imgList;
        }
      }, {
        key: "refresh",
        value: function refresh(cb, isFirst) {
          var self = this;

          function wrap() {
            self.emit('myRefresh');
          }

          _get(_getPrototypeOf(Root.prototype), "refresh", this).call(this, wrap, isFirst);
        }
      }, {
        key: "__destroy",
        value: function __destroy() {
          _get(_getPrototypeOf(Root.prototype), "__destroy", this).call(this);

          if (Array.isArray(this.__imgList)) {
            this.__imgList.forEach(function (url) {
              if (IMG_COUNTER[url]) {
                IMG_COUNTER[url]--;
              }

              if (!IMG_COUNTER[url]) {
                delete karas.inject.IMG[url];
              }
            });
          }
        }
      }]);

      return Root;
    }(karas.Root); // Root引用指过来


    var createVd = karas.createVd;

    karas.createVd = function (tagName, props, children) {
      if (['canvas', 'svg', 'webgl'].indexOf(tagName) > -1) {
        return new Root(tagName, props, children);
      }

      return createVd(tagName, props, children);
    };

    var IMG = karas.inject.IMG;
    var INIT = karas.inject.INIT;
    var LOADING = karas.inject.LOADING;
    var LOADED = karas.inject.LOADED;

    karas.inject.measureImg = function (url, cb) {
      var optinos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
      var _optinos$width = optinos.width,
          width = _optinos$width === void 0 ? 0 : _optinos$width,
          _optinos$height = optinos.height,
          height = _optinos$height === void 0 ? 0 : _optinos$height,
          ctx = optinos.ctx;
      var cache = IMG[url] = IMG[url] || {
        state: INIT,
        task: []
      };

      if (cache.state === LOADED) {
        cb(cache);
      } else if (cache.state === LOADING) {
        cache.task.push(cb);
      } else {
        cache.state = LOADING;
        cache.task.push(cb); // base64特殊处理

        if (url.indexOf('data:') === 0) {
          var img = ctx.canvas.createImage();

          img.onload = function () {
            cache.state = LOADED;
            cache.success = true;
            cache.width = width || img.width;
            cache.height = height || img.height;
            cache.source = img;
            cache.url = url;
            var list = cache.task.splice(0);
            list.forEach(function (cb) {
              return cb(cache);
            });
            img.onload = null;
            img.onerror = null;
          };

          img.onerror = function () {
            cache.state = LOADED;
            cache.success = false;
            cache.width = width || img.width;
            cache.height = height || img.height;
            cache.url = url;
            var list = cache.task.splice(0);
            list.forEach(function (cb) {
              return cb(cache);
            });
            img.onload = null;
            img.onerror = null;
          };

          img.src = url;
          return;
        }

        my.getImageInfo({
          src: url,
          success: function success(res) {
            var img = ctx.canvas.createImage();

            img.onload = function () {
              cache.state = LOADED;
              cache.success = true;
              cache.width = res.width || img.width;
              cache.height = res.height || img.height;
              cache.source = img;
              cache.url = url;
              var list = cache.task.splice(0);
              list.forEach(function (cb) {
                return cb(cache);
              });
              img.onload = null;
              img.onerror = null;
            };

            img.onerror = function () {
              cache.state = LOADED;
              cache.success = false;
              cache.width = res.width || img.width;
              cache.height = res.height || img.height;
              cache.url = url;
              var list = cache.task.splice(0);
              list.forEach(function (cb) {
                return cb(cache);
              });
              img.onload = null;
              img.onerror = null;
            };

            img.src = url;
          },
          fail: function fail() {
            var img = ctx.canvas.createImage();

            img.onload = function () {
              cache.state = LOADED;
              cache.success = true;
              cache.width = img.width;
              cache.height = img.height;
              cache.source = img;
              cache.url = url;
              var list = cache.task.splice(0);
              list.forEach(function (cb) {
                return cb(cache);
              });
              img.onload = null;
              img.onerror = null;
            };

            img.onerror = function () {
              cache.state = LOADED;
              cache.success = false;
              cache.width = img.width;
              cache.height = img.height;
              cache.url = url;
              var list = cache.task.splice(0);
              list.forEach(function (cb) {
                return cb(cache);
              });
              img.onload = null;
              img.onerror = null;
            };

            img.src = url; // cache.state = LOADED;
            // cache.success = false;
            // cache.url = url;
            // let list = cache.task.splice(0);
            // list.forEach(cb => cb(cache));
          }
        });
      }
    };

    karas.inject.isDom = function (o) {
      return o && (o.getContext || o.arc);
    };

    var CANVAS = {};
    var CANVAS_LIST = [];
    var WEBGL_LIST = [];

    function cache(key, width, height, hash, message) {
      var o;

      if (!key) {
        var target = hash === CANVAS ? CANVAS_LIST : WEBGL_LIST;

        if (target.length) {
          o = target.pop();
        } else {
          if (my.createOffscreenCanvas) {
            o = my.createOffscreenCanvas(width, height);
          } else {
            o = my._createOffscreenCanvas(width, height);
          }
        }
      } else if (!hash[key]) {
        if (my.createOffscreenCanvas) {
          o = hash[key] = my.createOffscreenCanvas(width, height);
        } else {
          o = hash[key] = my._createOffscreenCanvas(width, height);
        }
      } else {
        o = hash[key];
      }

      o.width = width;
      o.height = height;
      return {
        canvas: o,
        ctx: hash === CANVAS ? o.getContext('2d') : o.getContext('webgl') || o.getContext('experimental-webgl'),
        draw: function draw() {// 空函数，仅对小程序提供hook特殊处理，flush缓冲
        },
        available: true,
        release: function release() {
          if (!key) {
            if (hash === CANVAS) {
              CANVAS_LIST.push(this.canvas);
            } else {
              WEBGL_LIST.push(this.canvas);
            }
          }

          this.canvas = null;
          this.ctx = null;
        }
      };
    }

    function cacheCanvas(key, width, height, message) {
      return cache(key, width, height, CANVAS);
    }

    karas.inject.hasCacheCanvas = function (key) {
      return key && CANVAS.hasOwnProperty(key);
    };

    karas.inject.getCacheCanvas = function (width, height, key, message) {
      return cacheCanvas(key, width, height);
    };

    karas.inject.releaseCacheCanvas = function (o) {
      CANVAS_LIST.push(o);
    };

    karas.inject.delCacheCanvas = function (key) {
      key && delete CANVAS[key];
    };
  }

  karas.inject.requestAnimationFrame = function (cb) {
    return setTimeout(cb, 1000 / 60);
  };

  karas.myVersion = version;

  var Root = /*#__PURE__*/function (_karas$Root) {
    _inherits(Root, _karas$Root);

    var _super = _createSuper(Root);

    function Root() {
      _classCallCheck(this, Root);

      return _super.apply(this, arguments);
    }

    _createClass(Root, [{
      key: "onEvent",
      value: // 需要小程序内部监听事件手动调用
      function onEvent(e) {
        var _this = this;

        this.__wrapEvent(e, function (data) {
          _this.__emitEvent(data);
        });
      }
    }, {
      key: "__wrapEvent",
      value: function __wrapEvent(e, cb) {
        var _this$__ctx,
            _this$__dom,
            _this2 = this;

        var id = ((_this$__ctx = this.__ctx) === null || _this$__ctx === void 0 ? void 0 : _this$__ctx.id) || ((_this$__dom = this.__dom) === null || _this$__dom === void 0 ? void 0 : _this$__dom.id);
        id && my.createSelectorQuery().select("#".concat(id)).boundingClientRect().exec(function (ret) {
          var x, y;

          if (ret && ret[0] && e.detail) {
            var _e$detail = e.detail,
                clientX = _e$detail.clientX,
                clientY = _e$detail.clientY,
                ox = _e$detail.x,
                oy = _e$detail.y;
            var _ret$ = ret[0],
                left = _ret$.left,
                top = _ret$.top,
                width = _ret$.width,
                height = _ret$.height;
            var __scx = _this2.__scx,
                __scy = _this2.__scy;
            x = ox !== null && ox !== void 0 ? ox : clientX - left;
            y = oy !== null && oy !== void 0 ? oy : clientY - top;

            if (!karas.util.isNil(__scx)) {
              x /= __scx;
            } else {
              x *= _this2.width / width;
            }

            if (!karas.util.isNil(__scy)) {
              y /= __scy;
            } else {
              y *= _this2.height / height;
            }
          }

          cb({
            event: e,
            stopPropagation: function stopPropagation() {
              this.__stopPropagation = true;
            },
            stopImmediatePropagation: function stopImmediatePropagation() {
              this.__stopPropagation = true;
              this.__stopImmediatePropagation = true;
            },
            preventDefault: function preventDefault() {},
            x: x,
            y: y,
            __hasEmitted: false
          });
        });
      }
    }, {
      key: "appendTo",
      value: function appendTo(dom) {
        if (isFunction(dom.getContext)) {
          if (Root.__isCanvas2) {
            karas.inject.requestAnimationFrame = dom.requestAnimationFrame.bind(dom) || karas.inject.requestAnimationFrame;
          }

          this.__dom = dom;
          this.__ctx = dom.getContext('2d');
        } else {
          this.__dom = {};
          this.__ctx = dom;
        }

        this.__children = karas.builder.initRoot(this.__cd, this);

        this.__initProps();

        this.__root = this;
        this.__refreshLevel = karas.refresh.level.REFLOW;
        this.__renderMode = karas.mode.CANVAS;
        this.__defs = {
          clear: function clear() {}
        };
        this.refresh(null, true);

        if (this.__dom.__root) {
          this.__dom.__root.destroy();
        }

        this.__dom.__root = this;
      }
    }]);

    return Root;
  }(karas.Root);

  _defineProperty(Root, "__isCanvas2", false);

  var createVd = karas.createVd;
  var injected = false;
  injectCanvas1(karas, createVd, Root);
  function setCanvasType(type) {
    // 只允许注入一次
    if (injected) {
      return;
    }

    injected = true;

    if (type === 'canvas2') {
      Root.__isCanvas2 = true;
      injectCanvas2();
    } else if (type === 'canvas1n') {
      Root.__isCanvas1n = true;
      injectCanvas1$1(karas, createVd, Root);
    }
  }

  exports.default = karas;
  exports.setCanvasType = setCanvasType;

  Object.defineProperty(exports, '__esModule', { value: true });

})));
//# sourceMappingURL=index.js.map