From 96f4569c0b88fbb2195384c29bd977551fbfeda2 Mon Sep 17 00:00:00 2001
From: "marion.liotier" <marion.liotier@inrae.fr>
Date: Thu, 26 Sep 2024 10:37:03 +0200
Subject: [PATCH 1/2] debug pixelated images

---
 public/images/horizontal.jpeg     | Bin 0 -> 10457 bytes
 public/images/vertical.jpeg       | Bin 0 -> 10719 bytes
 public/personne.json              |   4 ++--
 src/components/ImageComponent.vue |  29 ++++++++++++++++++++++++-----
 4 files changed, 26 insertions(+), 7 deletions(-)
 create mode 100644 public/images/horizontal.jpeg
 create mode 100644 public/images/vertical.jpeg

diff --git a/public/images/horizontal.jpeg b/public/images/horizontal.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..781a904944edcd6d6a2f8588cc4053a28be48a9e
GIT binary patch
literal 10457
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

literal 0
HcmV?d00001

diff --git a/public/images/vertical.jpeg b/public/images/vertical.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..8c8e7a2404f1538d27beb7e82c19491d06fce6c3
GIT binary patch
literal 10719
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

literal 0
HcmV?d00001

diff --git a/public/personne.json b/public/personne.json
index 22ac4d45..b867d01d 100644
--- a/public/personne.json
+++ b/public/personne.json
@@ -41,7 +41,7 @@
               "x": 300,
               "y": 100
             },
-            "image": "/public/images/anonymous_woman.png"
+            "image": "/public/images/vertical.jpeg"
           },
           "label": "Cosette"
         },
@@ -52,7 +52,7 @@
               "x": 140,
               "y": 100
             },
-            "image": "/public/images/paris.png"
+            "image": "/public/images/horizontal.jpeg"
           },
           "label": "Paris"
         }
diff --git a/src/components/ImageComponent.vue b/src/components/ImageComponent.vue
index bf206f00..65e4ecad 100644
--- a/src/components/ImageComponent.vue
+++ b/src/components/ImageComponent.vue
@@ -2,23 +2,28 @@
 	<g ref="nodeElement" :x="node.x" :y="node.y" :height="style.height" :width="style.width" fill="white"
 		:style="cursor">
         <g v-if="style.shape == 'imageCircle'">
-			<circle :cx="node.x +style.width!/2" :cy="node.y + style.height!/2" :r="shape.radius" :stroke="style.stroke" 
+			<circle :cx="node.x +style.width!/2" :cy="node.y + style.height!/2" :r="shape.radius" :stroke="style.stroke"
 			:strokeWidth="style.strokeWidth" :fill="`url(#${node.metadata!.image}.pattern)`"></circle>
 			<defs>
-				<pattern :id="`${node.metadata!.image}.pattern`" height="1" width="1" x="0" y="0">
-					<image :href="(node.metadata!.image as string)" :width="style.width" :height="style.height"></image>
+				<pattern :id="`${node.metadata!.image}.pattern`" width="1" height="1">
+					<image :href="(node.metadata!.image as string)" :width="imageProportion.width" :height="imageProportion.height" ></image>
 				</pattern>
 			</defs>
 		</g>
 		<g v-else>
 			<rect :x="node.x" :y="node.y" :stroke="style.stroke" :strokeWidth="style.strokeWidth"
-			:height="style.height" :width="style.width" :fill="style.fill"></rect>
-			<image :href="(node.metadata!.image as string)" :width="style.width" :height="style.height" :x="node.x" :y="node.y"></image>
+			:height="style.height" :width="style.width" :fill="`url(#${node.metadata!.image}.pattern)`"></rect>
+			<defs>
+				<pattern :id="`${node.metadata!.image}.pattern`" width="1" height="1">
+					<image :href="(node.metadata!.image as string)" :width="imageProportion.height" :height="imageProportion.width"></image>
+				</pattern>
+			</defs>
 		</g>
 	</g>
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import type { NodeStyle } from '../types/NodeStyle';
 import type { Node } from '../types/Node';
 import type { PropType } from 'vue';
@@ -43,6 +48,20 @@ const props = defineProps({
 
 // DATA
 const { nodeElement, cursor } = useDragAndDrop(props);
+
+// COMPUTED
+const imageProportion = computed(() => {
+	if (props.style.width! > props.style.height!) {
+		return {
+			width: undefined,
+			height: props.style.height! + 3,
+		}
+	}
+	return {
+		width: props.style.width! + 3,
+		height: undefined,
+	}
+});
 </script>
 
 <style scoped>
-- 
GitLab


From 112e9b121ffe0d4d695686a3fe0f4d487eae81fb Mon Sep 17 00:00:00 2001
From: "marion.liotier" <marion.liotier@inrae.fr>
Date: Thu, 26 Sep 2024 11:10:40 +0200
Subject: [PATCH 2/2] center the image

---
 src/components/ImageComponent.vue | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/ImageComponent.vue b/src/components/ImageComponent.vue
index 65e4ecad..db719882 100644
--- a/src/components/ImageComponent.vue
+++ b/src/components/ImageComponent.vue
@@ -6,7 +6,8 @@
 			:strokeWidth="style.strokeWidth" :fill="`url(#${node.metadata!.image}.pattern)`"></circle>
 			<defs>
 				<pattern :id="`${node.metadata!.image}.pattern`" width="1" height="1">
-					<image :href="(node.metadata!.image as string)" :width="imageProportion.width" :height="imageProportion.height" ></image>
+					<image ref="imageCircleEl" :href="(node.metadata!.image as string)" :width="imageProportion.width" :height="imageProportion.height" 
+					:x="imagePosition.x" :y="imagePosition.y" @load="getProportion(widthCircle, heightCircle)" ></image>
 				</pattern>
 			</defs>
 		</g>
@@ -15,7 +16,8 @@
 			:height="style.height" :width="style.width" :fill="`url(#${node.metadata!.image}.pattern)`"></rect>
 			<defs>
 				<pattern :id="`${node.metadata!.image}.pattern`" width="1" height="1">
-					<image :href="(node.metadata!.image as string)" :width="imageProportion.height" :height="imageProportion.width"></image>
+					<image ref="imageRectEl" :href="(node.metadata!.image as string)" :width="imageProportion.height" :height="imageProportion.width" 
+					:x="imagePosition.x" :y="imagePosition.y" @load="getProportion(widthRect, heightRect)"></image>
 				</pattern>
 			</defs>
 		</g>
@@ -23,12 +25,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { ref, computed } from "vue";
 import type { NodeStyle } from '../types/NodeStyle';
 import type { Node } from '../types/Node';
 import type { PropType } from 'vue';
 import type { NodeShape } from "../types/NodeShape";
 import { useDragAndDrop } from '../composables/UseDragAndDrop';
+import { useElementSize } from "@vueuse/core";
 
 // PROPS
 const props = defineProps({
@@ -48,6 +51,11 @@ const props = defineProps({
 
 // DATA
 const { nodeElement, cursor } = useDragAndDrop(props);
+const imageRectEl = ref(null);
+const imageCircleEl = ref(null);
+const { width: widthRect, height: heightRect } = useElementSize(imageRectEl);
+const { width: widthCircle, height: heightCircle } = useElementSize(imageCircleEl);
+const imagePosition = ref({ x: 0, y: 0 });
 
 // COMPUTED
 const imageProportion = computed(() => {
@@ -62,6 +70,20 @@ const imageProportion = computed(() => {
 		height: undefined,
 	}
 });
+
+// METHODS
+const getProportion = (w: number, h: number) => {
+	console.log(w, h);
+	if (w > h) {
+		// the image is wider than it is tall
+		// to center the image, we need to move it to the left
+		imagePosition.value.x = - (w - h) / 2;
+	} else {
+		// the image is taller than it is wide
+		// to center the image, we need to move it up
+		imagePosition.value.y = - (h - w) / 2;
+	}
+};
 </script>
 
 <style scoped>
-- 
GitLab