feat layers and align

libs/components/board-draw/src/components/align-panel/index.tsx

@@ -45,18 +45,16 @@ export const AlignPanel = ({
 };
 
 const Container = styled('div')({
-    width: '120px',
+    width: '170px',
     display: 'flex',
     flexWrap: 'wrap',
 });
 
 const SelectableContainer = styled('div')<{ selected?: boolean }>(
     ({ selected, theme }) => ({
-        width: '20px',
-        height: '20px',
-        // border: `1px solid ${
-        //     selected ? theme.affine.palette.primary : 'rgba(0,0,0,0)'
-        // }`,
+        width: '22px',
+        height: '22px',
+        color: theme.affine.palette.icons,
         borderRadius: '5px',
         overflow: 'hidden',
         margin: '10px',
@@ -65,10 +63,3 @@ const SelectableContainer = styled('div')<{ selected?: boolean }>(
         boxSizing: 'border-box',
     })
 );
-
-const Color = styled('div')({
-    width: '16px',
-    height: '16px',
-    borderRadius: '5px',
-    boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.25)',
-});

libs/components/board-draw/src/components/command-panel/AlignOperation.tsx

@@ -1,5 +1,5 @@
 import type { TldrawApp } from '@toeverything/components/board-state';
-import type { TDShape } from '@toeverything/components/board-types';
+import { StretchType, TDShape } from '@toeverything/components/board-types';
 import {
     AlignHorizontalCenterIcon,
     AlignIcon,
@@ -8,6 +8,8 @@ import {
     AlignToRightIcon,
     AlignToTopIcon,
     AlignVerticalCenterIcon,
+    DistributeHorizontalIcon,
+    DistributeVerticalIcon,
 } from '@toeverything/components/icons';
 import {
     IconButton,
@@ -61,11 +63,31 @@ let AlignPanelArr = [
         title: 'Align centerHorizontal',
         icon: <AlignHorizontalCenterIcon></AlignHorizontalCenterIcon>,
     },
+    {
+        name: 'stretchCenterHorizontal',
+        title: 'Align stretch centerHorizontal',
+        icon: <DistributeHorizontalIcon></DistributeHorizontalIcon>,
+    },
+    {
+        name: 'stretchCenterVertical',
+        title: 'Align stretch centerHorizontal',
+        icon: <DistributeVerticalIcon></DistributeVerticalIcon>,
+    },
 ];
 export const AlignOperation = ({ app, shapes }: BorderColorConfigProps) => {
     const theme = useTheme();
-    const setAlign = (alginType: AlignType) => {
-        app.align(alginType);
+    const setAlign = (alginType: string) => {
+        switch (alginType) {
+            case 'stretchCenterHorizontal':
+                app.stretch(StretchType.Horizontal);
+                break;
+            case 'stretchCenterVertical':
+                app.stretch(StretchType.Vertical);
+                break;
+            default:
+                app.align(alginType as AlignType);
+                break;
+        }
     };
 
     return (
@@ -79,7 +101,7 @@ export const AlignOperation = ({ app, shapes }: BorderColorConfigProps) => {
                 ></AlignPanel>
             }
         >
-            <Tooltip content="Fill Color" placement="top-start">
+            <Tooltip content="Align" placement="top-start">
                 <IconButton>
                     <AlignIcon />
                 </IconButton>

libs/components/board-draw/src/components/command-panel/MoveCoverage.tsx

@@ -1,44 +1,40 @@
 import type { TldrawApp } from '@toeverything/components/board-state';
 import type { TDShape } from '@toeverything/components/board-types';
 import {
-    HeadingOneIcon,
-    HeadingThreeIcon,
-    HeadingTwoIcon,
-    LockIcon,
-    TextFontIcon,
+    BringForwardIcon,
+    BringToFrontIcon,
+    LayersIcon,
+    SendBackwardIcon,
+    SendToBackIcon,
 } from '@toeverything/components/icons';
-import {
-    IconButton,
-    Popover,
-    styled,
-    Tooltip,
-} from '@toeverything/components/ui';
+import { IconButton, Popover, Tooltip } from '@toeverything/components/ui';
+import { AlignPanel } from '../align-panel';
 
 interface FontSizeConfigProps {
     app: TldrawApp;
     shapes: TDShape[];
 }
 
-const _fontSizes = [
+const AlignPanelArr = [
     {
-        name: 'To Front',
-        value: 'tofront',
-        icon: <HeadingOneIcon />,
+        title: 'To Front',
+        name: 'tofront',
+        icon: <BringToFrontIcon />,
     },
     {
-        name: 'Forward',
-        value: 'forward',
-        icon: <HeadingTwoIcon />,
+        title: 'Forward',
+        name: 'forward',
+        icon: <BringForwardIcon />,
     },
     {
-        name: 'Backward',
-        value: 'backward',
-        icon: <HeadingThreeIcon />,
+        title: 'Backward',
+        name: 'backward',
+        icon: <SendBackwardIcon />,
     },
     {
-        name: 'To Back',
-        value: 'toback',
-        icon: <TextFontIcon />,
+        title: 'To Back',
+        name: 'toback',
+        icon: <SendToBackIcon />,
     },
 ];
 
@@ -65,45 +61,17 @@ export const MoveCoverageConfig = ({ app, shapes }: FontSizeConfigProps) => {
             trigger="hover"
             placement="bottom-start"
             content={
-                <div>
-                    {_fontSizes.map(fontSize => {
-                        return (
-                            <ListItemContainer
-                                key={fontSize.value}
-                                onClick={() => moveCoverage(fontSize.value)}
-                            >
-                                {/* {fontSize.icon} */}
-                                <ListItemTitle>{fontSize.name}</ListItemTitle>
-                            </ListItemContainer>
-                        );
-                    })}
-                </div>
+                <AlignPanel
+                    alignOptions={AlignPanelArr}
+                    onSelect={moveCoverage}
+                ></AlignPanel>
             }
         >
-            <Tooltip content="Font Size" placement="top-start">
+            <Tooltip content="Layers" placement="top-start">
                 <IconButton>
-                    <LockIcon />
+                    <LayersIcon />
                 </IconButton>
             </Tooltip>
         </Popover>
     );
 };
-
-const ListItemContainer = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    height: '32px',
-    padding: '4px 12px',
-    color: theme.affine.palette.icons,
-
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    '&:hover': {
-        backgroundColor: theme.affine.palette.hover,
-    },
-}));
-
-const ListItemTitle = styled('span')(({ theme }) => ({
-    marginLeft: '12px',
-    color: theme.affine.palette.primaryText,
-}));