Konva - conditionally change rectangle color while dragging

Question

I am developing something similar to a Gantt-Chart using a Konva wrapper for Vue.js. I basically have a group which contains a rectangle (and some other elements which are irrelevant in this case). The group is draggable and I would like to change the fill color of the rectangle if the group overlaps another group while dragging. I have already implemented the logics for putting a flag which says whether the dragged group is overlapping, but I fail at changing the fill color. The mechanism looks like this:

  //--- config object for the group: ---
   groupTemplate: { 
          name: "test",
          x: 100,
          y: 100,
          width: 100, 
          height: 20,
          draggable: true,
          dragBoundFunc: function (pos) {
            return {
              x: getXPos(pos.x),
              y: this.getAbsolutePosition().y       //prevents vertical dragging
            }
          }
        }

The crucial part is the getXPos function. It basically sets a boolean to "true" if we are overlapping:

 function getXPos(posx) {
    ...    
    / *** check if we are overlapping, then: *** /
    ...
    if (overlapping)
      myDraggedGroup.rect.fill = "#4b9161"
    else 
      myDraggedGroup.rect.fill = "#f49542"

  }

However, this fails to work. The rectangle's color changes only AFTER having dragged the group, not WHILE we are still dragging it. I assume that I have to manually invoke some Konva "redrawing" function, but that's the part where I am stuck. Any ideas? Thanks in advance!

Just found a solution, check my answer. It indeed involved a dragmove event listener. Thanks for the hint! — zunnzunn, Aug 30 '18 at 13:07

score 1 · Accepted Answer · answered Aug 30 '18 at 13:06

I found the answer in the meantime by myself. The solution was to add a @dragmove event listener to the whole group and obtain the element we wish to modify (in my case it was the rectangle inside the group) using getStage()and then fill() to change the color.

Template:

 <v-group ... @dragmove="onDragmoveGroup($event)" ...>
        <!-- the actual rectangle -->
        <v-rect :config="plan.rect"></v-rect>
         ....
 </v-group>

Script:

methods: {
      ...
     onDragmoveGroup(self) {
        let rect = self.$children[0].getStage()  // get rectangle
        if (overlapping)
            rect.fill("#FFF")
        else
            rect.fill("#000")
      }
    ...
}

This way, the rectangle changes it's fill color WHILE being dragged.

Konva - conditionally change rectangle color while dragging

1 Answers1