diff --git a/dependency-cruiser/dependency-cruiser.md b/dependency-cruiser/dependency-cruiser.md index 635e45043..750adcd8c 100644 --- a/dependency-cruiser/dependency-cruiser.md +++ b/dependency-cruiser/dependency-cruiser.md @@ -2,14 +2,14 @@ Dependency Cruiser is a powerful tool for analyzing and visualizing dependencies in source code. It is designed primarily for JavaScript and TypeScript projects. This tool helps identify and understand the structure of dependencies between modules in your project, making it easier to: -- Detect issues such as cyclic dependencies -- Identify violations of architectural rules -- Anticipate potential difficulties in code maintenance +- Detect issues such as cyclic dependencies +- Identify violations of architectural rules +- Anticipate potential difficulties in code maintenance Additionally, Dependency Cruiser allows you to: -- Define custom rules to ensure compliance with established standards -- Generate clear, visual diagrams to analyze the project's structure +- Define custom rules to ensure compliance with established standards +- Generate clear, visual diagrams to analyze the project's structure ## Prerequisites: Installing GraphViz @@ -17,12 +17,12 @@ To fully utilize Dependency Cruiser’s commands, ensure you have **GraphViz** i ### Installing GraphViz -- **On Linux/macOS**: Use a package manager like `apt` or `dnf`: +- **On Linux/macOS**: Use a package manager like `apt` or `dnf`: ```bash sudo apt-get install graphviz # For Debian/Ubuntu sudo dnf install graphviz # For RedHat/CentOS ``` -- **On Windows**: Download the installer from the [GraphViz download page](https://www.graphviz.org/download/) and follow the installation instructions. +- **On Windows**: Download the installer from the [GraphViz download page](https://www.graphviz.org/download/) and follow the installation instructions. ### Why GraphViz? @@ -38,8 +38,8 @@ Without GraphViz, this step will fail, and you won’t be able to create graphic Dependency Cruiser provides the following commands for quick usage: -- **`npm run depcruise:high`**: Generates a high-level dependency diagram. -- **`npm run depcruise:low`**: Generates a low-level dependency diagram. +- **`npm run depcruise:high`**: Generates a high-level dependency diagram. +- **`npm run depcruise:low`**: Generates a low-level dependency diagram. ### Outputs @@ -52,8 +52,8 @@ Both commands generate the following outputs: If you are using VSCode, consider installing the [SVG Preview](https://marketplace.visualstudio.com/items?itemName=jock.svg) plugin. This plugin allows you to: -- Preview the generated SVG files directly in VSCode. -- Export the graph as a PNG file for easy sharing or documentation. +- Preview the generated SVG files directly in VSCode. +- Export the graph as a PNG file for easy sharing or documentation. ## Configuration @@ -69,23 +69,23 @@ Here are some of the most important configuration variables you can use: ### Inclusion and Exclusion -- **`includeOnly`**: Specify which modules to include. This is an array of regular expressions (in string format). Dependency Cruiser will skip everything not matching this pattern. -- **`exclude`**: Specify which modules to exclude. This is an array of regular expressions (in string format) to match against paths. -- **`doNotFollow`**: Define modules to ignore during further analysis. This is an array of regular expressions (in string format) to match against paths. +- **`includeOnly`**: Specify which modules to include. This is an array of regular expressions (in string format). Dependency Cruiser will skip everything not matching this pattern. +- **`exclude`**: Specify which modules to exclude. This is an array of regular expressions (in string format) to match against paths. +- **`doNotFollow`**: Define modules to ignore during further analysis. This is an array of regular expressions (in string format) to match against paths. ### Graphical Representation -- **`collapsePattern`**: Pattern of modules to consolidate in high-level dependency graphs. If you use the high-level graphical dependency graph reporter (`archi`), tweaking this pattern can optimize the visualization. +- **`collapsePattern`**: Pattern of modules to consolidate in high-level dependency graphs. If you use the high-level graphical dependency graph reporter (`archi`), tweaking this pattern can optimize the visualization. ### Graph Layout -- **`splines`**: Controls the style of graph edges. For example: - - **`"ortho"`**: Produces straight lines but can be slow for large graphs. -- **`rankdir`**: Sets the graph's direction. Common values: - - **`"TB"`**: Top-to-bottom (default). - - **`"LR"`**: Left-to-right. -- **`ranksep`**: Adjusts the separation between graph ranks for better clarity. -- **`nodesep`**: Adjusts the separation between nodes for better clarity. +- **`splines`**: Controls the style of graph edges. For example: + - **`"ortho"`**: Produces straight lines but can be slow for large graphs. +- **`rankdir`**: Sets the graph's direction. Common values: + - **`"TB"`**: Top-to-bottom (default). + - **`"LR"`**: Left-to-right. +- **`ranksep`**: Adjusts the separation between graph ranks for better clarity. +- **`nodesep`**: Adjusts the separation between nodes for better clarity. ## Further Development diff --git a/src/Loader/Loader.tsx b/src/Loader/Loader.tsx deleted file mode 100644 index bfe622b6e..000000000 --- a/src/Loader/Loader.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import LinearProgress from '@mui/material/LinearProgress'; - -function Loader() { - return ( -
- -
- ); -} - -export default Loader; diff --git a/src/ThreeEditor/components/Sidebar/properties/category/RangeModulatorConfiguration.tsx b/src/ThreeEditor/components/Sidebar/properties/category/RangeModulatorConfiguration.tsx deleted file mode 100644 index 5899f35d2..000000000 --- a/src/ThreeEditor/components/Sidebar/properties/category/RangeModulatorConfiguration.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { YaptideEditor } from '../../../../js/YaptideEditor'; -import { PropertiesCategory } from './PropertiesCategory'; - -export function BeamModifiersConfiguration(props: { editor: YaptideEditor }) { - return ( - - {/* - TODO: implement configuration for beam modifiers - */} - - ); -} diff --git a/src/ThreeEditor/js/Resizer.js b/src/ThreeEditor/js/Resizer.js deleted file mode 100644 index 241c489bb..000000000 --- a/src/ThreeEditor/js/Resizer.js +++ /dev/null @@ -1,44 +0,0 @@ -import { UIElement } from './libs/ui.js'; - -function Resizer(editor) { - const { signals } = editor; - - const dom = document.createElement('div'); - dom.id = 'resizer'; - - function onPointerMove(event) { - // PointerEvent's movementX/movementY are 0 in WebKit - - if (event.isPrimary === false) return; - - const rect = dom.getBoundingClientRect(); - const x = document.body.offsetWidth - rect.right - event.movementX; - - dom.style.right = x + 'px'; - - document.getElementById('sidebar').style.width = x + rect.width + 'px'; - document.getElementById('viewport').style.right = x + rect.width + 'px'; - - signals.windowResize.dispatch(); - } - - function onPointerUp(event) { - if (event.isPrimary === false) return; - - dom.ownerDocument.removeEventListener('pointermove', onPointerMove); - dom.ownerDocument.removeEventListener('pointerup', onPointerUp); - } - - function onPointerDown(event) { - if (event.isPrimary === false) return; - - dom.ownerDocument.addEventListener('pointermove', onPointerMove, false); - dom.ownerDocument.addEventListener('pointerup', onPointerUp, false); - } - - dom.addEventListener('pointerdown', onPointerDown, false); - - return new UIElement(dom); -} - -export { Resizer }; diff --git a/src/ThreeEditor/js/Toolbar.js b/src/ThreeEditor/js/Toolbar.js deleted file mode 100644 index bceef8863..000000000 --- a/src/ThreeEditor/js/Toolbar.js +++ /dev/null @@ -1,84 +0,0 @@ -import { UIButton, UICheckbox, UIPanel } from './libs/ui.js'; - -function Toolbar(editor) { - const { signals } = editor; - - const container = new UIPanel(); - container.setId('toolbar'); - - // translate - const translateIcon = document.createElement('img'); - translateIcon.title = 'Translate'; - translateIcon.src = process.env.PUBLIC_URL + '/images/translate.svg'; - - const translate = new UIButton(); - translate.dom.className = 'Button selected'; - translate.dom.appendChild(translateIcon); - translate.onClick(() => { - signals.transformModeChanged.dispatch('translate'); - }); - container.add(translate); - - // rotate - const rotateIcon = document.createElement('img'); - rotateIcon.title = 'Rotate'; - rotateIcon.src = process.env.PUBLIC_URL + '/images/rotate.svg'; - - const rotate = new UIButton(); - rotate.dom.appendChild(rotateIcon); - rotate.onClick(() => { - signals.transformModeChanged.dispatch('rotate'); - }); - container.add(rotate); - - // scale - const scaleIcon = document.createElement('img'); - scaleIcon.title = 'Scale'; - scaleIcon.src = process.env.PUBLIC_URL + '/images/scale.svg'; - - const scale = new UIButton(); - scale.dom.appendChild(scaleIcon); - scale.onClick(() => { - signals.transformModeChanged.dispatch('scale'); - }); - container.add(scale); - - // local / world - const local = new UICheckbox(false); - local.dom.title = 'Local'; - local.onChange(() => { - signals.spaceChanged.dispatch(local.getValue() === true ? 'local' : 'world'); - }); - container.add(local); - - // - - signals.transformModeChanged.add(mode => { - translate.dom.classList.remove('selected'); - rotate.dom.classList.remove('selected'); - scale.dom.classList.remove('selected'); - - switch (mode) { - case 'translate': - translate.dom.classList.add('selected'); - - break; - case 'rotate': - rotate.dom.classList.add('selected'); - - break; - case 'scale': - scale.dom.classList.add('selected'); - - break; - default: - console.error(mode, "isn't supported"); - - break; - } - }); - - return container; -} - -export { Toolbar }; diff --git a/src/ThreeEditor/js/menubar/Menubar.Add.js b/src/ThreeEditor/js/menubar/Menubar.Add.js deleted file mode 100644 index f4656a4ad..000000000 --- a/src/ThreeEditor/js/menubar/Menubar.Add.js +++ /dev/null @@ -1,51 +0,0 @@ -import { BoxFigure, CylinderFigure, SphereFigure } from '../../Simulation/Figures/BasicFigures'; -import { AddDetectGeometryCommand, AddObjectCommand, AddZoneCommand } from '../commands/Commands'; -import { UIHorizontalRule, UIPanel } from '../libs/ui.js'; -import { createOption } from './Menubar.js'; - -function MenubarAdd(editor) { - const container = new UIPanel(); - container.setClass('menu'); - - const title = new UIPanel(); - title.setClass('title'); - title.setTextContent('Add'); - container.add(title); - - const options = new UIPanel(); - options.setClass('options'); - container.add(options); - - // YAPTIDE zones - options.add( - createOption('option', 'Zone', () => { - editor.execute(new AddZoneCommand(editor)); - }), - new UIHorizontalRule() - ); - - // YAPTIDE detectors - options.add( - createOption('option', 'Detect Geometry', () => { - editor.execute(new AddDetectGeometryCommand(editor)); - }), - new UIHorizontalRule() - ); - - // Box Sphere & Cylinder - options.add( - createOption('option', 'Box', () => { - editor.execute(new AddObjectCommand(editor, new BoxFigure())); - }), - createOption('option', 'Sphere', () => { - editor.execute(new AddObjectCommand(editor, new SphereFigure())); - }), - createOption('option', 'Cylinder', () => { - editor.execute(new AddObjectCommand(editor, new CylinderFigure())); - }) - ); - - return container; -} - -export { MenubarAdd }; diff --git a/src/ThreeEditor/js/menubar/Menubar.Edit.js b/src/ThreeEditor/js/menubar/Menubar.Edit.js deleted file mode 100644 index 27c0ca6c4..000000000 --- a/src/ThreeEditor/js/menubar/Menubar.Edit.js +++ /dev/null @@ -1,97 +0,0 @@ -import * as THREE from 'three'; - -import { - AddObjectCommand, - RemoveDetectGeometryCommand, - RemoveFilterCommand, - RemoveObjectCommand, - RemoveZoneCommand, - SetPositionCommand -} from '../commands/Commands'; -import { UIHorizontalRule, UIPanel } from '../libs/ui.js'; -import { createOption } from './Menubar.js'; - -function MenubarEdit(editor) { - const { history, signals } = editor; - - const container = new UIPanel(); - container.setClass('menu'); - - const title = new UIPanel(); - title.setClass('title'); - title.setTextContent('Edit'); - container.add(title); - - const options = new UIPanel(); - options.setClass('options'); - container.add(options); - - // History - const undo = createOption('option', 'Undo (Ctrl+Z)', editor.undo); - const redo = createOption('option', 'Redo (Ctrl+Shift+Z)', editor.redo); - signals.historyChanged.add(() => { - undo.setClass(history.undos.length === 0 ? 'inactive' : 'option'); - redo.setClass(history.redos.length === 0 ? 'inactive' : 'option'); - }); - - options.add( - undo, - redo, - createOption('option', 'Clear History', () => { - if (window.confirm('The Undo/Redo History will be cleared. Are you sure?')) { - editor.history.clear(); - } - }), - new UIHorizontalRule() - ); - - // Object - const getRemoveCommand = (editor, object) => { - switch (true) { - case object.isDetector: - return new RemoveDetectGeometryCommand(editor, object); - case object.isZone: - return new RemoveZoneCommand(editor, object); - case object.isFilter: - return new RemoveFilterCommand(editor, object); - default: - return new RemoveObjectCommand(editor, object); - } - }; - const isRemovableOrCloneable = object => object && object.parent && !object.notRemovable; - options.add( - createOption('option', 'Center', () => { - const object = editor.selected; - - if (object === null || object.notMovable) return; // avoid centering the camera or scene - - const center = new THREE.Box3().setFromObject(object).getCenter(new THREE.Vector3()); - const newPosition = new THREE.Vector3(); - - newPosition.x = object.position.x + (object.position.x - center.x); - newPosition.y = object.position.y + (object.position.y - center.y); - newPosition.z = object.position.z + (object.position.z - center.z); - - editor.execute(new SetPositionCommand(editor, object, newPosition)); - }), - createOption('option', 'Clone', () => { - let object = editor.selected; - - if (!isRemovableOrCloneable(object)) return; // avoid cloning unique objects - - object = object.clone(); - editor.execute(new AddObjectCommand(editor, object)); - }), - createOption('option', 'Delete (Del)', () => { - let object = editor.selected; - - if (!isRemovableOrCloneable(object)) return; // avoid deleting unique objects - - editor.execute(getRemoveCommand(editor, object)); - }) - ); - - return container; -} - -export { MenubarEdit }; diff --git a/src/ThreeEditor/js/menubar/Menubar.Examples.js b/src/ThreeEditor/js/menubar/Menubar.Examples.js deleted file mode 100644 index c8f2a8c91..000000000 --- a/src/ThreeEditor/js/menubar/Menubar.Examples.js +++ /dev/null @@ -1,48 +0,0 @@ -import EXAMPLES from '../../../examples/examples'; -import { UIHorizontalRule, UIPanel } from '../libs/ui.js'; -import { createOption } from './Menubar.js'; - -/** - * @typedef {import('../YaptideEditor').YaptideEditor} Editor - * @param {Editor} editor - * @constructor - * @deprecated - */ -export function MenubarExamples(editor) { - const container = new UIPanel(); - container.setClass('menu'); - - const title = new UIPanel(); - title.setClass('title'); - title.setTextContent('Examples'); - container.add(title); - - const options = new UIPanel(); - options.setClass('options'); - container.add(options); - - /** - * - * @param {import('../EditorJson').EditorJson} example - */ - function loadExample(example) { - editor.clear(); - editor.fromJSON(example.inputJson); - editor.signals.exampleLoaded.dispatch(example); - } - - // YAPTIDE examples - options.add( - ...Object.values(EXAMPLES) - .flat() - .map(example => - createOption('option', example.input.inputJson.project?.title ?? 'Example', () => { - window.confirm('Any unsaved data will be lost. Are you sure?') && - loadExample(example); - }) - ), - new UIHorizontalRule() - ); - - return container; -} diff --git a/src/ThreeEditor/js/menubar/Menubar.File.js b/src/ThreeEditor/js/menubar/Menubar.File.js deleted file mode 100644 index 8826eee6c..000000000 --- a/src/ThreeEditor/js/menubar/Menubar.File.js +++ /dev/null @@ -1,91 +0,0 @@ -import { saveString } from '../../../util/File'; -import { UIHorizontalRule, UIPanel } from '../libs/ui.js'; -import { createOption } from './Menubar.js'; -import { MenubarSettings, MenubarSettingsEvent } from './Menubar.Settings.js'; - -function MenubarFile(editor) { - const container = new UIPanel(); - container.setClass('menu'); - - const title = new UIPanel(); - title.setClass('title'); - title.setTextContent('File'); - container.add(title); - - const options = new UIPanel(); - options.setClass('options'); - container.add(options); - - // New - - options.add( - createOption('option', 'New', () => { - window.confirm('Any unsaved data will be lost. Are you sure?') && editor.clear(); - }), - new UIHorizontalRule() - ); - - // Open Editor from file - const form = document.createElement('form'); - form.style.display = 'none'; - document.body.appendChild(form); - - const fileInput = document.createElement('input'); - fileInput.multiple = true; - fileInput.type = 'file'; - fileInput.addEventListener('change', () => { - editor.loader.loadFiles(fileInput.files); - form.reset(); - }); - form.appendChild(fileInput); - - options.add( - createOption('option', 'Open', () => { - fileInput.click(); - }), - new UIHorizontalRule() - ); - - // Save Editor to file - - options.add( - createOption('option', 'Save', () => { - let output = editor.toJSON(); - - try { - output = JSON.stringify(output, null, '\t'); - output = output.replace(/[\n\t]+([\d.e\-[\]]+)/g, '$1'); - } catch (e) { - output = JSON.stringify(output); - } - - const fileName = window.prompt('Name of the file', 'editor'); - - if (fileName) saveString(output, `${fileName}.json`); - }), - new UIHorizontalRule() - ); - - // Settings - const settingsModal = new UIPanel(); - settingsModal.setClass('sidebar'); - settingsModal.dom.style.left = '0'; - settingsModal.setDisplay('none'); - - const settings = new MenubarSettings(editor); - settings.dom.addEventListener(MenubarSettingsEvent.close, () => { - settingsModal.setDisplay('none'); - }); - settingsModal.add(settings); - editor.container.appendChild(settingsModal.dom); - - options.add( - createOption('option', 'Settings', () => { - settingsModal.setDisplay(''); - }) - ); - - return container; -} - -export { MenubarFile }; diff --git a/src/ThreeEditor/js/menubar/Menubar.Help.js b/src/ThreeEditor/js/menubar/Menubar.Help.js deleted file mode 100644 index 791ebdc64..000000000 --- a/src/ThreeEditor/js/menubar/Menubar.Help.js +++ /dev/null @@ -1,41 +0,0 @@ -import { UIPanel } from '../libs/ui.js'; -import { createOption } from './Menubar.js'; - -function MenubarHelp(editor) { - const container = new UIPanel(); - container.setClass('menu'); - - const title = new UIPanel(); - title.setClass('title'); - title.setTextContent('Help'); - container.add(title); - - const options = new UIPanel(); - options.setClass('options'); - container.add(options); - - // Source code - options.add( - createOption('option', 'Source Code', () => { - window.open('https://github.com/mrdoob/three.js/tree/master/editor', '_blank'); - }) - ); - - // About - options.add( - createOption('option', 'About', () => { - window.open('https://threejs.org', '_blank'); - }) - ); - - // Manual - options.add( - createOption('option', 'Manual', () => { - window.open('https://github.com/mrdoob/three.js/wiki/Editor-Manual', '_blank'); - }) - ); - - return container; -} - -export { MenubarHelp }; diff --git a/src/ThreeEditor/js/menubar/Menubar.Settings.History.js b/src/ThreeEditor/js/menubar/Menubar.Settings.History.js deleted file mode 100644 index 4fb800423..000000000 --- a/src/ThreeEditor/js/menubar/Menubar.Settings.History.js +++ /dev/null @@ -1,102 +0,0 @@ -import { UIBreak, UIPanel, UIText } from '../libs/ui.js'; -import { UIBoolean, UIOutliner } from '../libs/ui.three.js'; - -function MenubarSettingsHistory(editor) { - const { signals, config, history } = editor; - - const container = new UIPanel(); - - container.add(new UIText('History'.toUpperCase())); - - // - - const persistent = new UIBoolean(config.getKey('settings/history'), 'Persistent'); - persistent.setPosition('absolute').setRight('8px'); - persistent.onChange(function () { - const value = this.getValue(); - - config.setKey('settings/history', value); - - if (value) { - alert( - 'The history will be preserved across sessions.\nThis can have an impact on performance when working with textures.' - ); - - const lastUndoCmd = history.undos[history.undos.length - 1]; - const lastUndoId = lastUndoCmd !== undefined ? lastUndoCmd.id : 0; - editor.history.enableSerialization(lastUndoId); - } else { - signals.historyChanged.dispatch(); - } - }); - container.add(persistent); - - container.add(new UIBreak(), new UIBreak()); - - let ignoreObjectSelectedSignal = false; - - const outliner = new UIOutliner(editor); - outliner.onChange(function () { - ignoreObjectSelectedSignal = true; - - editor.history.goToState(parseInt(outliner.getValue())); - - ignoreObjectSelectedSignal = false; - }); - container.add(outliner); - - // - - const refreshUI = function () { - const options = []; - - function buildOption(object) { - const option = document.createElement('div'); - option.value = object.id; - - return option; - } - - (function addObjects(objects) { - for (let i = 0, l = objects.length; i < l; i++) { - const object = objects[i]; - - const option = buildOption(object); - option.innerHTML = ' ' + object.name; - - options.push(option); - } - })(history.undos); - - (function addObjects(objects) { - for (let i = objects.length - 1; i >= 0; i--) { - const object = objects[i]; - - const option = buildOption(object); - option.innerHTML = ' ' + object.name; - option.style.opacity = 0.3; - - options.push(option); - } - })(history.redos); - - outliner.setOptions(options); - }; - - refreshUI(); - - // events - - signals.editorCleared.add(refreshUI); - - signals.historyChanged.add(refreshUI); - signals.historyChanged.add(function (cmd) { - if (ignoreObjectSelectedSignal === true) return; - - outliner.setValue(cmd !== undefined ? cmd.id : null); - }); - - return container; -} - -export { MenubarSettingsHistory }; diff --git a/src/ThreeEditor/js/menubar/Menubar.Settings.Viewport.js b/src/ThreeEditor/js/menubar/Menubar.Settings.Viewport.js deleted file mode 100644 index 2e0046fb2..000000000 --- a/src/ThreeEditor/js/menubar/Menubar.Settings.Viewport.js +++ /dev/null @@ -1,40 +0,0 @@ -import { UIPanel, UIRow, UIText } from '../libs/ui.js'; -import { UIBoolean } from '../libs/ui.three.js'; - -function MenubarSettingsViewport(editor) { - const { signals } = editor; - - const container = new UIPanel(); - - const headerRow = new UIRow(); - headerRow.add(new UIText('VIEWPORT')); - container.add(headerRow); - - // grid - - const showGridRow = new UIRow(); - - showGridRow.add(new UIText('Grid').setWidth('90px')); - - const showGrid = new UIBoolean(true).onChange(() => { - signals.showGridChanged.dispatch(showGrid.getValue()); - }); - showGridRow.add(showGrid); - container.add(showGridRow); - - // helpers - - const showHelpersRow = new UIRow(); - - showHelpersRow.add(new UIText('Helpers').setWidth('90px')); - - const showHelpers = new UIBoolean(true).onChange(() => { - signals.showHelpersChanged.dispatch(showHelpers.getValue()); - }); - showHelpersRow.add(showHelpers); - container.add(showHelpersRow); - - return container; -} - -export { MenubarSettingsViewport }; diff --git a/src/ThreeEditor/js/menubar/Menubar.Settings.js b/src/ThreeEditor/js/menubar/Menubar.Settings.js deleted file mode 100644 index 4be72221d..000000000 --- a/src/ThreeEditor/js/menubar/Menubar.Settings.js +++ /dev/null @@ -1,185 +0,0 @@ -import * as THREE from 'three'; - -import { UIButton, UIColor, UIPanel, UIRow, UISelect, UIText } from '../libs/ui.js'; -import { UITexture } from '../libs/ui.three.js'; -import { SidebarProjectRenderer } from '../sidebar/Sidebar.Project.Renderer.js'; -import { MenubarSettingsHistory } from './Menubar.Settings.History.js'; -import { MenubarSettingsViewport } from './Menubar.Settings.Viewport.js'; - -const MenubarSettingsEvent = { - close: 'closeMenubarSettings' -}; - -function MenubarSettings(editor) { - const { signals, scene } = editor; - - const container = new UIPanel(); - - const headerRow = new UIRow(); - headerRow.add(new UIText('Settings'.toUpperCase())); - const closeButton = new UIButton('Close') - .onClick(() => { - const event = new CustomEvent(MenubarSettingsEvent.close); - container.dom.dispatchEvent(event); - }) - .setMarginLeft('auto'); - headerRow.add(closeButton); - container.add(headerRow); - - const settings = new UIPanel(); - settings.setBorderTop('0'); - settings.setPaddingTop('20px'); - container.add(settings); - - // background - - const backgroundRow = new UIRow(); - - const backgroundType = new UISelect() - .setOptions({ - None: '', - Color: 'Color', - Texture: 'Texture', - Equirectangular: 'Equirect' - }) - .setWidth('160px'); - - backgroundType.onChange(() => { - onBackgroundChanged(); - refreshBackgroundUI(); - }); - - backgroundRow.add(new UIText('Background').setWidth('90px')); - backgroundRow.add(backgroundType); - - const backgroundColor = new UIColor() - .setValue('#000000') - .setMarginLeft('8px') - .onInput(onBackgroundChanged); - backgroundRow.add(backgroundColor); - - const backgroundTexture = new UITexture().setMarginLeft('8px').onChange(onBackgroundChanged); - backgroundTexture.setDisplay('none'); - backgroundRow.add(backgroundTexture); - - const backgroundEquirectangularTexture = new UITexture() - .setMarginLeft('8px') - .onChange(onBackgroundChanged); - backgroundEquirectangularTexture.setDisplay('none'); - backgroundRow.add(backgroundEquirectangularTexture); - - settings.add(backgroundRow); - - function onBackgroundChanged() { - signals.sceneBackgroundChanged.dispatch( - backgroundType.getValue(), - backgroundColor.getHexValue(), - backgroundTexture.getValue(), - backgroundEquirectangularTexture.getValue() - ); - } - - function refreshBackgroundUI() { - const type = backgroundType.getValue(); - - backgroundType.setWidth(type === 'None' ? '160px' : '110px'); - backgroundColor.setDisplay(type === 'Color' ? '' : 'none'); - backgroundTexture.setDisplay(type === 'Texture' ? '' : 'none'); - backgroundEquirectangularTexture.setDisplay(type === 'Equirectangular' ? '' : 'none'); - } - - // environment - - const environmentRow = new UIRow(); - - const environmentType = new UISelect() - .setOptions({ - None: '', - Equirectangular: 'Equirect', - ModelViewer: 'ModelViewer' - }) - .setWidth('160px'); - environmentType.setValue('None'); - environmentType.onChange(() => { - onEnvironmentChanged(); - refreshEnvironmentUI(); - }); - - environmentRow.add(new UIText('Environment').setWidth('90px')); - environmentRow.add(environmentType); - - const environmentEquirectangularTexture = new UITexture() - .setMarginLeft('8px') - .onChange(onEnvironmentChanged); - environmentEquirectangularTexture.setDisplay('none'); - environmentRow.add(environmentEquirectangularTexture); - - settings.add(environmentRow); - - function onEnvironmentChanged() { - signals.sceneEnvironmentChanged.dispatch( - environmentType.getValue(), - environmentEquirectangularTexture.getValue() - ); - } - - function refreshEnvironmentUI() { - const type = environmentType.getValue(); - - environmentType.setWidth(type !== 'Equirectangular' ? '160px' : '110px'); - environmentEquirectangularTexture.setDisplay(type === 'Equirectangular' ? '' : 'none'); - } - - // - - container.add(new MenubarSettingsViewport(editor)); - container.add(new MenubarSettingsHistory(editor)); - container.add(new SidebarProjectRenderer(editor)); - - // - - function refreshUI() { - if (scene.background) { - if (scene.background.isColor) { - backgroundType.setValue('Color'); - backgroundColor.setHexValue(scene.background.getHex()); - } else if (scene.background.isTexture) { - if (scene.background.mapping === THREE.EquirectangularReflectionMapping) { - backgroundType.setValue('Equirectangular'); - backgroundEquirectangularTexture.setValue(scene.background); - } else { - backgroundType.setValue('Texture'); - backgroundTexture.setValue(scene.background); - } - } - } else { - backgroundType.setValue('None'); - } - - if (scene.environment) { - if (scene.environment.mapping === THREE.EquirectangularReflectionMapping) { - environmentType.setValue('Equirectangular'); - environmentEquirectangularTexture.setValue(scene.environment); - } - } else { - environmentType.setValue('None'); - } - - refreshBackgroundUI(); - refreshEnvironmentUI(); - } - - refreshUI(); - - // events - - signals.editorCleared.add(refreshUI); - - signals.sceneGraphChanged.add(refreshUI); - - signals.objectChanged.add(refreshUI); - - return container; -} - -export { MenubarSettings, MenubarSettingsEvent }; diff --git a/src/ThreeEditor/js/menubar/Menubar.Status.js b/src/ThreeEditor/js/menubar/Menubar.Status.js deleted file mode 100644 index 3b4d62833..000000000 --- a/src/ThreeEditor/js/menubar/Menubar.Status.js +++ /dev/null @@ -1,50 +0,0 @@ -import * as THREE from 'three'; - -import deployInfo from '../../../util/identify/deployInfo.json'; -import { UIElement, UIPanel, UIText } from '../libs/ui.js'; -import { UIBoolean } from '../libs/ui.three.js'; - -function MenubarStatus(editor) { - const container = new UIPanel(); - container.setClass('menu right'); - - const deploy = new UIElement(document.createElement('a')).setTextContent( - `${deployInfo.date} ${deployInfo.commit}` - ); - deploy.dom.href = 'https://github.com/yaptide/ui/commit/' + deployInfo.commit; - deploy.dom.target = '_blank'; - deploy.dom.title = `${deployInfo.date} ${deployInfo.commit} ${deployInfo.branch}`; - deploy.setClass('title'); - deploy.setOpacity(0.5); - container.add(deploy); - - const version = new UIText('r' + THREE.REVISION); - version.setClass('title'); - version.setOpacity(0.5); - container.add(version); - - const autosave = new UIBoolean(editor.config.getKey('autosave'), 'autosave'); - autosave.text.setColor('#888'); - autosave.onChange(() => { - const value = this.getValue(); - - editor.config.setKey('autosave', value); - - if (value === true) { - editor.signals.sceneGraphChanged.dispatch(); - } - }); - container.add(autosave); - - editor.signals.savingStarted.add(() => { - autosave.text.setTextDecoration('underline'); - }); - - editor.signals.savingFinished.add(() => { - autosave.text.setTextDecoration('none'); - }); - - return container; -} - -export { MenubarStatus }; diff --git a/src/ThreeEditor/js/menubar/Menubar.View.js b/src/ThreeEditor/js/menubar/Menubar.View.js deleted file mode 100644 index 4217af9b7..000000000 --- a/src/ThreeEditor/js/menubar/Menubar.View.js +++ /dev/null @@ -1,52 +0,0 @@ -import { UIHorizontalRule, UIPanel } from '../libs/ui.js'; -import { createOption } from './Menubar.js'; - -function MenubarView(editor) { - const container = new UIPanel(); - container.setClass('menu'); - - const title = new UIPanel(); - title.setClass('title'); - title.setTextContent('View'); - container.add(title); - - const options = new UIPanel(); - options.setClass('options'); - container.add(options); - - // Fullscreen - options.add( - createOption( - 'option', - 'Fullscreen', - document.exitFullscreen - ? () => - document.fullscreenElement === null - ? document.documentElement.requestFullscreen() - : document.exitFullscreen() - : () => - document.webkitFullscreenElement === null //Safari - ? document.documentElement.webkitRequestFullscreen() - : document.webkitExitFullscreen() - ), - new UIHorizontalRule() - ); - - // Single view - options.add( - createOption('option', 'Single View', () => { - editor.signals.layoutChanged.dispatch('singleView'); - }) - ); - - // Four view - options.add( - createOption('option', 'Four Views', () => { - editor.signals.layoutChanged.dispatch('fourViews'); - }) - ); - - return container; -} - -export { MenubarView }; diff --git a/src/ThreeEditor/js/menubar/Menubar.js b/src/ThreeEditor/js/menubar/Menubar.js deleted file mode 100644 index 6a6c1ed96..000000000 --- a/src/ThreeEditor/js/menubar/Menubar.js +++ /dev/null @@ -1,41 +0,0 @@ -import { UIPanel, UIRow } from '../libs/ui.js'; -import { MenubarAdd } from './Menubar.Add.js'; -import { MenubarEdit } from './Menubar.Edit.js'; -import { MenubarExamples } from './Menubar.Examples.js'; -import { MenubarFile } from './Menubar.File.js'; -import { MenubarHelp } from './Menubar.Help.js'; -import { MenubarStatus } from './Menubar.Status.js'; -import { MenubarView } from './Menubar.View.js'; - -/** - * @param {string} optionClass - * @param {string} optionText - * @param {() => void} optionClick - * @return {UIRow} - */ -function createOption(optionClass, optionText, optionClick) { - let option = new UIRow(); - option.setClass(optionClass); - option.setTextContent(optionText); - option.onClick(optionClick); - - return option; -} - -function Menubar(editor) { - const container = new UIPanel(); - container.setId('menubar'); - - container.add(new MenubarFile(editor)); - container.add(new MenubarEdit(editor)); - container.add(new MenubarAdd(editor)); - container.add(new MenubarView(editor)); - container.add(new MenubarExamples(editor)); - container.add(new MenubarHelp(editor)); - - container.add(new MenubarStatus(editor)); - - return container; -} - -export { createOption, Menubar }; diff --git a/src/ThreeEditor/js/sidebar/Sidebar.AddPanel.js b/src/ThreeEditor/js/sidebar/Sidebar.AddPanel.js deleted file mode 100644 index d4077de6a..000000000 --- a/src/ThreeEditor/js/sidebar/Sidebar.AddPanel.js +++ /dev/null @@ -1,73 +0,0 @@ -import { BoxFigure, CylinderFigure, SphereFigure } from '../../Simulation/Figures/BasicFigures'; -import { - AddDetectGeometryCommand, - AddFilterCommand, - AddObjectCommand, - AddOutputCommand, - AddZoneCommand -} from '../commands/Commands'; -import { UIButton, UIPanel, UIRow, UIText } from '../libs/ui.js'; - -function createButtons( - parent, - title, - names, - commands, - areas = ['a', 'b', 'c'], - gridTemplate = [`"a b c"`] -) { - const container = new UIPanel(); - - // Header - const headerRow = new UIRow(); - headerRow.add(new UIText(title.toUpperCase())); - container.add(headerRow); - - // Buttons - - const btnRow = new UIRow(); - btnRow.setDisplay('grid'); - btnRow.dom.style.gridTemplate = gridTemplate; - btnRow.dom.style.gap = '2px'; - - names.forEach((name, index) => { - const button = new UIButton(name); - button.onClick(commands[index]); - button.dom.style.gridArea = areas[index]; - btnRow.add(button); - }); - - container.add(btnRow); - parent.add(container); - - return container; -} - -export function DetectAddPanel(editor, container) { - return createButtons( - container, - 'Add new', - ['Detect', 'Filter', 'Output'], - [ - () => editor.execute(new AddDetectGeometryCommand(editor)), - () => editor.execute(new AddFilterCommand(editor)), - () => editor.execute(new AddOutputCommand(editor)) - ] - ); -} - -export function SceneAddPanel(editor, container) { - return createButtons( - container, - 'Add new', - ['Box', 'Cylinder', 'Sphere', 'Constructive solid Zone'], - [ - () => editor.execute(new AddObjectCommand(editor, new BoxFigure())), - () => editor.execute(new AddObjectCommand(editor, new CylinderFigure())), - () => editor.execute(new AddObjectCommand(editor, new SphereFigure())), - () => editor.execute(new AddZoneCommand(editor)) - ], - ['a', 'b', 'c', 'd'], - [`"a b c" "d d d"`] - ); -} diff --git a/src/ThreeEditor/js/sidebar/Sidebar.Material.BooleanProperty.js b/src/ThreeEditor/js/sidebar/Sidebar.Material.BooleanProperty.js deleted file mode 100644 index af8a7d742..000000000 --- a/src/ThreeEditor/js/sidebar/Sidebar.Material.BooleanProperty.js +++ /dev/null @@ -1,57 +0,0 @@ -import { SetMaterialValueCommand } from '../commands/Commands'; -import { UICheckbox, UIRow, UIText } from '../libs/ui.js'; - -function SidebarMaterialBooleanProperty(editor, property, name) { - const { signals } = editor; - - const container = new UIRow(); - container.add(new UIText(name).setWidth('90px')); - - const boolean = new UICheckbox().setLeft('100px').onChange(onChange); - container.add(boolean); - - let object = null; - let material = null; - - function onChange() { - if (material[property] !== boolean.getValue()) { - editor.execute( - new SetMaterialValueCommand( - editor, - object, - property, - boolean.getValue(), - 0 /* TODO: currentMaterialSlot # skipcq: JS-0099 */ - ) - ); - } - } - - function update() { - if (object === null) return; - if (object.material === undefined) return; - - material = object.material; - - if (property in material) { - boolean.setValue(material[property]); - container.setDisplay(''); - } else { - container.setDisplay('none'); - } - } - - // - - signals.objectSelected.add(selected => { - object = selected; - - update(); - }); - - signals.materialChanged.add(update); - - return container; -} - -export { SidebarMaterialBooleanProperty }; diff --git a/src/ThreeEditor/js/sidebar/Sidebar.Material.ColorProperty.js b/src/ThreeEditor/js/sidebar/Sidebar.Material.ColorProperty.js deleted file mode 100644 index 9b44b43fa..000000000 --- a/src/ThreeEditor/js/sidebar/Sidebar.Material.ColorProperty.js +++ /dev/null @@ -1,83 +0,0 @@ -import { SetMaterialColorCommand, SetMaterialValueCommand } from '../commands/Commands'; -import { UIColor, UINumber, UIRow, UIText } from '../libs/ui.js'; - -function SidebarMaterialColorProperty(editor, property, name) { - const { signals } = editor; - - const container = new UIRow(); - container.add(new UIText(name).setWidth('90px')); - - const color = new UIColor().onInput(onChange); - container.add(color); - - let intensity; - - if (property === 'emissive') { - intensity = new UINumber().setWidth('30px').onChange(onChange); - container.add(intensity); - } - - let object = null; - let material = null; - - function onChange() { - if (material[property].getHex() !== color.getHexValue()) { - editor.execute( - new SetMaterialColorCommand( - editor, - object, - property, - color.getHexValue(), - 0 /* TODO: currentMaterialSlot # skipcq: JS-0099 */ - ) - ); - } - - if (intensity !== undefined) { - if (material[`${property}Intensity`] !== intensity.getValue()) { - editor.execute( - new SetMaterialValueCommand( - editor, - object, - `${property}Intensity`, - intensity.getValue(), - /* TODO: currentMaterialSlot # skipcq: JS-0099 */ 0 - ) - ); - } - } - } - - function update() { - if (object === null) return; - if (object.material === undefined) return; - - material = object.material; - - if (property in material) { - color.setHexValue(material[property].getHexString()); - - if (intensity !== undefined) { - intensity.setValue(material[`${property}Intensity`]); - } - - container.setDisplay(''); - } else { - container.setDisplay('none'); - } - } - - // - - signals.objectSelected.add(function (selected) { - object = selected; - - update(); - }); - - signals.materialChanged.add(update); - - return container; -} - -export { SidebarMaterialColorProperty }; diff --git a/src/ThreeEditor/js/sidebar/Sidebar.Material.ConstantProperty.js b/src/ThreeEditor/js/sidebar/Sidebar.Material.ConstantProperty.js deleted file mode 100644 index 7c56f0a39..000000000 --- a/src/ThreeEditor/js/sidebar/Sidebar.Material.ConstantProperty.js +++ /dev/null @@ -1,59 +0,0 @@ -import { SetMaterialValueCommand } from '../commands/Commands'; -import { UIRow, UISelect, UIText } from '../libs/ui.js'; - -function SidebarMaterialConstantProperty(editor, property, name, options) { - const { signals } = editor; - - const container = new UIRow(); - container.add(new UIText(name).setWidth('90px')); - - const constant = new UISelect().setOptions(options).onChange(onChange); - container.add(constant); - - let object = null; - let material = null; - - function onChange() { - const value = parseInt(constant.getValue(), 10); - - if (material[property] !== value) { - editor.execute( - new SetMaterialValueCommand( - editor, - object, - property, - value, - 0 /* TODO: currentMaterialSlot # skipcq: JS-0099 */ - ) - ); - } - } - - function update() { - if (object === null) return; - if (object.material === undefined) return; - - material = object.material; - - if (property in material) { - constant.setValue(material[property]); - container.setDisplay(''); - } else { - container.setDisplay('none'); - } - } - - // - - signals.objectSelected.add(selected => { - object = selected; - - update(); - }); - - signals.materialChanged.add(update); - - return container; -} - -export { SidebarMaterialConstantProperty }; diff --git a/src/ThreeEditor/js/sidebar/Sidebar.Material.NumberProperty.js b/src/ThreeEditor/js/sidebar/Sidebar.Material.NumberProperty.js deleted file mode 100644 index 91160f8f3..000000000 --- a/src/ThreeEditor/js/sidebar/Sidebar.Material.NumberProperty.js +++ /dev/null @@ -1,57 +0,0 @@ -import { SetMaterialValueCommand } from '../commands/Commands'; -import { UINumber, UIRow, UIText } from '../libs/ui.js'; - -function SidebarMaterialNumberProperty(editor, property, name, range = [-Infinity, Infinity]) { - const { signals } = editor; - - const container = new UIRow(); - container.add(new UIText(name).setWidth('90px')); - - const number = new UINumber().setWidth('60px').setRange(range[0], range[1]).onChange(onChange); - container.add(number); - - let object = null; - let material = null; - - function onChange() { - if (material[property] !== number.getValue()) { - editor.execute( - new SetMaterialValueCommand( - editor, - object, - property, - number.getValue(), - 0 /* TODO: currentMaterialSlot # skipcq: JS-0099 */ - ) - ); - } - } - - function update() { - if (object === null) return; - if (object.material === undefined) return; - - material = object.material; - - if (property in material) { - number.setValue(material[property]); - container.setDisplay(''); - } else { - container.setDisplay('none'); - } - } - - // - - signals.objectSelected.add(selected => { - object = selected; - - update(); - }); - - signals.materialChanged.add(update); - - return container; -} - -export { SidebarMaterialNumberProperty }; diff --git a/src/ThreeEditor/js/sidebar/Sidebar.OutlinerManager.js b/src/ThreeEditor/js/sidebar/Sidebar.OutlinerManager.js deleted file mode 100644 index 161f71d4b..000000000 --- a/src/ThreeEditor/js/sidebar/Sidebar.OutlinerManager.js +++ /dev/null @@ -1,176 +0,0 @@ -import { escapeHTML } from '../../../util/escapeHTML'; -import { SetValueCommand } from '../commands/SetValueCommand.js'; -import { UICheckbox } from '../libs/ui.js'; -import { UIOutliner } from '../libs/ui.three.js'; - -/** - * @deprecated - */ -const getObjectType = object => { - switch (object.type) { - case 'Scene': - case 'BoxFigure': - case 'CylinderFigure': - case 'SphereFigure': - return 'Figure'; - case 'DetectGroup': - case 'Points': - return 'Detect'; - case 'Filter': - case 'FilterGroup': - return 'Filter'; - case 'OutputGroup': - case 'Output': - case 'Quantity': - return 'Output'; - case 'ZoneGroup': - case 'Zone': - case 'WorldZone': - return 'Zone'; - case 'Beam': - return 'Beam'; - default: - return 'Unknown'; - } -}; - -const getAdditionalInfo = object => { - switch (object.type) { - case 'BoxFigure': - case 'CylinderFigure': - case 'SphereFigure': - return ` [${ - object.id - }] ${object.type.slice( - 0, - -4 - )}`; - case 'Beam': - let particle = object.particle; - - return ` [${object.id}] ${particle.name} [${particle.id}]`; - case 'WorldZone': - let { simulationMaterial: worldMaterial } = object; - - return ` - ${worldMaterial.name} [${worldMaterial.icru}]`; - case 'Zone': - let { simulationMaterial: material } = object; - - return ` [${object.id}] - ${material.name} [${material.icru}]`; - case 'Points': - let { zone, detectType } = object; - - return ` [${object.id}] ${ - zone ? `${escapeHTML(zone.name)} [${zone.id}]` : detectType - }`; - case 'Filter': - return ` [${object.id}]`; - case 'Output': - let { geometry } = object; - - return ` [${object.id}] ${ - object.geometry - ? `${escapeHTML(geometry.name)} [${ - geometry.id - }]` - : '' - }`; - case 'Quantity': - let filter = object.filter; - - return ` [${object.id}] ${ - filter - ? ` ${escapeHTML( - filter.name - )} [${filter.id}]` - : '' - }`; - default: - return ''; - } -}; - -const buildHTML = object => { - let html = - ` ${escapeHTML(object.name)}` + - getAdditionalInfo(object); - - return html; -}; - -const buildOptions = (editor, object, pad) => { - const option = document.createElement('div'); - option.style.display = 'flex'; - option.draggable = false; - option.innerHTML = buildHTML(object); - option.value = object.uuid; - option.style.paddingLeft = pad * 18 + 'px'; - - if ('visible' in object && !object.notHidable) { - const visible = new UICheckbox(object.visible); - visible.setStyle('margin', ['0']); - visible.setStyle('margin-left', ['auto']); - visible.dom.title = 'visible'; - visible.dom.disabled = object?.parent?.visible === false ? 'disabled' : ''; - visible.onClick(e => e.stopPropagation()); - visible.onChange(() => { - editor.execute(new SetValueCommand(editor, object, 'visible', visible.getValue())); - }); - option.appendChild(visible.dom); - } - - let result = [option]; - - if (object.type !== 'Beam' && object.children?.length > 0) - //TODO: move beam helpers to scene helpers - result = result.concat( - object.children.flatMap(child => buildOptions(editor, child, pad + 1)) - ); - - return result; -}; - -export class OutlinerManager { - editor; - outliner; - nodeStates; //TODO: copy collapsable groups system from THREE.js Editor - ignoreObjectSelectedSignal = false; - _selected; - constructor(editor, container) { - this.editor = editor; - this.outliner = new UIOutliner(editor); - this.nodeStates = new WeakMap(); - container.add(this.outliner); - this.outliner.onChange(this.onChange.bind(this)); - this.editor.signals.objectSelected.add(this.onObjectSelected.bind(this)); - this.editor.signals.contextChanged.add(() => this.outliner.setValue(null)); - } - - setOptionsFromSources(sources) { - const options = sources.flatMap(parent => buildOptions(this.editor, parent, 0)); - this.outliner.setOptions(options); - this.outliner.setValue(this._selected); - } - - set id(id) { - this.outliner.setId(id); - } - - onChange() { - const selectedUuid = this.outliner.getValue(); - this._selected = this.outliner.selectedValue; - this.ignoreObjectSelectedSignal = true; - this.editor.selectByUuid(selectedUuid); - this.ignoreObjectSelectedSignal = false; - } - - onObjectSelected(object) { - if (this.ignoreObjectSelectedSignal) return; - this._selected = object?.uuid ?? null; - this.outliner.setValue(object?.uuid ?? null); - } -} diff --git a/src/ThreeEditor/js/sidebar/Sidebar.Project.Renderer.js b/src/ThreeEditor/js/sidebar/Sidebar.Project.Renderer.js deleted file mode 100644 index 72b315d40..000000000 --- a/src/ThreeEditor/js/sidebar/Sidebar.Project.Renderer.js +++ /dev/null @@ -1,169 +0,0 @@ -import * as THREE from 'three'; - -import { UINumber, UIPanel, UIRow, UISelect, UIText } from '../libs/ui.js'; -import { UIBoolean } from '../libs/ui.three.js'; - -/** - * @deprecated - */ -function SidebarProjectRenderer(editor) { - const { signals, config } = editor; - - let currentRenderer = null; - - const container = new UIPanel(); - - const headerRow = new UIRow(); - headerRow.add(new UIText('Renderer'.toUpperCase())); - container.add(headerRow); - - // Antialias - - const antialiasRow = new UIRow(); - container.add(antialiasRow); - - antialiasRow.add(new UIText('Antialias').setWidth('90px')); - - const antialiasBoolean = new UIBoolean(config.getKey('project/renderer/antialias')).onChange( - createRenderer - ); - antialiasRow.add(antialiasBoolean); - - // Physically Correct lights - - const physicallyCorrectLightsRow = new UIRow(); - container.add(physicallyCorrectLightsRow); - - physicallyCorrectLightsRow.add(new UIText('Physical lights').setWidth('90px')); - - const physicallyCorrectLightsBoolean = new UIBoolean( - config.getKey('project/renderer/physicallyCorrectLights') - ).onChange(() => { - currentRenderer.useLegacyLights = this.getValue(); - signals.rendererUpdated.dispatch(); - }); - physicallyCorrectLightsRow.add(physicallyCorrectLightsBoolean); - - // Shadows - - const shadowsRow = new UIRow(); - container.add(shadowsRow); - - shadowsRow.add(new UIText('Shadows').setWidth('90px')); - - const shadowsBoolean = new UIBoolean(config.getKey('project/renderer/shadows')).onChange( - updateShadows - ); - shadowsRow.add(shadowsBoolean); - - const shadowTypeSelect = new UISelect() - .setOptions({ - 0: 'Basic', - 1: 'PCF', - 2: 'PCF Soft' - // 3: 'VSM' - }) - .setWidth('125px') - .onChange(updateShadows); - shadowTypeSelect.setValue(config.getKey('project/renderer/shadowType')); - shadowsRow.add(shadowTypeSelect); - - function updateShadows() { - currentRenderer.shadowMap.enabled = shadowsBoolean.getValue(); - currentRenderer.shadowMap.type = parseFloat(shadowTypeSelect.getValue()); - - signals.rendererUpdated.dispatch(); - } - - // Tonemapping - - const toneMappingRow = new UIRow(); - container.add(toneMappingRow); - - toneMappingRow.add(new UIText('Tone mapping').setWidth('90px')); - - const toneMappingSelect = new UISelect() - .setOptions({ - 0: 'No', - 1: 'Linear', - 2: 'Reinhard', - 3: 'Cineon', - 4: 'ACESFilmic' - }) - .setWidth('120px') - .onChange(updateToneMapping); - toneMappingSelect.setValue(config.getKey('project/renderer/toneMapping')); - toneMappingRow.add(toneMappingSelect); - - const toneMappingExposure = new UINumber(config.getKey('project/renderer/toneMappingExposure')); - toneMappingExposure.setDisplay(toneMappingSelect.getValue() === '0' ? 'none' : ''); - toneMappingExposure.setWidth('30px').setMarginLeft('10px'); - toneMappingExposure.setRange(0, 10); - toneMappingExposure.onChange(updateToneMapping); - toneMappingRow.add(toneMappingExposure); - - function updateToneMapping() { - toneMappingExposure.setDisplay(toneMappingSelect.getValue() === '0' ? 'none' : ''); - - currentRenderer.toneMapping = parseFloat(toneMappingSelect.getValue()); - currentRenderer.toneMappingExposure = toneMappingExposure.getValue(); - signals.rendererUpdated.dispatch(); - } - - // - - function createRenderer() { - currentRenderer = new THREE.WebGLRenderer({ antialias: antialiasBoolean.getValue() }); - currentRenderer.outputEncoding = THREE.sRGBEncoding; - currentRenderer.useLegacyLights = physicallyCorrectLightsBoolean.getValue(); - currentRenderer.shadowMap.enabled = shadowsBoolean.getValue(); - currentRenderer.shadowMap.type = parseFloat(shadowTypeSelect.getValue()); - currentRenderer.toneMapping = parseFloat(toneMappingSelect.getValue()); - currentRenderer.toneMappingExposure = toneMappingExposure.getValue(); - - signals.rendererCreated.dispatch(currentRenderer); - signals.rendererUpdated.dispatch(); - } - - createRenderer(); - - // Signals - - signals.editorCleared.add(() => { - currentRenderer.useLegacyLights = false; - currentRenderer.shadowMap.enabled = true; - currentRenderer.shadowMap.type = THREE.PCFShadowMap; - currentRenderer.toneMapping = THREE.NoToneMapping; - currentRenderer.toneMappingExposure = 1; - - physicallyCorrectLightsBoolean.setValue(currentRenderer.useLegacyLights); - shadowsBoolean.setValue(currentRenderer.shadowMap.enabled); - shadowTypeSelect.setValue(currentRenderer.shadowMap.type); - toneMappingSelect.setValue(currentRenderer.toneMapping); - toneMappingExposure.setValue(currentRenderer.toneMappingExposure); - toneMappingExposure.setDisplay(currentRenderer.toneMapping === 0 ? 'none' : ''); - - signals.rendererUpdated.dispatch(); - }); - - signals.rendererUpdated.add(() => { - config.setKey( - 'project/renderer/antialias', - antialiasBoolean.getValue(), - 'project/renderer/physicallyCorrectLights', - physicallyCorrectLightsBoolean.getValue(), - 'project/renderer/shadows', - shadowsBoolean.getValue(), - 'project/renderer/shadowType', - parseFloat(shadowTypeSelect.getValue()), - 'project/renderer/toneMapping', - parseFloat(toneMappingSelect.getValue()), - 'project/renderer/toneMappingExposure', - toneMappingExposure.getValue() - ); - }); - - return container; -} - -export { SidebarProjectRenderer }; diff --git a/src/ThreeEditor/js/sidebar/Sidebar.Project.js b/src/ThreeEditor/js/sidebar/Sidebar.Project.js deleted file mode 100644 index 857529fbc..000000000 --- a/src/ThreeEditor/js/sidebar/Sidebar.Project.js +++ /dev/null @@ -1,67 +0,0 @@ -import { UIInput, UIPanel, UIRow, UISpan, UIText, UITextArea } from '../libs/ui.js'; - -function SidebarProject(editor) { - const { signals, config } = editor; - - const container = new UISpan(); - - const settings = new UIPanel(); - settings.setBorderTop('0'); - settings.setPaddingTop('20px'); - container.add(settings); - - // Title - - const titleRow = new UIRow(); - const title = new UIInput(config.getKey('project/title')) - .setLeft('100px') - .setWidth('160px') - .onChange(() => { - config.setKey('project/title', title.getValue()); - editor.signals.projectChanged.dispatch(); - }); - - titleRow.add(new UIText('Title').setWidth('90px')); - titleRow.add(title); - - settings.add(titleRow); - - // Description - - const descriptionRow = new UIRow(); - descriptionRow.add(new UIText('Description').setWidth('90px')); - settings.add(descriptionRow); - - const description = new UITextArea() - .setWidth('100%') - .setHeight('400px') - .onChange(() => { - config.setKey('project/description', description.getValue()); - editor.signals.projectChanged.dispatch(); - }); - description.setValue(config.getKey('project/description')); - description.dom.wrap = 'soft'; - description.dom.style.whiteSpace = 'break-spaces'; - - settings.add(new UIRow().add(description)); - - // - - // Signals - - signals.projectChanged.add(() => { - title.setValue(config.getKey('project/title')); - description.setValue(config.getKey('project/description')); - }); - - signals.editorCleared.add(() => { - title.setValue('Untitled project'); - config.setKey('project/title', 'Untitled project'); - description.setValue(''); - config.setKey('project/description', ''); - }); - - return container; -} - -export { SidebarProject }; diff --git a/src/ThreeEditor/js/sidebar/Sidebar.Properties.js b/src/ThreeEditor/js/sidebar/Sidebar.Properties.js deleted file mode 100644 index c95e94564..000000000 --- a/src/ThreeEditor/js/sidebar/Sidebar.Properties.js +++ /dev/null @@ -1,201 +0,0 @@ -import { hideUIElement, showUIElement, UICustomTabbedPanel } from '../../../util/Ui/Uis'; -import * as Panel from './object/Objects'; - -function SidebarProperties(editor, id = 'properties') { - const { signals } = editor; - const container = new UICustomTabbedPanel(); - container.setId(id); - const info = new Panel.ObjectInfo(editor); - const placement = new Panel.ObjectPlacement(editor); - const dimensions = new Panel.ObjectDimensions(editor); - const zoneRules = new Panel.ObjectCSG(editor); - const grid = new Panel.ObjectGrid(editor); - const calculate = new Panel.ObjectZoneCalculate(editor); - const beam = new Panel.ObjectBeam(editor); - const material = new Panel.ObjectMaterial(editor); - const filter = new Panel.ObjectFilter(editor); - const settings = new Panel.ObjectSettings(editor); - const quantity = new Panel.ObjectQuantity(editor); - const differential = new Panel.ObjectDifferentials(editor); - - const generalItems = [info, placement, settings, quantity]; - const geometryItems = [dimensions, grid, calculate]; - const descriptorItems = [beam]; - const modifierItems = [zoneRules, filter, differential]; - const materialItems = [material]; - - container.addTab( - 'general', - 'GENERAL', - generalItems.map(item => item.panel) - ); - - container.addTab( - 'geometry', - 'GEOMETRY', - geometryItems.map(item => item.panel) - ); - - container.addTab( - 'descriptors', - 'DESCRIPTORS', - descriptorItems.map(item => item.panel) - ); - - container.addTab( - 'modifiers', - 'MODIFIERS', - modifierItems.map(item => item.panel) - ); - - container.addTab( - 'material', - 'MATERIAL', - materialItems.map(item => item.panel) - ); - container.select('general'); - - function setupGeneralPanel(object) { - info.setObject(object); - - if (!object.notMovable && !object.isScene) - // TODO: Create custom scene for figures - placement.setObject(object); - else hideUIElement(placement.panel); - if (!object.isOutput) hideUIElement(settings.panel); - else settings.setObject(object); - if (!object.isQuantity) hideUIElement(quantity.panel); - else quantity.setObject(object); - } - - const WITHOUT_GEOMETRIES = [ - 'isScene', - 'isDetectContainer', - 'isZoneContainer', - 'isZone', - 'isFilterContainer', - 'isFilter', - 'isBeam', - 'isScoringManager', - 'isOutput', - 'isQuantity' - ]; - - function setupGeometryPanel(object) { - if (WITHOUT_GEOMETRIES.some(key => object[key])) return container.hideTab('geometry'); - container.showTab('geometry'); - - switch (true) { - case object.isDetector: - [calculate].forEach(item => item.setObject(null)); - [grid, dimensions].forEach(item => item.setObject(object)); - - break; - case object.isWorldZone: - [grid].forEach(item => item.setObject(null)); - [dimensions, calculate].forEach(item => item.setObject(object)); - - break; - case object.isBasicFigure: - [grid, calculate].forEach(item => item.setObject(null)); - [dimensions].forEach(item => item.setObject(object)); - - break; - default: - [dimensions, grid, calculate].forEach(item => item.setObject(null)); - - break; - } - } - - const WITHOUT_DESCRIPTORS = [ - 'isScene', - 'isBasicFigure', - 'isDetectContainer', - 'isScoringManager', - 'isDetector', - 'isZoneContainer', - 'isZone', - 'isWorldZone', - 'isFilterContainer', - 'isFilter', - 'isScoringManager', - 'isOutput', - 'isQuantity' - ]; - - function setupDescriptorPanel(object) { - if (WITHOUT_DESCRIPTORS.some(key => object[key])) return container.hideTab('descriptors'); - container.showTab('descriptors'); - [zoneRules, dimensions, grid, calculate].forEach(item => item.setObject(null)); - [beam].forEach(item => item.setObject(object)); - } - - const WITHOUT_MODIFIERS = [ - 'isScene', - 'isBasicFigure', - 'isDetectContainer', - 'isDetector', - 'isZoneContainer', - 'isWorldZone', - 'isBeam', - 'isFilterContainer', - 'isScoringManager', - 'isOutput' - ]; - - function setupModifierPanel(object) { - if (WITHOUT_MODIFIERS.some(key => object[key])) return container.hideTab('modifiers'); - container.showTab('modifiers'); - - switch (true) { - case object.isZone: - [beam, filter, differential].forEach(item => item.setObject(null)); - [zoneRules].forEach(item => item.setObject(object)); - - break; - case object.isFilter: - [zoneRules, beam, differential].forEach(item => item.setObject(null)); - [filter].forEach(item => item.setObject(object)); - - break; - case object.isQuantity: - [zoneRules, beam, filter].forEach(item => item.setObject(null)); - [differential].forEach(item => item.setObject(object)); - - break; - default: - [zoneRules, beam, filter, differential].forEach(item => item.setObject(null)); - - break; - } - } - - function setupMaterialPanel(object) { - if (!object.material) return container.hideTab('material'); - container.showTab('material'); - material.setObject(object); - } - - function setupPanels() { - const { selected: object } = editor; - - if (!object) return hideUIElement(container); - showUIElement(container); - - setupGeneralPanel(object); - setupGeometryPanel(object); - setupDescriptorPanel(object); - setupModifierPanel(object); - setupMaterialPanel(object); - } - - signals.objectChanged.add(setupPanels); - signals.objectSelected.add(setupPanels); - - setupPanels(); - - return container; -} - -export { SidebarProperties }; diff --git a/src/ThreeEditor/js/sidebar/Sidebar.Scene.js b/src/ThreeEditor/js/sidebar/Sidebar.Scene.js deleted file mode 100644 index 4a76ad3b3..000000000 --- a/src/ThreeEditor/js/sidebar/Sidebar.Scene.js +++ /dev/null @@ -1,43 +0,0 @@ -import { UIBreak, UIPanel } from '../libs/ui.js'; -import { SceneAddPanel } from './Sidebar.AddPanel'; -import { OutlinerManager } from './Sidebar.OutlinerManager'; - -function SidebarScene(editor) { - const { signals, figureManager: scene, zoneManager, beam } = editor; - - const container = new UIPanel(); - container.setBorderTop('0'); - container.setPaddingTop('20px'); - - const outlinerManager = new OutlinerManager(editor, container); - outlinerManager.id = 'outliner'; - - const refreshOptions = function () { - const sources = [scene, zoneManager.zoneContainer, zoneManager.worldZone, beam]; - outlinerManager.setOptionsFromSources(sources); - }; - - container.add(new UIBreak()); - - SceneAddPanel(editor, container); - - // - - function refreshUI() { - refreshOptions(); - } - - refreshUI(); - - // events - - signals.editorCleared.add(refreshUI); - - signals.sceneGraphChanged.add(refreshUI); - - signals.objectChanged.add(refreshUI); - - return container; -} - -export { SidebarScene }; diff --git a/src/ThreeEditor/js/sidebar/Sidebar.Scoring.js b/src/ThreeEditor/js/sidebar/Sidebar.Scoring.js deleted file mode 100644 index 428ca1646..000000000 --- a/src/ThreeEditor/js/sidebar/Sidebar.Scoring.js +++ /dev/null @@ -1,40 +0,0 @@ -import { UIBreak, UIPanel } from '../libs/ui'; -import { DetectAddPanel } from './Sidebar.AddPanel'; -import { OutlinerManager } from './Sidebar.OutlinerManager'; - -export class SidebarScoring extends UIPanel { - editor; - signals; - detectorManager; - detectAddPanel; - outlinerManager; - - refreshOptions() { - const sources = [ - this.editor.detectorManager.detectContainer, - this.editor.detectorManager.filterContainer, - this.editor.scoringManager - ]; - this.outlinerManager.setOptionsFromSources(sources); - } - - constructor(editor) { - super(); - this.editor = editor; - this.signals = editor.signals; - this.detectorManager = editor.detectorManager; - - this.outlinerManager = new OutlinerManager(editor, this); - this.outlinerManager.id = 'filter-outliner'; - - this.add(new UIBreak()); - - this.detectAddPanel = DetectAddPanel(editor, this); - - this.signals.editorCleared.add(this.refreshOptions.bind(this)); - this.signals.sceneGraphChanged.add(this.refreshOptions.bind(this)); - this.signals.objectChanged.add(this.refreshOptions.bind(this)); - this.signals.detectFilterAdded.add(this.refreshOptions.bind(this)); - this.signals.detectFilterRemoved.add(this.refreshOptions.bind(this)); - } -} diff --git a/src/ThreeEditor/js/sidebar/Sidebar.js b/src/ThreeEditor/js/sidebar/Sidebar.js deleted file mode 100644 index 069a3017d..000000000 --- a/src/ThreeEditor/js/sidebar/Sidebar.js +++ /dev/null @@ -1,49 +0,0 @@ -import { UISpan, UITabbedPanel } from '../libs/ui.js'; -import { SidebarProject } from './Sidebar.Project'; -import { SidebarProperties } from './Sidebar.Properties'; -import { SidebarScene } from './Sidebar.Scene'; -import { SidebarScoring } from './Sidebar.Scoring'; - -function Sidebar(editor) { - const { signals } = editor; - const container = new UISpan(); - const tabbed = new UITabbedPanel(); - container.setId('sidebar'); - const properties = new SidebarProperties(editor).setBorderTop('0'); - - const scene = new UISpan().add(new SidebarScene(editor)); - const scoring = new UISpan().add( - new SidebarScoring(editor).setBorderTop('0').setPaddingTop('20px') - ); - const project = new SidebarProject(editor); - let ignoreContextChangedSignal = false; - - tabbed.addTab('geometry', 'SCENE', scene); - tabbed.addTab('scoring', 'SCORING', scoring); - tabbed.addTab('settings', 'PROJECT', project); - - tabbed._select = tabbed.select; - tabbed.select = function (id) { - this._select(id); - - ignoreContextChangedSignal = true; - editor.contextManager.currentContext = id; - ignoreContextChangedSignal = false; - }; - tabbed.select('geometry'); - - signals.contextChanged.add(id => { - ignoreContextChangedSignal || tabbed._select(id); - }); - - editor.signals.exampleLoaded.add(() => { - tabbed.select('settings'); - }); - - container.add(tabbed); - container.add(properties); - - return container; -} - -export { Sidebar }; diff --git a/src/ThreeEditor/js/sidebar/object/Object.Abstract.ts b/src/ThreeEditor/js/sidebar/object/Object.Abstract.ts deleted file mode 100644 index c98152baa..000000000 --- a/src/ThreeEditor/js/sidebar/object/Object.Abstract.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { hideUIElement, showUIElement } from '../../../../util/Ui/Uis'; -import { UIPanel, UIRow, UIText } from '../../libs/ui'; -import { YaptideEditor } from '../../YaptideEditor'; - -export abstract class ObjectAbstract { - editor: YaptideEditor; - title: UIText; - titleRow: UIRow; - panel: UIPanel; - constructor(editor: YaptideEditor, title: string) { - this.editor = editor; - this.title = new UIText(title.toUpperCase()); - this.titleRow = new UIRow(); - this.titleRow.add(this.title); - this.panel = new UIPanel(); - this.panel.add(this.titleRow); - } - - setObject(object: unknown): void { - object ? showUIElement(this.panel) : hideUIElement(this.panel); - } - - abstract update(): void; -} diff --git a/src/ThreeEditor/js/sidebar/object/Object.Beam.ts b/src/ThreeEditor/js/sidebar/object/Object.Beam.ts deleted file mode 100644 index a0455d89f..000000000 --- a/src/ThreeEditor/js/sidebar/object/Object.Beam.ts +++ /dev/null @@ -1,170 +0,0 @@ -import { PARTICLE_TYPES } from '../../../../types/Particle'; -import { - createParticleTypeSelect, - createRowParamNumber, - createRowParamNumberXYZ, - hideUIElement, - showUIElement -} from '../../../../util/Ui/Uis'; -import { Beam } from '../../../Simulation/Physics/Beam'; -import { UINumber, UIRow, UIText } from '../../libs/ui'; -import { YaptideEditor } from '../../YaptideEditor'; -import { ObjectAbstract } from './Object.Abstract'; - -export class ObjectBeam extends ObjectAbstract { - object?: Beam; - - energy: UINumber; - energyRow: UIRow; - - energySpread: UINumber; - energySpreadRow: UIRow; - energySpreadLabel: UIText; - - divergenceRow: UIRow; - divergenceX: UINumber; - divergenceY: UINumber; - divergenceZ: UINumber; - - divergenceDistanceRow: UIRow; - divergenceDistance: UINumber; - - numberOfParticlesRow: UIRow; - numberOfParticles: UINumber; - - particleTypeRow: UIRow; - particleType: UINumber; - renderParticleType: (value: number) => void; - - particleZRow: UIRow; - particleZ: UINumber; - - particleARow: UIRow; - particleA: UINumber; - - constructor(editor: YaptideEditor) { - super(editor, 'Energy'); - - // set minimum energy to 1ueV (as lower limit of reasonable cross-section used in neutron transport) - [this.energyRow, this.energy] = createRowParamNumber({ - text: 'Energy mean', - min: 1e-12, - unit: 'MeV/nucl', - update: this.update.bind(this) - }); - - // energy spread - [this.energySpreadRow, this.energySpread, this.energySpreadLabel] = createRowParamNumber({ - text: 'Energy spread', - update: this.update.bind(this) - }); - - // divergence XY - [this.divergenceRow, this.divergenceX, this.divergenceY, this.divergenceZ] = - createRowParamNumberXYZ({ - text: `Divergence XY`, - unit: `mrad`, - update: this.update.bind(this) - }); - hideUIElement(this.divergenceZ); - - // divergence distance - [this.divergenceDistanceRow, this.divergenceDistance] = createRowParamNumber({ - text: `Divergence distance to focal point`, - unit: `${editor.unit.name}`, - update: this.update.bind(this) - }); - - // number of particles - [this.numberOfParticlesRow, this.numberOfParticles] = createRowParamNumber({ - text: `Number of primary particles`, - unit: ``, - precision: 0, - step: 1, - update: this.update.bind(this) - }); - - // particle - [this.particleTypeRow, this.particleType, this.renderParticleType] = - createParticleTypeSelect(this.update.bind(this)); - - // particle Z - [this.particleZRow, this.particleZ] = createRowParamNumber({ - text: `charge (Z)`, - precision: 0, - step: 1, - update: this.update.bind(this) - }); - - // particle A - - [this.particleARow, this.particleA] = createRowParamNumber({ - text: `nucleons (A)`, - precision: 0, - step: 1, - update: this.update.bind(this) - }); - - this.panel.add( - this.energyRow, - this.energySpreadRow, - this.divergenceRow, - this.divergenceDistanceRow, - this.numberOfParticlesRow, - this.particleTypeRow, - this.particleZRow, - this.particleARow - ); - } - - setObject(object: Beam): void { - super.setObject(object); - - if (!object) return; - - this.object = object; - - this.divergenceX.setValue(object.divergence.x); - this.divergenceY.setValue(object.divergence.y); - this.divergenceDistance.setValue(object.divergence.distanceToFocal); - - this.energy.setValue(object.energy); - this.energySpread.unit = object.energySpread < 0 ? 'Mev/c' : 'MeV/nucl'; - this.energySpread.setValue(object.energySpread); - - this.numberOfParticles.setValue(object.numberOfParticles); - - this.render(); - - [this.particleZRow, this.particleARow].forEach(r => { - if (object.particleData.id === 25) showUIElement(r); - else hideUIElement(r); - }); - - this.particleZ.setValue(object.particleData.z); - this.particleA.setValue(object.particleData.a); - } - - update(): void { - const { object } = this; - - if (!object) return; - object.energy = this.energy.getValue(); - object.energySpread = this.energySpread.getValue(); - - object.divergence.x = this.divergenceX.getValue(); - object.divergence.y = this.divergenceY.getValue(); - object.divergence.distanceToFocal = this.divergenceDistance.getValue(); - - object.numberOfParticles = this.numberOfParticles.getValue(); - - object.particleData.id = this.particleType.getValue(); - object.particleData.a = this.particleA.getValue(); - object.particleData.z = this.particleZ.getValue(); - } - - render(): void { - if (!this.object) return; - this.renderParticleType(this.object.particleData.id); - } -} diff --git a/src/ThreeEditor/js/sidebar/object/Object.CSG.ts b/src/ThreeEditor/js/sidebar/object/Object.CSG.ts deleted file mode 100644 index 439c05fc5..000000000 --- a/src/ThreeEditor/js/sidebar/object/Object.CSG.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { createRowText, createZoneRulesPanel } from '../../../../util/Ui/Uis'; -import { BooleanZone } from '../../../Simulation/Zones/BooleanZone'; -import { UIRow, UIText } from '../../libs/ui'; -import { YaptideEditor } from '../../YaptideEditor'; -import { ObjectAbstract } from './Object.Abstract'; - -export class ObjectCSG extends ObjectAbstract { - object?: BooleanZone; - - typeRow: UIRow; - type: UIText; - - zoneRulesRow: UIRow; - renderZoneRules: (zone: BooleanZone) => void; - - constructor(editor: YaptideEditor) { - super(editor, 'Zone Operations'); - - [this.typeRow, this.type] = createRowText({ text: 'Geometry Type', value: 'CSG' }); - [this.zoneRulesRow, this.renderZoneRules] = createZoneRulesPanel(this.editor); - - this.panel.add(this.typeRow, this.zoneRulesRow); - } - - setObject(object: BooleanZone): void { - super.setObject(object); - - if (!object) return; - - this.object = object; - this.render(); - } - - update(): void { - throw new Error('Method not implemented.'); - } - - render(): void { - if (!this.object) return; - this.renderZoneRules(this.object); - } -} diff --git a/src/ThreeEditor/js/sidebar/object/Object.Differentials.ts b/src/ThreeEditor/js/sidebar/object/Object.Differentials.ts deleted file mode 100644 index f3e4ef103..000000000 --- a/src/ThreeEditor/js/sidebar/object/Object.Differentials.ts +++ /dev/null @@ -1,171 +0,0 @@ -import { - createDifferentialConfigurationRow, - createFullwidthButton, - createModifiersOutliner, - hideUIElement, - showUIElement -} from '../../../../util/Ui/Uis'; -import * as Scoring from '../../../Simulation/Scoring/ScoringOutputTypes'; -import { DifferentialModifier } from '../../../Simulation/Scoring/ScoringQtyModifiers'; -import { ScoringQuantity } from '../../../Simulation/Scoring/ScoringQuantity'; -import { - AddDifferentialModifierCommand, - RemoveDifferentialModifierCommand -} from '../../commands/Commands'; -import { UIBreak, UIButton, UICheckbox, UINumber, UIRow, UISelect } from '../../libs/ui'; -import { UIOutliner } from '../../libs/ui.three'; -import { YaptideEditor } from '../../YaptideEditor'; -import { ObjectAbstract } from './Object.Abstract'; - -export class ObjectDifferentials extends ObjectAbstract { - object?: ScoringQuantity; - modifier?: DifferentialModifier; - addRow: UIRow; - add: UIButton; - - outliner: UIOutliner; - - modifierRow: UIRow; - keywordSelect: UISelect; - lowerLimit: UINumber; - upperLimit: UINumber; - binsNumber: UINumber; - logCheckbox: UICheckbox; - removeButton: UIButton; - constructor(editor: YaptideEditor) { - super(editor, 'Differential scoring'); - [this.addRow, this.add] = createFullwidthButton({ - text: 'Add differential modifier', - update: this.addModifier.bind(this) - }); - - [this.outliner] = createModifiersOutliner(editor, { - update: this.selectModifier.bind(this) - }); - - [ - this.modifierRow, - this.keywordSelect, - this.lowerLimit, - this.upperLimit, - this.binsNumber, - this.logCheckbox, - this.removeButton - ] = createDifferentialConfigurationRow({ - update: this.update.bind(this), - delete: this.removeModifier.bind(this), - options: Scoring.SCORING_OPTIONS - }); - this.panel.add(this.addRow, this.outliner, new UIBreak(), this.modifierRow); - editor.signals.scoringQuantityChanged.add(() => - this.object ? this.setObject(this.object) : null - ); - } - - setObject(object: ScoringQuantity): void { - super.setObject(object); - - if (!object) return; - this.object = object; - this.outliner.setOptions(object.modifiers); - - if (object.selectedModifier) { - const mod = object.selectedModifier; - - if (mod) { - this.outliner.setValue(object.selectedModifier.uuid); - this.setModifier(mod); - } else { - object.selectedModifier = undefined; - hideUIElement(this.modifierRow); - } - } else { - hideUIElement(this.modifierRow); - } - - const mods = object.modifiers; - - if (mods.length < 2) this.add.setDisabled(false); - else this.add.setDisabled(true); - } - - update(): void { - const { object, modifier } = this; - - if (!object || !modifier) return; - const { uuid } = modifier; - const diffType = this.keywordSelect.getValue() as Scoring.SCORING_MODIFIERS; - const lowerLimit = this.lowerLimit.getValue(); - const upperLimit = this.upperLimit.getValue(); - this.lowerLimit.max = upperLimit; - this.upperLimit.min = lowerLimit; - const binsNumber = this.binsNumber.getValue(); - const isLog = this.logCheckbox.getValue(); - this.editor.execute( - new AddDifferentialModifierCommand( - this.editor, - object, - DifferentialModifier.fromJSON({ - uuid, - diffType, - lowerLimit, - upperLimit, - binsNumber, - isLog - }) - ) - ); - } - - addModifier(): void { - const { editor, object } = this; - - if (!object) return; - if (object.modifiers.length >= 2) return; - editor.execute(new AddDifferentialModifierCommand(editor, object)); - } - - selectModifier(): void { - const { object } = this; - - if (!object) return; - const modifier = object.getModifierByUuid(this.outliner.getValue()); - object.selectedModifier = modifier; - - if (modifier) { - this.setModifier(modifier); - } else { - this.outliner.setValue(null); - this.modifier = undefined; - hideUIElement(this.modifierRow); - } - } - - setModifier(modifier: DifferentialModifier) { - showUIElement(this.modifierRow, 'grid'); - this.modifier = modifier; - this.outliner.setValue(modifier.uuid); - this.updateSelectedModifier(); - } - - updateSelectedModifier() { - const { modifier } = this; - - if (!modifier) return; - const { diffType, lowerLimit, upperLimit, binsNumber, isLog } = modifier; - this.keywordSelect.setValue(diffType); - this.lowerLimit.setValue(lowerLimit); - this.upperLimit.setValue(upperLimit); - this.lowerLimit.max = upperLimit; - this.upperLimit.min = lowerLimit; - this.binsNumber.setValue(binsNumber); - this.logCheckbox.setValue(isLog); - } - - removeModifier() { - const { object, editor, modifier } = this; - - if (!object || !modifier) return; - editor.execute(new RemoveDifferentialModifierCommand(editor, object, modifier)); - } -} diff --git a/src/ThreeEditor/js/sidebar/object/Object.Dimensions.ts b/src/ThreeEditor/js/sidebar/object/Object.Dimensions.ts deleted file mode 100644 index b0976c59f..000000000 --- a/src/ThreeEditor/js/sidebar/object/Object.Dimensions.ts +++ /dev/null @@ -1,374 +0,0 @@ -import * as THREE from 'three'; - -import { DETECTOR_OPTIONS } from '../../../../types/SimulationTypes/DetectTypes/DetectTypes'; -import { - createRowParamNumber, - createRowSelect, - createRowText, - hideUIElement, - showUIElement -} from '../../../../util/Ui/Uis'; -import { HollowCylinderGeometry } from '../../../Simulation/Base/HollowCylinderGeometry'; -import { Detector, isDetector } from '../../../Simulation/Detectors/Detector'; -import { - BASIC_GEOMETRY_OPTIONS, - BasicFigure, - isBasicFigure, - isBoxFigure, - isCylinderFigure, - isSphereFigure -} from '../../../Simulation/Figures/BasicFigures'; -import { isWorldZone, WorldZone } from '../../../Simulation/Zones/WorldZone/WorldZone'; -import { - SetDetectGeometryCommand, - SetDetectTypeCommand, - SetGeometryCommand, - SetValueCommand -} from '../../commands/Commands'; -import { UINumber, UIRow, UISelect, UIText } from '../../libs/ui'; -import { YaptideEditor } from '../../YaptideEditor'; -import { ObjectAbstract } from './Object.Abstract'; - -export class ObjectDimensions extends ObjectAbstract { - object?: BasicFigure | Detector | WorldZone; - - typeRow: UIRow; - type: UIText; - - typeSelectRow: UIRow; - typeSelect: UISelect; - - xLengthRow: UIRow; - xLength: UINumber; - - yLengthRow: UIRow; - yLength: UINumber; - - zLengthRow: UIRow; - zLength: UINumber; - - radiusRow: UIRow; - radius: UINumber; - - radiusRow2: UIRow; - radius2: UINumber; - - zoneUuidRow: UIRow; - zoneUuid: UISelect; - - constructor(editor: YaptideEditor) { - super(editor, 'Dimensions'); - - [this.typeRow, this.type] = createRowText({ text: 'Geometry Type' }); - [this.typeSelectRow, this.typeSelect] = createRowSelect({ - update: this.updateType.bind(this), - text: 'Geometry Type' - }); - - [this.xLengthRow, this.xLength] = createRowParamNumber({ - update: this.update.bind(this), - text: `X side (width)`, - unit: `${editor.unit.name}`, - min: 0 - }); - - [this.yLengthRow, this.yLength] = createRowParamNumber({ - update: this.update.bind(this), - text: `Y side (height)`, - unit: `${editor.unit.name}`, - min: 0 - }); - - [this.zLengthRow, this.zLength] = createRowParamNumber({ - update: this.update.bind(this), - text: `Z side (depth)`, - unit: `${editor.unit.name}`, - min: 0 - }); - - [this.radiusRow, this.radius] = createRowParamNumber({ - update: this.update.bind(this), - text: `Radius`, - unit: `${editor.unit.name}`, - min: 0 - }); - - [this.radiusRow2, this.radius2] = createRowParamNumber({ - update: this.update.bind(this), - text: `Inner radius`, - unit: `${editor.unit.name}`, - min: 0 - }); - - [this.zoneUuidRow, this.zoneUuid] = createRowSelect({ - update: this.update.bind(this), - text: 'Zone ID' - }); - - this.panel.add( - this.typeRow, - this.typeSelectRow, - this.xLengthRow, - this.yLengthRow, - this.zLengthRow, - this.radiusRow, - this.radiusRow2, - this.zoneUuidRow - ); - } - - private setGeometryType(object: BasicFigure | Detector | WorldZone): string | undefined { - let geometryType; - - if (isBasicFigure(object)) { - showUIElement(this.typeRow); - hideUIElement(this.typeSelectRow); - this.type.setValue(object.geometryType); - geometryType = object.geometryType; - } else { - hideUIElement(this.typeRow); - showUIElement(this.typeSelectRow); - - if (isWorldZone(object)) { - this.typeSelect.setOptions(BASIC_GEOMETRY_OPTIONS); - this.typeSelect.setValue(object.geometryType); - geometryType = object.geometryType; - } else if (isDetector(object)) { - this.typeSelect.setOptions(DETECTOR_OPTIONS); - this.typeSelect.setValue(object.detectorType); - geometryType = object.detectorType; - } - } - - return geometryType; - } - - private setBox(object: BasicFigure | Detector | WorldZone): void { - showUIElement(this.xLengthRow); - showUIElement(this.yLengthRow); - showUIElement(this.zLengthRow); - - if (isWorldZone(object)) { - if (object.autoCalculate) { - hideUIElement(this.xLengthRow); - hideUIElement(this.yLengthRow); - hideUIElement(this.zLengthRow); - } else { - const { size } = object; - this.xLength.setValue(size.x); - this.yLength.setValue(size.y); - this.zLength.setValue(size.z); - } - } else { - let parameters; - - if (isDetector(object)) parameters = object.geometryParameters; - else if (isBoxFigure(object)) parameters = object.geometry.parameters; - else return; - this.xLength.setValue(parameters.width); - this.yLength.setValue(parameters.height); - this.zLength.setValue(parameters.depth); - } - } - - private setSphere(object: BasicFigure | Detector | WorldZone): void { - showUIElement(this.radiusRow); - - if (isWorldZone(object)) { - const { size } = object; - this.radius.setValue(size.x); - } else { - let parameters; - - if (isDetector(object)) parameters = { radius: object.geometryParameters.radius }; - else if (isSphereFigure(object)) parameters = object.geometry.parameters; - else return; - this.radius.setValue(parameters.radius); - } - } - - private setCylinder(object: BasicFigure | Detector | WorldZone): void { - showUIElement(this.zLengthRow); - showUIElement(this.radiusRow); - - if (isWorldZone(object)) { - const { size } = object; - this.radius.setValue(size.x); - this.zLength.setValue(size.z); - } else if (isDetector(object)) { - showUIElement(this.radiusRow2); - const parameters = object.geometryParameters; - this.radius.setValue(parameters.radius); - this.radius2.setValue(parameters.innerRadius); - this.radius.min = parameters.innerRadius + 1e-5; // Prevent radius from being lower than innerRadius - this.radius2.max = parameters.radius - 1e-5; // innerRadius cannot be greater than radius - this.zLength.setValue(parameters.depth); - } else if (isCylinderFigure(object)) { - const parameters = object.geometry.parameters; - this.radius.setValue(parameters.outerRadius); - this.zLength.setValue(parameters.height); - } - } - - private setZoneUuid(): void { - const { object } = this; - - if (!object) return; - showUIElement(this.zoneUuidRow); - this.zoneUuid.setOptions(this.editor.zoneManager.getBooleanZoneOptions()); - - if (isDetector(object)) { - this.zoneUuid.setValue(object.geometryParameters.zoneUuid); - } - } - - setObject(object: BasicFigure | Detector | WorldZone): void { - super.setObject(object); - - if (!object) return; - - this.object = object; - const geometryType = this.setGeometryType(object); - - hideUIElement(this.xLengthRow); - hideUIElement(this.yLengthRow); - hideUIElement(this.zLengthRow); - hideUIElement(this.radiusRow); - hideUIElement(this.radiusRow2); - hideUIElement(this.zoneUuidRow); - this.editor.signals.zoneAdded.remove(this.setZoneUuid); - - if (geometryType && geometryType !== 'All') - if (['Box', 'Mesh'].includes(geometryType)) { - this.setBox(object); - } else if (geometryType === 'Sphere') { - this.setSphere(object); - } else if (['Cyl', 'Cylinder'].includes(geometryType)) { - this.setCylinder(object); - } else if (geometryType === 'Zone') { - this.editor.signals.zoneAdded.add(this.setZoneUuid.bind(this)); - this.setZoneUuid(); - } - } - - getBoxData(): { width: number; height: number; depth: number } { - return { - width: this.xLength.getValue(), - height: this.yLength.getValue(), - depth: this.zLength.getValue() - }; - } - - getCylinderData(): { outerRadius: number; innerRadius: number; height: number } { - return { - outerRadius: this.radius.getValue(), - innerRadius: this.radius2.getValue(), - height: this.zLength.getValue() - }; - } - - getSphereData(): { radius: number } { - return { - radius: this.radius.getValue() - }; - } - - getZoneSize(geometryType: keyof typeof BASIC_GEOMETRY_OPTIONS): THREE.Vector3 | undefined { - switch (geometryType) { - case 'BoxGeometry': - return new THREE.Vector3( - this.xLength.getValue(), - this.yLength.getValue(), - this.zLength.getValue() - ); - case 'SphereGeometry': - return new THREE.Vector3( - this.radius.getValue(), - this.radius.getValue(), - this.radius.getValue() - ); - case 'HollowCylinderGeometry': - return new THREE.Vector3( - this.radius.getValue(), - this.radius.getValue(), - this.zLength.getValue() - ); - default: - return; - } - } - - update(): void { - const { object, editor } = this; - - if (!object) return; - - if (isDetector(object)) { - const { detectorType: detectType } = object; - let geometryData; - - switch (detectType) { - case 'Mesh': - geometryData = this.getBoxData(); - - break; - case 'Cyl': - geometryData = this.getCylinderData(); - this.radius.min = geometryData.innerRadius + 1e-5; // Prevent radius from being lower than innerRadius - this.radius2.max = geometryData.outerRadius - 1e-5; // innerRadius cannot be greater than radius - - break; - case 'Zone': - geometryData = { zoneUuid: this.zoneUuid.getValue() }; - - break; - default: - break; - } - - editor.execute(new SetDetectGeometryCommand(editor, object, geometryData)); - } else if (isWorldZone(object)) { - const { geometryType } = object; - const size = this.getZoneSize(geometryType); - editor.execute(new SetValueCommand(editor, object, 'size', size)); - } else { - if (isBoxFigure(object)) { - const { width, height, depth } = this.getBoxData(); - editor.execute( - new SetGeometryCommand( - editor, - object, - new THREE.BoxGeometry(width, height, depth) - ) - ); - } else if (isSphereFigure(object)) { - const { radius } = this.getSphereData(); - editor.execute( - new SetGeometryCommand(editor, object, new THREE.SphereGeometry(radius)) - ); - } else if (isCylinderFigure(object)) { - const { outerRadius, innerRadius, height } = this.getCylinderData(); - editor.execute( - new SetGeometryCommand( - editor, - object, - new HollowCylinderGeometry(innerRadius, outerRadius, height, 16) - ) - ); - } - } - } - - updateType(): void { - const { object, editor } = this; - - if (!object) return; - if (isDetector(object)) - editor.execute(new SetDetectTypeCommand(editor, object, this.typeSelect.getValue())); - else if (isWorldZone(object)) - editor.execute( - new SetValueCommand(editor, object, 'geometryType', this.typeSelect.getValue()) - ); - this.setObject(object); - } -} diff --git a/src/ThreeEditor/js/sidebar/object/Object.Filter.ts b/src/ThreeEditor/js/sidebar/object/Object.Filter.ts deleted file mode 100644 index fe2c6d6ce..000000000 --- a/src/ThreeEditor/js/sidebar/object/Object.Filter.ts +++ /dev/null @@ -1,216 +0,0 @@ -import { MathUtils } from 'three'; - -import * as Rule from '../../../../types/SimulationTypes/DetectTypes/DetectRuleTypes'; -import { - createFullwidthButton, - createRuleConfigurationRow, - createRulesOutliner, - hideUIElement, - showUIElement -} from '../../../../util/Ui/Uis'; -import { CustomFilter } from '../../../Simulation/Scoring/CustomFilter'; -import { - FilterRule, - isFloatRule, - isIDRule, - isIntRule -} from '../../../Simulation/Scoring/FilterRule'; -import { ScoringFilter } from '../../../Simulation/Scoring/ScoringFilter'; -import { SetFilterRuleCommand } from '../../commands/SetFilterRuleCommand'; -import { UIBreak, UIButton, UINumber, UIRow, UISelect } from '../../libs/ui'; -import { UIOutliner } from '../../libs/ui.three'; -import { YaptideEditor } from '../../YaptideEditor'; -import { ObjectAbstract } from './Object.Abstract'; - -export class ObjectFilter extends ObjectAbstract { - object?: ScoringFilter; - rule?: FilterRule; - - add: UIButton; - addRow: UIRow; - - outliner: UIOutliner; - - ruleRow: UIRow; - keywordSelect: UISelect; - operatorSelect: UISelect; - idSelect: UISelect; - valueInput: UINumber; - removeButton: UIButton; - - constructor(editor: YaptideEditor) { - super(editor, 'Scoring rules'); - [this.addRow, this.add] = createFullwidthButton({ - text: 'Add rule', - update: this.addRule.bind(this) - }); - - [this.outliner] = createRulesOutliner(editor, { - update: this.selectRule.bind(this) - }); - - [ - this.ruleRow, - this.keywordSelect, - this.operatorSelect, - this.idSelect, - this.valueInput, - this.removeButton - ] = createRuleConfigurationRow({ - update: this.update.bind(this), - delete: this.deleteRule.bind(this), - operators: Rule.OPERATOR_OPTIONS, - options: Rule.KEYWORD_OPTIONS, - particles: Rule.PARTICLE_OPTIONS, - sortFunc: Rule.KEYWORD_SORT_ORDER - }); - this.panel.add(this.addRow, this.outliner, new UIBreak(), this.ruleRow); - editor.signals.detectFilterChanged.add(() => - this.object ? this.setObject(this.object) : null - ); - } - - getRuleValue(rule: FilterRule): number { - let value; - - switch (true) { - case isIDRule(rule): - value = parseInt(this.idSelect.getValue()); - - break; - case isFloatRule(rule): - value = this.valueInput.getValue(); - - break; - case isIntRule(rule): - value = Math.floor(this.valueInput.getValue()); - - break; - default: - console.warn('Unknown rule type'); - value = 0; - } - - return isNaN(value) ? this.valueInput.min : value; - } - - update(): void { - const { object, rule } = this; - - if (!object || !rule) return; - const uuid = rule.uuid; - const keyword = this.keywordSelect.getValue() as Rule.Keyword; - const operator = - keyword !== rule.keyword - ? Rule.RULE_DEFAULTS[keyword][0] - : this.operatorSelect.getValue(); - - const value = - keyword !== rule.keyword ? Rule.RULE_DEFAULTS[keyword][1] : this.getRuleValue(rule); - - this.editor.execute( - new SetFilterRuleCommand(this.editor, object, { - uuid, - keyword, - operator, - value - }) - ); - } - - deleteRule(): void { - const { object, editor, rule } = this; - - if (!object || !rule) return; - editor.execute(new SetFilterRuleCommand(editor, object)); - } - - addRule(): void { - const { object, editor } = this; - - if (!object) return; - const ruleJson = { - uuid: MathUtils.generateUUID(), - keyword: 'Z', - operator: Rule.RULE_DEFAULTS.Z[0], - value: Rule.RULE_DEFAULTS.Z[1] - }; - editor.execute(new SetFilterRuleCommand(editor, object, ruleJson)); - } - - selectRule(): void { - const { object } = this; - - if (!object) return; - - if (object instanceof CustomFilter) { - const rule = object.getRuleByUuid(this.outliner.getValue()); - object.selectedRule = rule; - - if (rule) { - this.setRule(rule); - } else { - this.outliner.setValue(null); - this.rule = undefined; - hideUIElement(this.ruleRow); - } - } - } - - updateSelectedRule(): void { - const { rule } = this; - - if (!rule) return; - this.keywordSelect.setValue(rule.keyword); - this.operatorSelect.setValue(rule.operator); - this.idSelect.setValue(rule.value.toString()); - - if (isIDRule(rule)) { - showUIElement(this.idSelect); - hideUIElement(this.valueInput); - } else { - hideUIElement(this.idSelect); - showUIElement(this.valueInput); - this.valueInput.setUnit(Rule.RULE_UNITS[rule.keyword]); - this.valueInput.setRange(...Rule.RULE_VALUE_RANGES[rule.keyword]); - - if (isFloatRule(rule)) this.valueInput.setPrecision(3); - else this.valueInput.setPrecision(0); - } - - this.valueInput.setValue(rule.value); - } - - setRule(rule: FilterRule): void { - showUIElement(this.ruleRow, 'grid'); - this.rule = rule; - this.outliner.setValue(rule.uuid); - this.updateSelectedRule(); - } - - setObject(object: ScoringFilter): void { - super.setObject(object); - - if (!object) return; - - this.object = object; - - if (object instanceof CustomFilter) { - this.outliner.setOptions(object.rules); - } - - if (object instanceof CustomFilter && object.selectedRule) { - const rule = object.selectedRule; - - if (rule) { - this.outliner.setValue(object.selectedRule.uuid); - this.setRule(rule); - } else { - object.selectedRule = undefined; - hideUIElement(this.ruleRow); - } - } else { - hideUIElement(this.ruleRow); - } - } -} diff --git a/src/ThreeEditor/js/sidebar/object/Object.Grid.ts b/src/ThreeEditor/js/sidebar/object/Object.Grid.ts deleted file mode 100644 index 8b0f6c8c8..000000000 --- a/src/ThreeEditor/js/sidebar/object/Object.Grid.ts +++ /dev/null @@ -1,124 +0,0 @@ -import { createRowParamNumber, hideUIElement, showUIElement } from '../../../../util/Ui/Uis'; -import { Detector } from '../../../Simulation/Detectors/Detector'; -import { SetDetectGeometryCommand } from '../../commands/Commands'; -import { UINumber, UIRow } from '../../libs/ui'; -import { YaptideEditor } from '../../YaptideEditor'; -import { ObjectAbstract } from './Object.Abstract'; - -export class ObjectGrid extends ObjectAbstract { - object?: Detector; - - xLengthRow: UIRow; - xLength: UINumber; - - yLengthRow: UIRow; - yLength: UINumber; - - zLengthRow: UIRow; - zLength: UINumber; - - radiusRow: UIRow; - radius: UINumber; - - constructor(editor: YaptideEditor) { - super(editor, 'Grid'); - - [this.xLengthRow, this.xLength] = createRowParamNumber({ - update: this.update.bind(this), - text: `number of bins along X axis`, - min: 1, - max: 1000000, - precision: 0 - }); - - [this.yLengthRow, this.yLength] = createRowParamNumber({ - update: this.update.bind(this), - text: `number of bins along Y axis`, - min: 1, - max: 1000000, - precision: 0 - }); - - [this.zLengthRow, this.zLength] = createRowParamNumber({ - update: this.update.bind(this), - text: `number of bins along Z axis`, - min: 1, - max: 1000000, - precision: 0 - }); - - [this.radiusRow, this.radius] = createRowParamNumber({ - update: this.update.bind(this), - text: `number of bins along the radius`, - min: 1, - max: 1000000, - precision: 0 - }); - this.panel.add(this.xLengthRow, this.yLengthRow, this.zLengthRow, this.radiusRow); - } - - setObject(object: Detector): void { - super.setObject(object); - - if (!object) return; - - this.object = object; - const { detectorType: detectType, geometryParameters: geometryData } = object; - hideUIElement(this.xLengthRow); - hideUIElement(this.yLengthRow); - hideUIElement(this.zLengthRow); - hideUIElement(this.radiusRow); - - switch (detectType) { - case 'Mesh': - showUIElement(this.xLengthRow); - showUIElement(this.yLengthRow); - showUIElement(this.zLengthRow); - this.xLength.setValue(geometryData.xSegments); - this.yLength.setValue(geometryData.ySegments); - this.zLength.setValue(geometryData.zSegments); - - break; - case 'Cyl': - showUIElement(this.zLengthRow); - showUIElement(this.radiusRow); - this.zLength.setValue(geometryData.zSegments); - this.radius.setValue(geometryData.radialSegments); - - break; - default: - break; - } - } - - update(): void { - const { editor, object } = this; - - if (!object) return; - const { detectorType: detectType } = object; - - switch (detectType) { - case 'Mesh': - editor.execute( - new SetDetectGeometryCommand(editor, object, { - xSegments: this.xLength.getValue(), - ySegments: this.yLength.getValue(), - zSegments: this.zLength.getValue() - }) - ); - - break; - case 'Cyl': - editor.execute( - new SetDetectGeometryCommand(editor, object, { - radialSegments: this.radius.getValue(), - zSegments: this.zLength.getValue() - }) - ); - - break; - default: - break; - } - } -} diff --git a/src/ThreeEditor/js/sidebar/object/Object.Info.ts b/src/ThreeEditor/js/sidebar/object/Object.Info.ts deleted file mode 100644 index dea7118bf..000000000 --- a/src/ThreeEditor/js/sidebar/object/Object.Info.ts +++ /dev/null @@ -1,49 +0,0 @@ -import * as THREE from 'three'; - -import { createRowParamInput, createRowText } from '../../../../util/Ui/Uis'; -import { SetValueCommand } from '../../commands/Commands'; -import { UIInput, UIRow, UIText } from '../../libs/ui'; -import { YaptideEditor } from '../../YaptideEditor'; -import { ObjectAbstract } from './Object.Abstract'; - -export class ObjectInfo extends ObjectAbstract { - object?: THREE.Object3D; - - idRow: UIRow; - id: UIText; - - typeRow: UIRow; - type: UIText; - - nameRow: UIRow; - name: UIInput; - - constructor(editor: YaptideEditor) { - super(editor, 'Information'); - [this.idRow, this.id] = createRowText({ text: 'ID' }); - [this.typeRow, this.type] = createRowText({ text: 'Type' }); - [this.nameRow, this.name] = createRowParamInput({ - text: 'Name', - update: this.update.bind(this) - }); - this.panel.add(this.idRow, this.typeRow, this.nameRow); - } - - setObject(object: THREE.Object3D): void { - super.setObject(object); - - if (!object) return; - - this.object = object; - this.id.setValue(this.object.id.toString()); - this.type.setValue(this.object.type); - this.name.setValue(this.object.name); - } - - update(): void { - if (this.object) - this.editor.execute( - new SetValueCommand(this.editor, this.editor.selected, 'name', this.name.getValue()) - ); - } -} diff --git a/src/ThreeEditor/js/sidebar/object/Object.Material.ts b/src/ThreeEditor/js/sidebar/object/Object.Material.ts deleted file mode 100644 index 4413077f3..000000000 --- a/src/ThreeEditor/js/sidebar/object/Object.Material.ts +++ /dev/null @@ -1,184 +0,0 @@ -import { - createFullwidthButton, - createMaterialSelect, - createRowColor, - createRowConditionalNumber, - createRowText, - hideUIElement, - showUIElement -} from '../../../../util/Ui/Uis'; -import { SimulationMesh } from '../../../Simulation/Base/SimulationMesh'; -import { SimulationPoints } from '../../../Simulation/Base/SimulationPoints'; -import { Beam } from '../../../Simulation/Physics/Beam'; -import { isBooleanZone } from '../../../Simulation/Zones/BooleanZone'; -import { isWorldZone } from '../../../Simulation/Zones/WorldZone/WorldZone'; -import { - SetMaterialColorCommand, - SetMaterialValueCommand, - SetZoneMaterialCommand -} from '../../commands/Commands'; -import { UIButton, UICheckbox, UIColor, UINumber, UIRow, UISelect, UIText } from '../../libs/ui'; -import { YaptideEditor } from '../../YaptideEditor'; -import { SidebarMaterialBooleanProperty } from '../Sidebar.Material.BooleanProperty'; -import { SidebarMaterialConstantProperty } from '../Sidebar.Material.ConstantProperty'; -import { ObjectAbstract } from './Object.Abstract'; - -const MATERIAL_BLENDING_OPTIONS = { - 0: 'No', - 1: 'Normal', - 2: 'Additive', - 3: 'Subtractive', - 4: 'Multiply' -} as const; - -export class ObjectMaterial extends ObjectAbstract { - object?: SimulationMesh | SimulationPoints | Beam; - - typeRow: UIRow; - type: UIText; - - typeSelectRow: UIRow; - typeSelect: UISelect; - renderTypeSelect: (value: number) => void; - - colorRow: UIRow; - color: UIColor; - - flatShadingRow: UIRow; - blendingRow: UIRow; - - opacityRow: UIRow; - opacity: UINumber; - transparent: UICheckbox; - - exportMaterialsRow: UIRow; - exportMaterials: UIButton; - - constructor(editor: YaptideEditor) { - super(editor, 'Visuals'); - - [this.typeRow, this.type] = createRowText({ text: 'Material Type' }); - [this.typeSelectRow, this.typeSelect, this.renderTypeSelect] = createMaterialSelect( - editor.materialManager, - this.update.bind(this) - ); - - // color - [this.colorRow, this.color] = createRowColor({ - text: 'Color', - update: this.update.bind(this) - }); - - // flatShading - this.flatShadingRow = SidebarMaterialBooleanProperty(editor, 'flatShading', 'Flat Shading'); - - // blending - this.blendingRow = SidebarMaterialConstantProperty( - editor, - 'blending', - 'Blending', - MATERIAL_BLENDING_OPTIONS - ); - - // opacity - [this.opacityRow, this.transparent, this.opacity] = createRowConditionalNumber({ - text: 'Opacity', - min: 0, - max: 1, - step: 0.05, - update: this.update.bind(this) - }); - - // export JSON - [this.exportMaterialsRow, this.exportMaterials] = createFullwidthButton({ - text: 'Console Log Materials', - update: this.materialConsole.bind(this) - }); - - this.panel.add( - this.typeRow, - this.typeSelectRow, - this.colorRow, - /* - * Disable flatShading and blending for now. - * this.flatShadingRow, - * this.blendingRow, - */ - this.opacityRow, - this.exportMaterialsRow - ); - } - - setObject(object: SimulationMesh | Beam | SimulationPoints): void { - super.setObject(object); - - if (!object) return; - - this.object = object; - const { color, opacity, transparent, type } = object.material; - hideUIElement(this.typeRow); - hideUIElement(this.typeSelectRow); - hideUIElement(this.opacityRow); - hideUIElement(this.exportMaterialsRow); - this.color.setHexValue(color.getHexString()); - - if (isWorldZone(object) || isBooleanZone(object)) { - const { icru } = object.simulationMaterial; - showUIElement(this.typeSelectRow); - - if (isBooleanZone(object)) { - showUIElement(this.opacityRow); - - if (transparent) showUIElement(this.opacity); - else hideUIElement(this.opacity); - showUIElement(this.exportMaterialsRow); - this.opacity.setValue(opacity); - this.transparent.setValue(transparent); - } - - this.typeSelect.setValue(icru); - } else { - showUIElement(this.typeRow); - this.type.setValue(type); - } - - this.render(); - } - - update(): void { - const { editor, object } = this; - - if (!object) return; - if ( - (isWorldZone(object) || isBooleanZone(object)) && - object.simulationMaterial.icru !== parseInt(this.typeSelect.getValue()) - ) - editor.execute(new SetZoneMaterialCommand(editor, object, this.typeSelect.getValue())); - if (object.material.color.getHex() !== this.color.getHexValue()) - editor.execute( - new SetMaterialColorCommand(editor, object, 'color', this.color.getHexValue()) - ); - if (isBooleanZone(object) && object.material.transparent !== this.transparent.getValue()) - editor.execute( - new SetMaterialValueCommand( - editor, - object, - 'transparent', - this.transparent.getValue() - ) - ); - if (isBooleanZone(object) && object.material.opacity !== this.opacity.getValue()) - editor.execute( - new SetMaterialValueCommand(editor, object, 'opacity', this.opacity.getValue()) - ); - } - - render(): void { - if (!isWorldZone(this.object) && !isBooleanZone(this.object)) return; - this.renderTypeSelect(this.object.simulationMaterial.icru); - } - - materialConsole(): void { - console.log(this.editor.materialManager.toJSON().materials); - } -} diff --git a/src/ThreeEditor/js/sidebar/object/Object.Placement.ts b/src/ThreeEditor/js/sidebar/object/Object.Placement.ts deleted file mode 100644 index 5c57822bc..000000000 --- a/src/ThreeEditor/js/sidebar/object/Object.Placement.ts +++ /dev/null @@ -1,159 +0,0 @@ -import * as THREE from 'three'; - -import { SimulationPropertiesType } from '../../../../types/SimulationProperties'; -import { createRowParamNumberXYZ, hideUIElement, showUIElement } from '../../../../util/Ui/Uis'; -import { SimulationElement } from '../../../Simulation/Base/SimulationElement'; -import { isDetector } from '../../../Simulation/Detectors/Detector'; -import { Beam, isBeam } from '../../../Simulation/Physics/Beam'; -import { isWorldZone } from '../../../Simulation/Zones/WorldZone/WorldZone'; -import { - SetBeamDirectionCommand, - SetDetectPositionCommand, - SetPositionCommand, - SetRotationCommand, - SetValueCommand -} from '../../commands/Commands'; -import { UINumber, UIRow } from '../../libs/ui'; -import { YaptideEditor } from '../../YaptideEditor'; -import { ObjectAbstract } from './Object.Abstract'; - -export class ObjectPlacement extends ObjectAbstract { - object?: SimulationElement | Beam; - - positionRow: UIRow; - positionX: UINumber; - positionY: UINumber; - positionZ: UINumber; - - rotationRow: UIRow; - rotationX: UINumber; - rotationY: UINumber; - rotationZ: UINumber; - - //Beam only parameter - directionRow: UIRow; - directionX: UINumber; - directionY: UINumber; - directionZ: UINumber; - - constructor(editor: YaptideEditor) { - super(editor, 'Placement'); - - [this.positionRow, this.positionX, this.positionY, this.positionZ] = - createRowParamNumberXYZ({ - text: `Position`, - unit: `${editor.unit.name}`, - update: this.update.bind(this) - }); - - [this.rotationRow, this.rotationX, this.rotationY, this.rotationZ] = - createRowParamNumberXYZ({ - text: `Rotation`, //TODO: add multiple unit types to editor - update: this.update.bind(this), - step: 10, - nudge: 0.1, - precision: 2, - unit: '°' - }); - - [this.directionRow, this.directionX, this.directionY, this.directionZ] = - createRowParamNumberXYZ({ - text: `Direction`, - unit: `${editor.unit.name}`, - update: this.update.bind(this) - }); - - this.panel.add(this.positionRow, this.rotationRow, this.directionRow); - } - - private hasPosition(object: SimulationPropertiesType): boolean { - return !object.notMovable; - } - - private hasRotation(object: SimulationPropertiesType): boolean { - return !object.notRotatable && !isBeam(object); - } - - private hasDirection(object: SimulationPropertiesType): object is Beam { - return isBeam(object); - } - - setObject(object: SimulationElement | Beam): void { - super.setObject(object); - - if (!object) return; - - this.object = object; - - if (this.hasPosition(object)) { - showUIElement(this.positionRow, 'grid'); - this.positionX.setValue(object.position.x); - this.positionY.setValue(object.position.y); - this.positionZ.setValue(object.position.z); - } else { - hideUIElement(this.positionRow); - } - - if (this.hasRotation(object)) { - showUIElement(this.rotationRow, 'grid'); - this.rotationX.setValue(object.rotation.x * THREE.MathUtils.RAD2DEG); - this.rotationY.setValue(object.rotation.y * THREE.MathUtils.RAD2DEG); - this.rotationZ.setValue(object.rotation.z * THREE.MathUtils.RAD2DEG); - } else { - hideUIElement(this.rotationRow); - } - - if (this.hasDirection(object)) { - showUIElement(this.directionRow, 'grid'); - this.directionX.setValue(object.direction.x); - this.directionY.setValue(object.direction.y); - this.directionZ.setValue(object.direction.z); - } else { - hideUIElement(this.directionRow); - } - } - - update(): void { - const { object, editor } = this; - - if (!object) return; - - if (this.hasPosition(object)) { - const newPosition = new THREE.Vector3( - this.positionX.getValue(), - this.positionY.getValue(), - this.positionZ.getValue() - ); - - if (object.position.distanceTo(newPosition) >= 0.01) { - if (isWorldZone(object)) - this.editor.execute(new SetValueCommand(editor, object, 'center', newPosition)); - else if (isDetector(object)) - this.editor.execute(new SetDetectPositionCommand(editor, object, newPosition)); - else this.editor.execute(new SetPositionCommand(editor, object, newPosition)); - } - } - - if (this.hasRotation(object)) { - const newRotation = new THREE.Euler( - this.rotationX.getValue() * THREE.MathUtils.DEG2RAD, - this.rotationY.getValue() * THREE.MathUtils.DEG2RAD, - this.rotationZ.getValue() * THREE.MathUtils.DEG2RAD - ); - - if (!newRotation.equals(object.rotation)) - this.editor.execute(new SetRotationCommand(editor, object, newRotation)); - } - - if (this.hasDirection(object)) { - const newDirection = new THREE.Vector3( - this.directionX.getValue(), - this.directionY.getValue(), - this.directionZ.getValue() - ); - - if (!newDirection.equals(object.direction)) - this.editor.execute(new SetBeamDirectionCommand(editor, newDirection)); - } - } -} diff --git a/src/ThreeEditor/js/sidebar/object/Object.Quantity.ts b/src/ThreeEditor/js/sidebar/object/Object.Quantity.ts deleted file mode 100644 index 6fea1e9eb..000000000 --- a/src/ThreeEditor/js/sidebar/object/Object.Quantity.ts +++ /dev/null @@ -1,127 +0,0 @@ -import { - createRowConditionalNumber, - createRowConditionalSelect, - createRowSelect, - hideUIElement, - showUIElement -} from '../../../../util/Ui/Uis'; -import * as Scoring from '../../../Simulation/Scoring/ScoringOutputTypes'; -import { ScoringQuantity } from '../../../Simulation/Scoring/ScoringQuantity'; -import { SetQuantityValueCommand } from '../../commands/Commands'; -import { UICheckbox, UINumber, UIRow, UISelect } from '../../libs/ui'; -import { YaptideEditor } from '../../YaptideEditor'; -import { ObjectAbstract } from './Object.Abstract'; - -export class ObjectQuantity extends ObjectAbstract { - object?: ScoringQuantity; - - keywordRow: UIRow; - keyword: UISelect; - - mediumRow: UIRow; - medium: UISelect; - - filterRow: UIRow; - filterCheckbox: UICheckbox; - filter: UISelect; - - rescaleRow: UIRow; - rescaleCheckbox: UICheckbox; - rescale: UINumber; - constructor(editor: YaptideEditor) { - super(editor, 'Quantity configuration'); - [this.keywordRow, this.keyword] = createRowSelect({ - text: 'Quantity type', - update: this.update.bind(this), - options: Scoring.SCORING_KEYWORD // File unused #1893 - }); - - [this.mediumRow, this.medium] = createRowSelect({ - text: 'Medium', - update: this.update.bind(this), - options: Scoring.MEDIUM_KEYWORD_OPTIONS - }); - - [this.filterRow, this.filterCheckbox, this.filter] = createRowConditionalSelect({ - text: 'Filter', - update: this.update.bind(this) - }); - - [this.rescaleRow, this.rescaleCheckbox, this.rescale] = createRowConditionalNumber({ - text: 'Rescale', - value: [false, 1], - update: this.update.bind(this) - }); - this.panel.add(this.keywordRow, this.mediumRow, this.filterRow, this.rescaleRow); - } - - setObject(object: ScoringQuantity): void { - super.setObject(object); - - if (!object) return; - this.object = object; - - const { filter, hasFilter, rescale, hasRescale, medium, keyword } = object; - this.keyword.setValue(keyword); - // File unused #1893 - // if (Scoring.canChangeNKMedium(keyword)) showUIElement(this.mediumRow); - // else hideUIElement(this.mediumRow); - this.medium.setValue(medium ?? Scoring.MEDIUM_KEYWORD_OPTIONS.WATER); - - const options = this.editor.scoringManager.getFilterOptions(); - - if (Object.keys(options).length > 0) { - showUIElement(this.filterRow); - this.filterCheckbox.setValue(hasFilter); - this.filter.setOptions(options); - this.filter.setValue(filter?.uuid); - - if (hasFilter) { - showUIElement(this.filter); - this.filter.setValue(filter?.uuid); - } else hideUIElement(this.filter); - } else hideUIElement(this.filterRow); - - if (hasRescale) { - showUIElement(this.rescale); - this.rescale.setValue(rescale); - } else hideUIElement(this.rescale); - } - - update(): void { - if (!this.object) return; - const { object, editor } = this; - const { filter, keyword, hasFilter, medium, rescale, hasRescale } = this.object; - const newKeyword = this.keyword.getValue(); - const newMedium = this.medium.getValue(); - const newFilter = editor.scoringManager.getFilterByUuid(this.filter.getValue()); - const newHasFilter = this.filterCheckbox.getValue(); - const newRescale = this.rescale.getValue(); - const newHasRescale = this.rescaleCheckbox.getValue(); - - const commands = []; - - if (keyword !== newKeyword) - commands.push(new SetQuantityValueCommand(editor, object, 'keyword', newKeyword)); - // File unused #1893 - // if (Scoring.canChangeNKMedium(newKeyword)) { - // if (medium !== newMedium) - // commands.push(new SetQuantityValueCommand(editor, object, 'medium', newMedium)); - // } - else hideUIElement(this.mediumRow); - - if (newHasRescale !== hasRescale) - commands.push(new SetQuantityValueCommand(editor, object, 'hasRescale', newHasRescale)); - - if (rescale !== newRescale) - commands.push(new SetQuantityValueCommand(editor, object, 'rescale', newRescale)); - - if (newHasFilter !== hasFilter) - commands.push(new SetQuantityValueCommand(editor, object, 'hasFilter', newHasFilter)); - - if (filter?.uuid !== newFilter?.uuid) - commands.push(new SetQuantityValueCommand(editor, object, 'filter', newFilter)); - - commands.forEach(command => this.editor.execute(command)); - } -} diff --git a/src/ThreeEditor/js/sidebar/object/Object.Settings.ts b/src/ThreeEditor/js/sidebar/object/Object.Settings.ts deleted file mode 100644 index 38ed3264d..000000000 --- a/src/ThreeEditor/js/sidebar/object/Object.Settings.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { - createFullwidthButton, - createRowConditionalNumber, - createRowConditionalSelect, - createRowSelect, - hideUIElement, - showUIElement -} from '../../../../util/Ui/Uis'; -import { ScoringOutput } from '../../../Simulation/Scoring/ScoringOutput'; -import { AddQuantityCommand, SetOutputSettingsCommand } from '../../commands/Commands'; -import { UIButton, UICheckbox, UINumber, UIRow, UISelect } from '../../libs/ui'; -import { YaptideEditor } from '../../YaptideEditor'; -import { ObjectAbstract } from './Object.Abstract'; - -export class ObjectSettings extends ObjectAbstract { - object?: ScoringOutput; - - geometryRow: UIRow; - geometry: UISelect; - - traceRow: UIRow; - trace: UICheckbox; - traceFilter: UISelect; - - addQuantity: UIButton; - addQuantityRow: UIRow; - - constructor(editor: YaptideEditor) { - super(editor, 'Output configuration'); - - [this.geometryRow, this.geometry] = createRowSelect({ - text: 'Detect geometry', - update: this.update.bind(this) - }); - - [this.traceRow, this.trace, this.traceFilter] = createRowConditionalSelect({ - text: 'Tracing', - update: this.update.bind(this) - }); - - [this.addQuantityRow, this.addQuantity] = createFullwidthButton({ - text: 'Add new quantity', - update: this.onClick.bind(this) - }); - this.panel.add(this.geometryRow, this.traceRow, this.addQuantityRow); - } - - setObject(object: ScoringOutput): void { - super.setObject(object); - - if (!object) return; - const { trace } = object; - this.object = object; - - this.geometry.setOptions(this.editor.detectorManager.getDetectorOptions()); - this.geometry.setValue(object.detector?.uuid); - - if (trace[0]) { - const options = this.editor.scoringManager.getFilterOptions(); - hideUIElement(this.addQuantityRow); - - if (Object.keys(options).length > 0) { - showUIElement(this.traceFilter); - this.traceFilter.setOptions(options); - this.traceFilter.setValue(trace[1]); - } else hideUIElement(this.traceFilter); - } - - this.trace.setValue(trace[0]); - } - - onClick() { - if (!this.object) return; - this.editor.execute(new AddQuantityCommand(this.editor, this.object)); - } - - update(): void { - if (!this.object) return; - - const trace = new SetOutputSettingsCommand(this.editor, this.object, 'trace', [ - this.trace.getValue(), - this.traceFilter.getValue() - ]); - - const geometry = new SetOutputSettingsCommand( - this.editor, - this.object, - 'geometry', - this.editor.detectorManager.getDetectorByUuid(this.geometry.getValue()) - ); - [trace, geometry].forEach(command => this.editor.execute(command)); - } -} diff --git a/src/ThreeEditor/js/sidebar/object/Object.ZoneCalculate.ts b/src/ThreeEditor/js/sidebar/object/Object.ZoneCalculate.ts deleted file mode 100644 index 649fc9b4c..000000000 --- a/src/ThreeEditor/js/sidebar/object/Object.ZoneCalculate.ts +++ /dev/null @@ -1,70 +0,0 @@ -import * as THREE from 'three'; - -import { - createFullwidthButton, - createRowCheckbox, - hideUIElement, - showUIElement -} from '../../../../util/Ui/Uis'; -import { WorldZone } from '../../../Simulation/Zones/WorldZone/WorldZone'; -import { SetValueCommand } from '../../commands/Commands'; -import { UIButton, UICheckbox, UIRow } from '../../libs/ui'; -import { YaptideEditor } from '../../YaptideEditor'; -import { ObjectAbstract } from './Object.Abstract'; - -export class ObjectZoneCalculate extends ObjectAbstract { - object?: WorldZone; - - auto: UICheckbox; - autoRow: UIRow; - - calculate: UIButton; - calculateRow: UIRow; - - constructor(editor: YaptideEditor) { - super(editor, 'Automatic'); - [this.autoRow, this.auto] = createRowCheckbox({ - text: 'Autocalculate', - update: this.update.bind(this) - }); - - [this.calculateRow, this.calculate] = createFullwidthButton({ - text: 'Calculate', - update: this.zoneCalculate.bind(this) - }); - this.panel.add(this.autoRow, this.calculateRow); - this.editor.signals.objectChanged.add((object: THREE.Object3D) => - (object === this.object && - object === this.editor.selected && - this.object.geometryType === 'BoxGeometry' - ? showUIElement - : hideUIElement)(this.panel) - ); - } - - setObject(object: WorldZone): void { - super.setObject(object); - - if (!object) return; - - this.object = object; - - if (object.geometryType !== 'BoxGeometry') return hideUIElement(this.panel); - this.object = object; - this.auto.setValue(object.autoCalculate); - } - - update(): void { - const { editor, object } = this; - editor.execute( - new SetValueCommand(editor, object, 'autoCalculate', this.auto.getValue(), true) - ); - } - - zoneCalculate(): void { - const { object } = this; - - if (!object) return; - object.calculate(); - } -} diff --git a/src/ThreeEditor/js/sidebar/object/Objects.js b/src/ThreeEditor/js/sidebar/object/Objects.js deleted file mode 100644 index 59f7078d6..000000000 --- a/src/ThreeEditor/js/sidebar/object/Objects.js +++ /dev/null @@ -1,12 +0,0 @@ -export * from './Object.Beam'; -export * from './Object.CSG'; -export * from './Object.Differentials'; -export * from './Object.Dimensions'; -export * from './Object.Filter'; -export * from './Object.Grid'; -export * from './Object.Info'; -export * from './Object.Material'; -export * from './Object.Placement'; -export * from './Object.Quantity'; -export * from './Object.Settings'; -export * from './Object.ZoneCalculate'; diff --git a/src/ThreeEditor/js/viewport/Viewport.ClippedView.js b/src/ThreeEditor/js/viewport/Viewport.ClippedView.js deleted file mode 100644 index ef71ffb8b..000000000 --- a/src/ThreeEditor/js/viewport/Viewport.ClippedView.js +++ /dev/null @@ -1,237 +0,0 @@ -import * as THREE from 'three'; -import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'; - -/** - * @deprecated Use Viewport.ClippedViewCSG instead - * - * This function is responsible for preparing scene with clipping plane and stencil materials - * It creates and manages controls for shifting clipping planes in X,Y,Z axis. - * Stencil materials are used as a trick in order to avoid display of transparent inner walls of clipped objects (zones/bodies). - * We aim at assigning stencil materials to hold different colors than the walls of the objects and represent the internal material which is filling the zone. - * This is especially useful for such clipped views where at the same time internal material and wall of the object is visible at same time - * (for example torus clipped by a plane containing its axis of symmetry, stencil material fills two full circles, while wall material is drawn on the visible outer wall). - */ -export function ViewportClippedView( - name, - editor, - viewport, - planeHelpers, - initialObjects, - signalGeometryChanged, - signalGeometryAdded, - signalGeometryRemoved, - container, - { clipPlane, planeHelperColor, planePosLabel } -) { - this.name = name; - - // default order is zero, we assign higher order to stencil plane to display it in front of other objects - const STENCIL_RENDER_ORDER = 1; - - // several objects we are using (stencil plan) are limited to a square on a plane with given size (side length) - // it limits range of applicability of clipping plane - // it also limits the size (horizontally and vertically) of stencil plane - // here side length is set to 10 cm - const CLIPPING_SIZE = 200; - - this.scene = new THREE.Scene(); - this.scene.name = `ClippedViewScene-${name}`; - this.gui = new GUI({ container }); - this.gui.domElement.style.position = 'absolute'; - this.gui.domElement.style.top = '5px'; - this.gui.domElement.style.right = '5px'; - - // Setup plane clipping ui - const planeHelper = new THREE.PlaneHelper( - clipPlane, - CLIPPING_SIZE, - planeHelperColor ?? 0xffff00 - ); // default helper color is yellow - planeHelpers.add(planeHelper); - - const planePosProperty = `${planePosLabel ?? 'PlanePos'} ${editor.unit.name}`; - - const uiProps = { - get [planePosProperty]() { - // distance from a plane to the origin of coordinate system - // as our planes are parallel to OXY, OYZ or OXZ, this reduces to the distance along normal vector - return clipPlane.constant; - }, - set [planePosProperty](v) { - // take the previous location of clipping plane and shift stencil plane to the desired location of clipping plane - // we translate in the plane in local coordinate system - stencilPlane.translateZ(v - clipPlane.constant); - - // align clipping plane with stencil plane - clipPlane.constant = v; - - editor.signals.viewportConfigChanged.dispatch({ - name: viewport.name, - globalPlaneConstant: v - }); - }, - - get 'Helper Visible'() { - return planeHelper.visible; - }, - set 'Helper Visible'(v) { - planeHelper.visible = v; - - editor.signals.viewportConfigChanged.dispatch({ - name: viewport.name, - helperVisible: v - }); - } - }; - - // adjust range of movement of clipping plane to -size...+size with given step - const clipPlaneStep = 0.1; - this.gui.add(uiProps, planePosProperty, -CLIPPING_SIZE, CLIPPING_SIZE, clipPlaneStep).listen(); - this.gui.add(uiProps, 'Helper Visible').listen(); - - // setup plane to display where geometry is clipped - // in fact this is a square being a subset of plane - const planeGeom = new THREE.PlaneGeometry(CLIPPING_SIZE, CLIPPING_SIZE); - - const clippedObjects = new THREE.Group(); - clippedObjects.name = 'clippedObjects'; - this.scene.add(clippedObjects); - - const crossSectionGroup = new THREE.Group(); - crossSectionGroup.name = 'crossSectionGroup'; - this.scene.add(crossSectionGroup); - - const planeMat = new THREE.MeshBasicMaterial({ - name: 'CrossSectionPlaneMaterial', - color: 0x00ff00, - emissive: 0x00ff00, - - stencilWrite: true, - stencilRef: 0, - stencilFunc: THREE.NotEqualStencilFunc, - stencilFail: THREE.ReplaceStencilOp, - stencilZFail: THREE.ReplaceStencilOp, - stencilZPass: THREE.ReplaceStencilOp - }); - - const stencilPlane = new THREE.Mesh(planeGeom, planeMat); // Cross Section Plane - fill stencil - stencilPlane.name = 'stencilPlane'; - stencilPlane.onAfterRender = function (renderer) { - renderer.clearStencil(); - }; - // increase render order to have stencil plane being rendered after other objects - // we increase the render object by 0.1 following the original code from threejs repo - stencilPlane.renderOrder = STENCIL_RENDER_ORDER + 0.1; - - crossSectionGroup.add(stencilPlane); - - // align stencil plane to clipping plane - clipPlane.coplanarPoint(stencilPlane.position); - stencilPlane.lookAt( - stencilPlane.position.x - clipPlane.normal.x, - stencilPlane.position.y - clipPlane.normal.y, - stencilPlane.position.z - clipPlane.normal.z - ); - - // put stencil plane at the same distance from the origin of coord. system as clipping plane - // in fact there will be completely aligned then - stencilPlane.translateZ(clipPlane.constant); - - // move back stencil plane by epsilon distance (here 1nm) - // TODO why back and not to the front ? # skipcq: JS-0099 - // TODO try to decrease this value in such way that creating geometry of small objects (i.e. um size is still possible) # skipcq: JS-0099 - stencilPlane.translateZ(-1e-2); - - // Initialize view with objects - initialObjects.forEach(object3D => { - const stencilGroup = createPlaneStencilGroup( - object3D.geometry, - clipPlane, - STENCIL_RENDER_ORDER - ); - stencilGroup.name = object3D.uuid; - clippedObjects.add(stencilGroup); - }); - - // update stencil materials when geometry of bodies and zones is updated - function updateMeshWithStencilMaterial(object3D) { - clippedObjects.remove(clippedObjects.getObjectByName(object3D.uuid)); - - const stencilGroup = createPlaneStencilGroup( - object3D.geometry, - clipPlane, - STENCIL_RENDER_ORDER - ); - stencilGroup.name = object3D.uuid; - clippedObjects.add(stencilGroup); - } - - signalGeometryChanged.add(object3D => { - updateMeshWithStencilMaterial(object3D); - }); - - signalGeometryAdded.add(object3D => { - updateMeshWithStencilMaterial(object3D); - }); - - signalGeometryRemoved.add(object3D => { - clippedObjects.remove(clippedObjects.getObjectByName(object3D.uuid)); - }); - - // https://github.com/mrdoob/three.js/blob/r132/examples/webgl_clipping_stencil.html - // Creates mask with stencil where stencil plane should be visible - function createPlaneStencilGroup(geometry, plane, renderOrder) { - const group = new THREE.Group(); - const baseMat = new THREE.MeshBasicMaterial(); - baseMat.depthWrite = false; - baseMat.depthTest = false; - baseMat.colorWrite = false; - baseMat.stencilWrite = true; - baseMat.stencilFunc = THREE.AlwaysStencilFunc; - - // back faces - add stencil - const mat0 = baseMat.clone(); - mat0.name = 'back faces - add stencil'; - mat0.side = THREE.BackSide; - mat0.clippingPlanes = [plane]; - mat0.stencilFail = THREE.IncrementWrapStencilOp; - mat0.stencilZFail = THREE.IncrementWrapStencilOp; - mat0.stencilZPass = THREE.IncrementWrapStencilOp; - - const mesh0 = new THREE.Mesh(geometry, mat0); - mesh0.renderOrder = renderOrder; - group.add(mesh0); - - // front faces - remove stencil - const mat1 = baseMat.clone(); - mat1.name = 'front faces - remove stencil'; - mat1.side = THREE.FrontSide; - mat1.clippingPlanes = [plane]; - mat1.stencilFail = THREE.DecrementWrapStencilOp; - mat1.stencilZFail = THREE.DecrementWrapStencilOp; - mat1.stencilZPass = THREE.DecrementWrapStencilOp; - - const mesh1 = new THREE.Mesh(geometry, mat1); - mesh1.renderOrder = renderOrder; - - group.add(mesh1); - - return group; - } - - this.reset = () => { - clippedObjects.clear(); - }; - - this.configurationToJson = () => { - return { - planeConstant: uiProps[planePosProperty], - visible: uiProps['Helper Visible'] - }; - }; - - this.fromConfigurationJson = json => { - uiProps[planePosProperty] = json.planeConstant; - uiProps['Helper Visible'] = json.visible; - }; -} diff --git a/src/ThreeEditor/main.js b/src/ThreeEditor/main.js deleted file mode 100644 index 57a846295..000000000 --- a/src/ThreeEditor/main.js +++ /dev/null @@ -1,132 +0,0 @@ -import * as THREE from 'three'; - -import { SidebarProjectRenderer } from './js/sidebar/Sidebar.Project.Renderer.js'; -import { ViewManager } from './js/viewport/ViewportManager.js'; -import { YaptideEditor } from './js/YaptideEditor.js'; - -/** - * @deprecated Use function form StoreService instead - */ -export function initEditor(container) { - container = container || document.body; - - window.URL = window.URL || window.webkitURL; - window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder; - - // eslint-disable-next-line no-extend-native - Number.prototype.format = function () { - return this.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,'); - }; - - const editor = new YaptideEditor(container); - - window.editor = editor; // Expose editor to Console - window.THREE = THREE; // Expose THREE to APP Scripts and Console - - const viewManager = new ViewManager(editor); - container.appendChild(viewManager.container.dom); - - editor.viewManager = viewManager; - - // SidebarProjectRenderer has createRenderer function that is required for editor to work - new SidebarProjectRenderer(editor); - // - - editor.storage.init(() => { - const { signals } = editor; - - editor.storage.get(state => { - if (isLoadingFromHash) return; - - if (typeof state !== 'undefined') { - let versionIsOk = true; - - if (state.metadata.version !== editor.jsonVersion) { - versionIsOk = window.confirm( - `Editor in memory has version of JSON: ${state.metadata.version}\nCurrent version of editor JSON: ${editor.jsonVersion}\nLoad it anyway?` - ); - } - - if (versionIsOk) editor.fromJSON(state); - } - - const selected = editor.config.getKey('selected'); - - if (typeof selected !== 'undefined') { - editor.selectByUuid(selected); - } - }); - - // - - let timeout; - - function saveState() { - if (editor.config.getKey('autosave') === false) { - return; - } - - clearTimeout(timeout); - - timeout = setTimeout(() => { - editor.signals.savingStarted.dispatch(); - - timeout = setTimeout(() => { - editor.storage.set(editor.toJSON()); - - editor.signals.savingFinished.dispatch(); - }, 100); - }, 1000); - } - - const stateChangedSignals = [ - signals.geometryChanged, - signals.objectAdded, - signals.objectChanged, - signals.objectRemoved, - signals.materialChanged, - signals.sceneBackgroundChanged, - signals.sceneEnvironmentChanged, - signals.sceneGraphChanged, - signals.historyChanged, - signals.detectFilterChanged, - signals.scoringQuantityChanged, - signals.projectChanged - ]; - stateChangedSignals.forEach(signal => signal.add(saveState)); - }); - - editor.signals.sceneGraphChanged.dispatch(); - - // - - function onWindowResize() { - editor.signals.windowResize.dispatch(); - } - - window.addEventListener('resize', onWindowResize, false); - - onWindowResize(); - - // - - let isLoadingFromHash = false; - const hash = window.location.hash; - - if (hash.substr(1, 5) === 'file=') { - const file = hash.substr(6); - - if (window.confirm('Any unsaved data will be lost. Are you sure?')) { - var loader = new THREE.FileLoader(); - loader.crossOrigin = ''; - loader.load(file, text => { - editor.clear(); - editor.fromJSON(JSON.parse(text)); - }); - - isLoadingFromHash = true; - } - } - - return { editor, viewport: viewManager }; -} diff --git a/src/util/escapeHTML.ts b/src/util/escapeHTML.ts deleted file mode 100644 index d41cdbab0..000000000 --- a/src/util/escapeHTML.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * @type [RegExp, string][] - */ -const escapableSigns: [RegExp, string][] = [ - [/&/g, '&'], - [//g, '>'], - [/"/g, '"'], - [/'/g, '''] -]; - -/** - * - * @param {string} html - * @returns {string} - */ -export function escapeHTML(html: string) { - return escapableSigns.reduce( - (acc, [regex, replacement]) => acc.replace(regex, replacement), - html - ); -} diff --git a/src/util/hooks/useDocumentTitle.ts b/src/util/hooks/useDocumentTitle.ts deleted file mode 100644 index 015c1ced2..000000000 --- a/src/util/hooks/useDocumentTitle.ts +++ /dev/null @@ -1,21 +0,0 @@ -// from https://dev.to/luispa/how-to-add-a-dynamic-title-on-your-react-app-1l7k -import { useEffect, useRef } from 'react'; - -function useDocumentTitle(title: string, prevailOnUnmount = false) { - const defaultTitle = useRef(document.title); - - useEffect(() => { - document.title = title; - }, [title]); - - useEffect( - () => () => { - if (!prevailOnUnmount) { - document.title = defaultTitle.current; - } - }, - [prevailOnUnmount] - ); -} - -export default useDocumentTitle;