@cc-component/cc-ex-component 1.1.6 → 1.1.7

package/assets/core/ViewModel.ts

@@ -0,0 +1,542 @@
+// assets/cc-ex-component/core/DataBinding.ts
+import { Label } from 'cc';
+import { sp } from 'cc';
+import { Sprite } from 'cc';
+import { ToggleContainer } from 'cc';
+import { Size } from 'cc';
+import { EventHandler } from 'cc';
+import { EditBox, Toggle, Slider, Button, ProgressBar, Node } from 'cc';
+import { RichText } from 'cc';
+import { Component } from 'cc';
+import { js } from 'cc';
+import { escape } from 'querystring';
+import { IIndexPath } from '../lib/tableView/IListView';
+import { ListView } from '../lib/tableView/ListView';
+import { TableView } from '../lib/tableView/TableView';
+import { YXFlowLayout } from '../lib/collectView/lib_collect/yx-flow-layout';
+import { math } from 'cc';
+import { YXCollectionView, YXIndexPath } from '../lib/collectView/lib_collect/yx-collection-view';
+
+interface IBindingData extends ITableViewEvents, IBindingDataEvents {
+    dataPath: string;
+    type: any;
+    // 允许任意额外属性
+    [key: string]: any;
+}
+
+
+interface IBindingDataEvents {
+    reset?: Function;
+    event?: Function;
+}
+
+
+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
+
+}
+
+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);
+}
+
+// 全局存储绑定关系: { className -> { uiProp: dataPath } }
+const bindingMap = new Map<string, Map<string, IBindingData>>();
+const baseData = 'viewModel'
+const skip = "$"
+// const comType = {
+//     "cc.Sprite": typeof Sprite,
+//     "cc.Label": Label,
+//     "cc.RichText": RichText,
+//     "cc.Skeleton": sp.Skeleton,
+
+//     "cc.EditBox": EditBox,
+//     "cc.ProgressBar": ProgressBar,
+
+//     "cc.Slider": Slider,
+//     "cc.Toggle": Toggle,
+//     "cc.Button": Button,
+// }
+
+/**
+ * 数据绑定装饰器
+ * @param dataPath 数据路径（如 "data.name"）
+ * @param reset 重写赋值方法，自定义实现. 参数：(self 组件所在的父类，com 组件，value 值)          
+ * @param event 点击事件，滑动事件，等等. 参数：(self 组件所在的父类)
+ */
+export function Bind<T extends Component>(dataPath: string, param?: IBindingDataEvents) {
+    dataPath = baseData + '.' + dataPath;
+    return function (target: any, propertyKey: string) {
+        const className = js.getClassName(target.constructor);
+        if (!bindingMap.has(className)) {
+            bindingMap.set(className, new Map());
+        }
+        const data: IBindingData = {
+            dataPath: dataPath, type: null, reset: param?.reset, event: param?.event,
+            itemSize: null,
+            cellForItemAt: null,
+            numberOfItems: function (): number {
+                throw new Error('Function not implemented.');
+            }
+        }
+
+        bindingMap.get(className)!.set(propertyKey, data);
+        // 重写 onLoad 以初始化绑定
+        const originalOnLoad = target.constructor.prototype.onLoad;
+        target.constructor.prototype.onLoad = function () {
+            originalOnLoad?.call(this);
+            const com = this[propertyKey];
+            const classname = js.getClassName(com)
+            data.type = classname;
+            bindingMap.get(className)!.set(propertyKey, data);
+            // 初始化 UI
+            const value = this._getNestedValue(this, dataPath);
+            if (com) {
+                updateStatus(data, com, value, this)
+            }
+
+            // 记录绑定关系到实例
+            if (!this._bindings) this._bindings = [];
+            this._bindings.push({ uiProp: propertyKey, dataPath });
+        };
+    };
+}
+
+export function BindTable<T extends Component>(dataPath: string, param?: ITableViewEvents) {
+    dataPath = baseData + '.' + dataPath;
+    return function (target: any, propertyKey: string) {
+        const className = js.getClassName(target.constructor);
+        if (!bindingMap.has(className)) {
+            bindingMap.set(className, new Map());
+        }
+        const data: IBindingData = {
+            dataPath: dataPath, type: null,
+            itemSize: param.itemSize,
+            cellForItemAt: param.cellForItemAt,
+            numberOfItems: param.numberOfItems,
+            onTouchCellAt: param.onTouchCellAt,
+            moveFinish: param.moveFinish,
+        }
+
+        bindingMap.get(className)!.set(propertyKey, data);
+        // 重写 onLoad 以初始化绑定
+        const originalOnLoad = target.constructor.prototype.onLoad;
+        target.constructor.prototype.onLoad = function () {
+            originalOnLoad?.call(this);
+            const com = this[propertyKey];
+            const classname = js.getClassName(com)
+            data.type = classname;
+            bindingMap.get(className)!.set(propertyKey, data);
+            // 初始化 UI
+            const value = this._getNestedValue(this, dataPath);
+            if (com) {
+                updateStatus(data, com, value, this)
+            }
+
+            // 记录绑定关系到实例
+            if (!this._bindings) this._bindings = [];
+            this._bindings.push({ uiProp: propertyKey, dataPath });
+        };
+    };
+}
+
+export function BindCollect<T extends Component>(dataPath: string, param?: ICollectViewEvents) {
+    dataPath = baseData + '.' + dataPath;
+    return function (target: any, propertyKey: string) {
+        const className = js.getClassName(target.constructor);
+        if (!bindingMap.has(className)) {
+            bindingMap.set(className, new Map());
+        }
+
+        const data: IBindingData = {
+            dataPath: dataPath, type: null,
+            layout: param.layout,
+            cellForItemAt: param.cellForItemAt as any,
+            numberOfItems: param.numberOfItems as any,
+            itemSize: param.itemSize as any,
+            onTouchCellAt: param.onTouchCellAt,
+        }
+
+        // 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);
+        bindingMap.get(className)!.set(propertyKey, data);
+        // 重写 onLoad 以初始化绑定
+        const originalOnLoad = target.constructor.prototype.onLoad;
+        target.constructor.prototype.onLoad = function () {
+            originalOnLoad?.call(this);
+            const com = this[propertyKey];
+            const classname = js.getClassName(com)
+            data.type = classname;
+            bindingMap.get(className)!.set(propertyKey, data);
+            // 初始化 UI
+            const value = this._getNestedValue(this, dataPath);
+            if (com) {
+                updateStatus(data, com, value, this)
+            }
+
+            // 记录绑定关系到实例
+            if (!this._bindings) this._bindings = [];
+            this._bindings.push({ uiProp: propertyKey, dataPath });
+        };
+    };
+}
+/**
+ * 响应式绑定 Mixin（混入方法）
+ */
+export function ViewModel<T extends new (...args: any[]) => Component>(Base: T) {
+    return class extends Base {
+        // 绑定关系存储
+        _bindings: { uiProp: string; dataPath: string }[] = [];
+        viewModel: any
+
+        // 创建响应式数据
+        _makeReactive<T extends object>(obj: T, pathPrefix: string): T {
+            const self = this as any;
+            return new Proxy(obj, {
+                get(target, key: string) {
+                    // ✅ 跳过 $ 开头的属性：直接返回原始值，不代理
+                    if (key.startsWith(skip)) {
+                        return target[key];
+                    }
+                    const value = target[key];
+                    //暂时不循环找对象
+                    // if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+                    //     console.log(`get ${pathPrefix}----${key}`);
+                    //     return self._makeReactive(value, `${pathPrefix}.${key}`);
+                    // }
+                    return value;
+                },
+                set(target, key: string, value: any) {
+
+                    // ✅ 跳过 $ 开头的属性：不触发响应式更新
+                    if (key.startsWith(skip)) {
+                        target[key] = value;
+                        return true;
+                    }
+                    else if (value?.skip) {
+                        target[key] = value.value;
+                        return true;
+                    }
+                    const fullPath = `${pathPrefix}.${key}`;
+                    target[key] = value;
+                    self._onDataChange?.(fullPath, value);
+                    return true;
+                }
+            });
+        }
+
+        // 获取嵌套值
+        _getNestedValue(obj: any, path: string) {
+            return path.split('.').reduce((current, key) => current?.[key], obj);
+        }
+
+        // 数据变化回调（可被子类 override）
+        _onDataChange(fullPath: string, newValue: any) {
+            if (!this._bindings) return;
+            this._bindings.forEach(({ uiProp, dataPath }) => {
+                if (fullPath === dataPath) {
+                    const com = this[uiProp]
+                    if (com) {
+                        const classname = js.getClassName(this)
+                        const data = bindingMap.get(classname).get(uiProp)
+                        const value = this._getNestedValue(this, data.dataPath);
+                        updateStatus(data, com, value, this)
+                    }
+                }
+            });
+        }
+
+        /** 解除当前组件的所有数据绑定 */
+        public unbindViewModel(): void {
+            // 1. 清空绑定关系（停止 _onDataChange 触发 UI 更新）
+            this._bindings = [];
+            // 2. 替换 data 为普通对象（破坏 Proxy 响应式）
+            this.viewModel = null
+
+        }
+
+        // 在 withDataBinding 返回的 class 中
+        protected onDestroy(): void {
+            this.unbindViewModel();
+            super.onDestroy?.();
+        }
+
+
+    };
+}
+
+function updateStatus(data: IBindingData, com: Component, value: any, self: any) {
+
+    const sx = data.dataPath.split('.').pop();
+    const tempData = { value: value, skip: false }
+    switch (data.type) {
+        case 'cc.Label':
+            if (data.reset) {
+                data.reset(self, value, com);
+            } else {
+                if (value) (com as Label).string = value?.toString() || '';
+            }
+            break;
+        case 'cc.RichText':
+            if (data.reset) {
+                data.reset(self, value, com);
+            } else
+                if (value)
+                    (com as RichText).string = value?.toString() || '';
+            break;
+        case 'cc.Sprite':
+            // 假设 value 是 SpriteFrame 路径或资源
+            // 需要额外处理资源加载逻辑
+            if (data.reset) {
+                data.reset(self, value, com);
+            } else
+                if (value) (com as Sprite).spriteFrame = value;
+            break;
+        case 'cc.Button':
+            const com_btn = (com as Button);
+            if (data.reset) {
+                data.reset(self, value, com);
+            } else
+                com_btn.node.active = value ?? true;
+
+            //事件
+            com_btn.node.off(Button.EventType.CLICK, com_btn['btnCall'], self);
+            tempData.skip = true;
+            const btnCall = (btn) => {
+                tempData.value = btn.node.active
+                self.viewModel[sx] = tempData
+                data.event?.(self)
+            }
+            com_btn['btnCall'] = btnCall
+            com_btn.node.on(Button.EventType.CLICK, com_btn['btnCall'], self);
+            break;
+        case 'cc.ProgressBar':
+            if (data.reset) {
+                data.reset(self, value, com);
+            } else
+                if (value) (com as ProgressBar).progress = Number(value) || 0;
+            break;
+        case 'cc.Skeleton':
+            if (data.reset) {
+                data.reset(self, value, com);
+            } else
+                if (value) (com as sp.Skeleton).skeletonData = value
+            break;
+        case 'cc.Slider':
+            const com_sld = (com as Slider);
+            if (data.reset) {
+                data.reset(self, value, com);
+            } else
+                if (value) com_sld.progress = Number(value) || 0;
+
+            //事件
+            com_sld.node.off("slide", com_sld['slideCall'], self)
+            tempData.skip = true;
+            const slideCall = (slider) => {
+                tempData.value = slider.progress
+                self.viewModel[sx] = tempData
+                data.event?.(self)
+            }
+            com_sld['slideCall'] = slideCall
+            com_sld.node.on('slide', slideCall, self);
+            break;
+        case 'cc.Toggle':
+            const com_tg = (com as Toggle);
+            if (data.reset) {
+                data.reset(self, value, com);
+            } else
+                if (value) com_tg.isChecked = Boolean(value);
+
+            //事件
+            com_tg.node.off(Toggle.EventType.TOGGLE, com_tg['toggleCall'], self)
+            tempData.skip = true;
+            const toggleCall = (toggle) => {
+                tempData.value = toggle.isChecked
+                self.viewModel[sx] = tempData
+                data.event?.(self)
+            }
+            com_tg['toggleCall'] = toggleCall
+            com_tg.node.on(Toggle.EventType.TOGGLE, toggleCall, self);
+            break;
+        case 'cc.EditBox':
+            const com_eb = (com as EditBox);
+            if (data.reset) {
+                data.reset(self, value, com);
+            } else
+                if (value) com_eb.string = value?.toString() || '';
+
+            //事件
+            com_eb.node.off("text-changed", com_eb['ebCall'], self)
+            tempData.skip = true;
+            const ebCall = (editbox: EditBox) => {
+                tempData.value = editbox.textLabel.string
+                self.viewModel[sx] = tempData
+                data.event?.(self)
+            }
+            com_eb['ebCall'] = ebCall
+            com_eb.node.on('text-changed', ebCall, self);
+            break;
+        case 'cc.ToggleContainer':
+            {
+                const com_tgc = (com as ToggleContainer);
+                if (data.reset) {
+                    data.reset(self, value, com);
+                }
+
+                //事件
+                if (com_tgc.checkEvents.length <= 0) {
+                    const funcName = "onClick_ToggleContainer"
+                    const clickEventHandler = new EventHandler();
+                    clickEventHandler.target = self.node; // 这个 node 节点是你的事件处理代码组件所属的节点
+                    clickEventHandler.component = js.getClassName(self)//delegate.constructor.name;// 这个是脚本类名
+                    clickEventHandler.handler = funcName
+                    self[funcName] = (toggle: Toggle) => {
+                        tempData.skip = true;
+                        tempData.value = com_tgc.toggleItems.indexOf(toggle)
+                        self.viewModel[sx] = tempData
+                        data.event?.(self)
+                    }
+                    com_tgc.checkEvents.push(clickEventHandler);
+                }
+                const tg = com_tgc.toggleItems[value]
+                if (tg)
+                    tg.isChecked = true;
+
+            }
+            break;
+
+        case 'TableView':
+            {
+
+                const com_list = (com as TableView);
+                if (data.reset) { data.reset(self, value, com); }
+
+                // ✅ 关键：不要缓存 count，而是通过 dataPath 动态取值
+                const getLatestDataLength = () => {
+                    const latestValue = self._getNestedValue(self, data.dataPath);
+                    return Array.isArray(latestValue) ? latestValue.length : 0;
+                };
+
+                if (com_list.isInit) {
+                    com_list.reload()
+                } else {
+                    const cellForItemAt = (indexPath: IIndexPath, collectionView: ListView) => {
+                        return data.cellForItemAt(self, indexPath, collectionView);
+                    }
+                    const numberOfItems = () => {
+                        return getLatestDataLength()
+                    }
+                    const itemSize = () => {
+                        return data.itemSize(self)
+                    }
+                    const moveFinish = (indexPath: IIndexPath) => {
+                        data.moveFinish?.(self, indexPath)
+                    }
+                    const onTouchCellAt = (indexPath: IIndexPath) => {
+                        data.onTouchCellAt?.(self, indexPath)
+                    }
+
+                    const classView = { cellForItemAt, numberOfItems, itemSize, moveFinish, onTouchCellAt }
+                    com_list.onLoadFinish(() => {
+                        com_list.init(classView);
+                        com_list.reload()
+                    })
+                }
+            }
+            break;
+
+        case 'YXCollectionView':
+            {
+                const com_list = (com as YXCollectionView);
+                // ✅ 关键：不要缓存 count，而是通过 dataPath 动态取值
+                const getLatestDataLength = () => {
+                    const latestValue = self._getNestedValue(self, data.dataPath);
+                    return Array.isArray(latestValue) ? latestValue.length : 0;
+                };
+                const table_collection = com_list
+
+                if (!table_collection.layout) {
+                    const identifier = 'cell';
+                    // 配置 layout 布局规则
+                    // let layout = new YXFlowLayout()
+                    // const column = 4
+                    // layout.horizontalSpacing = 10
+                    // layout.verticalSpacing = 10
+                    // const width = 100
+                    // const height = 163
+                    // layout.itemSize = math.size(width, height)
+                    table_collection.layout = data.layout()
+                    // 注册列表内需要使用的 cell 节点类型
+                    // 这个演示是通过编辑器绑定的，可以查看场景内 list 节点里的 register cells 配置
+                    // this.table_collection.register('cell', () => instantiate('your cell prefab'))
+                    // 确定列表内一共需要显示多少条内容
+                    //  table_collection.isCenterShow = false;//少于宽度，居中显示
+                    table_collection.numberOfItems = () => getLatestDataLength()
+                    table_collection.cellForItemAt = (indexPath, collectionView) => {
+                        return data.cellForItemAt(self, indexPath, collectionView as any) // 返回这个节点给列表显示
+                    }
+
+                    table_collection.onTouchCellAt = (indexPath, collectionView) => {
+                        // 通过 getVisibleNode 获取到点击的节点
+                        //const cell = collectionView.getVisibleCellNode(indexPath)
+                        data.onTouchCellAt?.(self, indexPath)
+                    }
+                    table_collection.onCellDisplay = (cell, indexPath) => { }
+                    table_collection.onCellEndDisplay = (cell, indexPath) => { }
+                }
+                table_collection.reloadData()
+            }
+            break;
+        default:
+            console.error(`请检查类型: ${data.type}`);
+    }
+
+}
+// assets/cc-ex-component/core/ViewModel.ts
+
+// ... 其他代码 ...
+
+/**
+ * 响应式数据装饰器
+ * 自动将属性转为响应式对象，并使用属性名作为路径前缀
+ */
+export function BindViewModel(initialValue?: any) {
+    return function (target: any, propertyKey: string) {
+        const originalOnLoad = target.constructor.prototype.onLoad;
+        target.constructor.prototype.onLoad = function () {
+            // 获取初始值（支持传入或默认空对象）
+            const initValue = typeof initialValue === 'function'
+                ? initialValue()
+                : (initialValue ?? {});
+            // 创建响应式对象
+            this[propertyKey] = this._makeReactive(initValue, propertyKey);
+            originalOnLoad?.call(this);
+
+        };
+    };
+}
+
+// 定义装饰器
+export function Ref(target: any, propertyKey: string) {
+    const originalOnLoad = target.constructor.prototype.onLoad;
+    target.constructor.prototype.onLoad = function (this: any) {
+        this.initReferenceCollector();
+        this.defineProperty(propertyKey);
+        originalOnLoad?.call(this);
+
+    };
+}
+

package/assets/{video/IVideo.ts.meta → core/ViewModel.ts.meta}

@@ -1,9 +1,9 @@
-{
-  "ver": "4.0.24",
-  "importer": "typescript",
-  "imported": true,
-  "uuid": "f52ed3a4-99e9-4583-a6e7-642a14237b86",
-  "files": [],
-  "subMetas": {},
-  "userData": {}
-}
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "91193c30-a004-4bca-bfc0-45fb594eea0f",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}