codding.cn

我的世界 | By 田小号

return this.r.listDir || [{
  path: 'c:/',
  style: {
    width: '600px',
    height: '400px',
    left: '10%',
    top: '30px'
  }
}]

class TreeView {
 constructor(d = {}) {
   const me = this
   me.d = d

   d.gd = d.canvas.getContext('2d')
   d.conf = {
     spaceBetween: 2,
     lineHeight: 40,
     itemWidth: 30,
     itemHeight: 20,
   }
   d.mapId = {}
   d.mapPid = {}

   me.init()
 }
 init() {
   const me = this
   const d = me.d

   d.gd.font = '14px Arial'
   d.data.forEach((v) => {
     v.width = Math.ceil(d.gd.measureText(v.id).width) + 20
     d.mapId[v.id] = v
     d.mapPid[v.pid] = d.mapPid[v.pid] || []
     d.mapPid[v.pid].push(v)
   })

   d.root = d.data[0]

   for (let i = 0, len = d.data.length; i < len; i++) {
     const node = d.data[i]
     if (node.id == node.pid)
       throw new Error('node.id == node.pid', node.id, node.pid)
   }

   me.setDepth()
   me.setLayout()
   {
     const space = 40
     const l = Math.min(...d.data.map(v => v.x))
     const r = Math.max(...d.data.map(v => v.x + v.width))

     d.canvas.width = r - l + space
     d.canvas.height = Math.max(...d.data.map(v => v.y + d.conf.itemHeight)) + space
     me.translate(d.root, -l + space / 2, space / 2)
   }
   me.render()
 }
 setDepth() {
   const me = this
   const d = me.d

   d.stair = []

   const setDepth = (node, depth = 0) => {
     !d.stair[depth] && (d.stair[depth] = [])
     node.hIdx = d.stair[depth].length
     node.depth = depth
     d.stair[depth].push(node)

     ;(d.mapPid[node.id] || []).forEach((v) => {
       setDepth(v, depth + 1)
     })
   }

   setDepth(d.root)
 }
 translate(node, x, y) {
   const me = this
   const d = me.d

   const translate = (node) => {
     node.x += x
     node.y += y
     ;(d.mapPid[node.id] || []).forEach(translate)
   }
   translate(node)
 }
 setLayout() {
   const me = this
   const d = me.d

   for (let depth = d.stair.length - 1; depth > -1; depth--) {
     const row = d.stair[depth]
     row.forEach((v, idx, arr) => {
       const nodePrev = arr[idx - 1]
       const children = d.mapPid[v.id] || []

       if (children.length > 0) {
         const head = children.first()
         const tail = children.last()
         v.x = (head.x + tail.x + tail.width) / 2 - v.width / 2
       } else {
         v.x = nodePrev ? nodePrev.x + nodePrev.width : 0
       }

       if (nodePrev && nodePrev.hIdx === 0 && !d.mapPid[nodePrev.id] && v.x > nodePrev.x + v.width) {
         me.translate(nodePrev, v.x - nodePrev.width, 0)
       }

       {
         let nodeL = nodePrev
         let nodeR = v

         while (nodeL && nodeR) {
           if (nodeL.x + nodeL.width > nodeR.x) {
             me.translate(v, nodeL.x + nodeL.width - nodeR.x, 0)
           }
           nodeR = (d.mapPid[nodeR.id] || []).first()
           nodeR && (nodeL = d.stair[nodeR.depth][nodeR.hIdx - 1])
         }
       }

       v.y = depth * d.conf.lineHeight
     })
   }
 }
 render() {
   const me = this
   const d = me.d
   const {canvas, gd} = d

   const renderLine = () => {
     gd.beginPath()

     d.data.forEach((v) => {
       const nodeP = d.mapId[v.pid]
       if (!nodeP) return
       const x1 = v.x + v.width / 2
       const y1 = v.y + d.conf.itemHeight / 2

       const x4 = nodeP.x + nodeP.width / 2
       const y4 = nodeP.y + d.conf.itemHeight / 2

       const x2 = x1
       const y2 = (y1 + y4) / 2

       const x3 = x4
       const y3 = (y1 + y4) / 2

       gd.moveTo(x1, y1)
       gd.bezierCurveTo(
         x2, y2,
         x3, y3,
         x4, y4,
       )
     })

     gd.strokeStyle = '#000'
     gd.stroke()
   }

   const renderNode = () => {
     gd.beginPath()
     d.data.forEach((v) => {
       gd.rect(v.x + 1, v.y, v.width - 2, d.conf.itemHeight)
     })
     gd.fillStyle = 'rgba(0,170,255,.75)'
     gd.fill()

     gd.font = '14px Arial'
     gd.textAlign = 'center'
     gd.textBaseline = 'middle'
     gd.fillStyle = '#fff'
     d.data.forEach((v) => {
       gd.fillText(v.id, v.x + v.width / 2, v.y + d.conf.itemHeight / 2)
     })
   }

   gd.fillStyle = '#fff'
   gd.fillRect(0, 0, d.canvas.width, d.canvas.height)

   gd.save()
   renderLine()
   renderNode()
   gd.restore()
 }
}

MikeAcesse/codding.cn

codding.cn