Skip to content
This repository has been archived by the owner on Apr 25, 2023. It is now read-only.

Commit

Permalink
feat: adapt camera field to support 2d mode (#233)
Browse files Browse the repository at this point in the history 
* feat: add scene mode selector

* update sceneMode syntax

* add suport for camera OrthographicOffCenterFrustum

* feat: update function of setting scene mode

* update camera for OrthographicOffCenterFrustum

* fix type errors

* feat: set sync fov update when duration is 0

* update CameraField UI with sceneMode 2d

* hide FovSlider when in 2d mode

* return fov 1 as default when get camera in 2d mode

* remove handleMount when sceneMode change

* set fov back as requried

* remove sceneMode from hook dep

* Update src/components/molecules/Visualizer/Engine/Cesium/useEngineRef.ts

Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com>

* remove unnecessary comment

* move the SceneMode definition

* recovery the animateFOV

* Update src/components/molecules/Visualizer/Engine/ref.ts

Co-authored-by: rot1024 <aayhrot@gmail.com>

* Update src/components/molecules/Visualizer/Engine/Cesium/useEngineRef.ts

Co-authored-by: rot1024 <aayhrot@gmail.com>

* update function name

* update scene mode key

* update jump

* add isPerspectiveCamera to control visibility

* update get sceneMode and set onlyPosition function

* add useSceneMode

* add type export

* remove undefined from sceneMode

* reset sceneMode as 3d

Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com>
Co-authored-by: rot1024 <aayhrot@gmail.com>
  • Loading branch information
@airslice @KaWaite @rot1024
3 people authored Jun 2, 2022
1 parent 723486d commit 172de56
Show file tree
Hide file tree
Showing 11 changed files with 85 additions and 48 deletions.
6 changes: 3 additions & 3 deletions src/components/molecules/EarthEditor/FovSlider/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ import { Camera } from "@reearth/util/value";
import useHooks from "./hooks";

type Props = {
isCapturing?: boolean;
visible?: boolean;
onIsCapturingChange?: (isCapturing: boolean) => void;
camera?: Camera;
onFovChange?: (fov: number) => void;
};

const FovSlider: React.FC<Props> = ({ isCapturing, onIsCapturingChange, camera, onFovChange }) => {
const FovSlider: React.FC<Props> = ({ visible, onIsCapturingChange, camera, onFovChange }) => {
const intl = useIntl();

const { updateFov, handleClickAway } = useHooks({
Expand All @@ -28,7 +28,7 @@ const FovSlider: React.FC<Props> = ({ isCapturing, onIsCapturingChange, camera,
const fov = camera?.fov && Math.round(camera?.fov * 1000) / 1000;
const theme = useTheme();
return (
<StyledFloatedPanel visible={isCapturing} onClickAway={handleClickAway}>
<StyledFloatedPanel visible={visible} onClickAway={handleClickAway}>
<Wrapper data-camera-popup>
<FovField>
<Text size="xs" color={theme.main.strongText} otherProperties={{ marginRight: "16px" }}>
Expand Down
10 changes: 9 additions & 1 deletion src/components/molecules/EarthEditor/PropertyPane/PropertyField/CameraField/hooks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ type Params = {
cameraState?: Camera;
disabled?: boolean;
onlyPose?: boolean;
onlyPosition?: boolean;
onSubmit?: (value: Camera) => void;
onIsCapturingChange?: (isCapturing: boolean) => void;
onCameraChange?: (camera: Partial<Camera>) => void;
Expand All @@ -21,6 +22,7 @@ export default ({
cameraState,
disabled,
onlyPose,
onlyPosition,
onSubmit,
onIsCapturingChange,
onCameraChange,
Expand Down Expand Up @@ -171,9 +173,15 @@ export default ({
roll: cameraValue.roll,
fov: cameraValue.fov,
}
: onlyPosition
? {
lng: cameraValue.lng,
lat: cameraValue.lat,
height: cameraValue.height,
}
: cameraValue,
);
}, [cameraValue, onCameraChange, onlyPose]);
}, [cameraValue, onCameraChange, onlyPose, onlyPosition]);

return {
wrapperRef,
Expand Down
91 changes: 48 additions & 43 deletions src/components/molecules/EarthEditor/PropertyPane/PropertyField/CameraField/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export type Props = FieldProps<Camera> & {
isCapturing?: boolean;
camera?: Camera;
onlyPose?: boolean;
onlyPosition?: boolean;
onIsCapturingChange?: (isCapturing: boolean) => void;
onCameraChange?: (camera: Partial<Camera>) => void;
};
Expand All @@ -30,6 +31,7 @@ const CameraField: React.FC<Props> = ({
camera: cameraState,
onCameraChange,
onlyPose,
onlyPosition,
}) => {
const intl = useIntl();

Expand Down Expand Up @@ -59,6 +61,7 @@ const CameraField: React.FC<Props> = ({
onCameraChange,
disabled,
onlyPose,
onlyPosition,
});

const lat = typeof camera?.lat === "number" ? Math.round(camera?.lat * 1000) / 1000 : "";
Expand Down Expand Up @@ -142,49 +145,51 @@ const CameraField: React.FC<Props> = ({
</FormFieldGroup>
</FormGroup>
)}
<FormGroup>
<FormIcon icon="camera" size={16} />
<FormFieldGroup>
<FormFieldRow>
<FormWrapper>
<Input
type="number"
value={heading}
step={1}
readOnly={!isCapturing}
onChange={handleHeadingChange}
/>
<FloatText size="2xs" color={theme.properties.contentsFloatText}>
{intl.formatMessage({ defaultMessage: "Heading" })}
</FloatText>
</FormWrapper>
<FormWrapper>
<Input
type="number"
value={pitch}
step={1}
readOnly={!isCapturing}
onChange={handlePitchChange}
/>
<FloatText size="2xs" color={theme.properties.contentsFloatText}>
{intl.formatMessage({ defaultMessage: "Pitch" })}
</FloatText>
</FormWrapper>
<FormWrapper>
<Input
type="number"
value={roll}
step={1}
readOnly={!isCapturing}
onChange={handleRollChange}
/>
<FloatText size="2xs" color={theme.properties.contentsFloatText}>
{intl.formatMessage({ defaultMessage: "Roll" })}
</FloatText>
</FormWrapper>
</FormFieldRow>
</FormFieldGroup>
</FormGroup>
{!onlyPosition && (
<FormGroup>
<FormIcon icon="camera" size={16} />
<FormFieldGroup>
<FormFieldRow>
<FormWrapper>
<Input
type="number"
value={heading}
step={1}
readOnly={!isCapturing}
onChange={handleHeadingChange}
/>
<FloatText size="2xs" color={theme.properties.contentsFloatText}>
{intl.formatMessage({ defaultMessage: "Heading" })}
</FloatText>
</FormWrapper>
<FormWrapper>
<Input
type="number"
value={pitch}
step={1}
readOnly={!isCapturing}
onChange={handlePitchChange}
/>
<FloatText size="2xs" color={theme.properties.contentsFloatText}>
{intl.formatMessage({ defaultMessage: "Pitch" })}
</FloatText>
</FormWrapper>
<FormWrapper>
<Input
type="number"
value={roll}
step={1}
readOnly={!isCapturing}
onChange={handleRollChange}
/>
<FloatText size="2xs" color={theme.properties.contentsFloatText}>
{intl.formatMessage({ defaultMessage: "Roll" })}
</FloatText>
</FormWrapper>
</FormFieldRow>
</FormFieldGroup>
</FormGroup>
)}
<FormGroup>
{value && !isCapturing && (
<FormButtonGroup>
Expand Down
4 changes: 4 additions & 0 deletions src/components/molecules/EarthEditor/PropertyPane/PropertyField/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ export type Props<T extends ValueType = ValueType> = {
isTemplate?: boolean;
isCapturing?: boolean;
camera?: Camera;
sceneMode?: "3d" | "2d" | "columbus" | undefined;
layers?: LayerType[];
assetModal?: ComponentType<AssetModalProps>;
onChange?: (id: string, value: ValueTypes[T] | undefined, type: ValueType) => void;
Expand All @@ -119,6 +120,7 @@ const PropertyField: React.FC<Props> = ({
onIsCapturingChange,
camera,
onCameraChange,
sceneMode,
onLink,
datasetSchemas,
isLinkable,
Expand Down Expand Up @@ -234,6 +236,8 @@ const PropertyField: React.FC<Props> = ({
onCameraChange={onCameraChange}
onDelete={events.onClear}
onlyPose={schema.ui === "cameraPose"}
onlyPosition={sceneMode === "2d"}
disabled={schema.ui === "cameraPose" && sceneMode === "2d"}
/>
) : type === "ref" && schema.ui === "layer" ? (
<LayerField {...commonProps} layers={layers} />
Expand Down
1 change: 1 addition & 0 deletions src/components/molecules/EarthEditor/PropertyPane/PropertyItem/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ export type Props = {
| "onIsCapturingChange"
| "camera"
| "onCameraChange"
| "sceneMode"
| "isLinkable"
| "onDatasetPickerOpen"
| "layers"
Expand Down
1 change: 1 addition & 0 deletions src/components/molecules/EarthEditor/PropertyPane/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ export type Props = {
| "onIsCapturingChange"
| "camera"
| "onCameraChange"
| "sceneMode"
| "isLinkable"
| "onDatasetPickerOpen"
| "defaultItemName"
Expand Down
7 changes: 7 additions & 0 deletions src/components/organisms/EarthEditor/CanvasArea/hooks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
} from "@reearth/gql";
import {
useSceneId,
useSceneMode,
useIsCapturing,
useCamera,
useSelected,
Expand All @@ -43,6 +44,7 @@ import {
export default (isBuilt?: boolean) => {
const intl = useIntl();
const [sceneId] = useSceneId();
const [sceneMode, setSceneMode] = useSceneMode();
const [isCapturing, onIsCapturingChange] = useIsCapturing();
const [camera, onCameraChange] = useCamera();
const [selected, select] = useSelected();
Expand Down Expand Up @@ -160,6 +162,10 @@ export default (isBuilt?: boolean) => {
[camera, onCameraChange],
);

useEffect(() => {
sceneProperty?.default?.sceneMode && setSceneMode(sceneProperty?.default?.sceneMode);
}, [sceneProperty, setSceneMode]);

// block selector
const [addInfoboxField] = useAddInfoboxFieldMutation();
const { data: blockData } = useGetBlocksQuery({
Expand Down Expand Up @@ -273,6 +279,7 @@ export default (isBuilt?: boolean) => {
selectedLayer,
blocks,
isCapturing,
sceneMode,
camera,
widgetAlignEditorActivated,
selectLayer,
Expand Down
3 changes: 2 additions & 1 deletion src/components/organisms/EarthEditor/CanvasArea/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const CanvasArea: React.FC<Props> = ({ className, isBuilt }) => {
selectedLayerId,
blocks,
isCapturing,
sceneMode,
camera,
widgetAlignEditorActivated,
selectLayer,
Expand Down Expand Up @@ -81,7 +82,7 @@ const CanvasArea: React.FC<Props> = ({ className, isBuilt }) => {
onLayerDrop={handleDropLayer}
pluginBaseUrl={window.REEARTH_CONFIG?.plugins}>
<FovSlider
isCapturing={isCapturing}
visible={isCapturing && sceneMode && sceneMode !== "2d"}
onIsCapturingChange={onIsCapturingChange}
camera={camera}
onFovChange={onFovChange}
Expand Down
3 changes: 3 additions & 0 deletions src/components/organisms/EarthEditor/PropertyPane/hooks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
useCamera,
useTeam,
useSceneId,
useSceneMode,
useSelectedBlock,
useWidgetAlignEditorActivated,
} from "@reearth/state";
Expand All @@ -45,6 +46,7 @@ export default (mode: Mode) => {
const [rootLayerId] = useRootLayerId();
const [isCapturing, onIsCapturingChange] = useIsCapturing();
const [camera, setCamera] = useCamera();
const [sceneMode] = useSceneMode();
const [team] = useTeam();
const [sceneId] = useSceneId();
const [widgetAlignEditorActivated, setWidgetAlignEditorActivated] =
Expand Down Expand Up @@ -328,6 +330,7 @@ export default (mode: Mode) => {
onIsCapturingChange,
camera,
onCameraChange,
sceneMode,
addPropertyItem,
movePropertyItem,
removePropertyItem,
Expand Down
2 changes: 2 additions & 0 deletions src/components/organisms/EarthEditor/PropertyPane/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const PropertyPane: React.FC<Props> = ({ mode }) => {
isInfoboxCreatable,
isCapturing,
camera,
sceneMode,
datasetSchemas,
loading,
layers,
Expand Down Expand Up @@ -61,6 +62,7 @@ const PropertyPane: React.FC<Props> = ({ mode }) => {
isInfoboxCreatable={isInfoboxCreatable}
isCapturing={isCapturing}
camera={camera}
sceneMode={sceneMode}
isLinkable={isLayerGroup && !!linkedDatasetSchemaId}
linkedDatasetSchemaId={linkedDatasetSchemaId}
linkedDatasetId={linkedDatasetId}
Expand Down
5 changes: 5 additions & 0 deletions src/state/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ export const useIsCapturing = () => useAtom(isCapturing);
const camera = atom<Camera | undefined>(undefined);
export const useCamera = () => useAtom(camera);

export type SceneMode = "3d" | "2d" | "columbus";
const sceneMode = atom<SceneMode>("3d");
export const useSceneMode = () => useAtom(sceneMode);

export type Team = {
id: string;
name: string;
Expand Down Expand Up @@ -72,6 +76,7 @@ const unselectProject = atom(null, (_get, set) => {
set(selectedBlock, undefined);
set(camera, undefined);
set(isCapturing, false);
set(sceneMode, "3d");
});
export const useUnselectProject = () => useAtom(unselectProject)[1];

Expand Down

0 comments on commit 172de56

Please sign in to comment.