This regroups components build on top of konva-es. Navigation should look familiar to Figma users.

• ScrollableStage.ts is this ex and this one
• Cloud.ts let you draw clouds
• EditableText.ts is this example wrapped in a component with some changes

Here is a demo and the code is bellow:

import { Cloud, EditableText, ScrollableStage } from 'konva-es-components'
import { Layer } from 'konva-es/lib/Layer'

const stage = new ScrollableStage({
    container: 'container', // id of container <div>
    width: window.innerWidth,
    height: window.innerHeight,
})

const layer = new Layer()
stage.add(layer)

const txt = new EditableText({ x: 30, y: 30, width: 300, text: "This is a text" })
layer.add(txt)
txt.on('dragend transformend', (e) => console.log(e))

const cloud = new Cloud({ x: 100, y: 360 })
layer.add(cloud)
cloud.on('dragend transformend', console.log)

const line = new EditableLine({ x: 30, y: 630, points: [0, 100, 20, 40, 300, 0] })
layer.add(line)
line.on('dragend transformend', console.log)

const arrow = new EditableArrow({ x: 30, y: 730, points: [0, 100, 300, 0] })
layer.add(arrow)
arrow.on('dragend transformend', console.log)

Note: to use with konva, just change konva-es by konva in the imports.

Install in your project: npm install konva-es-components

Note: you may need to re-initialize the Transformers if you are coming from an other page and the Layer has been recreated (a router navigation in Angular for example):

resetGlobalKonvaComponentsConf()