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 644d887 Fix connections on diagramm (#11)
644d887 is described below
commit 644d887d87c35eb6aab7cb12f42ed7c8254ac3f8
Author: Marat Gubaidullin <[email protected]>
AuthorDate: Thu Oct 7 20:56:09 2021 -0400
Fix connections on diagramm (#11)
---
karavan-designer/src/designer/api/EventBus.tsx | 3 +++
karavan-designer/src/designer/ui/DslInOut.tsx | 17 +++++++++----
karavan-designer/src/designer/ui/DslPath.tsx | 28 ++++++++++++++++-----
.../src/designer/ui/KaravanDesigner.tsx | 20 ++++++++++++---
karavan.png | Bin 77254 -> 76684 bytes
5 files changed, 53 insertions(+), 15 deletions(-)
diff --git a/karavan-designer/src/designer/api/EventBus.tsx
b/karavan-designer/src/designer/api/EventBus.tsx
index f68a0c6..148cc60 100644
--- a/karavan-designer/src/designer/api/EventBus.tsx
+++ b/karavan-designer/src/designer/api/EventBus.tsx
@@ -19,6 +19,7 @@ import {CamelElement} from "../model/CamelModel";
import {InOut} from "../model/ConnectionModels";
const positions = new Subject<DslPosition>();
+const flowsPosition = new Subject<DOMRect>();
export class DslPosition {
step: CamelElement = new CamelElement("")
@@ -43,4 +44,6 @@ export class InOutPosition {
export const EventBus = {
sendPosition: (step: CamelElement, rect: DOMRect) => positions.next(new
DslPosition(step, rect)),
onPosition: () => positions.asObservable(),
+ sendFlowPosition: (rect: DOMRect) => flowsPosition.next(rect),
+ onFlowPosition: () => flowsPosition.asObservable(),
};
diff --git a/karavan-designer/src/designer/ui/DslInOut.tsx
b/karavan-designer/src/designer/ui/DslInOut.tsx
index fde856a..9d7edb5 100644
--- a/karavan-designer/src/designer/ui/DslInOut.tsx
+++ b/karavan-designer/src/designer/ui/DslInOut.tsx
@@ -28,6 +28,8 @@ interface State {
inout: InOut
top: number
sub?: Subscription
+ fsub?: Subscription
+ fRect?: DOMRect
}
export class DslInOut extends React.Component<Props, State> {
@@ -40,23 +42,28 @@ export class DslInOut extends React.Component<Props, State>
{
componentDidMount() {
const sub = EventBus.onPosition()?.subscribe(evt => {
if (evt.step.uuid === this.state.inout.uuid) {
- this.setPosition(evt);
+ this.setState({top: evt.rect.top});
}
});
this.setState({sub: sub});
+ const fsub = EventBus.onFlowPosition()?.subscribe(evt => {
+ this.setState({fRect: evt});
+ });
+ this.setState({fsub: fsub});
}
componentWillUnmount() {
this.state.sub?.unsubscribe();
+ this.state.fsub?.unsubscribe();
}
- setPosition(evt: DslPosition) {
- this.setState({top: evt.rect.top});
+ getTop() {
+ return this.state.fRect ? this.state.top - this.state.fRect?.top :
this.state.top;
}
render() {
return (
- <div className={this.state.inout.type === 'out' ? 'outgoing' :
'incoming'} style={{top: this.state.top + 'px'}}>
+ <div className={this.state.inout.type === 'out' ? 'outgoing' :
'incoming'} style={{top: this.getTop() + 'px'}}>
<img draggable={false}
src={this.state.inout.icon}
className="icon" alt="icon">
@@ -64,4 +71,4 @@ export class DslInOut extends React.Component<Props, State> {
</div>
);
}
-}
\ No newline at end of file
+}
diff --git a/karavan-designer/src/designer/ui/DslPath.tsx
b/karavan-designer/src/designer/ui/DslPath.tsx
index a9ab369..d8dc520 100644
--- a/karavan-designer/src/designer/ui/DslPath.tsx
+++ b/karavan-designer/src/designer/ui/DslPath.tsx
@@ -25,10 +25,13 @@ interface Props {
interface State {
uuid: string,
+ inout?: "in" | "out",
width: number,
left: number,
top: number,
sub?: Subscription
+ fsub?: Subscription
+ fRect?: DOMRect
}
export class DslPath extends React.Component<Props, State> {
@@ -47,30 +50,43 @@ export class DslPath extends React.Component<Props, State> {
}
});
this.setState({sub: sub});
+ const fsub = EventBus.onFlowPosition()?.subscribe(evt => {
+ this.setState({fRect: evt});
+ });
+ this.setState({fsub: fsub});
}
componentWillUnmount() {
this.state.sub?.unsubscribe();
+ this.state.fsub?.unsubscribe();
}
setPosition(evt: DslPosition) {
if (evt.step.dslName === 'fromStep'){
- this.setState({left: 56, top: (evt.rect.top + 25), width:
(evt.rect.x) - 56});
+ this.setState({inout:"in", left: 56, top: (evt.rect.top + 25),
width: (evt.rect.x) - 56});
} else {
- this.setState({left: evt.rect.x + evt.rect.width, top:
(evt.rect.top + 25), width: (evt.rect.x + evt.rect.width + 200)});
+ this.setState({inout:"out", left: evt.rect.x + evt.rect.width,
top: (evt.rect.top + 25), width: (evt.rect.x + evt.rect.width + 200)});
}
}
+ getTop(){
+ return this.state.fRect ? this.state.top - this.state.fRect.top :
this.state.top;
+ }
+
+ getWidth(){
+ return this.state.fRect && this.state.inout === 'out' ?
this.state.fRect.width - this.state.left : this.state.width;
+ }
+
render() {
return (
<svg style={{
- width: this.state.width,
+ width: this.getWidth(),
height: '2',
position: "absolute",
left: this.state.left,
- top: this.state.top
- }} viewBox={"0 0 " + this.state.width + " 2"}>
- <path d={"M 0 0, " + this.state.width + " 0"}
className="path"/>
+ top: this.getTop()
+ }} viewBox={"0 0 " + this.getWidth() + " 2"}>
+ <path d={"M 0 0, " + this.getWidth() + " 0"} className="path"/>
</svg>
);
}
diff --git a/karavan-designer/src/designer/ui/KaravanDesigner.tsx
b/karavan-designer/src/designer/ui/KaravanDesigner.tsx
index ed7b761..09800b6 100644
--- a/karavan-designer/src/designer/ui/KaravanDesigner.tsx
+++ b/karavan-designer/src/designer/ui/KaravanDesigner.tsx
@@ -31,6 +31,7 @@ import {CamelApiExt} from "../api/CamelApiExt";
import {CamelApi} from "../api/CamelApi";
import {DslConnections} from "./DslConnections";
import {CamelUi} from "../api/CamelUi";
+import {EventBus} from "../api/EventBus";
interface Props {
onSave?: (name: string, yaml: string) => void
@@ -62,9 +63,15 @@ export class KaravanDesigner extends React.Component<Props,
State> {
};
componentDidMount() {
- console.log("Designer");
- console.log(this.props.name);
- console.log(this.state.integration);
+ window.addEventListener('resize', this.handleResize);
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('resize', this.handleResize);
+ }
+
+ handleResize = ()=>{
+ this.setState({key: Math.random().toString()});
}
componentDidUpdate = (prevProps: Readonly<Props>, prevState:
Readonly<State>, snapshot?: any) => {
@@ -139,7 +146,12 @@ export class KaravanDesigner extends
React.Component<Props, State> {
return (
<PageSection className="dsl-page" isFilled padding={{default:
'noPadding'}}>
<div className="dsl-page-columns">
- <div className="flows" data-click="FLOWS" onClick={event
=> this.unselectElement(event)}>
+ <div className="flows"
+ data-click="FLOWS"
+ onClick={event => this.unselectElement(event)}
+ ref={el => {
+ if (el)
EventBus.sendFlowPosition(el.getBoundingClientRect());
+ }}>
<DslConnections key={this.state.key + "-connections"}
integration={this.state.integration}
/>
diff --git a/karavan.png b/karavan.png
index eee8463..1809130 100644
Binary files a/karavan.png and b/karavan.png differ
