This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
commit 9d8b7d0de25537bf054989763d06d8ad59693fa4
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Mon Jan 23 10:48:06 2023 -0500
Separate logic in RouteDesigner
---
karavan-designer/src/DesignerPage.tsx | 8 ++------
karavan-designer/src/designer/KaravanDesigner.tsx | 11 +----------
karavan-designer/src/designer/route/RouteDesignerLogic.tsx | 12 +++++++++++-
karavan-designer/src/designer/utils/EventBus.ts | 14 ++++++++++++++
4 files changed, 28 insertions(+), 17 deletions(-)
diff --git a/karavan-designer/src/DesignerPage.tsx
b/karavan-designer/src/DesignerPage.tsx
index aa6530c4..c3ca5d7f 100644
--- a/karavan-designer/src/DesignerPage.tsx
+++ b/karavan-designer/src/DesignerPage.tsx
@@ -26,6 +26,7 @@ import DownloadIcon from
"@patternfly/react-icons/dist/esm/icons/download-icon";
import DownloadImageIcon from
"@patternfly/react-icons/dist/esm/icons/image-icon";
import {KaravanDesigner} from "./designer/KaravanDesigner";
import Editor from "@monaco-editor/react";
+import {EventBus} from "./designer/utils/EventBus";
interface Props {
name: string,
@@ -35,7 +36,6 @@ interface Props {
}
interface State {
- karavanDesignerRef: any,
mode: "design" | "code",
}
@@ -43,7 +43,6 @@ export class DesignerPage extends React.Component<Props,
State> {
public state: State = {
mode: 'design',
- karavanDesignerRef: React.createRef(),
};
componentDidMount() {
@@ -64,9 +63,7 @@ export class DesignerPage extends React.Component<Props,
State> {
}
downloadImage = () => {
- if (this.state.karavanDesignerRef) {
- this.state.karavanDesignerRef.current.downloadImage();
- }
+ EventBus.sendCommand("downloadImage");
}
getDesigner = () => {
@@ -74,7 +71,6 @@ export class DesignerPage extends React.Component<Props,
State> {
return (
<KaravanDesigner
dark={this.props.dark}
- ref={this.state.karavanDesignerRef}
filename={name}
yaml={yaml}
onSave={(filename, yaml, propertyOnly) => this.save(filename,
yaml, propertyOnly)}
diff --git a/karavan-designer/src/designer/KaravanDesigner.tsx
b/karavan-designer/src/designer/KaravanDesigner.tsx
index e7f975b8..a2556b2a 100644
--- a/karavan-designer/src/designer/KaravanDesigner.tsx
+++ b/karavan-designer/src/designer/KaravanDesigner.tsx
@@ -44,7 +44,6 @@ interface State {
integration: Integration
key: string
propertyOnly: boolean
- routeDesignerRef?: any
}
export class KaravanInstance {
@@ -78,7 +77,6 @@ export class KaravanDesigner extends React.Component<Props,
State> {
integration: this.getIntegration(this.props.yaml, this.props.filename),
key: "",
propertyOnly: false,
- routeDesignerRef: React.createRef(),
}
componentDidMount() {
@@ -117,12 +115,6 @@ export class KaravanDesigner extends
React.Component<Props, State> {
)
}
- downloadImage(){
- if(this.state.routeDesignerRef){
- this.state.routeDesignerRef.current.integrationImageDownload();
- }
- }
-
render() {
const tab = this.state.tab;
return (
@@ -134,8 +126,7 @@ export class KaravanDesigner extends React.Component<Props,
State> {
</Tabs>
{tab === 'routes' && <RouteDesigner
integration={this.state.integration}
onSave={(integration,
propertyOnly) => this.save(integration, propertyOnly)}
- dark={this.props.dark}
-
ref={this.state.routeDesignerRef}/>}
+
dark={this.props.dark}/>}
{tab === 'rest' && <RestDesigner
integration={this.state.integration}
onSave={(integration,
propertyOnly) => this.save(integration, propertyOnly)}
dark={this.props.dark}/>}
diff --git a/karavan-designer/src/designer/route/RouteDesignerLogic.tsx
b/karavan-designer/src/designer/route/RouteDesignerLogic.tsx
index 0bc1eba8..168112c0 100644
--- a/karavan-designer/src/designer/route/RouteDesignerLogic.tsx
+++ b/karavan-designer/src/designer/route/RouteDesignerLogic.tsx
@@ -22,16 +22,18 @@ import {FromDefinition, RouteConfigurationDefinition,
RouteDefinition} from "kar
import {CamelElement, Integration} from
"karavan-core/lib/model/IntegrationDefinition";
import {CamelDefinitionApiExt} from
"karavan-core/lib/api/CamelDefinitionApiExt";
import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi";
-import {EventBus} from "../utils/EventBus";
+import {Command, EventBus} from "../utils/EventBus";
import {RouteToCreate} from "../utils/CamelUi";
import {CamelDisplayUtil} from "karavan-core/lib/api/CamelDisplayUtil";
import {toPng} from 'html-to-image';
import {RouteDesigner, RouteDesignerState} from "./RouteDesigner";
import {findDOMNode} from "react-dom";
+import {Subscription} from "rxjs";
export class RouteDesignerLogic {
routeDesigner: RouteDesigner
+ commandSub?: Subscription
constructor(routeDesigner: RouteDesigner) {
this.routeDesigner = routeDesigner;
@@ -52,12 +54,14 @@ export class RouteDesignerLogic {
const observer = new MutationObserver(checkResize);
observer.observe(element, {attributes: true, attributeOldValue:
true, attributeFilter: ['style']});
}
+ this.commandSub = EventBus.onCommand()?.subscribe((command: Command)
=> this.onCommand(command));
}
componentWillUnmount() {
window.removeEventListener('resize', this.routeDesigner.handleResize);
window.removeEventListener('keydown',
this.routeDesigner.handleKeyDown);
window.removeEventListener('keyup', this.routeDesigner.handleKeyUp);
+ this.commandSub?.unsubscribe();
}
handleResize = (event: any) => {
@@ -126,6 +130,12 @@ export class RouteDesignerLogic {
}
}
+ onCommand = (command: Command) => {
+ switch (command.command){
+ case "downloadImage": this.integrationImageDownload()
+ }
+ }
+
onPropertyUpdate = (element: CamelElement, newRoute?: RouteToCreate) => {
if (newRoute) {
let i =
CamelDefinitionApiExt.updateIntegrationRouteElement(this.routeDesigner.state.integration,
element);
diff --git a/karavan-designer/src/designer/utils/EventBus.ts
b/karavan-designer/src/designer/utils/EventBus.ts
index 2df867f4..aeae6ff7 100644
--- a/karavan-designer/src/designer/utils/EventBus.ts
+++ b/karavan-designer/src/designer/utils/EventBus.ts
@@ -48,6 +48,17 @@ export class DslPosition {
}
}
+const commands = new Subject<Command>();
+export class Command {
+ command: string;
+ data: any;
+
+ constructor(command: string, data: any) {
+ this.command = command;
+ this.data = data;
+ }
+}
+
export const EventBus = {
sendPosition: (command: "add" | "delete" | "clean",
step: CamelElement,
@@ -58,4 +69,7 @@ export const EventBus = {
inSteps: boolean = false,
isSelected: boolean = false) => positions.next(new
DslPosition(command, step, parent, rect, headerRect, position, inSteps,
isSelected)),
onPosition: () => positions.asObservable(),
+
+ sendCommand: (command: string, data?: any) => commands.next(new
Command(command, data)),
+ onCommand: () => commands.asObservable(),
}
