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:17 UTC
[camel-karavan] 03/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 f432faaf7d88a93b9bf4474ee5a6866814a46cd2
Author: Marat Gubaidullin <ma...@Marats-MacBook-Pro.local>
AuthorDate: Wed Aug 23 19:13:18 2023 -0400
Copy and Paste for #836
---
karavan-designer/src/designer/KaravanStore.ts | 12 +-
.../src/designer/route/RouteDesigner.tsx | 45 ++------
.../src/designer/route/useRouteDesignerHook.tsx | 123 ++++++++++-----------
3 files changed, 82 insertions(+), 98 deletions(-)
diff --git a/karavan-designer/src/designer/KaravanStore.ts b/karavan-designer/src/designer/KaravanStore.ts
index 3bd2ed91..daae7f4f 100644
--- a/karavan-designer/src/designer/KaravanStore.ts
+++ b/karavan-designer/src/designer/KaravanStore.ts
@@ -192,10 +192,18 @@ export const useDesignerStore = createWithEqualityFn<DesignerState>((set) => ({
set({deleteMessage: deleteMessage})
},
setSelectedUuids: (selectedUuids: string[]) => {
- set({selectedUuids: selectedUuids})
+ set((state: DesignerState) => {
+ state.selectedUuids.length = 0;
+ state.selectedUuids.push(...selectedUuids);
+ return state;
+ })
},
setClipboardSteps: (clipboardSteps: CamelElement[]) => {
- set({clipboardSteps: clipboardSteps})
+ set((state: DesignerState) => {
+ state.clipboardSteps.length = 0;
+ state.clipboardSteps.push(...clipboardSteps);
+ return state;
+ })
},
width: 100,
height: 100,
diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx b/karavan-designer/src/designer/route/RouteDesigner.tsx
index 5e373f0d..ce79383e 100644
--- a/karavan-designer/src/designer/route/RouteDesigner.tsx
+++ b/karavan-designer/src/designer/route/RouteDesigner.tsx
@@ -39,19 +39,22 @@ import {CamelUtil} from "karavan-core/lib/api/CamelUtil";
import {RouteConfigurationDefinition} from "karavan-core/lib/model/CamelDefinition";
import {CamelDefinitionApiExt} from "karavan-core/lib/api/CamelDefinitionApiExt";
import useResizeObserver from "./useResizeObserver";
-import {Command, DslPosition, EventBus} from "../utils/EventBus";
+import {Command, EventBus} from "../utils/EventBus";
import useMutationsObserver from "./useDrawerMutationsObserver";
import {DeleteConfirmation} from "./DeleteConfirmation";
+import {CamelDefinitionApi} from "karavan-core/lib/api/CamelDefinitionApi";
export const RouteDesigner = () => {
- const {deleteElement, selectElement, moveElement, onShowDeleteConfirmation, onDslSelect, openSelector, createRouteConfiguration, handleKeyDown, handleKeyUp, onCommand} = useRouteDesignerHook();
+ const {deleteElement, selectElement, moveElement, onShowDeleteConfirmation, onDslSelect, openSelector, createRouteConfiguration, onCommand, handleKeyDown, handleKeyUp} = useRouteDesignerHook();
const [integration] = useIntegrationStore((state) => [state.integration], shallow)
- const [showDeleteConfirmation, deleteMessage , setShowDeleteConfirmation, setPosition, width, height, top, left] =
+ 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.width, s.height, s.top, s.left], shallow)
+ [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 [showSelector, showSteps, parentId, parentDsl, selectorTabIndex, setShowSelector, setSelectorTabIndex] =
useSelectorStore((s) =>
@@ -64,18 +67,10 @@ export const RouteDesigner = () => {
}, [])
function changeGraphSize () {
- console.log("changeGraphSize")
if (flowRef && flowRef.current) {
const el = flowRef.current;
const rect = el.getBoundingClientRect();
- // if (width !== el.scrollWidth || height !== el.scrollHeight || top !== rect.top || left !== rect.left) {
- if (width !== rect.width || height !== rect?.height || top !== rect.top || left !== rect.left) {
- console.log("State", width, height, top, left)
- console.log("Graph", rect.width, rect.height, rect.top, rect.left)
- setPosition(rect.width, rect.height, rect.top, rect.left)
- // setPosition(el?.scrollWidth, el?.scrollHeight, el?.scrollTop, el?.scrollLeft)
- // setPosition(el?.scrollWidth, el?.scrollHeight, rect.top, rect.left)
- }
+ setPosition(rect.width, rect.height, rect.top, rect.left)
}
}
@@ -84,7 +79,8 @@ export const RouteDesigner = () => {
const printerRef = useRef<HTMLDivElement | null>(null);
const flowRef = useRef<HTMLDivElement | null>(null);
- useEffect(()=>{
+ useEffect(()=> {
+ console.log(integration)
// window.addEventListener('resize', changeGraphSize);
const interval = setInterval(() => {
changeGraphSize();
@@ -104,26 +100,7 @@ export const RouteDesigner = () => {
window.removeEventListener('keyup', handleKeyUp);
commandSub?.unsubscribe();
}
- }, [showSelector])
-
- function getDeleteConfirmation() {
- let htmlContent: string = deleteMessage;
- 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>
- {htmlContent}
- </div>
- </Modal>)
- }
+ }, [showSelector, integration])
function getPropertiesPanel() {
return (
diff --git a/karavan-designer/src/designer/route/useRouteDesignerHook.tsx b/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
index 993e45ef..26c88dd6 100644
--- a/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
+++ b/karavan-designer/src/designer/route/useRouteDesignerHook.tsx
@@ -79,66 +79,7 @@ export const useRouteDesignerHook = () => {
// this.routeDesigner.setState({key: Math.random().toString()});
// }
//
- function handleKeyDown (event: KeyboardEvent) {
- if ((event.shiftKey)) {
- setShiftKeyPressed(true);
- }
- if (window.document.hasFocus() && window.document.activeElement) {
- if (['BODY', 'MAIN'].includes(window.document.activeElement.tagName)) {
- let charCode = String.fromCharCode(event.which).toLowerCase();
- if ((event.ctrlKey || event.metaKey) && charCode === 'c') {
- copyToClipboard();
- } else if ((event.ctrlKey || event.metaKey) && charCode === 'v') {
- pasteFromClipboard();
- }
- }
- } else {
- if (event.repeat) {
- window.dispatchEvent(event);
- }
- }
- }
- function handleKeyUp (event: KeyboardEvent) {
- setShiftKeyPressed(false);
- if (event.repeat) {
- window.dispatchEvent(event);
- }
- }
-
- function copyToClipboard (): void {
- console.log("copyToClipboard1", selectedUuids)
- const steps: CamelElement[] = []
- selectedUuids.forEach(selectedUuid => {
- const selectedElement = CamelDefinitionApiExt.findElementInIntegration(integration, selectedUuid);
- if (selectedElement) {
- steps.push(selectedElement);
- }
- })
- if (steps.length > 0) {
- console.log("copyToClipboard2", steps)
- setClipboardSteps(steps);
- }
- }
- function pasteFromClipboard (): void {
- console.log("pasteFromClipboard")
- if (clipboardSteps.length === 1 && clipboardSteps[0]?.dslName === 'FromDefinition') {
- const clone = CamelUtil.cloneStep(clipboardSteps[0], true);
- const route = CamelDefinitionApi.createRouteDefinition({from: clone});
- addStep(route, '', 0)
- } else if (clipboardSteps.length === 1 && clipboardSteps[0]?.dslName === 'RouteDefinition') {
- const clone = CamelUtil.cloneStep(clipboardSteps[0], true);
- addStep(clone, '', 0)
- } else if (selectedUuids.length === 1) {
- const targetMeta = CamelDefinitionApiExt.findElementMetaInIntegration(integration, selectedUuids[0]);
- clipboardSteps.reverse().forEach(clipboardStep => {
- if (clipboardStep && targetMeta.parentUuid) {
- const clone = CamelUtil.cloneStep(clipboardStep, true);
- addStep(clone, targetMeta.parentUuid, targetMeta.position);
- }
- })
- }
- }
//
function onCommand (command: Command, printerRef: React.MutableRefObject<HTMLDivElement | null>) {
switch (command.command){
@@ -215,7 +156,6 @@ export const useRouteDesignerHook = () => {
}
const selectElement = (element: CamelElement) => {
- // console.log("selectElement", element, selectedUuids)
const uuids = [...selectedUuids];
let canNotAdd: boolean = false;
if (shiftKeyPressed) {
@@ -240,6 +180,65 @@ export const useRouteDesignerHook = () => {
setSelectedStep(selectedElement);
setSelectedUuids(shiftKeyPressed ? [...uuids] : [element.uuid])
}
+
+ function handleKeyDown (event: KeyboardEvent) {
+ if ((event.shiftKey)) {
+ setShiftKeyPressed(true);
+ }
+ if (window.document.hasFocus() && window.document.activeElement) {
+ if (['BODY', 'MAIN'].includes(window.document.activeElement.tagName)) {
+ let charCode = String.fromCharCode(event.which).toLowerCase();
+ if ((event.ctrlKey || event.metaKey) && charCode === 'c') {
+ copyToClipboard();
+ } else if ((event.ctrlKey || event.metaKey) && charCode === 'v') {
+ pasteFromClipboard();
+ }
+ }
+ } else {
+ if (event.repeat) {
+ window.dispatchEvent(event);
+ }
+ }
+ }
+
+ function handleKeyUp (event: KeyboardEvent) {
+ setShiftKeyPressed(false);
+ if (event.repeat) {
+ window.dispatchEvent(event);
+ }
+ }
+
+ function copyToClipboard (): void {
+ const steps: CamelElement[] = []
+ selectedUuids.forEach(selectedUuid => {
+ const selectedElement = CamelDefinitionApiExt.findElementInIntegration(integration, selectedUuid);
+ if (selectedElement) {
+ steps.push(selectedElement);
+ }
+ })
+ if (steps.length > 0) {
+ setClipboardSteps(steps);
+ }
+ }
+ function pasteFromClipboard (): void {
+ if (clipboardSteps.length === 1 && clipboardSteps[0]?.dslName === 'FromDefinition') {
+ const clone = CamelUtil.cloneStep(clipboardSteps[0], true);
+ const route = CamelDefinitionApi.createRouteDefinition({from: clone});
+ addStep(route, '', 0)
+ } else if (clipboardSteps.length === 1 && clipboardSteps[0]?.dslName === 'RouteDefinition') {
+ const clone = CamelUtil.cloneStep(clipboardSteps[0], true);
+ addStep(clone, '', 0)
+ } else if (selectedUuids.length === 1) {
+ const targetMeta = CamelDefinitionApiExt.findElementMetaInIntegration(integration, selectedUuids[0]);
+ clipboardSteps.reverse().forEach(clipboardStep => {
+ if (clipboardStep && targetMeta.parentUuid) {
+ const clone = CamelUtil.cloneStep(clipboardStep, true);
+ addStep(clone, targetMeta.parentUuid, targetMeta.position);
+ }
+ })
+ }
+ }
+
//
// function unselectElement = (evt: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
// if ((evt.target as any).dataset.click === 'FLOWS') {
@@ -293,7 +292,7 @@ export const useRouteDesignerHook = () => {
break;
}
}
- //
+
function setDslDefaults(step: CamelElement): CamelElement {
if (step.dslName === 'LogDefinition') {
// eslint-disable-next-line no-template-curly-in-string
@@ -373,5 +372,5 @@ export const useRouteDesignerHook = () => {
}
}
- return { deleteElement, selectElement, moveElement, onShowDeleteConfirmation, onDslSelect, openSelector, createRouteConfiguration, handleKeyDown, handleKeyUp, onCommand}
+ return { deleteElement, selectElement, moveElement, onShowDeleteConfirmation, onDslSelect, openSelector, createRouteConfiguration, onCommand, handleKeyDown, handleKeyUp}
}
\ No newline at end of file