module.exports = /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ /******/ // Flag the module as loaded /******/ module.l = true; /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); /******/ } /******/ }; /******/ /******/ // define __esModule on exports /******/ __webpack_require__.r = function(exports) { /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ /******/ // create a fake namespace object /******/ // mode & 1: value is a module id, require it /******/ // mode & 2: merge all properties of value into the ns /******/ // mode & 4: return value when already ns object /******/ // mode & 8|1: behave like require /******/ __webpack_require__.t = function(value, mode) { /******/ if(mode & 1) value = __webpack_require__(value); /******/ if(mode & 8) return value; /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; /******/ var ns = Object.create(null); /******/ __webpack_require__.r(ns); /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); /******/ return ns; /******/ }; /******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function getDefault() { return module['default']; } : /******/ function getModuleExports() { return module; }; /******/ __webpack_require__.d(getter, 'a', getter); /******/ return getter; /******/ }; /******/ /******/ // Object.prototype.hasOwnProperty.call /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(__webpack_require__.s = 0); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "EE", function() { return EE; }); /* harmony import */ var _components_elements_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1); /* harmony import */ var _common_pool_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4); /* harmony import */ var tiny_emitter__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3); /* harmony import */ var tiny_emitter__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(tiny_emitter__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var css_layout__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5); /* harmony import */ var css_layout__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(css_layout__WEBPACK_IMPORTED_MODULE_3__); /* harmony import */ var _common_util_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6); /* harmony import */ var _libs_fast_xml_parser_parser_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7); /* harmony import */ var _libs_fast_xml_parser_parser_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_libs_fast_xml_parser_parser_js__WEBPACK_IMPORTED_MODULE_5__); /* harmony import */ var _common_bitMapFont__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(13); /* harmony import */ var _components_index_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(15); function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } 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); return Constructor; } 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 } }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } 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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } // components // 全局事件管道 var EE = new tiny_emitter__WEBPACK_IMPORTED_MODULE_2___default.a(); var imgPool = new _common_pool_js__WEBPACK_IMPORTED_MODULE_1__["default"]('imgPool'); var canvasPool = new _common_pool_js__WEBPACK_IMPORTED_MODULE_1__["default"]('canvasPool'); var constructorMap = { view: _components_index_js__WEBPACK_IMPORTED_MODULE_7__["View"], text: _components_index_js__WEBPACK_IMPORTED_MODULE_7__["Text"], image: _components_index_js__WEBPACK_IMPORTED_MODULE_7__["Image"], scrollview: _components_index_js__WEBPACK_IMPORTED_MODULE_7__["ScrollView"], bitmaptext: _components_index_js__WEBPACK_IMPORTED_MODULE_7__["BitMapText"] }; var create = function create(node, style) { var _this = this; var _constructor = constructorMap[node.name]; var children = node.children || []; var attr = node.attr || {}; var id = attr.id || ''; var args = Object.keys(attr).reduce(function (obj, key) { var value = attr[key]; var attribute = key; if (key === 'id') { obj.style = Object.assign(obj.style || {}, style[id] || {}); return obj; } if (key === 'class') { obj.style = value.split(/\s+/).reduce(function (res, oneClass) { return Object.assign(res, style[oneClass]); }, obj.style || {}); return obj; } // if (/\{\{.+\}\}/.test(value)) { // } if (value === 'true') { obj[attribute] = true; } else if (value === 'false') { obj[attribute] = false; } else { obj[attribute] = value; } return obj; }, {}); // 用于后续元素查询 args.idName = id; args.className = attr["class"] || ''; var element = new _constructor(args); element.root = this; children.forEach(function (childNode) { var childElement = create.call(_this, childNode, style); element.add(childElement); }); return element; }; var getChildren = function getChildren(element) { return Object.keys(element.children).map(function (id) { return element.children[id]; }).map(function (child) { return { id: child.id, name: child.name, style: child.style, children: getChildren(child) }; }); }; var renderChildren = function renderChildren(children, context) { children.forEach(function (child) { if (child.type === 'ScrollView') { // ScrollView的子节点渲染交给ScrollView自己,不支持嵌套ScrollView child.insertScrollView(context); } else { child.insert(context); return renderChildren(child.children, context); } }); }; function layoutChildren(dataArray, children) { var _this2 = this; dataArray.forEach(function (data) { var child = children.find(function (item) { return item.id === data.id; }); child.layoutBox = child.layoutBox || {}; ['left', 'top', 'width', 'height'].forEach(function (prop) { child.layoutBox[prop] = data.layout[prop]; }); if (child.parent) { child.layoutBox.absoluteX = (child.parent.layoutBox.absoluteX || 0) + child.layoutBox.left; child.layoutBox.absoluteY = (child.parent.layoutBox.absoluteY || 0) + child.layoutBox.top; } else { child.layoutBox.absoluteX = child.layoutBox.left; child.layoutBox.absoluteY = child.layoutBox.top; } child.layoutBox.originalAbsoluteY = child.layoutBox.absoluteY; // 滚动列表的画板尺寸和主画板保持一致 if (child.type === 'ScrollView') { child.updateRenderPort(_this2.renderport); } layoutChildren.call(_this2, data.children, child.children); }); } var updateRealLayout = function updateRealLayout(dataArray, children, scale) { dataArray.forEach(function (data) { var child = children.find(function (item) { return item.id === data.id; }); child.realLayoutBox = child.realLayoutBox || {}; ['left', 'top', 'width', 'height'].forEach(function (prop) { child.realLayoutBox[prop] = data.layout[prop] * scale; }); if (child.parent) { child.realLayoutBox.realX = (child.parent.realLayoutBox.realX || 0) + child.realLayoutBox.left; Object.defineProperty(child.realLayoutBox, 'realY', { configurable: true, enumerable: true, get: function get() { var res = (child.parent.realLayoutBox.realY || 0) + child.realLayoutBox.top; /** * 滚动列表事件处理 */ if (child.parent && child.parent.type === 'ScrollView') { res -= child.parent.top * scale; } return res; } }); } else { child.realLayoutBox.realX = child.realLayoutBox.left; child.realLayoutBox.realY = child.realLayoutBox.top; } updateRealLayout(data.children, child.children, scale); }); }; function _getElementsById(tree) { var list = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; var id = arguments.length > 2 ? arguments[2] : undefined; Object.keys(tree.children).forEach(function (key) { var child = tree.children[key]; if (child.idName === id) { list.push(child); } if (Object.keys(child.children).length) { _getElementsById(child, list, id); } }); return list; } function _getElementsByClassName(tree) { var list = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; var className = arguments.length > 2 ? arguments[2] : undefined; Object.keys(tree.children).forEach(function (key) { var child = tree.children[key]; if (child.className.split(/\s+/).indexOf(className) > -1) { list.push(child); } if (Object.keys(child.children).length) { _getElementsByClassName(child, list, className); } }); return list; } var _Layout = /*#__PURE__*/function (_Element) { _inherits(_Layout, _Element); var _super = _createSuper(_Layout); function _Layout() { var _this3; var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, style = _ref.style, name = _ref.name; _classCallCheck(this, _Layout); _this3 = _super.call(this, { style: style, id: 0, name: name }); _this3.hasEventHandler = false; _this3.elementTree = null; _this3.renderContext = null; _this3.debugInfo = {}; _this3.renderport = {}; _this3.viewport = {}; _this3.touchStart = _this3.eventHandler('touchstart').bind(_assertThisInitialized(_this3)); _this3.touchMove = _this3.eventHandler('touchmove').bind(_assertThisInitialized(_this3)); _this3.touchEnd = _this3.eventHandler('touchend').bind(_assertThisInitialized(_this3)); _this3.touchCancel = _this3.eventHandler('touchcancel').bind(_assertThisInitialized(_this3)); _this3.version = '0.0.1'; _this3.touchMsg = {}; _this3.hasViewPortSet = false; _this3.realLayoutBox = { realX: 0, realY: 0 }; _this3.state = _common_util_js__WEBPACK_IMPORTED_MODULE_4__["STATE"].UNINIT; _this3.bitMapFonts = []; return _this3; } /** * 更新被绘制canvas的窗口信息,本渲染引擎并不关心是否会和其他游戏引擎共同使用 * 而本身又需要支持事件处理,因此,如果被渲染内容是绘制到离屏canvas,需要将最终绘制在屏幕上 * 的绝对尺寸和位置信息更新到本渲染引擎。 * 其中,width为物理像素宽度,height为物理像素高度,x为距离屏幕左上角的物理像素x坐标,y为距离屏幕左上角的物理像素 * y坐标 */ _createClass(_Layout, [{ key: "updateViewPort", value: function updateViewPort(box) { this.viewport.width = box.width || 0; this.viewport.height = box.height || 0; this.viewport.x = box.x || 0; this.viewport.y = box.y || 0; this.realLayoutBox = { realX: this.viewport.x, realY: this.viewport.y }; this.hasViewPortSet = true; } }, { key: "init", value: function init(template, style, attrValueProcessor) { var start = new Date(); /*if( parser.validate(template) === true) { //optional (it'll return an object in case it's not valid)*/ /*}*/ var parseConfig = { attributeNamePrefix: "", attrNodeName: "attr", //default is 'false' textNodeName: "#text", ignoreAttributes: false, ignoreNameSpace: true, allowBooleanAttributes: true, parseNodeValue: false, parseAttributeValue: false, trimValues: true, parseTrueNumberOnly: false }; if (attrValueProcessor && typeof attrValueProcessor === "function") { parseConfig.attrValueProcessor = attrValueProcessor; } var jsonObj = _libs_fast_xml_parser_parser_js__WEBPACK_IMPORTED_MODULE_5___default.a.parse(template, parseConfig, true); var xmlTree = jsonObj.children[0]; this.debugInfo.xmlTree = new Date() - start; // XML树生成渲染树 this.layoutTree = create.call(this, xmlTree, style); this.debugInfo.layoutTree = new Date() - start; this.add(this.layoutTree); var elementTree = { id: this.id, style: { width: this.style.width, height: this.style.height, flexDirection: 'row' }, children: getChildren(this) }; // 计算布局树 css_layout__WEBPACK_IMPORTED_MODULE_3___default()(elementTree); this.elementTree = elementTree; this.debugInfo.renderTree = new Date() - start; var rootEle = this.children[0]; if (rootEle.style.width === undefined || rootEle.style.height === undefined) { console.error('Please set width and height property for root element'); } else { this.renderport.width = rootEle.style.width; this.renderport.height = rootEle.style.height; } this.state = _common_util_js__WEBPACK_IMPORTED_MODULE_4__["STATE"].INITED; } }, { key: "layout", value: function layout(context) { var start = new Date(); this.renderContext = context; if (this.renderContext) { this.renderContext.clearRect(0, 0, this.renderport.width, this.renderport.height); } if (!this.hasViewPortSet) { console.error('Please invoke method `updateViewPort` before method `layout`'); } layoutChildren.call(this, this.elementTree.children, this.children); this.debugInfo.layoutChildren = new Date() - start; // 计算真实的物理像素位置,用于事件处理 updateRealLayout(this.elementTree.children, this.children, this.viewport.width / this.renderport.width); this.debugInfo.updateRealLayout = new Date() - start; renderChildren(this.children, context); this.debugInfo.renderChildren = new Date() - start; this.bindEvents(); this.state = _common_util_js__WEBPACK_IMPORTED_MODULE_4__["STATE"].RENDERED; } }, { key: "initRepaint", value: function initRepaint() { var _this4 = this; this.on('repaint', function () { _this4.repaint(); }); this.EE.on('one__image__render__done', function (img) { _this4.repaint(); }); } }, { key: "repaint", value: function repaint() { var start = new Date(); Object(_common_util_js__WEBPACK_IMPORTED_MODULE_4__["repaintChildren"])(this.children); this.emit('repaint__done'); } }, { key: "getChildByPos", value: function getChildByPos(tree, x, y) { var list = Object.keys(tree.children); for (var i = 0; i < list.length; i++) { var child = tree.children[list[i]]; var box = child.realLayoutBox; if (box.realX <= x && x <= box.realX + box.width && box.realY <= y && y <= box.realY + box.height) { if (Object.keys(child.children).length) { return this.getChildByPos(child, x, y); } else { return child; } } } return tree; } }, { key: "eventHandler", value: function eventHandler(eventName) { return function touchEventHandler(e) { if (!this.elementTree) { return; } var touch = e.touches && e.touches[0] || e.changedTouches && e.changedTouches[0] || e; if (!touch || !touch.pageX || !touch.pageY) { return; } if (!touch.timeStamp) { touch.timeStamp = e.timeStamp; } var item = touch && this.getChildByPos(this, touch.pageX, touch.pageY); item && item.emit(eventName, e); if (eventName === 'touchstart' || eventName === 'touchend') { this.touchMsg[eventName] = touch; } if (eventName === 'touchend' && Object(_common_util_js__WEBPACK_IMPORTED_MODULE_4__["isClick"])(this.touchMsg)) { item && item.emit('click', e); } }; } }, { key: "bindEvents", value: function bindEvents() { if (this.hasEventHandler) { return; } this.hasEventHandler = true; if (typeof wx !== 'undefined') { wx.onTouchStart(this.touchStart); wx.onTouchMove(this.touchMove); wx.onTouchEnd(this.touchEnd); wx.onTouchCancel(this.touchCancel); } else { document.onmousedown = this.touchStart; document.onmousemove = this.touchMove; document.onmouseup = this.touchEnd; document.onmouseleave = this.touchEnd; } } }, { key: "emit", value: function emit(event, data) { EE.emit(event, data); } }, { key: "on", value: function on(event, callback) { EE.on(event, callback); } }, { key: "once", value: function once(event, callback) { EE.once(event, callback); } }, { key: "off", value: function off(event, callback) { EE.off(event, callback); } }, { key: "getElementsById", value: function getElementsById(id) { return _getElementsById(this, [], id); } }, { key: "getElementsByClassName", value: function getElementsByClassName(className) { return _getElementsByClassName(this, [], className); } }, { key: "destroyAll", value: function destroyAll(tree) { var _this5 = this; if (!tree) { tree = this; } var children = tree.children; children.forEach(function (child) { child.destroy(); _this5.destroyAll(child); child.destroySelf && child.destroySelf(); }); } }, { key: "clear", value: function clear() { this.destroyAll(); this.elementTree = null; this.children = []; this.layoutTree = {}; this.state = _common_util_js__WEBPACK_IMPORTED_MODULE_4__["STATE"].CLEAR; canvasPool.getList().forEach(function (item) { item.context && item.context.clearRect(0, 0, item.canvas.width, item.canvas.height); item.elements = []; item.canvas = null; item.context = null; }); if (this.renderContext) { this.renderContext.clearRect(0, 0, this.renderContext.canvas.width, this.renderContext.canvas.height); } /*['touchstart', 'touchmove', 'touchcancel', 'touchend', 'click', 'repaint'].forEach(eventName => { this.off(eventName); });*/ this.EE.off('image__render__done'); } }, { key: "clearPool", value: function clearPool() { imgPool.clear(); canvasPool.clear(); } }, { key: "clearAll", value: function clearAll() { this.clear(); this.clearPool(); } }, { key: "loadImgs", value: function loadImgs(arr) { arr.forEach(function (src) { var img = Object(_common_util_js__WEBPACK_IMPORTED_MODULE_4__["createImage"])(); imgPool.set(src, img); img.onload = function () { img.loadDone = true; }; img.onloadcbks = []; img.src = src; }); } }, { key: "registBitMapFont", value: function registBitMapFont(name, src, config) { var font = new _common_bitMapFont__WEBPACK_IMPORTED_MODULE_6__["default"](name, src, config); this.bitMapFonts.push(font); } }]); return _Layout; }(_components_elements_js__WEBPACK_IMPORTED_MODULE_0__["default"]); var Layout = new _Layout({ style: { width: 0, height: 0 }, name: 'layout' }); /* harmony default export */ __webpack_exports__["default"] = (Layout); /***/ }), /* 1 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Element; }); /* harmony import */ var _style_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2); 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); return Constructor; } var Emitter = __webpack_require__(3); // 全局事件管道 var EE = new Emitter(); var uuid = 0; var dpr = 1; function hexToRgb(hex) { var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; } function getRgba(hex, opacity) { var rgbObj = hexToRgb(hex); if (opacity == undefined) { opacity = 1; } return "rgba(".concat(rgbObj.r, ", ").concat(rgbObj.g, ", ").concat(rgbObj.b, ", ").concat(opacity, ")"); } var toEventName = function toEventName(event, id) { var elementEvent = ['click', 'touchstart', 'touchmove', 'touchend', 'touchcancel']; if (elementEvent.indexOf(event) !== -1) { return "element-".concat(id, "-").concat(event); } return "element-".concat(id, "-").concat(event); }; var Element = /*#__PURE__*/function () { function Element(_ref) { var _this = this; var _ref$style = _ref.style, style = _ref$style === void 0 ? {} : _ref$style, _ref$props = _ref.props, props = _ref$props === void 0 ? {} : _ref$props, _ref$idName = _ref.idName, idName = _ref$idName === void 0 ? '' : _ref$idName, _ref$className = _ref.className, className = _ref$className === void 0 ? '' : _ref$className, _ref$id = _ref.id, id = _ref$id === void 0 ? ++uuid : _ref$id; _classCallCheck(this, Element); this.children = []; this.childMap = {}; this.parent = null; this.parentId = 0; this.id = id; this.props = props; this.idName = idName; this.className = className; this.style = style; this.EE = EE; this.root = null; this.isDestroyed = false; this.layoutBox = {}; if (style.opacity !== undefined && style.color && style.color.indexOf('#') > -1) { style.color = getRgba(style.color, style.opacity); } if (style.opacity !== undefined && style.backgroundColor && style.backgroundColor.indexOf('#') > -1) { style.backgroundColor = getRgba(style.backgroundColor, style.opacity); } for (var key in this.style) { if (_style_js__WEBPACK_IMPORTED_MODULE_0__["scalableStyles"].indexOf(key) > -1) { this.style[key] *= dpr; } } // 事件冒泡逻辑 ['touchstart', 'touchmove', 'touchcancel', 'touchend', 'click'].forEach(function (eventName) { _this.on(eventName, function (e, touchMsg) { _this.parent && _this.parent.emit(eventName, e, touchMsg); }); }); this.initRepaint(); } _createClass(Element, [{ key: "initRepaint", value: function initRepaint() { var _this2 = this; this.on('repaint', function (e) { _this2.parent && _this2.parent.emit('repaint', e); }); } // 子类填充实现 }, { key: "repaint", value: function repaint() {} // 子类填充实现 }, { key: "insert", value: function insert() {} }, { key: "checkNeedRender", value: function checkNeedRender() { return true; } // 子类填充实现 }, { key: "destroy", value: function destroy() { var _this3 = this; ['touchstart', 'touchmove', 'touchcancel', 'touchend', 'click', 'repaint'].forEach(function (eventName) { _this3.off(eventName); }); this.EE.off('image__render__done'); this.isDestroyed = true; this.EE = null; /*this.root = null;*/ this.parent = null; this.ctx = null; this.realLayoutBox = null; this.layoutBox = null; this.props = null; this.style = null; if (this.renderBoxes) { this.renderBoxes = null; } } }, { key: "add", value: function add(element) { element.parent = this; element.parentId = this.id; this.children.push(element); } }, { key: "emit", value: function emit(event) { for (var _len = arguments.length, theArgs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { theArgs[_key - 1] = arguments[_key]; } EE.emit.apply(EE, [toEventName(event, this.id)].concat(theArgs)); } }, { key: "on", value: function on(event, callback) { EE.on(toEventName(event, this.id), callback); } }, { key: "once", value: function once(event, callback) { EE.once(toEventName(event, this.id), callback); } }, { key: "off", value: function off(event, callback) { EE.off(toEventName(event, this.id), callback); } // 方便子类实现borderRadius }, { key: "roundRect", value: function roundRect(ctx, layoutBox) { var style = this.style || {}; var box = layoutBox || this.layoutBox; var w = box.width; var h = box.height; var r = style.borderRadius; var x = box.absoluteX; var y = box.absoluteY; ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r); ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.clip(); } }, { key: "renderBorder", value: function renderBorder(ctx, layoutBox) { var style = this.style || {}; if (style.borderRadius) { this.roundRect(ctx, layoutBox); } ctx.save(); var box = layoutBox || this.layoutBox; var borderWidth = style.borderWidth || 0; var borderLeftWidth = style.borderLeftWidth || 0; var borderRightWidth = style.borderRightWidth || 0; var borderTopWidth = style.borderTopWidth || 0; var borderBottomWidth = style.borderBottomWidth || 0; var radius = style.borderRadius || 0; var borderColor = style.borderColor; var drawX = box.absoluteX; var drawY = box.absoluteY; ctx.beginPath(); if (borderWidth && borderColor) { ctx.lineWidth = borderWidth; ctx.strokeStyle = borderColor; ctx.strokeRect(drawX, drawY, box.width, box.height); } if (borderTopWidth && (borderColor || style.borderTopColor)) { ctx.lineWidth = borderTopWidth; ctx.strokeStyle = style.borderTopColor || borderColor; ctx.moveTo(radius ? drawX + radius : drawX, drawY + borderTopWidth / 2); ctx.lineTo(radius ? drawX + box.width - radius : drawX + box.width, drawY + borderTopWidth / 2); } if (borderBottomWidth && (borderColor || style.borderBottomColor)) { ctx.lineWidth = borderBottomWidth; ctx.strokeStyle = style.borderBottomColor || borderColor; ctx.moveTo(radius ? drawX + radius : drawX, drawY + box.height - borderBottomWidth / 2); ctx.lineTo(radius ? drawX + box.width - radius : drawX + box.width, drawY + box.height - borderBottomWidth / 2); } if (borderLeftWidth && (borderColor || style.borderLeftColor)) { ctx.lineWidth = borderLeftWidth; ctx.strokeStyle = style.borderLeftColor || borderColor; ctx.moveTo(drawX + borderLeftWidth / 2, radius ? drawY + radius : drawY); ctx.lineTo(drawX + borderLeftWidth / 2, radius ? drawY + box.height - radius : drawY + box.height); } if (borderRightWidth && (borderColor || style.borderRightColor)) { ctx.lineWidth = borderRightWidth; ctx.strokeStyle = style.borderRightColor || borderColor; ctx.moveTo(drawX + box.width - borderRightWidth / 2, radius ? drawY + radius : drawY); ctx.lineTo(drawX + box.width - borderRightWidth / 2, radius ? drawY + box.height - radius : drawY + box.height); } ctx.closePath(); ctx.stroke(); ctx.restore(); } }]); return Element; }(); /***/ }), /* 2 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "scalableStyles", function() { return scalableStyles; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "textStyles", function() { return textStyles; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "layoutAffectedStyles", function() { return layoutAffectedStyles; }); var textStyles = ['color', 'fontSize', 'textAlign', 'fontWeight', 'lineHeight', 'lineBreak']; var scalableStyles = ['left', 'top', 'right', 'bottom', 'width', 'height', 'margin', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom', 'padding', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'fontSize', 'lineHeight', 'borderRadius', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight']; var layoutAffectedStyles = ['margin', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'padding', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', 'width', 'height']; /***/ }), /* 3 */ /***/ (function(module, exports) { function E () { // Keep this empty so it's easier to inherit from // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3) } E.prototype = { on: function (name, callback, ctx) { var e = this.e || (this.e = {}); (e[name] || (e[name] = [])).push({ fn: callback, ctx: ctx }); return this; }, once: function (name, callback, ctx) { var self = this; function listener () { self.off(name, listener); callback.apply(ctx, arguments); }; listener._ = callback return this.on(name, listener, ctx); }, emit: function (name) { var data = [].slice.call(arguments, 1); var evtArr = ((this.e || (this.e = {}))[name] || []).slice(); var i = 0; var len = evtArr.length; for (i; i < len; i++) { evtArr[i].fn.apply(evtArr[i].ctx, data); } return this; }, off: function (name, callback) { var e = this.e || (this.e = {}); var evts = e[name]; var liveEvents = []; if (evts && callback) { for (var i = 0, len = evts.length; i < len; i++) { if (evts[i].fn !== callback && evts[i].fn._ !== callback) liveEvents.push(evts[i]); } } // Remove event from queue to prevent memory leak // Suggested by https://github.com/lazd // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910 (liveEvents.length) ? e[name] = liveEvents : delete e[name]; return this; } }; module.exports = E; module.exports.TinyEmitter = E; /***/ }), /* 4 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Pool; }); 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); return Constructor; } var pools = []; var Pool = /*#__PURE__*/function () { function Pool() { var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'pool'; _classCallCheck(this, Pool); var curr = pools.find(function (item) { return item.name === name; }); if (curr) { return curr; } this.name = name; this.pool = {}; pools.push(this); } _createClass(Pool, [{ key: "get", value: function get(key) { return this.pool[key]; } }, { key: "set", value: function set(key, value) { this.pool[key] = value; } }, { key: "clear", value: function clear() { this.pool = {}; } }, { key: "getList", value: function getList() { return Object.values(this.pool); } }]); return Pool; }(); /***/ }), /* 5 */ /***/ (function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// UMD (Universal Module Definition) // See https://github.com/umdjs/umd for reference // // This file uses the following specific UMD implementation: // https://github.com/umdjs/umd/blob/master/returnExports.js (function(root, factory) { if (true) { // AMD. Register as an anonymous module. !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); } else {} }(this, function() { /** * Copyright (c) 2014, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style license found in the * LICENSE file in the root directory of this source tree. An additional grant * of patent rights can be found in the PATENTS file in the same directory. */ var computeLayout = (function() { var CSS_UNDEFINED; var CSS_DIRECTION_INHERIT = 'inherit'; var CSS_DIRECTION_LTR = 'ltr'; var CSS_DIRECTION_RTL = 'rtl'; var CSS_FLEX_DIRECTION_ROW = 'row'; var CSS_FLEX_DIRECTION_ROW_REVERSE = 'row-reverse'; var CSS_FLEX_DIRECTION_COLUMN = 'column'; var CSS_FLEX_DIRECTION_COLUMN_REVERSE = 'column-reverse'; var CSS_JUSTIFY_FLEX_START = 'flex-start'; var CSS_JUSTIFY_CENTER = 'center'; var CSS_JUSTIFY_FLEX_END = 'flex-end'; var CSS_JUSTIFY_SPACE_BETWEEN = 'space-between'; var CSS_JUSTIFY_SPACE_AROUND = 'space-around'; var CSS_ALIGN_FLEX_START = 'flex-start'; var CSS_ALIGN_CENTER = 'center'; var CSS_ALIGN_FLEX_END = 'flex-end'; var CSS_ALIGN_STRETCH = 'stretch'; var CSS_POSITION_RELATIVE = 'relative'; var CSS_POSITION_ABSOLUTE = 'absolute'; var leading = { 'row': 'left', 'row-reverse': 'right', 'column': 'top', 'column-reverse': 'bottom' }; var trailing = { 'row': 'right', 'row-reverse': 'left', 'column': 'bottom', 'column-reverse': 'top' }; var pos = { 'row': 'left', 'row-reverse': 'right', 'column': 'top', 'column-reverse': 'bottom' }; var dim = { 'row': 'width', 'row-reverse': 'width', 'column': 'height', 'column-reverse': 'height' }; // When transpiled to Java / C the node type has layout, children and style // properties. For the JavaScript version this function adds these properties // if they don't already exist. function fillNodes(node) { if (!node.layout || node.isDirty) { node.layout = { width: undefined, height: undefined, top: 0, left: 0, right: 0, bottom: 0 }; } if (!node.style) { node.style = {}; } if (!node.children) { node.children = []; } node.children.forEach(fillNodes); return node; } function isUndefined(value) { return value === undefined; } function isRowDirection(flexDirection) { return flexDirection === CSS_FLEX_DIRECTION_ROW || flexDirection === CSS_FLEX_DIRECTION_ROW_REVERSE; } function isColumnDirection(flexDirection) { return flexDirection === CSS_FLEX_DIRECTION_COLUMN || flexDirection === CSS_FLEX_DIRECTION_COLUMN_REVERSE; } function getLeadingMargin(node, axis) { if (node.style.marginStart !== undefined && isRowDirection(axis)) { return node.style.marginStart; } var value = null; switch (axis) { case 'row': value = node.style.marginLeft; break; case 'row-reverse': value = node.style.marginRight; break; case 'column': value = node.style.marginTop; break; case 'column-reverse': value = node.style.marginBottom; break; } if (value !== undefined) { return value; } if (node.style.margin !== undefined) { return node.style.margin; } return 0; } function getTrailingMargin(node, axis) { if (node.style.marginEnd !== undefined && isRowDirection(axis)) { return node.style.marginEnd; } var value = null; switch (axis) { case 'row': value = node.style.marginRight; break; case 'row-reverse': value = node.style.marginLeft; break; case 'column': value = node.style.marginBottom; break; case 'column-reverse': value = node.style.marginTop; break; } if (value != null) { return value; } if (node.style.margin !== undefined) { return node.style.margin; } return 0; } function getLeadingPadding(node, axis) { if (node.style.paddingStart !== undefined && node.style.paddingStart >= 0 && isRowDirection(axis)) { return node.style.paddingStart; } var value = null; switch (axis) { case 'row': value = node.style.paddingLeft; break; case 'row-reverse': value = node.style.paddingRight; break; case 'column': value = node.style.paddingTop; break; case 'column-reverse': value = node.style.paddingBottom; break; } if (value != null && value >= 0) { return value; } if (node.style.padding !== undefined && node.style.padding >= 0) { return node.style.padding; } return 0; } function getTrailingPadding(node, axis) { if (node.style.paddingEnd !== undefined && node.style.paddingEnd >= 0 && isRowDirection(axis)) { return node.style.paddingEnd; } var value = null; switch (axis) { case 'row': value = node.style.paddingRight; break; case 'row-reverse': value = node.style.paddingLeft; break; case 'column': value = node.style.paddingBottom; break; case 'column-reverse': value = node.style.paddingTop; break; } if (value != null && value >= 0) { return value; } if (node.style.padding !== undefined && node.style.padding >= 0) { return node.style.padding; } return 0; } function getLeadingBorder(node, axis) { if (node.style.borderStartWidth !== undefined && node.style.borderStartWidth >= 0 && isRowDirection(axis)) { return node.style.borderStartWidth; } var value = null; switch (axis) { case 'row': value = node.style.borderLeftWidth; break; case 'row-reverse': value = node.style.borderRightWidth; break; case 'column': value = node.style.borderTopWidth; break; case 'column-reverse': value = node.style.borderBottomWidth; break; } if (value != null && value >= 0) { return value; } if (node.style.borderWidth !== undefined && node.style.borderWidth >= 0) { return node.style.borderWidth; } return 0; } function getTrailingBorder(node, axis) { if (node.style.borderEndWidth !== undefined && node.style.borderEndWidth >= 0 && isRowDirection(axis)) { return node.style.borderEndWidth; } var value = null; switch (axis) { case 'row': value = node.style.borderRightWidth; break; case 'row-reverse': value = node.style.borderLeftWidth; break; case 'column': value = node.style.borderBottomWidth; break; case 'column-reverse': value = node.style.borderTopWidth; break; } if (value != null && value >= 0) { return value; } if (node.style.borderWidth !== undefined && node.style.borderWidth >= 0) { return node.style.borderWidth; } return 0; } function getLeadingPaddingAndBorder(node, axis) { return getLeadingPadding(node, axis) + getLeadingBorder(node, axis); } function getTrailingPaddingAndBorder(node, axis) { return getTrailingPadding(node, axis) + getTrailingBorder(node, axis); } function getBorderAxis(node, axis) { return getLeadingBorder(node, axis) + getTrailingBorder(node, axis); } function getMarginAxis(node, axis) { return getLeadingMargin(node, axis) + getTrailingMargin(node, axis); } function getPaddingAndBorderAxis(node, axis) { return getLeadingPaddingAndBorder(node, axis) + getTrailingPaddingAndBorder(node, axis); } function getJustifyContent(node) { if (node.style.justifyContent) { return node.style.justifyContent; } return 'flex-start'; } function getAlignContent(node) { if (node.style.alignContent) { return node.style.alignContent; } return 'flex-start'; } function getAlignItem(node, child) { if (child.style.alignSelf) { return child.style.alignSelf; } if (node.style.alignItems) { return node.style.alignItems; } return 'stretch'; } function resolveAxis(axis, direction) { if (direction === CSS_DIRECTION_RTL) { if (axis === CSS_FLEX_DIRECTION_ROW) { return CSS_FLEX_DIRECTION_ROW_REVERSE; } else if (axis === CSS_FLEX_DIRECTION_ROW_REVERSE) { return CSS_FLEX_DIRECTION_ROW; } } return axis; } function resolveDirection(node, parentDirection) { var direction; if (node.style.direction) { direction = node.style.direction; } else { direction = CSS_DIRECTION_INHERIT; } if (direction === CSS_DIRECTION_INHERIT) { direction = (parentDirection === undefined ? CSS_DIRECTION_LTR : parentDirection); } return direction; } function getFlexDirection(node) { if (node.style.flexDirection) { return node.style.flexDirection; } return CSS_FLEX_DIRECTION_COLUMN; } function getCrossFlexDirection(flexDirection, direction) { if (isColumnDirection(flexDirection)) { return resolveAxis(CSS_FLEX_DIRECTION_ROW, direction); } else { return CSS_FLEX_DIRECTION_COLUMN; } } function getPositionType(node) { if (node.style.position) { return node.style.position; } return 'relative'; } function isFlex(node) { return ( getPositionType(node) === CSS_POSITION_RELATIVE && node.style.flex > 0 ); } function isFlexWrap(node) { return node.style.flexWrap === 'wrap'; } function getDimWithMargin(node, axis) { return node.layout[dim[axis]] + getMarginAxis(node, axis); } function isDimDefined(node, axis) { return node.style[dim[axis]] !== undefined && node.style[dim[axis]] >= 0; } function isPosDefined(node, pos) { return node.style[pos] !== undefined; } function isMeasureDefined(node) { return node.style.measure !== undefined; } function getPosition(node, pos) { if (node.style[pos] !== undefined) { return node.style[pos]; } return 0; } function boundAxis(node, axis, value) { var min = { 'row': node.style.minWidth, 'row-reverse': node.style.minWidth, 'column': node.style.minHeight, 'column-reverse': node.style.minHeight }[axis]; var max = { 'row': node.style.maxWidth, 'row-reverse': node.style.maxWidth, 'column': node.style.maxHeight, 'column-reverse': node.style.maxHeight }[axis]; var boundValue = value; if (max !== undefined && max >= 0 && boundValue > max) { boundValue = max; } if (min !== undefined && min >= 0 && boundValue < min) { boundValue = min; } return boundValue; } function fmaxf(a, b) { if (a > b) { return a; } return b; } // When the user specifically sets a value for width or height function setDimensionFromStyle(node, axis) { // The parent already computed us a width or height. We just skip it if (node.layout[dim[axis]] !== undefined) { return; } // We only run if there's a width or height defined if (!isDimDefined(node, axis)) { return; } // The dimensions can never be smaller than the padding and border node.layout[dim[axis]] = fmaxf( boundAxis(node, axis, node.style[dim[axis]]), getPaddingAndBorderAxis(node, axis) ); } function setTrailingPosition(node, child, axis) { child.layout[trailing[axis]] = node.layout[dim[axis]] - child.layout[dim[axis]] - child.layout[pos[axis]]; } // If both left and right are defined, then use left. Otherwise return // +left or -right depending on which is defined. function getRelativePosition(node, axis) { if (node.style[leading[axis]] !== undefined) { return getPosition(node, leading[axis]); } return -getPosition(node, trailing[axis]); } function layoutNodeImpl(node, parentMaxWidth, /*css_direction_t*/parentDirection) { var/*css_direction_t*/ direction = resolveDirection(node, parentDirection); var/*(c)!css_flex_direction_t*//*(java)!int*/ mainAxis = resolveAxis(getFlexDirection(node), direction); var/*(c)!css_flex_direction_t*//*(java)!int*/ crossAxis = getCrossFlexDirection(mainAxis, direction); var/*(c)!css_flex_direction_t*//*(java)!int*/ resolvedRowAxis = resolveAxis(CSS_FLEX_DIRECTION_ROW, direction); // Handle width and height style attributes setDimensionFromStyle(node, mainAxis); setDimensionFromStyle(node, crossAxis); // Set the resolved resolution in the node's layout node.layout.direction = direction; // The position is set by the parent, but we need to complete it with a // delta composed of the margin and left/top/right/bottom node.layout[leading[mainAxis]] += getLeadingMargin(node, mainAxis) + getRelativePosition(node, mainAxis); node.layout[trailing[mainAxis]] += getTrailingMargin(node, mainAxis) + getRelativePosition(node, mainAxis); node.layout[leading[crossAxis]] += getLeadingMargin(node, crossAxis) + getRelativePosition(node, crossAxis); node.layout[trailing[crossAxis]] += getTrailingMargin(node, crossAxis) + getRelativePosition(node, crossAxis); // Inline immutable values from the target node to avoid excessive method // invocations during the layout calculation. var/*int*/ childCount = node.children.length; var/*float*/ paddingAndBorderAxisResolvedRow = getPaddingAndBorderAxis(node, resolvedRowAxis); if (isMeasureDefined(node)) { var/*bool*/ isResolvedRowDimDefined = !isUndefined(node.layout[dim[resolvedRowAxis]]); var/*float*/ width = CSS_UNDEFINED; if (isDimDefined(node, resolvedRowAxis)) { width = node.style.width; } else if (isResolvedRowDimDefined) { width = node.layout[dim[resolvedRowAxis]]; } else { width = parentMaxWidth - getMarginAxis(node, resolvedRowAxis); } width -= paddingAndBorderAxisResolvedRow; // We only need to give a dimension for the text if we haven't got any // for it computed yet. It can either be from the style attribute or because // the element is flexible. var/*bool*/ isRowUndefined = !isDimDefined(node, resolvedRowAxis) && !isResolvedRowDimDefined; var/*bool*/ isColumnUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) && isUndefined(node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]]); // Let's not measure the text if we already know both dimensions if (isRowUndefined || isColumnUndefined) { var/*css_dim_t*/ measureDim = node.style.measure( /*(c)!node->context,*/ /*(java)!layoutContext.measureOutput,*/ width ); if (isRowUndefined) { node.layout.width = measureDim.width + paddingAndBorderAxisResolvedRow; } if (isColumnUndefined) { node.layout.height = measureDim.height + getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN); } } if (childCount === 0) { return; } } var/*bool*/ isNodeFlexWrap = isFlexWrap(node); var/*css_justify_t*/ justifyContent = getJustifyContent(node); var/*float*/ leadingPaddingAndBorderMain = getLeadingPaddingAndBorder(node, mainAxis); var/*float*/ leadingPaddingAndBorderCross = getLeadingPaddingAndBorder(node, crossAxis); var/*float*/ paddingAndBorderAxisMain = getPaddingAndBorderAxis(node, mainAxis); var/*float*/ paddingAndBorderAxisCross = getPaddingAndBorderAxis(node, crossAxis); var/*bool*/ isMainDimDefined = !isUndefined(node.layout[dim[mainAxis]]); var/*bool*/ isCrossDimDefined = !isUndefined(node.layout[dim[crossAxis]]); var/*bool*/ isMainRowDirection = isRowDirection(mainAxis); var/*int*/ i; var/*int*/ ii; var/*css_node_t**/ child; var/*(c)!css_flex_direction_t*//*(java)!int*/ axis; var/*css_node_t**/ firstAbsoluteChild = null; var/*css_node_t**/ currentAbsoluteChild = null; var/*float*/ definedMainDim = CSS_UNDEFINED; if (isMainDimDefined) { definedMainDim = node.layout[dim[mainAxis]] - paddingAndBorderAxisMain; } // We want to execute the next two loops one per line with flex-wrap var/*int*/ startLine = 0; var/*int*/ endLine = 0; // var/*int*/ nextOffset = 0; var/*int*/ alreadyComputedNextLayout = 0; // We aggregate the total dimensions of the container in those two variables var/*float*/ linesCrossDim = 0; var/*float*/ linesMainDim = 0; var/*int*/ linesCount = 0; while (endLine < childCount) { // Layout non flexible children and count children by type // mainContentDim is accumulation of the dimensions and margin of all the // non flexible children. This will be used in order to either set the // dimensions of the node if none already exist, or to compute the // remaining space left for the flexible children. var/*float*/ mainContentDim = 0; // There are three kind of children, non flexible, flexible and absolute. // We need to know how many there are in order to distribute the space. var/*int*/ flexibleChildrenCount = 0; var/*float*/ totalFlexible = 0; var/*int*/ nonFlexibleChildrenCount = 0; // Use the line loop to position children in the main axis for as long // as they are using a simple stacking behaviour. Children that are // immediately stacked in the initial loop will not be touched again // in . var/*bool*/ isSimpleStackMain = (isMainDimDefined && justifyContent === CSS_JUSTIFY_FLEX_START) || (!isMainDimDefined && justifyContent !== CSS_JUSTIFY_CENTER); var/*int*/ firstComplexMain = (isSimpleStackMain ? childCount : startLine); // Use the initial line loop to position children in the cross axis for // as long as they are relatively positioned with alignment STRETCH or // FLEX_START. Children that are immediately stacked in the initial loop // will not be touched again in . var/*bool*/ isSimpleStackCross = true; var/*int*/ firstComplexCross = childCount; var/*css_node_t**/ firstFlexChild = null; var/*css_node_t**/ currentFlexChild = null; var/*float*/ mainDim = leadingPaddingAndBorderMain; var/*float*/ crossDim = 0; var/*float*/ maxWidth; for (i = startLine; i < childCount; ++i) { child = node.children[i]; child.lineIndex = linesCount; child.nextAbsoluteChild = null; child.nextFlexChild = null; var/*css_align_t*/ alignItem = getAlignItem(node, child); // Pre-fill cross axis dimensions when the child is using stretch before // we call the recursive layout pass if (alignItem === CSS_ALIGN_STRETCH && getPositionType(child) === CSS_POSITION_RELATIVE && isCrossDimDefined && !isDimDefined(child, crossAxis)) { child.layout[dim[crossAxis]] = fmaxf( boundAxis(child, crossAxis, node.layout[dim[crossAxis]] - paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)), // You never want to go smaller than padding getPaddingAndBorderAxis(child, crossAxis) ); } else if (getPositionType(child) === CSS_POSITION_ABSOLUTE) { // Store a private linked list of absolutely positioned children // so that we can efficiently traverse them later. if (firstAbsoluteChild === null) { firstAbsoluteChild = child; } if (currentAbsoluteChild !== null) { currentAbsoluteChild.nextAbsoluteChild = child; } currentAbsoluteChild = child; // Pre-fill dimensions when using absolute position and both offsets for the axis are defined (either both // left and right or top and bottom). for (ii = 0; ii < 2; ii++) { axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN; if (!isUndefined(node.layout[dim[axis]]) && !isDimDefined(child, axis) && isPosDefined(child, leading[axis]) && isPosDefined(child, trailing[axis])) { child.layout[dim[axis]] = fmaxf( boundAxis(child, axis, node.layout[dim[axis]] - getPaddingAndBorderAxis(node, axis) - getMarginAxis(child, axis) - getPosition(child, leading[axis]) - getPosition(child, trailing[axis])), // You never want to go smaller than padding getPaddingAndBorderAxis(child, axis) ); } } } var/*float*/ nextContentDim = 0; // It only makes sense to consider a child flexible if we have a computed // dimension for the node. if (isMainDimDefined && isFlex(child)) { flexibleChildrenCount++; totalFlexible += child.style.flex; // Store a private linked list of flexible children so that we can // efficiently traverse them later. if (firstFlexChild === null) { firstFlexChild = child; } if (currentFlexChild !== null) { currentFlexChild.nextFlexChild = child; } currentFlexChild = child; // Even if we don't know its exact size yet, we already know the padding, // border and margin. We'll use this partial information, which represents // the smallest possible size for the child, to compute the remaining // available space. nextContentDim = getPaddingAndBorderAxis(child, mainAxis) + getMarginAxis(child, mainAxis); } else { maxWidth = CSS_UNDEFINED; if (!isMainRowDirection) { if (isDimDefined(node, resolvedRowAxis)) { maxWidth = node.layout[dim[resolvedRowAxis]] - paddingAndBorderAxisResolvedRow; } else { maxWidth = parentMaxWidth - getMarginAxis(node, resolvedRowAxis) - paddingAndBorderAxisResolvedRow; } } // This is the main recursive call. We layout non flexible children. if (alreadyComputedNextLayout === 0) { layoutNode(/*(java)!layoutContext, */child, maxWidth, direction); } // Absolute positioned elements do not take part of the layout, so we // don't use them to compute mainContentDim if (getPositionType(child) === CSS_POSITION_RELATIVE) { nonFlexibleChildrenCount++; // At this point we know the final size and margin of the element. nextContentDim = getDimWithMargin(child, mainAxis); } } // The element we are about to add would make us go to the next line if (isNodeFlexWrap && isMainDimDefined && mainContentDim + nextContentDim > definedMainDim && // If there's only one element, then it's bigger than the content // and needs its own line i !== startLine) { nonFlexibleChildrenCount--; alreadyComputedNextLayout = 1; break; } // Disable simple stacking in the main axis for the current line as // we found a non-trivial child. The remaining children will be laid out // in . if (isSimpleStackMain && (getPositionType(child) !== CSS_POSITION_RELATIVE || isFlex(child))) { isSimpleStackMain = false; firstComplexMain = i; } // Disable simple stacking in the cross axis for the current line as // we found a non-trivial child. The remaining children will be laid out // in . if (isSimpleStackCross && (getPositionType(child) !== CSS_POSITION_RELATIVE || (alignItem !== CSS_ALIGN_STRETCH && alignItem !== CSS_ALIGN_FLEX_START) || isUndefined(child.layout[dim[crossAxis]]))) { isSimpleStackCross = false; firstComplexCross = i; } if (isSimpleStackMain) { child.layout[pos[mainAxis]] += mainDim; if (isMainDimDefined) { setTrailingPosition(node, child, mainAxis); } mainDim += getDimWithMargin(child, mainAxis); crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis))); } if (isSimpleStackCross) { child.layout[pos[crossAxis]] += linesCrossDim + leadingPaddingAndBorderCross; if (isCrossDimDefined) { setTrailingPosition(node, child, crossAxis); } } alreadyComputedNextLayout = 0; mainContentDim += nextContentDim; endLine = i + 1; } // Layout flexible children and allocate empty space // In order to position the elements in the main axis, we have two // controls. The space between the beginning and the first element // and the space between each two elements. var/*float*/ leadingMainDim = 0; var/*float*/ betweenMainDim = 0; // The remaining available space that needs to be allocated var/*float*/ remainingMainDim = 0; if (isMainDimDefined) { remainingMainDim = definedMainDim - mainContentDim; } else { remainingMainDim = fmaxf(mainContentDim, 0) - mainContentDim; } // If there are flexible children in the mix, they are going to fill the // remaining space if (flexibleChildrenCount !== 0) { var/*float*/ flexibleMainDim = remainingMainDim / totalFlexible; var/*float*/ baseMainDim; var/*float*/ boundMainDim; // If the flex share of remaining space doesn't meet min/max bounds, // remove this child from flex calculations. currentFlexChild = firstFlexChild; while (currentFlexChild !== null) { baseMainDim = flexibleMainDim * currentFlexChild.style.flex + getPaddingAndBorderAxis(currentFlexChild, mainAxis); boundMainDim = boundAxis(currentFlexChild, mainAxis, baseMainDim); if (baseMainDim !== boundMainDim) { remainingMainDim -= boundMainDim; totalFlexible -= currentFlexChild.style.flex; } currentFlexChild = currentFlexChild.nextFlexChild; } flexibleMainDim = remainingMainDim / totalFlexible; // The non flexible children can overflow the container, in this case // we should just assume that there is no space available. if (flexibleMainDim < 0) { flexibleMainDim = 0; } currentFlexChild = firstFlexChild; while (currentFlexChild !== null) { // At this point we know the final size of the element in the main // dimension currentFlexChild.layout[dim[mainAxis]] = boundAxis(currentFlexChild, mainAxis, flexibleMainDim * currentFlexChild.style.flex + getPaddingAndBorderAxis(currentFlexChild, mainAxis) ); maxWidth = CSS_UNDEFINED; if (isDimDefined(node, resolvedRowAxis)) { maxWidth = node.layout[dim[resolvedRowAxis]] - paddingAndBorderAxisResolvedRow; } else if (!isMainRowDirection) { maxWidth = parentMaxWidth - getMarginAxis(node, resolvedRowAxis) - paddingAndBorderAxisResolvedRow; } // And we recursively call the layout algorithm for this child layoutNode(/*(java)!layoutContext, */currentFlexChild, maxWidth, direction); child = currentFlexChild; currentFlexChild = currentFlexChild.nextFlexChild; child.nextFlexChild = null; } // We use justifyContent to figure out how to allocate the remaining // space available } else if (justifyContent !== CSS_JUSTIFY_FLEX_START) { if (justifyContent === CSS_JUSTIFY_CENTER) { leadingMainDim = remainingMainDim / 2; } else if (justifyContent === CSS_JUSTIFY_FLEX_END) { leadingMainDim = remainingMainDim; } else if (justifyContent === CSS_JUSTIFY_SPACE_BETWEEN) { remainingMainDim = fmaxf(remainingMainDim, 0); if (flexibleChildrenCount + nonFlexibleChildrenCount - 1 !== 0) { betweenMainDim = remainingMainDim / (flexibleChildrenCount + nonFlexibleChildrenCount - 1); } else { betweenMainDim = 0; } } else if (justifyContent === CSS_JUSTIFY_SPACE_AROUND) { // Space on the edges is half of the space between elements betweenMainDim = remainingMainDim / (flexibleChildrenCount + nonFlexibleChildrenCount); leadingMainDim = betweenMainDim / 2; } } // Position elements in the main axis and compute dimensions // At this point, all the children have their dimensions set. We need to // find their position. In order to do that, we accumulate data in // variables that are also useful to compute the total dimensions of the // container! mainDim += leadingMainDim; for (i = firstComplexMain; i < endLine; ++i) { child = node.children[i]; if (getPositionType(child) === CSS_POSITION_ABSOLUTE && isPosDefined(child, leading[mainAxis])) { // In case the child is position absolute and has left/top being // defined, we override the position to whatever the user said // (and margin/border). child.layout[pos[mainAxis]] = getPosition(child, leading[mainAxis]) + getLeadingBorder(node, mainAxis) + getLeadingMargin(child, mainAxis); } else { // If the child is position absolute (without top/left) or relative, // we put it at the current accumulated offset. child.layout[pos[mainAxis]] += mainDim; // Define the trailing position accordingly. if (isMainDimDefined) { setTrailingPosition(node, child, mainAxis); } // Now that we placed the element, we need to update the variables // We only need to do that for relative elements. Absolute elements // do not take part in that phase. if (getPositionType(child) === CSS_POSITION_RELATIVE) { // The main dimension is the sum of all the elements dimension plus // the spacing. mainDim += betweenMainDim + getDimWithMargin(child, mainAxis); // The cross dimension is the max of the elements dimension since there // can only be one element in that cross dimension. crossDim = fmaxf(crossDim, boundAxis(child, crossAxis, getDimWithMargin(child, crossAxis))); } } } var/*float*/ containerCrossAxis = node.layout[dim[crossAxis]]; if (!isCrossDimDefined) { containerCrossAxis = fmaxf( // For the cross dim, we add both sides at the end because the value // is aggregate via a max function. Intermediate negative values // can mess this computation otherwise boundAxis(node, crossAxis, crossDim + paddingAndBorderAxisCross), paddingAndBorderAxisCross ); } // Position elements in the cross axis for (i = firstComplexCross; i < endLine; ++i) { child = node.children[i]; if (getPositionType(child) === CSS_POSITION_ABSOLUTE && isPosDefined(child, leading[crossAxis])) { // In case the child is absolutely positionned and has a // top/left/bottom/right being set, we override all the previously // computed positions to set it correctly. child.layout[pos[crossAxis]] = getPosition(child, leading[crossAxis]) + getLeadingBorder(node, crossAxis) + getLeadingMargin(child, crossAxis); } else { var/*float*/ leadingCrossDim = leadingPaddingAndBorderCross; // For a relative children, we're either using alignItems (parent) or // alignSelf (child) in order to determine the position in the cross axis if (getPositionType(child) === CSS_POSITION_RELATIVE) { /*eslint-disable */ // This variable is intentionally re-defined as the code is transpiled to a block scope language var/*css_align_t*/ alignItem = getAlignItem(node, child); /*eslint-enable */ if (alignItem === CSS_ALIGN_STRETCH) { // You can only stretch if the dimension has not already been set // previously. if (isUndefined(child.layout[dim[crossAxis]])) { child.layout[dim[crossAxis]] = fmaxf( boundAxis(child, crossAxis, containerCrossAxis - paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)), // You never want to go smaller than padding getPaddingAndBorderAxis(child, crossAxis) ); } } else if (alignItem !== CSS_ALIGN_FLEX_START) { // The remaining space between the parent dimensions+padding and child // dimensions+margin. var/*float*/ remainingCrossDim = containerCrossAxis - paddingAndBorderAxisCross - getDimWithMargin(child, crossAxis); if (alignItem === CSS_ALIGN_CENTER) { leadingCrossDim += remainingCrossDim / 2; } else { // CSS_ALIGN_FLEX_END leadingCrossDim += remainingCrossDim; } } } // And we apply the position child.layout[pos[crossAxis]] += linesCrossDim + leadingCrossDim; // Define the trailing position accordingly. if (isCrossDimDefined) { setTrailingPosition(node, child, crossAxis); } } } linesCrossDim += crossDim; linesMainDim = fmaxf(linesMainDim, mainDim); linesCount += 1; startLine = endLine; } // // // Note(prenaux): More than one line, we need to layout the crossAxis // according to alignContent. // // Note that we could probably remove and handle the one line case // here too, but for the moment this is safer since it won't interfere with // previously working code. // // See specs: // http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#layout-algorithm // section 9.4 // if (linesCount > 1 && isCrossDimDefined) { var/*float*/ nodeCrossAxisInnerSize = node.layout[dim[crossAxis]] - paddingAndBorderAxisCross; var/*float*/ remainingAlignContentDim = nodeCrossAxisInnerSize - linesCrossDim; var/*float*/ crossDimLead = 0; var/*float*/ currentLead = leadingPaddingAndBorderCross; var/*css_align_t*/ alignContent = getAlignContent(node); if (alignContent === CSS_ALIGN_FLEX_END) { currentLead += remainingAlignContentDim; } else if (alignContent === CSS_ALIGN_CENTER) { currentLead += remainingAlignContentDim / 2; } else if (alignContent === CSS_ALIGN_STRETCH) { if (nodeCrossAxisInnerSize > linesCrossDim) { crossDimLead = (remainingAlignContentDim / linesCount); } } var/*int*/ endIndex = 0; for (i = 0; i < linesCount; ++i) { var/*int*/ startIndex = endIndex; // compute the line's height and find the endIndex var/*float*/ lineHeight = 0; for (ii = startIndex; ii < childCount; ++ii) { child = node.children[ii]; if (getPositionType(child) !== CSS_POSITION_RELATIVE) { continue; } if (child.lineIndex !== i) { break; } if (!isUndefined(child.layout[dim[crossAxis]])) { lineHeight = fmaxf( lineHeight, child.layout[dim[crossAxis]] + getMarginAxis(child, crossAxis) ); } } endIndex = ii; lineHeight += crossDimLead; for (ii = startIndex; ii < endIndex; ++ii) { child = node.children[ii]; if (getPositionType(child) !== CSS_POSITION_RELATIVE) { continue; } var/*css_align_t*/ alignContentAlignItem = getAlignItem(node, child); if (alignContentAlignItem === CSS_ALIGN_FLEX_START) { child.layout[pos[crossAxis]] = currentLead + getLeadingMargin(child, crossAxis); } else if (alignContentAlignItem === CSS_ALIGN_FLEX_END) { child.layout[pos[crossAxis]] = currentLead + lineHeight - getTrailingMargin(child, crossAxis) - child.layout[dim[crossAxis]]; } else if (alignContentAlignItem === CSS_ALIGN_CENTER) { var/*float*/ childHeight = child.layout[dim[crossAxis]]; child.layout[pos[crossAxis]] = currentLead + (lineHeight - childHeight) / 2; } else if (alignContentAlignItem === CSS_ALIGN_STRETCH) { child.layout[pos[crossAxis]] = currentLead + getLeadingMargin(child, crossAxis); // TODO(prenaux): Correctly set the height of items with undefined // (auto) crossAxis dimension. } } currentLead += lineHeight; } } var/*bool*/ needsMainTrailingPos = false; var/*bool*/ needsCrossTrailingPos = false; // If the user didn't specify a width or height, and it has not been set // by the container, then we set it via the children. if (!isMainDimDefined) { node.layout[dim[mainAxis]] = fmaxf( // We're missing the last padding at this point to get the final // dimension boundAxis(node, mainAxis, linesMainDim + getTrailingPaddingAndBorder(node, mainAxis)), // We can never assign a width smaller than the padding and borders paddingAndBorderAxisMain ); if (mainAxis === CSS_FLEX_DIRECTION_ROW_REVERSE || mainAxis === CSS_FLEX_DIRECTION_COLUMN_REVERSE) { needsMainTrailingPos = true; } } if (!isCrossDimDefined) { node.layout[dim[crossAxis]] = fmaxf( // For the cross dim, we add both sides at the end because the value // is aggregate via a max function. Intermediate negative values // can mess this computation otherwise boundAxis(node, crossAxis, linesCrossDim + paddingAndBorderAxisCross), paddingAndBorderAxisCross ); if (crossAxis === CSS_FLEX_DIRECTION_ROW_REVERSE || crossAxis === CSS_FLEX_DIRECTION_COLUMN_REVERSE) { needsCrossTrailingPos = true; } } // Set trailing position if necessary if (needsMainTrailingPos || needsCrossTrailingPos) { for (i = 0; i < childCount; ++i) { child = node.children[i]; if (needsMainTrailingPos) { setTrailingPosition(node, child, mainAxis); } if (needsCrossTrailingPos) { setTrailingPosition(node, child, crossAxis); } } } // Calculate dimensions for absolutely positioned elements currentAbsoluteChild = firstAbsoluteChild; while (currentAbsoluteChild !== null) { // Pre-fill dimensions when using absolute position and both offsets for // the axis are defined (either both left and right or top and bottom). for (ii = 0; ii < 2; ii++) { axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN; if (!isUndefined(node.layout[dim[axis]]) && !isDimDefined(currentAbsoluteChild, axis) && isPosDefined(currentAbsoluteChild, leading[axis]) && isPosDefined(currentAbsoluteChild, trailing[axis])) { currentAbsoluteChild.layout[dim[axis]] = fmaxf( boundAxis(currentAbsoluteChild, axis, node.layout[dim[axis]] - getBorderAxis(node, axis) - getMarginAxis(currentAbsoluteChild, axis) - getPosition(currentAbsoluteChild, leading[axis]) - getPosition(currentAbsoluteChild, trailing[axis]) ), // You never want to go smaller than padding getPaddingAndBorderAxis(currentAbsoluteChild, axis) ); } if (isPosDefined(currentAbsoluteChild, trailing[axis]) && !isPosDefined(currentAbsoluteChild, leading[axis])) { currentAbsoluteChild.layout[leading[axis]] = node.layout[dim[axis]] - currentAbsoluteChild.layout[dim[axis]] - getPosition(currentAbsoluteChild, trailing[axis]); } } child = currentAbsoluteChild; currentAbsoluteChild = currentAbsoluteChild.nextAbsoluteChild; child.nextAbsoluteChild = null; } } function layoutNode(node, parentMaxWidth, parentDirection) { node.shouldUpdate = true; var direction = node.style.direction || CSS_DIRECTION_LTR; var skipLayout = !node.isDirty && node.lastLayout && node.lastLayout.requestedHeight === node.layout.height && node.lastLayout.requestedWidth === node.layout.width && node.lastLayout.parentMaxWidth === parentMaxWidth && node.lastLayout.direction === direction; if (skipLayout) { node.layout.width = node.lastLayout.width; node.layout.height = node.lastLayout.height; node.layout.top = node.lastLayout.top; node.layout.left = node.lastLayout.left; } else { if (!node.lastLayout) { node.lastLayout = {}; } node.lastLayout.requestedWidth = node.layout.width; node.lastLayout.requestedHeight = node.layout.height; node.lastLayout.parentMaxWidth = parentMaxWidth; node.lastLayout.direction = direction; // Reset child layouts node.children.forEach(function(child) { child.layout.width = undefined; child.layout.height = undefined; child.layout.top = 0; child.layout.left = 0; }); layoutNodeImpl(node, parentMaxWidth, parentDirection); node.lastLayout.width = node.layout.width; node.lastLayout.height = node.layout.height; node.lastLayout.top = node.layout.top; node.lastLayout.left = node.layout.left; } } return { layoutNodeImpl: layoutNodeImpl, computeLayout: layoutNode, fillNodes: fillNodes }; })(); // This module export is only used for the purposes of unit testing this file. When // the library is packaged this file is included within css-layout.js which forms // the public API. if (true) { module.exports = computeLayout; } return function(node) { /*eslint-disable */ // disabling ESLint because this code relies on the above include computeLayout.fillNodes(node); computeLayout.computeLayout(node); /*eslint-enable */ }; })); /***/ }), /* 6 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "throttle", function() { return throttle; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "none", function() { return none; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isClick", function() { return isClick; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "createCanvas", function() { return createCanvas; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "createImage", function() { return createImage; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDpr", function() { return getDpr; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "STATE", function() { return STATE; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "repaintChildren", function() { return repaintChildren; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "repaintTree", function() { return repaintTree; }); function throttle(fn, threshhold, scope) { threshhold || (threshhold = 250); var last, deferTimer; return function () { var context = scope || this; var now = +new Date(), args = arguments; if (last && now < last + threshhold) { // hold on to it clearTimeout(deferTimer); deferTimer = setTimeout(function () { last = now; fn.apply(context, args); }, threshhold); } else { last = now; fn.apply(context, args); } }; } /* istanbul ignore next */ function none() {} /** * 根据触摸时长和触摸位置变化来判断是否属于点击事件 */ function isClick(touchMsg) { var start = touchMsg.touchstart; var end = touchMsg.touchend; if (!start || !end || !start.timeStamp || !end.timeStamp || start.pageX === undefined || start.pageY === undefined || end.pageX === undefined || end.pageY === undefined) { return false; } var startPosX = start.pageX; var startPosY = start.pageY; var endPosX = end.pageX; var endPosY = end.pageY; var touchTimes = end.timeStamp - start.timeStamp; return !!(Math.abs(endPosY - startPosY) < 30 && Math.abs(endPosX - startPosX) < 30 && touchTimes < 300); } function createCanvas() { /* istanbul ignore if*/ if (typeof wx !== "undefined") { return wx.createCanvas(); } else { return document.createElement('canvas'); } } function createImage() { /* istanbul ignore if*/ if (typeof wx !== "undefined") { return wx.createImage(); } else { return document.createElement('img'); } } function getDpr() { /* istanbul ignore if*/ if (typeof wx !== "undefined") { return wx.getSystemInfoSync().devicePixelRatio; } else { return window.devicePixelRatio; } } var STATE = { "UNINIT": "UNINIT", "INITED": "INITED", "RENDERED": "RENDERED", "CLEAR": "CLEAR" }; var repaintChildren = function repaintChildren(children) { children.forEach(function (child) { child.repaint(); repaintChildren(child.children); }); }; var repaintTree = function repaintTree(tree) { tree.repaint(); tree.children.forEach(function (child) { child.repaint(); repaintTree(child); }); }; /***/ }), /* 7 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var nodeToJson = __webpack_require__(8); var xmlToNodeobj = __webpack_require__(10); var x2xmlnode = __webpack_require__(10); var buildOptions = __webpack_require__(9).buildOptions; var validator = __webpack_require__(12); exports.parse = function (xmlData, options, validationOption) { if (validationOption) { if (validationOption === true) validationOption = {}; var result = validator.validate(xmlData, validationOption); if (result !== true) { throw Error(result.err.msg); } } options = buildOptions(options, x2xmlnode.defaultOptions, x2xmlnode.props); return nodeToJson.convertToJson(xmlToNodeobj.getTraversalObj(xmlData, options), options); }; /***/ }), /* 8 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var util = __webpack_require__(9); var convertToJson = function convertToJson(node, options) { var jObj = { name: node.tagname }; //when no child node or attr is present if ((!node.child || util.isEmptyObject(node.child)) && (!node.attrsMap || util.isEmptyObject(node.attrsMap))) { return util.isExist(node.val) && !!node.val ? node.val : jObj; } else { //otherwise create a textnode if node has some text if (util.isExist(node.val)) { if (!(typeof node.val === 'string' && (node.val === '' || node.val === options.cdataPositionChar))) { if (options.arrayMode === "strict") { jObj[options.textNodeName] = [node.val]; } else { jObj[options.textNodeName] = node.val; } } } } util.merge(jObj, node.attrsMap, options.arrayMode); jObj.children = []; node.children.forEach(function (child) { jObj.children.push(convertToJson(child, options)); }); // const keys = Object.keys(node.child); // for (let index = 0; index < keys.length; index++) { // var tagname = keys[index]; // if (node.child[tagname] && node.child[tagname].length > 1) { // jObj[tagname] = []; // for (var tag in node.child[tagname]) { // jObj[tagname].push(convertToJson(node.child[tagname][tag], options)); // } // } else { // if(options.arrayMode === true){ // const result = convertToJson(node.child[tagname][0], options) // if(typeof result === 'object') // jObj[tagname] = [ result ]; // else // jObj[tagname] = result; // }else if(options.arrayMode === "strict"){ // jObj[tagname] = [convertToJson(node.child[tagname][0], options) ]; // }else{ // jObj[tagname] = convertToJson(node.child[tagname][0], options); // } // } // } //add value return jObj; }; exports.convertToJson = convertToJson; /***/ }), /* 9 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var getAllMatches = function getAllMatches(string, regex) { var matches = []; var match = regex.exec(string); while (match) { var allmatches = []; var len = match.length; for (var index = 0; index < len; index++) { allmatches.push(match[index]); } matches.push(allmatches); match = regex.exec(string); } return matches; }; var doesMatch = function doesMatch(string, regex) { var match = regex.exec(string); return !(match === null || typeof match === 'undefined'); }; var doesNotMatch = function doesNotMatch(string, regex) { return !doesMatch(string, regex); }; exports.isExist = function (v) { return typeof v !== 'undefined'; }; exports.isEmptyObject = function (obj) { return Object.keys(obj).length === 0; }; /** * Copy all the properties of a into b. * @param {*} target * @param {*} a */ exports.merge = function (target, a, arrayMode) { if (a) { var keys = Object.keys(a); // will return an array of own properties var len = keys.length; //don't make it inline for (var i = 0; i < len; i++) { if (arrayMode === 'strict') { target[keys[i]] = [a[keys[i]]]; } else { target[keys[i]] = a[keys[i]]; } } } }; /* exports.merge =function (b,a){ return Object.assign(b,a); } */ exports.getValue = function (v) { if (exports.isExist(v)) { return v; } else { return ''; } }; // const fakeCall = function(a) {return a;}; // const fakeCallNoReturn = function() {}; exports.buildOptions = function (options, defaultOptions, props) { var newOptions = {}; if (!options) { return defaultOptions; //if there are not options } for (var i = 0; i < props.length; i++) { if (options[props[i]] !== undefined) { newOptions[props[i]] = options[props[i]]; } else { newOptions[props[i]] = defaultOptions[props[i]]; } } return newOptions; }; exports.doesMatch = doesMatch; exports.doesNotMatch = doesNotMatch; exports.getAllMatches = getAllMatches; /***/ }), /* 10 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var util = __webpack_require__(9); var buildOptions = __webpack_require__(9).buildOptions; var xmlNode = __webpack_require__(11); var TagType = { OPENING: 1, CLOSING: 2, SELF: 3, CDATA: 4 }; var regx = '<((!\\[CDATA\\[([\\s\\S]*?)(]]>))|(([\\w:\\-._]*:)?([\\w:\\-._]+))([^>]*)>|((\\/)(([\\w:\\-._]*:)?([\\w:\\-._]+))\\s*>))([^<]*)'; //const tagsRegx = new RegExp("<(\\/?[\\w:\\-\._]+)([^>]*)>(\\s*"+cdataRegx+")*([^<]+)?","g"); //const tagsRegx = new RegExp("<(\\/?)((\\w*:)?([\\w:\\-\._]+))([^>]*)>([^<]*)("+cdataRegx+"([^<]*))*([^<]+)?","g"); //polyfill if (!Number.parseInt && window.parseInt) { Number.parseInt = window.parseInt; } if (!Number.parseFloat && window.parseFloat) { Number.parseFloat = window.parseFloat; } var defaultOptions = { attributeNamePrefix: '@_', attrNodeName: false, textNodeName: '#text', ignoreAttributes: true, ignoreNameSpace: false, allowBooleanAttributes: false, //a tag can have attributes without any value //ignoreRootElement : false, parseNodeValue: true, parseAttributeValue: false, arrayMode: false, trimValues: true, //Trim string values of tag and attributes cdataTagName: false, cdataPositionChar: '\\c', localeRange: '', tagValueProcessor: function tagValueProcessor(a) { return a; }, attrValueProcessor: function attrValueProcessor(a) { return a; }, stopNodes: [] //decodeStrict: false, }; exports.defaultOptions = defaultOptions; var props = ['attributeNamePrefix', 'attrNodeName', 'textNodeName', 'ignoreAttributes', 'ignoreNameSpace', 'allowBooleanAttributes', 'parseNodeValue', 'parseAttributeValue', 'arrayMode', 'trimValues', 'cdataTagName', 'cdataPositionChar', 'localeRange', 'tagValueProcessor', 'attrValueProcessor', 'parseTrueNumberOnly', 'stopNodes']; exports.props = props; var getTraversalObj = function getTraversalObj(xmlData, options) { options = buildOptions(options, defaultOptions, props); //xmlData = xmlData.replace(/\r?\n/g, " ");//make it single line xmlData = xmlData.replace(//g, ''); //Remove comments var xmlObj = new xmlNode('!xml'); var currentNode = xmlObj; regx = regx.replace(/\[\\w/g, '[' + options.localeRange + '\\w'); var tagsRegx = new RegExp(regx, 'g'); var tag = tagsRegx.exec(xmlData); var nextTag = tagsRegx.exec(xmlData); while (tag) { var tagType = checkForTagType(tag); if (tagType === TagType.CLOSING) { //add parsed data to parent node if (currentNode.parent && tag[14]) { currentNode.parent.val = util.getValue(currentNode.parent.val) + '' + processTagValue(tag, options, currentNode.parent.tagname); } if (options.stopNodes.length && options.stopNodes.includes(currentNode.tagname)) { currentNode.child = []; if (currentNode.attrsMap == undefined) { currentNode.attrsMap = {}; } currentNode.val = xmlData.substr(currentNode.startIndex + 1, tag.index - currentNode.startIndex - 1); } currentNode = currentNode.parent; } else if (tagType === TagType.CDATA) { if (options.cdataTagName) { //add cdata node var childNode = new xmlNode(options.cdataTagName, currentNode, tag[3]); childNode.attrsMap = buildAttributesMap(tag[8], options); currentNode.addChild(childNode); //for backtracking currentNode.val = util.getValue(currentNode.val) + options.cdataPositionChar; //add rest value to parent node if (tag[14]) { currentNode.val += processTagValue(tag, options); } } else { currentNode.val = (currentNode.val || '') + (tag[3] || '') + processTagValue(tag, options); } } else if (tagType === TagType.SELF) { if (currentNode && tag[14]) { currentNode.val = util.getValue(currentNode.val) + '' + processTagValue(tag, options); } var _childNode = new xmlNode(options.ignoreNameSpace ? tag[7] : tag[5], currentNode, ''); if (tag[8] && tag[8].length > 0) { tag[8] = tag[8].substr(0, tag[8].length - 1); } _childNode.attrsMap = buildAttributesMap(tag[8], options); currentNode.addChild(_childNode); } else { //TagType.OPENING var _childNode2 = new xmlNode(options.ignoreNameSpace ? tag[7] : tag[5], currentNode, processTagValue(tag, options)); if (options.stopNodes.length && options.stopNodes.includes(_childNode2.tagname)) { _childNode2.startIndex = tag.index + tag[1].length; } _childNode2.attrsMap = buildAttributesMap(tag[8], options); currentNode.addChild(_childNode2); currentNode = _childNode2; } tag = nextTag; nextTag = tagsRegx.exec(xmlData); } return xmlObj; }; function processTagValue(parsedTags, options, parentTagName) { var tagName = parsedTags[7] || parentTagName; var val = parsedTags[14]; if (val) { if (options.trimValues) { val = val.trim(); } val = options.tagValueProcessor(val, tagName); val = parseValue(val, options.parseNodeValue, options.parseTrueNumberOnly); } return val; } function checkForTagType(match) { if (match[4] === ']]>') { return TagType.CDATA; } else if (match[10] === '/') { return TagType.CLOSING; } else if (typeof match[8] !== 'undefined' && match[8].substr(match[8].length - 1) === '/') { return TagType.SELF; } else { return TagType.OPENING; } } function resolveNameSpace(tagname, options) { if (options.ignoreNameSpace) { var tags = tagname.split(':'); var prefix = tagname.charAt(0) === '/' ? '/' : ''; if (tags[0] === 'xmlns') { return ''; } if (tags.length === 2) { tagname = prefix + tags[1]; } } return tagname; } function parseValue(val, shouldParse, parseTrueNumberOnly) { if (shouldParse && typeof val === 'string') { var parsed; if (val.trim() === '' || isNaN(val)) { parsed = val === 'true' ? true : val === 'false' ? false : val; } else { if (val.indexOf('0x') !== -1) { //support hexa decimal parsed = Number.parseInt(val, 16); } else if (val.indexOf('.') !== -1) { parsed = Number.parseFloat(val); } else { parsed = Number.parseInt(val, 10); } if (parseTrueNumberOnly) { parsed = String(parsed) === val ? parsed : val; } } return parsed; } else { if (util.isExist(val)) { return val; } else { return ''; } } } //TODO: change regex to capture NS //const attrsRegx = new RegExp("([\\w\\-\\.\\:]+)\\s*=\\s*(['\"])((.|\n)*?)\\2","gm"); var attrsRegx = new RegExp('([^\\s=]+)\\s*(=\\s*([\'"])(.*?)\\3)?', 'g'); function buildAttributesMap(attrStr, options) { if (!options.ignoreAttributes && typeof attrStr === 'string') { attrStr = attrStr.replace(/\r?\n/g, ' '); //attrStr = attrStr || attrStr.trim(); var matches = util.getAllMatches(attrStr, attrsRegx); var len = matches.length; //don't make it inline var attrs = {}; for (var i = 0; i < len; i++) { var attrName = resolveNameSpace(matches[i][1], options); if (attrName.length) { if (matches[i][4] !== undefined) { if (options.trimValues) { matches[i][4] = matches[i][4].trim(); } matches[i][4] = options.attrValueProcessor(matches[i][4], attrName); attrs[options.attributeNamePrefix + attrName] = parseValue(matches[i][4], options.parseAttributeValue, options.parseTrueNumberOnly); } else if (options.allowBooleanAttributes) { attrs[options.attributeNamePrefix + attrName] = true; } } } if (!Object.keys(attrs).length) { return; } if (options.attrNodeName) { var attrCollection = {}; attrCollection[options.attrNodeName] = attrs; return attrCollection; } return attrs; } } exports.getTraversalObj = getTraversalObj; /***/ }), /* 11 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; module.exports = function (tagname, parent, val) { this.tagname = tagname; this.parent = parent; this.child = {}; //child tags this.attrsMap = {}; //attributes map this.children = []; this.val = val; //text only this.addChild = function (child) { this.children.push(child); if (Array.isArray(this.child[child.tagname])) { //already presents this.child[child.tagname].push(child); } else { this.child[child.tagname] = [child]; } }; }; /***/ }), /* 12 */ /***/ (function(module, exports, __webpack_require__) { "use strict"; var util = __webpack_require__(9); var defaultOptions = { allowBooleanAttributes: false, //A tag can have attributes without any value localeRange: 'a-zA-Z' }; var props = ['allowBooleanAttributes', 'localeRange']; //const tagsPattern = new RegExp("<\\/?([\\w:\\-_\.]+)\\s*\/?>","g"); exports.validate = function (xmlData, options) { options = util.buildOptions(options, defaultOptions, props); //xmlData = xmlData.replace(/(\r\n|\n|\r)/gm,"");//make it single line //xmlData = xmlData.replace(/(^\s*<\?xml.*?\?>)/g,"");//Remove XML starting tag //xmlData = xmlData.replace(/()/g,"");//Remove DOCTYPE var tags = []; var tagFound = false; if (xmlData[0] === "\uFEFF") { // check for byte order mark (BOM) xmlData = xmlData.substr(1); } var regxAttrName = new RegExp('^[_w][\\w\\-.:]*$'.replace('_w', '_' + options.localeRange)); var regxTagName = new RegExp('^([w]|_)[\\w.\\-_:]*'.replace('([w', '([' + options.localeRange)); for (var i = 0; i < xmlData.length; i++) { if (xmlData[i] === '<') { //starting of tag //read until you reach to '>' avoiding any '>' in attribute value i++; if (xmlData[i] === '?') { i = readPI(xmlData, ++i); if (i.err) { return i; } } else if (xmlData[i] === '!') { i = readCommentAndCDATA(xmlData, i); continue; } else { var closingTag = false; if (xmlData[i] === '/') { //closing tag closingTag = true; i++; } //read tagname var tagName = ''; for (; i < xmlData.length && xmlData[i] !== '>' && xmlData[i] !== ' ' && xmlData[i] !== '\t' && xmlData[i] !== '\n' && xmlData[i] !== '\r'; i++) { tagName += xmlData[i]; } tagName = tagName.trim(); //console.log(tagName); if (tagName[tagName.length - 1] === '/') { //self closing tag without attributes tagName = tagName.substring(0, tagName.length - 1); continue; } if (!validateTagName(tagName, regxTagName)) { return { err: { code: 'InvalidTag', msg: 'Tag ' + tagName + ' is an invalid name.' } }; } var result = readAttributeStr(xmlData, i); if (result === false) { return { err: { code: 'InvalidAttr', msg: 'Attributes for "' + tagName + '" have open quote.' } }; } var attrStr = result.value; i = result.index; if (attrStr[attrStr.length - 1] === '/') { //self closing tag attrStr = attrStr.substring(0, attrStr.length - 1); var isValid = validateAttributeString(attrStr, options, regxAttrName); if (isValid === true) { tagFound = true; //continue; //text may presents after self closing tag } else { return isValid; } } else if (closingTag) { if (!result.tagClosed) { return { err: { code: 'InvalidTag', msg: 'closing tag "' + tagName + "\" don't have proper closing." } }; } else if (attrStr.trim().length > 0) { return { err: { code: 'InvalidTag', msg: 'closing tag "' + tagName + "\" can't have attributes or invalid starting." } }; } else { var otg = tags.pop(); if (tagName !== otg) { return { err: { code: 'InvalidTag', msg: 'closing tag ' + otg + ' is expected inplace of ' + tagName + '.' } }; } } } else { var _isValid = validateAttributeString(attrStr, options, regxAttrName); if (_isValid !== true) { return _isValid; } tags.push(tagName); tagFound = true; } //skip tag text value //It may include comments and CDATA value for (i++; i < xmlData.length; i++) { if (xmlData[i] === '<') { if (xmlData[i + 1] === '!') { //comment or CADATA i++; i = readCommentAndCDATA(xmlData, i); continue; } else { break; } } } //end of reading tag text value if (xmlData[i] === '<') { i--; } } } else { if (xmlData[i] === ' ' || xmlData[i] === '\t' || xmlData[i] === '\n' || xmlData[i] === '\r') { continue; } return { err: { code: 'InvalidChar', msg: 'char ' + xmlData[i] + ' is not expected .' } }; } } if (!tagFound) { return { err: { code: 'InvalidXml', msg: 'Start tag expected.' } }; } else if (tags.length > 0) { return { err: { code: 'InvalidXml', msg: 'Invalid ' + JSON.stringify(tags, null, 4).replace(/\r?\n/g, '') + ' found.' } }; } return true; }; /** * Read Processing insstructions and skip * @param {*} xmlData * @param {*} i */ function readPI(xmlData, i) { var start = i; for (; i < xmlData.length; i++) { if (xmlData[i] == '?' || xmlData[i] == ' ') { //tagname var tagname = xmlData.substr(start, i - start); if (i > 5 && tagname === 'xml') { return { err: { code: 'InvalidXml', msg: 'XML declaration allowed only at the start of the document.' } }; } else if (xmlData[i] == '?' && xmlData[i + 1] == '>') { //check if valid attribut string i++; break; } else { continue; } } } return i; } function readCommentAndCDATA(xmlData, i) { if (xmlData.length > i + 5 && xmlData[i + 1] === '-' && xmlData[i + 2] === '-') { //comment for (i += 3; i < xmlData.length; i++) { if (xmlData[i] === '-' && xmlData[i + 1] === '-' && xmlData[i + 2] === '>') { i += 2; break; } } } else if (xmlData.length > i + 8 && xmlData[i + 1] === 'D' && xmlData[i + 2] === 'O' && xmlData[i + 3] === 'C' && xmlData[i + 4] === 'T' && xmlData[i + 5] === 'Y' && xmlData[i + 6] === 'P' && xmlData[i + 7] === 'E') { var angleBracketsCount = 1; for (i += 8; i < xmlData.length; i++) { if (xmlData[i] === '<') { angleBracketsCount++; } else if (xmlData[i] === '>') { angleBracketsCount--; if (angleBracketsCount === 0) { break; } } } } else if (xmlData.length > i + 9 && xmlData[i + 1] === '[' && xmlData[i + 2] === 'C' && xmlData[i + 3] === 'D' && xmlData[i + 4] === 'A' && xmlData[i + 5] === 'T' && xmlData[i + 6] === 'A' && xmlData[i + 7] === '[') { for (i += 8; i < xmlData.length; i++) { if (xmlData[i] === ']' && xmlData[i + 1] === ']' && xmlData[i + 2] === '>') { i += 2; break; } } } return i; } var doubleQuote = '"'; var singleQuote = "'"; /** * Keep reading xmlData until '<' is found outside the attribute value. * @param {string} xmlData * @param {number} i */ function readAttributeStr(xmlData, i) { var attrStr = ''; var startChar = ''; var tagClosed = false; for (; i < xmlData.length; i++) { if (xmlData[i] === doubleQuote || xmlData[i] === singleQuote) { if (startChar === '') { startChar = xmlData[i]; } else if (startChar !== xmlData[i]) { //if vaue is enclosed with double quote then single quotes are allowed inside the value and vice versa continue; } else { startChar = ''; } } else if (xmlData[i] === '>') { if (startChar === '') { tagClosed = true; break; } } attrStr += xmlData[i]; } if (startChar !== '') { return false; } return { value: attrStr, index: i, tagClosed: tagClosed }; } /** * Select all the attributes whether valid or invalid. */ var validAttrStrRegxp = new RegExp('(\\s*)([^\\s=]+)(\\s*=)?(\\s*([\'"])(([\\s\\S])*?)\\5)?', 'g'); //attr, ="sd", a="amit's", a="sd"b="saf", ab cd="" function validateAttributeString(attrStr, options, regxAttrName) { //console.log("start:"+attrStr+":end"); //if(attrStr.trim().length === 0) return true; //empty string var matches = util.getAllMatches(attrStr, validAttrStrRegxp); var attrNames = {}; for (var i = 0; i < matches.length; i++) { //console.log(matches[i]); if (matches[i][1].length === 0) { //nospace before attribute name: a="sd"b="saf" return { err: { code: 'InvalidAttr', msg: 'attribute ' + matches[i][2] + ' has no space in starting.' } }; } else if (matches[i][3] === undefined && !options.allowBooleanAttributes) { //independent attribute: ab return { err: { code: 'InvalidAttr', msg: 'boolean attribute ' + matches[i][2] + ' is not allowed.' } }; } /* else if(matches[i][6] === undefined){//attribute without value: ab= return { err: { code:"InvalidAttr",msg:"attribute " + matches[i][2] + " has no value assigned."}}; } */ var attrName = matches[i][2]; if (!validateAttrName(attrName, regxAttrName)) { return { err: { code: 'InvalidAttr', msg: 'attribute ' + attrName + ' is an invalid name.' } }; } /*if (!attrNames.hasOwnProperty(attrName)) {*/ if (!Object.prototype.hasOwnProperty.call(attrNames, attrName)) { //check for duplicate attribute. attrNames[attrName] = 1; } else { return { err: { code: 'InvalidAttr', msg: 'attribute ' + attrName + ' is repeated.' } }; } } return true; } // const validAttrRegxp = /^[_a-zA-Z][\w\-.:]*$/; function validateAttrName(attrName, regxAttrName) { // const validAttrRegxp = new RegExp(regxAttrName); return util.doesMatch(attrName, regxAttrName); } //const startsWithXML = new RegExp("^[Xx][Mm][Ll]"); // startsWith = /^([a-zA-Z]|_)[\w.\-_:]*/; function validateTagName(tagname, regxTagName) { /*if(util.doesMatch(tagname,startsWithXML)) return false; else*/ return !util.doesNotMatch(tagname, regxTagName); } /***/ }), /* 13 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return BitMapFont; }); /* harmony import */ var _imageManager__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(14); /* harmony import */ var _pool__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4); 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); return Constructor; } var bitMapPool = new _pool__WEBPACK_IMPORTED_MODULE_1__["default"]('bitMapPool'); var Emitter = __webpack_require__(3); /** * http://www.angelcode.com/products/bmfont/doc/file_format.html */ var BitMapFont = /*#__PURE__*/function () { function BitMapFont(name, src, config) { var _this = this; _classCallCheck(this, BitMapFont); var cache = bitMapPool.get(name); if (cache) { return cache; } this.config = config; this.chars = this.parseConfig(config); this.ready = false; this.event = new Emitter(); this.texture = _imageManager__WEBPACK_IMPORTED_MODULE_0__["default"].loadImage(src, function (texture, fromCache) { if (fromCache) { _this.texture = texture; } _this.ready = true; _this.event.emit('text__load__done'); }); bitMapPool.set(name, this); } _createClass(BitMapFont, [{ key: "parseConfig", value: function parseConfig(fntText) { fntText = fntText.split("\r\n").join("\n"); var lines = fntText.split("\n"); var charsCount = this.getConfigByKey(lines[3], "count"); this.lineHeight = this.getConfigByKey(lines[1], 'lineHeight'); this.fontSize = this.getConfigByKey(lines[0], 'size'); var chars = {}; for (var i = 4; i < 4 + charsCount; i++) { var charText = lines[i]; var letter = String.fromCharCode(this.getConfigByKey(charText, "id")); var c = {}; chars[letter] = c; c["x"] = this.getConfigByKey(charText, "x"); c["y"] = this.getConfigByKey(charText, "y"); c["w"] = this.getConfigByKey(charText, "width"); c["h"] = this.getConfigByKey(charText, "height"); c["offX"] = this.getConfigByKey(charText, "xoffset"); c["offY"] = this.getConfigByKey(charText, "yoffset"); c["xadvance"] = this.getConfigByKey(charText, "xadvance"); } return chars; } }, { key: "getConfigByKey", value: function getConfigByKey(configText, key) { var itemConfigTextList = configText.split(" "); for (var i = 0, length = itemConfigTextList.length; i < length; i++) { var itemConfigText = itemConfigTextList[i]; if (key === itemConfigText.substring(0, key.length)) { var value = itemConfigText.substring(key.length + 1); return parseInt(value); } } return 0; } }]); return BitMapFont; }(); /***/ }), /* 14 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var _pool__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4); /* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6); 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); return Constructor; } var imgPool = new _pool__WEBPACK_IMPORTED_MODULE_0__["default"]('imgPool'); var ImageManager = /*#__PURE__*/function () { function ImageManager() { _classCallCheck(this, ImageManager); } _createClass(ImageManager, [{ key: "getRes", value: function getRes(src) { return imgPool.get(src); } }, { key: "loadImage", value: function loadImage(src) { var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _util__WEBPACK_IMPORTED_MODULE_1__["none"]; var img = null; var cache = this.getRes(src); if (!src) { return img; } // 图片已经被加载过,直接返回图片并且执行回调 if (cache && cache.loadDone) { img = cache; callback(img, true); } else if (cache && !cache.loadDone) { // 图片正在加载过程中,返回图片并且等待图片加载完成执行回调 img = cache; cache.onloadcbks.push(callback); } else { // 创建图片,将回调函数推入回调函数栈 img = Object(_util__WEBPACK_IMPORTED_MODULE_1__["createImage"])(); img.onloadcbks = [callback]; imgPool.set(src, img); img.onload = function () { img.onloadcbks.forEach(function (fn) { return fn(img, false); }); img.onloadcbks = []; img.loadDone = true; }; img.onerror = function (e) { console.log('img load error', e); }; img.src = src; } return img; } }]); return ImageManager; }(); /* harmony default export */ __webpack_exports__["default"] = (new ImageManager()); /***/ }), /* 15 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var _view_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(16); /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "View", function() { return _view_js__WEBPACK_IMPORTED_MODULE_0__["default"]; }); /* harmony import */ var _image_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(17); /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Image", function() { return _image_js__WEBPACK_IMPORTED_MODULE_1__["default"]; }); /* harmony import */ var _text_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(18); /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Text", function() { return _text_js__WEBPACK_IMPORTED_MODULE_2__["default"]; }); /* harmony import */ var _scrollview_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(19); /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ScrollView", function() { return _scrollview_js__WEBPACK_IMPORTED_MODULE_3__["default"]; }); /* harmony import */ var _bitmaptext_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(21); /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "BitMapText", function() { return _bitmaptext_js__WEBPACK_IMPORTED_MODULE_4__["default"]; }); /***/ }), /* 16 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return View; }); /* harmony import */ var _elements_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1); function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } 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); return Constructor; } 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 } }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } 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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } var View = /*#__PURE__*/function (_Element) { _inherits(View, _Element); var _super = _createSuper(View); function View(_ref) { var _this; var _ref$style = _ref.style, style = _ref$style === void 0 ? {} : _ref$style, _ref$props = _ref.props, props = _ref$props === void 0 ? {} : _ref$props, _ref$idName = _ref.idName, idName = _ref$idName === void 0 ? '' : _ref$idName, _ref$className = _ref.className, className = _ref$className === void 0 ? '' : _ref$className; _classCallCheck(this, View); _this = _super.call(this, { props: props, idName: idName, className: className, style: style }); _this.type = 'View'; _this.ctx = null; _this.renderBoxes = []; return _this; } _createClass(View, [{ key: "destroySelf", value: function destroySelf() { this.isDestroyed = true; this.children = null; this.root = null; } // 有些节点仅仅作为容器,实际上不需要任何渲染逻辑,这里加个判断可以提高性能 }, { key: "checkNeedRender", value: function checkNeedRender() { var style = this.style || {}; var borderColor = style.borderColor; return !!(style.backgroundColor || style.borderWidth && borderColor || style.borderTopWidth && (borderColor || style.borderTopColor) || style.borderBottomWidth && (borderColor || style.borderBottomColor) || style.borderLeftWidth && (borderColor || style.borderLeftColor) || style.borderRightWidth && (borderColor || style.borderRightColor)); } }, { key: "render", value: function render(ctx, layoutBox) { var style = this.style || {}; var box = layoutBox || this.layoutBox; ctx.save(); var borderWidth = style.borderWidth || 0; var drawX = box.absoluteX; var drawY = box.absoluteY; var borderLeftWidth = style.borderLeftWidth || borderWidth; var borderRightWidth = style.borderRightWidth || borderWidth; var borderTopWidth = style.borderTopWidth || borderWidth; var borderBottomWidth = style.borderBottomWidth || borderWidth; this.renderBorder(ctx, layoutBox); if (style.backgroundColor) { ctx.fillStyle = style.backgroundColor; ctx.fillRect(drawX + borderLeftWidth, drawY + borderRightWidth, box.width - (borderLeftWidth + borderRightWidth), box.height - (borderTopWidth + borderBottomWidth)); } ctx.restore(); } }, { key: "insert", value: function insert(ctx, box) { this.ctx = ctx; if (!box) { box = this.layoutBox; } this.renderBoxes.push({ ctx: ctx, box: box }); this.render(ctx, box); } }, { key: "repaint", value: function repaint() { var _this2 = this; this.renderBoxes.forEach(function (item) { _this2.render(item.ctx, item.box); }); } }]); return View; }(_elements_js__WEBPACK_IMPORTED_MODULE_0__["default"]); /***/ }), /* 17 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Image; }); /* harmony import */ var _elements_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1); /* harmony import */ var _common_imageManager__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14); function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } 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); return Constructor; } 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 } }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } 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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } var Image = /*#__PURE__*/function (_Element) { _inherits(Image, _Element); var _super = _createSuper(Image); function Image(opts) { var _this; _classCallCheck(this, Image); var _opts$style = opts.style, style = _opts$style === void 0 ? {} : _opts$style, _opts$props = opts.props, props = _opts$props === void 0 ? {} : _opts$props, _opts$idName = opts.idName, idName = _opts$idName === void 0 ? '' : _opts$idName, _opts$className = opts.className, className = _opts$className === void 0 ? '' : _opts$className, _opts$src = opts.src, src = _opts$src === void 0 ? '' : _opts$src; _this = _super.call(this, { props: props, idName: idName, className: className, style: style }); _this.imgsrc = src; Object.defineProperty(_assertThisInitialized(_this), "src", { get: function get() { return this.imgsrc; }, set: function set(newValue) { var _this2 = this; if (newValue !== this.imgsrc) { this.imgsrc = newValue; _common_imageManager__WEBPACK_IMPORTED_MODULE_1__["default"].loadImage(this.src, function (img) { _this2.img = img; /*this.repaint();*/ _this2.emit('repaint'); }); } }, enumerable: true, configurable: true }); _this.type = 'Image'; _this.renderBoxes = []; return _this; } _createClass(Image, [{ key: "repaint", value: function repaint() { var _this3 = this; this.renderBoxes.forEach(function (item) { _this3.renderImg(item.ctx, item.box, false); }); } // 子类填充实现 }, { key: "destroySelf", value: function destroySelf() { this.isDestroyed = true; this.img = null; delete this.src; this.root = null; } }, { key: "renderImg", value: function renderImg(ctx, layoutBox) { var needEmitEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true; if (!this.img) { return; } var style = this.style || {}; var box = layoutBox || this.layoutBox; ctx.save(); if (style.borderColor) { ctx.strokeStyle = style.borderColor; } ctx.lineWidth = style.borderWidth || 0; var drawX = box.absoluteX; var drawY = box.absoluteY; this.renderBorder(ctx, layoutBox); ctx.drawImage(this.img, drawX, drawY, box.width, box.height); ctx.restore(); } }, { key: "insert", value: function insert(ctx, box) { var _this4 = this; this.renderBoxes.push({ ctx: ctx, box: box }); this.img = _common_imageManager__WEBPACK_IMPORTED_MODULE_1__["default"].loadImage(this.src, function (img, fromCache) { // 来自缓存的,还没返回img就会执行回调函数 if (fromCache) { _this4.img = img; _this4.renderImg(ctx, box, false); } else { // 当图片加载完成,实例可能已经被销毁了 if (_this4.img) { var eventName = _this4.isScrollViewChild ? 'image__render__done' : 'one__image__render__done'; _this4.EE.emit(eventName, _this4); } } }); } }, { key: "isScrollViewChild", get: function get() { var flag = false; var parent = this.parent; while (parent && !flag) { if (parent.type === 'ScrollView') { flag = true; } else { parent = parent.parent; } } return flag; } }]); return Image; }(_elements_js__WEBPACK_IMPORTED_MODULE_0__["default"]); /***/ }), /* 18 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Text; }); /* harmony import */ var _elements_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1); /* harmony import */ var _common_util_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6); function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } 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); return Constructor; } 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 } }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } 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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } var DEFAULT_FONT_FAMILY = 'PingFangSC-Regular, sans-serif'; var context = null; var getContext = function getContext() { if (context) { return context; } var canvas = Object(_common_util_js__WEBPACK_IMPORTED_MODULE_1__["createCanvas"])(); canvas.width = 1; canvas.height = 1; context = canvas.getContext('2d'); return context; }; function getTextWidth(style, value) { var context = getContext(); context.font = "".concat(style.fontWeight || 'normal', " ").concat(style.fontSize || 12, "px ").concat(style.fontFamily || DEFAULT_FONT_FAMILY); return context.measureText(value).width || 0; } function getTextWidthWithoutSetFont(value) { return getContext().measureText(value).width || 0; } function parseText(style, value) { value = String(value); var maxWidth = style.width; var wordWidth = getTextWidth(style, value); // 对文字溢出的处理,默认用... var textOverflow = style.textOverflow || 'ellipsis'; // 文字最大长度不超限制 if (wordWidth <= maxWidth) { return value; } // 对于用点点点处理的情况,先将最大宽度减去...的宽度 if (textOverflow === 'ellipsis') { maxWidth -= getTextWidthWithoutSetFont('...'); } var length = value.length - 1; var str = value.substring(0, length); while (getTextWidthWithoutSetFont(str) > maxWidth && length > 0) { length--; str = value.substring(0, length); } return length && textOverflow === 'ellipsis' ? str + '...' : str; } var Text = /*#__PURE__*/function (_Element) { _inherits(Text, _Element); var _super = _createSuper(Text); function Text(_ref) { var _this; var _ref$style = _ref.style, style = _ref$style === void 0 ? {} : _ref$style, _ref$props = _ref.props, props = _ref$props === void 0 ? {} : _ref$props, _ref$idName = _ref.idName, idName = _ref$idName === void 0 ? '' : _ref$idName, _ref$className = _ref.className, className = _ref$className === void 0 ? '' : _ref$className, _ref$value = _ref.value, value = _ref$value === void 0 ? '' : _ref$value; _classCallCheck(this, Text); // 没有设置宽度的时候通过canvas计算出文字宽度 if (style.width === undefined) { style.width = getTextWidth(style, value); } else if (style.textOverflow === 'ellipsis') { value = parseText(style, value); } _this = _super.call(this, { props: props, idName: idName, className: className, style: style }); _this.type = 'Text'; _this.ctx = null; _this.valuesrc = value; _this.renderBoxes = []; Object.defineProperty(_assertThisInitialized(_this), "value", { get: function get() { return this.valuesrc; }, set: function set(newValue) { if (newValue !== this.valuesrc) { this.valuesrc = newValue; this.emit('repaint'); } }, enumerable: true, configurable: true }); return _this; } _createClass(Text, [{ key: "toCanvasData", value: function toCanvasData() { var style = this.style || {}; this.fontSize = style.fontSize || 12; this.textBaseline = 'top'; this.font = "".concat(style.fontWeight || '', " ").concat(style.fontSize || 12, "px ").concat(DEFAULT_FONT_FAMILY); this.textAlign = style.textAlign || 'left'; this.fillStyle = style.color || '#000'; } }, { key: "insert", value: function insert(ctx, box) { this.renderBoxes.push({ ctx: ctx, box: box }); this.render(ctx, box); } }, { key: "repaint", value: function repaint() { var _this2 = this; this.renderBoxes.forEach(function (item) { _this2.render(item.ctx, item.box); }); } }, { key: "destroySelf", value: function destroySelf() { this.root = null; } }, { key: "render", value: function render(ctx, layoutBox) { this.toCanvasData(); ctx.save(); var box = layoutBox || this.layoutBox; var style = this.style; ctx.textBaseline = this.textBaseline; ctx.font = this.font; ctx.textAlign = this.textAlign; var drawX = box.absoluteX; var drawY = box.absoluteY; this.renderBorder(ctx, layoutBox); if (style.backgroundColor) { ctx.fillStyle = style.backgroundColor; ctx.fillRect(drawX, drawY, box.width, box.height); } ctx.fillStyle = this.fillStyle; if (this.textAlign === 'center') { drawX += box.width / 2; } else if (this.textAlign === 'right') { drawX += box.width; } if (style.lineHeight) { ctx.textBaseline = 'middle'; drawY += style.lineHeight / 2; } ctx.fillText(this.value, drawX, drawY); ctx.restore(); } }]); return Text; }(_elements_js__WEBPACK_IMPORTED_MODULE_0__["default"]); /***/ }), /* 19 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return ScrollView; }); /* harmony import */ var _view_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(16); /* harmony import */ var _common_pool_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4); /* harmony import */ var _common_touch_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(20); /* harmony import */ var _common_util_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6); function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } 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); return Constructor; } 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 } }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } 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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } var id = 0; var canvasPool = new _common_pool_js__WEBPACK_IMPORTED_MODULE_1__["default"]('canvasPool'); var ScrollView = /*#__PURE__*/function (_View) { _inherits(ScrollView, _View); var _super = _createSuper(ScrollView); function ScrollView(_ref) { var _this; var _ref$style = _ref.style, style = _ref$style === void 0 ? {} : _ref$style, _ref$props = _ref.props, props = _ref$props === void 0 ? {} : _ref$props, _ref$name = _ref.name, name = _ref$name === void 0 ? '' : _ref$name; _classCallCheck(this, ScrollView); _this = _super.call(this, { props: props, name: name, style: style }); _this.type = 'ScrollView'; // 当前列表滚动的值 _this.top = 0; // 滚动处理器 _this.touch = new _common_touch_js__WEBPACK_IMPORTED_MODULE_2__["default"](); // canvas高度不能过高,在小游戏里面,对canvas尺寸是有限制的 _this.pageHeight = 2000; // 根据列表总高度和单页高度计算的分页数量 _this.pageCount = 1; _this.canvasMap = {}; // 图片加载完成之后会触发scrollView的重绘函数,当图片过多的时候用节流提升性能 _this.throttleRepaint = Object(_common_util_js__WEBPACK_IMPORTED_MODULE_3__["throttle"])(_this.clipRepaint, 16, _assertThisInitialized(_this)); _this.throttleImageLoadDone = Object(_common_util_js__WEBPACK_IMPORTED_MODULE_3__["throttle"])(_this.childImageLoadDoneCbk, 32, _assertThisInitialized(_this)); _this.renderTimers = []; _this.requestID = null; return _this; } /** * 获取滚动列表内所有元素的高度和 * 这里不能简单将所有子元素的高度累加,因为每个元素之间可能是有空隙的 */ _createClass(ScrollView, [{ key: "repaint", value: function repaint() { var _this2 = this; this.clear(); this.renderBoxes.forEach(function (item) { _this2.render(item.ctx, item.box); }); } /** * 列表子元素重绘之前先将所有的canvas擦除 */ }, { key: "clear", value: function clear() { var _this3 = this; Object.keys(this.canvasMap).forEach(function (key) { var item = _this3.canvasMap[key]; item.context && item.context.clearRect(0, 0, item.canvas.width, item.canvas.height); }); } // 与主canvas的尺寸保持一致 }, { key: "updateRenderPort", value: function updateRenderPort(renderport) { this.renderport = renderport; } /** * 计算分页数据 * 小游戏的canvas对尺寸有要求,如果如果高度过高,可能出现渲染不出来的情况 * 因此需要手动分页,列表过长的时候将数据绘制到几个canvas上面,这里预创建几个canvas */ }, { key: "calPageData", value: function calPageData() { this.pageCount = Math.ceil((this.scrollHeight + this.layoutBox.absoluteY) / this.pageHeight); for (var i = 0; i < this.pageCount; i++) { var cache = canvasPool.get(i); if (cache) { cache.context && cache.context.clearRect(0, 0, cache.canvas.width, cache.canvas.height); cache.elements = []; this.canvasMap[i] = cache; } else { this.canvasMap[i] = { elements: [] }; canvasPool.set(i, this.canvasMap[i]); } } } }, { key: "destroySelf", value: function destroySelf() { this.touch = null; this.isDestroyed = true; this.throttleRepaint = null; this.renderTimers.forEach(function (timer) { clearTimeout(timer); }); this.root.off('repaint__done'); this.renderTimers = []; this.canvasMap = {}; this.ctx = null; this.children = null; this.requestID && cancelAnimationFrame(this.requestID); this.root = null; } /** * 滚动列表重绘逻辑 * 将分页canvas按照滚动裁剪绘制到主canvas上面 */ }, { key: "clipRepaint", value: function clipRepaint(top) { var _this4 = this; if (this.isDestroyed) { return; } this.requestID = requestAnimationFrame(function () { top = -top; _this4.top = top; var box = _this4.layoutBox; var abY = box.absoluteY; if (_this4.isDestroyed || _this4.root.state === _common_util_js__WEBPACK_IMPORTED_MODULE_3__["STATE"].CLEAR) { return; } // 在主canvas上面将滚动列表区域擦除 _this4.ctx.clearRect(box.absoluteX, abY, box.width, box.height); // 背景填充 _this4.ctx.fillStyle = _this4.parent.style.backgroundColor || '#ffffff'; _this4.ctx.fillRect(box.absoluteX, abY, box.width, box.height); for (var i = 0; i < _this4.pageCount; i++) { var canvas = _this4.canvasMap[i].canvas; // 根据滚动值获取裁剪区域 var startY = abY + top; var endY = abY + top + box.height; // 计算在裁剪区域内的canvas if (startY < _this4.pageHeight * (i + 1) && endY > _this4.pageHeight * i) { /** * 这里不能按照box.width * box.height的区域去裁剪 * 在浏览器里面正常,但是在小游戏里面会出现诡异的渲染出错,所以裁剪canvas真实有效的区域 */ var clipY = abY + top - _this4.pageHeight * i; var clipH = box.height; var renderY = abY; if (clipY > 0 && _this4.pageHeight - clipY < box.height) { clipH = _this4.pageHeight - clipY; } else if (clipY < 0) { clipH = clipY + box.height; renderY = renderY - clipY; clipY = 0; } _this4.ctx.drawImage(canvas, box.absoluteX, clipY, box.width, clipH, box.absoluteX, renderY, box.width, clipH); } } }); } }, { key: "renderChildren", value: function renderChildren(tree) { var _this5 = this; var children = tree.children; var height = this.pageHeight; Object.keys(children).forEach(function (id) { var child = children[id]; var originY = child.layoutBox.originalAbsoluteY; var pageIndex = Math.floor(originY / height); var nextPage = pageIndex + 1; child.layoutBox.absoluteY -= _this5.pageHeight * pageIndex; if (child.checkNeedRender()) { _this5.canvasMap[pageIndex].elements.push({ element: child, box: child.layoutBox }); } // 对于跨界的元素,两边都绘制下 if (originY + child.layoutBox.height > height * nextPage) { var tmpBox = Object.assign({}, child.layoutBox); tmpBox.absoluteY = originY - _this5.pageHeight * nextPage; if (child.checkNeedRender()) { _this5.canvasMap[nextPage].elements.push({ element: child, box: tmpBox }); } } _this5.renderChildren(child); }); } }, { key: "insertElements", value: function insertElements(pageIndex) { var _this6 = this; var can = Object(_common_util_js__WEBPACK_IMPORTED_MODULE_3__["createCanvas"])(); var ctx = can.getContext('2d'); can.width = this.renderport.width; can.height = this.pageHeight; ctx.id = ++id; this.canvasMap[pageIndex].canvas = can; this.canvasMap[pageIndex].context = ctx; this.canvasMap[pageIndex].elements.forEach(function (ele) { ele.element.insert(ctx, ele.box); }); if (pageIndex < this.pageCount - 1) { var timer = setTimeout(function () { _this6.insertElements(++pageIndex); }, 250); this.renderTimers.push(timer); } } }, { key: "childImageLoadDoneCbk", value: function childImageLoadDoneCbk(img) { var start = new Date(); var list = Object.values(this.canvasMap); var pageIndex = -1; for (var i = 0; i < list.length; i++) { if (list[i].elements.find(function (item) { return item.element === img; })) { pageIndex = i; break; } } if (pageIndex > -1) { var _start = new Date(); var canItem = this.canvasMap[pageIndex]; var canvas = canItem.canvas; var ctx = canItem.context; ctx.clearRect(0, 0, canvas.width, canvas.height); this.canvasMap[pageIndex].elements.forEach(function (ele) { Object(_common_util_js__WEBPACK_IMPORTED_MODULE_3__["repaintTree"])(ele.element); }); } /*this.throttleRepaint(-this.top || 0);*/ this.clipRepaint(-this.top); } }, { key: "insertScrollView", value: function insertScrollView(context) { var _this7 = this; // 绘制容器 this.insert(context); this.root.on('repaint__done', function () { _this7.clipRepaint(-_this7.top); }); // 计算列表应该分割成几页 this.calPageData(); // 计算分页数据:每个元素应该坐落在哪个canvas this.renderChildren(this); this.insertElements(0); this.clipRepaint(-this.top); // 图片加载可能是异步的,监听图片加载完成事件完成列表重绘逻辑 this.EE.on('image__render__done', function (img) { _this7.throttleImageLoadDone(img); }); if (this.scrollHeight > this.layoutBox.height) { this.touch.setTouchRange(-(this.scrollHeight - this.layoutBox.height), 0, this.clipRepaint.bind(this)); // 监听触摸相关事件,将滚动处理逻辑交给相应的处理器处理 this.on('touchstart', this.touch.startFunc); this.on('touchmove', this.touch.moveFunc); this.on('touchend', this.touch.endFunc); } } }, { key: "scrollHeight", get: function get() { // scrollview为空的情况 if (!this.children.length) { return 0; } var last = this.children[this.children.length - 1]; return last.layoutBox.top + last.layoutBox.height; } }]); return ScrollView; }(_view_js__WEBPACK_IMPORTED_MODULE_0__["default"]); /***/ }), /* 20 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Touch; }); /* harmony import */ var _util_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6); 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); return Constructor; } var dpr = Object(_util_js__WEBPACK_IMPORTED_MODULE_0__["getDpr"])(); var Touch = /*#__PURE__*/function () { function Touch() { _classCallCheck(this, Touch); this.needProcess = false; this.startFunc = this.touchStartHandler.bind(this); this.endFunc = this.touchEndHandler.bind(this); this.moveFunc = this.touchMoveHandler.bind(this); } _createClass(Touch, [{ key: "reset", value: function reset() { this.touchTime = new Date(); this.touchStartX = 0; this.touchStartY = 0; // 滚动区间 this.start = 0; this.end = 0; // 当前位置 this.move = 0; // 目标位置 this.target = 0; // 滚动回调函数 this.scroll = null; // for istanbul /* istanbul ignore if*/ if (typeof cancelAnimationFrame !== 'undefined') { cancelAnimationFrame(this.animate); } } }, { key: "enable", value: function enable() { this.reset(); this.needProcess = true; } }, { key: "disable", value: function disable() { this.needProcess = false; } // 设置滚动区间,比如一个排行榜的滚动区间可能是[-300, 0] }, { key: "setTouchRange", value: function setTouchRange(start, end, scroll) { // 考虑到切换游戏的场景,每次设置的时候重置所有变量 this.enable(); this.start = start; this.end = end; if (start === 0 && end === 0) { return; } this.scroll = scroll; // this.animate = requestAnimationFrame(this.loop.bind(this)); } // 保证滚动目标位置在滚动区间内 }, { key: "limitTarget", value: function limitTarget(target) { var result = target; if (target > this.end) { result = this.end; } else if (target < this.start) { result = this.start; } return result; } }, { key: "touchStartHandler", value: function touchStartHandler(e) { var touch = e.touches && e.touches[0] || e.changedTouches && e.changedTouches[0] || e; if (!touch || !touch.pageX || !touch.pageY) { return; } this.touchStartX = touch.clientX * dpr; this.touchStartY = touch.clientY * dpr; this.touchTime = new Date(); this.isMoving = true; this.needProcess = true; this.animate = requestAnimationFrame(this.loop.bind(this)); } }, { key: "touchMoveHandler", value: function touchMoveHandler(e) { if (!this.isMoving) { return; } var touch = e.touches && e.touches[0] || e.changedTouches && e.changedTouches[0] || e; if (!touch || !touch.pageX || !touch.pageY) { return; } var currY = touch.clientY * dpr; if (this.touchStartY - currY > 2 || this.touchStartY - currY < -2) { this.target -= this.touchStartY - currY; } this.target = this.limitTarget(this.target); this.touchStartY = currY; } }, { key: "touchEndHandler", value: function touchEndHandler() { this.isMoving = false; var timeInS = (Date.now() - this.touchTime) / 1000; /*console.log(Date.now(), this.touchTime.getTime(), Date.now() - this.touchTime);*/ if (timeInS < 0.9) { /*console.log(1, timeInS, this.target, this.move);*/ this.target += (this.target - this.move) * 0.6 / (timeInS * 5); /*console.log(2, this.target)*/ this.target = this.limitTarget(this.target); /*console.log(3, this.target)*/ } } }, { key: "loop", value: function loop() { if (this.needProcess) { if (this.isMoving) { if (this.move !== this.target) { // 手指移动可能过快,切片以使得滑动流畅 if (Math.abs(this.target - this.move) > 1) { this.move += (this.target - this.move) * 0.4; } else { this.move = this.target; } this.scroll && this.scroll(this.move); } } else { if (this.move !== this.target) { /** * 如果滑动很快,为了滚动流畅,需要将滑动过程切片 */ if (Math.abs(this.target - this.move) > 1) { this.move += (this.target - this.move) * 0.3; } else { this.move = this.target; } this.scroll && this.scroll(this.move); } else { // 滑动结束,停止动画 this.needProcess = false; } } this.animate = requestAnimationFrame(this.loop.bind(this)); } else if (typeof cancelAnimationFrame !== 'undefined') { cancelAnimationFrame(this.animate); } } }]); return Touch; }(); /***/ }), /* 21 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return BitMapText; }); /* harmony import */ var _elements_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1); /* harmony import */ var _common_pool_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4); function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } 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); return Constructor; } 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 } }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } 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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } var bitMapPool = new _common_pool_js__WEBPACK_IMPORTED_MODULE_1__["default"]('bitMapPool'); var BitMapText = /*#__PURE__*/function (_Element) { _inherits(BitMapText, _Element); var _super = _createSuper(BitMapText); function BitMapText(opts) { var _this; _classCallCheck(this, BitMapText); var _opts$style = opts.style, style = _opts$style === void 0 ? {} : _opts$style, _opts$props = opts.props, props = _opts$props === void 0 ? {} : _opts$props, _opts$idName = opts.idName, idName = _opts$idName === void 0 ? '' : _opts$idName, _opts$className = opts.className, className = _opts$className === void 0 ? '' : _opts$className, _opts$value = opts.value, value = _opts$value === void 0 ? '' : _opts$value, _opts$font = opts.font, font = _opts$font === void 0 ? '' : _opts$font; _this = _super.call(this, { props: props, idName: idName, className: className, style: style }); _this.type = "BitMapText"; _this.ctx = null; _this.valuesrc = value; _this.renderBoxes = []; Object.defineProperty(_assertThisInitialized(_this), "value", { get: function get() { return this.valuesrc; }, set: function set(newValue) { if (newValue !== this.valuesrc) { this.valuesrc = newValue; this.emit('repaint'); } }, enumerable: true, configurable: true }); _this.font = bitMapPool.get(font); if (!_this.font) { console.error('Please invoke API `registBitMapFont` before using `BitMapText`'); } return _this; } _createClass(BitMapText, [{ key: "insert", value: function insert(ctx, box) { this.renderBoxes.push({ ctx: ctx, box: box }); this.render(ctx, box); } }, { key: "repaint", value: function repaint() { var _this2 = this; this.renderBoxes.forEach(function (item) { _this2.render(item.ctx, item.box); }); } }, { key: "destroySelf", value: function destroySelf() { this.root = null; } }, { key: "render", value: function render(ctx, layoutBox) { var _this3 = this; if (!this.font) { return; } if (this.font.ready) { this.renderText(ctx, layoutBox); } else { this.font.event.on('text__load__done', function () { if (!_this3.isDestroyed) { _this3.renderText(ctx, layoutBox); } }); } } }, { key: "getTextBounds", value: function getTextBounds() { var style = this.style; var _style$letterSpacing = style.letterSpacing, letterSpacing = _style$letterSpacing === void 0 ? 0 : _style$letterSpacing; var width = 0; for (var i = 0, len = this.value.length; i < len; i++) { var _char = this.value[i]; var cfg = this.font.chars[_char]; if (cfg) { width += cfg.w; if (i < len - 1) { width += letterSpacing; } } } return { width: width, height: this.font.lineHeight }; } }, { key: "renderText", value: function renderText(ctx, layoutBox) { var bounds = this.getTextBounds(); var defaultLineHeight = this.font.lineHeight; ctx.save(); this.renderBorder(ctx, layoutBox); var box = layoutBox || this.layoutBox; var style = this.style; var width = style.width, height = style.height, _style$lineHeight = style.lineHeight, lineHeight = _style$lineHeight === void 0 ? defaultLineHeight : _style$lineHeight, textAlign = style.textAlign, verticalAlign = style.verticalAlign; // 元素包围盒的左上角坐标 var x = box.absoluteX; var y = box.absoluteY; var scaleY = lineHeight / defaultLineHeight; var realWidth = scaleY * bounds.width; // 如果文字的渲染区域高度小于盒子高度,采用对齐方式 if (lineHeight < height) { if (verticalAlign === 'middle') { y += (height - lineHeight) / 2; } else if (verticalAlign === 'bottom') { y = y + height - lineHeight; } } if (width > realWidth) { if (textAlign === 'center') { x += (width - realWidth) / 2; } else if (textAlign === 'right') { x += width - realWidth; } } for (var i = 0; i < this.value.length; i++) { var _char2 = this.value[i]; var cfg = this.font.chars[_char2]; if (cfg) { ctx.drawImage(this.font.texture, cfg.x, cfg.y, cfg.w, cfg.h, x + cfg.offX * scaleY, y + cfg.offY * scaleY, cfg.w * scaleY, cfg.h * scaleY); x += cfg.w * scaleY; } } } }]); return BitMapText; }(_elements_js__WEBPACK_IMPORTED_MODULE_0__["default"]); /***/ }) /******/ ]);