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

Merge branch 'v3' into v3-workflow-journal-test2

Browse source
This commit is contained in:
Sipke Schoorstra 2022-06-14 22:14:32 +02:00
parent 3e6b22f4cb e78a86940a
commit 775e2abd07
7 changed files with 70 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/designer/elsa-workflows-designer/src/components.d.ts vendored
View file

@ -46,6 +46,7 @@ export namespace Components {
"importGraph": (root: Activity) => Promise<void>;
"interactiveMode": boolean;
"updateLayout": () => Promise<void>;
"zoomToFit": () => Promise<void>;
}
interface ElsaCheckListInput {
"inputContext": ActivityInputContext;
@ -81,6 +82,7 @@ export namespace Components {
"interactiveMode": boolean;
"root"?: Activity;
"updateLayout": () => Promise<void>;
"zoomToFit": () => Promise<void>;
}
interface ElsaFormPanel {
"actions": Array<ActionDefinition>;
@ -207,6 +209,9 @@ export namespace Components {
"updateWorkflowDefinition": (workflowDefinition: WorkflowDefinition) => Promise<void>;
"workflowDefinition"?: WorkflowDefinition;
}
interface ElsaWorkflowDefinitionEditorToolbar {
"zoomToFit": () => Promise<void>;
}
interface ElsaWorkflowDefinitionEditorToolbox {
"graph": Graph;
}
@ -477,6 +482,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: {
@ -580,6 +591,7 @@ declare global {
"elsa-variables-editor": HTMLElsaVariablesEditorElement;
"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;
@ -772,6 +784,9 @@ declare namespace LocalJSX {
"onWorkflowUpdated"?: (event: CustomEvent<WorkflowDefinitionUpdatedArgs>) => void;
"workflowDefinition"?: WorkflowDefinition;
}
interface ElsaWorkflowDefinitionEditorToolbar {
"zoomToFit"?: () => Promise<void>;
}
interface ElsaWorkflowDefinitionEditorToolbox {
"graph"?: Graph;
}
@ -852,6 +867,7 @@ declare namespace LocalJSX {
"elsa-variables-editor": ElsaVariablesEditor;
"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;
@ -905,6 +921,7 @@ declare module "@stencil/core" {
"elsa-variables-editor": LocalJSX.ElsaVariablesEditor & JSXBase.HTMLAttributes<HTMLElsaVariablesEditorElement>;
"elsa-workflow-definition-browser": LocalJSX.ElsaWorkflowDefinitionBrowser & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionBrowserElement>;
"elsa-workflow-definition-editor": LocalJSX.ElsaWorkflowDefinitionEditor & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorElement>;
"elsa-workflow-definition-editor-toolbar": LocalJSX.ElsaWorkflowDefinitionEditorToolbar & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorToolbarElement>;
"elsa-workflow-definition-editor-toolbox": LocalJSX.ElsaWorkflowDefinitionEditorToolbox & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorToolboxElement>;
"elsa-workflow-definition-editor-toolbox-activities": LocalJSX.ElsaWorkflowDefinitionEditorToolboxActivities & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorToolboxActivitiesElement>;
"elsa-workflow-definition-properties-editor": LocalJSX.ElsaWorkflowDefinitionPropertiesEditor & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionPropertiesEditorElement>;

1
src/designer/elsa-workflows-designer/src/components/activities/container-activity-component.tsx
View file

@ -6,4 +6,5 @@ export interface ContainerActivityComponent {
addActivity(args: AddActivityArgs): Promise<void>;
exportRoot(): Promise<Activity>
importRoot(root: Activity): Promise<void>;
zoomToFit(): Promise<void>;
}

9
src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.tsx
View file

@ -62,6 +62,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<void> {
const graph = this.graph;
@ -71,7 +77,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;

5
src/designer/elsa-workflows-designer/src/components/designer/canvas/canvas.tsx
View file

@ -39,6 +39,11 @@ export class Canvas {
return await this.root.exportRoot();
}
@Method()
public async zoomToFit(): Promise<void> {
return await this.root.zoomToFit();
}
@Method()
public async importGraph(root: Activity): Promise<void> {
return await this.root.importRoot(root);

27
src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/toolbar.tsx Normal file
View file

@ -0,0 +1,27 @@
import { Component, h, Prop } from '@stencil/core';
@Component({
tag: 'elsa-workflow-definition-editor-toolbar',
})
export class Toolbar {
@Prop()
public zoomToFit: () => Promise<void>;
render() {
return (
<div class="flex justify-center absolute border-b border-gray-200 top-0 px-1 pl-4 py-2 text-sm bg-white z-10 elsa-panel-toolbar">
<elsa-tooltip tooltipPosition="right" tooltipContent={<p class="text-gray-600 text-sm">Currently in development</p>}>
<button class="relative inline-flex items-center px-4 py-2 rounded border border-blue-600 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700 focus:z-10 focus:outline-none focus:ring-blue-600 hover:border-blue-700">
Auto-Layout
</button>
</elsa-tooltip>
<button
onClick={this.zoomToFit}
class="relative ml-4 inline-flex items-center px-4 py-2 rounded border border-blue-600 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700 focus:z-10 focus:outline-none focus:ring-blue-600 hover:border-blue-700"
>
Zoom to fit
</button>
</div>
);
}
}

5
src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.scss
View file

@ -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);
}

9
src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx
View file

@ -173,6 +173,7 @@ export class WorkflowDefinitionEditor {
return (
<WorkflowEditorTunnel.Provider state={tunnelState}>
<div class="absolute inset-0" ref={el => this.container = el}>
<elsa-workflow-definition-editor-toolbar zoomToFit={this.onZoomToFit} />
<elsa-panel
class="elsa-activity-picker-container"
position={PanelPosition.Left}
@ -274,11 +275,15 @@ export class WorkflowDefinitionEditor {
await this.canvas.addActivity({
descriptor: activityDescriptor,
id: newName,
x: e.offsetX,
y: e.offsetY
x: e.pageX,
y: e.pageY
});
};
private onZoomToFit = async () => {
this.canvas.zoomToFit();
}
private onActivityUpdated = (e: CustomEvent<ActivityUpdatedArgs>) => {
const updatedActivity = e.detail.activity;
this.applyActivityChanges(updatedActivity);