@tldraw/editor
Version:
tldraw infinite canvas SDK (editor).
70 lines (69 loc) • 2.4 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { useValue } from "@tldraw/state-react";
import { memo, useRef } from "react";
import { useEditor } from "../../hooks/useEditor.mjs";
import { useEditorComponents } from "../../hooks/useEditorComponents.mjs";
const DefaultShapeIndicators = memo(function DefaultShapeIndicators2({
hideAll,
showAll
}) {
const editor = useEditor();
if (hideAll && showAll)
throw Error("You cannot set both hideAll and showAll props to true, cmon now");
const rPreviousSelectedShapeIds = useRef(/* @__PURE__ */ new Set());
const idsToDisplay = useValue(
"should display selected ids",
() => {
const prev = rPreviousSelectedShapeIds.current;
const next = /* @__PURE__ */ new Set();
const instanceState = editor.getInstanceState();
const isChangingStyle = instanceState.isChangingStyle;
const isIdleOrEditing = editor.isInAny("select.idle", "select.editing_shape");
const isInSelectState = editor.isInAny(
"select.brushing",
"select.scribble_brushing",
"select.pointing_shape",
"select.pointing_selection",
"select.pointing_handle"
);
if (isChangingStyle || !(isIdleOrEditing || isInSelectState)) {
rPreviousSelectedShapeIds.current = next;
return next;
}
for (const id of editor.getSelectedShapeIds()) {
next.add(id);
}
if (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {
const hovered = editor.getHoveredShapeId();
if (hovered) next.add(hovered);
}
if (prev.size !== next.size) {
rPreviousSelectedShapeIds.current = next;
return next;
}
for (const id of next) {
if (!prev.has(id)) {
rPreviousSelectedShapeIds.current = next;
return next;
}
}
return prev;
},
[editor]
);
const renderingShapes = useValue("rendering shapes", () => editor.getRenderingShapes(), [editor]);
const { ShapeIndicator } = useEditorComponents();
if (!ShapeIndicator) return null;
return renderingShapes.map(({ id }) => /* @__PURE__ */ jsx(
ShapeIndicator,
{
shapeId: id,
hidden: !showAll && (hideAll || !idsToDisplay.has(id))
},
id + "_indicator"
));
});
export {
DefaultShapeIndicators
};
//# sourceMappingURL=DefaultShapeIndicators.mjs.map