### Getting Started with Blazor.Diagrams Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/README.md Provides essential links for users to begin using Blazor.Diagrams. It includes direct links to the official documentation and a specific page for installation instructions. ```APIDOC Getting Started: - Documentation: https://blazor-diagrams.zhaytam.com/ - Installation: https://blazor-diagrams.zhaytam.com/documentation/installation ``` -------------------------------- ### Host Page Setup for Z.Blazor.Diagrams Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/docs/Diagram-Demo/README.md This snippet shows how to include the Z.Blazor.Diagrams CSS and JavaScript files in the Blazor host page (`Pages/_Host.cshtml`). It includes the main stylesheet, optional default styles, and the necessary script for the library to function correctly. ```html ``` -------------------------------- ### Install Stickyfill via Yarn Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/stickyfill/README.md Installs the Stickyfill library using Yarn. This is an alternative package manager for JavaScript projects. ```bash yarn add stickyfilljs ``` -------------------------------- ### Install Stickyfill via NPM Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/stickyfill/README.md Installs the Stickyfill library using the Node Package Manager (NPM). This is the recommended method for projects using NPM. ```bash npm install stickyfilljs --save ``` -------------------------------- ### Installation via Package Managers Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/jquery-scrollTo/README.md Demonstrates how to install the jQuery.scrollTo plugin using popular package managers like bower, npm, and composer. ```bash bower install jquery.scrollTo ``` ```bash npm install jquery.scrollTo ``` ```php php composer.phar require --prefer-dist flesler/jquery.scrollTo "*" ``` -------------------------------- ### Basic Sticky Element CSS Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/stickyfill/README.md Example CSS for creating a sticky element using both the native CSS property and the vendor-prefixed version for compatibility. ```css .sticky { position: -webkit-sticky; position: sticky; top: 0; } ``` -------------------------------- ### Ekko Lightbox Options and Events Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/examples/bs3.html This JavaScript example demonstrates how to configure Ekko Lightbox with various options and how to hook into its events. It shows setting `alwaysShowClose`, `onShown`, and `onNavigate` callbacks. ```javascript $(this).ekkoLightbox({ alwaysShowClose: true, onShown: function() { console.log('Checking our the events huh?'); }, onNavigate: function(direction, itemIndex) { console.log('Navigating ' + direction + '. Current item: ' + itemIndex); } }); ``` -------------------------------- ### NavigateTo Example Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/index.html Illustrates how to use the 'navigateTo' functionality of Ekko Lightbox, allowing direct navigation to a specific item within a gallery. This example shows how to trigger navigation to the third item (index 2) when the modal footer is clicked. ```javascript $(document).on('click', '[data-toggle="lightbox"][data-gallery="navigateTo"]', function(event) { event.preventDefault(); return $(this).ekkoLightbox({ onShown: function() { this.modal().on('click', '.modal-footer a', function(e) { e.preventDefault(); this.navigateTo(2); }.bind(this)); } }); }); ``` -------------------------------- ### Installation via CDN Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/jquery-scrollTo/README.md Provides CDN links for including the jQuery.scrollTo plugin in HTML documents, sourced from jsdelivr and cdnjs. ```html ``` ```html ``` -------------------------------- ### CSS Box-Sizing and Float Example Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/stickyfill/test/index.html Demonstrates the use of `box-sizing: border-box;` and `float: right;` for layout. This snippet is useful for creating responsive layouts where elements should occupy a specific portion of the container and float to the right. ```css div { box-sizing: border-box; width: 50%; float: right; border: 1em; } ``` -------------------------------- ### Ekko Lightbox HTML Structure Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/index.html An example of an anchor tag configured to trigger the Ekko Lightbox when clicked. It includes the necessary `data-toggle` attribute and a link to the image. ```html

``` -------------------------------- ### Programmatic Lightbox Opening Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/index.html Provides examples of how to programmatically trigger the Ekko Lightbox, either by simulating a click on an element or by directly calling the plugin on a selected element. This is useful for opening the lightbox based on specific application logic. ```javascript $('#open-image').click(function (e) { e.preventDefault(); $(this).ekkoLightbox(); }); $('#open-youtube').click(function (e) { e.preventDefault(); $(this).ekkoLightbox(); }); ``` -------------------------------- ### Using Open Iconic SVG Sprite Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/docs/Diagram-Demo/wwwroot/css/open-iconic/README.md Illustrates the usage of Open Iconic's SVG sprite for efficient icon display. This method allows multiple icons to be loaded with a single request and provides examples for styling and coloring icons using CSS. ```html ``` ```css .icon { width: 16px; height: 16px; } ``` ```css .icon-account-login { fill: #f00; } ``` -------------------------------- ### Code Snippet Formatting Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/index.html This snippet demonstrates a client-side script for formatting code blocks, likely used for displaying code examples within the documentation. It retrieves HTML content from a hidden element and formats it for display. ```javascript anchors.options.placement = 'left'; anchors.add('h3'); $('code[data-code]').each(function() { var $code = $(this), $pair = $('div[data-code="'+$code.data('code')+'"]'); $code.hide(); var text = $code.text($pair.html()).html().trim().split("\n"); var indentLength = text[text.length - 1].match(/^\s+/) indentLength = indentLength ? indentLength[0].length : 24; var indent = ''; for(var i = 0; i < indentLength; i++) indent += ' ' if($code.data('trim') == 'all') { for (var i = 0; i < text.length; i++) text[i] = text[i].trim(); } else { for (var i = 0; i < text.length; i++) text[i] = text[i].replace(indent, ' ').replace(' ', ''); } text = text.join("\n"); $code.html(text).show(); }); ``` -------------------------------- ### CSS Border Property Example (Relative) Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/stickyfill/test/index.html Shows how to apply a border with a relative unit (em) to a section element. This is useful for creating visual separation or emphasis on diagram components. ```css section { border: 1.5em; } ``` -------------------------------- ### Using Open Iconic SVG Sprite Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/docs/Layouts/wwwroot/css/open-iconic/README.md Illustrates the usage of Open Iconic's SVG sprite for efficient icon display. This method allows multiple icons to be loaded with a single request and provides examples for styling and coloring icons using CSS. ```html ``` ```css .icon { width: 16px; height: 16px; } ``` ```css .icon-account-login { fill: #f00; } ``` -------------------------------- ### Displaying a Diagram in Blazor Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/docs/Diagram-Demo/README.md This Razor component (`Pages/Diagrams.razor`) demonstrates how to render the `DiagramCanvas` component. It requires setting up a `CascadingValue` for the `Diagram` instance and ensuring the parent container has defined dimensions (e.g., using viewport units) for proper rendering. ```razor @using Blazor.Diagrams.Core @using Blazor.Diagrams.Core.Geometry @using Blazor.Diagrams.Core.Models @using Blazor.Diagrams.Components

``` -------------------------------- ### CSS Sticky Positioning and Border Example Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/stickyfill/test/index.html Illustrates the use of `position: sticky;` with a border. Sticky positioning allows elements to behave as relative until they reach a certain scroll threshold, after which they become fixed. ```css div { position: relative; margin: 3em; border: 15px; } ``` -------------------------------- ### CSS Absolute Positioning Example Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/stickyfill/test/index.html Demonstrates absolute positioning for an element, setting its top and left offsets to zero and applying a white background. This is often used for overlays or specific element placement within a positioned ancestor. ```css p { position: absolute; top: 0; left: 0; background: white; } ``` -------------------------------- ### Diagram Canvas Styling Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/docs/Diagram-Demo/README.md This CSS snippet is crucial for ensuring the `DiagramCanvas` component renders correctly by making it occupy all available space within its parent container. It uses `calc()` to account for potential fixed headers or footers. ```css /* make sure DiagramCanvas takes up all of parent's space */ .diagram-container { width: 100%; height: calc(100% - 52px); } ``` -------------------------------- ### Blazor.start Configuration for Resource Loading Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/site/Site/wwwroot/index.html This C# configuration snippet demonstrates how to customize the `Blazor.start` function to handle resource loading, specifically for Brotli-compressed files. It includes logic to fetch compressed resources and decompress them using `BrotliDecode` when not running on localhost, optimizing load times for production environments. ```javascript Blazor.start({ loadBootResource: function (type, name, defaultUri, integrity) { if (type !== 'dotnetjs' && location.hostname !== 'localhost') { return (async function () { const response = await fetch(defaultUri + '.br',); if (!response.ok) { throw new Error(response.statusText); } const originalResponseBuffer = await response.arrayBuffer(); const originalResponseArray = new Int8Array(originalResponseBuffer); const decompressedResponseArray = BrotliDecode(originalResponseArray); const contentType = type === 'dotnetwasm' ? 'application/wasm' : 'application/octet-stream'; return new Response(decompressedResponseArray, { headers: { 'content-type': contentType } }); })(); } } }); ``` -------------------------------- ### Blazor.start Configuration with Brotli Decompression Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/Wasm/wwwroot/index.html This snippet configures Blazor.start to load boot resources. It includes a custom `loadBootResource` function that handles Brotli decompression for .NET resources when not running on localhost. This optimizes loading times by serving compressed assets. ```javascript Blazor.start({ loadBootResource: function (type, name, defaultUri, integrity) { if (type !== 'dotnetjs' && location.hostname !== 'localhost') { return (async function () { const response = await fetch(defaultUri + '.br',); if (!response.ok) { throw new Error(response.statusText); } const originalResponseBuffer = await response.arrayBuffer(); const originalResponseArray = new Int8Array(originalResponseBuffer); const decompressedResponseArray = BrotliDecode(originalResponseArray); const contentType = type === 'dotnetwasm' ? 'application/wasm' : 'application/octet-stream'; return new Response(decompressedResponseArray, { headers: { 'content-type': contentType } }); })(); } } }); ``` -------------------------------- ### Initialize Ekko Lightbox with Options Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/index.html Shows how to initialize the Ekko Lightbox plugin with custom options, including event handlers for 'onShown' and 'onNavigate'. This allows for custom behavior when the lightbox is displayed or when navigating between items. ```javascript $(document).ready(function ($) { $(document).on('click', '[data-toggle="lightbox"]:not([data-gallery="navigateTo"]):not([data-gallery="example-gallery-11"])', function(event) { event.preventDefault(); return $(this).ekkoLightbox({ onShown: function() { if (window.console) { return console.log('Checking our the events huh?'); } }, onNavigate: function(direction, itemIndex) { if (window.console) { return console.log('Navigating ' + direction + '. Current item: ' + itemIndex); } } }); }); }); ``` -------------------------------- ### Ekko Lightbox API Documentation Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/index.html Documentation for the Ekko Lightbox JavaScript plugin, detailing its initialization, options, data attributes, and events. ```APIDOC EkkoLightbox: Initialization: - Triggered by elements with `data-toggle="lightbox"`. - Event listener: `$(document).on('click', '[data-toggle="lightbox"]', function(event) { event.preventDefault(); $(this).ekkoLightbox(); });` Options: - Can be passed as an object to `ekkoLightbox()` or set as defaults using `$.fn.ekkoLightbox.defaults`. - `leftArrow`/`rightArrow` (html): HTML for navigation arrows. Defaults: `❮`/`❯`. - `wrapping` (boolean): Whether the gallery should loop. Default: `true`. - `width`/`height` (integer): Force the container width/height. Example: `data-width="700"`. - `maxWidth`/`maxHeight` (integer): Limit the container width/height. Example: `data-max-width="900"`. - `alwaysShowClose` (boolean): Always show the close button. Default: `false`. - `loadingMessage` (html): Custom HTML for the loading indicator. - `showArrows` (boolean): Disable the navigation overlay. Default: `true`. Data Attributes: - `data-remote` (string): Specify the content URL if `href` is not used. - `data-gallery` (string): Group elements into a gallery. Example: `data-gallery="my-gallery"`. - `data-type` (string): Force lightbox mode (image, youtube, vimeo). Example: `data-type="youtube"`. - `data-disable-external-check` (boolean): Force loading into an iframe. Events: - `onContentLoaded`: Fired when content is fully loaded. - `onNavigate`: Fired before navigating galleries. Receives `direction` and `itemIndex`. - `onShow`, `onShown`, `onHide`, `onHidden`: Inherited from Bootstrap's modal events. ``` -------------------------------- ### Initialize Ekko Lightbox Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/index.html This JavaScript snippet demonstrates how to initialize the Ekko Lightbox plugin by listening for click events on elements with the `data-toggle="lightbox"` attribute. ```javascript $(document).on('click', '[data-toggle="lightbox"]', function(event) { event.preventDefault(); $(this).ekkoLightbox(); }); ``` -------------------------------- ### Basic HTML Structure for Lightbox Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/examples/bs3.html This HTML demonstrates the basic structure required to trigger Ekko Lightbox. An anchor tag with `data-toggle="lightbox"` and an `href` pointing to the image source is used. A nested image tag displays a thumbnail. ```html

``` -------------------------------- ### Bootstrap Documentation Link Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/examples/bs3.html A simple HTML anchor tag linking to the official Bootstrap documentation. ```html Bootstrap Docs ``` -------------------------------- ### Gallery of Videos Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/index.html Creates a gallery containing multiple video links. ```html

``` -------------------------------- ### Image Gallery with Ekko Lightbox Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/examples/bs3.html This HTML snippet illustrates how to create an image gallery using Ekko Lightbox. By adding `data-gallery` with a common name to multiple anchor tags, users can navigate between images within the lightbox. ```html

``` -------------------------------- ### Ekko Lightbox Initialization and Events Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/examples/bs3.html This JavaScript code initializes Ekko Lightbox for elements with `data-toggle="lightbox"`. It includes event handlers for `onShown` and `onNavigate` to log messages to the console, demonstrating how to interact with the lightbox's lifecycle. It also shows how to programmatically trigger the lightbox. ```javascript $(document).ready(function ($) { $(document).on('click', '["data-toggle"="lightbox"]:not(["data-gallery"="navigateTo"])', function (event) { event.preventDefault(); return $(this).ekkoLightbox({ onShown: function () { if (window.console) { return console.log('Checking our the events huh?'); } }, onNavigate: function (direction, itemIndex) { if (window.console) { return console.log('Navigating ' + direction + '. Current item: ' + itemIndex); } } }); }); $('#open-image').click(function (e) { e.preventDefault(); $(this).ekkoLightbox(); }); $('#open-youtube').click(function (e) { e.preventDefault(); $(this).ekkoLightbox(); }); }); ``` -------------------------------- ### Stickyfill API Documentation Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/stickyfill/README.md Comprehensive documentation for the Stickyfill JavaScript API, covering methods for adding, removing, and refreshing sticky elements. ```APIDOC Stickyfill: addOne(element) Adds the element as a sticky. Returns new Sticky instance associated with the element. If there’s a sticky associated with the element, returns existing Sticky instance instead. Parameters: element: HTMLElement or iterable element list (NodeList, jQuery collection, etc.). First element of the list is used. add(elementList) Adds the elements as stickies. Skips the elements that have stickies associated with them. Returns an array of Sticky instances associated with the elements (both existing and new ones). Parameters: elementList: iterable element list (NodeList, jQuery collection, etc.) or single HTMLElement. refreshAll() Refreshes all existing stickies, updates their parameters and positions. All stickies are automatically refreshed after window resizes and device orientations changes. Call this method manually in case automatic detection fails. removeOne(element) Removes sticky associated with the element. Parameters: element: HTMLElement or iterable element list (NodeList, jQuery collection, etc.). First element of the list is used. remove(elementList) Removes stickies associated with the elements in the list. Parameters: elementList: iterable element list (NodeList, jQuery collection, etc.) or single HTMLElement. ``` -------------------------------- ### Stickyfill API Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/stickyfill/README.md Provides methods for managing sticky elements and accessing sticky instances. ```APIDOC Stickyfill.removeAll() - Removes all existing stickies. Stickyfill.forceSticky() - Force-enables the polyfill, even if the browser supports 'position: sticky' natively. Stickyfill.stickies - Array of existing Sticky instances. ``` -------------------------------- ### Ekko Lightbox Options Configuration Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/index.html Demonstrates how to pass options to the Ekko Lightbox plugin programmatically, including event handlers like `onShown` and `onNavigate`. ```javascript $(this).ekkoLightbox({ alwaysShowClose: true, onShown: function() { console.log('Checking our the events huh?'); }, onNavigate: function(direction, itemIndex) { console.log('Navigating '+direction+'. Current item: '+itemIndex); } }); ``` -------------------------------- ### CSS Box Sizing and Layout Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/stickyfill/test/index.html Demonstrates the use of box-sizing, top, margin, and border properties in CSS for layout control. This snippet is static and illustrates a common CSS pattern. ```css div { box-sizing: border-box; margin: 3em; border: 5px; } ``` -------------------------------- ### QuikGraph Library API Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/docs/Layouts/README.md Details the fundamental data structures and algorithms provided by the QuikGraph library for .NET. ```APIDOC QuikGraph Library Overview: Core Data Structures: - AdjacencyGraph: Represents a directed graph using adjacency lists. - AdjacencyBipolarGraph: Represents an undirected graph. - Edge: Represents an edge connecting two vertices. Core Interfaces: - IGraph: Base interface for graph structures. - IMutableGraph: Interface for graphs that can be modified. - ITree: Interface for tree structures. Algorithms: - Various graph traversal algorithms (BFS, DFS). - Shortest path algorithms (Dijkstra, Bellman-Ford). - Minimum spanning tree algorithms (Prim, Kruskal). Key Methods: - AddVertex(TVertex vertex): Adds a vertex to the graph. - AddEdge(TEdge edge): Adds an edge to the graph. - Vertices: Collection of all vertices in the graph. - Edges: Collection of all edges in the graph. - OutEdges(TVertex vertex): Returns outgoing edges from a vertex. - InEdges(TVertex vertex): Returns incoming edges to a vertex. Dependencies: - .NET Framework / .NET Core. Usage Example: var graph = new AdjacencyGraph>(); graph.AddVertex(1); graph.AddVertex(2); graph.AddEdge(new Edge(1, 2)); ``` -------------------------------- ### Ekko Lightbox API Documentation Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/examples/bs3.html This section details the configuration options and events available for Ekko Lightbox. It covers options passed to the Bootstrap modal, custom options like `leftArrow`, `rightArrow`, `alwaysShowClose`, `loadingMessage`, `showArrows`, and per-element options such as `remote`, `gallery`, and `type`. It also lists the available events like `onContentLoaded`, `onNavigate`, and inherited modal events. ```APIDOC Ekko Lightbox API: Configuration Options: - Passed to Bootstrap modal (e.g., title, footer, remote). - Custom options: - leftArrow / rightArrow (html): Default arrows for navigation. - width / height (integer): Force lightbox dimensions. - alwaysShowClose (boolean): Always display the close button. - loadingMessage (html): Custom loading indicator. - showArrows (boolean): Control navigation overlay visibility. Per-Element Options: - data-remote (string): Specify content URL if href is not used. - data-gallery (string): Group elements for gallery navigation. - data-type (string): Force content type (image, youtube, vimeo). Events: - onContentLoaded: Fired when content is loaded. - onNavigate: Fired before gallery navigation. - onShow / onShown / onHide / onHidden: Inherited from Bootstrap modal. Usage Example with Options: $(this).ekkoLightbox({ alwaysShowClose: true, onShown: function() { console.log('Lightbox shown'); }, onNavigate: function(direction, itemIndex) { console.log('Navigated: ' + direction); } }); Usage Example with Data Attributes:

``` -------------------------------- ### Include Stickyfill ES5 Script Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/stickyfill/README.md Demonstrates how to include the minified ES5 production script of Stickyfill in an HTML page. This is for broader browser compatibility. ```html ``` -------------------------------- ### Include Stickyfill ES6 Module Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/stickyfill/README.md Provides the direct URL to the ES6 module version of the Stickyfill script, suitable for projects that support ES6 modules. ```html ``` -------------------------------- ### Blazor.Diagrams NuGet Packages Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/README.md Lists the core NuGet packages for Blazor.Diagrams, including Core, the main package, and Algorithms. It provides links to the NuGet package pages and download statistics. ```APIDOC Z.Blazor.Diagrams.Core: Version: [![NuGet](https://img.shields.io/nuget/v/Z.Blazor.Diagrams.Core.svg)](https://www.nuget.org/packages/Z.Blazor.Diagrams.Core) Download: [![Nuget](https://img.shields.io/nuget/dt/Z.Blazor.Diagrams.Core.svg)](https://www.nuget.org/packages/Z.Blazor.Diagrams.Core) Z.Blazor.Diagrams: Version: [![NuGet](https://img.shields.io/nuget/v/Z.Blazor.Diagrams.svg)](https://www.nuget.org/packages/Z.Blazor.Diagrams) Download: [![Nuget](https://img.shields.io/nuget/dt/Z.Blazor.Diagrams.svg)](https://www.nuget.org/packages/Z.Blazor.Diagrams) Z.Blazor.Diagrams.Algorithms: Version: [![NuGet](https://img.shields.io/nuget/v/Z.Blazor.Diagrams.Algorithms.svg)](https://www.nuget.org/packages/Z.Blazor.Diagrams.Algorithms) Download: [![Nuget](https://img.shields.io/nuget/dt/Z.Blazor.Diagrams.Algorithms.svg)](https://www.nuget.org/packages/Z.Blazor.Diagrams.Algorithms) ``` -------------------------------- ### Initialize Ekko Lightbox Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/examples/bs3.html This JavaScript snippet shows how to initialize Ekko Lightbox by listening for clicks on elements with the `data-toggle="lightbox"` attribute. It prevents the default action and calls the `ekkoLightbox()` method. ```javascript $(document).on('click', '[data-toggle="lightbox"]', function(event) { event.preventDefault(); $(this).ekkoLightbox(); }); ``` -------------------------------- ### Ekko Lightbox NavigationTo Functionality Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/examples/bs3.html This JavaScript snippet demonstrates the `navigateTo` functionality of Ekko Lightbox. It sets up a click handler for elements with `data-toggle="lightbox"` and `data-gallery="navigateTo"`. When the lightbox is shown, it attaches a click listener to modal footer links to programmatically navigate to a specific item within the gallery. ```javascript $(document).on('click', '["data-toggle"="lightbox"]["data-gallery"="navigateTo"]', function (event) { event.preventDefault(); return $(this).ekkoLightbox({ onShown: function () { this.modal().on('click', '.modal-footer a', function (e) { e.preventDefault(); this.navigateTo(2); }.bind(this)); } }); }); ``` -------------------------------- ### Applying GraphShape Layout Algorithm Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/docs/Layouts/README.md Illustrates how to apply a layout algorithm from the GraphShape library to a QuikGraph graph. This step positions the nodes according to the chosen algorithm. ```C# // Assuming QuikGraph.IMutableGraph and GraphShape.ILayoutAlgorithm exist // Assuming GraphShape.FruchtermanReingoldLayout> as an example algorithm public static void ApplyGraphShapeLayout(IMutableGraph> graph) { // Example: Using Fruchterman-Reingold layout var layout = new GraphShape.FruchtermanReingoldLayout>(graph); layout.Initialize(); layout.Compute(); // The layout object now contains position information for each vertex. // You would typically iterate through graph.Vertices and update their positions. foreach (var vertex in graph.Vertices) { // Assuming NodeModel has Position property like PointF or similar // vertex.Position = layout.GetPosition(vertex); } } ``` -------------------------------- ### Open Iconic with Bootstrap Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/docs/Diagram-Demo/wwwroot/css/open-iconic/README.md Provides instructions for integrating Open Iconic icons with the Bootstrap framework. It includes the necessary stylesheet link and the HTML structure for displaying icons using Bootstrap's conventions. ```html ``` ```html ``` -------------------------------- ### Apply Stickyfill Polyfill with jQuery Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/stickyfill/README.md Demonstrates applying the Stickyfill polyfill to elements selected using jQuery. This integrates seamlessly with jQuery-based projects. ```javascript var elements = $('.sticky'); Stickyfill.add(elements); ``` -------------------------------- ### Open Iconic with Bootstrap Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/docs/Layouts/wwwroot/css/open-iconic/README.md Provides instructions for integrating Open Iconic icons with the Bootstrap framework. It includes the necessary stylesheet link and the HTML structure for displaying icons using Bootstrap's conventions. ```html ``` ```html ``` -------------------------------- ### Code Highlighting and Formatting Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/examples/bs3.html This JavaScript code is designed to handle the display of code snippets. It iterates through `code[data-code]` elements, retrieves associated HTML content from a corresponding `div[data-code]`, and then formats it for display. It includes options for trimming whitespace and handling indentation. ```javascript $('code[data-code]').each(function() { var $code = $(this), $pair = $('div[data-code="'+$code.data('code')+'"]'); $code.hide(); var text = $code.text($pair.html()).html().trim().split("\n"); var indentLength = text[text.length - 1].match(/^\s+/) indentLength = indentLength ? indentLength[0].length : 24; var indent = ''; for(var i = 0; i < indentLength; i++) indent += ' '; if($code.data('trim') == 'all') { for (var i = 0; i < text.length; i++) text[i] = text[i].trim(); } else { for (var i = 0; i < text.length; i++) text[i] = text[i].replace(indent, ' ').replace(' ', ''); } text = text.join("\n"); $code.html(text).show(); }); ``` -------------------------------- ### Sticky Class Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/stickyfill/README.md Represents an individual sticky element. Allows direct instantiation and management of sticky behavior. ```APIDOC Stickyfill.Sticky(element) - Constructor for the Sticky class. - Parameters: - element: The DOM element to make sticky. - Throws an error if a sticky is already bound to the element. Sticky.refresh() - Refreshes the sticky, updating its parameters and position. Sticky.remove() - Removes the sticky and restores the element to its original state. ``` ```js const sticky = new Stickyfill.Sticky(element); ``` -------------------------------- ### Open Iconic with Foundation Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/docs/Diagram-Demo/wwwroot/css/open-iconic/README.md Details the integration of Open Iconic icons with the Foundation framework. It specifies the required stylesheet and the HTML markup for implementing icons within a Foundation project. ```html ``` ```html ``` -------------------------------- ### Blazor Diagram to QuikGraph Conversion Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/docs/Layouts/README.md Demonstrates the process of converting Blazor Diagram models into a format compatible with QuikGraph for layout processing. This involves mapping nodes and edges between the two libraries. ```C# // Assuming Z.Blazor.Diagram.NodeModel and Z.Blazor.Diagram.LinkModel exist // Assuming QuikGraph.IMutableGraph and related types exist public static IMutableGraph> ConvertToQuikGraph(Diagram diagram) { var graph = new QuikGraph.AdjacencyGraph>(); // Add nodes foreach (var node in diagram.Nodes) { graph.AddVertex(node); } // Add edges foreach (var link in diagram.Links) { var sourceNode = diagram.Nodes.FirstOrDefault(n => n.Id == link.SourceId); var targetNode = diagram.Nodes.FirstOrDefault(n => n.Id == link.TargetId); if (sourceNode != null && targetNode != null) { graph.AddEdge(new Edge(sourceNode, targetNode)); } } return graph; } ``` -------------------------------- ### Open Iconic Standalone Usage Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/docs/Diagram-Demo/wwwroot/css/open-iconic/README.md Explains how to use Open Iconic icons independently without specific framework integration. This includes linking the default stylesheet and using the provided glyph attribute for icon display. ```html ``` ```html ``` -------------------------------- ### Blazor.Diagrams Asset Sizes and Activity Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/README.md Provides information on the file sizes of the JavaScript and CSS assets, as well as the last commit activity and license information for the Blazor.Diagrams project. ```APIDOC JavaScript Asset Size: ![GitHub file size in bytes](https://img.shields.io/github/size/Blazor-Diagrams/Blazor.Diagrams/src/Blazor.Diagrams/wwwroot/script.min.js) CSS Asset Size: ![GitHub file size in bytes](https://img.shields.io/github/size/Blazor-Diagrams/Blazor.Diagrams/src/Blazor.Diagrams/wwwroot/style.css) Activity: [![GitHub](https://img.shields.io/github/last-commit/Blazor-Diagrams/Blazor.Diagrams/develop)](https://github.com/Blazor-Diagrams/Blazor.Diagrams) License: [![GitHub](https://img.shields.io/github/license/Blazor-Diagrams/Blazor.Diagrams.svg)](https://github.com/Blazor-Diagrams/Blazor.Diagrams) ``` -------------------------------- ### Open Iconic with Foundation Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/docs/Layouts/wwwroot/css/open-iconic/README.md Details the integration of Open Iconic icons with the Foundation framework. It specifies the required stylesheet and the HTML markup for implementing icons within a Foundation project. ```html ``` ```html ``` -------------------------------- ### Open Iconic Standalone Usage Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/docs/Layouts/wwwroot/css/open-iconic/README.md Explains how to use Open Iconic icons independently without specific framework integration. This includes linking the default stylesheet and using the provided glyph attribute for icon display. ```html ``` ```html ``` -------------------------------- ### GraphShape Library API Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/docs/Layouts/README.md Provides an overview of key components and interfaces within the GraphShape library for graph layout algorithms. ```APIDOC GraphShape Library Overview: Core Interfaces: - IGraph: Represents a graph structure. - ILayoutAlgorithm: Interface for all layout algorithms. Common Layout Algorithms: - FruchtermanReingoldLayout: Implements the Fruchterman-Reingold force-directed algorithm. - FRLayout: Another variation of the Fruchterman-Reingold algorithm. - CircularLayout: Arranges vertices in a circular pattern. - ISOMLayout: Implements the ISOMLayout algorithm. Key Methods: - Initialize(): Initializes the layout algorithm with graph data. - Compute(): Executes the layout algorithm and calculates vertex positions. - GetPosition(TVertex vertex): Retrieves the calculated position for a given vertex. Dependencies: - Requires a compatible graph implementation (e.g., QuikGraph). Usage Example: var graph = new AdjacencyGraph>(); // ... add vertices and edges ... var layout = new FruchtermanReingoldLayout>(graph); layout.Initialize(); layout.Compute(); var position = layout.GetPosition(myNode); ``` -------------------------------- ### Programmatic Lightbox Call Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/index.html Opens the lightbox programmatically using JavaScript by calling the '.ekkoLightbox()' method on a clicked element. ```javascript $('#open-image').click(function (e) { e.preventDefault(); $(this).ekkoLightbox(); }); $('#open-youtube').click(function (e) { e.preventDefault(); $(this).ekkoLightbox(); }); ``` -------------------------------- ### CSS Div Styling Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/stickyfill/test/index.html Illustrates CSS styling for a div element with specified margins and a static border. ```css div { margin: 3em; border: 5px } ``` -------------------------------- ### SPA GitHub Pages Redirect Handling Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/site/Site/wwwroot/index.html This JavaScript code handles redirects for Single Page Applications hosted on GitHub Pages. It parses query parameters to reconstruct the correct URL and updates the browser's history using `window.history.replaceState` to avoid unnecessary page loads. This ensures that the SPA can correctly route the intended URL upon initialization. ```javascript (function (l) { if (l.search) { var q = {}; l.search.slice(1).split('&').forEach(function (v) { var a = v.split('='); q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&'); }); if (q.p !== undefined) { window.history.replaceState(null, null, l.pathname.slice(0, -1) + (q.p || '') + (q.q ? ('?' + q.q) : '') + l.hash ); } } }(window.location)) ``` -------------------------------- ### Using Open Iconic SVGs Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/docs/Diagram-Demo/wwwroot/css/open-iconic/README.md Demonstrates how to use individual SVG files for Open Iconic icons. This method involves referencing the SVG file directly in an `` tag and includes an `alt` attribute for accessibility. ```html

``` -------------------------------- ### Force Lightbox Type Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/lightbox/examples/bs3.html Shows how to explicitly set the type of content for the lightbox when the URL does not have a file extension or when you need to override the detected type. Allowed types include 'image', 'youtube', 'vimeo', 'instagram', 'video', 'url'. ```html [Click here for an image, but with no extension.](https://unsplash.it/1200/768?image=260) [This link is missing the type attribute, and will iframe the image.](https://unsplash.it/1200/768?image=261) [This link is linking to a YouTube video, but forcing an image.](http://www.youtube.com/watch?v=b0jqPvpn3sY) ``` -------------------------------- ### Apply Stickyfill Polyfill with JavaScript Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/samples/SharedDemo/wwwroot/plugins/stickyfill/README.md Shows how to apply the Stickyfill polyfill to elements selected using standard JavaScript `querySelectorAll`. The polyfill will manage their sticky behavior. ```javascript var elements = document.querySelectorAll('.sticky'); Stickyfill.add(elements); ``` -------------------------------- ### Using Open Iconic SVGs Source: https://github.com/blazor-diagrams/blazor.diagrams/blob/develop/docs/Layouts/wwwroot/css/open-iconic/README.md Demonstrates how to use individual SVG files for Open Iconic icons. This method involves referencing the SVG file directly in an `` tag and includes an `alt` attribute for accessibility. ```html

```