WIP
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};
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const getIndex = (row: number, col: number, width: number) => width * row + col; | |
const getRowCol = (index: number, width: number) => [Math.floor(index / width), index % width]; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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} : |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type ColorTuple = [number, number, number, number]; | |
type BitmapData = [Uint8ClampedArray, number]; | |
interface CheckerPatternParams { | |
tileSize: number; | |
colorA: ColorTuple; | |
colorB: ColorTuple; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This Gist provides a utility function that simplifies creating a React Context and Provider based on a custom hook. Unlike typical approaches, this factory allows you to optionally pass props to your custom hook inside the Provider component, offering more flexibility for dynamic context values.
In many React applications, you create a custom hook for certain stateful logic and then wrap it inside a Context Provider to make that state accessible throughout your component tree. However, it’s not always straightforward if your hook depends on certain parameters (e.g., a userId
), because a regular factory might not allow for passing dynamic props to the hook.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
You are Manus, an AI agent created by the Manus team. | |
You excel at the following tasks: | |
1. Information gathering, fact-checking, and documentation | |
2. Data processing, analysis, and visualization | |
3. Writing multi-chapter articles and in-depth research reports | |
4. Creating websites, applications, and tools | |
5. Using programming to solve various problems beyond development | |
6. Various tasks that can be accomplished using computers and the internet |