archive-gh-me/ShadowEditor
1
0
Fork 0
mirror of https://github.com/tengge1/ShadowEditor.git synced 2026-01-25 15:08:11 +00:00
Code Issues Projects Releases Wiki Activity

代码优化。

Browse Source
This commit is contained in:
tengge1 2020-03-06 21:22:51 +08:00
parent fb904e3915
commit c8d9e5aec1
16 changed files with 614 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
ShadowEditor.Web/src/editor/assets/LogPanel.jsx
View File

@ -1,10 +1,5 @@
import './css/LogPanel.css';
import { classNames, PropTypes, SearchField, ImageList, Button } from '../../third_party';
import EditWindow from './window/EditWindow.jsx';
import ModelLoader from '../../loader/ModelLoader';
import AddObjectCommand from '../../command/AddObjectCommand';
import Ajax from '../../utils/Ajax';
import UploadUtils from '../../utils/UploadUtils';
import { classNames, PropTypes, Button } from '../../third_party';
/**
* 日志面板
@ -15,7 +10,7 @@ class LogPanel extends React.Component {
super(props);
this.state = {
logs: [],
logs: []
};
this.handleLog = this.handleLog.bind(this);
@ -26,11 +21,15 @@ class LogPanel extends React.Component {
const { className, style } = this.props;
const { logs } = this.state;
return <div className={classNames('LogPanel', className)} style={style}>
return <div className={classNames('LogPanel', className)}
style={style}
>
<Button onClick={this.handleClear}>{_t('Clear')}</Button>
<div className={'logs'}>
{logs.map((n, i) => {
return <div className={n.type} key={i}>{n.time} {n.content}</div>
return <div className={n.type}
key={i}
>{n.time} {n.content}</div>;
})}
</div>
</div>;
@ -56,18 +55,18 @@ class LogPanel extends React.Component {
logs.push({
time: `${hour}:${minute}:${second}`,
type,
content,
content
});
return {
logs,
logs
};
});
}
handleClear() {
this.setState({
logs: [],
logs: []
});
}
}
@ -75,13 +74,13 @@ class LogPanel extends React.Component {
LogPanel.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
show: PropTypes.bool,
show: PropTypes.bool
};
LogPanel.defaultProps = {
className: null,
style: null,
show: false,
show: false
};
export default LogPanel;

40
ShadowEditor.Web/src/editor/component/CameraComponent.jsx
View File

@ -1,4 +1,4 @@
import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, NumberProperty } from '../../third_party';
import { PropertyGroup, NumberProperty } from '../../third_party';
import SetValueCommand from '../../command/SetValueCommand';
/**
@ -14,7 +14,7 @@ class CameraComponent extends React.Component {
expanded: true,
fov: 70,
near: 0.1,
far: 1000,
far: 1000
};
this.handleExpand = this.handleExpand.bind(this);
@ -31,10 +31,26 @@ class CameraComponent extends React.Component {
return null;
}
return <PropertyGroup title={_t('Camera Component')} show={show} expanded={expanded} onExpand={this.handleExpand}>
<NumberProperty label={_t('Fov')} name={'fov'} value={fov} onChange={this.handleChangeFov}></NumberProperty>
<NumberProperty label={_t('Near')} name={'near'} value={near} onChange={this.handleChangeNear}></NumberProperty>
<NumberProperty label={_t('Far')} name={'far'} value={far} onChange={this.handleChangeFar}></NumberProperty>
return <PropertyGroup title={_t('Camera Component')}
show={show}
expanded={expanded}
onExpand={this.handleExpand}
>
<NumberProperty label={_t('Fov')}
name={'fov'}
value={fov}
onChange={this.handleChangeFov}
/>
<NumberProperty label={_t('Near')}
name={'near'}
value={near}
onChange={this.handleChangeNear}
/>
<NumberProperty label={_t('Far')}
name={'far'}
value={far}
onChange={this.handleChangeFar}
/>
</PropertyGroup>;
}
@ -45,7 +61,7 @@ class CameraComponent extends React.Component {
handleExpand(expanded) {
this.setState({
expanded,
expanded
});
}
@ -55,7 +71,7 @@ class CameraComponent extends React.Component {
// TODO: 应判断是否等于默认相机
if (!editor.selected || !(editor.selected instanceof THREE.PerspectiveCamera)) {
this.setState({
show: false,
show: false
});
return;
}
@ -66,14 +82,14 @@ class CameraComponent extends React.Component {
show: true,
fov: this.selected.fov,
near: this.selected.near,
far: this.selected.far,
far: this.selected.far
});
}
handleChangeFov(value) {
if (value === null) {
this.setState({
fov: value,
fov: value
});
return;
}
@ -84,7 +100,7 @@ class CameraComponent extends React.Component {
handleChangeNear(value) {
if (value === null) {
this.setState({
near: value,
near: value
});
return;
}
@ -95,7 +111,7 @@ class CameraComponent extends React.Component {
handleChangeFar(value) {
if (value === null) {
this.setState({
far: value,
far: value
});
return;
}

57
ShadowEditor.Web/src/editor/component/FireComponent.jsx
View File

@ -1,5 +1,4 @@
import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty } from '../../third_party';
import SetValueCommand from '../../command/SetValueCommand';
import { PropertyGroup, ButtonProperty, NumberProperty } from '../../third_party';
/**
* 火焰组件
@ -19,7 +18,7 @@ class FireComponent extends React.Component {
height: 4,
depth: 2,
sliceSpacing: 2,
previewText: _t('Preview'),
previewText: _t('Preview')
};
this.handleExpand = this.handleExpand.bind(this);
@ -36,12 +35,34 @@ class FireComponent extends React.Component {
return null;
}
return <PropertyGroup title={_t('Fire Component')} show={show} expanded={expanded} onExpand={this.handleExpand}>
<NumberProperty label={_t('Width')} name={'width'} value={width} onChange={this.handleChange}></NumberProperty>
<NumberProperty label={_t('Height')} name={'height'} value={height} onChange={this.handleChange}></NumberProperty>
<NumberProperty label={_t('Depth')} name={'depth'} value={depth} onChange={this.handleChange}></NumberProperty>
<NumberProperty label={_t('SliceSpacing')} name={'sliceSpacing'} value={sliceSpacing} onChange={this.handleChange}></NumberProperty>
<ButtonProperty text={previewText} onChange={this.handlePreview}></ButtonProperty>
return <PropertyGroup title={_t('Fire Component')}
show={show}
expanded={expanded}
onExpand={this.handleExpand}
>
<NumberProperty label={_t('Width')}
name={'width'}
value={width}
onChange={this.handleChange}
/>
<NumberProperty label={_t('Height')}
name={'height'}
value={height}
onChange={this.handleChange}
/>
<NumberProperty label={_t('Depth')}
name={'depth'}
value={depth}
onChange={this.handleChange}
/>
<NumberProperty label={_t('SliceSpacing')}
name={'sliceSpacing'}
value={sliceSpacing}
onChange={this.handleChange}
/>
<ButtonProperty text={previewText}
onChange={this.handlePreview}
/>
</PropertyGroup>;
}
@ -52,7 +73,7 @@ class FireComponent extends React.Component {
handleExpand(expanded) {
this.setState({
expanded,
expanded
});
}
@ -61,7 +82,7 @@ class FireComponent extends React.Component {
if (!editor.selected || !(editor.selected.userData.type === 'Fire')) {
this.setState({
show: false,
show: false
});
return;
}
@ -74,20 +95,20 @@ class FireComponent extends React.Component {
height: this.selected.userData.height,
depth: this.selected.userData.depth,
sliceSpacing: this.selected.userData.sliceSpacing,
previewText: this.isPlaying ? _t('Cancel') : _t('Preview'),
previewText: this.isPlaying ? _t('Cancel') : _t('Preview')
});
}
handleChange(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
let { width, height, depth, sliceSpacing } = Object.assign({}, this.state, {
[name]: value,
[name]: value
});
VolumetricFire.texturePath = 'assets/textures/VolumetricFire/';
@ -107,7 +128,7 @@ class FireComponent extends React.Component {
width,
height,
depth,
sliceSpacing,
sliceSpacing
});
const index = editor.scene.children.indexOf(this.selected);
@ -138,7 +159,7 @@ class FireComponent extends React.Component {
this.isPlaying = true;
this.setState({
previewText: _t('Cancel'),
previewText: _t('Cancel')
});
app.on(`animate.FireComponent`, this.onAnimate);
@ -148,13 +169,13 @@ class FireComponent extends React.Component {
this.isPlaying = false;
this.setState({
previewText: _t('Preview'),
previewText: _t('Preview')
});
app.on(`animate.FireComponent`, null);
}
onAnimate(clock, deltaTime) {
onAnimate(clock) {
const elapsed = clock.getElapsedTime();
const fire = this.selected.userData.fire;

3
ShadowEditor.Web/src/editor/component/LMeshComponent.jsx
View File

@ -1,5 +1,4 @@
import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, SelectProperty } from '../../third_party';
import SetValueCommand from '../../command/SetValueCommand';
import { PropertyGroup, ButtonProperty, SelectProperty } from '../../third_party';
/**
* LMesh组件

109
ShadowEditor.Web/src/editor/component/LightComponent.jsx
View File

@ -1,5 +1,4 @@
import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty, ColorProperty } from '../../third_party';
import SetValueCommand from '../../command/SetValueCommand';
import { PropertyGroup, NumberProperty, ColorProperty } from '../../third_party';
/**
* 光源组件
@ -43,7 +42,7 @@ class LightComponent extends React.Component {
width: 20,
showHeight: false,
height: 10,
height: 10
};
this.handleExpand = this.handleExpand.bind(this);
@ -72,24 +71,78 @@ class LightComponent extends React.Component {
showSkyColor, skyColor,
showGroundColor, groundColor,
showWidth, width,
showHeight, height,
showHeight, height
} = this.state;
if (!show) {
return null;
}
return <PropertyGroup title={_t('Light Component')} show={show} expanded={expanded} onExpand={this.handleExpand}>
<ColorProperty label={_t('Color')} name={'color'} value={color} show={showColor} onChange={this.handleChangeColor}></ColorProperty>
<NumberProperty label={_t('Intensity')} name={'intensity'} value={intensity} show={showIntensity} onChange={this.handleChangeIntensity}></NumberProperty>
<NumberProperty label={_t('Distance')} name={'distance'} value={distance} show={showDistance} onChange={this.handleChangeDistance}></NumberProperty>
<NumberProperty label={_t('Angle')} name={'angle'} value={angle} show={showAngle} onChange={this.handleChangeAngle}></NumberProperty>
<NumberProperty label={_t('Penumbra')} name={'penumbra'} value={penumbra} show={showPenumbra} onChange={this.handleChangePenumbra}></NumberProperty>
<NumberProperty label={_t('Decay')} name={'decay'} value={decay} show={showDecay} onChange={this.handleChangeDecay}></NumberProperty>
<ColorProperty label={_t('SkyColor')} name={'skyColor'} value={skyColor} show={showSkyColor} onChange={this.handleChangeSkyColor}></ColorProperty>
<ColorProperty label={_t('GroundColor')} name={'groundColor'} value={groundColor} show={showGroundColor} onChange={this.handleChangeGroundColor}></ColorProperty>
<NumberProperty label={_t('Width')} name={'width'} value={width} show={showWidth} onChange={this.handleChangeWidth}></NumberProperty>
<NumberProperty label={_t('Height')} name={'height'} value={height} show={showHeight} onChange={this.handleChangeHeight}></NumberProperty>
return <PropertyGroup title={_t('Light Component')}
show={show}
expanded={expanded}
onExpand={this.handleExpand}
>
<ColorProperty label={_t('Color')}
name={'color'}
value={color}
show={showColor}
onChange={this.handleChangeColor}
/>
<NumberProperty label={_t('Intensity')}
name={'intensity'}
value={intensity}
show={showIntensity}
onChange={this.handleChangeIntensity}
/>
<NumberProperty label={_t('Distance')}
name={'distance'}
value={distance}
show={showDistance}
onChange={this.handleChangeDistance}
/>
<NumberProperty label={_t('Angle')}
name={'angle'}
value={angle}
show={showAngle}
onChange={this.handleChangeAngle}
/>
<NumberProperty label={_t('Penumbra')}
name={'penumbra'}
value={penumbra}
show={showPenumbra}
onChange={this.handleChangePenumbra}
/>
<NumberProperty label={_t('Decay')}
name={'decay'}
value={decay}
show={showDecay}
onChange={this.handleChangeDecay}
/>
<ColorProperty label={_t('SkyColor')}
name={'skyColor'}
value={skyColor}
show={showSkyColor}
onChange={this.handleChangeSkyColor}
/>
<ColorProperty label={_t('GroundColor')}
name={'groundColor'}
value={groundColor}
show={showGroundColor}
onChange={this.handleChangeGroundColor}
/>
<NumberProperty label={_t('Width')}
name={'width'}
value={width}
show={showWidth}
onChange={this.handleChangeWidth}
/>
<NumberProperty label={_t('Height')}
name={'height'}
value={height}
show={showHeight}
onChange={this.handleChangeHeight}
/>
</PropertyGroup>;
}
@ -100,7 +153,7 @@ class LightComponent extends React.Component {
handleExpand(expanded) {
this.setState({
expanded,
expanded
});
}
@ -109,7 +162,7 @@ class LightComponent extends React.Component {
if (!editor.selected || !(editor.selected instanceof THREE.Light)) {
this.setState({
show: false,
show: false
});
return;
}
@ -117,7 +170,7 @@ class LightComponent extends React.Component {
this.selected = editor.selected;
let state = {
show: true,
show: true
};
if (this.selected instanceof THREE.HemisphereLight) {
@ -176,7 +229,7 @@ class LightComponent extends React.Component {
handleChangeColor(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
@ -195,7 +248,7 @@ class LightComponent extends React.Component {
handleChangeIntensity(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
@ -208,7 +261,7 @@ class LightComponent extends React.Component {
handleChangeDistance(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
@ -221,7 +274,7 @@ class LightComponent extends React.Component {
handleChangeAngle(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
@ -234,7 +287,7 @@ class LightComponent extends React.Component {
handleChangePenumbra(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
@ -247,7 +300,7 @@ class LightComponent extends React.Component {
handleChangeDecay(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
@ -260,7 +313,7 @@ class LightComponent extends React.Component {
handleChangeSkyColor(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
@ -279,7 +332,7 @@ class LightComponent extends React.Component {
handleChangeGroundColor(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
@ -298,7 +351,7 @@ class LightComponent extends React.Component {
handleChangeWidth(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
@ -311,7 +364,7 @@ class LightComponent extends React.Component {
handleChangeHeight(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}

5
ShadowEditor.Web/src/editor/component/MMDComponent.jsx
View File

@ -1,7 +1,4 @@
import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty, SelectProperty, ColorProperty, TextureProperty, ButtonsProperty, Button } from '../../third_party';
import SetValueCommand from '../../command/SetValueCommand';
import Converter from '../../utils/Converter';
import Ajax from '../../utils/Ajax';
import { PropertyGroup, DisplayProperty } from '../../third_party';
/**
* MMD模型组件

230
ShadowEditor.Web/src/editor/component/ParticleEmitterComponent.jsx
View File

@ -1,7 +1,4 @@
import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty, SelectProperty, ColorProperty, TextureProperty, ButtonsProperty, Button, IntegerProperty } from '../../third_party';
import SetValueCommand from '../../command/SetValueCommand';
import Converter from '../../utils/Converter';
import Ajax from '../../utils/Ajax';
import { PropertyGroup, ButtonProperty, NumberProperty, ColorProperty, TextureProperty, IntegerProperty } from '../../third_party';
/**
* 粒子发射器组件
@ -53,7 +50,7 @@ class ParticleEmitterComponent extends React.Component {
particleCount: 1000,
maxAge: 5,
maxAgeSpread: 2,
previewText: _t('Preview'),
previewText: _t('Preview')
};
this.handleExpand = this.handleExpand.bind(this);
@ -86,43 +83,161 @@ class ParticleEmitterComponent extends React.Component {
return null;
}
return <PropertyGroup title={_t('ParticleEmitter')} show={show} expanded={expanded} onExpand={this.handleExpand}>
<NumberProperty label={`${_t('Position')}X`} name={'positionX'} value={positionX} onChange={this.handleChangePosition}></NumberProperty>
<NumberProperty label={`${_t('Position')}Y`} name={'positionY'} value={positionY} onChange={this.handleChangePosition}></NumberProperty>
<NumberProperty label={`${_t('Position')}Z`} name={'positionZ'} value={positionZ} onChange={this.handleChangePosition}></NumberProperty>
<NumberProperty label={`${_t('PositionSpread')}X`} name={'positionSpreadX'} value={positionSpreadX} onChange={this.handleChangePosition}></NumberProperty>
<NumberProperty label={`${_t('PositionSpread')}Y`} name={'positionSpreadY'} value={positionSpreadY} onChange={this.handleChangePosition}></NumberProperty>
<NumberProperty label={`${_t('PositionSpread')}Z`} name={'positionSpreadZ'} value={positionSpreadZ} onChange={this.handleChangePosition}></NumberProperty>
return <PropertyGroup title={_t('ParticleEmitter')}
show={show}
expanded={expanded}
onExpand={this.handleExpand}
>
<NumberProperty label={`${_t('Position')}X`}
name={'positionX'}
value={positionX}
onChange={this.handleChangePosition}
/>
<NumberProperty label={`${_t('Position')}Y`}
name={'positionY'}
value={positionY}
onChange={this.handleChangePosition}
/>
<NumberProperty label={`${_t('Position')}Z`}
name={'positionZ'}
value={positionZ}
onChange={this.handleChangePosition}
/>
<NumberProperty label={`${_t('PositionSpread')}X`}
name={'positionSpreadX'}
value={positionSpreadX}
onChange={this.handleChangePosition}
/>
<NumberProperty label={`${_t('PositionSpread')}Y`}
name={'positionSpreadY'}
value={positionSpreadY}
onChange={this.handleChangePosition}
/>
<NumberProperty label={`${_t('PositionSpread')}Z`}
name={'positionSpreadZ'}
value={positionSpreadZ}
onChange={this.handleChangePosition}
/>
<NumberProperty label={`${_t('Velocity')}X`} name={'velocityX'} value={velocityX} onChange={this.handleChangeVelocity}></NumberProperty>
<NumberProperty label={`${_t('Velocity')}Y`} name={'velocityY'} value={velocityY} onChange={this.handleChangeVelocity}></NumberProperty>
<NumberProperty label={`${_t('Velocity')}Z`} name={'velocityZ'} value={velocityZ} onChange={this.handleChangeVelocity}></NumberProperty>
<NumberProperty label={`${_t('VelocitySpread')}X`} name={'velocitySpreadX'} value={velocitySpreadX} onChange={this.handleChangeVelocity}></NumberProperty>
<NumberProperty label={`${_t('VelocitySpread')}Y`} name={'velocitySpreadY'} value={velocitySpreadY} onChange={this.handleChangeVelocity}></NumberProperty>
<NumberProperty label={`${_t('VelocitySpread')}Z`} name={'velocitySpreadZ'} value={velocitySpreadZ} onChange={this.handleChangeVelocity}></NumberProperty>
<NumberProperty label={`${_t('Velocity')}X`}
name={'velocityX'}
value={velocityX}
onChange={this.handleChangeVelocity}
/>
<NumberProperty label={`${_t('Velocity')}Y`}
name={'velocityY'}
value={velocityY}
onChange={this.handleChangeVelocity}
/>
<NumberProperty label={`${_t('Velocity')}Z`}
name={'velocityZ'}
value={velocityZ}
onChange={this.handleChangeVelocity}
/>
<NumberProperty label={`${_t('VelocitySpread')}X`}
name={'velocitySpreadX'}
value={velocitySpreadX}
onChange={this.handleChangeVelocity}
/>
<NumberProperty label={`${_t('VelocitySpread')}Y`}
name={'velocitySpreadY'}
value={velocitySpreadY}
onChange={this.handleChangeVelocity}
/>
<NumberProperty label={`${_t('VelocitySpread')}Z`}
name={'velocitySpreadZ'}
value={velocitySpreadZ}
onChange={this.handleChangeVelocity}
/>
<NumberProperty label={`${_t('Acceleration')}X`} name={'accelerationX'} value={accelerationX} onChange={this.handleChangeAcceleration}></NumberProperty>
<NumberProperty label={`${_t('Acceleration')}Y`} name={'accelerationY'} value={accelerationY} onChange={this.handleChangeAcceleration}></NumberProperty>
<NumberProperty label={`${_t('Acceleration')}Z`} name={'accelerationZ'} value={accelerationZ} onChange={this.handleChangeAcceleration}></NumberProperty>
<NumberProperty label={`${_t('AccelerationSpread')}X`} name={'accelerationSpreadX'} value={accelerationSpreadX} onChange={this.handleChangeAcceleration}></NumberProperty>
<NumberProperty label={`${_t('AccelerationSpread')}Y`} name={'accelerationSpreadY'} value={accelerationSpreadY} onChange={this.handleChangeAcceleration}></NumberProperty>
<NumberProperty label={`${_t('AccelerationSpread')}Z`} name={'accelerationSpreadZ'} value={accelerationSpreadZ} onChange={this.handleChangeAcceleration}></NumberProperty>
<NumberProperty label={`${_t('Acceleration')}X`}
name={'accelerationX'}
value={accelerationX}
onChange={this.handleChangeAcceleration}
/>
<NumberProperty label={`${_t('Acceleration')}Y`}
name={'accelerationY'}
value={accelerationY}
onChange={this.handleChangeAcceleration}
/>
<NumberProperty label={`${_t('Acceleration')}Z`}
name={'accelerationZ'}
value={accelerationZ}
onChange={this.handleChangeAcceleration}
/>
<NumberProperty label={`${_t('AccelerationSpread')}X`}
name={'accelerationSpreadX'}
value={accelerationSpreadX}
onChange={this.handleChangeAcceleration}
/>
<NumberProperty label={`${_t('AccelerationSpread')}Y`}
name={'accelerationSpreadY'}
value={accelerationSpreadY}
onChange={this.handleChangeAcceleration}
/>
<NumberProperty label={`${_t('AccelerationSpread')}Z`}
name={'accelerationSpreadZ'}
value={accelerationSpreadZ}
onChange={this.handleChangeAcceleration}
/>
<ColorProperty label={`${_t('Color')}1`} name={'color1'} value={color1} onChange={this.handleChangeColor}></ColorProperty>
<ColorProperty label={`${_t('Color')}2`} name={'color2'} value={color2} onChange={this.handleChangeColor}></ColorProperty>
<ColorProperty label={`${_t('Color')}3`} name={'color3'} value={color3} onChange={this.handleChangeColor}></ColorProperty>
<ColorProperty label={`${_t('Color')}4`} name={'color4'} value={color4} onChange={this.handleChangeColor}></ColorProperty>
<ColorProperty label={`${_t('Color')}1`}
name={'color1'}
value={color1}
onChange={this.handleChangeColor}
/>
<ColorProperty label={`${_t('Color')}2`}
name={'color2'}
value={color2}
onChange={this.handleChangeColor}
/>
<ColorProperty label={`${_t('Color')}3`}
name={'color3'}
value={color3}
onChange={this.handleChangeColor}
/>
<ColorProperty label={`${_t('Color')}4`}
name={'color4'}
value={color4}
onChange={this.handleChangeColor}
/>
<NumberProperty label={`${_t('Size')}`} name={'size'} value={size} onChange={this.handleChangeSize}></NumberProperty>
<NumberProperty label={`${_t('SizeSpread')}`} name={'sizeSpread'} value={sizeSpread} onChange={this.handleChangeSize}></NumberProperty>
<NumberProperty label={`${_t('Size')}`}
name={'size'}
value={size}
onChange={this.handleChangeSize}
/>
<NumberProperty label={`${_t('SizeSpread')}`}
name={'sizeSpread'}
value={sizeSpread}
onChange={this.handleChangeSize}
/>
<TextureProperty label={`${_t('Texture')}`} name={'texture'} value={texture} onChange={this.handleChangeTexture}></TextureProperty>
<TextureProperty label={`${_t('Texture')}`}
name={'texture'}
value={texture}
onChange={this.handleChangeTexture}
/>
<IntegerProperty label={`${_t('ParticleCount')}`} name={'particleCount'} value={particleCount} onChange={this.handleChangeParticleCount}></IntegerProperty>
<NumberProperty label={`${_t('MaxAge')}`} name={'maxAge'} value={maxAge} onChange={this.handleChangeMaxAge}></NumberProperty>
<NumberProperty label={`${_t('maxAgeSpread')}`} name={'maxAgeSpread'} value={maxAgeSpread} onChange={this.maxAgeSpread}></NumberProperty>
<IntegerProperty label={`${_t('ParticleCount')}`}
name={'particleCount'}
value={particleCount}
onChange={this.handleChangeParticleCount}
/>
<NumberProperty label={`${_t('MaxAge')}`}
name={'maxAge'}
value={maxAge}
onChange={this.handleChangeMaxAge}
/>
<NumberProperty label={`${_t('maxAgeSpread')}`}
name={'maxAgeSpread'}
value={maxAgeSpread}
onChange={this.maxAgeSpread}
/>
<ButtonProperty text={previewText} onChange={this.handlePreview}></ButtonProperty>
<ButtonProperty text={previewText}
onChange={this.handlePreview}
/>
</PropertyGroup>;
}
@ -133,7 +248,7 @@ class ParticleEmitterComponent extends React.Component {
handleExpand(expanded) {
this.setState({
expanded,
expanded
});
}
@ -142,7 +257,7 @@ class ParticleEmitterComponent extends React.Component {
if (!editor.selected || !(editor.selected.userData.type === 'ParticleEmitter')) {
this.setState({
show: false,
show: false
});
return;
}
@ -199,7 +314,7 @@ class ParticleEmitterComponent extends React.Component {
handleChangePosition(value, name) {
this.setState({
[name]: value,
[name]: value
});
if (value === null) {
@ -207,7 +322,7 @@ class ParticleEmitterComponent extends React.Component {
}
const { positionX, positionY, positionZ, positionSpreadX, positionSpreadY, positionSpreadZ } = Object.assign({}, this.state, {
[name]: value,
[name]: value
});
let group = this.selected.userData.group;
@ -228,7 +343,7 @@ class ParticleEmitterComponent extends React.Component {
handleChangeVelocity(value, name) {
this.setState({
[name]: value,
[name]: value
});
if (value === null) {
@ -236,7 +351,7 @@ class ParticleEmitterComponent extends React.Component {
}
const { velocityX, velocityY, velocityZ, velocitySpreadX, velocitySpreadY, velocitySpreadZ } = Object.assign({}, this.selected, {
[name]: value,
[name]: value
});
let group = this.selected.userData.group;
@ -258,13 +373,13 @@ class ParticleEmitterComponent extends React.Component {
handleChangeAcceleration(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
const { accelerationX, accelerationY, accelerationZ, accelerationSpreadX, accelerationSpreadY, accelerationSpreadZ } = Object.assign({}, this.state, {
[name]: value,
[name]: value
});
let group = this.selected.userData.group;
@ -286,13 +401,13 @@ class ParticleEmitterComponent extends React.Component {
handleChangeColor(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
const { color1, color2, color3, color4 } = Object.assign({}, this.state, {
[name]: value,
[name]: value
});
let group = this.selected.userData.group;
@ -311,13 +426,13 @@ class ParticleEmitterComponent extends React.Component {
handleChangeSize(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
const { size, sizeSpread } = Object.assign({}, this.state, {
[name]: value,
[name]: value
});
let group = this.selected.userData.group;
@ -336,17 +451,16 @@ class ParticleEmitterComponent extends React.Component {
handleChangeTexture(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
const { texture } = Object.assign({}, this.state, {
[name]: value,
[name]: value
});
let group = this.selected.userData.group;
let emitter = group.emitters[0];
texture.needsUpdate = true;
@ -359,13 +473,13 @@ class ParticleEmitterComponent extends React.Component {
handleChangeParticleCount(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
const { particleCount } = Object.assign({}, this.state, {
[name]: value,
[name]: value
});
let group = this.selected.userData.group;
@ -381,13 +495,13 @@ class ParticleEmitterComponent extends React.Component {
handleChangeMaxAge(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
const { maxAge } = Object.assign({}, this.state, {
[name]: value,
[name]: value
});
let group = this.selected.userData.group;
@ -403,13 +517,13 @@ class ParticleEmitterComponent extends React.Component {
handleChangeMaxAgeSpread(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
const { maxAgeSpread } = Object.assign({}, this.state, {
[name]: value,
[name]: value
});
let group = this.selected.userData.group;
@ -434,7 +548,7 @@ class ParticleEmitterComponent extends React.Component {
this.isPlaying = true;
this.setState({
previewText: _t('Cancel'),
previewText: _t('Cancel')
});
app.on(`animate.ParticleEmitterComponent`, this.onAnimate);
@ -444,7 +558,7 @@ class ParticleEmitterComponent extends React.Component {
this.isPlaying = false;
this.setState({
previewText: _t('Preview'),
previewText: _t('Preview')
});
let group = this.selected.userData.group;

64
ShadowEditor.Web/src/editor/component/ReflectorComponent.jsx
View File

@ -1,7 +1,4 @@
import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty, SelectProperty, ColorProperty, TextureProperty, ButtonsProperty, Button } from '../../third_party';
import SetValueCommand from '../../command/SetValueCommand';
import Converter from '../../utils/Converter';
import Ajax from '../../utils/Ajax';
import { PropertyGroup, CheckBoxProperty, NumberProperty, SelectProperty, ColorProperty } from '../../third_party';
/**
* 反光组件
@ -16,7 +13,7 @@ class ReflectorComponent extends React.Component {
this.sizes = {
'512': '512*512',
'1024': '1024*1024',
'2048': '2048*2048',
'2048': '2048*2048'
};
this.state = {
@ -31,7 +28,7 @@ class ReflectorComponent extends React.Component {
showClipBias: false,
clipBias: 0,
showRecursion: false,
recursion: false,
recursion: false
};
this.handleExpand = this.handleExpand.bind(this);
@ -47,12 +44,41 @@ class ReflectorComponent extends React.Component {
return null;
}
return <PropertyGroup title={_t('Reflector Component')} show={show} expanded={expanded} onExpand={this.handleExpand}>
<CheckBoxProperty label={_t('Reflect')} name={'reflect'} value={reflect} onChange={this.handleChange}></CheckBoxProperty>
<ColorProperty label={_t('Color')} name={'color'} value={color} show={showColor} onChange={this.handleChange}></ColorProperty>
<SelectProperty label={_t('TextureSize')} name={'size'} options={this.sizes} value={size} show={showSize} onChange={this.handleChange}></SelectProperty>
<NumberProperty label={_t('ClipBias')} name={'clipBias'} value={clipBias} show={showClipBias} onChange={this.handleChange}></NumberProperty>
<CheckBoxProperty label={_t('Recursion')} name={'recursion'} value={recursion} show={showRecursion} onChange={this.handleChange}></CheckBoxProperty>
return <PropertyGroup title={_t('Reflector Component')}
show={show}
expanded={expanded}
onExpand={this.handleExpand}
>
<CheckBoxProperty label={_t('Reflect')}
name={'reflect'}
value={reflect}
onChange={this.handleChange}
/>
<ColorProperty label={_t('Color')}
name={'color'}
value={color}
show={showColor}
onChange={this.handleChange}
/>
<SelectProperty label={_t('TextureSize')}
name={'size'}
options={this.sizes}
value={size}
show={showSize}
onChange={this.handleChange}
/>
<NumberProperty label={_t('ClipBias')}
name={'clipBias'}
value={clipBias}
show={showClipBias}
onChange={this.handleChange}
/>
<CheckBoxProperty label={_t('Recursion')}
name={'recursion'}
value={recursion}
show={showRecursion}
onChange={this.handleChange}
/>
</PropertyGroup>;
}
@ -63,7 +89,7 @@ class ReflectorComponent extends React.Component {
handleExpand(expanded) {
this.setState({
expanded,
expanded
});
}
@ -72,7 +98,7 @@ class ReflectorComponent extends React.Component {
if (!editor.selected || !(editor.selected instanceof THREE.Mesh)) {
this.setState({
show: false,
show: false
});
return;
}
@ -80,7 +106,7 @@ class ReflectorComponent extends React.Component {
this.selected = editor.selected;
let state = {
show: true,
show: true
};
if (this.selected instanceof THREE.Reflector) {
@ -93,7 +119,7 @@ class ReflectorComponent extends React.Component {
showClipBias: true,
clipBias: this.selected.userData.clipBias,
showRecursion: true,
recursion: this.selected.userData.recursion,
recursion: this.selected.userData.recursion
});
} else {
Object.assign(state, {
@ -101,7 +127,7 @@ class ReflectorComponent extends React.Component {
showColor: false,
showSize: false,
showClipBias: false,
showRecursion: false,
showRecursion: false
});
}
@ -111,13 +137,13 @@ class ReflectorComponent extends React.Component {
handleChange(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
const { reflect, color, size, clipBias, recursion } = Object.assign({}, this.state, {
[name]: value,
[name]: value
});
let editor = app.editor;

5
ShadowEditor.Web/src/editor/component/SceneComponent.jsx
View File

@ -1,5 +1,4 @@
import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty, SelectProperty, ColorProperty, TextureProperty, ButtonsProperty, Button } from '../../third_party';
import SetValueCommand from '../../command/SetValueCommand';
import { PropertyGroup, NumberProperty, SelectProperty, ColorProperty, TextureProperty, ButtonsProperty, Button } from '../../third_party';
import Converter from '../../utils/Converter';
import Ajax from '../../utils/Ajax';
@ -81,7 +80,7 @@ class SceneComponent extends React.Component {
render() {
const { show, expanded, backgroundType, backgroundColor, backgroundColorShow, backgroundImage, backgroundImageShow,
backgroundPosX, backgroundNegX, backgroundPosY, backgroundNegY, backgroundPosZ, backgroundNegZ, backgroundCubeTextureShow, backgroundCubeTextureCommandShow,
backgroundPosX, backgroundNegX, backgroundPosY, backgroundNegY, backgroundPosZ, backgroundNegZ, backgroundCubeTextureShow,
fogType, fogColor, fogColorShow, fogNear, fogNearShow, fogFar, fogFarShow, fogDensity, fogDensityShow } = this.state;
if (!show) {

20
ShadowEditor.Web/src/editor/component/ScriptComponent.jsx
View File

@ -1,7 +1,4 @@
import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty, SelectProperty, ColorProperty, TextureProperty, ButtonsProperty, Button } from '../../third_party';
import SetValueCommand from '../../command/SetValueCommand';
import Converter from '../../utils/Converter';
import Ajax from '../../utils/Ajax';
import { PropertyGroup } from '../../third_party';
/**
* 脚本组件
@ -15,7 +12,7 @@ class ScriptComponent extends React.Component {
this.state = {
show: false,
expanded: true,
expanded: true
};
this.handleExpand = this.handleExpand.bind(this);
@ -29,8 +26,11 @@ class ScriptComponent extends React.Component {
return null;
}
return <PropertyGroup title={_t('ScriptComponent')} show={show} expanded={expanded} onExpand={this.handleExpand}>
</PropertyGroup>;
return <PropertyGroup title={_t('ScriptComponent')}
show={show}
expanded={expanded}
onExpand={this.handleExpand}
/>;
}
componentDidMount() {
@ -40,7 +40,7 @@ class ScriptComponent extends React.Component {
handleExpand(expanded) {
this.setState({
expanded,
expanded
});
}
@ -49,7 +49,7 @@ class ScriptComponent extends React.Component {
if (!editor.selected || !editor.selected.userData) {
this.setState({
show: false,
show: false
});
return;
}
@ -57,7 +57,7 @@ class ScriptComponent extends React.Component {
this.selected = editor.selected;
let state = {
show: true,
show: true
};
this.setState(state);

123
ShadowEditor.Web/src/editor/component/ShadowComponent.jsx
View File

@ -1,5 +1,4 @@
import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty, SelectProperty } from '../../third_party';
import SetValueCommand from '../../command/SetValueCommand';
import { PropertyGroup, CheckBoxProperty, NumberProperty, SelectProperty } from '../../third_party';
/**
* 阴影组件
@ -15,7 +14,7 @@ class ShadowComponent extends React.Component {
'512': '512*512',
'1024': '1024*1024',
'2048': '2048*2048',
'4096': '4096*4096',
'4096': '4096*4096'
};
this.state = {
@ -43,7 +42,7 @@ class ShadowComponent extends React.Component {
cameraBottom: -5,
cameraNear: 0.5,
cameraFar: 1000,
cameraShow: false,
cameraShow: false
};
this.handleExpand = this.handleExpand.bind(this);
@ -69,18 +68,78 @@ class ShadowComponent extends React.Component {
return null;
}
return <PropertyGroup title={_t('Shadow Component')} show={show} expanded={expanded} onExpand={this.handleExpand}>
<CheckBoxProperty label={_t('Cast')} name={'castShadow'} value={castShadow} show={castShadowShow} onChange={this.handleChangeCastShadow}></CheckBoxProperty>
<CheckBoxProperty label={_t('Receive')} name={'receiveShadow'} value={receiveShadow} show={receiveShadowShow} onChange={this.handleChangeReceiveShadow}></CheckBoxProperty>
<NumberProperty label={_t('Radius')} name={'shadowRadius'} value={shadowRadius} show={shadowRadiusShow} onChange={this.handleChangeShadowRadius}></NumberProperty>
<SelectProperty label={_t('MapSize')} options={this.mapSize} name={'mapSize'} value={mapSize.toString()} show={mapSizeShow} onChange={this.handleChangeMapSize}></SelectProperty>
<NumberProperty label={_t('Bias')} name={'bias'} value={bias} show={biasShow} onChange={this.handleChangeBias}></NumberProperty>
<NumberProperty label={_t('CameraLeft')} name={'cameraLeft'} value={cameraLeft} show={cameraShow} onChange={this.handleChangeCameraLeft}></NumberProperty>
<NumberProperty label={_t('CameraRight')} name={'cameraRight'} value={cameraRight} show={cameraShow} onChange={this.handleChangeCameraRight}></NumberProperty>
<NumberProperty label={_t('CameraTop')} name={'cameraTop'} value={cameraTop} show={cameraShow} onChange={this.handleChangeCameraTop}></NumberProperty>
<NumberProperty label={_t('CameraBottom')} name={'cameraBottom'} value={cameraBottom} show={cameraShow} onChange={this.handleChangeCameraBottom}></NumberProperty>
<NumberProperty label={_t('CameraNear')} name={'cameraNear'} value={cameraNear} show={cameraShow} onChange={this.handleChangeCameraNear}></NumberProperty>
<NumberProperty label={_t('CameraFar')} name={'cameraFar'} value={cameraFar} show={cameraShow} onChange={this.handleChangeCameraFar}></NumberProperty>
return <PropertyGroup title={_t('Shadow Component')}
show={show}
expanded={expanded}
onExpand={this.handleExpand}
>
<CheckBoxProperty label={_t('Cast')}
name={'castShadow'}
value={castShadow}
show={castShadowShow}
onChange={this.handleChangeCastShadow}
/>
<CheckBoxProperty label={_t('Receive')}
name={'receiveShadow'}
value={receiveShadow}
show={receiveShadowShow}
onChange={this.handleChangeReceiveShadow}
/>
<NumberProperty label={_t('Radius')}
name={'shadowRadius'}
value={shadowRadius}
show={shadowRadiusShow}
onChange={this.handleChangeShadowRadius}
/>
<SelectProperty label={_t('MapSize')}
options={this.mapSize}
name={'mapSize'}
value={mapSize.toString()}
show={mapSizeShow}
onChange={this.handleChangeMapSize}
/>
<NumberProperty label={_t('Bias')}
name={'bias'}
value={bias}
show={biasShow}
onChange={this.handleChangeBias}
/>
<NumberProperty label={_t('CameraLeft')}
name={'cameraLeft'}
value={cameraLeft}
show={cameraShow}
onChange={this.handleChangeCameraLeft}
/>
<NumberProperty label={_t('CameraRight')}
name={'cameraRight'}
value={cameraRight}
show={cameraShow}
onChange={this.handleChangeCameraRight}
/>
<NumberProperty label={_t('CameraTop')}
name={'cameraTop'}
value={cameraTop}
show={cameraShow}
onChange={this.handleChangeCameraTop}
/>
<NumberProperty label={_t('CameraBottom')}
name={'cameraBottom'}
value={cameraBottom}
show={cameraShow}
onChange={this.handleChangeCameraBottom}
/>
<NumberProperty label={_t('CameraNear')}
name={'cameraNear'}
value={cameraNear}
show={cameraShow}
onChange={this.handleChangeCameraNear}
/>
<NumberProperty label={_t('CameraFar')}
name={'cameraFar'}
value={cameraFar}
show={cameraShow}
onChange={this.handleChangeCameraFar}
/>
</PropertyGroup>;
}
@ -91,7 +150,7 @@ class ShadowComponent extends React.Component {
handleExpand(expanded) {
this.setState({
expanded,
expanded
});
}
@ -100,7 +159,7 @@ class ShadowComponent extends React.Component {
if (!editor.selected || !(editor.selected instanceof THREE.Mesh || editor.selected instanceof THREE.DirectionalLight || editor.selected instanceof THREE.PointLight || editor.selected instanceof THREE.SpotLight)) {
this.setState({
show: false,
show: false
});
return;
}
@ -110,7 +169,7 @@ class ShadowComponent extends React.Component {
let state = {
show: true,
castShadow: this.selected.castShadow,
castShadowShow: true,
castShadowShow: true
};
if (this.selected instanceof THREE.Light) {
@ -128,7 +187,7 @@ class ShadowComponent extends React.Component {
cameraBottom: this.selected.shadow.camera.bottom,
cameraNear: this.selected.shadow.camera.near,
cameraFar: this.selected.shadow.camera.far,
cameraShow: true,
cameraShow: true
});
} else {
Object.assign(state, {
@ -137,7 +196,7 @@ class ShadowComponent extends React.Component {
shadowRadiusShow: false,
mapSizeShow: false,
biasShow: false,
cameraShow: false,
cameraShow: false
});
}
@ -147,7 +206,7 @@ class ShadowComponent extends React.Component {
handleChangeCastShadow(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
@ -164,7 +223,7 @@ class ShadowComponent extends React.Component {
handleChangeReceiveShadow(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
@ -181,7 +240,7 @@ class ShadowComponent extends React.Component {
handleChangeShadowRadius(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
@ -201,7 +260,7 @@ class ShadowComponent extends React.Component {
}
}
handleChangeMapSize(value, name) {
handleChangeMapSize(value) {
this.selected.shadow.mapSize.x = this.selected.shadow.mapSize.y = parseInt(value);
app.call(`objectChanged`, this, this.selected);
@ -210,7 +269,7 @@ class ShadowComponent extends React.Component {
handleChangeBias(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
@ -223,7 +282,7 @@ class ShadowComponent extends React.Component {
handleChangeCameraLeft(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
@ -237,7 +296,7 @@ class ShadowComponent extends React.Component {
handleChangeCameraRight(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
@ -251,7 +310,7 @@ class ShadowComponent extends React.Component {
handleChangeCameraTop(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
@ -265,7 +324,7 @@ class ShadowComponent extends React.Component {
handleChangeCameraBottom(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
@ -279,7 +338,7 @@ class ShadowComponent extends React.Component {
handleChangeCameraNear(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
@ -293,7 +352,7 @@ class ShadowComponent extends React.Component {
handleChangeCameraFar(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}

45
ShadowEditor.Web/src/editor/component/SmokeComponent.jsx
View File

@ -1,5 +1,4 @@
import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, ButtonProperty, NumberProperty } from '../../third_party';
import SetValueCommand from '../../command/SetValueCommand';
import { PropertyGroup, ButtonProperty, NumberProperty } from '../../third_party';
/**
* 烟组件
@ -17,7 +16,7 @@ class SmokeComponent extends React.Component {
expanded: true,
size: 2,
lifetime: 10,
previewText: _t('Preview'),
previewText: _t('Preview')
};
this.handleExpand = this.handleExpand.bind(this);
@ -34,10 +33,24 @@ class SmokeComponent extends React.Component {
return null;
}
return <PropertyGroup title={_t('SmokeComponent')} show={show} expanded={expanded} onExpand={this.handleExpand}>
<NumberProperty label={_t('Size')} name={'size'} value={size} onChange={this.handleChange}></NumberProperty>
<NumberProperty label={_t('TimeSpan')} name={'lifetime'} value={lifetime} onChange={this.handleChange}></NumberProperty>
<ButtonProperty text={previewText} onChange={this.handlePreview}></ButtonProperty>
return <PropertyGroup title={_t('SmokeComponent')}
show={show}
expanded={expanded}
onExpand={this.handleExpand}
>
<NumberProperty label={_t('Size')}
name={'size'}
value={size}
onChange={this.handleChange}
/>
<NumberProperty label={_t('TimeSpan')}
name={'lifetime'}
value={lifetime}
onChange={this.handleChange}
/>
<ButtonProperty text={previewText}
onChange={this.handlePreview}
/>
</PropertyGroup>;
}
@ -48,7 +61,7 @@ class SmokeComponent extends React.Component {
handleExpand(expanded) {
this.setState({
expanded,
expanded
});
}
@ -57,7 +70,7 @@ class SmokeComponent extends React.Component {
if (!editor.selected || !(editor.selected.userData.type === 'Smoke')) {
this.setState({
show: false,
show: false
});
return;
}
@ -68,23 +81,23 @@ class SmokeComponent extends React.Component {
show: true,
size: this.selected.userData.size,
lifetime: this.selected.userData.lifetime,
previewText: this.isPlaying ? _t('Cancel') : _t('Preview'),
previewText: this.isPlaying ? _t('Cancel') : _t('Preview')
});
}
handleChange(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
const { size, lifetime } = Object.assign({}, this.state, {
[name]: value,
[name]: value
});
this.selected.userData.size = size
this.selected.userData.size = size;
this.selected.userData.lifetime = lifetime;
this.selected.material.uniforms.size.value = size;
@ -105,7 +118,7 @@ class SmokeComponent extends React.Component {
this.isPlaying = true;
this.setState({
previewText: _t('Cancel'),
previewText: _t('Cancel')
});
app.on(`animate.SmokeComponent`, this.onAnimate);
@ -115,13 +128,13 @@ class SmokeComponent extends React.Component {
this.isPlaying = false;
this.setState({
previewText: _t('Preview'),
previewText: _t('Preview')
});
app.on(`animate.SmokeComponent`, null);
}
onAnimate(clock, deltaTime) {
onAnimate(clock) {
const elapsed = clock.getElapsedTime();
this.selected.update(elapsed);
}

91
ShadowEditor.Web/src/editor/component/TransformComponent.jsx
View File

@ -1,5 +1,4 @@
import { PropertyGrid, PropertyGroup, TextProperty, DisplayProperty, CheckBoxProperty, NumberProperty, SelectProperty } from '../../third_party';
import SetValueCommand from '../../command/SetValueCommand';
import { PropertyGroup, CheckBoxProperty, NumberProperty } from '../../third_party';
import SetPositionCommand from '../../command/SetPositionCommand';
import SetRotationCommand from '../../command/SetRotationCommand';
import SetScaleCommand from '../../command/SetScaleCommand';
@ -26,7 +25,7 @@ class TransformComponent extends React.Component {
scaleX: 1.0,
scaleY: 1.0,
scaleZ: 1.0,
scaleLocked: true,
scaleLocked: true
};
this.handleExpand = this.handleExpand.bind(this);
@ -44,17 +43,61 @@ class TransformComponent extends React.Component {
return null;
}
return <PropertyGroup title={_t('Transform Component')} show={show} expanded={expanded} onExpand={this.handleExpand}>
<NumberProperty name={'positionX'} label={`${_t('Translate')}X`} value={positionX} onChange={this.handleChangePosition}></NumberProperty>
<NumberProperty name={'positionY'} label={`${_t('Translate')}Y`} value={positionY} onChange={this.handleChangePosition}></NumberProperty>
<NumberProperty name={'positionZ'} label={`${_t('Translate')}Z`} value={positionZ} onChange={this.handleChangePosition}></NumberProperty>
<NumberProperty name={'rotationX'} label={`${_t('Rotate')}X`} value={rotationX} onChange={this.handleChangeRotation}></NumberProperty>
<NumberProperty name={'rotationY'} label={`${_t('Rotate')}Y`} value={rotationY} onChange={this.handleChangeRotation}></NumberProperty>
<NumberProperty name={'rotationZ'} label={`${_t('Rotate')}Z`} value={rotationZ} onChange={this.handleChangeRotation}></NumberProperty>
<NumberProperty name={'scaleX'} label={`${_t('Scale')}X`} value={scaleX} onChange={this.handleChangeScale}></NumberProperty>
<NumberProperty name={'scaleY'} label={`${_t('Scale')}Y`} value={scaleY} onChange={this.handleChangeScale}></NumberProperty>
<NumberProperty name={'scaleZ'} label={`${_t('Scale')}Z`} value={scaleZ} onChange={this.handleChangeScale}></NumberProperty>
<CheckBoxProperty name={'scaleLocked'} label={_t('Scale Locked')} value={scaleLocked} onChange={this.handleChangeScaleLock}></CheckBoxProperty>
return <PropertyGroup title={_t('Transform Component')}
show={show}
expanded={expanded}
onExpand={this.handleExpand}
>
<NumberProperty name={'positionX'}
label={`${_t('Translate')}X`}
value={positionX}
onChange={this.handleChangePosition}
/>
<NumberProperty name={'positionY'}
label={`${_t('Translate')}Y`}
value={positionY}
onChange={this.handleChangePosition}
/>
<NumberProperty name={'positionZ'}
label={`${_t('Translate')}Z`}
value={positionZ}
onChange={this.handleChangePosition}
/>
<NumberProperty name={'rotationX'}
label={`${_t('Rotate')}X`}
value={rotationX}
onChange={this.handleChangeRotation}
/>
<NumberProperty name={'rotationY'}
label={`${_t('Rotate')}Y`}
value={rotationY}
onChange={this.handleChangeRotation}
/>
<NumberProperty name={'rotationZ'}
label={`${_t('Rotate')}Z`}
value={rotationZ}
onChange={this.handleChangeRotation}
/>
<NumberProperty name={'scaleX'}
label={`${_t('Scale')}X`}
value={scaleX}
onChange={this.handleChangeScale}
/>
<NumberProperty name={'scaleY'}
label={`${_t('Scale')}Y`}
value={scaleY}
onChange={this.handleChangeScale}
/>
<NumberProperty name={'scaleZ'}
label={`${_t('Scale')}Z`}
value={scaleZ}
onChange={this.handleChangeScale}
/>
<CheckBoxProperty name={'scaleLocked'}
label={_t('Scale Locked')}
value={scaleLocked}
onChange={this.handleChangeScaleLock}
/>
</PropertyGroup>;
}
@ -65,7 +108,7 @@ class TransformComponent extends React.Component {
handleExpand(expanded) {
this.setState({
expanded,
expanded
});
}
@ -74,7 +117,7 @@ class TransformComponent extends React.Component {
if (!editor.selected || editor.selected === app.editor.scene || editor.selected.isGlobe) {
this.setState({
show: false,
show: false
});
return;
}
@ -91,20 +134,20 @@ class TransformComponent extends React.Component {
rotationZ: this.selected.rotation.z * 180 / Math.PI,
scaleX: this.selected.scale.x,
scaleY: this.selected.scale.y,
scaleZ: this.selected.scale.z,
scaleZ: this.selected.scale.z
});
}
handleChangePosition(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
const { positionX, positionY, positionZ } = Object.assign({}, this.state, {
[name]: value,
[name]: value
});
app.editor.execute(new SetPositionCommand(this.selected, new THREE.Vector3(
@ -119,13 +162,13 @@ class TransformComponent extends React.Component {
handleChangeRotation(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
const { rotationX, rotationY, rotationZ } = Object.assign({}, this.state, {
[name]: value,
[name]: value
});
app.editor.execute(new SetRotationCommand(this.selected, new THREE.Euler(
@ -140,13 +183,13 @@ class TransformComponent extends React.Component {
handleChangeScale(value, name) {
if (value === null) {
this.setState({
[name]: value,
[name]: value
});
return;
}
const { scaleX, scaleY, scaleZ, scaleLocked } = Object.assign({}, this.state, {
[name]: value,
[name]: value
});
if (scaleLocked) {
@ -160,7 +203,7 @@ class TransformComponent extends React.Component {
handleChangeScaleLock(value, name) {
this.setState({
scaleLocked: value,
scaleLocked: value
});
}
}

6
ShadowEditor.Web/src/editor/sidebar/AnimationPropertyPanel.jsx
View File

@ -1,5 +1,5 @@
import './css/AnimationPropertyPanel.css';
import { classNames, PropTypes, PropertyGrid } from '../../third_party';
import { PropertyGrid } from '../../third_party';
import BasicAnimationComponent from '../component/animation/BasicAnimationComponent.jsx';
import TweenAnimationComponent from '../component/animation/TweenAnimationComponent.jsx';
@ -15,8 +15,8 @@ class AnimationPropertyPanel extends React.Component {
render() {
return <PropertyGrid>
<BasicAnimationComponent></BasicAnimationComponent>
<TweenAnimationComponent></TweenAnimationComponent>
<BasicAnimationComponent />
<TweenAnimationComponent />
</PropertyGrid>;
}
}

25
ShadowEditor.Web/src/editor/sidebar/HistoryPanel.jsx
View File

@ -1,5 +1,5 @@
import './css/HistoryPanel.css';
import { classNames, PropTypes, Button } from '../../third_party';
import { Button } from '../../third_party';
/**
* 历史面板
@ -11,7 +11,7 @@ class HistoryPanel extends React.Component {
this.state = {
undos: [],
redos: [],
redos: []
};
this.ref = React.createRef();
@ -28,12 +28,23 @@ class HistoryPanel extends React.Component {
<div className={'toolbar'}>
<Button onClick={this.handleClear}>{_t('Clear')}</Button>
</div>
<div className={'content'} ref={this.ref} onClick={this.handleClick}>
<div className={'content'}
ref={this.ref}
onClick={this.handleClick}
>
{undos.map(n => {
return <div className={'undo'} value={n.id} key={n.id} onClick={this.handleClick}>{n.name}</div>;
return <div className={'undo'}
value={n.id}
key={n.id}
onClick={this.handleClick}
>{n.name}</div>;
})}
{redos.map(n => {
return <div className={'redo'} value={n.id} key={n.id} onClick={this.handleClick}>{n.name}</div>;
return <div className={'redo'}
value={n.id}
key={n.id}
onClick={this.handleClick}
>{n.name}</div>;
})}
</div>
</div>;
@ -57,14 +68,14 @@ class HistoryPanel extends React.Component {
history.undos.forEach(n => {
undos.push({
id: n.id,
name: n.name,
name: n.name
});
});
history.redos.forEach(n => {
redos.push({
id: n.id,
name: n.name,
name: n.name
});
});

20
ShadowEditor.Web/src/editor/sidebar/ScriptPanel.jsx
View File

@ -1,5 +1,5 @@
import './css/ScriptPanel.css';
import { classNames, PropTypes, Button, IconButton, Icon } from '../../third_party';
import { Button, Icon } from '../../third_party';
import ScriptWindow from './window/ScriptWindow.jsx';
/**
@ -11,7 +11,7 @@ class ScriptPanel extends React.Component {
super(props);
this.state = {
scripts: {},
scripts: {}
};
this.handleAddScript = this.handleAddScript.bind(this);
@ -32,8 +32,16 @@ class ScriptPanel extends React.Component {
{Object.values(scripts).map(n => {
return <li key={n.uuid}>
<span>{`${n.name}.${this.getExtension(n.type)}`}</span>
<Icon name={n.uuid} icon={'edit'} title={_t('Edit Script')} onClick={this.handleEditScript}></Icon>
<Icon name={n.uuid} icon={'delete'} title={_t('Delete Script')} onClick={this.handleRemoveScript}></Icon>
<Icon name={n.uuid}
icon={'edit'}
title={_t('Edit Script')}
onClick={this.handleEditScript}
/>
<Icon name={n.uuid}
icon={'delete'}
title={_t('Delete Script')}
onClick={this.handleRemoveScript}
/>
</li>;
})}
</ul>
@ -67,7 +75,7 @@ class ScriptPanel extends React.Component {
update() {
this.setState({
scripts: app.editor.scripts,
scripts: app.editor.scripts
});
}
@ -89,7 +97,7 @@ class ScriptPanel extends React.Component {
uuid,
name,
type,
source,
source
};
app.call(`scriptChanged`, this);