yinmi_h5_edit/assets/script/edit/widget_item.ts

import { _decorator, assetManager, Color, Component, Director, director, EventTouch, ImageAsset, instantiate, Label, math, Node, NodePool, Prefab, Size, Sprite, SpriteFrame, Texture2D, Toggle, Tween, tween, UITransform, Vec2, Vec3 } from 'cc';
import { att_click_data, att_count_down, att_drag_data, att_question_select, att_slide_data, att_text_sound_data, att_top_data, attributes_data, widget_item_data } from '../../data/data';
import { ClientEvent } from '../clientEvent';
import { config } from '../config';
import { scroll_scene } from './scroll_scene';
import { slide } from './slide';
import { ui_top } from './uiWidget/ui_top';
import { tools } from '../tools';
import { Text_Sound } from './uiWidget/Text_Sound';
import { question_select } from './uiWidget/question_select';
import { count_down } from './uiWidget/count_down';
import { Attributes } from './Attributes';
const { ccclass, property } = _decorator;

@ccclass('widget_item')
export class widget_item extends Component {
    @property(Node) lab_name:Node = null;
    @property(Node) spr:Node = null;
    @property(Node) slide:Node = null;
    @property(Node) drag:Node = null;
    @property(Node) lab_drag:Node = null;
    @property(Node) img_select:Node = null;
    @property(Prefab) ui_prefab:Prefab = null;
    @property(Prefab) text_sound_pf:Prefab = null;
    @property(Prefab) count_down_pf:Prefab = null;
    @property(Prefab) question_select_pf:Prefab = null;
    @property(Node) toggle_active:Node = null;
    @property(Node) toggle_check:Node = null;
    @property(Node) other_drag_content:Node = null;
    private m_data:widget_item_data = null;
    private m_att:attributes_data = null;
    private isMove:boolean = false;
    private call_back = null;
    private m_ui_widget:Node = null;
    private m_text_sound:Node = null;
    private m_question_select:Node = null;
    private m_count_down:Node = null;
    private x_len:number = 0;
    private y_len:number = 0;
    public initView(data:widget_item_data,call=null,cur_select_id:number=-1){
        this.m_data = data;
        this.lab_name.getComponent(Label).string = data.name + (this.m_data.att?`id:${this.m_data.att.id}`:"");
        if(data.att!=null){
            this.call_back = call
            if(cur_select_id===null){
                this.toggle_active.active = true;
                this.toggle_check.getComponent(Toggle).isChecked = this.m_data.att.edit_active
                this.toggle_check.on(Node.EventType.TOUCH_END,()=>{
                    if(this.call_back!=null){
                        this.m_data.att.edit_active = !this.m_data.att.edit_active;
                        this.call_back(this.m_data)
                    }
                })
            }else{
                this.node.on(Node.EventType.TOUCH_END,()=>{
                    if(this.call_back!=null){
                        this.call_back(this.m_data)
                    }
                })
                if(cur_select_id===this.m_data.att.id){
                    this.img_select.active = true;
                }
            }

            this.initWidgetHaveAtt(data.att)
            this.node.active = true
        }else{
            this.node.on(Node.EventType.MOUSE_DOWN,this.onDragWidget.bind(this),this)
        }
    }

    public getShowWidgetData(){
        return this.m_data;
    }

    public setSelectStatus(){
        if(this.call_back!=null){
            this.m_data.att.edit_active = true;
            this.toggle_check.getComponent(Toggle).isChecked = true
            this.call_back(this.m_data)
        }
    }

    public setUnSelectStatus(){
        if(this.call_back!=null){
            this.m_data.att.edit_active = false;
            this.toggle_check.getComponent(Toggle).isChecked = false
            this.call_back(this.m_data)
        }
    }

    onDragWidget(){
        ClientEvent.dispatchEvent(config.Event.DragWidget,this.node)
    }
    initDrag(){
        this.drag.on(Node.EventType.TOUCH_MOVE,(et:EventTouch)=>{
            let p = new Vec3(et.getUILocation().x,et.getUILocation().y)
            let n_p = this.node.getComponent(UITransform).convertToNodeSpaceAR(p)
            this.drag.position = n_p;

            this.m_att.drag_data.drag_pos_x = this.drag.position.x;
            this.m_att.drag_data.drag_pos_y = this.drag.position.y;
            
        })
        if(this.m_att.drag_data.other_drag_list==undefined){
            this.m_att.drag_data.other_drag_list = []
        }
        this.other_drag_content.removeAllChildren()
        for (let index = 0; index < this.m_att.drag_data.other_drag_list.length; index++) {
            const element =  this.m_att.drag_data.other_drag_list[index];
            let item =  instantiate(this.drag)
            item.off(Node.EventType.TOUCH_MOVE)
            item.parent = this.other_drag_content;
            item.position = new Vec3(element.drag_pos_x,element.drag_pos_y)
            item.getComponent(UITransform).setContentSize(new Size(element.drag_size_width,element.drag_size_height))
            item.on(Node.EventType.TOUCH_MOVE,(et:EventTouch)=>{
                let p = new Vec3(et.getUILocation().x,et.getUILocation().y)
                let n_p = this.node.getComponent(UITransform).convertToNodeSpaceAR(p)
                item.position = n_p;
                this.m_att.drag_data.other_drag_list[index].drag_pos_x = item.position.x;
                this.m_att.drag_data.other_drag_list[index].drag_pos_y = item.position.y;
            })
            item.getComponent(Sprite).color = Color.YELLOW
        }
        this.lab_drag.getComponent(Label).string = `${this.m_data.name}id:${this.m_att.id}`
    }
    initSlide(){
        this.slide.getComponent(slide).updateDistance(this.m_att.slide_data.slide_dir,this.m_att.slide_data.slide_distance)
    }
    initUiWidget(){
        if(this.call_back==null){
            let ui = instantiate(this.ui_prefab)
            ui.parent = this.node;
            ui.getComponent(ui_top).initView(this.m_att.top_data)
            this.m_ui_widget = ui;
            this.node.getComponent(UITransform).contentSize = new Size(1080,1020)
        }
    }

    initTextSound(){
        if(this.call_back==null){
            let text_sound = instantiate(this.text_sound_pf)
            text_sound.parent = this.node;
            text_sound.getComponent(Text_Sound).initView(this.m_att.text_sound_data)
            this.m_text_sound = text_sound;
            this.node.getComponent(UITransform).contentSize = new Size(1080,1020)
        }
    }

    initQuestionSelect(){
        if(this.call_back==null){
            let node_question_select = instantiate(this.question_select_pf)
            node_question_select.parent = this.node;
            node_question_select.getComponent(question_select).initView(this.m_att.question_select)
            this.m_question_select = node_question_select;
            this.node.getComponent(UITransform).contentSize = new Size(1080,1020)
        }
    }

    initCountDown(){
        if(this.call_back==null){
            let _time_count = instantiate(this.count_down_pf)
            _time_count.parent = this.node;
            _time_count.getComponent(count_down).initView(this.m_att.count_down)
            this.m_count_down = _time_count;
            this.node.getComponent(UITransform).contentSize = new Size(1080,1020)
        }
    }
    initWidgetHaveAtt(att:attributes_data){
        if(att!=null){
            this.lab_name.active = true;
            this.m_att = att;
            this.initWidgetAtt()
        }else{
            this.m_att = new attributes_data
            this.m_att.id = config.getNewId();
        }

        if(this.m_data.type===config.Widget_Type_List.DRAG_TYPE){
            if(this.m_att.drag_data===null){
                this.m_att.drag_data = new att_drag_data;
            }
            this.drag.active = true;
            this.initDrag()
        }else if(this.m_data.type===config.Widget_Type_List.SLIDE_TYPE){
            this.slide.active = true;
            if(this.m_att.slide_data===null){
                this.m_att.slide_data = new att_slide_data;
            }
            this.initSlide()
        }else if(this.m_data.type===config.Widget_Type_List.CLICK_TYPE){
            if(this.m_att.click_data===null){
                this.m_att.click_data = new att_click_data;
            }
            this.lab_name.getComponent(Label).string = config.clcik_type_map.get(this.m_att.click_data.click_type) +`id${this.m_att.id}`
        }else if(this.m_data.type===config.Widget_Type_List.UI_TOP){
            if(this.m_att.top_data===null){
                this.m_att.top_data = new att_top_data;
            }
            this.initUiWidget()
            this.lab_name.getComponent(Label).string = `弹窗:${config.top_view_type_map.get(this.m_att.top_data.top_ui_type)}:id${this.m_att.id}`
        }else if(this.m_data.type===config.Widget_Type_List.TEXT_SOUND){
            if(this.m_att.text_sound_data===null){
                this.m_att.text_sound_data = new att_text_sound_data;
            }
            this.lab_name.getComponent(Label).string =`文本和语音-id:${this.m_att.id}`
            this.initTextSound()
        }else if(this.m_data.type===config.Widget_Type_List.QUESTION_SELECT){
            if(this.m_att.question_select===null){
                this.m_att.question_select = new att_question_select;
            }
            this.initQuestionSelect()
            this.lab_name.getComponent(Label).string =`问题选择-id:${this.m_att.id}`
        }else if(this.m_data.type===config.Widget_Type_List.COUNT_DOWN){
            if(this.m_att.count_down===null){
                this.m_att.count_down = new att_count_down;
            }
            this.initCountDown()
            this.lab_name.getComponent(Label).string =`倒计时-id:${this.m_att.id}`
        }
        this.node.active = this.m_att.edit_active
    }
    public initWidgetByScene(data:widget_item_data,att:attributes_data=null){
        this.m_data = data;
        this.initWidgetHaveAtt(att)
        if(this.m_data.type===config.Widget_Type_List.UI_TOP){ //弹窗不可以拖动
            this.node.on(Node.EventType.MOUSE_DOWN,(et:EventTouch)=>{
                ClientEvent.dispatchEvent(config.Event.UpdateAttributes,this.getWidgetAtt())
            })
        }else if(this.m_data.type===config.Widget_Type_List.TEXT_SOUND){
            this.node.on(Node.EventType.MOUSE_DOWN,(et:EventTouch)=>{
                ClientEvent.dispatchEvent(config.Event.UpdateAttributes,this.getWidgetAtt())
            })
        }else{
            this.node.on(Node.EventType.TOUCH_MOVE,(et:EventTouch)=>{
                if(this.isMove){
                    let p = new Vec3(et.getUILocation().x,et.getUILocation().y)
                    let n_p = this.node.parent.getComponent(UITransform).convertToNodeSpaceAR(p)
                    let offset_x = this.x_len;
                    let offset_y = this.y_len;
                    this.node.position = new Vec3(n_p.x-offset_x,n_p.y-offset_y);
                    if(this.node.parent.name=="content"){
                        this.node.parent.parent.parent.getComponent(scroll_scene).stopTouch()
                    }
                    ClientEvent.dispatchEvent(config.Event.UpdateAttributes,this.getWidgetAtt())
                }
            })
            this.node.on(Node.EventType.MOUSE_DOWN,(et:EventTouch)=>{
                let pos = this.node.parent.getComponent(UITransform).convertToWorldSpaceAR(this.node.position)
                if(this.x_len==0){
                    this.x_len = (et.getUILocation().x - pos.x)*2;
                    this.y_len = (et.getUILocation().y - pos.y)*2;
                    let p = new Vec3(et.getUILocation().x,et.getUILocation().y)
                    let n_p = this.node.parent.getComponent(UITransform).convertToNodeSpaceAR(p)
                    this.node.position = new Vec3(n_p.x-this.x_len,n_p.y-this.y_len);
                    // console.log("a_x",this.x_len, this.y_len ,et.getUILocation().x,this.m_att.width)
                }
                // console.log("this.x_len",this.x_len,this.y_len)
                this.isMove = true;
                ClientEvent.dispatchEvent(config.Event.UpdateAttributes,this.getWidgetAtt())
            })
    
            this.node.on(Node.EventType.MOUSE_LEAVE,()=>{
                if(this.node.parent.name=="content"){
                    this.node.parent.parent.parent.getComponent(scroll_scene).startTouch()
                }
                this.isMove = false;
                this.x_len =  0;
                this.y_len = 0;
            })
            this.node.on(Node.EventType.TOUCH_END,()=>{
                if(this.node.parent.name=="content"){
                    this.node.parent.parent.parent.getComponent(scroll_scene).startTouch()
                }
                this.isMove = false;
                this.x_len =  0;
                this.y_len = 0;
            })
          
        }
        ClientEvent.dispatchEvent(config.Event.UpdateAttributes,this.getWidgetAtt())
        ClientEvent.on(config.Event.UpdateAttributesToView,this.UpdateAttributesToView,this)

    }
    protected onDestroy(): void {
        ClientEvent.off(config.Event.UpdateAttributesToView,this.UpdateAttributesToView,this)
    }

    UpdateAttributesToView(data:attributes_data,update_type:string){
        if(this.m_att===null){
            return;
        }
        if(data.id===this.m_att.id){
            switch(update_type){
                case config.attributes_list_type.pos:
                    this.m_att.x = data.x;
                    this.m_att.y = data.y;
                    this.m_att.z = data.z;
                    this.node.setSiblingIndex(this.m_att.z)
                    this.node.position = new Vec3(data.x,data.y)
                    break;
                case config.attributes_list_type.animation:
                    this.m_att.animation_list = data.animation_list;
                    break;               
                case config.attributes_list_type.size:
                    this.m_att.width = data.width;
                    this.m_att.height = data.height;
                    this.spr.getComponent(UITransform).contentSize = new Size(data.width,data.height)
                    this.node.getComponent(UITransform).contentSize  = this.spr.getComponent(UITransform).contentSize
                    break;
                case config.attributes_list_type.url:
                    this.m_att.src = data.src
                    this.m_att.src_name = data.src_name
                    if(this.m_att.src.length<=0){
                        this.spr.getComponent(Sprite).spriteFrame = null
                    }else{
                        assetManager.loadRemote<ImageAsset>(this.m_att.src, (err, imageAsset2)=>{
                            if (!err && imageAsset2) {        
                                this.lab_name.active = false;
                                const texture = new Texture2D();
                                texture.image = imageAsset2;
                                let spFrame2 = new SpriteFrame();     
                                spFrame2.texture = texture;
                                this.spr.getComponent(Sprite).spriteFrame = spFrame2
                                this.spr.getComponent(UITransform).contentSize = new Size(data.width,data.height)
                                director.once(Director.EVENT_AFTER_DRAW,()=>{
                                    this.node.getComponent(UITransform).contentSize  = this.spr.getComponent(UITransform).contentSize
                                })
                            }
                        }); 
                    }
           
                    break;
                case config.attributes_list_type.origin:
                    if(this.m_att.src.length>0){
                        this.spr.getComponent(Sprite).sizeMode = Sprite.SizeMode.RAW;
                        director.once(Director.EVENT_AFTER_DRAW,()=>{
                            console.log("Director.EVENT_AFTER_DRAW")
                            this.m_att.width =  this.spr.getComponent(UITransform).contentSize.width;
                            this.m_att.height =  this.spr.getComponent(UITransform).contentSize.height;
                            director.once(Director.EVENT_AFTER_DRAW,()=>{
                                this.node.getComponent(UITransform).contentSize  = this.spr.getComponent(UITransform).contentSize
                            })
                            ClientEvent.dispatchEvent(config.Event.UpdateAttributes,this.getWidgetAtt())
                        })
                    }
                    break;
                case config.attributes_list_type.delete:
                    this.node.destroy()
                    this.node.removeFromParent()
                    ClientEvent.dispatchEvent(config.Event.UpdateAttributes,null)
                    ClientEvent.dispatchEvent(config.Event.RemoveWidget,this.node)
                break;
                case config.attributes_list_type.drag:
                    this.m_att.drag_data = data.drag_data
                    if(this.m_data.type===config.Widget_Type_List.DRAG_TYPE){
                        this.drag.getComponent(UITransform).contentSize = new Size(data.drag_data.drag_size_width,data.drag_data.drag_size_height);
                        this.drag.position = new Vec3( this.m_att.drag_data.drag_pos_x , this.m_att.drag_data.drag_pos_y)
                        if(this.m_att.drag_data.other_drag_list==undefined){
                            this.m_att.drag_data.other_drag_list = []
                        }
                        this.other_drag_content.removeAllChildren()
                        for (let index = 0; index < this.m_att.drag_data.other_drag_list.length; index++) {
                            const element =  this.m_att.drag_data.other_drag_list[index];
                            let item =  instantiate(this.drag)
                            item.off(Node.EventType.TOUCH_MOVE)
                            item.parent = this.other_drag_content;
                            item.position = new Vec3(element.drag_pos_x,element.drag_pos_y)
                            item.getComponent(UITransform).setContentSize(new Size(element.drag_size_width,element.drag_size_height))
                            item.on(Node.EventType.TOUCH_MOVE,(et:EventTouch)=>{
                                let p = new Vec3(et.getUILocation().x,et.getUILocation().y)
                                let n_p = this.node.getComponent(UITransform).convertToNodeSpaceAR(p)
                                item.position = n_p;
                                this.m_att.drag_data.other_drag_list[index].drag_pos_x = item.position.x;
                                this.m_att.drag_data.other_drag_list[index].drag_pos_y = item.position.y;
                            })
                            item.getComponent(Sprite).color = Color.YELLOW
                        }
                    }
                break;
                case config.attributes_list_type.drag_err_back_status:
                    if(this.m_data.type===config.Widget_Type_List.DRAG_TYPE){
                        this.m_att.drag_data.is_err_drag_back = data.drag_data.is_err_drag_back;
                    }
                break;
                case config.attributes_list_type.slide:
                    if(this.m_data.type===config.Widget_Type_List.SLIDE_TYPE){
                        this.m_att.slide_data.slide_dir = data.slide_data.slide_dir;
                        this.m_att.slide_data.slide_distance = data.slide_data.slide_distance;
                        this.m_att.slide_data.slide_num = data.slide_data.slide_num;
                        this.slide.getComponent(slide).updateDistance(this.m_att.slide_data.slide_dir,this.m_att.slide_data.slide_distance)
                    }
                break;
                case config.attributes_list_type.click:
                    if(this.m_data.type===config.Widget_Type_List.CLICK_TYPE){
                        this.m_att.click_data = data.click_data;
                        this.lab_name.getComponent(Label).string = config.clcik_type_map.get(this.m_att.click_data.click_type)
                    }
                case config.attributes_list_type.is_interaction:
                    this.m_att.is_interaction = data.is_interaction;
                break;
                case config.attributes_list_type.find_widget_pos:
                    this.Shiny()
                break;
                case config.attributes_list_type.active:
                    this.m_att.edit_active = data.edit_active;
                    this.node.active = this.m_att.edit_active
                    this.toggle_check.getComponent(Toggle).isChecked = this.m_att.edit_active
                break;
                case config.attributes_list_type.top:
                    this.m_att.top_data = data.top_data;
                    if(this.m_ui_widget!=null){
                        this.m_ui_widget.getComponent(ui_top).changeData(this.m_att.top_data)
                    }
                break;
                case config.attributes_list_type.text_sound:
                    this.m_att.text_sound_data = data.text_sound_data;
                    if(this.m_text_sound!=null){
                        this.m_text_sound.getComponent(Text_Sound).updateView(this.m_att.text_sound_data)
                    }
                break;
                case config.attributes_list_type.question_select:
                    this.m_att.question_select = data.question_select;
                    if(this.m_question_select!=null){
                        this.m_question_select.getComponent(question_select).updateView(this.m_att.question_select)
                    }
                break;
                case config.attributes_list_type.count_down:
                    this.m_att.count_down = data.count_down;
                    if(this.m_count_down!=null){
                        this.m_count_down.getComponent(count_down).updateView(this.m_att.count_down)
                    }
                break;

                case config.attributes_list_type.zIndex:
                    this.m_att.zIndex = data.zIndex;
                break;
                case config.attributes_list_type.dir:
                    this.m_att.img_dir = data.img_dir;
                    this.updateDir()
                break;
                case config.attributes_list_type.show:
                    this.m_att.is_show = data.is_show;
                break;
            }
        }
        director.once(Director.EVENT_AFTER_DRAW,()=>{
            ClientEvent.dispatchEvent(config.Event.updateWidgetData)
        })
    }

    updateDir(){
        if(this.call_back==null){
            switch (this.m_att.img_dir) {
                case config.widget_scale_dir.left:
                    this.spr.scale = new Vec3(-1,1)
                break;
                case config.widget_scale_dir.up:
                    this.spr.scale = new Vec3(1,-1)
                break;    
                case config.widget_scale_dir.normal:
                    this.spr.scale = new Vec3(1,1)
                break;
            }
        }
    }

    Shiny(){
        this.img_select.active = true;
        this.img_select.getComponent(UITransform).setContentSize(this.node.getComponent(UITransform).contentSize)
        Tween.stopAllByTarget(this.img_select)
        tween(this.img_select).delay(0.3).hide().delay(0.3).show().delay(0.3).hide().delay(0.3).show().delay(0.3).call(()=>{
            this.img_select.active = false;
        }).start()
    }
    
    public getWidgetAtt(){
        this.m_att.name = this.m_data.name!=""?this.m_data.name:"普通控件";
        this.m_att.height = this.spr.getComponent(UITransform).contentSize.height;
        this.m_att.width = this.spr.getComponent(UITransform).contentSize.width;
        this.m_att.x = this.node.position.x;
        this.m_att.widget_type = this.m_data.type;
        this.m_att.y = this.node.position.y;
        this.m_att.z = this.node.getSiblingIndex();
        this.m_att.type = config.attributes_type.widget;
        this.m_att.src_name = this.m_att.src.length>0? this.m_att.src_name:"空";
        if(this.m_att.drag_data!=null){
            this.m_att.drag_data.drag_pos_x = this.drag.position.x;
            this.m_att.drag_data.drag_pos_y = this.drag.position.y;
            this.m_att.drag_data.drag_size_width = this.drag.getComponent(UITransform).contentSize.width;
            this.m_att.drag_data.drag_size_height = this.drag.getComponent(UITransform).contentSize.height;
        }
        return this.m_att;
    }

    initWidgetAtt(){
        if(this.call_back==null){
            this.node.position =  new Vec3(this.m_att.x,this.m_att.y)
            this.node.getComponent(UITransform).setContentSize(new Size( this.m_att.width,this.m_att.height))
            if(this.m_att.drag_data!=null){
                this.drag.position =  new Vec3(this.m_att.drag_data.drag_pos_x,this.m_att.drag_data.drag_pos_y)
                this.drag.getComponent(UITransform).setContentSize(new Size(this.m_att.drag_data.drag_size_width ,this.m_att.drag_data.drag_size_height ))
            }
            this.spr.getComponent(UITransform).setContentSize(this.node.getComponent(UITransform).contentSize)
            this.lab_name.getComponent(Label).string = this.m_att.name+"id:"+this.m_att.id;;
        }else{
            this.lab_name.getComponent(Label).string = this.m_data.name+"id:"+this.m_att.id;
        }
        if(this.m_att.src!=""&&this.m_att.src.length>0){
            assetManager.loadRemote<ImageAsset>(this.m_att.src, (err, imageAsset2)=>{
                if (!err && imageAsset2) {        
                    const texture = new Texture2D();
                    texture.image = imageAsset2;
                    let spFrame2 = new SpriteFrame();     
                    spFrame2.texture = texture;
                    this.spr.getComponent(Sprite).spriteFrame = spFrame2
                    
                }
            }); 
        }
        //进行数据差矫正
        let t_data = new attributes_data
        for (const key in t_data) {
            if (Object.prototype.hasOwnProperty.call(t_data ,key)) {
                const element = t_data[key];
                if(this.m_att[key]===undefined){
                    this.m_att[key] = element;
                }
            }
        }
        this.updateDir()

    }
    public getData(){
        if(this.m_att!=null){
            this.getWidgetAtt()
        }
        this.m_data.att = this.m_att;
        return this.m_data;
    }

    public setData(data){
        this.m_data = data;
    }


}