tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(canvas): 绘图工具支持自定义 tldraw License Key (#100)

Browse Source 
* feat(canvas): 绘图工具 - 支持自定义 tldraw License Key

* docs(canvas): 绘图工具 - 添加 License Key 页面截图
This commit is contained in:
ahyang
2026-08-03 21:38:04 +08:00
committed by GitHub
parent 9b3ec218e2
commit d83ec033bb
11 changed files with 186 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/canvas/canvas-drawing-editor-modal.tsx
View File

@@ -6,6 +6,7 @@ import type { CanvasDrawingEditorHandle } from "@/components/canvas/canvas-drawi
import { drawingEngineForNode, drawingEngineLabel, isDrawingEngineAvailable } from "@/lib/canvas/canvas-drawing-engine";
import { loadCanvasDrawing, saveCanvasDrawing, type CanvasDrawingSnapshot } from "@/lib/canvas/canvas-drawing-storage";
import { useThemeStore } from "@/stores/use-theme-store";
import { useUserStore } from "@/stores/use-user-store";
import type { CanvasNodeData } from "@/types/canvas";
const CanvasDrawingTldrawEditor = lazy(() => import("@/components/canvas/canvas-drawing-tldraw-editor").then((module) => ({ default: module.CanvasDrawingTldrawEditor })));
@@ -22,6 +23,7 @@ type CanvasDrawingEditorModalProps = {
export function CanvasDrawingEditorModal({ open, projectId, node, onClose, onSaved }: CanvasDrawingEditorModalProps) {
const { message } = App.useApp();
const colorScheme = useThemeStore((state) => state.theme);
const tldrawLicenseKey = useUserStore((state) => state.drawingEngine.tldrawLicenseKey);
const engine = drawingEngineForNode(node);
const currentRef = useRef<CanvasDrawingSnapshot | null>(null);
const editorRef = useRef<CanvasDrawingEditorHandle | null>(null);
@@ -76,7 +78,7 @@ export function CanvasDrawingEditorModal({ open, projectId, node, onClose, onSav
onClose();
};
const unavailable = !isDrawingEngineAvailable(engine);
const unavailable = !isDrawingEngineAvailable(engine, tldrawLicenseKey);
return (
<Modal open={open} onCancel={() => void handleClose()} footer={null} closable={false} destroyOnHidden width="100vw" centered styles={{ body: { padding: 0 }, container: { padding: 0, overflow: "hidden" } }} className="canvas-drawing-editor-modal">
<div className="flex h-[min(92dvh,980px)] flex-col">

7
web/src/components/canvas/canvas-drawing-tldraw-editor.tsx
View File

@@ -4,12 +4,15 @@ import type { Editor } from "tldraw";
import "tldraw/tldraw.css";
import type { CanvasDrawingEditorHandle, CanvasDrawingEditorProps } from "@/components/canvas/canvas-drawing-editor-types";
import { resolveTldrawLicenseKey } from "@/lib/canvas/canvas-drawing-engine";
import { useUserStore } from "@/stores/use-user-store";
const SINGLE_PAGE_OPTIONS = { maxPages: 1 } as const;
const DRAWING_RENDER_MAX_DIMENSION = 2048;
const DRAWING_RENDER_PADDING = 24;
export const CanvasDrawingTldrawEditor = forwardRef<CanvasDrawingEditorHandle, CanvasDrawingEditorProps>(function CanvasDrawingTldrawEditor({ snapshot, colorScheme, onReady }, ref) {
const tldrawLicenseKey = useUserStore((state) => state.drawingEngine.tldrawLicenseKey);
const store = useMemo(() => {
const next = createTLStore();
if (snapshot) loadSnapshot(next, snapshot as never);
@@ -46,7 +49,7 @@ export const CanvasDrawingTldrawEditor = forwardRef<CanvasDrawingEditorHandle, C
locale="zh-cn"
colorScheme={colorScheme}
options={SINGLE_PAGE_OPTIONS}
licenseKey={import.meta.env.VITE_TLDRAW_LICENSE_KEY || undefined}
licenseKey={resolveTldrawLicenseKey(tldrawLicenseKey)}
onMount={(editor) => {
editorRef.current = editor;
// 绘图节点只保留单页，避免预览和生成引用出现页选择歧义。
@@ -61,4 +64,4 @@ export const CanvasDrawingTldrawEditor = forwardRef<CanvasDrawingEditorHandle, C
}}
/>
);
});
});