@kitware/vtk.js
Version:
Visualization Toolkit for the Web
284 lines (209 loc) • 10.4 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import macro from '../../macros.js';
import { s as style } from './FPSMonitor/FPSMonitor.module.css.js';
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var noOp = Function.prototype;
function formatNumbers(n) {
var sections = [];
var size = n;
while (size > 1000) {
sections.push("000".concat(size % 1000).slice(-3));
size = Math.floor(size / 1000);
}
if (size > 0) {
sections.push(size);
}
sections.reverse();
return sections.join("'");
} // ----------------------------------------------------------------------------
// vtkFPSMonitor methods
// ----------------------------------------------------------------------------
function vtkFPSMonitor(publicAPI, model) {
// Set our className
model.classHierarchy.push('vtkFPSMonitor');
model.fpsMonitorContainer = document.createElement('div');
model.fpsMonitorContainer.setAttribute('class', model.orientationClass);
model.fpsMonitorContainer.innerHTML = "\n <div class=\"".concat(style.leftPane, "\">\n <div class=\"js-title ").concat(style.title, "\">Mean N/A - Current N/A</div>\n <canvas class=\"js-graph ").concat(style.graph, "\"></canvas>\n </div>\n <div class=\"js-info ").concat(style.rightPane, "\">\n </div>"); // Extract various containers
model.canvas = model.fpsMonitorContainer.querySelector('.js-graph');
model.title = model.fpsMonitorContainer.querySelector('.js-title');
model.info = model.fpsMonitorContainer.querySelector('.js-info'); // --------------------------------------------------------------------------
// Private methods
// --------------------------------------------------------------------------
function renderTitle() {
model.title.style.display = model.titleVisibility ? 'block' : 'none';
if (!model.titleVisibility) {
return;
}
var nextFPS = model.buffer[model.buffer.length - 1];
var newTxt = "Mean: ".concat(Math.round(model.fpsSum / model.buffer.length), " - Current: ").concat(Math.round(nextFPS));
if (newTxt !== model.lastText) {
model.lastText = newTxt;
model.title.innerHTML = newTxt;
}
}
function renderInfo() {
model.info.style.display = model.infoVisibility ? 'grid' : 'none';
if (!model.infoVisibility) {
return;
}
var infoItems = [];
if (model.renderWindow) {
var realView = model.renderWindow.getViews()[0];
if (realView && realView.getSize) {
infoItems.push("<label class=\"".concat(style.label, "\">Resolution</label><span class=\"").concat(style.value, "\">").concat(realView.getSize().join('x'), "</span>"));
}
var stats = _objectSpread(_objectSpread({}, model.renderWindow.getStatistics()), model.addOnStats);
var keys = Object.keys(stats);
keys.sort();
for (var i = 0; i < keys.length; i++) {
if (keys[i] === 'str') {
continue; // eslint-disable-line
}
if (stats[keys[i]]) {
infoItems.push("<label class=\"".concat(style.label, "\">").concat(keys[i], "</label><span class=\"").concat(style.value, "\">").concat(formatNumbers(stats[keys[i]]), "</span>"));
}
}
}
model.info.innerHTML = infoItems.join('');
}
function renderCanvas() {
model.canvas.style.display = model.canvasVisibility ? 'block' : 'none';
if (!model.canvasVisibility) {
return;
} // Although this is called frequently, setting an attribute to the same value is a no-op
model.canvas.setAttribute('width', model.bufferSize);
model.canvas.setAttribute('height', model.graphHeight);
var ctx = model.canvas.getContext('2d');
var _model$canvas = model.canvas,
width = _model$canvas.width,
height = _model$canvas.height;
ctx.clearRect(0, 0, width, height); // Current fps
ctx.strokeStyle = 'green';
ctx.beginPath();
ctx.moveTo(0, height - model.buffer[0]);
for (var i = 1; i < model.buffer.length; i++) {
ctx.lineTo(i, height - model.buffer[i]);
}
ctx.stroke(); // 60 fps ref
ctx.strokeStyle = 'black';
ctx.beginPath();
ctx.moveTo(0, height - 60);
ctx.lineTo(width, height - 60);
ctx.stroke();
}
function frameChanged() {
if (!model.interactor) {
return;
}
var nextFPS = 1 / model.interactor.getLastFrameTime();
model.buffer.push(nextFPS);
model.fpsSum += nextFPS;
while (model.buffer.length > model.bufferSize) {
model.fpsSum -= model.buffer.shift();
}
renderTitle();
renderCanvas();
} // --------------------------------------------------------------------------
// Public methods
// --------------------------------------------------------------------------
publicAPI.update = function () {
publicAPI.render();
}; // --------------------------------------------------------------------------
publicAPI.setRenderWindow = function (rw) {
while (model.subscriptions.length) {
model.subscriptions.pop().unsubscribe();
}
model.renderWindow = rw;
model.interactor = rw ? rw.getInteractor() : null;
if (model.interactor) {
model.subscriptions.push(model.interactor.onAnimation(frameChanged));
}
}; // --------------------------------------------------------------------------
publicAPI.setContainer = function (el) {
if (model.container && model.container !== el) {
model.container.removeChild(model.fpsMonitorContainer);
}
if (model.container !== el) {
model.container = el;
if (model.container) {
model.container.appendChild(model.fpsMonitorContainer);
publicAPI.resize();
}
publicAPI.modified();
}
}; // --------------------------------------------------------------------------
publicAPI.render = function () {
renderTitle();
renderInfo();
renderCanvas();
}; // --------------------------------------------------------------------------
publicAPI.resize = noOp; // --------------------------------------------------------------------------
publicAPI.setOrientationToHorizontal = function () {
model.fpsMonitorContainer.classList.remove(model.orientationClass);
model.orientationClass = style.horizontalContainer;
model.fpsMonitorContainer.classList.add(model.orientationClass);
}; // --------------------------------------------------------------------------
publicAPI.setOrientationToVertical = function () {
model.fpsMonitorContainer.classList.remove(model.orientationClass);
model.orientationClass = style.verticalContainer;
model.fpsMonitorContainer.classList.add(model.orientationClass);
}; // --------------------------------------------------------------------------
publicAPI.setOrientation = function () {
var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'horizontal';
if (mode === 'horizontal') {
publicAPI.setOrientationToHorizontal();
} else {
publicAPI.setOrientationToVertical();
}
}; // --------------------------------------------------------------------------
publicAPI.setAddOnStats = function (addOn) {
if (!model.addOnStats) {
model.addOnStats = {};
}
Object.assign(model.addOnStats, addOn);
renderInfo();
}; // --------------------------------------------------------------------------
publicAPI.setMonitorVisibility = function () {
var title = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
var graph = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var info = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
publicAPI.setCanvasVisibility(graph);
publicAPI.setInfoVisibility(info);
publicAPI.setTitleVisibility(title);
}; // --------------------------------------------------------------------------
var superDelete = publicAPI.delete;
publicAPI.delete = function () {
publicAPI.setRenderWindow(null);
publicAPI.setContainer(null);
superDelete();
}; // --------------------------------------------------------------------------
model.subscriptions.push(publicAPI.onModified(publicAPI.update));
} // ----------------------------------------------------------------------------
// Object factory
// ----------------------------------------------------------------------------
var DEFAULT_VALUES = {
bufferSize: 200,
graphHeight: 120,
buffer: [60],
subscriptions: [],
fpsSum: 0,
orientationClass: style.horizontalContainer,
canvasVisibility: true,
titleVisibility: true,
infoVisibility: true
}; // ----------------------------------------------------------------------------
function extend(publicAPI, model) {
var initialValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
Object.assign(model, DEFAULT_VALUES, initialValues); // Object methods
macro.obj(publicAPI, model);
macro.get(publicAPI, model, ['fpsMonitorContainer', 'renderWindow', 'addOnStats']);
macro.setGet(publicAPI, model, ['bufferSize', 'canvasVisibility', 'infoVisibility', 'titleVisibility']); // Object specific methods
vtkFPSMonitor(publicAPI, model);
} // ----------------------------------------------------------------------------
var newInstance = macro.newInstance(extend, 'vtkFPSMonitor'); // ----------------------------------------------------------------------------
var vtkFPSMonitor$1 = {
newInstance: newInstance,
extend: extend
};
export { vtkFPSMonitor$1 as default, extend, newInstance };