Re: [css-houdini-drafts] [css-paint-api] use-case: data/audio visualization (#872)

@majido 

> Also how useful is receiving a message when you cannot keep that message around beyond the immediate paint. 

If gather this proposal correctly the messages might not need to be kept.  

The previous/current value can be kept in the HTML element at the CSS value at the element where `paint()` is defined.

E.g., given initial CSS

`--data:'["initial data"]';`

As @tabatkins mentioned, arbitrary values can be set at `paint()` function or at properties


      await CSS.paintWorklet.addModule("vis.js");
      
      const paint = document.querySelector("p");
      
      const paintWorkletMessage = ({element = p, prop = '--data', message = '[]'} = {}) => {
        element.style.setProperty(prop, message);
      }

      await new Promise(resolve => setTimeout(resolve, 200));
      
      paintWorkletMessage({message: `["other arbitrary data"]`});
      
      await new Promise(r => setTimeout(r, 200));

      paintWorkletMessage({message: `["more arbitrary data"]`});
      
      paint.onfocus = e => {
        paintWorkletMessage({message: JSON.stringify([...Array(Math.floor(Math.random() * 10))].map(_ => Math.floor(Math.random() * 2)))});
      }

at the paint worklet 

    static get inputProperties() { return ["--data"] }
    // ..
    paint (ctx, geom, properties, args) {
      const data = properties.get('--data').toString();
      const message = JSON.parse(data);
      console.log(message);
    }

If https://github.com/w3c/css-houdini-drafts/issues/857 includes providing a means to set text at `--data` property from within the paint worklet the updated set value can be read outside of paint worklet scope.

> What if we switch the global scope right after receiving the message?

The scope can be checked for properties defined within paint worklet scope, which allow for the same code to be used for different scopes

    if (!("registerPaint" in globalThis)) {
      globalThis.registerPaint = function(...rest) { }
     console.log(globalThis);
   }



-- 
GitHub Notification of comment by guest271314
Please view or discuss this issue at https://github.com/w3c/css-houdini-drafts/issues/872#issuecomment-500190244 using your GitHub account

Received on Sunday, 9 June 2019 07:00:41 UTC