tldraw
欢迎来到 tldraw[1] 的公共代码仓库。
什么是 tldraw？
tldraw 是一个可在 tldraw.com[2] 上使用的协作式数字白板。它的编辑器、用户界面和其他底层库是开源的，且在这个仓库中可用。这些库也在 npm 上分发。你可以使用 tldraw 为你的产品创建一个即插即用的白板，或作为构建你自己的无限画布应用程序的基础。
在 tldraw.dev[3] 了解更多信息。
注意 这个仓库包含了 tldraw 当前版本 的源代码。你可以在这里[4]找到原始版本的源代码。
安装与使用
要了解如何在你的 React 应用程序中使用 tldraw，请按照我们的指南 这里[5] 操作，或查看 示例沙箱[6]。
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
export default function () {
return (
<div style={{ position: 'fixed', inset: 0 }}>
<Tldraw />
</div>
)
}
本地开发
首先克隆此仓库以运行本地开发服务器。
安装依赖：
yarn
启动本地开发服务器：
yarn dev
在 localhost:5420 打开示例项目。
示例
我们的开发服务器包含了几个示例，展示了你可以如何定制 tldraw 或使用其 API。每个示例都在 apps/examples [7] 文件夹中找到。
•例如：localhost:5420 查看基础示例。
•例如：localhost:5420/api 查看 API 示例。
要了解更多关于使用 tldraw 的信息，访问我们的文档[8]。
关于这个仓库
顶层布局
这个仓库的内容分布在四个主要部分：
•/apps 包含我们应用程序的源代码
•/packages 包含我们公共包的源代码
•/scripts 包含用于构建和发布的脚本
•/assets 包含应用程序所依赖的图标和翻译
•/docs 包含我们在 tldraw.dev[9] 的文档站点的内容
应用程序
•examples：我们的本地开发/示例项目
•vscode：我们的 Visual Studio Code 扩展[10]
包
•assets：用于处理 tldraw 字体和翻译的库
•editor：tldraw 编辑器
•state：一个信号库，也称为 signia
•store：一个内存中的响应式数据库
•tldraw：包含编辑器和 UI 的主要 tldraw 包
•tlschema：形状定义和迁移
•utils：由其他库共享的底层数据实用工具
•validate：用于运行时验证的验证库
更多信息参考：GitHub - tldraw/tldraw: a very good whiteboard[11]
References
[1] tldraw: https://tldraw.com/
[2] tldraw.com: https://tldraw.com/
[3] tldraw.dev: https://tldraw.dev/
[4] 这里: https://github.com/tldraw/tldraw-v1
[5] 这里: https://tldraw.dev/installation
[6] 示例沙箱: https://stackblitz.com/github/tldraw/tldraw/tree/examples?file=src%2F1-basic%2FBasicExample.tsx
[7] apps/examples : https://github.com/tldraw/tldraw/tree/main/apps/examples
[8] 访问我们的文档: https://tldraw.dev/
[9] tldraw.dev: https://tldraw.dev/
[10] Visual Studio Code 扩展: https://marketplace.visualstudio.com/items?itemName=tldraw-org.tldraw-vscode
[11] GitHub - tldraw/tldraw: a very good whiteboard: https://github.com/tldraw/tldraw