Classes

Classes in yFiles for HTML behave like most developers would expect them to. They have the same semantics that ES2015 classes, C# classes, TypeScript classes, and Java classes use. Classes in the public API can have a constructor and if they don’t have a public constructor they cannot be instantiated by custom code. Class instances may have instance members like methods, which are just functions on the prototype of the class, properties with either or both of setter and getter accessors, as well as simple fields.

Instance member usage

// call the constructor of the class
const inputMode = new GraphEditorInputMode()
// use the instance
graphComponent.inputMode = inputMode

// now use functionality available on the instance of the class

// call methods that are declared on the type of the instance
inputMode.editLabel(label)
// call methods that are declared on the super type of the instance
inputMode.selectAll()
// call methods that are declared on an interface of the instance
inputMode.cancel()
// use properties declared on the type of the instance
inputMode.clickableItems = GraphItemTypes.NODE
// use properties that are declared on the super type of the instance
inputMode.allowClipboardOperations = true
// use properties that are defined on an interface of the instance
inputMode.inputModeContext.canvasComponent.zoom = 2
// register event listeners
inputMode.addNodeCreatedListener(() => console.log('Node Created!'))

Classes can have static members, too. Static members are available on the class itself.

Static member usage

// call static methods of a type:
const greenishColor = Color.fromArgb(100, 10, 255, 10)

// access static fields and properties of a type
const blueColor = Color.LIGHT_BLUE

// static fields are not available on the instance
console.log(blueColor.LIGHT_BLUE === undefined) // logs true
console.log(greenishColor.fromArgb === undefined) // logs true

Extending Classes

Extending a class from the yFiles for HTML API is straightforward and does not require using the class framework infrastructure. In order to derive a custom subclass from a yFiles for HTML API class, different well-known and established techniques can be used. Which one works best for you depends on what language level you are targeting and what tools you are using for authoring your code.

yFiles for HTML supports these techniques for subclassing as well as all technologies that are based on them:

ES2015 class keyword style inheritance
TypeScript class keyword inheritance
Using the yFiles for HTML class framework
prototypal inheritance known from ECMAScript Level 5 and older “classy frameworks”

We recommend using the class keyword support for concise subclassing code. If your application needs to target ECMAScript Level 5 browser implementations, take a look at the various available source-code transpiler options that let you author code using ES2015 and run on ECMAScript Level 5-compatible browsers.Using ES2015 classes at development time has the advantage that you can run your code without a transpiler step in all modern browsers during development.

Extending an existing class using ES2015 class works just as you would expect it to work:

Subclassing using ES2015 class

class CustomGraphEditorInputMode extends GraphEditorInputMode {
  constructor() {
    super()
  }

  marqueeSelect(marqueeRectangle) {
    if (marqueeRectangle.width > 20) {
      super.marqueeSelect(marqueeRectangle)
    }
  }
}

This is almost identical to extending a class using TypeScript’s class keyword:

Subclassing using TypeScript’s class

import { GraphEditorInputMode, Rect } from 'yfiles';

class CustomGraphEditorInputMode extends GraphEditorInputMode {

  constructor() {
    super()
  }

  marqueeSelect(marqueeRectangle: Rect): void {
    if (marqueeRectangle.width > 20) {
      super.marqueeSelect(marqueeRectangle)
    }
  }
}

Starting with yFiles for HTML 2.0.0.1 the TypeScript compiler can be set to either target ECMAScript Level 5 or ES2015.

Using the class support from the yFiles for HTML class framework is compatible with ECMAScript Level 5 and results in a concise declaration:

Subclassing using the yFiles for HTML class framework

const CustomGraphEditorInputMode = yfiles.lang.Class('CustomGraphEditorInputMode', {
  $extends: yfiles.input.GraphEditorInputMode,

  constructor: function () {
    yfiles.input.GraphEditorInputMode.call(this)
  },
  marqueeSelect: function (marqueeRectangle) {
    if (marqueeRectangle.width > 20) {
      yfiles.input.GraphEditorInputMode.prototype.marqueeSelect.call(this, marqueeRectangle)
    }
  }
})

For more detailed background information about class declarations in the class framework, please see the section about classes in the class framework.

Since the underlying technology is compatible with ECMAScript Level 5 prototypal inheritance, this is also an option:

Subclassing using prototypal inheritance

function CustomGraphEditorInputMode() {
  yfiles.input.GraphEditorInputMode.call(this)
}

CustomGraphEditorInputMode.prototype = Object.create(yfiles.input.GraphEditorInputMode.prototype)
CustomGraphEditorInputMode.prototype.constructor = CustomGraphEditorInputMode
CustomGraphEditorInputMode.prototype.marqueeSelect = function (marqueeRectangle) {
  if (marqueeRectangle.width > 20) {
    yfiles.input.GraphEditorInputMode.prototype.marqueeSelect.call(this, marqueeRectangle)
  }
}

Using yFiles without npm Interfaces