[TS defs] GraphicsOptions with optional GraphicsStyles

[SBCGames]

Currently, when creating Graphics GameObject with GraphicsOptions as config, it is necessary to enter all properties: x, y, lineStyle and fillStyle. In JS it is possible to pass only x and y. It is because GraphicsOption is intersection type made of GraphicsStyles and x and y. Both properties in GraphicsStyles are non-optional and must be entered.

Solution to this is to change definition of GraphicsOptions type from

declare type GraphicsOptions = GraphicsStyles & {

to

declare type GraphicsOptions = Partial<GraphicsStyles> & {

Partial<T> is mapped type that makes all properties of T optional

To generate this from doc it is enough to change this line in Graphics.js

/**
 * Options for the Graphics game Object.
 *
 * @typedef {object} GraphicsOptions
 * @extends GraphicsStyles
 *
 * @property {number} x - The x coordinate of the Graphics.
 * @property {number} y - The y coordinate of the Graphics.
 */

to

/**
 * Options for the Graphics game Object.
 *
 * @typedef {object} GraphicsOptions
 * @extends Partial<GraphicsStyles>
 *
 * @property {number} x - The x coordinate of the Graphics.
 * @property {number} y - The y coordinate of the Graphics.
 */

[digitsensitive]

Thank you for your input @SBCGames. I have a similar problem with GraphicsOptions, although I am not sure if the same. Your solution did not solve the problem in my case.

Problem at start:

ERROR in /***/mainMenuScene.ts
[tsl] ERROR in /***/mainMenuScene.ts(40,44)
      TS2345: Argument of type '{ fillStyle: { color: number; }; }' is not assignable to parameter of type 'GraphicsOptions'.
  Type '{ fillStyle: { color: number; }; }' is not assignable to type 'GraphicsStyles'.
    Property 'lineStyle' is missing in type '{ fillStyle: { color: number; }; }'.

After changing the declare line:

ERROR in /***/mainMenuScene.ts
[tsl] ERROR in /***/mainMenuScene.ts(40,44)
      TS2345: Argument of type '{ fillStyle: { color: number; }; }' is not assignable to parameter of type 'GraphicsOptions'.
  Type '{ fillStyle: { color: number; }; }' is not assignable to type 'Partial<GraphicsStyles>'.
    Types of property 'fillStyle' are incompatible.
      Type '{ color: number; }' is not assignable to type 'GraphicsFillStyle'.
        Property 'alpha' is missing in type '{ color: number; }'.

Did not find a solution so far. Any ideas?

EDIT:

Ok now I understood.

declare type GraphicsOptions = Partial<GraphicsStyles> & {worked indeed.

Additionally I would make alpha in GraphicsLineStyle and in GraphicsFillStyle optional (default: 1). Even x and y in GraphicsOptions could be actually optional. What do you think?

[SBCGames]

@digitsensitive Hi, it looks like your fill style looks like: fillStyle: {color: some_color} But fillStyle has type GraphicsFillStyle and this type requires color AND alpha.

Something like this works for me:

            let render = scene.add.graphics(
                {
                    x: this.x,
                    y: this.y,
                    fillStyle: {
                        color: 0xFF0000,
                        alpha: 1
                    }
                });

Notice, I am omitting lineStyle in config - Partial made it optional (as well as fillStyle). But if I decided to define it, I would have to fill complete GraphicsLineStyle (which means: width, color, alpha)