Merge pull request #167 from zinchenkoivan/initial-zoom-offcenter

fix issue initial zoom off center

src/CameraControls/useCenterGraph.ts

@@ -46,9 +46,10 @@ export const useCenterGraph = ({
   const centerNodes = useCallback(
     (centerNodes: InternalGraphNode[], padding = PADDING, fill = false) => {
       // Centers the graph based on the central most node
-      const { minX, maxX, minY, maxY, minZ, maxZ } =
+      const { minX, maxX, minY, maxY, minZ, maxZ, x, y, z } =
         getLayoutCenter(centerNodes);
 
+      controls.setTarget(x, y, z);
       controls?.fitToBox(
         new Box3(new Vector3(minX, minY, minZ), new Vector3(maxX, maxY, maxZ)),
         animated,

src/symbols/Arrow.tsx

@@ -71,7 +71,7 @@ export const Arrow: FC<ArrowProps> = ({
   const [{ pos, arrowOpacity }] = useSpring(
     () => ({
       from: {
-        pos: [0, 0, 0],
+        pos: [position.x, position.y, position.z],
         arrowOpacity: 0
       },
       to: {

src/symbols/Line.tsx

@@ -99,8 +99,8 @@ export const Line: FC<LineProps> = ({
     const to = curve.getPoint(1);
     return {
       from: {
-        fromVertices: [0, 0, 0],
-        toVertices: [0, 0, 0]
+        fromVertices: [to?.x, to?.y, to?.z || 0],
+        toVertices: [from?.x, from?.y, from?.z || 0]
       },
       to: {
         fromVertices: [from?.x, from?.y, from?.z || 0],

src/symbols/Node.tsx

@@ -169,7 +169,9 @@ export const Node: FC<NodeProps> = ({
   const [{ nodePosition, labelPosition, subLabelPosition }] = useSpring(
     () => ({
       from: {
-        nodePosition: [0, 0, 0],
+        nodePosition: position
+          ? [position.x, position.y, position.z]
+          : [0, 0, 0],
         labelPosition: [0, -(nodeSize + 7), 2],
         subLabelPosition: [0, -(nodeSize + 14), 2]
       },