@grame/faustwasm 0.0.64 → 0.0.65

package/README.md

@@ -81,6 +81,16 @@ node scripts/faust2svg.js test/mono.dsp test/out
 
 The main diagram should be in `test/out/process.svg`.
 
+#### Compile a Faust DSP in a Cmajor file
+
+For example:
+```bash
+rm -rf test/out # make sure you are under the faustwasm directory.
+node scripts/faust2cmajor.js test/organ.dsp test/out
+```
+
+The Cmajor file should be in `test/out/organ.cmajor`.
+
 #### Generate or process audio files
 
 Options:

package/assets/standalone/faust-ui/index.js

@@ -458,7 +458,7 @@ const _AbstractItem = class extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_
       const stateValue = newState[stateKey];
       if (stateKey === "style") {
         for (const styleKey in newState.style) {
-          if (styleKey in this.state.style && this.state.style[styleKey] !== newState.style[styleKey]) {
+          if (styleKey in this.state.style) {
             this.state.style[styleKey] = newState.style[styleKey];
             shouldUpdate = true;
           }
@@ -495,13 +495,17 @@ const _AbstractItem = class extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_
     const color = this.state.style.labelcolor;
     const ctx = this.labelCtx;
     const canvas = this.labelCanvas;
+    const ratio = window.devicePixelRatio || 1;
     let { width, height } = this.label.getBoundingClientRect();
     if (!width || !height)
       return this;
     width = Math.floor(width);
     height = Math.floor(height);
-    canvas.height = height;
-    canvas.width = width;
+    const scaledWidth = Math.floor(width * ratio);
+    const scaledHeight = Math.floor(height * ratio);
+    canvas.width = scaledWidth;
+    canvas.height = scaledHeight;
+    ctx.scale(ratio, ratio);
     ctx.clearRect(0, 0, width, height);
     ctx.fillStyle = color;
     ctx.textBaseline = "middle";
@@ -748,7 +752,8 @@ class Group extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
       this.children = [];
       const { style, type, items, emitter, isRoot } = this.state;
       const { grid, left, top, width, height } = style;
-      this.label.style.height = `${grid * 0.3}px`;
+      if (!this.state.isRoot)
+        this.label.style.height = `${grid * 0.3}px`;
       this.container.style.left = `${left * grid}px`;
       this.container.style.top = `${top * grid}px`;
       this.container.style.width = `${width * grid}px`;
@@ -903,7 +908,7 @@ class Group extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
       if (stateKey === "style") {
         for (const key2 in newState.style) {
           const styleKey = key2;
-          if (styleKey in this.state.style && this.state.style[styleKey] !== newState.style[styleKey]) {
+          if (styleKey in this.state.style) {
             this.state.style[styleKey] = newState.style[styleKey];
             shouldUpdate = true;
           }
@@ -921,26 +926,34 @@ class Group extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
     this.container = document.createElement("div");
     this.tabs = document.createElement("div");
     this.tabs.className = "faust-ui-tgroup-tabs";
-    this.label = document.createElement("div");
-    this.label.className = "faust-ui-group-label";
-    this.labelCanvas = document.createElement("canvas");
-    this.labelCtx = this.labelCanvas.getContext("2d");
+    if (!this.state.isRoot) {
+      this.label = document.createElement("div");
+      this.label.className = "faust-ui-group-label";
+      this.labelCanvas = document.createElement("canvas");
+      this.labelCtx = this.labelCanvas.getContext("2d");
+    }
     this.updateUI();
     this.children.forEach((item) => item.componentWillMount());
     return this;
   }
   paintLabel() {
+    if (this.state.isRoot)
+      return this;
     const label = this.state.label;
     const color = this.state.style.labelcolor;
     const ctx = this.labelCtx;
     const canvas = this.labelCanvas;
+    const ratio = window.devicePixelRatio || 1;
     let { width, height } = this.label.getBoundingClientRect();
     if (!width || !height)
       return this;
     width = Math.floor(width);
     height = Math.floor(height);
-    canvas.height = height;
-    canvas.width = width;
+    const scaledWidth = Math.floor(width * ratio);
+    const scaledHeight = Math.floor(height * ratio);
+    canvas.width = scaledWidth;
+    canvas.height = scaledHeight;
+    ctx.scale(ratio, ratio);
     ctx.clearRect(0, 0, width, height);
     ctx.fillStyle = color;
     ctx.textBaseline = "middle";
@@ -950,8 +963,10 @@ class Group extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
     return this;
   }
   mount() {
-    this.label.appendChild(this.labelCanvas);
-    this.container.appendChild(this.label);
+    if (!this.state.isRoot) {
+      this.label.appendChild(this.labelCanvas);
+      this.container.appendChild(this.label);
+    }
     if (this.tabs.children.length)
       this.container.appendChild(this.tabs);
     this.children.forEach((item) => {
@@ -963,7 +978,8 @@ class Group extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
   componentDidMount() {
     const handleResize = () => {
       const { grid, left, top, width, height } = this.state.style;
-      this.label.style.height = `${grid * 0.3}px`;
+      if (!this.state.isRoot)
+        this.label.style.height = `${grid * 0.3}px`;
       this.container.style.width = `${width * grid}px`;
       this.container.style.height = `${height * grid}px`;
       this.container.style.left = `${left * grid}px`;
@@ -1036,11 +1052,15 @@ class HBargraph extends _VBargraph__WEBPACK_IMPORTED_MODULE_1__["default"] {
       const { type, max, min, enums, scale, value } = this.state;
       const ctx = this.ctx;
       const canvas = this.canvas;
+      const ratio = window.devicePixelRatio || 1;
       let { width, height } = this.canvasDiv.getBoundingClientRect();
       width = Math.floor(width);
       height = Math.floor(height);
-      canvas.width = width;
-      canvas.height = height;
+      const scaledWidth = Math.floor(width * ratio);
+      const scaledHeight = Math.floor(height * ratio);
+      canvas.width = scaledWidth;
+      canvas.height = scaledHeight;
+      ctx.scale(ratio, ratio);
       const drawWidth = width * 0.9;
       const drawHeight = barwidth || Math.min(height / 3, drawWidth * 0.05);
       const left = width * 0.05;
@@ -1148,11 +1168,15 @@ class HSlider extends _VSlider__WEBPACK_IMPORTED_MODULE_1__["default"] {
       const ctx = this.ctx;
       const canvas = this.canvas;
       const distance = this.distance;
+      const ratio = window.devicePixelRatio || 1;
       let { width, height } = this.canvasDiv.getBoundingClientRect();
       width = Math.floor(width);
       height = Math.floor(height);
-      canvas.width = width;
-      canvas.height = height;
+      const scaledWidth = Math.floor(width * ratio);
+      const scaledHeight = Math.floor(height * ratio);
+      canvas.width = scaledWidth;
+      canvas.height = scaledHeight;
+      ctx.scale(ratio, ratio);
       const drawWidth = width * 0.9;
       const drawHeight = sliderwidth || Math.min(height / 3, drawWidth * 0.05);
       const left = width * 0.05;
@@ -1236,11 +1260,15 @@ class Knob extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
       const ctx = this.ctx;
       const canvas = this.canvas;
       const distance = this.distance;
+      const ratio = window.devicePixelRatio || 1;
       let { width, height } = this.canvas.getBoundingClientRect();
       width = Math.floor(width);
       height = Math.floor(height);
-      canvas.width = width;
-      canvas.height = height;
+      const scaledWidth = Math.floor(width * ratio);
+      const scaledHeight = Math.floor(height * ratio);
+      canvas.width = scaledWidth;
+      canvas.height = scaledHeight;
+      ctx.scale(ratio, ratio);
       const start = 5 / 8 * Math.PI;
       const end = 19 / 8 * Math.PI;
       const valPos = start + (0,_utils__WEBPACK_IMPORTED_MODULE_1__.toRad)(distance * 315);
@@ -1422,9 +1450,15 @@ class Led extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
       const { shape, ledbgcolor, coldcolor, warmcolor, hotcolor, overloadcolor } = this.state.style;
       const { min, max } = this.state;
       const { canvas, ctx, tempCanvas, tempCtx, distance } = this;
-      const { width, height } = canvas.getBoundingClientRect();
-      canvas.width = width;
-      canvas.height = height;
+      const ratio = window.devicePixelRatio || 1;
+      let { width, height } = canvas.getBoundingClientRect();
+      width = Math.floor(width);
+      height = Math.floor(height);
+      const scaledWidth = Math.floor(width * ratio);
+      const scaledHeight = Math.floor(height * ratio);
+      canvas.width = scaledWidth;
+      canvas.height = scaledHeight;
+      ctx.scale(ratio, ratio);
       const drawHeight = Math.min(height, width) * 0.75;
       const drawWidth = drawHeight;
       const left = (width - drawWidth) * 0.5;
@@ -1984,11 +2018,15 @@ class VBargraph extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
       const { type, max, min, enums, scale, value } = this.state;
       const ctx = this.ctx;
       const canvas = this.canvas;
+      const ratio = window.devicePixelRatio || 1;
       let { width, height } = this.canvasDiv.getBoundingClientRect();
       width = Math.floor(width);
       height = Math.floor(height);
-      canvas.width = width;
-      canvas.height = height;
+      const scaledWidth = Math.floor(width * ratio);
+      const scaledHeight = Math.floor(height * ratio);
+      canvas.width = scaledWidth;
+      canvas.height = scaledHeight;
+      ctx.scale(ratio, ratio);
       const drawHeight = height * 0.9;
       const drawWidth = barwidth || Math.min(width / 3, drawHeight * 0.05);
       const left = (width - drawWidth) * 0.5;
@@ -2187,11 +2225,15 @@ class VSlider extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
       const ctx = this.ctx;
       const canvas = this.canvas;
       const distance = this.distance;
+      const ratio = window.devicePixelRatio || 1;
       let { width, height } = this.canvasDiv.getBoundingClientRect();
       width = Math.floor(width);
       height = Math.floor(height);
-      canvas.width = width;
-      canvas.height = height;
+      const scaledWidth = Math.floor(width * ratio);
+      const scaledHeight = Math.floor(height * ratio);
+      canvas.width = scaledWidth;
+      canvas.height = scaledHeight;
+      ctx.scale(ratio, ratio);
       const drawHeight = height * 0.9;
       const drawWidth = sliderwidth || Math.min(width / 3, drawHeight * 0.05);
       const left = (width - drawWidth) * 0.5;
@@ -2487,7 +2529,7 @@ const _AbstractGroup = class {
     this.layout = {
       type: group.type,
       width: _AbstractGroup.padding * 2,
-      height: _AbstractGroup.padding * 2 + _AbstractGroup.labelHeight,
+      height: _AbstractGroup.padding * 2 + (this.isRoot ? 0 : _AbstractGroup.labelHeight),
       sizing
     };
   }
@@ -2693,7 +2735,7 @@ class HGroup extends _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"] {
     this.items.forEach((item) => {
       item.adjust();
       this.layout.width += item.layout.width;
-      this.layout.height = Math.max(this.layout.height, item.layout.height + 2 * _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].padding + _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].labelHeight);
+      this.layout.height = Math.max(this.layout.height, item.layout.height + 2 * _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].padding + (this.isRoot ? 0 : _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].labelHeight));
     });
     this.layout.width += _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].spaceBetween * (this.items.length - 1);
     if (this.layout.width < 1)
@@ -2714,7 +2756,7 @@ class HGroup extends _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"] {
         item.layout.width += dX$;
       }
       if (item.layout.sizing === "both" || item.layout.sizing === "vertical") {
-        dY$ = this.layout.height - 2 * _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].padding - _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].labelHeight - item.layout.height;
+        dY$ = this.layout.height - 2 * _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].padding - (this.isRoot ? 0 : _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].labelHeight) - item.layout.height;
         item.layout.height += dY$;
       }
       item.expand(dX$, dY$);
@@ -2724,12 +2766,12 @@ class HGroup extends _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"] {
   offset() {
     const { labelHeight, padding, spaceBetween } = _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"];
     let $left = padding;
-    const $top = padding + labelHeight;
+    const $top = padding + (this.isRoot ? 0 : labelHeight);
     const { height } = this.layout;
     this.items.forEach((item) => {
       item.layout.offsetLeft = $left;
       item.layout.offsetTop = $top;
-      item.layout.offsetTop += (height - labelHeight - item.layout.height) / 2 - padding;
+      item.layout.offsetTop += (height - (this.isRoot ? 0 : labelHeight) - item.layout.height) / 2 - padding;
       item.layout.left = (this.layout.left || 0) + item.layout.offsetLeft;
       item.layout.top = (this.layout.top || 0) + item.layout.offsetTop;
       item.offset();
@@ -3066,7 +3108,7 @@ const _TGroup = class extends _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["defau
       if (item.layout.sizing === "both" || item.layout.sizing === "horizontal")
         dX$ = this.layout.width - 2 * _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].padding - item.layout.width;
       if (item.layout.sizing === "both" || item.layout.sizing === "vertical")
-        dY$ = this.layout.height - 2 * _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].padding - _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].labelHeight - (tabsCount ? _TGroup.tabLayout.height : 0) - item.layout.height;
+        dY$ = this.layout.height - 2 * _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].padding - (this.isRoot ? 0 : _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].labelHeight) - (tabsCount ? _TGroup.tabLayout.height : 0) - item.layout.height;
       item.expand(dX$, dY$);
     });
     return this;
@@ -3074,7 +3116,7 @@ const _TGroup = class extends _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["defau
   offset() {
     const { labelHeight, padding } = _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"];
     const $left = padding;
-    const $top = padding + labelHeight + _TGroup.tabLayout.height;
+    const $top = padding + (this.isRoot ? 0 : labelHeight) + _TGroup.tabLayout.height;
     this.items.forEach((item) => {
       item.layout.offsetLeft = $left;
       item.layout.offsetTop = $top;
@@ -3170,7 +3212,7 @@ class VGroup extends _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"] {
   offset() {
     const { labelHeight, padding, spaceBetween } = _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"];
     const $left = padding;
-    let $top = padding + labelHeight;
+    let $top = padding + (this.isRoot ? 0 : labelHeight);
     const { width } = this.layout;
     this.items.forEach((item) => {
       item.layout.offsetLeft = $left;