awv3/plugins/color/index.js

⚡ AWV3 embedded CAD

import * as THREE from 'three';
import { actions as connectionActions } from '../../session/store/connections';
import { actions as globalActions } from '../../session/store/globals';
import Plugin from '../../session/plugin';
import {
    Slider,
    Spacer,
    Group,
    Button,
    Input,
    Label,
    Selection,
    Checkbox,
    Dropdown,
    Console
} from '../../session/elements';

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

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

        this.solid = new Selection(this, { name: 'Solid', types: ['Mesh', 'Object'] });
        this.refsGroup = new Group(this, { format: Group.Format.Table, children: [this.solid] });
        this.addElement(this.refsGroup);
        this.addElement(new Spacer(this));
        this.noCut = new Button(this, { name: 'ISO NoCut', color: 'rgb(160,160,160)' });
        this.cut = new Button(this, { name: 'ISO Cut', color: 'rgb(204,204,204)' });
        let buttonGroup = new Group(this, { format: Group.Format.Buttons, children: [this.noCut, this.cut], flex: 3 });
        this.color = new Button(this, { name: 'Any Color', format: Button.Format.Color, color: '#28d79f', flex: 1 });
        let spacer = new Spacer(this);
        let group = new Group(this, { format: Group.Format.Rows, children: [buttonGroup, spacer, this.color] });
        this.addElement(group);
    }

    setColor(...rgb) {
        let connection = this.session.globals.activeConnection;
        let selected = this.session.selector.getSelectedElements();
        if (selected.length) {
            selected = selected[0];
            this.store.dispatch(connectionActions.setColor(connection, selected.userData.parentId, rgb));
            let color = new THREE.Color(`rgb(${rgb.join(',')})`);
            selected.animate({ materials: { meshes: [{ color, opacity: 1 }] } }).start(0);
            selected.__origProps = selected.animate({ materials: { meshes: [{ color, opacity: 1 }] } }).getProperties();
        }
    }

    onEnabled() {
        this.resetElements();
        this.noCut.observe(state => state.lastEvent, event => this.setColor(128, 128, 128));
        this.cut.observe(state => state.lastEvent, event => this.setColor(204, 204, 204));
        this.color.observe(state => state.lastEvent, event => {
            let color = new THREE.Color(event.color);
            this.setColor(color.r * 255, color.g * 255, color.b * 255);
        });
    }
}