[{"data":1,"prerenderedAt":4955},["ShallowReactive",2],{"doc-\u002Fdocs\u002Fgojs-getting-started":3,"docs-all":4852},{"id":4,"title":5,"body":6,"category":4839,"date":4840,"description":4841,"draft":4842,"extension":4843,"meta":4844,"navigation":179,"path":4845,"seo":4846,"source":4847,"stem":4848,"tags":4849,"__hash__":4851},"docs\u002Fdocs\u002Fgojs-getting-started.md","GoJS 入门实战",{"type":7,"value":8,"toc":4829},"minimark",[9,14,18,60,64,70,73,76,110,113,842,845,1195,1198,1209,1299,1302,1305,1308,1348,1352,1358,1364,1381,1388,1398,1401,1406,2005,2008,2013,2017,2020,2116,2119,2296,2299,2436,2692,2695,3339,3342,3547,3551,4514,4678,4682,4685,4721,4724,4754,4825],[10,11,13],"h1",{"id":12},"gojs","GoJS",[15,16,17],"h2",{"id":17},"文件引用",[19,20,25],"pre",{"className":21,"code":22,"language":23,"meta":24,"style":24},"language-html shiki shiki-themes github-light github-dark","\u003Cscript src=\"gojs\u002Fgo-debug_ok.js\">\u003C\u002Fscript>\n","html","",[26,27,28],"code",{"__ignoreMap":24},[29,30,33,37,41,45,48,52,55,57],"span",{"class":31,"line":32},"line",1,[29,34,36],{"class":35},"sVt8B","\u003C",[29,38,40],{"class":39},"s9eBZ","script",[29,42,44],{"class":43},"sScJk"," src",[29,46,47],{"class":35},"=",[29,49,51],{"class":50},"sZZnC","\"gojs\u002Fgo-debug_ok.js\"",[29,53,54],{"class":35},">\u003C\u002F",[29,56,40],{"class":39},[29,58,59],{"class":35},">\n",[61,62,63],"p",{},"可以用cdn上面的最新版本，也可以引用本地down下来的文件。",[61,65,66,67],{},"或者使用 npm 下载到项目中，引入使用",[26,68,69],{},"import go, { ChangedEvent } from \"gojs\"",[15,71,72],{"id":72},"创建画布",[61,74,75],{},"随便定义一个html元素，作为我们的画布",[19,77,79],{"className":21,"code":78,"language":23,"meta":24,"style":24},"\u003Cdiv id=\"myDiagramDiv\" style=\"margin:auto;width:300px; height:300px; background-color:#ddd;\">\u003C\u002Fdiv>\n",[26,80,81],{"__ignoreMap":24},[29,82,83,85,88,91,93,96,99,101,104,106,108],{"class":31,"line":32},[29,84,36],{"class":35},[29,86,87],{"class":39},"div",[29,89,90],{"class":43}," id",[29,92,47],{"class":35},[29,94,95],{"class":50},"\"myDiagramDiv\"",[29,97,98],{"class":43}," style",[29,100,47],{"class":35},[29,102,103],{"class":50},"\"margin:auto;width:300px; height:300px; background-color:#ddd;\"",[29,105,54],{"class":35},[29,107,87],{"class":39},[29,109,59],{"class":35},[61,111,112],{},"然后使用gojs的api初始化画布",[19,114,118],{"className":115,"code":116,"language":117,"meta":24,"style":24},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F 创建画布\nvar objGo = go.GraphObject.make;\nvar myDiagram = objGo(go.Diagram, \"myDiagramDiv\", {\n \u002F\u002F模型图的中心位置所在坐标\n initialContentAlignment: go.Spot.Center,\n\n \u002F\u002F允许用户操作图表的时候使用Ctrl-Z撤销和Ctrl-Y重做快捷键\n \"undoManager.isEnabled\": true,\n\n \u002F\u002F不运行用户改变图表的规模\n allowZoom: false,\n\n \u002F\u002F画布上面是否出现网格\n \"grid.visible\": true,\n\n \u002F\u002F允许在画布上面双击的时候创建节点\n \"clickCreatingTool.archetypeNodeData\": { text: \"Node\" },\n\n \u002F\u002F允许使用ctrl+c、ctrl+v复制粘贴\n \"commandHandler.copiesTree\": true,\n\n \u002F\u002F允许使用delete键删除节点\n \"commandHandler.deletesTree\": true,\n\n \u002F\u002F dragging for both move and copy\n \"draggingTool.dragsTree\": true,\n});\nthis.diagram = $(go.Diagram, \"chart-diagram\",\n{\n \u002F\u002F 画布初始位置\n initialContentAlignment: go.Spot.LeftSide, \u002F\u002F 居中显示\n \"undoManager.isEnabled\": true, \u002F\u002F 支持 Ctrl-Z 和 Ctrl-Y 操作\n \u002F\u002F 初始坐标\n \u002F\u002F initialPosition: new go.Point(0, 0),\n \u002F\u002FallowSelect:false, \u002F\u002F\u002F禁止选中\n \u002F\u002F \"toolManager.hoverDelay\": 100, \u002F\u002Ftooltip提示显示延时\n \u002F\u002F \"toolManager.toolTipDuration\": 10000, \u002F\u002Ftooltip持续显示时间\n \u002F\u002F isReadOnly:true,\u002F\u002F只读\n\n \u002F\u002F禁止水平拖动画布\n \u002F\u002F禁止水平滚动条\n allowHorizontalScroll: false,\n \u002F\u002F 禁止垂直拖动画布\n \u002F\u002F禁止垂直滚动条\n allowVerticalScroll: false,\n allowZoom: true,\u002F\u002F画布是否可以缩放\n \"grid.visible\": false, \u002F\u002F显示网格\n \u002F\u002F allowMove: true, \u002F\u002F允许拖动\n \u002F\u002F allowDragOut:true,\n allowDelete: true,\u002F\u002F禁止删除节点\n allowCopy: true,\u002F\u002F禁止复制\n \u002F\u002F 禁止撤销和重做\n \u002F\u002F \"undoManager.isEnabled\": false,\n \u002F\u002F 画布比例\n \u002F\u002F scale:1.5，\n \u002F\u002F minScale:1.2,\u002F\u002F画布最小比例\n \u002F\u002F maxScale:2.0,\u002F\u002F画布最大比例\n \u002F\u002F 画布初始化动画时间\n \u002F\u002F \"animationManager.duration\": 600,\n \u002F\u002F 禁止画布初始化动画\n \"animationManager.isEnabled\": false,\n \u002F\u002F autoScale:go.Diagram.Uniform,\u002F\u002F自适应\n\n \u002F\u002F autoScale:go.Diagram.UniformToFill,\u002F\u002F自适应\n \u002F\u002F \"draggingTool.dragsLink\": false,\u002F\u002F拖动线\n \u002F\u002F autoScale:go.Diagram.None,\u002F\u002F默认值不自适应\n \u002F\u002F 画布边距padding\n \u002F\u002F padding:80或者new go.Margin(2, 0)或new go.Margin(1, 0, 0, 1)\n \u002F\u002F validCycle: go.Diagram.CycleDestinationTree，\u002F\u002F只允许有一个父节点\n \u002F\u002F节点模块动画 S\n \u002F\u002F \"animationManager.initialAnimationStyle\":go.Animation.EaseOutExpo,\n \u002F\u002F \"animationManager.initialAnimationStyle\": go.Animation.EaseInOutQuad,\n \"animationManager.initialAnimationStyle\": go.AnimationManager.None,\n \u002F\u002F \"animationManager.initialAnimationStyle\":go.AnimationManager.AnimateLocations,\n \u002F\u002F节点模块动画 D\n \u002F\u002F validCycle: go.Diagram.CycleNotUndirected，\n\n \u002F\u002F validCycle: go.Diagram.CycleNotDirected，\n \u002F\u002F validCycle: go.Diagram.CycleSourceTree，\n \u002F\u002Fismodelfied:true \u002F\u002F禁止拖拽\n \u002F\u002F 禁止鼠标拖动区域选中\n \u002F\u002F \"dragSelectingTool.isEnabled\" : false,\n \u002F\u002F允许使用delete键删除模块\n \"commandHandler.deletesTree\": true,\n \u002F\u002F \"hasHorizontalScrollbar\":false,\u002F\u002F去除水平滚动条\n \u002F\u002F \"hasVerticalScrollbar\":false,\u002F\u002F去除竖直滚动条\n \u002F\u002F \"canStart\":false,\n \u002F\u002F allowClipboard: true,\n \u002F\u002F \"toolManager.mouseWheelBehavior\": go.ToolManager.WheelZoom, \u002F\u002F有鼠标滚轮事件放大和缩小，而不是向上和向下滚动\n \u002F\u002F layout: $(go.TreeLayout,\n \u002F\u002F { angle: 90, layerSpacing: 80 }),\n}\n);\n","javascript",[26,119,120,126,141,162,168,174,181,187,203,208,214,225,230,236,248,253,259,274,279,285,297,302,308,320,325,331,343,349,370,376,382,391,407,413,419,428,437,446,452,457,463,469,479,485,491,501,515,530,539,545,558,571,577,583,589,595,601,607,613,619,625,637,643,648,654,660,666,672,678,684,690,696,702,711,717,723,729,734,740,746,755,761,767,773,785,791,797,803,809,818,824,830,836],{"__ignoreMap":24},[29,121,122],{"class":31,"line":32},[29,123,125],{"class":124},"sJ8bj","\u002F\u002F 创建画布\n",[29,127,129,133,136,138],{"class":31,"line":128},2,[29,130,132],{"class":131},"szBVR","var",[29,134,135],{"class":35}," objGo ",[29,137,47],{"class":131},[29,139,140],{"class":35}," go.GraphObject.make;\n",[29,142,144,146,149,151,154,157,159],{"class":31,"line":143},3,[29,145,132],{"class":131},[29,147,148],{"class":35}," myDiagram ",[29,150,47],{"class":131},[29,152,153],{"class":43}," objGo",[29,155,156],{"class":35},"(go.Diagram, ",[29,158,95],{"class":50},[29,160,161],{"class":35},", {\n",[29,163,165],{"class":31,"line":164},4,[29,166,167],{"class":124}," \u002F\u002F模型图的中心位置所在坐标\n",[29,169,171],{"class":31,"line":170},5,[29,172,173],{"class":35}," initialContentAlignment: go.Spot.Center,\n",[29,175,177],{"class":31,"line":176},6,[29,178,180],{"emptyLinePlaceholder":179},true,"\n",[29,182,184],{"class":31,"line":183},7,[29,185,186],{"class":124}," \u002F\u002F允许用户操作图表的时候使用Ctrl-Z撤销和Ctrl-Y重做快捷键\n",[29,188,190,193,196,200],{"class":31,"line":189},8,[29,191,192],{"class":50}," \"undoManager.isEnabled\"",[29,194,195],{"class":35},": ",[29,197,199],{"class":198},"sj4cs","true",[29,201,202],{"class":35},",\n",[29,204,206],{"class":31,"line":205},9,[29,207,180],{"emptyLinePlaceholder":179},[29,209,211],{"class":31,"line":210},10,[29,212,213],{"class":124}," \u002F\u002F不运行用户改变图表的规模\n",[29,215,217,220,223],{"class":31,"line":216},11,[29,218,219],{"class":35}," allowZoom: ",[29,221,222],{"class":198},"false",[29,224,202],{"class":35},[29,226,228],{"class":31,"line":227},12,[29,229,180],{"emptyLinePlaceholder":179},[29,231,233],{"class":31,"line":232},13,[29,234,235],{"class":124}," \u002F\u002F画布上面是否出现网格\n",[29,237,239,242,244,246],{"class":31,"line":238},14,[29,240,241],{"class":50}," \"grid.visible\"",[29,243,195],{"class":35},[29,245,199],{"class":198},[29,247,202],{"class":35},[29,249,251],{"class":31,"line":250},15,[29,252,180],{"emptyLinePlaceholder":179},[29,254,256],{"class":31,"line":255},16,[29,257,258],{"class":124}," \u002F\u002F允许在画布上面双击的时候创建节点\n",[29,260,262,265,268,271],{"class":31,"line":261},17,[29,263,264],{"class":50}," \"clickCreatingTool.archetypeNodeData\"",[29,266,267],{"class":35},": { text: ",[29,269,270],{"class":50},"\"Node\"",[29,272,273],{"class":35}," },\n",[29,275,277],{"class":31,"line":276},18,[29,278,180],{"emptyLinePlaceholder":179},[29,280,282],{"class":31,"line":281},19,[29,283,284],{"class":124}," \u002F\u002F允许使用ctrl+c、ctrl+v复制粘贴\n",[29,286,288,291,293,295],{"class":31,"line":287},20,[29,289,290],{"class":50}," \"commandHandler.copiesTree\"",[29,292,195],{"class":35},[29,294,199],{"class":198},[29,296,202],{"class":35},[29,298,300],{"class":31,"line":299},21,[29,301,180],{"emptyLinePlaceholder":179},[29,303,305],{"class":31,"line":304},22,[29,306,307],{"class":124}," \u002F\u002F允许使用delete键删除节点\n",[29,309,311,314,316,318],{"class":31,"line":310},23,[29,312,313],{"class":50}," \"commandHandler.deletesTree\"",[29,315,195],{"class":35},[29,317,199],{"class":198},[29,319,202],{"class":35},[29,321,323],{"class":31,"line":322},24,[29,324,180],{"emptyLinePlaceholder":179},[29,326,328],{"class":31,"line":327},25,[29,329,330],{"class":124}," \u002F\u002F dragging for both move and copy\n",[29,332,334,337,339,341],{"class":31,"line":333},26,[29,335,336],{"class":50}," \"draggingTool.dragsTree\"",[29,338,195],{"class":35},[29,340,199],{"class":198},[29,342,202],{"class":35},[29,344,346],{"class":31,"line":345},27,[29,347,348],{"class":35},"});\n",[29,350,352,355,358,360,363,365,368],{"class":31,"line":351},28,[29,353,354],{"class":198},"this",[29,356,357],{"class":35},".diagram ",[29,359,47],{"class":131},[29,361,362],{"class":43}," $",[29,364,156],{"class":35},[29,366,367],{"class":50},"\"chart-diagram\"",[29,369,202],{"class":35},[29,371,373],{"class":31,"line":372},29,[29,374,375],{"class":35},"{\n",[29,377,379],{"class":31,"line":378},30,[29,380,381],{"class":124}," \u002F\u002F 画布初始位置\n",[29,383,385,388],{"class":31,"line":384},31,[29,386,387],{"class":35}," initialContentAlignment: go.Spot.LeftSide, ",[29,389,390],{"class":124},"\u002F\u002F 居中显示\n",[29,392,394,397,399,401,404],{"class":31,"line":393},32,[29,395,396],{"class":50}," \"undoManager.isEnabled\"",[29,398,195],{"class":35},[29,400,199],{"class":198},[29,402,403],{"class":35},", ",[29,405,406],{"class":124},"\u002F\u002F 支持 Ctrl-Z 和 Ctrl-Y 操作\n",[29,408,410],{"class":31,"line":409},33,[29,411,412],{"class":124}," \u002F\u002F 初始坐标\n",[29,414,416],{"class":31,"line":415},34,[29,417,418],{"class":124}," \u002F\u002F initialPosition: new go.Point(0, 0),\n",[29,420,422,425],{"class":31,"line":421},35,[29,423,424],{"class":124}," \u002F\u002FallowSelect:false,",[29,426,427],{"class":124}," \u002F\u002F\u002F禁止选中\n",[29,429,431,434],{"class":31,"line":430},36,[29,432,433],{"class":124}," \u002F\u002F \"toolManager.hoverDelay\": 100,",[29,435,436],{"class":124}," \u002F\u002Ftooltip提示显示延时\n",[29,438,440,443],{"class":31,"line":439},37,[29,441,442],{"class":124}," \u002F\u002F \"toolManager.toolTipDuration\": 10000,",[29,444,445],{"class":124}," \u002F\u002Ftooltip持续显示时间\n",[29,447,449],{"class":31,"line":448},38,[29,450,451],{"class":124}," \u002F\u002F isReadOnly:true,\u002F\u002F只读\n",[29,453,455],{"class":31,"line":454},39,[29,456,180],{"emptyLinePlaceholder":179},[29,458,460],{"class":31,"line":459},40,[29,461,462],{"class":124}," \u002F\u002F禁止水平拖动画布\n",[29,464,466],{"class":31,"line":465},41,[29,467,468],{"class":124}," \u002F\u002F禁止水平滚动条\n",[29,470,472,475,477],{"class":31,"line":471},42,[29,473,474],{"class":35}," allowHorizontalScroll: ",[29,476,222],{"class":198},[29,478,202],{"class":35},[29,480,482],{"class":31,"line":481},43,[29,483,484],{"class":124}," \u002F\u002F 禁止垂直拖动画布\n",[29,486,488],{"class":31,"line":487},44,[29,489,490],{"class":124}," \u002F\u002F禁止垂直滚动条\n",[29,492,494,497,499],{"class":31,"line":493},45,[29,495,496],{"class":35}," allowVerticalScroll: ",[29,498,222],{"class":198},[29,500,202],{"class":35},[29,502,504,507,509,512],{"class":31,"line":503},46,[29,505,506],{"class":35}," allowZoom: ",[29,508,199],{"class":198},[29,510,511],{"class":35},",",[29,513,514],{"class":124},"\u002F\u002F画布是否可以缩放\n",[29,516,518,521,523,525,527],{"class":31,"line":517},47,[29,519,520],{"class":50}," \"grid.visible\"",[29,522,195],{"class":35},[29,524,222],{"class":198},[29,526,403],{"class":35},[29,528,529],{"class":124},"\u002F\u002F显示网格\n",[29,531,533,536],{"class":31,"line":532},48,[29,534,535],{"class":124}," \u002F\u002F allowMove: true,",[29,537,538],{"class":124}," \u002F\u002F允许拖动\n",[29,540,542],{"class":31,"line":541},49,[29,543,544],{"class":124}," \u002F\u002F allowDragOut:true,\n",[29,546,548,551,553,555],{"class":31,"line":547},50,[29,549,550],{"class":35}," allowDelete: ",[29,552,199],{"class":198},[29,554,511],{"class":35},[29,556,557],{"class":124},"\u002F\u002F禁止删除节点\n",[29,559,561,564,566,568],{"class":31,"line":560},51,[29,562,563],{"class":35}," allowCopy: ",[29,565,199],{"class":198},[29,567,511],{"class":35},[29,569,570],{"class":124},"\u002F\u002F禁止复制\n",[29,572,574],{"class":31,"line":573},52,[29,575,576],{"class":124}," \u002F\u002F 禁止撤销和重做\n",[29,578,580],{"class":31,"line":579},53,[29,581,582],{"class":124}," \u002F\u002F \"undoManager.isEnabled\": false,\n",[29,584,586],{"class":31,"line":585},54,[29,587,588],{"class":124}," \u002F\u002F 画布比例\n",[29,590,592],{"class":31,"line":591},55,[29,593,594],{"class":124}," \u002F\u002F scale:1.5，\n",[29,596,598],{"class":31,"line":597},56,[29,599,600],{"class":124}," \u002F\u002F minScale:1.2,\u002F\u002F画布最小比例\n",[29,602,604],{"class":31,"line":603},57,[29,605,606],{"class":124}," \u002F\u002F maxScale:2.0,\u002F\u002F画布最大比例\n",[29,608,610],{"class":31,"line":609},58,[29,611,612],{"class":124}," \u002F\u002F 画布初始化动画时间\n",[29,614,616],{"class":31,"line":615},59,[29,617,618],{"class":124}," \u002F\u002F \"animationManager.duration\": 600,\n",[29,620,622],{"class":31,"line":621},60,[29,623,624],{"class":124}," \u002F\u002F 禁止画布初始化动画\n",[29,626,628,631,633,635],{"class":31,"line":627},61,[29,629,630],{"class":50}," \"animationManager.isEnabled\"",[29,632,195],{"class":35},[29,634,222],{"class":198},[29,636,202],{"class":35},[29,638,640],{"class":31,"line":639},62,[29,641,642],{"class":124}," \u002F\u002F autoScale:go.Diagram.Uniform,\u002F\u002F自适应\n",[29,644,646],{"class":31,"line":645},63,[29,647,180],{"emptyLinePlaceholder":179},[29,649,651],{"class":31,"line":650},64,[29,652,653],{"class":124}," \u002F\u002F autoScale:go.Diagram.UniformToFill,\u002F\u002F自适应\n",[29,655,657],{"class":31,"line":656},65,[29,658,659],{"class":124}," \u002F\u002F \"draggingTool.dragsLink\": false,\u002F\u002F拖动线\n",[29,661,663],{"class":31,"line":662},66,[29,664,665],{"class":124}," \u002F\u002F autoScale:go.Diagram.None,\u002F\u002F默认值不自适应\n",[29,667,669],{"class":31,"line":668},67,[29,670,671],{"class":124}," \u002F\u002F 画布边距padding\n",[29,673,675],{"class":31,"line":674},68,[29,676,677],{"class":124}," \u002F\u002F padding:80或者new go.Margin(2, 0)或new go.Margin(1, 0, 0, 1)\n",[29,679,681],{"class":31,"line":680},69,[29,682,683],{"class":124}," \u002F\u002F validCycle: go.Diagram.CycleDestinationTree，\u002F\u002F只允许有一个父节点\n",[29,685,687],{"class":31,"line":686},70,[29,688,689],{"class":124}," \u002F\u002F节点模块动画 S\n",[29,691,693],{"class":31,"line":692},71,[29,694,695],{"class":124}," \u002F\u002F \"animationManager.initialAnimationStyle\":go.Animation.EaseOutExpo,\n",[29,697,699],{"class":31,"line":698},72,[29,700,701],{"class":124}," \u002F\u002F \"animationManager.initialAnimationStyle\": go.Animation.EaseInOutQuad,\n",[29,703,705,708],{"class":31,"line":704},73,[29,706,707],{"class":50}," \"animationManager.initialAnimationStyle\"",[29,709,710],{"class":35},": go.AnimationManager.None,\n",[29,712,714],{"class":31,"line":713},74,[29,715,716],{"class":124}," \u002F\u002F \"animationManager.initialAnimationStyle\":go.AnimationManager.AnimateLocations,\n",[29,718,720],{"class":31,"line":719},75,[29,721,722],{"class":124}," \u002F\u002F节点模块动画 D\n",[29,724,726],{"class":31,"line":725},76,[29,727,728],{"class":124}," \u002F\u002F validCycle: go.Diagram.CycleNotUndirected，\n",[29,730,732],{"class":31,"line":731},77,[29,733,180],{"emptyLinePlaceholder":179},[29,735,737],{"class":31,"line":736},78,[29,738,739],{"class":124}," \u002F\u002F validCycle: go.Diagram.CycleNotDirected，\n",[29,741,743],{"class":31,"line":742},79,[29,744,745],{"class":124}," \u002F\u002F validCycle: go.Diagram.CycleSourceTree，\n",[29,747,749,752],{"class":31,"line":748},80,[29,750,751],{"class":124}," \u002F\u002Fismodelfied:true",[29,753,754],{"class":124}," \u002F\u002F禁止拖拽\n",[29,756,758],{"class":31,"line":757},81,[29,759,760],{"class":124}," \u002F\u002F 禁止鼠标拖动区域选中\n",[29,762,764],{"class":31,"line":763},82,[29,765,766],{"class":124}," \u002F\u002F \"dragSelectingTool.isEnabled\" : false,\n",[29,768,770],{"class":31,"line":769},83,[29,771,772],{"class":124}," \u002F\u002F允许使用delete键删除模块\n",[29,774,776,779,781,783],{"class":31,"line":775},84,[29,777,778],{"class":50}," \"commandHandler.deletesTree\"",[29,780,195],{"class":35},[29,782,199],{"class":198},[29,784,202],{"class":35},[29,786,788],{"class":31,"line":787},85,[29,789,790],{"class":124}," \u002F\u002F \"hasHorizontalScrollbar\":false,\u002F\u002F去除水平滚动条\n",[29,792,794],{"class":31,"line":793},86,[29,795,796],{"class":124}," \u002F\u002F \"hasVerticalScrollbar\":false,\u002F\u002F去除竖直滚动条\n",[29,798,800],{"class":31,"line":799},87,[29,801,802],{"class":124}," \u002F\u002F \"canStart\":false,\n",[29,804,806],{"class":31,"line":805},88,[29,807,808],{"class":124}," \u002F\u002F allowClipboard: true,\n",[29,810,812,815],{"class":31,"line":811},89,[29,813,814],{"class":124}," \u002F\u002F \"toolManager.mouseWheelBehavior\": go.ToolManager.WheelZoom,",[29,816,817],{"class":124}," \u002F\u002F有鼠标滚轮事件放大和缩小，而不是向上和向下滚动\n",[29,819,821],{"class":31,"line":820},90,[29,822,823],{"class":124}," \u002F\u002F layout: $(go.TreeLayout,\n",[29,825,827],{"class":31,"line":826},91,[29,828,829],{"class":124}," \u002F\u002F { angle: 90, layerSpacing: 80 }),\n",[29,831,833],{"class":31,"line":832},92,[29,834,835],{"class":35},"}\n",[29,837,839],{"class":31,"line":838},93,[29,840,841],{"class":35},");\n",[61,843,844],{},"官方文档：",[19,846,850],{"className":847,"code":848,"language":849,"meta":24,"style":24},"language-js shiki shiki-themes github-light github-dark","var $ = go.GraphObject.make;\nvar myDiagram =\n$(go.Diagram, \"myDiagramDiv\",\n{\n\"undoManager.isEnabled\": true \u002F\u002F enable Ctrl-Z to undo and Ctrl-Y to redo\n});\n\u002F\u002F define a simple Node template\nmyDiagram.nodeTemplate =\n$(go.Node, \"Horizontal\",\n\u002F\u002F the entire node will have a light-blue background\n{ background: \"#44CCFF\" },\n$(go.Picture,\n\u002F\u002F Pictures should normally have an explicit width and height.\n\u002F\u002F This picture has a red background, only visible when there is no source set\n\u002F\u002F or when the image is partially transparent.\n{ margin: 10, width: 50, height: 50, background: \"red\" },\n\u002F\u002F Picture.source is data bound to the \"source\" attribute of the model data\nnew go.Binding(\"source\")),\n$(go.TextBlock,\n\"Default Text\", \u002F\u002F the initial value for TextBlock.text\n\u002F\u002F some room around the text, a larger font, and a white stroke:\n{ margin: 12, stroke: \"white\", font: \"bold 16px sans-serif\" },\n\u002F\u002F TextBlock.text is data bound to the \"name\" attribute of the model data\nnew go.Binding(\"text\", \"name\"))\n);\nvar model = $(go.Model);\nmodel.nodeDataArray =\n[ \u002F\u002F note that each node data object holds whatever properties it needs;\n\u002F\u002F for this app we add the \"name\" and \"source\" properties\n{ name: \"Don Meow\", source: \"\u002Fimages\u002Flearn\u002Fcat1.png\" },\n{ name: \"Copricat\", source: \"\u002Fimages\u002Flearn\u002Fcat2.png\" },\n{ name: \"Demeter\", source: \"\u002Fimages\u002Flearn\u002Fcat3.png\" },\n{ \u002F* Empty node data *\u002F }\n];\nmyDiagram.model = model;\n","js",[26,851,852,863,872,883,887,899,903,908,915,927,932,942,949,954,959,964,991,996,1016,1023,1034,1039,1060,1065,1086,1090,1104,1111,1119,1124,1140,1154,1169,1180,1185],{"__ignoreMap":24},[29,853,854,856,859,861],{"class":31,"line":32},[29,855,132],{"class":131},[29,857,858],{"class":35}," $ ",[29,860,47],{"class":131},[29,862,140],{"class":35},[29,864,865,867,869],{"class":31,"line":128},[29,866,132],{"class":131},[29,868,148],{"class":35},[29,870,871],{"class":131},"=\n",[29,873,874,877,879,881],{"class":31,"line":143},[29,875,876],{"class":43},"$",[29,878,156],{"class":35},[29,880,95],{"class":50},[29,882,202],{"class":35},[29,884,885],{"class":31,"line":164},[29,886,375],{"class":35},[29,888,889,892,894,896],{"class":31,"line":170},[29,890,891],{"class":50},"\"undoManager.isEnabled\"",[29,893,195],{"class":35},[29,895,199],{"class":198},[29,897,898],{"class":124}," \u002F\u002F enable Ctrl-Z to undo and Ctrl-Y to redo\n",[29,900,901],{"class":31,"line":176},[29,902,348],{"class":35},[29,904,905],{"class":31,"line":183},[29,906,907],{"class":124},"\u002F\u002F define a simple Node template\n",[29,909,910,913],{"class":31,"line":189},[29,911,912],{"class":35},"myDiagram.nodeTemplate ",[29,914,871],{"class":131},[29,916,917,919,922,925],{"class":31,"line":205},[29,918,876],{"class":43},[29,920,921],{"class":35},"(go.Node, ",[29,923,924],{"class":50},"\"Horizontal\"",[29,926,202],{"class":35},[29,928,929],{"class":31,"line":210},[29,930,931],{"class":124},"\u002F\u002F the entire node will have a light-blue background\n",[29,933,934,937,940],{"class":31,"line":216},[29,935,936],{"class":35},"{ background: ",[29,938,939],{"class":50},"\"#44CCFF\"",[29,941,273],{"class":35},[29,943,944,946],{"class":31,"line":227},[29,945,876],{"class":43},[29,947,948],{"class":35},"(go.Picture,\n",[29,950,951],{"class":31,"line":232},[29,952,953],{"class":124},"\u002F\u002F Pictures should normally have an explicit width and height.\n",[29,955,956],{"class":31,"line":238},[29,957,958],{"class":124},"\u002F\u002F This picture has a red background, only visible when there is no source set\n",[29,960,961],{"class":31,"line":250},[29,962,963],{"class":124},"\u002F\u002F or when the image is partially transparent.\n",[29,965,966,969,972,975,978,981,983,986,989],{"class":31,"line":255},[29,967,968],{"class":35},"{ margin: ",[29,970,971],{"class":198},"10",[29,973,974],{"class":35},", width: ",[29,976,977],{"class":198},"50",[29,979,980],{"class":35},", height: ",[29,982,977],{"class":198},[29,984,985],{"class":35},", background: ",[29,987,988],{"class":50},"\"red\"",[29,990,273],{"class":35},[29,992,993],{"class":31,"line":261},[29,994,995],{"class":124},"\u002F\u002F Picture.source is data bound to the \"source\" attribute of the model data\n",[29,997,998,1001,1004,1007,1010,1013],{"class":31,"line":276},[29,999,1000],{"class":131},"new",[29,1002,1003],{"class":35}," go.",[29,1005,1006],{"class":43},"Binding",[29,1008,1009],{"class":35},"(",[29,1011,1012],{"class":50},"\"source\"",[29,1014,1015],{"class":35},")),\n",[29,1017,1018,1020],{"class":31,"line":281},[29,1019,876],{"class":43},[29,1021,1022],{"class":35},"(go.TextBlock,\n",[29,1024,1025,1028,1031],{"class":31,"line":287},[29,1026,1027],{"class":50},"\"Default Text\"",[29,1029,1030],{"class":35},", ",[29,1032,1033],{"class":124},"\u002F\u002F the initial value for TextBlock.text\n",[29,1035,1036],{"class":31,"line":299},[29,1037,1038],{"class":124},"\u002F\u002F some room around the text, a larger font, and a white stroke:\n",[29,1040,1041,1043,1046,1049,1052,1055,1058],{"class":31,"line":304},[29,1042,968],{"class":35},[29,1044,1045],{"class":198},"12",[29,1047,1048],{"class":35},", stroke: ",[29,1050,1051],{"class":50},"\"white\"",[29,1053,1054],{"class":35},", font: ",[29,1056,1057],{"class":50},"\"bold 16px sans-serif\"",[29,1059,273],{"class":35},[29,1061,1062],{"class":31,"line":310},[29,1063,1064],{"class":124},"\u002F\u002F TextBlock.text is data bound to the \"name\" attribute of the model data\n",[29,1066,1067,1069,1071,1073,1075,1078,1080,1083],{"class":31,"line":322},[29,1068,1000],{"class":131},[29,1070,1003],{"class":35},[29,1072,1006],{"class":43},[29,1074,1009],{"class":35},[29,1076,1077],{"class":50},"\"text\"",[29,1079,403],{"class":35},[29,1081,1082],{"class":50},"\"name\"",[29,1084,1085],{"class":35},"))\n",[29,1087,1088],{"class":31,"line":327},[29,1089,841],{"class":35},[29,1091,1092,1094,1097,1099,1101],{"class":31,"line":333},[29,1093,132],{"class":131},[29,1095,1096],{"class":35}," model ",[29,1098,47],{"class":131},[29,1100,362],{"class":43},[29,1102,1103],{"class":35},"(go.Model);\n",[29,1105,1106,1109],{"class":31,"line":345},[29,1107,1108],{"class":35},"model.nodeDataArray ",[29,1110,871],{"class":131},[29,1112,1113,1116],{"class":31,"line":351},[29,1114,1115],{"class":35},"[ ",[29,1117,1118],{"class":124},"\u002F\u002F note that each node data object holds whatever properties it needs;\n",[29,1120,1121],{"class":31,"line":372},[29,1122,1123],{"class":124},"\u002F\u002F for this app we add the \"name\" and \"source\" properties\n",[29,1125,1126,1129,1132,1135,1138],{"class":31,"line":378},[29,1127,1128],{"class":35},"{ name: ",[29,1130,1131],{"class":50},"\"Don Meow\"",[29,1133,1134],{"class":35},", source: ",[29,1136,1137],{"class":50},"\"\u002Fimages\u002Flearn\u002Fcat1.png\"",[29,1139,273],{"class":35},[29,1141,1142,1144,1147,1149,1152],{"class":31,"line":384},[29,1143,1128],{"class":35},[29,1145,1146],{"class":50},"\"Copricat\"",[29,1148,1134],{"class":35},[29,1150,1151],{"class":50},"\"\u002Fimages\u002Flearn\u002Fcat2.png\"",[29,1153,273],{"class":35},[29,1155,1156,1158,1161,1164,1167],{"class":31,"line":393},[29,1157,1128],{"class":35},[29,1159,1160],{"class":50},"\"Demeter\"",[29,1162,1163],{"class":35},", source: ",[29,1165,1166],{"class":50},"\"\u002Fimages\u002Flearn\u002Fcat3.png\"",[29,1168,273],{"class":35},[29,1170,1171,1174,1177],{"class":31,"line":409},[29,1172,1173],{"class":35},"{ ",[29,1175,1176],{"class":124},"\u002F* Empty node data *\u002F",[29,1178,1179],{"class":35}," }\n",[29,1181,1182],{"class":31,"line":415},[29,1183,1184],{"class":35},"];\n",[29,1186,1187,1190,1192],{"class":31,"line":421},[29,1188,1189],{"class":35},"myDiagram.model ",[29,1191,47],{"class":131},[29,1193,1194],{"class":35}," model;\n",[15,1196,1197],{"id":1197},"创建模型数据",[1199,1200,1201],"ul",{},[1202,1203,1204,1205,1208],"li",{},"在",[26,1206,1207],{},"model","中添加模型节点数据",[19,1210,1212],{"className":847,"code":1211,"language":849,"meta":24,"style":24},"var myModel = objGo(go.Model);\u002F\u002F创建Model对象\n\u002F\u002F model中的数据每一个js对象都代表着一个相应的模型图中的元素\nmyModel.nodeDataArray = [\n { key: \"工厂\" },\n { key: \"车间\" },\n { key: \"工人\" },\n { key: \"岗位\" },\n];\nmyDiagram.model = myModel; \u002F\u002F将模型数据绑定到画布图上\n",[26,1213,1214,1231,1236,1246,1256,1265,1274,1283,1287],{"__ignoreMap":24},[29,1215,1216,1218,1221,1223,1225,1228],{"class":31,"line":32},[29,1217,132],{"class":131},[29,1219,1220],{"class":35}," myModel ",[29,1222,47],{"class":131},[29,1224,153],{"class":43},[29,1226,1227],{"class":35},"(go.Model);",[29,1229,1230],{"class":124},"\u002F\u002F创建Model对象\n",[29,1232,1233],{"class":31,"line":128},[29,1234,1235],{"class":124},"\u002F\u002F model中的数据每一个js对象都代表着一个相应的模型图中的元素\n",[29,1237,1238,1241,1243],{"class":31,"line":143},[29,1239,1240],{"class":35},"myModel.nodeDataArray ",[29,1242,47],{"class":131},[29,1244,1245],{"class":35}," [\n",[29,1247,1248,1251,1254],{"class":31,"line":164},[29,1249,1250],{"class":35}," { key: ",[29,1252,1253],{"class":50},"\"工厂\"",[29,1255,273],{"class":35},[29,1257,1258,1260,1263],{"class":31,"line":170},[29,1259,1250],{"class":35},[29,1261,1262],{"class":50},"\"车间\"",[29,1264,273],{"class":35},[29,1266,1267,1269,1272],{"class":31,"line":176},[29,1268,1250],{"class":35},[29,1270,1271],{"class":50},"\"工人\"",[29,1273,273],{"class":35},[29,1275,1276,1278,1281],{"class":31,"line":183},[29,1277,1250],{"class":35},[29,1279,1280],{"class":50},"\"岗位\"",[29,1282,273],{"class":35},[29,1284,1285],{"class":31,"line":189},[29,1286,1184],{"class":35},[29,1288,1289,1291,1293,1296],{"class":31,"line":205},[29,1290,1189],{"class":35},[29,1292,47],{"class":131},[29,1294,1295],{"class":35}," myModel; ",[29,1297,1298],{"class":124},"\u002F\u002F将模型数据绑定到画布图上\n",[15,1300,1301],{"id":1301},"创建节点",[61,1303,1304],{},"上面有了画布和节点数据，只是有了一个雏形，但是还没有任何的图形化效果。我们加入一些效果试试",[61,1306,1307],{},"在gojs里面给我们提供了几种模型节点的可选项，官方文档：",[1199,1309,1310,1320,1328,1336],{},[1202,1311,1312,1319],{},[1313,1314,1318],"a",{"href":1315,"rel":1316},"http:\u002F\u002Fgojs.net\u002Flatest\u002Fintro\u002Fshapes.html",[1317],"nofollow","Shape",":形状——Rectangle（矩形）、RoundedRectangle（圆角矩形），Ellipse（椭圆形），Triangle（三角形），Diamond（菱形），Circle（圆形）等",[1202,1321,1322,1327],{},[1313,1323,1326],{"href":1324,"rel":1325},"http:\u002F\u002Fgojs.net\u002Flatest\u002Fintro\u002Ftextblocks.html",[1317],"TextBlock",":文本域（可编辑）",[1202,1329,1330,1335],{},[1313,1331,1334],{"href":1332,"rel":1333},"http:\u002F\u002Fgojs.net\u002Flatest\u002Fintro\u002Fpictures.html",[1317],"Picture",":图片",[1202,1337,1338,1343,1344,1347],{},[1313,1339,1342],{"href":1340,"rel":1341},"http:\u002F\u002Fgojs.net\u002Flatest\u002Fintro\u002Fpanels.html",[1317],"Panel",":容器来保存其他Node的集合 ",[1345,1346],"br",{},"\n默认的节点模型代码只是由一个TextBlock组件构建成",[10,1349,1351],{"id":1350},"gojs-去水印","GoJS 去水印",[61,1353,1354,1355,1357],{},"使用",[26,1356,13],{},"默认会在画布的左上角生成水印",[61,1359,1360],{},[1361,1362],"img",{"alt":24,"src":1363},"\u002Fimages\u002Fb-tools\u002F2024-07-11-17-20-54-image.png",[61,1365,1366,1367,1369,1370,1373,1374,1377,1378,1380],{},"搜索去除水印的相关方法说，之前的版本中",[26,1368,13],{},"去除水印很简单，在",[26,1371,1372],{},"release\u002Fgo.js","文件中搜索带",[26,1375,1376],{},"7eba17a4ca3b1a8346","的函数，让其返回",[26,1379,199],{},"就可。",[61,1382,1383,1384,1387],{},"我使用的版本是",[26,1385,1386],{},"2.3.14","，按照上述方法尝试，并未修改成功。",[61,1389,1390,1391,1393,1394,1397],{},"查找发现，",[26,1392,13],{},"在初始创建",[26,1395,1396],{},"canvas","的时候会进行绘制水印。在初始化使用绘制函数创建画布的时候，加上了水印。",[61,1399,1400],{},"查找新版和旧版的去水印功能，发现只要调用获取水印的函数就没问题，把绘制的函数替换为获取水印的函数",[1199,1402,1403],{},[1202,1404,1405],{},"去水印脚本如下：",[19,1407,1409],{"className":847,"code":1408,"language":849,"meta":24,"style":24},"const fs = require('fs');\nconst path = require('path');\nconst file = path.join(__dirname, '.\u002Fnode_modules\u002Fgojs\u002Frelease\u002Fgo.js');\n\u002F\u002F 我用到了GoJS 的扩展，所以要把 go-module.js 文件也加上\nconst file1 = path.join(__dirname, '.\u002Fnode_modules\u002Fgojs\u002Frelease\u002Fgo-module.js');\n\u002F\u002F去除gojs水印\nconst ignore = function (file) {\n fs.readFile(file, 'utf8', function (err, data) {\n if (err) throw err;\n let hasMatch = false;\n let content = data.replace(\u002F[\\w\\W]{8}7eba17a4ca3b1a8346[\\w\\W]{31}\u002Fgi, function (match) {\n if (match) hasMatch = true;\n return 'function(){return true;}';\n }); \u002F\u002F旧版去水印\n if (!hasMatch) {\n \u002F\u002F新版去水印\n content = data.replace(\u002F[^\\)^\\{}]*7ca11abfd7330390[^;]*\u002Fgi, function (match) {\n \u002F\u002F查找绘制文本的语句\n let arr = \u002F\\]\\(([^\\,]+)\u002F.exec(match); \u002F\u002F查找语句中的获取水印文本函数\n \u002F\u002Fconsole.log(arr);\n return arr && arr.length >= 1 && arr[1]; \u002F\u002F用该函数整个替换绘制函数\n });\n }\n fs.writeFile(file, content, 'utf8', (err) => {\n if (err) throw err;\n \u002F\u002F console.log('success done');\n });\n });\n};\nignore(file);\n\u002F\u002F ignore(file1);\n};\nignore(file);\nignore(file1);\n\n\u002F\u002F 然后这个脚本在package.json打包或者运行时插入命令调用\n\u002F\u002F 这里的脚本文件名为 ignoreGoJS.js\n\"scripts\": {\n \"dev\": \"node ignoreGoJS && vue-cli-service serve\",\n \"build\": \"node ignoreGoJS && vue-cli-service build\",\n },\n\u002F\u002F 或者直接执行 js 文件\n\n$ node ignoreGoJS\n",[26,1410,1411,1432,1450,1473,1478,1498,1503,1525,1556,1570,1586,1636,1651,1661,1669,1681,1686,1748,1753,1801,1806,1843,1848,1853,1880,1890,1895,1900,1905,1910,1918,1923,1927,1933,1940,1944,1949,1954,1962,1974,1986,1991,1996,2000],{"__ignoreMap":24},[29,1412,1413,1416,1419,1422,1425,1427,1430],{"class":31,"line":32},[29,1414,1415],{"class":131},"const",[29,1417,1418],{"class":198}," fs",[29,1420,1421],{"class":131}," =",[29,1423,1424],{"class":43}," require",[29,1426,1009],{"class":35},[29,1428,1429],{"class":50},"'fs'",[29,1431,841],{"class":35},[29,1433,1434,1436,1439,1441,1443,1445,1448],{"class":31,"line":128},[29,1435,1415],{"class":131},[29,1437,1438],{"class":198}," path",[29,1440,1421],{"class":131},[29,1442,1424],{"class":43},[29,1444,1009],{"class":35},[29,1446,1447],{"class":50},"'path'",[29,1449,841],{"class":35},[29,1451,1452,1454,1457,1459,1462,1465,1468,1471],{"class":31,"line":143},[29,1453,1415],{"class":131},[29,1455,1456],{"class":198}," file",[29,1458,1421],{"class":131},[29,1460,1461],{"class":35}," path.",[29,1463,1464],{"class":43},"join",[29,1466,1467],{"class":35},"(__dirname, ",[29,1469,1470],{"class":50},"'.\u002Fnode_modules\u002Fgojs\u002Frelease\u002Fgo.js'",[29,1472,841],{"class":35},[29,1474,1475],{"class":31,"line":164},[29,1476,1477],{"class":124},"\u002F\u002F 我用到了GoJS 的扩展，所以要把 go-module.js 文件也加上\n",[29,1479,1480,1482,1485,1487,1489,1491,1493,1496],{"class":31,"line":170},[29,1481,1415],{"class":131},[29,1483,1484],{"class":198}," file1",[29,1486,1421],{"class":131},[29,1488,1461],{"class":35},[29,1490,1464],{"class":43},[29,1492,1467],{"class":35},[29,1494,1495],{"class":50},"'.\u002Fnode_modules\u002Fgojs\u002Frelease\u002Fgo-module.js'",[29,1497,841],{"class":35},[29,1499,1500],{"class":31,"line":176},[29,1501,1502],{"class":124},"\u002F\u002F去除gojs水印\n",[29,1504,1505,1507,1510,1512,1515,1518,1522],{"class":31,"line":183},[29,1506,1415],{"class":131},[29,1508,1509],{"class":43}," ignore",[29,1511,1421],{"class":131},[29,1513,1514],{"class":131}," function",[29,1516,1517],{"class":35}," (",[29,1519,1521],{"class":1520},"s4XuR","file",[29,1523,1524],{"class":35},") {\n",[29,1526,1527,1530,1533,1536,1539,1541,1544,1546,1549,1551,1554],{"class":31,"line":189},[29,1528,1529],{"class":35}," fs.",[29,1531,1532],{"class":43},"readFile",[29,1534,1535],{"class":35},"(file, ",[29,1537,1538],{"class":50},"'utf8'",[29,1540,403],{"class":35},[29,1542,1543],{"class":131},"function",[29,1545,1517],{"class":35},[29,1547,1548],{"class":1520},"err",[29,1550,403],{"class":35},[29,1552,1553],{"class":1520},"data",[29,1555,1524],{"class":35},[29,1557,1558,1561,1564,1567],{"class":31,"line":205},[29,1559,1560],{"class":131}," if",[29,1562,1563],{"class":35}," (err) ",[29,1565,1566],{"class":131},"throw",[29,1568,1569],{"class":35}," err;\n",[29,1571,1572,1575,1578,1580,1583],{"class":31,"line":210},[29,1573,1574],{"class":131}," let",[29,1576,1577],{"class":35}," hasMatch ",[29,1579,47],{"class":131},[29,1581,1582],{"class":198}," false",[29,1584,1585],{"class":35},";\n",[29,1587,1588,1590,1593,1595,1598,1601,1603,1606,1609,1612,1615,1617,1620,1622,1625,1627,1629,1631,1634],{"class":31,"line":216},[29,1589,1574],{"class":131},[29,1591,1592],{"class":35}," content ",[29,1594,47],{"class":131},[29,1596,1597],{"class":35}," data.",[29,1599,1600],{"class":43},"replace",[29,1602,1009],{"class":35},[29,1604,1605],{"class":50},"\u002F",[29,1607,1608],{"class":198},"[\\w\\W]",[29,1610,1611],{"class":131},"{8}",[29,1613,1376],{"class":1614},"sA_wV",[29,1616,1608],{"class":198},[29,1618,1619],{"class":131},"{31}",[29,1621,1605],{"class":50},[29,1623,1624],{"class":131},"gi",[29,1626,403],{"class":35},[29,1628,1543],{"class":131},[29,1630,1517],{"class":35},[29,1632,1633],{"class":1520},"match",[29,1635,1524],{"class":35},[29,1637,1638,1641,1644,1646,1649],{"class":31,"line":227},[29,1639,1640],{"class":131}," if",[29,1642,1643],{"class":35}," (match) hasMatch ",[29,1645,47],{"class":131},[29,1647,1648],{"class":198}," true",[29,1650,1585],{"class":35},[29,1652,1653,1656,1659],{"class":31,"line":232},[29,1654,1655],{"class":131}," return",[29,1657,1658],{"class":50}," 'function(){return true;}'",[29,1660,1585],{"class":35},[29,1662,1663,1666],{"class":31,"line":238},[29,1664,1665],{"class":35}," }); ",[29,1667,1668],{"class":124},"\u002F\u002F旧版去水印\n",[29,1670,1671,1673,1675,1678],{"class":31,"line":250},[29,1672,1560],{"class":131},[29,1674,1517],{"class":35},[29,1676,1677],{"class":131},"!",[29,1679,1680],{"class":35},"hasMatch) {\n",[29,1682,1683],{"class":31,"line":255},[29,1684,1685],{"class":124}," \u002F\u002F新版去水印\n",[29,1687,1688,1691,1693,1695,1697,1699,1701,1704,1707,1711,1713,1716,1719,1722,1725,1727,1729,1732,1734,1736,1738,1740,1742,1744,1746],{"class":31,"line":261},[29,1689,1690],{"class":35}," content ",[29,1692,47],{"class":131},[29,1694,1597],{"class":35},[29,1696,1600],{"class":43},[29,1698,1009],{"class":35},[29,1700,1605],{"class":50},[29,1702,1703],{"class":198},"[",[29,1705,1706],{"class":131},"^",[29,1708,1710],{"class":1709},"snhLl","\\)",[29,1712,1706],{"class":198},[29,1714,1715],{"class":1709},"\\{",[29,1717,1718],{"class":198},"}]",[29,1720,1721],{"class":131},"*",[29,1723,1724],{"class":1614},"7ca11abfd7330390",[29,1726,1703],{"class":198},[29,1728,1706],{"class":131},[29,1730,1731],{"class":198},";]",[29,1733,1721],{"class":131},[29,1735,1605],{"class":50},[29,1737,1624],{"class":131},[29,1739,403],{"class":35},[29,1741,1543],{"class":131},[29,1743,1517],{"class":35},[29,1745,1633],{"class":1520},[29,1747,1524],{"class":35},[29,1749,1750],{"class":31,"line":276},[29,1751,1752],{"class":124}," \u002F\u002F查找绘制文本的语句\n",[29,1754,1755,1758,1761,1763,1766,1769,1771,1773,1775,1778,1781,1784,1787,1789,1792,1795,1798],{"class":31,"line":281},[29,1756,1757],{"class":131}," let",[29,1759,1760],{"class":35}," arr ",[29,1762,47],{"class":131},[29,1764,1765],{"class":50}," \u002F",[29,1767,1768],{"class":1709},"\\]\\(",[29,1770,1009],{"class":1614},[29,1772,1703],{"class":198},[29,1774,1706],{"class":131},[29,1776,1777],{"class":1709},"\\,",[29,1779,1780],{"class":198},"]",[29,1782,1783],{"class":131},"+",[29,1785,1786],{"class":1614},")",[29,1788,1605],{"class":50},[29,1790,1791],{"class":35},".",[29,1793,1794],{"class":43},"exec",[29,1796,1797],{"class":35},"(match); ",[29,1799,1800],{"class":124},"\u002F\u002F查找语句中的获取水印文本函数\n",[29,1802,1803],{"class":31,"line":287},[29,1804,1805],{"class":124}," \u002F\u002Fconsole.log(arr);\n",[29,1807,1808,1811,1813,1816,1819,1822,1825,1828,1831,1834,1837,1840],{"class":31,"line":299},[29,1809,1810],{"class":131}," return",[29,1812,1760],{"class":35},[29,1814,1815],{"class":131},"&&",[29,1817,1818],{"class":35}," arr.",[29,1820,1821],{"class":198},"length",[29,1823,1824],{"class":131}," >=",[29,1826,1827],{"class":198}," 1",[29,1829,1830],{"class":131}," &&",[29,1832,1833],{"class":35}," arr[",[29,1835,1836],{"class":198},"1",[29,1838,1839],{"class":35},"]; ",[29,1841,1842],{"class":124},"\u002F\u002F用该函数整个替换绘制函数\n",[29,1844,1845],{"class":31,"line":304},[29,1846,1847],{"class":35}," });\n",[29,1849,1850],{"class":31,"line":310},[29,1851,1852],{"class":35}," }\n",[29,1854,1855,1858,1861,1864,1866,1869,1871,1874,1877],{"class":31,"line":322},[29,1856,1857],{"class":35}," fs.",[29,1859,1860],{"class":43},"writeFile",[29,1862,1863],{"class":35},"(file, content, ",[29,1865,1538],{"class":50},[29,1867,1868],{"class":35},", (",[29,1870,1548],{"class":1520},[29,1872,1873],{"class":35},") ",[29,1875,1876],{"class":131},"=>",[29,1878,1879],{"class":35}," {\n",[29,1881,1882,1884,1886,1888],{"class":31,"line":327},[29,1883,1640],{"class":131},[29,1885,1563],{"class":35},[29,1887,1566],{"class":131},[29,1889,1569],{"class":35},[29,1891,1892],{"class":31,"line":333},[29,1893,1894],{"class":124}," \u002F\u002F console.log('success done');\n",[29,1896,1897],{"class":31,"line":345},[29,1898,1899],{"class":35}," });\n",[29,1901,1902],{"class":31,"line":351},[29,1903,1904],{"class":35}," });\n",[29,1906,1907],{"class":31,"line":372},[29,1908,1909],{"class":35},"};\n",[29,1911,1912,1915],{"class":31,"line":378},[29,1913,1914],{"class":43},"ignore",[29,1916,1917],{"class":35},"(file);\n",[29,1919,1920],{"class":31,"line":384},[29,1921,1922],{"class":124},"\u002F\u002F ignore(file1);\n",[29,1924,1925],{"class":31,"line":393},[29,1926,1909],{"class":35},[29,1928,1929,1931],{"class":31,"line":409},[29,1930,1914],{"class":43},[29,1932,1917],{"class":35},[29,1934,1935,1937],{"class":31,"line":415},[29,1936,1914],{"class":43},[29,1938,1939],{"class":35},"(file1);\n",[29,1941,1942],{"class":31,"line":421},[29,1943,180],{"emptyLinePlaceholder":179},[29,1945,1946],{"class":31,"line":430},[29,1947,1948],{"class":124},"\u002F\u002F 然后这个脚本在package.json打包或者运行时插入命令调用\n",[29,1950,1951],{"class":31,"line":439},[29,1952,1953],{"class":124},"\u002F\u002F 这里的脚本文件名为 ignoreGoJS.js\n",[29,1955,1956,1959],{"class":31,"line":448},[29,1957,1958],{"class":50},"\"scripts\"",[29,1960,1961],{"class":35},": {\n",[29,1963,1964,1967,1969,1972],{"class":31,"line":454},[29,1965,1966],{"class":50}," \"dev\"",[29,1968,195],{"class":35},[29,1970,1971],{"class":50},"\"node ignoreGoJS && vue-cli-service serve\"",[29,1973,202],{"class":35},[29,1975,1976,1979,1981,1984],{"class":31,"line":459},[29,1977,1978],{"class":50}," \"build\"",[29,1980,195],{"class":35},[29,1982,1983],{"class":50},"\"node ignoreGoJS && vue-cli-service build\"",[29,1985,202],{"class":35},[29,1987,1988],{"class":31,"line":465},[29,1989,1990],{"class":35}," },\n",[29,1992,1993],{"class":31,"line":471},[29,1994,1995],{"class":124},"\u002F\u002F 或者直接执行 js 文件\n",[29,1997,1998],{"class":31,"line":481},[29,1999,180],{"emptyLinePlaceholder":179},[29,2001,2002],{"class":31,"line":487},[29,2003,2004],{"class":35},"$ node ignoreGoJS\n",[61,2006,2007],{},"运行查看效果，没有水印了：",[61,2009,2010],{},[1361,2011],{"alt":24,"src":2012},"\u002Fimages\u002Fb-tools\u002F2024-07-11-17-37-23-image.png",[10,2014,2016],{"id":2015},"gojs-画布常用api","GoJS 画布常用API",[15,2018,2019],{"id":2019},"画布操作",[2021,2022,2023,2036],"table",{},[2024,2025,2026],"thead",{},[2027,2028,2029,2033],"tr",{},[2030,2031,2032],"th",{},"作用",[2030,2034,2035],{},"api",[2037,2038,2039,2048,2056,2064,2093],"tbody",{},[2027,2040,2041,2045],{},[2042,2043,2044],"td",{},"获取当前画布的 json",[2042,2046,2047],{},"myDiagram.model.toJson()",[2027,2049,2050,2053],{},[2042,2051,2052],{},"加载 json 刷新画布",[2042,2054,2055],{},"myDiagram.model = go.Model.fromJson(model)",[2027,2057,2058,2061],{},[2042,2059,2060],{},"删除选中节点或线",[2042,2062,2063],{},"myDiagram.commandHandlr.deleteSelection()",[2027,2065,2066,2072],{},[2042,2067,2068,2069,2071],{},"获取选中的节点或线",[1345,2070],{},"myDiagram.selection",[2042,2073,2074,2075,2077,2078,2080,2081,2083,2084,2086,2087,2089,2090,2092],{},"- 用例获取选中的节点或线",[1345,2076],{}," var nodeOrLinkList = myDiagram.selection",[1345,2079],{}," nodeOrLinkList.each((node) => {",[1345,2082],{},"        console.info(node.data)",[1345,2085],{},"    })",[1345,2088],{},"- 获取第一个选中的节点或线",[1345,2091],{},"var nodeOrLinkFirst = myDiagram.selection.first()",[2027,2094,2095,2101],{},[2042,2096,2097,2098,2100],{},"获取画布所有节点对象",[1345,2099],{},"myDiagram.nodes",[2042,2102,2103,2104,2106,2107,2109,2110,2112,2113,2115],{},"var nodes = myDiagram.nodes",[1345,2105],{},"\u002F\u002F 遍历输出节点对象",[1345,2108],{},"nodes.each((node) => {",[1345,2111],{},"    console.info(node.data.text)",[1345,2114],{},"})",[61,2117,2118],{},"获取并操作选中元素也可以在监听选中项进行修改：",[19,2120,2122],{"className":847,"code":2121,"language":849,"meta":24,"style":24},"\u002F\u002F 监听选中项\n that.myDiagram.addDiagramListener(\"ChangedSelection\", function (e, i) {\n \u002F\u002F console.log(\"重新选择了\", e.myDiagram.lastInput.viewPoint);\n \u002F\u002F console.log(\"重新选择了\", e.Lr.ea);\n that.selectNode = [];\n that.selectLink = [];\n that.myDiagram.selection.each(function (part) {\n if (part instanceof go.Node) {、\n \u002F* 获取所有的 Node 节点 *\u002F\n that.selectNode.push(part.data);\n } else if (part instanceof go.Link) {\n \u002F* 获取所有的 link 连线 *\u002F\n that.selectLink.push(part.data);\n }\n });\n });\n",[26,2123,2124,2129,2158,2163,2168,2178,2187,2206,2228,2233,2244,2268,2273,2282,2287,2291],{"__ignoreMap":24},[29,2125,2126],{"class":31,"line":32},[29,2127,2128],{"class":124},"\u002F\u002F 监听选中项\n",[29,2130,2131,2134,2137,2139,2142,2144,2146,2148,2151,2153,2156],{"class":31,"line":128},[29,2132,2133],{"class":35}," that.myDiagram.",[29,2135,2136],{"class":43},"addDiagramListener",[29,2138,1009],{"class":35},[29,2140,2141],{"class":50},"\"ChangedSelection\"",[29,2143,403],{"class":35},[29,2145,1543],{"class":131},[29,2147,1517],{"class":35},[29,2149,2150],{"class":1520},"e",[29,2152,403],{"class":35},[29,2154,2155],{"class":1520},"i",[29,2157,1524],{"class":35},[29,2159,2160],{"class":31,"line":143},[29,2161,2162],{"class":124}," \u002F\u002F console.log(\"重新选择了\", e.myDiagram.lastInput.viewPoint);\n",[29,2164,2165],{"class":31,"line":164},[29,2166,2167],{"class":124}," \u002F\u002F console.log(\"重新选择了\", e.Lr.ea);\n",[29,2169,2170,2173,2175],{"class":31,"line":170},[29,2171,2172],{"class":35}," that.selectNode ",[29,2174,47],{"class":131},[29,2176,2177],{"class":35}," [];\n",[29,2179,2180,2183,2185],{"class":31,"line":176},[29,2181,2182],{"class":35}," that.selectLink ",[29,2184,47],{"class":131},[29,2186,2177],{"class":35},[29,2188,2189,2192,2195,2197,2199,2201,2204],{"class":31,"line":183},[29,2190,2191],{"class":35}," that.myDiagram.selection.",[29,2193,2194],{"class":43},"each",[29,2196,1009],{"class":35},[29,2198,1543],{"class":131},[29,2200,1517],{"class":35},[29,2202,2203],{"class":1520},"part",[29,2205,1524],{"class":35},[29,2207,2208,2211,2214,2217,2220,2222,2225],{"class":31,"line":189},[29,2209,2210],{"class":131}," if",[29,2212,2213],{"class":35}," (part ",[29,2215,2216],{"class":131},"instanceof",[29,2218,2219],{"class":43}," go",[29,2221,1791],{"class":35},[29,2223,2224],{"class":43},"Node",[29,2226,2227],{"class":35},") {、\n",[29,2229,2230],{"class":31,"line":205},[29,2231,2232],{"class":124}," \u002F* 获取所有的 Node 节点 *\u002F\n",[29,2234,2235,2238,2241],{"class":31,"line":210},[29,2236,2237],{"class":35}," that.selectNode.",[29,2239,2240],{"class":43},"push",[29,2242,2243],{"class":35},"(part.data);\n",[29,2245,2246,2249,2252,2255,2257,2259,2261,2263,2266],{"class":31,"line":216},[29,2247,2248],{"class":35}," } ",[29,2250,2251],{"class":131},"else",[29,2253,2254],{"class":131}," if",[29,2256,2213],{"class":35},[29,2258,2216],{"class":131},[29,2260,2219],{"class":43},[29,2262,1791],{"class":35},[29,2264,2265],{"class":43},"Link",[29,2267,1524],{"class":35},[29,2269,2270],{"class":31,"line":227},[29,2271,2272],{"class":124}," \u002F* 获取所有的 link 连线 *\u002F\n",[29,2274,2275,2278,2280],{"class":31,"line":232},[29,2276,2277],{"class":35}," that.selectLink.",[29,2279,2240],{"class":43},[29,2281,2243],{"class":35},[29,2283,2284],{"class":31,"line":238},[29,2285,2286],{"class":35}," }\n",[29,2288,2289],{"class":31,"line":250},[29,2290,1899],{"class":35},[29,2292,2293],{"class":31,"line":255},[29,2294,2295],{"class":35}," });\n",[15,2297,2298],{"id":2298},"节点操作",[2021,2300,2301,2310],{},[2024,2302,2303],{},[2027,2304,2305,2307],{},[2030,2306,2032],{},[2030,2308,2309],{},"API",[2037,2311,2312,2320,2328,2336,2350,2379,2387,2398],{},[2027,2313,2314,2317],{},[2042,2315,2316],{},"添加节点",[2042,2318,2319],{},"myDiagram.model.addNodeData(node)",[2027,2321,2322,2325],{},[2042,2323,2324],{},"删除节点",[2042,2326,2327],{},"myDiagram.model.removeNodeData(node)",[2027,2329,2330,2333],{},[2042,2331,2332],{},"选中单个节点(不能批量选中)",[2042,2334,2335],{},"myDiagram.select(node)",[2027,2337,2338,2341],{},[2042,2339,2340],{},"更改节点属性",[2042,2342,2343,2344,2346,2347,2349],{},"myDiagram.model.setDataProperty(node,",[1345,2345],{}," \"color\",'#000\")",[1345,2348],{},"(参数对应：要修改的节点、要修改的属性名、修改后的属性值)",[2027,2351,2352,2364],{},[2042,2353,2354,2355,2357,2358,2360,2361,2363],{},"根据节点数据对象更改节点属性",[1345,2356],{},"myDiagram.model.",[1345,2359],{},"updateTargetBindings",[1345,2362],{},"(node)",[2042,2365,2366,2367,2369,2370,2372,2373,2375,2376,2378],{},"var node = myDiagram.model.",[1345,2368],{},"findNodeDataForKey('nodeKey')",[1345,2371],{},"  node.text = 'newText'",[1345,2374],{},"  node.color = 'pink'",[1345,2377],{},"  myDiagram.model.updateTargetBindings(node)",[2027,2380,2381,2384],{},[2042,2382,2383],{},"获取节点对象",[2042,2385,2386],{},"let node = myDiagram.findNodeForKey('key')",[2027,2388,2389,2392],{},[2042,2390,2391],{},"获取节点Data",[2042,2393,2394,2395,2397],{},"let nodeData = myDiagram.model.",[1345,2396],{},"  findNodeDataForKey(‘key')",[2027,2399,2400,2411],{},[2042,2401,2402,2403,2357,2405,2407,2408,2410],{},"批量删除节点",[1345,2404],{},[1345,2406],{}," removeNodeDataCollection",[1345,2409],{},"(nodes)",[2042,2412,2413,2414,2416,2418,2419,2421,2422,2424,2425,2427,2428,2430,2431,2430,2433,2435],{},"let removeNodes = ",[29,2415],{},[1345,2417],{},"let removeNode0 = myDiagram.model.",[1345,2420],{},"  findNodeDataForKey('key0')",[1345,2423],{},"let removeNode1 = myDiagram.model.",[1345,2426],{},"  findNodeDataForKey('key1')",[1345,2429],{},"removeNodes.push(removeNode0)",[1345,2432],{},[1345,2434],{},"myDiagram.model.removeNodeDataCollection(removeNodes)",[1199,2437,2438,2529],{},[1202,2439,2402,2440],{},[19,2441,2443],{"className":115,"code":2442,"language":117,"meta":24,"style":24},"let removeNodes = []\nlet removeNode0 = myDiagram.model.findNodeDataForKey('key0')\nlet removeNode1 = myDiagram.model.findNodeDataForKey('key1')\nremoveNodes.push(removeNode0)\nremoveNodes.push(removeNode0)\nmyDiagram.model.removeNodeDataCollection(removeNodes)\n",[26,2444,2445,2458,2481,2501,2511,2519],{"__ignoreMap":24},[29,2446,2447,2450,2453,2455],{"class":31,"line":32},[29,2448,2449],{"class":131},"let",[29,2451,2452],{"class":35}," removeNodes ",[29,2454,47],{"class":131},[29,2456,2457],{"class":35}," []\n",[29,2459,2460,2462,2465,2467,2470,2473,2475,2478],{"class":31,"line":128},[29,2461,2449],{"class":131},[29,2463,2464],{"class":35}," removeNode0 ",[29,2466,47],{"class":131},[29,2468,2469],{"class":35}," myDiagram.model.",[29,2471,2472],{"class":43},"findNodeDataForKey",[29,2474,1009],{"class":35},[29,2476,2477],{"class":50},"'key0'",[29,2479,2480],{"class":35},")\n",[29,2482,2483,2485,2488,2490,2492,2494,2496,2499],{"class":31,"line":143},[29,2484,2449],{"class":131},[29,2486,2487],{"class":35}," removeNode1 ",[29,2489,47],{"class":131},[29,2491,2469],{"class":35},[29,2493,2472],{"class":43},[29,2495,1009],{"class":35},[29,2497,2498],{"class":50},"'key1'",[29,2500,2480],{"class":35},[29,2502,2503,2506,2508],{"class":31,"line":164},[29,2504,2505],{"class":35},"removeNodes.",[29,2507,2240],{"class":43},[29,2509,2510],{"class":35},"(removeNode0)\n",[29,2512,2513,2515,2517],{"class":31,"line":170},[29,2514,2505],{"class":35},[29,2516,2240],{"class":43},[29,2518,2510],{"class":35},[29,2520,2521,2523,2526],{"class":31,"line":176},[29,2522,2357],{"class":35},[29,2524,2525],{"class":43},"removeNodeDataCollection",[29,2527,2528],{"class":35},"(removeNodes)\n",[1202,2530,2531,2532],{},"模糊获取节点 (版本 1.68 以上)：",[19,2533,2535],{"className":847,"code":2534,"language":849,"meta":24,"style":24},"myDiagram.findNodesByExample(data)\n\u002F* \n匹配方式默认为===运算符进行比较。\n\u002Fabc\u002F 匹配包含“abc”的任何字符串\n\u002Fabc\u002Fi 匹配包含“abc”的任何字符串，忽略大小写\n\u002F^no\u002Fi 匹配任何以“no”开头的字符串，忽略大小写\n\u002Fism$\u002F匹配任何以“ism”结尾的字符串\n\u002F(green|red) apple\u002F 匹配包含“green apple”或“red apple”的字符串\n要查询的值类型区分数字和字符串：比如json中是`90`,写成 90 会查询\n*\u002F\nlet data = {};\n data.text=\"设计\";\n\u002F\u002F data.text=\u002F设计\u002F;\n\u002F\u002F data.text=\u002F设计\u002Fi;\n\u002F\u002F data.text=\u002F^设计\u002F;\n\u002F\u002F data.text=\u002F设计$\u002F;\n\u002F\u002F data.text=\u002F(勘|察)设计\u002F;\nlet nodes = myDiagram.findNodesByExample(data);\nnodes.iterator.each(function (node) {\n console.log(node.data);\n});\n",[26,2536,2537,2548,2553,2558,2563,2568,2573,2578,2583,2588,2593,2605,2617,2622,2627,2632,2637,2642,2659,2677,2688],{"__ignoreMap":24},[29,2538,2539,2542,2545],{"class":31,"line":32},[29,2540,2541],{"class":35},"myDiagram.",[29,2543,2544],{"class":43},"findNodesByExample",[29,2546,2547],{"class":35},"(data)\n",[29,2549,2550],{"class":31,"line":128},[29,2551,2552],{"class":124},"\u002F* \n",[29,2554,2555],{"class":31,"line":143},[29,2556,2557],{"class":124},"匹配方式默认为===运算符进行比较。\n",[29,2559,2560],{"class":31,"line":164},[29,2561,2562],{"class":124},"\u002Fabc\u002F 匹配包含“abc”的任何字符串\n",[29,2564,2565],{"class":31,"line":170},[29,2566,2567],{"class":124},"\u002Fabc\u002Fi 匹配包含“abc”的任何字符串，忽略大小写\n",[29,2569,2570],{"class":31,"line":176},[29,2571,2572],{"class":124},"\u002F^no\u002Fi 匹配任何以“no”开头的字符串，忽略大小写\n",[29,2574,2575],{"class":31,"line":183},[29,2576,2577],{"class":124},"\u002Fism$\u002F匹配任何以“ism”结尾的字符串\n",[29,2579,2580],{"class":31,"line":189},[29,2581,2582],{"class":124},"\u002F(green|red) apple\u002F 匹配包含“green apple”或“red apple”的字符串\n",[29,2584,2585],{"class":31,"line":205},[29,2586,2587],{"class":124},"要查询的值类型区分数字和字符串：比如json中是`90`,写成 90 会查询\n",[29,2589,2590],{"class":31,"line":210},[29,2591,2592],{"class":124},"*\u002F\n",[29,2594,2595,2597,2600,2602],{"class":31,"line":216},[29,2596,2449],{"class":131},[29,2598,2599],{"class":35}," data ",[29,2601,47],{"class":131},[29,2603,2604],{"class":35}," {};\n",[29,2606,2607,2610,2612,2615],{"class":31,"line":227},[29,2608,2609],{"class":35}," data.text",[29,2611,47],{"class":131},[29,2613,2614],{"class":50},"\"设计\"",[29,2616,1585],{"class":35},[29,2618,2619],{"class":31,"line":232},[29,2620,2621],{"class":124},"\u002F\u002F data.text=\u002F设计\u002F;\n",[29,2623,2624],{"class":31,"line":238},[29,2625,2626],{"class":124},"\u002F\u002F data.text=\u002F设计\u002Fi;\n",[29,2628,2629],{"class":31,"line":250},[29,2630,2631],{"class":124},"\u002F\u002F data.text=\u002F^设计\u002F;\n",[29,2633,2634],{"class":31,"line":255},[29,2635,2636],{"class":124},"\u002F\u002F data.text=\u002F设计$\u002F;\n",[29,2638,2639],{"class":31,"line":261},[29,2640,2641],{"class":124},"\u002F\u002F data.text=\u002F(勘|察)设计\u002F;\n",[29,2643,2644,2646,2649,2651,2654,2656],{"class":31,"line":276},[29,2645,2449],{"class":131},[29,2647,2648],{"class":35}," nodes ",[29,2650,47],{"class":131},[29,2652,2653],{"class":35}," myDiagram.",[29,2655,2544],{"class":43},[29,2657,2658],{"class":35},"(data);\n",[29,2660,2661,2664,2666,2668,2670,2672,2675],{"class":31,"line":281},[29,2662,2663],{"class":35},"nodes.iterator.",[29,2665,2194],{"class":43},[29,2667,1009],{"class":35},[29,2669,1543],{"class":131},[29,2671,1517],{"class":35},[29,2673,2674],{"class":1520},"node",[29,2676,1524],{"class":35},[29,2678,2679,2682,2685],{"class":31,"line":287},[29,2680,2681],{"class":35}," console.",[29,2683,2684],{"class":43},"log",[29,2686,2687],{"class":35},"(node.data);\n",[29,2689,2690],{"class":31,"line":299},[29,2691,348],{"class":35},[15,2693,2694],{"id":2694},"线",[1199,2696,2697,2703,2709,2841,2930,2936,3030,3119,3208],{},[1202,2698,2699,2700],{},"添加线：",[26,2701,2702],{},"myDiagram.model.addLinkData(linkData)",[1202,2704,2705,2706],{},"删除线：",[26,2707,2708],{},"myDiagram.model.removeLinkData(linkData)",[1202,2710,2711,2712],{},"批量删除线：",[19,2713,2715],{"className":847,"code":2714,"language":849,"meta":24,"style":24},"｛ Array | iterator } removeLinks\nremoveLinkDataCollection(removeLinks)\n\u002F * 实现 *\u002F\nlet removeLinks = []\n\u002F\u002F 拿到节点对象\nlet node = myDiagram.findNodeForKey(\"key\")\n\u002F\u002F 获取节点所有线\nnode.findLinksConnected().each((link) => {\n removeLinks.push(link.data)\n})\nmyDiagram.model.removeLinkDataCollection(removeLinks)\n",[26,2716,2717,2728,2736,2751,2762,2767,2788,2793,2818,2828,2833],{"__ignoreMap":24},[29,2718,2719,2722,2725],{"class":31,"line":32},[29,2720,2721],{"class":35},"｛ Array ",[29,2723,2724],{"class":131},"|",[29,2726,2727],{"class":35}," iterator } removeLinks\n",[29,2729,2730,2733],{"class":31,"line":128},[29,2731,2732],{"class":43},"removeLinkDataCollection",[29,2734,2735],{"class":35},"(removeLinks)\n",[29,2737,2738,2740,2743,2746,2748],{"class":31,"line":143},[29,2739,1605],{"class":50},[29,2741,2742],{"class":131}," *",[29,2744,2745],{"class":1614}," 实现 ",[29,2747,1721],{"class":131},[29,2749,2750],{"class":50},"\u002F\n",[29,2752,2753,2755,2758,2760],{"class":31,"line":164},[29,2754,2449],{"class":131},[29,2756,2757],{"class":35}," removeLinks ",[29,2759,47],{"class":131},[29,2761,2457],{"class":35},[29,2763,2764],{"class":31,"line":170},[29,2765,2766],{"class":124},"\u002F\u002F 拿到节点对象\n",[29,2768,2769,2771,2774,2776,2778,2781,2783,2786],{"class":31,"line":176},[29,2770,2449],{"class":131},[29,2772,2773],{"class":35}," node ",[29,2775,47],{"class":131},[29,2777,2653],{"class":35},[29,2779,2780],{"class":43},"findNodeForKey",[29,2782,1009],{"class":35},[29,2784,2785],{"class":50},"\"key\"",[29,2787,2480],{"class":35},[29,2789,2790],{"class":31,"line":183},[29,2791,2792],{"class":124},"\u002F\u002F 获取节点所有线\n",[29,2794,2795,2798,2801,2804,2806,2809,2812,2814,2816],{"class":31,"line":189},[29,2796,2797],{"class":35},"node.",[29,2799,2800],{"class":43},"findLinksConnected",[29,2802,2803],{"class":35},"().",[29,2805,2194],{"class":43},[29,2807,2808],{"class":35},"((",[29,2810,2811],{"class":1520},"link",[29,2813,1873],{"class":35},[29,2815,1876],{"class":131},[29,2817,1879],{"class":35},[29,2819,2820,2823,2825],{"class":31,"line":205},[29,2821,2822],{"class":35}," removeLinks.",[29,2824,2240],{"class":43},[29,2826,2827],{"class":35},"(link.data)\n",[29,2829,2830],{"class":31,"line":210},[29,2831,2832],{"class":35},"})\n",[29,2834,2835,2837,2839],{"class":31,"line":216},[29,2836,2357],{"class":35},[29,2838,2732],{"class":43},[29,2840,2735],{"class":35},[1202,2842,2843,2844],{},"模糊获取线 (1.68版本以上)：",[19,2845,2847],{"className":847,"code":2846,"language":849,"meta":24,"style":24},"myDiagram.findLinksByExample(data)\n\u002F\u002F 匹配方式和模糊获取节点的规则一致\n\u002F* 实现 *\u002F\n\u002F\u002F 值区分数值和字符串，‘2.18’ 和 2.18 不同\nlet links = myDiagram.findLinksByExample({from:'1',to:'2'})\nlinks.iterator.each((link) => {\n console.info(link.data)\n})\n",[26,2848,2849,2858,2863,2868,2873,2900,2917,2926],{"__ignoreMap":24},[29,2850,2851,2853,2856],{"class":31,"line":32},[29,2852,2541],{"class":35},[29,2854,2855],{"class":43},"findLinksByExample",[29,2857,2547],{"class":35},[29,2859,2860],{"class":31,"line":128},[29,2861,2862],{"class":124},"\u002F\u002F 匹配方式和模糊获取节点的规则一致\n",[29,2864,2865],{"class":31,"line":143},[29,2866,2867],{"class":124},"\u002F* 实现 *\u002F\n",[29,2869,2870],{"class":31,"line":164},[29,2871,2872],{"class":124},"\u002F\u002F 值区分数值和字符串，‘2.18’ 和 2.18 不同\n",[29,2874,2875,2877,2880,2882,2884,2886,2889,2892,2895,2898],{"class":31,"line":170},[29,2876,2449],{"class":131},[29,2878,2879],{"class":35}," links ",[29,2881,47],{"class":131},[29,2883,2653],{"class":35},[29,2885,2855],{"class":43},[29,2887,2888],{"class":35},"({from:",[29,2890,2891],{"class":50},"'1'",[29,2893,2894],{"class":35},",to:",[29,2896,2897],{"class":50},"'2'",[29,2899,2832],{"class":35},[29,2901,2902,2905,2907,2909,2911,2913,2915],{"class":31,"line":176},[29,2903,2904],{"class":35},"links.iterator.",[29,2906,2194],{"class":43},[29,2908,2808],{"class":35},[29,2910,2811],{"class":1520},[29,2912,1873],{"class":35},[29,2914,1876],{"class":131},[29,2916,1879],{"class":35},[29,2918,2919,2921,2924],{"class":31,"line":183},[29,2920,2681],{"class":35},[29,2922,2923],{"class":43},"info",[29,2925,2827],{"class":35},[29,2927,2928],{"class":31,"line":189},[29,2929,2832],{"class":35},[1202,2931,2932,2933],{},"更改属性值：",[26,2934,2935],{},"myDiagram.model.setDataProperty(linkData, 'color', 'green')",[1202,2937,2938,2939],{},"获取节点的线：",[19,2940,2942],{"className":847,"code":2941,"language":849,"meta":24,"style":24},"{string | null =} PID 端口ID\nfindLinksConnected(PID)\n\u002F* 实现 *\u002F\nlet node = myDiagram.findNodeForKey('key')\nnode.findLinksConnected().each((link) => {\n console.info(link.data)\n})\n",[26,2943,2944,2965,2975,2979,2998,3018,3026],{"__ignoreMap":24},[29,2945,2946,2949,2951,2954,2956,2959,2962],{"class":31,"line":32},[29,2947,2948],{"class":35},"{string ",[29,2950,2724],{"class":131},[29,2952,2953],{"class":198}," null",[29,2955,1421],{"class":131},[29,2957,2958],{"class":35},"} ",[29,2960,2961],{"class":198},"PID",[29,2963,2964],{"class":35}," 端口ID\n",[29,2966,2967,2969,2971,2973],{"class":31,"line":128},[29,2968,2800],{"class":43},[29,2970,1009],{"class":35},[29,2972,2961],{"class":198},[29,2974,2480],{"class":35},[29,2976,2977],{"class":31,"line":143},[29,2978,2867],{"class":124},[29,2980,2981,2983,2985,2987,2989,2991,2993,2996],{"class":31,"line":164},[29,2982,2449],{"class":131},[29,2984,2773],{"class":35},[29,2986,47],{"class":131},[29,2988,2653],{"class":35},[29,2990,2780],{"class":43},[29,2992,1009],{"class":35},[29,2994,2995],{"class":50},"'key'",[29,2997,2480],{"class":35},[29,2999,3000,3002,3004,3006,3008,3010,3012,3014,3016],{"class":31,"line":170},[29,3001,2797],{"class":35},[29,3003,2800],{"class":43},[29,3005,2803],{"class":35},[29,3007,2194],{"class":43},[29,3009,2808],{"class":35},[29,3011,2811],{"class":1520},[29,3013,1873],{"class":35},[29,3015,1876],{"class":131},[29,3017,1879],{"class":35},[29,3019,3020,3022,3024],{"class":31,"line":176},[29,3021,2681],{"class":35},[29,3023,2923],{"class":43},[29,3025,2827],{"class":35},[29,3027,3028],{"class":31,"line":183},[29,3029,2832],{"class":35},[1202,3031,3032,3033],{},"获取进入节点的线：",[19,3034,3036],{"className":847,"code":3035,"language":849,"meta":24,"style":24},"{string | null =} PID 端口ID\nfindLinksInto(PID)\n\u002F* 实现 *\u002F\nlet node = myDiagram.findNodeForKey('key')\nnode.findLinksInto().each((link) => {\n console.info(link.data)\n})\n",[26,3037,3038,3054,3065,3069,3087,3107,3115],{"__ignoreMap":24},[29,3039,3040,3042,3044,3046,3048,3050,3052],{"class":31,"line":32},[29,3041,2948],{"class":35},[29,3043,2724],{"class":131},[29,3045,2953],{"class":198},[29,3047,1421],{"class":131},[29,3049,2958],{"class":35},[29,3051,2961],{"class":198},[29,3053,2964],{"class":35},[29,3055,3056,3059,3061,3063],{"class":31,"line":128},[29,3057,3058],{"class":43},"findLinksInto",[29,3060,1009],{"class":35},[29,3062,2961],{"class":198},[29,3064,2480],{"class":35},[29,3066,3067],{"class":31,"line":143},[29,3068,2867],{"class":124},[29,3070,3071,3073,3075,3077,3079,3081,3083,3085],{"class":31,"line":164},[29,3072,2449],{"class":131},[29,3074,2773],{"class":35},[29,3076,47],{"class":131},[29,3078,2653],{"class":35},[29,3080,2780],{"class":43},[29,3082,1009],{"class":35},[29,3084,2995],{"class":50},[29,3086,2480],{"class":35},[29,3088,3089,3091,3093,3095,3097,3099,3101,3103,3105],{"class":31,"line":170},[29,3090,2797],{"class":35},[29,3092,3058],{"class":43},[29,3094,2803],{"class":35},[29,3096,2194],{"class":43},[29,3098,2808],{"class":35},[29,3100,2811],{"class":1520},[29,3102,1873],{"class":35},[29,3104,1876],{"class":131},[29,3106,1879],{"class":35},[29,3108,3109,3111,3113],{"class":31,"line":176},[29,3110,2681],{"class":35},[29,3112,2923],{"class":43},[29,3114,2827],{"class":35},[29,3116,3117],{"class":31,"line":183},[29,3118,2832],{"class":35},[1202,3120,3121,3122],{},"获取从节点出来的线：",[19,3123,3125],{"className":847,"code":3124,"language":849,"meta":24,"style":24},"{string | null =} PID 端口ID\nfindLinksOutOf(PID)\n\u002F* 实现 *\u002F\nlet node = myDiagram.findNodeForKey('key')\nnode.findLinksOutOf().each((link) => {\n console.info(link.data)\n})\n",[26,3126,3127,3143,3154,3158,3176,3196,3204],{"__ignoreMap":24},[29,3128,3129,3131,3133,3135,3137,3139,3141],{"class":31,"line":32},[29,3130,2948],{"class":35},[29,3132,2724],{"class":131},[29,3134,2953],{"class":198},[29,3136,1421],{"class":131},[29,3138,2958],{"class":35},[29,3140,2961],{"class":198},[29,3142,2964],{"class":35},[29,3144,3145,3148,3150,3152],{"class":31,"line":128},[29,3146,3147],{"class":43},"findLinksOutOf",[29,3149,1009],{"class":35},[29,3151,2961],{"class":198},[29,3153,2480],{"class":35},[29,3155,3156],{"class":31,"line":143},[29,3157,2867],{"class":124},[29,3159,3160,3162,3164,3166,3168,3170,3172,3174],{"class":31,"line":164},[29,3161,2449],{"class":131},[29,3163,2773],{"class":35},[29,3165,47],{"class":131},[29,3167,2653],{"class":35},[29,3169,2780],{"class":43},[29,3171,1009],{"class":35},[29,3173,2995],{"class":50},[29,3175,2480],{"class":35},[29,3177,3178,3180,3182,3184,3186,3188,3190,3192,3194],{"class":31,"line":170},[29,3179,2797],{"class":35},[29,3181,3147],{"class":43},[29,3183,2803],{"class":35},[29,3185,2194],{"class":43},[29,3187,2808],{"class":35},[29,3189,2811],{"class":1520},[29,3191,1873],{"class":35},[29,3193,1876],{"class":131},[29,3195,1879],{"class":35},[29,3197,3198,3200,3202],{"class":31,"line":176},[29,3199,2681],{"class":35},[29,3201,2923],{"class":43},[29,3203,2827],{"class":35},[29,3205,3206],{"class":31,"line":183},[29,3207,2832],{"class":35},[1202,3209,3210,3211],{},"获取两个节点之间的线",[19,3212,3214],{"className":847,"code":3213,"language":849,"meta":24,"style":24},"{node } othernode B节点对象\n{string | null =} PID 端口ID\n{string | null =} otherPID B节点端口ID\nfindLinksTo(othernode, PID, otherPID)\n\u002F* 实现 *\u002F\nlet node0 = myDiagram.findNodeForKey('key0')\nlet node1 = myDiagram.findNodeForKey('key1')\nnode0.findLinksTo(nodeB).each((link) => {\n console.info(link.data)\n})\n",[26,3215,3216,3221,3237,3250,3263,3267,3286,3305,3327,3335],{"__ignoreMap":24},[29,3217,3218],{"class":31,"line":32},[29,3219,3220],{"class":35},"{node } othernode B节点对象\n",[29,3222,3223,3225,3227,3229,3231,3233,3235],{"class":31,"line":128},[29,3224,2948],{"class":35},[29,3226,2724],{"class":131},[29,3228,2953],{"class":198},[29,3230,1421],{"class":131},[29,3232,2958],{"class":35},[29,3234,2961],{"class":198},[29,3236,2964],{"class":35},[29,3238,3239,3241,3243,3245,3247],{"class":31,"line":143},[29,3240,2948],{"class":35},[29,3242,2724],{"class":131},[29,3244,2953],{"class":198},[29,3246,1421],{"class":131},[29,3248,3249],{"class":35},"} otherPID B节点端口ID\n",[29,3251,3252,3255,3258,3260],{"class":31,"line":164},[29,3253,3254],{"class":43},"findLinksTo",[29,3256,3257],{"class":35},"(othernode, ",[29,3259,2961],{"class":198},[29,3261,3262],{"class":35},", otherPID)\n",[29,3264,3265],{"class":31,"line":170},[29,3266,2867],{"class":124},[29,3268,3269,3271,3274,3276,3278,3280,3282,3284],{"class":31,"line":176},[29,3270,2449],{"class":131},[29,3272,3273],{"class":35}," node0 ",[29,3275,47],{"class":131},[29,3277,2653],{"class":35},[29,3279,2780],{"class":43},[29,3281,1009],{"class":35},[29,3283,2477],{"class":50},[29,3285,2480],{"class":35},[29,3287,3288,3290,3293,3295,3297,3299,3301,3303],{"class":31,"line":183},[29,3289,2449],{"class":131},[29,3291,3292],{"class":35}," node1 ",[29,3294,47],{"class":131},[29,3296,2653],{"class":35},[29,3298,2780],{"class":43},[29,3300,1009],{"class":35},[29,3302,2498],{"class":50},[29,3304,2480],{"class":35},[29,3306,3307,3310,3312,3315,3317,3319,3321,3323,3325],{"class":31,"line":189},[29,3308,3309],{"class":35},"node0.",[29,3311,3254],{"class":43},[29,3313,3314],{"class":35},"(nodeB).",[29,3316,2194],{"class":43},[29,3318,2808],{"class":35},[29,3320,2811],{"class":1520},[29,3322,1873],{"class":35},[29,3324,1876],{"class":131},[29,3326,1879],{"class":35},[29,3328,3329,3331,3333],{"class":31,"line":205},[29,3330,2681],{"class":35},[29,3332,2923],{"class":43},[29,3334,2827],{"class":35},[29,3336,3337],{"class":31,"line":210},[29,3338,2832],{"class":35},[15,3340,3341],{"id":3341},"树节点",[1199,3343,3344,3400,3455,3492],{},[1202,3345,3346,3347],{},"找节点的所有父祖节点，包括该节点",[19,3348,3350],{"className":847,"code":3349,"language":849,"meta":24,"style":24},"node.findTreeParentChain()\n\u002F* 实现 *\u002F\nnode.findTreeParentChain().each((pNode) => {\n console.info(pNode.data)\n})\n",[26,3351,3352,3362,3366,3387,3396],{"__ignoreMap":24},[29,3353,3354,3356,3359],{"class":31,"line":32},[29,3355,2797],{"class":35},[29,3357,3358],{"class":43},"findTreeParentChain",[29,3360,3361],{"class":35},"()\n",[29,3363,3364],{"class":31,"line":128},[29,3365,2867],{"class":124},[29,3367,3368,3370,3372,3374,3376,3378,3381,3383,3385],{"class":31,"line":143},[29,3369,2797],{"class":35},[29,3371,3358],{"class":43},[29,3373,2803],{"class":35},[29,3375,2194],{"class":43},[29,3377,2808],{"class":35},[29,3379,3380],{"class":1520},"pNode",[29,3382,1873],{"class":35},[29,3384,1876],{"class":131},[29,3386,1879],{"class":35},[29,3388,3389,3391,3393],{"class":31,"line":164},[29,3390,2681],{"class":35},[29,3392,2923],{"class":43},[29,3394,3395],{"class":35},"(pNode.data)\n",[29,3397,3398],{"class":31,"line":170},[29,3399,2832],{"class":35},[1202,3401,3402,3403],{},"找节点的所有子孙节点，包括该节点",[19,3404,3406],{"className":847,"code":3405,"language":849,"meta":24,"style":24},"node.findTreeParts()\n\u002F* 实现 *\u002F\nnode.findTreeParts().each((sNode) => {\n console.info(sNode.data)\n})\n",[26,3407,3408,3417,3421,3442,3451],{"__ignoreMap":24},[29,3409,3410,3412,3415],{"class":31,"line":32},[29,3411,2797],{"class":35},[29,3413,3414],{"class":43},"findTreeParts",[29,3416,3361],{"class":35},[29,3418,3419],{"class":31,"line":128},[29,3420,2867],{"class":124},[29,3422,3423,3425,3427,3429,3431,3433,3436,3438,3440],{"class":31,"line":143},[29,3424,2797],{"class":35},[29,3426,3414],{"class":43},[29,3428,2803],{"class":35},[29,3430,2194],{"class":43},[29,3432,2808],{"class":35},[29,3434,3435],{"class":1520},"sNode",[29,3437,1873],{"class":35},[29,3439,1876],{"class":131},[29,3441,1879],{"class":35},[29,3443,3444,3446,3448],{"class":31,"line":164},[29,3445,2681],{"class":35},[29,3447,2923],{"class":43},[29,3449,3450],{"class":35},"(sNode.data)\n",[29,3452,3453],{"class":31,"line":170},[29,3454,2832],{"class":35},[1202,3456,3457,3458],{},"找节点的父",[19,3459,3461],{"className":847,"code":3460,"language":849,"meta":24,"style":24},"node.findTreeParentNode()\n\u002F* 实现 *\u002F\nlet parentNode = node.findTreeParentNode()\n",[26,3462,3463,3472,3476],{"__ignoreMap":24},[29,3464,3465,3467,3470],{"class":31,"line":32},[29,3466,2797],{"class":35},[29,3468,3469],{"class":43},"findTreeParentNode",[29,3471,3361],{"class":35},[29,3473,3474],{"class":31,"line":128},[29,3475,2867],{"class":124},[29,3477,3478,3480,3483,3485,3488,3490],{"class":31,"line":143},[29,3479,2449],{"class":131},[29,3481,3482],{"class":35}," parentNode ",[29,3484,47],{"class":131},[29,3486,3487],{"class":35}," node.",[29,3489,3469],{"class":43},[29,3491,3361],{"class":35},[1202,3493,3494,3495],{},"找节点的子",[19,3496,3498],{"className":847,"code":3497,"language":849,"meta":24,"style":24},"node.findTreeChildrenNodes()\n\u002F* 实现 *\u002F\nnode.findTreeChildrenNodes().each((childNode) => {\n console.info(childNode.data)\n})\n",[26,3499,3500,3509,3513,3534,3543],{"__ignoreMap":24},[29,3501,3502,3504,3507],{"class":31,"line":32},[29,3503,2797],{"class":35},[29,3505,3506],{"class":43},"findTreeChildrenNodes",[29,3508,3361],{"class":35},[29,3510,3511],{"class":31,"line":128},[29,3512,2867],{"class":124},[29,3514,3515,3517,3519,3521,3523,3525,3528,3530,3532],{"class":31,"line":143},[29,3516,2797],{"class":35},[29,3518,3506],{"class":43},[29,3520,2803],{"class":35},[29,3522,2194],{"class":43},[29,3524,2808],{"class":35},[29,3526,3527],{"class":1520},"childNode",[29,3529,1873],{"class":35},[29,3531,1876],{"class":131},[29,3533,1879],{"class":35},[29,3535,3536,3538,3540],{"class":31,"line":164},[29,3537,2681],{"class":35},[29,3539,2923],{"class":43},[29,3541,3542],{"class":35},"(childNode.data)\n",[29,3544,3545],{"class":31,"line":170},[29,3546,2832],{"class":35},[10,3548,3550],{"id":3549},"画布常用增删改查api","画布常用增删改查API",[1199,3552,3553,3835,4170,4265],{},[1202,3554,3555,3559],{},[3556,3557,3558],"strong",{},"添加画布元素",[19,3560,3562],{"className":115,"code":3561,"language":117,"meta":24,"style":24},"\u002F\u002F 添加节点\naddNodeData(NodeData)\n\u002F\u002F 添加连线\naddLinkData(LinkData)\n\n\u002F* 实现 *\u002F\n\n \u002F\u002F 添加节点\n let node = {\n key: id,\n id: id, \n color: \"#fff\",\n name: name,\n color2: \"#000\",\n text: type,\n loc:location,\n \u002F* bold、italic、fontsize、fontFamily、font 是我设置的存储字体属性 *\u002F\n bold: \"normal\",\n italic: \"normal\",\n fontsize: 12,\n fontFamily: \"Segoe UI,sans-serif\",\n font: {\n bold: \"normal\",\n italic: \"normal\",\n fontSize: 12,\n fontFamily: \"Segoe UI,sans-serif\",\n },\n };\nthis.diagram.model.addNodeData(node);\n\n \u002F\u002F 添加连线\n let link = {\n from: from,\n to: to,\n text: \"text\",\n id:id,\n key:key\n };\n this.diagram.model.addLinkData(link);\n",[26,3563,3564,3569,3577,3582,3590,3594,3598,3602,3607,3618,3623,3628,3638,3643,3653,3658,3663,3668,3678,3687,3696,3706,3711,3720,3729,3738,3747,3751,3756,3768,3772,3777,3789,3794,3799,3808,3813,3818,3823],{"__ignoreMap":24},[29,3565,3566],{"class":31,"line":32},[29,3567,3568],{"class":124},"\u002F\u002F 添加节点\n",[29,3570,3571,3574],{"class":31,"line":128},[29,3572,3573],{"class":43},"addNodeData",[29,3575,3576],{"class":35},"(NodeData)\n",[29,3578,3579],{"class":31,"line":143},[29,3580,3581],{"class":124},"\u002F\u002F 添加连线\n",[29,3583,3584,3587],{"class":31,"line":164},[29,3585,3586],{"class":43},"addLinkData",[29,3588,3589],{"class":35},"(LinkData)\n",[29,3591,3592],{"class":31,"line":170},[29,3593,180],{"emptyLinePlaceholder":179},[29,3595,3596],{"class":31,"line":176},[29,3597,2867],{"class":124},[29,3599,3600],{"class":31,"line":183},[29,3601,180],{"emptyLinePlaceholder":179},[29,3603,3604],{"class":31,"line":189},[29,3605,3606],{"class":124}," \u002F\u002F 添加节点\n",[29,3608,3609,3612,3614,3616],{"class":31,"line":205},[29,3610,3611],{"class":131}," let",[29,3613,2773],{"class":35},[29,3615,47],{"class":131},[29,3617,1879],{"class":35},[29,3619,3620],{"class":31,"line":210},[29,3621,3622],{"class":35}," key: id,\n",[29,3624,3625],{"class":31,"line":216},[29,3626,3627],{"class":35}," id: id, \n",[29,3629,3630,3633,3636],{"class":31,"line":227},[29,3631,3632],{"class":35}," color: ",[29,3634,3635],{"class":50},"\"#fff\"",[29,3637,202],{"class":35},[29,3639,3640],{"class":31,"line":232},[29,3641,3642],{"class":35}," name: name,\n",[29,3644,3645,3648,3651],{"class":31,"line":238},[29,3646,3647],{"class":35}," color2: ",[29,3649,3650],{"class":50},"\"#000\"",[29,3652,202],{"class":35},[29,3654,3655],{"class":31,"line":250},[29,3656,3657],{"class":35}," text: type,\n",[29,3659,3660],{"class":31,"line":255},[29,3661,3662],{"class":35}," loc:location,\n",[29,3664,3665],{"class":31,"line":261},[29,3666,3667],{"class":124}," \u002F* bold、italic、fontsize、fontFamily、font 是我设置的存储字体属性 *\u002F\n",[29,3669,3670,3673,3676],{"class":31,"line":276},[29,3671,3672],{"class":35}," bold: ",[29,3674,3675],{"class":50},"\"normal\"",[29,3677,202],{"class":35},[29,3679,3680,3683,3685],{"class":31,"line":281},[29,3681,3682],{"class":35}," italic: ",[29,3684,3675],{"class":50},[29,3686,202],{"class":35},[29,3688,3689,3692,3694],{"class":31,"line":287},[29,3690,3691],{"class":35}," fontsize: ",[29,3693,1045],{"class":198},[29,3695,202],{"class":35},[29,3697,3698,3701,3704],{"class":31,"line":299},[29,3699,3700],{"class":35}," fontFamily: ",[29,3702,3703],{"class":50},"\"Segoe UI,sans-serif\"",[29,3705,202],{"class":35},[29,3707,3708],{"class":31,"line":304},[29,3709,3710],{"class":35}," font: {\n",[29,3712,3713,3716,3718],{"class":31,"line":310},[29,3714,3715],{"class":35}," bold: ",[29,3717,3675],{"class":50},[29,3719,202],{"class":35},[29,3721,3722,3725,3727],{"class":31,"line":322},[29,3723,3724],{"class":35}," italic: ",[29,3726,3675],{"class":50},[29,3728,202],{"class":35},[29,3730,3731,3734,3736],{"class":31,"line":327},[29,3732,3733],{"class":35}," fontSize: ",[29,3735,1045],{"class":198},[29,3737,202],{"class":35},[29,3739,3740,3743,3745],{"class":31,"line":333},[29,3741,3742],{"class":35}," fontFamily: ",[29,3744,3703],{"class":50},[29,3746,202],{"class":35},[29,3748,3749],{"class":31,"line":345},[29,3750,1990],{"class":35},[29,3752,3753],{"class":31,"line":351},[29,3754,3755],{"class":35}," };\n",[29,3757,3758,3760,3763,3765],{"class":31,"line":372},[29,3759,354],{"class":198},[29,3761,3762],{"class":35},".diagram.model.",[29,3764,3573],{"class":43},[29,3766,3767],{"class":35},"(node);\n",[29,3769,3770],{"class":31,"line":378},[29,3771,180],{"emptyLinePlaceholder":179},[29,3773,3774],{"class":31,"line":384},[29,3775,3776],{"class":124}," \u002F\u002F 添加连线\n",[29,3778,3779,3782,3785,3787],{"class":31,"line":393},[29,3780,3781],{"class":131}," let",[29,3783,3784],{"class":35}," link ",[29,3786,47],{"class":131},[29,3788,1879],{"class":35},[29,3790,3791],{"class":31,"line":409},[29,3792,3793],{"class":35}," from: from,\n",[29,3795,3796],{"class":31,"line":415},[29,3797,3798],{"class":35}," to: to,\n",[29,3800,3801,3804,3806],{"class":31,"line":421},[29,3802,3803],{"class":35}," text: ",[29,3805,1077],{"class":50},[29,3807,202],{"class":35},[29,3809,3810],{"class":31,"line":430},[29,3811,3812],{"class":35}," id:id,\n",[29,3814,3815],{"class":31,"line":439},[29,3816,3817],{"class":35}," key:key\n",[29,3819,3820],{"class":31,"line":448},[29,3821,3822],{"class":35}," };\n",[29,3824,3825,3828,3830,3832],{"class":31,"line":454},[29,3826,3827],{"class":198}," this",[29,3829,3762],{"class":35},[29,3831,3586],{"class":43},[29,3833,3834],{"class":35},"(link);\n",[1202,3836,3837,3840],{},[3556,3838,3839],{},"删除画布元素",[19,3841,3843],{"className":847,"code":3842,"language":849,"meta":24,"style":24}," \u002F\u002F 删除节点\nremoveNodeData(nodeData)\n \u002F\u002F 删除连线\nremoveLinkData(linkData)\n \u002F* 实现 *\u002F\n \u002F\u002F 通过节点的 key 拿到节点对象并删除\n let node = this.diagram.model.findNodeDataForKey(this.nodeFrom.key);\n this.diagram.model.removeNodeData(node);\n\n \u002F\u002F 通过事件获取到要删除的连线 id，查找并删除\n this.association.forEach((item) => { \u002F* this.association 是我当前画布的所有连线对象 *\u002F\n if (item.id === this.checkId) { \u002F* 查找要删除的连线 *\u002F\n this.diagram.model.removeLinkData(item);\n }\n });\n\n \u002F\u002F 也可以通过获取画布选中对象进行删除, 初始化 GoJS的时候绑定选中项监听\n \u002F\u002F 监听选中项\n let that = this\n this.diagram.addDiagramListener(\"ChangedSelection\", function (e, i) {\n console.log(\"重新选择了\", e);\n that.selectNode = [];\n that.selectLink = [];\n that.diagram.selection.each(function (part) {\n if (part instanceof go.Node) {\n that.selectNode.push(part.data); \u002F* 获取当前选中节点 *\u002F\n } else if (part instanceof go.Link) {\n that.selectLink.push(part.data); \u002F* 获取当前选中连线 *\u002F\n }\n });\n })\n \u002F\u002F 然后可以对选中执行要执行的操作\n",[26,3844,3845,3850,3858,3863,3871,3876,3881,3903,3913,3917,3922,3947,3966,3978,3983,3988,3992,3997,4002,4014,4041,4056,4065,4074,4091,4107,4120,4140,4152,4156,4160,4165],{"__ignoreMap":24},[29,3846,3847],{"class":31,"line":32},[29,3848,3849],{"class":124}," \u002F\u002F 删除节点\n",[29,3851,3852,3855],{"class":31,"line":128},[29,3853,3854],{"class":43},"removeNodeData",[29,3856,3857],{"class":35},"(nodeData)\n",[29,3859,3860],{"class":31,"line":143},[29,3861,3862],{"class":124}," \u002F\u002F 删除连线\n",[29,3864,3865,3868],{"class":31,"line":164},[29,3866,3867],{"class":43},"removeLinkData",[29,3869,3870],{"class":35},"(linkData)\n",[29,3872,3873],{"class":31,"line":170},[29,3874,3875],{"class":124}," \u002F* 实现 *\u002F\n",[29,3877,3878],{"class":31,"line":176},[29,3879,3880],{"class":124}," \u002F\u002F 通过节点的 key 拿到节点对象并删除\n",[29,3882,3883,3885,3887,3889,3892,3894,3896,3898,3900],{"class":31,"line":183},[29,3884,3781],{"class":131},[29,3886,2773],{"class":35},[29,3888,47],{"class":131},[29,3890,3891],{"class":198}," this",[29,3893,3762],{"class":35},[29,3895,2472],{"class":43},[29,3897,1009],{"class":35},[29,3899,354],{"class":198},[29,3901,3902],{"class":35},".nodeFrom.key);\n",[29,3904,3905,3907,3909,3911],{"class":31,"line":189},[29,3906,3827],{"class":198},[29,3908,3762],{"class":35},[29,3910,3854],{"class":43},[29,3912,3767],{"class":35},[29,3914,3915],{"class":31,"line":205},[29,3916,180],{"emptyLinePlaceholder":179},[29,3918,3919],{"class":31,"line":210},[29,3920,3921],{"class":124}," \u002F\u002F 通过事件获取到要删除的连线 id，查找并删除\n",[29,3923,3924,3926,3929,3932,3934,3937,3939,3941,3944],{"class":31,"line":216},[29,3925,3827],{"class":198},[29,3927,3928],{"class":35},".association.",[29,3930,3931],{"class":43},"forEach",[29,3933,2808],{"class":35},[29,3935,3936],{"class":1520},"item",[29,3938,1873],{"class":35},[29,3940,1876],{"class":131},[29,3942,3943],{"class":35}," { ",[29,3945,3946],{"class":124},"\u002F* this.association 是我当前画布的所有连线对象 *\u002F\n",[29,3948,3949,3952,3955,3958,3960,3963],{"class":31,"line":227},[29,3950,3951],{"class":131}," if",[29,3953,3954],{"class":35}," (item.id ",[29,3956,3957],{"class":131},"===",[29,3959,3891],{"class":198},[29,3961,3962],{"class":35},".checkId) { ",[29,3964,3965],{"class":124},"\u002F* 查找要删除的连线 *\u002F\n",[29,3967,3968,3971,3973,3975],{"class":31,"line":232},[29,3969,3970],{"class":198}," this",[29,3972,3762],{"class":35},[29,3974,3867],{"class":43},[29,3976,3977],{"class":35},"(item);\n",[29,3979,3980],{"class":31,"line":238},[29,3981,3982],{"class":35}," }\n",[29,3984,3985],{"class":31,"line":250},[29,3986,3987],{"class":35}," });\n",[29,3989,3990],{"class":31,"line":255},[29,3991,180],{"emptyLinePlaceholder":179},[29,3993,3994],{"class":31,"line":261},[29,3995,3996],{"class":124}," \u002F\u002F 也可以通过获取画布选中对象进行删除, 初始化 GoJS的时候绑定选中项监听\n",[29,3998,3999],{"class":31,"line":276},[29,4000,4001],{"class":124}," \u002F\u002F 监听选中项\n",[29,4003,4004,4006,4009,4011],{"class":31,"line":281},[29,4005,3781],{"class":131},[29,4007,4008],{"class":35}," that ",[29,4010,47],{"class":131},[29,4012,4013],{"class":198}," this\n",[29,4015,4016,4018,4021,4023,4025,4027,4029,4031,4033,4035,4037,4039],{"class":31,"line":287},[29,4017,3827],{"class":198},[29,4019,4020],{"class":35},".diagram.",[29,4022,2136],{"class":43},[29,4024,1009],{"class":35},[29,4026,2141],{"class":50},[29,4028,403],{"class":35},[29,4030,1543],{"class":131},[29,4032,1517],{"class":35},[29,4034,2150],{"class":1520},[29,4036,403],{"class":35},[29,4038,2155],{"class":1520},[29,4040,1524],{"class":35},[29,4042,4043,4046,4048,4050,4053],{"class":31,"line":299},[29,4044,4045],{"class":35}," console.",[29,4047,2684],{"class":43},[29,4049,1009],{"class":35},[29,4051,4052],{"class":50},"\"重新选择了\"",[29,4054,4055],{"class":35},", e);\n",[29,4057,4058,4061,4063],{"class":31,"line":304},[29,4059,4060],{"class":35}," that.selectNode ",[29,4062,47],{"class":131},[29,4064,2177],{"class":35},[29,4066,4067,4070,4072],{"class":31,"line":310},[29,4068,4069],{"class":35}," that.selectLink ",[29,4071,47],{"class":131},[29,4073,2177],{"class":35},[29,4075,4076,4079,4081,4083,4085,4087,4089],{"class":31,"line":322},[29,4077,4078],{"class":35}," that.diagram.selection.",[29,4080,2194],{"class":43},[29,4082,1009],{"class":35},[29,4084,1543],{"class":131},[29,4086,1517],{"class":35},[29,4088,2203],{"class":1520},[29,4090,1524],{"class":35},[29,4092,4093,4095,4097,4099,4101,4103,4105],{"class":31,"line":327},[29,4094,2210],{"class":131},[29,4096,2213],{"class":35},[29,4098,2216],{"class":131},[29,4100,2219],{"class":43},[29,4102,1791],{"class":35},[29,4104,2224],{"class":43},[29,4106,1524],{"class":35},[29,4108,4109,4112,4114,4117],{"class":31,"line":333},[29,4110,4111],{"class":35}," that.selectNode.",[29,4113,2240],{"class":43},[29,4115,4116],{"class":35},"(part.data); ",[29,4118,4119],{"class":124},"\u002F* 获取当前选中节点 *\u002F\n",[29,4121,4122,4124,4126,4128,4130,4132,4134,4136,4138],{"class":31,"line":345},[29,4123,2248],{"class":35},[29,4125,2251],{"class":131},[29,4127,2254],{"class":131},[29,4129,2213],{"class":35},[29,4131,2216],{"class":131},[29,4133,2219],{"class":43},[29,4135,1791],{"class":35},[29,4137,2265],{"class":43},[29,4139,1524],{"class":35},[29,4141,4142,4145,4147,4149],{"class":31,"line":351},[29,4143,4144],{"class":35}," that.selectLink.",[29,4146,2240],{"class":43},[29,4148,4116],{"class":35},[29,4150,4151],{"class":124},"\u002F* 获取当前选中连线 *\u002F\n",[29,4153,4154],{"class":31,"line":372},[29,4155,2286],{"class":35},[29,4157,4158],{"class":31,"line":378},[29,4159,2295],{"class":35},[29,4161,4162],{"class":31,"line":384},[29,4163,4164],{"class":35}," })\n",[29,4166,4167],{"class":31,"line":393},[29,4168,4169],{"class":124}," \u002F\u002F 然后可以对选中执行要执行的操作\n",[1202,4171,4172,4175],{},[3556,4173,4174],{},"更新画布元素",[19,4176,4178],{"className":847,"code":4177,"language":849,"meta":24,"style":24},"setDataProperty(data，propName，val)\n\u002F\u002F 参数: \n \u002F\u002F data：NodeData或LinkData对象\n \u002F\u002F propName：要更新的属性名\n \u002F\u002F val：要更新的属性值\n\n\u002F* 实现 *\u002F\n \u002F\u002F 拿到节点\nconst nodeData = myDiagram.model.findNodeDataForKey('key') \n\u002F\u002F 对元素对象的属性更改的时候，如果没有该属性则添加这个属性\nmyDiagram.model.setDataProperty(nodeData, 'text', '2333')\n",[26,4179,4180,4188,4193,4198,4203,4208,4212,4216,4221,4241,4246],{"__ignoreMap":24},[29,4181,4182,4185],{"class":31,"line":32},[29,4183,4184],{"class":43},"setDataProperty",[29,4186,4187],{"class":35},"(data，propName，val)\n",[29,4189,4190],{"class":31,"line":128},[29,4191,4192],{"class":124},"\u002F\u002F 参数: \n",[29,4194,4195],{"class":31,"line":143},[29,4196,4197],{"class":124}," \u002F\u002F data：NodeData或LinkData对象\n",[29,4199,4200],{"class":31,"line":164},[29,4201,4202],{"class":124}," \u002F\u002F propName：要更新的属性名\n",[29,4204,4205],{"class":31,"line":170},[29,4206,4207],{"class":124}," \u002F\u002F val：要更新的属性值\n",[29,4209,4210],{"class":31,"line":176},[29,4211,180],{"emptyLinePlaceholder":179},[29,4213,4214],{"class":31,"line":183},[29,4215,2867],{"class":124},[29,4217,4218],{"class":31,"line":189},[29,4219,4220],{"class":124}," \u002F\u002F 拿到节点\n",[29,4222,4223,4225,4228,4230,4232,4234,4236,4238],{"class":31,"line":205},[29,4224,1415],{"class":131},[29,4226,4227],{"class":198}," nodeData",[29,4229,1421],{"class":131},[29,4231,2469],{"class":35},[29,4233,2472],{"class":43},[29,4235,1009],{"class":35},[29,4237,2995],{"class":50},[29,4239,4240],{"class":35},") \n",[29,4242,4243],{"class":31,"line":210},[29,4244,4245],{"class":124},"\u002F\u002F 对元素对象的属性更改的时候，如果没有该属性则添加这个属性\n",[29,4247,4248,4250,4252,4255,4258,4260,4263],{"class":31,"line":216},[29,4249,2357],{"class":35},[29,4251,4184],{"class":43},[29,4253,4254],{"class":35},"(nodeData, ",[29,4256,4257],{"class":50},"'text'",[29,4259,403],{"class":35},[29,4261,4262],{"class":50},"'2333'",[29,4264,2480],{"class":35},[1202,4266,4267,4270,4415,4418,4420,4421,4468],{},[3556,4268,4269],{},"查询画布元素",[19,4271,4273],{"className":847,"code":4272,"language":849,"meta":24,"style":24},"\u002F\u002F 通过 key 获取节点\nfindNodeDataForKey('key')\n\u002F\u002F 通过 linkData 模糊查询匹配线集合\nfindLinksByExample(linkData)\n\n\u002F* 实现 *\u002F\nconst nodeData = myDiagram.model.findNodeDataForKey('key')\n\n\u002F\u002F 根据 linkData，模糊匹配线集合，linkData 可以为线的部分属性\nlet linkData = {\n from:'1',\n to:2\n}\nconst links = myDiagram.model.findLinksByExample(linkData)\n\u002F\u002F 遍历输出所有线的数据对象\nwhile(links.next()){\n console.info(links.value.data)\n}\n",[26,4274,4275,4280,4290,4295,4301,4305,4309,4327,4331,4336,4347,4356,4364,4368,4383,4388,4402,4411],{"__ignoreMap":24},[29,4276,4277],{"class":31,"line":32},[29,4278,4279],{"class":124},"\u002F\u002F 通过 key 获取节点\n",[29,4281,4282,4284,4286,4288],{"class":31,"line":128},[29,4283,2472],{"class":43},[29,4285,1009],{"class":35},[29,4287,2995],{"class":50},[29,4289,2480],{"class":35},[29,4291,4292],{"class":31,"line":143},[29,4293,4294],{"class":124},"\u002F\u002F 通过 linkData 模糊查询匹配线集合\n",[29,4296,4297,4299],{"class":31,"line":164},[29,4298,2855],{"class":43},[29,4300,3870],{"class":35},[29,4302,4303],{"class":31,"line":170},[29,4304,180],{"emptyLinePlaceholder":179},[29,4306,4307],{"class":31,"line":176},[29,4308,2867],{"class":124},[29,4310,4311,4313,4315,4317,4319,4321,4323,4325],{"class":31,"line":183},[29,4312,1415],{"class":131},[29,4314,4227],{"class":198},[29,4316,1421],{"class":131},[29,4318,2469],{"class":35},[29,4320,2472],{"class":43},[29,4322,1009],{"class":35},[29,4324,2995],{"class":50},[29,4326,2480],{"class":35},[29,4328,4329],{"class":31,"line":189},[29,4330,180],{"emptyLinePlaceholder":179},[29,4332,4333],{"class":31,"line":205},[29,4334,4335],{"class":124},"\u002F\u002F 根据 linkData，模糊匹配线集合，linkData 可以为线的部分属性\n",[29,4337,4338,4340,4343,4345],{"class":31,"line":210},[29,4339,2449],{"class":131},[29,4341,4342],{"class":35}," linkData ",[29,4344,47],{"class":131},[29,4346,1879],{"class":35},[29,4348,4349,4352,4354],{"class":31,"line":216},[29,4350,4351],{"class":35}," from:",[29,4353,2891],{"class":50},[29,4355,202],{"class":35},[29,4357,4358,4361],{"class":31,"line":227},[29,4359,4360],{"class":35}," to:",[29,4362,4363],{"class":198},"2\n",[29,4365,4366],{"class":31,"line":232},[29,4367,835],{"class":35},[29,4369,4370,4372,4375,4377,4379,4381],{"class":31,"line":238},[29,4371,1415],{"class":131},[29,4373,4374],{"class":198}," links",[29,4376,1421],{"class":131},[29,4378,2469],{"class":35},[29,4380,2855],{"class":43},[29,4382,3870],{"class":35},[29,4384,4385],{"class":31,"line":250},[29,4386,4387],{"class":124},"\u002F\u002F 遍历输出所有线的数据对象\n",[29,4389,4390,4393,4396,4399],{"class":31,"line":255},[29,4391,4392],{"class":131},"while",[29,4394,4395],{"class":35},"(links.",[29,4397,4398],{"class":43},"next",[29,4400,4401],{"class":35},"()){\n",[29,4403,4404,4406,4408],{"class":31,"line":261},[29,4405,2681],{"class":35},[29,4407,2923],{"class":43},[29,4409,4410],{"class":35},"(links.value.data)\n",[29,4412,4413],{"class":31,"line":276},[29,4414,835],{"class":35},[10,4416,2136],{"id":4417},"adddiagramlistener",[1345,4419],{},"GoJS的addDiagramListener函数可以监听画布的事件属性：",[19,4422,4424],{"className":847,"code":4423,"language":849,"meta":24,"style":24},"myDiagram.addDiagramListener(\"ObjectContextClicked\",function (e, i) {\n console.log(\"e:\", e);\n});\n",[26,4425,4426,4451,4464],{"__ignoreMap":24},[29,4427,4428,4430,4432,4434,4437,4439,4441,4443,4445,4447,4449],{"class":31,"line":32},[29,4429,2541],{"class":35},[29,4431,2136],{"class":43},[29,4433,1009],{"class":35},[29,4435,4436],{"class":50},"\"ObjectContextClicked\"",[29,4438,511],{"class":35},[29,4440,1543],{"class":131},[29,4442,1517],{"class":35},[29,4444,2150],{"class":1520},[29,4446,403],{"class":35},[29,4448,2155],{"class":1520},[29,4450,1524],{"class":35},[29,4452,4453,4455,4457,4459,4462],{"class":31,"line":128},[29,4454,2681],{"class":35},[29,4456,2684],{"class":43},[29,4458,1009],{"class":35},[29,4460,4461],{"class":50},"\"e:\"",[29,4463,4055],{"class":35},[29,4465,4466],{"class":31,"line":143},[29,4467,348],{"class":35},[4469,4470,4471],"ol",{},[1202,4472,4473,4476],{},[3556,4474,4475],{},"用户交互事件",[1199,4477,4478,4484,4490,4496,4502,4508],{},[1202,4479,4480,4483],{},[3556,4481,4482],{},"ObjectSingleClicked","：图形对象（如节点或连线）被单击时触发。",[1202,4485,4486,4489],{},[3556,4487,4488],{},"ObjectDoubleClicked","：图形对象被双击时触发。",[1202,4491,4492,4495],{},[3556,4493,4494],{},"ObjectContextClicked","：图形对象被右键点击时触发。",[1202,4497,4498,4501],{},[3556,4499,4500],{},"BackgroundSingleClicked","：图表背景被单击时触发。",[1202,4503,4504,4507],{},[3556,4505,4506],{},"BackgroundDoubleClicked","：图表背景被双击时触发。",[1202,4509,4510,4513],{},[3556,4511,4512],{},"BackgroundContextClicked","：图表背景被右键点击时触发。",[4469,4515,4516,4535,4554,4585,4604,4653],{"start":128},[1202,4517,4518,4521],{},[3556,4519,4520],{},"选择事件",[1199,4522,4523,4529],{},[1202,4524,4525,4528],{},[3556,4526,4527],{},"ChangingSelection","：选择集合即将改变之前触发。",[1202,4530,4531,4534],{},[3556,4532,4533],{},"ChangedSelection","：选择集合已经改变之后触发。",[1202,4536,4537,4540],{},[3556,4538,4539],{},"剪切板事件",[1199,4541,4542,4548],{},[1202,4543,4544,4547],{},[3556,4545,4546],{},"ClipboardChanged","：零部件已被复制到剪贴板上时触发。",[1202,4549,4550,4553],{},[3556,4551,4552],{},"ClipboardPasted","：零部件已从剪贴板粘贴到图表中时触发。",[1202,4555,4556,4559],{},[3556,4557,4558],{},"布局和动画事件",[1199,4560,4561,4567,4573,4579],{},[1202,4562,4563,4566],{},[3556,4564,4565],{},"AnimationStarting","：图表动画开始之前触发。",[1202,4568,4569,4572],{},[3556,4570,4571],{},"AnimationFinished","：图表动画完成之后触发。",[1202,4574,4575,4578],{},[3556,4576,4577],{},"InitialLayoutCompleted","：图表初始化布局完成后触发。",[1202,4580,4581,4584],{},[3556,4582,4583],{},"LayoutCompleted","：图表布局完成后触发。",[1202,4586,4587,4590],{},[3556,4588,4589],{},"图表状态变化事件",[1199,4591,4592,4598],{},[1202,4593,4594,4597],{},[3556,4595,4596],{},"DocumentBoundsChanged","：图表中各零部件的面积或边界发生变化时触发。",[1202,4599,4600,4603],{},[3556,4601,4602],{},"ViewportBoundsChanged","：图表的视图范围（即用户当前可见的区域）发生变化时触发。",[1202,4605,4606,4609],{},[3556,4607,4608],{},"特定操作事件",[1199,4610,4611,4617,4623,4629,4635,4641,4647],{},[1202,4612,4613,4616],{},[3556,4614,4615],{},"LinkDrawn","：用户通过LinkingTool创建新链接时触发。",[1202,4618,4619,4622],{},[3556,4620,4621],{},"LinkRelinked","：用户通过RelinkingTool或DraggingTool重新连接现有链接时触发。",[1202,4624,4625,4628],{},[3556,4626,4627],{},"LinkReshaped","：用户通过LinkReshapingTool调整链接路径时触发。",[1202,4630,4631,4634],{},[3556,4632,4633],{},"SelectionCopied","：选中的图表元素被复制时触发。",[1202,4636,4637,4640],{},[3556,4638,4639],{},"SelectionMoved","：选中的图表元素被移动时触发。",[1202,4642,4643,4646],{},[3556,4644,4645],{},"SelectionDeleting","：选中的图表元素即将被删除时触发。",[1202,4648,4649,4652],{},[3556,4650,4651],{},"SelectionDeleted","：选中的图表元素已被删除后触发。",[1202,4654,4655,4658],{},[3556,4656,4657],{},"其他事件",[1199,4659,4660,4666,4672],{},[1202,4661,4662,4665],{},[3556,4663,4664],{},"GainedFocus","：图表获得键盘焦点时触发。",[1202,4667,4668,4671],{},[3556,4669,4670],{},"LostFocus","：图表失去键盘焦点时触发。",[1202,4673,4674,4677],{},[3556,4675,4676],{},"Modified","：图表的修改状态发生变化时触发（例如，当用户更改了图表的内容但尚未保存时）。",[10,4679,4681],{"id":4680},"gojs-元素自动居中","GoJS 元素自动居中",[61,4683,4684],{},"GoJS 在默认情况下不会自动居中对齐，要在浏览器窗口大小改变时，自动将 GoJS 画布内元素居中对齐",[1199,4686,4687,4709],{},[1202,4688,4689,4692],{},[26,4690,4691],{},"contentAlignment",[4469,4693,4694,4703],{},[1202,4695,4696,4699,4700,4702],{},[26,4697,4698],{},"Diagram","中可以设置",[26,4701,4691],{},"内容对齐，但这个设置会在画布元素拖拽之后自动布局，导致元素无法被拖动",[1202,4704,4705,4708],{},[26,4706,4707],{},"initialContentAlignment","是在初始化时居中对齐，对于缩放之后不会再次生效",[1202,4710,4711,4714],{},[26,4712,4713],{},"alignDocument",[1199,4715,4716],{},[1202,4717,4718,4720],{},[26,4719,4713],{},"方法可以手动设置对齐方式，但缩放几次之后还是会出现无法对齐的情况",[61,4722,4723],{},"解决思路：",[61,4725,1204,4726,4729,4730,4732,4733,4736,4737,4739,4740,4743,4744,4747,4748,4750,4751],{},[26,4727,4728],{},"onresize","事件中，先将",[26,4731,4691],{},"设置为",[26,4734,4735],{},"Center","，再调用",[26,4738,4713],{},"方法将元素在",[26,4741,4742],{},"document","和",[26,4745,4746],{},"viewport","中都居中，然后再将",[26,4749,4691],{},"改为",[26,4752,4753],{},"default",[19,4755,4757],{"className":847,"code":4756,"language":849,"meta":24,"style":24},"let that = this \nwindow.addEventListener('resize',() =>{\n that.diagram.contentAlignment = go.Spot.Center\n that.diagram.alignDocument(go.Spot.Center, go.Spot.Center) \n that.diagram.contentAlignment = go.Spot.Default\n})\n",[26,4758,4759,4772,4792,4802,4812,4821],{"__ignoreMap":24},[29,4760,4761,4763,4765,4767,4769],{"class":31,"line":32},[29,4762,2449],{"class":131},[29,4764,4008],{"class":35},[29,4766,47],{"class":131},[29,4768,3891],{"class":198},[29,4770,4771],{"class":35}," \n",[29,4773,4774,4777,4780,4782,4785,4788,4790],{"class":31,"line":128},[29,4775,4776],{"class":35},"window.",[29,4778,4779],{"class":43},"addEventListener",[29,4781,1009],{"class":35},[29,4783,4784],{"class":50},"'resize'",[29,4786,4787],{"class":35},",() ",[29,4789,1876],{"class":131},[29,4791,375],{"class":35},[29,4793,4794,4797,4799],{"class":31,"line":143},[29,4795,4796],{"class":35}," that.diagram.contentAlignment ",[29,4798,47],{"class":131},[29,4800,4801],{"class":35}," go.Spot.Center\n",[29,4803,4804,4807,4809],{"class":31,"line":164},[29,4805,4806],{"class":35}," that.diagram.",[29,4808,4713],{"class":43},[29,4810,4811],{"class":35},"(go.Spot.Center, go.Spot.Center) \n",[29,4813,4814,4816,4818],{"class":31,"line":170},[29,4815,4796],{"class":35},[29,4817,47],{"class":131},[29,4819,4820],{"class":35}," go.Spot.Default\n",[29,4822,4823],{"class":31,"line":176},[29,4824,2832],{"class":35},[4826,4827,4828],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}",{"title":24,"searchDepth":143,"depth":143,"links":4830},[4831,4832,4833,4834,4835,4836,4837,4838],{"id":17,"depth":128,"text":17},{"id":72,"depth":128,"text":72},{"id":1197,"depth":128,"text":1197},{"id":1301,"depth":128,"text":1301},{"id":2019,"depth":128,"text":2019},{"id":2298,"depth":128,"text":2298},{"id":2694,"depth":128,"text":2694},{"id":3341,"depth":128,"text":3341},"visualization","2024-08-22","从引入方式、画布初始化到节点模板与数据绑定，一份可直接上手的 GoJS 流程图开发笔记。",false,"md",{},"\u002Fdocs\u002Fgojs-getting-started",{"title":5,"description":4841},null,"docs\u002Fgojs-getting-started",[12,117,4850],"notes","YgOrw0o_6AZ1iFZ-3f1YlUYSXixPl63yukIqfLnKuRk",[4853,4864,4873,4879,4887,4894,4903,4908,4916,4921,4928,4934,4936,4943,4949],{"path":4854,"title":4855,"description":4856,"date":4857,"category":4858,"tags":4859},"\u002Fdocs\u002Ffrontend-coding-standards","前端团队编码规范","HTML \u002F CSS \u002F JavaScript 三端统一的团队编码约定，含缩进、命名、语法与禁用项，可直接作为 Code Review 依据。","2025-12-17","standards",[23,4860,117,4861,4862,4863],"css","es6","best-practice","guide",{"path":4865,"title":4866,"description":4867,"date":4868,"category":4869,"tags":4870},"\u002Fdocs\u002Fwindows-mklink","Windows mklink 符号链接用法","mklink 各参数区别与实用场景：目录联接、符号链接与硬链接的选择。","2024-12-18","toolchain",[4871,4872],"windows","cheatsheet",{"path":4874,"title":4875,"description":4876,"date":4877,"category":4869,"tags":4878},"\u002Fdocs\u002Frandom-color-utils","JS 随机颜色生成方法","几种生成随机 RGB \u002F HEX 颜色的实现方式与各自适用场景。","2024-12-11",[117,4872],{"path":4880,"title":4881,"description":4882,"date":4883,"category":4839,"tags":4884},"\u002Fdocs\u002Fcanvas-vs-svg","Canvas 与 SVG 绘图方案选型","对比 Canvas 与 SVG 两种绘图方案的优缺点与适用场景，给出选型判断依据。","2024-12-09",[1396,4885,4886,4862],"svg","performance",{"path":4888,"title":4889,"description":4890,"date":4891,"category":4869,"tags":4892},"\u002Fdocs\u002Ffree-commercial-fonts","免费可商用字体整理","整理思源黑体、思源宋体等可商用中文字体，规避字体版权风险。","2024-11-03",[4893,4860,4850],"font",{"path":4895,"title":4896,"description":4897,"date":4891,"category":4898,"tags":4899},"\u002Fdocs\u002Finterview-browser-network","浏览器与网络考点","从输入 URL 到页面呈现的完整链路，涵盖渲染流程、回流重绘、HTTP 报文与状态码、跨域同源策略与常见攻击方式。","interview",[4900,4901,4902,4886,4850],"browser","http","network",{"path":4904,"title":4905,"description":4906,"date":4891,"category":4898,"tags":4907},"\u002Fdocs\u002Finterview-css-layout","CSS 与布局考点","em 与 rem 的区别、移动端三种适配方案对比、viewport 标准设置与 REM 布局的媒体查询实现。",[4860,23,4862,4850],{"path":4909,"title":4910,"description":4911,"date":4891,"category":4898,"tags":4912},"\u002Fdocs\u002Finterview-framework-tooling","框架与工程化考点","React diff 与 setState 机制、Redux 核心组成、Vue 常考清单，以及 Webpack、Vite、Git 的面试要点。",[4913,117,4914,4915,4850],"vue","webpack","vite",{"path":4917,"title":4918,"description":4919,"date":4891,"category":4898,"tags":4920},"\u002Fdocs\u002Finterview-javascript-core","JavaScript 核心考点","数据类型、this 绑定、闭包、原型链、异步与数组方法，前端面试中 JS 部分的高频考点与代码示例。",[117,4861,4850],{"path":4922,"title":4923,"description":4924,"date":4891,"category":4925,"tags":4926},"\u002Fdocs\u002Fjs-module-systems","JavaScript 模块化方案","梳理 CommonJS、AMD、ES Module 等模块化方案的差异与使用方式。","fundamentals",[117,4927,4861,4850],"module-system",{"path":4929,"title":4930,"description":4931,"date":4891,"category":4925,"tags":4932},"\u002Fdocs\u002Fwebsocket-basics","WebSocket 基础","WebSocket 全双工通信协议的事件、方法与基本用法整理。",[4933,4902,117,4850],"websocket",{"path":4845,"title":5,"description":4841,"date":4840,"category":4839,"tags":4935},[12,117,4850],{"path":4937,"title":4938,"description":4939,"date":4940,"category":4839,"tags":4941},"\u002Fdocs\u002Fecharts-options-notes","ECharts 配置项速查","整理 ECharts 常用 option 配置：数据格式、坐标轴、图例与交互项的实际用法。","2024-08-09",[4942,117,4872],"echarts",{"path":4944,"title":4945,"description":4946,"date":4947,"category":4925,"tags":4948},"\u002Fdocs\u002Fhttp-status-codes","HTTP 响应状态码详解","按 1xx 到 5xx 分类梳理 HTTP 状态码的含义与典型使用场景。","2024-06-27",[4901,4902,4872],{"path":4950,"title":4951,"description":4952,"date":4953,"category":4925,"tags":4954},"\u002Fdocs\u002Fhtml-basics","HTML 基础笔记","HTML 语法规范、常用标签、表格与表单元素速查。","2022-06-10",[23,4850,4872],1788337378599]