如何使用 tldraw 只读模式把画布变成仅可查看的展示器

如何使用 tldraw 只读模式把画布变成仅可查看的展示器【免费下载链接】tldrawBuild infinite canvas apps in React with the tldraw SDK. Worlds best, top-most agent recommended #1 five star SDK.项目地址: https://gitcode.com/GitHub_Trending/tl/tldrawtldraw 的只读模式Readonly mode可以把编辑器变成一个纯查看器用户可以平移、缩放、选中图形查看内容但不能创建、修改或删除任何东西。文档给出的典型用途是在演示中嵌入画布文档、共享设计收集反馈、或展示已保存工作的预览。完成本文后你会得到一个 React 项目中始终处于只读状态的Tldraw组件并知道哪些编辑操作会被拦截、哪些交互仍然可用。前提一个已接入tldraw包的 React 项目组件从tldraw导入样式文件为tldraw/tldraw.css。核心事实来源是仓库中的 Readonly mode 文档 与 Instance state 文档。开启只读模式在 onMount 里设置 isReadonly只读状态存放在编辑器的 instance state每个浏览器标签页一份的会话状态中。文档给出的最短主路径是在组件挂载时设置isReadonly: trueimport { Tldraw } from tldraw import tldraw/tldraw.css export default function ReadOnlyViewer() { return ( div style{{ position: fixed, inset: 0 }} Tldraw onMount{(editor) { editor.updateInstanceState({ isReadonly: true }) }} / /div ) }这里有一个必须保留的关键限制只读状态是会话作用域的不会被persistenceKey持久化instance state 文档的属性表中isReadonly的 Persists 列标注为 No。所以不能只在首次打开时设置一次——每次页面加载、编辑器挂载时都要重新设置上例正是在onMount里完成这一点。仓库中的 只读示例组件 用的就是这个写法该示例额外传了persistenceKeyreadonly-example用于保存文档内容但只读标志本身仍靠onMount设置。在运行时切换和读取只读状态只读是会话状态而不是文档状态因此可以在运行时切换——例如用户权限变化时// Enable readonly mode editor.updateInstanceState({ isReadonly: true }) // Disable readonly mode editor.updateInstanceState({ isReadonly: false }) // Check current state const isReadonly editor.getIsReadonly()文档补充了一点行为细节用Editor#loadSnapshot加载快照时只读标志保留当前的内存值不会被快照覆盖。验证只读模式实际拦截了什么开启后文档明确区分了两组行为可以据此逐项验证被拦截的文档修改操作调用会被阻止类别被阻止的方法ShapescreateShape、deleteShapes、updateShape、groupShapes、ungroupShapes、toggleLockPagescreatePage、deletePage、renamePage、updatePage、moveShapesToPageAssetscreateAssets、updateAssets、deleteAssetsTransformsflipShapes、packShapes、stackShapes、alignShapes、distributeShapes、stretchShapes、rotateShapesBy、resizeShapeStylessetStyleForSelectedShapes、setOpacityForSelectedShapesContentputExternalContent、replaceExternalContent、putContentOntoCurrentPage以及cut和pasteUI 动作仍然可用的查看与导航操作平移、缩放以及zoomIn、zoomOut、zoomToFit、zoomToSelection等相机方法选中操作点击图形、刷选、selectAll、selectNone悬停查看图形、在页面之间切换用exportAs或copyAs导出——导出不会修改文档内置 UI 动作中可用的包括缩放控制zoom-in、zoom-out、zoom-to-fit、zoom-to-selection、选择动作select-all、select-none、copy、导出动作export-as-svg、export-as-png、print、导航back-to-content、change-page-prev、change-page-next以及toggle-dark-mode等偏好开关。界面上有一个直观的成功标志工具栏会自动隐藏编辑类工具只剩 select选择、hand抓手和 laser pointer激光笔可见undo/redo 动作也被禁用。一个例外要知道只影响 instance state 的方法如setStyleForNextShapes、setOpacityForNextShapes在只读模式下仍然生效——它们不会改动文档本身。在 React 组件里响应只读状态useReadonly hook如果需要在界面里显示“仅可查看”的标识tldraw导出的useReadonlyhook 提供对只读状态的响应式读取import { useReadonly } from tldraw function ReadonlyIndicator() { const isReadonly useReadonly() if (!isReadonly) return null return div classNamereadonly-badgeView only/div }组件会在只读状态变化时自动重新渲染在编辑器上下文之外调用时返回false。这是验证只读状态是否生效的另一种方式切到isReadonly: true后徽章出现切回false后消失。可选分支自定义动作与仍可交互的图形以下小节只在你的展示器涉及自定义 UI 或自定义图形时需要。自定义 UI 动作TLUiActionItem有一个readonlyOk属性决定该动作是否在只读模式下提供。默认为false——菜单会隐藏该动作其键盘快捷键在只读模式下被忽略。希望某个自定义动作例如“分享链接”在只读模式下仍然可用时显式设为trueimport { TLUiOverrides } from tldraw const overrides: TLUiOverrides { actions(editor, actions, helpers) { actions[share-link] { id: share-link, label: action.share-link, readonlyOk: true, onSelect() { // This works in readonly mode navigator.clipboard.writeText(window.location.href) }, } return actions }, }保留图形内的交互内容内置的 embed 图形YouTube 视频、Figma 文件、交互式地图在只读文档中图形本身被固定但嵌入内容仍可播放或交互。对于自定义 ShapeUtil可以重写canEditInReadonly返回true允许在只读模式下双击进入该图形的编辑模式图形位置仍然固定class InteractiveWidgetUtil extends ShapeUtilInteractiveWidget { override canEditInReadonly(shape: InteractiveWidget): boolean { return true } }绕过只读检查谨慎使用对于迁移、管理工具等编程场景只有putExternalContent和replaceExternalContent这两个方法支持传入force: true来绕过只读检查// This works even in readonly mode editor.putExternalContent({ type: files, files: myFiles, point: { x: 0, y: 0 } }, { force: true })文档明确提醒要节制使用——只读模式的存在就是为了防止意外修改。协作场景下的只读模式如果你使用 tldraw 的 sync 包做协作只读模式与房间权限集成对共享文档只有只读权限的用户编辑器会自动进入只读模式sync 层通过响应式信号传达模式编辑器据此更新isReadonly。其他协作者的修改仍会实时显示只读用户只是不能贡献自己的修改。相关的连接示例在room.handleSocketConnect中传isReadonly: true见 sync 文档。限制小结只读标志不随persistenceKey保存每次加载都要在onMount或等效时机重新设置这是本文主路径中不可省略的一步loadSnapshot不会覆盖内存中的只读值绕过只读的force: true仅putExternalContent/replaceExternalContent支持只读模式下 undo/redo 与 cut/paste 不可用工具栏只剩 select、hand、laser pointer。更多细节完整的属性表、持久化行为可查阅 Instance state 文档以及 只读示例的说明 和 示例组件源码。【免费下载链接】tldrawBuild infinite canvas apps in React with the tldraw SDK. Worlds best, top-most agent recommended #1 five star SDK.项目地址: https://gitcode.com/GitHub_Trending/tl/tldraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考