miscellaneous changes (google#1677)

* replace all quotations with empty string, default camera-controls is true

* update environment skybox checkbox

* update environment skybox checkbox white

* fix, poster doesn't update material edits after interaction

* remove comment

packages/space-opera/src/components/ibl_selector/ibl_selector.css.ts

@@ -22,6 +22,12 @@ export const styles: CSSResult = css`.HeaderLabel {
   font-weight: 500;
 }
 
+.defaultError {
+  margin-top: 0;
+  margin-left: 15px;
+  color: #FFFFFF;
+}
+
 .EnvironmnetImageDropdown,
 .UploadButton,
 .Row {

packages/space-opera/src/components/ibl_selector/ibl_selector.ts

@@ -153,15 +153,17 @@ export class IblSelector extends ConnectedLitElement {
               value="${this.config.exposure ?? DEFAULT_EXPOSURE}">
             </me-slider-with-input>
           </me-section-row>
-          <me-section-row class="Row" label="Use Environment as Skybox">
-            <me-checkbox id="skybox"
+          <me-checkbox 
+            id="skybox" 
+            label="Use Environment as Skybox"
             ?checked="${!!this.config.useEnvAsSkybox}"
-            @change=${this.onUseEnvAsSkyboxChange}></me-checkbox>
-            ${
+            @change=${this.onUseEnvAsSkyboxChange}
+            >
+          </me-checkbox>
+          ${
         selectedIndex === 0 && this.config.useEnvAsSkybox ?
-            html`<br/><div><small>Choose a non-default environment</small></div>` :
+            html`<div class="defaultError"><small>Choose a non-default environment</small></div>` :
             html``}
-          </me-section-row>
 
           <me-section-row class="Row" label="Shadow Intensity">
             <me-slider-with-input min="0" max="10" step="0.1" id="shadow-intensity"

packages/space-opera/src/components/model_viewer_preview/gltf_edits.ts

@@ -83,7 +83,7 @@ class DispatchGltfArgs {
   }
 }
 
-function dispatchGltf(args?: DispatchGltfArgs) {
+function dispatchGltf(args?: DispatchGltfArgs, isFromPoster?: boolean) {
   if (!args) {
     throw new Error(`No args given!`);
   }
@@ -100,7 +100,9 @@ function dispatchGltf(args?: DispatchGltfArgs) {
   if (getEdits(reduxStore.getState()) === edits) {
     throw new Error(`Same edits was given! Only call this upon actual change`);
   }
-  reduxStore.dispatch(dispatchSetEdits(edits));
+  if (!isFromPoster) {
+    reduxStore.dispatch(dispatchSetEdits(edits));
+  }
   reduxStore.dispatch(dispatchSetOrigEdits(edits));
   reduxStore.dispatch(dispatchSetAnimationNames(args.animationNames));
   reduxStore.dispatch(dispatchGltfJsonString(args.jsonString));
@@ -109,14 +111,17 @@ function dispatchGltf(args?: DispatchGltfArgs) {
 /**
  * Helper async function
  */
-export function dispatchGltfAndEdits(gltf: GltfModel|undefined) {
+export function dispatchGltfAndEdits(
+    gltf: GltfModel|undefined, isFromPoster?: boolean) {
   // NOTE: This encodes a design decision: Whether or not we reset edits
   // upon loading a new GLTF. It may be sensible to not reset edits and just
   // apply previous edits to the same, but updated, GLTF. That could be
   // later exposed as an option, and in that case we would simply apply the
   // existing edits (with null previousEdits) to this new model and not
   // dispatch new edits.
   const edits = gltf ? getGltfEdits(gltf) : {...INITIAL_GLTF_EDITS};
-  dispatchGltf(new DispatchGltfArgs(
-      gltf, edits, (gltf?.animationNames) ?? [], (gltf?.jsonString) ?? ''));
+  dispatchGltf(
+      new DispatchGltfArgs(
+          gltf, edits, (gltf?.animationNames) ?? [], (gltf?.jsonString) ?? ''),
+      isFromPoster);
 }

packages/space-opera/src/components/model_viewer_preview/model_viewer_preview.ts

@@ -39,7 +39,7 @@ import {ConnectedLitElement} from '../connected_lit_element/connected_lit_elemen
 import {dispatchAddHotspot, dispatchSetHotspots, dispatchUpdateHotspotMode, generateUniqueHotspotName, getHotspotMode, getHotspots} from '../hotspot_panel/reducer.js';
 import {HotspotConfig} from '../hotspot_panel/types.js';
 import {createBlobUrlFromEnvironmentImage, dispatchAddEnvironmentImage} from '../ibl_selector/reducer.js';
-import {getEdits} from '../materials_panel/reducer.js';
+import {getEdits, getOrigEdits} from '../materials_panel/reducer.js';
 import {dispatchConfig} from '../model_viewer_snippet/reducer.js';
 import {styles as hotspotStyles} from '../utils/hotspot/hotspot.css.js';
 import {renderHotspots} from '../utils/hotspot/render_hotspots.js';
@@ -52,6 +52,7 @@ import {dispatchGltfUrl, getGltfModel, getGltfUrl} from './reducer.js';
 import {GltfEdits, INITIAL_GLTF_EDITS} from './types.js';
 
 const $edits = Symbol('edits');
+const $origEdits = Symbol('origEdits');
 const $gltfUrl = Symbol('gltfUrl');
 const $gltf = Symbol('gltf');
 const $autoplay = Symbol('autoplay');
@@ -95,6 +96,7 @@ export class ModelViewerPreview extends ConnectedLitElement {
   @internalProperty() addHotspotMode = false;
   @internalProperty()[$autoplay]?: boolean;
   @internalProperty()[$edits]: GltfEdits = INITIAL_GLTF_EDITS;
+  @internalProperty()[$origEdits]: GltfEdits = INITIAL_GLTF_EDITS;
   @internalProperty()[$gltf]?: GltfModel;
   @internalProperty()[$gltfUrl]?: string;
   @internalProperty() gltfError: string = '';
@@ -104,6 +106,7 @@ export class ModelViewerPreview extends ConnectedLitElement {
     this.camera = getCamera(state);
     this.config = getConfig(state);
     this.hotspots = getHotspots(state);
+    this[$origEdits] = getOrigEdits(state);
     this[$edits] = getEdits(state);
     this[$gltf] = getGltfModel(state);
     this[$gltfUrl] = getGltfUrl(state);
@@ -121,9 +124,11 @@ export class ModelViewerPreview extends ConnectedLitElement {
     }
 
     // Clear potential poster settings.
-    if (this.config.reveal === 'interaction' ||
-        this.config.reveal === 'manual') {
-      this.modelViewer.reveal = this.config.reveal;
+    let isFromPoster = false;
+    if (this.modelViewer.reveal === 'interaction' ||
+        this.modelViewer.reveal === 'manual') {
+      this.modelViewer.reveal = 'auto';
+      isFromPoster = true;
     } else {
       this.modelViewer.reveal = 'auto';
     }
@@ -137,7 +142,10 @@ export class ModelViewerPreview extends ConnectedLitElement {
 
         const {gltfJson, gltfBuffer} = unpackGlb(glbContents);
         const gltf = new GltfModel(gltfJson, gltfBuffer, this.modelViewer);
-        dispatchGltfAndEdits(gltf);
+        dispatchGltfAndEdits(gltf, isFromPoster);
+        if (isFromPoster) {
+          this.updateGltf(false, this[$origEdits]);
+        }
       } catch (error) {
         this.gltfError = error.message;
       }
@@ -159,7 +167,6 @@ export class ModelViewerPreview extends ConnectedLitElement {
       // Got a new GLTF, assume that previous edits were not applied yet.
       previousEdits = undefined;
     }
-
     const gltf = this[$gltf];
     if (gltf) {
       await applyEdits(gltf, this[$edits], previousEdits);
@@ -245,6 +252,7 @@ export class ModelViewerPreview extends ConnectedLitElement {
 
   private onModelLoaded() {
     // Handle the case when the model is loaded for the first time.
+    this.onGltfUrlChanged();
     this.enforcePlayAnimation();
   }
 

packages/space-opera/src/components/model_viewer_snippet/components/open_button.ts

@@ -21,7 +21,7 @@ import '../../file_modal/file_modal.js';
 import {createSafeObjectUrlFromArrayBuffer} from '@google/model-viewer-editing-adapter/lib/util/create_object_url.js'
 import {customElement, html, LitElement, query} from 'lit-element';
 
-import {getConfig} from '../../../components/config/reducer.js';
+import {dispatchCameraControlsEnabled, getConfig} from '../../../components/config/reducer.js';
 import {reduxStore} from '../../../space_opera_base.js';
 import {extractStagingConfig} from '../../../types.js';
 import {FileModalElement} from '../../file_modal/file_modal.js';
@@ -54,6 +54,8 @@ export class OpenButton extends LitElement {
     const url = createSafeObjectUrlFromArrayBuffer(arrayBuffer).unsafeUrl;
     reduxStore.dispatch(dispatchGltfUrl(url));
     dispatchConfig(extractStagingConfig(getConfig(reduxStore.getState())));
+    // enable camera controls by default
+    reduxStore.dispatch(dispatchCameraControlsEnabled(true));
     reduxStore.dispatch(dispatchSetHotspots([]));
   }
 }

packages/space-opera/src/components/model_viewer_snippet/model_viewer_snippet.ts

@@ -178,7 +178,7 @@ export class ModelViewerSnippet extends LitElement {
   render() {
     const exampleLoadableSnippet = `<model-viewer
   src='https://modelviewer.dev/shared-assets/models/Astronaut.glb'
-  shadow-intensity="1">
+  shadow-intensity="1" camera-controls>
 </model-viewer>`;
 
     return html`

packages/space-opera/src/components/shared/snippet_viewer/snippet_viewer.ts

@@ -76,7 +76,7 @@ ${css_beautify(this.renderedStyle)}
     // Remove the ar-status runtime-added tag
     html = html.replace(/ar-status="[\w- ]+" */, '');
     // Remove redundant ="" for boolean attribs
-    html = html.replace(/=""/, '');
+    html = html.replace(/=""/g, '');
     return html_beautify(html);
   }
 }