自动布局

package.json

@@ -22,12 +22,12 @@
   },
   "scripts": {
     "declare": "node scripts/declare.js src/index.ts",
-    "rollup": "rollup -c -o dist/engine.js",
-    "rollup:debug": "rollup -c -m ",
-    "rollup:prod": "rollup -c -o dist/engine.js --environment BUILD:production",
+    "dev": "rollup -c -m -w",
+    "build": "rollup -c -o dist/engine.js",
+    "build:prod": "rollup -c -o dist/engine.js --environment BUILD:production",
     "preprocess": "node scripts/pre-process.js engine dist/engine.js",
-    "build": "rm -rf dist&&yarn rollup:prod && yarn preprocess && ali-oss-publish -c oss.config.js -e dist",
-    "build:debug": "rm -rf dist&&yarn rollup && yarn preprocess && ali-oss-publish -c oss.config.js -e dist",
+    "build:upload": "rm -rf dist&&yarn build:prod && yarn preprocess && ali-oss-publish -c oss.config.js -e dist",
+    "build:debug": "rm -rf dist&&yarn build && yarn preprocess && ali-oss-publish -c oss.config.js -e dist",
     "ts": "dts-bundle --name engine --main types/src/index.d.ts --out ../../dist/index.d.ts",
     "test": "echo \"Error: no test specified\" && exit 1",
     "mergeDts": "node scripts/mergeDts.js"

src/2d/display/Container.ts

@@ -11,6 +11,7 @@ import {applyEvents} from "../../zeroing/decorators/events";
 import {afterConstructor} from "../../zeroing/decorators/after-constructor";
 import {injectProperties, instantiateScript} from "../../zeroing/utils/index";
 import {isUI} from "../../zeroing/game-warpper/nodes/IUIComponent";
+import Transform from "../math/Transform";
 
 /**
  * 容器类
@@ -31,6 +32,7 @@ export default class Container extends DisplayObject {
 	horizonCenter: number;
 	verticalCenter: number;
 
+	private _transform: Transform;
 	private _lastLocalID;
 
 	/**
@@ -55,6 +57,8 @@ export default class Container extends DisplayObject {
 		this._instanceType = "Container";
 		this.children = [];
 
+		this._transform = this.transform;
+
 		this.afterConstructor();
 	}
 
@@ -411,7 +415,7 @@ export default class Container extends DisplayObject {
 			}
 		}
 
-		if(isUI(this) && this._lastLocalID !== this.transform.localID){
+		if(this._transform === this.transform && isUI(this) && this._lastLocalID !== this.transform.localID){
 			this._lastLocalID = this.transform.localID;
 			//console.log(this.name, this.instanceId , 'dirty!');
 			this.stage.layoutInvalid = true;
@@ -457,10 +461,10 @@ export default class Container extends DisplayObject {
 
 		let widthSetted = !!this._width && this._width !== 0;
 		let heightSetted = !!this._height && this._height !== 0;
-		if(widthSetted){
+		if (widthSetted) {
 			this._bounds.width = this._width;
 		}
-		if(heightSetted){
+		if (heightSetted) {
 			this._bounds.height = this._height;
 		}
 	}
@@ -687,6 +691,7 @@ export default class Container extends DisplayObject {
 		if (this._width !== value) {
 			//子类有用，有_width,才需设置scaleX
 			this._width = value;
+			if(this.stage) this.stage.layoutInvalid = true;
 			this.dispatchEvent(Event.RESIZE);
 		}
 	}
@@ -709,6 +714,7 @@ export default class Container extends DisplayObject {
 		// }
 		if (this._height !== value) {
 			this._height = value;
+			if(this.stage) this.stage.layoutInvalid = true;
 			this.dispatchEvent(Event.RESIZE);
 		}
 	}

src/2d/display/DisplayObject.ts

@@ -6,6 +6,7 @@ import {Event} from "../events/Event";
 import Graphics from '../graphics/Graphics';
 import {DEG_TO_RAD, RAD_TO_DEG} from '../const';
 import {Stage} from "./Stage";
+import {isUI} from "../../zeroing/game-warpper/nodes/IUIComponent";
 
 /**
  * 基础显示对象抽象类
@@ -147,6 +148,15 @@ export class DisplayObject extends EventDispatcher {
 		}
 	}
 
+	get frame() {
+		return {
+			x: this.x,
+			y: this.y,
+			width: this._width,
+			height: this._height,
+		}
+	}
+
 	attachVisibility() {
 
 	}

src/zeroing/game-warpper/GameStage.ts

@@ -51,6 +51,7 @@ export class GameStage extends Node {
 		this.addChild(this._popupContainer = new StackContainer());
 		this.addChild(this._toast = new Toast(this));
 
+		blackLayer.name = 'blackLayer';
 		blackLayer.percentWidth = 100;
 		blackLayer.percentHeight = 100;
 		blackLayer.visible = false;
@@ -152,12 +153,12 @@ export class GameStage extends Node {
 
 		registerCustomModules(customs);
 
-		if(dataMapping){
+		if (dataMapping) {
 			this.dataCenter.registerDataMapping(dataMapping);
 		}
 		setProcessMetaLibs(processes, builtinProcesses);
 
-		setTimeout(()=>{
+		setTimeout(() => {
 			let sceneEntry = this.instantiateView(entrySceneView);
 			if (sceneEntry) {
 				this._sceneContainer.push(sceneEntry);

src/zeroing/game-warpper/Toast.ts

@@ -12,6 +12,8 @@ export class Toast extends Node {
 
 	private _gameStage: GameStage;
 
+	name = 'toast';
+
 	constructor(gameStage: GameStage) {
 		super();
 		this._gameStage = gameStage;

src/zeroing/game-warpper/auto-layout.ts

@@ -16,9 +16,49 @@ export function initAutoLayout(stage: Stage) {
 }
 
 function onLayoutInvalid() {
-	console.log('onLayoutInvalid');
+	console.time('adjustLayout');
+	//traverseViewNode(_stage, adjustLayout, true);
+	let layoutTree = duplicateLayoutTree(_stage);
+	console.log(layoutTree);
+	console.timeEnd('adjustLayout');
+}
+
+function duplicateLayoutTree(node) {
+	let tree = {};
 
-	//traverseViewNode(_stage, adjustLayout);
+	getLayoutTreeOnce(node, tree, true);
+
+	return tree;
+}
+
+function getLayoutTreeOnce(node, tree, includeSelf = false) {
+	if (includeSelf) {
+		tree.name = node.name;
+		tree.frame = node.frame;
+		tree.constraint = node.adjustProxy.data;
+		tree.children = [];
+
+		if (node.isUI) {
+			tree.isUI = true;
+		}
+	}
+
+	for (let child of node.children) {
+		let layoutNode: any = {
+			name: child.name,
+			frame: child.frame,
+			constraint: child.adjustProxy.data,
+			children: [],
+		};
+		if (child.isUI) {
+			layoutNode.isUI = true;
+		}
+		tree.children.push(layoutNode);
+
+		if (child.children && child.children.length > 0) {
+			getLayoutTreeOnce(child, layoutNode);
+		}
+	}
 }
 
 function adjustLayout(node) {
@@ -32,17 +72,19 @@ function adjustLayout(node) {
 	const applyPercentWidth = function () {
 		if (t(percentWidth)) {
 			node.width = pWidth * percentWidth / 100;
+			return true;
 		}
 	};
 	const applyPercentHeight = function () {
 		if (t(percentHeight)) {
 			node.height = pHeight * percentHeight / 100;
+			return true;
 		}
 	};
 
 	let pw = true, ph = true;
 	if (t(horizonCenter)) {
-		applyPercentWidth();
+		pw = applyPercentWidth();
 		node.x = (pWidth - node.width) / 2 + horizonCenter;
 	} else {
 		if (t(left)) {
@@ -55,8 +97,11 @@ function adjustLayout(node) {
 			node.x = pWidth - width - right;
 		}
 		if (pw) {
-			applyPercentWidth();
+			pw = applyPercentWidth();
+		}
 	}
+	if (!pw) {
+		node.dispatchEvent(Event.RESIZE);
 	}
 
 	if (t(verticalCenter)) {

src/zeroing/utils/utils.ts

@@ -320,10 +320,14 @@ export function injectProperties(target, source) {
  * 遍历视图节点
  * @param node
  * @param callback
+ * @param includeSelf
  */
-export function traverseViewNode(node: Container, callback: Function) {
+export function traverseViewNode(node: Container, callback: Function, includeSelf = false) {
+	if(includeSelf){
+		callback(node);
+	}
 	for (let child of node.children) {
-		callback(child);
+		callback(child, node);
 
 		if (child.children && child.children.length > 0) {
 			traverseViewNode(child, callback);