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

Create class for edge settings.

Browse Source
This commit is contained in:
kovacsv 2022-12-31 12:20:27 +01:00
parent f83e28cd88
commit c39a63bc1c
16 changed files with 73 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
sandbox/embed_selfhost_calculate.html
View File

@ -36,11 +36,7 @@
let viewer = new OV.EmbeddedViewer (parentDiv, {
backgroundColor : new OV.RGBAColor (255, 255, 255, 255),
defaultColor : new OV.RGBColor (200, 200, 200),
edgeSettings : {
showEdges : false,
edgeColor : new OV.RGBColor (0, 0, 0),
edgeThreshold : 1
},
edgeSettings : new OV.EdgeSettings (false, new OV.RGBColor (0, 0, 0), 1),
environmentSettings : {
environmentMap : [
'../website/assets/envmaps/fishermans_bastion/posx.jpg',

6
sandbox/embed_selfhost_code_file.html
View File

@ -28,11 +28,7 @@
let viewer = new OV.EmbeddedViewer (parentDiv, {
backgroundColor : new OV.RGBAColor (255, 255, 255, 255),
defaultColor : new OV.RGBColor (200, 200, 200),
edgeSettings : {
showEdges : false,
edgeColor : new OV.RGBColor (0, 0, 0),
edgeThreshold : 1
},
edgeSettings : new OV.EdgeSettings (false, new OV.RGBColor (0, 0, 0), 1),
environmentSettings : {
environmentMap : [
'../website/assets/envmaps/fishermans_bastion/posx.jpg',

6
sandbox/embed_selfhost_code_url.html
View File

@ -34,11 +34,7 @@
),
backgroundColor : new OV.RGBAColor (255, 255, 255, 255),
defaultColor : new OV.RGBColor (200, 200, 200),
edgeSettings : {
showEdges : false,
edgeColor : new OV.RGBColor (0, 0, 0),
edgeThreshold : 1
},
edgeSettings : new OV.EdgeSettings (false, new OV.RGBColor (0, 0, 0), 1),
environmentSettings : {
environmentMap : [
'../website/assets/envmaps/fishermans_bastion/posx.jpg',

6
sandbox/embed_selfhost_memory_test.html
View File

@ -35,11 +35,7 @@
),
backgroundColor : new OV.RGBAColor (255, 255, 255, 255),
defaultColor : new OV.RGBColor (200, 200, 200),
edgeSettings : {
showEdges : false,
edgeColor : new OV.RGBColor (0, 0, 0),
edgeThreshold : 1
},
edgeSettings : new OV.EdgeSettings (false, new OV.RGBColor (0, 0, 0), 1),
environmentSettings : {
environmentMap : [
'../website/assets/envmaps/fishermans_bastion/posx.jpg',

3
source/engine/main.js
View File

@ -69,7 +69,7 @@ import { GetIntegerFromStyle, GetDomElementExternalWidth, GetDomElementExternalH
import { EmbeddedViewer, Init3DViewerElement, Init3DViewerElements } from './viewer/embeddedviewer.js';
import { MouseInteraction, TouchInteraction, ClickDetector, Navigation, NavigationType } from './viewer/navigation.js';
import { CameraValidator, UpVector, ShadingModel, Viewer, GetDefaultCamera, TraverseThreeObject, GetShadingTypeOfObject, CameraMode } from './viewer/viewer.js';
import { ViewerModel, ViewerMainModel, SetThreeMeshPolygonOffset } from './viewer/viewermodel.js';
import { ViewerModel, EdgeSettings, ViewerMainModel, SetThreeMeshPolygonOffset } from './viewer/viewermodel.js';
export {
IsDefined,
@ -326,6 +326,7 @@ export {
GetShadingTypeOfObject,
CameraMode,
ViewerModel,
EdgeSettings,
ViewerMainModel,
SetThreeMeshPolygonOffset
};

11
source/engine/parameters/parameterlist.js
View File

@ -2,6 +2,7 @@ import { Coord3D } from '../geometry/coord3d.js';
import { RGBAColor, RGBColor } from '../model/color.js';
import { Camera } from '../viewer/camera.js';
import { CameraMode } from '../viewer/viewer.js';
import { EdgeSettings } from '../viewer/viewermodel.js';
export let ParameterConverter =
{
@ -212,15 +213,15 @@ export let ParameterConverter =
if (paramParts.length !== 5) {
return null;
}
let edgeSettings = {
showEdges : paramParts[0] === 'on' ? true : false,
edgeColor : new RGBColor (
let edgeSettings = new EdgeSettings (
paramParts[0] === 'on' ? true : false,
new RGBColor (
this.StringToInteger (paramParts[1]),
this.StringToInteger (paramParts[2]),
this.StringToInteger (paramParts[3])
),
edgeThreshold : this.StringToInteger (paramParts[4])
};
this.StringToInteger (paramParts[4])
);
return edgeSettings;
}
};

6
source/engine/viewer/embeddedviewer.js
View File

@ -36,11 +36,7 @@ export class EmbeddedViewer
}
if (this.parameters.edgeSettings) {
this.viewer.SetEdgeSettings (
this.parameters.edgeSettings.showEdges,
this.parameters.edgeSettings.edgeColor,
this.parameters.edgeSettings.edgeThreshold
);
this.viewer.SetEdgeSettings (this.parameters.edgeSettings);
}
if (this.parameters.environmentSettings) {

5
source/engine/viewer/viewer.js
View File

@ -328,9 +328,10 @@ export class Viewer
this.Render ();
}
SetEdgeSettings (show, color, threshold)
SetEdgeSettings (edgeSettings)
{
this.mainModel.SetEdgeSettings (show, color, threshold);
let newEdgeSettings = edgeSettings.Clone ();
this.mainModel.SetEdgeSettings (newEdgeSettings);
this.Render ();
}

30
source/engine/viewer/viewermodel.js
View File

@ -81,6 +81,21 @@ export class ViewerModel
}
}
export class EdgeSettings
{
constructor (showEdges, edgeColor, edgeThreshold)
{
this.showEdges = showEdges;
this.edgeColor = edgeColor;
this.edgeThreshold = edgeThreshold;
}
Clone ()
{
return new EdgeSettings (this.showEdges, this.edgeColor.Clone (), this.edgeThreshold);
}
}
export class ViewerMainModel
{
constructor (scene)
@ -90,11 +105,7 @@ export class ViewerMainModel
this.mainModel = new ViewerModel (this.scene);
this.edgeModel = new ViewerModel (this.scene);
this.edgeSettings = {
showEdges : false,
edgeColor : new RGBColor (0, 0, 0),
edgeThreshold : 1
};
this.edgeSettings = new EdgeSettings (false, new RGBColor (0, 0, 0), 1);
}
SetMainObject (mainObject)
@ -111,16 +122,14 @@ export class ViewerMainModel
this.edgeModel.UpdateWorldMatrix ();
}
SetEdgeSettings (show, color, threshold)
SetEdgeSettings (edgeSettings)
{
let needToGenerate = false;
if (show && (!this.edgeSettings.showEdges || this.edgeSettings.edgeThreshold !== threshold)) {
if (edgeSettings.showEdges && (!this.edgeSettings.showEdges || this.edgeSettings.edgeThreshold !== edgeSettings.edgeThreshold)) {
needToGenerate = true;
}
this.edgeSettings.showEdges = show;
this.edgeSettings.edgeThreshold = threshold;
this.edgeSettings.edgeColor = color;
this.edgeSettings = edgeSettings;
if (this.mainModel.IsEmpty ()) {
return;
@ -131,7 +140,6 @@ export class ViewerMainModel
this.ClearEdgeModel ();
this.GenerateEdgeModel ();
} else {
let edgeColor = ConvertColorToThreeColor (this.edgeSettings.edgeColor);
this.EnumerateEdges ((edge) => {
edge.material.color = edgeColor;

6
source/website/embed.js
View File

@ -59,11 +59,7 @@ export class Embed
}
let edgeSettings = this.hashHandler.GetEdgeSettingsFromHash ();
if (edgeSettings !== null) {
this.viewer.SetEdgeSettings (
edgeSettings.showEdges,
edgeSettings.edgeColor,
edgeSettings.edgeThreshold
);
this.viewer.SetEdgeSettings (edgeSettings);
}
let settings = new ImportSettings ();
let defaultColor = this.hashHandler.GetDefaultColorFromHash ();

2
source/website/index.js
View File

@ -35,7 +35,7 @@ export function StartWebsite (externalLibLocation)
{
SetExternalLibLocation (externalLibLocation);
window.addEventListener ('load', () => {
let website = new Website ({
let website = new Website ({
headerDiv : document.getElementById ('header'),
headerButtonsDiv : document.getElementById ('header_buttons'),
toolbarDiv : document.getElementById ('toolbar'),

17
source/website/settings.js
View File

@ -1,4 +1,5 @@
import { RGBAColor, RGBColor } from '../engine/model/color.js';
import { EdgeSettings } from '../engine/viewer/viewermodel.js';
import { CookieGetBoolVal, CookieGetRGBColorVal, CookieGetIntVal, CookieGetStringVal, CookieSetBoolVal, CookieSetRGBColorVal, CookieSetIntVal, CookieSetStringVal, CookieSetRGBAColorVal, CookieGetRGBAColorVal } from './cookiehandler.js';
export const Theme =
@ -15,9 +16,7 @@ export class Settings
this.backgroundIsEnvMap = false;
this.backgroundColor = new RGBAColor (255, 255, 255, 255);
this.defaultColor = new RGBColor (200, 200, 200);
this.showEdges = false;
this.edgeColor = new RGBColor (0, 0, 0);
this.edgeThreshold = 1;
this.edgeSettings = new EdgeSettings (false, new RGBColor (0, 0, 0), 1);
this.themeId = Theme.Light;
}
@ -27,9 +26,9 @@ export class Settings
this.backgroundIsEnvMap = CookieGetBoolVal ('ov_background_is_envmap', false);
this.backgroundColor = CookieGetRGBAColorVal ('ov_background_color', new RGBAColor (255, 255, 255, 255));
this.defaultColor = CookieGetRGBColorVal ('ov_default_color', new RGBColor (200, 200, 200));
this.showEdges = CookieGetBoolVal ('ov_show_edges', false);
this.edgeColor = CookieGetRGBColorVal ('ov_edge_color', new RGBColor (0, 0, 0));
this.edgeThreshold = CookieGetIntVal ('ov_edge_threshold', 1);
this.edgeSettings.showEdges = CookieGetBoolVal ('ov_show_edges', false);
this.edgeSettings.edgeColor = CookieGetRGBColorVal ('ov_edge_color', new RGBColor (0, 0, 0));
this.edgeSettings.edgeThreshold = CookieGetIntVal ('ov_edge_threshold', 1);
this.themeId = CookieGetIntVal ('ov_theme_id', Theme.Light);
}
@ -39,9 +38,9 @@ export class Settings
CookieSetBoolVal ('ov_background_is_envmap', this.backgroundIsEnvMap);
CookieSetRGBAColorVal ('ov_background_color', this.backgroundColor);
CookieSetRGBColorVal ('ov_default_color', this.defaultColor);
CookieSetBoolVal ('ov_show_edges', this.showEdges);
CookieSetRGBColorVal ('ov_edge_color', this.edgeColor);
CookieSetIntVal ('ov_edge_threshold', this.edgeThreshold);
CookieSetBoolVal ('ov_show_edges', this.edgeSettings.showEdges);
CookieSetRGBColorVal ('ov_edge_color', this.edgeSettings.edgeColor);
CookieSetIntVal ('ov_edge_threshold', this.edgeSettings.edgeThreshold);
CookieSetIntVal ('ov_theme_id', this.themeId);
}
}

7
source/website/sharingdialog.js
View File

@ -71,12 +71,7 @@ export function ShowSharingDialog (fileList, settings, viewer)
builder.AddEnvironmentSettings (environmentSettings);
builder.AddBackgroundColor (settings.backgroundColor);
builder.AddDefaultColor (settings.defaultColor);
let edgeSettings = {
showEdges : settings.showEdges,
edgeColor : settings.edgeColor,
edgeThreshold : settings.edgeThreshold
};
builder.AddEdgeSettings (edgeSettings);
builder.AddEdgeSettings (settings.edgeSettings);
}
let hashParameters = builder.GetParameterList ();

30
source/website/sidebarsettingspanel.js
View File

@ -264,7 +264,7 @@ class SettingsModelDisplaySection extends SettingsSection
this.edgeSettingsDiv = AddDiv (this.contentDiv, 'ov_sidebar_settings_padded');
this.edgeDisplayToggle.OnChange (() => {
ShowDomElement (this.edgeSettingsDiv, this.edgeDisplayToggle.GetStatus ());
this.settings.showEdges = this.edgeDisplayToggle.GetStatus ();
this.settings.edgeSettings.showEdges = this.edgeDisplayToggle.GetStatus ();
this.callbacks.onShowEdgesChange ();
});
@ -272,9 +272,9 @@ class SettingsModelDisplaySection extends SettingsSection
let predefinedEdgeColors = ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f'];
let edgeColorInput = AddDiv (edgeColorRow, 'ov_color_picker');
let defaultEdgeColor = '#' + RGBColorToHexString (this.settings.edgeColor);
let defaultEdgeColor = '#' + RGBColorToHexString (this.settings.edgeSettings.edgeColor);
this.edgeColorPicker = AddColorPicker (edgeColorInput, false, defaultEdgeColor, predefinedEdgeColors, (r, g, b, a) => {
this.settings.edgeColor = new RGBColor (r, g, b);
this.settings.edgeSettings.edgeColor = new RGBColor (r, g, b);
this.callbacks.onEdgeColorChange ();
});
AddDiv (edgeColorRow, null, 'Edge Color');
@ -287,14 +287,14 @@ class SettingsModelDisplaySection extends SettingsSection
this.thresholdSliderValue.innerHTML = this.thresholdSlider.value;
});
this. thresholdSlider.addEventListener ('change', () => {
this.settings.edgeThreshold = this.thresholdSlider.value;
this.settings.edgeSettings.edgeThreshold = this.thresholdSlider.value;
this.callbacks.onEdgeThresholdChange ();
});
this.thresholdSlider.value = this.settings.edgeThreshold;
this.thresholdSliderValue.innerHTML = this.settings.edgeThreshold;
this.thresholdSlider.value = this.settings.edgeSettings.edgeThreshold;
this.thresholdSliderValue.innerHTML = this.settings.edgeSettings.edgeThreshold;
this.edgeDisplayToggle.SetStatus (this.settings.showEdges);
ShowDomElement (this.edgeSettingsDiv, this.settings.showEdges);
this.edgeDisplayToggle.SetStatus (this.settings.edgeSettings.showEdges);
ShowDomElement (this.edgeSettingsDiv, this.settings.edgeSettings.showEdges);
}
UpdateEnvironmentMap ()
@ -329,12 +329,12 @@ class SettingsModelDisplaySection extends SettingsSection
}
if (this.edgeDisplayToggle !== null) {
this.edgeDisplayToggle.SetStatus (this.settings.showEdges);
ShowDomElement (this.edgeSettingsDiv, this.settings.showEdges);
this.edgeDisplayToggle.SetStatus (this.settings.edgeSettings.showEdges);
ShowDomElement (this.edgeSettingsDiv, this.settings.edgeSettings.showEdges);
this.edgeColorPicker.setColor ('#' + RGBColorToHexString (this.settings.edgeColor));
this.thresholdSlider.value = this.settings.edgeThreshold;
this.thresholdSliderValue.innerHTML = this.settings.edgeThreshold;
this.edgeColorPicker.setColor ('#' + RGBColorToHexString (this.settings.edgeSettings.edgeColor));
this.thresholdSlider.value = this.settings.edgeSettings.edgeThreshold;
this.thresholdSliderValue.innerHTML = this.settings.edgeSettings.edgeThreshold;
}
}
@ -558,9 +558,7 @@ export class SidebarSettingsPanel extends SidebarPanel
this.settings.backgroundIsEnvMap = defaultSettings.backgroundIsEnvMap;
this.settings.backgroundColor = defaultSettings.backgroundColor;
this.settings.defaultColor = defaultSettings.defaultColor;
this.settings.showEdges = defaultSettings.showEdges;
this.settings.edgeColor = defaultSettings.edgeColor;
this.settings.edgeThreshold = defaultSettings.edgeThreshold;
this.settings.edgeSettings = defaultSettings.edgeSettings;
this.settings.themeId = defaultSettings.themeId;
this.modelDisplaySection.Update ();

4
source/website/website.js
View File

@ -536,7 +536,7 @@ export class Website
UpdateEdgeDisplay ()
{
this.settings.SaveToCookies ();
this.viewer.SetEdgeSettings (this.settings.showEdges, this.settings.edgeColor, this.settings.edgeThreshold);
this.viewer.SetEdgeSettings (this.settings.edgeSettings);
}
UpdateEnvironmentMap ()
@ -572,7 +572,7 @@ export class Website
{
let canvas = AddDomElement (this.parameters.viewerDiv, 'canvas');
this.viewer.Init (canvas);
this.viewer.SetEdgeSettings (this.settings.showEdges, this.settings.edgeColor, this.settings.edgeThreshold);
this.viewer.SetEdgeSettings (this.settings.edgeSettings);
this.viewer.SetBackgroundColor (this.settings.backgroundColor);
this.UpdateEnvironmentMap ();
}

21
test/tests/parameterlist_test.js
View File

@ -1,5 +1,6 @@
import * as assert from 'assert';
import * as OV from '../../source/engine/main.js';
import { EdgeSettings } from '../../source/engine/viewer/viewermodel.js';
export default function suite ()
{
@ -36,11 +37,11 @@ describe ('Parameter List', function () {
assert.strictEqual (urlParams, 'model=a.txt,b.txt$camera=1.00000,1.00000,1.00000,0.00000,0.00000,0.00000,0.00000,0.00000,1.00000,45.00000$backgroundcolor=4,5,6,7$defaultcolor=1,2,3');
}
{
let urlParams = OV.CreateUrlBuilder ().AddEdgeSettings ({
showEdges : true,
edgeColor : new OV.RGBColor (1, 2, 3),
edgeThreshold : 15
}).GetParameterList ();
let urlParams = OV.CreateUrlBuilder ().AddEdgeSettings (new EdgeSettings (
true,
new OV.RGBColor (1, 2, 3),
15
)).GetParameterList ();
assert.strictEqual (urlParams, 'edgesettings=on,1,2,3,15');
}
{
@ -115,11 +116,11 @@ describe ('Parameter List', function () {
{
let parser = OV.CreateUrlParser ('edgesettings=on,1,2,3,15');
assert.deepStrictEqual (parser.GetEdgeSettings (), {
showEdges : true,
edgeColor : new OV.RGBColor (1, 2, 3),
edgeThreshold : 15
});
assert.deepStrictEqual (parser.GetEdgeSettings (), new EdgeSettings (
true,
new OV.RGBColor (1, 2, 3),
15
));
}
{
let parser = OV.CreateUrlParser ('cameramode=perspective');