@cc-component/cc-ex-component 1.4.2 → 1.4.3

package/assets/core/ReferenceComponent.ts

@@ -225,19 +225,19 @@ export class ReferenceComponent extends Component {
             let name = key[0].toLowerCase() + key.substring(1);
             const type = this.getPropertyType(data.com)
             let bind_pix = `@Bind`
-            let event = `,{ event: (self:${className}) => { } }`
+            let event = `,{ event: (this:${className}) => { } }`
             if (type === "YXCollectionView") {
                 event = `, {
-        layout: (self:${className}) => {
+        layout: (this:${className}) => {
             const layout = new YXFlowLayout();
             layout.horizontalSpacing = 10;
             layout.verticalSpacing = 20;
             layout.itemSize = () => math.size(100, 100);
             return layout;
         },
-        cellForItemAt: (self:${className}, indexPath, collectionView) => {
+        cellForItemAt: (this:${className}, indexPath, collectionView) => {
             const node = collectionView.dequeueReusableCell("cell", indexPath);
-            //node.getComponent(TableVIewItem).refreshUI(self.viewModel.${name}[indexPath.row])
+            //node.getComponent(TableVIewItem).refreshUI(this.viewModel.${name}[indexPath.row])
             return node;
         },
     }`
@@ -246,9 +246,9 @@ export class ReferenceComponent extends Component {
             } else if (type === "TableView") {
                 event = `, {
         itemSize: () => math.size(100, 100),
-        cellForItemAt: (self:${className}, indexPath, collectionView) => {
+        cellForItemAt: (this:${className}, indexPath, collectionView) => {
             const node = collectionView.dequeueReusableCell("cell", indexPath)
-            //node.getComponent(TableVIewItem).refreshUI(self.viewModel.${name}[indexPath.row])
+            //node.getComponent(TableVIewItem).refreshUI(this.viewModel.${name}[indexPath.row])
             return node
         },
     }`
@@ -432,7 +432,7 @@ export class ${className} extends ViewModel(${this.baseWindowName}) {${sx.text}\
         const typeMap: Record<string, string> = {
             'Label': 'string',
             'RichText': 'string',
-            'Sprite': 'SpriteFrame',
+            'Sprite': 'SpriteFrame | { bundle: string, path: string }',
             'Button': 'boolean',          // Button 通常绑定激活状态（true/false）
             'ProgressBar': 'number',      // 进度条应为 number (0~1)
             'Skeleton': 'sp.SkeletonData',

package/assets/core/ViewModel.ts

@@ -17,6 +17,7 @@ import { math } from 'cc';
 import { YXCollectionView, YXIndexPath } from '../lib/collectView/lib_collect/yx-collection-view';
 import { EventTouch } from 'cc';
 import { YXPagelayout } from '../lib/collectView/lib_collect/yx-page-layout';
+import { SpriteFrame } from 'cc';
 
 interface IBindingData extends ITableViewEvents, IBindingDataEvents {
     dataPath: string;
@@ -28,32 +29,35 @@ interface IBindingData extends ITableViewEvents, IBindingDataEvents {
 
 
 interface IBindingDataEvents {
-    reset?: (self: any, value: any, com: Component) => void;
-    event?: (self: any) => void;
-    touchStart?: (self: any, event: EventTouch) => void;
-    touchMove?: (self: any, event: EventTouch) => void;
-    touchEnd?: (self: any, event: EventTouch) => void;
-    touchCancel?: (self: any, event: EventTouch) => void;
+    reset?: (this: any, value: any, com: Component) => void;
+    event?: (this: any) => void;
+    /**动态加载spine的 sp.SkeletonData完成 */
+    spineFinish?: (this: any) => void;
+    touchStart?: (this: any, event: EventTouch) => void;
+    touchMove?: (this: any, event: EventTouch) => void;
+    touchEnd?: (this: any, event: EventTouch) => void;
+    touchCancel?: (this: any, event: EventTouch) => void;
+
 }
 
 
 interface ITableViewEvents {
     /**列表相关 */
-    itemSize: (self: any) => Size,
-    cellForItemAt: (self: any, indexPath: IIndexPath, collectionView: ListView) => Node,
-    onTouchCellAt?: (self: any, indexPath: IIndexPath) => void
-    numberOfItems?: (self: any) => number;
-    moveFinish?: (self: any, indexPath: IIndexPath) => void
+    itemSize: (this: any) => Size,
+    cellForItemAt: (this: any, indexPath: IIndexPath, collectionView: ListView) => Node,
+    onTouchCellAt?: (this: any, indexPath: YXIndexPath) => void
+    numberOfItems?: (this: any) => number;
+    moveFinish?: (this: any, indexPath: IIndexPath) => void
 
 }
 
 interface ICollectViewEvents {
     /**列表相关 */
-    layout: (self: any) => YXFlowLayout,
-    cellForItemAt: (self: any, indexPath: YXIndexPath, collectionView: YXCollectionView) => Node
-    itemSize?: ((self: any, indexPath: YXIndexPath, layout: YXFlowLayout, collectionView: YXCollectionView) => math.Size),
-    onTouchCellAt?: (self: any, indexPath: YXIndexPath) => void
-    numberOfItems?: ((self: any, section: number, collectionView: YXCollectionView) => number);
+    layout: (this: any) => YXFlowLayout,
+    cellForItemAt: (this: any, indexPath: YXIndexPath, collectionView: YXCollectionView) => Node
+    itemSize?: ((this: any, indexPath: YXIndexPath, layout: YXFlowLayout, collectionView: YXCollectionView) => math.Size),
+    onTouchCellAt?: (this: any, indexPath: YXIndexPath) => void
+    numberOfItems?: ((this: any, section: number, collectionView: YXCollectionView) => number);
 }
 
 // 全局存储绑定关系: { className -> { uiProp: dataPath } }
@@ -135,6 +139,7 @@ export function Bind<T extends Component>(path?: string, param?: IBindingDataEve
             itemSize: null,
             cellForItemAt: null,
             numberOfItems: null,
+            spineFinish: param?.spineFinish,
             touchStart: param?.touchStart,
             touchMove: param?.touchMove,
             touchEnd: param?.touchEnd,
@@ -281,10 +286,12 @@ export function ViewModel<T extends new (...args: any[]) => Component>(Base: T)
 
         protected onLoad(): void {
             super.onLoad()
-            const module = this.config.module;
-            const name = this.config.name.replace('Window', '');
-            const manager: any = (js.getClassByName(`${module}Manager`))
-            manager.Ins[`${name}Data`] = this.viewModel
+            if (this.config) {
+                const module = this.config.module;
+                const name = this.config.name.replace('Window', '');
+                const manager: any = (js.getClassByName(`${module}Manager`))
+                manager.Ins[`${name}Data`] = this.viewModel
+            }
         }
         // 在 withDataBinding 返回的 class 中
         protected onDestroy(): void {
@@ -370,7 +377,7 @@ export function ViewModel<T extends new (...args: any[]) => Component>(Base: T)
                     const btnCall = (btn) => {
                         tempData.value = btn.node.active
                         self.viewModel[sx] = tempData
-                        data.event?.(self)
+                        data.event?.call(self)
                         self[`onClick_${sx}`]?.(btn)
                     }
                     com_btn[touch_click] = btnCall
@@ -381,7 +388,7 @@ export function ViewModel<T extends new (...args: any[]) => Component>(Base: T)
                 if (data.touchStart && !com_btn[touch_start]) {
                     com_btn.node.off(Node.EventType.TOUCH_START, com_btn[touch_start]);
                     const call_start = (btn) => {
-                        data.touchStart?.(self, btn)
+                        data.touchStart?.call(self, btn)
                     }
                     com_btn[touch_start] = call_start
                     com_btn.node.on(Node.EventType.TOUCH_START, com_btn[touch_start]);
@@ -390,7 +397,7 @@ export function ViewModel<T extends new (...args: any[]) => Component>(Base: T)
                 if (data.touchMove && !com_btn[touch_start]) {
                     com_btn.node.off(Node.EventType.TOUCH_MOVE, com_btn[touch_start]);
                     const call_start = (btn) => {
-                        data.touchMove?.(self, btn)
+                        data.touchMove?.call(self, btn)
                     }
                     com_btn[touch_start] = call_start
                     com_btn.node.on(Node.EventType.TOUCH_MOVE, com_btn[touch_start]);
@@ -399,7 +406,7 @@ export function ViewModel<T extends new (...args: any[]) => Component>(Base: T)
                 if (data.touchEnd && !com_btn[touch_start]) {
                     com_btn.node.off(Node.EventType.TOUCH_END, com_btn[touch_start]);
                     const call_start = (btn) => {
-                        data.touchEnd?.(self, btn)
+                        data.touchEnd?.call(self, btn)
                     }
                     com_btn[touch_start] = call_start
                     com_btn.node.on(Node.EventType.TOUCH_END, com_btn[touch_start]);
@@ -408,7 +415,7 @@ export function ViewModel<T extends new (...args: any[]) => Component>(Base: T)
                 if (data.touchCancel && !com_btn[touch_start]) {
                     com_btn.node.off(Node.EventType.TOUCH_CANCEL, com_btn[touch_start]);
                     const call_start = (btn) => {
-                        data.touchCancel?.(self, btn)
+                        data.touchCancel?.call(self, btn)
                     }
                     com_btn[touch_start] = call_start
                     com_btn.node.on(Node.EventType.TOUCH_CANCEL, com_btn[touch_start]);
@@ -425,7 +432,7 @@ export function ViewModel<T extends new (...args: any[]) => Component>(Base: T)
                     const slideCall = (slider) => {
                         tempData.value = slider.progress
                         self.viewModel[sx] = tempData
-                        data.event?.(self)
+                        data.event?.call(self)
                         self[`onClick_${sx}`]?.(slider)
                     }
                     com_btn[touch_click] = slideCall
@@ -443,7 +450,7 @@ export function ViewModel<T extends new (...args: any[]) => Component>(Base: T)
                     const toggleCall = (toggle) => {
                         tempData.value = toggle.isChecked
                         self.viewModel[sx] = tempData
-                        data.event?.(self)
+                        data.event?.call(self)
                         self[`onClick_${sx}`]?.(toggle)
                     }
                     com_btn[touch_click] = toggleCall
@@ -461,7 +468,7 @@ export function ViewModel<T extends new (...args: any[]) => Component>(Base: T)
                     const ebCall = (editbox: EditBox) => {
                         tempData.value = editbox.textLabel.string
                         self.viewModel[sx] = tempData
-                        data.event?.(self)
+                        data.event?.call(self)
                         self[`onClick_${sx}`]?.(editbox)
                     }
                     com_btn[touch_click] = ebCall
@@ -480,14 +487,14 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
     switch (data.type) {
         case 'cc.Label':
             if (data.reset) {
-                data.reset(self, value, com);
+                data.reset.call(self, value, com);
             } else {
                 if (value != undefined && value !== null) (com as Label).string = value?.toString() || '';
             }
             break;
         case 'cc.RichText':
             if (data.reset) {
-                data.reset(self, value, com);
+                data.reset.call(self, value, com);
             } else
                 if (value != undefined && value !== null)
                     (com as RichText).string = value?.toString() || '';
@@ -496,34 +503,59 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
             // 假设 value 是 SpriteFrame 路径或资源
             // 需要额外处理资源加载逻辑
             if (data.reset) {
-                data.reset(self, value, com);
+                data.reset.call(self, value, com);
             } else
-                if (value != undefined && value !== null) (com as Sprite).spriteFrame = value;
+                if (value != undefined && value !== null) {
+                    if (value instanceof SpriteFrame)
+                        (com as Sprite).spriteFrame = value;
+                    else {
+                        const data = ExComponentModule.EmitGetSprite(value)
+                        if (data) (com as Sprite).spriteFrame = data;
+                        else {
+                            ExComponentModule.EmitLoadSprite(value).then(sprite => { if (com && com.isValid) (com as Sprite).spriteFrame = sprite; }).catch(() => { });
+                        }
+                    }
+                }
             break;
         case 'cc.Button':
             const com_btn = (com as Button);
             if (data.reset) {
-                data.reset(self, value, com);
+                data.reset.call(self, value, com);
             } else
                 com_btn.node.active = value ?? true;
             break;
         case 'cc.ProgressBar':
             if (data.reset) {
-                data.reset(self, value, com);
+                data.reset.call(self, value, com);
             } else
                 if (value != undefined && value !== null) (com as ProgressBar).progress = Number(value) || 0;
             break;
-        case 'cc.Skeleton':
+        case 'sp.Skeleton':
             if (data.reset) {
-                data.reset(self, value, com);
+                data.reset.call(self, value, com);
             } else
-                if (value != undefined && value !== null) (com as sp.Skeleton).skeletonData = value
+                if (value != undefined && value !== null)
+                    if (value instanceof sp.SkeletonData)
+                        (com as sp.Skeleton).skeletonData = value
+                    else {
+                        const dataSpine = ExComponentModule.EmitGetSpine(value)
+                        if (dataSpine) {
+                            (com as sp.Skeleton).skeletonData = value;
+                            data.spineFinish.call(self)
+                        }
+                        else {
+                            ExComponentModule.EmitLoadSpine(value).then(sprite => {
+                                if (sprite) { if (com && com.isValid) (com as sp.Skeleton).skeletonData = sprite; }
+                                data.spineFinish.call(self)
+                            }).catch(() => { });
+                        }
+                    }
             break;
         case 'cc.Slider':
             {
                 const com_sld = (com as Slider);
                 if (data.reset) {
-                    data.reset(self, value, com);
+                    data.reset.call(self, value, com);
                 } else
                     if (value != undefined && value !== null) com_sld.progress = Number(value) || 0;
             }
@@ -532,7 +564,7 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
             {
                 const com_tg = (com as Toggle);
                 if (data.reset) {
-                    data.reset(self, value, com);
+                    data.reset.call(self, value, com);
                 } else
                     if (value != undefined && value !== null) com_tg.isChecked = Boolean(value);
             }
@@ -541,7 +573,7 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
             {
                 const com_eb = (com as EditBox);
                 if (data.reset) {
-                    data.reset(self, value, com);
+                    data.reset.call(self, value, com);
                 } else
                     if (value != undefined && value !== null) com_eb.string = value?.toString() || '';
             }
@@ -550,7 +582,7 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
             {
                 const com_tgc = (com as ToggleContainer);
                 if (data.reset) {
-                    data.reset(self, value, com);
+                    data.reset.call(self, value, com);
                 }
                 //事件
                 if (com_tgc.checkEvents.length <= 0) {
@@ -564,7 +596,7 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
                         tempData.skip = true;
                         tempData.value = com_tgc.toggleItems.indexOf(toggle)
                         self.viewModel[sx] = tempData
-                        data.event?.(self)
+                        data.event?.call(self)
                         self[`onClick_${sx}`]?.(toggle)
                     }
                     com_tgc.checkEvents.push(clickEventHandler);
@@ -580,7 +612,7 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
             {
 
                 const com_list = (com as TableView);
-                if (data.reset) { data.reset(self, value, com); }
+                if (data.reset) { data.reset.call(self, value, com); }
 
                 // ✅ 关键：不要缓存 count，而是通过 dataPath 动态取值
                 const getLatestDataLength = () => {
@@ -592,19 +624,19 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
                     com_list.reload()
                 } else {
                     const cellForItemAt = (indexPath: IIndexPath, collectionView: ListView) => {
-                        return data.cellForItemAt(self, indexPath, collectionView);
+                        return data.cellForItemAt.call(self, indexPath, collectionView);
                     }
                     const numberOfItems = () => {
                         return getLatestDataLength()
                     }
                     const itemSize = () => {
-                        return data.itemSize(self)
+                        return data.itemSize.call(self)
                     }
                     const moveFinish = (indexPath: IIndexPath) => {
-                        data.moveFinish?.(self, indexPath)
+                        data.moveFinish?.call(self, indexPath)
                     }
                     const onTouchCellAt = (indexPath: IIndexPath) => {
-                        data.onTouchCellAt?.(self, indexPath)
+                        data.onTouchCellAt?.call(self, indexPath)
                     }
 
                     const classView = { cellForItemAt, numberOfItems, itemSize, moveFinish, onTouchCellAt }
@@ -643,7 +675,7 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
                     // 确定列表内一共需要显示多少条内容
                     //  table_collection.isCenterShow = false;//少于宽度，居中显示
                     table_collection.numberOfItems = () => {
-                        const count = data.numberOfItems ? data.numberOfItems(self) : getLatestDataLength()
+                        const count = data.numberOfItems ? data.numberOfItems.call(self) : getLatestDataLength()
                         if (table_collection.layout instanceof YXPagelayout) {
                             table_collection.layout.dataCount = count
                             return count * 3
@@ -652,13 +684,13 @@ function updateStatus(data: IBindingData, com: Component, value: any, self: any)
                         }
                     }
                     table_collection.cellForItemAt = (indexPath, collectionView) => {
-                        return data.cellForItemAt(self, indexPath, collectionView as any) // 返回这个节点给列表显示
+                        return data.cellForItemAt.call(self, indexPath, collectionView as any) // 返回这个节点给列表显示
                     }
 
                     table_collection.onTouchCellAt = (indexPath, collectionView) => {
                         // 通过 getVisibleNode 获取到点击的节点
                         //const cell = collectionView.getVisibleCellNode(indexPath)
-                        data.onTouchCellAt?.(self, indexPath)
+                        data.onTouchCellAt?.call(self, indexPath)
                     }
                     table_collection.onCellDisplay = (cell, indexPath) => { }
                     table_collection.onCellEndDisplay = (cell, indexPath) => { }
@@ -687,3 +719,4 @@ export function Ref(target: any, propertyKey: string) {
     const refList = refMap.get(target)
     refList.push(propertyKey)
 }
+

package/assets/interface/ExComponentModule.ts

@@ -1,3 +1,5 @@
+import { sp } from "cc";
+import { SpriteFrame } from "cc";
 import { Button } from "cc";
 
 
@@ -11,6 +13,9 @@ export class ExComponentModule {
     }
 
     param: { click: (comp: Button) => void }
+    paramSprite: { loadSprite: (param: { bundle: string, path: string }) => Promise<SpriteFrame>, getSprite: (param: { bundle: string, path: string }) => SpriteFrame }
+    paramSpine: { loadSpine: (param: { bundle: string, path: string }) => Promise<sp.SkeletonData>, getSpine: (param: { bundle: string, path: string }) => sp.SkeletonData }
+
     ResetBaseWindow: string = "BaseWindow";
     static Init() {
 
@@ -19,16 +24,38 @@ export class ExComponentModule {
     static OnButtonClick(param: { click: (comp: Button) => void }) {
         ExComponentModule.Ins.param = param
     }
-    static Emit(btn: Button) {
-        ExComponentModule.Ins.param.click(btn)
-    }
+
 
     static ResetBaseWindow(name?: string, isGet?: boolean) {
         if (!isGet) ExComponentModule.Ins.ResetBaseWindow = name
         return ExComponentModule.Ins.ResetBaseWindow
     }
 
+    static OnLoadSprite(param: { loadSprite: (param: { bundle: string, path: string }) => Promise<SpriteFrame>, getSprite: (param: { bundle: string, path: string }) => SpriteFrame }) {
+        ExComponentModule.Ins.paramSprite = param
+    }
+    static OnLoadSpine(param: { loadSpine: (param: { bundle: string, path: string }) => Promise<sp.SkeletonData>, getSpine: (param: { bundle: string, path: string }) => sp.SkeletonData }) {
+        ExComponentModule.Ins.paramSpine = param
+    }
 
+
+    static Emit(btn: Button) {
+        ExComponentModule.Ins.param.click(btn)
+    }
+
+    static async EmitLoadSprite(param: any): Promise<SpriteFrame> {
+        return ExComponentModule.Ins.paramSprite.loadSprite(param)
+    }
+    static EmitGetSprite(param: any): SpriteFrame {
+        return ExComponentModule.Ins.paramSprite.getSprite(param)
+    }
+
+    static async EmitLoadSpine(param: any): Promise<sp.SkeletonData> {
+        return ExComponentModule.Ins.paramSpine.loadSpine(param)
+    }
+    static EmitGetSpine(param: any): sp.SkeletonData {
+        return ExComponentModule.Ins.paramSpine.getSpine(param)
+    }
 }
 window.ExComponentModule = ExComponentModule;
 

package/assets/interface/Interface.ts

@@ -1,3 +1,6 @@
+import { SpriteFrame } from "cc";
+import { sp } from "cc";
+import { Sprite } from "cc";
 import { Button } from "cc";
 declare global {
     namespace ExComponentModule {
@@ -5,9 +8,18 @@ declare global {
         function Init();
         /**监听所有按钮的点击事件 */
         function OnButtonClick(param: { click: (comp: Button) => void });
+        /**监听加载图片 */
+        function OnLoadSprite(param: { loadSprite: (param: { bundle: string, path: string }) => Promise<SpriteFrame>, getSprite: (param: { bundle: string, path: string }) => SpriteFrame });
+        function OnLoadSpine(param: { loadSpine: (param: { bundle: string, path: string }) => Promise<sp.SkeletonData>, getSpine: (param: { bundle: string, path: string }) => sp.SkeletonData });
+        /**重置基础窗口 */
         function ResetBaseWindow(name?: string, isGet?: boolean);
         /**组件：内部使用方法 */
         function Emit(btn: Button);
 
+        //#region  组件：内部使用方法----------------
+        function EmitLoadSprite(param: any): Promise<SpriteFrame>;
+        function EmitGetSprite(param: any): SpriteFrame;
+        function EmitLoadSpine(param: any): Promise<sp.SkeletonData>;
+        function EmitGetSpine(param: any): sp.SkeletonData;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cc-component/cc-ex-component",
-    "version": "1.4.2",
+    "version": "1.4.3",
     "engine": ">=3.8.6",
     "description": "系统组件添加常用扩展方法",
     "main": "index.ts",