feat: Add canvas component & renderer

src/index.ts

@@ -1,5 +1,12 @@
 import "@/style/main.less";
 import { Panel } from "@/ui/panel/panel";
+import { Canvas } from "@/ui/canvas/canvas";
+import { Render } from "@/render/render";
 
 const root = document.getElementById("root");
-new Panel(root);
+
+const canvas = new Canvas(root);
+const render = new Render(canvas);
+
+const panel = new Panel(root);
+panel.linkRenderer(render);

src/render/render.ts

@@ -0,0 +1,24 @@
+import { Disposable } from "@/common/lifecycle";
+import { Canvas } from "@/ui/canvas/canvas";
+
+export class Render extends Disposable {
+    private _ctx: CanvasRenderingContext2D;
+
+    public constructor(private _canvas: Canvas) {
+        super();
+
+        this._ctx = this._canvas.ctx;
+        this._init();
+    }
+
+    private _init() {
+        this._ctx.fillStyle = "#dddddd";
+        this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);
+        this._ctx.fill();
+    }
+
+    /** @todo */
+    public refresh() {
+        console.log("Refreshed.");
+    }
+}

src/style/main.less

@@ -22,15 +22,22 @@ body {
     main#root {
         width: 100vw;
         height: 100vh;
-
-        // display: flex;
-        // justify-content: center;
-        // align-items: center;
-
-        // .panel {
-        //     position: absolute;
-        //     bottom: 20px;
-        // }
+        display: flex;
+        justify-content: center;
+        overflow: hidden;
+
+        canvas.motive-canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+        }
+
+        .panel {
+            position: absolute;
+            bottom: 20px;
+        }
     }
 }
 

src/ui/button/button.less

@@ -35,14 +35,17 @@
     align-items: center;
     gap: 4px;
     margin: 2px;
-    padding: 6px;
-    padding-right: 10px;
+    padding: 6px 10px;
     border: var(--mt-button-border-width) solid;
     border-radius: var(--mt-button-border-radius);
     font-family: NotoSans-SC;
     font-size: 10pt;
     cursor: pointer;
 
+    &:has(svg) {
+        padding-left: 6px;
+    }
+
     svg {
         width: 17px;
         height: 17px;

src/ui/canvas/canvas.less

@@ -0,0 +1,3 @@
+// canvas.motive-canvas {
+
+// }

src/ui/canvas/canvas.test.ts

@@ -0,0 +1,15 @@
+import { Canvas } from "./canvas";
+
+describe("canvas-component-tests", () => {
+    const canvas = new Canvas(document.body);
+
+    it("canvas-properties", () => {
+        expect(canvas.element.classList.contains("motive-canvas")).toBeTruthy();
+    });
+
+    it("canvas-dispose", () => {
+        canvas.dispose();
+
+        expect(canvas.element).toBeNull();
+    });
+});

src/ui/canvas/canvas.tsx

@@ -0,0 +1,53 @@
+import { Component, ComponentLike, IComponent } from "@/ui/ui";
+
+import "./canvas.less";
+
+export interface CanvasOptions {
+    width?: number
+    height?: number
+}
+
+const defaultOptions: CanvasOptions = {
+    width: window.innerWidth,
+    height: window.innerHeight
+};
+
+interface ICanvas extends IComponent {
+    width: number
+    height: number
+    ctx: CanvasRenderingContext2D
+}
+
+export class Canvas extends Component<HTMLCanvasElement, CanvasOptions> implements ICanvas {
+    private _ctx: CanvasRenderingContext2D;
+
+    public constructor(target: ComponentLike, _options?: CanvasOptions) {
+        super(
+            <canvas className="motive-canvas"/>,
+            target,
+            defaultOptions,
+            _options
+        );
+
+        if(this._options.width) this._element.width = this._options.width;
+        if(this._options.height) this._element.height = this._options.height;
+
+        this._ctx = this._element.getContext("2d");
+
+        if(!this._ctx) {
+            throw new Error("Unable to get the 2D context from canvas.");
+        }
+    }
+
+    public get width() {
+        return this._element.width;
+    }
+
+    public get height() {
+        return this._element.height;
+    }
+
+    public get ctx() {
+        return this._ctx;
+    }
+}

src/ui/panel/panel.less

@@ -4,6 +4,7 @@
     // Panel Colors
     --mt-panel-bg: var(--tw-color-gray-100);
     --mt-panel-border: var(--tw-color-gray-200);
+    --mt-panel-toolbar-border: var(--tw-color-gray-300);
 
     // Panel Properties
     --mt-panel-border-radius: 12px;
@@ -20,5 +21,8 @@
     &-toolbar {
         display: flex;
         justify-content: space-between;
+        margin-bottom: 5px;
+        padding-bottom: 5px;
+        border-bottom: 1px solid var(--mt-panel-toolbar-border);
     }
 }

src/ui/panel/panel.tsx

@@ -6,6 +6,7 @@ import { ButtonGroup } from "@/ui/button/buttonGroup";
 import { Switcher } from "@/ui/switcher/switcher";
 
 import "./panel.less";
+import { Render } from "@/render/render";
 
 export interface PanelOptions {
     width?: number
@@ -18,10 +19,14 @@ const defaultOptions: PanelOptions = {
 };
 
 interface IPanel extends IComponent {
-
+    linkRenderer(renderer: Render): void
 }
 
 export class Panel extends Component<HTMLDivElement, PanelOptions> implements IPanel {
+    private _renderer: Render | null = null;
+
+    private _refreshButton: Button;
+
     public constructor(target: ComponentLike, _options?: PanelOptions) {
         super(
             <div className="panel"/>,
@@ -40,8 +45,15 @@ export class Panel extends Component<HTMLDivElement, PanelOptions> implements IP
         toolbarLeftGroup.addButton({ icon: Settings });
         toolbarLeftGroup.addButton({ icon: Box });
 
-        new Button(toolbar, { icon: RotateCw });
+        this._refreshButton = new Button(toolbar, { icon: RotateCw });
+
+        new Switcher(this, { text: "TestObj", icon: Box });
+    }
 
-        new Switcher(this, { text: "TestObj", variant: "primary", icon: Box });
+    public linkRenderer(renderer: Render) {
+        this._renderer = renderer;
+        this._register(this._renderer);
+
+        this._register(this._refreshButton.onClick(() => this._renderer.refresh()));
     }
 }

src/ui/ui.ts

@@ -41,6 +41,8 @@ export abstract class Component<E extends HTMLElement = HTMLElement, O = any> ex
         }
 
         append(this._element, target);
+
+        this._element.setAttribute("data-component", "");
     }
 
     public get element(): E {