Aplicación de TakeUntil en PlatziBoard.

Clase 24 de 36 • Curso de Programación Reactiva con RxJS

Víctor Andrés Córdova Poma

student•

Un cambio que haría en el código del profesor es agregar el operador throttleTime. Para que no dibuje por cada pixel se mueva el cursos, debido a que lo veo poco optimo. Sino cada intervalo de tiempo. Ello lo realicé, pero de un modo algo diferente. Posdata: Trabajé con Typescript.

import { fromEvent, map, mergeAll, Observable, takeUntil, throttleTime } from "rxjs";

const canvas = document.querySelector("#canvas") as HTMLCanvasElement;

interface Coodinates {
	x: number,
	y: number
}

const getCanvasPosition = (positionEvent: MouseEvent): Coodinates => {

	return {
		x: positionEvent.clientX - canvas.offsetLeft,
		y: positionEvent.clientY - canvas.offsetTop,
	}
}

class Paint {

	constructor(
		public context: CanvasRenderingContext2D,
		public prevX?: number,
		public prevY?: number,
	){
		this.customizeBrush();
	}

	public updatePosition = (positionEvent: MouseEvent): void => {
		const positions = getCanvasPosition(positionEvent);

		this.prevX, this.prevY = positions.x, positions.y;
	}

	public beginDraw = (positionEvent: MouseEvent): void => {
		this.context.beginPath();
		this.updatePosition(positionEvent);
	}

	public draw = (x: number, y: number): void => {
		if (this.prevX && this.prevY) {
			this.context.moveTo(this.prevX, this.prevY);
		}

		this.context.lineTo(x, y);
		this.context.stroke();
	}

	public customizeBrush = (): void => {
		canvasContext.lineWidth = 5;
		canvasContext.strokeStyle = "white";
		canvasContext.lineJoin = "round";
		canvasContext.lineCap = "round";
	}
}

const canvasContext = canvas.getContext("2d") as CanvasRenderingContext2D;

let paint: Paint = new Paint(canvasContext);

const onMouseDown$ = fromEvent<MouseEvent>(canvas, "mousedown");
const onMouseUp$ = fromEvent<MouseEvent>(canvas, "mouseup");
const onMouseMove$ = fromEvent<MouseEvent>(canvas, "mousemove");

const startPaint$: Observable<MouseEvent> = onMouseDown$.pipe(
	map((event) => {
		paint.beginDraw(event);

		return onMouseMove$.pipe(
			throttleTime(40),
			takeUntil(onMouseUp$),
		);
	}
	),
	mergeAll(),
);

startPaint$.subscribe({
	next: event => {
		const positions = getCanvasPosition(event);

		paint.draw(positions.x, positions.y);
	}
});

Marcelo Arias

teacher•

✏️ Ahora implementaremos takeUntil con un observable onMouseUp$ que indique cuando el usuario haya dejado de presionar el mouse. Con esa señal podemos completar el observable y completar el dibujo.

📁 Puedes ver el código de esta clase en el repositorio.

import { fromEvent, map, mergeAll, Observable, takeUntil, throttleTime } from "rxjs";

const canvas = document.querySelector("#canvas") as HTMLCanvasElement;

interface Coodinates {
	x: number,
	y: number
}

const getCanvasPosition = (positionEvent: MouseEvent): Coodinates => {

	return {
		x: positionEvent.clientX - canvas.offsetLeft,
		y: positionEvent.clientY - canvas.offsetTop,
	}
}

class Paint {

	constructor(
		public context: CanvasRenderingContext2D,
		public prevX?: number,
		public prevY?: number,
	){
		this.customizeBrush();
	}

	public updatePosition = (positionEvent: MouseEvent): void => {
		const positions = getCanvasPosition(positionEvent);

		this.prevX, this.prevY = positions.x, positions.y;
	}

	public beginDraw = (positionEvent: MouseEvent): void => {
		this.context.beginPath();
		this.updatePosition(positionEvent);
	}

	public draw = (x: number, y: number): void => {
		if (this.prevX && this.prevY) {
			this.context.moveTo(this.prevX, this.prevY);
		}

		this.context.lineTo(x, y);
		this.context.stroke();
	}

	public customizeBrush = (): void => {
		canvasContext.lineWidth = 5;
		canvasContext.strokeStyle = "white";
		canvasContext.lineJoin = "round";
		canvasContext.lineCap = "round";
	}
}

const canvasContext = canvas.getContext("2d") as CanvasRenderingContext2D;

let paint: Paint = new Paint(canvasContext);

const onMouseDown$ = fromEvent<MouseEvent>(canvas, "mousedown");
const onMouseUp$ = fromEvent<MouseEvent>(canvas, "mouseup");
const onMouseMove$ = fromEvent<MouseEvent>(canvas, "mousemove");

const startPaint$: Observable<MouseEvent> = onMouseDown$.pipe(
	map((event) => {
		paint.beginDraw(event);

		return onMouseMove$.pipe(
			throttleTime(40),
			takeUntil(onMouseUp$),
		);
	}
	),
	mergeAll(),
);

startPaint$.subscribe({
	next: event => {
		const positions = getCanvasPosition(event);

		paint.draw(positions.x, positions.y);
	}
});

Aplicación de TakeUntil en PlatziBoard.

Fundamentos de programación reactiva

¿Por qué deberías aprender programación reactiva con RxJS?

La teoría de la programación reactiva

Introducción a la librería RxJS

Extensiones Reactivas

La idea de la reactividad

Diagrama de canicas

Generación de Observables

Creación de un Observable

Introducción al Proyecto PlatziWordle

Observables: fromEvent

Aplicación de fromEvent en PlatziWordle

Observables: Subject

Aplicación de Subject en PlatziWordle

Observables: from y of

Observables: interval y time

Finalización del Proyecto PlatziWordle

Transformación con Operadores

Introducción al Proyecto PlatziBoard

La idea de un Operador

Operadores: map, reduce y filter

Aplicación de map en PlatziBoard

Operadores de distinción

Operadores de tiempo

Operadores: mergeAll, mergeMap

Aplicación de mergeAll en PlatziBoard

Operadores: takeUntil

Aplicación de TakeUntil en PlatziBoard.

Operadores: pluck

Operadores: startWith, endWith

Finalización del Proyecto PlatziBoard

PlatziWordle con opción de reinicio

Manejo de errores

Manejo de errores en RxJS

Peticiones HTTP con RxJS

ajax

fromFetch

Recomendaciones y conclusión

Documentación de RxJS

Programación Reactiva con RxJS: Fundamentos y Operadores

Recomendaciones y futuro de RxJS

Bonus

Implementación de PlatziBoard en React

Despedida

Próximos pasos con RxJS