@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-text/TextShapeSvgExporter.ts

@@ -0,0 +1,101 @@
+import {
+  type ShapeSvgExporter,
+  type SvgNode,
+} from "@land/canvas-core";
+import type { JSONContent } from "@tiptap/core";
+import type { RichTextDocument, TextShapeRecord } from "./textTypes";
+import { getPlainTextFromRichText } from "./richTextUtils";
+import {
+  getTextAlign,
+  getTextFontFamily,
+  getTextFontSize,
+  getTextLineHeight,
+} from "./textStyle";
+import {
+  getRichTextTextNodeStyle,
+  isRichTextTextNode,
+} from "./richTextUtils";
+
+export class TextShapeSvgExporter
+  implements ShapeSvgExporter<TextShapeRecord>
+{
+  readonly type = "text" as const;
+
+  toSvg(shape: TextShapeRecord): SvgNode | null {
+    const text = getPlainTextFromRichText(shape.props.richText);
+    if (text.trim().length === 0) {
+      return null;
+    }
+
+    return {
+      tag: "foreignObject",
+      attrs: {
+        x: 0,
+        y: 0,
+        width: shape.props.w * shape.props.scale,
+        height: shape.props.h * shape.props.scale,
+      },
+      children: [
+        {
+          tag: "div",
+          attrs: {
+            xmlns: "http://www.w3.org/1999/xhtml",
+            dir: "auto",
+            style: getTextShapeExportStyle(shape),
+          },
+          children: richTextDocumentToSvgNodes(shape.props.richText),
+        },
+      ],
+    };
+  }
+}
+
+function richTextDocumentToSvgNodes(richText: RichTextDocument): SvgNode[] {
+  return richText.content.map((node) => richTextBlockToSvgNode(node));
+}
+
+function richTextBlockToSvgNode(node: JSONContent): SvgNode {
+  const children =
+    node.content?.map((child) => richTextNodeToSvgNode(child)) ?? [];
+  return {
+    tag: "p",
+    attrs: { style: "margin:0" },
+    children: children.length > 0 ? children : [{ tag: "br" }],
+  };
+}
+
+function richTextNodeToSvgNode(node: JSONContent): SvgNode {
+  if (isRichTextTextNode(node)) {
+    const style = getRichTextTextNodeStyle(node);
+    if (!style) {
+      return node.text;
+    }
+    return {
+      tag: "span",
+      attrs: { style },
+      children: [node.text],
+    };
+  }
+
+  return {
+    tag: "span",
+    children: node.content?.map((child) => richTextNodeToSvgNode(child)) ?? [],
+  };
+}
+
+function getTextShapeExportStyle(shape: TextShapeRecord): string {
+  return [
+    `color:${shape.props.color}`,
+    `font-family:${getTextFontFamily(shape.props.font)}`,
+    `font-size:${getTextFontSize(shape.props.size)}px`,
+    `line-height:${getTextLineHeight(shape.props.size)}px`,
+    `text-align:${getTextAlign(shape.props.textAlign)}`,
+    "white-space:pre-wrap",
+    "overflow-wrap:break-word",
+    "box-sizing:border-box",
+    `width:${shape.props.w}px`,
+    `height:${shape.props.h}px`,
+    `transform:scale(${shape.props.scale})`,
+    "transform-origin:top left",
+  ].join(";");
+}

package/_vendor/plugin-text/TextShapeUtil.ts

@@ -0,0 +1,284 @@
+import {
+  Box,
+  ShapeUtil,
+  Vec,
+  getAnchoredSelectionResizeLocalBounds,
+  type ShapeId,
+  type ShapeEditEndResult,
+  type ShapeSelectionFrameInput,
+  type ShapeSelectionResizeAspectRatioLockInput,
+  type ShapeSelectionResizeInput,
+  type ShapeSelectionTranslateInput,
+  type ShapeUpdate,
+} from "@land/canvas-core";
+import {
+  type TextShapeAlign,
+  type TextShapeFont,
+  type TextShapeProps,
+  type TextShapeRecord,
+  type TextShapeSize,
+} from "./textTypes";
+import {
+  createRichTextFromPlainText,
+  getPlainTextFromRichText,
+  validateRichTextDocument,
+} from "./richTextUtils";
+import { DEFAULT_TEXT_FONT, getTextMinHeight } from "./textStyle";
+import {
+  getTextLabelSelectionTargetId,
+  getTextLabelTranslateTargetId,
+  textLabelCanUseSelectionFrameHandles,
+  textLabelContributesToSelectionFrame,
+} from "./textLabelHelpers";
+
+const TEXT_FONTS: readonly TextShapeFont[] = [
+  "noto-sans-sc",
+  "noto-serif-sc",
+  "noto-sans-mono",
+  "ma-shan-zheng",
+];
+const TEXT_SIZES: readonly TextShapeSize[] = ["s", "m", "l", "xl"];
+const TEXT_ALIGNS: readonly TextShapeAlign[] = ["start", "middle", "end"];
+const TEXT_MIN_WIDTH = 16;
+const TEXT_MIN_SCALE = 0.01;
+
+function clampNumber(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+function isTextFont(value: unknown): value is TextShapeFont {
+  return typeof value === "string" && TEXT_FONTS.includes(value as TextShapeFont);
+}
+
+function isTextSize(value: unknown): value is TextShapeSize {
+  return typeof value === "string" && TEXT_SIZES.includes(value as TextShapeSize);
+}
+
+function isTextAlign(value: unknown): value is TextShapeAlign {
+  return typeof value === "string" && TEXT_ALIGNS.includes(value as TextShapeAlign);
+}
+
+function getTextScale(shape: TextShapeRecord): number {
+  return Math.max(TEXT_MIN_SCALE, shape.props.scale);
+}
+
+function getTextVisualWidth(shape: TextShapeRecord): number {
+  return shape.props.w * getTextScale(shape);
+}
+
+function getTextVisualHeight(shape: TextShapeRecord): number {
+  return shape.props.h * getTextScale(shape);
+}
+
+function getTextVisualBounds(shape: TextShapeRecord): Box {
+  return new Box(shape.x, shape.y, getTextVisualWidth(shape), getTextVisualHeight(shape));
+}
+
+function getTextVisualLocalBounds(shape: TextShapeRecord): Box {
+  return new Box(0, 0, getTextVisualWidth(shape), getTextVisualHeight(shape));
+}
+
+function isTextWidthResizeHandle(
+  handleId: ShapeSelectionResizeInput["handleId"],
+): boolean {
+  return handleId === "left" || handleId === "right";
+}
+
+function getTextScaleDelta(
+  shape: TextShapeRecord,
+  input: ShapeSelectionResizeInput,
+): number {
+  const widthRatio =
+    input.selectionLocalBounds.w / Math.max(1, getTextVisualWidth(shape));
+  const heightRatio =
+    input.selectionLocalBounds.h / Math.max(1, getTextVisualHeight(shape));
+
+  switch (input.handleId) {
+    case "left":
+    case "right":
+      return widthRatio;
+    case "top":
+    case "bottom":
+      return heightRatio;
+    default:
+      return Math.max(widthRatio, heightRatio);
+  }
+}
+
+function selectionLocalPointToPagePoint(
+  point: Vec,
+  input: ShapeSelectionResizeInput,
+): Vec {
+  return input.selectionRotation === 0
+    ? point.clone()
+    : Vec.RotWith(
+        point,
+        input.selectionRotationCenter,
+        input.selectionRotation,
+      );
+}
+
+export class TextShapeUtil extends ShapeUtil<TextShapeRecord> {
+  readonly type = "text" as const;
+
+  getDefaultProps(): TextShapeProps {
+    return {
+      richText: createRichTextFromPlainText(""),
+      w: 16,
+      h: getTextMinHeight("m"),
+      autoSize: true,
+      scale: 1,
+      font: DEFAULT_TEXT_FONT,
+      size: "m",
+      color: "#0f172a",
+      textAlign: "start",
+    };
+  }
+
+  validateProps(props: unknown): TextShapeProps {
+    const candidate =
+      props && typeof props === "object"
+        ? (props as Partial<TextShapeProps>)
+        : {};
+    const fallback = this.getDefaultProps();
+
+    return {
+      richText: validateRichTextDocument(candidate.richText),
+      w: Math.max(1, clampNumber(candidate.w, fallback.w)),
+      h: Math.max(1, clampNumber(candidate.h, fallback.h)),
+      autoSize:
+        typeof candidate.autoSize === "boolean"
+          ? candidate.autoSize
+          : fallback.autoSize,
+      scale: Math.max(0.01, clampNumber(candidate.scale, fallback.scale)),
+      font: isTextFont(candidate.font) ? candidate.font : fallback.font,
+      size: isTextSize(candidate.size) ? candidate.size : fallback.size,
+      color:
+        typeof candidate.color === "string" ? candidate.color : fallback.color,
+      textAlign: isTextAlign(candidate.textAlign)
+        ? candidate.textAlign
+        : fallback.textAlign,
+    };
+  }
+
+  getBounds(shape: TextShapeRecord): Box {
+    return getTextVisualBounds(shape);
+  }
+
+  getLocalBounds(shape: TextShapeRecord): Box {
+    return getTextVisualLocalBounds(shape);
+  }
+
+  getRenderBounds(shape: TextShapeRecord): Box {
+    return getTextVisualLocalBounds(shape);
+  }
+
+  getExportBounds(shape: TextShapeRecord): Box {
+    return getTextVisualLocalBounds(shape);
+  }
+
+  canEdit(_shape: TextShapeRecord): boolean {
+    return true;
+  }
+
+  contributesToSelectionFrame(
+    shape: TextShapeRecord,
+    input: ShapeSelectionFrameInput,
+  ): boolean {
+    return (
+      textLabelContributesToSelectionFrame(input.editor, shape.id) ?? true
+    );
+  }
+
+  canUseSelectionFrameHandles(
+    shape: TextShapeRecord,
+    input: ShapeSelectionFrameInput,
+  ): boolean {
+    return textLabelCanUseSelectionFrameHandles(input.editor, shape.id) ?? true;
+  }
+
+  getSelectionTargetId(
+    shape: TextShapeRecord,
+    input: ShapeSelectionFrameInput,
+  ): ShapeId {
+    return getTextLabelSelectionTargetId(input.editor, shape.id) ?? shape.id;
+  }
+
+  getTranslateTargetId(
+    shape: TextShapeRecord,
+    input: ShapeSelectionTranslateInput,
+  ): ShapeId {
+    return getTextLabelTranslateTargetId(input.editor, shape.id) ?? shape.id;
+  }
+
+  resizeSelectionBounds(
+    shape: TextShapeRecord,
+    input: ShapeSelectionResizeInput,
+  ): ShapeUpdate {
+    const nextProps: Partial<TextShapeProps> = {};
+
+    if (isTextWidthResizeHandle(input.handleId)) {
+      const nextW = Math.max(
+        TEXT_MIN_WIDTH,
+        input.selectionLocalBounds.w / getTextScale(shape),
+      );
+      nextProps.w = nextW;
+      nextProps.autoSize = false;
+    } else {
+      nextProps.scale = Math.max(
+        TEXT_MIN_SCALE,
+        shape.props.scale * getTextScaleDelta(shape, input),
+      );
+    }
+
+    const nextScale = nextProps.scale ?? getTextScale(shape);
+    const nextW = nextProps.w ?? shape.props.w;
+    const visualWidth = nextW * nextScale;
+    const visualHeight = shape.props.h * nextScale;
+    const anchoredBounds = getAnchoredSelectionResizeLocalBounds({
+      handleId: input.handleId,
+      requestedBounds: input.selectionLocalBounds,
+      actualWidth: visualWidth,
+      actualHeight: visualHeight,
+      scaleX: input.scaleX,
+      scaleY: input.scaleY,
+      isResizingFromCenter: input.isResizingFromCenter,
+    });
+    const pageCenter = selectionLocalPointToPagePoint(
+      anchoredBounds.center,
+      input,
+    );
+    const flipsSingleAxis =
+      (input.scaleX < 0) !== (input.scaleY < 0);
+
+    return {
+      id: shape.id,
+      x: pageCenter.x - visualWidth / 2,
+      y: pageCenter.y - visualHeight / 2,
+      rotation: flipsSingleAxis
+        ? input.selectionRotation * 2 - shape.rotation
+        : shape.rotation,
+      scaleX: input.scaleX < 0 ? -shape.scaleX : shape.scaleX,
+      scaleY: input.scaleY < 0 ? -shape.scaleY : shape.scaleY,
+      props: nextProps,
+    };
+  }
+
+  getSelectionResizeAspectRatioLock(
+    _shape: TextShapeRecord,
+    input: ShapeSelectionResizeAspectRatioLockInput,
+  ): boolean | null {
+    if (!input.isOnlySelected) {
+      return null;
+    }
+    return !isTextWidthResizeHandle(input.handleId);
+  }
+
+  onEditEnd(shape: TextShapeRecord): ShapeEditEndResult | void {
+    if (getPlainTextFromRichText(shape.props.richText).trim().length > 0) {
+      return;
+    }
+
+    return { deleteShapeIds: [shape.id] };
+  }
+}

package/_vendor/plugin-text/TextTool.ts

@@ -0,0 +1,228 @@
+import {
+  StateNode,
+  Vec,
+  reparentShapeToContainingParent,
+  type Editor,
+  type PointerEditorEvent,
+} from "@land/canvas-core";
+import {
+  type TextShapeProps,
+  type TextShapeRecord,
+} from "./textTypes";
+import {
+  cloneTextShapeProps,
+  createTextShape,
+  getDefaultTextShapeProps,
+  isTextShapeRecord,
+} from "./textShapeHelpers";
+
+const TEXT_CREATE_HISTORY_MARK = "text.create";
+const DRAG_CREATE_DISTANCE_THRESHOLD = 4;
+const FIXED_TEXT_HORIZONTAL_THRESHOLD = 8;
+const MIN_FIXED_TEXT_WIDTH = 16;
+
+interface PointingTextInfo {
+  originPagePoint: Vec;
+  shapeId: TextShapeRecord["id"] | null;
+  didCreateShape: boolean;
+}
+
+export class TextTool extends StateNode {
+  constructor(editor: Editor) {
+    super(editor, "text");
+    this.initial = "idle";
+    this.addChild(new TextIdleState(editor, this));
+    this.addChild(new TextPointingState(editor, this));
+  }
+}
+
+class TextIdleState extends StateNode {
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "idle", parent);
+  }
+
+  protected onEnter(): void {
+    this.editor.clearSelectionTransients();
+  }
+
+  protected onPointerDown(event: PointerEditorEvent): void {
+    this.transition("pointing", {
+      originPagePoint: event.pagePoint.clone(),
+      shapeId: null,
+      didCreateShape: false,
+    } satisfies PointingTextInfo);
+  }
+}
+
+class TextPointingState extends StateNode {
+  private info: PointingTextInfo | null = null;
+
+  constructor(editor: Editor, parent: StateNode) {
+    super(editor, "pointing", parent);
+  }
+
+  protected onEnter(info?: unknown): void {
+    this.info = info as PointingTextInfo;
+    this.editor.history.mark(TEXT_CREATE_HISTORY_MARK);
+  }
+
+  protected onPointerMove(event: PointerEditorEvent): void {
+    this.updateFixedWidthShape(event.pagePoint);
+  }
+
+  protected onPointerUp(event: PointerEditorEvent): void {
+    if (!this.info) {
+      this.transition("idle");
+      return;
+    }
+
+    const created =
+      this.info.shapeId !== null
+        ? this.editor.getShape(this.info.shapeId)
+        : this.createTextShape(event.pagePoint);
+    if (!isTextShapeRecord(created)) {
+      this.editor.history.bailToMark(TEXT_CREATE_HISTORY_MARK);
+      this.transition("idle");
+      return;
+    }
+    this.info.didCreateShape = true;
+    reparentShapeToContainingParent(this.editor, created.id, {
+      source: "user",
+    });
+
+    if (!this.editor.isToolLocked()) {
+      this.transition("idle");
+      this.editor.commands.setActiveTool("select", { source: "system" });
+    }
+
+    this.editor.startEditingShape(
+      {
+        shapeId: created.id,
+        entryMode: "focusEnd",
+        markId: TEXT_CREATE_HISTORY_MARK,
+        reuseExistingMark: true,
+        preserveInteraction: true,
+      },
+      "user",
+    );
+
+    if (this.editor.isToolLocked()) {
+      this.transition("idle");
+    }
+  }
+
+  protected onCancel(): void {
+    if (!this.info?.didCreateShape) {
+      this.editor.history.bailToMark(TEXT_CREATE_HISTORY_MARK);
+    }
+    this.transition("idle");
+  }
+
+  protected onExit(): void {
+    this.info = null;
+  }
+
+  private updateFixedWidthShape(pagePoint: Vec): void {
+    if (!this.info) {
+      return;
+    }
+
+    const draft = getFixedWidthTextDraft(
+      this.info.originPagePoint,
+      pagePoint,
+      this.getDefaultTextProps(),
+    );
+    if (!draft) {
+      return;
+    }
+
+    if (!this.info.shapeId) {
+      const created = this.createTextShapeAt(draft);
+      this.info.shapeId = created.id;
+      return;
+    }
+
+    this.editor.commands.updateShapes(
+      [
+        {
+          id: this.info.shapeId,
+          x: draft.x,
+          y: draft.y,
+          props: {
+            w: draft.props.w,
+            h: draft.props.h,
+            autoSize: false,
+          },
+        },
+      ],
+      { source: "user" },
+    );
+  }
+
+  private createTextShape(pagePoint: Vec): TextShapeRecord {
+    return this.createTextShapeAt(
+      getAutoSizeTextDraft(pagePoint, this.getDefaultTextProps()),
+    );
+  }
+
+  private createTextShapeAt({
+    x,
+    y,
+    props,
+  }: {
+    x: number;
+    y: number;
+    props: TextShapeProps;
+  }): TextShapeRecord {
+    const created = createTextShape(this.editor, { x, y, props }, "user");
+
+    this.editor.commands.setSelectedShapeIds([created.id], {
+      source: "system",
+    });
+    return created;
+  }
+
+  private getDefaultTextProps(): TextShapeProps {
+    return getDefaultTextShapeProps(this.editor);
+  }
+}
+
+function getAutoSizeTextDraft(
+  pagePoint: Vec,
+  defaults: TextShapeProps,
+): { x: number; y: number; props: TextShapeProps } {
+  return {
+    x: pagePoint.x,
+    y: pagePoint.y - defaults.h / 2,
+    props: cloneTextProps(defaults),
+  };
+}
+
+function getFixedWidthTextDraft(
+  originPagePoint: Vec,
+  pagePoint: Vec,
+  defaults: TextShapeProps,
+): { x: number; y: number; props: TextShapeProps } | null {
+  const horizontalDistance = Math.abs(pagePoint.x - originPagePoint.x);
+  const dragDistance = originPagePoint.dist(pagePoint);
+  if (
+    dragDistance < DRAG_CREATE_DISTANCE_THRESHOLD ||
+    horizontalDistance < FIXED_TEXT_HORIZONTAL_THRESHOLD
+  ) {
+    return null;
+  }
+
+  return {
+    x: Math.min(originPagePoint.x, pagePoint.x),
+    y: originPagePoint.y - defaults.h / 2,
+    props: {
+      ...cloneTextProps(defaults),
+      w: Math.max(MIN_FIXED_TEXT_WIDTH, horizontalDistance),
+      autoSize: false,
+    },
+  };
+}
+
+function cloneTextProps(props: TextShapeProps): TextShapeProps {
+  return cloneTextShapeProps(props);
+}