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/24 23:26:18 UTC
[camel-karavan] 04/06: Copy and Paste for #836
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 bff7ef31af9b0d3ad46b5d8629030a29f42b207a
Author: Marat Gubaidullin <ma...@Marats-MacBook-Pro.local>
AuthorDate: Thu Aug 24 09:11:32 2023 -0400
Copy and Paste for #836
---
karavan-designer/src/designer/KaravanDesigner.tsx | 6 ++----
karavan-designer/src/designer/KaravanStore.ts | 11 ++++++++---
karavan-designer/src/designer/route/DslSelector.tsx | 16 +++++-----------
.../src/designer/route/RouteDesigner.tsx | 21 +++++----------------
.../src/designer/route/useRouteDesignerHook.tsx | 8 +++-----
5 files changed, 23 insertions(+), 39 deletions(-)
diff --git a/karavan-designer/src/designer/KaravanDesigner.tsx b/karavan-designer/src/designer/KaravanDesigner.tsx
index 940df7e2..3c68baee 100644
--- a/karavan-designer/src/designer/KaravanDesigner.tsx
+++ b/karavan-designer/src/designer/KaravanDesigner.tsx
@@ -66,10 +66,8 @@ export class KaravanInstance {
export const KaravanDesigner = (props: Props) => {
const [tab, setTab] = useState<string>('routes');
- const [propertyOnly, setPropertyOnly, setDark] = useDesignerStore((state) =>
- [state.propertyOnly, state.setPropertyOnly, state.setDark], shallow )
- const [integration, setIntegration] = useIntegrationStore((state) =>
- [state.integration, state.setIntegration], shallow )
+ const [propertyOnly, setDark] = useDesignerStore((state) => [state.propertyOnly, state.setDark], shallow )
+ const [integration, setIntegration] = useIntegrationStore((state) => [state.integration, state.setIntegration], shallow )
useEffect(() => {
setIntegration(makeIntegration(props.yaml, props.filename));
diff --git a/karavan-designer/src/designer/KaravanStore.ts b/karavan-designer/src/designer/KaravanStore.ts
index daae7f4f..3bc87681 100644
--- a/karavan-designer/src/designer/KaravanStore.ts
+++ b/karavan-designer/src/designer/KaravanStore.ts
@@ -25,10 +25,16 @@ interface IntegrationState {
setIntegration: (integration: Integration) => void;
}
-export const useIntegrationStore = createWithEqualityFn<IntegrationState>((set) => ({
+export const useIntegrationStore = createWithEqualityFn<IntegrationState>((setState, getState, store) => ({
integration: Integration.createNew("demo", "plain"),
setIntegration: (integration: Integration) => {
- set({integration: integration})
+ setState((state: IntegrationState) => {
+ if (JSON.stringify(state.integration) === (JSON.stringify(integration))) {
+ return {integration: state.integration};
+ } else {
+ return {integration: integration};
+ }
+ })
},
}), shallow)
@@ -50,7 +56,6 @@ interface SelectorStateState {
addSelectedLabel: (label: string) => void;
deleteSelectedLabel: (label: string) => void;
clearSelectedLabels: () => void;
- setSelectedLabels: (selectedLabels: string []) => void;
}
export const useSelectorStore = createWithEqualityFn<SelectorStateState>((set) => ({
diff --git a/karavan-designer/src/designer/route/DslSelector.tsx b/karavan-designer/src/designer/route/DslSelector.tsx
index af0668e2..44786c8e 100644
--- a/karavan-designer/src/designer/route/DslSelector.tsx
+++ b/karavan-designer/src/designer/route/DslSelector.tsx
@@ -35,15 +35,15 @@ interface Props {
export const DslSelector = (props: Props) => {
const [showSelector, showSteps, parentId, parentDsl, selectorTabIndex, setShowSelector, setSelectorTabIndex,
- selectedPosition, selectedLabels, setSelectedLabels, addSelectedLabel, deleteSelectedLabelbels] =
+ selectedPosition, selectedLabels, addSelectedLabel, deleteSelectedLabel] =
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)
+ s.selectedPosition, s.selectedLabels, s.addSelectedLabel, s.deleteSelectedLabel], shallow)
const [dark] = useDesignerStore((s) => [s.dark], shallow)
- const {deleteElement, selectElement, moveElement, onShowDeleteConfirmation, onDslSelect, openSelector, createRouteConfiguration} = useRouteDesignerHook();
+ const {onDslSelect} = useRouteDesignerHook();
const [filter, setFilter] = useState<string>('');
@@ -56,15 +56,10 @@ export const DslSelector = (props: Props) => {
setSelectorTabIndex(eventKey);
}
- // 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();
setFilter('');
+ setShowSelector(false);
onDslSelect(dsl, parentId, selectedPosition);
}
@@ -118,11 +113,10 @@ export const DslSelector = (props: Props) => {
if (!selectedLabels.includes(eipLabel)) {
addSelectedLabel(eipLabel);
} else {
- deleteSelectedLabelbels(eipLabel);
+ deleteSelectedLabel(eipLabel);
}
}
-
const isEip = selectorTabIndex === 'eip';
const title = parentDsl === undefined ? "Select source" : "Select step";
const navigation: string = selectorTabIndex ? selectorTabIndex.toString() : '';
diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx b/karavan-designer/src/designer/route/RouteDesigner.tsx
index ce79383e..a69105cb 100644
--- a/karavan-designer/src/designer/route/RouteDesigner.tsx
+++ b/karavan-designer/src/designer/route/RouteDesigner.tsx
@@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import React, {createRef, useCallback, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useRef} from 'react';
import {
Drawer,
DrawerPanelContent,
@@ -46,19 +46,12 @@ import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi";
export const RouteDesigner = () => {
-
- const {deleteElement, selectElement, moveElement, onShowDeleteConfirmation, onDslSelect, openSelector, createRouteConfiguration, onCommand, handleKeyDown, handleKeyUp} = useRouteDesignerHook();
+ const {openSelector, createRouteConfiguration, onCommand, handleKeyDown, handleKeyUp} = useRouteDesignerHook();
const [integration] = useIntegrationStore((state) => [state.integration], shallow)
- const [showDeleteConfirmation, deleteMessage , setShowDeleteConfirmation, setPosition, setSelectedUuids, setShiftKeyPressed, setClipboardSteps,
- clipboardSteps, selectedUuids, width, height, top, left] =
- useDesignerStore((s) =>
- [s.showDeleteConfirmation, s.deleteMessage, s.setShowDeleteConfirmation, s.setPosition, s.setSelectedUuids, s.setShiftKeyPressed, s.setClipboardSteps,
- s.clipboardSteps, s.selectedUuids, s.width, s.height, s.top, s.left], shallow)
+ const [showDeleteConfirmation , setPosition,] = useDesignerStore((s) => [s.showDeleteConfirmation, s.setPosition], shallow)
- 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 [showSelector] = useSelectorStore((s) => [s.showSelector], shallow)
const [clearSteps] = useConnectionsStore((s) => [s.clearSteps])
@@ -80,7 +73,6 @@ export const RouteDesigner = () => {
const flowRef = useRef<HTMLDivElement | null>(null);
useEffect(()=> {
- console.log(integration)
// window.addEventListener('resize', changeGraphSize);
const interval = setInterval(() => {
changeGraphSize();
@@ -104,10 +96,7 @@ export const RouteDesigner = () => {
function getPropertiesPanel() {
return (
- <DrawerPanelContent onResize={(_event, width) => {
- // setState({key: Math.random().toString()})
- }}
- style={{transform: "initial"}} isResizable hasNoBorder defaultSize={'400px'}
+ <DrawerPanelContent style={{transform: "initial"}} isResizable hasNoBorder defaultSize={'400px'}
maxSize={'800px'} minSize={'300px'}>
{/*<DslProperties ref={ref}*/}
{/* integration={integration}*/}
diff --git a/karavan-designer/src/designer/route/useRouteDesignerHook.tsx b/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
index 26c88dd6..d7ed9027 100644
--- a/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
+++ b/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
@@ -316,12 +316,10 @@ export const useRouteDesignerHook = () => {
}
const addStep = (step: CamelElement, parentId: string, position?: number | undefined) => {
- const i = CamelDefinitionApiExt.addStepToIntegration(integration, step, parentId, position);
- const clone = CamelUtil.cloneIntegration(i);
- EventBus.sendPosition("clean", step, undefined, new DOMRect(), new DOMRect(), 0);
+ const clone = CamelUtil.cloneIntegration(integration);
+ const i = CamelDefinitionApiExt.addStepToIntegration(clone, step, parentId, position);
const selectedStep = step.dslName === 'RouteDefinition' ? (step as RouteDefinition).from : step;
- setIntegration(clone);
- setShowSelector(false);
+ setIntegration(i);
setSelectedStep(selectedStep);
setPropertyOnly(false);
setSelectedUuids([selectedStep.uuid]);