feat remove stretch add add distribute (#284)

* feat remove stretch add add distribute

* fix rename icon

* fix:lint

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

@@ -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',
+        margin: '5px',
-        padding: '1px',
+        padding: '3px',
         cursor: 'pointer',
         boxSizing: 'border-box',
+        '&:hover': {
+            backgroundColor: theme.affine.palette.hover,
+        },
     })
 );

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

@@ -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,
+    ShapesAlignBottomIcon,
-    AlignToLeftIcon,
+    ShapesAlignHorizontalCenterIcon,
-    AlignToRightIcon,
+    ShapesAlignLeftIcon,
-    AlignToTopIcon,
+    ShapesAlignRightIcon,
-    AlignVerticalCenterIcon,
+    ShapesAlignTopIcon,
-    DistributeHorizontalIcon,
+    ShapesAlignVerticalCenterIcon,
-    DistributeVerticalIcon,
+    ShapesDistributeHorizontalIcon,
+    ShapesDistributeVerticalIcon,
 } from '@toeverything/components/icons';
-import {
+import { IconButton, Popover, Tooltip } from '@toeverything/components/ui';
-    IconButton,
-    Popover,
-    Tooltip,
-    useTheme,
-} from '@toeverything/components/ui';
 import { AlignPanel } from '../align-panel';
 interface BorderColorConfigProps {
     app: TldrawApp;
@@ -34,55 +29,57 @@ export enum AlignType {
 
 let AlignPanelArr = [
     {
-        name: 'top',
+        name: 'left',
-        title: 'Align top',
+        title: 'Align left',
-        icon: <AlignToTopIcon></AlignToTopIcon>,
+        icon: <ShapesAlignLeftIcon></ShapesAlignLeftIcon>,
     },
     {
         name: 'centerVertical',
         title: 'Align Center Vertical',
-        icon: <AlignVerticalCenterIcon></AlignVerticalCenterIcon>,
+        icon: <ShapesAlignVerticalCenterIcon></ShapesAlignVerticalCenterIcon>,
-    },
-    {
-        name: 'bottom',
-        title: 'Align bottom',
-        icon: <AlignToBottomIcon></AlignToBottomIcon>,
-    },
-    {
-        name: 'left',
-        title: 'Align left',
-        icon: <AlignToLeftIcon></AlignToLeftIcon>,
     },
     {
         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',
+        name: 'distributeCenterHorizontal',
-        title: 'Align stretch centerHorizontal',
+        title: 'Align distribute center horizontal',
-        icon: <DistributeHorizontalIcon></DistributeHorizontalIcon>,
+        icon: <ShapesDistributeHorizontalIcon></ShapesDistributeHorizontalIcon>,
     },
     {
-        name: 'stretchCenterVertical',
+        name: 'distributeCenterVertical',
-        title: 'Align stretch centerHorizontal',
+        title: 'Align distribute center horizontal',
-        icon: <DistributeVerticalIcon></DistributeVerticalIcon>,
+        icon: <ShapesDistributeVerticalIcon></ShapesDistributeVerticalIcon>,
     },
 ];
 export const AlignOperation = ({ app, shapes }: BorderColorConfigProps) => {
-    const theme = useTheme();
     const setAlign = (alginType: string) => {
         switch (alginType) {
-            case 'stretchCenterHorizontal':
+            case 'distributeCenterHorizontal':
-                app.stretch(StretchType.Horizontal);
+                app.distribute(DistributeType.Horizontal);
                 break;
-            case 'stretchCenterVertical':
+            case 'distributeCenterVertical':
-                app.stretch(StretchType.Vertical);
+                app.distribute(DistributeType.Vertical);
                 break;
             default:
                 app.align(alginType as AlignType);

libs/components/editor-plugins/src/menu/inline-menu/utils.ts

@@ -1,47 +1,47 @@
 /* eslint-disable max-lines */
-import {
-    HeadingOneIcon,
-    HeadingTwoIcon,
-    HeadingThreeIcon,
-    ToDoIcon,
-    NumberIcon,
-    BulletIcon,
-    FormatBoldEmphasisIcon,
-    FormatItalicIcon,
-    FormatStrikethroughIcon,
-    LinkIcon,
-    CodeIcon,
-    FormatColorTextIcon,
-    FormatBackgroundIcon,
-    AlignLeftIcon,
-    AlignCenterIcon,
-    AlignRightIcon,
-    TurnIntoIcon,
-    BacklinksIcon,
-    MoreIcon,
-    TextFontIcon,
-    QuoteIcon,
-    CalloutIcon,
-    FileIcon,
-    ImageIcon,
-    PagesIcon,
-    CodeBlockIcon,
-    CommentIcon,
-} from '@toeverything/components/icons';
 import {
     fontBgColorPalette,
     fontColorPalette,
     type TextAlignOptions,
 } from '@toeverything/components/common';
-import { Virgo } from '@toeverything/framework/virgo';
-import { BlockFlavorKeys, Protocol } from '@toeverything/datasource/db-service';
-import { ClickItemHandler, InlineMenuItem } from './types';
 import {
-    inlineMenuNamesKeys,
+    BacklinksIcon,
-    inlineMenuNamesForFontColor,
+    BulletIcon,
-    INLINE_MENU_UI_TYPES,
+    CalloutIcon,
+    CodeBlockIcon,
+    CodeIcon,
+    CommentIcon,
+    FileIcon,
+    FormatBackgroundIcon,
+    FormatBoldEmphasisIcon,
+    FormatColorTextIcon,
+    FormatItalicIcon,
+    FormatStrikethroughIcon,
+    HeadingOneIcon,
+    HeadingThreeIcon,
+    HeadingTwoIcon,
+    ImageIcon,
+    LinkIcon,
+    MoreIcon,
+    NumberIcon,
+    PagesIcon,
+    QuoteIcon,
+    TextAlignCenterIcon,
+    TextAlignLeftIcon,
+    TextAlignRightIcon,
+    TextFontIcon,
+    ToDoIcon,
+    TurnIntoIcon,
+} from '@toeverything/components/icons';
+import { BlockFlavorKeys, Protocol } from '@toeverything/datasource/db-service';
+import { Virgo } from '@toeverything/framework/virgo';
+import {
     inlineMenuNames,
+    inlineMenuNamesForFontColor,
+    inlineMenuNamesKeys,
+    INLINE_MENU_UI_TYPES,
 } from './config';
+import { ClickItemHandler, InlineMenuItem } from './types';
 
 const convert_to_block_type = async ({
     editor,
@@ -732,27 +732,27 @@ export const getInlineMenuData = ({
         },
         {
             type: INLINE_MENU_UI_TYPES.dropdown,
-            icon: AlignLeftIcon,
+            icon: TextAlignLeftIcon,
             name: inlineMenuNames.currentTextAlign,
             nameKey: inlineMenuNamesKeys.currentTextAlign,
             children: [
                 {
                     type: INLINE_MENU_UI_TYPES.icon,
-                    icon: AlignLeftIcon,
+                    icon: TextAlignLeftIcon,
                     name: inlineMenuNames.alignLeft,
                     nameKey: inlineMenuNamesKeys.alignLeft,
                     onClick: common_handler_for_inline_menu,
                 },
                 {
                     type: INLINE_MENU_UI_TYPES.icon,
-                    icon: AlignCenterIcon,
+                    icon: TextAlignCenterIcon,
                     name: inlineMenuNames.alignCenter,
                     nameKey: inlineMenuNamesKeys.alignCenter,
                     onClick: common_handler_for_inline_menu,
                 },
                 {
                     type: INLINE_MENU_UI_TYPES.icon,
-                    icon: AlignRightIcon,
+                    icon: TextAlignRightIcon,
                     name: inlineMenuNames.alignRight,
                     nameKey: inlineMenuNamesKeys.alignRight,
                     onClick: common_handler_for_inline_menu,

libs/components/icons/src/auto-icons/index.ts

@@ -1,4 +1,4 @@
-export const timestamp = 1660740866491;
+export const timestamp = 1660793621971;
 export * from './image/image';
 export * from './format-clear/format-clear';
 export * from './backward-undo/backward-undo';
@@ -26,10 +26,10 @@ export * from './format-italic/format-italic';
 export * from './format-strikethrough/format-strikethrough';
 export * from './format-color-text/format-color-text';
 export * from './format-background/format-background';
-export * from './align-left/align-left';
+export * from './text-align-left/text-align-left';
-export * from './align-center/align-center';
+export * from './text-align-center/text-align-center';
-export * from './align-right/align-right';
+export * from './text-align-right/text-align-right';
-export * from './align-justify/align-justify';
+export * from './text-align-justify/text-align-justify';
 export * from './arrow-drop-down/arrow-drop-down';
 export * from './arrow-right/arrow-right';
 export * from './more/more';
@@ -130,14 +130,14 @@ export * from './more-tags-an-subblocks/more-tags-an-subblocks';
 export * from './page-in-page-tree/page-in-page-tree';
 export * from './pin/pin';
 export * from './add/add';
-export * from './align-to-left/align-to-left';
+export * from './shapes-align-left/shapes-align-left';
-export * from './align-to-right/align-to-right';
+export * from './shapes-align-right/shapes-align-right';
-export * from './distribute-horizontal/distribute-horizontal';
+export * from './shapes-distribute-horizontal/shapes-distribute-horizontal';
-export * from './distribute-vertical/distribute-vertical';
+export * from './shapes-distribute-vertical/shapes-distribute-vertical';
-export * from './align-to-top/align-to-top';
+export * from './shapes-align-top/shapes-align-top';
-export * from './align-to-bottom/align-to-bottom';
+export * from './shapes-align-bottom/shapes-align-bottom';
-export * from './align-horizontal-center/align-horizontal-center';
+export * from './shapes-align-horizontal-center/shapes-align-horizontal-center';
-export * from './align-vertical-center/align-vertical-center';
+export * from './shapes-align-vertical-center/shapes-align-vertical-center';
 export * from './bring-forward/bring-forward';
 export * from './send-backward/send-backward';
 export * from './bring-to-front/bring-to-front';

libs/components/icons/src/auto-icons/shapes-align-bottom/shapes-align-bottom.tsx

@@ -2,11 +2,11 @@
 // eslint-disable-next-line no-restricted-imports
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-export interface AlignToBottomIconProps extends Omit<SvgIconProps, 'color'> {
+export interface ShapesAlignBottomIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AlignToBottomIcon = ({ color, style, ...props}: AlignToBottomIconProps) => {
+export const ShapesAlignBottomIcon = ({ color, style, ...props}: ShapesAlignBottomIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/shapes-align-horizontal-center/shapes-align-horizontal-center.tsx

@@ -2,11 +2,11 @@
 // eslint-disable-next-line no-restricted-imports
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-export interface AlignHorizontalCenterIconProps extends Omit<SvgIconProps, 'color'> {
+export interface ShapesAlignHorizontalCenterIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AlignHorizontalCenterIcon = ({ color, style, ...props}: AlignHorizontalCenterIconProps) => {
+export const ShapesAlignHorizontalCenterIcon = ({ color, style, ...props}: ShapesAlignHorizontalCenterIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/shapes-align-left/shapes-align-left.tsx

@@ -2,11 +2,11 @@
 // eslint-disable-next-line no-restricted-imports
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-export interface AlignToLeftIconProps extends Omit<SvgIconProps, 'color'> {
+export interface ShapesAlignLeftIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AlignToLeftIcon = ({ color, style, ...props}: AlignToLeftIconProps) => {
+export const ShapesAlignLeftIcon = ({ color, style, ...props}: ShapesAlignLeftIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/shapes-align-right/shapes-align-right.tsx

@@ -2,11 +2,11 @@
 // eslint-disable-next-line no-restricted-imports
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-export interface AlignToRightIconProps extends Omit<SvgIconProps, 'color'> {
+export interface ShapesAlignRightIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AlignToRightIcon = ({ color, style, ...props}: AlignToRightIconProps) => {
+export const ShapesAlignRightIcon = ({ color, style, ...props}: ShapesAlignRightIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/shapes-align-top/shapes-align-top.tsx

@@ -2,11 +2,11 @@
 // eslint-disable-next-line no-restricted-imports
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-export interface AlignToTopIconProps extends Omit<SvgIconProps, 'color'> {
+export interface ShapesAlignTopIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AlignToTopIcon = ({ color, style, ...props}: AlignToTopIconProps) => {
+export const ShapesAlignTopIcon = ({ color, style, ...props}: ShapesAlignTopIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/shapes-align-vertical-center/shapes-align-vertical-center.tsx

@@ -2,11 +2,11 @@
 // eslint-disable-next-line no-restricted-imports
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-export interface AlignVerticalCenterIconProps extends Omit<SvgIconProps, 'color'> {
+export interface ShapesAlignVerticalCenterIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AlignVerticalCenterIcon = ({ color, style, ...props}: AlignVerticalCenterIconProps) => {
+export const ShapesAlignVerticalCenterIcon = ({ color, style, ...props}: ShapesAlignVerticalCenterIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/shapes-distribute-horizontal/shapes-distribute-horizontal.tsx

@@ -2,11 +2,11 @@
 // eslint-disable-next-line no-restricted-imports
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-export interface DistributeHorizontalIconProps extends Omit<SvgIconProps, 'color'> {
+export interface ShapesDistributeHorizontalIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const DistributeHorizontalIcon = ({ color, style, ...props}: DistributeHorizontalIconProps) => {
+export const ShapesDistributeHorizontalIcon = ({ color, style, ...props}: ShapesDistributeHorizontalIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/shapes-distribute-vertical/shapes-distribute-vertical.tsx

@@ -2,11 +2,11 @@
 // eslint-disable-next-line no-restricted-imports
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-export interface DistributeVerticalIconProps extends Omit<SvgIconProps, 'color'> {
+export interface ShapesDistributeVerticalIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const DistributeVerticalIcon = ({ color, style, ...props}: DistributeVerticalIconProps) => {
+export const ShapesDistributeVerticalIcon = ({ color, style, ...props}: ShapesDistributeVerticalIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/text-align-center/text-align-center.tsx

@@ -2,11 +2,11 @@
 // eslint-disable-next-line no-restricted-imports
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-export interface AlignCenterIconProps extends Omit<SvgIconProps, 'color'> {
+export interface TextAlignCenterIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AlignCenterIcon = ({ color, style, ...props}: AlignCenterIconProps) => {
+export const TextAlignCenterIcon = ({ color, style, ...props}: TextAlignCenterIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/text-align-justify/text-align-justify.tsx

@@ -2,11 +2,11 @@
 // eslint-disable-next-line no-restricted-imports
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-export interface AlignJustifyIconProps extends Omit<SvgIconProps, 'color'> {
+export interface TextAlignJustifyIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AlignJustifyIcon = ({ color, style, ...props}: AlignJustifyIconProps) => {
+export const TextAlignJustifyIcon = ({ color, style, ...props}: TextAlignJustifyIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/text-align-left/text-align-left.tsx

@@ -2,11 +2,11 @@
 // eslint-disable-next-line no-restricted-imports
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-export interface AlignLeftIconProps extends Omit<SvgIconProps, 'color'> {
+export interface TextAlignLeftIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AlignLeftIcon = ({ color, style, ...props}: AlignLeftIconProps) => {
+export const TextAlignLeftIcon = ({ color, style, ...props}: TextAlignLeftIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/text-align-right/text-align-right.tsx

@@ -2,11 +2,11 @@
 // eslint-disable-next-line no-restricted-imports
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-export interface AlignRightIconProps extends Omit<SvgIconProps, 'color'> {
+export interface TextAlignRightIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AlignRightIcon = ({ color, style, ...props}: AlignRightIconProps) => {
+export const TextAlignRightIcon = ({ color, style, ...props}: TextAlignRightIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}