import { getDiamondPoints } from "."; import type { Curve, LineSegment } from "../../math"; import { curve, lineSegment, pointFrom, rectangle, type GlobalPoint, type LocalPoint, } from "../../math"; import { getCornerRadius } from "../shapes"; import type { ExcalidrawDiamondElement, ExcalidrawRectanguloidElement, } from "./types"; /** * Get the building components of a rectanguloid element in the form of * line segments and curves. * * @param element Target rectanguloid element * @param offset Optional offset to expand the rectanguloid shape * @returns Tuple of line segments (0) and curves (1) */ export function deconstructRectanguloidElement< Point extends GlobalPoint | LocalPoint, >( element: ExcalidrawRectanguloidElement, offset: number = 0, ): [LineSegment[], Curve[]] { const r = rectangle( pointFrom(element.x - offset, element.y - offset), pointFrom( element.x + element.width + offset, element.y + element.height + offset, ), ); const roundness = getCornerRadius( Math.min(element.width, element.height), element, ); const top = lineSegment( pointFrom(r[0][0] + roundness, r[0][1]), pointFrom(r[1][0] - roundness, r[0][1]), ); const right = lineSegment( pointFrom(r[1][0], r[0][1] + roundness), pointFrom(r[1][0], r[1][1] - roundness), ); const bottom = lineSegment( pointFrom(r[0][0] + roundness, r[1][1]), pointFrom(r[1][0] - roundness, r[1][1]), ); const left = lineSegment( pointFrom(r[0][0], r[1][1] - roundness), pointFrom(r[0][0], r[0][1] + roundness), ); const sides = [top, right, bottom, left]; const corners = roundness > 0 ? [ curve( left[1], pointFrom( left[1][0] + (2 / 3) * (r[0][0] - left[1][0]), left[1][1] + (2 / 3) * (r[0][1] - left[1][1]), ), pointFrom( top[0][0] + (2 / 3) * (r[0][0] - top[0][0]), top[0][1] + (2 / 3) * (r[0][1] - top[0][1]), ), top[0], ), // TOP LEFT curve( top[1], pointFrom( top[1][0] + (2 / 3) * (r[1][0] - top[1][0]), top[1][1] + (2 / 3) * (r[0][1] - top[1][1]), ), pointFrom( right[0][0] + (2 / 3) * (r[1][0] - right[0][0]), right[0][1] + (2 / 3) * (r[0][1] - right[0][1]), ), right[0], ), // TOP RIGHT curve( right[1], pointFrom( right[1][0] + (2 / 3) * (r[1][0] - right[1][0]), right[1][1] + (2 / 3) * (r[1][1] - right[1][1]), ), pointFrom( bottom[1][0] + (2 / 3) * (r[1][0] - bottom[1][0]), bottom[1][1] + (2 / 3) * (r[1][1] - bottom[1][1]), ), bottom[1], ), // BOTTOM RIGHT curve( bottom[0], pointFrom( bottom[0][0] + (2 / 3) * (r[0][0] - bottom[0][0]), bottom[0][1] + (2 / 3) * (r[1][1] - bottom[0][1]), ), pointFrom( left[0][0] + (2 / 3) * (r[0][0] - left[0][0]), left[0][1] + (2 / 3) * (r[1][1] - left[0][1]), ), left[0], ), // BOTTOM LEFT ] : []; return [sides, corners]; } /** * Get the building components of a diamond element in the form of * line segments and curves as a tuple, in this order. * * @param element The element to deconstruct * @param offset An optional offset * @returns Tuple of line segments (0) and curves (1) */ export function deconstructDiamondElement( element: ExcalidrawDiamondElement, offset: number = 0, ): [LineSegment[], Curve[]] { const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] = getDiamondPoints(element); const verticalRadius = getCornerRadius(Math.abs(topX - leftX), element); const horizontalRadius = getCornerRadius(Math.abs(rightY - topY), element); const [top, right, bottom, left]: GlobalPoint[] = [ pointFrom(element.x + topX, element.y + topY - offset), pointFrom(element.x + rightX + offset, element.y + rightY), pointFrom(element.x + bottomX, element.y + bottomY + offset), pointFrom(element.x + leftX - offset, element.y + leftY), ]; // Create the line segment parts of the diamond // NOTE: Horizontal and vertical seems to be flipped here const topRight = lineSegment( pointFrom(top[0] + verticalRadius, top[1] + horizontalRadius), pointFrom(right[0] - verticalRadius, right[1] - horizontalRadius), ); const bottomRight = lineSegment( pointFrom(right[0] - verticalRadius, right[1] + horizontalRadius), pointFrom(bottom[0] + verticalRadius, bottom[1] - horizontalRadius), ); const bottomLeft = lineSegment( pointFrom(bottom[0] - verticalRadius, bottom[1] - horizontalRadius), pointFrom(left[0] + verticalRadius, left[1] + horizontalRadius), ); const topLeft = lineSegment( pointFrom(left[0] + verticalRadius, left[1] - horizontalRadius), pointFrom(top[0] - verticalRadius, top[1] + horizontalRadius), ); const curves = element.roundness ? [ curve( pointFrom( right[0] - verticalRadius, right[1] - horizontalRadius, ), right, right, pointFrom( right[0] - verticalRadius, right[1] + horizontalRadius, ), ), // RIGHT curve( pointFrom( bottom[0] + verticalRadius, bottom[1] - horizontalRadius, ), bottom, bottom, pointFrom( bottom[0] - verticalRadius, bottom[1] - horizontalRadius, ), ), // BOTTOM curve( pointFrom( left[0] + verticalRadius, left[1] + horizontalRadius, ), left, left, pointFrom( left[0] + verticalRadius, left[1] - horizontalRadius, ), ), // LEFT curve( pointFrom( top[0] - verticalRadius, top[1] + horizontalRadius, ), top, top, pointFrom( top[0] + verticalRadius, top[1] + horizontalRadius, ), ), // TOP ] : []; return [[topRight, bottomRight, bottomLeft, topLeft], curves]; }