From 6ce8a3febadbe9426f621ffb96ded8645ed4792d Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Thu, 29 Feb 2024 22:14:53 +0100 Subject: [PATCH] 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'),