@yuebai008/cli/dist/cli-server/client/front_end/panels/elements/MetricsSidebarPane.js

Command line interface for rapid qg-minigame development

import*as Common from"../../core/common/common.js";import*as Platform from"../../core/platform/platform.js";import*as SDK from"../../core/sdk/sdk.js";import*as UI from"../../ui/legacy/legacy.js";import{ElementsSidebarPane}from"./ElementsSidebarPane.js";import metricsSidebarPaneStyles from"./metricsSidebarPane.css.js";export class MetricsSidebarPane extends ElementsSidebarPane{originalPropertyData;previousPropertyDataCandidate;inlineStyle;highlightMode;boxElements;isEditingMetrics;constructor(){super(),this.originalPropertyData=null,this.previousPropertyDataCandidate=null,this.inlineStyle=null,this.highlightMode="",this.boxElements=[]}doUpdate(){if(this.isEditingMetrics)return Promise.resolve();const t=this.node(),e=this.cssModel();if(!t||t.nodeType()!==Node.ELEMENT_NODE||!e)return this.contentElement.removeChildren(),this.element.classList.add("collapsed"),Promise.resolve();if(!t.id)return Promise.resolve();const i=[e.getComputedStyle(t.id).then(function(e){e&&this.node()===t&&this.updateMetrics(e)}.bind(this)),e.getInlineStyles(t.id).then((e=>{e&&this.node()===t&&(this.inlineStyle=e.inlineStyle)}))];return Promise.all(i)}onCSSModelChanged(){this.update()}toggleVisibility(t){this.element.classList.toggle("invisible",!t)}getPropertyValueAsPx(t,e){const i=t.get(e);return i?Number(i.replace(/px$/,"")||0):0}getBox(t,e){const i="border"===e?"-width":"";return{left:this.getPropertyValueAsPx(t,e+"-left"+i),top:this.getPropertyValueAsPx(t,e+"-top"+i),right:this.getPropertyValueAsPx(t,e+"-right"+i),bottom:this.getPropertyValueAsPx(t,e+"-bottom"+i)}}highlightDOMNode(t,e,i){i.consume();const n=this.node();if(t&&n){if(this.highlightMode===e)return;this.highlightMode=e,n.highlight(e)}else this.highlightMode="",SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();for(const{element:t,name:i,backgroundColor:o}of this.boxElements){const r=!n||"all"===e||i===e;t.style.backgroundColor=r?o:"",t.classList.toggle("highlighted",r)}}updateMetrics(t){const e=document.createElement("div");e.className="metrics";const i=this;function n(t,e,i,n){const o=document.createElement("div");o.className=i;const r=("position"!==e?e+"-":"")+i+n;let s=t.get(r);return void 0===s||((""===s||"position"!==e&&"0px"===s||"position"===e&&"auto"===s)&&(s="‒"),s=s.replace(/px$/,""),s=Platform.NumberUtilities.toFixedIfFloating(s),o.textContent=s,o.addEventListener("dblclick",this.startEditing.bind(this,o,e,r,t),!1)),o}function o(t){let e=t.get("width");if(!e)return"";e=e.replace(/px$/,"");const n=Number(e);if(!isNaN(n)&&"border-box"===t.get("box-sizing")){const o=i.getBox(t,"border"),r=i.getBox(t,"padding");e=(n-o.left-o.right-r.left-r.right).toString()}return Platform.NumberUtilities.toFixedIfFloating(e)}function r(t){let e=t.get("height");if(!e)return"";e=e.replace(/px$/,"");const n=Number(e);if(!isNaN(n)&&"border-box"===t.get("box-sizing")){const o=i.getBox(t,"border"),r=i.getBox(t,"padding");e=(n-o.top-o.bottom-r.top-r.bottom).toString()}return Platform.NumberUtilities.toFixedIfFloating(e)}const s=new Set(["table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row","table-row-group"]),l=new Set(["table-column","table-column-group","table-footer-group","table-header-group","table-row","table-row-group"]),a=new Set(["static"]),d=["content","padding","border","margin","position"],h=[Common.Color.PageHighlight.Content,Common.Color.PageHighlight.Padding,Common.Color.PageHighlight.Border,Common.Color.PageHighlight.Margin,Common.Color.Legacy.fromRGBA([0,0,0,0])],g=["content","padding","border","margin","position"];let p=null;this.boxElements=[];for(let e=0;e<d.length;++e){const i=d[e],c=t.get("display"),m=t.get("position");if(!c||!m)continue;if("margin"===i&&s.has(c))continue;if("padding"===i&&l.has(c))continue;if("position"===i&&a.has(m))continue;const u=document.createElement("div");u.className=`${i} highlighted`;const b=h[e].asString("rgba")||"";if(u.style.backgroundColor=b,u.addEventListener("mouseover",this.highlightDOMNode.bind(this,!0,"position"===i?"all":i),!1),this.boxElements.push({element:u,name:i,backgroundColor:b}),"content"===i){const e=document.createElement("span");e.textContent=o(t),e.addEventListener("dblclick",this.startEditing.bind(this,e,"width","width",t),!1);const i=document.createElement("span");i.textContent=r(t),i.addEventListener("dblclick",this.startEditing.bind(this,i,"height","height",t),!1);const n=document.createElement("span");n.textContent=" × ",u.appendChild(e),u.appendChild(n),u.appendChild(i)}else{const o="border"===i?"-width":"",r=document.createElement("div");r.className="label",r.textContent=g[e],u.appendChild(r),u.appendChild(n.call(this,t,i,"top",o)),u.appendChild(document.createElement("br")),u.appendChild(n.call(this,t,i,"left",o)),p&&u.appendChild(p),u.appendChild(n.call(this,t,i,"right",o)),u.appendChild(document.createElement("br")),u.appendChild(n.call(this,t,i,"bottom",o))}p=u}e.appendChild(p),e.addEventListener("mouseover",this.highlightDOMNode.bind(this,!1,"all"),!1),e.addEventListener("mouseleave",this.highlightDOMNode.bind(this,!1,"all"),!1),this.contentElement.removeChildren(),this.contentElement.appendChild(e),this.element.classList.remove("collapsed")}startEditing(t,e,i,n){if(UI.UIUtils.isBeingEdited(t))return;const o={box:e,styleProperty:i,computedStyle:n,keyDownHandler:()=>{}},r=this.handleKeyDown.bind(this,o);o.keyDownHandler=r,t.addEventListener("keydown",r,!1),this.isEditingMetrics=!0;const s=new UI.InplaceEditor.Config(this.editingCommitted.bind(this),this.editingCancelled.bind(this),o);UI.InplaceEditor.InplaceEditor.startEditing(t,s);const l=t.getComponentSelection();l&&l.selectAllChildren(t)}handleKeyDown(t,e){const i=e.currentTarget;UI.UIUtils.handleElementValueModifications(e,i,function(e,n){this.applyUserInput(i,n,e,t,!1)}.bind(this),void 0,(function(e,i,n){return"margin"!==t.styleProperty&&i<0&&(i=0),e+i+n}))}editingEnded(t,e){this.originalPropertyData=null,this.previousPropertyDataCandidate=null,t.removeEventListener("keydown",e.keyDownHandler,!1),delete this.isEditingMetrics}editingCancelled(t,e){if(this.inlineStyle)if(this.originalPropertyData)this.inlineStyle.allProperties()[this.originalPropertyData.index].setText(this.originalPropertyData.propertyText||"",!1);else{const t=this.inlineStyle.pastLastSourcePropertyIndex();t&&this.inlineStyle.allProperties()[t-1].setText("",!1)}this.editingEnded(t,e),this.update()}applyUserInput(t,e,i,n,o){if(!this.inlineStyle)return this.editingCancelled(t,n);if(o&&e===i)return this.editingCancelled(t,n);"position"===n.box||e&&"‒"!==e?"position"!==n.box||e&&"‒"!==e||(e="auto"):e="0px",e=e.toLowerCase(),/^\d+$/.test(e)&&(e+="px");const r=n.styleProperty,s=n.computedStyle;if("border-box"===s.get("box-sizing")&&("width"===r||"height"===r)){if(!e.match(/px$/))return void Common.Console.Console.instance().error("For elements with box-sizing: border-box, only absolute content area dimensions can be applied");const t=this.getBox(s,"border"),i=this.getBox(s,"padding");let n=Number(e.replace(/px$/,""));if(isNaN(n))return;n+="width"===r?t.left+t.right+i.left+i.right:t.top+t.bottom+i.top+i.bottom,e=n+"px"}this.previousPropertyDataCandidate=null;const l=this.inlineStyle.allProperties();for(let t=0;t<l.length;++t){const i=l[t];if(i.name===n.styleProperty&&i.activeInStyle())return this.previousPropertyDataCandidate=i,void i.setValue(e,o,!0,a.bind(this))}function a(t){if(t){if(this.originalPropertyData||(this.originalPropertyData=this.previousPropertyDataCandidate),this.highlightMode){const t=this.node();if(!t)return;t.highlight(this.highlightMode)}o&&this.update()}}this.inlineStyle.appendProperty(n.styleProperty,e,a.bind(this))}editingCommitted(t,e,i,n){this.editingEnded(t,n),this.applyUserInput(t,e,i,n,!0)}wasShown(){super.wasShown(),this.registerCSSFiles([metricsSidebarPaneStyles])}}