pass aspect ratio to fixedAspectRatio; remove printAreaDraw after printArea is defined

client/src/components/map/MapMode.tsx

@@ -1,40 +1,106 @@
-import { Center, SegmentedControl } from '@mantine/core'
-import { getMode, Mode, setMode } from '../../store/map'
-import { IconEdit, IconEye, IconPrinter } from '@tabler/icons-react'
+import { Button, Flex, FloatingIndicator, Popover, SegmentedControl } from '@mantine/core'
+import { Mode, setMode, useMapStore } from '../../store/map'
+import { IconChevronDown, IconCropLandscape, IconCropPortrait, IconEdit, IconEye, IconPrinter } from '@tabler/icons-react'
+import { useEffect, useState } from 'react'
+import { PrintOrientation, setPrintOrientation, usePrintStore } from '../../store/print'
 
 const MapMode = ({
     map_id
 }: { map_id: string }) => {
+    const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
+    const [controlsRefs, setControlsRefs] = useState<Record<string, HTMLButtonElement | null>>({});
+
+    const { mode } = useMapStore().id[map_id]
+
+    const setControlRef = (item: Mode) => (node: HTMLButtonElement) => {
+        controlsRefs[item] = node;
+        setControlsRefs(controlsRefs);
+    }
+
+    const { printOrientation } = usePrintStore()
+
+    useEffect(() => {
+
+    }, [printOrientation])
+
     return (
-        <SegmentedControl value={getMode(map_id)} onChange={(value) => setMode(map_id, value as Mode)} color="blue" w='auto' data={[
-            {
-                value: 'view',
-                label: (
-                    <Center style={{ gap: 10 }}>
-                        <IconEye size={16} />
-                        <span>Просмотр</span>
-                    </Center>
-                ),
-            },
-            {
-                value: 'edit',
-                label: (
-                    <Center style={{ gap: 10 }}>
-                        <IconEdit size={16} />
-                        <span>Редактирование</span>
-                    </Center>
-                ),
-            },
-            {
-                value: 'print',
-                label: (
-                    <Center style={{ gap: 10 }}>
-                        <IconPrinter size={16} />
-                        <span>Печать</span>
-                    </Center>
-                ),
-            },
-        ]} />
+        <Flex ref={setRootRef} p={4} gap={4}>
+            <Button
+                variant={mode === 'view' ? 'filled' : 'subtle'}
+                key={'view'}
+                ref={setControlRef('view' as Mode)}
+                onClick={() => {
+                    setMode(map_id, 'view' as Mode)
+                }}
+                leftSection={<IconEye size={16} />}
+                mod={{ active: mode === 'view' as Mode }}
+            >
+                Просмотр
+            </Button>
+
+            <Button
+                variant={mode === 'edit' ? 'filled' : 'subtle'}
+                key={'edit'}
+                ref={setControlRef('edit' as Mode)}
+                onClick={() => {
+                    setMode(map_id, 'edit' as Mode)
+                }}
+                leftSection={<IconEdit size={16} />}
+                mod={{ active: mode === 'edit' as Mode }}
+            >
+                Редактирование
+            </Button>
+
+            <Popover width='auto' position='bottom-end' >
+                <Popover.Target>
+                    <Button.Group>
+                        <Button
+                            variant={mode === 'print' ? 'filled' : 'subtle'}
+                            key={'print'}
+                            ref={setControlRef('print' as Mode)}
+                            onClick={(e) => {
+                                e.stopPropagation()
+                                setMode(map_id, 'print' as Mode)
+                            }}
+                            leftSection={<IconPrinter size={16} />}
+                            mod={{ active: mode === 'print' as Mode }}
+                        >
+                            Печать
+                        </Button>
+                        <Button variant={mode === 'print' ? 'filled' : 'subtle'} w='auto' p={8} title='Ориентация'>
+                            <IconChevronDown size={16} />
+                        </Button>
+                    </Button.Group>
+                </Popover.Target>
+
+                <Popover.Dropdown p={0} style={{ display: 'flex' }}>
+                    <SegmentedControl
+                        color='blue'
+                        value={printOrientation}
+                        onChange={(value) => {
+                            setPrintOrientation(value as PrintOrientation)
+                            setMode(map_id, 'print' as Mode)
+                        }}
+                        data={[
+                            {
+                                value: 'horizontal',
+                                label: (
+                                    <IconCropLandscape title='Горизонтальная' style={{ display: 'block' }} size={20} />
+                                ),
+                            },
+                            {
+                                value: 'vertical',
+                                label: (
+                                    <IconCropPortrait title='Вертикальная' style={{ display: 'block' }} size={20} />
+                                ),
+                            },
+                        ]}
+                    />
+                </Popover.Dropdown>
+            </Popover>
+
+            <FloatingIndicator target={controlsRefs[mode]} parent={rootRef} />
+        </Flex >
     )
 }