@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-arrow/core.ts

@@ -0,0 +1,409 @@
+import {
+  SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+  type LandCorePlugin,
+  type ShapeSvgExporter,
+  type SvgElementNode,
+  type SvgExportContext,
+  type SvgNode,
+  type ToolbarAction,
+  type ToolbarActionValue,
+  type ToolbarContribution,
+} from "@land/canvas-core";
+import { ArrowBindingUtil } from "./ArrowBindingUtil";
+import { ArrowShapeUtil } from "./ArrowShapeUtil";
+import { ArrowTool } from "./ArrowTool";
+import { getArrowLocalInfo } from "./arrowGeometry";
+import { resolveArrowTerminalBindingAtPoint } from "./arrowTerminalBindingResolver";
+import { createArrowInteractionHandler } from "./selectionHandleInteractions";
+import type { ArrowShapeRecord } from "./types";
+
+export class ArrowShapeSvgExporter
+  implements ShapeSvgExporter<ArrowShapeRecord>
+{
+  readonly type = "arrow" as const;
+
+  toSvg(shape: ArrowShapeRecord, context: SvgExportContext): SvgNode {
+    const markerStart =
+      shape.props.headStart === "arrow"
+        ? `url(#${context.addDef(createArrowMarker("start", shape.props.stroke))})`
+        : undefined;
+    const markerEnd =
+      shape.props.headEnd === "arrow"
+        ? `url(#${context.addDef(createArrowMarker("end", shape.props.stroke))})`
+        : undefined;
+
+    return {
+      tag: "path",
+      attrs: {
+        d: getArrowLocalInfo(shape).path,
+        fill: "none",
+        stroke: shape.props.stroke,
+        "stroke-width": shape.props.strokeWidth,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "marker-start": markerStart,
+        "marker-end": markerEnd,
+      },
+    };
+  }
+}
+
+export function createArrowCorePlugin(): LandCorePlugin {
+  return {
+    id: "land.arrow",
+    shapeCapabilities: [
+      {
+        type: "arrow",
+        schemaProps: [
+          "w",
+          "h",
+          "start",
+          "end",
+          "bend",
+          "stroke",
+          "strokeWidth",
+          "headStart",
+          "headEnd",
+        ],
+        reactRenderer: "supported",
+        toolbarEntry: "supported",
+        notes: [
+          "Binding support lives in arrow binding records, not arrow props.",
+        ],
+      },
+    ],
+    shapeUtils: [new ArrowShapeUtil()],
+    shapeSvgExporters: [new ArrowShapeSvgExporter()],
+    bindingUtils: [new ArrowBindingUtil()],
+    interactionHandlers: [createArrowInteractionHandler()],
+    toolbarActions: [
+      createSetArrowStyleToolbarAction("stroke"),
+      createSetArrowStyleToolbarAction("strokeWidth"),
+      createSetArrowStyleToolbarAction("headStart"),
+      createSetArrowStyleToolbarAction("headEnd"),
+      createSetArrowDefaultStyleToolbarAction("stroke"),
+      createSetArrowDefaultStyleToolbarAction("strokeWidth"),
+      createSetArrowDefaultStyleToolbarAction("headStart"),
+      createSetArrowDefaultStyleToolbarAction("headEnd"),
+    ],
+    toolbarContributions: [
+      createArrowToolToolbarContribution(),
+      createArrowDefaultStyleToolbarContribution(),
+      createArrowSelectionToolbarContribution(),
+    ],
+    setup(editor) {
+      editor.setArrowTerminalBindingResolver(resolveArrowTerminalBindingAtPoint);
+      editor.tools.register(
+        "arrow",
+        (currentEditor) => new ArrowTool(currentEditor),
+        { shortcut: "a" },
+      );
+    },
+  };
+}
+
+const ARROW_STROKE_SWATCHES = [
+  { value: "#1d4ed8", label: "Blue", color: "#1d4ed8" },
+  { value: "#15803d", label: "Green", color: "#15803d" },
+  { value: "#dc2626", label: "Red", color: "#dc2626" },
+  { value: "#334155", label: "Slate", color: "#334155" },
+] as const;
+
+const ARROW_STROKE_WIDTH_OPTIONS = [
+  { value: 1, label: "1" },
+  { value: 2, label: "2" },
+  { value: 4, label: "4" },
+] as const;
+
+const ARROW_HEAD_OPTIONS = [
+  { value: "none", label: "None", icon: "minus" },
+  { value: "arrow", label: "Arrow", icon: "arrow-right" },
+] as const satisfies readonly {
+  value: ArrowShapeRecord["props"]["headStart"];
+  label: string;
+  icon: string;
+}[];
+
+function createArrowToolToolbarContribution(): ToolbarContribution {
+  return {
+    id: "arrow.tool-toolbar",
+    surface: "tool",
+    placement: "chrome",
+    order: 40,
+    actionIds: [SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID],
+    getGroups() {
+      return [
+        {
+          id: "arrow.tools",
+          items: [
+            {
+              kind: "button",
+              id: "arrow.tool.arrow",
+              actionId: SET_ACTIVE_TOOL_TOOLBAR_ACTION_ID,
+              value: "arrow",
+              label: "Arrow",
+              shortcut: "A",
+              icon: "arrow-right",
+              dataUi: "arrow-tool-button",
+            },
+          ],
+        },
+      ];
+    },
+  };
+}
+
+function createArrowSelectionToolbarContribution(): ToolbarContribution {
+  return {
+    id: "arrow.selection-toolbar",
+    surface: "selection",
+    order: 20,
+    actionIds: [
+      "arrow.set-stroke",
+      "arrow.set-strokeWidth",
+      "arrow.set-headStart",
+      "arrow.set-headEnd",
+    ],
+    when(context) {
+      return context.selection.commonShapeType === "arrow";
+    },
+    getGroups() {
+      return getArrowStyleToolbarGroups({
+        strokeActionId: "arrow.set-stroke",
+        strokeWidthActionId: "arrow.set-strokeWidth",
+        headStartActionId: "arrow.set-headStart",
+        headEndActionId: "arrow.set-headEnd",
+        dataUiPrefix: "arrow",
+      });
+    },
+  };
+}
+
+function createArrowDefaultStyleToolbarContribution(): ToolbarContribution {
+  return {
+    id: "arrow.default-style.tool-toolbar",
+    surface: "tool",
+    order: 41,
+    actionIds: [
+      "arrow.default-stroke",
+      "arrow.default-strokeWidth",
+      "arrow.default-headStart",
+      "arrow.default-headEnd",
+    ],
+    when(context) {
+      return context.tool.activeToolId === "arrow";
+    },
+    getGroups() {
+      return getArrowStyleToolbarGroups({
+        strokeActionId: "arrow.default-stroke",
+        strokeWidthActionId: "arrow.default-strokeWidth",
+        headStartActionId: "arrow.default-headStart",
+        headEndActionId: "arrow.default-headEnd",
+        dataUiPrefix: "arrow-default",
+      });
+    },
+  };
+}
+
+function getArrowStyleToolbarGroups({
+  strokeActionId,
+  strokeWidthActionId,
+  headStartActionId,
+  headEndActionId,
+  dataUiPrefix,
+}: {
+  strokeActionId: string;
+  strokeWidthActionId: string;
+  headStartActionId: string;
+  headEndActionId: string;
+  dataUiPrefix: string;
+}) {
+  return [
+    {
+      id: `${dataUiPrefix}.style-stroke`,
+      items: [
+        {
+          kind: "swatches" as const,
+          id: `${dataUiPrefix}.stroke`,
+          actionId: strokeActionId,
+          label: "Stroke",
+          options: ARROW_STROKE_SWATCHES.map((option) => ({
+            ...option,
+            dataUi: `${dataUiPrefix}-stroke-${option.label.toLowerCase()}-button`,
+          })),
+        },
+      ],
+    },
+    {
+      id: `${dataUiPrefix}.style-stroke-width`,
+      items: [
+        {
+          kind: "stepper" as const,
+          id: `${dataUiPrefix}.stroke-width`,
+          actionId: strokeWidthActionId,
+          label: "Stroke width",
+          dataUi: `${dataUiPrefix}-stroke-width-control`,
+          options: ARROW_STROKE_WIDTH_OPTIONS.map((option) => ({
+            ...option,
+            dataUi: `${dataUiPrefix}-stroke-width-${option.value}-button`,
+          })),
+        },
+      ],
+    },
+    {
+      id: `${dataUiPrefix}.head-start`,
+      items: [
+        {
+          kind: "segmented" as const,
+          id: `${dataUiPrefix}.head-start`,
+          actionId: headStartActionId,
+          options: ARROW_HEAD_OPTIONS.map((option) => ({
+            ...option,
+            label: `Start head: ${option.label}`,
+            dataUi: `${dataUiPrefix}-start-head-${option.value}-button`,
+          })),
+        },
+      ],
+    },
+    {
+      id: `${dataUiPrefix}.head-end`,
+      items: [
+        {
+          kind: "segmented" as const,
+          id: `${dataUiPrefix}.head-end`,
+          actionId: headEndActionId,
+          options: ARROW_HEAD_OPTIONS.map((option) => ({
+            ...option,
+            label: `End head: ${option.label}`,
+            dataUi: `${dataUiPrefix}-end-head-${option.value}-button`,
+          })),
+        },
+      ],
+    },
+  ];
+}
+
+function createSetArrowStyleToolbarAction(
+  prop: "stroke" | "strokeWidth" | "headStart" | "headEnd",
+): ToolbarAction<ToolbarActionValue> {
+  return {
+    id: `arrow.set-${prop}`,
+    isVisible(context) {
+      return context.selection.commonShapeType === "arrow";
+    },
+    isEnabled(context) {
+      return context.selection.count > 0;
+    },
+    getValue(context) {
+      return getCommonArrowPropValue(context.selection.selectedShapes, prop);
+    },
+    run({ context, value }) {
+      if (!isValidArrowStyleValue(prop, value)) {
+        return;
+      }
+      const updates = context.selection.selectedShapes
+        .filter((shape): shape is ArrowShapeRecord => shape.type === "arrow")
+        .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 createSetArrowDefaultStyleToolbarAction(
+  prop: "stroke" | "strokeWidth" | "headStart" | "headEnd",
+): ToolbarAction<ToolbarActionValue> {
+  return {
+    id: `arrow.default-${prop}`,
+    isVisible(context) {
+      return context.tool.activeToolId === "arrow";
+    },
+    getValue(context) {
+      return context.editor.getDefaultShapeProps<ArrowShapeRecord["props"]>(
+        "arrow",
+      )[prop];
+    },
+    run({ context, value }) {
+      if (!isValidArrowStyleValue(prop, value)) {
+        return;
+      }
+      context.editor.updateDefaultShapeProps("arrow", { [prop]: value });
+    },
+  };
+}
+
+function getCommonArrowPropValue(
+  selectedShapes: readonly { type: string; props: object }[],
+  prop: "stroke" | "strokeWidth" | "headStart" | "headEnd",
+): ToolbarActionValue {
+  let value: ToolbarActionValue | undefined;
+  for (const shape of selectedShapes) {
+    if (shape.type !== "arrow") {
+      continue;
+    }
+    const nextValue = (shape.props as ArrowShapeRecord["props"])[prop];
+    if (value === undefined) {
+      value = nextValue;
+      continue;
+    }
+    if (value !== nextValue) {
+      return null;
+    }
+  }
+  return value ?? null;
+}
+
+function isValidArrowStyleValue(
+  prop: "stroke" | "strokeWidth" | "headStart" | "headEnd",
+  value: ToolbarActionValue,
+): boolean {
+  if (prop === "strokeWidth") {
+    return ARROW_STROKE_WIDTH_OPTIONS.some((option) => option.value === value);
+  }
+  if (prop === "stroke") {
+    return ARROW_STROKE_SWATCHES.some((option) => option.value === value);
+  }
+  return ARROW_HEAD_OPTIONS.some((option) => option.value === value);
+}
+
+function createArrowMarker(
+  terminal: "start" | "end",
+  stroke: string,
+): SvgElementNode {
+  return {
+    tag: "marker",
+    attrs: {
+      markerWidth: 12,
+      markerHeight: 12,
+      viewBox: "0 0 24 24",
+      refX: terminal === "start" ? 2 : 22,
+      refY: 12,
+      orient: "auto",
+      markerUnits: "strokeWidth",
+    },
+    children: [
+      {
+        tag: "path",
+        attrs: {
+          d:
+            terminal === "start"
+              ? "M8.9,8 L2,12 L8.9,16"
+              : "M15.1,8 L22,12 L15.1,16",
+          fill: "none",
+          stroke,
+          "stroke-width": 2,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+        },
+      },
+    ],
+  };
+}

package/_vendor/plugin-arrow/feature.ts

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

package/_vendor/plugin-arrow/index.ts

@@ -0,0 +1,28 @@
+export { ArrowBindingUtil } from "./ArrowBindingUtil";
+export { ArrowShapeUtil } from "./ArrowShapeUtil";
+export { ArrowTool } from "./ArrowTool";
+export { ArrowShapeSvgExporter, createArrowCorePlugin } from "./core";
+export { createArrowCanvasPlugin } from "./canvas";
+export { Arrow, createArrowFeatureBundle } from "./feature";
+export {
+  isArrowBindingRecord,
+  isArrowShapeRecord,
+  type ArrowBindingProps,
+  type ArrowBindingRecord,
+  type ArrowPoint,
+  type ArrowShapeProps,
+  type ArrowShapeRecord,
+  type ArrowTerminal,
+} from "./types";
+export {
+  resolveArrowBindingPagePoint,
+  resolveArrowTerminalBindingAtPoint,
+  resolveArrowTerminalBindingAtStartPoint,
+  resolveArrowTerminalBindingForArrow,
+} from "./arrowTerminalBindingResolver";
+export { createArrow } from "./arrowTerminalCommands";
+export { getArrowTerminalPagePoint } from "./arrowGeometry";
+export {
+  createArrowInteractionHandler,
+  createArrowSelectionHandleInteractionHandler,
+} from "./selectionHandleInteractions";

package/_vendor/plugin-arrow/selectionHandleInteractions.ts

@@ -0,0 +1,154 @@
+import {
+  type HandleSnapMode,
+  type LandInteractionHandler,
+  type SelectionArrowTerminalHandle,
+  type SelectionHandleInteractionHandler,
+  type SelectionHandleInteractionSession,
+  type ShapeId,
+} from "@land/canvas-core";
+import { applyResolvedArrowTerminalBinding } from "./arrowTerminalCommands";
+import {
+  getArrowBendFromMiddlePagePoint,
+  getArrowTerminalPagePoint,
+} from "./arrowGeometry";
+import { resolveArrowTerminalBindingForArrow } from "./arrowTerminalBindingResolver";
+import { isArrowShapeRecord } from "./types";
+
+const ARROW_BEND_SNAP_DISTANCE_SCREEN = 6;
+const TERMINAL_DRAG_HISTORY_MARK = "select.arrow_terminal_drag";
+const ARROW_MIDDLE_DRAG_HISTORY_MARK = "select.arrow_middle_drag";
+const ARROW_TERMINAL_HANDLE_SNAP_MODE: HandleSnapMode = "point";
+
+function getArrowBendWithSnap({
+  bend,
+  bypassSnap,
+  zoom,
+}: {
+  bend: number;
+  bypassSnap: boolean;
+  zoom: number;
+}): number {
+  if (bypassSnap) {
+    return bend;
+  }
+
+  return Math.abs(bend) * zoom <= ARROW_BEND_SNAP_DISTANCE_SCREEN ? 0 : bend;
+}
+
+function createArrowTerminalSession({
+  handle,
+  shapeId,
+  terminal,
+}: {
+  handle: SelectionArrowTerminalHandle;
+  shapeId: ShapeId;
+  terminal: "start" | "end";
+}): SelectionHandleInteractionSession {
+  return {
+    shapeId,
+    historyMark: TERMINAL_DRAG_HISTORY_MARK,
+    handleSnapMode: ARROW_TERMINAL_HANDLE_SNAP_MODE,
+    handleSnapContext: {
+      shapeId,
+      handle,
+    },
+    shouldClearBindingPreviewOnExit: true,
+    update({ editor: currentEditor, pagePoint, accelKey, source }) {
+      const arrow = currentEditor.getShape(shapeId);
+      if (!isArrowShapeRecord(arrow)) {
+        return { status: "stop", finalPagePoint: null };
+      }
+
+      const nextBinding = resolveArrowTerminalBindingForArrow(currentEditor, {
+        arrow,
+        terminal,
+        rawPagePoint: pagePoint,
+        ignoreTargets: accelKey,
+      });
+
+      const nextArrow = applyResolvedArrowTerminalBinding(
+        currentEditor,
+        arrow.id,
+        terminal,
+        nextBinding,
+        source,
+      );
+      return {
+        status: "continue",
+        finalPagePoint: nextArrow
+          ? getArrowTerminalPagePoint(nextArrow, terminal)
+          : nextBinding.pagePoint,
+      };
+    },
+  };
+}
+
+function createArrowMiddleSession({
+  shapeId,
+}: {
+  shapeId: ShapeId;
+}): SelectionHandleInteractionSession {
+  return {
+    shapeId,
+    historyMark: ARROW_MIDDLE_DRAG_HISTORY_MARK,
+    update({ editor, pagePoint, accelKey, source }) {
+      const arrow = editor.getShape(shapeId);
+      if (!isArrowShapeRecord(arrow)) {
+        return "stop";
+      }
+
+      const bend = getArrowBendWithSnap({
+        bend: getArrowBendFromMiddlePagePoint(
+          getArrowTerminalPagePoint(arrow, "start"),
+          getArrowTerminalPagePoint(arrow, "end"),
+          pagePoint,
+        ),
+        bypassSnap: accelKey,
+        zoom: editor.cameraZoomSignal.get(),
+      });
+      editor.commands.updateShapes(
+        [
+          {
+            id: arrow.id,
+            props: {
+              bend,
+            },
+          },
+        ],
+        { source },
+      );
+      return "continue";
+    },
+  };
+}
+
+export function createArrowSelectionHandleInteractionHandler(): SelectionHandleInteractionHandler {
+  return {
+    createSession(editor, { handle, shape }) {
+      if (!isArrowShapeRecord(shape)) {
+        return null;
+      }
+
+      if (handle.kind === "arrow_terminal") {
+        return createArrowTerminalSession({
+          handle,
+          shapeId: shape.id,
+          terminal: handle.terminal,
+        });
+      }
+
+      if (handle.kind === "arrow_middle") {
+        return createArrowMiddleSession({ shapeId: shape.id });
+      }
+
+      return null;
+    },
+  };
+}
+
+export function createArrowInteractionHandler(): LandInteractionHandler {
+  return {
+    id: "land.arrow.interactions",
+    selectionHandle: createArrowSelectionHandleInteractionHandler(),
+  };
+}

package/_vendor/plugin-arrow/types.ts

@@ -0,0 +1,63 @@
+import type {
+  BaseRecord,
+  BindingRecord,
+  BindingRecordBase,
+  ShapeRecord,
+  ShapeRecordBase,
+} from "@land/canvas-core";
+
+export interface ArrowPoint {
+  x: number;
+  y: number;
+}
+
+export type ArrowTerminal = "start" | "end";
+
+export interface ArrowShapeProps {
+  w: number;
+  h: number;
+  start: ArrowPoint;
+  end: ArrowPoint;
+  bend: number;
+  stroke: string;
+  strokeWidth: number;
+  headStart: "none" | "arrow";
+  headEnd: "none" | "arrow";
+}
+
+export interface ArrowShapeRecord
+  extends ShapeRecordBase<"arrow", ArrowShapeProps> {
+  type: "arrow";
+  props: ArrowShapeProps;
+}
+
+export interface ArrowBindingProps {
+  terminal: ArrowTerminal;
+  normalizedAnchor: ArrowPoint;
+}
+
+export interface ArrowBindingRecord
+  extends BindingRecordBase<"arrow", ArrowBindingProps> {
+  type: "arrow";
+  props: ArrowBindingProps;
+}
+
+export function isArrowShapeRecord(
+  record: BaseRecord | null | undefined,
+): record is ArrowShapeRecord {
+  return (
+    !!record &&
+    record.typeName === "shape" &&
+    (record as ShapeRecord).type === "arrow"
+  );
+}
+
+export function isArrowBindingRecord(
+  record: BaseRecord | null | undefined,
+): record is ArrowBindingRecord {
+  return (
+    !!record &&
+    record.typeName === "binding" &&
+    (record as BindingRecord).type === "arrow"
+  );
+}