awv3/plugins/test/index.js

⚡ AWV3 embedded CAD

import * as THREE from 'three';
import Object3 from 'awv3/three/object3';

import Plugin from '../../session/plugin';
import Dimension from '../dimension/';
import {
    Slider,
    Spacer,
    Group,
    Button,
    Input,
    Label,
    Selection,
    Checkbox,
    Dropdown,
    Console,
    Link,
} from '../../session/elements';

const keys = [
    'arc-3points',
    'arc-midpoint',
    'arc-tangential',
    'assembly',
    'aufklappen',
    'axis',
    'behind',
    'cancel',
    'chamfer-sketch',
    'chamfer',
    'circle-3points',
    'circle-center-radius',
    'circle-ellipse',
    'coincident',
    'colinear',
    'concentric',
    'csys',
    'down',
    'equal',
    'equal',
    'extrusion',
    'fillet-sketch',
    'fillet',
    'fixation',
    'front',
    'hdimension',
    'help',
    'horizontality',
    'isometric',
    'left',
    'line',
    'measure',
    'midpoint',
    'ok',
    'parallelity',
    'part',
    'perpendicularity',
    'plane',
    'point',
    'rectangle-2points',
    'rectangle-center-point',
    'revolve',
    'right',
    'schliessen',
    'symmetric',
    'tangency',
    'top',
    'vdimension',
    'verticality',
];

const resources = keys.reduce(
    (prev, item) => ({ ...prev, [item]: require('!!url-loader!awv3-icons/32x32/' + item + '.png') }),
    {},
);

export default class Test extends Plugin {
    constructor(session, args) {
        super(session, { type: 'Test', icon: 'ok', resources, ...args });

        this.okButton = new Button(this, { name: 'OK', color: 'blue' });
        this.cancelButton = new Button(this, { name: 'Toggle', format: Button.Format.Toggle });
        this.header = new Group(this, { format: Group.Format.Buttons, children: [this.okButton, this.cancelButton] });
        this.addElement(this.header);
        this.addElement(new Spacer(this));

        let buttons = keys.map(name => {
            if (name === 'arc-3points') {
                return new Button(this, {
                    name,
                    icon: name,
                    format: Button.Format.Menu,
                    children: [
                        new Label(this, { value: 'hi world', icon: name }),
                        new Button(this, { name: 'Test', icon: name }),
                    ],
                });
            } else return new Button(this, { name, icon: name });
        });
        this.addElement(new Group(this, { format: Group.Format.Buttons, limit: 7, children: buttons }));

        this.offsetInput = new Input(this, { name: 'Offset', value: '' });
        this.label = new Label(this, { name: 'Calc', visible: false });
        this.checkbox = new Checkbox(this, { name: 'Option', value: true });
        this.dropdown = new Dropdown(this, { name: 'Features', children: ['hello', 'there'], value: 'hello' });

        this.sliderX = new Slider(this, {
            name: 'Rotation X',
            max: 360,
            step: 10,
            positions: { 0: '0°', 90: '90°', 180: '180°', 270: '270°', 360: '360°' },
        });
        this.sliderY = new Slider(this, {
            name: 'Rotation Y',
            max: 360,
            step: 10,
            positions: { 0: '0°', 90: '90°', 180: '180°', 270: '270°', 360: '360°' },
        });
        this.sliderZ = new Slider(this, {
            name: 'Rotation Z',
            max: 360,
            step: 10,
            positions: { 0: '0°', 90: '90°', 180: '180°', 270: '270°', 360: '360°' },
        });
        this.selection = new Selection(this, { name: 'Objects', types: ['Object'] });
        this.main = new Group(this, {
            format: Group.Format.Table,
            children: [
                this.offsetInput,
                this.checkbox,
                this.label,
                this.selection,
                this.sliderX,
                this.sliderY,
                this.sliderZ,
                this.dropdown,
            ],
        });
        this.addElement(this.main);

        this.labels = new Group(this, { format: Group.Format.Default });
        this.addElement(this.labels);

        this.dimension = new Dimension(this.session, {
            name: 'This is a link',
            collapsed: false,
            closeable: false,
            parent: this.id,
        });
        this.addElement(new Link(this, { value: this.dimension.id }));
        // This makes the plugin a direct dependency that gets capped when the host goes away
        this.dependencies.push(this.dimension);

        this.console = new Console(this);
        this.addElement(this.console);
    }

    onEnabled() {
        console.log('onEnabled');
        this.resetElements();

        // The linked plugin should enable once the host enables, otherwise there may not be a session yet
        this.dimension.enabled = true;

        this.okButton.observe(state => state.lastEvent, event => console.log('OK BUTTON CLICKED'));
        this.checkbox.observe(state => state.value, value => console.log(`CHECKBOX set to ${value}`));
        this.dropdown.observe(state => state.value, value => console.log(`DROPDOWN set to ${value}`));
        this.offsetInput.observe(
            state => state.value,
            value => {
                this.label.value = value;
                this.label.visible = value.length > 0;
            },
        );

        this.console.observe(
            state => state.value,
            value => {
                console.log(value);
                this.console.children = !value ? [] : [value, value + value, value + value + value];
            },
        );

        this.console.observe(
            state => state.lastEvent,
            event => {
                console.log(event);
            },
        );

        window.selection = this.selection;
    }

    onDisabled() {
        console.log('onDisabled');
    }

    onDestroyed() {
        console.log('onDestroyed');
    }
}