@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
1 lines • 5.5 kB
JavaScript
import timelinePaintProfilerStyles from"./timelinePaintProfiler.css.js";import*as TimelineModel from"../../models/timeline_model/timeline_model.js";import*as UI from"../../ui/legacy/legacy.js";import*as LayerViewer from"../layer_viewer/layer_viewer.js";export class TimelinePaintProfilerView extends UI.SplitWidget.SplitWidget{frameModel;logAndImageSplitWidget;imageView;paintProfilerView;logTreeView;needsUpdateWhenVisible;pendingSnapshot;event;paintProfilerModel;lastLoadedSnapshot;constructor(e){super(!1,!1),this.element.classList.add("timeline-paint-profiler-view"),this.setSidebarSize(60),this.setResizable(!1),this.frameModel=e,this.logAndImageSplitWidget=new UI.SplitWidget.SplitWidget(!0,!1),this.logAndImageSplitWidget.element.classList.add("timeline-paint-profiler-log-split"),this.setMainWidget(this.logAndImageSplitWidget),this.imageView=new TimelinePaintImageView,this.logAndImageSplitWidget.setMainWidget(this.imageView),this.paintProfilerView=new LayerViewer.PaintProfilerView.PaintProfilerView(this.imageView.showImage.bind(this.imageView)),this.paintProfilerView.addEventListener(LayerViewer.PaintProfilerView.Events.WindowChanged,this.onWindowChanged,this),this.setSidebarWidget(this.paintProfilerView),this.logTreeView=new LayerViewer.PaintProfilerView.PaintProfilerCommandLogView,this.logAndImageSplitWidget.setSidebarWidget(this.logTreeView),this.needsUpdateWhenVisible=!1,this.pendingSnapshot=null,this.event=null,this.paintProfilerModel=null,this.lastLoadedSnapshot=null}wasShown(){super.wasShown(),this.needsUpdateWhenVisible&&(this.needsUpdateWhenVisible=!1,this.update())}setSnapshot(e){this.releaseSnapshot(),this.pendingSnapshot=e,this.event=null,this.updateWhenVisible()}setEvent(e,t){return this.releaseSnapshot(),this.paintProfilerModel=e,this.pendingSnapshot=null,this.event=t,this.updateWhenVisible(),this.event.name===TimelineModel.TimelineModel.RecordType.Paint?Boolean(TimelineModel.TimelineModel.EventOnTimelineData.forEvent(t).picture):this.event.name===TimelineModel.TimelineModel.RecordType.RasterTask&&this.frameModel.hasRasterTile(this.event)}updateWhenVisible(){this.isShowing()?this.update():this.needsUpdateWhenVisible=!0}update(){let e;if(this.logTreeView.setCommandLog([]),this.paintProfilerView.setSnapshotAndLog(null,[],null),this.pendingSnapshot)e=Promise.resolve({rect:null,snapshot:this.pendingSnapshot});else if(this.event&&this.event.name===TimelineModel.TimelineModel.RecordType.Paint&&this.paintProfilerModel){const t=TimelineModel.TimelineModel.EventOnTimelineData.forEvent(this.event).picture.getSnapshot();e=this.paintProfilerModel.loadSnapshot(t.skp64).then((e=>e&&{rect:null,snapshot:e}))}else{if(!this.event||this.event.name!==TimelineModel.TimelineModel.RecordType.RasterTask)return void console.assert(!1,"Unexpected event type or no snapshot");e=this.frameModel.rasterTilePromise(this.event)}function t(e,t,i){this.logTreeView.setCommandLog(i||[]),this.paintProfilerView.setSnapshotAndLog(e,i||[],t)}e.then((e=>{if(this.releaseSnapshot(),!e)return void this.imageView.showImage();const i=e.snapshot;this.lastLoadedSnapshot=i,this.imageView.setMask(e.rect),i.commandLog().then((s=>t.call(this,i,e.rect,s||[])))}))}releaseSnapshot(){this.lastLoadedSnapshot&&(this.lastLoadedSnapshot.release(),this.lastLoadedSnapshot=null)}onWindowChanged(){this.logTreeView.updateWindow(this.paintProfilerView.selectionWindow())}}export class TimelinePaintImageView extends UI.Widget.Widget{imageContainer;imageElement;maskElement;transformController;maskRectangle;constructor(){super(!0),this.contentElement.classList.add("fill","paint-profiler-image-view"),this.imageContainer=this.contentElement.createChild("div","paint-profiler-image-container"),this.imageElement=this.imageContainer.createChild("img"),this.maskElement=this.imageContainer.createChild("div"),this.imageElement.addEventListener("load",this.updateImagePosition.bind(this),!1),this.transformController=new LayerViewer.TransformController.TransformController(this.contentElement,!0),this.transformController.addEventListener(LayerViewer.TransformController.Events.TransformChanged,this.updateImagePosition,this)}onResize(){this.imageElement.src&&this.updateImagePosition()}updateImagePosition(){const e=this.imageElement.naturalWidth,t=this.imageElement.naturalHeight,i=this.contentElement.clientWidth,s=this.contentElement.clientHeight,n=.1*i,a=.1*s,l=(i-n)/e,o=(s-a)/t,r=Math.min(l,o);if(this.maskRectangle){const i=this.maskElement.style;i.width=e+"px",i.height=t+"px",i.borderLeftWidth=this.maskRectangle.x+"px",i.borderTopWidth=this.maskRectangle.y+"px",i.borderRightWidth=e-this.maskRectangle.x-this.maskRectangle.width+"px",i.borderBottomWidth=t-this.maskRectangle.y-this.maskRectangle.height+"px"}this.transformController.setScaleConstraints(.5,10/r);let h=(new WebKitCSSMatrix).scale(this.transformController.scale(),this.transformController.scale()).translate(i/2,s/2).scale(r,r).translate(-e/2,-t/2);const d=UI.Geometry.boundsForTransformedPoints(h,[0,0,0,e,t,0]);this.transformController.clampOffsets(n-d.maxX,i-n-d.minX,a-d.maxY,s-a-d.minY),h=(new WebKitCSSMatrix).translate(this.transformController.offsetX(),this.transformController.offsetY()).multiply(h),this.imageContainer.style.webkitTransform=h.toString()}showImage(e){this.imageContainer.classList.toggle("hidden",!e),e&&(this.imageElement.src=e)}setMask(e){this.maskRectangle=e,this.maskElement.classList.toggle("hidden",!e)}wasShown(){super.wasShown(),this.registerCSSFiles([timelinePaintProfilerStyles])}}