@kitware/vtk.js
Version:
Visualization Toolkit for the Web
259 lines (204 loc) • 8.71 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import macro from '../../macros.js';
import Constants from './Slider/Constants.js';
import { s as style } from './Slider/Slider.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; }
// Helper methods
// ----------------------------------------------------------------------------
function findClosestValue(value, values) {
var distance = Number.MAX_VALUE;
var index = -1;
var count = values.length;
while (count--) {
var dist = Math.abs(values[count] - value);
if (dist < distance) {
distance = dist;
index = count;
}
}
return index !== -1 ? values[index] : undefined;
} // ----------------------------------------------------------------------------
// vtkSlider methods
// ----------------------------------------------------------------------------
function vtkSlider(publicAPI, model) {
// Set our className
model.classHierarchy.push('vtkSlider');
model.el = document.createElement('div');
model.el.setAttribute('class', style.cursor); // --------------------------------------------------------------------------
// Private methods
// --------------------------------------------------------------------------
function getDisplacementRatio() {
return (model.containerSizes[1] - model.containerSizes[0]) * (model.value - model.values[0]) / (model.values[model.values.length - 1] - model.values[0]);
}
function updateCursorPosition() {
if (!model.container) {
return;
}
var cursorSize = model.containerSizes[0];
var position = getDisplacementRatio();
if (Number.isNaN(position) || Number.isNaN(cursorSize)) {
return;
}
model.el.style.width = "".concat(cursorSize, "px");
model.el.style.height = "".concat(cursorSize, "px");
if (model.orientation === Constants.SliderOrientation.VERTICAL) {
// VERTICAL
model.el.style.left = '0';
model.el.style.top = "".concat(position, "px");
model.el.style.cursor = 'row-resize';
} else {
// HORIZONTAL
model.el.style.top = '0';
model.el.style.left = "".concat(position, "px");
model.el.style.cursor = 'col-resize';
}
} // --------------------------------------------------------------------------
var isDragging = false;
var offset = 0;
var ratio = 0;
function handleDragEvents(enable) {
var rootElm = document.querySelector('body');
var method = enable ? 'addEventListener' : 'removeEventListener';
/* eslint-disable no-use-before-define */
rootElm[method]('mousemove', onMouseMove);
rootElm[method]('mouseleave', onMouseOut);
rootElm[method]('mouseup', onMouseUp);
/* eslint-enable no-use-before-define */
}
function onMouseMove(e) {
e.preventDefault();
if (isDragging) {
var newRatio = ratio + ((model.orientation ? e.clientX : e.clientY) - offset) / (model.containerSizes[1] - model.containerSizes[0]);
var value = newRatio * model.range + model.values[0];
var newValue = findClosestValue(value, model.values);
if (newValue !== undefined) {
publicAPI.setValue(newValue);
}
}
}
function onMouseOut(e) {
isDragging = false;
}
function onMouseUp(e) {
handleDragEvents(false);
if (!isDragging) {
var isClick = !((model.orientation ? e.clientX : e.clientY) - offset);
if (isClick) {
var absValue = model.values[0] + model.range * (offset - model.container.getBoundingClientRect()[model.orientation ? 'left' : 'top'] - 0.5 * model.containerSizes[0]) / (model.containerSizes[1] - model.containerSizes[0]);
var newValue = findClosestValue(absValue, model.values);
if (newValue !== undefined) {
publicAPI.setValue(newValue);
}
}
}
isDragging = false;
}
function onMouseDown(e) {
handleDragEvents(true);
e.preventDefault();
isDragging = e.target === model.el;
offset = model.orientation ? e.clientX : e.clientY;
ratio = (model.value - model.values[0]) / model.range;
}
function bindEvents() {
model.container.addEventListener('mousedown', onMouseDown);
}
function unbindEvents() {
handleDragEvents(false);
model.container.removeEventListener('mousedown', onMouseDown);
} // --------------------------------------------------------------------------
publicAPI.setContainer = function (el) {
if (model.container && model.container !== el) {
model.container.removeChild(model.el);
unbindEvents();
}
if (model.container !== el) {
model.container = el;
if (model.container) {
model.container.appendChild(model.el);
publicAPI.resize();
bindEvents();
}
publicAPI.modified();
}
};
publicAPI.resize = function () {
if (model.container) {
var dims = model.container.getBoundingClientRect();
var width = Math.floor(dims.width);
var height = Math.floor(dims.height);
var min = Math.min(width, height);
var max = Math.max(width, height);
publicAPI.setOrientation(height === max ? Constants.SliderOrientation.VERTICAL : Constants.SliderOrientation.HORIZONTAL);
model.containerSizes = [min, max];
updateCursorPosition();
}
};
publicAPI.setValue = function (v) {
if (model.value !== v && model.values[0] <= v && v <= model.values.slice(-1)[0]) {
model.value = v;
updateCursorPosition();
publicAPI.modified();
publicAPI.invokeValueChange(v);
return true;
}
return false;
};
publicAPI.setValues = function (values) {
if (model.values !== values) {
model.values = values;
model.range = values[values.length - 1] - values[0];
updateCursorPosition();
publicAPI.modified();
}
};
publicAPI.generateValues = function (min, max, nbSteps) {
var step = (max - min) / (nbSteps - 1);
model.values = [];
for (var i = 0; i < nbSteps; i++) {
model.values.push(min + i * step);
}
model.range = max - min;
updateCursorPosition();
publicAPI.modified();
};
publicAPI.updateCursorStyle = function (cursorStyle) {
model.cursorStyle = _objectSpread(_objectSpread({}, model.cursorStyle), cursorStyle);
var keys = Object.keys(model.cursorStyle);
var count = keys.length;
while (count--) {
model.el.style[keys[count]] = model.cursorStyle[keys[count]];
}
}; // Apply default style
publicAPI.updateCursorStyle();
} // ----------------------------------------------------------------------------
// Object factory
// ----------------------------------------------------------------------------
var DEFAULT_VALUES = {
orientation: Constants.SliderOrientation.VERTICAL,
value: 0.5,
values: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
range: 1,
containerSizes: [10, 100],
cursorStyle: {
border: 'solid 4px #aaa',
backgroundColor: '#ccc',
transform: 'scale(0.7)'
}
}; // ----------------------------------------------------------------------------
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, ['orientation', 'value', 'values']);
macro.set(publicAPI, model, ['orientation']);
macro.event(publicAPI, model, 'ValueChange'); // Object specific methods
vtkSlider(publicAPI, model);
} // ----------------------------------------------------------------------------
var newInstance = macro.newInstance(extend, 'vtkSlider'); // ----------------------------------------------------------------------------
var vtkSlider$1 = _objectSpread({
newInstance: newInstance,
extend: extend
}, Constants);
export { vtkSlider$1 as default, extend, newInstance };