Autoposition on create

[Explosion-Scratch]

If {x: Int, y: Int} is unspecified auto position nodes.

[anulepau]

hi, love this suggestion! we'll be fixing up default node and edge settings in the near future, with this in mind. stay tuned and i'll let you know again when an update is released for this - and in the meantime if you feel called to contribute, feel free!

[Explosion-Scratch]

hi, love this suggestion! we'll be fixing up default node and edge settings in the near future, with this in mind. stay tuned and i'll let you know again when an update is released for this - and in the meantime if you feel called to contribute, feel free!

I really would but I don't have a lot of time on my hands right now, maybe in a month ping me and I can see what I can do!

[makkus]

FYI: I've had good success with using this as a layout engine: https://github.com/kieler/elkjs -- it's fairly trivial to integrate manually, so personally I didn't really miss having sveltet doing this for me. Plus, you get a ton of control which/how to layout.

[ronvoluted]

At the moment I'm just doing this to set defaults:

const defaults = {
  data: { label: 'Text' },
  position: { x: 0, y: 0 },
  width: 100,
  height: 100,
  bgColor: 'hsl(0 0% 100%)',
  borderColor: 'transparent',
  borderRadius: 100,
  sourcePosition: 'left',
  targetPosition: 'right',
} as const;

const nodes: Node[] = [
  {
    ...defaults,
    id: 1,
  },
  {
    ...defaults,
    id: 2,
    data: { label: 'Square to the right' },
    position: { x: 500, y: 0 },
    borderRadius: 0,
  },
];

You could also parse the edges to determine what 'layers' (rows or columns) you have to set the X and Y at intervals.

[jhuitema]

FYI: I've had good success with using this as a layout engine: https://github.com/kieler/elkjs -- it's fairly trivial to integrate manually, so personally I didn't really miss having sveltet doing this for me. Plus, you get a ton of control which/how to layout.

@makkus would you be able to provide a simple example of integrating svelvet and elkjs for a JaavScript noob like me, please? 😄

[makkus]

@jhuitema I only used it for a proof-of-concept so far and I haven't gotten back to it to clean it up, but here's what I did then: example.

I did a few more experiments, but can't find the code anymore. Basically, it's just a matter of massaging your data into something elk understands, then choose the layout algorithm and set some options if necessary.

[taylien96]

This issue is fixed as of the new update! check the docs

[Explosion-Scratch]

Hi there @taylien96, I can't seem to find autopositioning anywhere in the docs, and I scrolled quite a way back through the commit history and can't find anything similar, would you mind linking me to the docs/demo/commit for this feature?

Thanks!

[eliasdefaria]

Hey there @taylien96, not sure I see how this is possible in the docs. Had the same experience as you @Explosion-Scratch It seems as though the position: { x, y } property is still required in the node definition type, and I don't see a way to auto position the nodes upon initial creation. Am I missing something? Thanks!