jose-mdz

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

jose-mdz

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

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

jose-mdz

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} :

jose-mdz

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

jose-mdz

Orthogonal Connectors

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

How to Use

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

jose-mdz

Round Corner Path

[x] Tested

Usage

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

jose-mdz

Infra Test

WIP