Create custom components

[Sadzeih]

Is it possible to create custom components that always have some pre-existing behaviour.

I'd like to create and visual programming interface with blocks that can be linked to each other. A bit like Unreal Engine 4 Blueprints.

So I'd like to make for example a FloatBlock component that always has some particular behaviour.

[ronnyek]

I'm too looking into this. We'll undoubtedly need to create components that have templates defined, and define interactions within.

I'd like to do:

<ko-stage...>
  <ko-layer>
      <my-component></my-component>
  </ko-layer>
</ko stage>

And then just have my component be rendered as a a ko-group with its own components.

I tried to inherit from CoreShapeComponent, but library itself didn't appear to want to support that much at all. If we could that, it should be fairly easy to expose relative/absolute coordinates to do things like anchor lines at places on those components.

I tried forking and seeing issues with adding that, but mostly because I just don't quite understand how all of ng2-konva works.

[Sadzeih]

Happy to see I'm not the only one trying to do that. I tried too but didn't get anywhere. I don't know much about the internals of ng2-konva either so I'd be of little help but I do hope someone can help us.

[ronnyek]

I've played with this a bunch more, and made changes to allow inheritance from CoreShapeComponent (making some of the properties protected etc). I made it so inheritors could just set the shape for the component as "Group", and my custom components seem to at least not be complained about.

I could however not get my custom component to draw its own internals. I think if there were some way to say render this component as if it were a ko-group and the contents would be just more shapes that get shoved into konva tree, that would be huge.

@rafaesc do you have any ideas about how to achieve such a thing? I'd love to use this to build a little workflow diagram editor, but I'd need some way of building a workflow item component, and have it have some inclusive functionality and sub shapes.

[orlyapps]

I got the same problem. And it looks like the react/vue Wrapper has this feature.

[ronnyek]

@rafaesc any ideas? It'd be really sweet to be able to do something like this

[conblem]

parent.component.html

<ko-stage [config]="configStage"> 
  <ko-layer> 
    <app-place></app-place>  <!-- Custom component -->
  </ko-layer> 
</ko-stage> 

This is our custom component:

place.component.ts

import { 
  Component, 
  ElementRef, 
  forwardRef, 
  QueryList, 
  AfterContentInit, 
  ViewChildren, 
  AfterViewInit, 
} from '@angular/core'; 
import { of, Observable } from 'rxjs'; 
import { CoreShapeComponent } from 'ng2-konva'; 
  
@Component({ 
  selector: 'app-place', 
  templateUrl: './place.component.html', 
  styleUrls: ['./place.component.scss'], 
  providers: [ 
    { 
      provide: CoreShapeComponent, 
      useExisting: forwardRef(() => PlaceComponent), 
    }, 
  ], 
}) 
export class PlaceComponent extends CoreShapeComponent implements AfterViewInit, AfterContentInit { 
  @ViewChildren(CoreShapeComponent) 
  public shapes: QueryList<CoreShapeComponent> = new QueryList<CoreShapeComponent>(); 

  public configCircle: Observable<any> = of({ 
    x: 100, 
    y: 100, 
    radius: 70, 
    fill: 'black', 
  }); 

  constructor(elementRef: ElementRef) { 
    super(elementRef); 
    this.nameNode = 'Group'; 
    this.config = of({ 
      x: 100, 
      y: 100, 
    }); 
  } 

  public ngAfterViewInit(): void { 
    super.ngAfterContentInit(); 
  } 

  public ngAfterContentInit(): void {} 
} 

place.component.html

<ko-circle [config]="configCircle"></ko-circle> 

@Sadzeih
@ronnyek
@orlyapps