@utisha/graph-editor 1.0.4 → 1.0.6

package/lib/graph-editor.component.d.ts

@@ -1,7 +1,9 @@
-import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { EventEmitter, OnChanges, OnInit, SimpleChanges, Type } from '@angular/core';
 import { Graph, GraphEdge, GraphNode, Position } from './graph.model';
 import { ContextMenuEvent, GraphEditorConfig, NodeTypeDefinition, SelectionState, ValidationResult } from './graph-editor.config';
 import { SvgIconDefinition } from './icons/workflow-icons';
+import { NodeHtmlTemplateDirective, NodeSvgTemplateDirective, EdgeTemplateDirective, NodeTemplateContext, EdgeTemplateContext } from './template.directives';
+import { ResolvedTheme } from './theme.resolver';
 import * as i0 from "@angular/core";
 /**
  * Main graph editor component.
@@ -55,7 +57,7 @@ export declare class GraphEditorComponent implements OnInit, OnChanges {
         port: 'top' | 'bottom' | 'left' | 'right';
     } | null;
     showAttachmentPoints: import("@angular/core").WritableSignal<string | null>;
-    activeTool: import("@angular/core").WritableSignal<"hand" | "line">;
+    activeTool: import("@angular/core").WritableSignal<"line" | "hand">;
     private pendingEdge;
     previewLine: import("@angular/core").WritableSignal<{
         source: Position;
@@ -80,12 +82,17 @@ export declare class GraphEditorComponent implements OnInit, OnChanges {
         width: number;
         height: number;
     }>;
+    resolvedTheme: ResolvedTheme;
     shadowsEnabled: import("@angular/core").Signal<boolean>;
+    protected nodeHtmlTemplate: import("@angular/core").Signal<NodeHtmlTemplateDirective | undefined>;
+    protected nodeSvgTemplate: import("@angular/core").Signal<NodeSvgTemplateDirective | undefined>;
+    protected edgeTemplate: import("@angular/core").Signal<EdgeTemplateDirective | undefined>;
     selectedEdgeMidpoint: import("@angular/core").Signal<{
         edge: GraphEdge;
         x: number;
         y: number;
     } | null>;
+    private readonly hostEl;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;
@@ -110,6 +117,8 @@ export declare class GraphEditorComponent implements OnInit, OnChanges {
     applyLayout(direction?: 'TB' | 'LR'): Promise<void>;
     fitToScreen(padding?: number): void;
     zoomTo(level: number): void;
+    zoomIn(): void;
+    zoomOut(): void;
     getSelection(): SelectionState;
     onCanvasMouseDown(event: MouseEvent): void;
     onCanvasMouseMove(event: MouseEvent): void;
@@ -139,6 +148,8 @@ export declare class GraphEditorComponent implements OnInit, OnChanges {
         height: number;
     };
     getEdgePath(edge: GraphEdge): string;
+    /** Get the control point offset direction for a port (used by bezier path). */
+    private getPortControlOffset;
     getEdgeColor(edge: GraphEdge): string;
     getEdgeMarkerEnd(edge: GraphEdge): string | null;
     getEdgeMarkerStart(edge: GraphEdge): string | null;
@@ -168,6 +179,11 @@ export declare class GraphEditorComponent implements OnInit, OnChanges {
      * Used to render multiple path elements from a single path string.
      */
     splitIconPaths(pathData: string): string[];
+    /**
+     * Split node types into columns for the palette.
+     * When there are too many node types to fit vertically, creates additional columns.
+     */
+    getPaletteColumns(): NodeTypeDefinition[][];
     /**
      * Get the position for the node image (top-left corner of image).
      * Uses same positioning logic as icon but accounts for image dimensions.
@@ -223,6 +239,14 @@ export declare class GraphEditorComponent implements OnInit, OnChanges {
     private findClosestPort;
     private getPortWorldPosition;
     private findClosestPortForEdge;
+    /** Get the component type for a node (from NodeTypeDefinition.component, if set). */
+    getNodeComponent(node: GraphNode): Type<any> | null;
+    /** Build inputs map for ngComponentOutlet when rendering a node's custom component. */
+    getNodeComponentInputs(node: GraphNode): Record<string, any>;
+    /** Build the template context for custom node templates. */
+    getNodeTemplateContext(node: GraphNode): NodeTemplateContext;
+    /** Build the template context for custom edge templates. */
+    getEdgeTemplateContext(edge: GraphEdge): EdgeTemplateContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<GraphEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GraphEditorComponent, "graph-editor", never, { "config": { "alias": "config"; "required": true; }; "graph": { "alias": "graph"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "visualizationMode": { "alias": "visualizationMode"; "required": false; }; "overlayData": { "alias": "overlayData"; "required": false; }; }, { "graphChange": "graphChange"; "nodeAdded": "nodeAdded"; "nodeUpdated": "nodeUpdated"; "nodeRemoved": "nodeRemoved"; "edgeAdded": "edgeAdded"; "edgeUpdated": "edgeUpdated"; "edgeRemoved": "edgeRemoved"; "selectionChange": "selectionChange"; "validationChange": "validationChange"; "nodeClick": "nodeClick"; "nodeDoubleClick": "nodeDoubleClick"; "edgeClick": "edgeClick"; "edgeDoubleClick": "edgeDoubleClick"; "canvasClick": "canvasClick"; "contextMenu": "contextMenu"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GraphEditorComponent, "graph-editor", never, { "config": { "alias": "config"; "required": true; }; "graph": { "alias": "graph"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "visualizationMode": { "alias": "visualizationMode"; "required": false; }; "overlayData": { "alias": "overlayData"; "required": false; }; }, { "graphChange": "graphChange"; "nodeAdded": "nodeAdded"; "nodeUpdated": "nodeUpdated"; "nodeRemoved": "nodeRemoved"; "edgeAdded": "edgeAdded"; "edgeUpdated": "edgeUpdated"; "edgeRemoved": "edgeRemoved"; "selectionChange": "selectionChange"; "validationChange": "validationChange"; "nodeClick": "nodeClick"; "nodeDoubleClick": "nodeDoubleClick"; "edgeClick": "edgeClick"; "edgeDoubleClick": "edgeDoubleClick"; "canvasClick": "canvasClick"; "contextMenu": "contextMenu"; }, ["nodeHtmlTemplate", "nodeSvgTemplate", "edgeTemplate"], never, true, never>;
 }

package/lib/graph-editor.config.d.ts

@@ -207,10 +207,160 @@ export interface ContextMenuContext {
  * Theme configuration.
  */
 export interface ThemeConfig {
-    /** CSS custom property values */
+    /** CSS custom property values (applied to host element) */
     variables?: Record<string, string>;
     /** Enable drop shadows on nodes and edges (default: true) */
     shadows?: boolean;
+    /** Canvas theming */
+    canvas?: CanvasTheme;
+    /** Node theming */
+    node?: NodeTheme;
+    /** Edge theming */
+    edge?: EdgeTheme;
+    /** Port/attachment point theming */
+    port?: PortTheme;
+    /** Selection theming */
+    selection?: SelectionTheme;
+    /** Font configuration */
+    font?: FontTheme;
+    /** Toolbar & palette chrome theming */
+    toolbar?: ToolbarTheme;
+}
+/**
+ * Canvas visual theme.
+ */
+export interface CanvasTheme {
+    /** Canvas background color (default: '#f8f9fa') */
+    background?: string;
+    /** Grid pattern type (default: 'line') */
+    gridType?: 'line' | 'dot';
+    /** Grid line/dot color (default: '#e0e0e0') */
+    gridColor?: string;
+}
+/**
+ * Node visual theme.
+ */
+export interface NodeTheme {
+    /** Node background fill (default: 'white') */
+    background?: string;
+    /** Node border color (default: '#e2e8f0') */
+    borderColor?: string;
+    /** Node border width in px (default: 1.5) */
+    borderWidth?: number;
+    /** Node corner radius in px (default: 12) */
+    borderRadius?: number;
+    /** Border color when selected (default: selection.color) */
+    selectedBorderColor?: string;
+    /** Border width when selected in px (default: 2.5) */
+    selectedBorderWidth?: number;
+    /** Shadow color (default: 'rgba(0,0,0,0.08)') */
+    shadowColor?: string;
+    /** Label text color (default: '#1e293b') */
+    labelColor?: string;
+    /** Label font family (default: 'system-ui, -apple-system, sans-serif') */
+    labelFont?: string;
+    /**
+     * Per-type visual overrides. Keys are node type identifiers.
+     * @example { 'llm-call': { accentColor: '#1D6A96' } }
+     */
+    typeStyles?: Record<string, NodeTypeStyle>;
+}
+/**
+ * Per-node-type visual overrides.
+ */
+export interface NodeTypeStyle {
+    /** Node background for this type */
+    background?: string;
+    /** Node border color for this type */
+    borderColor?: string;
+    /** Accent/header background color */
+    accentColor?: string;
+    /** Accent/header text color */
+    accentTextColor?: string;
+}
+/**
+ * Edge visual theme.
+ */
+export interface EdgeTheme {
+    /** Edge stroke color (default: '#94a3b8') */
+    stroke?: string;
+    /** Edge stroke width in px (default: 2) */
+    strokeWidth?: number;
+    /** Edge stroke color when selected (default: selection.color) */
+    selectedStroke?: string;
+    /** Edge stroke width when selected in px (default: 2.5) */
+    selectedStrokeWidth?: number;
+    /** Arrow marker fill color (default: '#94a3b8') */
+    markerColor?: string;
+    /** Arrow marker fill color when selected (default: selection.color) */
+    selectedMarkerColor?: string;
+    /** Edge path routing algorithm (default: 'straight') */
+    pathType?: 'straight' | 'bezier' | 'step';
+}
+/**
+ * Port/attachment point visual theme.
+ */
+export interface PortTheme {
+    /** Port fill color (default: '#94a3b8') */
+    fill?: string;
+    /** Port border color (default: 'white') */
+    stroke?: string;
+    /** Port border width in px (default: 2) */
+    strokeWidth?: number;
+    /** Port radius in px (default: 6) */
+    radius?: number;
+    /** Port fill color on hover (default: '#2563eb') */
+    hoverFill?: string;
+    /** Port radius on hover in px (default: 8) */
+    hoverRadius?: number;
+}
+/**
+ * Selection visual theme.
+ */
+export interface SelectionTheme {
+    /** Primary selection color — also used as default for node/edge selected states (default: '#3b82f6') */
+    color?: string;
+    /** Box selection fill (default: 'rgba(59, 130, 246, 0.1)') */
+    boxFill?: string;
+    /** Box selection stroke (default: selection.color) */
+    boxStroke?: string;
+}
+/**
+ * Font theme.
+ */
+export interface FontTheme {
+    /** Primary font family (default: 'system-ui, -apple-system, sans-serif') */
+    family?: string;
+    /** Monospace font family (default: 'monospace') */
+    monoFamily?: string;
+}
+/**
+ * Toolbar & palette chrome theme.
+ * Controls the top toolbar, left palette, and edge direction selector.
+ */
+export interface ToolbarTheme {
+    /** Panel background (default: 'rgba(255, 255, 255, 0.95)') */
+    background?: string;
+    /** Panel border radius in px (default: 8) */
+    borderRadius?: number;
+    /** Panel box shadow (default: '0 2px 8px rgba(0, 0, 0, 0.1)') */
+    shadow?: string;
+    /** Button background (default: '#ffffff') */
+    buttonBackground?: string;
+    /** Button border color (default: '#e5e7eb') */
+    buttonBorderColor?: string;
+    /** Button text/icon color (default: '#4b5563') */
+    buttonTextColor?: string;
+    /** Button hover background (default: '#f9fafb') */
+    buttonHoverBackground?: string;
+    /** Button hover border & text color — matches selection.color by default */
+    buttonHoverAccent?: string;
+    /** Active (pressed) tool button background (default: selection.color) */
+    buttonActiveBackground?: string;
+    /** Active tool button text color (default: '#ffffff') */
+    buttonActiveTextColor?: string;
+    /** Divider line color between button groups (default: '#e5e7eb') */
+    dividerColor?: string;
 }
 /**
  * Palette configuration.

package/lib/template.directives.d.ts

@@ -0,0 +1,116 @@
+import { TemplateRef } from '@angular/core';
+import { GraphNode, GraphEdge } from './graph.model';
+import { NodeTypeDefinition } from './graph-editor.config';
+import * as i0 from "@angular/core";
+/**
+ * Context provided to node templates (both HTML and SVG).
+ *
+ * Usage:
+ * ```html
+ * <ng-template geNodeHtml let-ctx>
+ *   <div>{{ ctx.node.data.name }}</div>
+ * </ng-template>
+ * ```
+ */
+export interface NodeTemplateContext {
+    $implicit: {
+        /** The raw node data */
+        node: GraphNode;
+        /** The node type definition from config */
+        type: NodeTypeDefinition;
+        /** Whether this node is currently selected */
+        selected: boolean;
+        /** Current node width (respects resize) */
+        width: number;
+        /** Current node height (respects resize) */
+        height: number;
+    };
+}
+/**
+ * Context provided to edge templates.
+ *
+ * Usage:
+ * ```html
+ * <ng-template geEdge let-ctx>
+ *   <svg:path [attr.d]="ctx.path" stroke="red" />
+ * </ng-template>
+ * ```
+ */
+export interface EdgeTemplateContext {
+    $implicit: {
+        /** The raw edge data */
+        edge: GraphEdge;
+        /** Computed SVG path string */
+        path: string;
+        /** Whether this edge is currently selected */
+        selected: boolean;
+    };
+}
+/**
+ * Marks an `<ng-template>` as a custom HTML node renderer.
+ * Content is rendered inside an `<svg:foreignObject>` — write standard HTML/CSS.
+ *
+ * @example
+ * ```html
+ * <graph-editor [config]="config" [graph]="graph">
+ *   <ng-template geNodeHtml let-ctx>
+ *     <div class="my-node" [class.selected]="ctx.selected">
+ *       <div class="header">{{ ctx.type.label }}</div>
+ *       <div class="body">{{ ctx.node.data.name }}</div>
+ *     </div>
+ *   </ng-template>
+ * </graph-editor>
+ * ```
+ */
+export declare class NodeHtmlTemplateDirective {
+    templateRef: TemplateRef<NodeTemplateContext>;
+    static ngTemplateContextGuard(_dir: NodeHtmlTemplateDirective, _ctx: unknown): _ctx is NodeTemplateContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NodeHtmlTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NodeHtmlTemplateDirective, "ng-template[geNodeHtml]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Marks an `<ng-template>` as a custom SVG node renderer.
+ * Content is rendered inside an `<svg:g>` — use `svg:` prefixed elements.
+ *
+ * @example
+ * ```html
+ * <graph-editor [config]="config" [graph]="graph">
+ *   <ng-template geNodeSvg let-ctx>
+ *     <svg:rect [attr.width]="ctx.width" [attr.height]="ctx.height"
+ *               rx="8" fill="white" stroke="#ccc" />
+ *     <svg:text x="10" y="24">{{ ctx.node.data.name }}</svg:text>
+ *   </ng-template>
+ * </graph-editor>
+ * ```
+ *
+ * **Important:** All SVG elements inside the template MUST use the `svg:` prefix
+ * (e.g. `<svg:rect>`, `<svg:text>`, `<svg:g>`).
+ */
+export declare class NodeSvgTemplateDirective {
+    templateRef: TemplateRef<NodeTemplateContext>;
+    static ngTemplateContextGuard(_dir: NodeSvgTemplateDirective, _ctx: unknown): _ctx is NodeTemplateContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NodeSvgTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NodeSvgTemplateDirective, "ng-template[geNodeSvg]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Marks an `<ng-template>` as a custom edge renderer.
+ * Content is rendered inside an `<svg:g>` — use `svg:` prefixed elements.
+ * The library still handles the invisible hit-area and endpoint circles.
+ *
+ * @example
+ * ```html
+ * <graph-editor [config]="config" [graph]="graph">
+ *   <ng-template geEdge let-ctx>
+ *     <svg:path [attr.d]="ctx.path"
+ *               [attr.stroke]="ctx.selected ? 'blue' : 'gray'"
+ *               stroke-width="2" fill="none" />
+ *   </ng-template>
+ * </graph-editor>
+ * ```
+ */
+export declare class EdgeTemplateDirective {
+    templateRef: TemplateRef<EdgeTemplateContext>;
+    static ngTemplateContextGuard(_dir: EdgeTemplateDirective, _ctx: unknown): _ctx is EdgeTemplateContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EdgeTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<EdgeTemplateDirective, "ng-template[geEdge]", never, {}, {}, never, never, true, never>;
+}

package/lib/theme.resolver.d.ts

@@ -0,0 +1,78 @@
+import { ThemeConfig } from './graph-editor.config';
+/**
+ * Fully-resolved theme with no optional fields.
+ * Every value has a sensible default so templates can reference without null-checking.
+ */
+export interface ResolvedTheme {
+    shadows: boolean;
+    canvas: {
+        background: string;
+        gridType: 'line' | 'dot';
+        gridColor: string;
+    };
+    node: {
+        background: string;
+        borderColor: string;
+        borderWidth: number;
+        borderRadius: number;
+        selectedBorderColor: string;
+        selectedBorderWidth: number;
+        shadowColor: string;
+        labelColor: string;
+        labelFont: string;
+        typeStyles: Record<string, {
+            background?: string;
+            borderColor?: string;
+            accentColor?: string;
+            accentTextColor?: string;
+        }>;
+    };
+    edge: {
+        stroke: string;
+        strokeWidth: number;
+        selectedStroke: string;
+        selectedStrokeWidth: number;
+        markerColor: string;
+        selectedMarkerColor: string;
+        pathType: 'straight' | 'bezier' | 'step';
+    };
+    port: {
+        fill: string;
+        stroke: string;
+        strokeWidth: number;
+        radius: number;
+        hoverFill: string;
+        hoverRadius: number;
+    };
+    selection: {
+        color: string;
+        boxFill: string;
+        boxStroke: string;
+    };
+    font: {
+        family: string;
+        monoFamily: string;
+    };
+    toolbar: {
+        background: string;
+        borderRadius: number;
+        shadow: string;
+        buttonBackground: string;
+        buttonBorderColor: string;
+        buttonTextColor: string;
+        buttonHoverBackground: string;
+        buttonHoverAccent: string;
+        buttonActiveBackground: string;
+        buttonActiveTextColor: string;
+        dividerColor: string;
+    };
+}
+/**
+ * Resolves a partial ThemeConfig into a complete ResolvedTheme with all defaults filled.
+ */
+export declare function resolveTheme(theme?: ThemeConfig): ResolvedTheme;
+/**
+ * Applies resolved theme values as CSS custom properties on a host element.
+ * This enables consumer templates to use `var(--ge-*)` in their CSS.
+ */
+export declare function applyThemeCssProperties(host: HTMLElement, t: ResolvedTheme, userVars?: Record<string, string>): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utisha/graph-editor",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Configuration-driven visual graph editor for Angular 19+",
   "author": "Utisha",
   "license": "MIT",

package/public-api.d.ts

@@ -1,5 +1,8 @@
 export { GraphEditorComponent } from './lib/graph-editor.component';
 export type { Graph, GraphNode, GraphEdge, Position, NodeMetadata, EdgeMetadata, EdgeStyle, GraphMetadata } from './lib/graph.model';
-export type { GraphEditorConfig, NodesConfig, EdgesConfig, CanvasConfig, ValidationConfig, LayoutConfig, InteractionConfig, ThemeConfig, PaletteConfig, NodeTypeDefinition, PortConfig, PortDefinition, NodeConstraints, GridConfig, ZoomConfig, PanConfig, ValidationRule, ValidationError, LayoutOptions, ContextMenuConfig, ContextMenuItem, ContextMenuContext, SelectionState, ValidationResult, ContextMenuEvent } from './lib/graph-editor.config';
+export type { GraphEditorConfig, NodesConfig, EdgesConfig, CanvasConfig, ValidationConfig, LayoutConfig, InteractionConfig, ThemeConfig, PaletteConfig, NodeTypeDefinition, PortConfig, PortDefinition, NodeConstraints, GridConfig, ZoomConfig, PanConfig, ValidationRule, ValidationError, LayoutOptions, ContextMenuConfig, ContextMenuItem, ContextMenuContext, SelectionState, ValidationResult, ContextMenuEvent, CanvasTheme, NodeTheme, NodeTypeStyle, EdgeTheme, PortTheme, SelectionTheme, FontTheme, ToolbarTheme } from './lib/graph-editor.config';
 export type { SvgIconDefinition } from './lib/icons/workflow-icons';
 export { renderIconSvg, iconToDataUrl } from './lib/icons/workflow-icons';
+export { NodeHtmlTemplateDirective, NodeSvgTemplateDirective, EdgeTemplateDirective } from './lib/template.directives';
+export type { NodeTemplateContext, EdgeTemplateContext } from './lib/template.directives';
+export type { ResolvedTheme } from './lib/theme.resolver';