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 f0a5d2142ea649464acacd42e542872e13db9241 Author: Marat Gubaidullin <[email protected]> AuthorDate: Fri Sep 8 19:48:22 2023 -0400 Sync karavan space for #817 --- karavan-space/src/designer/KaravanDesigner.tsx | 26 +++++++++---------- karavan-space/src/designer/karavan.css | 3 ++- .../src/designer/route/DslConnections.tsx | 4 +-- karavan-space/src/designer/route/DslElement.tsx | 29 +++++++++++----------- .../src/designer/route/useRouteDesignerHook.tsx | 7 ++---- 5 files changed, 33 insertions(+), 36 deletions(-) diff --git a/karavan-space/src/designer/KaravanDesigner.tsx b/karavan-space/src/designer/KaravanDesigner.tsx index ed6ad193..badf8ba8 100644 --- a/karavan-space/src/designer/KaravanDesigner.tsx +++ b/karavan-space/src/designer/KaravanDesigner.tsx @@ -133,19 +133,19 @@ export function KaravanDesigner (props: Props) { <Tab eventKey='rest' title={getTab("REST", "REST services", "rest")}></Tab> <Tab eventKey='beans' title={getTab("Beans", "Beans Configuration", "beans")}></Tab> </Tabs> - {tab === 'routes' && <Tooltip content={"Hide Log elements"}> - <Switch - isReversed - isChecked={hideLogDSL} - onChange={(_, checked) => { - setHideLogDSL(checked) - }} - aria-label={"Hide Log"} - id="hideLogDSL" - name="hideLogDSL" - className={"hide-log"} - /> - </Tooltip>} + {/*{tab === 'routes' && <Tooltip content={"Hide Log elements"}>*/} + {/* <Switch*/} + {/* isReversed*/} + {/* isChecked={hideLogDSL}*/} + {/* onChange={(_, checked) => {*/} + {/* setHideLogDSL(checked)*/} + {/* }}*/} + {/* aria-label={"Hide Log"}*/} + {/* id="hideLogDSL"*/} + {/* name="hideLogDSL"*/} + {/* className={"hide-log"}*/} + {/* />*/} + {/*</Tooltip>}*/} </div> {tab === 'routes' && <RouteDesigner/>} {tab === 'rest' && <RestDesigner/>} diff --git a/karavan-space/src/designer/karavan.css b/karavan-space/src/designer/karavan.css index 11324971..bf4d9d49 100644 --- a/karavan-space/src/designer/karavan.css +++ b/karavan-space/src/designer/karavan.css @@ -38,7 +38,8 @@ height: 36px; } -.karavan .pf-v5-c-switch__input:focus ~ .pf-v5-c-switch__toggle { +.karavan .pf-v5-c-switch__input:focus ~ .pf-v5-c-switch__toggle, +.pf-v5-c-modal-box .pf-v5-c-switch__input:focus ~ .pf-v5-c-switch__toggle { outline: transparent; outline-offset: 0; } diff --git a/karavan-space/src/designer/route/DslConnections.tsx b/karavan-space/src/designer/route/DslConnections.tsx index 9f3578ad..c9d85ccb 100644 --- a/karavan-space/src/designer/route/DslConnections.tsx +++ b/karavan-space/src/designer/route/DslConnections.tsx @@ -30,8 +30,8 @@ const outgoingDefinitions: string[] = ['ToDefinition', 'KameletDefinition', 'ToD export function DslConnections() { const [integration] = useIntegrationStore((state) => [state.integration], shallow) - const [width, height, top, left] = useDesignerStore((s) => - [s.width, s.height, s.top, s.left], shallow) + const [width, height, top, left, hideLogDSL] = useDesignerStore((s) => + [s.width, s.height, s.top, s.left, s.hideLogDSL], shallow) const [ steps, addStep, deleteStep, clearSteps] = useConnectionsStore((s) => [s.steps, s.addStep, s.deleteStep, s.clearSteps], shallow) useEffect(() => { diff --git a/karavan-space/src/designer/route/DslElement.tsx b/karavan-space/src/designer/route/DslElement.tsx index f3283154..9aaf6735 100644 --- a/karavan-space/src/designer/route/DslElement.tsx +++ b/karavan-space/src/designer/route/DslElement.tsx @@ -51,7 +51,7 @@ export function DslElement(props: Props) { const [selectedUuids, selectedStep, showMoveConfirmation, setShowMoveConfirmation, hideLogDSL] = useDesignerStore((s) => - [s.selectedUuids, s.selectedStep, s.showMoveConfirmation, s.setShowMoveConfirmation, s.hideLogDSL], shallow) + [s.selectedUuids, s.selectedStep, s.showMoveConfirmation, s.setShowMoveConfirmation, s.hideLogDSL], shallow) const [isDragging, setIsDragging] = useState<boolean>(false); const [isDraggedOver, setIsDraggedOver] = useState<boolean>(false); @@ -197,20 +197,21 @@ export function DslElement(props: Props) { function sendPosition(el: HTMLDivElement | null) { const isSelected = isElementSelected(); const isHidden = isElementHidden(); - if (isHidden) { - EventBus.sendPosition("delete", props.step, props.parent, new DOMRect(), new DOMRect(), 0); - } else { - if (el) { - const header = Array.from(el.childNodes.values()).filter((n: any) => n.classList.contains("header"))[0]; - if (header) { - const headerIcon: any = Array.from(header.childNodes.values()).filter((n: any) => n.classList.contains("header-icon"))[0]; - const headerRect = headerIcon.getBoundingClientRect(); - const rect = el.getBoundingClientRect(); - if (props.step.showChildren) { + if (el) { + const header = Array.from(el.childNodes.values()).filter((n: any) => n.classList.contains("header"))[0]; + if (header) { + const headerIcon: any = Array.from(header.childNodes.values()).filter((n: any) => n.classList.contains("header-icon"))[0]; + const headerRect = headerIcon.getBoundingClientRect(); + const rect = el.getBoundingClientRect(); + if (props.step.showChildren) { + if (isHidden) { + // EventBus.sendPosition("delete", props.step, props.parent, new DOMRect(), new DOMRect(), 0); EventBus.sendPosition("add", props.step, props.parent, rect, headerRect, props.position, props.inSteps, isSelected); } else { - EventBus.sendPosition("delete", props.step, props.parent, new DOMRect(), new DOMRect(), 0); + EventBus.sendPosition("add", props.step, props.parent, rect, headerRect, props.position, props.inSteps, isSelected); } + } else { + EventBus.sendPosition("delete", props.step, props.parent, new DOMRect(), new DOMRect(), 0); } } } @@ -265,8 +266,7 @@ export function DslElement(props: Props) { if (!checkRequired[0]) className = className + " header-text-required"; if (checkRequired[0]) { return <Text className={className}>{title}</Text> - } - else return ( + } else return ( <Tooltip position={"right"} className="tooltip-required-field" content={checkRequired[1].map((text, i) => (<div key={i}>{text}</div>))}> <Text className={className}>{title}</Text> @@ -445,7 +445,6 @@ export function DslElement(props: Props) { className={className} ref={el => sendPosition(el)} style={{ - display: isElementHidden() ? "none" : "flex", borderStyle: hasBorder() ? "dotted" : "none", borderColor: isElementSelected() ? "var(--step-border-color-selected)" : "var(--step-border-color)", marginTop: isInStepWithChildren() ? "16px" : "8px", diff --git a/karavan-space/src/designer/route/useRouteDesignerHook.tsx b/karavan-space/src/designer/route/useRouteDesignerHook.tsx index cf4c8282..4d814f1a 100644 --- a/karavan-space/src/designer/route/useRouteDesignerHook.tsx +++ b/karavan-space/src/designer/route/useRouteDesignerHook.tsx @@ -76,6 +76,7 @@ export function useRouteDesignerHook () { } const deleteElement = () => { + EventBus.sendPosition("clean", new CamelElement(""), undefined, new DOMRect(), new DOMRect(), 0); selectedUuids.forEach(uuidToDelete => { const i = CamelDefinitionApiExt.deleteStepFromIntegration(integration, uuidToDelete); setIntegration(i, false); @@ -83,11 +84,7 @@ export function useRouteDesignerHook () { setShowDeleteConfirmation(false); setDeleteMessage(''); setSelectedStep(undefined); - setSelectedUuids([uuidToDelete]); - - const el = new CamelElement(""); - el.uuid = uuidToDelete; - EventBus.sendPosition("delete", el, undefined, new DOMRect(), new DOMRect(), 0); + setSelectedUuids([]); }); }
