Skip to content

fix : make the KeyHandler work in the Validation story #1027

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
redfish4ktc merged 6 commits into from
May 5, 2026
Merged

fix : make the KeyHandler work in the Validation story #1027

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6717525
fix(stories) : make graph container focusable
LOUISNOYEZ Mar 24, 2026
a43021d
fix lint errors
redfish4ktc May 4, 2026
8bb6e9b
Merge branch 'main' into fix(stories)/propagate_stories_keyboard_even…
redfish4ktc May 4, 2026
2ff86d2
Remove out-of-date comments
redfish4ktc May 4, 2026
6361b3b
Improve the description of the story displayed on top
redfish4ktc May 4, 2026
f175d7d
Apply container setting right after it is created to ease reading
redfish4ktc May 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions packages/html/stories/Validation.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,15 @@ const Template = ({ label, ...args }: Record<string, string>) => {

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.
<br>You can also remove cells by selecting them and pressing the [DELETE] key.
`);

const container = createGraphContainer(args);
container.addEventListener('click', () => {
container.focus();
});
container.setAttribute('tabindex', '0');
div.appendChild(container);

const xmlDocument = xmlUtils.createXmlDocument();
Expand All @@ -76,7 +82,7 @@ const Template = ({ label, ...args }: Record<string, string>) => {
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,
Expand Down Expand Up @@ -122,7 +128,6 @@ const Template = ({ label, ...args }: Record<string, string>) => {
);

// 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()) {
Expand Down