feat, perf(frontend): mobile bar, reconciliation, focus handling

unigraph-dev · Jan 1, 2022 · d3f55a2 · d3f55a2
1 parent 203f6b4
commit d3f55a2
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 7 deletions.
diff --git a/packages/unigraph-dev-explorer/src/App.tsx b/packages/unigraph-dev-explorer/src/App.tsx
@@ -8,6 +8,7 @@ import { getParameters, isElectron, NavigationContext } from './utils';
 import { ContextMenu } from './components/UnigraphCore/ContextMenu';
 import { InlineSearch } from './components/UnigraphCore/InlineSearchPopup';
 import { SearchOverlayPopover } from './pages/SearchOverlay';
+import { MobileBar } from './components/UnigraphCore/MobileBar';
 
 // TODO: custom theme
 const useStyles = makeStyles((theme) => ({
@@ -45,6 +46,7 @@ function App() {
                     <SearchOverlayPopover />
                     <ContextMenu />
                     <InlineSearch />
+                    <MobileBar />
                 </div>
                 {
                     componentPathName

diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx
@@ -206,7 +206,6 @@ export function AutoDynamicView({
 
     const getEl = React.useCallback((viewId, setTitle) => {
         if (isRecursion === false && object?.type && object.type['unigraph.id'] && Object.keys(DynamicViews).includes(object.type['unigraph.id']) && getObject()) {
-            console.log(object.uid, backlinks, noBacklinks, BacklinkComponent);
             return React.createElement(DynamicViews[object.type['unigraph.id']].view, {
                 data: getObject(),
                 callbacks: {
@@ -252,9 +251,11 @@ export function AutoDynamicView({
                 </div>
             )}
         >
-            <div style={{
-                display: inline ? 'inline' : 'block', ...(inline ? {} : { width: '100%' }), backgroundColor: (isSelected || isDragging) ? 'whitesmoke' : 'unset', borderRadius: (isSelected || isDragging) ? '12px' : '',
-            }}
+            <div
+                style={{
+                    display: inline ? 'inline' : 'block', ...(inline ? {} : { width: '100%' }), backgroundColor: (isSelected || isDragging) ? 'whitesmoke' : 'unset', borderRadius: (isSelected || isDragging) ? '12px' : '',
+                }}
+                key={`object-view-${object?.uid}`}
             >
                 <div
                     id={`object-view-${object?.uid}`}

diff --git a/packages/unigraph-dev-explorer/src/components/UnigraphCore/MobileBar.tsx b/packages/unigraph-dev-explorer/src/components/UnigraphCore/MobileBar.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import Icon from '@mdi/react';
+import { mdiFormatIndentDecrease, mdiFormatIndentIncrease, mdiKeyboardReturn } from '@mdi/js';
+import { isMobile } from '../../utils';
+
+export const MobileBar = () => {
+    const actionsState = window.unigraph.getState('global/focused/actions');
+    const [focusedState, setFocusedState] = React.useState<any>();
+    React.useEffect(() => {
+        window.unigraph.getState('global/focused').subscribe(setFocusedState);
+        return function cleanup() { window.unigraph.getState('global/focused').unsubscribe(setFocusedState); };
+    }, []);
+
+    return (
+        <div style={{
+                bottom: '0',
+                zIndex: 99999,
+                position: 'absolute',
+                display: (isMobile() && focusedState?.type === '$/schema/note_block') ? 'flex' : 'none',
+                justifyContent: 'center',
+                width: '100%',
+            }}
+        >
+            <div onPointerDownCapture={(ev) => {
+                ev.preventDefault(); ev.stopPropagation();
+                actionsState.value?.unindentChild();
+            }}
+            >
+                <Icon
+                    size={0.8}
+                    style={{ margin: '3px 8px' }}
+                    path={mdiFormatIndentDecrease}
+                />
+
+            </div>
+
+            <div onPointerDownCapture={(ev) => {
+                ev.preventDefault(); ev.stopPropagation();
+                actionsState.value?.indentChild();
+            }}
+            >
+                <Icon
+                    size={0.8}
+                    style={{ margin: '3px 8px' }}
+                    path={mdiFormatIndentIncrease}
+                />
+
+            </div>
+
+            <div onPointerDownCapture={(ev) => {
+                ev.preventDefault(); ev.stopPropagation();
+                actionsState.value?.splitChild();
+            }}
+            >
+                <Icon
+                    size={0.8}
+                    style={{ margin: '3px 8px' }}
+                    path={mdiKeyboardReturn}
+                />
+
+            </div>
+
+        </div>
+    );
+};
diff --git a/packages/unigraph-dev-explorer/src/examples/notes/NoteBlock.tsx b/packages/unigraph-dev-explorer/src/examples/notes/NoteBlock.tsx
@@ -202,7 +202,7 @@ export function DetailedNoteBlock({
     const inputDebounced = React.useRef(_.debounce(inputter, 333));
     const setCurrentText = (text: string) => { textInput.current.textContent = text; };
     const edited = React.useRef(false);
-    const [isEditing, setIsEditing] = React.useState(false);
+    const [isEditing, setIsEditing] = React.useState(window.unigraph.getState('global/focused').value?.uid === data.uid);
     const textInput: any = React.useRef();
     const nodesState = window.unigraph.addState(`${options?.viewId || callbacks?.viewId || callbacks['get-view-id']()}/nodes`, []);
     const editorContext = {
@@ -253,13 +253,25 @@ export function DetailedNoteBlock({
     React.useEffect(() => {
         if (focused) {
             setIsEditing(true);
+            console.log(isEditing);
+            if (isEditing) editorRef.current.click();
             setTimeout(() => {
                 let tail; const focusedState = window.unigraph.getState('global/focused').value;
                 const el = textInput.current.firstChild || textInput.current;
+                el?.click?.();
                 if (focusedState.tail) tail = el.textContent.length;
                 setCaret(document, el, tail || focusedState.caret);
             }, 0);
-            window.unigraph.getState('global/focused/actions').setValue(callbacks);
+
+            window.unigraph.getState('global/focused/actions').setValue({
+                splitChild: () => {
+                    const sel = document.getSelection();
+                    const caret = _.min([sel?.anchorOffset, sel?.focusOffset]) as number;
+                    callbacks['split-child'](textref.current || data.get('text').as('primitive'), caret);
+                },
+                indentChild: callbacks['indent-child'],
+                unindentChild: callbacks['unindent-child-in-parent'],
+            });
         }
     }, [focused]);
 
@@ -282,7 +294,7 @@ export function DetailedNoteBlock({
                                 const caretPos = Number((ev.target as HTMLElement).getAttribute('markdownPos') || 0);
                                 setTimeout(() => {
                                     const finalCaretPos = caretPos || textInput.current?.textContent?.length;
-                                    window.unigraph.getState('global/focused').value = { uid: data?.uid, caret: finalCaretPos, type: '$/schema/note_block' };
+                                    window.unigraph.getState('global/focused').setValue({ uid: data?.uid, caret: finalCaretPos, type: '$/schema/note_block' });
                                     if (textInput.current.firstChild) {
                                         setCaret(document, textInput.current.firstChild, finalCaretPos);
                                     } else {
@@ -293,6 +305,7 @@ export function DetailedNoteBlock({
                         }}
                         onBlur={(ev) => {
                             setIsEditing(false);
+                            console.log('onBlur');
                             inputDebounced.current.flush();
                             if (focused) {
                                 window.unigraph.getState('global/focused').setValue({ uid: '', caret: 0, type: '' });
@@ -389,6 +402,8 @@ export function DetailedNoteBlock({
                                 onKeyDown={async (ev) => {
                                     const sel = document.getSelection();
                                     const caret = _.min([sel?.anchorOffset, sel?.focusOffset]) as number;
+                                    const state = window.unigraph.getState('global/focused');
+                                    state.setValue({ ...state.value, caret });
                                     switch (ev.keyCode) {
                                     case 13: // enter
                                         ev.preventDefault();
@@ -508,6 +523,7 @@ export function DetailedNoteBlock({
                                                 createBelow={() => { addChild(dataref.current, editorContext); }}
                                             >
                                                 <AutoDynamicView
+                                                    key={el.uid}
                                                     noDrag
                                                     allowSubentity
                                                     noBacklinks={el.type?.['unigraph.id'] === '$/schema/note_block'}