...
 
Commits (3)
    https://gitcode.net/daolabs/voting/-/commit/94a19364a45303a75b20bde8eb21a1b59014ac30 优化页面 2022-07-07T11:31:51+08:00 wowkaka wanglumin79@163.com https://gitcode.net/daolabs/voting/-/commit/4a83cfd6ddf0ff8f8d7f52ff0f1bd4e2f38bd12b Merge branch 'master' of https://gitcode.net/daolabs/voting 2022-07-07T11:32:18+08:00 wowkaka wanglumin79@163.com https://gitcode.net/daolabs/voting/-/commit/523cc62ac0318ca16e80b861f529a3a9cf27bbd4 优化页面 2022-07-07T18:30:08+08:00 wowkaka wanglumin79@163.com
......@@ -43,7 +43,7 @@ Page({
console.log(e);
let id = e.currentTarget.dataset.id;
wx.navigateTo({
url: '../detail/detail?'+id,
url: '../detail/detail?id='+id,
})
},
......
<view class="cu-bar padding " style="position: fixed;top:0rpx;">
<view class="action ">
<!-- <text class="icon-home margin-top-lg" style="color: #84868E;font-size: small;"> 首页</text> -->
</view>
<view class="action ">
<!-- <text class="icon-home margin-top-lg" style="color: #84868E;font-size: small;"> 首页</text> -->
</view>
</view>
<view class="cu-tabbar-height"></view>
<block wx:if="{{project}}">
<!-- background:#1C1F27; bg-gray-->
<view class="margin" >
<view class="margin-top-lg " >
<view class="padding-xs flex align-center ">
<view class="flex-sub text-center padding-top">
<view class=" text-xl padding-bottom-xs padding-top-xs">
<text class="text-green text-lg " >建设开源项目</text>
</view>
</view>
</view>
<view class="padding">
<view class="text-left padding-top-xs padding-left padding-right text-xs " style="color: #84868E;">我发起的项目</view>
<view class="text-left padding-lr " style="color:whitesmoke;">{{project.title}}</view>
</view>
<view class="padding ">
<view class="text-left padding-top-xs padding-left padding-right text-xs " style="color: #84868E;">项目介绍</view>
<view class="text-left padding-lr text-white ">{{project.info.description}}</view>
</view>
<view class="padding ">
<view class="text-left padding-top-xs padding-left padding-right text-xs " style="color: #84868E;">招募早期用户</view>
<view class="text-left padding-lr text-white ">{{project.info.parter}}</view>
</view>
<view class="padding-lr">
<view class="text-left padding-top-xs padding-left padding-right text-xs " style="color: #84868E;">项目发起人</view>
<view class="cu-list menu-avatar">
<view class="cu-item margin-lr margin-top-sm solid " style='background: #1C1F27;min-height: 80rpx;'>
<view class="cu-avatar round lg" style="background-image:url({{project.users[0].userInfo.avatarUrl}});"></view>
<view class="content flex-sub">
<view class="text-df" style="color: #84868E;">{{project.users[0].userInfo.nickName}}</view>
<view class="text-gray text-sm flex justify-between" style="color: #84868E;">
{{project.users[0].userInfo.city}}
</view>
</view>
</view>
</view>
<view wx:if="{{project}}">
<!-- background:#1C1F27; bg-gray-->
<view class="margin bg-gray">
<view class="margin-top-lg ">
<view class="padding-xs flex align-center ">
<view class="flex-sub text-center padding-top padding-bottom solid-bottom">
<view class=" text-xl padding-bottom-xs padding-top-xs">
<text class="text-green text-lg ">建设开源项目</text>
</view>
</view>
</view>
<view class="padding ">
<view class="text-left padding-top-xs padding-left padding-right text-xs " style="color: #84868E;">我发起的项目</view>
<view class="text-left padding-lr ">{{project.title}}</view>
</view>
<view class="padding ">
<view class="text-left padding-top-xs padding-left padding-right text-xs " style="color: #84868E;">项目介绍</view>
<view class="text-left padding-lr ">{{project.info.description}}</view>
</view>
<view class="padding ">
<view class="text-left padding-top-xs padding-left padding-right text-xs " style="color: #84868E;">招募早期用户</view>
<view class="text-left padding-lr ">{{project.info.parter}}</view>
</view>
<view class="margin ">
<view class="text-left padding-top-xs padding-left padding-right text-xs " style="color: #84868E;">项目发起人</view>
<view class="cu-list menu-avatar ">
<view class="cu-item padding-left margin-lr solid " style='margin-top:10rpx;min-height: 80rpx;'>
<view class="cu-avatar round lg " style="background-image:url({{project.users[0].userInfo.avatarUrl}});"></view>
<view class="content flex-sub">
<view><text class="text-sm">{{project.users[0].userInfo.nickName}} · 发起人</text></view>
<view class="text-gray text-sm flex justify-between" style="color: #84868E;">
{{project.users[0].userInfo.city}}
</view>
</view>
</view>
</view>
</view>
<!-- <view class='padding'>
</view>
<!-- <view class='padding '>
<view class="text-left padding-left padding-right text-xs " style="color: #84868E;">组织及成员</view>
<view class="cu-list margin-lr margin-top-sm">
<view class="cu-item padding-lr padding-top solid" style='background: #1C1F27;min-height: 80rpx;'>
<view class="cu-item padding-lr padding-top bg-white" style='min-height: 80rpx;'>
<view class="content flex-sub">
<view class="text-df text-white">DAO中国实验室</view>
<view class="text-df text-black">DAO中国实验室</view>
<view class="cu-avatar-group">
<view class="cu-avatar round" wx:for="{{4}}" wx:key style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big1000{{index+1}}.jpg);"></view>
</view>
</view>
</view>
<view class="cu-item padding-lr padding-top solid" style='background: #1C1F27;min-height: 80rpx;'>
<view class="cu-item padding-lr padding-top bg-white" style='min-height: 80rpx;'>
<view class="content flex-sub">
<view class="text-df text-white">DAO中国实验室</view>
<view class="text-df text-black">DAO中国实验室</view>
<view class="cu-avatar-group">
<view class="cu-avatar round" wx:for="{{12}}" wx:key style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big1000{{index+1}}.jpg);"></view>
</view>
</view>
</view>
<view class="cu-item padding-lr padding-top solid" style='background: #1C1F27;min-height: 80rpx;'>
<view class="cu-item padding-lr padding-top bg-white " style='min-height: 80rpx;'>
<view class="content flex-sub">
<view class="text-df text-white">DAO中国实验室</view>
<view class="text-df text-black">DAO中国实验室</view>
<view class="cu-avatar-group">
<view class="cu-avatar round" wx:for="{{10}}" wx:key style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big1000{{index+1}}.jpg);"></view>
</view>
</view>
</view>
<view style='background: #0C0C14;padding-bottom: 40rpx;'></view>
<view class="bg-white" style='padding-bottom: 40rpx;'></view>
</view>
</view> -->
<!-- <view class="cu-tabbar-height"></view> -->
<view class="flex justify-center " style="padding-top: 50rpx;padding-bottom:80rpx">
<button class="cu-btn bg-green lg ">我想参与</button>
</view>
</view>
<!-- <view class="si">
<!-- <view class="cu-bar bg-green ">
<view class="action text-white">
</view>
<view class="text-white text-bold submit">点击参与</view>
<view class="action text-white text-sm">
<view class="icon-share "></view>
</view>
</view> -->
<!-- <view class="cu-tabbar-height"></view> -->
</view>
<!-- <view class="si">
<view class="_action foot">
<view class="wrap" >
......@@ -103,9 +119,9 @@
</view>
</view> -->
</view>
</view>
<view class="cu-bar bg-gray tabbar border shop foot ">
<!-- <view class="cu-bar bg-gray tabbar border shop foot ">
<view class="action text-white">
</view>
......@@ -114,8 +130,8 @@
<view class="icon-share"></view>
</view>
</view>
</block>
</view> -->
</view>
<!-- <view class="cu-bar bg-gray tabbar border shop foot justify-center" style='background: #0C0C14;'>
<button class="cu-btn bg-green margin-tb-sm lg " style="width: 80%;">申请加入</button>
</view> -->
\ No newline at end of file
......@@ -5,9 +5,9 @@
</view>
<form bindsubmit='submit' report-submit='true'>
<view class="margin " style=" margin-top:50rpx; background:#1C1F27;">
<view class="margin bg-gray" style=" margin-top:50rpx; ">
<view class="padding-xs flex align-center " >
<view class="flex-sub text-center padding-top">
<view class="flex-sub text-center padding-top padding-bottom solid-bottom">
<view class=" text-xl padding-bottom-xs padding-top-xs">
<text class="text-green" style="font-size:36rpx;">发起开源项目</text>
</view>
......@@ -17,24 +17,24 @@
<view class="padding margin-top">
<view class="text-left padding-lr " style="color: #84868E;">项目名称</view>
<view class="text-left padding-top-xs padding-left padding-right text-xs " style="color: #84868E;">设置项目名称,最多15个字符</view>
<input class="text-left margin-lr margin-top-sm padding-left-sm text-white solid" style="height:70rpx;background:#0C0C14;" maxlength="300" placeholder="参考:DAO提案工具" cursor-spacing="10" name="title"></input>
<input class="text-left margin-lr margin-top-sm padding-left-sm bg-white text-black solid" style="height:70rpx;" maxlength="300" placeholder="参考:DAO提案工具" cursor-spacing="10" name="title"></input>
</view>
<view class="padding">
<view class="text-left padding-lr" style="color: #84868E;">项目介绍</view>
<view class="text-left padding-top-xs padding-left padding-right text-xs " style="color: #84868E;">介绍项目解决了什么问题,最多140个字</view>
<textarea class="text-left margin-lr margin-top-sm padding-sm text-white solid" style="width:580rpx;height:170rpx;background:#0C0C14;" placeholder="参考:支持DAO成员发起项目提案,通过用户投票数据了解项目市场价值,并获取早期支持者。" cursor-spacing="10" name="description"></textarea>
<textarea class="text-left margin-lr margin-top-sm padding-sm bg-white text-black solid " style="width:580rpx;height:170rpx;" placeholder="参考:支持DAO成员发起项目提案,通过用户投票数据了解项目市场价值,并获取早期支持者。" cursor-spacing="10" name="description"></textarea>
</view>
<view class="padding">
<view class="text-left padding-lr" style="color: #84868E;">种子用户</view>
<view class="text-left padding-top-xs padding-left padding-right text-xs " style="color: #84868E;">你认为谁会是你早期的使用用户,最多140个字</view>
<textarea class="text-left margin-lr margin-top-sm padding-sm text-white solid" style="width:580rpx;height:170rpx;background:#0C0C14;" placeholder="参考:认可开源精神,热爱分享,有一定技术基础,愿意为了梦想付出实践的人。" cursor-spacing="10" name="parter"></textarea>
<textarea class="text-left margin-lr margin-top-sm padding-sm bg-white text-black solid" style="width:580rpx;height:170rpx;" placeholder="参考:认可开源精神,热爱分享,有一定技术基础,愿意为了梦想付出实践的人。" cursor-spacing="10" name="parter"></textarea>
</view>
<view class="padding">
<view class="padding" >
<view class="text-left padding-left padding-right " style="color: #84868E;">联系方式</view>
<input class="text-left margin-lr margin-top-sm padding-left-sm text-white solid" style="height:70rpx;background:#0C0C14;" maxlength="300" placeholder="请输入项目联系人微信号" cursor-spacing="10" name="wechatId"></input>
<input class="text-left margin-lr margin-top-sm padding-left-sm bg-white text-black solid" style="height:70rpx;" maxlength="300" placeholder="请输入项目联系人微信号" cursor-spacing="10" name="wechatId"></input>
</view>
<!-- <view class="padding">
......@@ -42,8 +42,8 @@
<view class="flex padding solid margin justify-center align-center" style="border: 1rpx solid #84868E;width:160rpx;height:160rpx;color: #84868E;"><text class='icon-add text-xl'></text></view>
</view> -->
<view class="flex align-center padding-tb justify-center" style='background: #0C0C14;'>
<button class="cu-btn bg-green margin-tb-sm lg " style="width: 80%;" form-type="submit" >创建</button>
<view class="flex align-center padding-tb justify-center" >
<button class="cu-btn bg-green margin-tb-sm lg " style="width: 84%;" form-type="submit" >创建</button>
</view>
</view>
......
The MIT License (MIT)
Copyright (c) 2014 Arnout Kazemier
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
# EventEmitter3
[![Version npm](https://img.shields.io/npm/v/eventemitter3.svg?style=flat-square)](https://www.npmjs.com/package/eventemitter3)[![Build Status](https://img.shields.io/travis/primus/eventemitter3/master.svg?style=flat-square)](https://travis-ci.org/primus/eventemitter3)[![Dependencies](https://img.shields.io/david/primus/eventemitter3.svg?style=flat-square)](https://david-dm.org/primus/eventemitter3)[![Coverage Status](https://img.shields.io/coveralls/primus/eventemitter3/master.svg?style=flat-square)](https://coveralls.io/r/primus/eventemitter3?branch=master)[![IRC channel](https://img.shields.io/badge/IRC-irc.freenode.net%23primus-00a8ff.svg?style=flat-square)](https://webchat.freenode.net/?channels=primus)
[![Sauce Test Status](https://saucelabs.com/browser-matrix/eventemitter3.svg)](https://saucelabs.com/u/eventemitter3)
EventEmitter3 is a high performance EventEmitter. It has been micro-optimized
for various of code paths making this, one of, if not the fastest EventEmitter
available for Node.js and browsers. The module is API compatible with the
EventEmitter that ships by default with Node.js but there are some slight
differences:
- Domain support has been removed.
- We do not `throw` an error when you emit an `error` event and nobody is
listening.
- The `newListener` and `removeListener` events have been removed as they
are useful only in some uncommon use-cases.
- The `setMaxListeners`, `getMaxListeners`, `prependListener` and
`prependOnceListener` methods are not available.
- Support for custom context for events so there is no need to use `fn.bind`.
- The `removeListener` method removes all matching listeners, not only the
first.
It's a drop in replacement for existing EventEmitters, but just faster. Free
performance, who wouldn't want that? The EventEmitter is written in EcmaScript 3
so it will work in the oldest browsers and node versions that you need to
support.
## Installation
```bash
$ npm install --save eventemitter3
```
## CDN
Recommended CDN:
```text
https://unpkg.com/eventemitter3@latest/umd/eventemitter3.min.js
```
## Usage
After installation the only thing you need to do is require the module:
```js
var EventEmitter = require('eventemitter3');
```
And you're ready to create your own EventEmitter instances. For the API
documentation, please follow the official Node.js documentation:
http://nodejs.org/api/events.html
### Contextual emits
We've upgraded the API of the `EventEmitter.on`, `EventEmitter.once` and
`EventEmitter.removeListener` to accept an extra argument which is the `context`
or `this` value that should be set for the emitted events. This means you no
longer have the overhead of an event that required `fn.bind` in order to get a
custom `this` value.
```js
var EE = new EventEmitter()
, context = { foo: 'bar' };
function emitted() {
console.log(this === context); // true
}
EE.once('event-name', emitted, context);
EE.on('another-event', emitted, context);
EE.removeListener('another-event', emitted, context);
```
### Tests and benchmarks
This module is well tested. You can run:
- `npm test` to run the tests under Node.js.
- `npm run test-browser` to run the tests in real browsers via Sauce Labs.
We also have a set of benchmarks to compare EventEmitter3 with some available
alternatives. To run the benchmarks run `npm run benchmark`.
Tests and benchmarks are not included in the npm package. If you want to play
with them you have to clone the GitHub repository.
Note that you will have to run an additional `npm i` in the benchmarks folder
before `npm run benchmark`.
## License
[MIT](LICENSE)
/**
* Minimal `EventEmitter` interface that is molded against the Node.js
* `EventEmitter` interface.
*/
declare class EventEmitter<
EventTypes extends EventEmitter.ValidEventTypes = string | symbol,
Context extends any = any
> {
static prefixed: string | boolean;
/**
* Return an array listing the events for which the emitter has registered
* listeners.
*/
eventNames(): Array<EventEmitter.EventNames<EventTypes>>;
/**
* Return the listeners registered for a given event.
*/
listeners<T extends EventEmitter.EventNames<EventTypes>>(
event: T
): Array<EventEmitter.EventListener<EventTypes, T>>;
/**
* Return the number of listeners listening to a given event.
*/
listenerCount(event: EventEmitter.EventNames<EventTypes>): number;
/**
* Calls each of the listeners registered for a given event.
*/
emit<T extends EventEmitter.EventNames<EventTypes>>(
event: T,
...args: EventEmitter.EventArgs<EventTypes, T>
): boolean;
/**
* Add a listener for a given event.
*/
on<T extends EventEmitter.EventNames<EventTypes>>(
event: T,
fn: EventEmitter.EventListener<EventTypes, T>,
context?: Context
): this;
addListener<T extends EventEmitter.EventNames<EventTypes>>(
event: T,
fn: EventEmitter.EventListener<EventTypes, T>,
context?: Context
): this;
/**
* Add a one-time listener for a given event.
*/
once<T extends EventEmitter.EventNames<EventTypes>>(
event: T,
fn: EventEmitter.EventListener<EventTypes, T>,
context?: Context
): this;
/**
* Remove the listeners of a given event.
*/
removeListener<T extends EventEmitter.EventNames<EventTypes>>(
event: T,
fn?: EventEmitter.EventListener<EventTypes, T>,
context?: Context,
once?: boolean
): this;
off<T extends EventEmitter.EventNames<EventTypes>>(
event: T,
fn?: EventEmitter.EventListener<EventTypes, T>,
context?: Context,
once?: boolean
): this;
/**
* Remove all listeners, or those of the specified event.
*/
removeAllListeners(event?: EventEmitter.EventNames<EventTypes>): this;
}
declare namespace EventEmitter {
export interface ListenerFn<Args extends any[] = any[]> {
(...args: Args): void;
}
export interface EventEmitterStatic {
new <
EventTypes extends ValidEventTypes = string | symbol,
Context = any
>(): EventEmitter<EventTypes, Context>;
}
/**
* `object` should be in either of the following forms:
* ```
* interface EventTypes {
* 'event-with-parameters': any[]
* 'event-with-example-handler': (...args: any[]) => void
* }
* ```
*/
export type ValidEventTypes = string | symbol | object;
export type EventNames<T extends ValidEventTypes> = T extends string | symbol
? T
: keyof T;
export type ArgumentMap<T extends object> = {
[K in keyof T]: T[K] extends (...args: any[]) => void
? Parameters<T[K]>
: T[K] extends any[]
? T[K]
: any[];
};
export type EventListener<
T extends ValidEventTypes,
K extends EventNames<T>
> = T extends string | symbol
? (...args: any[]) => void
: (
...args: ArgumentMap<Exclude<T, string | symbol>>[Extract<K, keyof T>]
) => void;
export type EventArgs<
T extends ValidEventTypes,
K extends EventNames<T>
> = Parameters<EventListener<T, K>>;
export const EventEmitter: EventEmitterStatic;
}
export = EventEmitter;
'use strict';
var has = Object.prototype.hasOwnProperty
, prefix = '~';
/**
* Constructor to create a storage for our `EE` objects.
* An `Events` instance is a plain object whose properties are event names.
*
* @constructor
* @private
*/
function Events() {}
//
// We try to not inherit from `Object.prototype`. In some engines creating an
// instance in this way is faster than calling `Object.create(null)` directly.
// If `Object.create(null)` is not supported we prefix the event names with a
// character to make sure that the built-in object properties are not
// overridden or used as an attack vector.
//
if (Object.create) {
Events.prototype = Object.create(null);
//
// This hack is needed because the `__proto__` property is still inherited in
// some old browsers like Android 4, iPhone 5.1, Opera 11 and Safari 5.
//
if (!new Events().__proto__) prefix = false;
}
/**
* Representation of a single event listener.
*
* @param {Function} fn The listener function.
* @param {*} context The context to invoke the listener with.
* @param {Boolean} [once=false] Specify if the listener is a one-time listener.
* @constructor
* @private
*/
function EE(fn, context, once) {
this.fn = fn;
this.context = context;
this.once = once || false;
}
/**
* Add a listener for a given event.
*
* @param {EventEmitter} emitter Reference to the `EventEmitter` instance.
* @param {(String|Symbol)} event The event name.
* @param {Function} fn The listener function.
* @param {*} context The context to invoke the listener with.
* @param {Boolean} once Specify if the listener is a one-time listener.
* @returns {EventEmitter}
* @private
*/
function addListener(emitter, event, fn, context, once) {
if (typeof fn !== 'function') {
throw new TypeError('The listener must be a function');
}
var listener = new EE(fn, context || emitter, once)
, evt = prefix ? prefix + event : event;
if (!emitter._events[evt]) emitter._events[evt] = listener, emitter._eventsCount++;
else if (!emitter._events[evt].fn) emitter._events[evt].push(listener);
else emitter._events[evt] = [emitter._events[evt], listener];
return emitter;
}
/**
* Clear event by name.
*
* @param {EventEmitter} emitter Reference to the `EventEmitter` instance.
* @param {(String|Symbol)} evt The Event name.
* @private
*/
function clearEvent(emitter, evt) {
if (--emitter._eventsCount === 0) emitter._events = new Events();
else delete emitter._events[evt];
}
/**
* Minimal `EventEmitter` interface that is molded against the Node.js
* `EventEmitter` interface.
*
* @constructor
* @public
*/
function EventEmitter() {
this._events = new Events();
this._eventsCount = 0;
}
/**
* Return an array listing the events for which the emitter has registered
* listeners.
*
* @returns {Array}
* @public
*/
EventEmitter.prototype.eventNames = function eventNames() {
var names = []
, events
, name;
if (this._eventsCount === 0) return names;
for (name in (events = this._events)) {
if (has.call(events, name)) names.push(prefix ? name.slice(1) : name);
}
if (Object.getOwnPropertySymbols) {
return names.concat(Object.getOwnPropertySymbols(events));
}
return names;
};
/**
* Return the listeners registered for a given event.
*
* @param {(String|Symbol)} event The event name.
* @returns {Array} The registered listeners.
* @public
*/
EventEmitter.prototype.listeners = function listeners(event) {
var evt = prefix ? prefix + event : event
, handlers = this._events[evt];
if (!handlers) return [];
if (handlers.fn) return [handlers.fn];
for (var i = 0, l = handlers.length, ee = new Array(l); i < l; i++) {
ee[i] = handlers[i].fn;
}
return ee;
};
/**
* Return the number of listeners listening to a given event.
*
* @param {(String|Symbol)} event The event name.
* @returns {Number} The number of listeners.
* @public
*/
EventEmitter.prototype.listenerCount = function listenerCount(event) {
var evt = prefix ? prefix + event : event
, listeners = this._events[evt];
if (!listeners) return 0;
if (listeners.fn) return 1;
return listeners.length;
};
/**
* Calls each of the listeners registered for a given event.
*
* @param {(String|Symbol)} event The event name.
* @returns {Boolean} `true` if the event had listeners, else `false`.
* @public
*/
EventEmitter.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
var evt = prefix ? prefix + event : event;
if (!this._events[evt]) return false;
var listeners = this._events[evt]
, len = arguments.length
, args
, i;
if (listeners.fn) {
if (listeners.once) this.removeListener(event, listeners.fn, undefined, true);
switch (len) {
case 1: return listeners.fn.call(listeners.context), true;
case 2: return listeners.fn.call(listeners.context, a1), true;
case 3: return listeners.fn.call(listeners.context, a1, a2), true;
case 4: return listeners.fn.call(listeners.context, a1, a2, a3), true;
case 5: return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
case 6: return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
}
for (i = 1, args = new Array(len -1); i < len; i++) {
args[i - 1] = arguments[i];
}
listeners.fn.apply(listeners.context, args);
} else {
var length = listeners.length
, j;
for (i = 0; i < length; i++) {
if (listeners[i].once) this.removeListener(event, listeners[i].fn, undefined, true);
switch (len) {
case 1: listeners[i].fn.call(listeners[i].context); break;
case 2: listeners[i].fn.call(listeners[i].context, a1); break;
case 3: listeners[i].fn.call(listeners[i].context, a1, a2); break;
case 4: listeners[i].fn.call(listeners[i].context, a1, a2, a3); break;
default:
if (!args) for (j = 1, args = new Array(len -1); j < len; j++) {
args[j - 1] = arguments[j];
}
listeners[i].fn.apply(listeners[i].context, args);
}
}
}
return true;
};
/**
* Add a listener for a given event.
*
* @param {(String|Symbol)} event The event name.
* @param {Function} fn The listener function.
* @param {*} [context=this] The context to invoke the listener with.
* @returns {EventEmitter} `this`.
* @public
*/
EventEmitter.prototype.on = function on(event, fn, context) {
return addListener(this, event, fn, context, false);
};
/**
* Add a one-time listener for a given event.
*
* @param {(String|Symbol)} event The event name.
* @param {Function} fn The listener function.
* @param {*} [context=this] The context to invoke the listener with.
* @returns {EventEmitter} `this`.
* @public
*/
EventEmitter.prototype.once = function once(event, fn, context) {
return addListener(this, event, fn, context, true);
};
/**
* Remove the listeners of a given event.
*
* @param {(String|Symbol)} event The event name.
* @param {Function} fn Only remove the listeners that match this function.
* @param {*} context Only remove the listeners that have this context.
* @param {Boolean} once Only remove one-time listeners.
* @returns {EventEmitter} `this`.
* @public
*/
EventEmitter.prototype.removeListener = function removeListener(event, fn, context, once) {
var evt = prefix ? prefix + event : event;
if (!this._events[evt]) return this;
if (!fn) {
clearEvent(this, evt);
return this;
}
var listeners = this._events[evt];
if (listeners.fn) {
if (
listeners.fn === fn &&
(!once || listeners.once) &&
(!context || listeners.context === context)
) {
clearEvent(this, evt);
}
} else {
for (var i = 0, events = [], length = listeners.length; i < length; i++) {
if (
listeners[i].fn !== fn ||
(once && !listeners[i].once) ||
(context && listeners[i].context !== context)
) {
events.push(listeners[i]);
}
}
//
// Reset the array, or remove it completely if we have no more listeners.
//
if (events.length) this._events[evt] = events.length === 1 ? events[0] : events;
else clearEvent(this, evt);
}
return this;
};
/**
* Remove all listeners, or those of the specified event.
*
* @param {(String|Symbol)} [event] The event name.
* @returns {EventEmitter} `this`.
* @public
*/
EventEmitter.prototype.removeAllListeners = function removeAllListeners(event) {
var evt;
if (event) {
evt = prefix ? prefix + event : event;
if (this._events[evt]) clearEvent(this, evt);
} else {
this._events = new Events();
this._eventsCount = 0;
}
return this;
};
//
// Alias methods names because people roll like that.
//
EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
EventEmitter.prototype.addListener = EventEmitter.prototype.on;
//
// Expose the prefix.
//
EventEmitter.prefixed = prefix;
//
// Allow `EventEmitter` to be imported as module namespace.
//
EventEmitter.EventEmitter = EventEmitter;
//
// Expose the module.
//
if ('undefined' !== typeof module) {
module.exports = EventEmitter;
}
{
"_from": "eventemitter3@^4.0.0",
"_id": "eventemitter3@4.0.7",
"_inBundle": false,
"_integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
"_location": "/eventemitter3",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "eventemitter3@^4.0.0",
"name": "eventemitter3",
"escapedName": "eventemitter3",
"rawSpec": "^4.0.0",
"saveSpec": null,
"fetchSpec": "^4.0.0"
},
"_requiredBy": [
"/widget-ui"
],
"_resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
"_shasum": "2de9b68f6528d5644ef5c59526a1b4a07306169f",
"_spec": "eventemitter3@^4.0.0",
"_where": "/Users/wanglumin/WeChatProjects/voting/node_modules/widget-ui",
"author": {
"name": "Arnout Kazemier"
},
"bugs": {
"url": "https://github.com/primus/eventemitter3/issues"
},
"bundleDependencies": false,
"deprecated": false,
"description": "EventEmitter3 focuses on performance while maintaining a Node.js AND browser compatible interface.",
"devDependencies": {
"assume": "^2.2.0",
"browserify": "^16.5.0",
"mocha": "^8.0.1",
"nyc": "^15.1.0",
"pre-commit": "^1.2.0",
"sauce-browsers": "^2.0.0",
"sauce-test": "^1.3.3",
"uglify-js": "^3.9.0"
},
"files": [
"index.js",
"index.d.ts",
"umd"
],
"homepage": "https://github.com/primus/eventemitter3#readme",
"keywords": [
"EventEmitter",
"EventEmitter2",
"EventEmitter3",
"Events",
"addEventListener",
"addListener",
"emit",
"emits",
"emitter",
"event",
"once",
"pub/sub",
"publish",
"reactor",
"subscribe"
],
"license": "MIT",
"main": "index.js",
"name": "eventemitter3",
"repository": {
"type": "git",
"url": "git://github.com/primus/eventemitter3.git"
},
"scripts": {
"benchmark": "find benchmarks/run -name '*.js' -exec benchmarks/start.sh {} \\;",
"browserify": "rm -rf umd && mkdir umd && browserify index.js -s EventEmitter3 -o umd/eventemitter3.js",
"minify": "uglifyjs umd/eventemitter3.js --source-map -cm -o umd/eventemitter3.min.js",
"prepublishOnly": "npm run browserify && npm run minify",
"test": "nyc --reporter=html --reporter=text mocha test/test.js",
"test-browser": "node test/browser.js"
},
"typings": "index.d.ts",
"version": "4.0.7"
}
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.EventEmitter3 = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
'use strict';
var has = Object.prototype.hasOwnProperty
, prefix = '~';
/**
* Constructor to create a storage for our `EE` objects.
* An `Events` instance is a plain object whose properties are event names.
*
* @constructor
* @private
*/
function Events() {}
//
// We try to not inherit from `Object.prototype`. In some engines creating an
// instance in this way is faster than calling `Object.create(null)` directly.
// If `Object.create(null)` is not supported we prefix the event names with a
// character to make sure that the built-in object properties are not
// overridden or used as an attack vector.
//
if (Object.create) {
Events.prototype = Object.create(null);
//
// This hack is needed because the `__proto__` property is still inherited in
// some old browsers like Android 4, iPhone 5.1, Opera 11 and Safari 5.
//
if (!new Events().__proto__) prefix = false;
}
/**
* Representation of a single event listener.
*
* @param {Function} fn The listener function.
* @param {*} context The context to invoke the listener with.
* @param {Boolean} [once=false] Specify if the listener is a one-time listener.
* @constructor
* @private
*/
function EE(fn, context, once) {
this.fn = fn;
this.context = context;
this.once = once || false;
}
/**
* Add a listener for a given event.
*
* @param {EventEmitter} emitter Reference to the `EventEmitter` instance.
* @param {(String|Symbol)} event The event name.
* @param {Function} fn The listener function.
* @param {*} context The context to invoke the listener with.
* @param {Boolean} once Specify if the listener is a one-time listener.
* @returns {EventEmitter}
* @private
*/
function addListener(emitter, event, fn, context, once) {
if (typeof fn !== 'function') {
throw new TypeError('The listener must be a function');
}
var listener = new EE(fn, context || emitter, once)
, evt = prefix ? prefix + event : event;
if (!emitter._events[evt]) emitter._events[evt] = listener, emitter._eventsCount++;
else if (!emitter._events[evt].fn) emitter._events[evt].push(listener);
else emitter._events[evt] = [emitter._events[evt], listener];
return emitter;
}
/**
* Clear event by name.
*
* @param {EventEmitter} emitter Reference to the `EventEmitter` instance.
* @param {(String|Symbol)} evt The Event name.
* @private
*/
function clearEvent(emitter, evt) {
if (--emitter._eventsCount === 0) emitter._events = new Events();
else delete emitter._events[evt];
}
/**
* Minimal `EventEmitter` interface that is molded against the Node.js
* `EventEmitter` interface.
*
* @constructor
* @public
*/
function EventEmitter() {
this._events = new Events();
this._eventsCount = 0;
}
/**
* Return an array listing the events for which the emitter has registered
* listeners.
*
* @returns {Array}
* @public
*/
EventEmitter.prototype.eventNames = function eventNames() {
var names = []
, events
, name;
if (this._eventsCount === 0) return names;
for (name in (events = this._events)) {
if (has.call(events, name)) names.push(prefix ? name.slice(1) : name);
}
if (Object.getOwnPropertySymbols) {
return names.concat(Object.getOwnPropertySymbols(events));
}
return names;
};
/**
* Return the listeners registered for a given event.
*
* @param {(String|Symbol)} event The event name.
* @returns {Array} The registered listeners.
* @public
*/
EventEmitter.prototype.listeners = function listeners(event) {
var evt = prefix ? prefix + event : event
, handlers = this._events[evt];
if (!handlers) return [];
if (handlers.fn) return [handlers.fn];
for (var i = 0, l = handlers.length, ee = new Array(l); i < l; i++) {
ee[i] = handlers[i].fn;
}
return ee;
};
/**
* Return the number of listeners listening to a given event.
*
* @param {(String|Symbol)} event The event name.
* @returns {Number} The number of listeners.
* @public
*/
EventEmitter.prototype.listenerCount = function listenerCount(event) {
var evt = prefix ? prefix + event : event
, listeners = this._events[evt];
if (!listeners) return 0;
if (listeners.fn) return 1;
return listeners.length;
};
/**
* Calls each of the listeners registered for a given event.
*
* @param {(String|Symbol)} event The event name.
* @returns {Boolean} `true` if the event had listeners, else `false`.
* @public
*/
EventEmitter.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
var evt = prefix ? prefix + event : event;
if (!this._events[evt]) return false;
var listeners = this._events[evt]
, len = arguments.length
, args
, i;
if (listeners.fn) {
if (listeners.once) this.removeListener(event, listeners.fn, undefined, true);
switch (len) {
case 1: return listeners.fn.call(listeners.context), true;
case 2: return listeners.fn.call(listeners.context, a1), true;
case 3: return listeners.fn.call(listeners.context, a1, a2), true;
case 4: return listeners.fn.call(listeners.context, a1, a2, a3), true;
case 5: return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
case 6: return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
}
for (i = 1, args = new Array(len -1); i < len; i++) {
args[i - 1] = arguments[i];
}
listeners.fn.apply(listeners.context, args);
} else {
var length = listeners.length
, j;
for (i = 0; i < length; i++) {
if (listeners[i].once) this.removeListener(event, listeners[i].fn, undefined, true);
switch (len) {
case 1: listeners[i].fn.call(listeners[i].context); break;
case 2: listeners[i].fn.call(listeners[i].context, a1); break;
case 3: listeners[i].fn.call(listeners[i].context, a1, a2); break;
case 4: listeners[i].fn.call(listeners[i].context, a1, a2, a3); break;
default:
if (!args) for (j = 1, args = new Array(len -1); j < len; j++) {
args[j - 1] = arguments[j];
}
listeners[i].fn.apply(listeners[i].context, args);
}
}
}
return true;
};
/**
* Add a listener for a given event.
*
* @param {(String|Symbol)} event The event name.
* @param {Function} fn The listener function.
* @param {*} [context=this] The context to invoke the listener with.
* @returns {EventEmitter} `this`.
* @public
*/
EventEmitter.prototype.on = function on(event, fn, context) {
return addListener(this, event, fn, context, false);
};
/**
* Add a one-time listener for a given event.
*
* @param {(String|Symbol)} event The event name.
* @param {Function} fn The listener function.
* @param {*} [context=this] The context to invoke the listener with.
* @returns {EventEmitter} `this`.
* @public
*/
EventEmitter.prototype.once = function once(event, fn, context) {
return addListener(this, event, fn, context, true);
};
/**
* Remove the listeners of a given event.
*
* @param {(String|Symbol)} event The event name.
* @param {Function} fn Only remove the listeners that match this function.
* @param {*} context Only remove the listeners that have this context.
* @param {Boolean} once Only remove one-time listeners.
* @returns {EventEmitter} `this`.
* @public
*/
EventEmitter.prototype.removeListener = function removeListener(event, fn, context, once) {
var evt = prefix ? prefix + event : event;
if (!this._events[evt]) return this;
if (!fn) {
clearEvent(this, evt);
return this;
}
var listeners = this._events[evt];
if (listeners.fn) {
if (
listeners.fn === fn &&
(!once || listeners.once) &&
(!context || listeners.context === context)
) {
clearEvent(this, evt);
}
} else {
for (var i = 0, events = [], length = listeners.length; i < length; i++) {
if (
listeners[i].fn !== fn ||
(once && !listeners[i].once) ||
(context && listeners[i].context !== context)
) {
events.push(listeners[i]);
}
}
//
// Reset the array, or remove it completely if we have no more listeners.
//
if (events.length) this._events[evt] = events.length === 1 ? events[0] : events;
else clearEvent(this, evt);
}
return this;
};
/**
* Remove all listeners, or those of the specified event.
*
* @param {(String|Symbol)} [event] The event name.
* @returns {EventEmitter} `this`.
* @public
*/
EventEmitter.prototype.removeAllListeners = function removeAllListeners(event) {
var evt;
if (event) {
evt = prefix ? prefix + event : event;
if (this._events[evt]) clearEvent(this, evt);
} else {
this._events = new Events();
this._eventsCount = 0;
}
return this;
};
//
// Alias methods names because people roll like that.
//
EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
EventEmitter.prototype.addListener = EventEmitter.prototype.on;
//
// Expose the prefix.
//
EventEmitter.prefixed = prefix;
//
// Allow `EventEmitter` to be imported as module namespace.
//
EventEmitter.EventEmitter = EventEmitter;
//
// Expose the module.
//
if ('undefined' !== typeof module) {
module.exports = EventEmitter;
}
},{}]},{},[1])(1)
});
!function(e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).EventEmitter3=e()}(function(){return function i(s,f,c){function u(t,e){if(!f[t]){if(!s[t]){var n="function"==typeof require&&require;if(!e&&n)return n(t,!0);if(a)return a(t,!0);var r=new Error("Cannot find module '"+t+"'");throw r.code="MODULE_NOT_FOUND",r}var o=f[t]={exports:{}};s[t][0].call(o.exports,function(e){return u(s[t][1][e]||e)},o,o.exports,i,s,f,c)}return f[t].exports}for(var a="function"==typeof require&&require,e=0;e<c.length;e++)u(c[e]);return u}({1:[function(e,t,n){"use strict";var r=Object.prototype.hasOwnProperty,v="~";function o(){}function f(e,t,n){this.fn=e,this.context=t,this.once=n||!1}function i(e,t,n,r,o){if("function"!=typeof n)throw new TypeError("The listener must be a function");var i=new f(n,r||e,o),s=v?v+t:t;return e._events[s]?e._events[s].fn?e._events[s]=[e._events[s],i]:e._events[s].push(i):(e._events[s]=i,e._eventsCount++),e}function u(e,t){0==--e._eventsCount?e._events=new o:delete e._events[t]}function s(){this._events=new o,this._eventsCount=0}Object.create&&(o.prototype=Object.create(null),(new o).__proto__||(v=!1)),s.prototype.eventNames=function(){var e,t,n=[];if(0===this._eventsCount)return n;for(t in e=this._events)r.call(e,t)&&n.push(v?t.slice(1):t);return Object.getOwnPropertySymbols?n.concat(Object.getOwnPropertySymbols(e)):n},s.prototype.listeners=function(e){var t=v?v+e:e,n=this._events[t];if(!n)return[];if(n.fn)return[n.fn];for(var r=0,o=n.length,i=new Array(o);r<o;r++)i[r]=n[r].fn;return i},s.prototype.listenerCount=function(e){var t=v?v+e:e,n=this._events[t];return n?n.fn?1:n.length:0},s.prototype.emit=function(e,t,n,r,o,i){var s=v?v+e:e;if(!this._events[s])return!1;var f,c=this._events[s],u=arguments.length;if(c.fn){switch(c.once&&this.removeListener(e,c.fn,void 0,!0),u){case 1:return c.fn.call(c.context),!0;case 2:return c.fn.call(c.context,t),!0;case 3:return c.fn.call(c.context,t,n),!0;case 4:return c.fn.call(c.context,t,n,r),!0;case 5:return c.fn.call(c.context,t,n,r,o),!0;case 6:return c.fn.call(c.context,t,n,r,o,i),!0}for(p=1,f=new Array(u-1);p<u;p++)f[p-1]=arguments[p];c.fn.apply(c.context,f)}else for(var a,l=c.length,p=0;p<l;p++)switch(c[p].once&&this.removeListener(e,c[p].fn,void 0,!0),u){case 1:c[p].fn.call(c[p].context);break;case 2:c[p].fn.call(c[p].context,t);break;case 3:c[p].fn.call(c[p].context,t,n);break;case 4:c[p].fn.call(c[p].context,t,n,r);break;default:if(!f)for(a=1,f=new Array(u-1);a<u;a++)f[a-1]=arguments[a];c[p].fn.apply(c[p].context,f)}return!0},s.prototype.on=function(e,t,n){return i(this,e,t,n,!1)},s.prototype.once=function(e,t,n){return i(this,e,t,n,!0)},s.prototype.removeListener=function(e,t,n,r){var o=v?v+e:e;if(!this._events[o])return this;if(!t)return u(this,o),this;var i=this._events[o];if(i.fn)i.fn!==t||r&&!i.once||n&&i.context!==n||u(this,o);else{for(var s=0,f=[],c=i.length;s<c;s++)(i[s].fn!==t||r&&!i[s].once||n&&i[s].context!==n)&&f.push(i[s]);f.length?this._events[o]=1===f.length?f[0]:f:u(this,o)}return this},s.prototype.removeAllListeners=function(e){var t;return e?(t=v?v+e:e,this._events[t]&&u(this,t)):(this._events=new o,this._eventsCount=0),this},s.prototype.off=s.prototype.removeListener,s.prototype.addListener=s.prototype.on,s.prefixed=v,s.EventEmitter=s,void 0!==t&&(t.exports=s)},{}]},{},[1])(1)});
\ No newline at end of file
{"version":3,"sources":["umd/eventemitter3.js"],"names":["f","exports","module","define","amd","window","global","self","this","EventEmitter3","r","e","n","t","o","i","c","require","u","a","Error","code","p","call","length","1","has","Object","prototype","hasOwnProperty","prefix","Events","EE","fn","context","once","addListener","emitter","event","TypeError","listener","evt","_events","push","_eventsCount","clearEvent","EventEmitter","create","__proto__","eventNames","events","name","names","slice","getOwnPropertySymbols","concat","listeners","handlers","l","ee","Array","listenerCount","emit","a1","a2","a3","a4","a5","args","len","arguments","removeListener","undefined","apply","j","on","removeAllListeners","off","prefixed"],"mappings":"CAAA,SAAUA,GAAuB,iBAAVC,SAAoC,oBAATC,OAAsBA,OAAOD,QAAQD,IAA4B,mBAATG,QAAqBA,OAAOC,IAAKD,OAAO,GAAGH,IAAiC,oBAATK,OAAwBA,OAA+B,oBAATC,OAAwBA,OAA6B,oBAAPC,KAAsBA,KAAYC,MAAOC,cAAgBT,IAAlU,CAAyU,WAAqC,OAAmB,SAASU,EAAEC,EAAEC,EAAEC,GAAG,SAASC,EAAEC,EAAEf,GAAG,IAAIY,EAAEG,GAAG,CAAC,IAAIJ,EAAEI,GAAG,CAAC,IAAIC,EAAE,mBAAmBC,SAASA,QAAQ,IAAIjB,GAAGgB,EAAE,OAAOA,EAAED,GAAE,GAAI,GAAGG,EAAE,OAAOA,EAAEH,GAAE,GAAI,IAAII,EAAE,IAAIC,MAAM,uBAAuBL,EAAE,KAAK,MAAMI,EAAEE,KAAK,mBAAmBF,EAAE,IAAIG,EAAEV,EAAEG,GAAG,CAACd,QAAQ,IAAIU,EAAEI,GAAG,GAAGQ,KAAKD,EAAErB,QAAQ,SAASS,GAAoB,OAAOI,EAAlBH,EAAEI,GAAG,GAAGL,IAAeA,IAAIY,EAAEA,EAAErB,QAAQS,EAAEC,EAAEC,EAAEC,GAAG,OAAOD,EAAEG,GAAGd,QAAQ,IAAI,IAAIiB,EAAE,mBAAmBD,SAASA,QAAQF,EAAE,EAAEA,EAAEF,EAAEW,OAAOT,IAAID,EAAED,EAAEE,IAAI,OAAOD,EAA7b,CAA4c,CAACW,EAAE,CAAC,SAASR,EAAQf,EAAOD,gBAG71B,IAAIyB,EAAMC,OAAOC,UAAUC,eACvBC,EAAS,IASb,SAASC,KA4BT,SAASC,EAAGC,EAAIC,EAASC,GACvB3B,KAAKyB,GAAKA,EACVzB,KAAK0B,QAAUA,EACf1B,KAAK2B,KAAOA,IAAQ,EActB,SAASC,EAAYC,EAASC,EAAOL,EAAIC,EAASC,GAChD,GAAkB,mBAAPF,EACT,MAAM,IAAIM,UAAU,mCAGtB,IAAIC,EAAW,IAAIR,EAAGC,EAAIC,GAAWG,EAASF,GAC1CM,EAAMX,EAASA,EAASQ,EAAQA,EAMpC,OAJKD,EAAQK,QAAQD,GACXJ,EAAQK,QAAQD,GAAKR,GAC1BI,EAAQK,QAAQD,GAAO,CAACJ,EAAQK,QAAQD,GAAMD,GADhBH,EAAQK,QAAQD,GAAKE,KAAKH,IADlCH,EAAQK,QAAQD,GAAOD,EAAUH,EAAQO,gBAI7DP,EAUT,SAASQ,EAAWR,EAASI,GACI,KAAzBJ,EAAQO,aAAoBP,EAAQK,QAAU,IAAIX,SAC5CM,EAAQK,QAAQD,GAU9B,SAASK,IACPtC,KAAKkC,QAAU,IAAIX,EACnBvB,KAAKoC,aAAe,EAxElBjB,OAAOoB,SACThB,EAAOH,UAAYD,OAAOoB,OAAO,OAM5B,IAAIhB,GAASiB,YAAWlB,GAAS,IA2ExCgB,EAAalB,UAAUqB,WAAa,WAClC,IACIC,EACAC,EAFAC,EAAQ,GAIZ,GAA0B,IAAtB5C,KAAKoC,aAAoB,OAAOQ,EAEpC,IAAKD,KAASD,EAAS1C,KAAKkC,QACtBhB,EAAIH,KAAK2B,EAAQC,IAAOC,EAAMT,KAAKb,EAASqB,EAAKE,MAAM,GAAKF,GAGlE,OAAIxB,OAAO2B,sBACFF,EAAMG,OAAO5B,OAAO2B,sBAAsBJ,IAG5CE,GAUTN,EAAalB,UAAU4B,UAAY,SAAmBlB,GACpD,IAAIG,EAAMX,EAASA,EAASQ,EAAQA,EAChCmB,EAAWjD,KAAKkC,QAAQD,GAE5B,IAAKgB,EAAU,MAAO,GACtB,GAAIA,EAASxB,GAAI,MAAO,CAACwB,EAASxB,IAElC,IAAK,IAAIlB,EAAI,EAAG2C,EAAID,EAASjC,OAAQmC,EAAK,IAAIC,MAAMF,GAAI3C,EAAI2C,EAAG3C,IAC7D4C,EAAG5C,GAAK0C,EAAS1C,GAAGkB,GAGtB,OAAO0B,GAUTb,EAAalB,UAAUiC,cAAgB,SAAuBvB,GAC5D,IAAIG,EAAMX,EAASA,EAASQ,EAAQA,EAChCkB,EAAYhD,KAAKkC,QAAQD,GAE7B,OAAKe,EACDA,EAAUvB,GAAW,EAClBuB,EAAUhC,OAFM,GAYzBsB,EAAalB,UAAUkC,KAAO,SAAcxB,EAAOyB,EAAIC,EAAIC,EAAIC,EAAIC,GACjE,IAAI1B,EAAMX,EAASA,EAASQ,EAAQA,EAEpC,IAAK9B,KAAKkC,QAAQD,GAAM,OAAO,EAE/B,IAEI2B,EAFAZ,EAAYhD,KAAKkC,QAAQD,GACzB4B,EAAMC,UAAU9C,OAIpB,GAAIgC,EAAUvB,GAAI,CAGhB,OAFIuB,EAAUrB,MAAM3B,KAAK+D,eAAejC,EAAOkB,EAAUvB,QAAIuC,GAAW,GAEhEH,GACN,KAAK,EAAG,OAAOb,EAAUvB,GAAGV,KAAKiC,EAAUtB,UAAU,EACrD,KAAK,EAAG,OAAOsB,EAAUvB,GAAGV,KAAKiC,EAAUtB,QAAS6B,IAAK,EACzD,KAAK,EAAG,OAAOP,EAAUvB,GAAGV,KAAKiC,EAAUtB,QAAS6B,EAAIC,IAAK,EAC7D,KAAK,EAAG,OAAOR,EAAUvB,GAAGV,KAAKiC,EAAUtB,QAAS6B,EAAIC,EAAIC,IAAK,EACjE,KAAK,EAAG,OAAOT,EAAUvB,GAAGV,KAAKiC,EAAUtB,QAAS6B,EAAIC,EAAIC,EAAIC,IAAK,EACrE,KAAK,EAAG,OAAOV,EAAUvB,GAAGV,KAAKiC,EAAUtB,QAAS6B,EAAIC,EAAIC,EAAIC,EAAIC,IAAK,EAG3E,IAAKpD,EAAI,EAAGqD,EAAO,IAAIR,MAAMS,EAAK,GAAItD,EAAIsD,EAAKtD,IAC7CqD,EAAKrD,EAAI,GAAKuD,UAAUvD,GAG1ByC,EAAUvB,GAAGwC,MAAMjB,EAAUtB,QAASkC,QAKtC,IAHA,IACIM,EADAlD,EAASgC,EAAUhC,OAGlBT,EAAI,EAAGA,EAAIS,EAAQT,IAGtB,OAFIyC,EAAUzC,GAAGoB,MAAM3B,KAAK+D,eAAejC,EAAOkB,EAAUzC,GAAGkB,QAAIuC,GAAW,GAEtEH,GACN,KAAK,EAAGb,EAAUzC,GAAGkB,GAAGV,KAAKiC,EAAUzC,GAAGmB,SAAU,MACpD,KAAK,EAAGsB,EAAUzC,GAAGkB,GAAGV,KAAKiC,EAAUzC,GAAGmB,QAAS6B,GAAK,MACxD,KAAK,EAAGP,EAAUzC,GAAGkB,GAAGV,KAAKiC,EAAUzC,GAAGmB,QAAS6B,EAAIC,GAAK,MAC5D,KAAK,EAAGR,EAAUzC,GAAGkB,GAAGV,KAAKiC,EAAUzC,GAAGmB,QAAS6B,EAAIC,EAAIC,GAAK,MAChE,QACE,IAAKG,EAAM,IAAKM,EAAI,EAAGN,EAAO,IAAIR,MAAMS,EAAK,GAAIK,EAAIL,EAAKK,IACxDN,EAAKM,EAAI,GAAKJ,UAAUI,GAG1BlB,EAAUzC,GAAGkB,GAAGwC,MAAMjB,EAAUzC,GAAGmB,QAASkC,GAKpD,OAAO,GAYTtB,EAAalB,UAAU+C,GAAK,SAAYrC,EAAOL,EAAIC,GACjD,OAAOE,EAAY5B,KAAM8B,EAAOL,EAAIC,GAAS,IAY/CY,EAAalB,UAAUO,KAAO,SAAcG,EAAOL,EAAIC,GACrD,OAAOE,EAAY5B,KAAM8B,EAAOL,EAAIC,GAAS,IAa/CY,EAAalB,UAAU2C,eAAiB,SAAwBjC,EAAOL,EAAIC,EAASC,GAClF,IAAIM,EAAMX,EAASA,EAASQ,EAAQA,EAEpC,IAAK9B,KAAKkC,QAAQD,GAAM,OAAOjC,KAC/B,IAAKyB,EAEH,OADAY,EAAWrC,KAAMiC,GACVjC,KAGT,IAAIgD,EAAYhD,KAAKkC,QAAQD,GAE7B,GAAIe,EAAUvB,GAEVuB,EAAUvB,KAAOA,GACfE,IAAQqB,EAAUrB,MAClBD,GAAWsB,EAAUtB,UAAYA,GAEnCW,EAAWrC,KAAMiC,OAEd,CACL,IAAK,IAAI1B,EAAI,EAAGmC,EAAS,GAAI1B,EAASgC,EAAUhC,OAAQT,EAAIS,EAAQT,KAEhEyC,EAAUzC,GAAGkB,KAAOA,GACnBE,IAASqB,EAAUzC,GAAGoB,MACtBD,GAAWsB,EAAUzC,GAAGmB,UAAYA,IAErCgB,EAAOP,KAAKa,EAAUzC,IAOtBmC,EAAO1B,OAAQhB,KAAKkC,QAAQD,GAAyB,IAAlBS,EAAO1B,OAAe0B,EAAO,GAAKA,EACpEL,EAAWrC,KAAMiC,GAGxB,OAAOjC,MAUTsC,EAAalB,UAAUgD,mBAAqB,SAA4BtC,GACtE,IAAIG,EAUJ,OARIH,GACFG,EAAMX,EAASA,EAASQ,EAAQA,EAC5B9B,KAAKkC,QAAQD,IAAMI,EAAWrC,KAAMiC,KAExCjC,KAAKkC,QAAU,IAAIX,EACnBvB,KAAKoC,aAAe,GAGfpC,MAMTsC,EAAalB,UAAUiD,IAAM/B,EAAalB,UAAU2C,eACpDzB,EAAalB,UAAUQ,YAAcU,EAAalB,UAAU+C,GAK5D7B,EAAagC,SAAWhD,EAKxBgB,EAAaA,aAAeA,OAKxB,IAAuB5C,IACzBA,EAAOD,QAAU6C,IAGjB,KAAK,GAAG,CAAC,GAlV0W,CAkVtW"}
\ No newline at end of file
module.exports = {
presets: [
["@babel/preset-env", {
targets: {
node: "current"
}
}]
]
};
\ No newline at end of file
declare type LayoutData = {
left: number;
top: number;
width: number;
height: number;
};
declare type LayoutNode = {
id: number;
style: Object;
children: LayoutNode[];
layout?: LayoutData;
};
declare class Element {
static uuid(): number;
parent: Element | null;
id: number;
style: {
[key: string]: any;
};
computedStyle: {
[key: string]: any;
};
lastComputedStyle: {
[key: string]: any;
};
children: {
[key: string]: Element;
};
layoutBox: LayoutData;
constructor(style?: {
[key: string]: any;
});
getAbsolutePosition(element: Element): any;
add(element: Element): void;
remove(element?: Element): void;
getNodeTree(): LayoutNode;
applyLayout(layoutNode: LayoutNode): void;
layout(): void;
}
export default Element;
export default class EventEmitter {
emit(event: string, data?: any): void;
on(event: string, callback: any): void;
off(event: string, callback: any): void;
}
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var o=e();for(var r in o)("object"==typeof exports?exports:t)[r]=o[r]}}(this,(function(){return function(t){var e={};function o(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,o),i.l=!0,i.exports}return o.m=t,o.c=e,o.d=function(t,e,r){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)o.d(r,i,function(e){return t[e]}.bind(null,i));return r},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=0)}([function(t,e,o){"use strict";var r=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var i=r(o(1)),l=o(2),n=0,a=function(){function t(e){var o=this;void 0===e&&(e={}),this.parent=null,this.id=t.uuid(),this.style={},this.computedStyle={},this.lastComputedStyle={},this.children={},this.layoutBox={left:0,top:0,width:0,height:0},e=Object.assign(l.getDefaultStyle(),e),this.computedStyle=Object.assign(l.getDefaultStyle(),e),this.lastComputedStyle=Object.assign(l.getDefaultStyle(),e),Object.keys(e).forEach((function(t){Object.defineProperty(o.style,t,{configurable:!0,enumerable:!0,get:function(){return e[t]},set:function(r){r!==e[t]&&void 0!==r&&(o.lastComputedStyle=o.computedStyle[t],e[t]=r,o.computedStyle[t]=r,l.scalableStyles.includes(t)&&o.style.scale&&(o.computedStyle[t]=r*o.style.scale),"scale"===t&&l.scalableStyles.forEach((function(t){e[t]&&(o.computedStyle[t]=e[t]*r)})),"hidden"===t&&(r?l.layoutAffectedStyles.forEach((function(t){o.computedStyle[t]=0})):l.layoutAffectedStyles.forEach((function(t){o.computedStyle[t]=o.lastComputedStyle[t]}))))}})})),this.style.scale&&l.scalableStyles.forEach((function(t){if(o.style[t]){var e=o.style[t]*o.style.scale;o.computedStyle[t]=e}})),e.hidden&&l.layoutAffectedStyles.forEach((function(t){o.computedStyle[t]=0}))}return t.uuid=function(){return n++},t.prototype.getAbsolutePosition=function(t){if(!t)return this.getAbsolutePosition(this);if(!t.parent)return{left:0,top:0};var e=this.getAbsolutePosition(t.parent),o=e.left,r=e.top;return{left:o+t.layoutBox.left,top:r+t.layoutBox.top}},t.prototype.add=function(t){t.parent=this,this.children[t.id]=t},t.prototype.remove=function(t){var e=this;t?this.children[t.id]&&(t.remove(),delete this.children[t.id]):Object.keys(this.children).forEach((function(t){e.children[t].remove(),delete e.children[t]}))},t.prototype.getNodeTree=function(){var t=this;return{id:this.id,style:this.computedStyle,children:Object.keys(this.children).map((function(e){return t.children[e].getNodeTree()}))}},t.prototype.applyLayout=function(t){var e=this;["left","top","width","height"].forEach((function(o){t.layout&&"number"==typeof t.layout[o]&&(e.layoutBox[o]=t.layout[o],!e.parent||"left"!==o&&"top"!==o||(e.layoutBox[o]+=e.parent.layoutBox[o]))})),t.children.forEach((function(t){e.children[t.id].applyLayout(t)}))},t.prototype.layout=function(){var t=this.getNodeTree();i.default(t),this.applyLayout(t)},t}();e.default=a},function(t,e,o){"use strict";o.r(e);var r=function(){var t,e="inherit",o="ltr",r="rtl",i="row",l="row-reverse",n="column",a="column-reverse",u="flex-start",d="center",s="flex-end",y="space-between",c="space-around",f="flex-start",h="center",p="flex-end",g="stretch",v="relative",m="absolute",b={row:"left","row-reverse":"right",column:"top","column-reverse":"bottom"},x={row:"right","row-reverse":"left",column:"bottom","column-reverse":"top"},w={row:"left","row-reverse":"right",column:"top","column-reverse":"bottom"},S={row:"width","row-reverse":"width",column:"height","column-reverse":"height"};function W(t){return void 0===t}function L(t){return t===i||t===l}function k(t,e){if(void 0!==t.style.marginStart&&L(e))return t.style.marginStart;var o=null;switch(e){case"row":o=t.style.marginLeft;break;case"row-reverse":o=t.style.marginRight;break;case"column":o=t.style.marginTop;break;case"column-reverse":o=t.style.marginBottom}return void 0!==o?o:void 0!==t.style.margin?t.style.margin:0}function j(t,e){if(void 0!==t.style.marginEnd&&L(e))return t.style.marginEnd;var o=null;switch(e){case"row":o=t.style.marginRight;break;case"row-reverse":o=t.style.marginLeft;break;case"column":o=t.style.marginBottom;break;case"column-reverse":o=t.style.marginTop}return null!=o?o:void 0!==t.style.margin?t.style.margin:0}function B(t,e){if(void 0!==t.style.borderStartWidth&&t.style.borderStartWidth>=0&&L(e))return t.style.borderStartWidth;var o=null;switch(e){case"row":o=t.style.borderLeftWidth;break;case"row-reverse":o=t.style.borderRightWidth;break;case"column":o=t.style.borderTopWidth;break;case"column-reverse":o=t.style.borderBottomWidth}return null!=o&&o>=0?o:void 0!==t.style.borderWidth&&t.style.borderWidth>=0?t.style.borderWidth:0}function E(t,e){if(void 0!==t.style.borderEndWidth&&t.style.borderEndWidth>=0&&L(e))return t.style.borderEndWidth;var o=null;switch(e){case"row":o=t.style.borderRightWidth;break;case"row-reverse":o=t.style.borderLeftWidth;break;case"column":o=t.style.borderBottomWidth;break;case"column-reverse":o=t.style.borderTopWidth}return null!=o&&o>=0?o:void 0!==t.style.borderWidth&&t.style.borderWidth>=0?t.style.borderWidth:0}function C(t,e){return function(t,e){if(void 0!==t.style.paddingStart&&t.style.paddingStart>=0&&L(e))return t.style.paddingStart;var o=null;switch(e){case"row":o=t.style.paddingLeft;break;case"row-reverse":o=t.style.paddingRight;break;case"column":o=t.style.paddingTop;break;case"column-reverse":o=t.style.paddingBottom}return null!=o&&o>=0?o:void 0!==t.style.padding&&t.style.padding>=0?t.style.padding:0}(t,e)+B(t,e)}function T(t,e){return function(t,e){if(void 0!==t.style.paddingEnd&&t.style.paddingEnd>=0&&L(e))return t.style.paddingEnd;var o=null;switch(e){case"row":o=t.style.paddingRight;break;case"row-reverse":o=t.style.paddingLeft;break;case"column":o=t.style.paddingBottom;break;case"column-reverse":o=t.style.paddingTop}return null!=o&&o>=0?o:void 0!==t.style.padding&&t.style.padding>=0?t.style.padding:0}(t,e)+E(t,e)}function O(t,e){return B(t,e)+E(t,e)}function _(t,e){return k(t,e)+j(t,e)}function R(t,e){return C(t,e)+T(t,e)}function A(t,e){return e.style.alignSelf?e.style.alignSelf:t.style.alignItems?t.style.alignItems:"stretch"}function P(t,e){if(e===r){if(t===i)return l;if(t===l)return i}return t}function D(t,e){return function(t){return t===n||t===a}(t)?P(i,e):n}function H(t){return t.style.position?t.style.position:"relative"}function M(t){return H(t)===v&&t.style.flex>0}function I(t,e){return t.layout[S[e]]+_(t,e)}function N(t,e){return void 0!==t.style[S[e]]&&t.style[S[e]]>=0}function F(t,e){return void 0!==t.style[e]}function q(t,e){return void 0!==t.style[e]?t.style[e]:0}function z(t,e,o){var r={row:t.style.minWidth,"row-reverse":t.style.minWidth,column:t.style.minHeight,"column-reverse":t.style.minHeight}[e],i={row:t.style.maxWidth,"row-reverse":t.style.maxWidth,column:t.style.maxHeight,"column-reverse":t.style.maxHeight}[e],l=o;return void 0!==i&&i>=0&&l>i&&(l=i),void 0!==r&&r>=0&&l<r&&(l=r),l}function U(t,e){return t>e?t:e}function G(t,e){void 0===t.layout[S[e]]&&N(t,e)&&(t.layout[S[e]]=U(z(t,e,t.style[S[e]]),R(t,e)))}function J(t,e,o){e.layout[x[o]]=t.layout[S[o]]-e.layout[S[o]]-e.layout[w[o]]}function K(t,e){return void 0!==t.style[b[e]]?q(t,b[e]):-q(t,x[e])}function Q(r,E,Q){var X=function(t,r){var i;return(i=t.style.direction?t.style.direction:e)===e&&(i=void 0===r?o:r),i}(r,Q),Y=P(function(t){return t.style.flexDirection?t.style.flexDirection:n}(r),X),Z=D(Y,X),$=P(i,X);G(r,Y),G(r,Z),r.layout.direction=X,r.layout[b[Y]]+=k(r,Y)+K(r,Y),r.layout[x[Y]]+=j(r,Y)+K(r,Y),r.layout[b[Z]]+=k(r,Z)+K(r,Z),r.layout[x[Z]]+=j(r,Z)+K(r,Z);var tt=r.children.length,et=R(r,$);if(function(t){return void 0!==t.style.measure}(r)){var ot=!W(r.layout[S[$]]),rt=t;rt=N(r,$)?r.style.width:ot?r.layout[S[$]]:E-_(r,$),rt-=et;var it=!N(r,$)&&!ot,lt=!N(r,n)&&W(r.layout[S[n]]);if(it||lt){var nt=r.style.measure(rt);it&&(r.layout.width=nt.width+et),lt&&(r.layout.height=nt.height+R(r,n))}if(0===tt)return}var at,ut,dt,st,yt=function(t){return"wrap"===t.style.flexWrap}(r),ct=function(t){return t.style.justifyContent?t.style.justifyContent:"flex-start"}(r),ft=C(r,Y),ht=C(r,Z),pt=R(r,Y),gt=R(r,Z),vt=!W(r.layout[S[Y]]),mt=!W(r.layout[S[Z]]),bt=L(Y),xt=null,wt=null,St=t;vt&&(St=r.layout[S[Y]]-pt);for(var Wt=0,Lt=0,kt=0,jt=0,Bt=0,Et=0;Lt<tt;){var Ct,Tt=0,Ot=0,_t=0,Rt=0,At=vt&&ct===u||!vt&&ct!==d,Pt=At?tt:Wt,Dt=!0,Ht=tt,Mt=null,It=null,Nt=ft,Ft=0;for(at=Wt;at<tt;++at){if((dt=r.children[at]).lineIndex=Et,dt.nextAbsoluteChild=null,dt.nextFlexChild=null,(Xt=A(r,dt))===g&&H(dt)===v&&mt&&!N(dt,Z))dt.layout[S[Z]]=U(z(dt,Z,r.layout[S[Z]]-gt-_(dt,Z)),R(dt,Z));else if(H(dt)===m)for(null===xt&&(xt=dt),null!==wt&&(wt.nextAbsoluteChild=dt),wt=dt,ut=0;ut<2;ut++)st=0!==ut?i:n,!W(r.layout[S[st]])&&!N(dt,st)&&F(dt,b[st])&&F(dt,x[st])&&(dt.layout[S[st]]=U(z(dt,st,r.layout[S[st]]-R(r,st)-_(dt,st)-q(dt,b[st])-q(dt,x[st])),R(dt,st)));var qt=0;if(vt&&M(dt)?(Ot++,_t+=dt.style.flex,null===Mt&&(Mt=dt),null!==It&&(It.nextFlexChild=dt),It=dt,qt=R(dt,Y)+_(dt,Y)):(Ct=t,bt||(Ct=N(r,$)?r.layout[S[$]]-et:E-_(r,$)-et),0===kt&&V(dt,Ct,X),H(dt)===v&&(Rt++,qt=I(dt,Y))),yt&&vt&&Tt+qt>St&&at!==Wt){Rt--,kt=1;break}At&&(H(dt)!==v||M(dt))&&(At=!1,Pt=at),Dt&&(H(dt)!==v||Xt!==g&&Xt!==f||W(dt.layout[S[Z]]))&&(Dt=!1,Ht=at),At&&(dt.layout[w[Y]]+=Nt,vt&&J(r,dt,Y),Nt+=I(dt,Y),Ft=U(Ft,z(dt,Z,I(dt,Z)))),Dt&&(dt.layout[w[Z]]+=jt+ht,mt&&J(r,dt,Z)),kt=0,Tt+=qt,Lt=at+1}var zt=0,Ut=0,Gt=0;if(Gt=vt?St-Tt:U(Tt,0)-Tt,0!==Ot){var Jt,Kt,Qt=Gt/_t;for(It=Mt;null!==It;)(Jt=Qt*It.style.flex+R(It,Y))!==(Kt=z(It,Y,Jt))&&(Gt-=Kt,_t-=It.style.flex),It=It.nextFlexChild;for((Qt=Gt/_t)<0&&(Qt=0),It=Mt;null!==It;)It.layout[S[Y]]=z(It,Y,Qt*It.style.flex+R(It,Y)),Ct=t,N(r,$)?Ct=r.layout[S[$]]-et:bt||(Ct=E-_(r,$)-et),V(It,Ct,X),dt=It,It=It.nextFlexChild,dt.nextFlexChild=null}else ct!==u&&(ct===d?zt=Gt/2:ct===s?zt=Gt:ct===y?(Gt=U(Gt,0),Ut=Ot+Rt-1!=0?Gt/(Ot+Rt-1):0):ct===c&&(zt=(Ut=Gt/(Ot+Rt))/2));for(Nt+=zt,at=Pt;at<Lt;++at)H(dt=r.children[at])===m&&F(dt,b[Y])?dt.layout[w[Y]]=q(dt,b[Y])+B(r,Y)+k(dt,Y):(dt.layout[w[Y]]+=Nt,vt&&J(r,dt,Y),H(dt)===v&&(Nt+=Ut+I(dt,Y),Ft=U(Ft,z(dt,Z,I(dt,Z)))));var Vt=r.layout[S[Z]];for(mt||(Vt=U(z(r,Z,Ft+gt),gt)),at=Ht;at<Lt;++at)if(H(dt=r.children[at])===m&&F(dt,b[Z]))dt.layout[w[Z]]=q(dt,b[Z])+B(r,Z)+k(dt,Z);else{var Xt,Yt=ht;if(H(dt)===v)if((Xt=A(r,dt))===g)W(dt.layout[S[Z]])&&(dt.layout[S[Z]]=U(z(dt,Z,Vt-gt-_(dt,Z)),R(dt,Z)));else if(Xt!==f){var Zt=Vt-gt-I(dt,Z);Yt+=Xt===h?Zt/2:Zt}dt.layout[w[Z]]+=jt+Yt,mt&&J(r,dt,Z)}jt+=Ft,Bt=U(Bt,Nt),Et+=1,Wt=Lt}if(Et>1&&mt){var $t=r.layout[S[Z]]-gt,te=$t-jt,ee=0,oe=ht,re=function(t){return t.style.alignContent?t.style.alignContent:"flex-start"}(r);re===p?oe+=te:re===h?oe+=te/2:re===g&&$t>jt&&(ee=te/Et);var ie=0;for(at=0;at<Et;++at){var le=ie,ne=0;for(ut=le;ut<tt;++ut)if(H(dt=r.children[ut])===v){if(dt.lineIndex!==at)break;W(dt.layout[S[Z]])||(ne=U(ne,dt.layout[S[Z]]+_(dt,Z)))}for(ie=ut,ne+=ee,ut=le;ut<ie;++ut)if(H(dt=r.children[ut])===v){var ae=A(r,dt);if(ae===f)dt.layout[w[Z]]=oe+k(dt,Z);else if(ae===p)dt.layout[w[Z]]=oe+ne-j(dt,Z)-dt.layout[S[Z]];else if(ae===h){var ue=dt.layout[S[Z]];dt.layout[w[Z]]=oe+(ne-ue)/2}else ae===g&&(dt.layout[w[Z]]=oe+k(dt,Z))}oe+=ne}}var de=!1,se=!1;if(vt||(r.layout[S[Y]]=U(z(r,Y,Bt+T(r,Y)),pt),Y!==l&&Y!==a||(de=!0)),mt||(r.layout[S[Z]]=U(z(r,Z,jt+gt),gt),Z!==l&&Z!==a||(se=!0)),de||se)for(at=0;at<tt;++at)dt=r.children[at],de&&J(r,dt,Y),se&&J(r,dt,Z);for(wt=xt;null!==wt;){for(ut=0;ut<2;ut++)st=0!==ut?i:n,!W(r.layout[S[st]])&&!N(wt,st)&&F(wt,b[st])&&F(wt,x[st])&&(wt.layout[S[st]]=U(z(wt,st,r.layout[S[st]]-O(r,st)-_(wt,st)-q(wt,b[st])-q(wt,x[st])),R(wt,st))),F(wt,x[st])&&!F(wt,b[st])&&(wt.layout[b[st]]=r.layout[S[st]]-wt.layout[S[st]]-q(wt,x[st]));dt=wt,wt=wt.nextAbsoluteChild,dt.nextAbsoluteChild=null}}function V(t,e,r){t.shouldUpdate=!0;var i=t.style.direction||o;!t.isDirty&&t.lastLayout&&t.lastLayout.requestedHeight===t.layout.height&&t.lastLayout.requestedWidth===t.layout.width&&t.lastLayout.parentMaxWidth===e&&t.lastLayout.direction===i?(t.layout.width=t.lastLayout.width,t.layout.height=t.lastLayout.height,t.layout.top=t.lastLayout.top,t.layout.left=t.lastLayout.left):(t.lastLayout||(t.lastLayout={}),t.lastLayout.requestedWidth=t.layout.width,t.lastLayout.requestedHeight=t.layout.height,t.lastLayout.parentMaxWidth=e,t.lastLayout.direction=i,t.children.forEach((function(t){t.layout.width=void 0,t.layout.height=void 0,t.layout.top=0,t.layout.left=0})),Q(t,e,r),t.lastLayout.width=t.layout.width,t.lastLayout.height=t.layout.height,t.lastLayout.top=t.layout.top,t.lastLayout.left=t.layout.left)}return{layoutNodeImpl:Q,computeLayout:V,fillNodes:function t(e){return e.layout&&!e.isDirty||(e.layout={width:void 0,height:void 0,top:0,left:0,right:0,bottom:0}),e.style||(e.style={}),e.children||(e.children=[]),e.children.forEach(t),e}}}();e.default=function(t){r.fillNodes(t),r.computeLayout(t)}},function(t,e,o){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.textStyles=["color","fontSize","textAlign","fontWeight","lineHeight","lineBreak"];e.scalableStyles=["left","top","right","bottom","width","height","margin","marginLeft","marginRight","marginTop","marginBottom","padding","paddingLeft","paddingRight","paddingTop","paddingBottom","borderWidth","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"];e.layoutAffectedStyles=["margin","marginTop","marginBottom","marginLeft","marginRight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","width","height"];e.getDefaultStyle=function(){return{left:void 0,top:void 0,right:void 0,bottom:void 0,width:void 0,height:void 0,maxWidth:void 0,maxHeight:void 0,minWidth:void 0,minHeight:void 0,margin:void 0,marginLeft:void 0,marginRight:void 0,marginTop:void 0,marginBottom:void 0,padding:void 0,paddingLeft:void 0,paddingRight:void 0,paddingTop:void 0,paddingBottom:void 0,borderWidth:void 0,flexDirection:void 0,justifyContent:void 0,alignItems:void 0,alignSelf:void 0,flex:void 0,flexWrap:void 0,position:void 0,hidden:!1,scale:1}}}]).default}));
\ No newline at end of file
declare const textStyles: string[];
declare const scalableStyles: string[];
declare const layoutAffectedStyles: string[];
declare const getDefaultStyle: () => {
left: undefined;
top: undefined;
right: undefined;
bottom: undefined;
width: undefined;
height: undefined;
maxWidth: undefined;
maxHeight: undefined;
minWidth: undefined;
minHeight: undefined;
margin: undefined;
marginLeft: undefined;
marginRight: undefined;
marginTop: undefined;
marginBottom: undefined;
padding: undefined;
paddingLeft: undefined;
paddingRight: undefined;
paddingTop: undefined;
paddingBottom: undefined;
borderWidth: undefined;
flexDirection: undefined;
justifyContent: undefined;
alignItems: undefined;
alignSelf: undefined;
flex: undefined;
flexWrap: undefined;
position: undefined;
hidden: boolean;
scale: number;
};
export { getDefaultStyle, scalableStyles, textStyles, layoutAffectedStyles };
module.exports = {
transform: {
"^.+\\.js$": "babel-jest",
"^.+\\.ts$": "ts-jest"
}
};
\ No newline at end of file
{
"_from": "widget-ui@^1.0.2",
"_id": "widget-ui@1.0.2",
"_inBundle": false,
"_integrity": "sha512-gDXosr5mflJdMA1weU1A47aTsTFfMJhfA4EKgO5XFebY3eVklf80KD4GODfrjo8J2WQ+9YjL1Rd9UUmKIzhShw==",
"_location": "/widget-ui",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "widget-ui@^1.0.2",
"name": "widget-ui",
"escapedName": "widget-ui",
"rawSpec": "^1.0.2",
"saveSpec": null,
"fetchSpec": "^1.0.2"
},
"_requiredBy": [
"/wxml-to-canvas"
],
"_resolved": "https://registry.npmjs.org/widget-ui/-/widget-ui-1.0.2.tgz",
"_shasum": "d65a560b91739fbd0ea7c2f5f2d28fe4c0132470",
"_spec": "widget-ui@^1.0.2",
"_where": "/Users/wanglumin/WeChatProjects/voting/node_modules/wxml-to-canvas",
"author": "",
"bundleDependencies": false,
"dependencies": {
"eventemitter3": "^4.0.0"
},
"deprecated": false,
"description": "",
"devDependencies": {
"@babel/preset-env": "^7.6.3",
"@babel/preset-typescript": "^7.6.0",
"@types/jest": "^24.0.18",
"babel-jest": "^24.9.0",
"jest": "^24.9.0",
"ts-jest": "^24.1.0",
"ts-loader": "^6.2.0",
"typescript": "^3.6.4",
"webpack": "^4.41.1",
"webpack-cli": "^3.3.9"
},
"license": "ISC",
"main": "dist/index.js",
"name": "widget-ui",
"scripts": {
"build": "webpack",
"test": "jest"
},
"version": "1.0.2"
}
此差异已折叠。
import computeLayout from "./css-layout";
import { getDefaultStyle, scalableStyles, layoutAffectedStyles } from "./style";
type LayoutData = {
left: number,
top: number,
width: number,
height: number
};
type LayoutNode = {
id: number,
style: Object,
children: LayoutNode[],
layout?: LayoutData
};
let uuid = 0;
class Element {
public static uuid(): number {
return uuid++;
}
public parent: Element | null = null;
public id: number = Element.uuid();
public style: { [key: string]: any } = {};
public computedStyle: { [key: string]: any } = {};
public lastComputedStyle: { [key: string]: any } = {};
public children: { [key: string]: Element } = {};
public layoutBox: LayoutData = { left: 0, top: 0, width: 0, height: 0 };
constructor(style: { [key: string]: any } = {}) {
// 拷贝一份,防止被外部逻辑修改
style = Object.assign(getDefaultStyle(), style);
this.computedStyle = Object.assign(getDefaultStyle(), style);
this.lastComputedStyle = Object.assign(getDefaultStyle(), style);
Object.keys(style).forEach(key => {
Object.defineProperty(this.style, key, {
configurable: true,
enumerable: true,
get: () => style[key],
set: (value: any) => {
if (value === style[key] || value === undefined) {
return;
}
this.lastComputedStyle = this.computedStyle[key]
style[key] = value
this.computedStyle[key] = value
// 如果设置的是一个可缩放的属性, 计算自己
if (scalableStyles.includes(key) && this.style.scale) {
this.computedStyle[key] = value * this.style.scale
}
// 如果设置的是 scale, 则把所有可缩放的属性计算
if (key === "scale") {
scalableStyles.forEach(prop => {
if (style[prop]) {
this.computedStyle[prop] = style[prop] * value
}
})
}
if (key === "hidden") {
if (value) {
layoutAffectedStyles.forEach((key: string) => {
this.computedStyle[key] = 0;
});
} else {
layoutAffectedStyles.forEach((key: string) => {
this.computedStyle[key] = this.lastComputedStyle[key];
});
}
}
}
})
})
if (this.style.scale) {
scalableStyles.forEach((key: string) => {
if (this.style[key]) {
const computedValue = this.style[key] * this.style.scale;
this.computedStyle[key] = computedValue;
}
});
}
if (style.hidden) {
layoutAffectedStyles.forEach((key: string) => {
this.computedStyle[key] = 0;
});
}
}
getAbsolutePosition(element: Element) {
if (!element) {
return this.getAbsolutePosition(this)
}
if (!element.parent) {
return {
left: 0,
top: 0
}
}
const {left, top} = this.getAbsolutePosition(element.parent)
return {
left: left + element.layoutBox.left,
top: top + element.layoutBox.top
}
}
public add(element: Element) {
element.parent = this;
this.children[element.id] = element;
}
public remove(element?: Element) {
// 删除自己
if (!element) {
Object.keys(this.children).forEach(id => {
const child = this.children[id]
child.remove()
delete this.children[id]
})
} else if (this.children[element.id]) {
// 是自己的子节点才删除
element.remove()
delete this.children[element.id];
}
}
public getNodeTree(): LayoutNode {
return {
id: this.id,
style: this.computedStyle,
children: Object.keys(this.children).map((id: string) => {
const child = this.children[id];
return child.getNodeTree();
})
}
}
public applyLayout(layoutNode: LayoutNode) {
["left", "top", "width", "height"].forEach((key: string) => {
if (layoutNode.layout && typeof layoutNode.layout[key] === "number") {
this.layoutBox[key] = layoutNode.layout[key];
if (this.parent && (key === "left" || key === "top")) {
this.layoutBox[key] += this.parent.layoutBox[key];
}
}
});
layoutNode.children.forEach((child: LayoutNode) => {
this.children[child.id].applyLayout(child);
});
}
layout() {
const nodeTree = this.getNodeTree();
computeLayout(nodeTree);
this.applyLayout(nodeTree);
}
}
export default Element;
\ No newline at end of file
import _EventEmitter from "eventemitter3";
const emitter = new _EventEmitter();
export default class EventEmitter {
public emit(event: string, data?: any) {
emitter.emit(event, data);
}
public on(event: string, callback) {
emitter.on(event, callback);
}
public off(event: string, callback) {
emitter.off(event, callback);
}
}
\ No newline at end of file
const textStyles: string[] = ["color", "fontSize", "textAlign", "fontWeight", "lineHeight", "lineBreak"];
const scalableStyles: string[] = ["left", "top", "right", "bottom", "width", "height",
"margin", "marginLeft", "marginRight", "marginTop", "marginBottom",
"padding", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom",
"borderWidth", "borderLeftWidth", "borderRightWidth", "borderTopWidth", "borderBottomWidth"];
const layoutAffectedStyles: string[] = [
"margin", "marginTop", "marginBottom", "marginLeft", "marginRight",
"padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight",
"width", "height"];
type Style = {
left: number,
top: number,
right: number,
bottom: number,
width: number,
height: number,
maxWidth: number,
maxHeight: number,
minWidth: number,
minHeight: number,
margin: number,
marginLeft: number,
marginRight: number,
marginTop: number,
marginBottom: number,
padding: number,
paddingLeft: number,
paddingRight: number,
paddingTop: number,
paddingBottom: number,
borderWidth: number,
borderLeftWidth: number,
borderRightWidth: number,
borderTopWidth: number,
borderBottomWidth: number,
flexDirection: "column" | "row",
justifyContent: "flex-start" | "center" | "flex-end" | "space-between" | "space-around",
alignItems: "flex-start" | "center" | "flex-end" | "stretch",
alignSelf: "flex-start" | "center" | "flex-end" | "stretch",
flex: number,
flexWrap: "wrap" | "nowrap",
position: "relative" | "absolute",
hidden: boolean,
scale: number
}
const getDefaultStyle = () => ({
left: undefined,
top: undefined,
right: undefined,
bottom: undefined,
width: undefined,
height: undefined,
maxWidth: undefined,
maxHeight: undefined,
minWidth: undefined,
minHeight: undefined,
margin: undefined,
marginLeft: undefined,
marginRight: undefined,
marginTop: undefined,
marginBottom: undefined,
padding: undefined,
paddingLeft: undefined,
paddingRight: undefined,
paddingTop: undefined,
paddingBottom: undefined,
borderWidth: undefined,
flexDirection: undefined,
justifyContent: undefined,
alignItems: undefined,
alignSelf: undefined,
flex: undefined,
flexWrap: undefined,
position: undefined,
hidden: false,
scale: 1
})
export {
getDefaultStyle, scalableStyles, textStyles, layoutAffectedStyles
}
import Element from "../src/element";
test("layout", () => {
const container = new Element({
width: 100,
height: 100,
padding: 10,
borderWidth: 2
})
const div1 = new Element({
left: 5,
top: 5,
width: 14,
height: 14
})
container.add(div1);
container.layout();
// css-layout 是 border-box
expect(container.layoutBox.left).toBe(0);
expect(container.layoutBox.top).toBe(0);
expect(container.layoutBox.width).toBe(100);
expect(container.layoutBox.height).toBe(100);
expect(div1.layoutBox.left).toBe(10 + 2 + 5);
expect(div1.layoutBox.top).toBe(10 + 2 + 5);
expect(div1.layoutBox.width).toBe(14);
expect(div1.layoutBox.height).toBe(14);
});
test("overflow", () => {
const container = new Element({
width: 100,
height: 100,
padding: 10,
borderWidth: 2
})
const div1 = new Element({
width: 114,
height: 114,
})
container.add(div1);
container.layout();
// 写死尺寸的情况下子元素不收缩父元素不撑开
expect(container.layoutBox.width).toBe(100);
expect(container.layoutBox.height).toBe(100);
expect(div1.layoutBox.left).toBe(10 + 2);
expect(div1.layoutBox.top).toBe(10 + 2);
expect(div1.layoutBox.width).toBe(114);
expect(div1.layoutBox.height).toBe(114);
});
test("right bottom", () => {
const container = new Element({
width: 100,
height: 100,
padding: 10,
borderWidth: 2
})
const div1 = new Element({
width: 14,
height: 14,
right: 13,
bottom: 9,
position: "absolute"
})
container.add(div1);
container.layout();
// right bottom 只有在 position 为 absolute 的情况下才有用
expect(container.layoutBox.width).toBe(100);
expect(container.layoutBox.height).toBe(100);
// 但这时就是以整个父元素为边界,而不是 border + padding 后的边界
expect(div1.layoutBox.left).toBe(100 - 13 - 14);
expect(div1.layoutBox.top).toBe(100 - 9 - 14);
});
test("flex center", () => {
const container = new Element({
width: 100,
height: 100,
padding: 10,
borderWidth: 2,
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
})
const div1 = new Element({
width: 14,
height: 14
})
container.add(div1);
container.layout();
// 使用 flex 水平垂直居中
expect(div1.layoutBox.left).toBe((100 - 14)/2);
expect(div1.layoutBox.top).toBe((100 - 14)/2);
})
test("flex top bottom", () => {
const container = new Element({
width: 100,
height: 100,
padding: 10,
borderWidth: 2,
flexDirection: "column",
justifyContent: "space-between",
alignItems: "stretch"
})
// flex 实现一上一下两行水平填满
const div1 = new Element({
height: 10
})
const div2 = new Element({
height: 20
})
container.add(div1);
container.add(div2);
container.layout();
expect(div1.layoutBox.left).toBe(10 + 2);
expect(div1.layoutBox.top).toBe(10 + 2);
expect(div1.layoutBox.width).toBe(100 - 10*2 - 2*2);
expect(div2.layoutBox.left).toBe(10 + 2);
expect(div2.layoutBox.top).toBe(100 - 10 - 2 - 20);
expect(div2.layoutBox.width).toBe(100 - 10*2 - 2*2);
})
test("rewrite uuid", () => {
// 小程序为了保证 webview 和 service 侧的 coverview 不冲突,所以设置了不同的自增起点
// uuid 静态方法就是为了根据不同的需求去覆写
let uuid = 79648527;
Element.uuid = () => uuid++;
const container = new Element();
expect(container.id).toEqual(79648527);
const div = new Element();
expect(div.id).toEqual(79648528);
});
test("absolute left top", () => {
const container = new Element({
width: 300,
height: 200,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
})
const div1 = new Element({
width: 80,
height: 60
})
const div2 = new Element({
width: 40,
height: 30
})
div1.add(div2)
container.add(div1)
container.layout()
expect(div1.layoutBox.left).toBe(110)
expect(div1.layoutBox.top).toBe(70)
expect(div2.layoutBox.left).toBe(110)
expect(div2.layoutBox.top).toBe(70)
})
\ No newline at end of file
{
"compilerOptions": {
"baseUrl": "src",
"resolveJsonModule": true,
"downlevelIteration": false,
"target": "es5",
"module": "commonjs",
"lib": [
"es5",
"es2015.promise",
"es2016",
"dom"
],
"outDir": "./dist",
"paths": {
"@/*": [
"*"
],
"*": [
"*"
]
},
"typeRoots": [
"./node_modules/@types"
],
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"declaration": true,
"stripInternal": true,
"experimentalDecorators": true,
"noImplicitReturns": true,
"alwaysStrict": true,
"noFallthroughCasesInSwitch": true,
"removeComments": false,
"strictNullChecks": true,
"strictFunctionTypes": true,
"skipLibCheck": true,
"pretty": true,
"strictPropertyInitialization": true
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
]
}
\ No newline at end of file
{
"defaultSeverity": "error",
"extends": [],
"rules": {
"adjacent-overload-signatures": true,
"align": {
"options": [
"parameters",
"statements"
]
},
"arrow-return-shorthand": true,
"ban-types": {
"options": [
[
"Object",
"Avoid using the `Object` type. Did you mean `object`?"
],
[
"Function",
"Avoid using the `Function` type. Prefer a specific function type, like `() => void`."
],
[
"Boolean",
"Avoid using the `Boolean` type. Did you mean `boolean`?"
],
[
"Number",
"Avoid using the `Number` type. Did you mean `number`?"
],
[
"String",
"Avoid using the `String` type. Did you mean `string`?"
],
[
"Symbol",
"Avoid using the `Symbol` type. Did you mean `symbol`?"
]
]
},
"comment-format": {
"options": [
"check-space"
]
},
"curly": {
"options": [
"ignore-same-line"
]
},
"cyclomatic-complexity": false,
"import-spacing": true,
"indent": {
"options": [
"spaces"
]
},
"interface-over-type-literal": true,
"member-ordering": [
true,
{
"order": [
"public-static-field",
"public-instance-field",
"private-static-field",
"private-instance-field",
"public-constructor",
"private-constructor",
"public-instance-method",
"protected-instance-method",
"private-instance-method"
],
"alphabetize": false
}
],
"no-angle-bracket-type-assertion": true,
"no-arg": true,
"no-conditional-assignment": true,
"no-debugger": true,
"no-duplicate-super": true,
"no-eval": true,
"no-internal-module": true,
"no-misused-new": true,
"no-reference-import": true,
"no-string-literal": true,
"no-string-throw": true,
"no-unnecessary-initializer": true,
"no-unsafe-finally": true,
"no-unused-expression": true,
"no-use-before-declare": false,
"no-var-keyword": true,
"no-var-requires": true,
"one-line": {
"options": [
"check-catch",
"check-else",
"check-finally",
"check-open-brace",
"check-whitespace"
]
},
"one-variable-per-declaration": {
"options": [
"ignore-for-loop"
]
},
"ordered-imports": {
"options": {
"import-sources-order": "case-insensitive",
"module-source-path": "full",
"named-imports-order": "case-insensitive"
}
},
"prefer-const": true,
"prefer-for-of": false,
"quotemark": {
"options": [
"double",
"avoid-escape"
]
},
"radix": true,
"semicolon": {
"options": [
"always"
]
},
"space-before-function-paren": {
"options": {
"anonymous": "never",
"asyncArrow": "always",
"constructor": "never",
"method": "never",
"named": "never"
}
},
"trailing-comma": {
"options": {
"esSpecCompliant": true,
"multiline": {
"objects": "always",
"arrays": "always",
"functions": "always",
"typeLiterals": "always"
},
"singleline": "never"
}
},
"triple-equals": {
"options": [
"allow-null-check"
]
},
"typedef": false,
"typedef-whitespace": {
"options": [
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
},
{
"call-signature": "onespace",
"index-signature": "onespace",
"parameter": "onespace",
"property-declaration": "onespace",
"variable-declaration": "onespace"
}
]
},
"typeof-compare": false,
"unified-signatures": true,
"use-isnan": true,
"whitespace": {
"options": [
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type",
"check-typecast"
]
}
},
"jsRules": {},
"rulesDirectory": [],
"no-var-requires": false,
"trailing-comma": [
true,
{
"multiline": {
"objects": "always",
"arrays": "always",
"functions": "always",
"typeLiterals": "ignore"
},
"esSpecCompliant": true
}
],
"no-unused-expression": [
true,
"allow-fast-null-checks"
]
}
\ No newline at end of file
const path = require("path");
module.exports = {
mode: "production",
entry: path.resolve(__dirname, "src/element.ts"),
module: {
rules: [
{
test: /\.ts$/,
use: "ts-loader",
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".js", ".ts"]
},
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist"),
libraryTarget: "umd", // 采用通用模块定义
libraryExport: "default", // 兼容 ES6(ES2015) 的模块系统、CommonJS 和 AMD 模块规范
globalObject: "this" // 兼容node和浏览器运行,避免window is not undefined情况
}
};
\ No newline at end of file
{
"plugins": [
["module-resolver", {
"root": ["./src"],
"alias": {}
}],
"@babel/transform-runtime"
],
"presets": ["@babel/preset-env"]
}
\ No newline at end of file
module.exports = {
'extends': [
'airbnb-base',
'plugin:promise/recommended'
],
'parserOptions': {
'ecmaVersion': 9,
'ecmaFeatures': {
'jsx': false
},
'sourceType': 'module'
},
'env': {
'es6': true,
'node': true,
'jest': true
},
'plugins': [
'import',
'node',
'promise'
],
'rules': {
'arrow-parens': 'off',
'comma-dangle': [
'error',
'only-multiline'
],
'complexity': ['error', 10],
'func-names': 'off',
'global-require': 'off',
'handle-callback-err': [
'error',
'^(err|error)$'
],
'import/no-unresolved': [
'error',
{
'caseSensitive': true,
'commonjs': true,
'ignore': ['^[^.]']
}
],
'import/prefer-default-export': 'off',
'linebreak-style': 'off',
'no-catch-shadow': 'error',
'no-continue': 'off',
'no-div-regex': 'warn',
'no-else-return': 'off',
'no-param-reassign': 'off',
'no-plusplus': 'off',
'no-shadow': 'off',
'no-multi-assign': 'off',
'no-underscore-dangle': 'off',
'node/no-deprecated-api': 'error',
'node/process-exit-as-throw': 'error',
'object-curly-spacing': [
'error',
'never'
],
'operator-linebreak': [
'error',
'after',
{
'overrides': {
':': 'before',
'?': 'before'
}
}
],
'prefer-arrow-callback': 'off',
'prefer-destructuring': 'off',
'prefer-template': 'off',
'quote-props': [
1,
'as-needed',
{
'unnecessary': true
}
],
'semi': [
'error',
'never'
],
'no-await-in-loop': 'off',
'no-restricted-syntax': 'off',
'promise/always-return': 'off',
},
'globals': {
'window': true,
'document': true,
'App': true,
'Page': true,
'Component': true,
'Behavior': true,
'wx': true,
'getCurrentPages': true,
}
}
MIT License
Copyright (c) 2019 wechat-miniprogram
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
# wxml-to-canvas
[![](https://img.shields.io/npm/v/wxml-to-canvas)](https://www.npmjs.com/package/wxml-to-canvas)
[![](https://img.shields.io/npm/l/wxml-to-canvas)](https://github.com/wechat-miniprogram/wxml-to-canvas)
小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景。[代码片段](https://developers.weixin.qq.com/s/r6UBlEm17pc6)
## 使用方法
#### Step1. npm 安装,参考 [小程序 npm 支持](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)
```
npm install --save wxml-to-canvas
```
#### Step2. JSON 组件声明
```
{
"usingComponents": {
"wxml-to-canvas": "wxml-to-canvas",
}
}
```
#### Step3. wxml 引入组件
```
<video class="video" src="{{src}}">
<wxml-to-canvas class="widget"></wxml-to-canvas>
</video>
<image src="{{src}}" style="width: {{width}}px; height: {{height}}px"></image>
```
##### 属性列表
| 属性 | 类型 | 默认值 | 必填 | 说明 |
| --------------- | ------- | ------- | ---- | ---------------------- |
| width | Number | 400 | 否 | 画布宽度 |
| height | Number | 300 | 否 | 画布高度 |
#### Step4. js 获取实例
```
const {wxml, style} = require('./demo.js')
Page({
data: {
src: ''
},
onLoad() {
this.widget = this.selectComponent('.widget')
},
renderToCanvas() {
const p1 = this.widget.renderToCanvas({ wxml, style })
p1.then((res) => {
this.container = res
this.extraImage()
})
},
extraImage() {
const p2 = this.widget.canvasToTempFilePath()
p2.then(res => {
this.setData({
src: res.tempFilePath,
width: this.container.layoutBox.width,
height: this.container.layoutBox.height
})
})
}
})
```
## wxml 模板
支持 `view``text``image` 三种标签,通过 class 匹配 style 对象中的样式。
```
<view class="container" >
<view class="item-box red">
</view>
<view class="item-box green" >
<text class="text">yeah!</text>
</view>
<view class="item-box blue">
<image class="img" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3582589792,4046843010&fm=26&gp=0.jpg"></image>
</view>
</view>
```
## 样式
对象属性值为对应 wxml 标签的 cass 驼峰形式。**需为每个元素指定 width 和 height 属性**,否则会导致布局错误。
存在多个 className 时,位置靠后的优先级更高,子元素会继承父级元素的可继承属性。
元素均为 flex 布局。left/top 等 仅在 absolute 定位下生效。
```
const style = {
container: {
width: 300,
height: 200,
flexDirection: 'row',
justifyContent: 'space-around',
backgroundColor: '#ccc',
alignItems: 'center',
},
itemBox: {
width: 80,
height: 60,
},
red: {
backgroundColor: '#ff0000'
},
green: {
backgroundColor: '#00ff00'
},
blue: {
backgroundColor: '#0000ff'
},
text: {
width: 80,
height: 60,
textAlign: 'center',
verticalAlign: 'middle',
}
}
```
## 接口
#### f1. `renderToCanvas({wxml, style}): Promise`
渲染到 canvas,传入 wxml 模板 和 style 对象,返回的容器对象包含布局和样式信息。
#### f2. `canvasToTempFilePath({fileType, quality}): Promise`
提取画布中容器所在区域内容生成相同大小的图片,返回临时文件地址。
`fileType` 支持 `jpg``png` 两种格式,quality 为图片的质量,目前仅对 jpg 有效。取值范围为 (0, 1],不在范围内时当作 1.0 处理。
## 支持的 css 属性
### 布局相关
| 属性名 | 支持的值或类型 | 默认值 |
| --------------------- | --------------------------------------------------------- | ---------- |
| width | number | 0 |
| height | number | 0 |
| position | relative, absolute | relative |
| left | number | 0 |
| top | number | 0 |
| right | number | 0 |
| bottom | number | 0 |
| margin | number | 0 |
| padding | number | 0 |
| borderWidth | number | 0 |
| borderRadius | number | 0 |
| flexDirection | column, row | row |
| flexShrink | number | 1 |
| flexGrow | number | |
| flexWrap | wrap, nowrap | nowrap |
| justifyContent | flex-start, center, flex-end, space-between, space-around | flex-start |
| alignItems, alignSelf | flex-start, center, flex-end, stretch | flex-start |
支持 marginLeft、paddingLeft 等
### 文字
| 属性名 | 支持的值或类型 | 默认值 |
| --------------- | ------------------- | ----------- |
| fontSize | number | 14 |
| lineHeight | number / string | '1.4em' |
| textAlign | left, center, right | left |
| verticalAlign | top, middle, bottom | top |
| color | string | #000000 |
| backgroundColor | string | transparent |
lineHeight 可取带 em 单位的字符串或数字类型。
### 变形
| 属性名 | 支持的值或类型 | 默认值 |
| ------ | -------------- | ------ |
| scale | number | 1 |
const gulp = require('gulp')
const clean = require('gulp-clean')
const config = require('./tools/config')
const BuildTask = require('./tools/build')
const id = require('./package.json').name || 'miniprogram-custom-component'
// 构建任务实例
// eslint-disable-next-line no-new
new BuildTask(id, config.entry)
// 清空生成目录和文件
gulp.task('clean', gulp.series(() => gulp.src(config.distPath, {read: false, allowEmpty: true}).pipe(clean()), done => {
if (config.isDev) {
return gulp.src(config.demoDist, {read: false, allowEmpty: true})
.pipe(clean())
}
return done()
}))
// 监听文件变化并进行开发模式构建
gulp.task('watch', gulp.series(`${id}-watch`))
// 开发模式构建
gulp.task('dev', gulp.series(`${id}-dev`))
// 生产模式构建
gulp.task('default', gulp.series(`${id}-default`))
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else {
var a = factory();
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
}
})(window, function() {
return /******/ (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 = 1);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
const hex = (color) => {
let result = null
if (/^#/.test(color) && (color.length === 7 || color.length === 9)) {
return color
// eslint-disable-next-line no-cond-assign
} else if ((result = /^(rgb|rgba)\((.+)\)/.exec(color)) !== null) {
return '#' + result[2].split(',').map((part, index) => {
part = part.trim()
part = index === 3 ? Math.floor(parseFloat(part) * 255) : parseInt(part, 10)
part = part.toString(16)
if (part.length === 1) {
part = '0' + part
}
return part
}).join('')
} else {
return '#00000000'
}
}
const splitLineToCamelCase = (str) => str.split('-').map((part, index) => {
if (index === 0) {
return part
}
return part[0].toUpperCase() + part.slice(1)
}).join('')
const compareVersion = (v1, v2) => {
v1 = v1.split('.')
v2 = v2.split('.')
const len = Math.max(v1.length, v2.length)
while (v1.length < len) {
v1.push('0')
}
while (v2.length < len) {
v2.push('0')
}
for (let i = 0; i < len; i++) {
const num1 = parseInt(v1[i], 10)
const num2 = parseInt(v2[i], 10)
if (num1 > num2) {
return 1
} else if (num1 < num2) {
return -1
}
}
return 0
}
module.exports = {
hex,
splitLineToCamelCase,
compareVersion
}
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
const xmlParse = __webpack_require__(2)
const {Widget} = __webpack_require__(3)
const {Draw} = __webpack_require__(5)
const {compareVersion} = __webpack_require__(0)
const canvasId = 'weui-canvas'
Component({
properties: {
width: {
type: Number,
value: 400
},
height: {
type: Number,
value: 300
}
},
data: {
use2dCanvas: false, // 2.9.2 后可用canvas 2d 接口
},
lifetimes: {
attached() {
const {SDKVersion, pixelRatio: dpr} = wx.getSystemInfoSync()
const use2dCanvas = compareVersion(SDKVersion, '2.9.2') >= 0
this.dpr = dpr
this.setData({use2dCanvas}, () => {
if (use2dCanvas) {
const query = this.createSelectorQuery()
query.select(`#${canvasId}`)
.fields({node: true, size: true})
.exec(res => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
this.ctx = ctx
this.canvas = canvas
})
} else {
this.ctx = wx.createCanvasContext(canvasId, this)
}
})
}
},
methods: {
async renderToCanvas(args) {
const {wxml, style} = args
const ctx = this.ctx
const canvas = this.canvas
const use2dCanvas = this.data.use2dCanvas
if (use2dCanvas && !canvas) {
return Promise.reject(new Error('renderToCanvas: fail canvas has not been created'))
}
ctx.clearRect(0, 0, this.data.width, this.data.height)
const {root: xom} = xmlParse(wxml)
const widget = new Widget(xom, style)
const container = widget.init()
this.boundary = {
top: container.layoutBox.top,
left: container.layoutBox.left,
width: container.computedStyle.width,
height: container.computedStyle.height,
}
const draw = new Draw(ctx, canvas, use2dCanvas)
await draw.drawNode(container)
if (!use2dCanvas) {
await this.canvasDraw(ctx)
}
return Promise.resolve(container)
},
canvasDraw(ctx, reserve) {
return new Promise(resolve => {
ctx.draw(reserve, () => {
resolve()
})
})
},
canvasToTempFilePath(args = {}) {
const use2dCanvas = this.data.use2dCanvas
return new Promise((resolve, reject) => {
const {
top, left, width, height
} = this.boundary
const copyArgs = {
x: left,
y: top,
width,
height,
destWidth: width * this.dpr,
destHeight: height * this.dpr,
canvasId,
fileType: args.fileType || 'png',
quality: args.quality || 1,
success: resolve,
fail: reject
}
if (use2dCanvas) {
delete copyArgs.canvasId
copyArgs.canvas = this.canvas
}
wx.canvasToTempFilePath(copyArgs, this)
})
}
}
})
/***/ }),
/* 2 */
/***/ (function(module, exports) {
/**
* Module dependencies.
*/
/**
* Expose `parse`.
*/
/**
* Parse the given string of `xml`.
*
* @param {String} xml
* @return {Object}
* @api public
*/
function parse(xml) {
xml = xml.trim()
// strip comments
xml = xml.replace(/<!--[\s\S]*?-->/g, '')
return document()
/**
* XML document.
*/
function document() {
return {
declaration: declaration(),
root: tag()
}
}
/**
* Declaration.
*/
function declaration() {
const m = match(/^<\?xml\s*/)
if (!m) return
// tag
const node = {
attributes: {}
}
// attributes
while (!(eos() || is('?>'))) {
const attr = attribute()
if (!attr) return node
node.attributes[attr.name] = attr.value
}
match(/\?>\s*/)
return node
}
/**
* Tag.
*/
function tag() {
const m = match(/^<([\w-:.]+)\s*/)
if (!m) return
// name
const node = {
name: m[1],
attributes: {},
children: []
}
// attributes
while (!(eos() || is('>') || is('?>') || is('/>'))) {
const attr = attribute()
if (!attr) return node
node.attributes[attr.name] = attr.value
}
// self closing tag
if (match(/^\s*\/>\s*/)) {
return node
}
match(/\??>\s*/)
// content
node.content = content()
// children
let child
while (child = tag()) {
node.children.push(child)
}
// closing
match(/^<\/[\w-:.]+>\s*/)
return node
}
/**
* Text content.
*/
function content() {
const m = match(/^([^<]*)/)
if (m) return m[1]
return ''
}
/**
* Attribute.
*/
function attribute() {
const m = match(/([\w:-]+)\s*=\s*("[^"]*"|'[^']*'|\w+)\s*/)
if (!m) return
return {name: m[1], value: strip(m[2])}
}
/**
* Strip quotes from `val`.
*/
function strip(val) {
return val.replace(/^['"]|['"]$/g, '')
}
/**
* Match `re` and advance the string.
*/
function match(re) {
const m = xml.match(re)
if (!m) return
xml = xml.slice(m[0].length)
return m
}
/**
* End-of-source.
*/
function eos() {
return xml.length == 0
}
/**
* Check for `prefix`.
*/
function is(prefix) {
return xml.indexOf(prefix) == 0
}
}
module.exports = parse
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
const Block = __webpack_require__(4)
const {splitLineToCamelCase} = __webpack_require__(0)
class Element extends Block {
constructor(prop) {
super(prop.style)
this.name = prop.name
this.attributes = prop.attributes
}
}
class Widget {
constructor(xom, style) {
this.xom = xom
this.style = style
this.inheritProps = ['fontSize', 'lineHeight', 'textAlign', 'verticalAlign', 'color']
}
init() {
this.container = this.create(this.xom)
this.container.layout()
this.inheritStyle(this.container)
return this.container
}
// 继承父节点的样式
inheritStyle(node) {
const parent = node.parent || null
const children = node.children || {}
const computedStyle = node.computedStyle
if (parent) {
this.inheritProps.forEach(prop => {
computedStyle[prop] = computedStyle[prop] || parent.computedStyle[prop]
})
}
Object.values(children).forEach(child => {
this.inheritStyle(child)
})
}
create(node) {
let classNames = (node.attributes.class || '').split(' ')
classNames = classNames.map(item => splitLineToCamelCase(item.trim()))
const style = {}
classNames.forEach(item => {
Object.assign(style, this.style[item] || {})
})
const args = {name: node.name, style}
const attrs = Object.keys(node.attributes)
const attributes = {}
for (const attr of attrs) {
const value = node.attributes[attr]
const CamelAttr = splitLineToCamelCase(attr)
if (value === '' || value === 'true') {
attributes[CamelAttr] = true
} else if (value === 'false') {
attributes[CamelAttr] = false
} else {
attributes[CamelAttr] = value
}
}
attributes.text = node.content
args.attributes = attributes
const element = new Element(args)
node.children.forEach(childNode => {
const childElement = this.create(childNode)
element.add(childElement)
})
return element
}
}
module.exports = {Widget}
/***/ }),
/* 4 */
/***/ (function(module, exports) {
module.exports = require("widget-ui");
/***/ }),
/* 5 */
/***/ (function(module, exports) {
class Draw {
constructor(context, canvas, use2dCanvas = false) {
this.ctx = context
this.canvas = canvas || null
this.use2dCanvas = use2dCanvas
}
roundRect(x, y, w, h, r, fill = true, stroke = false) {
if (r < 0) return
const ctx = this.ctx
ctx.beginPath()
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 3 / 2)
ctx.arc(x + w - r, y + r, r, Math.PI * 3 / 2, 0)
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI / 2)
ctx.arc(x + r, y + h - r, r, Math.PI / 2, Math.PI)
ctx.lineTo(x, y + r)
if (stroke) ctx.stroke()
if (fill) ctx.fill()
}
drawView(box, style) {
const ctx = this.ctx
const {
left: x, top: y, width: w, height: h
} = box
const {
borderRadius = 0,
borderWidth = 0,
borderColor,
color = '#000',
backgroundColor = 'transparent',
} = style
ctx.save()
// 外环
if (borderWidth > 0) {
ctx.fillStyle = borderColor || color
this.roundRect(x, y, w, h, borderRadius)
}
// 内环
ctx.fillStyle = backgroundColor
const innerWidth = w - 2 * borderWidth
const innerHeight = h - 2 * borderWidth
const innerRadius = borderRadius - borderWidth >= 0 ? borderRadius - borderWidth : 0
this.roundRect(x + borderWidth, y + borderWidth, innerWidth, innerHeight, innerRadius)
ctx.restore()
}
async drawImage(img, box, style) {
await new Promise((resolve, reject) => {
const ctx = this.ctx
const canvas = this.canvas
const {
borderRadius = 0
} = style
const {
left: x, top: y, width: w, height: h
} = box
ctx.save()
this.roundRect(x, y, w, h, borderRadius, false, false)
ctx.clip()
const _drawImage = (img) => {
if (this.use2dCanvas) {
const Image = canvas.createImage()
Image.onload = () => {
ctx.drawImage(Image, x, y, w, h)
ctx.restore()
resolve()
}
Image.onerror = () => { reject(new Error(`createImage fail: ${img}`)) }
Image.src = img
} else {
ctx.drawImage(img, x, y, w, h)
ctx.restore()
resolve()
}
}
const isTempFile = /^wxfile:\/\//.test(img)
const isNetworkFile = /^https?:\/\//.test(img)
if (isTempFile) {
_drawImage(img)
} else if (isNetworkFile) {
wx.downloadFile({
url: img,
success(res) {
if (res.statusCode === 200) {
_drawImage(res.tempFilePath)
} else {
reject(new Error(`downloadFile:fail ${img}`))
}
},
fail() {
reject(new Error(`downloadFile:fail ${img}`))
}
})
} else {
reject(new Error(`image format error: ${img}`))
}
})
}
// eslint-disable-next-line complexity
drawText(text, box, style) {
const ctx = this.ctx
let {
left: x, top: y, width: w, height: h
} = box
let {
color = '#000',
lineHeight = '1.4em',
fontSize = 14,
textAlign = 'left',
verticalAlign = 'top',
backgroundColor = 'transparent'
} = style
if (typeof lineHeight === 'string') { // 2em
lineHeight = Math.ceil(parseFloat(lineHeight.replace('em')) * fontSize)
}
if (!text || (lineHeight > h)) return
ctx.save()
ctx.textBaseline = 'top'
ctx.font = `${fontSize}px sans-serif`
ctx.textAlign = textAlign
// 背景色
ctx.fillStyle = backgroundColor
this.roundRect(x, y, w, h, 0)
// 文字颜色
ctx.fillStyle = color
// 水平布局
switch (textAlign) {
case 'left':
break
case 'center':
x += 0.5 * w
break
case 'right':
x += w
break
default: break
}
const textWidth = ctx.measureText(text).width
const actualHeight = Math.ceil(textWidth / w) * lineHeight
let paddingTop = Math.ceil((h - actualHeight) / 2)
if (paddingTop < 0) paddingTop = 0
// 垂直布局
switch (verticalAlign) {
case 'top':
break
case 'middle':
y += paddingTop
break
case 'bottom':
y += 2 * paddingTop
break
default: break
}
const inlinePaddingTop = Math.ceil((lineHeight - fontSize) / 2)
// 不超过一行
if (textWidth <= w) {
ctx.fillText(text, x, y + inlinePaddingTop)
return
}
// 多行文本
const chars = text.split('')
const _y = y
// 逐行绘制
let line = ''
for (const ch of chars) {
const testLine = line + ch
const testWidth = ctx.measureText(testLine).width
if (testWidth > w) {
ctx.fillText(line, x, y + inlinePaddingTop)
y += lineHeight
line = ch
if ((y + lineHeight) > (_y + h)) break
} else {
line = testLine
}
}
// 避免溢出
if ((y + lineHeight) <= (_y + h)) {
ctx.fillText(line, x, y + inlinePaddingTop)
}
ctx.restore()
}
async drawNode(element) {
const {layoutBox, computedStyle, name} = element
const {src, text} = element.attributes
if (name === 'view') {
this.drawView(layoutBox, computedStyle)
} else if (name === 'image') {
await this.drawImage(src, layoutBox, computedStyle)
} else if (name === 'text') {
this.drawText(text, layoutBox, computedStyle)
}
const childs = Object.values(element.children)
for (const child of childs) {
await this.drawNode(child)
}
}
}
module.exports = {
Draw
}
/***/ })
/******/ ]);
});
\ No newline at end of file
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<canvas wx:if="{{use2dCanvas}}" id="weui-canvas" type="2d" style="width: {{width}}px; height: {{height}}px;"></canvas>
<canvas wx:else canvas-id="weui-canvas" style="width: {{width}}px; height: {{height}}px;"></canvas>
\ No newline at end of file
const hex = (color) => {
let result = null
if (/^#/.test(color) && (color.length === 7 || color.length === 9)) {
return color
// eslint-disable-next-line no-cond-assign
} else if ((result = /^(rgb|rgba)\((.+)\)/.exec(color)) !== null) {
return '#' + result[2].split(',').map((part, index) => {
part = part.trim()
part = index === 3 ? Math.floor(parseFloat(part) * 255) : parseInt(part, 10)
part = part.toString(16)
if (part.length === 1) {
part = '0' + part
}
return part
}).join('')
} else {
return '#00000000'
}
}
const splitLineToCamelCase = (str) => str.split('-').map((part, index) => {
if (index === 0) {
return part
}
return part[0].toUpperCase() + part.slice(1)
}).join('')
const compareVersion = (v1, v2) => {
v1 = v1.split('.')
v2 = v2.split('.')
const len = Math.max(v1.length, v2.length)
while (v1.length < len) {
v1.push('0')
}
while (v2.length < len) {
v2.push('0')
}
for (let i = 0; i < len; i++) {
const num1 = parseInt(v1[i], 10)
const num2 = parseInt(v2[i], 10)
if (num1 > num2) {
return 1
} else if (num1 < num2) {
return -1
}
}
return 0
}
module.exports = {
hex,
splitLineToCamelCase,
compareVersion
}
{
"_from": "wxml-to-canvas",
"_id": "wxml-to-canvas@1.1.1",
"_inBundle": false,
"_integrity": "sha512-3mDjHzujY/UgdCOXij/MnmwJYerVjwkyQHMBFBE8zh89DK7h7UTzoydWFqEBjIC0rfZM+AXl5kDh9hUcsNpSmg==",
"_location": "/wxml-to-canvas",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "wxml-to-canvas",
"name": "wxml-to-canvas",
"escapedName": "wxml-to-canvas",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/wxml-to-canvas/-/wxml-to-canvas-1.1.1.tgz",
"_shasum": "64771473fb1e251bdad94f8c6ffa7dd64290e7ca",
"_spec": "wxml-to-canvas",
"_where": "/Users/wanglumin/WeChatProjects/voting",
"author": {
"name": "sanfordsun"
},
"bundleDependencies": false,
"dependencies": {
"widget-ui": "^1.0.2"
},
"deprecated": false,
"description": "[![](https://img.shields.io/npm/v/wxml-to-canvas)](https://www.npmjs.com/package/wxml-to-canvas) [![](https://img.shields.io/npm/l/wxml-to-canvas)](https://github.com/wechat-miniprogram/wxml-to-canvas)",
"devDependencies": {
"colors": "^1.3.1",
"eslint": "^5.14.1",
"eslint-config-airbnb-base": "13.1.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^3.8.0",
"gulp": "^4.0.0",
"gulp-clean": "^0.4.0",
"gulp-if": "^2.0.2",
"gulp-install": "^1.1.0",
"gulp-less": "^4.0.1",
"gulp-rename": "^1.4.0",
"gulp-sourcemaps": "^2.6.5",
"jest": "^23.5.0",
"miniprogram-simulate": "^1.0.0",
"through2": "^2.0.3",
"vinyl": "^2.2.0",
"webpack": "^4.29.5",
"webpack-cli": "^3.3.10",
"webpack-node-externals": "^1.7.2"
},
"jest": {
"testEnvironment": "jsdom",
"testURL": "https://jest.test",
"collectCoverageFrom": [
"src/**/*.js"
],
"moduleDirectories": [
"node_modules",
"src"
]
},
"license": "MIT",
"main": "miniprogram_dist/index.js",
"miniprogram": "miniprogram_dist",
"name": "wxml-to-canvas",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"build": "gulp",
"clean": "gulp clean",
"clean-dev": "gulp clean --develop",
"coverage": "jest ./test/* --coverage --bail",
"dev": "gulp dev --develop",
"dist": "npm run build",
"lint": "eslint \"src/**/*.js\" --fix",
"lint-tools": "eslint \"tools/**/*.js\" --rule \"import/no-extraneous-dependencies: false\" --fix",
"test": "jest --bail",
"test-debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --bail",
"watch": "gulp watch --develop --watch"
},
"version": "1.1.1"
}
class Draw {
constructor(context, canvas, use2dCanvas = false) {
this.ctx = context
this.canvas = canvas || null
this.use2dCanvas = use2dCanvas
}
roundRect(x, y, w, h, r, fill = true, stroke = false) {
if (r < 0) return
const ctx = this.ctx
ctx.beginPath()
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 3 / 2)
ctx.arc(x + w - r, y + r, r, Math.PI * 3 / 2, 0)
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI / 2)
ctx.arc(x + r, y + h - r, r, Math.PI / 2, Math.PI)
ctx.lineTo(x, y + r)
if (stroke) ctx.stroke()
if (fill) ctx.fill()
}
drawView(box, style) {
const ctx = this.ctx
const {
left: x, top: y, width: w, height: h
} = box
const {
borderRadius = 0,
borderWidth = 0,
borderColor,
color = '#000',
backgroundColor = 'transparent',
} = style
ctx.save()
// 外环
if (borderWidth > 0) {
ctx.fillStyle = borderColor || color
this.roundRect(x, y, w, h, borderRadius)
}
// 内环
ctx.fillStyle = backgroundColor
const innerWidth = w - 2 * borderWidth
const innerHeight = h - 2 * borderWidth
const innerRadius = borderRadius - borderWidth >= 0 ? borderRadius - borderWidth : 0
this.roundRect(x + borderWidth, y + borderWidth, innerWidth, innerHeight, innerRadius)
ctx.restore()
}
async drawImage(img, box, style) {
await new Promise((resolve, reject) => {
const ctx = this.ctx
const canvas = this.canvas
const {
borderRadius = 0
} = style
const {
left: x, top: y, width: w, height: h
} = box
ctx.save()
this.roundRect(x, y, w, h, borderRadius, false, false)
ctx.clip()
const _drawImage = (img) => {
if (this.use2dCanvas) {
const Image = canvas.createImage()
Image.onload = () => {
ctx.drawImage(Image, x, y, w, h)
ctx.restore()
resolve()
}
Image.onerror = () => { reject(new Error(`createImage fail: ${img}`)) }
Image.src = img
} else {
ctx.drawImage(img, x, y, w, h)
ctx.restore()
resolve()
}
}
const isTempFile = /^wxfile:\/\//.test(img)
const isNetworkFile = /^https?:\/\//.test(img)
if (isTempFile) {
_drawImage(img)
} else if (isNetworkFile) {
wx.downloadFile({
url: img,
success(res) {
if (res.statusCode === 200) {
_drawImage(res.tempFilePath)
} else {
reject(new Error(`downloadFile:fail ${img}`))
}
},
fail() {
reject(new Error(`downloadFile:fail ${img}`))
}
})
} else {
reject(new Error(`image format error: ${img}`))
}
})
}
// eslint-disable-next-line complexity
drawText(text, box, style) {
const ctx = this.ctx
let {
left: x, top: y, width: w, height: h
} = box
let {
color = '#000',
lineHeight = '1.4em',
fontSize = 14,
textAlign = 'left',
verticalAlign = 'top',
backgroundColor = 'transparent'
} = style
if (typeof lineHeight === 'string') { // 2em
lineHeight = Math.ceil(parseFloat(lineHeight.replace('em')) * fontSize)
}
if (!text || (lineHeight > h)) return
ctx.save()
ctx.textBaseline = 'top'
ctx.font = `${fontSize}px sans-serif`
ctx.textAlign = textAlign
// 背景色
ctx.fillStyle = backgroundColor
this.roundRect(x, y, w, h, 0)
// 文字颜色
ctx.fillStyle = color
// 水平布局
switch (textAlign) {
case 'left':
break
case 'center':
x += 0.5 * w
break
case 'right':
x += w
break
default: break
}
const textWidth = ctx.measureText(text).width
const actualHeight = Math.ceil(textWidth / w) * lineHeight
let paddingTop = Math.ceil((h - actualHeight) / 2)
if (paddingTop < 0) paddingTop = 0
// 垂直布局
switch (verticalAlign) {
case 'top':
break
case 'middle':
y += paddingTop
break
case 'bottom':
y += 2 * paddingTop
break
default: break
}
const inlinePaddingTop = Math.ceil((lineHeight - fontSize) / 2)
// 不超过一行
if (textWidth <= w) {
ctx.fillText(text, x, y + inlinePaddingTop)
return
}
// 多行文本
const chars = text.split('')
const _y = y
// 逐行绘制
let line = ''
for (const ch of chars) {
const testLine = line + ch
const testWidth = ctx.measureText(testLine).width
if (testWidth > w) {
ctx.fillText(line, x, y + inlinePaddingTop)
y += lineHeight
line = ch
if ((y + lineHeight) > (_y + h)) break
} else {
line = testLine
}
}
// 避免溢出
if ((y + lineHeight) <= (_y + h)) {
ctx.fillText(line, x, y + inlinePaddingTop)
}
ctx.restore()
}
async drawNode(element) {
const {layoutBox, computedStyle, name} = element
const {src, text} = element.attributes
if (name === 'view') {
this.drawView(layoutBox, computedStyle)
} else if (name === 'image') {
await this.drawImage(src, layoutBox, computedStyle)
} else if (name === 'text') {
this.drawText(text, layoutBox, computedStyle)
}
const childs = Object.values(element.children)
for (const child of childs) {
await this.drawNode(child)
}
}
}
module.exports = {
Draw
}
const xmlParse = require('./xml-parser')
const {Widget} = require('./widget')
const {Draw} = require('./draw')
const {compareVersion} = require('./utils')
const canvasId = 'weui-canvas'
Component({
properties: {
width: {
type: Number,
value: 400
},
height: {
type: Number,
value: 300
}
},
data: {
use2dCanvas: false, // 2.9.2 后可用canvas 2d 接口
},
lifetimes: {
attached() {
const {SDKVersion, pixelRatio: dpr} = wx.getSystemInfoSync()
const use2dCanvas = compareVersion(SDKVersion, '2.9.2') >= 0
this.dpr = dpr
this.setData({use2dCanvas}, () => {
if (use2dCanvas) {
const query = this.createSelectorQuery()
query.select(`#${canvasId}`)
.fields({node: true, size: true})
.exec(res => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
this.ctx = ctx
this.canvas = canvas
})
} else {
this.ctx = wx.createCanvasContext(canvasId, this)
}
})
}
},
methods: {
async renderToCanvas(args) {
const {wxml, style} = args
const ctx = this.ctx
const canvas = this.canvas
const use2dCanvas = this.data.use2dCanvas
if (use2dCanvas && !canvas) {
return Promise.reject(new Error('renderToCanvas: fail canvas has not been created'))
}
ctx.clearRect(0, 0, this.data.width, this.data.height)
const {root: xom} = xmlParse(wxml)
const widget = new Widget(xom, style)
const container = widget.init()
this.boundary = {
top: container.layoutBox.top,
left: container.layoutBox.left,
width: container.computedStyle.width,
height: container.computedStyle.height,
}
const draw = new Draw(ctx, canvas, use2dCanvas)
await draw.drawNode(container)
if (!use2dCanvas) {
await this.canvasDraw(ctx)
}
return Promise.resolve(container)
},
canvasDraw(ctx, reserve) {
return new Promise(resolve => {
ctx.draw(reserve, () => {
resolve()
})
})
},
canvasToTempFilePath(args = {}) {
const use2dCanvas = this.data.use2dCanvas
return new Promise((resolve, reject) => {
const {
top, left, width, height
} = this.boundary
const copyArgs = {
x: left,
y: top,
width,
height,
destWidth: width * this.dpr,
destHeight: height * this.dpr,
canvasId,
fileType: args.fileType || 'png',
quality: args.quality || 1,
success: resolve,
fail: reject
}
if (use2dCanvas) {
delete copyArgs.canvasId
copyArgs.canvas = this.canvas
}
wx.canvasToTempFilePath(copyArgs, this)
})
}
}
})
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<canvas wx:if="{{use2dCanvas}}" id="weui-canvas" type="2d" style="width: {{width}}px; height: {{height}}px;"></canvas>
<canvas wx:else canvas-id="weui-canvas" style="width: {{width}}px; height: {{height}}px;"></canvas>
\ No newline at end of file
此差异已折叠。
此差异已折叠。
此差异已折叠。
{
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"eventemitter3": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
},
"widget-ui": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/widget-ui/-/widget-ui-1.0.2.tgz",
"integrity": "sha512-gDXosr5mflJdMA1weU1A47aTsTFfMJhfA4EKgO5XFebY3eVklf80KD4GODfrjo8J2WQ+9YjL1Rd9UUmKIzhShw==",
"requires": {
"eventemitter3": "^4.0.0"
}
},
"wxml-to-canvas": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/wxml-to-canvas/-/wxml-to-canvas-1.1.1.tgz",
"integrity": "sha512-3mDjHzujY/UgdCOXij/MnmwJYerVjwkyQHMBFBE8zh89DK7h7UTzoydWFqEBjIC0rfZM+AXl5kDh9hUcsNpSmg==",
"requires": {
"widget-ui": "^1.0.2"
}
}
}
}
......@@ -29,5 +29,5 @@
]
}
},
"libVersion": "2.6.6"
"libVersion": "2.17.0"
}
\ No newline at end of file