Skip to content

Commit

Permalink
removed indirection (google#1789)
Browse files Browse the repository at this point in the history
  • Loading branch information
@elalish
elalish authored Dec 29, 2020
1 parent 322d3a7 commit 18b1e61
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 79 deletions.
56 changes: 24 additions & 32 deletions packages/model-viewer/src/features/controls.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,11 +201,6 @@ const $deferInteractionPrompt = Symbol('deferInteractionPrompt');
const $updateAria = Symbol('updateAria');
const $updateCameraForRadius = Symbol('updateCameraForRadius');

const $blurHandler = Symbol('blurHandler');
const $focusHandler = Symbol('focusHandler');
const $changeHandler = Symbol('changeHandler');
const $pointerChangeHandler = Symbol('pointerChangeHandler');

const $onBlur = Symbol('onBlur');
const $onFocus = Symbol('onFocus');
const $onChange = Symbol('onChange');
Expand Down Expand Up @@ -362,15 +357,6 @@ export const ControlsMixin = <T extends Constructor<ModelViewerElementBase>>(
protected[$initialized] = false;
protected[$maintainThetaPhi] = false;

protected[$changeHandler] = (event: Event) =>
this[$onChange](event as ChangeEvent);

protected[$pointerChangeHandler] = (event: Event) =>
this[$onPointerChange](event as PointerChangeEvent);

protected[$focusHandler] = () => this[$onFocus]();
protected[$blurHandler] = () => this[$onBlur]();

getCameraOrbit(): SphericalPosition {
const {theta, phi, radius} = this[$lastSpherical];
return {
Expand Down Expand Up @@ -419,21 +405,27 @@ export const ControlsMixin = <T extends Constructor<ModelViewerElementBase>>(
connectedCallback() {
super.connectedCallback();

this[$controls].addEventListener('change', this[$changeHandler]);
this[$controls].addEventListener(
'pointer-change-start', this[$pointerChangeHandler]);
'change', this[$onChange] as (event: Event) => void);
this[$controls].addEventListener(
'pointer-change-end', this[$pointerChangeHandler]);
'pointer-change-start',
this[$onPointerChange] as (event: Event) => void);
this[$controls].addEventListener(
'pointer-change-end',
this[$onPointerChange] as (event: Event) => void);
}

disconnectedCallback() {
super.disconnectedCallback();

this[$controls].removeEventListener('change', this[$changeHandler]);
this[$controls].removeEventListener(
'pointer-change-start', this[$pointerChangeHandler]);
'change', this[$onChange] as (event: Event) => void);
this[$controls].removeEventListener(
'pointer-change-start',
this[$onPointerChange] as (event: Event) => void);
this[$controls].removeEventListener(
'pointer-change-end', this[$pointerChangeHandler]);
'pointer-change-end',
this[$onPointerChange] as (event: Event) => void);
}

updated(changedProperties: Map<string|number|symbol, unknown>) {
Expand All @@ -449,11 +441,11 @@ export const ControlsMixin = <T extends Constructor<ModelViewerElementBase>>(
this[$waitingToPromptUser] = true;
}

input.addEventListener('focus', this[$focusHandler]);
input.addEventListener('blur', this[$blurHandler]);
input.addEventListener('focus', this[$onFocus]);
input.addEventListener('blur', this[$onBlur]);
} else {
input.removeEventListener('focus', this[$focusHandler]);
input.removeEventListener('blur', this[$blurHandler]);
input.removeEventListener('focus', this[$onFocus]);
input.removeEventListener('blur', this[$onBlur]);

controls.disableInteraction();
this[$deferInteractionPrompt]();
Expand Down Expand Up @@ -704,7 +696,7 @@ export const ControlsMixin = <T extends Constructor<ModelViewerElementBase>>(
this.jumpCameraToGoal();
}

[$onFocus]() {
[$onFocus] = () => {
const input = this[$userInputElement];

if (!isFinite(this[$focusedTime])) {
Expand All @@ -726,9 +718,9 @@ export const ControlsMixin = <T extends Constructor<ModelViewerElementBase>>(
!this[$userHasInteracted]) {
this[$waitingToPromptUser] = true;
}
}
};

[$onBlur]() {
[$onBlur] = () => {
if (this.interactionPrompt !== InteractionPromptStrategy.WHEN_FOCUSED) {
return;
}
Expand All @@ -738,9 +730,9 @@ export const ControlsMixin = <T extends Constructor<ModelViewerElementBase>>(

this[$promptElementVisibleTime] = Infinity;
this[$focusedTime] = Infinity;
}
};

[$onChange]({source}: ChangeEvent) {
[$onChange] = ({source}: ChangeEvent) => {
this[$updateAria]();
this[$needsRender]();

Expand All @@ -751,15 +743,15 @@ export const ControlsMixin = <T extends Constructor<ModelViewerElementBase>>(

this.dispatchEvent(new CustomEvent<CameraChangeDetails>(
'camera-change', {detail: {source}}));
}
};

[$onPointerChange](event: PointerChangeEvent) {
[$onPointerChange] = (event: PointerChangeEvent) => {
if (event.type === 'pointer-change-start') {
this[$container].classList.add('pointer-tumbling');
} else {
this[$container].classList.remove('pointer-tumbling');
}
}
};
}

return ControlsModelViewerElement;
Expand Down
36 changes: 12 additions & 24 deletions packages/model-viewer/src/features/loading.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,6 @@ const $transitioned = Symbol('transitioned');

const $ariaLabelCallToAction = Symbol('ariaLabelCallToAction');

const $clickHandler = Symbol('clickHandler');
const $keydownHandler = Symbol('keydownHandler');
const $progressHandler = Symbol('processHandler');
const $onClick = Symbol('onClick');
const $onKeydown = Symbol('onKeydown');
const $onProgress = Symbol('onProgress');
Expand Down Expand Up @@ -263,12 +260,6 @@ export const LoadingMixin = <T extends Constructor<ModelViewerElementBase>>(
protected[$ariaLabelCallToAction] =
this[$defaultPosterElement].getAttribute('aria-label');

protected[$clickHandler]: () => void = () => this[$onClick]();
protected[$keydownHandler]:
(event: KeyboardEvent) => void = (event) => this[$onKeydown](event);
protected[$progressHandler]:
(event: Event) => void = (event) => this[$onProgress](event);

protected[$updateProgressBar] = throttle((progress: number) => {
const parentNode = this[$defaultProgressBarElement].parentNode as Element;

Expand Down Expand Up @@ -317,12 +308,10 @@ export const LoadingMixin = <T extends Constructor<ModelViewerElementBase>>(
// Fired when a user first clicks the model element. Used to
// change the visibility of a poster image, or start loading
// a model.
this[$posterContainerElement].addEventListener('click', this[$onClick]);
this[$posterContainerElement].addEventListener(
'click', this[$clickHandler]);
this[$posterContainerElement].addEventListener(
'keydown', this[$keydownHandler]);
this[$progressTracker].addEventListener(
'progress', this[$progressHandler]);
'keydown', this[$onKeydown]);
this[$progressTracker].addEventListener('progress', this[$onProgress]);

loadingStatusAnnouncer.registerInstance(this);
}
Expand All @@ -331,11 +320,10 @@ export const LoadingMixin = <T extends Constructor<ModelViewerElementBase>>(
super.disconnectedCallback();

this[$posterContainerElement].removeEventListener(
'click', this[$clickHandler]);
'click', this[$onClick]);
this[$posterContainerElement].removeEventListener(
'keydown', this[$keydownHandler]);
this[$progressTracker].removeEventListener(
'progress', this[$progressHandler]);
'keydown', this[$onKeydown]);
this[$progressTracker].removeEventListener('progress', this[$onProgress]);

loadingStatusAnnouncer.unregisterInstance(this)
}
Expand All @@ -361,14 +349,14 @@ export const LoadingMixin = <T extends Constructor<ModelViewerElementBase>>(
}
}

[$onClick]() {
[$onClick] = () => {
if (this.reveal === RevealStrategy.MANUAL) {
return;
}
this.dismissPoster();
}
};

[$onKeydown](event: KeyboardEvent) {
[$onKeydown] = (event: KeyboardEvent) => {
if (this.reveal === RevealStrategy.MANUAL) {
return;
}
Expand All @@ -382,9 +370,9 @@ export const LoadingMixin = <T extends Constructor<ModelViewerElementBase>>(
default:
break;
}
}
};

[$onProgress](event: Event) {
[$onProgress] = (event: Event) => {
const progress = (event as any).detail.totalProgress;
this[$lastReportedProgress] =
Math.max(progress, this[$lastReportedProgress]);
Expand All @@ -402,7 +390,7 @@ export const LoadingMixin = <T extends Constructor<ModelViewerElementBase>>(

this.dispatchEvent(
new CustomEvent('progress', {detail: {totalProgress: progress}}));
}
};

[$shouldAttemptPreload](): boolean {
return !!this.src &&
Expand Down
11 changes: 4 additions & 7 deletions packages/model-viewer/src/features/staging.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ const rotationRateIntrinsics = {
const $autoRotateStartTime = Symbol('autoRotateStartTime');
const $radiansPerSecond = Symbol('radiansPerSecond');
const $syncRotationRate = Symbol('syncRotationRate');
const $cameraChangeHandler = Symbol('cameraChangeHandler');
const $onCameraChange = Symbol('onCameraChange');

export declare interface StagingInterface {
Expand All @@ -66,20 +65,18 @@ export const StagingMixin = <T extends Constructor<ModelViewerElementBase>>(

private[$autoRotateStartTime] = performance.now();
private[$radiansPerSecond] = 0;
private[$cameraChangeHandler] = (event: CustomEvent<CameraChangeDetails>) =>
this[$onCameraChange](event);

connectedCallback() {
super.connectedCallback();
this.addEventListener(
'camera-change', this[$cameraChangeHandler] as EventListener);
'camera-change', this[$onCameraChange] as EventListener);
this[$autoRotateStartTime] = performance.now();
}

disconnectedCallback() {
super.disconnectedCallback();
this.removeEventListener(
'camera-change', this[$cameraChangeHandler] as EventListener);
'camera-change', this[$onCameraChange] as EventListener);
this[$autoRotateStartTime] = performance.now();
}

Expand Down Expand Up @@ -112,15 +109,15 @@ export const StagingMixin = <T extends Constructor<ModelViewerElementBase>>(
}
}

[$onCameraChange](event: CustomEvent<CameraChangeDetails>) {
[$onCameraChange] = (event: CustomEvent<CameraChangeDetails>) => {
if (!this.autoRotate) {
return;
}

if (event.detail.source === 'user-interaction') {
this[$autoRotateStartTime] = performance.now();
}
}
};

get turntableRotation(): number {
return this[$scene].yaw;
Expand Down
14 changes: 4 additions & 10 deletions packages/model-viewer/src/model-viewer-base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ const $resizeObserver = Symbol('resizeObserver');
const $intersectionObserver = Symbol('intersectionObserver');
const $clearModelTimeout = Symbol('clearModelTimeout');
const $onContextLost = Symbol('onContextLost');
const $contextLostHandler = Symbol('contextLostHandler');

export const $loaded = Symbol('loaded');
export const $updateSize = Symbol('updateSize');
Expand Down Expand Up @@ -169,9 +168,6 @@ export default class ModelViewerElementBase extends UpdatingElement {

protected[$progressTracker]: ProgressTracker = new ProgressTracker();

protected[$contextLostHandler] = (event: ContextLostEvent) =>
this[$onContextLost](event);

/** @export */
get loaded() {
return this[$getLoaded]();
Expand Down Expand Up @@ -312,8 +308,7 @@ export default class ModelViewerElementBase extends UpdatingElement {

const renderer = this[$renderer];
renderer.addEventListener(
'contextlost',
this[$contextLostHandler] as (event: ThreeEvent) => void);
'contextlost', this[$onContextLost] as (event: ThreeEvent) => void);

renderer.registerScene(this[$scene]);

Expand All @@ -340,8 +335,7 @@ export default class ModelViewerElementBase extends UpdatingElement {

const renderer = this[$renderer];
renderer.removeEventListener(
'contextlost',
this[$contextLostHandler] as (event: ThreeEvent) => void);
'contextlost', this[$onContextLost] as (event: ThreeEvent) => void);

renderer.unregisterScene(this[$scene]);

Expand Down Expand Up @@ -507,11 +501,11 @@ export default class ModelViewerElementBase extends UpdatingElement {
this[$scene].setSize(e.width, e.height);
}

[$onContextLost](event: ContextLostEvent) {
[$onContextLost] = (event: ContextLostEvent) => {
this.dispatchEvent(new CustomEvent(
'error',
{detail: {type: 'webglcontextlost', sourceError: event.sourceEvent}}));
}
};

/**
* Parses the element for an appropriate source URL and
Expand Down
9 changes: 3 additions & 6 deletions packages/model-viewer/src/styles/style-effector.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,6 @@ const $computeStyleCallback = Symbol('computeStyleCallback');
const $astWalker = Symbol('astWalker');
const $dependencies = Symbol('dependencies');

const $scrollHandler = Symbol('scrollHandler');
const $onScroll = Symbol('onScroll');

/**
Expand Down Expand Up @@ -127,8 +126,6 @@ export class StyleEffector {
protected[$computeStyleCallback]: StyleEffectorCallback;
protected[$astWalker] = new ASTWalker<FunctionNode>(['function']);

protected[$scrollHandler] = () => this[$onScroll]();

constructor(callback: StyleEffectorCallback) {
this[$computeStyleCallback] = callback;
}
Expand Down Expand Up @@ -156,7 +153,7 @@ export class StyleEffector {
if (newDependencies['window-scroll'] == null) {
const observer = 'window-scroll' in oldDependencies ?
oldDependencies['window-scroll'] :
new ScrollObserver(this[$scrollHandler]);
new ScrollObserver(this[$onScroll]);
observer!.observe();
delete oldDependencies['window-scroll'];
newDependencies['window-scroll'] = observer;
Expand Down Expand Up @@ -185,7 +182,7 @@ export class StyleEffector {
}
}

protected[$onScroll]() {
protected[$onScroll] = () => {
this[$computeStyleCallback]({relatedState: 'window-scroll'});
}
};
}

0 comments on commit 18b1e61

Please sign in to comment.