Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | import React, { useRef } from 'react';
import { Story } from '@storybook/react';
import ControlsInfoPane, { ControlsInfoPaneStrings } from '../components/VirtualWalkthrough/ControlsInfoPane';
export default {
title: 'ControlsInfoPane',
component: ControlsInfoPane,
};
const sampleStrings: ControlsInfoPaneStrings = {
controls: 'Controls',
annotations: 'Annotations',
autoRotate: 'Auto rotate',
orbit: 'Orbit',
leftMouse: 'Left mouse',
touchDrag: 'Touch drag',
pan: 'Pan',
middleMouse: 'Middle mouse',
swipe: 'Swipe',
look: 'Look',
rightMouse: 'Right mouse',
zoom: 'Zoom',
mouseWheel: 'Mouse wheel',
pinch: 'Pinch',
fly: 'Fly',
arrowKeys: 'Arrow keys',
flyFaster: 'Fly faster',
shift: 'Shift',
flySlower: 'Fly slower',
ctrl: 'Ctrl',
resetCamera: 'Reset camera',
};
// Renders the pane inside a positioned "viewer" so its absolute positioning is
// visible in isolation. A local ref stands in for the scroll/click-away ref the
// SplatControls parent normally supplies.
const Template: Story<Partial<React.ComponentProps<typeof ControlsInfoPane>>> = (args) => {
const paneRef = useRef<HTMLDivElement>(null);
return (
<div
style={{
position: 'relative',
width: 900,
height: 600,
overflow: 'hidden',
background: 'linear-gradient(135deg, #1a202c 0%, #2d3748 100%)',
borderRadius: 8,
}}
>
<ControlsInfoPane visible strings={sampleStrings} paneRef={paneRef} {...args} />
</div>
);
};
export const Default = Template.bind({});
Default.args = {};
export const FullScreen = Template.bind({});
FullScreen.args = { isFullScreen: true };
|