feat(canvas): allow customize below layer (#56)

```ts
class CustomBackground extends Component {
    render() {
        return <div>Custom Background</div>;
    }
}

const graph = new Graph({
    settings: {
        background: Background,
    },
});
```

Author: draedful

src/components/canvas/layers/belowLayer/BelowLayer.ts

@@ -42,6 +42,7 @@ export class BelowLayer extends Layer<TBelowLayerProps, TBelowLayerContext> {
 
     this.performRender = this.performRender.bind(this);
     this.context.graph.on("camera-change", this.performRender);
+    this.props.graph.rootStore.settings.$background.subscribe(this.performRender);
   }
 
   protected unmount() {
@@ -61,6 +62,6 @@ export class BelowLayer extends Layer<TBelowLayerProps, TBelowLayerContext> {
   }
 
   public updateChildren() {
-    return [Background.create()];
+    return [(this.props.graph.rootStore.settings.$background.value || Background).create({})];
   }
 }

src/store/settings.ts

@@ -2,6 +2,7 @@ import { computed, signal } from "@preact/signals-core";
 
 import type { Block, TBlock } from "../components/canvas/blocks/Block";
 import { BlockConnection } from "../components/canvas/connections/BlockConnection";
+import { Component } from "../lib";
 
 import { TConnection } from "./connection/ConnectionState";
 
@@ -29,6 +30,7 @@ export type TGraphSettingsConfig<Block extends TBlock = TBlock, Connection exten
   showConnectionLabels: boolean;
   blockComponents: Record<string, typeof Block<Block>>;
   connection?: typeof BlockConnection<Connection>;
+  background?: typeof Component;
 };
 
 const getInitState: TGraphSettingsConfig = {
@@ -54,6 +56,10 @@ export class GraphEditorSettings {
     return this.$settings.value.blockComponents;
   });
 
+  public $background = computed(() => {
+    return this.$settings.value.background;
+  });
+
   public $connection = computed(() => {
     return this.$settings.value.connection;
   });