@procaaso/alphinity-ui-components 1.0.4 → 1.0.6

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 {
@@ -797,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;
@@ -887,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) */
@@ -1064,11 +1106,30 @@ declare const exampleDiagram: Diagram;
  */
 declare const mockSymbolLibrary: Record<string, SymbolDefinition>;
 /**
- * Get symbol definition by ID
+ * Register a custom symbol definition
+ * @param symbol - The symbol definition to register
+ * @example
+ * registerSymbol({
+ *   id: 'my-custom-valve',
+ *   name: 'My Custom Valve',
+ *   category: 'valve',
+ *   viewBox: { x: 0, y: 0, width: 100, height: 100 },
+ *   ports: [...],
+ *   svgContent: '...',
+ * });
+ */
+declare function registerSymbol(symbol: SymbolDefinition): void;
+/**
+ * Register multiple custom symbols at once
+ * @param symbols - Array of symbol definitions or a record of symbols
+ */
+declare function registerSymbols(symbols: SymbolDefinition[] | Record<string, SymbolDefinition>): void;
+/**
+ * Get symbol definition by ID (checks both mock library and custom symbols)
  */
 declare function getSymbolDefinition(symbolId: string): SymbolDefinition | undefined;
 /**
- * Get all available symbol IDs
+ * Get all available symbol IDs (includes both mock library and custom symbols)
  */
 declare function getAvailableSymbols(): string[];
 
@@ -1135,4 +1196,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, registerSymbol, registerSymbols, 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 {
@@ -797,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;
@@ -887,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) */
@@ -1064,11 +1106,30 @@ declare const exampleDiagram: Diagram;
  */
 declare const mockSymbolLibrary: Record<string, SymbolDefinition>;
 /**
- * Get symbol definition by ID
+ * Register a custom symbol definition
+ * @param symbol - The symbol definition to register
+ * @example
+ * registerSymbol({
+ *   id: 'my-custom-valve',
+ *   name: 'My Custom Valve',
+ *   category: 'valve',
+ *   viewBox: { x: 0, y: 0, width: 100, height: 100 },
+ *   ports: [...],
+ *   svgContent: '...',
+ * });
+ */
+declare function registerSymbol(symbol: SymbolDefinition): void;
+/**
+ * Register multiple custom symbols at once
+ * @param symbols - Array of symbol definitions or a record of symbols
+ */
+declare function registerSymbols(symbols: SymbolDefinition[] | Record<string, SymbolDefinition>): void;
+/**
+ * Get symbol definition by ID (checks both mock library and custom symbols)
  */
 declare function getSymbolDefinition(symbolId: string): SymbolDefinition | undefined;
 /**
- * Get all available symbol IDs
+ * Get all available symbol IDs (includes both mock library and custom symbols)
  */
 declare function getAvailableSymbols(): string[];
 
@@ -1135,4 +1196,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, registerSymbol, registerSymbols, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram };