Converted the following remaining "stashed" examples to Storybook:
- GraphLayout
- HtmlLabel
- MenuStyle
- ShowRegion
- Scrollbars (is starting to display, but appears to have a bug where `<g>` elements are inserted outside of the `<svg>` element)
- 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.
Additional changes in @maxgraph/core:
- Fixes the default parameters in `MaxPopupMenu` and `Morphing` to restore the original `mxGraph` behavior.
- Graph: add new "create*" factory methods to ease the extension:
- createEdgeHandlerInstance(state: CellState): EdgeHandler
- createGraphDataModel(): GraphDataModel
- createSelectionModel()
---------
Co-authored-by: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com>
The changes are based on recent feedback from newcomers.
Also
- improve the link to the mxGraph documentation.
- README bundled in the npm package: add a link to GitHub repository
README to guide people to the getting started information.
This class was previously only available in test. It simplifies maxGraph
model import/export as:
- it hides `Codec` and `HTMLElement` management
- it registers codecs automagically
Previously, codec classes were defined and registered in the same file
as the class they targeted. This prevented efficient tree-shaking: as
soon as the target class was imported (e.g. `StyleSheet`), the
corresponding codec was also imported (`StyleSheetCodec`). As a result,
a large amount of codec code (and dependent code) was present in
applications incorporating maxGraph, even if they didn't use the codec
function. As there are currently many problems with the codec function
that make it almost unusable, this was a great waste.
Codecs are no longer registered by default, which reduces side effects
and coupling.
It also greatly improves tree-shaking.
For example, in the `ts-example` application included in this repository
which doesn't use the "codec" feature, the size of the minified
`maxGraph` chunk goes from `568.58 kB` to `467.90 kB`, which corresponds
to a size reduction of `17.7%`!
BREAKING CHANGE: Codecs supplied by `maxGraph` are no longer registered
by default. They MUST be registered before performing an `encode` or
`decode`. You can use one of the following functions to register codecs:
- `registerAllCodecs`
- `registerCoreCodecs`
- `registerEditorCodecs`
In addition, apply minor refactoring
- Codec.decodeCell: improve signature (default value)
- ObjectCodec
- use Codec type instead of value in import
- simplify implementation of ObjectCodec.isNumericAttribute
By default, `jest` runs tests in parallel. However, with the current
configuration of `ts-jest`, all workers run `tsc` in parallel, which is
very slow and consumes a lot of resources. This is what takes the
longest.
By running `jest` serially, `tsc` runs before starting the first test,
then all subsequent tests run faster. This will probably be improved by
customizing the configuration of `jest` or with future versions of
`ts-jest`.
Add guards to prevent accessing properties and methods on undefined
instances when a plugin is not loaded.
Also fix and improve the JSDoc of the `EdgeHandler` and `Guide` classes.
`maxGraph` was using `lerna` v4 to build and only used its "build
workspaces" support, not the "publishing" support as we only published a
single package and it is done manually, without using `lerna`.
The support for packages in `lerna` was removed in version 7. See
https://github.com/lerna/lerna/releases/tag/7.0.0 and
https://lerna.js.org/docs/legacy-package-management.
So, start using npm workspaces as we don't need to manage the publishing
of several packages for now.
This will allow to do more reproducible builds by locking dependencies
with a `package-lock.json` file. This didn't work well with `lerna` v4
and had been disabled.
Provide various improvements
- fix `InternalEvent`
- improve `Client`
- improve explanations about plugins
- removed `mxUtils` methods
- removed `isVisible` methods
Also use more admonitions.
Get rid of the UMD bundle: not pratical, not minimified so not ready for
production, nor for reuse.
This lets remove the webpack build which was not used anymore.
- core build: everything is done with tsc and simplify pack
- remove webpack configuration
- Move typedoc in the package where it is used (make it easier to detect
usage)
- remove unused dependencies:
- better-docs (use typedoc instead)
- webpack loaders (css, file, style, url)
- babel
- circular-dependency-plugin (webpack plugin)
- webpack
- cross-env
- core build: tsc only
BREAKING CHANGE: the UMD bundle is no more provided in the npm package
Initiate the website with Docusaurus v3.
Setup the site and includes the content that was already available in
the `docs` package.
The currently implementation mainly uses the default theme available
when using the Docusaurus scaffolding. It was initiated with:
`npx create-docusaurus@3.0.0 my-website classic`
Replicate the improvements done in the `maxgraph-integration-examples`
repository:
- introduce function to simplify the main file
- Remove out dated comments
- Simplify the code and use "type" imports when possible
- Migrate the existing stories to work with storybook v7.
- Use the `vite` builder. The startup time decrease from 40 seconds
(best time with v6) to 1 second (worst time with v7)
- Webpack is no more used, `vite` now manages everything
- Add support for writing stories in TypeScript. It also detect existing
import errors in the existing stories written in JS
- Migrate the Toolbar story to TypeScript to demonstrate it works. As
part of the migration, fix how CellStyle is set in the story (easily
detected thanks to types checking)
- Detect wrong imports in stories and fix them
- The storybook mini-site can be built (previously the build always
failed and storybook could only be used in development mode)
- Add support for Node 18
Other changes
- core: simplify the "dev" script:
- There is no need to invoke webpack as the UMD bundle is no longer used
by stories.
- Instead, call `tsc` watch which is faster, so code changes are visible
faster in stories
- "Build" GitHub workflow:
- Build storybook mini-site and attach all examples as artifact to help
reviewing Pull Requests
- Lint at the end, this is more important to check the build and
examples first
The 'movable' style attribute of cells had the opposite effect as what
would be expected. When set to false, cells could be moved, and when true,
cells couldn't be moved.
This is something that got lost in translation in the conversion from mxGraph.
Previously, it assumed that if 'movable' had any value, it must be the string "0". This
attribute got changed to a boolean in Typescript, but it looks like the
check never got updated leading to this strange behaviour.
The fix is fairly simple.
If 'movable' is undefined, then we assume that it's true.
If not, then we check it like a regular boolean.
The default path of `errorImage` hard coded the context instead of using
`Client.imageBasePath` as everywhere else.
This seemed to be a migration mistake (the original code using the
configurable path was commented).
Uncomment the isAncestor method GraphHierachyNode, which is used by
HiearchlLayout. The uncommented implementation makes sure, that a
circular dependency is detected and resolved. Using the default
isAncestor does not work at this point, because the parent nodes of the
child nodes in the graph are not set.
The problem was unintentionally introduced during the initial refactoring of
the mxGraph code in 413796a.
The idea of the author was to remove an useless comment but they left an
extra /** behind which commented the isAncestor method.
Providing these resources simplify the `maxGraph` integration.
Use the default CSS in ts-example to illustrate how to override defaults
Initiate a documentation to start guiding users.
ts-example
- improve the position of the ellipse labels
- introduce a shared style for ellipse vertices
- bump vite from 4.3.9 to 4.4.2
- work when not deployed in the "root" context of the site
README
- improve the position of the ellipse label
- display rounded orthogonal edge
- fix the style configuration to match the rendering shown in the gif
The methods defined in the `EdgeMixin` type were not documented.
The signature of the `insertEdge` method was using a spread `any`
parameter, so it provided no guidance nor guard.
Instead, the type now declares the various form of the methods with the
right signature.
The methods defined in the `VertexMixin` type were not documented.
The signature of the `insertVertex` method was using a spread `any`
parameter, so it provided no guidance nor guard.
Instead, the type now declares the various form of the methods with the
right signature.
Also improve the main README
- improve the paragraph about how to build the npm package locally
- use the "application" wording instead "project" when required
- highlight mxGraph and maxGraph
These 2 classes were previously not exported as they generated runtime
errors when applications integrating `maxGraph` used the Vite dev
server.
Bump vite from 4.3.1 to 4.3.9. This is probably what fixed the problem.
No need to export Stylesheet and EditorToolbar as default as they are
already exported.
The method already exists in the `Graph` class. It needs to be made
available in `GraphDataModel` as well, to simplify the transaction
syntax.
Start using it in some places to simplify the syntax and also use
`Graph.batchUpdate`.
`ShadowRoot` element cannot be passed to the `window.getComputedStyle`
method.
Otherwise, errors occur, in particular, it prevents the mouse and
gesture events to be propagated.
The default edge and vertex styles are always defined. Updating the
signature of the two methods returning default styles simplifies the
code for callers, who don't have to deal with "undefined" values.
Improve the ts-example
- rely on no `undefined` style
- bump vite from 3.2.3 to 4.3.1 and increase the file size warning
- improve the use of types
- better explain why we cannot use enum to define the 'edgeStyle'
CellStyle property
BREAKING CHANGE: `Stylesheet.getDefaultVertexStyle` and
`Stylesheet.getDefaultEdgeStyle` no longer return `undefined`.
Thomas Bouffard
Dave Morrissey
TravisAdsitt
Mohammed Imran
dependabot[bot]
Eric Redekopp
Franz Ritter
Анатолий Майоров
Arash Rostami