@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
1 lines • 5.21 kB
JavaScript
import*as Common from"../../../../core/common/common.js";import*as Host from"../../../../core/host/host.js";import*as i18n from"../../../../core/i18n/i18n.js";import*as Platform from"../../../../core/platform/platform.js";import*as TextUtils from"../../../../models/text_utils/text_utils.js";import*as Workspace from"../../../../models/workspace/workspace.js";import*as UI from"../../legacy.js";import imageViewStyles from"./imageView.css.legacy.js";const UIStrings={image:"Image",dropImageFileHere:"Drop image file here",imageFromS:"Image from {PH1}",dD:"{PH1} × {PH2}",copyImageUrl:"Copy image URL",copyImageAsDataUri:"Copy image as data URI",openImageInNewTab:"Open image in new tab",saveImageAs:"Save image as...",download:"download"},str_=i18n.i18n.registerUIStrings("ui/legacy/components/source_frame/ImageView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class ImageView extends UI.View.SimpleView{url;parsedURL;mimeType;contentProvider;uiSourceCode;sizeLabel;dimensionsLabel;aspectRatioLabel;mimeTypeLabel;container;imagePreviewElement;cachedContent;constructor(e,t){super(i18nString(UIStrings.image)),this.registerRequiredCSS(imageViewStyles),this.element.tabIndex=-1,this.element.classList.add("image-view"),this.url=t.contentURL(),this.parsedURL=new Common.ParsedURL.ParsedURL(this.url),this.mimeType=e,this.contentProvider=t,this.uiSourceCode=t instanceof Workspace.UISourceCode.UISourceCode?t:null,this.uiSourceCode&&(this.uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted,this.workingCopyCommitted,this),new UI.DropTarget.DropTarget(this.element,[UI.DropTarget.Type.ImageFile,UI.DropTarget.Type.URI],i18nString(UIStrings.dropImageFileHere),this.handleDrop.bind(this))),this.sizeLabel=new UI.Toolbar.ToolbarText,this.dimensionsLabel=new UI.Toolbar.ToolbarText,this.aspectRatioLabel=new UI.Toolbar.ToolbarText,this.mimeTypeLabel=new UI.Toolbar.ToolbarText(e),this.container=this.element.createChild("div","image"),this.imagePreviewElement=this.container.createChild("img","resource-image-view"),this.imagePreviewElement.addEventListener("contextmenu",this.contextMenu.bind(this),!0)}async toolbarItems(){return await this.updateContentIfNeeded(),[this.sizeLabel,new UI.Toolbar.ToolbarSeparator,this.dimensionsLabel,new UI.Toolbar.ToolbarSeparator,this.aspectRatioLabel,new UI.Toolbar.ToolbarSeparator,this.mimeTypeLabel]}wasShown(){this.updateContentIfNeeded()}disposeView(){this.uiSourceCode&&this.uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted,this.workingCopyCommitted,this)}workingCopyCommitted(){this.updateContentIfNeeded()}async updateContentIfNeeded(){const e=await this.contentProvider.requestContent();if(this.cachedContent?.content===e.content)return;this.cachedContent=e;const t=TextUtils.ContentProvider.contentAsDataURL(e.content,this.mimeType,e.isEncoded)||this.url,i=new Promise((e=>{this.imagePreviewElement.onload=e}));this.imagePreviewElement.src=t,this.imagePreviewElement.alt=i18nString(UIStrings.imageFromS,{PH1:this.url});const n=e.content&&!e.isEncoded?e.content.length:Platform.StringUtilities.base64ToSize(e.content);this.sizeLabel.setText(Platform.NumberUtilities.bytesToString(n)),await i,this.dimensionsLabel.setText(i18nString(UIStrings.dD,{PH1:this.imagePreviewElement.naturalWidth,PH2:this.imagePreviewElement.naturalHeight})),this.aspectRatioLabel.setText(Platform.NumberUtilities.aspectRatio(this.imagePreviewElement.naturalWidth,this.imagePreviewElement.naturalHeight))}contextMenu(e){const t=new UI.ContextMenu.ContextMenu(e),i=new Common.ParsedURL.ParsedURL(this.imagePreviewElement.src);this.parsedURL.isDataURL()||t.clipboardSection().appendItem(i18nString(UIStrings.copyImageUrl),this.copyImageURL.bind(this)),i.isDataURL()&&t.clipboardSection().appendItem(i18nString(UIStrings.copyImageAsDataUri),this.copyImageAsDataURL.bind(this)),t.clipboardSection().appendItem(i18nString(UIStrings.openImageInNewTab),this.openInNewTab.bind(this)),t.clipboardSection().appendItem(i18nString(UIStrings.saveImageAs),(async()=>{await this.saveImage()})),t.show()}copyImageAsDataURL(){Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.imagePreviewElement.src)}copyImageURL(){Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.url)}async saveImage(){if(!this.cachedContent||!this.cachedContent.content)return;const e=TextUtils.ContentProvider.contentAsDataURL(this.cachedContent.content,this.mimeType,this.cachedContent.isEncoded,"",!1);if(!e)return;const t=document.createElement("a");t.href=e,t.download=this.parsedURL.isDataURL()?i18nString(UIStrings.download):decodeURIComponent(this.parsedURL.displayName),t.click(),t.remove()}openInNewTab(){Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(this.url)}async handleDrop(e){const t=e.items;if(!t.length||"file"!==t[0].kind)return;const i=t[0].getAsFile();if(!i)return;const n=!i.name.endsWith(".svg");(e=>{const t=new FileReader;t.onloadend=()=>{let e;try{e=t.result}catch(t){e=null,console.error("Can't read file: "+t)}"string"==typeof e&&this.uiSourceCode&&this.uiSourceCode.setContent(n?btoa(e):e,n)},n?t.readAsBinaryString(e):t.readAsText(e)})(i)}}