How to use the elkjs/lib/elk.bundled.js function in elkjs

To help you get started, we’ve selected a few elkjs examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github eclipse / winery / org.eclipse.winery.frontends / app / topologymodeler / src / app / layout / layout.directive.ts View on Github external
// also get their current positions and apply them to the internal list
            const left = node.elRef.nativeElement.firstChild.offsetLeft;
            const top = node.elRef.nativeElement.firstChild.offsetTop;
            node.nodeTemplate.x = left;
            node.nodeTemplate.y = top;
        });

        // get source and targets of relationships
        relationshipTemplates.forEach((rel, index) => {
            const sourceElement = rel.sourceElement.ref;
            const targetElement = rel.targetElement.ref;
            edges.push({id: index.toString(), sources: [sourceElement], targets: [targetElement]});
        });

        // initialize elk object which will layout the graph
        const elk = new ELK({});
        const graph = {
            id: 'root',
            properties: {
                'elk.algorithm': 'layered',
                'elk.spacing.nodeNode': '80',
                'elk.direction': 'DOWN',
                'elk.layered.spacing.nodeNodeBetweenLayers': '100'
            },
            children: children,
            edges: edges,
        };
        return new Promise(resolve => {

            const promise = elk.layout(graph);
            promise.then((data) => {
                this.applyPositions(data, nodeChildrenArray).then(() => {
github IBM / kui / plugins / plugin-wskflow / src / lib / graph2doms.ts View on Github external
.attr('transform', 'scale(0.02) rotate(90)')
    .append('svg:path')
    .attr('d', 'M852.8,558.8c0,194.5-158.2,352.8-352.8,352.8c-194.5,0-352.8-158.3-352.8-352.8c0-190.8,152.4-346.7,341.8-352.5v117.4l176.4-156.9L489,10v118C256.3,133.8,68.8,324.8,68.8,558.8C68.8,796.6,262.2,990,500,990c237.8,0,431.2-193.4,431.2-431.2H852.8z')

  if (!$('#qtip')[0]) {
    // add qtip to the document
    $(document.body).append("<div id="qtip"><span id="qtipArrow">◄</span><div id="qtipContent"></div></div>")
  }

  if (activations) {
    $(wskflowContainer).append("<div style="position: absolute; display:none; background-color: rgba(0, 0, 0, 0.8); color: white; font-size: 0.75em; padding: 1ex; width:225px; right: 5px; top: 5px;" id="actList"></div>")
  }

  const root = svg.append('g')
  let elkData
  const elk = new ELK()
  const doneRendering = elk.layout(JSONgraph, {
    layoutOptions: Object.assign({
      'elk.algorithm': 'org.eclipse.elk.layered',
      'org.eclipse.elk.direction': 'DOWN',
      'org.eclipse.elk.edgeRouting': 'ORTHOGONAL',
      'org.eclipse.elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
      'elk.layered.spacing.nodeNodeBetweenLayers': 15, // org.eclipse. prefix doesn't work (elk bug???)
      // 'org.eclipse.elk.layered.cycleBreaking.strategy': "DEPTH_FIRST",
      'org.eclipse.elk.insideSelfLoops.activate': true
    }, layoutOptions)
  })
    .then(data =&gt; {
      elkData = data

      // By default, the graph resizes to fit the size
      // of the container i.e. zoom-to-contain, showing
github eclipse / winery / org.eclipse.winery.topologymodeler.ui / src / app / layout / layout.directive.ts View on Github external
// also get their current positions and apply them to the internal list
            const left = node.elRef.nativeElement.firstChild.offsetLeft;
            const top = node.elRef.nativeElement.firstChild.offsetTop;
            node.nodeTemplate.x = left;
            node.nodeTemplate.y = top;
        });

        // get source and targets of relationships
        relationshipTemplates.forEach((rel, index) => {
            const sourceElement = rel.sourceElement.ref;
            const targetElement = rel.targetElement.ref;
            edges.push({id: index.toString(), sources: [sourceElement], targets: [targetElement]});
        });

        // initialize elk object which will layout the graph
        const elk = new ELK({});
        const graph = {
            id: 'root',
            properties: {
                'elk.algorithm': 'layered',
                'elk.spacing.nodeNode': '200',
                'elk.direction': 'DOWN',
                'elk.layered.spacing.nodeNodeBetweenLayers': '200'
            },
            children: children,
            edges: edges,
        };
        return new Promise(resolve => {

            const promise = elk.layout(graph);
            promise.then((data) => {
                this.applyPositions(data, nodeChildrenArray).then(() => {

elkjs

Automatic graph layout based on Sugiyama's algorithm. Specialized for data flow diagrams and ports.

EPL-2.0
Latest version published 8 months ago

Package Health Score

83 / 100
Full package analysis

Popular elkjs functions