From d43477d726c4bec08432a119c6cee91b1d0f90ba Mon Sep 17 00:00:00 2001 From: Viktor Kovacs Date: Fri, 2 Apr 2021 18:52:00 +0200 Subject: [PATCH] Self-hosted viewers should detect size automatically based on the size of the container div #43 Now the viewer's size is based on the parent container's size (not the width and height attribute) so it's possible to style the parent container with css and even use it in fullscreen. --- source/viewer/domviewer.js | 26 ++++-- tools/sandbox/embed_selfhost.html | 53 ----------- tools/sandbox/embed_selfhost2.html | 25 ----- tools/sandbox/embed_selfhost_fullscreen.html | 80 ++++++++++++++++ tools/sandbox/embed_selfhost_multiple.html | 98 ++++++++++++++++++++ tools/sandbox/embed_selfhost_single.html | 69 ++++++++++++++ tools/update_includes.py | 20 +++- 7 files changed, 285 insertions(+), 86 deletions(-) delete mode 100644 tools/sandbox/embed_selfhost.html delete mode 100644 tools/sandbox/embed_selfhost2.html create mode 100644 tools/sandbox/embed_selfhost_fullscreen.html create mode 100644 tools/sandbox/embed_selfhost_multiple.html create mode 100644 tools/sandbox/embed_selfhost_single.html diff --git a/source/viewer/domviewer.js b/source/viewer/domviewer.js index 94a8bd6..32c60ee 100644 --- a/source/viewer/domviewer.js +++ b/source/viewer/domviewer.js @@ -22,10 +22,9 @@ OV.Init3DViewerElements = function () let viewer = new OV.Viewer (); viewer.Init (canvas); - let width = parseInt (element.getAttribute ('width')); - let height = parseInt (element.getAttribute ('height')); - element.style.width = width + 'px'; - element.style.height = height + 'px'; + let width = element.clientWidth; + let height = element.clientHeight; + console.log (element.clientHeight); viewer.Resize (width, height); let loader = new OV.ThreeModelLoader (); @@ -45,7 +44,7 @@ OV.Init3DViewerElements = function () }, onModelFinished : function (importResult, threeMeshes) { element.removeChild (progressDiv); - canvas.style.display = 'initial'; + canvas.style.display = 'inherit'; viewer.AddMeshes (threeMeshes); let boundingSphere = viewer.GetBoundingSphere (function (meshUserData) { return true; @@ -73,13 +72,28 @@ OV.Init3DViewerElements = function () } loader.LoadFromUrlList (modelUrls); + return { + element: element, + viewer: viewer + }; } + let viewerElements = []; window.addEventListener ('load', function () { let elements = document.getElementsByClassName ('online_3d_viewer'); for (let i = 0; i < elements.length; i++) { let element = elements[i]; - LoadElement (element); + let viewerElement = LoadElement (element); + viewerElements.push (viewerElement); + } + }); + + window.addEventListener ('resize', function () { + for (let i = 0; i < viewerElements.length; i++) { + let viewerElement = viewerElements[i]; + let width = viewerElement.element.clientWidth; + let height = viewerElement.element.clientHeight; + viewerElement.viewer.Resize (width, height); } }); }; diff --git a/tools/sandbox/embed_selfhost.html b/tools/sandbox/embed_selfhost.html deleted file mode 100644 index f063df0..0000000 --- a/tools/sandbox/embed_selfhost.html +++ /dev/null @@ -1,53 +0,0 @@ - - - - - - - - - Online 3D Viewer - - - - - - - - - - -
-
-
-
-
-
-
-
-
-
- - - diff --git a/tools/sandbox/embed_selfhost2.html b/tools/sandbox/embed_selfhost2.html deleted file mode 100644 index a59f9a2..0000000 --- a/tools/sandbox/embed_selfhost2.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - Online 3D Viewer - - - - - - - -
-
- - - diff --git a/tools/sandbox/embed_selfhost_fullscreen.html b/tools/sandbox/embed_selfhost_fullscreen.html new file mode 100644 index 0000000..a0c9465 --- /dev/null +++ b/tools/sandbox/embed_selfhost_fullscreen.html @@ -0,0 +1,80 @@ + + + + + + + + Online 3D Viewer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + diff --git a/tools/sandbox/embed_selfhost_multiple.html b/tools/sandbox/embed_selfhost_multiple.html new file mode 100644 index 0000000..447fa32 --- /dev/null +++ b/tools/sandbox/embed_selfhost_multiple.html @@ -0,0 +1,98 @@ + + + + + + + + + Online 3D Viewer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ + + diff --git a/tools/sandbox/embed_selfhost_single.html b/tools/sandbox/embed_selfhost_single.html new file mode 100644 index 0000000..19ad383 --- /dev/null +++ b/tools/sandbox/embed_selfhost_single.html @@ -0,0 +1,69 @@ + + + + + + + + Online 3D Viewer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + diff --git a/tools/update_includes.py b/tools/update_includes.py index 3288d41..166c793 100644 --- a/tools/update_includes.py +++ b/tools/update_includes.py @@ -19,8 +19,12 @@ def Main (argv): config = json.load (configJson) rootDir = os.path.abspath ('..') - for htmlFileName in ['index.html', 'embed.html']: - htmlFilePath = os.path.join (rootDir, 'website', htmlFileName) + websiteFiles = [ + os.path.join ('website', 'index.html'), + os.path.join ('website', 'embed.html') + ] + for htmlFileName in websiteFiles: + htmlFilePath = os.path.join (rootDir, htmlFileName) replacer = Tools.TokenReplacer (htmlFilePath, True) libFiles = Tools.CreateFileList (config['lib_files'], 'libs/', '../libs/') importerFiles = Tools.CreateFileList (config['importer_files'], 'source/', '../source/') @@ -29,6 +33,18 @@ def Main (argv): replacer.ReplaceTokenFileLinks ('', '', importerFiles, None) replacer.ReplaceTokenFileLinks ('', '', websiteFiles, None) replacer.WriteToFile (htmlFilePath) + + sandboxFiles = [ + os.path.join ('tools', 'sandbox', 'embed_selfhost_single.html'), + os.path.join ('tools', 'sandbox', 'embed_selfhost_multiple.html'), + os.path.join ('tools', 'sandbox', 'embed_selfhost_fullscreen.html') + ] + for htmlFileName in sandboxFiles: + htmlFilePath = os.path.join (rootDir, htmlFileName) + replacer = Tools.TokenReplacer (htmlFilePath, True) + importerFiles = Tools.CreateFileList (config['importer_files'], 'source/', '../../source/') + replacer.ReplaceTokenFileLinks ('', '', importerFiles, None) + replacer.WriteToFile (htmlFilePath) return 0