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