@yuzhouu/canvas-kit 0.1.2 → 0.1.3

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

@@ -1,879 +0,0 @@
-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,
-      };
-  }
-}