ReactSVG Class Component Refactoring 2-zoom,panning編(作成中)

従来のコンポーネント再構成では,Zoom/Panningが完全に適用されないという問題があり,関連する処理を行っていた.
現在のコードステータス(前のタスクの最後のコードを参照)で発生する問題は、次のとおりです.

アニメーションはまだ適用されていません

Panningが切断されました
(setState()に関連するエラー)

Zoom不正

クリックイベントが正常に動作しない

上記の問題を解決できるコードを再作成します.
1.アニメーションの適用
onClickで起動したアニメーションは、次のようになります.
setStateが完了したら、その変数でアニメーションのコードを試します.

function animatingViewBox(target, x, y, width, height){
    gsap.to(target, {
        duration: .5,
        attr: {viewBox: `${x} ${y} ${width} ${height}`},
        ease: "power3.inOut"
    });
}

//중략...

onClick(event){

  console.log('on click event');
  if(event.target.getAttribute('name'))
  {
    let rect = event.target.getBoundingClientRect();

    console.log(event.target.getAttribute('name'));

    this.setState({
      current_viewbox : {
        x : rect.top,
        y : rect.bottom,
        width : rect.width,
        height: rect.height
      }
    },
    () => {
      console.log('set state complete')
      animatingViewBox(this.svg, 
                       this.state.current_viewbox.x, 
                       this.state.current_viewbox.y, 
                       this.state.current_viewbox.width,
                       this.state.current_viewbox.height)
    })
  }
}

動かない.
ログも記録されていますが、ログもコンソールに記録されていません.
イベント割り当て自体は違います.
関連情報の検索中に次のリンクに関する情報が確認された.
上記リンクに対してReactを最適化するのは、JS全体で使用されるaddEventListenerではなく、React自体が使用するonClickである.
コアはイベントの最適化と自動キャンセルのためにREACT自身のイベントon~変数を用いる.
しかし、これはsvgコンポーネントに関する物語ではなくreactコンポーネントに関する物語です.上記のリンクは次のとおりです.

render(){
       return <ReactSVG
            onClick = {this.onClick.bind(this)}
            beforeInjection = {(inject_svg) => {
                this.svg = inject_svg;

                inject_svg.setAttribute('width',`${this.state.current_viewbox.width}`);
                inject_svg.setAttribute('height',`${this.state.current_viewbox.height}`);
                inject_svg.setAttribute('viewBox',`${this.state.current_viewbox.x} ${this.state.current_viewbox.y} ${this.state.current_viewbox.width} ${this.state.current_viewbox.height}`);
                inject_svg.addEventListener('wheel', this.onZoom.bind(this));

                if (window.PointerEvent) {
                    inject_svg.addEventListener('pointerdown', this.onPointerDown.bind(this)); // Pointer is pressed
                    inject_svg.addEventListener('pointerup', this.onPointerUp.bind(this)); // Releasing the pointer
                    inject_svg.addEventListener('pointerleave', this.onPointerUp.bind(this)); // Pointer gets out of the SVG area
                    inject_svg.addEventListener('pointermove', this.onPointerMove.bind(this)); // Pointer is moving
                } else {
                    // Add all mouse events listeners fallback
                    inject_svg.addEventListener('mousedown', this.onPointerDown.bind(this)); // Pressing the mouse
                    inject_svg.addEventListener('mouseup', this.onPointerUp.bind(this)); // Releasing the mouse
                    inject_svg.addEventListener('mouseleave', this.onPointerUp.bind(this)); // Mouse gets out of the SVG area
                    inject_svg.addEventListener('mousemove', this.onPointerMove.bind(this)); // Mouse is moving

                    // Add all touch events listeners fallback
                    inject_svg.addEventListener('touchstart', this.onPointerDown.bind(this)); // Finger is touching the screen
                    inject_svg.addEventListener('touchend', this.onPointerUp.bind(this)); // Finger is no longer touching the screen
                    inject_svg.addEventListener('touchmove', this.onPointerMove.bind(this)); // Finger is moving
                }
        }

しかしSVGElementにのみ興味があり、ReactSVG素子自体のonClick活動には興味がない.
したがって、ReactのComponentではonClick項目が使用され、ElementではaddEventListener項目が使用される.
調査の結果、無条件でpointerdownを通過した.
全体的な修正が必要な点は以下の通りです.

ReactSVG SVGEElementの属性はstateに依存しない
理由

:更新速度が遅くなる(Reactの状態更新処理に係る)