cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
222 lines (221 loc) • 10.2 kB
JavaScript
import { property as e } from "../../../../_@lit_reactive-element@1.6.1@@lit/reactive-element/decorators/property.mjs";
import "../../../../_@lit_reactive-element@1.6.1@@lit/reactive-element/decorators/query-assigned-elements.mjs";
import { Vector3 } from "../../../../_three@0.150.1@three/build/three.module.mjs";
import { $updateSource, $userInputElement, $announceModelVisibility, toVector3D, $scene, $progressTracker, $altDefaulted, $shouldAttemptPreload, $isElementInViewport, $getModelIsVisible } from "../model-viewer-base.mjs";
import { CachingGLTFLoader, $loader } from "../three-components/CachingGLTFLoader.mjs";
import { Renderer } from "../three-components/Renderer.mjs";
import { throttle } from "../utilities.mjs";
/* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* Licensed under the Apache License, Version 2.0 (the 'License');
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an 'AS IS' BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
var __decorate = globalThis && globalThis.__decorate || function(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const PROGRESS_BAR_UPDATE_THRESHOLD = 100;
const DEFAULT_DRACO_DECODER_LOCATION = "https://www.gstatic.com/draco/versioned/decoders/1.5.6/";
const DEFAULT_KTX2_TRANSCODER_LOCATION = "https://www.gstatic.com/basis-universal/versioned/2021-04-15-ba1c3e4/";
const DEFAULT_LOTTIE_LOADER_LOCATION = "https://cdn.jsdelivr.net/npm/three@0.149.0/examples/jsm/loaders/LottieLoader.js";
const RevealStrategy = {
AUTO: "auto",
MANUAL: "manual"
};
const LoadingStrategy = {
AUTO: "auto",
LAZY: "lazy",
EAGER: "eager"
};
const $defaultProgressBarElement = Symbol("defaultProgressBarElement");
const $posterContainerElement = Symbol("posterContainerElement");
const $defaultPosterElement = Symbol("defaultPosterElement");
const $shouldDismissPoster = Symbol("shouldDismissPoster");
const $hidePoster = Symbol("hidePoster");
const $modelIsRevealed = Symbol("modelIsRevealed");
const $updateProgressBar = Symbol("updateProgressBar");
const $ariaLabelCallToAction = Symbol("ariaLabelCallToAction");
const $onProgress = Symbol("onProgress");
const LoadingMixin = (ModelViewerElement) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
class LoadingModelViewerElement extends ModelViewerElement {
constructor(...args) {
super(...args);
this.poster = null;
this.reveal = RevealStrategy.AUTO;
this.loading = LoadingStrategy.AUTO;
this[_a] = false;
this[_b] = false;
this[_c] = this.shadowRoot.querySelector(".slot.poster");
this[_d] = this.shadowRoot.querySelector("#default-poster");
this[_e] = this.shadowRoot.querySelector("#default-progress-bar > .bar");
this[_f] = this[$defaultPosterElement].getAttribute("aria-label");
this[_g] = throttle((progress) => {
const parentNode = this[$defaultProgressBarElement].parentNode;
requestAnimationFrame(() => {
this[$defaultProgressBarElement].style.transform = `scaleX(${progress})`;
if (progress === 0) {
parentNode.removeChild(this[$defaultProgressBarElement]);
parentNode.appendChild(this[$defaultProgressBarElement]);
}
if (progress === 1) {
this[$defaultProgressBarElement].classList.add("hide");
} else {
this[$defaultProgressBarElement].classList.remove("hide");
}
});
}, PROGRESS_BAR_UPDATE_THRESHOLD);
this[_h] = (event) => {
const progress = event.detail.totalProgress;
if (progress === 1) {
this[$updateProgressBar].flush();
if (this.loaded && (this[$shouldDismissPoster] || this.reveal === RevealStrategy.AUTO)) {
this[$hidePoster]();
}
}
this[$updateProgressBar](progress);
this.dispatchEvent(new CustomEvent("progress", { detail: { totalProgress: progress } }));
};
const ModelViewerElement2 = self.ModelViewerElement || {};
const dracoDecoderLocation = ModelViewerElement2.dracoDecoderLocation || DEFAULT_DRACO_DECODER_LOCATION;
CachingGLTFLoader.setDRACODecoderLocation(dracoDecoderLocation);
const ktx2TranscoderLocation = ModelViewerElement2.ktx2TranscoderLocation || DEFAULT_KTX2_TRANSCODER_LOCATION;
CachingGLTFLoader.setKTX2TranscoderLocation(ktx2TranscoderLocation);
if (ModelViewerElement2.meshoptDecoderLocation) {
CachingGLTFLoader.setMeshoptDecoderLocation(ModelViewerElement2.meshoptDecoderLocation);
}
const lottieLoaderLocation = ModelViewerElement2.lottieLoaderLocation || DEFAULT_LOTTIE_LOADER_LOCATION;
Renderer.singleton.textureUtils.lottieLoaderUrl = lottieLoaderLocation;
}
static set dracoDecoderLocation(value) {
CachingGLTFLoader.setDRACODecoderLocation(value);
}
static get dracoDecoderLocation() {
return CachingGLTFLoader.getDRACODecoderLocation();
}
static set ktx2TranscoderLocation(value) {
CachingGLTFLoader.setKTX2TranscoderLocation(value);
}
static get ktx2TranscoderLocation() {
return CachingGLTFLoader.getKTX2TranscoderLocation();
}
static set meshoptDecoderLocation(value) {
CachingGLTFLoader.setMeshoptDecoderLocation(value);
}
static get meshoptDecoderLocation() {
return CachingGLTFLoader.getMeshoptDecoderLocation();
}
static set lottieLoaderLocation(value) {
Renderer.singleton.textureUtils.lottieLoaderUrl = value;
}
static get lottieLoaderLocation() {
return Renderer.singleton.textureUtils.lottieLoaderUrl;
}
static mapURLs(callback) {
Renderer.singleton.loader[$loader].manager.setURLModifier(callback);
}
dismissPoster() {
if (this.loaded) {
this[$hidePoster]();
} else {
this[$shouldDismissPoster] = true;
this[$updateSource]();
}
}
showPoster() {
const posterContainerElement = this[$posterContainerElement];
if (posterContainerElement.classList.contains("show")) {
return;
}
posterContainerElement.classList.add("show");
this[$userInputElement].classList.remove("show");
const defaultPosterElement = this[$defaultPosterElement];
defaultPosterElement.removeAttribute("tabindex");
defaultPosterElement.removeAttribute("aria-hidden");
const oldVisibility = this.modelIsVisible;
this[$modelIsRevealed] = false;
this[$announceModelVisibility](oldVisibility);
}
getDimensions() {
return toVector3D(this[$scene].size);
}
getBoundingBoxCenter() {
return toVector3D(this[$scene].boundingBox.getCenter(new Vector3()));
}
connectedCallback() {
super.connectedCallback();
if (!this.loaded) {
this.showPoster();
}
this[$progressTracker].addEventListener("progress", this[$onProgress]);
}
disconnectedCallback() {
super.disconnectedCallback();
this[$progressTracker].removeEventListener("progress", this[$onProgress]);
}
async updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has("poster") && this.poster != null) {
this[$defaultPosterElement].style.backgroundImage = `url(${this.poster})`;
}
if (changedProperties.has("alt")) {
this[$defaultPosterElement].setAttribute("aria-label", this[$altDefaulted]);
}
if (changedProperties.has("reveal") || changedProperties.has("loading")) {
this[$updateSource]();
}
}
[(_a = $modelIsRevealed, _b = $shouldDismissPoster, _c = $posterContainerElement, _d = $defaultPosterElement, _e = $defaultProgressBarElement, _f = $ariaLabelCallToAction, _g = $updateProgressBar, _h = $onProgress, $shouldAttemptPreload)]() {
return !!this.src && (this[$shouldDismissPoster] || this.loading === LoadingStrategy.EAGER || this.reveal === RevealStrategy.AUTO && this[$isElementInViewport]);
}
[$hidePoster]() {
this[$shouldDismissPoster] = false;
const posterContainerElement = this[$posterContainerElement];
if (!posterContainerElement.classList.contains("show")) {
return;
}
posterContainerElement.classList.remove("show");
this[$userInputElement].classList.add("show");
const oldVisibility = this.modelIsVisible;
this[$modelIsRevealed] = true;
this[$announceModelVisibility](oldVisibility);
const root = this.getRootNode();
if (root && root.activeElement === this) {
this[$userInputElement].focus();
}
const defaultPosterElement = this[$defaultPosterElement];
defaultPosterElement.setAttribute("aria-hidden", "true");
defaultPosterElement.tabIndex = -1;
this.dispatchEvent(new CustomEvent("poster-dismissed"));
}
[$getModelIsVisible]() {
return super[$getModelIsVisible]() && this[$modelIsRevealed];
}
}
__decorate([
e({ type: String })
], LoadingModelViewerElement.prototype, "poster", void 0);
__decorate([
e({ type: String })
], LoadingModelViewerElement.prototype, "reveal", void 0);
__decorate([
e({ type: String })
], LoadingModelViewerElement.prototype, "loading", void 0);
return LoadingModelViewerElement;
};
export { $defaultPosterElement, $defaultProgressBarElement, $posterContainerElement, LoadingMixin, PROGRESS_BAR_UPDATE_THRESHOLD };