TxRectMode mapbox-gl-draw custom mode

This is the custom mapbox-gl-draw mode which allows to rotate and scale rectangle polygons.

Live demo is here

Features:

• rotate/scale polygons
• options to choose rotation pivot and scale center
• discrete rotation whith SHIFT button pressed
• demo how to transform image

Installation:

npm install git+https://github.com/drykovanov/mapbox-gl-draw-rotate-scale-rect-mode#0.1.10

Usage examples:

First, init MapboxDraw with TxRectMode and styling provided.

There is an example of styling in demo.js and icon set for scaling and rotation.

    import { TxRectMode, TxCenter } from 'mapbox-gl-draw-rotate-scale-rect-mode';
    ...
    const draw = new MapboxDraw({
        displayControlsDefault: false,
        controls: {
        },

        modes: Object.assign({
            tx_poly: TxRectMode,
        }, MapboxDraw.modes),

        styles: drawStyle,
    });

Second, create your rectangle polygon (with turf) and provide it's featureId to changeMode():

    const coordinates = [cUL,cUR,cLR,cLL,cUL];
    const poly = turf.polygon([coordinates]);
    poly.id = <unique id>;

    draw.add(poly);

    draw.changeMode('tx_poly', {
        featureId: poly.id, // required
    });

changeMode('tx_poly', ...) accepts the following options:

• rotatePivot - change rotation pivot to the middle of the opposite polygon side
• scaleCenter - change scaling center to the opposite vertex
• singleRotationPoint - set true to show only one rotation widget
• rotationPointRadius - offset rotation point from feature perimeter
• canScale - set false to disable scaling
• canRotate - set false to disable rotation
• canTrash - set false to disable feature delete

• canSelectFeatures - set false to forbid exiting the mode

  draw.changeMode('tx_poly', {
      featureId: poly.id, // required
  
      canScale: false,
      canRotate: true,    // only rotation enabled
      canTrash: false,    // disable feature delete
  
      rotatePivot: TxCenter.Center,   // rotate around center
      scaleCenter: TxCenter.Opposite, // scale around opposite vertex
  
      singleRotationPoint: true, // only one rotation point
      rotationPointRadius: 1.2, // offset rotation point
  
      canSelectFeatures: true,
  });

  See how scaling and rotation around opposite side works: