31 lines
1.3 KiB
TypeScript
31 lines
1.3 KiB
TypeScript
import type { PlaitBoard } from "@plait/core";
|
|
import type { withEmoji } from "@plait/mind";
|
|
import { getXmindMarker } from "@/lib/flow-board/xmind-markers";
|
|
|
|
/** Use the native marker artwork in Plait's existing emoji geometry and hit targets. */
|
|
export function withXmindMarkers(board: PlaitBoard) {
|
|
const markerBoard = board as ReturnType<typeof withEmoji>;
|
|
const renderEmoji = markerBoard.renderEmoji;
|
|
markerBoard.renderEmoji = (container, props) => {
|
|
const marker = getXmindMarker(props.emojiItem.name);
|
|
if (!marker) return renderEmoji(container, props);
|
|
const image = document.createElement("img");
|
|
image.className = "mind-node-emoji xmind-topic-marker";
|
|
image.draggable = false;
|
|
let currentProps = props;
|
|
const update = (next: Partial<typeof props>) => {
|
|
currentProps = { ...currentProps, ...next };
|
|
const current = getXmindMarker(currentProps.emojiItem.name);
|
|
image.src = current?.asset || marker.asset;
|
|
image.alt = current?.name || marker.name;
|
|
image.dataset.markerId = current?.id || marker.id;
|
|
image.style.width = `${currentProps.fontSize}px`;
|
|
image.style.height = `${currentProps.fontSize}px`;
|
|
};
|
|
update(props);
|
|
container.append(image);
|
|
return { update, destroy: () => image.remove() };
|
|
};
|
|
return board;
|
|
}
|