((acc, shape) => [...acc, ...TLDR.flattenShape(data, shape)], [])\n }\n\n static getTopChildIndex = (data: TDSnapshot, pageId: string): number => {\n const shapes = TLDR.getShapes(data, pageId)\n return shapes.length === 0\n ? 1\n : shapes\n .filter((shape) => shape.parentId === pageId)\n .sort((a, b) => b.childIndex - a.childIndex)[0].childIndex + 1\n }\n\n /* -------------------------------------------------- */\n /* Text */\n /* -------------------------------------------------- */\n\n static fixNewLines = /\\r?\\n|\\r/g\n\n static normalizeText(text: string) {\n return text\n .replace(TLDR.fixNewLines, '\\n')\n .split('\\n')\n .map((x) => x || ' ')\n .join('\\n')\n }\n\n /* -------------------------------------------------- */\n /* Assertions */\n /* -------------------------------------------------- */\n\n static assertShapeHasProperty(\n shape: TDShape,\n prop: P\n ): asserts shape is ShapesWithProp
{\n if (shape[prop] === undefined) {\n throw new Error()\n }\n }\n\n static warn(e: any) {\n if (isDev) {\n console.warn(e)\n }\n }\n static error(e: any) {\n if (isDev) {\n console.error(e)\n }\n }\n\n /* -------------------------------------------------- */\n /* Export */\n /* -------------------------------------------------- */\n\n static getSvgString(svg: SVGElement, scale = 1) {\n const clone = svg.cloneNode(true) as SVGGraphicsElement\n\n svg.setAttribute('width', +svg.getAttribute('width')! * scale + '')\n svg.setAttribute('height', +svg.getAttribute('height')! * scale + '')\n\n return new XMLSerializer()\n .serializeToString(clone)\n .replaceAll('
', '')\n .replaceAll(/((\\s|\")[0-9]*\\.[0-9]{2})([0-9]*)(\\b|\"|\\))/g, '$1')\n }\n\n static getSvgAsDataUrl(svg: SVGElement, scale = 1) {\n const svgString = TLDR.getSvgString(svg, scale)\n\n const base64SVG = window.btoa(unescape(svgString))\n\n return `data:image/svg+xml;base64,${base64SVG}`\n }\n\n static async getImageForSvg(\n svg: SVGElement,\n type: Exclude = TDExportType.PNG,\n opts = {} as Partial<{\n scale: number\n quality: number\n }>\n ) {\n const { scale = 2, quality = 1 } = opts\n\n const svgString = TLDR.getSvgString(svg, scale)\n\n const width = +svg.getAttribute('width')!\n const height = +svg.getAttribute('height')!\n\n if (!svgString) return\n\n const canvas = await new Promise((resolve) => {\n const image = new Image()\n\n image.crossOrigin = 'anonymous'\n\n const base64SVG = window.btoa(unescape(encodeURIComponent(svgString)))\n\n const dataUrl = `data:image/svg+xml;base64,${base64SVG}`\n\n image.onload = () => {\n const canvas = document.createElement('canvas') as HTMLCanvasElement\n const context = canvas.getContext('2d')!\n\n canvas.width = width\n canvas.height = height\n\n context.drawImage(image, 0, 0, width, height)\n\n URL.revokeObjectURL(dataUrl)\n\n resolve(canvas)\n }\n\n image.onerror = () => {\n console.warn('Could not convert that SVG to an image.')\n }\n\n image.src = dataUrl\n })\n\n const blob = await new Promise((resolve) =>\n canvas.toBlob((blob) => resolve(blob!), 'image/' + type, quality)\n )\n\n return blob\n }\n}\n", "import * as React from 'react'\nimport { Utils, SVGContainer } from '@tldraw/core'\nimport { RectangleShape, DashStyle, TDShapeType, TDMeta } from '~types'\nimport { GHOSTED_OPACITY, LABEL_POINT } from '~constants'\nimport { TDShapeUtil } from '../TDShapeUtil'\nimport {\n defaultStyle,\n getShapeStyle,\n getBoundsRectangle,\n transformRectangle,\n getFontStyle,\n transformSingleRectangle,\n} from '~state/shapes/shared'\nimport { TextLabel } from '../shared/TextLabel'\nimport { getRectangleIndicatorPathTDSnapshot } from './rectangleHelpers'\nimport { DrawRectangle } from './components/DrawRectangle'\nimport { DashedRectangle } from './components/DashedRectangle'\nimport { BindingIndicator } from './components/BindingIndicator'\nimport { styled } from '~styles'\n\ntype T = RectangleShape\ntype E = HTMLDivElement\n\nexport class RectangleUtil extends TDShapeUtil {\n type = TDShapeType.Rectangle as const\n\n canBind = true\n\n canClone = true\n\n canEdit = true\n\n getShape = (props: Partial): T => {\n return Utils.deepMerge(\n {\n id: 'id',\n type: TDShapeType.Rectangle,\n name: 'Rectangle',\n parentId: 'page',\n childIndex: 1,\n point: [0, 0],\n size: [1, 1],\n rotation: 0,\n style: defaultStyle,\n label: '',\n labelPoint: [0.5, 0.5],\n },\n props\n )\n }\n\n Component = TDShapeUtil.Component(\n (\n {\n shape,\n isEditing,\n isBinding,\n isSelected,\n isGhost,\n meta,\n bounds,\n events,\n onShapeBlur,\n onShapeChange,\n },\n ref\n ) => {\n const { id, size, style, label = '', labelPoint = LABEL_POINT } = shape\n const font = getFontStyle(style)\n const styles = getShapeStyle(style, meta.isDarkMode)\n const Component = style.dash === DashStyle.Draw ? DrawRectangle : DashedRectangle\n const handleLabelChange = React.useCallback(\n (label: string) => onShapeChange?.({ id, label }),\n [onShapeChange]\n )\n return (\n \n \n \n {isBinding && }\n \n \n \n )\n }\n )\n\n Indicator = TDShapeUtil.Indicator(({ shape }) => {\n const { id, style, size } = shape\n\n const styles = getShapeStyle(style, false)\n const sw = styles.strokeWidth\n\n if (style.dash === DashStyle.Draw) {\n return \n }\n\n return (\n \n )\n })\n\n getBounds = (shape: T) => {\n return getBoundsRectangle(shape, this.boundsCache)\n }\n\n shouldRender = (prev: T, next: T) => {\n return next.size !== prev.size || next.style !== prev.style || next.label !== prev.label\n }\n\n transform = transformRectangle\n\n transformSingle = transformSingleRectangle\n}\n\nconst FullWrapper = styled('div', { width: '100%', height: '100%' })\n", "/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { Utils, TLShapeUtil } from '@tldraw/core'\nimport type { TLPointerInfo, TLBounds } from '@tldraw/core'\nimport {\n intersectLineSegmentBounds,\n intersectLineSegmentPolyline,\n intersectRayBounds,\n} from '@tldraw/intersect'\nimport { Vec } from '@tldraw/vec'\nimport type { ShapesWithProp, TDBinding, TDMeta, TDShape, TransformInfo } from '~types'\nimport * as React from 'react'\nimport { BINDING_DISTANCE } from '~constants'\nimport { getTextSvgElement } from './shared/getTextSvgElement'\nimport { getTextLabelSize } from './shared/getTextSize'\nimport { getFontStyle, getShapeStyle } from './shared'\n\nexport abstract class TDShapeUtil extends TLShapeUtil<\n T,\n E,\n TDMeta\n> {\n abstract type: T['type']\n\n canBind = false\n\n canEdit = false\n\n canClone = false\n\n isAspectRatioLocked = false\n\n hideResizeHandles = false\n\n bindingDistance = BINDING_DISTANCE\n\n abstract getShape: (props: Partial) => T\n\n hitTestPoint = (shape: T, point: number[]): boolean => {\n return Utils.pointInBounds(point, this.getRotatedBounds(shape))\n }\n\n hitTestLineSegment = (shape: T, A: number[], B: number[]): boolean => {\n const box = Utils.getBoundsFromPoints([A, B])\n const bounds = this.getBounds(shape)\n\n return Utils.boundsContain(bounds, box) || shape.rotation\n ? intersectLineSegmentPolyline(A, B, Utils.getRotatedCorners(this.getBounds(shape)))\n .didIntersect\n : intersectLineSegmentBounds(A, B, this.getBounds(shape)).length > 0\n }\n\n create = (props: { id: string } & Partial) => {\n this.refMap.set(props.id, React.createRef())\n return this.getShape(props)\n }\n\n getCenter = (shape: T) => {\n return Utils.getBoundsCenter(this.getBounds(shape))\n }\n\n getExpandedBounds = (shape: T) => {\n return Utils.expandBounds(this.getBounds(shape), this.bindingDistance)\n }\n\n getBindingPoint = (\n shape: T,\n fromShape: K,\n point: number[],\n origin: number[],\n direction: number[],\n bindAnywhere: boolean\n ) => {\n // Algorithm time! We need to find the binding point (a normalized point inside of the shape, or around the shape, where the arrow will point to) and the distance from the binding shape to the anchor.\n\n const bounds = this.getBounds(shape)\n const expandedBounds = this.getExpandedBounds(shape)\n\n // The point must be inside of the expanded bounding box\n if (!Utils.pointInBounds(point, expandedBounds)) return\n\n const intersections = intersectRayBounds(origin, direction, expandedBounds)\n .filter((int) => int.didIntersect)\n .map((int) => int.points[0])\n\n if (!intersections.length) return\n\n // The center of the shape\n const center = this.getCenter(shape)\n\n // Find furthest intersection between ray from origin through point and expanded bounds. TODO: What if the shape has a curve? In that case, should we intersect the circle-from-three-points instead?\n const intersection = intersections.sort((a, b) => Vec.dist(b, origin) - Vec.dist(a, origin))[0]\n\n // The point between the handle and the intersection\n const middlePoint = Vec.med(point, intersection)\n\n // The anchor is the point in the shape where the arrow will be pointing\n let anchor: number[]\n\n // The distance is the distance from the anchor to the handle\n let distance: number\n\n if (bindAnywhere) {\n // If the user is indicating that they want to bind inside of the shape, we just use the handle's point\n anchor = Vec.dist(point, center) < BINDING_DISTANCE / 2 ? center : point\n distance = 0\n } else {\n if (Vec.distanceToLineSegment(point, middlePoint, center) < BINDING_DISTANCE / 2) {\n // If the line segment would pass near to the center, snap the anchor the center point\n anchor = center\n } else {\n // Otherwise, the anchor is the middle point between the handle and the intersection\n anchor = middlePoint\n }\n\n if (Utils.pointInBounds(point, bounds)) {\n // If the point is inside of the shape, use the shape's binding distance\n\n distance = this.bindingDistance\n } else {\n // Otherwise, use the actual distance from the handle point to nearest edge\n distance = Math.max(\n this.bindingDistance,\n Utils.getBoundsSides(bounds)\n .map((side) => Vec.distanceToLineSegment(side[1][0], side[1][1], point))\n .sort((a, b) => a - b)[0]\n )\n }\n }\n\n // The binding point is a normalized point indicating the position of the anchor.\n // An anchor at the middle of the shape would be (0.5, 0.5). When the shape's bounds\n // changes, we will re-recalculate the actual anchor point by multiplying the\n // normalized point by the shape's new bounds.\n const bindingPoint = Vec.divV(Vec.sub(anchor, [expandedBounds.minX, expandedBounds.minY]), [\n expandedBounds.width,\n expandedBounds.height,\n ])\n\n return {\n point: Vec.clampV(bindingPoint, 0, 1),\n distance,\n }\n }\n\n mutate = (shape: T, props: Partial): Partial => {\n return props\n }\n\n transform = (shape: T, bounds: TLBounds, info: TransformInfo): Partial => {\n return { ...shape, point: [bounds.minX, bounds.minY] }\n }\n\n transformSingle = (shape: T, bounds: TLBounds, info: TransformInfo): Partial | void => {\n return this.transform(shape, bounds, info)\n }\n\n updateChildren?: (shape: T, children: K[]) => Partial[] | void\n\n onChildrenChange?: (shape: T, children: TDShape[]) => Partial | void\n\n onHandleChange?: (shape: T, handles: Partial) => Partial | void\n\n onRightPointHandle?: (\n shape: T,\n handles: Partial,\n info: Partial\n ) => Partial | void\n\n onDoubleClickHandle?: (\n shape: T,\n handles: Partial,\n info: Partial\n ) => Partial | void\n\n onDoubleClickBoundsHandle?: (shape: T) => Partial | void\n\n onSessionComplete?: (shape: T) => Partial | void\n\n getSvgElement = (shape: T, isDarkMode: boolean): SVGElement | void => {\n const elm = document.getElementById(shape.id + '_svg')?.cloneNode(true) as SVGElement\n if (!elm) return // possibly in test mode\n if ('label' in shape && (shape as any).label) {\n const s = shape as TDShape & { label: string }\n const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')\n const bounds = this.getBounds(shape)\n const labelElm = getTextSvgElement(s['label'], shape.style, bounds)\n labelElm.setAttribute('fill', getShapeStyle(shape.style, isDarkMode).stroke)\n const font = getFontStyle(shape.style)\n const size = getTextLabelSize(s['label'], font)\n labelElm.setAttribute('transform-origin', 'top left')\n labelElm.setAttribute(\n 'transform',\n `translate(${bounds.width / 2}, ${(bounds.height - size[1]) / 2})`\n )\n g.setAttribute('text-align', 'center')\n g.setAttribute('text-anchor', 'middle')\n g.appendChild(elm)\n g.appendChild(labelElm)\n return g\n }\n return elm\n }\n}\n", "import { Utils } from '@tldraw/core'\nimport { Theme, ColorStyle, DashStyle, ShapeStyles, SizeStyle, FontStyle, AlignStyle } from '~types'\n\nconst canvasLight = '#fafafa'\n\nconst canvasDark = '#343d45'\n\nconst colors = {\n [ColorStyle.White]: '#f0f1f3',\n [ColorStyle.LightGray]: '#c6cbd1',\n [ColorStyle.Gray]: '#788492',\n [ColorStyle.Black]: '#1d1d1d',\n [ColorStyle.Green]: '#36b24d',\n [ColorStyle.Cyan]: '#0e98ad',\n [ColorStyle.Blue]: '#1c7ed6',\n [ColorStyle.Indigo]: '#4263eb',\n [ColorStyle.Violet]: '#7746f1',\n [ColorStyle.Red]: '#ff2133',\n [ColorStyle.Orange]: '#ff9433',\n [ColorStyle.Yellow]: '#ffc936',\n}\n\nexport const stickyFills: Record> = {\n light: {\n ...(Object.fromEntries(\n Object.entries(colors).map(([k, v]) => [k, Utils.lerpColor(v, canvasLight, 0.45)])\n ) as Record),\n [ColorStyle.White]: '#ffffff',\n [ColorStyle.Black]: '#3d3d3d',\n },\n dark: {\n ...(Object.fromEntries(\n Object.entries(colors).map(([k, v]) => [\n k,\n Utils.lerpColor(Utils.lerpColor(v, '#999999', 0.3), canvasDark, 0.4),\n ])\n ) as Record),\n [ColorStyle.White]: '#1d1d1d',\n [ColorStyle.Black]: '#bbbbbb',\n },\n}\n\nexport const strokes: Record> = {\n light: {\n ...colors,\n [ColorStyle.White]: '#1d1d1d',\n },\n dark: {\n ...(Object.fromEntries(\n Object.entries(colors).map(([k, v]) => [k, Utils.lerpColor(v, canvasDark, 0.1)])\n ) as Record),\n [ColorStyle.White]: '#cecece',\n [ColorStyle.Black]: '#cecece',\n },\n}\n\nexport const fills: Record> = {\n light: {\n ...(Object.fromEntries(\n Object.entries(colors).map(([k, v]) => [k, Utils.lerpColor(v, canvasLight, 0.82)])\n ) as Record),\n [ColorStyle.White]: '#fefefe',\n },\n dark: {\n ...(Object.fromEntries(\n Object.entries(colors).map(([k, v]) => [k, Utils.lerpColor(v, canvasDark, 0.82)])\n ) as Record),\n [ColorStyle.White]: 'rgb(30,33,37)',\n [ColorStyle.Black]: '#1e1e1f',\n },\n}\n\nconst strokeWidths = {\n [SizeStyle.Small]: 2,\n [SizeStyle.Medium]: 3.5,\n [SizeStyle.Large]: 5,\n}\n\nconst fontSizes = {\n [SizeStyle.Small]: 28,\n [SizeStyle.Medium]: 48,\n [SizeStyle.Large]: 96,\n auto: 'auto',\n}\n\nconst fontFaces = {\n [FontStyle.Script]: '\"Caveat Brush\"',\n [FontStyle.Sans]: '\"Source Sans Pro\"',\n [FontStyle.Serif]: '\"Crimson Pro\"',\n [FontStyle.Mono]: '\"Source Code Pro\"',\n}\n\nconst fontSizeModifiers = {\n [FontStyle.Script]: 1,\n [FontStyle.Sans]: 1,\n [FontStyle.Serif]: 1,\n [FontStyle.Mono]: 1,\n}\n\nconst stickyFontSizes = {\n [SizeStyle.Small]: 24,\n [SizeStyle.Medium]: 36,\n [SizeStyle.Large]: 48,\n auto: 'auto',\n}\n\nexport function getStrokeWidth(size: SizeStyle): number {\n return strokeWidths[size]\n}\n\nexport function getFontSize(size: SizeStyle, fontStyle: FontStyle = FontStyle.Script): number {\n return fontSizes[size] * fontSizeModifiers[fontStyle]\n}\n\nexport function getFontFace(font: FontStyle = FontStyle.Script): string {\n return fontFaces[font]\n}\n\nexport function getStickyFontSize(size: SizeStyle): number {\n return stickyFontSizes[size]\n}\n\nexport function getFontStyle(style: ShapeStyles): string {\n const fontSize = getFontSize(style.size, style.font)\n const fontFace = getFontFace(style.font)\n const { scale = 1 } = style\n\n return `${fontSize * scale}px/1 ${fontFace}`\n}\n\nexport function getStickyFontStyle(style: ShapeStyles): string {\n const fontSize = getStickyFontSize(style.size)\n const fontFace = getFontFace(style.font)\n const { scale = 1 } = style\n\n return `${fontSize * scale}px/1 ${fontFace}`\n}\n\nexport function getStickyShapeStyle(style: ShapeStyles, isDarkMode = false) {\n const { color } = style\n\n const theme: Theme = isDarkMode ? 'dark' : 'light'\n const adjustedColor =\n color === ColorStyle.White || color === ColorStyle.Black ? ColorStyle.Yellow : color\n\n return {\n fill: stickyFills[theme][adjustedColor],\n stroke: strokes[theme][adjustedColor],\n color: isDarkMode ? '#1d1d1d' : '#0d0d0d',\n }\n}\n\nexport function getShapeStyle(\n style: ShapeStyles,\n isDarkMode?: boolean\n): {\n stroke: string\n fill: string\n strokeWidth: number\n} {\n const { color, size, isFilled } = style\n\n const strokeWidth = getStrokeWidth(size)\n\n const theme: Theme = isDarkMode ? 'dark' : 'light'\n\n return {\n stroke: strokes[theme][color],\n fill: isFilled ? fills[theme][color] : 'none',\n strokeWidth,\n }\n}\n\nexport const defaultStyle: ShapeStyles = {\n color: ColorStyle.Black,\n size: SizeStyle.Small,\n isFilled: false,\n dash: DashStyle.Draw,\n scale: 1,\n}\n\nexport const defaultTextStyle: ShapeStyles = {\n ...defaultStyle,\n font: FontStyle.Script,\n textAlign: AlignStyle.Middle,\n}\n", "import { AlignStyle } from '~types'\n\nconst ALIGN_VALUES = {\n [AlignStyle.Start]: 'left',\n [AlignStyle.Middle]: 'center',\n [AlignStyle.End]: 'right',\n [AlignStyle.Justify]: 'justify',\n} as const\n\nexport function getTextAlign(alignStyle: AlignStyle = AlignStyle.Start) {\n return ALIGN_VALUES[alignStyle]\n}\n", "import type { TLBounds } from '@tldraw/core'\nimport { AlignStyle, ShapeStyles } from '~types'\nimport { getFontFace, getFontSize } from './shape-styles'\nimport { getTextAlign } from './getTextAlign'\nimport { LINE_HEIGHT } from '~constants'\n\nexport function getTextSvgElement(text: string, style: ShapeStyles, bounds: TLBounds) {\n const fontSize = getFontSize(style.size, style.font)\n const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')\n const scale = style.scale ?? 1\n\n const textLines = text.split('\\n').map((line, i) => {\n const textElm = document.createElementNS('http://www.w3.org/2000/svg', 'text')\n textElm.textContent = line\n textElm.setAttribute('y', fontSize * (0.5 + i * LINE_HEIGHT) + '')\n textElm.setAttribute('letter-spacing', fontSize * -0.03 + '')\n textElm.setAttribute('font-size', fontSize + 'px')\n textElm.setAttribute('font-family', getFontFace(style.font).slice(1, -1))\n textElm.setAttribute('text-align', getTextAlign(style.textAlign))\n textElm.setAttribute('text-align', getTextAlign(style.textAlign))\n textElm.setAttribute('alignment-baseline', 'central')\n if (style.scale !== 1) {\n textElm.setAttribute('transform', `scale(${style.scale})`)\n }\n g.appendChild(textElm)\n\n return textElm\n })\n\n switch (style.textAlign) {\n case AlignStyle.Middle: {\n g.setAttribute('text-align', 'center')\n g.setAttribute('text-anchor', 'middle')\n textLines.forEach((textElm) => {\n textElm.setAttribute('x', bounds.width / 2 / scale + '')\n })\n break\n }\n case AlignStyle.End: {\n g.setAttribute('text-align', 'right')\n g.setAttribute('text-anchor', 'end')\n textLines.forEach((textElm) => textElm.setAttribute('x', bounds.width / scale + ''))\n break\n }\n case AlignStyle.Start: {\n g.setAttribute('text-align', 'left')\n g.setAttribute('text-anchor', 'start')\n }\n }\n\n return g\n}\n", "import { LETTER_SPACING } from '~constants'\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nlet melm: any\n\nfunction getMeasurementDiv() {\n // A div used for measurement\n document.getElementById('__textLabelMeasure')?.remove()\n\n const pre = document.createElement('pre')\n pre.id = '__textLabelMeasure'\n\n Object.assign(pre.style, {\n whiteSpace: 'pre',\n width: 'auto',\n border: '1px solid transparent',\n padding: '4px',\n margin: '0px',\n letterSpacing: LETTER_SPACING,\n opacity: '0',\n position: 'absolute',\n top: '-500px',\n left: '0px',\n zIndex: '9999',\n pointerEvents: 'none',\n userSelect: 'none',\n alignmentBaseline: 'mathematical',\n dominantBaseline: 'mathematical',\n })\n\n pre.tabIndex = -1\n\n document.body.appendChild(pre)\n return pre\n}\n\nif (typeof window !== 'undefined') {\n melm = getMeasurementDiv()\n}\n\nlet prevText = ''\nlet prevFont = ''\nlet prevSize = [0, 0]\n\nexport function clearPrevSize() {\n prevText = ''\n}\n\nexport function getTextLabelSize(text: string, font: string) {\n if (!text) {\n return [16, 32]\n }\n\n if (!melm) {\n // We're in SSR\n return [10, 10]\n }\n\n if (!melm.parent) document.body.appendChild(melm)\n\n if (text === prevText && font === prevFont) {\n return prevSize\n }\n\n prevText = text\n prevFont = font\n\n melm.textContent = text\n melm.style.font = font\n\n // In tests, offsetWidth and offsetHeight will be 0\n const width = melm.offsetWidth || 1\n const height = melm.offsetHeight || 1\n\n prevSize = [width, height]\n return prevSize\n}\n", "import { TLBounds, TLShape, Utils } from '@tldraw/core'\n\n/**\n * Find the bounds of a rectangular shape.\n * @param shape\n * @param boundsCache\n */\nexport function getBoundsRectangle(\n shape: T,\n boundsCache: WeakMap\n) {\n const bounds = Utils.getFromCache(boundsCache, shape, () => {\n const [width, height] = shape.size\n return {\n minX: 0,\n maxX: width,\n minY: 0,\n maxY: height,\n width,\n height,\n }\n })\n\n return Utils.translateBounds(bounds, shape.point)\n}\n", "import type { TLBounds, TLShape, TLTransformInfo } from '@tldraw/core'\nimport Vec from '@tldraw/vec'\n\n/**\n * Transform a rectangular shape.\n * @param shape\n * @param bounds\n * @param param2\n */\nexport function transformRectangle(\n shape: T,\n bounds: TLBounds,\n { initialShape, transformOrigin, scaleX, scaleY }: TLTransformInfo\n) {\n if (shape.rotation || initialShape.isAspectRatioLocked) {\n const size = Vec.toFixed(\n Vec.mul(initialShape.size, Math.min(Math.abs(scaleX), Math.abs(scaleY)))\n )\n const point = Vec.toFixed([\n bounds.minX +\n (bounds.width - shape.size[0]) * (scaleX < 0 ? 1 - transformOrigin[0] : transformOrigin[0]),\n bounds.minY +\n (bounds.height - shape.size[1]) *\n (scaleY < 0 ? 1 - transformOrigin[1] : transformOrigin[1]),\n ])\n const rotation =\n (scaleX < 0 && scaleY >= 0) || (scaleY < 0 && scaleX >= 0)\n ? initialShape.rotation\n ? -initialShape.rotation\n : 0\n : initialShape.rotation\n return {\n size,\n point,\n rotation,\n }\n } else {\n return {\n point: Vec.toFixed([bounds.minX, bounds.minY]),\n size: Vec.toFixed([bounds.width, bounds.height]),\n }\n }\n}\n", "import type { TLBounds, TLShape } from '@tldraw/core'\nimport Vec from '@tldraw/vec'\n\n/**\n * Transform a single rectangular shape.\n * @param shape\n * @param bounds\n */\nexport function transformSingleRectangle(\n shape: T,\n bounds: TLBounds\n) {\n return {\n size: Vec.toFixed([bounds.width, bounds.height]),\n point: Vec.toFixed([bounds.minX, bounds.minY]),\n }\n}\n", "// Adapted (mostly copied) the work of https://github.com/fregante\n// Copyright (c) Federico Brigante (bfred.it)\n\ntype ReplacerCallback = (substring: string, ...args: unknown[]) => string\n\nconst INDENT = ' '\n\nexport class TextAreaUtils {\n static insertTextFirefox(field: HTMLTextAreaElement | HTMLInputElement, text: string): void {\n // Found on https://www.everythingfrontend.com/posts/insert-text-into-textarea-at-cursor-position.html \uD83C\uDF88\n field.setRangeText(\n text,\n field.selectionStart || 0,\n field.selectionEnd || 0,\n 'end' // Without this, the cursor is either at the beginning or `text` remains selected\n )\n\n field.dispatchEvent(\n new InputEvent('input', {\n data: text,\n inputType: 'insertText',\n isComposing: false, // TODO: fix @types/jsdom, this shouldn't be required\n })\n )\n }\n\n /** Inserts `text` at the cursor\u2019s position, replacing any selection, with **undo** support and by firing the `input` event. */\n static insert(field: HTMLTextAreaElement | HTMLInputElement, text: string): void {\n const document = field.ownerDocument\n const initialFocus = document.activeElement\n if (initialFocus !== field) {\n field.focus()\n }\n\n if (!document.execCommand('insertText', false, text)) {\n TextAreaUtils.insertTextFirefox(field, text)\n }\n\n if (initialFocus === document.body) {\n field.blur()\n } else if (initialFocus instanceof HTMLElement && initialFocus !== field) {\n initialFocus.focus()\n }\n }\n\n /** Replaces the entire content, equivalent to `field.value = text` but with **undo** support and by firing the `input` event. */\n static set(field: HTMLTextAreaElement | HTMLInputElement, text: string): void {\n field.select()\n TextAreaUtils.insert(field, text)\n }\n\n /** Get the selected text in a field or an empty string if nothing is selected. */\n static getSelection(field: HTMLTextAreaElement | HTMLInputElement): string {\n const { selectionStart, selectionEnd } = field\n return field.value.slice(\n selectionStart ? selectionStart : undefined,\n selectionEnd ? selectionEnd : undefined\n )\n }\n\n /** Adds the `wrappingText` before and after field\u2019s selection (or cursor). If `endWrappingText` is provided, it will be used instead of `wrappingText` at on the right. */\n static wrapSelection(\n field: HTMLTextAreaElement | HTMLInputElement,\n wrap: string,\n wrapEnd?: string\n ): void {\n const { selectionStart, selectionEnd } = field\n const selection = TextAreaUtils.getSelection(field)\n TextAreaUtils.insert(field, wrap + selection + (wrapEnd ?? wrap))\n\n // Restore the selection around the previously-selected text\n field.selectionStart = (selectionStart || 0) + wrap.length\n field.selectionEnd = (selectionEnd || 0) + wrap.length\n }\n\n /** Finds and replaces strings and regex in the field\u2019s value, like `field.value = field.value.replace()` but better */\n static replace(\n field: HTMLTextAreaElement | HTMLInputElement,\n searchValue: string | RegExp,\n replacer: string | ReplacerCallback\n ): void {\n /** Remembers how much each match offset should be adjusted */\n let drift = 0\n\n field.value.replace(searchValue, (...args): string => {\n // Select current match to replace it later\n const matchStart = drift + (args[args.length - 2] as number)\n const matchLength = args[0].length\n field.selectionStart = matchStart\n field.selectionEnd = matchStart + matchLength\n\n const replacement = typeof replacer === 'string' ? replacer : replacer(...args)\n TextAreaUtils.insert(field, replacement)\n\n // Select replacement. Without this, the cursor would be after the replacement\n field.selectionStart = matchStart\n drift += replacement.length - matchLength\n return replacement\n })\n }\n\n static findLineEnd(value: string, currentEnd: number): number {\n // Go to the beginning of the last line\n const lastLineStart = value.lastIndexOf('\\n', currentEnd - 1) + 1\n\n // There's nothing to unindent after the last cursor, so leave it as is\n if (value.charAt(lastLineStart) !== '\\t') {\n return currentEnd\n }\n\n return lastLineStart + 1 // Include the first character, which will be a tab\n }\n\n static indent(element: HTMLTextAreaElement): void {\n const { selectionStart, selectionEnd, value } = element\n const selectedContrast = value.slice(selectionStart, selectionEnd)\n // The first line should be indented, even if it starts with `\\n`\n // The last line should only be indented if includes any character after `\\n`\n const lineBreakCount = /\\n/g.exec(selectedContrast)?.length\n\n if (lineBreakCount && lineBreakCount > 0) {\n // Select full first line to replace everything at once\n const firstLineStart = value.lastIndexOf('\\n', selectionStart - 1) + 1\n\n const newSelection = element.value.slice(firstLineStart, selectionEnd - 1)\n const indentedText = newSelection.replace(\n /^|\\n/g, // Match all line starts\n `$&${INDENT}`\n )\n const replacementsCount = indentedText.length - newSelection.length\n\n // Replace newSelection with indentedText\n element.setSelectionRange(firstLineStart, selectionEnd - 1)\n TextAreaUtils.insert(element, indentedText)\n\n // Restore selection position, including the indentation\n element.setSelectionRange(selectionStart + 1, selectionEnd + replacementsCount)\n } else {\n TextAreaUtils.insert(element, INDENT)\n }\n }\n\n // The first line should always be unindented\n // The last line should only be unindented if the selection includes any characters after `\\n`\n static unindent(element: HTMLTextAreaElement): void {\n const { selectionStart, selectionEnd, value } = element\n\n // Select the whole first line because it might contain \\t\n const firstLineStart = value.lastIndexOf('\\n', selectionStart - 1) + 1\n const minimumSelectionEnd = TextAreaUtils.findLineEnd(value, selectionEnd)\n\n const newSelection = element.value.slice(firstLineStart, minimumSelectionEnd)\n const indentedText = newSelection.replace(/(^|\\n)(\\t| {1,2})/g, '$1')\n const replacementsCount = newSelection.length - indentedText.length\n\n // Replace newSelection with indentedText\n element.setSelectionRange(firstLineStart, minimumSelectionEnd)\n TextAreaUtils.insert(element, indentedText)\n\n // Restore selection position, including the indentation\n const firstLineIndentation = /\\t| {1,2}/.exec(value.slice(firstLineStart, selectionStart))\n\n const difference = firstLineIndentation ? firstLineIndentation[0].length : 0\n\n const newSelectionStart = selectionStart - difference\n element.setSelectionRange(\n selectionStart - difference,\n Math.max(newSelectionStart, selectionEnd - replacementsCount)\n )\n }\n}\n", "import * as React from 'react'\nimport { stopPropagation } from '~components/stopPropagation'\nimport { GHOSTED_OPACITY, LETTER_SPACING } from '~constants'\nimport { TLDR } from '~state/TLDR'\nimport { styled } from '~styles'\nimport { getTextLabelSize } from './getTextSize'\nimport { TextAreaUtils } from './TextAreaUtils'\n\nexport interface TextLabelProps {\n font: string\n text: string\n color: string\n onBlur?: () => void\n onChange: (text: string) => void\n offsetY?: number\n offsetX?: number\n scale?: number\n isEditing?: boolean\n}\n\nexport const TextLabel = React.memo(function TextLabel({\n font,\n text,\n color,\n offsetX = 0,\n offsetY = 0,\n scale = 1,\n isEditing = false,\n onBlur,\n onChange,\n}: TextLabelProps) {\n const rInput = React.useRef(null)\n const rIsMounted = React.useRef(false)\n\n const handleChange = React.useCallback(\n (e: React.ChangeEvent) => {\n onChange(TLDR.normalizeText(e.currentTarget.value))\n },\n [onChange]\n )\n const handleKeyDown = React.useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.preventDefault()\n e.stopPropagation()\n onBlur?.()\n return\n }\n\n if (e.key === 'Tab' && text.length === 0) {\n e.preventDefault()\n return\n }\n\n if (!(e.key === 'Meta' || e.metaKey)) {\n e.stopPropagation()\n } else if (e.key === 'z' && e.metaKey) {\n if (e.shiftKey) {\n document.execCommand('redo', false)\n } else {\n document.execCommand('undo', false)\n }\n e.stopPropagation()\n e.preventDefault()\n return\n }\n\n if ((e.metaKey || e.ctrlKey) && e.key === '=') {\n e.preventDefault()\n }\n\n if (e.key === 'Tab') {\n e.preventDefault()\n if (e.shiftKey) {\n TextAreaUtils.unindent(e.currentTarget)\n } else {\n TextAreaUtils.indent(e.currentTarget)\n }\n\n onChange?.(TLDR.normalizeText(e.currentTarget.value))\n }\n },\n [onChange]\n )\n\n const handleBlur = React.useCallback(\n (e: React.FocusEvent) => {\n e.currentTarget.setSelectionRange(0, 0)\n onBlur?.()\n },\n [onBlur]\n )\n\n const handleFocus = React.useCallback(\n (e: React.FocusEvent) => {\n if (!isEditing) return\n if (!rIsMounted.current) return\n\n if (document.activeElement === e.currentTarget) {\n e.currentTarget.select()\n }\n },\n [isEditing]\n )\n\n const handlePointerDown = React.useCallback(\n (e: React.PointerEvent) => {\n if (isEditing) {\n e.stopPropagation()\n }\n },\n [isEditing]\n )\n\n React.useEffect(() => {\n if (isEditing) {\n requestAnimationFrame(() => {\n rIsMounted.current = true\n const elm = rInput.current\n if (elm) {\n elm.focus()\n elm.select()\n }\n })\n } else {\n onBlur?.()\n }\n }, [isEditing, onBlur])\n\n const rInnerWrapper = React.useRef(null)\n\n React.useLayoutEffect(() => {\n const elm = rInnerWrapper.current\n if (!elm) return\n const size = getTextLabelSize(text, font)\n elm.style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`\n elm.style.width = size[0] + 1 + 'px'\n elm.style.height = size[1] + 1 + 'px'\n }, [text, font, offsetY, offsetX, scale])\n\n return (\n \n \n {isEditing ? (\n \n ) : (\n text\n )}\n \n \n \n )\n})\n\nconst TextWrapper = styled('div', {\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'none',\n userSelect: 'none',\n variants: {\n isGhost: {\n false: { opacity: 1 },\n true: { transition: 'opacity .2s', opacity: GHOSTED_OPACITY },\n },\n },\n})\n\nconst commonTextWrapping = {\n whiteSpace: 'pre-wrap',\n overflowWrap: 'break-word',\n}\n\nconst InnerWrapper = styled('div', {\n position: 'absolute',\n padding: '4px',\n zIndex: 1,\n minHeight: 1,\n minWidth: 1,\n lineHeight: 1,\n letterSpacing: LETTER_SPACING,\n outline: 0,\n fontWeight: '500',\n textAlign: 'center',\n backfaceVisibility: 'hidden',\n userSelect: 'none',\n WebkitUserSelect: 'none',\n WebkitTouchCallout: 'none',\n variants: {\n hasText: {\n false: {\n pointerEvents: 'none',\n },\n true: {\n pointerEvents: 'all',\n },\n },\n isEditing: {\n false: {\n userSelect: 'none',\n },\n true: {\n background: '$boundsBg',\n userSelect: 'text',\n WebkitUserSelect: 'text',\n },\n },\n },\n ...commonTextWrapping,\n})\n\nconst TextArea = styled('textarea', {\n position: 'absolute',\n top: 0,\n left: 0,\n zIndex: 1,\n width: '100%',\n height: '100%',\n border: 'none',\n padding: '4px',\n resize: 'none',\n textAlign: 'inherit',\n minHeight: 'inherit',\n minWidth: 'inherit',\n lineHeight: 'inherit',\n letterSpacing: 'inherit',\n outline: 0,\n fontWeight: 'inherit',\n overflow: 'hidden',\n backfaceVisibility: 'hidden',\n display: 'inline-block',\n pointerEvents: 'all',\n background: '$boundsBg',\n userSelect: 'text',\n WebkitUserSelect: 'text',\n fontSmooth: 'always',\n WebkitFontSmoothing: 'subpixel-antialiased',\n MozOsxFontSmoothing: 'auto',\n ...commonTextWrapping,\n '&:focus': {\n outline: 'none',\n border: 'none',\n },\n})\n", "import type React from 'react'\n\nexport const stopPropagation = (e: KeyboardEvent | React.SyntheticEvent) =>\n e.stopPropagation()\n", "import { Utils } from '@tldraw/core'\nimport Vec from '@tldraw/vec'\nimport getStroke, { getStrokePoints } from 'perfect-freehand'\nimport type { ShapeStyles } from '~types'\nimport { getShapeStyle } from '../shared'\n\nfunction getRectangleDrawPoints(id: string, style: ShapeStyles, size: number[]) {\n const styles = getShapeStyle(style)\n\n const getRandom = Utils.rng(id)\n\n const sw = styles.strokeWidth\n\n // Dimensions\n const w = Math.max(0, size[0])\n const h = Math.max(0, size[1])\n\n // Random corner offsets\n const offsets = Array.from(Array(4)).map(() => {\n return [getRandom() * sw * 0.75, getRandom() * sw * 0.75]\n })\n\n // Corners\n const tl = Vec.add([sw / 2, sw / 2], offsets[0])\n const tr = Vec.add([w - sw / 2, sw / 2], offsets[1])\n const br = Vec.add([w - sw / 2, h - sw / 2], offsets[2])\n const bl = Vec.add([sw / 2, h - sw / 2], offsets[3])\n\n // Which side to start drawing first\n const rm = Math.round(Math.abs(getRandom() * 2 * 4))\n\n // Corner radii\n const rx = Math.min(w / 4, sw * 2)\n const ry = Math.min(h / 4, sw * 2)\n\n // Number of points per side\n const px = Math.max(8, Math.floor(w / 16))\n const py = Math.max(8, Math.floor(h / 16))\n\n // Inset each line by the corner radii and let the freehand algo\n // interpolate points for the corners.\n const lines = Utils.rotateArray(\n [\n Vec.pointsBetween(Vec.add(tl, [rx, 0]), Vec.sub(tr, [rx, 0]), px),\n Vec.pointsBetween(Vec.add(tr, [0, ry]), Vec.sub(br, [0, ry]), py),\n Vec.pointsBetween(Vec.sub(br, [rx, 0]), Vec.add(bl, [rx, 0]), px),\n Vec.pointsBetween(Vec.sub(bl, [0, ry]), Vec.add(tl, [0, ry]), py),\n ],\n rm\n )\n\n // For the final points, include the first half of the first line again,\n // so that the line wraps around and avoids ending on a sharp corner.\n // This has a bit of finesse and magic\u2014if you change the points between\n // function, then you'll likely need to change this one too.\n\n const points = [...lines.flat(), ...lines[0]].slice(\n 5,\n Math.floor((rm % 2 === 0 ? px : py) / -2) + 3\n )\n\n return {\n points,\n }\n}\n\nfunction getDrawStrokeInfo(id: string, style: ShapeStyles, size: number[]) {\n const { points } = getRectangleDrawPoints(id, style, size)\n const { strokeWidth } = getShapeStyle(style)\n const options = {\n size: strokeWidth,\n thinning: 0.65,\n streamline: 0.3,\n smoothing: 1,\n simulatePressure: false,\n last: true,\n }\n return { points, options }\n}\n\nexport function getRectanglePath(id: string, style: ShapeStyles, size: number[]) {\n const { points, options } = getDrawStrokeInfo(id, style, size)\n const stroke = getStroke(points, options)\n return Utils.getSvgPathFromStroke(stroke)\n}\n\nexport function getRectangleIndicatorPathTDSnapshot(\n id: string,\n style: ShapeStyles,\n size: number[]\n) {\n const { points, options } = getDrawStrokeInfo(id, style, size)\n const strokePoints = getStrokePoints(points, options)\n return Utils.getSvgPathFromStroke(\n strokePoints.map((pt) => pt.point.slice(0, 2)),\n false\n )\n}\n", "import * as React from 'react'\nimport { getShapeStyle } from '~state/shapes/shared'\nimport type { ShapeStyles } from '~types'\nimport { getRectangleIndicatorPathTDSnapshot, getRectanglePath } from '../rectangleHelpers'\n\ninterface RectangleSvgProps {\n id: string\n style: ShapeStyles\n isSelected: boolean\n isDarkMode: boolean\n size: number[]\n}\n\nexport const DrawRectangle = React.memo(function DrawRectangle({\n id,\n style,\n size,\n isSelected,\n isDarkMode,\n}: RectangleSvgProps) {\n const { isFilled } = style\n const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode)\n const pathTDSnapshot = getRectanglePath(id, style, size)\n const innerPath = getRectangleIndicatorPathTDSnapshot(id, style, size)\n\n return (\n <>\n \n {isFilled && }\n \n \n )\n})\n", "import * as React from 'react'\nimport { Utils } from '@tldraw/core'\nimport { BINDING_DISTANCE } from '~constants'\nimport type { ShapeStyles } from '~types'\nimport { getShapeStyle } from '~state/shapes/shared'\n\ninterface RectangleSvgProps {\n id: string\n style: ShapeStyles\n isSelected: boolean\n size: number[]\n isDarkMode: boolean\n}\n\nexport const DashedRectangle = React.memo(function DashedRectangle({\n id,\n style,\n size,\n isSelected,\n isDarkMode,\n}: RectangleSvgProps) {\n const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode)\n\n const sw = 1 + strokeWidth * 1.618\n\n const w = Math.max(0, size[0] - sw / 2)\n const h = Math.max(0, size[1] - sw / 2)\n\n const strokes: [number[], number[], number][] = [\n [[sw / 2, sw / 2], [w, sw / 2], w - sw / 2],\n [[w, sw / 2], [w, h], h - sw / 2],\n [[w, h], [sw / 2, h], w - sw / 2],\n [[sw / 2, h], [sw / 2, sw / 2], h - sw / 2],\n ]\n\n const paths = strokes.map(([start, end, length], i) => {\n const { strokeDasharray, strokeDashoffset } = Utils.getPerfectDashProps(\n length,\n strokeWidth * 1.618,\n style.dash\n )\n\n return (\n \n )\n })\n\n return (\n <>\n \n {style.isFilled && (\n \n )}\n \n {paths}\n \n \n )\n})\n", "import * as React from 'react'\nimport { BINDING_DISTANCE } from '~constants'\n\ninterface BindingIndicatorProps {\n strokeWidth: number\n size: number[]\n}\nexport function BindingIndicator({ strokeWidth, size }: BindingIndicatorProps) {\n return (\n \n )\n}\n", "import * as React from 'react'\nimport { Utils, SVGContainer, TLBounds } from '@tldraw/core'\nimport { TriangleShape, TDShapeType, TDMeta, TDShape, DashStyle } from '~types'\nimport { TDShapeUtil } from '../TDShapeUtil'\nimport {\n defaultStyle,\n getBoundsRectangle,\n transformRectangle,\n transformSingleRectangle,\n getFontStyle,\n} from '~state/shapes/shared'\nimport {\n intersectBoundsPolygon,\n intersectLineSegmentPolyline,\n intersectRayLineSegment,\n} from '@tldraw/intersect'\nimport Vec from '@tldraw/vec'\nimport { BINDING_DISTANCE, GHOSTED_OPACITY, LABEL_POINT } from '~constants'\nimport { getTriangleCentroid, getTrianglePoints } from './triangleHelpers'\nimport { styled } from '~styles'\nimport { DrawTriangle } from './components/DrawTriangle'\nimport { DashedTriangle } from './components/DashedTriangle'\nimport { TextLabel, getShapeStyle } from '../shared'\nimport { TriangleBindingIndicator } from './components/TriangleBindingIndicator'\n\ntype T = TriangleShape\ntype E = HTMLDivElement\n\nexport class TriangleUtil extends TDShapeUtil {\n type = TDShapeType.Triangle as const\n\n canBind = true\n\n canClone = true\n\n canEdit = true\n\n getShape = (props: Partial): T => {\n return Utils.deepMerge(\n {\n id: 'id',\n type: TDShapeType.Triangle,\n name: 'Triangle',\n parentId: 'page',\n childIndex: 1,\n point: [0, 0],\n size: [1, 1],\n rotation: 0,\n style: defaultStyle,\n label: '',\n labelPoint: [0.5, 0.5],\n },\n props\n )\n }\n\n Component = TDShapeUtil.Component(\n (\n {\n shape,\n bounds,\n isBinding,\n isEditing,\n isSelected,\n isGhost,\n meta,\n events,\n onShapeChange,\n onShapeBlur,\n },\n ref\n ) => {\n const { id, label = '', size, style, labelPoint = LABEL_POINT } = shape\n const font = getFontStyle(style)\n const styles = getShapeStyle(style, meta.isDarkMode)\n const Component = style.dash === DashStyle.Draw ? DrawTriangle : DashedTriangle\n const handleLabelChange = React.useCallback(\n (label: string) => onShapeChange?.({ id, label }),\n [onShapeChange]\n )\n const offsetY = React.useMemo(() => {\n const center = Vec.div(size, 2)\n const centroid = getTriangleCentroid(size)\n return (centroid[1] - center[1]) * 0.72\n }, [size])\n return (\n \n \n \n {isBinding && }\n \n \n \n )\n }\n )\n\n Indicator = TDShapeUtil.Indicator(({ shape }) => {\n const { size } = shape\n return \n })\n\n private getPoints(shape: T) {\n const {\n rotation = 0,\n point: [x, y],\n size: [w, h],\n } = shape\n return [\n [x + w / 2, y],\n [x, y + h],\n [x + w, y + h],\n ].map((pt) => Vec.rotWith(pt, this.getCenter(shape), rotation))\n }\n\n shouldRender = (prev: T, next: T) => {\n return next.size !== prev.size || next.style !== prev.style || next.label !== prev.label\n }\n\n getBounds = (shape: T) => {\n return getBoundsRectangle(shape, this.boundsCache)\n }\n\n getExpandedBounds = (shape: T) => {\n return Utils.getBoundsFromPoints(\n getTrianglePoints(shape.size, this.bindingDistance).map((pt) => Vec.add(pt, shape.point))\n )\n }\n\n hitTestLineSegment = (shape: T, A: number[], B: number[]): boolean => {\n return intersectLineSegmentPolyline(A, B, this.getPoints(shape)).didIntersect\n }\n\n hitTestBounds = (shape: T, bounds: TLBounds): boolean => {\n return (\n Utils.boundsContained(this.getBounds(shape), bounds) ||\n intersectBoundsPolygon(bounds, this.getPoints(shape)).length > 0\n )\n }\n\n getBindingPoint = (\n shape: T,\n fromShape: K,\n point: number[],\n origin: number[],\n direction: number[],\n bindAnywhere: boolean\n ) => {\n // Algorithm time! We need to find the binding point (a normalized point inside of the shape, or around the shape, where the arrow will point to) and the distance from the binding shape to the anchor.\n\n const expandedBounds = this.getExpandedBounds(shape)\n\n if (!Utils.pointInBounds(point, expandedBounds)) return\n\n const points = getTrianglePoints(shape.size).map((pt) => Vec.add(pt, shape.point))\n\n const expandedPoints = getTrianglePoints(shape.size, this.bindingDistance).map((pt) =>\n Vec.add(pt, shape.point)\n )\n\n const closestDistanceToEdge = Utils.pointsToLineSegments(points, true)\n .map(([a, b]) => Vec.distanceToLineSegment(a, b, point))\n .sort((a, b) => a - b)[0]\n\n if (\n !(Utils.pointInPolygon(point, expandedPoints) || closestDistanceToEdge < this.bindingDistance)\n )\n return\n\n const intersections = Utils.pointsToLineSegments(expandedPoints.concat([expandedPoints[0]]))\n .map((segment) => intersectRayLineSegment(origin, direction, segment[0], segment[1]))\n .filter((intersection) => intersection.didIntersect)\n .flatMap((intersection) => intersection.points)\n\n if (!intersections.length) return\n\n // The center of the triangle\n const center = Vec.add(getTriangleCentroid(shape.size), shape.point)\n\n // Find furthest intersection between ray from origin through point and expanded bounds. TODO: What if the shape has a curve? In that case, should we intersect the circle-from-three-points instead?\n const intersection = intersections.sort((a, b) => Vec.dist(b, origin) - Vec.dist(a, origin))[0]\n\n // The point between the handle and the intersection\n const middlePoint = Vec.med(point, intersection)\n\n let anchor: number[]\n let distance: number\n\n if (bindAnywhere) {\n anchor = Vec.dist(point, center) < BINDING_DISTANCE / 2 ? center : point\n distance = 0\n } else {\n if (Vec.distanceToLineSegment(point, middlePoint, center) < BINDING_DISTANCE / 2) {\n anchor = center\n } else {\n anchor = middlePoint\n }\n\n if (Utils.pointInPolygon(point, points)) {\n distance = this.bindingDistance\n } else {\n distance = Math.max(this.bindingDistance, closestDistanceToEdge)\n }\n }\n\n const bindingPoint = Vec.divV(Vec.sub(anchor, [expandedBounds.minX, expandedBounds.minY]), [\n expandedBounds.width,\n expandedBounds.height,\n ])\n\n return {\n point: Vec.clampV(bindingPoint, 0, 1),\n distance,\n }\n }\n\n transform = transformRectangle\n\n transformSingle = transformSingleRectangle\n}\n\nconst FullWrapper = styled('div', { width: '100%', height: '100%' })\n", "import { Utils } from '@tldraw/core'\nimport Vec from '@tldraw/vec'\nimport getStroke, { getStrokePoints } from 'perfect-freehand'\nimport type { ShapeStyles } from '~types'\nimport { getShapeStyle } from '../shared'\nimport { getOffsetPolygon } from '../shared/PolygonUtils'\n\nexport function getTrianglePoints(size: number[], offset = 0, rotation = 0) {\n const [w, h] = size\n let points = [\n [w / 2, 0],\n [w, h],\n [0, h],\n ]\n if (offset) points = getOffsetPolygon(points, offset)\n if (rotation) points = points.map((pt) => Vec.rotWith(pt, [w / 2, h / 2], rotation))\n\n return points\n}\n\nexport function getTriangleCentroid(size: number[]) {\n const [w, h] = size\n const points = [\n [w / 2, 0],\n [w, h],\n [0, h],\n ]\n return [\n (points[0][0] + points[1][0] + points[2][0]) / 3,\n (points[0][1] + points[1][1] + points[2][1]) / 3,\n ]\n}\n\nfunction getTriangleDrawPoints(id: string, size: number[], strokeWidth: number) {\n const [w, h] = size\n const getRandom = Utils.rng(id)\n // Random corner offsets\n const offsets = Array.from(Array(3)).map(() => {\n return [getRandom() * strokeWidth * 0.75, getRandom() * strokeWidth * 0.75]\n })\n // Corners\n const corners = [\n Vec.add([w / 2, 0], offsets[0]),\n Vec.add([w, h], offsets[1]),\n Vec.add([0, h], offsets[2]),\n ]\n // Which side to start drawing first\n const rm = Math.round(Math.abs(getRandom() * 2 * 3))\n // Number of points per side\n // Inset each line by the corner radii and let the freehand algo\n // interpolate points for the corners.\n const lines = Utils.rotateArray(\n [\n Vec.pointsBetween(corners[0], corners[1], 32),\n Vec.pointsBetween(corners[1], corners[2], 32),\n Vec.pointsBetween(corners[2], corners[0], 32),\n ],\n rm\n )\n // For the final points, include the first half of the first line again,\n // so that the line wraps around and avoids ending on a sharp corner.\n // This has a bit of finesse and magic\u2014if you change the points between\n // function, then you'll likely need to change this one too.\n const points = [...lines.flat(), ...lines[0]]\n return {\n points,\n }\n}\n\nfunction getDrawStrokeInfo(id: string, size: number[], style: ShapeStyles) {\n const { strokeWidth } = getShapeStyle(style)\n const { points } = getTriangleDrawPoints(id, size, strokeWidth)\n const options = {\n size: strokeWidth,\n thinning: 0.65,\n streamline: 0.3,\n smoothing: 1,\n simulatePressure: false,\n last: true,\n }\n return { points, options }\n}\n\nexport function getTrianglePath(id: string, size: number[], style: ShapeStyles) {\n const { points, options } = getDrawStrokeInfo(id, size, style)\n const stroke = getStroke(points, options)\n return Utils.getSvgPathFromStroke(stroke)\n}\n\nexport function getTriangleIndicatorPathTDSnapshot(id: string, size: number[], style: ShapeStyles) {\n const { points, options } = getDrawStrokeInfo(id, size, style)\n const strokePoints = getStrokePoints(points, options)\n return Utils.getSvgPathFromStroke(\n strokePoints.map((pt) => pt.point.slice(0, 2)),\n false\n )\n}\n", "import { intersectLineLine } from '@tldraw/intersect'\nimport Vec from '@tldraw/vec'\n\nconst PI2 = Math.PI * 2\n\ntype Vert = number[]\ntype Edge = Vert[]\ntype Polygon = Vert[]\n\nexport class PolygonUtils {\n static inwardEdgeNormal(edge: Edge) {\n // Assuming that polygon vertices are in clockwise order\n const delta = Vec.sub(edge[1], edge[0])\n const len = Vec.len2(delta)\n return [-delta[0] / len, delta[1] / len]\n }\n\n static outwardEdgeNormal(edge: Edge) {\n return Vec.neg(PolygonUtils.inwardEdgeNormal(edge))\n }\n\n // If the slope of line v1,v2 greater than the slope of v1,p then p is on the left side of v1,v2 and the return value is > 0.\n // If p is colinear with v1,v2 then return 0, otherwise return a value < 0.\n\n static leftSide = Vec.isLeft\n\n static isReflexVertex(polygon: Polygon, index: number) {\n const len = polygon.length\n // Assuming that polygon vertices are in clockwise order\n const v0 = polygon[(index + len - 1) % len]\n const v1 = polygon[index]\n const v2 = polygon[(index + 1) % len]\n if (PolygonUtils.leftSide(v0, v2, v1) < 0) return true\n return false\n }\n\n static getEdges(vertices: Vert[]) {\n return vertices.map((vert, i) => [vert, vertices[(i + 1) % vertices.length]])\n }\n\n // based on http://local.wasp.uwa.edu.au/~pbourke/geometry/lineline2d/, A => \"line a\", B => \"line b\"\n static edgesIntersection([A1, A2]: number[][], [B1, B2]: number[][]) {\n const den = (B2[1] - B1[1]) * (A2[0] - A1[0]) - (B2[0] - B1[0]) * (A2[1] - A1[1])\n\n if (den == 0) return null // lines are parallel or conincident\n\n const ua = ((B2[0] - B1[0]) * (A1[1] - B1[1]) - (B2[1] - B1[1]) * (A1[0] - B1[0])) / den\n\n const ub = ((A2[0] - A1[0]) * (A1[1] - B1[1]) - (A2[1] - A1[1]) * (A1[0] - B1[0])) / den\n\n if (ua < 0 || ub < 0 || ua > 1 || ub > 1) return null\n\n return [A1[0] + ua * (A2[0] - A1[0]), A1[1] + ua * (A2[1] - A1[1])]\n }\n\n static appendArc(\n polygon: number[][],\n center: number[],\n radius: number,\n startVertex: number[],\n endVertex: number[],\n isPaddingBoundary = false\n ) {\n const vertices = [...polygon]\n let startAngle = Math.atan2(startVertex[1] - center[1], startVertex[0] - center[0])\n let endAngle = Math.atan2(endVertex[1] - center[1], endVertex[0] - center[0])\n if (startAngle < 0) startAngle += PI2\n if (endAngle < 0) endAngle += PI2\n const arcSegmentCount = 5 // An odd number so that one arc vertex will be eactly arcRadius from center.\n const angle = startAngle > endAngle ? startAngle - endAngle : startAngle + PI2 - endAngle\n const angle5 = (isPaddingBoundary ? -angle : PI2 - angle) / arcSegmentCount\n\n vertices.push(startVertex)\n for (let i = 1; i < arcSegmentCount; ++i) {\n const angle = startAngle + angle5 * i\n vertices.push([center[0] + Math.cos(angle) * radius, center[1] + Math.sin(angle) * radius])\n }\n vertices.push(endVertex)\n\n return vertices\n }\n\n static createOffsetEdge(edge: Edge, offset: number[]) {\n return edge.map((vert) => Vec.add(vert, offset))\n }\n\n static getOffsetPolygon(polygon: Polygon, offset = 0) {\n const edges = PolygonUtils.getEdges(polygon)\n\n const offsetEdges = edges.map((edge) =>\n PolygonUtils.createOffsetEdge(edge, Vec.mul(PolygonUtils.outwardEdgeNormal(edge), offset))\n )\n\n const vertices = []\n\n for (let i = 0; i < offsetEdges.length; i++) {\n const thisEdge = offsetEdges[i]\n const prevEdge = offsetEdges[(i + offsetEdges.length - 1) % offsetEdges.length]\n const vertex = PolygonUtils.edgesIntersection(prevEdge, thisEdge)\n if (vertex) vertices.push(vertex)\n else {\n PolygonUtils.appendArc(vertices, edges[i][0], offset, prevEdge[1], thisEdge[0], false)\n }\n }\n\n // var marginPolygon = PolygonUtils.createPolygon(vertices)\n // marginPolygon.offsetEdges = offsetEdges\n return vertices\n }\n\n static createPaddingPolygon(polygon: number[][][], shapePadding = 0) {\n const offsetEdges = polygon.map((edge) =>\n PolygonUtils.createOffsetEdge(edge, PolygonUtils.inwardEdgeNormal(edge))\n )\n\n const vertices = []\n for (let i = 0; i < offsetEdges.length; i++) {\n const thisEdge = offsetEdges[i]\n const prevEdge = offsetEdges[(i + offsetEdges.length - 1) % offsetEdges.length]\n const vertex = PolygonUtils.edgesIntersection(prevEdge, thisEdge)\n if (vertex) vertices.push(vertex)\n else {\n PolygonUtils.appendArc(\n vertices,\n polygon[i][0],\n shapePadding,\n prevEdge[1],\n thisEdge[0],\n true\n )\n }\n }\n\n return vertices\n }\n}\n\nexport function getOffsetPolygon(points: number[][], offset: number) {\n if (points.length < 3) throw Error('Polygon must have at least 3 points')\n const len = points.length\n return points\n .map((point, i) => [point, points[(i + 1) % len]])\n .map(([A, B]) => {\n const offsetVector = Vec.mul(Vec.per(Vec.uni(Vec.sub(B, A))), offset)\n return [Vec.add(A, offsetVector), Vec.add(B, offsetVector)]\n })\n .map((edge, i, edges) => {\n const intersection = intersectLineLine(edge, edges[(i + 1) % edges.length])\n if (intersection === undefined) throw Error('Expected an intersection')\n return intersection\n })\n}\n", "import * as React from 'react'\nimport { getShapeStyle } from '~state/shapes/shared'\nimport type { ShapeStyles } from '~types'\nimport { getTriangleIndicatorPathTDSnapshot, getTrianglePath } from '../triangleHelpers'\n\ninterface TriangleSvgProps {\n id: string\n size: number[]\n style: ShapeStyles\n isSelected: boolean\n isDarkMode: boolean\n}\n\nexport const DrawTriangle = React.memo(function DrawTriangle({\n id,\n size,\n style,\n isSelected,\n isDarkMode,\n}: TriangleSvgProps) {\n const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode)\n const pathTDSnapshot = getTrianglePath(id, size, style)\n const indicatorPath = getTriangleIndicatorPathTDSnapshot(id, size, style)\n return (\n <>\n \n {style.isFilled && }\n \n \n )\n})\n", "import * as React from 'react'\nimport { Utils } from '@tldraw/core'\nimport type { ShapeStyles } from '~types'\nimport { getShapeStyle } from '~state/shapes/shared'\nimport { getTrianglePoints } from '../triangleHelpers'\nimport Vec from '@tldraw/vec'\n\ninterface TriangleSvgProps {\n id: string\n size: number[]\n style: ShapeStyles\n isSelected: boolean\n isDarkMode: boolean\n}\n\nexport const DashedTriangle = React.memo(function DashedTriangle({\n id,\n size,\n style,\n isSelected,\n isDarkMode,\n}: TriangleSvgProps) {\n const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode)\n const sw = 1 + strokeWidth * 1.618\n const points = getTrianglePoints(size)\n const sides = Utils.pointsToLineSegments(points, true)\n const paths = sides.map(([start, end], i) => {\n const { strokeDasharray, strokeDashoffset } = Utils.getPerfectDashProps(\n Vec.dist(start, end),\n strokeWidth * 1.618,\n style.dash\n )\n\n return (\n \n )\n })\n\n const bgPath = points.join()\n\n return (\n <>\n \n {style.isFilled && }\n {paths}\n \n )\n})\n", "import * as React from 'react'\nimport { BINDING_DISTANCE } from '~constants'\nimport { getTrianglePoints } from '../triangleHelpers'\n\ninterface TriangleBindingIndicatorProps {\n size: number[]\n}\n\nexport function TriangleBindingIndicator({ size }: TriangleBindingIndicatorProps) {\n const trianglePoints = getTrianglePoints(size).join()\n return (\n \n )\n}\n", "import * as React from 'react'\nimport { Utils, SVGContainer, TLBounds } from '@tldraw/core'\nimport { Vec } from '@tldraw/vec'\nimport { defaultStyle, getShapeStyle, getFontStyle } from '~state/shapes/shared'\nimport { EllipseShape, DashStyle, TDShapeType, TDShape, TransformInfo, TDMeta } from '~types'\nimport { GHOSTED_OPACITY, LABEL_POINT } from '~constants'\nimport { TDShapeUtil } from '../TDShapeUtil'\nimport {\n intersectEllipseBounds,\n intersectLineSegmentEllipse,\n intersectRayEllipse,\n} from '@tldraw/intersect'\nimport { getEllipseIndicatorPath } from './ellipseHelpers'\nimport { DrawEllipse } from './components/DrawEllipse'\nimport { DashedEllipse } from './components/DashedEllipse'\nimport { TextLabel } from '../shared/TextLabel'\nimport { styled } from '~styles'\n\ntype T = EllipseShape\ntype E = HTMLDivElement\ntype M = TDMeta\n\nexport class EllipseUtil extends TDShapeUtil {\n type = TDShapeType.Ellipse as const\n\n canBind = true\n\n canClone = true\n\n canEdit = true\n\n getShape = (props: Partial): T => {\n return Utils.deepMerge(\n {\n id: 'id',\n type: TDShapeType.Ellipse,\n name: 'Ellipse',\n parentId: 'page',\n childIndex: 1,\n point: [0, 0],\n radius: [1, 1],\n rotation: 0,\n style: defaultStyle,\n label: '',\n labelPoint: [0.5, 0.5],\n },\n props\n )\n }\n\n Component = TDShapeUtil.Component(\n (\n {\n shape,\n isGhost,\n isSelected,\n isBinding,\n isEditing,\n meta,\n bounds,\n events,\n onShapeChange,\n onShapeBlur,\n },\n ref\n ) => {\n const { id, radius, style, label = '', labelPoint = LABEL_POINT } = shape\n const font = getFontStyle(shape.style)\n const styles = getShapeStyle(style, meta.isDarkMode)\n const strokeWidth = styles.strokeWidth\n const sw = 1 + strokeWidth * 1.618\n const rx = Math.max(0, radius[0] - sw / 2)\n const ry = Math.max(0, radius[1] - sw / 2)\n const Component = style.dash === DashStyle.Draw ? DrawEllipse : DashedEllipse\n const handleLabelChange = React.useCallback(\n (label: string) => onShapeChange?.({ id, label }),\n [onShapeChange]\n )\n return (\n \n \n \n {isBinding && (\n \n )}\n \n \n \n )\n }\n )\n\n Indicator = TDShapeUtil.Indicator(({ shape }) => {\n const { id, radius, style } = shape\n const styles = getShapeStyle(style)\n const strokeWidth = styles.strokeWidth\n const sw = 1 + strokeWidth * 1.618\n const rx = Math.max(0, radius[0] - sw / 2)\n const ry = Math.max(0, radius[1] - sw / 2)\n return style.dash === DashStyle.Draw ? (\n \n ) : (\n \n )\n })\n\n hitTestPoint = (shape: T, point: number[]): boolean => {\n return (\n Utils.pointInBounds(point, this.getRotatedBounds(shape)) &&\n Utils.pointInEllipse(\n point,\n this.getCenter(shape),\n shape.radius[0],\n shape.radius[1],\n shape.rotation || 0\n )\n )\n }\n\n hitTestLineSegment = (shape: T, A: number[], B: number[]): boolean => {\n return intersectLineSegmentEllipse(\n A,\n B,\n this.getCenter(shape),\n shape.radius[0],\n shape.radius[1],\n shape.rotation || 0\n ).didIntersect\n }\n\n getBounds = (shape: T) => {\n return Utils.getFromCache(this.boundsCache, shape, () => {\n return Utils.getRotatedEllipseBounds(\n shape.point[0],\n shape.point[1],\n shape.radius[0],\n shape.radius[1],\n 0\n )\n })\n }\n\n getRotatedBounds = (shape: T): TLBounds => {\n return Utils.getRotatedEllipseBounds(\n shape.point[0],\n shape.point[1],\n shape.radius[0],\n shape.radius[1],\n shape.rotation\n )\n }\n\n hitTestBounds = (shape: T, bounds: TLBounds): boolean => {\n const shapeBounds = this.getBounds(shape)\n\n return (\n Utils.boundsContained(shapeBounds, bounds) ||\n intersectEllipseBounds(\n this.getCenter(shape),\n shape.radius[0],\n shape.radius[1],\n shape.rotation || 0,\n bounds\n ).length > 0\n )\n }\n\n shouldRender = (prev: T, next: T): boolean => {\n return next.radius !== prev.radius || next.style !== prev.style || next.label !== prev.label\n }\n\n getCenter = (shape: T): number[] => {\n return Vec.add(shape.point, shape.radius)\n }\n\n getBindingPoint = (\n shape: T,\n fromShape: K,\n point: number[],\n origin: number[],\n direction: number[],\n bindAnywhere: boolean\n ) => {\n {\n const expandedBounds = this.getExpandedBounds(shape)\n const center = this.getCenter(shape)\n let bindingPoint: number[]\n let distance: number\n if (\n !Utils.pointInEllipse(\n point,\n center,\n shape.radius[0] + this.bindingDistance,\n shape.radius[1] + this.bindingDistance\n )\n ) {\n return\n }\n if (bindAnywhere) {\n if (Vec.dist(point, this.getCenter(shape)) < 12) {\n bindingPoint = [0.5, 0.5]\n } else {\n bindingPoint = Vec.divV(Vec.sub(point, [expandedBounds.minX, expandedBounds.minY]), [\n expandedBounds.width,\n expandedBounds.height,\n ])\n }\n distance = 0\n } else {\n let intersection = intersectRayEllipse(\n origin,\n direction,\n center,\n shape.radius[0],\n shape.radius[1],\n shape.rotation || 0\n ).points.sort((a, b) => Vec.dist(a, origin) - Vec.dist(b, origin))[0]\n if (!intersection) {\n intersection = intersectLineSegmentEllipse(\n point,\n center,\n center,\n shape.radius[0],\n shape.radius[1],\n shape.rotation || 0\n ).points.sort((a, b) => Vec.dist(a, point) - Vec.dist(b, point))[0]\n }\n if (!intersection) {\n return undefined\n }\n // The anchor is a point between the handle and the intersection\n const anchor = Vec.med(point, intersection)\n if (Vec.distanceToLineSegment(point, anchor, this.getCenter(shape)) < 12) {\n // If we're close to the center, snap to the center\n bindingPoint = [0.5, 0.5]\n } else {\n // Or else calculate a normalized point\n bindingPoint = Vec.divV(Vec.sub(anchor, [expandedBounds.minX, expandedBounds.minY]), [\n expandedBounds.width,\n expandedBounds.height,\n ])\n }\n if (\n Utils.pointInEllipse(point, center, shape.radius[0], shape.radius[1], shape.rotation || 0)\n ) {\n // Pad the arrow out by 16 points\n distance = this.bindingDistance / 2\n } else {\n // Find the distance between the point and the ellipse\n const innerIntersection = intersectLineSegmentEllipse(\n point,\n center,\n center,\n shape.radius[0],\n shape.radius[1],\n shape.rotation || 0\n ).points[0]\n if (!innerIntersection) return undefined\n distance = Math.max(this.bindingDistance / 2, Vec.dist(point, innerIntersection))\n }\n }\n return {\n point: bindingPoint,\n distance,\n }\n }\n }\n\n transform = (\n shape: T,\n bounds: TLBounds,\n { scaleX, scaleY, initialShape }: TransformInfo\n ): Partial => {\n const { rotation = 0 } = initialShape\n return {\n point: [bounds.minX, bounds.minY],\n radius: [bounds.width / 2, bounds.height / 2],\n rotation:\n (scaleX < 0 && scaleY >= 0) || (scaleY < 0 && scaleX >= 0)\n ? -(rotation || 0)\n : rotation || 0,\n }\n }\n\n transformSingle = (shape: T, bounds: TLBounds): Partial => {\n return {\n point: Vec.toFixed([bounds.minX, bounds.minY]),\n radius: Vec.div([bounds.width, bounds.height], 2),\n }\n }\n}\n\nconst FullWrapper = styled('div', { width: '100%', height: '100%' })\n", "import { Utils } from '@tldraw/core'\nimport { getStrokeOutlinePoints, getStrokePoints } from 'perfect-freehand'\nimport { EASINGS } from '~constants'\nimport type { ShapeStyles } from '~types'\nimport { getShapeStyle } from '../shared/shape-styles'\n\nexport function getEllipseStrokePoints(id: string, radius: number[], style: ShapeStyles) {\n const { strokeWidth } = getShapeStyle(style)\n const getRandom = Utils.rng(id)\n const rx = radius[0] + getRandom() * strokeWidth * 2\n const ry = radius[1] + getRandom() * strokeWidth * 2\n const perimeter = Utils.perimeterOfEllipse(rx, ry)\n const points: number[][] = []\n const start = Math.PI + Math.PI * getRandom()\n const extra = Math.abs(getRandom())\n const count = Math.max(16, perimeter / 10)\n for (let i = 0; i < count; i++) {\n const t = EASINGS.easeInOutSine(i / (count + 1))\n const rads = start * 2 + Math.PI * (2 + extra) * t\n const c = Math.cos(rads)\n const s = Math.sin(rads)\n points.push([rx * c + radius[0], ry * s + radius[1], t + 0.5 + getRandom() / 2])\n }\n return getStrokePoints(points, {\n size: 1 + strokeWidth * 2,\n thinning: 0.618,\n end: { taper: perimeter / 8 },\n start: { taper: perimeter / 12 },\n streamline: 0,\n simulatePressure: true,\n })\n}\n\nexport function getEllipsePath(id: string, radius: number[], style: ShapeStyles) {\n const { strokeWidth } = getShapeStyle(style)\n const getRandom = Utils.rng(id)\n const rx = radius[0] + getRandom() * strokeWidth * 2\n const ry = radius[1] + getRandom() * strokeWidth * 2\n const perimeter = Utils.perimeterOfEllipse(rx, ry)\n return Utils.getSvgPathFromStroke(\n getStrokeOutlinePoints(getEllipseStrokePoints(id, radius, style), {\n size: 2 + strokeWidth * 2,\n thinning: 0.618,\n end: { taper: perimeter / 8 },\n start: { taper: perimeter / 12 },\n streamline: 0,\n simulatePressure: true,\n })\n )\n}\n\nexport function getEllipseIndicatorPath(id: string, radius: number[], style: ShapeStyles) {\n return Utils.getSvgPathFromStroke(\n getEllipseStrokePoints(id, radius, style).map((pt) => pt.point.slice(0, 2)),\n false\n )\n}\n", "import * as React from 'react'\nimport { getShapeStyle } from '~state/shapes/shared'\nimport type { ShapeStyles } from '~types'\nimport { getEllipseIndicatorPath, getEllipsePath } from '../ellipseHelpers'\n\ninterface EllipseSvgProps {\n id: string\n radius: number[]\n style: ShapeStyles\n isSelected: boolean\n isDarkMode: boolean\n}\n\nexport const DrawEllipse = React.memo(function DrawEllipse({\n id,\n radius,\n style,\n isSelected,\n isDarkMode,\n}: EllipseSvgProps) {\n const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode)\n const innerPath = getEllipsePath(id, radius, style)\n\n return (\n <>\n \n {style.isFilled && (\n \n )}\n \n \n )\n})\n", "import * as React from 'react'\nimport { Utils } from '@tldraw/core'\nimport type { ShapeStyles } from '~types'\nimport { getShapeStyle } from '~state/shapes/shared'\n\ninterface EllipseSvgProps {\n radius: number[]\n style: ShapeStyles\n isSelected: boolean\n isDarkMode: boolean\n}\n\nexport const DashedEllipse = React.memo(function DashedEllipse({\n radius,\n style,\n isSelected,\n isDarkMode,\n}: EllipseSvgProps) {\n const { stroke, strokeWidth, fill } = getShapeStyle(style, isDarkMode)\n const sw = 1 + strokeWidth * 1.618\n const rx = Math.max(0, radius[0] - sw / 2)\n const ry = Math.max(0, radius[1] - sw / 2)\n const perimeter = Utils.perimeterOfEllipse(rx, ry)\n const { strokeDasharray, strokeDashoffset } = Utils.getPerfectDashProps(\n perimeter < 64 ? perimeter * 2 : perimeter,\n strokeWidth * 1.618,\n style.dash,\n 4\n )\n\n return (\n <>\n \n \n \n )\n})\n", "import * as React from 'react'\nimport { Utils, TLBounds, SVGContainer } from '@tldraw/core'\nimport { Vec } from '@tldraw/vec'\nimport { defaultStyle } from '../shared/shape-styles'\nimport { ArrowShape, TransformInfo, Decoration, TDShapeType, DashStyle, TDMeta } from '~types'\nimport { TDShapeUtil } from '../TDShapeUtil'\nimport {\n intersectArcBounds,\n intersectLineSegmentBounds,\n intersectLineSegmentLineSegment,\n} from '@tldraw/intersect'\nimport { GHOSTED_OPACITY } from '~constants'\nimport {\n getArcLength,\n getArcPoints,\n getArrowPath,\n getBendPoint,\n getCtp,\n isAngleBetween,\n} from './arrowHelpers'\nimport { styled } from '~styles'\nimport { TextLabel, getFontStyle, getShapeStyle } from '../shared'\nimport { getTextLabelSize } from '../shared/getTextSize'\nimport { StraightArrow } from './components/StraightArrow'\nimport { CurvedArrow } from './components/CurvedArrow.tsx'\nimport { LabelMask } from '../shared/LabelMask'\n\ntype T = ArrowShape\ntype E = HTMLDivElement\n\nexport class ArrowUtil extends TDShapeUtil {\n type = TDShapeType.Arrow as const\n\n hideBounds = true\n\n canEdit = true\n\n pathCache = new WeakMap()\n\n getShape = (props: Partial): T => {\n return {\n id: 'id',\n type: TDShapeType.Arrow,\n name: 'Arrow',\n parentId: 'page',\n childIndex: 1,\n point: [0, 0],\n rotation: 0,\n bend: 0,\n handles: {\n start: {\n id: 'start',\n index: 0,\n point: [0, 0],\n canBind: true,\n ...props.handles?.start,\n },\n end: {\n id: 'end',\n index: 1,\n point: [1, 1],\n canBind: true,\n ...props.handles?.end,\n },\n bend: {\n id: 'bend',\n index: 2,\n point: [0.5, 0.5],\n ...props.handles?.bend,\n },\n },\n decorations: props.decorations ?? {\n end: Decoration.Arrow,\n },\n style: {\n ...defaultStyle,\n isFilled: false,\n ...props.style,\n },\n label: '',\n labelPoint: [0.5, 0.5],\n ...props,\n }\n }\n\n Component = TDShapeUtil.Component(\n ({ shape, isEditing, isGhost, meta, events, onShapeChange, onShapeBlur }, ref) => {\n const {\n id,\n label = '',\n handles: { start, bend, end },\n decorations = {},\n style,\n } = shape\n\n const hasLabel = label?.trim()?.length ?? 0 > 0\n\n const isStraightLine = Vec.dist(bend.point, Vec.toFixed(Vec.med(start.point, end.point))) < 1\n\n const font = getFontStyle(style)\n\n const styles = getShapeStyle(style, meta.isDarkMode)\n\n const labelSize = hasLabel || isEditing ? getTextLabelSize(label, font) : [0, 0]\n\n const bounds = this.getBounds(shape)\n\n const dist = React.useMemo(() => {\n const { start, bend, end } = shape.handles\n if (isStraightLine) return Vec.dist(start.point, end.point)\n const circle = getCtp(start.point, bend.point, end.point)\n const center = circle.slice(0, 2)\n const radius = circle[2]\n const length = getArcLength(center, radius, start.point, end.point)\n return Math.abs(length)\n }, [shape.handles])\n\n const scale = Math.max(\n 0.5,\n Math.min(1, Math.max(dist / (labelSize[1] + 128), dist / (labelSize[0] + 128)))\n )\n\n const offset = React.useMemo(() => {\n const bounds = this.getBounds(shape)\n const offset = Vec.sub(\n shape.handles.bend.point,\n Vec.toFixed([bounds.width / 2, bounds.height / 2])\n )\n return offset\n }, [shape, scale])\n\n const handleLabelChange = React.useCallback(\n (label: string) => {\n onShapeChange?.({ id, label })\n },\n [onShapeChange]\n )\n\n const Component = isStraightLine ? StraightArrow : CurvedArrow\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n