Transformer interaction

The Konva.Transformer is Konva's built-in approach to help users size, scale and rotate your shapes. The vwRtx has built-in capabilities that allow it to add itself into the transformer when selected or activated, and remove itself when it is deselected.

Additionally, the left and right transformer anchors will modify the width of the vwRtx shape. The corner anchors will scale the font size of the text in the vwRtx, and the top and bottom anchors will adjust the height of the rtx shape.

Note that the shape height will automatically change to fit tightly against the text within the rtx, and no empty space can be left below or above the rtx text. It is possible to disable this default height feature by setting config.autoHeight to false.

In case a specific transform should be used, we can specify the transformer selector as part of the config object for a new vwRtx instance. If a specific transformer is not specified, or the specified transformer cannot be found, then the vwRtx will use the first that it can find on the stage.

Note that if your stage has multiple vwRtx instances then a single transformer can be shared between them - it is not necessary to create a transformer for each vwRtx instance.

// instantiate a transformer for the rtx instances to share
const transformer = new Konva.Transformer({name: 't2', padding: 8, keepRatio: false})

const rtx = new vwRtx({

    host: hostShape,

    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod..."

    transformerSelector: '.t2'
});

In the above example the transformerSelector references the transformer with the name t2. Internally vwRtx uses the Konva.findOne() method to find the transformer.

Transformers with multiple shapes

Whilst vwRtx can do all the work to manage its own selection transformer, if you need to mix vwRtx instances into a transformer with multiple shapes then there is a slightly different approach. In this case we use

vwRtx.addTomultiTransformer(transformer)

This approach is needed because vwRtx uses an internal mode / state to determine how it responds to mouse events. And since there is no listener for 'shape-was-added-to-transformer' we need a method to explicitly inform the vwRtx instance that this has occurred.

See the reference section on addToMultiTransformer for sample code.

There is no opposite method required for removing a vwRtx instance from a transformer - the instance will check its inclusion in a transformer at the next mouse event and respond accordingly.

Deleting a vwRtx instance

When we delete a vwRtx instance we should ensure that the instance is not assigned to a transformer. See the topic on deleting an instance for information about how to do that.