@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-text/textLabelHelpers.ts

@@ -0,0 +1,235 @@
+import type { Editor, ShapeId, ShapeRecord } from "@land/canvas-core";
+import {
+  createTextShape,
+  getDefaultTextShapeProps,
+  isTextShapeRecord,
+} from "./textShapeHelpers";
+import type { TextShapeProps, TextShapeRecord } from "./textTypes";
+
+export const ARROW_LABEL_BINDING_TYPE = "arrow-label";
+export const GEO_LABEL_BINDING_TYPE = "geo-label";
+
+export type TextLabelBindingType =
+  | typeof ARROW_LABEL_BINDING_TYPE
+  | typeof GEO_LABEL_BINDING_TYPE;
+
+export interface TextLabelBehavior {
+  selectionTarget: "label" | "owner";
+  translateTarget: "label" | "owner";
+  contributesToSelectionFrame: boolean;
+  canUseSelectionFrameHandles: boolean;
+  canPlaceCaretWhenOwnerSelected: boolean;
+  showsCompanionFrameWhenOwnerSelected: boolean;
+}
+
+// Bound text labels need four independent answers:
+// what gets selected on click, what actually moves on drag, whether the
+// label can still enter caret editing while its owner is the current selection,
+// and whether owner selection should still surface a companion border for the label.
+// Keeping that policy in one table avoids split-brain behavior between
+// TextShapeUtil and textInteractions.
+const TEXT_LABEL_BEHAVIOR_BY_BINDING_TYPE = {
+  [ARROW_LABEL_BINDING_TYPE]: {
+    selectionTarget: "owner",
+    translateTarget: "owner",
+    contributesToSelectionFrame: true,
+    canUseSelectionFrameHandles: false,
+    canPlaceCaretWhenOwnerSelected: true,
+    showsCompanionFrameWhenOwnerSelected: true,
+  },
+  [GEO_LABEL_BINDING_TYPE]: {
+    selectionTarget: "owner",
+    translateTarget: "owner",
+    contributesToSelectionFrame: false,
+    canUseSelectionFrameHandles: true,
+    canPlaceCaretWhenOwnerSelected: true,
+    showsCompanionFrameWhenOwnerSelected: false,
+  },
+} satisfies Record<TextLabelBindingType, TextLabelBehavior>;
+
+export interface TextLabelTargetInfo {
+  label: TextShapeRecord;
+  ownerId: ShapeId;
+  bindingType: TextLabelBindingType;
+  behavior: TextLabelBehavior;
+}
+
+export interface TextLabelCreateOptions {
+  bindingType: TextLabelBindingType;
+  owner: ShapeRecord;
+  historyMarkId: string;
+  index: string;
+  layout: Pick<TextShapeRecord, "x" | "y" | "rotation"> & {
+    props: Pick<TextShapeProps, "w"> & Partial<TextShapeProps>;
+  };
+  bindingProps?: Record<string, unknown>;
+}
+
+export function getTextLabelShapeForOwner(
+  editor: Editor,
+  ownerId: ShapeId,
+  bindingType: TextLabelBindingType,
+): TextShapeRecord | null {
+  const binding = editor
+    .getBindingsToShape(ownerId)
+    .find((candidate) => candidate.type === bindingType);
+  if (!binding) {
+    return null;
+  }
+
+  const label = editor.getShape(binding.fromId);
+  return isTextShapeRecord(label) ? label : null;
+}
+
+export function createBoundTextLabelShape(
+  editor: Editor,
+  options: TextLabelCreateOptions,
+): TextShapeRecord {
+  const defaults = getDefaultTextShapeProps(editor);
+  editor.history.mark(options.historyMarkId);
+  const label = createTextShape(
+    editor,
+    {
+      x: options.layout.x,
+      y: options.layout.y,
+      parentId: options.owner.parentId,
+      index: options.index,
+      rotation: options.layout.rotation,
+      props: {
+        ...defaults,
+        ...options.layout.props,
+        autoSize: false,
+        textAlign: "middle",
+      },
+    },
+    "user",
+  );
+
+  editor.commands.createBinding(
+    {
+      type: options.bindingType,
+      fromId: label.id,
+      toId: options.owner.id,
+      props: options.bindingProps,
+    },
+    { source: "user" },
+  );
+
+  return label;
+}
+
+export function getTextLabelTargetInfo(
+  editor: Editor,
+  shapeId: ShapeId,
+): TextLabelTargetInfo | null {
+  const label = editor.getShape(shapeId);
+  if (!isTextShapeRecord(label)) {
+    return null;
+  }
+
+  const ownerBinding = editor
+    .getBindingsFromShape(shapeId)
+    .find((binding) => binding.type in TEXT_LABEL_BEHAVIOR_BY_BINDING_TYPE);
+  if (!ownerBinding) {
+    return null;
+  }
+  const bindingType = ownerBinding.type as TextLabelBindingType;
+
+  return {
+    label,
+    ownerId: ownerBinding.toId,
+    bindingType,
+    behavior: TEXT_LABEL_BEHAVIOR_BY_BINDING_TYPE[bindingType],
+  };
+}
+
+export function getTextLabelBehavior(
+  bindingType: TextLabelBindingType,
+): TextLabelBehavior {
+  return TEXT_LABEL_BEHAVIOR_BY_BINDING_TYPE[bindingType];
+}
+
+export function getTextLabelSelectionTargetId(
+  editor: Editor,
+  shapeId: ShapeId,
+): ShapeId | null {
+  const target = getTextLabelTargetInfo(editor, shapeId);
+  if (!target) {
+    return null;
+  }
+  return target.behavior.selectionTarget === "owner" ? target.ownerId : shapeId;
+}
+
+export function getTextLabelTranslateTargetId(
+  editor: Editor,
+  shapeId: ShapeId,
+): ShapeId | null {
+  const target = getTextLabelTargetInfo(editor, shapeId);
+  if (!target) {
+    return null;
+  }
+  return target.behavior.translateTarget === "owner" ? target.ownerId : shapeId;
+}
+
+export function textLabelContributesToSelectionFrame(
+  editor: Editor,
+  shapeId: ShapeId,
+): boolean | null {
+  return getTextLabelTargetInfo(editor, shapeId)?.behavior
+    .contributesToSelectionFrame ?? null;
+}
+
+export function textLabelCanUseSelectionFrameHandles(
+  editor: Editor,
+  shapeId: ShapeId,
+): boolean | null {
+  return getTextLabelTargetInfo(editor, shapeId)?.behavior
+    .canUseSelectionFrameHandles ?? null;
+}
+
+export function textLabelShowsCompanionFrameWhenOwnerSelected(
+  editor: Editor,
+  shapeId: ShapeId,
+): boolean | null {
+  return getTextLabelTargetInfo(editor, shapeId)?.behavior
+    .showsCompanionFrameWhenOwnerSelected ?? null;
+}
+
+export function canPlaceCaretInTextShapeFromSelection(
+  editor: Editor,
+  shapeId: ShapeId,
+): boolean {
+  const selectedShapeIds = editor.getSelectedShapeIds();
+  if (selectedShapeIds.length !== 1) {
+    return false;
+  }
+  if (selectedShapeIds[0] === shapeId) {
+    return true;
+  }
+
+  const target = getTextLabelTargetInfo(editor, shapeId);
+  return target
+    ? target.behavior.canPlaceCaretWhenOwnerSelected &&
+        selectedShapeIds[0] === target.ownerId
+    : false;
+}
+
+export function startEditingTextLabel(
+  editor: Editor,
+  label: TextShapeRecord,
+  options: {
+    editMarkId: string;
+    createMarkId: string;
+    isExisting: boolean;
+  },
+): void {
+  editor.startEditingShape(
+    {
+      shapeId: label.id,
+      entryMode: "selectAll",
+      markId: options.isExisting ? options.editMarkId : options.createMarkId,
+      reuseExistingMark: !options.isExisting,
+    },
+    "user",
+  );
+}

package/_vendor/plugin-text/textShapeHelpers.ts

@@ -0,0 +1,123 @@
+import type {
+  BaseRecord,
+  ChangeSource,
+  Editor,
+  ShapeId,
+  ShapeParentId,
+} from "@land/canvas-core";
+import { isShapeRecord } from "@land/canvas-core";
+import { createRichTextFromPlainText } from "./richTextUtils";
+import type {
+  RichTextDocument,
+  TextShapeProps,
+  TextShapeRecord,
+} from "./textTypes";
+
+export interface CreateTextShapeInput {
+  x: number;
+  y: number;
+  props?: Partial<TextShapeProps>;
+  parentId?: ShapeParentId;
+  index?: string;
+  rotation?: number;
+  scaleX?: number;
+  scaleY?: number;
+  meta?: Record<string, unknown>;
+}
+
+export function isTextShapeRecord(
+  record: BaseRecord | null | undefined,
+): record is TextShapeRecord {
+  return isShapeRecord(record) && record.type === "text";
+}
+
+export function cloneTextShapeProps(props: TextShapeProps): TextShapeProps {
+  return {
+    richText: props.richText,
+    w: props.w,
+    h: props.h,
+    autoSize: props.autoSize,
+    scale: props.scale,
+    font: props.font,
+    size: props.size,
+    color: props.color,
+    textAlign: props.textAlign,
+  };
+}
+
+export function getDefaultTextShapeProps(editor: Editor): TextShapeProps {
+  return cloneTextShapeProps(editor.getDefaultShapeProps<TextShapeProps>("text"));
+}
+
+export function createTextShape(
+  editor: Editor,
+  input: CreateTextShapeInput,
+  source: ChangeSource = "user",
+): TextShapeRecord {
+  const defaults = getDefaultTextShapeProps(editor);
+  const props: TextShapeProps = {
+    ...defaults,
+    ...input.props,
+    richText: input.props?.richText ?? createRichTextFromPlainText(""),
+  };
+  const [created] = editor.commands.createShapes(
+    [
+      {
+        type: "text",
+        x: input.x,
+        y: input.y,
+        parentId: input.parentId,
+        index: input.index,
+        rotation: input.rotation,
+        scaleX: input.scaleX,
+        scaleY: input.scaleY,
+        meta: input.meta,
+        props: {
+          richText: props.richText,
+          w: props.w,
+          h: props.h,
+          autoSize: props.autoSize,
+          scale: props.scale,
+          font: props.font,
+          size: props.size,
+          color: props.color,
+          textAlign: props.textAlign,
+        },
+      },
+    ],
+    { source },
+  );
+
+  if (!isTextShapeRecord(created)) {
+    throw new Error("Failed to create text shape");
+  }
+
+  return created;
+}
+
+export function updateTextShapeRichText(
+  editor: Editor,
+  shapeId: ShapeId,
+  richText: RichTextDocument,
+  options?: { w?: number; h?: number },
+  source: ChangeSource = "user",
+): void {
+  const shape = editor.getShape(shapeId);
+  if (!isTextShapeRecord(shape)) {
+    return;
+  }
+
+  editor.commands.updateShapes(
+    [
+      {
+        id: shape.id,
+        props: {
+          richText,
+          ...(typeof options?.w === "number" ? { w: options.w } : null),
+          ...(typeof options?.h === "number" ? { h: options.h } : null),
+        },
+      },
+    ],
+    { source },
+  );
+}

package/_vendor/plugin-text/textStyle.ts

@@ -0,0 +1,96 @@
+import type {
+  TextShapeAlign,
+  TextShapeFont,
+  TextShapeRecord,
+  TextShapeSize,
+} from "./textTypes";
+
+export const DEFAULT_TEXT_FONT: TextShapeFont = "noto-sans-sc";
+
+const TEXT_SIZE_METRICS = {
+  s: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  m: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  l: {
+    fontSize: 20,
+    lineHeight: 28,
+  },
+  xl: {
+    fontSize: 28,
+    lineHeight: 36,
+  },
+} as const satisfies Record<
+  TextShapeSize,
+  {
+    fontSize: number;
+    lineHeight: number;
+  }
+>;
+
+export function getTextFontFamily(font: TextShapeFont): string {
+  switch (font) {
+    case "noto-sans-sc":
+      return "'Noto Sans SC', Inter, ui-sans-serif, system-ui, sans-serif";
+    case "noto-serif-sc":
+      return "'Noto Serif SC', Georgia, Cambria, serif";
+    case "noto-sans-mono":
+      return "'Noto Sans Mono', 'SFMono-Regular', Consolas, monospace";
+    case "ma-shan-zheng":
+      return "'Ma Shan Zheng', 'Comic Sans MS', 'Marker Felt', cursive";
+    default:
+      return "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+  }
+}
+
+export function getTextFontSize(size: TextShapeSize): number {
+  return TEXT_SIZE_METRICS[size].fontSize;
+}
+
+export function getTextLineHeight(size: TextShapeSize): number {
+  return TEXT_SIZE_METRICS[size].lineHeight;
+}
+
+export function getTextMinHeight(
+  size: TextShapeSize,
+  scale = 1,
+): number {
+  return Math.max(1, Math.ceil(getTextLineHeight(size) * scale));
+}
+
+export function getTextAlign(align: TextShapeAlign): "left" | "center" | "right" {
+  switch (align) {
+    case "middle":
+      return "center";
+    case "end":
+      return "right";
+    case "start":
+    default:
+      return "left";
+  }
+}
+
+export function getTextAnchorX(
+  align: TextShapeRecord["props"]["textAlign"],
+  width: number,
+): number {
+  switch (align) {
+    case "middle":
+      return width / 2;
+    case "end":
+      return width;
+    case "start":
+    default:
+      return 0;
+  }
+}
+
+export function getSvgTextAnchor(
+  align: TextShapeRecord["props"]["textAlign"],
+): "start" | "middle" | "end" {
+  return align;
+}

package/_vendor/plugin-text/textTypes.ts

@@ -0,0 +1,48 @@
+import type { ShapeRecordBase } from "@land/canvas-core";
+import type { JSONContent } from "@tiptap/core";
+
+export type RichTextJsonValue =
+  | string
+  | number
+  | boolean
+  | null
+  | RichTextJsonValue[]
+  | { [key: string]: RichTextJsonValue };
+
+export interface RichTextDocument {
+  type: "doc";
+  attrs?: Record<string, RichTextJsonValue>;
+  content: JSONContent[];
+}
+
+type AssertTiptapJsonContent<T extends JSONContent> = T;
+type _RichTextDocumentTiptapCompatibilityCheck =
+  AssertTiptapJsonContent<RichTextDocument>;
+
+export type TextShapeFont =
+  | "noto-sans-sc"
+  | "noto-serif-sc"
+  | "noto-sans-mono"
+  | "ma-shan-zheng";
+export type TextShapeSize = "s" | "m" | "l" | "xl";
+export type TextShapeAlign = "start" | "middle" | "end";
+
+export interface TextShapeProps {
+  richText: RichTextDocument;
+  w: number;
+  h: number;
+  autoSize: boolean;
+  scale: number;
+  font: TextShapeFont;
+  size: TextShapeSize;
+  color: string;
+  textAlign: TextShapeAlign;
+}
+
+export interface TextShapeRecord extends ShapeRecordBase<
+  "text",
+  TextShapeProps
+> {
+  type: "text";
+  props: TextShapeProps;
+}

package/_vendor/signals/atom.ts

@@ -0,0 +1,74 @@
+import { Child, Signal } from "./types";
+import {
+  advanceGlobalEpoch,
+  atomDidChange,
+  getGlobalEpoch,
+  maybeCaptureParent,
+  noteInitialValue,
+  getCurrentTransaction,
+} from "./core";
+
+export interface Atom<T> extends Signal<T> {
+  set(value: T): T;
+  update(updater: (value: T) => T): T;
+}
+
+class _Atom<T> implements Atom<T> {
+  lastChangedEpoch: number;
+  children = new Set<Child>();
+
+  constructor(
+    public readonly name: string,
+    private current: T,
+    private isEqual?: (a: T, b: T) => boolean,
+  ) {
+    this.lastChangedEpoch = getGlobalEpoch();
+  }
+
+  get(): T {
+    maybeCaptureParent(this);
+    return this.current;
+  }
+
+  __unsafe__getWithoutCapture(): T {
+    return this.current;
+  }
+
+  __unsafe__setWithoutNotify(value: T): void {
+    this.current = value;
+  }
+
+  set(value: T): T {
+    const previousValue = this.current;
+    if (
+      this.isEqual
+        ? this.isEqual(previousValue, value)
+        : Object.is(previousValue, value)
+    ) {
+      return previousValue;
+    }
+
+    noteInitialValue(this, previousValue);
+    advanceGlobalEpoch();
+    this.lastChangedEpoch = getGlobalEpoch();
+    this.current = value;
+    atomDidChange(this as any);
+    return value;
+  }
+
+  update(updater: (value: T) => T): T {
+    return this.set(updater(this.current));
+  }
+}
+
+export function atom<T>(
+  name: string,
+  initialValue: T,
+  opts?: { isEqual?: (a: T, b: T) => boolean },
+): Atom<T> {
+  return new _Atom(name, initialValue, opts?.isEqual);
+}
+
+export function isAtom(value: any): value is Atom<any> {
+  return value instanceof _Atom;
+}

package/_vendor/signals/computed.ts

@@ -0,0 +1,132 @@
+import { Child, Signal } from "./types";
+import {
+  getGlobalEpoch,
+  advanceGlobalEpoch,
+  maybeCaptureParent,
+  startCapture,
+  stopCapture,
+} from "./core";
+
+const UNINITIALIZED: unique symbol = Symbol("UNINITIALIZED");
+type UNINITIALIZED = typeof UNINITIALIZED;
+
+export { UNINITIALIZED };
+
+export interface Computed<T> extends Signal<T> {
+  readonly isComputed: true;
+}
+
+class _Computed<T> implements Computed<T> {
+  readonly isComputed = true;
+  lastChangedEpoch: number;
+  lastCheckedEpoch: number;
+  children = new Set<Child>();
+
+  private state: T | UNINITIALIZED = UNINITIALIZED;
+  private parents: Signal<any>[] = [];
+  private parentEpochs: number[] = [];
+
+  constructor(
+    public readonly name: string,
+    private derive: (prev: T | UNINITIALIZED) => T,
+    private isEqual?: (a: T, b: T) => boolean,
+  ) {
+    this.lastChangedEpoch = getGlobalEpoch();
+    this.lastCheckedEpoch = -1;
+  }
+
+  get(): T {
+    maybeCaptureParent(this);
+    return this.__unsafe__getWithoutCapture();
+  }
+
+  __unsafe__getWithoutCapture(): T {
+    // Fast path: nothing changed globally since last check
+    if (this.lastCheckedEpoch === getGlobalEpoch()) {
+      return this.state as T;
+    }
+
+    // Check if parents actually changed
+    if (this.state !== UNINITIALIZED && !this.haveParentsChanged()) {
+      this.lastCheckedEpoch = getGlobalEpoch();
+      return this.state as T;
+    }
+
+    // Recompute
+    startCapture(this.selfAsChild);
+    let newValue: T;
+    let newParentSet: Set<Signal<any>>;
+    try {
+      newValue = this.derive(
+        this.state === UNINITIALIZED ? UNINITIALIZED : this.state,
+      );
+    } finally {
+      newParentSet = stopCapture();
+    }
+
+    // Update parent tracking
+    // Remove this from old parents' children that are no longer dependencies
+    for (const oldParent of this.parents) {
+      if (!newParentSet.has(oldParent)) {
+        oldParent.children.delete(this.selfAsChild);
+      }
+    }
+    this.parents = [...newParentSet];
+    this.parentEpochs = this.parents.map((p) => p.lastChangedEpoch);
+    // Add this to new parents' children
+    for (const parent of this.parents) {
+      parent.children.add(this.selfAsChild);
+    }
+
+    if (
+      this.state === UNINITIALIZED ||
+      !(this.isEqual
+        ? this.isEqual(this.state, newValue)
+        : Object.is(this.state, newValue))
+    ) {
+      this.state = newValue;
+      advanceGlobalEpoch();
+      this.lastChangedEpoch = getGlobalEpoch();
+    }
+
+    this.lastCheckedEpoch = getGlobalEpoch();
+    return this.state as T;
+  }
+
+  private get selfAsChild(): Child {
+    // Cache the child identity so we can properly remove from parent sets
+    if (!this._selfAsChild) {
+      this._selfAsChild = {
+        type: "computed",
+        notify: () => {},
+        source: this,
+      };
+    }
+    return this._selfAsChild;
+  }
+  private _selfAsChild: Child | null = null;
+
+  private haveParentsChanged(): boolean {
+    for (let i = 0; i < this.parents.length; i++) {
+      const parent = this.parents[i];
+      // Force parent to re-evaluate if it's a computed
+      parent.__unsafe__getWithoutCapture();
+      if (parent.lastChangedEpoch !== this.parentEpochs[i]) {
+        return true;
+      }
+    }
+    return false;
+  }
+}
+
+export function computed<T>(
+  name: string,
+  derive: (prev: T | UNINITIALIZED) => T,
+  opts?: { isEqual?: (a: T, b: T) => boolean },
+): Computed<T> {
+  return new _Computed(name, derive, opts?.isEqual);
+}
+
+export function isComputed(value: any): value is Computed<any> {
+  return value instanceof _Computed;
+}