ant-design-x-vue-next/lib/x-markdown/DebugPanel.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");;/* empty css                            */const q=t.defineComponent({name:"AXXMarkdownDebugPanel",__name:"DebugPanel",setup(B){const r={FPS_THRESHOLD:{GOOD:55,WARNING:40},COLORS:{GOOD:"#52c41a",WARNING:"#faad14",DANGER:"#ff4d4f"},CHART:{WIDTH:750,HEIGHT:400,PADDING:80}},R=()=>typeof window>"u"?{x:12,y:12}:{x:window.innerWidth-220,y:window.innerHeight/2-100},S=()=>{const e=performance;return e.memory?Math.round(e.memory.usedJSHeapSize/1024/1024):0},m=e=>e<1?`${Math.round(e*1024)} KB`:e>=1024?`${(e/1024).toFixed(2)} GB`:`${e.toFixed(2)} MB`,w=e=>e>=r.FPS_THRESHOLD.GOOD?r.COLORS.GOOD:e>=r.FPS_THRESHOLD.WARNING?r.COLORS.WARNING:r.COLORS.DANGER,f=t.ref(0),b=t.ref(0),s=t.ref(!1),c=t.ref(!1),x=t.ref([]),i=t.ref(R()),N=t.ref(!1),v=t.ref([]),D=t.ref(0),p=t.ref(0),g=t.ref(void 0),d=t.ref({isDragging:!1,startX:0,startY:0,initialX:0,initialY:0}),y=()=>{const e=performance.now(),a=e-p.value;if(D.value++,a>=1e3){const l=Math.round(D.value*1e3/a),n=S();f.value=l,b.value=n,s.value&&v.value.push({timestamp:Date.now(),fps:l,memory:n}),D.value=0,p.value=e}g.value=requestAnimationFrame(y)},h=e=>{if(!d.value.isDragging)return;const a=e.clientX-d.value.startX,l=e.clientY-d.value.startY;i.value={x:d.value.initialX+a,y:d.value.initialY+l}},k=()=>{d.value.isDragging=!1,N.value=!1};t.onMounted(()=>{typeof window>"u"||(p.value=performance.now(),g.value=requestAnimationFrame(y),document.addEventListener("mousemove",h),document.addEventListener("mouseup",k))}),t.onUnmounted(()=>{g.value!==void 0&&cancelAnimationFrame(g.value),document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",k)});const C=()=>{s.value?(s.value=!1,x.value=[...v.value],c.value=!0):(v.value=[],s.value=!0)},E=e=>{e.target.closest(".x-markdown-debug-action")||(d.value={isDragging:!0,startX:e.clientX,startY:e.clientY,initialX:i.value.x,initialY:i.value.y},N.value=!0)},W=t.computed(()=>{var H,F;const e=x.value;if(!e.length)return null;const{WIDTH:a,HEIGHT:l,PADDING:n}=r.CHART,G=a-n*2,V=l-n*2,P=((H=e[0])==null?void 0:H.timestamp)??0,I=(((F=e[e.length-1])==null?void 0:F.timestamp)??0)-P||1,T=Math.max(...e.map(o=>o.fps),60),A=Math.max(...e.map(o=>o.memory),0)*1.1,L=e.reduce((o,u)=>o+u.fps,0)/e.length,_=e.reduce((o,u)=>o+u.memory,0)/e.length,z=Math.min(...e.map(o=>o.fps)),X=Math.max(...e.map(o=>o.fps)),O=(o,u)=>e.map(M=>{const Y=n+(M.timestamp-P)/I*G,$=n+V-M[o]/u*V;return`${Y},${$}`}).join(" ");return{WIDTH:a,HEIGHT:l,PADDING:n,chartWidth:G,chartHeight:V,duration:I,maxFps:T,maxMemory:A,avgFps:L,avgMemory:_,minFps:z,maxFpsValue:X,fpsPoints:O("fps",T),memoryPoints:O("memory",A)}});return()=>{const e=W.value;return t.createVNode(t.Fragment,null,[t.createVNode("div",{class:"x-markdown-debug-panel",style:{left:`${i.value.x}px`,top:`${i.value.y}px`,cursor:N.value?"grabbing":"grab"},onMousedown:E},[t.createVNode("div",{class:"x-markdown-debug-row"},[t.createVNode("span",{class:"x-markdown-debug-label"},[t.createTextVNode("FPS")]),t.createVNode("span",{class:"x-markdown-debug-value",style:{color:w(f.value)}},[f.value])]),t.createVNode("div",{class:"x-markdown-debug-row"},[t.createVNode("span",{class:"x-markdown-debug-label"},[t.createTextVNode("Memory")]),t.createVNode("span",{class:"x-markdown-debug-value"},[m(b.value)])]),t.createVNode("div",{class:"x-markdown-debug-actions"},[t.createVNode("button",{type:"button",class:["x-markdown-debug-action","x-markdown-debug-record-btn",s.value?"recording":""],onClick:C},[s.value?"Stop":"Record"]),x.value.length>0&&!s.value?t.createVNode("button",{type:"button",class:"x-markdown-debug-action",onClick:()=>{c.value=!0}},[t.createTextVNode("View")]):null])]),c.value&&e?t.createVNode("div",{class:"x-markdown-debug-modal-overlay",onClick:()=>{c.value=!1}},[t.createVNode("div",{class:"x-markdown-debug-modal",onClick:a=>a.stopPropagation()},[t.createVNode("div",{class:"x-markdown-debug-modal-header"},[t.createVNode("span",{style:{color:"#fff",fontSize:"18px",fontWeight:"600"}},[t.createTextVNode("Performance Recording")]),t.createVNode("button",{type:"button",class:"x-markdown-debug-close-btn",onClick:()=>{c.value=!1}},[t.createTextVNode("x")])]),t.createVNode("div",{class:"x-markdown-debug-modal-content"},[t.createVNode("div",{class:"x-markdown-debug-stats-summary"},[t.createVNode("div",{class:"x-markdown-debug-stat-item"},[t.createVNode("div",{class:"x-markdown-debug-stat-label"},[t.createTextVNode("Duration")]),t.createVNode("div",{class:"x-markdown-debug-stat-value"},[(e.duration/1e3).toFixed(2),t.createTextVNode("s")])]),t.createVNode("div",{class:"x-markdown-debug-stat-item"},[t.createVNode("div",{class:"x-markdown-debug-stat-label"},[t.createTextVNode("FPS Avg")]),t.createVNode("div",{class:"x-markdown-debug-stat-value",style:{color:w(e.avgFps)}},[e.avgFps.toFixed(1)])]),t.createVNode("div",{class:"x-markdown-debug-stat-item"},[t.createVNode("div",{class:"x-markdown-debug-stat-label"},[t.createTextVNode("FPS Range")]),t.createVNode("div",{class:"x-markdown-debug-stat-value"},[e.minFps,t.createTextVNode(" - "),e.maxFpsValue])]),t.createVNode("div",{class:"x-markdown-debug-stat-item"},[t.createVNode("div",{class:"x-markdown-debug-stat-label"},[t.createTextVNode("Memory Avg")]),t.createVNode("div",{class:"x-markdown-debug-stat-value"},[m(e.avgMemory)])])]),t.createVNode("svg",{width:e.WIDTH,height:e.HEIGHT,class:"x-markdown-debug-chart-full",role:"img","aria-label":"Performance chart showing FPS and memory usage over time"},[t.createVNode("title",null,[t.createTextVNode("Performance Chart")]),[0,.25,.5,.75,1].map(a=>t.createVNode("g",{key:String(a)},[t.createVNode("line",{x1:e.PADDING,y1:e.PADDING+e.chartHeight*a,x2:e.WIDTH-e.PADDING,y2:e.PADDING+e.chartHeight*a,stroke:"rgba(255,255,255,0.1)","stroke-width":"1"},null),t.createVNode("line",{x1:e.PADDING+e.chartWidth*a,y1:e.PADDING,x2:e.PADDING+e.chartWidth*a,y2:e.HEIGHT-e.PADDING,stroke:"rgba(255,255,255,0.1)","stroke-width":"1"},null)])),t.createVNode("polyline",{points:e.fpsPoints,fill:"none",stroke:r.COLORS.GOOD,"stroke-width":"2",class:"fps-line"},null),t.createVNode("polyline",{points:e.memoryPoints,fill:"none",stroke:"#1890ff","stroke-width":"2",class:"memory-line"},null),t.createVNode("text",{x:e.PADDING-10,y:e.PADDING,fill:r.COLORS.GOOD,"font-size":"12","text-anchor":"end"},[e.maxFps.toFixed(0)]),t.createVNode("text",{x:e.PADDING-10,y:e.HEIGHT-e.PADDING,fill:r.COLORS.GOOD,"font-size":"12","text-anchor":"end"},[t.createTextVNode("0")]),t.createVNode("text",{x:e.PADDING-10,y:e.PADDING-15,fill:r.COLORS.GOOD,"font-size":"14","font-weight":"bold","text-anchor":"end"},[t.createTextVNode("FPS")]),t.createVNode("text",{x:e.WIDTH-e.PADDING+10,y:e.PADDING+20,fill:"#1890ff","font-size":"12","text-anchor":"start"},[m(e.maxMemory)]),t.createVNode("text",{x:e.WIDTH-e.PADDING+10,y:e.HEIGHT-e.PADDING,fill:"#1890ff","font-size":"12","text-anchor":"start"},[m(0)]),t.createVNode("text",{x:e.WIDTH-e.PADDING+10,y:e.PADDING+5,fill:"#1890ff","font-size":"14","font-weight":"bold","text-anchor":"start"},[t.createTextVNode("Memory")]),t.createVNode("text",{x:e.PADDING,y:e.HEIGHT-e.PADDING+20,fill:"rgba(255,255,255,0.6)","font-size":"12","text-anchor":"middle"},[t.createTextVNode("0s")]),t.createVNode("text",{x:e.WIDTH-e.PADDING,y:e.HEIGHT-e.PADDING+20,fill:"rgba(255,255,255,0.6)","font-size":"12","text-anchor":"middle"},[(e.duration/1e3).toFixed(1),t.createTextVNode("s")])]),t.createVNode("div",{class:"x-markdown-debug-legend"},[t.createVNode("div",{class:"x-markdown-debug-legend-item"},[t.createVNode("span",{class:"x-markdown-debug-legend-color",style:{backgroundColor:r.COLORS.GOOD}},null),t.createVNode("span",null,[t.createTextVNode("FPS")])]),t.createVNode("div",{class:"x-markdown-debug-legend-item"},[t.createVNode("span",{class:"x-markdown-debug-legend-color",style:{backgroundColor:"#1890ff"}},null),t.createVNode("span",null,[t.createTextVNode("Memory")])])])])])]):null])}}});exports.default=q;