!1733 修复:修复相机控制滑块超出问题

pull/1731/MERGE
我是一条懒汉 3 years ago committed by ChenX
parent 8398ee0db2
commit 43fefe864f

@ -1,6 +1,7 @@
import { Button, Icon, Label, NumericInput, Popover, Position, Radio, RadioGroup, Slider, Switch, Tooltip } from '@blueprintjs/core'; import { Button, Icon, Label, NumericInput, Popover, Position, Radio, RadioGroup, Slider, Switch, Tooltip } from '@blueprintjs/core';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { MathUtils } from 'three';
import { app, CameraRoamType } from '../../../../ApplicationServices/Application'; import { app, CameraRoamType } from '../../../../ApplicationServices/Application';
import { CameraType } from '../../../../GraphicsSystem/CameraUpdate'; import { CameraType } from '../../../../GraphicsSystem/CameraUpdate';
import CameraSettingStore, { CameraMode } from './CameraSettingStore'; import CameraSettingStore, { CameraMode } from './CameraSettingStore';
@ -32,7 +33,9 @@ export default class CameraSetting extends Component
<div className='CameraSettingPanel'> <div className='CameraSettingPanel'>
<div className='CameraSettingItem'> <div className='CameraSettingItem'>
<Label></Label> <Label></Label>
<Switch size={30} disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera} <Switch size={30}
disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera}
checked={CameraSettingStore.isCameraRotateLock}
onChange={(): void => onChange={(): void =>
{ {
CameraSettingStore.isCameraRotateLock = !CameraSettingStore.isCameraRotateLock; CameraSettingStore.isCameraRotateLock = !CameraSettingStore.isCameraRotateLock;
@ -71,7 +74,7 @@ export default class CameraSetting extends Component
disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera} disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera}
max={5000} max={5000}
min={0} min={0}
value={CameraSettingStore.cameraAltitude > 5000 ? 5000 : CameraSettingStore.cameraAltitude} value={Number.parseInt((MathUtils.clamp(CameraSettingStore.cameraAltitude, 0, 5000).toFixed(0)))}
onChange={(e) => onChange={(e) =>
{ {
CameraSettingStore.cameraAltitude = e; CameraSettingStore.cameraAltitude = e;
@ -82,12 +85,21 @@ export default class CameraSetting extends Component
app.Viewer.CameraControl.UpdateCameraMatrix(); app.Viewer.CameraControl.UpdateCameraMatrix();
app.Editor.UpdateScreen(); app.Editor.UpdateScreen();
}} /> }} />
<NumericInput style={{ fontSize: '12px' }} value={CameraSettingStore.cameraAltitude} <NumericInput style={{ fontSize: '12px' }}
value={Number.parseInt((MathUtils.clamp(CameraSettingStore.cameraAltitude, 0, 5000).toFixed(0)))}
disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera} disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera}
allowNumericCharactersOnly={true}
max={5000}
onValueChange={(e) => onValueChange={(e) =>
{ {
if (Number.isNaN(e) || !Number.isFinite(e)) return CameraSettingStore.cameraAltitude;
if (e < 0) return; if (e < 0) return;
CameraSettingStore.cameraAltitude = e; CameraSettingStore.cameraAltitude = e;
let dif = app.Viewer.Camera.position.z - e;
app.Viewer.Camera.position.z = e;
app.Viewer.CameraControl.Target.z -= dif;
app.Viewer.CameraControl.UpdateCameraMatrix();
app.Editor.UpdateScreen();
}} }}
/> />
</div> </div>
@ -98,7 +110,7 @@ export default class CameraSetting extends Component
<div className='CameraVison'> <div className='CameraVison'>
<Slider <Slider
disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera} disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera}
value={CameraSettingStore.cameraFov < 30 ? 30 : CameraSettingStore.cameraFov} value={MathUtils.clamp(CameraSettingStore.cameraFov, 30, 120)}
max={120} max={120}
min={30} min={30}
onChange={(e: number) => onChange={(e: number) =>
@ -128,14 +140,16 @@ export default class CameraSetting extends Component
广 广
</div> </div>
</div> </div>
<NumericInput allowNumericCharactersOnly={false} <NumericInput allowNumericCharactersOnly={true}
value={CameraSettingStore.cameraFov} value={CameraSettingStore.cameraFov}
min={0} min={30}
max={120}
disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera} disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera}
onValueChange={(e) => onValueChange={(e) =>
{ {
if (e === NaN) return; if (Number.isNaN(e)) return this.CameraSettingStore.cameraFov;
if (e > 120) return; if (e > 120) return;
if (e === 0) return this.CameraSettingStore.cameraFov;
this.AlterCameraVision(e); this.AlterCameraVision(e);
}} }}
/> />
@ -161,6 +175,7 @@ export default class CameraSetting extends Component
disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera} disabled={app.Viewer.CameraCtrl.CameraType === CameraType.OrthographicCamera}
value={CameraSettingStore.walkSpeed} onValueChange={(e) => value={CameraSettingStore.walkSpeed} onValueChange={(e) =>
{ {
if (Number.isNaN(e)) return CameraSettingStore.walkSpeed;
if (e > 5 || e < 1) return; if (e > 5 || e < 1) return;
CameraSettingStore.walkSpeed = e; CameraSettingStore.walkSpeed = e;
app.CameraFlySpeed = e; app.CameraFlySpeed = e;

@ -24,11 +24,6 @@ enum ModuleScale
WIDTH, WIDTH,
HEIGHT, HEIGHT,
} }
const iClamp = (value: number, min: number, max: number) =>
{
if (value <= min) return min;
return Math.max(min, Math.min(max, value));
};
@observer @observer
export default class ModuleBaseParams extends Component<{}, {}> export default class ModuleBaseParams extends Component<{}, {}>
{ {
@ -403,7 +398,7 @@ export default class ModuleBaseParams extends Component<{}, {}>
min={1} min={1}
max={ModifyModelStore.sliderMax} max={ModifyModelStore.sliderMax}
value={ value={
iClamp(ModifyModelStore.module_Length, 0, ModifyModelStore.sliderMax) MathUtils.clamp(ModifyModelStore.module_Length, 0, ModifyModelStore.sliderMax)
} }
onChange={(e) => onChange={(e) =>
{ {
@ -428,7 +423,7 @@ export default class ModuleBaseParams extends Component<{}, {}>
}} }}
/> />
<NumericInput <NumericInput
value={iClamp(ModifyModelStore.module_Length, 0, Number.MAX_VALUE).toFixed(0)} value={MathUtils.clamp(ModifyModelStore.module_Length, 0, Number.MAX_VALUE).toFixed(0)}
onValueChange={(e) => onValueChange={(e) =>
{ {
if (e === 0) return; if (e === 0) return;
@ -452,7 +447,7 @@ export default class ModuleBaseParams extends Component<{}, {}>
<Slider <Slider
min={1} min={1}
max={ModifyModelStore.sliderMax} max={ModifyModelStore.sliderMax}
value={iClamp(ModifyModelStore.module_Width, 0, ModifyModelStore.sliderMax)} value={MathUtils.clamp(ModifyModelStore.module_Width, 0, ModifyModelStore.sliderMax)}
onChange={(e) => onChange={(e) =>
{ {
const percentage = e / ModifyModelStore.module_Width; const percentage = e / ModifyModelStore.module_Width;
@ -475,7 +470,7 @@ export default class ModuleBaseParams extends Component<{}, {}>
commandMachine.CommandEnd(); commandMachine.CommandEnd();
}} /> }} />
<NumericInput <NumericInput
value={iClamp(ModifyModelStore.module_Width, 0, Number.MAX_VALUE).toFixed(0)} value={MathUtils.clamp(ModifyModelStore.module_Width, 0, Number.MAX_VALUE).toFixed(0)}
onValueChange={(e) => onValueChange={(e) =>
{ {
if (e === 0) return; if (e === 0) return;
@ -499,7 +494,7 @@ export default class ModuleBaseParams extends Component<{}, {}>
<Slider <Slider
min={1} min={1}
max={ModifyModelStore.sliderMax} max={ModifyModelStore.sliderMax}
value={iClamp(ModifyModelStore.module_Height, 0, ModifyModelStore.sliderMax)} value={MathUtils.clamp(ModifyModelStore.module_Height, 0, ModifyModelStore.sliderMax)}
onChange={(e: number) => onChange={(e: number) =>
{ {
const percentage = e / ModifyModelStore.module_Height; const percentage = e / ModifyModelStore.module_Height;
@ -522,7 +517,7 @@ export default class ModuleBaseParams extends Component<{}, {}>
commandMachine.CommandEnd(); commandMachine.CommandEnd();
}} /> }} />
<NumericInput <NumericInput
value={iClamp(ModifyModelStore.module_Height, 0, Number.MAX_VALUE).toFixed(0)} value={MathUtils.clamp(ModifyModelStore.module_Height, 0, Number.MAX_VALUE).toFixed(0)}
onValueChange={(e) => onValueChange={(e) =>
{ {
if (e === 0) return; if (e === 0) return;

Loading…
Cancel
Save