tldraw/components/style-panel/style-panel.tsx

309 lines
8.3 KiB
TypeScript
Raw Normal View History

2021-05-28 20:30:27 +00:00
import styled from 'styles'
import state, { useSelector } from 'state'
import * as Panel from 'components/panel'
import { useRef } from 'react'
import { IconButton } from 'components/shared'
2021-06-03 12:06:39 +00:00
import { ChevronDown, Trash2, X } from 'react-feather'
import {
deepCompare,
deepCompareArrays,
getPage,
getSelectedIds,
setToArray,
} from 'utils/utils'
2021-05-28 20:30:27 +00:00
import AlignDistribute from './align-distribute'
import { MoveType } from 'types'
import SizePicker from './size-picker'
import {
2021-05-29 22:27:19 +00:00
ArrowDownIcon,
ArrowUpIcon,
AspectRatioIcon,
BoxIcon,
CopyIcon,
EyeClosedIcon,
EyeOpenIcon,
LockClosedIcon,
LockOpen1Icon,
2021-05-29 22:27:19 +00:00
PinBottomIcon,
PinTopIcon,
RotateCounterClockwiseIcon,
} from '@radix-ui/react-icons'
2021-06-01 21:49:32 +00:00
import DashPicker from './dash-picker'
import QuickColorSelect from './quick-color-select'
import ColorPicker from './color-picker'
import IsFilledPicker from './is-filled-picker'
import QuickSizeSelect from './quick-size-select'
import QuickdashSelect from './quick-dash-select'
2021-06-02 21:17:38 +00:00
import Tooltip from 'components/tooltip'
2021-05-26 10:34:10 +00:00
export default function StylePanel() {
const rContainer = useRef<HTMLDivElement>(null)
const isOpen = useSelector((s) => s.data.settings.isStyleOpen)
return (
<StylePanelRoot ref={rContainer} isOpen={isOpen}>
{isOpen ? (
<SelectedShapeStyles />
) : (
2021-06-01 21:49:32 +00:00
<>
<QuickColorSelect />
<QuickSizeSelect />
<QuickdashSelect />
2021-06-01 21:49:32 +00:00
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
2021-06-01 21:49:32 +00:00
title="Style"
size="small"
2021-06-01 21:49:32 +00:00
onClick={() => state.send('TOGGLED_STYLE_PANEL_OPEN')}
>
2021-06-02 21:17:38 +00:00
<Tooltip label="More">
<ChevronDown />
</Tooltip>
2021-06-01 21:49:32 +00:00
</IconButton>
</>
2021-05-26 10:34:10 +00:00
)}
</StylePanelRoot>
)
}
// This panel is going to be hard to keep cool, as we're selecting computed
// information, based on the user's current selection. We might have to keep
// track of this data manually within our state.
function SelectedShapeStyles() {
2021-05-26 10:34:10 +00:00
const selectedIds = useSelector(
(s) => setToArray(getSelectedIds(s.data)),
2021-05-26 10:34:10 +00:00
deepCompareArrays
)
const isAllLocked = useSelector((s) => {
const page = getPage(s.data)
return selectedIds.every((id) => page.shapes[id].isLocked)
})
const isAllAspectLocked = useSelector((s) => {
const page = getPage(s.data)
return selectedIds.every((id) => page.shapes[id].isAspectRatioLocked)
})
const isAllHidden = useSelector((s) => {
const page = getPage(s.data)
return selectedIds.every((id) => page.shapes[id].isHidden)
})
2021-06-01 21:49:32 +00:00
const commonStyle = useSelector((s) => s.values.selectedStyle, deepCompare)
2021-05-26 10:34:10 +00:00
2021-05-26 21:47:46 +00:00
const hasSelection = selectedIds.length > 0
2021-05-26 10:34:10 +00:00
return (
<Panel.Layout>
2021-05-28 20:30:27 +00:00
<Panel.Header side="right">
2021-05-26 10:34:10 +00:00
<h3>Style</h3>
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
size="small"
onClick={() => state.send('TOGGLED_STYLE_PANEL_OPEN')}
>
2021-05-27 17:59:40 +00:00
<X />
</IconButton>
2021-05-26 10:34:10 +00:00
</Panel.Header>
2021-05-26 19:20:52 +00:00
<Content>
<ColorPicker
color={commonStyle.color}
onChange={(color) => state.send('CHANGED_STYLE', { color })}
/>
<IsFilledPicker
isFilled={commonStyle.isFilled}
onChange={(isFilled) => state.send('CHANGED_STYLE', { isFilled })}
/>
2021-05-28 20:30:27 +00:00
<Row>
<label htmlFor="size">Size</label>
<SizePicker size={commonStyle.size} />
2021-05-28 20:30:27 +00:00
</Row>
2021-06-01 21:49:32 +00:00
<Row>
<label htmlFor="dash">Dash</label>
<DashPicker dash={commonStyle.dash} />
</Row>
2021-05-28 20:30:27 +00:00
<ButtonsRow>
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
disabled={!hasSelection}
size="small"
onClick={() => state.send('DUPLICATED')}
>
2021-06-02 21:17:38 +00:00
<Tooltip label="Duplicate">
<CopyIcon />
</Tooltip>
</IconButton>
2021-06-02 21:17:38 +00:00
<IconButton
disabled={!hasSelection}
size="small"
onClick={() => state.send('ROTATED_CCW')}
>
2021-06-02 21:17:38 +00:00
<Tooltip label="Rotate">
<RotateCounterClockwiseIcon />
</Tooltip>
</IconButton>
2021-06-02 21:17:38 +00:00
2021-05-28 20:30:27 +00:00
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
2021-05-28 20:30:27 +00:00
disabled={!hasSelection}
size="small"
onClick={() => state.send('TOGGLED_SHAPE_HIDE')}
2021-05-28 20:30:27 +00:00
>
2021-06-02 21:17:38 +00:00
<Tooltip label="Toogle Hidden">
{isAllHidden ? <EyeClosedIcon /> : <EyeOpenIcon />}
</Tooltip>
2021-05-28 20:30:27 +00:00
</IconButton>
2021-06-02 21:17:38 +00:00
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
disabled={!hasSelection}
size="small"
onClick={() => state.send('TOGGLED_SHAPE_LOCK')}
>
2021-06-02 21:17:38 +00:00
<Tooltip label="Toogle Locked">
{isAllLocked ? <LockClosedIcon /> : <LockOpen1Icon />}
</Tooltip>
</IconButton>
2021-06-02 21:17:38 +00:00
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
disabled={!hasSelection}
size="small"
onClick={() => state.send('TOGGLED_SHAPE_ASPECT_LOCK')}
>
2021-06-02 21:17:38 +00:00
<Tooltip label="Toogle Aspect Ratio Lock">
{isAllAspectLocked ? <AspectRatioIcon /> : <BoxIcon />}
</Tooltip>
2021-05-28 20:30:27 +00:00
</IconButton>
2021-05-29 22:27:19 +00:00
</ButtonsRow>
<ButtonsRow>
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
2021-05-29 22:27:19 +00:00
disabled={!hasSelection}
size="small"
2021-05-29 22:27:19 +00:00
onClick={() => state.send('MOVED', { type: MoveType.ToBack })}
>
2021-06-02 21:17:38 +00:00
<Tooltip label="Move to Back">
<PinBottomIcon />
</Tooltip>
2021-05-29 22:27:19 +00:00
</IconButton>
2021-06-02 21:17:38 +00:00
2021-05-29 22:27:19 +00:00
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
2021-05-29 22:27:19 +00:00
disabled={!hasSelection}
size="small"
2021-05-29 22:27:19 +00:00
onClick={() => state.send('MOVED', { type: MoveType.Backward })}
>
2021-06-02 21:17:38 +00:00
<Tooltip label="Move Backward">
<ArrowDownIcon />
</Tooltip>
2021-05-29 22:27:19 +00:00
</IconButton>
2021-06-02 21:17:38 +00:00
2021-05-29 22:27:19 +00:00
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
2021-05-29 22:27:19 +00:00
disabled={!hasSelection}
size="small"
2021-05-29 22:27:19 +00:00
onClick={() => state.send('MOVED', { type: MoveType.Forward })}
>
2021-06-02 21:17:38 +00:00
<Tooltip label="Move Forward">
<ArrowUpIcon />
</Tooltip>
2021-05-29 22:27:19 +00:00
</IconButton>
2021-06-02 21:17:38 +00:00
2021-05-29 22:27:19 +00:00
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
2021-05-29 22:27:19 +00:00
disabled={!hasSelection}
size="small"
2021-05-29 22:27:19 +00:00
onClick={() => state.send('MOVED', { type: MoveType.ToFront })}
>
2021-06-02 21:17:38 +00:00
<Tooltip label="More to Front">
<PinTopIcon />
</Tooltip>
2021-05-29 22:27:19 +00:00
</IconButton>
2021-06-02 21:17:38 +00:00
2021-05-29 13:59:11 +00:00
<IconButton
bp={{ '@initial': 'mobile', '@sm': 'small' }}
2021-05-29 13:59:11 +00:00
disabled={!hasSelection}
size="small"
2021-05-29 13:59:11 +00:00
onClick={() => state.send('DELETED')}
>
2021-06-02 21:17:38 +00:00
<Tooltip label="Delete">
<Trash2 size="15" />
</Tooltip>
2021-05-29 13:59:11 +00:00
</IconButton>
2021-05-28 20:30:27 +00:00
</ButtonsRow>
2021-05-29 22:27:19 +00:00
<AlignDistribute
hasTwoOrMore={selectedIds.length > 1}
hasThreeOrMore={selectedIds.length > 2}
/>
2021-05-26 19:20:52 +00:00
</Content>
2021-05-26 10:34:10 +00:00
</Panel.Layout>
)
}
const StylePanelRoot = styled(Panel.Root, {
2021-05-26 19:20:52 +00:00
minWidth: 1,
width: 184,
maxWidth: 184,
2021-05-28 20:30:27 +00:00
overflow: 'hidden',
position: 'relative',
2021-05-30 13:49:33 +00:00
border: '1px solid $panel',
boxShadow: '0px 2px 4px rgba(0,0,0,.2)',
2021-06-01 21:49:32 +00:00
display: 'flex',
alignItems: 'center',
pointerEvents: 'all',
2021-05-26 10:34:10 +00:00
variants: {
isOpen: {
2021-05-26 19:20:52 +00:00
true: {},
2021-05-26 10:34:10 +00:00
false: {
2021-05-30 13:49:33 +00:00
padding: 2,
2021-06-01 21:49:32 +00:00
width: 'fit-content',
2021-05-26 10:34:10 +00:00
},
},
},
})
2021-05-26 19:20:52 +00:00
const Content = styled(Panel.Content, {
padding: 8,
2021-05-26 10:34:10 +00:00
})
2021-05-28 20:30:27 +00:00
const Row = styled('div', {
position: 'relative',
display: 'flex',
width: '100%',
background: 'none',
border: 'none',
outline: 'none',
alignItems: 'center',
justifyContent: 'space-between',
padding: '4px 2px 4px 12px',
'& label': {
fontFamily: '$ui',
fontSize: '$1',
2021-05-28 20:30:27 +00:00
fontWeight: '$1',
margin: 0,
padding: 0,
},
'& > svg': {
position: 'relative',
},
})
const ButtonsRow = styled('div', {
position: 'relative',
display: 'flex',
width: '100%',
background: 'none',
border: 'none',
cursor: 'pointer',
outline: 'none',
alignItems: 'center',
justifyContent: 'flex-start',
padding: 4,
})