awv3/plugins/test/index.js

⚡ AWV3 embedded CAD

import Plugin from '../../session/plugin'
import { Group, Button, Label, Dropdown, Link } from '../../session/elements'
import React, { Component, connect } from '../../session/renderer'
import { actions as globalActions } from '../../session/store/globals'

class SpecialButton extends Component {
    state = { flag: false }
    constructor(p) {
        super(p)
        //console.log('   constructor')
    }
    componentWillMount() {
        //console.log('   willmount')
    }
    componentWillUnmount() {
        //console.log('   willunmount')
    }
    render = ({ highlight, onLastEvent }, { flag }) => [
        <Button name="?" />,
        <Button
            name={(highlight ? 'active' : 'inactive') + ' ' + (flag ? '👌' : '👎')}
            color={highlight && 'pink'}
            onLastEvent={() => this.setState({ flag: !flag }) || onLastEvent()}
        />,
    ]
}

class ButtonGroup extends Component {
    state = { current: 'A', visible: true }
    render = ({ color }, { current, visible }) =>
        <Group>
            <Dropdown items={['A', 'B', 'C']} value={current} onValue={current => this.setState({ current })} />
            <Group format="Rows">
                <Button name="A" color={current === 'A' && color} onLastEvent={() => this.setState({ current: 'A' })} />
                <Button name="B" color={current === 'B' && color} onLastEvent={() => this.setState({ current: 'B' })} />
                {visible &&
                    <SpecialButton highlight={current === 'C'} onLastEvent={() => this.setState({ current: 'C' })} />}
                <Button color="black" name="toggle" onLastEvent={() => this.setState({ visible: !visible })} />
            </Group>
        </Group>
}

class Buttons extends Component {
    render = ({ children }) => children
}

class Item extends Component {
    componentWillMount() {
        console.log(this.plugin.id, 'componentWillMount')
    }
    componentWillUnmount() {
        console.log(this.plugin.id, 'componentWillUnmount')
    }
    render({ id }) {
        return <Label value={`my id is ${id}`} />
    }
}

class Counter extends Component {
    state = { count: 2 }
    render({}, { count }, set) {
        return (
            <Group>
                <Label value={count} />
                <Group format={Group.Format.Rows}>
                    <Button name="+" onLastEvent={() => set({ count: count + 1 })} />
                    <Button name="-" onLastEvent={() => set({ count: count - 1 })} />
                    <Button name="✘" onLastEvent={() => set({ count: 0 })} />
                </Group>
                {new Array(count).fill(0).map((i, key) => <Item key={key} id={key} />)}
            </Group>
        )
    }
}

@connect(state => ({ camera: state.globals.camera }))
class ControlGroup extends Component {
    render = ({ camera }) =>
        <Group>
            <Label value={camera} />
            <Button
                name="toggle cam"
                onLastEvent={() =>
                    this.dispatch(globalActions.setCamera(camera === 'orthographic' ? 'perspective' : 'orthographic'))}
            />
            <Buttons>
                <ButtonGroup color="red" />
                <ButtonGroup color="green" />
                <Link value={this.plugin.embed.id} />
            </Buttons>
            <Counter />
        </Group>
}

class Embed extends Plugin {
    constructor(session, args) {
        super(session, { type: 'Embed', icon: 'ok', ...args })
    }

    render() {
        return <Counter />
    }
}

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

    render() {
        return <ControlGroup />
    }

    onEnabled() {
        this.embed = new Embed(this.session)
        this.embed.enabled = true;
    }

    onDisabled() {
        console.log("i should destroy")
        this.embed.destroy()
    }
}