v0.31.2

🐛 Fixed

• Fix AnnotationSupport not unsubscribing from AnnotationTopic at unmount which causes two annotations to be created from SelectionActionAnnotate in React development mode.
• Fix undo/redo history not working after panning or pinch-zoom gesture on touch devices.
• Fix keyboard hotkeys for selection actions not working after focusing on search input then clicking back on the selection box.

Link to the CHANGELOG v0.31.2

v0.31.1

🐛 Fixed

• Fix incorrect canvas viewport position when zoomToFit() or similar operation is called immediately after element position changes;
• Omit properties without values in StandardEntity, StandardRelation and ClassicEntity.

Link to the CHANGELOG v0.31.1

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

v0.30.1

🐛 Fixed

• Fix BaseMetadataProvider not delegating canModifyRelation method from object passed in its constructor.
• Make CanvasApi.{exportSvg, exportRaster} export images referenced in CSS stylesheets or inline styles from mask (mask-image) or background (background-image) CSS properties.
• Fix incomplete styles for exported canvas due to non-captured custom CSS property values in Chromium-based browsers.
• Fix issues when setting a mutable selection array, e.g. model.setSelection(model.elements).
• Fix moving elements with Selection does not adding an undo command to the history.

⏱ Performance

• Avoid unnecessary component updates in Halo and HaloLink when multiple elements are selected.

💅 Polish

• Expose contentPadding option for CanvasApi.{exportSvg, exportRaster} methods to configure padding for the exported diagram.

Link to the CHANGELOG v0.30.1

v0.30.0

🚀 New Features

• Support authoring relation properties:
  • Add MetadataProvider.getRelationShape() interface method to get editor metadata for relation properties, and allow to return canEdit: true from MetadataProvider.canModifyRelation() to display relation properties editor;
• Display "edit" and "delete" inline entity actions:
  • Add option inlineEntityActions (defaults to true) for VisualAuthoring to display entity actions inline at the top of each entity;
  • Improve the style for "cancel" (discard) action on entities and relations to make it consistent with other inline actions.
• Add ElementDecoration component to display additional decorations over canvas elements either from the template itself or from outside the element:
  • Element decorations are not included in the computed element bounds but are exported with the canvas unless explicitly marked with data-reactodia-no-export attribute (as with other canvas elements).
• Support keyboard hotkeys for the focused canvas:
  • Allow to specify arbitrary hotkeys to ToolbarAction and SelectionAction components, export useCanvasHotkey() hook to bind hotkey from any canvas widget;
  • Add default hotkeys for components: Selection (Ctrl+A: select all), ToolbarActionUndo (Ctrl+Z), ToolbarActionRedo (Ctrl+Shift+Z), SelectionActionRemove (Delete, same as before), SelectionActionGroup (G).
• [💥Breaking] Use separate HTML paper layer to display LinkLabel components instead of an SVG canvas, which allows to use CSS for layout, backgrounds and improves rendering performance:
  • textClass, textStyle, rectClass and rectStyle are replaced by className and style props;
  • CSS should use HTML styling properties instead of SVG variants, e.g. color and background-color instead of stroke and fill;
  • Label content should be placed directly as children to the component instead of using content prop.
• Select entity label and image using DataLocaleProvider based on its properties:
  • [💥Breaking] Remove ElementModel.{label, image} properties and instead use DataDiagramModel.locale methods to select them based on ElementModel.properties instead;
  • Allow to override data locale provider (default is DefaultDataLocaleProvider) by passing locale option to model.importLayout() or model.createNewDiagram();

🐛 Fixed

• Always display validation state for an entities and relations in case when the target does not have any authoring changes.
• Display elliptical authoring state overlays for elliptically-shaped entity elements.
• Use provided duration in CanvasApi.animateGraph() for element transitions without the need to override the styles.
• Trigger keydown, keyup, scroll and contextMenu canvas events only from a non-widget layer.
• Fix marking existing relation as new or changed after moving its source or target to its original source or target.

⏱ Performance

• Optimize diagram loading time by avoiding unnecessary updates and separating a measuring element sizes step from applying the sizes to the rendering state.

💅 Polish

• Export BaseMetadataProvider as a stable base to instantiate or extend when implementing custom metadata providers.
• Re-use and un-deprecate model.locale formatting object with DataLocaleProvider interface type:
  • Deprecate Translation.formatIri() in favor of locale.formatIri();
  • Replace other deprecated methods of locale with: selectEntityLabel(), selectEntityImageUrl(), formatEntityLabel(), formatEntityTypeList();
• Provide gradual customization options for the built-in entity and relation property editor:
  • Expose ability to customize property input in authoring forms with inputResolver option for VisualAuthoring component;
  • Export built-in inputs FormInputList and FormInputText, as well as FormInputSingleProps and FormInputMultiProps props interfaces to implement custom property inputs.
• [💥Breaking] Rename the following constants for consistency in naming style:
  • DIAGRAM_CONTEXT_URL_V1 -> DiagramContextV1,
  • PLACEHOLDER_ELEMENT_TYPE -> PlaceholderEntityType,
  • PLACEHOLDER_LINK_TYPE -> PlaceholderRelationType;
• Support the ability to expand up the Dropdown, DropdownMenu and Toolbar by setting direction to "up" e.g. for docking the toolbar to the bottom of the viewport.
• Allow to return iconMonochrome: true for a type style to automatically apply dark theme filter for the icon.
• Support optional dependency list in useEventStore() to re-subscribe to store if needed.

🔧 Maintenance

• Make library compatible with React v19, while continuing support for v17 and v18.
• Increase IndexedDbCachedProvider.DB_VERSION to 4 due to ElementModel changes.
• Remove deprecated LocaleFormatter, DataGraphLocaleFormatter and FormattedProperty types.
• Simplify the exported canvas SVG by using a single <foreignObject> to hold the whole element layer instead of a separate one for each canvas element.

Link to the CHANGELOG v0.30.0

v0.29.1

🐛 Fixed

• Fix "max update exceeded in componentDidUpdate()" error that can be triggered in InstancesSearch in some cases.

Link to the CHANGELOG v0.29.1

v0.29.0

🚀 New Features

• Support round (elliptical-shaped) elements:
  • Allow element templates to set shape: 'ellipse' to correctly compute link geometry;
  • Change ElementTemplate to be an object with additional element template options, allow to return both ElementTemplate and ElementTemplateComponent from elementTemplateResolver;
  • Add built-in basic circle-shaped RoundTemplate with its RoundEntity template component;
  • Add RenderingState.getElementShape() method to compute shape information (including bounds) for the element.
• Support smooth-curved links:
  • Allow link templates to set spline: 'smooth' to have rounded joints and overall shape via cubic Bézier curves;
  • Render links as smooth-curved by default unless a spline: 'straight' is set in the link template.
• Allow to dock a dialog to any side of a target with dock property with a configurable dockMargin.

🐛 Fixed

• Fix search section activation race in UnifiedSearch which causes to sometimes open the first section instead of the specified one in focus command.
• Auto-focus on search input field in UnifiedSearch on focus command.
• Use --reactodia-viewport-dock-margin instead of a hard-coded value to compute max size for a dialog without target.

💅 Polish

• Use "rounded" look by default by setting default --reactodia-border-radius-base to a non-zero value (it can be unset as before if desired to have a more "rectangular" UI styling).
• Make Canvas a focusable element to allow to handle keyboard events scoped to the graph:
  • Removing selected elements on Delete key press now happens only when SelectionActionRemove if displayed by the Halo or Selection canvas widgets and only if the canvas has the focus to avoid accidental element removal by the action from unrelated document parts.
  • Expose keydown and keyup events on CanvasApi.events to handle keyboard events scoped to the canvas.
  • Canvas is now auto-focused (without scroll) on certain actions such as removing selected elements, grouping or ungrouping entities or dismissing a dialog.
• Export built-in templates and its components separately for easier customization:
  • Change StandardTemplate to a template object, expose its components as StandardEntity and StandardEntityGroup;
  • Change ClassicTemplate to a template object, expose its component as ClassicEntity;
  • Rename DefaultLinkPathTemplate to DefaultLink.
• Improve default routing for self (feedback) links with a single user-defined variable to have a basic loop instead of a straight line.
• Reduce the size of the main package bundle by moving fallback synchronous (blocking) layout into the separate entry point /layout-sync:
  • [💥Breaking] Make defaultLayout a required prop for a Workspace: if a bundled synchronous fallback (blockingDefaultLayout()) was used by default, now it is necessary to import it manually from /layout-sync;
  • The recommended layout algorithm usage is as before via Web Workers with defineLayoutWorker() and useWorker().
• [💥Breaking] Replace explicit "commands" passing by common WorkspaceContext.getCommandBus():
  • Remove all commands-like props from components, e.g. commands, connectionMenuCommands, instancesSearchCommands, searchCommands.
  • Triggering a command or listening for one from outside the component should be done by acquiring a commands object using getCommandBus() with the following built-in command bus topics: ConnectionsMenuTopic, InstancesSearchTopic, UnifiedSearchTopic, VisualAuthoringTopic.
  • [🧪Experimental] Custom command bus topics can be defined with CommandBusTopic.define().
• Support linkType option for SelectionActionEstablishLink to create a relation of a specific type from that action by default.

🔧 Maintenance

• Move deprecated type styles and link templates into separate entry point @reactodia/workspace/legacy-styles, including SemanticTypeStyles, makeOntologyLinkTemplates(Reactodia) (factory) and makeLinkStyleShowIri(Reactodia) factory.
• Remove deprecated WorkspaceProps.onIriClick() and corresponding events and trigger method on SharedCanvasState.
• Extract HashMap, HashSet and hash-code generation utilities into separate package @reactodia/hashmap.
• Extract Web Worker-related utilities into separate package @reactodia/worker-proxy:
  • @reactodia/worker-proxy/protocol should be used instead of @reactodia/workspace/worker-protocol to define custom workers.
  • useWorker() hook now accepts any worker adhering to the RefCountedWorker interface from @reactodia/worker-proxy, e.g. created with refCountedWorker() function.
• Replace classnames runtime dependency by clsx.
• Update runtime dependencies: n3, @vscode/codicons.
• Update dev-dependencies: Webpack + loaders, SASS, TypeScript, Vitest, ESLint.

Link to the CHANGELOG v0.29.0

v0.28.1

🐛 Fixed

• Fix missing elements on load when rendering in React strict mode (regression in v0.28.0).

⏱ Performance

• Improve performance of canvas scrolling and panning with mouse on large diagrams.

Link to the CHANGELOG v0.28.1

v0.28.0

🚀 New Features

• Support i18n for the UI components:
  • Allow to provide custom bundles with translation strings and (optionally) disable the default one with translations and useDefaultTranslation properties for the Workspace;
  • Provide i18n/i18n.schema.json JSON schema to validate partial translation bundles.
• Basic design system and a built-in dark theme:
  • Define a basic design system with CSS custom properties for colors, fonts, borders, spacing and transitions;
  • Support base border-radius on inputs, buttons, panels, etc if provided via --reactodia-border-radius-base;
  • Change StandardTemplate to use a common CSS property for entity color: --reactodia-element-style-color (previously was --reactodia-standard-entity-color);
  • Force specific color scheme (theme) via colorSchema property on WorkspaceRoot and DefaultWorkspace with default auto mode;
  • Expose useColorScheme() hook to observe current color scheme for the workspace.
  • Exporting the diagram (to SVG/PNG or printing it) always exports if the workspace is using the light theme.
• Ability to add, remove or modify property values in the "Edit entity" dialog:
  • [🧪Experimental] Change MetadataApi.getElementTypeShape() into getElementShape() with a more specific contract, add getLiteralLanguages().

🐛 Fixed

• Disallow selection of already present but grouped entities in ConnectionsMenu and place them again onto the canvas.
• Fix incorrect handling of a relation in the "Edit relation" dialog when reversing the its direction (e.g. a change from "Person isAuthorOf Book" to "Book isNamedAfter Person"), including validation against duplicate relations and the displayed direction.
• Fix error when trying to render a ToolbarActionOpen or ToolbarActionSave in the toolbar instead of a dropdown menu.
• Fix links having unresolved labels and no markers when importing the same diagram layout twice.

💅 Polish

• Relax assignment compatibility for branded IRI types (ElementIri, ElementTypeIri, LinkTypeIri, PropertyTypeIri) to allow assignment from a raw string type but not between them.

🔧 Maintenance

• Deprecate DiagramModel.locale usage: use Translation object to perform locale-specific formatting instead.
• Remove unused raceAbortSignal() function.

Link to the CHANGELOG v0.28.0