Skip to content

Commit

Permalink
feat(scene-view): "transform gizmo": add "switch world coordinate sys…
Browse files Browse the repository at this point in the history
…tem" ui
  • Loading branch information
yyc-git committed Feb 9, 2019
1 parent 06c28dd commit fba343d
Show file tree
Hide file tree
Showing 8 changed files with 226 additions and 76 deletions.
39 changes: 24 additions & 15 deletions public/css/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -400,27 +400,36 @@ html, body {
align-items: center;
height: 100%;
flex-direction: row; }
.wonder-app-component .wonder-controller-component .header-controller .controller-transform .header-item .transform-gizmo-switch {
.wonder-app-component .wonder-controller-component .header-controller .controller-transform .header-item .component-item {
flex: initial;
display: flex;
flex-direction: row;
margin-left: 10px;
align-items: center;
justify-content: center; }
.wonder-app-component .wonder-controller-component .header-controller .controller-transform .header-item .transform-gizmo-switch .translation {
background-image: url("../img/translation.png"); }
.wonder-app-component .wonder-controller-component .header-controller .controller-transform .header-item .transform-gizmo-switch .rotation {
background-image: url("../img/rotation.png"); }
.wonder-app-component .wonder-controller-component .header-controller .controller-transform .header-item .transform-gizmo-switch .select {
background-color: white;
background-size: 100%;
width: 30px;
height: 30px; }
.wonder-app-component .wonder-controller-component .header-controller .controller-transform .header-item .transform-gizmo-switch .not-select {
background-color: gray;
background-size: 100%;
width: 30px;
height: 30px; }
.wonder-app-component .wonder-controller-component .header-controller .controller-transform .header-item .component-item .transform-gizmo-switch {
flex: initial;
display: flex;
flex-direction: row;
margin-left: 10px;
align-items: center;
justify-content: center; }
.wonder-app-component .wonder-controller-component .header-controller .controller-transform .header-item .component-item .transform-gizmo-switch .translation {
background-image: url("../img/translation.png"); }
.wonder-app-component .wonder-controller-component .header-controller .controller-transform .header-item .component-item .transform-gizmo-switch .rotation {
background-image: url("../img/rotation.png"); }
.wonder-app-component .wonder-controller-component .header-controller .controller-transform .header-item .component-item .transform-gizmo-switch .select {
background-color: white;
background-size: 100%;
width: 30px;
height: 30px; }
.wonder-app-component .wonder-controller-component .header-controller .controller-transform .header-item .component-item .transform-gizmo-switch .not-select {
background-color: gray;
background-size: 100%;
width: 30px;
height: 30px; }
.wonder-app-component .wonder-controller-component .header-controller .controller-transform .header-item .component-item .transform-gizmo-coordinate-system-switch {
margin-left: 30px; }
.wonder-app-component .wonder-controller-component .header-controller .controller-runAndStop {
flex: initial;
width: 4%;
Expand Down
46 changes: 29 additions & 17 deletions public/sass/components/controller/_controller.scss
Original file line number Diff line number Diff line change
Expand Up @@ -58,30 +58,42 @@
align-items: center;
height: 100%;
flex-direction: row;
.transform-gizmo-switch {
.component-item {
flex: initial;
display: flex;
flex-direction: row;
margin-left: 10px;
align-items: center;
justify-content: center;
.translation {
background-image: url("../img/translation.png")
}
.rotation {
background-image: url("../img/rotation.png")
}
.select {
background-color: white;
background-size: 100%;
width: 30px;
height: 30px;
.transform-gizmo-switch {
flex: initial;
display: flex;
flex-direction: row;
margin-left: 10px;
align-items: center;
justify-content: center;
.translation {
background-image: url("../img/translation.png")
}
.rotation {
background-image: url("../img/rotation.png")
}
.select {
background-color: white;
background-size: 100%;
width: 30px;
height: 30px;
}
.not-select {
background-color: gray;
background-size: 100%;
width: 30px;
height: 30px;
}
}
.not-select {
background-color: gray;
background-size: 100%;
width: 30px;
height: 30px;
;
.transform-gizmo-coordinate-system-switch {
margin-left: 30px
}
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
open TransformGizmoCoordinateSystemSwitchType;

type state = {selectedCoordinateSystem: coordinateSystem};

type action =
| Change(coordinateSystem, onChangeFunc);

module Method = {
let getText = (coordinateSystem: coordinateSystem) =>
switch (coordinateSystem) {
| World => "World"
| Local => "Local"
};

let _getReverse = (coordinateSystem: coordinateSystem) : coordinateSystem =>
switch (coordinateSystem) {
| World => Local
| Local => World
};

let change = ((state, send), onChangeFunc) =>
send(
Change(state.selectedCoordinateSystem |> _getReverse, onChangeFunc),
);
};

let component = ReasonReact.reducerComponent("TransformGizmoSwitch");

let reducer = (action, state) =>
switch (action) {
| Change(coordinateSystem, onChangeFunc) =>
ReasonReactUtils.updateWithSideEffects(
{...state, selectedCoordinateSystem: coordinateSystem}, _state =>
onChangeFunc(coordinateSystem)
)
};

let render =
(onChangeFunc, ({state, send}: ReasonReact.self('a, 'b, 'c)) as self) =>
<article
key="TransformGizmoCoordinateSystemSwitch"
className="transform-gizmo-coordinate-system-switch">
<button onClick=(_e => Method.change((state, send), onChangeFunc))>
(DomHelper.textEl(Method.getText(state.selectedCoordinateSystem)))
</button>
</article>;

let make = (~defaultCoordinateSystem, ~onChange, _children) => {
...component,
initialState: () => {selectedCoordinateSystem: defaultCoordinateSystem},
reducer,
render: self => render(onChange, self),
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
type coordinateSystem = SceneViewType.coordinateSystem;

type onChangeFunc = coordinateSystem => unit;

type item = {
coordinateSystem,
onChangeFunc,
};

/* type data = array(item); */
37 changes: 33 additions & 4 deletions src/core/composable_component/controller/ui/Controller.re
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ open ColorType;

open Color;

type retainedProps = {updateTypeArr: UpdateStore.updateComponentTypeArr};

type state = {isReload: bool};

type action =
Expand Down Expand Up @@ -45,7 +47,7 @@ module Method = {
</div>
</div>;

let _handleChangeCurrentTransformType = type_ => {
let _handleChangeCurrentTransformGizmoType = type_ => {
open SceneViewType;

StateEditorService.getState()
Expand All @@ -57,6 +59,19 @@ module Method = {
StateLogicService.getAndRefreshEngineState();
};

let _handleChangeCurrentTransformGizmoCoordinateSystem = coordinateSystem => {
StateEditorService.getState()
|> CoordinateSystemTransformGizmoSceneViewEditorService.setCoordinateSystem(
coordinateSystem,
)
|> StateEditorService.setState
|> ignore;

StateLogicService.getAndRefreshEngineState();

();
};

let _getCurrentTransformType = () =>
CurrentTransformGizmoSceneViewEditorService.getCurrentGizmoType
|> StateLogicService.getEditorState;
Expand All @@ -69,20 +84,25 @@ module Method = {
data=[|
{
type_: SceneViewType.Translation,
onChangeFunc: _handleChangeCurrentTransformType,
onChangeFunc: _handleChangeCurrentTransformGizmoType,
},
{
type_: SceneViewType.Rotation,
onChangeFunc: _handleChangeCurrentTransformType,
onChangeFunc: _handleChangeCurrentTransformGizmoType,
},
|]
defaultType=(_getCurrentTransformType())
/>
<TransformGizmoCoordinateSystemSwitch
key=(DomHelper.getRandomKey())
onChange=_handleChangeCurrentTransformGizmoCoordinateSystem
defaultCoordinateSystem=SceneViewType.World
/>
</div>
</div>;
};

let component = ReasonReact.reducerComponent("Controller");
let component = ReasonReact.reducerComponentWithRetainedProps("Controller");

let reducer = (action, state) =>
switch (action) {
Expand Down Expand Up @@ -124,9 +144,18 @@ let render =
</div>
</article>;

let shouldUpdate =
({newSelf}: ReasonReact.oldNewSelf('a, retainedProps, 'c)) =>
newSelf.retainedProps.updateTypeArr
|> StoreUtils.shouldComponentUpdateWithAll;

let make = (~uiState: AppStore.appState, ~dispatchFunc, _children) => {
...component,
initialState: () => {isReload: false},
reducer,
retainedProps: {
updateTypeArr: StoreUtils.getUpdateComponentTypeArr(uiState),
},
shouldUpdate,
render: self => render(uiState, dispatchFunc, self),
};
44 changes: 8 additions & 36 deletions src/core/job/loop/UpdateTransformGizmosJob.re
Original file line number Diff line number Diff line change
Expand Up @@ -21,29 +21,6 @@ let _moveWholeGizmoToCurrentSceneTreeNode =
);
};

let _rotateWholeGizmoToCurrentSceneTreeNode =
(currentSceneTreeNode, wholeGizmo, engineState) => {
let currentSceneTreeNodeTransform =
GameObjectComponentEngineService.unsafeGetTransformComponent(
currentSceneTreeNode,
engineState,
);
let wholeGizmoTransform =
GameObjectComponentEngineService.unsafeGetTransformComponent(
wholeGizmo,
engineState,
);

engineState
|> TransformEngineService.setEulerAngles(
wholeGizmoTransform,
TransformEngineService.getEulerAngles(
currentSceneTreeNodeTransform,
engineState,
),
);
};

let _scaleWholeGizmo =
(currentSceneTreeNode, cameraGameObject, wholeGizmo, engineState) => {
let scaleFactor =
Expand Down Expand Up @@ -108,19 +85,14 @@ let updateTransformJob = (_, engineState) => {
);

/* TODO test */
switch (
CoordinateSystemTransformGizmoSceneViewEditorService.getCoordinateSystem(
editorState,
)
) {
| Local =>
engineState
|> _rotateWholeGizmoToCurrentSceneTreeNode(
currentSceneTreeNode,
wholeGizmo,
)
| World => engineState
};
engineState
|> CoordinateSystemTransformGizmosUtils.rotateWholeGizmoToCurrentSceneTreeNode(
currentSceneTreeNode,
wholeGizmo,
CoordinateSystemTransformGizmoSceneViewEditorService.getCoordinateSystem(
editorState,
),
);
} :
engineState;
/* IsTransformGizmoRenderSceneViewEditorService.isTranslationWholeGizmoRender(
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
let rotateWholeGizmoToCurrentSceneTreeNode =
(
currentSceneTreeNode,
wholeGizmo,
coordinateSystem: SceneViewType.coordinateSystem,
engineState,
) => {
let wholeGizmoTransform =
GameObjectComponentEngineService.unsafeGetTransformComponent(
wholeGizmo,
engineState,
);

switch (coordinateSystem) {
| Local =>
let currentSceneTreeNodeTransform =
GameObjectComponentEngineService.unsafeGetTransformComponent(
currentSceneTreeNode,
engineState,
);

engineState
|> TransformEngineService.setEulerAngles(
wholeGizmoTransform,
TransformEngineService.getEulerAngles(
currentSceneTreeNodeTransform,
engineState,
),
);
| World =>
engineState
|> TransformEngineService.setEulerAngles(
wholeGizmoTransform,
(0., 0., 0.),
)
};
};

let rotateWholeTransformGizmoToCurrentSceneTreeNode =
(editorState, engineState) => {
let currentSceneTreeNode =
SceneTreeEditorService.unsafeGetCurrentSceneTreeNode(editorState);

let coordinateSystem =
CoordinateSystemTransformGizmoSceneViewEditorService.getCoordinateSystem(
editorState,
);

engineState
|> rotateWholeGizmoToCurrentSceneTreeNode(
currentSceneTreeNode,
OperateTranslationGizmoSceneViewEditorService.unsafeGetTranslationWholeGizmo(
editorState,
),
coordinateSystem,
)
|> rotateWholeGizmoToCurrentSceneTreeNode(
currentSceneTreeNode,
OperateRotationGizmoSceneViewEditorService.unsafeGetRotationWholeGizmo(
editorState,
),
coordinateSystem,
);
};
Loading

0 comments on commit fba343d

Please sign in to comment.