### Common Layout Options Example Source: https://github.com/kieler/elkjs/blob/master/_autodocs/types.md Provides an example of how to define a 'LayoutOptions' object with common configuration settings for graph layout. ```typescript const options: LayoutOptions = { 'elk.algorithm': 'layered', 'elk.direction': 'DOWN', 'elk.spacing.nodeNode': '15', 'elk.padding': '[left=10, top=10, right=10, bottom=10]' } ``` -------------------------------- ### Example ElkLayoutAlgorithmDescription Object Source: https://github.com/kieler/elkjs/blob/master/_autodocs/types.md An example of an object conforming to the ElkLayoutAlgorithmDescription interface, showing typical values for algorithm properties. ```typescript { id: 'org.eclipse.elk.layered', name: 'Layered', description: 'A layer-based layout algorithm particularly suited for node-link diagrams...', category: 'layered', knownOptions: ['org.eclipse.elk.direction', 'org.eclipse.elk.spacing.nodeNode', ...], supportedFeatures: ['selfLoops', 'edgeLabels', ...] } ``` -------------------------------- ### Example ElkLayoutOptionDescription Object Source: https://github.com/kieler/elkjs/blob/master/_autodocs/types.md An example of an object conforming to the ElkLayoutOptionDescription interface, illustrating common layout option properties. ```typescript { id: 'org.eclipse.elk.direction', name: 'Direction', description: 'Specifies the direction of the layout...', group: 'general', type: 'enum', targets: ['graph', 'node'] } ``` -------------------------------- ### Example ElkLayoutCategoryDescription Object Source: https://github.com/kieler/elkjs/blob/master/_autodocs/types.md An example of an object conforming to the ElkLayoutCategoryDescription interface, showing properties for a layout category. ```typescript { id: 'org.eclipse.elk.layered', name: 'Layered Layout', description: 'Algorithms that arrange nodes in layers...', knownLayouters: ['org.eclipse.elk.layered', ...] } ``` -------------------------------- ### ElkLayoutArguments Example Source: https://github.com/kieler/elkjs/blob/master/_autodocs/types.md Demonstrates how to create an 'ElkLayoutArguments' object to customize layout behavior, including enabling logging and execution time measurement. ```typescript const args: ElkLayoutArguments = { layoutOptions: { 'elk.algorithm': 'layered' }, logging: true, measureExecutionTime: true } elk.layout(graph, args) ``` -------------------------------- ### Initialize ELKjs in Browser Source: https://github.com/kieler/elkjs/blob/master/README.md Provides examples for integrating ELKjs into a browser environment using script tags, supporting both standard and Web Worker-based layouts. ```html ``` -------------------------------- ### ELK Constructor with Combined Configuration Source: https://github.com/kieler/elkjs/blob/master/_autodocs/configuration.md Demonstrates a comprehensive ELK constructor configuration, including default layout options, specific algorithms, and a Web Worker URL. This setup allows for fine-grained control over library behavior and performance. ```javascript const elk = new ELK({ defaultLayoutOptions: { 'elk.algorithm': 'layered', 'elk.direction': 'DOWN' }, algorithms: ['layered', 'stress'], workerUrl: './lib/elk-worker.js' }) ``` -------------------------------- ### Layout with Logging and Timing Source: https://github.com/kieler/elkjs/blob/master/README.md An example of calling the layout method with logging and execution time measurement enabled. The output demonstrates the structure of the returned graph, including logging details and execution times. ```javascript elk.layout(simpleGraph, { layoutOptions: { 'algorithm': 'layered' }, logging: true, measureExecutionTime: true }) ``` -------------------------------- ### Example Node with Label Source: https://github.com/kieler/elkjs/blob/master/_autodocs/types.md Demonstrates how to define a node with an associated text label using the ElkLabel interface. ```typescript const node: ElkNode = { id: 'n1', width: 100, height: 50, labels: [ { text: 'Node 1', width: 60, height: 20 } ] } ``` -------------------------------- ### Install elkjs using npm Source: https://github.com/kieler/elkjs/blob/master/README.md Installs the latest released version of elkjs using npm. This command fetches the stable version from the npm registry. ```bash npm install elkjs ``` -------------------------------- ### Get All Known Layout Options Source: https://github.com/kieler/elkjs/blob/master/_autodocs/api-reference/elk.md Retrieves all available layout options and their descriptions. Useful for dynamically configuring layout algorithms. ```typescript elk.knownLayoutOptions() .then(options => { const directionOption = options.find(o => o.id === 'elk.direction') console.log('Direction option:', directionOption) // { // id: 'org.eclipse.elk.direction', // name: 'Direction', // group: 'general', // type: 'enum', // description: 'Specifies the direction...' // } }) ``` ```typescript // Filter options by group elk.knownLayoutOptions() .then(options => { const spacingOptions = options.filter(o => o.group === 'spacing') console.log('Available spacing options:', spacingOptions) }) ``` -------------------------------- ### ElkNode Example Source: https://github.com/kieler/elkjs/blob/master/_autodocs/types.md Example demonstrating the structure of an ElkNode, including its ID, dimensions, child nodes, ports, and edges. This is useful for defining hierarchical graph structures. ```typescript const rootNode: ElkNode = { id: 'root', width: 800, height: 600, children: [ { id: 'n1', width: 100, height: 50, ports: [ { id: 'p1', width: 10, height: 10 } ] } ], edges: [ { id: 'e1', sources: ['n1'], targets: ['n2'] } ] } ``` -------------------------------- ### Building elkjs with npm Source: https://github.com/kieler/elkjs/blob/master/README.md Commands to install dependencies and build the elkjs library using npm. This process requires a checkout of the ELK repository in a specific directory structure. ```bash npm install npm run build ``` -------------------------------- ### Example ElkExtendedEdges Source: https://github.com/kieler/elkjs/blob/master/_autodocs/types.md Provides examples of creating ElkExtendedEdge objects, including simple edges, edges with ports, and edges with routing sections. ```typescript // Simple edge const edge1: ElkExtendedEdge = { id: 'e1', sources: ['n1'], targets: ['n2'] } ``` ```typescript // Edge with ports const edge2: ElkExtendedEdge = { id: 'e2', sources: ['n1#port1'], targets: ['n2#port2'] } ``` ```typescript // Edge with routing details const edge3: ElkExtendedEdge = { id: 'e3', sources: ['n1'], targets: ['n2'], sections: [ { id: 'e3_s1', startPoint: { x: 100, y: 50 }, endPoint: { x: 200, y: 100 }, bendPoints: [{ x: 150, y: 75 }] } ] } ``` -------------------------------- ### Node.js Graph Layout Example with elkjs Source: https://github.com/kieler/elkjs/blob/master/README.md Demonstrates how to use elkjs in a Node.js environment to perform graph layout. It initializes the ELK layout engine, defines a graph structure with nodes and edges, and applies a 'layered' layout algorithm. The result, containing calculated positions for graph elements, is then logged to the console. ```javascript const ELK = require('elkjs') const elk = new ELK() const graph = { id: "root", layoutOptions: { 'elk.algorithm': 'layered' }, children: [ { id: "n1", width: 30, height: 30 }, { id: "n2", width: 30, height: 30 }, { id: "n3", width: 30, height: 30 } ], edges: [ { id: "e1", sources: [ "n1" ], targets: [ "n2" ] }, { id: "e2", sources: [ "n1" ], targets: [ "n3" ] } ] } elk.layout(graph) .then(console.log) .catch(console.error) ``` -------------------------------- ### ELKConstructorArguments Example Source: https://github.com/kieler/elkjs/blob/master/_autodocs/types.md Illustrates the creation of an 'ELKConstructorArguments' object to configure ELK with specific default layout options, a subset of algorithms, and a worker URL. ```typescript const args: ELKConstructorArguments = { defaultLayoutOptions: { 'elk.algorithm': 'layered', 'elk.direction': 'RIGHT' }, algorithms: ['layered', 'stress', 'force'], workerUrl: './elk-worker.min.js' } const elk = new ELK(args) ``` -------------------------------- ### Example ElkPoint Usage Source: https://github.com/kieler/elkjs/blob/master/_autodocs/types.md Demonstrates the creation of ElkPoint objects for use in defining coordinates and bend points. ```typescript const point: ElkPoint = { x: 100, y: 200 } const bendPoint: ElkPoint = { x: 150, y: 175 } ``` -------------------------------- ### Basic Graph Layout Source: https://github.com/kieler/elkjs/blob/master/_autodocs/README.md Perform a basic graph layout using ELK.js with the layered algorithm. This example demonstrates how to define a simple graph with nodes and an edge. ```javascript const ELK = require('elkjs') const elk = new ELK() const graph = { id: 'root', layoutOptions: { 'elk.algorithm': 'layered' }, children: [ { id: 'n1', width: 30, height: 30 }, { id: 'n2', width: 30, height: 30 } ], edges: [ { id: 'e1', sources: ['n1'], targets: ['n2'] } ] } elk.layout(graph) .then(result => { console.log('Node 1 position:', result.children[0].x, result.children[0].y) console.log('Node 2 position:', result.children[1].x, result.children[1].y) }) ``` -------------------------------- ### GET /metadata Source: https://github.com/kieler/elkjs/blob/master/README.md Retrieves metadata about available layout algorithms, categories, and options. ```APIDOC ## GET /metadata ### Description Provides introspection methods to discover supported layout algorithms, categories, and available configuration options. ### Methods - `knownLayoutOptions()`: Returns an array of known layout options. - `knownLayoutAlgorithms()`: Returns an array of registered layout algorithms. - `knownLayoutCategories()`: Returns an array of registered layout categories. ``` -------------------------------- ### Example Layout Output with Logging Source: https://github.com/kieler/elkjs/blob/master/README.md This JSON structure represents the output of a layout operation when logging and execution time measurement are enabled. It includes graph elements, logging information, and timing details for different stages of the layout process. ```json { "id": "root", "children": [ ... ], "edges": [ ... ], "logging": { "name": "Recursive Graph Layout", "executionTime": 0.000096, "children": [ { "name": "Layered layout", "logs": [ "ELK Layered uses the following 17 modules:", " Slot 01: org.eclipse.elk.alg.layered.p1cycles.GreedyCycleBreaker", [ ... ] " Slot 16: org.eclipse.elk.alg.layered.intermediate.ReversedEdgeRestorer" ], "executionTime": 0.000072, "children": [ { "name": "Greedy cycle removal", "executionTime": 0.000002 }, [ ... ] { "name": "Restoring reversed edges", "executionTime": 0 } ] } ] } } ``` -------------------------------- ### ElkPort and Edge Example Source: https://github.com/kieler/elkjs/blob/master/_autodocs/types.md Illustrates the definition of an ElkPort on a node and an ElkExtendedEdge connecting specific ports. This is crucial for precise edge routing in graph layouts. ```typescript const node: ElkNode = { id: 'n1', width: 100, height: 50, ports: [ { id: 'in', width: 10, height: 10, x: 0, y: 20 }, { id: 'out', width: 10, height: 10, x: 90, y: 20 } ] } const edge: ElkExtendedEdge = { id: 'e1', sources: ['n1'], sourcePort: 'out', targets: ['n2'], targetPort: 'in' } ``` -------------------------------- ### Install elkjs Development Version Source: https://github.com/kieler/elkjs/blob/master/README.md Installs the development version of elkjs, which is based on the `master` branch of the ELK project. This version may contain the latest features and fixes but might be less stable. ```bash npm install elkjs@next ``` -------------------------------- ### Edge Routing with Source and Target Ports Source: https://github.com/kieler/elkjs/blob/master/_autodocs/README.md Define an edge with specific source and target ports for precise routing. This example shows how to connect 'node1#port_out' to 'node2#port_in'. ```javascript const edge = { id: 'e1', sources: ['node1#port_out'], targets: ['node2#port_in'] } ``` -------------------------------- ### Initialize ELK.js in Node.js (Web Worker) Source: https://github.com/kieler/elkjs/blob/master/_autodocs/configuration.md Instantiate ELK.js with a Web Worker using node's worker_threads for non-blocking layouts. Ensure the 'web-worker' npm package is installed. ```javascript const ELK = require('elkjs') // With Web Worker using node worker_threads const elk = new ELK({ workerUrl: './node_modules/elkjs/lib/elk-worker.min.js' }) ``` -------------------------------- ### Nested Graph Hierarchy Example Source: https://github.com/kieler/elkjs/blob/master/_autodocs/README.md Illustrates a simple nested graph structure where a parent node contains child nodes. This demonstrates the hierarchical layout capabilities. ```javascript { id: 'root', children: [ { id: 'parent', children: [ { id: 'child' } // Nested ] } ] } ``` -------------------------------- ### Listing Known Layout Categories Source: https://github.com/kieler/elkjs/blob/master/_autodocs/README.md Get a list of algorithm categories. This can help in organizing and selecting appropriate layout algorithms. ```typescript elk.knownLayoutCategories() .then(categories => console.log(categories)) ``` -------------------------------- ### Constructor: new ELK(options) Source: https://github.com/kieler/elkjs/blob/master/README.md Initializes a new instance of the ELK layout engine with optional configuration. ```APIDOC ## Constructor: new ELK(options) ### Description Creates a new ELK instance. Options allow configuring default layout settings, enabled algorithms, and worker URL for off-thread execution. ### Parameters #### Request Body - **defaultLayoutOptions** (object) - Optional - Default layout options as key/value pairs. - **algorithms** (array) - Optional - Array of algorithm IDs to enable. - **workerUrl** (string) - Optional - Path to the elk-worker.js script to enable Web Worker usage. ### Request Example { "defaultLayoutOptions": { "algorithm": "layered" }, "workerUrl": "/js/elk-worker.js" } ``` -------------------------------- ### Configure Global and Default Layout Options Source: https://github.com/kieler/elkjs/blob/master/README.md Demonstrates how to apply global layout options during the layout method call and how to set default layout options via the ELK constructor. ```javascript elk.layout(graph, { layoutOptions: { ... } }); const elk = new ELK({ defaultLayoutOptions: { ... } }); ``` -------------------------------- ### ELK Constructor and Options Source: https://github.com/kieler/elkjs/blob/master/README.md Demonstrates how to instantiate the ELK object with optional configuration for default layout options and algorithm selection. The workerUrl option enables Web Worker usage for layout execution. ```javascript const elk = new ELK({ defaultLayoutOptions: {}, algorithms: [ 'layered', 'stress', 'mrtree', 'radial', 'force', 'disco' ], workerUrl: undefined }); ``` -------------------------------- ### Basic ELK Instance Creation and Layout Source: https://github.com/kieler/elkjs/blob/master/_autodocs/README.md Instantiate the ELK class and use its layout method to compute graph positions. Handle potential errors during the layout process. ```javascript const ELK = require('elkjs') const elk = new ELK() const graph = { /* ... */ } elk.layout(graph) .then(result => console.log(result)) .catch(error => console.error(error)) ``` -------------------------------- ### Initialize ELK.js in Browser (Bundled) Source: https://github.com/kieler/elkjs/blob/master/_autodocs/configuration.md Include the bundled ELK.js script in your HTML and instantiate the ELK class for browser usage. ```html ``` -------------------------------- ### Browser (Bundled) Source: https://github.com/kieler/elkjs/blob/master/_autodocs/api-reference/elk.md Include the bundled script and instantiate ELK to perform a layout in the browser. ```html ``` -------------------------------- ### Listing Known Layout Options Source: https://github.com/kieler/elkjs/blob/master/_autodocs/README.md Fetch all configurable layout options with their details. This helps in understanding how to customize the layout algorithms. ```typescript elk.knownLayoutOptions() .then(options => console.log(options)) ``` -------------------------------- ### ElkEdgeSection Interface Source: https://github.com/kieler/elkjs/blob/master/_autodocs/types.md Defines detailed routing information for a segment of an edge, including start and end points, and bend points. ```typescript interface ElkEdgeSection extends ElkGraphElement { id: string startPoint: ElkPoint endPoint: ElkPoint bendPoints?: ElkPoint[] incomingShape?: string outgoingShape?: string incomingSections?: string[] outgoingSections?: string[] } ``` -------------------------------- ### Initialize ELK.js in Browser (Separate API/Worker) Source: https://github.com/kieler/elkjs/blob/master/_autodocs/configuration.md Load the separate ELK API script and instantiate ELK.js, specifying the worker script URL for browser environments. ```html ``` -------------------------------- ### Get All Known Layout Categories Source: https://github.com/kieler/elkjs/blob/master/_autodocs/api-reference/elk.md Retrieves all registered layout algorithm categories. Useful for understanding the different types of layout algorithms available. ```typescript elk.knownLayoutCategories() .then(categories => { categories.forEach(category => { console.log(`${category.name}`) console.log(` Description: ${category.description}`) console.log(` Algorithms:`, category.knownLayouters) }) }) ``` ```typescript // Filter to find a specific category elk.knownLayoutCategories() .then(categories => { const layeredCategory = categories.find(c => c.id.includes('layered')) console.log('Layered algorithm:', layeredCategory.knownLayouters) }) ``` -------------------------------- ### Basic ELK Constructor Configuration Source: https://github.com/kieler/elkjs/blob/master/_autodocs/configuration.md Initializes ELK with default settings. No options are provided, meaning default algorithms are used and all layout computations occur on the main thread. ```javascript const elk = new ELK() ``` -------------------------------- ### Initialize ELKjs in Node.js Source: https://github.com/kieler/elkjs/blob/master/README.md Shows how to initialize ELKjs in a Node.js environment, both with and without the use of Web Workers for asynchronous processing. ```javascript const ELK = require('elkjs'); // without web worker const elk = new ELK(); elk.layout(graph).then(console.log); // with web worker const elkWorker = new ELK({ workerUrl: './node_modules/elkjs/lib/elk-worker.min.js' }); elkWorker.layout(graph).then(console.log); ``` -------------------------------- ### ELK Layout in Node.js Source: https://github.com/kieler/elkjs/blob/master/_autodocs/api-reference/elk.md Demonstrates how to initialize and use the ELK.js library for graph layout within a Node.js environment. ```javascript const ELK = require('elkjs') const elk = new ELK() const graph = { /* ... */ } elk.layout(graph) .then(result => console.log(result)) .catch(err => console.error(err)) ``` -------------------------------- ### Initialize ELK.js with TypeScript Configuration Source: https://github.com/kieler/elkjs/blob/master/_autodocs/configuration.md Configure and instantiate ELK.js using TypeScript, specifying default layout options and the worker URL. ```typescript import ELK, { ELKConstructorArguments, LayoutOptions } from 'elkjs' const config: ELKConstructorArguments = { defaultLayoutOptions: { 'elk.algorithm': 'layered' }, workerUrl: './lib/elk-worker.js' } const elk = new ELK(config) ``` -------------------------------- ### Box Layout Configuration Source: https://github.com/kieler/elkjs/blob/master/_autodocs/configuration.md Configure the 'box' layout algorithm for simple fixed-position layouts, useful for testing. ```javascript { 'elk.algorithm': 'box' } ``` -------------------------------- ### Initialize ELK.js in Node.js (Blocking) Source: https://github.com/kieler/elkjs/blob/master/_autodocs/configuration.md Instantiate ELK.js without a Web Worker for a blocking layout process in a Node.js environment. ```javascript const ELK = require('elkjs') // Without Web Worker (blocking) const elk = new ELK() ``` -------------------------------- ### Get Root Coordinates for Graph Layout Source: https://github.com/kieler/elkjs/blob/master/test/examples/test-coord-modes.html Computes the layout for the root of the graph in 'ROOT' coordinate mode and extracts key points like the root, children, and edge points. This function is crucial for setting up coordinate systems and accessing specific graph elements for further processing or visualization. ```javascript async function getRootCoords(elk, graph) { const g = await computeLayout(elk, "ROOT", "ROOT", graph); const points = {}; points.root = g; points.Q = g.children[0]; points.A = points.Q.children[0]; points.B = points.Q.children[1]; points.C = points.B.children[0]; const s = points.Q.children[0].edges[0].sections[0]; points.e0 = s.startPoint; points.e1 = s.endPoint; return points; } ``` -------------------------------- ### Rectangle Packing Configuration Source: https://github.com/kieler/elkjs/blob/master/_autodocs/configuration.md Configure the 'rectpacking' algorithm to pack rectangular elements into a minimum bounding rectangle. ```javascript { 'elk.algorithm': 'rectpacking' } ``` -------------------------------- ### ELK Constructor Source: https://github.com/kieler/elkjs/blob/master/_autodocs/README.md Creates a layout engine instance. Options can be provided to configure default layout options, specify registered algorithm IDs, set the Web Worker URL, or provide a custom worker factory. ```APIDOC ## new ELK(options?: ELKConstructorArguments) ### Description Creates a layout engine instance. ### Parameters #### Options - **defaultLayoutOptions** (LayoutOptions) - Default layout algorithm options - **algorithms** (string[]) - Registered algorithm IDs - **workerUrl** (string) - Path to elk-worker.js for Web Worker mode - **workerFactory** (function) - Custom Worker creator ``` -------------------------------- ### Initialize and Layout Graph with ELK.js Source: https://github.com/kieler/elkjs/blob/master/test/examples/test-browser-draw2.html This snippet demonstrates how to instantiate the ELK class, define a complex hierarchical graph object with nodes, ports, and edges, and trigger the layout calculation. The resulting layout is then rendered to the DOM and the raw JSON output is displayed in a preformatted block. ```javascript const elk = new ELK(); const graph = { id: "root", properties: { 'algorithm': 'layered', 'org.eclipse.elk.hierarchyHandling': 'INCLUDE_CHILDREN' }, children: [ { id: "n0", width: 60, height: 60, labels: [{text: "n0", width: 22, height: 20}] }, { id: "n1", width: 60, height: 60, labels: [{text: "n1", width: 22, height: 20}] }, { id: "n2", labels: [{text: "n2", width: 22, height: 20}], ports: [ { id: "p1", width: 10, height: 10, labels: [{text: "p1", width: 22, height: 20}] }, { id: "p2", width: 10, height: 10, labels: [{text: "p2", width: 22, height: 20}] } ], children: [ { id: "n3", labels: [{text: "n3", width: 22, height: 20}], children: [ { id: "n4", width: 60, height: 60, labels: [{text: "n4", width: 22, height: 20}] }, { id: "n5", width: 60, height: 60, labels: [{text: "n5", width: 22, height: 20}] } ], edges: [{ id: "e6", sources: ["n4"], targets: ["n5"] }] }, { id: "n6", width: 60, height: 60, labels: [{text: "n6", width: 22, height: 20}] } ], edges: [ { id: "e4", sources: ["p2"], targets: ["n6"] }, { id: "e5", sources: ["n6"], targets: ["n6"] } ] } ], edges: [ { id: "e1", sources: ["n0"], targets: ["p1"] }, { id: "e2", sources: ["n0"], targets: ["n4"] }, { id: "e3", sources: ["n1"], targets: ["p2"] } ] }; elk.layout(graph).then(function(g) { const drawer = new SimpleElkGraphDrawer({}); const svg = drawer.draw(g); svg.addTo(document.body); const rawOutput = document.createElement('div'); rawOutput.innerHTML = "
" + JSON.stringify(g, null, " ") + "
"; document.body.appendChild(rawOutput); }); ``` -------------------------------- ### SPOrE Compaction Configuration Source: https://github.com/kieler/elkjs/blob/master/_autodocs/configuration.md Configure the 'sporeCompaction' algorithm for compacting a layout by removing excess space. Sets padding for all sides. ```javascript { 'elk.algorithm': 'sporeCompaction', 'elk.padding': '[left=5, top=5, right=5, bottom=5]' } ``` -------------------------------- ### Layout Options: Equivalent Prefix Usage Source: https://github.com/kieler/elkjs/blob/master/_autodocs/configuration.md Illustrates that layout options can be specified with or without the 'elk.' prefix. However, using the full prefix is recommended to prevent ambiguity. ```javascript // Both are equivalent: { 'elk.algorithm': 'layered' } { 'algorithm': 'layered' } ``` -------------------------------- ### ELKJS Graph Layout with JavaScript Source: https://github.com/kieler/elkjs/blob/master/test/examples/test-browser.html Initializes the ELKJS layout engine, defines a sample graph with nodes and edges, applies the 'layered' layout algorithm, and displays the resulting layout in JSON format. ```javascript const elk = new ELK() const graph = { id: "root", properties: { 'algorithm': 'layered' }, children: [ { id: "n1", width: 30, height: 30 }, { id: "n2", width: 30, height: 30 }, { id: "n3", width: 30, height: 30 } ], edges: [ { id: "e1", sources: [ "n1" ], targets: [ "n2" ] }, { id: "e2", sources: [ "n1" ], targets: [ "n3" ] } ] } elk.layout(graph) .then(function(g) { document.body.innerHTML = "
" + JSON.stringify(g, null, " ") + "
" }) ``` -------------------------------- ### Perform Graph Layout with ELKJS in JavaScript Source: https://github.com/kieler/elkjs/blob/master/test/examples/test-webworker.html Initializes the ELKJS layout engine, defines a sample graph with nodes and edges, applies the 'layered' layout algorithm, and displays the resulting graph layout as a JSON string. This snippet requires the ELKJS library and its worker script. ```javascript const elk = new ELK({ workerUrl: '../../lib/elk-worker.js' }) const graph = { id: "root", properties: { 'algorithm': 'layered' }, children: [ { id: "n1", width: 30, height: 30 }, { id: "n2", width: 30, height: 30 }, { id: "n3", width: 30, height: 30 } ], edges: [ { id: "e1", sources: [ "n1" ], targets: [ "n2" ] }, { id: "e2", sources: [ "n1" ], targets: [ "n3" ] } ] } elk.layout(graph) .then(function(g) { document.body.innerHTML = "
" + JSON.stringify(g, null, " ") + "
" }) ``` -------------------------------- ### Disco Layout Configuration Source: https://github.com/kieler/elkjs/blob/master/_autodocs/configuration.md Configure the 'disco' algorithm for discrete compound layouts, suitable for clustered graphs. ```javascript { 'elk.algorithm': 'disco' } ``` -------------------------------- ### Make Demo Block for ELK.js Layout Source: https://github.com/kieler/elkjs/blob/master/test/examples/test-coord-modes.html Generates a single demo block within a table, showcasing graph layout results. It computes the layout using ELK.js, draws the graph and coordinate vectors, and optionally displays the raw layout output. Dependencies include ELK.js and SVG drawing utilities. ```javascript async function makeDemoBlock(host, elk, shapeCoordMode, edgeCoordMode, graph, rootPoints, {dump = true}) { const g = await computeLayout(elk, shapeCoordMode, edgeCoordMode, graph); const svg = drawGraph(shapeCoordMode, edgeCoordMode, g); drawCoordVectors(svg, shapeCoordMode, edgeCoordMode, rootPoints); svg.addTo(host); const coords = showCoords(g); host.appendChild(coords); if (dump) { const rawOutput = document.createElement('div'); rawOutput.innerHTML = "
" + JSON.stringify(g, null, " ") + "
"; host.appendChild(rawOutput); } } ``` -------------------------------- ### LayoutOptions Source: https://github.com/kieler/elkjs/blob/master/_autodocs/types.md Defines the structure for layout configuration key-value pairs. Keys are layout option IDs, and values are string representations of configuration settings. ```APIDOC ## LayoutOptions Type alias for layout configuration as key-value pairs. Keys are layout option IDs (with or without the 'elk.' prefix), and values are configuration values as strings. ```typescript interface LayoutOptions { [key: string]: string } ``` **Common Options**: | Key | Values | Example | Description | |-----|--------|---------|-------------| | elk.algorithm | 'layered', 'stress', 'mrtree', 'radial', 'force', 'disco', 'sporeOverlap', 'sporeCompaction', 'rectpacking' | 'layered' | Primary layout algorithm to use | | elk.direction | 'UP', 'DOWN', 'LEFT', 'RIGHT' | 'RIGHT' | General layout direction | | elk.spacing.nodeNode | number as string | '15' | Minimum spacing between nodes | | elk.padding | '[left=X, top=Y, right=Z, bottom=W]' | '[left=5, top=5, right=5, bottom=5]' | Padding around the graph | | elk.layered.spacing.nodeNodeBetweenLayers | number as string | '20' | Vertical spacing in layered layout | **Example**: ```typescript const options: LayoutOptions = { 'elk.algorithm': 'layered', 'elk.direction': 'DOWN', 'elk.spacing.nodeNode': '15', 'elk.padding': '[left=10, top=10, right=10, bottom=10]' } ``` ``` -------------------------------- ### Release Build Procedure Source: https://github.com/kieler/elkjs/blob/master/README.md Steps for creating a new release of elkjs, including checking out the correct ELK repository tag, updating version numbers in package.json and build.gradle, building, testing, and tagging the release. ```bash git checkout -b releases/0.x.x # Check that the version numbers are correct, if necessary update versions and commit the changes npm install npm run build npm run test # Add ./lib/ directory and commit git tag 0.x.x ``` -------------------------------- ### Listing Known Layout Algorithms Source: https://github.com/kieler/elkjs/blob/master/_autodocs/README.md Retrieve a list of all available layout algorithms and their metadata. This is useful for understanding the capabilities of the elkjs library. ```typescript elk.knownLayoutAlgorithms() .then(algorithms => console.log(algorithms)) ``` -------------------------------- ### knownLayoutAlgorithms() Source: https://github.com/kieler/elkjs/blob/master/_autodocs/README.md Retrieves a list of all available layout algorithms along with their metadata. This method is asynchronous and returns a Promise that resolves with an array of algorithm descriptions. ```APIDOC ## knownLayoutAlgorithms(): Promise ### Description Lists available layout algorithms with metadata. ### Returns - **Promise** ``` -------------------------------- ### ELKConstructorArguments Source: https://github.com/kieler/elkjs/blob/master/_autodocs/types.md Configuration object for initializing the ELK constructor, allowing customization of default layout options, registered algorithms, and worker settings. ```APIDOC ## Constructor Arguments ### ELKConstructorArguments Configuration object for the ELK constructor. ```typescript interface ELKConstructorArguments { defaultLayoutOptions?: LayoutOptions algorithms?: string[] workerUrl?: string workerFactory?: (url?: string) => Worker } ``` | Field | Type | Required | Default | Description | |-------|------|----------|---------|-------------| | defaultLayoutOptions | LayoutOptions | false | {} | Default layout options used when no options are passed to `layout()` | | algorithms | string[] | false | ['layered', 'stress', 'mrtree', 'radial', 'force', 'disco', 'sporeOverlap', 'sporeCompaction', 'rectpacking'] | Array of algorithm IDs to register. The 'box', 'fixed', and 'random' algorithms are always available | | workerUrl | string | false | undefined | URL/path to the elk-worker.js file. When provided, layout computations run in a Web Worker | | workerFactory | (url?: string) => Worker | false | undefined | Custom function to create Worker instances, allowing custom Worker implementations | **Note**: Either `workerUrl` or `workerFactory` must be provided (or both may be undefined only when running in non-worker mode, but at least one is required in current implementation). **Example**: ```typescript const args: ELKConstructorArguments = { defaultLayoutOptions: { 'elk.algorithm': 'layered', 'elk.direction': 'RIGHT' }, algorithms: ['layered', 'stress', 'force'], workerUrl: './elk-worker.min.js' } const elk = new ELK(args) ``` ``` -------------------------------- ### knownLayoutOptions() Source: https://github.com/kieler/elkjs/blob/master/_autodocs/README.md Fetches a comprehensive list of all configurable layout options, including detailed descriptions for each option. This method is asynchronous and returns a Promise that resolves with an array of layout option descriptions. ```APIDOC ## knownLayoutOptions(): Promise ### Description Lists all configurable layout options with details. ### Returns - **Promise** ``` -------------------------------- ### ELK.knownLayoutOptions Source: https://github.com/kieler/elkjs/blob/master/_autodocs/types.md Retrieves a list of all available layout options and their descriptions. ```APIDOC ## ELK.knownLayoutOptions ### Description Retrieves a list of all available layout options and their descriptions. ### Method `knownLayoutOptions(): Promise` ### Parameters None ### Response #### Success Response (200) - **ElkLayoutOptionDescription[]** - An array of objects, each describing a layout option. ``` -------------------------------- ### Initialize ELKjs in TypeScript Source: https://github.com/kieler/elkjs/blob/master/README.md Illustrates how to import and initialize ELKjs within a TypeScript project for both standard and Web Worker configurations. ```typescript import ELK from 'elkjs/lib/elk.bundled.js'; const elk = new ELK(); import ELKWorker from 'elkjs/lib/elk-api'; const elkWorker = new ELKWorker({ workerUrl: './elk-worker.min.js' }); ``` -------------------------------- ### Layout Graph with ELK.js and Render with SimpleElkGraphDrawer (JavaScript) Source: https://github.com/kieler/elkjs/blob/master/test/examples/test-browser-draw.html This snippet initializes ELK.js, defines a graph with nodes and edges, applies the 'layered' layout algorithm, and then uses SimpleElkGraphDrawer to render the layout as an SVG element appended to the document body. It also displays the raw JSON output of the layout. ```javascript const elk = new ELK() const graph = { id: "root", properties: { 'algorithm': 'layered' }, children: [ { id: "n1", width: 30, height: 30 }, { id: "n2", width: 30, height: 30 }, { id: "n3", width: 30, height: 30 } ], edges: [ { id: "e1", sources: [ "n1" ], targets: [ "n2" ] }, { id: "e2", sources: [ "n1" ], targets: [ "n3" ] } ] } elk.layout(graph) .then(function(g) { const drawer = new SimpleElkGraphDrawer({}); const svg = drawer.draw(g); svg.addTo(document.body); const rawOutput = document.createElement('div'); rawOutput.innerHTML = "
" + JSON.stringify(g, null, " ") + "
"; document.body.appendChild(rawOutput); }) ``` -------------------------------- ### Configure ELK.js for Deterministic Layouts Source: https://github.com/kieler/elkjs/blob/master/_autodocs/configuration.md Set default layout options for deterministic layouts, using algorithms like 'fixed' or 'layered' with consistent direction. ```javascript const elk = new ELK({ defaultLayoutOptions: { 'elk.algorithm': 'layered', 'elk.direction': 'DOWN' } }) ``` -------------------------------- ### ELK Constructor Source: https://github.com/kieler/elkjs/blob/master/_autodocs/api-reference/elk.md Initializes a new ELK instance for graph layout computations. This constructor sets up the layout engine and registers available algorithms. It can be configured with default layout options, specific algorithms, and options for using Web Workers for background processing. ```APIDOC ## ELK Constructor ### Description Initializes a new ELK instance for graph layout computations. This constructor sets up the layout engine and registers available algorithms. It can be configured with default layout options, specific algorithms, and options for using Web Workers for background processing. ### Signature ```typescript constructor(options?: ELKConstructorArguments): ELK ``` ### Parameters #### Options Object (`options`) - **`defaultLayoutOptions`** (LayoutOptions) - Optional - Default layout options applied to all layout calls unless overridden. - **`algorithms`** (string[]) - Optional - Array of layout algorithm IDs to register. The 'box', 'fixed', and 'random' algorithms are always included. Defaults to `['layered', 'stress', 'mrtree', 'radial', 'force', 'disco', 'sporeOverlap', 'sporeCompaction', 'rectpacking']`. - **`workerUrl`** (string) - Optional - Path to the elk-worker.js script. When provided, layout computations run in a Web Worker. - **`workerFactory`** ((url?: string) => Worker) - Optional - Custom factory function to create Worker instances. Allows custom Worker creation instead of using the default Web Worker API. ### Returns - **ELK** - An instance of the ELK class. ### Throws - **`Error`**: If both `workerUrl` and `workerFactory` are undefined, or if the created worker does not provide a `postMessage` function. - **`TypeError`**: If the created worker does not implement the required Web Worker interface. ### Examples ```typescript // Basic usage without web worker (synchronous) const elk = new ELK() // With web worker for background processing const elk = new ELK({ workerUrl: './lib/elk-worker.min.js' }) // With custom default layout options const elk = new ELK({ defaultLayoutOptions: { 'elk.algorithm': 'layered', 'elk.direction': 'RIGHT' } }) // With custom worker factory const elk = new ELK({ workerFactory: function(url) { const { Worker } = require('elkjs/lib/elk-worker.js') return new Worker(url) } }) ``` ``` -------------------------------- ### POST /layout Source: https://github.com/kieler/elkjs/blob/master/README.md Executes a layout algorithm on the provided graph data. ```APIDOC ## POST /layout ### Description Performs a graph layout calculation on the provided ELK JSON graph. Returns a promise that resolves to the laid-out graph. ### Method POST ### Parameters #### Request Body - **graph** (object) - Required - The graph structure in ELK JSON format. - **options** (object) - Optional - Configuration object containing layoutOptions, logging, and measureExecutionTime flags. ### Request Example { "graph": { "id": "root", "children": [] }, "options": { "layoutOptions": { "algorithm": "layered" }, "logging": true, "measureExecutionTime": true } } ### Response #### Success Response (200) - **graph** (object) - The graph object with calculated coordinates and optional logging/timing metadata. #### Response Example { "id": "root", "children": [], "logging": { "executionTime": 0.000096 } } ``` -------------------------------- ### ELK.knownLayoutAlgorithms Source: https://github.com/kieler/elkjs/blob/master/_autodocs/types.md Retrieves a list of all registered layout algorithms and their descriptions. ```APIDOC ## ELK.knownLayoutAlgorithms ### Description Retrieves a list of all registered layout algorithms and their descriptions. ### Method `knownLayoutAlgorithms(): Promise` ### Parameters None ### Response #### Success Response (200) - **ElkLayoutAlgorithmDescription[]** - An array of objects, each describing a layout algorithm. ``` -------------------------------- ### Retrieve Known Layout Algorithms Source: https://github.com/kieler/elkjs/blob/master/_autodocs/api-reference/elk.md Fetches information about all registered layout algorithms. Use this to discover available algorithms and their supported options. ```typescript elk.knownLayoutAlgorithms() .then(algorithms => { algorithms.forEach(algo => { console.log(`${algo.name} (${algo.id})`) console.log(` Category: ${algo.category}`) console.log(` Supported options:`, algo.knownOptions) }) }) ``` -------------------------------- ### Force-Directed Layout Configuration Source: https://github.com/kieler/elkjs/blob/master/_autodocs/configuration.md Configure the 'force' directed layout algorithm. Sets the number of iterations and node-node spacing. ```javascript { 'elk.algorithm': 'force', 'elk.force.iterations': '300', 'elk.spacing.nodeNode': '25' } ``` -------------------------------- ### Layered Layout Algorithm Configuration Source: https://github.com/kieler/elkjs/blob/master/_autodocs/configuration.md Provides specific configuration options for the 'layered' layout algorithm. This includes setting the primary algorithm, direction, node-node spacing between layers, and general node-node spacing. ```javascript { 'elk.algorithm': 'layered', 'elk.direction': 'DOWN', 'elk.layered.spacing.nodeNodeBetweenLayers': '20', 'elk.spacing.nodeNode': '15' } ``` -------------------------------- ### Main Function to Generate ELK.js Demo Table Source: https://github.com/kieler/elkjs/blob/master/test/examples/test-coord-modes.html Initializes ELK.js, defines coordinate modes, retrieves root coordinates, and constructs an HTML table to display graph layouts. It iterates through different shape and edge coordinate modes, generating a demo block for each combination. ```javascript async function main() { showRawGraphInput(); const elk = new ELK({ workerUrl: '../../lib/elk-worker.js' }); const shapeCoordModes = [ 'PARENT', 'ROOT' ]; const edgeCoordModes = [ 'PARENT', 'ROOT', 'CONTAINER', ]; const rp = await getRootCoords(elk, graph); const table = document.createElement('table'); for (const ecm of edgeCoordModes) { const tr = document.createElement('tr'); for (const scm of shapeCoordModes) { const td = document.createElement('td'); const h = document.createElement('h2'); h.innerHTML = `shapeCoords: ${scm}, edgeCoords: ${ecm}`; td.appendChild(h); await makeDemoBlock(td, elk, scm, ecm, graph, rp, {dump: false}); tr.appendChild(td); } table.appendChild(tr); } document.body.appendChild(table); } main(); ``` -------------------------------- ### Browser (With Web Worker) Source: https://github.com/kieler/elkjs/blob/master/_autodocs/api-reference/elk.md Use the elk-api.js script and configure ELK with a worker URL for background layout processing. Remember to terminate the worker when done. ```html ``` -------------------------------- ### ELK Layout Method Source: https://github.com/kieler/elkjs/blob/master/README.md Illustrates the usage of the layout method to perform graph layout. It takes the graph data and optional configuration for layout options, logging, and execution time measurement. The method returns a Promise that resolves with the laid out graph or an error. ```javascript elk.layout(graph, { layoutOptions: {}, logging: false, measureExecutionTime: false }).then(layoutedGraph => { // Handle successful layout }).catch(error => { // Handle layout error }); ``` -------------------------------- ### ELK.js Import Statements Source: https://github.com/kieler/elkjs/blob/master/_autodocs/types.md Shows how to import all available types and interfaces from the main 'elkjs' entry point. ```typescript import { ElkNode, ElkPort, ElkLabel, ElkEdge, ElkExtendedEdge, ElkEdgeSection, ElkShape, ElkGraphElement, ElkPoint, LayoutOptions, ElkLayoutArguments, ElkLayoutAlgorithmDescription, ElkLayoutOptionDescription, ElkLayoutCategoryDescription, ELK, ELKConstructorArguments } from 'elkjs' ``` -------------------------------- ### Fixed Layout Configuration Source: https://github.com/kieler/elkjs/blob/master/_autodocs/configuration.md Configure the 'fixed' layout algorithm to use node positions as-is without modification. ```javascript { 'elk.algorithm': 'fixed' } ``` -------------------------------- ### Instantiate ELK Class Source: https://github.com/kieler/elkjs/blob/master/_autodocs/api-reference/elk.md Creates a new ELK instance. Use the default constructor for synchronous layout computation. For background processing, provide the `workerUrl` to load the elk-worker.js script. You can also set default layout options or provide a custom worker factory. ```typescript const elk = new ELK() ``` ```typescript const elk = new ELK({ workerUrl: './lib/elk-worker.min.js' }) ``` ```typescript const elk = new ELK({ defaultLayoutOptions: { 'elk.algorithm': 'layered', 'elk.direction': 'RIGHT' } }) ``` ```typescript const elk = new ELK({ workerFactory: function(url) { const { Worker } = require('elkjs/lib/elk-worker.js') return new Worker(url) } }) ``` -------------------------------- ### Correct ELK Constructor Configuration Source: https://github.com/kieler/elkjs/blob/master/_autodocs/errors.md Initialize the ELK constructor with either `workerUrl` or `workerFactory`. Omitting both can lead to configuration errors. ```javascript // ✓ Good const elk = new ELK({ workerUrl: './lib/elk-worker.js' }) // ✗ Bad const elk = new ELK() // Missing workerUrl or workerFactory ``` -------------------------------- ### Configure ELK.js for Responsive UIs with Web Workers Source: https://github.com/kieler/elkjs/blob/master/_autodocs/configuration.md Instantiate ELK.js with a Web Worker to prevent blocking user interactions on responsive interfaces. ```javascript const elk = new ELK({ workerUrl: './lib/elk-worker.js' }) ```