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 d5e0ca7 UI improvements (#167)
d5e0ca7 is described below
commit d5e0ca70ea68697f84fd6d8bc59deca4753ad65e
Author: Marat Gubaidullin <marat.gubaidul...@gmail.com>
AuthorDate: Tue Feb 1 22:42:10 2022 -0500
UI improvements (#167)
---
karavan-designer/src/designer/DslConnections.tsx | 17 +++++++-------
karavan-designer/src/designer/KaravanDesigner.tsx | 12 ++--------
karavan-designer/src/designer/karavan.css | 2 ++
karavan-designer/src/index.css | 1 -
karavan-vscode/webview/index.css | 27 ++++++++++++-----------
5 files changed, 26 insertions(+), 33 deletions(-)
diff --git a/karavan-designer/src/designer/DslConnections.tsx
b/karavan-designer/src/designer/DslConnections.tsx
index 0a92bd9..46ed02e 100644
--- a/karavan-designer/src/designer/DslConnections.tsx
+++ b/karavan-designer/src/designer/DslConnections.tsx
@@ -27,7 +27,6 @@ interface Props {
width: number
height: number
top: number
- scrollTop: number
}
interface State {
@@ -82,7 +81,7 @@ export class DslConnections extends React.Component<Props,
State> {
const pos = this.state.steps.get(data[0]);
if (pos) {
const fromX = pos.headerRect.x + pos.headerRect.width / 2;
- const fromY = pos.headerRect.y + pos.headerRect.height / 2 +
this.props.scrollTop - this.props.top;
+ const fromY = pos.headerRect.y + pos.headerRect.height / 2 -
this.props.top;
const r = pos.headerRect.height / 2;
const incomingX = 20;
@@ -129,7 +128,7 @@ export class DslConnections extends React.Component<Props,
State> {
const y2 = pos2.headerRect.y + pos2.headerRect.height / 2;
return y1 > y2 ? 1 : -1
})
- .map(pos => [pos.step.uuid, pos.headerRect.y +
this.props.scrollTop - this.props.top]);
+ .map(pos => [pos.step.uuid, pos.headerRect.y - this.props.top]);
while (this.hasOverlap(outs)){
outs = this.addGap(outs);
}
@@ -140,7 +139,7 @@ export class DslConnections extends React.Component<Props,
State> {
const pos = this.state.steps.get(data[0]);
if (pos){
const fromX = pos.headerRect.x + pos.headerRect.width / 2;
- const fromY = pos.headerRect.y + pos.headerRect.height / 2 +
this.props.scrollTop - this.props.top;
+ const fromY = pos.headerRect.y + pos.headerRect.height / 2 -
this.props.top;
const r = pos.headerRect.height / 2;
const outgoingX = this.props.width - 20;
@@ -178,7 +177,7 @@ export class DslConnections extends React.Component<Props,
State> {
getCircle(pos: DslPosition) {
const cx = pos.headerRect.x + pos.headerRect.width / 2;
- const cy = pos.headerRect.y + pos.headerRect.height / 2 +
this.props.scrollTop - this.props.top;
+ const cy = pos.headerRect.y + pos.headerRect.height / 2 -
this.props.top;
const r = pos.headerRect.height / 2;
return (
<circle cx={cx} cy={cy} r={r} stroke="transparent" strokeWidth="3"
fill="transparent" key={pos.step.uuid + "-circle"}/>
@@ -199,12 +198,12 @@ export class DslConnections extends
React.Component<Props, State> {
getArrow(pos: DslPosition) {
const endX = pos.headerRect.x + pos.headerRect.width / 2;
- const endY = pos.headerRect.y - 9 + this.props.scrollTop -
this.props.top;
+ const endY = pos.headerRect.y - 9 - this.props.top;
if (pos.parent){
const parent = this.state.steps.get(pos.parent.uuid);
if (parent){
const startX = parent.headerRect.x + parent.headerRect.width /
2;
- const startY = parent.headerRect.y + parent.headerRect.height
+ this.props.scrollTop - this.props.top;
+ const startY = parent.headerRect.y + parent.headerRect.height
- this.props.top;
if (!pos.inSteps || (pos.inSteps && pos.position === 0) &&
parent.step.dslName !== 'MulticastDefinition'){
return (
<path d={`M ${startX},${startY} C ${startX},${endY}
${endX},${startY} ${endX},${endY}`}
@@ -220,7 +219,7 @@ export class DslConnections extends React.Component<Props,
State> {
if (prev){
const r = this.hasSteps(prev.step) ? prev.rect :
prev.headerRect;
const prevX = r.x + r.width / 2;
- const prevY = r.y + r.height + this.props.scrollTop -
this.props.top;
+ const prevY = r.y + r.height - this.props.top;
return (
<line x1={prevX} y1={prevY} x2={endX} y2={endY}
className="path" key={pos.step.uuid} markerEnd="url(#arrowhead)"/>
)
@@ -230,7 +229,7 @@ export class DslConnections extends React.Component<Props,
State> {
if (prev){
const r = this.hasSteps(prev.step) ? prev.rect :
prev.headerRect;
const prevX = r.x + r.width / 2;
- const prevY = r.y + r.height + this.props.scrollTop -
this.props.top;
+ const prevY = r.y + r.height - this.props.top;
return (
<line x1={prevX} y1={prevY} x2={endX} y2={endY}
className="path" key={pos.step.uuid} markerEnd="url(#arrowhead)"/>
)
diff --git a/karavan-designer/src/designer/KaravanDesigner.tsx
b/karavan-designer/src/designer/KaravanDesigner.tsx
index 0cddf5d..0b2d0fc 100644
--- a/karavan-designer/src/designer/KaravanDesigner.tsx
+++ b/karavan-designer/src/designer/KaravanDesigner.tsx
@@ -55,7 +55,6 @@ interface State {
width: number
height: number
top: number
- scrollTop: number
}
export class KaravanDesigner extends React.Component<Props, State> {
@@ -72,7 +71,6 @@ export class KaravanDesigner extends React.Component<Props,
State> {
width: 1000,
height: 1000,
top: 0,
- scrollTop: 0,
};
componentDidMount() {
@@ -191,12 +189,6 @@ export class KaravanDesigner extends
React.Component<Props, State> {
});
}
- onScroll(event: React.UIEvent<HTMLDivElement>) {
- if (event.nativeEvent.target && (event.nativeEvent.target as
any).scrollTop){
- this.setState({scrollTop: (event.nativeEvent.target as
any).scrollTop});
- }
- }
-
onResizePage(el: HTMLDivElement | null){
const rect = el?.getBoundingClientRect();
if (el && rect && (rect?.width !== this.state.width || rect.height !==
this.state.height || rect.top !== this.state.top)){
@@ -208,8 +200,8 @@ export class KaravanDesigner extends React.Component<Props,
State> {
return (
<PageSection className="dsl-page" isFilled padding={{default:
'noPadding'}}>
<div className="dsl-page-columns">
- <div key={this.state.key} className="graph"
onScroll={event => this.onScroll(event)}>
- <DslConnections height={this.state.height}
width={this.state.width} scrollTop={this.state.scrollTop} top={this.state.top}
integration={this.state.integration}/>
+ <div className="graph" onScroll={event => {}}>
+ <DslConnections height={this.state.height}
width={this.state.width} top={this.state.top}
integration={this.state.integration}/>
<div className="flows" data-click="FLOWS"
onClick={event => this.unselectElement(event)}
ref={el => this.onResizePage(el)}>
{this.state.integration.spec.flows?.map((from:any,
index: number) => (
diff --git a/karavan-designer/src/designer/karavan.css
b/karavan-designer/src/designer/karavan.css
index 9a18db6..3ebe2ea 100644
--- a/karavan-designer/src/designer/karavan.css
+++ b/karavan-designer/src/designer/karavan.css
@@ -374,6 +374,8 @@
/*Graph*/
.karavan .dsl-page .graph {
display: block;
+ flex-direction: column;
+ font-size: 13px;
height: 100%;
width: 100%;
position: relative;
diff --git a/karavan-designer/src/index.css b/karavan-designer/src/index.css
index 47ba52d..33df02d 100644
--- a/karavan-designer/src/index.css
+++ b/karavan-designer/src/index.css
@@ -22,7 +22,6 @@ body,
--pf-global--active-color--200: #fee3c3 !important;
--pf-global--active-color--300: #fca338 !important;
--pf-global--active-color--400: #fca338 !important;
-
}
#root {
diff --git a/karavan-vscode/webview/index.css b/karavan-vscode/webview/index.css
index a4902b5..0d614a8 100644
--- a/karavan-vscode/webview/index.css
+++ b/karavan-vscode/webview/index.css
@@ -14,7 +14,7 @@ body,
}
.vscode-dark .karavan .dsl-page .dsl-page-columns {
- background-color: #252526;
+ background-color: #1C1C1D;
}
.vscode-dark .karavan .dsl-page .flows .step-element .header-route {
@@ -37,11 +37,12 @@ body,
}
.vscode-dark .step-element .header-icon {
- background: #fb8824;
+ background: #3B3B3B;
+ border-color: #fca338;
}
.vscode-dark .step-element .header .text-bottom {
- background-color: rgb(37,37,38, 0.5);
+ background-color: rgb(27,27,28, 0.5);
}
.vscode-dark .karavan .dsl-page .properties {
@@ -87,24 +88,24 @@ body,
--pf-c-switch__toggle--before--BackgroundColor: black;
}
-.vscode-dark .karavan .dsl-page .flows .connections .path {
- stroke: #fee3c3;
+.vscode-dark .karavan .dsl-page .graph .connections .arrow {
+ stroke: #fca338;
+ fill: #fca338;
}
-.vscode-dark .karavan .dsl-page .flows .connections .outgoing,
-.vscode-dark .karavan .dsl-page .flows .connections .incoming {
- border-color: #fee3c3;
- background: #fee3c3;
+.vscode-dark .karavan .dsl-page .graph .connections .path {
+ stroke: #fca338;
}
+.vscode-dark .karavan .dsl-page .graph .connections .path-incoming {
+ stroke: #fca338;
+}
.vscode-dark .karavan .dsl-page .graph .connections .circle-outgoing,
.vscode-dark .karavan .dsl-page .graph .connections .circle-incoming {
- stroke: #fb8824;
- stroke-width: 1;
- fill: #fb8824;
+ stroke: #fca338;
+ fill: #3B3B3B;
}
-
.vscode-dark .pf-c-modal-box__title-text {
color: #cecece;
}
