From 67175254b85300037cc2ec34017fcc2bbcee144f Mon Sep 17 00:00:00 2001 From: lnoyez Date: Tue, 24 Mar 2026 14:33:30 +0100 Subject: [PATCH 1/5] fix(stories) : make graph container focusable --- packages/html/stories/Validation.stories.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/html/stories/Validation.stories.ts b/packages/html/stories/Validation.stories.ts index 1809523e96..61beb8ed34 100644 --- a/packages/html/stories/Validation.stories.ts +++ b/packages/html/stories/Validation.stories.ts @@ -183,6 +183,12 @@ const Template = ({ label, ...args }: Record) => { graph.insertEdge({ source: v6, target: v4 }); }); + container.addEventListener('click', () => { + container.focus(); + }) + + container.setAttribute('tabindex', '0'); + return div; }; From a43021d348d48d2d49c7829b016d8eb1f0680a93 Mon Sep 17 00:00:00 2001 From: Toma <847775+redfish4ktc@users.noreply.github.com> Date: Mon, 4 May 2026 17:30:41 +0200 Subject: [PATCH 2/5] fix lint errors --- packages/html/stories/Validation.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/html/stories/Validation.stories.ts b/packages/html/stories/Validation.stories.ts index 61beb8ed34..ecfd17da02 100644 --- a/packages/html/stories/Validation.stories.ts +++ b/packages/html/stories/Validation.stories.ts @@ -185,7 +185,7 @@ const Template = ({ label, ...args }: Record) => { container.addEventListener('click', () => { container.focus(); - }) + }); container.setAttribute('tabindex', '0'); From 2ff86d2500545ece3c97837f836034354dac4f62 Mon Sep 17 00:00:00 2001 From: Toma <847775+redfish4ktc@users.noreply.github.com> Date: Mon, 4 May 2026 17:41:17 +0200 Subject: [PATCH 3/5] Remove out-of-date comments --- packages/html/stories/Validation.stories.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/html/stories/Validation.stories.ts b/packages/html/stories/Validation.stories.ts index ecfd17da02..2112568d81 100644 --- a/packages/html/stories/Validation.stories.ts +++ b/packages/html/stories/Validation.stories.ts @@ -122,7 +122,6 @@ const Template = ({ label, ...args }: Record) => { ); // Removes cells when [DELETE] is pressed - // TODO pressing the delete key has no effect in FF and Chrome (https://github.com/maxGraph/maxGraph/issues/910) const keyHandler = new KeyHandler(graph); keyHandler.bindKey(46, function () { if (graph.isEnabled()) { From 6361b3bf00c4f7ed49d193fd0ab14da563e85dfe Mon Sep 17 00:00:00 2001 From: Toma <847775+redfish4ktc@users.noreply.github.com> Date: Mon, 4 May 2026 17:49:48 +0200 Subject: [PATCH 4/5] Improve the description of the story displayed on top --- packages/html/stories/Validation.stories.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/html/stories/Validation.stories.ts b/packages/html/stories/Validation.stories.ts index 2112568d81..4b166cdc24 100644 --- a/packages/html/stories/Validation.stories.ts +++ b/packages/html/stories/Validation.stories.ts @@ -55,6 +55,8 @@ const Template = ({ label, ...args }: Record) => { const div = createMainDiv(` This example demonstrates using multiplicities for automatically validating a graph. + The graph is validated after each change and displays an error message if the graph is not valid. +
You can also remove cells by selecting them and pressing the [DELETE] key. `); const container = createGraphContainer(args); @@ -76,7 +78,7 @@ const Template = ({ label, ...args }: Record) => { graph.setAllowDanglingEdges(false); graph.setMultigraph(false); - // Source nodes needs 1..2 connected Targets + // Source node needs 1..2 connected Targets graph.multiplicities.push( new Multiplicity( true, From f175d7daad650ba842e7bb7d18c2d2a0f40f7ac4 Mon Sep 17 00:00:00 2001 From: Toma <847775+redfish4ktc@users.noreply.github.com> Date: Mon, 4 May 2026 17:55:21 +0200 Subject: [PATCH 5/5] Apply container setting right after it is created to ease reading --- packages/html/stories/Validation.stories.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/html/stories/Validation.stories.ts b/packages/html/stories/Validation.stories.ts index 4b166cdc24..364f35cc34 100644 --- a/packages/html/stories/Validation.stories.ts +++ b/packages/html/stories/Validation.stories.ts @@ -60,6 +60,10 @@ const Template = ({ label, ...args }: Record) => { `); const container = createGraphContainer(args); + container.addEventListener('click', () => { + container.focus(); + }); + container.setAttribute('tabindex', '0'); div.appendChild(container); const xmlDocument = xmlUtils.createXmlDocument(); @@ -184,12 +188,6 @@ const Template = ({ label, ...args }: Record) => { graph.insertEdge({ source: v6, target: v4 }); }); - container.addEventListener('click', () => { - container.focus(); - }); - - container.setAttribute('tabindex', '0'); - return div; };