@yuzhouu/canvas-kit 0.1.2 → 0.1.4

package/_vendor/plugin-text/TextShapeSvgExporter.ts

@@ -1,101 +0,0 @@
-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

@@ -1,284 +0,0 @@
-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

@@ -1,228 +0,0 @@
-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);
-}