diff --git a/karavan-app/src/main/webui/src/designer/karavan.css b/karavan-app/src/main/webui/src/designer/karavan.css index d3e96c87871..7053de7d8d4 100644 --- a/karavan-app/src/main/webui/src/designer/karavan.css +++ b/karavan-app/src/main/webui/src/designer/karavan.css @@ -397,8 +397,8 @@ } .karavan .dsl-page .graph .connections .icon { - height: 20px; - width: 20px; + height: 22px; + width: 22px; } .karavan .dsl-page .graph .connections .arrow { diff --git a/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx b/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx index f0b0ff7a782..d1720b55584 100644 --- a/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx +++ b/karavan-app/src/main/webui/src/designer/route/DslConnections.tsx @@ -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() { @@ -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}}> @@ -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; @@ -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> ) @@ -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}}> @@ -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; diff --git a/karavan-app/src/main/webui/src/designer/route/element/DslElement.css b/karavan-app/src/main/webui/src/designer/route/element/DslElement.css index 4f0109c54c0..785f667b8a8 100644 --- a/karavan-app/src/main/webui/src/designer/route/element/DslElement.css +++ b/karavan-app/src/main/webui/src/designer/route/element/DslElement.css @@ -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; } @@ -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; @@ -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; diff --git a/karavan-app/src/main/webui/src/designer/route/element/DslElementHeader.tsx b/karavan-app/src/main/webui/src/designer/route/element/DslElementHeader.tsx index a9f78827df2..c911dc2c2df 100644 --- a/karavan-app/src/main/webui/src/designer/route/element/DslElementHeader.tsx +++ b/karavan-app/src/main/webui/src/designer/route/element/DslElementHeader.tsx @@ -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) { @@ -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') @@ -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> @@ -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>))}> diff --git a/karavan-app/src/main/webui/src/designer/utils/ElementIcon.css b/karavan-app/src/main/webui/src/designer/utils/ElementIcon.css index 15f2dbe3c2c..f89c962bfd5 100644 --- a/karavan-app/src/main/webui/src/designer/utils/ElementIcon.css +++ b/karavan-app/src/main/webui/src/designer/utils/ElementIcon.css @@ -20,7 +20,7 @@ fill: var(--pf-v5-global--primary-color--100); width: 20px; height: 20px; - background: white; + background: transparent; vertical-align: text-bottom; } @@ -28,6 +28,6 @@ fill: var(--pf-v5-global--danger-color--100); width: 20px; height: 20px; - background: white; + background: transparent; vertical-align: text-bottom; } diff --git a/karavan-designer/public/example/demo.camel.yaml b/karavan-designer/public/example/demo.camel.yaml index 5d0138d7aa7..ef7ef78fee7 100644 --- a/karavan-designer/public/example/demo.camel.yaml +++ b/karavan-designer/public/example/demo.camel.yaml @@ -8,25 +8,40 @@ 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: @@ -34,3 +49,7 @@ uri: direct parameters: name: test + steps: + - to: + id: to-1daf + uri: kamelet:aws-bedrock-agent-runtime-sink diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx index b7344e3078f..bc6d9f7b356 100644 --- a/karavan-designer/src/App.tsx +++ b/karavan-designer/src/App.tsx @@ -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>(''); diff --git a/karavan-designer/src/designer/karavan.css b/karavan-designer/src/designer/karavan.css index d3e96c87871..7053de7d8d4 100644 --- a/karavan-designer/src/designer/karavan.css +++ b/karavan-designer/src/designer/karavan.css @@ -397,8 +397,8 @@ } .karavan .dsl-page .graph .connections .icon { - height: 20px; - width: 20px; + height: 22px; + width: 22px; } .karavan .dsl-page .graph .connections .arrow { diff --git a/karavan-designer/src/designer/route/DslConnections.tsx b/karavan-designer/src/designer/route/DslConnections.tsx index f0b0ff7a782..d1720b55584 100644 --- a/karavan-designer/src/designer/route/DslConnections.tsx +++ b/karavan-designer/src/designer/route/DslConnections.tsx @@ -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() { @@ -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}}> @@ -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; @@ -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> ) @@ -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}}> @@ -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; diff --git a/karavan-designer/src/designer/route/element/DslElement.css b/karavan-designer/src/designer/route/element/DslElement.css index 4f0109c54c0..785f667b8a8 100644 --- a/karavan-designer/src/designer/route/element/DslElement.css +++ b/karavan-designer/src/designer/route/element/DslElement.css @@ -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; } @@ -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; @@ -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; diff --git a/karavan-designer/src/designer/route/element/DslElementHeader.tsx b/karavan-designer/src/designer/route/element/DslElementHeader.tsx index a9f78827df2..c911dc2c2df 100644 --- a/karavan-designer/src/designer/route/element/DslElementHeader.tsx +++ b/karavan-designer/src/designer/route/element/DslElementHeader.tsx @@ -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) { @@ -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') @@ -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> @@ -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>))}> diff --git a/karavan-designer/src/designer/utils/ElementIcon.css b/karavan-designer/src/designer/utils/ElementIcon.css index 15f2dbe3c2c..f89c962bfd5 100644 --- a/karavan-designer/src/designer/utils/ElementIcon.css +++ b/karavan-designer/src/designer/utils/ElementIcon.css @@ -20,7 +20,7 @@ fill: var(--pf-v5-global--primary-color--100); width: 20px; height: 20px; - background: white; + background: transparent; vertical-align: text-bottom; } @@ -28,6 +28,6 @@ fill: var(--pf-v5-global--danger-color--100); width: 20px; height: 20px; - background: white; + background: transparent; vertical-align: text-bottom; } diff --git a/karavan-space/src/designer/karavan.css b/karavan-space/src/designer/karavan.css index d3e96c87871..7053de7d8d4 100644 --- a/karavan-space/src/designer/karavan.css +++ b/karavan-space/src/designer/karavan.css @@ -397,8 +397,8 @@ } .karavan .dsl-page .graph .connections .icon { - height: 20px; - width: 20px; + height: 22px; + width: 22px; } .karavan .dsl-page .graph .connections .arrow { diff --git a/karavan-space/src/designer/route/DslConnections.tsx b/karavan-space/src/designer/route/DslConnections.tsx index f0b0ff7a782..d1720b55584 100644 --- a/karavan-space/src/designer/route/DslConnections.tsx +++ b/karavan-space/src/designer/route/DslConnections.tsx @@ -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() { @@ -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}}> @@ -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; @@ -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> ) @@ -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}}> @@ -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; diff --git a/karavan-space/src/designer/route/element/DslElement.css b/karavan-space/src/designer/route/element/DslElement.css index 4f0109c54c0..785f667b8a8 100644 --- a/karavan-space/src/designer/route/element/DslElement.css +++ b/karavan-space/src/designer/route/element/DslElement.css @@ -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; } @@ -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; @@ -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; diff --git a/karavan-space/src/designer/route/element/DslElementHeader.tsx b/karavan-space/src/designer/route/element/DslElementHeader.tsx index a9f78827df2..c911dc2c2df 100644 --- a/karavan-space/src/designer/route/element/DslElementHeader.tsx +++ b/karavan-space/src/designer/route/element/DslElementHeader.tsx @@ -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) { @@ -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') @@ -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> @@ -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>))}> diff --git a/karavan-space/src/designer/utils/ElementIcon.css b/karavan-space/src/designer/utils/ElementIcon.css index 15f2dbe3c2c..f89c962bfd5 100644 --- a/karavan-space/src/designer/utils/ElementIcon.css +++ b/karavan-space/src/designer/utils/ElementIcon.css @@ -20,7 +20,7 @@ fill: var(--pf-v5-global--primary-color--100); width: 20px; height: 20px; - background: white; + background: transparent; vertical-align: text-bottom; } @@ -28,6 +28,6 @@ fill: var(--pf-v5-global--danger-color--100); width: 20px; height: 20px; - background: white; + background: transparent; vertical-align: text-bottom; }