feat(canvas): refine connections, text styles and icon editing
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import type { Node, XYPosition } from "@xyflow/react";
|
||||
|
||||
export type ElementKind = "text" | "image" | "script" | "plain-text";
|
||||
export type ElementKind = "text" | "image" | "script" | "plain-text" | "icon";
|
||||
export type TextStyle = { color?: string; background?: string; bold?: boolean; italic?: boolean; underline?: boolean; align?: "left" | "center" | "right"; fontFamily?: "sans" | "serif" | "mono"; lineHeight?: number };
|
||||
export type CanvasNodeData = {
|
||||
kind: ElementKind;
|
||||
title: string;
|
||||
@@ -8,8 +9,10 @@ export type CanvasNodeData = {
|
||||
src?: string;
|
||||
rotation?: number;
|
||||
fontSize?: number;
|
||||
textStyle?: TextStyle;
|
||||
icon?: string;
|
||||
};
|
||||
export type CanvasNode = Node<CanvasNodeData, "material" | "plainText">;
|
||||
export type CanvasNode = Node<CanvasNodeData, "material" | "plainText" | "icon">;
|
||||
export type ElementCapabilities = { resizable: boolean; rotatable: boolean; connectable: boolean; branchable: boolean };
|
||||
|
||||
/** Business inheritance only: React views reuse these capabilities by composition. */
|
||||
@@ -47,7 +50,14 @@ export class ImageCardElement extends CardElement { readonly kind = "image"; rea
|
||||
export class ScriptCardElement extends CardElement { readonly kind = "script"; readonly title = "脚本"; }
|
||||
export class PlainTextElement extends CanvasElement { readonly kind = "plain-text"; readonly title = "纯文本"; }
|
||||
|
||||
export const elementClasses = { text: TextCardElement, image: ImageCardElement, script: ScriptCardElement, "plain-text": PlainTextElement };
|
||||
export class IconElement extends CanvasElement {
|
||||
readonly kind = "icon"; readonly title = "图标";
|
||||
protected override readonly nodeType = "icon" as const;
|
||||
protected override readonly size = { width: 80, height: 80 };
|
||||
override toNode(): CanvasNode { const node = super.toNode(); return { ...node, data: { ...node.data, icon: "Star" } }; }
|
||||
}
|
||||
|
||||
export const elementClasses = { text: TextCardElement, image: ImageCardElement, script: ScriptCardElement, "plain-text": PlainTextElement, icon: IconElement };
|
||||
export function elementCapabilities(kind: ElementKind) { return elementClasses[kind].capabilities; }
|
||||
export function createCanvasElement(kind: ElementKind, position: XYPosition, src?: string): CanvasNode {
|
||||
return new elementClasses[kind](position, "", src).toNode();
|
||||
|
||||
Reference in New Issue
Block a user