Skip to content

Commit

Permalink
Fix10_move properties control to the operations group, and adjust sha…
Browse files Browse the repository at this point in the history 
…re svg size (#863)
  • Loading branch information
@OlegMoshkovich
OlegMoshkovich committed Nov 16, 2023
1 parent cde6bc1 commit ece4952
Show file tree
Hide file tree
Showing 6 changed files with 104 additions and 78 deletions.
28 changes: 5 additions & 23 deletions src/Components/ElementGroup.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import React, {useState} from 'react'
import Stack from '@mui/material/Stack'
import ButtonGroup from '@mui/material/ButtonGroup'
import Stack from '@mui/material/Stack'
import useStore from '../store/useStore'
import CutPlaneMenu from './CutPlaneMenu'
import {TooltipIconButton} from './Buttons'
import FilterCenterFocusIcon from '@mui/icons-material/FilterCenterFocus'
import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'
import CutPlaneMenu from './CutPlaneMenu'
import CloseIcon from '@mui/icons-material/Close'
import FilterCenterFocusIcon from '@mui/icons-material/FilterCenterFocus'
import HideSourceOutlinedIcon from '@mui/icons-material/HideSourceOutlined'
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined'

Expand All @@ -18,12 +17,9 @@ import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined'
* @property {Function} deselectItems deselects currently selected element
* @return {React.Component}
*/
export default function ElementGroup({deselectItems, viewer}) {
export default function ElementGroup({deselectItems}) {
const viewer = useStore((state) => state.viewer)
const selectedElement = useStore((state) => state.selectedElement)
const isPropertiesOn = useStore((state) => state.isPropertiesOn)
const toggleIsPropertiesOn = useStore((state) => state.toggleIsPropertiesOn)
const openDrawer = useStore((state) => state.openDrawer)
const turnOffIsHelpTooltips = useStore((state) => state.turnOffIsHelpTooltips)
const [isIsolate, setIsIsolate] = useState(false)
const [isHidden, setIsHidden] = useState(false)

Expand Down Expand Up @@ -52,20 +48,6 @@ export default function ElementGroup({deselectItems, viewer}) {
<CutPlaneMenu/>
</>
}
{isSelected() && selectedElement !== null &&
<TooltipIconButton
title='Properties'
onClick={() => {
turnOffIsHelpTooltips()
toggleIsPropertiesOn()
openDrawer()
}}
selected={isPropertiesOn}
variant='solid'
placement='top'
icon={<FormatListBulletedIcon className='icon-share' color='secondary'/>}
/>
}
{isSelected() && selectedElement !== null &&
<TooltipIconButton
showTitle={true}
Expand Down
78 changes: 28 additions & 50 deletions src/Components/ElementGroup.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,36 @@
import React from 'react'
import {__getIfcViewerAPIExtendedMockSingleton} from 'web-ifc-viewer'
import {act, render, fireEvent, renderHook} from '@testing-library/react'
import ElementGroup from './ElementGroup'
import ShareMock from '../ShareMock'
import useStore from '../store/useStore'
import {__getIfcViewerAPIExtendedMockSingleton} from 'web-ifc-viewer'
import ElementGroup from './ElementGroup'


describe('ElementGroup', () => {
jest.mock('../store/useStore')
const viewer = __getIfcViewerAPIExtendedMockSingleton()
const viewerMock = {
isolator: {
toggleIsolationMode: jest.fn(),
hideSelectedElements: jest.fn(),
unHideAllElements: jest.fn(),
},
}
const deselectItems = jest.fn()
let viewer

it('should render CutPlaneMenu component when isIsolate is false', async () => {
beforeAll(async () => {
const {result} = renderHook(() => useStore((state) => state))
viewer = __getIfcViewerAPIExtendedMockSingleton()
viewer.isolator = {
toggleIsolationMode: jest.fn(),
hideSelectedElements: jest.fn(),
unHideAllElements: jest.fn(),
}
await act(() => {
result.current.setViewer(viewer)
})
const {queryByTitle} = render(
<ShareMock
initialEntries={['/v/p/index.ifc#p:x']}
>
<ElementGroup deselectItems={deselectItems} viewer={viewerMock}/>
</ShareMock>,
)
const cutPlaneMenuButton = queryByTitle('Section')
expect(cutPlaneMenuButton).toBeInTheDocument()
})

it('should render and trigger Properties button when a selected element is present', async () => {
const {result} = renderHook(() => useStore((state) => state))
await act(() => {
result.current.setSelectedElement({id: 123})
})
it('should render CutPlaneMenu component when isIsolate is false', () => {
const {queryByTitle} = render(
<ShareMock
initialEntries={['/v/p/index.ifc#p:x']}
>
<ElementGroup deselectItems={deselectItems} viewer={viewerMock}/>
<ShareMock initialEntries={['/v/p/index.ifc#p:x']}>
<ElementGroup deselectItems={deselectItems}/>
</ShareMock>,
)
const propertiesButton = queryByTitle('Properties')
fireEvent.click(propertiesButton)
expect(propertiesButton).toBeInTheDocument()
const cutPlaneMenuButton = queryByTitle('Section')
expect(cutPlaneMenuButton).toBeInTheDocument()
})

it('should render clear button when a selected element is present', async () => {
Expand All @@ -57,73 +39,69 @@ describe('ElementGroup', () => {
result.current.setSelectedElement({id: 123})
})
const {queryByTitle} = render(
<ShareMock
initialEntries={['/v/p/index.ifc#p:x']}
>
<ElementGroup deselectItems={deselectItems} viewer={viewerMock}/>
<ShareMock initialEntries={['/v/p/index.ifc#p:x']}>
<ElementGroup deselectItems={deselectItems}/>
</ShareMock>,
)
const clearButton = queryByTitle('Clear')
fireEvent.click(clearButton)
expect(clearButton).toBeInTheDocument()
})

it('should render and trigger Hide button when a selected element is present and not in Isolate mode', async () => {
it('render and trigger Hide button with selected element and not in Isolate mode', async () => {
const {result} = renderHook(() => useStore((state) => state))
await act(() => {
result.current.setSelectedElement({id: 123})
})
const {getByTitle} = render(
<ShareMock
initialEntries={['/v/p/index.ifc#p:x']}
>
<ElementGroup deselectItems={deselectItems} viewer={viewerMock}/>
<ShareMock initialEntries={['/v/p/index.ifc#p:x']}>
<ElementGroup deselectItems={deselectItems}/>
</ShareMock>,
)
const hideButton = getByTitle('Hide')
fireEvent.click(hideButton)
expect(viewerMock.isolator.hideSelectedElements).toHaveBeenCalled()
expect(viewer.isolator.hideSelectedElements).toHaveBeenCalled()
})

it('should toggle the isolation mode when Isolate button is clicked', () => {
const {getByTitle} = render(
<ShareMock initialEntries={['/v/p/index.ifc#p:x']}>
<ElementGroup deselectItems={deselectItems} viewer={viewerMock}/>
<ElementGroup deselectItems={deselectItems}/>
</ShareMock>,
)
const isolateButton = getByTitle('Isolate')
fireEvent.click(isolateButton)
expect(viewerMock.isolator.toggleIsolationMode).toHaveBeenCalled()
expect(viewer.isolator.toggleIsolationMode).toHaveBeenCalled()
})

it('should trigger unHideAllElements when Show all button is clicked', () => {
const {getByTitle} = render(
<ShareMock initialEntries={['/v/p/index.ifc#p:x']}>
<ElementGroup deselectItems={deselectItems} viewer={viewerMock}/>
<ElementGroup deselectItems={deselectItems}/>
</ShareMock>,
)
const hideButton = getByTitle('Hide')
fireEvent.click(hideButton)
const showAllButton = getByTitle('Show all')
fireEvent.click(showAllButton)
expect(viewerMock.isolator.unHideAllElements).toHaveBeenCalled()
expect(viewer.isolator.unHideAllElements).toHaveBeenCalled()
})

it('should trigger hideSelectedElements when Hide button is clicked', () => {
const {getByTitle} = render(
<ShareMock initialEntries={['/v/p/index.ifc#p:x']}>
<ElementGroup deselectItems={deselectItems} viewer={viewerMock}/>
<ElementGroup deselectItems={deselectItems}/>
</ShareMock>,
)
const hideButton = getByTitle('Hide')
fireEvent.click(hideButton)
expect(viewerMock.isolator.hideSelectedElements).toHaveBeenCalled()
expect(viewer.isolator.hideSelectedElements).toHaveBeenCalled()
})

it('should trigger deselectItems prop function when Clear button is clicked', () => {
const {getByTitle} = render(
<ShareMock initialEntries={['/v/p/index.ifc#p:x']}>
<ElementGroup deselectItems={deselectItems} viewer={viewerMock}/>
<ElementGroup deselectItems={deselectItems}/>
</ShareMock>,
)
const clearButton = getByTitle('Clear')
Expand Down
42 changes: 42 additions & 0 deletions src/Components/OperationGroup.text.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from 'react'
import {__getIfcViewerAPIExtendedMockSingleton} from 'web-ifc-viewer'
import {act, render, fireEvent, renderHook} from '@testing-library/react'
import ShareMock from '../ShareMock'
import useStore from '../store/useStore'
import OperationsGroup from './OperationsGroup'


describe('OperationsGroup', () => {
const deselectItems = jest.fn()
let viewer

beforeAll(async () => {
const {result} = renderHook(() => useStore((state) => state))
viewer = __getIfcViewerAPIExtendedMockSingleton()
viewer.isolator = {
toggleIsolationMode: jest.fn(),
hideSelectedElements: jest.fn(),
unHideAllElements: jest.fn(),
}
await act(() => {
result.current.setViewer(viewer)
})
})

it('should render and trigger Properties button when a selected element is present', async () => {
const {result} = renderHook(() => useStore((state) => state))
await act(() => {
result.current.setSelectedElement({id: 123})
})
const {queryByTitle} = render(
<ShareMock
initialEntries={['/v/p/index.ifc#p:x']}
>
<OperationsGroup deselectItems={deselectItems}/>
</ShareMock>,
)
const propertiesButton = queryByTitle('Properties')
fireEvent.click(propertiesButton)
expect(propertiesButton).toBeInTheDocument()
})
})
30 changes: 27 additions & 3 deletions src/Components/OperationsGroup.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import {useExistInFeature} from '../hooks/useExistInFeature'
import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined'
import NightlightOutlinedIcon from '@mui/icons-material/NightlightOutlined'
import WbSunnyOutlinedIcon from '@mui/icons-material/WbSunnyOutlined'
import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'


/**
* OperationsGroup contains tools for sharing, notes, properties, cut
Expand All @@ -23,21 +25,30 @@ import WbSunnyOutlinedIcon from '@mui/icons-material/WbSunnyOutlined'
*/
export default function OperationsGroup({deselectItems}) {
const toggleIsNotesOn = useStore((state) => state.toggleIsNotesOn)
const openDrawer = useStore((state) => state.openDrawer)
const isAppStoreOpen = useStore((state) => state.isAppStoreOpen)
const toggleAppStoreDrawer = useStore((state) => state.toggleAppStoreDrawer)
const isNotesOn = useStore((state) => state.isNotesOn)
const toggleIsPropertiesOn = useStore((state) => state.toggleIsPropertiesOn)
const isLoginVisible = useStore((state) => state.isLoginVisible)
const isCollaborationGroupVisible = useStore((state) => state.isCollaborationGroupVisible)
const isModelInteractionGroupVisible = useStore((state) => state.isModelInteractionGroupVisible)
const isSettingsVisible = useStore((state) => state.isSettingsVisible)
const isAppStoreEnabled = useExistInFeature('apps')
const turnOffIsHelpTooltips = useStore((state) => state.turnOffIsHelpTooltips)
const isMobile = useIsMobile()
const turnOffTooltips = () => {
return isMobile ? turnOffIsHelpTooltips() : null
}
// Properties
const isPropertiesOn = useStore((state) => state.isPropertiesOn)
const toggleIsPropertiesOn = useStore((state) => state.toggleIsPropertiesOn)
const openDrawer = useStore((state) => state.openDrawer)
const turnOffIsHelpTooltips = useStore((state) => state.turnOffIsHelpTooltips)
const selectedElement = useStore((state) => state.selectedElement)
const isSelected = () => {
const ifSelected = (
selectedElement !== null
)
return ifSelected
}


const toggle = (panel) => {
Expand Down Expand Up @@ -80,6 +91,19 @@ export default function OperationsGroup({deselectItems}) {
</>
}

{isSelected() && selectedElement !== null &&
<TooltipIconButton
title='Properties'
onClick={() => {
turnOffIsHelpTooltips()
toggleIsPropertiesOn()
openDrawer()
}}
selected={isPropertiesOn}
icon={<FormatListBulletedIcon className='icon-share' color='secondary'/>}
/>
}

{isSettingsVisible &&
<>
{isAppStoreEnabled &&
Expand Down
2 changes: 1 addition & 1 deletion src/Containers/CadView.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -695,7 +695,7 @@ export default function CadView({
width: '100%',
}}
>
<ElementGroup deselectItems={deselectItems} viewer={viewer}/>
<ElementGroup deselectItems={deselectItems}/>
</Box>
}
<Box
Expand Down
2 changes: 1 addition & 1 deletion src/assets/icons/Share.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit ece4952

Please sign in to comment.