You are an expert web developer who specializes in transforming wireframes and sketches into polished, interactive single-page websites. Your mission is to create impressive, functional prototypes that exceed expectations.
| import { useEffect, useState } from 'react' | |
| export type TLTypeFace = { | |
| url: string | |
| display?: any // FontDisplay | |
| featureSettings?: string | |
| stretch?: string | |
| style?: string | |
| unicodeRange?: string | |
| variant?: string |
| /** | |
| * Get a point along an arc. | |
| * | |
| * @param center - The arc's center. | |
| * @param radius - The arc's radius. | |
| * @param startAngle - The start point of the arc. | |
| * @param size - The size of the arc. | |
| * @param t - The point along the arc to get. | |
| */ |
| function getTextBoundingBox(text: SVGTextElement) { | |
| const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') | |
| svg.appendChild(text) | |
| document.body.appendChild(svg) | |
| const bbox = text.getBoundingClientRect() | |
| document.body.removeChild(svg) | |
| return bbox | |
| } |
| // ========================= | |
| // Modified code originally from <https://github.com/qzb/is-animated> | |
| // | |
| // # [MIT License](https://spdx.org/licenses/MIT) | |
| // | |
| // Copyright (c) 2016 Józef Sokołowski <[email protected]> | |
| // | |
| // Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: | |
| // | |
| // The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. |
| import '@tldraw/tldraw/tldraw.css' | |
| import { RecordsDiff, TLRecord, Tldraw, useEditor } from '@tldraw/tldraw' | |
| import { useEffect, useRef } from 'react' | |
| export default function App() { | |
| return ( | |
| <div className="tldraw__editor"> | |
| <Tldraw autoFocus> | |
| <Slider /> | |
| </Tldraw> |
| const serializableTypes = new Set(['string', 'number', 'boolean', 'undefined']) | |
| /** | |
| * Get whether a value is serializable. | |
| * | |
| * @example | |
| * | |
| * ```ts | |
| * const A = isSerializable(1) // true |
| import { Node, mergeAttributes } from "@tiptap/core"; | |
| import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react"; | |
| import { Tldraw } from "@tldraw/tldraw"; // use @tldraw/tldraw@canary | |
| import "@tldraw/tldraw/tldraw.css"; | |
| function Component() { | |
| return ( | |
| <NodeViewWrapper className="react-component"> | |
| <div style={{ width: "100%", height: 500 }}> | |
| <Tldraw /> |
| export async function writeV1ContentsToIdb() { | |
| // openDB is a wrapper around indexedDB.open that adds a version migration hook, but we've had to drop it as a dependency. Here it is quicky re-implemented: | |
| function openDB(name: string, version: number) { | |
| const request = indexedDB.open(name, version) | |
| return new Promise<IDBDatabase>((resolve, reject) => { | |
| request.onerror = () => reject(request.error) | |
| request.onsuccess = () => resolve(request.result) | |
| request.onupgradeneeded = () => { | |
| const db = request.result |
| { | |
| "action.convert-to-bookmark": "Convert to Bookmark", | |
| "action.convert-to-embed": "Convert to Embed", | |
| "action.open-embed-link": "Open link", | |
| "action.align-bottom": "Align bottom", | |
| "action.align-center-horizontal": "Align horizontally", | |
| "action.align-center-vertical": "Align vertically", | |
| "action.align-center-horizontal.short": "Align H", | |
| "action.align-center-vertical.short": "Align V", | |
| "action.align-left": "Align left", |
