feat(panzoom): add pan option - roundToPixels (#477)

timmywil · Dec 20, 2021 · 41498a7 · 41498a7
1 parent 71f3b06
commit 41498a7
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git a/src/css.ts b/src/css.ts
@@ -100,6 +100,10 @@ export function setTransform(
   { x, y, scale, isSVG }: CurrentValues,
   _options?: PanzoomOptions
 ) {
+  if (_options !== undefined && _options.roundToPixels) {
+    x = Math.round(x)
+    y = Math.round(y)
+  }
   setStyle(elem, 'transform', `scale(${scale}) translate(${x}px, ${y}px)`)
   if (isSVG && isIE) {
     const matrixValue = window.getComputedStyle(elem).getPropertyValue('transform')

diff --git a/src/types.ts b/src/types.ts
@@ -166,6 +166,8 @@ export interface PanOnlyOptions {
   relative?: boolean
   /** Disable panning while the scale is equal to the starting value */
   panOnlyWhenZoomed?: boolean
+  /** Round transform-translate x and values to whole pixels. (Prevents images getting blurry)  */
+  roundToPixels?: boolean
 }
 
 export interface ZoomOnlyOptions {

diff --git a/test/unit/css.test.ts b/test/unit/css.test.ts
@@ -42,5 +42,15 @@ describe('css', () => {
       setTransform(elem, { x: 1, y: 1, scale: 1 })
       assertStyle(elem, 'transform', 'scale(1) translate(1px, 1px)')
     })
+    it('sets the default transform-origin property with roundToPixels = true for HTML', () => {
+      const elem = document.createElement('div')
+      setTransform(elem, { x: 1.25, y: 1.75, scale: 1 }, { roundToPixels: true })
+      assertStyle(elem, 'transform', 'scale(1) translate(1px, 2px)')
+    })
+    it('sets the default transform-origin property with roundToPixels = true for SCG', () => {
+      const elem = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      setTransform(elem, { x: 1.25, y: 1.75, scale: 1 }, { roundToPixels: true })
+      assertStyle(elem, 'transform', 'scale(1) translate(1px, 2px)')
+    })
   })
 })