Take into account a zoom level to scale slide by polyfill

CHANGELOG.md

@@ -4,15 +4,17 @@
 
 ### Breaking
 
-- Marp renderer can no longer extend by VSCode extensions ([#17](https://github.com/marp-team/marp-vscode/pull/17))
+- Marp renderer can no longer extend by VS Code extensions ([#17](https://github.com/marp-team/marp-vscode/pull/17))
 
 ### Changed
 
 - Simplify Marp integration by using independent instance ([#17](https://github.com/marp-team/marp-vscode/pull/17))
+- Upgrade dependent packages to the latest ([#19](https://github.com/marp-team/marp-vscode/pull/19))
 
 ### Fixed
 
 - Fix misdetection of front-matter in code block ([#18](https://github.com/marp-team/marp-vscode/pull/18))
+- Take into account a zoom level when scaling slide via polyfill ([#8](https://github.com/marp-team/marp-vscode/issues/8), [#19](https://github.com/marp-team/marp-vscode/pull/19))
 
 ## v0.0.6 - 2019-03-19
 

package.json

@@ -127,9 +127,9 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^1.16.4",
     "rimraf": "^2.6.3",
-    "rollup": "^1.6.0",
+    "rollup": "^1.7.0",
     "rollup-plugin-commonjs": "^9.2.1",
-    "rollup-plugin-json": "^3.1.0",
+    "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^4.0.1",
     "rollup-plugin-terser": "^4.0.4",
     "rollup-plugin-typescript": "^1.0.0",
@@ -140,12 +140,12 @@
     "tslint": "^5.14.0",
     "tslint-config-airbnb": "^5.11.1",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "^3.3.3333",
+    "typescript": "^3.3.4000",
     "vsce": "^1.58.0",
-    "vscode": "^1.1.30"
+    "vscode": "^1.1.33"
   },
   "dependencies": {
-    "@marp-team/marp-core": "^0.7.0",
-    "@marp-team/marpit-svg-polyfill": "^0.2.0"
+    "@marp-team/marp-core": "^0.7.1",
+    "@marp-team/marpit-svg-polyfill": "^0.3.0"
   }
 }

src/extension.test.ts

@@ -8,6 +8,7 @@ jest.mock('vscode')
 const mockWorkspaceConfig = (conf: { [key: string]: any } = {}) => {
   const config = {
     'markdown.marp.enableHtml': false,
+    'window.zoomLevel': 0,
     ...conf,
   }
 
@@ -48,7 +49,7 @@ describe('#extendMarkdownIt', () => {
       for (const markdown of [baseMd, confusingMd]) {
         const html = extendMarkdownIt(new markdownIt()).render(markdown)
 
-        expect(html).not.toContain('<div id="marp-vscode">')
+        expect(html).not.toContain('<div id="marp-vscode" data-zoom="1">')
         expect(html).not.toContain('<style id="marp-vscode-style">')
         expect(html).not.toContain('svg')
         expect(html).not.toContain('img')
@@ -58,7 +59,7 @@ describe('#extendMarkdownIt', () => {
     it('uses Marp engine when enabled marp front-matter', () => {
       const html = extendMarkdownIt(new markdownIt()).render(marpMd(baseMd))
 
-      expect(html).toContain('<div id="marp-vscode">')
+      expect(html).toContain('<div id="marp-vscode" data-zoom="1">')
       expect(html).toContain('<style id="marp-vscode-style">')
       expect(html).toContain('svg')
       expect(html).toContain('img')
@@ -68,6 +69,16 @@ describe('#extendMarkdownIt', () => {
   describe('Workspace config', () => {
     const md = extendMarkdownIt(new markdownIt())
 
+    describe('window.zoomLevel', () => {
+      it('assigns the calculated scale to data-zoom attribute', () => {
+        mockWorkspaceConfig({ 'window.zoomLevel': 1 })
+        expect(md.render(marpMd(''))).toContain('data-zoom="1.2"')
+
+        mockWorkspaceConfig({ 'window.zoomLevel': 2 })
+        expect(md.render(marpMd(''))).toContain('data-zoom="1.44"')
+      })
+    })
+
     describe('markdown.marp.enableHtml', () => {
       it('does not render HTML elements when disabled', () => {
         mockWorkspaceConfig({ 'markdown.marp.enableHtml': false })

src/extension.ts

@@ -15,19 +15,22 @@ export function extendMarkdownIt(md: any) {
   const { parse, renderer } = md
   const { render } = renderer
 
-  md[marpVscode] = false
   md.parse = (markdown: string, env: any) => {
     // Generate tokens by Marp if enabled
-    md[marpVscode] =
-      detectMarpFromFrontMatter(markdown) &&
-      new Marp({
-        container: { tag: 'div', id: 'marp-vscode' },
+    if (detectMarpFromFrontMatter(markdown)) {
+      const zoom =
+        workspace.getConfiguration('window').get<number>('zoomLevel') || 0
+
+      md[marpVscode] = new Marp({
+        container: { tag: 'div', id: 'marp-vscode', 'data-zoom': 1.2 ** zoom },
         html: marpConfiguration().get<boolean>('enableHtml') || undefined,
       })
 
-    if (md[marpVscode]) return md[marpVscode].markdown.parse(markdown, env)
+      return md[marpVscode].markdown.parse(markdown, env)
+    }
 
     // Fallback to original instance if Marp was not enabled
+    md[marpVscode] = false
     return parse.call(md, markdown, env)
   }
 

src/preview.ts

@@ -2,9 +2,9 @@ import browserCjs from '@marp-team/marp-core/lib/browser.cjs'
 import { webkit } from '@marp-team/marpit-svg-polyfill'
 
 export default function preview() {
-  const marpEnabled = document.getElementById('marp-vscode')
+  const marpVscode = document.getElementById('marp-vscode')
 
-  if (marpEnabled) {
+  if (marpVscode) {
     document.body.classList.add('marp-vscode')
 
     // Remove default styles
@@ -22,7 +22,7 @@ export default function preview() {
 
     // VSCode has the same rendering bug as WebKit.
     const observer = () => {
-      webkit()
+      webkit(Number.parseFloat(marpVscode.dataset.zoom || '1') || 1)
       window.requestAnimationFrame(observer)
     }
     observer()