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 5743feea4..e4f76c4ab 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 @@ -260,7 +260,7 @@ export class ElsaWorkflowDesigner { this.activityDisplayContexts = displayContexts; // Rebuild D3 model if component completed its initial load. - if(!!this.svgD3Selected) + if (!!this.svgD3Selected) this.rerenderTree(); } @@ -763,7 +763,24 @@ export class ElsaWorkflowDesigner { } } - this.rerenderTree(); + // Delay the rerender of the tree to permit the double click action to be captured + setTimeout(() => { + this.rerenderTree(); + }, 90); + } + }).on('dblclick', async e => { + e.stopPropagation(); + if (this.mode == WorkflowDesignerMode.Edit) { + await this.showActivityEditor(activity, true); + if (!this.selectedActivities[activityId]) { + for (const key in this.selectedActivities) { + this.activityDeselected.emit(this.selectedActivities[key]); + } + this.selectedActivities = {}; + this.selectedActivities[activityId] = activity; + this.activitySelected.emit(activity); + this.rerenderTree(); + } } }); diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-activity-editor-modal/elsa-activity-editor-modal.tsx b/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-activity-editor-modal/elsa-activity-editor-modal.tsx index 57a055baf..8fcb0ec0f 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-activity-editor-modal/elsa-activity-editor-modal.tsx +++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-activity-editor-modal/elsa-activity-editor-modal.tsx @@ -121,7 +121,7 @@ export class ElsaActivityEditorModal { async onCancelClick() { await this.dialog.hide(true); } - + onSubmit = async (e: Event) => { e.preventDefault(); const form: any = e.target; @@ -137,7 +137,6 @@ export class ElsaActivityEditorModal { }; onShowActivityEditor = async (activity: ActivityModel, animate: boolean) => { - const t = this.t; this.activityModel = JSON.parse(JSON.stringify(activity)); this.activityDescriptor = state.activityDescriptors.find(x => x.type == activity.type); this.workflowStorageDescriptors = state.workflowStorageDescriptors; @@ -147,6 +146,12 @@ export class ElsaActivityEditorModal { await this.dialog.show(animate); }; + onKeyDown = async (event: KeyboardEvent) => { + if (event.ctrlKey && event.key === 'Enter') { + (this.dialog.querySelector('button[type="submit"]') as HTMLButtonElement).click(); + } + } + render() { const renderProps = this.renderProps; const activityDescriptor: ActivityDescriptor = renderProps.activityDescriptor; @@ -160,7 +165,7 @@ export class ElsaActivityEditorModal { this.dialog = el}>
-
this.onSubmit(e)} ref={el => this.form = el} key={this.timestamp.getTime().toString()}> + this.onSubmit(e)} ref={el => this.form = el} key={this.timestamp.getTime().toString()} onKeyDown={this.onKeyDown}>
diff --git a/src/designer/elsa-workflows-studio/src/components/shared/elsa-modal-dialog/elsa-modal-dialog.tsx b/src/designer/elsa-workflows-studio/src/components/shared/elsa-modal-dialog/elsa-modal-dialog.tsx index b7828e881..7aeab6a7c 100644 --- a/src/designer/elsa-workflows-studio/src/components/shared/elsa-modal-dialog/elsa-modal-dialog.tsx +++ b/src/designer/elsa-workflows-studio/src/components/shared/elsa-modal-dialog/elsa-modal-dialog.tsx @@ -1,5 +1,5 @@ -import {Component, Host, h, Prop, State, Listen, Method} from '@stencil/core'; -import {enter, leave, toggle} from 'el-transition' +import {Component, Host, h, State, Listen, Method} from '@stencil/core'; +import {enter, leave} from 'el-transition' import {eventBus} from "../../../services"; import {EventTypes} from "../../../models"; @@ -49,6 +49,13 @@ export class ElsaModalDialog { leave(this.modal).then(() => this.isVisible = false); } + @Listen('keydown', {target: 'window'}) + async handleKeyDown(e: KeyboardEvent) { + if (this.isVisible && e.key === 'Escape') { + await this.hide(true); + } + } + renderModal() { return (