demo-drag-and-drop: compatibility with react-split-pane

[johnsmithlon]

Hi,

I have tried to adapt the demo-drag-drop into a standalone project, and then put a split plane between the side pane and the canvas. For some reason, the split pane makes the canvas disappear (or go white).

I have simply inserted a SplitPane tags around the S.Content section of BodyWidget.tsx, i.e.

            <S.Content>
                <SplitPane
                    split="vertical"
                    minSize={200}
                    defaultSize={200}
                    resizerStyle={styles}
                >
                    <TrayWidget>
                        <TrayItemWidget model={{ type: 'in' }} name="In Node" color="rgb(192,255,0)" />
                        <TrayItemWidget model={{ type: 'out' }} name="Out Node" color="rgb(0,192,255)" />
                        <TrayItemWidget model={{ type: 'in out' }} name="In And Out Node" color="rgb(0,192,255)" />                     
                    </TrayWidget>           
                    <S.Layer
                        onDrop={(event) => {
                            var data = JSON.parse(event.dataTransfer.getData('storm-diagram-node'));
                            var nodesCount = _.keys(this.props.app.getDiagramEngine().getModel().getNodes()).length;

                            var node: DefaultNodeModel = null;
                            if (data.type === 'in') {
                                node = new DefaultNodeModel('Node ' + (nodesCount + 1), 'rgb(192,255,0)');
                                node.addInPort('In');
                            }
                            else if(data.type === 'in out')
                            {
                                node = new DefaultNodeModel('Node ' + (nodesCount + 1), 'rgb(192,255,0)');
                                node.addInPort('In');
                                node.addOutPort('Out');
                            }
                            else {
                                node = new DefaultNodeModel('Node ' + (nodesCount + 1), 'rgb(0,192,255)');
                                node.addOutPort('Out');
                            }
                            var point = this.props.app.getDiagramEngine().getRelativeMousePoint(event);
                            node.setPosition(point);
                            this.props.app.getDiagramEngine().getModel().addNode(node);
                            this.forceUpdate();
                        }}
                        onDragOver={(event) => {
                            event.preventDefault();
                        }}>                 
                        <DemoCanvasWidget>                          
                            <CanvasWidget engine={this.props.app.getDiagramEngine()} />                         
                        </DemoCanvasWidget>                 
                    </S.Layer>
                </SplitPane>
            </S.Content>

Any ideas?

The code is on the following repo:

https://github.com/johnsmithlon/projectstorm-dragdrop

Many thanks

[berabulut]

Try giving height to canvas. As i can see there is a height value at DemoCanvasWidget's Container div but it doesn't apply for some reason.

[johnsmithlon]

Thank you very much for the help, this solves it. Appreciated greatly.