[{"data":1,"prerenderedAt":632},["ShallowReactive",2],{"navigation_docs":3,"-guide-viewport":102,"-guide-viewport-surround":627},[4,82,87,92,97],{"title":5,"icon":6,"path":7,"stem":8,"children":9},"指南","i-lucide-list-tree","\u002Fguide","1.guide",[10,14,19,24,29,34,39,44,48,53,58,63,68,73,77],{"title":11,"path":7,"stem":12,"icon":13},"指南总览","1.guide\u002Findex","i-lucide-map",{"title":15,"path":16,"stem":17,"icon":18},"快速开始","\u002Fguide\u002Fquick-start","1.guide\u002F1.quick-start","i-lucide-rocket",{"title":20,"path":21,"stem":22,"icon":23},"键盘导航与可访问性","\u002Fguide\u002Fkeyboard","1.guide\u002F10.keyboard","i-lucide-keyboard",{"title":25,"path":26,"stem":27,"icon":28},"类型化 createTypedOkrTree","\u002Fguide\u002Ftyped","1.guide\u002F11.typed","i-lucide-type",{"title":30,"path":31,"stem":32,"icon":33},"Vue Devtools 面板","\u002Fguide\u002Fdevtools","1.guide\u002F12.devtools","i-lucide-wrench",{"title":35,"path":36,"stem":37,"icon":38},"需要注意的行为","\u002Fguide\u002Fbehavior","1.guide\u002F13.behavior","i-lucide-triangle-alert",{"title":40,"path":41,"stem":42,"icon":43},"仓库与本地开发","\u002Fguide\u002Frepo","1.guide\u002F14.repo","i-lucide-folder-git-2",{"title":45,"path":46,"stem":47},"Demo 总览（可交互）","\u002Fguide\u002Fdemos","1.guide\u002F2.demos",{"title":49,"path":50,"stem":51,"icon":52},"自定义节点内容","\u002Fguide\u002Fnode-content","1.guide\u002F3.node-content","i-lucide-layout-template",{"title":54,"path":55,"stem":56,"icon":57},"受控状态与方法","\u002Fguide\u002Fcontrolled","1.guide\u002F4.controlled","i-lucide-sliders-horizontal",{"title":59,"path":60,"stem":61,"icon":62},"复选框与拖拽","\u002Fguide\u002Finteraction","1.guide\u002F5.interaction","i-lucide-mouse-pointer-click",{"title":64,"path":65,"stem":66,"icon":67},"懒加载子节点","\u002Fguide\u002Flazy","1.guide\u002F6.lazy","i-lucide-layers",{"title":69,"path":70,"stem":71,"icon":72},"虚拟滚动 virtual","\u002Fguide\u002Fvirtual","1.guide\u002F7.virtual","i-lucide-scan",{"title":74,"path":75,"stem":76,"icon":72},"画布缩放 OkrTreeViewport","\u002Fguide\u002Fviewport","1.guide\u002F8.viewport",{"title":78,"path":79,"stem":80,"icon":81},"多树根对齐 OkrTreeGroup","\u002Fguide\u002Fgroup","1.guide\u002F9.group","i-lucide-network",{"title":83,"path":84,"stem":85,"icon":86},"主题与样式定制","\u002Ftheme","2.theme","i-lucide-palette",{"title":88,"path":89,"stem":90,"icon":91},"API","\u002Fapi","3.api","i-lucide-braces",{"title":93,"path":94,"stem":95,"icon":96},"与 vue-okr-tree 的差异（迁移说明）","\u002Fmigration","4.migration","i-lucide-arrow-right-left",{"title":98,"path":99,"stem":100,"icon":101},"更新日志","\u002Fchangelog","5.changelog","i-lucide-history",{"id":103,"title":74,"body":104,"description":620,"extension":621,"links":622,"meta":623,"navigation":624,"path":75,"seo":625,"stem":76,"__hash__":626},"docs\u002F1.guide\u002F8.viewport.md",{"type":105,"value":106,"toc":610},"minimark",[107,116,122,127,267,271,362,365,433,436,448,541,544,593,597],[108,109,110,111,115],"p",{},"大树在固定视口里放不下时，用 ",[112,113,114],"code",{},"\u003COkrTreeViewport>"," 包裹树即可获得缩放与平移能力——它只做外层变换，不侵入树本体，也不改变树的任何 API。",[117,118,119],"docs-demo",{},[120,121],"demo-viewport",{},[123,124,126],"h2",{"id":125},"props","Props",[128,129,130,146],"table",{},[131,132,133],"thead",{},[134,135,136,140,143],"tr",{},[137,138,139],"th",{},"prop",[137,141,142],{},"说明",[137,144,145],{},"默认值",[147,148,149,172,187,204,223,248],"tbody",{},[134,150,151,161,164],{},[152,153,154,157,158],"td",{},[112,155,156],{},"min-zoom"," \u002F ",[112,159,160],{},"max-zoom",[152,162,163],{},"缩放范围",[152,165,166,157,169],{},[112,167,168],{},"0.2",[112,170,171],{},"4",[134,173,174,179,182],{},[152,175,176],{},[112,177,178],{},"zoom-step",[152,180,181],{},"每次 zoomIn \u002F zoomOut \u002F 滚轮一格的缩放系数（乘除）",[152,183,184],{},[112,185,186],{},"1.2",[134,188,189,194,201],{},[152,190,191],{},[112,192,193],{},"zoom",[152,195,196,197,200],{},"受控缩放（",[112,198,199],{},"v-model:zoom","），未传时内部维护",[152,202,203],{},"—",[134,205,206,211,221],{},[152,207,208],{},[112,209,210],{},"offset",[152,212,213,214,217,218,200],{},"受控平移偏移 ",[112,215,216],{},"{ x, y }","（",[112,219,220],{},"v-model:offset",[152,222,203],{},[134,224,225,230,244],{},[152,226,227],{},[112,228,229],{},"wheel-behavior",[152,231,232,233,236,237,239,240,243],{},"滚轮行为：",[112,234,235],{},"ctrl-zoom","（默认，按住 Ctrl\u002F⌘ 才缩放，不劫持页面滚动）\u002F ",[112,238,193],{},"（始终缩放）\u002F ",[112,241,242],{},"scroll","（从不缩放）",[152,245,246],{},[112,247,235],{},[134,249,250,255,262],{},[152,251,252],{},[112,253,254],{},"toolbar",[152,256,257,258,261],{},"是否显示默认工具栏；传入 ",[112,259,260],{},"#toolbar"," 插槽时无需开启",[152,263,264],{},[112,265,266],{},"false",[123,268,270],{"id":269},"方法通过-ref-调用","方法（通过 ref 调用）",[128,272,273,282],{},[131,274,275],{},[134,276,277,280],{},[137,278,279],{},"方法",[137,281,142],{},[147,283,284,297,307,317,327,340,352],{},[134,285,286,294],{},[152,287,288,157,291],{},[112,289,290],{},"zoomIn()",[112,292,293],{},"zoomOut()",[152,295,296],{},"以视口中心为锚放大 \u002F 缩小（受 min\u002Fmax 钳制）",[134,298,299,304],{},[152,300,301],{},[112,302,303],{},"reset()",[152,305,306],{},"复位到缩放 1、偏移 0（双击画布同样触发）",[134,308,309,314],{},[152,310,311],{},[112,312,313],{},"fitToScreen(padding?)",[152,315,316],{},"适应窗口：内容完整可见并居中，默认四周留 20px",[134,318,319,324],{},[152,320,321],{},[112,322,323],{},"centerNode(key)",[152,325,326],{},"先展开目标节点的祖先，再把视口中心对准该节点",[134,328,329,334],{},[152,330,331],{},[112,332,333],{},"getZoom()",[152,335,336,337,339],{},"读当前缩放系数（受控模式下即 ",[112,338,199],{}," 的值）",[134,341,342,347],{},[152,343,344],{},[112,345,346],{},"getOffset()",[152,348,349,350],{},"读当前平移偏移 ",[112,351,216],{},[134,353,354,359],{},[152,355,356],{},[112,357,358],{},"exportImage(options?)",[152,360,361],{},"导出画布内容为 PNG \u002F SVG 并触发下载，返回 dataURL",[123,363,364],{"id":364},"交互契约",[366,367,368,382,407,420,426],"ul",{},[369,370,371,375,376,378,379,381],"li",{},[372,373,374],"strong",{},"滚轮缩放以指针为中心","：缩放前后指针下的内容点保持不变，所以放大哪里就看哪里；",[112,377,229],{}," 三档控制是否劫持页面滚动（默认 ",[112,380,235],{},"，按住 Ctrl \u002F ⌘ 才缩放）。",[369,383,384,387,388,391,392,395,396,402,403,406],{},[372,385,386],{},"按住拖拽平移","：位移超过 ",[372,389,390],{},"3px"," 才判定为平移（",[112,393,394],{},"PAN_THRESHOLD","），单击节点不会被误当成拖动；并且平移结束后",[372,397,398,399],{},"吞掉随后的一次 ",[112,400,401],{},"click","，避免拖完顺手触发了 ",[112,404,405],{},"node-click","。",[369,408,409,412,413,415,416,419],{},[372,410,411],{},"双击复位","：等价于 ",[112,414,303],{},"；工具栏区域内的双击不触发复位（已 ",[112,417,418],{},"stop","）。",[369,421,422,425],{},[372,423,424],{},"触控","：双指捏合缩放，单指拖动平移（走 Pointer Events，鼠标与触摸同一套逻辑）。",[369,427,428,429,432],{},"只监听 ",[112,430,431],{},"button === 0"," 的鼠标按下，右键拖拽不会平移。",[123,434,435],{"id":435},"工具栏",[108,437,438,439,441,442,444,445,447],{},"传入 ",[112,440,260],{}," 插槽时不需要开 ",[112,443,254],{}," prop；不传插槽、只开 ",[112,446,254],{}," 则渲染内置工具栏。插槽作用域：",[128,449,450,462],{},[131,451,452],{},[134,453,454,457,460],{},[137,455,456],{},"参数",[137,458,459],{},"类型",[137,461,142],{},[147,463,464,478,495,510,523],{},[134,465,466,470,475],{},[152,467,468],{},[112,469,193],{},[152,471,472],{},[112,473,474],{},"number",[152,476,477],{},"当前缩放系数（响应式）",[134,479,480,484,489],{},[152,481,482],{},[112,483,290],{},[152,485,486],{},[112,487,488],{},"() => void",[152,490,491,492,494],{},"按 ",[112,493,178],{}," 放大",[134,496,497,501,505],{},[152,498,499],{},[112,500,293],{},[152,502,503],{},[112,504,488],{},[152,506,491,507,509],{},[112,508,178],{}," 缩小",[134,511,512,516,520],{},[152,513,514],{},[112,515,303],{},[152,517,518],{},[112,519,488],{},[152,521,522],{},"复位缩放与偏移",[134,524,525,530,534],{},[152,526,527],{},[112,528,529],{},"fit()",[152,531,532],{},[112,533,488],{},[152,535,536,537,540],{},"适应窗口（即 ",[112,538,539],{},"fitToScreen()","）",[123,542,543],{"id":543},"导出",[108,545,546,549,550,557,558,561,562,565,566,569,570,573,574,577,578,217,581,584,585,588,589,592],{},[112,547,548],{},"exportImage"," 基于 ",[551,552,556],"a",{"href":553,"rel":554},"https:\u002F\u002Fgithub.com\u002Fbubkoo\u002Fhtml-to-image",[555],"nofollow","html-to-image","：以可选 peerDependency 声明（",[112,559,560],{},"^1.11.0","，不进 ",[112,563,564],{},"dependencies","），用到导出能力时自行 ",[112,567,568],{},"npm i html-to-image","；默认按需 ",[112,571,572],{},"import('html-to-image')","，未安装时抛出带安装指引的错误。在打包器下动态导入裸包名不可靠时，可通过 ",[112,575,576],{},"options.toPng \u002F toSvg"," 直接传入渲染函数（签名与 html-to-image 一致）。选项：",[112,579,580],{},"type",[112,582,583],{},"'png' | 'svg'","，默认 png）、",[112,586,587],{},"scale","（像素密度，默认 2）、",[112,590,591],{},"background","（背景色）。",[123,594,596],{"id":595},"与-okrtreegroup-组合","与 OkrTreeGroup 组合",[108,598,599,602,603,605,606,609],{},[112,600,601],{},"\u003COkrTreeGroup>"," 可以放在 ",[112,604,114],{}," 内组合使用；树的方法 ",[112,607,608],{},"getNodeEl(key)"," 返回节点 DOM 元素，供外部定位。",{"title":611,"searchDepth":612,"depth":612,"links":613},"",2,[614,615,616,617,618,619],{"id":125,"depth":612,"text":126},{"id":269,"depth":612,"text":270},{"id":364,"depth":612,"text":364},{"id":435,"depth":612,"text":435},{"id":543,"depth":612,"text":543},{"id":595,"depth":612,"text":596},"OkrTreeViewport 的 props、ref 方法、滚轮\u002F拖拽\u002F触控交互契约与 PNG \u002F SVG 导出","md",null,{},{"icon":72},{"title":74,"description":620},"M0_CHwFyRHzg6gPv3mLAsB9scuY03XYkhClbMRN6REU",[628,630],{"title":69,"path":70,"stem":71,"description":629,"icon":72,"children":-1},"virtual 虚拟滚动的行为约定：窗口化口径、几何等价、尺寸要求与定位漫游",{"title":78,"path":79,"stem":80,"description":631,"icon":81,"children":-1},"OkrTreeGroup 多树根对齐的测量机制与自动重测触发点",1793606851536]