Add snapshot dialog skeleton.

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');

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;
+}

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 ());

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)
 {