砖块0的情况

.gitignore

+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+/.rpt2_cache/

package.json

+{
+	"name": "scilla-components",
+	"version": "1.0.0",
+	"main": "./dist/bundle.js",
+	"types": "./types/index.d.ts",
+	"license": "MIT",
+	"scripts": {
+		"build": "rollup -c"
+	},
+	"dependencies": {
+		"tslib": "^1.9.3"
+	},
+	"devDependencies": {
+		"rollup": "^0.66.6",
+		"rollup-plugin-commonjs": "^9.2.0",
+		"rollup-plugin-node-resolve": "^3.4.0",
+		"rollup-plugin-typescript2": "^0.18.0",
+		"rollup-plugin-uglify": "^6.0.0",
+		"tslib": "^1.9.3",
+		"typescript": "^3.1.6"
+	}
+}

rollup.config.js

+/**
+ * Created by rockyl on 2018/11/16.
+ */
+
+const resolve = require('rollup-plugin-node-resolve');
+const commonjs = require('rollup-plugin-commonjs');
+const typescript = require('rollup-plugin-typescript2');
+const {uglify} = require('rollup-plugin-uglify');
+
+export default {
+	input: 'src/index.ts',
+	output: {
+		file: 'dist/bundle.js',
+		format: 'umd',
+		name: 'scilla',
+		//sourcemap: true,
+	},
+	plugins: [
+		resolve({
+			browser: true,
+		}),
+		typescript({
+			typescript: require('typescript'),
+			tslib: require('tslib'),
+			useTsconfigDeclarationDir: true,
+		}),
+		commonjs(),
+		uglify({}),
+	]
+};

scilla-components.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

src/animation/BounceZoom.ts

+/**
+ * Created by rockyl on 2019-01-04.
+ *
+ * 弹动缩放
+ */
+
+import {ScillaComponent, createTween, Tween, Vector2D, createVector2D} from "scilla";
+
+const originScale: Vector2D = createVector2D(1, 1);
+
+export default class BounceZoom extends ScillaComponent {
+	targetScale: Vector2D = createVector2D(1.5, 1.5);
+	duration:number = 100;
+
+	private _tween: Tween;
+
+	onAwake() {
+		super.onAwake();
+
+		this._tween = createTween(this.transform, false,
+			{clazz: Vector2D, fields: ['x', 'y'], autoPlay: false}
+			)
+			.to({scale: this.targetScale.clone()}, this.duration * 0.5)
+			.to({scale: originScale.clone()}, this.duration * 0.5)
+	}
+
+	play(){
+		this._tween.play(true);
+	}
+}

src/animation/Fade.ts

+/**
+ * Created by rockyl on 2019-01-04.
+ *
+ * 渐变组件
+ */
+
+import {math, ScillaComponent} from "scilla";
+
+export default class Fade extends ScillaComponent {
+	fromAlpha: number = 0;
+	toAlpha: number = 1;
+	duration: number = 1000;
+
+	private _startTime: number;
+	private _playing: boolean;
+
+	onUpdate(t) {
+		super.onUpdate(t);
+
+		if(this._playing){
+			if(!this._startTime){
+				this._startTime = t;
+			}
+
+			let ratio = (t - this._startTime) / this.duration;
+
+			this.transform.alpha = math.lerp(this.fromAlpha, this.toAlpha, ratio);
+
+			if(ratio >= 1){
+				this.stop();
+			}
+		}
+	}
+
+	play(){
+		this._startTime = 0;
+		this._playing = true;
+	}
+
+	stop(){
+		this._playing = false;
+	}
+}

src/animation/Rotation.ts

+/**
+ * Created by rockyl on 2018/11/5.
+ *
+ * 自转组件
+ */
+
+import {createTween, ScillaComponent, ScillaEvent, Tween} from "scilla";
+
+export default class Rotation extends ScillaComponent {
+	duration: number = 10000;
+	autoPlay: boolean = false;
+	loop: number = -1;
+	onComplete: ScillaEvent = new ScillaEvent();
+	
+	private _tween: Tween;
+
+	onCreate() {
+		super.onCreate();
+
+	}
+
+	onAwake() {
+		super.onAwake();
+
+		if(!this._tween){
+			this._tween = createTween(this.transform, false, {autoPlay: this.autoPlay, loop: this.loop, initFields: ['_rotation']})
+				.to({rotation: 360}, this.duration)
+				.call(()=>{
+					this.onComplete.invoke();
+				});
+		}
+	}
+
+	play(){
+		this._tween.play(true);
+	}
+
+	stop(){
+		this._tween.stop();
+	}
+}

src/animation/RoundLoop.ts

+/**
+ * Created by rockyl on 2018/11/5.
+ */
+import {ScillaComponent} from "scilla";
+
+export default class RoundLoop extends ScillaComponent {
+	transform;
+
+	duration: number = 10000;
+
+	onUpdate(t) {
+		super.onUpdate(t);
+
+		const {position} = this.transform;
+		position.setXY(
+			Math.cos(t * 0.001) * 100,
+			Math.sin(t * 0.001) * 100,
+		)
+	}
+}

src/animation/Swing.ts

+/**
+ * Created by rockyl on 2018/11/5.
+ *
+ * 摇摆组件
+ */
+
+import {ScillaComponent} from "scilla";
+
+export default class Swing extends ScillaComponent {
+	duration: number = 10000;
+
+	onUpdate(t) {
+		super.onUpdate(t);
+
+		this.transform.rotation = Math.sin(t / 100) * 5;
+	}
+}

src/animation/TouchZoom.ts

+/**
+ * Created by rockyl on 2018-11-27.
+ *
+ * 触摸缩放交互效果组件
+ */
+
+import {createTween, createVector2D, ease, Ease, Tween, Vector2D,} from "scilla";
+import {InteractComponent} from "../base";
+
+export default class TouchZoom extends InteractComponent {
+	scaleOffset: Vector2D = createVector2D(0.1, 0.1);
+	duration: number = 200;
+	easeName: Ease = Ease.backOut;
+
+	private _zoomIn: Tween;
+	private _zoomOut: Tween;
+	private _touchBegin: boolean;
+
+	onAwake() {
+		super.onAwake();
+
+		if (!this._zoomIn) {
+			const {scaleOffset, duration, transform} = this;
+
+			const easeFunc = ease[this.easeName];
+
+			const scaleFrom = transform.scale.clone();
+			const scaleTo = transform.scale.clone().add(scaleOffset);
+
+			this._zoomIn = createTween(transform, false, {autoPlay: false, clazz: Vector2D, fields: ['x', 'y']})
+				.to({scale: scaleTo}, duration, easeFunc);
+
+			this._zoomOut = createTween(transform, false, {autoPlay: false, clazz: Vector2D, fields: ['x', 'y']})
+				.to({scale: scaleFrom}, duration, easeFunc);
+		}
+	}
+
+	onTouchBegin(e) {
+		super.onTouchOver(e);
+
+		if (this.interactable) {
+			this._touchBegin = true;
+			this._zoomIn.play(true);
+		}
+	}
+
+	onGlobalTouchEnd(e) {
+		super.onGlobalTouchEnd(e);
+
+		if (this._touchBegin) {
+			this._touchBegin = false;
+			this._zoomOut.play(true);
+		}
+
+		return false;
+	}
+}

src/animation/Wave.ts

+/**
+ * Created by rockyl on 2018/11/5.
+ *
+ * 波动组件
+ */
+
+import {ScillaComponent, raw} from "scilla";
+
+const PI2 = Math.PI * 2;
+
+export enum WaveMethod {
+	/**
+	 * 公转
+	 */
+	round = 'round',
+	/**
+	 * 自转
+	 */
+	rotate = 'rotate',
+	/**
+	 * 缩放
+	 */
+	zoom = 'zoom',
+	/**
+	 * 透明渐变
+	 */
+	fade = 'fade',
+	/**
+	 * 横向波动
+	 */
+	cosWave = 'cosWave',
+	/**
+	 * 纵向波动
+	 */
+	sinWave = 'sinWave',
+	/**
+	 * 抖动
+	 */
+	shake = 'shake',
+	/**
+	 * 呼吸
+	 */
+	breath = 'breath',
+}
+
+export default class Wave extends ScillaComponent {
+	duration: number = 1000;
+	waveMethod: WaveMethod;
+	waveParams: raw;
+	loop: number = -1;
+	autoPlay: boolean = true;
+
+	private _playing;
+	private _waveMethod;
+	private _startTime;
+	private _oldProps: any = {};
+
+	onAwake() {
+		super.onAwake();
+
+		this._waveMethod = waveLibs[this.waveMethod];
+		this._startTime = 0;
+
+		const {transform: {position}} = this;
+		this._oldProps.x = position.x;
+		this._oldProps.y = position.y;
+
+		if (this.autoPlay) {
+			this.play();
+		}
+	}
+
+	onUpdate(t) {
+		super.onUpdate(t);
+
+		if (this._playing) {
+			if (!this._startTime) {
+				this._startTime = t;
+			}
+
+			const {duration, waveParams, _waveMethod, transform, transform: {position, scale}, _oldProps} = this;
+
+			let loop = (t - this._startTime) % duration;
+			let r = loop / duration * PI2;
+
+			let params = waveParams || [];
+			let props = _waveMethod(...params, r);
+
+			if (props.hasOwnProperty('x')) {
+				position.x = (props.x || 0) + _oldProps.x;
+			}
+			if (props.hasOwnProperty('y')) {
+				position.y = (props.y || 0) + _oldProps.y;
+			}
+			if (props.hasOwnProperty('sx')) {
+				scale.x = props.sx;
+			}
+			if (props.hasOwnProperty('sy')) {
+				scale.y = props.sy;
+			}
+			if (props.hasOwnProperty('r')) {
+				transform.rotation = props.r;
+			}
+		}
+	}
+
+	play() {
+		this._playing = true;
+		this._startTime = 0;
+	}
+
+	stop() {
+		this._playing = false;
+	}
+}
+
+const {cos, sin, PI} = Math;
+
+const waveLibs = {
+	round: function (h: number, t: number): any {
+		return {x: cos(t) * h, y: sin(t) * h};
+	},
+
+	cosWave: function (h: number, t: number): any {
+		return {x: cos(t) * h, y: 0};
+	},
+
+	sinWave: function (h: number, t: number): any {
+		h = h || 1;
+		return {x: 0, y: sin(t) * h};
+	},
+
+	rotate: function (t: number): any {
+		return {r: 360 * t / PI / 2};
+	},
+
+	shake: function (angle: number, count: number, t: number): any {
+		return {r: sin(t * count) * angle};
+	},
+
+	breath: function (scale: number = 0.1, t: number): any {
+		return {sx: sin(t) * scale + 1, sy: -sin(t + PI / 4) * scale + 1};
+	},
+
+	zoom: function (scale: number = 0.1, t: number): any {
+		return {sx: sin(t) * scale + 1, sy: sin(t) * scale + 1};
+	},
+
+	fade: function (base = 1, t: number): any {
+		return {alpha: (sin(t) + 1) * 0.5 + base};
+	},
+};
+

src/animation/ZoomLoop.ts

+/**
+ * Created by rockyl on 2018/11/5.
+ */
+
+import {ScillaComponent} from "scilla";
+
+export default class ZoomLoop extends ScillaComponent{
+
+	onUpdate(t) {
+		super.onUpdate(t);
+
+		this.transform.scale.x = this.transform.scale.y = Math.abs(Math.sin(t * 0.001)) * 0.15 + 1;
+	}
+}

src/animation/index.ts

+/**
+ * Created by rockyl on 2019-01-10.
+ */
+
+export {default as BounceZoom} from './BounceZoom'
+export {default as Fade} from './Fade'
+export {default as Rotation} from './Rotation'
+export {default as RoundLoop} from './RoundLoop'
+export {default as Swing} from './Swing'
+export {default as TouchZoom} from './TouchZoom'
+export {default as Wave} from './Wave'
+export {default as ZoomLoop} from './ZoomLoop'

src/base/InteractComponent.ts

+/**
+ * Created by rockyl on 2018/11/7.
+ */
+
+import {Matrix, ScillaComponent, decorators} from "scilla";
+import Renderer from "../renderer/Renderer";
+
+const {dirtyFieldTrigger} = decorators;
+
+/**
+ * 可交互组件
+ */
+export default class InteractComponent extends ScillaComponent {
+	/**
+	 * 是否可交互
+	 */
+	@dirtyFieldTrigger
+	interactable = true;
+
+	/**
+	 * 触摸中断
+	 */
+	touchInterrupt: boolean = false;
+
+	protected invertMatrix = Matrix.create();
+	protected localPos: any = {};
+	protected isOut = true;
+
+	private _touchBeginFlag: boolean;
+
+	constructor() {
+		super();
+
+	}
+
+	_dealGlobalTouchBegin(e) {
+		let interrupt = super._dealGlobalTouchBegin(e);
+
+		const hitOn = this.hitTest(e);
+		if (hitOn) {
+			this._touchBeginFlag = true;
+			this.onTouchBegin(e);
+			this._dealTouchOver(e);
+		}
+
+		return hitOn && interrupt;
+	}
+
+	_dealGlobalTouchMove(e) {
+		let interrupt = super._dealGlobalTouchMove(e);
+
+		const hitOn = this.hitTest(e);
+		if (hitOn) {
+			this._dealTouchOver(e);
+			this.onTouchMove(e);
+		} else {
+			this._dealTouchOut(e);
+		}
+
+		return hitOn && interrupt;
+	}
+
+	_dealGlobalTouchEnd(e) {
+		let interrupt = super._dealGlobalTouchEnd(e);
+
+		const hitOn = this.hitTest(e);
+		if (hitOn) {
+			this.onTouchEnd(e);
+			if(this._touchBeginFlag){
+				this.onTouchTap(e);
+				this._touchBeginFlag = false;
+			}
+		}
+
+		this.isOut = true;
+
+		return hitOn && interrupt;
+	}
+
+	_dealTouchOver(e) {
+		if (this.isOut) {
+			this.isOut = false;
+			this.onTouchOver(e);
+		}
+	}
+
+	_dealTouchOut(e) {
+		if (!this.isOut) {
+			this.isOut = true;
+			this.onTouchOut(e);
+		}
+	}
+
+	onTouchBegin(e) {
+		//console.log('onTouchBegin', e);
+	}
+
+	onTouchMove(e) {
+		//console.log('onTouchMove', e);
+	}
+
+	onTouchOver(e) {
+		//console.log('onTouchOver', e);
+	}
+
+	onTouchOut(e) {
+		//console.log('onTouchOut', e);
+	}
+
+	onTouchEnd(e) {
+		//console.log('onTouchEnd', e);
+	}
+
+	onTouchTap(e) {
+		//console.log('onTouchTap', e);
+	}
+
+	/**
+	 * 碰撞检测
+	 * @param e
+	 */
+	hitTest(e) {
+		const matrix = this.transform.getMatrix();
+		const invertMatrix = this.invertMatrix;
+		invertMatrix.copyFrom(matrix);
+		invertMatrix.invert();
+		invertMatrix.transformPoint(e.x, e.y, this.localPos);
+
+		let result = false;
+		const renderers = this.entity.getComponents(Renderer);
+		for (let renderer of renderers) {
+			if (renderer.hitTest(this.localPos.x, this.localPos.y)) {
+				if (renderer.isUsedToMask) {
+					continue
+				} else {
+					result = true;
+					break
+				}
+			} else if (renderer.isUsedToMask) {
+				return false
+			}
+		}
+
+		return result;
+	}
+}

src/base/TouchInterrupt.ts

+/**
+ * Created by rockyl on 2018-12-13.
+ *
+ * 触摸中断组件
+ */
+
+import InteractComponent from "./InteractComponent";
+
+export default class TouchInterrupt extends InteractComponent {
+	touchInterrupt: boolean = true;
+}

src/base/Transform.ts

+/**
+ * Created by rockyl on 2018/11/5.
+ */
+
+import {ScillaComponent, Vector2D, Matrix, decorators} from "scilla";
+import Renderer from "../renderer/Renderer";
+
+const {dirtyFieldDetector, dirtyFieldTrigger} = decorators;
+
+/**
+ * 矩阵处理顺序
+ * SCALE_ROTATE: 先缩放后旋转
+ * ROTATE_SCALE: 先旋转后缩放
+ */
+export enum MATRIX_ORDER {
+	SCALE_ROTATE,
+	ROTATE_SCALE,
+}
+
+/**
+ * 矩阵转换组件
+ * 缩放、旋转、位移
+ */
+export default class Transform extends ScillaComponent {
+	onVector2DModify = (value, key, oldValue) => {
+		this.makeDirty(value, key, oldValue);
+	};
+
+	/**
+	 * 坐标
+	 */
+	@dirtyFieldTrigger
+	position: Vector2D = new Vector2D(0);
+
+	/**
+	 * 节点透明度
+	 */
+	@dirtyFieldTrigger
+	alpha: number = 1;
+
+	/**
+	 * 节点渲染透明度
+	 */
+	private _renderAlpha: number;
+
+	get renderAlpha(): number{
+		return this._renderAlpha;
+	}
+
+	/**
+	 * 尺寸
+	 * 对于不同的子类渲染都有不同的效果
+	 */
+	private _width: number = NaN;
+	private _height: number = NaN;
+	/**
+	 * 缩放
+	 */
+	@dirtyFieldTrigger
+	scale: Vector2D = new Vector2D(1, 1);
+	/**
+	 * 轴距
+	 */
+	@dirtyFieldTrigger
+	pivot: Vector2D = new Vector2D(0.5, 0.5);
+	@dirtyFieldDetector
+	rotation = 0;
+
+	private order: MATRIX_ORDER = MATRIX_ORDER.SCALE_ROTATE;
+
+	protected _localMatrix: Matrix = Matrix.create();
+	protected _globalMatrix: Matrix = Matrix.create();
+	protected _globalPivotMatrix: Matrix = Matrix.create();
+	protected dirty: boolean;
+
+	get width(): number {
+		const renderer = this.entity.getComponent(Renderer);
+		return renderer ? renderer.bounds.width : (isNaN(this._width) ? 0 : this._width);
+	}
+
+	get explicitWidth(): number {
+		return this._width;
+	}
+
+	set width(value: number) {
+		if (this._width != value) {
+			this._width = value;
+
+			this.makeDirty(value, 'width');
+		}
+	}
+
+	get height(): number {
+		const renderer = this.entity.getComponent(Renderer);
+		return renderer ? renderer.bounds.height : (isNaN(this._height) ? 0 : this._height);
+	}
+
+	get explicitHeight(): number {
+		return this._height;
+	}
+
+	set height(value: number) {
+		if (this._height != value) {
+			this._height = value;
+
+			this.makeDirty(value, 'height');
+		}
+	}
+
+	makeDirty(value, key, oldValue?) {
+		this.dirty = true;
+
+		switch (key) {
+			case 'width':
+			case 'height':
+				const renderers = this.entity.getComponents(Renderer);
+				for (let renderer of renderers) {
+					renderer.makeDirty();
+				}
+				break;
+		}
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	onModify(value, key, oldValue) {
+		super.onModify(value, key, oldValue);
+
+		this.makeDirty(value, key, oldValue);
+		switch (key) {
+			case 'position':
+			case 'scale':
+				//case 'size':
+				value.onChange = this.onVector2DModify;
+				break;
+		}
+	}
+
+	/**
+	 * 更新本地矩阵
+	 */
+	protected updateLocalMatrix() {
+		const {
+			position: {x, y},
+			scale: {x: sx, y: sy}, rotation,
+		} = this;
+
+		const matrix = this._localMatrix;
+		matrix.identity();
+
+		if (this.order = MATRIX_ORDER.ROTATE_SCALE) {
+			matrix.scale(sx, sy);
+			matrix.rotate(rotation * Math.PI / 180);
+		} else {
+			matrix.rotate(rotation * Math.PI / 180);
+			matrix.scale(sx, sy);
+		}
+
+		matrix.translate(
+			x,
+			y,
+		);
+	}
+
+	/**
+	 * 更新全局矩阵
+	 */
+	protected updateGlobalMatrix() {
+		const {
+			entity, _globalMatrix, _localMatrix, _globalPivotMatrix,
+			pivot: {x: px, y: py},
+			width, height,
+		} = this;
+
+		_globalMatrix.copyFrom(_localMatrix);
+
+		if (entity.parent) {
+			const parentTransform: Transform = entity.parent.getComponent(Transform);
+			if (parentTransform) {
+				this._renderAlpha = parentTransform._renderAlpha * this.alpha;
+				_globalMatrix.concat(parentTransform.getMatrix());
+			}
+		}else{
+			this._renderAlpha = this.alpha;
+		}
+		_globalPivotMatrix.copyFrom(_globalMatrix);
+		_globalPivotMatrix.translate(
+			-(px - 0.5) * width,
+			-(py - 0.5) * height,
+		);
+	}
+
+	/**
+	 * 获取矩阵
+	 */
+	getMatrix(withPivot = false): Matrix {
+		return withPivot ? this._globalPivotMatrix : this._globalMatrix;
+	}
+
+	onUpdate(t) {
+		if (this.dirty) {
+			this.updateLocalMatrix();
+			this.dirty = false;
+		}
+
+		this.updateGlobalMatrix();
+
+		super.onUpdate(t);
+	}
+}

src/base/index.ts

+/**
+ * Created by rockyl on 2019-01-10.
+ */
+
+export {default as InteractComponent} from './InteractComponent'
+export {default as TouchInterrupt} from './TouchInterrupt'
+export {default as Transform} from './Transform'

src/index.ts

+/**
+ * Created by rockyl on 2019-01-24.
+ */
+
+export * from './animation';
+export * from './base';
+export * from './other';
+export * from './renderer';
+export * from './ui';

src/other/CameraController.ts

+/**
+ * Created by rockyl on 2018/11/15.
+ *
+ */
+
+import {Entity, getStageSize, ScillaComponent, createVector2D, Vector2D, math} from "scilla";
+import Transform from "../base/Transform";
+
+/**
+ * 相机控制组件
+ */
+export default class CameraController extends ScillaComponent {
+	target: Entity;
+	viewportAnchor: Vector2D = createVector2D();
+	targetPosition: Vector2D;
+	maxScale = 1.2;
+
+	private followPosition: Vector2D;
+
+	private stageSize;
+
+	onCreate() {
+		super.onCreate();
+	}
+
+	onAwake() {
+		super.onAwake();
+
+		const {target, viewportAnchor} = this;
+
+		this.stageSize = getStageSize();
+
+		if (target) {
+			this.targetPosition = target.getComponent(Transform).position;
+		}
+		this.followPosition = createVector2D();
+
+		if (viewportAnchor) {
+			const {width, height} = this.stageSize;
+			const {x, y} = this.viewportAnchor;
+			this.transform.position.setXY(width * x, height * y);
+		}
+	}
+
+	onUpdate(t) {
+		super.onUpdate(t);
+
+		if (!this.targetPosition) {
+			return;
+		}
+
+		const {transform: {scale, position}, stageSize: {width, height}, targetPosition: {x, y, length}, maxScale} = this;
+
+		const newScale = maxScale - length * maxScale / 2048;
+		scale.setXY(newScale, newScale);
+
+		this.followPosition.setXY(width / 2, height / 2).subtract(this.targetPosition);
+
+		position.copyFrom(math.lerpObj(position, this.followPosition, 0.1, Vector2D, ['x', 'y']));
+	}
+
+	onSleep() {
+		super.onSleep();
+	}
+
+	onDestroy() {
+		super.onDestroy();
+	}
+}

src/other/ContentSizeFitter.ts

+/**
+ * Created by rockyl on 2018-12-17.
+ *
+ * 内容组件尺寸自适应组件
+ */
+
+import {ScillaComponent, Size} from "scilla";
+import Transform from "../base/Transform";
+
+export default class ContentSizeFitter extends ScillaComponent {
+	private _measureSize: Size = new Size();
+
+	afterUpdate() {
+		super.afterUpdate();
+
+		const measureSize = this._measureSize;
+		measureSize.set(0, 0);
+		for(let child of this.entity.children){
+			const transform = child.getComponent(Transform);
+			if(transform){
+				const {width, height, pivot} = transform;
+				measureSize.width += width;
+				measureSize.height += height;
+			}
+		}
+
+		this.transform.width = measureSize.width;
+		this.transform.height = measureSize.height;
+	}
+}

src/other/RelativeLayout.ts

+/**
+ * Created by rockyl on 2018-12-05.
+ *
+ */
+
+import {ScillaComponent} from "scilla";
+import Renderer from "../renderer/Renderer";
+import Transform from "../base/Transform";
+
+/**
+ * 相对布局组件
+ */
+export default class RelativeLayout extends ScillaComponent {
+	left: number = NaN;
+	right: number = NaN;
+	top: number = NaN;
+	bottom: number = NaN;
+	horizontalCenter: number = NaN;
+	verticalCenter: number = NaN;
+
+	once: boolean = true;
+
+	onCreate() {
+		super.onCreate();
+	}
+
+	onAwake() {
+		super.onAwake();
+
+		this.adjust();
+	}
+
+	onUpdate(t) {
+		super.onUpdate(t);
+
+		if (!this.once) {
+			this.adjust();
+		}
+	}
+
+	onSleep() {
+		super.onSleep();
+	}
+
+	onDestroy() {
+		super.onDestroy();
+	}
+
+	adjust = () => {
+		const {
+			entity, entity: {parent}, transform, transform: {position, pivot: {x: ax, y: ay},},
+			left, right, top, bottom, horizontalCenter, verticalCenter
+		} = this;
+
+		const hasLeft = !isNaN(left);
+		const hasRight = !isNaN(right);
+		const hasTop = !isNaN(top);
+		const hasBottom = !isNaN(bottom);
+		const hasHorizontalCenter = !isNaN(horizontalCenter);
+		const hasVerticalCenter = !isNaN(verticalCenter);
+
+		const parentRenderers = parent.getComponents(Renderer);
+		for (let parentRenderer of parentRenderers) {
+			parentRenderer.measureBounds();
+		}
+		const parentTransform:Transform = parent.getComponent(Transform);
+		let pWidth, pHeight;
+		if(parentRenderers.length > 0){
+			const parentBounds = parentRenderers[0].bounds;
+			pWidth = parentBounds.width;
+			pHeight = parentBounds.height;
+		}else{
+			pWidth = parentTransform.explicitWidth;
+			pHeight = parentTransform.explicitHeight;
+		}
+		const {x: pax, y: pay} = parentTransform.pivot;
+
+		const renderers = entity.getComponents(Renderer);
+		for (let renderer of renderers) {
+			renderer.measureBounds();
+		}
+		let {width, height, } = transform;
+
+		let {x, y} = position;
+
+		let widthModified = false, heightModified = false;
+
+		//adjust
+		{
+			if (hasHorizontalCenter) {
+				x = (pWidth - width) / 2 - pWidth * pax + width * ax;
+			} else if (hasLeft) {
+				if (hasRight) {
+					widthModified = true;
+					width = pWidth - right - left;
+					x = (left - right) / 2 - (0.5 - ax) * width;
+				} else {
+					x = left - pWidth * pax + width * ax;
+				}
+			} else if (hasRight) {
+				x = -right + pWidth * (1 - pax) - width * (1 - ax);
+			}
+
+			if (hasVerticalCenter) {
+				y = (pHeight - height) / 2 - pHeight * pay + height * ay;
+			} else if (hasTop) {
+				if (hasBottom) {
+					heightModified = true;
+					height = pHeight - bottom - top;
+					y = (top - bottom) / 2 - (0.5 - ay) * height;
+				} else {
+					y = top - pHeight * pay + height * ay;
+				}
+			} else if (hasBottom) {
+				y = -bottom + pHeight * (1 - pay) - height * (1 - ay);
+			}
+		}
+
+		position.x = x;
+		position.y = y;
+
+		if(widthModified){
+			transform.width = width;
+		}
+		if(heightModified){
+			transform.height = height;
+		}
+
+		if(widthModified || heightModified){
+			for (let renderer of renderers) {
+				renderer.measureBounds();
+			}
+		}
+	}
+}

src/other/index.ts

+/**
+ * Created by rockyl on 2019-01-10.
+ */
+
+export {default as CameraController} from './CameraController'
+export {default as ContentSizeFitter} from './ContentSizeFitter'
+export {default as RelativeLayout} from './RelativeLayout'

src/renderer/CircleRenderer.ts

+/**
+ * Created by rockyl on 2018/11/6.
+ */
+
+import GraphicRenderer from "./GraphicRenderer";
+import {decorators} from "scilla";
+
+const {dirtyFieldDetector} = decorators;
+
+/**
+ * 圆形渲染组件
+ */
+export default class CircleRenderer extends GraphicRenderer {
+	/**
+	 * 半径
+	 */
+	@dirtyFieldDetector
+	radius = 50;
+
+	/**
+	 * 开始角度
+	 */
+	@dirtyFieldDetector
+	startAngle: number = 0;
+
+	/**
+	 * 结束角度
+	 */
+	@dirtyFieldDetector
+	endAngle: number = 360;
+
+	/**
+	 * 是否回归到圆心
+	 */
+	@dirtyFieldDetector
+	backToCenter: boolean = true;
+
+	protected getRenderSize(): any {
+		const {radius} = this;
+		return {width: radius * 2, height: radius * 2};
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	protected draw() {
+		const {context, bounds: {width, height}, startAngle, endAngle, backToCenter, _margin, _useCacheMode} = this;
+		let offset = _useCacheMode ? _margin : 0;
+
+		const radius = Math.min(width, height) / 2;
+		const pos = offset + radius;
+
+		if(startAngle == 0 && endAngle == 360){
+			context.arc(pos, pos, radius, 0, 2 * Math.PI);
+		}else{
+			if(backToCenter){
+				context.moveTo(pos, pos);
+			}
+			context.arc(pos, pos, radius, startAngle * Math.PI / 180, endAngle * Math.PI / 180);
+			if(backToCenter){
+				context.lineTo(pos, pos);
+			}
+		}
+
+		super.draw();
+	}
+}

src/renderer/FrameAnimationRenderer.ts

+/**
+ * Created by rockyl on 2018-11-30.
+ *
+ * 帧动画组件
+ *
+ * todo 倒置播放
+ */
+
+import Renderer from "./Renderer";
+import {FrameAnimation, ScillaEvent} from "scilla";
+
+/**
+ * 帧动画渲染组件
+ */
+export default class FrameAnimationRenderer extends Renderer {
+	/**
+	 * 帧动画资源
+	 */
+	public frameAnimation: FrameAnimation;
+	/**
+	 * 是否自动播放
+	 */
+	public autoPlay: boolean = false;
+	/**
+	 * 帧率
+	 * 不设置就读取动画文件的帧率
+	 */
+	public fps: number = NaN;
+
+	public onComplete: ScillaEvent = new ScillaEvent();
+	public onLoopComplete: ScillaEvent = new ScillaEvent();
+
+	private _playing;
+	private _startTime;
+	private _startFrame;
+	private _endFrame;
+
+	private _currentFrameIndex;
+
+	private _startFlag;
+	private _loop;
+	private _loopCounting;
+	private _flag;
+
+	/**
+	 * @inheritDoc
+	 */
+	onAwake() {
+		super.onAwake();
+
+		if(this.autoPlay){
+			this.play(0, -1);
+		}
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	onUpdate(t) {
+		if (this._playing) {
+			const {frameAnimation, _startFrame, _endFrame, fps} = this;
+
+			if (this._startFlag) {
+				this._startFlag = false;
+				this._startTime = t;
+				this._loopCounting ++;
+			}
+
+			const mFPS = isNaN(fps) ? frameAnimation.fps : fps;
+
+			const passTime = t - this._startTime;
+			const passFrameCount = Math.floor(passTime / (1000 / mFPS));
+			const passFrameInRegion = passFrameCount % (_endFrame - _startFrame + 1);
+			this._currentFrameIndex = _startFrame + passFrameInRegion;
+
+			if(passFrameInRegion == 0 && passFrameCount > 0){
+				this._currentFrameIndex = _endFrame;
+				this.onLoopEnd();
+			}
+		}
+
+		super.onUpdate(t);
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	onSleep() {
+		super.onSleep();
+	}
+
+	/**
+	 * 当一遍播放结束时
+	 */
+	onLoopEnd(){
+		if (this._loop < 0) {
+			this._startFlag = true;
+			this.onLoopComplete.invoke();
+		} else if (this._loopCounting < this._loop) {
+			this._startFlag = true;
+			this.onLoopComplete.invoke();
+		} else {
+			this._playing = false;
+			this.onComplete.invoke();
+		}
+	}
+
+	/**
+	 * 播放
+	 * @param frame
+	 * @param loop
+	 * @param force
+	 */
+	play(frame: number | string = 0, loop: number = 0, force = true) {
+		this._loop = loop;
+		this._loopCounting = 0;
+		if (!this.frameAnimation) {
+			return;
+		}
+		let startFrame = 0, endFrame = this.frameAnimation.frameCount - 1;
+		if (typeof frame == 'string') {
+			const label = this.frameAnimation.getLabel(frame);
+			if (label) {
+				startFrame = label.frame - 1;
+				endFrame = label.end;
+			}
+		} else {
+			startFrame = frame;
+		}
+		this._startFrame = startFrame;
+		this._endFrame = endFrame;
+
+		this._currentFrameIndex = this._startFrame;
+
+		this._startFlag = true;
+		this._playing = true;
+	}
+
+	/**
+	 * 停止
+	 */
+	stop() {
+		this._playing = false;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	protected draw() {
+		super.draw();
+
+		if (!this.frameAnimation) {
+			return;
+		}
+
+		const {context, frameAnimation, _currentFrameIndex, bounds} = this;
+
+		const {texture, data} = frameAnimation.getFrame(_currentFrameIndex);
+
+		if (texture) {
+			const {img, bounds: {x, y, width: textureWidth, height: textureHeight}} = texture;
+
+			bounds.setTo(data.x, data.y, textureWidth, textureHeight);
+
+			context.drawImage(img, x, y, textureWidth, textureHeight, data.x, data.y, textureWidth, textureHeight);
+		}
+	}
+}

src/renderer/GraphicRenderer.ts

+/**
+ * Created by rockyl on 2018/11/6.
+ *
+ * todo 如果isUsedToMask，就禁用缓存
+ */
+
+import Renderer from "./Renderer";
+import {color} from 'scilla';
+
+/**
+ * 图形渲染组件
+ */
+export default class GraphicRenderer extends Renderer {
+	fillColor: color = '#42bce4';
+	borderColor: color = '#0899d0';
+	borderWidth = 0;
+
+	//是否为mask
+	isUsedToMask = false;
+	//是否显示mask
+	maskVisible = false;
+
+	protected getUseCacheMode(){
+		return this._useCacheMode && !this.isUsedToMask;
+	}
+
+	/**
+	 * 获取图形尺寸
+	 */
+	protected getRenderSize(): any {
+		return {width: 0, height: 0};
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	protected beforeDraw() {
+		super.beforeDraw();
+		this.applyStyle();
+		this.context.beginPath();
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	protected draw() {
+		super.draw();
+
+		if (this.isUsedToMask) {
+			this._context.clip();
+			this.maskVisible && this.fillAndStoke()
+		} else {
+			this.fillAndStoke()
+		}
+	}
+
+	/**
+	 * 应用渲染样式
+	 */
+	protected applyStyle() {
+		const {context, fillColor, borderColor, borderWidth} = this;
+
+		context.fillStyle = fillColor;
+		if (borderWidth > 0) {
+			context.strokeStyle = borderColor;
+			context.lineWidth = borderWidth;
+		}
+	}
+
+	/**
+	 * 绘制
+	 */
+	protected fillAndStoke() {
+		const {context, borderWidth} = this;
+
+		context.fill();
+		if (borderWidth > 0) {
+			context.stroke();
+		}
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	protected drawClip() {
+		this.isUsedToMask && this.context.save();
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	afterUpdate() {
+		this.isUsedToMask && this.context.restore();
+	}
+
+	measureBounds() {
+		if(this.entity.name == 'content'){
+			console.log();
+		}
+
+		if (!this.dirty) {
+			return;
+		}
+
+		this._margin = this.borderWidth;
+
+		const {bounds, transform: {explicitWidth: tWidth, explicitHeight: tHeight}} = this;
+		const {width: sWidth, height: sHeight} = this.getRenderSize();
+
+		bounds.width = isNaN(tWidth) ? sWidth : tWidth;
+		bounds.height = isNaN(tHeight) ? sHeight : tHeight;
+
+		super.measureBounds();
+	}
+}

src/renderer/LineRenderer.ts

+/**
+ * Created by rockyl on 2018/11/6.
+ */
+
+import GraphicRenderer from "./GraphicRenderer";
+
+/**
+ * 线段渲染组件
+ */
+export default class LineRenderer extends GraphicRenderer {
+	x0: number = 0;
+	y0: number = 0;
+	x1: number = 0;
+	y1: number = 0;
+
+	/**
+	 * @inheritDoc
+	 */
+	draw() {
+		super.draw();
+
+		const {context, x0, y0, x1, y1} = this;
+
+		context.moveTo(x0, y0);
+		context.lineTo(x1, y1);
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	measureBounds() {
+		const {bounds} = this;
+		bounds.width = 0;
+		bounds.height = 0;
+
+		super.measureBounds();
+	}
+}

src/renderer/RectRenderer.ts

+/**
+ * Created by rockyl on 2018/11/6.
+ */
+
+import GraphicRenderer from "./GraphicRenderer";
+import {decorators} from 'scilla'
+
+const {dirtyFieldDetector} = decorators;
+
+/**
+ * (圆角)矩形渲染器
+ */
+export default class RectRenderer extends GraphicRenderer {
+	@dirtyFieldDetector
+	width = 100;
+	@dirtyFieldDetector
+	height = 100;
+	@dirtyFieldDetector
+	cornerRadius = 0;
+
+	protected getRenderSize(): any {
+		const {width, height} = this;
+		return {width, height};
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	protected draw() {
+		const {PI} = Math;
+		const {context, cornerRadius: r, bounds: {width, height}, _margin, _useCacheMode} = this;
+
+		let offset = _useCacheMode ? _margin : 0;
+
+		if (r) {
+			context.moveTo(offset + r, offset + 0);
+			context.lineTo(offset + width - r, offset + 0);
+			context.arc(offset + width - r, offset + r, r, PI * 3 / 2, PI * 2);
+			context.lineTo(offset + width, offset + height - r);
+			context.arc(offset + width - r, offset + height - r, r, 0, PI / 2);
+			context.lineTo(offset + r, offset + height);
+			context.arc(offset + r, offset + height - r, r, PI / 2, PI);
+			context.lineTo(offset + 0, offset + r);
+			context.arc(offset + r, offset + r, r, PI, PI * 3 / 2);
+		} else {
+			context.rect(offset, offset, width, height);
+		}
+
+		super.draw();
+	}
+}

src/renderer/Renderer.ts

+/**
+ * Created by rockyl on 2018/11/6.
+ */
+
+import {createCanvas, getContext, ScillaComponent, Bounds, Vector2D, math, decorators, EngineConfig} from "scilla";
+
+const {dirtyFieldTrigger} = decorators;
+
+/**
+ * 渲染组件基类
+ */
+export default class Renderer extends ScillaComponent {
+	protected onVector2DModify = () => {
+		this.makeDirty();
+	};
+
+	private _debugDrawColor: string;
+
+	protected dirty: boolean = true;
+
+	/**
+	 * 是否使用缓存模式
+	 */
+	protected _useCacheMode: boolean = false;
+
+	/**
+	 * 透明度
+	 */
+	alpha: number = 1;
+
+	//锚点：在各子render里面加，从绘制上改，将同时更改位置原点，旋转原点，缩放原点,以0到1比例形式（现用此方案）
+	//在该render上改transform；更改旋转和缩放原点，不改变位置原点，默认中心为位置原点，以真实数值形式
+	@dirtyFieldTrigger
+	anchor: Vector2D = new Vector2D(0.5, 0.5);
+
+	/**
+	 * 边界
+	 */
+	protected bounds = new Bounds();
+
+	protected cacheCanvas = null;
+
+	/**
+	 * 缓存用的渲染上下文
+	 */
+	protected cacheCanvasContext;
+
+	/**
+	 * 锚点实际偏移
+	 */
+	protected _anchorOffset: Vector2D = new Vector2D();
+
+	//渲染上下文
+	protected _context = getContext();
+
+	/**
+	 * 扩展尺寸
+	 */
+	protected _margin: number = 0;
+
+	get useCacheMode() {
+		return this.getUseCacheMode();
+	}
+
+	set useCacheMode(value) {
+		this._useCacheMode = value;
+	}
+
+	constructor(){
+		super();
+
+		this._debugDrawColor = `hsl(${math.makeRandomInt(360)}, ${math.makeRandomInt(100)}%, 60%)`;
+	}
+
+	protected getUseCacheMode() {
+		return this._useCacheMode;
+	}
+
+	/**
+	 * 获取渲染上下文
+	 * 如果缓存上下文存在，则返回缓存上下文
+	 */
+	get context() {
+		return this.cacheCanvasContext || this._context;
+	}
+
+	makeDirty() {
+		this.dirty = true;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	protected onModify(value, key, oldValue) {
+		super.onModify(value, key, oldValue);
+
+		this.makeDirty();
+		switch (key) {
+			case 'anchor':
+				value.onChange = this.onVector2DModify;
+				break;
+		}
+	}
+
+	onAwake() {
+		super.onAwake();
+
+		if (!this.transform) {
+			console.warn('renderer need a transform component');
+		}
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	onUpdate(t) {
+		if (this.dirty) {
+			if(this.entity.name == 'label_status'){
+				console.log();
+			}
+			if (this.useCacheMode) {
+				this.readyCacheCanvas();
+			}
+			this.measureBounds();
+			if (this.useCacheMode) {
+				this.updateCacheCanvas();
+			}
+		}
+		this.transformToLocal();
+		this.render();
+
+		if (EngineConfig.drawRenderRect) {
+			const {_context, _debugDrawColor, bounds: {width, height}, _anchorOffset: {x, y}, transform: {pivot: {x: px, y: py}}} = this;
+			_context.globalAlpha = 0.9;
+			_context.strokeStyle = _debugDrawColor;
+			_context.fillStyle = _debugDrawColor;
+			_context.beginPath();
+			_context.rect(0, 0, width, height);
+			_context.stroke();
+			_context.beginPath();
+			_context.arc(width * px, height * py, 3, 0, 2 * Math.PI);
+			_context.fill();
+		}
+	}
+
+	/**
+	 * 准备缓存渲染上下文
+	 */
+	protected readyCacheCanvas() {
+		let canvas = this.cacheCanvas;
+		if (!canvas) {
+			canvas = this.cacheCanvas = createCanvas();
+			this.cacheCanvasContext = canvas.getContext('2d');
+		}
+	}
+
+	/**
+	 * 更新缓存属性
+	 */
+	protected updateCacheCanvas() {
+		let canvas = this.cacheCanvas;
+
+		const {width, height} = this.bounds;
+		canvas.width = width + this._margin * 2;
+		canvas.height = height + this._margin * 2;
+	}
+
+	/**
+	 * 渲染过程
+	 */
+	protected render() {
+		this.beforeDraw();
+		this.drawClip();
+
+		if (this.dirty) {
+			if(this.useCacheMode){
+				this.draw();
+			}
+			this.dirty = false;
+		}
+
+		if (this.useCacheMode) {
+			this.drawCache();
+		} else {
+			this.draw();
+		}
+	}
+
+	/**
+	 * 画之前
+	 */
+	protected beforeDraw() {
+		this.applyAlpha();
+	}
+
+	/**
+	 * 执行矩阵转换
+	 */
+	protected transformToLocal() {
+		const {transform, _anchorOffset: {x: ax, y: ay}} = this;
+
+		if (transform && transform.enabled) {
+			const {a, b, c, d, tx, ty} = transform.getMatrix(true);
+			const offX = ax * a + ay * c;
+			const offY = ax * b + ay * d;
+			this._context.setTransform(a, b, c, d, tx - offX, ty - offY);
+		} else {
+			this._context.setTransform(1, 0, 0, 1, -ax, -ay);
+		}
+	}
+
+	/**
+	 * 应用透明度
+	 */
+	protected applyAlpha() {
+		this._context.globalAlpha = this.alpha * this.transform.renderAlpha;
+	}
+
+	/**
+	 * 绘制缓存
+	 */
+	protected drawCache() {
+		if (this.cacheCanvas.width > 0 && this.cacheCanvas.height > 0) {
+			this._context.drawImage(this.cacheCanvas, -this._margin, -this._margin);
+		}
+	}
+
+	/**
+	 * 画遮罩
+	 */
+	protected drawClip() {
+
+	}
+
+	/**
+	 * 画
+	 */
+	protected draw() {
+
+	}
+
+	/**
+	 * 测量边界
+	 */
+	protected measureBounds() {
+		const {anchor: {x, y}, bounds, bounds: {width, height}} = this;
+
+		const anchorOffsetX = this._anchorOffset.x = width * x;
+		const anchorOffsetY = this._anchorOffset.y = height * y;
+
+		bounds.x = -anchorOffsetX;
+		bounds.y = -anchorOffsetY;
+	}
+
+	/**
+	 * 碰撞检测
+	 * @param x
+	 * @param y
+	 */
+	hitTest(x, y) {
+		return this.bounds.contains(x, y);
+	}
+}

src/renderer/TextRenderer.ts

+/**
+ * Created by rockyl on 2018/11/6.
+ */
+
+import GraphicRenderer from "./GraphicRenderer";
+import {TextStyle, EngineConfig, decorators, Texture, resource} from "scilla";
+
+const {dirtyFieldDetector, dirtyFieldTrigger} = decorators;
+
+export enum TextAlign{
+	/**
+	 * 左对齐
+	 */
+	LEFT = 'left',
+	/**
+	 * 居中对齐
+	 */
+	CENTER = 'center',
+	/**
+	 * 右对齐
+	 */
+	RIGHT = 'right',
+}
+
+export enum VerticalAlign{
+	/**
+	 * 顶部
+	 */
+	TOP = 'top',
+	/**
+	 * 中间
+	 */
+	MIDDLE = 'middle',
+	/**
+	 * 底部
+	 */
+	BOTTOM = 'bottom',
+}
+
+/**
+ * 文本渲染组件
+ */
+export default class TextRenderer extends GraphicRenderer {
+	/**
+	 * 文本
+	 */
+	@dirtyFieldDetector
+	text: string = 'text';
+
+	/**
+	 * 文本流
+	 */
+	@dirtyFieldTrigger
+	textFlow: any = null;
+
+	/**
+	 * 文本对齐
+	 */
+	@dirtyFieldDetector
+	textAlign: TextAlign = TextAlign.CENTER;
+
+	/**
+	 * 文本纵向对齐
+	 */
+	@dirtyFieldDetector
+	verticalAlign: VerticalAlign = VerticalAlign.MIDDLE;
+
+	/**
+	 * 行间距
+	 */
+	@dirtyFieldDetector
+	lineSpacing: number = 0;
+
+	/**
+	 * 字间距
+	 */
+	@dirtyFieldDetector
+	letterSpacing: number = 0;
+
+	/**
+	 * 文图文本资源
+	 */
+	@dirtyFieldDetector
+	fontRes: resource;
+
+	protected _lineHeight: number = NaN;
+	protected _bmpLineHeight: number = 0;
+	protected _textWidth: number;
+	protected _textHeight: number;
+
+	/**
+	 * 文本样式
+	 */
+	@dirtyFieldDetector
+	textStyle: TextStyle = new TextStyle();
+
+	@dirtyFieldDetector
+	useCacheMode: boolean = true;
+
+	protected _pureText: string;
+
+	protected rows: any[];
+
+	protected measureCache: any = {};
+
+	protected onModify(value, key, oldValue) {
+		super.onModify(value, key, oldValue);
+
+		switch (key) {
+			case 'textFlow':
+				if(value){
+					this.updateTextFlow();
+				}
+				break;
+			case 'textStyle':
+				value.onChange = this.makeDirty.bind(this);
+				this.makeDirty();
+				break;
+		}
+	}
+
+	updateTextFlow(){
+		let text = '';
+		if (this.textFlow) {
+			for (let item of this.textFlow) {
+				text += item.text;
+			}
+		}
+
+		this._pureText = text;
+		this.makeDirty();
+	}
+
+	/**
+	 * 行高
+	 * 行高如果没设定就为fontSize的1.2倍，https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Values
+	 */
+	get lineHeight(): number {
+		return isNaN(this._lineHeight) ? (
+			this.isBmpMode ? this._bmpLineHeight : this.textStyle.fontSize * EngineConfig.lineHeightRatio
+		) : this._lineHeight;
+	}
+
+	set lineHeight(value: number) {
+		if (this._lineHeight != value) {
+			this._lineHeight = value;
+			this.dirty = true;
+		}
+	}
+
+	/**
+	 * 获取纯文本
+	 */
+	get pureText(): string {
+		return this.textFlow ? this._pureText : this.text;
+	}
+
+	protected getRenderSize(): any {
+		return {
+			width: this._textWidth,
+			height: this._textHeight,
+		};
+	}
+
+	protected beforeDraw() {
+		super.beforeDraw();
+
+		if (!this.isBmpMode) {
+			this.applyTextStyle();
+		}
+	}
+
+	/**
+	 * 应用文本样式
+	 */
+	protected applyTextStyle() {
+		const {context, textStyle} = this;
+		const {fontStyle, fontVariant, fontWeight, fontSize, fontFamily} = textStyle;
+
+		context.font = `${fontStyle} ${fontVariant} ${fontWeight} ${fontSize}px ${fontFamily}`;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	protected fillAndStoke() {
+		if (!this.pureText || this.pureText.length == 0) {
+			return;
+		}
+		const {
+			context, measureCache, lineHeight, lineSpacing, letterSpacing, rows, textAlign, verticalAlign, isBmpMode,
+			transform: {width, height},
+		} = this;
+
+		//const expWidth = isNaN(width) ? boundsWidth : width;
+		//const expHeight = isNaN(height) ? boundsHeight : height;
+
+		const rowCount = rows.length;
+
+		let x = 0;
+		switch (textAlign) {
+			case "left":
+				x = 0;
+				break;
+			case "right":
+				x = width;
+				break;
+			case "center":
+			default:
+				x = width / 2;
+				break;
+		}
+
+		let y = 0;
+		const drawHeight = rowCount * lineHeight + lineSpacing * (rowCount - 1);
+		switch (verticalAlign) {
+			case "top":
+				y = 0;
+				break;
+			case "bottom":
+				y = height - drawHeight;
+				break;
+			case "middle":
+			default:
+				y = (height - drawHeight) / 2;
+				break;
+		}
+
+		y += lineHeight;
+
+		context.textAlign = letterSpacing == 0 && !this.textFlow ? textAlign : 'left';
+		context.textBaseline = 'bottom';
+
+		let offY = 0;
+		for (let i = 0; i < rowCount; i++) {
+			const {text, lineWidth} = rows[i];
+
+			if (letterSpacing == 0 && !isBmpMode && !this.textFlow) {
+				this.drawText(i, text, x, y + offY);
+			} else {
+				let offX = 0;
+				switch (textAlign) {
+					case "left":
+						offX = 0;
+						break;
+					case "right":
+						offX = -lineWidth;
+						break;
+					case "center":
+					default:
+						offX = -lineWidth / 2;
+						break;
+				}
+
+				for (let j = 0, lj = text.length; j < lj; j++) {
+					const char = text[j];
+					this.drawText(j, char, x + offX, y + offY);
+					if (measureCache[char].width > 0) {
+						offX += measureCache[char].width + letterSpacing;
+					}
+				}
+			}
+			offY += lineHeight + lineSpacing;
+		}
+
+		//console.log(this.cacheCanvas.toDataURL());
+	}
+
+	private getStyle(index){
+		if(!this.textFlow){
+			return null;
+		}
+
+		let targetItem;
+		let count = 0;
+		for(let item of this.textFlow){
+			count += item.text.length;
+			if(index < count){
+				targetItem = item;
+				break;
+			}
+		}
+
+		return targetItem.style;
+	}
+
+	protected drawText(index, text, x, y) {
+		const {context, borderWidth, isBmpMode, fontRes} = this;
+
+		if (isBmpMode) {
+			const texture: Texture = fontRes.getTexture(text);
+			if (!texture) {
+				return;
+			}
+			const {bounds: {x: textureX, y: textureY, width: textureWidth, height: textureHeight}} = texture;
+			context.drawImage(texture.img, textureX, textureY, textureWidth, textureHeight, x, y, textureWidth, textureHeight);
+		} else {
+			let style = this.getStyle(index);
+			if(style){
+				if(style.hasOwnProperty('textColor')){
+					context.fillStyle = style.textColor;
+				}
+			}else{
+				context.fillStyle = this.fillColor;
+			}
+			context.fillText(text, x, y + 1);
+			if (borderWidth > 0) {
+				context.strokeText(text, x, y + 1);
+			}
+		}
+	}
+
+	protected get isBmpMode() {
+		return !!this.fontRes;
+	}
+
+	protected measureText(text): any {
+		let result;
+
+		if (this.measureCache.hasOwnProperty(text)) {
+			result = this.measureCache[text];
+		} else {
+			const {context, letterSpacing, isBmpMode, fontRes, lineHeight} = this;
+
+			if (isBmpMode) {
+				if (text.length == 1) {
+					const texture: Texture = fontRes.getTexture(text);
+					result = {
+						width: texture ? texture.width : 0,
+						height: texture ? texture.height : 0,
+					}
+				} else {
+					let totalWidth = 0, totalHeight = 0;
+					for (let char of text) {
+						const measureResult = this.measureText(char);
+						totalWidth += measureResult.width;
+						if (measureResult.height > totalHeight) {
+							totalHeight = measureResult.height;
+						}
+					}
+					result = {
+						width: totalWidth,
+						height: totalHeight,
+					}
+				}
+			} else {
+				result = {
+					width: context.measureText(text).width,
+					height: lineHeight,
+				};
+			}
+
+			result.width += letterSpacing * (text.length - 1);
+
+			//如果是多个字且有字间距，就测量全部单个字母
+			if (text.length == 1) {
+				this.measureCache[text] = result;
+			}
+			if (letterSpacing != 0 && text.length > 1 || this.textFlow) {
+				for (let char of text) {
+					this.measureCache[char] = this.measureText(char);
+				}
+			}
+		}
+
+		return result;
+	}
+
+	protected splitText() {
+		const {pureText: text, letterSpacing, lineSpacing, lineHeight, isBmpMode, transform: {explicitWidth, explicitHeight}} = this;
+
+		this.measureCache = {};
+
+		let textWidth = 0, textHeight = 0, maxHeight = 0;
+		let rows = [], measureResult;
+
+		if (text && text.length > 0) {
+			if (isNaN(explicitWidth)) {
+				const lines = text.split('\n');
+				for (const line of lines) {
+					measureResult = this.measureText(line);
+					const mw = measureResult.width;
+					if (mw > textWidth) {
+						textWidth = mw;
+					}
+					if (isBmpMode) {
+						const mh = measureResult.height;
+						if (mh > maxHeight) {
+							maxHeight = mh;
+						}
+					}
+					rows.push({
+						text: line,
+						lineWidth: mw,
+					});
+				}
+				if (!isBmpMode) {
+					maxHeight = lineHeight;
+				}
+				this._bmpLineHeight = maxHeight;
+			} else {
+				const chars = text.split('');
+				let lineWidth = 0, charWidth = 0, index = 0;
+				let line = '';
+				for (let i = 0, li = chars.length; i < li; i++) {
+					const char = chars[i];
+					if (char == '\n') {
+						rows.push({
+							text: line,
+							lineWidth,
+						});
+						line = '';
+						lineWidth = 0;
+						index = 0;
+					} else {
+						measureResult = this.measureText(char);
+						if (measureResult.width == 0) {
+							continue;
+						}
+						charWidth = measureResult.width;
+						const mh = measureResult.height;
+						if (mh > maxHeight) {
+							maxHeight = mh;
+						}
+						if (index > 0 && lineWidth + charWidth + (index == 0 ? 0 : letterSpacing) > explicitWidth) {
+							rows.push({
+								text: line,
+								lineWidth,
+							});
+							line = '';
+							lineWidth = 0;
+							index = 0;
+						}
+						line += char;
+						lineWidth += charWidth + (index == 0 ? 0 : letterSpacing);
+						index++;
+					}
+				}
+				this._bmpLineHeight = maxHeight;
+				rows.push({
+					text: line,
+					lineWidth,
+				});
+				textWidth = explicitWidth;
+			}
+
+			textHeight = isNaN(explicitHeight) ? (
+				maxHeight * rows.length + lineSpacing * (rows.length - 1)
+			) : explicitHeight;
+		} else {
+			textWidth = isNaN(explicitWidth) ? 0 : explicitWidth;
+			textHeight = isNaN(explicitHeight) ? 0 : explicitHeight;
+		}
+
+		this.rows = rows;
+		this._textWidth = textWidth;
+		this._textHeight = textHeight;
+
+		return {
+			rows,
+			textWidth,
+			textHeight,
+		};
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	measureBounds() {
+		if (!this.dirty) {
+			return;
+		}
+
+		if (!this.isBmpMode) {
+			this.applyTextStyle();
+		}
+
+		this.splitText();
+
+		super.measureBounds();
+	}
+}

src/renderer/TextureRenderer.ts

+/**
+ * Created by rockyl on 2018/11/6.
+ */
+
+import Renderer from "./Renderer";
+import {Texture, decorators} from "scilla";
+
+const {dirtyFieldDetector} = decorators;
+
+export enum FillMode {
+	/**
+	 * 正常
+	 */
+	NORMAL,
+	/**
+	 * 裁切
+	 */
+	SLICED,
+	/**
+	 * 瓦片
+	 */
+	TILED,
+}
+
+/**
+ * 纹理渲染组件
+ */
+export default class TextureRenderer extends Renderer {
+	/**
+	 * 纹理资源
+	 */
+	@dirtyFieldDetector
+	texture: Texture;
+
+	/**
+	 * 填充模式
+	 */
+	@dirtyFieldDetector
+	fillMode: FillMode = FillMode.NORMAL;
+
+	/**
+	 * 滤镜数组
+	 */
+	@dirtyFieldDetector
+	filters = [];
+
+	private get hasFilters() {
+		return this.filters && this.filters.length > 0;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	draw() {
+		super.draw();
+
+		this.drawImage();
+		this.applyFilters();
+
+		/*const {context, texture, hasFilters} = this;
+		if (texture && hasFilters) {
+			const {bounds: {width: textureWidth, height: textureHeight}} = texture;
+
+			//筛选阴影滤镜Shadow
+			let s = this;
+			let cf = s.filters;
+			let cfLen = cf.length;
+			let fId = -1;
+			if (cfLen) {
+				for (let i = 0; i < cfLen; i++) {
+					if (s.filters[i].type == "Shadow") {
+						fId = i;
+						break;
+					}
+				}
+			}
+			if (fId >= 0) {
+				let ctx: any = context;
+				ctx.shadowBlur = cf[fId].blur;
+				ctx.shadowColor = cf[fId].color;
+				ctx.shadowOffsetX = cf[fId].offsetX;
+				ctx.shadowOffsetY = cf[fId].offsetY;
+				ctx.drawImage(this.cacheCanvas, 0, 0, textureWidth, textureHeight);
+				ctx.shadowBlur = 0;
+				ctx.shadowOffsetX = 0;
+				ctx.shadowOffsetY = 0;
+			} else {
+				context.drawImage(this.cacheCanvas, 0, 0, textureWidth, textureHeight);
+			}
+
+			// context.drawImage(texture.img, x, y, textureWidth, textureHeight, -width * this.anchor.x, -height * this.anchor.y, width, height);
+		}*/
+	}
+
+	/**
+	 * 应用滤镜
+	 */
+	applyFilters() {
+		if (!this.hasFilters) return;
+
+		const {texture, filters, context} = this;
+		const {bounds: {width: textureWidth, height: textureHeight}} = texture;
+
+		let imageData = context.getImageData(0, 0, textureWidth, textureHeight);
+		for (const filter of filters) {
+			filter.drawFilter(imageData);
+		}
+		context.putImageData(imageData, 0, 0);
+	}
+
+	/**
+	 * 根据模式绘制图片
+	 */
+	drawImage() {
+		if(!this.texture){
+			return;
+		}
+
+		const {texture, fillMode, context, bounds: {width, height}} = this;
+		const {bounds: {x, y, width: textureWidth, height: textureHeight}} = texture;
+
+		switch (fillMode) {
+			case FillMode.NORMAL:
+				texture.drawToCanvas(context);
+				break;
+			case FillMode.SLICED:
+
+				break;
+			case FillMode.TILED:
+				const textureCanvas = texture.getCacheCanvas();
+				const pattern = context.createPattern(textureCanvas, 'repeat');
+				context.rect(0, 0, width, height);
+				context.fillStyle = pattern;
+				context.fill();
+				break;
+		}
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	measureBounds() {
+		if (!this.dirty) {
+			return;
+		}
+
+		const {bounds, transform: {explicitWidth: tWidth, explicitHeight: tHeight}} = this;
+
+		if (this.texture) {
+			const {width: textureWidth, height: textureHeight} = this.texture;
+
+			bounds.width = isNaN(tWidth) ? textureWidth : tWidth;
+			bounds.height = isNaN(tHeight) ? textureHeight : tHeight;
+		} else {
+			bounds.width = isNaN(tWidth) ? 0 : tWidth;
+			bounds.height = isNaN(tHeight) ? 0 : tHeight;
+		}
+
+		super.measureBounds();
+	}
+}

src/renderer/index.ts

+/**
+ * Created by rockyl on 2019-01-10.
+ */
+
+export {default as CircleRenderer} from './CircleRenderer'
+export {default as FrameAnimationRenderer} from './FrameAnimationRenderer'
+export {default as GraphicRenderer} from './GraphicRenderer'
+export {default as LineRenderer} from './LineRenderer'
+export {default as RectRenderer} from './RectRenderer'
+export {default as Renderer} from './Renderer'
+export {default as TextRenderer} from './TextRenderer'
+export {default as TextureRenderer} from './TextureRenderer'

src/ui/Button.ts

+/**
+ * Created by rockyl on 2018/11/23.
+ *
+ * 按钮
+ */
+
+import {ScillaEvent, Texture,} from "scilla";
+import TouchZoom from "../animation/TouchZoom";
+import {InteractComponent} from "../base";
+import {TextureRenderer} from "../renderer";
+
+export default class Button extends InteractComponent {
+	upRes: Texture;
+	downRes: Texture;
+	disabledRes: Texture;
+	onClick: ScillaEvent;
+
+	private bgRenderer: TextureRenderer;
+	private currentRes: Texture;
+	private touchBeginWithSelf: boolean;
+	private touchOut: boolean;
+
+	constructor() {
+		super();
+
+		this.touchInterrupt = true;
+	}
+
+	get touchZoom(): TouchZoom{
+		return this.entity && this.entity.getComponent(TouchZoom);
+	}
+
+	onModify(value, key, oldValue) {
+		super.onModify(value, key, oldValue);
+
+		if (key === 'interactable') {
+			if(this.touchZoom){
+				this.touchZoom.interactable = value;
+			}
+			try {
+				this.changeTexture();
+			}catch (e) {}
+		}
+	}
+
+	onCreate() {
+		super.onCreate();
+
+		this.onClick = new ScillaEvent();
+	}
+
+	onAwake() {
+		super.onAwake();
+
+		this.bgRenderer = this.entity.getComponent(TextureRenderer);
+
+		this.changeTexture(this.upRes);
+	}
+
+	onTouchBegin(e) {
+		super.onTouchBegin(e);
+
+		this.touchBeginWithSelf = true;
+
+		this.changeTexture(this.downRes);
+	}
+
+	onTouchOver(e) {
+		super.onTouchOver(e);
+
+		if (this.touchBeginWithSelf) {
+			this.touchBeginWithSelf = true;
+			this.changeTexture(this.downRes);
+		}
+		this.touchOut = false;
+	}
+
+	onTouchOut(e) {
+		super.onTouchOut(e);
+
+		if (this.touchBeginWithSelf) {
+			this.changeTexture(this.upRes);
+		}
+		this.touchOut = true;
+	}
+
+	onGlobalTouchEnd(e) {
+		super.onGlobalTouchEnd(e);
+
+		if (this.touchBeginWithSelf && !this.touchOut) {
+			this.onClick.invoke();
+		}
+
+		this.touchBeginWithSelf = false;
+		this.changeTexture(this.upRes);
+	}
+
+	changeTexture(res?) {
+		if(!this.bgRenderer){
+			return;
+		}
+
+		this.currentRes = res || this.upRes;
+		if(this.interactable){
+			this.bgRenderer.texture = this.currentRes;
+		}else{
+			this.bgRenderer.texture = this.disabledRes;
+		}
+	}
+}

src/ui/ProgressBar.ts

+/**
+ * Created by rockyl on 2018-12-26.
+ *
+ * 进度条
+ */
+
+import {Entity, ScillaComponent, decorators, createTween, ease} from "scilla";
+import RectRenderer from "../renderer/RectRenderer";
+import Transform from "../base/Transform";
+import TextRenderer from "../renderer/TextRenderer";
+
+const {dirtyFieldTrigger} = decorators;
+
+function renderLabelFuncSample(value, maximum, minimum){
+	return Math.floor(value / (maximum - minimum) * 100) + '%';
+}
+
+export default class ProgressBar extends ScillaComponent {
+	viewport: Entity;
+	thumb: Entity;
+	widget: Entity;
+	label: Entity;
+
+	@dirtyFieldTrigger
+	value: number = 0;
+	@dirtyFieldTrigger
+	minimum: number = 0;
+	@dirtyFieldTrigger
+	maximum: number = 0;
+	@dirtyFieldTrigger
+	snapInterval: number = 1;
+	@dirtyFieldTrigger
+	renderLabelFunc: Function;
+	@dirtyFieldTrigger
+	fixWithRange: boolean = true;
+
+	private _mask: RectRenderer;
+	private _widgetTransform: Transform;
+	private _label: TextRenderer;
+	private _thumbSize: any;
+
+	onCreate() {
+		super.onCreate();
+
+		this.renderLabelFunc = renderLabelFuncSample;
+	}
+
+	onAwake() {
+		super.onAwake();
+
+		this._mask = this.viewport.getComponent(RectRenderer);
+		this._mask.width = 0;
+		if(this.widget){
+			this._widgetTransform = this.widget.getComponent(Transform);
+		}
+
+		this._label = this.label.getComponent(TextRenderer);
+
+		this.callOnNextTick(this.updateThumbSize);
+	}
+
+	private updateThumbSize=()=>{
+		const {width, height} = this.thumb.getComponent(Transform);
+		this._thumbSize = {width, height};
+
+		this.update();
+	};
+
+	onModify(value, key, oldValue) {
+		super.onModify(value, key, oldValue);
+
+		if(oldValue === undefined){
+			return;
+		}
+		this.callOnNextTick(this.update);
+	}
+
+	private update(){
+		const {minimum, maximum, _thumbSize} = this;
+
+		if(!_thumbSize){
+			return ;
+		}
+
+		const range = maximum - minimum;
+
+		let value = Math.max(minimum, Math.min(maximum, this.value));
+
+		const percentage = (value - minimum) / range;
+		const width = percentage * _thumbSize.width;
+
+		//this._mask.width = width;
+		createTween(this._mask, true)
+			.to({width}, 300, ease.cubicOut);
+
+		if(this._widgetTransform){
+			this._widgetTransform.position.x = width;
+		}
+
+		let renderValue = this.fixWithRange ? Math.max(minimum, Math.min(maximum, this.value)) : this.value;
+		this.value = value;
+		if(this._label){
+			let text = this.renderLabelFunc(renderValue, this.maximum, this.minimum);
+			if(typeof text == 'string'){
+				this._label.text = text;
+				this._label.textFlow = null;
+			}else{
+				this._label.textFlow = text;
+				this._label.updateTextFlow();
+			}
+		}
+	}
+}

src/ui/ScrollView.ts

+/**
+ * Created by rockyl on 2018-12-13.
+ *
+ * 滚动视图组件
+ */
+
+import {Entity, Size, createTween, createVector2D, Vector2D, ease} from "scilla";
+import InteractComponent from "../base/InteractComponent";
+import Transform from "../base/Transform";
+
+enum LockingType {
+	NOSET,
+	HORIZON,
+	VERTICAL,
+}
+
+export default class ScrollView extends InteractComponent {
+	viewport: Entity;
+	content: Entity;
+	lockingType: LockingType = LockingType.NOSET;
+
+	private _beginPos: any;
+	private _lastPos: Vector2D = createVector2D();
+	private _viewportTransform: Transform;
+	private _contentTransform: Transform;
+	private _posOffset: any;
+	private _posRange: Size;
+
+	private _speed: Vector2D = createVector2D();
+
+	onAwake() {
+		super.onAwake();
+
+		this._contentTransform = this.content.getComponent(Transform);
+		this._viewportTransform = this.viewport.getComponent(Transform);
+
+		this.callOnNextTick(this.updatePosOffset);
+	}
+
+	updatePosOffset = ()=>{
+		const {position: {x: x, y: y}} = this._contentTransform;
+		this._posOffset = {x, y};
+		//console.log(this._posOffset);
+	}
+
+	updatePosRange = () => {
+		const {width: pWidth, height: pHeight} = this._viewportTransform;
+		const {width, height} = this._contentTransform;
+
+		this._posRange = new Size(pWidth - width, pHeight - height);
+		//console.log(this._posRange);
+	};
+
+	onTouchBegin(e) {
+		super.onTouchBegin(e);
+
+		this.updatePosRange();
+
+		const {x: tx, y: ty} = e;
+		const {_contentTransform: {position: {x: cx, y: cy}}} = this;
+
+		this._beginPos = {
+			tx,
+			ty,
+			cx,
+			cy,
+		};
+		this._lastPos.setXY(tx, ty);
+	}
+
+	onGlobalTouchMove(e) {
+		super.onGlobalTouchMove(e);
+
+		if (!this._beginPos) {
+			return;
+		}
+
+		const {
+			_beginPos: {tx, ty, cx, cy},
+			_posOffset: {x: offX, y: offY},
+			_contentTransform: {position},
+			lockingType,
+		} = this;
+		const {x, y} = e;
+
+		let px = x - tx + cx;
+		let py = y - ty + cy;
+
+		const {width: rWidth, height: rHeight} = this._posRange;
+
+		const halfWidth = Math.abs( rWidth / 2);
+		const paddingX = halfWidth - Math.abs(offX - halfWidth - px);
+		if(paddingX < 0){
+			px += paddingX * 0.8 * (x - tx > 0 ? 1 : -1);
+		}
+
+		const halfHeight = Math.abs( rHeight / 2);
+		const paddingY = halfHeight - Math.abs(offY - halfHeight - py);
+		if(paddingY < 0){
+			py += paddingY * 0.8 * (y - ty > 0 ? 1 : -1);
+		}
+
+		switch (lockingType) {
+			case LockingType.HORIZON:
+				position.y = py;
+				break;
+			case LockingType.VERTICAL:
+				position.x = px;
+				break;
+			default:
+				position.setXY(px, py);
+		}
+
+		this._speed.copyFrom(this._lastPos.subtract({x, y}));
+		this._lastPos.setXY(x, y);
+	}
+
+	onGlobalTouchEnd(e) {
+		super.onGlobalTouchEnd(e);
+
+		if (!this._beginPos) {
+			return;
+		}
+		this._beginPos = null;
+
+		const {x: offX, y: offY} = this._posOffset;
+		const {width: rWidth, height: rHeight} = this._posRange;
+		const {position, position: {x, y}} = this._contentTransform;
+
+		const tx = Math.min(Math.max(offX + rWidth, x), offX);
+		const ty = Math.min(Math.max(offY + rHeight, y), offY);
+
+		const targetPos = createVector2D(tx, ty);
+		const duration = Math.min(500, Math.max(targetPos.distance(position), 200));
+		createTween(this._contentTransform, true, {clazz: Vector2D, fields: ['x', 'y']})
+			.to({position: targetPos}, duration, ease.cubicOut);
+	}
+}

src/ui/index.ts

+/**
+ * Created by rockyl on 2019-01-10.
+ */
+
+export {default as Button} from './Button'
+export {default as ProgressBar} from './ProgressBar'
+export {default as ScrollView} from './ScrollView'

tsconfig.json

+{
+	"compilerOptions": {
+		"target": "es5",
+		"experimentalDecorators": true,
+		"sourceMap": true,
+		"declarationDir": "./types",
+		"declaration": true,
+		"lib": [
+			"es5",
+			"es6",
+			"dom",
+			"es2015.promise"
+		],
+		"baseUrl": "./",
+		"paths": {
+			"scilla": ["node_modules/scilla/src"]
+		}
+	},
+	"include": [
+		"src",
+		"libs"
+	]
+}
\ No newline at end of file

yarn.lock

+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@babel/code-frame@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz#06e2ab19bdb535385559aabb5ba59729482800f8"
+  integrity sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==
+  dependencies:
+    "@babel/highlight" "^7.0.0"
+
+"@babel/highlight@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0.tgz#f710c38c8d458e6dd9a201afb637fcb781ce99e4"
+  integrity sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^4.0.0"
+
+"@types/estree@0.0.39":
+  version "0.0.39"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
+  integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
+
+"@types/node@*":
+  version "10.12.18"
+  resolved "https://registry.npmjs.org/@types/node/-/node-10.12.18.tgz#1d3ca764718915584fcd9f6344621b7672665c67"
+  integrity sha512-fh+pAqt4xRzPfqA6eh3Z2y6fyZavRIumvjhaCL753+TVkGKGhpPeyrJG2JftD0T9q4GF00KjefsQ+PQNDdWQaQ==
+
+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
+arr-diff@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
+  integrity sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=
+  dependencies:
+    arr-flatten "^1.0.1"
+
+arr-flatten@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+  integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
+
+array-unique@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
+  integrity sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=
+
+braces@^1.8.2:
+  version "1.8.5"
+  resolved "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  integrity sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=
+  dependencies:
+    expand-range "^1.8.1"
+    preserve "^0.2.0"
+    repeat-element "^1.1.2"
+
+builtin-modules@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-2.0.0.tgz#60b7ef5ae6546bd7deefa74b08b62a43a232648e"
+  integrity sha512-3U5kUA5VPsRUA3nofm/BXX7GVHKfxz0hOBAPxXrIvHzlDRkQVqEn6yi8QJegxl4LzOHLdvb7XF5dVawa/VVYBg==
+
+chalk@^2.0.0:
+  version "2.4.2"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+commander@~2.17.1:
+  version "2.17.1"
+  resolved "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
+  integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
+
+core-util-is@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
+
+escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+
+estree-walker@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-0.5.2.tgz#d3850be7529c9580d815600b53126515e146dd39"
+  integrity sha512-XpCnW/AE10ws/kDAs37cngSkvgIR8aN3G0MS85m7dUpuK2EREo9VJ00uvw6Dg/hXEpfsE1I1TvJOJr+Z+TL+ig==
+
+esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+  integrity sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=
+
+expand-brackets@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
+  integrity sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=
+  dependencies:
+    is-posix-bracket "^0.1.0"
+
+expand-range@^1.8.1:
+  version "1.8.2"
+  resolved "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
+  integrity sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=
+  dependencies:
+    fill-range "^2.1.0"
+
+extglob@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
+  integrity sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=
+  dependencies:
+    is-extglob "^1.0.0"
+
+filename-regex@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
+  integrity sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=
+
+fill-range@^2.1.0:
+  version "2.2.4"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-2.2.4.tgz#eb1e773abb056dcd8df2bfdf6af59b8b3a936565"
+  integrity sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==
+  dependencies:
+    is-number "^2.1.0"
+    isobject "^2.0.0"
+    randomatic "^3.0.0"
+    repeat-element "^1.1.2"
+    repeat-string "^1.5.2"
+
+for-in@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+  integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
+
+for-own@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  integrity sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=
+  dependencies:
+    for-in "^1.0.1"
+
+fs-extra@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.0.tgz#8cc3f47ce07ef7b3593a11b9fb245f7e34c041d6"
+  integrity sha512-EglNDLRpmaTWiD/qraZn6HREAEAHJcJOmxNEYwq6xeMKnVMAy3GUcFB+wXt2C6k4CNvB/mP1y/U3dzvKKj5OtQ==
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+glob-base@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
+  integrity sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=
+  dependencies:
+    glob-parent "^2.0.0"
+    is-glob "^2.0.0"
+
+glob-parent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  integrity sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=
+  dependencies:
+    is-glob "^2.0.0"
+
+graceful-fs@^4.1.2, graceful-fs@^4.1.6:
+  version "4.1.15"
+  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
+  integrity sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
+
+inherits@~2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+
+is-buffer@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
+
+is-dotfile@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
+  integrity sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=
+
+is-equal-shallow@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.npmjs.org/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
+  integrity sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=
+  dependencies:
+    is-primitive "^2.0.0"
+
+is-extendable@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
+
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+  integrity sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=
+
+is-glob@^2.0.0, is-glob@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  integrity sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=
+  dependencies:
+    is-extglob "^1.0.0"
+
+is-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
+  integrity sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=
+
+is-number@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
+  integrity sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=
+  dependencies:
+    kind-of "^3.0.2"
+
+is-number@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
+  integrity sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==
+
+is-posix-bracket@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
+  integrity sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=
+
+is-primitive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
+  integrity sha1-IHurkWOEmcB7Kt8kCkGochADRXU=
+
+isarray@1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
+
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
+  dependencies:
+    isarray "1.0.0"
+
+jest-worker@^23.2.0:
+  version "23.2.0"
+  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-23.2.0.tgz#faf706a8da36fae60eb26957257fa7b5d8ea02b9"
+  integrity sha1-+vcGqNo2+uYOsmlXJX+ntdjqArk=
+  dependencies:
+    merge-stream "^1.0.1"
+
+js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+jsonfile@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
+  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+kind-of@^3.0.2:
+  version "3.2.2"
+  resolved "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
+  dependencies:
+    is-buffer "^1.1.5"
+
+kind-of@^6.0.0:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
+  integrity sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==
+
+magic-string@^0.25.1:
+  version "0.25.1"
+  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.25.1.tgz#b1c248b399cd7485da0fe7385c2fc7011843266e"
+  integrity sha512-sCuTz6pYom8Rlt4ISPFn6wuFodbKMIHUMv4Qko9P17dpxb7s52KJTmRuZZqHdGmLCK9AOcDare039nRIcfdkEg==
+  dependencies:
+    sourcemap-codec "^1.4.1"
+
+math-random@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"
+  integrity sha1-izqsWIuKZuSXXjzepn97sylgH6w=
+
+merge-stream@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-1.0.1.tgz#4041202d508a342ba00174008df0c251b8c135e1"
+  integrity sha1-QEEgLVCKNCugAXQAjfDCUbjBNeE=
+  dependencies:
+    readable-stream "^2.0.1"
+
+micromatch@^2.3.11:
+  version "2.3.11"
+  resolved "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
+  integrity sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=
+  dependencies:
+    arr-diff "^2.0.0"
+    array-unique "^0.2.1"
+    braces "^1.8.2"
+    expand-brackets "^0.1.4"
+    extglob "^0.3.1"
+    filename-regex "^2.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.1"
+    kind-of "^3.0.2"
+    normalize-path "^2.0.1"
+    object.omit "^2.0.0"
+    parse-glob "^3.0.4"
+    regex-cache "^0.4.2"
+
+normalize-path@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
+  integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
+  dependencies:
+    remove-trailing-separator "^1.0.1"
+
+object.omit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
+  integrity sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=
+  dependencies:
+    for-own "^0.1.4"
+    is-extendable "^0.1.1"
+
+parse-glob@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
+  integrity sha1-ssN2z7EfNVE7rdFz7wu246OIORw=
+  dependencies:
+    glob-base "^0.3.0"
+    is-dotfile "^1.0.0"
+    is-extglob "^1.0.0"
+    is-glob "^2.0.0"
+
+path-parse@^1.0.5, path-parse@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
+  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+
+preserve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
+  integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
+
+process-nextick-args@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
+  integrity sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==
+
+randomatic@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed"
+  integrity sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw==
+  dependencies:
+    is-number "^4.0.0"
+    kind-of "^6.0.0"
+    math-random "^1.0.1"
+
+readable-stream@^2.0.1:
+  version "2.3.6"
+  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
+  integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
+regex-cache@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
+  integrity sha512-nVIZwtCjkC9YgvWkpM55B5rBhBYRZhAaJbgcFYXXsHnbZ9UZI9nnVWYZpBlCqv9ho2eZryPnWrZGsOdPwVWXWQ==
+  dependencies:
+    is-equal-shallow "^0.1.3"
+
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+  integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
+
+repeat-element@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
+  integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
+
+repeat-string@^1.5.2:
+  version "1.6.1"
+  resolved "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
+
+resolve@1.8.1:
+  version "1.8.1"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
+  integrity sha512-AicPrAC7Qu1JxPCZ9ZgCZlY35QgFnNqc+0LtbRNxnVw4TXvjQ72wnuL9JQcEBgXkI9JM8MsT9kaQoHcpCRJOYA==
+  dependencies:
+    path-parse "^1.0.5"
+
+resolve@^1.1.6, resolve@^1.8.1:
+  version "1.9.0"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.9.0.tgz#a14c6fdfa8f92a7df1d996cb7105fa744658ea06"
+  integrity sha512-TZNye00tI67lwYvzxCxHGjwTNlUV70io54/Ed4j6PscB8xVfuBJpRenI/o6dVk0cY0PYTY27AgCoGGxRnYuItQ==
+  dependencies:
+    path-parse "^1.0.6"
+
+rollup-plugin-commonjs@^9.2.0:
+  version "9.2.0"
+  resolved "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-9.2.0.tgz#4604e25069e0c78a09e08faa95dc32dec27f7c89"
+  integrity sha512-0RM5U4Vd6iHjL6rLvr3lKBwnPsaVml+qxOGaaNUWN1lSq6S33KhITOfHmvxV3z2vy9Mk4t0g4rNlVaJJsNQPWA==
+  dependencies:
+    estree-walker "^0.5.2"
+    magic-string "^0.25.1"
+    resolve "^1.8.1"
+    rollup-pluginutils "^2.3.3"
+
+rollup-plugin-node-resolve@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.4.0.tgz#908585eda12e393caac7498715a01e08606abc89"
+  integrity sha512-PJcd85dxfSBWih84ozRtBkB731OjXk0KnzN0oGp7WOWcarAFkVa71cV5hTJg2qpVsV2U8EUwrzHP3tvy9vS3qg==
+  dependencies:
+    builtin-modules "^2.0.0"
+    is-module "^1.0.0"
+    resolve "^1.1.6"
+
+rollup-plugin-typescript2@^0.18.0:
+  version "0.18.1"
+  resolved "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.18.1.tgz#921865828080a254c088c6bc181ca654e5ef73c6"
+  integrity sha512-aR2m5NCCAUV/KpcKgCWX6Giy8rTko9z92b5t0NX9eZyjOftCvcdDFa1C9Ze/9yp590hnRymr5hG0O9SAXi1oUg==
+  dependencies:
+    fs-extra "7.0.0"
+    resolve "1.8.1"
+    rollup-pluginutils "2.3.3"
+    tslib "1.9.3"
+
+rollup-plugin-uglify@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/rollup-plugin-uglify/-/rollup-plugin-uglify-6.0.0.tgz#15aa8919e5cdc63b7cfc9319c781788b40084ce4"
+  integrity sha512-XtzZd159QuOaXNvcxyBcbUCSoBsv5YYWK+7ZwUyujSmISst8avRfjWlp7cGu8T2O52OJnpEBvl+D4WLV1k1iQQ==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    jest-worker "^23.2.0"
+    serialize-javascript "^1.5.0"
+    uglify-js "^3.4.9"
+
+rollup-pluginutils@2.3.3, rollup-pluginutils@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.3.3.tgz#3aad9b1eb3e7fe8262820818840bf091e5ae6794"
+  integrity sha512-2XZwja7b6P5q4RZ5FhyX1+f46xi1Z3qBKigLRZ6VTZjwbN0K1IFGMlwm06Uu0Emcre2Z63l77nq/pzn+KxIEoA==
+  dependencies:
+    estree-walker "^0.5.2"
+    micromatch "^2.3.11"
+
+rollup@^0.66.6:
+  version "0.66.6"
+  resolved "https://registry.npmjs.org/rollup/-/rollup-0.66.6.tgz#ce7d6185beb7acea644ce220c25e71ae03275482"
+  integrity sha512-J7/SWanrcb83vfIHqa8+aVVGzy457GcjA6GVZEnD0x2u4OnOd0Q1pCrEoNe8yLwM6z6LZP02zBT2uW0yh5TqOw==
+  dependencies:
+    "@types/estree" "0.0.39"
+    "@types/node" "*"
+
+safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+serialize-javascript@^1.5.0:
+  version "1.6.1"
+  resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-1.6.1.tgz#4d1f697ec49429a847ca6f442a2a755126c4d879"
+  integrity sha512-A5MOagrPFga4YaKQSWHryl7AXvbQkEqpw4NNYMTNYUNV51bA8ABHgYFpqKx+YFFrw59xMV1qGH1R4AgoNIVgCw==
+
+source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+sourcemap-codec@^1.4.1:
+  version "1.4.4"
+  resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.4.tgz#c63ea927c029dd6bd9a2b7fa03b3fec02ad56e9f"
+  integrity sha512-CYAPYdBu34781kLHkaW3m6b/uUSyMOC2R61gcYMWooeuaGtjof86ZA/8T+qVPPt7np1085CR9hmMGrySwEc8Xg==
+
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
+supports-color@^5.3.0:
+  version "5.5.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
+tslib@1.9.3, tslib@^1.9.3:
+  version "1.9.3"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
+  integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
+
+typescript@^3.1.6:
+  version "3.2.2"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-3.2.2.tgz#fe8101c46aa123f8353523ebdcf5730c2ae493e5"
+  integrity sha512-VCj5UiSyHBjwfYacmDuc/NOk4QQixbE+Wn7MFJuS0nRuPQbof132Pw4u53dm264O8LPc2MVsc7RJNml5szurkg==
+
+uglify-js@^3.4.9:
+  version "3.4.9"
+  resolved "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz#af02f180c1207d76432e473ed24a28f4a782bae3"
+  integrity sha512-8CJsbKOtEbnJsTyv6LE6m6ZKniqMiFWmm9sRbopbkGs3gMPPfd3Fh8iIA4Ykv5MgaTbqHr4BaoGLJLZNhsrW1Q==
+  dependencies:
+    commander "~2.17.1"
+    source-map "~0.6.1"
+
+universalify@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=