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/12/07 02:37:09 UTC
(camel-karavan) 03/04: Preview fixes of new Designer
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(),