123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452 |
- var guid = require("./core/guid");
- var env = require("./core/env");
- var zrUtil = require("./core/util");
- var Handler = require("./Handler");
- var Storage = require("./Storage");
- var Painter = require("./Painter");
- var Animation = require("./animation/Animation");
- var HandlerProxy = require("./dom/HandlerProxy");
- /*!
- * ZRender, a high performance 2d drawing library.
- *
- * Copyright (c) 2013, Baidu Inc.
- * All rights reserved.
- *
- * LICENSE
- * https://github.com/ecomfe/zrender/blob/master/LICENSE.txt
- */
- var useVML = !env.canvasSupported;
- var painterCtors = {
- canvas: Painter
- };
- var instances = {}; // ZRender实例map索引
- /**
- * @type {string}
- */
- var version = '4.3.2';
- /**
- * Initializing a zrender instance
- * @param {HTMLElement} dom
- * @param {Object} [opts]
- * @param {string} [opts.renderer='canvas'] 'canvas' or 'svg'
- * @param {number} [opts.devicePixelRatio]
- * @param {number|string} [opts.width] Can be 'auto' (the same as null/undefined)
- * @param {number|string} [opts.height] Can be 'auto' (the same as null/undefined)
- * @return {module:zrender/ZRender}
- */
- function init(dom, opts) {
- var zr = new ZRender(guid(), dom, opts);
- instances[zr.id] = zr;
- return zr;
- }
- /**
- * Dispose zrender instance
- * @param {module:zrender/ZRender} zr
- */
- function dispose(zr) {
- if (zr) {
- zr.dispose();
- } else {
- for (var key in instances) {
- if (instances.hasOwnProperty(key)) {
- instances[key].dispose();
- }
- }
- instances = {};
- }
- return this;
- }
- /**
- * Get zrender instance by id
- * @param {string} id zrender instance id
- * @return {module:zrender/ZRender}
- */
- function getInstance(id) {
- return instances[id];
- }
- function registerPainter(name, Ctor) {
- painterCtors[name] = Ctor;
- }
- function delInstance(id) {
- delete instances[id];
- }
- /**
- * @module zrender/ZRender
- */
- /**
- * @constructor
- * @alias module:zrender/ZRender
- * @param {string} id
- * @param {HTMLElement} dom
- * @param {Object} opts
- * @param {string} [opts.renderer='canvas'] 'canvas' or 'svg'
- * @param {number} [opts.devicePixelRatio]
- * @param {number} [opts.width] Can be 'auto' (the same as null/undefined)
- * @param {number} [opts.height] Can be 'auto' (the same as null/undefined)
- */
- var ZRender = function (id, dom, opts) {
- opts = opts || {};
- /**
- * @type {HTMLDomElement}
- */
- this.dom = dom;
- /**
- * @type {string}
- */
- this.id = id;
- var self = this;
- var storage = new Storage();
- var rendererType = opts.renderer; // TODO WebGL
- if (useVML) {
- if (!painterCtors.vml) {
- throw new Error('You need to require \'zrender/vml/vml\' to support IE8');
- }
- rendererType = 'vml';
- } else if (!rendererType || !painterCtors[rendererType]) {
- rendererType = 'canvas';
- }
- var painter = new painterCtors[rendererType](dom, storage, opts, id);
- this.storage = storage;
- this.painter = painter;
- var handerProxy = !env.node && !env.worker ? new HandlerProxy(painter.getViewportRoot(), painter.root) : null;
- this.handler = new Handler(storage, painter, handerProxy, painter.root);
- /**
- * @type {module:zrender/animation/Animation}
- */
- this.animation = new Animation({
- stage: {
- update: zrUtil.bind(this.flush, this)
- }
- });
- this.animation.start();
- /**
- * @type {boolean}
- * @private
- */
- this._needsRefresh; // 修改 storage.delFromStorage, 每次删除元素之前删除动画
- // FIXME 有点ugly
- var oldDelFromStorage = storage.delFromStorage;
- var oldAddToStorage = storage.addToStorage;
- storage.delFromStorage = function (el) {
- oldDelFromStorage.call(storage, el);
- el && el.removeSelfFromZr(self);
- };
- storage.addToStorage = function (el) {
- oldAddToStorage.call(storage, el);
- el.addSelfToZr(self);
- };
- };
- ZRender.prototype = {
- constructor: ZRender,
- /**
- * 获取实例唯一标识
- * @return {string}
- */
- getId: function () {
- return this.id;
- },
- /**
- * 添加元素
- * @param {module:zrender/Element} el
- */
- add: function (el) {
- this.storage.addRoot(el);
- this._needsRefresh = true;
- },
- /**
- * 删除元素
- * @param {module:zrender/Element} el
- */
- remove: function (el) {
- this.storage.delRoot(el);
- this._needsRefresh = true;
- },
- /**
- * Change configuration of layer
- * @param {string} zLevel
- * @param {Object} config
- * @param {string} [config.clearColor=0] Clear color
- * @param {string} [config.motionBlur=false] If enable motion blur
- * @param {number} [config.lastFrameAlpha=0.7] Motion blur factor. Larger value cause longer trailer
- */
- configLayer: function (zLevel, config) {
- if (this.painter.configLayer) {
- this.painter.configLayer(zLevel, config);
- }
- this._needsRefresh = true;
- },
- /**
- * Set background color
- * @param {string} backgroundColor
- */
- setBackgroundColor: function (backgroundColor) {
- if (this.painter.setBackgroundColor) {
- this.painter.setBackgroundColor(backgroundColor);
- }
- this._needsRefresh = true;
- },
- /**
- * Repaint the canvas immediately
- */
- refreshImmediately: function () {
- // var start = new Date();
- // Clear needsRefresh ahead to avoid something wrong happens in refresh
- // Or it will cause zrender refreshes again and again.
- this._needsRefresh = this._needsRefreshHover = false;
- this.painter.refresh(); // Avoid trigger zr.refresh in Element#beforeUpdate hook
- this._needsRefresh = this._needsRefreshHover = false; // var end = new Date();
- // var log = document.getElementById('log');
- // if (log) {
- // log.innerHTML = log.innerHTML + '<br>' + (end - start);
- // }
- },
- /**
- * Mark and repaint the canvas in the next frame of browser
- */
- refresh: function () {
- this._needsRefresh = true;
- },
- /**
- * Perform all refresh
- */
- flush: function () {
- var triggerRendered;
- if (this._needsRefresh) {
- triggerRendered = true;
- this.refreshImmediately();
- }
- if (this._needsRefreshHover) {
- triggerRendered = true;
- this.refreshHoverImmediately();
- }
- triggerRendered && this.trigger('rendered');
- },
- /**
- * Add element to hover layer
- * @param {module:zrender/Element} el
- * @param {Object} style
- */
- addHover: function (el, style) {
- if (this.painter.addHover) {
- var elMirror = this.painter.addHover(el, style);
- this.refreshHover();
- return elMirror;
- }
- },
- /**
- * Add element from hover layer
- * @param {module:zrender/Element} el
- */
- removeHover: function (el) {
- if (this.painter.removeHover) {
- this.painter.removeHover(el);
- this.refreshHover();
- }
- },
- /**
- * Clear all hover elements in hover layer
- * @param {module:zrender/Element} el
- */
- clearHover: function () {
- if (this.painter.clearHover) {
- this.painter.clearHover();
- this.refreshHover();
- }
- },
- /**
- * Refresh hover in next frame
- */
- refreshHover: function () {
- this._needsRefreshHover = true;
- },
- /**
- * Refresh hover immediately
- */
- refreshHoverImmediately: function () {
- this._needsRefreshHover = false;
- this.painter.refreshHover && this.painter.refreshHover();
- },
- /**
- * Resize the canvas.
- * Should be invoked when container size is changed
- * @param {Object} [opts]
- * @param {number|string} [opts.width] Can be 'auto' (the same as null/undefined)
- * @param {number|string} [opts.height] Can be 'auto' (the same as null/undefined)
- */
- resize: function (opts) {
- opts = opts || {};
- this.painter.resize(opts.width, opts.height);
- this.handler.resize();
- },
- /**
- * Stop and clear all animation immediately
- */
- clearAnimation: function () {
- this.animation.clear();
- },
- /**
- * Get container width
- */
- getWidth: function () {
- return this.painter.getWidth();
- },
- /**
- * Get container height
- */
- getHeight: function () {
- return this.painter.getHeight();
- },
- /**
- * Export the canvas as Base64 URL
- * @param {string} type
- * @param {string} [backgroundColor='#fff']
- * @return {string} Base64 URL
- */
- // toDataURL: function(type, backgroundColor) {
- // return this.painter.getRenderedCanvas({
- // backgroundColor: backgroundColor
- // }).toDataURL(type);
- // },
- /**
- * Converting a path to image.
- * It has much better performance of drawing image rather than drawing a vector path.
- * @param {module:zrender/graphic/Path} e
- * @param {number} width
- * @param {number} height
- */
- pathToImage: function (e, dpr) {
- return this.painter.pathToImage(e, dpr);
- },
- /**
- * Set default cursor
- * @param {string} [cursorStyle='default'] 例如 crosshair
- */
- setCursorStyle: function (cursorStyle) {
- this.handler.setCursorStyle(cursorStyle);
- },
- /**
- * Find hovered element
- * @param {number} x
- * @param {number} y
- * @return {Object} {target, topTarget}
- */
- findHover: function (x, y) {
- return this.handler.findHover(x, y);
- },
- /**
- * Bind event
- *
- * @param {string} eventName Event name
- * @param {Function} eventHandler Handler function
- * @param {Object} [context] Context object
- */
- on: function (eventName, eventHandler, context) {
- this.handler.on(eventName, eventHandler, context);
- },
- /**
- * Unbind event
- * @param {string} eventName Event name
- * @param {Function} [eventHandler] Handler function
- */
- off: function (eventName, eventHandler) {
- this.handler.off(eventName, eventHandler);
- },
- /**
- * Trigger event manually
- *
- * @param {string} eventName Event name
- * @param {event=} event Event object
- */
- trigger: function (eventName, event) {
- this.handler.trigger(eventName, event);
- },
- /**
- * Clear all objects and the canvas.
- */
- clear: function () {
- this.storage.delRoot();
- this.painter.clear();
- },
- /**
- * Dispose self.
- */
- dispose: function () {
- this.animation.stop();
- this.clear();
- this.storage.dispose();
- this.painter.dispose();
- this.handler.dispose();
- this.animation = this.storage = this.painter = this.handler = null;
- delInstance(this.id);
- }
- };
- exports.version = version;
- exports.init = init;
- exports.dispose = dispose;
- exports.getInstance = getInstance;
- exports.registerPainter = registerPainter;
|