@yuzhouu/canvas-kit 0.1.2

package/_vendor/plugin-arrow/arrowTerminalBindingResolver.ts

@@ -0,0 +1,253 @@
+import {
+  Vec,
+  pagePointToShapePositionedPoint,
+  positionedShapePointToPagePoint,
+  type ArrowBindingPreviewState,
+  type ArrowBindingTargetInput,
+  type Editor,
+  type ResolvedArrowTerminalBinding,
+  type ShapeId,
+  type ShapeRecord,
+} from "@land/canvas-core";
+import {
+  getArrowTerminalPagePoint,
+  getOppositeArrowTerminal,
+} from "./arrowGeometry";
+import {
+  isArrowShapeRecord,
+  type ArrowPoint,
+  type ArrowShapeRecord,
+} from "./types";
+
+interface ArrowBindingTargetCandidate {
+  targetShape: ShapeRecord;
+  normalizedAnchor: ArrowPoint;
+  resolvedPagePoint: Vec;
+  rawPagePoint: Vec;
+}
+
+function clampUnit(value: number): number {
+  return Math.max(0, Math.min(1, value));
+}
+
+function getNormalizedAnchorPositionedPoint(
+  editor: Editor,
+  target: ShapeRecord,
+  normalizedAnchor: ArrowPoint,
+): Vec {
+  const bounds = editor.computeShapeBounds(target);
+  return new Vec(
+    bounds.minX + bounds.w * normalizedAnchor.x,
+    bounds.minY + bounds.h * normalizedAnchor.y,
+  );
+}
+
+function resolveTargetBoundaryPoint(
+  editor: Editor,
+  target: ShapeRecord,
+  rawAnchorPagePoint: Vec,
+  oppositePagePoint: Vec,
+): Vec {
+  const util = editor.getShapeUtil(target);
+  return util.resolveBindingPoint(target, {
+    rawPagePoint: rawAnchorPagePoint,
+    oppositePagePoint,
+  });
+}
+
+function canBindArrowToShape(
+  shape: ShapeRecord | undefined,
+): shape is ShapeRecord {
+  return !!shape && !isArrowShapeRecord(shape);
+}
+
+function getArrowBindingNormalizedAnchor(
+  editor: Editor,
+  target: ShapeRecord,
+  rawPagePoint: Vec,
+): ArrowPoint {
+  const util = editor.getShapeUtil(target);
+  const positionedPoint = pagePointToShapePositionedPoint(
+    target,
+    rawPagePoint,
+    util,
+  );
+  const bounds = editor.computeShapeBounds(target);
+  const normalizedX =
+    bounds.w <= 1e-6
+      ? 0.5
+      : (positionedPoint.x - bounds.minX) / bounds.w;
+  const normalizedY =
+    bounds.h <= 1e-6
+      ? 0.5
+      : (positionedPoint.y - bounds.minY) / bounds.h;
+
+  return {
+    x: clampUnit(normalizedX),
+    y: clampUnit(normalizedY),
+  };
+}
+
+export function resolveArrowBindingPagePoint(
+  editor: Editor,
+  target: ShapeRecord,
+  normalizedAnchor: ArrowPoint,
+  oppositePagePoint: Vec,
+): Vec {
+  const util = editor.getShapeUtil(target);
+  const rawAnchorPagePoint = positionedShapePointToPagePoint(
+    target,
+    getNormalizedAnchorPositionedPoint(editor, target, normalizedAnchor),
+    util,
+  );
+
+  return resolveTargetBoundaryPoint(
+    editor,
+    target,
+    rawAnchorPagePoint,
+    oppositePagePoint,
+  );
+}
+
+function getArrowBindingTargetAtPoint(
+  editor: Editor,
+  rawPagePoint: Vec,
+  oppositePagePoint: Vec,
+  options?: { excludeShapeId?: ShapeId },
+): ArrowBindingTargetCandidate | null {
+  const target = editor.spatialIndex.getShapeAtPoint(rawPagePoint, {
+    filter: (candidate) =>
+      candidate.id !== options?.excludeShapeId &&
+      canBindArrowToShape(candidate),
+  });
+  if (!target) {
+    return null;
+  }
+
+  const normalizedAnchor = getArrowBindingNormalizedAnchor(
+    editor,
+    target,
+    rawPagePoint,
+  );
+
+  return {
+    targetShape: target,
+    normalizedAnchor,
+    resolvedPagePoint: resolveArrowBindingPagePoint(
+      editor,
+      target,
+      normalizedAnchor,
+      oppositePagePoint,
+    ),
+    rawPagePoint: rawPagePoint.clone(),
+  };
+}
+
+export function resolveArrowTerminalBindingAtPoint(
+  editor: Editor,
+  {
+    terminal,
+    rawPagePoint,
+    oppositePagePoint,
+    excludeShapeId,
+    ignoreTargets = false,
+  }: {
+    terminal: "start" | "end";
+    rawPagePoint: Vec;
+    oppositePagePoint: Vec;
+    excludeShapeId?: ShapeId;
+    ignoreTargets?: boolean;
+  },
+): ResolvedArrowTerminalBinding {
+  if (ignoreTargets) {
+    return {
+      pagePoint: rawPagePoint.clone(),
+      binding: null,
+      preview: null,
+    };
+  }
+
+  const candidate = getArrowBindingTargetAtPoint(
+    editor,
+    rawPagePoint,
+    oppositePagePoint,
+    { excludeShapeId },
+  );
+
+  return {
+    pagePoint: candidate?.resolvedPagePoint ?? rawPagePoint.clone(),
+    binding: getArrowBindingTargetInput(candidate),
+    preview: getArrowBindingPreview(terminal, candidate),
+  };
+}
+
+export function resolveArrowTerminalBindingAtStartPoint(
+  editor: Editor,
+  {
+    terminal,
+    rawPagePoint,
+    ignoreTargets = false,
+  }: {
+    terminal: "start" | "end";
+    rawPagePoint: Vec;
+    ignoreTargets?: boolean;
+  },
+): ResolvedArrowTerminalBinding {
+  return resolveArrowTerminalBindingAtPoint(editor, {
+    terminal,
+    rawPagePoint,
+    oppositePagePoint: rawPagePoint.add(new Vec(1, 0)),
+    ignoreTargets,
+  });
+}
+
+export function resolveArrowTerminalBindingForArrow(
+  editor: Editor,
+  {
+    arrow,
+    terminal,
+    rawPagePoint,
+    ignoreTargets = false,
+  }: {
+    arrow: ArrowShapeRecord;
+    terminal: "start" | "end";
+    rawPagePoint: Vec;
+    ignoreTargets?: boolean;
+  },
+): ResolvedArrowTerminalBinding {
+  return resolveArrowTerminalBindingAtPoint(editor, {
+    terminal,
+    rawPagePoint,
+    oppositePagePoint: getArrowTerminalPagePoint(
+      arrow,
+      getOppositeArrowTerminal(terminal),
+    ),
+    excludeShapeId: arrow.id,
+    ignoreTargets,
+  });
+}
+
+function getArrowBindingTargetInput(
+  candidate: ArrowBindingTargetCandidate | null,
+): ArrowBindingTargetInput | null {
+  return candidate
+    ? {
+        targetShapeId: candidate.targetShape.id,
+        normalizedAnchor: candidate.normalizedAnchor,
+      }
+    : null;
+}
+
+function getArrowBindingPreview(
+  terminal: "start" | "end",
+  candidate: ArrowBindingTargetCandidate | null,
+): ArrowBindingPreviewState | null {
+  return candidate
+    ? {
+        terminal,
+        targetShapeId: candidate.targetShape.id,
+        rawPagePoint: candidate.rawPagePoint,
+        resolvedPagePoint: candidate.resolvedPagePoint,
+      }
+    : null;
+}

package/_vendor/plugin-arrow/arrowTerminalCommands.ts

@@ -0,0 +1,230 @@
+import {
+  Vec,
+  type ChangeSource,
+  type Editor,
+  type PageId,
+  type ResolvedArrowTerminalBinding,
+  type ShapeId,
+  type ArrowBindingTargetInput,
+} from "@land/canvas-core";
+import { setArrowTerminalPagePoint, withArrowPagePoints } from "./arrowGeometry";
+import {
+  isArrowBindingRecord,
+  isArrowShapeRecord,
+  type ArrowShapeRecord,
+  type ArrowShapeProps,
+  type ArrowTerminal,
+} from "./types";
+
+export interface CreateArrowInput {
+  startPagePoint: Vec;
+  endPagePoint: Vec;
+  startBinding?: ArrowBindingTargetInput | null;
+  endBinding?: ArrowBindingTargetInput | null;
+  props?: Partial<ArrowShapeProps>;
+  parentId?: PageId;
+}
+
+export function createArrow(
+  editor: Editor,
+  input: CreateArrowInput,
+  source: ChangeSource = "user",
+): ArrowShapeRecord {
+  const [createdShape] = editor.commands.createShapes(
+    [
+      {
+        type: "arrow",
+        x: input.startPagePoint.x,
+        y: input.startPagePoint.y,
+        parentId: input.parentId,
+        props: input.props,
+      },
+    ],
+    { source },
+  );
+  if (!isArrowShapeRecord(createdShape)) {
+    throw new Error("Failed to create arrow shape");
+  }
+
+  const normalizedArrow = withArrowPagePoints(
+    createdShape,
+    input.startPagePoint,
+    input.endPagePoint,
+  );
+  editor.commands.updateShapes(
+    [
+      {
+        id: createdShape.id,
+        x: normalizedArrow.x,
+        y: normalizedArrow.y,
+        rotation: normalizedArrow.rotation,
+        scaleX: normalizedArrow.scaleX,
+        scaleY: normalizedArrow.scaleY,
+        props: { ...normalizedArrow.props },
+      },
+    ],
+    { source },
+  );
+
+  if (input.startBinding) {
+    editor.commands.createBinding(
+      {
+        type: "arrow",
+        fromId: normalizedArrow.id,
+        toId: input.startBinding.targetShapeId,
+        props: {
+          terminal: "start",
+          normalizedAnchor: input.startBinding.normalizedAnchor,
+        },
+      },
+      { source },
+    );
+  }
+
+  if (input.endBinding) {
+    editor.commands.createBinding(
+      {
+        type: "arrow",
+        fromId: normalizedArrow.id,
+        toId: input.endBinding.targetShapeId,
+        props: {
+          terminal: "end",
+          normalizedAnchor: input.endBinding.normalizedAnchor,
+        },
+      },
+      { source },
+    );
+  }
+
+  const created = editor.getShape(normalizedArrow.id);
+  if (!isArrowShapeRecord(created)) {
+    throw new Error("Failed to create arrow shape");
+  }
+
+  return created;
+}
+
+export function applyResolvedArrowTerminalBinding(
+  editor: Editor,
+  shapeId: ShapeId | null,
+  terminal: ArrowTerminal,
+  resolvedBinding: ResolvedArrowTerminalBinding,
+  source: ChangeSource = "user",
+): ArrowShapeRecord | null {
+  if (!shapeId) {
+    editor.setBindingPreview(resolvedBinding.preview);
+    return null;
+  }
+
+  let nextArrow: ArrowShapeRecord | null = null;
+
+  nextArrow = updateArrowTerminal(
+    editor,
+    {
+      shapeId,
+      terminal,
+      pagePoint: resolvedBinding.pagePoint,
+      binding: resolvedBinding.binding,
+    },
+    source,
+  );
+  editor.setBindingPreview(resolvedBinding.preview);
+
+  return nextArrow;
+}
+
+function updateArrowTerminal(
+  editor: Editor,
+  input: {
+    shapeId: ShapeId;
+    terminal: ArrowTerminal;
+    pagePoint: Vec;
+    binding?: ArrowBindingTargetInput | null;
+  },
+  source: ChangeSource,
+): ArrowShapeRecord | null {
+  const current = editor.getShape(input.shapeId);
+  if (!isArrowShapeRecord(current)) {
+    return null;
+  }
+
+  const freeArrow = setArrowTerminalPagePoint(
+    current,
+    input.terminal,
+    input.pagePoint,
+  );
+  editor.commands.updateShapes(
+    [
+      {
+        id: current.id,
+        x: freeArrow.x,
+        y: freeArrow.y,
+        rotation: freeArrow.rotation,
+        scaleX: freeArrow.scaleX,
+        scaleY: freeArrow.scaleY,
+        props: { ...freeArrow.props },
+      },
+    ],
+    { source },
+  );
+
+  const existingBinding =
+    editor.bindings
+      .getBindingsFromShape(current.id)
+      .find(
+        (binding) =>
+          isArrowBindingRecord(binding) &&
+          binding.props.terminal === input.terminal,
+      ) ?? null;
+
+  if (input.binding) {
+    if (isArrowBindingRecord(existingBinding)) {
+      editor.commands.updateBinding(
+        {
+          id: existingBinding.id,
+          toId: input.binding.targetShapeId,
+          props: {
+            terminal: input.terminal,
+            normalizedAnchor: input.binding.normalizedAnchor,
+          },
+        },
+        { source },
+      );
+    } else {
+      if (existingBinding) {
+        editor.commands.deleteBinding(existingBinding.id, { source });
+      }
+      editor.commands.createBinding(
+        {
+          type: "arrow",
+          fromId: current.id,
+          toId: input.binding.targetShapeId,
+          props: {
+            terminal: input.terminal,
+            normalizedAnchor: input.binding.normalizedAnchor,
+          },
+        },
+        { source },
+      );
+    }
+  } else if (existingBinding) {
+    editor.commands.deleteBinding(existingBinding.id, { source });
+    editor.commands.updateShapes(
+      [
+        {
+          id: current.id,
+          x: freeArrow.x,
+          y: freeArrow.y,
+          rotation: freeArrow.rotation,
+          scaleX: freeArrow.scaleX,
+          scaleY: freeArrow.scaleY,
+          props: { ...freeArrow.props },
+        },
+      ],
+      { source },
+    );
+  }
+
+  const updated = editor.getShape(current.id);
+  return isArrowShapeRecord(updated) ? updated : freeArrow;
+}

package/_vendor/plugin-arrow/canvas.tsx

@@ -0,0 +1,92 @@
+import type { LandCanvasPlugin, ShapeRendererProps } from "@land/canvas-plugin-api";
+import { getArrowLocalInfo } from "./arrowGeometry";
+import type { ArrowShapeRecord } from "./types";
+
+export function createArrowCanvasPlugin(): LandCanvasPlugin {
+  return {
+    id: "land.arrow.react",
+    setup(registerShapeRenderer) {
+      registerShapeRenderer({
+        type: "arrow",
+        component: ArrowShapeRenderer,
+      });
+    },
+  };
+}
+
+function ArrowShapeRenderer({
+  shape,
+  isSelected,
+}: ShapeRendererProps<ArrowShapeRecord>) {
+  const markerIdBase = shape.id.replace(/[^a-zA-Z0-9_-]/g, "-");
+  const startMarkerId = `arrow-head-start-${markerIdBase}`;
+  const endMarkerId = `arrow-head-end-${markerIdBase}`;
+  const arrowInfo = getArrowLocalInfo(shape);
+
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox={`0 0 ${shape.props.w} ${shape.props.h}`}
+      overflow="visible"
+    >
+      <defs>
+        <marker
+          id={startMarkerId}
+          markerWidth="12"
+          markerHeight="12"
+          viewBox="0 0 24 24"
+          refX="2"
+          refY="12"
+          orient="auto"
+          markerUnits="strokeWidth"
+        >
+          <path
+            d="M8.9,8 L2,12 L8.9,16"
+            fill="none"
+            stroke={shape.props.stroke}
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </marker>
+        <marker
+          id={endMarkerId}
+          markerWidth="12"
+          markerHeight="12"
+          viewBox="0 0 24 24"
+          refX="22"
+          refY="12"
+          orient="auto"
+          markerUnits="strokeWidth"
+        >
+          <path
+            d="M15.1,8 L22,12 L15.1,16"
+            fill="none"
+            stroke={shape.props.stroke}
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </marker>
+      </defs>
+      <path
+        d={arrowInfo.path}
+        fill="none"
+        stroke={shape.props.stroke}
+        strokeWidth={shape.props.strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        markerStart={
+          shape.props.headStart === "arrow"
+            ? `url(#${startMarkerId})`
+            : undefined
+        }
+        markerEnd={
+          shape.props.headEnd === "arrow" ? `url(#${endMarkerId})` : undefined
+        }
+        opacity={isSelected ? 0.92 : 1}
+      />
+    </svg>
+  );
+}