fix line break in image export

b310-digital · Jan 16, 2024 · b420ed1 · b420ed1
1 parent e9376d7
commit b420ed1
Show file tree

Hide file tree

Showing 6 changed files with 276 additions and 141 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -42,7 +42,7 @@ USER node
 RUN export CHROME_BIN=/usr/bin/chromium-browser
 
 COPY --chown=node:node teammapper-frontend/package.json teammapper-frontend/package-lock.json $APP_FRONTEND_PATH/
-RUN npm --prefix teammapper-frontend install
+# RUN npm --prefix teammapper-frontend install
 
 COPY --chown=node:node teammapper-backend/package.json teammapper-backend/package-lock.json $APP_BACKEND_PATH/
 RUN npm --prefix teammapper-backend install
diff --git a/docker-compose-prod.yml b/docker-compose-prod.yml
@@ -27,7 +27,7 @@ services:
       - postgres_prod
 
   postgres_prod:
-    image: postgres:12-alpine
+    image: postgres:15-alpine
     # Pass config parameters to the postgres server.
     # Find more information below when you need to generate the ssl-relevant file your self
     # command: -c ssl=on -c ssl_cert_file=/var/lib/postgresql/server.crt -c ssl_key_file=/var/lib/postgresql/server.key

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -38,7 +38,7 @@ services:
       - postgres
 
   postgres:
-    image: postgres:12-alpine
+    image: postgres:15-alpine
     environment:
       PGDATA: /var/lib/postgresql/data/pgdata
       POSTGRES_DB: ${POSTGRES_DB:-teammapper-backend-dev}

diff --git a/teammapper-frontend/mmp/src/map/handlers/export.ts b/teammapper-frontend/mmp/src/map/handlers/export.ts
@@ -129,18 +129,21 @@ export default class Export {
         svg.appendChild(clone)
 
         // convert all foreignObjects to native svg text to ensure better compatibility with svg readers
-        d3.select(clone).selectAll("foreignObject").nodes().forEach((fo: HTMLElement) => {
+        d3.select(clone).selectAll('foreignObject').nodes().forEach((fo: HTMLElement) => {
             const parent = fo.parentElement
+            const x = parseInt(fo.getAttribute('x'), 10) + Math.floor(parseInt(fo.getAttribute('width'), 10) / 2)
+            const splittedText = fo.firstChild.textContent.split('\n')
+            const svgTextWithLineBreaks = splittedText.map((text, i) => `<tspan dy="${(i === 0 || i === splittedText.length - 1) ? '0' : '1.2em'}" x="${x}">${text}</tspan>`)
             d3.select(parent)
-              .attr("width", fo.getAttribute("width"))
-              .append("text")
-              .text(fo.firstChild.textContent)
-              .attr("y", parseInt(fo.getAttribute('y'), 10) + parseInt((fo.firstElementChild as HTMLElement).style.fontSize, 10))
-              .attr("x", parseInt(fo.getAttribute('x'), 10) + Math.floor(parseInt(fo.getAttribute('width'), 10) / 2))
-              .attr("text-anchor", "middle")
-              .attr("font-family", (fo.firstElementChild as HTMLElement).style.fontFamily)
-              .attr("font-size", (fo.firstElementChild as HTMLElement).style.fontSize)
-              .attr("fill", (fo.firstElementChild as HTMLElement).style.color);
+              .attr('width', fo.getAttribute('width'))
+              .append('text')
+              .attr('y', parseInt(fo.getAttribute('y'), 10) + parseInt((fo.firstElementChild as HTMLElement).style.fontSize, 10))
+              .attr('x', x)
+              .attr('text-anchor', 'middle')
+              .attr('font-family', (fo.firstElementChild as HTMLElement).style.fontFamily)
+              .attr('font-size', (fo.firstElementChild as HTMLElement).style.fontSize)
+              .attr('fill', (fo.firstElementChild as HTMLElement).style.color)
+              .html(svgTextWithLineBreaks.join(''))
             fo.remove()
         })