diff --git a/libs/shared/lib/schema/model/reactflow.tsx b/libs/shared/lib/schema/model/reactflow.tsx
index 68edbb0603672ea36ab64bde2d00579a87c12fe6..60567d10ab47a6ff53e88c0a83b58e09df4ac2c0 100644
--- a/libs/shared/lib/schema/model/reactflow.tsx
+++ b/libs/shared/lib/schema/model/reactflow.tsx
@@ -37,7 +37,6 @@ export type SchemaReactflowEntity = SchemaReactflowData & {
x: number;
y: number;
reactFlowRef: any;
- viewport: { zoom: number; x: number; y: number };
tooltipClose: boolean;
};
@@ -50,7 +49,6 @@ export type SchemaReactflowRelation = SchemaReactflowData & {
x: number;
y: number;
reactFlowRef: any;
- viewport: { zoom: number; x: number; y: number };
tooltipClose: boolean;
};
diff --git a/libs/shared/lib/schema/panel/Schema.tsx b/libs/shared/lib/schema/panel/Schema.tsx
index 7783d12bf8441628b28d2055b7130d8321a126fa..07049c2bc8c9e2869ce74d073fb7523e203f060d 100644
--- a/libs/shared/lib/schema/panel/Schema.tsx
+++ b/libs/shared/lib/schema/panel/Schema.tsx
@@ -106,14 +106,14 @@ export const Schema = (props: Props) => {
nodesWithRef = schemaFlow.nodes.map((node) => {
return {
...node,
- data: { ...node.data, reactFlowRef, tooltipClose: false, nodeCount: 'NoDefined', viewport: { x: 0, y: 0, zoom: 0 } },
+ data: { ...node.data, reactFlowRef, tooltipClose: false, nodeCount: 'NoDefined' },
};
});
edgesWithRef = schemaFlow.edges.map((edge) => {
return {
...edge,
- data: { ...edge.data, reactFlowRef, tooltipClose: false, nodeCount: 'NoDefined', viewport: { x: 0, y: 0, zoom: 0 } },
+ data: { ...edge.data, reactFlowRef, tooltipClose: false, nodeCount: 'NoDefined' },
};
});
@@ -122,20 +122,19 @@ export const Schema = (props: Props) => {
nodesWithRef = nodes.map((node) => {
return {
...node,
- data: { ...node.data, viewport: { x: 0, y: 0, zoom: 0 } },
+ data: { ...node.data },
};
});
edgesWithRef = edges.map((edge) => {
return {
...edge,
- data: { ...edge.data, viewport: { x: 0, y: 0, zoom: 0 } },
+ data: { ...edge.data },
};
});
}
setNodes(nodesWithRef);
- //setEdges(schemaFlow.edges);
setEdges(edgesWithRef);
setTimeout(() => fitView(), 100);
}
@@ -204,44 +203,6 @@ export const Schema = (props: Props) => {
}
}, [graphStats]);
- const handleMove = (params: any, viewport: any) => {
- if (initialViewportRef.current === null) {
- initialViewportRef.current = viewport;
- } else {
- }
-
- const viewPortDiff = {
- x: viewport.x - (initialViewportRef.current as any).x,
- y: viewport.y - (initialViewportRef.current as any).y,
- };
-
- setNodes((nds) =>
- nds.map((node) => ({
- ...node,
- data: {
- ...node.data,
- viewport: {
- x: viewPortDiff.x,
- y: viewPortDiff.y,
- },
- },
- })),
- );
-
- setEdges((edg) =>
- edg.map((edge) => ({
- ...edge,
- data: {
- ...edge.data,
- viewport: {
- x: viewPortDiff.x,
- y: viewPortDiff.y,
- },
- },
- })),
- );
- };
-
const handleOnClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
const holdDownTime = event.timeStamp - (mouseDownTimestampRef.current || 0);
if (holdDownTime < mouseClickThreshold && isPillClicked.current === false) {
@@ -402,7 +363,6 @@ export const Schema = (props: Props) => {
reactFlowInstanceRef.current = reactFlowInstance;
onInit(reactFlowInstance);
}}
- onMove={handleMove}
onClick={handleOnClick}
proOptions={{ hideAttribution: true }}
>
diff --git a/libs/shared/lib/schema/pills/nodes/entity/SchemaEntityPill.tsx b/libs/shared/lib/schema/pills/nodes/entity/SchemaEntityPill.tsx
index a7d55f138e56139b17be3822f9530c42018bc3c3..5afbabc12ec1e76f7124b67726536d051ae3eb8a 100644
--- a/libs/shared/lib/schema/pills/nodes/entity/SchemaEntityPill.tsx
+++ b/libs/shared/lib/schema/pills/nodes/entity/SchemaEntityPill.tsx
@@ -1,16 +1,18 @@
import React, { useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
-import { Handle, Position, NodeProps } from 'reactflow';
+import { Handle, Position, NodeProps, useViewport } from 'reactflow';
import { SchemaReactflowNodeWithFunctions } from '../../../model/reactflow';
import { QueryElementTypes } from '@graphpolaris/shared/lib/querybuilder';
import { SchemaNode } from '../../../model';
import { EntityPill } from '@graphpolaris/shared/lib/components';
import { Tooltip, TooltipContent, TooltipTrigger } from '@graphpolaris/shared/lib/components/tooltip';
import { VisualizationTooltip } from '@graphpolaris/shared/lib/components/VisualizationTooltip';
-import { SchemaPopUp, SchemaPopUpProps } from '../SchemaPopUp/SchemaPopUp';
+import { SchemaPopUp } from '../SchemaPopUp/SchemaPopUp';
export const SchemaEntityPill = React.memo(({ id, selected, data }: NodeProps<SchemaReactflowNodeWithFunctions>) => {
const [openPopupLocation, setOpenPopupLocation] = useState<{ x: number; y: number } | null>(null);
+ const viewport = useViewport();
+
const ref = useRef<HTMLDivElement>(null);
/**
* adds drag functionality in order to be able to drag the entityNode to the schema
@@ -50,8 +52,8 @@ export const SchemaEntityPill = React.memo(({ id, selected, data }: NodeProps<Sc
const rect = div.getBoundingClientRect();
setOpenPopupLocation({
- x: data.viewport.x - rect.width / 2,
- y: data.viewport.y - rect.height / 2,
+ x: viewport.x - rect.width / 2,
+ y: viewport.y - rect.height / 2,
});
}}
draggable
@@ -59,7 +61,7 @@ export const SchemaEntityPill = React.memo(({ id, selected, data }: NodeProps<Sc
>
{openPopupLocation !== null && (
<Tooltip key={data.name} open={true} boundaryElement={data.reactFlowRef} showArrow={true}>
- <TooltipTrigger x={data.viewport.x - openPopupLocation.x} y={data.viewport.y - openPopupLocation.y} />
+ <TooltipTrigger x={viewport.x - openPopupLocation.x} y={viewport.y - openPopupLocation.y} />
<TooltipContent side="right">
<div>
<VisualizationTooltip name={data.name} colorHeader={'hsl(var(--clr-node))'}>
diff --git a/libs/shared/lib/schema/pills/nodes/relation/SchemaRelationPill.tsx b/libs/shared/lib/schema/pills/nodes/relation/SchemaRelationPill.tsx
index 3d3d3216ad82fe1a2ae1963ff2e07aa0ee780acb..d04fba6fcb28a6f202152e77c579549e4ea7e2c1 100644
--- a/libs/shared/lib/schema/pills/nodes/relation/SchemaRelationPill.tsx
+++ b/libs/shared/lib/schema/pills/nodes/relation/SchemaRelationPill.tsx
@@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect } from 'react';
-import { Handle, Position, NodeProps } from 'reactflow';
+import { Handle, Position, NodeProps, useViewport } from 'reactflow';
import { SchemaReactflowRelationWithFunctions } from '../../../model/reactflow';
import { QueryElementTypes } from '@graphpolaris/shared/lib/querybuilder';
import { SchemaEdge } from '../../../model';
@@ -13,6 +13,8 @@ export const SchemaRelationPill = React.memo(({ id, selected, data, ...props }:
const [openPopupLocation, setOpenPopupLocation] = useState<{ x: number; y: number } | null>(null);
const ref = useRef<HTMLDivElement>(null);
+ const viewport = useViewport();
+
/**
* Adds drag functionality in order to be able to drag the relationNode to the schema.
* @param event React Mouse drag event.
@@ -57,15 +59,15 @@ export const SchemaRelationPill = React.memo(({ id, selected, data, ...props }:
const rect = div.getBoundingClientRect();
setOpenPopupLocation({
- x: data.viewport.x - rect.width / 2,
- y: data.viewport.y - rect.height / 2,
+ x: viewport.x - rect.width / 2,
+ y: viewport.y - rect.height / 2,
});
}}
draggable
>
{openPopupLocation !== null && (
<Tooltip key={data.name} open={true} boundaryElement={ref} showArrow={true}>
- <TooltipTrigger x={data.viewport.x - openPopupLocation.x} y={data.viewport.y - openPopupLocation.y} />
+ <TooltipTrigger x={viewport.x - openPopupLocation.x} y={viewport.y - openPopupLocation.y} />
<TooltipContent side="top">
<div>
<VisualizationTooltip name={data.collection} colorHeader={'hsl(var(--clr-relation))'}>