awv3/plugins/csys/index.js

⚡ AWV3 embedded CAD

import * as THREE from 'three';
import Plugin from '../../session/plugin';
import { buildFeaturePath, normalizeName } from '../../session/helpers';
import {
    Slider,
    Spacer,
    Group,
    Button,
    Input,
    Label,
    Selection,
    Checkbox,
    Dropdown,
    Console
} from '../../session/elements';

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

export default class Csys extends Plugin {
    static persistent = true;

    constructor(session, args) {
        super(session, { type: 'Csys', icon: 'csys', resources, ...args });

        this.origin = new Selection(this, { name: 'Origin', types: ['Point'] });
        this.axis = new Selection(this, { name: 'Axis', types: ['Mesh', 'LineSegments'] });
        this.secondary = new Selection(this, { name: 'Secondary', types: ['Mesh', 'LineSegments'] });
        this.refsGroup = new Group(this, {
            format: Group.Format.Table,
            children: [this.origin, this.axis, this.secondary]
        });
        this.collapse = new Group(this, {
            name: 'References',
            children: [this.refsGroup],
            format: Group.Format.Collapse
        });
        this.addElement(this.collapse);

        this.offsetInput = new Input(this, { name: 'Offset', value: '0,0,0', format: Input.Format.Vector });
        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.main = new Group(this, {
            format: Group.Format.Table,
            children: [this.offsetInput, this.sliderX, this.sliderY, this.sliderZ]
        });
        this.addElement(this.main);

        let coords = args.feature.coordinateSystem;
        this.position = new THREE.Vector3(...coords[0]);
        this.rotation = new THREE.Euler();
        let x = new THREE.Vector3(...coords[1]);
        let y = new THREE.Vector3(...coords[2]);
        let m = new THREE.Matrix4().makeBasis(x, y, x.clone().cross(y));
        this.xAxis = m;
        this.yAxis = new THREE.Matrix4();
        this.offset = new THREE.Vector3();

        this.csys = new THREE.AxisHelper(this.pool.getRadius() / 5);
        this.csys.interactive = false;
        this.csys.matrixAutoUpdate = false;
        this.pool.add(this.csys);
        this.translate();
    }

    onEnabled() {
        this.apply.observe(state => state.lastEvent, async event => {
            let feature = this.tree[this.feature];
            let xAxis = new THREE.Vector3(), yAxis = new THREE.Vector3(), zAxis = new THREE.Vector3();
            this.csys.matrix.extractBasis(xAxis, yAxis, zAxis);
            let pos = new THREE.Vector3().setFromMatrixPosition(this.csys.matrix);

            let path = buildFeaturePath(this.tree, feature.id);
            await this.connection.execute(`${path}.SetName("${feature.name}");`);

            path = buildFeaturePath(this.tree, feature.id);
            this.connection.execute(
                `${path}.OBJ_SetCoordSystem({${pos.toArray().join(',')}},{${xAxis
                    .toArray()
                    .join(',')}},{${yAxis.toArray().join(',')}});`
            );
            this.connection.recalc();
        });

        this.origin.observe(state => state.children, selection => {
            if (selection.length) {
                this.position = this.session.selector.getSelectedElements()[0].meta.position;
                this.translate();
            }
        });

        this.sliderX.observe(state => state.value, value => {
            this.rotation.x = value * Math.PI / 180;
            this.translate();
        });
        this.sliderY.observe(state => state.value, value => {
            this.rotation.y = value * Math.PI / 180;
            this.translate();
        });
        this.sliderZ.observe(state => state.value, value => {
            this.rotation.z = value * Math.PI / 180;
            this.translate();
        });

        this.offsetInput.observe(state => state.value, value => {
            this.offset = new THREE.Vector3(...value.split(','));
            this.translate();
        });

        this.axis.observe(state => state.children, selection => this.rotate(selection, 'x'));
        this.secondary.observe(state => state.children, selection => this.rotate(selection, 'y'));
    }

    onDestroyed() {
        this.csys.destroy();
    }

    translate() {
        this.csys.matrix = new THREE.Matrix4()
            .setPosition(this.position)
            .multiply(this.xAxis)
            .multiply(this.yAxis)
            .multiply(new THREE.Matrix4().makeRotationFromEuler(this.rotation))
            .multiply(new THREE.Matrix4().makeTranslation(...this.offset.toArray()));
        this.pool.view.invalidate();
    }

    rotate(selection, whichAxis) {
        if (selection.length) {
            let meta = this.session.selector.getSelectedElements()[0].meta;
            if (meta.type === 'line') var dir = meta.end.clone().sub(meta.start.clone()).normalize();
            else if (meta.type === 'plane') var dir = meta.normal.clone();
            let axis = whichAxis === 'x' ? new THREE.Vector3(1, 0, 0) : new THREE.Vector3(0, 1, 0);
            let rotAxis = axis.clone().cross(dir).normalize();
            let angle = axis.angleTo(dir);
            this[`${whichAxis}Axis`] = new THREE.Matrix4().makeRotationAxis(rotAxis, angle);
            this.translate();
        }
    }
}