Aplicación de TakeUntil en PlatziBoard.

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

Contenido del curso

Fundamentos de programación reactiva

Introducción a la librería RxJS

Generación de Observables

Transformación con Operadores

Manejo de errores

29
Manejo de errores en RxJS
07:44 min

Peticiones HTTP con RxJS

Recomendaciones y conclusión

Bonus

35
Implementación de PlatziBoard en React
02:03 min

Despedida

36
Próximos pasos con RxJS
01:07 min

Tomar examen

Comentarios

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