Questions about Canvas and custom component

[loloof64]

Hi everyone !

As I plan to build a custom component for a Chess Board in KAS, I am wondering :

• does the kas::draw::ImageId structure supports svg ? I saw that svg is supported in KAS, but what about in custom drawing ?
• can a component (I mean a structure "inheriting" from Widget) expose its custom events to the outside (I mean to other structures/functions using it) ?

[dhardy]

ImageId is basically just a handle to a texture region (see DrawShared).
The existing Svg widget is just some code around resvg libraries to allocate and draw to a texture.

The current draw APIs are quite basic unfortunately. Your best bet might be to use multiple widgets (one for the SVG, another for other draw operations around that). Or to copy the Svg code into your own widget.

[loloof64]

Thank you very much 😃

I think I'll go for the multiple widgets solutions, and so, I'll try to set several widgets one above others (like the z-axis in CSS's World)

• one base layer which draws cells and coordinates
• one top layer which places the svg pieces.

So I need to use at least 2 layouts

• absolute layout (or I say, relative to the origin of my component)
• a kind of stack layout (like the z-axis in CSS)

[dhardy]

For the pieces, use a new widget which wraps the Svg widget and adds event handling. There's a catch: moving widgets to new parents isn't really supported. There are a couple of work-arounds:

1. Make your pieces direct children of the "board" widget. You'll need some manual layout code in set_rect; not hard.
2. Don't have a "piece" widget; just a "cell" widget which has an Option<ImageId>. Use some other code (copied from the Svg widget) to load the SVGs to image handles. Bonus: you only to load graphics for duplicate pieces (like pawns) twice (once for each team).

In the latter case (and possibly also the former), you probably want a special widget for the "grabbed piece", if any.

[loloof64]

Thank you very much for those advices 😃

I'll send a link to my repository whenever I manage to implement the chess board (and eventually an example use case).

Also, I will need the chess board to emit some events (and also receive events from outside), is it possible ?

Indeed, I also plan to

• interact with another widget : history widget, which prints all the moves of a given game
• emit an event to indicate that it is turn of a chess engine to the client code, so that this last one takes the responsibility for generating a new move from an UCI chess engine (e.g the free and open source engine Stockfish)

[loloof64]

Also, for the Drag and Drop operation, I usually do it manually, with "onClick", "onMouseOver", "onRelease" if I can make another comparison with HTML/CSS. So it should not be an issue.

[dhardy]

The tutorial covers messages and event handling. You can either store the history in a parent widget which implements handle_message or you can use shared data (the next tutorial).

You might also want to look at the async-event example and use a proxy to trigger UI update after the chess engine responds with a move.

[loloof64]

Thank you very much.

So I'll try to implement that 😃