Cytoscape.js DragFree не запущен с делегатом в приложении React с динамическим узлом - PullRequest
Новая
       13

Cytoscape.js DragFree не запущен с делегатом в приложении React с динамическим узлом

0 голосов
/ 02 мая 2019

Я пытаюсь прослушать событие DragFree для обновления данных позиции на узлах, которые были добавлены динамически. Я полагаю, что правильно использую «узел» Выбор делегата из-за того, что могу определять «Свободно», «Нажать», «Нажать» и «Выбрать», но не DragFree.

Я не связываю события во время cy.add (), я использую Выбор узла делегата для каждой документации. Как указано выше, «free» запускается, но у меня есть другие прослушиватели событий, такие как «tap» или «click», которые также запускают событие «free», поэтому я надеюсь использовать «dragfree», чтобы изолировать код обновления позиции от других Обработка событий.

Это составная диаграмма с использованием предустановленного макета. 

 const that = this;  //CY Context uses 'This' Keyword - React Instance Assigned to 'That' to avoid Reference Collision
                     //Inside CY Event Handlers

      //Delegate Selector Listener 
      //** that. = this.  fix for cy this keyword **

        cy.on('click', 'node',  (evt) => {
              console.log('Select Event');
              cy.elements().removeClass('selected');
              let selectedNode = cy.$('#'+evt.target.id());
              selectedNode.addClass('selected');
              that.loadSelectedAsset(evt.target.id());
        });

        cy.on('dragfree',  'node', (evt) => {
              console.log('DragFree Event');
              let selectedNode = cy.$('#'+evt.target.id());
              selectedNode.addClass('selected');
              return that.props.dispatch(updateDiagramPosition(evt.target.id(), evt.target.position('x'), evt.target.position('y')))
                        .then((asset) => {
                            that.saveDiagram();
                        })
                    that.loadSelectedAsset(evt.target.id());
         });

        //Dynamically Added Node
        let xposition= 0;
        let yposition= 0;
        let nodeObjAr = [];
        this.props.siteAssetData.map(asset => {
          let cyNodeObj = {
               data: {
                       id: asset._id,
                       parent: this.state.siteId,
                       label: asset.name
                     },
                       position:{x: xposition, y:yposition},
                       classes: assetFunction.toLowerCase().replace(/\s/g, ''),
                       group: "nodes",
                     }
          nodeObjAr.push(cyNodeObj);
        });
        cy.add(nodeObjAr);

Я бы хотел отделить свою обработку на основе события.

  • cy.on ('click', 'node', (evt) => ...

  • cy.on ('dragfree', 'node', (evt) => ...

, где 'dragfree' не запускается при 'select' и наоборот

...