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`
- 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`.
The code managing the "model encode/decode" is not yet fully
operational.
This set of changes adds tests to replicate current behavior and provide
the infrastructure for problem resolution. In particular, the tests show
that some errors occur on import because some Codecs are not registered.
There is no error if an export has already been performed.
**Other info**
The tests are done using both the model alone or a model linked to a
Graph instance.
Using only the model shows that some properties of objects in the model
are not set correctly: they are not decoded and are stored as `Element`
instances.
The test involving the Graph instance shows the behavior seen in "real"
application which are the consequences of the issue during the import.
Remove the `StyleMap` class. It is not used anymore since the
introduction of the `CellStateStyle` interface.
Changes in `CellStateStyle`
- remove `defaultEdge` and `defaultVertex` that have been introduced by
mistake. They have never been used.
- rename `autosize` into `autoSize` for naming consistency. All
properties use camelCase.
- change types from "number" to "boolean" + fix default management in
the Shape classes
- `backgroundOutline`
- `absoluteArcSize`
Other `CellStateStyle` changes: remove a property in favor of another
property
The following properties were introduced by mistake while removing
mxConstants.STYLE_* references in
707605cedd (2021-05-02). Their counterpart
was used in `mxGraph` and is used in all
`maxGraph` examples
- `backgroundColor` in favor of `labelBackgroundColor`. The
`STYLE_LABEL_BACKGROUNDCOLOR` constant was replaced by
'backgroundColor' instead of 'labelBackgroundColor'
- `loop` in favor of `loopStyle`. The `STYLE_LOOP` constant was replaced
by 'loop' instead of 'loopStyle'
Other types that changed
- `CellStateStyle`: better type guidance for the `indicatorShape`
property
- `CanvasState`: order properties alphabetically + add JSDoc on some
properties
- Rename `ArrowType` into `ArrowValue` for consistency with other types
(they all end with the 'Value' post-fix)
Documentation update
- CHANGELOG.md: mention the breaking changes
- Initiate a specific document to help migration from mxGraph: start by
adding the changes on style
--------------------------------------------------------------------------------
**BREAKING CHANGES**: some `CellStateStyle` properties and types have
been removed/renamed.
Helper functions involving "style in the string form" have been removed
from `styleUtils`. Styles are defined using the `CellStateStyle` and it
is no longer necessary to process strings.
Removed functions
- addStylename
- getStylename
- getStylenames
- indexOfStylename
- removeStylename
- removeAllStylenames
- setStyle
**BREAKING CHANGES**: some `styleUtils` functions have been removed.
Keep the former mxGraph documentation to allow a later documentation
migration.
Remove both the former mxGraph and the new maxGraph API docs as they can
be generated.
Remove the former mxGraph examples home page as it has been replaced by
Storybook.
Update the configuration to generate the maxGraph API docs
- remove jsdoc resources as it is not used anymore
- configure the core package to generate the API docs in the docs
package
- add a GitHub workflow to ensure we can generate the API docs without
errors
The horizontal value was considered as true only if was set to true.
It is now also considered as true when set to undefined, as everywhere
else in maxGraph.
SwimLanes.stories.js: update configuration to display nodes.
This update is just a starting point. There is still much to do to match the previous mxGraph example.
Previously, when setting startFill/endFill, the display was inverted
comparing to the configuration.
The marker was filled when set to false, not filled when set to true.
When not set, the marker was filled, which is the expected default.
The issue came from a wrong condition to manage the default value and
was reproduced with the Markers Story.
In addition to the code fix, update the Markers.stories.js to fix style
configurations
- use number instead of string for markers size
- use boolean instead of number for start/end fill
The type of the `endArrow`, `startArrow` and `shape` properties in
`CellStateStyle` were too strict. They prevented to
use custom registered shapes in the style configuration without using a
cast.
Markers of the arrow and custom shapes can be registered by using
methods in `MarkerShape` and `CellRenderer` respectively.
The key to identify the shapes is a string so the types of the
properties in `CellStateStyle` now allow `string` as well.
These offer both the type guidance for standard maxGraph registered
shapes (via a dedicated type) and the extensibility
for custom shapes.
These properties were not documented after the style configuration was
changed (move from the string-based to the object-based configuration).
In mxGraph, the properties were documented in `mxConstants`.
The documentation is created based on `mxGraph`, `typed-mxgraph` and the
current `maxGraph` implementation.
Some properties remains undocumented because they are not used, some
have a wrong type (mainly number instead of boolean). This will be managed
in a next commit.
Co-authored-by: Souchet Céline <4921914+csouchet@users.noreply.github.com>
`StyleSheet.getCellStyle` didn't keep the properties of the default
style when `baseStyleNames` was set in the `cellStyle` parameter.
The JSDoc was incorrect (it came from mxGraph) about how the style is
computed, in particular about the default style. It probably leads to
the erroneous implementation during migration. It is now fixed and
clearly describe the rules followed to merge style properties.
The 'Stylesheet' story has been updated to correctly use the maxGraph
API. It also includes more examples involving `baseStyleNames` to
show the 'properties merge' in action.
The `align` and `verticalAlign` values passed to the constructor weren't
set, so the overlay position was always set to
the default one.
The `align` and `verticalAlign` properties are now using the AlignValue
and VAlignValue types respectively instead of
defining inline types. This improves the consistent in the whole code.
To demonstrate the fix, the Overlays story now set 'align' and
'verticalAlign' randomly.
Also introduce `jest` to test the fix and the whole
implementation of the changed method. Types check support is provided by
`ts-jest`. As maxGraph uses a lot of browser objects, also setup
`jest-jsdom-environment`.
The `CHANGE` event is now fired to `GraphSelectionModel` instead of `Graph`.
This is the behavior of mxGraph that was mistakenly modified during the migration of the code.
Thomas Bouffard
Eric Redekopp
Franz Ritter
Анатолий Майоров
Arash Rostami
CD Yang