yinmi_h5_edit/assets/script/edit/animation/new_frame.ts

import { _decorator, Component, Director, director, EditBox, Label, Node, Sprite, SpriteFrame, UITransform } from 'cc';
import { tools } from '../../tools';
import { ani_frame, bag_item_data } from '../../../data/data';
import { Attributes } from '../Attributes';
import { frame_item } from './frame_item';
import { control } from '../control';
const { ccclass, property } = _decorator;

@ccclass('new_frame')
export class new_frame extends Component {
    @property(Node) btn_sure:Node = null;
    @property(Node) btn_cancle:Node = null;

    @property(Node) next_time:Node = null;
    @property(Node) pos_x:Node = null;
    @property(Node) pos_y:Node = null;
    @property(Node) size_width:Node = null;
    @property(Node) size_height:Node = null;
    @property(Node) color:Node = null;
    @property(Node) transparent:Node = null;
    @property(Node) btn_select_res:Node = null;

    @property(Node) lab_origin_pos:Node = null;
    @property(Node) lab_origin_size:Node = null;
    @property(Node) btn_origin_res:Node = null;

    @property(Node) rotation:Node = null;
    @property(Node) rotation_x:Node = null;
    @property(Node) rotation_y:Node = null;
    @property(Node) btn_rotation_center:Node = null;
    @property(Node) hide_spr:Node = null;

    private m_up_frame:ani_frame = null;
    private m_create_call = null;
    private m_edit_call = null;
    private m_data:ani_frame = new ani_frame();
    private edit_status:boolean = false;
    private m_item:frame_item = null;
    
    public initView(create_call,edit_call){
        this.m_edit_call = edit_call;
        this.m_create_call = create_call;

        this.btn_cancle.on(Node.EventType.TOUCH_END,()=>{
            this.close()
        })

        this.btn_sure.on(Node.EventType.TOUCH_END,()=>{
            if(this.edit_status){
                this.edit_frame()
            }else{
                this.create_frame()
            }
            this.close()
        })

        this.btn_select_res.on(Node.EventType.TOUCH_END,()=>{
            tools.select_res_list((data:bag_item_data)=>{
                this.m_data.url = data.url;
                this.m_data.url_name = data.name;
                // this.btn_select_res.getComponent(Sprite).spriteFrame = control.res_map.get(this.m_data.url_name)
                // this.hide_spr.getComponent(Sprite).spriteFrame = this.btn_select_res.getComponent(Sprite).spriteFrame
                this.hide_spr.getComponent(Sprite).spriteFrame = control.res_map.get(this.m_data.url_name)
                this.setupInitRotationX_Y()
                this.setupSprRatationAction()
            })
        })

        this.btn_origin_res.on(Node.EventType.TOUCH_END,()=>{
            let size = this.hide_spr.getComponent(UITransform).contentSize;
            this.m_data.size_width = size.width;
            this.m_data.size_height = size.height;
            this.size_width.getComponent(EditBox).string =  this.m_data.size_width.toString()
            this.size_height.getComponent(EditBox).string =  this.m_data.size_height.toString()
        })

        this.btn_rotation_center.on(Node.EventType.TOUCH_END, ()=> {
            this.setupInitRotationX_Y()
        },this)

        this.next_time.on('editing-did-ended', this.change, this);
        this.pos_x.on('editing-did-ended', this.change, this);
        this.pos_y.on('editing-did-ended', this.change, this);
        this.size_height.on('editing-did-ended', this.change, this);
        this.size_width.on('editing-did-ended', this.change, this);
        this.color.on('editing-did-ended', this.change, this);
        this.transparent.on('editing-did-ended', this.change, this);
        this.rotation.on('editing-did-ended', this.change, this);
        this.rotation_x.on('editing-did-ended', this.change, this);
        this.rotation_y.on('editing-did-ended', this.change, this);
    }

    close(){
        this.node.active = false;
    }
    edit_frame(){
        if(this.m_item!=null){
            this.m_item.setData(this.m_data)
        }
        if(this.m_edit_call!=null){
            this.m_edit_call()
        }
    }
    create_frame(){
        if(this.m_create_call!=null){
            this.updateData()
            let ani_frame_data = new ani_frame;
            ani_frame_data.next_time = this.m_data.next_time;
            ani_frame_data.pos_x = this.m_data.pos_x;
            ani_frame_data.pos_y = this.m_data.pos_y;
            ani_frame_data.size_width = this.m_data.size_width;
            ani_frame_data.size_height = this.m_data.size_height;
            ani_frame_data.color = this.m_data.color;
            ani_frame_data.transparent = this.m_data.transparent;
            ani_frame_data.url = this.m_data.url;
            ani_frame_data.url_name = this.m_data.url_name;
            ani_frame_data.rotation = this.m_data.rotation;
            // console.log('x=',this.m_data.rotation_x, 'y=',this.m_data.rotation_y)
            ani_frame_data.rotation_x = this.m_data.rotation_x;
            ani_frame_data.rotation_y = this.m_data.rotation_y;
            console.log("ani_frame_data//",ani_frame_data)
            this.m_create_call(ani_frame_data)
        }
    }

    public show(up_frame:ani_frame=null){
        console.log("show show show show show")
        this.edit_status = false;
        this.m_up_frame = up_frame;
        this.node.active = true;
        let att = Attributes.Singleton.get_cur_att_data();
        let url_name = att.src_name
        let url = att.src;
        if(this.m_up_frame!=null){
            if(this.m_up_frame.url.length>0){
                url_name = this.m_up_frame.url_name
                url = this.m_up_frame.url;
            }
        }
        // if(url_name.length>0){
        //     this.btn_select_res.getComponent(Sprite).spriteFrame = control.res_map.get(url_name)
        // }
        // this.hide_spr.getComponent(Sprite).spriteFrame = this.btn_select_res.getComponent(Sprite).spriteFrame
        if(url_name.length>0){
            this.hide_spr.getComponent(Sprite).spriteFrame = control.res_map.get(url_name)
        }
        let x = up_frame?up_frame.pos_x: Math.floor(att.x);
        let y = up_frame?up_frame.pos_y: Math.floor(att.y);
        this.m_data.url = url;
        this.m_data.pos_x =x;
        this.m_data.pos_y = y;
        this.m_data.size_width = up_frame?up_frame.size_width:att.width;
        this.m_data.size_height = up_frame?up_frame.size_height:att.height;
        this.m_data.url_name =  up_frame?up_frame.url_name:att.src_name;
        if(this.m_data.rotation==undefined||this.m_data.rotation==null){
            this.m_data.rotation=0;
        }
        if(up_frame){
            if(up_frame.rotation==undefined||up_frame==null){
                up_frame.rotation = 0
            }
        }
        this.m_data.rotation =   up_frame?up_frame.rotation:0;
        this.lab_origin_pos.getComponent(Label).string = `(x:${Math.floor(att.x)},y:${Math.floor(att.y)})`
        this.lab_origin_size.getComponent(Label).string = `(w:${att.width},h:${att.height})`
        this.initAtt()
    }

    public show_edit(item:frame_item,up_frame:ani_frame=null){
        console.log("show_edit show_edit show_edit show_edit show_edit")
        this.m_up_frame = up_frame;
        this.node.active = true;
        this.m_data = item.getData();
        this.m_item = item;
        let url = this.m_data.url
        if(this.m_data.url.length>0){
            url = this.m_data.url;
        }else{
            if(this.m_up_frame!=null){
                if(this.m_up_frame.url.length>0){
                    url = this.m_up_frame.url
                }
            }    
        }
        this.edit_status = true;
        // this.btn_select_res.getComponent(Sprite).spriteFrame = control.res_map.get(this.m_data.url_name)
        // this.hide_spr.getComponent(Sprite).spriteFrame = this.btn_select_res.getComponent(Sprite).spriteFrame
        this.hide_spr.getComponent(Sprite).spriteFrame = control.res_map.get(this.m_data.url_name)
        this.initAtt()
        this.setupSprRatationAction()
    }

    initAtt(){
        this.next_time.getComponent(EditBox).string =   this.m_data.next_time.toString()
        this.pos_x.getComponent(EditBox).string = this.m_data.pos_x.toString()
        this.pos_y.getComponent(EditBox).string = this.m_data.pos_y.toString()
        this.size_width.getComponent(EditBox).string =  this.m_data.size_width.toString()
        this.size_height.getComponent(EditBox).string =  this.m_data.size_height.toString()
        this.color.getComponent(EditBox).string =  this.m_data.color.toString()
        this.transparent.getComponent(EditBox).string =  this.m_data.transparent.toString()
        if(this.m_data.rotation==undefined){
            this.m_data.rotation = 0;
        }
        if(this.m_data.rotation_x==undefined) {
            this.m_data.rotation_x = 0;
        }
        if(this.m_data.rotation_y==undefined) {
            this.m_data.rotation_y = 0;
        }
        this.rotation.getComponent(EditBox).string =  this.m_data.rotation.toString()
        if(this.edit_status) {
            this.rotation_x.getComponent(EditBox).string =  this.m_data.rotation_x.toString()
            this.rotation_y.getComponent(EditBox).string =  this.m_data.rotation_y.toString()
        } else {
            this.setupInitRotationX_Y()
        }
       
    }

    change(){
        this.setupSprRatationAction()
        this.updateData()
    }

    updateData(){
        this.m_data.rotation =  parseFloat(this.rotation.getComponent(EditBox).string) 
        this.m_data.rotation_x = parseFloat(this.rotation_x.getComponent(EditBox).string)
        this.m_data.rotation_y = parseFloat(this.rotation_y.getComponent(EditBox).string)
        this.m_data.next_time =  parseFloat(this.next_time.getComponent(EditBox).string) 
        this.m_data.pos_x = parseInt(this.pos_x.getComponent(EditBox).string)
        this.m_data.pos_y = parseInt(this.pos_y.getComponent(EditBox).string)
        this.m_data.size_width = parseInt(this.size_width.getComponent(EditBox).string)
        this.m_data.size_height = parseInt(this.size_height.getComponent(EditBox).string)
        this.m_data.color = this.color.getComponent(EditBox).string
        this.m_data.transparent = parseInt(this.transparent.getComponent(EditBox).string)
    }

    setupInitRotationX_Y() {
        this.m_data.rotation_x = this.m_data.size_width / 2
        this.m_data.rotation_y = this.m_data.size_height / 2
        this.rotation_x.getComponent(EditBox).string = this.m_data.rotation_x.toString()
        this.rotation_y.getComponent(EditBox).string = this.m_data.rotation_y.toString()
    }
    
    setupSprRatationAction() {
        this.hide_spr.angle = parseFloat(this.rotation.getComponent(EditBox).string)
    }
}