Jose Menendez jose-mdz

Orthogonal Connectors

This algorithm returns the points that form an orthogonal path between two rectangles.

// Define shapes
const shapeA = {left: 50,  top: 50, width: 100, height: 100};
const shapeB = {left: 200, top: 200, width: 50, height: 100};

[x] Tested

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const points = [
 {x: 100, y: 100},

WIP

	import resolveConfig from "tailwindcss/resolveConfig";
	import tailwindConfig from "../../tailwind.config";

	function Component() {
	const fullConfig = resolveConfig(tailwindConfig);
	const [horizontal, setHorizontal] = useState<boolean>(
	screen && screen.availWidth >= parseInt(fullConfig.theme.screens.sm),
	);

	// Do something with decision


	type ColorTuple = [number, number, number, number];
	type BitmapData = [Uint8ClampedArray, number];

	interface CheckerPatternParams {
	tileSize: number;
	colorA: ColorTuple;
	colorB: ColorTuple;
	}

	export function roundRect(
	context: CanvasRenderingContext2D,
	rectangle: Rectangle,
	radius: number \| {tl?: number, tr?: number, br?: number, bl?: number} = 5,
	fill: boolean,
	stroke = false,
	) {
	const [x, y, width, height] = rectangle.tuple;
	const rad = typeof radius === 'number' ?
	{tl: radius, tr: radius, br: radius, bl: radius} :

	const getIndex = (row: number, col: number, width: number) => width * row + col;
	const getRowCol = (index: number, width: number) => [Math.floor(index / width), index % width];