particles/modules/particles-player-sk/particles-player-sk.ts - buildbot - Git at Google

 /**
  * @module particles-sk
  * @description <h2><code>particles-player-sk</code></h2>
  *
  * <p>
  *   Handles the bulk of the work displaying Particles.
  * </p>
  *
  */
 import { $$ } from 'common-sk/modules/dom';
 import { define } from 'elements-sk/define';
 import { errorMessage } from 'elements-sk/errorMessage';
 import { html, TemplateResult } from 'lit-html';
 import type {
   Particles, CanvasKit, Surface, Canvas, CanvasKitInit as CKInit,
 } from 'canvaskit-wasm';
 import { ElementSk } from '../../../infra-sk/modules/ElementSk';

 // It is assumed that canvaskit.js has been loaded and this symbol is available globally.
 declare const CanvasKitInit: typeof CKInit;

 const DEFAULT_SIZE = 256;
 const ZOOM_IN_FACTOR = 1.1; // 10%
 const ZOOM_OUT_FACTOR = 1 / ZOOM_IN_FACTOR;

 export interface PlayerConfig {
   body: any;
   width: number;
   height: number;
 }

 // This element might be loaded from a different site, and that means we need
 // to be careful about how we construct the URL back to the canvas.wasm file.
 // Start by recording the script origin.
 const scriptOrigin = new URL((document!.currentScript as HTMLScriptElement).src).origin;
 const kitReady = CanvasKitInit({
   locateFile: (file: any) => `${scriptOrigin}/dist/${file}`,
 });

 /**
  * Information needed to construct a single HTML control for a uniform. Note
  * that some uniforms actually represent more than one control, such as a
  * 'float3', in which case code will need to create three instances of
  * UniformControl.
 */
 interface UniformControl {
   id: string;
   uniformSlot: number;
 }

 interface Point {
   x: number;
   y: number;
 }

 export function floatSlider(uniform: UniformControl | null): TemplateResult {
   if (!uniform) {
     return html``;
   }
   return html` <div class="widget">
     <input
       name=${uniform.id}
       id=${uniform.id}
       min="0"
       max="1"
       step="0.00001"
       type="range"
     />
     <label for=${uniform.id}>${uniform.id}</label>
   </div>`;
 }

 export class ParticlesPlayerSk extends ElementSk {
   private sliders: UniformControl[] = [];

   private zoomLevel: number = 1.0;

   private kit: CanvasKit | null = null; // CanvasKit instance

   private animation: Particles | null = null; // Particles instance

   private surface: Surface | null = null; // Surface

   private canvas: Canvas | null = null; // Cached Canvas (surface.getCanvas()).

   private time: number = 0;

   private lastTime: number = 0;

   private lastDrag: Point | null = null;

   constructor() {
     super(ParticlesPlayerSk.template);
   }

   private static template = (ele: ParticlesPlayerSk) => html`
     <div class="container">
       ${ele.sliders.map(floatSlider)}
       <canvas
         id="player"
         @wheel=${ele.wheelHandler}
         @mousemove=${ele.dragHandler}
         width=${ele.width * window.devicePixelRatio}
         height=${ele.height * window.devicePixelRatio}
         style="width: ${ele.width}px; height: ${ele.height}px;"
       >
         Your browser does not support the canvas tag.
       </canvas>
     </div>`;

   connectedCallback(): void {
     super.connectedCallback();
     this._render();
   }

   attributeChangedCallback(): void {
     this._render();
   }

   initialize(config: PlayerConfig): Promise<void> {
     this.width = config.width;
     this.height = config.height;
     this._render();

     return kitReady.then((ck: CanvasKit) => {
       this.kit = ck;
       try {
         this._initializeParticles(config.body);
       } catch (error) {
         errorMessage(error);
       }
       this._render();
     });
   }

   isPlaying(): boolean {
     return !this.paused;
   }

   play(): void {
     if (!this.isPlaying()) {
       this.paused = false;
     }
     this._render();
   }

   pause(): void {
     if (this.isPlaying()) {
       this.paused = true;
     }
   }

   resetView(): void {
     const ck = this.kit;
     const canvas = this.canvas;
     // Reset to identity
     const tt = canvas!.getTotalMatrix();
     const itt = ck!.Matrix.invert(tt)!;
     canvas!.concat(itt);
     // Zoom to the middle of the animation
     canvas!.translate(this.width / 2, this.height / 2);
     this.zoomLevel = 1.0;
   }

   restartAnimation(): void {
     this.time = 0;
     this.lastTime = 0;
   }

   private dragHandler(e: MouseEvent) {
     if (!e.buttons) {
       this.lastDrag = null;
       return;
     }
     if (this.lastDrag) {
       const dx = e.clientX - this.lastDrag.x;
       const dy = e.clientY - this.lastDrag.y;

       this.canvas!.translate(dx / this.zoomLevel, dy / this.zoomLevel);
     }
     this.lastDrag = {
       x: e.clientX,
       y: e.clientY,
     };
   }

   private drawFrame() {
     if (!this.animation || !this.canvas) {
       return;
     }

     // Go through all the sliders on the page that we created and poll those inputs for their
     // value. Plug those values (range [0.0, 1.0]) into the uniforms.
     const uniforms = this.animation.uniforms();
     this.sliders.forEach((slider) => {
       const s = $$<HTMLInputElement>(`input#${slider.id}`, this);
       if (!s) {
         return;
       }
       uniforms[slider.uniformSlot] = s.valueAsNumber;
     });
     window.requestAnimationFrame(() => this.drawFrame());
     if (!this.lastTime) {
       this.animation.start(0, true);
       this.lastTime = Date.now();
     }

     if (this.isPlaying()) {
       this.time += Date.now() - this.lastTime;
     }
     this.lastTime = Date.now();

     this.canvas.clear(this.kit!.BLACK);
     this.animation.update(this.time / 1000.0);
     this.animation.draw(this.canvas);
     this.surface!.flush();
   }

   private _initializeParticles(particlesJSON: any) {
     // Rebuild the surface only if needed.
     if (
       !this.surface
       || (this.surface!.width() !== this.width)
       || (this.surface!.height() !== this.height)
     ) {
       this._render();

       // eslint-disable-next-line no-unused-expressions
       this.surface?.delete();
       const canvasEle = $$<HTMLCanvasElement>('#player', this)!;
       this.surface = this.kit!.MakeCanvasSurface(canvasEle);
       if (!this.surface) {
         throw new Error('Could not make SkSurface.');
       }
       // We don't need to call .delete() on the canvas because
       // the parent surface will do that for us.
       this.canvas = this.surface.getCanvas();
     }

     // eslint-disable-next-line no-unused-expressions
     this.animation?.delete();

     this.animation = this.kit!.MakeParticles(
       JSON.stringify(particlesJSON),
     );
     if (!this.animation) {
       throw new Error('Could not parse Particles JSON.');
     }

     // Go through all uniforms this animation has and look for those with the
     // prefix 'slider_' For those uniforms, we will make a slider on the UI and
     // then every frame, we will poll those inputs for their value and plug the
     // values into the uniforms. The sliders will be in range [0.0, 1.0]. Note
     // that the matrices are column major.

     // TODO(jcgregorio) Group rows together on the display so matrices look like
     // matrices.

     // TODO(jgrergorio) If the name contains "color" then either display a color
     // picker or at the very least change the postfixes to _r, _g_, and _b.

     // TODO(jcgregorio) Break out the uniforms handling into its own element
     // to be re-used on shaders.skia.org.
     this.sliders = [];
     const an = this.animation;
     for (let i = 0; i < an.getUniformCount(); i++) {
       const name = an.getUniformName(i);
       if (name.startsWith('slider_')) {
         const uniform = an.getUniform(i);
         for (let row = 0; row < uniform.rows; row++) {
           for (let col = 0; col < uniform.columns; col++) {
             let id = `${name.substring('slider_'.length)}`;
             if (uniform.rows > 1) {
               id += `_${row}`;
             }
             if (uniform.columns > 1) {
               id += `_${col}`;
             }
             this.sliders.push({
               id: id,
               uniformSlot: uniform.slot + row + col * uniform.rows,
             });
           }
         }
       }
     }

     this._render();
     this.canvas!.clear(this.kit!.BLACK);
     this.resetView();
     this.restartAnimation();
     this.drawFrame();
   }

   private wheelHandler(e: WheelEvent) {
     e.preventDefault();
     e.stopPropagation();

     let zoom = 0;
     if (e.deltaY < 0) {
       zoom = ZOOM_IN_FACTOR;
     } else {
       zoom = ZOOM_OUT_FACTOR;
     }
     this.zoomLevel *= zoom;
     const ck = this.kit;
     const canvas = this.canvas;

     const tt = canvas!.getTotalMatrix();
     const itt = ck!.Matrix.invert(tt)!;
     const pts = [e.clientX, e.clientY];
     ck!.Matrix.mapPoints(itt, pts); // Transform DOM pts into canvas space

     const matr = ck!.Matrix.scaled(zoom, zoom, pts[0], pts[1]);
     canvas!.concat(matr);
   }

   static get observedAttributes(): string[] {
     return ['width', 'height', 'paused'];
   }

   get width(): number { return +(this.getAttribute('width') || DEFAULT_SIZE); }

   set width(val: number) { this.setAttribute('width', val.toFixed(0)); }

   get height(): number { return +(this.getAttribute('height') || DEFAULT_SIZE); }

   set height(val: number) { this.setAttribute('height', val.toFixed(0)); }

   get paused(): boolean { return this.hasAttribute('paused'); }

   set paused(val: boolean) {
     if (val) {
       this.setAttribute('paused', '');
     } else {
       this.removeAttribute('paused');
     }
   }
 }

 define('particles-player-sk', ParticlesPlayerSk);
	/**
	* @module particles-sk
	* @description <h2><code>particles-player-sk</code></h2>
	*
	* <p>
	* Handles the bulk of the work displaying Particles.
	* </p>
	*
	*/
	import { $$ } from 'common-sk/modules/dom';
	import { define } from 'elements-sk/define';
	import { errorMessage } from 'elements-sk/errorMessage';
	import { html, TemplateResult } from 'lit-html';
	import type {
	Particles, CanvasKit, Surface, Canvas, CanvasKitInit as CKInit,
	} from 'canvaskit-wasm';
	import { ElementSk } from '../../../infra-sk/modules/ElementSk';

	// It is assumed that canvaskit.js has been loaded and this symbol is available globally.
	declare const CanvasKitInit: typeof CKInit;

	const DEFAULT_SIZE = 256;
	const ZOOM_IN_FACTOR = 1.1; // 10%
	const ZOOM_OUT_FACTOR = 1 / ZOOM_IN_FACTOR;

	export interface PlayerConfig {
	body: any;
	width: number;
	height: number;
	}

	// This element might be loaded from a different site, and that means we need
	// to be careful about how we construct the URL back to the canvas.wasm file.
	// Start by recording the script origin.
	const scriptOrigin = new URL((document!.currentScript as HTMLScriptElement).src).origin;
	const kitReady = CanvasKitInit({
	locateFile: (file: any) => `${scriptOrigin}/dist/${file}`,
	});

	/**
	* Information needed to construct a single HTML control for a uniform. Note
	* that some uniforms actually represent more than one control, such as a
	* 'float3', in which case code will need to create three instances of
	* UniformControl.
	*/
	interface UniformControl {
	id: string;
	uniformSlot: number;
	}

	interface Point {
	x: number;
	y: number;
	}

	export function floatSlider(uniform: UniformControl \| null): TemplateResult {
	if (!uniform) {
	return html``;
	}
	return html` <div class="widget">
	<input
	name=${uniform.id}
	id=${uniform.id}
	min="0"
	max="1"
	step="0.00001"
	type="range"
	/>
	<label for=${uniform.id}>${uniform.id}</label>
	</div>`;
	}

	export class ParticlesPlayerSk extends ElementSk {
	private sliders: UniformControl[] = [];

	private zoomLevel: number = 1.0;

	private kit: CanvasKit \| null = null; // CanvasKit instance

	private animation: Particles \| null = null; // Particles instance

	private surface: Surface \| null = null; // Surface

	private canvas: Canvas \| null = null; // Cached Canvas (surface.getCanvas()).

	private time: number = 0;

	private lastTime: number = 0;

	private lastDrag: Point \| null = null;

	constructor() {
	super(ParticlesPlayerSk.template);
	}

	private static template = (ele: ParticlesPlayerSk) => html`
	<div class="container">
	${ele.sliders.map(floatSlider)}
	<canvas
	id="player"
	@wheel=${ele.wheelHandler}
	@mousemove=${ele.dragHandler}
	width=${ele.width * window.devicePixelRatio}
	height=${ele.height * window.devicePixelRatio}
	style="width: ${ele.width}px; height: ${ele.height}px;"
	>
	Your browser does not support the canvas tag.
	</canvas>
	</div>`;

	connectedCallback(): void {
	super.connectedCallback();
	this._render();
	}

	attributeChangedCallback(): void {
	this._render();
	}

	initialize(config: PlayerConfig): Promise<void> {
	this.width = config.width;
	this.height = config.height;
	this._render();

	return kitReady.then((ck: CanvasKit) => {
	this.kit = ck;
	try {
	this._initializeParticles(config.body);
	} catch (error) {
	errorMessage(error);
	}
	this._render();
	});
	}

	isPlaying(): boolean {
	return !this.paused;
	}

	play(): void {
	if (!this.isPlaying()) {
	this.paused = false;
	}
	this._render();
	}

	pause(): void {
	if (this.isPlaying()) {
	this.paused = true;
	}
	}

	resetView(): void {
	const ck = this.kit;
	const canvas = this.canvas;
	// Reset to identity
	const tt = canvas!.getTotalMatrix();
	const itt = ck!.Matrix.invert(tt)!;
	canvas!.concat(itt);
	// Zoom to the middle of the animation
	canvas!.translate(this.width / 2, this.height / 2);
	this.zoomLevel = 1.0;
	}

	restartAnimation(): void {
	this.time = 0;
	this.lastTime = 0;
	}

	private dragHandler(e: MouseEvent) {
	if (!e.buttons) {
	this.lastDrag = null;
	return;
	}
	if (this.lastDrag) {
	const dx = e.clientX - this.lastDrag.x;
	const dy = e.clientY - this.lastDrag.y;

	this.canvas!.translate(dx / this.zoomLevel, dy / this.zoomLevel);
	}
	this.lastDrag = {
	x: e.clientX,
	y: e.clientY,
	};
	}

	private drawFrame() {
	if (!this.animation \|\| !this.canvas) {
	return;
	}

	// Go through all the sliders on the page that we created and poll those inputs for their
	// value. Plug those values (range [0.0, 1.0]) into the uniforms.
	const uniforms = this.animation.uniforms();
	this.sliders.forEach((slider) => {
	const s = $$<HTMLInputElement>(`input#${slider.id}`, this);
	if (!s) {
	return;
	}
	uniforms[slider.uniformSlot] = s.valueAsNumber;
	});
	window.requestAnimationFrame(() => this.drawFrame());
	if (!this.lastTime) {
	this.animation.start(0, true);
	this.lastTime = Date.now();
	}

	if (this.isPlaying()) {
	this.time += Date.now() - this.lastTime;
	}
	this.lastTime = Date.now();

	this.canvas.clear(this.kit!.BLACK);
	this.animation.update(this.time / 1000.0);
	this.animation.draw(this.canvas);
	this.surface!.flush();
	}

	private _initializeParticles(particlesJSON: any) {
	// Rebuild the surface only if needed.
	if (
	!this.surface
	\|\| (this.surface!.width() !== this.width)
	\|\| (this.surface!.height() !== this.height)
	) {
	this._render();

	// eslint-disable-next-line no-unused-expressions
	this.surface?.delete();
	const canvasEle = $$<HTMLCanvasElement>('#player', this)!;
	this.surface = this.kit!.MakeCanvasSurface(canvasEle);
	if (!this.surface) {
	throw new Error('Could not make SkSurface.');
	}
	// We don't need to call .delete() on the canvas because
	// the parent surface will do that for us.
	this.canvas = this.surface.getCanvas();
	}

	// eslint-disable-next-line no-unused-expressions
	this.animation?.delete();

	this.animation = this.kit!.MakeParticles(
	JSON.stringify(particlesJSON),
	);
	if (!this.animation) {
	throw new Error('Could not parse Particles JSON.');
	}

	// Go through all uniforms this animation has and look for those with the
	// prefix 'slider_' For those uniforms, we will make a slider on the UI and
	// then every frame, we will poll those inputs for their value and plug the
	// values into the uniforms. The sliders will be in range [0.0, 1.0]. Note
	// that the matrices are column major.

	// TODO(jcgregorio) Group rows together on the display so matrices look like
	// matrices.

	// TODO(jgrergorio) If the name contains "color" then either display a color
	// picker or at the very least change the postfixes to _r, _g_, and _b.

	// TODO(jcgregorio) Break out the uniforms handling into its own element
	// to be re-used on shaders.skia.org.
	this.sliders = [];
	const an = this.animation;
	for (let i = 0; i < an.getUniformCount(); i++) {
	const name = an.getUniformName(i);
	if (name.startsWith('slider_')) {
	const uniform = an.getUniform(i);
	for (let row = 0; row < uniform.rows; row++) {
	for (let col = 0; col < uniform.columns; col++) {
	let id = `${name.substring('slider_'.length)}`;
	if (uniform.rows > 1) {
	id += `_${row}`;
	}
	if (uniform.columns > 1) {
	id += `_${col}`;
	}
	this.sliders.push({
	id: id,
	uniformSlot: uniform.slot + row + col * uniform.rows,
	});
	}
	}
	}
	}

	this._render();
	this.canvas!.clear(this.kit!.BLACK);
	this.resetView();
	this.restartAnimation();
	this.drawFrame();
	}

	private wheelHandler(e: WheelEvent) {
	e.preventDefault();
	e.stopPropagation();

	let zoom = 0;
	if (e.deltaY < 0) {
	zoom = ZOOM_IN_FACTOR;
	} else {
	zoom = ZOOM_OUT_FACTOR;
	}
	this.zoomLevel *= zoom;
	const ck = this.kit;
	const canvas = this.canvas;

	const tt = canvas!.getTotalMatrix();
	const itt = ck!.Matrix.invert(tt)!;
	const pts = [e.clientX, e.clientY];
	ck!.Matrix.mapPoints(itt, pts); // Transform DOM pts into canvas space

	const matr = ck!.Matrix.scaled(zoom, zoom, pts[0], pts[1]);
	canvas!.concat(matr);
	}

	static get observedAttributes(): string[] {
	return ['width', 'height', 'paused'];
	}

	get width(): number { return +(this.getAttribute('width') \|\| DEFAULT_SIZE); }

	set width(val: number) { this.setAttribute('width', val.toFixed(0)); }

	get height(): number { return +(this.getAttribute('height') \|\| DEFAULT_SIZE); }

	set height(val: number) { this.setAttribute('height', val.toFixed(0)); }

	get paused(): boolean { return this.hasAttribute('paused'); }

	set paused(val: boolean) {
	if (val) {
	this.setAttribute('paused', '');
	} else {
	this.removeAttribute('paused');
	}
	}
	}

	define('particles-player-sk', ParticlesPlayerSk);