@utisha/graph-editor 1.0.0 → 1.0.2

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

@@ -1,6 +1,7 @@
 import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { Graph, GraphEdge, GraphNode, Position } from './graph.model';
-import { ContextMenuEvent, GraphEditorConfig, SelectionState, ValidationResult } from './graph-editor.config';
+import { ContextMenuEvent, GraphEditorConfig, NodeTypeDefinition, SelectionState, ValidationResult } from './graph-editor.config';
+import { SvgIconDefinition } from './icons/workflow-icons';
 import * as i0 from "@angular/core";
 /**
  * Main graph editor component.
@@ -34,6 +35,7 @@ export declare class GraphEditorComponent implements OnInit, OnChanges {
     canvasClick: EventEmitter<Position>;
     contextMenu: EventEmitter<ContextMenuEvent>;
     private readonly canvasSvgRef;
+    private readonly historyService;
     internalGraph: import("@angular/core").WritableSignal<Graph>;
     selection: import("@angular/core").WritableSignal<SelectionState>;
     validationResult: import("@angular/core").WritableSignal<ValidationResult | null>;
@@ -42,6 +44,8 @@ export declare class GraphEditorComponent implements OnInit, OnChanges {
     scale: import("@angular/core").WritableSignal<number>;
     private draggedNode;
     private dragOffset;
+    private draggedNodeOffsets;
+    private didDrag;
     private isPanning;
     private lastMousePos;
     private draggedEdge;
@@ -57,6 +61,14 @@ export declare class GraphEditorComponent implements OnInit, OnChanges {
         source: Position;
         target: Position;
     } | null>;
+    private isBoxSelecting;
+    private boxSelectStart;
+    selectionBox: import("@angular/core").WritableSignal<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null>;
     transform: import("@angular/core").Signal<string>;
     gridBounds: import("@angular/core").Signal<{
         x: number;
@@ -79,6 +91,10 @@ export declare class GraphEditorComponent implements OnInit, OnChanges {
     updateNode(nodeId: string, updates: Partial<GraphNode>): void;
     selectNode(nodeId: string | null): void;
     selectEdge(edgeId: string | null): void;
+    /** Toggle a node in/out of the current selection (for Ctrl+Click) */
+    toggleNodeSelection(nodeId: string): void;
+    /** Toggle an edge in/out of the current selection (for Ctrl+Click) */
+    toggleEdgeSelection(edgeId: string): void;
     onKeyDown(event: KeyboardEvent): void;
     switchTool(tool: 'hand' | 'line'): void;
     /** @deprecated Use switchTool('line') instead */
@@ -101,6 +117,16 @@ export declare class GraphEditorComponent implements OnInit, OnChanges {
     onWheel(event: WheelEvent): void;
     onContextMenu(event: MouseEvent): void;
     private emitGraphChange;
+    /** Undo the last action (Ctrl+Z) */
+    undo(): boolean;
+    /** Redo the last undone action (Ctrl+Y / Ctrl+Shift+Z) */
+    redo(): boolean;
+    /** Check if undo is available */
+    canUndo(): boolean;
+    /** Check if redo is available */
+    canRedo(): boolean;
+    /** Clear history and reset to current state */
+    clearHistory(): void;
     private generateId;
     private recalculateEdgePorts;
     getNodeSize(node: GraphNode): {
@@ -115,6 +141,38 @@ export declare class GraphEditorComponent implements OnInit, OnChanges {
     getEdgeSourcePoint(edge: GraphEdge): Position;
     getEdgeTargetPoint(edge: GraphEdge): Position;
     getNodeTypeIcon(node: GraphNode): string;
+    /**
+     * Get image URL for a node icon.
+     * Priority: node.data['imageUrl'] > nodeType.iconSvg (converted to data URL) > nodeType.defaultData['imageUrl']
+     * Returns null if no image is configured (will render text icon instead).
+     */
+    getNodeImage(node: GraphNode): string | null;
+    /**
+     * Convert an SvgIconDefinition to a data URL for use in <image> elements.
+     * Caches results to avoid repeated conversion.
+     */
+    private svgIconCache;
+    private svgIconToDataUrl;
+    /**
+     * Get the SVG icon definition for a node type (for palette rendering).
+     * Returns null if no iconSvg is configured.
+     */
+    getNodeTypeSvgIcon(nodeType: NodeTypeDefinition): SvgIconDefinition | null;
+    /**
+     * Split SVG path data by newlines for template iteration.
+     * Used to render multiple path elements from a single path string.
+     */
+    splitIconPaths(pathData: string): string[];
+    /**
+     * Get the position for the node image (top-left corner of image).
+     * Uses same positioning logic as icon but accounts for image dimensions.
+     */
+    getImagePosition(node: GraphNode): Position;
+    /**
+     * Get the size (width/height) for node images.
+     * Images are rendered as squares, sized proportionally to node height.
+     */
+    getImageSize(node: GraphNode): number;
     getIconPosition(node: GraphNode): Position;
     getLabelPosition(node: GraphNode): Position;
     private findNodeAtPosition;

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

@@ -1,5 +1,6 @@
 import { Type } from '@angular/core';
 import { EdgeStyle, Graph, Position } from './graph.model';
+import { SvgIconDefinition } from './icons/workflow-icons';
 export interface GraphEditorConfig {
     /** Node type definitions */
     nodes: NodesConfig;
@@ -39,8 +40,15 @@ export interface NodeTypeDefinition {
     type: string;
     /** Display name in palette */
     label?: string;
-    /** Icon identifier (Material Icons, custom, etc.) */
+    /** Icon identifier (emoji, text, or symbol for fallback display) */
     icon?: string;
+    /**
+     * SVG icon definition for professional node icons.
+     * When set, renders an SVG icon in the node and palette instead of text/emoji.
+     * Use WORKFLOW_ICONS from '@utisha/graph-editor' or provide custom SvgIconDefinition.
+     * @example iconSvg: WORKFLOW_ICONS.process
+     */
+    iconSvg?: SvgIconDefinition;
     /** Palette category/group */
     category?: string;
     /** Angular component to render this node type */
@@ -49,6 +57,13 @@ export interface NodeTypeDefinition {
     configComponent?: Type<any>;
     /** Default data when node is created */
     defaultData: Record<string, any>;
+    /**
+     * Optional image URL for node icon. When set, renders an <image> element instead of text icon.
+     * Can be overridden per-instance via node.data['imageUrl'].
+     * Supports: SVG, PNG, JPG, data URLs, or any valid image URL.
+     * @example '/assets/icons/agent.svg'
+     * @example 'data:image/svg+xml;base64,...'
+     */
     /** Port definitions */
     ports?: PortConfig;
     /** Connection constraints */

package/lib/icons/workflow-icons.d.ts

@@ -0,0 +1,35 @@
+/**
+ * SVG icon definition interface for custom node icons.
+ * Use this to define your own icons that match your design system.
+ *
+ * Example usage:
+ *   const myIcons = {
+ *     process: {
+ *       viewBox: '0 0 24 24',
+ *       fill: 'none',
+ *       stroke: '#1D6A96',
+ *       strokeWidth: 1.75,
+ *       path: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z...'
+ *     }
+ *   };
+ */
+export interface SvgIconDefinition {
+    /** SVG path data (d attribute) or full SVG markup */
+    path: string;
+    /** ViewBox dimensions (default: '0 0 24 24') */
+    viewBox?: string;
+    /** Fill color (default: 'none' for stroke-based icons) */
+    fill?: string;
+    /** Stroke color (default: currentColor) */
+    stroke?: string;
+    /** Stroke width (default: 2) */
+    strokeWidth?: number;
+}
+/**
+ * Generate inline SVG markup for an icon (for use in palette/toolbar)
+ */
+export declare function renderIconSvg(icon: SvgIconDefinition, size?: number): string;
+/**
+ * Generate data URL for an icon (for use as image source)
+ */
+export declare function iconToDataUrl(icon: SvgIconDefinition, size?: number): string;

package/lib/services/graph-history.service.d.ts

@@ -0,0 +1,57 @@
+import { Graph } from '../graph.model';
+import * as i0 from "@angular/core";
+/**
+ * Service for managing undo/redo history of graph state.
+ *
+ * Uses a simple snapshot-based approach where each history entry
+ * is a deep copy of the entire graph state.
+ */
+export declare class GraphHistoryService {
+    private history;
+    private historyIndex;
+    private maxHistorySize;
+    /** Signal to track if an undo/redo operation is in progress */
+    readonly isUndoRedo: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * Initialize history with the given graph state.
+     * Clears any existing history.
+     */
+    init(graph: Graph): void;
+    /**
+     * Push a new state to the history stack.
+     * If we're not at the end of history, truncates future states.
+     * Prevents duplicate consecutive states.
+     *
+     * @returns true if state was pushed, false if it was a duplicate
+     */
+    push(graph: Graph): boolean;
+    /**
+     * Undo the last action.
+     * @returns The previous graph state, or null if nothing to undo
+     */
+    undo(): Graph | null;
+    /**
+     * Redo the last undone action.
+     * @returns The next graph state, or null if nothing to redo
+     */
+    redo(): Graph | null;
+    /**
+     * Complete an undo/redo operation.
+     * Call this after applying the state returned by undo() or redo().
+     */
+    completeUndoRedo(): void;
+    /** Check if undo is available */
+    canUndo(): boolean;
+    /** Check if redo is available */
+    canRedo(): boolean;
+    /** Clear history and reset to given state */
+    clear(graph: Graph): void;
+    /** Get current history size */
+    get size(): number;
+    /** Get current position in history (0-indexed) */
+    get position(): number;
+    /** Set maximum history size */
+    setMaxSize(size: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GraphHistoryService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<GraphHistoryService>;
+}

package/package.json

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

package/public-api.d.ts

@@ -1,3 +1,5 @@
 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 { SvgIconDefinition } from './lib/icons/workflow-icons';
+export { renderIconSvg, iconToDataUrl } from './lib/icons/workflow-icons';