### SolidJS Demo Setup Instructions

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/toolkit/solid/README.md

This snippet provides the command-line instructions required to initialize and start the yFiles for HTML SolidJS demo. It includes navigating to the project directory, installing dependencies, and launching the development server.

```Shell
cd demos-ts/toolkit/solid/
npm install
npm run dev
```

--------------------------------

### Node.js Demo Setup and Start Commands

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/nodejs/README.html

Commands to install required npm modules and start the Node.js layout server for the yFiles for HTML demo. These commands should be executed in the demo's 'server' directory.

```Shell
npm install
```

```Shell
npm start
```

--------------------------------

### Running the GraphQL Server with npm

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/toolkit/graphql/index.html

These shell commands provide instructions for setting up and starting the local GraphQL server required for the yFiles demo. 'npm install' installs necessary dependencies, and 'npm start' initiates the server process, making the GraphQL endpoint available for the client application to fetch data.

```bash
npm install
npm start
```

--------------------------------

### Setup and Run yFiles React Demo Application

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/toolkit/react-class-components/README.md

Instructions to navigate to the demo's directory, install project dependencies, and start the development server for the yFiles React Class Components demo.

```bash
cd demos-ts/toolkit/react
npm install
npm run dev
```

--------------------------------

### Start GraphQL Server

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/toolkit/graphql/README.md

Instructions to install dependencies and start the local GraphQL server for the social network demo. This server utilizes Express and the GraphQL reference implementation.

```Bash
> npm install
> npm start
```

--------------------------------

### Starting the yFiles for HTML React Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/toolkit/react/README.md

These commands guide you through setting up and running the yFiles for HTML React demo application locally. 'npm install' fetches all necessary project dependencies, and 'npm run dev' starts the development server, which automatically updates upon code changes.

```Shell
npm install
```

```Shell
npm run dev
```

--------------------------------

### Start yFiles for HTML React Demo Development Server

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/toolkit/react/README.html

Instructions to navigate to the demo directory, install dependencies, and start the development server for the yFiles for HTML React application.

```Shell
cd demos-ts/toolkit/react
```

```Shell
npm install
```

```Shell
npm run dev
```

--------------------------------

### Starting the PDF Export Node Server

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/view/pdfexport/node-server/README.html

Commands to install dependencies and start the Node.js server for the PDF export functionality.

```Shell
npm install
npm start
```

--------------------------------

### Setup and Run yFiles React Component Node Style Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/style/react-component-node-style/README.html

Provides step-by-step command-line instructions to initialize and launch the yFiles for HTML React component node style demo, including navigating to the project directory and starting the development server.

```Shell
cd demos-ts/style/react-component-node-style
npm install
npm run dev
```

--------------------------------

### NPM Commands to Run Vite Lazy Load yFiles Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/vite-lazy-yfiles/index.html

These commands guide the user through setting up and running the yFiles lazy loading demo. It involves navigating to the demo directory, installing project dependencies, and starting the development server using npm.

```Shell
cd demos-ts/loading/vite-lazy-yfiles
```

```Shell
npm install
```

```Shell
npm run dev
```

--------------------------------

### Run SolidJS yFiles Demo Locally

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/toolkit/solid/README.html

Detailed steps to navigate to the demo directory, install dependencies, and start the development server for the yFiles for HTML SolidJS application using npm and Vite.

```bash
cd demos-ts/toolkit/solid/
npm install
npm run dev
```

--------------------------------

### Install and Run Vue yFiles Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/toolkit/vue/README.html

Commands to install project dependencies and start the development server for the yFiles Vue 3 demo, scaffolded with create-vue.

```Shell
npm install
npm run dev
```

--------------------------------

### Start yFiles Vue 3 TypeScript Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/toolkit/vue/README.md

These commands are used to install the project dependencies and then start the development server for the yFiles for HTML demo, which is built with Vue 3 and TypeScript using Vite.

```Shell
npm install
npm run dev
```

--------------------------------

### Running the yFiles React Class Components Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/toolkit/react-class-components/README.html

Instructions to set up and run the yFiles for HTML React Class Components demo locally. This involves navigating to the project directory, installing necessary dependencies using npm, and starting the development server.

```Shell
cd demos-ts/toolkit/react
npm install
npm run dev
```

--------------------------------

### Setup and Run Vue.js Component Node Style Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/style/vue-component-node-style/README.md

These commands provide a step-by-step guide to initialize the project dependencies and launch the development server for the yFiles for HTML demo featuring Vue.js component node styles. After execution, the application will be accessible via a local server.

```Shell
cd demos-ts/style/vue-component-node-style
npm install
npm run dev
```

--------------------------------

### Start Node.js Layout Server

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/nodejs/README.md

This command initiates the Node.js layout server, which is responsible for performing the asynchronous yFiles layout calculations. It should be run after all dependencies have been installed.

```Shell
npm start
```

--------------------------------

### Run Vue.js Demo Application

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/style/vue-template-node-style/README.md

Instructions to set up and launch the yFiles for HTML demo application. This involves navigating to the demo directory and executing npm commands to install dependencies and start the development server.

```Shell
npm install
npm run dev
```

--------------------------------

### Running yFiles Jest Puppeteer Demo and Integration Tests

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/testing/jest-puppeteer/README.md

This snippet provides the command-line instructions to set up, start, and run the integration tests for the yFiles for HTML Jest Puppeteer demo. It involves navigating to the demo directory, installing dependencies, starting the application, and then executing the tests.

```bash
cd demos-js/testing/jest-puppeteer
npm install
npm run start-test
npm run test:integration
```

--------------------------------

### Install Node.js Dependencies

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/web-dev-server/README.html

Installs all required Node.js modules and project dependencies for the yFiles for HTML demo using npm.

```Shell
npm install
```

--------------------------------

### Run yFiles for HTML Angular CLI Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/toolkit/angular/README.html

Provides step-by-step command-line instructions to set up and launch the yFiles for HTML Angular CLI demo application. This involves navigating to the project directory and executing standard Node.js package manager commands to install dependencies and start the development server.

```Shell
cd demos-ts/toolkit/angular
npm install
npm start
```

--------------------------------

### Setup and Run WebdriverIO Integration Tests

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/testing/wdio/index.html

Commands to set up project dependencies and execute the integration tests for the yFiles for HTML application using npm.

```Shell
npm install
npm run test
```

--------------------------------

### Example HTML Markup for yFiles Labels

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/style/markup-labels/index.html

Demonstrates a simple HTML markup string that can be used with `MarkupLabelStyle` to create a bold 'Hello World' label. This example is typically entered into an editor associated with the label.

```HTML
<strong>Hello World</strong>
```

--------------------------------

### Install Dependencies and Run Cypress Tests

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/testing/cypress/README.html

Commands to install project dependencies using npm and then execute the Cypress tests. Tests can be run either from the command line or via the Cypress UI.

```Shell
npm install
npm run test
# Or to open the Cypress test UI:
npm run test-ui
```

--------------------------------

### Install Node.js Server Dependencies

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/view/imageexport/node-server/README.html

Installs all required Node.js packages and dependencies for the Image Export Demo server.

```npm
npm install
```

--------------------------------

### Start Web Dev Server

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/web-dev-server/README.html

Launches the Web Dev Server, which serves the yFiles for HTML demo application and automatically opens it in a web browser.

```Shell
npm start
```

--------------------------------

### Start Node.js Layout Server

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/nodejs/index.html

Starts the yFiles layout server, making it ready to process asynchronous graph layout requests from client applications. This command initiates the server process.

```Shell
npm start
```

--------------------------------

### Install npm Dependencies

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/vite/README.md

This command installs all necessary Node.js modules and project dependencies required to run the yFiles for HTML with Vite demo. It should be executed once after cloning the repository.

```bash
npm install
```

--------------------------------

### Start Node.js Image Export Server

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/view/imageexport/node-server/README.html

Starts the Node.js server for the Image Export Demo, making it ready to accept SVG data for image export.

```npm
npm start
```

--------------------------------

### Run Local Development Server

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/webworker-webpack/README.html

Starts a local web server to serve the demo. To run the demo, open `dist/index.html` in a browser after the server has started, allowing you to interact with the application.

```Shell
npm run serve
```

--------------------------------

### Example Edge Data for Labels

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-graph-builder/07-create-labels-sources/README.md

Provides an example dataset for edges, including `sourceId`, `targetId`, and an `ownership` property that will be used to generate custom edge labels.

```javascript
const edgeData = [
  {
    id: '0',
    sourceId: '1',
    targetId: '0',
    ownership: 30
  },
  {
    id: '1',
    sourceId: '0',
    targetId: '2',
    ownership: 60
  },
  { id: '2', sourceId: '4', targetId: '0', ownership: 5 },
  { id: '3', sourceId: '3', targetId: '0', ownership: 5 }
]
```

--------------------------------

### Install Node.js Dependencies

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/nodejs/README.md

This command installs all necessary npm modules required for the demo's server-side components. It must be executed within the `server` directory of the demo.

```Shell
npm install
```

--------------------------------

### Start Webpack Development Server

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/webpack/README.html

This command initiates the webpack dev server, which provides live reloading support and serves bundles from memory, optimizing the development turnaround time. It also performs an initial webpack build.

```Shell
npm start
```

--------------------------------

### Install Node.js Dependencies

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/rollupjs/index.html

Installs all necessary npm packages required to build and run the yFiles Rollup.js demo.

```Shell
npm install
```

--------------------------------

### Running Jest Unit Tests for yFiles Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/testing/jest/README.md

Instructions to set up and execute the unit tests for the yFiles for HTML Jest demo application. This involves installing project dependencies and then running the test suite.

```Shell
npm install
```

```Shell
npm run test
```

--------------------------------

### Install Node.js Server Dependencies

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/nodejs/index.html

Installs the necessary Node.js modules required for the yFiles layout server. This command should be executed in the server's subdirectory to set up the project dependencies.

```Shell
npm install
```

--------------------------------

### Start Vite Development Server

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/vite/README.md

This command launches the Vite development server, which serves the application locally. It enables features like Hot Module Replacement (HMR) for immediate updates in the browser upon code changes, facilitating efficient development.

```bash
npm run dev
```

--------------------------------

### Run Webpack Development Server

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/webpack/index.template.html

Starts the webpack dev server, providing live reloading support. Bundles are created in memory, and the page refreshes automatically upon source file changes, facilitating rapid development.

```shell
npm start
```

--------------------------------

### Install Node.js Dependencies

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/webworker-webpack/README.html

Installs all required npm packages for the project, ensuring all necessary libraries and tools are available for building and running the demo.

```Shell
npm install
```

--------------------------------

### Install Node.js Dependencies for Vite yFiles Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/vite/README.html

Installs all necessary npm modules required for the yFiles for HTML Vite loading demo. This command should be executed once in the demo directory before running the application or building the project.

```Shell
npm install
```

--------------------------------

### Run webpack dev server for development

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/webpack/README.md

This command starts the webpack development server, which provides live reloading support and serves bundles from memory, optimizing the development workflow for the yFiles application.

```Shell
npm start
```

--------------------------------

### Initialize TreeBuilder and Create Root Nodes Source

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-graph-builder/13-tree-builder/README.md

Demonstrates the initial setup of the yFiles TreeBuilder by instantiating it with a graph object. It then shows how to create a root nodes source from the primary data, setting the foundation for the graph construction process.

```TypeScript
const treeBuilder = new TreeBuilder(graph)

const rootNodesSource = treeBuilder.createRootNodesSource(nodesData, null)
```

--------------------------------

### Build and Install Dependencies for Rollup.js Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/rollupjs/README.html

Instructions to install the required npm packages and build the yFiles for HTML demo using npm and Rollup.js. The build process places output files in the 'dist/' directory.

```Shell
npm install
```

```Shell
npm run build
```

--------------------------------

### Example Node Data for Multiple Labels

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-graph-builder/07-create-labels-sources/README.md

Illustrates a dataset where node information includes an array of strings (`owners`) that can be used to generate multiple labels for a single node, serving as input for `createLabelsSource`.

```javascript
const nodeData = [
  { id: '3', owners: ['Local Group', 'Germany'] },
  { id: '4', owners: ['International Group'] }
]
```

--------------------------------

### Run Cypress Tests for yFiles Application

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/testing/cypress/README.md

This snippet provides the shell commands required to install project dependencies and execute Cypress tests for the yFiles for HTML application. It includes commands for running tests in headless mode and launching the Cypress test UI.

```Shell
npm install
npm run test
npm run test-ui
```

--------------------------------

### Start Development Server for Svelte yFiles Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/toolkit/svelte/README.html

Launches the Vite development server to run the yFiles for HTML Svelte integration demo locally. After execution, the application will typically be accessible via a web browser at the specified local address.

```Shell
npm run dev
```

--------------------------------

### Initialize TreeBuilder and Create Root Nodes Source (TypeScript)

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-graph-builder/13-tree-builder/index.html

Demonstrates the initial setup of `TreeBuilder` by instantiating it with the graph object and creating the `rootNodesSource` from the primary data array. This sets up the foundation for building the graph from the top-level entries.

```TypeScript
const treeBuilder = new TreeBuilder(graph)

const rootNodesSource = treeBuilder.createRootNodesSource(nodesData, null)
```

--------------------------------

### Start Vite Development Server for Svelte Application

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/toolkit/svelte/README.md

This command launches the Vite development server, which compiles and serves the Svelte application. It typically opens the application in a web browser, providing live reloading and other development features.

```Shell
npm run dev
```

--------------------------------

### Start Vite Development Server for yFiles Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/vite/README.html

Launches the Vite development server, which serves the yFiles for HTML demo application. This server provides Hot Module Replacement (HMR) capabilities, allowing for immediate updates in the browser upon source code changes.

```Shell
npm run dev
```

--------------------------------

### Initialize AdjacencyGraphBuilder and Create NodesSource

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-graph-builder/12-adjacency-graph-builder/index.html

Demonstrates the initial setup of the AdjacencyGraphBuilder with a graph instance and the creation of an AdjacencyNodesSource, providing the raw node data and a function to extract unique IDs for each node.

```JavaScript
const adjacencyGraphBuilder = new AdjacencyGraphBuilder(graph)

const adjacencyNodesSource = adjacencyGraphBuilder.createNodesSource(
  nodesData,
  (item) => item.id
)
```

--------------------------------

### Running the Vitest Demo Application

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/testing/vitest/README.html

Instructions for setting up and executing the Vitest tests and the application itself. These commands are run in the terminal.

```Shell
npm install
npm run test
npm run test-ui
npm run dev
```

--------------------------------

### Serve Production Build

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/vite/README.md

After building the application for production, this command serves the optimized build. It allows you to test the production-ready version of the demo locally before deployment.

```bash
npm run serve
```

--------------------------------

### Build for Production

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/vite/README.md

This command compiles and bundles the demo application for production deployment. It optimizes the code for performance and prepares it for serving in a live environment.

```bash
npm run build
```

--------------------------------

### Install Node.js Dependencies for Webpack Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/webpack/index.template.html

Installs all required npm modules in the demo directory. This step is necessary before running the development server or production build.

```shell
npm install
```

--------------------------------

### Install Node.js Dependencies for Webpack Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/webpack/README.html

This command installs all necessary npm modules required for the yFiles Webpack demo, as specified in the project's package.json file.

```Shell
npm install
```

--------------------------------

### Install Node.js Dependencies for Svelte Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/toolkit/svelte/README.md

This command installs all required Node.js modules and project dependencies specified in the `package.json` file, preparing the Svelte application for development or execution.

```Shell
npm install
```

--------------------------------

### Install npm dependencies for webpack project

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/webpack/README.md

This command installs all required Node.js modules and project dependencies, as specified in the `package.json` file, necessary to run the yFiles webpack demo.

```Shell
npm install
```

--------------------------------

### Build and Run yFiles Rollup Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/rollupjs/README.md

This command sequence installs the necessary Node.js packages and then executes the Rollup build script for the yFiles demo. The build process bundles the yFiles library and application code into a `bundle.js` file, which can then be run by opening the `index.html` in the `dist/` directory.

```Shell
> npm install
> npm run build
```

--------------------------------

### Create Ports and Connect Them with an Edge

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-yfiles-basic-features/02-graph-element-creation/README.md

Demonstrates creating explicit ports on nodes using `graph.addPort()` and `graph.addPortAt()`, then connecting these ports with an edge.

```JavaScript
// Create a port in the center of the node layout
const port1AtNode1 = graph.addPort(node1, FreeNodePortLocationModel.CENTER)

// Create a port at the middle of the left border
// The location is interpreted as absolute coordinates
const port1AtNode3 = graph.addPortAt(
  node3,
  new Point(node3.layout.x, node3.layout.center.y)
)

// Create an edge that connects the two ports
const edgeAtPorts = graph.createEdge(port1AtNode1, port1AtNode3)
```

--------------------------------

### Install Dependencies for Svelte yFiles Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/toolkit/svelte/README.html

Installs all necessary Node.js packages and dependencies for the yFiles for HTML Svelte integration demo using npm. This command should be run in the demo's root directory.

```Shell
npm install
```

--------------------------------

### Install Node.js Dependencies for Jest Testing

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/testing/jest/src/index.html

This command installs all necessary Node.js packages and dependencies, as specified in the project's package.json, required to run the Jest unit tests for the yFiles for HTML application.

```Shell
npm install
```

--------------------------------

### Example HTML Markup for Labels

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/style/html-label-style/index.html

This snippet provides an example of simple HTML markup that can be inserted into the label editor to render rich text labels, demonstrating basic bold text formatting.

```html
<strong>Hello World</strong>
```

--------------------------------

### Create Nodes with Default and Specific Locations

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-yfiles-basic-features/02-graph-element-creation/README.md

Demonstrates creating nodes using `graph.createNode()` for default placement and `graph.createNodeAt()` for specific coordinates.

```JavaScript
const node1 = graph.createNode()
const node2 = graph.createNodeAt(new Point(150, 15))
```

--------------------------------

### yFiles for HTML Text Rendering API Reference

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-style-implementation-label/02-using-text-utilities/README.md

Reference documentation for key classes and methods in yFiles for HTML related to advanced text rendering and layout, including font management and text placement utilities.

```APIDOC
Class: Font
  Description: Defines font properties (family, size) for text rendering.
  Constructor:
    new Font(properties: object)
      properties:
        fontFamily: string - The font family (e.g., 'Arial').
        fontSize: number - The font size in pixels.

Class: TextRenderSupport
  Description: Utility class for advanced text rendering features like measuring, wrapping, and trimming, extending SVG's native capabilities.
  Method: addText(textElement: SVGTextElement, text: string, font: Font)
    Description: Renders the given text into an SVG <text> element using the specified font.
    Parameters:
      textElement: SVGTextElement - The target SVG <text> element.
      text: string - The string content to render.
      font: Font - The Font object to apply.
```

--------------------------------

### Example Hierarchical Data for Implicit Grouping

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-graph-builder/05-implicit-grouping/index.html

This JSON-like snippet illustrates an example of the hierarchical data structure used for implicit grouping. It demonstrates how `ItemData` and `ChildData` types are applied, showing an initial item with a `path` and a nested item with multiple levels of `children`, reflecting a tree-like hierarchy.

```json
[
  { id: 'item0', path: '/root/dir1/dir1' },
  {
    id: 'item1',
    path: '/root/dir1/dir2',
    children: [
      {
        id: 'child1',
        children: [
          {
            id: 'child11',
            children: [{ id: 'child14' }, { id: 'child15' }]
          },
          { id: 'child12' }
        ]
      },
      { id: 'child2', children: [{ id: 'child13' }] }
    ]
  },
```

--------------------------------

### Example Hierarchical Data Structure for Implicit Grouping

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-graph-builder/05-implicit-grouping/README.md

Illustrates a sample JavaScript/TypeScript array literal representing hierarchical data for implicit grouping. This example demonstrates how ItemData and ChildData types are used to structure information with IDs, paths, and nested children, enabling the Graph Builder to infer group nodes.

```typescript
[
  { id: 'item0', path: '/root/dir1/dir1' },
  {
    id: 'item1',
    path: '/root/dir1/dir2',
    children: [
      {
        id: 'child1',
        children: [
          {
            id: 'child11',
            children: [{ id: 'child14' }, { id: 'child15' }]
          },
          { id: 'child12' }
        ]
      },
      { id: 'child2', children: [{ id: 'child13' }] }
    ]
  },

```

--------------------------------

### Apply Bridges to a GeneralPath

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-style-implementation-edge/10-bridge-support/index.html

Illustrates how to use the `BridgeManager` (obtained via context lookup) to add bridges to a `GeneralPath`, incorporating obstacle information into the edge visualization.

```typescript
private createPathWithBridges(
  path: GeneralPath,
  context: IRenderContext
): GeneralPath {
  const manager = context.lookup(BridgeManager)
  return manager ? manager.addBridges(context, path) : path
}
```

--------------------------------

### Debug WebdriverIO Tests with Browser Debug

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/testing/wdio/index.html

An example of a WebdriverIO statement to pause test execution and open the browser for interactive debugging, useful for observing simulated gestures.

```TypeScript
await browser.debug()
```

--------------------------------

### Serve Production Build of yFiles Vite Demo

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/vite/README.html

Serves the previously built production version of the yFiles for HTML Vite demo. This command is used to test the optimized and compiled application as it would run in a production environment.

```Shell
npm run serve
```

--------------------------------

### Create Node Labels with Explicit Text Provider

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-graph-builder/07-create-labels-sources/README.md

Shows how to explicitly set the `textProvider` property of a `LabelCreator` to transform the label text, for example, converting it to upper-case, after creating a label binding.

```javascript
const nodeData = [{ id: '2', name: 'Monster Inc' }]
const nodesSource = graphBuilder.createNodesSource(nodeData, 'id')

// create the text provider that will return the name of each node
const labelCreator = nodesSource.nodeCreator.createLabelBinding()
labelCreator.textProvider = (data): string => data.name.toUpperCase()
```

--------------------------------

### Initialize and Configure BridgeManager

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-style-implementation-edge/10-bridge-support/index.html

Demonstrates how to instantiate `BridgeManager`, assign the `GraphComponent`, and add a `GraphObstacleProvider` to enable bridge rendering for graph elements.

```typescript
const bridgeManager = new BridgeManager()
bridgeManager.canvasComponent = graphComponent
bridgeManager.addObstacleProvider(new GraphObstacleProvider())
```

--------------------------------

### Example Hierarchical Data for TreeBuilder (JSON)

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-graph-builder/13-tree-builder/index.html

Illustrates a sample JSON data structure representing an organization chart, suitable for processing by `TreeBuilder`. It features a recursive 'colleagues' property for nested entries.

```JSON
{
  "position": "Chief Executive Officer",
  "name": "Eric Joplin",
  "colleagues": [
    {
      "position": "Chief Executive Assistant",
      "name": "Gary Roberts",
      "colleagues": [
        {
          "position": "Senior Executive Assistant",
          "name": "Alexander Burns"
        },
        {
          "position": "Junior Executive Assistant",
          "name": "Linda Newland"
        }
      ]
    },
    {
      "position": "Vice President of Production",
      "name": "Amy Kain",
      "colleagues": [
        {
          "position": "Production Supervisor",
          "name": "Kathy Maxwell"
        }
      ]
    }
  ]
}
```

--------------------------------

### HTML Markup for Label Content

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/style/html-label-style/README.md

An example of simple HTML markup that can be inserted into the yFiles label editor. This demonstrates how rich text content, such as bolded text, can be used within a custom HTML label style.

```HTML
<strong>Hello World</strong>
```

--------------------------------

### Create Multiple CustomPortStyle Instances with Different Sizes

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-style-implementation-port/02-port-size/README.md

This example illustrates how to instantiate `CustomPortStyle` with various `size` values, showcasing the flexibility to create distinct port styles (default, large, small). It then demonstrates applying one of these custom styles (`smallPortStyle`) to a newly added port on the graph, specifying its owner and location parameter.

```typescript
const defaultPortStyle = new CustomPortStyle()
const largePortStyle = new CustomPortStyle(10)
const smallPortStyle = new CustomPortStyle(4)

graph.addPort({
  owner: owner,
  locationParameter: FreeNodePortLocationModel.CENTER,
  style: smallPortStyle
})
```

--------------------------------

### Get BridgeManager Obstacle Hash for Caching

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-style-implementation-edge/10-bridge-support/index.html

Demonstrates how to retrieve a hash code from `BridgeManager` that represents the current obstacle locations, useful for caching and detecting changes in obstacle configurations.

```typescript
private getObstacleHash(context: IRenderContext): number {
  const manager = context.lookup(BridgeManager)
  return manager ? manager.getObstacleHash(context) : 42
}
```

--------------------------------

### Run yFiles Web Worker Demo Locally

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/loading/webworker-webpack/README.md

This command starts a local development server to run the yFiles Web Worker demo. After the server is active, the demo can be accessed by opening 'dist/index.html' in a web browser.

```Shell
npm run serve
```

--------------------------------

### yFiles for HTML Core Interfaces for Custom Arrows

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-style-implementation-edge/12-custom-arrow/index.html

Documentation for key yFiles for HTML interfaces and classes used in implementing custom arrow visualizations, including `IArrow`, `IVisualCreator`, and related types.

```APIDOC
IArrow Interface:
  Description: Defines methods and properties for custom arrow implementations.
  Methods:
    getVisualCreator(edge: IEdge, atSource: boolean, anchor: Point, direction: Point): IVisualCreator
      Description: Returns the IVisualCreator implementation for the arrow's visualization.
      Parameters:
        edge: IEdge - The edge the arrow belongs to.
        atSource: boolean - True if the arrow is at the source end, false if at the target end.
        anchor: Point - The anchor point of the arrow.
        direction: Point - The direction vector of the arrow.
      Returns: IVisualCreator - The visual creator for the arrow.
    getBoundsProvider(edge: IEdge, atSource: boolean, anchor: Point, direction: Point): IBoundsProvider
      Description: Returns the IBoundsProvider implementation for the arrow's bounds.
      Parameters:
        edge: IEdge - The edge the arrow belongs to.
        atSource: boolean - True if the arrow is at the source end, false if at the target end.
        anchor: Point - The anchor point of the arrow.
        direction: Point - The direction vector of the arrow.
      Returns: IBoundsProvider - The bounds provider for the arrow.
  Properties:
    length: number (read-only)
      Description: The total length of the arrow, used to shorten the edge path.
    cropLength: number (read-only)
      Description: The length by which the edge path should be cropped to position the arrow exactly at the node.

IVisualCreator Interface:
  Description: Defines the method for creating the visual representation of an element.
  Methods:
    createVisual(context: IRenderContext): SvgVisual
      Description: Creates and returns the SVG visual for the arrow.
      Parameters:
        context: IRenderContext - The rendering context.
      Returns: SvgVisual - The SVG visual element.

IBoundsProvider Interface:
  Description: Defines the method for providing the bounds of an element. (Implied by IArrow.getBoundsProvider)

IRenderContext Interface:
  Description: Provides context information for rendering operations. (Parameter type)

GeneralPath Class:
  Description: Represents a geometric path, used for defining shapes.
  Methods:
    moveTo(point: Point): void
    lineTo(point: Point): void
    createSvgPath(): SVGPathElement

Point Class:
  Description: Represents a 2D point with x and y coordinates.
  Properties:
    x: number
    y: number

SvgVisual Class:
  Description: A visual element that renders an SVG element. (Return type of createVisual)
```

--------------------------------

### Run and Build Angular Applications with CLI

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/toolkit/angular/src/index.html

Shows the standard Angular CLI commands for serving the application locally for development and building it for production deployment.

```Shell
ng serve
```

```Shell
ng build
```

--------------------------------

### yFiles for HTML IPortCandidateProvider Interface

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/input/portcandidateprovider/index.html

This API documentation describes the IPortCandidateProvider interface in yFiles for HTML, which allows customization of edge creation behavior. Implementations of this interface define how and where edges can be started or ended on graph elements, enabling custom logic for port candidates and diverse node connectivity rules.

```APIDOC
IPortCandidateProvider Interface:
  Description: An interface in yFiles for HTML that allows customization of edge creation behavior.
  Purpose: To define custom logic for determining valid port candidates for edges.
  Usage:
    - Implement this interface with custom logic.
    - Add the custom implementation as a decoration to the edge decorator of the graph.
  Behaviors Enabled (as demonstrated):
    - Red nodes: Cannot have any edges (neither start nor end).
    - Green nodes: Only allow edges to end at them if they originate from other green nodes.
    - Blue nodes: Provide a set of predefined ports; each port accepts only one edge. Occupied ports are visually indicated (e.g., gray).
    - Orange nodes: Provide dynamic port candidates, allowing edges to start and end anywhere inside the node when the Ctrl key is pressed.
```

--------------------------------

### Animate Organic Layout with yFiles for HTML

Source: https://github.com/yworks/yfiles-for-html-demos/blob/master/demos/tutorial-yfiles-basic-features/10-layout/README.md

This example shows how to apply an `OrganicLayout` with an animation using the `applyLayoutAnimated` method in yFiles for HTML. It also includes `LayoutExecutor.ensure()` to prevent build optimizers from removing necessary classes for the animation.

```javascript
// Ensure that the LayoutExecutor class is not removed by build optimizers
// It is needed for the 'applyLayoutAnimated' method in this demo.
LayoutExecutor.ensure() // doing this somewhere in your code should suffice

await graphComponent.applyLayoutAnimated({
  layout: new OrganicLayout(),
  animationDuration: '1s'
})
```