From 1824bb0ffdfac79e9ee0c812e4c92e30d66c6306 Mon Sep 17 00:00:00 2001 From: Simon Ser Date: Thu, 11 Jul 2024 15:44:05 +0200 Subject: [PATCH] wip: wire up import to NGE component --- .../components/MacroEditor/NGE.tsx | 42 +++++++++++++------ .../views/v2/ScenarioV2.tsx | 14 ++++--- 2 files changed, 38 insertions(+), 18 deletions(-) diff --git a/front/src/applications/operationalStudies/components/MacroEditor/NGE.tsx b/front/src/applications/operationalStudies/components/MacroEditor/NGE.tsx index 644679c3240..4f997b6cf75 100644 --- a/front/src/applications/operationalStudies/components/MacroEditor/NGE.tsx +++ b/front/src/applications/operationalStudies/components/MacroEditor/NGE.tsx @@ -10,7 +10,7 @@ import ngeVendor from '@osrd-project/netzgrafik-frontend/dist/netzgrafik-fronten const frameSrc = ` - + @@ -22,30 +22,40 @@ const frameSrc = ` `; -function NGE() { +interface NGEElement extends HTMLElement { + netzgrafikDto: { nodes: unknown }; +} + +const setNodes = (ngeRoot: NGEElement, nodes: unknown) => { + // get netzgrafik model from NGE + const dto = ngeRoot.netzgrafikDto; + + // set new netzgrafik model with new nodes + if (nodes) { + dto.nodes = nodes; + } + ngeRoot.netzgrafikDto = dto; +}; + +const NGE = ({ nodes }: { nodes?: unknown }) => { const frameRef = useRef(null); + let ngeRoot: NGEElement | null = null; useEffect(() => { const frame = frameRef.current!; - function handleFrameLoad() { + const handleFrameLoad = () => { frame.removeEventListener('load', handleFrameLoad); - const ngeRoot = frame.contentDocument!.createElement('sbb-root'); + ngeRoot = frame.contentDocument!.createElement('sbb-root') as NGEElement; frame.contentDocument!.body.appendChild(ngeRoot); // listens to create, update and delete operations // ngeRoot.addEventListener('operation', (event: Event) => { // console.log('Operation received', (event as CustomEvent).detail); // }); - - // get netzgrafik model from NGE - // let netzgrafikDto = ngeRoot.netzgrafikDto; - - // // set new netzgrafik model with new nodes - // netzgrafikDto.nodes = testNodesDto; - // ngeRoot.netzgrafikDto = netzgrafikDto; - } + setNodes(ngeRoot, nodes); + }; frame.addEventListener('load', handleFrameLoad); @@ -54,7 +64,13 @@ function NGE() { }; }, []); + useEffect(() => { + if (ngeRoot) { + setNodes(ngeRoot, nodes); + } + }, [nodes]); + return