diff --git a/Examples/Geometry/AxesActor/controlPanel.html b/Examples/Geometry/AxesActor/controlPanel.html new file mode 100644 index 00000000000..4053983e938 --- /dev/null +++ b/Examples/Geometry/AxesActor/controlPanel.html @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + +
Center axis + +
X axis inversion + +
Y axis inversion + +
Z axis inversion + +
diff --git a/Examples/Geometry/AxesActor/index.js b/Examples/Geometry/AxesActor/index.js new file mode 100644 index 00000000000..16dd0d2e3cf --- /dev/null +++ b/Examples/Geometry/AxesActor/index.js @@ -0,0 +1,80 @@ +import '@kitware/vtk.js/favicon'; + +// Load the rendering pieces we want to use (for both WebGL and WebGPU) +import '@kitware/vtk.js/Rendering/Profiles/Geometry'; + +import macro from '@kitware/vtk.js/macros'; +import vtkAxesActor from '@kitware/vtk.js/Rendering/Core/AxesActor'; +import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow'; + +import controlPanel from './controlPanel.html'; + +console.warn( + 'Click on index.ts to open source code for this example --------->' +); + +// ---------------------------------------------------------------------------- +// Standard rendering code setup +// ---------------------------------------------------------------------------- + +const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({ + background: [0.2, 0.3, 0.4], +}); +const renderer = fullScreenRenderer.getRenderer(); +const renderWindow = fullScreenRenderer.getRenderWindow(); + +const axesActor = vtkAxesActor.newInstance(); +renderer.addActor(axesActor); + +renderer.resetCamera(); +renderWindow.render(); + +// ---------------------------------------------------------------------------- +// UI control handling +// ---------------------------------------------------------------------------- + +fullScreenRenderer.addController(controlPanel); + +function updateRendering() { + axesActor.update(); + renderer.resetCameraClippingRange(); + renderWindow.render(); +} + +document.querySelector('.recenter').addEventListener('change', (e) => { + const config = axesActor.getConfig(); + config.recenter = !!e.target.checked; + axesActor.setConfig(config); + updateRendering(); +}); + +document.querySelector('.xAxisInvert').addEventListener('change', (e) => { + const config = axesActor.getXConfig(); + config.invert = !!e.target.checked; + axesActor.setXConfig(config); + updateRendering(); +}); + +document.querySelector('.yAxisInvert').addEventListener('change', (e) => { + const config = axesActor.getYConfig(); + config.invert = !!e.target.checked; + axesActor.setYConfig(config); + updateRendering(); +}); + +document.querySelector('.zAxisInvert').addEventListener('change', (e) => { + const config = axesActor.getZConfig(); + config.invert = !!e.target.checked; + axesActor.setZConfig(config); + updateRendering(); +}); + +// ----------------------------------------------------------- +// Make some variables global so that you can inspect and +// modify objects in your browser's developer console: +// ----------------------------------------------------------- + +global.setLoggerFunction = macro.setLoggerFunction; +global.axesActor = axesActor; +global.renderer = renderer; +global.renderWindow = renderWindow; diff --git a/Sources/Rendering/Core/AxesActor/index.d.ts b/Sources/Rendering/Core/AxesActor/index.d.ts index fe9f77964ff..4a5a6aaf405 100755 --- a/Sources/Rendering/Core/AxesActor/index.d.ts +++ b/Sources/Rendering/Core/AxesActor/index.d.ts @@ -15,32 +15,32 @@ export interface vtkAxesActor extends vtkActor { /** * */ - getXAxisColor(): number[]; + getXConfig(): object; /** * */ - getXAxisColorByReference(): number[]; + getYConfig(): object; /** * */ - getYAxisColor(): number[]; + getZConfig(): object; /** * */ - getYAxisColorByReference(): number[]; + getXAxisColor(): number[]; /** * */ - getZAxisColor(): number[]; + getYAxisColor(): number[]; /** * */ - getZAxisColorByReference(): number[]; + getZAxisColor(): number[]; /** * @@ -49,32 +49,38 @@ export interface vtkAxesActor extends vtkActor { setConfig(config: object): boolean; /** - * Set X axis color. - * @param {Number} r Defines the red component (between 0 and 1). - * @param {Number} g Defines the green component (between 0 and 1). - * @param {Number} b Defines the blue component (between 0 and 1). + * + * @param config */ - setXAxisColor(r: number, g: number, b: number): boolean; + setXConfig(config: object): boolean; /** - * Set X axis color. - * @param XAxisColor + * + * @param config */ - setXAxisColorFrom(XAxisColor: number[]): boolean; + setYConfig(config: object): boolean; /** - * Set Y axis color. + * + * @param config + */ + setZConfig(config: object): boolean; + + /** + * Set X axis color. * @param {Number} r Defines the red component (between 0 and 1). * @param {Number} g Defines the green component (between 0 and 1). * @param {Number} b Defines the blue component (between 0 and 1). */ - setYAxisColor(r: number, g: number, b: number): boolean; + setXAxisColor(r: number, g: number, b: number): boolean; /** * Set Y axis color. - * @param YAxisColor + * @param {Number} r Defines the red component (between 0 and 1). + * @param {Number} g Defines the green component (between 0 and 1). + * @param {Number} b Defines the blue component (between 0 and 1). */ - setYAxisColorFrom(YAxisColor: number[]): boolean; + setYAxisColor(r: number, g: number, b: number): boolean; /** * Set Z axis color. @@ -84,12 +90,6 @@ export interface vtkAxesActor extends vtkActor { */ setZAxisColor(r: number, g: number, b: number): boolean; - /** - * Set E axis color. - * @param ZAxisColor - */ - setZAxisColorFrom(ZAxisColor: number[]): boolean; - /** * */ diff --git a/Sources/Rendering/Core/AxesActor/index.js b/Sources/Rendering/Core/AxesActor/index.js index 2813d931c8c..03baf331cdf 100644 --- a/Sources/Rendering/Core/AxesActor/index.js +++ b/Sources/Rendering/Core/AxesActor/index.js @@ -21,10 +21,14 @@ function centerDataSet(ds) { .apply(ds.getPoints().getData()); } -function shiftDataset(ds, axis) { +function shiftDataset(ds, axis, invert = false) { const bounds = ds.getPoints().getBounds(); const center = [0, 0, 0]; - center[axis] = -bounds[axis * 2]; + if (invert) { + center[axis] = -bounds[axis * 2 + 1]; + } else { + center[axis] = -bounds[axis * 2]; + } vtkMatrixBuilder .buildFromDegree() .translate(...center) @@ -65,36 +69,48 @@ function vtkAxesActor(publicAPI, model) { publicAPI.setMapper(_mapper); publicAPI.update = () => { + let currentConfig = { + ...model.config, + ...model.xConfig, + }; + const xAxis = vtkArrowSource - .newInstance({ direction: [1, 0, 0], ...model.config }) + .newInstance({ direction: [1, 0, 0], ...currentConfig }) .getOutputData(); if (model.config.recenter) { centerDataSet(xAxis); } else { - shiftDataset(xAxis, 0); + shiftDataset(xAxis, 0, currentConfig.invert); } - addColor(xAxis, ...model.xAxisColor); + addColor(xAxis, ...currentConfig.color); + currentConfig = { + ...model.config, + ...model.yConfig, + }; const yAxis = vtkArrowSource - .newInstance({ direction: [0, 1, 0], ...model.config }) + .newInstance({ direction: [0, 1, 0], ...currentConfig }) .getOutputData(); if (model.config.recenter) { centerDataSet(yAxis); } else { - shiftDataset(yAxis, 1); + shiftDataset(yAxis, 1, currentConfig.invert); } + addColor(yAxis, ...currentConfig.color); - addColor(yAxis, ...model.yAxisColor); - + currentConfig = { + ...model.config, + ...model.zConfig, + }; const zAxis = vtkArrowSource - .newInstance({ direction: [0, 0, 1], ...model.config }) + .newInstance({ direction: [0, 0, 1], ...currentConfig }) .getOutputData(); if (model.config.recenter) { centerDataSet(zAxis); } else { - shiftDataset(zAxis, 2); + shiftDataset(zAxis, 2, currentConfig.invert); } - addColor(zAxis, ...model.zAxisColor); + addColor(zAxis, ...currentConfig.color); const source = vtkAppendPolyData.newInstance(); source.setInputData(xAxis); @@ -107,76 +123,68 @@ function vtkAxesActor(publicAPI, model) { publicAPI.update(); const _debouncedUpdate = macro.debounce(publicAPI.update, 0); - const { setConfig, setXAxisColor, setYAxisColor, setZAxisColor } = publicAPI; + publicAPI.setXAxisColor = (color) => + publicAPI.setXConfig({ ...publicAPI.getXConfig(), color }); - publicAPI.setConfig = (c) => { - if (setConfig(c)) { - _debouncedUpdate(); - return true; - } - return false; - }; + publicAPI.setYAxisColor = (color) => + publicAPI.setYConfig({ ...publicAPI.getYConfig(), color }); - publicAPI.setXAxisColor = (c) => { - if (setXAxisColor(c)) { - _debouncedUpdate(); - return true; - } - return false; - }; + publicAPI.setZAxisColor = (color) => + publicAPI.setZConfig({ ...publicAPI.getZConfig(), color }); - publicAPI.setYAxisColor = (c) => { - if (setYAxisColor(c)) { - _debouncedUpdate(); - return true; - } - return false; - }; + publicAPI.getXAxisColor = () => model.getXConfig().color; - publicAPI.setZAxisColor = (c) => { - if (setZAxisColor(c)) { - _debouncedUpdate(); - return true; - } - return false; - }; + publicAPI.getYAxisColor = () => model.getYConfig().color; + + publicAPI.getZAxisColor = () => model.getZConfig().color; + + model._onConfigChanged = _debouncedUpdate; + model._onXConfigChanged = _debouncedUpdate; + model._onYConfigChanged = _debouncedUpdate; + model._onZConfigChanged = _debouncedUpdate; } // ---------------------------------------------------------------------------- // Object factory // ---------------------------------------------------------------------------- -export const DEFAULT_VALUES = { - config: { - recenter: true, - tipResolution: 60, - tipRadius: 0.1, - tipLength: 0.2, - shaftResolution: 60, - shaftRadius: 0.03, - invert: false, - }, - xAxisColor: [255, 0, 0], - yAxisColor: [255, 255, 0], - zAxisColor: [0, 128, 0], -}; +function defaultValues(initialValues) { + return { + config: { + recenter: true, + tipResolution: 60, + tipRadius: 0.1, + tipLength: 0.2, + shaftResolution: 60, + shaftRadius: 0.03, + invert: false, + ...initialValues?.config, + }, + xConfig: { + color: [255, 0, 0], + invert: false, + ...initialValues?.xConfig, + }, + yConfig: { + color: [255, 255, 0], + invert: false, + ...initialValues?.yConfig, + }, + zConfig: { + color: [0, 128, 0], + invert: false, + ...initialValues?.zConfig, + }, + }; +} // ---------------------------------------------------------------------------- export function extend(publicAPI, model, initialValues = {}) { - Object.assign(model, DEFAULT_VALUES, initialValues); - // Inheritance - vtkActor.extend(publicAPI, model, initialValues); - - macro.setGet(publicAPI, model, ['config']); - macro.setGetArray( - publicAPI, - model, - ['xAxisColor', 'yAxisColor', 'zAxisColor'], - 3, - 255 - ); + vtkActor.extend(publicAPI, model, defaultValues(initialValues)); + + macro.setGet(publicAPI, model, ['config', 'xConfig', 'yConfig', 'zConfig']); // Object methods vtkAxesActor(publicAPI, model);