\n
\n (\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", "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
').reduce((a, b) => a.length > b.length ? a : b).length\n }\n\n\n getSvgElement = (shape: T): SVGElement | void => {\n const bounds = this.getBounds(shape)\n const textBounds = Utils.expandBounds(bounds, -PADDING)\n const textElm = getTextSvgElement(shape.text, shape.style, textBounds)\n const style = getStickyShapeStyle(shape.style)\n textElm.setAttribute('fill', style.color)\n textElm.setAttribute('transform', `translate(${PADDING}, ${PADDING})`)\n\n const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')\n const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')\n rect.setAttribute('width', bounds.width + '')\n rect.setAttribute('height', bounds.height + '')\n rect.setAttribute('fill', style.fill)\n rect.setAttribute('rx', '3')\n rect.setAttribute('ry', '3')\n\n g.appendChild(rect)\n g.appendChild(textElm)\n\n return g\n }\n}\n\n/* -------------------------------------------------- */\n/* Helpers */\n/* -------------------------------------------------- */\n\nconst PADDING = 16\nconst MIN_CONTAINER_HEIGHT = 200\nconst MIN_CONTAINER_WIDTH = 200\nconst MAXIMUM_TEXT_IN_LINE = 10\n\n\n\nconst StyledStickyContainer = styled('div', {\n pointerEvents: 'all',\n position: 'relative',\n backgroundColor: 'rgba(255, 220, 100)',\n fontFamily: 'Graphik Web',\n height: '100%',\n width: '100%',\n padding: PADDING + 'px',\n borderRadius: '3px',\n perspective: '800px',\n})", "import * as React from 'react'\nimport { useHotkeys } from 'react-hotkeys-hook'\nimport { AlignStyle, TDShapeType } from '~types'\nimport { useFileSystemHandlers, useTldrawApp } from '~hooks'\n\nexport function useKeyboardShortcuts(ref: React.RefObject) {\n const app = useTldrawApp()\n\n const canHandleEvent = React.useCallback(\n (ignoreMenus = false) => {\n const elm = ref.current\n if (ignoreMenus && app.isMenuOpen) return true\n return elm && (document.activeElement === elm || elm.contains(document.activeElement))\n },\n [ref]\n )\n\n /* ---------------------- Tools --------------------- */\n\n useHotkeys(\n 'v,1',\n () => {\n if (!canHandleEvent(true)) return\n app.selectTool('select')\n },\n [app, ref.current]\n )\n\n useHotkeys(\n 'd,p,2',\n () => {\n if (!canHandleEvent(true)) return\n app.selectTool(TDShapeType.Draw)\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'e,3',\n () => {\n if (!canHandleEvent(true)) return\n app.selectTool('erase')\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'r,4',\n () => {\n if (!canHandleEvent(true)) return\n app.selectTool(TDShapeType.Rectangle)\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'o,5',\n () => {\n if (!canHandleEvent(true)) return\n app.selectTool(TDShapeType.Ellipse)\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'g,6',\n () => {\n if (!canHandleEvent()) return\n app.selectTool(TDShapeType.Triangle)\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'l,7',\n () => {\n if (!canHandleEvent(true)) return\n app.selectTool(TDShapeType.Line)\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'a,8',\n () => {\n if (!canHandleEvent(true)) return\n app.selectTool(TDShapeType.Arrow)\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 't,9',\n () => {\n if (!canHandleEvent(true)) return\n app.selectTool(TDShapeType.Text)\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 's,0',\n () => {\n if (!canHandleEvent(true)) return\n app.selectTool(TDShapeType.Sticky)\n },\n undefined,\n [app]\n )\n\n /* ---------------------- Misc ---------------------- */\n\n // Dark Mode\n\n useHotkeys(\n 'ctrl+shift+d,\u2318+shift+d',\n (e) => {\n if (!canHandleEvent(true)) return\n app.toggleDarkMode()\n e.preventDefault()\n },\n undefined,\n [app]\n )\n\n // Focus Mode\n\n useHotkeys(\n 'ctrl+.,\u2318+.',\n () => {\n if (!canHandleEvent(true)) return\n app.toggleFocusMode()\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'ctrl+shift+g,\u2318+shift+g',\n () => {\n if (!canHandleEvent(true)) return\n app.toggleGrid()\n },\n undefined,\n [app]\n )\n\n // File System\n\n const { onNewProject, onOpenProject, onSaveProject, onSaveProjectAs, onOpenMedia } =\n useFileSystemHandlers()\n\n useHotkeys(\n 'ctrl+n,\u2318+n',\n (e) => {\n if (!canHandleEvent()) return\n\n onNewProject(e)\n },\n undefined,\n [app]\n )\n useHotkeys(\n 'ctrl+s,\u2318+s',\n (e) => {\n if (!canHandleEvent()) return\n\n onSaveProject(e)\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'ctrl+shift+s,\u2318+shift+s',\n (e) => {\n if (!canHandleEvent()) return\n\n onSaveProjectAs(e)\n },\n undefined,\n [app]\n )\n useHotkeys(\n 'ctrl+o,\u2318+o',\n (e) => {\n if (!canHandleEvent()) return\n\n onOpenProject(e)\n },\n undefined,\n [app]\n )\n useHotkeys(\n 'ctrl+u,\u2318+u',\n (e) => {\n if (!canHandleEvent()) return\n onOpenMedia(e)\n },\n undefined,\n [app]\n )\n\n // Undo Redo\n\n useHotkeys(\n '\u2318+z,ctrl+z',\n () => {\n if (!canHandleEvent(true)) return\n\n if (app.session) {\n app.cancelSession()\n } else {\n app.undo()\n }\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'ctrl+shift+z,\u2318+shift+z',\n () => {\n if (!canHandleEvent(true)) return\n\n if (app.session) {\n app.cancelSession()\n } else {\n app.redo()\n }\n },\n undefined,\n [app]\n )\n\n // Undo Redo\n\n useHotkeys(\n '\u2318+u,ctrl+u',\n () => {\n if (!canHandleEvent()) return\n app.undoSelect()\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'ctrl+shift-u,\u2318+shift+u',\n () => {\n if (!canHandleEvent()) return\n app.redoSelect()\n },\n undefined,\n [app]\n )\n\n /* -------------------- Commands -------------------- */\n\n // Camera\n\n useHotkeys(\n 'ctrl+=,\u2318+=,ctrl+num_subtract,\u2318+num_subtract',\n (e) => {\n if (!canHandleEvent(true)) return\n app.zoomIn()\n e.preventDefault()\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'ctrl+-,\u2318+-,ctrl+num_add,\u2318+num_add',\n (e) => {\n if (!canHandleEvent(true)) return\n\n app.zoomOut()\n e.preventDefault()\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'shift+0,ctrl+numpad_0,\u2318+numpad_0',\n () => {\n if (!canHandleEvent(true)) return\n app.resetZoom()\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'shift+1',\n () => {\n if (!canHandleEvent(true)) return\n app.zoomToFit()\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'shift+2',\n () => {\n if (!canHandleEvent(true)) return\n app.zoomToSelection()\n },\n undefined,\n [app]\n )\n\n // Duplicate\n\n useHotkeys(\n 'ctrl+d,\u2318+d',\n (e) => {\n if (!canHandleEvent()) return\n\n app.duplicate()\n e.preventDefault()\n },\n undefined,\n [app]\n )\n\n // Flip\n\n useHotkeys(\n 'shift+h',\n () => {\n if (!canHandleEvent(true)) return\n app.flipHorizontal()\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'shift+v',\n () => {\n if (!canHandleEvent(true)) return\n app.flipVertical()\n },\n undefined,\n [app]\n )\n\n // Cancel\n\n useHotkeys(\n 'escape',\n () => {\n if (!canHandleEvent(true)) return\n\n app.cancel()\n },\n undefined,\n [app]\n )\n\n // Delete\n\n useHotkeys(\n 'backspace,del',\n () => {\n if (!canHandleEvent()) return\n app.delete()\n },\n undefined,\n [app]\n )\n\n // Select All\n\n useHotkeys(\n '\u2318+a,ctrl+a',\n () => {\n if (!canHandleEvent(true)) return\n app.selectAll()\n },\n undefined,\n [app]\n )\n\n // Nudge\n\n useHotkeys(\n 'up',\n () => {\n if (!canHandleEvent()) return\n app.nudge([0, -1], false)\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'right',\n () => {\n if (!canHandleEvent()) return\n app.nudge([1, 0], false)\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'down',\n () => {\n if (!canHandleEvent()) return\n app.nudge([0, 1], false)\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'left',\n () => {\n if (!canHandleEvent()) return\n app.nudge([-1, 0], false)\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'shift+up',\n () => {\n if (!canHandleEvent()) return\n app.nudge([0, -1], true)\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'shift+right',\n () => {\n if (!canHandleEvent()) return\n app.nudge([1, 0], true)\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'shift+down',\n () => {\n if (!canHandleEvent()) return\n app.nudge([0, 1], true)\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'shift+left',\n () => {\n if (!canHandleEvent()) return\n app.nudge([-1, 0], true)\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n '\u2318+shift+l,ctrl+shift+l',\n () => {\n if (!canHandleEvent()) return\n app.toggleLocked()\n },\n undefined,\n [app]\n )\n\n // Copy, Cut & Paste\n\n useHotkeys(\n '\u2318+c,ctrl+c',\n () => {\n if (!canHandleEvent()) return\n app.copy()\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n '\u2318+shift+c,ctrl+shift+c',\n (e) => {\n if (!canHandleEvent()) return\n\n app.copySvg()\n e.preventDefault()\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n '\u2318+x,ctrl+x',\n () => {\n if (!canHandleEvent()) return\n app.cut()\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n '\u2318+v,ctrl+v',\n () => {\n if (!canHandleEvent()) return\n app.paste()\n },\n undefined,\n [app]\n )\n\n // Group & Ungroup\n\n useHotkeys(\n '\u2318+g,ctrl+g',\n (e) => {\n if (!canHandleEvent()) return\n\n app.group()\n e.preventDefault()\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n '\u2318+shift+g,ctrl+shift+g',\n (e) => {\n if (!canHandleEvent()) return\n\n app.ungroup()\n e.preventDefault()\n },\n undefined,\n [app]\n )\n\n // Move\n\n useHotkeys(\n '[',\n () => {\n if (!canHandleEvent(true)) return\n app.moveBackward()\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n ']',\n () => {\n if (!canHandleEvent(true)) return\n app.moveForward()\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'shift+[',\n () => {\n if (!canHandleEvent(true)) return\n app.moveToBack()\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'shift+]',\n () => {\n if (!canHandleEvent(true)) return\n app.moveToFront()\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'ctrl+shift+backspace,\u2318+shift+backspace',\n (e) => {\n if (!canHandleEvent()) return\n if (app.settings.isDebugMode) {\n app.resetDocument()\n }\n e.preventDefault()\n },\n undefined,\n [app]\n )\n\n // Text Align\n\n useHotkeys(\n 'alt+command+l,alt+ctrl+l',\n (e) => {\n if (!canHandleEvent(true)) return\n app.style({ textAlign: AlignStyle.Start })\n e.preventDefault()\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'alt+command+t,alt+ctrl+t',\n (e) => {\n if (!canHandleEvent(true)) return\n app.style({ textAlign: AlignStyle.Middle })\n e.preventDefault()\n },\n undefined,\n [app]\n )\n\n useHotkeys(\n 'alt+command+r,alt+ctrl+r',\n (e) => {\n if (!canHandleEvent(true)) return\n app.style({ textAlign: AlignStyle.End })\n e.preventDefault()\n },\n undefined,\n [app]\n )\n}\n", "import * as React from 'react'\nimport type { TldrawApp } from '~state'\n\nexport const TldrawContext = React.createContext({} as TldrawApp)\n\nexport function useTldrawApp() {\n const context = React.useContext(TldrawContext)\n return context\n}\n", "import type { TDSnapshot, Theme } from '~types'\nimport { useTldrawApp } from './useTldrawApp'\n\nconst themeSelector = (data: TDSnapshot): Theme => (data.settings.isDarkMode ? 'dark' : 'light')\n\nexport function useTheme() {\n const app = useTldrawApp()\n const theme = app.useStore(themeSelector)\n\n return {\n theme,\n toggle: app.toggleDarkMode,\n }\n}\n", "import * as React from 'react'\n\nconst styles = new Map()\n\nconst UID = `Tldraw-fonts`\nconst WEBFONT_URL =\n 'https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Source+Code+Pro&family=Source+Sans+Pro&family=Crimson+Pro&display=block'\nconst CSS = `\n@import url('');\n`\n\nexport function useStylesheet() {\n React.useLayoutEffect(() => {\n if (styles.get(UID)) return\n const style = document.createElement('style')\n style.innerHTML = `@import url('${WEBFONT_URL}');`\n style.setAttribute('id', UID)\n document.head.appendChild(style)\n styles.set(UID, style)\n\n return () => {\n if (style && document.head.contains(style)) {\n document.head.removeChild(style)\n styles.delete(UID)\n }\n }\n }, [UID, CSS])\n}\n", "import * as React from 'react'\nimport { useTldrawApp } from '~hooks'\n\nexport function useFileSystemHandlers() {\n const app = useTldrawApp()\n\n const onNewProject = React.useCallback(\n async (e?: React.MouseEvent | React.KeyboardEvent | KeyboardEvent) => {\n if (e && app.callbacks.onOpenProject) e.preventDefault()\n app.callbacks.onNewProject?.(app)\n },\n [app]\n )\n\n const onSaveProject = React.useCallback(\n (e?: React.MouseEvent | React.KeyboardEvent | KeyboardEvent) => {\n if (e && app.callbacks.onOpenProject) e.preventDefault()\n app.callbacks.onSaveProject?.(app)\n },\n [app]\n )\n\n const onSaveProjectAs = React.useCallback(\n (e?: React.MouseEvent | React.KeyboardEvent | KeyboardEvent) => {\n if (e && app.callbacks.onOpenProject) e.preventDefault()\n app.callbacks.onSaveProjectAs?.(app)\n },\n [app]\n )\n\n const onOpenProject = React.useCallback(\n async (e?: React.MouseEvent | React.KeyboardEvent | KeyboardEvent) => {\n if (e && app.callbacks.onOpenProject) e.preventDefault()\n app.callbacks.onOpenProject?.(app)\n },\n [app]\n )\n\n const onOpenMedia = React.useCallback(\n async (e?: React.MouseEvent | React.KeyboardEvent | KeyboardEvent) => {\n if (e && app.callbacks.onOpenMedia) e.preventDefault()\n app.callbacks.onOpenMedia?.(app)\n },\n [app]\n )\n\n return {\n onNewProject,\n onSaveProject,\n onSaveProjectAs,\n onOpenProject,\n onOpenMedia,\n }\n}\n", "import * as React from 'react'\nimport type { TldrawApp } from '~state'\n\nexport function useFileSystem() {\n const promptSaveBeforeChange = React.useCallback(async (app: TldrawApp) => {\n if (app.isDirty) {\n if (app.fileSystemHandle) {\n if (window.confirm('Do you want to save changes to your current project?')) {\n await app.saveProject()\n }\n } else {\n if (window.confirm('Do you want to save your current project?')) {\n await app.saveProject()\n }\n }\n }\n }, [])\n\n const onNewProject = React.useCallback(\n async (app: TldrawApp) => {\n if (window.confirm('Do you want to create a new project?')) {\n await promptSaveBeforeChange(app)\n app.newProject()\n }\n },\n [promptSaveBeforeChange]\n )\n\n const onSaveProject = React.useCallback((app: TldrawApp) => {\n app.saveProject()\n }, [])\n\n const onSaveProjectAs = React.useCallback((app: TldrawApp) => {\n app.saveProjectAs()\n }, [])\n\n const onOpenProject = React.useCallback(\n async (app: TldrawApp) => {\n await promptSaveBeforeChange(app)\n app.openProject()\n },\n [promptSaveBeforeChange]\n )\n\n const onOpenMedia = React.useCallback(async (app: TldrawApp) => {\n app.openAsset?.()\n }, [])\n\n return {\n onNewProject,\n onSaveProject,\n onSaveProjectAs,\n onOpenProject,\n onOpenMedia,\n }\n}\n", "/* eslint-disable @typescript-eslint/no-non-null-assertion */\nimport * as React from 'react'\nimport { Utils, HTMLContainer, TLBounds, TLBoundsCorner, TLBoundsEdge } from '@tldraw/core'\nimport { defaultTextStyle, getShapeStyle, getFontStyle } from '../shared/shape-styles'\nimport { TextShape, TDMeta, TDShapeType, TransformInfo, AlignStyle, ListType } from '~types'\nimport { BINDING_DISTANCE, GHOSTED_OPACITY, LETTER_SPACING } from '~constants'\nimport { TDShapeUtil } from '../TDShapeUtil'\nimport { styled } from '~styles'\nimport { Vec } from '@tldraw/vec'\nimport { TLDR } from '~state/TLDR'\nimport { getTextAlign } from '../shared/getTextAlign'\nimport { getTextSvgElement } from '../shared/getTextSvgElement'\nimport { stopPropagation } from '~components/stopPropagation'\nimport { useTextKeyboardEvents } from '../shared/useTextKeyboardEvents'\nimport { getTextWeight } from '../shared/getTextWeight'\n\ntype T = TextShape\ntype E = HTMLDivElement\n\nexport class TextUtil extends TDShapeUtil {\n type = TDShapeType.Text as const\n\n isAspectRatioLocked = false\n\n canEdit = true\n\n canBind = true\n\n canClone = true\n\n bindingDistance = BINDING_DISTANCE / 2\n\n getShape = (props: Partial): T => {\n return Utils.deepMerge(\n {\n id: 'id',\n type: TDShapeType.Text,\n name: 'Text',\n parentId: 'page',\n childIndex: 1,\n point: [0, 0],\n rotation: 0,\n text: ' ',\n style: defaultTextStyle,\n textAreaWidth: 100,\n hasResized: false,\n },\n props\n )\n }\n\n texts = new Map()\n\n Component = TDShapeUtil.Component(\n ({ shape, isBinding, isGhost, isEditing, onShapeBlur, onShapeChange, meta, events }, ref) => {\n const { text, style, textAreaWidth, hasResized } = shape\n\n const styles = getShapeStyle(style, meta.isDarkMode)\n const font = getFontStyle(shape.style)\n const fontStyle = font.split(' ')\n const fontSize = fontStyle[0].split('/')[0]\n const lineHeight = 1\n fontStyle.shift()\n const fontFamily = fontStyle.join(' ')\n const weight = getTextWeight(shape.style.textWeight)\n const rInput = React.useRef(null)\n const rIsMounted = React.useRef(false)\n const isTextEmpty = text == '' || text == ' '\n const str = text\n let textArr = text.split('')\n if (style.listType === ListType.Numbered) {\n textArr = textArr[0] !== '1.' ? ['1.', ' ', ...textArr] : [...textArr]\n let count = 3\n let number = 2\n for (let i = 0; i < str.length; i++) {\n if (\n (str[i] === '\\n' || str[i] === '\\r') &&\n str[i + 1] !== `${number}` &&\n str[i] != `${number}`\n ) {\n textArr.splice(i + count, 0, `${number}.`, ' ')\n count += 2\n number += 1\n }\n }\n } else if (style.listType === ListType.Bullet) {\n textArr = textArr[0] !== '\\u2022' ? ['\\u2022', ' ', ...textArr] : [...textArr]\n let count = 3\n for (let i = 0; i < str.length; i++) {\n if (\n (str[i] === '\\n' || str[i] === '\\r') &&\n str[i + 1] !== '\\u2022' &&\n str[i] != '\\u2022'\n ) {\n textArr.splice(i + count, 0, `\\u2022`, ' ')\n count += 2\n }\n }\n }\n const newText = textArr.join('')\n\n const handleChange = React.useCallback(\n (e: React.ChangeEvent) => {\n let delta = [0, 0]\n const newText = TLDR.normalizeText(e.currentTarget.value)\n const currentBounds = this.getBounds(shape)\n this.texts.set(shape.id, newText)\n const nextBounds = this.getBounds({\n ...shape,\n text: newText,\n })\n switch (shape.style.textAlign) {\n case AlignStyle.Start: {\n break\n }\n case AlignStyle.Middle: {\n delta = Vec.div([nextBounds.width - currentBounds.width, 0], 2)\n break\n }\n case AlignStyle.End: {\n delta = [nextBounds.width - currentBounds.width, 0]\n break\n }\n }\n onShapeChange?.({\n ...shape,\n id: shape.id,\n point: Vec.sub(shape.point, delta),\n text: newText,\n })\n },\n [shape.id, shape.point]\n )\n\n const onChange = React.useCallback(\n (text: string) => {\n this.texts.set(shape.id, TLDR.normalizeText(text))\n onShapeChange?.({ id: shape.id, text: this.texts.get(shape.id)! })\n },\n [shape.id]\n )\n\n const handleKeyDown = useTextKeyboardEvents(onChange)\n\n const handleBlur = React.useCallback((e: React.FocusEvent) => {\n e.currentTarget.setSelectionRange(0, 0)\n onShapeBlur?.()\n }, [])\n\n const handleFocus = React.useCallback(\n (e: React.FocusEvent) => {\n if (!isEditing) return\n if (!rIsMounted.current) return\n if (document.activeElement === e.currentTarget) {\n e.currentTarget.select()\n }\n },\n [isEditing]\n )\n\n const handlePointerDown = React.useCallback(\n (e) => {\n if (isEditing) {\n e.stopPropagation()\n }\n },\n [isEditing]\n )\n\n React.useEffect(() => {\n if (isEditing) {\n this.texts.set(shape.id, text)\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 onShapeBlur?.()\n }\n }, [isEditing])\n\n return (\n \n \n \n {isBinding && (\n \n \n )\n }\n )\n\n Indicator = TDShapeUtil.Indicator(({ shape }) => {\n const { width, height } = this.getBounds(shape)\n return \n ): Partial => {\n const {\n rotation = 0,\n style: { scale = 1 },\n } = initialShape\n\n const nextScale = scale * Math.abs(Math.min(scaleX, scaleY))\n\n return {\n point: [bounds.minX, bounds.minY],\n rotation:\n (scaleX < 0 && scaleY >= 0) || (scaleY < 0 && scaleX >= 0) ? -(rotation || 0) : rotation,\n style: {\n ...initialShape.style,\n scale: nextScale,\n },\n }\n }\n\n transformSingle = (\n shape: T,\n bounds: TLBounds,\n { initialShape, scaleX, scaleY, type }: TransformInfo\n ): Partial | void => {\n const {\n style: { scale = 1, bounds: indicatorBounds },\n } = initialShape\n\n let finalScale = scale\n let finalIndicatorBounds = indicatorBounds\n let hasResized = shape.hasResized\n switch (type) {\n case TLBoundsCorner.TopLeft:\n case TLBoundsCorner.TopRight:\n case TLBoundsCorner.BottomRight:\n case TLBoundsCorner.BottomLeft: {\n finalScale = scale * Math.max(Math.abs(scaleY), Math.abs(scaleX))\n finalIndicatorBounds = [indicatorBounds[0] * scaleX, indicatorBounds[1]]\n break\n }\n case TLBoundsEdge.Bottom:\n case TLBoundsEdge.Top:\n // if(scaleY > 0)\n // finalIndicatorBounds = [indicatorBounds[0], indicatorBounds[1] * scaleY]\n break\n case TLBoundsEdge.Left:\n case TLBoundsEdge.Right:\n hasResized = true\n if (scaleX > 0) finalIndicatorBounds = [indicatorBounds[0] * scaleX, indicatorBounds[1]]\n break\n }\n let textAreaWidth = shape.textAreaWidth\n if (!shape.hasResized)\n if (melm.offsetWidth < 1000) textAreaWidth = melm.offsetWidth\n else textAreaWidth = 1000\n\n return {\n point: Vec.toFixed([bounds.minX, bounds.minY]),\n style: {\n ...initialShape.style,\n scale: finalScale,\n bounds: finalIndicatorBounds,\n },\n hasResized,\n textAreaWidth,\n }\n }\n\n getTextWidth(text: string, font: string): number {\n // re-use canvas object for better performance\n const canvas =\n this.getTextWidth.canvas || (this.getTextWidth.canvas = document.createElement('canvas'))\n const context = canvas.getContext('2d')\n context.font = font\n const metrics = context.measureText(text)\n return metrics.width\n }\n\n onDoubleClickBoundsHandle = (shape: T) => {\n const center = this.getCenter(shape)\n\n const newCenter = this.getCenter({\n ...shape,\n style: {\n ...shape.style,\n scale: 1,\n },\n })\n\n return {\n style: {\n ...shape.style,\n scale: 1,\n },\n point: Vec.toFixed(Vec.add(shape.point, Vec.sub(center, newCenter))),\n }\n }\n\n getSvgElement = (shape: T): SVGElement | void => {\n const bounds = this.getBounds(shape)\n const elm = getTextSvgElement(shape.text, shape.style, bounds)\n elm.setAttribute('fill', getShapeStyle(shape.style).stroke)\n return elm\n }\n}\n\n/* -------------------------------------------------- */\n/* Helpers */\n/* -------------------------------------------------- */\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('__textMeasure')?.remove()\n\n const pre = document.createElement('pre')\n pre.id = '__textMeasure'\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\nconst Wrapper = styled('div', {\n width: '100%',\n height: '100%',\n variants: {\n isGhost: {\n false: { opacity: 1 },\n true: { transition: 'opacity .2s', opacity: GHOSTED_OPACITY },\n },\n isEditing: {\n false: {\n pointerEvents: 'all',\n userSelect: 'all',\n },\n true: {\n pointerEvents: 'none',\n userSelect: 'none',\n },\n },\n },\n})\n\nconst commonTextWrapping = {\n whiteSpace: 'pre-wrap',\n overflowWrap: 'break-word',\n}\n\nconst InnerWrapper = styled('div', {\n position: 'absolute',\n width: '100%',\n height: '100%',\n padding: '4px',\n zIndex: 1,\n minHeight: 1,\n minWidth: 1,\n lineHeight: 1,\n textAlign: 'inherit',\n letterSpacing: LETTER_SPACING,\n outline: 0,\n fontWeight: '500',\n backfaceVisibility: 'hidden',\n userSelect: 'none',\n pointerEvents: 'none',\n WebkitUserSelect: 'none',\n WebkitTouchCallout: 'none',\n isEditing: {\n false: {},\n true: {\n pointerEvents: 'all',\n background: '$boundsBg',\n userSelect: 'text',\n WebkitUserSelect: 'text',\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: 'left',\n minHeight: '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 ...commonTextWrapping,\n})\n", "import { TextWeight } from '~types'\n\nconst WEIGHT_VALUES = {\n [TextWeight.Normal]: 'normal',\n [TextWeight.Bold]: 'bold',\n} as const\n\nexport function getTextWeight(weightStyle: TextWeight = TextWeight.Normal) {\n return WEIGHT_VALUES[weightStyle]\n}\n", "import * as React from 'react'\nimport { Utils, SVGContainer, TLBounds } from '@tldraw/core'\nimport { Vec } from '@tldraw/vec'\nimport { defaultStyle, getShapeStyle } from '../shared/shape-styles'\nimport { DrawShape, DashStyle, TDShapeType, TransformInfo, TDMeta } from '~types'\nimport { TDShapeUtil } from '../TDShapeUtil'\nimport {\n intersectBoundsBounds,\n intersectBoundsPolyline,\n intersectLineSegmentBounds,\n intersectLineSegmentLineSegment,\n} from '@tldraw/intersect'\nimport {\n getDrawStrokePathTDSnapshot,\n getFillPath,\n getSolidStrokePathTDSnapshot,\n} from './drawHelpers'\nimport { GHOSTED_OPACITY } from '~constants'\n\ntype T = DrawShape\ntype E = SVGSVGElement\n\nexport class DrawUtil extends TDShapeUtil {\n type = TDShapeType.Draw as const\n\n pointsBoundsCache = new WeakMap([])\n\n shapeBoundsCache = new Map()\n\n rotatedCache = new WeakMap([])\n\n pointCache: Record = {}\n\n canClone = true\n\n getShape = (props: Partial): T => {\n return Utils.deepMerge(\n {\n id: 'id',\n type: TDShapeType.Draw,\n name: 'Draw',\n parentId: 'page',\n childIndex: 1,\n point: [0, 0],\n rotation: 0,\n style: defaultStyle,\n points: [],\n isComplete: false,\n },\n props\n )\n }\n\n Component = TDShapeUtil.Component(\n ({ shape, meta, isSelected, isGhost, events }, ref) => {\n const { points, style, isComplete } = shape\n\n const polygonPathTDSnapshot = React.useMemo(() => {\n return getFillPath(shape)\n }, [points, style.size])\n\n const pathTDSnapshot = React.useMemo(() => {\n return style.dash === DashStyle.Draw\n ? getDrawStrokePathTDSnapshot(shape)\n : getSolidStrokePathTDSnapshot(shape)\n }, [points, style.size, style.dash, isComplete])\n\n const styles = getShapeStyle(style, meta.isDarkMode)\n const { stroke, fill, strokeWidth } = styles\n\n // For very short lines, draw a point instead of a line\n const bounds = this.getBounds(shape)\n\n const verySmall = bounds.width <= strokeWidth / 2 && bounds.height <= strokeWidth / 2\n\n if (verySmall) {\n const sw = 1 + strokeWidth\n\n return (\n \n \n )\n }\n\n const shouldFill =\n style.isFilled &&\n points.length > 3 &&\n Vec.dist(points[0], points[points.length - 1]) < strokeWidth * 2\n\n if (shape.style.dash === DashStyle.Draw) {\n return (\n \n \n \n \n )\n }\n\n // For solid, dash and dotted lines, draw a regular stroke path\n\n const strokeDasharray = {\n [DashStyle.Draw]: 'none',\n [DashStyle.Solid]: `none`,\n [DashStyle.Dotted]: `0.1 ${strokeWidth * 4}`,\n [DashStyle.Dashed]: `${strokeWidth * 4} ${strokeWidth * 4}`,\n }[style.dash]\n\n const strokeDashoffset = {\n [DashStyle.Draw]: 'none',\n [DashStyle.Solid]: `none`,\n [DashStyle.Dotted]: `0`,\n [DashStyle.Dashed]: `0`,\n }[style.dash]\n\n const sw = 1 + strokeWidth * 1.5\n\n return (\n \n \n \n \n )\n }\n )\n\n Indicator = TDShapeUtil.Indicator(({ shape }) => {\n const { points } = shape\n\n const pathTDSnapshot = React.useMemo(() => {\n return getSolidStrokePathTDSnapshot(shape)\n }, [points])\n\n const bounds = this.getBounds(shape)\n\n const verySmall = bounds.width < 4 && bounds.height < 4\n\n if (verySmall) {\n return \n ): Partial => {\n const initialShapeBounds = Utils.getFromCache(this.boundsCache, initialShape, () =>\n Utils.getBoundsFromPoints(initialShape.points)\n )\n\n const points = initialShape.points.map(([x, y, r]) => {\n return [\n bounds.width *\n (scaleX < 0 // * sin?\n ? 1 - x / initialShapeBounds.width\n : x / initialShapeBounds.width),\n bounds.height *\n (scaleY < 0 // * cos?\n ? 1 - y / initialShapeBounds.height\n : y / initialShapeBounds.height),\n r,\n ]\n })\n\n const newBounds = Utils.getBoundsFromPoints(shape.points)\n\n const point = Vec.sub([bounds.minX, bounds.minY], [newBounds.minX, newBounds.minY])\n\n return {\n points,\n point,\n }\n }\n\n getBounds = (shape: T) => {\n // The goal here is to avoid recalculating the bounds from the\n // points array, which is expensive. However, we still need a\n // new bounds if the point has changed, but we will reuse the\n // previous bounds-from-points result if we can.\n\n const pointsHaveChanged = !this.pointsBoundsCache.has(shape.points)\n const pointHasChanged = !(this.pointCache[shape.id] === shape.point)\n\n if (pointsHaveChanged) {\n // If the points have changed, then bust the points cache\n const bounds = Utils.getBoundsFromPoints(shape.points)\n this.pointsBoundsCache.set(shape.points, bounds)\n this.shapeBoundsCache.set(shape.id, Utils.translateBounds(bounds, shape.point))\n this.pointCache[shape.id] = shape.point\n } else if (pointHasChanged && !pointsHaveChanged) {\n // If the point have has changed, then bust the point cache\n this.pointCache[shape.id] = shape.point\n this.shapeBoundsCache.set(\n shape.id,\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n Utils.translateBounds(this.pointsBoundsCache.get(shape.points)!, shape.point)\n )\n }\n\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n return this.shapeBoundsCache.get(shape.id)!\n }\n\n shouldRender = (prev: T, next: T) => {\n return (\n next.points !== prev.points ||\n next.style !== prev.style ||\n next.isComplete !== prev.isComplete\n )\n }\n\n hitTestPoint = (shape: T, point: number[]) => {\n const ptA = Vec.sub(point, shape.point)\n return Utils.pointInPolyline(ptA, shape.points)\n }\n\n hitTestLineSegment = (shape: T, A: number[], B: number[]): boolean => {\n const { points, point } = shape\n const ptA = Vec.sub(A, point)\n const ptB = Vec.sub(B, point)\n const bounds = this.getBounds(shape)\n\n if (points.length <= 2) {\n return Vec.distanceToLineSegment(A, B, shape.point) < 4\n }\n\n if (intersectLineSegmentBounds(ptA, ptB, bounds)) {\n for (let i = 1; i < points.length; i++) {\n if (intersectLineSegmentLineSegment(points[i - 1], points[i], ptA, ptB).didIntersect) {\n return true\n }\n }\n }\n\n return false\n }\n\n hitTestBounds = (shape: T, bounds: TLBounds) => {\n // Test axis-aligned shape\n if (!shape.rotation) {\n const shapeBounds = this.getBounds(shape)\n\n return (\n Utils.boundsContain(bounds, shapeBounds) ||\n ((Utils.boundsContain(shapeBounds, bounds) ||\n intersectBoundsBounds(shapeBounds, bounds).length > 0) &&\n intersectBoundsPolyline(Utils.translateBounds(bounds, Vec.neg(shape.point)), shape.points)\n .length > 0)\n )\n }\n\n // Test rotated shape\n const rBounds = this.getRotatedBounds(shape)\n\n const rotatedBounds = Utils.getFromCache(this.rotatedCache, shape, () => {\n const c = Utils.getBoundsCenter(Utils.getBoundsFromPoints(shape.points))\n return shape.points.map((pt) => Vec.rotWith(pt, c, shape.rotation || 0))\n })\n\n return (\n Utils.boundsContain(bounds, rBounds) ||\n intersectBoundsPolyline(Utils.translateBounds(bounds, Vec.neg(shape.point)), rotatedBounds)\n .length > 0\n )\n }\n}\n", "import { Utils } from '@tldraw/core'\nimport Vec from '@tldraw/vec'\nimport { getStrokeOutlinePoints, getStrokePoints, StrokeOptions } from 'perfect-freehand'\nimport type { DrawShape } from '~types'\nimport { getShapeStyle } from '../shared/shape-styles'\n\nconst simulatePressureSettings: StrokeOptions = {\n easing: (t) => Math.sin((t * Math.PI) / 2),\n simulatePressure: true,\n}\n\nconst realPressureSettings: StrokeOptions = {\n easing: (t) => t * t,\n simulatePressure: false,\n}\n\nexport function getFreehandOptions(shape: DrawShape) {\n const styles = getShapeStyle(shape.style)\n\n const options: StrokeOptions = {\n size: 1 + styles.strokeWidth * 1.5,\n thinning: 0.65,\n streamline: 0.65,\n smoothing: 0.65,\n ...(shape.points[1][2] === 0.5 ? simulatePressureSettings : realPressureSettings),\n last: shape.isComplete,\n }\n\n return options\n}\n\nexport function getFillPath(shape: DrawShape) {\n if (shape.points.length < 2) return ''\n\n return Utils.getSvgPathFromStroke(\n getStrokePoints(shape.points, getFreehandOptions(shape)).map((pt) => pt.point)\n )\n}\n\nexport function getDrawStrokePoints(shape: DrawShape, options: StrokeOptions) {\n return getStrokePoints(shape.points, options)\n}\n\n/**\n * Get path data for a stroke with the DashStyle.Draw dash style.\n */\nexport function getDrawStrokePathTDSnapshot(shape: DrawShape) {\n if (shape.points.length < 2) return ''\n const options = getFreehandOptions(shape)\n const strokePoints = getDrawStrokePoints(shape, options)\n const path = Utils.getSvgPathFromStroke(getStrokeOutlinePoints(strokePoints, options))\n return path\n}\n\n/**\n * Get SVG path data for a shape that has a DashStyle other than DashStyles.Draw.\n */\nexport function getSolidStrokePathTDSnapshot(shape: DrawShape) {\n const { points } = shape\n if (points.length < 2) return 'M 0 0 L 0 0'\n const options = getFreehandOptions(shape)\n const strokePoints = getDrawStrokePoints(shape, options).map((pt) => pt.point.slice(0, 2))\n const last = points[points.length - 1].slice(0, 2)\n if (!Vec.isEqual(strokePoints[0], last)) strokePoints.push(last)\n const path = Utils.getSvgPathFromStroke(strokePoints, false)\n return path\n}\n", "import * as React from 'react'\nimport { Utils, HTMLContainer } from '@tldraw/core'\nimport { TDShapeType, TDMeta, ImageShape, TDImageAsset } from '~types'\nimport { GHOSTED_OPACITY } from '~constants'\nimport { TDShapeUtil } from '../TDShapeUtil'\nimport {\n defaultStyle,\n getBoundsRectangle,\n transformRectangle,\n transformSingleRectangle,\n} from '~state/shapes/shared'\nimport { styled } from '@stitches/react'\n\ntype T = ImageShape\ntype E = HTMLDivElement\n\nexport class ImageUtil extends TDShapeUtil {\n type = TDShapeType.Image as const\n\n canBind = true\n\n canClone = true\n\n isAspectRatioLocked = true\n\n showCloneHandles = true\n\n getShape = (props: Partial): T => {\n return Utils.deepMerge(\n {\n id: 'image',\n type: TDShapeType.Image,\n name: 'Image',\n parentId: 'page',\n childIndex: 1,\n point: [0, 0],\n size: [1, 1],\n rotation: 0,\n style: { ...defaultStyle, isFilled: true },\n assetId: 'assetId',\n },\n props\n )\n }\n\n Component = TDShapeUtil.Component(\n ({ shape, asset = { src: '' }, isBinding, isGhost, meta, events, onShapeChange }, ref) => {\n const { size, style } = shape\n\n const rImage = React.useRef(null)\n const rWrapper = React.useRef(null)\n\n React.useLayoutEffect(() => {\n const wrapper = rWrapper.current\n if (!wrapper) return\n const [width, height] = size\n wrapper.style.width = `${width}px`\n wrapper.style.height = `${height}px`\n }, [size])\n \n return (\n \n {isBinding && (\n \n \n )\n }\n )\n\n Indicator = TDShapeUtil.Indicator(({ shape }) => {\n const {\n size: [width, height],\n } = shape\n\n return (\n {\n type = TDShapeType.Video as const\n canBind = true\n canEdit = true\n canClone = true\n isAspectRatioLocked = true\n showCloneHandles = true\n isStateful = true // don't unmount\n\n getShape = (props: Partial): T => {\n return Utils.deepMerge(\n {\n id: 'video',\n type: TDShapeType.Video,\n name: 'Video',\n parentId: 'page',\n childIndex: 1,\n point: [0, 0],\n size: [1, 1],\n rotation: 0,\n style: defaultStyle,\n assetId: 'assetId',\n isPlaying: true,\n currentTime: 0,\n },\n props\n )\n }\n\n Component = TDShapeUtil.Component(\n (\n { shape, asset = { src: '' }, isBinding, isEditing, isGhost, meta, events, onShapeChange },\n ref\n ) => {\n const rVideo = React.useRef(null)\n const rWrapper = React.useRef(null)\n\n const { currentTime = 0, size, isPlaying, style } = shape\n\n React.useLayoutEffect(() => {\n const wrapper = rWrapper.current\n if (!wrapper) return\n const [width, height] = size\n wrapper.style.width = `${width}px`\n wrapper.style.height = `${height}px`\n }, [size])\n\n React.useLayoutEffect(() => {\n const video = rVideo.current\n if (!video) return\n if (isPlaying) video.play()\n // throws error on safari\n else video.pause()\n }, [isPlaying])\n\n React.useLayoutEffect(() => {\n const video = rVideo.current\n if (!video) return\n if (currentTime !== video.currentTime) {\n video.currentTime = currentTime\n }\n }, [currentTime])\n\n const handlePlay = React.useCallback(() => {\n onShapeChange?.({ id: shape.id, isPlaying: true })\n }, [])\n\n const handlePause = React.useCallback(() => {\n onShapeChange?.({ id: shape.id, isPlaying: false })\n }, [])\n\n const handleSetCurrentTime = React.useCallback(() => {\n const video = rVideo.current\n if (!video) return\n if (!isEditing) return\n onShapeChange?.({ id: shape.id, currentTime: video.currentTime })\n }, [isEditing])\n\n return (\n \n {isBinding && (\n \n \n \n )\n }\n )\n\n Indicator = TDShapeUtil.Indicator(({ shape }) => {\n const {\n size: [width, height],\n } = shape\n\n return (\n {\n type = TDShapeType.Sticker as const\n\n canBind = true\n\n canClone = true\n\n isAspectRatioLocked = true\n\n showCloneHandles = false\n\n getShape = (props: Partial): T => {\n return Utils.deepMerge(\n {\n id: 'sticker',\n type: TDShapeType.Sticker,\n name: 'sticker',\n parentId: 'page',\n childIndex: 1,\n point: [0, 0],\n size: [50, 50],\n rotation: 0,\n style: { ...defaultStyle, isFilled: true },\n assetId: 'assetId',\n svg: '',\n },\n props\n )\n }\n\n Component = TDShapeUtil.Component(\n ({ shape, isBinding, isGhost, meta, events, onShapeChange }, ref) => {\n const { size, style } = shape\n const rImage = React.useRef(null)\n const rWrapper = React.useRef(null)\n\n React.useLayoutEffect(() => {\n const wrapper = rWrapper.current\n if (!wrapper) return\n const [width, height] = size\n wrapper.style.width = `${width}px`\n wrapper.style.height = `${height}px`\n }, [size])\n\n return (\n \n \n {shape.svg.startsWith('\n
\n )}\n \n \n )\n }\n )\n\n Indicator = TDShapeUtil.Indicator\n 
\n
\n \n {embed.info(shape.src).source}
\n\n \n \n
\n\n {/* \n \n {shape.title?.length > 20 ? `${shape.title?.slice(0, 20)}...` : shape.title}\n \n\n \n Edited by {shape.firstName} {shape.time} ago\n
\n \n \n \n {seperator}\n window.open(`${shape.url}`, '_blank')}\n >\n {shape.fileType}\n
\n {seperator}\n \n {shape.avatarUrl.length === 0 ? (\n \n ) : (\n shape.avatarUrl.map((item, i) => (\n
\n \n \n