MVVM框架兼容3.6.2编辑器预览模式

assets/core/Oops.ts

@@ -19,7 +19,7 @@ import { GameManager } from "./game/GameManager";
 import { LayerManager } from "./gui/layer/LayerManager";
 
 /** 框架版本号 */
-export var version: string = "1.1.2";
+export var version: string = "1.1.3";
 
 /** 框架核心模块访问入口 */
 export class oops {

assets/libs/model-view/JsonOb.ts

@@ -4,11 +4,11 @@
  * @LastEditors: dgflash
  * @LastEditTime: 2022-09-06 17:18:05
  */
+
 /**
  * 实现动态绑定的核心部分，
  * 每次修改属性值，都会调用对应函数，并且获取值的路径
  */
-
 const OP = Object.prototype;
 const types = {
     obj: '[object Object]',

assets/libs/model-view/VMBase.ts

@@ -1,6 +1,7 @@
 import { Component, log, _decorator } from 'cc';
-import { DEBUG, EDITOR } from 'cc/env';
+import { DEBUG } from 'cc/env';
 import { VM } from './ViewModel';
+import { VMEnv } from './VMEnv';
 
 // 用来处理通知数据的层级
 // 控制旗下子节点的数据
@@ -9,13 +10,14 @@ import { VM } from './ViewModel';
 
 const DEBUG_WATCH_PATH: boolean = false;
 
-const { ccclass, property } = _decorator;
+const { ccclass, help } = _decorator;
 
 /**
  * watchPath 的基础，只提供绑定功能 和 对应的数据更新函数
  */
 @ccclass
-export default class VMBase extends Component {
+@help('https://gitee.com/dgflash/oops-framework/blob/master/doc/mvvm/VMBase.md')
+export class VMBase extends Component {
     /**VM管理 */
     VM = VM;
 
@@ -35,7 +37,7 @@ export default class VMBase extends Component {
      * 如果需要重写onLoad 方法，请根据顺序调用 super.onLoad()，执行默认方法
      */
     onLoad() {
-        if (EDITOR) return;
+        if (VMEnv.editor) return;
 
         // 提前拆分、并且解析路径
         let paths = this.watchPath.split('.');
@@ -86,7 +88,8 @@ export default class VMBase extends Component {
     }
 
     onEnable() {
-        if (EDITOR) return;                     // 编辑器模式不能判断
+        if (VMEnv.editor) return;
+
         if (this.templateMode) {
             this.setMultPathEvent(true);
         }
@@ -98,7 +101,8 @@ export default class VMBase extends Component {
     }
 
     onDisable() {
-        if (EDITOR) return;//编辑器模式不能判断
+        if (VMEnv.editor) return;
+
         if (this.templateMode) {
             this.setMultPathEvent(false);
         }
@@ -109,7 +113,8 @@ export default class VMBase extends Component {
 
     // 多路径监听方式
     private setMultPathEvent(enabled: boolean = true) {
-        if (EDITOR) return;
+        if (VMEnv.editor) return;
+
         let arr = this.watchPathArr;
         for (let i = 0; i < arr.length; i++) {
             const path = arr[i];

assets/libs/model-view/VMCompsEdit.ts

@@ -1,5 +1,5 @@
 import { CCString, Component, Enum, log, Node, _decorator } from "cc";
-import { EDITOR } from "cc/env";
+import { VMEnv } from "./VMEnv";
 
 const { ccclass, property, executeInEditMode, menu, help } = _decorator;
 
@@ -17,7 +17,7 @@ enum ACTION_MODE {
 @ccclass
 @executeInEditMode
 @menu('ModelViewer/Edit-Comps (快速组件操作)')
-@help('https://github.com/wsssheep/cocos_creator_mvvm_tools/blob/master/docs/VMCompsEdit.md')
+@help('https://gitee.com/dgflash/oops-framework/blob/master/doc/mvvm/VMCompsEdit.md')
 export default class MVCompsEdit extends Component {
     @property({
         type: [CCString]
@@ -149,11 +149,10 @@ export default class MVCompsEdit extends Component {
     collectNodes: Node[] = [];
 
     onLoad() {
-        //不要把脚本挂载运行时的提示
-        if (!EDITOR) {
-            let path = this.getNodePath(this.node);
-            console.error('you forget delete MVEditFinder,[path]', path);
-        }
+        if (VMEnv.editor) return;
+
+        let path = this.getNodePath(this.node);
+        console.error('you forget delete MVEditFinder,[path]', path);
     }
 
     setComponents(state: number) {
@@ -213,17 +212,16 @@ export default class MVCompsEdit extends Component {
                         }
                     }
                     break;
-                case 1://激活组件
+                case 1:         // 激活组件
                     v.enabled = true;
                     break;
-                case 2://关闭组件
+                case 2:         // 关闭组件
                     v.enabled = false;
                     break;
-                case 3://删除组件
+                case 3:         // 删除组件
                     v.node.removeComponent(v);
                     break;
-                case 4://替换指定路径
-
+                case 4:         // 替换指定路径
                     let targetPath = this.targetPath;
                     let replacePath = this.replacePath;
                     if (v.templateMode === true) {

assets/libs/model-view/VMCustom.ts

@@ -1,6 +1,6 @@
 import { Toggle, _decorator } from 'cc';
-import { EDITOR } from 'cc/env';
-import VMBase from './VMBase';
+import { VMBase } from './VMBase';
+import { VMEnv } from './VMEnv';
 
 const { ccclass, property, executeInEditMode, menu, help } = _decorator;
 
@@ -26,8 +26,8 @@ const COMP_ARRAY_CHECK = [
 @ccclass
 @executeInEditMode
 @menu('ModelViewer/VM-Custom (自定义VM)')
-@help('https://github.com/wsssheep/cocos_creator_mvvm_tools/blob/master/docs/VMCustom.md')
-export default class VMCustom extends VMBase {
+@help('https://gitee.com/dgflash/oops-framework/blob/master/doc/mvvm/VMCustom.md')
+export class VMCustom extends VMBase {
     @property({
         tooltip: '激活controller,以开启双向绑定，否则只能接收消息',
     })
@@ -76,10 +76,11 @@ export default class VMCustom extends VMBase {
 
         // 只在运行时检查组件是否缺失可用
         this.checkEditorComponent();//编辑器检查
-        if (!EDITOR) {
-            this._watchComponent = this.node.getComponent(this.componentName);
-            this.checkComponentState();
-        }
+
+        if (VMEnv.editor) return;
+
+        this._watchComponent = this.node.getComponent(this.componentName);
+        this.checkComponentState();
     }
 
     onRestore() {
@@ -93,18 +94,18 @@ export default class VMCustom extends VMBase {
 
     // 挂在对应节点后，自动获取组件属性和名字
     checkEditorComponent() {
-        if (EDITOR) {
-            let checkArray = COMP_ARRAY_CHECK;
-            for (let i = 0; i < checkArray.length; i++) {
-                const params = checkArray[i];
-                let comp = this.node.getComponent(params[0] as string);
-                if (comp) {
-                    if (this.componentName == '') this.componentName = params[0] as string;
-                    if (this.componentProperty == '') this.componentProperty = params[1] as string;
-                    if (params[2] !== null) this.controller = params[2] as boolean;
+        if (VMEnv.editor) return;
 
-                    break;
-                }
+        let checkArray = COMP_ARRAY_CHECK;
+        for (let i = 0; i < checkArray.length; i++) {
+            const params = checkArray[i];
+            let comp = this.node.getComponent(params[0] as string);
+            if (comp) {
+                if (this.componentName == '') this.componentName = params[0] as string;
+                if (this.componentProperty == '') this.componentProperty = params[1] as string;
+                if (params[2] !== null) this.controller = params[2] as boolean;
+
+                break;
             }
         }
     }
@@ -133,7 +134,8 @@ export default class VMCustom extends VMBase {
 
     /** 初始化获取数据 */
     onValueInit() {
-        if (EDITOR) return; //编辑器模式不初始化
+        if (VMEnv.editor) return;
+
         //更新信息
         this.setComponentValue(this.VM.getValue(this.watchPath));
     }
@@ -150,7 +152,8 @@ export default class VMCustom extends VMBase {
 
     update(dt: number) {
         // 脏检查（组件是否存在，是否被激活）
-        if (EDITOR == true) return;
+        if (VMEnv.editor) return;
+
         //if (this.templateMode == true) return; //todo 模板模式下不能计算  
         if (!this.controller) return;
         if (!this._canWatchComponent || this._watchComponent['enabled'] === false) return;

assets/libs/model-view/VMEnv.ts

@@ -0,0 +1,10 @@
+import { EDITOR } from "cc/env";
+
+/** VM组件环境验证 */
+export class VMEnv {
+    /** 编辑状态 */
+    static get editor() {
+        // @ts-ignore
+        return EDITOR && !cc.GAME_VIEW;
+    }
+}

assets/libs/model-view/VMEnv.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "fdf7243d-d4f7-425e-93d0-fbadacd6e7e2",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/libs/model-view/VMEvent.ts

@@ -1,5 +1,5 @@
 import { CCString, Enum, EventHandler, _decorator } from 'cc';
-import VMBase from './VMBase';
+import { VMBase } from './VMBase';
 
 // +普通 label 更新数据的情况,label.string = xxx;
 // +frameIndex 插件，通过number 数值设置 BhvFrameIndex 来切换当前贴图
@@ -30,7 +30,7 @@ enum FILTER_MODE {
 @ccclass
 @executeInEditMode
 @menu('ModelViewer/VM-EventCall(调用函数)')
-@help('https://github.com/wsssheep/cocos_creator_mvvm_tools/blob/master/docs/VMEvent.md')
+@help('https://gitee.com/dgflash/oops-framework/blob/master/doc/mvvm/VMEvent.md')
 export default class VMEvent extends VMBase {
     @property({
         tooltip: '使用模板模式，可以使用多路径监听'

assets/libs/model-view/VMLabel.ts

@@ -1,7 +1,7 @@
 import { CCString, error, _decorator } from 'cc';
-import { EDITOR } from 'cc/env';
 import { StringFormatFunction } from './StringFormat';
-import VMBase from './VMBase';
+import { VMBase } from './VMBase';
+import { VMEnv } from './VMEnv';
 
 const { ccclass, property, menu, executeInEditMode, help } = _decorator;
 
@@ -20,7 +20,7 @@ const LABEL_TYPE = {
 @ccclass
 @executeInEditMode
 @menu('ModelViewer/VM-Label(文本VM)')
-@help('https://github.com/wsssheep/cocos_creator_mvvm_tools/blob/master/docs/VMLabel.md')
+@help('https://gitee.com/dgflash/oops-framework/blob/master/doc/mvvm/VMLabel.md')
 export default class VMLabel extends VMBase {
     @property({
         tooltip: '是否启用模板代码,只能在运行时之前设置,\n将会动态解析模板语法 {{0}},并且自动设置监听的路径'
@@ -29,6 +29,7 @@ export default class VMLabel extends VMBase {
 
     @property({
         visible() {
+            // @ts-ignore
             return this.templateMode === false;
         }
     })
@@ -42,6 +43,7 @@ export default class VMLabel extends VMBase {
     @property({
         type: [CCString],
         visible() {
+            // @ts-ignore
             return this.templateMode === true;
         }
     })
@@ -64,16 +66,18 @@ export default class VMLabel extends VMBase {
     onLoad() {
         super.onLoad();
         this.checkLabel();
-        if (!EDITOR) {
-            if (this.templateMode) {
-                this.originText = this.getLabelValue();
-                this.parseTemplate();
-            }
+
+        if (VMEnv.editor) return;
+
+        if (this.templateMode) {
+            this.originText = this.getLabelValue();
+            this.parseTemplate();
         }
     }
 
     start() {
-        if (EDITOR) return;
+        if (VMEnv.editor) return;
+
         this.onValueInit();
     }
 

assets/libs/model-view/VMModify.ts

@@ -1,5 +1,5 @@
 import { Enum, _decorator } from 'cc';
-import VMBase from './VMBase';
+import { VMBase } from './VMBase';
 
 const { ccclass, property, menu, help } = _decorator;
 
@@ -17,7 +17,7 @@ enum CLAMP_MODE {
  */
 @ccclass
 @menu('ModelViewer/VM-Modify(修改Model)')
-@help('https://github.com/wsssheep/cocos_creator_mvvm_tools/blob/master/docs/VMModify.md')
+@help('https://gitee.com/dgflash/oops-framework/blob/master/doc/mvvm/VMModify.md')
 export default class VMModify extends VMBase {
     @property({
         tooltip: "监视对象路径"

assets/libs/model-view/VMParent.ts

@@ -13,7 +13,7 @@ const { ccclass, help, executionOrder } = _decorator;
  */
 @ccclass
 @executionOrder(-1)
-@help('https://github.com/wsssheep/cocos_creator_mvvm_tools/blob/master/docs/VMParent.md')
+@help('https://gitee.com/dgflash/oops-framework/blob/master/doc/mvvm/VMParent.md')
 export default class VMParent extends GameComponent {
     /** 绑定的标签，可以通过这个tag 获取 当前的 vm 实例 */
     protected tag: string = '_temp';

assets/libs/model-view/VMProgress.ts

@@ -5,15 +5,15 @@
  * @LastEditTime: 2022-08-11 15:43:34
  */
 import { CCString, _decorator } from "cc";
-import { EDITOR } from "cc/env";
 import { StringFormatFunction } from "./StringFormat";
-import VMCustom from "./VMCustom";
+import { VMCustom } from "./VMCustom";
+import { VMEnv } from "./VMEnv";
 
 const { ccclass, property, menu, help } = _decorator;
 
 @ccclass
 @menu('ModelViewer/VM-Progress (VM-进度条)')
-@help('https://github.com/wsssheep/cocos_creator_mvvm_tools/blob/master/docs/VMProgress.md')
+@help('https://gitee.com/dgflash/oops-framework/blob/master/doc/mvvm/VMProgress.md')
 export default class VMProgress extends VMCustom {
     @property({
         visible: false,
@@ -46,9 +46,9 @@ export default class VMProgress extends VMCustom {
     }
 
     start() {
-        if (!EDITOR) {
-            this.onValueInit();
-        }
+        if (VMEnv.editor) return;
+
+        this.onValueInit();
     }
 
     onValueInit() {

assets/libs/model-view/VMState.ts

@@ -1,6 +1,6 @@
 import { Button, CCInteger, color, Color, Enum, Node, UIRenderer, Sprite, UIOpacity, _decorator } from 'cc';
 import { VM } from './ViewModel';
-import VMBase from './VMBase';
+import { VMBase } from './VMBase';
 
 const { ccclass, property, menu, help } = _decorator;
 

assets/libs/model-view/ui/BhvButtonGroup.ts

@@ -13,7 +13,7 @@ enum PARAM_TYPE {
  */
 @ccclass
 @menu("添加特殊行为/UI/Button Group(一组按钮控制)")
-export default class BhvButtonGroup extends Component {
+export class BhvButtonGroup extends Component {
     @property({
         type: Enum(Button.Transition)
     })

assets/libs/model-view/ui/BhvFrameIndex.ts

@@ -6,7 +6,7 @@ const { ccclass, property, executeInEditMode, requireComponent, menu } = _decora
 @executeInEditMode
 @requireComponent(Sprite)
 @menu("添加特殊行为/UI/Frame Index(帧图改变)")
-export default class BhvFrameIndex extends Component {
+export class BhvFrameIndex extends Component {
     @property({
         type: [SpriteFrame],
         tooltip: 'sprite将会用到帧图片'

assets/libs/model-view/ui/BhvRollNumber.ts

@@ -25,7 +25,7 @@ type CustomCallback = (curValue: number, targetValue: number) => string;
  */
 @ccclass
 @menu("添加特殊行为/UI/Roll Number (滚动数字)")
-export default class BhvRollNumber extends Component {
+export class BhvRollNumber extends Component {
     @property({
         type: Label,
         tooltip: '需要滚动的 Label 组件,如果不进行设置，就会从自己的节点自动查找'

assets/libs/model-view/ui/BhvSwitchPage.ts

@@ -1,12 +1,12 @@
 import { CCInteger, Component, Node, _decorator } from "cc";
-import { EDITOR } from "cc/env";
+import { VMEnv } from "../VMEnv";
 
 const { ccclass, property, executeInEditMode, menu } = _decorator;
 
 @ccclass
 @executeInEditMode
 @menu("添加特殊行为/UI/Switch Page (切换页面)")
-export default class BhvSwitchPage extends Component {
+export class BhvSwitchPage extends Component {
     @property
     isLoopPage: boolean = false;
 
@@ -34,7 +34,7 @@ export default class BhvSwitchPage extends Component {
         this.preIndex = this._index;//标记之前的页面
         this._index = v;
 
-        if (EDITOR) {
+        if (VMEnv.editor) {
             this._updateEditorPage(v);
         }
         else {
@@ -57,7 +57,8 @@ export default class BhvSwitchPage extends Component {
     }
 
     private _updateEditorPage(page: number) {
-        if (!EDITOR) return;
+        if (!VMEnv.editor) return;
+
         let children = this.node.children;
         for (let i = 0; i < children.length; i++) {
             const node = children[i];