Release v.1.2.1 (#669)

piotrblaszczyk · lukasz-jazwa · web-flow · commit 693cbb67e5d6 · 2026-04-21T14:01:54.000+02:00
* Update * Fix for broken linking when starting drawing edge from target port (#666) * Fix for broken linking when starting drawing edge from target port * Changelog update * Add Templates section with Org Chart starter kit (#667) * Add Templates section with Org Chart starter kit * update changelog * undo readme changes * Update readme * Prepare to release 1.2.1 (#668) --------- Co-authored-by: Łukasz Jaźwa <lukasz.jazwa@synergycodes.com> Co-authored-by: lukasz-jazwa <70771062+lukasz-jazwa@users.noreply.github.com>
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.1] - 2026-04-21
+
+### Added
+
+- New [Templates](/docs/templates/) section — we're excited to introduce a dedicated space for production-grade starter kits curated and built by the ngDiagram team. Kicking it off with an interactive [Org Chart](https://github.com/synergycodes/ng-diagram-orgchart) starter kit featuring drag-and-drop reordering, expand/collapse subtrees, sidebar node editing, dynamic layouts, dark/light theme, minimap, and automatic tree layout powered by ELK.js. Clone it, explore the code, and use it as a launchpad for your own app! 🚀 ([#667](https://github.com/synergycodes/ng-diagram/pull/667))
+
+### Fixed
+
+- Fixed linking state not being cleared when edge drawing fails before creating a temporary edge (e.g., starting from a target port), which permanently blocked all subsequent edge drawing ([#666](https://github.com/synergycodes/ng-diagram/pull/666))
+
 ## [1.2.0] - 2026-04-20
 
 ### Added
@@ -216,7 +226,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Initial tagged release.
 
-[unreleased]: https://github.com/synergycodes/ng-diagram/compare/v1.2.0...HEAD
+[unreleased]: https://github.com/synergycodes/ng-diagram/compare/v1.2.1...HEAD
+[1.2.1]: https://github.com/synergycodes/ng-diagram/compare/v1.2.0...v1.2.1
 [1.2.0]: https://github.com/synergycodes/ng-diagram/compare/v1.1.2...v1.2.0
 [1.1.2]: https://github.com/synergycodes/ng-diagram/compare/v1.1.1...v1.1.2
 [1.1.1]: https://github.com/synergycodes/ng-diagram/compare/v1.1.0...v1.1.1
diff --git a/LICENSE b/LICENSE
@@ -186,7 +186,7 @@ APPENDIX: How to apply the Apache License to your work.
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-Copyright [yyyy] [name of copyright owner]
+Copyright 2025 Synergia Pro Sp. z o.o.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/README.md b/README.md
@@ -30,10 +30,20 @@ With ng-diagram, you can create:
 - **Circuit Diagrams**: Electronic schematics and technical drawings
 - **Custom Visualizations**: Any diagram type with custom node and edge templates
 
+See our [Templates](#-templates) for production-ready examples you can fork and customize.
+
 ## 🎮 Try the Demo
 
 See ng-diagram in action: **[Live Demo](https://synergycodes.github.io/ng-diagram-demo/)** | **[Source Code](https://github.com/synergycodes/ng-diagram-demo)**
 
+## 🧩 Templates
+
+Production-ready starter kits built with ng-diagram. Fork, customize, ship.
+
+| Template      | Description                                                                                                               | Demo                                                             | Source                                                        |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- |
+| **Org Chart** | Interactive organizational chart with drag-and-drop reordering, expand/collapse, ELK.js layout, dark/light theme, minimap | [Live Demo](https://synergycodes.github.io/ng-diagram-orgchart/) | [Source](https://github.com/synergycodes/ng-diagram-orgchart) |
+
 ## 🚀 Quick Start
 
 ### Installation
@@ -226,6 +236,7 @@ This project is licensed under the Apache 2.0 License - see the [LICENSE](https:
 - **Documentation**: [https://www.ngdiagram.dev/docs](https://www.ngdiagram.dev/docs)
 - **GitHub**: [https://github.com/synergycodes/ng-diagram](https://github.com/synergycodes/ng-diagram)
 - **NPM**: [https://www.npmjs.com/package/ng-diagram](https://www.npmjs.com/package/ng-diagram)
+- **MCP Server**: [@ng-diagram/mcp](https://www.npmjs.com/package/@ng-diagram/mcp) - let AI assistants search ng-diagram docs and API
 - **Website**: [https://www.ngdiagram.dev](https://www.ngdiagram.dev)
 
 ## 🆘 Support
diff --git a/apps/docs/astro.config.mjs b/apps/docs/astro.config.mjs
@@ -5,8 +5,8 @@ import starlightAutoSidebar from 'starlight-auto-sidebar';
 import starlightTypeDoc from 'starlight-typedoc';
 
 import angular from '@analogjs/astro-angular';
-import umami from '@yeskunall/astro-umami';
 import tailwindcss from '@tailwindcss/vite';
+import umami from '@yeskunall/astro-umami';
 
 const UMAMI_WEBSITE_ID = process.env.UMAMI_WEBSITE_ID || '';
 
@@ -80,11 +80,11 @@ export default defineConfig({
           autogenerate: { directory: 'examples' },
           collapsed: true,
         },
-        // TODO: Enable this section after deploying yjs demo app
-        // {
-        //   label: 'Demos',
-        //   link: '/demos/',
-        // },
+        {
+          label: 'Templates',
+          link: '/templates/',
+          badge: { text: 'New', variant: 'tip' },
+        },
         {
           label: 'API',
           collapsed: true,
diff --git a/apps/docs/public/assets/demos/yjs-collaboration-app.png b/apps/docs/public/assets/demos/yjs-collaboration-app.png
diff --git a/apps/docs/public/assets/templates/org-chart.png b/apps/docs/public/assets/templates/org-chart.png
diff --git a/apps/docs/src/components/content-tile/content-tile.astro b/apps/docs/src/components/content-tile/content-tile.astro
@@ -7,24 +7,32 @@ export type Props = {
   image: string;
   imageAlt?: string;
   openInNewTab?: boolean;
+  codeHref?: string;
 }
 
 export type ContentTile = Omit<Props, 'openInNewTab' | 'navigationTitle'>;
 
-const { title, description, href, navigationTitle, image, imageAlt = title, openInNewTab = false } = Astro.props;
+const { title, description, href, navigationTitle, image, imageAlt = title, openInNewTab = false, codeHref } = Astro.props;
 const targetAttr = openInNewTab ? '_blank' : undefined;
 const relAttr = openInNewTab ? 'noopener noreferrer' : undefined;
 ---
 
-<a href={href} class="content-tile" target={targetAttr} rel={relAttr}>
+<article class="content-tile">
   <div class="content-tile-image">
     <img src={image} alt={imageAlt} />
   </div>
   <div class="content-tile-content">
     <h4>{title}</h4>
     <p class="content-tile-description">{description}</p>
-    <span class="content-tile-link">
-      {`${navigationTitle} →`}
-    </span>
+    <div class="content-tile-actions">
+      <a href={href} class="content-tile-link" target={targetAttr} rel={relAttr}>
+        {`${navigationTitle} →`}
+      </a>
+      {codeHref && (
+        <a href={codeHref} class="content-tile-link" target={targetAttr} rel={relAttr}>
+          View code →
+        </a>
+      )}
+    </div>
   </div>
-</a>
+</article>
diff --git a/apps/docs/src/content/docs/changelog.mdx b/apps/docs/src/content/docs/changelog.mdx
@@ -12,6 +12,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.1] - 2026-04-21
+
+### Added
+
+- New [Templates](/docs/templates/) section — we're excited to introduce a dedicated space for production-grade starter kits curated and built by the ngDiagram team. Kicking it off with an interactive [Org Chart](https://github.com/synergycodes/ng-diagram-orgchart) starter kit featuring drag-and-drop reordering, expand/collapse subtrees, sidebar node editing, dynamic layouts, dark/light theme, minimap, and automatic tree layout powered by ELK.js. Clone it, explore the code, and use it as a launchpad for your own app! 🚀 ([#667](https://github.com/synergycodes/ng-diagram/pull/667))
+
+### Fixed
+
+- Fixed linking state not being cleared when edge drawing fails before creating a temporary edge (e.g., starting from a target port), which permanently blocked all subsequent edge drawing ([#666](https://github.com/synergycodes/ng-diagram/pull/666))
+
 ## [1.2.0] - 2026-04-20
 
 ### Added
@@ -221,7 +231,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Initial tagged release.
 
-[unreleased]: https://github.com/synergycodes/ng-diagram/compare/v1.2.0...HEAD
+[unreleased]: https://github.com/synergycodes/ng-diagram/compare/v1.2.1...HEAD
+[1.2.1]: https://github.com/synergycodes/ng-diagram/compare/v1.2.0...v1.2.1
 [1.2.0]: https://github.com/synergycodes/ng-diagram/compare/v1.1.2...v1.2.0
 [1.1.2]: https://github.com/synergycodes/ng-diagram/compare/v1.1.1...v1.1.2
 [1.1.1]: https://github.com/synergycodes/ng-diagram/compare/v1.1.0...v1.1.1
diff --git a/apps/docs/src/content/docs/demos/demos.ts b/apps/docs/src/content/docs/demos/demos.ts
diff --git a/apps/docs/src/content/docs/demos/index.mdx b/apps/docs/src/content/docs/demos/index.mdx
diff --git a/apps/docs/src/content/docs/templates/index.mdx b/apps/docs/src/content/docs/templates/index.mdx
@@ -0,0 +1,24 @@
+---
+title: Templates
+description: Production-ready starter kits curated and built by the ngDiagram team
+---
+
+import ContentTile from '../../../components/content-tile/content-tile.astro';
+import { templates } from './templates.ts';
+
+Curated starter kits built and maintained by the ngDiagram team. Each template is a production-grade reference implementation you can clone, extend, and ship. Complete with architecture, logic and opinionated defaults.
+
+<div class="content-tile-grid">
+  {templates.map((template) => (
+    <ContentTile
+      title={template.title}
+      description={template.description}
+      href={template.href}
+      codeHref={template.codeHref}
+      navigationTitle={'View Template'}
+      image={template.image}
+      imageAlt={template.imageAlt}
+      openInNewTab={true}
+    />
+  ))}
+</div>
diff --git a/apps/docs/src/content/docs/templates/templates.ts b/apps/docs/src/content/docs/templates/templates.ts
@@ -0,0 +1,13 @@
+import type { ContentTile } from '../../../components/content-tile/content-tile.astro';
+
+export const templates: ContentTile[] = [
+  {
+    title: 'Org Chart',
+    description:
+      'Interactive organizational chart. A starter kit for tree-based diagrams with drag-and-drop reordering, expand/collapse subtrees, sidebar node editing, horizontal/vertical layouts, dark/light theme, minimap, and automatic tree layout powered by ELK.js.',
+    href: 'https://synergycodes.github.io/ng-diagram-orgchart/',
+    codeHref: 'https://github.com/synergycodes/ng-diagram-orgchart',
+    image: '/docs/assets/templates/org-chart.png',
+    imageAlt: 'Screenshot of the Org Chart starter kit showing a tree of person cards with expand/collapse controls',
+  },
+];
diff --git a/apps/docs/src/styles/content-tiles.css b/apps/docs/src/styles/content-tiles.css
@@ -44,14 +44,25 @@
   margin: 0;
 }
 
+.content-tile-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: auto;
+}
+
 .content-tile-link {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--sl-color-text-accent);
-  margin-top: auto;
+  text-decoration: none;
+}
+
+.content-tile-link:hover {
+  text-decoration: underline;
 }
 
 .content-tile-grid {
diff --git a/packages/ng-diagram/projects/ng-diagram/README.md b/packages/ng-diagram/projects/ng-diagram/README.md
@@ -30,10 +30,20 @@ With ng-diagram, you can create:
 - **Circuit Diagrams**: Electronic schematics and technical drawings
 - **Custom Visualizations**: Any diagram type with custom node and edge templates
 
+See our [Templates](#-templates) for production-ready examples you can fork and customize.
+
 ## 🎮 Try the Demo
 
 See ng-diagram in action: **[Live Demo](https://synergycodes.github.io/ng-diagram-demo/)** | **[Source Code](https://github.com/synergycodes/ng-diagram-demo)**
 
+## 🧩 Templates
+
+Production-ready starter kits built with ng-diagram. Fork, customize, ship.
+
+| Template      | Description                                                                                                               | Demo                                                             | Source                                                        |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- |
+| **Org Chart** | Interactive organizational chart with drag-and-drop reordering, expand/collapse, ELK.js layout, dark/light theme, minimap | [Live Demo](https://synergycodes.github.io/ng-diagram-orgchart/) | [Source](https://github.com/synergycodes/ng-diagram-orgchart) |
+
 ## 🚀 Quick Start
 
 ### Installation
diff --git a/packages/ng-diagram/projects/ng-diagram/package.json b/packages/ng-diagram/projects/ng-diagram/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-diagram",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A robust Angular library for building interactive diagrams, node-based editors, and visual programming interfaces",
   "keywords": [
     "angular",
diff --git a/packages/ng-diagram/projects/ng-diagram/src/core/src/command-handler/commands/linking/__tests__/finish-linking-to-position.test.ts b/packages/ng-diagram/projects/ng-diagram/src/core/src/command-handler/commands/linking/__tests__/finish-linking-to-position.test.ts
@@ -64,6 +64,24 @@ describe('finishLinkingToPosition', () => {
     expect(mockFlowCore.applyUpdate).not.toHaveBeenCalled();
   });
 
+  it('should clear linking state when linking exists but temporaryEdge is null', async () => {
+    mockFlowCore.actionStateManager.linking = {
+      sourceNodeId: 'source-node',
+      sourcePortId: 'source-port',
+      temporaryEdge: null,
+    };
+
+    const command: FinishLinkingToPositionCommand = {
+      name: 'finishLinkingToPosition',
+      position: { x: 100, y: 200 },
+    };
+
+    await finishLinkingToPosition(mockCommandHandler, command);
+
+    expect(mockFlowCore.applyUpdate).not.toHaveBeenCalled();
+    expect(mockFlowCore.actionStateManager.clearLinking).toHaveBeenCalled();
+  });
+
   it('should create final edge to position when temporary edge exists', async () => {
     const position = { x: 150, y: 250 };
     const finalEdge = {
diff --git a/packages/ng-diagram/projects/ng-diagram/src/core/src/command-handler/commands/linking/__tests__/finish-linking.test.ts b/packages/ng-diagram/projects/ng-diagram/src/core/src/command-handler/commands/linking/__tests__/finish-linking.test.ts
@@ -87,6 +87,19 @@ describe('finishLinking', () => {
     expect(mockFlowCore.actionStateManager.clearLinking).not.toHaveBeenCalled();
   });
 
+  it('should clear linking state when linking exists but temporaryEdge is null', async () => {
+    mockFlowCore.actionStateManager.linking = {
+      sourceNodeId: 'source-node',
+      sourcePortId: 'source-port',
+      temporaryEdge: null,
+    };
+
+    await finishLinking(mockCommandHandler, { name: 'finishLinking', position: { x: 0, y: 0 } });
+
+    expect(mockFlowCore.applyUpdate).toHaveBeenCalledWith({}, 'finishLinking');
+    expect(mockFlowCore.actionStateManager.clearLinking).toHaveBeenCalled();
+  });
+
   it('should clear linking with noTarget reason when temporary edge has no target', async () => {
     const temporaryEdgeNoTarget: Edge = {
       ...mockTemporaryEdge,
diff --git a/packages/ng-diagram/projects/ng-diagram/src/core/src/command-handler/commands/linking/finish-linking-to-position.ts b/packages/ng-diagram/projects/ng-diagram/src/core/src/command-handler/commands/linking/finish-linking-to-position.ts
@@ -14,7 +14,12 @@ export const finishLinkingToPosition = async (
   const temporaryEdge = linking?.temporaryEdge;
   const { position } = command;
 
-  if (!temporaryEdge || !linking) {
+  if (!linking) {
+    return;
+  }
+
+  if (!temporaryEdge) {
+    commandHandler.flowCore.actionStateManager.clearLinking();
     return;
   }
 
diff --git a/packages/ng-diagram/projects/ng-diagram/src/core/src/command-handler/commands/linking/finish-linking.ts b/packages/ng-diagram/projects/ng-diagram/src/core/src/command-handler/commands/linking/finish-linking.ts
@@ -41,7 +41,12 @@ export const finishLinking = async (commandHandler: CommandHandler, command: Fin
   const linking = commandHandler.flowCore.actionStateManager.linking;
   const temporaryEdge = linking?.temporaryEdge;
 
-  if (!temporaryEdge || !linking) {
+  if (!linking) {
+    return;
+  }
+
+  if (!temporaryEdge) {
+    await clearTemporaryEdge(commandHandler);
     return;
   }
 
