use ts compiler to validate node body

VictorS67 · Nov 18, 2024 · 09d84bb · 09d84bb
1 parent be101f3
commit 09d84bb
Show file tree

Hide file tree

Showing 42 changed files with 1,265 additions and 444 deletions.
diff --git a/packages/app/src/apis/tscompiler.ts b/packages/app/src/apis/tscompiler.ts
@@ -0,0 +1,26 @@
+export function useCreateNode() {
+  const createNode = useCallback(
+    async (
+      nodeType: string,
+      nodeSubType: string,
+      registerArgs?: Record<string, unknown>,
+    ) => {
+      const node = await send('get-node', {
+        type: nodeType,
+        subType: nodeSubType,
+        registerArgs,
+      });
+
+      console.log(`create node: ${JSON.stringify(node)}`);
+
+      if (!node.error) {
+        return node;
+      }
+
+      return null;
+    },
+    [],
+  );
+
+  return { createNode };
+}
diff --git a/packages/app/src/components/CodeEditor.tsx b/packages/app/src/components/CodeEditor.tsx
@@ -4,8 +4,6 @@ import { debounce } from '@mui/material';
 import { useLatest, useThrottleFn } from 'ahooks';
 import { useRecoilValue } from 'recoil';
 
-import { useStableCallback } from '../hooks/useStableCallback';
-import { editingCodeIdState } from '../state/editor';
 import { themeState } from '../state/settings';
 import { CodeEditorProps } from '../types/editor.type';
 import { getColorMode } from '../utils/colorMode';
@@ -20,7 +18,7 @@ export const CodeEditor: FC<CodeEditorProps> = ({
   fontSize,
   fontFamily,
   isReadOnly,
-  autoFocus,
+  autoFocus = true,
   showLineNumbers,
   scrollBeyondLastLine = false,
   theme,
@@ -36,53 +34,51 @@ export const CodeEditor: FC<CodeEditorProps> = ({
 
   const appTheme = useRecoilValue(themeState);
 
-  const [tokenDisposable, setTokenDisposable] = useState<monaco.IDisposable>();
-  const [completionDisposable, setCompletionDisposable] =
-    useState<monaco.IDisposable>();
+  // const [tokenDisposable, setTokenDisposable] = useState<monaco.IDisposable>();
+  // const [completionDisposable, setCompletionDisposable] =
+  //   useState<monaco.IDisposable>();
 
-  useEffect(() => {
-    return () => {
-      if (
-        tokenDisposable?.dispose &&
-        typeof tokenDisposable.dispose === 'function'
-      ) {
-        tokenDisposable.dispose();
-        setTokenDisposable(undefined);
-      }
-    };
-  }, [tokenDisposable]);
+  // useEffect(() => {
+  //   setTokenDisposable(defineTokens(keywords, properties, variables));
 
-  useEffect(() => {
-    return () => {
-      if (
-        completionDisposable?.dispose &&
-        typeof completionDisposable.dispose === 'function'
-      ) {
-        completionDisposable.dispose();
-        setCompletionDisposable(undefined);
-      }
-    };
-  }, [completionDisposable]);
+  //   return () => {
+  //     if (
+  //       tokenDisposable?.dispose &&
+  //       typeof tokenDisposable.dispose === 'function'
+  //     ) {
+  //       tokenDisposable.dispose();
+  //     }
+  //   };
+  // }, []);
 
-  useEffect(() => {
-    if (!editorContainer.current) return;
+  // useEffect(() => {
+  //   setCompletionDisposable(defineSuggestions(keywords, properties, variables));
 
-    if (!tokenDisposable) {
-      setTokenDisposable(defineTokens(keywords, properties, variables));
-    }
+  //   return () => {
+  //     console.log(`MONACO: ${typeof completionDisposable?.dispose}`)
 
-    if (!completionDisposable) {
-      setCompletionDisposable(
-        defineSuggestions(keywords, properties, variables),
-      );
-    }
+  //     if (
+  //       completionDisposable?.dispose &&
+  //       typeof completionDisposable.dispose === 'function'
+  //     ) {
+  //       console.log('MONACO: defineSuggestions dispose')
+
+  //       completionDisposable.dispose();
+  //     }
+  //   };
+  // }, []);
+
+  useEffect(() => {
+    if (!editorContainer.current) return;
 
     const colorMode: string | null = getColorMode();
     if (!colorMode) return;
 
     const actualTheme: string =
       theme === 'encre-code' || !theme ? `encre-code-${colorMode}` : theme;
 
+    const completionDisposable = defineSuggestions(keywords, properties, variables);
+
     const editor = monaco.editor.create(editorContainer.current, {
       theme: actualTheme,
       lineNumbers: showLineNumbers ? 'on' : 'off',
@@ -128,7 +124,7 @@ export const CodeEditor: FC<CodeEditorProps> = ({
     };
 
     const contentHeight = editor.getContentHeight();
-    editorContainer.current.style.height = `${contentHeight}px`;
+    editorContainer.current.style.height = `${contentHeight + 100}px`;
     editor.layout();
 
     const onResizeDebounced = debounce(onResize, 300);
@@ -137,7 +133,7 @@ export const CodeEditor: FC<CodeEditorProps> = ({
     editor.onDidChangeModelContent(() => {
       onChangeLatest.current?.(editor.getValue());
       if (editorContainer.current) {
-        editorContainer.current.style.height = `${editor.getContentHeight()}px`;
+        editorContainer.current.style.height = `${editor.getContentHeight() + 100}px`;
       }
 
       editor.layout();
@@ -150,9 +146,29 @@ export const CodeEditor: FC<CodeEditorProps> = ({
 
     const latestBeforeDispose = onChangeLatest.current;
 
+    // setTokenDisposable(defineTokens(keywords, properties, variables));
+
+    // setCompletionDisposable(defineSuggestions(keywords, properties, variables));
+
+    // setCommandDisposable(defineCommands(keywords));
+
+    defineTokens(keywords, properties, variables);
+
     return () => {
+      // const tokenDisposable = defineTokens(keywords, properties, variables);
+      // tokenDisposable.dispose();
+      // if (
+      //   completionDisposable?.dispose &&
+      //   typeof completionDisposable.dispose === 'function'
+      // ) {
+      //   console.log('MONACO: defineSuggestions dispose')
+
+      //   completionDisposable.dispose();
+      // }
+
       latestBeforeDispose?.(editor.getValue());
       editor.dispose();
+      completionDisposable.dispose();
       window.removeEventListener('resize', onResizeDebounced);
     };
   }, []);
@@ -194,6 +210,7 @@ export const CodeEditor: FC<CodeEditorProps> = ({
       style={{
         minWidth: 0,
         minHeight: 0,
+        maxHeight: '100%',
         display: 'flex',
         flex: 1,
         height: '100%',

diff --git a/packages/app/src/components/ConditionUIContextContainer.tsx b/packages/app/src/components/ConditionUIContextContainer.tsx
@@ -669,15 +669,15 @@ export const ConditionUIContextItem: FC<ConditionUIContextItemProps> = ({
         )}
       </div>
 
-      {selectedIndex !== undefined && selectedIndex === index ? (
+      {/* {selectedIndex !== undefined && selectedIndex === index ? (
         <div className="ui-context-editor">
           <KnownNodeContentBody
             node={node}
             uiContexts={[uiContext]}
             onEditorClick={onConditionEditorClick}
           />
         </div>
-      ) : null}
+      ) : null} */}
     </>
   );
 };
diff --git a/packages/app/src/components/MouseIcon.tsx b/packages/app/src/components/MouseIcon.tsx
@@ -13,6 +13,7 @@ import {
   isDraggingMultipleCommentsState,
 } from '../state/comment';
 import { editingCodeIdState } from '../state/editor';
+import { editingNodeIdState } from '../state/node';
 import { isSelectingMultiWiresState } from '../state/wire';
 
 export const MouseIcon: FC = () => {
@@ -30,26 +31,27 @@ export const MouseIcon: FC = () => {
     isSelectingMultiWiresState,
   );
   const editingCodeId = useRecoilValue(editingCodeIdState);
+  const editingNodeId = useRecoilValue(editingNodeIdState);
 
   useGlobalHotkey(
     'Space',
     useCallback(
       (e: KeyboardEvent) => {
-        if (!editingCodeId) {
+        if (!editingNodeId) {
           e.preventDefault();
           setIsOnlyDraggingCanvas(true);
         }
       },
-      [editingCodeId],
+      [editingNodeId],
     ),
     useCallback(
       (e: KeyboardEvent) => {
-        if (!editingCodeId) {
+        if (!editingNodeId) {
           e.preventDefault();
           setIsOnlyDraggingCanvas(false);
         }
       },
-      [editingCodeId],
+      [editingNodeId],
     ),
   );
 

diff --git a/packages/app/src/components/NodeCanvas.tsx b/packages/app/src/components/NodeCanvas.tsx
@@ -265,7 +265,9 @@ export const NodeCanvas: FC<NodeCanvasProps> = ({
     handleContextMenu,
   } = useContextMenu();
 
-  useEditorClick();
+  useEditorClick({
+    onDeselect: () => setShowContextMenu(false)
+  });
 
   const nodesToDrag = useMemo(() => {
     return [...new Set([...draggingNodes, ...draggingNodesInComments])];