You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2022/11/02 20:14:08 UTC
[camel-karavan] branch main updated: Added support to Download Integration as an image (#510)
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
The following commit(s) were added to refs/heads/main by this push:
new e910cc9 Added support to Download Integration as an image (#510)
e910cc9 is described below
commit e910cc9fc6ff446ad458013401a9da275642552b
Author: Mrinal Sharma <mr...@users.noreply.github.com>
AuthorDate: Wed Nov 2 16:14:04 2022 -0400
Added support to Download Integration as an image (#510)
* Added support to Download Integration as an image
* incorporated review comments
---
karavan-app/src/main/webapp/package.json | 1 +
karavan-designer/package.json | 1 +
karavan-designer/src/designer/KaravanDesigner.tsx | 11 ++++---
.../src/designer/route/RouteDesigner.tsx | 36 ++++++++++++++++++++--
karavan-vscode/package.json | 1 +
5 files changed, 43 insertions(+), 7 deletions(-)
diff --git a/karavan-app/src/main/webapp/package.json b/karavan-app/src/main/webapp/package.json
index d5c81d8..c6e14e6 100644
--- a/karavan-app/src/main/webapp/package.json
+++ b/karavan-app/src/main/webapp/package.json
@@ -38,6 +38,7 @@
"buffer": "^6.0.3",
"dagre": "^0.8.5",
"file-saver": "^2.0.5",
+ "html-to-image": "^1.10.8",
"karavan-core": "file:../../../../karavan-core",
"keycloak-js": "^19.0.1",
"localforage": "^1.10.0",
diff --git a/karavan-designer/package.json b/karavan-designer/package.json
index 1199e20..e0f9e70 100644
--- a/karavan-designer/package.json
+++ b/karavan-designer/package.json
@@ -34,6 +34,7 @@
"@types/uuid": "8.3.4",
"axios": "^0.25.0",
"dagre": "^0.8.5",
+ "html-to-image": "^1.10.8",
"karavan-core": "file:../karavan-core",
"react": "17.0.2",
"react-dom": "17.0.2",
diff --git a/karavan-designer/src/designer/KaravanDesigner.tsx b/karavan-designer/src/designer/KaravanDesigner.tsx
index c8c7d41..685995c 100644
--- a/karavan-designer/src/designer/KaravanDesigner.tsx
+++ b/karavan-designer/src/designer/KaravanDesigner.tsx
@@ -45,6 +45,7 @@ interface State {
integration: Integration
key: string
propertyOnly: boolean
+ routeDesignerRef?: any
}
export class KaravanDesigner extends React.Component<Props, State> {
@@ -56,6 +57,7 @@ export class KaravanDesigner extends React.Component<Props, State> {
: Integration.createNew(this.props.filename),
key: "",
propertyOnly: false,
+ routeDesignerRef: React.createRef(),
};
componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => {
@@ -91,8 +93,9 @@ export class KaravanDesigner extends React.Component<Props, State> {
}
downloadImage(){
- // TODO: download image
- console.log("Download image")
+ if(this.state.routeDesignerRef){
+ this.state.routeDesignerRef.current.IntegrationImageDownload();
+ }
}
render() {
@@ -108,7 +111,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}/>}
+ dark={this.props.dark} ref={this.state.routeDesignerRef}/>}
{tab === 'rest' && <RestDesigner integration={this.state.integration}
onSave={(integration, propertyOnly) => this.save(integration, propertyOnly)}
dark={this.props.dark}/>}
@@ -124,4 +127,4 @@ export class KaravanDesigner extends React.Component<Props, State> {
</PageSection>
)
}
-}
+}
\ No newline at end of file
diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx b/karavan-designer/src/designer/route/RouteDesigner.tsx
index 2c02014..d7f9a36 100644
--- a/karavan-designer/src/designer/route/RouteDesigner.tsx
+++ b/karavan-designer/src/designer/route/RouteDesigner.tsx
@@ -21,7 +21,7 @@ import {
DrawerContent,
DrawerContentBody,
Button, Modal,
- PageSection
+ PageSection,
} from '@patternfly/react-core';
import '../karavan.css';
import {DslSelector} from "./DslSelector";
@@ -34,12 +34,14 @@ import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt"
import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi";
import {DslConnections} from "./DslConnections";
import PlusIcon from "@patternfly/react-icons/dist/esm/icons/plus-icon";
+import DownloadIcon from "@patternfly/react-icons/dist/esm/icons/download-icon"
import {DslElement} from "./DslElement";
import {EventBus} from "../utils/EventBus";
import {CamelUi, RouteToCreate} from "../utils/CamelUi";
import {findDOMNode} from "react-dom";
import {Subscription} from "rxjs";
import {CamelDisplayUtil} from "karavan-core/lib/api/CamelDisplayUtil";
+import {toPng} from 'html-to-image';
interface Props {
onSave?: (integration: Integration, propertyOnly: boolean) => void
@@ -65,6 +67,7 @@ interface State {
left: number
clipboardStep?: CamelElement
ref?: any
+ printerRef?: any
propertyOnly: boolean
selectorTabIndex?: string | number
}
@@ -85,6 +88,7 @@ export class RouteDesigner extends React.Component<Props, State> {
top: 0,
left: 0,
ref: React.createRef(),
+ printerRef: React.createRef(),
propertyOnly: false,
};
@@ -327,10 +331,36 @@ export class RouteDesigner extends React.Component<Props, State> {
)
}
+ downloadIntegrationImage(dataUrl: string) {
+ const a = document.createElement('a');
+ a.setAttribute('download', 'karavan-routes.png');
+ a.setAttribute('href', dataUrl);
+ a.click();
+ }
+
+ IntegrationImageDownloadFilter = (node: HTMLElement) => {
+ const exclusionClasses = ['add-flow'];
+ return !exclusionClasses.some(classname => {
+ return node.classList === undefined ? false: node.classList.contains(classname);
+ });
+ }
+
+ IntegrationImageDownload() {
+ if (this.state.printerRef.current === null) {
+ return
+ }
+ toPng(this.state.printerRef.current, { style:{overflow:'hidden'}, cacheBust: true, filter: this.IntegrationImageDownloadFilter,
+ height:this.state.height,width:this.state.width, backgroundColor: this.props.dark?"black":"white" }).then(v => {
+ toPng(this.state.printerRef.current, { style:{overflow:'hidden'}, cacheBust: true, filter: this.IntegrationImageDownloadFilter,
+ height:this.state.height,width:this.state.width, backgroundColor: this.props.dark?"black":"white" }).then(this.downloadIntegrationImage);
+ })
+
+ }
+
getGraph() {
const routes = CamelUi.getRoutes(this.state.integration);
return (
- <div className="graph">
+ <div ref={this.state.printerRef} className="graph">
<DslConnections height={this.state.height} width={this.state.width} top={this.state.top}
left={this.state.left} integration={this.state.integration}/>
<div className="flows" data-click="FLOWS" onClick={event => this.unselectElement(event)}
@@ -375,4 +405,4 @@ export class RouteDesigner extends React.Component<Props, State> {
</PageSection>
);
}
-}
+}
\ No newline at end of file
diff --git a/karavan-vscode/package.json b/karavan-vscode/package.json
index ddf79f3..aaeb83d 100644
--- a/karavan-vscode/package.json
+++ b/karavan-vscode/package.json
@@ -518,6 +518,7 @@
"@types/js-yaml": "^4.0.5",
"@types/uuid": "8.3.4",
"js-yaml": "^4.1.0",
+ "html-to-image": "^1.10.8",
"path-browserify": "^1.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",