fix(notes): focus state set as global

unigraph-dev · Dec 27, 2021 · 32b74fc · 32b74fc
1 parent 3b42d26
commit 32b74fc
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 10 deletions.
diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx
@@ -35,6 +35,7 @@ export const AutoDynamicView = ({ object, callbacks, component, attributes, inli
     const [showSubentities, setShowSubentities] = React.useState(!!subentityExpandByDefault);
 
     const [isSelected, setIsSelected] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(false);
 
     const [DynamicViews, setDynamicViews] = React.useState({...window.unigraph.getState('registry/dynamicView').value, ...(component || {})});
 
@@ -43,11 +44,15 @@ export const AutoDynamicView = ({ object, callbacks, component, attributes, inli
         window.unigraph.getState('registry/dynamicView').subscribe(cb);
 
         const cbsel = (sel: any) => {if (sel?.includes?.(object?.uid)) setIsSelected(true); else setIsSelected(false);};
-        window.unigraph.getState('global/selected').subscribe(cbsel)
+        window.unigraph.getState('global/selected').subscribe(cbsel);
+
+        const cbfoc = (foc: any) => {if (foc === object?.uid && tabContext.isVisible()) setIsFocused(true); else setIsFocused(false);};
+        window.unigraph.getState('global/focused').subscribe(cbfoc);
 
         return function cleanup () {
             window.unigraph.getState('registry/dynamicView').unsubscribe(cb);
             window.unigraph.getState('global/selected').unsubscribe(cbsel);
+            window.unigraph.getState('global/focused').unsubscribe(cbfoc);
         }
     }, [])
 
@@ -176,7 +181,8 @@ export const AutoDynamicView = ({ object, callbacks, component, attributes, inli
                     ...(callbacks ? callbacks : {})
                 }, 
                 ...(attributes ? attributes : {}),
-                inline: inline
+                inline: inline,
+                focused: isFocused,
             });
         } else if (isRecursion === false && object && getObject()) {
             return <StringObjectViewer object={getObject()}/>
@@ -187,7 +193,7 @@ export const AutoDynamicView = ({ object, callbacks, component, attributes, inli
         } else {
             return <React.Fragment />
         }
-    }, [isRecursion, object, object.uid, callbacks, attributes, DynamicViews, isObjectStub, loadedObj]);
+    }, [isRecursion, object, object.uid, callbacks, attributes, DynamicViews, isObjectStub, loadedObj, isFocused]);
 
     return <ErrorBoundary onError={(error: Error, info: {componentStack: string}) => {
         console.error(error);

diff --git a/packages/unigraph-dev-explorer/src/examples/notes/NoteBlock.tsx b/packages/unigraph-dev-explorer/src/examples/notes/NoteBlock.tsx
@@ -126,7 +126,7 @@ const NoteViewTextWrapper = ({ children, semanticChildren, isRoot, onContextMenu
     </div>
 }
 
-export const DetailedNoteBlock = ({ data, isChildren, callbacks, options, isCollapsed }: any) => {
+export const DetailedNoteBlock = ({ data, isChildren, callbacks, options, isCollapsed, focused }: any) => {
     if (!callbacks?.viewId) callbacks = {...(callbacks ? callbacks : {}), viewId: getRandomInt()};
     const [subentities, otherChildren] = getSubentities(data);
     const [command, setCommand] = React.useState<() => any | undefined>();
@@ -150,6 +150,7 @@ export const DetailedNoteBlock = ({ data, isChildren, callbacks, options, isColl
     /** Reference for text content as a string */
     const textref = React.useRef<any>();
     /** Reference for HTML Element for list of children */
+    const editorRef = React.useRef<any>();
     const childrenref = React.useRef<any>();
     const inputDebounced = React.useRef(_.debounce(inputter, 333))
     const setCurrentText = (text: string) => { textInput.current.textContent = text };
@@ -170,8 +171,6 @@ export const DetailedNoteBlock = ({ data, isChildren, callbacks, options, isColl
     }
     const resetEdited = () => {edited.current = false; setTimeout(() => {commandFn()});}
 
-    //console.log(data);
-
     const [isChildrenCollapsed, setIsChildrenCollapsed] = React.useState<any>({});
 
     React.useEffect(() => {
@@ -195,6 +194,12 @@ export const DetailedNoteBlock = ({ data, isChildren, callbacks, options, isColl
         if (isEditing && textInput.current?.textContent === "" && data.get('text').as('primitive')) { textInput.current.textContent = textref.current }
     }, [isEditing])
 
+    React.useEffect(() => {
+        if (focused) {
+            editorRef.current?.click?.();
+        }
+    }, [focused])
+
     React.useEffect(commandFn, [command])
 
     return <NoteViewPageWrapper isRoot={!isChildren}>
@@ -204,7 +209,7 @@ export const DetailedNoteBlock = ({ data, isChildren, callbacks, options, isColl
                 callbacks={callbacks}
                 semanticChildren={buildGraph(otherChildren).filter((el: any) => el.type).map((el: any) => <AutoDynamicView object={el.type?.['unigraph.id'] === "$/schema/note_block" ? el : {uid: el.uid, type: el.type}} inline/>)}
             >
-                <div onPointerUp={(ev) => {
+                <div ref={editorRef} onPointerUp={(ev) => {
                     if (!isEditing) {
                         setIsEditing(true);
                         const caretPos = Number((ev.target as HTMLElement).getAttribute("markdownPos") || 0);
@@ -217,6 +222,7 @@ export const DetailedNoteBlock = ({ data, isChildren, callbacks, options, isColl
                         }, 0)
                     }
                 }} onClick={(ev) => {
+                    window.unigraph.getState('global/focused').value = data?.uid;
                     if (!isEditing) {
                         setIsEditing(true);
                         const caretPos = Number((ev.target as HTMLElement).getAttribute("markdownPos") || 0);
@@ -229,8 +235,7 @@ export const DetailedNoteBlock = ({ data, isChildren, callbacks, options, isColl
                         }, 0)
                     }
                 }}
-                onBlur={(ev) => { setIsEditing(false); inputDebounced.current.flush(); }} style={{ width: "100%" }}>
-
+                onBlur={(ev) => { setIsEditing(false); inputDebounced.current.flush(); if (focused) window.unigraph.getState('global/focused').setValue("");}} style={{ width: "100%" }}>
                     {(isEditing) ? <Typography
                         variant={(isChildren || callbacks.isEmbed) ? "body1" : "h4"}
                         onContextMenu={isChildren ? undefined : (event) => onUnigraphContextMenu(event, data, undefined, callbacks)}

diff --git a/packages/unigraph-dev-explorer/src/examples/notes/commands.ts b/packages/unigraph-dev-explorer/src/examples/notes/commands.ts
@@ -8,7 +8,8 @@ import { getParentsAndReferences } from "../../components/ObjectView/backlinksUt
 export const focusUid = (uid: string) => {
     //console.log("UID " + uid);
     //console.log(document.getElementById(`object-view-${uid}`)?.children[0]?.children[0]?.children[0]?.children[0]?.children[0]?.children[0]);
-    (document.getElementById(`object-view-${uid}`)?.children[0]?.children[0]?.children[0]?.children[0]?.children[0]?.children[0] as any)?.click();
+    //(document.getElementById(`object-view-${uid}`)?.children[0]?.children[0]?.children[0]?.children[0]?.children[0]?.children[0] as any)?.click();
+    window.unigraph.getState('global/focused').setValue(uid);
 }
 
 export const getSemanticChildren = (data: any) => data?.['_value']?.['children']

diff --git a/packages/unigraph-dev-explorer/src/init.ts b/packages/unigraph-dev-explorer/src/init.ts
@@ -90,6 +90,7 @@ export function init(hostname?: string) {
     });
 
     window.unigraph.addState('global/selected', []);
+    window.unigraph.addState('global/focused', "");
 
     initContextMenu();
     initRegistry();