From 4509f1bb6678eea735e5d6aacda5f534c5603640 Mon Sep 17 00:00:00 2001
From: "marion.liotier" <marion.liotier@inrae.fr>
Date: Tue, 24 Sep 2024 12:42:56 +0200
Subject: [PATCH 01/14] npm i
---
package-lock.json | 158 ++++++++++++++++++++++++++--------------------
1 file changed, 88 insertions(+), 70 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 32f53729..d2dcbf1e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -717,208 +717,224 @@
}
},
"node_modules/@rollup/rollup-android-arm-eabi": {
- "version": "4.21.3",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.3.tgz",
- "integrity": "sha512-MmKSfaB9GX+zXl6E8z4koOr/xU63AMVleLEa64v7R0QF/ZloMs5vcD1sHgM64GXXS1csaJutG+ddtzcueI/BLg==",
+ "version": "4.22.4",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz",
+ "integrity": "sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==",
"cpu": [
"arm"
],
"dev": true,
+ "license": "MIT",
"optional": true,
"os": [
"android"
]
},
"node_modules/@rollup/rollup-android-arm64": {
- "version": "4.21.3",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.3.tgz",
- "integrity": "sha512-zrt8ecH07PE3sB4jPOggweBjJMzI1JG5xI2DIsUbkA+7K+Gkjys6eV7i9pOenNSDJH3eOr/jLb/PzqtmdwDq5g==",
+ "version": "4.22.4",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz",
+ "integrity": "sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==",
"cpu": [
"arm64"
],
"dev": true,
+ "license": "MIT",
"optional": true,
"os": [
"android"
]
},
"node_modules/@rollup/rollup-darwin-arm64": {
- "version": "4.21.3",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.3.tgz",
- "integrity": "sha512-P0UxIOrKNBFTQaXTxOH4RxuEBVCgEA5UTNV6Yz7z9QHnUJ7eLX9reOd/NYMO3+XZO2cco19mXTxDMXxit4R/eQ==",
+ "version": "4.22.4",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz",
+ "integrity": "sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==",
"cpu": [
"arm64"
],
"dev": true,
+ "license": "MIT",
"optional": true,
"os": [
"darwin"
]
},
"node_modules/@rollup/rollup-darwin-x64": {
- "version": "4.21.3",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.3.tgz",
- "integrity": "sha512-L1M0vKGO5ASKntqtsFEjTq/fD91vAqnzeaF6sfNAy55aD+Hi2pBI5DKwCO+UNDQHWsDViJLqshxOahXyLSh3EA==",
+ "version": "4.22.4",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz",
+ "integrity": "sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==",
"cpu": [
"x64"
],
"dev": true,
+ "license": "MIT",
"optional": true,
"os": [
"darwin"
]
},
"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
- "version": "4.21.3",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.3.tgz",
- "integrity": "sha512-btVgIsCjuYFKUjopPoWiDqmoUXQDiW2A4C3Mtmp5vACm7/GnyuprqIDPNczeyR5W8rTXEbkmrJux7cJmD99D2g==",
+ "version": "4.22.4",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz",
+ "integrity": "sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==",
"cpu": [
"arm"
],
"dev": true,
+ "license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-linux-arm-musleabihf": {
- "version": "4.21.3",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.3.tgz",
- "integrity": "sha512-zmjbSphplZlau6ZTkxd3+NMtE4UKVy7U4aVFMmHcgO5CUbw17ZP6QCgyxhzGaU/wFFdTfiojjbLG3/0p9HhAqA==",
+ "version": "4.22.4",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz",
+ "integrity": "sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==",
"cpu": [
"arm"
],
"dev": true,
+ "license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-linux-arm64-gnu": {
- "version": "4.21.3",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.3.tgz",
- "integrity": "sha512-nSZfcZtAnQPRZmUkUQwZq2OjQciR6tEoJaZVFvLHsj0MF6QhNMg0fQ6mUOsiCUpTqxTx0/O6gX0V/nYc7LrgPw==",
+ "version": "4.22.4",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz",
+ "integrity": "sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==",
"cpu": [
"arm64"
],
"dev": true,
+ "license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-linux-arm64-musl": {
- "version": "4.21.3",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.3.tgz",
- "integrity": "sha512-MnvSPGO8KJXIMGlQDYfvYS3IosFN2rKsvxRpPO2l2cum+Z3exiExLwVU+GExL96pn8IP+GdH8Tz70EpBhO0sIQ==",
+ "version": "4.22.4",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz",
+ "integrity": "sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==",
"cpu": [
"arm64"
],
"dev": true,
+ "license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
- "version": "4.21.3",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.3.tgz",
- "integrity": "sha512-+W+p/9QNDr2vE2AXU0qIy0qQE75E8RTwTwgqS2G5CRQ11vzq0tbnfBd6brWhS9bCRjAjepJe2fvvkvS3dno+iw==",
+ "version": "4.22.4",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz",
+ "integrity": "sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==",
"cpu": [
"ppc64"
],
"dev": true,
+ "license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-linux-riscv64-gnu": {
- "version": "4.21.3",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.3.tgz",
- "integrity": "sha512-yXH6K6KfqGXaxHrtr+Uoy+JpNlUlI46BKVyonGiaD74ravdnF9BUNC+vV+SIuB96hUMGShhKV693rF9QDfO6nQ==",
+ "version": "4.22.4",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz",
+ "integrity": "sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==",
"cpu": [
"riscv64"
],
"dev": true,
+ "license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-linux-s390x-gnu": {
- "version": "4.21.3",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.3.tgz",
- "integrity": "sha512-R8cwY9wcnApN/KDYWTH4gV/ypvy9yZUHlbJvfaiXSB48JO3KpwSpjOGqO4jnGkLDSk1hgjYkTbTt6Q7uvPf8eg==",
+ "version": "4.22.4",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz",
+ "integrity": "sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==",
"cpu": [
"s390x"
],
"dev": true,
+ "license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-linux-x64-gnu": {
- "version": "4.21.3",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.3.tgz",
- "integrity": "sha512-kZPbX/NOPh0vhS5sI+dR8L1bU2cSO9FgxwM8r7wHzGydzfSjLRCFAT87GR5U9scj2rhzN3JPYVC7NoBbl4FZ0g==",
+ "version": "4.22.4",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz",
+ "integrity": "sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==",
"cpu": [
"x64"
],
"dev": true,
+ "license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-linux-x64-musl": {
- "version": "4.21.3",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.3.tgz",
- "integrity": "sha512-S0Yq+xA1VEH66uiMNhijsWAafffydd2X5b77eLHfRmfLsRSpbiAWiRHV6DEpz6aOToPsgid7TI9rGd6zB1rhbg==",
+ "version": "4.22.4",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz",
+ "integrity": "sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==",
"cpu": [
"x64"
],
"dev": true,
+ "license": "MIT",
"optional": true,
"os": [
"linux"
]
},
"node_modules/@rollup/rollup-win32-arm64-msvc": {
- "version": "4.21.3",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.3.tgz",
- "integrity": "sha512-9isNzeL34yquCPyerog+IMCNxKR8XYmGd0tHSV+OVx0TmE0aJOo9uw4fZfUuk2qxobP5sug6vNdZR6u7Mw7Q+Q==",
+ "version": "4.22.4",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz",
+ "integrity": "sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==",
"cpu": [
"arm64"
],
"dev": true,
+ "license": "MIT",
"optional": true,
"os": [
"win32"
]
},
"node_modules/@rollup/rollup-win32-ia32-msvc": {
- "version": "4.21.3",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.3.tgz",
- "integrity": "sha512-nMIdKnfZfzn1Vsk+RuOvl43ONTZXoAPUUxgcU0tXooqg4YrAqzfKzVenqqk2g5efWh46/D28cKFrOzDSW28gTA==",
+ "version": "4.22.4",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz",
+ "integrity": "sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==",
"cpu": [
"ia32"
],
"dev": true,
+ "license": "MIT",
"optional": true,
"os": [
"win32"
]
},
"node_modules/@rollup/rollup-win32-x64-msvc": {
- "version": "4.21.3",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.3.tgz",
- "integrity": "sha512-fOvu7PCQjAj4eWDEuD8Xz5gpzFqXzGlxHZozHP4b9Jxv9APtdxL6STqztDzMLuRXEc4UpXGGhx029Xgm91QBeA==",
+ "version": "4.22.4",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz",
+ "integrity": "sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==",
"cpu": [
"x64"
],
"dev": true,
+ "license": "MIT",
"optional": true,
"os": [
"win32"
@@ -3564,10 +3580,11 @@
"integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
},
"node_modules/rollup": {
- "version": "4.21.3",
- "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.3.tgz",
- "integrity": "sha512-7sqRtBNnEbcBtMeRVc6VRsJMmpI+JU1z9VTvW8D4gXIYQFz0aLcsE6rRkyghZkLfEgUZgVvOG7A5CVz/VW5GIA==",
+ "version": "4.22.4",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.4.tgz",
+ "integrity": "sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==",
"dev": true,
+ "license": "MIT",
"dependencies": {
"@types/estree": "1.0.5"
},
@@ -3579,22 +3596,22 @@
"npm": ">=8.0.0"
},
"optionalDependencies": {
- "@rollup/rollup-android-arm-eabi": "4.21.3",
- "@rollup/rollup-android-arm64": "4.21.3",
- "@rollup/rollup-darwin-arm64": "4.21.3",
- "@rollup/rollup-darwin-x64": "4.21.3",
- "@rollup/rollup-linux-arm-gnueabihf": "4.21.3",
- "@rollup/rollup-linux-arm-musleabihf": "4.21.3",
- "@rollup/rollup-linux-arm64-gnu": "4.21.3",
- "@rollup/rollup-linux-arm64-musl": "4.21.3",
- "@rollup/rollup-linux-powerpc64le-gnu": "4.21.3",
- "@rollup/rollup-linux-riscv64-gnu": "4.21.3",
- "@rollup/rollup-linux-s390x-gnu": "4.21.3",
- "@rollup/rollup-linux-x64-gnu": "4.21.3",
- "@rollup/rollup-linux-x64-musl": "4.21.3",
- "@rollup/rollup-win32-arm64-msvc": "4.21.3",
- "@rollup/rollup-win32-ia32-msvc": "4.21.3",
- "@rollup/rollup-win32-x64-msvc": "4.21.3",
+ "@rollup/rollup-android-arm-eabi": "4.22.4",
+ "@rollup/rollup-android-arm64": "4.22.4",
+ "@rollup/rollup-darwin-arm64": "4.22.4",
+ "@rollup/rollup-darwin-x64": "4.22.4",
+ "@rollup/rollup-linux-arm-gnueabihf": "4.22.4",
+ "@rollup/rollup-linux-arm-musleabihf": "4.22.4",
+ "@rollup/rollup-linux-arm64-gnu": "4.22.4",
+ "@rollup/rollup-linux-arm64-musl": "4.22.4",
+ "@rollup/rollup-linux-powerpc64le-gnu": "4.22.4",
+ "@rollup/rollup-linux-riscv64-gnu": "4.22.4",
+ "@rollup/rollup-linux-s390x-gnu": "4.22.4",
+ "@rollup/rollup-linux-x64-gnu": "4.22.4",
+ "@rollup/rollup-linux-x64-musl": "4.22.4",
+ "@rollup/rollup-win32-arm64-msvc": "4.22.4",
+ "@rollup/rollup-win32-ia32-msvc": "4.22.4",
+ "@rollup/rollup-win32-x64-msvc": "4.22.4",
"fsevents": "~2.3.2"
}
},
@@ -4088,10 +4105,11 @@
}
},
"node_modules/vite": {
- "version": "5.4.5",
- "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.5.tgz",
- "integrity": "sha512-pXqR0qtb2bTwLkev4SE3r4abCNioP3GkjvIDLlzziPpXtHgiJIjuKl+1GN6ESOT3wMjG3JTeARopj2SwYaHTOA==",
+ "version": "5.4.7",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.7.tgz",
+ "integrity": "sha512-5l2zxqMEPVENgvzTuBpHer2awaetimj2BGkhBPdnwKbPNOlHsODU+oiazEZzLK7KhAnOrO+XGYJYn4ZlUhDtDQ==",
"dev": true,
+ "license": "MIT",
"dependencies": {
"esbuild": "^0.21.3",
"postcss": "^8.4.43",
--
GitLab
From f08b5c4082e2a6af92d20d7105153779d181d0ee Mon Sep 17 00:00:00 2001
From: "marion.liotier" <marion.liotier@inrae.fr>
Date: Tue, 24 Sep 2024 16:35:11 +0200
Subject: [PATCH 02/14] node that displays an image
---
public/miniMetabolicNetwork.json | 2 +-
public/personne.json | 70 +++++++++++++++++++++++++++++
src/App.vue | 2 +-
src/assets/anonymous.png | Bin 0 -> 2101 bytes
src/components/ImageComponent.vue | 36 +++++++++++++++
src/composables/UsePolygonShape.ts | 16 +++++++
6 files changed, 124 insertions(+), 2 deletions(-)
create mode 100644 public/personne.json
create mode 100644 src/assets/anonymous.png
create mode 100644 src/components/ImageComponent.vue
diff --git a/public/miniMetabolicNetwork.json b/public/miniMetabolicNetwork.json
index 6c873ad7..2012b074 100644
--- a/public/miniMetabolicNetwork.json
+++ b/public/miniMetabolicNetwork.json
@@ -8,7 +8,7 @@
"width": 25,
"height": 25,
"strokeWidth": 1,
- "shape": "circle",
+ "shape": "image",
"displayLabel": false
},
"reaction": {
diff --git a/public/personne.json b/public/personne.json
new file mode 100644
index 00000000..2abc2442
--- /dev/null
+++ b/public/personne.json
@@ -0,0 +1,70 @@
+{
+ "graph": {
+ "directed": true,
+ "metadata": {
+ "style": {
+ "nodeStyles": {
+ "personne": {
+ "width": 40,
+ "height": 40,
+ "strokeWidth": 1,
+ "shape": "image",
+ "displayLabel": true
+ },
+ "lieu": {
+ "width": 50,
+ "height": 50,
+ "strokeWidth": 1,
+ "shape": "rect",
+ "displayLabel": true
+ }
+ }
+ }
+ },
+ "id": "Membres",
+ "type": "personne",
+ "nodes": {
+ "Jean Valjean": {
+ "metadata": {
+ "classes": ["personne"],
+ "position": {
+ "x": 20,
+ "y": 100
+ }
+ },
+ "label": "Jean Valjean"
+ },
+ "Cosette": {
+ "metadata": {
+ "classes": ["personne"],
+ "position": {
+ "x": 300,
+ "y": 100
+ }
+ },
+ "label": "Cosette"
+ },
+ "Paris": {
+ "metadata": {
+ "classes": ["lieu"],
+ "position": {
+ "x": 140,
+ "y": 100
+ }
+ },
+ "label": "Paris"
+ }
+ },
+ "edges": [
+ {
+ "source": "Jean Valjean",
+ "target": "Paris"
+ },
+ {
+ "source": "Cosette",
+ "target": "Paris"
+ }
+ ]
+ }
+ }
+
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 08b3c18b..d7d1ece3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -109,7 +109,7 @@ async function callbackFunction() {
}
onMounted(() => {
- importNetworkFromURL("/glycolysis_krebs.json", network, networkStyle, callbackFunction);
+ importNetworkFromURL("/personne.json", network, networkStyle, callbackFunction);
// importNetworkFromURL("/oneNode.json", network, networkStyle);
});
diff --git a/src/assets/anonymous.png b/src/assets/anonymous.png
new file mode 100644
index 0000000000000000000000000000000000000000..432353b5910ecb051651cc452ca6c25b1665b088
GIT binary patch
literal 2101
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
literal 0
HcmV?d00001
diff --git a/src/components/ImageComponent.vue b/src/components/ImageComponent.vue
new file mode 100644
index 00000000..236e29a8
--- /dev/null
+++ b/src/components/ImageComponent.vue
@@ -0,0 +1,36 @@
+<template>
+ <g ref="nodeElement" :x="node.x" :y="node.y" :height="style.height" :width="style.width" fill="white"
+ :style="cursor">
+ <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="/src/assets/anonymous.png" :width="style.width" :height="style.height" :x="node.x" :y="node.y"></image>
+ </g>
+</template>
+
+<script setup lang="ts">
+import type { styleType } from '@/models/styleType';
+import type { NodeType } from '@/models/NodeType';
+import type { PropType } from 'vue';
+import { useDragAndDrop } from '@/composables/UseDragAndDrop';
+
+// PROPS
+const props = defineProps({
+ node: {
+ type: Object as PropType<NodeType>,
+ required: true
+ },
+ style: {
+ type: Object as PropType<styleType>,
+ default: () => {
+ return ({
+ width: 20, height: 20, stroke: "grey",
+ strokeWidth: 0.5,
+ fill: "white"
+ })
+ }
+ }
+})
+
+// DATA
+const { nodeElement, cursor } = useDragAndDrop(props);
+</script>
diff --git a/src/composables/UsePolygonShape.ts b/src/composables/UsePolygonShape.ts
index b6ef1b91..ad524a53 100644
--- a/src/composables/UsePolygonShape.ts
+++ b/src/composables/UsePolygonShape.ts
@@ -1,5 +1,6 @@
import PolygonComponent from "../components/PolygonComponent.vue";
import CircleComponent from "../components/CircleComponent.vue";
+import ImageComponent from "@/components/ImageComponent.vue";
import { Node } from "../types/Node";
import { NodeStyle } from "../types/NodeStyle";
import { Component } from "vue";
@@ -71,6 +72,21 @@ export function getNodeShape(node: Node, nodeStyle: NodeStyle): {shape: Componen
points: initPos + ' ' + pos2 + ' ' + pos3 + ' ' + pos4
}
}
+
+ /**
+ * Return path for an image
+ */
+ if (nodeStyle.shape === 'image') {
+ const initPos = node.x + ',' + node.y;
+ const pos2 = node.x + ',' + (node.y + height);
+ const pos3 = (node.x + width) + ',' + (node.y + height);
+ const pos4 = (node.x + width) + ',' + node.y;
+
+ return {
+ shape: ImageComponent,
+ points: initPos + ' ' + pos2 + ' ' + pos3 + ' ' + pos4
+ }
+ }
/**
* Return radius for a circle
--
GitLab
From b53fae7de9398da5c16711b8b8b5659b983c7c67 Mon Sep 17 00:00:00 2001
From: "marion.liotier" <marion.liotier@inrae.fr>
Date: Wed, 25 Sep 2024 09:41:50 +0200
Subject: [PATCH 03/14] circle image
---
src/components/ImageComponent.vue | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/src/components/ImageComponent.vue b/src/components/ImageComponent.vue
index 236e29a8..58a1e8f1 100644
--- a/src/components/ImageComponent.vue
+++ b/src/components/ImageComponent.vue
@@ -1,9 +1,19 @@
<template>
<g ref="nodeElement" :x="node.x" :y="node.y" :height="style.height" :width="style.width" fill="white"
:style="cursor">
+ <!--
<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="/src/assets/anonymous.png" :width="style.width" :height="style.height" :x="node.x" :y="node.y"></image>
+
+ -->
+ <circle :cx="node.x +style.width/2" :cy="node.y + style.height/2" :r="style.width/2" :stroke="style.stroke" fill="url(#circlepattern)"></circle>
+ <defs>
+ <pattern id="circlepattern" height="1" width="1" x="0" y="0">
+ <image href="/src/assets/anonymous.png" :width="style.width" :height="style.height"></image>
+
+ </pattern>
+ </defs>
</g>
</template>
--
GitLab
From 21ccee1582c623b111536d50318af9a8eb4aab53 Mon Sep 17 00:00:00 2001
From: "marion.liotier" <marion.liotier@inrae.fr>
Date: Wed, 25 Sep 2024 09:47:34 +0200
Subject: [PATCH 04/14] debug types
---
src/components/ImageComponent.vue | 10 +++++-----
src/composables/UsePolygonShape.ts | 2 +-
2 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/src/components/ImageComponent.vue b/src/components/ImageComponent.vue
index 58a1e8f1..300da326 100644
--- a/src/components/ImageComponent.vue
+++ b/src/components/ImageComponent.vue
@@ -7,7 +7,7 @@
<image href="/src/assets/anonymous.png" :width="style.width" :height="style.height" :x="node.x" :y="node.y"></image>
-->
- <circle :cx="node.x +style.width/2" :cy="node.y + style.height/2" :r="style.width/2" :stroke="style.stroke" fill="url(#circlepattern)"></circle>
+ <circle :cx="node.x +style.width!/2" :cy="node.y + style.height!/2" :r="style.width!/2" :stroke="style.stroke" fill="url(#circlepattern)"></circle>
<defs>
<pattern id="circlepattern" height="1" width="1" x="0" y="0">
<image href="/src/assets/anonymous.png" :width="style.width" :height="style.height"></image>
@@ -18,19 +18,19 @@
</template>
<script setup lang="ts">
-import type { styleType } from '@/models/styleType';
-import type { NodeType } from '@/models/NodeType';
+import type { NodeStyle } from '@/types/NodeStyle';
+import type { Node } from '@/types/Node';
import type { PropType } from 'vue';
import { useDragAndDrop } from '@/composables/UseDragAndDrop';
// PROPS
const props = defineProps({
node: {
- type: Object as PropType<NodeType>,
+ type: Object as PropType<Node>,
required: true
},
style: {
- type: Object as PropType<styleType>,
+ type: Object as PropType<NodeStyle>,
default: () => {
return ({
width: 20, height: 20, stroke: "grey",
diff --git a/src/composables/UsePolygonShape.ts b/src/composables/UsePolygonShape.ts
index ad524a53..8c51ab83 100644
--- a/src/composables/UsePolygonShape.ts
+++ b/src/composables/UsePolygonShape.ts
@@ -76,7 +76,7 @@ export function getNodeShape(node: Node, nodeStyle: NodeStyle): {shape: Componen
/**
* Return path for an image
*/
- if (nodeStyle.shape === 'image') {
+ if (nodeStyle.shape === 'image' || nodeStyle.shape === 'imageRect' || nodeStyle.shape === 'imageCircle') {
const initPos = node.x + ',' + node.y;
const pos2 = node.x + ',' + (node.y + height);
const pos3 = (node.x + width) + ',' + (node.y + height);
--
GitLab
From 642ec9a5a01892eaf5a4f734366e6915a61f3022 Mon Sep 17 00:00:00 2001
From: "marion.liotier" <marion.liotier@inrae.fr>
Date: Wed, 25 Sep 2024 09:54:06 +0200
Subject: [PATCH 05/14] choose between circle or rectangle
---
src/components/ImageComponent.vue | 24 ++++++++++++------------
1 file changed, 12 insertions(+), 12 deletions(-)
diff --git a/src/components/ImageComponent.vue b/src/components/ImageComponent.vue
index 300da326..270e76fc 100644
--- a/src/components/ImageComponent.vue
+++ b/src/components/ImageComponent.vue
@@ -1,19 +1,19 @@
<template>
<g ref="nodeElement" :x="node.x" :y="node.y" :height="style.height" :width="style.width" fill="white"
:style="cursor">
- <!--
- <rect :x="node.x" :y="node.y" :stroke="style.stroke" :strokeWidth="style.strokeWidth"
+ <g v-if="style.shape == 'imageCircle'">
+ <circle :cx="node.x +style.width!/2" :cy="node.y + style.height!/2" :r="style.width!/2" :stroke="style.stroke" fill="url(#circlepattern)"></circle>
+ <defs>
+ <pattern id="circlepattern" height="1" width="1" x="0" y="0">
+ <image href="/src/assets/anonymous.png" :width="style.width" :height="style.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="/src/assets/anonymous.png" :width="style.width" :height="style.height" :x="node.x" :y="node.y"></image>
-
- -->
- <circle :cx="node.x +style.width!/2" :cy="node.y + style.height!/2" :r="style.width!/2" :stroke="style.stroke" fill="url(#circlepattern)"></circle>
- <defs>
- <pattern id="circlepattern" height="1" width="1" x="0" y="0">
- <image href="/src/assets/anonymous.png" :width="style.width" :height="style.height"></image>
-
- </pattern>
- </defs>
+ <image href="/src/assets/anonymous.png" :width="style.width" :height="style.height" :x="node.x" :y="node.y"></image>
+ </g>
</g>
</template>
--
GitLab
From 92eca52fecdaaec9caaad2ea42754c69aff4ada5 Mon Sep 17 00:00:00 2001
From: "marion.liotier" <marion.liotier@inrae.fr>
Date: Wed, 25 Sep 2024 09:59:21 +0200
Subject: [PATCH 06/14] dynamic image path
---
public/personne.json | 13 ++++++++-----
src/assets/paris.png | Bin 0 -> 1931 bytes
src/components/ImageComponent.vue | 4 ++--
3 files changed, 10 insertions(+), 7 deletions(-)
create mode 100644 src/assets/paris.png
diff --git a/public/personne.json b/public/personne.json
index 2abc2442..58e419e7 100644
--- a/public/personne.json
+++ b/public/personne.json
@@ -8,14 +8,14 @@
"width": 40,
"height": 40,
"strokeWidth": 1,
- "shape": "image",
+ "shape": "imageCircle",
"displayLabel": true
},
"lieu": {
"width": 50,
"height": 50,
"strokeWidth": 1,
- "shape": "rect",
+ "shape": "imageRect",
"displayLabel": true
}
}
@@ -30,7 +30,8 @@
"position": {
"x": 20,
"y": 100
- }
+ },
+ "image": "anonymous.png"
},
"label": "Jean Valjean"
},
@@ -40,7 +41,8 @@
"position": {
"x": 300,
"y": 100
- }
+ },
+ "image": "anonymous.png"
},
"label": "Cosette"
},
@@ -50,7 +52,8 @@
"position": {
"x": 140,
"y": 100
- }
+ },
+ "image": "paris.png"
},
"label": "Paris"
}
diff --git a/src/assets/paris.png b/src/assets/paris.png
new file mode 100644
index 0000000000000000000000000000000000000000..7375a753d709b02bdf4f21a68a740025655fd0ee
GIT binary patch
literal 1931
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
RX}<sf002ovPDHLkV1jO)!i)d_
literal 0
HcmV?d00001
diff --git a/src/components/ImageComponent.vue b/src/components/ImageComponent.vue
index 270e76fc..51d386be 100644
--- a/src/components/ImageComponent.vue
+++ b/src/components/ImageComponent.vue
@@ -5,14 +5,14 @@
<circle :cx="node.x +style.width!/2" :cy="node.y + style.height!/2" :r="style.width!/2" :stroke="style.stroke" fill="url(#circlepattern)"></circle>
<defs>
<pattern id="circlepattern" height="1" width="1" x="0" y="0">
- <image href="/src/assets/anonymous.png" :width="style.width" :height="style.height"></image>
+ <image :href="`/src/assets/${node.metadata!.image}`" :width="style.width" :height="style.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="/src/assets/anonymous.png" :width="style.width" :height="style.height" :x="node.x" :y="node.y"></image>
+ <image :href="`/src/assets/${node.metadata!.image}`" :width="style.width" :height="style.height" :x="node.x" :y="node.y"></image>
</g>
</g>
</template>
--
GitLab
From 42566513ca6fafe7feadda9c4e37795d239e9d01 Mon Sep 17 00:00:00 2001
From: "marion.liotier" <marion.liotier@inrae.fr>
Date: Wed, 25 Sep 2024 10:28:26 +0200
Subject: [PATCH 07/14] undirected graph
---
public/personne.json | 11 ++++++-----
1 file changed, 6 insertions(+), 5 deletions(-)
diff --git a/public/personne.json b/public/personne.json
index 58e419e7..399c0c12 100644
--- a/public/personne.json
+++ b/public/personne.json
@@ -1,6 +1,5 @@
{
"graph": {
- "directed": true,
"metadata": {
"style": {
"nodeStyles": {
@@ -9,14 +8,14 @@
"height": 40,
"strokeWidth": 1,
"shape": "imageCircle",
- "displayLabel": true
+ "displayLabel": false
},
"lieu": {
"width": 50,
"height": 50,
"strokeWidth": 1,
"shape": "imageRect",
- "displayLabel": true
+ "displayLabel": false
}
}
}
@@ -61,11 +60,13 @@
"edges": [
{
"source": "Jean Valjean",
- "target": "Paris"
+ "target": "Paris",
+ "directed": false
},
{
"source": "Cosette",
- "target": "Paris"
+ "target": "Paris",
+ "directed": false
}
]
}
--
GitLab
From 8531b9269e53876b2bf265d2c42961029b96c289 Mon Sep 17 00:00:00 2001
From: "marion.liotier" <marion.liotier@inrae.fr>
Date: Wed, 25 Sep 2024 11:14:07 +0200
Subject: [PATCH 08/14] debug selection
---
src/components/ImageComponent.vue | 7 ++++++-
src/components/NodeData.vue | 24 +++++++++++++++++-------
2 files changed, 23 insertions(+), 8 deletions(-)
diff --git a/src/components/ImageComponent.vue b/src/components/ImageComponent.vue
index 51d386be..76d663d5 100644
--- a/src/components/ImageComponent.vue
+++ b/src/components/ImageComponent.vue
@@ -2,7 +2,8 @@
<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="style.width!/2" :stroke="style.stroke" fill="url(#circlepattern)"></circle>
+ <circle :cx="node.x +style.width!/2" :cy="node.y + style.height!/2" :r="style.width!/2" :stroke="style.stroke"
+ :strokeWidth="style.strokeWidth" fill="url(#circlepattern)"></circle>
<defs>
<pattern id="circlepattern" height="1" width="1" x="0" y="0">
<image :href="`/src/assets/${node.metadata!.image}`" :width="style.width" :height="style.height"></image>
@@ -44,3 +45,7 @@ const props = defineProps({
// DATA
const { nodeElement, cursor } = useDragAndDrop(props);
</script>
+
+<style scoped>
+@import "@/assets/style.css";
+</style>
diff --git a/src/components/NodeData.vue b/src/components/NodeData.vue
index b39ea73a..3676a5d2 100644
--- a/src/components/NodeData.vue
+++ b/src/components/NodeData.vue
@@ -174,13 +174,23 @@ const labelY = computed((): number => {
}
});
-// Variables --------
-const selectedStyle = reactive({
- height: nodeStyle.value.height,
- width: nodeStyle.value.width,
- fill: '#000000',
- opacity: 0.4,
- shape: nodeShape
+// Computed --------
+const selectedStyle = computed(() => {
+ if (nodeStyle.value.shape == "image" || nodeStyle.value.shape == "imageRect" ||nodeStyle.value.shape == "imageCircle") {
+ return {
+ height: nodeStyle.value.height,
+ width: nodeStyle.value.width,
+ stroke: "red",
+ shape: nodeStyle.value.shape
+ };
+ }
+ return {
+ height: nodeStyle.value.height,
+ width: nodeStyle.value.width,
+ fill: '#000000',
+ opacity: 0.4,
+ shape: nodeShape
+ };
});
</script>
--
GitLab
From 4fa63887e4e9d93f5fc495eea0c4e261538f7e0a Mon Sep 17 00:00:00 2001
From: "marion.liotier" <marion.liotier@inrae.fr>
Date: Wed, 25 Sep 2024 11:26:46 +0200
Subject: [PATCH 09/14] update doc
---
README.md | 4 +++-
public/personne.json | 10 +++++-----
src/components/ImageComponent.vue | 4 ++--
3 files changed, 10 insertions(+), 8 deletions(-)
diff --git a/README.md b/README.md
index 6fbfd9d0..a695fe96 100644
--- a/README.md
+++ b/README.md
@@ -466,9 +466,11 @@ A `<slot />` tag is also available in the component. This tag allows you to add
| stroke | string | Node's border color |
| displayLabel | boolean | Allows you to display or not nodes label |
| label | string | Allows you to choose which node's attribut is display as label (id or label) |
-| shape | string | Node's shape (rectangle, circle, diamond, triangle or inverseTriangle) |
+| shape | string | Node's shape (rectangle, circle, diamond, triangle, inverseTriangle, imageRect or imageCircle) |
| opacity | number | Node's opacity (between 0 and 1) |
+If the shape is an image, you need to add the image file path in the nodes metadata (`metadata.image: string`).
+
### LinkStyle
| Attribut | Type | Description |
diff --git a/public/personne.json b/public/personne.json
index 399c0c12..17902ec2 100644
--- a/public/personne.json
+++ b/public/personne.json
@@ -8,14 +8,14 @@
"height": 40,
"strokeWidth": 1,
"shape": "imageCircle",
- "displayLabel": false
+ "displayLabel": true
},
"lieu": {
"width": 50,
"height": 50,
"strokeWidth": 1,
"shape": "imageRect",
- "displayLabel": false
+ "displayLabel": true
}
}
}
@@ -30,7 +30,7 @@
"x": 20,
"y": 100
},
- "image": "anonymous.png"
+ "image": "/src/assets/anonymous.png"
},
"label": "Jean Valjean"
},
@@ -41,7 +41,7 @@
"x": 300,
"y": 100
},
- "image": "anonymous.png"
+ "image": "/src/assets/anonymous.png"
},
"label": "Cosette"
},
@@ -52,7 +52,7 @@
"x": 140,
"y": 100
},
- "image": "paris.png"
+ "image": "src/assets/paris.png"
},
"label": "Paris"
}
diff --git a/src/components/ImageComponent.vue b/src/components/ImageComponent.vue
index 76d663d5..25337424 100644
--- a/src/components/ImageComponent.vue
+++ b/src/components/ImageComponent.vue
@@ -6,14 +6,14 @@
:strokeWidth="style.strokeWidth" fill="url(#circlepattern)"></circle>
<defs>
<pattern id="circlepattern" height="1" width="1" x="0" y="0">
- <image :href="`/src/assets/${node.metadata!.image}`" :width="style.width" :height="style.height"></image>
+ <image :href="node.metadata!.image as string" :width="style.width" :height="style.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="`/src/assets/${node.metadata!.image}`" :width="style.width" :height="style.height" :x="node.x" :y="node.y"></image>
+ <image :href="node.metadata!.image as string" :width="style.width" :height="style.height" :x="node.x" :y="node.y"></image>
</g>
</g>
</template>
--
GitLab
From 17f4c0e5c2fd45c17c3b800893c52fd645cc2cf4 Mon Sep 17 00:00:00 2001
From: "marion.liotier" <marion.liotier@inrae.fr>
Date: Wed, 25 Sep 2024 14:11:55 +0200
Subject: [PATCH 10/14] move images
---
{src/assets => public/images}/anonymous.png | Bin
{src/assets => public/images}/paris.png | Bin
public/personne.json | 6 +++---
3 files changed, 3 insertions(+), 3 deletions(-)
rename {src/assets => public/images}/anonymous.png (100%)
rename {src/assets => public/images}/paris.png (100%)
diff --git a/src/assets/anonymous.png b/public/images/anonymous.png
similarity index 100%
rename from src/assets/anonymous.png
rename to public/images/anonymous.png
diff --git a/src/assets/paris.png b/public/images/paris.png
similarity index 100%
rename from src/assets/paris.png
rename to public/images/paris.png
diff --git a/public/personne.json b/public/personne.json
index 17902ec2..f1aa14be 100644
--- a/public/personne.json
+++ b/public/personne.json
@@ -30,7 +30,7 @@
"x": 20,
"y": 100
},
- "image": "/src/assets/anonymous.png"
+ "image": "/public/images/anonymous.png"
},
"label": "Jean Valjean"
},
@@ -41,7 +41,7 @@
"x": 300,
"y": 100
},
- "image": "/src/assets/anonymous.png"
+ "image": "/public/images/anonymous.png"
},
"label": "Cosette"
},
@@ -52,7 +52,7 @@
"x": 140,
"y": 100
},
- "image": "src/assets/paris.png"
+ "image": "/public/images/paris.png"
},
"label": "Paris"
}
--
GitLab
From 918f63d930d673018009fe051482edc6a02debeb Mon Sep 17 00:00:00 2001
From: "marion.liotier" <marion.liotier@inrae.fr>
Date: Wed, 25 Sep 2024 14:16:27 +0200
Subject: [PATCH 11/14] update usePolygonShape
---
src/components/ImageComponent.vue | 11 +++++++++--
src/composables/UsePolygonShape.ts | 14 ++++++++++++--
2 files changed, 21 insertions(+), 4 deletions(-)
diff --git a/src/components/ImageComponent.vue b/src/components/ImageComponent.vue
index 25337424..900ec145 100644
--- a/src/components/ImageComponent.vue
+++ b/src/components/ImageComponent.vue
@@ -2,7 +2,7 @@
<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="style.width!/2" :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(#circlepattern)"></circle>
<defs>
<pattern id="circlepattern" height="1" width="1" x="0" y="0">
@@ -22,6 +22,7 @@
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';
// PROPS
@@ -39,7 +40,13 @@ const props = defineProps({
fill: "white"
})
}
- }
+ },
+ shape: {
+ type: Object as PropType<NodeShape>,
+ default: () => {
+ return {}
+ }
+ }
})
// DATA
diff --git a/src/composables/UsePolygonShape.ts b/src/composables/UsePolygonShape.ts
index 8c51ab83..34354837 100644
--- a/src/composables/UsePolygonShape.ts
+++ b/src/composables/UsePolygonShape.ts
@@ -74,9 +74,9 @@ export function getNodeShape(node: Node, nodeStyle: NodeStyle): {shape: Componen
}
/**
- * Return path for an image
+ * Return path for a rectangle image
*/
- if (nodeStyle.shape === 'image' || nodeStyle.shape === 'imageRect' || nodeStyle.shape === 'imageCircle') {
+ if (nodeStyle.shape === 'image' || nodeStyle.shape === 'imageRect') {
const initPos = node.x + ',' + node.y;
const pos2 = node.x + ',' + (node.y + height);
const pos3 = (node.x + width) + ',' + (node.y + height);
@@ -87,6 +87,16 @@ export function getNodeShape(node: Node, nodeStyle: NodeStyle): {shape: Componen
points: initPos + ' ' + pos2 + ' ' + pos3 + ' ' + pos4
}
}
+
+ /**
+ * Return path for a rounded image
+ */
+ if (nodeStyle.shape === 'imageCircle') {
+ return {
+ shape: ImageComponent,
+ radius: height / 2
+ }
+ }
/**
* Return radius for a circle
--
GitLab
From e3241740eb663ab65de3993777e26e322768d4ae Mon Sep 17 00:00:00 2001
From: "marion.liotier" <marion.liotier@inrae.fr>
Date: Wed, 25 Sep 2024 14:17:36 +0200
Subject: [PATCH 12/14] debug style path
---
src/components/ImageComponent.vue | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/src/components/ImageComponent.vue b/src/components/ImageComponent.vue
index 900ec145..9b3486f9 100644
--- a/src/components/ImageComponent.vue
+++ b/src/components/ImageComponent.vue
@@ -6,24 +6,24 @@
:strokeWidth="style.strokeWidth" fill="url(#circlepattern)"></circle>
<defs>
<pattern id="circlepattern" height="1" width="1" x="0" y="0">
- <image :href="node.metadata!.image as string" :width="style.width" :height="style.height"></image>
+ <image :href="(node.metadata!.image as string)" :width="style.width" :height="style.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>
+ <image :href="(node.metadata!.image as string)" :width="style.width" :height="style.height" :x="node.x" :y="node.y"></image>
</g>
</g>
</template>
<script setup lang="ts">
-import type { NodeStyle } from '@/types/NodeStyle';
-import type { Node } from '@/types/Node';
+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 { useDragAndDrop } from '../composables/UseDragAndDrop';
// PROPS
const props = defineProps({
@@ -54,5 +54,5 @@ const { nodeElement, cursor } = useDragAndDrop(props);
</script>
<style scoped>
-@import "@/assets/style.css";
+@import "../assets/style.css";
</style>
--
GitLab
From c64114d0d7a026354bfbba3e73e6eca66fccddc7 Mon Sep 17 00:00:00 2001
From: "marion.liotier" <marion.liotier@inrae.fr>
Date: Wed, 25 Sep 2024 14:18:48 +0200
Subject: [PATCH 13/14] remove default props
---
src/components/ImageComponent.vue | 18 ++++--------------
1 file changed, 4 insertions(+), 14 deletions(-)
diff --git a/src/components/ImageComponent.vue b/src/components/ImageComponent.vue
index 9b3486f9..e7cae93b 100644
--- a/src/components/ImageComponent.vue
+++ b/src/components/ImageComponent.vue
@@ -32,21 +32,11 @@ const props = defineProps({
required: true
},
style: {
- type: Object as PropType<NodeStyle>,
- default: () => {
- return ({
- width: 20, height: 20, stroke: "grey",
- strokeWidth: 0.5,
- fill: "white"
- })
- }
+ type: Object as PropType<NodeStyle>
},
- shape: {
- type: Object as PropType<NodeShape>,
- default: () => {
- return {}
- }
- }
+ shape: {
+ type: Object as PropType<NodeShape>,
+ }
})
// DATA
--
GitLab
From b74ec3b317e26fad11f3cdbc9b53adc5c0faa18f Mon Sep 17 00:00:00 2001
From: "marion.liotier" <marion.liotier@inrae.fr>
Date: Wed, 25 Sep 2024 14:29:23 +0200
Subject: [PATCH 14/14] different images for the same class
---
public/images/anonymous_woman.png | Bin 0 -> 3089 bytes
public/personne.json | 2 +-
src/components/ImageComponent.vue | 8 +++++---
3 files changed, 6 insertions(+), 4 deletions(-)
create mode 100644 public/images/anonymous_woman.png
diff --git a/public/images/anonymous_woman.png b/public/images/anonymous_woman.png
new file mode 100644
index 0000000000000000000000000000000000000000..63881db9767e18dc6d6a62734974cd43d93fe207
GIT binary patch
literal 3089
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
literal 0
HcmV?d00001
diff --git a/public/personne.json b/public/personne.json
index f1aa14be..22ac4d45 100644
--- a/public/personne.json
+++ b/public/personne.json
@@ -41,7 +41,7 @@
"x": 300,
"y": 100
},
- "image": "/public/images/anonymous.png"
+ "image": "/public/images/anonymous_woman.png"
},
"label": "Cosette"
},
diff --git a/src/components/ImageComponent.vue b/src/components/ImageComponent.vue
index e7cae93b..bf206f00 100644
--- a/src/components/ImageComponent.vue
+++ b/src/components/ImageComponent.vue
@@ -3,9 +3,9 @@
: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"
- :strokeWidth="style.strokeWidth" fill="url(#circlepattern)"></circle>
+ :strokeWidth="style.strokeWidth" :fill="`url(#${node.metadata!.image}.pattern)`"></circle>
<defs>
- <pattern id="circlepattern" height="1" width="1" x="0" y="0">
+ <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>
</defs>
@@ -32,10 +32,12 @@ const props = defineProps({
required: true
},
style: {
- type: Object as PropType<NodeStyle>
+ type: Object as PropType<NodeStyle>,
+ required: true
},
shape: {
type: Object as PropType<NodeShape>,
+ required: true
}
})
--
GitLab