@procaaso/alphinity-ui-components 1.0.3 → 1.0.5

package/dist/index.d.cts

@@ -448,6 +448,11 @@ interface NodeInstance {
         y: number;
     };
     labelFontSize?: number;
+    status?: 'stopped' | 'running' | 'alarm' | 'warning' | string;
+    customColors?: {
+        fill?: string;
+        stroke?: string;
+    };
     metadata?: Record<string, unknown>;
 }
 interface Transform {
@@ -683,6 +688,15 @@ interface UseViewBoxResult {
     zoomIn: () => void;
     /** Zoom out (increase viewBox size) */
     zoomOut: () => void;
+    /** Fit viewBox to content bounds with optional padding */
+    fitToContent: (bounds: {
+        minX: number;
+        minY: number;
+        maxX: number;
+        maxY: number;
+    }, padding?: number) => void;
+    /** Set viewBox directly */
+    setViewBox: (viewBox: ViewBox) => void;
     /** Convert screen coordinates to world (SVG) coordinates */
     screenToWorld: (screenX: number, screenY: number) => {
         x: number;
@@ -788,6 +802,41 @@ interface UseTelemetryResult {
  */
 declare function useTelemetry(options?: UseTelemetryOptions): UseTelemetryResult;
 
+/**
+ * Options for syncing telemetry status to node status
+ */
+interface UseTelemetryStatusOptions {
+    /** Whether status sync is enabled (default: true) */
+    enabled?: boolean;
+    /** Custom status mapping function */
+    mapStatus?: (telemetryStatus: string) => string;
+}
+/**
+ * Hook to sync telemetry status to node instance status for dynamic coloring
+ *
+ * Updates node.status based on telemetry status values:
+ * - 'normal' → 'running'
+ * - 'warning' → 'warning'
+ * - 'alarm' / 'fault' → 'alarm'
+ * - 'off' → 'stopped'
+ *
+ * @param telemetry - Telemetry map from useTelemetry
+ * @param diagram - Current diagram state
+ * @param setDiagram - Diagram state setter
+ * @param options - Configuration options
+ *
+ * @example
+ * ```tsx
+ * const { telemetry } = useTelemetry();
+ * const [diagram, setDiagram] = useState<Diagram>({...});
+ *
+ * useTelemetryStatus(telemetry, diagram, setDiagram, {
+ *   enabled: mode === 'runtime'
+ * });
+ * ```
+ */
+declare function useTelemetryStatus(telemetry: TelemetryMap, diagram: Diagram, setDiagram: (diagram: Diagram) => void, options?: UseTelemetryStatusOptions): void;
+
 interface DragPoint {
     x: number;
     y: number;
@@ -878,6 +927,8 @@ interface PIDCanvasFeatures {
     multiSelect?: boolean;
     /** Enable telemetry data overlays (default: false) */
     telemetry?: boolean;
+    /** Scale factor for telemetry displays (default: 1.0, range: 0.5-2.0) */
+    telemetryScale?: number;
     /** Enable drag-and-drop for nodes (default: false) */
     dragNodes?: boolean;
     /** Snap dragged nodes to grid (0 = no snap) */
@@ -927,9 +978,19 @@ interface PIDCanvasProps extends react__default.HTMLAttributes<HTMLDivElement> {
     }) => void;
     /** Callback when a pipe is created via connection mode */
     onPipeCreated?: (sourceNodeId: string, targetNodeId: string, sourcePortId?: string, targetPortId?: string) => void;
+    /** Callback when canvas is mounted, provides control functions */
+    onMounted?: (controls: PIDCanvasControls) => void;
     /** Telemetry data bindings for live values */
     telemetry?: TelemetryMap;
 }
+interface PIDCanvasControls {
+    /** Fit view to show all diagram content */
+    fitToContent: (padding?: number) => void;
+    /** Set zoom level (1 = 100%, 2 = 200%, etc.) */
+    setZoom: (zoomLevel: number) => void;
+    /** Get current zoom level */
+    getZoom: () => number;
+}
 /**
  * PIDCanvas - Interactive canvas for rendering P&ID diagrams
  *
@@ -939,7 +1000,7 @@ interface PIDCanvasProps extends react__default.HTMLAttributes<HTMLDivElement> {
  *
  * Future: Editing tools, symbol library UI
  */
-declare function PIDCanvas({ diagram, className, style, features, onSelectionChange, onNodeClick, onPipeClick, onNodeMove, onDiagramChange, onDelete, onItemsCopied, onPaste, onSymbolDrop, onPipeCreated, telemetry, ...props }: PIDCanvasProps): react__default.ReactElement;
+declare function PIDCanvas({ diagram, className, style, features, onSelectionChange, onNodeClick, onPipeClick, onNodeMove, onDiagramChange, onDelete, onItemsCopied, onPaste, onSymbolDrop, onPipeCreated, onMounted, telemetry, ...props }: PIDCanvasProps): react__default.ReactElement;
 
 interface SymbolLibraryProps {
     /** Optional className for styling */
@@ -1116,4 +1177,4 @@ interface SimulationOptions {
  */
 declare function useSimulation(telemetry: TelemetryMap, updateTelemetryBatch: (updates: Array<any>) => void, options?: SimulationOptions): void;
 
-export { type AnchorType, Button, type ButtonProps, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, ControlPanel, type ControlPanelProps, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type Diagram, type DiagramMetadata, type DisplayMode, DisplayModeToggle, type DragPoint, type DragState, EquipmentIndicator, type EquipmentIndicatorProps, EquipmentIndicatorWithSparkline, type EquipmentIndicatorWithSparklineProps, FixedSVGContainer, FooterPanel, FullscreenContainer, FullscreenWorkspace, type FullscreenWorkspaceProps, type FullscreenWorkspaceTab, type KeyboardShortcutsOptions, LeftPanel, LeftToggleButton, LegacyValueEntry, type LegacyValueEntryProps, type ModeConfig, NodeConfigPanel, type NodeConfigPanelProps, type NodeInstance, type Overlay, type OverlayContent, type OverlayTheme, type OverlayType, PIDCanvas, type PIDCanvasProps, PanelContent, PanelTabs, type PipeEdge, type PipeStyle, type Point, type PortDefinition, type PortInstance, type PortType, RightPanel, RightToggleButton, SVGArea, SVGLockedOverlay, type SVGLockedOverlayProps, ScrollableSVGWrapper, type SelectionState, Selector, type SelectorOption, type SelectorProps, type SimulationOptions, Sparkline, type SparklineProps, StatusIndicator, type StatusIndicatorProps, type SymbolCategory, type SymbolDefinition, SymbolLibrary, type SymbolLibraryProps, type SymbolMetadata, type TelemetryBinding, type TelemetryMap, type TelemetryStatus$1 as TelemetryStatus, type TelemetryValue, ThemeProvider, ThemeToggle, type ThemeToggleProps, type Thresholds, type Transform, TrendLine, type TrendLineProps, type UseDragOptions, type UseDragResult, type UseSelectionOptions, type UseSelectionResult, type UseTelemetryOptions, type UseTelemetryResult, type UseViewBoxOptions, type UseViewBoxResult, ValueEntry, type ValueEntryProps, type ViewBox, ZoomButton, ZoomControls, calculateThresholdStatus, exampleDiagram, exportDiagram, generateRoutePoints, getAvailableSymbols, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, overlayStyles, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTheme, useViewBox, validateDiagram };
+export { type AnchorType, Button, type ButtonProps, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, ControlPanel, type ControlPanelProps, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type Diagram, type DiagramMetadata, type DisplayMode, DisplayModeToggle, type DragPoint, type DragState, EquipmentIndicator, type EquipmentIndicatorProps, EquipmentIndicatorWithSparkline, type EquipmentIndicatorWithSparklineProps, FixedSVGContainer, FooterPanel, FullscreenContainer, FullscreenWorkspace, type FullscreenWorkspaceProps, type FullscreenWorkspaceTab, type KeyboardShortcutsOptions, LeftPanel, LeftToggleButton, LegacyValueEntry, type LegacyValueEntryProps, type ModeConfig, NodeConfigPanel, type NodeConfigPanelProps, type NodeInstance, type Overlay, type OverlayContent, type OverlayTheme, type OverlayType, PIDCanvas, type PIDCanvasControls, type PIDCanvasFeatures, type PIDCanvasProps, PanelContent, PanelTabs, type PipeEdge, type PipeStyle, type Point, type PortDefinition, type PortInstance, type PortType, RightPanel, RightToggleButton, SVGArea, SVGLockedOverlay, type SVGLockedOverlayProps, ScrollableSVGWrapper, type SelectionState, Selector, type SelectorOption, type SelectorProps, type SimulationOptions, Sparkline, type SparklineProps, StatusIndicator, type StatusIndicatorProps, type SymbolCategory, type SymbolDefinition, SymbolLibrary, type SymbolLibraryProps, type SymbolMetadata, type TelemetryBinding, type TelemetryMap, type TelemetryStatus$1 as TelemetryStatus, type TelemetryValue, ThemeProvider, ThemeToggle, type ThemeToggleProps, type Thresholds, type Transform, TrendLine, type TrendLineProps, type UseDragOptions, type UseDragResult, type UseSelectionOptions, type UseSelectionResult, type UseTelemetryOptions, type UseTelemetryResult, type UseTelemetryStatusOptions, type UseViewBoxOptions, type UseViewBoxResult, ValueEntry, type ValueEntryProps, type ViewBox, ZoomButton, ZoomControls, calculateThresholdStatus, exampleDiagram, exportDiagram, generateRoutePoints, getAvailableSymbols, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, overlayStyles, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram };

package/dist/index.d.ts

@@ -448,6 +448,11 @@ interface NodeInstance {
         y: number;
     };
     labelFontSize?: number;
+    status?: 'stopped' | 'running' | 'alarm' | 'warning' | string;
+    customColors?: {
+        fill?: string;
+        stroke?: string;
+    };
     metadata?: Record<string, unknown>;
 }
 interface Transform {
@@ -683,6 +688,15 @@ interface UseViewBoxResult {
     zoomIn: () => void;
     /** Zoom out (increase viewBox size) */
     zoomOut: () => void;
+    /** Fit viewBox to content bounds with optional padding */
+    fitToContent: (bounds: {
+        minX: number;
+        minY: number;
+        maxX: number;
+        maxY: number;
+    }, padding?: number) => void;
+    /** Set viewBox directly */
+    setViewBox: (viewBox: ViewBox) => void;
     /** Convert screen coordinates to world (SVG) coordinates */
     screenToWorld: (screenX: number, screenY: number) => {
         x: number;
@@ -788,6 +802,41 @@ interface UseTelemetryResult {
  */
 declare function useTelemetry(options?: UseTelemetryOptions): UseTelemetryResult;
 
+/**
+ * Options for syncing telemetry status to node status
+ */
+interface UseTelemetryStatusOptions {
+    /** Whether status sync is enabled (default: true) */
+    enabled?: boolean;
+    /** Custom status mapping function */
+    mapStatus?: (telemetryStatus: string) => string;
+}
+/**
+ * Hook to sync telemetry status to node instance status for dynamic coloring
+ *
+ * Updates node.status based on telemetry status values:
+ * - 'normal' → 'running'
+ * - 'warning' → 'warning'
+ * - 'alarm' / 'fault' → 'alarm'
+ * - 'off' → 'stopped'
+ *
+ * @param telemetry - Telemetry map from useTelemetry
+ * @param diagram - Current diagram state
+ * @param setDiagram - Diagram state setter
+ * @param options - Configuration options
+ *
+ * @example
+ * ```tsx
+ * const { telemetry } = useTelemetry();
+ * const [diagram, setDiagram] = useState<Diagram>({...});
+ *
+ * useTelemetryStatus(telemetry, diagram, setDiagram, {
+ *   enabled: mode === 'runtime'
+ * });
+ * ```
+ */
+declare function useTelemetryStatus(telemetry: TelemetryMap, diagram: Diagram, setDiagram: (diagram: Diagram) => void, options?: UseTelemetryStatusOptions): void;
+
 interface DragPoint {
     x: number;
     y: number;
@@ -878,6 +927,8 @@ interface PIDCanvasFeatures {
     multiSelect?: boolean;
     /** Enable telemetry data overlays (default: false) */
     telemetry?: boolean;
+    /** Scale factor for telemetry displays (default: 1.0, range: 0.5-2.0) */
+    telemetryScale?: number;
     /** Enable drag-and-drop for nodes (default: false) */
     dragNodes?: boolean;
     /** Snap dragged nodes to grid (0 = no snap) */
@@ -927,9 +978,19 @@ interface PIDCanvasProps extends react__default.HTMLAttributes<HTMLDivElement> {
     }) => void;
     /** Callback when a pipe is created via connection mode */
     onPipeCreated?: (sourceNodeId: string, targetNodeId: string, sourcePortId?: string, targetPortId?: string) => void;
+    /** Callback when canvas is mounted, provides control functions */
+    onMounted?: (controls: PIDCanvasControls) => void;
     /** Telemetry data bindings for live values */
     telemetry?: TelemetryMap;
 }
+interface PIDCanvasControls {
+    /** Fit view to show all diagram content */
+    fitToContent: (padding?: number) => void;
+    /** Set zoom level (1 = 100%, 2 = 200%, etc.) */
+    setZoom: (zoomLevel: number) => void;
+    /** Get current zoom level */
+    getZoom: () => number;
+}
 /**
  * PIDCanvas - Interactive canvas for rendering P&ID diagrams
  *
@@ -939,7 +1000,7 @@ interface PIDCanvasProps extends react__default.HTMLAttributes<HTMLDivElement> {
  *
  * Future: Editing tools, symbol library UI
  */
-declare function PIDCanvas({ diagram, className, style, features, onSelectionChange, onNodeClick, onPipeClick, onNodeMove, onDiagramChange, onDelete, onItemsCopied, onPaste, onSymbolDrop, onPipeCreated, telemetry, ...props }: PIDCanvasProps): react__default.ReactElement;
+declare function PIDCanvas({ diagram, className, style, features, onSelectionChange, onNodeClick, onPipeClick, onNodeMove, onDiagramChange, onDelete, onItemsCopied, onPaste, onSymbolDrop, onPipeCreated, onMounted, telemetry, ...props }: PIDCanvasProps): react__default.ReactElement;
 
 interface SymbolLibraryProps {
     /** Optional className for styling */
@@ -1116,4 +1177,4 @@ interface SimulationOptions {
  */
 declare function useSimulation(telemetry: TelemetryMap, updateTelemetryBatch: (updates: Array<any>) => void, options?: SimulationOptions): void;
 
-export { type AnchorType, Button, type ButtonProps, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, ControlPanel, type ControlPanelProps, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type Diagram, type DiagramMetadata, type DisplayMode, DisplayModeToggle, type DragPoint, type DragState, EquipmentIndicator, type EquipmentIndicatorProps, EquipmentIndicatorWithSparkline, type EquipmentIndicatorWithSparklineProps, FixedSVGContainer, FooterPanel, FullscreenContainer, FullscreenWorkspace, type FullscreenWorkspaceProps, type FullscreenWorkspaceTab, type KeyboardShortcutsOptions, LeftPanel, LeftToggleButton, LegacyValueEntry, type LegacyValueEntryProps, type ModeConfig, NodeConfigPanel, type NodeConfigPanelProps, type NodeInstance, type Overlay, type OverlayContent, type OverlayTheme, type OverlayType, PIDCanvas, type PIDCanvasProps, PanelContent, PanelTabs, type PipeEdge, type PipeStyle, type Point, type PortDefinition, type PortInstance, type PortType, RightPanel, RightToggleButton, SVGArea, SVGLockedOverlay, type SVGLockedOverlayProps, ScrollableSVGWrapper, type SelectionState, Selector, type SelectorOption, type SelectorProps, type SimulationOptions, Sparkline, type SparklineProps, StatusIndicator, type StatusIndicatorProps, type SymbolCategory, type SymbolDefinition, SymbolLibrary, type SymbolLibraryProps, type SymbolMetadata, type TelemetryBinding, type TelemetryMap, type TelemetryStatus$1 as TelemetryStatus, type TelemetryValue, ThemeProvider, ThemeToggle, type ThemeToggleProps, type Thresholds, type Transform, TrendLine, type TrendLineProps, type UseDragOptions, type UseDragResult, type UseSelectionOptions, type UseSelectionResult, type UseTelemetryOptions, type UseTelemetryResult, type UseViewBoxOptions, type UseViewBoxResult, ValueEntry, type ValueEntryProps, type ViewBox, ZoomButton, ZoomControls, calculateThresholdStatus, exampleDiagram, exportDiagram, generateRoutePoints, getAvailableSymbols, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, overlayStyles, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTheme, useViewBox, validateDiagram };
+export { type AnchorType, Button, type ButtonProps, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, ControlPanel, type ControlPanelProps, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type Diagram, type DiagramMetadata, type DisplayMode, DisplayModeToggle, type DragPoint, type DragState, EquipmentIndicator, type EquipmentIndicatorProps, EquipmentIndicatorWithSparkline, type EquipmentIndicatorWithSparklineProps, FixedSVGContainer, FooterPanel, FullscreenContainer, FullscreenWorkspace, type FullscreenWorkspaceProps, type FullscreenWorkspaceTab, type KeyboardShortcutsOptions, LeftPanel, LeftToggleButton, LegacyValueEntry, type LegacyValueEntryProps, type ModeConfig, NodeConfigPanel, type NodeConfigPanelProps, type NodeInstance, type Overlay, type OverlayContent, type OverlayTheme, type OverlayType, PIDCanvas, type PIDCanvasControls, type PIDCanvasFeatures, type PIDCanvasProps, PanelContent, PanelTabs, type PipeEdge, type PipeStyle, type Point, type PortDefinition, type PortInstance, type PortType, RightPanel, RightToggleButton, SVGArea, SVGLockedOverlay, type SVGLockedOverlayProps, ScrollableSVGWrapper, type SelectionState, Selector, type SelectorOption, type SelectorProps, type SimulationOptions, Sparkline, type SparklineProps, StatusIndicator, type StatusIndicatorProps, type SymbolCategory, type SymbolDefinition, SymbolLibrary, type SymbolLibraryProps, type SymbolMetadata, type TelemetryBinding, type TelemetryMap, type TelemetryStatus$1 as TelemetryStatus, type TelemetryValue, ThemeProvider, ThemeToggle, type ThemeToggleProps, type Thresholds, type Transform, TrendLine, type TrendLineProps, type UseDragOptions, type UseDragResult, type UseSelectionOptions, type UseSelectionResult, type UseTelemetryOptions, type UseTelemetryResult, type UseTelemetryStatusOptions, type UseViewBoxOptions, type UseViewBoxResult, ValueEntry, type ValueEntryProps, type ViewBox, ZoomButton, ZoomControls, calculateThresholdStatus, exampleDiagram, exportDiagram, generateRoutePoints, getAvailableSymbols, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, overlayStyles, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram };