SemianiakaVY/elsa-core
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

Added fix for tree render issue.

Browse source
This commit is contained in:
Simona Taran 2021-08-26 11:19:47 +03:00 committed by Sipke Schoorstra
parent 929eea5bc8
commit 5397b40d8a
1 changed files with 18 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx
View file

@ -1,4 +1,4 @@
import {Component, Event, EventEmitter, h, Host, Method, Prop, State, Watch, Listen} from '@stencil/core';
import {Component, Event, EventEmitter, h, Host, Method, Prop, State, Watch, Listen, Element} from '@stencil/core';
import {v4 as uuid} from 'uuid';
import {addConnection, findActivity, getChildActivities, getInboundConnections, getOutboundConnections, Map, removeActivity, removeConnection} from '../../../../utils/utils';
import {ActivityDescriptor, ActivityDesignDisplayContext, ActivityModel, ActivityTraits, ConnectionModel, EventTypes, WorkflowModel, WorkflowPersistenceBehavior,} from '../../../../models';
@ -32,6 +32,9 @@ export class ElsaWorkflowDesigner {
@Event() connectionContextMenuButtonClicked: EventEmitter<ActivityContextMenuState>;
@State() workflowModel: WorkflowModel;
@Element() elem: HTMLElement;
@State() activityContextMenuState: ActivityContextMenuState = {
shown: false,
x: 0,
@ -210,7 +213,19 @@ export class ElsaWorkflowDesigner {
componentDidLoad() {
this.svgD3Selected = d3.select(this.svg);
this.innerD3Selected = d3.select(this.inner);
this.tryRerenderTree(500);
const rect = this.el.getBoundingClientRect();
if (rect.height === 0 || rect.width === 0) {
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
this.rerenderTree();
observer.unobserve(this.el);
}
});
observer.observe(this.el);
} else {
this.rerenderTree();
}
}
componentWillRender() {
@ -785,7 +800,7 @@ export class ElsaWorkflowDesigner {
const displayName = displayContext.displayName || activity.displayName;
const typeName = activity.type;
return `<div id=${`activity-${activity.activityId}`}
return `<div id=${`activity-${activity.activityId}`}
class="activity elsa-border-2 elsa-border-solid elsa-rounded elsa-bg-white elsa-text-left elsa-text-black elsa-text-lg elsa-select-none elsa-max-w-md elsa-shadow-sm elsa-relative ${cssClass}">
<div class="elsa-p-5">
<div class="elsa-flex elsa-justify-between elsa-space-x-8">