Extending Style attributes

[mlohbihler]

I'm sure i'm just doing something dumb, but i can't figure this out. For my purpose i ended up writing my own renderer, based loosely on the one in the testbed. I want to be able to allow fixtures and bodies to be able to declare addition renderering styles, but i can't figure out how to extend the Style interface. I'm no expert in typescript, but what i've been able to determine is that the follow should work:

In index.d.ts

import * as planck from 'planck'

export namespace planck {
  export interface Style {
    lineWidth?: number
  }
}

I've tried many variations on this, but no joy. This approach has worked with other libs, but planck seems different somehow. I would greatly appreciate any help.

[shakiba]

I have not tried altering exported types before, so I don't know off the top of my head.

However, would you like to add lineWidth to planck code? Are there other styles that you would like to add?

[zOadT]

Hey! I think this should work:

import "planck";

declare module "planck" {
  export interface Style {
    lineWidth: number
  }
}

[mlohbihler]

Hey! I think this should work:

import "planck";

declare module "planck" {
  export interface Style {
    lineWidth: number
  }
}

Thank you @zOadT! It looks like the key change is to quote the module name. Trying to understand why this is needed though. Is it because the .d.ts file declares a 'namespace' instead of a 'module'?

[mlohbihler]

I have not tried altering exported types before, so I don't know off the top of my head.

However, would you like to add lineWidth to planck code? Are there other styles that you would like to add?

Hi @shakiba. @zOadT answered my question, but lineWidth could certainly be added. (I was going to add drawOrientation for circles too.) This would also require changes to the testbed renderer to implement completely.

Related, i find it low key tedious to create, say, a fixture def, and then create the fixture, and then add the style to the fixture. For my purposes it would be simpler to allow the style definition within the fixture def, and have that copied into the fixture. Is this something others would like as well, or is there a reason it wasn't done this way?

[zOadT]

Hey! I think this should work:

import "planck";

declare module "planck" {
  export interface Style {
    lineWidth: number
  }
}

Thank you @zOadT! It looks like the key change is to quote the module name. Trying to understand why this is needed though. Is it because the .d.ts file declares a 'namespace' instead of a 'module'?

Namespaces are actually meant to declare global Javascript objects and (at first) don't directly have something to do with modules. declare module <path> on the other hand is meant to declare the types when you import a certain path (therefore the path is a string and therefore quoted)

One possible reason your solution with namespaces works for other libs could be that they use something like the --allowUmdGlobalAccess flag (I think we also used this flag before we switched completely to ESM). Because of the way javascript modules evolved, there are libraries that create global objects (in certain cases) and this flag is meant to reflect this. Maybe your libraries also do something entirely different than this with namespaces, but I don't want to go further down this rabbit hole 😄

[shakiba]

I'm making some refactoring in testbed, I will implement lineWidth. What drawOrientation is expected to do?

[mlohbihler]

I'm making some refactoring in testbed, I will implement lineWidth. What drawOrientation is expected to do?

It's only used for circles to decide whether to draw the line from the center to the perimeter corresponding to the body's angle.

[mlohbihler]

I'm making some refactoring in testbed, I will implement lineWidth. What drawOrientation is expected to do?

Hey, also, although this is not the right place to ask, i wondered if adding my current project to the "Science and AI" section of "Made with plank" would be a possibility: https://serotonin.ai

[shakiba]

Sure please feel free to add a link (please add direct link to the page that has something made with planck)

[mlohbihler]

Sure please feel free to add a link (please add direct link to the page that has something made with planck)

Ah, right. Planck is foundational to the whole app, but it's not obvious how at the intro levels. I'll add a link that goes straight to the main challenge.

[shakiba]

I added lineWidth in v1.3.0