@tldraw/editor
Version:
tldraw infinite canvas SDK (editor).
42 lines (41 loc) • 1.25 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import classNames from "classnames";
import { useRef } from "react";
import { useSharedSafeId } from "../../hooks/useSafeId.mjs";
import { useTransform } from "../../hooks/useTransform.mjs";
import { Vec } from "../../primitives/Vec.mjs";
import { clamp } from "../../primitives/utils.mjs";
function DefaultCollaboratorHint({
className,
zoom,
point,
color,
viewport,
opacity = 1
}) {
const rSvg = useRef(null);
useTransform(
rSvg,
clamp(point.x, viewport.minX + 5 / zoom, viewport.maxX - 5 / zoom),
clamp(point.y, viewport.minY + 5 / zoom, viewport.maxY - 5 / zoom),
1 / zoom,
Vec.Angle(viewport.center, point)
);
const cursorHintId = useSharedSafeId("cursor_hint");
return /* @__PURE__ */ jsxs("svg", { ref: rSvg, className: classNames("tl-overlays__item", className), "aria-hidden": "true", children: [
/* @__PURE__ */ jsx(
"use",
{
href: `#${cursorHintId}`,
color,
strokeWidth: 3,
stroke: "var(--color-background)"
}
),
/* @__PURE__ */ jsx("use", { href: `#${cursorHintId}`, color, opacity })
] });
}
export {
DefaultCollaboratorHint
};
//# sourceMappingURL=DefaultCollaboratorHint.mjs.map