扩展属性检查器面板
属性检查器 作为 Creator 里显示当前选中状态的模块，为大家提供了一些基础的扩展能力。
在 属性检查器 里，定义了两个层级的数据:
- 选中的物体主类型
- 渲染主类型内容时，内容里包含的子数据类型
当在 层级管理器/资源管理器 中选中一个节点/资源时，Creator 便会将物体被选中的广播消息发送到 属性检查器。当 属性检查器 接收到消息后，会检查被选中的物体的类型，例如选中的是节点，那么类型便是 node。
针对两种类型，允许注册两种渲染器：
- 主类型渲染器
- 主类型渲染器接收数据开始渲染的时候，允许附带子类型渲染器
示例里选中的是 node，node 上携带了多个 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 是 3.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;
}
// 兼容 3.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 没有内置自定义渲染器，使用的是默认的渲染，那么当插件注册渲染器的时候，会完全接管渲染内容。