feat(outliner): add drag handle

unigraph-dev · Apr 13, 2022 · 10136b8 · 10136b8
1 parent 9d776d3
commit 10136b8
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 6 deletions.
diff --git a/packages/unigraph-dev-explorer/src/examples/notes/DragHandle.tsx b/packages/unigraph-dev-explorer/src/examples/notes/DragHandle.tsx
@@ -0,0 +1,40 @@
+/* eslint-disable react/require-default-props */
+import { styled } from '@mui/styles';
+import React from 'react';
+
+const DragHandleContainer = styled('div')({
+    width: '1rem',
+    height: '1rem',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+    borderRadius: '0.25rem',
+    transition: 'background 30ms ease-in',
+    '&:hover': {
+        background: 'rgba(0, 0, 0, 0.1)',
+    },
+    '&:active': {
+        background: 'rgba(0, 0, 0, 0.2)',
+    },
+});
+
+interface Props {
+    style?: React.CSSProperties;
+    onContextMenu?: (event: React.MouseEvent) => void;
+}
+
+export const DragHandle = React.forwardRef<HTMLDivElement, Props>(({ style, onContextMenu }, ref) => {
+    return (
+        <DragHandleContainer ref={ref} style={style} onContextMenu={onContextMenu}>
+            <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="9" cy="7" r="1.5" />
+                <circle cx="9" cy="12" r="1.5" />
+                <circle cx="9" cy="17" r="1.5" />
+                <circle cx="15" cy="7" r="1.5" />
+                <circle cx="15" cy="12" r="1.5" />
+                <circle cx="15" cy="17" r="1.5" />
+            </svg>
+        </DragHandleContainer>
+    );
+});
diff --git a/packages/unigraph-dev-explorer/src/examples/notes/NoteBlock.tsx b/packages/unigraph-dev-explorer/src/examples/notes/NoteBlock.tsx
@@ -29,6 +29,7 @@ import { useNoteEditor } from './NoteEditor';
 import todoItemPlugin from './contrib/todoItem';
 import { useSubscriptionDelegate } from '../../components/ObjectView/AutoDynamicView/SubscriptionDelegate';
 import { HistoryState } from './history';
+import { DragHandle } from './DragHandle';
 
 const childrenComponents = {
     '$/schema/note_block': {
@@ -172,7 +173,7 @@ const BlockChildren = ({
     );
 };
 
-const Outline = styled('div')({
+const OutlineContainer = styled('div')({
     flex: '0 0 auto',
     display: 'flex',
     alignItems: 'baseline',
@@ -222,7 +223,7 @@ const ChildrenLeftBorder = styled('div')({
     width: '1px',
     backgroundColor: colors.grey[300],
     position: 'absolute',
-    left: 'calc(0.2rem - 0.5px)',
+    left: 'calc(1.2rem - 0.5px)',
 });
 
 const ChildrenContainer = styled('div')({
@@ -267,14 +268,19 @@ export function OutlineComponent({
     const toggleChildren = React.useCallback(() => setCollapsed && setCollapsed(!collapsed), [collapsed, setCollapsed]);
 
     return (
-        <Outline
+        <OutlineContainer
             onPointerMove={onPointerMove}
             onPointerLeave={onPointerLeave}
             style={{
-                transform: displayAs === 'outliner' ? 'translateX(-1rem)' : 'translateX(-1.3rem)',
-                width: displayAs === 'outliner' ? 'calc(100% + 1rem)' : 'calc(100% + 1.3rem)',
+                transform: displayAs === 'outliner' ? 'translateX(-2rem)' : 'translateX(-2.3rem)',
+                width: displayAs === 'outliner' ? 'calc(100% + 2rem)' : 'calc(100% + 2.3rem)',
             }}
         >
+            <DragHandle
+                style={{
+                    visibility: showCollapse && hover ? 'visible' : 'hidden',
+                }}
+            />
             <Toggle
                 style={{
                     visibility: showCollapse && hover ? 'visible' : 'hidden',
@@ -302,7 +308,7 @@ export function OutlineComponent({
             <ChildrenContainer>
                 <OutlineContentContext.Provider value={rContentEl}>{children}</OutlineContentContext.Provider>
             </ChildrenContainer>
-        </Outline>
+        </OutlineContainer>
     );
 }