[{"data":1,"prerenderedAt":2455},["ShallowReactive",2],{"doc-\u002Fdocs\u002Fgojs-grid-panel":3,"docs-all":2273},{"id":4,"title":5,"body":6,"category":2257,"date":2258,"description":2259,"draft":2260,"extension":2261,"meta":2262,"navigation":2263,"path":2264,"seo":2265,"source":2266,"stem":2267,"tags":2268,"__hash__":2272},"docs\u002Fdocs\u002Fgojs-grid-panel.md","GoJS 网格面板用法",{"type":7,"value":8,"toc":2249},"minimark",[9,14,27,34,38,44,229,235,238,253,262,417,420,427,604,621,800,803,833,836,920,925,931,1155,1160,1163,1169,1433,1451,1705,1710,1720,1723,1929,1934,1941,1945,1948,2216,2221,2224,2245],[10,11,13],"h1",{"id":12},"gojs-网格面板","GoJS 网格面板",[15,16,17,18,22,23,26],"p",{},"网格由 ",[19,20,21],"code",{},"Panel.Grid"," 类型的面板实现。和其他面板一样，网格面板可以放在 Node 或任何 Part 里；但当它被用作 ",[19,24,25],{},"Diagram.grid"," 时，范围实际上是无限的。",[15,28,29,30,33],{},"与其他面板不同，网格面板的元素必须是 ",[19,31,32],{},"Shape","，且只用来控制网格线或网格条怎么画。",[35,36,37],"h2",{"id":37},"默认网格",[15,39,40,41,43],{},"要在图的背景显示网格，把 ",[19,42,25],{}," 设为可见即可：",[45,46,51],"pre",{"className":47,"code":48,"language":49,"meta":50,"style":50},"language-js shiki shiki-themes github-light github-dark","diagram.grid.visible = true;\ndiagram.nodeTemplate =\n  $(go.Node, \"Auto\",\n    $(go.Shape, \"Rectangle\", { fill: \"lightgray\" }),\n    $(go.TextBlock, { margin: 5 },\n      new go.Binding(\"text\", \"key\"))\n  );\nvar nodeDataArray = [\n  { key: \"Alpha\" }, { key: \"Beta\" }, { key: \"Gamma\" }\n];\ndiagram.model = new go.GraphLinksModel(nodeDataArray);\n","js","",[19,52,53,73,82,99,120,134,161,167,181,204,210],{"__ignoreMap":50},[54,55,58,62,66,70],"span",{"class":56,"line":57},"line",1,[54,59,61],{"class":60},"sVt8B","diagram.grid.visible ",[54,63,65],{"class":64},"szBVR","=",[54,67,69],{"class":68},"sj4cs"," true",[54,71,72],{"class":60},";\n",[54,74,76,79],{"class":56,"line":75},2,[54,77,78],{"class":60},"diagram.nodeTemplate ",[54,80,81],{"class":64},"=\n",[54,83,85,89,92,96],{"class":56,"line":84},3,[54,86,88],{"class":87},"sScJk","  $",[54,90,91],{"class":60},"(go.Node, ",[54,93,95],{"class":94},"sZZnC","\"Auto\"",[54,97,98],{"class":60},",\n",[54,100,102,105,108,111,114,117],{"class":56,"line":101},4,[54,103,104],{"class":87},"    $",[54,106,107],{"class":60},"(go.Shape, ",[54,109,110],{"class":94},"\"Rectangle\"",[54,112,113],{"class":60},", { fill: ",[54,115,116],{"class":94},"\"lightgray\"",[54,118,119],{"class":60}," }),\n",[54,121,123,125,128,131],{"class":56,"line":122},5,[54,124,104],{"class":87},[54,126,127],{"class":60},"(go.TextBlock, { margin: ",[54,129,130],{"class":68},"5",[54,132,133],{"class":60}," },\n",[54,135,137,140,143,146,149,152,155,158],{"class":56,"line":136},6,[54,138,139],{"class":64},"      new",[54,141,142],{"class":60}," go.",[54,144,145],{"class":87},"Binding",[54,147,148],{"class":60},"(",[54,150,151],{"class":94},"\"text\"",[54,153,154],{"class":60},", ",[54,156,157],{"class":94},"\"key\"",[54,159,160],{"class":60},"))\n",[54,162,164],{"class":56,"line":163},7,[54,165,166],{"class":60},"  );\n",[54,168,170,173,176,178],{"class":56,"line":169},8,[54,171,172],{"class":64},"var",[54,174,175],{"class":60}," nodeDataArray ",[54,177,65],{"class":64},[54,179,180],{"class":60}," [\n",[54,182,184,187,190,193,196,198,201],{"class":56,"line":183},9,[54,185,186],{"class":60},"  { key: ",[54,188,189],{"class":94},"\"Alpha\"",[54,191,192],{"class":60}," }, { key: ",[54,194,195],{"class":94},"\"Beta\"",[54,197,192],{"class":60},[54,199,200],{"class":94},"\"Gamma\"",[54,202,203],{"class":60}," }\n",[54,205,207],{"class":56,"line":206},10,[54,208,209],{"class":60},"];\n",[54,211,213,216,218,221,223,226],{"class":56,"line":212},11,[54,214,215],{"class":60},"diagram.model ",[54,217,65],{"class":64},[54,219,220],{"class":64}," new",[54,222,142],{"class":60},[54,224,225],{"class":87},"GraphLinksModel",[54,227,228],{"class":60},"(nodeDataArray);\n",[15,230,231],{},[232,233],"img",{"alt":50,"src":234},"\u002Fimages\u002Fd-note-ren\u002Fgojs-grid-01-default.png",[35,236,237],{"id":237},"网格捕捉",[15,239,240,241,244,245,248,249,252],{},"把 ",[19,242,243],{},"DraggingTool.isGridSnapEnabled"," 和\u002F或 ",[19,246,247],{},"ResizingTool.isGridSnapEnabled"," 设为 ",[19,250,251],{},"true","，拖动与调整大小就会按背景网格对齐。",[15,254,255,257,258,261],{},[19,256,243],{}," 不影响未连接的链接；如果在链接模板上自定义了 ",[19,259,260],{},"Part.dragComputation","，可以自行处理。",[45,263,265],{"className":47,"code":264,"language":49,"meta":50,"style":50},"diagram.grid.visible = true;\ndiagram.toolManager.draggingTool.isGridSnapEnabled = true;\ndiagram.toolManager.resizingTool.isGridSnapEnabled = true;\ndiagram.nodeTemplate =\n  $(go.Node, \"Auto\",\n    { resizable: true },\n    $(go.Shape, \"Rectangle\", { fill: \"lightgray\" }),\n    $(go.TextBlock, { margin: 5 },\n      new go.Binding(\"text\", \"key\"))\n  );\nvar nodeDataArray = [\n  { key: \"Alpha\" }, { key: \"Beta\" }, { key: \"Gamma\" }\n];\ndiagram.model = new go.GraphLinksModel(nodeDataArray);\n",[19,266,267,277,288,299,305,315,324,338,348,366,370,380,397,402],{"__ignoreMap":50},[54,268,269,271,273,275],{"class":56,"line":57},[54,270,61],{"class":60},[54,272,65],{"class":64},[54,274,69],{"class":68},[54,276,72],{"class":60},[54,278,279,282,284,286],{"class":56,"line":75},[54,280,281],{"class":60},"diagram.toolManager.draggingTool.isGridSnapEnabled ",[54,283,65],{"class":64},[54,285,69],{"class":68},[54,287,72],{"class":60},[54,289,290,293,295,297],{"class":56,"line":84},[54,291,292],{"class":60},"diagram.toolManager.resizingTool.isGridSnapEnabled ",[54,294,65],{"class":64},[54,296,69],{"class":68},[54,298,72],{"class":60},[54,300,301,303],{"class":56,"line":101},[54,302,78],{"class":60},[54,304,81],{"class":64},[54,306,307,309,311,313],{"class":56,"line":122},[54,308,88],{"class":87},[54,310,91],{"class":60},[54,312,95],{"class":94},[54,314,98],{"class":60},[54,316,317,320,322],{"class":56,"line":136},[54,318,319],{"class":60},"    { resizable: ",[54,321,251],{"class":68},[54,323,133],{"class":60},[54,325,326,328,330,332,334,336],{"class":56,"line":163},[54,327,104],{"class":87},[54,329,107],{"class":60},[54,331,110],{"class":94},[54,333,113],{"class":60},[54,335,116],{"class":94},[54,337,119],{"class":60},[54,339,340,342,344,346],{"class":56,"line":169},[54,341,104],{"class":87},[54,343,127],{"class":60},[54,345,130],{"class":68},[54,347,133],{"class":60},[54,349,350,352,354,356,358,360,362,364],{"class":56,"line":183},[54,351,139],{"class":64},[54,353,142],{"class":60},[54,355,145],{"class":87},[54,357,148],{"class":60},[54,359,151],{"class":94},[54,361,154],{"class":60},[54,363,157],{"class":94},[54,365,160],{"class":60},[54,367,368],{"class":56,"line":206},[54,369,166],{"class":60},[54,371,372,374,376,378],{"class":56,"line":212},[54,373,172],{"class":64},[54,375,175],{"class":60},[54,377,65],{"class":64},[54,379,180],{"class":60},[54,381,383,385,387,389,391,393,395],{"class":56,"line":382},12,[54,384,186],{"class":60},[54,386,189],{"class":94},[54,388,192],{"class":60},[54,390,195],{"class":94},[54,392,192],{"class":60},[54,394,200],{"class":94},[54,396,203],{"class":60},[54,398,400],{"class":56,"line":399},13,[54,401,209],{"class":60},[54,403,405,407,409,411,413,415],{"class":56,"line":404},14,[54,406,215],{"class":60},[54,408,65],{"class":64},[54,410,220],{"class":64},[54,412,142],{"class":60},[54,414,225],{"class":87},[54,416,228],{"class":60},[35,418,419],{"id":419},"简单的网格定制",[15,421,422,423,426],{},"通过 ",[19,424,425],{},"Panel.gridCellSize"," 修改网格单元格大小：",[45,428,430],{"className":47,"code":429,"language":49,"meta":50,"style":50},"diagram.grid.visible = true;\ndiagram.grid.gridCellSize = new go.Size(30, 20);\ndiagram.toolManager.draggingTool.isGridSnapEnabled = true;\ndiagram.toolManager.resizingTool.isGridSnapEnabled = true;\ndiagram.nodeTemplate =\n  $(go.Node, \"Auto\",\n    { resizable: true },\n    $(go.Shape, \"Rectangle\", { fill: \"lightgray\" }),\n    $(go.TextBlock, { margin: 5 },\n      new go.Binding(\"text\", \"key\"))\n  );\nvar nodeDataArray = [\n  { key: \"Alpha\" }, { key: \"Beta\" }, { key: \"Gamma\" }\n];\ndiagram.model = new go.GraphLinksModel(nodeDataArray);\n",[19,431,432,442,469,479,489,495,505,513,527,537,555,559,569,585,589],{"__ignoreMap":50},[54,433,434,436,438,440],{"class":56,"line":57},[54,435,61],{"class":60},[54,437,65],{"class":64},[54,439,69],{"class":68},[54,441,72],{"class":60},[54,443,444,447,449,451,453,456,458,461,463,466],{"class":56,"line":75},[54,445,446],{"class":60},"diagram.grid.gridCellSize ",[54,448,65],{"class":64},[54,450,220],{"class":64},[54,452,142],{"class":60},[54,454,455],{"class":87},"Size",[54,457,148],{"class":60},[54,459,460],{"class":68},"30",[54,462,154],{"class":60},[54,464,465],{"class":68},"20",[54,467,468],{"class":60},");\n",[54,470,471,473,475,477],{"class":56,"line":84},[54,472,281],{"class":60},[54,474,65],{"class":64},[54,476,69],{"class":68},[54,478,72],{"class":60},[54,480,481,483,485,487],{"class":56,"line":101},[54,482,292],{"class":60},[54,484,65],{"class":64},[54,486,69],{"class":68},[54,488,72],{"class":60},[54,490,491,493],{"class":56,"line":122},[54,492,78],{"class":60},[54,494,81],{"class":64},[54,496,497,499,501,503],{"class":56,"line":136},[54,498,88],{"class":87},[54,500,91],{"class":60},[54,502,95],{"class":94},[54,504,98],{"class":60},[54,506,507,509,511],{"class":56,"line":163},[54,508,319],{"class":60},[54,510,251],{"class":68},[54,512,133],{"class":60},[54,514,515,517,519,521,523,525],{"class":56,"line":169},[54,516,104],{"class":87},[54,518,107],{"class":60},[54,520,110],{"class":94},[54,522,113],{"class":60},[54,524,116],{"class":94},[54,526,119],{"class":60},[54,528,529,531,533,535],{"class":56,"line":183},[54,530,104],{"class":87},[54,532,127],{"class":60},[54,534,130],{"class":68},[54,536,133],{"class":60},[54,538,539,541,543,545,547,549,551,553],{"class":56,"line":206},[54,540,139],{"class":64},[54,542,142],{"class":60},[54,544,145],{"class":87},[54,546,148],{"class":60},[54,548,151],{"class":94},[54,550,154],{"class":60},[54,552,157],{"class":94},[54,554,160],{"class":60},[54,556,557],{"class":56,"line":212},[54,558,166],{"class":60},[54,560,561,563,565,567],{"class":56,"line":382},[54,562,172],{"class":64},[54,564,175],{"class":60},[54,566,65],{"class":64},[54,568,180],{"class":60},[54,570,571,573,575,577,579,581,583],{"class":56,"line":399},[54,572,186],{"class":60},[54,574,189],{"class":94},[54,576,192],{"class":60},[54,578,195],{"class":94},[54,580,192],{"class":60},[54,582,200],{"class":94},[54,584,203],{"class":60},[54,586,587],{"class":56,"line":404},[54,588,209],{"class":60},[54,590,592,594,596,598,600,602],{"class":56,"line":591},15,[54,593,215],{"class":60},[54,595,65],{"class":64},[54,597,220],{"class":64},[54,599,142],{"class":60},[54,601,225],{"class":87},[54,603,228],{"class":60},[15,605,606,607,610,611,613,614,616,617,620],{},"拖动时用于捕捉的单元格大小不必与背景网格一致：",[19,608,609],{},"DraggingTool.gridSnapCellSize"," 优先于 ",[19,612,425],{},"。若设置了 ",[19,615,609],{}," 而未设置 ",[19,618,619],{},"ResizingTool.cellSize","，调整大小时也会沿用前者。",[45,622,624],{"className":47,"code":623,"language":49,"meta":50,"style":50},"diagram.grid.visible = true;\ndiagram.toolManager.draggingTool.isGridSnapEnabled = true;\ndiagram.toolManager.resizingTool.isGridSnapEnabled = true;\n\u002F\u002F 每隔一个点捕捉（默认背景网格是 10×10）\ndiagram.toolManager.draggingTool.gridSnapCellSize = new go.Size(20, 20);\ndiagram.nodeTemplate =\n  $(go.Node, \"Auto\",\n    { resizable: true },\n    $(go.Shape, \"Rectangle\", { fill: \"lightgray\" }),\n    $(go.TextBlock, { margin: 5 },\n      new go.Binding(\"text\", \"key\"))\n  );\nvar nodeDataArray = [\n  { key: \"Alpha\" }, { key: \"Beta\" }, { key: \"Gamma\" }\n];\ndiagram.model = new go.GraphLinksModel(nodeDataArray);\n",[19,625,626,636,646,656,662,685,691,701,709,723,733,751,755,765,781,785],{"__ignoreMap":50},[54,627,628,630,632,634],{"class":56,"line":57},[54,629,61],{"class":60},[54,631,65],{"class":64},[54,633,69],{"class":68},[54,635,72],{"class":60},[54,637,638,640,642,644],{"class":56,"line":75},[54,639,281],{"class":60},[54,641,65],{"class":64},[54,643,69],{"class":68},[54,645,72],{"class":60},[54,647,648,650,652,654],{"class":56,"line":84},[54,649,292],{"class":60},[54,651,65],{"class":64},[54,653,69],{"class":68},[54,655,72],{"class":60},[54,657,658],{"class":56,"line":101},[54,659,661],{"class":660},"sJ8bj","\u002F\u002F 每隔一个点捕捉（默认背景网格是 10×10）\n",[54,663,664,667,669,671,673,675,677,679,681,683],{"class":56,"line":122},[54,665,666],{"class":60},"diagram.toolManager.draggingTool.gridSnapCellSize ",[54,668,65],{"class":64},[54,670,220],{"class":64},[54,672,142],{"class":60},[54,674,455],{"class":87},[54,676,148],{"class":60},[54,678,465],{"class":68},[54,680,154],{"class":60},[54,682,465],{"class":68},[54,684,468],{"class":60},[54,686,687,689],{"class":56,"line":136},[54,688,78],{"class":60},[54,690,81],{"class":64},[54,692,693,695,697,699],{"class":56,"line":163},[54,694,88],{"class":87},[54,696,91],{"class":60},[54,698,95],{"class":94},[54,700,98],{"class":60},[54,702,703,705,707],{"class":56,"line":169},[54,704,319],{"class":60},[54,706,251],{"class":68},[54,708,133],{"class":60},[54,710,711,713,715,717,719,721],{"class":56,"line":183},[54,712,104],{"class":87},[54,714,107],{"class":60},[54,716,110],{"class":94},[54,718,113],{"class":60},[54,720,116],{"class":94},[54,722,119],{"class":60},[54,724,725,727,729,731],{"class":56,"line":206},[54,726,104],{"class":87},[54,728,127],{"class":60},[54,730,130],{"class":68},[54,732,133],{"class":60},[54,734,735,737,739,741,743,745,747,749],{"class":56,"line":212},[54,736,139],{"class":64},[54,738,142],{"class":60},[54,740,145],{"class":87},[54,742,148],{"class":60},[54,744,151],{"class":94},[54,746,154],{"class":60},[54,748,157],{"class":94},[54,750,160],{"class":60},[54,752,753],{"class":56,"line":382},[54,754,166],{"class":60},[54,756,757,759,761,763],{"class":56,"line":399},[54,758,172],{"class":64},[54,760,175],{"class":60},[54,762,65],{"class":64},[54,764,180],{"class":60},[54,766,767,769,771,773,775,777,779],{"class":56,"line":404},[54,768,186],{"class":60},[54,770,189],{"class":94},[54,772,192],{"class":60},[54,774,195],{"class":94},[54,776,192],{"class":60},[54,778,200],{"class":94},[54,780,203],{"class":60},[54,782,783],{"class":56,"line":591},[54,784,209],{"class":60},[54,786,788,790,792,794,796,798],{"class":56,"line":787},16,[54,789,215],{"class":60},[54,791,65],{"class":64},[54,793,220],{"class":64},[54,795,142],{"class":60},[54,797,225],{"class":87},[54,799,228],{"class":60},[35,801,802],{"id":802},"自定义网格",[15,804,805,808,809,811,812,814,815,818,819,822,823,822,826,822,829,832],{},[19,806,807],{},"Panel.type"," 为 ",[19,810,21],{}," 时，网格图案由 Panel 类绘制。网格面板的元素必须是 ",[19,813,32],{},"，且 ",[19,816,817],{},"Shape.figure"," 只能取四种：",[19,820,821],{},"LineH","、",[19,824,825],{},"LineV",[19,827,828],{},"BarH",[19,830,831],{},"BarV","。两种 Line 画的是分隔单元格的描边线，两种 Bar 画的是填充单元格的矩形。",[15,834,835],{},"蓝色水平线加绿色垂直线的简单网格：",[45,837,839],{"className":47,"code":838,"language":49,"meta":50,"style":50},"diagram.grid =\n  $(go.Panel, go.Panel.Grid,  \u002F\u002F or \"Grid\"\n    { gridCellSize: new go.Size(25, 25) },\n    $(go.Shape, \"LineH\", { stroke: \"blue\" }),\n    $(go.Shape, \"LineV\", { stroke: \"green\" })\n  );\n",[19,840,841,848,858,882,899,916],{"__ignoreMap":50},[54,842,843,846],{"class":56,"line":57},[54,844,845],{"class":60},"diagram.grid ",[54,847,81],{"class":64},[54,849,850,852,855],{"class":56,"line":75},[54,851,88],{"class":87},[54,853,854],{"class":60},"(go.Panel, go.Panel.Grid,  ",[54,856,857],{"class":660},"\u002F\u002F or \"Grid\"\n",[54,859,860,863,866,868,870,872,875,877,879],{"class":56,"line":84},[54,861,862],{"class":60},"    { gridCellSize: ",[54,864,865],{"class":64},"new",[54,867,142],{"class":60},[54,869,455],{"class":87},[54,871,148],{"class":60},[54,873,874],{"class":68},"25",[54,876,154],{"class":60},[54,878,874],{"class":68},[54,880,881],{"class":60},") },\n",[54,883,884,886,888,891,894,897],{"class":56,"line":101},[54,885,104],{"class":87},[54,887,107],{"class":60},[54,889,890],{"class":94},"\"LineH\"",[54,892,893],{"class":60},", { stroke: ",[54,895,896],{"class":94},"\"blue\"",[54,898,119],{"class":60},[54,900,901,903,905,908,910,913],{"class":56,"line":122},[54,902,104],{"class":87},[54,904,107],{"class":60},[54,906,907],{"class":94},"\"LineV\"",[54,909,893],{"class":60},[54,911,912],{"class":94},"\"green\"",[54,914,915],{"class":60}," })\n",[54,917,918],{"class":56,"line":136},[54,919,166],{"class":60},[15,921,922],{},[232,923],{"alt":50,"src":924},"\u002Fimages\u002Fd-note-ren\u002Fgojs-grid-02-lines.png",[15,926,927,930],{},[19,928,929],{},"Shape.interval"," 决定这条线每隔多少个单元格画一次，取正整数。例如每五格画一条深色线：",[45,932,934],{"className":47,"code":933,"language":49,"meta":50,"style":50},"diagram.grid =\n  $(go.Panel, \"Grid\",\n    { gridCellSize: new go.Size(10, 10) },\n    $(go.Shape, \"LineH\", { stroke: \"lightblue\" }),\n    $(go.Shape, \"LineV\", { stroke: \"lightgreen\" }),\n    $(go.Shape, \"LineH\", { stroke: \"blue\", interval: 5 }),\n    $(go.Shape, \"LineV\", { stroke: \"green\", interval: 5 })\n  );\ndiagram.nodeTemplate =\n  $(go.Node, \"Auto\",\n    { resizable: true },\n    $(go.Shape, \"Rectangle\", { fill: \"lightgray\" }),\n    $(go.TextBlock, { margin: 5 },\n      new go.Binding(\"text\", \"key\"))\n  );\nvar nodeDataArray = [\n  { key: \"Alpha\" }\n];\ndiagram.model = new go.GraphLinksModel(nodeDataArray);\n",[19,935,936,942,954,975,990,1005,1024,1042,1046,1052,1062,1070,1084,1094,1112,1116,1126,1135,1140],{"__ignoreMap":50},[54,937,938,940],{"class":56,"line":57},[54,939,845],{"class":60},[54,941,81],{"class":64},[54,943,944,946,949,952],{"class":56,"line":75},[54,945,88],{"class":87},[54,947,948],{"class":60},"(go.Panel, ",[54,950,951],{"class":94},"\"Grid\"",[54,953,98],{"class":60},[54,955,956,958,960,962,964,966,969,971,973],{"class":56,"line":84},[54,957,862],{"class":60},[54,959,865],{"class":64},[54,961,142],{"class":60},[54,963,455],{"class":87},[54,965,148],{"class":60},[54,967,968],{"class":68},"10",[54,970,154],{"class":60},[54,972,968],{"class":68},[54,974,881],{"class":60},[54,976,977,979,981,983,985,988],{"class":56,"line":101},[54,978,104],{"class":87},[54,980,107],{"class":60},[54,982,890],{"class":94},[54,984,893],{"class":60},[54,986,987],{"class":94},"\"lightblue\"",[54,989,119],{"class":60},[54,991,992,994,996,998,1000,1003],{"class":56,"line":122},[54,993,104],{"class":87},[54,995,107],{"class":60},[54,997,907],{"class":94},[54,999,893],{"class":60},[54,1001,1002],{"class":94},"\"lightgreen\"",[54,1004,119],{"class":60},[54,1006,1007,1009,1011,1013,1015,1017,1020,1022],{"class":56,"line":136},[54,1008,104],{"class":87},[54,1010,107],{"class":60},[54,1012,890],{"class":94},[54,1014,893],{"class":60},[54,1016,896],{"class":94},[54,1018,1019],{"class":60},", interval: ",[54,1021,130],{"class":68},[54,1023,119],{"class":60},[54,1025,1026,1028,1030,1032,1034,1036,1038,1040],{"class":56,"line":163},[54,1027,104],{"class":87},[54,1029,107],{"class":60},[54,1031,907],{"class":94},[54,1033,893],{"class":60},[54,1035,912],{"class":94},[54,1037,1019],{"class":60},[54,1039,130],{"class":68},[54,1041,915],{"class":60},[54,1043,1044],{"class":56,"line":169},[54,1045,166],{"class":60},[54,1047,1048,1050],{"class":56,"line":183},[54,1049,78],{"class":60},[54,1051,81],{"class":64},[54,1053,1054,1056,1058,1060],{"class":56,"line":206},[54,1055,88],{"class":87},[54,1057,91],{"class":60},[54,1059,95],{"class":94},[54,1061,98],{"class":60},[54,1063,1064,1066,1068],{"class":56,"line":212},[54,1065,319],{"class":60},[54,1067,251],{"class":68},[54,1069,133],{"class":60},[54,1071,1072,1074,1076,1078,1080,1082],{"class":56,"line":382},[54,1073,104],{"class":87},[54,1075,107],{"class":60},[54,1077,110],{"class":94},[54,1079,113],{"class":60},[54,1081,116],{"class":94},[54,1083,119],{"class":60},[54,1085,1086,1088,1090,1092],{"class":56,"line":399},[54,1087,104],{"class":87},[54,1089,127],{"class":60},[54,1091,130],{"class":68},[54,1093,133],{"class":60},[54,1095,1096,1098,1100,1102,1104,1106,1108,1110],{"class":56,"line":404},[54,1097,139],{"class":64},[54,1099,142],{"class":60},[54,1101,145],{"class":87},[54,1103,148],{"class":60},[54,1105,151],{"class":94},[54,1107,154],{"class":60},[54,1109,157],{"class":94},[54,1111,160],{"class":60},[54,1113,1114],{"class":56,"line":591},[54,1115,166],{"class":60},[54,1117,1118,1120,1122,1124],{"class":56,"line":787},[54,1119,172],{"class":64},[54,1121,175],{"class":60},[54,1123,65],{"class":64},[54,1125,180],{"class":60},[54,1127,1129,1131,1133],{"class":56,"line":1128},17,[54,1130,186],{"class":60},[54,1132,189],{"class":94},[54,1134,203],{"class":60},[54,1136,1138],{"class":56,"line":1137},18,[54,1139,209],{"class":60},[54,1141,1143,1145,1147,1149,1151,1153],{"class":56,"line":1142},19,[54,1144,215],{"class":60},[54,1146,65],{"class":64},[54,1148,220],{"class":64},[54,1150,142],{"class":60},[54,1152,225],{"class":87},[54,1154,228],{"class":60},[15,1156,1157],{},[232,1158],{"alt":50,"src":1159},"\u002Fimages\u002Fd-note-ren\u002Fgojs-grid-03-interval.png",[15,1161,1162],{},"形状按在面板中出现的顺序绘制，所以深蓝水平线压在浅绿垂直线之上，深绿垂直线又压在深蓝水平线之上。",[15,1164,1165,1166,1168],{},"预定义的 ",[19,1167,25],{}," 就是这样定义的：",[45,1170,1172],{"className":47,"code":1171,"language":49,"meta":50,"style":50},"diagram.grid =\n  $(go.Panel, \"Grid\",\n    {\n      name: \"GRID\",\n      visible: false,\n      gridCellSize: new go.Size(10, 10),\n      gridOrigin: new go.Point(0, 0)\n    },\n    $(go.Shape, \"LineH\", { stroke: \"lightgray\", strokeWidth: 0.5, interval: 1 }),\n    $(go.Shape, \"LineH\", { stroke: \"gray\", strokeWidth: 0.5, interval: 5 }),\n    $(go.Shape, \"LineH\", { stroke: \"gray\", strokeWidth: 1.0, interval: 10 }),\n    $(go.Shape, \"LineV\", { stroke: \"lightgray\", strokeWidth: 0.5, interval: 1 }),\n    $(go.Shape, \"LineV\", { stroke: \"gray\", strokeWidth: 0.5, interval: 5 }),\n    $(go.Shape, \"LineV\", { stroke: \"gray\", strokeWidth: 1.0, interval: 10 })\n  );\ndiagram.grid.visible = true;  \u002F\u002F so that this example shows the standard grid\ndiagram.div.style.background = \"white\";\n",[19,1173,1174,1180,1190,1195,1205,1215,1237,1261,1266,1291,1314,1337,1359,1381,1403,1407,1421],{"__ignoreMap":50},[54,1175,1176,1178],{"class":56,"line":57},[54,1177,845],{"class":60},[54,1179,81],{"class":64},[54,1181,1182,1184,1186,1188],{"class":56,"line":75},[54,1183,88],{"class":87},[54,1185,948],{"class":60},[54,1187,951],{"class":94},[54,1189,98],{"class":60},[54,1191,1192],{"class":56,"line":84},[54,1193,1194],{"class":60},"    {\n",[54,1196,1197,1200,1203],{"class":56,"line":101},[54,1198,1199],{"class":60},"      name: ",[54,1201,1202],{"class":94},"\"GRID\"",[54,1204,98],{"class":60},[54,1206,1207,1210,1213],{"class":56,"line":122},[54,1208,1209],{"class":60},"      visible: ",[54,1211,1212],{"class":68},"false",[54,1214,98],{"class":60},[54,1216,1217,1220,1222,1224,1226,1228,1230,1232,1234],{"class":56,"line":136},[54,1218,1219],{"class":60},"      gridCellSize: ",[54,1221,865],{"class":64},[54,1223,142],{"class":60},[54,1225,455],{"class":87},[54,1227,148],{"class":60},[54,1229,968],{"class":68},[54,1231,154],{"class":60},[54,1233,968],{"class":68},[54,1235,1236],{"class":60},"),\n",[54,1238,1239,1242,1244,1246,1249,1251,1254,1256,1258],{"class":56,"line":163},[54,1240,1241],{"class":60},"      gridOrigin: ",[54,1243,865],{"class":64},[54,1245,142],{"class":60},[54,1247,1248],{"class":87},"Point",[54,1250,148],{"class":60},[54,1252,1253],{"class":68},"0",[54,1255,154],{"class":60},[54,1257,1253],{"class":68},[54,1259,1260],{"class":60},")\n",[54,1262,1263],{"class":56,"line":169},[54,1264,1265],{"class":60},"    },\n",[54,1267,1268,1270,1272,1274,1276,1278,1281,1284,1286,1289],{"class":56,"line":183},[54,1269,104],{"class":87},[54,1271,107],{"class":60},[54,1273,890],{"class":94},[54,1275,893],{"class":60},[54,1277,116],{"class":94},[54,1279,1280],{"class":60},", strokeWidth: ",[54,1282,1283],{"class":68},"0.5",[54,1285,1019],{"class":60},[54,1287,1288],{"class":68},"1",[54,1290,119],{"class":60},[54,1292,1293,1295,1297,1299,1301,1304,1306,1308,1310,1312],{"class":56,"line":206},[54,1294,104],{"class":87},[54,1296,107],{"class":60},[54,1298,890],{"class":94},[54,1300,893],{"class":60},[54,1302,1303],{"class":94},"\"gray\"",[54,1305,1280],{"class":60},[54,1307,1283],{"class":68},[54,1309,1019],{"class":60},[54,1311,130],{"class":68},[54,1313,119],{"class":60},[54,1315,1316,1318,1320,1322,1324,1326,1328,1331,1333,1335],{"class":56,"line":212},[54,1317,104],{"class":87},[54,1319,107],{"class":60},[54,1321,890],{"class":94},[54,1323,893],{"class":60},[54,1325,1303],{"class":94},[54,1327,1280],{"class":60},[54,1329,1330],{"class":68},"1.0",[54,1332,1019],{"class":60},[54,1334,968],{"class":68},[54,1336,119],{"class":60},[54,1338,1339,1341,1343,1345,1347,1349,1351,1353,1355,1357],{"class":56,"line":382},[54,1340,104],{"class":87},[54,1342,107],{"class":60},[54,1344,907],{"class":94},[54,1346,893],{"class":60},[54,1348,116],{"class":94},[54,1350,1280],{"class":60},[54,1352,1283],{"class":68},[54,1354,1019],{"class":60},[54,1356,1288],{"class":68},[54,1358,119],{"class":60},[54,1360,1361,1363,1365,1367,1369,1371,1373,1375,1377,1379],{"class":56,"line":399},[54,1362,104],{"class":87},[54,1364,107],{"class":60},[54,1366,907],{"class":94},[54,1368,893],{"class":60},[54,1370,1303],{"class":94},[54,1372,1280],{"class":60},[54,1374,1283],{"class":68},[54,1376,1019],{"class":60},[54,1378,130],{"class":68},[54,1380,119],{"class":60},[54,1382,1383,1385,1387,1389,1391,1393,1395,1397,1399,1401],{"class":56,"line":404},[54,1384,104],{"class":87},[54,1386,107],{"class":60},[54,1388,907],{"class":94},[54,1390,893],{"class":60},[54,1392,1303],{"class":94},[54,1394,1280],{"class":60},[54,1396,1330],{"class":68},[54,1398,1019],{"class":60},[54,1400,968],{"class":68},[54,1402,915],{"class":60},[54,1404,1405],{"class":56,"line":591},[54,1406,166],{"class":60},[54,1408,1409,1411,1413,1415,1418],{"class":56,"line":787},[54,1410,61],{"class":60},[54,1412,65],{"class":64},[54,1414,69],{"class":68},[54,1416,1417],{"class":60},";  ",[54,1419,1420],{"class":660},"\u002F\u002F so that this example shows the standard grid\n",[54,1422,1423,1426,1428,1431],{"class":56,"line":1128},[54,1424,1425],{"class":60},"diagram.div.style.background ",[54,1427,65],{"class":64},[54,1429,1430],{"class":94}," \"white\"",[54,1432,72],{"class":60},[15,1434,1435,1436,1438,1439,1442,1443,1446,1447,1450],{},"用 ",[19,1437,828],{}," 可以得到横向条纹。注意用的是 ",[19,1440,1441],{},"Shape.fill"," 而不是 ",[19,1444,1445],{},"Shape.stroke","，并显式设置 ",[19,1448,1449],{},"GraphObject.height","：",[45,1452,1454],{"className":47,"code":1453,"language":49,"meta":50,"style":50},"diagram.grid =\n  $(go.Panel, \"Grid\",\n    { gridCellSize: new go.Size(50, 50) },\n    $(go.Shape, \"BarH\", { fill: \"lightgreen\", interval: 2, height: 50 })\n  );\ndiagram.nodeTemplate =\n  $(go.Node, \"Auto\",\n    {\n      dragComputation: function(node, pt, gridpt) {\n        pt.y = Math.round(pt.y \u002F 100) * 100;\n        return pt;\n      }\n    },\n    $(go.Shape, \"Rectangle\", { fill: \"lightgray\" }),\n    $(go.TextBlock, { margin: 5 },\n      new go.Binding(\"text\", \"key\"))\n  );\nvar nodeDataArray = [\n  { key: \"Alpha\" }\n];\ndiagram.model = new go.GraphLinksModel(nodeDataArray);\n",[19,1455,1456,1462,1472,1493,1518,1522,1528,1538,1542,1572,1604,1612,1617,1621,1635,1645,1663,1667,1677,1685,1690],{"__ignoreMap":50},[54,1457,1458,1460],{"class":56,"line":57},[54,1459,845],{"class":60},[54,1461,81],{"class":64},[54,1463,1464,1466,1468,1470],{"class":56,"line":75},[54,1465,88],{"class":87},[54,1467,948],{"class":60},[54,1469,951],{"class":94},[54,1471,98],{"class":60},[54,1473,1474,1476,1478,1480,1482,1484,1487,1489,1491],{"class":56,"line":84},[54,1475,862],{"class":60},[54,1477,865],{"class":64},[54,1479,142],{"class":60},[54,1481,455],{"class":87},[54,1483,148],{"class":60},[54,1485,1486],{"class":68},"50",[54,1488,154],{"class":60},[54,1490,1486],{"class":68},[54,1492,881],{"class":60},[54,1494,1495,1497,1499,1502,1504,1506,1508,1511,1514,1516],{"class":56,"line":101},[54,1496,104],{"class":87},[54,1498,107],{"class":60},[54,1500,1501],{"class":94},"\"BarH\"",[54,1503,113],{"class":60},[54,1505,1002],{"class":94},[54,1507,1019],{"class":60},[54,1509,1510],{"class":68},"2",[54,1512,1513],{"class":60},", height: ",[54,1515,1486],{"class":68},[54,1517,915],{"class":60},[54,1519,1520],{"class":56,"line":122},[54,1521,166],{"class":60},[54,1523,1524,1526],{"class":56,"line":136},[54,1525,78],{"class":60},[54,1527,81],{"class":64},[54,1529,1530,1532,1534,1536],{"class":56,"line":163},[54,1531,88],{"class":87},[54,1533,91],{"class":60},[54,1535,95],{"class":94},[54,1537,98],{"class":60},[54,1539,1540],{"class":56,"line":169},[54,1541,1194],{"class":60},[54,1543,1544,1547,1550,1553,1555,1559,1561,1564,1566,1569],{"class":56,"line":183},[54,1545,1546],{"class":87},"      dragComputation",[54,1548,1549],{"class":60},": ",[54,1551,1552],{"class":64},"function",[54,1554,148],{"class":60},[54,1556,1558],{"class":1557},"s4XuR","node",[54,1560,154],{"class":60},[54,1562,1563],{"class":1557},"pt",[54,1565,154],{"class":60},[54,1567,1568],{"class":1557},"gridpt",[54,1570,1571],{"class":60},") {\n",[54,1573,1574,1577,1579,1582,1585,1588,1591,1594,1597,1600,1602],{"class":56,"line":206},[54,1575,1576],{"class":60},"        pt.y ",[54,1578,65],{"class":64},[54,1580,1581],{"class":60}," Math.",[54,1583,1584],{"class":87},"round",[54,1586,1587],{"class":60},"(pt.y ",[54,1589,1590],{"class":64},"\u002F",[54,1592,1593],{"class":68}," 100",[54,1595,1596],{"class":60},") ",[54,1598,1599],{"class":64},"*",[54,1601,1593],{"class":68},[54,1603,72],{"class":60},[54,1605,1606,1609],{"class":56,"line":212},[54,1607,1608],{"class":64},"        return",[54,1610,1611],{"class":60}," pt;\n",[54,1613,1614],{"class":56,"line":382},[54,1615,1616],{"class":60},"      }\n",[54,1618,1619],{"class":56,"line":399},[54,1620,1265],{"class":60},[54,1622,1623,1625,1627,1629,1631,1633],{"class":56,"line":404},[54,1624,104],{"class":87},[54,1626,107],{"class":60},[54,1628,110],{"class":94},[54,1630,113],{"class":60},[54,1632,116],{"class":94},[54,1634,119],{"class":60},[54,1636,1637,1639,1641,1643],{"class":56,"line":591},[54,1638,104],{"class":87},[54,1640,127],{"class":60},[54,1642,130],{"class":68},[54,1644,133],{"class":60},[54,1646,1647,1649,1651,1653,1655,1657,1659,1661],{"class":56,"line":787},[54,1648,139],{"class":64},[54,1650,142],{"class":60},[54,1652,145],{"class":87},[54,1654,148],{"class":60},[54,1656,151],{"class":94},[54,1658,154],{"class":60},[54,1660,157],{"class":94},[54,1662,160],{"class":60},[54,1664,1665],{"class":56,"line":1128},[54,1666,166],{"class":60},[54,1668,1669,1671,1673,1675],{"class":56,"line":1137},[54,1670,172],{"class":64},[54,1672,175],{"class":60},[54,1674,65],{"class":64},[54,1676,180],{"class":60},[54,1678,1679,1681,1683],{"class":56,"line":1142},[54,1680,186],{"class":60},[54,1682,189],{"class":94},[54,1684,203],{"class":60},[54,1686,1688],{"class":56,"line":1687},20,[54,1689,209],{"class":60},[54,1691,1693,1695,1697,1699,1701,1703],{"class":56,"line":1692},21,[54,1694,215],{"class":60},[54,1696,65],{"class":64},[54,1698,220],{"class":64},[54,1700,142],{"class":60},[54,1702,225],{"class":87},[54,1704,228],{"class":60},[15,1706,1707],{},[232,1708],{"alt":50,"src":1709},"\u002Fimages\u002Fd-note-ren\u002Fgojs-grid-04-barh.png",[15,1711,1712,1713,1715,1716,1719],{},"这个例子同时演示了用 ",[19,1714,260],{}," 限制节点可拖到的位置：",[19,1717,1718],{},"Part.location.y"," 被限制为 100 的倍数，正好对应绿色条填充的那些行。",[15,1721,1722],{},"同时使用半透明的垂直条和水平条，可以得到桌布效果：",[45,1724,1726],{"className":47,"code":1725,"language":49,"meta":50,"style":50},"diagram.grid =\n  $(go.Panel, \"Grid\",\n    { gridCellSize: new go.Size(100, 100) },\n    $(go.Shape, \"BarV\", { fill: \"rgba(255,0,0,0.1)\", width: 50 }),\n    $(go.Shape, \"BarH\", { fill: \"rgba(255,0,0,0.1)\", height: 50 })\n  );\ndiagram.toolManager.draggingTool.isGridSnapEnabled = true;\ndiagram.nodeTemplate =\n  $(go.Node, \"Auto\",\n    { width: 50, height: 50 },\n    $(go.Shape, \"Rectangle\", { fill: \"lightgray\" }),\n    $(go.TextBlock, { margin: 5 },\n      new go.Binding(\"text\", \"key\"))\n  );\nvar nodeDataArray = [\n  { key: \"Alpha\" }\n];\ndiagram.model = new go.GraphLinksModel(nodeDataArray);\n",[19,1727,1728,1734,1744,1765,1786,1804,1808,1818,1824,1834,1847,1861,1871,1889,1893,1903,1911,1915],{"__ignoreMap":50},[54,1729,1730,1732],{"class":56,"line":57},[54,1731,845],{"class":60},[54,1733,81],{"class":64},[54,1735,1736,1738,1740,1742],{"class":56,"line":75},[54,1737,88],{"class":87},[54,1739,948],{"class":60},[54,1741,951],{"class":94},[54,1743,98],{"class":60},[54,1745,1746,1748,1750,1752,1754,1756,1759,1761,1763],{"class":56,"line":84},[54,1747,862],{"class":60},[54,1749,865],{"class":64},[54,1751,142],{"class":60},[54,1753,455],{"class":87},[54,1755,148],{"class":60},[54,1757,1758],{"class":68},"100",[54,1760,154],{"class":60},[54,1762,1758],{"class":68},[54,1764,881],{"class":60},[54,1766,1767,1769,1771,1774,1776,1779,1782,1784],{"class":56,"line":101},[54,1768,104],{"class":87},[54,1770,107],{"class":60},[54,1772,1773],{"class":94},"\"BarV\"",[54,1775,113],{"class":60},[54,1777,1778],{"class":94},"\"rgba(255,0,0,0.1)\"",[54,1780,1781],{"class":60},", width: ",[54,1783,1486],{"class":68},[54,1785,119],{"class":60},[54,1787,1788,1790,1792,1794,1796,1798,1800,1802],{"class":56,"line":122},[54,1789,104],{"class":87},[54,1791,107],{"class":60},[54,1793,1501],{"class":94},[54,1795,113],{"class":60},[54,1797,1778],{"class":94},[54,1799,1513],{"class":60},[54,1801,1486],{"class":68},[54,1803,915],{"class":60},[54,1805,1806],{"class":56,"line":136},[54,1807,166],{"class":60},[54,1809,1810,1812,1814,1816],{"class":56,"line":163},[54,1811,281],{"class":60},[54,1813,65],{"class":64},[54,1815,69],{"class":68},[54,1817,72],{"class":60},[54,1819,1820,1822],{"class":56,"line":169},[54,1821,78],{"class":60},[54,1823,81],{"class":64},[54,1825,1826,1828,1830,1832],{"class":56,"line":183},[54,1827,88],{"class":87},[54,1829,91],{"class":60},[54,1831,95],{"class":94},[54,1833,98],{"class":60},[54,1835,1836,1839,1841,1843,1845],{"class":56,"line":206},[54,1837,1838],{"class":60},"    { width: ",[54,1840,1486],{"class":68},[54,1842,1513],{"class":60},[54,1844,1486],{"class":68},[54,1846,133],{"class":60},[54,1848,1849,1851,1853,1855,1857,1859],{"class":56,"line":212},[54,1850,104],{"class":87},[54,1852,107],{"class":60},[54,1854,110],{"class":94},[54,1856,113],{"class":60},[54,1858,116],{"class":94},[54,1860,119],{"class":60},[54,1862,1863,1865,1867,1869],{"class":56,"line":382},[54,1864,104],{"class":87},[54,1866,127],{"class":60},[54,1868,130],{"class":68},[54,1870,133],{"class":60},[54,1872,1873,1875,1877,1879,1881,1883,1885,1887],{"class":56,"line":399},[54,1874,139],{"class":64},[54,1876,142],{"class":60},[54,1878,145],{"class":87},[54,1880,148],{"class":60},[54,1882,151],{"class":94},[54,1884,154],{"class":60},[54,1886,157],{"class":94},[54,1888,160],{"class":60},[54,1890,1891],{"class":56,"line":404},[54,1892,166],{"class":60},[54,1894,1895,1897,1899,1901],{"class":56,"line":591},[54,1896,172],{"class":64},[54,1898,175],{"class":60},[54,1900,65],{"class":64},[54,1902,180],{"class":60},[54,1904,1905,1907,1909],{"class":56,"line":787},[54,1906,186],{"class":60},[54,1908,189],{"class":94},[54,1910,203],{"class":60},[54,1912,1913],{"class":56,"line":1128},[54,1914,209],{"class":60},[54,1916,1917,1919,1921,1923,1925,1927],{"class":56,"line":1137},[54,1918,215],{"class":60},[54,1920,65],{"class":64},[54,1922,220],{"class":64},[54,1924,142],{"class":60},[54,1926,225],{"class":87},[54,1928,228],{"class":60},[15,1930,1931],{},[232,1932],{"alt":50,"src":1933},"\u002Fimages\u002Fd-note-ren\u002Fgojs-grid-05-tablecloth.png",[15,1935,1936,1937,1940],{},"这里通过 ",[19,1938,1939],{},"DraggingTool.isGridSnapEnabled = true"," 限制了所有节点的拖动位置。",[35,1942,1944],{"id":1943},"在节点中使用-grid-面板","在节点中使用 Grid 面板",[15,1946,1947],{},"把 Grid 面板当作 Node 里的普通数据绑定元素：",[45,1949,1951],{"className":47,"code":1950,"language":49,"meta":50,"style":50},"diagram.nodeTemplate =\n  $(go.Node, \"Auto\",\n    { resizable: true, resizeObjectName: \"GRID\" },\n    $(go.Shape, \"Rectangle\", { fill: \"transparent\" }),\n    $(go.Panel, \"Grid\",\n      { name: \"GRID\", desiredSize: new go.Size(100, 100), gridCellSize: new go.Size(20, 20) },\n      new go.Binding(\"desiredSize\", \"size\", go.Size.parse).makeTwoWay(go.Size.stringify),\n      new go.Binding(\"gridCellSize\", \"cell\", go.Size.parse).makeTwoWay(go.Size.stringify),\n      $(go.Shape, \"LineV\",\n        new go.Binding(\"stroke\")),\n      $(go.Shape, \"LineH\",\n        new go.Binding(\"stroke\"))\n    ));\ndiagram.model = new go.GraphLinksModel([\n  { key: \"Alpha\", cell: \"25 25\", stroke: \"lightgreen\" },\n  { key: \"Beta\", size: \"150 75\", cell: \"15 30\" }\n]);\n",[19,1952,1953,1959,1969,1982,1997,2007,2050,2077,2101,2112,2129,2139,2153,2158,2173,2192,2211],{"__ignoreMap":50},[54,1954,1955,1957],{"class":56,"line":57},[54,1956,78],{"class":60},[54,1958,81],{"class":64},[54,1960,1961,1963,1965,1967],{"class":56,"line":75},[54,1962,88],{"class":87},[54,1964,91],{"class":60},[54,1966,95],{"class":94},[54,1968,98],{"class":60},[54,1970,1971,1973,1975,1978,1980],{"class":56,"line":84},[54,1972,319],{"class":60},[54,1974,251],{"class":68},[54,1976,1977],{"class":60},", resizeObjectName: ",[54,1979,1202],{"class":94},[54,1981,133],{"class":60},[54,1983,1984,1986,1988,1990,1992,1995],{"class":56,"line":101},[54,1985,104],{"class":87},[54,1987,107],{"class":60},[54,1989,110],{"class":94},[54,1991,113],{"class":60},[54,1993,1994],{"class":94},"\"transparent\"",[54,1996,119],{"class":60},[54,1998,1999,2001,2003,2005],{"class":56,"line":122},[54,2000,104],{"class":87},[54,2002,948],{"class":60},[54,2004,951],{"class":94},[54,2006,98],{"class":60},[54,2008,2009,2012,2014,2017,2019,2021,2023,2025,2027,2029,2031,2034,2036,2038,2040,2042,2044,2046,2048],{"class":56,"line":136},[54,2010,2011],{"class":60},"      { name: ",[54,2013,1202],{"class":94},[54,2015,2016],{"class":60},", desiredSize: ",[54,2018,865],{"class":64},[54,2020,142],{"class":60},[54,2022,455],{"class":87},[54,2024,148],{"class":60},[54,2026,1758],{"class":68},[54,2028,154],{"class":60},[54,2030,1758],{"class":68},[54,2032,2033],{"class":60},"), gridCellSize: ",[54,2035,865],{"class":64},[54,2037,142],{"class":60},[54,2039,455],{"class":87},[54,2041,148],{"class":60},[54,2043,465],{"class":68},[54,2045,154],{"class":60},[54,2047,465],{"class":68},[54,2049,881],{"class":60},[54,2051,2052,2054,2056,2058,2060,2063,2065,2068,2071,2074],{"class":56,"line":163},[54,2053,139],{"class":64},[54,2055,142],{"class":60},[54,2057,145],{"class":87},[54,2059,148],{"class":60},[54,2061,2062],{"class":94},"\"desiredSize\"",[54,2064,154],{"class":60},[54,2066,2067],{"class":94},"\"size\"",[54,2069,2070],{"class":60},", go.Size.parse).",[54,2072,2073],{"class":87},"makeTwoWay",[54,2075,2076],{"class":60},"(go.Size.stringify),\n",[54,2078,2079,2081,2083,2085,2087,2090,2092,2095,2097,2099],{"class":56,"line":169},[54,2080,139],{"class":64},[54,2082,142],{"class":60},[54,2084,145],{"class":87},[54,2086,148],{"class":60},[54,2088,2089],{"class":94},"\"gridCellSize\"",[54,2091,154],{"class":60},[54,2093,2094],{"class":94},"\"cell\"",[54,2096,2070],{"class":60},[54,2098,2073],{"class":87},[54,2100,2076],{"class":60},[54,2102,2103,2106,2108,2110],{"class":56,"line":183},[54,2104,2105],{"class":87},"      $",[54,2107,107],{"class":60},[54,2109,907],{"class":94},[54,2111,98],{"class":60},[54,2113,2114,2117,2119,2121,2123,2126],{"class":56,"line":206},[54,2115,2116],{"class":64},"        new",[54,2118,142],{"class":60},[54,2120,145],{"class":87},[54,2122,148],{"class":60},[54,2124,2125],{"class":94},"\"stroke\"",[54,2127,2128],{"class":60},")),\n",[54,2130,2131,2133,2135,2137],{"class":56,"line":212},[54,2132,2105],{"class":87},[54,2134,107],{"class":60},[54,2136,890],{"class":94},[54,2138,98],{"class":60},[54,2140,2141,2143,2145,2147,2149,2151],{"class":56,"line":382},[54,2142,2116],{"class":64},[54,2144,142],{"class":60},[54,2146,145],{"class":87},[54,2148,148],{"class":60},[54,2150,2125],{"class":94},[54,2152,160],{"class":60},[54,2154,2155],{"class":56,"line":399},[54,2156,2157],{"class":60},"    ));\n",[54,2159,2160,2162,2164,2166,2168,2170],{"class":56,"line":404},[54,2161,215],{"class":60},[54,2163,65],{"class":64},[54,2165,220],{"class":64},[54,2167,142],{"class":60},[54,2169,225],{"class":87},[54,2171,2172],{"class":60},"([\n",[54,2174,2175,2177,2179,2182,2185,2188,2190],{"class":56,"line":591},[54,2176,186],{"class":60},[54,2178,189],{"class":94},[54,2180,2181],{"class":60},", cell: ",[54,2183,2184],{"class":94},"\"25 25\"",[54,2186,2187],{"class":60},", stroke: ",[54,2189,1002],{"class":94},[54,2191,133],{"class":60},[54,2193,2194,2196,2198,2201,2204,2206,2209],{"class":56,"line":787},[54,2195,186],{"class":60},[54,2197,195],{"class":94},[54,2199,2200],{"class":60},", size: ",[54,2202,2203],{"class":94},"\"150 75\"",[54,2205,2181],{"class":60},[54,2207,2208],{"class":94},"\"15 30\"",[54,2210,203],{"class":60},[54,2212,2213],{"class":56,"line":1128},[54,2214,2215],{"class":60},"]);\n",[15,2217,2218],{},[232,2219],{"alt":50,"src":2220},"\u002Fimages\u002Fd-note-ren\u002Fgojs-grid-06-node-panel.png",[35,2222,2223],{"id":2223},"其他注意事项",[2225,2226,2227,2235,2242],"ul",{},[2228,2229,2230,2231,2234],"li",{},"如果需要让网格面板可被选中，",[19,2232,2233],{},"background"," 应为非空。",[2228,2236,2237,2238,2241],{},"不能设置或绑定网格面板的 ",[19,2239,2240],{},"Panel.itemArray","。",[2228,2243,2244],{},"网格面板中形状上的事件会被忽略，形状也不能缩放或旋转。",[2246,2247,2248],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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 .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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":50,"searchDepth":84,"depth":84,"links":2250},[2251,2252,2253,2254,2255,2256],{"id":37,"depth":75,"text":37},{"id":237,"depth":75,"text":237},{"id":419,"depth":75,"text":419},{"id":802,"depth":75,"text":802},{"id":1943,"depth":75,"text":1944},{"id":2223,"depth":75,"text":2223},"visualization","2024-07-01","Diagram.grid 默认网格与网格捕捉、单元格尺寸定制，用 LineH\u002FLineV\u002FBarH\u002FBarV 自定义网格样式，以及把 Grid 面板当作节点元素使用。",false,"md",{},true,"\u002Fdocs\u002Fgojs-grid-panel",{"title":5,"description":2259},"https:\u002F\u002Fgojs.net\u002Flatest\u002Flearn\u002Fgrids","docs\u002Fgojs-grid-panel",[2269,2270,2271],"gojs","javascript","notes","yJpH36Shr5AMVfnIKEIP98NLz6wiIVlmCC3JT2JlBHE",[2274,2283,2289,2294,2299,2308,2319,2326,2332,2341,2348,2357,2362,2369,2374,2380,2386,2393,2399,2406,2415,2417,2423,2429,2434,2439,2444,2449],{"path":2275,"title":2276,"description":2277,"date":2278,"category":2279,"tags":2280},"\u002Fdocs\u002Fbabel-basics","Babel 转译基础与构建集成","Babel 7 的 CLI、preset、plugin、目标环境以及 Gulp、Webpack 和 JSX 转译配置摘录。","2026-09-09","toolchain",[2270,2281,2282,2271],"es6","webpack",{"path":2284,"title":2285,"description":2286,"date":2278,"category":2287,"tags":2288},"\u002Fdocs\u002Fes6-arrays-objects","ES6 数组与对象扩展","展开运算符、Array.from、Object.assign、属性描述符与图片预加载示例。","fundamentals",[2270,2281,2271],{"path":2290,"title":2291,"description":2292,"date":2278,"category":2287,"tags":2293},"\u002Fdocs\u002Fes6-basics","ES6 基础：作用域、解构与模板字符串","从课程示例整理 let、const、暂时性死区、全局对象、数组与对象解构及模板字符串。",[2270,2281,2271],{"path":2295,"title":2296,"description":2297,"date":2278,"category":2287,"tags":2298},"\u002Fdocs\u002Fjs-promise-async","Promise、Generator 与 async\u002Fawait","从回调到 Promise 链、组合方法、Generator 执行与 async 错误处理的课程示例整理。",[2270,2281,2271],{"path":2300,"title":2301,"description":2302,"date":2303,"category":2279,"tags":2304},"\u002Fdocs\u002Flinux-commands-cheatsheet","Linux 常用命令与权限管理速查","cp\u002Fmv\u002Frm、目录导航、查找、压缩、网络等基础命令速查，以及 chmod\u002Fchown 的数字与符号写法、常用组合和 WSL 下的坑。","2026-05-28",[2305,2306,2307],"linux","wsl2","cheatsheet",{"path":2309,"title":2310,"description":2311,"date":2312,"category":2313,"tags":2314},"\u002Fdocs\u002Ffrontend-coding-standards","前端团队编码规范","HTML \u002F CSS \u002F JavaScript 三端统一的团队编码约定，含缩进、命名、语法与禁用项，可直接作为 Code Review 依据。","2025-12-17","standards",[2315,2316,2270,2281,2317,2318],"html","css","best-practice","guide",{"path":2320,"title":2321,"description":2322,"date":2323,"category":2279,"tags":2324},"\u002Fdocs\u002Fwindows-mklink","Windows mklink 符号链接用法","mklink 各参数区别与实用场景：目录联接、符号链接与硬链接的选择。","2024-12-18",[2325,2307],"windows",{"path":2327,"title":2328,"description":2329,"date":2330,"category":2279,"tags":2331},"\u002Fdocs\u002Frandom-color-utils","JS 随机颜色生成方法","几种生成随机 RGB \u002F HEX 颜色的实现方式与各自适用场景。","2024-12-11",[2270,2307],{"path":2333,"title":2334,"description":2335,"date":2336,"category":2257,"tags":2337},"\u002Fdocs\u002Fcanvas-vs-svg","Canvas 与 SVG 绘图方案选型","对比 Canvas 与 SVG 两种绘图方案的优缺点与适用场景，给出选型判断依据。","2024-12-09",[2338,2339,2340,2317],"canvas","svg","performance",{"path":2342,"title":2343,"description":2344,"date":2345,"category":2279,"tags":2346},"\u002Fdocs\u002Ffree-commercial-fonts","免费可商用字体整理","整理思源黑体、思源宋体等可商用中文字体，规避字体版权风险。","2024-11-03",[2347,2316,2271],"font",{"path":2349,"title":2350,"description":2351,"date":2345,"category":2352,"tags":2353},"\u002Fdocs\u002Finterview-browser-network","浏览器与网络考点","从输入 URL 到页面呈现的完整链路，涵盖渲染流程、回流重绘、HTTP 报文与状态码、跨域同源策略与常见攻击方式。","interview",[2354,2355,2356,2340,2271],"browser","http","network",{"path":2358,"title":2359,"description":2360,"date":2345,"category":2352,"tags":2361},"\u002Fdocs\u002Finterview-css-layout","CSS 与布局考点","em 与 rem 的区别、移动端三种适配方案对比、viewport 标准设置与 REM 布局的媒体查询实现。",[2316,2315,2317,2271],{"path":2363,"title":2364,"description":2365,"date":2345,"category":2352,"tags":2366},"\u002Fdocs\u002Finterview-framework-tooling","框架与工程化考点","React diff 与 setState 机制、Redux 核心组成、Vue 常考清单，以及 Webpack、Vite、Git 的面试要点。",[2367,2270,2282,2368,2271],"vue","vite",{"path":2370,"title":2371,"description":2372,"date":2345,"category":2352,"tags":2373},"\u002Fdocs\u002Finterview-javascript-core","JavaScript 核心考点","数据类型、this 绑定、闭包、原型链、异步与数组方法，前端面试中 JS 部分的高频考点与代码示例。",[2270,2281,2271],{"path":2375,"title":2376,"description":2377,"date":2345,"category":2287,"tags":2378},"\u002Fdocs\u002Fjs-module-systems","JavaScript 模块化方案","梳理 CommonJS、AMD、ES Module 等模块化方案的差异与使用方式。",[2270,2379,2281,2271],"module-system",{"path":2381,"title":2382,"description":2383,"date":2345,"category":2287,"tags":2384},"\u002Fdocs\u002Fwebsocket-basics","WebSocket 基础","WebSocket 全双工通信协议的事件、方法与基本用法整理。",[2385,2356,2270,2271],"websocket",{"path":2387,"title":2388,"description":2389,"date":2390,"category":2279,"tags":2391},"\u002Fdocs\u002Fmarkdown-syntax","Markdown 语法速查","Markdown 标题、强调、列表、区块引用、代码、表格、转义与 Mermaid 图表语法整理。","2024-10-18",[2392,2307,2271],"markdown",{"path":2394,"title":2395,"description":2396,"date":2397,"category":2257,"tags":2398},"\u002Fdocs\u002Fgojs-getting-started","GoJS 入门实战","从引入方式、画布初始化到节点模板与数据绑定，一份可直接上手的 GoJS 流程图开发笔记。","2024-08-22",[2269,2270,2271],{"path":2400,"title":2401,"description":2402,"date":2403,"category":2257,"tags":2404},"\u002Fdocs\u002Fecharts-options-notes","ECharts 配置项速查","整理 ECharts 常用 option 配置：数据格式、坐标轴、图例与交互项的实际用法。","2024-08-09",[2405,2270,2307],"echarts",{"path":2407,"title":2408,"description":2409,"date":2410,"category":2279,"tags":2411},"\u002Fdocs\u002Fyarn-npm-install-errors","yarn \u002F npm 安装报错处理","yarn 引擎版本不兼容时的 ignore-engines 绕过、Windows 刷新 DNS 解析缓存、npm 缓存清理与校验。","2024-08-06",[2412,2413,2325,2414],"npm","nodejs","troubleshooting",{"path":2264,"title":5,"description":2259,"date":2258,"category":2257,"tags":2416},[2269,2270,2271],{"path":2418,"title":2419,"description":2420,"date":2421,"category":2287,"tags":2422},"\u002Fdocs\u002Fhttp-status-codes","HTTP 响应状态码详解","按 1xx 到 5xx 分类梳理 HTTP 状态码的含义与典型使用场景。","2024-06-27",[2355,2356,2307],{"path":2424,"title":2425,"description":2426,"date":2427,"category":2287,"tags":2428},"\u002Fdocs\u002Fes6-functions-classes","ES6 函数与 Class","默认参数、rest、箭头函数的 this、Class 方法、访问器、静态成员与继承。","2023-04-26",[2270,2281,2271],{"path":2430,"title":2431,"description":2432,"date":2427,"category":2279,"tags":2433},"\u002Fdocs\u002Fgulp-basics","Gulp 4 任务与文件流","Gulp 任务完成信号、串并行组合、文件流、资源处理、分阶段输出和文件监听。",[2270,2413,2271],{"path":2435,"title":2436,"description":2437,"date":2427,"category":2287,"tags":2438},"\u002Fdocs\u002Fjs-proxy-reflect","Proxy 与 Reflect 入门","通过属性读取和赋值示例理解 Proxy、Reflect、receiver 与拦截限制。",[2270,2281,2271],{"path":2440,"title":2441,"description":2442,"date":2427,"category":2279,"tags":2443},"\u002Fdocs\u002Fless-basics","Less 语法与编译笔记","变量、嵌套、混合、extend、导入、内置函数和递归生成列的课程示例。",[2316,2271,2307],{"path":2445,"title":2446,"description":2447,"date":2427,"category":2279,"tags":2448},"\u002Fdocs\u002Fwebpack-basics","Webpack 4 配置与开发服务器笔记","课程中的入口出口、loader、plugin、source map、开发代理以及 React 环境配置片段。",[2282,2270,2413,2271],{"path":2450,"title":2451,"description":2452,"date":2453,"category":2287,"tags":2454},"\u002Fdocs\u002Fhtml-basics","HTML 基础笔记","HTML 语法规范、常用标签、表格、表单、Canvas 入门与 JavaScript 输出方式速查。","2022-06-10",[2315,2271,2307],1789635934019]