Does anyone have any idea of remaking the animation selector like the sp.Skeleton component do?
I recently making a vue package, which convert the animation list inside the sp.Skeleton to ui-select. But my ui-slect does not save my option.
My Component using the inspector package.
Select success.
Click outside or quit the cocos creator make the Options blank.
My inspector code:
js file:
"use strict"
Vue.component('pts-button', {
template: fs.readFileSync(Editor.url('packages://smart_listing/inspector/smart_listing.html'), 'utf8'),
props: {
target: {
twoWay: true,
type: Object,
},
multi: { type: Boolean }
},
data() {
return {
target_anim: ""
}
},
methods: {
T: Editor.T,
resetNodeSize()
{
const t = {id: this.target.uuid.value, path: "_resizeToTarget", type: "Boolean", isSubProp: !1, value: !0};
Editor.Ipc.sendToPanel("scene", "scene:set-property", t);
},
anim_listing(skeleton) {
console.log(skeleton)
if(!skeleton) return [];
return skeleton.skeletonData.getRuntimeData().animations;
},
setAnim() {
Editor.Ipc.sendToPanel( 'scene', "scene:set-property", {
id: this.target.uuid.value,
path: 'target_anim',
type: 'String',
value: this.target_anim
} )
},
_autoGrayEffectEnabled()
{
return !(1 === this.target.transition.value || 2 === this.target.transition.value && this.target.disabledSprite.value.uuid);
},
_is_ready_for_resize: (t, n) => !!n || !t.value.uuid,
_check_transition: (t, n, i) => i ? t.values.every(t => t === n) : t.value === n,
},
})
My html file:
<cc-prop :target.sync="target.skeleton"></cc-prop>
<ui-prop name="Options" value="target_anim">
<ui-select value="0" class="flex-1" @change="setAnim" v-value="target_anim">
<option v-for="(v, k) in target.listing.value" v-value="k.value"> {{k.value}}</option> </option>
</ui-select>
</ui-prop>
My component file:
const {ccclass, property, inspector} = cc._decorator;
@ccclass
@inspector('packages://smart_listing/inspector/smart_listing.js')
export default class TestLisitng extends cc.Component {
@property(sp.Skeleton)
_skeleton: sp.Skeleton = null;
@property(sp.Skeleton)
get skeleton(): sp.Skeleton { return this._skeleton }
set skeleton(value: sp.Skeleton) {
this._skeleton = value;
if(!!value) {
this.listing = []
this.listing = value.skeletonData.getRuntimeData().animations.map(e => e.name)
Editor.log(this.listing, "")
}
}
@property([cc.String])
listing: string[] = [];
@property()
_anim: string = ''
@property(
{
displayName: "Options"
}
)
set target_anim(data: string) {
this._anim = data;
Editor.log(this._anim, '')
}
get target_anim() { return this._anim }
protected onLoad(): void {
console.log(this._anim)
}
}