Merge pull request #38 from kaishuu0123/feat/vscode-new-api

Follow VSCode New API

.gitignore

@@ -3,4 +3,4 @@ node_modules
 .vscode-test/
 .vsix
 .DS_Store
-dist/js/index.js
+media/index.js

.vscode/launch.json

@@ -6,9 +6,11 @@
             "type": "extensionHost",
             "request": "launch",
             "runtimeExecutable": "${execPath}",
-            "args": ["--extensionDevelopmentPath=${workspaceRoot}" ],
-            "outFiles": ["${workspaceFolder}/out/src/**/*.js"],
-            "preLaunchTask": "npm: watch"
+            "args": [
+                "--extensionDevelopmentPath=${workspaceRoot}"
+            ],
+            "outFiles": ["${workspaceFolder}/out/**/*.js"],
+            "preLaunchTask": "Watch Extension"
         },
         {
             "name": "Launch Tests",

.vscode/tasks.json

@@ -4,17 +4,13 @@
     "version": "2.0.0",
     "tasks": [
         {
+            "label": "Watch Extension",
             "type": "npm",
-            "script": "watch",
-            "problemMatcher": "$tsc-watch",
-            "isBackground": true,
-            "presentation": {
-                "reveal": "never"
-            },
-            "group": {
-                "kind": "build",
-                "isDefault": true
-            }
+            "script": "extension:watch",
+            "problemMatcher": [
+                "$tsc-watch"
+            ],
+            "isBackground": true
         }
     ]
 }

dist/css/toolbar.css → media/toolbar.css

@@ -43,29 +43,29 @@
 
 body.vscode-high-contrast .toolbar .btn-group .btn.btn-plus,
 body.vscode-dark .toolbar .btn-group .btn.btn-plus {
-    background-image: url(vscode-resource:../images/Icon_plus_inverse.svg);
+    background-image: url(Icon_plus_inverse.svg);
 }
 
 body.vscode-high-contrast .toolbar .btn-group .btn.btn-minus,
 body.vscode-dark .toolbar .btn-group .btn.btn-minus {
-    background-image: url(vscode-resource:../images/Icon_minus_inverse.svg);
+    background-image: url(Icon_minus_inverse.svg);
 }
 
 body.vscode-high-contrast .toolbar .btn-group .btn.btn-one-to-one,
 body.vscode-dark .toolbar .btn-group .btn.btn-one-to-one {
-    background-image: url(vscode-resource:../images/Icon_one_to_one_inverse.svg);
+    background-image: url(Icon_one_to_one_inverse.svg);
 }
 
 body.vscode-light .toolbar .btn-group .btn.btn-plus {
-    background-image: url(vscode-resource:../images/Icon_plus.svg);
+    background-image: url(Icon_plus.svg);
 }
 
 body.vscode-light .toolbar .btn-group .btn.btn-minus {
-    background-image: url(vscode-resource:../images/Icon_minus.svg);
+    background-image: url(Icon_minus.svg);
 }
 
 body.vscode-light .toolbar .btn-group .btn.btn-one-to-one {
-    background-image: url(vscode-resource:../images/Icon_one_to_one.svg);
+    background-image: url(Icon_one_to_one.svg);
 }
 
 .toolbar .size {

package.json

@@ -2,10 +2,10 @@
 	"name": "vscode-erd-preview",
 	"displayName": "ERD Preview",
 	"description": "An extension for Visual Studio Code to preview erd(.er) files",
-	"version": "4.0.4",
+	"version": "5.0.0",
 	"publisher": "kaishuu0123",
 	"engines": {
-		"vscode": "^1.25.0"
+		"vscode": "^1.44.0"
 	},
 	"categories": [
 		"Programming Languages",
@@ -20,10 +20,7 @@
 	],
 	"activationEvents": [
 		"onCommand:erd-preview.showPreview",
-		"onCommand:erd-preview.saveSvgPreview",
-		"onCommand:erd-preview.savePngPreview",
-		"onCommand:erd-preview.savePdfPreview",
-		"onWebviewPanel:erd-preview"
+		"onWebviewPanel:erd-preview.showPreview"
 	],
 	"main": "./out/extension",
 	"contributes": {
@@ -50,6 +47,7 @@
 			}
 		],
 		"configuration": {
+			"type": "object",
 			"title": "ERD Preview",
 			"properties": {
 				"erd-preview.erdPath": {
@@ -76,19 +74,21 @@
 	"scripts": {
 		"vscode:prepublish": "npm run compile",
 		"compile": "tsc -p ./ && webpack",
-		"prewatch": "webpack",
+		"preextension:watch": "webpack",
+		"extension:watch": "tsc -watch -p ./",
 		"watch": "tsc -watch -p ./",
-		"postinstall": "node ./node_modules/vscode/bin/install",
 		"test": "npm run compile && node ./node_modules/vscode/bin/test"
 	},
 	"devDependencies": {
 		"@types/mocha": "^2.2.42",
-		"@types/node": "^7.0.43",
-		"ts-loader": "^6.2.1",
-		"typescript": "^2.9.2",
-		"vscode": "^1.1.36",
-		"webpack": "^4.28.3",
-		"webpack-cli": "^3.2.0"
+		"@types/node": "^7.10.10",
+		"@types/vscode": "^1.44.0",
+		"ts-loader": "^5.4.5",
+		"tslint": "^6.1.2",
+		"tslint-react": "^5.0.0",
+		"typescript": "^3.9.6",
+		"webpack": "^4.43.0",
+		"webpack-cli": "^3.3.11"
 	},
 	"icon": "icon.png",
 	"repository": {
@@ -97,11 +97,6 @@
 	},
 	"dependencies": {
 		"preact": "^8.3.1",
-		"redux-zero": "^4.15.2"
-	},
-	"__metadata": {
-		"id": "13e04a58-e47e-4514-b66a-4391097c5808",
-		"publisherDisplayName": "kaishuu0123",
-		"publisherId": "fa8b5326-01de-4fe1-8320-4d14b7ad40ad"
+		"redux-zero": "^4.15.0"
 	}
 }

src/preview-app/App.tsx → preview-app/App.tsx

@@ -6,29 +6,28 @@ import PreviewContainer from './containers/PreviewContainer';
 import { actions, ISource, IState } from './store';
 
 interface AppProps {
-    updateSource: Function;
+    updateSource: (...args: any[]) => void;
+    updateSettings: (...args: any[]) => void;
     source: ISource;
 }
 
 const mapToProps = (state: IState) => ({ source: state.source });
 
 class App extends Component<AppProps> {
     componentDidMount() {
-        messageBroker.addListener('source:update', this.onSourceUpdate);
+        messageBroker.addListener('source:update', this.props.updateSource);
     }
 
     componentWillUnmount() {
-        messageBroker.removeListener('source:update', this.onSourceUpdate);
-    }
-
-    onSourceUpdate = (source: ISource) => {
-        this.props.updateSource(source);
+        messageBroker.removeListener('source:update', this.props.updateSource);
     }
 
     render() {
         return (
             <div className="layout">
+                {/* @ts-ignore */}
                 <ToolbarContainer />
+                {/* @ts-ignore */}
                 {this.props.source.data && <PreviewContainer/>}
             </div>
         );

src/preview-app/components/Preview.tsx → preview-app/components/Preview.tsx

@@ -1,20 +1,27 @@
-import { h, FunctionalComponent, Ref } from 'preact';
+import { h, FunctionalComponent, RefCallback, JSX } from 'preact';
 
 interface PreviewProps {
     data: string;
-    attachRef: Ref<HTMLImageElement>;
+    attachRef: RefCallback<HTMLImageElement>;
     dimension: { width: number, height: number, units: string };
     onWheel: JSX.WheelEventHandler;
     background: string;
 }
 
-const Preview: FunctionalComponent<PreviewProps> = ({ data, attachRef, dimension: { width, height, units }, onWheel, background }) => {
+const Preview: FunctionalComponent<PreviewProps> = ({
+    data,
+    attachRef,
+    dimension: { width, height, units },
+    onWheel,
+    background
+}) => {
     const styles = {
         width: `${width}${units}`,
         minWidth: `${width}${units}`,
         height: `${height}${units}`,
         minHeight: `${height}${units}`
     };
+
     return (
         <div className={`preview ${background}`} onWheel={onWheel}>
             <img

preview-app/components/PreviewError.tsx

@@ -0,0 +1,13 @@
+import { h, FunctionalComponent } from 'preact';
+
+const PreviewError: FunctionalComponent = () => (
+    <div className="error-container">
+        <img src="media/error.png" />
+            <div>
+                <div>Image Not Loaded</div>
+                <div>Try to open it externally to fix format problem</div>
+            </div>
+    </div>
+);
+
+export default PreviewError;

src/preview-app/components/Toolbar.tsx → preview-app/components/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { h, FunctionalComponent } from 'preact';
+import { h, FunctionalComponent, JSX } from 'preact';
 
 interface ToolbarProps {
     onChangeBackgroundButtonClick: JSX.MouseEventHandler;
@@ -16,7 +16,7 @@ const Toolbar: FunctionalComponent<ToolbarProps> = ({
     }) => (
     <div className="toolbar">
         <div className="btn-group">
-            <button 
+            <button
                 name="zoom-in"
                 className={`reset-button btn btn-plus ${activeBtn === 'zoom-in'? 'active' : ''}`}
                 disabled={!sourceImageValidity}

src/preview-app/containers/PreviewContainer.tsx → preview-app/containers/PreviewContainer.tsx

@@ -6,6 +6,8 @@ import PreviewError from '../components/PreviewError';
 
 type dimension = { width: number, height: number };
 
+type ChromeWheelEvent = WheelEvent & { wheelDelta: number; };
+
 interface PreviewContainerProps {
     source: ISource;
     scale: number;
@@ -44,20 +46,21 @@ class PreviewContainer extends Component<PreviewContainerProps, PreviewContainer
         }
     }
 
-    attachRef = (el: HTMLImageElement) => {
-        this.imageEl = el;
+    attachRef = (el: HTMLImageElement | null) => {
+        if (el) {
+            this.imageEl = el;
+        }
     }
 
     onWheel = (event: WheelEvent) => {
         if (!(event.ctrlKey || event.metaKey)) { return; }
         event.preventDefault();
-        // let delta = Math.sign(event.wheelDelta)
-        let delta = Math.sign(-event.deltaY);
+        let delta = Math.sign((event as ChromeWheelEvent).wheelDelta);
         if (delta === 1) {
-            this.props.zoomIn(0.1);
+            this.props.zoomIn();
         }
         if (delta === -1) {
-            this.props.zoomOut(0.1);
+            this.props.zoomOut();
         }
     }
 

src/preview-app/containers/ToolbarContainer.tsx → preview-app/containers/ToolbarContainer.tsx

@@ -4,7 +4,7 @@ import Toolbar from '../components/Toolbar';
 import { actions, IState, ISource } from '../store';
 import { getByteCountByContent, humanFileSize } from '../utils/fileSize';
 
-const SCALE_STEP = 0.2;
+const SCALE_STEP = 0.5;
 
 interface ToolbarContainerProps {
     changeBackground: Function;
@@ -30,7 +30,7 @@ class ToolbarContainer extends Component<ToolbarContainerProps, ToolbarContainer
     }
 
     onChangeBackgroundButtonClick = (e: MouseEvent) => {
-        this.props.changeBackground(e.srcElement!.getAttribute('name'));
+        this.props.changeBackground((e.srcElement as HTMLButtonElement).getAttribute('name'));
     }
 
     getFileSize() {

src/preview-app/index.tsx → preview-app/index.tsx

@@ -5,6 +5,7 @@ import store from './store';
 import './messaging';
 
 render(
+    // @ts-ignore
     <Provider store={store}><App /></Provider>,
-    document.querySelector('body') as HTMLElement
+    document.body
 );

src/preview-app/messaging/index.ts → preview-app/messaging/index.ts

@@ -1,14 +1,26 @@
 import { EventEmitter}  from 'events';
 
+import vscode from '../vscode-api';
+
+export interface IMessage {
+    command: string;
+    payload: any;
+}
+
 class MessageBroker extends EventEmitter {
     constructor() {
         super();
 
         window.addEventListener('message', event => {
             const { command, payload } = event.data;
+
             this.emit(command, payload);
         });
     }
+
+    send(message: IMessage) {
+        vscode.postMessage(message);
+    }
 }
 
 export default new MessageBroker();

src/preview-app/store/actions.ts → preview-app/store/actions.ts

@@ -18,7 +18,11 @@ export const actions = () => ({
         const nextScale = state.scale - state.scale * step;
         return { ...state, scale: nextScale >= MIN_SCALE ? nextScale : MIN_SCALE };
     },
-    zoomReset: (state: IState) => ({ ...state, scale: 1 }),
-    changeBackground: (state: IState, background: IBackground) => ({ ...state, background }),
+    zoomReset: (state: IState) => {
+        return { ...state, scale: 1 };
+    },
+    changeBackground: (state: IState, background: IBackground) => {
+        return { ...state, background };
+    },
     toggleSourceImageValidity: (state: IState, validity: boolean) => ({ ...state, sourceImageValidity: validity })
 });

src/preview-app/store/index.ts → preview-app/store/index.ts

@@ -9,7 +9,7 @@ const initialState: IState = {
     },
     scale: 1,
     background: document.querySelector('body')!.classList.contains('vscode-dark') ? 'dark' : 'light',
-    sourceImageValidity: false
+    sourceImageValidity: false,
 };
 
 export default createStore(initialState);

src/preview-app/vscode-api/index.ts → preview-app/vscode-api/index.ts

@@ -1,6 +1,7 @@
 interface IVSCodeApi {
     getState(): any;
     setState(state: any): void;
+    postMessage(message: object): void;
 }
 
 declare function acquireVsCodeApi(): IVSCodeApi;

src/commandManager.ts

@@ -3,7 +3,7 @@ import * as vscode from 'vscode';
 export interface Command {
 	readonly id: string;
 
-	registerCommand(...args: any[]): void;
+	execute(...args: any[]): void;
 }
 
 export class CommandManager {
@@ -17,7 +17,7 @@ export class CommandManager {
 	}
 
 	public register<T extends Command>(command: T): T {
-		this.registerCommand(command.id, command.registerCommand, command);
+		this.registerCommand(command.id, command.execute, command);
 		return command;
 	}