update 2020-04-21

source/docs/select_and_transform/Basic_demo.md

@@ -1,18 +1,18 @@
 title: HTML5 Canvas Shape select, resize and rotate
 ---
 
-`Transformer` is a special kind of `Konva.Group`. It allows you easily resize and rotate any shape.
+`Transformer` is a special kind of `Konva.Group`. It allows you easily resize and rotate any node or set of nodes.
 
 To enable it you need to:
 
-1. Create new instance with `new Konva.Transformer`
+1. Create new instance with `new Konva.Transformer()`
 2. Add it to layer
-3. attach to a node with `transformer.attachTo(node)`
+3. attach to node with `transformer.nodes([shape]);`
 
 
 *Note:* Transforming tool is not changing `width` and `height` properties of nodes when you resize them. Instead it changes `scaleX` and `scaleY` properties.
 
-Instructions: select a rectangle. Try to resize and rotate it.
+**Instructions: Try to resize and rotate shapes. Click on empty area to remove selection. Use SHIFT or CTRL to add/remove shapes into/from selection.**
 
 {% iframe /downloads/code/select_and_transform/Basic_demo.html %}
 

source/docs/select_and_transform/Stop_Transform.md

@@ -1,7 +1,7 @@
 title: HTML5 Canvas Stop Shape Transform
 ---
 
-If you need to stop transforming imidiatly you can use `stopTransform` methods of `Konva.Transformer` instance.
+If you need to stop transforming immediately you can use `stopTransform` methods of `Konva.Transformer` instance.
 
 Instructions: Try to resize a shape. If width of the shape is bigger then 200 transforming will be stopped.
 

source/downloads/code/select_and_transform/Basic_demo.html

@@ -24,7 +24,7 @@
       var stage = new Konva.Stage({
         container: 'container',
         width: width,
-        height: height
+        height: height,
       });
 
       var layer = new Konva.Layer();
@@ -37,7 +37,7 @@
         height: 90,
         fill: 'red',
         name: 'rect',
-        draggable: true
+        draggable: true,
       });
       layer.add(rect1);
 
@@ -48,30 +48,50 @@
         height: 90,
         fill: 'green',
         name: 'rect',
-        draggable: true
+        draggable: true,
       });
       layer.add(rect2);
+
+      var tr = new Konva.Transformer();
+      layer.add(tr);
+
+      // by default select the first shape
+      tr.nodes([rect1, rect2]);
+
       layer.draw();
 
-      stage.on('click tap', function(e) {
-        // if click on empty area - remove all transformers
+      stage.on('click tap', function (e) {
+        // if click on empty area - remove all selections
         if (e.target === stage) {
-          stage.find('Transformer').destroy();
+          tr.nodes([]);
           layer.draw();
           return;
         }
         // do nothing if clicked NOT on our rectangles
         if (!e.target.hasName('rect')) {
           return;
         }
-        // remove old transformers
-        // TODO: we can skip it if current rect is already selected
-        stage.find('Transformer').destroy();
 
-        // create new transformer
-        var tr = new Konva.Transformer();
-        layer.add(tr);
-        tr.attachTo(e.target);
+        // do we press shift or ctrl?
+        const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
+        const isSelected = tr.nodes().indexOf(e.target) >= 0;
+
+        // if nothing is pressed and the node is not selected
+        if (!metaPressed && !isSelected) {
+          // select just one
+          tr.nodes([e.target]);
+        } else if (metaPressed && isSelected) {
+          // if we pressed keys and node was selected
+          // we need to remove it from selection:
+          const nodes = tr.nodes().slice(); // use slice to have new copy of array
+          // remove node from array
+          nodes.splice(nodes.indexOf(e.target), 1);
+          tr.nodes(nodes);
+        } else if (metaPressed && !isSelected) {
+          // add the node into selection
+          const nodes = tr.nodes().concat([e.target]);
+          tr.nodes(nodes);
+        }
         layer.draw();
       });
     </script>

source/downloads/code/select_and_transform/Centered_Scaling.html

@@ -24,7 +24,7 @@
       var stage = new Konva.Stage({
         container: 'container',
         width: width,
-        height: height
+        height: height,
       });
 
       var layer = new Konva.Layer();
@@ -35,13 +35,13 @@
         y: 70,
         fontSize: 30,
         text: 'centeredScaling = true',
-        draggable: true
+        draggable: true,
       });
       layer.add(text1);
 
       var tr1 = new Konva.Transformer({
-        node: text1,
-        centeredScaling: true
+        nodes: [text1],
+        centeredScaling: true,
       });
       layer.add(tr1);
 
@@ -50,13 +50,13 @@
         y: 200,
         fontSize: 30,
         text: 'centeredScaling = false',
-        draggable: true
+        draggable: true,
       });
       layer.add(text2);
 
       var tr2 = new Konva.Transformer({
-        node: text2,
-        centeredScaling: false
+        nodes: [text2],
+        centeredScaling: false,
       });
       layer.add(tr2);
 

source/downloads/code/select_and_transform/Force_Update.html

@@ -31,7 +31,7 @@
       var stage = new Konva.Stage({
         container: 'container',
         width: width,
-        height: height
+        height: height,
       });
 
       var layer = new Konva.Layer();
@@ -40,14 +40,14 @@
       var group = new Konva.Group({
         x: 50,
         y: 50,
-        draggable: true
+        draggable: true,
       });
       layer.add(group);
 
       // create new transformer
       var tr = new Konva.Transformer();
       layer.add(tr);
-      tr.attachTo(group);
+      tr.nodes([group]);
       layer.draw();
 
       document.getElementById('button').addEventListener('click', addShape);
@@ -61,7 +61,7 @@
             radius: Math.random() * 100,
             fill: Konva.Util.getRandomColor(),
             stroke: 'black',
-            strokeWidth: Math.random() * 10
+            strokeWidth: Math.random() * 10,
           })
         );
         // force update manually

source/downloads/code/select_and_transform/Keep_Ratio.html

@@ -24,7 +24,7 @@
       var stage = new Konva.Stage({
         container: 'container',
         width: width,
-        height: height
+        height: height,
       });
 
       var layer = new Konva.Layer();
@@ -35,14 +35,19 @@
         y: 70,
         fontSize: 30,
         text: 'keepRatio = true',
-        draggable: true
+        draggable: true,
       });
       layer.add(text1);
 
       var tr1 = new Konva.Transformer({
-        node: text1,
+        nodes: [text1],
         keepRatio: true,
-        enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+        enabledAnchors: [
+          'top-left',
+          'top-right',
+          'bottom-left',
+          'bottom-right',
+        ],
       });
       layer.add(tr1);
 
@@ -51,14 +56,19 @@
         y: 200,
         fontSize: 30,
         text: 'keepRatio = false',
-        draggable: true
+        draggable: true,
       });
       layer.add(text2);
 
       var tr2 = new Konva.Transformer({
-        node: text2,
+        nodes: [text2],
         keepRatio: false,
-        enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+        enabledAnchors: [
+          'top-left',
+          'top-right',
+          'bottom-left',
+          'bottom-right',
+        ],
       });
       layer.add(tr2);
 

source/downloads/code/select_and_transform/Resize_Limits.html

@@ -24,7 +24,7 @@
       var stage = new Konva.Stage({
         container: 'container',
         width: width,
-        height: height
+        height: height,
       });
 
       var layer = new Konva.Layer();
@@ -38,14 +38,14 @@
         fill: 'red',
         name: 'rect',
         stroke: 'black',
-        draggable: true
+        draggable: true,
       });
       layer.add(rect);
 
       var MAX_WIDTH = 200;
       // create new transformer
       var tr = new Konva.Transformer({
-        boundBoxFunc: function(oldBoundBox, newBoundBox) {
+        boundBoxFunc: function (oldBoundBox, newBoundBox) {
           // "boundBox" is an object with
           // x, y, width, height and rotation properties
           // transformer tool will try to fit node into that box
@@ -59,10 +59,10 @@
           }
 
           return newBoundBox;
-        }
+        },
       });
       layer.add(tr);
-      tr.attachTo(rect);
+      tr.nodes([rect]);
       layer.draw();
     </script>
   </body>

source/downloads/code/select_and_transform/Rotation_Snaps.html

@@ -24,7 +24,7 @@
       var stage = new Konva.Stage({
         container: 'container',
         width: width,
-        height: height
+        height: height,
       });
 
       var layer = new Konva.Layer();
@@ -35,15 +35,15 @@
         y: 70,
         fontSize: 30,
         text: 'Rotate me',
-        draggable: true
+        draggable: true,
       });
       layer.add(text);
 
       var tr1 = new Konva.Transformer({
-        node: text,
+        nodes: [text],
         centeredScaling: true,
         rotationSnaps: [0, 90, 180, 270],
-        resizeEnabled: false
+        resizeEnabled: false,
       });
       layer.add(tr1);
 

source/downloads/code/select_and_transform/Stop_Transform.html

@@ -24,7 +24,7 @@
       var stage = new Konva.Stage({
         container: 'container',
         width: width,
-        height: height
+        height: height,
       });
 
       var layer = new Konva.Layer();
@@ -38,17 +38,17 @@
         fill: 'red',
         name: 'rect',
         stroke: 'black',
-        draggable: true
+        draggable: true,
       });
       layer.add(rect);
 
       // create new transformer
       var tr = new Konva.Transformer();
       layer.add(tr);
-      tr.attachTo(rect);
+      tr.nodes([rect]);
       layer.draw();
 
-      tr.on('transform', function() {
+      tr.on('transform', function () {
         var width = rect.width() * rect.scaleX();
         if (width > 200) {
           tr.stopTransform();