45 lines
1.5 KiB
JavaScript
45 lines
1.5 KiB
JavaScript
// Rôle : observe les sélections et onglets réellement validés par le contrôleur Goal Tree.
|
|
import { createElement, StrictMode, useLayoutEffect, useMemo } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
import { flushSync } from "react-dom";
|
|
import { useGoalTreeController } from "../../website/src/features/toolboxes/modules/useGoalTreeController.js";
|
|
import { normalizeGoalTreeData } from "../../website/src/features/toolboxes/storage/toolboxStorage.js";
|
|
|
|
export function mountGoalSelectionProbe(element) {
|
|
const root = createRoot(element);
|
|
const snapshots = [];
|
|
let controller;
|
|
|
|
function Probe({ nodes }) {
|
|
const context = useMemo(() => ({
|
|
getModuleData: () => ({ nodes }),
|
|
normalizeGoalTreeData,
|
|
setModuleData: () => {}
|
|
}), [nodes]);
|
|
const state = useGoalTreeController({
|
|
toolboxId: "probe", moduleId: "goal", context,
|
|
editing: true, setEditing: () => {}, openEditor: () => {}
|
|
});
|
|
useLayoutEffect(() => {
|
|
controller = state;
|
|
snapshots.push({
|
|
selected: state.selectedNode?.id || "",
|
|
tab: state.activeFormTab,
|
|
tabs: state.formTabs.map((tab) => tab.id)
|
|
});
|
|
});
|
|
return createElement("output", null, state.selectedNode?.title || "Empty");
|
|
}
|
|
|
|
function update(nodes) {
|
|
snapshots.length = 0;
|
|
flushSync(() => root.render(createElement(StrictMode, null, createElement(Probe, { nodes }))));
|
|
}
|
|
update([]);
|
|
return {
|
|
update,
|
|
snapshots,
|
|
edit: (id) => flushSync(() => controller.editNode(id)),
|
|
unmount: () => root.unmount()
|
|
};
|
|
}
|