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

53
web/src/pages/admin/settings/drawing-engine-settings-page.tsx
View File

@@ -1,4 +1,4 @@
import { App, Button, Segmented, Tag } from "antd";
import { App, Button, Input, Segmented, Tag } from "antd";
import { Brush, Save } from "lucide-react";
import { useEffect, useState } from "react";
@@ -13,6 +13,7 @@ export default function DrawingEngineSettingsPage() {
const current = useUserStore((state) => state.drawingEngine);
const setDrawingEngine = useUserStore((state) => state.setDrawingEngine);
const [engine, setEngine] = useState<CanvasDrawingEngine>(current.defaultEngine);
const [tldrawLicenseKey, setTldrawLicenseKey] = useState(current.tldrawLicenseKey || "");
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
@@ -22,6 +23,7 @@ export default function DrawingEngineSettingsPage() {
if (cancelled) return;
setDrawingEngine(setting);
setEngine(setting.defaultEngine);
setTldrawLicenseKey(setting.tldrawLicenseKey || "");
}).catch((error) => {
if (!cancelled) message.error(error instanceof Error ? error.message : "读取绘图工具配置失败");
}).finally(() => {
@@ -30,17 +32,19 @@ export default function DrawingEngineSettingsPage() {
return () => { cancelled = true; };
}, [message, setDrawingEngine]);
const tldrawAvailable = isDrawingEngineAvailable("tldraw", tldrawLicenseKey);
const save = async () => {
if (!isDrawingEngineAvailable(engine)) {
message.error("当前生产构建未配置 tldraw License Key");
if (!isDrawingEngineAvailable(engine, tldrawLicenseKey)) {
message.error("请先配置有效的 tldraw License Key");
return;
}
setSaving(true);
try {
const { setting } = await updateAdminDrawingEngineSetting(engine);
const { setting } = await updateAdminDrawingEngineSetting({ defaultEngine: engine, tldrawLicenseKey });
setDrawingEngine(setting);
setEngine(setting.defaultEngine);
message.success("默认绘图工具已更新");
setTldrawLicenseKey(setting.tldrawLicenseKey || "");
message.success("绘图工具配置已更新");
} catch (error) {
message.error(error instanceof Error ? error.message : "保存绘图工具配置失败");
} finally {
@@ -48,28 +52,35 @@ export default function DrawingEngineSettingsPage() {
}
};
const dirty = engine !== current.defaultEngine;
const dirty = engine !== current.defaultEngine || tldrawLicenseKey !== (current.tldrawLicenseKey || "");
return (
<AdminPageFrame title="绘图工具" description="设置新建绘图节点使用的默认编辑器">
<div className="mx-auto max-w-4xl space-y-5">
<SettingsSectionCard icon={<Brush className="size-4" />} title="默认绘图引擎" description="已有绘图保持原引擎，仅新建绘图使用这里的选择。" status={<Tag variant="filled" color="blue">{drawingEngineLabel(current.defaultEngine)}</Tag>}>
<div className="flex flex-col gap-4 px-5 py-5 sm:flex-row sm:items-center sm:justify-between">
<Segmented<CanvasDrawingEngine>
block
className="w-full sm:max-w-md"
disabled={loading || saving}
value={engine}
onChange={setEngine}
options={[
{ label: "Excalidraw", value: "excalidraw" },
{ label: "tldraw", value: "tldraw", disabled: !isDrawingEngineAvailable("tldraw") },
]}
/>
<Button type="primary" icon={<Save className="size-4" />} loading={saving} disabled={loading || !dirty} onClick={() => void save()}>保存配置</Button>
<div className="flex flex-col gap-5 px-5 py-5">
<div className="w-full sm:max-w-md">
<label className="mb-2 block text-sm font-medium">tldraw License Key</label>
<Input.Password value={tldrawLicenseKey} onChange={(event) => setTldrawLicenseKey(event.target.value)} placeholder="输入 tldraw License Key" disabled={loading || saving} autoComplete="off" />
<p className="mt-2 text-xs text-foreground/55">填入有效的 License Key 后保存，即可解锁 tldraw 选项。</p>
</div>
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<Segmented<CanvasDrawingEngine>
block
className="w-full sm:max-w-md"
disabled={loading || saving}
value={engine}
onChange={setEngine}
options={[
{ label: "Excalidraw", value: "excalidraw" },
{ label: "tldraw", value: "tldraw", disabled: !tldrawAvailable },
]}
/>
<Button type="primary" icon={<Save className="size-4" />} loading={saving} disabled={loading || !dirty} onClick={() => void save()}>保存配置</Button>
</div>
</div>
{!isDrawingEngineAvailable("tldraw") ? <div className="border-t border-border px-5 py-3 text-xs text-amber-600 dark:text-amber-400">当前生产构建没有 tldraw License Key，不能将其设为新建默认值。</div> : null}
{!tldrawAvailable ? <div className="border-t border-border px-5 py-3 text-xs text-amber-600 dark:text-amber-400">当前未配置 tldraw License Key，不能将其设为新建默认值。</div> : null}
</SettingsSectionCard>
</div>
</AdminPageFrame>
);
}
}

6
web/src/pages/canvas/use-canvas-connection-controller.ts
View File

@@ -8,6 +8,7 @@ import { attachNodeToStoryboardRow, createCanvasNode, getConnectionTargetAnchor,
import { createCanvasDrawingFromImage } from "@/lib/canvas/canvas-drawing-storage";
import { isDrawingEngineAvailable, type CanvasDrawingEngine } from "@/lib/canvas/canvas-drawing-engine";
import { isFrameNode, isNodeHiddenByCollapsedFrame } from "@/lib/canvas/canvas-frame";
import { useUserStore } from "@/stores/use-user-store";
import { CanvasNodeType, type CanvasConnection, type CanvasNodeData, type ConnectionHandle, type ContextMenuState, type Position, type ViewportTransform } from "@/types/canvas";
type UseCanvasConnectionControllerOptions = {
@@ -55,6 +56,7 @@ export function useCanvasConnectionController({
setDrawingNodeId,
}: UseCanvasConnectionControllerOptions) {
const { message } = App.useApp();
const tldrawLicenseKey = useUserStore((state) => state.drawingEngine.tldrawLicenseKey);
const [connectingParams, setConnectingParams] = useState<ConnectionHandle | null>(null);
const [connectionTargetNodeId, setConnectionTargetNodeId] = useState<string | null>(null);
const [connectionTargetAnchorRatio, setConnectionTargetAnchorRatio] = useState<number | undefined>();
@@ -114,7 +116,7 @@ export function useCanvasConnectionController({
}, [connectionsRef, message, nodesRef, setConnections, setContextMenu, setNodes]);
const createConnectedNode = useCallback(async (type: CanvasNodeType.Image | CanvasNodeType.Text | CanvasNodeType.Script | CanvasNodeType.Video | CanvasNodeType.Audio | CanvasNodeType.Drawing, pending: PendingConnectionCreate) => {
if (type === CanvasNodeType.Drawing && !isDrawingEngineAvailable(defaultDrawingEngine)) {
if (type === CanvasNodeType.Drawing && !isDrawingEngineAvailable(defaultDrawingEngine, tldrawLicenseKey)) {
message.error("当前生产构建未配置 tldraw License Key，不能创建 tldraw 绘图");
return;
}
@@ -190,7 +192,7 @@ export function useCanvasConnectionController({
else if (type !== CanvasNodeType.Text && type !== CanvasNodeType.Script && type !== CanvasNodeType.Audio) setDialogNodeId(newNode.id);
closeConnectionCreateMenu();
setConnecting(null);
}, [closeConnectionCreateMenu, defaultDrawingEngine, message, nodesRef, projectId, setConnecting, setConnections, setDialogNodeId, setDrawingNodeId, setNodes, setSelectedConnectionId, setSelectedNodeIds]);
}, [closeConnectionCreateMenu, defaultDrawingEngine, message, nodesRef, projectId, setConnecting, setConnections, setDialogNodeId, setDrawingNodeId, setNodes, setSelectedConnectionId, setSelectedNodeIds, tldrawLicenseKey]);
const getConnectionDropTarget = useCallback((clientX: number, clientY: number, current: ConnectionHandle): ConnectionDropTarget => {
const world = screenToCanvas(clientX, clientY);

6
web/src/pages/canvas/use-canvas-node-operations.ts
View File

@@ -10,6 +10,7 @@ import { isolateCopiedNodeMetadata } from "@/lib/canvas/canvas-node-copy";
import { CanvasNodeType, type CanvasConnection, type CanvasNodeData, type ContextMenuState, type Position } from "@/types/canvas";
import { cloneCanvasDrawing } from "@/lib/canvas/canvas-drawing-storage";
import { isDrawingEngineAvailable, type CanvasDrawingEngine } from "@/lib/canvas/canvas-drawing-engine";
import { useUserStore } from "@/stores/use-user-store";
type CanvasClipboard = {
nodes: CanvasNodeData[];
@@ -52,6 +53,7 @@ export function useCanvasNodeOperations({
onNodesDeleted,
}: UseCanvasNodeOperationsOptions) {
const { message } = App.useApp();
const tldrawLicenseKey = useUserStore((state) => state.drawingEngine.tldrawLicenseKey);
const clipboardRef = useRef<CanvasClipboard | null>(null);
const preferCopiedNodesRef = useRef(false);
const markerWritePendingRef = useRef(false);
@@ -120,7 +122,7 @@ export function useCanvasNodeOperations({
}, [selectedNodeIdsRef, setSelectedConnectionId, setSelectedNodeIds]);
const createNode = useCallback((type: CanvasNodeType, position?: Position) => {
if (type === CanvasNodeType.Drawing && !isDrawingEngineAvailable(defaultDrawingEngine)) {
if (type === CanvasNodeType.Drawing && !isDrawingEngineAvailable(defaultDrawingEngine, tldrawLicenseKey)) {
message.error("当前生产构建未配置 tldraw License Key，不能创建 tldraw 绘图");
return;
}
@@ -128,7 +130,7 @@ export function useCanvasNodeOperations({
commitNodes([...nodesRef.current, node]);
selectNodes(new Set([node.id]));
if (type !== CanvasNodeType.Text && type !== CanvasNodeType.Script && type !== CanvasNodeType.Audio && type !== CanvasNodeType.Frame && type !== CanvasNodeType.Drawing) setDialogNodeId(node.id);
}, [commitNodes, defaultDrawingEngine, getCanvasCenter, message, nodesRef, selectNodes, setDialogNodeId]);
}, [commitNodes, defaultDrawingEngine, getCanvasCenter, message, nodesRef, selectNodes, setDialogNodeId, tldrawLicenseKey]);
const arrangeSelectedNodes = useCallback((mode: "row" | "column" | "grid" | "flow") => {
const selected = nodesRef.current.filter((node) => selectedNodeIdsRef.current.has(node.id) && !node.metadata?.locked && !isFrameNode(node));