Ian Kilpatrick bfgeek

## Properties of Custom Paint.md

      
              1 file
            
          
              0 forks
            
          
              3 comments
            
          
              3 stars
            
          
                bfgeek
                / Properties of Custom Paint.md
            
            
              Last active
              August 29, 2015 14:21
            
          
    Properties of Custom Paint

We wanted to capture a solid notion of the required and desirable properties of a Custom Paint API, so we can agree on goals before descending into API or implementation details.
So here’s our list :) Anything we should change, remove, or add?
Required Properties of Custom Paint

Custom Paint code happens explicitly after layout


## Properties of Custom Layout.md

      
              1 file
            
          
              0 forks
            
          
              1 comment
            
          
              4 stars
            
          
                bfgeek
                / Properties of Custom Layout.md
            
            
              Created
              June 1, 2015 03:53
            
          
    Properties of Custom Layout

Similar to Custom Paint, we wanted to capture some of the properties of a Custom Layout API to agree on goals before heading into implementation details.
Note: "Custom Layout" is used here for both Line & Box Layout.
Anything we should change, remove, or add?
Required Properties of Custom Layout


## Overview.html
<!doctype html>
<html lang="en">
 <head>

  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">


  <title>CSS Script API Level 1</title>


## CanvasRenderingContext2D.idl
typedef (HTMLImageElement or
         HTMLVideoElement or
         HTMLCanvasElement) CanvasImageSource;

interface CanvasRenderingContext2D {

  // back-reference to the canvas
  readonly attribute HTMLCanvasElement canvas;

  void drawFocusIfNeeded(Element element);

## compositorWorklet.js
// Main thread.

window.compositorWorklet.import('parallax.js').then(function() {
  // Library ready to use.

  // This creates an instance of the CompositorAnimator class inside
  // the worklet that we can communicate to.
  const animator = new CompositorAnimator('parallax', {rate: 0.5});

  // Can postMessage directly to that instance.

## css-ui-nav.js
window.addEventListener("keydown", (evt) => {
  let prop = '--nav-';
  switch (evt.key) {
    case "ArrowDown":
      prop += 'down';
      break;
    case "ArrowUp":
      prop += 'up';
      break;
    case "ArrowLeft":

## LayoutGeneratorExample.cpp

BlockFlowLayout::layout(Box* box)
{
// START TOP GENERATOR MACRO
    switch (m_state) {
        case 0:
            goto a;
        case 1:
            goto b;
    }

## layout.js
registerLayout('my-grid-layout', class {
  static inputProperties = [/* etc */];

  constructor() {
    this.grid = []; // Place items on a cached grid so don't have to recompute each layout call.
  }

  addRemoveChildren(addRemoveList) {
    // Rebuild grid now, only occurs when child list changes.
    for (let i = 0; i < addRemoveList.length; i++) {

## animation-worklet-v.0001.js
registerAnimator('parallax', class {
  animate(inputs, outputs) {
    // read scroller vertical scroll offset.
    const scrollTop = inputs.scroller.scrollTop;

    // update parallax transform
    let t = outputs.parallax.styleMap.get('transform').m42;
    t =  -0.2 * scrollTop;
    outputs.parallax.styleMap.set('transform', new CSSTransformValue(... t));
  }

## animation-worklet-v.0002.js
registerAnimator('parallax', class {
  static inputs = {
    'scroller': ScrollSource;
  };

  static outputs = {
    'parallax': Style(['transform']) // This is bad.
  }

  animate(inputs, outputs) {
	<!doctype html>
	<html lang="en">
	<head>

	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">


	<title>CSS Script API Level 1</title>
	typedef (HTMLImageElement or
	HTMLVideoElement or
	HTMLCanvasElement) CanvasImageSource;

	interface CanvasRenderingContext2D {

	// back-reference to the canvas
	readonly attribute HTMLCanvasElement canvas;

	void drawFocusIfNeeded(Element element);
	// Main thread.

	window.compositorWorklet.import('parallax.js').then(function() {
	// Library ready to use.

	// This creates an instance of the CompositorAnimator class inside
	// the worklet that we can communicate to.
	const animator = new CompositorAnimator('parallax', {rate: 0.5});

	// Can postMessage directly to that instance.

	BlockFlowLayout::layout(Box* box)
	{
	// START TOP GENERATOR MACRO
	switch (m_state) {
	case 0:
	goto a;
	case 1:
	goto b;
	}
	registerLayout('my-grid-layout', class {
	static inputProperties = [/* etc */];

	constructor() {
	this.grid = []; // Place items on a cached grid so don't have to recompute each layout call.
	}

	addRemoveChildren(addRemoveList) {
	// Rebuild grid now, only occurs when child list changes.
	for (let i = 0; i < addRemoveList.length; i++) {
	registerAnimator('parallax', class {
	animate(inputs, outputs) {
	// read scroller vertical scroll offset.
	const scrollTop = inputs.scroller.scrollTop;

	// update parallax transform
	let t = outputs.parallax.styleMap.get('transform').m42;
	t = -0.2 * scrollTop;
	outputs.parallax.styleMap.set('transform', new CSSTransformValue(... t));
	}
	registerAnimator('parallax', class {
	static inputs = {
	'scroller': ScrollSource;
	};

	static outputs = {
	'parallax': Style(['transform']) // This is bad.
	}

	animate(inputs, outputs) {