@yuzhouu/canvas-kit 0.1.2

package/_vendor/canvas-react/components/OverlayLayer.tsx

@@ -0,0 +1,879 @@
+import { memo } from "react";
+import {
+  type ArrowBindingPreviewState,
+  type Editor,
+  type GapSnapIndicatorState,
+  type PointSnapIndicatorState,
+  type SelectionOverlayFrameGeometryState,
+  type SelectionOverlayHandleAnchorsState,
+  type SelectionResizeHandleId,
+  type ShapeRecord,
+  type SnapIndicatorState,
+  type Vec,
+} from "@land/canvas-core";
+import { useEditor } from "../hooks/useEditor";
+import { useValue } from "../hooks/useValue";
+import { PageSpace } from "./PageSpace";
+
+function ShapeOutlineOverlay({
+  editor,
+  shape,
+  stroke,
+  fill,
+  strokeWidth,
+}: {
+  editor: Editor;
+  shape: ShapeRecord;
+  stroke: string;
+  fill: string;
+  strokeWidth: number;
+}) {
+  const outline = editor.getShapePageOutlineVertices(shape.id);
+  if (outline.length === 0) {
+    return null;
+  }
+
+  return (
+    <polygon
+      points={outline.map((point) => `${point.x},${point.y}`).join(" ")}
+      fill={fill}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeLinejoin="round"
+      strokeLinecap="round"
+    />
+  );
+}
+
+export function OverlayLayer() {
+  return (
+    <div
+      data-ui="overlay-layer"
+      className="overlay-layer pointer-events-none absolute inset-0"
+      style={{
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+      }}
+    >
+      <PageSpace
+        dataUi="overlay-page-space"
+        className="overlay-layer__page-space absolute inset-0"
+      >
+        <OverlaySvgRoot />
+      </PageSpace>
+    </div>
+  );
+}
+
+const OverlaySvgRoot = memo(function OverlaySvgRoot() {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      style={{
+        display: "block",
+        width: "100%",
+        height: "100%",
+        overflow: "visible",
+      }}
+    >
+      <style>
+        {`
+          [data-selection-terminal],
+          [data-selection-arrow-middle],
+          [data-selection-custom-handle]:not([data-selection-custom-handle-type="image.crop"]) {
+            transition: fill 120ms ease, stroke 120ms ease;
+          }
+          [data-selection-terminal]:hover,
+          [data-selection-arrow-middle]:hover,
+          [data-selection-custom-handle]:not([data-selection-custom-handle-type="image.crop"]):hover {
+            fill: rgba(219, 234, 254, 0.98);
+            stroke: rgba(29, 78, 216, 0.98);
+          }
+          [data-selection-terminal]:active,
+          [data-selection-arrow-middle]:active,
+          [data-selection-custom-handle]:active {
+            cursor: grabbing;
+          }
+        `}
+      </style>
+      <SnapIndicatorsOverlay />
+      <BindingPreviewOverlay />
+      <BrushBoxOverlay />
+      <SelectionOverlaySvg />
+    </svg>
+  );
+});
+
+const BindingPreviewOverlay = memo(function BindingPreviewOverlay() {
+  const editor = useEditor();
+  const isBindingPreviewActive = useValue(editor.bindingPreviewActiveSignal);
+
+  if (!isBindingPreviewActive) {
+    return null;
+  }
+
+  return <BindingPreviewContent />;
+});
+
+const SNAP_STROKE = "rgba(37, 99, 235, 0.9)";
+
+const SnapIndicatorsOverlay = memo(function SnapIndicatorsOverlay() {
+  const editor = useEditor();
+  const snapIndicators = useValue(editor.snapIndicatorsSignal);
+
+  if (snapIndicators.length === 0) {
+    return null;
+  }
+
+  return <SnapIndicatorsContent indicators={snapIndicators} />;
+});
+
+const SnapIndicatorsContent = memo(function SnapIndicatorsContent({
+  indicators,
+}: {
+  indicators: SnapIndicatorState[];
+}) {
+  const editor = useEditor();
+  const zoom = useValue(editor.cameraZoomSignal);
+
+  return (
+    <>
+      {indicators.map((indicator) =>
+        indicator.type === "points" ? (
+          <PointSnapIndicatorOverlay
+            key={indicator.id}
+            indicator={indicator}
+            zoom={zoom}
+          />
+        ) : (
+          <GapSnapIndicatorOverlay
+            key={indicator.id}
+            indicator={indicator}
+            zoom={zoom}
+          />
+        ),
+      )}
+    </>
+  );
+});
+
+const PointSnapIndicatorOverlay = memo(function PointSnapIndicatorOverlay({
+  indicator,
+  zoom,
+}: {
+  indicator: PointSnapIndicatorState;
+  zoom: number;
+}) {
+  const crossSize = 2.5 / zoom;
+  const strokeWidth = 1 / zoom;
+  const [lineStart, lineEnd] = indicator.line;
+  const path = `M ${lineStart.x} ${lineStart.y} L ${lineEnd.x} ${lineEnd.y}`;
+  const rotationDegrees = (indicator.rotation * 180) / Math.PI;
+  const transform =
+    indicator.rotation === 0
+      ? undefined
+      : `rotate(${rotationDegrees} ${indicator.rotationCenter.x} ${indicator.rotationCenter.y})`;
+
+  return (
+    <g data-ui="snap-indicator" transform={transform}>
+      <path
+        data-ui="snap-indicator-line"
+        d={path}
+        fill="none"
+        stroke={SNAP_STROKE}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+      />
+      {indicator.points.map((point, index) => (
+        <path
+          key={`${indicator.id}:${index}`}
+          data-ui="snap-indicator-cross"
+          d={`M ${point.x - crossSize} ${point.y - crossSize} L ${point.x + crossSize} ${point.y + crossSize} M ${point.x - crossSize} ${point.y + crossSize} L ${point.x + crossSize} ${point.y - crossSize}`}
+          fill="none"
+          stroke={SNAP_STROKE}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+        />
+      ))}
+    </g>
+  );
+});
+
+function getRangeIntersection(
+  first: [number, number],
+  second: [number, number],
+): [number, number] | null {
+  const min = Math.max(first[0], second[0]);
+  const max = Math.min(first[1], second[1]);
+  return min <= max ? [min, max] : null;
+}
+
+const GapSnapIndicatorOverlay = memo(function GapSnapIndicatorOverlay({
+  indicator,
+  zoom,
+}: {
+  indicator: GapSnapIndicatorState;
+  zoom: number;
+}) {
+  if (indicator.gaps.length === 0) {
+    return null;
+  }
+
+  const horizontal = indicator.direction === "horizontal";
+  let edgeIntersection: [number, number] = [
+    Number.NEGATIVE_INFINITY,
+    Number.POSITIVE_INFINITY,
+  ];
+  for (const gap of indicator.gaps) {
+    const startIntersection = getRangeIntersection(edgeIntersection, [
+      horizontal ? gap.startEdge[0].y : gap.startEdge[0].x,
+      horizontal ? gap.startEdge[1].y : gap.startEdge[1].x,
+    ]);
+    if (startIntersection) {
+      edgeIntersection = startIntersection;
+    }
+    const endIntersection = getRangeIntersection(edgeIntersection, [
+      horizontal ? gap.endEdge[0].y : gap.endEdge[0].x,
+      horizontal ? gap.endEdge[1].y : gap.endEdge[1].x,
+    ]);
+    if (endIntersection) {
+      edgeIntersection = endIntersection;
+    }
+  }
+
+  if (
+    !Number.isFinite(edgeIntersection[0]) ||
+    !Number.isFinite(edgeIntersection[1])
+  ) {
+    return null;
+  }
+
+  const midPoint = (edgeIntersection[0] + edgeIntersection[1]) / 2;
+  const halfTick = 3.5 / zoom;
+  const tickLength = halfTick * 2;
+  const commands: string[] = [];
+  for (const { startEdge, endEdge } of indicator.gaps) {
+    if (horizontal) {
+      commands.push(
+        `M ${startEdge[0].x} ${midPoint - tickLength} L ${startEdge[1].x} ${midPoint + tickLength}`,
+        `M ${endEdge[0].x} ${midPoint - tickLength} L ${endEdge[1].x} ${midPoint + tickLength}`,
+        `M ${startEdge[0].x} ${midPoint} L ${endEdge[0].x} ${midPoint}`,
+      );
+      const centerX = (startEdge[0].x + endEdge[0].x) / 2;
+      commands.push(
+        `M ${centerX} ${midPoint - halfTick} L ${centerX} ${midPoint + halfTick}`,
+      );
+    } else {
+      commands.push(
+        `M ${midPoint - tickLength} ${startEdge[0].y} L ${midPoint + tickLength} ${startEdge[1].y}`,
+        `M ${midPoint - tickLength} ${endEdge[0].y} L ${midPoint + tickLength} ${endEdge[1].y}`,
+        `M ${midPoint} ${startEdge[0].y} L ${midPoint} ${endEdge[0].y}`,
+      );
+      const centerY = (startEdge[0].y + endEdge[0].y) / 2;
+      commands.push(
+        `M ${midPoint - halfTick} ${centerY} L ${midPoint + halfTick} ${centerY}`,
+      );
+    }
+  }
+
+  const rotationDegrees = (indicator.rotation * 180) / Math.PI;
+  const transform =
+    indicator.rotation === 0
+      ? undefined
+      : `rotate(${rotationDegrees} ${indicator.rotationCenter.x} ${indicator.rotationCenter.y})`;
+
+  return (
+    <path
+      data-ui="snap-gap-indicator"
+      d={commands.join(" ")}
+      transform={transform}
+      fill="none"
+      stroke={SNAP_STROKE}
+      strokeWidth={1 / zoom}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  );
+});
+
+const BindingPreviewContent = memo(function BindingPreviewContent() {
+  const editor = useEditor();
+  const bindingPreview = useValue(editor.bindingPreviewSignal);
+
+  if (!bindingPreview) {
+    return null;
+  }
+
+  return (
+    <>
+      <BindingPreviewTargetOutline
+        targetShapeId={bindingPreview.targetShapeId}
+      />
+      <BindingPreviewPoints bindingPreview={bindingPreview} />
+    </>
+  );
+});
+
+const BindingPreviewTargetOutline = memo(function BindingPreviewTargetOutline({
+  targetShapeId,
+}: {
+  targetShapeId: ArrowBindingPreviewState["targetShapeId"];
+}) {
+  const editor = useEditor();
+  const zoom = useValue(editor.cameraZoomSignal);
+  const targetShape = useValue(editor.getShapeSignal(targetShapeId));
+
+  if (!targetShape) {
+    return null;
+  }
+
+  return (
+    <ShapeOutlineOverlay
+      editor={editor}
+      shape={targetShape}
+      stroke="rgba(14, 165, 233, 0.78)"
+      fill="rgba(14, 165, 233, 0.08)"
+      strokeWidth={2 / zoom}
+    />
+  );
+});
+
+const BindingPreviewPoints = memo(function BindingPreviewPoints({
+  bindingPreview,
+}: {
+  bindingPreview: ArrowBindingPreviewState;
+}) {
+  return (
+    <>
+      <circle
+        data-binding-preview-point="raw"
+        cx={bindingPreview.rawPagePoint.x}
+        cy={bindingPreview.rawPagePoint.y}
+        r={6}
+        fill="rgba(255,255,255,0.96)"
+        stroke="rgba(14, 165, 233, 0.8)"
+        strokeWidth={2}
+      />
+      <circle
+        data-binding-preview-point="resolved"
+        cx={bindingPreview.resolvedPagePoint.x}
+        cy={bindingPreview.resolvedPagePoint.y}
+        r={7}
+        fill="rgba(14, 165, 233, 0.18)"
+        stroke="rgba(2, 132, 199, 0.9)"
+        strokeWidth={2}
+      />
+    </>
+  );
+});
+
+const BrushBoxOverlay = memo(function BrushBoxOverlay() {
+  const editor = useEditor();
+  const isBrushBoxActive = useValue(editor.brushBoxActiveSignal);
+
+  if (!isBrushBoxActive) {
+    return null;
+  }
+
+  return <BrushBoxContent />;
+});
+
+const BrushBoxContent = memo(function BrushBoxContent() {
+  const editor = useEditor();
+  const brushBox = useValue(editor.brushBoxSignal);
+
+  if (!brushBox) {
+    return null;
+  }
+
+  return (
+    <rect
+      data-ui="brush-box-overlay"
+      x={brushBox.x}
+      y={brushBox.y}
+      width={brushBox.w}
+      height={brushBox.h}
+      fill="rgba(59, 130, 246, 0.14)"
+      stroke="rgba(37, 99, 235, 0.92)"
+      strokeDasharray="4 3"
+      strokeWidth={1}
+    />
+  );
+});
+
+const SelectionOverlaySvg = memo(function SelectionOverlaySvg() {
+  return (
+    <>
+      <SelectionArrowPathOverlay />
+      <SelectionFrameOverlay />
+      <SelectionHandlesOverlay />
+    </>
+  );
+});
+
+const SelectionArrowPathOverlay = memo(function SelectionArrowPathOverlay() {
+  const editor = useEditor();
+  const arrowPath = useValue(editor.selectionOverlayArrowPathSignal);
+  const frameStyle = useValue(editor.selectionOverlayFrameStyleSignal);
+
+  if (!arrowPath) {
+    return null;
+  }
+
+  return (
+    <>
+      <path
+        data-selection-overlay="arrow-path-underlay"
+        d={arrowPath}
+        fill="none"
+        stroke="rgba(255,255,255,0.92)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={frameStyle.strokeWidth * 2}
+      />
+      <path
+        data-selection-overlay="arrow-path"
+        d={arrowPath}
+        fill="none"
+        stroke="rgba(37, 99, 235, 0.88)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={frameStyle.strokeWidth}
+      />
+    </>
+  );
+});
+
+const SelectionFrameOverlay = memo(function SelectionFrameOverlay() {
+  const editor = useEditor();
+  const selectionFrameGeometry = useValue(
+    editor.selectionOverlayFrameGeometrySignal,
+  );
+  const companionFrameGeometries = useValue(
+    editor.selectionOverlayCompanionFrameGeometriesSignal,
+  );
+
+  if (!selectionFrameGeometry && companionFrameGeometries.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {selectionFrameGeometry ? (
+        <SelectionFrameContent frameGeometry={selectionFrameGeometry} />
+      ) : null}
+      {companionFrameGeometries.map((frameGeometry, index) => (
+        <SelectionFrameContent
+          key={`companion-${index}`}
+          frameGeometry={frameGeometry}
+        />
+      ))}
+    </>
+  );
+});
+
+const SelectionFrameContent = memo(function SelectionFrameContent({
+  frameGeometry,
+}: {
+  frameGeometry: SelectionOverlayFrameGeometryState;
+}) {
+  const editor = useEditor();
+  const frameStyle = useValue(editor.selectionOverlayFrameStyleSignal);
+  const { bounds, rotation, rotationCenter } = frameGeometry;
+  const { cornerRadius, strokeWidth } = frameStyle;
+  const rotationDegrees = (rotation * 180) / Math.PI;
+  const rotationTransform =
+    rotation === 0
+      ? undefined
+      : `rotate(${rotationDegrees} ${rotationCenter.x} ${rotationCenter.y})`;
+
+  return (
+    <>
+      <g transform={rotationTransform}>
+        <rect
+          data-selection-overlay="bounds-underlay"
+          x={bounds.x}
+          y={bounds.y}
+          width={bounds.w}
+          height={bounds.h}
+          rx={cornerRadius}
+          ry={cornerRadius}
+          fill="none"
+          stroke="rgba(255,255,255,0.92)"
+          strokeWidth={strokeWidth * 2}
+        />
+        <rect
+          data-selection-overlay="bounds"
+          x={bounds.x}
+          y={bounds.y}
+          width={bounds.w}
+          height={bounds.h}
+          rx={cornerRadius}
+          ry={cornerRadius}
+          fill="none"
+          stroke="rgba(37, 99, 235, 0.88)"
+          strokeWidth={strokeWidth}
+        />
+      </g>
+    </>
+  );
+});
+
+const SelectionHandlesOverlay = memo(function SelectionHandlesOverlay() {
+  const editor = useEditor();
+  const selectionHandleAnchors = useValue(
+    editor.selectionOverlayHandleAnchorsSignal,
+  );
+
+  if (!selectionHandleAnchors) {
+    return null;
+  }
+
+  return <SelectionHandlesContent anchors={selectionHandleAnchors} />;
+});
+
+const SelectionHandlesContent = memo(function SelectionHandlesContent({
+  anchors: _anchors,
+}: {
+  anchors: SelectionOverlayHandleAnchorsState;
+}) {
+  const editor = useEditor();
+  const selectionHandles = useValue(editor.selectionOverlayHandlesSignal);
+  const selectionFrame = useValue(editor.selectionOverlayFrameGeometrySignal);
+  const zoom = useValue(editor.cameraZoomSignal);
+
+  if (!selectionHandles) {
+    return null;
+  }
+
+  const {
+    resizeHandles,
+    rotateHandles,
+    strokeWidth,
+    terminalHandles,
+    middleHandles,
+    customHandles,
+  } = selectionHandles;
+
+  return (
+    <>
+      {resizeHandles.map((handle) => (
+        <rect
+          key={handle.id}
+          data-selection-resize-handle={handle.id}
+          x={handle.bounds.x}
+          y={handle.bounds.y}
+          width={handle.bounds.w}
+          height={handle.bounds.h}
+          rx={4}
+          ry={4}
+          fill="rgba(255,255,255,0.98)"
+          stroke="rgba(37, 99, 235, 0.92)"
+          strokeWidth={strokeWidth}
+          style={{
+            cursor: getSelectionResizeHandleCursor(
+              handle.id,
+              selectionFrame?.rotation ?? 0,
+            ),
+            pointerEvents: "auto",
+          }}
+        />
+      ))}
+      {rotateHandles.map((handle) => (
+        <g
+          key={handle.id}
+          data-selection-rotate-handle={handle.id}
+          transform={`translate(${handle.bounds.center.x - 6 / zoom} ${handle.bounds.center.y - 6 / zoom}) scale(${0.6 / zoom})`}
+          fill="none"
+          stroke="rgba(37, 99, 235, 0.96)"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+          <path d="M21 3v5h-5" />
+        </g>
+      ))}
+      {terminalHandles.map((handle) => (
+        <circle
+          key={handle.terminal}
+          data-selection-terminal={handle.terminal}
+          cx={handle.bounds.center.x}
+          cy={handle.bounds.center.y}
+          r={Math.min(handle.bounds.w, handle.bounds.h) / 2}
+          fill="rgba(255,255,255,0.98)"
+          stroke="rgba(37, 99, 235, 0.92)"
+          strokeWidth={strokeWidth}
+          style={{
+            cursor: "grab",
+            pointerEvents: "auto",
+          }}
+        />
+      ))}
+      {middleHandles.map((handle) => (
+        <rect
+          key="middle"
+          data-selection-arrow-middle="true"
+          x={handle.bounds.x}
+          y={handle.bounds.y}
+          width={handle.bounds.w}
+          height={handle.bounds.h}
+          rx={2}
+          ry={2}
+          fill="rgba(255,255,255,0.98)"
+          stroke="rgba(37, 99, 235, 0.92)"
+          strokeWidth={strokeWidth}
+          transform={`rotate(45 ${handle.bounds.center.x} ${handle.bounds.center.y})`}
+          style={{
+            cursor: "grab",
+            pointerEvents: "auto",
+          }}
+        />
+      ))}
+      {customHandles.map((handle) =>
+        handle.type === "image.crop" ? (
+          <ImageCropHandleOverlay
+            key={`${handle.type}:${handle.id}`}
+            handle={handle}
+            strokeWidth={strokeWidth}
+          />
+        ) : (
+          <rect
+            key={`${handle.type}:${handle.id}`}
+            data-selection-custom-handle={handle.id}
+            data-selection-custom-handle-type={handle.type}
+            data-selection-custom-handle-id={handle.id}
+            x={handle.bounds.x}
+            y={handle.bounds.y}
+            width={handle.bounds.w}
+            height={handle.bounds.h}
+            rx={3}
+            ry={3}
+            fill="rgba(255,255,255,0.98)"
+            stroke="rgba(37, 99, 235, 0.92)"
+            strokeWidth={strokeWidth}
+            style={{
+              cursor: handle.cursor ?? "grab",
+              pointerEvents: "auto",
+            }}
+          />
+        ),
+      )}
+    </>
+  );
+});
+
+const RESIZE_CURSORS = [
+  "ew-resize",
+  "nwse-resize",
+  "ns-resize",
+  "nesw-resize",
+] as const;
+
+function getSelectionResizeHandleCursor(
+  handleId: SelectionResizeHandleId,
+  rotation: number,
+): string {
+  const baseAngle = getSelectionResizeHandleAngle(handleId);
+  const normalizedAngle =
+    ((((baseAngle + rotation) % Math.PI) + Math.PI) % Math.PI) / (Math.PI / 4);
+  const cursorIndex = Math.round(normalizedAngle) % RESIZE_CURSORS.length;
+  return RESIZE_CURSORS[cursorIndex] ?? "default";
+}
+
+function getSelectionResizeHandleAngle(
+  handleId: SelectionResizeHandleId,
+): number {
+  switch (handleId) {
+    case "top_left":
+    case "bottom_right":
+      return Math.PI / 4;
+    case "top":
+    case "bottom":
+      return Math.PI / 2;
+    case "top_right":
+    case "bottom_left":
+      return (Math.PI * 3) / 4;
+    case "right":
+    case "left":
+      return 0;
+  }
+}
+
+function ImageCropHandleOverlay({
+  handle,
+  strokeWidth,
+}: {
+  handle: {
+    id: string;
+    type: string;
+    cursor?: string;
+    bounds: { x: number; y: number; w: number; h: number; center: Vec };
+  };
+  strokeWidth: number;
+}) {
+  const { x, y, w, h, center } = handle.bounds;
+  const handleSize = Math.max(w, h);
+  const extension = handleSize * 1.35;
+  const visualStrokeWidth = Math.max(strokeWidth * 2.5, 2);
+  const outwardOffset = visualStrokeWidth / 2;
+  const commonProps = {
+    fill: "none",
+    stroke: "rgba(37, 99, 235, 0.96)",
+    strokeLinecap: "butt" as const,
+    strokeLinejoin: "miter" as const,
+    strokeWidth: visualStrokeWidth,
+    pointerEvents: "none" as const,
+  };
+  const handlePath = getImageCropHandlePath({
+    id: handle.id,
+    extension,
+    outwardOffset,
+    centerX: center.x,
+    centerY: center.y,
+  });
+
+  return (
+    <g>
+      <rect
+        data-selection-custom-handle={handle.id}
+        data-selection-custom-handle-type={handle.type}
+        data-selection-custom-handle-id={handle.id}
+        x={x - w * 0.8}
+        y={y - h * 0.8}
+        width={w * 2.6}
+        height={h * 2.6}
+        fill="transparent"
+        style={{
+          cursor: handle.cursor ?? "grab",
+          pointerEvents: "auto",
+        }}
+      />
+      {handlePath.kind === "corner" ? (
+        <polyline points={handlePath.points} {...commonProps} />
+      ) : (
+        <line
+          x1={handlePath.x1}
+          y1={handlePath.y1}
+          x2={handlePath.x2}
+          y2={handlePath.y2}
+          {...commonProps}
+        />
+      )}
+    </g>
+  );
+}
+
+type ImageCropHandlePath =
+  | {
+      kind: "corner";
+      points: string;
+    }
+  | {
+      kind: "edge";
+      x1: number;
+      y1: number;
+      x2: number;
+      y2: number;
+    };
+
+function formatSvgPoint(x: number, y: number): string {
+  return `${x},${y}`;
+}
+
+function getImageCropHandlePath({
+  id,
+  extension,
+  outwardOffset,
+  centerX,
+  centerY,
+}: {
+  id: string;
+  extension: number;
+  outwardOffset: number;
+  centerX: number;
+  centerY: number;
+}): ImageCropHandlePath {
+  switch (id) {
+    case "top_left":
+      return {
+        kind: "corner",
+        points: [
+          formatSvgPoint(centerX - outwardOffset, centerY + extension),
+          formatSvgPoint(centerX - outwardOffset, centerY - outwardOffset),
+          formatSvgPoint(centerX + extension, centerY - outwardOffset),
+        ].join(" "),
+      };
+    case "top":
+      return {
+        kind: "edge",
+        x1: centerX - extension,
+        y1: centerY - outwardOffset,
+        x2: centerX + extension,
+        y2: centerY - outwardOffset,
+      };
+    case "top_right":
+      return {
+        kind: "corner",
+        points: [
+          formatSvgPoint(centerX - extension, centerY - outwardOffset),
+          formatSvgPoint(centerX + outwardOffset, centerY - outwardOffset),
+          formatSvgPoint(centerX + outwardOffset, centerY + extension),
+        ].join(" "),
+      };
+    case "right":
+      return {
+        kind: "edge",
+        x1: centerX + outwardOffset,
+        y1: centerY - extension,
+        x2: centerX + outwardOffset,
+        y2: centerY + extension,
+      };
+    case "bottom_right":
+      return {
+        kind: "corner",
+        points: [
+          formatSvgPoint(centerX + outwardOffset, centerY - extension),
+          formatSvgPoint(centerX + outwardOffset, centerY + outwardOffset),
+          formatSvgPoint(centerX - extension, centerY + outwardOffset),
+        ].join(" "),
+      };
+    case "bottom":
+      return {
+        kind: "edge",
+        x1: centerX - extension,
+        y1: centerY + outwardOffset,
+        x2: centerX + extension,
+        y2: centerY + outwardOffset,
+      };
+    case "bottom_left":
+      return {
+        kind: "corner",
+        points: [
+          formatSvgPoint(centerX + extension, centerY + outwardOffset),
+          formatSvgPoint(centerX - outwardOffset, centerY + outwardOffset),
+          formatSvgPoint(centerX - outwardOffset, centerY - extension),
+        ].join(" "),
+      };
+    case "left":
+      return {
+        kind: "edge",
+        x1: centerX - outwardOffset,
+        y1: centerY - extension,
+        x2: centerX - outwardOffset,
+        y2: centerY + extension,
+      };
+    default:
+      return {
+        kind: "edge",
+        x1: centerX,
+        y1: centerY,
+        x2: centerX,
+        y2: centerY,
+      };
+  }
+}