Merge pull request #44 from cssho/zoon-in-out

implement zoon in/out (#43)

Author: cssho

.vscode/launch.json

@@ -8,7 +8,7 @@
             "request": "launch",
             "runtimeExecutable": "${execPath}",
             "args": ["--extensionDevelopmentPath=${workspaceRoot}" ],
-            "stopOnEntry": true,
+            "stopOnEntry": false,
             "sourceMaps": true,
             "outFiles": [ "${workspaceRoot}/out/src/**/*.js" ],
             "preLaunchTask": "npm: watch"

README-ja.md

@@ -21,6 +21,9 @@ EXPLORERのコンテキストメニューからSVGをプレビューする
 ### View SVG - `Alt+Shift+S O`
 SVGをエディタ上で表示
 
+#### 拡大/縮小
+ctrl/cmdキーを押しながらマウスホイールを上下
+
 ### Export PNG - `Alt+Shift+S E`
 SVGをPNGに変換
 

README.md

@@ -22,6 +22,9 @@ Viewing an SVG file from explorer context menu.
 ### View SVG - `Alt+Shift+S O`
 Display SVG on an Editor
 
+#### Zoom in/out
+Holding ctrl/cmd and using mouse wheel(up/down)
+
 ### Export PNG - `Alt+Shift+S E`
 Convert from SVG to PNG
 

media/preview.js

@@ -0,0 +1,37 @@
+const regexp = /scale\(([0-9\.]+)\)/g;
+window.addEventListener("load", function () {
+    document.onwheel = function (event) {
+        if (event.ctrlKey) {
+            if (event.wheelDeltaY < 0) zoomOut();
+            else zoomIn();
+        }
+    }
+}, false);
+
+function zoomIn() {
+    var svgimg = document.getElementById('svgimg');
+    var zoomFloat = currentZoomValue(svgimg);
+    zoomFloat += zoomFloat * 0.1;
+    svgimg.style.transform = 'scale(' + zoomFloat + ')';
+}
+
+function zoomOut() {
+    var svgimg = document.getElementById('svgimg');
+    var zoomFloat = currentZoomValue(svgimg);
+    zoomFloat -= zoomFloat * 0.1;
+    if (zoomFloat < 0.1) return;
+    svgimg.style.transform = 'scale(' + zoomFloat + ')';
+};
+
+function currentZoomValue(svgimg) {
+    var zoom;
+    if (svgimg.style.transform) {
+        var array;
+        while ((array = regexp.exec(svgimg.style.transform)) !== null) {
+            zoom = array[1];
+        }
+    } else
+        zoom = '1.0';
+    var zoomFloat = parseFloat(zoom);
+    return zoomFloat;
+}

package.json

@@ -2,7 +2,7 @@
     "name": "vscode-svgviewer",
     "displayName": "SVG Viewer",
     "description": "SVG Viewer for Visual Studio Code.",
-    "version": "1.4.4",
+    "version": "1.4.5",
     "publisher": "cssho",
     "engines": {
         "vscode": "^1.12.0"

src/extension.ts

@@ -23,7 +23,7 @@ export function activate(context: vscode.ExtensionContext) {
             path.join(path.dirname(phantomjs.path), 'phantom', 'bin', 'phantomjs');
     }
 
-    let provider = new SvgDocumentContentProvider();
+    let provider = new SvgDocumentContentProvider(context);
     let registration = vscode.workspace.registerTextDocumentContentProvider('svg-preview', provider);
 
     let fileUriProviders = new Map<string, { uri: vscode.Uri, provider: SvgFileContentProvider, registration: vscode.Disposable }>();
@@ -70,7 +70,7 @@ export function activate(context: vscode.ExtensionContext) {
         let fileUriProvider = fileUriProviders.get(fName);
         if (fileUriProvider == undefined) {
             let fileUri = getSvgUri(uri);
-            let fileProvider = new SvgFileContentProvider(fileUri, document.fileName);
+            let fileProvider = new SvgFileContentProvider(context, fileUri, document.fileName);
             let fileRegistration = vscode.workspace.registerTextDocumentContentProvider('svg-preview', fileProvider);
             fileUriProvider = { uri: fileUri, provider: fileProvider, registration: fileRegistration };
             fileUriProviders.set(fName, fileUriProvider);

src/svgProvider.ts

@@ -1,6 +1,7 @@
 'use strict';
 
 import * as vscode from 'vscode';
+import * as path from 'path';
 import fs = require('fs')
 
 export function getSvgUri(uri: vscode.Uri) {
@@ -19,6 +20,8 @@ export class SvgDocumentContentProvider implements vscode.TextDocumentContentPro
     private _onDidChange = new vscode.EventEmitter<vscode.Uri>();
     private _waiting: boolean = false;
 
+    public constructor(protected context: vscode.ExtensionContext) {}
+
     public provideTextDocumentContent(uri: vscode.Uri): Thenable<string> {
         let sourceUri = vscode.Uri.parse(uri.query);
         console.log(sourceUri);
@@ -44,6 +47,10 @@ export class SvgDocumentContentProvider implements vscode.TextDocumentContentPro
         }
     }
 
+    private getPath(file: string): string {
+        return path.join(this.context.extensionPath, file);
+    }
+
     protected snippet(properties): string {
         let showTransGrid = vscode.workspace.getConfiguration('svgviewer').get('transparencygrid');
         let transparencycolor = vscode.workspace.getConfiguration('svgviewer').get('transparencycolor');
@@ -54,6 +61,7 @@ export class SvgDocumentContentProvider implements vscode.TextDocumentContentPro
 <style type="text/css">
 .svgbg img {
     background: `+ transparencycolor + `;
+    transform-origin: top left;
 }
 </style>`;
             } else {
@@ -63,18 +71,24 @@ export class SvgDocumentContentProvider implements vscode.TextDocumentContentPro
     background:initial;
     background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAeUlEQVRYR+3XMQ4AIQhEUTiU9+/hUGy9Wk2G8luDIS8EMWdmYvF09+JtEUmBpieCJiA96AIiiKAswEsik10JCCIoCrAsiGBPOIK2YFWt/knOOW5Nv/ykQNMTQRMwEERQFWAOqmJ3PIIIigIMahHs3ahZt0xCetAEjA99oc8dGNmnIAAAAABJRU5ErkJggg==);
     background-position: left,top;
+    transform-origin: top left;
 }
 </style>`;
             }
         }
-        return `<!DOCTYPE html><html><head>${transparencyGridCss}</head><body><div class="svgbg"><img src="data:image/svg+xml,${encodeURIComponent(properties)}"></div></body></html>`;
+
+        return `<!DOCTYPE html><html><head>${transparencyGridCss}
+<script src="${this.getPath('media/preview.js')}"></script>
+</script></head><body>
+        <div class="svgbg"><img id="svgimg" src="data:image/svg+xml,${encodeURIComponent(properties)}"></div>
+        </body></html>`;
     }
 }
 
 export class SvgFileContentProvider extends SvgDocumentContentProvider {
     filename: string;
-    constructor(previewUri: vscode.Uri, filename: string) {
-        super();
+    constructor(protected context: vscode.ExtensionContext,previewUri: vscode.Uri, filename: string) {
+        super(context);
         this.filename = filename;
         vscode.workspace.createFileSystemWatcher(this.filename, true, false, true).onDidChange((e: vscode.Uri) => {
             this.update(previewUri);