What is the best way to drag a transformer by dragging from empty areas in Konvajs?

Question

I'm currently following this guide to select shapes in the stage and put them inside a Transformer. If possible, I'd like to drag an entire Transformer with all of its content without touching any of the shapes inside.

For example, I have two lines that are far from each other. Both of them are nodes inside a Transformer and can be dragged as long as I click one of those 2 lines. However, if I tried to drag from any of the empty area inside the Transformer nothing would happen (or the transformer would reset, depending on the code).

I'm thinking of adding a transparent Rect (this Rect will always have the same size as the Transformer) to the Transformer and then add any other shape that I want inside the Transformer. Since both the Rect and the Transformer have the same size, I could easily drag the entire Transformer from any "empty area" where my other shapes are not located.

I'm not sure if this is the correct/efficient way to do it. How should I tackle this issue to obtain the best outcome?

I agree that there seems to be no 'draggable' option for the transformer. It is described in the docs as a 'special kind of group'. I assume that a group is a list of shapes that are, well, grouped for various operations which includes dragging. But it seems sensible that whilst the shapes are in a collection the space between them is not part of that grouping. So what you see when you drag one shape in a group is all shapes in the group being offset individually by the same amount.Your suggestion of adding a temporary transparent rect for dragging the transformer seems sensible - go for it. — Vanquished Wombat

lavrton lavrton · Accepted Answer · 2020-07-17T14:21:50

There is an experimental property shouldOverdrawWholeArea for Konva.Transformer. It is not in the docs yet.

If you set it to true the whole transformer area will be available for drag.

But if you have a transformer on top of other shapes, then shapes will be not listening for regular events (such as click, touchstart etc). Because the transformer rectangle will overdraw hit area of attached shapes. Even will start working as soon, as you remove such a transformer from them.

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth - 20,
  height: window.innerHeight - 20
});

const layer = new Konva.Layer();
stage.add(layer);

const shape1 = new Konva.Circle({
  x: 70,
  y: 70,
  radius: 50,
  fill: 'green'
});
layer.add(shape1);

const shape2 = shape1.clone({
   x: 190,
   y: 90
})
layer.add(shape2);

const tr = new Konva.Transformer({
  nodes: [shape1, shape2],
  shouldOverdrawWholeArea: true
});

layer.add(tr);

layer.draw();

<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<div id="container"></div>

What is the best way to drag a transformer by dragging from empty areas in Konvajs?

1 Answers