From 94dd547a74d7ce9dc5c353adb951f6e2507b50fb Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Thu, 29 Feb 2024 21:56:31 +0100 Subject: [PATCH 1/7] canvas package boilerplate --- packages/canvas/README.md | 9 +++ packages/canvas/index.mjs | 0 packages/canvas/package.json | 37 ++++++++++++ packages/canvas/vite.config.js | 19 +++++++ pnpm-lock.yaml | 101 ++++++++++++++++++++++++--------- 5 files changed, 138 insertions(+), 28 deletions(-) create mode 100644 packages/canvas/README.md create mode 100644 packages/canvas/index.mjs create mode 100644 packages/canvas/package.json create mode 100644 packages/canvas/vite.config.js diff --git a/packages/canvas/README.md b/packages/canvas/README.md new file mode 100644 index 00000000..e144d85b --- /dev/null +++ b/packages/canvas/README.md @@ -0,0 +1,9 @@ +# @strudel/canvas + +Helpers for drawing with the Canvas API and Strudel + +## Install + +```sh +npm i @strudel/canvas --save +``` diff --git a/packages/canvas/index.mjs b/packages/canvas/index.mjs new file mode 100644 index 00000000..e69de29b diff --git a/packages/canvas/package.json b/packages/canvas/package.json new file mode 100644 index 00000000..f87a7e19 --- /dev/null +++ b/packages/canvas/package.json @@ -0,0 +1,37 @@ +{ + "name": "@strudel/canvas", + "version": "1.0.1", + "description": "Helpers for drawing with the Canvas API and Strudel", + "main": "index.mjs", + "type": "module", + "publishConfig": { + "main": "dist/index.mjs" + }, + "scripts": { + "build": "vite build", + "prepublishOnly": "npm run build" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/tidalcycles/strudel.git" + }, + "keywords": [ + "titdalcycles", + "strudel", + "pattern", + "livecoding", + "algorave" + ], + "author": "Felix Roos ", + "license": "AGPL-3.0-or-later", + "bugs": { + "url": "https://github.com/tidalcycles/strudel/issues" + }, + "homepage": "https://github.com/tidalcycles/strudel#readme", + "dependencies": { + "@strudel/core": "workspace:*" + }, + "devDependencies": { + "vite": "^5.0.10" + } +} diff --git a/packages/canvas/vite.config.js b/packages/canvas/vite.config.js new file mode 100644 index 00000000..5df3edc1 --- /dev/null +++ b/packages/canvas/vite.config.js @@ -0,0 +1,19 @@ +import { defineConfig } from 'vite'; +import { dependencies } from './package.json'; +import { resolve } from 'path'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [], + build: { + lib: { + entry: resolve(__dirname, 'index.mjs'), + formats: ['es'], + fileName: (ext) => ({ es: 'index.mjs' })[ext], + }, + rollupOptions: { + external: [...Object.keys(dependencies)], + }, + target: 'esnext', + }, +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4b31cc8b..9f6da70d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -96,7 +96,7 @@ importers: devDependencies: vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 examples/headless-repl: dependencies: @@ -106,7 +106,7 @@ importers: devDependencies: vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 examples/minimal-repl: dependencies: @@ -128,7 +128,7 @@ importers: devDependencies: vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 examples/superdough: dependencies: @@ -138,7 +138,17 @@ importers: devDependencies: vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 + + packages/canvas: + dependencies: + '@strudel/core': + specifier: workspace:* + version: link:../core + devDependencies: + vite: + specifier: ^5.0.10 + version: 5.0.11 packages/codemirror: dependencies: @@ -193,7 +203,7 @@ importers: devDependencies: vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 packages/core: dependencies: @@ -203,7 +213,7 @@ importers: devDependencies: vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 vitest: specifier: ^1.1.0 version: 1.1.0(@vitest/ui@1.1.0) @@ -222,7 +232,7 @@ importers: devDependencies: vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 packages/desktopbridge: dependencies: @@ -249,7 +259,7 @@ importers: version: 5.8.1 vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 packages/midi: dependencies: @@ -265,7 +275,7 @@ importers: devDependencies: vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 packages/mini: dependencies: @@ -278,7 +288,7 @@ importers: version: 3.0.2 vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 vitest: specifier: ^1.1.0 version: 1.1.0(@vitest/ui@1.1.0) @@ -297,7 +307,7 @@ importers: version: 5.8.1 vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 packages/repl: dependencies: @@ -337,7 +347,7 @@ importers: version: 5.12.0 vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 packages/serial: dependencies: @@ -347,7 +357,7 @@ importers: devDependencies: vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 packages/soundfonts: dependencies: @@ -369,7 +379,7 @@ importers: version: 3.3.2 vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 packages/superdough: dependencies: @@ -379,7 +389,7 @@ importers: devDependencies: vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 packages/tonal: dependencies: @@ -398,7 +408,7 @@ importers: devDependencies: vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 vitest: specifier: ^1.1.0 version: 1.1.0(@vitest/ui@1.1.0) @@ -423,7 +433,7 @@ importers: devDependencies: vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 vitest: specifier: ^1.1.0 version: 1.1.0(@vitest/ui@1.1.0) @@ -451,7 +461,7 @@ importers: devDependencies: vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 packages/webaudio: dependencies: @@ -464,7 +474,7 @@ importers: devDependencies: vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 packages/xen: dependencies: @@ -474,7 +484,7 @@ importers: devDependencies: vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@20.10.6) + version: 5.0.10 vitest: specifier: ^1.1.0 version: 1.1.0(@vitest/ui@1.1.0) @@ -5346,8 +5356,8 @@ packages: tsconfck: 3.0.0(typescript@5.3.3) unist-util-visit: 5.0.0 vfile: 6.0.1 - vite: 5.0.10(@types/node@20.10.6) - vitefu: 0.2.5(vite@5.0.10) + vite: 5.0.11(@types/node@20.10.6) + vitefu: 0.2.5(vite@5.0.11) which-pm: 2.1.1 yargs-parser: 21.1.1 zod: 3.22.4 @@ -13535,7 +13545,7 @@ packages: debug: 4.3.4 pathe: 1.1.1 picocolors: 1.0.0 - vite: 5.0.11(@types/node@20.10.6) + vite: 5.0.11 transitivePeerDependencies: - '@types/node' - less @@ -13565,7 +13575,7 @@ packages: - supports-color dev: true - /vite@5.0.10(@types/node@20.10.6): + /vite@5.0.10: resolution: {integrity: sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true @@ -13593,12 +13603,47 @@ packages: terser: optional: true dependencies: - '@types/node': 20.10.6 esbuild: 0.19.5 postcss: 8.4.32 rollup: 4.9.2 optionalDependencies: fsevents: 2.3.3 + dev: true + + /vite@5.0.11: + resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + peerDependencies: + '@types/node': ^18.0.0 || >=20.0.0 + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + esbuild: 0.19.11 + postcss: 8.4.32 + rollup: 4.9.2 + optionalDependencies: + fsevents: 2.3.3 + dev: true /vite@5.0.11(@types/node@20.10.6): resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==} @@ -13635,7 +13680,7 @@ packages: optionalDependencies: fsevents: 2.3.3 - /vitefu@0.2.5(vite@5.0.10): + /vitefu@0.2.5(vite@5.0.11): resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==} peerDependencies: vite: ^3.0.0 || ^4.0.0 || ^5.0.0 @@ -13643,7 +13688,7 @@ packages: vite: optional: true dependencies: - vite: 5.0.10(@types/node@20.10.6) + vite: 5.0.11(@types/node@20.10.6) /vitest@1.1.0(@vitest/ui@1.1.0): resolution: {integrity: sha512-oDFiCrw7dd3Jf06HoMtSRARivvyjHJaTxikFxuqJjO76U436PqlVw1uLn7a8OSPrhSfMGVaRakKpA2lePdw79A==} @@ -13689,7 +13734,7 @@ packages: strip-literal: 1.3.0 tinybench: 2.5.1 tinypool: 0.8.1 - vite: 5.0.11(@types/node@20.10.6) + vite: 5.0.11 vite-node: 1.1.0 why-is-node-running: 2.2.2 transitivePeerDependencies: From 6ce8a3febadbe9426f621ffb96ded8645ed4792d Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Thu, 29 Feb 2024 22:14:53 +0100 Subject: [PATCH 2/7] move draw logic to separate package --- packages/{core => canvas}/animate.mjs | 7 ++- packages/{core => canvas}/color.mjs | 0 packages/{core => canvas}/draw.mjs | 6 +- packages/canvas/index.mjs | 5 ++ packages/{core => canvas}/pianoroll.mjs | 4 +- packages/{core => canvas}/spiral.mjs | 2 +- packages/codemirror/codemirror.mjs | 3 +- packages/codemirror/package.json | 1 + packages/core/index.mjs | 4 -- packages/hydra/hydra.mjs | 2 +- packages/hydra/package.json | 1 + packages/repl/package.json | 1 + packages/repl/prebake.mjs | 1 + packages/repl/repl-component.mjs | 3 +- packages/webaudio/package.json | 1 + packages/webaudio/scope.mjs | 3 +- pnpm-lock.yaml | 81 +++++++++++++------------ website/package.json | 1 + website/src/docs/Colors.jsx | 3 +- website/src/repl/Repl.jsx | 3 +- website/src/repl/drawings.mjs | 4 +- website/src/repl/util.mjs | 1 + 22 files changed, 78 insertions(+), 59 deletions(-) rename packages/{core => canvas}/animate.mjs (89%) rename packages/{core => canvas}/color.mjs (100%) rename packages/{core => canvas}/draw.mjs (97%) rename packages/{core => canvas}/pianoroll.mjs (98%) rename packages/{core => canvas}/spiral.mjs (98%) diff --git a/packages/core/animate.mjs b/packages/canvas/animate.mjs similarity index 89% rename from packages/core/animate.mjs rename to packages/canvas/animate.mjs index cc7e59b2..d8508151 100644 --- a/packages/core/animate.mjs +++ b/packages/canvas/animate.mjs @@ -1,11 +1,14 @@ -import { Pattern, getDrawContext, silence, register, pure, createParams } from './index.mjs'; +import { Pattern, silence, register, pure, createParams } from '@strudel/core'; +import { getDrawContext } from './draw.mjs'; let clearColor = '#22222210'; Pattern.prototype.animate = function ({ callback, sync = false, smear = 0.5 } = {}) { window.frame && cancelAnimationFrame(window.frame); const ctx = getDrawContext(); - const { clientWidth: ww, clientHeight: wh } = ctx.canvas; + let { clientWidth: ww, clientHeight: wh } = ctx.canvas; + ww *= window.devicePixelRatio; + wh *= window.devicePixelRatio; let smearPart = smear === 0 ? '99' : Number((1 - smear) * 100).toFixed(0); smearPart = smearPart.length === 1 ? `0${smearPart}` : smearPart; clearColor = `#200010${smearPart}`; diff --git a/packages/core/color.mjs b/packages/canvas/color.mjs similarity index 100% rename from packages/core/color.mjs rename to packages/canvas/color.mjs diff --git a/packages/core/draw.mjs b/packages/canvas/draw.mjs similarity index 97% rename from packages/core/draw.mjs rename to packages/canvas/draw.mjs index 30de7ba8..9d0e0ac8 100644 --- a/packages/core/draw.mjs +++ b/packages/canvas/draw.mjs @@ -1,15 +1,15 @@ /* draw.mjs - -Copyright (C) 2022 Strudel contributors - see +Copyright (C) 2022 Strudel contributors - see This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see . */ -import { Pattern, getTime, State, TimeSpan } from './index.mjs'; +import { Pattern, getTime, State, TimeSpan } from '@strudel/core'; export const getDrawContext = (id = 'test-canvas') => { let canvas = document.querySelector('#' + id); if (!canvas) { - const scale = 2; // 2 = crisp on retina screens + const scale = window.devicePixelRatio || 1; canvas = document.createElement('canvas'); canvas.id = id; canvas.width = window.innerWidth * scale; diff --git a/packages/canvas/index.mjs b/packages/canvas/index.mjs index e69de29b..89cda805 100644 --- a/packages/canvas/index.mjs +++ b/packages/canvas/index.mjs @@ -0,0 +1,5 @@ +export * from './animate.mjs'; +export * from './color.mjs'; +export * from './draw.mjs'; +export * from './pianoroll.mjs'; +export * from './spiral.mjs'; diff --git a/packages/core/pianoroll.mjs b/packages/canvas/pianoroll.mjs similarity index 98% rename from packages/core/pianoroll.mjs rename to packages/canvas/pianoroll.mjs index de6fc72b..d408f44a 100644 --- a/packages/core/pianoroll.mjs +++ b/packages/canvas/pianoroll.mjs @@ -1,10 +1,10 @@ /* pianoroll.mjs - -Copyright (C) 2022 Strudel contributors - see +Copyright (C) 2022 Strudel contributors - see This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see . */ -import { Pattern, noteToMidi, getDrawContext, freqToMidi, isNote } from './index.mjs'; +import { Pattern, noteToMidi, freqToMidi } from '@strudel/core'; const scale = (normalized, min, max) => normalized * (max - min) + min; const getValue = (e) => { diff --git a/packages/core/spiral.mjs b/packages/canvas/spiral.mjs similarity index 98% rename from packages/core/spiral.mjs rename to packages/canvas/spiral.mjs index e0d5cd87..00bd62ec 100644 --- a/packages/core/spiral.mjs +++ b/packages/canvas/spiral.mjs @@ -1,4 +1,4 @@ -import { Pattern } from './index.mjs'; +import { Pattern } from '@strudel/core'; // polar coords -> xy function fromPolar(angle, radius, cx, cy) { diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs index 4470173b..3209ef87 100644 --- a/packages/codemirror/codemirror.mjs +++ b/packages/codemirror/codemirror.mjs @@ -12,7 +12,8 @@ import { lineNumbers, drawSelection, } from '@codemirror/view'; -import { Pattern, Drawer, repl, cleanupDraw } from '@strudel/core'; +import { Pattern, repl } from '@strudel/core'; +import { Drawer, cleanupDraw } from '@strudel/canvas'; import { isAutoCompletionEnabled } from './autocomplete.mjs'; import { isTooltipEnabled } from './tooltip.mjs'; import { flash, isFlashEnabled } from './flash.mjs'; diff --git a/packages/codemirror/package.json b/packages/codemirror/package.json index 22213ac7..79d2e022 100644 --- a/packages/codemirror/package.json +++ b/packages/codemirror/package.json @@ -45,6 +45,7 @@ "@replit/codemirror-vim": "^6.1.0", "@replit/codemirror-vscode-keymap": "^6.0.2", "@strudel/core": "workspace:*", + "@strudel/canvas": "workspace:*", "@uiw/codemirror-themes": "^4.21.21", "@uiw/codemirror-themes-all": "^4.21.21", "nanostores": "^0.9.5" diff --git a/packages/core/index.mjs b/packages/core/index.mjs index 9d998349..a04c85bc 100644 --- a/packages/core/index.mjs +++ b/packages/core/index.mjs @@ -22,10 +22,6 @@ export * from './repl.mjs'; export * from './cyclist.mjs'; export * from './logger.mjs'; export * from './time.mjs'; -export * from './draw.mjs'; -export * from './animate.mjs'; -export * from './pianoroll.mjs'; -export * from './spiral.mjs'; export * from './ui.mjs'; export { default as drawLine } from './drawLine.mjs'; // below won't work with runtime.mjs (json import fails) diff --git a/packages/hydra/hydra.mjs b/packages/hydra/hydra.mjs index dc1ba3f9..b7912446 100644 --- a/packages/hydra/hydra.mjs +++ b/packages/hydra/hydra.mjs @@ -1,4 +1,4 @@ -import { getDrawContext } from '@strudel/core'; +import { getDrawContext } from '@strudel/canvas'; let latestOptions; diff --git a/packages/hydra/package.json b/packages/hydra/package.json index 48189663..c635314c 100644 --- a/packages/hydra/package.json +++ b/packages/hydra/package.json @@ -34,6 +34,7 @@ "homepage": "https://github.com/tidalcycles/strudel#readme", "dependencies": { "@strudel/core": "workspace:*", + "@strudel/canvas": "workspace:*", "hydra-synth": "^1.3.29" }, "devDependencies": { diff --git a/packages/repl/package.json b/packages/repl/package.json index e6bce6d5..742c5bb7 100644 --- a/packages/repl/package.json +++ b/packages/repl/package.json @@ -35,6 +35,7 @@ "dependencies": { "@strudel/codemirror": "workspace:*", "@strudel/core": "workspace:*", + "@strudel/canvas": "workspace:*", "@strudel/hydra": "workspace:*", "@strudel/midi": "workspace:*", "@strudel/mini": "workspace:*", diff --git a/packages/repl/prebake.mjs b/packages/repl/prebake.mjs index 4315b85c..1858580b 100644 --- a/packages/repl/prebake.mjs +++ b/packages/repl/prebake.mjs @@ -6,6 +6,7 @@ export async function prebake() { const modulesLoading = evalScope( // import('@strudel/core'), core, + import('@strudel/canvas'), import('@strudel/mini'), import('@strudel/tonal'), import('@strudel/webaudio'), diff --git a/packages/repl/repl-component.mjs b/packages/repl/repl-component.mjs index 7928ac43..4bdd6fe6 100644 --- a/packages/repl/repl-component.mjs +++ b/packages/repl/repl-component.mjs @@ -1,4 +1,5 @@ -import { getDrawContext, silence } from '@strudel/core'; +import { silence } from '@strudel/core'; +import { getDrawContext } from '@strudel/canvas'; import { transpiler } from '@strudel/transpiler'; import { getAudioContext, webaudioOutput } from '@strudel/webaudio'; import { StrudelMirror, codemirrorSettings } from '@strudel/codemirror'; diff --git a/packages/webaudio/package.json b/packages/webaudio/package.json index dce53961..29348f48 100644 --- a/packages/webaudio/package.json +++ b/packages/webaudio/package.json @@ -34,6 +34,7 @@ "homepage": "https://github.com/tidalcycles/strudel#readme", "dependencies": { "@strudel/core": "workspace:*", + "@strudel/canvas": "workspace:*", "superdough": "workspace:*" }, "devDependencies": { diff --git a/packages/webaudio/scope.mjs b/packages/webaudio/scope.mjs index 115f159a..288880c0 100644 --- a/packages/webaudio/scope.mjs +++ b/packages/webaudio/scope.mjs @@ -1,4 +1,5 @@ -import { Pattern, getDrawContext, clamp } from '@strudel/core'; +import { Pattern, clamp } from '@strudel/core'; +import { getDrawContext } from '@strudel/canvas'; import { analyser, getAnalyzerData } from 'superdough'; export function drawTimeScope( diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9f6da70d..1ef01efc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -148,7 +148,7 @@ importers: devDependencies: vite: specifier: ^5.0.10 - version: 5.0.11 + version: 5.0.11(@types/node@20.10.6) packages/codemirror: dependencies: @@ -188,6 +188,9 @@ importers: '@replit/codemirror-vscode-keymap': specifier: ^6.0.2 version: 6.0.2(@codemirror/autocomplete@6.11.1)(@codemirror/commands@6.3.3)(@codemirror/language@6.10.0)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.5)(@codemirror/state@6.4.0)(@codemirror/view@6.23.0) + '@strudel/canvas': + specifier: workspace:* + version: link:../canvas '@strudel/core': specifier: workspace:* version: link:../core @@ -247,6 +250,9 @@ importers: packages/hydra: dependencies: + '@strudel/canvas': + specifier: workspace:* + version: link:../canvas '@strudel/core': specifier: workspace:* version: link:../core @@ -311,6 +317,9 @@ importers: packages/repl: dependencies: + '@strudel/canvas': + specifier: workspace:* + version: link:../canvas '@strudel/codemirror': specifier: workspace:* version: link:../codemirror @@ -465,6 +474,9 @@ importers: packages/webaudio: dependencies: + '@strudel/canvas': + specifier: workspace:* + version: link:../canvas '@strudel/core': specifier: workspace:* version: link:../core @@ -533,6 +545,9 @@ importers: '@nanostores/react': specifier: ^0.7.1 version: 0.7.1(nanostores@0.9.5)(react@18.2.0) + '@strudel/canvas': + specifier: workspace:* + version: link:../packages/canvas '@strudel/codemirror': specifier: workspace:* version: link:../packages/codemirror @@ -2392,6 +2407,7 @@ packages: cpu: [arm64] os: [android] requiresBuild: true + dev: true optional: true /@esbuild/android-arm@0.19.11: @@ -2408,6 +2424,7 @@ packages: cpu: [arm] os: [android] requiresBuild: true + dev: true optional: true /@esbuild/android-x64@0.19.11: @@ -2424,6 +2441,7 @@ packages: cpu: [x64] os: [android] requiresBuild: true + dev: true optional: true /@esbuild/darwin-arm64@0.19.11: @@ -2440,6 +2458,7 @@ packages: cpu: [arm64] os: [darwin] requiresBuild: true + dev: true optional: true /@esbuild/darwin-x64@0.19.11: @@ -2456,6 +2475,7 @@ packages: cpu: [x64] os: [darwin] requiresBuild: true + dev: true optional: true /@esbuild/freebsd-arm64@0.19.11: @@ -2472,6 +2492,7 @@ packages: cpu: [arm64] os: [freebsd] requiresBuild: true + dev: true optional: true /@esbuild/freebsd-x64@0.19.11: @@ -2488,6 +2509,7 @@ packages: cpu: [x64] os: [freebsd] requiresBuild: true + dev: true optional: true /@esbuild/linux-arm64@0.19.11: @@ -2504,6 +2526,7 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/linux-arm@0.19.11: @@ -2520,6 +2543,7 @@ packages: cpu: [arm] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/linux-ia32@0.19.11: @@ -2536,6 +2560,7 @@ packages: cpu: [ia32] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/linux-loong64@0.19.11: @@ -2552,6 +2577,7 @@ packages: cpu: [loong64] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/linux-mips64el@0.19.11: @@ -2568,6 +2594,7 @@ packages: cpu: [mips64el] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/linux-ppc64@0.19.11: @@ -2584,6 +2611,7 @@ packages: cpu: [ppc64] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/linux-riscv64@0.19.11: @@ -2600,6 +2628,7 @@ packages: cpu: [riscv64] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/linux-s390x@0.19.11: @@ -2616,6 +2645,7 @@ packages: cpu: [s390x] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/linux-x64@0.19.11: @@ -2632,6 +2662,7 @@ packages: cpu: [x64] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/netbsd-x64@0.19.11: @@ -2648,6 +2679,7 @@ packages: cpu: [x64] os: [netbsd] requiresBuild: true + dev: true optional: true /@esbuild/openbsd-x64@0.19.11: @@ -2664,6 +2696,7 @@ packages: cpu: [x64] os: [openbsd] requiresBuild: true + dev: true optional: true /@esbuild/sunos-x64@0.19.11: @@ -2680,6 +2713,7 @@ packages: cpu: [x64] os: [sunos] requiresBuild: true + dev: true optional: true /@esbuild/win32-arm64@0.19.11: @@ -2696,6 +2730,7 @@ packages: cpu: [arm64] os: [win32] requiresBuild: true + dev: true optional: true /@esbuild/win32-ia32@0.19.11: @@ -2712,6 +2747,7 @@ packages: cpu: [ia32] os: [win32] requiresBuild: true + dev: true optional: true /@esbuild/win32-x64@0.19.11: @@ -2728,6 +2764,7 @@ packages: cpu: [x64] os: [win32] requiresBuild: true + dev: true optional: true /@eslint-community/eslint-utils@4.4.0(eslint@8.56.0): @@ -6838,6 +6875,7 @@ packages: '@esbuild/win32-arm64': 0.19.5 '@esbuild/win32-ia32': 0.19.5 '@esbuild/win32-x64': 0.19.5 + dev: true /escalade@3.1.1: resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} @@ -13545,7 +13583,7 @@ packages: debug: 4.3.4 pathe: 1.1.1 picocolors: 1.0.0 - vite: 5.0.11 + vite: 5.0.11(@types/node@20.10.6) transitivePeerDependencies: - '@types/node' - less @@ -13610,41 +13648,6 @@ packages: fsevents: 2.3.3 dev: true - /vite@5.0.11: - resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==} - engines: {node: ^18.0.0 || >=20.0.0} - hasBin: true - peerDependencies: - '@types/node': ^18.0.0 || >=20.0.0 - less: '*' - lightningcss: ^1.21.0 - sass: '*' - stylus: '*' - sugarss: '*' - terser: ^5.4.0 - peerDependenciesMeta: - '@types/node': - optional: true - less: - optional: true - lightningcss: - optional: true - sass: - optional: true - stylus: - optional: true - sugarss: - optional: true - terser: - optional: true - dependencies: - esbuild: 0.19.11 - postcss: 8.4.32 - rollup: 4.9.2 - optionalDependencies: - fsevents: 2.3.3 - dev: true - /vite@5.0.11(@types/node@20.10.6): resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==} engines: {node: ^18.0.0 || >=20.0.0} @@ -13674,7 +13677,7 @@ packages: optional: true dependencies: '@types/node': 20.10.6 - esbuild: 0.19.5 + esbuild: 0.19.11 postcss: 8.4.32 rollup: 4.9.2 optionalDependencies: @@ -13734,7 +13737,7 @@ packages: strip-literal: 1.3.0 tinybench: 2.5.1 tinypool: 0.8.1 - vite: 5.0.11 + vite: 5.0.11(@types/node@20.10.6) vite-node: 1.1.0 why-is-node-running: 2.2.2 transitivePeerDependencies: diff --git a/website/package.json b/website/package.json index af100889..ed40b005 100644 --- a/website/package.json +++ b/website/package.json @@ -26,6 +26,7 @@ "@nanostores/react": "^0.7.1", "@strudel/codemirror": "workspace:*", "@strudel/core": "workspace:*", + "@strudel/canvas": "workspace:*", "@strudel/csound": "workspace:*", "@strudel/desktopbridge": "workspace:*", "@strudel/hydra": "workspace:*", diff --git a/website/src/docs/Colors.jsx b/website/src/docs/Colors.jsx index 7cc7eab6..f11a7440 100644 --- a/website/src/docs/Colors.jsx +++ b/website/src/docs/Colors.jsx @@ -1,5 +1,4 @@ -import { colorMap } from '@strudel/core/color.mjs'; -import React from 'react'; +import { colorMap } from '@strudel/canvas'; const Colors = () => { return ( diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx index c5a8fa09..fd5892bd 100644 --- a/website/src/repl/Repl.jsx +++ b/website/src/repl/Repl.jsx @@ -4,7 +4,8 @@ Copyright (C) 2022 Strudel contributors - see . */ -import { code2hash, getDrawContext, logger, silence } from '@strudel/core'; +import { code2hash, logger, silence } from '@strudel/core'; +import { getDrawContext } from '@strudel/canvas'; import cx from '@src/cx.mjs'; import { transpiler } from '@strudel/transpiler'; import { diff --git a/website/src/repl/drawings.mjs b/website/src/repl/drawings.mjs index 30fef649..5508ebe8 100644 --- a/website/src/repl/drawings.mjs +++ b/website/src/repl/drawings.mjs @@ -24,7 +24,9 @@ angle(saw) `; // https://strudel.cc/?C31_NrcMfZEO -export const spiralflower = `const {innerWidth:ww,innerHeight:wh} = window; +export const spiralflower = `let {innerWidth:ww,innerHeight:wh} = window; +ww*=window.devicePixelRatio; +wh*=window.devicePixelRatio; const ctx = getDrawContext() const piDiv180 = Math.PI / 180; function fromPolar(angle, radius, cx, cy) { diff --git a/website/src/repl/util.mjs b/website/src/repl/util.mjs index 397e2801..d9c80ca9 100644 --- a/website/src/repl/util.mjs +++ b/website/src/repl/util.mjs @@ -72,6 +72,7 @@ export async function getRandomTune() { export function loadModules() { let modules = [ import('@strudel/core'), + import('@strudel/canvas'), import('@strudel/tonal'), import('@strudel/mini'), import('@strudel/xen'), From 4f94de86db5e15b4e9b6cfd963def175df847512 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Fri, 1 Mar 2024 13:09:14 +0100 Subject: [PATCH 3/7] fix: migrate more imports --- website/src/docs/MiniRepl.jsx | 3 ++- website/src/pages/img/example-[name].png.js | 2 +- website/src/pages/swatch/[name].png.js | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/website/src/docs/MiniRepl.jsx b/website/src/docs/MiniRepl.jsx index 3afb609e..9a886109 100644 --- a/website/src/docs/MiniRepl.jsx +++ b/website/src/docs/MiniRepl.jsx @@ -1,6 +1,7 @@ import { useState, useRef, useCallback, useMemo, useEffect } from 'react'; import { Icon } from './Icon'; -import { silence, getPunchcardPainter, noteToMidi, _mod } from '@strudel/core'; +import { silence, noteToMidi, _mod } from '@strudel/core'; +import { getPunchcardPainter } from '@strudel/canvas'; import { transpiler } from '@strudel/transpiler'; import { getAudioContext, webaudioOutput, initAudioOnFirstClick } from '@strudel/webaudio'; import { StrudelMirror } from '@strudel/codemirror'; diff --git a/website/src/pages/img/example-[name].png.js b/website/src/pages/img/example-[name].png.js index 86d8a552..1361df79 100644 --- a/website/src/pages/img/example-[name].png.js +++ b/website/src/pages/img/example-[name].png.js @@ -1,5 +1,5 @@ import { createCanvas } from 'canvas'; -import { pianoroll } from '@strudel/core'; +import { pianoroll } from '@strudel/canvas'; import { evaluate } from '@strudel/transpiler'; import '../../../../test/runtime.mjs'; import * as tunes from '../../repl/tunes.mjs'; diff --git a/website/src/pages/swatch/[name].png.js b/website/src/pages/swatch/[name].png.js index c0a52a6b..809a64ec 100644 --- a/website/src/pages/swatch/[name].png.js +++ b/website/src/pages/swatch/[name].png.js @@ -1,5 +1,5 @@ import { createCanvas } from 'canvas'; -import { pianoroll } from '@strudel/core'; +import { pianoroll } from '@strudel/canvas'; import { evaluate } from '@strudel/transpiler'; import '../../../../test/runtime.mjs'; import { getMyPatterns } from '../../my_patterns'; From 62d8955da985f36b3aef493a0a45c098590b80b2 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Fri, 1 Mar 2024 16:46:34 +0100 Subject: [PATCH 4/7] onFrame function --- packages/canvas/draw.mjs | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/canvas/draw.mjs b/packages/canvas/draw.mjs index 9d0e0ac8..b03634c5 100644 --- a/packages/canvas/draw.mjs +++ b/packages/canvas/draw.mjs @@ -61,6 +61,25 @@ Pattern.prototype.draw = function (callback, { from, to, onQuery } = {}) { return this; }; +// this is a more generic helper to get a rendering callback for the currently active haps +// TODO: this misses events that are prolonged with clip or duration (would need state) +Pattern.prototype.onFrame = function (fn) { + if (typeof window === 'undefined') { + return this; + } + if (window.strudelAnimation) { + cancelAnimationFrame(window.strudelAnimation); + } + const animate = () => { + const t = getTime(); + const haps = this.queryArc(t, t); + fn(haps, t, this); + window.strudelAnimation = requestAnimationFrame(animate); + }; + requestAnimationFrame(animate); + return this; +}; + export const cleanupDraw = (clearScreen = true) => { const ctx = getDrawContext(); clearScreen && ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.width); From d5ed0650111dd8d6bc6c1d3cf0e44f0d248def6e Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Sun, 3 Mar 2024 22:50:51 +0100 Subject: [PATCH 5/7] fix: hydra canvas adjust to screen size + simplify hydra init (use getDrawContext) + make getDrawContext more versatile --- packages/canvas/draw.mjs | 15 ++++++++------- packages/hydra/hydra.mjs | 21 +++++++++------------ 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/packages/canvas/draw.mjs b/packages/canvas/draw.mjs index b03634c5..20bf7fd6 100644 --- a/packages/canvas/draw.mjs +++ b/packages/canvas/draw.mjs @@ -6,26 +6,27 @@ This program is free software: you can redistribute it and/or modify it under th import { Pattern, getTime, State, TimeSpan } from '@strudel/core'; -export const getDrawContext = (id = 'test-canvas') => { +export const getDrawContext = (id = 'test-canvas', options) => { + let { contextType = '2d', pixelated = false, pixelRatio = window.devicePixelRatio } = options || {}; let canvas = document.querySelector('#' + id); if (!canvas) { - const scale = window.devicePixelRatio || 1; canvas = document.createElement('canvas'); canvas.id = id; - canvas.width = window.innerWidth * scale; - canvas.height = window.innerHeight * scale; + canvas.width = window.innerWidth * pixelRatio; + canvas.height = window.innerHeight * pixelRatio; canvas.style = 'pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0'; + pixelated && (canvas.style.imageRendering = 'pixelated'); document.body.prepend(canvas); let timeout; window.addEventListener('resize', () => { timeout && clearTimeout(timeout); timeout = setTimeout(() => { - canvas.width = window.innerWidth * scale; - canvas.height = window.innerHeight * scale; + canvas.width = window.innerWidth * pixelRatio; + canvas.height = window.innerHeight * pixelRatio; }, 200); }); } - return canvas.getContext('2d'); + return canvas.getContext(contextType); }; Pattern.prototype.draw = function (callback, { from, to, onQuery } = {}) { diff --git a/packages/hydra/hydra.mjs b/packages/hydra/hydra.mjs index b7912446..17830d81 100644 --- a/packages/hydra/hydra.mjs +++ b/packages/hydra/hydra.mjs @@ -2,15 +2,6 @@ import { getDrawContext } from '@strudel/canvas'; let latestOptions; -function appendCanvas(c) { - const { canvas: testCanvas } = getDrawContext(); - c.canvas.id = 'hydra-canvas'; - c.canvas.style.position = 'fixed'; - c.canvas.style.top = '0px'; - testCanvas.after(c.canvas); - return testCanvas; -} - export async function initHydra(options = {}) { // reset if options have changed since last init if (latestOptions && JSON.stringify(latestOptions) !== JSON.stringify(options)) { @@ -19,12 +10,19 @@ export async function initHydra(options = {}) { latestOptions = options; //load and init hydra if (!document.getElementById('hydra-canvas')) { - console.log('reinit..'); const { src = 'https://unpkg.com/hydra-synth', feedStrudel = false, + contextType = 'webgl', + pixelRatio = 1, + pixelated = true, ...hydraConfig - } = { detectAudio: false, ...options }; + } = { + detectAudio: false, + ...options, + }; + const { canvas } = getDrawContext('hydra-canvas', { contextType, pixelRatio, pixelated }); + hydraConfig.canvas = canvas; await import(/* @vite-ignore */ src); const hydra = new Hydra(hydraConfig); @@ -33,7 +31,6 @@ export async function initHydra(options = {}) { canvas.style.display = 'none'; hydra.synth.s0.init({ src: canvas }); } - appendCanvas(hydra); } } From 75098adbdbe1a83b077f52967bc4168de1becfc7 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Thu, 7 Mar 2024 13:17:40 +0100 Subject: [PATCH 6/7] allow offsetting onFrame --- packages/canvas/draw.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/canvas/draw.mjs b/packages/canvas/draw.mjs index 20bf7fd6..2ea531cf 100644 --- a/packages/canvas/draw.mjs +++ b/packages/canvas/draw.mjs @@ -64,7 +64,7 @@ Pattern.prototype.draw = function (callback, { from, to, onQuery } = {}) { // this is a more generic helper to get a rendering callback for the currently active haps // TODO: this misses events that are prolonged with clip or duration (would need state) -Pattern.prototype.onFrame = function (fn) { +Pattern.prototype.onFrame = function (fn, offset = 0) { if (typeof window === 'undefined') { return this; } @@ -72,7 +72,7 @@ Pattern.prototype.onFrame = function (fn) { cancelAnimationFrame(window.strudelAnimation); } const animate = () => { - const t = getTime(); + const t = getTime() + offset; const haps = this.queryArc(t, t); fn(haps, t, this); window.strudelAnimation = requestAnimationFrame(animate); From 0f07bfc9d758ba6c2083d7d7ea75882935fc98a1 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Thu, 7 Mar 2024 13:24:52 +0100 Subject: [PATCH 7/7] rename: canvas -> draw --- packages/codemirror/codemirror.mjs | 2 +- packages/codemirror/package.json | 2 +- packages/{canvas => draw}/README.md | 0 packages/{canvas => draw}/animate.mjs | 0 packages/{canvas => draw}/color.mjs | 0 packages/{canvas => draw}/draw.mjs | 0 packages/{canvas => draw}/index.mjs | 0 packages/{canvas => draw}/package.json | 4 +- packages/{canvas => draw}/pianoroll.mjs | 0 packages/{canvas => draw}/spiral.mjs | 0 packages/{canvas => draw}/vite.config.js | 0 packages/hydra/hydra.mjs | 2 +- packages/hydra/package.json | 2 +- packages/repl/package.json | 2 +- packages/repl/prebake.mjs | 2 +- packages/repl/repl-component.mjs | 2 +- packages/webaudio/package.json | 2 +- packages/webaudio/scope.mjs | 2 +- pnpm-lock.yaml | 50 ++++++++++----------- website/package.json | 2 +- website/src/docs/Colors.jsx | 2 +- website/src/docs/MiniRepl.jsx | 2 +- website/src/pages/img/example-[name].png.js | 2 +- website/src/pages/swatch/[name].png.js | 2 +- website/src/repl/Repl.jsx | 2 +- website/src/repl/util.mjs | 2 +- 26 files changed, 43 insertions(+), 43 deletions(-) rename packages/{canvas => draw}/README.md (100%) rename packages/{canvas => draw}/animate.mjs (100%) rename packages/{canvas => draw}/color.mjs (100%) rename packages/{canvas => draw}/draw.mjs (100%) rename packages/{canvas => draw}/index.mjs (100%) rename packages/{canvas => draw}/package.json (88%) rename packages/{canvas => draw}/pianoroll.mjs (100%) rename packages/{canvas => draw}/spiral.mjs (100%) rename packages/{canvas => draw}/vite.config.js (100%) diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs index 3209ef87..512c873a 100644 --- a/packages/codemirror/codemirror.mjs +++ b/packages/codemirror/codemirror.mjs @@ -13,7 +13,7 @@ import { drawSelection, } from '@codemirror/view'; import { Pattern, repl } from '@strudel/core'; -import { Drawer, cleanupDraw } from '@strudel/canvas'; +import { Drawer, cleanupDraw } from '@strudel/draw'; import { isAutoCompletionEnabled } from './autocomplete.mjs'; import { isTooltipEnabled } from './tooltip.mjs'; import { flash, isFlashEnabled } from './flash.mjs'; diff --git a/packages/codemirror/package.json b/packages/codemirror/package.json index 79d2e022..0b39ebdd 100644 --- a/packages/codemirror/package.json +++ b/packages/codemirror/package.json @@ -45,7 +45,7 @@ "@replit/codemirror-vim": "^6.1.0", "@replit/codemirror-vscode-keymap": "^6.0.2", "@strudel/core": "workspace:*", - "@strudel/canvas": "workspace:*", + "@strudel/draw": "workspace:*", "@uiw/codemirror-themes": "^4.21.21", "@uiw/codemirror-themes-all": "^4.21.21", "nanostores": "^0.9.5" diff --git a/packages/canvas/README.md b/packages/draw/README.md similarity index 100% rename from packages/canvas/README.md rename to packages/draw/README.md diff --git a/packages/canvas/animate.mjs b/packages/draw/animate.mjs similarity index 100% rename from packages/canvas/animate.mjs rename to packages/draw/animate.mjs diff --git a/packages/canvas/color.mjs b/packages/draw/color.mjs similarity index 100% rename from packages/canvas/color.mjs rename to packages/draw/color.mjs diff --git a/packages/canvas/draw.mjs b/packages/draw/draw.mjs similarity index 100% rename from packages/canvas/draw.mjs rename to packages/draw/draw.mjs diff --git a/packages/canvas/index.mjs b/packages/draw/index.mjs similarity index 100% rename from packages/canvas/index.mjs rename to packages/draw/index.mjs diff --git a/packages/canvas/package.json b/packages/draw/package.json similarity index 88% rename from packages/canvas/package.json rename to packages/draw/package.json index f87a7e19..346a4723 100644 --- a/packages/canvas/package.json +++ b/packages/draw/package.json @@ -1,7 +1,7 @@ { - "name": "@strudel/canvas", + "name": "@strudel/draw", "version": "1.0.1", - "description": "Helpers for drawing with the Canvas API and Strudel", + "description": "Helpers for drawing with Strudel", "main": "index.mjs", "type": "module", "publishConfig": { diff --git a/packages/canvas/pianoroll.mjs b/packages/draw/pianoroll.mjs similarity index 100% rename from packages/canvas/pianoroll.mjs rename to packages/draw/pianoroll.mjs diff --git a/packages/canvas/spiral.mjs b/packages/draw/spiral.mjs similarity index 100% rename from packages/canvas/spiral.mjs rename to packages/draw/spiral.mjs diff --git a/packages/canvas/vite.config.js b/packages/draw/vite.config.js similarity index 100% rename from packages/canvas/vite.config.js rename to packages/draw/vite.config.js diff --git a/packages/hydra/hydra.mjs b/packages/hydra/hydra.mjs index 17830d81..e784228d 100644 --- a/packages/hydra/hydra.mjs +++ b/packages/hydra/hydra.mjs @@ -1,4 +1,4 @@ -import { getDrawContext } from '@strudel/canvas'; +import { getDrawContext } from '@strudel/draw'; let latestOptions; diff --git a/packages/hydra/package.json b/packages/hydra/package.json index c635314c..77fab126 100644 --- a/packages/hydra/package.json +++ b/packages/hydra/package.json @@ -34,7 +34,7 @@ "homepage": "https://github.com/tidalcycles/strudel#readme", "dependencies": { "@strudel/core": "workspace:*", - "@strudel/canvas": "workspace:*", + "@strudel/draw": "workspace:*", "hydra-synth": "^1.3.29" }, "devDependencies": { diff --git a/packages/repl/package.json b/packages/repl/package.json index 742c5bb7..70687d1c 100644 --- a/packages/repl/package.json +++ b/packages/repl/package.json @@ -35,7 +35,7 @@ "dependencies": { "@strudel/codemirror": "workspace:*", "@strudel/core": "workspace:*", - "@strudel/canvas": "workspace:*", + "@strudel/draw": "workspace:*", "@strudel/hydra": "workspace:*", "@strudel/midi": "workspace:*", "@strudel/mini": "workspace:*", diff --git a/packages/repl/prebake.mjs b/packages/repl/prebake.mjs index 1858580b..9fc1c881 100644 --- a/packages/repl/prebake.mjs +++ b/packages/repl/prebake.mjs @@ -6,7 +6,7 @@ export async function prebake() { const modulesLoading = evalScope( // import('@strudel/core'), core, - import('@strudel/canvas'), + import('@strudel/draw'), import('@strudel/mini'), import('@strudel/tonal'), import('@strudel/webaudio'), diff --git a/packages/repl/repl-component.mjs b/packages/repl/repl-component.mjs index 4bdd6fe6..4fa8d6d2 100644 --- a/packages/repl/repl-component.mjs +++ b/packages/repl/repl-component.mjs @@ -1,5 +1,5 @@ import { silence } from '@strudel/core'; -import { getDrawContext } from '@strudel/canvas'; +import { getDrawContext } from '@strudel/draw'; import { transpiler } from '@strudel/transpiler'; import { getAudioContext, webaudioOutput } from '@strudel/webaudio'; import { StrudelMirror, codemirrorSettings } from '@strudel/codemirror'; diff --git a/packages/webaudio/package.json b/packages/webaudio/package.json index 29348f48..f9cd7cc7 100644 --- a/packages/webaudio/package.json +++ b/packages/webaudio/package.json @@ -34,7 +34,7 @@ "homepage": "https://github.com/tidalcycles/strudel#readme", "dependencies": { "@strudel/core": "workspace:*", - "@strudel/canvas": "workspace:*", + "@strudel/draw": "workspace:*", "superdough": "workspace:*" }, "devDependencies": { diff --git a/packages/webaudio/scope.mjs b/packages/webaudio/scope.mjs index 288880c0..0371366c 100644 --- a/packages/webaudio/scope.mjs +++ b/packages/webaudio/scope.mjs @@ -1,5 +1,5 @@ import { Pattern, clamp } from '@strudel/core'; -import { getDrawContext } from '@strudel/canvas'; +import { getDrawContext } from '../draw/index.mjs'; import { analyser, getAnalyzerData } from 'superdough'; export function drawTimeScope( diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1ef01efc..b123e2b7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -140,16 +140,6 @@ importers: specifier: ^5.0.10 version: 5.0.10 - packages/canvas: - dependencies: - '@strudel/core': - specifier: workspace:* - version: link:../core - devDependencies: - vite: - specifier: ^5.0.10 - version: 5.0.11(@types/node@20.10.6) - packages/codemirror: dependencies: '@codemirror/autocomplete': @@ -188,12 +178,12 @@ importers: '@replit/codemirror-vscode-keymap': specifier: ^6.0.2 version: 6.0.2(@codemirror/autocomplete@6.11.1)(@codemirror/commands@6.3.3)(@codemirror/language@6.10.0)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.5)(@codemirror/state@6.4.0)(@codemirror/view@6.23.0) - '@strudel/canvas': - specifier: workspace:* - version: link:../canvas '@strudel/core': specifier: workspace:* version: link:../core + '@strudel/draw': + specifier: workspace:* + version: link:../draw '@uiw/codemirror-themes': specifier: ^4.21.21 version: 4.21.21(@codemirror/language@6.10.0)(@codemirror/state@6.4.0)(@codemirror/view@6.23.0) @@ -246,16 +236,26 @@ importers: specifier: ^1.5.3 version: 1.5.3 + packages/draw: + dependencies: + '@strudel/core': + specifier: workspace:* + version: link:../core + devDependencies: + vite: + specifier: ^5.0.10 + version: 5.0.11(@types/node@20.10.6) + packages/embed: {} packages/hydra: dependencies: - '@strudel/canvas': - specifier: workspace:* - version: link:../canvas '@strudel/core': specifier: workspace:* version: link:../core + '@strudel/draw': + specifier: workspace:* + version: link:../draw hydra-synth: specifier: ^1.3.29 version: 1.3.29 @@ -317,15 +317,15 @@ importers: packages/repl: dependencies: - '@strudel/canvas': - specifier: workspace:* - version: link:../canvas '@strudel/codemirror': specifier: workspace:* version: link:../codemirror '@strudel/core': specifier: workspace:* version: link:../core + '@strudel/draw': + specifier: workspace:* + version: link:../draw '@strudel/hydra': specifier: workspace:* version: link:../hydra @@ -474,12 +474,12 @@ importers: packages/webaudio: dependencies: - '@strudel/canvas': - specifier: workspace:* - version: link:../canvas '@strudel/core': specifier: workspace:* version: link:../core + '@strudel/draw': + specifier: workspace:* + version: link:../draw superdough: specifier: workspace:* version: link:../superdough @@ -545,9 +545,6 @@ importers: '@nanostores/react': specifier: ^0.7.1 version: 0.7.1(nanostores@0.9.5)(react@18.2.0) - '@strudel/canvas': - specifier: workspace:* - version: link:../packages/canvas '@strudel/codemirror': specifier: workspace:* version: link:../packages/codemirror @@ -560,6 +557,9 @@ importers: '@strudel/desktopbridge': specifier: workspace:* version: link:../packages/desktopbridge + '@strudel/draw': + specifier: workspace:* + version: link:../packages/draw '@strudel/hydra': specifier: workspace:* version: link:../packages/hydra diff --git a/website/package.json b/website/package.json index ed40b005..7af9e61e 100644 --- a/website/package.json +++ b/website/package.json @@ -26,7 +26,7 @@ "@nanostores/react": "^0.7.1", "@strudel/codemirror": "workspace:*", "@strudel/core": "workspace:*", - "@strudel/canvas": "workspace:*", + "@strudel/draw": "workspace:*", "@strudel/csound": "workspace:*", "@strudel/desktopbridge": "workspace:*", "@strudel/hydra": "workspace:*", diff --git a/website/src/docs/Colors.jsx b/website/src/docs/Colors.jsx index f11a7440..34cc2e49 100644 --- a/website/src/docs/Colors.jsx +++ b/website/src/docs/Colors.jsx @@ -1,4 +1,4 @@ -import { colorMap } from '@strudel/canvas'; +import { colorMap } from '@strudel/draw'; const Colors = () => { return ( diff --git a/website/src/docs/MiniRepl.jsx b/website/src/docs/MiniRepl.jsx index 9a886109..cb0f26f7 100644 --- a/website/src/docs/MiniRepl.jsx +++ b/website/src/docs/MiniRepl.jsx @@ -1,7 +1,7 @@ import { useState, useRef, useCallback, useMemo, useEffect } from 'react'; import { Icon } from './Icon'; import { silence, noteToMidi, _mod } from '@strudel/core'; -import { getPunchcardPainter } from '@strudel/canvas'; +import { getPunchcardPainter } from '@strudel/draw'; import { transpiler } from '@strudel/transpiler'; import { getAudioContext, webaudioOutput, initAudioOnFirstClick } from '@strudel/webaudio'; import { StrudelMirror } from '@strudel/codemirror'; diff --git a/website/src/pages/img/example-[name].png.js b/website/src/pages/img/example-[name].png.js index 1361df79..a38a0616 100644 --- a/website/src/pages/img/example-[name].png.js +++ b/website/src/pages/img/example-[name].png.js @@ -1,5 +1,5 @@ import { createCanvas } from 'canvas'; -import { pianoroll } from '@strudel/canvas'; +import { pianoroll } from '@strudel/draw'; import { evaluate } from '@strudel/transpiler'; import '../../../../test/runtime.mjs'; import * as tunes from '../../repl/tunes.mjs'; diff --git a/website/src/pages/swatch/[name].png.js b/website/src/pages/swatch/[name].png.js index 809a64ec..ac150cfe 100644 --- a/website/src/pages/swatch/[name].png.js +++ b/website/src/pages/swatch/[name].png.js @@ -1,5 +1,5 @@ import { createCanvas } from 'canvas'; -import { pianoroll } from '@strudel/canvas'; +import { pianoroll } from '@strudel/draw'; import { evaluate } from '@strudel/transpiler'; import '../../../../test/runtime.mjs'; import { getMyPatterns } from '../../my_patterns'; diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx index fd5892bd..dd164965 100644 --- a/website/src/repl/Repl.jsx +++ b/website/src/repl/Repl.jsx @@ -5,7 +5,7 @@ This program is free software: you can redistribute it and/or modify it under th */ import { code2hash, logger, silence } from '@strudel/core'; -import { getDrawContext } from '@strudel/canvas'; +import { getDrawContext } from '@strudel/draw'; import cx from '@src/cx.mjs'; import { transpiler } from '@strudel/transpiler'; import { diff --git a/website/src/repl/util.mjs b/website/src/repl/util.mjs index d9c80ca9..6dba7dab 100644 --- a/website/src/repl/util.mjs +++ b/website/src/repl/util.mjs @@ -72,7 +72,7 @@ export async function getRandomTune() { export function loadModules() { let modules = [ import('@strudel/core'), - import('@strudel/canvas'), + import('@strudel/draw'), import('@strudel/tonal'), import('@strudel/mini'), import('@strudel/xen'),