diff --git a/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx b/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx index c78dc6bee..16b622366 100644 --- a/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx +++ b/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx @@ -117,7 +117,7 @@ export class ElsaWorkflowDesigner { map[activity.activityId] = activity; this.selectedActivities = map; - this.rerenderTree(); + this.safeRender(); } @Watch('activityContextMenu') @@ -244,18 +244,26 @@ export class ElsaWorkflowDesigner { componentDidLoad() { this.svgD3Selected = d3.select(this.svg); this.innerD3Selected = d3.select(this.inner); + this.safeRender(); + } + + safeRender() { + // Rebuild D3 model if component completed its initial load. + if (!this.svgD3Selected) + return; + const rect = this.el.getBoundingClientRect(); if (rect.height === 0 || rect.width === 0) { const observer = new ResizeObserver(entries => { for (let entry of entries) { - this.rerenderTree(); + this.renderTree(); observer.unobserve(this.el); } }); observer.observe(this.el); } else { - this.rerenderTree(); + this.renderTree(); } } @@ -270,10 +278,7 @@ export class ElsaWorkflowDesigner { displayContexts[model.activityId] = await this.getActivityDisplayContext(model); this.activityDisplayContexts = displayContexts; - - // Rebuild D3 model if component completed its initial load. - if (!!this.svgD3Selected) - this.rerenderTree(); + this.safeRender(); } async getActivityDisplayContext(activityModel: ActivityModel): Promise { @@ -772,7 +777,7 @@ export class ElsaWorkflowDesigner { // Delay the rerender of the tree to permit the double click action to be captured setTimeout(() => { - this.rerenderTree(); + this.safeRender(); }, 90); } }).on('dblclick', async e => { @@ -786,7 +791,7 @@ export class ElsaWorkflowDesigner { this.selectedActivities = {}; this.selectedActivities[activityId] = activity; this.activitySelected.emit(activity); - this.rerenderTree(); + this.safeRender(); } } }); @@ -808,7 +813,7 @@ export class ElsaWorkflowDesigner { }); } - rerenderTree() { + renderTree() { this.applyZoom(); this.setEntities(); this.renderNodes(); diff --git a/src/designer/elsa-workflows-studio/src/components/shared/elsa-flyout-panel/elsa-flyout-panel.tsx b/src/designer/elsa-workflows-studio/src/components/shared/elsa-flyout-panel/elsa-flyout-panel.tsx index 6576e297c..21adfbcc8 100644 --- a/src/designer/elsa-workflows-studio/src/components/shared/elsa-flyout-panel/elsa-flyout-panel.tsx +++ b/src/designer/elsa-workflows-studio/src/components/shared/elsa-flyout-panel/elsa-flyout-panel.tsx @@ -32,8 +32,6 @@ export class ElsaFlyoutPanel { const {expanded, expandButtonPosition} = this; const expandPositionClass = `elsa-right-${16 * (expandButtonPosition - 1) + 12}`; - console.log('eee', this.expanded); - return (