/advanced/create-custom-shapes

[giscus[bot]]

/advanced/create-custom-shapes

Seamless, headless and fully-tested HTML5 canvas library that provides a couple of high level APIs

https://pikaso.app/#/advanced/create-custom-shapes

[aheadweb]

Hello. If I want to create a combined shape that consists of basic components. What would be the best practice for this approach.

I tried using this approach. TypeScript tells me that this way is wrong. However it works

class CombineShapeDrawer extends ShapeDrawer<Konva.Group,Konva.GroupConfig>
class CombineShape extends ShapeModel<Konva.Group, Konva.GroupConfig>

Now I use this approach, but it seems to me that it is not very concise and good.

const combineShapeBuilder = (editor: Pikaso, shapeConfig: CombineShapeConfig) => {
  const shapes = {
    line: editor.shapes.line.insert(shapeConfig.line),
    text: editor.shapes.label.insert(shapeConfig.label),
  }
  editor.board.groups.attach(Object.values(shapes), shapeConfig.id)
  // ... 
  // Customizing Shape Behavior
}

[aheadweb]

I meant that in this approach I cannot use a group. I am getting a type error

class CombineShapeDrawer extends ShapeDrawer<Konva.Group,Konva.GroupConfig>

like this

Type 'Group' does not satisfy the constraint 'Shape<ShapeConfig>'.
Type 'Group' is missing the following properties from type 'Shape<ShapeConfig>': _centroid, colorKey, _fillFunc, _strokeFunc, and 88 more

However, ShapeModel supports Konva.Group

[raminious]

Can you provide me a Codesandbox, like I did, so I can look into it and better help you?

[aheadweb]

The error I'm talking about on line 45 of the curve-shape file
https://codesandbox.io/s/pikaso-curvedrawer-via-group-shape-ts-error-xtfrh9?file=/src/curve-shape.ts

[raminious]

based on declare abstract class ShapeDrawer<T extends Konva.Shape, P extends Konva.ShapeConfig>
It's happening because Konva.Group is not a Konva.Shape
I think you don't need to work with Konva.Group directly and you can leverage Pikaso's group feature.

I'm going dig into that deeply to figure out what is the best practice to do that. Also, I think it would be a good idea to add Curve shape to the core shapes. so any Merge Request is appreciated <3

[aheadweb]

ok thanks for the help