feat: allow to use custom shape for overlays #696
Conversation
CellRenderer` now provides 2 protected methods for deciding how to create the overlay shape and for configuring it (usually to configure the DOM node linked to the shape). The overlay story has been modified to demonstrate how to use the new customization capabilities. It is now also written in TypeScript for ease of maintenance.
WalkthroughThis pull request introduces refactorings and documentation updates across multiple modules. In the core view components, the constructor in the cell marker class is renamed and its documentation improved. The overlay creation logic in the cell renderer is refactored by extracting shape creation and configuration into separate methods, with enhanced JSDoc comments. The cell tracker’s comments are also updated for clarity. Additionally, the Storybook configuration for overlays is reworked by removing the old JavaScript version and introducing a new TypeScript version along with a dedicated CSS file for custom overlay styling. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Graph
participant Renderer
participant Overlay
User->>Graph: Click event on cell
Graph->>Renderer: Invoke createCellOverlays()
alt Overlay exists
Renderer->>Graph: Add existing overlay
else No overlay exists
Renderer->>Renderer: Call createOverlayShape()
Renderer->>Renderer: Call configureOverlayShape()
Renderer->>Graph: Add new overlay to cell
end
User->>Graph: Double-click event on cell
Graph->>Graph: Display alert with cell information
Suggested labels
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (4)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/html/stories/css/overlays.css (1)
11-22: Animation implementation is clean but comments are inconsistent with values.The pulse animation is well-defined, but there's a mismatch between the comments and the actual values used for opacity.
0% { fill-opacity: 100%; - /* 80% opacity */ + /* 100% opacity */ filter: drop-shadow(0 0 0 rgba(0, 0, 0, .8)); } 100% { fill-opacity: 90%; - /* 100% opacity */ + /* 90% opacity */ filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, 1)); }packages/html/stories/Overlays.stories.ts (1)
116-123: Consider adding more randomness options for overlays.The current implementation only randomizes alignment, but you could also randomize other properties like size, color, or animation parameters to showcase more customization possibilities.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
packages/core/src/view/cell/CellMarker.ts(12 hunks)packages/core/src/view/cell/CellRenderer.ts(3 hunks)packages/core/src/view/cell/CellTracker.ts(3 hunks)packages/html/stories/Overlays.stories.js(0 hunks)packages/html/stories/Overlays.stories.ts(1 hunks)packages/html/stories/css/overlays.css(1 hunks)
💤 Files with no reviewable changes (1)
- packages/html/stories/Overlays.stories.js
✅ Files skipped from review due to trivial changes (1)
- packages/core/src/view/cell/CellTracker.ts
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build (windows-2022)
🔇 Additional comments (14)
packages/html/stories/css/overlays.css (2)
1-3: Effective use of CSS variables for theming.The CSS variable for the ellipse color is well-defined and follows best practices by using the root scope.
5-9: Good implementation of the overlay styling.The overlay class selector is appropriately targeting ellipse elements and effectively applies the CSS variable for consistent styling.
packages/core/src/view/cell/CellMarker.ts (4)
44-56: Documentation improvements follow best practices.The updated code example and event documentation enhance readability and maintainability.
66-83: Property documentation enhanced with @default annotations.Adding default annotations improves developer experience by making default values explicit in the documentation.
101-109: Improved property documentation with consistent syntax.The use of consistent
{@link CellState}syntax for property documentation improves clarity.
113-120: Comprehensive constructor documentation.The detailed parameter descriptions in the constructor documentation greatly improve usability and understanding of the class.
packages/core/src/view/cell/CellRenderer.ts (3)
469-482: Good refactoring of overlay creation logic.The code has been refactored to improve readability and maintainability by extracting the overlay shape creation and configuration into separate methods. The early continue pattern helps reduce nesting and improve code flow.
492-503: Well-designed extraction of shape creation logic.The new
createOverlayShapemethod effectively encapsulates the logic for creating overlay shapes, enabling subclasses to customize the shape creation process. The JSDoc is comprehensive and includes the@sincetag to indicate when this method was introduced.
557-575: Excellent design for the configureOverlayShape method.This method provides a clean extension point for customizing overlay shapes. The detailed JSDoc explains the purpose and default implementation clearly. The method effectively separates the configuration concerns from the creation logic.
packages/html/stories/Overlays.stories.ts (5)
18-38: Well-organized imports with clear documentation.The imports are logically grouped and include the necessary types and components. The comment about CSS requirement is helpful for understanding dependencies.
72-96: Excellent example of extending the CellRenderer.The
CustomCellRendererclass demonstrates how to use the newly added protected methods to customize overlay shapes. The implementation is clean and shows multiple customization approaches:
- Creating different shape types based on a counter
- Adding CSS classes to the DOM node
- Storing additional data attributes
This serves as a good reference for users wanting to implement custom overlays.
98-114: Good pattern for renderer customization.The
CustomGraphclass effectively overrides the factory method to use the custom renderer, demonstrating a clean way to extend the Graph class without modifying its core functionality.
125-154: Well-implemented event handling for overlays.The click event handler for toggling overlays is well-structured and demonstrates both adding and removing overlays. The use of random positioning shows flexibility in overlay placement.
169-209: Good demonstration of graph setup with various cell types.The batch update pattern is properly used, and the demo includes both vertices and edges with different shapes, providing a comprehensive example of overlay usage.
|
CellRenderernow provides 2 protected methods for deciding how to create the overlay shape and for configuring it (usually to configure the DOM node linked to the shape).The overlay story has been modified to demonstrate how to use the new customization capabilities.
It is now also written in TypeScript for ease of maintenance.
Also improve JSDoc of
CellMarkerandCellTracker.Notes
Closes #28
PR_696_custom_overlays.webm
Tasks
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Refactor
Documentation