增加ScrollView

src/2d/display/Container.ts

@@ -20,6 +20,14 @@ import {afterConstructor} from "../../zeroing/decorators/after-constructor";
 @applyScript
 @applyEvents
 export default class Container extends DisplayObject {
+	percentWidth: number;
+	percentHeight: number;
+	left: number;
+	top: number;
+	right: number;
+	bottom: number;
+	horizonCenter: number;
+	verticalCenter: number;
 
 	/**
 	 * 为false鼠标事件不再向下传递
@@ -312,7 +320,7 @@ export default class Container extends DisplayObject {
 		//自己先算
 		super.updateTransform();
 		//考虑是否要加，
-		//this._boundsID++;
+		this._boundsID++;
 		//children遍历计算
 		for (let i = 0, j = this.children.length; i < j; ++i) {
 			const child = this.children[i];

src/2d/graphics/Shape.ts

@@ -653,18 +653,18 @@ export class Shape extends Sprite {
 				leftX = 0;
 				leftY = 0;
 			}
-			leftX -= 20 + lineWidth >> 1;
-			leftY -= 20 + lineWidth >> 1;
-			buttonRightX += 20 + lineWidth >> 1;
-			buttonRightY += 20 + lineWidth >> 1;
+			leftX -= /*20 +*/ lineWidth >> 1;
+			leftY -= /*20 +*/ lineWidth >> 1;
+			buttonRightX += /*20 +*/ lineWidth >> 1;
+			buttonRightY += /*20 +*/ lineWidth >> 1;
 			let w = buttonRightX - leftX;
 			let h = buttonRightY - leftY;
 			s.offsetX = leftX;
 			s.offsetY = leftY;
-			s._localBoundsSelf.x = leftX + 10;
-			s._localBoundsSelf.y = leftY + 10;
-			s._localBoundsSelf.width = w - 20;
-			s._localBoundsSelf.height = h - 20;
+			s._localBoundsSelf.x = leftX/* + 10*/;
+			s._localBoundsSelf.y = leftY/* + 10*/;
+			s._localBoundsSelf.width = w/* - 20*/;
+			s._localBoundsSelf.height = h/* - 20*/;
 			let _canvas: any = s.canvas;
 			let ctx = s.context;
 			_canvas.width = w;

src/2d/ui/ScrollPage.ts → src/2d/ui/ScrollContainer.ts

@@ -12,7 +12,7 @@ import {Event} from "../events/Event";
  * @extends Container
  * @since 1.0.0
  */
-export class ScrollPage extends Container {
+export class ScrollContainer extends Container {
 	/**
 	 * 横向还是纵向 默认为纵向
 	 * @property isVertical
@@ -30,7 +30,7 @@ export class ScrollPage extends Container {
 	 * @since 1.0.0
 	 * @default 0
 	 */
-	private viewWidth: number = 0;
+	//private viewWidth: number = 0;
 	/**
 	 * 可见区域的高
 	 * @property viewHeight
@@ -39,7 +39,7 @@ export class ScrollPage extends Container {
 	 * @since 1.0.0
 	 * @default 0
 	 */
-	private viewHeight: number = 0;
+	//private viewHeight: number = 0;
 	// private _tweenId: number = 0;
 	/**
 	 * 整个滚动的最大距离值
@@ -49,7 +49,7 @@ export class ScrollPage extends Container {
 	 * @since 1.0.0
 	 * @default 1040
 	 */
-	public maxDistance: number = 1040;
+	//public maxDistance: number = 1040;
 	/**
 	 * @property 滚动距离
 	 * @type {number}
@@ -78,7 +78,7 @@ export class ScrollPage extends Container {
 	 * @since 1.0.0
 	 * @type {Container}
 	 */
-	public view: Container = new Container();
+	public viewPort: Container = new Container();
 	/**
 	 * 最后鼠标经过的坐标值
 	 * @property lastValue
@@ -160,27 +160,29 @@ export class ScrollPage extends Container {
 	 *      sPage.y=stage.viewRect.y;
 	 *
 	 */
-	constructor(vW: number, vH: number, maxDistance: number, isVertical: boolean = true, isFull = false) {
+	constructor(maxDistance?: number, isVertical: boolean = true, isFull = false) {
 		super();
-		let s: ScrollPage = this;
-		s._instanceType = "ScrollPage";
-		s.addChild(s.maskObj);
-		s.addChild(s.view);
+		let s: ScrollContainer = this;
+		s._instanceType = "ScrollContainer";
+		super.addChild(s.maskObj);
+		super.addChild(s.viewPort);
 		if (!isFull) {
 			//不全屏才设置mask
-			s.view.mask = s.maskObj;
+			s.viewPort.mask = s.maskObj;
 			//为了能接收鼠标事件设置isUsedToMask
 			s.maskObj.isUsedToMask = false;
 		}
 		s.maskObj.alpha = 0;
-		s.maxDistance = maxDistance;
-		s.setViewRect(vW, vH, isVertical);
+		if(maxDistance !== undefined){
+			//s.maxDistance = maxDistance;
+		}
+		s.updateViewRect(isVertical);
 		// s.addEventListener(MouseEvent.MOUSE_DOWN, s.onMouseEvent.bind(s));
-		s.addEventListener(MouseEvent.MOUSE_MOVE, s.onMouseEvent.bind(s));
-		s.addEventListener(MouseEvent.MOUSE_UP, s.onMouseEvent.bind(s));
-		s.addEventListener(MouseEvent.MOUSE_OUT, s.onMouseEvent.bind(s));
+		s.addEventListener(MouseEvent.MOUSE_MOVE, s.onMouseEvent, s);
+		s.addEventListener(MouseEvent.MOUSE_UP, s.onMouseEvent, s);
+		s.addEventListener(MouseEvent.MOUSE_OUT, s.onMouseEvent, s);
 		s.addEventListener(Event.ENTER_FRAME, function () {
-			let view: any = s.view;
+			let view: any = s.viewPort;
 			if (s.autoScroll) return;
 			if (!s.isSpringBack) {
 				if (view[s.paramXY] > 0) {
@@ -237,7 +239,7 @@ export class ScrollPage extends Container {
 				}
 			} else {
 				if (s.stopTimes >= 0) {
-					s.stopTimes++;
+					//s.stopTimes++;
 					if (s.stopTimes >= 15) {
 						s.speed = 0;
 						if (view[s.paramXY] > 0 || view[s.paramXY] < s.distance - s.maxDistance) {
@@ -247,7 +249,12 @@ export class ScrollPage extends Container {
 					}
 				}
 			}
-		})
+		});
+		s.addEventListener(Event.RESIZE, this.updateViewRect, s);
+	}
+
+	get maxDistance(){
+		return this.viewPort.height;
 	}
 
 	/**
@@ -259,28 +266,27 @@ export class ScrollPage extends Container {
 	 * @public
 	 * @since 1.1.1
 	 */
-	public setViewRect(w: number, h: number, isVertical: boolean): void {
-		let s: ScrollPage = this;
+	public updateViewRect(isVertical?: boolean): void {
+		let s: ScrollContainer = this;
 		s.maskObj.clear();
 		s.maskObj.beginFill("#000000");
-		s.maskObj.drawRect(0, 0, w, h);
-		s.viewWidth = w;
-		s.viewHeight = h;
+		s.maskObj.drawRect(0, 0, s.width, s.height);
 		s.maskObj.endFill();
-		s.isVertical = isVertical;
+		if(isVertical !== undefined){
+			s.isVertical = isVertical;
+		}
 		if (isVertical) {
-			s.distance = s.viewHeight;
+			s.distance = s.height;
 			s.paramXY = "y";
 		} else {
-			s.distance = s.viewWidth;
+			s.distance = s.width;
 			s.paramXY = "x";
 		}
-		s.isVertical = isVertical;
 	}
 
 	private onMouseEvent(e: MouseEvent): void {
 		let s = this;
-		let view: any = s.view;
+		let view: any = s.viewPort;
 		// if (s.distance < s.maxDistance) {
 		if (e.type == MouseEvent.MOUSE_MOVE) {
 			if (s.isMouseDownState < 1) {
@@ -355,13 +361,13 @@ export class ScrollPage extends Container {
 	 */
 	public scrollTo(dis: number, time: number = 0): void {
 		let s: any = this;
-		let newDis = s.paramXY == "x" ? s.viewWidth : s.viewHeight;
+		let newDis = s.paramXY == "x" ? s.width : s.height;
 		if (dis < 0) {
 			dis = 0;
 		} else if (dis > s.maxDistance - newDis) {
 			dis = s.maxDistance - newDis;
 		}
-		if (Math.abs(s.view[s.paramXY] + dis) > 2) {
+		if (Math.abs(s.viewPort[s.paramXY] + dis) > 2) {
 			// s.autoScroll = true;
 			// s.isStop = true;
 			// s.isMouseDownState = 0;
@@ -383,9 +389,9 @@ export class ScrollPage extends Container {
 	public destroy(): void {
 		let s = this;
 		s.maskObj.destroy();
-		s.view.destroy();
+		s.viewPort.destroy();
 		s.maskObj = null;
-		s.view = null;
+		s.viewPort = null;
 		super.destroy();
 	}
 }

src/2d/ui/ScrollList.ts

-import {ScrollPage} from "./ScrollPage";
+import {ScrollContainer} from "./ScrollContainer";
 import {DisplayObject} from "../display/DisplayObject";
 import {Event} from "../events/Event";
 
@@ -21,10 +21,10 @@ export interface IScrollListItem extends DisplayObject {
  * 滚动列表
  * @class ScrollList
  * @public
- * @extends ScrollPage
+ * @extends ScrollContainer
  * @since 1.0.9
  */
-export class ScrollList extends ScrollPage {
+export class ScrollList extends ScrollContainer {
 	private _items: Array<IScrollListItem> = null;
 	private _itemW: number;
 	private _itemH: number;
@@ -102,8 +102,8 @@ export class ScrollList extends ScrollPage {
 	private flushData() {
 		let s: any = this;
 		if (s._isInit > 0) {
-			if (s.view._UI.UM) {
-				let id: number = (Math.abs(Math.floor(s.view[s.paramXY] / s._itemRow)) - 1) * s._cols;
+			if (s.viewPort._UI.UM) {
+				let id: number = (Math.abs(Math.floor(s.viewPort[s.paramXY] / s._itemRow)) - 1) * s._cols;
 				id = id < 0 ? 0 : id;
 				if (id != s._lastFirstId) {
 					s._lastFirstId = id;
@@ -151,8 +151,8 @@ export class ScrollList extends ScrollPage {
 	 * @public
 	 * @since 1.1.1
 	 */
-	public setViewRect(w: number, h: number, isVertical: boolean): void {
-		super.setViewRect(w, h, isVertical);
+	public updateViewRect(w: number, h: number, isVertical: boolean): void {
+		super.updateViewRect(w, h, isVertical);
 		let s = this;
 		if (s._itemRow && s._itemCol) {
 			s._updateViewRect();
@@ -178,11 +178,11 @@ export class ScrollList extends ScrollPage {
 					item.id = -1;
 					item.data = null;
 					s._items.push(item);
-					s.view.addChild(item);
+					s.viewPort.addChild(item);
 				}
 			} else {
 				for (let i = 0; i < s._itemCount - newCount; i++) {
-					s.view.removeChild(s._items.pop());
+					s.viewPort.removeChild(s._items.pop());
 				}
 			}
 			s._itemCount = newCount;
@@ -199,14 +199,14 @@ export class ScrollList extends ScrollPage {
 	public setLoading(downLoading: DisplayObject): void {
 		let s: any = this;
 		if (s.downL) {
-			s.view.removeChild(s.downL);
+			s.viewPort.removeChild(s.downL);
 			let wh = s.downL.getWH();
 			s.maxDistance -= (s.paramXY == "x" ? wh.width : wh.height);
 			s.downL = null;
 		}
 		if (downLoading) {
 			s.downL = downLoading;
-			s.view.addChild(downLoading);
+			s.viewPort.addChild(downLoading);
 			s.downL[s.paramXY] = Math.max(s.distance, s.maxDistance);
 			let wh = s.downL.getWH();
 			s.maxDistance += (s.paramXY == "x" ? wh.width : wh.height);

src/2d/ui/index.ts

@@ -3,5 +3,5 @@
 // export {BitmapNumbers} from "./BitmapNumbers";
 
 export {ScrollList} from "./ScrollList";
-export {ScrollPage} from "./ScrollPage";
+export {ScrollContainer} from "./ScrollContainer";
 export {Button} from "./Button";
\ No newline at end of file

src/zeroing/game-warpper/nodes/ScrollView.ts

+/**
+ * Created by rockyl on 2019-11-24.
+ */
+
+import {ScrollContainer} from "../../../2d/ui";
+
+const proxyMethods = [
+	'onChildrenChange',
+	'addChild',
+	'addChildAt',
+	'swapChildren',
+	'getChildIndex',
+	'setChildIndex',
+	'getChildAt',
+	'getChildByName',
+	'removeChild',
+	'removeChildAt',
+	'removeChildren',
+];
+
+export class ScrollView extends ScrollContainer {
+	constructor() {
+		super();
+
+		for(let item of proxyMethods){
+			this[item] = this.viewPort[item].bind(this.viewPort);
+		}
+	}
+}

src/zeroing/game-warpper/nodes/index.ts

@@ -4,4 +4,5 @@
  
 export * from './shapes'
 export * from './Image'
-export * from './Label'
\ No newline at end of file
+export * from './Label'
+export * from './ScrollView'
\ No newline at end of file