AF-277 Docs Tailwind CSS

apps/docs/astro.config.mjs

@@ -6,6 +6,7 @@ import starlightTypeDoc from 'starlight-typedoc';
 
 import angular from '@analogjs/astro-angular';
 import umami from '@yeskunall/astro-umami';
+import tailwindcss from '@tailwindcss/vite';
 
 const UMAMI_WEBSITE_ID = process.env.UMAMI_WEBSITE_ID || '';
 
@@ -14,6 +15,9 @@ export default defineConfig({
   redirects: {
     '/': '/docs/intro/quick-start/',
   },
+  vite: {
+    plugins: [tailwindcss()],
+  },
   integrations: [
     umami({
       id: UMAMI_WEBSITE_ID,

apps/docs/package.json

@@ -28,23 +28,25 @@
     "@angular/platform-browser": "^19.2.7",
     "@angular/platform-browser-dynamic": "^19.2.10",
     "@angular/platform-server": "^19.2.7",
-    "ng-diagram": "workspace:*",
     "@astrojs/starlight": "^0.35.2",
     "@expressive-code/plugin-collapsible-sections": "^0.41.3",
     "@expressive-code/plugin-line-numbers": "^0.41.3",
+    "@tailwindcss/vite": "^4.1.16",
+    "@yeskunall/astro-umami": "~0.0.7",
     "astro": "^5.6.1",
-    "html-to-image": "1.11.11",
     "elkjs": "^0.10.0",
+    "html-to-image": "1.11.11",
+    "ng-diagram": "workspace:*",
     "rxjs": "~7.8.2",
     "sharp": "^0.34.2",
     "starlight-auto-sidebar": "^0.1.2",
     "starlight-typedoc": "^0.21.3",
+    "tailwindcss": "^4.1.16",
     "tslib": "^2.8.1",
     "typedoc": "^0.28.9",
     "typedoc-plugin-markdown": "^4.8.0",
     "web-worker": "^1.5.0",
-    "zone.js": "~0.15.0",
-    "@yeskunall/astro-umami": "~0.0.7"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",

apps/docs/src/components/angular/examples/custom-node/diagram.component.ts

@@ -52,7 +52,7 @@ export class DiagramComponent {
           tooltip: 'Node 1 is a custom node',
         },
         rotatable: true,
-        resizable: true,
+        resizable: false,
       },
       {
         id: '2',
@@ -64,7 +64,7 @@ export class DiagramComponent {
           tooltip: 'Node 2 is a custom node',
         },
         rotatable: true,
-        resizable: true,
+        resizable: false,
         angle: 30,
       },
     ],

apps/docs/src/components/angular/examples/tailwind-styling/diagram.component.ts

@@ -0,0 +1,82 @@
+import '@angular/compiler';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  initializeModel,
+  NgDiagramComponent,
+  NgDiagramNodeTemplateMap,
+  provideNgDiagram,
+  type NgDiagramConfig,
+} from 'ng-diagram';
+
+import { NodeComponent } from './node/node.component';
+
+enum NodeTemplateType {
+  CustomNodeType = 'customNodeType',
+}
+
+@Component({
+  imports: [NgDiagramComponent],
+  providers: [provideNgDiagram()],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="not-content diagram flex h-[30rem]">
+      <ng-diagram
+        [model]="model"
+        [config]="config"
+        [nodeTemplateMap]="nodeTemplateMap"
+      />
+    </div>
+  `,
+})
+export class DiagramComponent {
+  nodeTemplateMap = new NgDiagramNodeTemplateMap([
+    [NodeTemplateType.CustomNodeType, NodeComponent],
+  ]);
+
+  config = {
+    zoom: {
+      max: 3,
+    },
+  } satisfies NgDiagramConfig;
+
+  model = initializeModel({
+    nodes: [
+      {
+        id: '1',
+        position: { x: 80, y: 100 },
+        type: 'customNodeType',
+        data: {
+          name: 'Node 1',
+          description: 'This is Tailwind Node 1',
+          tooltip: 'Styles are applied with Tailwind CSS',
+        },
+        rotatable: true,
+        resizable: false,
+      },
+      {
+        id: '2',
+        position: { x: 450, y: 100 },
+        type: 'customNodeType',
+        data: {
+          name: 'Node 2',
+          description: 'This is Tailwind Node 2',
+          tooltip: 'Styles are applied with Tailwind CSS',
+        },
+        rotatable: true,
+        resizable: false,
+        angle: 30,
+      },
+    ],
+    edges: [
+      {
+        id: '1',
+        source: '1',
+        target: '2',
+        data: {},
+        sourcePort: 'port-right',
+        targetPort: 'port-left',
+        sourceArrowhead: 'ng-diagram-arrow',
+      },
+    ],
+  });
+}

apps/docs/src/components/angular/examples/tailwind-styling/node/node.component.html

@@ -0,0 +1,45 @@
+<ng-diagram-node-rotate-adornment />
+<ng-diagram-node-resize-adornment>
+  <div
+    class="flex flex-col p-3 rounded-lg border border-gray-300 dark:border-gray-600 w-full h-full text-xs"
+  >
+    <div class="flex justify-between items-center mb-1">
+      <div class="font-bold text-lg">
+        {{ node().data.name }}
+      </div>
+      <div>
+        <div
+          class="inline-block text-xs h-5 px-2 rounded-full text-white mb-2 leading-5"
+          [ngClass]="{
+            'bg-green-500': selectedState === 'Active',
+            'bg-red-500': selectedState === 'Error',
+            'bg-gray-400': selectedState === 'Inactive',
+          }"
+        >
+          {{ selectedState }}
+        </div>
+      </div>
+    </div>
+    <div class="text-xs cursor-help" title="{{ node().data.tooltip }}">
+      <div class="py-2">{{ node().data.description }}</div>
+      <form class="h-12 mt-2">
+        <label for="state-select" class="!mr-2">State:</label>
+        <select
+          id="state-select"
+          [value]="selectedState"
+          name="state"
+          (change)="onStateChange($event)"
+          class="min-w-[120px] px-2 py-1 rounded border border-gray-300 text-sm ml-2"
+        >
+          <option value="Active">Active</option>
+          <option value="Inactive">Inactive</option>
+          <option value="Error">Error</option>
+        </select>
+      </form>
+    </div>
+  </div>
+  <ng-diagram-port id="port-left" type="both" side="left" />
+  <ng-diagram-port id="port-top" type="both" side="top" />
+  <ng-diagram-port id="port-right" type="both" side="right" />
+  <ng-diagram-port id="port-bottom" type="both" side="bottom" />
+</ng-diagram-node-resize-adornment>

apps/docs/src/components/angular/examples/tailwind-styling/node/node.component.scss

@@ -0,0 +1,5 @@
+:host {
+  --mdc-chip-label-text-size: 10px;
+  --mat-form-field-container-vertical-padding: 8px;
+  --mat-form-field-container-height: 30px;
+}

apps/docs/src/components/angular/examples/tailwind-styling/node/node.component.ts

@@ -0,0 +1,45 @@
+import { CommonModule } from '@angular/common';
+import { Component, input, model } from '@angular/core';
+import {
+  NgDiagramNodeResizeAdornmentComponent,
+  NgDiagramNodeRotateAdornmentComponent,
+  NgDiagramNodeSelectedDirective,
+  NgDiagramPortComponent,
+  type NgDiagramNodeTemplate,
+  type Node,
+} from 'ng-diagram';
+
+type CustomDataType = {
+  name: string;
+  description: string;
+  tooltip: string;
+};
+
+@Component({
+  imports: [
+    NgDiagramNodeRotateAdornmentComponent,
+    NgDiagramPortComponent,
+    NgDiagramNodeResizeAdornmentComponent,
+    CommonModule,
+  ],
+  templateUrl: './node.component.html',
+  styleUrls: ['./node.component.scss'],
+  hostDirectives: [
+    { directive: NgDiagramNodeSelectedDirective, inputs: ['node'] },
+  ],
+  host: {
+    '[class.ng-diagram-port-hoverable-over-node]': 'true',
+    class: 'flex w-full h-full rounded-lg bg-white dark:bg-neutral-800',
+  },
+})
+export class NodeComponent implements NgDiagramNodeTemplate<CustomDataType> {
+  text = model<string>('');
+  node = input.required<Node<CustomDataType>>();
+
+  selectedState: string = 'Inactive';
+
+  onStateChange(event: Event) {
+    const selectElement = event.target as HTMLSelectElement;
+    this.selectedState = selectElement.value;
+  }
+}

apps/docs/src/components/angular/examples/tailwind-styling/tailwind-styling.astro

@@ -0,0 +1,5 @@
+---
+import { DiagramComponent } from './diagram.component';
+---
+
+<DiagramComponent client:only="angular" />

apps/docs/src/content/docs/examples/tailwind-styling.mdx

@@ -0,0 +1,17 @@
+---
+title: Tailwind CSS Example
+description: Example of how to use Tailwind CSS in ngDiagram
+sidebar:
+  order: 1
+  label: Tailwind CSS
+---
+
+import CodeViewer from '@components/code-viewer/code-viewer.astro';
+import TailwindStyling from '@examples/tailwind-styling/tailwind-styling.astro';
+
+This example demonstrates how to use Tailwind CSS in ngDiagram.
+
+<br />
+
+<TailwindStyling />
+<CodeViewer dirName="examples/tailwind-styling" />

apps/docs/src/styles/custom.css

@@ -1,8 +1,11 @@
+@import 'tailwindcss';
 @layer reset, starlight;
 @import 'ng-diagram/styles.css';
 @import '@angular/material/prebuilt-themes/deeppurple-amber.css';
 @import './content-tiles.css';
 
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
 @layer reset {
   * {
     margin: 0;