feat: restore remaining non-"Editor" examples to Storybook by mcyph · Pull Request #150 · maxGraph/maxGraph · GitHub

Summary

Converted the following remaining "stashed" examples to StoryBook:

Wires
GraphLayout
ShowRegion
MenuStyle
HtmlLabel
ShowRegion

Mostly have finished converting, but issues still remain:

Scrollbars (is starting to display, but appears to have a bug where <g> elements are inserted outside of the <svg> element)
Codec (does not appear to load elements; needs to be investigated)

This is in addition to the PR at #149 which converted the "Pinch Zoom" example. Editor examples still remain unconverted, although some progress has been made converting the "Ports" example to StoryBook.

Also has some fixes for the default parameters for MaxPopupMenu to restore the original mxGraph behavior.

Description for the changelog

Converted remaining "stashed" non-Editor and touch-related examples to StoryBook.

Other info

[UPDATE] The following has been reverted, see #150 (comment), #151 and 43ab435.
This adds an additional parameter to the main Graph class to allow overriding the class constructors in the "instantiators" parameter. I think there may be a better term for this, and there is a good question whether this should be merged into the "plugins", or references to these class constructors set in the class variables and overridden in subclasses.

As in types.ts, the following are able to be overridden:

export type GraphInstantiators = {
  GraphDataModel?: typeof GraphDataModel,
  GraphSelectionModel?: typeof GraphSelectionModel,
  Stylesheet?: typeof Stylesheet,
  GraphView?: typeof GraphView,
  CellRenderer?: typeof CellRenderer,
  VertexHandler?: typeof VertexHandler,
  EdgeHandler?: typeof EdgeHandler,
  EdgeSegmentHandler?: typeof EdgeSegmentHandler,
  ElbowEdgeHandler?: typeof ElbowEdgeHandler,
}

Still unresolved is how to allow "local" changes to style (color, size etc) variables in Constants.ts that are referred. I think it may make sense to allow providing these as an argument to Graph, or have some way of assigning these locally.

…sses instantiated by main Graph class such as the graph model and vertex/edge handlers

… method in MaxPopupMenu

@mcyph I don't understand the need to introduce GraphInstantiators, at least today.

There are already ways to override the Graph defaults:

GraphModel: pass it in the constructor
others: subclass Graph and override the createXXX methods

This is the historical mxGraph way. We can change it but this needs more discussions IMHO.
For instance (non exhaustive list)

with the current proposal, we now have two ways to override the default implementation: Subclass and composition. Why not keeping only one way for simplicity?
If we remove the createXX methods, this will introduce more API breaks comparing to mxGraph

There are pros and cons for all solutions.
So I suggest to not implement it in this Pull Request and create a dedicated discussion to collectively choose what we want.

Does it make sense?

@tbouffard Have started a new discussion at #151 and moved my comments there, let me know your thoughts

As I mention there, if wanting to keep with the conventions previously established by mxGraph I'm inclined to go with the create* factory functions and override them in subclasses, and will make this change in this branch in the interim.

Bear in mind the "draft" status of this merge request - I'm heading overseas for a few weeks+knew I likely won't have time to work on it while away, but have tried to fix as many examples as I could in last few weeks. I would've liked to have fixed the editor examples too, but I thought that would take longer.

If anyone would like to make changes to this or the other "Touches" branch in the meantime feel free.

Thanks @mcyph for the quick feedback and the status. Don't worry, maxGraph already owes you a lot, so we can all wait a bit for the finalization of this contribution. 👍🏿

I saw the Draft status, that's exactly why I wanted to let you know eventual issues with the newly introduced GraphInstantiators prior you move forward. 😄 I will feed the new discussion with my ideas.

…ators to the Graph constructor; fixes to the "Wires" story

About "Codec (does not appear to load elements; needs to be investigated)":
The XML in the "stashed Codec" example corresponds to the old mxGraph format, which is currently impossible to load with maxGraph until we implement #293. It is therefore not possible to load elements with the current XML content.
The XML content could be updated to use the maxGraph format and thus load the elements.

# Conflicts: # packages/core/src/view/Graph.ts

Use single line comments instead of JSDoc styled-comments that could mess IDE and documentation generation

I am in the process of reviving this PR.
I'm testing the updated stories locally and if they work, I'll merge this PR.

Fix imports Adjust the code when needed Apply prettier Fix file header GraphLayout HtmlLabel MenuStyle ShowRegion Scrollbars Wires

I have made the following stories work with Storybook v7. They are still written in JavaScript (I didn't have time to port them to TypeScript):

GraphLayout
HtmlLabel
MenuStyle
ShowRegion
Scrollbars
Wires

The examples are still not fully working. As the mxGraph examples were previously migrated to nextjs/react, some original code may not have been ported correctly.

It was used a long time ago when examples were written in an application developed with Next.js

mcyph added 5 commits December 3, 2022 21:23

converted "Wires" example to StoryBook; added ability to override cla…

f684ad0

…sses instantiated by main Graph class such as the graph model and vertex/edge handlers

converted "GraphLayout" example to StoryBook

a51578a

converted "ShowRegion" example to StoryBook; fixes to default addItem…

4d6337b

… method in MaxPopupMenu

converted "MenuStyle" example to StoryBook

6db4d05

converted "HtmlLabel" and "Scrollbars" examples to StoryBook

7569226

mcyph requested review from csouchet, junsikshim and tbouffard December 5, 2022 10:55

Made Graph use create* factory functions instead of the GraphInstanti…

43ab435

…ators to the Graph constructor; fixes to the "Wires" story

mcyph mentioned this pull request Jan 25, 2023

any chance of adding grapheditor? #172

Open

tbouffard added the bug Something isn't working label Dec 3, 2023

tbouffard added 4 commits December 20, 2023 06:44

Merge branch 'development' into fix-remaining-examples

e41711b

# Conflicts: # packages/core/src/view/Graph.ts

Graph.ts: improve grouping blocks

0b4741e

Use single line comments instead of JSDoc styled-comments that could mess IDE and documentation generation

Graph.ts: use null coalescing to simplify stylesheet initialization

8425098

Revert extra changes in types.ts that broke the build

fb05156

fix Stories after merge from development to make them work again

5ca163c

Fix imports Adjust the code when needed Apply prettier Fix file header GraphLayout HtmlLabel MenuStyle ShowRegion Scrollbars Wires

tbouffard added enhancement New feature or request and removed bug Something isn't working labels Dec 21, 2023

tbouffard changed the title Fix remaining non-"Editor" examples to StoryBook [draft] feat: restore remaining non-"Editor" examples to StoryBook Dec 21, 2023

tbouffard marked this pull request as ready for review December 21, 2023 06:57

tbouffard added 2 commits December 22, 2023 06:15

remove stashed/api/hello.js

9c1de61

It was used a long time ago when examples were written in an application developed with Next.js

Graph: declare the create-* methods in alphabetical order for clarity

be2df46

tbouffard changed the title feat: restore remaining non-"Editor" examples to StoryBook feat: restore remaining non-"Editor" examples to Storybook Dec 22, 2023

tbouffard merged commit 63f002c into development Dec 22, 2023

tbouffard deleted the fix-remaining-examples branch December 22, 2023 05:54

tbouffard mentioned this pull request Jan 11, 2024

Autoresize HTML Labels #247

Closed

tbouffard mentioned this pull request May 25, 2024

Redefinition of prototypes introduce side effects in Stories #418

Open

tbouffard mentioned this pull request Apr 11, 2025

Allow efficient opt-out of default plugins and style built-ins #760

Closed

14 tasks

feat: restore remaining non-"Editor" examples to Storybook by mcyph · Pull Request #150 · maxGraph/maxGraph · GitHub

Uh oh!

feat: restore remaining non-"Editor" examples to Storybook - #150

feat: restore remaining non-"Editor" examples to Storybook#150
tbouffard merged 13 commits into
developmentfrom
fix-remaining-examples

mcyph commented Dec 5, 2022 •
edited by tbouffard
Loading

Uh oh!

Uh oh!

tbouffard commented Dec 8, 2022

Uh oh!

mcyph commented Dec 8, 2022

Uh oh!

mcyph commented Dec 8, 2022 •
edited
Loading

Uh oh!

Uh oh!

tbouffard commented Dec 8, 2022 •
edited
Loading

Uh oh!

Uh oh!

tbouffard commented Dec 19, 2023

Uh oh!

tbouffard commented Dec 20, 2023

Uh oh!

tbouffard commented Dec 21, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat: restore remaining non-"Editor" examples to Storybook by mcyph · Pull Request #150 · maxGraph/maxGraph · GitHub

Uh oh!

feat: restore remaining non-"Editor" examples to Storybook - #150

feat: restore remaining non-"Editor" examples to Storybook#150tbouffard merged 13 commits intodevelopmentmaxGraph/maxGraph:developmentfrom fix-remaining-examplesmaxGraph/maxGraph:fix-remaining-examplesCopy head branch name to clipboard

Conversation

mcyph commented Dec 5, 2022 • edited by tbouffard Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tbouffard commented Dec 8, 2022

Uh oh!

mcyph commented Dec 8, 2022

Uh oh!

mcyph commented Dec 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tbouffard commented Dec 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tbouffard commented Dec 19, 2023

Uh oh!

tbouffard commented Dec 20, 2023

Uh oh!

tbouffard commented Dec 21, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat: restore remaining non-"Editor" examples to Storybook#150
tbouffard merged 13 commits into
developmentfrom
fix-remaining-examples

mcyph commented Dec 5, 2022 •
edited by tbouffard
Loading

mcyph commented Dec 8, 2022 •
edited
Loading

tbouffard commented Dec 8, 2022 •
edited
Loading