awv3/session/element.js

⚡ AWV3 embedded CAD

import Lifecycle from './lifecycle.js';
import { halt } from '../core/error';
import { actions } from './store/elements';
import { actions as pluginActions } from './store/plugins';

export default class Element extends Lifecycle() {
    constructor(plugin = halt('element must be initialized with a plugin'), props) {
        let reflectedProps = {
            name: '',
            type: '',
            hint: '',
            hover: false,
            visible: true,
            active: true,
            collapsed: false,
            children: [],
            color: undefined,
            focus: false,
            flex: 1,
            margin: true,
            lastEvent: {},
            index: 0,
            ...props,
            plugin: plugin.id,
            managed: true
        };

        super(plugin.session, actions, state => state.elements[this.id], reflectedProps);

        // TODO: see todo below
        this.__plugin = plugin;
        plugin.dependencies.push(this);
    }

    addChild(element) {
        this.store.dispatch(actions.addChild(this.id, element instanceof Element ? element.id : element));
    }

    removeChild(element) {
        this.store.dispatch(actions.removeChild(this.id, element instanceof Element ? element.id : element));
    }

    removeAllChilds() {
        this.store.dispatch(actions.removeAllChilds(this.id));
    }

    // TODO: this can (and should) be abstracted in lifecycle and in the store via thunk
    __onDestroyed() {
        let index = this.__plugin.dependencies.indexOf(this);
        if (index > -1) this.__plugin.dependencies.splice(index, 1);
        this.store.dispatch(pluginActions.removeElement(this.__plugin.id, this.id));
    }

    static Type = {
        Group: 'Group',
        Label: 'Label',
        Input: 'Input',
        Button: 'Button',
        Checkbox: 'Checkbox',
        Dropdown: 'Dropdown',
        Selection: 'Selection',
        Console: 'Console',
        Spacer: 'Spacer',
        Divider: 'Divider',
        Slider: 'Slider',
        Link: 'Link',
        Custom: 'Custom'
    };
}