TreeLayoutView only one element

[VictorPulzz]

Introduction

I create an organization chart and I add elements to the graph one by one, the problem is that if the graph is empty, then I don't have an element appear because of TreeLayoutView. How do I add the first element? Here is my code

Steps to reproduce

function add() {
    const { paper, graph, scroller, treeLayout } = orgChartService;
    const centerPaper = scroller.getCenter();
    const position = new PositionShapes.Position({
      position: {
        x: centerPaper.x - SHAPE_BOX_SIZES[ShapeNamesEnum.POSITION].width,
        y: centerPaper.y - SHAPE_BOX_SIZES[ShapeNamesEnum.POSITION].height,
      },
    });


    graph.addCell(position);
 }   

builder() {
const treeLayout = new layout.TreeLayout({
    graph,
    direction: 'B',
    siblingGap: 20,
    parentGap: 70,
    symmetrical: true,
  });

  class MyTreeLayoutView extends ui.TreeLayoutView {
    override dragend(elements: dia.Element[], x: number, y: number) {
      super.dragend(elements, x, y);
      this.trigger('cells:dragend', elements, x, y);
    }
  }

  const treeLayoutView = new MyTreeLayoutView({
    paper,
    model: treeLayout,
    className: 'tree-layout orgchart-tree-layout-view',
    useModelGeometry: true,
    previewAttrs: {
      parent: {
        rx: SHAPE_ROUNDED,
        ry: SHAPE_ROUNDED,
        stroke: PARENT_ACTIVE,
        strokeWidth: 1,
      },
    },
    validatePosition: () => false,
  });
}

Restrictions & Constraints

No response

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

JointJS+

[kumilingus]

You can not use validatePosition: () => false if you don't want the element to be dropped as new roots.

1. you can change the logic to check if the graph already contains a root (graph.getSources().length === 0)
2. you can have one element always present, and make sure the user will not be able to remove it.

[VictorPulzz]

Thanks for the quick reply but the problem was in scroller I don't really understand why it happens but when I use scroll.centerContent({ useModelGeometry: true, }) my scroll lags and part of the block is cut off as I wrote in this discussion: #2985

[VictorPulzz]

I don't know what this is related to, but sometimes this scroller lags when you load data...

[kumilingus]

You will have to provide us with an example and exact steps to reproduce. You can send the code to support[at]jointjs.com.