From f39a8fbc96586ab008cf0b214c8aa522230563cd Mon Sep 17 00:00:00 2001
From: NicolasRichel <nicolas@bimdata.io>
Date: Wed, 3 Aug 2022 16:11:15 +0200
Subject: [PATCH] PATCH: feat: add backgroundColor prop to
 bimdata-model-preview

---
 .../BIMDataModelPreview/BIMDataModelPreview.vue     | 10 +++++++++-
 .../BIMDataModelPreview/Preview2D.vue               |  1 -
 .../BIMDataModelPreview/Preview3D.vue               |  1 -
 .../views/Components/ModelPreview/ModelPreview.vue  | 13 +++++++++++--
 src/web/views/Components/ModelPreview/props-data.js |  6 ++++++
 5 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/BIMDataComponents/BIMDataModelPreview/BIMDataModelPreview.vue b/src/BIMDataComponents/BIMDataModelPreview/BIMDataModelPreview.vue
index ad54241d..ec90249f 100644
--- a/src/BIMDataComponents/BIMDataModelPreview/BIMDataModelPreview.vue
+++ b/src/BIMDataComponents/BIMDataModelPreview/BIMDataModelPreview.vue
@@ -2,7 +2,11 @@
   <component
     :is="previewComponent"
     class="bimdata-model-preview"
-    :style="{ width: `${width}px`, height: `${height}px` }"
+    :style="{
+      width: `${width}px`,
+      height: `${height}px`,
+      backgroundColor,
+    }"
     v-bind="$props"
   />
 </template>
@@ -36,6 +40,10 @@ export default {
     defaultUrl: {
       type: String,
     },
+    backgroundColor: {
+      type: String,
+      default: "var(--color-silver-light)",
+    },
   },
   computed: {
     previewComponent() {
diff --git a/src/BIMDataComponents/BIMDataModelPreview/Preview2D.vue b/src/BIMDataComponents/BIMDataModelPreview/Preview2D.vue
index 4669b617..3228c430 100644
--- a/src/BIMDataComponents/BIMDataModelPreview/Preview2D.vue
+++ b/src/BIMDataComponents/BIMDataModelPreview/Preview2D.vue
@@ -82,7 +82,6 @@ export default {
 .preview-2d {
   position: relative;
   height: 100%;
-  background-color: var(--color-silver-light);
   user-select: none;
   overflow: hidden;
 
diff --git a/src/BIMDataComponents/BIMDataModelPreview/Preview3D.vue b/src/BIMDataComponents/BIMDataModelPreview/Preview3D.vue
index 45e6514b..bf835196 100644
--- a/src/BIMDataComponents/BIMDataModelPreview/Preview3D.vue
+++ b/src/BIMDataComponents/BIMDataModelPreview/Preview3D.vue
@@ -55,7 +55,6 @@ export default {
 
 <style scoped lang="scss">
 .preview-3d {
-  background-color: var(--color-silver-light);
   user-select: none;
 
   .viewport {
diff --git a/src/web/views/Components/ModelPreview/ModelPreview.vue b/src/web/views/Components/ModelPreview/ModelPreview.vue
index ff82c4bd..a213baf1 100644
--- a/src/web/views/Components/ModelPreview/ModelPreview.vue
+++ b/src/web/views/Components/ModelPreview/ModelPreview.vue
@@ -7,9 +7,10 @@
       <ComponentCode :componentTitle="$route.name" language="javascript">
         <template #module>
           <BIMDataModelPreview
+            :type="type"
             :width="width"
             :height="height"
-            :type="type"
+            :backgroundColor="bgColor"
             :previewUrl="imgUrl"
           />
         </template>
@@ -34,6 +35,12 @@
             placeholder="Preview height (in px)"
             v-model="height"
           />
+          <BIMDataInput
+            margin="24px 0"
+            type="text"
+            placeholder="Background color"
+            v-model="bgColor"
+          />
         </template>
 
         <template #import>
@@ -47,6 +54,7 @@
               :type="{{ type }}"
               :width="{{ width }}"
               :height="{{ height }}"
+              :backgroundColor="{{ bgColor }}"
               :previewUrl="{{ imgUrl }}"
             /&gt;
           </pre>
@@ -90,9 +98,10 @@ export default {
   data() {
     return {
       // Parameters
+      type: "3d",
       width: 300,
       height: 300,
-      type: "3d",
+      bgColor: "var(--color-silver-light)",
       // Data
       propsData,
     };
diff --git a/src/web/views/Components/ModelPreview/props-data.js b/src/web/views/Components/ModelPreview/props-data.js
index 08a7af9b..51d1f82f 100644
--- a/src/web/views/Components/ModelPreview/props-data.js
+++ b/src/web/views/Components/ModelPreview/props-data.js
@@ -30,5 +30,11 @@ export default [
     "String",
     "",
     "Image that will be displayed if no preview url is provided"
+  ],
+  [
+    "backgroundColor",
+    "String",
+    "",
+    "Preview 'background-color' CSS property"
   ]
 ];