取消ObjectItem的设计，实现起来问题太多

2025-04-16 07:01:03 +00:00 · 2025-01-06 14:21:06 +08:00 · 2025-01-06 14:21:06 +08:00 · f633c4fa55
commit f633c4fa55
parent 527327eb14
9 changed files with 117 additions and 124 deletions
--- a/cc-inspector/src/core/types.ts
+++ b/cc-inspector/src/core/types.ts
@ -48,8 +48,7 @@ export interface RequestUseFrameData {
 export type RequestSetPropertyData = Info;
 export type ResponseSetPropertyData = Info;
 export type RequestLogData = string[];
-export type RequestObjectData = ObjectData;
-export type ResponseObjectData = ObjectItemRequestData;
+export type ResponseErrorData = string;
 export enum Msg {
  None = "None",
  /**
@ -84,13 +83,12 @@ export enum Msg {
  ResponseUpdateFrames = "response-update-frames",
  RequestUseFrame = "request-use-frame",

-  RequestObjectItemData = "request-object-item-data",
-  ResponseObjectItemData = "response-object-item-data",
-
  RequestLogData = "request-log-data",

  RequestSetProperty = "request-set-property",
  ResponseSetProperty = "response-set-property",
+
+  ResponseError = "response-error",
 }

 export class PluginEvent {
--- a/cc-inspector/src/scripts/background/portDevtools.ts
+++ b/cc-inspector/src/scripts/background/portDevtools.ts
@ -25,7 +25,7 @@ export class PortDevtools extends PortMan {
          data.reset(Page.Background, Page.Content);
          const port = portMgr.getCurrentUsePort();
          if (!port) {
-            console.warn(`not find andy port`);
+            console.warn(`not find any port`);
            return;
          }
          port.send(data);
--- a/cc-inspector/src/scripts/inject/inspector.ts
+++ b/cc-inspector/src/scripts/inject/inspector.ts
@ -1,7 +1,7 @@
 // eval 注入脚本的代码,变量尽量使用var,后来发现在import之后,let会自动变为var
 import { uniq } from "lodash";
-import { Msg, PluginEvent, RequestNodeInfoData, RequestLogData, RequestObjectData, RequestSetPropertyData, ResponseNodeInfoData, ResponseObjectData, ResponseSetPropertyData, ResponseSupportData, ResponseTreeInfoData } from "../../core/types";
-import { ArrayData, BoolData, ColorData, DataType, EngineData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectData, ObjectItemRequestData, Property, StringData, TreeData, Vec2Data, Vec3Data } from "../../views/devtools/data";
+import { Msg, PluginEvent, RequestLogData, RequestNodeInfoData, RequestSetPropertyData, ResponseNodeInfoData, ResponseSetPropertyData, ResponseSupportData, ResponseTreeInfoData } from "../../core/types";
+import { ArrayData, BoolData, ColorData, DataType, EngineData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectData, Property, StringData, TreeData, Vec2Data, Vec3Data } from "../../views/devtools/data";
 import { InjectEvent } from "./event";
 import { getValue, trySetValueWithConfig } from "./setValue";
 import { BuildArrayOptions, BuildImageOptions, BuildObjectOptions, BuildVecOptions } from "./types";
@ -62,24 +62,6 @@ export class Inspector extends InjectEvent {
        logFunction(value);
        break;
      }
-      case Msg.RequestObjectItemData: {
-        const data: RequestObjectData = pluginEvent.data;
-        let val = getValue(this.inspectorGameMemoryStorage, data.path);
-        if (val) {
-          let itemData: Property[] = this._buildObjectItemData({
-            data: data,
-            path: data.path,
-            value: val,
-            filterKey: false,
-          });
-          let result: ObjectItemRequestData = {
-            id: data.id,
-            data: itemData,
-          };
-          this.sendMsgToContent(Msg.ResponseObjectItemData, result as ResponseObjectData);
-        }
-        break;
-      }
    }
  }
  init() {
@ -486,7 +468,8 @@ export class Inspector extends InjectEvent {
      }
      desc[key] = keyDesc;
    }
-    data.data = JSON.stringify(desc);
+    data.data = [];
+    //JSON.stringify(desc);
    return data;
  }

@ -576,17 +559,21 @@ export class Inspector extends InjectEvent {
    let node = this.inspectorGameMemoryStorage[uuid];
    if (node) {
      let groupData = [];
+      if (node.isValid) {
        // 收集节点信息
        let nodeGroup = this._getGroupData(node);
        groupData.push(nodeGroup);
        // 收集组件信息
        const nodeComp = node._components;
+        if (nodeComp) {
          for (let i = 0; i < nodeComp.length; i++) {
            let itemComp = nodeComp[i];
            this.inspectorGameMemoryStorage[itemComp.uuid] = itemComp;
            let compGroup = this._getGroupData(itemComp);
            groupData.push(compGroup);
          }
+        }
+      }
      const data: NodeInfoData = new NodeInfoData(uuid, groupData);
      this.sendMsgToContent(Msg.ResponseNodeInfo, data as ResponseNodeInfoData);
    } else {
--- a/cc-inspector/src/views/devtools/bus.ts
+++ b/cc-inspector/src/views/devtools/bus.ts
@ -2,7 +2,6 @@ import { TinyEmitter } from "tiny-emitter";

 export enum BusMsg {
  ShowPlace = "ShowPlace",
-  RequestObjectData = "RequestObjectData",
  FoldAllGroup = "FoldAllGroup",
  UpdateSettings = "UpdateSettings",
  /**
--- a/cc-inspector/src/views/devtools/data.ts
+++ b/cc-inspector/src/views/devtools/data.ts
@ -165,17 +165,25 @@ export class ArrayData extends Info {
    this.data.push(info);
    return this;
  }
-  test() {
-    this.add(new Property("item1", new TextData("text")));
-    this.add(new Property("item2", new BoolData(true)));
-    this.add(new Property("item3", new NumberData(100)));
+  testNormal() {
+    this.add(new Property("arr-text", new TextData("text")));
+    this.add(new Property("arr-bool", new BoolData(true)));
+    this.add(new Property("arr-number", new NumberData(100)));
+    return this;
+  }
+  testObject() {
+    this.add(new Property("obj", new ObjectData().testNormal()));
+    return this;
+  }
+  testArray() {
+    this.add(new Property("arr", new ArrayData().testNormal()));
    return this;
  }
  testSub() {
-    this.add(new Property("item1", new TextData("text")));
+    this.add(new Property("text", new TextData("text")));
    const sub = new ArrayData();
-    sub.add(new Property("sub", new StringData("sub")));
-    this.add(new Property("arr", sub));
+    sub.add(new Property("string", new StringData("sub")));
+    this.add(new Property("array", sub));
    return this;
  }
  public isArray(): boolean {
@ -185,42 +193,43 @@ export class ArrayData extends Info {
    return true;
  }
 }
-
-export class ObjectDataItem extends Info {}
-
 export class ObjectData extends Info {
  /**
-   * object的简单描述快照，类似chrome的console，{a:'fff',b:xxx}
-   * 主要是为了防止Object的数据过大，无限递归
+   * 对于object无限递归的情况，会自动中断
+   * 本质上和Array区别不是很大
   */
-  data: string = "";
+  data: Array<Property> = [];
  constructor() {
    super();
    this.type = DataType.Object;
  }
  parse(data: ObjectData) {
    super.parse(data);
-    this.data = data.data;
+    for (let i = 0; i < data.data.length; i++) {
+      const item = data.data[i];
+      const property = new Property(item.name, item.value).parse(item);
+      this.data.push(property);
+    }
    return this;
  }

-  test() {
-    this.data = JSON.stringify({ fack: "test" });
+  add(info: Property) {
+    this.data.push(info);
    return this;
  }
-  testProperty(): Property[] {
-    const obj: Object = JSON.parse(this.data);
-    const properties: Property[] = [];
-    for (let key in obj) {
-      if (typeof obj[key] === "string") {
-        properties.push(new Property(key, new StringData(obj[key])));
-      } else if (typeof obj[key] === "number") {
-        properties.push(new Property(key, new NumberData(obj[key])));
-      } else if (typeof obj[key] === "boolean") {
-        properties.push(new Property(key, new BoolData(obj[key])));
+  testNormal() {
+    this.add(new Property("obj-text", new TextData("text")));
+    this.add(new Property("obj-bool", new BoolData(true)));
+    this.add(new Property("obj-number", new NumberData(100)));
+    return this;
  }
+  testObject() {
+    this.add(new Property("obj", new ObjectData().testNormal()));
+    return this;
  }
-    return properties;
+  testArray() {
+    this.add(new Property("array", new ArrayData().testNormal()));
+    return this;
  }
  public isObject(): boolean {
    return true;
@ -228,6 +237,9 @@ export class ObjectData extends Info {
  public isArrayOrObject(): boolean {
    return true;
  }
+  public getInfo() {
+    return `${this.id}: ${this.path.join("/")}`;
+  }
 }

 export class InvalidData extends Info {
@ -566,6 +578,7 @@ export class Group {
    this.data.push(property);
  }
  buildProperty(name: string, info: Info) {
+    info.path.push(name);
    const property = new Property(name, info);
    this.addProperty(property);
    return this;
--- a/cc-inspector/src/views/devtools/index.vue
+++ b/cc-inspector/src/views/devtools/index.vue
@ -108,6 +108,10 @@ export default defineComponent({
    bridge.on(Msg.MemoryInfo, (eventData: any) => {
      memory.value = eventData;
    });
+    bridge.on(Msg.ResponseError, (event: PluginEvent) => {
+      const err: string = event.data;
+      ccui.footbar.showError(err);
+    });
    bridge.on(Msg.ResponseUpdateFrames, (event: PluginEvent) => {
      let resFrames: FrameDetails[] = event.data;
      iframes.value = resFrames.map((item) => {
--- a/cc-inspector/src/views/devtools/inspector.vue
+++ b/cc-inspector/src/views/devtools/inspector.vue
@ -11,10 +11,10 @@
 import ccui from "@xuyanfeng/cc-ui";
 import { IUiMenuItem } from "@xuyanfeng/cc-ui/types/cc-menu/const";
 import { defineComponent, onMounted, onUnmounted, ref } from "vue";
-import { Msg, PluginEvent, RequestNodeInfoData, RequestObjectData, ResponseObjectData, ResponseSupportData } from "../../core/types";
+import { Msg, PluginEvent, RequestNodeInfoData, ResponseSupportData } from "../../core/types";
 import { bridge } from "./bridge";
 import { Bus, BusMsg } from "./bus";
-import { NodeInfoData, ObjectData } from "./data";
+import { NodeInfoData } from "./data";
 import { Timer } from "./timer";
 import Properties from "./ui/propertys.vue";
 const { CCDock } = ccui.components;
@ -73,27 +73,7 @@ export default defineComponent({
        ccui.footbar.showError(error, { title: "parse property error" });
      }
    });
-    /**
-     * 请求属性的列表，如果一个属性请求失败，会阻断后续的相同请求，因为都已经失败了，就没必要再响应请求了
-     */
-    const requestList: Array<{ id: string; cb: Function }> = [];
-    bridge.on(Msg.ResponseObjectItemData, (event: PluginEvent) => {
-      const requestData: ResponseObjectData = event.data;
-      if (requestData.id !== null) {
-        let findIndex = requestList.findIndex((el) => el.id === requestData.id);
-        if (findIndex > -1) {
-          let del = requestList.splice(findIndex, 1)[0];
-          del.cb(requestData.data);
-        }
-      }
-    });
-    Bus.on(BusMsg.RequestObjectData, (data: ObjectData, cb: Function) => {
-      if (!data.id || requestList.find((el) => el.id === data.id)) {
-        return;
-      }
-      requestList.push({ id: data.id, cb });
-      bridge.send(Msg.RequestObjectItemData, data as RequestObjectData);
-    });
+
    return {
      treeItemData,
      onMenu(evnet: MouseEvent) {
--- a/cc-inspector/src/views/devtools/test/server.ts
+++ b/cc-inspector/src/views/devtools/test/server.ts
@ -1,6 +1,6 @@
 import { v4 } from "uuid";
-import { Msg, Page, PluginEvent, RequestNodeInfoData, RequestObjectData, ResponseNodeInfoData, ResponseObjectData, ResponseSupportData, ResponseTreeInfoData } from "../../../core/types";
-import { ArrayData, BoolData, ColorData, EngineData, EnumData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectData, ObjectItemRequestData, Property, StringData, TextData, TreeData, Vec2Data, Vec3Data, Vec4Data } from "../data";
+import { Msg, Page, PluginEvent, RequestNodeInfoData, ResponseNodeInfoData, ResponseSupportData, ResponseTreeInfoData } from "../../../core/types";
+import { ArrayData, BoolData, ColorData, EngineData, EnumData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectData, Property, StringData, TextData, TreeData, Vec2Data, Vec3Data, Vec4Data } from "../data";
 export class TestClient {
  recv(event: PluginEvent) {}
 }
@ -81,9 +81,41 @@ export class TestServer {
  private clients: TestClient[] = [];
  private testData: Node = new Node("scene");
  constructor() {
-    this.testData.buildChild("base").buildComponent("group1").buildProperty("bool", new BoolData(true)).buildProperty("text", new TextData("text")).buildProperty("number", new NumberData(100)).buildProperty("string", new StringData("string")).buildProperty("enum", new EnumData().test()).buildProperty("color", new ColorData("#f00")).buildProperty("image", new ImageData().test());
-    this.testData.buildChild("vec").buildComponent("group2").buildProperty("number", new NumberData(200)).buildProperty("vec2", new Vec2Data().test()).buildProperty("vec3", new Vec3Data().test()).buildProperty("vec4", new Vec4Data().test());
-    this.testData.buildChild("obj/arr").buildComponent("group3").buildProperty("array", new ArrayData().test()).buildProperty("object", new ObjectData().test()).buildProperty("arr_arr", new ArrayData().testSub());
+    this.testData
+      .buildChild("base")
+      .buildComponent("group-base") //
+      .buildProperty("bool", new BoolData(true))
+      .buildProperty("text", new TextData("text"))
+      .buildProperty("number", new NumberData(100))
+      .buildProperty("string", new StringData("string"))
+      .buildProperty("enum", new EnumData().test())
+      .buildProperty("color", new ColorData("#f00"))
+      .buildProperty("image", new ImageData().test());
+    this.testData
+      .buildChild("vec")
+      .buildComponent("group-vec") //
+      .buildProperty("number", new NumberData(200))
+      .buildProperty("vec2", new Vec2Data().test())
+      .buildProperty("vec3", new Vec3Data().test())
+      .buildProperty("vec4", new Vec4Data().test());
+    this.testData
+      .buildChild("arr")
+      .buildComponent("group-arr") //
+      .buildProperty("array[t/b/n]", new ArrayData().testNormal()); //
+    this.testData
+      .buildChild("obj") //
+      .buildComponent("group-obj")
+      .buildProperty("object", new ObjectData().testNormal()); //
+
+    this.testData
+      .buildChild("arr[arr]")
+      .buildComponent("group-arr[arr]") //
+      .buildProperty("arr", new ArrayData().testArray()); //
+
+    this.testData
+      .buildChild("arr[obj]")
+      .buildComponent("group-arr[obj]") //
+      .buildProperty("arr", new ArrayData().testObject()); //
    this.testData.buildChild("engine").buildComponent("group4").buildProperty("node", new EngineData().init("name", "cc_Node", "uuid")).buildProperty("sprite", new EngineData().init("name", "cc_Sprite", "uuid")).buildProperty("label", new EngineData().init("name", "cc_Label", "uuid")).buildProperty("un_known", new EngineData().init("name", "un_known", "uuid"));

    const c = this.testData.buildChild("str1");
@ -132,22 +164,8 @@ export class TestServer {
        break;
      }
      case Msg.RequestSetProperty: {
-        console.log(data);
-        break;
-      }
-      case Msg.RequestObjectItemData: {
-        const objData: RequestObjectData = data as ObjectData;
-        const info = this.testData.findInfo(objData.id);
-        if (info && info instanceof ObjectData) {
-          const ret: ObjectItemRequestData = {
-            id: objData.id,
-            data: info.testProperty(),
-          };
-          const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseObjectItemData, ret as ResponseObjectData);
-          this.send(event);
-        } else {
-          console.warn("not found data: ", objData.id);
-        }
+        const i = data as Info;
+        console.log(i);
        break;
      }
      case Msg.RequestLogData: {
--- a/cc-inspector/src/views/devtools/ui/ui-prop.vue
+++ b/cc-inspector/src/views/devtools/ui/ui-prop.vue
@ -16,12 +16,12 @@
        <CCColor v-if="value.isColor()" :show-color-text="true" :disabled="value.readonly" v-model:color="value.data" @change="onChangeValue"> </CCColor>
        <PropertyImage v-if="value.isImage()" v-model:data="(value as ImageData)"></PropertyImage>
        <Engine v-if="value.isEngine()" v-model:data="(value as EngineData)"> </Engine>
-        <div v-if="value.isObject() && !expand" class="objectDesc">{{ value.data }}</div>
+        <div v-if="value.isObject() && !expand" class="objectDesc"></div>
        <div v-if="value.isArray()" class="array">Array[{{ value.data.length }}]</div>
      </div>
    </CCProp>
    <div v-if="value && value.isArrayOrObject()">
-      <div v-show="expand && subData">
+      <div v-show="expand && subData && subData.length">
        <UiProp v-for="(arr, index) in subData" :key="index" :indent="indent + 1" :value="arr.value" :name="getName(value.isArray(), arr)"> </UiProp>
      </div>
    </div>
@ -34,8 +34,7 @@ import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
 import { defineComponent, onMounted, PropType, ref, toRaw, watch } from "vue";
 import { Msg, RequestSetPropertyData } from "../../../core/types";
 import { bridge } from "../bridge";
-import { Bus, BusMsg } from "../bus";
-import { EngineData, EnumData, ImageData, Info, NumberData, Property, StringData, TextData, Vec2Data, Vec3Data } from "../data";
+import { ArrayData, EngineData, EnumData, ImageData, Info, NumberData, ObjectData, Property, StringData, TextData, Vec2Data, Vec3Data } from "../data";
 import Engine from "./property-engine.vue";
 import PropertyImage from "./property-image.vue";
 const { CCInput, CCTextarea, CCProp, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
@ -66,30 +65,25 @@ export default defineComponent({
        if (newData.id !== oldData.id) {
          // 只有id不相等了，才折叠，因为数据是在定时刷新
          expand.value = false;
+          subData.value = [];
        }
        freshSubData(newData);
      }
    );
-    const subData = ref<Array<Property> | null>(null);
+    const subData = ref<Array<Property>>([]);
    function freshSubData(data: Info) {
      const rawExpand = toRaw(expand.value);
      if (!rawExpand) {
        return;
      }
-      const rawSubData = toRaw(subData.value);
-      if (rawSubData !== null) {
-        return;
-      }
      const rawValue = toRaw(data);
      if (!rawValue) {
        return;
      }
      if (rawValue.isArray()) {
-        subData.value = data.data;
+        subData.value = (data as ArrayData).data;
      } else if (rawValue.isObject()) {
-        Bus.emit(BusMsg.RequestObjectData, rawValue, (info: Property[]) => {
-          subData.value = info;
-        });
+        subData.value = (data as ObjectData).data;
      }
    }
    return {