The view is a graphic that is displayed on the UI. There are different types of views and each one of them is drawn in a different way (ex: image and text).
To create a view type, you first need to call the canvasUI.view.newType(name) function passing as argument the name of the type, like so:
const buttonType = canvasUI.view.newType("button")
This will return an object that you will use to specify all the data about the type.
After creating the view type, you will be able to define what are the properties that it will have using the .set(property, value) method, like so:
buttonType.set("size", { width: 100, height: 100 }) buttonType.set("background", "#000")
The view element goes through different lifecycle states, and it performs different tasks in each one of them:
Create: It may perform some initial tasks and store some data if needed.
Start: It may compute and store some data that may be used for the next states.
Measure: It computes the size that it has to be taking into consideration the maximum size that was passed in its .measure(maxSize) method and assigns it to its size property.
Locate: It assigns the coords that were passed in its .locate(coords) method to its coords property.
Draw: It draws itself on the canvas using the canvas context that was passed in its .draw(ctx) method.
End: It may perform some final tasks that may be needed.
To perform these tasks, the view will call its lifecycle functions. These functions are implemented differently by every view type and to implement them you have to use the .lifecycle.set(name, func) method, like so:
viewType.lifecycle.set("onCreate", function (view) { // Code })
Notice how the first parameter of the function is the view itself. That happens with every lifecycle function.
The lifecycle functions of the view type that we can use are:
onCreate(view): It is called when the view enters the create state.
onStart(view): It is called when the view enters the start state.
onMeasure(view, maxSize): It is called when the view enters the measure state. The second parameter is the maximum size that was passed in its .measure(maxSize) method.
getSize(view, maxSize): It is called in the measure state. This lifecycle function needs to be implemented and in it the view has to compute and return its size.
onLocate(view, coords): It is called when the view enters the locate state. The second parameter is the coords that were passed in its .locate(coords) method.
onDraw(view): It is called when the view enters the draw state.
drawItself(view, ctx): It is called in the draw state. This lifecycle function needs to be implemented and in it the view has to make all the drawings in the canvas context. The second parameter is the canvas context that was passed in its .draw(ctx) method.
onEnd(view): It is called when the view enters the end state.
To give you a solid understanding about how to create a view type, I will show you how to create a type that consists of a ball.
We first need to create the view type and give it some properties:
const ballType = canvasUI.view.newType("ball") ballType.set("radius", 50) ballType.set("background", "#000")
Now, we are ready to start implementing some lifecycle functions.
We define how the ball will compute its size:
ballType.lifecycle.set("getSize", function (view, maxSize) { let radius = view.get("radius") if (radius > maxSize.width / 2) radius = maxSize.width / 2 if (radius > maxSize.height / 2) radius = maxSize.height / 2 return { width: radius * 2, height: radius * 2 } })
After doing that, we define how the ball will be drawn:
ballType.lifecycle.set("drawItself", function (view, ctx) { ctx.fillStyle = view.get("background") ctx.beginPath() ctx.arc( view.coords.x + view.get("radius"), view.coords.y + view.get("radius"), view.get("radius"), 0, 2 * Math.PI ) ctx.fill() })
The ball type has been created, and now we are ready to use it:
const ball = canvasUI.view.new("ball-1", "ball") ball.set("radius", 100) ball.set("background", "#718190")