@yuzhouu/canvas-kit 0.1.2 → 0.1.4

package/_vendor/plugin-text/host/textMeasurementSync.ts

@@ -1,77 +0,0 @@
-import type { ChangeSource, Editor } from "@land/canvas-core";
-import type { TextShapeRecord } from "../textTypes";
-import { isTextShapeRecord } from "../textShapeHelpers";
-import { measureTextShapeFromRichText } from "./textMeasurement";
-import type { TiptapTextEditorController } from "./tiptapTextEditorController";
-
-export function scheduleTextEditorMeasurement(
-  editor: Editor,
-  controller: TiptapTextEditorController,
-  latestShapeRef: { current: TextShapeRecord },
-  measureTimerRef: { current: number | null },
-): void {
-  if (measureTimerRef.current !== null) {
-    window.clearTimeout(measureTimerRef.current);
-  }
-
-  measureTimerRef.current = window.setTimeout(() => {
-    measureTimerRef.current = null;
-    measureTextEditorLayout(editor, controller, latestShapeRef.current);
-  }, 0);
-}
-
-export function measureTextEditorLayout(
-  editor: Editor,
-  controller: TiptapTextEditorController,
-  shape: TextShapeRecord,
-): void {
-  if (controller.isDestroyed() || !controller.isConnected()) {
-    return;
-  }
-
-  const nextSize = controller.measure(shape);
-  if (!nextSize) {
-    return;
-  }
-
-  updateMeasuredTextShapeSize(editor, shape, nextSize, "user");
-}
-
-export function measureTextShapeRichTextLayout(
-  editor: Editor,
-  shape: TextShapeRecord,
-  source: ChangeSource = "system",
-): void {
-  const nextSize = measureTextShapeFromRichText(shape.props.richText, shape);
-  if (!nextSize) {
-    return;
-  }
-
-  updateMeasuredTextShapeSize(editor, shape, nextSize, source);
-}
-
-function updateMeasuredTextShapeSize(
-  editor: Editor,
-  shape: TextShapeRecord,
-  nextSize: { w: number; h: number },
-  source: ChangeSource,
-): void {
-  const current = editor.getShape(shape.id);
-  if (
-    isTextShapeRecord(current) &&
-    current.props.w === nextSize.w &&
-    current.props.h === nextSize.h
-  ) {
-    return;
-  }
-
-  editor.commands.updateShapes(
-    [
-      {
-        id: shape.id,
-        props: nextSize,
-      },
-    ],
-    { source },
-  );
-}

package/_vendor/plugin-text/host/textRangeSelection.ts

@@ -1,134 +0,0 @@
-import {
-  useCallback,
-  useRef,
-  type PointerEvent as ReactPointerEvent,
-} from "react";
-import type { Editor } from "@land/canvas-core";
-import type { TextShapeRecord } from "../textTypes";
-import type { TiptapTextEditorController } from "./tiptapTextEditorController";
-import { isRichTextToolbarTarget } from "./RichTextToolbar";
-
-export function useRangeClickCollapse({
-  editor,
-  shapeId,
-  richTextController,
-}: {
-  editor: Editor;
-  shapeId: TextShapeRecord["id"];
-  richTextController: TiptapTextEditorController | null;
-}): {
-  onPointerDownCapture(event: ReactPointerEvent<HTMLDivElement>): void;
-  onPointerMoveCapture(event: ReactPointerEvent<HTMLDivElement>): void;
-  onPointerUpCapture(event: ReactPointerEvent<HTMLDivElement>): void;
-  onPointerCancel(): void;
-} {
-  const pendingRangeClickCollapseRef = useRef<{
-    pointerId: number;
-    clientX: number;
-    clientY: number;
-    moved: boolean;
-  } | null>(null);
-
-  const onPointerDownCapture = useCallback(
-    (event: ReactPointerEvent<HTMLDivElement>) => {
-      event.stopPropagation();
-      if (isRichTextToolbarTarget(event.target)) {
-        pendingRangeClickCollapseRef.current = null;
-        return;
-      }
-      if (
-        event.button !== 0 ||
-        event.detail !== 1 ||
-        !richTextController ||
-        richTextController.isDestroyed()
-      ) {
-        pendingRangeClickCollapseRef.current = null;
-        return;
-      }
-
-      const session = editor.getShapeEditingSession();
-      if (!session || session.shapeId !== shapeId || session.isComposing) {
-        pendingRangeClickCollapseRef.current = null;
-        return;
-      }
-
-      if (richTextController.getSelectionSnapshot().type !== "Range") {
-        pendingRangeClickCollapseRef.current = null;
-        return;
-      }
-
-      pendingRangeClickCollapseRef.current = {
-        pointerId: event.pointerId,
-        clientX: event.clientX,
-        clientY: event.clientY,
-        moved: false,
-      };
-    },
-    [editor, richTextController, shapeId],
-  );
-
-  const onPointerMoveCapture = useCallback(
-    (event: ReactPointerEvent<HTMLDivElement>) => {
-      const pending = pendingRangeClickCollapseRef.current;
-      if (!pending || pending.pointerId !== event.pointerId) {
-        return;
-      }
-
-      const deltaX = event.clientX - pending.clientX;
-      const deltaY = event.clientY - pending.clientY;
-      if (deltaX * deltaX + deltaY * deltaY >= 16) {
-        pending.moved = true;
-      }
-    },
-    [],
-  );
-
-  const onPointerUpCapture = useCallback(
-    (event: ReactPointerEvent<HTMLDivElement>) => {
-      const pending = pendingRangeClickCollapseRef.current;
-      pendingRangeClickCollapseRef.current = null;
-      if (isRichTextToolbarTarget(event.target)) {
-        return;
-      }
-      if (
-        !pending ||
-        pending.pointerId !== event.pointerId ||
-        pending.moved ||
-        !richTextController ||
-        richTextController.isDestroyed()
-      ) {
-        return;
-      }
-
-      const session = editor.getShapeEditingSession();
-      if (!session || session.shapeId !== shapeId || session.isComposing) {
-        return;
-      }
-
-      const clientX = event.clientX;
-      const clientY = event.clientY;
-      window.setTimeout(() => {
-        if (
-          richTextController.isDestroyed() ||
-          richTextController.getSelectionSnapshot().type !== "Range"
-        ) {
-          return;
-        }
-
-        richTextController.collapseSelectionAtClientPoint(clientX, clientY);
-      }, 0);
-    },
-    [editor, richTextController, shapeId],
-  );
-
-  const onPointerCancel = useCallback(() => {
-    pendingRangeClickCollapseRef.current = null;
-  }, []);
-
-  return {
-    onPointerDownCapture,
-    onPointerMoveCapture,
-    onPointerUpCapture,
-    onPointerCancel,
-  };
-}

package/_vendor/plugin-text/host/textShapeRendererRuntime.tsx

@@ -1,89 +0,0 @@
-import { useLayoutEffect, type ReactNode } from "react";
-import type { Editor } from "@land/canvas-core";
-import { useValue } from "@land/canvas-react";
-import type { TextShapeRecord } from "../textTypes";
-import { isTextShapeRecord } from "../textShapeHelpers";
-import { ShapeEditingSessionBox } from "./RichTextEditingBox";
-import { ensureTextFontLoaded } from "./textFontLoader";
-import { measureTextShapeRichTextLayout } from "./textMeasurementSync";
-
-export interface TextShapeRendererRuntime {
-  isEditingThisShape: boolean;
-  editingHost: ReactNode;
-}
-
-export function useTextShapeRendererRuntime(
-  editor: Editor,
-  shape: TextShapeRecord,
-): TextShapeRendererRuntime {
-  const textEditingState = useValue(editor.shapeEditingStateSignal);
-  const session = textEditingState.session;
-  const isEditingThisShape = session?.shapeId === shape.id;
-  const editingHost =
-    session && isEditingThisShape ? (
-      <ShapeEditingSessionBox
-        key={session.shapeId + ":" + session.markId}
-        shapeId={session.shapeId}
-        markId={session.markId}
-      />
-    ) : null;
-
-  useTextShapeRenderMeasurement({
-    editor,
-    shape,
-    isEditingThisShape,
-  });
-
-  return {
-    isEditingThisShape,
-    editingHost,
-  };
-}
-
-function useTextShapeRenderMeasurement({
-  editor,
-  shape,
-  isEditingThisShape,
-}: {
-  editor: Editor;
-  shape: TextShapeRecord;
-  isEditingThisShape: boolean;
-}): void {
-  useLayoutEffect(() => {
-    if (isEditingThisShape) {
-      return;
-    }
-
-    measureTextShapeRichTextLayout(editor, shape);
-
-    let isCancelled = false;
-    void ensureTextFontLoaded(shape.props.font).then(() => {
-      if (isCancelled) {
-        return;
-      }
-
-      const currentShape = editor.getShape(shape.id);
-      if (
-        isTextShapeRecord(currentShape) &&
-        currentShape.props.font === shape.props.font
-      ) {
-        measureTextShapeRichTextLayout(editor, currentShape);
-      }
-    });
-
-    return () => {
-      isCancelled = true;
-    };
-  }, [
-    editor,
-    isEditingThisShape,
-    shape,
-    shape.props.autoSize,
-    shape.props.font,
-    shape.props.richText,
-    shape.props.scale,
-    shape.props.size,
-    shape.props.textAlign,
-    shape.props.w,
-  ]);
-}

package/_vendor/plugin-text/host/textShapeSync.ts

@@ -1,173 +0,0 @@
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  type MutableRefObject,
-} from "react";
-import type { Editor as TiptapEditor } from "@tiptap/react";
-import type { Editor } from "@land/canvas-core";
-import {
-  type RichTextDocument,
-  type TextShapeRecord,
-} from "../textTypes";
-import { validateRichTextDocument } from "../richTextUtils";
-import { updateTextShapeRichText } from "../textShapeHelpers";
-import type { TiptapTextEditorController } from "./tiptapTextEditorController";
-import {
-  measureTextEditorLayout,
-  scheduleTextEditorMeasurement,
-} from "./textMeasurementSync";
-import { measureTextShapeFromRichText } from "./textMeasurement";
-import { ensureTextFontLoaded } from "./textFontLoader";
-
-export function useLatestTextShapeRef(
-  shape: TextShapeRecord,
-): MutableRefObject<TextShapeRecord> {
-  const latestShapeRef = useRef(shape);
-
-  useEffect(() => {
-    latestShapeRef.current = shape;
-  }, [shape]);
-
-  return latestShapeRef;
-}
-
-export function useRichTextShapeSync({
-  editor,
-  shape,
-  tiptapEditor,
-  richTextController,
-  latestShapeRef,
-}: {
-  editor: Editor;
-  shape: TextShapeRecord;
-  tiptapEditor: TiptapEditor | null;
-  richTextController: TiptapTextEditorController | null;
-  latestShapeRef: MutableRefObject<TextShapeRecord>;
-}): (input: {
-  editor: TiptapEditor;
-  controller: TiptapTextEditorController;
-  richText: RichTextDocument;
-}) => void {
-  const latestAppliedRichTextRef = useRef<RichTextDocument>(shape.props.richText);
-  const isApplyingRemoteUpdateRef = useRef(false);
-  const measureTimerRef = useRef<number | null>(null);
-
-  const handleRichTextChange = useCallback(
-    ({
-      controller,
-      richText,
-    }: {
-      editor: TiptapEditor;
-      controller: TiptapTextEditorController;
-      richText: RichTextDocument;
-    }) => {
-      if (isApplyingRemoteUpdateRef.current || !controller.isConnected()) {
-        return;
-      }
-      const normalizedRichText = validateRichTextDocument(richText);
-      latestAppliedRichTextRef.current = normalizedRichText;
-      updateTextShapeRichText(
-        editor,
-        shape.id,
-        normalizedRichText,
-        controller.measure(latestShapeRef.current) ??
-          measureTextShapeFromRichText(normalizedRichText, latestShapeRef.current),
-        "user",
-      );
-      scheduleTextEditorMeasurement(
-        editor,
-        controller,
-        latestShapeRef,
-        measureTimerRef,
-      );
-    },
-    [editor, latestShapeRef, shape.id],
-  );
-
-  useEffect(() => {
-    return () => {
-      if (measureTimerRef.current !== null) {
-        window.clearTimeout(measureTimerRef.current);
-        measureTimerRef.current = null;
-      }
-    };
-  }, []);
-
-  useLayoutEffect(() => {
-    if (
-      !tiptapEditor ||
-      !richTextController ||
-      tiptapEditor.isDestroyed ||
-      !richTextController.isConnected()
-    ) {
-      return;
-    }
-
-    measureTextEditorLayout(editor, richTextController, shape);
-  }, [editor, richTextController, shape, tiptapEditor]);
-
-  useEffect(() => {
-    if (
-      !tiptapEditor ||
-      !richTextController ||
-      !richTextController.isConnected()
-    ) {
-      return;
-    }
-
-    const nextRichText = shape.props.richText;
-    if (nextRichText === latestAppliedRichTextRef.current) {
-      return;
-    }
-
-    if (
-      JSON.stringify(latestAppliedRichTextRef.current) ===
-      JSON.stringify(nextRichText)
-    ) {
-      latestAppliedRichTextRef.current = nextRichText;
-      return;
-    }
-
-    isApplyingRemoteUpdateRef.current = true;
-    richTextController.setValue(nextRichText);
-    latestAppliedRichTextRef.current = nextRichText;
-    isApplyingRemoteUpdateRef.current = false;
-  }, [richTextController, shape.props.richText, tiptapEditor]);
-
-  useEffect(() => {
-    if (!richTextController) {
-      return;
-    }
-
-    return richTextController.onCompositionStateChange((isComposing) => {
-      editor.setShapeEditingComposition(isComposing, "system");
-    });
-  }, [editor, richTextController]);
-
-  useEffect(() => {
-    if (!richTextController || !richTextController.isConnected()) {
-      return;
-    }
-
-    let isCancelled = false;
-    void ensureTextFontLoaded(shape.props.font).then(() => {
-      if (isCancelled || !richTextController.isConnected()) {
-        return;
-      }
-
-      measureTextEditorLayout(
-        editor,
-        richTextController,
-        latestShapeRef.current,
-      );
-    });
-
-    return () => {
-      isCancelled = true;
-    };
-  }, [editor, latestShapeRef, richTextController, shape.props.font]);
-
-  return handleRichTextChange;
-}

package/_vendor/plugin-text/host/tiptapTextEditorController.ts

@@ -1,148 +0,0 @@
-import type { JSONContent } from "@tiptap/core";
-import type { Editor as TiptapEditor } from "@tiptap/react";
-import { Vec, type Editor, type ShapeId } from "@land/canvas-core";
-import type { RichTextDocument, TextShapeRecord } from "../textTypes";
-import { validateRichTextDocument } from "../richTextUtils";
-import {
-  ensureTextEditorFocused,
-  getTextEditorSelectionSnapshot,
-  hasMountedTextEditorView,
-  isDomSelectionRangeInsideTextEditor,
-  placeCaretInTextEditorAtClientPoint,
-} from "./textDomSelection";
-import { measureTextShapeFromEditor } from "./textMeasurement";
-
-export interface TiptapTextSelectionSnapshot {
-  type: string | null;
-  text: string | null;
-}
-
-export interface TiptapTextEditorController {
-  readonly shapeId: ShapeId;
-  getValue(): RichTextDocument;
-  setValue(value: RichTextDocument): void;
-  isDestroyed(): boolean;
-  isConnected(): boolean;
-  isFocused(): boolean;
-  focus(): void;
-  focusEnd(): void;
-  focusSelectAll(): void;
-  focusAtPagePoint(editor: Editor, pagePoint: { x: number; y: number }): void;
-  getSelectionSnapshot(): TiptapTextSelectionSnapshot;
-  collapseSelectionAtClientPoint(clientX: number, clientY: number): void;
-  measure(shape: TextShapeRecord): { w: number; h: number } | undefined;
-  onCompositionStateChange(listener: (isComposing: boolean) => void): () => void;
-}
-
-export function createTiptapTextEditorController({
-  shapeId,
-  editor,
-}: {
-  shapeId: ShapeId;
-  editor: TiptapEditor;
-}): TiptapTextEditorController {
-  return {
-    shapeId,
-    isDestroyed() {
-      return editor.isDestroyed;
-    },
-    isConnected() {
-      return !editor.isDestroyed && hasMountedTextEditorView(editor);
-    },
-    isFocused() {
-      return (
-        !editor.isDestroyed &&
-        hasMountedTextEditorView(editor) &&
-        editor.view.dom.contains(document.activeElement)
-      );
-    },
-    getValue() {
-      return validateRichTextDocument(editor.getJSON());
-    },
-    setValue(value) {
-      editor.commands.setContent(value as JSONContent);
-    },
-    focus() {
-      ensureTextEditorFocused(editor);
-    },
-    focusEnd() {
-      if (editor.isDestroyed || !hasMountedTextEditorView(editor)) {
-        return;
-      }
-      editor.commands.focus("end");
-    },
-    focusSelectAll() {
-      if (editor.isDestroyed || !hasMountedTextEditorView(editor)) {
-        return;
-      }
-      ensureTextEditorFocused(editor);
-      editor.chain().focus().selectAll().run();
-    },
-    focusAtPagePoint(landEditor, pagePoint) {
-      focusTiptapAtPagePoint(landEditor, editor, pagePoint);
-    },
-    getSelectionSnapshot() {
-      if (editor.isDestroyed || !hasMountedTextEditorView(editor)) {
-        return { type: null, text: null };
-      }
-      return getTextEditorSelectionSnapshot(editor);
-    },
-    collapseSelectionAtClientPoint(clientX, clientY) {
-      if (editor.isDestroyed || !hasMountedTextEditorView(editor)) {
-        return;
-      }
-      if (!isDomSelectionRangeInsideTextEditor(editor)) {
-        return;
-      }
-      placeCaretInTextEditorAtClientPoint(editor, clientX, clientY);
-    },
-    measure(shape) {
-      if (editor.isDestroyed || !hasMountedTextEditorView(editor)) {
-        return undefined;
-      }
-      return measureTextShapeFromEditor(editor, shape);
-    },
-    onCompositionStateChange(listener) {
-      if (editor.isDestroyed) {
-        return () => {};
-      }
-
-      const element = editor.view.dom;
-      const handleCompositionStart = () => listener(true);
-      const handleCompositionEnd = () => listener(false);
-      element.addEventListener("compositionstart", handleCompositionStart);
-      element.addEventListener("compositionend", handleCompositionEnd);
-
-      return () => {
-        element.removeEventListener(
-          "compositionstart",
-          handleCompositionStart,
-        );
-        element.removeEventListener("compositionend", handleCompositionEnd);
-        listener(false);
-      };
-    },
-  };
-}
-
-function focusTiptapAtPagePoint(
-  landEditor: Editor,
-  editor: TiptapEditor,
-  pagePoint: { x: number; y: number },
-): void {
-  ensureTextEditorFocused(editor);
-  const screenPoint = landEditor.pageToScreen(
-    new Vec(pagePoint.x, pagePoint.y),
-  );
-  const pos = editor.view.posAtCoords({
-    left: screenPoint.x,
-    top: screenPoint.y,
-  })?.pos;
-
-  if (pos) {
-    editor.chain().focus().setTextSelection(pos).run();
-    return;
-  }
-
-  editor.chain().focus().selectAll().run();
-}

package/_vendor/plugin-text/index.ts

@@ -1,18 +0,0 @@
-export { Text, createTextFeatureBundle } from "./feature";
-export {
-  createRichTextFromPlainText,
-  getPlainTextFromRichText,
-  validateRichTextDocument,
-} from "./richTextUtils";
-export {
-  isTextShapeRecord,
-  updateTextShapeRichText,
-} from "./textShapeHelpers";
-export type {
-  RichTextDocument,
-  TextShapeAlign,
-  TextShapeFont,
-  TextShapeProps,
-  TextShapeRecord,
-  TextShapeSize,
-} from "./textTypes";