From 42f3dcaa8c984f385cea6558a11a916d59c2ede2 Mon Sep 17 00:00:00 2001
From: DiamondThree <diamond.shx@gmail.com>
Date: Wed, 17 Aug 2022 15:58:35 +0800
Subject: [PATCH] feat: add align center

---
 .../src/components/align-panel/index.tsx      | 74 +++++++++++++++++++
 .../command-panel/AlignOperation.tsx          | 72 ++++++++++++++++++
 .../components/command-panel/CommandPanel.tsx |  9 ++-
 3 files changed, 154 insertions(+), 1 deletion(-)
 create mode 100644 libs/components/board-draw/src/components/align-panel/index.tsx
 create mode 100644 libs/components/board-draw/src/components/command-panel/AlignOperation.tsx

diff --git a/libs/components/board-draw/src/components/align-panel/index.tsx b/libs/components/board-draw/src/components/align-panel/index.tsx
new file mode 100644
index 0000000000..3a811db22a
--- /dev/null
+++ b/libs/components/board-draw/src/components/align-panel/index.tsx
@@ -0,0 +1,74 @@
+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?: string;
+}
+/**
+ * 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.name}
+                        </SelectableContainer>
+                    </Tooltip>
+                );
+            })}
+        </Container>
+    );
+};
+
+const Container = styled('div')({
+    width: '120px',
+    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)'
+        // }`,
+        borderRadius: '5px',
+        overflow: 'hidden',
+        margin: '10px',
+        padding: '1px',
+        cursor: 'pointer',
+        boxSizing: 'border-box',
+    })
+);
+
+const Color = styled('div')({
+    width: '16px',
+    height: '16px',
+    borderRadius: '5px',
+    boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.25)',
+});
diff --git a/libs/components/board-draw/src/components/command-panel/AlignOperation.tsx b/libs/components/board-draw/src/components/command-panel/AlignOperation.tsx
new file mode 100644
index 0000000000..9a150c3323
--- /dev/null
+++ b/libs/components/board-draw/src/components/command-panel/AlignOperation.tsx
@@ -0,0 +1,72 @@
+import type { TldrawApp } from '@toeverything/components/board-state';
+import type { TDShape } from '@toeverything/components/board-types';
+import { ShapeColorNoneIcon } 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',
+    },
+    {
+        name: 'centerVertical',
+        title: 'Align Center Vertical',
+    },
+    {
+        name: 'bottom',
+        title: 'Align bottom',
+    },
+    {
+        name: 'left',
+        title: 'Align left',
+    },
+    {
+        name: 'centerHorizontal',
+        title: 'Align centerHorizontal',
+    },
+];
+export const AlignOperation = ({ app, shapes }: BorderColorConfigProps) => {
+    const theme = useTheme();
+    const setAlign = (alginType: AlignType) => {
+        app.align(alginType);
+    };
+
+    return (
+        <Popover
+            trigger="hover"
+            placement="bottom-start"
+            content={
+                <AlignPanel
+                    alignOptions={AlignPanelArr}
+                    onSelect={setAlign}
+                ></AlignPanel>
+            }
+        >
+            <Tooltip content="Fill Color" placement="top-start">
+                <IconButton>
+                    <ShapeColorNoneIcon />
+                </IconButton>
+            </Tooltip>
+        </Popover>
+    );
+};
diff --git a/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx b/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
index 2d3217d997..c07bfa88b4 100644
--- a/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
+++ b/libs/components/board-draw/src/components/command-panel/CommandPanel.tsx
@@ -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';
@@ -92,13 +93,19 @@ export const CommandPanel = ({ app }: { app: TldrawApp }) => {
                 shapes={config.deleteShapes.selectedShapes}
             />
         ),
-        delete2: (
+        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);