@utisha/graph-editor 1.0.0-beta.1 → 1.0.1

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

@@ -1,6 +1,6 @@
-import { EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
-import { Graph, GraphNode, GraphEdge, Position } from './graph.model';
-import { GraphEditorConfig, SelectionState, ValidationResult, ContextMenuEvent } from './graph-editor.config';
+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 * as i0 from "@angular/core";
 /**
  * Main graph editor component.
@@ -34,6 +34,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 +43,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 +60,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;
@@ -64,6 +75,7 @@ export declare class GraphEditorComponent implements OnInit, OnChanges {
         width: number;
         height: number;
     }>;
+    shadowsEnabled: import("@angular/core").Signal<boolean>;
     selectedEdgeMidpoint: import("@angular/core").Signal<{
         edge: GraphEdge;
         x: number;
@@ -78,6 +90,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 */
@@ -100,6 +116,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): {
@@ -114,7 +140,27 @@ export declare class GraphEditorComponent implements OnInit, OnChanges {
     getEdgeSourcePoint(edge: GraphEdge): Position;
     getEdgeTargetPoint(edge: GraphEdge): Position;
     getNodeTypeIcon(node: GraphNode): string;
+    /**
+     * Get custom image URL for a node.
+     * Checks node.data['imageUrl'] first, then falls back to nodeType.defaultData['imageUrl'].
+     * Returns null if no image is configured (will render text icon instead).
+     */
+    getNodeImage(node: GraphNode): string | null;
+    /**
+     * 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;
+    private findEdgeAtPosition;
+    private pointToSegmentDistance;
     getNodePorts(node: GraphNode): Array<{
         position: 'top' | 'bottom' | 'left' | 'right';
         x: number;

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

@@ -1,5 +1,5 @@
 import { Type } from '@angular/core';
-import { Graph, EdgeStyle, Position } from './graph.model';
+import { EdgeStyle, Graph, Position } from './graph.model';
 export interface GraphEditorConfig {
     /** Node type definitions */
     nodes: NodesConfig;
@@ -28,6 +28,8 @@ export interface NodesConfig {
         height: number;
     };
     constrainToBounds?: boolean;
+    /** Icon position within the node (default: 'top-left') */
+    iconPosition?: 'top-left' | 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left';
 }
 /**
  * Node type definition.
@@ -47,6 +49,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 */
@@ -192,6 +201,8 @@ export interface ContextMenuContext {
 export interface ThemeConfig {
     /** CSS custom property values */
     variables?: Record<string, string>;
+    /** Enable drop shadows on nodes and edges (default: true) */
+    shadows?: boolean;
 }
 /**
  * Palette configuration.

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-beta.1",
+  "version": "1.0.1",
   "description": "Configuration-driven visual graph editor for Angular 19+",
   "author": "Utisha",
   "license": "MIT",