From f4f62284261c8003831b7e7bf0883e3e7a1f240b Mon Sep 17 00:00:00 2001 From: kovacsv Date: Sun, 6 Mar 2022 20:16:02 +0100 Subject: [PATCH] Move website related code outside of the engine. --- source/engine/main.js | 7 +- source/engine/viewer/domutils.js | 100 ------------------------- source/website/exportdialog.js | 5 +- source/website/sharingdialog.js | 3 +- source/website/sidebarsettingspanel.js | 3 +- source/website/utils.js | 100 +++++++++++++++++++++++++ 6 files changed, 108 insertions(+), 110 deletions(-) diff --git a/source/engine/main.js b/source/engine/main.js index 586d91f..fde0dec 100644 --- a/source/engine/main.js +++ b/source/engine/main.js @@ -63,7 +63,7 @@ import { ModelToThreeConversionParams, ModelToThreeConversionOutput, ThreeConver import { ThreeModelLoader } from './threejs/threemodelloader.js'; import { HasHighpDriverIssue, GetShadingType, ConvertThreeColorToColor, ConvertColorToThreeColor, ConvertThreeGeometryToMesh, ShadingType } from './threejs/threeutils.js'; import { Camera, CameraIsEqual3D } from './viewer/camera.js'; -import { GetIntegerFromStyle, GetDomElementExternalWidth, GetDomElementExternalHeight, GetDomElementInnerDimensions, GetDomElementClientCoordinates, CreateDomElement, AddDomElement, AddDiv, ClearDomElement, InsertDomElementBefore, InsertDomElementAfter, ShowDomElement, IsDomElementVisible, SetDomElementWidth, SetDomElementHeight, GetDomElementOuterWidth, GetDomElementOuterHeight, SetDomElementOuterWidth, SetDomElementOuterHeight, AddCheckbox, AddRadioButton, AddRangeSlider, AddSelect, AddToggle, CreateDiv } from './viewer/domutils.js'; +import { GetIntegerFromStyle, GetDomElementExternalWidth, GetDomElementExternalHeight, GetDomElementInnerDimensions, GetDomElementClientCoordinates, CreateDomElement, AddDomElement, AddDiv, ClearDomElement, InsertDomElementBefore, InsertDomElementAfter, ShowDomElement, IsDomElementVisible, SetDomElementWidth, SetDomElementHeight, GetDomElementOuterWidth, GetDomElementOuterHeight, SetDomElementOuterWidth, SetDomElementOuterHeight, CreateDiv } from './viewer/domutils.js'; import { EmbeddedViewer, Init3DViewerElement, Init3DViewerElements } from './viewer/embeddedviewer.js'; import { MouseInteraction, TouchInteraction, ClickDetector, Navigation, NavigationType } from './viewer/navigation.js'; import { UpVector, ShadingModel, Viewer, GetDefaultCamera, TraverseThreeObject, GetShadingTypeOfObject } from './viewer/viewer.js'; @@ -293,11 +293,6 @@ export { GetDomElementOuterHeight, SetDomElementOuterWidth, SetDomElementOuterHeight, - AddCheckbox, - AddRadioButton, - AddRangeSlider, - AddSelect, - AddToggle, CreateDiv, EmbeddedViewer, Init3DViewerElement, diff --git a/source/engine/viewer/domutils.js b/source/engine/viewer/domutils.js index 9c07aa9..9dcb0f0 100644 --- a/source/engine/viewer/domutils.js +++ b/source/engine/viewer/domutils.js @@ -135,106 +135,6 @@ export function SetDomElementOuterHeight (element, height) SetDomElementHeight (element, height - GetDomElementExternalHeight (style)); } -export function AddCheckbox (parentElement, id, text, isChecked, onChange) -{ - let label = AddDomElement (parentElement, 'label'); - label.setAttribute ('for', id); - let check = AddDomElement (label, 'input', 'ov_checkbox'); - check.setAttribute ('type', 'checkbox'); - check.setAttribute ('id', id); - check.checked = isChecked; - AddDomElement (label, 'span', null, text); - if (onChange) { - check.addEventListener ('change', onChange); - } - return check; -} - -export function AddRadioButton (parentElement, id, name, text, isChecked, onChange) -{ - let label = AddDomElement (parentElement, 'label'); - label.setAttribute ('for', id); - let radio = AddDomElement (label, 'input', 'ov_radio_button'); - radio.setAttribute ('type', 'radio'); - radio.setAttribute ('id', id); - radio.setAttribute ('name', name); - radio.checked = isChecked; - AddDomElement (label, 'span', null, text); - if (onChange) { - radio.addEventListener ('change', onChange); - } - return radio; -} - -export function AddRangeSlider (parentElement, min, max) -{ - let slider = AddDomElement (parentElement, 'input', 'ov_slider'); - slider.setAttribute ('type', 'range'); - slider.setAttribute ('min', min.toString ()); - slider.setAttribute ('max', max.toString ()); - return slider; -} - -export function AddSelect (parentElement, options, selectedIndex, onChange) -{ - let container = AddDiv (parentElement, 'ov_select_container'); - let select = AddDomElement (container, 'select', 'ov_select'); - for (let option of options) { - AddDomElement (select, 'option', null, option); - } - select.selectedIndex = selectedIndex; - if (onChange) { - select.addEventListener ('change', () => { - onChange (select.selectedIndex); - }); - } - return select; -} - -export function AddToggle (parentElement, className) -{ - function UpdateStatus (toggle, status) - { - if (status) { - toggle.classList.add ('on'); - } else { - toggle.classList.remove ('on'); - } - } - - let status = false; - let onChange = null; - - let toggleClassName = 'ov_toggle'; - if (className) { - toggleClassName += ' ' + className; - } - let toggle = AddDiv (parentElement, toggleClassName); - AddDiv (toggle, 'ov_toggle_slider'); - - toggle.addEventListener ('click', () => { - status = !status; - UpdateStatus (toggle, status); - if (onChange) { - onChange (); - } - }); - - return { - element : toggle, - GetStatus : () => { - return status; - }, - SetStatus : (newStatus) => { - status = newStatus; - UpdateStatus (toggle, status); - }, - OnChange : (onChangeHandler) => { - onChange = onChangeHandler; - } - }; -} - export function CreateDiv (className, innerHTML) { return CreateDomElement ('div', className, innerHTML); diff --git a/source/website/exportdialog.js b/source/website/exportdialog.js index 835e1b8..4af5734 100644 --- a/source/website/exportdialog.js +++ b/source/website/exportdialog.js @@ -5,9 +5,10 @@ import { FileFormat } from '../engine/io/fileutils.js'; import { LoadExternalLibrary } from '../engine/io/externallibs.js'; import { Exporter } from '../engine/export/exporter.js'; import { ExporterModel, ExporterSettings } from '../engine/export/exportermodel.js'; -import { AddDiv, AddRadioButton, AddSelect, CreateDomElement, ClearDomElement } from '../engine/viewer/domutils.js'; -import { ShowMessageDialog } from './dialogs.js'; +import { AddDiv, CreateDomElement, ClearDomElement } from '../engine/viewer/domutils.js'; +import { AddRadioButton, AddSelect } from '../website/utils.js'; import { ButtonDialog, ProgressDialog } from './dialog.js'; +import { ShowMessageDialog } from './dialogs.js'; import { DownloadArrayBufferAsFile, DownloadUrlAsFile } from './utils.js'; import { CookieGetStringVal, CookieSetStringVal } from './cookiehandler.js'; import { HandleEvent } from './eventhandler.js'; diff --git a/source/website/sharingdialog.js b/source/website/sharingdialog.js index ee0d3be..05e3be4 100644 --- a/source/website/sharingdialog.js +++ b/source/website/sharingdialog.js @@ -1,5 +1,6 @@ import { FileSource } from '../engine/io/fileutils.js'; -import { AddDiv, AddDomElement, AddCheckbox } from '../engine/viewer/domutils.js'; +import { AddDiv, AddDomElement } from '../engine/viewer/domutils.js'; +import { AddCheckbox } from '../website/utils.js'; import { CreateUrlBuilder } from '../engine/parameters/parameterlist.js'; import { ShowMessageDialog } from './dialogs.js'; import { ButtonDialog } from './dialog.js'; diff --git a/source/website/sidebarsettingspanel.js b/source/website/sidebarsettingspanel.js index 1842813..c2277ee 100644 --- a/source/website/sidebarsettingspanel.js +++ b/source/website/sidebarsettingspanel.js @@ -1,5 +1,6 @@ import { Color, ColorToHexString } from '../engine/model/color.js'; -import { AddDiv, AddDomElement, AddRangeSlider, AddToggle, AddCheckbox, ShowDomElement, SetDomElementOuterHeight } from '../engine/viewer/domutils.js'; +import { AddDiv, AddDomElement, ShowDomElement, SetDomElementOuterHeight } from '../engine/viewer/domutils.js'; +import { AddRangeSlider, AddToggle, AddCheckbox } from '../website/utils.js'; import { CalculatePopupPositionToElementTopLeft } from './dialogs.js'; import { FeatureSet } from './featureset.js'; import { PopupDialog } from './dialog.js'; diff --git a/source/website/utils.js b/source/website/utils.js index 5589dc6..1b109fa 100644 --- a/source/website/utils.js +++ b/source/website/utils.js @@ -264,3 +264,103 @@ export function GetFilesFromDataTransfer (dataTransfer, onReady) onReady (dataTransfer.files); } } + +export function AddCheckbox (parentElement, id, text, isChecked, onChange) +{ + let label = AddDomElement (parentElement, 'label'); + label.setAttribute ('for', id); + let check = AddDomElement (label, 'input', 'ov_checkbox'); + check.setAttribute ('type', 'checkbox'); + check.setAttribute ('id', id); + check.checked = isChecked; + AddDomElement (label, 'span', null, text); + if (onChange) { + check.addEventListener ('change', onChange); + } + return check; +} + +export function AddRadioButton (parentElement, id, name, text, isChecked, onChange) +{ + let label = AddDomElement (parentElement, 'label'); + label.setAttribute ('for', id); + let radio = AddDomElement (label, 'input', 'ov_radio_button'); + radio.setAttribute ('type', 'radio'); + radio.setAttribute ('id', id); + radio.setAttribute ('name', name); + radio.checked = isChecked; + AddDomElement (label, 'span', null, text); + if (onChange) { + radio.addEventListener ('change', onChange); + } + return radio; +} + +export function AddRangeSlider (parentElement, min, max) +{ + let slider = AddDomElement (parentElement, 'input', 'ov_slider'); + slider.setAttribute ('type', 'range'); + slider.setAttribute ('min', min.toString ()); + slider.setAttribute ('max', max.toString ()); + return slider; +} + +export function AddSelect (parentElement, options, selectedIndex, onChange) +{ + let container = AddDiv (parentElement, 'ov_select_container'); + let select = AddDomElement (container, 'select', 'ov_select'); + for (let option of options) { + AddDomElement (select, 'option', null, option); + } + select.selectedIndex = selectedIndex; + if (onChange) { + select.addEventListener ('change', () => { + onChange (select.selectedIndex); + }); + } + return select; +} + +export function AddToggle (parentElement, className) +{ + function UpdateStatus (toggle, status) + { + if (status) { + toggle.classList.add ('on'); + } else { + toggle.classList.remove ('on'); + } + } + + let status = false; + let onChange = null; + + let toggleClassName = 'ov_toggle'; + if (className) { + toggleClassName += ' ' + className; + } + let toggle = AddDiv (parentElement, toggleClassName); + AddDiv (toggle, 'ov_toggle_slider'); + + toggle.addEventListener ('click', () => { + status = !status; + UpdateStatus (toggle, status); + if (onChange) { + onChange (); + } + }); + + return { + element : toggle, + GetStatus : () => { + return status; + }, + SetStatus : (newStatus) => { + status = newStatus; + UpdateStatus (toggle, status); + }, + OnChange : (onChangeHandler) => { + onChange = onChangeHandler; + } + }; +}