Problems on version 0.0.14

[TheOnlyArtz]

Hi, we've been using your package and we've ran into several issues with the latest (0.0.14) when migrating from 0.0.8. Firstly, dragging a node from a sidebar into the canvas places it automatically at (0, 0) [It doesn't matter where you're dropping it at]. Secondly, trying to create a link between two nodes won't show the linking animation (unless you zoom either in or out).

Here's the code which demonstrates the second issue:

import React from "react";
import { FlowChartWithState } from "@mrblenny/react-flow-chart";

function App() {
  const init = {
    offset: {
      x: 0,
      y: 0,
    },
    // scale: 1,
    nodes: {
      node1: {
        id: "node1",
        type: "output-only",
        position: {
          x: 300,
          y: 100,
        },
        ports: {
          port1: {
            id: "port1",
            type: "output",
            properties: {
              value: "yes",
            },
          },
          port2: {
            id: "port2",
            type: "output",
            properties: {
              value: "no",
            },
          },
        },
      },
      node2: {
        id: "node2",
        type: "input-output",
        position: {
          x: 300,
          y: 300,
        },
        ports: {
          port1: {
            id: "port1",
            type: "input",
          },
          port2: {
            id: "port2",
            type: "output",
          },
        },
      },
    },
    links: {
      link1: {
        id: "link1",
        from: {
          nodeId: "node1",
          portId: "port2",
        },
        to: {
          nodeId: "node2",
          portId: "port1",
        },
      },
    },
    selected: {},
    hovered: {},
  };

  return (
    <React.Fragment>
      <FlowChartWithState initialValue={init} />
    </React.Fragment>
  );
}

export default App;

[thomhubers]

I had the same, but when I put in scale: 1 it worked.

You have scale commented out, if you uncomment it, it should work for you too.

This could be clearer in documentation.

[emergentbit]

Hi there, I'm seeing behavior with scale that seems like a bug. Adding 'scale: 1' to the data results in a blank canvas. No nodes render. Removing the scale from the data leads to correct rendering.

Additionally any zooming in or out results in all nodes disappearing from the canvas. Is there something I should look for in the config? Is this known behavior?

[emergentbit]

More specifically, upon zooming in or out it appears that the nodes are no longer rendered:

Changes to

I have been digging around the code looking for what might be causing this - any pointers would be awesome.

[emergentbit]

Never mind - it turns out that I was not implementing the callbacks on the custom CanvasOuter component which was causing the issue. Found in the console log

 Unknown event handler property `onZoomCanvas`. It will be ignored

This was the hint that the outer canvas component was the issue.