отключите панорамирование одним пальцем в библиотеке angular «ngx-pinch-zoom» и используйте два пальца для панорамирования

Question

Я пытаюсь разработать приложение для рисования с angular. Я использую конву js для свободного рисования на холсте; для моего приложения очень важно иметь возможность масштабирования и увеличения, поэтому я пытаюсь использовать библиотеку "ngx-pinch-zoom". По умолчанию библиотека использует касание одним пальцем для панорамирования, к сожалению, для рисования на холсте я использую касание. Чтобы решить этот конфликт, я думаю, что есть два решения; лучший способ: использовать касание одним пальцем для рисования и касание двумя пальцами для панорамирования. Второе решение: отключить панорамирование по умолчанию и включить его только условно, например, когда пользователь нажимает кнопку. ngx-pinch-zoom позволяет отключить панорамирование с помощью [disablePan] = "true", но я не могу повторно включить панорамирование после нажатия кнопки. СПАСИБО ЗА ВАШУ ПОМОЩЬ.

Использование ngx-pinch-zoom не является обязательным, и если вы считаете, что другая библиотека справляется с этой задачей, пожалуйста, поделитесь своим мнением.

Вот home.component. html:

//togglepan is a function that changes disablePan property in home.component.ts
<button (click)="togglePan()">toggle panning</button>
  Tool:
  <select id="tool">
    <option value="brush">Brush</option>
    <option value="eraser">Eraser</option>
  </select>

  //the element inside <pinch-zoom> gets zoom functionality
  <pinch-zoom
    // this line disables panning when the app runs at first
    [disablePan]="disablePan == true? true:false"
    [double-tap]="false"
    style="height: 700px; width: 100%;"
  >
    <div id="container"></div>
  </pinch-zoom>

И это home.component.ts Я вставил полный код, но я думаю, что только несколько первых строк относятся к вопросу!

import { Component, OnInit} from "@angular/core";
import Konva from "konva";

@Component({
  selector: "app-home",
  templateUrl: "home.component.html",
  styleUrls: ["home.component.scss"],
})
export class HomeComponent implements OnInit {
  constructor() {}
//DISABLE PAN
  disablePan = true;
// FUNCTION TO ENABLE/DISABLE PANNING
  togglePan() {
    this.disablePan = !this.disablePan;
    console.log(this.disablePan);
  }
// FROM HERE TO THE END HANDLES KONVAJS
  ngOnInit() {
    var width = window.innerWidth;
    var height = window.innerHeight - 200;

    // first we need Konva core things: stage and layer
    var stage = new Konva.Stage({
      container: "container",
      width: width,
      height: height,
    });

    var layer = new Konva.Layer();
    stage.add(layer);
    // then we are going to draw into special canvas element
    var canvas = document.createElement("canvas");
    canvas.width = stage.width();
    canvas.height = stage.height();

    // created canvas we can add to layer as "Konva.Image" element
    var image = new Konva.Image({
      image: canvas,
      x: 0,
      y: 0,
    });
    layer.add(image);
    stage.draw();
    // Good. Now we need to get access to context element
    var context = canvas.getContext("2d");
    context.strokeStyle = "#4422e3";
    context.lineJoin = "round";
    context.lineWidth = 3;

    var isPaint = false;
    var lastPointerPosition;
    var mode = "brush";
    // now we need to bind some events
    // we need to start drawing on mousedown
    // and stop drawing on mouseup
    image.on("mousedown touchstart", function () {
      isPaint = true;
      lastPointerPosition = stage.getPointerPosition();
      var pos = stage.getPointerPosition();
      var lastLine = new Konva.Line({
        stroke: "#4422e3",
        strokeWidth: 3,
        globalCompositeOperation: "source-over",
        //mode === 'brush' ? 'source-over' : 'destination-out',
        points: [pos.x, pos.y, pos.x + 1.5, pos.y],
        lineJoin: "round",
        lineCap: "round",
      });
      //console.log(lastLine.points())
      layer.add(lastLine);
      layer.batchDraw();
    });
    // will it be better to listen move/end events on the window?

    stage.on("mouseup touchend", function () {
      isPaint = false;
    });
    // will it be better to listen move/end events on the window?

    stage.on("mouseup touchend", function () {
      isPaint = false;
    });

    // and core function - drawing
    stage.on("mousemove touchmove", function () {
      if (!isPaint) {
        return;
      }

      if (mode === "brush") {
        context.globalCompositeOperation = "source-over";
      }
      if (mode === "eraser") {
        context.globalCompositeOperation = "destination-out";
      }
      context.beginPath();

      var localPos = {
        x: lastPointerPosition.x - image.x(),
        y: lastPointerPosition.y - image.y(),
      };
      context.moveTo(localPos.x, localPos.y);
      var pos = stage.getPointerPosition();
      localPos = {
        x: pos.x - image.x(),
        y: pos.y - image.y(),
      };
      context.lineTo(localPos.x, localPos.y);
      context.closePath();
      context.stroke();

      lastPointerPosition = pos;
      layer.batchDraw();
    });

    var select = <HTMLInputElement>document.getElementById("tool");
    select.addEventListener("change", function () {
      mode = select.value;
    });
  }
}