The generation of adsorption reference lines through multi-element dragging is very slow

[ruxinzhang789]

Demo from the official website used,There are 100 elements，use vue-konva,
https://konvajs.org/docs/sandbox/Objects_Snapping.html

<v-stage
id="stagecontent"
ref="stage"
:config="stageSize"
@mousedown="handleStageMouseDown"
@mouseup="handleStageMouseUp"
@touchstart="handleStageMouseDown"
@mousemove="handleStageDrag"
@mouseleave="handleStageMouseUp"
>






<v-rect
v-if="layer.type === 'rect'"
:key="layer.name"
:config="layer"
@transformend="handleElementTransformEnd($event, 'rect')"
@Dragend="handleElementDragEnd($event, 'rect')"
@dragmove="handleElementDragMove($event)"
@Transform="handleElementTransform($event, 'rect')"
/>
<v-text
v-if="layer.type === 'text'"
:key="layer.name"
:config="layer"
@Transform="onTextureTransform"
@DBLClick="onTextureDoubleClicked"
@Dragend="handleElementDragEnd($event, 'text')"
@transformend="handleElementTransformEnd($event, 'text')"
@dragmove="handleElementDragMove($event)"
/>
<v-image
v-if="layer.type === 'image'"
:key="layer.name"
:config="layer"
@transformend="handleElementTransformEnd($event, 'image')"
@Dragend="handleElementDragEnd($event, 'image')"
@dragmove="handleElementDragMove($event)"
@Transform="handleElementTransform($event, 'image')"
/>
<ComputerItem
v-if="layer.type === 'computer'"
:key="layer.name + time"
:config="layer"
:pcInfo="pcInfo"
@custom-dragend="handleElementDragEnd($event, 'computer')"
@custom-transformed="
handleElementTransformEnd($event, 'computer')
"
@custom-dblclicked="onTextureDoubleClicked"
@custom-dragmove="handleElementDragMove($event)"
/>
<StatisticsCom
v-if="layer.type === 'statistic'"
:key="layer.name"
:config="layer"
:statisticsData="statisticsData"
@custom-dragend="handleElementDragEnd($event, 'statistic')"
@custom-transformed="
handleElementTransformEnd($event, 'statistic')
"
@custom-dragmove="handleElementDragMove($event)"
/>
<TableWidget
v-if="layer.type === 'table'"
:key="layer.name"
:config="layer"
@custom-dragend="handleElementDragEnd($event, 'table')"
@custom-transformed="
handleElementTransformEnd($event, 'table')
"
@custom-dragmove="handleElementDragMove($event)"
/>

` handleElementDragMove(e) {
const stage = this.$refs.stage.getNode()
stage.container().style.cursor = 'move'
const layer = this.$refs.layer.getNode()
layer.find('.guid-line').forEach(l => l.destroy())
let lineGuideStops = this.getLineGuideStops(e.target)
let itemBounds = this.getObjectSnappingEdges(e.target)
let guides = this.getGuides(lineGuideStops, itemBounds)
if (!guides.length) {
return
}
this.drawGuides(guides)
let absPos = e.target.absolutePosition()
guides.forEach(lg => {
switch (lg.orientation) {
case 'V': {
absPos.x = lg.lineGuide + lg.offset
break
}
case 'H': {
absPos.y = lg.lineGuide + lg.offset
break
}
}
})
e.target.absolutePosition(absPos)
}

getLineGuideStops(skipShape) {
const transformerNode = this.$refs.transformer.getNode()
const stage = transformerNode.getStage()
var vertical = [0, stage.width() / 2, stage.width()]
var horizontal = [0, stage.height() / 2, stage.height()]
const filterList = this.layers.filter(item => {
return !this.selectedShapeName.includes(item.name)
})
const filterNode = filterList.map(item => {
return stage.findOne('.' + item.name)
})
filterNode.forEach(guideItem => {
// if (guideItem === skipShape) {
// return
// }
var box = guideItem.getClientRect()
vertical.push([box.x, box.x + box.width, box.x + box.width / 2])
horizontal.push([box.y, box.y + box.height, box.y + box.height / 2])
})
return {
vertical: [...new Set(vertical.flat())],
horizontal: [...new Set(horizontal.flat())]
}
},

getObjectSnappingEdges(node) {
  var box = node.getClientRect()
  var absPos = node.absolutePosition()
  return {
    vertical: [
      {
        guide: Math.round(box.x),
        offset: Math.round(absPos.x - box.x),
        snap: 'start'
      },
      {
        guide: Math.round(box.x + box.width / 2),
        offset: Math.round(absPos.x - box.x - box.width / 2),
        snap: 'center'
      },
      {
        guide: Math.round(box.x + box.width),
        offset: Math.round(absPos.x - box.x - box.width),
        snap: 'end'
      }
    ],
    horizontal: [
      {
        guide: Math.round(box.y),
        offset: Math.round(absPos.y - box.y),
        snap: 'start'
      },
      {
        guide: Math.round(box.y + box.height / 2),
        offset: Math.round(absPos.y - box.y - box.height / 2),
        snap: 'center'
      },
      {
        guide: Math.round(box.y + box.height),
        offset: Math.round(absPos.y - box.y - box.height),
        snap: 'end'
      }
    ]
  }
},

getGuides(lineGuideStops, itemBounds) {
  var resultV = []
  var resultH = []
  
  lineGuideStops.vertical.forEach(lineGuide => {
    itemBounds.vertical.forEach(itemBound => {
      var diff = Math.abs(lineGuide - itemBound.guide)
      if (diff < 5) {
        resultV.push({
          lineGuide: lineGuide,
          diff: diff,
          snap: itemBound.snap,
          offset: itemBound.offset
        })
      }
    })
  })

  lineGuideStops.horizontal.forEach(lineGuide => {
    itemBounds.horizontal.forEach(itemBound => {
      var diff = Math.abs(lineGuide - itemBound.guide)
      if (diff < 5) {
        resultH.push({
          lineGuide: lineGuide,
          diff: diff,
          snap: itemBound.snap,
          offset: itemBound.offset
        })
      }
    })
  })
  var guides = []
  var minV = resultV.sort((a, b) => a.diff - b.diff)[0]
  var minH = resultH.sort((a, b) => a.diff - b.diff)[0]
  if (minV) {
    guides.push({
      lineGuide: minV.lineGuide,
      offset: minV.offset,
      orientation: 'V',
      snap: minV.snap
    })
  }
  if (minH) {
    guides.push({
      lineGuide: minH.lineGuide,
      offset: minH.offset,
      orientation: 'H',
      snap: minH.snap
    })
  }
  return guides
},

drawGuides(guides) {
  const layer = this.$refs.layer.getNode()
  guides.forEach(lg => {
    if (lg.orientation === 'H') {
      var line = new Konva.Line({
        points: [-6000, 0, 6000, 0],
        stroke: 'rgb(0, 161, 255)',
        strokeWidth: 1,
        name: 'guid-line',
        dash: [4, 6]
      })
      layer.add(line)
      line.absolutePosition({
        x: 0,
        y: lg.lineGuide
      })
    } else if (lg.orientation === 'V') {
      let line = new Konva.Line({
        points: [0, -6000, 0, 6000],
        stroke: 'rgb(0, 161, 255)',
        strokeWidth: 1,
        name: 'guid-line',
        dash: [4, 6]
      })
      layer.add(line)
      line.absolutePosition({
        x: lg.lineGuide,
        y: 0
      })
    }
  })
},`

[lavrton]

Demo?