Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extending Style attributes #286

Open
mlohbihler opened this issue Sep 25, 2024 · 10 comments
Open

Extending Style attributes #286

mlohbihler opened this issue Sep 25, 2024 · 10 comments

Comments

@mlohbihler
Copy link

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
Copy link
Collaborator

shakiba commented Sep 26, 2024

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
Copy link
Collaborator

zOadT commented Sep 26, 2024

Hey! I think this should work:

import "planck";

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

@mlohbihler
Copy link
Author

mlohbihler commented Sep 27, 2024

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
Copy link
Author

mlohbihler commented Sep 27, 2024

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
Copy link
Collaborator

zOadT commented Sep 27, 2024

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
Copy link
Collaborator

shakiba commented Oct 10, 2024

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

@mlohbihler
Copy link
Author

mlohbihler commented Oct 10, 2024

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
Copy link
Author

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
Copy link
Collaborator

shakiba commented Oct 11, 2024

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

@mlohbihler
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants