logic-helper/src/components/ChartPanel/extends/Actions.js

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

import {
    getEleType
} from '../Utils.js'
const protectedKey = ['model', 'config', 'id', 'eleType', 'el', 'category', 'key', 'events', 'eventListener'];
export default class {

    constructor() {
        this.events = {}
        this.eventListener = (e) => {
            if (e.data && getEleType(e.data) == this.eleType && e.data.key == this.key) {
                if (this.events[e.name]) {
                    this.events[e.name].forEach(listener => {
                        listener.call(this);
                    })
                }
            }
        }

    }
    setModel(model) {
        this.model = model;
        this.model.removeEventListener(this.eventListener);
        this.model.addEventListener(this.eventListener);
        this.el = this.model.$getNode(this.key);
        if(this.eleType == 'link'){
            const from = this.model.getElementById(this.config.from).node;
            const to = this.model.getElementById(this.config.to).node;
            this.name = `${from.text}>${this.text||''}>${to.text}`;
        } else{
            this.name = `${this.text}`
        }

    }
    remove() {

        if (this.eleType == 'link') {
            this.model.removeLink(this.key)
        } else {
            this.model.removeNode(this.key)
        }
        this.model.removeEventListener(this.eventListener);
    }
    update(data) {
        if (this.eleType == 'link') {
            this.model.updateLink(this.key, data)
        } else {
            this.model.updateNode(this.key, data)
        }
    }
    moveToCenter() {
        this.model.moveToCenter(this.key);
    }
    setStyle(style) {
        this.el.style = style;
        this.config.style = style;
    }

    addEventListener(event, listener) {
        if (Array.isArray(event)) {
            return event.forEach(name => {
                this.model.addEventListener(name, listener);
            })
        }
        if (typeof event == 'string') {
            if (!this.events[event]) {
                this.events[event] = new Set();
            }
            this.events[event].add(listener);
        }
    }
    removeEventListener(event, listener) {
        if (typeof event == 'string') {
            this.events[event].delete(listener);
        } else if (typeof event == 'function') {
            for (let k in this.events) {
                this.events[k].delete(listener);
            }
        }
    }


    select() {
        this.model.select(this.key, this.eleType);
    }
    unselect() {
        this.model.unselect(this.key, this.eleType);
    }

    getFromEles() {
        if (this.eleType == 'node') {
            return this.model.getAllLinksArroundNodeData(this.key).filter(item => {
                return item.to == this.key;
            }).map(item => {
                return this.model.getElementById(item.key).link;
            })
        } else {
            let from = this.model.getAllNodesArroundLinkData(this.key).from;
            if (from) {
                return [this.model.getElementById(from.key).node];
            }
            return [];
        }
    }
    getToEles() {
        if (this.eleType == 'node') {
            return this.model.getAllLinksArroundNodeData(this.key).filter(item => {
                return item.from == this.key;
            }).map(item => {
                return this.model.getElementById(item.key).link;
            })
        } else {
            let to = this.model.getAllNodesArroundLinkData(this.key).to;
            if (to) {
                return [this.model.getElementById(to.key).node];
            }
            return [];
        }

    }
    getToNodes() {
        if (this.eleType == 'node') {
            return this.model.getAllNodesArroundNodeData(this.key).to.map(node => {
                return this.model.getElementById(node.key).node;
            });
        } else {
            return this.getToEles();
        }
    }
    getFromNodes() {
        if (this.eleType == 'node') {
            return this.model.getAllNodesArroundNodeData(this.key).from.map(node => {
                return this.model.getElementById(node.key).node;
            });

        } else {
            return this.getFromEles();
        }
    }
    setData(data) {
        if (typeof data == 'object') {
            for (let k in data) {
                if (protectedKey.includes(k)) {
                    continue;
                }
                this[k] = data[k];
                this.config[k] = data[k];
                if (this.eleType == 'node') {
                    this.model.setNodeProperty(this.key, k, data[k])
                } else {
                    this.model.setLinkProperty(this.key, k, data[k])
                }
            }

        }
        return this;
    }
    getRef() {
        return this.el;
    }
    highlight(single=false) {
        if(this.eleType == 'node') {
            this.model.highlightNode(this.key);
            if(single){
                Object.keys(this.model.nodes).forEach(key=>{
                    if(key != this.key){
                        this.model.unhighlightNode(key);
                    }
                })
            }
        } else {
            this.model.highlightLink(this.key);
            if(single){
                Object.keys(this.model.links).forEach(key=>{
                    if(key != this.key){
                        this.model.unhighlightLink(key);
                    }
                })
            }
        }
    }
    unhighlight() {
        if(this.eleType == 'node') {
            this.model.unhighlightNode(this.key);
        } else {
            this.model.unhighlightLink(this.key);
        }
    }
    gray() {
        if(this.eleType == 'node') {
            this.model.grayNode(this.key);
        } else {
            this.model.grayLink(this.key);
        }
    }
    ungray() {
        if(this.eleType == 'node') {
            this.model.ungrayNode(this.key);
        } else {
            this.model.ungrayLink(this.key);
        }
    }
}