awv3
Version:
⚡ AWV3 embedded CAD
576 lines (486 loc) • 23 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
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 _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _class, _temp;
var _three = require('three');
var THREE = _interopRequireWildcard(_three);
var _uuidV = require('uuid-v4');
var _uuidV2 = _interopRequireDefault(_uuidV);
var _error = require('./error');
var Error = _interopRequireWildcard(_error);
var _helpers = require('./helpers');
var _canvas = require('./canvas');
var _dom = require('./dom');
var _dom2 = _interopRequireDefault(_dom);
var _interaction = require('./interaction');
var _interaction2 = _interopRequireDefault(_interaction);
var _stats = require('../misc/stats');
var _stats2 = _interopRequireDefault(_stats);
var _orbit = require('../controls/orbit');
var _orbit2 = _interopRequireDefault(_orbit);
var _combinedcamera = require('../three/combinedcamera');
var _combinedcamera2 = _interopRequireDefault(_combinedcamera);
var _events = require('../core/events');
var _events2 = _interopRequireDefault(_events);
var _elementResizeEvent = require('element-resize-event');
var _elementResizeEvent2 = _interopRequireDefault(_elementResizeEvent);
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 }; }
/** A view represents a portion of canvas on which webGL can draw.
The view is defined and tracked by a dom node on which the drawing take place. */
var View = (_temp = _class = function (_Events) {
(0, _inherits3.default)(View, _Events);
/** Construct a new View
@param {Object} [canvas=lastCreated] - The parent canvas, if none defined the lastCreated will be used
@param {Object} [options={}] - this.options to initialize the View with
@param {HTMLElement} [options.dom=canvas.dom] - The HTML element on which the view will draw
@param {Boolean} [options.renderAlways=false] - Set to true the view will render 60fps,
set to false it will render on changes (default, recommended)
@param {Boolean} [options.visible=true] - Set to true the view will render
@param {Function} [options.callbackBefore=undefined] - Callback before the render pass
@param {Function} [options.callbackRender=undefined] - Callback to custom-render the scene
@param {Function} [options.callbackAfter=undefined] - Callback after the render pass
@param {Number} [options.background=canvas.renderer.clearColor] - Background color
@param {Number} [options.opacity=0.0] - Background opacity
@param {Number} [options.ambientColor=0xffffff] - Ambient color
@param {Number} [options.ambientIntensity=1.0] - Ambient intensity
@example
import View from 'view';
// Create a view, defaults into the same dom as the canvas
const view = new View(canvas, { dom: '#view', ambient: 0x909090 });
// Add model to the view's scene
view.scene.add(model);
@returns {Object} The constructed View */
function View() {
var canvas = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _canvas.lastCreated;
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
(0, _classCallCheck3.default)(this, View);
var _this = (0, _possibleConstructorReturn3.default)(this, (View.__proto__ || (0, _getPrototypeOf2.default)(View)).call(this));
_this.id = (0, _uuidV2.default)();
_this.canvas = canvas;
_this.renderer = canvas.renderer;
_this.resolution = _this.renderer.resolution;
_this.invalidateFrames = 2;
_this.force = 0;
_this.dirty = true;
_this.bounds = {
box: new THREE.Box3(),
sphere: new THREE.Sphere()
};
_this.options = (0, _extends3.default)({
dom: canvas.dom,
renderAlways: false,
visible: true,
callback: undefined,
callbackRender: undefined,
callbackAfter: undefined,
background: _this.renderer.clearColor,
opacity: 0,
defaultCursor: 'auto'
}, options);
_this.dom = (0, _helpers.queryDom)(_this.options.dom);
_this.renderAlways = _this.options.renderAlways;
_this.visible = _this.options.visible;
_this.callbackBefore = _this.options.callback;
_this.callbackRender = _this.options.callbackRender;
_this.callbackAfter = _this.options.callbackAfter;
_this.background = _this.options.background;
_this.opacity = _this.options.opacity;
_this.defaultCursor = _this.options.defaultCursor;
// Make sure the view hides overflow and is not selectable
_this.options.dom.style.cssText += '-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; overlay: hidden';
// A border will hide gaps caused by imprecise layout returns
if (_this.options.background !== _this.renderer.clearColor) _this.dom.style.border = '2px solid #' + _this.background.getHexString();
_this.input = new _dom2.default(_this, {
wheel: function wheel(state) {
_this.controls.onMouseWheel(state);
_this.hud.forEach(function (hud) {
return hud.onMouseWheel(state);
});
},
mouseout: function mouseout(state) {
_this.interaction.onMouseOut(state);
},
mousemove: function mousemove(state) {
_this.interaction.onMouseMove(state);
_this.input.mouse.down && _this.controls.onMouseMove(state);
_this.input.mouse.down && _this.hud.forEach(function (hud) {
return hud.onMouseMove(state);
});
},
mousedown: function mousedown(state) {
_this.interaction.onMouseDown(state);
_this.controls.onMouseDown(state);
_this.hud.forEach(function (hud) {
return hud.onMouseDown(state);
});
},
mouseup: function mouseup(state) {
_this.interaction.onMouseUp(state);
_this.controls.onMouseUp(state);
_this.hud.forEach(function (hud) {
return hud.onMouseUp(state);
});
},
touchstart: function touchstart(state) {
_this.interaction.onMouseDown(state);
_this.controls.onTouchStart(state);
_this.hud.forEach(function (hud) {
return hud.onTouchStart(state);
});
},
touchmove: function touchmove(state) {
_this.interaction.onMouseMove(state);
_this.controls.onTouchMove(state);
_this.hud.forEach(function (hud) {
return hud.onTouchMove(state);
});
},
touchend: function touchend(state) {
_this.interaction.onMouseUp(state);
_this.controls.onTouchEnd(state);
_this.hud.forEach(function (hud) {
return hud.onTouchEnd(state);
});
}
});
_this.scene = new THREE.Scene();
_this.scene.canvas = canvas;
_this.scene.view = _this;
_this.ambient = new THREE.AmbientLight(_this.options.ambientColor ? _this.options.ambientColor : 0xffffff);
_this.ambient.intensity = typeof _this.options.ambientIntensity !== 'undefined' ? _this.options.ambientIntensity : 1.0;
_this.ambient.keep = true;
_this.ambient.view = _this;
_this.scene.add(_this.ambient);
_this.camera = new _combinedcamera2.default(_this, _this.options);
// his.camera = Being set by the above
_this.controls = new _orbit2.default(_this, (0, _extends3.default)({
maxPolarAngle: Math.PI,
minDistance: 1,
maxDistance: 20000
}, _this.options));
_this.hud = [];
_this.interaction = new _interaction2.default(_this);
_this.updateScopes();
_this.canvas.views.push(_this);
_this.renderer.resize();
(0, _elementResizeEvent2.default)(_this.dom, function () {
return _this.invalidate(30);
});
if (_this.options.stats) {
_this.showStats = true;
}
return _this;
}
(0, _createClass3.default)(View, [{
key: 'destroy',
value: function destroy() {
var _this2 = this;
if (!this.__destroyed) {
this.__destroyed = true;
this.input.detach();
this.input.removeListeners();
this.input.removeInspectors();
this.scene.destroy({ keep: false });
this.render = function () {};
this.clear = function () {};
this.view = undefined;
this.canvas = undefined;
this.renderer = undefined;
this.bound = undefined;
this.input = undefined;
this.scene = undefined;
this.hud.forEach(function (hud) {
return hud.destroy();
});
this.hud = [];
this.dom.querySelector('object').remove();
var parent = this.dom;
while (!!parent && parent != this.canvas.dom) {
var scope = this.canvas.scopes.get(parent);
if (scope) this.canvas.scopes.set(parent, scope.filter(function (s) {
return s !== _this2;
}));
parent = parent.parentNode;
}
this.dom = undefined;
}
}
}, {
key: 'addHud',
value: function addHud(obj) {
this.hud = this.hud.concat(obj);
}
}, {
key: 'removeHud',
value: function removeHud(obj) {
this.hud = this.hud.filter(function (hud) {
return hud !== obj;
});
}
}, {
key: 'setCursor',
/** Sets the cursor style. Applies when the mouse is inside the view's rect.
@param {String} style='auto' - CSS cursor style
@param {String} [fallback] - Fallback style, should the target style not be available
@example
// 'grab' is available in WebKit and Blink only
view.setCursor('grab', 'move'); */
value: function setCursor() {
var style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.defaultCursor;
var fallback = arguments[1];
if (style != this.cursor) {
(0, _helpers.setPrefixedValue)(this.dom, 'cursor', style, fallback);
this.cursor = style;
}
return this;
}
/** Projects 2-dimensional coordinate from a 3-dimensional point within the view's scene.
@param {THREE.Vector3} point3 - Input point
@example
// Grab x and y off THREE's projected Vector2
let {x, y} = view.getPoint2D(new THREE.Vector3(10, 20, 100));
@returns {THREE.Vector2} The projected point */
}, {
key: 'getPoint2',
value: function getPoint2(point3) {
var camera = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.camera.display;
var widthHalf = this.width / 2,
heightHalf = this.height / 2;
var vector = point3.project(camera);
vector.x = vector.x * widthHalf + widthHalf;
vector.y = -(vector.y * heightHalf) + heightHalf;
return vector;
}
/**
* Projects a 2D point into 3D space. Z-Value for the 2D-Point can be passed within bounds of 0 to 1.
* Note: maximal depth is used by default (z = 1), so the point is on the "far" frustum (with huge coordinates)
*/
}, {
key: 'getPoint3',
value: function getPoint3(point2) {
var camera = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.camera.display;
var zValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
var vector = new THREE.Vector3(point2.x / this.width * 2 - 1, -(point2.y / this.height) * 2 + 1, zValue);
vector.unproject(camera);
return vector;
}
///returns a line of all the points corresponding to given 2D view coords
}, {
key: 'getViewLine3',
value: function getViewLine3(point2) {
var camera = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.camera.display;
var near = new THREE.Vector3(point2.x / this.width * 2 - 1, -(point2.y / this.height) * 2 + 1, 0);
var far = new THREE.Vector3(point2.x / this.width * 2 - 1, -(point2.y / this.height) * 2 + 1, 1);
near.unproject(camera);
far.unproject(camera);
return new THREE.Line3(near, far);
}
/**
* Calculate the scale factor that will make the object at the point3 position be radiusPx pixels wide.
* Example use: object.scale.set(calculateScaleFactor(object.getWorldPosition(), radiusPx));
* @param point3 Vector3 position of the object
* @param radiusPx Number desired radius of the object in pixels
* @return Number scale factor for the object
*/
}, {
key: 'calculateScaleFactor',
value: function calculateScaleFactor(point3, radiusPx) {
var camera = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.camera.display;
var point2 = this.getPoint2(point3.clone());
var scale = 0;
for (var i = 0; i < 2; ++i) {
var point2off = point2.clone().setComponent(i, point2.getComponent(i) + radiusPx);
var point3off = this.getPoint3(point2off, camera, point2off.z);
scale = Math.max(scale, point3.distanceTo(point3off));
}
return scale;
}
}, {
key: 'updateOverlays',
value: function updateOverlays() {}
}, {
key: 'updateScopes',
value: function updateScopes() {
var parent = this.dom;
while (!!parent && parent != this.canvas.dom) {
var scope = this.canvas.scopes.get(parent);
if (scope) scope.push(this);else this.canvas.scopes.set(parent, [this]);
parent = parent.parentNode;
}
}
}, {
key: 'clear',
value: function clear(time) {
// Measure and check if dirty (size & position changed)
this.dirty = this.invalidateFrames > 0 && this.measure();
if (this.visible) {
// Call event scheduler
this.input.debounce && this.input.update();
// Update controls
this.controls.update(time);
this.hud.forEach(function (hud) {
return hud.update(time);
});
// Update interaction
this.interaction.update();
if (this.dirty || this.renderAlways || this.controls.inMotion || this.hudInMotion) {
// Clear canvas only if dirty, it isn't necessary for simple interaction
if (this.dirty) {
this.renderer.dirty = true;
this.renderer.gl.setViewport(this.old[0], this.old[1], this.old[2], this.old[3]);
this.renderer.gl.setScissor(this.old[0] * this.resolution, this.old[1] * this.resolution, this.old[2] * this.resolution, this.old[3] * this.resolution);
this.renderer.gl.setClearColor(this.renderer.clearColor, 0);
this.renderer.gl.clear();
}
}
}
// Remove frames
if (this.invalidateFrames > 0) this.invalidateFrames--;
return this.dirty;
}
}, {
key: 'render',
value: function render(time) {
if (this.force > 0 || this.dirty || this.renderAlways || this.controls.inMotion || this.stats || this.hudInMotion) {
this.callbackBefore && this.callbackBefore();
this.renderer.gl.setViewport(this.new[0], this.new[1], this.new[2], this.new[3]);
this.renderer.gl.setScissor(this.new[0] * this.resolution, this.new[1] * this.resolution, this.new[2] * this.resolution, this.new[3] * this.resolution);
var camera = this.camera;
if (!this.callbackRender) {
this.renderer.gl.setClearColor(this.background, this.opacity);
this.renderer.gl.clear();
this.renderer.gl.render(this.scene, this.camera.display);
this.renderer.gl.clearDepth();
this.hud.forEach(function (hud) {
return hud.render();
});
} else this.callbackRender();
this.callbackAfter && this.callbackAfter();
this.stats && this.stats.update();
if (this.force > 0) this.force--;
}
}
}, {
key: 'invalidate',
value: function invalidate() {
var frames = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
this.force += frames;
if (this.force > 60) this.force = 60;
this.invalidateFrames += frames;
if (this.invalidateFrames > 60) this.invalidateFrames = 60;
return this;
}
}, {
key: 'measure',
value: function measure(force) {
var dirty = false;
var bounds = this.dom.getBoundingClientRect();
var offset = {
top: bounds.top,
left: bounds.left,
width: bounds.width,
height: bounds.height
};
offset.top -= this.renderer.offset.top;
offset.left -= this.renderer.offset.left;
// Size changed, calibrate & invalidate
if (force || offset.width != this.width || offset.height != this.height) {
this.calibrate(offset.width, offset.height);
this.invalidate(10);
dirty = true;
this.emit(View.Events.SizeChanged, offset);
}
// Position changed, invalidate!
if (force || offset.top != this.top || offset.left != this.left) {
this.invalidate(10);
dirty = true;
this.emit(View.Events.PositionChanged, offset);
}
// Save old data
this.old = [this.left /* this.renderer.resolution*/
, this.bottom /* this.renderer.resolution*/
, this.width /* this.renderer.resolution*/
, this.height /* this.renderer.resolution*/
];
// Apply new
this.width = offset.width;
this.height = offset.height;
this.top = offset.top;
this.left = offset.left;
this.bottom = this.renderer.offset.height - offset.height - offset.top;
// Premultiply new
this.new = [this.left /* this.renderer.resolution*/
, this.bottom /* this.renderer.resolution*/
, this.width /* this.renderer.resolution*/
, this.height /* this.renderer.resolution*/
];
// Check visibility
var visible = !(this.height <= 0 || this.width <= 0 || this.top >= this.renderer.offset.height || this.left >= this.renderer.offset.width || this.top + this.height <= 0 || this.left + this.width <= 0);
if (this.visible != visible) {
this.visible = visible;
this.visible && this.invalidate(10);
dirty = true;
}
return dirty;
}
}, {
key: 'calibrate',
value: function calibrate(width, height) {
this.aspect = width / height;
this.camera.aspect = this.aspect;
this.camera.updateProjectionMatrix();
this.camera.radius = (width + height) / 4;
this.hud.forEach(function (hud) {
return hud.calibrate(width, height);
});
}
}, {
key: 'updateBounds',
value: function updateBounds() {
var box = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
this.scene.updateBounds(box);
this.bounds.box = this.scene.bounds.box;
this.bounds.sphere = this.scene.bounds.sphere;
return this;
}
}, {
key: 'hudInMotion',
get: function get() {
return this.hud.length > 0 && this.hud.reduce(function (acc, val) {
return { inMotion: acc.inMotion && val.inMotion };
}).inMotion;
}
}, {
key: 'showStats',
set: function set(value) {
if (this.stats) {
this.stats.remove();
this.stats = undefined;
}
if (value) {
this.stats = new _stats2.default();
this.dom.appendChild(this.stats.dom);
}
}
}]);
return View;
}(_events2.default), _class.Events = {
SizeChanged: 'SizeChanged',
PositionChanged: 'PositionChanged'
}, _temp);
exports.default = View;