adding canvas guide

docs/.vitepress/config.mts

@@ -65,6 +65,7 @@ export default defineConfig({
         { text: 'Annotations', link: '/guides/annotations' },
         { text: 'Animations', link: '/guides/animations' },
         { text: 'Benchmark', link: '/guides/benchmarks' },
+        { text: 'Canvas', link: 'guides/canvas'},
         { text: 'Properties', link: '/guides/properties' },
         { text: 'States', link: '/guides/states' },
         { text: 'XML', link: '/guides/xml' },
@@ -113,7 +114,7 @@ export default defineConfig({
                 {text: 'Table', link: 'references/elements/Table'},
                 {text: 'TextBox', link: 'references/elements/TextBox'},
                 {text: 'Tree', link: 'references/elements/Tree'},
-                {text: 'Timer', link: 'references/elements/Timer'},
+                //{text: 'Timer', link: 'references/elements/Timer'},
                 {text: 'ScrollBar', link: 'references/elements/ScrollBar'},
                 {text: 'Slider', link: 'references/elements/Slider'},
                 {text: 'ProgressBar', link: 'references/elements/ProgressBar'},

docs/guides/canvas.md

@@ -0,0 +1,126 @@
+# Canvas Plugin Guide
+
+The Canvas plugin allows you to draw various shapes and text on your elements. It provides a simple yet powerful way to create custom graphics.
+
+## Basic Usage
+
+First, you need to get the canvas object:
+
+```lua
+local main = basalt.createFrame()
+local canvas = main:getCanvas()
+```
+
+## Drawing Functions
+
+### Lines
+Draw a line from point (x1,y1) to (x2,y2):
+```lua
+canvas:line(1, 1, 10, 10, "*", colors.red, colors.black) -- Draws a red line
+```
+
+### Rectangles
+Create rectangles with specified dimensions:
+```lua
+canvas:rect(5, 5, 10, 5, "#", colors.blue, colors.white) -- Creates a blue rectangle
+```
+
+### Ellipses
+Draw ellipses/circles:
+```lua
+canvas:ellipse(10, 10, 5, 3, "@", colors.green, colors.black) -- Creates an ellipse
+```
+
+### Text
+Write text at specific coordinates:
+```lua
+canvas:text(1, 1, "Hello World!", colors.yellow, colors.black)
+```
+
+## Color Management
+
+### Background Colors
+Set background color at specific coordinates:
+```lua
+canvas:bg(1, 1, colors.blue)
+```
+
+### Foreground Colors
+Set foreground color at specific coordinates:
+```lua
+canvas:fg(1, 1, colors.white)
+```
+
+## Render Types
+
+The canvas plugin supports two different render types that control when the canvas commands are executed:
+
+### Setting the Render Type
+```lua
+canvas:setType(type)
+```
+
+Parameters:
+- `type`: String, either "pre" or "post"
+  - `"pre"`: Commands are executed before the main object rendering (default)
+  - `"post"`: Commands are executed after the main object rendering
+
+Example:
+```lua
+-- Create a canvas that renders after the main object
+local canvas = main:addCanvas()
+canvas:setType("post")
+
+-- Add commands that will now execute after main rendering
+canvas:addCommand(function()
+    canvas:drawText(1, 1, "Overlay Text")
+end)
+
+-- or
+canvas:line(1, 1, 10, 10, " ", colors.red, colors.green)
+```
+
+Note: Changing the render type affects all subsequent commands added to the canvas. You can have multiple canvas objects with different render types on the same base object.
+
+## Canvas Commands
+
+Canvas commands allow you to create custom drawing operations using low-level drawing functions. Available commands are:
+- `textFg` - Set text foreground color
+- `textBg` - Set text background color
+- `drawText` - Draw text
+- `drawFg` - Draw foreground colors
+- `drawBg` - Draw background colors
+- `blit` - Draw text with foreground and background colors
+- `multiBlit` - Draw multiple blit operations
+
+### Adding Commands
+
+```lua
+-- Example of proper command usage
+canvas:addCommand(function()
+    -- Draw red text on black background
+    canvas:drawText(1, 1, "Hello")
+    canvas:drawFg(1, 1, colors.red)
+    canvas:drawBg(1, 1, colors.black)
+    
+    -- Or use blit for more efficient drawing
+    canvas:blit(1, 2, "Hello", "fffff", "00000") -- white on black
+end)
+```
+
+### Advanced Blit Example
+
+The multiBlit function allows you to render text efficiently in a rectangular area:
+
+```lua
+canvas:addCommand(function()
+    -- Parameters: x, y, width, height, text, fg, bg
+    canvas:multiBlit(1, 1, 5, 3, 
+        "HelloWorld!Hello", -- text (width * height characters)
+        "ffffffffff", -- fg colors (width * height characters)
+        "0000000000"  -- bg colors (width * height characters)
+    )
+end)
+```
+
+Note: Do not use drawing functions like `line`, `rect`, or `ellipse` inside commands as this will cause render queue issues. Use the low-level drawing functions instead.

node_modules/.vue-global-types/vue_99_0_0_0.d.ts

@@ -72,9 +72,6 @@ export {};
 		'__ctx' extends keyof __VLS_PickNotAny<K, {}> ? K extends { __ctx?: infer Ctx } ? Ctx : never : any
 		, T extends (props: any, ctx: infer Ctx) => any ? Ctx : any
 	>>;
-	type __VLS_OmitStringIndex<T> = {
-		[K in keyof T as string extends K ? never : K]: T[K];
-	};
 	type __VLS_UseTemplateRef<T> = Readonly<import('vue').ShallowRef<T | null>>;
 
 	function __VLS_getVForSourceType<T extends number | string | any[] | Iterable<any>>(source: T): [
@@ -116,6 +113,6 @@ export {};
 		: (_: {} & Record<string, unknown>, ctx?: any) => { __ctx?: { attrs?: any, expose?: any, slots?: any, emit?: any, props?: {} & Record<string, unknown> } };
 	function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [];
 	function __VLS_asFunctionalElement<T>(tag: T, endTag?: T): (attrs: T & Record<string, unknown>) => void;
-	function __VLS_asFunctionalSlot<S>(slot: S): (props: NonNullable<S> extends (props: infer P) => any ? P : {}) => void;
+	function __VLS_asFunctionalSlot<S>(slot: S): S extends () => infer R ? (props: {}) => R : NonNullable<S>;
 	function __VLS_tryAsConstant<const T>(t: T): T;
 }