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

Add the possibility to set edge color.

Browse Source
This commit is contained in:
kovacsv 2021-12-08 12:17:32 +01:00
parent 619afebd55
commit 65600398b2
3 changed files with 61 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
website/o3dv/css/sidebar.css
View File

@ -58,6 +58,18 @@ div.ov_sidebar_content div.ov_sidebar_settings_row
overflow: auto;
}
div.ov_sidebar_content div.ov_sidebar_settings_details_input
{
width: 30px;
margin-right: 10px;
float: left;
}
div.ov_sidebar_content div.ov_sidebar_settings_details_text
{
float: left;
}
div.ov_sidebar_content div.ov_sidebar_settings_padded
{
margin: 10px 0px 0px 40px;

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

@ -11,7 +11,7 @@ OV.Settings = class
this.defaultColor = new OV.Color (200, 200, 200);
this.showEdges = false;
this.edgeColor = new OV.Color (0, 0, 0);
this.edgeThreshold = 10;
this.edgeThreshold = 1;
this.themeId = OV.Theme.Light;
}
@ -21,7 +21,7 @@ OV.Settings = class
this.defaultColor = cookieHandler.GetColorVal ('ov_default_color', new OV.Color (200, 200, 200));
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', 10);
this.edgeThreshold = cookieHandler.GetIntVal ('ov_edge_threshold', 1);
this.showEdges = cookieHandler.GetBoolVal ('ov_show_edges', false);
this.themeId = cookieHandler.GetIntVal ('ov_theme_id', OV.Theme.Light);
}

59
website/o3dv/js/sidebarpanels.js
View File

@ -237,8 +237,8 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
'Background Color',
'Affects only the visualization.',
null,
['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f'],
this.settings.backgroundColor,
['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f'],
(newColor) => {
this.SetBackgroundColor (newColor, false);
}
@ -247,8 +247,8 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
'Default Color',
'Appears when the model doesn\'t have materials.',
'Has no effect on the currently loaded file.',
['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8'],
this.settings.defaultColor,
['#ffffff', '#e3e3e3', '#cc3333', '#fac832', '#4caf50', '#3393bd', '#9b27b0', '#fda4b8'],
(newColor) => {
this.SetDefaultColor (newColor, false);
}
@ -288,19 +288,15 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
}
}
AddColorParameter (title, description, warningText, predefinedColors, defaultValue, onChange)
AddColorPicker (parentDiv, defaultColor, predefinedColors, onChange)
{
let contentDiv = OV.AddDiv (this.contentDiv, 'ov_sidebar_settings_content');
let titleDiv = OV.AddDiv (contentDiv, 'ov_sidebar_subtitle');
let colorInput = OV.AddDiv (titleDiv, 'color-picker');
OV.AddDiv (titleDiv, 'ov_sidebar_subtitle', title);
const pickr = Pickr.create ({
el : colorInput,
let pickr = Pickr.create ({
el : parentDiv,
theme : 'monolith',
position : 'left-start',
swatches : predefinedColors,
comparison : false,
default : '#' + OV.ColorToHexString (defaultValue),
default : '#' + OV.ColorToHexString (defaultColor),
components : {
preview : false,
opacity : false,
@ -326,6 +322,18 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
);
onChange (ovColor);
});
return pickr;
}
AddColorParameter (title, description, warningText, defaultColor, predefinedColors, onChange)
{
let contentDiv = OV.AddDiv (this.contentDiv, 'ov_sidebar_settings_content');
let titleDiv = OV.AddDiv (contentDiv, 'ov_sidebar_subtitle');
let colorInput = OV.AddDiv (titleDiv, 'color-picker');
OV.AddDiv (titleDiv, 'ov_sidebar_subtitle', title);
let pickr = this.AddColorPicker (colorInput, defaultColor, predefinedColors, (color) => {
onChange (color);
});
OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded', description);
let warningDiv = null;
if (warningText !== null) {
@ -340,7 +348,7 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
};
}
AddEdgeDisplayParameter (show, edgeColor, edgeThreshold)
AddEdgeDisplayParameter (defaultShowEdges, defaultEdgeColor, defaultEdgeThreshold)
{
function AddRadioButton (contentDiv, id, text, onChange)
{
@ -348,28 +356,54 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
return OV.AddRadioButton (row, 'edge_display', id, text, onChange);
}
function ShowEdgeSettings (edgeSettingsDiv, show)
{
if (show) {
OV.ShowDomElement (edgeSettingsDiv);
} else {
OV.HideDomElement (edgeSettingsDiv);
}
}
let contentDiv = OV.AddDiv (this.contentDiv, 'ov_sidebar_settings_content');
let titleDiv = OV.AddDiv (contentDiv, 'ov_sidebar_subtitle');
OV.AddSvgIconElement (titleDiv, 'edges', 'ov_sidebar_subtitle_icon');
OV.AddDiv (titleDiv, 'ov_sidebar_subtitle_text', 'Edge Display');
let buttonsDiv = OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded');
let edgeSettingsDiv = OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded');
let colorRow = OV.AddDiv (edgeSettingsDiv, 'ov_sidebar_settings_row');
let colorInputDiv = OV.AddDiv (colorRow, 'ov_sidebar_settings_details_input');
OV.AddDiv (colorRow, 'ov_sidebar_settings_details_text', 'Edge Color');
let predefinedEdgeColors = ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f'];
let colorInput = OV.AddDiv (colorInputDiv);
let pickr = this.AddColorPicker (colorInput, defaultEdgeColor, predefinedEdgeColors, (color) => {
this.settings.edgeColor = color;
this.callbacks.onEdgeDisplayChange ();
});
let buttons = [];
let offButton = AddRadioButton (buttonsDiv, 'off', 'Don\'t Show Edges', () => {
OV.HideDomElement (edgeSettingsDiv);
this.settings.showEdges = false;
this.callbacks.onEdgeDisplayChange ();
});
let onButton = AddRadioButton (buttonsDiv, 'on', 'Show Edges', () => {
OV.ShowDomElement (edgeSettingsDiv);
this.settings.showEdges = true;
this.callbacks.onEdgeDisplayChange ();
});
buttons.push (offButton);
buttons.push (onButton);
OV.SelectRadioButton (buttons, show ? 'on' : 'off');
OV.SelectRadioButton (buttons, defaultShowEdges ? 'on' : 'off');
ShowEdgeSettings (edgeSettingsDiv, defaultShowEdges);
return {
pickr : pickr,
select : (value) => {
OV.SelectRadioButton (buttons, value ? 'on' : 'off');
ShowEdgeSettings (edgeSettingsDiv, value);
}
};
}
@ -425,6 +459,7 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
this.settings.showEdges = defaultSettings.showEdges;
this.settings.edgeColor = defaultSettings.edgeColor;
this.settings.edgeThreshold = defaultSettings.edgeThreshold;
this.edgeDisplayInput.pickr.setColor ('#' + OV.ColorToHexString (defaultSettings.edgeColor));
this.edgeDisplayInput.select (this.settings.showEdges);
this.callbacks.onEdgeDisplayChange ();