{ "version": 3, "sources": ["../../../../src/lib/shapes/shared/defaultStyleDefs.tsx"], "sourcesContent": ["import {\n\tDefaultColorThemePalette,\n\tDefaultFontFamilies,\n\tDefaultFontStyle,\n\tHASH_PATTERN_ZOOM_NAMES,\n\tMAX_ZOOM,\n\tSvgExportDef,\n\tTLDefaultColorTheme,\n\tTLDefaultFillStyle,\n\tTLDefaultFontStyle,\n\tTLShapeUtilCanvasSvgDef,\n\tdebugFlags,\n\tuseEditor,\n} from '@tldraw/editor'\nimport { useEffect, useMemo, useRef, useState } from 'react'\n\n/** @public */\nexport function getFontDefForExport(fontStyle: TLDefaultFontStyle): SvgExportDef {\n\treturn {\n\t\tkey: `${DefaultFontStyle.id}:${fontStyle}`,\n\t\tgetElement: async () => {\n\t\t\tconst font = findFont(fontStyle)\n\t\t\tif (!font) return null\n\n\t\t\tconst url = (font as any).$$_url\n\t\t\tconst fontFaceRule = (font as any).$$_fontface\n\t\t\tif (!url || !fontFaceRule) return null\n\n\t\t\tconst fontFile = await (await fetch(url)).blob()\n\t\t\tconst base64FontFile = await new Promise((resolve, reject) => {\n\t\t\t\tconst reader = new FileReader()\n\t\t\t\treader.onload = () => resolve(reader.result as string)\n\t\t\t\treader.onerror = reject\n\t\t\t\treader.readAsDataURL(fontFile)\n\t\t\t})\n\n\t\t\tconst newFontFaceRule = fontFaceRule.replace(url, base64FontFile)\n\t\t\tconst style = document.createElementNS('http://www.w3.org/2000/svg', 'style')\n\t\t\tstyle.textContent = newFontFaceRule\n\t\t\treturn style\n\t\t},\n\t}\n}\n\nfunction findFont(name: TLDefaultFontStyle): FontFace | null {\n\tconst fontFamily = DefaultFontFamilies[name]\n\tfor (const font of document.fonts) {\n\t\tif (fontFamily.includes(font.family)) {\n\t\t\treturn font\n\t\t}\n\t}\n\treturn null\n}\n\n/** @public */\nexport function getFillDefForExport(\n\tfill: TLDefaultFillStyle,\n\ttheme: TLDefaultColorTheme\n): SvgExportDef {\n\treturn {\n\t\tkey: `${DefaultFontStyle.id}:${fill}`,\n\t\tgetElement: async () => {\n\t\t\tif (fill !== 'pattern') return null\n\n\t\t\tconst t = 8 / 12\n\t\t\tconst divEl = document.createElement('div')\n\t\t\tdivEl.innerHTML = `\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t`\n\t\t\treturn Array.from(divEl.querySelectorAll('defs > *'))\n\t\t},\n\t}\n}\n\nexport function getFillDefForCanvas(): TLShapeUtilCanvasSvgDef {\n\treturn {\n\t\tkey: `${DefaultFontStyle.id}:pattern`,\n\t\tcomponent: PatternFillDefForCanvas,\n\t}\n}\nconst TILE_PATTERN_SIZE = 8\n\nconst generateImage = (dpr: number, currentZoom: number, darkMode: boolean) => {\n\treturn new Promise((resolve, reject) => {\n\t\tconst size = TILE_PATTERN_SIZE * currentZoom * dpr\n\n\t\tconst canvasEl = document.createElement('canvas')\n\t\tcanvasEl.width = size\n\t\tcanvasEl.height = size\n\n\t\tconst ctx = canvasEl.getContext('2d')\n\t\tif (!ctx) return\n\n\t\tctx.fillStyle = darkMode ? '#212529' : '#f8f9fa'\n\t\tctx.fillRect(0, 0, size, size)\n\n\t\t// This essentially generates an inverse of the pattern we're drawing.\n\t\tctx.globalCompositeOperation = 'destination-out'\n\n\t\tctx.lineCap = 'round'\n\t\tctx.lineWidth = 1.25 * currentZoom * dpr\n\n\t\tconst t = 8 / 12\n\t\tconst s = (v: number) => v * currentZoom * dpr\n\n\t\tctx.beginPath()\n\t\tctx.moveTo(s(t * 1), s(t * 3))\n\t\tctx.lineTo(s(t * 3), s(t * 1))\n\n\t\tctx.moveTo(s(t * 5), s(t * 7))\n\t\tctx.lineTo(s(t * 7), s(t * 5))\n\n\t\tctx.moveTo(s(t * 9), s(t * 11))\n\t\tctx.lineTo(s(t * 11), s(t * 9))\n\t\tctx.stroke()\n\n\t\tcanvasEl.toBlob((blob) => {\n\t\t\tif (!blob || debugFlags.throwToBlob.value) {\n\t\t\t\treject()\n\t\t\t} else {\n\t\t\t\tresolve(blob)\n\t\t\t}\n\t\t})\n\t})\n}\n\nconst canvasBlob = (size: [number, number], fn: (ctx: CanvasRenderingContext2D) => void) => {\n\tconst canvas = document.createElement('canvas')\n\tcanvas.width = size[0]\n\tcanvas.height = size[1]\n\tconst ctx = canvas.getContext('2d')\n\tif (!ctx) return ''\n\tfn(ctx)\n\treturn canvas.toDataURL()\n}\ntype PatternDef = { zoom: number; url: string; darkMode: boolean }\n\nconst getDefaultPatterns = () => {\n\tconst defaultPatterns: PatternDef[] = []\n\tfor (let i = 1; i <= Math.ceil(MAX_ZOOM); i++) {\n\t\tconst whitePixelBlob = canvasBlob([1, 1], (ctx) => {\n\t\t\tctx.fillStyle = DefaultColorThemePalette.lightMode.black.semi\n\t\t\tctx.fillRect(0, 0, 1, 1)\n\t\t})\n\t\tconst blackPixelBlob = canvasBlob([1, 1], (ctx) => {\n\t\t\tctx.fillStyle = DefaultColorThemePalette.darkMode.black.semi\n\t\t\tctx.fillRect(0, 0, 1, 1)\n\t\t})\n\t\tdefaultPatterns.push({\n\t\t\tzoom: i,\n\t\t\turl: whitePixelBlob,\n\t\t\tdarkMode: false,\n\t\t})\n\t\tdefaultPatterns.push({\n\t\t\tzoom: i,\n\t\t\turl: blackPixelBlob,\n\t\t\tdarkMode: true,\n\t\t})\n\t}\n\treturn defaultPatterns\n}\n\nfunction usePattern() {\n\tconst editor = useEditor()\n\tconst dpr = editor.instanceState.devicePixelRatio\n\tconst [isReady, setIsReady] = useState(false)\n\tconst defaultPatterns = useMemo(() => getDefaultPatterns(), [])\n\tconst [backgroundUrls, setBackgroundUrls] = useState(defaultPatterns)\n\n\tuseEffect(() => {\n\t\tconst promises: Promise<{ zoom: number; url: string; darkMode: boolean }>[] = []\n\n\t\tfor (let i = 1; i <= Math.ceil(MAX_ZOOM); i++) {\n\t\t\tpromises.push(\n\t\t\t\tgenerateImage(dpr, i, false).then((blob) => ({\n\t\t\t\t\tzoom: i,\n\t\t\t\t\turl: URL.createObjectURL(blob),\n\t\t\t\t\tdarkMode: false,\n\t\t\t\t}))\n\t\t\t)\n\t\t\tpromises.push(\n\t\t\t\tgenerateImage(dpr, i, true).then((blob) => ({\n\t\t\t\t\tzoom: i,\n\t\t\t\t\turl: URL.createObjectURL(blob),\n\t\t\t\t\tdarkMode: true,\n\t\t\t\t}))\n\t\t\t)\n\t\t}\n\n\t\tlet isCancelled = false\n\t\tPromise.all(promises).then((urls) => {\n\t\t\tif (isCancelled) return\n\t\t\tsetBackgroundUrls(urls)\n\t\t\tsetIsReady(true)\n\t\t})\n\n\t\treturn () => {\n\t\t\tisCancelled = true\n\t\t\tsetIsReady(false)\n\t\t}\n\t}, [dpr])\n\n\tconst defs = (\n\t\t<>\n\t\t\t{backgroundUrls.map((item) => {\n\t\t\t\tconst key = item.zoom + (item.darkMode ? '_dark' : '_light')\n\t\t\t\treturn (\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t)\n\t\t\t})}\n\t\t\n\t)\n\n\treturn { defs, isReady }\n}\n\nfunction PatternFillDefForCanvas() {\n\tconst editor = useEditor()\n\tconst containerRef = useRef(null)\n\tconst { defs, isReady } = usePattern()\n\n\tuseEffect(() => {\n\t\tif (isReady && editor.environment.isSafari) {\n\t\t\tconst htmlLayer = findHtmlLayerParent(containerRef.current!)\n\t\t\tif (htmlLayer) {\n\t\t\t\t// Wait for `patternContext` to be picked up\n\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\thtmlLayer.style.display = 'none'\n\n\t\t\t\t\t// Wait for 'display = \"none\"' to take effect\n\t\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\t\thtmlLayer.style.display = ''\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\t}, [editor, isReady])\n\n\treturn {defs}\n}\n\nfunction findHtmlLayerParent(element: Element): HTMLElement | null {\n\tif (element.classList.contains('tl-html-layer')) return element as HTMLElement\n\tif (element.parentElement) return findHtmlLayerParent(element.parentElement)\n\treturn null\n}\n"], "mappings": "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", "names": [] }