Shulou(Shulou.com)06/02 Report--

This article mainly talks about "what are the advanced uses of gojs". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what are the advanced uses of gojs.

1. Cancel updating animation

Problem: when updating data, it will trigger rendering, render animation, and the user experience is not good.

Scheme: initial data drawing with animation; updating data drawing without animation.

Code implementation:

/ / the diagram used later are all instances created by gojs / / diagram_container is the graph container dom iddiagram = $(go.Diagram, 'diagram_container')

Option 1:

Function updateData (nodeArr = [], linkArr = [], hasAnimation = true) {if (hasAnimation) {diagram.model = new go.GraphLinksModel (nodeArr, linkArr);} else {diagram.model.nodeDataArray = nodeArr diagram.model.linkDataArray = linkArr}} / / initialize instance post-processing, using diagram.animationManager.canStart = function (reason) {if (reason = 'Model') return false return true} only once

Option 2:

/ bind data to diagram and draw 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 ()}}

Option 3:

/ / bind data to diagram and draw function updateData (nodeArr = [], linkArr = [], hasAnimation = true) {diagram.model = new go.GraphLinksModel (nodeArr, linkArr); if (diagram.animationManager) {/ / Default has animation, None has no animation diagram.animationManager.initialAnimationStyle = hasAnimation? Go.AnimationManager.Default: go.AnimationManager.None;}} 2. Export diagram (including parts outside the visual area)

Problem: export images, which are implemented using native canvas-related api, including only those in the visual area

Solution: using api processing provided by gojs

Principle behind: use the data to redraw a graph, all the data nodes are in the visual area of the map, and then use native canvas related api to export the picture.

Code implementation:

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. Disable ctrl related shortcut keys / / disable ctl related operations diagram.commandHandler.doKeyDown = function () {const e = diagram.lastInput const control = e.control | | e.meta const key = e.key / / deselect Ctrl+A/Z/Y/G A-Select all, Z-undo, Y-redo, G-grouping if (control & & ['Aids,' Zero,'Y') 'G'] .delete (key) return / / cancel the Del/Backspace delete key if (key = =' Del' | | key = = 'Backspace') return go.CommandHandler.prototype.doKeyDown.call (this)} 4. Canvas scrolling mode, infinite scrolling or local scrolling

Problem: the touch button on mac can slide left and right to control the browser page forward and backward, which is easy to trigger.

Solution: turn on infinite scrolling to prevent users from accidentally triggering the forward and backward of the browser

Code implementation:

Function infiniteScroll = (infiniteScroll) {this.diagram.scrollMode = infiniteScroll? Go.Diagram.InfiniteScroll: go.Diagram.DocumentScroll} 5. Expand and collapse multi-layer nested groups

Problem: multi-layer nesting of groups. After all expansion, click on a single group to put away the first invalid, and the second click will not take effect.

Code implementation:

Method 1: nodeArr is not bound to expand and fold the attribute

/ / groupIds is the ids of all group, from outside to inside. At the beginning of traversing the assembly data, collect the ids of / / groupIdsReverse for all group, expand from the inside to the outside / all, from the outside to the inside / / all away, from the inside to the outside function setExpandCollapse (isExpand, groupIds, groupIdsReverse) {/ / unfold and fold need to be processed from both directions, expand and fold interaction is normal, otherwise the first point is invalid, you need to point the second limited let arr = isExpand? GroupIds: groupIdsReverse; let group; arr.forEach (id = > {group = diagram.findNodeForKey (id); group.isSubGraphExpanded = isExpand;})}

Method 2: nodeArr binding expands and collapses the property isExpanded

Function setExpandCollapse (isExpand) {const {nodeDataArray, linkDataArray} = diagram.model const newNodeArr = nodeDataArray.map (v = > {if (v.isGroup) {return {... v, isExpanded: isExpand}} return v}) / / the above method updateData (newNodeArr, linkArr, false)} 6. Animate the elements of the picture

Dotted line animation

Icon loading rotation animation

Code implementation:

Function loop = () {const animationTimer = setTimeout (()) > {clearTimeout (animationTimer) const oldskips = diagram.skipsUndoManager; diagram.skipsUndoManager = true; / / dashed line animation diagram.links.each ((link: any) = > {const dashedLinkShape = link.findObject ("dashedLink"); if (dashedLinkShape) {const off = dashedLinkShape.strokeDashOffset-3 / / set (move) stroke animation dashedLinkShape.strokeDashOffset = (off {const loadingShape = node.findObject ("loading"); if (loadingShape) {const angle = loadingShape.angle + 20; / / set (move) stroke animation loadingShape.angle = (angle = = 0)? 360: angle;}}); diagram.skipsUndoManager = oldskips; loop () Loop () 7. Modify the style selected in the box

Problem: frame selection style: the default is red, which does not match the custom image color

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}). At this point, I believe you have a better understanding of "what are the advanced uses of gojs"? Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.