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

import { _decorator, Component, Director, director, EditBox, Label, Node, ScrollView, Size, Sprite, SpriteFrame, UITransform, Vec2, Vec3 } 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';
import { res_preview } from './res_preview';
const { ccclass, property } = _decorator;

@ccclass('new_frame')
export class new_frame extends Component {
    @property(Node) scrollView:Node = null;
    @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) anchor_point_x:Node = null;
    @property(Node) anchor_point_y:Node = null;
    @property(Node) btn_anchor_point:Node = null;
    @property(Node) hide_spr:Node = null;

    @property(Node) res_preview:Node = null;

    @property(Node) btn_update_cur_pos: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_anchor_point.on(Node.EventType.TOUCH_END, ()=> {
            // console.log('设置锚点')
            if(this.m_data.url_name.length == 0 || this.m_data.url_name =='空') {
                return tools.showToast('资源是空的')
            }
            let res_sf = control.res_map.get(this.m_data.url_name)
            let res_size = new Size(this.m_data.size_width, this.m_data.size_height)
            let res_anchor = new Vec2(this.m_data.anchor_point_x, this.m_data.anchor_point_y)
            tools.show_setup_res_anchor(res_sf,res_size,res_anchor,(v:Vec2)=>{
                this.m_data.anchor_point_x = v.x
                this.m_data.anchor_point_y = v.y
                this.anchor_point_x.getComponent(EditBox).string = this.m_data.anchor_point_x.toString()
                this.anchor_point_y.getComponent(EditBox).string = this.m_data.anchor_point_y.toString()
                this.setupSprRatationAction()
            })
            // this.res_preview.active = true
            // let res_sf = control.res_map.get(this.m_data.url_name)
            // this.res_preview.getComponent(res_preview).initView(res_sf,this.m_data, (data)=> {
            //     if(data!=null) {
            //         this.m_data.anchor_point_x = data.anchor_point_x
            //         this.m_data.anchor_point_y = data.anchor_point_y
            //         this.anchor_point_x.getComponent(EditBox).string = this.m_data.anchor_point_x.toString()
            //         this.anchor_point_y.getComponent(EditBox).string = this.m_data.anchor_point_y.toString()
            //         this.setupSprRatationAction()
            //     }
            // })
        })

        this.btn_origin_res.on(Node.EventType.TOUCH_END,()=>{
            // console.log('资源原尺寸')
            if(this.m_data.url_name.length == 0 || this.m_data.url_name =='空') {
                return tools.showToast('资源是空的')
            }

            let res_sf = control.res_map.get(this.m_data.url_name)
            if(res_sf==undefined||res_sf==null) {
                return tools.showToast('资源sf是空的')
            }
            this.m_data.size_width = res_sf.originalSize.width
            this.m_data.size_height = res_sf.originalSize.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.setupSprContentSize()
        })
        
        this.btn_select_res.on(Node.EventType.TOUCH_END,()=>{
            // console.log('选择资源')
            let is_reset = false
            if(this.m_data.url_name.length == 0||this.m_data.url_name =='空') {
                is_reset = true
            }
            tools.select_res_list((data:bag_item_data)=>{
                this.m_data.url = data.url;
                this.m_data.url_name = data.name;

                let res_sf = control.res_map.get(this.m_data.url_name)
                this.hide_spr.getComponent(Sprite).spriteFrame = res_sf
                if(is_reset) {
                    this.m_data.size_width = res_sf.originalSize.width
                    this.m_data.size_height = res_sf.originalSize.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.setupInitAnchorPointXY()
                    this.setupSprRatationAction()
                    this.setupSprContentSize()
                }
            })
        })

        this.btn_update_cur_pos.on(Node.EventType.TOUCH_END, ()=> {
            let att_data = Attributes.Singleton.get_cur_att_data()
            this.m_data.pos_x = Math.floor(att_data.x)
            this.m_data.pos_y = Math.floor(att_data.y)
            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.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.anchor_point_x.on('editing-did-ended', this.change, this);
        this.anchor_point_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){
            if(this.checkAnchorXY()) {
                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.anchor_point_x = this.m_data.anchor_point_x;
            ani_frame_data.anchor_point_y = this.m_data.anchor_point_y;
            console.log("ani_frame_data//",ani_frame_data)
            if(this.checkAnchorXY()) {
                this.m_create_call(ani_frame_data)
            }
        }
    }

    public show(up_frame:ani_frame=null){
        this.scrollView.getComponent(ScrollView).scrollToTop()
        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&&url_name!='空'){
            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
            }
            if(up_frame.anchor_point_x==undefined||up_frame==null) {
                up_frame.anchor_point_x = 0.5
            }
            if(up_frame.anchor_point_y==undefined||up_frame==null) {
                up_frame.anchor_point_y = 0.5
            }
        } 
        this.m_data.rotation = up_frame?up_frame.rotation:0
        this.m_data.anchor_point_x = up_frame?up_frame.anchor_point_x:att.anchor_x
        this.m_data.anchor_point_y = up_frame?up_frame.anchor_point_y:att.anchor_y
        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){
        this.scrollView.getComponent(ScrollView).scrollToTop()
        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.hide_spr.getComponent(Sprite).spriteFrame = control.res_map.get(this.m_data.url_name)
        this.initAtt()
    }

    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.anchor_point_x==undefined) {
            this.m_data.anchor_point_x = 0.5;
        }
        if(this.m_data.anchor_point_y==undefined) {
            this.m_data.anchor_point_y = 0.5;
        }
        this.rotation.getComponent(EditBox).string =  this.m_data.rotation.toString()
        this.anchor_point_x.getComponent(EditBox).string = this.m_data.anchor_point_x.toString()
        this.anchor_point_y.getComponent(EditBox).string = this.m_data.anchor_point_y.toString()

        this.setupSprContentSize()
        this.setupSprRatationAction()
    }

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

    updateData(){
        this.m_data.rotation =  parseFloat(this.rotation.getComponent(EditBox).string) 
        this.m_data.anchor_point_x = parseFloat(this.anchor_point_x.getComponent(EditBox).string)
        this.m_data.anchor_point_y = parseFloat(this.anchor_point_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)
    }

    checkAnchorXY():boolean {
        if(this.m_data.anchor_point_x<0||this.m_data.anchor_point_x>1) {
            tools.showToast('锚点X应在0-1之间')
            return false
        }
        if(this.m_data.anchor_point_y<0||this.m_data.anchor_point_y>1) {
            tools.showToast('锚点Y应在0-1之间')
            return false
        }
        return true
    }

    setupInitAnchorPointXY() {
        this.m_data.anchor_point_x = 0.5
        this.m_data.anchor_point_y = 0.5
        this.anchor_point_x.getComponent(EditBox).string = this.m_data.anchor_point_x.toString()
        this.anchor_point_y.getComponent(EditBox).string = this.m_data.anchor_point_y.toString()
        this.hide_spr.getComponent(UITransform).setAnchorPoint(this.m_data.anchor_point_x, this.m_data.anchor_point_y)
    }

    setupSprContentSize() {
        let scale = 1
        let reference_value:number = 200
        if(this.m_data.size_width > reference_value || this.m_data.size_height > reference_value) {
            if(this.m_data.size_width > this.m_data.size_height) {
                scale = reference_value / this.m_data.size_width
            } else {
                scale = reference_value / this.m_data.size_height
            }
        }
        // console.log('scale=',scale)
        this.hide_spr.setScale(new Vec3(scale,scale))
        this.hide_spr.getComponent(UITransform).contentSize = new Size(this.m_data.size_width, this.m_data.size_height)
    }
    
    setupSprRatationAction() {
        this.hide_spr.angle = this.m_data.rotation
        this.hide_spr.getComponent(UITransform).setAnchorPoint(this.m_data.anchor_point_x, this.m_data.anchor_point_y)
    }
}