diff --git a/src/designer/elsa-workflows-studio/src/components.d.ts b/src/designer/elsa-workflows-studio/src/components.d.ts index d037d2ce9..ab73ede4a 100644 --- a/src/designer/elsa-workflows-studio/src/components.d.ts +++ b/src/designer/elsa-workflows-studio/src/components.d.ts @@ -5,7 +5,7 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; -import { ActivityDefinitionProperty, ActivityDescriptor, ActivityDesignDisplayContext, ActivityModel, ActivityPropertyDescriptor, VersionOptions, WorkflowBlueprint, WorkflowDefinition, WorkflowExecutionLogRecord, WorkflowModel } from "./models"; +import { ActivityDefinitionProperty, ActivityDescriptor, ActivityPropertyDescriptor, VersionOptions, WorkflowBlueprint, WorkflowDefinition, WorkflowExecutionLogRecord, WorkflowModel } from "./models"; import { LocationSegments, MatchResults, RouterHistory } from "@stencil/router"; import { MenuItem } from "./components/controls/elsa-context-menu/models"; import { DropdownButtonItem, DropdownButtonOrigin } from "./components/controls/elsa-dropdown-button/models"; @@ -36,11 +36,6 @@ export namespace Components { interface ElsaDesignerTree { "model": WorkflowModel; } - interface ElsaDesignerTreeActivity { - "displayContext": ActivityDesignDisplayContext; - "icon": string; - "isSelected": boolean; - } interface ElsaDropdownButton { "icon"?: any; "items": Array; @@ -251,12 +246,6 @@ declare global { prototype: HTMLElsaDesignerTreeElement; new (): HTMLElsaDesignerTreeElement; }; - interface HTMLElsaDesignerTreeActivityElement extends Components.ElsaDesignerTreeActivity, HTMLStencilElement { - } - var HTMLElsaDesignerTreeActivityElement: { - prototype: HTMLElsaDesignerTreeActivityElement; - new (): HTMLElsaDesignerTreeActivityElement; - }; interface HTMLElsaDropdownButtonElement extends Components.ElsaDropdownButton, HTMLStencilElement { } var HTMLElsaDropdownButtonElement: { @@ -445,7 +434,6 @@ declare global { "elsa-confirm-dialog": HTMLElsaConfirmDialogElement; "elsa-context-menu": HTMLElsaContextMenuElement; "elsa-designer-tree": HTMLElsaDesignerTreeElement; - "elsa-designer-tree-activity": HTMLElsaDesignerTreeActivityElement; "elsa-dropdown-button": HTMLElsaDropdownButtonElement; "elsa-dropdown-property": HTMLElsaDropdownPropertyElement; "elsa-expression-editor": HTMLElsaExpressionEditorElement; @@ -501,15 +489,6 @@ declare namespace LocalJSX { "model"?: WorkflowModel; "onWorkflow-changed"?: (event: CustomEvent) => void; } - interface ElsaDesignerTreeActivity { - "displayContext"?: ActivityDesignDisplayContext; - "icon"?: string; - "isSelected"?: boolean; - "onDeselected"?: (event: CustomEvent) => void; - "onEdit-activity"?: (event: CustomEvent) => void; - "onRemove-activity"?: (event: CustomEvent) => void; - "onSelected"?: (event: CustomEvent) => void; - } interface ElsaDropdownButton { "icon"?: any; "items"?: Array; @@ -682,7 +661,6 @@ declare namespace LocalJSX { "elsa-confirm-dialog": ElsaConfirmDialog; "elsa-context-menu": ElsaContextMenu; "elsa-designer-tree": ElsaDesignerTree; - "elsa-designer-tree-activity": ElsaDesignerTreeActivity; "elsa-dropdown-button": ElsaDropdownButton; "elsa-dropdown-property": ElsaDropdownProperty; "elsa-expression-editor": ElsaExpressionEditor; @@ -726,7 +704,6 @@ declare module "@stencil/core" { "elsa-confirm-dialog": LocalJSX.ElsaConfirmDialog & JSXBase.HTMLAttributes; "elsa-context-menu": LocalJSX.ElsaContextMenu & JSXBase.HTMLAttributes; "elsa-designer-tree": LocalJSX.ElsaDesignerTree & JSXBase.HTMLAttributes; - "elsa-designer-tree-activity": LocalJSX.ElsaDesignerTreeActivity & JSXBase.HTMLAttributes; "elsa-dropdown-button": LocalJSX.ElsaDropdownButton & JSXBase.HTMLAttributes; "elsa-dropdown-property": LocalJSX.ElsaDropdownProperty & JSXBase.HTMLAttributes; "elsa-expression-editor": LocalJSX.ElsaExpressionEditor & JSXBase.HTMLAttributes; diff --git a/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree-activity/elsa-designer-tree-activity.css b/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree-activity/elsa-designer-tree-activity.css deleted file mode 100644 index 5d4e87f30..000000000 --- a/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree-activity/elsa-designer-tree-activity.css +++ /dev/null @@ -1,3 +0,0 @@ -:host { - display: block; -} diff --git a/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree-activity/elsa-designer-tree-activity.tsx b/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree-activity/elsa-designer-tree-activity.tsx deleted file mode 100644 index fc7299abe..000000000 --- a/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree-activity/elsa-designer-tree-activity.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core'; -import {leave, toggle} from 'el-transition' -import {registerClickOutside} from "stencil-click-outside"; -import {ActivityModel, ActivityDesignDisplayContext, EventTypes} from "../../../../models"; - -@Component({ - tag: 'elsa-designer-tree-activity', - styleUrl: 'elsa-designer-tree-activity.css', - shadow: false, -}) -export class ElsaDesignerTreeActivity { - - defaultIconClass = "h-10 w-10 text-blue-500"; - - @Prop() displayContext: ActivityDesignDisplayContext - @Prop() icon: string - @Prop({attribute:"selected"}) isSelected: boolean; - @Event({eventName: 'remove-activity', bubbles: true}) removeActivityEmitter: EventEmitter; - @Event({eventName: 'edit-activity', bubbles: true}) editActivityEmitter: EventEmitter; - @Event() selected: EventEmitter; - @Event() deselected: EventEmitter; - @State() showMenu: boolean - contextMenu: HTMLElement; - el: HTMLElement; - - closeContextMenu() { - leave(this.contextMenu); - } - - toggleMenu() { - toggle(this.contextMenu); - } - - onEditActivityClick(e: Event) { - e.preventDefault(); - this.closeContextMenu(); - this.editActivityEmitter.emit(this.displayContext.activityModel); - } - - onDeleteActivityClick(e: Event) { - e.preventDefault(); - this.closeContextMenu(); - this.removeActivityEmitter.emit(this.displayContext.activityModel); - } - - onSelectActivity(e: Event) { - this.isSelected = !this.isSelected; - - if(this.selected) - this.selected.emit(this.displayContext.activityModel); - else - this.deselected.emit(this.displayContext.activityModel); - } - - render() { - const displayContext = this.displayContext; - const activity = displayContext.activityModel; - const activityId = activity.activityId; - const displayName = activity.displayName && activity.displayName.length > 0 ? activity.displayName : activity.name && activity.name.length > 0 ? activity.name : activity.type - const activityClass = this.isSelected ? 'border-blue-600' : 'border-white hover:border-blue-600'; - - return ( - this.onEditActivityClick(e)} - onClick={e => this.onSelectActivity(e)} - class={`${activityClass} activity border-2 border-solid rounded bg-white text-left text-black text-lg select-none max-w-md shadow-sm relative`}> -
-
-
- {displayContext.activityIcon} -
-
-

{displayName}

-
-
registerClickOutside(this, el, this.closeContextMenu)}> - - -
-
- {this.renderBody()} - - ); - } - - renderBody() { - if (!this.displayContext.bodyDisplay) - return undefined; - - return ( -
- {this.displayContext.bodyDisplay} -
- ) - } -} diff --git a/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree-activity/readme.md b/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree-activity/readme.md deleted file mode 100644 index d2ad0aa31..000000000 --- a/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree-activity/readme.md +++ /dev/null @@ -1,42 +0,0 @@ -# elsa-designer-tree-activity - - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------------- | ---------- | ----------- | ------------------------------ | ----------- | -| `displayContext` | -- | | `ActivityDesignDisplayContext` | `undefined` | -| `icon` | `icon` | | `string` | `undefined` | -| `isSelected` | `selected` | | `boolean` | `undefined` | - - -## Events - -| Event | Description | Type | -| ----------------- | ----------- | ---------------------------- | -| `deselected` | | `CustomEvent` | -| `edit-activity` | | `CustomEvent` | -| `remove-activity` | | `CustomEvent` | -| `selected` | | `CustomEvent` | - - -## Dependencies - -### Used by - - - [elsa-designer-tree](../elsa-designer-tree) - -### Graph -```mermaid -graph TD; - elsa-designer-tree --> elsa-designer-tree-activity - style elsa-designer-tree-activity fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.css b/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.css index dad24aa89..49bbc0f95 100644 --- a/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.css +++ b/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.css @@ -9,84 +9,6 @@ background-color: #fbfbfb; } -div.canvas { - position: relative; - margin: 0 auto; -} - -div.tree { - white-space: nowrap; - padding-bottom: 30px; -} - -.tree ul { - @apply pt-6; - position: relative; - transition: all 0.5s; - -webkit-transition: all 0.5s; - -moz-transition: all 0.5s; -} - -.tree ul.root { - @apply pt-0; -} - -.tree li { - display: inline-block; - vertical-align: top; - text-align: center; - list-style-type: none; - position: relative; - padding: 20px 5px 0 5px; -} - -.tree li::before, -.tree li::after { - content: ''; - position: absolute; - top: 0; - right: 50%; - width: 50%; - height: 20px; -} - -.tree li::after { - right: auto; - left: 50%; -} - -.tree li:only-child::after, -.tree li:only-child::before { - display: none; -} - -.tree li:only-child { - padding-top: 0; -} - -.tree li:first-child::before, -.tree li:last-child::after { - border: 0 none; -} - -.tree ul ul::before { - content: ''; - position: absolute; - top: 0; - left: 50%; - width: 0; - height: 20px; -} -/* -.activity { - min-width: 316px; - box-sizing: border-box; - overflow-wrap: break-word; - white-space: normal; - display: inline-block; -} - */ - .node.activity, .node.start{ fill: transparent; }