v0.31.0

🚀 New Features

• Simplify canvas widgets placement at one or multiple layers:
  • Canvas children are always assumed to be viewport widgets;
  • Add CanvasPlaceAt component to render its children at specified non-viewport canvas layer instead;
  • Support new placement layers: underlay layer to place components under all canvas content, overLinkGeometry layer to place components above link geometry (connections) but under link labels;
  • [💥Breaking] Remove defineCanvasWidget() and SharedCanvasState.setCanvasWidget() (use CanvasPlaceAt to display components at canvas layers instead).
• Support to import and export diagram layout with custom element and link cell types (derived from Element or Link):
  • Introduce an optional contract for Element or Link-derived cell types to be serializable: SerializableElementCell and SerializableLinkCell;
  • When implemented, the corresponding cell types can be exported and later imported with the diagram;
  • DataDiagramModel.importLayout() will accept known cell types via elementCellTypes and linkCellTypes to import.
• Support diagram-only annotations:
  • Add AnnotationElement and AnnotationLink elements and links which exports and imports with the diagram but does not exists in the data graph;
  • Rendered by default with new built-in templates NoteTemplate and NoteLinkTemplate which use NoteAnnotation, NoteEntity and NoteLink template components;
  • Add AnnotationSupport canvas widget which enables annotations in the UI (can be configured or disabled via annotations prop on DefaultWorkspace and ClassicWorkspace);
  • Support annotation elements in SelectionActionEstablishLink and new SelectionActionAnnotate components;
  • Support annotation links in LinkActionDelete, LinkActionMoveEndpoint components.
  • Add DefaultRenameLinkProvider and use it by default to allow to change annotation link labels.
• Support user-resizable element templates with ElementSize template state property:
  • Resizable elements display "box with handles" in the Halo to change the size;
  • Changed element sizes are captured and restored by RestoreGeometry command.
• Allow to customize link template separately for each link instead of only based on its link type IRI in linkTemplateResolver for Canvas.
• Allow to configure DropOnCanvas to allow only some drop events and provide items to place on the canvas.
• Support keyboard hotkeys for LinkAction components to act on a currently selected link.

🐛 Fixed

• Fix link rendering lagging behind when moving elements.
• Fix RdfDataProvider.links() returning empty results when called with linkTypeIds parameter.
• Fix HaloLink and visual authoring link path highlight being rendered on top on elements by placing it onto overLinkGeometry widget layer instead.
• Fix HaloLink link path highlighting not updating on link re-route.
• Fix element template state not being restored when ungrouping entities.
• Fix missing element decorations after re-importing the same diagram.
• Fix DraggableHandle to avoid using stale onDragHandle and onEndDragHandle prop values.
• Fix being able to execute disabled SelectionAction via keyboard hotkey.
• Fix throwing an error while trying to access CanvasApi.metrics members before the Canvas is fully mounted.

⏱ Performance

• [💥Breaking] Canvas widgets are not automatically updated when parent canvas is rendered to reduce unnecessary re-renders, and now require explicit subscriptions:
  • Subscribe to canvas changeTransform event when using CanvasApi.metrics to convert between coordinates;
  • Subscribe to canvas resize event to track viewport size;
  • Subscribe to changeCells event from DiagramModel to track graph content changes.
• Add TemplateProps.onlySelected flag to use in the element templates to track if the element is the only one selected without performance penalty.
• Avoid per-layer frame delay when processing canvas layer updates without calling RenderingState.syncUpdate():
  • Add useLayerDebouncedStore() hook as more flexible way to debounce and update with the canvas layer.
• Avoid eager link type creation for relation links, only create and fetch them on first render.

💅 Polish

• [💥Breaking] Use typed TemplateState for Element.elementState and Link.linkState to avoid accidental type mismatch.
• Make dialogs fill the available viewport when the viewport width is small:
  • This is controlled by new CSS property --reactodia-dialog-viewport-breakpoint-s with default value 600px which makes dialog fill the viewport if the available width is less or equal to that value.
• Allow to override base z-index level for workspace components with a set z-index value via --reactodia-z-index-base CSS property;
• Make Halo margin configurable via CSS property --reactodia-selection-single-box-margin.
• Highlight link path in HaloLink with --reactodia-selection-link-color color by default.
• Add changeTransform event to CanvasApi.events which triggers on CanvasApi.metrics.getTransform() changes, i.e. when coordinate mapping changes due to scale or canvas size is re-adjusted.
• Add DiagramModel.cellsVersion property which updates on every element or link addition/removal/reordering to be able to subscribe to changeCells event with useSyncStore() hook.
• Deprecate canvasWidgets prop on DefaultWorkspace and ClassicWorkspace in favor of passing widgets directly as children.
• Mark placeholder entity data with PlaceholderDataProperty property key to distinguish not-loaded-yet elements with EntityElement.isPlaceholderData():
  • Add DataDiagramModel.requestData() as a convenient method to load all placeholder entities at once.
• Move expanded element state from distinct property on Element to be stored in Element.elementState with TemplateProperties.Expanded property:
  • All existing properties, methods and commands works as before but use element template state as storage for expanded state;
  • changeExpanded event is removed from element events, use changeElementState event instead;
  • When exporting the diagram the expanded state is serialized only with elementState while using isExpanded property when importing the diagram for backward compatibility.
• Introduce ElementTemplate.supports property for templates to tell its capabilities such as ability to expand/collapse or resized by user.
• Use consistent naming for standard element and link templates:
  • Deprecate DefaultLinkTemplate and DefaultLink and alias them to StandardLinkTemplate and StandardRelation;
  • Change CSS class for standard element template from reactodia-standard-template to reactodia-standard-element;
  • Change CSS class for default link template from reactodia-default-link to reactodia-standard-link;
  • Change translation groups from standard_template / default_link_template to standard_element / standard_link.
• Move "expand/collapse on double click" global element behavior to StandardEntity and ClassicEntity implementation only.
• Change MetadataProvider.{createEntity, createRelation} to return result object with initial template state in addition to the data to customize the created cells (i.e. new elements can be expanded or collapsed).
• Add EditorController.applyAuthoringChanges() method to apply current authoring changes to the diagram (i.e. change entity data, delete relations, etc) and reset the change state to be empty.
• Deprecate and hide by default "Edit" and "Delete" action buttons in StandardEntity expanded state (can be re-enabled by setting showActions prop to true).
• Deprecate WorkpaceContext.{group, ungroupAll, ungroupSome} methods in favor of free functions groupEntities(), ungroupAllEntities(), ungroupSomeEntities().

🔧 Maintenance

• Use Vite to build the library instead of Webpack to reduce build time by 70% and produced bundle size by 38%.
• Update Vitest to v4.
• Use small subset of carbon design icons for various buttons.

Link to the CHANGELOG v0.31.0