many display fixes

package-lock.json

@@ -36,7 +36,8 @@
         "querystring-es3": "^0.2.1",
         "sass": "^1.57.1",
         "vite": "^3.0.9",
-        "vite-require": "^0.2.3"
+        "vite-require": "^0.2.3",
+        "vite-svg-loader": "^4.0.0"
       }
     },
     "node_modules/@babel/parser": {
@@ -267,6 +268,15 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/@tweenjs/tween.js": {
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-19.0.0.tgz",
@@ -741,6 +751,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -767,6 +786,47 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -779,6 +839,39 @@
         "node": ">=4"
       }
     },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dev": true,
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "dev": true
+    },
     "node_modules/cssom": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@@ -899,6 +992,32 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
     "node_modules/domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -911,6 +1030,35 @@
         "node": ">=12"
       }
     },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -921,7 +1069,7 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "optional": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -2322,6 +2470,12 @@
       "resolved": "https://registry.npmjs.org/matter-js/-/matter-js-0.19.0.tgz",
       "integrity": "sha512-v2huwvQGOHTGOkMqtHd2hercCG3f6QAObTisPPHg8TZqq2lz7eIY/5i/5YUV8Ibf3mEioFEmwibcPUF2/fnKKQ=="
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3253,6 +3407,30 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svgo": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz",
+      "integrity": "sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==",
+      "dev": true,
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.2.1",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -3455,6 +3633,16 @@
         "vite-plugin-dynamic-import": "^1.1.1"
       }
     },
+    "node_modules/vite-svg-loader": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-4.0.0.tgz",
+      "integrity": "sha512-0MMf1yzzSYlV4MGePsLVAOqXsbF5IVxbn4EEzqRnWxTQl8BJg/cfwIzfQNmNQxZp5XXwd4kyRKF1LytuHZTnqA==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-sfc": "^3.2.20",
+        "svgo": "^3.0.2"
+      }
+    },
     "node_modules/vue": {
       "version": "3.2.47",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
@@ -3805,6 +3993,12 @@
       "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
       "optional": true
     },
+    "@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true
+    },
     "@tweenjs/tween.js": {
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-19.0.0.tgz",
@@ -4190,6 +4384,12 @@
         "delayed-stream": "~1.0.0"
       }
     },
+    "commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4213,12 +4413,68 @@
         "which": "^2.0.1"
       }
     },
+    "css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dev": true,
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      }
+    },
+    "css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "requires": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      }
+    },
+    "css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "dev": true
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dev": true,
+      "requires": {
+        "css-tree": "~2.2.0"
+      },
+      "dependencies": {
+        "css-tree": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+          "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+          "dev": true,
+          "requires": {
+            "mdn-data": "2.0.28",
+            "source-map-js": "^1.0.1"
+          }
+        },
+        "mdn-data": {
+          "version": "2.0.28",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+          "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+          "dev": true
+        }
+      }
+    },
     "cssom": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@@ -4315,6 +4571,23 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      }
+    },
+    "domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true
+    },
     "domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -4324,6 +4597,26 @@
         "webidl-conversions": "^7.0.0"
       }
     },
+    "domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.3.0"
+      }
+    },
+    "domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dev": true,
+      "requires": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      }
+    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -4334,7 +4627,7 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "optional": true
+      "devOptional": true
     },
     "es-module-lexer": {
       "version": "1.2.1",
@@ -5279,6 +5572,12 @@
       "resolved": "https://registry.npmjs.org/matter-js/-/matter-js-0.19.0.tgz",
       "integrity": "sha512-v2huwvQGOHTGOkMqtHd2hercCG3f6QAObTisPPHg8TZqq2lz7eIY/5i/5YUV8Ibf3mEioFEmwibcPUF2/fnKKQ=="
     },
+    "mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true
+    },
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -5892,6 +6191,20 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "svgo": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz",
+      "integrity": "sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==",
+      "dev": true,
+      "requires": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.2.1",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      }
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -6034,6 +6347,16 @@
         "vite-plugin-dynamic-import": "^1.1.1"
       }
     },
+    "vite-svg-loader": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-4.0.0.tgz",
+      "integrity": "sha512-0MMf1yzzSYlV4MGePsLVAOqXsbF5IVxbn4EEzqRnWxTQl8BJg/cfwIzfQNmNQxZp5XXwd4kyRKF1LytuHZTnqA==",
+      "dev": true,
+      "requires": {
+        "@vue/compiler-sfc": "^3.2.20",
+        "svgo": "^3.0.2"
+      }
+    },
     "vue": {
       "version": "3.2.47",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",

package.json

@@ -36,6 +36,7 @@
     "querystring-es3": "^0.2.1",
     "sass": "^1.57.1",
     "vite": "^3.0.9",
-    "vite-require": "^0.2.3"
+    "vite-require": "^0.2.3",
+    "vite-svg-loader": "^4.0.0"
   }
 }

src/assets/icons/doleancer.svg

@@ -5,7 +5,7 @@
    viewBox="0 0 35 35"
    version="1.1"
    id="svg5344"
-   sodipodi:docname="doleance.svg"
+   sodipodi:docname="doleancer.svg"
    inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
@@ -20,17 +20,17 @@
      borderopacity="1.0"
      inkscape:showpageshadow="2"
      inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
+     inkscape:pagecheckerboard="true"
      inkscape:deskcolor="#d1d1d1"
      showgrid="false"
-     inkscape:zoom="25.8"
-     inkscape:cx="14.903101"
-     inkscape:cy="17.53876"
+     inkscape:zoom="11.819053"
+     inkscape:cx="9.856966"
+     inkscape:cy="4.6111987"
      inkscape:window-width="1920"
-     inkscape:window-height="1026"
-     inkscape:window-x="0"
-     inkscape:window-y="30"
-     inkscape:window-maximized="1"
+     inkscape:window-height="1170"
+     inkscape:window-x="1920"
+     inkscape:window-y="16"
+     inkscape:window-maximized="0"
      inkscape:current-layer="svg5344" />
   <circle
      class="thick"
@@ -39,39 +39,71 @@
      cy="17.5"
      r="17"
      id="circle5315"
-     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1;fill:none" />
   <line
      class="thin"
      x1="17.5"
      y1="0"
      x2="17.5"
-     y2="35"
+     y2="9.5"
      id="line5317"
-     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+     style="stroke:#000000;stroke-width:0.749999;stroke-dasharray:none;stroke-opacity:1" />
   <line
      class="thin"
-     x1="29.874369"
-     y1="5.1256313"
-     x2="5.1256313"
-     y2="29.874369"
-     id="line5319"
-     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+     x1="17.5"
+     y1="25.658915"
+     x2="17.5"
+     y2="35.158916"
+     id="line5317-7"
+     style="stroke:#000000;stroke-width:0.749999;stroke-dasharray:none;stroke-opacity:1" />
   <line
      class="thin"
-     x1="35"
+     x1="9.5"
      y1="17.5"
      x2="0"
      y2="17.5"
      id="line5321"
-     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+     style="stroke:#000000;stroke-width:0.749999;stroke-dasharray:none;stroke-opacity:1" />
   <line
      class="thin"
-     x1="29.874369"
-     y1="29.874369"
-     x2="5.1256313"
-     y2="5.1256313"
-     id="line5323"
-     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+     x1="11.866509"
+     y1="11.866509"
+     x2="5.1489959"
+     y2="5.1489949"
+     id="line5321-3"
+     style="stroke:#000000;stroke-width:0.749999;stroke-dasharray:none;stroke-opacity:1" />
+  <line
+     class="thin"
+     x1="29.870384"
+     y1="29.870384"
+     x2="23.15287"
+     y2="23.15287"
+     id="line5321-3-5"
+     style="stroke:#000000;stroke-width:0.749999;stroke-dasharray:none;stroke-opacity:1" />
+  <line
+     class="thin"
+     x1="29.870384"
+     y1="5.1296153"
+     x2="23.15287"
+     y2="11.84713"
+     id="line5321-3-5-6"
+     style="stroke:#000000;stroke-width:0.749999;stroke-dasharray:none;stroke-opacity:1" />
+  <line
+     class="thin"
+     x1="11.866508"
+     y1="23.133492"
+     x2="5.1489949"
+     y2="29.851006"
+     id="line5321-3-5-6-2"
+     style="stroke:#000000;stroke-width:0.749999;stroke-dasharray:none;stroke-opacity:1" />
+  <line
+     class="thin"
+     x1="34.810078"
+     y1="17.5"
+     x2="25.310078"
+     y2="17.5"
+     id="line5321-5"
+     style="stroke:#000000;stroke-width:0.749999;stroke-dasharray:none;stroke-opacity:1" />
   <circle
      class="thin"
      fill="#ffffff"
@@ -79,61 +111,33 @@
      cy="17.5"
      r="8"
      id="circle5325"
-     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
+     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1;fill:none" />
   <path
      class="thin"
      fill="none"
-     d="m 3.5,22.5 2,-3 2,3"
+     d="m 3.5,21.737498 2,-3 2,3"
      transform-origin="center"
      id="path5327"
      style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
   <path
      class="thin"
      fill="none"
-     d="m -13.435029,18.384776 3.5355343,-0.707106 -0.7071063,3.535534"
-     transform-origin="center"
-     id="path5329"
-     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
-  <path
-     class="thin"
-     fill="none"
-     d="m -22.5,3.5 3,2 -3,2"
-     transform-origin="center"
-     id="path5331"
-     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
-  <path
-     class="thin"
-     fill="none"
-     d="m -18.384776,-13.435029 0.707106,3.535534 -3.535534,-0.707107"
-     transform-origin="center"
-     id="path5333"
-     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
-  <path
-     class="thin"
-     fill="none"
-     d="m -3.5,-22.5 -2,3 -2,-3"
-     transform-origin="center"
-     id="path5335"
-     style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
-  <path
-     class="thin"
-     fill="none"
-     d="m 13.435029,-18.384776 -3.535534,0.707107 0.707107,-3.535534"
+     d="M 31.841686,13.344229 29.81831,16.328513 27.841808,13.312979"
      transform-origin="center"
-     id="path5337"
+     id="path5341"
      style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
   <path
      class="thin"
      fill="none"
-     d="m 22.5,-3.5 -3,-2 3,-2"
+     d="m 13.294665,3.4773346 2.999999,2 -2.999999,2"
      transform-origin="center"
-     id="path5339"
+     id="path5327-9"
      style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
   <path
      class="thin"
      fill="none"
-     d="M 31.841686,13.177822 29.81831,16.162106 27.841808,13.146572"
+     d="m 21.687933,31.819021 -2.984284,-2.023376 3.015534,-1.976502"
      transform-origin="center"
-     id="path5341"
+     id="path5341-1"
      style="stroke:#000000;stroke-width:0.75;stroke-dasharray:none;stroke-opacity:1" />
 </svg>

src/assets/icons/proximite.svg

@@ -20,27 +20,27 @@
      borderopacity="1.0"
      inkscape:showpageshadow="2"
      inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
+     inkscape:pagecheckerboard="true"
      inkscape:deskcolor="#d1d1d1"
      showgrid="false"
      inkscape:zoom="25.8"
-     inkscape:cx="14.903101"
-     inkscape:cy="17.53876"
+     inkscape:cx="12.344961"
+     inkscape:cy="17.577519"
      inkscape:window-width="1920"
-     inkscape:window-height="1026"
-     inkscape:window-x="0"
-     inkscape:window-y="30"
-     inkscape:window-maximized="1"
+     inkscape:window-height="1170"
+     inkscape:window-x="1920"
+     inkscape:window-y="16"
+     inkscape:window-maximized="0"
      inkscape:current-layer="svg4457" />
   <g
      id="picto"
-     style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none">
+     style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none">
     <path
        class="thick"
        fill="white"
        d="M 4, 4            L 13, 1            L 19, 5            L 28, 3            L 34, 12            L 29, 22            L 27, 29            L 21, 34            L 14, 31            L 12, 23            L 4, 17            L 1, 12            Z"
        id="path4446"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none" />
     <circle
        class="circle-fill"
        fill="black"
@@ -48,24 +48,24 @@
        cy="17.5"
        r="2.5"
        id="circle4448"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none" />
     <path
        class="thin"
        fill="none"
        d="M 7, 7            L 11, 5            L 15, 7            L 12, 12            L 12, 15            L 9, 16            L 5, 12            Z"
        id="path4450"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none" />
     <path
        class="thin"
        fill="none"
        d="M 20, 11            L 22, 9            L 24, 9            L 27, 7            L 29, 11            L 26, 15            L 24, 16            L 21, 14            Z"
        id="path4452"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none" />
     <path
        class="thin"
        fill="none"
        d="M 18, 23            L 22, 22            L 24, 25            L 22, 28            L 20, 29            L 17, 27            Z"
        id="path4454"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none" />
   </g>
 </svg>

src/assets/icons/puissancedagir.svg

@@ -5,7 +5,7 @@
    viewBox="0 0 35 35"
    version="1.1"
    id="svg3586"
-   sodipodi:docname="puissance-d-agir.svg"
+   sodipodi:docname="puissancedagir.svg"
    inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
@@ -20,21 +20,21 @@
      borderopacity="1.0"
      inkscape:showpageshadow="2"
      inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
+     inkscape:pagecheckerboard="true"
      inkscape:deskcolor="#d1d1d1"
      showgrid="false"
      inkscape:zoom="25.8"
-     inkscape:cx="14.903101"
-     inkscape:cy="17.53876"
+     inkscape:cx="12.344961"
+     inkscape:cy="17.577519"
      inkscape:window-width="1920"
-     inkscape:window-height="1026"
-     inkscape:window-x="0"
-     inkscape:window-y="30"
-     inkscape:window-maximized="1"
+     inkscape:window-height="1170"
+     inkscape:window-x="1920"
+     inkscape:window-y="16"
+     inkscape:window-maximized="0"
      inkscape:current-layer="svg3586" />
   <g
      id="picto"
-     style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none">
+     style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none">
     <circle
        class="thick"
        fill="white"
@@ -42,7 +42,7 @@
        cy="17.5"
        r="17"
        id="circle3571"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none" />
     <circle
        class="thin"
        fill="none"
@@ -50,7 +50,7 @@
        cy="17.5"
        r="9.3"
        id="circle3573"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none" />
     <circle
        class="circle-fill"
        fill="black"
@@ -58,7 +58,7 @@
        cy="17.5"
        r="2.5"
        id="circle3575"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none" />
     <line
        class="thin"
        x1="17.5"
@@ -66,7 +66,7 @@
        x2="17.5"
        y2="35"
        id="line3577"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none" />
     <line
        class="thin"
        x1="17.5"
@@ -75,7 +75,7 @@
        y2="35"
        transform="rotate(45, 17.5, 17.5)"
        id="line3579"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none" />
     <line
        class="thin"
        x1="17.5"
@@ -84,7 +84,7 @@
        y2="35"
        transform="rotate(90, 17.5, 17.5)"
        id="line3581"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none" />
     <line
        class="thin"
        x1="17.5"
@@ -93,6 +93,6 @@
        y2="35"
        transform="rotate(135, 17.5, 17.5)"
        id="line3583"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none" />
   </g>
 </svg>

src/assets/icons/superposition.svg

@@ -20,18 +20,22 @@
      borderopacity="1.0"
      inkscape:showpageshadow="2"
      inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
+     inkscape:pagecheckerboard="true"
      inkscape:deskcolor="#d1d1d1"
      showgrid="false"
-     inkscape:zoom="25.8"
-     inkscape:cx="14.903101"
-     inkscape:cy="17.53876"
+     inkscape:zoom="28.934453"
+     inkscape:cx="18.9912"
+     inkscape:cy="14.498287"
      inkscape:window-width="1920"
-     inkscape:window-height="1026"
-     inkscape:window-x="0"
+     inkscape:window-height="1146"
+     inkscape:window-x="1920"
      inkscape:window-y="30"
      inkscape:window-maximized="1"
-     inkscape:current-layer="svg1973" />
+     inkscape:current-layer="picto">
+    <inkscape:grid
+       type="xygrid"
+       id="grid1365" />
+  </sodipodi:namedview>
   <g
      id="picto"
      style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none">
@@ -39,32 +43,17 @@
        class="thick"
        d="M 12, 13            L 21, 13            L 31, 22            L 22, 32            L 8, 26            Z"
        id="path1952"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none" />
     <path
        class="thick"
        d="M 1, 11            L 9, 2            L 25, 9            L 21, 23            L 3, 20            Z"
        id="path1954"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none" />
     <path
        class="thick"
        d="M 21, 2            L 30, 6            L 33, 13            L 25, 24            L 18, 27            L 7, 12            Z"
        id="path1956"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
-    <path
-       fill="white"
-       d="M 12, 13            L 21, 13            L 31, 22            L 22, 32            L 8, 26            Z"
-       id="path1958"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
-    <path
-       fill="white"
-       d="M 1, 11            L 9, 2            L 25, 9            L 21, 23            L 3, 20            Z"
-       id="path1960"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
-    <path
-       fill="white"
-       d="M 21, 2            L 30, 6            L 33, 13            L 25, 24            L 18, 27            L 7, 12            Z"
-       id="path1962"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none" />
     <circle
        class="circle-fill"
        fill="black"

src/assets/icons/terraindevie.svg

@@ -5,7 +5,7 @@
    viewBox="0 0 35 35"
    version="1.1"
    id="svg13"
-   sodipodi:docname="terrain-de-vie.svg"
+   sodipodi:docname="terraindevie.svg"
    inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
@@ -20,18 +20,18 @@
      borderopacity="1.0"
      inkscape:showpageshadow="2"
      inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
+     inkscape:pagecheckerboard="true"
      inkscape:deskcolor="#d1d1d1"
      showgrid="false"
-     inkscape:zoom="1.7479522"
-     inkscape:cx="-20.881578"
-     inkscape:cy="62.644733"
+     inkscape:zoom="32.684168"
+     inkscape:cx="17.347848"
+     inkscape:cy="23.910659"
      inkscape:window-width="1920"
-     inkscape:window-height="1026"
-     inkscape:window-x="0"
-     inkscape:window-y="30"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg13" />
+     inkscape:window-height="1170"
+     inkscape:window-x="1920"
+     inkscape:window-y="16"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="picto" />
   <g
      id="picto"
      style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none">
@@ -42,31 +42,46 @@
        cy="17.5"
        r="17"
        id="circle2"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none" />
     <line
        class="thin"
        x1="17.5"
        y1="0"
        x2="17.5"
-       y2="35"
+       y2="9.666667"
        id="line4"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-width:0.750001;stroke-dasharray:none;stroke-opacity:1" />
     <line
        class="thin"
        x1="17.5"
-       y1="0"
+       y1="26.714285"
        x2="17.5"
-       y2="35"
-       transform="rotate(90, 17.5, 17.5)"
+       y2="35.061226"
+       id="line4-6"
+       style="stroke:#000000;stroke-width:0.750001;stroke-dasharray:none;stroke-opacity:1" />
+    <line
+       class="thin"
+       x1="7.3333335"
+       y1="17.5"
+       x2="-5.0000001e-08"
+       y2="17.5"
        id="line6"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-width:0.749999;stroke-dasharray:none;stroke-opacity:1" />
+    <line
+       class="thin"
+       x1="35.022579"
+       y1="17.5"
+       x2="27.000002"
+       y2="17.5"
+       id="line6-3"
+       style="stroke:#000000;stroke-width:0.749999;stroke-dasharray:none;stroke-opacity:1" />
     <path
        class="thick"
        fill="white"
        d="M 9, 12            L 21, 8            L 27, 14            L 27, 21            L 19, 26            L 12, 27            L 6, 21            Z"
        transform="translate(0 0.5)"
        id="path8"
-       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none" />
+       style="stroke:#000000;stroke-opacity:1;stroke-width:0.75;stroke-dasharray:none;fill:none" />
     <path
        class="thin"
        fill="none"

src/components/ConcernementMapItem.vue

@@ -32,6 +32,13 @@ import { mapState, mapActions } from 'pinia'
 import { ConcernementsStore } from '@/stores/concernements'
 import { CommonStore } from '@/stores/common'
 
+import iconAction from "@/assets/icons/action.svg"
+import iconDoleancer from "@/assets/icons/doleancer.svg"
+import iconProximite from "@/assets/icons/proximite.svg"
+import iconPuissanceagir from "@/assets/icons/puissancedagir.svg"
+import iconSuperposition from "@/assets/icons/superposition.svg"
+import iconTerraindevie from "@/assets/icons/terraindevie.svg"
+
 export default {
   inject: ['canvasMap', 'matterEngine'],
   data() {
@@ -44,7 +51,7 @@ export default {
         x: 0,
         y: 0
       },
-      ray: 60,
+      ray: 100,
       time: 0,
       salientPoints: [],
       scale: 1,
@@ -79,7 +86,7 @@ export default {
     //     // console.log("we have an entity");
     //     this.opened_entite_id = parseInt(this.$route.params.eid);
     // }
-    
+
     this.parsePoints()
     this.getSalientPoints()
 
@@ -493,8 +500,8 @@ export default {
       return new paper.Path({
         name: 'contours',
         segments: segments,
-        strokeColor: '#000',
-        strokeWidth: 1,
+        // strokeColor: '#000',
+        // strokeWidth: 1,
         fillColor: 'rgba(255,255,255,0.8)',
         pivot: new paper.Point(this.pos),
         cid: this.id
@@ -577,49 +584,9 @@ export default {
     setPaperPuissanceagirICON(){
       let children = [];
 
-      var r = 20 * this.scale; // ray
-      var dr = r/2;            // demi ray
-      var d = r*2;              // diameter
-
-      children.push(new paper.Path.Circle({
-        center: [this.pos.x, this.pos.y],
-        radius: r
-      }));
-      children.push(new paper.Path.Circle({
-        center: [this.pos.x, this.pos.y],
-        radius: dr
-      }));
-      children.push(new paper.Path.Circle({
-        center: [this.pos.x, this.pos.y],
-        radius: 2*this.scale
-      }));
-
-      // axes
-      // vertical
-      children.push(new paper.Path.Line({
-        from: [this.pos.x, this.pos.y - r],
-        to: [this.pos.x , this.pos.y + r],
-      }))      
-      // horizontal
-      children.push(new paper.Path.Line({
-        from: [this.pos.x - r, this.pos.y],
-        to: [this.pos.x + r, this.pos.y],
-      }))
-
-      // diagonale
-      // https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg
-      // https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9
-      // radians = degrees * (pi/180)
-      // degrees = radians * (180/pi)
-      var m = Math.sin(45*(Math.PI/180)) * r;
-      children.push(new paper.Path.Line({
-        from: [this.pos.x + m, this.pos.y + m],
-        to: [this.pos.x - m, this.pos.y - m],
-      }))
-      children.push(new paper.Path.Line({
-        from: [this.pos.x - m, this.pos.y + m],
-        to: [this.pos.x + m, this.pos.y - m],
-      }))
+      let svgIcon = paper.project.importSVG(iconPuissanceagir);
+      children.push(svgIcon);
+      svgIcon.position = this.pos;
       
       return new paper.Group({
         children: children,
@@ -628,7 +595,8 @@ export default {
         locked: true,
         style: {
           strokeColor: '#000',
-          strokeWidth: 1
+          strokeWidth: 1,
+          fillColor: null
         }
       });
     },
@@ -1109,71 +1077,10 @@ export default {
     setPaperDoleanceICON(){
       let children = [];
 
-      var r = 20 * this.scale; // ray
-      var dr = r/2;            // demi ray
-      var d = r*2;              // diameter
+      let svgIcon = paper.project.importSVG(iconDoleancer);
+      children.push(svgIcon);
+      svgIcon.position = this.pos;
 
-      children.push(new paper.Path.Circle({
-        center: [this.pos.x, this.pos.y],
-        radius: r
-      }));
-      
-      children.push(new paper.Path.Circle({
-        center: [this.pos.x, this.pos.y],
-        radius: dr
-      }));
-      
-
-      // axes
-      // vertical
-      children.push(new paper.Path.Line({
-        from: [this.pos.x, this.pos.y - r],
-        to: [this.pos.x , this.pos.y - dr],
-      }));  
-      children.push(new paper.Path.Line({
-        from: [this.pos.x, this.pos.y + r],
-        to: [this.pos.x , this.pos.y + dr],
-      }));
-
-      // horizontal
-      children.push(new paper.Path.Line({
-        from: [this.pos.x - r, this.pos.y],
-        to: [this.pos.x - dr, this.pos.y],
-      }));
-      children.push(new paper.Path.Line({
-        from: [this.pos.x + r, this.pos.y],
-        to: [this.pos.x + dr, this.pos.y],
-      }));
-
-      // diagonale
-      // https://fr.wikipedia.org/wiki/Trigonom%C3%A9trie#/media/Fichier:Unit_circle_angles_color.svg
-      // https://fr.wikipedia.org/wiki/Identit%C3%A9_trigonom%C3%A9trique_pythagoricienne#Preuve_utilisant_le_cercle_unit%C3%A9
-      // radians = degrees * (pi/180)
-      // degrees = radians * (180/pi)
-      let m,n;
-      m = Math.sin(45*(Math.PI/180)) * r;
-      n = Math.sin(45*(Math.PI/180)) * r/2;
-      // console.log('m', m);
-      children.push(new paper.Path.Line({
-        from: [this.pos.x + m, this.pos.y + m],
-        to: [this.pos.x + n, this.pos.y + n],
-      }));
-      //
-      children.push(new paper.Path.Line({
-        from: [this.pos.x - m, this.pos.y + m],
-        to: [this.pos.x - n, this.pos.y + n],
-      }));
-      //
-      children.push(new paper.Path.Line({
-        from: [this.pos.x + m, this.pos.y - m],
-        to: [this.pos.x + n, this.pos.y - n],
-      }));
-      //
-      children.push(new paper.Path.Line({
-        from: [this.pos.x - m, this.pos.y - m],
-        to: [this.pos.x - n, this.pos.y - n],
-      }));
-      
       return new paper.Group({
         children: children,
         pivot: new paper.Point(this.pos),
@@ -1181,9 +1088,12 @@ export default {
         locked: true,
         style: {
           strokeColor: '#000',
-          strokeWidth: 1
+          strokeWidth: 1,
+          fillColor: null
         }
       });
+
+
     },
     setPaperDoleanceSteps(){
       let g = new paper.Group({
@@ -1568,7 +1478,7 @@ export default {
         // opening tweening
         this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y, o: 0})
           .to({
-            s: 6,
+            s: 3,
             x: (this.canvas.width - 450) / 2,
             y: this.canvas.height / 2,
             o: 0.8
@@ -1731,8 +1641,10 @@ export default {
         this.paper_objects.children['contours'].fillColor = "rgba(255,255,255,0.8)";
         if (this.is_hover) {
           this.paper_objects.children['contours'].strokeColor = "#01ffe2";
+          this.paper_objects.children['contours'].strokeWidth = 2;
         }else{
-          this.paper_objects.children['contours'].strokeColor = "#000";
+          this.paper_objects.children['contours'].strokeColor = null;
+          this.paper_objects.children['contours'].strokeWidth = 0;
         }
       }
 

src/components/MapConcernements.vue

@@ -169,12 +169,12 @@ export default {
       <li>
         <a href="#terraindevie" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span>  terrain de vie</a>
       </li>
-      <!-- <li>
+      <li>
         <a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span>  proximité</a>
       </li>
       <li>
         <a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span>  superposition</a>
-      </li> -->
+      </li>
       <li>
         <a href="#puissancedagir" @click="setMapMode('puissancedagir')"><span class="icon puissancedagir"></span>  puissance d'agir</a>
       </li>

vite.config.js

@@ -4,10 +4,11 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import graphql from '@rollup/plugin-graphql';
 import { viteRequire } from 'vite-require'
+import svgLoader from 'vite-svg-loader'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), graphql(), viteRequire()],
+  plugins: [vue(), graphql(), viteRequire(), svgLoader({defaultImport: 'raw'})],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),