tldraw/dist-esm/lib/shapes/arrow/elbow/ElbowArrowDebug.mjs

A tiny little drawing editor.

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { Box, useEditor, useValue } from "@tldraw/editor";
import { getArrowBindings } from "../shared.mjs";
import { getElbowArrowInfo } from "./getElbowArrowInfo.mjs";
function ElbowArrowDebug({ arrow }) {
  const editor = useEditor();
  const info = useValue(
    "elbow arrow grid",
    () => {
      try {
        const info2 = getElbowArrowInfo(
          editor,
          editor.getShape(arrow.id),
          getArrowBindings(editor, arrow)
        );
        return info2;
      } catch (err) {
        console.error(err);
        return void 0;
      }
    },
    [editor, arrow.id]
  );
  if (!info) return null;
  const fullBox = Box.Common([info.A.original, info.B.original]).expandBy(50);
  const label = info.route?.name ?? "";
  const midPoint = info.route?.midpointHandle;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    info.midX !== null && /* @__PURE__ */ jsx(
      DebugLine,
      {
        a: { x: info.midX, y: fullBox.minY },
        b: { x: info.midX, y: fullBox.maxY },
        stroke: "red"
      }
    ),
    info.midY !== null && /* @__PURE__ */ jsx(
      DebugLine,
      {
        a: { x: fullBox.minX, y: info.midY },
        b: { x: fullBox.maxX, y: info.midY },
        stroke: "blue"
      }
    ),
    midPoint?.axis === "x" && info.midXRange && /* @__PURE__ */ jsx(
      DebugLine,
      {
        a: { x: info.midXRange.lo, y: midPoint.point.y },
        b: { x: info.midXRange.hi, y: midPoint.point.y },
        stroke: "red",
        strokeDasharray: "0 2"
      }
    ),
    midPoint?.axis === "y" && info.midYRange && /* @__PURE__ */ jsx(
      DebugLine,
      {
        a: { x: midPoint.point.x, y: info.midYRange.lo },
        b: { x: midPoint.point.x, y: info.midYRange.hi },
        stroke: "blue",
        strokeDasharray: "0 2"
      }
    ),
    /* @__PURE__ */ jsx(DebugBox, { box: info.A.original, stroke: "orange" }),
    /* @__PURE__ */ jsx(DebugBox, { box: info.A.expanded, stroke: "orange", strokeWidth: 0.5 }),
    /* @__PURE__ */ jsx(
      DebugBox,
      {
        box: info.A.original.clone().expandBy(info.options.minElbowLegLength),
        stroke: "orange",
        strokeWidth: 0.5
      }
    ),
    /* @__PURE__ */ jsx(DebugBox, { box: info.B.original, stroke: "lightskyblue" }),
    /* @__PURE__ */ jsx(DebugBox, { box: info.B.expanded, stroke: "lightskyblue", strokeWidth: 0.5 }),
    /* @__PURE__ */ jsx(
      DebugBox,
      {
        box: info.B.original.clone().expandBy(info.options.minElbowLegLength),
        stroke: "lightskyblue",
        strokeWidth: 0.5
      }
    ),
    /* @__PURE__ */ jsx(DebugEdge, { edge: info.A.edges.top, axis: "x", stroke: "orange" }),
    /* @__PURE__ */ jsx(DebugEdge, { edge: info.B.edges.top, axis: "x", stroke: "lightskyblue" }),
    /* @__PURE__ */ jsx(DebugEdge, { edge: info.A.edges.right, axis: "y", stroke: "orange" }),
    /* @__PURE__ */ jsx(DebugEdge, { edge: info.B.edges.right, axis: "y", stroke: "lightskyblue" }),
    /* @__PURE__ */ jsx(DebugEdge, { edge: info.A.edges.bottom, axis: "x", stroke: "orange" }),
    /* @__PURE__ */ jsx(DebugEdge, { edge: info.B.edges.bottom, axis: "x", stroke: "lightskyblue" }),
    /* @__PURE__ */ jsx(DebugEdge, { edge: info.A.edges.left, axis: "y", stroke: "orange" }),
    /* @__PURE__ */ jsx(DebugEdge, { edge: info.B.edges.left, axis: "y", stroke: "lightskyblue" }),
    info.route && /* @__PURE__ */ jsx(DebugRoute, { route: info.route.points, strokeWidth: 10 }),
    /* @__PURE__ */ jsx(
      "text",
      {
        x: fullBox.minX + 5,
        y: fullBox.minY - 3,
        fontSize: 10,
        fill: "black",
        stroke: "var(--tl-color-background)",
        strokeWidth: 2,
        paintOrder: "stroke",
        children: label
      }
    ),
    /* @__PURE__ */ jsxs(
      "text",
      {
        x: info.A.expanded.x,
        y: info.A.expanded.y,
        fontSize: 10,
        fill: "black",
        stroke: "var(--tl-color-background)",
        strokeWidth: 2,
        paintOrder: "stroke",
        children: [
          "A",
          info.route && `, ${info.route.aEdgePicking}`,
          info.A.isPoint && `, point`
        ]
      }
    ),
    /* @__PURE__ */ jsxs(
      "text",
      {
        x: info.B.expanded.x,
        y: info.B.expanded.y,
        fontSize: 10,
        fill: "black",
        stroke: "var(--tl-color-background)",
        strokeWidth: 2,
        paintOrder: "stroke",
        children: [
          "B",
          info.route && `, ${info.route.bEdgePicking}`,
          info.B.isPoint && `, point`
        ]
      }
    )
  ] });
}
function DebugLine({ a, b, ...props }) {
  return /* @__PURE__ */ jsx(
    "line",
    {
      fill: "none",
      strokeWidth: 1,
      strokeDasharray: "4,4",
      stroke: "green",
      x1: a.x,
      y1: a.y,
      x2: b.x,
      y2: b.y,
      ...props
    }
  );
}
function DebugRoute({ route, ...props }) {
  return /* @__PURE__ */ jsx(
    "polyline",
    {
      fill: "none",
      stroke: "darkorchid",
      strokeWidth: 3,
      opacity: 0.5,
      points: route.map((r) => `${r.x},${r.y}`).join(" "),
      ...props
    }
  );
}
function DebugEdge({
  edge,
  axis,
  ...props
}) {
  if (!edge || edge.expanded === null) return null;
  const vec = (vec2) => axis === "x" ? { x: vec2.y, y: vec2.x } : vec2;
  return /* @__PURE__ */ jsxs("g", { children: [
    /* @__PURE__ */ jsx(
      DebugLine,
      {
        a: vec({ x: edge.expanded, y: edge.cross.min }),
        b: vec({ x: edge.expanded, y: edge.cross.max }),
        strokeDasharray: "0",
        strokeWidth: 1.5,
        ...props
      }
    ),
    /* @__PURE__ */ jsx(
      DebugLine,
      {
        a: vec({ x: edge.expanded - 4, y: edge.cross.min }),
        b: vec({ x: edge.expanded + 4, y: edge.cross.min }),
        strokeDasharray: "0",
        strokeWidth: 1.5,
        ...props
      }
    ),
    /* @__PURE__ */ jsx(
      DebugLine,
      {
        a: vec({ x: edge.expanded - 4, y: edge.cross.max }),
        b: vec({ x: edge.expanded + 4, y: edge.cross.max }),
        strokeDasharray: "0",
        strokeWidth: 1.5,
        ...props
      }
    )
  ] });
}
function DebugBox({ box, ...props }) {
  return /* @__PURE__ */ jsx(
    "rect",
    {
      x: box.minX,
      y: box.minY,
      width: box.width,
      height: box.height,
      strokeDasharray: "4,4",
      strokeWidth: 1,
      fill: "none",
      ...props
    }
  );
}
export {
  ElbowArrowDebug
};
//# sourceMappingURL=ElbowArrowDebug.mjs.map