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/21 22:22:30 UTC
[camel-karavan] 03/03: Resize works
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 c60f3ed4b915acccd871eec12a4b8edb9c7a7a7d
Author: Marat Gubaidullin <ma...@Marats-MacBook-Pro.local>
AuthorDate: Mon Aug 21 18:22:07 2023 -0400
Resize works
---
karavan-designer/src/App.tsx | 16 ++++--
.../src/designer/route/DslConnections.tsx | 9 ++-
.../src/designer/route/RouteDesigner.tsx | 64 +++++++++++++++-------
...Observer.tsx => useDrawerMutationsObserver.tsx} | 20 +++----
.../src/designer/route/useResizeObserver.tsx | 14 ++---
5 files changed, 74 insertions(+), 49 deletions(-)
diff --git a/karavan-designer/src/App.tsx b/karavan-designer/src/App.tsx
index 4e751d60..6c31206b 100644
--- a/karavan-designer/src/App.tsx
+++ b/karavan-designer/src/App.tsx
@@ -145,7 +145,7 @@ class App extends React.Component<Props, State> {
new MenuItem("designer", "Designer", <BlueprintIcon/>),
new MenuItem("knowledgebase", "Knowledgebase", <KnowledgebaseIcon/>),
]
- return (<Flex className="nav-buttons" direction={{default: "column"}} //style={{height: "100%"}}
+ return (<Flex className="nav-buttons" direction={{default: "column"}} style={{height: "100%"}}
spaceItems={{default: "spaceItemsNone"}}>
<FlexItem alignSelf={{default: "alignSelfCenter"}}>
<Tooltip className="logo-tooltip" content={"Apache Camel Karavan"}
@@ -202,7 +202,7 @@ class App extends React.Component<Props, State> {
public render() {
const {loaded} = this.state;
return (
- <Page className="karavan" header={this.getHeader()} sidebar={this.pageNav()}>
+ <Page className="karavan">
<AlertGroup isToast isLiveRegion>
{this.state.alerts.map((e: ToastMessage) => (
// @ts-ignore
@@ -213,8 +213,16 @@ class App extends React.Component<Props, State> {
</Alert>
))}
</AlertGroup>
- {loaded !== true && this.getSpinner()}
- {loaded === true && this.getPage()}
+ <Flex direction={{default: "row"}} style={{width: "100%", height: "100%"}}
+ alignItems={{default: "alignItemsStretch"}} spaceItems={{default: 'spaceItemsNone'}}>
+ <FlexItem>
+ {this.pageNav()}
+ </FlexItem>
+ <FlexItem flex={{default: "flex_2"}} style={{height: "100%"}}>
+ {loaded !== true && this.getSpinner()}
+ {loaded === true && this.getPage()}
+ </FlexItem>
+ </Flex>
</Page>
)
}
diff --git a/karavan-designer/src/designer/route/DslConnections.tsx b/karavan-designer/src/designer/route/DslConnections.tsx
index 7a618057..3b508ae3 100644
--- a/karavan-designer/src/designer/route/DslConnections.tsx
+++ b/karavan-designer/src/designer/route/DslConnections.tsx
@@ -443,7 +443,7 @@ export const DslConnections = () => {
const stepsArray = Array.from(steps.values());
return (
<svg
- style={{width: width - 5, height: height - 5, position: "absolute", left: 0, top: 0}}
+ style={{width: width, height: height, position: "absolute", left: 0, top: 0}}
viewBox={"0 0 " + (width - 5) + " " + (height -5)}>
<defs>
<marker id="arrowhead" markerWidth="9" markerHeight="6" refX="0" refY="3" orient="auto" className="arrow">
@@ -461,8 +461,11 @@ export const DslConnections = () => {
console.log("RENDER CONNECTION")
return (
- <div style={{position: "absolute", width: width + 5, height: height + 80, top: 0, left: 0, background: "red"}}>
- {/*{getSvg()}*/}
+ <div
+ id="connections"
+ style={{position: "absolute", width: width, height: height + 80, top: 0, left: 0, background: "red"}}
+ >
+ {getSvg()}
{/*{getIncomings().map(p => getIncomingIcons(p))}*/}
{/*{getOutgoings().map(p => getOutgoingIcons(p))}*/}
</div>
diff --git a/karavan-designer/src/designer/route/RouteDesigner.tsx b/karavan-designer/src/designer/route/RouteDesigner.tsx
index 4f460933..69be9a48 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, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {createRef, useCallback, useEffect, useRef, useState} from 'react';
import {
Drawer,
DrawerPanelContent,
@@ -39,6 +39,8 @@ 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 {DslPosition} from "../utils/EventBus";
+import useMutationsObserver from "./useDrawerMutationsObserver";
interface Props {
// onSave?: (integration: Integration, propertyOnly: boolean) => void
@@ -50,7 +52,6 @@ export const RouteDesigner = (props: Props) => {
const printerRef = React.createRef()
const contentRef: React.RefObject<HTMLDivElement> = useRef(null);
- const flowRef: React.RefObject<HTMLDivElement> = useRef(null);
const {
deleteElement,
@@ -70,6 +71,36 @@ export const RouteDesigner = (props: Props) => {
s.setShowSelector, s.setShowDeleteConfirmation, s.setPropertyOnly, s.setShowSteps, s.setDeleteMessage, s.setParentId, s.setSelectedUuids, s.setClipboardSteps, s.setPosition,
s.width, s.height, s.top, s.left], shallow)
+ // const [refState, setRefState] = useState<Element | null>(null);
+
+ const onResize = useCallback((target: HTMLDivElement) => {
+ if (flowRef && flowRef.current) {
+ const el = flowRef.current.getBoundingClientRect();
+ if (width !== el.width || height !== el.height || top !== el.top || left !== el.left) {
+ setPosition(el.width, el.height, el.top, el.left)
+ console.log("elmRect", el)
+ }
+ }
+ }, []);
+
+ const onMutate = useCallback((target: HTMLDivElement, mutations: any) => {
+ if (flowRef && flowRef.current) {
+ const el = flowRef.current.getBoundingClientRect();
+ if (width !== el.width || height !== el.height || top !== el.top || left !== el.left) {
+ setPosition(el.width, el.height, el.top, el.left)
+ console.log("elmRect", el)
+ }
+ }
+ }, []);
+
+ const firstRef = useResizeObserver(onResize);
+ const secondRef = useMutationsObserver(onMutate);
+ const flowRef = useRef<HTMLDivElement | null>(null);
+ //
+ // useEffect(() => {
+ // if (refState) console.log("useEffect RouteDesigner", refState);
+ // }, [refState]);
+
// function componentDidMount() {
// logic.componentDidMount();
// }
@@ -145,23 +176,13 @@ export const RouteDesigner = (props: Props) => {
)
}
- // function onResizePage(el: HTMLDivElement | null) {
- // console.log("onResizePage", el)
- // const rect = el?.getBoundingClientRect();
- // if (el && rect && (el.scrollWidth !== width || el.scrollHeight !== height || rect.top !== top || rect.left !== left)) {
- // setPosition(el.scrollWidth, el.scrollHeight, rect.top, rect.left)
- // }
- // }
-
- const onResize = useCallback((target: HTMLDivElement) => {
- const el = target.getBoundingClientRect();
- if (width !== el.width || height !== el.height || top !== el.top || left !== el.left) {
- setPosition(el.width, el.height, el.top, el.left)
- console.log("elmRect", el)
+ function onRef(el: HTMLDivElement | null) {
+ // console.log("onRef", el)
+ const rect = el?.getBoundingClientRect();
+ if (el && rect && (rect.width !== width || rect.height !== height || rect.top !== top || rect.left !== left)) {
+ setPosition(rect.width, rect.height, rect.top, rect.left)
}
- }, []);
-
- const ref = useResizeObserver(onResize);
+ }
console.log("RENDER ROUTE_DESIGNER")
@@ -174,7 +195,8 @@ export const RouteDesigner = (props: Props) => {
<div id="flows" className="flows" data-click="FLOWS" onClick={event => {
// logic.unselectElement(event)
}}
- ref={ref}
+
+ ref={flowRef}
>
{routeConfigurations?.map((routeConfiguration, index: number) => (
<DslElement key={routeConfiguration.uuid}
@@ -214,8 +236,8 @@ export const RouteDesigner = (props: Props) => {
const hasFlows = integration?.spec?.flows?.length && integration?.spec?.flows?.length > 0;
return (
- <div className="dsl-page">
- <div className="dsl-page-columns">
+ <div className="dsl-page" ref={firstRef}>
+ <div className="dsl-page-columns" ref={secondRef}>
<Drawer isExpanded isInline>
<DrawerContent panelContent={getPropertiesPanel()}>
<DrawerContentBody>{hasFlows && getGraph()}</DrawerContentBody>
diff --git a/karavan-designer/src/designer/route/useResizeObserver.tsx b/karavan-designer/src/designer/route/useDrawerMutationsObserver.tsx
similarity index 69%
copy from karavan-designer/src/designer/route/useResizeObserver.tsx
copy to karavan-designer/src/designer/route/useDrawerMutationsObserver.tsx
index 93141b20..f24a9e58 100644
--- a/karavan-designer/src/designer/route/useResizeObserver.tsx
+++ b/karavan-designer/src/designer/route/useDrawerMutationsObserver.tsx
@@ -17,29 +17,25 @@
import { useLayoutEffect, useRef } from 'react';
-function useResizeObserver<T extends HTMLElement>(
- callback: (target: T, entry: ResizeObserverEntry) => void
-) {
+function useMutationsObserver<T extends HTMLElement>(callback: (target: T, mutations: any) => void) {
const ref = useRef<T>(null)
useLayoutEffect(() => {
- const element = ref?.current;
+ const element = ref?.current;
if (!element) {
return;
}
-
- const observer = new ResizeObserver((entries) => {
- callback(element, entries[0]);
- });
-
- observer.observe(element);
+ const drawer = element.childNodes[0].childNodes[0].childNodes[1];
+ const observer2 = new MutationObserver(mutations => callback(element, mutations));
+ observer2.observe(drawer, {attributes: true, attributeOldValue: true, attributeFilter: ['style']});
return () => {
- observer.disconnect();
+ // observer1.disconnect();
+ observer2.disconnect();
};
}, [callback, ref]);
return ref
}
-export default useResizeObserver;
\ No newline at end of file
+export default useMutationsObserver;
\ No newline at end of file
diff --git a/karavan-designer/src/designer/route/useResizeObserver.tsx b/karavan-designer/src/designer/route/useResizeObserver.tsx
index 93141b20..27915bea 100644
--- a/karavan-designer/src/designer/route/useResizeObserver.tsx
+++ b/karavan-designer/src/designer/route/useResizeObserver.tsx
@@ -17,25 +17,21 @@
import { useLayoutEffect, useRef } from 'react';
-function useResizeObserver<T extends HTMLElement>(
- callback: (target: T, entry: ResizeObserverEntry) => void
-) {
+function useResizeObserver<T extends HTMLElement>(callback: (target: T, entry: ResizeObserverEntry) => void) {
const ref = useRef<T>(null)
useLayoutEffect(() => {
- const element = ref?.current;
+ const element = ref?.current;
if (!element) {
return;
}
-
- const observer = new ResizeObserver((entries) => {
+ const observer1 = new ResizeObserver((entries) => {
callback(element, entries[0]);
});
-
- observer.observe(element);
+ observer1.observe(element);
return () => {
- observer.disconnect();
+ observer1.disconnect();
};
}, [callback, ref]);