🐛 fix node edit input control value not visible issues

jxnkwlp · Mar 16, 2023 · 7dfaa23 · 7dfaa23
1 parent e6e7876
commit 7dfaa23
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 220 deletions.
diff --git a/.gitci/release-config.yml b/.gitci/release-config.yml
@@ -9,16 +9,16 @@
     commits:
       - "[feat]"
       - "feat"
-      - "💡"
-      - ":zap:"
-      - ":bulb:"
+      - "⬆️"
+      - ":arrow_up:"
     labels:
       - "Versioning - Minor"
   patch:
     commits:
       - "[fix]"
       - "fix"
       - ":bug:"
+      - "🐛"
     labels:
       - "Versioning - Patch"
   default: patch

diff --git a/src/Passingwind.ElsaDesigner/public/definition-json-schema.json b/src/Passingwind.ElsaDesigner/public/definition-json-schema.json
diff --git a/src/Passingwind.ElsaDesigner/src/components/MonacoEditor/index.tsx b/src/Passingwind.ElsaDesigner/src/components/MonacoEditor/index.tsx
@@ -40,22 +40,24 @@ const MonacoEditor: React.FC<MonacoEditorProps> = (props) => {
             height={height}
             path={path}
             defaultLanguage={language}
-            onChange={(v) => {
-                handleValueChanged(v as string);
-            }}
             value={value}
             options={{
                 minimap: { enabled: minimap ?? true, autohide: true },
                 wordWrap: 'bounded',
                 wordWrapColumn: 1024,
                 automaticLayout: true,
                 autoIndent: 'full',
-                tabSize: 2,
                 autoClosingBrackets: 'languageDefined',
                 foldingStrategy: 'auto',
+                formatOnPaste: true,
+                foldingImportsByDefault: true,
                 ...options,
             }}
+            onChange={(v) => {
+                handleValueChanged(v as string);
+            }}
             onMount={(e, m) => {
+                console.debug('editor mount: ', e.getModel()?.id);
                 onMount?.(e, m);
             }}
         />

diff --git a/src/Passingwind.ElsaDesigner/src/locales/zh-CN/pages.ts b/src/Passingwind.ElsaDesigner/src/locales/zh-CN/pages.ts
@@ -117,8 +117,8 @@ export default {
     'page.definition.field.contextOptions.contextFidelity': 'Fidelity',
     'page.definition.field.contextOptions.contextFidelity.placeholder':
         '工作流上下文刷新保真度控制何时加载和持久化工作流上下文的行为',
-    'page.definition.field.tag': 'Tag',
-    'page.definition.field.channel': 'Channel',
+    'page.definition.field.tag': '标签',
+    'page.definition.field.channel': '频道',
     'page.definition.field.persistenceBehavior': '持久化行为',
     'page.definition.field.isSingleton': '单列模式',
     'page.definition.field.latestVersion': '最新版本',

diff --git a/src/Passingwind.ElsaDesigner/src/pages/designer/form-input/monacor-editor-input.tsx b/src/Passingwind.ElsaDesigner/src/pages/designer/form-input/monacor-editor-input.tsx
@@ -1,7 +1,8 @@
 import MonacoEditor from '@/components/MonacoEditor';
+import { randString } from '@/services/utils';
 import { ExpandOutlined } from '@ant-design/icons';
+import { Modal, Spin, Tag } from 'antd';
 import type * as monaco from 'monaco-editor';
-import { Modal, Tag } from 'antd';
 import React, { useEffect, useState } from 'react';
 import './monacor-editor-input.less';
 
@@ -13,17 +14,21 @@ type MonacorEditorInputProps = {
     width?: number;
     height?: number;
     options?: monaco.editor.IStandaloneEditorConstructionOptions;
+    showFullScreen?: false;
 };
 
 const MonacorEditorInput: React.FC<MonacorEditorInputProps> = (props) => {
-    const { id, options } = props;
+    const { options, showFullScreen } = props;
 
-    const [language] = React.useState(props.language || 'plaintext');
-    const [value, setValue] = React.useState(props.value || '');
-    const [isFullscreen, setIsFullscreen] = React.useState(false);
+    const [language, setLanguage] = React.useState('plaintext');
+    const [value, setValue] = React.useState<string>();
 
+    const [isFullscreen, setIsFullscreen] = React.useState(false);
+    const [showEditor, setShowEditor] = React.useState(true);
     const [name] = useState(props.id);
 
+    // const [name2] = useState(randString());
+
     const [currentSize] = React.useState<{ w?: number; h: number }>({ h: 150 });
 
     const handleValueChanged = (v: string) => {
@@ -44,6 +49,26 @@ const MonacorEditorInput: React.FC<MonacorEditorInputProps> = (props) => {
         setValue(props?.value || '');
     }, [props.value]);
 
+    useEffect(() => {
+        // update
+        setLanguage(props.language ?? 'plaintext');
+    }, [props.language]);
+
+    useEffect(() => {
+        console.debug('init editor with id:', name, ', language:', language);
+    }, [name, language]);
+
+    useEffect(() => {
+        if (isFullscreen) {
+            setShowEditor(false);
+        } else {
+            // HACK
+            window.setTimeout(() => {
+                setShowEditor(true);
+            }, 500);
+        }
+    }, [isFullscreen]);
+
     return (
         <div
             className="monaco-editor-container"
@@ -60,22 +85,29 @@ const MonacorEditorInput: React.FC<MonacorEditorInputProps> = (props) => {
                 }
             }}
         >
-            <MonacoEditor
-                value={value}
-                path={name}
-                language={language}
-                minimap={false}
-                options={options}
-                onChange={(value) => {
-                    handleValueChanged(value);
-                }}
-            />
-            <div className="fullscreen-toggle">
-                <a onClick={() => handleToggleFullScreen()} title="Toggle fullscreen">
-                    <ExpandOutlined />
-                </a>
-            </div>
-
+            {showEditor ? (
+                <MonacoEditor
+                    value={value}
+                    path={name}
+                    language={language}
+                    minimap={false}
+                    options={options}
+                    onChange={(value) => {
+                        handleValueChanged(value);
+                    }}
+                />
+            ) : (
+                <Spin spinning>
+                    <div style={{ height: 140 }} />
+                </Spin>
+            )}
+            {(showFullScreen ?? true) && (
+                <div className="fullscreen-toggle">
+                    <a onClick={() => handleToggleFullScreen()} title="Toggle fullscreen">
+                        <ExpandOutlined />
+                    </a>
+                </div>
+            )}
             <Modal
                 title={
                     <>
@@ -84,9 +116,7 @@ const MonacorEditorInput: React.FC<MonacorEditorInputProps> = (props) => {
                 }
                 open={isFullscreen}
                 onCancel={() => setIsFullscreen(false)}
-                onOk={() => {
-                    setIsFullscreen(false);
-                }}
+                onOk={() => setIsFullscreen(false)}
                 width="96%"
                 style={{ top: 20 }}
                 destroyOnClose