@memberjunction/ng-flow-editor 6.1.0-edge.1 → 6.1.0-edge.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +180 -4
- package/dist/lib/agent-editor/agent-flow-transformer.service.d.ts +31 -0
- package/dist/lib/agent-editor/agent-flow-transformer.service.d.ts.map +1 -1
- package/dist/lib/agent-editor/agent-flow-transformer.service.js +85 -22
- package/dist/lib/agent-editor/agent-flow-transformer.service.js.map +1 -1
- package/dist/lib/agent-editor/flow-agent-editor.component.d.ts +46 -1
- package/dist/lib/agent-editor/flow-agent-editor.component.d.ts.map +1 -1
- package/dist/lib/agent-editor/flow-agent-editor.component.js +160 -97
- package/dist/lib/agent-editor/flow-agent-editor.component.js.map +1 -1
- package/dist/lib/components/flow-editor.component.d.ts +53 -5
- package/dist/lib/components/flow-editor.component.d.ts.map +1 -1
- package/dist/lib/components/flow-editor.component.js +354 -177
- package/dist/lib/components/flow-editor.component.js.map +1 -1
- package/dist/lib/components/flow-node.component.d.ts +5 -0
- package/dist/lib/components/flow-node.component.d.ts.map +1 -1
- package/dist/lib/components/flow-node.component.js +79 -44
- package/dist/lib/components/flow-node.component.js.map +1 -1
- package/dist/lib/components/flow-palette.component.d.ts +22 -3
- package/dist/lib/components/flow-palette.component.d.ts.map +1 -1
- package/dist/lib/components/flow-palette.component.js +48 -23
- package/dist/lib/components/flow-palette.component.js.map +1 -1
- package/dist/lib/components/flow-toolbar.component.d.ts +3 -1
- package/dist/lib/components/flow-toolbar.component.d.ts.map +1 -1
- package/dist/lib/components/flow-toolbar.component.js +32 -4
- package/dist/lib/components/flow-toolbar.component.js.map +1 -1
- package/dist/lib/flow-editor.module.d.ts +7 -6
- package/dist/lib/flow-editor.module.d.ts.map +1 -1
- package/dist/lib/flow-editor.module.js +6 -2
- package/dist/lib/flow-editor.module.js.map +1 -1
- package/dist/lib/interfaces/flow-types.d.ts +52 -3
- package/dist/lib/interfaces/flow-types.d.ts.map +1 -1
- package/dist/lib/interfaces/flow-types.js +33 -1
- package/dist/lib/interfaces/flow-types.js.map +1 -1
- package/package.json +10 -9
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
|
|
1
|
+
import { Component, EventEmitter, Input, Output, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import * as i1 from "@angular/common";
|
|
4
4
|
import * as i2 from "@foblex/flow";
|
|
@@ -8,53 +8,76 @@ function FlowPaletteComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
|
8
8
|
i0.ɵɵelementEnd();
|
|
9
9
|
} }
|
|
10
10
|
function FlowPaletteComponent_Conditional_4_For_2_For_4_Template(rf, ctx) { if (rf & 1) {
|
|
11
|
-
i0.ɵɵ
|
|
12
|
-
i0.ɵɵ
|
|
11
|
+
const _r1 = i0.ɵɵgetCurrentView();
|
|
12
|
+
i0.ɵɵelementStart(0, "button", 7);
|
|
13
|
+
i0.ɵɵlistener("click", function FlowPaletteComponent_Conditional_4_For_2_For_4_Template_button_click_0_listener() { const nodeType_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnNodeTypeActivated(nodeType_r2)); });
|
|
14
|
+
i0.ɵɵelementStart(1, "span", 8);
|
|
15
|
+
i0.ɵɵelement(2, "i", 9);
|
|
13
16
|
i0.ɵɵelementEnd();
|
|
14
|
-
i0.ɵɵelementStart(3, "span",
|
|
17
|
+
i0.ɵɵelementStart(3, "span", 10);
|
|
15
18
|
i0.ɵɵtext(4);
|
|
16
19
|
i0.ɵɵelementEnd()();
|
|
17
20
|
} if (rf & 2) {
|
|
18
|
-
const
|
|
19
|
-
const
|
|
20
|
-
i0.ɵɵproperty("fData",
|
|
21
|
+
const nodeType_r2 = ctx.$implicit;
|
|
22
|
+
const ctx_r2 = i0.ɵɵnextContext(3);
|
|
23
|
+
i0.ɵɵproperty("fData", nodeType_r2.Type)("title", "Click to add a " + nodeType_r2.Label + ", or drag it onto the canvas");
|
|
21
24
|
i0.ɵɵadvance();
|
|
22
|
-
i0.ɵɵstyleProp("background-color",
|
|
25
|
+
i0.ɵɵstyleProp("background-color", ctx_r2.GetBgColor(nodeType_r2.Color, 0.08))("color", nodeType_r2.Color);
|
|
23
26
|
i0.ɵɵadvance();
|
|
24
|
-
i0.ɵɵproperty("ngClass",
|
|
27
|
+
i0.ɵɵproperty("ngClass", nodeType_r2.Icon);
|
|
25
28
|
i0.ɵɵadvance(2);
|
|
26
|
-
i0.ɵɵtextInterpolate(
|
|
29
|
+
i0.ɵɵtextInterpolate(nodeType_r2.Label);
|
|
27
30
|
} }
|
|
28
31
|
function FlowPaletteComponent_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
29
32
|
i0.ɵɵelementStart(0, "div", 4)(1, "div", 5);
|
|
30
33
|
i0.ɵɵtext(2);
|
|
31
34
|
i0.ɵɵelementEnd();
|
|
32
|
-
i0.ɵɵrepeaterCreate(3, FlowPaletteComponent_Conditional_4_For_2_For_4_Template, 5, 8, "
|
|
35
|
+
i0.ɵɵrepeaterCreate(3, FlowPaletteComponent_Conditional_4_For_2_For_4_Template, 5, 8, "button", 6, i0.ɵɵrepeaterTrackByIdentity);
|
|
33
36
|
i0.ɵɵelementEnd();
|
|
34
37
|
} if (rf & 2) {
|
|
35
|
-
const
|
|
36
|
-
const
|
|
38
|
+
const category_r4 = ctx.$implicit;
|
|
39
|
+
const ctx_r2 = i0.ɵɵnextContext(2);
|
|
37
40
|
i0.ɵɵadvance(2);
|
|
38
|
-
i0.ɵɵtextInterpolate(
|
|
41
|
+
i0.ɵɵtextInterpolate(category_r4);
|
|
39
42
|
i0.ɵɵadvance();
|
|
40
|
-
i0.ɵɵrepeater(
|
|
43
|
+
i0.ɵɵrepeater(ctx_r2.GetTypesForCategory(category_r4));
|
|
41
44
|
} }
|
|
42
45
|
function FlowPaletteComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
43
46
|
i0.ɵɵelementStart(0, "div", 3);
|
|
44
47
|
i0.ɵɵrepeaterCreate(1, FlowPaletteComponent_Conditional_4_For_2_Template, 5, 1, "div", 4, i0.ɵɵrepeaterTrackByIdentity);
|
|
45
48
|
i0.ɵɵelementEnd();
|
|
46
49
|
} if (rf & 2) {
|
|
47
|
-
const
|
|
50
|
+
const ctx_r2 = i0.ɵɵnextContext();
|
|
48
51
|
i0.ɵɵadvance();
|
|
49
|
-
i0.ɵɵrepeater(
|
|
52
|
+
i0.ɵɵrepeater(ctx_r2.categories);
|
|
50
53
|
} }
|
|
51
54
|
/**
|
|
52
|
-
*
|
|
53
|
-
*
|
|
55
|
+
* Palette sidebar for creating new nodes — **click it or drag it**.
|
|
56
|
+
*
|
|
57
|
+
* Foblex's `fExternalItem` directive supplies drag-to-canvas placement, which is the precise
|
|
58
|
+
* gesture when the author cares where the box lands. It is not, however, the only gesture people
|
|
59
|
+
* try: a palette that looks like a list of buttons gets clicked, and for a long time a click here
|
|
60
|
+
* produced *nothing at all* — the item was a bare `<div>` with no click binding, so the interaction
|
|
61
|
+
* never even reached the editor. The entry is now a real `<button>`, which restores the click, the
|
|
62
|
+
* keyboard (Enter/Space), and the focus ring for free, and emits {@link NodeTypeActivated}.
|
|
63
|
+
*
|
|
64
|
+
* Both gestures converge on the same `NodeAdded` event in `FlowEditorComponent` — one code path, so
|
|
65
|
+
* a host that handles the drop automatically handles the click.
|
|
54
66
|
*/
|
|
55
67
|
export class FlowPaletteComponent {
|
|
56
68
|
NodeTypes = [];
|
|
57
69
|
Collapsed = false;
|
|
70
|
+
/**
|
|
71
|
+
* A palette entry was clicked (or activated from the keyboard).
|
|
72
|
+
*
|
|
73
|
+
* Carries the whole config rather than the type string so the host does not have to look it back
|
|
74
|
+
* up — the palette already resolved it, and re-resolving is where a silent mismatch would live.
|
|
75
|
+
*/
|
|
76
|
+
NodeTypeActivated = new EventEmitter();
|
|
77
|
+
/** Handler for the click/keyboard activation on a palette entry. */
|
|
78
|
+
OnNodeTypeActivated(nodeType) {
|
|
79
|
+
this.NodeTypeActivated.emit(nodeType);
|
|
80
|
+
}
|
|
58
81
|
get categories() {
|
|
59
82
|
const cats = new Set();
|
|
60
83
|
for (const nt of this.NodeTypes) {
|
|
@@ -83,7 +106,7 @@ export class FlowPaletteComponent {
|
|
|
83
106
|
return hexColor;
|
|
84
107
|
}
|
|
85
108
|
static ɵfac = function FlowPaletteComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FlowPaletteComponent)(); };
|
|
86
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FlowPaletteComponent, selectors: [["mj-flow-palette"]], inputs: { NodeTypes: "NodeTypes", Collapsed: "Collapsed" }, standalone: false, decls: 5, vars: 4, consts: [[1, "mj-flow-palette"], [1, "mj-flow-palette-header"], [1, "fa-solid", "fa-puzzle-piece"], [1, "mj-flow-palette-content"], [1, "mj-flow-palette-category"], [1, "mj-flow-palette-category-label"], ["fExternalItem", "", 1, "mj-flow-palette-item", 3, "fData", "title"], [1, "mj-flow-palette-item-icon"], [1, "fa-solid", 3, "ngClass"], [1, "mj-flow-palette-item-label"]], template: function FlowPaletteComponent_Template(rf, ctx) { if (rf & 1) {
|
|
109
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FlowPaletteComponent, selectors: [["mj-flow-palette"]], inputs: { NodeTypes: "NodeTypes", Collapsed: "Collapsed" }, outputs: { NodeTypeActivated: "NodeTypeActivated" }, standalone: false, decls: 5, vars: 4, consts: [[1, "mj-flow-palette"], [1, "mj-flow-palette-header"], [1, "fa-solid", "fa-puzzle-piece"], [1, "mj-flow-palette-content"], [1, "mj-flow-palette-category"], [1, "mj-flow-palette-category-label"], ["type", "button", "fExternalItem", "", 1, "mj-flow-palette-item", 3, "fData", "title"], ["type", "button", "fExternalItem", "", 1, "mj-flow-palette-item", 3, "click", "fData", "title"], [1, "mj-flow-palette-item-icon"], [1, "fa-solid", 3, "ngClass"], [1, "mj-flow-palette-item-label"]], template: function FlowPaletteComponent_Template(rf, ctx) { if (rf & 1) {
|
|
87
110
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
|
|
88
111
|
i0.ɵɵelement(2, "i", 2);
|
|
89
112
|
i0.ɵɵconditionalCreate(3, FlowPaletteComponent_Conditional_3_Template, 2, 0, "span");
|
|
@@ -96,15 +119,17 @@ export class FlowPaletteComponent {
|
|
|
96
119
|
i0.ɵɵconditional(!ctx.Collapsed ? 3 : -1);
|
|
97
120
|
i0.ɵɵadvance();
|
|
98
121
|
i0.ɵɵconditional(!ctx.Collapsed ? 4 : -1);
|
|
99
|
-
} }, dependencies: [i1.NgClass, i2.FExternalItemDirective], styles: ["/* ============================================================\n Flow Palette \u2014 Draggable node type sidebar\n ============================================================ */\n\n.mj-flow-palette {\n width: 180px;\n background: var(--mj-bg-surface);\n border-right: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n flex-shrink: 0;\n transition: width 0.2s ease;\n}\n\n.mj-flow-palette--collapsed {\n width: 44px;\n}\n\n.mj-flow-palette--collapsed .mj-flow-palette-header {\n justify-content: center;\n padding: 10px 0;\n}\n\n.mj-flow-palette-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 14px;\n font-size: var(--mj-text-xs);\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.mj-flow-palette-header i {\n font-size: var(--mj-text-sm);\n}\n\n.mj-flow-palette-content {\n padding: 8px;\n flex: 1;\n}\n\n.mj-flow-palette-category {\n margin-bottom: 12px;\n}\n\n.mj-flow-palette-category-label {\n font-size: 10px;\n font-weight: 600;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n padding: 4px 6px;\n margin-bottom: 4px;\n}\n\n.mj-flow-palette-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 10px;\n border-radius: var(--mj-radius-md);\n cursor:
|
|
122
|
+
} }, dependencies: [i1.NgClass, i2.FExternalItemDirective], styles: ["/* ============================================================\n Flow Palette \u2014 Draggable node type sidebar\n ============================================================ */\n\n.mj-flow-palette {\n width: 180px;\n background: var(--mj-bg-surface);\n border-right: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n flex-shrink: 0;\n transition: width 0.2s ease;\n}\n\n.mj-flow-palette--collapsed {\n width: 44px;\n}\n\n.mj-flow-palette--collapsed .mj-flow-palette-header {\n justify-content: center;\n padding: 10px 0;\n}\n\n.mj-flow-palette-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 14px;\n font-size: var(--mj-text-xs);\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.mj-flow-palette-header i {\n font-size: var(--mj-text-sm);\n}\n\n.mj-flow-palette-content {\n padding: 8px;\n flex: 1;\n}\n\n.mj-flow-palette-category {\n margin-bottom: 12px;\n}\n\n.mj-flow-palette-category-label {\n font-size: 10px;\n font-weight: 600;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n padding: 4px 6px;\n margin-bottom: 4px;\n}\n\n/* A <button> so a click actually does something. The native chrome is reset here rather than by\n reaching for .mj-btn \u2014 this is palette furniture, not an MJ button (see packages/Angular/CLAUDE.md). */\n.mj-flow-palette-item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 8px 10px;\n margin: 0;\n border: 0;\n border-radius: var(--mj-radius-md);\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: left;\n appearance: none;\n cursor: pointer;\n transition: background-color 0.15s ease, box-shadow 0.15s ease;\n user-select: none;\n}\n\n.mj-flow-palette-item:hover {\n background: var(--mj-bg-page);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-flow-palette-item:focus-visible {\n outline: 2px solid var(--mj-border-focus);\n outline-offset: 2px;\n}\n\n.mj-flow-palette-item:active {\n cursor: grabbing;\n background: var(--mj-bg-surface-sunken);\n}\n\n.mj-flow-palette-item-icon {\n width: 32px;\n height: 32px;\n border-radius: var(--mj-radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--mj-text-sm);\n flex-shrink: 0;\n}\n\n.mj-flow-palette-item-label {\n font-size: var(--mj-text-sm);\n font-weight: 500;\n color: var(--mj-text-secondary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n"], encapsulation: 2, changeDetection: 0 });
|
|
100
123
|
}
|
|
101
124
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FlowPaletteComponent, [{
|
|
102
125
|
type: Component,
|
|
103
|
-
args: [{ standalone: false, selector: 'mj-flow-palette', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mj-flow-palette\" [class.mj-flow-palette--collapsed]=\"Collapsed\">\n <div class=\"mj-flow-palette-header\">\n <i class=\"fa-solid fa-puzzle-piece\"></i>\n @if (!Collapsed) {\n <span>Steps</span>\n }\n </div>\n\n @if (!Collapsed) {\n <div class=\"mj-flow-palette-content\">\n @for (category of categories; track category) {\n <div class=\"mj-flow-palette-category\">\n <div class=\"mj-flow-palette-category-label\">{{ category }}</div>\n @for (nodeType of GetTypesForCategory(category); track nodeType) {\n <div\n class=\"mj-flow-palette-item\"\n fExternalItem\n [fData]=\"nodeType.Type\"\n [title]=\"nodeType.Label\">\n <
|
|
126
|
+
args: [{ standalone: false, selector: 'mj-flow-palette', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mj-flow-palette\" [class.mj-flow-palette--collapsed]=\"Collapsed\">\n <div class=\"mj-flow-palette-header\">\n <i class=\"fa-solid fa-puzzle-piece\"></i>\n @if (!Collapsed) {\n <span>Steps</span>\n }\n </div>\n\n @if (!Collapsed) {\n <div class=\"mj-flow-palette-content\">\n @for (category of categories; track category) {\n <div class=\"mj-flow-palette-category\">\n <div class=\"mj-flow-palette-category-label\">{{ category }}</div>\n @for (nodeType of GetTypesForCategory(category); track nodeType) {\n <!-- A real <button>, not a <div>: clicking a palette entry is the gesture most people\n try first, and it used to do literally nothing. The button also brings keyboard\n activation and a focus ring with it. fExternalItem still supplies drag-to-place. -->\n <button\n type=\"button\"\n class=\"mj-flow-palette-item\"\n fExternalItem\n [fData]=\"nodeType.Type\"\n [title]=\"'Click to add a ' + nodeType.Label + ', or drag it onto the canvas'\"\n (click)=\"OnNodeTypeActivated(nodeType)\">\n <span class=\"mj-flow-palette-item-icon\" [style.backgroundColor]=\"GetBgColor(nodeType.Color, 0.08)\" [style.color]=\"nodeType.Color\">\n <i class=\"fa-solid\" [ngClass]=\"nodeType.Icon\"></i>\n </span>\n <span class=\"mj-flow-palette-item-label\">{{ nodeType.Label }}</span>\n </button>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: ["/* ============================================================\n Flow Palette \u2014 Draggable node type sidebar\n ============================================================ */\n\n.mj-flow-palette {\n width: 180px;\n background: var(--mj-bg-surface);\n border-right: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n flex-shrink: 0;\n transition: width 0.2s ease;\n}\n\n.mj-flow-palette--collapsed {\n width: 44px;\n}\n\n.mj-flow-palette--collapsed .mj-flow-palette-header {\n justify-content: center;\n padding: 10px 0;\n}\n\n.mj-flow-palette-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 14px;\n font-size: var(--mj-text-xs);\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.mj-flow-palette-header i {\n font-size: var(--mj-text-sm);\n}\n\n.mj-flow-palette-content {\n padding: 8px;\n flex: 1;\n}\n\n.mj-flow-palette-category {\n margin-bottom: 12px;\n}\n\n.mj-flow-palette-category-label {\n font-size: 10px;\n font-weight: 600;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n padding: 4px 6px;\n margin-bottom: 4px;\n}\n\n/* A <button> so a click actually does something. The native chrome is reset here rather than by\n reaching for .mj-btn \u2014 this is palette furniture, not an MJ button (see packages/Angular/CLAUDE.md). */\n.mj-flow-palette-item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 8px 10px;\n margin: 0;\n border: 0;\n border-radius: var(--mj-radius-md);\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: left;\n appearance: none;\n cursor: pointer;\n transition: background-color 0.15s ease, box-shadow 0.15s ease;\n user-select: none;\n}\n\n.mj-flow-palette-item:hover {\n background: var(--mj-bg-page);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-flow-palette-item:focus-visible {\n outline: 2px solid var(--mj-border-focus);\n outline-offset: 2px;\n}\n\n.mj-flow-palette-item:active {\n cursor: grabbing;\n background: var(--mj-bg-surface-sunken);\n}\n\n.mj-flow-palette-item-icon {\n width: 32px;\n height: 32px;\n border-radius: var(--mj-radius-md);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--mj-text-sm);\n flex-shrink: 0;\n}\n\n.mj-flow-palette-item-label {\n font-size: var(--mj-text-sm);\n font-weight: 500;\n color: var(--mj-text-secondary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n"] }]
|
|
104
127
|
}], null, { NodeTypes: [{
|
|
105
128
|
type: Input
|
|
106
129
|
}], Collapsed: [{
|
|
107
130
|
type: Input
|
|
131
|
+
}], NodeTypeActivated: [{
|
|
132
|
+
type: Output
|
|
108
133
|
}] }); })();
|
|
109
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowPaletteComponent, { className: "FlowPaletteComponent", filePath: "src/lib/components/flow-palette.component.ts", lineNumber:
|
|
134
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowPaletteComponent, { className: "FlowPaletteComponent", filePath: "src/lib/components/flow-palette.component.ts", lineNumber: 25 }); })();
|
|
110
135
|
//# sourceMappingURL=flow-palette.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flow-palette.component.js","sourceRoot":"","sources":["../../../src/lib/components/flow-palette.component.ts","../../../src/lib/components/flow-palette.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;;;;;
|
|
1
|
+
{"version":3,"file":"flow-palette.component.js","sourceRoot":"","sources":["../../../src/lib/components/flow-palette.component.ts","../../../src/lib/components/flow-palette.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Input, Output, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';\nimport { FlowNodeTypeConfig } from '../interfaces/flow-types';\n\n/**\n * Palette sidebar for creating new nodes — **click it or drag it**.\n *\n * Foblex's `fExternalItem` directive supplies drag-to-canvas placement, which is the precise\n * gesture when the author cares where the box lands. It is not, however, the only gesture people\n * try: a palette that looks like a list of buttons gets clicked, and for a long time a click here\n * produced *nothing at all* — the item was a bare `<div>` with no click binding, so the interaction\n * never even reached the editor. The entry is now a real `<button>`, which restores the click, the\n * keyboard (Enter/Space), and the focus ring for free, and emits {@link NodeTypeActivated}.\n *\n * Both gestures converge on the same `NodeAdded` event in `FlowEditorComponent` — one code path, so\n * a host that handles the drop automatically handles the click.\n */\n@Component({\n standalone: false,\n selector: 'mj-flow-palette',\n templateUrl: './flow-palette.component.html',\n styleUrls: ['./flow-palette.component.css'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class FlowPaletteComponent {\n @Input() NodeTypes: FlowNodeTypeConfig[] = [];\n @Input() Collapsed = false;\n\n /**\n * A palette entry was clicked (or activated from the keyboard).\n *\n * Carries the whole config rather than the type string so the host does not have to look it back\n * up — the palette already resolved it, and re-resolving is where a silent mismatch would live.\n */\n @Output() NodeTypeActivated = new EventEmitter<FlowNodeTypeConfig>();\n\n /** Handler for the click/keyboard activation on a palette entry. */\n OnNodeTypeActivated(nodeType: FlowNodeTypeConfig): void {\n this.NodeTypeActivated.emit(nodeType);\n }\n\n get categories(): string[] {\n const cats = new Set<string>();\n for (const nt of this.NodeTypes) {\n if (nt.Draggable !== false) {\n cats.add(nt.Category ?? 'General');\n }\n }\n return Array.from(cats);\n }\n\n GetTypesForCategory(category: string): FlowNodeTypeConfig[] {\n return this.NodeTypes.filter(nt =>\n nt.Draggable !== false && (nt.Category ?? 'General') === category\n );\n }\n\n /** Converts a hex color to rgba with the given opacity for background tinting */\n GetBgColor(hexColor: string | undefined, opacity: number): string {\n if (!hexColor) return 'transparent';\n // Handle standard 6-digit hex colors\n const match = hexColor.match(/^#?([0-9a-fA-F]{6})$/);\n if (match) {\n const r = parseInt(match[1].substring(0, 2), 16);\n const g = parseInt(match[1].substring(2, 4), 16);\n const b = parseInt(match[1].substring(4, 6), 16);\n return `rgba(${r}, ${g}, ${b}, ${opacity})`;\n }\n // Fallback: return the color as-is with opacity via CSS\n return hexColor;\n }\n}\n","<div class=\"mj-flow-palette\" [class.mj-flow-palette--collapsed]=\"Collapsed\">\n <div class=\"mj-flow-palette-header\">\n <i class=\"fa-solid fa-puzzle-piece\"></i>\n @if (!Collapsed) {\n <span>Steps</span>\n }\n </div>\n\n @if (!Collapsed) {\n <div class=\"mj-flow-palette-content\">\n @for (category of categories; track category) {\n <div class=\"mj-flow-palette-category\">\n <div class=\"mj-flow-palette-category-label\">{{ category }}</div>\n @for (nodeType of GetTypesForCategory(category); track nodeType) {\n <!-- A real <button>, not a <div>: clicking a palette entry is the gesture most people\n try first, and it used to do literally nothing. The button also brings keyboard\n activation and a focus ring with it. fExternalItem still supplies drag-to-place. -->\n <button\n type=\"button\"\n class=\"mj-flow-palette-item\"\n fExternalItem\n [fData]=\"nodeType.Type\"\n [title]=\"'Click to add a ' + nodeType.Label + ', or drag it onto the canvas'\"\n (click)=\"OnNodeTypeActivated(nodeType)\">\n <span class=\"mj-flow-palette-item-icon\" [style.backgroundColor]=\"GetBgColor(nodeType.Color, 0.08)\" [style.color]=\"nodeType.Color\">\n <i class=\"fa-solid\" [ngClass]=\"nodeType.Icon\"></i>\n </span>\n <span class=\"mj-flow-palette-item-label\">{{ nodeType.Label }}</span>\n </button>\n }\n </div>\n }\n </div>\n }\n</div>\n"]}
|
|
@@ -19,7 +19,9 @@ export declare class FlowToolbarComponent {
|
|
|
19
19
|
MinimapToggled: EventEmitter<boolean>;
|
|
20
20
|
LegendToggled: EventEmitter<boolean>;
|
|
21
21
|
PanModeToggled: EventEmitter<boolean>;
|
|
22
|
+
MinimizeClicked: EventEmitter<void>;
|
|
23
|
+
HideClicked: EventEmitter<void>;
|
|
22
24
|
static ɵfac: i0.ɵɵFactoryDeclaration<FlowToolbarComponent, never>;
|
|
23
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<FlowToolbarComponent, "mj-flow-toolbar", never, { "ZoomLevel": { "alias": "ZoomLevel"; "required": false; }; "ShowGrid": { "alias": "ShowGrid"; "required": false; }; "ShowMinimap": { "alias": "ShowMinimap"; "required": false; }; "ShowLegend": { "alias": "ShowLegend"; "required": false; }; "ReadOnly": { "alias": "ReadOnly"; "required": false; }; "PanMode": { "alias": "PanMode"; "required": false; }; }, { "ZoomInClicked": "ZoomInClicked"; "ZoomOutClicked": "ZoomOutClicked"; "FitToScreenClicked": "FitToScreenClicked"; "AutoLayoutClicked": "AutoLayoutClicked"; "GridToggled": "GridToggled"; "MinimapToggled": "MinimapToggled"; "LegendToggled": "LegendToggled"; "PanModeToggled": "PanModeToggled"; }, never, never, false, never>;
|
|
25
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<FlowToolbarComponent, "mj-flow-toolbar", never, { "ZoomLevel": { "alias": "ZoomLevel"; "required": false; }; "ShowGrid": { "alias": "ShowGrid"; "required": false; }; "ShowMinimap": { "alias": "ShowMinimap"; "required": false; }; "ShowLegend": { "alias": "ShowLegend"; "required": false; }; "ReadOnly": { "alias": "ReadOnly"; "required": false; }; "PanMode": { "alias": "PanMode"; "required": false; }; }, { "ZoomInClicked": "ZoomInClicked"; "ZoomOutClicked": "ZoomOutClicked"; "FitToScreenClicked": "FitToScreenClicked"; "AutoLayoutClicked": "AutoLayoutClicked"; "GridToggled": "GridToggled"; "MinimapToggled": "MinimapToggled"; "LegendToggled": "LegendToggled"; "PanModeToggled": "PanModeToggled"; "MinimizeClicked": "MinimizeClicked"; "HideClicked": "HideClicked"; }, never, never, false, never>;
|
|
24
26
|
}
|
|
25
27
|
//# sourceMappingURL=flow-toolbar.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flow-toolbar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/flow-toolbar.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAA8C,MAAM,eAAe,CAAC;;AAEnH;;;GAGG;AACH,
|
|
1
|
+
{"version":3,"file":"flow-toolbar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/flow-toolbar.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAA8C,MAAM,eAAe,CAAC;;AAEnH;;;GAGG;AACH,qBAuJa,oBAAoB;IACtB,SAAS,SAAO;IAChB,QAAQ,UAAQ;IAChB,WAAW,UAAQ;IACnB,UAAU,UAAQ;IAClB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAEf,aAAa,qBAA4B;IACzC,cAAc,qBAA4B;IAC1C,kBAAkB,qBAA4B;IAC9C,iBAAiB,qBAA4B;IAC7C,WAAW,wBAA+B;IAC1C,cAAc,wBAA+B;IAC7C,aAAa,wBAA+B;IAC5C,cAAc,wBAA+B;IAC7C,eAAe,qBAA4B;IAC3C,WAAW,qBAA4B;yCAjBtC,oBAAoB;2CAApB,oBAAoB;CAkBhC"}
|
|
@@ -5,9 +5,9 @@ function FlowToolbarComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
|
|
|
5
5
|
} }
|
|
6
6
|
function FlowToolbarComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
|
|
7
7
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
8
|
-
i0.ɵɵelementStart(0, "div", 1)(1, "button",
|
|
8
|
+
i0.ɵɵelementStart(0, "div", 1)(1, "button", 24);
|
|
9
9
|
i0.ɵɵlistener("click", function FlowToolbarComponent_Conditional_17_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.AutoLayoutClicked.emit()); });
|
|
10
|
-
i0.ɵɵelement(2, "i",
|
|
10
|
+
i0.ɵɵelement(2, "i", 25);
|
|
11
11
|
i0.ɵɵelementEnd()();
|
|
12
12
|
} }
|
|
13
13
|
/**
|
|
@@ -29,8 +29,10 @@ export class FlowToolbarComponent {
|
|
|
29
29
|
MinimapToggled = new EventEmitter();
|
|
30
30
|
LegendToggled = new EventEmitter();
|
|
31
31
|
PanModeToggled = new EventEmitter();
|
|
32
|
+
MinimizeClicked = new EventEmitter();
|
|
33
|
+
HideClicked = new EventEmitter();
|
|
32
34
|
static ɵfac = function FlowToolbarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FlowToolbarComponent)(); };
|
|
33
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FlowToolbarComponent, selectors: [["mj-flow-toolbar"]], inputs: { ZoomLevel: "ZoomLevel", ShowGrid: "ShowGrid", ShowMinimap: "ShowMinimap", ShowLegend: "ShowLegend", ReadOnly: "ReadOnly", PanMode: "PanMode" }, outputs: { ZoomInClicked: "ZoomInClicked", ZoomOutClicked: "ZoomOutClicked", FitToScreenClicked: "FitToScreenClicked", AutoLayoutClicked: "AutoLayoutClicked", GridToggled: "GridToggled", MinimapToggled: "MinimapToggled", LegendToggled: "LegendToggled", PanModeToggled: "PanModeToggled" }, standalone: false, decls:
|
|
35
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FlowToolbarComponent, selectors: [["mj-flow-toolbar"]], inputs: { ZoomLevel: "ZoomLevel", ShowGrid: "ShowGrid", ShowMinimap: "ShowMinimap", ShowLegend: "ShowLegend", ReadOnly: "ReadOnly", PanMode: "PanMode" }, outputs: { ZoomInClicked: "ZoomInClicked", ZoomOutClicked: "ZoomOutClicked", FitToScreenClicked: "FitToScreenClicked", AutoLayoutClicked: "AutoLayoutClicked", GridToggled: "GridToggled", MinimapToggled: "MinimapToggled", LegendToggled: "LegendToggled", PanModeToggled: "PanModeToggled", MinimizeClicked: "MinimizeClicked", HideClicked: "HideClicked" }, standalone: false, decls: 32, vars: 13, consts: [[1, "mj-flow-toolbar"], [1, "mj-flow-toolbar-group"], ["title", "Zoom In", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-magnifying-glass-plus"], [1, "mj-flow-toolbar-zoom"], ["title", "Zoom Out", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-magnifying-glass-minus"], ["title", "Fit to Screen", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-expand"], [1, "mj-flow-toolbar-divider"], ["title", "Select Mode (pointer)", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-arrow-pointer"], ["title", "Pan Mode (drag to move canvas)", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-hand"], ["title", "Toggle Grid", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-border-all"], ["title", "Toggle Minimap", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-map"], ["title", "Toggle Legend", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-list-check"], ["title", "Minimize toolbar", "aria-label", "Minimize toolbar", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-compress"], ["title", "Hide toolbar", "aria-label", "Hide toolbar", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], ["title", "Auto Arrange", 1, "mj-flow-toolbar-btn", 3, "click"], [1, "fa-solid", "fa-diagram-project"]], template: function FlowToolbarComponent_Template(rf, ctx) { if (rf & 1) {
|
|
34
36
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
|
|
35
37
|
i0.ɵɵlistener("click", function FlowToolbarComponent_Template_button_click_2_listener() { return ctx.ZoomInClicked.emit(); });
|
|
36
38
|
i0.ɵɵelement(3, "i", 3);
|
|
@@ -69,6 +71,15 @@ export class FlowToolbarComponent {
|
|
|
69
71
|
i0.ɵɵelementStart(24, "button", 18);
|
|
70
72
|
i0.ɵɵlistener("click", function FlowToolbarComponent_Template_button_click_24_listener() { return ctx.LegendToggled.emit(!ctx.ShowLegend); });
|
|
71
73
|
i0.ɵɵelement(25, "i", 19);
|
|
74
|
+
i0.ɵɵelementEnd()();
|
|
75
|
+
i0.ɵɵelement(26, "div", 9);
|
|
76
|
+
i0.ɵɵelementStart(27, "div", 1)(28, "button", 20);
|
|
77
|
+
i0.ɵɵlistener("click", function FlowToolbarComponent_Template_button_click_28_listener() { return ctx.MinimizeClicked.emit(); });
|
|
78
|
+
i0.ɵɵelement(29, "i", 21);
|
|
79
|
+
i0.ɵɵelementEnd();
|
|
80
|
+
i0.ɵɵelementStart(30, "button", 22);
|
|
81
|
+
i0.ɵɵlistener("click", function FlowToolbarComponent_Template_button_click_30_listener() { return ctx.HideClicked.emit(); });
|
|
82
|
+
i0.ɵɵelement(31, "i", 23);
|
|
72
83
|
i0.ɵɵelementEnd()()();
|
|
73
84
|
} if (rf & 2) {
|
|
74
85
|
i0.ɵɵadvance(5);
|
|
@@ -157,6 +168,19 @@ export class FlowToolbarComponent {
|
|
|
157
168
|
<i class="fa-solid fa-list-check"></i>
|
|
158
169
|
</button>
|
|
159
170
|
</div>
|
|
171
|
+
|
|
172
|
+
<div class="mj-flow-toolbar-divider"></div>
|
|
173
|
+
|
|
174
|
+
<div class="mj-flow-toolbar-group">
|
|
175
|
+
<button class="mj-flow-toolbar-btn" (click)="MinimizeClicked.emit()"
|
|
176
|
+
title="Minimize toolbar" aria-label="Minimize toolbar">
|
|
177
|
+
<i class="fa-solid fa-compress"></i>
|
|
178
|
+
</button>
|
|
179
|
+
<button class="mj-flow-toolbar-btn" (click)="HideClicked.emit()"
|
|
180
|
+
title="Hide toolbar" aria-label="Hide toolbar">
|
|
181
|
+
<i class="fa-solid fa-xmark"></i>
|
|
182
|
+
</button>
|
|
183
|
+
</div>
|
|
160
184
|
</div>
|
|
161
185
|
`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["\n .mj-flow-toolbar {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 4px 8px;\n background: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n }\n\n .mj-flow-toolbar-group {\n display: flex;\n align-items: center;\n gap: 2px;\n }\n\n .mj-flow-toolbar-divider {\n width: 1px;\n height: 20px;\n background: #e2e8f0;\n margin: 0 4px;\n }\n\n .mj-flow-toolbar-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: #64748b;\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 13px;\n }\n\n .mj-flow-toolbar-btn:hover {\n background: #f1f5f9;\n color: #334155;\n }\n\n .mj-flow-toolbar-btn--active {\n background: #eff6ff;\n color: #3b82f6;\n }\n\n .mj-flow-toolbar-btn--active:hover {\n background: #dbeafe;\n color: #2563eb;\n }\n\n .mj-flow-toolbar-zoom {\n font-size: 11px;\n font-weight: 500;\n color: #64748b;\n min-width: 38px;\n text-align: center;\n user-select: none;\n }\n "] }]
|
|
162
186
|
}], null, { ZoomLevel: [{
|
|
@@ -187,6 +211,10 @@ export class FlowToolbarComponent {
|
|
|
187
211
|
type: Output
|
|
188
212
|
}], PanModeToggled: [{
|
|
189
213
|
type: Output
|
|
214
|
+
}], MinimizeClicked: [{
|
|
215
|
+
type: Output
|
|
216
|
+
}], HideClicked: [{
|
|
217
|
+
type: Output
|
|
190
218
|
}] }); })();
|
|
191
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowToolbarComponent, { className: "FlowToolbarComponent", filePath: "src/lib/components/flow-toolbar.component.ts", lineNumber:
|
|
219
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowToolbarComponent, { className: "FlowToolbarComponent", filePath: "src/lib/components/flow-toolbar.component.ts", lineNumber: 158 }); })();
|
|
192
220
|
//# sourceMappingURL=flow-toolbar.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flow-toolbar.component.js","sourceRoot":"","sources":["../../../src/lib/components/flow-toolbar.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;;;IA0C3G,yBAA2C;;;;IAKzC,AADF,8BAAmC,iBAC2D;IAAxD,yLAAS,+BAAwB,KAAC;IACpE,wBAA2C;IAE/C,AADE,iBAAS,EACL;;AAhDd;;;GAGG;
|
|
1
|
+
{"version":3,"file":"flow-toolbar.component.js","sourceRoot":"","sources":["../../../src/lib/components/flow-toolbar.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';\n\n/**\n * Internal toolbar for the generic flow editor canvas controls.\n * Provides zoom, fit-to-screen, auto-layout, and grid/minimap toggles.\n */\n@Component({\n standalone: false,\n selector: 'mj-flow-toolbar',\n template: `\n <div class=\"mj-flow-toolbar\">\n <div class=\"mj-flow-toolbar-group\">\n <button class=\"mj-flow-toolbar-btn\" (click)=\"ZoomInClicked.emit()\" title=\"Zoom In\">\n <i class=\"fa-solid fa-magnifying-glass-plus\"></i>\n </button>\n <span class=\"mj-flow-toolbar-zoom\">{{ ZoomLevel }}%</span>\n <button class=\"mj-flow-toolbar-btn\" (click)=\"ZoomOutClicked.emit()\" title=\"Zoom Out\">\n <i class=\"fa-solid fa-magnifying-glass-minus\"></i>\n </button>\n <button class=\"mj-flow-toolbar-btn\" (click)=\"FitToScreenClicked.emit()\" title=\"Fit to Screen\">\n <i class=\"fa-solid fa-expand\"></i>\n </button>\n </div>\n \n <div class=\"mj-flow-toolbar-divider\"></div>\n \n <div class=\"mj-flow-toolbar-group\">\n <button class=\"mj-flow-toolbar-btn\"\n [class.mj-flow-toolbar-btn--active]=\"!PanMode\"\n (click)=\"PanModeToggled.emit(false)\"\n title=\"Select Mode (pointer)\">\n <i class=\"fa-solid fa-arrow-pointer\"></i>\n </button>\n <button class=\"mj-flow-toolbar-btn\"\n [class.mj-flow-toolbar-btn--active]=\"PanMode\"\n (click)=\"PanModeToggled.emit(true)\"\n title=\"Pan Mode (drag to move canvas)\">\n <i class=\"fa-solid fa-hand\"></i>\n </button>\n </div>\n \n @if (!ReadOnly) {\n <div class=\"mj-flow-toolbar-divider\"></div>\n }\n \n @if (!ReadOnly) {\n <div class=\"mj-flow-toolbar-group\">\n <button class=\"mj-flow-toolbar-btn\" (click)=\"AutoLayoutClicked.emit()\" title=\"Auto Arrange\">\n <i class=\"fa-solid fa-diagram-project\"></i>\n </button>\n </div>\n }\n \n <div class=\"mj-flow-toolbar-divider\"></div>\n \n <div class=\"mj-flow-toolbar-group\">\n <button class=\"mj-flow-toolbar-btn\"\n [class.mj-flow-toolbar-btn--active]=\"ShowGrid\"\n (click)=\"GridToggled.emit(!ShowGrid)\"\n title=\"Toggle Grid\">\n <i class=\"fa-solid fa-border-all\"></i>\n </button>\n <button class=\"mj-flow-toolbar-btn\"\n [class.mj-flow-toolbar-btn--active]=\"ShowMinimap\"\n (click)=\"MinimapToggled.emit(!ShowMinimap)\"\n title=\"Toggle Minimap\">\n <i class=\"fa-solid fa-map\"></i>\n </button>\n <button class=\"mj-flow-toolbar-btn\"\n [class.mj-flow-toolbar-btn--active]=\"ShowLegend\"\n (click)=\"LegendToggled.emit(!ShowLegend)\"\n title=\"Toggle Legend\">\n <i class=\"fa-solid fa-list-check\"></i>\n </button>\n </div>\n\n <div class=\"mj-flow-toolbar-divider\"></div>\n\n <div class=\"mj-flow-toolbar-group\">\n <button class=\"mj-flow-toolbar-btn\" (click)=\"MinimizeClicked.emit()\"\n title=\"Minimize toolbar\" aria-label=\"Minimize toolbar\">\n <i class=\"fa-solid fa-compress\"></i>\n </button>\n <button class=\"mj-flow-toolbar-btn\" (click)=\"HideClicked.emit()\"\n title=\"Hide toolbar\" aria-label=\"Hide toolbar\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n </div>\n `,\n styles: [`\n .mj-flow-toolbar {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 4px 8px;\n background: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);\n }\n\n .mj-flow-toolbar-group {\n display: flex;\n align-items: center;\n gap: 2px;\n }\n\n .mj-flow-toolbar-divider {\n width: 1px;\n height: 20px;\n background: #e2e8f0;\n margin: 0 4px;\n }\n\n .mj-flow-toolbar-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: #64748b;\n cursor: pointer;\n transition: all 0.15s ease;\n font-size: 13px;\n }\n\n .mj-flow-toolbar-btn:hover {\n background: #f1f5f9;\n color: #334155;\n }\n\n .mj-flow-toolbar-btn--active {\n background: #eff6ff;\n color: #3b82f6;\n }\n\n .mj-flow-toolbar-btn--active:hover {\n background: #dbeafe;\n color: #2563eb;\n }\n\n .mj-flow-toolbar-zoom {\n font-size: 11px;\n font-weight: 500;\n color: #64748b;\n min-width: 38px;\n text-align: center;\n user-select: none;\n }\n `],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class FlowToolbarComponent {\n @Input() ZoomLevel = 100;\n @Input() ShowGrid = true;\n @Input() ShowMinimap = true;\n @Input() ShowLegend = true;\n @Input() ReadOnly = false;\n @Input() PanMode = false;\n\n @Output() ZoomInClicked = new EventEmitter<void>();\n @Output() ZoomOutClicked = new EventEmitter<void>();\n @Output() FitToScreenClicked = new EventEmitter<void>();\n @Output() AutoLayoutClicked = new EventEmitter<void>();\n @Output() GridToggled = new EventEmitter<boolean>();\n @Output() MinimapToggled = new EventEmitter<boolean>();\n @Output() LegendToggled = new EventEmitter<boolean>();\n @Output() PanModeToggled = new EventEmitter<boolean>();\n @Output() MinimizeClicked = new EventEmitter<void>();\n @Output() HideClicked = new EventEmitter<void>();\n}\n"]}
|
|
@@ -7,14 +7,15 @@ import * as i5 from "./components/flow-status-bar.component";
|
|
|
7
7
|
import * as i6 from "./agent-editor/flow-agent-editor.component";
|
|
8
8
|
import * as i7 from "./agent-editor/agent-properties-panel.component";
|
|
9
9
|
import * as i8 from "./agent-editor/agent-step-list.component";
|
|
10
|
-
import * as i9 from "@
|
|
11
|
-
import * as i10 from "@angular/
|
|
12
|
-
import * as i11 from "@
|
|
13
|
-
import * as i12 from "@
|
|
14
|
-
import * as i13 from "@memberjunction/ng-
|
|
10
|
+
import * as i9 from "@memberjunction/ng-shared-generic";
|
|
11
|
+
import * as i10 from "@angular/common";
|
|
12
|
+
import * as i11 from "@angular/forms";
|
|
13
|
+
import * as i12 from "@foblex/flow";
|
|
14
|
+
import * as i13 from "@memberjunction/ng-code-editor";
|
|
15
|
+
import * as i14 from "@memberjunction/ng-ui-components";
|
|
15
16
|
export declare class FlowEditorModule {
|
|
16
17
|
static ɵfac: i0.ɵɵFactoryDeclaration<FlowEditorModule, never>;
|
|
17
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<FlowEditorModule, [typeof i1.FlowEditorComponent, typeof i2.FlowNodeComponent, typeof i3.FlowPaletteComponent, typeof i4.FlowToolbarComponent, typeof i5.FlowStatusBarComponent, typeof i6.FlowAgentEditorComponent, typeof i7.AgentPropertiesPanelComponent, typeof i8.AgentStepListComponent], [typeof i9.
|
|
18
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<FlowEditorModule, [typeof i1.FlowEditorComponent, typeof i2.FlowNodeComponent, typeof i3.FlowPaletteComponent, typeof i4.FlowToolbarComponent, typeof i5.FlowStatusBarComponent, typeof i6.FlowAgentEditorComponent, typeof i7.AgentPropertiesPanelComponent, typeof i8.AgentStepListComponent], [typeof i9.SharedGenericModule, typeof i10.CommonModule, typeof i11.FormsModule, typeof i12.FFlowModule, typeof i13.CodeEditorModule, typeof i14.MJEmptyStateComponent, typeof i14.MJAccordionModule], [typeof i1.FlowEditorComponent, typeof i2.FlowNodeComponent, typeof i3.FlowPaletteComponent, typeof i4.FlowToolbarComponent, typeof i5.FlowStatusBarComponent, typeof i6.FlowAgentEditorComponent, typeof i7.AgentPropertiesPanelComponent, typeof i8.AgentStepListComponent]>;
|
|
18
19
|
static ɵinj: i0.ɵɵInjectorDeclaration<FlowEditorModule>;
|
|
19
20
|
}
|
|
20
21
|
//# sourceMappingURL=flow-editor.module.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flow-editor.module.d.ts","sourceRoot":"","sources":["../../src/lib/flow-editor.module.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"flow-editor.module.d.ts","sourceRoot":"","sources":["../../src/lib/flow-editor.module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAoBA,qBAmCa,gBAAgB;yCAAhB,gBAAgB;0CAAhB,gBAAgB;0CAAhB,gBAAgB;CAAI"}
|
|
@@ -14,11 +14,13 @@ import { FlowStatusBarComponent } from './components/flow-status-bar.component';
|
|
|
14
14
|
import { FlowAgentEditorComponent } from './agent-editor/flow-agent-editor.component';
|
|
15
15
|
import { AgentPropertiesPanelComponent } from './agent-editor/agent-properties-panel.component';
|
|
16
16
|
import { AgentStepListComponent } from './agent-editor/agent-step-list.component';
|
|
17
|
+
import { SharedGenericModule } from '@memberjunction/ng-shared-generic';
|
|
17
18
|
import * as i0 from "@angular/core";
|
|
18
19
|
export class FlowEditorModule {
|
|
19
20
|
static ɵfac = function FlowEditorModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FlowEditorModule)(); };
|
|
20
21
|
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: FlowEditorModule });
|
|
21
|
-
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [
|
|
22
|
+
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [SharedGenericModule,
|
|
23
|
+
CommonModule,
|
|
22
24
|
FormsModule,
|
|
23
25
|
FFlowModule,
|
|
24
26
|
CodeEditorModule,
|
|
@@ -41,6 +43,7 @@ export class FlowEditorModule {
|
|
|
41
43
|
AgentStepListComponent
|
|
42
44
|
],
|
|
43
45
|
imports: [
|
|
46
|
+
SharedGenericModule,
|
|
44
47
|
CommonModule,
|
|
45
48
|
FormsModule,
|
|
46
49
|
FFlowModule,
|
|
@@ -72,7 +75,8 @@ export class FlowEditorModule {
|
|
|
72
75
|
// Agent-specific
|
|
73
76
|
FlowAgentEditorComponent,
|
|
74
77
|
AgentPropertiesPanelComponent,
|
|
75
|
-
AgentStepListComponent], imports: [
|
|
78
|
+
AgentStepListComponent], imports: [SharedGenericModule,
|
|
79
|
+
CommonModule,
|
|
76
80
|
FormsModule,
|
|
77
81
|
FFlowModule,
|
|
78
82
|
CodeEditorModule,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flow-editor.module.js","sourceRoot":"","sources":["../../src/lib/flow-editor.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAE5F,qBAAqB;AACrB,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAEhF,4BAA4B;AAC5B,OAAO,EAAE,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AACtF,OAAO,EAAE,6BAA6B,EAAE,MAAM,iDAAiD,CAAC;AAChG,OAAO,EAAE,sBAAsB,EAAE,MAAM,0CAA0C,CAAC;;
|
|
1
|
+
{"version":3,"file":"flow-editor.module.js","sourceRoot":"","sources":["../../src/lib/flow-editor.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAE5F,qBAAqB;AACrB,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAEhF,4BAA4B;AAC5B,OAAO,EAAE,wBAAwB,EAAE,MAAM,4CAA4C,CAAC;AACtF,OAAO,EAAE,6BAA6B,EAAE,MAAM,iDAAiD,CAAC;AAChG,OAAO,EAAE,sBAAsB,EAAE,MAAM,0CAA0C,CAAC;AAClF,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;;AAqCxE,MAAM,OAAO,gBAAgB;0GAAhB,gBAAgB;4DAAhB,gBAAgB;gEArBzB,mBAAmB;YACnB,YAAY;YACZ,WAAW;YACX,WAAW;YACX,gBAAgB;YAChB,qBAAqB;YACrB,iBAAiB;;iFAeR,gBAAgB;cAnC5B,QAAQ;eAAC;gBACR,YAAY,EAAE;oBACZ,UAAU;oBACV,mBAAmB;oBACnB,iBAAiB;oBACjB,oBAAoB;oBACpB,oBAAoB;oBACpB,sBAAsB;oBACtB,iBAAiB;oBACjB,wBAAwB;oBACxB,6BAA6B;oBAC7B,sBAAsB;iBACvB;gBACD,OAAO,EAAE;oBACP,mBAAmB;oBACnB,YAAY;oBACZ,WAAW;oBACX,WAAW;oBACX,gBAAgB;oBAChB,qBAAqB;oBACrB,iBAAiB;iBAClB;gBACD,OAAO,EAAE;oBACP,6BAA6B;oBAC7B,mBAAmB;oBACnB,iBAAiB;oBACjB,oBAAoB;oBACpB,oBAAoB;oBACpB,sBAAsB;oBACtB,iBAAiB;oBACjB,wBAAwB;oBACxB,6BAA6B;oBAC7B,sBAAsB;iBACvB;aACF;;wFACY,gBAAgB;QAjCzB,UAAU;QACV,mBAAmB;QACnB,iBAAiB;QACjB,oBAAoB;QACpB,oBAAoB;QACpB,sBAAsB;QACtB,iBAAiB;QACjB,wBAAwB;QACxB,6BAA6B;QAC7B,sBAAsB,aAGtB,mBAAmB;QACnB,YAAY;QACZ,WAAW;QACX,WAAW;QACX,gBAAgB;QAChB,qBAAqB;QACrB,iBAAiB;QAGjB,6BAA6B;QAC7B,mBAAmB;QACnB,iBAAiB;QACjB,oBAAoB;QACpB,oBAAoB;QACpB,sBAAsB;QACtB,iBAAiB;QACjB,wBAAwB;QACxB,6BAA6B;QAC7B,sBAAsB","sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { FFlowModule } from '@foblex/flow';\nimport { CodeEditorModule } from '@memberjunction/ng-code-editor';\nimport { MJEmptyStateComponent, MJAccordionModule } from '@memberjunction/ng-ui-components';\n\n// Generic components\nimport { FlowEditorComponent } from './components/flow-editor.component';\nimport { FlowNodeComponent } from './components/flow-node.component';\nimport { FlowPaletteComponent } from './components/flow-palette.component';\nimport { FlowToolbarComponent } from './components/flow-toolbar.component';\nimport { FlowStatusBarComponent } from './components/flow-status-bar.component';\n\n// Agent-specific components\nimport { FlowAgentEditorComponent } from './agent-editor/flow-agent-editor.component';\nimport { AgentPropertiesPanelComponent } from './agent-editor/agent-properties-panel.component';\nimport { AgentStepListComponent } from './agent-editor/agent-step-list.component';\nimport { SharedGenericModule } from '@memberjunction/ng-shared-generic';\n\n@NgModule({\n declarations: [\n // Generic\n FlowEditorComponent,\n FlowNodeComponent,\n FlowPaletteComponent,\n FlowToolbarComponent,\n FlowStatusBarComponent,\n // Agent-specific\n FlowAgentEditorComponent,\n AgentPropertiesPanelComponent,\n AgentStepListComponent\n ],\n imports: [\n SharedGenericModule,\n CommonModule,\n FormsModule,\n FFlowModule,\n CodeEditorModule,\n MJEmptyStateComponent,\n MJAccordionModule\n ],\n exports: [\n // Generic — for any consumer\n FlowEditorComponent,\n FlowNodeComponent,\n FlowPaletteComponent,\n FlowToolbarComponent,\n FlowStatusBarComponent,\n // Agent-specific\n FlowAgentEditorComponent,\n AgentPropertiesPanelComponent,\n AgentStepListComponent\n ]\n})\nexport class FlowEditorModule { }\n"]}
|
|
@@ -31,7 +31,14 @@ export interface FlowNodeBadge {
|
|
|
31
31
|
Color?: string;
|
|
32
32
|
}
|
|
33
33
|
/** Visual status of a node */
|
|
34
|
-
|
|
34
|
+
/**
|
|
35
|
+
* How a node presents its state.
|
|
36
|
+
*
|
|
37
|
+
* `skipped` is deliberately its own value rather than a shade of `disabled`. Disabled means "this
|
|
38
|
+
* cannot run"; skipped means "the graph chose another route" — nothing is wrong, and a reader who
|
|
39
|
+
* cannot tell them apart goes looking for a failure that never happened.
|
|
40
|
+
*/
|
|
41
|
+
export type FlowNodeStatus = 'default' | 'success' | 'error' | 'warning' | 'running' | 'disabled' | 'pending' | 'skipped';
|
|
35
42
|
/** A node in the flow graph */
|
|
36
43
|
export interface FlowNode {
|
|
37
44
|
ID: string;
|
|
@@ -72,6 +79,8 @@ export interface FlowConnection {
|
|
|
72
79
|
Priority?: number;
|
|
73
80
|
Style?: FlowConnectionStyle;
|
|
74
81
|
Color?: string;
|
|
82
|
+
/** Stroke width in px. Active/flowing edges use a thicker value so they read at a glance. */
|
|
83
|
+
StrokeWidth?: number;
|
|
75
84
|
Animated?: boolean;
|
|
76
85
|
Selected?: boolean;
|
|
77
86
|
/** Opaque data payload — consumers store domain-specific data here */
|
|
@@ -137,8 +146,39 @@ export interface FlowCanvasClickEvent {
|
|
|
137
146
|
}
|
|
138
147
|
/** Context menu target type */
|
|
139
148
|
export type FlowContextMenuTarget = 'node' | 'connection';
|
|
140
|
-
/**
|
|
141
|
-
export type FlowContextMenuAction = 'edit' | 'remove';
|
|
149
|
+
/** Built-in design-time actions. Hosts may emit any other `ID` string. */
|
|
150
|
+
export type FlowContextMenuAction = 'edit' | 'remove' | string;
|
|
151
|
+
/** One row in the canvas context menu. The host may replace the default Edit/Remove set. */
|
|
152
|
+
export type FlowContextMenuItem = {
|
|
153
|
+
ID: string;
|
|
154
|
+
Label: string;
|
|
155
|
+
Icon?: string;
|
|
156
|
+
Danger?: boolean;
|
|
157
|
+
Disabled?: boolean;
|
|
158
|
+
Shortcut?: string;
|
|
159
|
+
};
|
|
160
|
+
/**
|
|
161
|
+
* Fired BEFORE the canvas menu opens. Mutate `Items` to replace the default set; `Cancel = true`
|
|
162
|
+
* suppresses the menu. A `Before*` handler must not be async — the emitter reads `Cancel`/`Items`
|
|
163
|
+
* when `emit()` returns.
|
|
164
|
+
*/
|
|
165
|
+
export declare class FlowBeforeContextMenuEventArgs {
|
|
166
|
+
readonly Target: FlowContextMenuTarget;
|
|
167
|
+
readonly Node: FlowNode | null;
|
|
168
|
+
readonly Connection: FlowConnection | null;
|
|
169
|
+
readonly MouseEvent: MouseEvent;
|
|
170
|
+
Items: FlowContextMenuItem[];
|
|
171
|
+
Cancel: boolean;
|
|
172
|
+
constructor(Target: FlowContextMenuTarget, Node: FlowNode | null, Connection: FlowConnection | null, MouseEvent: MouseEvent, Items: FlowContextMenuItem[]);
|
|
173
|
+
}
|
|
174
|
+
/** Fired AFTER a menu item is chosen. Built-in `edit`/`remove` still run unless ReadOnly. */
|
|
175
|
+
export declare class FlowAfterContextMenuActionEventArgs {
|
|
176
|
+
readonly ActionID: string;
|
|
177
|
+
readonly Target: FlowContextMenuTarget;
|
|
178
|
+
readonly Node: FlowNode | null;
|
|
179
|
+
readonly Connection: FlowConnection | null;
|
|
180
|
+
constructor(ActionID: string, Target: FlowContextMenuTarget, Node: FlowNode | null, Connection: FlowConnection | null);
|
|
181
|
+
}
|
|
142
182
|
/** A complete snapshot of the flow state */
|
|
143
183
|
export interface FlowSnapshot {
|
|
144
184
|
Nodes: FlowNode[];
|
|
@@ -146,6 +186,15 @@ export interface FlowSnapshot {
|
|
|
146
186
|
}
|
|
147
187
|
/** Direction for auto-layout */
|
|
148
188
|
export type FlowLayoutDirection = 'horizontal' | 'vertical';
|
|
189
|
+
/**
|
|
190
|
+
* How the canvas toolbar presents itself.
|
|
191
|
+
*
|
|
192
|
+
* `shown` is the full bar. `minimized` is a chip that restores it. `hidden` leaves only a
|
|
193
|
+
* recover tab — otherwise a host that hid the bar would have no way back from the canvas.
|
|
194
|
+
*/
|
|
195
|
+
export type FlowToolbarVisibility = 'shown' | 'hidden' | 'minimized';
|
|
196
|
+
/** Horizontal placement of the canvas toolbar (and of its minimized / hidden recover control). */
|
|
197
|
+
export type FlowToolbarAlign = 'left' | 'center' | 'right';
|
|
149
198
|
/** Result of an auto-layout operation */
|
|
150
199
|
export interface FlowLayoutResult {
|
|
151
200
|
Positions: Map<string, FlowPosition>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flow-types.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/flow-types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,6BAA6B;AAC7B,MAAM,WAAW,YAAY;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,sBAAsB;AACtB,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,mCAAmC;AACnC,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,6CAA6C;AAC7C,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,8BAA8B;AAC9B,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"flow-types.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/flow-types.ts"],"names":[],"mappings":"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"}
|
|
@@ -2,5 +2,37 @@
|
|
|
2
2
|
* Core interfaces for the generic flow editor.
|
|
3
3
|
* These types are entity-agnostic — consumers map their domain data to/from these.
|
|
4
4
|
*/
|
|
5
|
-
|
|
5
|
+
/**
|
|
6
|
+
* Fired BEFORE the canvas menu opens. Mutate `Items` to replace the default set; `Cancel = true`
|
|
7
|
+
* suppresses the menu. A `Before*` handler must not be async — the emitter reads `Cancel`/`Items`
|
|
8
|
+
* when `emit()` returns.
|
|
9
|
+
*/
|
|
10
|
+
export class FlowBeforeContextMenuEventArgs {
|
|
11
|
+
Target;
|
|
12
|
+
Node;
|
|
13
|
+
Connection;
|
|
14
|
+
MouseEvent;
|
|
15
|
+
Items;
|
|
16
|
+
Cancel = false;
|
|
17
|
+
constructor(Target, Node, Connection, MouseEvent, Items) {
|
|
18
|
+
this.Target = Target;
|
|
19
|
+
this.Node = Node;
|
|
20
|
+
this.Connection = Connection;
|
|
21
|
+
this.MouseEvent = MouseEvent;
|
|
22
|
+
this.Items = Items;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
/** Fired AFTER a menu item is chosen. Built-in `edit`/`remove` still run unless ReadOnly. */
|
|
26
|
+
export class FlowAfterContextMenuActionEventArgs {
|
|
27
|
+
ActionID;
|
|
28
|
+
Target;
|
|
29
|
+
Node;
|
|
30
|
+
Connection;
|
|
31
|
+
constructor(ActionID, Target, Node, Connection) {
|
|
32
|
+
this.ActionID = ActionID;
|
|
33
|
+
this.Target = Target;
|
|
34
|
+
this.Node = Node;
|
|
35
|
+
this.Connection = Connection;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
6
38
|
//# sourceMappingURL=flow-types.js.map
|