/** * Copyright (c) Microsoft Corporation. * * 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. */ import { ActionEntry } from '../../../server/trace/viewer/traceModel'; import { Size } from '../geometry'; import './snapshotTab.css'; import './tabbedPane.css'; import * as React from 'react'; import { useMeasure } from './helpers'; import type { Point } from '../../../common/types'; export const SnapshotTab: React.FunctionComponent<{ actionEntry: ActionEntry | undefined, snapshotSize: Size, }> = ({ actionEntry, snapshotSize }) => { const [measure, ref] = useMeasure(); let [snapshotIndex, setSnapshotIndex] = React.useState(0); const snapshotMap = new Map(); for (const snapshot of actionEntry?.metadata.snapshots || []) snapshotMap.set(snapshot.title, snapshot); const actionSnapshot = snapshotMap.get('action') || snapshotMap.get('after'); const snapshots = [actionSnapshot ? { ...actionSnapshot, title: 'action' } : undefined, snapshotMap.get('before'), snapshotMap.get('after')].filter(Boolean) as { title: string, snapshotName: string }[]; if (snapshotIndex >= snapshots.length) snapshotIndex = snapshots.length - 1; const iframeRef = React.createRef(); React.useEffect(() => { if (!iframeRef.current) return; let snapshotUri = undefined; let point: Point | undefined = undefined; if (actionEntry) { const snapshot = snapshots[snapshotIndex]; if (snapshot && snapshot.snapshotName) { snapshotUri = `${actionEntry.metadata.pageId}?name=${snapshot.snapshotName}`; if (snapshot.snapshotName.includes('action')) point = actionEntry.metadata.point; } } const snapshotUrl = snapshotUri ? `${window.location.origin}/snapshot/${snapshotUri}` : 'data:text/html,'; try { (iframeRef.current.contentWindow as any).showSnapshot(snapshotUrl, { point }); } catch (e) { } }, [actionEntry, snapshotIndex]); const scale = Math.min(measure.width / snapshotSize.width, measure.height / snapshotSize.height); const scaledSize = { width: snapshotSize.width * scale, height: snapshotSize.height * scale, }; return

{ if (event.key === 'ArrowRight') setSnapshotIndex(Math.min(snapshotIndex + 1, snapshots.length - 1)); if (event.key === 'ArrowLeft') setSnapshotIndex(Math.max(snapshotIndex - 1, 0)); }} >

{snapshots.map((snapshot, index) => { return

setSnapshotIndex(index)} key={snapshot.title}>

{renderTitle(snapshot.title)}

})}

; }; function renderTitle(snapshotTitle: string): string { if (snapshotTitle === 'before') return 'Before'; if (snapshotTitle === 'after') return 'After'; if (snapshotTitle === 'action') return 'Action'; return snapshotTitle; }