@xxmachina/components 19.21.8 → 19.24.1
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/extras/flow/index.d.ts +13 -3
- package/extras/flow/index.d.ts.map +1 -1
- package/features/query/index.d.ts.map +1 -1
- package/fesm2022/xxmachina-components-extras-flow.mjs +110 -11
- package/fesm2022/xxmachina-components-extras-flow.mjs.map +1 -1
- package/fesm2022/xxmachina-components-groups-query-form.mjs.map +1 -1
- package/fesm2022/xxmachina-components-molecules-inline-edit-field.mjs +117 -0
- package/fesm2022/xxmachina-components-molecules-inline-edit-field.mjs.map +1 -0
- package/fesm2022/xxmachina-components-molecules-weekly-header.mjs +2 -2
- package/fesm2022/xxmachina-components-molecules-weekly-header.mjs.map +1 -1
- package/fesm2022/xxmachina-components-organisms-calendar-section.mjs +2 -2
- package/fesm2022/xxmachina-components-organisms-calendar-section.mjs.map +1 -1
- package/fesm2022/xxmachina-components-organisms-terminal-input-section.mjs +19 -4
- package/fesm2022/xxmachina-components-organisms-terminal-input-section.mjs.map +1 -1
- package/fesm2022/xxmachina-components-organisms-xterm.mjs +849 -49
- package/fesm2022/xxmachina-components-organisms-xterm.mjs.map +1 -1
- package/fesm2022/xxmachina-components-pages-command-harness.mjs +28 -0
- package/fesm2022/xxmachina-components-pages-command-harness.mjs.map +1 -0
- package/fesm2022/xxmachina-components-pages-command.mjs +10 -6
- package/fesm2022/xxmachina-components-pages-command.mjs.map +1 -1
- package/fesm2022/xxmachina-components-pages-query.mjs +2 -2
- package/fesm2022/xxmachina-components-pages-query.mjs.map +1 -1
- package/fesm2022/xxmachina-components-pages-thread.mjs +2 -2
- package/fesm2022/xxmachina-components-pages-thread.mjs.map +1 -1
- package/fesm2022/xxmachina-components-services-message.mjs.map +1 -1
- package/fesm2022/xxmachina-components-templates-agent.mjs +151 -123
- package/fesm2022/xxmachina-components-templates-agent.mjs.map +1 -1
- package/fesm2022/xxmachina-components-templates-background.mjs +376 -242
- package/fesm2022/xxmachina-components-templates-background.mjs.map +1 -1
- package/fesm2022/xxmachina-components-templates-flow-nodes-group.mjs +164 -0
- package/fesm2022/xxmachina-components-templates-flow-nodes-group.mjs.map +1 -0
- package/fesm2022/xxmachina-components-templates-flow-nodes-issue.mjs +157 -0
- package/fesm2022/xxmachina-components-templates-flow-nodes-issue.mjs.map +1 -0
- package/fesm2022/xxmachina-components-templates-flow-nodes-task.mjs +154 -0
- package/fesm2022/xxmachina-components-templates-flow-nodes-task.mjs.map +1 -0
- package/fesm2022/xxmachina-components-templates-flow.mjs +337 -0
- package/fesm2022/xxmachina-components-templates-flow.mjs.map +1 -0
- package/fesm2022/xxmachina-components.mjs +2 -2
- package/fesm2022/xxmachina-components.mjs.map +1 -1
- package/groups/query-form/index.d.ts +3 -4
- package/groups/query-form/index.d.ts.map +1 -1
- package/index.d.ts.map +1 -1
- package/molecules/inline-edit-field/index.d.ts +32 -0
- package/molecules/inline-edit-field/index.d.ts.map +1 -0
- package/organisms/terminal-input-section/index.d.ts +2 -1
- package/organisms/terminal-input-section/index.d.ts.map +1 -1
- package/organisms/xterm/index.d.ts +176 -4
- package/organisms/xterm/index.d.ts.map +1 -1
- package/package.json +29 -13
- package/pages/command/harness/index.d.ts +14 -0
- package/pages/command/harness/index.d.ts.map +1 -0
- package/pages/command/index.d.ts +12 -4
- package/pages/command/index.d.ts.map +1 -1
- package/pages/query/index.d.ts +2 -2
- package/pages/query/index.d.ts.map +1 -1
- package/pages/query-v2/index.d.ts.map +1 -1
- package/services/command/index.d.ts.map +1 -1
- package/services/message/index.d.ts +3 -3
- package/services/message/index.d.ts.map +1 -1
- package/templates/agent/index.d.ts +11 -2
- package/templates/agent/index.d.ts.map +1 -1
- package/templates/background/index.d.ts +14 -20
- package/templates/background/index.d.ts.map +1 -1
- package/templates/flow/index.d.ts +61 -0
- package/templates/flow/index.d.ts.map +1 -0
- package/templates/flow/nodes/group/index.d.ts +44 -0
- package/templates/flow/nodes/group/index.d.ts.map +1 -0
- package/templates/flow/nodes/issue/index.d.ts +46 -0
- package/templates/flow/nodes/issue/index.d.ts.map +1 -0
- package/templates/flow/nodes/task/index.d.ts +37 -0
- package/templates/flow/nodes/task/index.d.ts.map +1 -0
- package/fesm2022/xxmachina-components-services-calendar.mjs +0 -25
- package/fesm2022/xxmachina-components-services-calendar.mjs.map +0 -1
- package/fesm2022/xxmachina-components-services-schedule.mjs +0 -51
- package/fesm2022/xxmachina-components-services-schedule.mjs.map +0 -1
- package/services/calendar/index.d.ts +0 -14
- package/services/calendar/index.d.ts.map +0 -1
- package/services/schedule/index.d.ts +0 -27
- package/services/schedule/index.d.ts.map +0 -1
package/extras/flow/index.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { TemplateRef, ElementRef, EnvironmentInjector, ApplicationRef, ViewContainerRef } from '@angular/core';
|
|
3
3
|
import { NgAtomicComponent } from '@ng-atomic/core';
|
|
4
|
-
import { Node, Edge, DefaultEdgeOptions, NodeTypes, EdgeTypes, ConnectionLineType, ConnectionLineComponent, ConnectionMode, KeyCode, SelectionMode, NodeOrigin, Viewport, CoordinateExtent, PanOnScrollMode, FitViewOptions, PanelPosition, ProOptions, Connection, HandleType, NodeChange, EdgeChange, OnConnectStartParams, ReactFlowInstance, OnSelectionChangeParams, OnError } from 'reactflow';
|
|
4
|
+
import { Node, Edge, DefaultEdgeOptions, NodeTypes, EdgeTypes, ConnectionLineType, ConnectionLineComponent, ConnectionMode, KeyCode, SelectionMode, NodeOrigin, Viewport, CoordinateExtent, PanOnScrollMode, FitViewOptions, PanelPosition, ProOptions, BackgroundVariant, Connection, HandleType, NodeChange, EdgeChange, OnConnectStartParams, ReactFlowInstance, OnSelectionChangeParams, OnError } from 'reactflow';
|
|
5
|
+
export { BackgroundVariant } from 'reactflow';
|
|
5
6
|
import * as React from 'react';
|
|
6
7
|
import React__default from 'react';
|
|
7
8
|
|
|
@@ -66,6 +67,15 @@ declare class ReactFlowComponentStore {
|
|
|
66
67
|
readonly autoPanOnNodeDrag: _angular_core.InputSignal<boolean>;
|
|
67
68
|
readonly autoPanOnConnect: _angular_core.InputSignal<boolean>;
|
|
68
69
|
readonly connectionRadius: _angular_core.InputSignal<number>;
|
|
70
|
+
readonly backgroundVariant: _angular_core.InputSignal<BackgroundVariant>;
|
|
71
|
+
readonly backgroundGap: _angular_core.InputSignal<number | [number, number]>;
|
|
72
|
+
readonly backgroundColor: _angular_core.InputSignal<string>;
|
|
73
|
+
readonly backgroundSize: _angular_core.InputSignal<number>;
|
|
74
|
+
readonly showBackground: _angular_core.InputSignal<boolean>;
|
|
75
|
+
readonly showMiniMap: _angular_core.InputSignal<boolean>;
|
|
76
|
+
readonly showControls: _angular_core.InputSignal<boolean>;
|
|
77
|
+
readonly showCoordinateLabels: _angular_core.InputSignal<boolean>;
|
|
78
|
+
readonly coordinateLabelInterval: _angular_core.InputSignal<number>;
|
|
69
79
|
readonly onNodeClick: _angular_core.OutputEmitterRef<[MouseEvent, Node]>;
|
|
70
80
|
readonly onNodeDoubleClick: _angular_core.OutputEmitterRef<[MouseEvent, Node]>;
|
|
71
81
|
readonly onNodeMouseEnter: _angular_core.OutputEmitterRef<[MouseEvent, Node]>;
|
|
@@ -119,7 +129,7 @@ declare class ReactFlowComponentStore {
|
|
|
119
129
|
height: number;
|
|
120
130
|
}>;
|
|
121
131
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ReactFlowComponentStore, never>;
|
|
122
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ReactFlowComponentStore, never, never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "edges": { "alias": "edges"; "required": false; "isSignal": true; }; "defaultNodes": { "alias": "defaultNodes"; "required": false; "isSignal": true; }; "defaultEdges": { "alias": "defaultEdges"; "required": false; "isSignal": true; }; "defaultEdgeOptions": { "alias": "defaultEdgeOptions"; "required": false; "isSignal": true; }; "nodeTemplates": { "alias": "nodeTemplates"; "required": false; "isSignal": true; }; "nodeTypes": { "alias": "nodeTypes"; "required": false; "isSignal": true; }; "edgeTypes": { "alias": "edgeTypes"; "required": false; "isSignal": true; }; "connectionLineType": { "alias": "connectionLineType"; "required": false; "isSignal": true; }; "connectionLineStyle": { "alias": "connectionLineStyle"; "required": false; "isSignal": true; }; "connectionLineComponent": { "alias": "connectionLineComponent"; "required": false; "isSignal": true; }; "connectionLineContainerStyle": { "alias": "connectionLineContainerStyle"; "required": false; "isSignal": true; }; "connectionMode": { "alias": "connectionMode"; "required": false; "isSignal": true; }; "deleteKeyCode": { "alias": "deleteKeyCode"; "required": false; "isSignal": true; }; "selectionKeyCode": { "alias": "selectionKeyCode"; "required": false; "isSignal": true; }; "selectionOnDrag": { "alias": "selectionOnDrag"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "panActivationKeyCode": { "alias": "panActivationKeyCode"; "required": false; "isSignal": true; }; "multiSelectionKeyCode": { "alias": "multiSelectionKeyCode"; "required": false; "isSignal": true; }; "zoomActivationKeyCode": { "alias": "zoomActivationKeyCode"; "required": false; "isSignal": true; }; "snapToGrid": { "alias": "snapToGrid"; "required": false; "isSignal": true; }; "snapGrid": { "alias": "snapGrid"; "required": false; "isSignal": true; }; "onlyRenderVisibleElements": { "alias": "onlyRenderVisibleElements"; "required": false; "isSignal": true; }; "nodesDraggable": { "alias": "nodesDraggable"; "required": false; "isSignal": true; }; "nodesConnectable": { "alias": "nodesConnectable"; "required": false; "isSignal": true; }; "nodesFocusable": { "alias": "nodesFocusable"; "required": false; "isSignal": true; }; "nodeOrigin": { "alias": "nodeOrigin"; "required": false; "isSignal": true; }; "edgesFocusable": { "alias": "edgesFocusable"; "required": false; "isSignal": true; }; "initNodeOrigin": { "alias": "initNodeOrigin"; "required": false; "isSignal": true; }; "elementsSelectable": { "alias": "elementsSelectable"; "required": false; "isSignal": true; }; "selectNodesOnDrag": { "alias": "selectNodesOnDrag"; "required": false; "isSignal": true; }; "panOnDrag": { "alias": "panOnDrag"; "required": false; "isSignal": true; }; "minZoom": { "alias": "minZoom"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "defaultViewport": { "alias": "defaultViewport"; "required": false; "isSignal": true; }; "translateExtent": { "alias": "translateExtent"; "required": false; "isSignal": true; }; "preventScrolling": { "alias": "preventScrolling"; "required": false; "isSignal": true; }; "nodeExtent": { "alias": "nodeExtent"; "required": false; "isSignal": true; }; "defaultMarkerColor": { "alias": "defaultMarkerColor"; "required": false; "isSignal": true; }; "zoomOnScroll": { "alias": "zoomOnScroll"; "required": false; "isSignal": true; }; "zoomOnPinch": { "alias": "zoomOnPinch"; "required": false; "isSignal": true; }; "panOnScroll": { "alias": "panOnScroll"; "required": false; "isSignal": true; }; "panOnScrollSpeed": { "alias": "panOnScrollSpeed"; "required": false; "isSignal": true; }; "panOnScrollMode": { "alias": "panOnScrollMode"; "required": false; "isSignal": true; }; "zoomOnDoubleClick": { "alias": "zoomOnDoubleClick"; "required": false; "isSignal": true; }; "edgeUpdaterRadius": { "alias": "edgeUpdaterRadius"; "required": false; "isSignal": true; }; "noDragClassName": { "alias": "noDragClassName"; "required": false; "isSignal": true; }; "noWheelClassName": { "alias": "noWheelClassName"; "required": false; "isSignal": true; }; "noPanClassName": { "alias": "noPanClassName"; "required": false; "isSignal": true; }; "fitView": { "alias": "fitView"; "required": false; "isSignal": true; }; "fitViewOptions": { "alias": "fitViewOptions"; "required": false; "isSignal": true; }; "connectOnClick": { "alias": "connectOnClick"; "required": false; "isSignal": true; }; "attributionPosition": { "alias": "attributionPosition"; "required": false; "isSignal": true; }; "proOptions": { "alias": "proOptions"; "required": false; "isSignal": true; }; "elevateNodesOnSelect": { "alias": "elevateNodesOnSelect"; "required": false; "isSignal": true; }; "elevateEdgesOnSelect": { "alias": "elevateEdgesOnSelect"; "required": false; "isSignal": true; }; "disableKeyboardA11y": { "alias": "disableKeyboardA11y"; "required": false; "isSignal": true; }; "autoPanOnNodeDrag": { "alias": "autoPanOnNodeDrag"; "required": false; "isSignal": true; }; "autoPanOnConnect": { "alias": "autoPanOnConnect"; "required": false; "isSignal": true; }; "connectionRadius": { "alias": "connectionRadius"; "required": false; "isSignal": true; }; }, { "onNodeClick": "onNodeClick"; "onNodeDoubleClick": "onNodeDoubleClick"; "onNodeMouseEnter": "onNodeMouseEnter"; "onNodeMouseMove": "onNodeMouseMove"; "onNodeMouseLeave": "onNodeMouseLeave"; "onNodeContextMenu": "onNodeContextMenu"; "onNodeDragStart": "onNodeDragStart"; "onNodeDrag": "onNodeDrag"; "onNodeDragStop": "onNodeDragStop"; "onEdgeClick": "onEdgeClick"; "onEdgeUpdate": "onEdgeUpdate"; "onEdgeContextMenu": "onEdgeContextMenu"; "onEdgeMouseEnter": "onEdgeMouseEnter"; "onEdgeMouseMove": "onEdgeMouseMove"; "onEdgeMouseLeave": "onEdgeMouseLeave"; "onEdgeDoubleClick": "onEdgeDoubleClick"; "onEdgeUpdateStart": "onEdgeUpdateStart"; "onEdgeUpdateEnd": "onEdgeUpdateEnd"; "onNodesChange": "onNodesChange"; "onEdgesChange": "onEdgesChange"; "onNodesDelete": "onNodesDelete"; "onEdgesDelete": "onEdgesDelete"; "onSelectionDragStart": "onSelectionDragStart"; "onSelectionDrag": "onSelectionDrag"; "onSelectionDragStop": "onSelectionDragStop"; "onSelectionStart": "onSelectionStart"; "onSelectionEnd": "onSelectionEnd"; "onSelectionContextMenu": "onSelectionContextMenu"; "onConnect": "onConnect"; "onConnectStart": "onConnectStart"; "onConnectEnd": "onConnectEnd"; "onClickConnectStart": "onClickConnectStart"; "onClickConnectEnd": "onClickConnectEnd"; "onDragOver": "onDragOver"; "onDrop": "onDrop"; "onInit": "onInit"; "onMove": "onMove"; "onMoveStart": "onMoveStart"; "onMoveEnd": "onMoveEnd"; "onSelectionChange": "onSelectionChange"; "onPaneScroll": "onPaneScroll"; "onPaneClick": "onPaneClick"; "onPaneContextMenu": "onPaneContextMenu"; "onPaneMouseEnter": "onPaneMouseEnter"; "onPaneMouseMove": "onPaneMouseMove"; "onPaneMouseLeave": "onPaneMouseLeave"; "onError": "onError"; "onNodeResizeEnd": "onNodeResizeEnd"; }, never, never, true, never>;
|
|
132
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ReactFlowComponentStore, never, never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "edges": { "alias": "edges"; "required": false; "isSignal": true; }; "defaultNodes": { "alias": "defaultNodes"; "required": false; "isSignal": true; }; "defaultEdges": { "alias": "defaultEdges"; "required": false; "isSignal": true; }; "defaultEdgeOptions": { "alias": "defaultEdgeOptions"; "required": false; "isSignal": true; }; "nodeTemplates": { "alias": "nodeTemplates"; "required": false; "isSignal": true; }; "nodeTypes": { "alias": "nodeTypes"; "required": false; "isSignal": true; }; "edgeTypes": { "alias": "edgeTypes"; "required": false; "isSignal": true; }; "connectionLineType": { "alias": "connectionLineType"; "required": false; "isSignal": true; }; "connectionLineStyle": { "alias": "connectionLineStyle"; "required": false; "isSignal": true; }; "connectionLineComponent": { "alias": "connectionLineComponent"; "required": false; "isSignal": true; }; "connectionLineContainerStyle": { "alias": "connectionLineContainerStyle"; "required": false; "isSignal": true; }; "connectionMode": { "alias": "connectionMode"; "required": false; "isSignal": true; }; "deleteKeyCode": { "alias": "deleteKeyCode"; "required": false; "isSignal": true; }; "selectionKeyCode": { "alias": "selectionKeyCode"; "required": false; "isSignal": true; }; "selectionOnDrag": { "alias": "selectionOnDrag"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "panActivationKeyCode": { "alias": "panActivationKeyCode"; "required": false; "isSignal": true; }; "multiSelectionKeyCode": { "alias": "multiSelectionKeyCode"; "required": false; "isSignal": true; }; "zoomActivationKeyCode": { "alias": "zoomActivationKeyCode"; "required": false; "isSignal": true; }; "snapToGrid": { "alias": "snapToGrid"; "required": false; "isSignal": true; }; "snapGrid": { "alias": "snapGrid"; "required": false; "isSignal": true; }; "onlyRenderVisibleElements": { "alias": "onlyRenderVisibleElements"; "required": false; "isSignal": true; }; "nodesDraggable": { "alias": "nodesDraggable"; "required": false; "isSignal": true; }; "nodesConnectable": { "alias": "nodesConnectable"; "required": false; "isSignal": true; }; "nodesFocusable": { "alias": "nodesFocusable"; "required": false; "isSignal": true; }; "nodeOrigin": { "alias": "nodeOrigin"; "required": false; "isSignal": true; }; "edgesFocusable": { "alias": "edgesFocusable"; "required": false; "isSignal": true; }; "initNodeOrigin": { "alias": "initNodeOrigin"; "required": false; "isSignal": true; }; "elementsSelectable": { "alias": "elementsSelectable"; "required": false; "isSignal": true; }; "selectNodesOnDrag": { "alias": "selectNodesOnDrag"; "required": false; "isSignal": true; }; "panOnDrag": { "alias": "panOnDrag"; "required": false; "isSignal": true; }; "minZoom": { "alias": "minZoom"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "defaultViewport": { "alias": "defaultViewport"; "required": false; "isSignal": true; }; "translateExtent": { "alias": "translateExtent"; "required": false; "isSignal": true; }; "preventScrolling": { "alias": "preventScrolling"; "required": false; "isSignal": true; }; "nodeExtent": { "alias": "nodeExtent"; "required": false; "isSignal": true; }; "defaultMarkerColor": { "alias": "defaultMarkerColor"; "required": false; "isSignal": true; }; "zoomOnScroll": { "alias": "zoomOnScroll"; "required": false; "isSignal": true; }; "zoomOnPinch": { "alias": "zoomOnPinch"; "required": false; "isSignal": true; }; "panOnScroll": { "alias": "panOnScroll"; "required": false; "isSignal": true; }; "panOnScrollSpeed": { "alias": "panOnScrollSpeed"; "required": false; "isSignal": true; }; "panOnScrollMode": { "alias": "panOnScrollMode"; "required": false; "isSignal": true; }; "zoomOnDoubleClick": { "alias": "zoomOnDoubleClick"; "required": false; "isSignal": true; }; "edgeUpdaterRadius": { "alias": "edgeUpdaterRadius"; "required": false; "isSignal": true; }; "noDragClassName": { "alias": "noDragClassName"; "required": false; "isSignal": true; }; "noWheelClassName": { "alias": "noWheelClassName"; "required": false; "isSignal": true; }; "noPanClassName": { "alias": "noPanClassName"; "required": false; "isSignal": true; }; "fitView": { "alias": "fitView"; "required": false; "isSignal": true; }; "fitViewOptions": { "alias": "fitViewOptions"; "required": false; "isSignal": true; }; "connectOnClick": { "alias": "connectOnClick"; "required": false; "isSignal": true; }; "attributionPosition": { "alias": "attributionPosition"; "required": false; "isSignal": true; }; "proOptions": { "alias": "proOptions"; "required": false; "isSignal": true; }; "elevateNodesOnSelect": { "alias": "elevateNodesOnSelect"; "required": false; "isSignal": true; }; "elevateEdgesOnSelect": { "alias": "elevateEdgesOnSelect"; "required": false; "isSignal": true; }; "disableKeyboardA11y": { "alias": "disableKeyboardA11y"; "required": false; "isSignal": true; }; "autoPanOnNodeDrag": { "alias": "autoPanOnNodeDrag"; "required": false; "isSignal": true; }; "autoPanOnConnect": { "alias": "autoPanOnConnect"; "required": false; "isSignal": true; }; "connectionRadius": { "alias": "connectionRadius"; "required": false; "isSignal": true; }; "backgroundVariant": { "alias": "backgroundVariant"; "required": false; "isSignal": true; }; "backgroundGap": { "alias": "backgroundGap"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "backgroundSize": { "alias": "backgroundSize"; "required": false; "isSignal": true; }; "showBackground": { "alias": "showBackground"; "required": false; "isSignal": true; }; "showMiniMap": { "alias": "showMiniMap"; "required": false; "isSignal": true; }; "showControls": { "alias": "showControls"; "required": false; "isSignal": true; }; "showCoordinateLabels": { "alias": "showCoordinateLabels"; "required": false; "isSignal": true; }; "coordinateLabelInterval": { "alias": "coordinateLabelInterval"; "required": false; "isSignal": true; }; }, { "onNodeClick": "onNodeClick"; "onNodeDoubleClick": "onNodeDoubleClick"; "onNodeMouseEnter": "onNodeMouseEnter"; "onNodeMouseMove": "onNodeMouseMove"; "onNodeMouseLeave": "onNodeMouseLeave"; "onNodeContextMenu": "onNodeContextMenu"; "onNodeDragStart": "onNodeDragStart"; "onNodeDrag": "onNodeDrag"; "onNodeDragStop": "onNodeDragStop"; "onEdgeClick": "onEdgeClick"; "onEdgeUpdate": "onEdgeUpdate"; "onEdgeContextMenu": "onEdgeContextMenu"; "onEdgeMouseEnter": "onEdgeMouseEnter"; "onEdgeMouseMove": "onEdgeMouseMove"; "onEdgeMouseLeave": "onEdgeMouseLeave"; "onEdgeDoubleClick": "onEdgeDoubleClick"; "onEdgeUpdateStart": "onEdgeUpdateStart"; "onEdgeUpdateEnd": "onEdgeUpdateEnd"; "onNodesChange": "onNodesChange"; "onEdgesChange": "onEdgesChange"; "onNodesDelete": "onNodesDelete"; "onEdgesDelete": "onEdgesDelete"; "onSelectionDragStart": "onSelectionDragStart"; "onSelectionDrag": "onSelectionDrag"; "onSelectionDragStop": "onSelectionDragStop"; "onSelectionStart": "onSelectionStart"; "onSelectionEnd": "onSelectionEnd"; "onSelectionContextMenu": "onSelectionContextMenu"; "onConnect": "onConnect"; "onConnectStart": "onConnectStart"; "onConnectEnd": "onConnectEnd"; "onClickConnectStart": "onClickConnectStart"; "onClickConnectEnd": "onClickConnectEnd"; "onDragOver": "onDragOver"; "onDrop": "onDrop"; "onInit": "onInit"; "onMove": "onMove"; "onMoveStart": "onMoveStart"; "onMoveEnd": "onMoveEnd"; "onSelectionChange": "onSelectionChange"; "onPaneScroll": "onPaneScroll"; "onPaneClick": "onPaneClick"; "onPaneContextMenu": "onPaneContextMenu"; "onPaneMouseEnter": "onPaneMouseEnter"; "onPaneMouseMove": "onPaneMouseMove"; "onPaneMouseLeave": "onPaneMouseLeave"; "onError": "onError"; "onNodeResizeEnd": "onNodeResizeEnd"; }, never, never, true, never>;
|
|
123
133
|
}
|
|
124
134
|
|
|
125
135
|
declare class ReactFlowComponent extends NgAtomicComponent {
|
|
@@ -135,7 +145,7 @@ declare class ReactFlowComponent extends NgAtomicComponent {
|
|
|
135
145
|
readonly nodeTypes: _angular_core.Signal<any>;
|
|
136
146
|
private render;
|
|
137
147
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ReactFlowComponent, never>;
|
|
138
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ReactFlowComponent, "machina-react-flow", never, {}, {}, ["contentNodeTemplates"], ["*"], true, [{ directive: typeof ReactFlowComponentStore; inputs: { "nodes": "nodes"; "edges": "edges"; "defaultNodes": "defaultNodes"; "defaultEdges": "defaultEdges"; "defaultEdgeOptions": "defaultEdgeOptions"; "nodeTemplates": "nodeTemplates"; "nodeTypes": "nodeTypes"; "edgeTypes": "edgeTypes"; "connectionLineType": "connectionLineType"; "connectionLineStyle": "connectionLineStyle"; "connectionLineComponent": "connectionLineComponent"; "connectionLineContainerStyle": "connectionLineContainerStyle"; "connectionMode": "connectionMode"; "deleteKeyCode": "deleteKeyCode"; "selectionKeyCode": "selectionKeyCode"; "selectionOnDrag": "selectionOnDrag"; "selectionMode": "selectionMode"; "panActivationKeyCode": "panActivationKeyCode"; "multiSelectionKeyCode": "multiSelectionKeyCode"; "zoomActivationKeyCode": "zoomActivationKeyCode"; "snapToGrid": "snapToGrid"; "snapGrid": "snapGrid"; "onlyRenderVisibleElements": "onlyRenderVisibleElements"; "nodesDraggable": "nodesDraggable"; "nodesConnectable": "nodesConnectable"; "nodesFocusable": "nodesFocusable"; "nodeOrigin": "nodeOrigin"; "edgesFocusable": "edgesFocusable"; "initNodeOrigin": "initNodeOrigin"; "elementsSelectable": "elementsSelectable"; "selectNodesOnDrag": "selectNodesOnDrag"; "panOnDrag": "panOnDrag"; "minZoom": "minZoom"; "maxZoom": "maxZoom"; "defaultViewport": "defaultViewport"; "translateExtent": "translateExtent"; "preventScrolling": "preventScrolling"; "nodeExtent": "nodeExtent"; "defaultMarkerColor": "defaultMarkerColor"; "zoomOnScroll": "zoomOnScroll"; "zoomOnPinch": "zoomOnPinch"; "panOnScroll": "panOnScroll"; "panOnScrollSpeed": "panOnScrollSpeed"; "panOnScrollMode": "panOnScrollMode"; "zoomOnDoubleClick": "zoomOnDoubleClick"; "edgeUpdaterRadius": "edgeUpdaterRadius"; "noDragClassName": "noDragClassName"; "noWheelClassName": "noWheelClassName"; "noPanClassName": "noPanClassName"; "fitView": "fitView"; "fitViewOptions": "fitViewOptions"; "connectOnClick": "connectOnClick"; "attributionPosition": "attributionPosition"; "proOptions": "proOptions"; "elevateNodesOnSelect": "elevateNodesOnSelect"; "elevateEdgesOnSelect": "elevateEdgesOnSelect"; "disableKeyboardA11y": "disableKeyboardA11y"; "autoPanOnNodeDrag": "autoPanOnNodeDrag"; "autoPanOnConnect": "autoPanOnConnect"; "connectionRadius": "connectionRadius"; }; outputs: { "onNodeClick": "onNodeClick"; "onNodeDoubleClick": "onNodeDoubleClick"; "onNodeMouseEnter": "onNodeMouseEnter"; "onNodeMouseMove": "onNodeMouseMove"; "onNodeMouseLeave": "onNodeMouseLeave"; "onNodeContextMenu": "onNodeContextMenu"; "onNodeDragStart": "onNodeDragStart"; "onNodeDrag": "onNodeDrag"; "onNodeDragStop": "onNodeDragStop"; "onEdgeClick": "onEdgeClick"; "onEdgeUpdate": "onEdgeUpdate"; "onEdgeContextMenu": "onEdgeContextMenu"; "onEdgeMouseEnter": "onEdgeMouseEnter"; "onEdgeMouseMove": "onEdgeMouseMove"; "onEdgeMouseLeave": "onEdgeMouseLeave"; "onEdgeDoubleClick": "onEdgeDoubleClick"; "onEdgeUpdateStart": "onEdgeUpdateStart"; "onEdgeUpdateEnd": "onEdgeUpdateEnd"; "onNodesChange": "onNodesChange"; "onEdgesChange": "onEdgesChange"; "onNodesDelete": "onNodesDelete"; "onEdgesDelete": "onEdgesDelete"; "onSelectionDragStart": "onSelectionDragStart"; "onSelectionDrag": "onSelectionDrag"; "onSelectionDragStop": "onSelectionDragStop"; "onSelectionStart": "onSelectionStart"; "onSelectionEnd": "onSelectionEnd"; "onSelectionContextMenu": "onSelectionContextMenu"; "onConnect": "onConnect"; "onConnectStart": "onConnectStart"; "onConnectEnd": "onConnectEnd"; "onClickConnectStart": "onClickConnectStart"; "onClickConnectEnd": "onClickConnectEnd"; "onDragOver": "onDragOver"; "onDrop": "onDrop"; "onInit": "onInit"; "onMove": "onMove"; "onMoveStart": "onMoveStart"; "onMoveEnd": "onMoveEnd"; "onSelectionChange": "onSelectionChange"; "onPaneScroll": "onPaneScroll"; "onPaneClick": "onPaneClick"; "onPaneContextMenu": "onPaneContextMenu"; "onPaneMouseEnter": "onPaneMouseEnter"; "onPaneMouseMove": "onPaneMouseMove"; "onPaneMouseLeave": "onPaneMouseLeave"; "onError": "onError"; "onNodeResizeEnd": "onNodeResizeEnd"; }; }]>;
|
|
148
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ReactFlowComponent, "machina-react-flow", never, {}, {}, ["contentNodeTemplates"], ["*"], true, [{ directive: typeof ReactFlowComponentStore; inputs: { "nodes": "nodes"; "edges": "edges"; "defaultNodes": "defaultNodes"; "defaultEdges": "defaultEdges"; "defaultEdgeOptions": "defaultEdgeOptions"; "nodeTemplates": "nodeTemplates"; "nodeTypes": "nodeTypes"; "edgeTypes": "edgeTypes"; "connectionLineType": "connectionLineType"; "connectionLineStyle": "connectionLineStyle"; "connectionLineComponent": "connectionLineComponent"; "connectionLineContainerStyle": "connectionLineContainerStyle"; "connectionMode": "connectionMode"; "deleteKeyCode": "deleteKeyCode"; "selectionKeyCode": "selectionKeyCode"; "selectionOnDrag": "selectionOnDrag"; "selectionMode": "selectionMode"; "panActivationKeyCode": "panActivationKeyCode"; "multiSelectionKeyCode": "multiSelectionKeyCode"; "zoomActivationKeyCode": "zoomActivationKeyCode"; "snapToGrid": "snapToGrid"; "snapGrid": "snapGrid"; "onlyRenderVisibleElements": "onlyRenderVisibleElements"; "nodesDraggable": "nodesDraggable"; "nodesConnectable": "nodesConnectable"; "nodesFocusable": "nodesFocusable"; "nodeOrigin": "nodeOrigin"; "edgesFocusable": "edgesFocusable"; "initNodeOrigin": "initNodeOrigin"; "elementsSelectable": "elementsSelectable"; "selectNodesOnDrag": "selectNodesOnDrag"; "panOnDrag": "panOnDrag"; "minZoom": "minZoom"; "maxZoom": "maxZoom"; "defaultViewport": "defaultViewport"; "translateExtent": "translateExtent"; "preventScrolling": "preventScrolling"; "nodeExtent": "nodeExtent"; "defaultMarkerColor": "defaultMarkerColor"; "zoomOnScroll": "zoomOnScroll"; "zoomOnPinch": "zoomOnPinch"; "panOnScroll": "panOnScroll"; "panOnScrollSpeed": "panOnScrollSpeed"; "panOnScrollMode": "panOnScrollMode"; "zoomOnDoubleClick": "zoomOnDoubleClick"; "edgeUpdaterRadius": "edgeUpdaterRadius"; "noDragClassName": "noDragClassName"; "noWheelClassName": "noWheelClassName"; "noPanClassName": "noPanClassName"; "fitView": "fitView"; "fitViewOptions": "fitViewOptions"; "connectOnClick": "connectOnClick"; "attributionPosition": "attributionPosition"; "proOptions": "proOptions"; "elevateNodesOnSelect": "elevateNodesOnSelect"; "elevateEdgesOnSelect": "elevateEdgesOnSelect"; "disableKeyboardA11y": "disableKeyboardA11y"; "autoPanOnNodeDrag": "autoPanOnNodeDrag"; "autoPanOnConnect": "autoPanOnConnect"; "connectionRadius": "connectionRadius"; "backgroundVariant": "backgroundVariant"; "backgroundGap": "backgroundGap"; "backgroundColor": "backgroundColor"; "backgroundSize": "backgroundSize"; "showBackground": "showBackground"; "showMiniMap": "showMiniMap"; "showControls": "showControls"; "showCoordinateLabels": "showCoordinateLabels"; "coordinateLabelInterval": "coordinateLabelInterval"; }; outputs: { "onNodeClick": "onNodeClick"; "onNodeDoubleClick": "onNodeDoubleClick"; "onNodeMouseEnter": "onNodeMouseEnter"; "onNodeMouseMove": "onNodeMouseMove"; "onNodeMouseLeave": "onNodeMouseLeave"; "onNodeContextMenu": "onNodeContextMenu"; "onNodeDragStart": "onNodeDragStart"; "onNodeDrag": "onNodeDrag"; "onNodeDragStop": "onNodeDragStop"; "onEdgeClick": "onEdgeClick"; "onEdgeUpdate": "onEdgeUpdate"; "onEdgeContextMenu": "onEdgeContextMenu"; "onEdgeMouseEnter": "onEdgeMouseEnter"; "onEdgeMouseMove": "onEdgeMouseMove"; "onEdgeMouseLeave": "onEdgeMouseLeave"; "onEdgeDoubleClick": "onEdgeDoubleClick"; "onEdgeUpdateStart": "onEdgeUpdateStart"; "onEdgeUpdateEnd": "onEdgeUpdateEnd"; "onNodesChange": "onNodesChange"; "onEdgesChange": "onEdgesChange"; "onNodesDelete": "onNodesDelete"; "onEdgesDelete": "onEdgesDelete"; "onSelectionDragStart": "onSelectionDragStart"; "onSelectionDrag": "onSelectionDrag"; "onSelectionDragStop": "onSelectionDragStop"; "onSelectionStart": "onSelectionStart"; "onSelectionEnd": "onSelectionEnd"; "onSelectionContextMenu": "onSelectionContextMenu"; "onConnect": "onConnect"; "onConnectStart": "onConnectStart"; "onConnectEnd": "onConnectEnd"; "onClickConnectStart": "onClickConnectStart"; "onClickConnectEnd": "onClickConnectEnd"; "onDragOver": "onDragOver"; "onDrop": "onDrop"; "onInit": "onInit"; "onMove": "onMove"; "onMoveStart": "onMoveStart"; "onMoveEnd": "onMoveEnd"; "onSelectionChange": "onSelectionChange"; "onPaneScroll": "onPaneScroll"; "onPaneClick": "onPaneClick"; "onPaneContextMenu": "onPaneContextMenu"; "onPaneMouseEnter": "onPaneMouseEnter"; "onPaneMouseMove": "onPaneMouseMove"; "onPaneMouseLeave": "onPaneMouseLeave"; "onError": "onError"; "onNodeResizeEnd": "onNodeResizeEnd"; }; }]>;
|
|
139
149
|
}
|
|
140
150
|
|
|
141
151
|
interface GroupNodeData {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sources":["../../../../../../packages/@xxmachina/components/src/lib/extras/flow/react-flow/react-flow.store.ts","../../../../../../packages/@xxmachina/components/src/lib/extras/flow/react-flow/react-flow.component.ts","../../../../../../packages/@xxmachina/components/src/lib/extras/flow/nodes/group-node.tsx","../../../../../../packages/@xxmachina/components/src/lib/extras/flow/nodes/node.component.ts","../../../../../../packages/@xxmachina/components/src/lib/extras/flow/nodes/node.tsx","../../../../../../packages/@xxmachina/components/src/lib/extras/flow/nodes/template-node.tsx","../../../../../../packages/@xxmachina/components/src/lib/extras/flow/nodes/index.ts","../../../../../../packages/@xxmachina/components/src/lib/extras/flow/flow-node.directive.ts"],"sourcesContent":[null,null,null,null,null,null,null,null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sources":["../../../../../../packages/@xxmachina/components/src/lib/extras/flow/react-flow/react-flow.store.ts","../../../../../../packages/@xxmachina/components/src/lib/extras/flow/react-flow/react-flow.component.ts","../../../../../../packages/@xxmachina/components/src/lib/extras/flow/nodes/group-node.tsx","../../../../../../packages/@xxmachina/components/src/lib/extras/flow/nodes/node.component.ts","../../../../../../packages/@xxmachina/components/src/lib/extras/flow/nodes/node.tsx","../../../../../../packages/@xxmachina/components/src/lib/extras/flow/nodes/template-node.tsx","../../../../../../packages/@xxmachina/components/src/lib/extras/flow/nodes/index.ts","../../../../../../packages/@xxmachina/components/src/lib/extras/flow/flow-node.directive.ts"],"sourcesContent":[null,null,null,null,null,null,null,null],"names":[],"mappings":";;;;;;;;AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+HE;;;;AAA8F;;;AAC/F;;AC7HD;AA8CE;AACA;AACA;;;;;;;;AA0CA;;;AAuBD;;;;;;;AClHA;;;;;;ACDA;;ACCD;;ACHA;AACE;AACD;AAED;;;;;;ACNA;;;;;;;;;;ACDA;AAOqB;;AAAA;;;AACpB;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sources":["../../../../../../packages/@xxmachina/components/src/lib/features/query/actions.ts","../../../../../../packages/@xxmachina/components/src/lib/features/query/resolvers/base/base.resolver.ts","../../../../../../packages/@xxmachina/components/src/lib/features/query/resolvers/graphql/graphql.resolver.ts","../../../../../../packages/@xxmachina/components/src/lib/features/query/query.feature.ts","../../../../../../packages/@xxmachina/components/src/lib/features/query/graphql/schema/schema.feature.ts","../../../../../../packages/@xxmachina/components/src/lib/features/query/graphql/variables-form/variables-form.feature.ts","../../../../../../packages/@xxmachina/components/src/lib/features/query/update/update.feature.ts"],"sourcesContent":[null,null,null,null,null,null,null],"names":[
|
|
1
|
+
{"version":3,"file":"index.d.ts","sources":["../../../../../../packages/@xxmachina/components/src/lib/features/query/actions.ts","../../../../../../packages/@xxmachina/components/src/lib/features/query/resolvers/base/base.resolver.ts","../../../../../../packages/@xxmachina/components/src/lib/features/query/resolvers/graphql/graphql.resolver.ts","../../../../../../packages/@xxmachina/components/src/lib/features/query/query.feature.ts","../../../../../../packages/@xxmachina/components/src/lib/features/query/graphql/schema/schema.feature.ts","../../../../../../packages/@xxmachina/components/src/lib/features/query/graphql/variables-form/variables-form.feature.ts","../../../../../../packages/@xxmachina/components/src/lib/features/query/update/update.feature.ts"],"sourcesContent":[null,null,null,null,null,null,null],"names":[],"mappings":";;;;;;;;;;;;;;AAAA;AACE;AACA;AACA;AACD;;;ACCC;AACD;;AAGC;;AAEG;AACH;AAEA;;AAEG;;AAEJ;AAED;AAEA;;;;;;;;;;AAUG;AACH;;AC3BA;;;AAGG;AACH;AAMA;AAEE;AAEA;;;;AAUD;;ACVD;AAEE;AAEA;AASA;AAQA;;AA4BA;AACA;AACA;AACA;AAEA;AACA;;;;;;;;;;;;AAAiD;AAEjD;;;;;;;;;;;;;AAC0E;AAC1E;;;;;;;;;;;;AAA+C;;;;;AA0C/C;AAAoG;;AAAkB;AAAwB;;AAU9I;AAIA;;;AAeD;;AC7ID;AAEE;AACA;AAEA;;;;AASD;;ACfD;AAEE;AACA;AAEA;AAGA;;AAMA;;;;;;AAwBD;;ACrCD;AAEE;AASA;AACA;AACA;;;;AAoBD;;;"}
|
|
@@ -2,11 +2,60 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { input, output, Directive, Component, inject, EnvironmentInjector, createComponent, Injectable, Input, ElementRef, ViewContainerRef, contentChildren, effect, computed, ViewEncapsulation } from '@angular/core';
|
|
3
3
|
import { NgAtomicComponent } from '@ng-atomic/core';
|
|
4
4
|
import * as React from 'react';
|
|
5
|
-
import React__default, { useRef, useEffect, memo } from 'react';
|
|
5
|
+
import React__default, { useMemo, useRef, useEffect, memo } from 'react';
|
|
6
6
|
import { createRoot } from 'react-dom/client';
|
|
7
|
-
import ReactFlow, {
|
|
7
|
+
import ReactFlow, { useViewport, BackgroundVariant, MiniMap, Controls, Background, ReactFlowProvider, NodeResizer, Handle, Position } from 'reactflow';
|
|
8
8
|
import { CommonModule } from '@angular/common';
|
|
9
9
|
|
|
10
|
+
const CoordinateLabels = ({ gap, interval }) => {
|
|
11
|
+
const { x, y, zoom } = useViewport();
|
|
12
|
+
const labels = useMemo(() => {
|
|
13
|
+
const result = [];
|
|
14
|
+
// Calculate visible range based on viewport (assume 2000x1500 visible area)
|
|
15
|
+
const viewWidth = 2000 / zoom;
|
|
16
|
+
const viewHeight = 1500 / zoom;
|
|
17
|
+
const startX = Math.floor(-x / zoom / gap / interval) * interval;
|
|
18
|
+
const startY = Math.floor(-y / zoom / gap / interval) * interval;
|
|
19
|
+
const endX = Math.ceil((-x / zoom + viewWidth) / gap / interval) * interval;
|
|
20
|
+
const endY = Math.ceil((-y / zoom + viewHeight) / gap / interval) * interval;
|
|
21
|
+
for (let gx = startX; gx <= endX; gx += interval) {
|
|
22
|
+
for (let gy = startY; gy <= endY; gy += interval) {
|
|
23
|
+
const pixelX = gx * gap * zoom + x;
|
|
24
|
+
const pixelY = gy * gap * zoom + y;
|
|
25
|
+
result.push({
|
|
26
|
+
key: `${gx},${gy}`,
|
|
27
|
+
label: `${gx},${gy}`,
|
|
28
|
+
left: pixelX,
|
|
29
|
+
top: pixelY,
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
return result;
|
|
34
|
+
}, [x, y, zoom, gap, interval]);
|
|
35
|
+
return React.createElement('div', {
|
|
36
|
+
style: {
|
|
37
|
+
position: 'absolute',
|
|
38
|
+
top: 0,
|
|
39
|
+
left: 0,
|
|
40
|
+
width: '100%',
|
|
41
|
+
height: '100%',
|
|
42
|
+
pointerEvents: 'none',
|
|
43
|
+
overflow: 'hidden',
|
|
44
|
+
}
|
|
45
|
+
}, labels.map(({ key, label, left, top }) => React.createElement('span', {
|
|
46
|
+
key,
|
|
47
|
+
style: {
|
|
48
|
+
position: 'absolute',
|
|
49
|
+
left: `${left}px`,
|
|
50
|
+
top: `${top}px`,
|
|
51
|
+
fontSize: '9px',
|
|
52
|
+
fontFamily: "'SF Mono', Monaco, monospace",
|
|
53
|
+
color: 'rgba(100, 100, 100, 0.6)',
|
|
54
|
+
transform: 'translate(2px, 2px)',
|
|
55
|
+
whiteSpace: 'nowrap',
|
|
56
|
+
}
|
|
57
|
+
}, label)));
|
|
58
|
+
};
|
|
10
59
|
const ReactFlowWrapperComponent = ({ props }) => {
|
|
11
60
|
const minimapStyle = {
|
|
12
61
|
height: 120,
|
|
@@ -18,15 +67,52 @@ const ReactFlowWrapperComponent = ({ props }) => {
|
|
|
18
67
|
elementsSelectable: props.elementsSelectable !== false,
|
|
19
68
|
proOptions: { hideAttribution: true, ...props.proOptions },
|
|
20
69
|
};
|
|
21
|
-
|
|
70
|
+
// Background settings with defaults
|
|
71
|
+
const showBackground = props.showBackground !== false;
|
|
72
|
+
const backgroundVariant = props.backgroundVariant ?? BackgroundVariant.Dots;
|
|
73
|
+
const backgroundGap = props.backgroundGap ?? 16;
|
|
74
|
+
const backgroundSize = props.backgroundSize ?? 1;
|
|
75
|
+
const backgroundColor = props.backgroundColor;
|
|
76
|
+
// Show minimap and controls by default
|
|
77
|
+
const showMiniMap = props.showMiniMap !== false;
|
|
78
|
+
const showControls = props.showControls !== false;
|
|
79
|
+
const showCoordinateLabels = props.showCoordinateLabels === true;
|
|
80
|
+
const coordinateLabelInterval = props.coordinateLabelInterval ?? 1;
|
|
81
|
+
const children = [];
|
|
82
|
+
if (showMiniMap) {
|
|
83
|
+
children.push(React.createElement(MiniMap, { key: 'minimap', style: minimapStyle, zoomable: true, pannable: true }));
|
|
84
|
+
}
|
|
85
|
+
if (showControls) {
|
|
86
|
+
children.push(React.createElement(Controls, { key: 'controls' }));
|
|
87
|
+
}
|
|
88
|
+
if (showBackground) {
|
|
89
|
+
const bgProps = { key: 'background', variant: backgroundVariant, gap: backgroundGap, size: backgroundSize };
|
|
90
|
+
if (backgroundColor) {
|
|
91
|
+
bgProps.color = backgroundColor;
|
|
92
|
+
}
|
|
93
|
+
children.push(React.createElement(Background, bgProps));
|
|
94
|
+
}
|
|
95
|
+
if (showCoordinateLabels) {
|
|
96
|
+
const gap = typeof backgroundGap === 'number' ? backgroundGap : backgroundGap[0];
|
|
97
|
+
children.push(React.createElement(CoordinateLabels, { key: 'coordinates', gap, interval: coordinateLabelInterval }));
|
|
98
|
+
}
|
|
99
|
+
return React.createElement(ReactFlowProvider, null, React.createElement(ReactFlow, mergedProps, ...children));
|
|
22
100
|
};
|
|
23
101
|
// Memoize ReactFlowWrapper to prevent unnecessary re-renders
|
|
24
|
-
//
|
|
102
|
+
// Re-render when nodes, edges, or background/coordinate settings change
|
|
25
103
|
const ReactFlowWrapper = React.memo(ReactFlowWrapperComponent, (prevProps, nextProps) => {
|
|
26
104
|
// Return true to skip re-render (props are equal)
|
|
27
105
|
// Return false to re-render (props have changed)
|
|
28
106
|
return (prevProps.props.nodes === nextProps.props.nodes &&
|
|
29
|
-
prevProps.props.edges === nextProps.props.edges
|
|
107
|
+
prevProps.props.edges === nextProps.props.edges &&
|
|
108
|
+
prevProps.props.backgroundVariant === nextProps.props.backgroundVariant &&
|
|
109
|
+
prevProps.props.backgroundGap === nextProps.props.backgroundGap &&
|
|
110
|
+
prevProps.props.backgroundColor === nextProps.props.backgroundColor &&
|
|
111
|
+
prevProps.props.showBackground === nextProps.props.showBackground &&
|
|
112
|
+
prevProps.props.showMiniMap === nextProps.props.showMiniMap &&
|
|
113
|
+
prevProps.props.showControls === nextProps.props.showControls &&
|
|
114
|
+
prevProps.props.showCoordinateLabels === nextProps.props.showCoordinateLabels &&
|
|
115
|
+
prevProps.props.coordinateLabelInterval === nextProps.props.coordinateLabelInterval);
|
|
30
116
|
});
|
|
31
117
|
|
|
32
118
|
class ReactFlowComponentStore {
|
|
@@ -93,6 +179,16 @@ class ReactFlowComponentStore {
|
|
|
93
179
|
autoPanOnNodeDrag = input();
|
|
94
180
|
autoPanOnConnect = input();
|
|
95
181
|
connectionRadius = input();
|
|
182
|
+
// Background configuration
|
|
183
|
+
backgroundVariant = input();
|
|
184
|
+
backgroundGap = input();
|
|
185
|
+
backgroundColor = input();
|
|
186
|
+
backgroundSize = input();
|
|
187
|
+
showBackground = input();
|
|
188
|
+
showMiniMap = input();
|
|
189
|
+
showControls = input();
|
|
190
|
+
showCoordinateLabels = input();
|
|
191
|
+
coordinateLabelInterval = input();
|
|
96
192
|
// Signal outputs for events
|
|
97
193
|
onNodeClick = output();
|
|
98
194
|
onNodeDoubleClick = output();
|
|
@@ -143,7 +239,7 @@ class ReactFlowComponentStore {
|
|
|
143
239
|
onError = output();
|
|
144
240
|
onNodeResizeEnd = output();
|
|
145
241
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ReactFlowComponentStore, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
146
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.5", type: ReactFlowComponentStore, isStandalone: true, inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: true, isRequired: false, transformFunction: null }, defaultNodes: { classPropertyName: "defaultNodes", publicName: "defaultNodes", isSignal: true, isRequired: false, transformFunction: null }, defaultEdges: { classPropertyName: "defaultEdges", publicName: "defaultEdges", isSignal: true, isRequired: false, transformFunction: null }, defaultEdgeOptions: { classPropertyName: "defaultEdgeOptions", publicName: "defaultEdgeOptions", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplates: { classPropertyName: "nodeTemplates", publicName: "nodeTemplates", isSignal: true, isRequired: false, transformFunction: null }, nodeTypes: { classPropertyName: "nodeTypes", publicName: "nodeTypes", isSignal: true, isRequired: false, transformFunction: null }, edgeTypes: { classPropertyName: "edgeTypes", publicName: "edgeTypes", isSignal: true, isRequired: false, transformFunction: null }, connectionLineType: { classPropertyName: "connectionLineType", publicName: "connectionLineType", isSignal: true, isRequired: false, transformFunction: null }, connectionLineStyle: { classPropertyName: "connectionLineStyle", publicName: "connectionLineStyle", isSignal: true, isRequired: false, transformFunction: null }, connectionLineComponent: { classPropertyName: "connectionLineComponent", publicName: "connectionLineComponent", isSignal: true, isRequired: false, transformFunction: null }, connectionLineContainerStyle: { classPropertyName: "connectionLineContainerStyle", publicName: "connectionLineContainerStyle", isSignal: true, isRequired: false, transformFunction: null }, connectionMode: { classPropertyName: "connectionMode", publicName: "connectionMode", isSignal: true, isRequired: false, transformFunction: null }, deleteKeyCode: { classPropertyName: "deleteKeyCode", publicName: "deleteKeyCode", isSignal: true, isRequired: false, transformFunction: null }, selectionKeyCode: { classPropertyName: "selectionKeyCode", publicName: "selectionKeyCode", isSignal: true, isRequired: false, transformFunction: null }, selectionOnDrag: { classPropertyName: "selectionOnDrag", publicName: "selectionOnDrag", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, panActivationKeyCode: { classPropertyName: "panActivationKeyCode", publicName: "panActivationKeyCode", isSignal: true, isRequired: false, transformFunction: null }, multiSelectionKeyCode: { classPropertyName: "multiSelectionKeyCode", publicName: "multiSelectionKeyCode", isSignal: true, isRequired: false, transformFunction: null }, zoomActivationKeyCode: { classPropertyName: "zoomActivationKeyCode", publicName: "zoomActivationKeyCode", isSignal: true, isRequired: false, transformFunction: null }, snapToGrid: { classPropertyName: "snapToGrid", publicName: "snapToGrid", isSignal: true, isRequired: false, transformFunction: null }, snapGrid: { classPropertyName: "snapGrid", publicName: "snapGrid", isSignal: true, isRequired: false, transformFunction: null }, onlyRenderVisibleElements: { classPropertyName: "onlyRenderVisibleElements", publicName: "onlyRenderVisibleElements", isSignal: true, isRequired: false, transformFunction: null }, nodesDraggable: { classPropertyName: "nodesDraggable", publicName: "nodesDraggable", isSignal: true, isRequired: false, transformFunction: null }, nodesConnectable: { classPropertyName: "nodesConnectable", publicName: "nodesConnectable", isSignal: true, isRequired: false, transformFunction: null }, nodesFocusable: { classPropertyName: "nodesFocusable", publicName: "nodesFocusable", isSignal: true, isRequired: false, transformFunction: null }, nodeOrigin: { classPropertyName: "nodeOrigin", publicName: "nodeOrigin", isSignal: true, isRequired: false, transformFunction: null }, edgesFocusable: { classPropertyName: "edgesFocusable", publicName: "edgesFocusable", isSignal: true, isRequired: false, transformFunction: null }, initNodeOrigin: { classPropertyName: "initNodeOrigin", publicName: "initNodeOrigin", isSignal: true, isRequired: false, transformFunction: null }, elementsSelectable: { classPropertyName: "elementsSelectable", publicName: "elementsSelectable", isSignal: true, isRequired: false, transformFunction: null }, selectNodesOnDrag: { classPropertyName: "selectNodesOnDrag", publicName: "selectNodesOnDrag", isSignal: true, isRequired: false, transformFunction: null }, panOnDrag: { classPropertyName: "panOnDrag", publicName: "panOnDrag", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, defaultViewport: { classPropertyName: "defaultViewport", publicName: "defaultViewport", isSignal: true, isRequired: false, transformFunction: null }, translateExtent: { classPropertyName: "translateExtent", publicName: "translateExtent", isSignal: true, isRequired: false, transformFunction: null }, preventScrolling: { classPropertyName: "preventScrolling", publicName: "preventScrolling", isSignal: true, isRequired: false, transformFunction: null }, nodeExtent: { classPropertyName: "nodeExtent", publicName: "nodeExtent", isSignal: true, isRequired: false, transformFunction: null }, defaultMarkerColor: { classPropertyName: "defaultMarkerColor", publicName: "defaultMarkerColor", isSignal: true, isRequired: false, transformFunction: null }, zoomOnScroll: { classPropertyName: "zoomOnScroll", publicName: "zoomOnScroll", isSignal: true, isRequired: false, transformFunction: null }, zoomOnPinch: { classPropertyName: "zoomOnPinch", publicName: "zoomOnPinch", isSignal: true, isRequired: false, transformFunction: null }, panOnScroll: { classPropertyName: "panOnScroll", publicName: "panOnScroll", isSignal: true, isRequired: false, transformFunction: null }, panOnScrollSpeed: { classPropertyName: "panOnScrollSpeed", publicName: "panOnScrollSpeed", isSignal: true, isRequired: false, transformFunction: null }, panOnScrollMode: { classPropertyName: "panOnScrollMode", publicName: "panOnScrollMode", isSignal: true, isRequired: false, transformFunction: null }, zoomOnDoubleClick: { classPropertyName: "zoomOnDoubleClick", publicName: "zoomOnDoubleClick", isSignal: true, isRequired: false, transformFunction: null }, edgeUpdaterRadius: { classPropertyName: "edgeUpdaterRadius", publicName: "edgeUpdaterRadius", isSignal: true, isRequired: false, transformFunction: null }, noDragClassName: { classPropertyName: "noDragClassName", publicName: "noDragClassName", isSignal: true, isRequired: false, transformFunction: null }, noWheelClassName: { classPropertyName: "noWheelClassName", publicName: "noWheelClassName", isSignal: true, isRequired: false, transformFunction: null }, noPanClassName: { classPropertyName: "noPanClassName", publicName: "noPanClassName", isSignal: true, isRequired: false, transformFunction: null }, fitView: { classPropertyName: "fitView", publicName: "fitView", isSignal: true, isRequired: false, transformFunction: null }, fitViewOptions: { classPropertyName: "fitViewOptions", publicName: "fitViewOptions", isSignal: true, isRequired: false, transformFunction: null }, connectOnClick: { classPropertyName: "connectOnClick", publicName: "connectOnClick", isSignal: true, isRequired: false, transformFunction: null }, attributionPosition: { classPropertyName: "attributionPosition", publicName: "attributionPosition", isSignal: true, isRequired: false, transformFunction: null }, proOptions: { classPropertyName: "proOptions", publicName: "proOptions", isSignal: true, isRequired: false, transformFunction: null }, elevateNodesOnSelect: { classPropertyName: "elevateNodesOnSelect", publicName: "elevateNodesOnSelect", isSignal: true, isRequired: false, transformFunction: null }, elevateEdgesOnSelect: { classPropertyName: "elevateEdgesOnSelect", publicName: "elevateEdgesOnSelect", isSignal: true, isRequired: false, transformFunction: null }, disableKeyboardA11y: { classPropertyName: "disableKeyboardA11y", publicName: "disableKeyboardA11y", isSignal: true, isRequired: false, transformFunction: null }, autoPanOnNodeDrag: { classPropertyName: "autoPanOnNodeDrag", publicName: "autoPanOnNodeDrag", isSignal: true, isRequired: false, transformFunction: null }, autoPanOnConnect: { classPropertyName: "autoPanOnConnect", publicName: "autoPanOnConnect", isSignal: true, isRequired: false, transformFunction: null }, connectionRadius: { classPropertyName: "connectionRadius", publicName: "connectionRadius", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onNodeClick: "onNodeClick", onNodeDoubleClick: "onNodeDoubleClick", onNodeMouseEnter: "onNodeMouseEnter", onNodeMouseMove: "onNodeMouseMove", onNodeMouseLeave: "onNodeMouseLeave", onNodeContextMenu: "onNodeContextMenu", onNodeDragStart: "onNodeDragStart", onNodeDrag: "onNodeDrag", onNodeDragStop: "onNodeDragStop", onEdgeClick: "onEdgeClick", onEdgeUpdate: "onEdgeUpdate", onEdgeContextMenu: "onEdgeContextMenu", onEdgeMouseEnter: "onEdgeMouseEnter", onEdgeMouseMove: "onEdgeMouseMove", onEdgeMouseLeave: "onEdgeMouseLeave", onEdgeDoubleClick: "onEdgeDoubleClick", onEdgeUpdateStart: "onEdgeUpdateStart", onEdgeUpdateEnd: "onEdgeUpdateEnd", onNodesChange: "onNodesChange", onEdgesChange: "onEdgesChange", onNodesDelete: "onNodesDelete", onEdgesDelete: "onEdgesDelete", onSelectionDragStart: "onSelectionDragStart", onSelectionDrag: "onSelectionDrag", onSelectionDragStop: "onSelectionDragStop", onSelectionStart: "onSelectionStart", onSelectionEnd: "onSelectionEnd", onSelectionContextMenu: "onSelectionContextMenu", onConnect: "onConnect", onConnectStart: "onConnectStart", onConnectEnd: "onConnectEnd", onClickConnectStart: "onClickConnectStart", onClickConnectEnd: "onClickConnectEnd", onDragOver: "onDragOver", onDrop: "onDrop", onInit: "onInit", onMove: "onMove", onMoveStart: "onMoveStart", onMoveEnd: "onMoveEnd", onSelectionChange: "onSelectionChange", onPaneScroll: "onPaneScroll", onPaneClick: "onPaneClick", onPaneContextMenu: "onPaneContextMenu", onPaneMouseEnter: "onPaneMouseEnter", onPaneMouseMove: "onPaneMouseMove", onPaneMouseLeave: "onPaneMouseLeave", onError: "onError", onNodeResizeEnd: "onNodeResizeEnd" }, ngImport: i0 });
|
|
242
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.5", type: ReactFlowComponentStore, isStandalone: true, inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, edges: { classPropertyName: "edges", publicName: "edges", isSignal: true, isRequired: false, transformFunction: null }, defaultNodes: { classPropertyName: "defaultNodes", publicName: "defaultNodes", isSignal: true, isRequired: false, transformFunction: null }, defaultEdges: { classPropertyName: "defaultEdges", publicName: "defaultEdges", isSignal: true, isRequired: false, transformFunction: null }, defaultEdgeOptions: { classPropertyName: "defaultEdgeOptions", publicName: "defaultEdgeOptions", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplates: { classPropertyName: "nodeTemplates", publicName: "nodeTemplates", isSignal: true, isRequired: false, transformFunction: null }, nodeTypes: { classPropertyName: "nodeTypes", publicName: "nodeTypes", isSignal: true, isRequired: false, transformFunction: null }, edgeTypes: { classPropertyName: "edgeTypes", publicName: "edgeTypes", isSignal: true, isRequired: false, transformFunction: null }, connectionLineType: { classPropertyName: "connectionLineType", publicName: "connectionLineType", isSignal: true, isRequired: false, transformFunction: null }, connectionLineStyle: { classPropertyName: "connectionLineStyle", publicName: "connectionLineStyle", isSignal: true, isRequired: false, transformFunction: null }, connectionLineComponent: { classPropertyName: "connectionLineComponent", publicName: "connectionLineComponent", isSignal: true, isRequired: false, transformFunction: null }, connectionLineContainerStyle: { classPropertyName: "connectionLineContainerStyle", publicName: "connectionLineContainerStyle", isSignal: true, isRequired: false, transformFunction: null }, connectionMode: { classPropertyName: "connectionMode", publicName: "connectionMode", isSignal: true, isRequired: false, transformFunction: null }, deleteKeyCode: { classPropertyName: "deleteKeyCode", publicName: "deleteKeyCode", isSignal: true, isRequired: false, transformFunction: null }, selectionKeyCode: { classPropertyName: "selectionKeyCode", publicName: "selectionKeyCode", isSignal: true, isRequired: false, transformFunction: null }, selectionOnDrag: { classPropertyName: "selectionOnDrag", publicName: "selectionOnDrag", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, panActivationKeyCode: { classPropertyName: "panActivationKeyCode", publicName: "panActivationKeyCode", isSignal: true, isRequired: false, transformFunction: null }, multiSelectionKeyCode: { classPropertyName: "multiSelectionKeyCode", publicName: "multiSelectionKeyCode", isSignal: true, isRequired: false, transformFunction: null }, zoomActivationKeyCode: { classPropertyName: "zoomActivationKeyCode", publicName: "zoomActivationKeyCode", isSignal: true, isRequired: false, transformFunction: null }, snapToGrid: { classPropertyName: "snapToGrid", publicName: "snapToGrid", isSignal: true, isRequired: false, transformFunction: null }, snapGrid: { classPropertyName: "snapGrid", publicName: "snapGrid", isSignal: true, isRequired: false, transformFunction: null }, onlyRenderVisibleElements: { classPropertyName: "onlyRenderVisibleElements", publicName: "onlyRenderVisibleElements", isSignal: true, isRequired: false, transformFunction: null }, nodesDraggable: { classPropertyName: "nodesDraggable", publicName: "nodesDraggable", isSignal: true, isRequired: false, transformFunction: null }, nodesConnectable: { classPropertyName: "nodesConnectable", publicName: "nodesConnectable", isSignal: true, isRequired: false, transformFunction: null }, nodesFocusable: { classPropertyName: "nodesFocusable", publicName: "nodesFocusable", isSignal: true, isRequired: false, transformFunction: null }, nodeOrigin: { classPropertyName: "nodeOrigin", publicName: "nodeOrigin", isSignal: true, isRequired: false, transformFunction: null }, edgesFocusable: { classPropertyName: "edgesFocusable", publicName: "edgesFocusable", isSignal: true, isRequired: false, transformFunction: null }, initNodeOrigin: { classPropertyName: "initNodeOrigin", publicName: "initNodeOrigin", isSignal: true, isRequired: false, transformFunction: null }, elementsSelectable: { classPropertyName: "elementsSelectable", publicName: "elementsSelectable", isSignal: true, isRequired: false, transformFunction: null }, selectNodesOnDrag: { classPropertyName: "selectNodesOnDrag", publicName: "selectNodesOnDrag", isSignal: true, isRequired: false, transformFunction: null }, panOnDrag: { classPropertyName: "panOnDrag", publicName: "panOnDrag", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, defaultViewport: { classPropertyName: "defaultViewport", publicName: "defaultViewport", isSignal: true, isRequired: false, transformFunction: null }, translateExtent: { classPropertyName: "translateExtent", publicName: "translateExtent", isSignal: true, isRequired: false, transformFunction: null }, preventScrolling: { classPropertyName: "preventScrolling", publicName: "preventScrolling", isSignal: true, isRequired: false, transformFunction: null }, nodeExtent: { classPropertyName: "nodeExtent", publicName: "nodeExtent", isSignal: true, isRequired: false, transformFunction: null }, defaultMarkerColor: { classPropertyName: "defaultMarkerColor", publicName: "defaultMarkerColor", isSignal: true, isRequired: false, transformFunction: null }, zoomOnScroll: { classPropertyName: "zoomOnScroll", publicName: "zoomOnScroll", isSignal: true, isRequired: false, transformFunction: null }, zoomOnPinch: { classPropertyName: "zoomOnPinch", publicName: "zoomOnPinch", isSignal: true, isRequired: false, transformFunction: null }, panOnScroll: { classPropertyName: "panOnScroll", publicName: "panOnScroll", isSignal: true, isRequired: false, transformFunction: null }, panOnScrollSpeed: { classPropertyName: "panOnScrollSpeed", publicName: "panOnScrollSpeed", isSignal: true, isRequired: false, transformFunction: null }, panOnScrollMode: { classPropertyName: "panOnScrollMode", publicName: "panOnScrollMode", isSignal: true, isRequired: false, transformFunction: null }, zoomOnDoubleClick: { classPropertyName: "zoomOnDoubleClick", publicName: "zoomOnDoubleClick", isSignal: true, isRequired: false, transformFunction: null }, edgeUpdaterRadius: { classPropertyName: "edgeUpdaterRadius", publicName: "edgeUpdaterRadius", isSignal: true, isRequired: false, transformFunction: null }, noDragClassName: { classPropertyName: "noDragClassName", publicName: "noDragClassName", isSignal: true, isRequired: false, transformFunction: null }, noWheelClassName: { classPropertyName: "noWheelClassName", publicName: "noWheelClassName", isSignal: true, isRequired: false, transformFunction: null }, noPanClassName: { classPropertyName: "noPanClassName", publicName: "noPanClassName", isSignal: true, isRequired: false, transformFunction: null }, fitView: { classPropertyName: "fitView", publicName: "fitView", isSignal: true, isRequired: false, transformFunction: null }, fitViewOptions: { classPropertyName: "fitViewOptions", publicName: "fitViewOptions", isSignal: true, isRequired: false, transformFunction: null }, connectOnClick: { classPropertyName: "connectOnClick", publicName: "connectOnClick", isSignal: true, isRequired: false, transformFunction: null }, attributionPosition: { classPropertyName: "attributionPosition", publicName: "attributionPosition", isSignal: true, isRequired: false, transformFunction: null }, proOptions: { classPropertyName: "proOptions", publicName: "proOptions", isSignal: true, isRequired: false, transformFunction: null }, elevateNodesOnSelect: { classPropertyName: "elevateNodesOnSelect", publicName: "elevateNodesOnSelect", isSignal: true, isRequired: false, transformFunction: null }, elevateEdgesOnSelect: { classPropertyName: "elevateEdgesOnSelect", publicName: "elevateEdgesOnSelect", isSignal: true, isRequired: false, transformFunction: null }, disableKeyboardA11y: { classPropertyName: "disableKeyboardA11y", publicName: "disableKeyboardA11y", isSignal: true, isRequired: false, transformFunction: null }, autoPanOnNodeDrag: { classPropertyName: "autoPanOnNodeDrag", publicName: "autoPanOnNodeDrag", isSignal: true, isRequired: false, transformFunction: null }, autoPanOnConnect: { classPropertyName: "autoPanOnConnect", publicName: "autoPanOnConnect", isSignal: true, isRequired: false, transformFunction: null }, connectionRadius: { classPropertyName: "connectionRadius", publicName: "connectionRadius", isSignal: true, isRequired: false, transformFunction: null }, backgroundVariant: { classPropertyName: "backgroundVariant", publicName: "backgroundVariant", isSignal: true, isRequired: false, transformFunction: null }, backgroundGap: { classPropertyName: "backgroundGap", publicName: "backgroundGap", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, backgroundSize: { classPropertyName: "backgroundSize", publicName: "backgroundSize", isSignal: true, isRequired: false, transformFunction: null }, showBackground: { classPropertyName: "showBackground", publicName: "showBackground", isSignal: true, isRequired: false, transformFunction: null }, showMiniMap: { classPropertyName: "showMiniMap", publicName: "showMiniMap", isSignal: true, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, showCoordinateLabels: { classPropertyName: "showCoordinateLabels", publicName: "showCoordinateLabels", isSignal: true, isRequired: false, transformFunction: null }, coordinateLabelInterval: { classPropertyName: "coordinateLabelInterval", publicName: "coordinateLabelInterval", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onNodeClick: "onNodeClick", onNodeDoubleClick: "onNodeDoubleClick", onNodeMouseEnter: "onNodeMouseEnter", onNodeMouseMove: "onNodeMouseMove", onNodeMouseLeave: "onNodeMouseLeave", onNodeContextMenu: "onNodeContextMenu", onNodeDragStart: "onNodeDragStart", onNodeDrag: "onNodeDrag", onNodeDragStop: "onNodeDragStop", onEdgeClick: "onEdgeClick", onEdgeUpdate: "onEdgeUpdate", onEdgeContextMenu: "onEdgeContextMenu", onEdgeMouseEnter: "onEdgeMouseEnter", onEdgeMouseMove: "onEdgeMouseMove", onEdgeMouseLeave: "onEdgeMouseLeave", onEdgeDoubleClick: "onEdgeDoubleClick", onEdgeUpdateStart: "onEdgeUpdateStart", onEdgeUpdateEnd: "onEdgeUpdateEnd", onNodesChange: "onNodesChange", onEdgesChange: "onEdgesChange", onNodesDelete: "onNodesDelete", onEdgesDelete: "onEdgesDelete", onSelectionDragStart: "onSelectionDragStart", onSelectionDrag: "onSelectionDrag", onSelectionDragStop: "onSelectionDragStop", onSelectionStart: "onSelectionStart", onSelectionEnd: "onSelectionEnd", onSelectionContextMenu: "onSelectionContextMenu", onConnect: "onConnect", onConnectStart: "onConnectStart", onConnectEnd: "onConnectEnd", onClickConnectStart: "onClickConnectStart", onClickConnectEnd: "onClickConnectEnd", onDragOver: "onDragOver", onDrop: "onDrop", onInit: "onInit", onMove: "onMove", onMoveStart: "onMoveStart", onMoveEnd: "onMoveEnd", onSelectionChange: "onSelectionChange", onPaneScroll: "onPaneScroll", onPaneClick: "onPaneClick", onPaneContextMenu: "onPaneContextMenu", onPaneMouseEnter: "onPaneMouseEnter", onPaneMouseMove: "onPaneMouseMove", onPaneMouseLeave: "onPaneMouseLeave", onError: "onError", onNodeResizeEnd: "onNodeResizeEnd" }, ngImport: i0 });
|
|
147
243
|
}
|
|
148
244
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ReactFlowComponentStore, decorators: [{
|
|
149
245
|
type: Directive,
|
|
@@ -255,8 +351,8 @@ function createTemplateNodeComponent(template, vcr, onNodeResizeEnd) {
|
|
|
255
351
|
};
|
|
256
352
|
return (React__default.createElement("div", { ref: containerRef },
|
|
257
353
|
React__default.createElement(NodeResizer, { minWidth: 400, minHeight: 300, isVisible: true, onResizeEnd: handleResizeEnd }),
|
|
258
|
-
React__default.createElement(Handle, { type: "target", position: Position.Left, style: { zIndex: 10 } }),
|
|
259
|
-
React__default.createElement(Handle, { type: "source", position: Position.Right, style: { zIndex: 10 } })));
|
|
354
|
+
React__default.createElement(Handle, { type: "target", position: data.targetPosition ?? Position.Left, style: { zIndex: 10 } }),
|
|
355
|
+
React__default.createElement(Handle, { type: "source", position: data.sourcePosition ?? Position.Right, style: { zIndex: 10 } })));
|
|
260
356
|
};
|
|
261
357
|
// memoなしで返す(デバッグ用:renameが動作するか確認)
|
|
262
358
|
// 動作確認後、適切なmemo戦略を検討
|
|
@@ -345,7 +441,7 @@ class ReactFlowComponent extends NgAtomicComponent {
|
|
|
345
441
|
}));
|
|
346
442
|
}
|
|
347
443
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ReactFlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
348
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.5", type: ReactFlowComponent, isStandalone: true, selector: "machina-react-flow", queries: [{ propertyName: "contentNodeTemplates", predicate: FlowNodeDirective, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: ReactFlowComponentStore, inputs: ["nodes", "nodes", "edges", "edges", "defaultNodes", "defaultNodes", "defaultEdges", "defaultEdges", "defaultEdgeOptions", "defaultEdgeOptions", "nodeTemplates", "nodeTemplates", "nodeTypes", "nodeTypes", "edgeTypes", "edgeTypes", "connectionLineType", "connectionLineType", "connectionLineStyle", "connectionLineStyle", "connectionLineComponent", "connectionLineComponent", "connectionLineContainerStyle", "connectionLineContainerStyle", "connectionMode", "connectionMode", "deleteKeyCode", "deleteKeyCode", "selectionKeyCode", "selectionKeyCode", "selectionOnDrag", "selectionOnDrag", "selectionMode", "selectionMode", "panActivationKeyCode", "panActivationKeyCode", "multiSelectionKeyCode", "multiSelectionKeyCode", "zoomActivationKeyCode", "zoomActivationKeyCode", "snapToGrid", "snapToGrid", "snapGrid", "snapGrid", "onlyRenderVisibleElements", "onlyRenderVisibleElements", "nodesDraggable", "nodesDraggable", "nodesConnectable", "nodesConnectable", "nodesFocusable", "nodesFocusable", "nodeOrigin", "nodeOrigin", "edgesFocusable", "edgesFocusable", "initNodeOrigin", "initNodeOrigin", "elementsSelectable", "elementsSelectable", "selectNodesOnDrag", "selectNodesOnDrag", "panOnDrag", "panOnDrag", "minZoom", "minZoom", "maxZoom", "maxZoom", "defaultViewport", "defaultViewport", "translateExtent", "translateExtent", "preventScrolling", "preventScrolling", "nodeExtent", "nodeExtent", "defaultMarkerColor", "defaultMarkerColor", "zoomOnScroll", "zoomOnScroll", "zoomOnPinch", "zoomOnPinch", "panOnScroll", "panOnScroll", "panOnScrollSpeed", "panOnScrollSpeed", "panOnScrollMode", "panOnScrollMode", "zoomOnDoubleClick", "zoomOnDoubleClick", "edgeUpdaterRadius", "edgeUpdaterRadius", "noDragClassName", "noDragClassName", "noWheelClassName", "noWheelClassName", "noPanClassName", "noPanClassName", "fitView", "fitView", "fitViewOptions", "fitViewOptions", "connectOnClick", "connectOnClick", "attributionPosition", "attributionPosition", "proOptions", "proOptions", "elevateNodesOnSelect", "elevateNodesOnSelect", "elevateEdgesOnSelect", "elevateEdgesOnSelect", "disableKeyboardA11y", "disableKeyboardA11y", "autoPanOnNodeDrag", "autoPanOnNodeDrag", "autoPanOnConnect", "autoPanOnConnect", "connectionRadius", "connectionRadius"], outputs: ["onNodeClick", "onNodeClick", "onNodeDoubleClick", "onNodeDoubleClick", "onNodeMouseEnter", "onNodeMouseEnter", "onNodeMouseMove", "onNodeMouseMove", "onNodeMouseLeave", "onNodeMouseLeave", "onNodeContextMenu", "onNodeContextMenu", "onNodeDragStart", "onNodeDragStart", "onNodeDrag", "onNodeDrag", "onNodeDragStop", "onNodeDragStop", "onEdgeClick", "onEdgeClick", "onEdgeUpdate", "onEdgeUpdate", "onEdgeContextMenu", "onEdgeContextMenu", "onEdgeMouseEnter", "onEdgeMouseEnter", "onEdgeMouseMove", "onEdgeMouseMove", "onEdgeMouseLeave", "onEdgeMouseLeave", "onEdgeDoubleClick", "onEdgeDoubleClick", "onEdgeUpdateStart", "onEdgeUpdateStart", "onEdgeUpdateEnd", "onEdgeUpdateEnd", "onNodesChange", "onNodesChange", "onEdgesChange", "onEdgesChange", "onNodesDelete", "onNodesDelete", "onEdgesDelete", "onEdgesDelete", "onSelectionDragStart", "onSelectionDragStart", "onSelectionDrag", "onSelectionDrag", "onSelectionDragStop", "onSelectionDragStop", "onSelectionStart", "onSelectionStart", "onSelectionEnd", "onSelectionEnd", "onSelectionContextMenu", "onSelectionContextMenu", "onConnect", "onConnect", "onConnectStart", "onConnectStart", "onConnectEnd", "onConnectEnd", "onClickConnectStart", "onClickConnectStart", "onClickConnectEnd", "onClickConnectEnd", "onDragOver", "onDragOver", "onDrop", "onDrop", "onInit", "onInit", "onMove", "onMove", "onMoveStart", "onMoveStart", "onMoveEnd", "onMoveEnd", "onSelectionChange", "onSelectionChange", "onPaneScroll", "onPaneScroll", "onPaneClick", "onPaneClick", "onPaneContextMenu", "onPaneContextMenu", "onPaneMouseEnter", "onPaneMouseEnter", "onPaneMouseMove", "onPaneMouseMove", "onPaneMouseLeave", "onPaneMouseLeave", "onError", "onError", "onNodeResizeEnd", "onNodeResizeEnd"] }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".react-flow{direction:ltr}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:#ffffff80;padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}:host{display:block;width:100%;height:100%}:host .react-flow{width:100%;height:100%;background-color:#f8f8f8!important}:host .react-flow .react-flow__renderer{z-index:1}:host .react-flow .react-flow__background{background-color:#f8f8f8!important}:host .react-flow .react-flow__viewport{z-index:2}:host .react-flow .react-flow__nodes{z-index:4}:host .react-flow .react-flow__node{cursor:grab!important;z-index:5!important}:host .react-flow .react-flow__node:active{cursor:grabbing!important}:host .react-flow .react-flow__node.nopan{cursor:grab!important;pointer-events:auto!important}:host .react-flow .react-flow__node-default{background:#4ecdc4!important;border:3px solid #333!important;border-radius:8px!important;padding:15px!important;color:#fff!important;font-weight:700!important;font-size:18px!important;box-shadow:0 4px 8px #0000004d!important;opacity:1!important;min-width:200px!important}:host .react-flow .react-flow__node-default[data-id=\"1\"]{background:#ff6b6b!important}:host .react-flow .react-flow__node-default[data-id=\"2\"]{background:#4ecdc4!important}:host .react-flow .react-flow__handle{background:#555!important;width:12px!important;height:12px!important;border:2px solid #fff!important;opacity:1!important}:host .react-flow .react-flow__handle:hover{background:#1976d2!important}:host .react-flow .react-flow__handle-top{top:-6px!important}:host .react-flow .react-flow__handle-right{right:-6px!important}:host .react-flow .react-flow__handle-bottom{bottom:-6px!important}:host .react-flow .react-flow__handle-left{left:-6px!important}:host .react-flow .react-flow__edge-path{stroke:#000!important;stroke-width:3px!important}:host .react-flow .react-flow__edge.selected .react-flow__edge-path{stroke:#1976d2!important;stroke-width:3}:host .react-flow .react-flow__controls button{background:#fff!important;border:1px solid #333!important;color:#333!important}:host .react-flow .react-flow__controls button:hover{background:#f0f0f0!important}:host .react-flow .react-flow__minimap{background-color:#f8f8f8!important;border:1px solid #333!important}:host .react-flow .react-flow__minimap .react-flow__minimap-mask{fill:#e0e0e0!important}:host .react-flow .react-flow__minimap .react-flow__minimap-node{fill:#333!important}:host .react-flow .react-flow__background pattern{stroke:#e0e0e0!important}:host .react-flow .react-flow__connectionline .react-flow__edge-path{stroke:#1976d2!important;stroke-width:3px!important;stroke-dasharray:5 5!important;animation:dash .5s linear infinite!important}@keyframes dash{to{stroke-dashoffset:-10}}:host .react-flow .react-flow__node-group{background:#f0f0f099!important;border:2px dashed #d1d5db!important;border-radius:16px!important;padding:60px 40px 40px!important;pointer-events:all!important;box-sizing:border-box!important}:host .react-flow .react-flow__node-group.selected{border-color:#3b82f6!important;border-style:solid!important;background:#f0f0f0cc!important}:host .react-flow .react-flow__node-task{background:transparent!important;border:none!important;padding:0!important}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
444
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.5", type: ReactFlowComponent, isStandalone: true, selector: "machina-react-flow", queries: [{ propertyName: "contentNodeTemplates", predicate: FlowNodeDirective, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: ReactFlowComponentStore, inputs: ["nodes", "nodes", "edges", "edges", "defaultNodes", "defaultNodes", "defaultEdges", "defaultEdges", "defaultEdgeOptions", "defaultEdgeOptions", "nodeTemplates", "nodeTemplates", "nodeTypes", "nodeTypes", "edgeTypes", "edgeTypes", "connectionLineType", "connectionLineType", "connectionLineStyle", "connectionLineStyle", "connectionLineComponent", "connectionLineComponent", "connectionLineContainerStyle", "connectionLineContainerStyle", "connectionMode", "connectionMode", "deleteKeyCode", "deleteKeyCode", "selectionKeyCode", "selectionKeyCode", "selectionOnDrag", "selectionOnDrag", "selectionMode", "selectionMode", "panActivationKeyCode", "panActivationKeyCode", "multiSelectionKeyCode", "multiSelectionKeyCode", "zoomActivationKeyCode", "zoomActivationKeyCode", "snapToGrid", "snapToGrid", "snapGrid", "snapGrid", "onlyRenderVisibleElements", "onlyRenderVisibleElements", "nodesDraggable", "nodesDraggable", "nodesConnectable", "nodesConnectable", "nodesFocusable", "nodesFocusable", "nodeOrigin", "nodeOrigin", "edgesFocusable", "edgesFocusable", "initNodeOrigin", "initNodeOrigin", "elementsSelectable", "elementsSelectable", "selectNodesOnDrag", "selectNodesOnDrag", "panOnDrag", "panOnDrag", "minZoom", "minZoom", "maxZoom", "maxZoom", "defaultViewport", "defaultViewport", "translateExtent", "translateExtent", "preventScrolling", "preventScrolling", "nodeExtent", "nodeExtent", "defaultMarkerColor", "defaultMarkerColor", "zoomOnScroll", "zoomOnScroll", "zoomOnPinch", "zoomOnPinch", "panOnScroll", "panOnScroll", "panOnScrollSpeed", "panOnScrollSpeed", "panOnScrollMode", "panOnScrollMode", "zoomOnDoubleClick", "zoomOnDoubleClick", "edgeUpdaterRadius", "edgeUpdaterRadius", "noDragClassName", "noDragClassName", "noWheelClassName", "noWheelClassName", "noPanClassName", "noPanClassName", "fitView", "fitView", "fitViewOptions", "fitViewOptions", "connectOnClick", "connectOnClick", "attributionPosition", "attributionPosition", "proOptions", "proOptions", "elevateNodesOnSelect", "elevateNodesOnSelect", "elevateEdgesOnSelect", "elevateEdgesOnSelect", "disableKeyboardA11y", "disableKeyboardA11y", "autoPanOnNodeDrag", "autoPanOnNodeDrag", "autoPanOnConnect", "autoPanOnConnect", "connectionRadius", "connectionRadius", "backgroundVariant", "backgroundVariant", "backgroundGap", "backgroundGap", "backgroundColor", "backgroundColor", "backgroundSize", "backgroundSize", "showBackground", "showBackground", "showMiniMap", "showMiniMap", "showControls", "showControls", "showCoordinateLabels", "showCoordinateLabels", "coordinateLabelInterval", "coordinateLabelInterval"], outputs: ["onNodeClick", "onNodeClick", "onNodeDoubleClick", "onNodeDoubleClick", "onNodeMouseEnter", "onNodeMouseEnter", "onNodeMouseMove", "onNodeMouseMove", "onNodeMouseLeave", "onNodeMouseLeave", "onNodeContextMenu", "onNodeContextMenu", "onNodeDragStart", "onNodeDragStart", "onNodeDrag", "onNodeDrag", "onNodeDragStop", "onNodeDragStop", "onEdgeClick", "onEdgeClick", "onEdgeUpdate", "onEdgeUpdate", "onEdgeContextMenu", "onEdgeContextMenu", "onEdgeMouseEnter", "onEdgeMouseEnter", "onEdgeMouseMove", "onEdgeMouseMove", "onEdgeMouseLeave", "onEdgeMouseLeave", "onEdgeDoubleClick", "onEdgeDoubleClick", "onEdgeUpdateStart", "onEdgeUpdateStart", "onEdgeUpdateEnd", "onEdgeUpdateEnd", "onNodesChange", "onNodesChange", "onEdgesChange", "onEdgesChange", "onNodesDelete", "onNodesDelete", "onEdgesDelete", "onEdgesDelete", "onSelectionDragStart", "onSelectionDragStart", "onSelectionDrag", "onSelectionDrag", "onSelectionDragStop", "onSelectionDragStop", "onSelectionStart", "onSelectionStart", "onSelectionEnd", "onSelectionEnd", "onSelectionContextMenu", "onSelectionContextMenu", "onConnect", "onConnect", "onConnectStart", "onConnectStart", "onConnectEnd", "onConnectEnd", "onClickConnectStart", "onClickConnectStart", "onClickConnectEnd", "onClickConnectEnd", "onDragOver", "onDragOver", "onDrop", "onDrop", "onInit", "onInit", "onMove", "onMove", "onMoveStart", "onMoveStart", "onMoveEnd", "onMoveEnd", "onSelectionChange", "onSelectionChange", "onPaneScroll", "onPaneScroll", "onPaneClick", "onPaneClick", "onPaneContextMenu", "onPaneContextMenu", "onPaneMouseEnter", "onPaneMouseEnter", "onPaneMouseMove", "onPaneMouseMove", "onPaneMouseLeave", "onPaneMouseLeave", "onError", "onError", "onNodeResizeEnd", "onNodeResizeEnd"] }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".react-flow{direction:ltr}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:#ffffff80;padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}:host{display:block;width:100%;height:100%}:host .react-flow{width:100%;height:100%;background-color:#f8f8f8!important}:host .react-flow .react-flow__renderer{z-index:1}:host .react-flow .react-flow__background{background-color:#f8f8f8!important}:host .react-flow .react-flow__viewport{z-index:2}:host .react-flow .react-flow__nodes{z-index:4}:host .react-flow .react-flow__node{cursor:grab!important;z-index:5!important}:host .react-flow .react-flow__node:active{cursor:grabbing!important}:host .react-flow .react-flow__node.nopan{cursor:grab!important;pointer-events:auto!important}:host .react-flow .react-flow__node-default{background:#4ecdc4!important;border:3px solid #333!important;border-radius:8px!important;padding:15px!important;color:#fff!important;font-weight:700!important;font-size:18px!important;box-shadow:0 4px 8px #0000004d!important;opacity:1!important;min-width:200px!important}:host .react-flow .react-flow__node-default[data-id=\"1\"]{background:#ff6b6b!important}:host .react-flow .react-flow__node-default[data-id=\"2\"]{background:#4ecdc4!important}:host .react-flow .react-flow__handle{background:#555!important;width:12px!important;height:12px!important;border:2px solid #fff!important;opacity:1!important}:host .react-flow .react-flow__handle:hover{background:#1976d2!important}:host .react-flow .react-flow__handle-top{top:-6px!important}:host .react-flow .react-flow__handle-right{right:-6px!important}:host .react-flow .react-flow__handle-bottom{bottom:-6px!important}:host .react-flow .react-flow__handle-left{left:-6px!important}:host .react-flow .react-flow__edge-path{stroke:#000!important;stroke-width:3px!important}:host .react-flow .react-flow__edge.selected .react-flow__edge-path{stroke:#1976d2!important;stroke-width:3}:host .react-flow .react-flow__controls button{background:#fff!important;border:1px solid #333!important;color:#333!important}:host .react-flow .react-flow__controls button:hover{background:#f0f0f0!important}:host .react-flow .react-flow__minimap{background-color:#f8f8f8!important;border:1px solid #333!important}:host .react-flow .react-flow__minimap .react-flow__minimap-mask{fill:#e0e0e0!important}:host .react-flow .react-flow__minimap .react-flow__minimap-node{fill:#333!important}:host .react-flow .react-flow__background pattern{stroke:#e0e0e0!important}:host .react-flow .react-flow__connectionline .react-flow__edge-path{stroke:#1976d2!important;stroke-width:3px!important;stroke-dasharray:5 5!important;animation:dash .5s linear infinite!important}@keyframes dash{to{stroke-dashoffset:-10}}:host .react-flow .react-flow__node-group{background:#f0f0f099!important;border:2px dashed #d1d5db!important;border-radius:16px!important;padding:60px 40px 40px!important;pointer-events:all!important;box-sizing:border-box!important}:host .react-flow .react-flow__node-group.selected{border-color:#3b82f6!important;border-style:solid!important;background:#f0f0f0cc!important}:host .react-flow .react-flow__node-task{background:transparent!important;border:none!important;padding:0!important}:host .react-flow .react-flow__node-issue{background:transparent!important;border:none!important;padding:0!important}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
349
445
|
}
|
|
350
446
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ReactFlowComponent, decorators: [{
|
|
351
447
|
type: Component,
|
|
@@ -367,7 +463,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
367
463
|
'noDragClassName', 'noWheelClassName', 'noPanClassName', 'fitView', 'fitViewOptions',
|
|
368
464
|
'connectOnClick', 'attributionPosition', 'proOptions', 'elevateNodesOnSelect',
|
|
369
465
|
'elevateEdgesOnSelect', 'disableKeyboardA11y', 'autoPanOnNodeDrag', 'autoPanOnConnect',
|
|
370
|
-
'connectionRadius'
|
|
466
|
+
'connectionRadius',
|
|
467
|
+
'backgroundVariant', 'backgroundGap', 'backgroundColor', 'backgroundSize',
|
|
468
|
+
'showBackground', 'showMiniMap', 'showControls',
|
|
469
|
+
'showCoordinateLabels', 'coordinateLabelInterval'
|
|
371
470
|
],
|
|
372
471
|
outputs: [
|
|
373
472
|
'onNodeClick', 'onNodeDoubleClick', 'onNodeMouseEnter', 'onNodeMouseMove',
|
|
@@ -383,7 +482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
383
482
|
'onPaneMouseEnter', 'onPaneMouseMove', 'onPaneMouseLeave', 'onError', 'onNodeResizeEnd'
|
|
384
483
|
]
|
|
385
484
|
}
|
|
386
|
-
], styles: [".react-flow{direction:ltr}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:#ffffff80;padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}:host{display:block;width:100%;height:100%}:host .react-flow{width:100%;height:100%;background-color:#f8f8f8!important}:host .react-flow .react-flow__renderer{z-index:1}:host .react-flow .react-flow__background{background-color:#f8f8f8!important}:host .react-flow .react-flow__viewport{z-index:2}:host .react-flow .react-flow__nodes{z-index:4}:host .react-flow .react-flow__node{cursor:grab!important;z-index:5!important}:host .react-flow .react-flow__node:active{cursor:grabbing!important}:host .react-flow .react-flow__node.nopan{cursor:grab!important;pointer-events:auto!important}:host .react-flow .react-flow__node-default{background:#4ecdc4!important;border:3px solid #333!important;border-radius:8px!important;padding:15px!important;color:#fff!important;font-weight:700!important;font-size:18px!important;box-shadow:0 4px 8px #0000004d!important;opacity:1!important;min-width:200px!important}:host .react-flow .react-flow__node-default[data-id=\"1\"]{background:#ff6b6b!important}:host .react-flow .react-flow__node-default[data-id=\"2\"]{background:#4ecdc4!important}:host .react-flow .react-flow__handle{background:#555!important;width:12px!important;height:12px!important;border:2px solid #fff!important;opacity:1!important}:host .react-flow .react-flow__handle:hover{background:#1976d2!important}:host .react-flow .react-flow__handle-top{top:-6px!important}:host .react-flow .react-flow__handle-right{right:-6px!important}:host .react-flow .react-flow__handle-bottom{bottom:-6px!important}:host .react-flow .react-flow__handle-left{left:-6px!important}:host .react-flow .react-flow__edge-path{stroke:#000!important;stroke-width:3px!important}:host .react-flow .react-flow__edge.selected .react-flow__edge-path{stroke:#1976d2!important;stroke-width:3}:host .react-flow .react-flow__controls button{background:#fff!important;border:1px solid #333!important;color:#333!important}:host .react-flow .react-flow__controls button:hover{background:#f0f0f0!important}:host .react-flow .react-flow__minimap{background-color:#f8f8f8!important;border:1px solid #333!important}:host .react-flow .react-flow__minimap .react-flow__minimap-mask{fill:#e0e0e0!important}:host .react-flow .react-flow__minimap .react-flow__minimap-node{fill:#333!important}:host .react-flow .react-flow__background pattern{stroke:#e0e0e0!important}:host .react-flow .react-flow__connectionline .react-flow__edge-path{stroke:#1976d2!important;stroke-width:3px!important;stroke-dasharray:5 5!important;animation:dash .5s linear infinite!important}@keyframes dash{to{stroke-dashoffset:-10}}:host .react-flow .react-flow__node-group{background:#f0f0f099!important;border:2px dashed #d1d5db!important;border-radius:16px!important;padding:60px 40px 40px!important;pointer-events:all!important;box-sizing:border-box!important}:host .react-flow .react-flow__node-group.selected{border-color:#3b82f6!important;border-style:solid!important;background:#f0f0f0cc!important}:host .react-flow .react-flow__node-task{background:transparent!important;border:none!important;padding:0!important}\n"] }]
|
|
485
|
+
], styles: [".react-flow{direction:ltr}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:#ffffff80;padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}:host{display:block;width:100%;height:100%}:host .react-flow{width:100%;height:100%;background-color:#f8f8f8!important}:host .react-flow .react-flow__renderer{z-index:1}:host .react-flow .react-flow__background{background-color:#f8f8f8!important}:host .react-flow .react-flow__viewport{z-index:2}:host .react-flow .react-flow__nodes{z-index:4}:host .react-flow .react-flow__node{cursor:grab!important;z-index:5!important}:host .react-flow .react-flow__node:active{cursor:grabbing!important}:host .react-flow .react-flow__node.nopan{cursor:grab!important;pointer-events:auto!important}:host .react-flow .react-flow__node-default{background:#4ecdc4!important;border:3px solid #333!important;border-radius:8px!important;padding:15px!important;color:#fff!important;font-weight:700!important;font-size:18px!important;box-shadow:0 4px 8px #0000004d!important;opacity:1!important;min-width:200px!important}:host .react-flow .react-flow__node-default[data-id=\"1\"]{background:#ff6b6b!important}:host .react-flow .react-flow__node-default[data-id=\"2\"]{background:#4ecdc4!important}:host .react-flow .react-flow__handle{background:#555!important;width:12px!important;height:12px!important;border:2px solid #fff!important;opacity:1!important}:host .react-flow .react-flow__handle:hover{background:#1976d2!important}:host .react-flow .react-flow__handle-top{top:-6px!important}:host .react-flow .react-flow__handle-right{right:-6px!important}:host .react-flow .react-flow__handle-bottom{bottom:-6px!important}:host .react-flow .react-flow__handle-left{left:-6px!important}:host .react-flow .react-flow__edge-path{stroke:#000!important;stroke-width:3px!important}:host .react-flow .react-flow__edge.selected .react-flow__edge-path{stroke:#1976d2!important;stroke-width:3}:host .react-flow .react-flow__controls button{background:#fff!important;border:1px solid #333!important;color:#333!important}:host .react-flow .react-flow__controls button:hover{background:#f0f0f0!important}:host .react-flow .react-flow__minimap{background-color:#f8f8f8!important;border:1px solid #333!important}:host .react-flow .react-flow__minimap .react-flow__minimap-mask{fill:#e0e0e0!important}:host .react-flow .react-flow__minimap .react-flow__minimap-node{fill:#333!important}:host .react-flow .react-flow__background pattern{stroke:#e0e0e0!important}:host .react-flow .react-flow__connectionline .react-flow__edge-path{stroke:#1976d2!important;stroke-width:3px!important;stroke-dasharray:5 5!important;animation:dash .5s linear infinite!important}@keyframes dash{to{stroke-dashoffset:-10}}:host .react-flow .react-flow__node-group{background:#f0f0f099!important;border:2px dashed #d1d5db!important;border-radius:16px!important;padding:60px 40px 40px!important;pointer-events:all!important;box-sizing:border-box!important}:host .react-flow .react-flow__node-group.selected{border-color:#3b82f6!important;border-style:solid!important;background:#f0f0f0cc!important}:host .react-flow .react-flow__node-task{background:transparent!important;border:none!important;padding:0!important}:host .react-flow .react-flow__node-issue{background:transparent!important;border:none!important;padding:0!important}\n"] }]
|
|
387
486
|
}], ctorParameters: () => [] });
|
|
388
487
|
|
|
389
488
|
/**
|