From 4eaa0f6d13d9e06148f7e683fa2b7a559f3a7cb9 Mon Sep 17 00:00:00 2001 From: "Ivan Hrynevytskyi (FE-underwriting)" <83350900+im-ihrynevytskyi@users.noreply.github.com> Date: Mon, 13 Jun 2022 12:51:13 +0300 Subject: [PATCH 1/3] added toolbar layouts (#3113) Co-authored-by: Ivan Hrynevytskyi --- .../src/components.d.ts | 13 +++++++++++++ .../workflow-definition-editor/toolbar.tsx | 18 ++++++++++++++++++ .../workflow-definition-editor.scss | 5 +++++ .../workflow-definition-editor.tsx | 1 + 4 files changed, 37 insertions(+) create mode 100644 src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/toolbar.tsx diff --git a/src/designer/elsa-workflows-designer/src/components.d.ts b/src/designer/elsa-workflows-designer/src/components.d.ts index e215a59e1..85d6c83b6 100644 --- a/src/designer/elsa-workflows-designer/src/components.d.ts +++ b/src/designer/elsa-workflows-designer/src/components.d.ts @@ -202,6 +202,8 @@ export namespace Components { "updateWorkflowDefinition": (workflowDefinition: WorkflowDefinition) => Promise; "workflowDefinition"?: WorkflowDefinition; } + interface ElsaWorkflowDefinitionEditorToolbar { + } interface ElsaWorkflowDefinitionEditorToolbox { "graph": Graph; } @@ -461,6 +463,12 @@ declare global { prototype: HTMLElsaWorkflowDefinitionEditorElement; new (): HTMLElsaWorkflowDefinitionEditorElement; }; + interface HTMLElsaWorkflowDefinitionEditorToolbarElement extends Components.ElsaWorkflowDefinitionEditorToolbar, HTMLStencilElement { + } + var HTMLElsaWorkflowDefinitionEditorToolbarElement: { + prototype: HTMLElsaWorkflowDefinitionEditorToolbarElement; + new (): HTMLElsaWorkflowDefinitionEditorToolbarElement; + }; interface HTMLElsaWorkflowDefinitionEditorToolboxElement extends Components.ElsaWorkflowDefinitionEditorToolbox, HTMLStencilElement { } var HTMLElsaWorkflowDefinitionEditorToolboxElement: { @@ -562,6 +570,7 @@ declare global { "elsa-tooltip": HTMLElsaTooltipElement; "elsa-workflow-definition-browser": HTMLElsaWorkflowDefinitionBrowserElement; "elsa-workflow-definition-editor": HTMLElsaWorkflowDefinitionEditorElement; + "elsa-workflow-definition-editor-toolbar": HTMLElsaWorkflowDefinitionEditorToolbarElement; "elsa-workflow-definition-editor-toolbox": HTMLElsaWorkflowDefinitionEditorToolboxElement; "elsa-workflow-definition-editor-toolbox-activities": HTMLElsaWorkflowDefinitionEditorToolboxActivitiesElement; "elsa-workflow-definition-properties-editor": HTMLElsaWorkflowDefinitionPropertiesEditorElement; @@ -749,6 +758,8 @@ declare namespace LocalJSX { "onWorkflowUpdated"?: (event: CustomEvent) => void; "workflowDefinition"?: WorkflowDefinition; } + interface ElsaWorkflowDefinitionEditorToolbar { + } interface ElsaWorkflowDefinitionEditorToolbox { "graph"?: Graph; } @@ -828,6 +839,7 @@ declare namespace LocalJSX { "elsa-tooltip": ElsaTooltip; "elsa-workflow-definition-browser": ElsaWorkflowDefinitionBrowser; "elsa-workflow-definition-editor": ElsaWorkflowDefinitionEditor; + "elsa-workflow-definition-editor-toolbar": ElsaWorkflowDefinitionEditorToolbar; "elsa-workflow-definition-editor-toolbox": ElsaWorkflowDefinitionEditorToolbox; "elsa-workflow-definition-editor-toolbox-activities": ElsaWorkflowDefinitionEditorToolboxActivities; "elsa-workflow-definition-properties-editor": ElsaWorkflowDefinitionPropertiesEditor; @@ -879,6 +891,7 @@ declare module "@stencil/core" { "elsa-tooltip": LocalJSX.ElsaTooltip & JSXBase.HTMLAttributes; "elsa-workflow-definition-browser": LocalJSX.ElsaWorkflowDefinitionBrowser & JSXBase.HTMLAttributes; "elsa-workflow-definition-editor": LocalJSX.ElsaWorkflowDefinitionEditor & JSXBase.HTMLAttributes; + "elsa-workflow-definition-editor-toolbar": LocalJSX.ElsaWorkflowDefinitionEditorToolbar & JSXBase.HTMLAttributes; "elsa-workflow-definition-editor-toolbox": LocalJSX.ElsaWorkflowDefinitionEditorToolbox & JSXBase.HTMLAttributes; "elsa-workflow-definition-editor-toolbox-activities": LocalJSX.ElsaWorkflowDefinitionEditorToolboxActivities & JSXBase.HTMLAttributes; "elsa-workflow-definition-properties-editor": LocalJSX.ElsaWorkflowDefinitionPropertiesEditor & JSXBase.HTMLAttributes; diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/toolbar.tsx b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/toolbar.tsx new file mode 100644 index 000000000..be85ffbc6 --- /dev/null +++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/toolbar.tsx @@ -0,0 +1,18 @@ +import { Component, h } from '@stencil/core'; + +@Component({ + tag: 'elsa-workflow-definition-editor-toolbar', +}) +export class Toolbar { + render() { + return ( +
+ Currently in development

}> + + +
+ ); + } +} diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.scss b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.scss index ddd63540f..81b034ba0 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.scss +++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.scss @@ -9,6 +9,11 @@ elsa-canvas { bottom: 0; } +.elsa-panel-toolbar { + left: var(--activity-picker-width); + right: var(--activity-editor-width); +} + elsa-panel.panel-state-expanded.elsa-activity-picker-container { width: var(--activity-picker-width); } diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx index a0690afad..5f2cecc40 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx +++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx @@ -170,6 +170,7 @@ export class WorkflowDefinitionEditor { return (
this.container = el}> + Date: Tue, 14 Jun 2022 22:10:39 +0300 Subject: [PATCH 2/3] fixed incorrect positioning on zoom or graph move (#3129) Fixes #2972 Co-authored-by: Ivan Hrynevytskyi --- .../src/components/activities/flowchart/flowchart.tsx | 3 ++- .../workflow-definition-editor/workflow-definition-editor.tsx | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx b/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx index 17add1cba..a4bbe473f 100644 --- a/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx +++ b/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx @@ -74,7 +74,8 @@ export class FlowchartComponent implements ContainerActivityComponent { // TODO: Figure out how to convert client coordinates to appropriate graph coordinates taking into account transformations. // See https://x6.antv.vision/en/docs/api/graph/coordinate for documentation. //const point = graph.coord.localToClientPoint(x, y); - const point: PointLike = {x, y}; + const pageToLocal = graph.pageToLocal(x, y); + const point: PointLike = pageToLocal; const sx = point.x; const sy = point.y; diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx index 5f2cecc40..a7633149a 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx +++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx @@ -271,8 +271,8 @@ export class WorkflowDefinitionEditor { await this.canvas.addActivity({ descriptor: activityDescriptor, id: newName, - x: e.offsetX, - y: e.offsetY + x: e.pageX, + y: e.pageY }); }; From e78a86940a6ea7f7588ef08960299b1ce085a781 Mon Sep 17 00:00:00 2001 From: "Ivan Hrynevytskyi (FE-underwriting)" <83350900+im-ihrynevytskyi@users.noreply.github.com> Date: Tue, 14 Jun 2022 22:11:36 +0300 Subject: [PATCH 3/3] added zoom-to-fit functionality (#3130) * added toolbar layouts * added zoom-to-fit functionality Closes #2952 Co-authored-by: Ivan Hrynevytskyi --- .../elsa-workflows-designer/src/components.d.ts | 4 ++++ .../activities/container-activity-component.tsx | 1 + .../src/components/activities/flowchart/flowchart.tsx | 6 ++++++ .../src/components/designer/canvas/canvas.tsx | 5 +++++ .../designer/workflow-definition-editor/toolbar.tsx | 11 ++++++++++- .../workflow-definition-editor.tsx | 6 +++++- 6 files changed, 31 insertions(+), 2 deletions(-) diff --git a/src/designer/elsa-workflows-designer/src/components.d.ts b/src/designer/elsa-workflows-designer/src/components.d.ts index 85d6c83b6..9d0e6b833 100644 --- a/src/designer/elsa-workflows-designer/src/components.d.ts +++ b/src/designer/elsa-workflows-designer/src/components.d.ts @@ -47,6 +47,7 @@ export namespace Components { "importGraph": (root: Activity) => Promise; "interactiveMode": boolean; "updateLayout": () => Promise; + "zoomToFit": () => Promise; } interface ElsaCheckListInput { "inputContext": ActivityInputContext; @@ -83,6 +84,7 @@ export namespace Components { "interactiveMode": boolean; "root"?: Activity; "updateLayout": () => Promise; + "zoomToFit": () => Promise; } interface ElsaFormPanel { "actions": Array; @@ -203,6 +205,7 @@ export namespace Components { "workflowDefinition"?: WorkflowDefinition; } interface ElsaWorkflowDefinitionEditorToolbar { + "zoomToFit": () => Promise; } interface ElsaWorkflowDefinitionEditorToolbox { "graph": Graph; @@ -759,6 +762,7 @@ declare namespace LocalJSX { "workflowDefinition"?: WorkflowDefinition; } interface ElsaWorkflowDefinitionEditorToolbar { + "zoomToFit"?: () => Promise; } interface ElsaWorkflowDefinitionEditorToolbox { "graph"?: Graph; diff --git a/src/designer/elsa-workflows-designer/src/components/activities/container-activity-component.tsx b/src/designer/elsa-workflows-designer/src/components/activities/container-activity-component.tsx index 0a8f9810c..f247a5a15 100644 --- a/src/designer/elsa-workflows-designer/src/components/activities/container-activity-component.tsx +++ b/src/designer/elsa-workflows-designer/src/components/activities/container-activity-component.tsx @@ -6,4 +6,5 @@ export interface ContainerActivityComponent { addActivity(args: AddActivityArgs): Promise; exportRoot(): Promise importRoot(root: Activity): Promise; + zoomToFit(): Promise; } diff --git a/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx b/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx index a4bbe473f..9c81005a7 100644 --- a/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx +++ b/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx @@ -65,6 +65,12 @@ export class FlowchartComponent implements ContainerActivityComponent { this.graph.updateBackground(); } + @Method() + public async zoomToFit(){ + const graph = this.graph; + graph.zoomToFit(); + } + @Method() public async addActivity(args: AddActivityArgs): Promise { const graph = this.graph; diff --git a/src/designer/elsa-workflows-designer/src/components/designer/canvas/canvas.tsx b/src/designer/elsa-workflows-designer/src/components/designer/canvas/canvas.tsx index 33a4eaf05..db0c12968 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/canvas/canvas.tsx +++ b/src/designer/elsa-workflows-designer/src/components/designer/canvas/canvas.tsx @@ -39,6 +39,11 @@ export class Canvas { return await this.root.exportRoot(); } + @Method() + public async zoomToFit(): Promise { + return await this.root.zoomToFit(); + } + @Method() public async importGraph(root: Activity): Promise { return await this.root.importRoot(root); diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/toolbar.tsx b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/toolbar.tsx index be85ffbc6..ace7b4279 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/toolbar.tsx +++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/toolbar.tsx @@ -1,9 +1,12 @@ -import { Component, h } from '@stencil/core'; +import { Component, h, Prop } from '@stencil/core'; @Component({ tag: 'elsa-workflow-definition-editor-toolbar', }) export class Toolbar { + @Prop() + public zoomToFit: () => Promise; + render() { return (
@@ -12,6 +15,12 @@ export class Toolbar { Auto-Layout +
); } diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx index a7633149a..452a722a8 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx +++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx @@ -170,7 +170,7 @@ export class WorkflowDefinitionEditor { return (
this.container = el}> - + { + this.canvas.zoomToFit(); + } + private onActivityUpdated = (e: CustomEvent) => { const updatedActivity = e.detail.activity; this.applyActivityChanges(updatedActivity);