import 'vtk.js/Sources/favicon';
import 'vtk.js/Sources/Rendering/Profiles/Geometry'; import 'vtk.js/Sources/Rendering/Profiles/Glyph';
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow'; import vtkInteractorStyleImage from 'vtk.js/Sources/Interaction/Style/InteractorStyleImage';
import vtkWidgetManager from 'vtk.js/Sources/Widgets/Core/WidgetManager'; import vtkLabelWidget from 'vtk.js/Sources/Widgets/Widgets3D/LabelWidget';
import controlPanel from './controlPanel.html';
const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance(); const renderer = fullScreenRenderer.getRenderer(); const renderWindow = fullScreenRenderer.getRenderWindow(); const iStyle = vtkInteractorStyleImage.newInstance(); renderWindow.getInteractor().setInteractorStyle(iStyle);
const widgetManager = vtkWidgetManager.newInstance(); widgetManager.setRenderer(renderer);
renderer.resetCamera(); widgetManager.enablePicking();
fullScreenRenderer.addController(controlPanel);
let currentHandle = null;
document.querySelector('#addLabel').addEventListener('click', () => { const widget = vtkLabelWidget.newInstance(); const handle = widgetManager.addWidget(widget); widgetManager.grabFocus(widget);
handle.onStartInteractionEvent(() => { currentHandle = handle; document.getElementById('txtIpt').value = currentHandle.getText() || ''; document.getElementById('fontSize').value = currentHandle.getFontProperties().fontSize || 16; document.getElementById('color').value = currentHandle.getFontProperties().fontColor || 'white'; }); });
document.querySelector('#deleteLabel').addEventListener('click', () => { if (currentHandle) { currentHandle.reset(); widgetManager.removeWidget(currentHandle); currentHandle = null; } });
function updateText() { const input = document.getElementById('txtIpt').value; if (currentHandle) { currentHandle.setText(input); renderWindow.render(); } } document.querySelector('#txtIpt').addEventListener('keyup', updateText);
function updateFontSize() { const input = document.getElementById('fontSize').value; if (currentHandle) { currentHandle.setFontProperties({ ...currentHandle.getFontProperties(), fontSize: input, }); renderWindow.getInteractor().render(); } } document.querySelector('#fontSize').addEventListener('input', updateFontSize);
function updateColor() { const input = document.getElementById('color').value; if (currentHandle) { currentHandle.setFontProperties({ ...currentHandle.getFontProperties(), fontColor: input, }); } } document.querySelector('#color').addEventListener('input', updateColor);
|