Canvas2D Rendering Strategy Support

README.md

@@ -53,10 +53,14 @@ const { entries, currentBranch } = useYourPaginatedDataSource()
 />
 ```
 
-## Grid System
+## Graph Rendering Strategies
 
-The implementation of the graph was designed with testing in mind. 
-The traditional way to draw such an image would with a HTML `canvas` element. Which, while efficient (and probably easier to implement), is hard to programmatically assert its correctness.
+The commit history graph visual can be rendered in different ways depending on your needs.
+
+### HTML Grid
+
+This implementation of the graph was designed with testing in mind. 
+The traditional way to draw such an image would with a HTML `canvas` element. Which, while efficient (and easier to implement), is hard to programmatically assert its correctness.
 
 This graph uses a grid system. Each row has N number of columns rendered in it, where N is equal to the maximum number of concurrent active branches in the given git log entry data.
 This means that each column is aware of its state and what needs to be drawn (A commit node, vertical line, curved merge line etc.).
@@ -65,6 +69,26 @@ Each column is responsive as its row is stretched vertically or horizontally.
 
 ![grid-system.gif](docs/images/grid-system.gif)
 
+This strategy can be used by rendering the `<GitLog.GraphHTMLGrid />` subcomponent under the `<GitLog />`.
+
+```typescript jsx
+<GitLog entries={[]} branchName='main'>
+  <GitLog.GraphHTMLGrid />
+</GitLog>
+```
+
+### Canvas 2D
+
+This implementation uses a standard HTML `canvas` element with a `2d` rendering context.
+
+This strategy can be used by rendering the `<GitLog.GraphCanvas2D />` subcomponent under the `<GitLog />`.
+
+```typescript jsx
+<GitLog entries={[]} branchName='main'>
+  <GitLog.GraphCanvas2D />
+</GitLog>
+```
+
 # Using the component
 
 1. Install the package using your preferred package manager.
@@ -107,7 +131,7 @@ Each column is responsive as its row is stretched vertically or horizontally.
       return (
         <GitLog entries={entries} currentBranch={currentBranch}>
           <GitLog.Tags />
-          <GitLog.Graph />
+          <GitLog.GraphCanvas2D />
           <GitLog.Table />
         </GitLog>
       )
@@ -127,7 +151,7 @@ Each column is responsive as its row is stretched vertically or horizontally.
         <GitLog entries={entries} currentBranch={currentBranch}>
           <GitLog.Tags />
 
-          <GitLog.Graph
+          <GitLog.GraphHTMLGrid
             enableResize           
             nodeTheme='plain'
             showCommitNodeTooltips
@@ -261,7 +285,7 @@ Returns an object of type `GitLogUrls` with the following fields.
 | `commit`   | `string` | A resolved URL to a particular commit hash on the external Git providers remote website. |
 | `branch`   | `string` | A resolved URL to a branch on the external Git providers remote website.                 |
 
-### Graph
+### GraphHTMLGrid
 
 | Property                 | Type                | Description                                                                                                    |
 |--------------------------|---------------------|----------------------------------------------------------------------------------------------------------------|
@@ -272,6 +296,15 @@ Returns an object of type `GitLogUrls` with the following fields.
 | `orientation`            | `normal \| flipped` | The orientation of the graph. Normal renders the checked-out branch on the left, flipped on the right.         |
 | `enableResize`           | `boolean`           | Enables horizontal resizing of the graph. Default: `false`.                                                    |
 
+### GraphCanvas2D
+
+| Property                 | Type                | Description                                                                                                    |
+|--------------------------|---------------------|----------------------------------------------------------------------------------------------------------------|
+| `nodeTheme`              | `NodeTheme`         | Theme applied to commit node elements in the graph.                                                            |
+| `nodeSize`               | `number`            | The diameter, in pixels, of the commits nodes. Should be divisible by 2 and between 8 and 30 to render nicely. |
+| `orientation`            | `normal \| flipped` | The orientation of the graph. Normal renders the checked-out branch on the left, flipped on the right.         |
+| `enableResize`           | `boolean`           | Enables horizontal resizing of the graph. Default: `false`.                                                    |
+
 #### NodeTheme
 
 | Prop      | Type     | Description                                                           |
@@ -336,11 +369,16 @@ Returns an object of type `GitLogUrls` with the following fields.
 - Straight line prop to turn curves into right angles?
 - Line curve radius prop?
 - Fix React docgen in Storybook controls as its not showing the JSDoc from the interface props
-- Extract ThemeContext
 - Mobile responsiveness for the demo site
-- Add graph render strategy with a second option to use 2d rendering context (html canvas)
 - Add eslint to pipeline
 - Tags should be independent. Add a new optional field to the log entry / commit objects.
 - Branch / Tags column is fixed. Dynamically floor it to match the max tag size currently being rendered?
-- Is the SS paginated log gonna accept data from multiple branches? Because then we need the HEAD commits of each branch
-- Make repository URL a function that generates the URL
+
+Canvas2D
+- Paginated variant needs to add in lines off-screen in the virtual columns
+- Fade out of line at bottom
+- Tooltips?
+- Row spacing support
+- First col background cut off by canvas
+- Branch/tag lines to lining up with nodes.
+- Selected node BG colour still isn't right...