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 <marat@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]);