@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-text/canvas.tsx

@@ -0,0 +1,115 @@
+import { useEffect } from "react";
+import type { TextShapeRecord } from "./textTypes";
+import {
+  renderRichTextDocument,
+} from "./host/richTextRendering";
+import { ensureTextFontLoaded } from "./host/textFontLoader";
+import { useTextShapeRendererRuntime } from "./host/textShapeRendererRuntime";
+import {
+  DEFAULT_TEXT_FONT,
+  getTextAlign,
+  getTextFontFamily,
+  getTextFontSize,
+  getTextLineHeight,
+} from "./textStyle";
+import type {
+  CanvasDomEventGuard,
+  LandCanvasPlugin,
+  ShapeRendererProps,
+} from "@land/canvas-plugin-api";
+
+const textEditingDomEventGuard: CanvasDomEventGuard = {
+  id: "land.text.dom-events",
+  handle({ event }) {
+    const target = event.target;
+    if (!(target instanceof HTMLElement)) {
+      return "continue";
+    }
+
+    return target.closest('[data-ui="text-editing-box"]') ? "handled" : "continue";
+  },
+  getCursor({ element }) {
+    return element?.closest('[data-ui="text-editing-box"]') ? "text" : undefined;
+  },
+};
+
+export function createTextCanvasPlugin(): LandCanvasPlugin {
+  return {
+    id: "land.text.react",
+    domEventGuards: [textEditingDomEventGuard],
+    canvasComponents: [
+      {
+        id: "land.text.default-font-preload",
+        component: TextDefaultFontPreload,
+      },
+    ],
+    setup(registerShapeRenderer) {
+      registerShapeRenderer({
+        type: "text",
+        component: TextShapeRenderer,
+      });
+    },
+  };
+}
+
+function TextDefaultFontPreload() {
+  useEffect(() => {
+    void ensureTextFontLoaded(DEFAULT_TEXT_FONT);
+  }, []);
+
+  return null;
+}
+
+function TextShapeRenderer({
+  shape,
+  editor,
+}: ShapeRendererProps<TextShapeRecord>) {
+  const { isEditingThisShape, editingHost } = useTextShapeRendererRuntime(
+    editor,
+    shape,
+  );
+
+  return (
+    <div
+      data-editing-hidden={isEditingThisShape ? "true" : undefined}
+      style={{
+        position: "relative",
+        boxSizing: "border-box",
+        width: shape.props.w,
+        minHeight: shape.props.h,
+        transform: `scale(${shape.props.scale})`,
+        transformOrigin: "top left",
+        color: shape.props.color,
+        fontFamily: getTextFontFamily(shape.props.font),
+        fontSize: getTextFontSize(shape.props.size),
+        lineHeight: `${getTextLineHeight(shape.props.size)}px`,
+        textAlign: getTextAlign(shape.props.textAlign),
+        whiteSpace: "pre-wrap",
+        overflowWrap: "break-word",
+        userSelect: "none",
+        pointerEvents: "none",
+      }}
+    >
+      <div
+        style={{
+          opacity: isEditingThisShape ? 0 : undefined,
+        }}
+      >
+        {renderRichTextDocument(shape.props.richText)}
+      </div>
+      <div
+        data-ui="text-editor-host-slot"
+        data-shape-id={shape.id}
+        data-active={isEditingThisShape ? "true" : "false"}
+        aria-hidden="true"
+        style={{
+          position: "absolute",
+          inset: 0,
+          pointerEvents: "none",
+        }}
+      >
+        {editingHost}
+      </div>
+    </div>
+  );
+}

package/_vendor/plugin-text/core.ts

@@ -0,0 +1,422 @@
+import {
+  SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+  type ContextMenuContribution,
+  type LandCorePlugin,
+  type ToolbarAction,
+  type ToolbarActionValue,
+  type ToolbarContribution,
+} from "@land/canvas-core";
+import { TextTool } from "./TextTool";
+import { TextShapeUtil } from "./TextShapeUtil";
+import { TextShapeSvgExporter } from "./TextShapeSvgExporter";
+import { ArrowLabelBindingUtil } from "./ArrowLabelBindingUtil";
+import { GeoLabelBindingUtil } from "./GeoLabelBindingUtil";
+import { createTextInteractionHandler } from "./textInteractions";
+import type {
+  TextShapeAlign,
+  TextShapeFont,
+  TextShapeProps,
+  TextShapeRecord,
+  TextShapeSize,
+} from "./textTypes";
+
+export function createTextCorePlugin(): LandCorePlugin {
+  return {
+    id: "land.text",
+    shapeCapabilities: [
+      {
+        type: "text",
+        schemaProps: [
+          "richText",
+          "w",
+          "h",
+          "autoSize",
+          "scale",
+          "font",
+          "size",
+          "color",
+          "textAlign",
+        ],
+        reactRenderer: "partial",
+        toolbarEntry: "supported",
+        notes: [
+          "Text shape util, SVG fallback, React renderer, rich editing runtime, creation tool, and selected-text style toolbar live in the text plugin package. React rendering remains partial while product-grade rich text rendering and measurement continue to mature.",
+        ],
+      },
+    ],
+    shapeUtils: [new TextShapeUtil()],
+    shapeSvgExporters: [new TextShapeSvgExporter()],
+    bindingUtils: [new GeoLabelBindingUtil(), new ArrowLabelBindingUtil()],
+    interactionHandlers: [createTextInteractionHandler()],
+    toolbarActions: [
+      createEditTextAction(),
+      createSetTextStyleToolbarAction("color"),
+      createSetTextStyleToolbarAction("font"),
+      createSetTextStyleToolbarAction("size"),
+      createSetTextStyleToolbarAction("textAlign"),
+      createSetTextDefaultStyleToolbarAction("color"),
+      createSetTextDefaultStyleToolbarAction("font"),
+      createSetTextDefaultStyleToolbarAction("size"),
+      createSetTextDefaultStyleToolbarAction("textAlign"),
+    ],
+    toolbarContributions: [
+      createTextToolToolbarContribution(),
+      createTextDefaultStyleToolbarContribution(),
+      createTextSelectionToolbarContribution(),
+    ],
+    contextMenuContributions: [createTextContextMenuContribution()],
+    setup(editor) {
+      editor.tools.register(
+        "text",
+        (currentEditor) => new TextTool(currentEditor),
+        { shortcut: "t" },
+      );
+    },
+  };
+}
+
+function createTextContextMenuContribution(): ContextMenuContribution {
+  return {
+    id: "text.shape-context-menu",
+    target: "selection",
+    order: 35,
+    actionIds: ["text.edit"],
+    when(context) {
+      return (
+        context.selection.count === 1 &&
+        context.selection.singleShapeType === "text"
+      );
+    },
+    getSections() {
+      return [
+        {
+          id: "text.context-menu",
+          title: "Text",
+          items: [
+            {
+              kind: "command",
+              id: "text.edit",
+              actionId: "text.edit",
+              label: "Edit text",
+              icon: "type",
+              dataUi: "context-menu-edit-text-button",
+            },
+          ],
+        },
+      ];
+    },
+  };
+}
+
+function createEditTextAction(): ToolbarAction {
+  return {
+    id: "text.edit",
+    isVisible(context) {
+      return (
+        context.selection.count === 1 &&
+        context.selection.singleShapeType === "text"
+      );
+    },
+    isEnabled(context) {
+      const [shape] = context.selection.selectedShapes;
+      return shape?.type === "text" && !shape.isLocked;
+    },
+    run({ context }) {
+      const [shape] = context.selection.selectedShapes;
+      if (shape?.type !== "text" || shape.isLocked) {
+        return;
+      }
+      context.editor.startEditingShape(
+        {
+          shapeId: shape.id,
+          entryMode: "focusEnd",
+        },
+        "user",
+      );
+    },
+  };
+}
+
+const TEXT_COLOR_SWATCHES = [
+  { value: "#0f172a", label: "Slate", color: "#0f172a" },
+  { value: "#1d4ed8", label: "Blue", color: "#1d4ed8" },
+  { value: "#15803d", label: "Green", color: "#15803d" },
+  { value: "#dc2626", label: "Red", color: "#dc2626" },
+] as const;
+
+const TEXT_FONT_OPTIONS = [
+  { value: "noto-sans-sc", label: "Noto SC" },
+  { value: "noto-serif-sc", label: "Serif SC" },
+  { value: "noto-sans-mono", label: "Mono" },
+  { value: "ma-shan-zheng", label: "Ma Shan" },
+] as const satisfies readonly {
+  value: TextShapeFont;
+  label: string;
+}[];
+
+const TEXT_SIZE_OPTIONS = [
+  { value: "s", label: "S" },
+  { value: "m", label: "M" },
+  { value: "l", label: "L" },
+  { value: "xl", label: "XL" },
+] as const satisfies readonly { value: TextShapeSize; label: string }[];
+
+const TEXT_ALIGN_OPTIONS = [
+  { value: "start", label: "Align left", icon: "align-left" },
+  { value: "middle", label: "Align center", icon: "align-center" },
+  { value: "end", label: "Align right", icon: "align-right" },
+] as const satisfies readonly {
+  value: TextShapeAlign;
+  label: string;
+  icon: string;
+}[];
+
+function createTextToolToolbarContribution(): ToolbarContribution {
+  return {
+    id: "text.tool-toolbar",
+    surface: "tool",
+    placement: "chrome",
+    order: 50,
+    actionIds: [SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID],
+    getGroups() {
+      return [
+        {
+          id: "text.tools",
+          items: [
+            {
+              kind: "button",
+              id: "text.tool.text",
+              actionId: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+              value: "text",
+              label: "Text",
+              shortcut: "T",
+              icon: "type",
+              dataUi: "text-tool-button",
+            },
+          ],
+        },
+      ];
+    },
+  };
+}
+
+function createTextSelectionToolbarContribution(): ToolbarContribution {
+  return {
+    id: "text.selection-toolbar",
+    surface: "selection",
+    order: 20,
+    actionIds: [
+      "text.set-color",
+      "text.set-font",
+      "text.set-size",
+      "text.set-textAlign",
+    ],
+    when(context) {
+      return context.selection.commonShapeType === "text";
+    },
+    getGroups() {
+      return getTextStyleToolbarGroups({
+        colorActionId: "text.set-color",
+        fontActionId: "text.set-font",
+        sizeActionId: "text.set-size",
+        textAlignActionId: "text.set-textAlign",
+        dataUiPrefix: "text",
+      });
+    },
+  };
+}
+
+function createTextDefaultStyleToolbarContribution(): ToolbarContribution {
+  return {
+    id: "text.default-style.tool-toolbar",
+    surface: "tool",
+    order: 51,
+    actionIds: [
+      "text.default-color",
+      "text.default-font",
+      "text.default-size",
+      "text.default-textAlign",
+    ],
+    when(context) {
+      return context.tool.activeToolId === "text";
+    },
+    getGroups() {
+      return getTextStyleToolbarGroups({
+        colorActionId: "text.default-color",
+        fontActionId: "text.default-font",
+        sizeActionId: "text.default-size",
+        textAlignActionId: "text.default-textAlign",
+        dataUiPrefix: "text-default",
+      });
+    },
+  };
+}
+
+function getTextStyleToolbarGroups({
+  colorActionId,
+  fontActionId,
+  sizeActionId,
+  textAlignActionId,
+  dataUiPrefix,
+}: {
+  colorActionId: string;
+  fontActionId: string;
+  sizeActionId: string;
+  textAlignActionId: string;
+  dataUiPrefix: string;
+}) {
+  return [
+    {
+      id: `${dataUiPrefix}.style-color`,
+      items: [
+        {
+          kind: "swatches" as const,
+          id: `${dataUiPrefix}.color`,
+          actionId: colorActionId,
+          label: "Color",
+          options: TEXT_COLOR_SWATCHES.map((option) => ({
+            ...option,
+            dataUi: `${dataUiPrefix}-color-${option.label.toLowerCase()}-button`,
+          })),
+        },
+      ],
+    },
+    {
+      id: `${dataUiPrefix}.style-font`,
+      items: [
+        {
+          kind: "segmented" as const,
+          id: `${dataUiPrefix}.font`,
+          actionId: fontActionId,
+          options: TEXT_FONT_OPTIONS.map((option) => ({
+            ...option,
+            dataUi: `${dataUiPrefix}-font-${option.value}-button`,
+          })),
+        },
+      ],
+    },
+    {
+      id: `${dataUiPrefix}.style-size`,
+      items: [
+        {
+          kind: "segmented" as const,
+          id: `${dataUiPrefix}.size`,
+          actionId: sizeActionId,
+          options: TEXT_SIZE_OPTIONS.map((option) => ({
+            ...option,
+            dataUi: `${dataUiPrefix}-size-${option.value}-button`,
+          })),
+        },
+      ],
+    },
+    {
+      id: `${dataUiPrefix}.style-align`,
+      items: [
+        {
+          kind: "segmented" as const,
+          id: `${dataUiPrefix}.align`,
+          actionId: textAlignActionId,
+          options: TEXT_ALIGN_OPTIONS.map((option) => ({
+            ...option,
+            dataUi: `${dataUiPrefix}-align-${option.value}-button`,
+          })),
+        },
+      ],
+    },
+  ];
+}
+
+function createSetTextStyleToolbarAction(
+  prop: "color" | "font" | "size" | "textAlign",
+): ToolbarAction<string | null> {
+  return {
+    id: `text.set-${prop}`,
+    isVisible(context) {
+      return context.selection.commonShapeType === "text";
+    },
+    isEnabled(context) {
+      return context.selection.count > 0;
+    },
+    getValue(context) {
+      return getCommonTextPropValue(context.selection.selectedShapes, prop);
+    },
+    run({ context, value }) {
+      if (!isValidTextStyleValue(prop, value)) {
+        return;
+      }
+      const updates = context.selection.selectedShapes
+        .filter((shape): shape is TextShapeRecord => shape.type === "text")
+        .filter((shape) => !shape.isLocked)
+        .map((shape) => ({
+          id: shape.id,
+          props: {
+            [prop]: value,
+          },
+        }));
+      if (updates.length === 0) {
+        return;
+      }
+      context.editor.commands.updateShapes(updates, { source: "user" });
+    },
+  };
+}
+
+function createSetTextDefaultStyleToolbarAction(
+  prop: "color" | "font" | "size" | "textAlign",
+): ToolbarAction<string | null> {
+  return {
+    id: `text.default-${prop}`,
+    isVisible(context) {
+      return context.tool.activeToolId === "text";
+    },
+    getValue(context) {
+      return context.editor.getDefaultShapeProps<TextShapeProps>("text")[prop];
+    },
+    run({ context, value }) {
+      if (!isValidTextStyleValue(prop, value)) {
+        return;
+      }
+      context.editor.updateDefaultShapeProps("text", { [prop]: value });
+    },
+  };
+}
+
+function getCommonTextPropValue(
+  selectedShapes: readonly { type: string; props: object }[],
+  prop: "color" | "font" | "size" | "textAlign",
+): string | null {
+  let value: string | undefined;
+  for (const shape of selectedShapes) {
+    if (shape.type !== "text") {
+      continue;
+    }
+    const nextValue = (shape.props as TextShapeProps)[prop];
+    if (value === undefined) {
+      value = nextValue;
+      continue;
+    }
+    if (value !== nextValue) {
+      return null;
+    }
+  }
+  return value ?? null;
+}
+
+function isValidTextStyleValue(
+  prop: "color" | "font" | "size" | "textAlign",
+  value: ToolbarActionValue,
+): value is string {
+  if (typeof value !== "string") {
+    return false;
+  }
+  if (prop === "color") {
+    return TEXT_COLOR_SWATCHES.some((option) => option.value === value);
+  }
+  if (prop === "font") {
+    return TEXT_FONT_OPTIONS.some((option) => option.value === value);
+  }
+  if (prop === "size") {
+    return TEXT_SIZE_OPTIONS.some((option) => option.value === value);
+  }
+  return TEXT_ALIGN_OPTIONS.some((option) => option.value === value);
+}

package/_vendor/plugin-text/feature.ts

@@ -0,0 +1,20 @@
+import {
+  defineLandExtension,
+  type LandFeatureBundle,
+} from "@land/canvas-plugin-api";
+import { createTextCanvasPlugin } from "./canvas";
+import { createTextCorePlugin } from "./core";
+
+export function createTextFeatureBundle(): LandFeatureBundle {
+  return {
+    id: "land.text.bundle",
+    corePlugins: [createTextCorePlugin()],
+    canvasPlugins: [createTextCanvasPlugin()],
+    shapeTypes: ["text"],
+  };
+}
+
+export const Text = defineLandExtension({
+  name: "text",
+  createFeature: createTextFeatureBundle,
+});

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

@@ -0,0 +1,144 @@
+import {
+  useCallback,
+  useRef,
+  useState,
+} from "react";
+import { type ShapeEditingSession } from "@land/canvas-core";
+import { useEditor, useValue } from "@land/canvas-react";
+import type { TextShapeRecord } from "../textTypes";
+import { isTextShapeRecord } from "../textShapeHelpers";
+import {
+  TiptapTextEditor,
+  type TiptapTextEditorHandle,
+} from "./TiptapTextEditor";
+import { useTextEditingBoxStyle } from "./textEditingBoxStyle";
+import { useTextEditingEntryFocus } from "./textEntryFocus";
+import { useRangeClickCollapse } from "./textRangeSelection";
+import {
+  useLatestTextShapeRef,
+  useRichTextShapeSync,
+} from "./textShapeSync";
+
+export function ShapeEditingSessionBox({
+  shapeId,
+  markId,
+}: {
+  shapeId: TextShapeRecord["id"];
+  markId: string;
+}) {
+  const editor = useEditor();
+  const shape = useValue(editor.getShapeSignal(shapeId));
+  const session = useValue(editor.shapeEditingStateSignal).session;
+
+  if (!isTextShapeRecord(shape) || session?.shapeId !== shape.id) {
+    return null;
+  }
+
+  return (
+    <RichTextEditingBox
+      key={`${shape.id}:${markId}`}
+      shape={shape}
+      session={session}
+    />
+  );
+}
+
+function RichTextEditingBox({
+  shape,
+  session,
+}: {
+  shape: TextShapeRecord;
+  session: ShapeEditingSession;
+}) {
+  const editor = useEditor();
+  const initialRichTextRef = useRef(shape.props.richText);
+  const latestShapeRef = useLatestTextShapeRef(shape);
+  const entryRequest = useValue(editor.shapeEditingEntryRequestSignal);
+  const consumedEntryRequestIdRef = useRef<number | null>(null);
+  const [tiptapEditor, setTiptapEditor] = useState<
+    TiptapTextEditorHandle["editor"] | null
+  >(null);
+  const [richTextController, setRichTextController] = useState<
+    TiptapTextEditorHandle["controller"] | null
+  >(null);
+
+  const handleTiptapReady = useCallback(
+    ({ editor: readyEditor, controller }: TiptapTextEditorHandle) => {
+      setTiptapEditor(readyEditor.isDestroyed ? null : readyEditor);
+      setRichTextController(controller);
+    },
+    [],
+  );
+  const handleTiptapDispose = useCallback(
+    ({ editor: disposedEditor, controller }: TiptapTextEditorHandle) => {
+      setTiptapEditor((current) =>
+        current === disposedEditor ? null : current,
+      );
+      setRichTextController((current) =>
+        current === controller ? null : current,
+      );
+    },
+    [],
+  );
+
+  const handleRichTextChange = useRichTextShapeSync({
+    editor,
+    shape,
+    tiptapEditor,
+    richTextController,
+    latestShapeRef,
+  });
+
+  useTextEditingEntryFocus({
+    editor,
+    shapeId: shape.id,
+    session,
+    tiptapEditor,
+    richTextController,
+    entryRequest,
+    consumedEntryRequestIdRef,
+  });
+
+  const rangeClickCollapse = useRangeClickCollapse({
+    editor,
+    shapeId: shape.id,
+    richTextController,
+  });
+  const style = useTextEditingBoxStyle(shape);
+
+  return (
+    <div
+      data-ui="text-editing-box"
+      data-shape-id={shape.id}
+      data-mount-target-kind="shape"
+      onPointerDown={(event) => {
+        event.stopPropagation();
+      }}
+      onPointerDownCapture={rangeClickCollapse.onPointerDownCapture}
+      onPointerMoveCapture={rangeClickCollapse.onPointerMoveCapture}
+      onPointerUpCapture={rangeClickCollapse.onPointerUpCapture}
+      onPointerCancel={rangeClickCollapse.onPointerCancel}
+      onContextMenu={(event) => {
+        event.stopPropagation();
+      }}
+      onDragStart={(event) => {
+        event.preventDefault();
+      }}
+      style={style}
+    >
+      <TiptapTextEditor
+        landEditor={editor}
+        shape={shape}
+        initialRichText={initialRichTextRef.current}
+        className="h-full min-h-full w-full"
+        editorStyle={{
+          height: "100%",
+          minHeight: "100%",
+        }}
+        onReady={handleTiptapReady}
+        onDispose={handleTiptapDispose}
+        onRichTextChange={handleRichTextChange}
+      />
+    </div>
+  );
+}