fix(component): children line style in whiteboard

libs/components/editor-blocks/src/utils/WithTreeViewChildren.tsx

@@ -13,7 +13,6 @@ import type {
     ReactElement,
 } from 'react';
 import { forwardRef, useState } from 'react';
-import style9 from 'style9';
 import { SCENE_CONFIG } from '../blocks/group/config';
 import { BlockContainer } from '../components/BlockContainer';
 
@@ -30,29 +29,15 @@ const TreeView = forwardRef<
     { lastItem?: boolean } & ComponentPropsWithRef<'div'>
 >(({ lastItem, children, onClick, ...restProps }, ref) => {
     return (
-        <div ref={ref} className={treeStyles('treeWrapper')} {...restProps}>
+        <TreeWrapper ref={ref} {...restProps}>
-            <div className={treeStyles('treeView')}>
+            <StyledTreeView>
-                <div
+                <VerticalLine last={lastItem} onClick={onClick} />
-                    className={treeStyles({
+                <HorizontalLine last={lastItem} onClick={onClick} />
-                        line: true,
+                {lastItem && <LastItemRadius />}
-                        verticalLine: true,
+            </StyledTreeView>
-                        lastItemVerticalLine: lastItem,
-                    })}
-                    onClick={onClick}
-                />
-                <div
-                    className={treeStyles({
-                        line: true,
-                        horizontalLine: true,
-                        lastItemHorizontalLine: lastItem,
-                    })}
-                    onClick={onClick}
-                />
-                {lastItem && <div className={treeStyles('lastItemRadius')} />}
-            </div>
             {/* maybe need a child wrapper */}
             {children}
-        </div>
+        </TreeWrapper>
     );
 });
 
@@ -71,10 +56,7 @@ const ChildrenView = ({
     const isKanbanScene = currentView.type === SCENE_CONFIG.KANBAN;
 
     return (
-        <div
+        <Children style={{ ...(!isKanbanScene && { marginLeft: indent }) }}>
-            className={styles('children')}
-            style={{ ...(!isKanbanScene && { marginLeft: indent }) }}
-        >
             {childrenIds.map((childId, idx) => {
                 if (isKanbanScene) {
                     return (
@@ -94,7 +76,7 @@ const ChildrenView = ({
                     </TreeView>
                 );
             })}
-        </div>
+        </Children>
     );
 };
 
@@ -104,9 +86,7 @@ const CollapsedNode = forwardRef<
 >((props, ref) => {
     return (
         <TreeView ref={ref} lastItem={true} {...props}>
-            <div className={treeStyles('collapsed')} onClick={props.onClick}>
+            <Collapsed onClick={props.onClick}>···</Collapsed>
-                ···
-            </div>
         </TreeView>
     );
 });
@@ -146,10 +126,10 @@ export const withTreeViewChildren = (
                 editor={props.editor}
                 block={block}
                 selected={isSelect}
-                className={styles('wrapper')}
+                className={Wrapper.toString()}
             >
                 <WrapperWithPendantAndDragDrop editor={editor} block={block}>
-                    <div className={styles('node')}>{creator(props)}</div>
+                    <div>{creator(props)}</div>
                 </WrapperWithPendantAndDragDrop>
 
                 {collapsed && (
@@ -170,93 +150,79 @@ export const withTreeViewChildren = (
     };
 };
 
-const styles = style9.create({
+const Wrapper = styled('div')({ display: 'flex', flexDirection: 'column' });
-    wrapper: {
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    node: {},
 
-    children: {
+const Children = Wrapper;
-        display: 'flex',
+
-        flexDirection: 'column',
+const TREE_COLOR = '#D5DFE6';
-    },
+// TODO determine the position of the horizontal line by the type of the item
+const ITEM_POINT_HEIGHT = '12.5px'; // '50%'
+
+const TreeWrapper = styled('div')({
+    position: 'relative',
 });
 
-const treeColor = '#D5DFE6';
+const StyledTreeView = styled('div')({
-// TODO determine the position of the horizontal line by the type of the item
-const itemPointHeight = '12.5px'; // '50%'
-
-const treeStyles = style9.create({
-    treeWrapper: {
-        position: 'relative',
-    },
-
-    treeView: {
     position: 'absolute',
     left: '-21px',
     height: '100%',
-    },
+});
-    line: {
+
+const Line = styled('div')({
     position: 'absolute',
     cursor: 'pointer',
-        backgroundColor: treeColor,
+    backgroundColor: TREE_COLOR,
-        boxSizing: 'content-box',
+    // somehow tldraw would override this
+    boxSizing: 'content-box!important' as any,
     // See [Can I add background color only for padding?](https://stackoverflow.com/questions/14628601/can-i-add-background-color-only-for-padding)
     backgroundClip: 'content-box',
     backgroundOrigin: 'content-box',
     // Increase click hot spot
     padding: '10px',
-    },
+});
-    verticalLine: {
+
+const VerticalLine = styled(Line)<{ last: boolean }>(({ last }) => ({
     width: '1px',
-        height: '100%',
+    height: last ? ITEM_POINT_HEIGHT : '100%',
     paddingTop: 0,
     paddingBottom: 0,
     transform: 'translate(-50%, 0)',
-    },
+
-    horizontalLine: {
+    opacity: last ? 0 : 'unset',
+}));
+
+const HorizontalLine = styled(Line)<{ last: boolean }>(({ last }) => ({
     width: '16px',
     height: '1px',
     paddingLeft: 0,
     paddingRight: 0,
-        top: itemPointHeight,
+    top: ITEM_POINT_HEIGHT,
     transform: 'translate(0, -50%)',
-    },
+    opacity: last ? 0 : 'unset',
-    noItemHorizontalLine: {
+}));
-        display: 'none',
-    },
 
-    lastItemHorizontalLine: {
+const Collapsed = styled('div')({
-        opacity: 0,
+    cursor: 'pointer',
-    },
+    display: 'inline-block',
-    lastItemVerticalLine: {
+    color: '#B9CAD5',
-        height: itemPointHeight,
+});
-        opacity: 0,
+
-    },
+const LastItemRadius = styled('div')({
-    lastItemRadius: {
     boxSizing: 'content-box',
     position: 'absolute',
     left: '-0.5px',
     top: 0,
-        height: itemPointHeight,
+    height: ITEM_POINT_HEIGHT,
     bottom: '50%',
     width: '16px',
     borderWidth: '1px',
     borderStyle: 'solid',
-        borderLeftColor: treeColor,
+    borderLeftColor: TREE_COLOR,
-        borderBottomColor: treeColor,
+    borderBottomColor: TREE_COLOR,
     borderTop: 'none',
     borderRight: 'none',
     borderRadius: '0 0 0 3px',
     pointerEvents: 'none',
-    },
-
-    collapsed: {
-        cursor: 'pointer',
-        display: 'inline-block',
-        color: '#B9CAD5',
-    },
 });
 
 const StyledBorder = styled('div')({