Doni/ModelHandle
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Splitter for resizing the navigator.

Browse Source
This commit is contained in:
kovacsv 2021-10-28 17:03:22 +02:00
parent cc5429d4c4
commit 0fba20ded8
9 changed files with 86 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
tools/config.json
View File

@ -76,6 +76,7 @@
"website/o3dv/js/settings.js",
"website/o3dv/js/toolbar.js",
"website/o3dv/js/treeview.js",
"website/o3dv/js/splitter.js",
"website/o3dv/js/modal.js",
"website/o3dv/js/dialogs.js",
"website/o3dv/js/openurldialog.js",

1
website/embed.html
View File

@ -98,6 +98,7 @@
<script type="text/javascript" src="o3dv/js/settings.js"></script>
<script type="text/javascript" src="o3dv/js/toolbar.js"></script>
<script type="text/javascript" src="o3dv/js/treeview.js"></script>
<script type="text/javascript" src="o3dv/js/splitter.js"></script>
<script type="text/javascript" src="o3dv/js/modal.js"></script>
<script type="text/javascript" src="o3dv/js/dialogs.js"></script>
<script type="text/javascript" src="o3dv/js/openurldialog.js"></script>

8
website/index.html
View File

@ -14,7 +14,7 @@
<script type="text/javascript" src="../libs/pickr.es5.min-1.8.2.js"></script>
<script type="text/javascript" src="../libs/three.min-129.js"></script>
<!-- libs end -->
<!-- meta start -->
<!-- meta end -->
@ -81,7 +81,7 @@
<script type="text/javascript" src="../source/viewer/viewer.js"></script>
<script type="text/javascript" src="../source/viewer/domviewer.js"></script>
<!-- engine end -->
<!-- website start -->
<link rel="stylesheet" type="text/css" href="o3dv/css/icons.css">
<link rel="stylesheet" type="text/css" href="o3dv/css/themes.css">
@ -98,6 +98,7 @@
<script type="text/javascript" src="o3dv/js/settings.js"></script>
<script type="text/javascript" src="o3dv/js/toolbar.js"></script>
<script type="text/javascript" src="o3dv/js/treeview.js"></script>
<script type="text/javascript" src="o3dv/js/splitter.js"></script>
<script type="text/javascript" src="o3dv/js/modal.js"></script>
<script type="text/javascript" src="o3dv/js/dialogs.js"></script>
<script type="text/javascript" src="o3dv/js/openurldialog.js"></script>
@ -134,6 +135,7 @@
mainDiv : $('#main'),
introDiv : $('#intro'),
navigatorDiv : $('#main_navigator'),
navigatorSplitterDiv : $('#main_navigator_splitter'),
sidebarDiv : $('#main_sidebar'),
viewerDiv : $('#main_viewer'),
fileInput : $('#open_file'),
@ -165,6 +167,8 @@
<div class="main" id="main">
<div class="main_navigator only_full_width" id="main_navigator">
</div>
<div class="main_navigator_splitter only_full_width" id="main_navigator_splitter">
</div>
<div class="main_viewer" id="main_viewer">
</div>
<div class="main_sidebar only_full_width" id="main_sidebar">

4
website/o3dv/css/core.css
View File

@ -48,7 +48,7 @@ a:hover
}
@media only screen and (max-width: 700px)
@media only screen and (max-width: 800px)
{
.only_full_width
@ -58,7 +58,7 @@ a:hover
}
@media only screen and (max-height: 700px)
@media only screen and (max-height: 800px)
{
.only_full_height

14
website/o3dv/css/website.css
View File

@ -109,6 +109,14 @@ div.main_navigator
float: left;
}
div.main_navigator_splitter
{
width: 10px;
overflow: none;
float: left;
cursor: col-resize;
}
div.main_viewer
{
float: left;
@ -124,7 +132,7 @@ div.main_sidebar
div.main_viewer canvas
{
margin: 10px;
margin: 10px 10px 10px 0px;
border: 1px solid var(--ov_border_color);
outline: none;
display: block;
@ -316,7 +324,7 @@ div.ov_property_table div.ov_property_table_row.group
padding: 4px 0px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
overflow: hidden;
}
div.ov_property_table div.ov_property_table_row.ingroup
@ -378,7 +386,7 @@ div.ov_navigator_info_panel div.ov_navigator_info_button:hover
}
@media only screen and (max-width: 700px)
@media only screen and (max-width: 800px)
{
div.intro div.intro_section

2
website/o3dv/js/featureset.js
View File

@ -1,4 +1,4 @@
OV.FeatureSet =
{
NavigatorTree : false
NavigatorTree : true
};

43
website/o3dv/js/splitter.js Normal file
View File

@ -0,0 +1,43 @@
OV.VerticalSplitter = class
{
constructor (splitterDiv, callbacks)
{
this.callbacks = callbacks;
this.mouseMoveHandler = (ev) => {
this.OnMouseMove (ev);
};
this.mouseUpHandler = () => {
this.OnMouseUp ();
};
splitterDiv.mousedown ((ev) => {
this.OnMouseDown (ev);
});
this.originalPosition = null;
}
OnMouseDown (ev)
{
this.originalPosition = ev.clientX;
this.callbacks.onSplitStart ();
document.addEventListener ('mousemove', this.mouseMoveHandler);
document.addEventListener ('mouseup', this.mouseUpHandler);
document.addEventListener ('mouseleave', this.mouseUpHandler);
}
OnMouseMove (ev)
{
ev.preventDefault ();
const diff = ev.clientX - this.originalPosition;
this.callbacks.onSplit (diff);
}
OnMouseUp ()
{
document.removeEventListener ('mousemove', this.mouseMoveHandler);
document.removeEventListener ('mouseup', this.mouseUpHandler);
document.removeEventListener ('mouseleave', this.mouseUpHandler);
this.originalPosition = null;
}
};

4
website/o3dv/js/utils.js
View File

@ -28,12 +28,12 @@ OV.IsHoverEnabled = function ()
OV.IsSmallWidth = function ()
{
return window.matchMedia ('(max-width: 700px)').matches;
return window.matchMedia ('(max-width: 800px)').matches;
};
OV.IsSmallHeight = function ()
{
return window.matchMedia ('(max-height: 700px)').matches;
return window.matchMedia ('(max-height: 800px)').matches;
};
OV.InstallTooltip = function (item, text)

20
website/o3dv/js/website.js
View File

@ -24,6 +24,7 @@ OV.Website = class
side : THREE.DoubleSide
});
this.themeHandler = new OV.ThemeHandler ();
this.navigatorSplitter = null;
this.detailsPanel = null;
this.settingsPanel = null;
this.model = null;
@ -65,7 +66,8 @@ OV.Website = class
let sidebarWidth = 0;
let safetyMargin = 0;
if (!OV.IsSmallWidth ()) {
navigatorWidth = parseInt (this.parameters.navigatorDiv.outerWidth (true), 10);
let navigatorSplitterWidth = parseInt (this.parameters.navigatorSplitterDiv.outerWidth (true), 10);
navigatorWidth = parseInt (this.parameters.navigatorDiv.outerWidth (true), 10) + navigatorSplitterWidth;
if (this.sidebar.IsVisible ()) {
sidebarWidth = parseInt (this.parameters.sidebarDiv.outerWidth (true), 10);
}
@ -76,6 +78,7 @@ OV.Website = class
let contentHeight = windowHeight - headerHeight - safetyMargin;
this.parameters.navigatorDiv.outerHeight (contentHeight, true);
this.parameters.navigatorSplitterDiv.outerHeight (contentHeight, true);
this.parameters.sidebarDiv.outerHeight (contentHeight, true);
this.parameters.introDiv.outerHeight (contentHeight, true);
@ -671,6 +674,21 @@ OV.Website = class
return usedMaterials;
}
let navigatorOriginalWidth = null;
this.navigatorSplitter = new OV.VerticalSplitter (this.parameters.navigatorSplitterDiv, {
onSplitStart : () => {
navigatorOriginalWidth = this.parameters.navigatorDiv.outerWidth (true);
},
onSplit : (xDiff) => {
const newWidth = navigatorOriginalWidth + xDiff;
if (newWidth < 250 || newWidth > 450) {
return;
}
this.parameters.navigatorDiv.outerWidth (newWidth, true);
this.Resize ();
}
});
this.navigator.Init ({
openFileBrowserDialog : () => {
this.OpenFileBrowserDialog ();