More consisten zoom behavior

josa42 · Dec 30, 2016 · ecf7726 · ecf7726
1 parent a3743e3
commit ecf7726
Show file tree

Hide file tree

Showing 10 changed files with 231 additions and 16 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,5 +1,8 @@
 # Changelog
 
+## 0.11.0
+- More consistent zooming behavior
+
 ## 0.10.2
 - Fix bugs related to not properly deactivating the package.
 

diff --git a/lib/get-svg-size.js b/lib/get-svg-size.js
@@ -0,0 +1,28 @@
+'use babel'
+
+import { $ } from 'atom-space-pen-views'
+
+const { SVG_LENGTHTYPE_PERCENTAGE } = SVGLength
+
+export default function getSVGSize(svg) {
+
+  let style = getComputedStyle(svg)
+
+  let width = parseFloat(style.width)
+  let height = parseFloat(style.height)
+
+  if (svg.style.width && svg.style.height) {
+    width = parseFloat(svg.style.width)
+    height = parseFloat(svg.style.height)
+
+  } else if (svg.width.baseVal.unitType !== SVG_LENGTHTYPE_PERCENTAGE || svg.height.baseVal.unitType !== SVG_LENGTHTYPE_PERCENTAGE) {
+    width = svg.width.baseVal.value
+    height = svg.height.baseVal.value
+
+  } else if (svg.viewBox.baseVal.width && svg.viewBox.baseVal.height) {
+    width = svg.viewBox.baseVal.width
+    height = svg.viewBox.baseVal.height
+  }
+
+  return { width, height }
+}
diff --git a/lib/svg-preview-view.js b/lib/svg-preview-view.js
@@ -4,6 +4,8 @@ import path from 'path'
 import { Emitter, Disposable, CompositeDisposable, File } from 'atom'
 import { $, $$$, View } from 'atom-space-pen-views'
 import debounce from 'debounce'
+import getSVGSize from './get-svg-size'
+
 let fs = null // Defer until used
 let svgToRaster = null // Defer until used
 
@@ -43,7 +45,7 @@ class SvgPreviewView extends View {
     })
   }
 
-  constructor({ editorId, filePath }) {
+  constructor({ editorId, filePath, zoomValue }) {
     super()
 
     this.editorId = editorId
@@ -52,7 +54,7 @@ class SvgPreviewView extends View {
     this.emitter = new Emitter
     this.disposables = new CompositeDisposable
 
-    this.zoomValue = 1
+    this.zoomValue = zoomValue || 1
   }
 
   attached() {
@@ -88,7 +90,8 @@ class SvgPreviewView extends View {
     return {
       deserializer: 'SvgPreviewView',
       filePath: this.getPath(),
-      editorId: this.editorId
+      editorId: this.editorId,
+      zoomValue: this.zoomValue
     }
   }
 
@@ -152,7 +155,7 @@ class SvgPreviewView extends View {
   }
 
   zoom(offset) {
-    this.zoomTo(this.zoomValue + offset)
+    this.zoomTo(this.zoomValue + this.zoomValue * offset)
   }
 
   zoomReset() {
@@ -164,18 +167,25 @@ class SvgPreviewView extends View {
       return
     }
 
-    this.resetZoomButton.text(`${Math.round(zoomValue * 100)}%`)
-
-    this.zoomValue = zoomValue
-
     const svg = this.canvas.find('svg')
     if (svg[0]) {
-      svg.width('auto').height('auto')
 
-      const width = svg.width() * zoomValue
-      const height = svg.height() * zoomValue
+      let width = svg.width() * zoomValue
+      let height = svg.height() * zoomValue
 
-      svg.width(width).height(height)
+      const factor = svg.data('factor')
+      if (factor) {
+        width /= factor
+        height /= factor
+      }
+
+      svg
+        .width(width)
+        .height(height)
+        .data('factor', zoomValue)
+
+      this.zoomValue = zoomValue
+      this.resetZoomButton.text(`${Math.round(zoomValue * 100)}%`)
     }
   }
 
@@ -237,7 +247,6 @@ class SvgPreviewView extends View {
   }
 
   renderSvg() {
-    this.showLoading()
     return this.getSvgSource()
       .then((source) => this.renderSvgText(source))
   }
@@ -254,10 +263,26 @@ class SvgPreviewView extends View {
 
   renderSvgText(text) {
     if (!text) { return }
+
+    const scrollTop = this.canvas.scrollTop()
+    const scrollLeft = this.canvas.scrollLeft()
+
     this.canvas.html(text)
+
+    const svg = this.canvas.find('svg')
+    if(svg.get(0)) {
+      const { width, height } = getSVGSize(svg.get(0))
+      svg.width(width)
+      svg.height(height)
+
+      this.zoomTo(this.zoomValue)
+
+      this.canvas.scrollTop(scrollTop)
+      this.canvas.scrollLeft(scrollLeft)
+    }
+
     this.emitter.emit('did-change-svg')
     this.originalTrigger('svg-preview:svg-changed')
-    this.zoom(0)
   }
 
   getTitle() {

diff --git a/spec/fixtures/subdir/file-size-attr.svg b/spec/fixtures/subdir/file-size-attr.svg
diff --git a/spec/fixtures/subdir/file-size-no-viewbox.svg b/spec/fixtures/subdir/file-size-no-viewbox.svg
diff --git a/spec/fixtures/subdir/file-size-none.svg b/spec/fixtures/subdir/file-size-none.svg
diff --git a/spec/fixtures/subdir/file-size-style.svg b/spec/fixtures/subdir/file-size-style.svg
diff --git a/spec/get-svg-size-spec.js b/spec/get-svg-size-spec.js
@@ -0,0 +1,35 @@
+'use babel'
+
+import fs from 'fs'
+import path from 'path'
+
+const { $ } = require('atom-space-pen-views')
+const getSVGSize = require('../lib/get-svg-size')
+
+function getSVGElement(name) {
+
+  const s = fs.readFileSync(path.join(__dirname, 'fixtures', 'subdir', `${name}.svg`), 'utf-8')
+  const div = document.createElement('div')
+
+  div.innerHTML = s
+
+  return div.childNodes[0]
+}
+
+describe('getSVGSize()', () => {
+
+  it('gets size of svg with width/height attributes', () => {
+    const svg = getSVGElement('file-size-attr')
+    expect(getSVGSize(svg)).toEqual({ width: 400, height: 400 })
+  })
+
+  it('gets size of svg with width/height style attributes', () => {
+    const svg = getSVGElement('file-size-style')
+    expect(getSVGSize(svg)).toEqual({ width: 400, height: 400 })
+  })
+
+  it('gets size of svg with only viewBox attribute', () => {
+    const svg = getSVGElement('file-size-none')
+    expect(getSVGSize(svg)).toEqual({ width: 100, height: 100 })
+  })
+})
diff --git a/spec/svg-preview-spec.js b/spec/svg-preview-spec.js
@@ -151,13 +151,16 @@ describe('SVG preview package', () => {
           previewPane.splitRight({ copyActiveItem: true })
           previewPane.activate()
 
+          let didChange = false
+          preview.onDidChangeSvg(() => didChange = true)
+
           waitsForPromise(() => atom.workspace.open())
           runs(() => {
             editorPane.activate()
             return svgEditor.setText("<svg></svg>")
           })
 
-          waitsFor(() => preview.find('.image-canvas').html().match(/<svg[^>]*><\/svg>/))
+          waitsFor(() => didChange)
           runs(() => {
             expect(editorPane.isActive()).toBe(true)
             expect(previewPane.getActiveItem()).toBe(preview)
@@ -176,7 +179,7 @@ describe('SVG preview package', () => {
 
           waitsFor(() => didStopChangingHandler.callCount > 0)
           runs(() => {
-            expect(preview.html()).not.toContain('<svg foo="bar"></svg>')
+            expect(preview.find('.image-canvas').html()).not.toContain('<svg foo="bar"')
             atom.workspace.getActiveTextEditor().save()
           })
 

diff --git a/styles/svg-preview.less b/styles/svg-preview.less
@@ -62,6 +62,15 @@
     height: calc(~"100% - 44px");
 
     padding: @spacing;
+
+    flex: 1 1 0;
+    display: flex;
+    overflow: auto;
+
+    svg {
+      flex: none;
+      margin: auto;
+    }
   }
 
   // Background color