awv3/plugins/dimension/graphics/base.js

⚡ AWV3 embedded CAD

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = undefined;

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _isInteger = require('babel-runtime/core-js/number/is-integer');

var _isInteger2 = _interopRequireDefault(_isInteger);

var _getIterator2 = require('babel-runtime/core-js/get-iterator');

var _getIterator3 = _interopRequireDefault(_getIterator2);

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _get2 = require('babel-runtime/helpers/get');

var _get3 = _interopRequireDefault(_get2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _cloneDeep = require('lodash/cloneDeep');

var _cloneDeep2 = _interopRequireDefault(_cloneDeep);

var _three = require('three');

var THREE = _interopRequireWildcard(_three);

var _object = require('../../../three/object3');

var _object2 = _interopRequireDefault(_object);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

//note: all these geometries must have unit size here
//the real sizes of objects are set in onRender method
var pointGeometry = new THREE.SphereBufferGeometry(1, 16, 16);
var pointMaterial = new THREE.MeshBasicMaterial({ color: 0xc23369, transparent: true, opacity: 0.3 });
var lineGeometry = new THREE.CylinderBufferGeometry(1, 1, 1);
var lineMaterial = new THREE.MeshBasicMaterial({ color: 0xc23369 });
var arcSegmentGeometry = new THREE.CylinderBufferGeometry(1, 1, 1, 4, 1);
var arcSegmentMaterial = new THREE.MeshBasicMaterial({ color: 0xc23369 });
var arrowGeometry = new THREE.ConeBufferGeometry(1, 1);
arrowGeometry.translate(0, -0.5, 0);
var arrowMaterial = new THREE.MeshBasicMaterial({ color: 0xc23369 });
var arcSegments = 128;

var BaseGraphics = function (_THREE$Object3D) {
    (0, _inherits3.default)(BaseGraphics, _THREE$Object3D);

    function BaseGraphics(plugin) {
        var nLines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

        var _this$dimensionPoint$;

        var nArcs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
        var nArrows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
        (0, _classCallCheck3.default)(this, BaseGraphics);

        var _this = (0, _possibleConstructorReturn3.default)(this, (BaseGraphics.__proto__ || (0, _getPrototypeOf2.default)(BaseGraphics)).call(this));

        _this.plugin = plugin;
        _this.dimensionPoint = new THREE.Mesh(pointGeometry, pointMaterial.clone());
        _this.dimensionPoint.renderOrder = -1000;
        _this.dimensionPoint.createInteraction().on((_this$dimensionPoint$ = {}, (0, _defineProperty3.default)(_this$dimensionPoint$, _object2.default.Events.Interaction.Hovered, function (hitObject) {
            this.view.setCursor('grab');
            this.animate({ material: { color: new THREE.Color('#28d79f'), opacity: 1.0 } }).start(0);
        }), (0, _defineProperty3.default)(_this$dimensionPoint$, _object2.default.Events.Interaction.Unhovered, function (hitObject) {
            this.animate({ material: { color: new THREE.Color('#c23369'), opacity: pointMaterial.opacity } }).start(1000);
        }), (0, _defineProperty3.default)(_this$dimensionPoint$, _object2.default.Events.Interaction.Clicked, function (hitObject) {
            this.parent.plugin.filter.value = this.parent.lastState.members.paramName.value;
        }), (0, _defineProperty3.default)(_this$dimensionPoint$, _object2.default.Events.Interaction.Picked, function (hitObject) {
            this.view.controls.enabled = false;
        }), (0, _defineProperty3.default)(_this$dimensionPoint$, _object2.default.Events.Interaction.Dropped, function (hitObject) {
            this.view.setCursor('grab');
            this.view.controls.enabled = true;
            var id = this.parent.userData.meta.id,
                _position = this.position,
                x = _position.x,
                y = _position.y,
                z = _position.z;
            if (id) this.parent.plugin.getMemberDescriptor(id, "dimPt").expression = '{' + x + ', ' + y + ', ' + z + '}';
        }), (0, _defineProperty3.default)(_this$dimensionPoint$, _object2.default.Events.Interaction.Dragged, function (hitObject) {
            this.view.setCursor('grabbing');
            var ray = hitObject.ray.clone().applyMatrix4(new THREE.Matrix4().getInverse(this.parent.matrixWorld));
            var state = (0, _cloneDeep2.default)(this.parent.lastState);
            ray.intersectPlane(new THREE.Plane(new THREE.Vector3(0, 0, 1))).toArray(state.members.dimPt.value);
            this.parent.updateFromState(state);
        }), (0, _defineProperty3.default)(_this$dimensionPoint$, _object2.default.Events.Lifecycle.Rendered, _this.onRender.bind(_this)), _this$dimensionPoint$));
        _this.add(_this.dimensionPoint);
        if (nLines) {
            _this.lines = [];
            for (var i = 0; i < nLines; ++i) {
                _this.lines.push(new THREE.Mesh(lineGeometry, lineMaterial));
            }_this.add.apply(_this, (0, _toConsumableArray3.default)(_this.lines));
        }
        if (nArcs) {
            _this.arcs = [];
            for (var _i = 0; _i < nArcs; ++_i) {
                _this.arcs.push([]);
                for (var j = 0; j < arcSegments; ++j) {
                    _this.arcs[_i].push(new THREE.Mesh(arcSegmentGeometry, arcSegmentMaterial));
                    _this.add.apply(_this, (0, _toConsumableArray3.default)(_this.arcs[_i]));
                }
            }
        }
        if (nArrows) {
            _this.arrows = [];
            for (var _i2 = 0; _i2 < nArrows; ++_i2) {
                _this.arrows.push(new THREE.Mesh(arrowGeometry, arrowMaterial));
            }_this.add.apply(_this, (0, _toConsumableArray3.default)(_this.arrows));
        }
        _this.dimPos2 = new THREE.Vector2();
        _this.text = "";
        _this.textNode = document.createElement('div');
        _this.textNode.setAttribute('style', '' + 'position: absolute; ' + 'display: inline-block; ' + 'top: 0; left: 0; padding: 2px; padding-right:8px; ' + 'color: white; background-color: #c23369; ' + 'font-size: 9px; ' + 'pointer-events: none; ');
        _this.userData.meta = {};
        _this.viewFound().then(function (view) {
            return view.dom.appendChild(_this.textNode);
        });
        return _this;
    }

    (0, _createClass3.default)(BaseGraphics, [{
        key: 'destroy',
        value: function destroy() {
            if (this.textNode.parentElement) this.textNode.parentElement.removeChild(this.textNode);
            (0, _get3.default)(BaseGraphics.prototype.__proto__ || (0, _getPrototypeOf2.default)(BaseGraphics.prototype), 'destroy', this).call(this);
        }
    }, {
        key: 'onRender',
        value: function onRender(hitObject) {
            var position = this.dimensionPoint.getWorldPosition();
            var scale = this.view.calculateScaleFactor(position, 1.0);
            this.dimensionPoint.scale.set(7 * scale, 7 * scale, 7 * scale); //7 px radius
            var _iteratorNormalCompletion = true;
            var _didIteratorError = false;
            var _iteratorError = undefined;

            try {
                for (var _iterator = (0, _getIterator3.default)(this.lines || []), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
                    var line = _step.value;

                    line.scale.x = line.scale.z = scale;
                } //2 px width
            } catch (err) {
                _didIteratorError = true;
                _iteratorError = err;
            } finally {
                try {
                    if (!_iteratorNormalCompletion && _iterator.return) {
                        _iterator.return();
                    }
                } finally {
                    if (_didIteratorError) {
                        throw _iteratorError;
                    }
                }
            }

            var _iteratorNormalCompletion2 = true;
            var _didIteratorError2 = false;
            var _iteratorError2 = undefined;

            try {
                for (var _iterator2 = (0, _getIterator3.default)(this.arcs || []), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
                    var arc = _step2.value;
                    var _iteratorNormalCompletion4 = true;
                    var _didIteratorError4 = false;
                    var _iteratorError4 = undefined;

                    try {
                        for (var _iterator4 = (0, _getIterator3.default)(arc), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
                            var arcSegment = _step4.value;

                            arcSegment.scale.x = arcSegment.scale.z = scale;
                        }
                    } catch (err) {
                        _didIteratorError4 = true;
                        _iteratorError4 = err;
                    } finally {
                        try {
                            if (!_iteratorNormalCompletion4 && _iterator4.return) {
                                _iterator4.return();
                            }
                        } finally {
                            if (_didIteratorError4) {
                                throw _iteratorError4;
                            }
                        }
                    }
                } //2 px width
            } catch (err) {
                _didIteratorError2 = true;
                _iteratorError2 = err;
            } finally {
                try {
                    if (!_iteratorNormalCompletion2 && _iterator2.return) {
                        _iterator2.return();
                    }
                } finally {
                    if (_didIteratorError2) {
                        throw _iteratorError2;
                    }
                }
            }

            var _iteratorNormalCompletion3 = true;
            var _didIteratorError3 = false;
            var _iteratorError3 = undefined;

            try {
                for (var _iterator3 = (0, _getIterator3.default)(this.arrows || []), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
                    var arrow = _step3.value;

                    arrow.scale.set(7 * scale, 15 * scale, 7 * scale);
                } //7 px radius, 15 px length
            } catch (err) {
                _didIteratorError3 = true;
                _iteratorError3 = err;
            } finally {
                try {
                    if (!_iteratorNormalCompletion3 && _iterator3.return) {
                        _iterator3.return();
                    }
                } finally {
                    if (_didIteratorError3) {
                        throw _iteratorError3;
                    }
                }
            }

            var pos2 = this.view.getPoint2(position.clone());
            if (!this.dimPos2.equals(pos2)) {
                this.dimPos2.copy(pos2);
                this.textNode.style.transform = 'translate3d(' + (pos2.x + 15) + 'px, calc(-50% + ' + pos2.y + 'px), 0)';
            }
            if (this.textNode.textContent !== this.text) this.textNode.textContent = this.text;
        }
    }, {
        key: 'updateLine',
        value: function updateLine(i, start, end) {
            var line = (0, _isInteger2.default)(i) ? this.lines[i] : i;
            // line.geometry describes a cylinder with axis from [0, -0.5, 0] to [0, 0.5, 0] and raidus 1
            line.position.lerpVectors(start, end, 0.5);
            line.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), end.clone().sub(start).normalize());
            line.scale.y = start.distanceTo(end);
        }
    }, {
        key: 'updateArc',
        value: function updateArc(i, center, radius, startAngle, endAngle) {
            var arc = this.arcs[i];
            for (var j = 0; j < arcSegments; ++j) {
                var arcSegment = arc[j];

                var _map = [j, j + 1].map(function (k) {
                    return THREE.Math.lerp(startAngle, endAngle, k / arcSegments);
                }),
                    _map2 = (0, _slicedToArray3.default)(_map, 2),
                    sStartAngle = _map2[0],
                    sEndAngle = _map2[1];

                var _map3 = [sStartAngle, sEndAngle].map(function (angle) {
                    return new THREE.Vector3(Math.cos(angle), Math.sin(angle), 0).multiplyScalar(radius).add(center);
                }),
                    _map4 = (0, _slicedToArray3.default)(_map3, 2),
                    start = _map4[0],
                    end = _map4[1];

                this.updateLine(arcSegment, start, end);
            }
        }
    }, {
        key: 'updateArrow',
        value: function updateArrow(i, end, dir) {
            var arrow = this.arrows[i];
            // arrow.geometry describes a cone with axis from [0, -1, 0] (r=1) to [0, 0, 0] (r=0)
            arrow.position.copy(end);
            arrow.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.clone().normalize());
        }
    }, {
        key: 'updateCoordinateSystem',
        value: function updateCoordinateSystem(csys) {
            csys = csys.map(function (row) {
                return new THREE.Vector3().fromArray(row);
            });
            this.matrix.makeBasis(csys[1], csys[2], csys[3]);
            this.matrix.setPosition(csys[0]);
            this.matrix.decompose(this.position, this.quaternion, this.scale);
            this.matrixWorldNeedsUpdate = true;
            this.updateMatrixWorld();
        }
    }, {
        key: 'updateFromState',
        value: function updateFromState(state) {
            this.lastState = state;
            this.userData.meta.id = state.id;
            this.updateCoordinateSystem(state.coordinateSystem);
            this.dimensionPoint.position.fromArray(state.members.dimPt.value);
            var textParts = [];
            if (!state.members.paramName.value.startsWith("_")) textParts.push(state.members.paramName.value);
            if (state.members.master) textParts.push(String(this.plugin.getDimensionExpressionDescriptor(state.id).value));
            this.text = textParts.join(" ");
            this.view.invalidate();
        }
    }]);
    return BaseGraphics;
}(THREE.Object3D);

exports.default = BaseGraphics;