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/08/22 23:50:31 UTC
[camel-karavan] branch feature-836 updated (c60f3ed4 -> 27ebf976)
This is an automated email from the ASF dual-hosted git repository.
marat pushed a change to branch feature-836
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
from c60f3ed4 Resize works
new 27f94cc8 Connections for #836
new 0f739725 Selector for #836
new 27ebf976 Delete element for #836
The 3 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:
karavan-designer/public/example/demo.camel.yaml | 120 +++++------
karavan-designer/src/designer/KaravanStore.ts | 138 +++++++++----
.../src/designer/route/DeleteConfirmation.tsx | 51 +++++
.../src/designer/route/DslConnections.tsx | 57 ++----
karavan-designer/src/designer/route/DslElement.tsx | 66 ++----
.../src/designer/route/DslSelector.tsx | 225 ++++++++++-----------
.../src/designer/route/RouteDesigner.tsx | 98 +++------
.../designer/route/useDrawerMutationsObserver.tsx | 2 +-
.../src/designer/route/useResizeObserver.tsx | 2 +-
.../src/designer/route/useRouteDesignerHook.tsx | 17 +-
10 files changed, 405 insertions(+), 371 deletions(-)
create mode 100644 karavan-designer/src/designer/route/DeleteConfirmation.tsx
[camel-karavan] 01/03: Connections for #836
Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch feature-836
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
commit 27f94cc80b6d4b06ed8b91c5802d3980f31f43bb
Author: Marat Gubaidullin <ma...@Marats-MacBook-Pro.local>
AuthorDate: Tue Aug 22 17:43:37 2023 -0400
Connections for #836
---
karavan-designer/src/designer/KaravanStore.ts | 39 +++++++++++++++++
.../src/designer/route/DslConnections.tsx | 51 +++++++---------------
karavan-designer/src/designer/route/DslElement.tsx | 51 +++++-----------------
.../src/designer/route/RouteDesigner.tsx | 26 ++++-------
4 files changed, 75 insertions(+), 92 deletions(-)
diff --git a/karavan-designer/src/designer/KaravanStore.ts b/karavan-designer/src/designer/KaravanStore.ts
index a28f7f21..440c944b 100644
--- a/karavan-designer/src/designer/KaravanStore.ts
+++ b/karavan-designer/src/designer/KaravanStore.ts
@@ -19,6 +19,8 @@ import {create} from 'zustand'
import {CamelElement, Integration} from "karavan-core/lib/model/IntegrationDefinition";
import {createWithEqualityFn} from "zustand/traditional";
import {shallow} from "zustand/shallow";
+import {useState} from "react";
+import {DslPosition} from "./utils/EventBus";
interface IntegrationState {
integration: Integration;
@@ -32,6 +34,43 @@ export const useIntegrationStore = createWithEqualityFn<IntegrationState>((set)
},
}), shallow)
+
+interface ConnectionsState {
+ steps: Map<string, DslPosition>;
+ addStep: (uuid: string, position: DslPosition) => void;
+ deleteStep: (uuid: string) => void;
+ clear: () => void;
+ setSteps: (steps: Map<string, DslPosition>) => void;
+}
+
+export const useConnectionsStore = createWithEqualityFn<ConnectionsState>((set) => ({
+ steps: new Map<string, DslPosition>(),
+ addStep: (uuid: string, position: DslPosition) => {
+ set(state => ({
+ steps: new Map(state.steps).set(uuid, position),
+ }))
+ },
+ deleteStep: (uuid: string) => {
+ set((state: ConnectionsState) => {
+ state.steps.clear();
+ Array.from(state.steps.entries())
+ .filter(value => value[1]?.parent?.uuid !== uuid)
+ .forEach(value => state.steps.set(value[0], value[1]));
+ state.steps.delete(uuid)
+ return state;
+ })
+ },
+ clear: () => {
+ set((state: ConnectionsState) => {
+ state.steps.clear();
+ return state;
+ })
+ },
+ setSteps: (steps: Map<string, DslPosition>) => {
+ set({steps: steps})
+ },
+}), shallow)
+
interface DesignerState {
shiftKeyPressed: boolean;
showSelector: boolean;
diff --git a/karavan-designer/src/designer/route/DslConnections.tsx b/karavan-designer/src/designer/route/DslConnections.tsx
index 3b508ae3..18d37819 100644
--- a/karavan-designer/src/designer/route/DslConnections.tsx
+++ b/karavan-designer/src/designer/route/DslConnections.tsx
@@ -14,14 +14,13 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React, {useEffect, useState} from 'react';
+import React, {useEffect} from 'react';
import '../karavan.css';
import {CamelElement} from "karavan-core/lib/model/IntegrationDefinition";
import {DslPosition, EventBus} from "../utils/EventBus";
import {CamelUi} from "../utils/CamelUi";
-import {Subscription} from "rxjs";
import {SagaDefinition} from "karavan-core/lib/model/CamelDefinition";
-import {useDesignerStore} from "../KaravanStore";
+import {useConnectionsStore, useDesignerStore} from "../KaravanStore";
const overlapGap: number = 40;
@@ -31,40 +30,25 @@ export const DslConnections = () => {
const [ width, height, top, left] = useDesignerStore((s) =>
[s.width, s.height, s.top, s.left])
- const [steps, setSteps] = useState<Map<string, DslPosition>>(new Map<string, DslPosition>());
+ const [ steps, addStep, deleteStep, clear] = useConnectionsStore((s) => [s.steps, s.addStep, s.deleteStep, s.clear])
- // useEffect(() => {
- // console.log("DslConnections Start", width, height, top, left);
- // const sub = EventBus.onPosition()?.subscribe((evt: DslPosition) => setPosition(evt));
- // return () => {
- // console.log("DslConnections Stop");
- // sub?.unsubscribe();
- // };
- // }, [width, height, top, left]);
+ useEffect(() => {
+ const sub = EventBus.onPosition()?.subscribe((evt: DslPosition) => setPosition(evt));
+ return () => {
+ sub?.unsubscribe();
+ };
+ }, [width, height, top, left]);
function setPosition(evt: DslPosition) {
console.log("setPosition", evt);
if (evt.command === "add") {
- setSteps(prevSteps => {
- prevSteps.set(evt.step.uuid, evt);
- return prevSteps;
- })
+ addStep(evt.step.uuid, evt);
}
else if (evt.command === "delete") {
- setSteps(prevSteps => {
- prevSteps.clear();
- Array.from(prevSteps.entries())
- .filter(value => value[1]?.parent?.uuid !== evt.step.uuid)
- .forEach(value => prevSteps.set(value[0], value[1]));
- prevSteps.delete(evt.step.uuid);
- return prevSteps;
- })
+ deleteStep(evt.step.uuid);
}
else if (evt.command === "clean") {
- setSteps(prevSteps => {
- prevSteps.clear();
- return prevSteps;
- })
+ clear();
}
}
@@ -444,7 +428,7 @@ export const DslConnections = () => {
return (
<svg
style={{width: width, height: height, position: "absolute", left: 0, top: 0}}
- viewBox={"0 0 " + (width - 5) + " " + (height -5)}>
+ viewBox={"0 0 " + (width) + " " + (height)}>
<defs>
<marker id="arrowhead" markerWidth="9" markerHeight="6" refX="0" refY="3" orient="auto" className="arrow">
<polygon points="0 0, 9 3, 0 6"/>
@@ -461,13 +445,10 @@ export const DslConnections = () => {
console.log("RENDER CONNECTION")
return (
- <div
- id="connections"
- style={{position: "absolute", width: width, height: height + 80, top: 0, left: 0, background: "red"}}
- >
+ <div id="connections" className="connections" style={{ width: width, height: height + 80}}>
{getSvg()}
- {/*{getIncomings().map(p => getIncomingIcons(p))}*/}
- {/*{getOutgoings().map(p => getOutgoingIcons(p))}*/}
+ {getIncomings().map(p => getIncomingIcons(p))}
+ {getOutgoings().map(p => getOutgoingIcons(p))}
</div>
)
}
diff --git a/karavan-designer/src/designer/route/DslElement.tsx b/karavan-designer/src/designer/route/DslElement.tsx
index 212be87c..2e42ed03 100644
--- a/karavan-designer/src/designer/route/DslElement.tsx
+++ b/karavan-designer/src/designer/route/DslElement.tsx
@@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React, {createRef, CSSProperties, useEffect, useRef, useState} from 'react';
+import React, {CSSProperties, useEffect, useRef, useState} from 'react';
import {
Button,
Flex,
@@ -25,11 +25,10 @@ import '../karavan.css';
import AddIcon from "@patternfly/react-icons/dist/js/icons/plus-circle-icon";
import DeleteIcon from "@patternfly/react-icons/dist/js/icons/times-circle-icon";
import InsertIcon from "@patternfly/react-icons/dist/js/icons/arrow-alt-circle-right-icon";
-import {CamelElement, Integration} from "karavan-core/lib/model/IntegrationDefinition";
+import {CamelElement} from "karavan-core/lib/model/IntegrationDefinition";
import {CamelUi} from "../utils/CamelUi";
-import {DslPosition, EventBus} from "../utils/EventBus";
+import {EventBus} from "../utils/EventBus";
import {ChildElement, CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
-import ReactDOM from "react-dom";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {CamelDisplayUtil} from "karavan-core/lib/api/CamelDisplayUtil";
import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
@@ -37,14 +36,8 @@ import {shallow} from "zustand/shallow";
import {useRouteDesignerHook} from "./useRouteDesignerHook";
interface Props {
- // integration: Integration,
step: CamelElement,
parent: CamelElement | undefined,
- // deleteElement: any
- // selectElement: any
- // openSelector: (parentId: string | undefined, parentDsl: string | undefined, showSteps: boolean, position?: number | undefined) => void
- // moveElement: (source: string, target: string, asChild: boolean) => void
- // selectedUuid: string []
inSteps: boolean
position: number
}
@@ -67,30 +60,10 @@ export const DslElement = (props: Props) => {
const [isDraggedOver, setIsDraggedOver] = useState<boolean>(false);
const [moveElements, setMoveElements] = useState<[string | undefined, string | undefined]>([undefined, undefined]);
- const elementRef = useRef(null);
- const [elementPosition, setElementPosition] = useState({ x: 0, y: 0 });
-
- useEffect(() => {
- // function handleResize() {
- // if (elementRef && elementRef.current !== undefined) {
- // const current: any = (elementRef.current as any);
- // const x = current.offsetLeft;
- // const y = current.offsetTop;
- // setElementPosition({x, y});
- // // console.log("setElementPosition", {x, y})
- // }
- // }
- //
- // handleResize(); // initial call to get position of the element on mount
- // window.addEventListener("resize", handleResize);
- // return () => window.removeEventListener("resize", handleResize);
- }, [elementRef]);
- //
- // componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => {
- // if (prevselectedUuid !== props.selectedUuid) {
- // setState({selectedUuid: props.selectedUuid});
- // }
- // }
+ // const elementRef = useRef(null);
+
+ // useEffect(() => {
+ // }, [elementRef]);
function onOpenSelector (evt: React.MouseEvent, showSteps: boolean = true, isInsert: boolean = false) {
evt.stopPropagation();
@@ -231,7 +204,7 @@ export const DslElement = (props: Props) => {
}
function sendPosition (el: HTMLDivElement | null, isSelected: boolean) {
- console.log("sendPosition", props.step)
+ // console.log("sendPosition", props.step)
const node = el;
if (node && el) {
const header = Array.from(node.childNodes.values()).filter((n: any) => n.classList.contains("header"))[0];
@@ -239,7 +212,8 @@ export const DslElement = (props: Props) => {
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.show){
+ // if ()
+ if (props.step.show) {
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);
@@ -453,12 +427,11 @@ export const DslElement = (props: Props) => {
}
const element: CamelElement = props.step;
- const className = "step-element" + (isSelected() ? " step-element-selected" : "")
- + (!props.step.show ? " hidden-step" : "");
+ const className = "step-element" + (isSelected() ? " step-element-selected" : "") + (!props.step.show ? " hidden-step" : "");
return (
<div key={"root" + element.uuid}
className={className}
- ref={elementRef}
+ ref={el => sendPosition(el, isSelected())}
// ref={el => sendPosition(el, isSelected())}
style={{
borderStyle: hasBorder() ? "dotted" : "none",
diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx b/karavan-designer/src/designer/route/RouteDesigner.tsx
index 69be9a48..17bc9b28 100644
--- a/karavan-designer/src/designer/route/RouteDesigner.tsx
+++ b/karavan-designer/src/designer/route/RouteDesigner.tsx
@@ -50,7 +50,7 @@ interface Props {
export const RouteDesigner = (props: Props) => {
- const printerRef = React.createRef()
+ const printerRef = React.createRef();
const contentRef: React.RefObject<HTMLDivElement> = useRef(null);
const {
@@ -63,13 +63,11 @@ export const RouteDesigner = (props: Props) => {
createRouteConfiguration
} = useRouteDesignerHook();
- const [integration, setIntegration] = useIntegrationStore((state) => [state.integration, state.setIntegration], shallow)
- const [showSelector, showDeleteConfirmation, propertyOnly, showSteps, deleteMessage, parentId, selectedUuids, clipboardSteps, parentDsl, selectedPosition, selectedStep, selectorTabIndex,
- setShowSelector, setShowDeleteConfirmation, setPropertyOnly, setShowSteps, setDeleteMessage, setParentId, setSelectedUuids, setClipboardSteps, setPosition,
- width, height, top, left] = useDesignerStore((s) =>
- [s.showSelector, s.showDeleteConfirmation, s.propertyOnly, s.showSteps, s.deleteMessage, s.parentId, s.selectedUuids, s.clipboardSteps, s.parentDsl, s.selectedPosition, s.selectedStep, s.selectorTabIndex,
- s.setShowSelector, s.setShowDeleteConfirmation, s.setPropertyOnly, s.setShowSteps, s.setDeleteMessage, s.setParentId, s.setSelectedUuids, s.setClipboardSteps, s.setPosition,
- s.width, s.height, s.top, s.left], shallow)
+ const [integration] = useIntegrationStore((state) => [state.integration], shallow)
+ const [showSelector, showDeleteConfirmation, showSteps, deleteMessage, parentId, parentDsl, selectedPosition, selectorTabIndex,
+ setShowSelector, setShowDeleteConfirmation, setPosition, width, height, top, left] = useDesignerStore((s) =>
+ [s.showSelector, s.showDeleteConfirmation, s.showSteps, s.deleteMessage, s.parentId, s.parentDsl, s.selectedPosition, s.selectorTabIndex,
+ s.setShowSelector, s.setShowDeleteConfirmation, s.setPosition, s.width, s.height, s.top, s.left], shallow)
// const [refState, setRefState] = useState<Element | null>(null);
@@ -176,15 +174,7 @@ export const RouteDesigner = (props: Props) => {
)
}
- function onRef(el: HTMLDivElement | null) {
- // console.log("onRef", el)
- const rect = el?.getBoundingClientRect();
- if (el && rect && (rect.width !== width || rect.height !== height || rect.top !== top || rect.left !== left)) {
- setPosition(rect.width, rect.height, rect.top, rect.left)
- }
- }
-
- console.log("RENDER ROUTE_DESIGNER")
+ console.log("RENDER ROUTE_DESIGNER");
function getGraph() {
const routes = CamelUi.getRoutes(integration);
@@ -247,5 +237,5 @@ export const RouteDesigner = (props: Props) => {
{getSelectorModal()}
{getDeleteConfirmation()}
</div>
- );
+ )
}
\ No newline at end of file
[camel-karavan] 02/03: Selector for #836
Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch feature-836
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
commit 0f739725cb4c5314a51d560dd3fa82e75718a288
Author: Marat Gubaidullin <ma...@Marats-MacBook-Pro.local>
AuthorDate: Tue Aug 22 19:41:26 2023 -0400
Selector for #836
---
karavan-designer/public/example/demo.camel.yaml | 120 +++++------
karavan-designer/src/designer/KaravanStore.ts | 105 ++++++----
.../src/designer/route/DslConnections.tsx | 14 +-
karavan-designer/src/designer/route/DslElement.tsx | 14 +-
.../src/designer/route/DslSelector.tsx | 229 +++++++++++----------
.../src/designer/route/RouteDesigner.tsx | 72 +++----
.../designer/route/useDrawerMutationsObserver.tsx | 2 +-
.../src/designer/route/useResizeObserver.tsx | 2 +-
.../src/designer/route/useRouteDesignerHook.tsx | 14 +-
9 files changed, 288 insertions(+), 284 deletions(-)
diff --git a/karavan-designer/public/example/demo.camel.yaml b/karavan-designer/public/example/demo.camel.yaml
index 878ed244..4aed6c49 100644
--- a/karavan-designer/public/example/demo.camel.yaml
+++ b/karavan-designer/public/example/demo.camel.yaml
@@ -1,44 +1,44 @@
-- route:
- id: route-f435
- from:
- uri: kamelet:timer-source
- id: from-e52c
- steps:
- - choice:
- when:
- - expression: {}
- id: when-064f
- steps:
- - multicast:
- id: multicast-38ce
- steps:
- - bean:
- id: bean-3b8e
- - log:
- message: ${body}
- id: log-546f
- - loop:
- expression: {}
- id: loop-4635
- steps:
- - convertBodyTo:
- id: convertBodyTo-1cae
- otherwise:
- id: otherwise-0b09
- steps:
- - filter:
- expression: {}
- id: filter-a02b
- id: choice-c53c
- - doTry:
- id: doTry-8fd5
- doCatch:
- - id: doCatch-1071
- - id: doCatch-c38e
- steps:
- - routingSlip:
- expression: {}
- id: routingSlip-a85a
+#- route:
+# id: route-f435
+# from:
+# uri: kamelet:timer-source
+# id: from-e52c
+# steps:
+# - choice:
+# when:
+# - expression: {}
+# id: when-064f
+# steps:
+# - multicast:
+# id: multicast-38ce
+# steps:
+# - bean:
+# id: bean-3b8e
+# - log:
+# message: ${body}
+# id: log-546f
+# - loop:
+# expression: {}
+# id: loop-4635
+# steps:
+# - convertBodyTo:
+# id: convertBodyTo-1cae
+# otherwise:
+# id: otherwise-0b09
+# steps:
+# - filter:
+# expression: {}
+# id: filter-a02b
+# id: choice-c53c
+# - doTry:
+# id: doTry-8fd5
+# doCatch:
+# - id: doCatch-1071
+# - id: doCatch-c38e
+# steps:
+# - routingSlip:
+# expression: {}
+# id: routingSlip-a85a
- route:
id: route-178a
from:
@@ -50,22 +50,22 @@
steps:
- bean:
id: bean-a5ef
- - aggregate:
- id: aggregate-f5d8
- - aggregate:
- id: aggregate-b9e7
- - aggregate:
- id: aggregate-5eb8
- - aggregate:
- id: aggregate-c57e
- - aggregate:
- id: aggregate-1cd4
- - bean:
- id: bean-72a1
- - choice:
- when:
- - expression: {}
- id: when-a56b
- otherwise:
- id: otherwise-9f31
- id: choice-1905
+# - aggregate:
+# id: aggregate-f5d8
+# - aggregate:
+# id: aggregate-b9e7
+# - aggregate:
+# id: aggregate-5eb8
+# - aggregate:
+# id: aggregate-c57e
+# - aggregate:
+# id: aggregate-1cd4
+# - bean:
+# id: bean-72a1
+# - choice:
+# when:
+# - expression: {}
+# id: when-a56b
+# otherwise:
+# id: otherwise-9f31
+# id: choice-1905
diff --git a/karavan-designer/src/designer/KaravanStore.ts b/karavan-designer/src/designer/KaravanStore.ts
index 440c944b..4dc570ed 100644
--- a/karavan-designer/src/designer/KaravanStore.ts
+++ b/karavan-designer/src/designer/KaravanStore.ts
@@ -15,11 +15,9 @@
* limitations under the License.
*/
-import {create} from 'zustand'
import {CamelElement, Integration} from "karavan-core/lib/model/IntegrationDefinition";
import {createWithEqualityFn} from "zustand/traditional";
import {shallow} from "zustand/shallow";
-import {useState} from "react";
import {DslPosition} from "./utils/EventBus";
interface IntegrationState {
@@ -35,11 +33,77 @@ export const useIntegrationStore = createWithEqualityFn<IntegrationState>((set)
}), shallow)
+interface SelectorStateState {
+ showSelector: boolean;
+ setShowSelector: (showSelector: boolean) => void;
+ showSteps: boolean;
+ setShowSteps: (showSteps: boolean) => void;
+ parentDsl?: string;
+ setParentDsl: (parentDsl?: string) => void;
+ parentId: string;
+ setParentId: (parentId: string) => void;
+ selectorTabIndex?: string | number
+ setSelectorTabIndex: (selectorTabIndex?: string | number) => void;
+ selectedPosition?: number;
+ setSelectedPosition: (selectedPosition?: number) => void;
+ selectedLabels: string [];
+ addSelectedLabel: (label: string) => void;
+ deleteSelectedLabel: (label: string) => void;
+ clearSelectedLabels: () => void;
+ setSelectedLabels: (selectedLabels: string []) => void;
+}
+
+export const useSelectorStore = createWithEqualityFn<SelectorStateState>((set) => ({
+ showSelector: false,
+ deleteMessage: '',
+ parentId: '',
+ showSteps: true,
+ selectedLabels: [],
+ addSelectedLabel: (label: string) => {
+ set(state => ({
+ selectedLabels: [...state.selectedLabels, label]
+ }))
+ },
+ deleteSelectedLabel: (label: string) => {
+ set(state => ({
+ selectedLabels: [...state.selectedLabels.filter(x => x !== label)]
+ }))
+ },
+ clearSelectedLabels: () => {
+ set((state: SelectorStateState) => {
+ state.selectedLabels.length = 0;
+ return state;
+ })
+ },
+ setSelectedLabels: (selectedLabels: string []) => {
+ set({selectedLabels: selectedLabels})
+ },
+ setSelectorTabIndex: (selectorTabIndex?: string | number) => {
+ set({selectorTabIndex: selectorTabIndex})
+ },
+ setParentDsl: (parentDsl?: string) => {
+ set({parentDsl: parentDsl})
+ },
+ setShowSelector: (showSelector: boolean) => {
+ set({showSelector: showSelector})
+ },
+ setShowSteps: (showSteps: boolean) => {
+ set({showSteps: showSteps})
+ },
+ setParentId: (parentId: string) => {
+ set({parentId: parentId})
+ },
+ setSelectedPosition: (selectedPosition?: number) => {
+ set({selectedPosition: selectedPosition})
+ },
+}), shallow)
+
+
interface ConnectionsState {
steps: Map<string, DslPosition>;
addStep: (uuid: string, position: DslPosition) => void;
deleteStep: (uuid: string) => void;
- clear: () => void;
+ clearSteps: () => void;
setSteps: (steps: Map<string, DslPosition>) => void;
}
@@ -60,7 +124,7 @@ export const useConnectionsStore = createWithEqualityFn<ConnectionsState>((set)
return state;
})
},
- clear: () => {
+ clearSteps: () => {
set((state: ConnectionsState) => {
state.steps.clear();
return state;
@@ -73,32 +137,20 @@ export const useConnectionsStore = createWithEqualityFn<ConnectionsState>((set)
interface DesignerState {
shiftKeyPressed: boolean;
- showSelector: boolean;
- setShowSelector: (showSelector: boolean) => void;
showDeleteConfirmation: boolean;
setShowDeleteConfirmation: (showDeleteConfirmation: boolean) => void;
showMoveConfirmation: boolean;
setShowMoveConfirmation: (showMoveConfirmation: boolean) => void;
propertyOnly: boolean;
setPropertyOnly: (propertyOnly: boolean) => void;
- showSteps: boolean;
- setShowSteps: (showSteps: boolean) => void;
deleteMessage: string;
setDeleteMessage: (deleteMessage: string) => void;
- parentDsl?: string;
- setParentDsl: (parentDsl?: string) => void;
- selectedPosition?: number;
- setSelectedPosition: (selectedPosition?: number) => void;
selectedStep?: CamelElement;
setSelectedStep: (selectedStep?: CamelElement) => void;
- parentId: string;
- setParentId: (parentId: string) => void;
selectedUuids: string[];
setSelectedUuids: (selectedUuids: string[]) => void;
clipboardSteps: string[];
setClipboardSteps: (clipboardSteps: string[]) => void;
- selectorTabIndex?: string | number
- setSelectorTabIndex: (selectorTabIndex?: string | number) => void;
width: number,
height: number,
top: number,
@@ -108,30 +160,15 @@ interface DesignerState {
export const useDesignerStore = createWithEqualityFn<DesignerState>((set) => ({
shiftKeyPressed: false,
- showSelector: false,
showDeleteConfirmation: false,
showMoveConfirmation: false,
deleteMessage: '',
- parentId: '',
- showSteps: true,
selectedUuids: [],
clipboardSteps: [],
propertyOnly: false,
- setSelectorTabIndex: (selectorTabIndex?: string | number) => {
- set({selectorTabIndex: selectorTabIndex})
- },
setSelectedStep: (selectedStep?: CamelElement) => {
set({selectedStep: selectedStep})
},
- setSelectedPosition: (selectedPosition?: number) => {
- set({selectedPosition: selectedPosition})
- },
- setParentDsl: (parentDsl?: string) => {
- set({parentDsl: parentDsl})
- },
- setShowSelector: (showSelector: boolean) => {
- set({showSelector: showSelector})
- },
setShowDeleteConfirmation: (showDeleteConfirmation: boolean) => {
set({showDeleteConfirmation: showDeleteConfirmation})
},
@@ -141,15 +178,9 @@ export const useDesignerStore = createWithEqualityFn<DesignerState>((set) => ({
setPropertyOnly: (propertyOnly: boolean) => {
set({propertyOnly: propertyOnly})
},
- setShowSteps: (showSteps: boolean) => {
- set({showSteps: showSteps})
- },
setDeleteMessage: (deleteMessage: string) => {
set({deleteMessage: deleteMessage})
},
- setParentId: (parentId: string) => {
- set({parentId: parentId})
- },
setSelectedUuids: (selectedUuids: string[]) => {
set({selectedUuids: selectedUuids})
},
diff --git a/karavan-designer/src/designer/route/DslConnections.tsx b/karavan-designer/src/designer/route/DslConnections.tsx
index 18d37819..7a58e30f 100644
--- a/karavan-designer/src/designer/route/DslConnections.tsx
+++ b/karavan-designer/src/designer/route/DslConnections.tsx
@@ -28,19 +28,18 @@ const outgoingDefinitions: string[] = ['ToDefinition', 'KameletDefinition', 'ToD
export const DslConnections = () => {
- const [ width, height, top, left] = useDesignerStore((s) =>
+ const [width, height, top, left] = useDesignerStore((s) =>
[s.width, s.height, s.top, s.left])
- const [ steps, addStep, deleteStep, clear] = useConnectionsStore((s) => [s.steps, s.addStep, s.deleteStep, s.clear])
+ const [ steps, addStep, deleteStep, clearSteps] = useConnectionsStore((s) => [s.steps, s.addStep, s.deleteStep, s.clearSteps])
useEffect(() => {
const sub = EventBus.onPosition()?.subscribe((evt: DslPosition) => setPosition(evt));
return () => {
sub?.unsubscribe();
};
- }, [width, height, top, left]);
+ }, []);
function setPosition(evt: DslPosition) {
- console.log("setPosition", evt);
if (evt.command === "add") {
addStep(evt.step.uuid, evt);
}
@@ -48,7 +47,7 @@ export const DslConnections = () => {
deleteStep(evt.step.uuid);
}
else if (evt.command === "clean") {
- clear();
+ clearSteps();
}
}
@@ -427,8 +426,8 @@ export const DslConnections = () => {
const stepsArray = Array.from(steps.values());
return (
<svg
- style={{width: width, height: height, position: "absolute", left: 0, top: 0}}
- viewBox={"0 0 " + (width) + " " + (height)}>
+ style={{width: width, height: height + 80, position: "absolute", left: 0, top: 0}}
+ viewBox={"0 0 " + (width) + " " + (height + 80)}>
<defs>
<marker id="arrowhead" markerWidth="9" markerHeight="6" refX="0" refY="3" orient="auto" className="arrow">
<polygon points="0 0, 9 3, 0 6"/>
@@ -443,7 +442,6 @@ export const DslConnections = () => {
)
}
- console.log("RENDER CONNECTION")
return (
<div id="connections" className="connections" style={{ width: width, height: height + 80}}>
{getSvg()}
diff --git a/karavan-designer/src/designer/route/DslElement.tsx b/karavan-designer/src/designer/route/DslElement.tsx
index 2e42ed03..72380c03 100644
--- a/karavan-designer/src/designer/route/DslElement.tsx
+++ b/karavan-designer/src/designer/route/DslElement.tsx
@@ -49,11 +49,11 @@ export const DslElement = (props: Props) => {
const [integration, setIntegration] = useIntegrationStore((s) => [s.integration, s.setIntegration], shallow)
- const [showSelector, showDeleteConfirmation, propertyOnly, showSteps,deleteMessage,parentId, selectedUuids,clipboardSteps, parentDsl,selectedPosition,selectedStep,selectorTabIndex,showMoveConfirmation,
- setShowSelector, setShowDeleteConfirmation,setPropertyOnly,setShowSteps,setDeleteMessage, setParentId, setParentDsl, setSelectedPosition, setSelectedUuids, setClipboardSteps,setPosition,setShowMoveConfirmation,
+ const [showDeleteConfirmation, propertyOnly,deleteMessage, selectedUuids,clipboardSteps,selectedStep,showMoveConfirmation,
+ setShowDeleteConfirmation,setPropertyOnly,setDeleteMessage, setSelectedUuids, setClipboardSteps,setPosition,setShowMoveConfirmation,
width, height, top, left] = useDesignerStore((s) =>
- [s.showSelector, s.showDeleteConfirmation, s.propertyOnly, s.showSteps,s.deleteMessage,s.parentId, s.selectedUuids,s.clipboardSteps, s.parentDsl, s.selectedPosition, s.selectedStep,s.selectorTabIndex, s.showMoveConfirmation,
- s.setShowSelector, s.setShowDeleteConfirmation,s.setPropertyOnly,s.setShowSteps,s.setDeleteMessage, s.setParentId, s.setParentDsl, s.setSelectedPosition, s.setSelectedUuids, s.setClipboardSteps, s.setPosition, s.setShowMoveConfirmation,
+ [s.showDeleteConfirmation, s.propertyOnly,s.deleteMessage, s.selectedUuids,s.clipboardSteps, s.selectedStep, s.showMoveConfirmation,
+ s.setShowDeleteConfirmation,s.setPropertyOnly,s.setDeleteMessage, s.setSelectedUuids, s.setClipboardSteps, s.setPosition, s.setShowMoveConfirmation,
s.width, s.height, s.top, s.left], shallow)
const [isDragging, setIsDragging] = useState<boolean>(false);
@@ -74,11 +74,6 @@ export const DslElement = (props: Props) => {
}
}
- function closeDslSelector () {
- // setState({showSelector: false})
- setShowSelector(false);
- }
-
function onDeleteElement (evt: React.MouseEvent) {
evt.stopPropagation();
onShowDeleteConfirmation(props.step.uuid);
@@ -432,7 +427,6 @@ export const DslElement = (props: Props) => {
<div key={"root" + element.uuid}
className={className}
ref={el => sendPosition(el, isSelected())}
- // ref={el => sendPosition(el, isSelected())}
style={{
borderStyle: hasBorder() ? "dotted" : "none",
borderColor: isSelected() ? "var(--step-border-color-selected)" : "var(--step-border-color)",
diff --git a/karavan-designer/src/designer/route/DslSelector.tsx b/karavan-designer/src/designer/route/DslSelector.tsx
index 47eb3b39..d18b9a87 100644
--- a/karavan-designer/src/designer/route/DslSelector.tsx
+++ b/karavan-designer/src/designer/route/DslSelector.tsx
@@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React from 'react';
+import React, {useEffect, useState} from 'react';
import {
Badge,
Card, CardBody, CardFooter, CardHeader, Flex, FlexItem, Form, FormGroup, Gallery, Modal, PageSection,
@@ -24,66 +24,71 @@ import {
import '../karavan.css';
import {CamelUi} from "../utils/CamelUi";
import {DslMetaModel} from "../utils/DslMetaModel";
+import {useDesignerStore, useSelectorStore} from "../KaravanStore";
+import {shallow} from "zustand/shallow";
+import {useRouteDesignerHook} from "./useRouteDesignerHook";
interface Props {
- onDslSelect: (dsl: DslMetaModel, parentId: string, position?: number | undefined) => void,
- onClose?: () => void,
- parentId: string,
- parentDsl?: string,
- showSteps: boolean,
dark: boolean,
- isOpen: boolean,
- position?: number
tabIndex?: string | number
}
-interface State {
- tabIndex: string | number
- filter: string;
- selectedLabels: string []
-}
+export const DslSelector = (props: Props) => {
-export class DslSelector extends React.Component<Props, State> {
+ const [showSelector, showSteps, parentId, parentDsl, selectorTabIndex, setShowSelector, setSelectorTabIndex,
+ selectedPosition, selectedLabels, setSelectedLabels, addSelectedLabel, deleteSelectedLabelbels] =
+ useSelectorStore((s) =>
+ [s.showSelector, s.showSteps, s.parentId, s.parentDsl, s.selectorTabIndex, s.setShowSelector, s.setSelectorTabIndex,
+ s.selectedPosition, s.selectedLabels, s.setSelectedLabels, s.addSelectedLabel, s.deleteSelectedLabel], shallow)
- public state: State = {
- tabIndex: this.props.tabIndex ? this.props.tabIndex : (this.props.parentDsl ? 'eip' : 'kamelet'),
- filter: '',
- selectedLabels: []
- }
+ //
+ // const [showSelector, showDeleteConfirmation, showSteps, deleteMessage, parentId, parentDsl, selectedPosition, selectorTabIndex,
+ // setShowSelector, setShowDeleteConfirmation, setPosition, setSelectorTabIndex, width, height, top, left] = useDesignerStore((s) =>
+ // [s.showSelector, s.showDeleteConfirmation, s.showSteps, s.deleteMessage, s.parentId, s.parentDsl, s.selectedPosition, s.selectorTabIndex,
+ // s.setShowSelector, s.setShowDeleteConfirmation, s.setPosition, s.setSelectorTabIndex, s.width, s.height, s.top, s.left], shallow)
- selectTab = (evt: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: string | number) => {
- this.setState({tabIndex: eventKey});
- }
+ const {deleteElement, selectElement, moveElement, onShowDeleteConfirmation, onDslSelect, openSelector, createRouteConfiguration} = useRouteDesignerHook();
- componentDidUpdate = (prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) => {
- if (prevProps.parentDsl !== this.props.parentDsl) {
- this.setState({tabIndex: CamelUi.getSelectorModelTypes(this.props.parentDsl, this.props.showSteps)[0][0]});
- }
+
+ const [filter, setFilter] = useState<string>('');
+
+ useEffect(() => {
+ }, [selectedLabels]);
+
+
+ function selectTab(evt: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: string | number) {
+ setSelectorTabIndex(eventKey);
}
- selectDsl = (evt: React.MouseEvent, dsl: any) => {
+ // function componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any) {
+ // if (prevProps.parentDsl !== props.parentDsl) {
+ // this.setState({tabIndex: CamelUi.getSelectorModelTypes(props.parentDsl, props.showSteps)[0][0]});
+ // }
+ // }
+
+ function selectDsl(evt: React.MouseEvent, dsl: any) {
evt.stopPropagation();
- this.setState({filter: ""});
- this.props.onDslSelect.call(this, dsl, this.props.parentId, this.props.position);
+ setFilter('');
+ onDslSelect(dsl, parentId, selectedPosition);
}
- searchInput = () => {
+ function searchInput() {
return (
<Form isHorizontal className="search" autoComplete="off">
<FormGroup fieldId="search">
- <TextInput className="text-field" type="text" id="search" name="search"
- value={this.state.filter}
- onChange={(_, value) => this.setState({filter: value})}/>
+ <TextInput className="text-field" type="text" id="search" name="search"
+ value={filter}
+ onChange={(_, value) => setFilter(value)}/>
</FormGroup>
</Form>
)
}
- getCard(dsl: DslMetaModel, index: number) {
+ function getCard(dsl: DslMetaModel, index: number) {
const labels = dsl.labels !== undefined ? dsl.labels.split(",").filter(label => label !== 'eip') : [];
return (
<Card key={dsl.dsl + index} isCompact className="dsl-card"
- onClick={event => this.selectDsl(event, dsl)}>
+ onClick={event => selectDsl(event, dsl)}>
<CardHeader className="header-labels">
<Badge isRead className="support-level labels">{dsl.supportLevel}</Badge>
{['kamelet', 'component'].includes(dsl.navigation.toLowerCase()) &&
@@ -99,7 +104,8 @@ export class DslSelector extends React.Component<Props, State> {
</CardBody>
<CardFooter className="footer-labels">
<div style={{display: "flex", flexDirection: "row", justifyContent: "start"}}>
- {labels.map(label => <Badge key={label} isRead className="labels">{label}</Badge>)}
+ {labels.map((label, index) => <Badge key={label + "-" + index} isRead
+ className="labels">{label}</Badge>)}
</div>
</CardFooter>
@@ -107,90 +113,85 @@ export class DslSelector extends React.Component<Props, State> {
)
}
- close = () => {
- this.setState({filter: ""});
- this.props.onClose?.call(this);
+ function close() {
+ setFilter('');
+ setShowSelector(false);
}
- selectLabel = (eipLabel: string) => {
- if (!this.state.selectedLabels.includes(eipLabel)) {
- this.setState((state) => {
- state.selectedLabels.push(eipLabel);
- return state
- })
+ function selectLabel(eipLabel: string) {
+ if (!selectedLabels.includes(eipLabel)) {
+ addSelectedLabel(eipLabel);
} else {
- this.setState((state) => {
- const index = state.selectedLabels.findIndex((label) => label === eipLabel);
- state.selectedLabels.splice(index, 1);
- return state;
- })
+ deleteSelectedLabelbels(eipLabel);
}
}
- render() {
- const isEip = this.state.tabIndex === 'eip';
- const {parentDsl, isOpen} = this.props;
- const title = parentDsl === undefined ? "Select source" : "Select step";
- const navigation: string = this.state.tabIndex ? this.state.tabIndex.toString() : "";
- const elements = CamelUi.getSelectorModelsForParentFiltered(parentDsl, navigation, this.props.showSteps);
- const eipLabels = [...new Set(elements.map(e => e.labels).join(",").split(",").filter(e => e !== 'eip'))];
- const filteredElement = elements
- .filter((dsl: DslMetaModel) => CamelUi.checkFilter(dsl, this.state.filter))
- .filter((dsl: DslMetaModel) => {
- if (!isEip || this.state.selectedLabels.length === 0) {
- return true;
- } else {
- return dsl.labels.split(",").some(r => this.state.selectedLabels.includes(r));
- }
- });
- return (
- <Modal
- aria-label={title}
- width={'90%'}
- className='dsl-modal'
- isOpen={this.props.isOpen}
- onClose={() => this.close()}
- header={
- <Flex direction={{default: "column"}}>
- <FlexItem>
- <h3>{title}</h3>
- {this.searchInput()}
- </FlexItem>
- <FlexItem>
- <Tabs style={{overflow: 'hidden'}} activeKey={this.state.tabIndex}
- onSelect={this.selectTab}>
- {parentDsl !== undefined &&
- <Tab eventKey={"eip"} key={"tab-eip"}
- title={<TabTitleText>Integration Patterns</TabTitleText>}>
- </Tab>
- }
- <Tab eventKey={'kamelet'} key={"tab-kamelet"}
- title={<TabTitleText>Kamelets</TabTitleText>}>
- </Tab>
- <Tab eventKey={'component'} key={'tab-component'}
- title={<TabTitleText>Components</TabTitleText>}>
+ const isEip = selectorTabIndex === 'eip';
+ const title = parentDsl === undefined ? "Select source" : "Select step";
+ const navigation: string = selectorTabIndex ? selectorTabIndex.toString() : '';
+ const elements = CamelUi.getSelectorModelsForParentFiltered(parentDsl, navigation, showSteps);
+ const eipLabels = [...new Set(elements.map(e => e.labels).join(",").split(",").filter(e => e !== 'eip'))];
+ console.log("-----");
+ console.log(selectedLabels);
+ console.log(eipLabels);
+ console.log("-----");
+ const filteredElement = elements
+ .filter((dsl: DslMetaModel) => CamelUi.checkFilter(dsl, filter))
+ .filter((dsl: DslMetaModel) => {
+ if (!isEip || selectedLabels.length === 0) {
+ return true;
+ } else {
+ return dsl.labels.split(",").some(r => selectedLabels.includes(r));
+ }
+ });
+
+ return (
+ <Modal
+ aria-label={title}
+ width={'90%'}
+ className='dsl-modal'
+ isOpen={showSelector}
+ onClose={() => close()}
+ header={
+ <Flex direction={{default: "column"}}>
+ <FlexItem>
+ <h3>{title}</h3>
+ {searchInput()}
+ </FlexItem>
+ <FlexItem>
+ <Tabs style={{overflow: 'hidden'}} activeKey={selectorTabIndex}
+ onSelect={selectTab}>
+ {parentDsl !== undefined &&
+ <Tab eventKey={"eip"} key={"tab-eip"}
+ title={<TabTitleText>Integration Patterns</TabTitleText>}>
</Tab>
- </Tabs>
- </FlexItem>
- </Flex>
- }
- actions={{}}>
- <PageSection padding={{default:"noPadding"}} variant={this.props.dark ? "darker" : "light"}>
- {isEip && <ToggleGroup aria-label="Labels" isCompact>
- {eipLabels.map(eipLabel => <ToggleGroupItem
- key={eipLabel}
- text={eipLabel}
- buttonId={eipLabel}
- isSelected={this.state.selectedLabels.includes(eipLabel)}
- onChange={selected => this.selectLabel(eipLabel)}
- />)}
- </ToggleGroup>}
- <Gallery key={"gallery-" + navigation} hasGutter className="dsl-gallery">
- {isOpen && filteredElement.map((dsl: DslMetaModel, index: number) => this.getCard(dsl, index))}
- </Gallery>
- </PageSection>
- </Modal>
- )
- }
+ }
+ <Tab eventKey={'kamelet'} key={"tab-kamelet"}
+ title={<TabTitleText>Kamelets</TabTitleText>}>
+ </Tab>
+ <Tab eventKey={'component'} key={'tab-component'}
+ title={<TabTitleText>Components</TabTitleText>}>
+ </Tab>
+ </Tabs>
+ </FlexItem>
+ </Flex>
+ }
+ actions={{}}>
+ <PageSection padding={{default: "noPadding"}} variant={props.dark ? "darker" : "light"}>
+ {isEip && <ToggleGroup aria-label="Labels" isCompact>
+ {eipLabels.map(eipLabel => <ToggleGroupItem
+ key={eipLabel}
+ text={eipLabel}
+ buttonId={eipLabel}
+ isSelected={selectedLabels.includes(eipLabel)}
+ onChange={selected => selectLabel(eipLabel)}
+ />)}
+ </ToggleGroup>}
+ <Gallery key={"gallery-" + navigation} hasGutter className="dsl-gallery">
+ {showSelector && filteredElement.map((dsl: DslMetaModel, index: number) => getCard(dsl, index))}
+ </Gallery>
+ </PageSection>
+ </Modal>
+ )
}
\ No newline at end of file
diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx b/karavan-designer/src/designer/route/RouteDesigner.tsx
index 17bc9b28..f6bb737b 100644
--- a/karavan-designer/src/designer/route/RouteDesigner.tsx
+++ b/karavan-designer/src/designer/route/RouteDesigner.tsx
@@ -33,7 +33,7 @@ import {DslElement} from "./DslElement";
import {CamelUi} from "../utils/CamelUi";
import {CamelDisplayUtil} from "karavan-core/lib/api/CamelDisplayUtil";
import {useRouteDesignerHook} from "./useRouteDesignerHook";
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useConnectionsStore, useDesignerStore, useIntegrationStore, useSelectorStore} from "../KaravanStore";
import {shallow} from "zustand/shallow";
import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {RouteConfigurationDefinition} from "karavan-core/lib/model/CamelDefinition";
@@ -53,35 +53,32 @@ export const RouteDesigner = (props: Props) => {
const printerRef = React.createRef();
const contentRef: React.RefObject<HTMLDivElement> = useRef(null);
- const {
- deleteElement,
- selectElement,
- moveElement,
- onShowDeleteConfirmation,
- onDslSelect,
- openSelector,
- createRouteConfiguration
- } = useRouteDesignerHook();
+ const {deleteElement, selectElement, moveElement, onShowDeleteConfirmation, onDslSelect, openSelector, createRouteConfiguration} = useRouteDesignerHook();
const [integration] = useIntegrationStore((state) => [state.integration], shallow)
- const [showSelector, showDeleteConfirmation, showSteps, deleteMessage, parentId, parentDsl, selectedPosition, selectorTabIndex,
- setShowSelector, setShowDeleteConfirmation, setPosition, width, height, top, left] = useDesignerStore((s) =>
- [s.showSelector, s.showDeleteConfirmation, s.showSteps, s.deleteMessage, s.parentId, s.parentDsl, s.selectedPosition, s.selectorTabIndex,
- s.setShowSelector, s.setShowDeleteConfirmation, s.setPosition, s.width, s.height, s.top, s.left], shallow)
+ const [showDeleteConfirmation, deleteMessage , setShowDeleteConfirmation, setPosition, width, height, top, left] =
+ useDesignerStore((s) =>
+ [s.showDeleteConfirmation, s.deleteMessage, s.setShowDeleteConfirmation, s.setPosition, s.width, s.height, s.top, s.left], shallow)
- // const [refState, setRefState] = useState<Element | null>(null);
+ const [showSelector, showSteps, parentId, parentDsl, selectorTabIndex, setShowSelector, setSelectorTabIndex] =
+ useSelectorStore((s) =>
+ [s.showSelector, s.showSteps, s.parentId, s.parentDsl, s.selectorTabIndex, s.setShowSelector, s.setSelectorTabIndex], shallow)
- const onResize = useCallback((target: HTMLDivElement) => {
- if (flowRef && flowRef.current) {
- const el = flowRef.current.getBoundingClientRect();
- if (width !== el.width || height !== el.height || top !== el.top || left !== el.left) {
- setPosition(el.width, el.height, el.top, el.left)
- console.log("elmRect", el)
- }
+ const [clearSteps] = useConnectionsStore((s) => [s.clearSteps])
+
+ useEffect(() => {
+ if (flowRef.current === null) {
+ clearSteps();
+ } else {
+ changeGraphSize();
}
- }, []);
+ }, [showSelector]);
- const onMutate = useCallback((target: HTMLDivElement, mutations: any) => {
+ const onChangeGraphSize = useCallback((target: HTMLDivElement) => {
+ changeGraphSize();
+ }, [])
+
+ function changeGraphSize () {
if (flowRef && flowRef.current) {
const el = flowRef.current.getBoundingClientRect();
if (width !== el.width || height !== el.height || top !== el.top || left !== el.left) {
@@ -89,15 +86,11 @@ export const RouteDesigner = (props: Props) => {
console.log("elmRect", el)
}
}
- }, []);
+ }
- const firstRef = useResizeObserver(onResize);
- const secondRef = useMutationsObserver(onMutate);
+ const firstRef = useResizeObserver(onChangeGraphSize);
+ const secondRef = useMutationsObserver(onChangeGraphSize);
const flowRef = useRef<HTMLDivElement | null>(null);
- //
- // useEffect(() => {
- // if (refState) console.log("useEffect RouteDesigner", refState);
- // }, [refState]);
// function componentDidMount() {
// logic.componentDidMount();
@@ -123,19 +116,6 @@ export const RouteDesigner = (props: Props) => {
// return logic.componentDidUpdate(prevState, snapshot);
// }
- function getSelectorModal() {
- return (
- <DslSelector
- isOpen={showSelector}
- onClose={() => setShowSelector(false)}
- dark={props.dark}
- parentId={parentId}
- parentDsl={parentDsl}
- showSteps={showSteps}
- position={selectedPosition}
- tabIndex={selectorTabIndex}
- onDslSelect={(dsl, parentId1) => onDslSelect(dsl, parentId1)}/>)
- }
function getDeleteConfirmation() {
let htmlContent: string = deleteMessage;
@@ -174,8 +154,6 @@ export const RouteDesigner = (props: Props) => {
)
}
- console.log("RENDER ROUTE_DESIGNER");
-
function getGraph() {
const routes = CamelUi.getRoutes(integration);
const routeConfigurations = CamelUi.getRouteConfigurations(integration);
@@ -234,7 +212,7 @@ export const RouteDesigner = (props: Props) => {
</DrawerContent>
</Drawer>
</div>
- {getSelectorModal()}
+ <DslSelector dark={props.dark}/>
{getDeleteConfirmation()}
</div>
)
diff --git a/karavan-designer/src/designer/route/useDrawerMutationsObserver.tsx b/karavan-designer/src/designer/route/useDrawerMutationsObserver.tsx
index f24a9e58..b7b5fbb0 100644
--- a/karavan-designer/src/designer/route/useDrawerMutationsObserver.tsx
+++ b/karavan-designer/src/designer/route/useDrawerMutationsObserver.tsx
@@ -21,7 +21,7 @@ function useMutationsObserver<T extends HTMLElement>(callback: (target: T, mutat
const ref = useRef<T>(null)
useLayoutEffect(() => {
-
+ console.log("useMutationsObserver")
const element = ref?.current;
if (!element) {
return;
diff --git a/karavan-designer/src/designer/route/useResizeObserver.tsx b/karavan-designer/src/designer/route/useResizeObserver.tsx
index 27915bea..8b7ea995 100644
--- a/karavan-designer/src/designer/route/useResizeObserver.tsx
+++ b/karavan-designer/src/designer/route/useResizeObserver.tsx
@@ -21,7 +21,7 @@ function useResizeObserver<T extends HTMLElement>(callback: (target: T, entry: R
const ref = useRef<T>(null)
useLayoutEffect(() => {
-
+ console.log("useResizeObserver")
const element = ref?.current;
if (!element) {
return;
diff --git a/karavan-designer/src/designer/route/useRouteDesignerHook.tsx b/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
index fd97b731..5d78199e 100644
--- a/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
+++ b/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
@@ -30,19 +30,21 @@ import {RouteDesigner} from "./RouteDesigner";
import {findDOMNode} from "react-dom";
import {Subscription} from "rxjs";
import debounce from 'lodash.debounce';
-import {useDesignerStore, useIntegrationStore} from "../KaravanStore";
+import {useDesignerStore, useIntegrationStore, useSelectorStore} from "../KaravanStore";
import {shallow} from "zustand/shallow";
import {setTabIndex} from "@patternfly/react-core";
export const useRouteDesignerHook = () => {
const [integration, setIntegration] = useIntegrationStore((state) => [state.integration, state.setIntegration], shallow)
- const [showSelector, showDeleteConfirmation, propertyOnly, showSteps,deleteMessage,parentId, selectedUuids,clipboardSteps, parentDsl,selectedPosition,selectedStep,selectorTabIndex,shiftKeyPressed,
- setShowSelector, setShowDeleteConfirmation,setPropertyOnly,setShowSteps, setDeleteMessage, setSelectedStep, setParentId, setParentDsl, setSelectedPosition, setSelectedUuids, setClipboardSteps,setPosition,setSelectorTabIndex,
+ const [ showDeleteConfirmation, propertyOnly,deleteMessage, selectedUuids,clipboardSteps,selectedStep,shiftKeyPressed,
+ setShowDeleteConfirmation,setPropertyOnly, setDeleteMessage, setSelectedStep, setSelectedUuids, setClipboardSteps, setPosition,
width, height, top, left] = useDesignerStore((s) =>
- [s.showSelector, s.showDeleteConfirmation, s.propertyOnly, s.showSteps,s.deleteMessage,s.parentId, s.selectedUuids,s.clipboardSteps, s.parentDsl, s.selectedPosition, s.selectedStep,s.selectorTabIndex, s.shiftKeyPressed,
- s.setShowSelector, s.setShowDeleteConfirmation,s.setPropertyOnly,s.setShowSteps,s.setDeleteMessage, s.setSelectedStep, s.setParentId, s.setParentDsl, s.setSelectedPosition, s.setSelectedUuids, s.setClipboardSteps, s.setPosition,s.setSelectorTabIndex,
+ [s.showDeleteConfirmation, s.propertyOnly,s.deleteMessage, s.selectedUuids,s.clipboardSteps, s.selectedStep, s.shiftKeyPressed,
+ s.setShowDeleteConfirmation,s.setPropertyOnly,s.setDeleteMessage, s.setSelectedStep, s.setSelectedUuids, s.setClipboardSteps, s.setPosition,
s.width, s.height, s.top, s.left], shallow)
+ const [setParentId, setShowSelector, setSelectorTabIndex, setParentDsl, setShowSteps, setSelectedPosition] = useSelectorStore((s) =>
+ [s.setParentId, s.setShowSelector, s.setSelectorTabIndex, s.setParentDsl, s.setShowSteps, s.setSelectedPosition], shallow)
// const commandSub = EventBus.onCommand()?.subscribe((command: Command) => onCommand(command));
//
@@ -266,7 +268,7 @@ export const useRouteDesignerHook = () => {
setParentDsl(parentDsl);
setShowSteps(showSteps);
setSelectedPosition(position);
- setSelectorTabIndex(selectorTabIndex);
+ setSelectorTabIndex((parentId === undefined && parentDsl === undefined) ? 'kamelet' : 'eip');
}
//
// function closeDslSelector = () => {
[camel-karavan] 03/03: Delete element for #836
Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch feature-836
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
commit 27ebf976cdcca4d5c4ae84ce79163787c6b87ecc
Author: Marat Gubaidullin <ma...@Marats-MacBook-Pro.local>
AuthorDate: Tue Aug 22 19:50:20 2023 -0400
Delete element for #836
---
.../src/designer/route/DeleteConfirmation.tsx | 51 ++++++++++++++++++++++
karavan-designer/src/designer/route/DslElement.tsx | 1 +
.../src/designer/route/DslSelector.tsx | 4 --
.../src/designer/route/RouteDesigner.tsx | 6 +--
.../src/designer/route/useRouteDesignerHook.tsx | 3 +-
5 files changed, 56 insertions(+), 9 deletions(-)
diff --git a/karavan-designer/src/designer/route/DeleteConfirmation.tsx b/karavan-designer/src/designer/route/DeleteConfirmation.tsx
new file mode 100644
index 00000000..1fcf6298
--- /dev/null
+++ b/karavan-designer/src/designer/route/DeleteConfirmation.tsx
@@ -0,0 +1,51 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import {
+ Button, Modal,
+} from '@patternfly/react-core';
+import '../karavan.css';
+import {useRouteDesignerHook} from "./useRouteDesignerHook";
+import {useDesignerStore} from "../KaravanStore";
+import {shallow} from "zustand/shallow";
+
+export const DeleteConfirmation = () => {
+
+
+ const {deleteElement} = useRouteDesignerHook();
+
+ const [showDeleteConfirmation, deleteMessage , setShowDeleteConfirmation] =
+ useDesignerStore((s) => [s.showDeleteConfirmation, s.deleteMessage, s.setShowDeleteConfirmation], shallow)
+
+ return (
+ <Modal
+ className="modal-delete"
+ title="Confirmation"
+ isOpen={showDeleteConfirmation}
+ onClose={() => setShowDeleteConfirmation(false)}
+ actions={[
+ <Button key="confirm" variant="primary" onClick={e => deleteElement()}>Delete</Button>,
+ <Button key="cancel" variant="link"
+ onClick={e => setShowDeleteConfirmation(false)}>Cancel</Button>
+ ]}
+ onEscapePress={e => setShowDeleteConfirmation(false)}>
+ <div>
+ {deleteMessage}
+ </div>
+ </Modal>
+ )
+}
\ No newline at end of file
diff --git a/karavan-designer/src/designer/route/DslElement.tsx b/karavan-designer/src/designer/route/DslElement.tsx
index 72380c03..bf246051 100644
--- a/karavan-designer/src/designer/route/DslElement.tsx
+++ b/karavan-designer/src/designer/route/DslElement.tsx
@@ -76,6 +76,7 @@ export const DslElement = (props: Props) => {
function onDeleteElement (evt: React.MouseEvent) {
evt.stopPropagation();
+ console.log("!!!!!")
onShowDeleteConfirmation(props.step.uuid);
}
diff --git a/karavan-designer/src/designer/route/DslSelector.tsx b/karavan-designer/src/designer/route/DslSelector.tsx
index d18b9a87..798a6ed6 100644
--- a/karavan-designer/src/designer/route/DslSelector.tsx
+++ b/karavan-designer/src/designer/route/DslSelector.tsx
@@ -132,10 +132,6 @@ export const DslSelector = (props: Props) => {
const navigation: string = selectorTabIndex ? selectorTabIndex.toString() : '';
const elements = CamelUi.getSelectorModelsForParentFiltered(parentDsl, navigation, showSteps);
const eipLabels = [...new Set(elements.map(e => e.labels).join(",").split(",").filter(e => e !== 'eip'))];
- console.log("-----");
- console.log(selectedLabels);
- console.log(eipLabels);
- console.log("-----");
const filteredElement = elements
.filter((dsl: DslMetaModel) => CamelUi.checkFilter(dsl, filter))
.filter((dsl: DslMetaModel) => {
diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx b/karavan-designer/src/designer/route/RouteDesigner.tsx
index f6bb737b..878d806c 100644
--- a/karavan-designer/src/designer/route/RouteDesigner.tsx
+++ b/karavan-designer/src/designer/route/RouteDesigner.tsx
@@ -41,6 +41,7 @@ import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt"
import useResizeObserver from "./useResizeObserver";
import {DslPosition} from "../utils/EventBus";
import useMutationsObserver from "./useDrawerMutationsObserver";
+import {DeleteConfirmation} from "./DeleteConfirmation";
interface Props {
// onSave?: (integration: Integration, propertyOnly: boolean) => void
@@ -83,7 +84,6 @@ export const RouteDesigner = (props: Props) => {
const el = flowRef.current.getBoundingClientRect();
if (width !== el.width || height !== el.height || top !== el.top || left !== el.left) {
setPosition(el.width, el.height, el.top, el.left)
- console.log("elmRect", el)
}
}
}
@@ -212,8 +212,8 @@ export const RouteDesigner = (props: Props) => {
</DrawerContent>
</Drawer>
</div>
- <DslSelector dark={props.dark}/>
- {getDeleteConfirmation()}
+ {showSelector && <DslSelector dark={props.dark}/>}
+ {showDeleteConfirmation && <DeleteConfirmation/>}
</div>
)
}
\ No newline at end of file
diff --git a/karavan-designer/src/designer/route/useRouteDesignerHook.tsx b/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
index 5d78199e..f2c995da 100644
--- a/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
+++ b/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
@@ -199,8 +199,7 @@ export const useRouteDesignerHook = () => {
} else {
message = 'Delete element from route?';
}
- setShowSelector(false);
- setShowDeleteConfirmation(false);
+ setShowDeleteConfirmation(true);
setDeleteMessage(message);
setSelectedUuids(uuidsToDelete);
}