vue-konva icon indicating copy to clipboard operation
vue-konva copied to clipboard

Allow using custom Konva Shapes with vue-konva

Open matej-svejda opened this issue 1 year ago • 3 comments

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?

matej-svejda avatar Aug 24 '22 15:08 matej-svejda

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

lavrton avatar Aug 25 '22 21:08 lavrton

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 https://github.com/konvajs/vue-konva/blob/566a2e3218ba177e869c71f6d4794cad56320b52/src/index.js#L9 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.

matej-svejda avatar Aug 25 '22 21:08 matej-svejda

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.

lavrton avatar Sep 06 '22 23:09 lavrton