init

cx3-demo/assets/cx/scripts/cxui.mainScene.ts

@@ -0,0 +1,13 @@
+
+import {_decorator, Component, setDisplayStats} from 'cc';
+const {ccclass} = _decorator;
+
+@ccclass('cxui.MainScene')
+class CxuiMainScene extends Component 
+{
+	onLoad () 
+	{
+		setDisplayStats(false);
+		cx.init(this);
+	}
+}

cx3-demo/assets/cx/scripts/cxui.mainScene.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "78daf419-e3cc-4573-a291-c945d1cb2218",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

cx3-demo/assets/cx/scripts/cxui.nativeMask.ts

@@ -0,0 +1,79 @@
+
+import {_decorator, Component, Node, Rect} from 'cc';
+const {ccclass} = _decorator;
+
+@ccclass('cxui.nativeMask')
+class CxuiNativeMask extends Component 
+{
+	maskName?: string;
+	maskRect?: Rect;
+	monitorNode?: Node;
+	monitorNodePriorX?: number;
+	init (page: Component, node: Node, x: number, y: number, width: number, height: number): string
+	{
+		if (!cx.os.native)
+			return "";
+		this.maskName = "cxNativeMask" + (++cx.uid);
+		this.maskRect = cx.convertToDeviceSize(node, x, y, width, height);
+		cx.native.ins("cx.mask").call("createMask", [this.maskName, this.maskRect.x, this.maskRect.y, this.maskRect.width, this.maskRect.height]);
+		return this.maskName;
+	}
+
+	onEnable ()
+	{
+		this.maskName && cx.native.ins("cx.mask").call("setMaskVisible", [this.maskName, true]);
+	}
+
+	onDisable ()
+	{
+		this.maskName && cx.native.ins("cx.mask").call("setMaskVisible", [this.maskName, false]);
+	}
+
+	onDestroy ()
+	{
+		this.maskName && cx.native.ins("cx.mask").call("removeMask", [this.maskName]);
+	}
+
+	//设置监控节点，mask的宽度将随着node的x位置改变，不遮挡住node
+	//todo: 目前仅实现横向不遮挡，对于底部上升的纵向node未处理
+	setMonitorNode (node: Node)
+	{
+		this.monitorNode = node;
+		this.monitorNodePriorX = node.getPosition().x;
+	}
+
+	setMaskSize (width: number, height: number)
+	{
+		this.maskName && cx.native.ins("cx.mask").call("setMaskSize", [this.maskName, width, height]);
+	}
+
+	setMaskMask (x: number, y: number, width: number, height: number, radius: number)
+	{
+		this.maskName && cx.native.ins("cx.mask").call("setMaskMask", [this.maskName, x, y, width, height, radius]);
+	}
+
+	clearMaskMask ()
+	{
+		this.maskName && cx.native.ins("cx.mask").call("clearMaskMask", [this.maskName]);
+	}
+
+	update ()
+	{
+		if (!this.maskName)
+			return;
+		if (this.monitorNode)
+		{
+			if (!this.monitorNode.active)
+			{
+				this.monitorNode = undefined;
+				return;
+			}
+			if (this.monitorNodePriorX == this.monitorNode.getPosition().x)
+				return;
+			this.monitorNodePriorX = this.monitorNode.getPosition().x;
+			var p = cx.convertToDeviceSize(undefined, this.monitorNodePriorX, 0);
+			var width = Math.min(this.maskRect!.width, Math.max(0, p.x - this.maskRect!.x));
+			this.setMaskSize(width, this.maskRect!.height);
+		}
+	}
+}

cx3-demo/assets/cx/scripts/cxui.nativeMask.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "e70ce5e6-573a-4fab-ad1c-dace0edc0024",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

cx3-demo/assets/cx/scripts/cxui.page.ts

@@ -0,0 +1,71 @@
+
+import {_decorator, Component, Node, EventTouch, Tween, tween} from 'cc';
+const {ccclass} = _decorator;
+
+@ccclass('cxui.page')
+class CxuiPage extends Component 
+{
+	onLoad () 
+	{
+		cx.makeNodeMap(this.node);
+		this.node.on(Node.EventType.TOUCH_START, (event: EventTouch) =>
+		{
+			event.propagationStopped = true;
+		});
+	}
+
+	/* 在page的onLoad事件中可修改以下属性，变更默认的进出动画
+		this.initPx: 初始位置
+		this.initPy: 初始位置
+		this.moveInAction: 进入动画
+		this.nextInAction: 进入时，上一页面的动画
+		this.moveOutAction: 关闭动画
+		this.nextOutAction: 关闭时，上一页面的动画
+	*/
+	public initPx?: number;
+	public initPy?: number;
+	public moveInAction?: Tween<any>;
+	public nextInAction?: Tween<any>;
+	public moveOutAction?: Tween<any>;
+	public nextOutAction?: Tween<any>;
+	runActionShow ()
+	{
+		if (cx.os.android)
+			this.node.androidBackHandler = "closePage";
+		if (cx.config.pageActionDisabled || this.node.pageActionDisabled)
+			return;
+		var x = this.initPx != undefined ? this.initPx : cx.defaultInitPx;
+		var y = this.initPy != undefined ? this.initPy : cx.defaultInitPy;
+		this.node.setPosition(x, y);
+		tween(this.node).then(this.moveInAction || cx.defaultMoveInAction).start();
+		
+		var priorPage = cx.getTopPage(-1);
+		if (priorPage)
+		{
+			tween(priorPage).then(this.nextInAction || cx.defaultNextInAction).start();
+			var priorMask: any = priorPage.getComponent("cxui.nativeMask");
+			if (priorMask)
+				priorMask.setMonitorNode(this.node);
+		}
+	}
+
+	runActionClose ()
+	{
+		var priorPage = cx.getTopPage(-1);
+		if (priorPage && priorPage.mainComponent && priorPage.mainComponent.onChildPageClosed)
+			priorPage.mainComponent.onChildPageClosed.call(priorPage.mainComponent, this.node.mainComponent);
+		if (cx.config.pageActionDisabled || this.node.pageActionDisabled)
+		{
+			this.node.destroy();
+			return;
+		}
+		tween(this.node).then(this.moveOutAction || cx.defaultMoveOutAction).call(()=>{this.node.destroy();}).start();
+		if (priorPage)
+		{
+			tween(priorPage).then(this.nextOutAction || cx.defaultNextOutAction).start();
+			// var priorMask = priorPage.getComponent("cxui.nativeMask");
+			// if (priorMask)
+			// 	priorMask.setMonitorNode();
+		}
+	}
+}

cx3-demo/assets/cx/scripts/cxui.page.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "ad451481-a8b8-4d3a-9f12-4a138481898b",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

cx3-demo/assets/cx/scripts/cxui.pageView.ts

@@ -0,0 +1,106 @@
+
+import {_decorator, Component, Node, PageView, EventTouch} from 'cc';
+const {ccclass} = _decorator;
+
+@ccclass('cxui.pageView')
+class CxuiPageView extends Component 
+{
+	page!: Component;
+	pageView!: PageView;
+	loop: boolean = false;
+	callback?: Function;
+	slideEventDisabled?: boolean;
+	autoScrollDisabled: number = 0;
+	cancelClickCallback!: boolean;
+
+	//添加自动滚动及循环滚动能力
+	//autoScrollSeconds: 自动滚动间隔秒
+	//loop: 是否循环滚动
+	initAutoScroll (page: Component, viewName: string, autoScrollSeconds: number, loop: boolean, callback?: Function)
+	{
+		var view: Node = cx.gn(page, viewName);
+		this.page = page;
+		this.pageView = view.getComponent(PageView)!;
+		this.loop = loop;
+		this.callback = callback;
+		
+		if (autoScrollSeconds > 0)
+		{
+			this.schedule(this.autoScroll, autoScrollSeconds);
+			view.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
+			view.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
+			view.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
+			view.on(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
+		}
+
+		if (loop)
+		{
+			view.on(PageView.EventType.SCROLL_ENDED, this.onScrollEnded, this);
+		}
+		
+		this.slideEventDisabled = this.node.slideEventDisabled;
+	}
+
+	onTouchStart (event: EventTouch)
+	{
+		this.autoScrollDisabled = 2;
+		this.node.slideEventDisabled = true;
+		this.cancelClickCallback = false;
+	}
+
+	onTouchMove (event: EventTouch)
+	{
+		this.cancelClickCallback = this.cancelClickCallback || (Math.abs(event.getLocation().x - event.getStartLocation().x) > 15 || Math.abs(event.getLocation().y - event.getStartLocation().y) > 15);
+	}
+
+	onTouchEnd ()
+	{
+		this.onTouchCancel();
+		!this.cancelClickCallback && this.callback && this.callback.call(this.page, this.pageView.getPages()[this.pageView.getCurrentPageIndex()]);
+	}
+
+	onTouchCancel ()
+	{
+		this.autoScrollDisabled = 1; //有操作干扰，忽略一次自动滚动
+		this.node.slideEventDisabled = this.slideEventDisabled;
+	}
+
+	autoScroll ()
+	{
+		if (this.autoScrollDisabled)
+		{
+			if (this.autoScrollDisabled == 1)
+				this.autoScrollDisabled = 0;
+			return;
+		}
+			
+		var pages = this.pageView.getPages();
+		if (pages.length > 1)
+		{
+			var currentIndex = this.pageView.getCurrentPageIndex();
+			if (currentIndex < pages.length - 1)
+				this.pageView.scrollToPage(currentIndex + 1, 1.5);
+		}
+	}
+
+	onScrollEnded ()
+	{
+		var pages = this.pageView.getPages();
+		var currentIndex = this.pageView.getCurrentPageIndex();
+		if (currentIndex == pages.length - 1)
+		{
+			var first = pages[0];
+			this.pageView.removePage(first);
+			this.pageView.addPage(first);
+		}
+		else if (currentIndex == 0)
+		{
+			var last = pages[pages.length - 1];
+			last.active = false;
+			this.pageView.removePage(last);
+			this.pageView.insertPage(last, 0);
+			this.pageView.scrollToPage(1, 0);
+			last.active = true;
+		}
+	}
+}

cx3-demo/assets/cx/scripts/cxui.pageView.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "dae97eb7-eaab-4ae6-936c-ca644ba3152c",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

cx3-demo/assets/cx/scripts/cxui.safearea.ts

@@ -0,0 +1,38 @@
+
+import {_decorator, Component, Widget, UITransform, CCInteger} from 'cc';
+const {ccclass, property} = _decorator;
+
+@ccclass('cxui.safearea')
+class CxuiSafearea extends Component 
+{
+	@property
+	private safeHeight = 170;
+
+	@property
+	private safeWidgetTop = 0;
+
+	@property
+	private safeWidgetBottom = 0;
+
+	onLoad ()
+	{
+		if (cx.os.native && !cx.os.android && cx.sh/cx.sw > 1.8)
+		{
+			if (this.safeHeight)
+			{
+				var uiTransform = this.node.getComponent(UITransform);
+				uiTransform?.setContentSize(uiTransform.width, this.safeHeight);
+			}
+
+			if (this.safeWidgetTop || this.safeWidgetBottom)
+			{
+				var widget = this.node.getComponent(Widget);
+				if (widget)
+				{
+					widget.top = this.safeWidgetTop;
+					widget.bottom = this.safeWidgetBottom;
+				}
+			}
+		}
+	}
+}

cx3-demo/assets/cx/scripts/cxui.safearea.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "de62e376-60c0-4f13-9de6-89796aaf27c1",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

cx3-demo/assets/cx/scripts/cxui.scrollView.ts

@@ -0,0 +1,131 @@
+
+import {_decorator, Component, Node, ScrollView, UITransform, Sprite, tween, v3} from 'cc';
+const {ccclass} = _decorator;
+
+@ccclass('cxui.scrollView')
+class CxuiScrollView extends Component 
+{
+	page!: Component;
+	view!: Node;
+	queryHandler?: Function;
+	emptyNode!: Node;
+
+	refreshPage!: Component;
+	refreshView!: Node;
+	refreshScrollView!: ScrollView;
+	refreshHandler?: Function;
+	refreshNode!: Node;
+	inRefresh: boolean = false;
+	waitRefresh: boolean = false;
+
+	//添加增量加载数据功能
+	initDeltaInsert (page: Component, viewName: string, queryHandler: Function)
+	{
+		this.page = page;
+		this.view = cx.gn(page, viewName);
+		this.queryHandler = queryHandler;
+		
+		this.view.on("scrolling", this.viewScrolling, this);
+
+		this.emptyNode = new Node();
+		this.emptyNode.addComponent(UITransform).height = this.view.getComponent(UITransform)!.height/2;
+		this.emptyNode.active = false;
+		var scrollView: ScrollView = this.view.getComponent(ScrollView)!;
+		scrollView.content!.addChild(this.emptyNode);
+		this.emptyNode.setSiblingIndex(1000000);
+		return this;
+	}
+
+	overDeltaInsert (noMoreData: boolean)
+	{
+		if (!this.page)
+			return;
+		this.emptyNode.active = false;
+		if (noMoreData)
+			this.view.off("scrolling", this.viewScrolling, this);
+	}
+
+	viewScrolling (view: ScrollView)
+	{
+		if (!this.emptyNode.active && view.node.getHeight()/2 < view.content!.getPosition().y && 
+			view.content!.getHeight()/2 - view.content!.getPosition().y < view.node.getHeight()/2)
+        {
+            this.emptyNode.active = true;
+            this.queryHandler && this.queryHandler.call(this.page);
+		}
+	}
+
+	//添加下拉刷新功能
+	initDropRefresh (page: Component, viewName: string, refreshHandler: Function)
+	{
+		this.refreshPage = page;
+		this.refreshView = cx.gn(page, viewName);
+		this.refreshScrollView = this.refreshView.getComponent(ScrollView) as ScrollView;
+		this.refreshHandler = refreshHandler;
+
+		this.refreshView.on("scrolling", this.viewRefreshScrolling, this);
+		this.refreshView.on("touch-up", this.viewRefreshTouchUp, this);
+
+		var refreshNode = new Node();
+		refreshNode.addComponent(UITransform);
+		refreshNode.setPosition(0, this.refreshView.getComponent(UITransform)!.height*2);
+
+		var labelNode: Node = cx.createLabelNode("下拉刷新", 28, "777777");
+		refreshNode.addChild(labelNode);
+		refreshNode.pro().labelNode = labelNode;
+
+		var imageNode = new Node();
+		cx.res.setImageFromBundle(imageNode, "cx.prefab/s_loading", Sprite.SizeMode.TRIMMED);
+		imageNode.setScale(0.6, 0.6);
+		refreshNode.addChild(imageNode);
+		refreshNode.pro().imageNode = imageNode;
+
+		this.refreshNode = refreshNode;
+		this.refreshScrollView.content!.parent!.addChild(refreshNode);
+		this.refreshNode.setSiblingIndex(-1000000);
+		return this;
+	}
+
+	viewRefreshScrolling (view: ScrollView)
+	{
+		if (this.inRefresh || view.node.getHeight()/2 <= view.content!.getPosition().y)
+			return;
+
+		var delta = view.node.getHeight()/2 - view.content!.getPosition().y;
+		this.waitRefresh = delta > 150;
+		this.refreshNode.setPosition(0, view.content!.getPosition().y + 60);
+		this.refreshNode.pro().imageNode.active = this.inRefresh || delta > 150;
+		this.refreshNode.pro().labelNode.active = !this.refreshNode.pro().imageNode.active;
+	}
+
+	viewRefreshTouchUp (view: ScrollView)
+	{
+		if (this.waitRefresh)
+		{
+			view.cx_refreshTopGap = 120;
+			this.inRefresh = true;
+			this.waitRefresh = false;
+			view.node.pauseSystemEvents(true);
+			tween(this.refreshNode).to(0.1, {position:v3(0, view.node.getHeight()/2-60)}).delay(0.1).call(()=>
+			{
+				this.refreshHandler && this.refreshHandler.call(this.refreshPage);
+			}).start();
+			if (this.refreshNode.pro().loadingTween)
+				this.refreshNode.pro().loadingTween.start();
+			else
+				this.refreshNode.pro().loadingTween = tween(this.refreshNode.pro().imageNode).repeatForever(tween().by(0, {angle:-30}).delay(0.07)).start();
+		}
+	}
+
+	overDropRefresh ()
+	{
+		if (!this.inRefresh)
+			return;
+		this.inRefresh = false;
+		this.refreshScrollView.cx_refreshTopGap = 0;
+		this.refreshScrollView.startAutoScroll(v3(0,120,0), 0.5, true);
+		this.refreshView.resumeSystemEvents(true);
+		this.refreshNode.pro().loadingTween.stop();
+		this.refreshNode.pro().imageNode.angle = 0;
+	}
+}

cx3-demo/assets/cx/scripts/cxui.scrollView.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "a1949e42-d9be-4b29-b399-a81b156b6916",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}