Skip to content

Commit

Permalink
Merge pull request #430 from simularium/feature/orthographic-ui
Browse files Browse the repository at this point in the history 
Feature/orthographic UI
  • Loading branch information
@interim17
interim17 authored Sep 8, 2023
2 parents 1314eed + a78dee4 commit af14d01
Show file tree
Hide file tree
Showing 11 changed files with 262 additions and 132 deletions.
14 changes: 7 additions & 7 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
"webpack-dev-server": "^4.10.1"
},
"dependencies": {
"@aics/simularium-viewer": "^3.6.1",
"@aics/simularium-viewer": "^3.6.2",
"@ant-design/css-animation": "^1.7.3",
"@ant-design/icons": "^4.0.6",
"antd": "^4.23.6",
Expand Down
17 changes: 17 additions & 0 deletions src/assets/orthographic.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/perspective.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
152 changes: 106 additions & 46 deletions src/components/CameraControls/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,29 @@ import styles from "./style.css";

const PAN = "pan";
const ROTATE = "rotate";
const ORTHOGRAPHIC = "o";
const PERSPECTIVE = "p";
const CAMERA_MODE_MODIFIER_KEYS = ["Meta", "Shift"];
const ZOOM_IN_HK = "ArrowUp";
const ZOOM_OUT_HK = "ArrowDown";
const RESET_HK = "h";
const FOCUS_HK = "f";
const HOT_KEYS = [ZOOM_IN_HK, ZOOM_OUT_HK, RESET_HK, FOCUS_HK];
const HOT_KEYS = [
ZOOM_IN_HK,
ZOOM_OUT_HK,
RESET_HK,
FOCUS_HK,
ORTHOGRAPHIC,
PERSPECTIVE,
];

interface CameraControlsProps {
resetCamera: () => void;
zoomIn: () => void;
zoomOut: () => void;
setPanningMode: (value: boolean) => void;
setFocusMode: (value: boolean) => void;
setCameraType: (value: boolean) => void;
}

const CameraControls = ({
Expand All @@ -31,9 +41,12 @@ const CameraControls = ({
zoomOut,
setPanningMode,
setFocusMode,
setCameraType,
}: CameraControlsProps): JSX.Element => {
const [isFocused, saveFocusMode] = useState(true);
const [mode, setMode] = useState(ROTATE);
const [cameraProjectionType, setCameraProjectionType] =
useState(PERSPECTIVE);
const [keyPressed, setKeyPressed] = useState("");
const lastKeyPressed = useRef("");

Expand Down Expand Up @@ -91,6 +104,10 @@ const CameraControls = ({
}
}, [mode]);

useEffect(() => {
setCameraType(cameraProjectionType === ORTHOGRAPHIC);
}, [cameraProjectionType]);

useEffect(() => {
if (
(isModifierKey(keyPressed) && !lastKeyPressed.current) ||
Expand All @@ -113,13 +130,43 @@ const CameraControls = ({
case FOCUS_HK:
saveFocusMode(!isFocused);
break;
case ORTHOGRAPHIC:
setCameraProjectionType(ORTHOGRAPHIC);
break;
case PERSPECTIVE:
setCameraProjectionType(PERSPECTIVE);
break;
default:
break;
}
lastKeyPressed.current = keyPressed;
}, [keyPressed]);
return (
<div className={styles.container}>
<div className={styles.zoomButtons}>
<Tooltip
placement="left"
title="Zoom in ( &uarr; )"
color={TOOLTIP_COLOR}
>
<Button
className={styles.btn}
icon={Icons.ZoomIn}
onClick={zoomIn}
/>
</Tooltip>
<Tooltip
placement="left"
title="Zoom out ( &darr; )"
color={TOOLTIP_COLOR}
>
<Button
className={styles.btn}
icon={Icons.ZoomOut}
onClick={zoomOut}
/>
</Tooltip>
</div>
<div className={styles.moveButtons}>
<div className={styles.radioGroup}>
<Tooltip
Expand Down Expand Up @@ -169,64 +216,77 @@ const CameraControls = ({
</Button>
</Tooltip>
</div>
<Tooltip
placement="left"
title="Focus (F)"
color={TOOLTIP_COLOR}
>
<Button
size="small"
className={classNames([
{ [styles.active]: isFocused },
styles.radioBtn,
])}
onClick={() => saveFocusMode(!isFocused)}
</div>
<div className={styles.moveButtons}>
<div className={styles.radioGroup}>
<Tooltip
placement="left"
title={"Orthographic Camera"}
color={TOOLTIP_COLOR}
>
{/* Should be radio buttons, but using radio buttons
detaches keypressed listener after the button is pressed */}
<Button
className={classNames([
{
[styles.active]:
cameraProjectionType === ORTHOGRAPHIC,
},
styles.radioBtn,
])}
onClick={() => {
setCameraProjectionType(ORTHOGRAPHIC);
}}
icon={Icons.OrthographicCamera}
></Button>
</Tooltip>
<Tooltip
placement="left"
title={"Perspective Camera"}
color={TOOLTIP_COLOR}
>
<span
<Button
className={classNames([
"icon-moon",
"anticon",
styles.focus,
{
[styles.active]:
cameraProjectionType === PERSPECTIVE,
},
styles.radioBtn,
])}
/>
</Button>
</Tooltip>
onClick={() => {
setCameraProjectionType(PERSPECTIVE);
}}
icon={Icons.PerspectiveCamera}
></Button>
</Tooltip>
</div>
</div>

<div className={styles.zoomButtons}>
<Tooltip
placement="left"
title="Zoom in ( &uarr; )"
color={TOOLTIP_COLOR}
>
<Button
className={styles.btn}
size="small"
icon={Icons.ZoomIn}
onClick={zoomIn}
/>
</Tooltip>
<Tooltip
placement="left"
title="Zoom out ( &darr; )"
color={TOOLTIP_COLOR}
<Tooltip placement="left" title="Focus (F)" color={TOOLTIP_COLOR}>
<Button
className={classNames([
{ [styles.active]: isFocused },
styles.radioBtn,
])}
onClick={() => {
saveFocusMode(!isFocused);
}}
>
<Button
className={styles.btn}
size="small"
icon={Icons.ZoomOut}
onClick={zoomOut}
<span
className={classNames([
"icon-moon",
"anticon",
styles.focus,
])}
/>
</Tooltip>
</div>
</Button>
</Tooltip>
<Tooltip
placement="left"
title="Home view (H)"
color={TOOLTIP_COLOR}
>
<Button
className={styles.btn}
size="small"
icon={Icons.Reset}
onClick={resetCamera}
/>
Expand Down
Loading

0 comments on commit af14d01

Please sign in to comment.