From 8a5fee50cf95a9425da860c789fdacd4b11e0055 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Mon, 24 Feb 2025 04:33:33 +0100 Subject: [PATCH] MarkerFactoryRework --- package-lock.json | 54 ++++++++++++++++++++ package.json | 1 + rollup.config.js | 7 +++ src/Utils/MarkerIconFactory.tsx | 87 +++++++++++++++++++++++---------- 4 files changed, 124 insertions(+), 25 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3f3684c4..53c45ecb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -68,6 +68,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "rollup": "^4.34.6", + "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-dts": "^6.1.1", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-svg": "^2.0.0", @@ -7037,6 +7038,16 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-reference": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz", + "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "*" + } + }, "node_modules/is-regex": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz", @@ -10647,6 +10658,41 @@ "fsevents": "~2.3.2" } }, + "node_modules/rollup-plugin-commonjs": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-10.1.0.tgz", + "integrity": "sha512-jlXbjZSQg8EIeAAvepNwhJj++qJWNJw1Cl0YnOqKtP5Djx+fFGkp3WRh+W0ASCaFG5w1jhmzDxgu3SJuVxPF4Q==", + "deprecated": "This package has been deprecated and is no longer maintained. Please use @rollup/plugin-commonjs.", + "dev": true, + "license": "MIT", + "dependencies": { + "estree-walker": "^0.6.1", + "is-reference": "^1.1.2", + "magic-string": "^0.25.2", + "resolve": "^1.11.0", + "rollup-pluginutils": "^2.8.1" + }, + "peerDependencies": { + "rollup": ">=1.12.0" + } + }, + "node_modules/rollup-plugin-commonjs/node_modules/estree-walker": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz", + "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==", + "dev": true, + "license": "MIT" + }, + "node_modules/rollup-plugin-commonjs/node_modules/magic-string": { + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz", + "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "sourcemap-codec": "^1.4.8" + } + }, "node_modules/rollup-plugin-dts": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/rollup-plugin-dts/-/rollup-plugin-dts-6.1.1.tgz", @@ -11126,6 +11172,14 @@ "node": ">=0.10.0" } }, + "node_modules/sourcemap-codec": { + "version": "1.4.8", + "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", + "deprecated": "Please use @jridgewell/sourcemap-codec instead", + "dev": true, + "license": "MIT" + }, "node_modules/space-separated-tokens": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz", diff --git a/package.json b/package.json index a230b773..08bccf11 100644 --- a/package.json +++ b/package.json @@ -73,6 +73,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "rollup": "^4.34.6", + "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-dts": "^6.1.1", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-svg": "^2.0.0", diff --git a/rollup.config.js b/rollup.config.js index 33893a11..325e2ea0 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -7,6 +7,7 @@ import typescript from '@rollup/plugin-typescript' import { dts } from 'rollup-plugin-dts' import postcss from 'rollup-plugin-postcss' import svg from 'rollup-plugin-svg' +import commonjs from 'rollup-plugin-commonjs'; const __filename = fileURLToPath(import.meta.url) const __dirname = path.dirname(__filename) @@ -42,6 +43,12 @@ export default [ tsconfig: './tsconfig.json', }), svg({ base64: true }), + commonjs({ + namedExports: { + // this is needed for the MarkerIconFactory construct + 'react-dom/server': ['renderToString'], + }, + }), ], external: [ 'react', diff --git a/src/Utils/MarkerIconFactory.tsx b/src/Utils/MarkerIconFactory.tsx index 1734c0a7..3915b13e 100644 --- a/src/Utils/MarkerIconFactory.tsx +++ b/src/Utils/MarkerIconFactory.tsx @@ -1,5 +1,3 @@ -/* eslint-disable @typescript-eslint/restrict-template-expressions */ -/* eslint-disable @typescript-eslint/no-unsafe-return */ import { divIcon, Point } from 'leaflet' import { renderToString } from 'react-dom/server' @@ -25,30 +23,69 @@ import TreeSVG from '#assets/icons/tree.svg' import UserSVG from '#assets/icons/user.svg' const createSvg = (shape: string, markerColor: string, borderColor: string) => { - const svgMap = { - circle: - '', - square: - '', - star: - '', - penta: - '', + '" + opacity='1' + /> + + ) + + case 'square': + return ( + + + + + + + ) + case 'star': + return ( + + + + + + + ) + case 'penta': + return ( + + + + + + + ) + default: + return <> } - // eslint-disable-next-line security/detect-object-injection - return svgMap[shape] } const addIcon = (icon: string) => { @@ -100,7 +137,7 @@ const addIcon = (icon: string) => { const MarkerIconFactory = (shape: string, color1: string, color2: string, icon: string) => { return divIcon({ - html: `${createSvg(shape, color1, color2)}${renderToString(addIcon(icon))}`, + html: `${renderToString(createSvg(shape, color1, color2))}${renderToString(addIcon(icon))}`, iconAnchor: [17, 40], popupAnchor: [0, -40], iconSize: new Point(40, 46),