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 5eb8615b4af9e00fd2b6ed674b74073060d97546 Author: Marat Gubaidullin <ma...@talismancloud.io> AuthorDate: Wed Dec 6 21:33:23 2023 -0500 Preview fixes of new Designer --- karavan-designer/src/designer/DesignerStore.ts | 31 ++-------- .../src/designer/route/DslConnections.tsx | 72 ++++++++++------------ .../src/designer/route/element/DslElement.tsx | 5 +- .../src/designer/route/useRouteDesignerHook.tsx | 1 - karavan-designer/src/designer/utils/EventBus.ts | 23 ------- 5 files changed, 40 insertions(+), 92 deletions(-) diff --git a/karavan-designer/src/designer/DesignerStore.ts b/karavan-designer/src/designer/DesignerStore.ts index 815f0f68..407713a7 100644 --- a/karavan-designer/src/designer/DesignerStore.ts +++ b/karavan-designer/src/designer/DesignerStore.ts @@ -16,7 +16,7 @@ */ import {CamelElement, Integration} from "karavan-core/lib/model/IntegrationDefinition"; -import {ButtonPosition, DslPosition, EventBus} from "./utils/EventBus"; +import {DslPosition, EventBus} from "./utils/EventBus"; import {createWithEqualityFn} from "zustand/traditional"; import {shallow} from "zustand/shallow"; @@ -120,10 +120,6 @@ interface ConnectionsState { deleteStep: (uuid: string) => void; clearSteps: () => void; setSteps: (steps: Map<string, DslPosition>) => void; - buttons: Map<string, ButtonPosition>; - addButton: (uuid: string, button: ButtonPosition) => void; - deleteButton: (uuid: string) => void; - clearButtons: () => void; } export const useConnectionsStore = createWithEqualityFn<ConnectionsState>((set) => ({ @@ -138,6 +134,8 @@ export const useConnectionsStore = createWithEqualityFn<ConnectionsState>((set) // state.steps.clear(); Array.from(state.steps.entries()) .filter(value => value[1]?.parent?.uuid !== uuid) + .filter(value => value[1]?.prevStep?.uuid !== uuid) + .filter(value => value[1]?.nextstep?.uuid !== uuid) .forEach(value => state.steps.set(value[0], value[1])); state.steps.delete(uuid) return state; @@ -151,28 +149,7 @@ export const useConnectionsStore = createWithEqualityFn<ConnectionsState>((set) }, setSteps: (steps: Map<string, DslPosition>) => { set({steps: steps}) - }, - buttons: new Map<string, ButtonPosition>(), - addButton: (uuid: string, button: ButtonPosition) => { - set(state => ({ - buttons: new Map(state.buttons).set(uuid, button), - })) - }, - clearButtons: () => { - set((state: ConnectionsState) => { - state.buttons.clear(); - return state; - }) - }, - deleteButton: (uuid: string) => { - set((state: ConnectionsState) => { - Array.from(state.buttons.entries()) - .filter(value => value[1].uuid !== uuid) - .forEach(value => state.buttons.set(value[0], value[1])); - state.buttons.delete(uuid) - return state; - }) - }, + } }), shallow) type DesignerState = { diff --git a/karavan-designer/src/designer/route/DslConnections.tsx b/karavan-designer/src/designer/route/DslConnections.tsx index 934fd89c..c7651aac 100644 --- a/karavan-designer/src/designer/route/DslConnections.tsx +++ b/karavan-designer/src/designer/route/DslConnections.tsx @@ -14,15 +14,16 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, {JSX, useEffect} from 'react'; +import React, {JSX, useEffect, useState} from 'react'; import '../karavan.css'; -import {ButtonPosition, DslPosition, EventBus} from "../utils/EventBus"; +import {DslPosition, EventBus} from "../utils/EventBus"; import {CamelUi} from "../utils/CamelUi"; import {useConnectionsStore, useDesignerStore, useIntegrationStore} from "../DesignerStore"; import {shallow} from "zustand/shallow"; import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt"; import {TopologyUtils} from "karavan-core/lib/api/TopologyUtils"; -import {CamelElement} from "../../../../karavan-core/lib/model/IntegrationDefinition"; +import {CamelElement} from "karavan-core/lib/model/IntegrationDefinition"; +import {v4 as uuidv4} from "uuid"; const overlapGap: number = 40; @@ -31,36 +32,24 @@ export function DslConnections() { const [integration] = useIntegrationStore((state) => [state.integration], 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, buttons, addButton, clearButtons, deleteButton] = - useConnectionsStore((s) => [s.steps, s.addStep, s.deleteStep, s.clearSteps, - s.buttons, s.addButton, s.clearButtons, s.deleteButton], shallow) + const [steps, addStep, deleteStep, clearSteps] = + useConnectionsStore((s) => [s.steps, s.addStep, s.deleteStep, s.clearSteps], shallow) + + const [svgKey, setSvgKey] = useState<string>('svgKey'); useEffect(() => { const sub1 = EventBus.onPosition()?.subscribe((evt: DslPosition) => setPosition(evt)); - const sub2 = EventBus.onButtonPosition()?.subscribe((btn: ButtonPosition) => setButtonPosition(btn)); return () => { sub1?.unsubscribe(); - sub2?.unsubscribe(); }; }); useEffect(() => { const toDelete1: string[] = Array.from(steps.keys()).filter(k => CamelDefinitionApiExt.findElementInIntegration(integration, k) === undefined); toDelete1.forEach(key => deleteStep(key)); - const toDelete2: string[] = Array.from(buttons.keys()).filter(k => CamelDefinitionApiExt.findElementInIntegration(integration, k) === undefined); - toDelete2.forEach(key => deleteButton(key)); + setSvgKey(uuidv4()) }, [integration]); - function setButtonPosition(btn: ButtonPosition) { - if (btn.command === "add") { - addButton(btn.uuid, btn); - } else if (btn.command === "delete") { - deleteButton(btn.uuid); - } else if (btn.command === "clean") { - clearButtons(); - } - } - function setPosition(evt: DslPosition) { if (evt.command === "add") { addStep(evt.step.uuid, evt); @@ -242,7 +231,8 @@ export function DslConnections() { if (from && to) { const rect1 = fromHeader === true ? from.headerRect : from.rect; const rect2 = toHeader === true ? to.headerRect : to.rect; - result.push(getComplexArrow(from.step.uuid + "->" + to.step.uuid, rect1, rect2, toHeader === true)); + const key = from.step.uuid + "->" + to.step.uuid; + result.push(getComplexArrow(key, rect1, rect2, toHeader === true)); } return result; } @@ -250,15 +240,9 @@ export function DslConnections() { function getArrow(pos: DslPosition): JSX.Element[] { const list: JSX.Element[] = []; - if (pos.parent && pos.parent.dslName === 'FromDefinition' && pos.position === 0) { - // const parent = steps.get(pos.parent.uuid); - // list.push(...addArrowToList(list, parent, pos, true, false)) - } else if (pos.parent && pos.parent.dslName === 'TryDefinition' && pos.position === 0) { + if (pos.parent && pos.parent.dslName === 'TryDefinition' && pos.position === 0) { const parent = steps.get(pos.parent.uuid); list.push(...addArrowToList(list, parent, pos, true, false)) - } else if (pos.parent && ['CatchDefinition', 'FinallyDefinition'].includes(pos.parent.dslName) && pos.position === 0) { - const parent = steps.get(pos.parent.uuid); - list.push(...addArrowToList(list, parent, pos, true, true)) } else if (pos.parent && pos.parent.dslName === 'MulticastDefinition') { const parent = steps.get(pos.parent.uuid); list.push(...addArrowToList(list, parent, pos, true, false)) @@ -315,10 +299,23 @@ export function DslConnections() { } } - if (!isSpecial(pos) && pos.inSteps && pos.nextstep && !pos.step.hasSteps() && pos.parent?.dslName !== 'MulticastDefinition') { - const to = steps.get(pos.nextstep.uuid); - list.push(...addArrowToList(list, pos, to, true, true)) + if (!isSpecial(pos) && pos.inSteps && pos.nextstep && pos.parent?.dslName !== 'MulticastDefinition') { + const next = steps.get(pos.nextstep.uuid); + if (pos.step.hasSteps() && pos.prevStep) { + } else { + list.push(...addArrowToList(list, pos, next, true, true)) + } + } + + if (!isSpecial(pos) && pos.inSteps && pos.nextstep && pos.parent?.dslName !== 'MulticastDefinition') { + const next = steps.get(pos.nextstep.uuid); + if (next && !isSpecial(next) && next.inSteps) { + // console.log(pos) + // const to = steps.get(parent.nextstep.uuid); + // list.push(...addArrowToList(list, pos, to, true, true)) + } } + return list; } @@ -360,26 +357,25 @@ export function DslConnections() { + ` L ${LX2} ${LY2}` + ` Q ${Q2_X1} ${Q2_Y1} ${Q2_X2} ${Q2_Y2}` return ( - <path key={key} name={key} d={path} className="path" markerEnd="url(#arrowhead)"/> + <path key={uuidv4()} name={key} d={path} className="path" markerEnd="url(#arrowhead)"/> ) } function getSvg() { const stepsArray = Array.from(steps.values()); + const arrows = stepsArray.map(pos => getArrow(pos)).flat(1); + const uniqueArrows = [...new Map(arrows.map(item => [(item as any).key, item])).values()] return ( - <svg + <svg key={svgKey} style={{width: width, height: height, position: "absolute", left: 0, top: 0}} viewBox={"0 0 " + (width) + " " + (height)}> <defs> - <marker id="arrowhead" markerWidth="9" markerHeight="6" refX="0" refY="3" orient="auto" - className="arrow"> + <marker id="arrowhead" markerWidth="9" markerHeight="6" refX="0" refY="3" orient="auto" className="arrow"> <polygon points="0 0, 9 3, 0 6"/> </marker> </defs> {stepsArray.map(pos => getCircle(pos))} - <g> - {stepsArray.map(pos => getArrow(pos)).flat(1)} - </g> + {uniqueArrows} {getIncomings().map(p => getIncoming(p))} {getOutgoings().map(p => getOutgoing(p))} </svg> diff --git a/karavan-designer/src/designer/route/element/DslElement.tsx b/karavan-designer/src/designer/route/element/DslElement.tsx index 8f89a0f9..967d3321 100644 --- a/karavan-designer/src/designer/route/element/DslElement.tsx +++ b/karavan-designer/src/designer/route/element/DslElement.tsx @@ -27,7 +27,6 @@ import {shallow} from "zustand/shallow"; import {useRouteDesignerHook} from "../useRouteDesignerHook"; import {AddElementIcon} from "./DslElementIcons"; import {DslElementHeader} from "./DslElementHeader"; -import {TryDefinition} from "karavan-core/lib/model/CamelDefinition"; interface Props { step: CamelElement, @@ -145,10 +144,10 @@ export function DslElement(props: Props) { const rect = el.getBoundingClientRect(); if (step.showChildren) { EventBus.sendPosition("add", step, prevStep, nextStep, parent, rect, headerRect, props.position, inStepsLength, inSteps, isSelected); - } else { - EventBus.sendPosition("delete", step, prevStep, nextStep, parent, new DOMRect(), new DOMRect(), 0, 0); } } + } else { + EventBus.sendPosition("delete", step, prevStep, nextStep, parent, new DOMRect(), new DOMRect(), 0, 0); } } diff --git a/karavan-designer/src/designer/route/useRouteDesignerHook.tsx b/karavan-designer/src/designer/route/useRouteDesignerHook.tsx index 0f90bb10..1457adba 100644 --- a/karavan-designer/src/designer/route/useRouteDesignerHook.tsx +++ b/karavan-designer/src/designer/route/useRouteDesignerHook.tsx @@ -106,7 +106,6 @@ export function useRouteDesignerHook () { const deleteElement = () => { EventBus.sendPosition("clean", new CamelElement(""), undefined,undefined, undefined, new DOMRect(), new DOMRect(), 0, 0); - EventBus.sendButtonPosition("clean", '', new CamelElement(""), new DOMRect()); let i = integration; selectedUuids.forEach(uuidToDelete => { i = CamelDefinitionApiExt.deleteStepFromIntegration(i, uuidToDelete); diff --git a/karavan-designer/src/designer/utils/EventBus.ts b/karavan-designer/src/designer/utils/EventBus.ts index 2d075b00..687bec9d 100644 --- a/karavan-designer/src/designer/utils/EventBus.ts +++ b/karavan-designer/src/designer/utils/EventBus.ts @@ -18,23 +18,6 @@ import {Subject} from 'rxjs'; import {CamelElement, Integration} from "karavan-core/lib/model/IntegrationDefinition"; import {v4 as uuidv4} from "uuid"; -export class ButtonPosition { - uuid: string = ''; - nextstep: CamelElement = new CamelElement(""); - rect: DOMRect = new DOMRect(); - command: "add" | "delete" | "clean" = "add"; - - constructor(command: "add" | "delete" | "clean", - uuid: string, - nextstep: CamelElement, - rect: DOMRect) { - this.uuid = uuid; - this.command = command; - this.nextstep = nextstep; - this.rect = rect; - } -} - export class DslPosition { step: CamelElement = new CamelElement(""); prevStep: CamelElement | undefined; @@ -110,7 +93,6 @@ export class ToastMessage { } } const dslPositions = new Subject<DslPosition>(); -const buttonPositions = new Subject<ButtonPosition>(); export const EventBus = { sendPosition: (command: "add" | "delete" | "clean", @@ -127,11 +109,6 @@ export const EventBus = { new DslPosition(command, step, prevStep, nextstep, parent, rect, headerRect, position, inStepsLength, inSteps, isSelected)), onPosition: () => dslPositions.asObservable(), - sendButtonPosition: (command: "add" | "delete" | "clean", uuid: string, - nextStep: CamelElement, - rect: DOMRect) => buttonPositions.next(new ButtonPosition(command, uuid, nextStep, rect)), - onButtonPosition: () => buttonPositions.asObservable(), - sendIntegrationUpdate: (i: Integration, propertyOnly: boolean) => updates.next(new IntegrationUpdate(i, propertyOnly)), onIntegrationUpdate: () => updates.asObservable(),