From 83ea3bb138468aa4d4953c6dcaae3c5707f742ca Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 15 Mar 2024 01:47:35 +0100
Subject: [PATCH] encapsulate canvas logic

---
 packages/widgets/Canvas.jsx    | 21 +++++++++++++++++++++
 packages/widgets/Pianoroll.jsx | 22 +++-------------------
 packages/widgets/index.mjs     |  1 +
 3 files changed, 25 insertions(+), 19 deletions(-)
 create mode 100644 packages/widgets/Canvas.jsx

diff --git a/packages/widgets/Canvas.jsx b/packages/widgets/Canvas.jsx
new file mode 100644
index 00000000..9b6b668c
--- /dev/null
+++ b/packages/widgets/Canvas.jsx
@@ -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;
+}
diff --git a/packages/widgets/Pianoroll.jsx b/packages/widgets/Pianoroll.jsx
index bf7c145c..f28444ca 100644
--- a/packages/widgets/Pianoroll.jsx
+++ b/packages/widgets/Pianoroll.jsx
@@ -1,29 +1,13 @@
 import { Pattern } from '@strudel/core';
 import { registerWidget } from '@strudel/transpiler';
-import { customElement } from 'solid-element';
+import { getWidgetDrawContext } from './Canvas.jsx';
 
-customElement('strudel-pianoroll', { options: JSON.stringify('{}') }, (props, { element }) => {
-  return <canvas width={400} height={100} />;
-});
-
-registerWidget('roll', 'strudel-pianoroll');
+registerWidget('roll', 'strudel-canvas');
 
 Pattern.prototype.roll = function (id, options = { fold: 1 }) {
   // TODO: remove setTimeout...
   setTimeout(() => {
-    let el = document.getElementById(id);
-    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');
+    const ctx = getWidgetDrawContext(id, options);
     this.pianoroll({ ...options, ctx });
   });
   return this;
diff --git a/packages/widgets/index.mjs b/packages/widgets/index.mjs
index 80d01ab5..e42e43b1 100644
--- a/packages/widgets/index.mjs
+++ b/packages/widgets/index.mjs
@@ -1,2 +1,3 @@
 export * from './Claviature.jsx';
 export * from './Pianoroll.jsx';
+export * from './Canvas.jsx';