tldraw
Version:
A tiny little drawing editor.
249 lines (248 loc) • 8.27 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var ElbowArrowDebug_exports = {};
__export(ElbowArrowDebug_exports, {
ElbowArrowDebug: () => ElbowArrowDebug
});
module.exports = __toCommonJS(ElbowArrowDebug_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_editor = require("@tldraw/editor");
var import_shared = require("../shared");
var import_getElbowArrowInfo = require("./getElbowArrowInfo");
function ElbowArrowDebug({ arrow }) {
const editor = (0, import_editor.useEditor)();
const info = (0, import_editor.useValue)(
"elbow arrow grid",
() => {
try {
const info2 = (0, import_getElbowArrowInfo.getElbowArrowInfo)(
editor,
editor.getShape(arrow.id),
(0, import_shared.getArrowBindings)(editor, arrow)
);
return info2;
} catch (err) {
console.error(err);
return void 0;
}
},
[editor, arrow.id]
);
if (!info) return null;
const fullBox = import_editor.Box.Common([info.A.original, info.B.original]).expandBy(50);
const label = info.route?.name ?? "";
const midPoint = info.route?.midpointHandle;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
info.midX !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
DebugLine,
{
a: { x: info.midX, y: fullBox.minY },
b: { x: info.midX, y: fullBox.maxY },
stroke: "red"
}
),
info.midY !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
DebugLine,
{
a: { x: fullBox.minX, y: info.midY },
b: { x: fullBox.maxX, y: info.midY },
stroke: "blue"
}
),
midPoint?.axis === "x" && info.midXRange && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(DebugBox, { box: info.A.original, stroke: "orange" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugBox, { box: info.A.expanded, stroke: "orange", strokeWidth: 0.5 }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
DebugBox,
{
box: info.A.original.clone().expandBy(info.options.minElbowLegLength),
stroke: "orange",
strokeWidth: 0.5
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugBox, { box: info.B.original, stroke: "lightskyblue" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugBox, { box: info.B.expanded, stroke: "lightskyblue", strokeWidth: 0.5 }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
DebugBox,
{
box: info.B.original.clone().expandBy(info.options.minElbowLegLength),
stroke: "lightskyblue",
strokeWidth: 0.5
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugEdge, { edge: info.A.edges.top, axis: "x", stroke: "orange" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugEdge, { edge: info.B.edges.top, axis: "x", stroke: "lightskyblue" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugEdge, { edge: info.A.edges.right, axis: "y", stroke: "orange" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugEdge, { edge: info.B.edges.right, axis: "y", stroke: "lightskyblue" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugEdge, { edge: info.A.edges.bottom, axis: "x", stroke: "orange" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugEdge, { edge: info.B.edges.bottom, axis: "x", stroke: "lightskyblue" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugEdge, { edge: info.A.edges.left, axis: "y", stroke: "orange" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugEdge, { edge: info.B.edges.left, axis: "y", stroke: "lightskyblue" }),
info.route && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DebugRoute, { route: info.route.points, strokeWidth: 10 }),
/* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
/* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
"rect",
{
x: box.minX,
y: box.minY,
width: box.width,
height: box.height,
strokeDasharray: "4,4",
strokeWidth: 1,
fill: "none",
...props
}
);
}
//# sourceMappingURL=ElbowArrowDebug.js.map