From 11c7e3ad83b49eb2944d1864e51d9be678982164 Mon Sep 17 00:00:00 2001
From: austaras <austaras@outlook.com>
Date: Thu, 11 Aug 2022 19:00:52 +0800
Subject: [PATCH] fix(editor): gap between block

---
 libs/components/account/src/login/fs.tsx                   | 1 +
 .../editor-blocks/src/blocks/group/GroupView.tsx           | 4 +++-
 .../src/components/BlockContainer/BlockContainer.tsx       | 1 +
 .../editor-core/src/block-pendant/BlockPendantProvider.tsx | 4 ++--
 .../src/menu/left-menu/LeftMenuDraggable.tsx               | 7 ++++---
 5 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/libs/components/account/src/login/fs.tsx b/libs/components/account/src/login/fs.tsx
index 99f1252db7..07d6465ba7 100644
--- a/libs/components/account/src/login/fs.tsx
+++ b/libs/components/account/src/login/fs.tsx
@@ -76,6 +76,7 @@ export const FileSystem = () => {
                             onSelected();
                         } catch (e) {
                             setError(true);
+                            onSelected();
                             setTimeout(() => setError(false), 3000);
                         }
                     }}
diff --git a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
index 9b0f0f9101..b990d1aa5a 100644
--- a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
+++ b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
@@ -1,6 +1,8 @@
 import {
     addNewGroup,
+    LINE_GAP,
     RecastScene,
+    TAG_GAP,
     useCurrentView,
     useOnSelect,
 } from '@toeverything/components/editor-core';
@@ -61,7 +63,7 @@ const GroupContainer = styled('div')<{ isSelect?: boolean }>(
     ({ isSelect, theme }) => ({
         background: theme.affine.palette.white,
         border: '2px solid rgba(236,241,251,.5)',
-        padding: `15px 16px 0 16px`,
+        padding: `15px 16px ${LINE_GAP - TAG_GAP * 2}px 16px`,
         borderRadius: '10px',
         ...(isSelect
             ? {
diff --git a/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx b/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx
index f03cd9ffe4..dbe12277b6 100644
--- a/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx
+++ b/libs/components/editor-blocks/src/components/BlockContainer/BlockContainer.tsx
@@ -27,5 +27,6 @@ export const BlockContainer: FC<BlockContainerProps> = function ({
 export const Container = styled('div')<{ selected: boolean }>(
     ({ selected, theme }) => ({
         backgroundColor: selected ? theme.affine.palette.textSelected : '',
+        marginBottom: '2px',
     })
 );
diff --git a/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx b/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx
index 66cf4001a0..71b28ead6e 100644
--- a/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx
+++ b/libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx
@@ -28,7 +28,7 @@ export const BlockPendantProvider: FC<PropsWithChildren<BlockTagProps>> = ({
 };
 
 export const LINE_GAP = 16;
-const TAG_GAP = 4;
+export const TAG_GAP = 4;
 
 const StyledTriggerLine = styled('div')({
     padding: `${TAG_GAP}px 0`,
@@ -63,7 +63,7 @@ const StyledTriggerLine = styled('div')({
 
 const Container = styled('div')({
     position: 'relative',
-    paddingBottom: `${LINE_GAP - TAG_GAP * 2}px`,
+    padding: `${TAG_GAP * 2}px 0 ${LINE_GAP - TAG_GAP * 4}px 0`,
     '&:hover': {
         [StyledTriggerLine.toString()]: {
             '&::before': {
diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx
index 4f10f16fbe..750490650c 100644
--- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx
+++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx
@@ -15,6 +15,7 @@ import {
     BlockDropPlacement,
     LINE_GAP,
     AsyncBlock,
+    TAG_GAP,
 } from '@toeverything/framework/virgo';
 import { Button } from '@toeverything/components/common';
 import { styled } from '@toeverything/components/ui';
@@ -78,13 +79,13 @@ function Line(props: { lineInfo: LineInfo; rootRect: DOMRect }) {
     };
     const bottomLineStyle = {
         ...horizontalLineStyle,
-        top: intersectionRect.bottom + 1 - rootRect.y - LINE_GAP,
+        top: intersectionRect.bottom + 1 - rootRect.y - LINE_GAP + TAG_GAP,
     };
 
     const verticalLineStyle = {
         ...lineStyle,
         width: 2,
-        height: intersectionRect.height - LINE_GAP,
+        height: intersectionRect.height - LINE_GAP + TAG_GAP,
         top: intersectionRect.y - rootRect.y,
     };
     const leftLineStyle = {
@@ -228,7 +229,7 @@ export const LeftMenuDraggable: FC<LeftMenuProps> = props => {
                             MENU_WIDTH -
                             MENU_BUTTON_OFFSET -
                             rootRect.left,
-                        top: block.rect.top - rootRect.top,
+                        top: block.rect.top - rootRect.top + TAG_GAP * 2,
                         opacity: visible ? 1 : 0,
                         zIndex: 1,
                     }}