@yuebai008/cli/dist/cli-server/client/front_end/panels/sensors/SensorsView.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 SDK from"../../core/sdk/sdk.js";import*as UI from"../../ui/legacy/legacy.js";import sensorsStyles from"./sensors.css.js";const UIStrings={location:"Location",noOverride:"No override",overrides:"Overrides",manage:"Manage",manageTheListOfLocations:"Manage the list of locations",other:"Other…",error:"Error",locationUnavailable:"Location unavailable",adjustWithMousewheelOrUpdownKeys:"Adjust with mousewheel or up/down keys. {PH1}: ±10, Shift: ±1, Alt: ±0.01",latitude:"Latitude",longitude:"Longitude",timezoneId:"Timezone ID",locale:"Locale",orientation:"Orientation",off:"Off",customOrientation:"Custom orientation",enableOrientationToRotate:"Enable orientation to rotate",shiftdragHorizontallyToRotate:"Shift+drag horizontally to rotate around the y-axis",deviceOrientationSetToAlphaSBeta:"Device orientation set to alpha: {PH1}, beta: {PH2}, gamma: {PH3}",reset:"Reset",resetDeviceOrientation:"Reset device orientation",forcesTouchInsteadOfClick:"Forces touch instead of click",forcesSelectedIdleStateEmulation:"Forces selected idle state emulation",presets:"Presets",portrait:"Portrait",portraitUpsideDown:"Portrait upside down",landscapeLeft:"Landscape left",landscapeRight:"Landscape right",displayUp:"Display up",displayDown:"Display down",alpha:"α (alpha)",beta:"β (beta)",gamma:"γ (gamma)"},str_=i18n.i18n.registerUIStrings("panels/sensors/SensorsView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);let showActionDelegateInstance,_instanceObject=null;export class SensorsView extends UI.Widget.VBox{LocationSetting;Location;LocationOverrideEnabled;fieldsetElement;timezoneError;locationSelectElement;latitudeInput;longitudeInput;timezoneInput;localeInput;latitudeSetter;longitudeSetter;timezoneSetter;localeSetter;localeError;customLocationsGroup;deviceOrientationSetting;deviceOrientation;deviceOrientationOverrideEnabled;deviceOrientationFieldset;stageElement;orientationSelectElement;alphaElement;betaElement;gammaElement;alphaSetter;betaSetter;gammaSetter;orientationLayer;boxElement;boxMatrix;mouseDownVector;originalBoxMatrix;constructor(){super(!0),this.contentElement.classList.add("sensors-view"),this.LocationSetting=Common.Settings.Settings.instance().createSetting("emulation.locationOverride",""),this.Location=SDK.EmulationModel.Location.parseSetting(this.LocationSetting.get()),this.LocationOverrideEnabled=!1,this.createLocationSection(this.Location),this.createPanelSeparator(),this.deviceOrientationSetting=Common.Settings.Settings.instance().createSetting("emulation.deviceOrientationOverride",""),this.deviceOrientation=SDK.EmulationModel.DeviceOrientation.parseSetting(this.deviceOrientationSetting.get()),this.deviceOrientationOverrideEnabled=!1,this.createDeviceOrientationSection(),this.createPanelSeparator(),this.appendTouchControl(),this.createPanelSeparator(),this.appendIdleEmulator(),this.createPanelSeparator()}static instance(){return _instanceObject||(_instanceObject=new SensorsView),_instanceObject}wasShown(){super.wasShown(),this.registerCSSFiles([sensorsStyles])}createPanelSeparator(){this.contentElement.createChild("div").classList.add("panel-section-separator")}createLocationSection(t){const e=this.contentElement.createChild("section","sensors-group"),i=UI.UIUtils.createLabel(i18nString(UIStrings.location),"sensors-group-title");e.appendChild(i);const n=e.createChild("div","geo-fields");let o=0;const a={title:i18nString(UIStrings.noOverride),location:NonPresetOptions.NoOverride};this.locationSelectElement=n.createChild("select","chrome-select"),UI.ARIAUtils.bindLabelToControl(i,this.locationSelectElement),this.locationSelectElement.appendChild(new Option(a.title,a.location)),this.customLocationsGroup=this.locationSelectElement.createChild("optgroup"),this.customLocationsGroup.label=i18nString(UIStrings.overrides);const s=Common.Settings.Settings.instance().moduleSetting("emulation.locations"),r=UI.UIUtils.createTextButton(i18nString(UIStrings.manage),(()=>Common.Revealer.reveal(s)));UI.ARIAUtils.setLabel(r,i18nString(UIStrings.manageTheListOfLocations)),n.appendChild(r);const l=()=>{if(this.customLocationsGroup){this.customLocationsGroup.removeChildren();for(const[e,i]of s.get().entries())this.customLocationsGroup.appendChild(new Option(i.title,JSON.stringify(i))),t.latitude===i.lat&&t.longitude===i.long&&(o=e+1)}};s.addChangeListener(l),l();const c={title:i18nString(UIStrings.other),location:NonPresetOptions.Custom};this.locationSelectElement.appendChild(new Option(c.title,c.location));const d=this.locationSelectElement.createChild("optgroup");d.label=i18nString(UIStrings.error),d.appendChild(new Option(i18nString(UIStrings.locationUnavailable),NonPresetOptions.Unavailable)),this.locationSelectElement.selectedIndex=o,this.locationSelectElement.addEventListener("change",this.LocationSelectChanged.bind(this)),this.fieldsetElement=n.createChild("fieldset"),this.fieldsetElement.disabled=!this.LocationOverrideEnabled,this.fieldsetElement.id="location-override-section";const h=this.fieldsetElement.createChild("div","latlong-group"),p=this.fieldsetElement.createChild("div","latlong-group"),m=this.fieldsetElement.createChild("div","latlong-group"),u=this.fieldsetElement.createChild("div","latlong-group"),g=Host.Platform.isMac()?"⌘":"Ctrl",S=i18nString(UIStrings.adjustWithMousewheelOrUpdownKeys,{PH1:g});this.latitudeInput=UI.UIUtils.createInput("","number"),h.appendChild(this.latitudeInput),this.latitudeInput.setAttribute("step","any"),this.latitudeInput.value="0",this.latitudeSetter=UI.UIUtils.bindInput(this.latitudeInput,this.applyLocationUserInput.bind(this),SDK.EmulationModel.Location.latitudeValidator,!0,.1),this.latitudeSetter(String(t.latitude)),UI.Tooltip.Tooltip.install(this.latitudeInput,S),h.appendChild(UI.UIUtils.createLabel(i18nString(UIStrings.latitude),"latlong-title",this.latitudeInput)),this.longitudeInput=UI.UIUtils.createInput("","number"),p.appendChild(this.longitudeInput),this.longitudeInput.setAttribute("step","any"),this.longitudeInput.value="0",this.longitudeSetter=UI.UIUtils.bindInput(this.longitudeInput,this.applyLocationUserInput.bind(this),SDK.EmulationModel.Location.longitudeValidator,!0,.1),this.longitudeSetter(String(t.longitude)),UI.Tooltip.Tooltip.install(this.longitudeInput,S),p.appendChild(UI.UIUtils.createLabel(i18nString(UIStrings.longitude),"latlong-title",this.longitudeInput)),this.timezoneInput=UI.UIUtils.createInput("","text"),m.appendChild(this.timezoneInput),this.timezoneInput.value="Europe/Berlin",this.timezoneSetter=UI.UIUtils.bindInput(this.timezoneInput,this.applyLocationUserInput.bind(this),SDK.EmulationModel.Location.timezoneIdValidator,!1),this.timezoneSetter(t.timezoneId),m.appendChild(UI.UIUtils.createLabel(i18nString(UIStrings.timezoneId),"timezone-title",this.timezoneInput)),this.timezoneError=m.createChild("div","timezone-error"),this.localeInput=UI.UIUtils.createInput("","text"),u.appendChild(this.localeInput),this.localeInput.value="en-US",this.localeSetter=UI.UIUtils.bindInput(this.localeInput,this.applyLocationUserInput.bind(this),SDK.EmulationModel.Location.localeValidator,!1),this.localeSetter(t.locale),u.appendChild(UI.UIUtils.createLabel(i18nString(UIStrings.locale),"locale-title",this.localeInput)),this.localeError=u.createChild("div","locale-error")}LocationSelectChanged(){this.fieldsetElement.disabled=!1,this.timezoneError.textContent="";const t=this.locationSelectElement.options[this.locationSelectElement.selectedIndex].value;if(t===NonPresetOptions.NoOverride)this.LocationOverrideEnabled=!1,this.clearFieldsetElementInputs(),this.fieldsetElement.disabled=!0;else if(t===NonPresetOptions.Custom){this.LocationOverrideEnabled=!0;const t=SDK.EmulationModel.Location.parseUserInput(this.latitudeInput.value.trim(),this.longitudeInput.value.trim(),this.timezoneInput.value.trim(),this.localeInput.value.trim());if(!t)return;this.Location=t}else if(t===NonPresetOptions.Unavailable)this.LocationOverrideEnabled=!0,this.Location=new SDK.EmulationModel.Location(0,0,"","",!0);else{this.LocationOverrideEnabled=!0;const e=JSON.parse(t);this.Location=new SDK.EmulationModel.Location(e.lat,e.long,e.timezoneId,e.locale,!1),this.latitudeSetter(e.lat),this.longitudeSetter(e.long),this.timezoneSetter(e.timezoneId),this.localeSetter(e.locale)}this.applyLocation(),t===NonPresetOptions.Custom&&this.latitudeInput.focus()}applyLocationUserInput(){const t=SDK.EmulationModel.Location.parseUserInput(this.latitudeInput.value.trim(),this.longitudeInput.value.trim(),this.timezoneInput.value.trim(),this.localeInput.value.trim());t&&(this.timezoneError.textContent="",this.setSelectElementLabel(this.locationSelectElement,NonPresetOptions.Custom),this.Location=t,this.applyLocation())}applyLocation(){this.LocationOverrideEnabled?this.LocationSetting.set(this.Location.toSetting()):this.LocationSetting.set("");for(const t of SDK.TargetManager.TargetManager.instance().models(SDK.EmulationModel.EmulationModel))t.emulateLocation(this.LocationOverrideEnabled?this.Location:null).catch((t=>{switch(t.type){case"emulation-set-timezone":this.timezoneError.textContent=t.message;break;case"emulation-set-locale":this.localeError.textContent=t.message}}))}clearFieldsetElementInputs(){this.latitudeSetter("0"),this.longitudeSetter("0"),this.timezoneSetter(""),this.localeSetter("")}createDeviceOrientationSection(){const t=this.contentElement.createChild("section","sensors-group"),e=UI.UIUtils.createLabel(i18nString(UIStrings.orientation),"sensors-group-title");t.appendChild(e);const i=t.createChild("div","orientation-content"),n=i.createChild("div","orientation-fields"),o={title:i18nString(UIStrings.off),orientation:NonPresetOptions.NoOverride},a={title:i18nString(UIStrings.customOrientation),orientation:NonPresetOptions.Custom},s=[{title:i18nString(UIStrings.presets),value:[{title:i18nString(UIStrings.portrait),orientation:"[0, 90, 0]"},{title:i18nString(UIStrings.portraitUpsideDown),orientation:"[-180, -90, 0]"},{title:i18nString(UIStrings.landscapeLeft),orientation:"[90, 0, -90]"},{title:i18nString(UIStrings.landscapeRight),orientation:"[90, -180, -90]"},{title:i18nString(UIStrings.displayUp),orientation:"[0, 0, 0]"},{title:i18nString(UIStrings.displayDown),orientation:"[0, -180, 0]"}]}];this.orientationSelectElement=this.contentElement.createChild("select","chrome-select"),UI.ARIAUtils.bindLabelToControl(e,this.orientationSelectElement),this.orientationSelectElement.appendChild(new Option(o.title,o.orientation)),this.orientationSelectElement.appendChild(new Option(a.title,a.orientation));for(let t=0;t<s.length;++t){const e=this.orientationSelectElement.createChild("optgroup");e.label=s[t].title;const i=s[t].value;for(let t=0;t<i.length;++t)e.appendChild(new Option(i[t].title,i[t].orientation))}this.orientationSelectElement.selectedIndex=0,n.appendChild(this.orientationSelectElement),this.orientationSelectElement.addEventListener("change",this.orientationSelectChanged.bind(this)),this.deviceOrientationFieldset=this.createDeviceOrientationOverrideElement(this.deviceOrientation),this.stageElement=i.createChild("div","orientation-stage"),this.orientationLayer=this.stageElement.createChild("div","orientation-layer"),this.boxElement=this.orientationLayer.createChild("section","orientation-box orientation-element"),this.boxElement.createChild("section","orientation-front orientation-element"),this.boxElement.createChild("section","orientation-top orientation-element"),this.boxElement.createChild("section","orientation-back orientation-element"),this.boxElement.createChild("section","orientation-left orientation-element"),this.boxElement.createChild("section","orientation-right orientation-element"),this.boxElement.createChild("section","orientation-bottom orientation-element"),UI.UIUtils.installDragHandle(this.stageElement,this.onBoxDragStart.bind(this),(t=>{this.onBoxDrag(t)}),null,"-webkit-grabbing","-webkit-grab"),n.appendChild(this.deviceOrientationFieldset),this.enableOrientationFields(!0),this.setBoxOrientation(this.deviceOrientation,!1)}enableOrientationFields(t){t?(this.deviceOrientationFieldset.disabled=!0,this.stageElement.classList.add("disabled"),UI.Tooltip.Tooltip.install(this.stageElement,i18nString(UIStrings.enableOrientationToRotate))):(this.deviceOrientationFieldset.disabled=!1,this.stageElement.classList.remove("disabled"),UI.Tooltip.Tooltip.install(this.stageElement,i18nString(UIStrings.shiftdragHorizontallyToRotate)))}orientationSelectChanged(){const t=this.orientationSelectElement.options[this.orientationSelectElement.selectedIndex].value;if(this.enableOrientationFields(!1),t===NonPresetOptions.NoOverride)this.deviceOrientationOverrideEnabled=!1,this.enableOrientationFields(!0);else if(t===NonPresetOptions.Custom)this.deviceOrientationOverrideEnabled=!0,this.resetDeviceOrientation(),this.alphaElement.focus();else{const e=JSON.parse(t);this.deviceOrientationOverrideEnabled=!0,this.deviceOrientation=new SDK.EmulationModel.DeviceOrientation(e[0],e[1],e[2]),this.setDeviceOrientation(this.deviceOrientation,"selectPreset")}}applyDeviceOrientation(){this.deviceOrientationOverrideEnabled&&this.deviceOrientationSetting.set(this.deviceOrientation.toSetting());for(const t of SDK.TargetManager.TargetManager.instance().models(SDK.EmulationModel.EmulationModel))t.emulateDeviceOrientation(this.deviceOrientationOverrideEnabled?this.deviceOrientation:null)}setSelectElementLabel(t,e){const i=Array.prototype.map.call(t.options,(t=>t.value));t.selectedIndex=i.indexOf(e)}applyDeviceOrientationUserInput(){this.setDeviceOrientation(SDK.EmulationModel.DeviceOrientation.parseUserInput(this.alphaElement.value.trim(),this.betaElement.value.trim(),this.gammaElement.value.trim()),"userInput"),this.setSelectElementLabel(this.orientationSelectElement,NonPresetOptions.Custom)}resetDeviceOrientation(){this.setDeviceOrientation(new SDK.EmulationModel.DeviceOrientation(0,90,0),"resetButton"),this.setSelectElementLabel(this.orientationSelectElement,"[0, 90, 0]")}setDeviceOrientation(t,e){if(!t)return;function i(t){return Math.round(1e4*t)/1e4}"userInput"!==e&&(this.alphaSetter(String(i(t.alpha))),this.betaSetter(String(i(t.beta))),this.gammaSetter(String(i(t.gamma))));const n="userDrag"!==e;this.setBoxOrientation(t,n),this.deviceOrientation=t,this.applyDeviceOrientation(),UI.ARIAUtils.alert(i18nString(UIStrings.deviceOrientationSetToAlphaSBeta,{PH1:t.alpha,PH2:t.beta,PH3:t.gamma}))}createAxisInput(t,e,i,n){const o=t.createChild("div","orientation-axis-input-container");return o.appendChild(e),o.appendChild(UI.UIUtils.createLabel(i,"",e)),UI.UIUtils.bindInput(e,this.applyDeviceOrientationUserInput.bind(this),n,!0)}createDeviceOrientationOverrideElement(t){const e=document.createElement("fieldset");e.classList.add("device-orientation-override-section");const i=e.createChild("td","orientation-inputs-cell");this.alphaElement=UI.UIUtils.createInput("","number"),this.alphaElement.setAttribute("step","any"),this.alphaSetter=this.createAxisInput(i,this.alphaElement,i18nString(UIStrings.alpha),SDK.EmulationModel.DeviceOrientation.alphaAngleValidator),this.alphaSetter(String(t.alpha)),this.betaElement=UI.UIUtils.createInput("","number"),this.betaElement.setAttribute("step","any"),this.betaSetter=this.createAxisInput(i,this.betaElement,i18nString(UIStrings.beta),SDK.EmulationModel.DeviceOrientation.betaAngleValidator),this.betaSetter(String(t.beta)),this.gammaElement=UI.UIUtils.createInput("","number"),this.gammaElement.setAttribute("step","any"),this.gammaSetter=this.createAxisInput(i,this.gammaElement,i18nString(UIStrings.gamma),SDK.EmulationModel.DeviceOrientation.gammaAngleValidator),this.gammaSetter(String(t.gamma));const n=UI.UIUtils.createTextButton(i18nString(UIStrings.reset),this.resetDeviceOrientation.bind(this),"orientation-reset-button");return UI.ARIAUtils.setLabel(n,i18nString(UIStrings.resetDeviceOrientation)),n.setAttribute("type","reset"),i.appendChild(n),e}setBoxOrientation(t,e){e?this.stageElement.classList.add("is-animating"):this.stageElement.classList.remove("is-animating");const{alpha:i,beta:n,gamma:o}=t;this.boxMatrix=(new DOMMatrixReadOnly).rotate(0,0,i).rotate(n,0,0).rotate(0,o,0),this.orientationLayer.style.transform=`rotateY(${i}deg) rotateX(${-n}deg) rotateZ(${o}deg)`}onBoxDrag(t){const e=this.calculateRadiusVector(t.x,t.y);if(!e)return!0;if(!this.mouseDownVector)return!0;let i,n;t.consume(!0),t.shiftKey?(i=new UI.Geometry.Vector(0,0,1),n=(e.x-this.mouseDownVector.x)*ShiftDragOrientationSpeed):(i=UI.Geometry.crossProduct(this.mouseDownVector,e),n=UI.Geometry.calculateAngle(this.mouseDownVector,e));const o=(new DOMMatrixReadOnly).rotateAxisAngle(-i.x,i.z,i.y,n).multiply(this.originalBoxMatrix),a=UI.Geometry.EulerAngles.fromDeviceOrientationRotationMatrix(o),s=new SDK.EmulationModel.DeviceOrientation(a.alpha,a.beta,a.gamma);return this.setDeviceOrientation(s,"userDrag"),this.setSelectElementLabel(this.orientationSelectElement,NonPresetOptions.Custom),!1}onBoxDragStart(t){return!!this.deviceOrientationOverrideEnabled&&(this.mouseDownVector=this.calculateRadiusVector(t.x,t.y),this.originalBoxMatrix=this.boxMatrix,!!this.mouseDownVector&&(t.consume(!0),!0))}calculateRadiusVector(t,e){const i=this.stageElement.getBoundingClientRect(),n=Math.max(i.width,i.height)/2,o=(t-i.left-i.width/2)/n,a=(e-i.top-i.height/2)/n,s=o*o+a*a;return s>.5?new UI.Geometry.Vector(o,a,.5/Math.sqrt(s)):new UI.Geometry.Vector(o,a,Math.sqrt(1-s))}appendTouchControl(){const t=this.contentElement.createChild("div","touch-section"),e=UI.SettingsUI.createControlForSetting(Common.Settings.Settings.instance().moduleSetting("emulation.touch"),i18nString(UIStrings.forcesTouchInsteadOfClick));e&&t.appendChild(e)}appendIdleEmulator(){const t=this.contentElement.createChild("div","idle-section"),e=UI.SettingsUI.createControlForSetting(Common.Settings.Settings.instance().moduleSetting("emulation.idleDetection"),i18nString(UIStrings.forcesSelectedIdleStateEmulation));e&&t.appendChild(e)}}export const NonPresetOptions={NoOverride:"noOverride",Custom:"custom",Unavailable:"unavailable"};export class PresetOrientations{static get Orientations(){return[{title:i18nString(UIStrings.presets),value:[{title:i18nString(UIStrings.portrait),orientation:"[0, 90, 0]"},{title:i18nString(UIStrings.portraitUpsideDown),orientation:"[-180, -90, 0]"},{title:i18nString(UIStrings.landscapeLeft),orientation:"[90, 0, -90]"},{title:i18nString(UIStrings.landscapeRight),orientation:"[90, -180, -90]"},{title:i18nString(UIStrings.displayUp),orientation:"[0, 0, 0]"},{title:i18nString(UIStrings.displayDown),orientation:"[0, -180, 0]"}]}]}}export class ShowActionDelegate{handleAction(t,e){return UI.ViewManager.ViewManager.instance().showView("sensors"),!0}static instance(t={forceNew:null}){const{forceNew:e}=t;return showActionDelegateInstance&&!e||(showActionDelegateInstance=new ShowActionDelegate),showActionDelegateInstance}}export const ShiftDragOrientationSpeed=16;