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 02d8b46 Integration Designer UI improvements
new 019d84b Merge pull request #2 from mgubaidullin/ui-improvements
02d8b46 is described below
commit 02d8b46b760e15e1100dccc33b02a519a1b2be86
Author: Marat Gubaidullin <[email protected]>
AuthorDate: Wed Oct 6 18:13:32 2021 -0400
Integration Designer UI improvements
---
karavan-designer/src/App.tsx | 65 +++++++++++++++----------
karavan-designer/src/designer/karavan.css | 51 +++++++++++--------
karavan-designer/src/designer/ui/DslElement.tsx | 58 ++++++++++++++--------
3 files changed, 107 insertions(+), 67 deletions(-)
diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx
index e54eccd..48f9d35 100644
--- a/karavan-designer/src/App.tsx
+++ b/karavan-designer/src/App.tsx
@@ -1,6 +1,6 @@
import * as React from "react";
import {
- Page,
+ Page,
} from "@patternfly/react-core";
import {KaravanDesigner} from "./designer/ui/KaravanDesigner";
import {KameletApi} from "./designer/api/KameletApi";
@@ -9,35 +9,48 @@ interface Props {
}
interface State {
- name: string
- yaml: string
- key: string
+ name: string
+ yaml: string
+ key: string
}
class App extends React.Component<Props, State> {
- public state: State = {
- name: '',
- yaml: '',
- key: ''
- };
-
-
- componentDidMount() {
-
- }
-
- save(name: string, yaml: string) {
- console.log(yaml);
- }
-
- public render() {
- return (
- <Page className="karavan">
- <KaravanDesigner key={this.state.key} name={this.state.name}
yaml={this.state.yaml} onSave={(name, yaml) => this.save(name, yaml)}/>
- </Page>
- );
- }
+ public state: State = {
+ name: '',
+ yaml: '',
+ key: ''
+ };
+
+
+ componentDidMount() {
+ ["http-secured-sink.kamelet.yaml",
+ "http-secured-source.kamelet.yaml",
+ "http-sink.kamelet.yaml",
+ "http-source.kamelet.yaml",
+ "insert-field-action.kamelet.yaml",
+ "insert-header-action.kamelet.yaml",
+ "kafka-not-secured-sink.kamelet.yaml",
+ "kafka-not-secured-source.kamelet.yaml",
+ "kafka-sink.kamelet.yaml",
+ "kafka-source.kamelet.yaml"].forEach(name =>
+ fetch("kamelets/" + name)
+ .then((r) => r.text())
+ .then(value => KameletApi.saveKamelets([value])));
+ }
+
+ save(name: string, yaml: string) {
+ console.log(yaml);
+ }
+
+ public render() {
+ return (
+ <Page className="karavan">
+ <KaravanDesigner key={this.state.key} name={this.state.name}
yaml={this.state.yaml}
+ onSave={(name, yaml) => this.save(name,
yaml)}/>
+ </Page>
+ );
+ }
}
export default App;
diff --git a/karavan-designer/src/designer/karavan.css
b/karavan-designer/src/designer/karavan.css
index abfc40b..e440c1d 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -390,51 +390,62 @@
margin-left: auto;
margin-right: auto;
border-color: #e97826;
- border-style: solid;
border-radius: 3px;
border-width: 1px;
- background: #fff;
min-width: 160px;
- min-height: 73px;
- padding: 4px 10px;
+ padding: 4px 6px;
position: relative;
}
+.karavan .dsl-page .flows .step-element .choice .whens {
+ margin-top: -23px;
+}
.karavan .dsl-page .flows .step-element .header {
display: block;
justify-content: center;
position: relative;
- width: 100%;
+ border-color: #e97826;
+ border-style: solid;
+ border-radius: 3px;
+ border-width: 1px;
+ background: #fff;
+ padding: 3px 0px 3px 0px;
+ margin-bottom: 10px;
+ min-width: 160px;
z-index: 101;
}
-.element-builder {
+.karavan .dsl-page .flows .step-element-with-steps {
+ border-style: dotted;
+ background: transparent;
min-width: 160px;
- min-height: 65px;
+}
+
+.karavan .dsl-page .flows .step-element-with-steps .header {
border-color: #e97826;
border-style: solid;
border-radius: 3px;
border-width: 1px;
- padding: 4px 6px 0px 6px;
- margin: 0px auto 0px auto;
- display: flex;
- flex-direction: column;
- /*justify-content: space-between;*/
- width: fit-content;
+ background: #fff;
+ margin-bottom: 0;
+ min-width: 160px;
}
-.element-builder .header {
- display: block;
- justify-content: center;
- position: relative;
- margin-bottom: 6px;
+.karavan .dsl-page .flows .step-element-without-steps {
+ border-style: none;
+ background: transparent;
+ padding: 0;
+}
+
+.karavan .dsl-page .flows .step-element-without-steps .header {
+ margin-bottom: 0;
}
.step-element .header .delete-button,
.element-builder .header .delete-button {
position: absolute;
top: 0;
- right: -5px;
+ right: 0;
font-size: 13px;
line-height: 1;
border: 0;
@@ -474,8 +485,6 @@
.step-element .arrow-down {
font-size: 13px;
- /*margin-top: -10px;*/
- /*margin-bottom: -15px;*/
height: 16px;
color: #e97826;
}
diff --git a/karavan-designer/src/designer/ui/DslElement.tsx
b/karavan-designer/src/designer/ui/DslElement.tsx
index 7875bf7..a8f7612 100644
--- a/karavan-designer/src/designer/ui/DslElement.tsx
+++ b/karavan-designer/src/designer/ui/DslElement.tsx
@@ -8,7 +8,7 @@ import DeleteIcon from
"@patternfly/react-icons/dist/js/icons/times-icon";
import {CamelElement, Otherwise, ProcessorStep, WhenStep} from
"../model/CamelModel";
import {CamelApi} from "../api/CamelApi";
import {CamelUi} from "../api/CamelUi";
-import { EventBus } from "../api/EventBus";
+import {EventBus} from "../api/EventBus";
import {DslPath} from "./DslPath";
interface Props {
@@ -86,20 +86,36 @@ export class DslElement extends React.Component<Props,
State> {
return this.state.step.dslName.startsWith("from");
}
+ getArrow = () => {
+ return (
+ <img className={"arrow-down"} alt="arrow"
+ src="data:image/svg+xml,%3Csvg
xmlns='http://www.w3.org/2000/svg' version='1.1'
xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs'
x='0' y='0' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512'
xml:space='preserve' class=''%3E%3Cg
transform='matrix(1,0,0,1,1.7053025658242404e-13,1.1368683772161603e-13)'%3E%3Cg
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath
d='M374.108,373.328c-7.829-7.792-20.492-7.762-28.284,0.067L276,443.55 [...]
+ />)
+ }
+
render() {
return (
- <div className="step-element"
+ <div className={
+ this.state.element.hasSteps() || this.state.element.dslName
=== 'choice'
+ ? "step-element step-element-with-steps"
+ : "step-element step-element-without-steps"}
style={{
borderWidth: this.isSelected() ? "2px" : "1px",
marginTop: this.isRoot() ? "16px" : "",
zIndex: this.state.step.dslName === 'toStep' ? 20 : 10
}}
onClick={event => this.selectElement(event)}
- ref={el => {
- if (el && (this.state.step.dslName === 'fromStep' ||
this.state.step.dslName === 'toStep')) EventBus.sendPosition(this.state.step,
el.getBoundingClientRect());
- }}
+
>
- <div className="header">
+ <div className="header"
+ style={
+ ["choice",
"multicast"].includes(this.state.element.dslName)
+ ? {width:"100%", borderWidth: this.isSelected() ?
"2px" : "1px"}
+ : {borderWidth: this.isSelected() ? "2px" : "1px"}
+ }
+ ref={el => {
+ if (el && (this.state.step.dslName === 'fromStep' ||
this.state.step.dslName === 'toStep')) EventBus.sendPosition(this.state.step,
el.getBoundingClientRect());
+ }}>
<img draggable={false}
src={CamelUi.getIcon(this.state.element)}
className="icon" alt="icon">
@@ -110,22 +126,21 @@ export class DslElement extends React.Component<Props,
State> {
<DeleteIcon noVerticalAlign/>
</button>
</div>
+ {this.state.element.hasSteps() && !this.horizontal() &&
this.getArrow()}
<div className={this.state.element.dslName}>
{this.state.element.hasSteps() &&
<div className="steps" style={this.horizontal() ?
{display: "flex", flexDirection: "row"} : {}}>
{this.getSteps().map((step, index) => (
- <div key={step.uuid} style={this.horizontal() ?
{marginRight: (index < this.getSteps().length - 1) ? "6px" : "0"} :{}}>
+ <div key={step.uuid}
+ style={this.horizontal() ? {marginRight:
(index < this.getSteps().length - 1) ? "6px" : "0"} : {}}>
+ {this.state.element.hasSteps() &&
this.horizontal() && this.getArrow()}
<DslElement
openSelector={this.props.openSelector}
deleteElement={this.props.deleteElement}
selectElement={this.props.selectElement}
selectedUuid={this.state.selectedUuid}
step={step}/>
- {index < this.getSteps().length - 1 &&
!this.horizontal() &&
- <img className={"arrow-down"} alt="arrow"
- src="data:image/svg+xml,%3Csvg
xmlns='http://www.w3.org/2000/svg' version='1.1'
xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs'
x='0' y='0' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512'
xml:space='preserve' class=''%3E%3Cg
transform='matrix(1,0,0,1,1.7053025658242404e-13,1.1368683772161603e-13)'%3E%3Cg
xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath
d='M374.108,373.328c-7.829-7.792-20.492-7.762-28. [...]
- />
- }
+ {index < this.getSteps().length - 1 &&
!this.horizontal() && this.getArrow()}
</div>
))}
</div>
@@ -151,6 +166,7 @@ export class DslElement extends React.Component<Props,
State> {
<div className="whens" style={this.horizontal() ?
{display: "flex", flexDirection: "row"} : {}}>
{this.getWhens().map((when, index) => (
<div key={when.uuid} style={{marginLeft: (index
!== 0) ? "6px" : "0"}}>
+ {this.getArrow()}
<DslElement
openSelector={this.props.openSelector}
deleteElement={this.props.deleteElement}
@@ -160,14 +176,16 @@ export class DslElement extends React.Component<Props,
State> {
</div>
))}
{this.getOtherwise() &&
- <div key={this.getOtherwise().uuid}
style={{marginLeft: (this.getWhens().length > 0) ? "6px" : "0"}}>
- <DslElement
- openSelector={this.props.openSelector}
- deleteElement={this.props.deleteElement}
- selectElement={this.props.selectElement}
- selectedUuid={this.state.selectedUuid}
- step={this.getOtherwise()}/>
- </div>
+ <div key={this.getOtherwise().uuid}
+ style={{marginLeft: (this.getWhens().length > 0)
? "6px" : "0"}}>
+ {this.getArrow()}
+ <DslElement
+ openSelector={this.props.openSelector}
+ deleteElement={this.props.deleteElement}
+ selectElement={this.props.selectElement}
+ selectedUuid={this.state.selectedUuid}
+ step={this.getOtherwise()}/>
+ </div>
}
</div>
}
