elias/strudel
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel.git synced 2026-01-23 11:28:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

encapsulate canvas logic

Browse Source
This commit is contained in:
Felix Roos 2024-03-15 01:47:35 +01:00
parent 48e0691eec
commit 83ea3bb138
3 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/widgets/Canvas.jsx Normal file
View File

@ -0,0 +1,21 @@
import { customElement } from 'solid-element';
customElement('strudel-canvas', {}, () => {
return <canvas width={300} height={200} />;
});
export function getWidgetDrawContext(id, options) {
let el = document.getElementById(id);
if (!el) {
console.warn(`widget with id ${id} not found in the DOM`);
return;
}
const { width = 300, height = 100, pixelRatio = window.devicePixelRatio } = options || {};
const canvas = el?.shadowRoot.firstChild;
canvas.width = width * pixelRatio;
canvas.height = height * pixelRatio;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
const ctx = canvas.getContext('2d');
return ctx;
}

22
packages/widgets/Pianoroll.jsx
View File

@ -1,29 +1,13 @@
import { Pattern } from '@strudel/core'; import { Pattern } from '@strudel/core';
import { registerWidget } from '@strudel/transpiler'; import { registerWidget } from '@strudel/transpiler';
import { customElement } from 'solid-element'; import { getWidgetDrawContext } from './Canvas.jsx';
customElement('strudel-pianoroll', { options: JSON.stringify('{}') }, (props, { element }) => { registerWidget('roll', 'strudel-canvas');
return <canvas width={400} height={100} />;
});
registerWidget('roll', 'strudel-pianoroll');
Pattern.prototype.roll = function (id, options = { fold: 1 }) { Pattern.prototype.roll = function (id, options = { fold: 1 }) {
// TODO: remove setTimeout... // TODO: remove setTimeout...
setTimeout(() => { setTimeout(() => {
let el = document.getElementById(id); const ctx = getWidgetDrawContext(id, options);
if (!el) {
console.log('widget not found...');
return this;
}
const { width = 400, height = 100 } = options;
const canvas = el?.shadowRoot.firstChild;
const pixelRatio = window.devicePixelRatio;
canvas.width = width * pixelRatio;
canvas.height = height * pixelRatio;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
const ctx = canvas.getContext('2d');
this.pianoroll({ ...options, ctx }); this.pianoroll({ ...options, ctx });
}); });
return this; return this;

1
packages/widgets/index.mjs
View File

@ -1,2 +1,3 @@
export * from './Claviature.jsx'; export * from './Claviature.jsx';
export * from './Pianoroll.jsx'; export * from './Pianoroll.jsx';
export * from './Canvas.jsx';