Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problems on version 0.0.14 #209

Open
TheOnlyArtz opened this issue Oct 5, 2020 · 4 comments
Open

Problems on version 0.0.14 #209

TheOnlyArtz opened this issue Oct 5, 2020 · 4 comments

Comments

@TheOnlyArtz
Copy link

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
Copy link

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
Copy link

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
Copy link

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

Screen Shot 2020-11-10 at 1 49 39 PM

Changes to

Screen Shot 2020-11-10 at 1 49 55 PM

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

@emergentbit
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants