扩展属性检查器面板

属性检查器 作为 Creator 里显示当前选中状态的模块,为大家提供了一些基础的扩展能力。

属性检查器 里,定义了两个层级的数据:

  1. 选中的物体主类型
  2. 渲染主类型内容时,内容里包含的子数据类型

当在 层级管理器/资源管理器 中选中一个节点/资源时,Creator 便会将物体被选中的广播消息发送到 属性检查器。当 属性检查器 接收到消息后,会检查被选中的物体的类型,例如选中的是节点,那么类型便是 node

针对两种类型,允许注册两种渲染器:

  1. 主类型渲染器
  2. 主类型渲染器接收数据开始渲染的时候,允许附带子类型渲染器

示例里选中的是 nodenode 上携带了多个 component,所以主类型就是 node,而子类型则是 component

属性检查器 收到选中物体的广播消息后,首先确定类型,而后 属性检查器 会将收到的数据(物体的 uuid),传递给 node 渲染器,将渲染权限完全移交。

而在 node 渲染器里,会根据自身的实现,渲染到每个 组件 的时候,将该区域的渲染权限交给 子类型渲染器。大部分情况下,我们不需要关注这些。我们先来看看几种常用的的自定义方式吧。

自定义 Component 渲染

默认提供的组件渲染器有时候并不能满足我们的需求,我们可以在插件的 package.json 里这样注册一份数据:

{
    "name": "extension",
    "editor": ">=3.3.0",

    "contributions": {
        "inspector": {
            "section": {
                "node": {
                    "cc.Label": "./dist/contributions/inspector/comp-label.js"
                }
            }
        }
    }
}

在 contributions 数据里,向 属性检查器 提供一份数据,要求渲染 section 区域内的 node 类型物体里的 cc.Label 组件。

然后我们针对这个书写一个 ./dist/contributions/inspector/comp-label.js 文件:

'use strict';

module.exports = Editor.Panel.define({
    $: {
        button: 'ui-button[slot=content]',
    },
    template: `
<ui-prop>
    <ui-label value="Button" slot="label"></ui-label>
    <ui-button slot="content">Console</ui-button>
</ui-prop>
    `,
    update(dump: any) {
        // TODO something
    },
    ready() {
        this.$.button.addEventListener('confirm', () => {
            console.log('Custom Inspector: Label Button...');
        });
    },
    close() {
        // TODO something
    },
});

Editor.Panel.define 是 v3.3 新增的接口,主要是合并一些数据。

需要兼容之前版本的话可以加一行:

Editor.Panel.define = Editor.Panel.define || function(panel: any) {return panel;}

这样我们就能够在 inspector 内的 Label 组件最后添加一个 button。

这里需要注意的是,多个插件注册的数据是并存的。如果一个的 Component 已经有其他插件注册或者内置了自定义渲染器,那么再次注册的自定义渲染器都会附加在后面。如果一个 Component 没有内置自定义渲染器,使用的是默认的渲染,那么当插件注册渲染器的时候,会完全接管渲染内容。

自定义 Asset 渲染

如果官方资源面板不能满足需求,我们也可以扩展自定义的面板:

{
    "name": "extension",
    "editor": ">=3.3.0",
    "contributions": {
        "inspector": {
            "section": {
                "asset": {
                    "effect": "./dist/contributions/inspector/asset-effect.js"
                }
            }
        }
    }
}

和 Component 注册一样,在 contributions 数据里,向 属性检查器 提供一份数据,请求渲染 "section" 区域内的 "asset" 类型里的 "effect" 资源。

'use strict';

interface Asset {
    displayName: string;
    file: string;
    imported: boolean;
    importer: string;
    invalid: boolean;
    isDirectory: boolean;
    library: {
        [extname: string]: string;
    };
    name: string;
    url: string;
    uuid: string;
    visible: boolean;
    subAssets: {
        [id: string]: Asset;
    };
}

interface Meta {
    files: string[];
    imported: boolean;
    importer: string;
    subMetas: {
        [id: string]: Meta;
    };
    userData: {
        [key: string]: any;
    };
    uuid: string;
    ver: string;
}

// 兼容 v3.3 之前的版本
Editor.Panel.define = Editor.Panel.define || function(panel: any) {return panel;}

module.exports = Editor.Panel.define({
    $: {
        button: 'ui-button[slot=content]',
    },
    template = `
<ui-prop>
    <ui-label value="Button" slot="label"></ui-label>
    <ui-button slot="content">Console</ui-button>
</ui-prop>
    `,
    update(assetList: Asset[], metaList: Meta[]) {
        // TODO something
    },
    ready() {
        // @ts-ignore
        this.$.button.addEventListener('confirm', () => {
            console.log('Custom Inspector: Label Button...');
        });
    },
    close() {
        // TODO something
    },
});

这样我们就能够在 inspector 内的 effect 资源页面最后添加一个 button。

这里也需要注意,多个插件注册的数据是并存的。如果一个的 Asset 已经有其他插件注册或者内置了自定义渲染器,那么再次注册的自定义渲染器都会附加在后面。如果一个 Asset 没有内置自定义渲染器,使用的是默认的渲染,那么当插件注册渲染器的时候,会完全接管渲染内容。

更多自定义方式

通过修饰器定义属性

results matching ""

    No results matching ""