Skip to content
This repository has been archived by the owner on Jan 27, 2024. It is now read-only.

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
Fixed aspect ratio when scaling
Reset mode for each tool
Added mode to enable and disable y alignment
UI refinement
Added flight mode from threejs example
...Some fixes
  • Loading branch information
Владислав Чалый committed Feb 9, 2023
1 parent a057423 commit 4efe9af
Show file tree
Hide file tree
Showing 20 changed files with 398 additions and 111 deletions.
2 changes: 2 additions & 0 deletions src/renderer/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { HeaderApp } from './HeaderApp';
import { DragAndDropApp } from './Main/Components/DragAndDrop/DragAndDropApp';
import { ToolsLeftApp } from './Main/Components/ToolsLeft/ToolsLeftApp';
import { ToolsRightApp } from './Main/Components/ToolsRight/ToolsRightApp';
import { FlyModeDescriptionApp } from './Main/Components/ViewChange/FlyModeApp';
import { ViewChangeApp } from './Main/Components/ViewChange/ViewChangeApp';
import { ConsoleApp } from './Main/Console/ConsoleApp';
import { SceneApp } from './Main/Scene/SceneApp';
Expand Down Expand Up @@ -46,6 +47,7 @@ const Main = observer(() => {

<AnimationFade in={AppStore.getState() === Pages.Main}>
<FlexBoxRow>
<FlyModeDescriptionApp/>
<FlexBoxRow>
<SceneApp/>
<ToolsRightApp/>
Expand Down
143 changes: 138 additions & 5 deletions src/renderer/Main/Components/ToolsLeft/Transform/TransformApp.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { Box,Divider,Grow,Input,Popper,Typography, capitalize } from '@mui/material';
import { Box,Grow,Popper,Typography, capitalize } from '@mui/material';
import { AiOutlineVerticalAlignBottom } from '@react-icons/all-files/ai/AiOutlineVerticalAlignBottom';
import { BiReset } from '@react-icons/all-files/bi/BiReset';
import { BsArrowsMove } from '@react-icons/all-files/bs/BsArrowsMove';
import { FiCode } from '@react-icons/all-files/fi/FiCode';
import { Md3DRotation } from '@react-icons/all-files/md/Md3DRotation';
import { MdLockOpen } from '@react-icons/all-files/md/MdLockOpen';
import { MdLockOutline } from '@react-icons/all-files/md/MdLockOutline';
import { runInAction } from 'mobx';
import { observer } from 'mobx-react';
import { createRef, useState } from 'react';
import { SceneObject } from 'renderer/Main/Scene/Entities/SceneObject';
Expand All @@ -11,12 +16,13 @@ import { Dispatch } from 'renderer/Shared/Events';
import { EnumHelpers } from 'renderer/Shared/Helpers/Enum';
import { flexChildrenCenter } from 'renderer/Shared/Styled/FlexBox';
import { Sizes } from 'renderer/Shared/Styled/Sizes';
import { MathUtils } from 'three';
import { MathUtils, Vector3 } from 'three';
import { Key } from 'ts-keycode-enum';
import { container } from 'tsyringe';
import { TransformStore } from './TransformStore';
import { AppEventEnum, AppEventMoveObject, TransformEnum } from '../../../../Shared/Libs/Types';
import { ToolButton } from '../../ToolsRight/Supports/Shared/ToolButton';
import { ToolButtonStyled } from '../Shared/ToolButton';
import { TransformStore } from './TransformStore';

const scale = 'scale(1.1)';

Expand Down Expand Up @@ -51,7 +57,8 @@ export const TransformApp = observer(() => {
sx={{ borderRadius: store.state === TransformEnum.Scale ? '0px 4px 4px 0px' : '0px 0px 2px 0px' }}>
<FiCode transform={scale}/>
</ToolButtonStyled>
<Popper open={!!store.anchorElement && store.state !== TransformEnum.None} anchorEl={store.anchorElement} placement='right-start'>
<Popper open={!!store.anchorElement && store.state !== TransformEnum.None} anchorEl={store.anchorElement}
placement='right-start' onResize={undefined} onResizeCapture={undefined}>
<Grow in>
<Box sx={{
borderRadius: Sizes.four,
Expand Down Expand Up @@ -143,6 +150,42 @@ const TransformPopperContent = observer(() => {
scene.transformControlsUpdate();
scene.transformControlsDragging({ value: false });
}}/>

<Box sx={{
display: 'flex',
gap: 0.5,
mt: '8px',
}}>
<ToolButton
text='auto align to plane'
isActive={store.alignToPlane}
onClick={() => {
runInAction(() => {
store.alignToPlane = !store.alignToPlane;
});
}}>
<AiOutlineVerticalAlignBottom color={colors.background.light}/>
</ToolButton>

<ToolButton
text='reset'
onClick={() => {
scene.transformControlsDragging({ value: true });

for (const sceneObject of scene.groupSelected) {
Dispatch(AppEventEnum.TRANSFORM_OBJECT, {
from: sceneObject.mesh.position.clone(),
to: new Vector3(0, 0, 0),
sceneObject: sceneObject
} as AppEventMoveObject);
}

scene.transformControlsUpdate();
scene.transformControlsDragging({ value: false });
}}>
<BiReset color={colors.background.light}/>
</ToolButton>
</Box>
</>;
break;

Expand Down Expand Up @@ -205,6 +248,42 @@ const TransformPopperContent = observer(() => {
scene.transformControlsUpdate();
scene.transformControlsDragging({ value: false });
}}/>

<Box sx={{
display: 'flex',
gap: 0.5,
mt: '8px',
}}>
<ToolButton
text='auto align to plane'
isActive={store.alignToPlane}
onClick={() => {
runInAction(() => {
store.alignToPlane = !store.alignToPlane;
});
}}>
<AiOutlineVerticalAlignBottom color={colors.background.light}/>
</ToolButton>

<ToolButton
text='reset'
onClick={() => {
scene.transformControlsDragging({ value: true });

for (const sceneObject of scene.groupSelected) {
Dispatch(AppEventEnum.TRANSFORM_OBJECT, {
from: sceneObject.mesh.rotation.clone(),
to: new Vector3(0, 0, 0),
sceneObject: sceneObject
} as AppEventMoveObject);
}

scene.transformControlsUpdate();
scene.transformControlsDragging({ value: false });
}}>
<BiReset color={colors.background.light}/>
</ToolButton>
</Box>
</>;
break;

Expand Down Expand Up @@ -271,6 +350,58 @@ const TransformPopperContent = observer(() => {
scene.transformControlsUpdate();
scene.transformControlsDragging({ value: false });
}}/>

<Box sx={{
display: 'flex',
gap: 0.5,
mt: '8px',
}}>
<ToolButton
text='fixed'
isActive={store.fixedScale}
onClick={() => {
runInAction(() => {
store.fixedScale = !store.fixedScale;
});
}}>
{store.fixedScale
? <MdLockOutline color={colors.background.light}/>
: <MdLockOpen color={colors.background.light}/>}
</ToolButton>

<ToolButton
text='auto align to plane'
isActive={store.alignToPlane}
onClick={() => {
runInAction(() => {
store.alignToPlane = !store.alignToPlane;
});
}}>
<AiOutlineVerticalAlignBottom color={colors.background.light}/>
</ToolButton>

<ToolButton
text='reset'
onClick={() => {
scene.transformControlsDragging({ value: true });

const mesh = scene.groupSelectedLast?.mesh;

const lock = store.fixedScale;
store.fixedScale = false;
Dispatch(AppEventEnum.TRANSFORM_OBJECT, {
from: mesh.scale.clone(),
to: new Vector3(1, 1, 1),
sceneObject: scene.groupSelectedLast
} as AppEventMoveObject);
store.fixedScale = lock;

scene.transformControlsUpdate();
scene.transformControlsDragging({ value: false });
}}>
<BiReset color={colors.background.light}/>
</ToolButton>
</Box>
</>;
break;
}
Expand Down Expand Up @@ -305,7 +436,8 @@ const TransformNumberValue = observer((props: {
display: 'flex',
justifyContent: 'space-between',
overflow: 'hidden',
marginTop: props.marginTop ? Sizes.four : 'unset'
marginTop: props.marginTop ? Sizes.four : 'unset',
backgroundColor: colors.background.dark,
}}>
<Box sx={{
width: Sizes.twentyFour,
Expand Down Expand Up @@ -339,6 +471,7 @@ const TransformNumberValue = observer((props: {
border: 'unset',
outline: 'unset',
marginLeft: '2px',
backgroundColor: colors.background.dark,
}}
ref={reference}
onChange={(e) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import { TransformEnum } from '../../../../Shared/Libs/Types';
export class TransformStore {
private _state: TransformEnum;

public fixedScale = true;
public alignToPlane = true;

public anchorElement: (EventTarget & HTMLElement) | null = null;

public get state() {
Expand Down
44 changes: 25 additions & 19 deletions src/renderer/Main/Components/ToolsRight/ListObjectsApp.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,51 @@
import { IconButton, Stack, Tooltip, Typography } from '@mui/material';
import { Box, Stack, Typography } from '@mui/material';
import { RiCheckboxIndeterminateLine } from '@react-icons/all-files/ri/RiCheckboxIndeterminateLine';
import { RiCheckboxLine } from '@react-icons/all-files/ri/RiCheckboxLine';
import { RiDeleteBinLine } from '@react-icons/all-files/ri/RiDeleteBinLine';
import { observer } from 'mobx-react-lite';
import { ReactChild } from 'react';
import { AppStore } from 'renderer/AppStore';
import { SceneObject } from 'renderer/Main/Scene/Entities/SceneObject';
import { colors, config, saveConfig } from 'renderer/Shared/Config';
import { isKeyPressed } from 'renderer/Shared/Libs/Keys';
import { FlexBox, FlexBoxRow, RisizibleFlexBox, flexChildrenCenter, flexSelfCenter } from 'renderer/Shared/Styled/FlexBox';
import { Sizes } from 'renderer/Shared/Styled/Sizes';
import { Key } from 'ts-keycode-enum';
import { ToolButton } from './Supports/Shared/ToolButton';

export const ListObjects = observer(() => {

return <>
<SceneItems/>
<Stack direction='row' sx={{
p: Sizes.four,
p: Sizes.eight,
backgroundColor: colors.background.heavy,
flexWrap: 'wrap',
borderRadius: '0 0 0 4px',
borderLeft: '1px solid ' + colors.background.black,
borderBottom: '1px solid ' + colors.background.black
}}>
<Button text='Select all' action={() => SceneObject.SelectAllObjects()} icon={<RiCheckboxLine color={colors.background.light}/>}/>
<Button text='Clear select' action={() => SceneObject.DeselectAllObjects()} icon={<RiCheckboxIndeterminateLine color={colors.background.light}/>}/>
<Button text='Delete' action={() => SceneObject.SelectObjsDelete()} icon={<RiDeleteBinLine color={colors.background.light}/>}/>
<Box sx={{
display: 'flex',
gap: 0.5,
}}>
<ToolButton
text='Select all'
onClick={() => SceneObject.SelectAllObjects()}>
<RiCheckboxLine color={colors.background.light}/>
</ToolButton>

<ToolButton
text='Clear select'
onClick={() => SceneObject.DeselectAllObjects()}>
<RiCheckboxIndeterminateLine color={colors.background.light}/>
</ToolButton>

<ToolButton
text='Delete selected'
onClick={() => SceneObject.SelectObjsDelete()}>
<RiDeleteBinLine color={colors.background.light}/>
</ToolButton>
</Box>
</Stack>
</>;
});
Expand Down Expand Up @@ -122,16 +141,3 @@ const SceneItems = observer(() => {
})}
</RisizibleFlexBox>;
});

const Button = (props: {
text: string;
action: () => void;
icon: ReactChild;
}) => {
return <Tooltip title={props.text} arrow placement="bottom"
PopperProps={{ sx: { userSelect: 'none' } }}>
<IconButton size='small' aria-label={props.text} onClick={props.action}>
{props.icon}
</IconButton>
</Tooltip>;
};
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { Box, Slider } from '@mui/material';
import { Box } from '@mui/material';
import _ from 'lodash';
import { runInAction } from 'mobx';
import { observer } from 'mobx-react-lite';
import { AppStore } from '../../../../AppStore';
import { config } from '../../../../Shared/Config';
import { SliceSlider } from '../../../../Shared/Styled/Slider';
import { SceneObject } from '../../../Scene/Entities/SceneObject';

export const SliceSliderApp = observer(() => {
Expand All @@ -19,7 +20,7 @@ export const SliceSliderApp = observer(() => {
flexGrow: 1,
ml: 1, mt: 4
}}>
<Slider
<SliceSlider
sx={{
height:'100%',
opacity: 0.4,
Expand All @@ -33,7 +34,7 @@ export const SliceSliderApp = observer(() => {
}}
orientation="vertical"
valueLabelDisplay="off"
min={-1}
min={0}
max={100001}
value={100000 * ((AppStore.sceneStore.clippingScenePercent * AppStore.sceneStore.gridSize.y) / sliceTo)}
onChange={(_e,n: number & any) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const PerformSupportsApp = observer(() => {
gap: 0.5,
}}>
<ToolButton
text='add support tool. press R to randomize'
text={'add support tool\npress R to randomize'}
isActive={AppStore.performSupports.state === SupportsEnum.Add}
onClick={() => AppStore.performSupports.changeState( SupportsEnum.Add)}>
<MdAddCircleOutline transform='scale(1.1)' color={colors.background.light}/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -150,8 +150,9 @@ const createContactSphere = (
.deleteAttribute('uv')
.toNonIndexed();

const mesh = new Mesh( geometry, material );
const mesh = new Mesh(geometry, material);

mesh.frustumCulled = false;
mesh.position.set(positionStart.x, positionStart.y, positionStart.z);

return {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ import { colors } from 'renderer/Shared/Config';

export const ToolButton = (props: {
children: ReactElement;
isActive: boolean;
isActive?: boolean;
onClick: () => void;
text: string;
placement?: string | any;
}) => {

return <Tooltip title={props.text} arrow placement={props.placement ?? 'bottom'}>
return <Tooltip title={<span style={{ whiteSpace: 'pre-line' }}>{props.text}</span>} arrow placement={props.placement ?? 'bottom'}>
<Box
onClick={props.onClick}
sx={{
Expand Down
1 change: 0 additions & 1 deletion src/renderer/Main/Components/ToolsRight/ToolsRightApp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ export const ToolsRightApp = observer(() => {
sx={{
width: store.width + 'px',
height: 'fit-content',
opacity: config.ui.opacity,
position: 'absolute',
top: APP_HEADER_HEIGHT_PX,
bottom: APP_BOTTOM_HEIGHT_PX,
Expand Down
Loading

0 comments on commit 4efe9af

Please sign in to comment.