Feature: Add customizable foreground canvas and background canvas

[hunkim98]

🚀 [Resolves #77]

Preview

https://github.com/hunkim98/dotting/assets/57612141/01c70678-02ea-41eb-b5f1-e775454ef3f4

Changes

Add foreground canvas and background canvas

• [🪝Hooks] Update useDotting to have getForegroundCanvas and getBackgroundCanvas

  • Users can access the foreground canvas element and background canvas element directly through the functions provided in useDotting
  • Below is an example of how a user could use this

    
    import { useDotting, DottingRef, Dotting } from "dotting";

  const DottingComponent = () => { const { getForegroundCanvas, getBackgroundCanvas } = useDotting(ref);

  // use getForegroundCanvas or getBackgroundCanvas

  return ; };

• [🎨Component] Add additional canvas elements for foreground and background

  • Now we have a total of 5 canvas!

• [📒Docs] Update useDotting documentation for manipulating the foreground and background canvas

Change rendering logic of layers

• [🎨Component] Change offset of rendering

  • Previously, Dotting made the left top point of the grid canvas always become (0,0). This can confusion to people who would like to customize their render logic on foreground canvas or background canvas.
  • Thus, I changed all render logic of the layers to have the leftTopPoint set to the correct index

  const leftTopPoint: Coord = {
    x: this.leftColumnIndex * this.gridSquareLength,
    y: this.topRowIndex * this.gridSquareLength,
  };

  • This enabled me to erase all the unnecessary setPanZoom logic that happened when I extended or shortened the grids of the left or the top direction! This allowed for more optimization!🙏

Notes

Next Up?

[github-actions[bot]]

PR Preview Action v1.4.4 :---: Preview removed because the pull request was closed. 2023-10-29 05:44 UTC

[hunkim98]

Closing this PR since there needs to be some change to the panzoom logic for foreground canvas and background canvas to work

[sonarcloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
6 Code Smells

81.1% Coverage
1.2% Duplication