ant-design-x-vue-next/lib/mermaid/Mermaid.js

Ant Design X for Vue — community continuation aligned with @ant-design/x

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),ee=require("ant-design-vue"),i=require("../chunks/module-chunk.js"),te=require("../_util/pick-attrs.js");require("../_util/warning.js");const ae=require("../_util/hooks/use-x-component-config.js"),le=require("../actions/index.js");require("../code-highlighter/index.js");const ne=require("../locale/useLocale.js");require("../x-provider/index.js");const oe=require("./style/index.js"),se=require("../x-provider/hooks/use-x-provider-context.js"),re=require("../code-highlighter/CodeHighlighter.js");function ue(w){return typeof w=="function"||Object.prototype.toString.call(w)==="[object Object]"&&!t.isVNode(w)}const ie=t.defineComponent({name:"AXMermaid",__name:"Mermaid",props:{children:null,header:null,prefixCls:null,rootClassName:null,className:null,class:null,style:null,highlightProps:null,config:null,actions:{default:()=>({})},classNames:{default:()=>({})},styles:{default:()=>({})},onRenderTypeChange:{type:Function}},emits:["renderTypeChange"],setup(w,{expose:S,emit:q}){const[h]=ne.default("Mermaid"),a=w,x=t.useSlots(),R=q;let $=0;const k=t.ref(null),c=t.ref(null),u=t.ref("image"),d=t.ref(1),m=t.ref({x:0,y:0}),p=t.ref(!1),b=t.ref({x:0,y:0}),O=`mermaid-${$++}`,D=t.computed(()=>te.default(a,{attr:!0,aria:!0,data:!0})),{getPrefixCls:P,direction:j}=se.default(),v=t.computed(()=>P("mermaid",a.prefixCls)),s=ae.default("mermaid"),[L,E,z]=oe.default(v),N=t.computed(()=>{var l;if(typeof a.children=="string")return a.children;const e=(l=x.default)==null?void 0:l.call(x);return e?(Array.isArray(e)?e:[e]).map(o=>{if(typeof o=="string"||typeof o=="number")return String(o);if(o&&typeof o=="object"&&"children"in o){const r=o.children;if(typeof r=="string"||typeof r=="number")return String(r)}return""}).join(""):""}),X=t.computed(()=>{var e;return i.classnames(v.value,s.value.className,a.className,a.class,a.rootClassName,(e=s.value.classNames)==null?void 0:e.root,a.classNames.root,E.value,z,{[`${v.value}-rtl`]:j.value==="rtl"})}),H=t.computed(()=>{var e;return{...a.style,...typeof s.value.style=="object"?s.value.style:{},...typeof((e=s.value.styles)==null?void 0:e.root)=="object"?s.value.styles.root:{},...a.styles.root}});t.watch(()=>a.config,e=>{i.mermaid_default.initialize({startOnLoad:!1,securityLevel:"strict",theme:"default",fontFamily:"monospace",...e||{}})},{immediate:!0,deep:!0});const Z=i.useThrottleFn(async()=>{const e=N.value;if(!(!e||!c.value||u.value==="code"))try{if(!await i.mermaid_default.parse(e,{suppressErrors:!0}))throw new Error("Invalid Mermaid syntax");const{svg:l}=await i.mermaid_default.render(`${O}-${e.length}`,e);c.value&&(c.value.innerHTML=l,V())}catch{}},100),V=()=>{var n;const e=(n=c.value)==null?void 0:n.querySelector("svg");!e||u.value!=="image"||(e.style.transform=`scale(${d.value}) translate(${m.value.x}px, ${m.value.y}px)`,e.style.transformOrigin="center",e.style.transition=p.value?"none":"transform 0.1s ease-out",e.style.cursor=p.value?"grabbing":"grab")};t.watch([N,u,()=>a.config],async()=>{if(await t.nextTick(),u.value==="code"&&c.value){c.value.innerHTML="";return}await Z()},{immediate:!0,deep:!0}),t.watch([d,m,u,p],()=>{V()});let T=0;const _=e=>{const{enableZoom:n=!0}=a.actions||{};if(!n||u.value!=="image")return;e.preventDefault(),e.stopPropagation();const l=Date.now();if(l-T<16)return;T=l;const o=e.deltaY>0?-.1:.1;d.value=Math.max(.5,Math.min(3,d.value+o))};t.onMounted(()=>{var e;(e=c.value)==null||e.addEventListener("wheel",_,{passive:!1})}),t.onBeforeUnmount(()=>{var e;(e=c.value)==null||e.removeEventListener("wheel",_)}),t.watch(u,async()=>{var e,n;await t.nextTick(),(e=c.value)==null||e.removeEventListener("wheel",_),(n=c.value)==null||n.addEventListener("wheel",_,{passive:!1})});const A=e=>{u.value==="image"&&(e.preventDefault(),p.value=!0,b.value={x:e.clientX,y:e.clientY})},Y=e=>{if(!p.value||u.value!=="image")return;e.preventDefault();const n=e.clientX-b.value.x,l=e.clientY-b.value.y;m.value={x:m.value.x+n/d.value,y:m.value.y+l/d.value},b.value={x:e.clientX,y:e.clientY}},I=()=>{p.value=!1},U=()=>{d.value=1,m.value={x:0,y:0}},F=async()=>{var C;const e=(C=c.value)==null?void 0:C.querySelector("svg");if(!e)return;const n=new XMLSerializer().serializeToString(e),l=document.createElement("canvas"),o=l.getContext("2d");if(!o)return;const{width:r,height:g}=e.getBoundingClientRect(),f=window.devicePixelRatio||1;l.width=r*f,l.height=g*f,l.style.width=`${r}px`,l.style.height=`${g}px`,o.scale(f,f);const y=new Image;y.onload=()=>{o.drawImage(y,0,0,r,g);const M=document.createElement("a");M.download=`${Date.now()}.png`,M.href=l.toDataURL("image/png",1),M.click()},y.src=`data:image/svg+xml;charset=utf-8,${encodeURIComponent(n)}`},B=()=>{d.value=Math.min(d.value+.2,3)},W=()=>{d.value=Math.max(d.value-.2,.5)},G=async()=>{try{await navigator.clipboard.writeText(N.value)}catch{}},J=e=>{var l;const n=e;u.value=n,(l=a.onRenderTypeChange)==null||l.call(a,n),R("renderTypeChange",n)},K=()=>{if(x.header)return x.header();if(a.header!==void 0)return typeof a.header=="function"?a.header():a.header},Q=t.computed(()=>{const{enableZoom:e=!0,enableDownload:n=!0,enableCopy:l=!0,customActions:o=[]}=a.actions||{},r=[];return u.value==="image"?(e&&r.push({key:"zoomIn",icon:t.createVNode(i.ZoomInOutlined,null,null),label:h.value.zoomIn,onItemClick:B},{key:"zoomOut",icon:t.createVNode(i.ZoomOutOutlined,null,null),label:h.value.zoomOut,onItemClick:W},{key:"zoomReset",icon:t.createVNode(i.ReloadOutlined,null,null),label:h.value.zoomReset,onItemClick:U}),n&&r.push({key:"download",icon:t.createVNode(i.DownloadOutlined,null,null),label:h.value.download,onItemClick:F})):l&&r.push({key:"copy",icon:t.createVNode(i.CopyOutlined,null,null),label:"Copy",onItemClick:G}),[...r,...o]});return S({get nativeElement(){return k.value}}),()=>{var o,r,g,f,y,C;const e=N.value;if(!e)return null;const n=K();let l;return n===null?l=null:n===void 0?l=t.createVNode("div",{class:i.classnames(`${v.value}-header`,(o=s.value.classNames)==null?void 0:o.header,a.classNames.header),style:{...typeof((r=s.value.styles)==null?void 0:r.header)=="object"?s.value.styles.header:{},...a.styles.header}},[t.createVNode(ee.Segmented,{options:[{label:h.value.image,value:"image"},{label:h.value.code,value:"code"}],value:u.value,onChange:J},null),t.createVNode(le.default,{items:Q.value},null)]):l=n,L(t.createVNode("div",t.mergeProps(D.value,{ref:k,class:X.value,style:H.value}),[l,t.createVNode("div",{ref:c,class:i.classnames(`${v.value}-graph`,(g=s.value.classNames)==null?void 0:g.graph,u.value==="code"&&`${v.value}-graph-hidden`,a.classNames.graph),style:{...typeof((f=s.value.styles)==null?void 0:f.graph)=="object"?s.value.styles.graph:{},...a.styles.graph},onMousedown:A,onMousemove:Y,onMouseup:I,onMouseleave:I},null),u.value==="code"?t.createVNode("div",{class:i.classnames(`${v.value}-code`,(y=s.value.classNames)==null?void 0:y.code,a.classNames.code),style:{...typeof((C=s.value.styles)==null?void 0:C.code)=="object"?s.value.styles.code:{},...a.styles.code}},[t.createVNode(re.default,{lang:"mermaid",header:null,styles:{code:{background:"transparent",border:"none",borderRadius:0}},highlightProps:{style:{padding:0,background:"transparent"},...a.highlightProps}},ue(e)?e:{default:()=>[e]})]):null]))}}});exports.default=ie;