3 lines
1.5 KiB
JavaScript
3 lines
1.5 KiB
JavaScript
import{LoadingIcon as E,decodeData as P}from"@vuepress/helper/client";import{useEventListener as R,useDebounceFn as U}from"@vueuse/core";import{defineComponent as b,toRefs as D,shallowRef as f,ref as x,h as r,onMounted as C,watch as T,nextTick as V,onUnmounted as L}from"vue";import{onContentUpdated as q}from"vuepress/client";import"../styles/markmap.css";var z=b({name:"MarkMap",props:{content:{type:String,required:!0}},setup(o){const{content:v}=D(o),s=f(),n=f(),i=x(!1);let e=null;R("resize",U(()=>{e?.fit()},100));const m=()=>{e?.destroy(),e=null},l=async()=>{if(__VUEPRESS_SSR__)return;const[{Transformer:a},p,{Toolbar:w}]=await Promise.all([import("markmap-lib"),import("markmap-view"),import("markmap-toolbar")]),{Markmap:S,deriveOptions:_,loadJS:g,loadCSS:k}=p,u=new a,{frontmatter:y,features:h,root:M}=u.transform(P(o.content)),{styles:c,scripts:d}=u.getUsedAssets(h);await Promise.all([d?g(d,{getMarkmap:()=>p}):Promise.resolve(),c?k(c):Promise.resolve()]),e=S.create(n.value,_({maxWidth:240,...y?.markmap}));const{el:t}=w.create(e);await e.setData(M),await e.fit(),t.style.position="absolute",t.style.bottom="0.5rem",t.style.right="0.5rem",s.value.append(t)};return q(async a=>{a==="mounted"&&(await l(),i.value=!0)}),C(()=>{__VUEPRESS_DEV__&&T(v,async()=>{m(),await V(),await l()},{flush:"post"})}),L(m),()=>r("div",{class:"markmap-wrapper",ref:s},[r("svg",{ref:n,class:"markmap-svg"}),i.value?null:r(E,{class:"markmap-loading",height:360})])}});export{z as default};
|
|
//# sourceMappingURL=MarkMap.js.map
|