OrgChart sample, modifying TreeLayoutView to use TreeLayout direction of BR

[pfalcon64]

Introduction

I was modifying the OrgChart sample code, and one of the things I wanted to see was if I could draw the tree aligned to the top/bottom as well as the right - so a user could see the parent node without scrolling down a potentially long list of child nodes...

So I made the following change:

        const treeLayout = new layout.TreeLayout({
            graph: this.graph,
            direction: 'BR',
            parentGap: 75,
            siblingGap: 41
        });

According to the API help, this is a legitimate value for defining a TreeLayout. However all of the 2 character options allowed will cause the TreeLayoutView to break with the following error:

Stack trace: Failed to execute 'inverse' on 'SVGMatrix': The matrix is not invertible.

There are several other demos which feature tree layouts that I can play with, but I thought this should be mentioned.

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

If I change the direction to BR in the OrgChart application, it works as expected?
What are the exact steps to reproduce?

[pfalcon64]

I altered the sample (to remove the paperscroller, and use it in Angular) as follows:

    ngOnInit() {
        //JointJS+ Tutorial code 
        const cellNamespace = {
            ...shapes,
            Link,
            Member
        };
    
        this.graph = new dia.Graph({}, { cellNamespace: cellNamespace });

        this.paper = new dia.Paper({
            model: this.graph,
            background: {
                color: '#F8F9FA',
            },
            width: '100%',
            height: '100%',
            gridSize: 10,
            async: true,
            clickThreshold: 10,
            autoSize: true,
            sorting: dia.Paper.sorting.APPROX,
            cellViewNamespace: cellNamespace,
            defaultConnector: {
                name: 'straight',
                args: {
                    cornerType: 'cubic',
                }
            },
            defaultAnchor: {
                name: 'modelCenter'
            },
            defaultLink: () => new Link()
        });

        this.paper.render();
    }

Instead of using ngAfterViewInit(), I called the main code after performing some other database tasks. This all works UNTIL I change the TreeLayout direction to 'BR':

    DrawChart() {

        const members = [
            this.createMember('Founder & Chairman', 'Pierre Omidyar', 'assets/images/1.png'),
            this.createMember('President & CEO', 'Margaret C. Whitman', 'assets/images/2.png'),
            this.createMember('President, PayPal', 'Mia Thompson', 'assets/images/3.png'),
            this.createMember('President, Ebay Global Marketplaces', 'Devin Wenig', 'assets/images/4.png'),
            this.createMember('Senior Vice President Human Resources', 'Olivia S. Skoll', 'assets/images/5.png'),
            this.createMember('Senior Vice President Controller', 'Sophia P. Westly', 'assets/images/6.png')
        ];
    
        const connections = [
            this.createLink(members[0], members[1]),
            this.createLink(members[1], members[2]),
            this.createLink(members[1], members[3]),
            this.createLink(members[1], members[4]),
            this.createLink(members[1], members[5])
        ];
    
        this.graph.addCells([...members, ...connections]);
        this.canvas.nativeElement.appendChild(this.paper.el);
    
        const treeLayout = new layout.TreeLayout({
            graph: this.graph,
            direction: 'R',
            parentGap: 75,
            siblingGap: 41
        });
    
        new ui.TreeLayoutView({
            paper: this.paper,
            model: treeLayout,
            className: 'tree-layout member-tree-layout',
            useModelGeometry: true,
            clone: (element: dia.Element) => {
                const clone = element.clone() as dia.Element;
                clone.attr(['memberAddButtonBody', 'display'], 'none');
                clone.attr(['memberRemoveButtonBody', 'display'], 'none');
                clone.attr(['body', 'stroke'], 'none');
                return clone;
            },
            previewAttrs: {
                parent: {
                    rx: 40,
                    ry: 40
                }
            }
        });
    
        treeLayout.layout();
        this.paper.unfreeze();

        this.paper.on('element:pointermove', (elementView: dia.ElementView) => {
            this.paper.el.classList.add('hide-buttons');
            this.paper.el.classList.remove('show-buttons');
            elementView.model.attr(['body', 'strokeWidth'], 2);
    
        });
    
        this.paper.on('element:pointerup', (elementView: dia.ElementView) => {
            this.paper.el.classList.remove('hide-buttons');
            this.paper.el.classList.add('show-buttons');
            elementView.model.attr(['body', 'strokeWidth'], 1);
        });
    
        this.paper.on('element:member:add', (elementView: dia.ElementView, evt: dia.Event) => {
            evt.stopPropagation();
            // Adding a new member
            const newMember = this.createMember('Employee', 'New Employee', 'assets/images/1.png');
            const newConnection = this.createLink(elementView.model, newMember);
            this.graph.addCells([newMember, newConnection]);
            treeLayout.layout();
        });
    
        this.paper.on('element:remove', (elementView: dia.ElementView, evt: dia.Event) => {
            evt.stopPropagation();
            const preventReconnection = evt.ctrlKey || evt.metaKey;
    
            this.graph.startBatch('remove-member');
            if (preventReconnection) {
                elementView.model.remove();
                treeLayout.layout();
            } else {
                treeLayout.removeElement(elementView.model);
            }
            this.graph.stopBatch('remove-member');
        });
    
        this.paper.on('element:edit', (elementView: dia.ElementView, evt: dia.Event) => {
            evt.stopPropagation();
            // A member edit
            const inspector = new ui.Inspector({
                cellView: elementView,
                live: false,
                className: 'joint-inspector joint-member-inspector',
                inputs: {
                    'attrs/label/text': {
                        type: 'text',
                        label: 'Name',
                        index: 1
                    },
                    'attrs/description/text': {
                        type: 'text',
                        label: 'Rank',
                        index: 2
                    }
                }
            });
    
            const dialog = new ui.Dialog({
                type: 'inspector-dialog',
                width: 350,
                title: 'Edit Member',
                className: 'joint-dialog joint-member-dialog',
                closeButton: false,
                content: inspector.render().el,
                buttons: [{
                    content: 'Cancel',
                    action: 'cancel',
                }, {
                    content: 'Apply',
                    action: 'apply'
                }]
            });
    
            dialog.on({
                'action:cancel': () => {
                    inspector.remove();
                    dialog.close();
                },
                'action:apply': () => {
                    inspector.updateCell();
                    inspector.remove();
                    dialog.close();
                }
            });
            dialog.open();
        });
    
        const _Height = window.innerHeight - 123 - this.getScrollbarWidth();
        const _Width = $('#MainGridParent').width() - this.getScrollbarWidth();
        this.paper.setDimensions(_Width, _Height);

        this.paper.transformToFitContent({
            padding: {
                top: 16,
                bottom: 16,
                left: 16,
                right: 16
            },
            useModelGeometry: true,
            verticalAlign: 'top',
            horizontalAlign: 'left',
            scaleGrid: 1
        });
    
        // Tree Layout Rank Selection
        const currentDirection = treeLayout.get('direction');
        const options = [
            { value: 'L', content: 'Right-Left' },
            { value: 'R', content: 'Left-Right' },
            { value: 'T', content: 'Bottom-Top' },
            { value: 'B', content: 'Top-Bottom' }
        ].map(option => Object.assign({}, option, { selected: option.value === currentDirection }));
    
        const directionPicker = new ui.SelectBox({
            width: 150,
            options
        });
    };
    
    createMember (rank: string, name: string, image: string) {
        return new Member({
            attrs: {
                label: {
                    text: name
                },
                description: {
                    text: rank
                },
                icon: {
                    xlinkHref: image
                }
            }
        });
    }
    
    createLink (source: dia.Element, target: dia.Element) {
        return new Link({
            source: { id: source.id },
            target: { id: target.id },
        });
    }

I believe the error occurs when I call this.paper.transformToFitContent(), which is necessary to manually centre to chart on the paper, otherwise half of it is hidden above the TOP of the screen.

The relevant bits of the html are:

                    <div id="MainGridParent" class="card-body p-0 border-top" >

                        <div id="VisualChart" class="row m-0" style="border-top:1px solid black; position:relative;height:100%;overflow:scroll;">
                            <div id="canvas" class="canvas" #canvas ></div>
                        </div>
                    </div>

[kumilingus]

Could you please share the actual project / or minimal reproducible case with us at support[at]jointjs.com?

[pfalcon64]

Given one of the wildcards is the version of Angular I'm using, that will be tricky.

FYI, the full error trace is:

Stack trace:  Failed to execute 'inverse' on 'SVGMatrix': The matrix is not invertible. get()@webpack:///node_modules/@joint/core/dist/joint.min.js:8:393478
get()@webpack:///node_modules/@joint/core/dist/joint.min.js:8:392784
get()@webpack:///node_modules/@joint/core/dist/joint.min.js:8:397163
get()@webpack:///node_modules/@joint/core/dist/joint.min.js:8:109326
get()@webpack:///node_modules/@joint/core/dist/joint.min.js:8:107409

[pfalcon64]

Attached is a complete Angular project that demonstrates the problem. The code provided works (the default direction: 'R' is specified). If you change the line in test-org-chart.ts (DrawChart() function) to direction: 'BR' it will fail.

Note: this is an Angular 8 project, so it will only run with NodeJS 10.9. You will probably need a virtual machine to run it to reproduce the problem as I see it on my system. This also demonstrates the compile/deploy problems as started in another post (it still fails to --prod compile unless I turn minimise off).

The node_modules folder is pre-populated with the edited copy of joint-plus.d.ts. You will need to use npm install to grab the rest...

org-chart-template reduced.zip

[kumilingus]

The problem is with paper.transformToFitContent() method rather than layout direction.

The scaleGrid option snap the resulting zoom level to the closest grid. In your case, the scale was between 0 and 1 so it round down the scale to 0.
That made every element effectively invisible, impossible to get their correct SVG screen matrix. Hence the error.

If you wanted to use transformToFitContent() because of the alignment and padding without the zooming of the paper, you can use maxScale and minScale instead.

    this.paper.transformToFitContent({
        padding: {
            top: 16,
            bottom: 16,
            left: 16,
            right: 16
        },
        useModelGeometry: true,
        verticalAlign: 'top',
        horizontalAlign: 'left',
        // scaleGrid: 1
        maxScale: 1,
        minScale: 1
    });

[pfalcon64]

Perfect, thanks!

This also solves a similar problem I was having once I started loading the sample with real data