Add fillstyle canvas support

blueprint/core/blueprint_CanvasView.h

@@ -64,6 +64,17 @@ namespace blueprint
                 auto* jsContext = new juce::DynamicObject();
                 juce::Path jsPath;
 
+                jsContext->setProperty("__setFillStyle", juce::var::NativeFunction {
+                    [&g, &jsPath](const juce::var::NativeFunctionArgs& args) -> juce::var {
+                        jassert(args.numArguments == 1);
+
+                        auto hex = args.arguments[0].toString();
+                        g.setColour(juce::Colour::fromString(hex));
+
+                        return juce::var();
+                    }
+                });
+
                 jsContext->setProperty("fillRect", juce::var::NativeFunction {
                     [&g, &jsPath](const juce::var::NativeFunctionArgs& args) -> juce::var {
                         jassert(args.numArguments == 4);
@@ -73,7 +84,6 @@ namespace blueprint
                         const int width = args.arguments[2];
                         const int height = args.arguments[3];
 
-                        g.setColour(juce::Colours::blue);
                         g.fillRect(x, y, width, height);
 
                         return juce::var();

examples/GainPlugin/Source/jsui/src/App.js

@@ -13,7 +13,12 @@ import {
 function animatedDraw(ctx) {
   let now = (Date.now() / 10);
   let width = now % 100;
+  let red = Math.sqrt(width / 100) * 255;
+  let hex = Math.floor(red).toString(16);
 
+  // TODO: Should update the ctx proxy to convert from javascript hex strings, aka
+  // #ffffaa to juce's Colour::fromString() API which is ffffffaa.
+  ctx.fillStyle = `ff${hex}ffaa`;
   ctx.fillRect(0, 0, width, 2);
 }
 

packages/juce-blueprint/esm/Blueprint.js

@@ -23,6 +23,28 @@ export function Image(props) {
 }
 
 export function Canvas(props) {
+  if (props.hasOwnProperty('onDraw')) {
+    let userOnDraw = props.onDraw;
+    let wrappedDraw = function(ctx) {
+      Object.defineProperty(ctx, 'fillStyle', {
+        enumerable: false,
+        configurable: false,
+        get: function() {
+          return 'Not Supported';
+        },
+        set: function(value) {
+          this.__setFillStyle(value);
+        }
+      });
+
+      return userOnDraw(ctx);
+    };
+
+    return React.createElement('CanvasView', Object.assign({}, props, {
+      onDraw: wrappedDraw,
+    }), props.children);
+  }
+
   return React.createElement('CanvasView', props, props.children);
 }