├── .gitignore ├── .vscode ├── launch.json ├── settings.json └── tasks.json ├── LICENSE ├── README.md ├── images ├── demo01.gif └── icon.png ├── package-lock.json ├── package.json ├── src └── extension.ts ├── tsconfig.json └── tslint.json /.gitignore: -------------------------------------------------------------------------------- 1 | out 2 | node_modules 3 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that compiles the extension and then opens it inside a new window 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | { 6 | "version": "0.2.0", 7 | "configurations": [ 8 | { 9 | "name": "Run Extension", 10 | "type": "extensionHost", 11 | "request": "launch", 12 | "runtimeExecutable": "${execPath}", 13 | "args": ["--extensionDevelopmentPath=${workspaceRoot}"], 14 | "outFiles": ["${workspaceFolder}/out/**/*.js"], 15 | "preLaunchTask": "npm: watch" 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.insertSpaces": false 3 | } -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | // See https://go.microsoft.com/fwlink/?LinkId=733558 2 | // for the documentation about the tasks.json format 3 | { 4 | "version": "2.0.0", 5 | "tasks": [ 6 | { 7 | "type": "npm", 8 | "script": "watch", 9 | "problemMatcher": "$tsc-watch", 10 | "isBackground": true, 11 | "presentation": { 12 | "reveal": "never" 13 | }, 14 | "group": { 15 | "kind": "build", 16 | "isDefault": true 17 | } 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 MULU-github 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Demo](https://github.com/MULU-github/jsflowchart/blob/master/images/demo01.gif?raw=true) 2 | ## Features 3 | **Show flowchart of selected Javascript code.** 4 | 5 | **Flowchart is synchronized with the selected code in real-time.** 6 | 7 | 8 | ## Quick start 9 | **After install jsflowchart extension from Marketplace,** 10 | 11 | -Right click the selected js code, then click "Show Flowchart". 12 | 13 | 14 | 15 | ## Installation in development mode 16 | ***Clone the source locally:*** 17 | 18 | $ git clone https://github.com/MULU-github/jsflowchart 19 | 20 | $ cd jsflowchart 21 | 22 | $ npm install 23 | 24 | $ npm run watch 25 | 26 | -Hit F5. 27 | 28 | -Open js file. 29 | 30 | -Right click the selected js code in debug window, then click "Show Flowchart". 31 | 32 | 33 | -------------------------------------------------------------------------------- /images/demo01.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MULU-github/jsflowchart/b9dd2532f37817cf230b92f5a749caebf06ba71b/images/demo01.gif -------------------------------------------------------------------------------- /images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MULU-github/jsflowchart/b9dd2532f37817cf230b92f5a749caebf06ba71b/images/icon.png -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jsflowchart", 3 | "version": "0.1.6", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "@babel/code-frame": { 8 | "version": "7.0.0", 9 | "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz", 10 | "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==", 11 | "requires": { 12 | "@babel/highlight": "^7.0.0" 13 | } 14 | }, 15 | "@babel/generator": { 16 | "version": "7.6.2", 17 | "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.6.2.tgz", 18 | "integrity": "sha512-j8iHaIW4gGPnViaIHI7e9t/Hl8qLjERI6DcV9kEpAIDJsAOrcnXqRS7t+QbhL76pwbtqP+QCQLL0z1CyVmtjjQ==", 19 | "requires": { 20 | "@babel/types": "^7.6.0", 21 | "jsesc": "^2.5.1", 22 | "lodash": "^4.17.13", 23 | "source-map": "^0.5.0" 24 | } 25 | }, 26 | "@babel/helper-function-name": { 27 | "version": "7.1.0", 28 | "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz", 29 | "integrity": "sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==", 30 | "requires": { 31 | "@babel/helper-get-function-arity": "^7.0.0", 32 | "@babel/template": "^7.1.0", 33 | "@babel/types": "^7.0.0" 34 | } 35 | }, 36 | "@babel/helper-get-function-arity": { 37 | "version": "7.0.0", 38 | "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz", 39 | "integrity": "sha512-r2DbJeg4svYvt3HOS74U4eWKsUAMRH01Z1ds1zx8KNTPtpTL5JAsdFv8BNyOpVqdFhHkkRDIg5B4AsxmkjAlmQ==", 40 | "requires": { 41 | "@babel/types": "^7.0.0" 42 | } 43 | }, 44 | "@babel/helper-split-export-declaration": { 45 | "version": "7.4.4", 46 | "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz", 47 | "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==", 48 | "requires": { 49 | "@babel/types": "^7.4.4" 50 | } 51 | }, 52 | "@babel/highlight": { 53 | "version": "7.0.0", 54 | "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0.tgz", 55 | "integrity": "sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==", 56 | "requires": { 57 | "chalk": "^2.0.0", 58 | "esutils": "^2.0.2", 59 | "js-tokens": "^4.0.0" 60 | } 61 | }, 62 | "@babel/parser": { 63 | "version": "7.6.2", 64 | "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.6.2.tgz", 65 | "integrity": "sha512-mdFqWrSPCmikBoaBYMuBulzTIKuXVPtEISFbRRVNwMWpCms/hmE2kRq0bblUHaNRKrjRlmVbx1sDHmjmRgD2Xg==" 66 | }, 67 | "@babel/template": { 68 | "version": "7.6.0", 69 | "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.6.0.tgz", 70 | "integrity": "sha512-5AEH2EXD8euCk446b7edmgFdub/qfH1SN6Nii3+fyXP807QRx9Q73A2N5hNwRRslC2H9sNzaFhsPubkS4L8oNQ==", 71 | "requires": { 72 | "@babel/code-frame": "^7.0.0", 73 | "@babel/parser": "^7.6.0", 74 | "@babel/types": "^7.6.0" 75 | } 76 | }, 77 | "@babel/traverse": { 78 | "version": "7.6.2", 79 | "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.6.2.tgz", 80 | "integrity": "sha512-8fRE76xNwNttVEF2TwxJDGBLWthUkHWSldmfuBzVRmEDWOtu4XdINTgN7TDWzuLg4bbeIMLvfMFD9we5YcWkRQ==", 81 | "requires": { 82 | "@babel/code-frame": "^7.5.5", 83 | "@babel/generator": "^7.6.2", 84 | "@babel/helper-function-name": "^7.1.0", 85 | "@babel/helper-split-export-declaration": "^7.4.4", 86 | "@babel/parser": "^7.6.2", 87 | "@babel/types": "^7.6.0", 88 | "debug": "^4.1.0", 89 | "globals": "^11.1.0", 90 | "lodash": "^4.17.13" 91 | }, 92 | "dependencies": { 93 | "@babel/code-frame": { 94 | "version": "7.5.5", 95 | "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz", 96 | "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==", 97 | "requires": { 98 | "@babel/highlight": "^7.0.0" 99 | } 100 | } 101 | } 102 | }, 103 | "@babel/types": { 104 | "version": "7.6.1", 105 | "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.6.1.tgz", 106 | "integrity": "sha512-X7gdiuaCmA0uRjCmRtYJNAVCc/q+5xSgsfKJHqMN4iNLILX39677fJE1O40arPMh0TTtS9ItH67yre6c7k6t0g==", 107 | "requires": { 108 | "esutils": "^2.0.2", 109 | "lodash": "^4.17.13", 110 | "to-fast-properties": "^2.0.0" 111 | } 112 | }, 113 | "@types/mocha": { 114 | "version": "2.2.48", 115 | "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-2.2.48.tgz", 116 | "integrity": "sha512-nlK/iyETgafGli8Zh9zJVCTicvU3iajSkRwOh3Hhiva598CMqNJ4NcVCGMTGKpGpTYj/9R8RLzS9NAykSSCqGw==", 117 | "dev": true 118 | }, 119 | "@types/node": { 120 | "version": "7.10.7", 121 | "resolved": "https://registry.npmjs.org/@types/node/-/node-7.10.7.tgz", 122 | "integrity": "sha512-4I7+hXKyq7e1deuzX9udu0hPIYqSSkdKXtjow6fMnQ3OR9qkxIErGHbGY08YrfZJrCS1ajK8lOuzd0k3n2WM4A==", 123 | "dev": true 124 | }, 125 | "@types/vscode": { 126 | "version": "1.38.0", 127 | "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.38.0.tgz", 128 | "integrity": "sha512-aGo8LQ4J1YF0T9ORuCO+bhQ5sGR1MXa7VOyOdEP685se3wyQWYUExcdiDi6rvaK61KUwfzzA19JRLDrUbDl7BQ==", 129 | "dev": true 130 | }, 131 | "ansi-regex": { 132 | "version": "3.0.0", 133 | "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", 134 | "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=" 135 | }, 136 | "ansi-styles": { 137 | "version": "3.2.1", 138 | "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", 139 | "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", 140 | "requires": { 141 | "color-convert": "^1.9.0" 142 | } 143 | }, 144 | "argparse": { 145 | "version": "1.0.10", 146 | "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", 147 | "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", 148 | "dev": true, 149 | "requires": { 150 | "sprintf-js": "~1.0.2" 151 | } 152 | }, 153 | "balanced-match": { 154 | "version": "1.0.0", 155 | "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", 156 | "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", 157 | "dev": true 158 | }, 159 | "brace-expansion": { 160 | "version": "1.1.11", 161 | "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", 162 | "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", 163 | "dev": true, 164 | "requires": { 165 | "balanced-match": "^1.0.0", 166 | "concat-map": "0.0.1" 167 | } 168 | }, 169 | "builtin-modules": { 170 | "version": "1.1.1", 171 | "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz", 172 | "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=", 173 | "dev": true 174 | }, 175 | "chalk": { 176 | "version": "2.4.2", 177 | "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", 178 | "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", 179 | "requires": { 180 | "ansi-styles": "^3.2.1", 181 | "escape-string-regexp": "^1.0.5", 182 | "supports-color": "^5.3.0" 183 | } 184 | }, 185 | "color-convert": { 186 | "version": "1.9.3", 187 | "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", 188 | "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", 189 | "requires": { 190 | "color-name": "1.1.3" 191 | } 192 | }, 193 | "color-name": { 194 | "version": "1.1.3", 195 | "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", 196 | "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" 197 | }, 198 | "commander": { 199 | "version": "2.20.0", 200 | "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz", 201 | "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==" 202 | }, 203 | "concat-map": { 204 | "version": "0.0.1", 205 | "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", 206 | "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", 207 | "dev": true 208 | }, 209 | "debug": { 210 | "version": "4.1.1", 211 | "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", 212 | "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", 213 | "requires": { 214 | "ms": "^2.1.1" 215 | } 216 | }, 217 | "deepmerge": { 218 | "version": "1.5.2", 219 | "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz", 220 | "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==" 221 | }, 222 | "diff": { 223 | "version": "3.5.0", 224 | "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz", 225 | "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==", 226 | "dev": true 227 | }, 228 | "dom-walk": { 229 | "version": "0.1.1", 230 | "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz", 231 | "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=" 232 | }, 233 | "escape-string-regexp": { 234 | "version": "1.0.5", 235 | "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", 236 | "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" 237 | }, 238 | "esprima": { 239 | "version": "4.0.1", 240 | "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", 241 | "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", 242 | "dev": true 243 | }, 244 | "esutils": { 245 | "version": "2.0.2", 246 | "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz", 247 | "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=" 248 | }, 249 | "fs.realpath": { 250 | "version": "1.0.0", 251 | "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", 252 | "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", 253 | "dev": true 254 | }, 255 | "glob": { 256 | "version": "7.1.4", 257 | "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz", 258 | "integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==", 259 | "dev": true, 260 | "requires": { 261 | "fs.realpath": "^1.0.0", 262 | "inflight": "^1.0.4", 263 | "inherits": "2", 264 | "minimatch": "^3.0.4", 265 | "once": "^1.3.0", 266 | "path-is-absolute": "^1.0.0" 267 | } 268 | }, 269 | "global": { 270 | "version": "4.4.0", 271 | "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz", 272 | "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==", 273 | "requires": { 274 | "min-document": "^2.19.0", 275 | "process": "^0.11.10" 276 | } 277 | }, 278 | "globals": { 279 | "version": "11.12.0", 280 | "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", 281 | "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==" 282 | }, 283 | "has-flag": { 284 | "version": "3.0.0", 285 | "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", 286 | "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" 287 | }, 288 | "inflight": { 289 | "version": "1.0.6", 290 | "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", 291 | "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", 292 | "dev": true, 293 | "requires": { 294 | "once": "^1.3.0", 295 | "wrappy": "1" 296 | } 297 | }, 298 | "inherits": { 299 | "version": "2.0.3", 300 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", 301 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", 302 | "dev": true 303 | }, 304 | "is-fullwidth-code-point": { 305 | "version": "2.0.0", 306 | "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", 307 | "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=" 308 | }, 309 | "js-tokens": { 310 | "version": "4.0.0", 311 | "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", 312 | "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" 313 | }, 314 | "js-yaml": { 315 | "version": "3.13.1", 316 | "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz", 317 | "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==", 318 | "dev": true, 319 | "requires": { 320 | "argparse": "^1.0.7", 321 | "esprima": "^4.0.0" 322 | } 323 | }, 324 | "js2flowchart": { 325 | "version": "1.3.2", 326 | "resolved": "https://registry.npmjs.org/js2flowchart/-/js2flowchart-1.3.2.tgz", 327 | "integrity": "sha512-nIPd16nzw61GqicJBoZbxEykHnOZ+N82drSwpToXo+J2+JvbFgJkqriJeIaFENfu7bhHSqpkCHp7m6DeP+5COA==", 328 | "requires": { 329 | "@babel/generator": "^7.5.5", 330 | "@babel/parser": "^7.5.5", 331 | "@babel/traverse": "^7.5.5", 332 | "commander": "^2.12.1", 333 | "deepmerge": "^1.5.1", 334 | "global": "^4.3.2", 335 | "string-width": "^2.1.1", 336 | "xml-escape": "^1.1.0" 337 | } 338 | }, 339 | "jsesc": { 340 | "version": "2.5.2", 341 | "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", 342 | "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==" 343 | }, 344 | "lodash": { 345 | "version": "4.17.15", 346 | "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", 347 | "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" 348 | }, 349 | "min-document": { 350 | "version": "2.19.0", 351 | "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz", 352 | "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=", 353 | "requires": { 354 | "dom-walk": "^0.1.0" 355 | } 356 | }, 357 | "minimatch": { 358 | "version": "3.0.4", 359 | "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", 360 | "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", 361 | "dev": true, 362 | "requires": { 363 | "brace-expansion": "^1.1.7" 364 | } 365 | }, 366 | "minimist": { 367 | "version": "0.0.8", 368 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", 369 | "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", 370 | "dev": true 371 | }, 372 | "mkdirp": { 373 | "version": "0.5.1", 374 | "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", 375 | "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", 376 | "dev": true, 377 | "requires": { 378 | "minimist": "0.0.8" 379 | } 380 | }, 381 | "ms": { 382 | "version": "2.1.2", 383 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", 384 | "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" 385 | }, 386 | "once": { 387 | "version": "1.4.0", 388 | "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", 389 | "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", 390 | "dev": true, 391 | "requires": { 392 | "wrappy": "1" 393 | } 394 | }, 395 | "path-is-absolute": { 396 | "version": "1.0.1", 397 | "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", 398 | "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", 399 | "dev": true 400 | }, 401 | "path-parse": { 402 | "version": "1.0.6", 403 | "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", 404 | "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", 405 | "dev": true 406 | }, 407 | "process": { 408 | "version": "0.11.10", 409 | "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", 410 | "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=" 411 | }, 412 | "resolve": { 413 | "version": "1.10.1", 414 | "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.1.tgz", 415 | "integrity": "sha512-KuIe4mf++td/eFb6wkaPbMDnP6kObCaEtIDuHOUED6MNUo4K670KZUHuuvYPZDxNF0WVLw49n06M2m2dXphEzA==", 416 | "dev": true, 417 | "requires": { 418 | "path-parse": "^1.0.6" 419 | } 420 | }, 421 | "semver": { 422 | "version": "5.7.0", 423 | "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz", 424 | "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==", 425 | "dev": true 426 | }, 427 | "source-map": { 428 | "version": "0.5.7", 429 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", 430 | "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" 431 | }, 432 | "sprintf-js": { 433 | "version": "1.0.3", 434 | "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", 435 | "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", 436 | "dev": true 437 | }, 438 | "string-width": { 439 | "version": "2.1.1", 440 | "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", 441 | "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", 442 | "requires": { 443 | "is-fullwidth-code-point": "^2.0.0", 444 | "strip-ansi": "^4.0.0" 445 | } 446 | }, 447 | "strip-ansi": { 448 | "version": "4.0.0", 449 | "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", 450 | "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", 451 | "requires": { 452 | "ansi-regex": "^3.0.0" 453 | } 454 | }, 455 | "supports-color": { 456 | "version": "5.5.0", 457 | "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", 458 | "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", 459 | "requires": { 460 | "has-flag": "^3.0.0" 461 | } 462 | }, 463 | "to-fast-properties": { 464 | "version": "2.0.0", 465 | "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", 466 | "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=" 467 | }, 468 | "tslib": { 469 | "version": "1.9.3", 470 | "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz", 471 | "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==", 472 | "dev": true 473 | }, 474 | "tslint": { 475 | "version": "5.16.0", 476 | "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.16.0.tgz", 477 | "integrity": "sha512-UxG2yNxJ5pgGwmMzPMYh/CCnCnh0HfPgtlVRDs1ykZklufFBL1ZoTlWFRz2NQjcoEiDoRp+JyT0lhBbbH/obyA==", 478 | "dev": true, 479 | "requires": { 480 | "@babel/code-frame": "^7.0.0", 481 | "builtin-modules": "^1.1.1", 482 | "chalk": "^2.3.0", 483 | "commander": "^2.12.1", 484 | "diff": "^3.2.0", 485 | "glob": "^7.1.1", 486 | "js-yaml": "^3.13.0", 487 | "minimatch": "^3.0.4", 488 | "mkdirp": "^0.5.1", 489 | "resolve": "^1.3.2", 490 | "semver": "^5.3.0", 491 | "tslib": "^1.8.0", 492 | "tsutils": "^2.29.0" 493 | } 494 | }, 495 | "tsutils": { 496 | "version": "2.29.0", 497 | "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz", 498 | "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==", 499 | "dev": true, 500 | "requires": { 501 | "tslib": "^1.8.1" 502 | } 503 | }, 504 | "typescript": { 505 | "version": "2.9.2", 506 | "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz", 507 | "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==", 508 | "dev": true 509 | }, 510 | "wrappy": { 511 | "version": "1.0.2", 512 | "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", 513 | "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", 514 | "dev": true 515 | }, 516 | "xml-escape": { 517 | "version": "1.1.0", 518 | "resolved": "https://registry.npmjs.org/xml-escape/-/xml-escape-1.1.0.tgz", 519 | "integrity": "sha1-OQTBQ/qOs6ADDsZG0pAqLxtwbEQ=" 520 | } 521 | } 522 | } 523 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jsflowchart", 3 | "description": "JS Flowchart in Real-time", 4 | "version": "0.1.6", 5 | "publisher": "MULU-github", 6 | "engines": { 7 | "vscode": "^1.38.0" 8 | }, 9 | "categories": [ 10 | "Other" 11 | ], 12 | "icon": "images/icon.png", 13 | "activationEvents": [ 14 | "onCommand:ShowJSFlowchart.start" 15 | ], 16 | "repository": { 17 | "type": "git", 18 | "url": "TBD" 19 | }, 20 | "main": "./out/extension.js", 21 | "contributes": { 22 | "commands": [ 23 | { 24 | "command": "ShowJSFlowchart.start", 25 | "title": "Show Flowchart", 26 | "category": "Flowchart JS" 27 | } 28 | ], 29 | "menus": { 30 | "editor/context": [ 31 | { 32 | "command": "ShowJSFlowchart.start", 33 | "group": "YourGroup@1" 34 | } 35 | ] 36 | } 37 | }, 38 | "scripts": { 39 | "vscode:prepublish": "npm run compile", 40 | "compile": "tsc -p ./", 41 | "lint": "tslint -p ./", 42 | "watch": "tsc -w -p ./" 43 | }, 44 | "dependencies": { 45 | "js2flowchart": "^1.1.3" 46 | }, 47 | "devDependencies": { 48 | "tslint": "^5.16.0", 49 | "typescript": "^2.6.1", 50 | "@types/vscode": "^1.38.0", 51 | "@types/node": "^7.0.43", 52 | "@types/mocha": "^2.2.42" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/extension.ts: -------------------------------------------------------------------------------- 1 | import * as vscode from 'vscode'; 2 | import * as js2flowchart from "js2flowchart"; 3 | 4 | const flowcharts = { 5 | 'JS Flowchart': 'null', 6 | }; 7 | 8 | export function activate(context: vscode.ExtensionContext) { 9 | context.subscriptions.push( 10 | vscode.commands.registerCommand('ShowJSFlowchart.start', () => { 11 | FlowchartPanel.createOrShow(context.extensionPath); 12 | 13 | vscode.window.onDidChangeTextEditorSelection( 14 | (caught: vscode.TextEditorSelectionChangeEvent) => { 15 | if (caught.textEditor === vscode.window.activeTextEditor) { 16 | if (FlowchartPanel.currentPanel) { 17 | FlowchartPanel.currentPanel._update(); 18 | } 19 | } 20 | } 21 | ); 22 | 23 | }) 24 | ); 25 | 26 | // if (vscode.window.registerWebviewPanelSerializer) { 27 | // // Make sure we register a serializer in activation event 28 | // vscode.window.registerWebviewPanelSerializer(FlowchartPanel.viewType, { 29 | // async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) { 30 | // console.log(`Got state: ${state}`); 31 | // FlowchartPanel.revive(webviewPanel, context.extensionPath); 32 | // } 33 | // }); 34 | // } 35 | } 36 | 37 | /** 38 | * Manages cat coding webview panels 39 | */ 40 | class FlowchartPanel { 41 | /** 42 | * Track the currently panel. Only allow a single panel to exist at a time. 43 | */ 44 | public static currentPanel: FlowchartPanel | undefined; 45 | public static readonly viewType = 'JS Flowchart'; 46 | 47 | private readonly _panel: vscode.WebviewPanel; 48 | private readonly _extensionPath: string; 49 | private _disposables: vscode.Disposable[] = []; 50 | 51 | public static createOrShow(extensionPath: string) { 52 | const column = vscode.window.activeTextEditor 53 | ? vscode.window.activeTextEditor.viewColumn 54 | : undefined; 55 | 56 | // If we already have a panel, show it. 57 | if (FlowchartPanel.currentPanel) { 58 | FlowchartPanel.currentPanel._panel.reveal(column); 59 | //FlowchartPanel.currentPanel._panel.dispose();//dispose, then create.//TODO, how to update?? 60 | 61 | return; 62 | } 63 | 64 | // Otherwise, create a new panel. 65 | const panel = vscode.window.createWebviewPanel( 66 | FlowchartPanel.viewType, 67 | 'JS Flowchart', 68 | vscode.ViewColumn.Beside, //column || vscode.ViewColumn.Two, 69 | { 70 | // Enable javascript in the webview 71 | enableScripts: true, 72 | // And restrict the webview to only loading content from our extension's `media` directory. 73 | //localResourceRoots: [vscode.Uri.file(path.join(extensionPath, 'media'))] 74 | //localResourceRoots: [vscode.Uri.parse("flowmaker://authority/flowmaker")] 75 | } 76 | ); 77 | 78 | FlowchartPanel.currentPanel = new FlowchartPanel(panel, extensionPath); 79 | } 80 | 81 | public static revive(panel: vscode.WebviewPanel, extensionPath: string) { 82 | FlowchartPanel.currentPanel = new FlowchartPanel(panel, extensionPath); 83 | } 84 | 85 | private constructor(panel: vscode.WebviewPanel, extensionPath: string) { 86 | this._panel = panel; 87 | this._extensionPath = extensionPath; 88 | 89 | // Set the webview's initial html content 90 | this._update(); 91 | 92 | // Listen for when the panel is disposed 93 | // This happens when the user closes the panel or when the panel is closed programatically 94 | this._panel.onDidDispose(() => this.dispose(), null, this._disposables); 95 | 96 | // Update the content based on view changes 97 | this._panel.onDidChangeViewState( 98 | e => { 99 | if (this._panel.visible) { 100 | this._update(); 101 | } 102 | }, 103 | null, 104 | this._disposables 105 | ); 106 | 107 | // Handle messages from the webview 108 | this._panel.webview.onDidReceiveMessage( 109 | message => { 110 | switch (message.command) { 111 | case 'alert': 112 | vscode.window.showErrorMessage(message.text); 113 | return; 114 | } 115 | }, 116 | null, 117 | this._disposables 118 | ); 119 | } 120 | 121 | public doRefactor() { 122 | // Send a message to the webview webview. 123 | // You can send any JSON serializable data. 124 | this._panel.webview.postMessage({ command: 'refactor' }); 125 | } 126 | 127 | public dispose() { 128 | FlowchartPanel.currentPanel = undefined; 129 | 130 | // Clean up our resources 131 | this._panel.dispose(); 132 | 133 | while (this._disposables.length) { 134 | const x = this._disposables.pop(); 135 | if (x) { 136 | x.dispose(); 137 | } 138 | } 139 | } 140 | 141 | public _update() { 142 | const webview = this._panel.webview; 143 | this._updateForFC(webview, 'JS Flowchart'); 144 | return; 145 | } 146 | 147 | private _updateForFC(webview: vscode.Webview, FCName: keyof typeof flowcharts) { 148 | this._panel.title = FCName; 149 | this._panel.webview.html = this._getHtmlForWebview(); 150 | } 151 | 152 | private _getHtmlForWebview() { 153 | // Use a nonce to whitelist which scripts can be run 154 | const svg1 = getNonce(); 155 | const SelectedText = getSelectedText(); 156 | 157 | return ` 158 | 159 | 160 |
${svg1}
161 | 164 | 165 | `; 166 | } 167 | } 168 | 169 | var text = ''; 170 | var svg1 = " "; 171 | function getNonce() { 172 | if(vscode.window.activeTextEditor===undefined){ 173 | //doesn't give text null if nothing activated. 174 | return svg1; 175 | } 176 | else if(vscode.window.activeTextEditor!=null){ 177 | let WindowP = vscode.window.activeTextEditor; 178 | // if (!(WindowP.document.languageId === "javascript")) { 179 | // var svg1 = "Only .js file is supported"; 180 | // return "Only .js file is supported"; 181 | // } 182 | //get selected range text 183 | let wordRange = new vscode.Range(WindowP.selection.start, WindowP.selection.end); 184 | text = WindowP.document.getText(wordRange); 185 | 186 | //get whole text 187 | // text = WindowP.document.getText(); 188 | } 189 | // var svg1 = js2flowchart.convertCodeToSvg(text); 190 | const {createSVGRender, convertCodeToFlowTree} = js2flowchart; 191 | const flowTree = convertCodeToFlowTree(text), 192 | svgRender = createSVGRender(); 193 | //applying another theme for render 194 | svgRender.applyLightTheme(); 195 | svg1 = svgRender.buildShapesTree(flowTree).print(); 196 | 197 | return svg1; 198 | } 199 | 200 | function getSelectedText() { 201 | let text = ''; 202 | 203 | if(vscode.window.activeTextEditor!=null){ 204 | let WindowP = vscode.window.activeTextEditor; 205 | // if (!(WindowP.document.languageId === "javascript")) { 206 | // var svg1 = "Only .js file is supported"; 207 | // return "Only .js file is supported"; 208 | // } 209 | 210 | //get selected range text 211 | let wordRange = new vscode.Range(WindowP.selection.start, WindowP.selection.end); 212 | text = WindowP.document.getText(wordRange); 213 | 214 | return text; 215 | } 216 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "noImplicitAny": false, 4 | "module": "commonjs", 5 | "target": "es6", 6 | "outDir": "out", 7 | "sourceMap": true, 8 | "strict": true, 9 | "rootDir": "src" 10 | }, 11 | "exclude": ["node_modules", ".vscode-test"] 12 | } 13 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "indent": [true, "tabs"], 4 | "semicolon": [true, "always"] 5 | } 6 | } --------------------------------------------------------------------------------