Move "expanded" element state from distinct property on Element to be stored in Element.elementState

CHANGELOG.md

@@ -25,9 +25,15 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - 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.
+- 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.
+- Move "expand/collapse on double click" global element behavior to `StandardEntity` and `ClassicEntity` implementation only.
 
 #### 🐛 Fixed
 - Fix `HaloLink` and visual authoring link path highlight being rendered on top on elements by placing it onto `overLinkGeometry` widget layer instead.
+- Fix element template state not being restored when ungrouping entities.
 
 ## [0.30.1] - 2025-06-27
 #### 🐛 Fixed

src/data/schema.ts

@@ -27,6 +27,13 @@ export const PlaceholderRelationType: LinkTypeIri = 'urn:reactodia:newLink';
  * @category Constants
  */
 export enum TemplateProperties {
+    /**
+     * Element state property to display the element as expanded
+     * (if supported by its element template).
+     *
+     * @see {@link Element.isExpanded}
+     */
+    Expanded = 'urn:reactodia:expanded',
     /**
      * Element state property to mark some element data properties as "pinned",
      * i.e. displayed even if element is collapsed.

src/diagram/commands.ts

@@ -1,6 +1,7 @@
 import { TranslatedText } from '../coreUtils/i18n';
 
 import type { LinkTypeIri } from '../data/model';
+import { TemplateProperties } from '../data/schema';
 
 import type { CanvasApi } from './canvasApi';
 import type {
@@ -140,6 +141,9 @@ export function setElementState(element: Element, state: ElementTemplateState |
 
 /**
  * Command to toggle element expanded or collapsed.
+ * 
+ * Expanded state is stored in the {@link Element.elementState element state}
+ * with {@link TemplateProperties.Expanded} property.
  *
  * @category Commands
  */

src/diagram/customization.ts

@@ -91,6 +91,9 @@ export interface TemplateProps {
      * Specifies whether element is in the expanded state.
      *
      * Same as {@link Element.isExpanded}.
+     *
+     * Expanded state is stored in the {@link elementState element state}
+     * with {@link TemplateProperties.Expanded} property.
      */
     readonly isExpanded: boolean;
     /**

src/diagram/elementLayer.tsx

@@ -8,7 +8,6 @@ import { Debouncer } from '../coreUtils/scheduler';
 import { ElementTemplate, TemplateProps } from './customization';
 
 import { useCanvas } from './canvasApi';
-import { setElementExpanded } from './commands';
 import { Element, VoidElement } from './elements';
 import type { Size } from './geometry';
 import { DiagramModel } from './model';
@@ -133,7 +132,7 @@ export class ElementLayer extends React.Component<ElementLayerProps, State> {
             this.requestRedrawAll(RedrawFlags.None);
         });
         this.listener.listen(model.events, 'elementEvent', ({data}) => {
-            const invalidatesTemplate = data.changeExpanded || data.changeElementState;
+            const invalidatesTemplate = data.changeElementState;
             if (invalidatesTemplate) {
                 this.requestRedraw(invalidatesTemplate.source, RedrawFlags.RecomputeTemplate);
             }
@@ -312,9 +311,6 @@ class OverlaidElement extends React.Component<OverlaidElementProps> {
         // const angle = model.get('angle') || 0;
         // if (angle) { transform += `rotate(${angle}deg)`; }
 
-        const className = (
-            `reactodia-overlaid-element ${blurred ? 'reactodia-overlaid-element--blurred' : ''}`
-        );
         const style: React.CSSProperties = {position: 'absolute', transform};
         return (
             <>
@@ -336,8 +332,7 @@ class OverlaidElement extends React.Component<OverlaidElementProps> {
                     // eslint-disable-next-line react/no-unknown-property
                     onLoad={this.onLoadOrErrorEvent}
                     // eslint-disable-next-line react/no-unknown-property
-                    onError={this.onLoadOrErrorEvent}
-                    onDoubleClick={this.onDoubleClick}>
+                    onError={this.onLoadOrErrorEvent}>
                     <TemplatedElement {...this.props} />
                 </div>
                 <div className='reactodia-element-decorations'
@@ -358,15 +353,6 @@ class OverlaidElement extends React.Component<OverlaidElementProps> {
         }
     };
 
-    private onDoubleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const {model, state: {element}} = this.props;
-        model.history.execute(
-            setElementExpanded(element, !element.isExpanded)
-        );
-    };
-
     componentDidMount() {
         const {state, onResize, renderingState} = this.props;