@yuebai008/cli/dist/cli-server/client/front_end/models/emulation/DeviceModeModel.js

Command line interface for rapid qg-minigame development

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 Root from"../../core/root/root.js";import*as SDK from"../../core/sdk/sdk.js";import*as UI from"../../ui/legacy/legacy.js";import{Horizontal,HorizontalSpanned,Vertical,VerticalSpanned}from"./EmulatedDevices.js";const UIStrings={widthMustBeANumber:"Width must be a number.",widthMustBeLessThanOrEqualToS:"Width must be less than or equal to {PH1}.",widthMustBeGreaterThanOrEqualToS:"Width must be greater than or equal to {PH1}.",heightMustBeANumber:"Height must be a number.",heightMustBeLessThanOrEqualToS:"Height must be less than or equal to {PH1}.",heightMustBeGreaterThanOrEqualTo:"Height must be greater than or equal to {PH1}.",devicePixelRatioMustBeANumberOr:"Device pixel ratio must be a number or blank.",devicePixelRatioMustBeLessThanOr:"Device pixel ratio must be less than or equal to {PH1}.",devicePixelRatioMustBeGreater:"Device pixel ratio must be greater than or equal to {PH1}."},str_=i18n.i18n.registerUIStrings("models/emulation/DeviceModeModel.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);let deviceModeModelInstance;export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper{#e;#t;#i;#n;#a;#r;#l;#s;#o;#h;#c;#d;#u;#g;#S;#m;#p;#I;#v;#M;#b;#w;#f;#D;#y;#A;#T;constructor(){super(),this.#e=new Rect(0,0,1,1),this.#t=new Rect(0,0,1,1),this.#i=new UI.Geometry.Size(1,1),this.#n=new UI.Geometry.Size(1,1),this.#a=!1,this.#r=new UI.Geometry.Size(1,1),this.#l=window.devicePixelRatio,this.#s=UA.Desktop,this.#o=Root.Runtime.experiments.isEnabled("dualScreenSupport"),this.#h=!!window.visualViewport&&"segments"in window.visualViewport,this.#c=Common.Settings.Settings.instance().createSetting("emulation.deviceScale",1),this.#c.get()||this.#c.set(1),this.#c.addChangeListener(this.scaleSettingChanged,this),this.#d=1,this.#u=Common.Settings.Settings.instance().createSetting("emulation.deviceWidth",400),this.#u.get()<MinDeviceSize&&this.#u.set(MinDeviceSize),this.#u.get()>MaxDeviceSize&&this.#u.set(MaxDeviceSize),this.#u.addChangeListener(this.widthSettingChanged,this),this.#g=Common.Settings.Settings.instance().createSetting("emulation.deviceHeight",0),this.#g.get()&&this.#g.get()<MinDeviceSize&&this.#g.set(MinDeviceSize),this.#g.get()>MaxDeviceSize&&this.#g.set(MaxDeviceSize),this.#g.addChangeListener(this.heightSettingChanged,this),this.#S=Common.Settings.Settings.instance().createSetting("emulation.deviceUA",UA.Mobile),this.#S.addChangeListener(this.uaSettingChanged,this),this.#m=Common.Settings.Settings.instance().createSetting("emulation.deviceScaleFactor",0),this.#m.addChangeListener(this.deviceScaleFactorSettingChanged,this),this.#p=Common.Settings.Settings.instance().moduleSetting("emulation.showDeviceOutline"),this.#p.addChangeListener(this.deviceOutlineSettingChanged,this),this.#I=Common.Settings.Settings.instance().createSetting("emulation.toolbarControlsEnabled",!0,Common.Settings.SettingStorageType.Session),this.#v=Type.None,this.#M=null,this.#b=null,this.#w=1,this.#f=!1,this.#D=!1,this.#y=null,this.#A=null,SDK.TargetManager.TargetManager.instance().observeModels(SDK.EmulationModel.EmulationModel,this)}static instance(e){return deviceModeModelInstance&&!e?.forceNew||(deviceModeModelInstance=new DeviceModeModel),deviceModeModelInstance}static widthValidator(e){let t,i=!1;return/^[\d]+$/.test(e)?Number(e)>MaxDeviceSize?t=i18nString(UIStrings.widthMustBeLessThanOrEqualToS,{PH1:MaxDeviceSize}):Number(e)<MinDeviceSize?t=i18nString(UIStrings.widthMustBeGreaterThanOrEqualToS,{PH1:MinDeviceSize}):i=!0:t=i18nString(UIStrings.widthMustBeANumber),{valid:i,errorMessage:t}}static heightValidator(e){let t,i=!1;return/^[\d]+$/.test(e)?Number(e)>MaxDeviceSize?t=i18nString(UIStrings.heightMustBeLessThanOrEqualToS,{PH1:MaxDeviceSize}):Number(e)<MinDeviceSize?t=i18nString(UIStrings.heightMustBeGreaterThanOrEqualTo,{PH1:MinDeviceSize}):i=!0:t=i18nString(UIStrings.heightMustBeANumber),{valid:i,errorMessage:t}}static scaleValidator(e){let t,i=!1;const n=Number(e.trim());return e?Number.isNaN(n)?t=i18nString(UIStrings.devicePixelRatioMustBeANumberOr):Number(e)>MaxDeviceScaleFactor?t=i18nString(UIStrings.devicePixelRatioMustBeLessThanOr,{PH1:MaxDeviceScaleFactor}):Number(e)<MinDeviceScaleFactor?t=i18nString(UIStrings.devicePixelRatioMustBeGreater,{PH1:MinDeviceScaleFactor}):i=!0:i=!0,{valid:i,errorMessage:t}}get scaleSettingInternal(){return this.#c}setAvailableSize(e,t){this.#i=e,this.#n=t,this.#a=!0,this.calculateAndEmulate(!1)}emulate(e,t,i,n){const a=this.#v!==e||this.#M!==t||this.#b!==i;if(this.#v=e,e===Type.Device&&t&&i){if(console.assert(Boolean(t)&&Boolean(i),"Must pass device and mode for device emulation"),this.#b=i,this.#M=t,this.#a){const e=t.orientationByName(i.orientation);this.#c.set(n||this.calculateFitScale(e.width,e.height,this.currentOutline(),this.currentInsets()))}}else this.#M=null,this.#b=null;e!==Type.None&&Host.userMetrics.actionTaken(Host.UserMetrics.Action.DeviceModeEnabled),this.calculateAndEmulate(a)}setWidth(e){const t=Math.min(MaxDeviceSize,this.preferredScaledWidth());e=Math.max(Math.min(e,t),1),this.#u.set(e)}setWidthAndScaleToFit(e){e=Math.max(Math.min(e,MaxDeviceSize),1),this.#c.set(this.calculateFitScale(e,this.#g.get())),this.#u.set(e)}setHeight(e){const t=Math.min(MaxDeviceSize,this.preferredScaledHeight());(e=Math.max(Math.min(e,t),0))===this.preferredScaledHeight()&&(e=0),this.#g.set(e)}setHeightAndScaleToFit(e){e=Math.max(Math.min(e,MaxDeviceSize),0),this.#c.set(this.calculateFitScale(this.#u.get(),e)),this.#g.set(e)}setScale(e){this.#c.set(e)}device(){return this.#M}mode(){return this.#b}type(){return this.#v}screenImage(){return this.#M&&this.#b?this.#M.modeImage(this.#b):""}outlineImage(){return this.#M&&this.#b&&this.#p.get()?this.#M.outlineImage(this.#b):""}outlineRect(){return this.#T||null}screenRect(){return this.#e}visiblePageRect(){return this.#t}scale(){return this.#d}fitScale(){return this.#w}appliedDeviceSize(){return this.#r}appliedDeviceScaleFactor(){return this.#l}appliedUserAgentType(){return this.#s}isFullHeight(){return!this.#g.get()}isMobile(){switch(this.#v){case Type.Device:return!!this.#M&&this.#M.mobile();case Type.None:return!1;case Type.Responsive:return this.#S.get()===UA.Mobile||this.#S.get()===UA.MobileNoTouch}return!1}enabledSetting(){return Common.Settings.Settings.instance().createSetting("emulation.showDeviceMode",!1)}scaleSetting(){return this.#c}uaSetting(){return this.#S}deviceScaleFactorSetting(){return this.#m}deviceOutlineSetting(){return this.#p}toolbarControlsEnabledSetting(){return this.#I}reset(){this.#m.set(0),this.#c.set(1),this.setWidth(400),this.setHeight(0),this.#S.set(UA.Mobile)}modelAdded(e){if(e.target()===SDK.TargetManager.TargetManager.instance().primaryPageTarget()&&e.supportsDeviceEmulation()){if(this.#y=e,this.#A){const e=this.#A;this.#A=null,e()}const t=e.target().model(SDK.ResourceTreeModel.ResourceTreeModel);t&&(t.addEventListener(SDK.ResourceTreeModel.Events.FrameResized,this.onFrameChange,this),t.addEventListener(SDK.ResourceTreeModel.Events.FrameNavigated,this.onFrameChange,this))}else e.emulateTouch(this.#f,this.#D)}modelRemoved(e){this.#y===e&&(this.#y=null)}inspectedURL(){return this.#y?this.#y.target().inspectedURL():null}onFrameChange(){const e=this.#y?this.#y.overlayModel():null;e&&this.showHingeIfApplicable(e)}scaleSettingChanged(){this.calculateAndEmulate(!1)}widthSettingChanged(){this.calculateAndEmulate(!1)}heightSettingChanged(){this.calculateAndEmulate(!1)}uaSettingChanged(){this.calculateAndEmulate(!0)}deviceScaleFactorSettingChanged(){this.calculateAndEmulate(!1)}deviceOutlineSettingChanged(){this.calculateAndEmulate(!1)}preferredScaledWidth(){return Math.floor(this.#n.width/(this.#c.get()||1))}preferredScaledHeight(){return Math.floor(this.#n.height/(this.#c.get()||1))}currentOutline(){let e=new Insets(0,0,0,0);if(this.#v!==Type.Device||!this.#M||!this.#b)return e;const t=this.#M.orientationByName(this.#b.orientation);return this.#p.get()&&(e=t.outlineInsets||e),e}currentInsets(){return this.#v===Type.Device&&this.#b?this.#b.insets:new Insets(0,0,0,0)}getScreenOrientationType(){if(!this.#b)throw new Error("Mode required to get orientation type.");switch(this.#b.orientation){case VerticalSpanned:case Vertical:return"portraitPrimary";default:return"landscapePrimary"}}calculateAndEmulate(e){this.#y||(this.#A=this.calculateAndEmulate.bind(this,e));const t=this.isMobile(),i=this.#y?this.#y.overlayModel():null;if(i&&this.showHingeIfApplicable(i),this.#v===Type.Device&&this.#M&&this.#b){const i=this.#M.orientationByName(this.#b.orientation),n=this.currentOutline(),a=this.currentInsets();this.#w=this.calculateFitScale(i.width,i.height,n,a),this.#s=t?this.#M.touch()?UA.Mobile:UA.MobileNoTouch:this.#M.touch()?UA.DesktopTouch:UA.Desktop,this.applyDeviceMetrics(new UI.Geometry.Size(i.width,i.height),a,n,this.#c.get(),this.#M.deviceScaleFactor,t,this.getScreenOrientationType(),e,this.#h),this.applyUserAgent(this.#M.userAgent,this.#M.userAgentMetadata),this.applyTouch(this.#M.touch(),t)}else if(this.#v===Type.None)this.#w=this.calculateFitScale(this.#i.width,this.#i.height),this.#s=UA.Desktop,this.applyDeviceMetrics(this.#i,new Insets(0,0,0,0),new Insets(0,0,0,0),1,0,t,null,e),this.applyUserAgent("",null),this.applyTouch(!1,!1);else if(this.#v===Type.Responsive){let i=this.#u.get();(!i||i>this.preferredScaledWidth())&&(i=this.preferredScaledWidth());let n=this.#g.get();(!n||n>this.preferredScaledHeight())&&(n=this.preferredScaledHeight());const a=t?defaultMobileScaleFactor:0;this.#w=this.calculateFitScale(this.#u.get(),this.#g.get()),this.#s=this.#S.get(),this.applyDeviceMetrics(new UI.Geometry.Size(i,n),new Insets(0,0,0,0),new Insets(0,0,0,0),this.#c.get(),this.#m.get()||a,t,n>=i?"portraitPrimary":"landscapePrimary",e),this.applyUserAgent(t?defaultMobileUserAgent:"",t?defaultMobileUserAgentMetadata:null),this.applyTouch(this.#S.get()===UA.DesktopTouch||this.#S.get()===UA.Mobile,this.#S.get()===UA.Mobile)}i&&i.setShowViewportSizeOnResize(this.#v===Type.None),this.dispatchEventToListeners("Updated")}calculateFitScale(e,t,i,n){const a=i?i.left+i.right:0,r=i?i.top+i.bottom:0,l=n?n.left+n.right:0,s=n?n.top+n.bottom:0;let o=Math.min(e?this.#n.width/(e+a):1,t?this.#n.height/(t+r):1);o=Math.min(Math.floor(100*o),100);let h=o;for(;h>.7*o;){let i=!0;if(e&&(i=i&&Number.isInteger((e-l)*h/100)),t&&(i=i&&Number.isInteger((t-s)*h/100)),i)return h/100;h-=1}return o/100}setSizeAndScaleToFit(e,t){this.#c.set(this.calculateFitScale(e,t)),this.setWidth(e),this.setHeight(t)}applyUserAgent(e,t){SDK.NetworkManager.MultitargetNetworkManager.instance().setUserAgentOverride(e,t)}applyDeviceMetrics(e,t,i,n,a,r,l,s,o=!1){e.width=Math.max(1,Math.floor(e.width)),e.height=Math.max(1,Math.floor(e.height));let h=e.width-t.left-t.right,c=e.height-t.top-t.bottom;const d=t.left,u=t.top,g="landscapePrimary"===l?90:0;if(this.#r=e,this.#l=a||window.devicePixelRatio,this.#e=new Rect(Math.max(0,(this.#i.width-e.width*n)/2),i.top*n,e.width*n,e.height*n),this.#T=new Rect(this.#e.left-i.left*n,0,(i.left+e.width+i.right)*n,(i.top+e.height+i.bottom)*n),this.#t=new Rect(d*n,u*n,Math.min(h*n,this.#i.width-this.#e.left-d*n),Math.min(c*n,this.#i.height-this.#e.top-u*n)),this.#d=n,o||(1===n&&this.#i.width>=e.width&&this.#i.height>=e.height&&(h=0,c=0),this.#t.width===h*n&&this.#t.height===c*n&&Number.isInteger(h*n)&&Number.isInteger(c*n)&&(h=0,c=0)),this.#y)if(s&&this.#y.resetPageScaleFactor(),h||c||r||a||1!==n||l||o){const t={width:h,height:c,deviceScaleFactor:a,mobile:r,scale:n,screenWidth:e.width,screenHeight:e.height,positionX:d,positionY:u,dontSetVisibleSize:!0,displayFeature:void 0,screenOrientation:void 0},i=this.getDisplayFeature();i&&(t.displayFeature=i),l&&(t.screenOrientation={type:l,angle:g}),this.#y.emulateDevice(t)}else this.#y.emulateDevice(null)}exitHingeMode(){const e=this.#y?this.#y.overlayModel():null;e&&e.showHingeForDualScreen(null)}webPlatformExperimentalFeaturesEnabled(){return this.#h}shouldReportDisplayFeature(){return this.#h&&this.#o}async captureScreenshot(e,t){const i=this.#y?this.#y.target().model(SDK.ScreenCaptureModel.ScreenCaptureModel):null;if(!i)return null;let n;n=t?"fromClip":e?"fullpage":"fromViewport";const a=this.#y?this.#y.overlayModel():null;a&&a.setShowViewportSizeOnResize(!1);const r=await i.captureScreenshot("png",100,n,t),l={width:0,height:0,deviceScaleFactor:0,mobile:!1};if(e&&this.#y){if(this.#M&&this.#b){const e=this.#M.orientationByName(this.#b.orientation);l.width=e.width,l.height=e.height;const t=this.getDisplayFeature();t&&(l.displayFeature=t)}else l.width=0,l.height=0;await this.#y.emulateDevice(l)}return this.calculateAndEmulate(!1),r}applyTouch(e,t){this.#f=e,this.#D=t;for(const i of SDK.TargetManager.TargetManager.instance().models(SDK.EmulationModel.EmulationModel))i.emulateTouch(e,t)}showHingeIfApplicable(e){const t=this.#M&&this.#b?this.#M.orientationByName(this.#b.orientation):null;this.#o&&t&&t.hinge?e.showHingeForDualScreen(t.hinge):e.showHingeForDualScreen(null)}getDisplayFeatureOrientation(){if(!this.#b)throw new Error("Mode required to get display feature orientation.");switch(this.#b.orientation){case VerticalSpanned:case Vertical:return"vertical";default:return"horizontal"}}getDisplayFeature(){if(!this.shouldReportDisplayFeature())return null;if(!this.#M||!this.#b||this.#b.orientation!==VerticalSpanned&&this.#b.orientation!==HorizontalSpanned)return null;const e=this.#M.orientationByName(this.#b.orientation);if(!e||!e.hinge)return null;const t=e.hinge;return{orientation:this.getDisplayFeatureOrientation(),offset:this.#b.orientation===VerticalSpanned?t.x:t.y,maskLength:this.#b.orientation===VerticalSpanned?t.width:t.height}}}export class Insets{left;top;right;bottom;constructor(e,t,i,n){this.left=e,this.top=t,this.right=i,this.bottom=n}isEqual(e){return null!==e&&this.left===e.left&&this.top===e.top&&this.right===e.right&&this.bottom===e.bottom}}export class Rect{left;top;width;height;constructor(e,t,i,n){this.left=e,this.top=t,this.width=i,this.height=n}isEqual(e){return null!==e&&this.left===e.left&&this.top===e.top&&this.width===e.width&&this.height===e.height}scale(e){return new Rect(this.left*e,this.top*e,this.width*e,this.height*e)}relativeTo(e){return new Rect(this.left-e.left,this.top-e.top,this.width,this.height)}rebaseTo(e){return new Rect(this.left+e.left,this.top+e.top,this.width,this.height)}}export var Type;!function(e){e.None="None",e.Responsive="Responsive",e.Device="Device"}(Type||(Type={}));export var UA;!function(e){e.Mobile="Mobile",e.MobileNoTouch="Mobile (no touch)",e.Desktop="Desktop",e.DesktopTouch="Desktop (touch)"}(UA||(UA={}));export const MinDeviceSize=50;export const MaxDeviceSize=9999;export const MinDeviceScaleFactor=0;export const MaxDeviceScaleFactor=10;export const MaxDeviceNameLength=50;const mobileUserAgent="Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36",defaultMobileUserAgent=SDK.NetworkManager.MultitargetNetworkManager.patchUserAgentWithChromeVersion(mobileUserAgent),defaultMobileUserAgentMetadata={platform:"Android",platformVersion:"6.0",architecture:"",model:"Nexus 5",mobile:!0};export const defaultMobileScaleFactor=2;