gojs一些實(shí)用的高級(jí)用法

更新時(shí)間：2022年01月01日 13:01:59 作者：ESnail

gojs是一個(gè)非常強(qiáng)大的可視化關(guān)系的js庫(kù)。本文介紹的是在使用gojs制作圖的過(guò)程中，你可能會(huì)碰到的問(wèn)題的一些解決方案。對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1. 取消更新動(dòng)畫(huà)
2. 導(dǎo)出圖（含可視區(qū)外的部分）
3. 禁用 ctrl 相關(guān)快捷鍵
4. 畫(huà)布滾動(dòng)模式，無(wú)限滾動(dòng) or 局部滾動(dòng)
5. 展開(kāi)收起多層嵌套的組
6. 給圖元素加動(dòng)畫(huà)
7. 修改框選的樣式

1. 取消更新動(dòng)畫(huà)

問(wèn)題：更新數(shù)據(jù)的時(shí)候，會(huì)觸發(fā)渲染，有渲染動(dòng)畫(huà)，用戶體驗(yàn)不好。

方案：初始數(shù)據(jù)繪制，有動(dòng)畫(huà)；更新數(shù)據(jù)繪制，無(wú)動(dòng)畫(huà)。

代碼實(shí)現(xiàn)：

// 后面所用到的 diagram 都是 gojs 創(chuàng)建的實(shí)例
// diagram_container 為圖容器dom id
diagram = $(go.Diagram, 'diagram_container')

方案一：

function updateData (nodeArr = [], linkArr = [], hasAnimation = true ) {
  if (hasAnimation) {
    diagram.model = new go.GraphLinksModel(nodeArr, linkArr);
  } else {
    diagram.model.nodeDataArray = nodeArr
    diagram.model.linkDataArray = linkArr
  }
}

// 初始化實(shí)例后處理，只用一次
diagram.animationManager.canStart = function(reason) {
  if (reason === 'Model') return false
  return true
}

方案二：

// 綁定數(shù)據(jù)至 diagram，繪制圖
function updateData (nodeArr = [], linkArr = [], hasAnimation = true ) {
  if (hasAnimation) {
    diagram.model = new go.GraphLinksModel(nodeArr, linkArr);
  } else {
    diagram.model.nodeDataArray = nodeArr
    diagram.model.linkDataArray = linkArr
    diagram.animationManager.stopAnimation()
  }
}

方案三：

// 綁定數(shù)據(jù)至 diagram，繪制圖
function updateData (nodeArr = [], linkArr = [], hasAnimation = true) {
  diagram.model = new go.GraphLinksModel(nodeArr, linkArr);
  if (diagram.animationManager) {
    // Default 有動(dòng)畫(huà)，None 沒(méi)有動(dòng)畫(huà)
    diagram.animationManager.initialAnimationStyle = hasAnimation ? go.AnimationManager.Default : go.AnimationManager.None;
  }
}

2. 導(dǎo)出圖（含可視區(qū)外的部分）

問(wèn)題：導(dǎo)出圖，利用原生 canvas 相關(guān) api 實(shí)現(xiàn)的導(dǎo)出圖片，只包含可視區(qū)內(nèi)的

解決：利用 gojs 提供的 api 處理

背后原理：利用數(shù)據(jù)重新繪制一份圖，所有數(shù)據(jù)節(jié)點(diǎn)都在的圖可視區(qū)內(nèi)，然后利用原生 canvas 相關(guān) api 實(shí)現(xiàn)導(dǎo)出圖片

代碼實(shí)現(xiàn)：

function downloadImg = ({
  imgName = 'dag',
  bgColor = 'white',
  imgType = 'image/png'
}= {}) {
  diagram.makeImageData({
    scale: 2,
    padding: new go.Margin(50, 70),
    maxSize: new go.Size(Infinity, Infinity),
    background: bgColor,
    type: imgType,
    returnType: 'blob',
    callback: (blob: any) => {
      const url = window.URL.createObjectURL(blob)
      const fileName = imgName + '.png'
      const aEl = document.createElement('a')
      aEl.style.display = 'none'
      aEl.href = url
      aEl.download = fileName

      // IE 11
      if (window.navigator.msSaveBlob !== undefined) {
        window.navigator.msSaveBlob(blob, fileName)
        return
      }

      document.body.appendChild(aEl)
      requestAnimationFrame(function() {
        aEl.click()
        window.URL.revokeObjectURL(url)
        document.body.removeChild(aEl)
      })
    }
  })
}

3. 禁用 ctrl 相關(guān)快捷鍵

// 禁用 ctl 相關(guān)操作
diagram.commandHandler.doKeyDown = function() {
  const e = diagram.lastInput
  const control = e.control || e.meta
  const key = e.key

  // 取消 Ctrl+A/Z/Y/G  A-全選、Z-撤銷、Y-重做、G-分組
  if (control && ['A', 'Z', 'Y', 'G'].includes(key)) return
  // 取消 Del/Backspace 刪除鍵
  if (key === 'Del' || key === 'Backspace') return

  go.CommandHandler.prototype.doKeyDown.call(this)
}

4. 畫(huà)布滾動(dòng)模式，無(wú)限滾動(dòng) or 局部滾動(dòng)

問(wèn)題：mac 上觸摸鍵能左滑右滑控制瀏覽器頁(yè)面前進(jìn)后退，很容易觸發(fā)

方案：開(kāi)啟無(wú)限滾動(dòng)，避免用戶不小心觸發(fā)了瀏覽器的前進(jìn)后退

代碼實(shí)現(xiàn)：

function infiniteScroll = (infiniteScroll) {
  this.diagram.scrollMode = infiniteScroll ? go.Diagram.InfiniteScroll : go.Diagram.DocumentScroll
}

5. 展開(kāi)收起多層嵌套的組

問(wèn)題：組多層嵌套，全部展開(kāi)后，點(diǎn)擊單個(gè)組收起第一次無(wú)效，第二次點(diǎn)擊才生效

代碼實(shí)現(xiàn)：

方式一：nodeArr 沒(méi)有綁定展開(kāi)收起屬性

// groupIds 為所有 group 的ids，從外到內(nèi)。 一開(kāi)始遍歷組裝數(shù)據(jù)的時(shí)候就收集好
// groupIdsReverse 為所有 group 的ids，從內(nèi)到外
// 全部展開(kāi)，從外到內(nèi)
// 全部收起，從內(nèi)到外
function setExpandCollapse (isExpand, groupIds, groupIdsReverse) {
  // 展開(kāi)和折疊需要從兩個(gè)方向處理，再次展開(kāi)折疊交互才正常，否則第一次點(diǎn)無(wú)效，需要點(diǎn)第二次材有限
  let arr = isExpand ? groupIds : groupIdsReverse;
  let group;

  arr.forEach(id => {
    group = diagram.findNodeForKey(id);
    group.isSubGraphExpanded = isExpand;
  })
},

方式二：nodeArr 綁定展開(kāi)收起屬性 isExpanded

function setExpandCollapse (isExpand) {
  const { nodeDataArray, linkDataArray } = diagram.model
  const newNodeArr = nodeDataArray.map(v => {
    if (v.isGroup) {
      return {...v, isExpanded: isExpand}
    }
    return v
  })

  // 上面的方法
  updateData(newNodeArr, linkArr, false)
}

6. 給圖元素加動(dòng)畫(huà)

虛線動(dòng)畫(huà)
icon loading 旋轉(zhuǎn)動(dòng)畫(huà)

代碼實(shí)現(xiàn)：

function loop = () {
  const animationTimer = setTimeout(() => {
    clearTimeout(animationTimer)
    const oldskips = diagram.skipsUndoManager;
    diagram.skipsUndoManager = true;

    // 虛線動(dòng)畫(huà)
    diagram.links.each((link: any) => {
      const dashedLinkShape = link.findObject("dashedLink");
      if (dashedLinkShape) {
        const off = dashedLinkShape.strokeDashOffset - 3;
        // 設(shè)置（移動(dòng)）筆劃劃動(dòng)畫(huà)
        dashedLinkShape.strokeDashOffset = (off <= 0) ? 60 : off;
      }
    });

    // loading 旋轉(zhuǎn)
    diagram.nodes.each((node: any) => {
      const loadingShape = node.findObject("loading");
      if (loadingShape) {
        const angle = loadingShape.angle + 20;
        // 設(shè)置（移動(dòng)）筆劃劃動(dòng)畫(huà)
        loadingShape.angle = (angle == 0) ? 360 : angle;
      }
    });

    diagram.skipsUndoManager = oldskips;
    loop();
  }, 180);
}
loop()

7. 修改框選的樣式

問(wèn)題：框選樣式：默認(rèn)是紅色的，和自定義的圖顏色不匹配

diagram.toolManager.dragSelectingTool.box = $(go.Part,
  { layerName: "Tool", selectable: false },
  $(go.Shape,
    { name: "SHAPE", fill: 'rgba(104, 129, 255, 0.2)', stroke: 'rgba(104, 129, 255, 0.5)', strokeWidth: 2 }));

以上所述是小編給大家介紹的gojs一些實(shí)用的高級(jí)用法，希望對(duì)大家有所幫助。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: