Merge pull request #280 from toeverything/feat/while-bord-order

Feat/white board order
2026-07-14 00:26:51 +08:00 · 2022-08-17 22:25:45 +08:00
parent 91fa616942 a7213d1a4d
commit 8801c30bb7
34 changed files with 551 additions and 2 deletions
@@ -1,4 +1,5 @@
 # use for download icon from figma
+
 FIGMA_TOKEN
 NODE_ENV
 AFFINE_FEATURE_FLAG_TOKEN
@@ -0,0 +1,65 @@
+import { styled, Tooltip } from '@toeverything/components/ui';
+import { AlignType } from '../command-panel/AlignOperation';
+
+interface AlignObject {
+    name?: string;
+    /**
+     * color: none means no color
+     */
+    title: string;
+    icon?: JSX.Element;
+}
+/**
+ * ColorValue : none means no color
+ */
+interface AlignProps {
+    alignOptions: AlignObject[];
+    selected?: string;
+    onSelect?: (alginType: AlignType) => void;
+}
+
+export const AlignPanel = ({
+    alignOptions,
+    selected,
+    onSelect,
+}: AlignProps) => {
+    return (
+        <Container>
+            {alignOptions.map(alignOption => {
+                const option = alignOption.name as AlignType;
+                // const selected = color;
+                return (
+                    <Tooltip key={option} content={alignOption.title}>
+                        <SelectableContainer
+                            onClick={() => {
+                                onSelect?.(option);
+                            }}
+                        >
+                            {alignOption.icon}
+                        </SelectableContainer>
+                    </Tooltip>
+                );
+            })}
+        </Container>
+    );
+};
+
+const Container = styled('div')({
+    width: '170px',
+    display: 'flex',
+    flexWrap: 'wrap',
+});
+
+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',
+        cursor: 'pointer',
+        boxSizing: 'border-box',
+    })
+);
@@ -0,0 +1,111 @@
+import type { TldrawApp } from '@toeverything/components/board-state';
+import { StretchType, TDShape } from '@toeverything/components/board-types';
+import {
+    AlignHorizontalCenterIcon,
+    AlignIcon,
+    AlignToBottomIcon,
+    AlignToLeftIcon,
+    AlignToRightIcon,
+    AlignToTopIcon,
+    AlignVerticalCenterIcon,
+    DistributeHorizontalIcon,
+    DistributeVerticalIcon,
+} from '@toeverything/components/icons';
+import {
+    IconButton,
+    Popover,
+    Tooltip,
+    useTheme,
+} from '@toeverything/components/ui';
+import { AlignPanel } from '../align-panel';
+interface BorderColorConfigProps {
+    app: TldrawApp;
+    shapes: TDShape[];
+}
+
+export enum AlignType {
+    Top = 'top',
+    CenterVertical = 'centerVertical',
+    Bottom = 'bottom',
+    Left = 'left',
+    CenterHorizontal = 'centerHorizontal',
+    Right = 'right',
+}
+
+let AlignPanelArr = [
+    {
+        name: 'top',
+        title: 'Align top',
+        icon: <AlignToTopIcon></AlignToTopIcon>,
+    },
+    {
+        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>,
+    },
+    {
+        name: 'right',
+        title: 'Align right',
+        icon: <AlignToRightIcon></AlignToRightIcon>,
+    },
+    {
+        name: 'centerHorizontal',
+        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: 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 (
+        <Popover
+            trigger="hover"
+            placement="bottom-start"
+            content={
+                <AlignPanel
+                    alignOptions={AlignPanelArr}
+                    onSelect={setAlign}
+                ></AlignPanel>
+            }
+        >
+            <Tooltip content="Align" placement="top-start">
+                <IconButton>
+                    <AlignIcon />
+                </IconButton>
+            </Tooltip>
+        </Popover>
+    );
+};
@@ -1,6 +1,7 @@
 import { TLDR, TldrawApp } from '@toeverything/components/board-state';
 import { Divider, Popover, styled } from '@toeverything/components/ui';
 import { Fragment } from 'react';
+import { AlignOperation } from './AlignOperation';
 import { BorderColorConfig } from './BorderColorConfig';
 import { DeleteShapes } from './DeleteOperation';
 import { FillColorConfig } from './FillColorConfig';
@@ -8,6 +9,7 @@ import { FontSizeConfig } from './FontSizeConfig';
 import { FrameFillColorConfig } from './FrameFillColorConfig';
 import { Group, UnGroup } from './GroupOperation';
 import { Lock, Unlock } from './LockOperation';
+import { MoveCoverageConfig } from './MoveCoverage';
 import { StrokeLineStyleConfig } from './stroke-line-style-config';
 import { getAnchor, useConfig } from './utils';

@@ -91,6 +93,19 @@ export const CommandPanel = ({ app }: { app: TldrawApp }) => {
                shapes={config.deleteShapes.selectedShapes}
            />
        ),
+        moveCoverageConfig: (
+            <MoveCoverageConfig
+                key="deleteShapes1"
+                app={app}
+                shapes={config.deleteShapes.selectedShapes}
+            />
+        ),
+        alginOperation: config.group.selectedShapes.length ? (
+            <AlignOperation
+                app={app}
+                shapes={config.deleteShapes.selectedShapes}
+            ></AlignOperation>
+        ) : null,
    };

    const nodes = Object.entries(configNodes).filter(([key, node]) => !!node);
@@ -0,0 +1,77 @@
+import type { TldrawApp } from '@toeverything/components/board-state';
+import type { TDShape } from '@toeverything/components/board-types';
+import {
+    BringForwardIcon,
+    BringToFrontIcon,
+    LayersIcon,
+    SendBackwardIcon,
+    SendToBackIcon,
+} from '@toeverything/components/icons';
+import { IconButton, Popover, Tooltip } from '@toeverything/components/ui';
+import { AlignPanel } from '../align-panel';
+
+interface FontSizeConfigProps {
+    app: TldrawApp;
+    shapes: TDShape[];
+}
+
+const AlignPanelArr = [
+    {
+        title: 'To Front',
+        name: 'tofront',
+        icon: <BringToFrontIcon />,
+    },
+    {
+        title: 'Forward',
+        name: 'forward',
+        icon: <BringForwardIcon />,
+    },
+    {
+        title: 'Backward',
+        name: 'backward',
+        icon: <SendBackwardIcon />,
+    },
+    {
+        title: 'To Back',
+        name: 'toback',
+        icon: <SendToBackIcon />,
+    },
+];
+
+export const MoveCoverageConfig = ({ app, shapes }: FontSizeConfigProps) => {
+    const moveCoverage = (type: string) => {
+        switch (type) {
+            case 'toback':
+                app.moveToBack();
+                break;
+            case 'backward':
+                app.moveBackward();
+                break;
+            case 'forward':
+                app.moveForward();
+                break;
+            case 'tofront':
+                app.moveToFront();
+                break;
+        }
+    };
+
+    return (
+        <Popover
+            trigger="hover"
+            placement="bottom-start"
+            content={
+                <AlignPanel
+                    alignOptions={AlignPanelArr}
+                    onSelect={moveCoverage}
+                ></AlignPanel>
+            }
+        >
+            <Tooltip content="Layers" placement="top-start">
+                <IconButton>
+                    <LayersIcon />
+                </IconButton>
+            </Tooltip>
+        </Popover>
+    );
+};
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M11.5 21V3h1v18h-1Z" clip-rule="evenodd"/><path d="M8 7H16V10H8z"/><path d="M5 14H19V17H5z"/></svg>
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignHorizontalCenterIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignHorizontalCenterIcon = ({ color, style, ...props}: AlignHorizontalCenterIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M11.5 21V3h1v18h-1Z" clipRule="evenodd" /><path d="M8 7H16V10H8z" /><path d="M5 14H19V17H5z" />
+        </SvgIcon>
+    )
+};
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 21H3v-1h18v1Z" clip-rule="evenodd"/><path d="M7 17H15V20H7z" transform="rotate(-90 7 17)"/><path d="M14 17H28V20H14z" transform="rotate(-90 14 17)"/></svg>
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignToBottomIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignToBottomIcon = ({ color, style, ...props}: AlignToBottomIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21 21H3v-1h18v1Z" clipRule="evenodd" /><path d="M7 17H15V20H7z" transform="rotate(-90 7 17)" /><path d="M14 17H28V20H14z" transform="rotate(-90 14 17)" />
+        </SvgIcon>
+    )
+};
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M3 21V3h1v18H3Z" clip-rule="evenodd"/><path d="M7 7H15V10H7z"/><path d="M7 14H21V17H7z"/></svg>
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignToLeftIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignToLeftIcon = ({ color, style, ...props}: AlignToLeftIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M3 21V3h1v18H3Z" clipRule="evenodd" /><path d="M7 7H15V10H7z" /><path d="M7 14H21V17H7z" />
+        </SvgIcon>
+    )
+};
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 21V3h-1v18h1Z" clip-rule="evenodd"/><path d="M0 0H8V3H0z" transform="matrix(-1 0 0 1 17 7)"/><path d="M0 0H14V3H0z" transform="matrix(-1 0 0 1 17 14)"/></svg>
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignToRightIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignToRightIcon = ({ color, style, ...props}: AlignToRightIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21 21V3h-1v18h1Z" clipRule="evenodd" /><path d="M0 0H8V3H0z" transform="matrix(-1 0 0 1 17 7)" /><path d="M0 0H14V3H0z" transform="matrix(-1 0 0 1 17 14)" />
+        </SvgIcon>
+    )
+};
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 3H3v1h18V3Z" clip-rule="evenodd"/><path d="M0 0H8V3H0z" transform="matrix(0 1 1 0 7 7)"/><path d="M0 0H14V3H0z" transform="matrix(0 1 1 0 14 7)"/></svg>
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignToTopIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignToTopIcon = ({ color, style, ...props}: AlignToTopIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21 3H3v1h18V3Z" clipRule="evenodd" /><path d="M0 0H8V3H0z" transform="matrix(0 1 1 0 7 7)" /><path d="M0 0H14V3H0z" transform="matrix(0 1 1 0 14 7)" />
+        </SvgIcon>
+    )
+};
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 12.5H3v-1h18v1Z" clip-rule="evenodd"/><path d="M7 16H15V19H7z" transform="rotate(-90 7 16)"/><path d="M14 19H28V22H14z" transform="rotate(-90 14 19)"/></svg>
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignVerticalCenterIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignVerticalCenterIcon = ({ color, style, ...props}: AlignVerticalCenterIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21 12.5H3v-1h18v1Z" clipRule="evenodd" /><path d="M7 16H15V19H7z" transform="rotate(-90 7 16)" /><path d="M14 19H28V22H14z" transform="rotate(-90 14 19)" />
+        </SvgIcon>
+    )
+};
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18.4 5.6H5.6v12.8h12.8V5.6ZM4 4v16h16V4H4Z" clip-rule="evenodd"/><path d="M3 3H5V5H3z"/><path d="M3 19H5V21H3z"/><path d="M3 11H5V13H3z"/><path d="M11 3H13V5H11z"/><path d="M11 19H13V21H11z"/><path d="M11 11H13V13H11z"/><path d="M19 3H21V5H19z"/><path d="M19 19H21V21H19z"/><path d="M19 11H21V13H19z"/></svg>
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignIcon = ({ color, style, ...props}: AlignIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18.4 5.6H5.6v12.8h12.8V5.6ZM4 4v16h16V4H4Z" clipRule="evenodd" /><path d="M3 3H5V5H3z" /><path d="M3 19H5V21H3z" /><path d="M3 11H5V13H3z" /><path d="M11 3H13V5H11z" /><path d="M11 19H13V21H11z" /><path d="M11 11H13V13H11z" /><path d="M19 3H21V5H19z" /><path d="M19 19H21V21H19z" /><path d="M19 11H21V13H19z" />
+        </SvgIcon>
+    )
+};
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18.566 9.434 12 2.87 5.434 9.434l1.132 1.132L11.2 5.93V21h1.6V5.931l4.634 4.635 1.132-1.132Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface BringForwardIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const BringForwardIcon = ({ color, style, ...props}: BringForwardIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18.566 9.434 12 2.87 5.434 9.434l1.132 1.132L11.2 5.93V21h1.6V5.931l4.634 4.635 1.132-1.132Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18.566 12.434 12 5.87l-6.566 6.565 1.132 1.132L11.2 8.93V21h1.6V8.931l4.634 4.635 1.132-1.132ZM5 3h14v1.6H5V3Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface BringToFrontIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const BringToFrontIcon = ({ color, style, ...props}: BringToFrontIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18.566 12.434 12 5.87l-6.566 6.565 1.132 1.132L11.2 8.93V21h1.6V8.931l4.634 4.635 1.132-1.132ZM5 3h14v1.6H5V3Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M20 21V3h-1v18h1ZM5 21V3H4v18h1Z" clip-rule="evenodd"/><path d="M0 0H10V3H0z" transform="matrix(0 -1 -1 0 13.5 17)"/></svg>
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface DistributeHorizontalIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const DistributeHorizontalIcon = ({ color, style, ...props}: DistributeHorizontalIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M20 21V3h-1v18h1ZM5 21V3H4v18h1Z" clipRule="evenodd" /><path d="M0 0H10V3H0z" transform="matrix(0 -1 -1 0 13.5 17)" />
+        </SvgIcon>
+    )
+};
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M20.75 4.25h-18v1h18v-1ZM20.75 18.75h-18v1h18v-1Z" clip-rule="evenodd"/><path d="M0 0H10V3H0z" transform="matrix(-1 0 0 1 17 10.5)"/></svg>
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface DistributeVerticalIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const DistributeVerticalIcon = ({ color, style, ...props}: DistributeVerticalIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M20.75 4.25h-18v1h18v-1ZM20.75 18.75h-18v1h18v-1Z" clipRule="evenodd" /><path d="M0 0H10V3H0z" transform="matrix(-1 0 0 1 17 10.5)" />
+        </SvgIcon>
+    )
+};
@@ -1,4 +1,4 @@
-export const timestamp = 1660270988401;
+export const timestamp = 1660740866491;
 export * from './image/image';
 export * from './format-clear/format-clear';
 export * from './backward-undo/backward-undo';
@@ -129,4 +129,18 @@ export * from './unlock/unlock';
 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 './add/add';
+export * from './align-to-left/align-to-left';
+export * from './align-to-right/align-to-right';
+export * from './distribute-horizontal/distribute-horizontal';
+export * from './distribute-vertical/distribute-vertical';
+export * from './align-to-top/align-to-top';
+export * from './align-to-bottom/align-to-bottom';
+export * from './align-horizontal-center/align-horizontal-center';
+export * from './align-vertical-center/align-vertical-center';
+export * from './bring-forward/bring-forward';
+export * from './send-backward/send-backward';
+export * from './bring-to-front/bring-to-front';
+export * from './send-to-back/send-to-back';
+export * from './align/align';
+export * from './layers/layers';
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M5.578 8 12 11.211 18.422 8 12 4.789 5.578 8Zm5.975-4.776L3.789 7.106a1 1 0 0 0 0 1.788l7.764 3.882a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.788l-7.764-3.882a1 1 0 0 0-.894 0Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="m5.579 12-1.789-.895h-.001a1 1 0 0 0 0 1.79l7.764 3.881a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.788l-.001-.001-1.789.894.001.001L12 15.211 5.578 12Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M5.579 16.094 3.79 15.2h-.001a1 1 0 0 0 0 1.79l7.764 3.881a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.789h-.001l-1.789.894.001.001L12 19.306l-6.422-3.211Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface LayersIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const LayersIcon = ({ color, style, ...props}: LayersIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M5.578 8 12 11.211 18.422 8 12 4.789 5.578 8Zm5.975-4.776L3.789 7.106a1 1 0 0 0 0 1.788l7.764 3.882a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.788l-7.764-3.882a1 1 0 0 0-.894 0Z" clipRule="evenodd" /><path fillRule="evenodd" d="m5.579 12-1.789-.895h-.001a1 1 0 0 0 0 1.79l7.764 3.881a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.788l-.001-.001-1.789.894.001.001L12 15.211 5.578 12Z" clipRule="evenodd" /><path fillRule="evenodd" d="M5.579 16.094 3.79 15.2h-.001a1 1 0 0 0 0 1.79l7.764 3.881a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.789h-.001l-1.789.894.001.001L12 19.306l-6.422-3.211Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12.8 18.069V3h-1.6v15.069l-4.634-4.635-1.132 1.132L12 21.13l6.566-6.565-1.132-1.132L12.8 18.07Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface SendBackwardIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const SendBackwardIcon = ({ color, style, ...props}: SendBackwardIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M12.8 18.069V3h-1.6v15.069l-4.634-4.635-1.132 1.132L12 21.13l6.566-6.565-1.132-1.132L12.8 18.07Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12.8 15.069V3h-1.6v12.069l-4.634-4.635-1.132 1.132L12 18.13l6.566-6.565-1.132-1.132L12.8 15.07ZM19 21H5v-1.6h14V21Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface SendToBackIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const SendToBackIcon = ({ color, style, ...props}: SendToBackIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M12.8 15.069V3h-1.6v12.069l-4.634-4.635-1.132 1.132L12 18.13l6.566-6.565-1.132-1.132L12.8 15.07ZM19 21H5v-1.6h14V21Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M11.5 21V3h1v18h-1Z" clip-rule="evenodd"/><path d="M8 7H16V10H8z"/><path d="M5 14H19V17H5z"/></svg>`
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M5.578 8 12 11.211 18.422 8 12 4.789 5.578 8Zm5.975-4.776L3.789 7.106a1 1 0 0 0 0 1.788l7.764 3.882a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.788l-7.764-3.882a1 1 0 0 0-.894 0Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="m5.579 12-1.789-.895h-.001a1 1 0 0 0 0 1.79l7.764 3.881a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.788l-.001-.001-1.789.894.001.001L12 15.211 5.578 12Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M5.579 16.094 3.79 15.2h-.001a1 1 0 0 0 0 1.79l7.764 3.881a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.789h-.001l-1.789.894.001.001L12 19.306l-6.422-3.211Z" clip-rule="evenodd"/></svg>