awv3/plugins/csys/index.js

⚡ AWV3 embedded CAD

import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";

var _class, _temp, _initialiseProps, _class2, _temp2, _initialiseProps2;

import * as THREE from 'three';
import React from 'react';
import PropTypes from 'prop-types';
import Plugin from '../../session/plugin';
import Graphics from './graphics';
import Object3 from '../../three/object3';
import Hud from '../../core/hud';
import { actions as connectionActions } from 'awv3/session/store/connections';
import { getPositionFromSelection } from './helpers';
import { calculateRotationMatrix } from './calculations';
var Root = (_temp = _class =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(Root, _React$Component);

  function Root(props, context) {
    var _this;

    _this = _React$Component.call(this) || this;

    _initialiseProps.call(_assertThisInitialized(_this));

    _this.connection = context.plugin.connection;
    _this.session = context.session;
    _this.pool = context.plugin.pool;
    _this.view = context.plugin.view;
    _this.graphics = props.graphics;
    _this.rotation = new THREE.Euler();
    _this.hooks = props.hooks;
    return _this;
  }

  var _proto = Root.prototype;

  _proto.render = function render() {
    var _this2 = this;

    var _state = this.state,
        activeSelector = _state.activeSelector,
        rotx = _state.rotx,
        roty = _state.roty,
        rotz = _state.rotz,
        offset = _state.offset;
    var sliderProps = {
      max: 360,
      step: 10,
      positions: {
        0: '0°',
        90: '90°',
        180: '180°',
        270: '270°',
        360: '360°'
      }
    };
    return React.createElement("group", {
      format: "Table"
    }, React.createElement("selection", {
      name: "Origin",
      active: activeSelector === 0,
      types: ['Region', 'Mesh', 'LineSegments'],
      limit: 3,
      onItems: function onItems(items) {
        if (items.length) {
          var _getPositionFromSelec;

          var position = _this2.context.plugin.position;
          position = (_getPositionFromSelec = getPositionFromSelection(_this2.context.session.selector.selectedMaterials)) !== null && _getPositionFromSelec !== void 0 ? _getPositionFromSelec : position;

          _this2.context.plugin.translate({
            position: position
          });
        }
      }
    }), React.createElement("selection", {
      active: activeSelector === 1,
      name: "Axis",
      types: ['Mesh', 'LineSegments'],
      limit: 1,
      onItems: function onItems(items) {
        if (items.length) {
          _this2.rotate(items, 'x');

          _this2.setState({
            activeSelector: 2
          });
        }
      }
    }), React.createElement("selection", {
      name: "Secondary",
      active: activeSelector === 2,
      types: ['Mesh', 'LineSegments'],
      limit: 1,
      onItems: function onItems(items) {
        if (items.length) {
          _this2.rotate(items, 'y');

          _this2.setState({
            activeSelector: undefined
          });
        }
      }
    }), React.createElement("slider", _extends({
      name: "Rotation X"
    }, sliderProps, {
      value: rotx,
      onValue: function onValue(v) {
        return _this2.setRot(v, 'x');
      }
    })), React.createElement("slider", _extends({
      name: "Rotation Y"
    }, sliderProps, {
      value: roty,
      onValue: function onValue(v) {
        return _this2.setRot(v, 'y');
      }
    })), React.createElement("slider", _extends({
      name: "Rotation Z"
    }, sliderProps, {
      value: rotz,
      onValue: function onValue(v) {
        return _this2.setRot(v, 'z');
      }
    })), React.createElement("group", {
      name: "Offset",
      format: "Rows"
    }, React.createElement("input", {
      format: "Vector",
      value: offset,
      onValue: this.setOffset
    }), React.createElement("button", {
      name: this.props.feature ? 'Update' : 'Create',
      flex: 0,
      color: "blue",
      onLastEvent: this.update
    })));
  };

  return Root;
}(React.Component), Object.defineProperty(_class, "contextTypes", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: {
    session: PropTypes.object,
    plugin: PropTypes.object
  }
}), _initialiseProps = function _initialiseProps() {
  var _this3 = this;

  Object.defineProperty(this, "state", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: {
      rotx: 0,
      roty: 0,
      rotz: 0,
      offset: '0,0,0',
      activeSelector: 0
    }
  });
  Object.defineProperty(this, "setOffset", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: function value(vec) {
      return _this3.context.plugin.translate({
        offset: new (Function.prototype.bind.apply(THREE.Vector3, [null].concat(vec.split(','))))()
      });
    }
  });
  Object.defineProperty(this, "setRot", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: function value(val, which) {
      _this3.rotation[which] = val * Math.PI / 180;

      _this3.context.plugin.translate({
        rotation: _this3.rotation
      });
    }
  });
  Object.defineProperty(this, "update", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: function () {
      var _value = _asyncToGenerator(
      /*#__PURE__*/
      _regeneratorRuntime.mark(function _callee() {
        var graphics, connection, props, featureId, rootId, result, xAxis, yAxis, position, geomInfo;
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                graphics = _this3.graphics, connection = _this3.connection, props = _this3.props;
                featureId = props.feature;

                if (!!props.feature) {
                  _context.next = 10;
                  break;
                }

                //If feature is undefined, create new coordinate system
                rootId = connection.activeRoot || connection.tree.root;
                _context.next = 6;
                return connection.execute([{
                  "Feature.CreateNamedCoordSystem": [rootId, "CSYS", {
                    "x": 0.0,
                    "y": 0.0,
                    "z": 0.0
                  }, {
                    "x": 1.0,
                    "y": 0.0,
                    "z": 0.0
                  }, {
                    "x": 0.0,
                    "y": 1.0,
                    "z": 0.0
                  }]
                }]);

              case 6:
                result = _context.sent;

                if (!(result.errors.filter(function (e) {
                  return e.errorState > 1;
                }).length !== 0)) {
                  _context.next = 9;
                  break;
                }

                return _context.abrupt("return", console.log('error'));

              case 9:
                featureId = result.results[0].result;

              case 10:
                xAxis = new THREE.Vector3(), yAxis = new THREE.Vector3();
                graphics.matrix.extractBasis(xAxis, yAxis, new THREE.Vector3());
                position = new THREE.Vector3().setFromMatrixPosition(graphics.matrix);
                _context.next = 15;
                return connection.execute([{
                  'Common.SetObjectCoordSystem': [featureId, position, xAxis, yAxis]
                }]);

              case 15:
                geomInfo = {
                  position: position,
                  xAxis: _this3.context.plugin.xAxis,
                  yAxis: _this3.context.plugin.yAxis
                };
                _this3.hooks.update && _this3.hooks.update({
                  featureId: featureId,
                  geomInfo: geomInfo
                });
                _this3.context.plugin.sourceMatrix = _this3.context.plugin.graphics.matrix;

              case 18:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this);
      }));

      return function value() {
        return _value.apply(this, arguments);
      };
    }()
  });
  Object.defineProperty(this, "rotate", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: function value(selection, whichAxis) {
      if (selection.length) {
        var _this3$context$plugin;

        var meta = _this3.context.session.selector.selectedMaterials[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();
        var rotationMatrix = calculateRotationMatrix(whichAxis, dir);

        _this3.context.plugin.translate((_this3$context$plugin = {}, _this3$context$plugin[whichAxis + "Axis"] = rotationMatrix, _this3$context$plugin));
      }
    }
  });
}, _temp);
var Csys = (_temp2 = _class2 =
/*#__PURE__*/
function (_Plugin) {
  _inheritsLoose(Csys, _Plugin);

  var _proto2 = Csys.prototype;

  _proto2.getCoordinates = function getCoordinates() {
    var coords = this.feature ? this.tree[this.feature].coordinateSystem : [[0, 0, 0], [1, 0, 0], [0, 1, 0], [0, 0, 1]];
    this.position = new (Function.prototype.bind.apply(THREE.Vector3, [null].concat(coords[0])))();
    this.rotation = new THREE.Euler();
    var x = new (Function.prototype.bind.apply(THREE.Vector3, [null].concat(coords[1])))();
    var y = new (Function.prototype.bind.apply(THREE.Vector3, [null].concat(coords[2])))();
    this.xAxis = new THREE.Matrix4().makeBasis(x, y, x.clone().cross(y));
    this.yAxis = new THREE.Matrix4();
    this.offset = new THREE.Vector3();
  };

  function Csys(session, args) {
    var _this4$pool$createInt;

    var _this4;

    _this4 = _Plugin.call(this, session, _extends({
      type: 'Csys',
      icon: 'csys',
      resources: {
        csys: require('!!url-loader!awv3-icons/32x32/csys.png')
      }
    }, args)) || this;

    _initialiseProps2.call(_assertThisInitialized(_this4));

    _this4.graphics = new Graphics();
    _this4.hud = new Hud(_this4.view);

    _this4.view.addHud(_this4.hud);

    _this4.hud.scene.add(_this4.graphics);

    _this4.getCoordinates();

    _this4.translate();

    _this4.pool.createInteraction().on((_this4$pool$createInt = {}, _this4$pool$createInt[Object3.Events.Lifecycle.Rendered] = _this4.onRender.bind(_assertThisInitialized(_this4)), _this4$pool$createInt), {
      sync: true
    });

    if (_this4.feature) {
      _this4.visibleSubscription = _this4.connection.observe(function (state) {
        var _state$tree$_this4$fe, _state$tree$_this4$fe2;

        return (_state$tree$_this4$fe = (_state$tree$_this4$fe2 = state.tree[_this4.feature]) === null || _state$tree$_this4$fe2 === void 0 ? void 0 : _state$tree$_this4$fe2.visible) !== null && _state$tree$_this4$fe !== void 0 ? _state$tree$_this4$fe : false;
      }, function (visible) {
        _this4.graphics.visible = Boolean(visible);

        _this4.getCoordinates();

        _this4.translate();

        _this4.connection.updateView();
      }, {
        fireOnStart: true
      });
    } else {
      _this4.graphics.visible = true;

      _this4.connection.updateView();
    }

    return _this4;
  }

  _proto2.onRender = function onRender() {
    var approxScale = this.view.calculateScaleFactor(new THREE.Vector3(0, 0, 0), 2);
    this.graphics.updateScale(approxScale);
  };

  _proto2.willBeDestroyed = function willBeDestroyed() {
    this.hud.destroy();
  };

  _proto2.onDestroyed = function onDestroyed() {
    this.graphics.destroy();
  };

  _proto2.onEnabled = function onEnabled() {
    this.graphics.setActive(true);
    this.sourceMatrix = this.graphics.matrix;
    this.view.invalidate();
  };

  _proto2.onDisabled = function onDisabled() {
    this.graphics.setActive(false);
    this.graphics.matrix = this.sourceMatrix;
    this.graphics.matrixAutoUpdate = false;
    this.view.invalidate();
  };

  _proto2.render = function render() {
    return React.createElement(Root, _extends({
      graphics: this.graphics
    }, this.props));
  };

  _proto2.switchToFeature = function switchToFeature(featureId) {
    featureId === undefined && (featureId = this.feature);
    var tree = this.connection.tree;
    var root = this.connection.activeRoot || tree.root;
    var features = tree[root].features;
    if (features.indexOf(featureId) != -1) this.store.dispatch(connectionActions.setActiveFeature(this.connection.id, featureId)); //TODO: else throw error.
  };

  return Csys;
}(Plugin), Object.defineProperty(_class2, "persistent", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: true
}), _initialiseProps2 = function _initialiseProps2() {
  var _this5 = this;

  Object.defineProperty(this, "translate", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: function value(args) {
      var _ref2;

      // Update local values
      if (args) Object.entries(args).forEach(function (_ref) {
        var key = _ref[0],
            value = _ref[1];
        return value && _this5[key] !== value && (_this5[key] = value);
      });
      var newMatrix = new THREE.Matrix4().setPosition(_this5.position).multiply(_this5.xAxis).multiply(_this5.yAxis).multiply(new THREE.Matrix4().makeRotationFromEuler(_this5.rotation)).multiply((_ref2 = new THREE.Matrix4()).makeTranslation.apply(_ref2, _this5.offset.toArray()));
      _this5.graphics.matrix = newMatrix;

      _this5.graphics.applyMatrix(_this5.pool.matrixWorld);

      _this5.graphics.matrixAutoUpdate = false;

      _this5.view.invalidate();
    }
  });
  Object.defineProperty(this, "setInitialPosition", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: function value(geomInfo) {
      _this5.xAxis = geomInfo.xAxis;
      _this5.yAxis = geomInfo.yAxis;
      _this5.position = geomInfo.position;

      _this5.translate();
    }
  });
}, _temp2);
export { Csys as default };