Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-16 01:26:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat remove stretch add add distribute (#284)

Browse Source 
* feat remove stretch add add distribute

* fix rename icon

* fix:lint
This commit is contained in:
DiamondThree
2022-08-18 12:06:11 +08:00
committed by GitHub
parent 990a59b444
commit 5d32d656d5
28 changed files with 120 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/components/board-draw/src/components/align-panel/index.tsx
+5 -4
View File
@@ -52,14 +52,15 @@ const Container = styled('div')({
const SelectableContainer = styled('div')<{ selected?: boolean }>(
({ selected, theme }) => ({
width: '22px',
height: '22px',
color: theme.affine.palette.icons,
borderRadius: '5px',
overflow: 'hidden',
margin: '10px',
padding: '1px',
margin: '5px',
padding: '3px',
cursor: 'pointer',
boxSizing: 'border-box',
'&:hover': {
backgroundColor: theme.affine.palette.hover,
},
})
);
libs/components/board-draw/src/components/command-panel/AlignOperation.tsx
+39 -42
View File
@@ -1,22 +1,17 @@
import type { TldrawApp } from '@toeverything/components/board-state';
import { StretchType, TDShape } from '@toeverything/components/board-types';
import { DistributeType, TDShape } from '@toeverything/components/board-types';
import {
AlignHorizontalCenterIcon,
AlignIcon,
AlignToBottomIcon,
AlignToLeftIcon,
AlignToRightIcon,
AlignToTopIcon,
AlignVerticalCenterIcon,
DistributeHorizontalIcon,
DistributeVerticalIcon,
ShapesAlignBottomIcon,
ShapesAlignHorizontalCenterIcon,
ShapesAlignLeftIcon,
ShapesAlignRightIcon,
ShapesAlignTopIcon,
ShapesAlignVerticalCenterIcon,
ShapesDistributeHorizontalIcon,
ShapesDistributeVerticalIcon,
} from '@toeverything/components/icons';
import {
IconButton,
Popover,
Tooltip,
useTheme,
} from '@toeverything/components/ui';
import { IconButton, Popover, Tooltip } from '@toeverything/components/ui';
import { AlignPanel } from '../align-panel';
interface BorderColorConfigProps {
app: TldrawApp;
@@ -34,55 +29,57 @@ export enum AlignType {
let AlignPanelArr = [
{
name: 'top',
title: 'Align top',
icon: <AlignToTopIcon></AlignToTopIcon>,
name: 'left',
title: 'Align left',
icon: <ShapesAlignLeftIcon></ShapesAlignLeftIcon>,
},
{
name: 'centerVertical',
title: 'Align Center Vertical',
icon: <AlignVerticalCenterIcon></AlignVerticalCenterIcon>,
},
{
name: 'bottom',
title: 'Align bottom',
icon: <AlignToBottomIcon></AlignToBottomIcon>,
},
{
name: 'left',
title: 'Align left',
icon: <AlignToLeftIcon></AlignToLeftIcon>,
icon: <ShapesAlignVerticalCenterIcon></ShapesAlignVerticalCenterIcon>,
},
{
name: 'right',
title: 'Align right',
icon: <AlignToRightIcon></AlignToRightIcon>,
icon: <ShapesAlignRightIcon></ShapesAlignRightIcon>,
},
{
name: 'top',
title: 'Align top',
icon: <ShapesAlignTopIcon></ShapesAlignTopIcon>,
},
{
name: 'bottom',
title: 'Align bottom',
icon: <ShapesAlignBottomIcon></ShapesAlignBottomIcon>,
},
{
name: 'centerHorizontal',
title: 'Align centerHorizontal',
icon: <AlignHorizontalCenterIcon></AlignHorizontalCenterIcon>,
icon: (
<ShapesAlignHorizontalCenterIcon></ShapesAlignHorizontalCenterIcon>
),
},
{
name: 'stretchCenterHorizontal',
title: 'Align stretch centerHorizontal',
icon: <DistributeHorizontalIcon></DistributeHorizontalIcon>,
name: 'distributeCenterHorizontal',
title: 'Align distribute center horizontal',
icon: <ShapesDistributeHorizontalIcon></ShapesDistributeHorizontalIcon>,
},
{
name: 'stretchCenterVertical',
title: 'Align stretch centerHorizontal',
icon: <DistributeVerticalIcon></DistributeVerticalIcon>,
name: 'distributeCenterVertical',
title: 'Align distribute center horizontal',
icon: <ShapesDistributeVerticalIcon></ShapesDistributeVerticalIcon>,
},
];
export const AlignOperation = ({ app, shapes }: BorderColorConfigProps) => {
const theme = useTheme();
const setAlign = (alginType: string) => {
switch (alginType) {
case 'stretchCenterHorizontal':
app.stretch(StretchType.Horizontal);
case 'distributeCenterHorizontal':
app.distribute(DistributeType.Horizontal);
break;
case 'stretchCenterVertical':
app.stretch(StretchType.Vertical);
case 'distributeCenterVertical':
app.distribute(DistributeType.Vertical);
break;
default:
app.align(alginType as AlignType);