You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2023/12/06 00:51:47 UTC
(camel-karavan) 03/04: Second example of new Designer #1012
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
commit 007a3538c74fec2c4d53f671cabedb59193f49d5
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Tue Dec 5 19:33:54 2023 -0500
Second example of new Designer #1012
---
.../src/designer/route/DslConnections.tsx | 33 +++++++++++++---------
.../src/designer/route/element/DslElement.css | 6 ++--
.../src/designer/route/element/DslElement.tsx | 14 ++++-----
3 files changed, 29 insertions(+), 24 deletions(-)
diff --git a/karavan-designer/src/designer/route/DslConnections.tsx b/karavan-designer/src/designer/route/DslConnections.tsx
index 6bb318c2..5f9467b6 100644
--- a/karavan-designer/src/designer/route/DslConnections.tsx
+++ b/karavan-designer/src/designer/route/DslConnections.tsx
@@ -246,19 +246,10 @@ export function DslConnections() {
const showArrow = pos.prevStep !== undefined && !['TryDefinition', 'ChoiceDefinition'].includes(pos.prevStep.dslName);
const name = pos.prevStep?.dslName;
if (parent && showArrow) {
- const startX = parent.headerRect.x + parent.headerRect.width / 2 - left;
- const startY = parent.headerRect.y + parent.headerRect.height - top;
if ((!pos.inSteps || (pos.inSteps && pos.position === 0)) && parent.step.dslName !== 'MulticastDefinition') {
- return (
- <path name={pos.step.dslName}
- d={`M ${startX},${startY} C ${startX},${endY} ${endX},${startY} ${endX},${endY}`}
- className="path" key={pos.step.uuid} markerEnd="url(#arrowhead)"/>
- )
+ return getArrows(pos);
} else if (parent.step.dslName === 'MulticastDefinition' && pos.inSteps) {
- return (
- <path d={`M ${startX},${startY} C ${startX},${endY} ${endX},${startY} ${endX},${endY}`}
- name={name} className="path" key={pos.step.uuid} markerEnd="url(#arrowhead)"/>
- )
+ return getArrows(pos)
} else if (pos.inSteps && pos.position > 0 && !hasSteps(pos.step)) {
const prev = getPreviousStep(pos);
if (prev) {
@@ -286,12 +277,28 @@ export function DslConnections() {
}
}
+ function getArrows(pos: DslPosition) {
+ if (pos.parent) {
+ const parent = steps.get(pos?.parent.uuid);
+ if (parent) {
+ const rect1 = parent.headerRect;
+ const rect2 = pos.headerRect;
+ return getComplexArrow(pos.step.uuid, rect1, rect2);
+ }
+ }
+ }
+
function getButtonArrow(btn: ButtonPosition) {
const rect1 = btn.rect;
const uuid = btn.nextstep.uuid;
const nextStep = steps.get(uuid);
const rect2 = nextStep?.rect;
if (rect1 && rect2) {
+ return getComplexArrow(uuid, rect1, rect2);
+ }
+ }
+
+ function getComplexArrow(key: string, rect1: DOMRect, rect2: DOMRect) {
const startX = rect1.x + rect1.width / 2 - left;
const startY = rect1.y + rect1.height - top - 2;
const endX = rect2.x + rect2.width / 2 - left;
@@ -328,11 +335,9 @@ export function DslConnections() {
+ ` Q ${Q1_X1} ${Q1_Y1} ${Q1_X2} ${Q1_Y2}`
+ ` L ${LX2} ${LY2}`
+ ` Q ${Q2_X1} ${Q2_Y1} ${Q2_X2} ${Q2_Y2}`
- // + ` L ${endX} ${endY}`;
return (
- <path key={btn.uuid} d={path} className="path" markerEnd="url(#arrowhead)"/>
+ <path key={key} d={path} className="path" markerEnd="url(#arrowhead)"/>
)
- }
}
function getSvg() {
diff --git a/karavan-designer/src/designer/route/element/DslElement.css b/karavan-designer/src/designer/route/element/DslElement.css
index 85f7b46a..8e04b5f7 100644
--- a/karavan-designer/src/designer/route/element/DslElement.css
+++ b/karavan-designer/src/designer/route/element/DslElement.css
@@ -41,7 +41,7 @@
.karavan .step-element .header .delete-button,
.element-builder .header .delete-button {
position: absolute;
- top: -8px;
+ top: -7px;
line-height: 1;
border: 0;
padding: 0;
@@ -135,7 +135,7 @@
top: 5px;
left: 5px;
font-size: 15px;
- height: 15px;
+ height: 24px;
line-height: 1;
border: 0;
padding: 0;
@@ -148,7 +148,7 @@
.karavan .step-element .insert-element-button {
position: absolute;
- top: -8px;
+ top: -7px;
line-height: 1;
border: 0;
padding: 0;
diff --git a/karavan-designer/src/designer/route/element/DslElement.tsx b/karavan-designer/src/designer/route/element/DslElement.tsx
index ce780636..1deb46da 100644
--- a/karavan-designer/src/designer/route/element/DslElement.tsx
+++ b/karavan-designer/src/designer/route/element/DslElement.tsx
@@ -412,11 +412,10 @@ export function DslElement(props: Props) {
const hideAddButton = step.dslName === 'StepDefinition' && !CamelDisplayUtil.isStepDefinitionExpanded(integration, step.uuid, selectedUuids.at(0));
if (hideAddButton) return (<></>)
else return (
- <Tooltip position={"bottom"}
- content={<div>{nextStep?.dslName.replace("Definition", "")}</div>}
- // content={<div>{"Add step to " + CamelDisplayUtil.getTitle(step)}</div>}
- >
- <div ref={addButtonRef}>
+ <div ref={addButtonRef}>
+ <Tooltip position={"bottom"}
+ content={<div>{"Add step to " + CamelDisplayUtil.getTitle(step)}</div>}
+ >
<button type="button"
ref={el => sendButtonPosition(el)}
aria-label="Add"
@@ -424,8 +423,9 @@ export function DslElement(props: Props) {
className={isAddStepButtonLeft() ? "add-button add-button-left" : "add-button add-button-bottom"}>
<AddElementIcon/>
</button>
- </div>
- </Tooltip>
+
+ </Tooltip>
+ </div>
)
}