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 2024/01/10 16:41:34 UTC
(camel-karavan) branch main updated (e5f5989a -> bef72b1e)
This is an automated email from the ASF dual-hosted git repository.
marat pushed a change to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
from e5f5989a Fix #1044
new e77de3a3 Icon fo direct
new bef72b1e Topology UI improvements
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../src/designer/icons/ComponentIcons.tsx | 22 +++++-
karavan-designer/src/designer/utils/CamelUi.tsx | 6 +-
karavan-designer/src/topology/TopologyStore.ts | 10 ++-
karavan-designer/src/topology/TopologyTab.tsx | 79 +++++++++++++++-------
4 files changed, 89 insertions(+), 28 deletions(-)
(camel-karavan) 01/02: Icon fo direct
Posted by ma...@apache.org.
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 e77de3a3a966474f19d1d20d21781e067db0b65d
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Tue Jan 9 15:46:43 2024 -0500
Icon fo direct
---
.../src/designer/icons/ComponentIcons.tsx | 22 +++++++++++++++++++++-
karavan-designer/src/designer/utils/CamelUi.tsx | 6 +++++-
2 files changed, 26 insertions(+), 2 deletions(-)
diff --git a/karavan-designer/src/designer/icons/ComponentIcons.tsx b/karavan-designer/src/designer/icons/ComponentIcons.tsx
index 90d78ec8..c803bf11 100644
--- a/karavan-designer/src/designer/icons/ComponentIcons.tsx
+++ b/karavan-designer/src/designer/icons/ComponentIcons.tsx
@@ -16,6 +16,26 @@
*/
import React from 'react';
+export function DirectIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 32 32"
+ className="icon" width="32px" height="32px"
+ >
+ <path
+ d="M25 11a5.008 5.008 0 0 0-4.899 4H11.9a5 5 0 1 0 0 2H20.1A5 5 0 1 0 25 11Zm0 8a3 3 0 1 1 3-3 3.003 3.003 0 0 1-3 3Z"/>
+ <path
+ d="M0 0h32v32H0z"
+ data-name="<Transparent Rectangle>"
+ style={{
+ fill: "none",
+ }}
+ />
+ </svg>
+ );
+}
+
export function SpringIcon() {
return (
<svg
@@ -23,7 +43,7 @@ export function SpringIcon() {
viewBox="0 0 32 32"
className="icon" width="32px" height="32px">
<g fill="none" fillRule="evenodd">
- <path d="M0 0h32v32H0z"></path>
+ <path d="M0 0h32v32H0z"></path>
<path
fill="#70AD51"
d="M5.466 27.993a1.364 1.364 0 10-.087-.076l-.266-.234C1.972 24.762 0 20.597 0 15.978 0 7.168 7.168 0 15.98 0c4.48 0 8.53 1.857 11.435 4.836a14.681 14.681 0 001.7-3.015c2.036 6.118 3.233 11.26 2.795 15.31-.592 8.274-7.508 14.83-15.93 14.83a15.903 15.903 0 01-10.276-3.757l-.238-.21zm23.58-4.982c4.01-5.336 1.775-13.965-.085-19.48-1.657 3.453-5.738 6.094-9.262 6.93-3.303.788-6.226.142-9.283 1.318-6.97 2.68-6.86 10.992-3.02 12.86.002 0 .23.124.227.12 0-.002 5.644-1.122 8. [...]
diff --git a/karavan-designer/src/designer/utils/CamelUi.tsx b/karavan-designer/src/designer/utils/CamelUi.tsx
index 02acba92..35f32a7f 100644
--- a/karavan-designer/src/designer/utils/CamelUi.tsx
+++ b/karavan-designer/src/designer/utils/CamelUi.tsx
@@ -38,7 +38,7 @@ import {
CloudIcon,
ClusterIcon,
DatabaseIcon,
- DebeziumIcon,
+ DebeziumIcon, DirectIcon,
DocumentIcon,
FileIcon,
GithubIcon,
@@ -556,6 +556,8 @@ export class CamelUi {
const labels = label.split(",");
if (title === "Ref") {
return RefIcon();
+ } else if (title === "Direct") {
+ return DirectIcon();
} else if (title === "Exec") {
return TerminalIcon();
} else if (title === "Grape") {
@@ -667,6 +669,8 @@ export class CamelUi {
return k ? this.getIconFromSource(k.icon()) : CamelUi.getIconForDslName(element.dslName);
} else if (element.dslName === "ToDefinition" && component && TopologyUtils.isComponentInternal(component.component.label)) {
return this.getIconForComponent(component?.component.title, component?.component.label);
+ } else if (element.dslName === "ToDefinition" && component && TopologyUtils.hasDirectUri(element)) {
+ return this.getIconForComponent(component?.component.title, component?.component.label);
} else {
return this.getIconForDslName(element.dslName);
}
(camel-karavan) 02/02: Topology UI improvements
Posted by ma...@apache.org.
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 bef72b1e1f8a65d9d35f852db7e79205e72bad32
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Wed Jan 10 11:41:19 2024 -0500
Topology UI improvements
---
karavan-designer/src/topology/TopologyStore.ts | 10 +++-
karavan-designer/src/topology/TopologyTab.tsx | 79 ++++++++++++++++++--------
2 files changed, 63 insertions(+), 26 deletions(-)
diff --git a/karavan-designer/src/topology/TopologyStore.ts b/karavan-designer/src/topology/TopologyStore.ts
index 3cf5067b..73aead9f 100644
--- a/karavan-designer/src/topology/TopologyStore.ts
+++ b/karavan-designer/src/topology/TopologyStore.ts
@@ -33,6 +33,8 @@ interface TopologyState {
fileName?: string
setSelectedIds: (selectedIds: string []) => void
setFileName: (fileName?: string) => void
+ ranker: string
+ setRanker: (ranker: string) => void
}
export const useTopologyStore = createWithEqualityFn<TopologyState>((set) => ({
@@ -46,5 +48,11 @@ export const useTopologyStore = createWithEqualityFn<TopologyState>((set) => ({
set((state: TopologyState) => {
return {fileName: fileName};
});
- }
+ },
+ ranker: 'network-simplex',
+ setRanker: (ranker: string) => {
+ set((state: TopologyState) => {
+ return {ranker: ranker};
+ });
+ },
}), shallow)
diff --git a/karavan-designer/src/topology/TopologyTab.tsx b/karavan-designer/src/topology/TopologyTab.tsx
index 5da3a3c4..be2e754a 100644
--- a/karavan-designer/src/topology/TopologyTab.tsx
+++ b/karavan-designer/src/topology/TopologyTab.tsx
@@ -35,6 +35,7 @@ import {IntegrationFile, useTopologyStore} from "./TopologyStore";
import {TopologyPropertiesPanel} from "./TopologyPropertiesPanel";
import {TopologyToolbar} from "./TopologyToolbar";
import {useDesignerStore} from "../designer/DesignerStore";
+import RankerIcon from "@patternfly/react-icons/dist/esm/icons/random-icon";
interface Props {
files: IntegrationFile[],
@@ -45,10 +46,10 @@ interface Props {
onClickAddBean: () => void
}
-export function TopologyTab (props: Props) {
+export function TopologyTab(props: Props) {
- const [selectedIds, setSelectedIds, setFileName] = useTopologyStore((s) =>
- [s.selectedIds, s.setSelectedIds, s.setFileName], shallow);
+ const [selectedIds, setSelectedIds, setFileName, ranker, setRanker] = useTopologyStore((s) =>
+ [s.selectedIds, s.setSelectedIds, s.setFileName, s.ranker, s.setRanker], shallow);
const [setSelectedStep] = useDesignerStore((s) => [s.setSelectedStep], shallow)
function setTopologySelected(model: Model, ids: string []) {
@@ -71,7 +72,15 @@ export function TopologyTab (props: Props) {
const controller = React.useMemo(() => {
const model = getModel(props.files);
const newController = new Visualization();
- newController.registerLayoutFactory((_, graph) => new DagreLayout(graph));
+ newController.registerLayoutFactory((_, graph) =>
+ new DagreLayout(graph, {
+ rankdir: 'TB',
+ ranker: ranker,
+ nodesep: 20,
+ edgesep: 20,
+ ranksep: 0
+ }));
+
newController.registerComponentFactory(customComponentFactory);
newController.addEventListener(SELECTION_EVENT, args => setTopologySelected(model, args));
@@ -84,15 +93,51 @@ export function TopologyTab (props: Props) {
newController.fromModel(model, false);
return newController;
- }, []);
+ },[]);
React.useEffect(() => {
setSelectedIds([])
const model = getModel(props.files);
controller.fromModel(model, false);
- }, []);
+ }, [ranker, controller, setSelectedIds, props.files]);
+
+ const controlButtons = React.useMemo(() => {
+ // const customButtons = [
+ // {
+ // id: "change-ranker",
+ // icon: <RankerIcon />,
+ // tooltip: 'Change Ranker ' + ranker,
+ // ariaLabel: '',
+ // callback: (id: any) => {
+ // if (ranker === 'network-simplex') {
+ // setRanker('tight-tree')
+ // } else {
+ // setRanker('network-simplex')
+ // }
+ // }
+ // }
+ // ];
+ return createTopologyControlButtons({
+ ...defaultControlButtonsOptions,
+ zoomInCallback: action(() => {
+ controller.getGraph().scaleBy(4 / 3);
+ }),
+ zoomOutCallback: action(() => {
+ controller.getGraph().scaleBy(0.75);
+ }),
+ fitToScreenCallback: action(() => {
+ controller.getGraph().fit(80);
+ }),
+ resetViewCallback: action(() => {
+ controller.getGraph().reset();
+ controller.getGraph().layout();
+ }),
+ legend: false,
+ // customButtons,
+ });
+ }, [ranker, controller, setRanker]);
- return (
+ return (
<TopologyView
className="topology-panel"
contextToolbar={!props.hideToolbar
@@ -103,28 +148,12 @@ export function TopologyTab (props: Props) {
sideBar={<TopologyPropertiesPanel onSetFile={props.onSetFile}/>}
controlBar={
<TopologyControlBar
- controlButtons={createTopologyControlButtons({
- ...defaultControlButtonsOptions,
- zoomInCallback: action(() => {
- controller.getGraph().scaleBy(4 / 3);
- }),
- zoomOutCallback: action(() => {
- controller.getGraph().scaleBy(0.75);
- }),
- fitToScreenCallback: action(() => {
- controller.getGraph().fit(80);
- }),
- resetViewCallback: action(() => {
- controller.getGraph().reset();
- controller.getGraph().layout();
- }),
- legend: false
- })}
+ controlButtons={controlButtons}
/>
}
>
<VisualizationProvider controller={controller}>
- <VisualizationSurface state={{ selectedIds }}/>
+ <VisualizationSurface state={{selectedIds}}/>
</VisualizationProvider>
</TopologyView>
);