svg-paper - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

js/src/adjust-text.js

 'use strict'
 
-export default (selector, config) => {
+export default (selector, config, paperPixelRatio = 1) => {
   const $this = document.querySelector(selector)
@@ -16,3 +16,3 @@
 
-    if ($this.clientWidth > config.textLength) {
+    if ($this.getBoundingClientRect().width * paperPixelRatio > config.textLength) {
       $this.querySelector('tspan').setAttribute('textLength', config.textLength)
@@ -19,0 +19,0 @@ $this.querySelector('tspan').setAttribute('lengthAdjust', 'spacingAndGlyphs')

js/src/svg-paper.js

@@ -69,6 +69,15 @@ 'use strict'
     this.adjustTextQueries.forEach(query => {
+      // if viewBox is specified, Element.clientWidth and Element.getBoundingClientRect() return different values
+      //   clientWidth: ???
+      //   getBoundingClientRect(): pure pixel value
+      // so this library uses getBoundingClientRect() and pre-calculated ratio to specify the width of some elements
+      // @see https://stackoverflow.com/questions/15335926/how-to-use-the-svg-viewbox-attribute
+      const $svg = document.querySelector(this.selector)
+      const viewBoxWidth = $svg.getAttribute('viewBox')?.split(/ +/)[2] ?? null
+      const paperPixelRatio = viewBoxWidth ? parseFloat(viewBoxWidth) / $svg.getBoundingClientRect().width : 1
+
       adjustText(query.selector, {
         textLength: query.textLength,
         'text-anchor': query.textAnchor,
-      })
+      }, paperPixelRatio)
     })
@@ -75,0 +84,0 @@

package.json

 {
   "name": "svg-paper",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "The world's most maintainable way to create paper-printable documents 🖨💘",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/ttskch/svg-paper",

No alert changes

Improved metrics

Total package byte prevSize

193319

increased by2.37%

Lines of code

883

increased by1.96%

No dependency changes