PATCH: fix: add width/height props to bimdata-model-preview

src/BIMDataComponents/BIMDataModelPreview/BIMDataModelPreview.vue

@@ -1,7 +1,8 @@
 <template>
   <component
-    class="bimdata-model-preview"
     :is="previewComponent"
+    class="bimdata-model-preview"
+    :style="{ width: `${width}px`, height: `${height}px` }"
     v-bind="$props"
   />
 </template>
@@ -21,9 +22,13 @@ export default {
       default: "3d",
       validator: v => ["2d", "3d"].includes(v),
     },
-    size: {
-      type: String,
-      default: "205px",
+    width: {
+      type: Number,
+      default: 240,
+    },
+    height: {
+      type: Number,
+      default: 240,
     },
     previewUrl: {
       type: String,

src/BIMDataComponents/BIMDataModelPreview/Preview2D.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     class="preview-2d"
-    :style="{ width: size, height: size }"
     @mouseenter="hover = true"
     @mouseleave="hover = false"
     @mousemove="onMouseMove"
@@ -18,8 +17,8 @@
       <div
         class="zoomImage"
         :style="{
-          width: size,
-          height: size,
+          width: `${width}px`,
+          height: `${height}px`,
           transform: zoomImageTransform,
         }"
       >
@@ -34,8 +33,11 @@ const ZOOM_FACTOR = 3;
 
 export default {
   props: {
-    size: {
-      type: String,
+    width: {
+      type: Number,
+    },
+    height: {
+      type: Number,
     },
     previewUrl: {
       type: String,
@@ -76,4 +78,39 @@ export default {
 };
 </script>
 
-<style scoped lang="scss" src="./Preview2D.scss"></style>
+<style scoped lang="scss">
+.preview-2d {
+  position: relative;
+  height: 100%;
+  background-color: var(--color-silver-light);
+  user-select: none;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .zoom {
+    position: absolute;
+    top: -50px;
+    left: -50px;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    box-shadow: var(--box-shadow);
+    background-color: var(--color-white);
+    overflow: hidden;
+
+    pointer-events: none;
+  }
+
+  .zoomImage {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    transform-origin: top left;
+  }
+}
+</style>

src/BIMDataComponents/BIMDataModelPreview/Preview3D.vue

@@ -1,11 +1,9 @@
 <template>
-  <div
-    class="preview-3d"
-    ref="container"
-    :style="{ width: size, height: size }"
-    @mousemove="onMouseMove"
-  >
-    <div class="viewport" ref="viewport">
+  <div class="preview-3d" @mousemove="onMouseMove">
+    <div
+      class="viewport"
+      :style="{ width: `${viewportWidth}px`, height: `${height}px` }"
+    >
       <img
         loading="lazy"
         :src="previewUrl || defaultUrl"
@@ -20,8 +18,11 @@ const NB_SLICES = 15;
 
 export default {
   props: {
-    size: {
-      type: String,
+    width: {
+      type: Number,
+    },
+    height: {
+      type: Number,
     },
     previewUrl: {
       type: String,
@@ -35,24 +36,37 @@ export default {
       translation: 0,
     };
   },
+  computed: {
+    viewportWidth() {
+      return Math.min(this.width, this.height);
+    },
+  },
   methods: {
     onMouseMove({ offsetX }) {
-      const container = this.$refs.container;
-      const viewport = this.$refs.viewport;
+      let offset = Math.ceil(NB_SLICES * (1 - offsetX / this.width));
+      offset = Math.abs(offset);
+      offset = Math.min(offset, NB_SLICES);
 
-      if (container && viewport) {
-        const { width: containerWidth } = container.getBoundingClientRect();
-        const { width: viewportWidth } = viewport.getBoundingClientRect();
-
-        let offset = Math.ceil(NB_SLICES * (1 - offsetX / containerWidth));
-        offset = Math.abs(offset);
-        offset = Math.min(offset, NB_SLICES);
-
-        this.translation = (offset - 1) * viewportWidth;
-      }
+      this.translation = (offset - 1) * this.viewportWidth;
     },
   },
 };
 </script>
 
-<style scoped lang="scss" src="./Preview3D.scss"></style>
+<style scoped lang="scss">
+.preview-3d {
+  background-color: var(--color-silver-light);
+  user-select: none;
+
+  .viewport {
+    margin: auto;
+    overflow: hidden;
+    pointer-events: none;
+
+    img {
+      width: auto;
+      height: 100%;
+    }
+  }
+}
+</style>

src/web/views/Components/ModelPreview/ModelPreview.vue

@@ -6,7 +6,12 @@
       </BIMDataText>
       <ComponentCode :componentTitle="$route.name" language="javascript">
         <template #module>
-          <BIMDataModelPreview :size="size" :type="type" :previewUrl="imgUrl" />
+          <BIMDataModelPreview
+            :width="width"
+            :height="height"
+            :type="type"
+            :previewUrl="imgUrl"
+          />
         </template>
 
         <template #parameters>
@@ -19,9 +24,15 @@
           </div>
           <BIMDataInput
             margin="24px 0"
-            type="text"
-            placeholder="Preview Size"
-            v-model="size"
+            type="number"
+            placeholder="Preview width (in px)"
+            v-model="width"
+          />
+          <BIMDataInput
+            margin="24px 0"
+            type="number"
+            placeholder="Preview height (in px)"
+            v-model="height"
           />
         </template>
 
@@ -34,6 +45,8 @@
           <pre>
             &lt;BIMDataModelPreview
               :type="{{ type }}"
+              :width="{{ width }}"
+              :height="{{ height }}"
               :previewUrl="{{ imgUrl }}"
             /&gt;
           </pre>
@@ -77,7 +90,8 @@ export default {
   data() {
     return {
       // Parameters
-      size: "300px",
+      width: 300,
+      height: 300,
       type: "3d",
       // Data
       propsData,

src/web/views/Components/ModelPreview/props-data.js

@@ -8,10 +8,16 @@ export default [
     "The type of preview: '2d' or '3d'"
   ],
   [
-    "size",
-    "String",
-    "205px",
-    "The size (width, height) of the preview"
+    "width",
+    "Number",
+    "240",
+    "Width of the preview in pixels"
+  ],
+  [
+    "height",
+    "Number",
+    "240",
+    "Height of the preview in pixels"
   ],
   [
     "previewUrl",