From 12706c7f6ad1d50d2202523f331631b6cf0b8070 Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Sun, 20 Jun 2021 15:03:25 +0200
Subject: [PATCH] Add material color preview.

---
 website/o3dv/modal.js     |  4 +++-
 website/o3dv/navigator.js |  2 +-
 website/o3dv/sidebar.js   | 14 ++++++++++++--
 website/o3dv/utils.js     | 12 ++++++++++++
 website/o3dv/website.css  | 22 +++++++++++++++-------
 5 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/website/o3dv/modal.js b/website/o3dv/modal.js
index 9407565..be787dc 100644
--- a/website/o3dv/modal.js
+++ b/website/o3dv/modal.js
@@ -244,7 +244,9 @@ OV.ListPopup = class extends OV.PopupDialog
     {
         let listItemDiv = $('<div>').addClass ('ov_popup_list_item').appendTo (this.listDiv);
         if (item.color) {
-            $('<div>').addClass ('ov_popup_list_item_rgbbox').css ('background', '#' + item.color).appendTo (listItemDiv);    
+            let iconDiv = $('<div>').addClass ('ov_popup_list_item_icon').appendTo (listItemDiv);
+            let colorCircle = OV.CreateInlineColorCircle (item.color);
+            colorCircle.appendTo (iconDiv);
         }
         $('<div>').addClass ('ov_popup_list_item_name').html (item.name).appendTo (listItemDiv);
         listItemDiv.click (callbacks.onClick);
diff --git a/website/o3dv/navigator.js b/website/o3dv/navigator.js
index ada8894..bda2ada 100644
--- a/website/o3dv/navigator.js
+++ b/website/o3dv/navigator.js
@@ -70,7 +70,7 @@ OV.NavigatorInfoPanel = class
             let usedMaterial = usedMaterials[i];
             materialItems.push ({
                 name : OV.GetMaterialName (usedMaterial.name),
-                color : OV.ColorToHexString (usedMaterial.diffuse)
+                color : usedMaterial.diffuse
             });
         }
 
diff --git a/website/o3dv/sidebar.js b/website/o3dv/sidebar.js
index d5a1e1c..2c92a8e 100644
--- a/website/o3dv/sidebar.js
+++ b/website/o3dv/sidebar.js
@@ -45,16 +45,21 @@ OV.Sidebar = class
             let row = $('<tr>').appendTo (table);
             let nameColum = $('<td>').addClass ('ov_property_table_name').appendTo (row);
             let valueColumn = $('<td>').addClass ('ov_property_table_value').appendTo (row);
-            nameColum.html (property.name).attr ('title', property.name);
+            nameColum.html (property.name + ':').attr ('title', property.name);
             let valueText = null;
             if (property.type === OV.PropertyType.Text) {
                 valueText = property.value;
             } else if (property.type === OV.PropertyType.Integer) {
                 valueText = property.value.toLocaleString ();
+            } else if (property.type === OV.PropertyType.Number) {
+                valueText = property.value.toFixed (2);
             } else if (property.type === OV.PropertyType.Percent) {
                 valueText = parseInt (property.value * 100, 10).toString () + '%';
             } else if (property.type === OV.PropertyType.Color) {
-                valueText = '#' + OV.ColorToHexString (property.value);
+                let hexString = '#' + OV.ColorToHexString (property.value);
+                let colorCircle = OV.CreateInlineColorCircle (property.value);
+                colorCircle.appendTo (valueColumn);
+                $('<span>').html (hexString).appendTo (valueColumn);
             }
             if (valueText !== null) {
                 valueColumn.html (valueText).attr ('title', valueText);
@@ -76,6 +81,11 @@ OV.Sidebar = class
         let properties = [];
         properties.push (new OV.Property (OV.PropertyType.Integer, 'Vertex Count', element.VertexCount ()));
         properties.push (new OV.Property (OV.PropertyType.Integer, 'Triangle Count', element.TriangleCount ()));
+        let boundingBox = OV.GetBoundingBox (element);
+        let size = OV.SubCoord3D (boundingBox.max, boundingBox.min);
+        properties.push (new OV.Property (OV.PropertyType.Number, 'Size X', size.x));
+        properties.push (new OV.Property (OV.PropertyType.Number, 'Size Y', size.y));
+        properties.push (new OV.Property (OV.PropertyType.Number, 'Size Z', size.z));
         this.AddProperties (properties);
     }
 
diff --git a/website/o3dv/utils.js b/website/o3dv/utils.js
index b761302..3142df1 100644
--- a/website/o3dv/utils.js
+++ b/website/o3dv/utils.js
@@ -136,3 +136,15 @@ OV.CreateIconButton = function (iconName, hoverIconName, title, link)
     }
     return buttonLink;
 };
+
+OV.CreateInlineColorCircle = function (color)
+{
+    let hexString = '#' + OV.ColorToHexString (color);
+    let darkerColor = new OV.Color (
+        Math.max (0, color.r - 50),
+        Math.max (0, color.g - 50),
+        Math.max (0, color.b - 50)
+    );
+    let darkerColorHexString = '#' + OV.ColorToHexString (darkerColor);
+    return $('<div>').addClass ('ov_color_circle').css ('background', hexString).css ('border', '1px solid ' + darkerColorHexString);
+};
diff --git a/website/o3dv/website.css b/website/o3dv/website.css
index 96e8b39..b66d322 100644
--- a/website/o3dv/website.css
+++ b/website/o3dv/website.css
@@ -118,7 +118,7 @@ div.main
 
 div.main_navigator
 {
-	width: 240px;
+	width: 260px;
 	margin: 10px 0px 10px 10px;
 	overflow: none;
 	float: left;
@@ -131,7 +131,7 @@ div.main_viewer
 
 div.main_sidebar
 {
-	width: 300px;
+	width: 260px;
 	margin: 10px 10px 10px 0px;
 	overflow: none;
 	float: right;
@@ -348,6 +348,18 @@ div.ov_tree_view div.ov_tree_view_children
 	margin-left: 28px;
 }
 
+div.ov_color_circle
+{
+	background: #ffffff;
+	border: 1px solid #000000;
+	width: 14px;
+	height: 14px;
+	display: inline-block;
+	margin-right: 5px;
+	margin-bottom: -2px;
+	border-radius: 10px;
+}
+
 div.ov_modal_overlay
 {
 	
@@ -612,12 +624,8 @@ div.ov_popup div.ov_popup_list_item
 	cursor: pointer;
 }
 
-div.ov_popup div.ov_popup_list_item_rgbbox
+div.ov_popup div.ov_popup_list_item_icon
 {
-	width: 18px;
-	height: 18px;
-	margin-right: 5px;
-	border: 1px solid #222222;
 	float: left;
 }