Odd rendering issue (possibly due to css settings?)

[JSv4]

Hey, love this project and the components you guys built. I've been looking at a loooot of flowchart-type libraries, and this is definitely the most promising one I've come accross. I am running into a weird issue with a very basic application of the <FlowChart> component. While components are being dragged, the edges connecting the nodes "jump" around (see screen capture below). I also noticed that if I drag the node offscreen, it has a tendency to jump a great distance and then it's hard to drag it back onscreen as it jumps around by large amounts when I move it. I suspect this may be due to interference between my css styling for the larger project (which uses flexbox) and styling needed for the FlowChart components, but I must confess I'm not that great with css styling, and I am unable to figure this one out. Since this may be a bug of some sort, I wanted to report it and see what you guys thought. If this is on me, my apologies for the erroneous bug report, but I'd definitely appreciate a hand.

Here's the behavior I'm seeing:

Here's my react code for my main component that is being rendered by ReactDOM.render() (it's a very simple project that I'm using to try to get the rendering and formatting right before wiring up the data):

import * as React from 'react';
import { cloneDeep, mapValues } from 'lodash';
import { FlowChart, actions } from '@mrblenny/react-flow-chart';

import DetailPanel from './DetailPanel/DetailPanel';
import AddNewButton from './AddNew/AddNewButton';
import ReactFlowchartWrapper from './Wrappers/ReactFlowchartWrapper';

const scripts = [
    {
        id: 1,
        human_name: 'Test Script 1',
        type: 'RUN_ON_JOB',
        supported_file_types: '',
        description:
            'This is a script that does nothing. Absolutely nothing.',
    },
    {
        id: 2,
        human_name: 'Test Script 2',
        type: 'RUN_ON_JOB_DOCS_PARALLEL',
        supported_file_types: '[".pdf",".doc",".docx"]',
        description:
            "This does even more nothing than script #1 and does it well.",
    },
    {
        id: 3,
        human_name: 'Test Script 3',
        type: 'RUN_ON_JOB_DOCS_PARALLEL',
        supported_file_types: '[".pdf",".doc",".docx"]',
        description:
            "So much nothing. You can't handle this much nothing.",
    },
];

const chart = {
    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: {},
};

class Graph extends React.Component {
    constructor(props) {
        super(props);
        this.state = cloneDeep(chart);
    }

    render() {
        const stateActions = mapValues(actions, (func) => (...args) =>
            this.setState(func(...args))
        );

        const chart = this.state;

        return (
            <div className='wrapper'>
                <div className='graph-header'>
                    <button>Add Node</button>
                    <button>Delete Node</button>
                    <input className='total-nodes' type='number' />
                </div>
                <div className='graph-window'>
                    <DetailPanel selectedNode={1} />
                    <AddNewButton scripts={scripts} />
                    <ReactFlowchartWrapper>
                        <FlowChart
                            chart={this.state}
                            callbacks={stateActions}
                        />
                    </ReactFlowchartWrapper>
                </div>
            </div>
        );
    }
}
export default Graph;

The ReactFlowchartWrapper component is identical to the <Page> component used in the demo stories:

import * as React from 'react';
import styled, { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0px;
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    font-family: sans-serif;
  }
  *, :after, :before {
    box-sizing: inherit;
  }
`;

const PageContent = styled.div`
    display: flex;
    flex-direction: row;
    flex: 0;
    max-width: 100vw;
    max-height: 100vh;
`;

export const ReactFlowchartWrapper = ({ children }) => (
    <PageContent>
        {children}
        <GlobalStyle />
    </PageContent>
);
export default ReactFlowchartWrapper;

And here's my stylesheet:

html,
body {
    font-family: sans-serif;
    font-size: 12px;
    margin: 0px;
    margin: 0px;
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    font-family: sans-serif;
}

.wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
}

.graph-window {
    position: relative;
    height: 100%;
    top: 0;
    left: 0;
    flex: 1;
}

.graph-header {
    border-bottom: 1px solid black;
    position: relative;
    width: 100%;
    height: 50px;
    background-color: #fff;
    padding: 10px;
    flex: 1;
}

.canvas {
    height: 100vh;
}

Your assistance would be appreciated!

[JSv4]

Have an update here. I was wrapping my app in <React.StrictMode>. Once I removed that, the react flowchart components work as expected... Is this expected behavior?

[tahmid-shahriar-lincx]

@JSv4 I have the same problem which I solved by removing <React.StrictNode> too.

[rashidul-hasan]

Just here to say that I had this issue too & solved by removing <React.StrictNode> as suggested above. Any one found a way to fix this WITHOUT removing the strict mode?

[JSv4]

@rashidul-hasan, I have not. I've been slammed trying to finish another project but may try to figure this out if I have the time after my next project release is ready.

For the record, anyone who is still struggling with this library, highly suggest React-Flow, which is actively maintained. It has a nice, simple API and lets you use predefined nodes or create you own custom nodetypes.