From 298b182c0e4729b5ea29f6686951df86487ee3aa Mon Sep 17 00:00:00 2001 From: Diego Teran Date: Fri, 27 Feb 2026 13:24:36 -0800 Subject: [PATCH] Format files --- .../src/test/utilities-spec.ts | 18 +- .../src/three-components/ModelScene.ts | 257 +++++++++--------- .../src/docs-and-examples/create-html.ts | 14 +- .../src/docs-and-examples/sidebar.ts | 10 +- .../src/docs-and-examples/utils.ts | 4 +- .../src/artifact-creator.ts | 12 +- packages/render-fidelity-tools/src/common.ts | 9 +- .../src/components/magnifying-glass.ts | 3 +- .../src/workflows/test-fidelity.ts | 3 +- .../animation_controls/animation_controls.ts | 2 +- .../best_practices/best_practices.ts | 4 +- .../camera_settings/components/limits_base.ts | 2 +- .../hotspot_panel/hotspot_editor.ts | 2 +- .../mobile_view/components/mobile_modal.ts | 5 +- .../model_viewer_preview.ts | 85 +++--- .../model_viewer_snippet.ts | 2 +- .../parse_hotspot_config.ts | 4 +- .../components/shared/checkbox/checkbox.ts | 2 +- .../expandable_content/expandable_switch.ts | 2 +- .../src/components/shared/mv_link/mv_link.ts | 1 + .../shared/radio_group/radio_group.ts | 1 + .../shared/section_row/section_row.ts | 1 + .../src/components/shared/tabs/tabs.ts | 2 +- .../src/components/utils/spread_directive.ts | 39 +-- 24 files changed, 247 insertions(+), 237 deletions(-) diff --git a/packages/model-viewer-effects/src/test/utilities-spec.ts b/packages/model-viewer-effects/src/test/utilities-spec.ts index eb7740b7f1..057a63122f 100644 --- a/packages/model-viewer-effects/src/test/utilities-spec.ts +++ b/packages/model-viewer-effects/src/test/utilities-spec.ts @@ -13,21 +13,21 @@ * limitations under the License. */ -import { ModelViewerElement } from '@google/model-viewer'; -import { Renderer } from '@google/model-viewer/lib/three-components/Renderer.js'; -import { expect } from 'chai'; +import {ModelViewerElement} from '@google/model-viewer'; +import {Renderer} from '@google/model-viewer/lib/three-components/Renderer.js'; +import {expect} from 'chai'; -import { $effectComposer } from '../effect-composer.js'; -import { EffectComposer } from '../model-viewer-effects.js'; -import { getOwnPropertySymbolValue } from '../utilities.js'; +import {$effectComposer} from '../effect-composer.js'; +import {EffectComposer} from '../model-viewer-effects.js'; +import {getOwnPropertySymbolValue} from '../utilities.js'; -import { CompareArrays, assetPath, createModelViewerElement, rafPasses, screenshot, waitForEvent } from './utilities.js'; +import {assetPath, CompareArrays, createModelViewerElement, rafPasses, screenshot, waitForEvent} from './utilities.js'; suite('Screenshot Baseline Test', () => { let element: ModelViewerElement; let baseScreenshot: Uint8Array; - suiteSetup(function () { + suiteSetup(function() { if (!Renderer.singleton.canRender) { this.skip(); } @@ -44,7 +44,7 @@ suite('Screenshot Baseline Test', () => { test('Compare ModelViewer to Self', async () => { const renderer = - getOwnPropertySymbolValue(element, 'renderer') as Renderer; + getOwnPropertySymbolValue(element, 'renderer') as Renderer; expect(renderer).to.not.be.undefined; expect(renderer.threeRenderer).to.not.be.undefined; await element.updateComplete; diff --git a/packages/model-viewer/src/three-components/ModelScene.ts b/packages/model-viewer/src/three-components/ModelScene.ts index e856be1780..70210ec53e 100644 --- a/packages/model-viewer/src/three-components/ModelScene.ts +++ b/packages/model-viewer/src/three-components/ModelScene.ts @@ -13,22 +13,22 @@ * limitations under the License. */ -import { AnimationAction, AnimationActionLoopStyles, AnimationClip, AnimationMixer, AnimationMixerEventMap, Box3, Camera, Euler, Event as ThreeEvent, LoopOnce, LoopPingPong, LoopRepeat, Material, Matrix3, Mesh, NeutralToneMapping, Object3D, PerspectiveCamera, Raycaster, Scene, Sphere, Texture, ToneMapping, Triangle, Vector2, Vector3, WebGLRenderer, XRTargetRaySpace } from 'three'; -import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer.js'; -import { reduceVertices } from 'three/examples/jsm/utils/SceneUtils.js'; - -import { $currentGLTF, $model, $originalGltfJson } from '../features/scene-graph.js'; -import { $nodeFromIndex, $nodeFromPoint } from '../features/scene-graph/model.js'; -import ModelViewerElementBase, { $renderer, $scene, EffectComposerInterface, RendererInterface } from '../model-viewer-base.js'; -import { ModelViewerElement } from '../model-viewer.js'; -import { normalizeUnit } from '../styles/conversions.js'; -import { NumberNode, parseExpressions } from '../styles/parsers.js'; - -import { Damper, SETTLING_TIME } from './Damper.js'; -import { ModelViewerGLTFInstance } from './gltf-instance/ModelViewerGLTFInstance.js'; -import { GroundedSkybox } from './GroundedSkybox.js'; -import { Hotspot } from './Hotspot.js'; -import { Shadow } from './Shadow.js'; +import {AnimationAction, AnimationActionLoopStyles, AnimationClip, AnimationMixer, AnimationMixerEventMap, Box3, Camera, Euler, Event as ThreeEvent, LoopOnce, LoopPingPong, LoopRepeat, Material, Matrix3, Mesh, NeutralToneMapping, Object3D, PerspectiveCamera, Raycaster, Scene, Sphere, Texture, ToneMapping, Triangle, Vector2, Vector3, WebGLRenderer, XRTargetRaySpace} from 'three'; +import {CSS2DRenderer} from 'three/examples/jsm/renderers/CSS2DRenderer.js'; +import {reduceVertices} from 'three/examples/jsm/utils/SceneUtils.js'; + +import {$currentGLTF, $model, $originalGltfJson} from '../features/scene-graph.js'; +import {$nodeFromIndex, $nodeFromPoint} from '../features/scene-graph/model.js'; +import ModelViewerElementBase, {$renderer, $scene, EffectComposerInterface, RendererInterface} from '../model-viewer-base.js'; +import {ModelViewerElement} from '../model-viewer.js'; +import {normalizeUnit} from '../styles/conversions.js'; +import {NumberNode, parseExpressions} from '../styles/parsers.js'; + +import {Damper, SETTLING_TIME} from './Damper.js'; +import {ModelViewerGLTFInstance} from './gltf-instance/ModelViewerGLTFInstance.js'; +import {GroundedSkybox} from './GroundedSkybox.js'; +import {Hotspot} from './Hotspot.js'; +import {Shadow} from './Shadow.js'; export const GROUNDED_SKYBOX_SIZE = 10; const MIN_SHADOW_RATIO = 100; @@ -48,9 +48,9 @@ export interface MarkedAnimation { name: string, loopMode: AnimationActionLoopStyles, repetitionCount: number } -export type IlluminationRole = 'primary' | 'secondary'; +export type IlluminationRole = 'primary'|'secondary'; -export const IlluminationRole: { [index: string]: IlluminationRole } = { +export const IlluminationRole: {[index: string]: IlluminationRole} = { Primary: 'primary', Secondary: 'secondary' }; @@ -72,23 +72,23 @@ export class ModelScene extends Scene { element: ModelViewerElement; canvas: HTMLCanvasElement; annotationRenderer = new CSS2DRenderer(); - effectRenderer: EffectComposerInterface | null = null; + effectRenderer: EffectComposerInterface|null = null; schemaElement = document.createElement('script'); width = 1; height = 1; aspect = 1; scaleStep = 0; renderCount = 0; - externalRenderer: RendererInterface | null = null; + externalRenderer: RendererInterface|null = null; appendedAnimations: Array = []; markedAnimations: Array = []; // These default camera values are never used, as they are reset once the // model is loaded and framing is computed. camera = new PerspectiveCamera(45, 1, 0.1, 100); - xrCamera: Camera | null = null; + xrCamera: Camera|null = null; - url: string | null = null; + url: string|null = null; pivot = new Object3D(); target = new Object3D(); animationNames: Array = []; @@ -98,7 +98,7 @@ export class ModelScene extends Scene { idealAspect = 0; framedFoVDeg = 0; - shadow: Shadow | null = null; + shadow: Shadow|null = null; shadowIntensity = 0; shadowSoftness = 1; bakedShadows = new Set(); @@ -114,16 +114,16 @@ export class ModelScene extends Scene { private targetDamperY = new Damper(); private targetDamperZ = new Damper(); - private _currentGLTF: ModelViewerGLTFInstance | null = null; - private _model: Object3D | null = null; + private _currentGLTF: ModelViewerGLTFInstance|null = null; + private _model: Object3D|null = null; private mixer: AnimationMixer; - private cancelPendingSourceChange: (() => void) | null = null; + private cancelPendingSourceChange: (() => void)|null = null; private animationsByName: Map = new Map(); - private currentAnimationAction: AnimationAction | null = null; + private currentAnimationAction: AnimationAction|null = null; private groundedSkybox = new GroundedSkybox(); - constructor({ canvas, element, width, height }: ModelSceneConfig) { + constructor({canvas, element, width, height}: ModelSceneConfig) { super(); this.name = 'ModelScene'; @@ -147,8 +147,8 @@ export class ModelScene extends Scene { this.mixer = new AnimationMixer(this.target); - const { domElement } = this.annotationRenderer; - const { style } = domElement; + const {domElement} = this.annotationRenderer; + const {style} = domElement; style.display = 'none'; style.pointerEvents = 'none'; style.position = 'absolute'; @@ -205,8 +205,8 @@ export class ModelScene extends Scene { */ async setSource( - url: string | null, - progressCallback: (progress: number) => void = () => { }) { + url: string|null, + progressCallback: (progress: number) => void = () => {}) { if (!url || url === this.url) { progressCallback(1); return; @@ -238,7 +238,7 @@ export class ModelScene extends Scene { (async () => { try { const result = await this.element[$renderer].loader.load( - url, this.element, progressCallback); + url, this.element, progressCallback); resolve(result); } catch (error) { reject(error); @@ -265,7 +265,7 @@ export class ModelScene extends Scene { this.target.add(gltf.scene); } - const { animations } = gltf!; + const {animations} = gltf!; const animationsByName = new Map(); const animationNames = []; @@ -302,7 +302,7 @@ export class ModelScene extends Scene { } this.bakedShadows.clear(); - const { _model } = this; + const {_model} = this; if (_model != null) { _model.removeFromParent(); this._model = null; @@ -395,21 +395,21 @@ export class ModelScene extends Scene { } checkBakedShadows() { - const { min, max } = this.boundingBox; + const {min, max} = this.boundingBox; const shadowBox = new Box3(); this.boundingBox.getSize(this.size); for (const mesh of this.bakedShadows) { shadowBox.setFromObject(mesh); if (shadowBox.min.y < min.y + this.size.y / MIN_SHADOW_RATIO && - shadowBox.min.x <= min.x && shadowBox.max.x >= max.x && - shadowBox.min.z <= min.z && shadowBox.max.z >= max.z) { + shadowBox.min.x <= min.x && shadowBox.max.x >= max.x && + shadowBox.min.z <= min.z && shadowBox.max.z >= max.z) { // floor shadow continue; } if (shadowBox.min.z < min.z + this.size.z / MIN_SHADOW_RATIO && - shadowBox.min.x <= min.x && shadowBox.max.x >= max.x && - shadowBox.min.y <= min.y && shadowBox.max.y >= max.y) { + shadowBox.min.x <= min.x && shadowBox.max.x >= max.x && + shadowBox.min.y <= min.y && shadowBox.max.y >= max.y) { // wall shadow continue; } @@ -418,12 +418,12 @@ export class ModelScene extends Scene { } applyTransform() { - const { model } = this; + const {model} = this; if (model == null) { return; } const orientation = parseExpressions(this.element.orientation)[0] - .terms as [NumberNode, NumberNode, NumberNode]; + .terms as [NumberNode, NumberNode, NumberNode]; const roll = normalizeUnit(orientation[0]).number; const pitch = normalizeUnit(orientation[1]).number; @@ -432,13 +432,13 @@ export class ModelScene extends Scene { model.quaternion.setFromEuler(new Euler(pitch, yaw, roll, 'YXZ')); const scale = parseExpressions(this.element.scale)[0] - .terms as [NumberNode, NumberNode, NumberNode]; + .terms as [NumberNode, NumberNode, NumberNode]; model.scale.set(scale[0].number, scale[1].number, scale[2].number); } updateBoundingBox() { - const { model } = this; + const {model} = this; if (model == null) { return; } @@ -474,13 +474,13 @@ export class ModelScene extends Scene { * one side instead of both. Proper choice of center can correct this. */ async updateFraming() { - const { model } = this; + const {model} = this; if (model == null) { return; } this.target.remove(model); this.setBakedShadowVisibility(false); - const { center } = this.boundingSphere; + const {center} = this.boundingSphere; this.element.requestUpdate('cameraTarget'); await this.element.updateComplete; @@ -490,16 +490,16 @@ export class ModelScene extends Scene { return Math.max(value, center!.distanceToSquared(vertex)); }; this.boundingSphere.radius = - Math.sqrt(reduceVertices(model, radiusSquared, 0)); + Math.sqrt(reduceVertices(model, radiusSquared, 0)); const horizontalTanFov = (value: number, vertex: Vector3): number => { vertex.sub(center!); const radiusXZ = Math.sqrt(vertex.x * vertex.x + vertex.z * vertex.z); return Math.max( - value, radiusXZ / (this.idealCameraDistance() - Math.abs(vertex.y))); + value, radiusXZ / (this.idealCameraDistance() - Math.abs(vertex.y))); }; this.idealAspect = reduceVertices(model, horizontalTanFov, 0) / - Math.tan((this.framedFoVDeg / 2) * Math.PI / 180); + Math.tan((this.framedFoVDeg / 2) * Math.PI / 180); this.setBakedShadowVisibility(); this.target.add(model); @@ -522,7 +522,7 @@ export class ModelScene extends Scene { */ adjustedFoV(fovDeg: number): number { const vertical = Math.tan((fovDeg / 2) * Math.PI / 180) * - Math.max(1, this.idealAspect / this.aspect); + Math.max(1, this.idealAspect / this.aspect); return 2 * Math.atan(vertical) * 180 / Math.PI; } @@ -532,7 +532,7 @@ export class ModelScene extends Scene { } else { const rect = this.element.getBoundingClientRect(); ndc.set( - (clientX - rect.x) / this.width, (clientY - rect.y) / this.height); + (clientX - rect.x) / this.width, (clientY - rect.y) / this.height); } ndc.multiplyScalar(2).subScalar(1); @@ -543,11 +543,11 @@ export class ModelScene extends Scene { /** * Returns the size of the corresponding canvas element. */ - getSize(): { width: number, height: number } { - return { width: this.width, height: this.height }; + getSize(): {width: number, height: number} { + return {width: this.width, height: this.height}; } - setEnvironmentAndSkybox(environment: Texture | null, skybox: Texture | null) { + setEnvironmentAndSkybox(environment: Texture|null, skybox: Texture|null) { if (this.element[$renderer].arRenderer.presentedScene === this) { return; } @@ -556,7 +556,7 @@ export class ModelScene extends Scene { this.queueRender(); } - setBackground(skybox: Texture | null) { + setBackground(skybox: Texture|null) { this.groundedSkybox.map = skybox; if (this.groundedSkybox.isUsable()) { this.target.add(this.groundedSkybox); @@ -569,18 +569,18 @@ export class ModelScene extends Scene { farRadius() { return this.boundingSphere.radius * - (this.groundedSkybox.parent != null ? GROUNDED_SKYBOX_SIZE : 1); + (this.groundedSkybox.parent != null ? GROUNDED_SKYBOX_SIZE : 1); } setGroundedSkybox() { const heightNode = - parseExpressions(this.element.skyboxHeight)[0].terms[0] as NumberNode; + parseExpressions(this.element.skyboxHeight)[0].terms[0] as NumberNode; const height = normalizeUnit(heightNode).number; const radius = GROUNDED_SKYBOX_SIZE * this.boundingSphere.radius; this.groundedSkybox.updateGeometry(height, radius); this.groundedSkybox.position.y = - height - (this.shadow ? 2 * this.shadow.gap() : 0); + height - (this.shadow ? 2 * this.shadow.gap() : 0); this.setBackground(this.groundedSkybox.map); } @@ -632,7 +632,7 @@ export class ModelScene extends Scene { const target = this.target.position; if (!goal.equals(target)) { const normalization = this.boundingSphere.radius / 10; - let { x, y, z } = target; + let {x, y, z} = target; x = this.targetDamperX.update(x, goal.x, delta, normalization); y = this.targetDamperY.update(y, goal.y, delta, normalization); z = this.targetDamperZ.update(z, goal.z, delta, normalization); @@ -651,7 +651,7 @@ export class ModelScene extends Scene { * Yaw the +z (front) of the model toward the indicated world coordinates. */ pointTowards(worldX: number, worldZ: number) { - const { x, z } = this.position; + const {x, z} = this.position; this.yaw = Math.atan2(worldX - x, worldZ - z); } @@ -681,9 +681,9 @@ export class ModelScene extends Scene { get animationTime(): number { if (this.currentAnimationAction != null) { const loopCount = - Math.max((this.currentAnimationAction as any)._loopCount, 0); + Math.max((this.currentAnimationAction as any)._loopCount, 0); if (this.currentAnimationAction.loop === LoopPingPong && - (loopCount & 1) === 1) { + (loopCount & 1) === 1) { return this.duration - this.currentAnimationAction.time } else { return this.currentAnimationAction.time; @@ -703,7 +703,7 @@ export class ModelScene extends Scene { get duration(): number { if (this.currentAnimationAction != null && - this.currentAnimationAction.getClip()) { + this.currentAnimationAction.getClip()) { return this.currentAnimationAction.getClip().duration; } @@ -721,13 +721,13 @@ export class ModelScene extends Scene { * to playing the first animation. */ playAnimation( - name: string | null = null, crossfadeTime: number = 0, - loopMode: AnimationActionLoopStyles = LoopRepeat, - repetitionCount: number = Infinity) { + name: string|null = null, crossfadeTime: number = 0, + loopMode: AnimationActionLoopStyles = LoopRepeat, + repetitionCount: number = Infinity) { if (this._currentGLTF == null) { return; } - const { animations } = this; + const {animations} = this; if (animations == null || animations.length === 0) { return; } @@ -741,7 +741,7 @@ export class ModelScene extends Scene { const parsedAnimationIndex = parseInt(name); if (!isNaN(parsedAnimationIndex) && parsedAnimationIndex >= 0 && - parsedAnimationIndex < animations.length) { + parsedAnimationIndex < animations.length) { animationClip = animations[parsedAnimationIndex]; } } @@ -752,7 +752,7 @@ export class ModelScene extends Scene { } try { - const { currentAnimationAction: lastAnimationAction } = this; + const {currentAnimationAction: lastAnimationAction} = this; const action = this.mixer.clipAction(animationClip, this); @@ -765,8 +765,8 @@ export class ModelScene extends Scene { if (lastAnimationAction != null && action !== lastAnimationAction) { action.crossFadeFrom(lastAnimationAction, crossfadeTime, false); } else if ( - this.animationTimeScale > 0 && - this.animationTime == this.duration) { + this.animationTimeScale > 0 && + this.animationTime == this.duration) { // This is a workaround for what I believe is a three.js bug. this.animationTime = 0; } @@ -783,15 +783,15 @@ export class ModelScene extends Scene { } appendAnimation( - name: string = '', loopMode: AnimationActionLoopStyles = LoopRepeat, - repetitionCount: number = Infinity, weight: number = 1, - timeScale: number = 1, fade: boolean | number | string = false, - warp: boolean | number | string = false, relativeWarp: boolean = true, - time: null | number | string = null, needsToStop: boolean = false) { + name: string = '', loopMode: AnimationActionLoopStyles = LoopRepeat, + repetitionCount: number = Infinity, weight: number = 1, + timeScale: number = 1, fade: boolean|number|string = false, + warp: boolean|number|string = false, relativeWarp: boolean = true, + time: null|number|string = null, needsToStop: boolean = false) { if (this._currentGLTF == null || name === this.element.animationName) { return; } - const { animations } = this; + const {animations} = this; if (animations == null || animations.length === 0) { return; } @@ -805,18 +805,22 @@ export class ModelScene extends Scene { if (typeof repetitionCount === 'string') { if (isNaN(parseFloat(repetitionCount))) { repetitionCount = Infinity; - console.warn(`Invalid repetitionCount value: ${repetitionCount}. Using default: Infinity`); + console.warn(`Invalid repetitionCount value: ${ + repetitionCount}. Using default: Infinity`); } else { if (parseInt(repetitionCount) < 1) { - console.warn(`Invalid repetitionCount value: ${repetitionCount}. Using 1 as minimum.`); + console.warn(`Invalid repetitionCount value: ${ + repetitionCount}. Using 1 as minimum.`); } repetitionCount = Math.max(parseInt(repetitionCount), 1); } } else if (typeof repetitionCount === 'number' && repetitionCount < 1) { repetitionCount = 1; - console.warn(`Invalid repetitionCount value: ${repetitionCount}. Using 1 value as minimum.`); + console.warn(`Invalid repetitionCount value: ${ + repetitionCount}. Using 1 value as minimum.`); } else { - console.warn(`Invalid repetitionCount value: ${repetitionCount}. Using default: Infinity`); + console.warn(`Invalid repetitionCount value: ${ + repetitionCount}. Using default: Infinity`); } if (repetitionCount === 1 && loopMode !== LoopOnce) { @@ -848,14 +852,15 @@ export class ModelScene extends Scene { const parsedTime = parseFloat(time); if (isNaN(parsedTime)) { time = null; - console.warn(`Invalid time value: ${time}. Using default: 0 or previous time`); + console.warn( + `Invalid time value: ${time}. Using default: 0 or previous time`); } else { time = parsedTime; } } - const { shouldFade, duration: fadeDuration } = - this.parseFadeValue(fade, false, 1.25); + const {shouldFade, duration: fadeDuration} = + this.parseFadeValue(fade, false, 1.25); const defaultWarpDuration = 1.25; let shouldWarp = false; @@ -889,13 +894,13 @@ export class ModelScene extends Scene { try { const action = this.mixer.existingAction(animationClip) || - this.mixer.clipAction(animationClip, this); + this.mixer.clipAction(animationClip, this); const currentTimeScale = action.timeScale; if (needsToStop && this.appendedAnimations.includes(name)) { if (!this.markedAnimations.map(e => e.name).includes(name)) { - this.markedAnimations.push({ name, loopMode, repetitionCount }); + this.markedAnimations.push({name, loopMode, repetitionCount}); } } @@ -911,7 +916,7 @@ export class ModelScene extends Scene { if (shouldWarp) { action.warp( - relativeWarp ? currentTimeScale : 0, timeScale, warpDuration); + relativeWarp ? currentTimeScale : 0, timeScale, warpDuration); } else { action.timeScale = timeScale; } @@ -939,34 +944,34 @@ export class ModelScene extends Scene { * Helper function to parse fade parameter values */ private parseFadeValue( - fade: boolean | number | string, defaultValue: boolean = true, - defaultDuration: number = 1.5): { shouldFade: boolean, duration: number } { + fade: boolean|number|string, defaultValue: boolean = true, + defaultDuration: number = 1.5): {shouldFade: boolean, duration: number} { const normalizeString = (str: string) => str.toLowerCase().trim(); if (typeof fade === 'boolean') { - return { shouldFade: fade, duration: fade ? defaultDuration : 0 }; + return {shouldFade: fade, duration: fade ? defaultDuration : 0}; } if (typeof fade === 'number') { const duration = Math.max(fade, 0); - return { shouldFade: duration > 0, duration }; + return {shouldFade: duration > 0, duration}; } if (typeof fade === 'string') { const normalized = normalizeString(fade); if (normalized === 'true') { - return { shouldFade: true, duration: defaultDuration }; + return {shouldFade: true, duration: defaultDuration}; } if (normalized === 'false') { - return { shouldFade: false, duration: 0 }; + return {shouldFade: false, duration: 0}; } const parsed = parseFloat(normalized); if (!isNaN(parsed)) { const duration = Math.max(parsed, 0); - return { shouldFade: duration > 0, duration }; + return {shouldFade: duration > 0, duration}; } } @@ -977,11 +982,11 @@ export class ModelScene extends Scene { }; } - detachAnimation(name: string = '', fade: boolean | number | string = true) { + detachAnimation(name: string = '', fade: boolean|number|string = true) { if (this._currentGLTF == null || name === this.element.animationName) { return; } - const { animations } = this; + const {animations} = this; if (animations == null || animations.length === 0) { return; } @@ -991,11 +996,11 @@ export class ModelScene extends Scene { return; } - const { shouldFade, duration } = this.parseFadeValue(fade, true, 1.5); + const {shouldFade, duration} = this.parseFadeValue(fade, true, 1.5); try { const action = this.mixer.existingAction(animationClip) || - this.mixer.clipAction(animationClip, this); + this.mixer.clipAction(animationClip, this); if (shouldFade) { action.fadeOut(duration); @@ -1004,19 +1009,19 @@ export class ModelScene extends Scene { } this.element[$scene].appendedAnimations = - this.element[$scene].appendedAnimations.filter(i => i !== name); + this.element[$scene].appendedAnimations.filter(i => i !== name); } catch (error) { console.error(error); } } updateAnimationLoop( - name: string = '', loopMode: AnimationActionLoopStyles = LoopRepeat, - repetitionCount: number = Infinity) { + name: string = '', loopMode: AnimationActionLoopStyles = LoopRepeat, + repetitionCount: number = Infinity) { if (this._currentGLTF == null || name === this.element.animationName) { return; } - const { animations } = this; + const {animations} = this; if (animations == null || animations.length === 0) { return; } @@ -1033,7 +1038,7 @@ export class ModelScene extends Scene { try { const action = this.mixer.existingAction(animationClip) || - this.mixer.clipAction(animationClip, this); + this.mixer.clipAction(animationClip, this); action.stop(); action.setLoop(loopMode, repetitionCount); action.play(); @@ -1053,7 +1058,7 @@ export class ModelScene extends Scene { } subscribeMixerEvent( - event: keyof AnimationMixerEventMap, callback: (...args: any[]) => void) { + event: keyof AnimationMixerEventMap, callback: (...args: any[]) => void) { this.mixer.addEventListener(event, callback); } @@ -1149,7 +1154,8 @@ export class ModelScene extends Scene { * coordinates given relative to the model-viewer element. If the mesh * is not hit, the result is null. */ - positionAndNormalFromPoint(ndcPosition: Vector2, object: Object3D = this): { position: Vector3, normal: Vector3, uv: Vector2 | null } | null { + positionAndNormalFromPoint(ndcPosition: Vector2, object: Object3D = this): + {position: Vector3, normal: Vector3, uv: Vector2|null}|null { const hit = this.hitFromPoint(ndcPosition, object); if (hit == null) { return null; @@ -1157,12 +1163,12 @@ export class ModelScene extends Scene { const position = hit.point; const normal = hit.face != null ? - hit.face.normal.clone().applyNormalMatrix( - new Matrix3().getNormalMatrix(hit.object.matrixWorld)) : - raycaster.ray.direction.clone().multiplyScalar(-1); + hit.face.normal.clone().applyNormalMatrix( + new Matrix3().getNormalMatrix(hit.object.matrixWorld)) : + raycaster.ray.direction.clone().multiplyScalar(-1); const uv = hit.uv ?? null; - return { position, normal, uv }; + return {position, normal, uv}; } /** @@ -1172,7 +1178,7 @@ export class ModelScene extends Scene { * attribute of the hotspot to make it follow this point on the surface * even as the model animates. If the mesh is not hit, the result is null. */ - surfaceFromPoint(ndcPosition: Vector2, object: Object3D = this): string | null { + surfaceFromPoint(ndcPosition: Vector2, object: Object3D = this): string|null { const model = this.element.model; if (model == null) { return null; @@ -1184,12 +1190,12 @@ export class ModelScene extends Scene { } const node = model[$nodeFromPoint](hit); - const { meshes, primitives } = node.mesh.userData.associations; + const {meshes, primitives} = node.mesh.userData.associations; const va = new Vector3(); const vb = new Vector3(); const vc = new Vector3(); - const { a, b, c } = hit.face; + const {a, b, c} = hit.face; const mesh = hit.object as any; mesh.getVertexPosition(a, va); mesh.getVertexPosition(b, vb); @@ -1198,7 +1204,8 @@ export class ModelScene extends Scene { const uvw = new Vector3(); tri.getBarycoord(mesh.worldToLocal(hit.point), uvw); - return `${meshes} ${primitives} ${a} ${b} ${c} ${uvw.x.toFixed(3)} ${uvw.y.toFixed(3)} ${uvw.z.toFixed(3)}`; + return `${meshes} ${primitives} ${a} ${b} ${c} ${uvw.x.toFixed(3)} ${ + uvw.y.toFixed(3)} ${uvw.z.toFixed(3)}`; } /** @@ -1223,7 +1230,7 @@ export class ModelScene extends Scene { * Helper method to apply a function to all hotspots. */ forHotspots(func: (hotspot: Hotspot) => void) { - const { children } = this.target; + const {children} = this.target; for (let i = 0, l = children.length; i < l; i++) { const hotspot = children[i]; if (hotspot instanceof Hotspot) { @@ -1245,11 +1252,11 @@ export class ModelScene extends Scene { return; } const primitiveNode = - this.element.model[$nodeFromIndex](nodes[0].number, nodes[1].number); + this.element.model[$nodeFromIndex](nodes[0].number, nodes[1].number); if (primitiveNode == null) { console.warn( - hotspot.surface + - ' does not match a node/primitive in this glTF! Skipping this hotspot.'); + hotspot.surface + + ' does not match a node/primitive in this glTF! Skipping this hotspot.'); return; } @@ -1257,8 +1264,8 @@ export class ModelScene extends Scene { const tri = new Vector3(nodes[2].number, nodes[3].number, nodes[4].number); if (tri.x >= numVert || tri.y >= numVert || tri.z >= numVert) { console.warn( - hotspot.surface + - ' vertex indices out of range in this glTF! Skipping this hotspot.'); + hotspot.surface + + ' vertex indices out of range in this glTF! Skipping this hotspot.'); return; } @@ -1292,7 +1299,7 @@ export class ModelScene extends Scene { target.setFromMatrixPosition(hotspot.matrixWorld); view.sub(target); normalWorld.copy(hotspot.normal) - .transformDirection(this.target.matrixWorld); + .transformDirection(this.target.matrixWorld); if (view.dot(normalWorld) < 0) { hotspot.hide(); } else { @@ -1321,16 +1328,16 @@ export class ModelScene extends Scene { }); } - updateSchema(src: string | null) { - const { schemaElement, element } = this; - const { alt, poster, iosSrc } = element; + updateSchema(src: string|null) { + const {schemaElement, element} = this; + const {alt, poster, iosSrc} = element; if (src != null) { const encoding = [{ '@type': 'MediaObject', contentUrl: src, encodingFormat: src.split('.').pop()?.toLowerCase() === 'gltf' ? - 'model/gltf+json' : - 'model/gltf-binary' + 'model/gltf+json' : + 'model/gltf-binary' }]; if (iosSrc) { diff --git a/packages/modelviewer.dev/src/docs-and-examples/create-html.ts b/packages/modelviewer.dev/src/docs-and-examples/create-html.ts index a46b55102b..78fcab4c65 100644 --- a/packages/modelviewer.dev/src/docs-and-examples/create-html.ts +++ b/packages/modelviewer.dev/src/docs-and-examples/create-html.ts @@ -85,13 +85,17 @@ export function starterSidebar(docsOrExample: string) { const isExample = inputList[0] === 'examples'; const docsExamples = isExample ? getCurrentExample(category) : getCurrentDocs(); - const isPostprocesssing = docsOrExample === 'mve' || category === 'postprocessing'; + const isPostprocesssing = + docsOrExample === 'mve' || category === 'postprocessing'; const href = isExample ? '../../' : '../'; nav.innerHTML = `
-
<${isPostprocesssing ? 'model-viewer-effects' : 'model-viewer'}>
+
<${ + isPostprocesssing ? 'model-viewer-effects' : + 'model-viewer'}>
@@ -166,7 +170,8 @@ function createSidebar(category: Category) { const container = document.getElementById('sidebar-category-container'); const lowerCaseTitle = category.htmlName; let subcategories = Object.keys(category); - subcategories = subcategories.filter(k => k !== 'Title' && k !== 'htmlName' && k !== 'Description'); + subcategories = subcategories.filter( + k => k !== 'Title' && k !== 'htmlName' && k !== 'Description'); // Link category href (Loading) to first subcategory (Loading, Attributes) let lowerKey = ''; @@ -295,7 +300,8 @@ function createSubcategory(

- ${subcategory === 'Questions' || subcategory === 'Mixin' ? '' : subcategory} + ${ + subcategory === 'Questions' || subcategory === 'Mixin' ? '' : subcategory}

diff --git a/packages/modelviewer.dev/src/docs-and-examples/sidebar.ts b/packages/modelviewer.dev/src/docs-and-examples/sidebar.ts index 31cf4f60f0..08d572c36e 100644 --- a/packages/modelviewer.dev/src/docs-and-examples/sidebar.ts +++ b/packages/modelviewer.dev/src/docs-and-examples/sidebar.ts @@ -63,7 +63,15 @@ function removeDeactiveCategory(sidebarIds: SidebarIds) { ?.classList.remove('de-active'); } -const identicalCategories = ['loading', 'augmentedreality', 'stagingandcameras', 'annotations', 'lightingandenv', 'animation', 'scenegraph']; +const identicalCategories = [ + 'loading', + 'augmentedreality', + 'stagingandcameras', + 'annotations', + 'lightingandenv', + 'animation', + 'scenegraph' +]; export function getSidebarCategoryForNewPage(): string { const category = previouslyActive.split('-')[0]; diff --git a/packages/modelviewer.dev/src/docs-and-examples/utils.ts b/packages/modelviewer.dev/src/docs-and-examples/utils.ts index ee64e8d1ba..ed6634b78b 100644 --- a/packages/modelviewer.dev/src/docs-and-examples/utils.ts +++ b/packages/modelviewer.dev/src/docs-and-examples/utils.ts @@ -125,7 +125,9 @@ export function init(docsOrExample: string) { (self as any).initFooterLinks = initFooterLinks; function handleSideBarClickToggle(event: any) { - if (!(event.target.classList.contains('sidebar') || event.target.closest(".sidebar")) && !event.target.classList.contains("hamburgerInput")) { + if (!(event.target.classList.contains('sidebar') || + event.target.closest('.sidebar')) && + !event.target.classList.contains('hamburgerInput')) { if (event.target.closest('.tab')) { document.getElementById('sidenav')?.classList.toggle('active'); } else { diff --git a/packages/render-fidelity-tools/src/artifact-creator.ts b/packages/render-fidelity-tools/src/artifact-creator.ts index b11bebf510..2bb40a76a6 100644 --- a/packages/render-fidelity-tools/src/artifact-creator.ts +++ b/packages/render-fidelity-tools/src/artifact-creator.ts @@ -300,8 +300,12 @@ export class ArtifactCreator { if (this.browser == null) { console.log(`🚀 Launching browser`); - // no-sandbox and disable-setuid-sandbox args to resolve puppeteer browser run error in fidelity tests - this.browser = await puppeteer.launch({headless: quiet, args:['--no-sandbox', '--disable-setuid-sandbox']}); + // no-sandbox and disable-setuid-sandbox args to resolve puppeteer browser + // run error in fidelity tests + this.browser = await puppeteer.launch({ + headless: quiet, + args: ['--no-sandbox', '--disable-setuid-sandbox'] + }); } const page = await this.browser.newPage(); @@ -381,8 +385,8 @@ export class ArtifactCreator { // Ignored... } - const screenshot = - await page.screenshot({path: outputPath as `${string}.png`, omitBackground: true}); + const screenshot = await page.screenshot( + {path: outputPath as `${string}.png`, omitBackground: true}); page.close(); diff --git a/packages/render-fidelity-tools/src/common.ts b/packages/render-fidelity-tools/src/common.ts index 80cd4908fc..c64c9ded95 100644 --- a/packages/render-fidelity-tools/src/common.ts +++ b/packages/render-fidelity-tools/src/common.ts @@ -109,13 +109,8 @@ export interface ScenarioConfig { } export interface RendererConfig { - name: string, - description: string, - scripts?: {setup: string}, - command?: { - executable?: string, - args?: string[] - } + name: string, description: string, scripts?: {setup: string}, + command?: {executable?: string, args?: string[]} } export interface GoldenConfig extends RendererConfig { diff --git a/packages/render-fidelity-tools/src/components/magnifying-glass.ts b/packages/render-fidelity-tools/src/components/magnifying-glass.ts index dc8a1e11c3..3f46d3b05c 100644 --- a/packages/render-fidelity-tools/src/components/magnifying-glass.ts +++ b/packages/render-fidelity-tools/src/components/magnifying-glass.ts @@ -86,7 +86,8 @@ export class MagnifyingGlass extends LitElement { return this.direction === 'horizontal' ? x < (width / 2) ? 'right' : 'left' : - y < (height / 2) ? 'bottom' : 'top'; + y < (height / 2) ? 'bottom' : + 'top'; } render() { diff --git a/packages/render-fidelity-tools/src/workflows/test-fidelity.ts b/packages/render-fidelity-tools/src/workflows/test-fidelity.ts index bf6bfd4214..7cbea2d8db 100644 --- a/packages/render-fidelity-tools/src/workflows/test-fidelity.ts +++ b/packages/render-fidelity-tools/src/workflows/test-fidelity.ts @@ -175,7 +175,8 @@ async function main() { } if (fidelityRegressionWarningCount > 0) { - console.log(`Warnings on ${fidelityRegressionWarningCount} scenarios❗️`); + console.log( + `Warnings on ${fidelityRegressionWarningCount} scenarios❗️`); console.log('\n🔍 Logging warning scenarios: '); for (const warning of fidelityRegressionWarnings) { console.log(warning); diff --git a/packages/space-opera/src/components/animation_controls/animation_controls.ts b/packages/space-opera/src/components/animation_controls/animation_controls.ts index e4928f4dd2..8af2e92425 100644 --- a/packages/space-opera/src/components/animation_controls/animation_controls.ts +++ b/packages/space-opera/src/components/animation_controls/animation_controls.ts @@ -21,7 +21,7 @@ import '../shared/checkbox/checkbox.js'; import '@polymer/paper-item'; import {html} from 'lit'; -import {customElement, state, query} from 'lit/decorators.js'; +import {customElement, query, state} from 'lit/decorators.js'; import {reduxStore} from '../../space_opera_base.js'; import {State} from '../../types.js'; diff --git a/packages/space-opera/src/components/best_practices/best_practices.ts b/packages/space-opera/src/components/best_practices/best_practices.ts index ad67ed657a..4c2c1e1fc5 100644 --- a/packages/space-opera/src/components/best_practices/best_practices.ts +++ b/packages/space-opera/src/components/best_practices/best_practices.ts @@ -16,11 +16,13 @@ */ import {html} from 'lit'; -import {customElement, state, query} from 'lit/decorators.js'; +import {customElement, query, state} from 'lit/decorators.js'; + import {reduxStore} from '../../space_opera_base'; import {BestPracticesState, State} from '../../types'; import {ConnectedLitElement} from '../connected_lit_element/connected_lit_element'; import {CheckboxElement} from '../shared/checkbox/checkbox'; + import {dispatchSetARButton, dispatchSetARPrompt, dispatchSetProgressBar, getBestPractices} from './reducer'; /** diff --git a/packages/space-opera/src/components/camera_settings/components/limits_base.ts b/packages/space-opera/src/components/camera_settings/components/limits_base.ts index 78c580f7f6..d0a4f7f646 100644 --- a/packages/space-opera/src/components/camera_settings/components/limits_base.ts +++ b/packages/space-opera/src/components/camera_settings/components/limits_base.ts @@ -22,7 +22,7 @@ import '../../shared/slider_with_input/slider_with_input.js'; import '../../shared/checkbox/checkbox.js'; import {html} from 'lit'; -import {state, query} from 'lit/decorators.js'; +import {query, state} from 'lit/decorators.js'; import {Limits} from '../../config/types.js'; import {ConnectedLitElement} from '../../connected_lit_element/connected_lit_element.js'; diff --git a/packages/space-opera/src/components/hotspot_panel/hotspot_editor.ts b/packages/space-opera/src/components/hotspot_panel/hotspot_editor.ts index 329990398d..a5e535c04c 100644 --- a/packages/space-opera/src/components/hotspot_panel/hotspot_editor.ts +++ b/packages/space-opera/src/components/hotspot_panel/hotspot_editor.ts @@ -23,8 +23,8 @@ import {html, LitElement, PropertyValues} from 'lit'; import {customElement, property, query} from 'lit/decorators.js'; import {reduxStore} from '../../space_opera_base.js'; - import {hotspotEditorStyles} from '../../styles.css.js'; + import {dispatchRemoveHotspot, dispatchUpdateHotspot} from './reducer.js'; import {HotspotConfig} from './types.js'; diff --git a/packages/space-opera/src/components/mobile_view/components/mobile_modal.ts b/packages/space-opera/src/components/mobile_view/components/mobile_modal.ts index 2670eb00fe..9399a56aa0 100644 --- a/packages/space-opera/src/components/mobile_view/components/mobile_modal.ts +++ b/packages/space-opera/src/components/mobile_view/components/mobile_modal.ts @@ -16,7 +16,7 @@ */ import {html} from 'lit'; -import {customElement, state, property, query} from 'lit/decorators.js'; +import {customElement, property, query, state} from 'lit/decorators.js'; // @ts-ignore, the qrious package isn't typed import QRious from 'qrious'; @@ -65,7 +65,8 @@ export class MobileModal extends ConnectedLitElement {
- ${this.viewableSite} + ${ + this.viewableSite}
This uses a third-party piping server to deploy to your mobile device. This server does not store data. diff --git a/packages/space-opera/src/components/model_viewer_preview/model_viewer_preview.ts b/packages/space-opera/src/components/model_viewer_preview/model_viewer_preview.ts index f10f4f5aef..5c237b12ae 100644 --- a/packages/space-opera/src/components/model_viewer_preview/model_viewer_preview.ts +++ b/packages/space-opera/src/components/model_viewer_preview/model_viewer_preview.ts @@ -155,7 +155,7 @@ export class ModelViewerPreview extends ConnectedLitElement { private async onModelLoaded() { reduxStore.dispatch(await dispatchModel()); if (this.modelViewer.availableAnimations.length > 0) { - reduxStore.dispatch(dispatchAutoplayEnabled(true)); + reduxStore.dispatch(dispatchAutoplayEnabled(true)); } const config = getConfig(reduxStore.getState()); reduxStore.dispatch(dispatchConfig({...config})); @@ -168,35 +168,35 @@ export class ModelViewerPreview extends ConnectedLitElement { private addHotspot(event: MouseEvent) { if (getModelViewer().availableAnimations.length > 0) { - const surface = - this.modelViewer.surfaceFromPoint(event.clientX, event.clientY); - if (!surface) { - console.log('Click was not on model, no hotspot added.'); - return; - } - reduxStore.dispatch(dispatchAddHotspot({ - name: generateUniqueHotspotName(), - surface, - })); + const surface = + this.modelViewer.surfaceFromPoint(event.clientX, event.clientY); + if (!surface) { + console.log('Click was not on model, no hotspot added.'); + return; + } + reduxStore.dispatch(dispatchAddHotspot({ + name: generateUniqueHotspotName(), + surface, + })); } else { - const point = this.modelViewer.positionAndNormalFromPoint( - event.clientX, event.clientY); - if (!point) { - console.log('Click was not on model, no hotspot added.'); - return; - } - reduxStore.dispatch(dispatchAddHotspot({ - name: generateUniqueHotspotName(), - position: point.position.toString(), - normal: point.normal.toString() - })); + const point = this.modelViewer.positionAndNormalFromPoint( + event.clientX, event.clientY); + if (!point) { + console.log('Click was not on model, no hotspot added.'); + return; + } + reduxStore.dispatch(dispatchAddHotspot({ + name: generateUniqueHotspotName(), + position: point.position.toString(), + normal: point.normal.toString() + })); } reduxStore.dispatch(dispatchUpdateHotspotMode(false)); } private onDragover(event: DragEvent) { if (!event.dataTransfer) - return; + return; event.stopPropagation(); event.preventDefault(); @@ -207,26 +207,25 @@ export class ModelViewerPreview extends ConnectedLitElement { event.preventDefault(); if (event.dataTransfer && event.dataTransfer.items[0].kind === 'file') { - const file = event.dataTransfer.items[0].getAsFile(); - if (!file) - return; - if (file.name.match(/\.(glb|gltf)$/i)) { - const arrayBuffer = await file.arrayBuffer(); - reduxStore.dispatch(dispatchSetModelName(file.name)); - const url = - createSafeObjectUrlFromArrayBuffer(arrayBuffer).unsafeUrl; - reduxStore.dispatch(dispatchGltfUrl(url)); - dispatchConfig(extractStagingConfig(this.config)); - reduxStore.dispatch(dispatchCameraControlsEnabled(true)); - reduxStore.dispatch(dispatchSetHotspots([])); - } - if (file.name.match(/\.(hdr|png|jpg|jpeg)$/i)) { - const unsafeUrl = await createBlobUrlFromEnvironmentImage(file); - reduxStore.dispatch( - dispatchAddEnvironmentImage({uri: unsafeUrl, name: file.name})); - reduxStore.dispatch(dispatchEnvironmentImage(unsafeUrl)); - reduxStore.dispatch(dispatchSetEnvironmentName(file.name)); - } + const file = event.dataTransfer.items[0].getAsFile(); + if (!file) + return; + if (file.name.match(/\.(glb|gltf)$/i)) { + const arrayBuffer = await file.arrayBuffer(); + reduxStore.dispatch(dispatchSetModelName(file.name)); + const url = createSafeObjectUrlFromArrayBuffer(arrayBuffer).unsafeUrl; + reduxStore.dispatch(dispatchGltfUrl(url)); + dispatchConfig(extractStagingConfig(this.config)); + reduxStore.dispatch(dispatchCameraControlsEnabled(true)); + reduxStore.dispatch(dispatchSetHotspots([])); + } + if (file.name.match(/\.(hdr|png|jpg|jpeg)$/i)) { + const unsafeUrl = await createBlobUrlFromEnvironmentImage(file); + reduxStore.dispatch( + dispatchAddEnvironmentImage({uri: unsafeUrl, name: file.name})); + reduxStore.dispatch(dispatchEnvironmentImage(unsafeUrl)); + reduxStore.dispatch(dispatchSetEnvironmentName(file.name)); + } } } } diff --git a/packages/space-opera/src/components/model_viewer_snippet/model_viewer_snippet.ts b/packages/space-opera/src/components/model_viewer_snippet/model_viewer_snippet.ts index e4164fe575..9657399c81 100644 --- a/packages/space-opera/src/components/model_viewer_snippet/model_viewer_snippet.ts +++ b/packages/space-opera/src/components/model_viewer_snippet/model_viewer_snippet.ts @@ -23,7 +23,7 @@ import '../shared/snippet_viewer/snippet_viewer.js'; import '../shared/expandable_content/expandable_tab.js'; import {html} from 'lit'; -import {customElement, state, property, query} from 'lit/decorators.js'; +import {customElement, property, query, state} from 'lit/decorators.js'; import {reduxStore} from '../../space_opera_base.js'; import {ArConfigState, BestPracticesState, ImageType, INITIAL_STATE, ModelViewerConfig, RelativeFilePathsState, State} from '../../types.js'; diff --git a/packages/space-opera/src/components/model_viewer_snippet/parse_hotspot_config.ts b/packages/space-opera/src/components/model_viewer_snippet/parse_hotspot_config.ts index db997c6ba3..c472580500 100644 --- a/packages/space-opera/src/components/model_viewer_snippet/parse_hotspot_config.ts +++ b/packages/space-opera/src/components/model_viewer_snippet/parse_hotspot_config.ts @@ -60,7 +60,9 @@ function parseHotspotConfig(element: HTMLElement): HotspotConfig { throw new Error(`no surface or position for hotspot at slot "${ element.getAttribute('slot')}"`); } - const annotation = (element.querySelector('.HotspotAnnotation') as HTMLElement)?.innerText || undefined; // Update here + const annotation = + (element.querySelector('.HotspotAnnotation') as HTMLElement)?.innerText || + undefined; // Update here return {name, surface, position, normal, annotation}; } diff --git a/packages/space-opera/src/components/shared/checkbox/checkbox.ts b/packages/space-opera/src/components/shared/checkbox/checkbox.ts index 4ab1c05134..72e809e73c 100644 --- a/packages/space-opera/src/components/shared/checkbox/checkbox.ts +++ b/packages/space-opera/src/components/shared/checkbox/checkbox.ts @@ -16,8 +16,8 @@ */ import '@material/mwc-checkbox'; -import {Checkbox} from '@material/mwc-checkbox'; +import {Checkbox} from '@material/mwc-checkbox'; import {html, LitElement} from 'lit'; import {customElement, property, query} from 'lit/decorators.js'; diff --git a/packages/space-opera/src/components/shared/expandable_content/expandable_switch.ts b/packages/space-opera/src/components/shared/expandable_content/expandable_switch.ts index 441d6adb00..8cf0b05577 100644 --- a/packages/space-opera/src/components/shared/expandable_content/expandable_switch.ts +++ b/packages/space-opera/src/components/shared/expandable_content/expandable_switch.ts @@ -17,8 +17,8 @@ import '@material/mwc-switch'; import './expandable_section.js'; -import {Switch} from '@material/mwc-switch'; +import {Switch} from '@material/mwc-switch'; import {html, LitElement} from 'lit'; import {customElement, property} from 'lit/decorators.js'; diff --git a/packages/space-opera/src/components/shared/mv_link/mv_link.ts b/packages/space-opera/src/components/shared/mv_link/mv_link.ts index e3f63ef446..6732a01a1f 100644 --- a/packages/space-opera/src/components/shared/mv_link/mv_link.ts +++ b/packages/space-opera/src/components/shared/mv_link/mv_link.ts @@ -17,6 +17,7 @@ import {html, LitElement} from 'lit'; import {customElement} from 'lit/decorators.js'; + import {styles} from './styles.css.js'; /** diff --git a/packages/space-opera/src/components/shared/radio_group/radio_group.ts b/packages/space-opera/src/components/shared/radio_group/radio_group.ts index 2f1aa566ac..e19a21063d 100644 --- a/packages/space-opera/src/components/shared/radio_group/radio_group.ts +++ b/packages/space-opera/src/components/shared/radio_group/radio_group.ts @@ -20,6 +20,7 @@ import '@polymer/paper-radio-group'; import {html, LitElement} from 'lit'; import {customElement, property} from 'lit/decorators.js'; + import {styles} from './radio_group.css.js'; /** diff --git a/packages/space-opera/src/components/shared/section_row/section_row.ts b/packages/space-opera/src/components/shared/section_row/section_row.ts index 34df2d2b40..68612ca87d 100644 --- a/packages/space-opera/src/components/shared/section_row/section_row.ts +++ b/packages/space-opera/src/components/shared/section_row/section_row.ts @@ -17,6 +17,7 @@ import {html, LitElement} from 'lit'; import {customElement, property} from 'lit/decorators.js'; + import {styles} from './section_row.css.js'; /** diff --git a/packages/space-opera/src/components/shared/tabs/tabs.ts b/packages/space-opera/src/components/shared/tabs/tabs.ts index 85d1c97fef..840373a0b7 100644 --- a/packages/space-opera/src/components/shared/tabs/tabs.ts +++ b/packages/space-opera/src/components/shared/tabs/tabs.ts @@ -16,12 +16,12 @@ */ import '@material/mwc-tab-bar'; +import './tab'; import {html, LitElement} from 'lit'; import {customElement, property} from 'lit/decorators.js'; import {styles} from './styles.css.js'; -import './tab'; /** * A tabbed panel. diff --git a/packages/space-opera/src/components/utils/spread_directive.ts b/packages/space-opera/src/components/utils/spread_directive.ts index e70e960952..075904910d 100644 --- a/packages/space-opera/src/components/utils/spread_directive.ts +++ b/packages/space-opera/src/components/utils/spread_directive.ts @@ -12,14 +12,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { - directive, - Directive, - DirectiveParameters, - ElementPart, - PartInfo, - PartType, -} from 'lit/directive.js'; +import {directive, Directive, DirectiveParameters, ElementPart, PartInfo, PartType,} from 'lit/directive.js'; const Binding = { ATTRIBUTE: 'ATTRIBUTE' as 'ATTRIBUTE', @@ -31,7 +24,7 @@ const Binding = { type Binding = keyof typeof Binding; class Spread extends Directive { - oldBinds: { [bind: string]: unknown } = {}; + oldBinds: {[bind: string]: unknown} = {}; constructor(info: PartInfo) { super(info); @@ -67,12 +60,8 @@ class Spread extends Directive { } handleExistingBind( - part: ElementPart, - bind: string, - bindName: string, - value: unknown, - bindKind: Binding - ) { + part: ElementPart, bind: string, bindName: string, value: unknown, + bindKind: Binding) { const hasBindChanged = this.oldBinds[bind] !== value; if (!hasBindChanged) { @@ -81,9 +70,7 @@ class Spread extends Directive { if (bindKind === Binding.EVENT) { part.element.removeEventListener( - bindName, - this.oldBinds[bind] as EventListener - ); + bindName, this.oldBinds[bind] as EventListener); } this.handleNewBind(part, bindName, value, bindKind); @@ -92,11 +79,7 @@ class Spread extends Directive { } handleNewBind( - part: ElementPart, - bindName: string, - value: unknown, - bindKind: Binding - ) { + part: ElementPart, bindName: string, value: unknown, bindKind: Binding) { switch (bindKind) { case Binding.ATTRIBUTE: part.element.setAttribute(bindName, value as string); @@ -114,11 +97,7 @@ class Spread extends Directive { } handleRemovedBind( - part: ElementPart, - bindName: string, - value: unknown, - bindKind: Binding - ) { + part: ElementPart, bindName: string, value: unknown, bindKind: Binding) { switch (bindKind) { case Binding.ATTRIBUTE: case Binding.BOOLEAN_ATTRIBUTE: @@ -146,10 +125,10 @@ class Spread extends Directive { } } - render(binds: { [bind: string]: unknown }) { + render(binds: {[bind: string]: unknown}) { this.oldBinds = {...binds}; } } export const spread = directive(Spread); -export type { Spread }; +export type{Spread};