Dynamically adding objects to Konva stage

[saitho]

I'm trying to add objects to my Konva stage by clicking on buttons.
I adjusted the star example but I can't get it to work. Is there a way to do that? :)

https://gist.github.com/saitho/a244927f4dc9ea73b50eb8f86a833047

[caalbarracinc]

Hi!, I've been trying unsucessfully to implement this aswell, add new shapes dinamically to a stage.
I've tried @saithos aproximation and adding them directly to the layer as if I was using the JavaScript directly but no luck :( , is this task possible with the current library?

[uahic]

I tried this with queryList updates a while ago (when I was totally new to angular 4). I dont use ng2-konva right now, I have an own implementation which uses injectors alot, which uses the fact that each parent component can be injected to childs. The child then can operate on the parent. I will think about whether to continue with my implementation or ng2-konva in the next days. In case Ill go with ng2-konva, you might find the desired feature soon :-)

[YurasovDV]

Had the same issue, gave up and now I'm recreating the whole scene at every change, using *ngIf and ChangeDetectorRef

[SimsonHa]

Are there any updates on this? I am facing the same issue adding shapes in click event.

[piku0709]

Is there any update yet, I also have the same requirement of adding stage, layers, groups and shapes dynamically ?

[rvmn]

In the latest version the above example seems to work fine. Just change the 'rxjs/Observable' -> 'rxjs' and add 'of' as import (of rxjs). Code:
`
import { Component, OnInit, ViewChild } from '@angular/core';
import { BehaviorSubject, Observable,of } from 'rxjs';
import { KonvaComponent } from 'ng2-konva';

@component({
selector: 'star-example',
template:
<ko-stage #stage [config]="configStage">
<ko-layer #layer>
<ko-star *ngFor="let item of list"
[config]="item">


<ko-layer #dragLayer>



<button (click)="addStarBtn()">Adda
<div *ngFor="let item of list">test

})
export class StarExampleComponent implements OnInit {
@ViewChild('stage') stage: KonvaComponent;
@ViewChild('layer') layer: KonvaComponent;
@ViewChild('dragLayer') dragLayer: KonvaComponent;

public width = 800;
public height = 200;
public list: Array = [];

public configStage = Observable.of({
width: this.width,
height: this.height
});

public addStarBtn() {
this.addStar();
this.layer.getStage().draw();
}

protected addStar() {
const scale = Math.random();
this.list.push(
new BehaviorSubject({
x: Math.random() * 800,
y: Math.random() * 200,
rotation: Math.random() * 180,
numPoints: 5,
innerRadius: 30,
outerRadius: 50,
fill: '#89b717',
opacity: 0.8,
draggable: true,
scaleX: scale,
scaleY: scale,
shadowColor: 'black',
shadowBlur: 10,
shadowOffsetX: 5,
shadowOffsetY: 5,
shadowOpacity: 0.6,
startScale: scale
})
);
}

public ngOnInit() {
for (let n = 0; n < 10; n++) {
this.addStar();
}
}
}
`.
Please add this example to the examples, and this issue can be closed.

[harnoor1996]

The mentioned example does not add star on button click.
It updates the array but does not add it to the layer. After inspecting the stage and layer, the number of children in the layer remain unchanged

[buseodaci]

Any updates ? The issue still continues .

[angelzabala]

guys maybe you just need to add stage.batchDraw() after u add the figure dinamically in order to update the layer, this worked for me

[SarathMohandas]

Any updates ? The issue still there . Kindly share demo @ stackblitz

[SarathMohandas]

The mentioned example does not add star on button click. It updates the array but does not add it to the layer. After inspecting the stage and layer, the number of children in the layer remain unchanged

Any breakthrough?

[robertKamrowski]

Any updates here ?