Skip to content

Commit

Permalink
Fix #1325
Browse files Browse the repository at this point in the history
  • Loading branch information
mgubaidullin committed Jun 20, 2024
1 parent cf74158 commit 4d89d9e
Show file tree
Hide file tree
Showing 17 changed files with 207 additions and 86 deletions.
4 changes: 2 additions & 2 deletions karavan-app/src/main/webui/src/designer/karavan.css
Original file line number Diff line number Diff line change
Expand Up @@ -397,8 +397,8 @@
}

.karavan .dsl-page .graph .connections .icon {
height: 20px;
width: 20px;
height: 22px;
width: 22px;
}

.karavan .dsl-page .graph .connections .arrow {
Expand Down
22 changes: 12 additions & 10 deletions karavan-app/src/main/webui/src/designer/route/DslConnections.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ import {getIntegrations} from "../../topology/TopologyApi";
import {ComponentApi} from "karavan-core/lib/api/ComponentApi";

const overlapGap: number = 40;
const DIAMETER: number = 34;
const RADIUS: number = DIAMETER / 2;

export function DslConnections() {

Expand Down Expand Up @@ -146,8 +148,8 @@ export function DslConnections() {
const fromY = pos.headerRect.y + pos.headerRect.height / 2 - top;
const r = pos.headerRect.height / 2;
const incomingX = 20;
const imageX = incomingX - r + 5;
const imageY = fromY - r + 5;
const imageX = incomingX - r + 6;
const imageY = fromY - r + 6;
return (
<div key={pos.step.uuid + "-icon"}
style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
Expand Down Expand Up @@ -213,11 +215,11 @@ export function DslConnections() {
const r = pos.headerRect.height / 2;

const outgoingX = width - 20;
const outgoingY = data[1] + 15;
const outgoingY = data[1] + RADIUS;

const lineX1 = fromX + r;
const lineY1 = fromY;
const lineX2 = outgoingX - r * 2 + 4;
const lineX2 = outgoingX - r * 2 + 6;
const lineY2 = outgoingY;

const lineXi = lineX1 + 40;
Expand All @@ -227,7 +229,7 @@ export function DslConnections() {
<g key={pos.step.uuid + "-outgoing"}>
<circle cx={outgoingX} cy={outgoingY} r={r} className="circle-outgoing"/>
<path
d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - 15},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - RADIUS},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
className="path-incoming" markerEnd="url(#arrowhead)"/>
</g>
)
Expand All @@ -243,9 +245,9 @@ export function DslConnections() {
const name = directOrSeda ? (step?.parameters?.name) : '';
const r = pos.headerRect.height / 2;
const outgoingX = width - 20;
const outgoingY = data[1] + 15;
const imageX = outgoingX - r + 5;
const imageY = outgoingY - r + 5;
const outgoingY = data[1] + RADIUS;
const imageX = outgoingX - r + 6;
const imageY = outgoingY - r + 6;
return (
<div key={pos.step.uuid + "-icon"}
style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
Expand Down Expand Up @@ -405,8 +407,8 @@ export function DslConnections() {
const gapX = Math.abs(endX - startX);
const gapY = Math.abs(endTempY - startY);

const radX = gapX > 30 ? 20 : gapX/2;
const radY = gapY > 30 ? 20 : gapY/2;
const radX = gapX > DIAMETER ? 20 : gapX/2;
const radY = gapY > DIAMETER ? 20 : gapY/2;
const endY = rect2.y - top - radY - (toHeader ? 9 : 6);

const iRadX = startX > endX ? -1 * radX : radX;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -97,11 +97,11 @@
}

.karavan .step-element .header .text-bottom {
background-color: rgba(255, 255, 255, 0.5);
background-color: rgba(255, 255, 255, 0.2);
}

.karavan .step-element .header .text-right {
padding-left: 17px;
padding-left: 21px;
width: 50%;
text-align: start;
}
Expand All @@ -112,19 +112,38 @@
}

.karavan .step-element .header-icon {
border-color: var(--pf-v5-global--Color--200);
border-color: var(--pf-v5-global--Color--300);
border-style: solid;
border-radius: 30px;
border-width: 1px;
background: white;
width: 30px;
height: 30px;
width: 33px;
height: 33px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}

.karavan .step-element .header-icon-circle {
border-radius: 33px;
}

.karavan .step-element .header-icon-square {
border-radius: 33px;
}

.karavan .step-element .header-icon-diamond {
border-radius: 4px;
transform: rotate(45deg);
margin-top: -4px;
width: 30px;
height: 30px;
}
.karavan .step-element .header-icon-diamond .icon {
transform: rotate(-45deg);
}


.karavan .step-element .route-icons {
position: absolute;
top: 0;
Expand All @@ -133,7 +152,7 @@

.karavan .step-element .header .icon,
.element-builder .header .icon {
height: 20px;
height: 22px;
width: auto;
border: none;
-webkit-user-select: none;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,8 @@ export function DslElementHeader(props: Props) {
useDesignerStore((s) =>
[s.selectedUuids, s.selectedStep, s.showMoveConfirmation, s.setShowMoveConfirmation, s.setMoveElements], shallow)

const step: CamelElement = props.step;

function onOpenSelector(evt: React.MouseEvent, showSteps: boolean = true, isInsert: boolean = false) {
evt.stopPropagation();
if (isInsert && props.parent) {
Expand Down Expand Up @@ -143,9 +145,20 @@ export function DslElementHeader(props: Props) {
|| (rc.onCompletion !== undefined && rc.onCompletion.length > 0)
}

function getHeaderIconClasses(): string {
const classes: string[] = ['header-icon'];
if (['ToDefinition', 'FromDefinition'].includes(step.dslName)) {
classes.push('header-icon-square');
} else if (step.dslName === 'ChoiceDefinition') {
classes.push('header-icon-diamond');
} else {
classes.push('header-icon-circle');
}
return classes.join(" ");
}

function getHeaderClasses(): string {
const classes: string[] = [];
const step: CamelElement = props.step;
if (step.dslName === 'RouteDefinition') {
classes.push('header-route')
classes.push('header-bottom-line')
Expand Down Expand Up @@ -179,7 +192,7 @@ export function DslElementHeader(props: Props) {
<div className={"dsl-element " + headerClasses} style={getHeaderStyle()} ref={props.headerRef}>
{!['RouteConfigurationDefinition', 'RouteDefinition'].includes(props.step.dslName) &&
<div
className={"header-icon"}
className={getHeaderIconClasses()}
style={isWide() ? {width: ""} : {}}>
{CamelUi.getIconForElement(step)}
</div>
Expand Down Expand Up @@ -226,7 +239,7 @@ export function DslElementHeader(props: Props) {
let className = hasWideChildrenElement ? "text text-right" : "text text-bottom";
if (!checkRequired[0]) className = className + " header-text-required";
if (checkRequired[0]) {
return <Text className={className}>{title}</Text>
return <Text style={{marginTop: (step.dslName === 'ChoiceDefinition' ? '-5px' : 'inherit')}} className={className}>{title}</Text>
} else return (
<Tooltip position={"right"} className="tooltip-required-field"
content={checkRequired[1].map((text, i) => (<div key={i}>{text}</div>))}>
Expand Down
4 changes: 2 additions & 2 deletions karavan-app/src/main/webui/src/designer/utils/ElementIcon.css
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,14 @@
fill: var(--pf-v5-global--primary-color--100);
width: 20px;
height: 20px;
background: white;
background: transparent;
vertical-align: text-bottom;
}

.delete-button-icon {
fill: var(--pf-v5-global--danger-color--100);
width: 20px;
height: 20px;
background: white;
background: transparent;
vertical-align: text-bottom;
}
45 changes: 32 additions & 13 deletions karavan-designer/public/example/demo.camel.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,48 @@
message: Hello
period: 1
steps:
- aggregate:
id: aggregate-46cb
completionSize: 1
- to:
id: to-df39
uri: amqp
- aggregate:
id: aggregate-1193
completionSize: 121212
completionTimeout: "{{bean:beanName.method}}"
- to:
id: to-1600
uri: kamelet:kafka-sink
- rest:
id: rest-d262
description: Hello
get:
- id: get-7de4
to: direct:test
- choice:
id: choice-41b7
when:
- id: when-29c0
expression:
simple:
id: simple-289b
steps:
- aggregate:
id: aggregate-1193
completionSize: 121212
completionTimeout: "{{bean:beanName.method}}"
steps:
- bean:
id: bean-a9e0
- to:
id: to-df17
uri: amqp
otherwise:
id: otherwise-b00c
steps:
- aggregate:
id: aggregate-46cb
completionSize: 1
steps:
- to:
id: to-5565
uri: activemq
- route:
id: test
from:
id: from-aeed
uri: direct
parameters:
name: test
steps:
- to:
id: to-1daf
uri: kamelet:aws-bedrock-agent-runtime-sink
2 changes: 1 addition & 1 deletion karavan-designer/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ class MenuItem {

export function App() {

const [pageId, setPageId] = useState<string>('topology');
const [pageId, setPageId] = useState<string>('designer');
const [name, setName] = useState<string>('example.yaml');
const [key, setKey] = useState<string>('');
const [yaml, setYaml] = useState<string>('');
Expand Down
4 changes: 2 additions & 2 deletions karavan-designer/src/designer/karavan.css
Original file line number Diff line number Diff line change
Expand Up @@ -397,8 +397,8 @@
}

.karavan .dsl-page .graph .connections .icon {
height: 20px;
width: 20px;
height: 22px;
width: 22px;
}

.karavan .dsl-page .graph .connections .arrow {
Expand Down
22 changes: 12 additions & 10 deletions karavan-designer/src/designer/route/DslConnections.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ import {getIntegrations} from "../../topology/TopologyApi";
import {ComponentApi} from "karavan-core/lib/api/ComponentApi";

const overlapGap: number = 40;
const DIAMETER: number = 34;
const RADIUS: number = DIAMETER / 2;

export function DslConnections() {

Expand Down Expand Up @@ -146,8 +148,8 @@ export function DslConnections() {
const fromY = pos.headerRect.y + pos.headerRect.height / 2 - top;
const r = pos.headerRect.height / 2;
const incomingX = 20;
const imageX = incomingX - r + 5;
const imageY = fromY - r + 5;
const imageX = incomingX - r + 6;
const imageY = fromY - r + 6;
return (
<div key={pos.step.uuid + "-icon"}
style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
Expand Down Expand Up @@ -213,11 +215,11 @@ export function DslConnections() {
const r = pos.headerRect.height / 2;

const outgoingX = width - 20;
const outgoingY = data[1] + 15;
const outgoingY = data[1] + RADIUS;

const lineX1 = fromX + r;
const lineY1 = fromY;
const lineX2 = outgoingX - r * 2 + 4;
const lineX2 = outgoingX - r * 2 + 6;
const lineY2 = outgoingY;

const lineXi = lineX1 + 40;
Expand All @@ -227,7 +229,7 @@ export function DslConnections() {
<g key={pos.step.uuid + "-outgoing"}>
<circle cx={outgoingX} cy={outgoingY} r={r} className="circle-outgoing"/>
<path
d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - 15},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
d={`M ${lineX1},${lineY1} C ${lineXi - 20}, ${lineY1} ${lineX1 - RADIUS},${lineYi} ${lineXi},${lineYi} L ${lineX2},${lineY2}`}
className="path-incoming" markerEnd="url(#arrowhead)"/>
</g>
)
Expand All @@ -243,9 +245,9 @@ export function DslConnections() {
const name = directOrSeda ? (step?.parameters?.name) : '';
const r = pos.headerRect.height / 2;
const outgoingX = width - 20;
const outgoingY = data[1] + 15;
const imageX = outgoingX - r + 5;
const imageY = outgoingY - r + 5;
const outgoingY = data[1] + RADIUS;
const imageX = outgoingX - r + 6;
const imageY = outgoingY - r + 6;
return (
<div key={pos.step.uuid + "-icon"}
style={{display: "block", position: "absolute", top: imageY, left: imageX}}>
Expand Down Expand Up @@ -405,8 +407,8 @@ export function DslConnections() {
const gapX = Math.abs(endX - startX);
const gapY = Math.abs(endTempY - startY);

const radX = gapX > 30 ? 20 : gapX/2;
const radY = gapY > 30 ? 20 : gapY/2;
const radX = gapX > DIAMETER ? 20 : gapX/2;
const radY = gapY > DIAMETER ? 20 : gapY/2;
const endY = rect2.y - top - radY - (toHeader ? 9 : 6);

const iRadX = startX > endX ? -1 * radX : radX;
Expand Down
Loading

0 comments on commit 4d89d9e

Please sign in to comment.