@grafloria/element 0.3.18 → 0.3.19

package/src/libs/renderer/src/utils/animation-presets.d.ts

@@ -0,0 +1,310 @@
+/**
+ * Animation Presets
+ *
+ * Phase 1.1: Convenience constants for common animation patterns
+ * Provides pre-configured animation settings for typical use cases
+ */
+import type { LinkAnimation, NodeModel } from '@grafloria/engine';
+/**
+ * Preset configurations for common workflow states
+ */
+export declare const AnimationPresets: {
+    /**
+     * Workflow & Process States
+     */
+    readonly WORKFLOW: {
+        /** Active workflow step with running animation */
+        readonly RUNNING: {
+            readonly node: {
+                readonly status: "running";
+                readonly animateStatus: true;
+                readonly style: {
+                    readonly animatedBorder: true;
+                    readonly borderAnimationType: "pulse";
+                    readonly borderAnimationSpeed: 1.5;
+                };
+            };
+            readonly link: LinkAnimation;
+        };
+        /** Processing with data flow */
+        readonly PROCESSING: {
+            readonly node: {
+                readonly status: "running";
+                readonly animateStatus: true;
+                readonly style: {
+                    readonly animatedBorder: true;
+                    readonly borderAnimationType: "gradient";
+                    readonly borderAnimationSpeed: 2;
+                    readonly borderAnimationColors: readonly ["#667eea", "#764ba2"];
+                };
+            };
+            readonly link: LinkAnimation;
+        };
+        /** Completed step with success state */
+        readonly COMPLETED: {
+            readonly node: {
+                readonly status: "completed";
+                readonly animateStatus: true;
+                readonly style: {
+                    readonly animatedBorder: false;
+                };
+            };
+            readonly link: LinkAnimation;
+        };
+        /** Error state with alert animation */
+        readonly ERROR: {
+            readonly node: {
+                readonly status: "error";
+                readonly animateStatus: true;
+                readonly style: {
+                    readonly animatedBorder: true;
+                    readonly borderAnimationType: "pulse";
+                    readonly borderAnimationSpeed: 2;
+                    readonly borderAnimationColors: readonly ["#e74c3c", "#c0392b"];
+                };
+            };
+            readonly link: LinkAnimation;
+        };
+        /** Warning state with attention animation */
+        readonly WARNING: {
+            readonly node: {
+                readonly status: "warning";
+                readonly animateStatus: true;
+                readonly style: {
+                    readonly animatedBorder: true;
+                    readonly borderAnimationType: "breathe";
+                    readonly borderAnimationSpeed: 1.5;
+                    readonly borderAnimationColors: readonly ["#f39c12", "#e67e22"];
+                };
+            };
+            readonly link: LinkAnimation;
+        };
+        /** Pending/waiting state */
+        readonly PENDING: {
+            readonly node: {
+                readonly status: "pending";
+                readonly animateStatus: true;
+                readonly style: {
+                    readonly animatedBorder: true;
+                    readonly borderAnimationType: "shimmer";
+                    readonly borderAnimationSpeed: 1;
+                };
+            };
+            readonly link: LinkAnimation;
+        };
+    };
+    /**
+     * Data Flow Patterns
+     */
+    readonly DATA_FLOW: {
+        /** Active data transfer */
+        readonly ACTIVE: LinkAnimation;
+        /** High-speed data stream */
+        readonly STREAMING: LinkAnimation;
+        /** Slow/throttled data flow */
+        readonly THROTTLED: LinkAnimation;
+        /** Bidirectional data exchange */
+        readonly BIDIRECTIONAL: LinkAnimation;
+        /** Data flowing backwards (reverse) */
+        readonly REVERSE: LinkAnimation;
+    };
+    /**
+     * Connection Types
+     */
+    readonly CONNECTION: {
+        /** Standard marching ants for selection/focus */
+        readonly SELECTED: LinkAnimation;
+        /** Highlighted connection */
+        readonly HIGHLIGHTED: LinkAnimation;
+        /** Active/live connection */
+        readonly ACTIVE: LinkAnimation;
+        /** Inactive/disabled connection */
+        readonly INACTIVE: LinkAnimation;
+    };
+    /**
+     * Node Highlight States
+     */
+    readonly NODE: {
+        /** Focused/selected node */
+        readonly SELECTED: {
+            readonly style: {
+                readonly animatedBorder: true;
+                readonly borderAnimationType: "gradient";
+                readonly borderAnimationSpeed: 2;
+                readonly borderAnimationColors: readonly ["#3498db", "#2980b9"];
+            };
+        };
+        /** Hovered node */
+        readonly HOVERED: {
+            readonly style: {
+                readonly animatedBorder: true;
+                readonly borderAnimationType: "breathe";
+                readonly borderAnimationSpeed: 1.5;
+            };
+        };
+        /** Active/processing node */
+        readonly ACTIVE: {
+            readonly style: {
+                readonly animatedBorder: true;
+                readonly borderAnimationType: "pulse";
+                readonly borderAnimationSpeed: 2;
+            };
+        };
+        /** Highlighted node for attention */
+        readonly ATTENTION: {
+            readonly style: {
+                readonly animatedBorder: true;
+                readonly borderAnimationType: "shimmer";
+                readonly borderAnimationSpeed: 1.5;
+                readonly borderAnimationColors: readonly ["#f39c12", "#e67e22"];
+            };
+        };
+        /** Default/idle state (no animation) */
+        readonly IDLE: {
+            readonly style: {
+                readonly animatedBorder: false;
+            };
+        };
+    };
+    /**
+     * ETL/Data Pipeline Patterns
+     */
+    readonly ETL: {
+        /** Extract phase - data being pulled */
+        readonly EXTRACT: {
+            readonly node: {
+                readonly status: "running";
+                readonly animateStatus: true;
+                readonly style: {
+                    readonly animatedBorder: true;
+                    readonly borderAnimationType: "pulse";
+                    readonly borderAnimationSpeed: 1.5;
+                    readonly borderAnimationColors: readonly ["#3498db", "#2980b9"];
+                };
+            };
+            readonly link: LinkAnimation;
+        };
+        /** Transform phase - data being processed */
+        readonly TRANSFORM: {
+            readonly node: {
+                readonly status: "running";
+                readonly animateStatus: true;
+                readonly style: {
+                    readonly animatedBorder: true;
+                    readonly borderAnimationType: "gradient";
+                    readonly borderAnimationSpeed: 2;
+                    readonly borderAnimationColors: readonly ["#9b59b6", "#8e44ad"];
+                };
+            };
+            readonly link: LinkAnimation;
+        };
+        /** Load phase - data being written */
+        readonly LOAD: {
+            readonly node: {
+                readonly status: "running";
+                readonly animateStatus: true;
+                readonly style: {
+                    readonly animatedBorder: true;
+                    readonly borderAnimationType: "breathe";
+                    readonly borderAnimationSpeed: 1.5;
+                    readonly borderAnimationColors: readonly ["#27ae60", "#229954"];
+                };
+            };
+            readonly link: LinkAnimation;
+        };
+    };
+    /**
+     * Network/System Monitoring
+     */
+    readonly MONITORING: {
+        /** Healthy system component */
+        readonly HEALTHY: {
+            readonly node: {
+                readonly status: "completed";
+                readonly animateStatus: true;
+                readonly style: {
+                    readonly animatedBorder: false;
+                };
+            };
+        };
+        /** Degraded performance */
+        readonly DEGRADED: {
+            readonly node: {
+                readonly status: "warning";
+                readonly animateStatus: true;
+                readonly style: {
+                    readonly animatedBorder: true;
+                    readonly borderAnimationType: "breathe";
+                    readonly borderAnimationSpeed: 1.5;
+                    readonly borderAnimationColors: readonly ["#f39c12", "#e67e22"];
+                };
+            };
+        };
+        /** System failure */
+        readonly FAILED: {
+            readonly node: {
+                readonly status: "error";
+                readonly animateStatus: true;
+                readonly style: {
+                    readonly animatedBorder: true;
+                    readonly borderAnimationType: "pulse";
+                    readonly borderAnimationSpeed: 2.5;
+                    readonly borderAnimationColors: readonly ["#e74c3c", "#c0392b"];
+                };
+            };
+        };
+        /** Active network traffic */
+        readonly TRAFFIC: {
+            readonly link: LinkAnimation;
+        };
+    };
+};
+/**
+ * Apply a preset to a node
+ *
+ * @param node - Node to apply preset to
+ * @param preset - Preset configuration
+ * @returns Modified node (mutation)
+ */
+export declare function applyNodePreset(node: NodeModel, preset: typeof AnimationPresets.NODE[keyof typeof AnimationPresets.NODE]): NodeModel;
+/**
+ * Apply a workflow preset to a node
+ *
+ * @param node - Node to apply preset to
+ * @param preset - Workflow preset configuration
+ * @returns Modified node (mutation)
+ */
+export declare function applyWorkflowPreset(node: NodeModel, preset: typeof AnimationPresets.WORKFLOW[keyof typeof AnimationPresets.WORKFLOW]): NodeModel;
+/**
+ * Get link animation from a preset
+ *
+ * @param preset - Preset with link configuration
+ * @returns Link animation configuration
+ */
+export declare function getLinkAnimationFromPreset(preset: typeof AnimationPresets.WORKFLOW[keyof typeof AnimationPresets.WORKFLOW] | typeof AnimationPresets.ETL[keyof typeof AnimationPresets.ETL]): LinkAnimation;
+/**
+ * Common animation speed values
+ */
+export declare const AnimationSpeeds: {
+    readonly VERY_SLOW: 0.5;
+    readonly SLOW: 1;
+    readonly NORMAL: 1.5;
+    readonly FAST: 2;
+    readonly VERY_FAST: 3;
+};
+/**
+ * Common color schemes for animations
+ */
+export declare const AnimationColorSchemes: {
+    readonly BLUE: readonly ["#3498db", "#2980b9"];
+    readonly GREEN: readonly ["#27ae60", "#229954"];
+    readonly RED: readonly ["#e74c3c", "#c0392b"];
+    readonly ORANGE: readonly ["#f39c12", "#e67e22"];
+    readonly PURPLE: readonly ["#9b59b6", "#8e44ad"];
+    readonly TEAL: readonly ["#1abc9c", "#16a085"];
+    readonly YELLOW: readonly ["#f1c40f", "#f39c12"];
+    readonly GRADIENT_COOL: readonly ["#667eea", "#764ba2"];
+    readonly GRADIENT_WARM: readonly ["#f093fb", "#f5576c"];
+    readonly GRADIENT_OCEAN: readonly ["#4facfe", "#00f2fe"];
+    readonly GRADIENT_SUNSET: readonly ["#fa709a", "#fee140"];
+};

package/src/libs/renderer/src/utils/animation-presets.js

@@ -0,0 +1,406 @@
+"use strict";
+/**
+ * Animation Presets
+ *
+ * Phase 1.1: Convenience constants for common animation patterns
+ * Provides pre-configured animation settings for typical use cases
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimationColorSchemes = exports.AnimationSpeeds = exports.AnimationPresets = void 0;
+exports.applyNodePreset = applyNodePreset;
+exports.applyWorkflowPreset = applyWorkflowPreset;
+exports.getLinkAnimationFromPreset = getLinkAnimationFromPreset;
+/**
+ * Preset configurations for common workflow states
+ */
+exports.AnimationPresets = {
+    /**
+     * Workflow & Process States
+     */
+    WORKFLOW: {
+        /** Active workflow step with running animation */
+        RUNNING: {
+            node: {
+                status: 'running',
+                animateStatus: true,
+                style: {
+                    animatedBorder: true,
+                    borderAnimationType: 'pulse',
+                    borderAnimationSpeed: 1.5,
+                }
+            },
+            link: {
+                type: 'flow',
+                speed: 'normal',
+                direction: 'forward',
+            }
+        },
+        /** Processing with data flow */
+        PROCESSING: {
+            node: {
+                status: 'running',
+                animateStatus: true,
+                style: {
+                    animatedBorder: true,
+                    borderAnimationType: 'gradient',
+                    borderAnimationSpeed: 2,
+                    borderAnimationColors: ['#667eea', '#764ba2']
+                }
+            },
+            link: {
+                type: 'dash-flow',
+                speed: 'fast',
+                direction: 'forward',
+            }
+        },
+        /** Completed step with success state */
+        COMPLETED: {
+            node: {
+                status: 'completed',
+                animateStatus: true,
+                style: {
+                    animatedBorder: false,
+                }
+            },
+            link: {
+                type: 'none',
+            }
+        },
+        /** Error state with alert animation */
+        ERROR: {
+            node: {
+                status: 'error',
+                animateStatus: true,
+                style: {
+                    animatedBorder: true,
+                    borderAnimationType: 'pulse',
+                    borderAnimationSpeed: 2,
+                    borderAnimationColors: ['#e74c3c', '#c0392b']
+                }
+            },
+            link: {
+                type: 'none',
+            }
+        },
+        /** Warning state with attention animation */
+        WARNING: {
+            node: {
+                status: 'warning',
+                animateStatus: true,
+                style: {
+                    animatedBorder: true,
+                    borderAnimationType: 'breathe',
+                    borderAnimationSpeed: 1.5,
+                    borderAnimationColors: ['#f39c12', '#e67e22']
+                }
+            },
+            link: {
+                type: 'none',
+            }
+        },
+        /** Pending/waiting state */
+        PENDING: {
+            node: {
+                status: 'pending',
+                animateStatus: true,
+                style: {
+                    animatedBorder: true,
+                    borderAnimationType: 'shimmer',
+                    borderAnimationSpeed: 1,
+                }
+            },
+            link: {
+                type: 'none',
+            }
+        },
+    },
+    /**
+     * Data Flow Patterns
+     */
+    DATA_FLOW: {
+        /** Active data transfer */
+        ACTIVE: {
+            type: 'flow',
+            speed: 'normal',
+            direction: 'forward',
+        },
+        /** High-speed data stream */
+        STREAMING: {
+            type: 'flow',
+            speed: 'fast',
+            direction: 'forward',
+        },
+        /** Slow/throttled data flow */
+        THROTTLED: {
+            type: 'dash-flow',
+            speed: 'slow',
+            direction: 'forward',
+        },
+        /** Bidirectional data exchange */
+        BIDIRECTIONAL: {
+            type: 'pulse',
+            speed: 'normal',
+        },
+        /** Data flowing backwards (reverse) */
+        REVERSE: {
+            type: 'flow',
+            speed: 'normal',
+            direction: 'reverse',
+        },
+    },
+    /**
+     * Connection Types
+     */
+    CONNECTION: {
+        /** Standard marching ants for selection/focus */
+        SELECTED: {
+            type: 'marching-ants',
+            speed: 'normal',
+            direction: 'forward',
+        },
+        /** Highlighted connection */
+        HIGHLIGHTED: {
+            type: 'marching-ants',
+            speed: 'slow',
+            direction: 'forward',
+        },
+        /** Active/live connection */
+        ACTIVE: {
+            type: 'flow',
+            speed: 'normal',
+            direction: 'forward',
+        },
+        /** Inactive/disabled connection */
+        INACTIVE: {
+            type: 'none',
+        },
+    },
+    /**
+     * Node Highlight States
+     */
+    NODE: {
+        /** Focused/selected node */
+        SELECTED: {
+            style: {
+                animatedBorder: true,
+                borderAnimationType: 'gradient',
+                borderAnimationSpeed: 2,
+                borderAnimationColors: ['#3498db', '#2980b9']
+            }
+        },
+        /** Hovered node */
+        HOVERED: {
+            style: {
+                animatedBorder: true,
+                borderAnimationType: 'breathe',
+                borderAnimationSpeed: 1.5,
+            }
+        },
+        /** Active/processing node */
+        ACTIVE: {
+            style: {
+                animatedBorder: true,
+                borderAnimationType: 'pulse',
+                borderAnimationSpeed: 2,
+            }
+        },
+        /** Highlighted node for attention */
+        ATTENTION: {
+            style: {
+                animatedBorder: true,
+                borderAnimationType: 'shimmer',
+                borderAnimationSpeed: 1.5,
+                borderAnimationColors: ['#f39c12', '#e67e22']
+            }
+        },
+        /** Default/idle state (no animation) */
+        IDLE: {
+            style: {
+                animatedBorder: false,
+            }
+        },
+    },
+    /**
+     * ETL/Data Pipeline Patterns
+     */
+    ETL: {
+        /** Extract phase - data being pulled */
+        EXTRACT: {
+            node: {
+                status: 'running',
+                animateStatus: true,
+                style: {
+                    animatedBorder: true,
+                    borderAnimationType: 'pulse',
+                    borderAnimationSpeed: 1.5,
+                    borderAnimationColors: ['#3498db', '#2980b9']
+                }
+            },
+            link: {
+                type: 'flow',
+                speed: 'normal',
+                direction: 'forward',
+            }
+        },
+        /** Transform phase - data being processed */
+        TRANSFORM: {
+            node: {
+                status: 'running',
+                animateStatus: true,
+                style: {
+                    animatedBorder: true,
+                    borderAnimationType: 'gradient',
+                    borderAnimationSpeed: 2,
+                    borderAnimationColors: ['#9b59b6', '#8e44ad']
+                }
+            },
+            link: {
+                type: 'dash-flow',
+                speed: 'fast',
+                direction: 'forward',
+            }
+        },
+        /** Load phase - data being written */
+        LOAD: {
+            node: {
+                status: 'running',
+                animateStatus: true,
+                style: {
+                    animatedBorder: true,
+                    borderAnimationType: 'breathe',
+                    borderAnimationSpeed: 1.5,
+                    borderAnimationColors: ['#27ae60', '#229954']
+                }
+            },
+            link: {
+                type: 'flow',
+                speed: 'normal',
+                direction: 'forward',
+            }
+        },
+    },
+    /**
+     * Network/System Monitoring
+     */
+    MONITORING: {
+        /** Healthy system component */
+        HEALTHY: {
+            node: {
+                status: 'completed',
+                animateStatus: true,
+                style: {
+                    animatedBorder: false,
+                }
+            }
+        },
+        /** Degraded performance */
+        DEGRADED: {
+            node: {
+                status: 'warning',
+                animateStatus: true,
+                style: {
+                    animatedBorder: true,
+                    borderAnimationType: 'breathe',
+                    borderAnimationSpeed: 1.5,
+                    borderAnimationColors: ['#f39c12', '#e67e22']
+                }
+            }
+        },
+        /** System failure */
+        FAILED: {
+            node: {
+                status: 'error',
+                animateStatus: true,
+                style: {
+                    animatedBorder: true,
+                    borderAnimationType: 'pulse',
+                    borderAnimationSpeed: 2.5,
+                    borderAnimationColors: ['#e74c3c', '#c0392b']
+                }
+            }
+        },
+        /** Active network traffic */
+        TRAFFIC: {
+            link: {
+                type: 'flow',
+                speed: 'fast',
+                direction: 'forward',
+            }
+        },
+    },
+};
+/**
+ * Apply a preset to a node
+ *
+ * @param node - Node to apply preset to
+ * @param preset - Preset configuration
+ * @returns Modified node (mutation)
+ */
+function applyNodePreset(node, preset) {
+    if (preset.style) {
+        node.style = node.style || {};
+        Object.assign(node.style, preset.style);
+    }
+    return node;
+}
+/**
+ * Apply a workflow preset to a node
+ *
+ * @param node - Node to apply preset to
+ * @param preset - Workflow preset configuration
+ * @returns Modified node (mutation)
+ */
+function applyWorkflowPreset(node, preset) {
+    if (preset.node) {
+        // Update state properties if state exists
+        if (node.state) {
+            if (preset.node.status) {
+                node.state.status = preset.node.status;
+            }
+            if (typeof preset.node.animateStatus !== 'undefined') {
+                node.state.animateStatus = preset.node.animateStatus;
+            }
+        }
+        if (preset.node.style) {
+            node.style = node.style || {};
+            Object.assign(node.style, preset.node.style);
+        }
+    }
+    return node;
+}
+/**
+ * Get link animation from a preset
+ *
+ * @param preset - Preset with link configuration
+ * @returns Link animation configuration
+ */
+function getLinkAnimationFromPreset(preset) {
+    return preset.link;
+}
+/**
+ * Common animation speed values
+ */
+exports.AnimationSpeeds = {
+    VERY_SLOW: 0.5,
+    SLOW: 1,
+    NORMAL: 1.5,
+    FAST: 2,
+    VERY_FAST: 3,
+};
+/**
+ * Common color schemes for animations
+ */
+exports.AnimationColorSchemes = {
+    BLUE: ['#3498db', '#2980b9'],
+    GREEN: ['#27ae60', '#229954'],
+    RED: ['#e74c3c', '#c0392b'],
+    ORANGE: ['#f39c12', '#e67e22'],
+    PURPLE: ['#9b59b6', '#8e44ad'],
+    TEAL: ['#1abc9c', '#16a085'],
+    YELLOW: ['#f1c40f', '#f39c12'],
+    GRADIENT_COOL: ['#667eea', '#764ba2'],
+    GRADIENT_WARM: ['#f093fb', '#f5576c'],
+    GRADIENT_OCEAN: ['#4facfe', '#00f2fe'],
+    GRADIENT_SUNSET: ['#fa709a', '#fee140'],
+};
+//# sourceMappingURL=animation-presets.js.map