Diagram: Api

app.html

<template>
  <div id="example">
    <div id="apiOptions" class="box wide">
        <div class="box-col">
            <h4>Add Shape</h4>
            <ul class="options">
                <li>
                    <label for="newShapeX" style="width: 30px;">X:</label>
                    <input ak-numerictextbox="k-value.two-way: newShapeX" />
                </li>
                <li>
                    <label for="newShapeY" style="width: 30px;">Y:</label>
                    <input ak-numerictextbox="k-value.two-way: newShapeY" />
                </li>
                <li>
                    <button type="button" ak-button click.delegate="addShape()">Add</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Add Connection</h4>
            <ul class="options">
                <li>
                    <label for="fromShapeIndex" style="width: 90px;">From Index:</label>
                    <input ak-numerictextbox="k-value.two-way: fromShapeIndex; k-min.bind: 0; k-format: n0; k-decimals.bind: 0" />
                </li>
                <li>
                    <label for="toShapeIndex" style="width: 90px;">To Index:</label>
                    <input ak-numerictextbox="k-value.two-way: toShapeIndex; k-min.bind: 0; k-format: n0; k-decimals.bind: 0" />
                </li>
                <li>
                    <button type="button" ak-button click.delegate="addConnection()">Add</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Remove:</h4>
            <ul class="options">
                <li>
                    <button type="button" ak-button click.delegate="remove()">Remove Selected</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Select Shape</h4>
            <ul class="options">
                <li>
                    <label for="selectShapeIndex">Select At:</label>
                    <input ak-numerictextbox="k-value.two-way: selectShapeIndex; k-min.bind: 0; k-format: n0; k-decimals.bind: 0" />
                </li>
                <li>
                    <button type="button" ak-button click.delegate="select()">Select</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Zoom/Pan</h4>
            <ul class="options">
                <li>
                    <input ak-slider="k-min.bind: 0.1; k-max.bind: 2; k-show-buttons.bind: false; k-value.two-way: zoom"
                           k-on-change.delegate="zoomDiagram()"/>
                </li>
                <li>
                    <label for="panX">Pan X:</label>
                    <input ak-numerictextbox="k-value.two-way: panX" />
                </li>
                <li>
                    <label for="panY">Pan Y:</label>
                    <input ak-numerictextbox="k-value.two-way: panY" />
                </li>
                <li>
                    <button type="button" ak-button click.delegate="pan()">Pan</button>
                </li>
            </ul>
        </div>
    </div>

    <div class="demo-section k-content wide">
      <ak-diagram view-model.ref="diagramVM"
                 k-widget.two-way="diagram">
      </ak-diagram>
    </div>
  </div>
</template>

app.js

import {TaskQueue, inject} from 'aurelia-framework';

@inject(TaskQueue)
export class API {
  newShapeX = 0;
  newShapeY = 0;
  fromShapeIndex = 0;
  toShapeIndex = 0;
  selectShapeIndex = 0;
  zoom = 1;
  panX = 0;
  panY = 0;

  constructor(taskQueue) {
    this.taskQueue = taskQueue;
  }

  attached() {
    this.taskQueue.queueTask(() => {
      let shape1 = this.diagram.addShape({x: 100, y: 100});
      let shape2 = this.diagram.addShape({ x: 300, y: 100 });
      this.diagram.connect(shape1, shape2);
    });
  }

  addShape() {
    this.diagram.addShape({ x: this.newShapeX, y: this.newShapeY });
  }

  remove() {
    this.diagram.remove(this.diagram.select());
  }

  select() {
    this.diagram.select(this.diagram.shapes[this.selectShapeIndex]);
  }

  zoomDiagram() {
    this.diagram.zoom(this.zoom);
  }

  pan() {
    this.diagram.pan(new kendo.dataviz.diagram.Point(this.panX, this.panY));
  }

  addConnection() {
    let total = this.diagram.shapes.length;
    if (this.fromShapeIndex < total && this.toShapeIndex < total) {
      this.diagram.connect(this.diagram.shapes[this.fromShapeIndex], this.diagram.shapes[this.toShapeIndex]);
    }
  }
}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
    <script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

  aurelia.start().then(a => a.setRoot());
}