Advanced usage

To access its advanced features, you need to understand the mechanics of iinkJS.

So if you have not browsed the documentation yet, we recommand you first following step-by-step iinkJS pages from the Get Started. You will then be able to update the library to your needs. Below, we give further hints on how to customize our technology.

Default behaviors that you can customize

The behaviors are a set of needed features to link the editor with the DOM Element and the MyScript iink Web APIs. A behavior matches a single configuration and is not aimed at changing once configured. See DefaultBehaviors.js for a full list of supported features. Each feature is described below.

Grabber

The Grabber is in charge of catching events and calling editor’s pointer Down/Move/Up interface to trace ink on it. It is the link for interactions from the DOM Element to the editor.

Stroker

The Stroker is aimed at drawing a stroke following the pointerMove editor’s events.

Recognizer

The Recognizer is the interface that requests the MyScript iink Web APIs to update the model. That can be a call to export the model, to convert it. Its interfaces are normalized to abstract the protocol used. Depending on the presence or absence of the method, it can define features, and if possible provide a fallback, such as for the undo/redo feature.

Renderer

The Renderer is in charge of rendering by drawing SVG patches under the root editor DOM Element.

Events

They aim at giving feedback about the changes in the editor, such as an export done or an update on the undo/redo states. Opposite to the grabber, they are the link from the editor to the DOM Element, and will dispatch events once detected.

Customization example - custom grabber

iinkJS comes with a default implementation for the behavior features that you might want to customize. To do so, you have to implement the corresponding feature interface and register the editor with this customized feature.

Let’s take as example the grabber. For the grabber, you need to define both methods attach(element, editor): context and detach(element, context).

The default grabber behavior configuration is overriden by setting your customized grabber as grabber when registering the editor. So, to sum up:

// Custom grabber : implement attach and detach methods
function attach(element, editor) {
    ...
}

function detach(element, context) {
    ...
}

const customGrabber = {
  attach,
  detach
};


// editor registration with your customGrabber
    iink.register(editor, {
      recognitionParams ...
    }, undefined, undefined, {
      grabber: customGrabber
    });

For a customized grabber full example, you can refer to the multiple input example. It uses a custom grabber to switch editors when pointer moves over different input fields.

We use cookies to ensure that we give you the best experience on our website Read the privacy policy