增加属性关联node，点击后tree高亮显示

2025-10-23 00:35:23 +00:00 · 2025-01-07 17:52:21 +08:00
parent 82215235d9
commit 16e1fdf89f
9 changed files with 353 additions and 209 deletions
--- a/cc-inspector/src/views/devtools/comp/index.ts
+++ b/cc-inspector/src/views/devtools/comp/index.ts
@@ -4,11 +4,140 @@ export enum CompType {
  Label = "cc.Label",
  Widget = "cc.Widget",
  Camera = "cc.Camera",
+  Canvas = "cc.Canvas",
+  Mask = "cc.Mask",
+  ScrollView = "cc.ScrollView",
  UITransform = "cc.UITransform",
+  ParticleSystem = "cc.ParticleSystem",
+  EditBox = "cc.EditBox",
+  TiledTile = "cc.TiledTile",
+  Light = "cc.Light",
+  VideoPlayer = "cc.VideoPlayer",
+  MeshRenderer = "cc.MeshRenderer",
+  ProgressBar = "cc.ProgressBar",
+  RichText = "cc.RichText",
+  Slider = "cc.Slider",
+  PageView = "cc.PageView",
+  Webview = "cc.WebView",
+  ToggleGroup = "cc.ToggleGroup",
+  ToggleContainer = "cc.ToggleContainer",
+  Toggle = "cc.Toggle",
+  Button = "cc.Button",
 }

 export function getSimpleProperties(typeName: string): string[] {
  const config = {};
+  config[CompType.Button] = [
+    "target", //
+    "interactable",
+    "enableAutoGrayEffect",
+    "transition",
+    "duration",
+    "zoomScale",
+    "normalColor",
+    "normalSprite",
+    "pressedColor",
+    "pressedSprite",
+    "disabledColor",
+    "disabledSprite",
+    "hoverColor",
+    "hoverSprite",
+    "duration",
+  ];
+  config[CompType.Toggle] = [
+    "target",
+    "interactable",
+    "enableAutoGrayEffect",
+    "transition", //
+    "duration",
+    "zoomScale",
+    "isChecked",
+    "checkMark",
+    "toggleGroup",
+  ];
+  config[CompType.ToggleContainer] = ["allowSwitchOff"];
+  config[CompType.ToggleGroup] = ["allowSwitchOff"];
+  config[CompType.Webview] = ["url"];
+  config[CompType.PageView] = [
+    "content",
+    "sizeMode",
+    "direction",
+    "scrollThreshold",
+    "autoPageTurningThreshold", //
+    "inertia",
+    "brake",
+    "elastic",
+    "bounceDuration",
+    "indicator",
+    "pageTurningSpeed",
+    "pageTurningEventTiming",
+    "cancelInnerEvents",
+  ];
+  config[CompType.Slider] = ["handle", "direction", "progress"];
+  config[CompType.RichText] = [
+    "string",
+    "horizontalAlign",
+    "fontSize",
+    "font",
+    "fontFamily",
+    "useSystemFont",
+    "cacheMode",
+    "maxWidth",
+    "lineHeight",
+    "imageAtlas",
+    "handleTouchEvent", //
+  ];
+  config[CompType.ProgressBar] = [
+    "barSprite",
+    "mode",
+    "totalLength",
+    "progress",
+    "reverse", //
+  ];
+  config[CompType.MeshRenderer] = [
+    "materials", //
+    "mesh",
+    "receiveShadows",
+    "shadowCastingMode",
+    "enableAutoBatch",
+  ];
+  config[CompType.VideoPlayer] = [
+    "resourceType",
+    "clip",
+    "currentTime",
+    "volume",
+    "mute",
+    "keepAspectRatio",
+    "isFullscreen",
+    "stayOnBottom", //
+  ];
+  config[CompType.Light] = [
+    "type",
+    "color",
+    "intensity", //
+    "range",
+    "shadowType",
+    "range",
+    "spotAngle",
+    "spotExp",
+  ];
+  config[CompType.TiledTile] = ["x", "y", "grid"];
+  config[CompType.EditBox] = [
+    "string",
+    "placeholder", //
+    "background",
+    "textLabel",
+    "placeholderLabel",
+    "keyboardReturnType",
+    "inputFlag",
+    "inputMode",
+    "maxLength",
+    "tabIndex",
+  ];
+  config[CompType.ParticleSystem] = [
+    "playOnLoad", //
+    "autoRemoveOnFinish",
+  ];
  config[CompType.Node] = [
    "position", //
    "rotation",
@@ -69,6 +198,29 @@ export function getSimpleProperties(typeName: string): string[] {
    "trim",
    "type",
  ];
+  config[CompType.ScrollView] = [
+    "bounceDuration",
+    "content", //
+    "horizontal",
+    "vertical",
+    "inertia",
+    "brake",
+    "elastic",
+    "bounceDuration",
+    "verticalScrollBar",
+  ];
+  config[CompType.Mask] = [
+    "alphaThreshold",
+    "inverted",
+    "segments", //
+    "spriteFrame",
+    "type",
+  ];
+  config[CompType.Canvas] = [
+    "fitWidth",
+    "fitHeight", //
+    "designResolution",
+  ];
  return config[typeName] || [];
 }
 export const VisibleProp = {
--- a/cc-inspector/src/views/devtools/data.ts
+++ b/cc-inspector/src/views/devtools/data.ts
@@ -121,7 +121,14 @@ export interface FrameDetails {
 */
 export class EngineData extends Info {
  public engineType: string = "";
+  /**
+   * 组件的uuid
+   */
  public engineUUID: string = "";
+  /**
+   * 组件挂在的节点，方便高亮
+   */
+  public engineNode: string = "";
  public engineName: string = "";

  constructor() {
@@ -133,12 +140,14 @@ export class EngineData extends Info {
    this.engineType = data.engineType;
    this.engineUUID = data.engineUUID;
    this.engineName = data.engineName;
+    this.engineNode = data.engineNode;
    return this;
  }
-  init(name: string, type: string, uuid: string) {
+  init(name: string, type: string, uuid: string, node: string = "") {
    this.engineName = name;
    this.engineType = type;
    this.engineUUID = uuid;
+    this.engineNode = node || uuid;
    return this;
  }
  public isEngine(): boolean {
--- a/cc-inspector/src/views/devtools/hierarchy.vue
+++ b/cc-inspector/src/views/devtools/hierarchy.vue
@@ -28,8 +28,8 @@ export default defineComponent({
  components: { CCButtonGroup, CCInput, CCTree, CCDock },
  setup() {
    const funcShowPlace = (data: EngineData) => {
-      console.log(toRaw(data));
-      _expand(data.engineUUID);
+      console.log(data);
+      _expand(data.engineNode);
    };
    const funcEnableSchedule = (b: boolean) => {
      if (b) {
@@ -67,33 +67,9 @@ export default defineComponent({
      timer.clean();
    });
    function _expand(uuid: string) {
-      let expandKeys: Array<string> = [];
-
-      function circle(array: any) {
-        for (let i = 0; i < array.length; i++) {
-          let item = array[i];
-          expandKeys.push(item.uuid);
-          if (item.uuid === uuid) {
-            return true;
-          } else {
-            let find = circle(item.children);
-            if (find) {
-              return true;
-            } else {
-              expandKeys.pop();
-            }
-          }
-        }
+      if (elTree.value) {
+        elTree.value.handExpand(uuid, { highlight: true });
      }
-
-      circle(treeData);
-
-      expandKeys.forEach((key) => {
-        if (!expandedKeys.value.find((el) => el === key)) {
-          expandedKeys.value.push(key);
-        }
-      });
-      // 高亮uuid
    }
    function updateTree() {
      console.log("update tree info");
--- a/cc-inspector/src/views/devtools/index.vue
+++ b/cc-inspector/src/views/devtools/index.vue
@@ -1,6 +1,6 @@
 <template>
  <div id="devtools">
-    <Test> </Test>
+    <Test v-if="false"> </Test>
    <div class="head" v-show="iframes.length > 1">
      <div class="label">inspect target:</div>
      <CCSelect v-model:value="frameID" @change="onChangeFrame" :data="getFramesData()"> </CCSelect>
--- a/cc-inspector/src/views/devtools/test/server.ts
+++ b/cc-inspector/src/views/devtools/test/server.ts
@@ -117,15 +117,23 @@ export class TestServer {
      .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");
-    c.active = false;
-    c.buildComponent("group51").buildProperty("str1", new StringData("str1"));
-    c.buildComponent("group52").buildProperty("num", new NumberData(200));
+    const node = this.testData.buildChild("str1");
+    node.active = false;
+    const comp = node.buildComponent("group51");
+    comp.buildProperty("str1", new StringData("str1"));
+    node.buildComponent("group52").buildProperty("num", new NumberData(200));

    this.testData.buildChild("str2").buildComponent("group6").buildProperty("str2", new StringData("str2"));

+    this.testData
+      .buildChild("engine")
+      .buildComponent("group4") //
+      .buildProperty("node", new EngineData().init(node.name, "cc_Node", node.id))
+      .buildProperty("sprite", new EngineData().init(node.name, "cc_Sprite", node.id))
+      .buildProperty("label", new EngineData().init(node.name, "cc_Label", node.id))
+      .buildProperty("un_known", new EngineData().init(comp.name, "un_known", comp.id, node.id));
+
    this.testData
      .buildChild("Invalid")
      .buildComponent("group7")
--- a/cc-inspector/src/views/devtools/ui/property-engine.vue
+++ b/cc-inspector/src/views/devtools/ui/property-engine.vue
@@ -1,16 +1,13 @@
 <template>
-  <div class="property-engine">
+  <div class="property-engine" @click="onPlaceInTree">
    <i class="icon iconfont" :class="getEngineTypeIcon()"></i>
    <div class="type">{{ data.engineType }}</div>
    <div class="name">{{ data.engineName }}</div>
-    <div class="place" @click="onPlaceInTree">
-      <i class="iconfont icon_place"></i>
-    </div>
  </div>
 </template>

 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, PropType, toRaw } from "vue";
 import { Bus, BusMsg } from "../bus";
 import { EngineData } from "../data";
 export default defineComponent({
@@ -25,7 +22,7 @@ export default defineComponent({
  setup(props, context) {
    return {
      onPlaceInTree() {
-        Bus.emit(BusMsg.ShowPlace, props.data);
+        Bus.emit(BusMsg.ShowPlace, toRaw(props.data));
      },
      getEngineTypeIcon() {
        switch (props.data.engineType) {
@@ -49,6 +46,7 @@ export default defineComponent({
 <style scoped lang="less">
@my-height: 20px;
 .property-engine {
+  cursor: pointer;
  height: @my-height;
  box-sizing: border-box;
  flex: 1;
@@ -64,46 +62,37 @@ export default defineComponent({
  align-content: center;
  display: flex;
  flex-direction: row;
-
+  margin-right: 2px;
+  color: white;
+  &:hover {
+    color: #414141;
+  }
+  &:active {
+    color: black;
+  }
  .icon {
    font-size: 14px;
    width: @my-height;
-    margin: 0 5px;
+    margin: 0 1px 0 2px;
  }
-
  .type {
-    text-align: left;
-    flex: 1;
-    color: white;
    font-size: 12px;
-    display: flex;
-    align-content: center;
-    height: @my-height;
-    padding: 0 5px;
-    background-color: rgb(48, 158, 0);
-    align-items: center;
+    min-width: 80px;
+    max-width: 80px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
  }
-
  .name {
+    user-select: none;
    font-size: 12px;
-    color: white;
    flex: 1;
    height: @my-height;
-    background-color: rgb(184, 157, 5);
+    background-color: #d4873d;
    display: flex;
    padding: 0 5px;
    align-items: center;
    align-content: center;
  }
-  .place {
-    padding: 0 5px;
-    cursor: pointer;
-    &:hover {
-      color: #6d6d6d;
-    }
-    &:active {
-      color: #000000;
-    }
-  }
 }
 </style>
--- a/cc-inspector/src/views/devtools/ui/property-image.vue
+++ b/cc-inspector/src/views/devtools/ui/property-image.vue
@@ -1,17 +1,17 @@
 <template>
  <div v-if="data.isImage()" class="property-image">
    <div class="box">
-      <img :src="data.data" alt="图片" class="img" />
+      <img :src="data.data" alt="图片" @click="onClickImg" class="img" />
    </div>

-    <div class="url" :title="data.data">{{ data.data }}</div>
+    <div class="url" :title="data.data"></div>
    <div style="flex: 1"></div>
    <i class="print iconfont icon_print" @click="onShowValueInConsole"></i>
  </div>
 </template>

 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, PropType, toRaw } from "vue";
 import { ImageData } from "../data";

 export default defineComponent({
@@ -24,6 +24,12 @@ export default defineComponent({
  },
  setup(props) {
    return {
+      onClickImg() {
+        const url = toRaw(props.data.data);
+        if (url && url.startsWith("http")) {
+          window.open(url);
+        }
+      },
      onShowValueInConsole() {
        if (Array.isArray(props.data.path)) {
          let uuid = props.data.path[0];
@@ -47,7 +53,13 @@ export default defineComponent({
  align-content: center;
  align-items: center;
  height: 30px;
+  box-sizing: border-box;
+  border: 1px solid #409eff;
+  border-radius: 2px;
+  margin-right: 2px;
  .box {
+    overflow: hidden;
+    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
@@ -55,8 +67,11 @@ export default defineComponent({
    width: 80px;
    justify-content: center;
    .img {
+      cursor: pointer;
+      padding: 2px 0;
      height: 30px;
      width: 30px;
+      box-sizing: border-box;
      object-fit: contain;
    }
  }