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

Add default line color picker to settings.

Browse Source
This commit is contained in:
kovacsv 2023-10-23 13:12:51 +02:00
parent 978b1dfd19
commit ac1a0e5b9d
13 changed files with 109 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
source/engine/import/importer.js
View File

@ -21,6 +21,7 @@ export class ImportSettings
{
constructor ()
{
this.defaultLineColor = new RGBColor (100, 100, 100);
this.defaultColor = new RGBColor (200, 200, 200);
}
}
@ -215,6 +216,9 @@ export class Importer
});
importer.Import (mainFile.file.name, mainFile.file.extension, mainFile.file.content, {
getDefaultLineMaterialColor : () => {
return settings.defaultLineColor;
},
getDefaultMaterialColor : () => {
return settings.defaultColor;
},

1
source/engine/import/importerbase.js
View File

@ -58,6 +58,7 @@ export class ImporterBase
}
FinalizeModel (this.model, {
defaultLineMaterialColor : this.callbacks.getDefaultLineMaterialColor (),
defaultMaterialColor : this.callbacks.getDefaultMaterialColor ()
});

7
source/engine/main.js
View File

@ -47,14 +47,14 @@ import { TextWriter } from './io/textwriter.js';
import { RGBColor, RGBAColor, ColorComponentFromFloat, ColorComponentToFloat, RGBColorFromFloatComponents, SRGBToLinear, LinearToSRGB, IntegerToHexString, RGBColorToHexString, RGBAColorToHexString, HexStringToRGBColor, HexStringToRGBAColor, ArrayToRGBColor, RGBColorIsEqual } from './model/color.js';
import { GeneratorParams, Generator, GeneratorHelper, GenerateCuboid, GenerateCone, GenerateCylinder, GenerateSphere, GeneratePlatonicSolid } from './model/generator.js';
import { Line } from './model/line.js';
import { TextureMap, MaterialBase, FaceMaterial, PhongMaterial, PhysicalMaterial, TextureMapIsEqual, TextureIsEqual, MaterialType } from './model/material.js';
import { TextureMap, MaterialBase, FaceMaterial, PhongMaterial, PhysicalMaterial, TextureMapIsEqual, TextureIsEqual, MaterialType, MaterialSource } from './model/material.js';
import { Mesh } from './model/mesh.js';
import { MeshPrimitiveBuffer, MeshBuffer, ConvertMeshToMeshBuffer } from './model/meshbuffer.js';
import { MeshInstanceId, MeshInstance } from './model/meshinstance.js';
import { IsEmptyMesh, CalculateTriangleNormal, TransformMesh, FlipMeshTrianglesOrientation } from './model/meshutils.js';
import { Model } from './model/model.js';
import { FinalizeModel, CheckModel } from './model/modelfinalization.js';
import { IsModelEmpty, GetBoundingBox, GetTopology, IsTwoManifold, HasDefaultMaterial, ReplaceDefaultMaterialsColor } from './model/modelutils.js';
import { IsModelEmpty, GetBoundingBox, GetTopology, IsTwoManifold, GetDefaultMaterials, ReplaceDefaultMaterialsColor } from './model/modelutils.js';
import { Node } from './model/node.js';
import { Object3D, ModelObject3D } from './model/object.js';
import { Property, PropertyGroup, PropertyToString, PropertyType } from './model/property.js';
@ -236,6 +236,7 @@ export {
TextureMapIsEqual,
TextureIsEqual,
MaterialType,
MaterialSource,
Mesh,
MeshPrimitiveBuffer,
MeshBuffer,
@ -253,7 +254,7 @@ export {
GetBoundingBox,
GetTopology,
IsTwoManifold,
HasDefaultMaterial,
GetDefaultMaterials,
ReplaceDefaultMaterialsColor,
Node,
Object3D,

11
source/engine/model/modelutils.js
View File

@ -96,23 +96,26 @@ export function IsTwoManifold (object3D)
}
}
export function HasDefaultMaterial (model)
export function GetDefaultMaterials (model)
{
let defaultMaterials = [];
for (let i = 0; i < model.MaterialCount (); i++) {
let material = model.GetMaterial (i);
if (material.source !== MaterialSource.Model && !material.vertexColors) {
return true;
defaultMaterials.push (material);
}
}
return false;
return defaultMaterials;
}
export function ReplaceDefaultMaterialsColor (model, color)
export function ReplaceDefaultMaterialsColor (model, color, lineColor)
{
for (let i = 0; i < model.MaterialCount (); i++) {
let material = model.GetMaterial (i);
if (material.source === MaterialSource.DefaultFace) {
material.color = color;
} else if (material.source === MaterialSource.DefaultLine) {
material.color = lineColor;
}
}
}

10
source/engine/threejs/threemodelloader.js
View File

@ -92,12 +92,16 @@ export class ThreeModelLoader
return this.defaultMaterials;
}
ReplaceDefaultMaterialsColor (defaultColor)
ReplaceDefaultMaterialsColor (defaultColor, defaultLineColor)
{
if (this.defaultMaterials !== null) {
for (let defaultMaterial of this.defaultMaterials) {
if (!defaultMaterial.vertexColors && defaultMaterial.userData.source === MaterialSource.DefaultFace) {
defaultMaterial.color = ConvertColorToThreeColor (defaultColor);
if (!defaultMaterial.vertexColors) {
if (defaultMaterial.userData.source === MaterialSource.DefaultFace) {
defaultMaterial.color = ConvertColorToThreeColor (defaultColor);
} else if (defaultMaterial.userData.source === MaterialSource.DefaultLine) {
defaultMaterial.color = ConvertColorToThreeColor (defaultLineColor);
}
}
}
}

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

@ -109,6 +109,7 @@ export class EmbeddedViewer
this.viewer.Clear ();
let settings = new ImportSettings ();
console.log (this.parameters);
if (this.parameters.defaultColor) {
settings.defaultColor = this.parameters.defaultColor;
}

4
source/website/settings.js
View File

@ -18,9 +18,11 @@ export class Settings
this.backgroundIsEnvMap = false;
if (this.themeId === Theme.Light) {
this.backgroundColor = new RGBAColor (255, 255, 255, 255);
this.defaultLineColor = new RGBColor (100, 100, 100);
this.defaultColor = new RGBColor (200, 200, 200);
} else if (this.themeId === Theme.Dark) {
this.backgroundColor = new RGBAColor (42, 43, 46, 255);
this.defaultLineColor = new RGBColor (100, 100, 100);
this.defaultColor = new RGBColor (200, 200, 200);
}
this.edgeSettings = new EdgeSettings (false, new RGBColor (0, 0, 0), 1);
@ -32,6 +34,7 @@ export class Settings
this.environmentMapName = CookieGetStringVal ('ov_environment_map', 'fishermans_bastion');
this.backgroundIsEnvMap = CookieGetBoolVal ('ov_background_is_envmap', false);
this.backgroundColor = CookieGetRGBAColorVal ('ov_background_color', new RGBAColor (255, 255, 255, 255));
this.defaultLineColor = CookieGetRGBColorVal ('ov_default_line_color', new RGBColor (100, 100, 100));
this.defaultColor = CookieGetRGBColorVal ('ov_default_color', new RGBColor (200, 200, 200));
this.edgeSettings.showEdges = CookieGetBoolVal ('ov_show_edges', false);
this.edgeSettings.edgeColor = CookieGetRGBColorVal ('ov_edge_color', new RGBColor (0, 0, 0));
@ -44,6 +47,7 @@ export class Settings
CookieSetStringVal ('ov_environment_map', this.environmentMapName);
CookieSetBoolVal ('ov_background_is_envmap', this.backgroundIsEnvMap);
CookieSetRGBAColorVal ('ov_background_color', this.backgroundColor);
CookieSetRGBColorVal ('ov_default_line_color', this.defaultLineColor);
CookieSetRGBColorVal ('ov_default_color', this.defaultColor);
CookieSetBoolVal ('ov_show_edges', this.edgeSettings.showEdges);
CookieSetRGBColorVal ('ov_edge_color', this.edgeSettings.edgeColor);

4
source/website/sidebar.js
View File

@ -48,8 +48,8 @@ export class Sidebar
getProjectionMode : () => {
return this.callbacks.getProjectionMode ();
},
hasDefaultMaterial : () => {
return this.callbacks.hasDefaultMaterial ();
getDefaultMaterials : () => {
return this.callbacks.getDefaultMaterials ();
},
onEnvironmentMapChanged : () => {
this.callbacks.onEnvironmentMapChanged ();

53
source/website/sidebarsettingspanel.js
View File

@ -10,6 +10,7 @@ import { ProjectionMode } from '../engine/viewer/camera.js';
import * as Pickr from '@simonwep/pickr';
import '@simonwep/pickr/dist/themes/monolith.min.css';
import { MaterialSource } from '../engine/main.js';
function AddColorPicker (parentDiv, opacity, defaultColor, predefinedColors, onChange)
{
@ -375,22 +376,35 @@ class SettingsImportParametersSection extends SettingsSection
constructor (parentDiv, settings)
{
super (parentDiv, 'Import Settings', settings);
this.defaultColorPickerDiv = null;
this.defaultLineColorPickerDiv = null;
this.defaultColorPicker = null;
this.defaultLineColorPicker = null;
}
Init (callbacks)
{
super.Init (callbacks);
function AddDefaultColorPicker (contentDiv, name, defaultColor, onChange)
{
let colorDiv = AddDiv (contentDiv, 'ov_sidebar_parameter');
let colorInput = AddDiv (colorDiv, 'ov_color_picker');
AddDiv (colorDiv, null, name);
let predefinedDefaultColors = ['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8'];
let defaultColorStr = '#' + RGBColorToHexString (defaultColor);
return AddColorPicker (colorInput, false, defaultColorStr, predefinedDefaultColors, onChange);
}
let defaultColorDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter');
let defaultColorInput = AddDiv (defaultColorDiv, 'ov_color_picker');
AddDiv (defaultColorDiv, null, 'Default Color');
let predefinedDefaultColors = ['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8'];
let defaultColor = '#' + RGBColorToHexString (this.settings.defaultColor);
this.defaultColorPicker = AddColorPicker (defaultColorInput, false, defaultColor, predefinedDefaultColors, (r, g, b, a) => {
super.Init (callbacks);
this.defaultColorPickerDiv = AddDiv (this.contentDiv);
this.defaultColorPicker = AddDefaultColorPicker (this.defaultColorPickerDiv, 'Default Color', this.settings.defaultColor, (r, g, b, a) => {
this.settings.defaultColor = new RGBColor (r, g, b);
this.callbacks.onDefaultColorChanged ();
});
this.defaultLineColorPickerDiv = AddDiv (this.contentDiv);
this.defaultLineColorPicker = AddDefaultColorPicker (this.defaultLineColorPickerDiv, 'Default Line Color', this.settings.defaultLineColor, (r, g, b, a) => {
this.settings.defaultLineColor = new RGBColor (r, g, b);
this.callbacks.onDefaultColorChanged ();
});
}
Update ()
@ -398,13 +412,26 @@ class SettingsImportParametersSection extends SettingsSection
if (this.defaultColorPicker !== null) {
this.defaultColorPicker.setColor ('#' + RGBColorToHexString (this.settings.defaultColor));
}
if (this.defaultLineColorPicker !== null) {
this.defaultLineColorPicker.setColor ('#' + RGBColorToHexString (this.settings.defaultLineColor));
}
}
UpdateVisibility ()
{
if (this.contentDiv !== null) {
let hasDefaultMaterial = this.callbacks.hasDefaultMaterial ();
ShowDomElement (this.contentDiv, hasDefaultMaterial);
let defaultMaterials = this.callbacks.getDefaultMaterials ();
if (defaultMaterials.length === 0) {
ShowDomElement (this.contentDiv, false);
} else {
let sources = new Set ();
for (let material of defaultMaterials) {
sources.add (material.source);
}
ShowDomElement (this.contentDiv, true);
ShowDomElement (this.defaultColorPickerDiv, sources.has (MaterialSource.DefaultFace));
ShowDomElement (this.defaultLineColorPickerDiv, sources.has (MaterialSource.DefaultLine));
}
}
}
@ -413,6 +440,9 @@ class SettingsImportParametersSection extends SettingsSection
if (this.defaultColorPicker !== null) {
this.defaultColorPicker.hide ();
}
if (this.defaultLineColorPicker !== null) {
this.defaultLineColorPicker.hide ();
}
}
}
@ -482,8 +512,8 @@ export class SidebarSettingsPanel extends SidebarPanel
}
});
this.importParametersSection.Init ({
hasDefaultMaterial : () => {
return this.callbacks.hasDefaultMaterial ();
getDefaultMaterials : () => {
return this.callbacks.getDefaultMaterials ();
},
onDefaultColorChanged : () => {
this.callbacks.onDefaultColorChanged ();
@ -511,6 +541,7 @@ export class SidebarSettingsPanel extends SidebarPanel
this.settings.environmentMapName = defaultSettings.environmentMapName;
this.settings.backgroundIsEnvMap = defaultSettings.backgroundIsEnvMap;
this.settings.backgroundColor = defaultSettings.backgroundColor;
this.settings.defaultLineColor = defaultSettings.defaultLineColor;
this.settings.defaultColor = defaultSettings.defaultColor;
this.settings.edgeSettings = defaultSettings.edgeSettings;
this.settings.themeId = defaultSettings.themeId;

17
source/website/website.js
View File

@ -19,7 +19,7 @@ import { ShowSnapshotDialog } from './snapshotdialog.js';
import { AddSvgIconElement, GetFilesFromDataTransfer, InstallTooltip, IsSmallWidth } from './utils.js';
import { ShowOpenUrlDialog } from './openurldialog.js';
import { ShowSharingDialog } from './sharingdialog.js';
import { HasDefaultMaterial, ReplaceDefaultMaterialsColor } from '../engine/model/modelutils.js';
import { GetDefaultMaterials, ReplaceDefaultMaterialsColor } from '../engine/model/modelutils.js';
import { Direction } from '../engine/geometry/geometry.js';
import { CookieGetBoolVal, CookieSetBoolVal } from './cookiehandler.js';
import { MeasureTool } from './measuretool.js';
@ -402,6 +402,7 @@ export class Website
}
TransformFileHostUrls (urls);
let importSettings = new ImportSettings ();
importSettings.defaultLineColor = this.settings.defaultLineColor;
importSettings.defaultColor = this.settings.defaultColor;
let defaultColor = this.hashHandler.GetDefaultColorFromHash ();
if (defaultColor !== null) {
@ -480,6 +481,7 @@ export class Website
LoadModelFromFileList (files)
{
let importSettings = new ImportSettings ();
importSettings.defaultLineColor = this.settings.defaultLineColor;
importSettings.defaultColor = this.settings.defaultColor;
let inputFiles = InputFilesFromFileObjects (files);
this.LoadModelFromInputFiles (inputFiles, importSettings);
@ -572,14 +574,15 @@ export class Website
if (resetColors) {
let defaultSettings = new Settings (this.settings.themeId);
this.settings.backgroundColor = defaultSettings.backgroundColor;
this.settings.defaultLineColor = defaultSettings.defaultLineColor;
this.settings.defaultColor = defaultSettings.defaultColor;
this.sidebar.UpdateControlsStatus ();
this.viewer.SetBackgroundColor (this.settings.backgroundColor);
let modelLoader = this.modelLoaderUI.GetModelLoader ();
if (modelLoader.GetDefaultMaterials () !== null) {
ReplaceDefaultMaterialsColor (this.model, this.settings.defaultColor);
modelLoader.ReplaceDefaultMaterialsColor (this.settings.defaultColor);
ReplaceDefaultMaterialsColor (this.model, this.settings.defaultColor, this.settings.defaultLineColor);
modelLoader.ReplaceDefaultMaterialsColor (this.settings.defaultColor, this.settings.defaultLineColor);
}
}
@ -794,8 +797,8 @@ export class Website
getProjectionMode : () => {
return this.viewer.GetProjectionMode ();
},
hasDefaultMaterial : () => {
return HasDefaultMaterial (this.model);
getDefaultMaterials : () => {
return GetDefaultMaterials (this.model);
},
onEnvironmentMapChanged : () => {
this.settings.SaveToCookies ();
@ -815,8 +818,8 @@ export class Website
this.settings.SaveToCookies ();
let modelLoader = this.modelLoaderUI.GetModelLoader ();
if (modelLoader.GetDefaultMaterials () !== null) {
ReplaceDefaultMaterialsColor (this.model, this.settings.defaultColor);
modelLoader.ReplaceDefaultMaterialsColor (this.settings.defaultColor);
ReplaceDefaultMaterialsColor (this.model, this.settings.defaultColor, this.settings.defaultLineColor);
modelLoader.ReplaceDefaultMaterialsColor (this.settings.defaultColor, this.settings.defaultLineColor);
}
this.viewer.Render ();
},

24
test/tests/exporter_test.js
View File

@ -219,6 +219,9 @@ describe ('Exporter', function () {
let contentBuffer = stlFile.GetBufferContent ();
let importer = new OV.ImporterStl ();
importer.Import (stlFile.GetName (), 'stl', contentBuffer, {
getDefaultLineMaterialColor () {
return new OV.RGBColor (0, 0, 0);
},
getDefaultMaterialColor () {
return new OV.RGBColor (0, 0, 0);
},
@ -316,6 +319,9 @@ describe ('Exporter', function () {
let contentBuffer = plyFile.GetBufferContent ();
let importer = new OV.ImporterPly ();
importer.Import (plyFile.GetName (), 'ply', contentBuffer, {
getDefaultLineMaterialColor () {
return new OV.RGBColor (0, 0, 0);
},
getDefaultMaterialColor () {
return new OV.RGBColor (0, 0, 0);
},
@ -347,6 +353,9 @@ describe ('Exporter', function () {
let contentBuffer = gltfFile.GetBufferContent ();
let importer = new OV.ImporterGltf ();
importer.Import (gltfFile.GetName (), 'gltf', contentBuffer, {
getDefaultLineMaterialColor () {
return new OV.RGBColor (0, 0, 0);
},
getDefaultMaterialColor () {
return new OV.RGBColor (0, 0, 0);
},
@ -383,6 +392,9 @@ describe ('Exporter', function () {
let contentBuffer = glbFile.GetBufferContent ();
let importer = new OV.ImporterGltf ();
importer.Import (glbFile.GetName (), 'glb', contentBuffer, {
getDefaultLineMaterialColor () {
return new OV.RGBColor (0, 0, 0);
},
getDefaultMaterialColor () {
return new OV.RGBColor (0, 0, 0);
},
@ -416,6 +428,9 @@ describe ('Exporter', function () {
let contentBuffer = glbFile.GetBufferContent ();
let importer = new OV.ImporterGltf ();
importer.Import (glbFile.GetName (), 'glb', contentBuffer, {
getDefaultLineMaterialColor () {
return new OV.RGBColor (0, 0, 0);
},
getDefaultMaterialColor () {
return new OV.RGBColor (0, 0, 0);
},
@ -451,6 +466,9 @@ describe ('Exporter', function () {
let contentBuffer = glbFile.GetBufferContent ();
let importer = new OV.ImporterGltf ();
importer.Import (glbFile.GetName (), 'glb', contentBuffer, {
getDefaultLineMaterialColor () {
return new OV.RGBColor (0, 0, 0);
},
getDefaultMaterialColor () {
return new OV.RGBColor (0, 0, 0);
},
@ -486,6 +504,9 @@ describe ('Exporter', function () {
let contentBuffer = glbFile.GetBufferContent ();
let importer = new OV.ImporterGltf ();
importer.Import (glbFile.GetName (), 'glb', contentBuffer, {
getDefaultLineMaterialColor () {
return new OV.RGBColor (0, 0, 0);
},
getDefaultMaterialColor () {
return new OV.RGBColor (0, 0, 0);
},
@ -521,6 +542,9 @@ describe ('Exporter', function () {
let contentBuffer = glbFile.GetBufferContent ();
let importer = new OV.ImporterGltf ();
importer.Import (glbFile.GetName (), 'glb', contentBuffer, {
getDefaultLineMaterialColor () {
return new OV.RGBColor (0, 0, 0);
},
getDefaultMaterialColor () {
return new OV.RGBColor (0, 0, 0);
},

1
test/tests/importer_test.js
View File

@ -277,7 +277,6 @@ describe ('Importer Test', function () {
onFileLoadProgress : (current, total) => {
},
onImportStart : function () {
},
onImportSuccess : function (importResult) {
assert.ok (!OV.IsModelEmpty (importResult.model));

3
test/utils/testfiles.js
View File

@ -11,6 +11,9 @@ export function ImportFile (importer, folder, fileName, onReady)
return fileContent;
});
importer.Import (fileName, extension, content, {
getDefaultLineMaterialColor () {
return new OV.RGBColor (0, 0, 0);
},
getDefaultMaterialColor () {
return new OV.RGBColor (0, 0, 0);
},