From 76ccea789afe2ff45cc23ac9270699e771e29bef Mon Sep 17 00:00:00 2001 From: kovacsv Date: Sun, 6 Mar 2022 19:50:01 +0100 Subject: [PATCH] Add snapshot dialog skeleton. --- source/engine/viewer/domutils.js | 16 +++++ source/website/exportdialog.js | 105 +++++++++++++++++++++++++++++-- source/website/website.js | 5 +- website/css/dialogs.css | 15 +++++ 4 files changed, 132 insertions(+), 9 deletions(-) diff --git a/source/engine/viewer/domutils.js b/source/engine/viewer/domutils.js index 74a0807..9c07aa9 100644 --- a/source/engine/viewer/domutils.js +++ b/source/engine/viewer/domutils.js @@ -150,6 +150,22 @@ export function AddCheckbox (parentElement, id, text, isChecked, 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'); diff --git a/source/website/exportdialog.js b/source/website/exportdialog.js index 724faaa..835e1b8 100644 --- a/source/website/exportdialog.js +++ b/source/website/exportdialog.js @@ -5,20 +5,20 @@ 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, AddSelect, ClearDomElement } from '../engine/viewer/domutils.js'; +import { AddDiv, AddRadioButton, AddSelect, CreateDomElement, ClearDomElement } from '../engine/viewer/domutils.js'; import { ShowMessageDialog } from './dialogs.js'; import { ButtonDialog, ProgressDialog } from './dialog.js'; import { DownloadArrayBufferAsFile, DownloadUrlAsFile } from './utils.js'; import { CookieGetStringVal, CookieSetStringVal } from './cookiehandler.js'; import { HandleEvent } from './eventhandler.js'; -export const ExportType = +const ExportType = { Model : 0, Image : 1 }; -export class ExporterUI +class ExporterUI { constructor (name) { @@ -49,7 +49,7 @@ export class ExporterUI } } -export class ModelExporterUI extends ExporterUI +class ModelExporterUI extends ExporterUI { constructor (name, format, extension) { @@ -135,7 +135,7 @@ export class ModelExporterUI extends ExporterUI } } -export class ImageExporterUI extends ExporterUI +class ImageExporterUI extends ExporterUI { constructor (name, extension) { @@ -174,7 +174,7 @@ export class ImageExporterUI extends ExporterUI } } -export class ExportDialog +class ExportDialog { constructor (callbacks) { @@ -257,3 +257,96 @@ export class ExportDialog } } } + +export function ShowExportDialog (model, viewer, callbacks) +{ + let exportDialog = new ExportDialog (callbacks); + exportDialog.Open (model, viewer); +} + +export function ShowSnapshotDialog (viewer) +{ + function AddSizeRadioButton (parentDiv, id, text, isSelected, onChange) + { + let line = AddDiv (parentDiv, 'ov_dialog_row'); + AddRadioButton (line, id, 'snapshot_size', text, isSelected, onChange); + } + + function GetImageUrl (viewer, snapshotSize) + { + if (snapshotSize.size === null) { + let size = viewer.GetImageSize (); + return viewer.GetImageAsDataUrl (size.width, size.height); + } else { + return viewer.GetImageAsDataUrl (snapshotSize.size[0], snapshotSize.size[1]); + } + } + + function UpdatePreview (viewer, previewImage, snapshotSize) + { + let url = GetImageUrl (viewer, snapshotSize); + previewImage.src = url; + } + + let selectedIndex = 0; + let sizes = [ + { + name : 'Current size', + size : null + }, + { + name : '1280 x 720', + size : [1280, 720] + }, + { + name : '1920 x 1080', + size : [1920, 1080] + } + ]; + + let dialog = new ButtonDialog (); + let contentDiv = dialog.Init ('Create Snapshot', [ + { + name : 'Cancel', + subClass : 'outline', + onClick () { + dialog.Close (); + } + }, + { + name : 'Create', + onClick () { + dialog.Close (); + let url = GetImageUrl (viewer, sizes[selectedIndex]); + DownloadUrlAsFile (url, 'model.png'); + } + } + ]); + + let optionsDiv = AddDiv (contentDiv, 'ov_snapshot_dialog_left'); + let previewImage = CreateDomElement ('img', 'ov_snapshot_dialog_preview'); + + let lastSnapshotSizeName = CookieGetStringVal ('ov_last_snapshot_size', sizes[0].name); + for (let i = 0; i < sizes.length; i++) { + if (lastSnapshotSizeName === sizes[i].name) { + selectedIndex = i; + break; + } + } + + for (let i = 0; i < sizes.length; i++) { + let size = sizes[i]; + let selected = (i === selectedIndex); + AddSizeRadioButton (optionsDiv, 'snapshot_' + i.toString (), size.name, selected, () => { + selectedIndex = i; + CookieSetStringVal ('ov_last_snapshot_size', size.name); + UpdatePreview (viewer, previewImage, size); + }); + } + + contentDiv.appendChild (previewImage); + UpdatePreview (viewer, previewImage, sizes[selectedIndex]); + + dialog.Open (); + return dialog; +} diff --git a/source/website/website.js b/source/website/website.js index 9a544c6..ef6d60f 100644 --- a/source/website/website.js +++ b/source/website/website.js @@ -11,7 +11,7 @@ import { Sidebar } from './sidebar.js'; import { ThemeHandler } from './themehandler.js'; import { ThreeModelLoaderUI } from './threemodelloaderui.js'; import { Toolbar } from './toolbar.js'; -import { ExportDialog } from './exportdialog.js'; +import { ShowExportDialog } from './exportdialog.js'; import { AddSmallWidthChangeEventListener, GetFilesFromDataTransfer, IsSmallWidth } from './utils.js'; import { ShowOpenUrlDialog } from './openurldialog.js'; import { ShowSharingDialog } from './sharingdialog.js'; @@ -566,12 +566,11 @@ export class Website this.measureTool.SetButton (measureToolButton); AddSeparator (this.toolbar, ['only_full_width', 'only_on_model']); AddButton (this.toolbar, 'export', 'Export model', ['only_full_width', 'only_on_model'], () => { - let exportDialog = new ExportDialog ({ + ShowExportDialog (this.model, this.viewer, { isMeshVisible : (meshInstanceId) => { return this.navigator.IsMeshVisible (meshInstanceId); } }); - exportDialog.Open (this.model, this.viewer); }); AddButton (this.toolbar, 'share', 'Share model', ['only_full_width', 'only_on_model'], () => { ShowSharingDialog (importer.GetFileList (), this.settings, this.viewer.GetCamera ()); diff --git a/website/css/dialogs.css b/website/css/dialogs.css index 3082928..9bb5a6d 100644 --- a/website/css/dialogs.css +++ b/website/css/dialogs.css @@ -249,6 +249,21 @@ div.ov_progress div.ov_progress_text text-align: center; } +div.ov_snapshot_dialog_left +{ + width: 140px; + float: left; +} + +img.ov_snapshot_dialog_preview +{ + background: var(--ov_border_color); + width: 250px; + height: 140px; + object-fit: contain; + float: right; +} + @media (hover) {