├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .gitmodules ├── .husky └── pre-commit ├── .prettierignore ├── .prettierrc ├── .stylelintrc ├── .stylelintrc.json ├── LICENSE ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public └── images │ ├── devkit_overview.png │ ├── plugin_debug.png │ ├── plugin_dev_plugin_added.png │ ├── plugin_dev_plugin_finished.png │ ├── switch_to_custom_plugin.png │ ├── switch_to_plugin_file.png │ ├── toggle_devtools.png │ └── tuneflow_plugin_dev_plugin.png ├── scripts └── build_protos.js ├── src ├── debugger │ ├── Debugger.vue │ ├── config.json │ ├── debugger.ts │ ├── dev_proxy.js │ └── utils.ts └── plugin │ └── export.ts ├── tsconfig.json └── vite.dev.config.ts /.eslintignore: -------------------------------------------------------------------------------- 1 | build/ 2 | dist/ 3 | src/models/pbjs 4 | node_modules -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true, 6 | jasmine: true, 7 | jest: true, 8 | es6: true, 9 | }, 10 | parser: '@typescript-eslint/parser', 11 | parserOptions: { 12 | parser: 'babel-eslint', 13 | }, 14 | extends: [ 15 | 'plugin:vue/vue3-recommended', 16 | 'plugin:import/recommended', 17 | 'plugin:import/typescript', 18 | 'prettier', 19 | ], 20 | plugins: ['markdown', 'jest', '@typescript-eslint', 'import'], 21 | overrides: [ 22 | { 23 | files: ['*.md'], 24 | processor: 'markdown/markdown', 25 | rules: { 26 | 'no-console': 'off', 27 | }, 28 | }, 29 | { 30 | files: ['*.ts', '*.tsx'], 31 | extends: ['@vue/typescript/recommended', '@vue/prettier', '@vue/prettier/@typescript-eslint'], 32 | parserOptions: { 33 | project: './tsconfig.json', 34 | }, 35 | rules: { 36 | '@typescript-eslint/no-explicit-any': 0, 37 | '@typescript-eslint/ban-types': 0, 38 | '@typescript-eslint/consistent-type-imports': 'error', 39 | '@typescript-eslint/explicit-module-boundary-types': 0, 40 | '@typescript-eslint/no-empty-function': 0, 41 | '@typescript-eslint/no-non-null-assertion': 0, 42 | '@typescript-eslint/no-unused-vars': [ 43 | 'error', 44 | { 45 | vars: 'all', 46 | args: 'after-used', 47 | ignoreRestSiblings: true, 48 | argsIgnorePattern: '^unused', 49 | }, 50 | ], 51 | '@typescript-eslint/ban-ts-comment': 0, 52 | }, 53 | }, 54 | { 55 | files: ['*.vue'], 56 | parser: 'vue-eslint-parser', 57 | parserOptions: { 58 | parser: '@typescript-eslint/parser', 59 | }, 60 | rules: { 61 | 'no-console': 'off', 62 | '@typescript-eslint/no-unused-vars': [ 63 | 'error', 64 | { vars: 'all', args: 'after-used', ignoreRestSiblings: true }, 65 | ], 66 | }, 67 | }, 68 | ], 69 | rules: { 70 | 'import/no-named-as-default': 'off', 71 | 'import/namespace': [2, { allowComputed: true }], 72 | 'import/no-named-as-default-member': 'off', 73 | 'import/no-unresolved': [1, { ignore: ['config'] }], 74 | 'comma-dangle': [2, 'always-multiline'], 75 | 'no-var': 'error', 76 | 'no-console': 'off', 77 | 'object-shorthand': 2, 78 | 'no-unused-vars': [2, { ignoreRestSiblings: true, argsIgnorePattern: '^_' }], 79 | // 'no-undef': 2, 80 | camelcase: 'off', 81 | 'no-extra-boolean-cast': 'off', 82 | semi: ['error', 'always'], 83 | 'vue/require-v-for-key': 'warn', 84 | 'vue/no-v-html': 'off', 85 | 'vue/require-explicit-emits': 'off', 86 | 'vue/require-prop-types': 'off', 87 | 'vue/require-default-prop': 'off', 88 | 'vue/no-reserved-keys': 'off', 89 | 'vue/comment-directive': 'off', 90 | 'vue/prop-name-casing': 'off', 91 | 'vue/one-component-per-file': 'off', 92 | 'vue/custom-event-name-casing': 'off', 93 | 'vue/max-attributes-per-line': [ 94 | 2, 95 | { 96 | singleline: 20, 97 | multiline: { 98 | max: 1, 99 | allowFirstLine: false, 100 | }, 101 | }, 102 | ], 103 | 'vue/no-deprecated-events-api': 'off', 104 | }, 105 | globals: { 106 | h: true, 107 | }, 108 | }; 109 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | src/debugger/pbjs 106 | src/plugin -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "src/plugin/tuneflow-helloworld-plugin"] 2 | path = src/plugin/tuneflow-helloworld-plugin 3 | url = https://github.com/andantei/tuneflow-helloworld-plugin.git 4 | [submodule "protos/src"] 5 | path = protos/src 6 | url = https://github.com/tuneflow/tuneflow-proto.git 7 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npm run lint-staged 5 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all", 4 | "endOfLine": "lf", 5 | "printWidth": 100, 6 | "proseWrap": "never", 7 | "arrowParens": "avoid", 8 | "htmlWhitespaceSensitivity": "ignore", 9 | "overrides": [ 10 | { 11 | "files": ".prettierrc", 12 | "options": { 13 | "parser": "json" 14 | } 15 | } 16 | ] 17 | } -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-standard", "stylelint-config-prettier"], 3 | "rules": { 4 | "comment-empty-line-before": null, 5 | "declaration-empty-line-before": null, 6 | "function-comma-newline-after": null, 7 | "function-name-case": null, 8 | "function-parentheses-newline-inside": null, 9 | "function-max-empty-lines": null, 10 | "function-whitespace-after": null, 11 | "indentation": null, 12 | "number-leading-zero": null, 13 | "number-no-trailing-zeros": null, 14 | "rule-empty-line-before": null, 15 | "selector-combinator-space-after": null, 16 | "selector-list-comma-newline-after": null, 17 | "selector-pseudo-element-colon-notation": null, 18 | "unit-no-unknown": null, 19 | "value-list-max-empty-lines": null, 20 | "font-family-no-missing-generic-family-keyword": null, 21 | "no-descending-specificity": null 22 | } 23 | } -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-standard", 4 | "stylelint-config-rational-order", 5 | "stylelint-config-prettier" 6 | ], 7 | "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"], 8 | "rules": { 9 | "comment-empty-line-before": null, 10 | "function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }], 11 | "no-invalid-double-slash-comments": null, 12 | "no-descending-specificity": null, 13 | "declaration-empty-line-before": null 14 | }, 15 | "ignoreFiles": ["components/style/color/{bezierEasing,colorPalette,tinyColor}.less"] 16 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Andantei行板 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 | # TuneFlow DevKit 2 | 3 | 这里是 TuneFlow DevKit -- TuneFlow 插件开发工具。 4 | 5 | TuneFlow DevKit 允许你在 TuneFlow 桌面版中运行你开发中的 TuneFlow 插件，并通过一个运行在本地的 Debug 服务器进行调试。 6 | 7 | ## 准备工作 8 | 9 | ### 安装 NodeJS 10 | 11 | 首先需要确保你已经安装了**nodejs>=16**。在命令行运行以下指令查看 安装 NodeJS 的版本： 12 | 13 | ```bash 14 | node -v 15 | ``` 16 | 17 | 如果运行报错，或者版本低于 16，意味着我们需要手动安装最新版本的 nodejs，在[这里](https://nodejs.org/zh-cn/download/)查看 NodeJS 的官方说明文档。 18 | 19 | ### 克隆 tuneflow-devkit 20 | 21 | 将 TuneFlow DevKit 克隆到本地： 22 | 23 | ```bash 24 | git clone --recurse-submodules https://github.com/andantei/tuneflow-devkit.git 25 | ``` 26 | 27 | 注意这里我们必须加上`--recurse-submodules`，这样可以确保 tuneflow-devkit 下面的子代码库也被克隆到了本地。 28 | 29 | ### 安装 nodejs 依赖 30 | 31 | 在 tuneflow-devkit 目录下运行以下命令安装项目需要的 nodejs 依赖库： 32 | 33 | ```bash 34 | npm install 35 | ``` 36 | 37 | ## 运行示例插件 38 | 39 | 我们先用 tuneflow-devkit 自带的 tuneflow-helloworld-plugin 来演示如何用 DevKit 与 TuneFlow 桌面版进行联调。 40 | 41 | ### 运行 DevKit 本地调试工具 42 | 43 | 在 tuneflow-devkit 目录中运行以下命令： 44 | 45 | ```bash 46 | npm run dev 47 | ``` 48 | 49 | 如果你的 nodejs 和 node_modules 安装正确，你将会看到类似以下输出： 50 | 51 | ```bash 52 | $ npm run dev 53 | 54 | > tuneflow-devkit@1.0.0 dev 55 | > npm run build-protos && npm run start-debugger 56 | 57 | 58 | > tuneflow-devkit@1.0.0 build-protos 59 | > node scripts/build_protos.js 60 | 61 | 62 | > tuneflow-devkit@1.0.0 start-debugger 63 | > concurrently --kill-others "vite --config vite.dev.config.ts" "node src/debugger/dev_proxy.js" 64 | 65 | [1] starting dev proxy server on port 18818 66 | [1] new daw connection 67 | [0] 68 | [0] VITE v3.2.4 ready in 855 ms 69 | [0] 70 | [0] ➜ Local: http://localhost:8899/ 71 | [0] ➜ Network: http://192.168.68.71:8899/ 72 | [0] ➜ Network: http://172.30.192.1:8899/ 73 | ``` 74 | 75 | 其中[http://localhost:8899](http://localhost:8899)就是我们的调试工具地址。 76 | 77 | 接下来我们在浏览器中打开它。 78 | 79 | ![DevKit](./public/images/devkit_overview.png) 80 | 81 | 可以看到 Hello World 插件已经被加载到了调试代码中。 82 | 83 | ### 在 TuneFlow 桌面版中运行示例插件 84 | 85 | 接下来打开 TuneFlow 桌面版，创建或打开一首你的曲子，并运行“插件开发”插件。 86 | 87 | ![“插件开发”插件](./public/images/tuneflow_plugin_dev_plugin.png) 88 | 89 | “插件开发”插件将会自动与 DevKit 建立连接，将我们在开发的插件添加到操作面板中。如图所示： 90 | 91 | ![添加到操作面板的“插件开发”插件](./public/images/plugin_dev_plugin_added.png) 92 | 93 | 我们的示例插件 tuneflow-helloworld-plugin 的功能是将 MIDI 轨道划分为高低两个声部。填写好参数后选择启用插件，我们可以看到选择的轨道被成功分成了两个声部。 94 | 95 | ![示例声部分离插件运行完成](./public/images/plugin_dev_plugin_finished.png) 96 | 97 | ## 开发你的第一个插件 98 | 99 | 接下来我们可以开始开发自己的插件。 100 | 101 | ### 配置代码库 102 | 103 | 为了方便管理代码，我们需要首先给自己的插件建立一个 git 代码库，然后通过子模块的方式加入进 tuneflow-devkit 中。你可以从头新建一个 git repo，也可以 fork TuneFlow 提供的 Hello World 示例 [https://github.com/andantei/tuneflow-devkit.git](https://github.com/andantei/tuneflow-devkit.git)。 104 | 105 | 建立好你的 git repo 后，在 tuneflow-devkit repo 的根目录下运行以下指令将其克隆至开发目录： 106 | 107 | ```bash 108 | # 在tuneflow-devkit文件夹下运行以下指令 109 | # 将repo地址换成你的插件代码库地址(以.git结尾) 110 | 111 | git submodule add src/plugin/ 112 | ``` 113 | 114 | 完成后，tuneflow-devkit 的目录结构应该变成这样： 115 | 116 | ``` 117 | -- ... 118 | -- src 119 | -- debugger 120 | -- ... 121 | -- plugin 122 | -- exports.ts 123 | -- tuneflow-helloworld-plugin 124 | -- 125 | -- ... 126 | -- ... 127 | ``` 128 | 129 | 至我们就完成了代码库的配置。 130 | 131 | ### 激活待开发的插件 132 | 133 | 确保你的插件目录中有包文件(`bundle.json`)，里面列出了你的插件包中包含的插件的信息。它看起来像这样： 134 | 135 | ``` json 136 | { 137 | "plugins": [ 138 | ...... 139 | { 140 | "providerId": "your-provider-id", 141 | "pluginId": "your-plugin-id", 142 | "providerDisplayName": "Your provider name", 143 | "pluginDisplayName": "Your plugin name", 144 | "pluginDescription": "Your plugin description" 145 | }, 146 | ...... 147 | ] 148 | } 149 | ``` 150 | 151 | 接下来我们将`src/plugin/export.ts`修改为指向我们待开发的插件。将以下代码： 152 | 153 | ```typescript 154 | import { HelloWorld } from './tuneflow-helloworld-plugin'; 155 | import bundle from './tuneflow-helloworld-plugin/bundle.json'; 156 | 157 | export default { 158 | PluginClass: HelloWorld, 159 | bundle, 160 | }; 161 | 162 | ``` 163 | 164 | 修改为： 165 | 166 | ```typescript 167 | import { YourPlugin } from './path_to_your_plugin_class'; 168 | import bundle from './path_to_your_bundle.json'; 169 | 170 | export default { 171 | PluginClass: YourPlugin, 172 | bundle, 173 | }; 174 | 175 | ``` 176 | 177 | ### 运行 DevKit 178 | 179 | 接下来运行 DevKit，切换到 tuneflow-devkit 目录，运行以下指令： 180 | 181 | ```bash 182 | npm run dev 183 | ``` 184 | 185 | 如前面所述，当所有配置正确时，我们应该在界面中看到正在开发的插件已经切换到了我们自定义的插件。 186 | 187 | ![切换至自定义插件](./public/images/switch_to_custom_plugin.png) 188 | 189 | 按照前面描述的步骤启动 TuneFlow 桌面版后，我们便可以通过“插件开发”插件运行我们的自定义插件。 190 | 191 | ### 调试代码 192 | 193 | 调试较大的项目时，我们往往需要设置断点，查看代码的运行流程和变量的取值。在 DevKit 中，我们可以借助浏览器自带的开发工具来完成。 194 | 195 | 首先用 Chrome 打开运行`npm run dev`后输出的网址，通常是`http://localhost:8899`。确保 TuneFlow 桌面版也同时打开，并加载了测试用的曲目。 196 | 197 | 随后打开 Chrome 开发者工具：使用快捷键 `Ctrl+Shift+I（Windows）`或 `Command+Option+I（macOS）`，或在页面上右键并选择“检查”(Inspect)。 198 | 199 | 在开发工具中切换到源代码(Sources)标签页。 200 | 201 | ![调试工具](./public/images/switch_to_plugin_file.png) 202 | 203 | 在文件树中找到你需要调试的代码文件，通常是`src/plugin//.ts`，点击需要调试的代码左侧的行号即可设置断点。 204 | 205 | 设置好断点后，切换到 TuneFlow 桌面版，运行“插件开发”插件，这时再切换回 DevKit，我们的代码就进入了断点。 206 | 207 | ![调试工具](./public/images/plugin_debug.png) 208 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | TuneFlow DevKit 10 | 16 | 17 | 18 |
19 | Loading... 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tuneflow-devkit", 3 | "version": "1.2.0", 4 | "description": "Development Kit for TuneFlow plugins", 5 | "main": "src/index.ts", 6 | "scripts": { 7 | "start-debugger": "concurrently --kill-others \"vite --config vite.dev.config.ts\" \"node src/debugger/dev_proxy.js\"", 8 | "dev": "npm run build-protos && npm run start-debugger", 9 | "test": "npm test", 10 | "lint": "gts lint", 11 | "lint:fix": "eslint --fix --ext .js,.ts,.vue", 12 | "lint-staged": "lint-staged", 13 | "lint-staged:ts": "eslint --ext .js,.ts,.vue", 14 | "build-protos": "node scripts/build_protos.js" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/andantei/tuneflow-devkit.git" 19 | }, 20 | "keywords": [ 21 | "ai", 22 | "music-composition", 23 | "song-writing", 24 | "music", 25 | "development", 26 | "SDK", 27 | "tuneflow" 28 | ], 29 | "author": "Andantei", 30 | "license": "MIT", 31 | "bugs": { 32 | "url": "https://github.com/andantei/tuneflow-devkit/issues" 33 | }, 34 | "homepage": "https://github.com/andantei/tuneflow-devkit#readme", 35 | "husky": { 36 | "hooks": { 37 | "pre-commit": "npm run lint-staged;npm run lint:tsc;" 38 | } 39 | }, 40 | "lint-staged": { 41 | "**/*.{js,ts}": [ 42 | "git add", 43 | "prettier --write", 44 | "git add", 45 | "eslint --ext .js,.ts", 46 | "npm run lint-staged:ts --" 47 | ] 48 | }, 49 | "devDependencies": { 50 | "@msgpack/msgpack": "2.8.0", 51 | "@tonejs/midi": "^2.0.28", 52 | "@types/jest": "^28.1.1", 53 | "@types/underscore": "^1.11.4", 54 | "@typescript-eslint/eslint-plugin": "^4.1.0", 55 | "@typescript-eslint/parser": "^4.1.0", 56 | "@vitejs/plugin-vue": "^3.2.0", 57 | "@vue/cli-plugin-eslint": "^5.0.0-0", 58 | "@vue/eslint-config-prettier": "^6.0.0", 59 | "@vue/eslint-config-typescript": "^7.0.0", 60 | "@vue/test-utils": "^2.0.0-0", 61 | "base64-arraybuffer": "^1.0.2", 62 | "binary-search-bounds": "^2.0.5", 63 | "concurrently": "^7.5.0", 64 | "eslint": "^7.25.0", 65 | "eslint-config-prettier": "^8.0.0", 66 | "eslint-plugin-import": "^2.24.2", 67 | "eslint-plugin-jest": "^24.3.6", 68 | "eslint-plugin-markdown": "^2.0.0", 69 | "eslint-plugin-no-explicit-type-exports": "^0.12.0", 70 | "eslint-plugin-prettier": "^3.1.0", 71 | "eslint-plugin-vue": "^7.1.0", 72 | "express": "^4.18.2", 73 | "flatted": "^3.2.5", 74 | "husky": "^7.0.2", 75 | "i18next": "^22.0.5", 76 | "i18next-browser-languagedetector": "^7.0.1", 77 | "jest": "^28.1.1", 78 | "jest-junit": "^13.0.0", 79 | "less": "^4.1.2", 80 | "lint-staged": "^11.1.2", 81 | "lodash.clonedeep": "^4.5.0", 82 | "nanoid": "^3.3.2", 83 | "prettier": "^2.4.1", 84 | "protobufjs": "^7.1.2", 85 | "protobufjs-cli": "^1.0.2", 86 | "semver": "^7.3.5", 87 | "socket.io": "^4.5.3", 88 | "socket.io-client": "^4.5.3", 89 | "ts-jest": "^28.0.5", 90 | "ts-node": "^10.4.0", 91 | "tuneflow": "^0.39.1", 92 | "typescript": "^4.4.3", 93 | "underscore": "^1.13.2", 94 | "vite": "^3.2.1", 95 | "vite-plugin-environment": "^1.1.3", 96 | "vue": "^3.2.31", 97 | "vue-tsc": "^1.0.9" 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /public/images/devkit_overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuneflow/tuneflow-devkit/1064ece42ff14a6ff979161868e39047b5b65d9b/public/images/devkit_overview.png -------------------------------------------------------------------------------- /public/images/plugin_debug.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuneflow/tuneflow-devkit/1064ece42ff14a6ff979161868e39047b5b65d9b/public/images/plugin_debug.png -------------------------------------------------------------------------------- /public/images/plugin_dev_plugin_added.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuneflow/tuneflow-devkit/1064ece42ff14a6ff979161868e39047b5b65d9b/public/images/plugin_dev_plugin_added.png -------------------------------------------------------------------------------- /public/images/plugin_dev_plugin_finished.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuneflow/tuneflow-devkit/1064ece42ff14a6ff979161868e39047b5b65d9b/public/images/plugin_dev_plugin_finished.png -------------------------------------------------------------------------------- /public/images/switch_to_custom_plugin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuneflow/tuneflow-devkit/1064ece42ff14a6ff979161868e39047b5b65d9b/public/images/switch_to_custom_plugin.png -------------------------------------------------------------------------------- /public/images/switch_to_plugin_file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuneflow/tuneflow-devkit/1064ece42ff14a6ff979161868e39047b5b65d9b/public/images/switch_to_plugin_file.png -------------------------------------------------------------------------------- /public/images/toggle_devtools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuneflow/tuneflow-devkit/1064ece42ff14a6ff979161868e39047b5b65d9b/public/images/toggle_devtools.png -------------------------------------------------------------------------------- /public/images/tuneflow_plugin_dev_plugin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tuneflow/tuneflow-devkit/1064ece42ff14a6ff979161868e39047b5b65d9b/public/images/tuneflow_plugin_dev_plugin.png -------------------------------------------------------------------------------- /scripts/build_protos.js: -------------------------------------------------------------------------------- 1 | const pbjs = require('protobufjs-cli/pbjs'); 2 | const pbts = require('protobufjs-cli/pbts'); 3 | const path = require('path'); 4 | const fs = require('fs'); 5 | 6 | const outputDirectory = path.resolve(__dirname, '../src/debugger/pbjs'); 7 | if (!fs.existsSync(outputDirectory)) { 8 | try { 9 | fs.mkdirSync(outputDirectory, { recursive: true }); 10 | } catch (e) {} 11 | } 12 | 13 | pbjs.main( 14 | [ 15 | '--target', 16 | 'static-module', 17 | '-w', 18 | 'es6', 19 | '-o', 20 | path.resolve(outputDirectory, 'song.js'), 21 | path.resolve(__dirname, '../protos/src/song.proto'), 22 | ], 23 | function (err) { 24 | if (err) throw err; 25 | }, 26 | ); 27 | 28 | pbts.main( 29 | ['-o', path.resolve(outputDirectory, 'song.d.ts'), path.resolve(outputDirectory, 'song.js')], 30 | function (err) { 31 | if (err) throw err; 32 | }, 33 | ); 34 | -------------------------------------------------------------------------------- /src/debugger/Debugger.vue: -------------------------------------------------------------------------------- 1 | 123 | 124 | 154 | 155 | 168 | -------------------------------------------------------------------------------- /src/debugger/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "DevProxyPort": 18818 3 | } 4 | -------------------------------------------------------------------------------- /src/debugger/debugger.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import i18next from 'i18next'; 3 | import LanguageDetector from 'i18next-browser-languagedetector'; 4 | 5 | import Debugger from './Debugger.vue'; 6 | 7 | await i18next.use(LanguageDetector).init({ 8 | detection: { 9 | order: ['querystring', 'htmlTag', 'navigator'], 10 | lookupQuerystring: 'lang', 11 | caches: ['cookie'], 12 | }, 13 | fallbackLng: 'en-US', 14 | }); 15 | 16 | const app = createApp(Debugger); 17 | 18 | async function init() { 19 | app.mount('#app'); 20 | } 21 | 22 | init(); 23 | -------------------------------------------------------------------------------- /src/debugger/dev_proxy.js: -------------------------------------------------------------------------------- 1 | const { Server } = require('socket.io'); 2 | const { createServer } = require('http'); 3 | const Config = require('./config.json'); 4 | const fs = require('fs'); 5 | 6 | let dawClient = null; 7 | let devKitClient = null; 8 | const httpServer = createServer(); 9 | 10 | const server = new Server(httpServer, { 11 | pingTimeout: 300000, 12 | // Setting a high limit so that we don't get disconnected accidentally, 13 | // in reality these heavy duty work should be handled through shared memory. 14 | maxHttpBufferSize: 1024 * 1000 * 20, // 10MB 15 | cors: { 16 | origin: '*', 17 | }, 18 | }); 19 | 20 | console.log('================================'); 21 | console.log('IMPORTANT: Open the localhost link below in browser to start debugging your plugin'); 22 | console.log('================================'); 23 | 24 | server.of('/daw').on('connection', socket => { 25 | console.log('================================'); 26 | console.log('TuneFlow Connected'); 27 | console.log(); 28 | console.log('IMPORTANT: Open the localhost link below in browser to start debugging your plugin'); 29 | 30 | console.log('================================'); 31 | dawClient = socket; 32 | socket.on('error', e => { 33 | console.error(e); 34 | }); 35 | socket.on('disconnect', () => { 36 | dawClient = null; 37 | console.log('================================'); 38 | console.error('TuneFlow Disconnected'); 39 | console.error(); 40 | console.error( 41 | 'IMPORTANT: Please also exit the "Plugin Development" plugin in TuneFlow, so that when you restart the devkit, the plugin inside TuneFlow can be initialized correctly', 42 | ); 43 | console.log('================================'); 44 | }); 45 | for (const messageType of ['get-bundle-info', 'init-plugin', 'run-plugin']) { 46 | socket.on(messageType, (payload, callback) => { 47 | if (!devKitClient) { 48 | return; 49 | } 50 | devKitClient.emit(messageType, payload, ack => { 51 | callback(ack); 52 | }); 53 | }); 54 | } 55 | }); 56 | 57 | server.of('/devKit').on('connection', socket => { 58 | console.log('new dev kit connection'); 59 | devKitClient = socket; 60 | socket.on('error', e => { 61 | console.error(e); 62 | }); 63 | socket.on('disconnect', () => { 64 | devKitClient = null; 65 | console.log('================================'); 66 | console.error('DevKit Disconnected'); 67 | console.error(); 68 | console.error( 69 | 'IMPORTANT: Please also exit the "Plugin Development" plugin in TuneFlow, so that when you restart the plugin, it can be initialized correctly', 70 | ); 71 | console.log('================================'); 72 | }); 73 | 74 | for (const messageType of ['call-api']) { 75 | socket.on(messageType, (payload, callback) => { 76 | // Resolve the request if it can be done here. 77 | if (messageType === 'call-api') { 78 | const apiName = payload[0]; 79 | if (apiName === 'readAudioBuffer') { 80 | const filePath = payload[1]; 81 | const fileContent = fs.readFileSync(filePath); 82 | console.log('reading audio buffer file, length', fileContent.length); 83 | callback(fileContent); 84 | return; 85 | } else if (apiName === 'readFile') { 86 | const filePath = payload[1]; 87 | const fileBuffer = fs.readFileSync(filePath); 88 | console.log('reading file', filePath, 'length', fileBuffer.length); 89 | callback(fileBuffer); 90 | return; 91 | } 92 | } 93 | // Try to call the DAW to resolve this request. 94 | if (!dawClient) { 95 | return; 96 | } 97 | dawClient.emit(messageType, payload, ack => { 98 | callback(ack); 99 | }); 100 | }); 101 | } 102 | }); 103 | 104 | httpServer.on('listening', () => { 105 | console.log('starting dev proxy server on port', Config.DevProxyPort); 106 | }); 107 | 108 | httpServer.listen(Config.DevProxyPort); 109 | -------------------------------------------------------------------------------- /src/debugger/utils.ts: -------------------------------------------------------------------------------- 1 | import { decode, encode } from 'base64-arraybuffer'; 2 | import { 3 | AutomationTarget, 4 | ClipType, 5 | Song, 6 | TickToSecondStepper, 7 | Track, 8 | TrackType, 9 | TuneflowPlugin, 10 | } from 'tuneflow'; 11 | import type { AudioClipData, AutomationValue, Clip, LabelText, Note, ReadAPIs } from 'tuneflow'; 12 | import _ from 'underscore'; 13 | import i18next from 'i18next'; 14 | import socketio from 'socket.io-client'; 15 | import Config from './config.json'; 16 | 17 | import { song as songProtoModule } from './pbjs/song'; 18 | 19 | const SOCKETIO_CLIENT = socketio(`http://localhost:${Config.DevProxyPort}/devKit`); 20 | 21 | export function getProxySocketClient() { 22 | return SOCKETIO_CLIENT; 23 | } 24 | 25 | export function createReadAPIs(): ReadAPIs { 26 | return { 27 | translateLabel: (labelText: LabelText) => getTranslatedLabelText(labelText), 28 | serializeSong: async (song: Song) => serializeSong(song), 29 | serializeSongAsUint8Array: async (song: Song) => serializeSongToUint8Array(song), 30 | deserializeSong: async (encodedSong: string) => deserializeSong(encodedSong), 31 | deserializeSongFromUint8Array: async (encodedSong: Uint8Array) => 32 | deserializeSongFromUint8Array(encodedSong), 33 | readAudioBuffer: async (audioFile: string | File) => { 34 | let fileContent: ArrayBuffer; 35 | if (typeof audioFile === 'string') { 36 | // Local file. 37 | const response = await new Promise((resolve, unusedReject) => { 38 | SOCKETIO_CLIENT.emit('call-api', ['readFile', audioFile], (ack: any) => { 39 | resolve(ack); 40 | }); 41 | }); 42 | if (!response) { 43 | return null; 44 | } 45 | fileContent = response as ArrayBuffer; 46 | } else { 47 | // File object. 48 | fileContent = await (audioFile as File).arrayBuffer(); 49 | } 50 | return new Promise((resolve, unusedReject) => { 51 | const audioContext = new AudioContext(); 52 | return audioContext.decodeAudioData(fileContent, audioBuffer => { 53 | // Do something with audioBuffer 54 | resolve(audioBuffer); 55 | }); 56 | }); 57 | }, 58 | readFile: async (filePath: string) => { 59 | return await new Promise((resolve, unusedReject) => { 60 | SOCKETIO_CLIENT.emit('call-api', ['readFile', filePath], (ack: any) => { 61 | resolve(ack); 62 | }); 63 | }).then(response => { 64 | if (!response) { 65 | return null; 66 | } 67 | return new Uint8Array(response as ArrayBuffer); 68 | }); 69 | }, 70 | getAvailableAudioPlugins: async () => { 71 | return new Promise((resolve, unusedReject) => { 72 | SOCKETIO_CLIENT.emit('call-api', ['getAvailableAudioPlugins'], (ack: any) => { 73 | resolve(ack); 74 | }); 75 | }); 76 | }, 77 | getFilesInDirectory: async (folderPath: string) => { 78 | return new Promise((resolve, unusedReject) => { 79 | SOCKETIO_CLIENT.emit('call-api', ['getFilesInDirectory', folderPath], (ack: any) => { 80 | resolve(ack); 81 | }); 82 | }); 83 | }, 84 | resolvePath: async (path1: string, path2: string) => { 85 | return new Promise((resolve, unusedReject) => { 86 | SOCKETIO_CLIENT.emit('call-api', ['resolvePath', path1, path2], (ack: any) => { 87 | resolve(ack); 88 | }); 89 | }); 90 | }, 91 | readPluginSpec: async (specPath: string) => { 92 | return new Promise((resolve, unusedReject) => { 93 | SOCKETIO_CLIENT.emit('call-api', ['readPluginSpec', specPath], (ack: any) => { 94 | resolve(ack); 95 | }); 96 | }); 97 | }, 98 | }; 99 | } 100 | 101 | function getTranslatedLabelText(labelText: LabelText): string { 102 | if (typeof labelText === 'string') { 103 | return labelText; 104 | } 105 | 106 | const currentLocale = i18next.language.split('-')[0].toLowerCase(); 107 | const matchLocale = _.find( 108 | _.keys(labelText), 109 | key => key.split('-')[0].toLowerCase() === currentLocale, 110 | ); 111 | if (matchLocale) { 112 | return labelText[matchLocale]; 113 | } else if (_.keys(labelText).length > 0) { 114 | return labelText[_.keys(labelText)[0]]; 115 | } else { 116 | return ''; 117 | } 118 | } 119 | 120 | class TuneflowUtilsPlugin extends TuneflowPlugin {} 121 | 122 | const utilsPlugin = new TuneflowUtilsPlugin(); 123 | 124 | async function songProtoToSong(songProto: songProtoModule.Song) { 125 | const song = new Song(); 126 | // @ts-ignore 127 | song.setPluginContextInternal(utilsPlugin); 128 | song.setResolution(songProto.PPQ); 129 | // Time signatures have to be populated before tempos 130 | // so that tempos can be calculated correctly. 131 | for (const timeSignature of songProto.timeSignatures) { 132 | song.createTimeSignature({ 133 | ticks: timeSignature.ticks as number, 134 | numerator: timeSignature.numerator as number, 135 | denominator: timeSignature.denominator as number, 136 | }); 137 | } 138 | for (const tempo of songProto.tempos) { 139 | song.createTempoChange({ 140 | ticks: tempo.ticks as number, 141 | bpm: tempo.bpm as number, 142 | }); 143 | } 144 | for (const structure of songProto.structures) { 145 | song.createStructure({ 146 | tick: structure.tick as number, 147 | type: structure.type as number, 148 | customName: structure.customName as string | undefined, 149 | }); 150 | } 151 | if (songProto.lyrics && songProto.lyrics.lines) { 152 | for (const lineProto of songProto.lyrics.lines) { 153 | if (!lineProto.words || lineProto.words.length === 0) { 154 | continue; 155 | } 156 | const line = song 157 | .getLyrics() 158 | .createLine({ startTick: lineProto.words[0].startTick as number }); 159 | for (const wordProto of lineProto.words) { 160 | line.createWord({ 161 | word: wordProto.word as string, 162 | startTick: wordProto.startTick as number, 163 | endTick: wordProto.endTick as number, 164 | }); 165 | } 166 | } 167 | } 168 | const masterTrackProto = songProto.masterTrack as songProtoModule.Track; 169 | // @ts-ignore 170 | song.masterTrack = new Track({ 171 | type: TrackType.MASTER_TRACK, 172 | uuid: masterTrackProto.uuid, 173 | volume: masterTrackProto.volume, 174 | }); 175 | for (const trackProto of songProto.tracks) { 176 | const track = song.createTrack({ 177 | type: trackProto.type as number, 178 | rank: trackProto.rank as number, 179 | }); 180 | 181 | track.setId(trackProto.uuid as string); 182 | track.setVolume(trackProto.volume as number); 183 | track.setPan(trackProto.pan as number); 184 | track.setSolo(trackProto.solo as boolean); 185 | track.setMuted(trackProto.muted as boolean); 186 | if (trackProto.type === songProtoModule.TrackType.MIDI_TRACK) { 187 | track.setInstrument({ 188 | program: (trackProto.instrument as any).program, 189 | isDrum: (trackProto.instrument as any).isDrum, 190 | }); 191 | for (const suggestedInstrument of trackProto.suggestedInstruments as any[]) { 192 | track.createSuggestedInstrument({ 193 | program: suggestedInstrument.program, 194 | isDrum: suggestedInstrument.isDrum, 195 | }); 196 | } 197 | } 198 | 199 | for (const clipProto of trackProto.clips as songProtoModule.IClip[]) { 200 | let newClip: Clip; 201 | if (clipProto.type === songProtoModule.ClipType.AUDIO_CLIP) { 202 | const audioClipDataProto = clipProto.audioClipData as songProtoModule.AudioClipData; 203 | newClip = track.createAudioClip({ 204 | clipStartTick: clipProto.clipStartTick as number, 205 | clipEndTick: clipProto.clipEndTick as number, 206 | audioClipData: { 207 | audioFilePath: audioClipDataProto.audioFilePath, 208 | startTick: audioClipDataProto.startTick, 209 | duration: audioClipDataProto.duration, 210 | audioData: audioClipDataProto.audioData 211 | ? { 212 | format: audioClipDataProto.audioData.format as string, 213 | data: audioClipDataProto.audioData.data as Uint8Array, 214 | } 215 | : undefined, 216 | pitchOffset: audioClipDataProto.pitchOffset, 217 | speedRatio: audioClipDataProto.speedRatio, 218 | }, 219 | }); 220 | } else if (clipProto.type === songProtoModule.ClipType.MIDI_CLIP) { 221 | newClip = track.createMIDIClip({ 222 | clipStartTick: clipProto.clipStartTick as number, 223 | clipEndTick: clipProto.clipEndTick as number, 224 | }); 225 | } else { 226 | throw new Error(`Unsupported clip type ${clipProto.type}`); 227 | } 228 | // @ts-ignore 229 | newClip.id = clipProto.id as string; 230 | if (clipProto.type === songProtoModule.ClipType.MIDI_CLIP && clipProto.notes) { 231 | let maxNoteId = 1; 232 | for (const note of clipProto.notes as songProtoModule.Note[]) { 233 | const newNote = newClip.createNote({ 234 | pitch: note.pitch, 235 | velocity: note.velocity, 236 | startTick: note.startTick as number, 237 | endTick: note.endTick as number, 238 | updateClipRange: false, 239 | resolveClipConflict: false, 240 | }); 241 | maxNoteId = Math.max(note.id, maxNoteId); 242 | if (newNote) { 243 | // @ts-ignore 244 | newNote.idInternal = note.id; 245 | } 246 | } 247 | // @ts-ignore 248 | newClip.nextNoteIdInternal = maxNoteId; 249 | // @ts-ignore 250 | newClip.getNextNoteIdInternal(); 251 | } else if (clipProto.type === songProtoModule.ClipType.AUDIO_CLIP) { 252 | const audioClipData = clipProto.audioClipData; 253 | if (audioClipData) { 254 | newClip.setAudioFile( 255 | audioClipData.audioFilePath as string, 256 | audioClipData.startTick as number, 257 | audioClipData.duration as number, 258 | ); 259 | (newClip.getAudioClipData() as AudioClipData).speedRatio = 260 | audioClipData.speedRatio as number; 261 | (newClip.getAudioClipData() as AudioClipData).pitchOffset = 262 | audioClipData.pitchOffset as number; 263 | } 264 | } 265 | } 266 | 267 | // Set plugins. 268 | if (trackProto.type === songProtoModule.TrackType.MIDI_TRACK) { 269 | if (trackProto.samplerPlugin && trackProto.samplerPlugin.tfId) { 270 | // @ts-ignore 271 | track.samplerPlugin = track.createAudioPlugin(trackProto.samplerPlugin.tfId); 272 | // @ts-ignore 273 | track.samplerPlugin.setIsEnabled(trackProto.samplerPlugin.isEnabled); 274 | // @ts-ignore 275 | track.samplerPlugin.localInstanceIdInternal = trackProto.samplerPlugin.localInstanceId; 276 | } 277 | } 278 | 279 | // Set automation. 280 | if (trackProto.automation) { 281 | if (trackProto.automation.targets) { 282 | for (let i = 0; i < trackProto.automation.targets.length; i += 1) { 283 | const targetProto = trackProto.automation.targets[i]; 284 | track 285 | .getAutomation() 286 | .addAutomation( 287 | new AutomationTarget( 288 | targetProto.type as number, 289 | targetProto.audioPluginId as string | undefined, 290 | targetProto.paramId as string | undefined, 291 | ), 292 | i, 293 | ); 294 | } 295 | } 296 | if (trackProto.automation.targetValues) { 297 | for (const tfAutomationTargetId of _.keys(trackProto.automation.targetValues)) { 298 | const targetValue = track.getAutomation().getAutomationValueById(tfAutomationTargetId); 299 | if (!targetValue) { 300 | // Only sync the values that have a target specified in the automation data. 301 | console.error( 302 | `Automation target ${tfAutomationTargetId} has values but is missing in track ${track.getId()}`, 303 | ); 304 | continue; 305 | } 306 | const targetValueProto = trackProto.automation.targetValues[tfAutomationTargetId]; 307 | targetValue.setDisabled(targetValueProto.disabled as boolean); 308 | if (targetValueProto.points && targetValueProto.points.length > 0) { 309 | let maxPointId = 1; 310 | for (const pointProto of targetValueProto.points) { 311 | const point = targetValue.addPoint( 312 | pointProto.tick as number, 313 | pointProto.value as number, 314 | ); 315 | point.id = pointProto.id as number; 316 | maxPointId = Math.max(maxPointId, pointProto.id as number); 317 | } 318 | // @ts-ignore 319 | targetValue.nextPointIdInternal = maxPointId; 320 | // @ts-ignore 321 | targetValue.getNextPointIdInternal(); 322 | } 323 | } 324 | } 325 | } 326 | } 327 | return song; 328 | } 329 | 330 | async function deserializeSong(encodedSong: string) { 331 | const arrayBuffer = decode(encodedSong); 332 | return deserializeSongFromUint8Array(new Uint8Array(arrayBuffer)); 333 | } 334 | 335 | async function deserializeSongFromUint8Array(encodedSong: Uint8Array) { 336 | const songProto = songProtoModule.Song.decode(encodedSong); 337 | return songProtoToSong(songProto); 338 | } 339 | 340 | async function songToProto(song: Song) { 341 | const songProto = songProtoModule.Song.create(); 342 | songProto.PPQ = song.getResolution(); 343 | // Sync time signature. 344 | updateSongTimeSignatures(songProto, song); 345 | // Sync tempo. 346 | updateSongTempos(songProto, song); 347 | updateSongStructures(songProto, song); 348 | updateSongLyrics(songProto, song); 349 | const tickToSecondStepper = new TickToSecondStepper(song.getTempoChanges(), song.getResolution()); 350 | // Sync master track. 351 | if (!songProto.masterTrack) { 352 | songProto.masterTrack = songProtoModule.Track.create(); 353 | } 354 | updateTrackProtoToTrack( 355 | songProto.masterTrack as songProtoModule.Track, 356 | song.getMasterTrack(), 357 | tickToSecondStepper, 358 | ); 359 | // Sync tracks. 360 | const songProtoTrackMap = new Map(); 361 | const songTrackIndexMap = new Map(); 362 | if (songProto.tracks) { 363 | for (const track of songProto.tracks) { 364 | songProtoTrackMap.set(track.uuid as string, track as songProtoModule.Track); 365 | } 366 | } else { 367 | songProto.tracks = []; 368 | } 369 | for (let i = 0; i < song.getTracks().length; i += 1) { 370 | const track = song.getTracks()[i]; 371 | songTrackIndexMap.set(track.getId(), i); 372 | } 373 | // Remove tracks that are not in the song. 374 | for (let i = songProto.tracks.length - 1; i >= 0; i -= 1) { 375 | const trackProto = songProto.tracks[i]; 376 | const trackId = trackProto.uuid as string; 377 | if (!songTrackIndexMap.has(trackId)) { 378 | songProto.tracks.splice(i, 1); 379 | } 380 | } 381 | // Sync tracks in the new song. 382 | for (const track of song.getTracks()) { 383 | const trackId = track.getId(); 384 | let trackProto: songProtoModule.Track; 385 | if (songProtoTrackMap.has(trackId)) { 386 | trackProto = songProtoTrackMap.get(trackId) as songProtoModule.Track; 387 | } else { 388 | trackProto = songProtoModule.Track.create(); 389 | trackProto.uuid = track.getId(); 390 | trackProto.type = track.getType() as number; 391 | songProto.tracks.push(trackProto); 392 | } 393 | updateTrackProtoToTrack(trackProto, track, tickToSecondStepper); 394 | } 395 | 396 | // Sort song proto tracks to match the order of song tracks. 397 | songProto.tracks.sort( 398 | (a, b) => 399 | (songTrackIndexMap.get(a.uuid as string) as number) - 400 | (songTrackIndexMap.get(b.uuid as string) as number), 401 | ); 402 | songProto.lastTick = song.getLastTick(); 403 | songProto.duration = song.getDuration(); 404 | return songProto; 405 | } 406 | 407 | async function serializeSong(song: Song) { 408 | return encode(await serializeSongToUint8Array(song)); 409 | } 410 | 411 | async function serializeSongToUint8Array(song: Song) { 412 | const songProto = await songToProto(song); 413 | return songProtoModule.Song.encode(songProto).finish(); 414 | } 415 | 416 | function updateSongTempos(songProto: songProtoModule.Song, song: Song) { 417 | if (!songProto.tempos) { 418 | songProto.tempos = []; 419 | } 420 | for (let i = 0; i < song.getTempoChanges().length; i += 1) { 421 | const tempoChange = song.getTempoChanges()[i]; 422 | let tempoProto = songProto.tempos[i]; 423 | if (!tempoProto) { 424 | tempoProto = songProtoModule.TempoEvent.create({ 425 | ticks: tempoChange.getTicks(), 426 | time: tempoChange.getTime(), 427 | bpm: tempoChange.getBpm(), 428 | }); 429 | songProto.tempos[i] = tempoProto; 430 | } else { 431 | if (tempoProto.bpm !== tempoChange.getBpm()) { 432 | tempoProto.bpm = tempoChange.getBpm(); 433 | } 434 | if (tempoProto.ticks !== tempoChange.getTicks()) { 435 | tempoProto.ticks = tempoChange.getTicks(); 436 | } 437 | if (tempoProto.time !== tempoChange.getTime()) { 438 | tempoProto.time = tempoChange.getTime(); 439 | } 440 | } 441 | } 442 | // Now the length of tempo protos should be at least the length 443 | // of tf tempos. 444 | if (song.getTempoChanges().length !== songProto.tempos.length) { 445 | // trim tempo protos to be the same length as tempos. 446 | songProto.tempos.splice( 447 | song.getTempoChanges().length, 448 | songProto.tempos.length - song.getTempoChanges().length, 449 | ); 450 | } 451 | } 452 | 453 | function updateSongStructures(songProto: songProtoModule.Song, song: Song) { 454 | songProto.structures = song.getStructures().map(item => 455 | songProtoModule.StructureMarker.create({ 456 | tick: item.getTick(), 457 | type: item.getType(), 458 | customName: item.getCustomName(), 459 | }), 460 | ); 461 | } 462 | 463 | function updateSongLyrics(songProto: songProtoModule.Song, song: Song) { 464 | songProto.lyrics = songProtoModule.Lyrics.create({ 465 | lines: song 466 | .getLyrics() 467 | .getLines() 468 | .map(line => 469 | songProtoModule.LyricLine.create({ 470 | words: line.getWords().map(word => 471 | songProtoModule.LyricLine.LyricWord.create({ 472 | word: word.getWord(), 473 | startTick: word.getStartTick(), 474 | endTick: word.getEndTick(), 475 | }), 476 | ), 477 | }), 478 | ), 479 | }); 480 | } 481 | 482 | function updateSongTimeSignatures(songProto: songProtoModule.Song, song: Song) { 483 | if (!songProto.timeSignatures) { 484 | songProto.timeSignatures = []; 485 | } 486 | for (let i = 0; i < song.getTimeSignatures().length; i += 1) { 487 | const timeSignature = song.getTimeSignatures()[i]; 488 | let timeSignatureProto = songProto.timeSignatures[i]; 489 | if (!timeSignatureProto) { 490 | timeSignatureProto = songProtoModule.TimeSignatureEvent.create({ 491 | ticks: timeSignature.getTicks(), 492 | numerator: timeSignature.getNumerator(), 493 | denominator: timeSignature.getDenominator(), 494 | }); 495 | songProto.timeSignatures[i] = timeSignatureProto; 496 | } else { 497 | if (timeSignatureProto.numerator !== timeSignature.getNumerator()) { 498 | timeSignatureProto.numerator = timeSignature.getNumerator(); 499 | } 500 | if (timeSignatureProto.denominator !== timeSignature.getDenominator()) { 501 | timeSignatureProto.denominator = timeSignature.getDenominator(); 502 | } 503 | if (timeSignatureProto.ticks !== timeSignature.getTicks()) { 504 | timeSignatureProto.ticks = timeSignature.getTicks(); 505 | } 506 | } 507 | } 508 | // Now the length of time signature protos should be at least the length 509 | // of tf time signatures. 510 | if (song.getTimeSignatures().length !== songProto.timeSignatures.length) { 511 | // trim time signature protos to be the same length as time signatures. 512 | songProto.timeSignatures.splice( 513 | song.getTimeSignatures().length, 514 | songProto.timeSignatures.length - song.getTimeSignatures().length, 515 | ); 516 | } 517 | } 518 | 519 | /** Update the track proto with the corresponding track with the same track id. */ 520 | function updateTrackProtoToTrack( 521 | trackProto: songProtoModule.Track, 522 | track: Track, 523 | tickToSecondStepper: TickToSecondStepper, 524 | ) { 525 | trackProto.uuid = track.getId(); 526 | trackProto.rank = track.getRank(); 527 | if (trackProto.type !== (track.getType() as number)) { 528 | trackProto.type = track.getType() as number; 529 | } 530 | 531 | if (track.getType() === TrackType.MIDI_TRACK) { 532 | if (!trackProto.instrument) { 533 | trackProto.instrument = songProtoModule.InstrumentInfo.create(); 534 | } 535 | let trackIsDrum = false; 536 | let trackProgram = 0; 537 | const trackInstrument = track.getInstrument(); 538 | if (trackInstrument) { 539 | trackIsDrum = trackInstrument.getIsDrum(); 540 | trackProgram = trackInstrument.getProgram(); 541 | } 542 | if (trackProto.instrument.isDrum !== trackIsDrum) { 543 | trackProto.instrument.isDrum = trackIsDrum; 544 | } 545 | if (trackProto.instrument.program !== trackProgram) { 546 | trackProto.instrument.program = trackProgram; 547 | } 548 | } else { 549 | if (trackProto.instrument) { 550 | delete trackProto.instrument; 551 | } 552 | } 553 | 554 | if (trackProto.volume !== track.getVolume()) { 555 | trackProto.volume = track.getVolume(); 556 | } 557 | if (trackProto.pan !== track.getPan()) { 558 | trackProto.pan = track.getPan(); 559 | } 560 | if (trackProto.solo !== track.getSolo()) { 561 | trackProto.solo = track.getSolo(); 562 | } 563 | if (trackProto.muted !== track.getMuted()) { 564 | trackProto.muted = track.getMuted(); 565 | } 566 | trackProto.trackStartTick = track.getTrackStartTick(); 567 | trackProto.trackEndTick = track.getTrackEndTick(); 568 | trackProto.suggestedInstruments = []; 569 | for (const suggestedInstrument of track.getSuggestedInstruments()) { 570 | const suggestedInstrumentProto = songProtoModule.InstrumentInfo.create(); 571 | suggestedInstrumentProto.program = suggestedInstrument.getProgram(); 572 | suggestedInstrumentProto.isDrum = suggestedInstrument.getIsDrum(); 573 | trackProto.suggestedInstruments.push(suggestedInstrumentProto); 574 | } 575 | const trackProtoClipMap = new Map(); 576 | const trackClipIndexMap = new Map(); 577 | if (!trackProto.clips) { 578 | trackProto.clips = []; 579 | } 580 | for (const clipProto of trackProto.clips) { 581 | trackProtoClipMap.set(clipProto.id as string, clipProto as songProtoModule.Clip); 582 | } 583 | for (let i = 0; i < track.getClips().length; i += 1) { 584 | const clip = track.getClips()[i]; 585 | trackClipIndexMap.set(clip.getId(), i); 586 | } 587 | // Remove clips that are not in the track. 588 | for (let i = trackProto.clips.length - 1; i >= 0; i -= 1) { 589 | const clipProto = trackProto.clips[i]; 590 | const clipId = clipProto.id as string; 591 | if (!trackClipIndexMap.has(clipId)) { 592 | trackProto.clips.splice(i, 1); 593 | } 594 | } 595 | // Sync new track clips. 596 | for (const clip of track.getClips()) { 597 | const clipId = clip.getId(); 598 | let clipProto: songProtoModule.Clip; 599 | if (trackProtoClipMap.has(clipId)) { 600 | clipProto = trackProtoClipMap.get(clipId) as songProtoModule.Clip; 601 | } else { 602 | clipProto = songProtoModule.Clip.create(); 603 | clipProto.id = clip.getId(); 604 | clipProto.type = clip.getType(); 605 | trackProto.clips.push(clipProto); 606 | } 607 | 608 | updateClipProtoToClip(track.getId(), clipProto, clip, tickToSecondStepper); 609 | } 610 | 611 | // Sort clip protos by the order of clips in the track. 612 | trackProto.clips.sort( 613 | (a, b) => 614 | (trackClipIndexMap.get(a.id as string) as number) - 615 | (trackClipIndexMap.get(b.id as string) as number), 616 | ); 617 | 618 | // Populate plugins. 619 | if (track.getType() === TrackType.MIDI_TRACK) { 620 | const trackSamplerPlugin = track.getSamplerPlugin(); 621 | if (trackSamplerPlugin && trackSamplerPlugin.getTuneflowId()) { 622 | if (!trackProto.samplerPlugin) { 623 | trackProto.samplerPlugin = songProtoModule.AudioPluginInfo.create(); 624 | } 625 | if (trackProto.samplerPlugin.localInstanceId !== trackSamplerPlugin.getInstanceId()) { 626 | trackProto.samplerPlugin.localInstanceId = trackSamplerPlugin.getInstanceId(); 627 | } 628 | if (trackProto.samplerPlugin.tfId !== trackSamplerPlugin.getTuneflowId()) { 629 | trackProto.samplerPlugin.tfId = trackSamplerPlugin.getTuneflowId(); 630 | } 631 | if (trackProto.samplerPlugin.isEnabled !== trackSamplerPlugin.getIsEnabled()) { 632 | trackProto.samplerPlugin.isEnabled = trackSamplerPlugin.getIsEnabled(); 633 | } 634 | if ( 635 | (!!trackProto.samplerPlugin.base64States && !trackSamplerPlugin.getBase64States()) || 636 | (!trackProto.samplerPlugin.base64States && !!trackSamplerPlugin.getBase64States()) || 637 | (!!trackProto.samplerPlugin.base64States && 638 | !!trackSamplerPlugin.getBase64States() && 639 | trackProto.samplerPlugin.base64States !== trackSamplerPlugin.getBase64States()) 640 | ) { 641 | trackProto.samplerPlugin.base64States = trackSamplerPlugin.getBase64States(); 642 | } 643 | } else if (trackProto.samplerPlugin) { 644 | delete trackProto.samplerPlugin; 645 | } 646 | } else { 647 | // If the track is not MIDI track, delete sampler plugin. 648 | if (trackProto.samplerPlugin) { 649 | delete trackProto.samplerPlugin; 650 | } 651 | } 652 | 653 | // Populate automations. 654 | if (track.hasAnyAutomation()) { 655 | if (!trackProto.automation) { 656 | trackProto.automation = songProtoModule.AutomationData.create(); 657 | } 658 | if (!trackProto.automation.targets) { 659 | trackProto.automation.targets = []; 660 | } 661 | if (!trackProto.automation.targetValues) { 662 | trackProto.automation.targetValues = {}; 663 | } 664 | // Sync targets. 665 | const newTargetIds = new Set(); 666 | for (let i = 0; i < track.getAutomation().getAutomationTargets().length; i += 1) { 667 | const target = track.getAutomation().getAutomationTargets()[i]; 668 | const tfAutomationTargetId = target.toTfAutomationTargetId(); 669 | newTargetIds.add(tfAutomationTargetId); 670 | let targetProto = trackProto.automation.targets[i] as songProtoModule.AutomationTarget; 671 | if (!targetProto) { 672 | targetProto = songProtoModule.AutomationTarget.create({ 673 | type: target.getType() as number, 674 | audioPluginId: target.getPluginInstanceId(), 675 | paramId: target.getParamId(), 676 | }); 677 | trackProto.automation.targets[i] = targetProto; 678 | } else if ( 679 | AutomationTarget.encodeAutomationTarget( 680 | targetProto.type as number, 681 | targetProto.audioPluginId, 682 | targetProto.paramId, 683 | ) !== tfAutomationTargetId 684 | ) { 685 | targetProto.type = target.getType() as number; 686 | targetProto.audioPluginId = target.getPluginInstanceId() as string; 687 | targetProto.paramId = target.getParamId() as string; 688 | } 689 | } 690 | // Remove targets that are not in the new targets. 691 | trackProto.automation.targets.splice( 692 | track.getAutomation().getAutomationTargets().length, 693 | trackProto.automation.targets.length - track.getAutomation().getAutomationTargets().length, 694 | ); 695 | 696 | // Sync target values. 697 | const newTargetValueTargetIds = new Set(); 698 | for (const tfAutomationTargetId of _.keys(track.getAutomation().getAutomationTargetValues())) { 699 | if (!newTargetIds.has(tfAutomationTargetId)) { 700 | // Only sync values that has a target. 701 | continue; 702 | } 703 | newTargetValueTargetIds.add(tfAutomationTargetId); 704 | const targetValue = track.getAutomation().getAutomationTargetValues()[ 705 | tfAutomationTargetId 706 | ] as AutomationValue; 707 | let targetValueProto = trackProto.automation.targetValues[ 708 | tfAutomationTargetId 709 | ] as songProtoModule.AutomationValue; 710 | if (!targetValueProto) { 711 | targetValueProto = songProtoModule.AutomationValue.create(); 712 | trackProto.automation.targetValues[tfAutomationTargetId] = targetValueProto; 713 | } 714 | if (targetValueProto.disabled !== targetValue.getDisabled()) { 715 | targetValueProto.disabled = targetValue.getDisabled(); 716 | } 717 | // Sync points. 718 | for (let i = 0; i < targetValue.getPoints().length; i += 1) { 719 | const automationPoint = targetValue.getPoints()[i]; 720 | let automationPointProto = targetValueProto.points[i]; 721 | if (!automationPointProto) { 722 | automationPointProto = songProtoModule.AutomationValue.ParamValue.create({ 723 | tick: automationPoint.tick, 724 | value: automationPoint.value, 725 | id: automationPoint.id, 726 | }); 727 | targetValueProto.points[i] = automationPointProto; 728 | } else { 729 | if (automationPointProto.id !== automationPoint.id) { 730 | automationPointProto.id = automationPoint.id; 731 | } 732 | if (automationPointProto.tick !== automationPoint.tick) { 733 | automationPointProto.tick = automationPoint.tick; 734 | } 735 | if (automationPointProto.value !== automationPoint.value) { 736 | automationPointProto.value = automationPoint.value; 737 | } 738 | } 739 | } 740 | if (targetValueProto.points.length !== targetValue.getPoints().length) { 741 | targetValueProto.points.splice( 742 | targetValue.getPoints().length, 743 | targetValueProto.points.length - targetValue.getPoints().length, 744 | ); 745 | } 746 | } 747 | // Remove target value protos that are not in the new target values. 748 | for (const existingTfTargetId of _.keys(trackProto.automation.targetValues)) { 749 | if ( 750 | // The target has to be in both the new targets and new target values. 751 | // Otherwise we should remove it. 752 | !newTargetIds.has(existingTfTargetId) || 753 | !newTargetValueTargetIds.has(existingTfTargetId) || 754 | !track.getAutomation().getAutomationValueById(existingTfTargetId) 755 | ) { 756 | delete trackProto.automation.targetValues[existingTfTargetId]; 757 | } 758 | } 759 | } else if (trackProto.automation) { 760 | delete trackProto.automation; 761 | } 762 | } 763 | 764 | function updateClipProtoToClip( 765 | trackId: string, 766 | clipProto: songProtoModule.Clip, 767 | clip: Clip, 768 | tickToSecondStepper: TickToSecondStepper, 769 | ) { 770 | if (clipProto.clipStartTick !== clip.getClipStartTick()) { 771 | clipProto.clipStartTick = clip.getClipStartTick(); 772 | } 773 | if (clipProto.clipEndTick !== clip.getClipEndTick()) { 774 | clipProto.clipEndTick = clip.getClipEndTick(); 775 | } 776 | if (clipProto.type !== clip.getType()) { 777 | clipProto.type = clip.getType(); 778 | } 779 | 780 | // Sync notes. 781 | if (clip.getType() === ClipType.MIDI_CLIP) { 782 | const clipProtoNoteMap = new Map(); 783 | const clipNoteMap = new Map(); 784 | for (const noteProto of clipProto.notes) { 785 | clipProtoNoteMap.set(noteProto.id as number, noteProto as songProtoModule.Note); 786 | } 787 | for (const note of clip.getRawNotes()) { 788 | clipNoteMap.set(note.getId(), note); 789 | } 790 | // Remove notes that are not in the clip. 791 | for (let i = clipProto.notes.length - 1; i >= 0; i -= 1) { 792 | const noteProto = clipProto.notes[i]; 793 | const noteId = noteProto.id as number; 794 | if (!clipNoteMap.has(noteId)) { 795 | clipProto.notes.splice(i, 1); 796 | } 797 | } 798 | // Sync notes in the clip. 799 | for (const note of clip.getRawNotes()) { 800 | let noteProto; 801 | const noteId = note.getId(); 802 | if (clipProtoNoteMap.has(noteId)) { 803 | noteProto = clipProtoNoteMap.get(noteId) as songProtoModule.Note; 804 | } else { 805 | noteProto = songProtoModule.Note.create(); 806 | noteProto.id = note.getId(); 807 | clipProto.notes.push(noteProto); 808 | } 809 | if (noteProto.pitch !== note.getPitch()) { 810 | noteProto.pitch = note.getPitch(); 811 | } 812 | if (noteProto.velocity !== note.getVelocity()) { 813 | noteProto.velocity = note.getVelocity(); 814 | } 815 | if (noteProto.startTick !== note.getStartTick()) { 816 | noteProto.startTick = note.getStartTick(); 817 | } 818 | noteProto.startTime = tickToSecondStepper.tickToSeconds(note.getStartTick()); 819 | if (noteProto.endTick !== note.getEndTick()) { 820 | noteProto.endTick = note.getEndTick(); 821 | } 822 | noteProto.endTime = tickToSecondStepper.tickToSeconds(note.getEndTick()); 823 | } 824 | // Sort notes. 825 | clipProto.notes.sort((a, b) => (a.startTick as number) - (b.startTick as number)); 826 | } else { 827 | // Non-MIDI clip should not have ntoes. 828 | if (clipProto.notes && clipProto.notes.length > 0) { 829 | clipProto.notes = []; 830 | } 831 | } 832 | 833 | const clipAudioData = clip.getAudioClipData(); 834 | if (clip.getType() === ClipType.AUDIO_CLIP && clipAudioData) { 835 | if (!clipProto.audioClipData) { 836 | clipProto.audioClipData = songProtoModule.AudioClipData.create(); 837 | } 838 | if (clipProto.audioClipData.audioFilePath !== clipAudioData.audioFilePath) { 839 | clipProto.audioClipData.audioFilePath = clipAudioData.audioFilePath; 840 | } 841 | if (clipAudioData.audioData && clipAudioData.audioData.data) { 842 | clipProto.audioClipData.audioData = songProtoModule.AudioData.create({ 843 | data: clipAudioData.audioData.data, 844 | format: clipAudioData.audioData.format, 845 | }); 846 | } 847 | if (clipProto.audioClipData.startTick !== clipAudioData.startTick) { 848 | clipProto.audioClipData.startTick = clipAudioData.startTick; 849 | } 850 | if (clipProto.audioClipData.duration !== clipAudioData.duration) { 851 | clipProto.audioClipData.duration = clipAudioData.duration; 852 | } 853 | if (clipProto.audioClipData.speedRatio !== clipAudioData.speedRatio) { 854 | clipProto.audioClipData.speedRatio = clipAudioData.speedRatio; 855 | } 856 | if (clipProto.audioClipData.pitchOffset !== clipAudioData.pitchOffset) { 857 | clipProto.audioClipData.pitchOffset = clipAudioData.pitchOffset; 858 | } 859 | } else if (clipProto.type !== ClipType.AUDIO_CLIP || !clipAudioData) { 860 | // New clip doesn't have audio clip data, clear it in the proto. 861 | if (clipProto.audioClipData) { 862 | delete clipProto.audioClipData; 863 | } 864 | } 865 | } 866 | -------------------------------------------------------------------------------- /src/plugin/export.ts: -------------------------------------------------------------------------------- 1 | // TODO: Replace `PluginClass` and `bundle` with your plugin class and the bundle file. 2 | import { HelloWorld } from './tuneflow-helloworld-plugin'; 3 | import bundle from './tuneflow-helloworld-plugin/bundle.json'; 4 | 5 | export default { 6 | PluginClass: HelloWorld, 7 | bundle, 8 | }; 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | // this enables stricter inference for data properties on `this` 6 | "strict": true, 7 | "jsx": "preserve", 8 | "moduleResolution": "node", 9 | "useDefineForClassFields": true, 10 | "sourceMap": true, 11 | "resolveJsonModule": true, 12 | "noImplicitAny": true, 13 | "noImplicitThis": true, 14 | "noImplicitReturns": true, 15 | "esModuleInterop": true, 16 | "skipLibCheck": true, 17 | "lib": ["esnext", "dom"], 18 | "allowJs": true, 19 | "baseUrl": "", 20 | }, 21 | "include": ["src/**/*.ts", "src/**/*.d.ts","test/**/*.test.ts","vite.*.config.ts","scripts/**/*.ts","src/typings/**/*.d.ts"] 22 | } 23 | -------------------------------------------------------------------------------- /vite.dev.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import vue from '@vitejs/plugin-vue'; 3 | import EnvironmentPlugin from 'vite-plugin-environment'; 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | server: { 8 | host: true, 9 | port: 8899, 10 | }, 11 | plugins: [ 12 | vue(), 13 | EnvironmentPlugin({ 14 | NODE_ENV: 'development', 15 | }), 16 | ], 17 | }); 18 | --------------------------------------------------------------------------------