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)
            },
        )
    }
}