Skip to content

feat: add a story to demonstrate all Perimeter features - #317

Merged
tbouffard merged 10 commits into
developmentfrom
feat/add_story_perimeters-and-shapes
Feb 8, 2024
Merged

feat: add a story to demonstrate all Perimeter features#317
tbouffard merged 10 commits into
developmentfrom
feat/add_story_perimeters-and-shapes

Conversation

@tbouffard

@tbouffard tbouffard commented Feb 7, 2024

Copy link
Copy Markdown
Member

Demonstrate the effect of all available perimeters on various shapes and what happens when no perimeter is configured.

Migrate existing Perimeter story to TypeScript.
It also stops modifying the GraphView prototype, extending the class instead. This avoids side effects in other stories (as they run in a Single-Page application).
This story is still not fully working: the perimeter doesn't apply to the label until the shape is rendered another time (by moving it for example). This worked in the mxGraph example and should be later investigate.

The new story

PR_317_new_story_v2

The story controls let see the effect of a specific perimeter compared to the default one:

PR_317_new_story_default_and_specific_perimeter.mp4

The 1st rendering issue with the existing story

Perimeter_on_label_bounds_not_updated_on_load.mp4

Demonstrate the effect of all available perimeters on various shapes and what happens when no
perimeter is configured.

Migrate existing Perimeter history to TypeScript.
It also stops modifying the GraphView prototype, extending the class instead. This avoids side
effects in other stories (as they run in a Single-Page application).
This story is still not fully working: the perimeter doesn't apply to the label until the shape is
rendered another time (by moving it for example). This worked in the mxGraph example and should be
later investigate.
@tbouffard tbouffard added the enhancement New feature or request label Feb 7, 2024
Comment thread packages/html/stories/PerimeterVariousImplementations.stories.ts Outdated
Comment thread packages/html/stories/PerimeterVariousImplementations.stories.ts Outdated
Comment thread packages/html/stories/PerimeterVariousImplementations.stories.ts Outdated
tbouffard added a commit that referenced this pull request Feb 8, 2024
#318)

In the default vertex style configuration, declare the perimeter using
the key stored in the `StyleRegistry` instead of the actual perimeter
function.
This reduces code coupling and will also improve tree-shaking in the
future for people who don't want to rely on this perimeter
implementation.

The "perimeter" configuration was the only one to use an actual
implementation, which makes things more consistent.

### Notes

Tested with the existing stories and the new story introduced in #317
Comment thread packages/html/stories/PerimeterVariousImplementations.stories.ts Outdated
Comment thread packages/html/stories/PerimeterVariousImplementations.stories.ts Outdated
@tbouffard
tbouffard marked this pull request as ready for review February 8, 2024 14:29
@tbouffard
tbouffard merged commit 3263478 into development Feb 8, 2024
@tbouffard
tbouffard deleted the feat/add_story_perimeters-and-shapes branch February 8, 2024 14:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant