ami-cjs.js
Version:
<p align="center"> <img src="https://cloud.githubusercontent.com/assets/214063/23213764/78ade038-f90c-11e6-8208-4fcade5f3832.png" width="60%"> </p>
380 lines (328 loc) • 13.6 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _geometries = require('../geometries/geometries.voxel');
var _geometries2 = _interopRequireDefault(_geometries);
var _models = require('../models/models.stack');
var _models2 = _interopRequireDefault(_models);
var _models3 = require('../models/models.voxel');
var _models4 = _interopRequireDefault(_models3);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/**
* @module helpers/voxel
*/
var HelpersVoxel = function (_THREE$Object3D) {
_inherits(HelpersVoxel, _THREE$Object3D);
function HelpersVoxel() {
var worldCoordinates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var stack = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
_classCallCheck(this, HelpersVoxel);
var _this = _possibleConstructorReturn(this, (HelpersVoxel.__proto__ || Object.getPrototypeOf(HelpersVoxel)).call(this));
_this._stack = stack;
_this._worldCoordinates = worldCoordinates;
_this._voxel = new _models4.default();
_this._voxel.id = _this.id;
_this._voxel.worldCoordinates = _this._worldCoordinates;
// if stack provided, compute IJK and value
if (_this._stack && _this._stack.prepared && _this._worldCoordinates) {
_this.updateVoxel(_this._worldCoordinates);
}
// part of the helper...?
_this._mesh = null;
_this._geometry = null;
_this._material = null;
// 3 next purpose is just to change the color: at widget level
_this._selected = false;
_this._active = false;
_this._hover = false;
_this._distance = null;
_this._showVoxel = true;
_this._showDomSVG = true;
_this._showDomMeasurements = true;
_this._color = '#00B0FF';
// just visualization
// this._svgPointer = '<svg width="40" height="40" \
// viewBox="0 0 140 140" version="1.1" \
// xmlns="http://www.w3.org/2000/svg"> \
// \
// <polyline points="10,70 \
// 70,10 \
// 130,70" />\
// \
// </svg>';
/* jshint multistr: true */
_this._svgPointer = '<svg width="40" height="40" \
viewBox="0 0 140 140" version="1.1" \
xmlns="http://www.w3.org/2000/svg"> \
\
<path d="M70,70 \
L30,30 \
A10,10 0 1 1 10,10\
A10,10 0 1 1 30,30" />\
\
</svg>';
_this.createMesh();
return _this;
}
_createClass(HelpersVoxel, [{
key: 'updateVoxel',
value: function updateVoxel(worldCoordinates) {
// update world coordinates
this._voxel.worldCoordinates = worldCoordinates;
// update data coordinates
this._voxel.dataCoordinates = _models2.default.worldToData(this._stack, this._voxel.worldCoordinates);
// update value
var value = _models2.default.value(this._stack, this._voxel.dataCoordinates);
this._voxel.value = _models2.default.valueRescaleSlopeIntercept(value, this._stack.rescaleSlope, this._stack.rescaleIntercept);
}
}, {
key: 'updateVoxelScreenCoordinates',
value: function updateVoxelScreenCoordinates(camera, container) {
this._voxel.screenCoordinates = HelpersVoxel.worldToScreen(this._worldCoordinates, camera, container);
}
}, {
key: 'createMesh',
value: function createMesh() {
var dataCoordinates = _models2.default.worldToData(this._stack, this._worldCoordinates);
this._geometry = new _geometries2.default(dataCoordinates);
this._material = new THREE.MeshBasicMaterial({
wireframe: true,
wireframeLinewidth: 2
});
this._material.color.set(this._color);
this._mesh = new THREE.Mesh(this._geometry, this._material);
this._mesh.applyMatrix(this._stack.ijk2LPS);
this._mesh.visible = this._showVoxel;
this.add(this._mesh);
}
}, {
key: 'createDom',
value: function createDom() {
// that could be a web-component!
var measurementsContainer = this._createDiv('VJSVoxelMeasurements', this.id, 'VJSVoxelMeasurements');
measurementsContainer.style.backgroundColor = 'rgba(255, 255, 0, 0.7)';
measurementsContainer.style.padding = '4px';
measurementsContainer.style.borderRadius = '5px';
measurementsContainer.style.fontSize = '12px';
// RAS
var rasContainer = this._createDiv('VJSVoxelProbeWorld', this.id, 'VJSVoxelProbeWorld');
measurementsContainer.appendChild(rasContainer);
// IJK
var ijkContainer = this._createDiv('VJSVoxelProbeData', this.id, 'VJSVoxelProbeData');
measurementsContainer.appendChild(ijkContainer);
// Value
var valueContainer = this._createDiv('VJSVoxelProbeValue', this.id, 'VJSVoxelProbeValue');
measurementsContainer.appendChild(valueContainer);
// SVG
var svgContainer = this._createDiv('VJSVoxelProbeSVG', this.id, 'VJSVoxelProbeSVG');
svgContainer.innerHTML = this._svgPointer;
// Package everything
var domElement = this._createDiv('VJSWidgetVoxelProbe', this.id, 'VJSWidgetVoxelProbe');
domElement.style.position = 'absolute';
domElement.style.margin = '10px';
domElement.appendChild(svgContainer);
domElement.appendChild(measurementsContainer);
return domElement;
}
}, {
key: 'updateDom',
value: function updateDom(container) {
if (document.getElementById('VJSVoxelProbeWorld' + this.id) === null) {
container.appendChild(this.createDom());
}
// update content
var rasContainer = document.getElementById('VJSVoxelProbeWorld' + this.id);
var rasContent = this._voxel.worldCoordinates.x.toFixed(2) + ' : ' + this._voxel.worldCoordinates.y.toFixed(2) + ' : ' + this._voxel.worldCoordinates.z.toFixed(2);
rasContainer.innerHTML = 'LPS: ' + rasContent;
var ijkContainer = document.getElementById('VJSVoxelProbeData' + this.id);
var ijkContent = this._voxel.dataCoordinates.x + ' : ' + this._voxel.dataCoordinates.y + ' : ' + this._voxel.dataCoordinates.z;
ijkContainer.innerHTML = 'IJK: ' + ijkContent;
var valueContainer = document.getElementById('VJSVoxelProbeValue' + this.id);
var valueContent = this._voxel.value;
valueContainer.innerHTML = 'Value: ' + valueContent;
// update div position
var selectedElement = document.getElementById('VJSWidgetVoxelProbe' + this.id);
selectedElement.style.top = this._voxel.screenCoordinates.y + 'px';
selectedElement.style.left = this._voxel.screenCoordinates.x + 'px';
// window.console.log(this._voxel);
// selectedElement.style['transform-origin'] = 'top left';
// selectedElement.style['transform'] = 'translate(' + this._voxel.screenCoordinates.x + 'px, ' + this._voxel.screenCoordinates.y + 'px)';
this.updateDomClass(selectedElement);
}
}, {
key: 'updateDomClass',
value: function updateDomClass() {
var element = document.getElementById('VJSWidgetVoxelProbe' + this.id);
if (!element) return;
if (this._active === true) {
element.classList.add('VJSVoxelProbeActive');
} else {
element.classList.remove('VJSVoxelProbeActive');
}
if (this._hover === true) {
element.classList.add('VJSVoxelProbeHover');
} else {
element.classList.remove('VJSVoxelProbeHover');
}
if (this._selected === true) {
element.classList.add('VJSVoxelProbeSelect');
} else {
element.classList.remove('VJSVoxelProbeSelect');
}
this.updateDomElementDisplay('VJSVoxelMeasurements' + this.id, this._showDomMeasurements);
this.updateDomElementDisplay('VJSVoxelProbeSVG' + this.id, this._showDomSVG);
}
}, {
key: 'updateDomElementDisplay',
value: function updateDomElementDisplay(id, show) {
if (show) {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
}
}, {
key: 'removeTest',
value: function removeTest() {
// remove voxelDom
var node = document.getElementById('VJSWidgetVoxelProbe' + this.id);
if (node.parentNode) {
node.parentNode.removeChild(node);
}
// remove voxelMesh
this.remove(this._mesh);
this._mesh.geometry.dispose();
this._mesh.material.dispose();
this._mesh = null;
}
}, {
key: '_createDiv',
value: function _createDiv(idPrefix, idSuffix, className) {
var divContainer = document.createElement('div');
divContainer.setAttribute('id', idPrefix + idSuffix);
divContainer.setAttribute('class', className);
return divContainer;
}
}, {
key: 'color',
set: function set(color) {
this._color = color;
if (this._material) {
this._material.color.set(this._color);
}
// also update the dom
var selectedElement = document.getElementById('VJSVoxelMeasurements' + this.id);
if (selectedElement) {
selectedElement.style.borderColor = this._color.replace('0x', '#');
}
selectedElement = document.querySelector('#VJSVoxelProbeSVG' + this.id + '> svg > path');
if (selectedElement) {
selectedElement.style.stroke = this._color.replace('0x', '#');
}
},
get: function get() {
return this._color;
}
}, {
key: 'worldCoordinates',
set: function set(worldCoordinates) {
this._worldCoordinates = worldCoordinates;
this._voxel._worldCoordinates = worldCoordinates;
// set data coordinates && value
this.updateVoxel(this._worldCoordinates);
if (this._mesh && this._mesh.geometry) {
this._mesh.geometry.location = this._voxel.dataCoordinates;
}
},
get: function get() {
return this._worldCoordinates;
}
}, {
key: 'voxel',
get: function get() {
return this._voxel;
},
set: function set(voxel) {
this._voxel = voxel;
}
}, {
key: 'showVoxel',
set: function set(showVoxel) {
this._showVoxel = showVoxel;
if (this._mesh) {
this._mesh.visible = this._showVoxel;
}
},
get: function get() {
return this._showVoxel;
}
}, {
key: 'showDomSVG',
set: function set(showDomSVG) {
this._showDomSVG = showDomSVG;
this.updateDomClass();
},
get: function get() {
return this._showDomSVG;
}
}, {
key: 'showDomMeasurements',
set: function set(showDomMeasurements) {
this._showDomMeasurements = showDomMeasurements;
this.updateDomClass();
},
get: function get() {
return this._showDomMeasurements;
}
}, {
key: 'distance',
set: function set(distance) {
this._distance = distance;
},
get: function get() {
return this._distance;
}
}, {
key: 'selected',
set: function set(selected) {
this._selected = selected;
},
get: function get() {
return this._selected;
}
}, {
key: 'hover',
set: function set(hover) {
this._hover = hover;
},
get: function get() {
return this._hover;
}
}, {
key: 'active',
set: function set(active) {
this._active = active;
},
get: function get() {
return this._active;
}
}], [{
key: 'worldToScreen',
value: function worldToScreen(worldCoordinate, camera, canvas) {
var screenCoordinates = worldCoordinate.clone();
screenCoordinates.project(camera);
screenCoordinates.x = Math.round((screenCoordinates.x + 1) * canvas.offsetWidth / 2);
screenCoordinates.y = Math.round((-screenCoordinates.y + 1) * canvas.offsetHeight / 2);
screenCoordinates.z = 0;
return screenCoordinates;
}
}]);
return HelpersVoxel;
}(THREE.Object3D);
exports.default = HelpersVoxel;
module.exports = exports['default'];