Merge pull request #9 from deckgo/feat/improve-positioning

peterpeterparker · web-flow · commit b028bc8ee33a · 2021-04-05T21:40:32.000+02:00
feat: improve positioning of extracted texts
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # 1.0.4 (2021-04-05)
 
+### Features
+
+- improve positioning of extracted texts
+
 ### Fix
 
 - default fill color (such as "black")
diff --git a/src/utils/svg.utils.ts b/src/utils/svg.utils.ts
@@ -49,7 +49,6 @@ const initDeckGoDRR = ({text, svg, tspan}: {text: SVGTextElement; svg: SVGGraphi
     return deckGoDrr;
   }
 
-  const svgBbox: DOMRect = svg.getBBox();
   const textBbox: DOMRect = (tspan || text).getBBox();
 
   const translate: RegExpExecArray | null = /translate\((.*?)\)/g.exec(text.getAttribute('transform') || '');
@@ -68,8 +67,10 @@ const initDeckGoDRR = ({text, svg, tspan}: {text: SVGTextElement; svg: SVGGraphi
     }
   }
 
-  const targetY: number = (100 * y) / (svgBbox.height - svgBbox.y);
-  const targetX: number = (100 * x) / (svgBbox.width - svgBbox.x);
+  const {width, height} = svgSize(svg);
+
+  const targetY: number = (100 * y) / height;
+  const targetX: number = (100 * x) / width;
 
   deckGoDrr.style.setProperty('--top', `${targetY}%`);
   deckGoDrr.style.setProperty('--left', `${targetX}%`);

Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,6 @@ const initDeckGoDRR = ({text, svg, tspan}: {text: SVGTextElement; svg: SVGGraphi`
`49`	`49`	`return deckGoDrr;`
`50`	`50`	`}`
`51`	`51`
`52`		`- const svgBbox: DOMRect = svg.getBBox();`
`53`	`52`	`const textBbox: DOMRect = (tspan \|\| text).getBBox();`
`54`	`53`
`55`	`54`	`const translate: RegExpExecArray \| null = /translate\((.*?)\)/g.exec(text.getAttribute('transform') \|\| '');`
`@@ -68,8 +67,10 @@ const initDeckGoDRR = ({text, svg, tspan}: {text: SVGTextElement; svg: SVGGraphi`
`68`	`67`	`}`
`69`	`68`	`}`
`70`	`69`
`71`		`- const targetY: number = (100 * y) / (svgBbox.height - svgBbox.y);`
`72`		`- const targetX: number = (100 * x) / (svgBbox.width - svgBbox.x);`
	`70`	`+ const {width, height} = svgSize(svg);`
	`71`	`+`
	`72`	`+ const targetY: number = (100 * y) / height;`
	`73`	`+ const targetX: number = (100 * x) / width;`
`73`	`74`
`74`	`75`	deckGoDrr.style.setProperty('--top', `${targetY}%`);
`75`	`76`	deckGoDrr.style.setProperty('--left', `${targetX}%`);