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

Feature toggle for grid display.

Browse Source
This commit is contained in:
kovacsv 2021-12-23 15:18:47 +01:00
parent 876cfc399b
commit aaf6a242c0
6 changed files with 121 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
source/viewer/viewer.js
View File

@ -323,9 +323,24 @@ OV.ViewerGrid = class
{
this.scene = scene;
this.mainObject = null;
this.gridSettings = {
showGrid : false,
direction : OV.Direction.Y,
cellSize : 1.0
};
}
AddGridLines (boundingBox, cellSize)
IsGridVisible ()
{
return this.gridSettings.showGrid;
}
SetGridSettings (show)
{
this.gridSettings.showGrid = show;
}
UpdateGridLines (boundingBox)
{
function CreateLine (from, to, material)
{
@ -335,20 +350,29 @@ OV.ViewerGrid = class
return line;
}
this.RemoveGridLines ();
this.ClearGridLines ();
if (boundingBox === null) {
return;
}
if (!this.gridSettings.showGrid) {
return;
}
this.mainObject = new THREE.Object3D ();
const material = new THREE.LineBasicMaterial({
color: 0xcccccc
});
// TODO: direction handling
let boundingBoxSize = new THREE.Vector3 ();
boundingBox.getSize (boundingBoxSize);
let expandSize = boundingBoxSize.y * 0.5;
let expandSize = 1.0;
let minValue = new THREE.Vector2 (boundingBox.min.z - expandSize, boundingBox.min.x - expandSize);
let maxValue = new THREE.Vector2 (boundingBox.max.z + expandSize, boundingBox.max.x + expandSize);
let cellSize = this.gridSettings.cellSize;
let alignedMinValue = new THREE.Vector2 (
Math.floor (minValue.x / cellSize) * cellSize,
Math.floor (minValue.y / cellSize) * cellSize
@ -358,21 +382,25 @@ OV.ViewerGrid = class
Math.ceil (maxValue.y / cellSize) * cellSize
);
let level = boundingBox.min.y;
let level = 0.0;
let cellCountX = Math.ceil ((alignedMaxValue.x - alignedMinValue.x) / cellSize);
let cellCountY = Math.ceil ((alignedMaxValue.y - alignedMinValue.y) / cellSize);
for (let step = 0; step < cellCountX + 1; step++) {
let lineDist = alignedMinValue.x + step * cellSize;
this.mainObject.add (CreateLine (new THREE.Vector3 (alignedMinValue.y, level, lineDist), new THREE.Vector3 (alignedMaxValue.y, level, lineDist), material));
let beg = new THREE.Vector3 (alignedMinValue.y, level, lineDist);
let end = new THREE.Vector3 (alignedMaxValue.y, level, lineDist);
this.mainObject.add (CreateLine (beg, end, material));
}
for (let step = 0; step < cellCountY + 1; step++) {
let lineDist = alignedMinValue.y + step * cellSize;
this.mainObject.add (CreateLine (new THREE.Vector3 (lineDist, level, alignedMinValue.x), new THREE.Vector3 (lineDist, level, alignedMaxValue.x), material));
let beg = new THREE.Vector3 (lineDist, level, alignedMinValue.x);
let end = new THREE.Vector3 (lineDist, level, alignedMaxValue.x);
this.mainObject.add (CreateLine (beg, end, material));
}
this.scene.add (this.mainObject);
}
RemoveGridLines ()
ClearGridLines ()
{
if (this.mainObject !== null) {
this.scene.remove (this.mainObject);
@ -516,6 +544,13 @@ OV.Viewer = class
this.Render ();
}
SetGridSettings (show)
{
this.grid.SetGridSettings (show);
this.UpdateGridLines ();
this.Render ();
}
SetEdgeSettings (show, color, threshold)
{
this.geometry.SetEdgeSettings (show, color, threshold);
@ -646,12 +681,7 @@ OV.Viewer = class
const shadingType = OV.GetShadingTypeOfObject (object);
this.geometry.SetMainObject (object);
this.shading.SetType (shadingType);
// let boundingBox = this.GetBoundingBox ((meshUserData) => {
// return true;
// });
// let cellSize = 1.0;
// this.grid.AddGridLines (boundingBox, cellSize);
this.UpdateGridLines ();
this.Render ();
}
@ -662,6 +692,19 @@ OV.Viewer = class
this.Render ();
}
UpdateGridLines ()
{
this.grid.ClearGridLines ();
if (!this.grid.IsGridVisible ()) {
return;
}
let boundingBox = this.GetBoundingBox ((meshUserData) => {
return true;
});
this.grid.UpdateGridLines (boundingBox);
}
Clear ()
{
this.geometry.Clear ();

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

@ -1,4 +1,5 @@
OV.FeatureSet =
{
ShowGrid : false,
MeasureTool : false
};

3
website/o3dv/js/settings.js
View File

@ -9,6 +9,7 @@ OV.Settings = class
{
this.backgroundColor = new OV.Color (255, 255, 255);
this.defaultColor = new OV.Color (200, 200, 200);
this.showGrid = false;
this.showEdges = false;
this.edgeColor = new OV.Color (0, 0, 0);
this.edgeThreshold = 1;
@ -19,6 +20,7 @@ OV.Settings = class
{
this.backgroundColor = cookieHandler.GetColorVal ('ov_background_color', new OV.Color (255, 255, 255));
this.defaultColor = cookieHandler.GetColorVal ('ov_default_color', new OV.Color (200, 200, 200));
this.showGrid = cookieHandler.GetBoolVal ('ov_show_grid', false);
this.showEdges = cookieHandler.GetBoolVal ('ov_show_edges', false);
this.edgeColor = cookieHandler.GetColorVal ('ov_edge_color', new OV.Color (0, 0, 0));
this.edgeThreshold = cookieHandler.GetIntVal ('ov_edge_threshold', 1);
@ -30,6 +32,7 @@ OV.Settings = class
{
cookieHandler.SetColorVal ('ov_background_color', this.backgroundColor);
cookieHandler.SetColorVal ('ov_default_color', this.defaultColor);
cookieHandler.SetBoolVal ('ov_show_grid', this.showGrid);
cookieHandler.SetBoolVal ('ov_show_edges', this.showEdges);
cookieHandler.SetColorVal ('ov_edge_color', this.edgeColor);
cookieHandler.SetIntVal ('ov_edge_threshold', this.edgeThreshold);

3
website/o3dv/js/sidebar.js
View File

@ -49,6 +49,9 @@ OV.Sidebar = class
onDefaultColorChange : () => {
this.callbacks.onDefaultColorChange ();
},
onGridDisplayChange : () => {
this.callbacks.onGridDisplayChange ();
},
onEdgeDisplayChange : () => {
this.callbacks.onEdgeDisplayChange ();
},

48
website/o3dv/js/sidebarsettingspanel.js
View File

@ -78,6 +78,36 @@ OV.SettingsColorSection = class
}
};
OV.SettingsGridDisplaySection = class
{
constructor (parentDiv)
{
this.parentDiv = parentDiv;
this.gridDisplayToggle = null;
}
Init (showGrid, onChange)
{
let contentDiv = OV.AddDiv (this.parentDiv, 'ov_sidebar_settings_content');
let titleDiv = OV.AddDiv (contentDiv, 'ov_sidebar_subtitle');
this.showGridToggle = OV.AddToggle (titleDiv, 'ov_sidebar_subtitle_toggle');
this.showGridToggle.OnChange (() => {
onChange (this.showGridToggle.GetStatus ());
});
OV.AddDiv (titleDiv, 'ov_sidebar_subtitle_text', 'Show Grid');
this.showGridToggle.SetStatus (showGrid);
}
Update (showGrid)
{
if (this.showGridToggle === null) {
return;
}
this.showGridToggle.SetStatus (showGrid);
}
};
OV.SettingsEdgeDisplaySection = class
{
constructor (parentDiv)
@ -201,6 +231,10 @@ OV.SidebarSettingsPanel = class extends OV.SidebarPanel
this.sectionsDiv = OV.AddDiv (this.contentDiv, 'ov_sidebar_settings_sections ov_thin_scrollbar');
this.backgroundColorSection = new OV.SettingsColorSection (this.sectionsDiv);
this.defaultColorSection = new OV.SettingsColorSection (this.sectionsDiv);
this.gridDisplaySection = null;
if (OV.FeatureSet.ShowGrid) {
this.gridDisplaySection = new OV.SettingsGridDisplaySection (this.sectionsDiv);
}
this.edgeDisplaySection = new OV.SettingsEdgeDisplaySection (this.sectionsDiv);
this.themeSection = new OV.SettingsThemeSection (this.sectionsDiv);
@ -248,6 +282,12 @@ OV.SidebarSettingsPanel = class extends OV.SidebarPanel
this.SetDefaultColor (newColor, false);
}
);
if (this.gridDisplaySection !== null) {
this.gridDisplaySection.Init (this.settings.showGrid, (showGrid) => {
this.settings.showGrid = showGrid;
callbacks.onGridDisplayChange ();
});
}
this.edgeDisplaySection.Init (
this.settings.showEdges,
this.settings.edgeColor,
@ -312,6 +352,7 @@ OV.SidebarSettingsPanel = class extends OV.SidebarPanel
this.settings.backgroundColor = defaultSettings.backgroundColor;
this.settings.defaultColor = defaultSettings.defaultColor;
this.settings.showGrid = defaultSettings.showGrid;
this.settings.showEdges = defaultSettings.showEdges;
this.settings.edgeColor = defaultSettings.edgeColor;
this.settings.edgeThreshold = defaultSettings.edgeThreshold;
@ -319,8 +360,15 @@ OV.SidebarSettingsPanel = class extends OV.SidebarPanel
this.backgroundColorSection.Update (defaultSettings.backgroundColor);
this.defaultColorSection.Update (defaultSettings.defaultColor);
if (this.gridDisplaySection !== null) {
this.gridDisplaySection.Update (defaultSettings.showGrid);
}
this.edgeDisplaySection.Update (defaultSettings.showEdges, defaultSettings.edgeColor, defaultSettings.edgeThreshold);
this.themeSection.Update (defaultSettings.themeId);
if (this.gridDisplaySection !== null) {
this.callbacks.onGridDisplayChange ();
}
this.callbacks.onThemeChange ();
}

10
website/o3dv/js/website.js
View File

@ -405,6 +405,12 @@ OV.Website = class
}
}
UpdateGridDisplay ()
{
this.settings.SaveToCookies (this.cookieHandler);
this.viewer.SetGridSettings (this.settings.showGrid);
}
UpdateEdgeDisplay ()
{
this.settings.SaveToCookies (this.cookieHandler);
@ -431,6 +437,7 @@ OV.Website = class
{
let canvas = OV.AddDomElement (this.parameters.viewerDiv, 'canvas');
this.viewer.Init (canvas);
this.viewer.SetGridSettings (this.settings.showGrid);
this.viewer.SetEdgeSettings (this.settings.showEdges, this.settings.edgeColor, this.settings.edgeThreshold);
this.viewer.SetBackgroundColor (this.settings.backgroundColor);
this.viewer.SetEnvironmentMap ([
@ -588,6 +595,9 @@ OV.Website = class
}
this.viewer.Render ();
},
onGridDisplayChange : () => {
this.UpdateGridDisplay ();
},
onEdgeDisplayChange : () => {
this.UpdateEdgeDisplay ();
},