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

Allow using custom Konva Shapes with vue-konva #200

Closed
matej-svejda opened this issue Aug 24, 2022 · 3 comments
Closed

Allow using custom Konva Shapes with vue-konva #200

matej-svejda opened this issue Aug 24, 2022 · 3 comments

Comments

@matej-svejda
Copy link

First of all: thanks for the awesome library!

I have a few custom Shapes that are subclasses of Konva.Node. Currently I don't see a way of using those as components with vue-konva. But if KonvaNode would be part of the public interface and also if you could pass it a class instead of a string it would work.

Do you think that this is something you could add?

@lavrton
Copy link
Member

lavrton commented Aug 25, 2022

Take a look how other Konva nodes are registered. E.g. https://github.com/konvajs/konva/blob/master/src/shapes/Circle.ts#L59

Just do the same with your custom shape. Register it in Konva. And you should be able to use it in vue-konva

@matej-svejda
Copy link
Author

Thank you for the response. That solves the issue of passing the class instead of the string to the KonvaNode(...) function for creating a component. But unless I'm missing something, the nodes that are converted to components is hardcoded here

const KONVA_NODES = [
so registering the node with Konva would not change that. So that's why my thought was to add the KonvaNode(...) to the public interface of vue-konva.

@lavrton
Copy link
Member

lavrton commented Sep 6, 2022

Ah, you are right. I missed that.

So there are two ways:

  1. Do not subclass Konva shapes. Using existing primitives and custom Konva.Shape instance. (recommended).
  2. Refactor that code to make public API to register custom shape. Make a Pull Request.

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

2 participants