6 posts tagged with "typescript"

Introduction​

Web Components have been around for quite some time now, but it's probably fair to say that they have not reached the widespread adoption that in the early days it seemed they might. I never really started using them for various reasons:

• Incomplete browser support JsPlumb needs to work on as many browsers as possible and does not have the luxury of requiring the latest browsers. It took quite some time for all of the major browsers to bring their web components support up to the spec.
• Relatively poor documentation Nowadays there's a wealth of articles discussing web components, including a great one on MDN, but this was not the case at first.
• Clunky developer interface This is of course a subjective viewpoint, but it's certainly not just me who thought so. One of the fundamental issues for me was trying to figure out how they could be composed as easily as something like React/Angular etc, particularly when the only input to a web component is through its attributes, and they have to be strings.

Recently I've been looking at web components anew: with the upcoming 7.x release of JsPlumb we're keen to explore all opportunities to use up-to-date technologies, and we thought web components deserved a second look. There seems to be a groundswell of people adopting them, and so we're interested in exploring if there's any value for our licensees in us adding some kind of web components support.

Specifically, we're wondering if we can support something like this:

One of the core concepts when working with components in Angular is that of @Inputs and @Outputs. For instance, maybe you have some component that expects to be told what text to use as its title, and which will output an event when the user clicks a button:

@Component({
    selector:"app-my-component",
    template:`
        <div>
            <h1>{{title}}</h1>
            <button class="btnEmit" (click)="emitEvent('test')">Click Me</button>
        </div>    
    `
})
export class MyComponent {
  @Input() title:string

  @Output() outputEvent = new EventEmitter<string>()

  emitEvent(value:string) {
    this.outputEvent.emit(value)
  }
}

From version 5.6.2, JsPlumb's Angular integration now offers a couple of ways of working with these that earlier versions did not support.

The jsPlumb Toolkit has five connector types available:

• Bezier
• Straight
• Orthogonal
• StateMachine
• Segmented

Together these connectors cater for quite a few use cases, but if none of these are exactly what you need, it is possible to define your own custom connectors. In this post we'll take a look at how to do that, by defining a connector that provides a line taking the form of a triangle wave between its two endpoints.

After several months of development we are pleased to announce that version 5.0.0 of both the Toolkit and Community editions of JsPlumb have recently been released. The 5.x releases are:

• smaller
• faster
• tree shakeable
• better documented

and offer a simpler, more standardised API - without sacrificing any features. The new codebase for JsPlumb provides a solid platform for us to go on and build the next evolution.

Following on from part 1 of this series, in which we created a visualisation for the progress of each of the group stages, in today's installment we're going to take a look at drawing the post-group stages using JsPlumb's Hierarchical layout.

It's world cup time again and I've been looking for a good overview of how it's all progressing in the group stages. Being a computer programmer I of course spent a small amount of time looking for one done by someone else, and then decided to just do it myself. With the trusty jsPlumb Toolkit at my disposal I figure it'll be a doddle.