use Dialog for MapPrint
This commit is contained in:
@ -1,4 +1,4 @@
|
||||
import { IconHelp, IconWindowMaximize, IconWindowMinimize, IconX } from '@tabler/icons-react'
|
||||
import { IconHelp, IconWindowMaximize, IconWindowMinimize } from '@tabler/icons-react'
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import { clearPrintArea, PrintScale, setPreviousView, setPrintScale, setPrintScaleLine, useMapStore } from '../../../store/map'
|
||||
import { PrintFormat, PrintOrientation, printResolutions, setPrintOrientation, setPrintResolution, usePrintStore } from '../../../store/print'
|
||||
@ -8,7 +8,8 @@ import { useObjectsStore } from '../../../store/objects'
|
||||
import jsPDF from 'jspdf'
|
||||
import { getCenter } from 'ol/extent'
|
||||
import ScaleLine from 'ol/control/ScaleLine'
|
||||
import { Button, Checkbox, Dropdown, Field, Option, Radio, RadioGroup, Text } from '@fluentui/react-components'
|
||||
import { Button, Checkbox, Dialog, DialogActions, DialogBody, DialogContent, DialogSurface, DialogTitle, Dropdown, Field, Option, Radio, RadioGroup, Text } from '@fluentui/react-components'
|
||||
import { Dismiss24Regular } from '@fluentui/react-icons'
|
||||
|
||||
const MapPrint = ({
|
||||
id,
|
||||
@ -116,8 +117,11 @@ const MapPrint = ({
|
||||
minWidth: 125
|
||||
}))
|
||||
|
||||
const [opened, setOpened] = useState(false)
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (printArea) {
|
||||
if (printArea && opened) {
|
||||
// backup view before entering print mode
|
||||
setPreviousView(id, map?.getView())
|
||||
|
||||
@ -130,7 +134,7 @@ const MapPrint = ({
|
||||
})
|
||||
map?.removeInteraction(printAreaDraw)
|
||||
}
|
||||
}, [printArea, map])
|
||||
}, [printArea, map, opened])
|
||||
|
||||
useEffect(() => {
|
||||
if (printScaleLine && printArea) {
|
||||
@ -140,8 +144,6 @@ const MapPrint = ({
|
||||
}
|
||||
}, [printScaleLine, printArea])
|
||||
|
||||
const [opened, setOpened] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!!printArea) {
|
||||
setOpened(true)
|
||||
@ -157,42 +159,21 @@ const MapPrint = ({
|
||||
}, [opened])
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: opened ? 'flex' : 'none',
|
||||
position: fullscreen ? 'fixed' : 'fixed',
|
||||
zIndex: '9999',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
inset: 0,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
transition: 'all .3s ease',
|
||||
width: fullscreen ? '100%' : 'auto',
|
||||
height: fullscreen ? '100%' : 'fit-content',
|
||||
background: 'var(--colorNeutralBackground1)',
|
||||
border: '1px solid var(--colorNeutralShadowKey)',
|
||||
}}>
|
||||
<div style={{ display: 'flex', padding: '1rem', alignItems: 'center' }}>
|
||||
<Text>
|
||||
Предпросмотр области печати
|
||||
</Text>
|
||||
|
||||
<Dialog open={opened} defaultOpen={true}>
|
||||
<DialogSurface style={{ maxWidth: fullscreen ? '100%' : 'fit-content', maxHeight: fullscreen ? '100%' : 'fit-content' }}>
|
||||
<DialogBody>
|
||||
<DialogTitle action={
|
||||
<div style={{ display: 'flex', marginLeft: 'auto', gap: '1.5rem' }}>
|
||||
<Button appearance='subtle' title='Помощь' style={{ marginLeft: 'auto' }} icon={<IconHelp color='gray' />} />
|
||||
|
||||
<Button appearance='subtle' title={fullscreen ? 'Свернуть' : 'Развернуть'} style={{ marginLeft: 'auto' }} icon={fullscreen ? <IconWindowMinimize color='gray' /> : <IconWindowMaximize color='gray' />} onClick={() => setFullscreen(!fullscreen)} />
|
||||
|
||||
<Button appearance='subtle' title='Закрыть' icon={<IconX />} onClick={() => setOpened(false)} />
|
||||
</div>
|
||||
<Button appearance='subtle' title='Закрыть' icon={<Dismiss24Regular />} onClick={() => setOpened(false)} />
|
||||
</div>
|
||||
}>Предпросмотр области печати</DialogTitle>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', height: 'fit-content', overflow: 'auto' }}>
|
||||
<DialogContent>
|
||||
<div style={{ display: 'flex', width: 'fit-content', flexDirection: 'column', alignItems: 'center', height: 'fit-content', overflowY: 'auto' }}>
|
||||
<Text>Область печати можно передвигать.</Text>
|
||||
|
||||
<div id='print-portal' style={{
|
||||
@ -240,15 +221,16 @@ const MapPrint = ({
|
||||
))}
|
||||
</Dropdown>
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Checkbox
|
||||
checked={printScaleLine}
|
||||
label="Масштабная линия"
|
||||
onChange={(event) => setPrintScaleLine(id, event.currentTarget.checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', width: '100%', gap: '1rem', padding: '1rem', alignItems: 'center' }}>
|
||||
<Button style={{ marginLeft: 'auto' }} onClick={() => {
|
||||
if (previousView) {
|
||||
exportToPDF(printFormat, printResolution, printOrientation)
|
||||
@ -256,11 +238,117 @@ const MapPrint = ({
|
||||
}}>
|
||||
Печать
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogActions>
|
||||
</DialogBody>
|
||||
</DialogSurface>
|
||||
</Dialog>
|
||||
)
|
||||
|
||||
// return (
|
||||
// <div
|
||||
// style={{
|
||||
// display: opened ? 'flex' : 'none',
|
||||
// position: fullscreen ? 'fixed' : 'fixed',
|
||||
// zIndex: '9999',
|
||||
// width: '100%',
|
||||
// height: '100%',
|
||||
// inset: 0,
|
||||
// justifyContent: 'center',
|
||||
// alignItems: 'center',
|
||||
// }}
|
||||
// >
|
||||
// <div style={{
|
||||
// display: 'flex',
|
||||
// flexDirection: 'column',
|
||||
// transition: 'all .3s ease',
|
||||
// width: fullscreen ? '100%' : 'auto',
|
||||
// height: fullscreen ? '100%' : 'fit-content',
|
||||
// background: 'var(--colorNeutralBackground1)',
|
||||
// border: '1px solid var(--colorNeutralShadowKey)',
|
||||
// }}>
|
||||
// <div style={{ display: 'flex', padding: '1rem', alignItems: 'center' }}>
|
||||
// <Text>
|
||||
// Предпросмотр области печати
|
||||
// </Text>
|
||||
|
||||
// <div style={{ display: 'flex', marginLeft: 'auto', gap: '1.5rem' }}>
|
||||
// <Button appearance='subtle' title='Помощь' style={{ marginLeft: 'auto' }} icon={<IconHelp color='gray' />} />
|
||||
|
||||
// <Button appearance='subtle' title={fullscreen ? 'Свернуть' : 'Развернуть'} style={{ marginLeft: 'auto' }} icon={fullscreen ? <IconWindowMinimize color='gray' /> : <IconWindowMaximize color='gray' />} onClick={() => setFullscreen(!fullscreen)} />
|
||||
|
||||
// <Button appearance='subtle' title='Закрыть' icon={<IconX />} onClick={() => setOpened(false)} />
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', height: 'fit-content', overflow: 'auto' }}>
|
||||
// <Text>Область печати можно передвигать.</Text>
|
||||
|
||||
// <div id='print-portal' style={{
|
||||
// width: printOrientation === 'horizontal' ? '594px' : '420px',
|
||||
// height: printOrientation === 'horizontal' ? '420px' : '594px',
|
||||
// flexShrink: '0'
|
||||
// }}>
|
||||
|
||||
// </div>
|
||||
|
||||
// <div style={{ display: 'flex', width: '100%', flexWrap: 'wrap', gap: '1rem', padding: '1rem', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
||||
// <Field label={'Ориентация'}>
|
||||
// <RadioGroup value={printOrientation} onChange={(_, data) => setPrintOrientation(data.value as PrintOrientation)}>
|
||||
// <Radio value='horizontal' label='Горизонтальная' />
|
||||
// <Radio value='vertical' label='Вертикальная' />
|
||||
// </RadioGroup>
|
||||
// </Field>
|
||||
|
||||
// <Field label="Разрешение">
|
||||
// <Dropdown
|
||||
// defaultValue={printResolution.toString()}
|
||||
// value={printResolution.toString()}
|
||||
// selectedOptions={[printResolution.toString()]}
|
||||
// onOptionSelect={(_, data) => setPrintResolution(Number(data.optionValue))}
|
||||
// >
|
||||
// {printResolutions.map((res) => (
|
||||
// <Option key={res} text={res} value={res}>
|
||||
// {res}
|
||||
// </Option>
|
||||
// ))}
|
||||
// </Dropdown>
|
||||
// </Field>
|
||||
|
||||
|
||||
// <Field label="Масштаб">
|
||||
// <Dropdown
|
||||
// value={printScale.toString()}
|
||||
// selectedOptions={[printScale]}
|
||||
// onOptionSelect={(_, data) => setPrintScale(id, data.optionValue as PrintScale)}
|
||||
// >
|
||||
// {scaleOptions.map((opt) => (
|
||||
// <Option key={opt.value} text={opt.label} value={opt.value}>
|
||||
// {opt.label}
|
||||
// </Option>
|
||||
// ))}
|
||||
// </Dropdown>
|
||||
// </Field>
|
||||
|
||||
// <Checkbox
|
||||
// checked={printScaleLine}
|
||||
// label="Масштабная линия"
|
||||
// onChange={(event) => setPrintScaleLine(id, event.currentTarget.checked)}
|
||||
// />
|
||||
// </div>
|
||||
|
||||
// <div style={{ display: 'flex', width: '100%', gap: '1rem', padding: '1rem', alignItems: 'center' }}>
|
||||
// <Button style={{ marginLeft: 'auto' }} onClick={() => {
|
||||
// if (previousView) {
|
||||
// exportToPDF(printFormat, printResolution, printOrientation)
|
||||
// }
|
||||
// }}>
|
||||
// Печать
|
||||
// </Button>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// )
|
||||
}
|
||||
|
||||
export default MapPrint
|
||||
Reference in New Issue
Block a user