fix monaco editor input issue

jxnkwlp · Apr 23, 2022 · 55a3eef · 55a3eef
1 parent 172e315
commit 55a3eef
Show file tree

Hide file tree

Showing 8 changed files with 151 additions and 123 deletions.
diff --git a/src/Passingwind.ElsaDesigner/config/routes.ts b/src/Passingwind.ElsaDesigner/config/routes.ts
@@ -80,8 +80,13 @@
     //     path: '/TableList',
     //     component: './TableList',
     // },
+    // {
+    //     path: '/test',
+    //     name: 'test',
+    //     icon: 'smile',
+    //     component: './test',
+    // },
 
-    //
     {
         path: '/',
         redirect: '/dashboard',

diff --git a/src/Passingwind.ElsaDesigner/src/pages/Welcome.tsx b/src/Passingwind.ElsaDesigner/src/pages/Welcome.tsx
@@ -5,62 +5,69 @@ import { useIntl, FormattedMessage } from 'umi';
 import styles from './Welcome.less';
 
 const CodePreview: React.FC = ({ children }) => (
-  <pre className={styles.pre}>
-    <code>
-      <Typography.Text copyable>{children}</Typography.Text>
-    </code>
-  </pre>
+    <pre className={styles.pre}>
+        <code>
+            <Typography.Text copyable>{children}</Typography.Text>
+        </code>
+    </pre>
 );
 
 const Welcome: React.FC = () => {
-  const intl = useIntl();
+    const intl = useIntl();
 
-  return (
-    <PageContainer>
-      <Card>
-        <Alert
-          message={intl.formatMessage({
-            id: 'pages.welcome.alertMessage',
-            defaultMessage: 'Faster and stronger heavy-duty components have been released.',
-          })}
-          type="success"
-          showIcon
-          banner
-          style={{
-            margin: -12,
-            marginBottom: 24,
-          }}
-        />
-        <Typography.Text strong>
-          <FormattedMessage id="pages.welcome.advancedComponent" defaultMessage="Advanced Form" />{' '}
-          <a
-            href="https://procomponents.ant.design/components/table"
-            rel="noopener noreferrer"
-            target="__blank"
-          >
-            <FormattedMessage id="pages.welcome.link" defaultMessage="Welcome" />
-          </a>
-        </Typography.Text>
-        <CodePreview>yarn add @ant-design/pro-table</CodePreview>
-        <Typography.Text
-          strong
-          style={{
-            marginBottom: 12,
-          }}
-        >
-          <FormattedMessage id="pages.welcome.advancedLayout" defaultMessage="Advanced layout" />{' '}
-          <a
-            href="https://procomponents.ant.design/components/layout"
-            rel="noopener noreferrer"
-            target="__blank"
-          >
-            <FormattedMessage id="pages.welcome.link" defaultMessage="Welcome" />
-          </a>
-        </Typography.Text>
-        <CodePreview>yarn add @ant-design/pro-layout</CodePreview>
-      </Card>
-    </PageContainer>
-  );
+    return (
+        <PageContainer>
+            <Card>
+                <Alert
+                    message={intl.formatMessage({
+                        id: 'pages.welcome.alertMessage',
+                        defaultMessage:
+                            'Faster and stronger heavy-duty components have been released.',
+                    })}
+                    type="success"
+                    showIcon
+                    banner
+                    style={{
+                        margin: -12,
+                        marginBottom: 24,
+                    }}
+                />
+                <Typography.Text strong>
+                    <FormattedMessage
+                        id="pages.welcome.advancedComponent"
+                        defaultMessage="Advanced Form"
+                    />{' '}
+                    <a
+                        href="https://procomponents.ant.design/components/table"
+                        rel="noopener noreferrer"
+                        target="__blank"
+                    >
+                        <FormattedMessage id="pages.welcome.link" defaultMessage="Welcome" />
+                    </a>
+                </Typography.Text>
+                <CodePreview>yarn add @ant-design/pro-table</CodePreview>
+                <Typography.Text
+                    strong
+                    style={{
+                        marginBottom: 12,
+                    }}
+                >
+                    <FormattedMessage
+                        id="pages.welcome.advancedLayout"
+                        defaultMessage="Advanced layout"
+                    />{' '}
+                    <a
+                        href="https://procomponents.ant.design/components/layout"
+                        rel="noopener noreferrer"
+                        target="__blank"
+                    >
+                        <FormattedMessage id="pages.welcome.link" defaultMessage="Welcome" />
+                    </a>
+                </Typography.Text>
+                <CodePreview>yarn add @ant-design/pro-layout</CodePreview>
+            </Card>
+        </PageContainer>
+    );
 };
 
 export default Welcome;
diff --git a/src/Passingwind.ElsaDesigner/src/pages/designer/flow.less b/src/Passingwind.ElsaDesigner/src/pages/designer/flow.less
@@ -117,41 +117,6 @@
     }
 }
 
-.monaco-editor-container {
-    border: 1px solid #d9d9d9;
-    border-radius: 2px;
-    margin: 0 1px;
-    position: relative;
-
-    &.fullscreen {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 9999;
-        background: #fff;
-    }
-
-    .fullscreen-toggle {
-        position: absolute;
-        z-index: 10;
-        right: 20px;
-        top: 8px;
-        background: #0000001c;
-        color: #fff;
-
-        &:hover {
-            background: #0004;
-        }
-
-        a {
-            display: block;
-            color: #fff;
-            padding: 2px 6px;
-        }
-    }
-}
 
 /** 覆盖节点默认选中色 */
 .x6-node-selected rect {

diff --git a/src/Passingwind.ElsaDesigner/src/pages/designer/form-input/monacor-editor-input.less b/src/Passingwind.ElsaDesigner/src/pages/designer/form-input/monacor-editor-input.less
@@ -0,0 +1,35 @@
+.monaco-editor-container {
+    border: 1px solid #d9d9d9;
+    border-radius: 2px;
+    margin: 0 1px;
+    position: relative;
+
+    &.fullscreen {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 9999;
+        background: #fff;
+    }
+
+    .fullscreen-toggle {
+        position: absolute;
+        z-index: 10;
+        right: 20px;
+        top: 6px;
+        background: #0000001c;
+        color: #fff;
+
+        &:hover {
+            background: #0004;
+        }
+
+        a {
+            display: block;
+            color: #fff;
+            padding: 2px 6px;
+        }
+    }
+}
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
@@ -2,6 +2,7 @@ import { ExpandOutlined } from '@ant-design/icons';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import React, { useEffect } from 'react';
 import MonacoEditor from 'react-monaco-editor';
+import './monacor-editor-input.less';
 
 type MonacorEditorInputProps = {
     id?: string;
@@ -17,11 +18,16 @@ type MonacorEditorInputProps = {
 const MonacorEditorInput: React.FC<MonacorEditorInputProps> = (props) => {
     const ref = React.createRef<MonacoEditor>();
 
+    const [value] = React.useState(props.value || '');
     const [isFullscreen, setIsFullscreen] = React.useState(false);
 
     const [originSize, setOriginSize] = React.useState<{ w?: number; h: number }>();
     const [currentSize, setCurrentSize] = React.useState<{ w?: number; h: number }>();
 
+    const handleValueChanged = (v: string) => {
+        props?.onChange?.(v);
+    };
+
     const handleToggleFullScreen = () => {
         if (isFullscreen) {
             setIsFullscreen(false);
@@ -53,11 +59,6 @@ const MonacorEditorInput: React.FC<MonacorEditorInputProps> = (props) => {
         }
     };
 
-    useEffect(() => {
-        // console.log(props);
-        ref.current?.editor?.setValue(props.value ?? '');
-    }, [props, ref]);
-
     useEffect(() => {
         setOriginSize({ w: props.width, h: props.height ?? 150 });
         setCurrentSize({ w: props.width, h: props.height ?? 150 });
@@ -66,32 +67,6 @@ const MonacorEditorInput: React.FC<MonacorEditorInputProps> = (props) => {
     useEffect(() => {
         if (props.language == 'javascript') {
             updateEditorScriptExtraLibs();
-            // const libs = (props.javaScriptLibs ?? []).map((x) => {
-            //     return { content: x.content, filePath: x.filePath };
-            // });
-            // monaco.languages.registerCompletionItemProvider(props.language ?? 'typescript', {
-            //     triggerCharacters: [':'],
-            //     provideCompletionItems: (model, position) => {
-            //         const word = model.getWordUntilPosition(position);
-            //         const range = {
-            //             startLineNumber: position.lineNumber,
-            //             endLineNumber: position.lineNumber,
-            //             startColumn: word.startColumn,
-            //             endColumn: word.endColumn,
-            //         };
-            //         return {
-            //             suggestions: [
-            //                 {
-            //                     label: '"lodash"',
-            //                     kind: monaco.languages.CompletionItemKind.Function,
-            //                     documentation: 'The Lodash library exported as Node.js modules.',
-            //                     insertText: '"lodash": "*"',
-            //                     range: range,
-            //                 },
-            //             ],
-            //         };
-            //     },
-            // });
         }
     }, [props.language]);
 
@@ -106,20 +81,22 @@ const MonacorEditorInput: React.FC<MonacorEditorInputProps> = (props) => {
             <MonacoEditor
                 ref={ref}
                 language={props.language}
-                defaultValue={props.value}
                 onChange={(v) => {
-                    props?.onChange?.(v);
+                    handleValueChanged(v);
                 }}
                 options={{
                     minimap: { enabled: isFullscreen },
                     wordWrap: 'bounded',
                     wordWrapColumn: 1024,
                     automaticLayout: true,
                     autoIndent: 'full',
+                    tabSize: 2,
+                    autoClosingBrackets: 'languageDefined',
+                    foldingStrategy: 'auto',
                     ...props?.options,
                 }}
                 editorDidMount={(e) => {
-                    e.setValue(props.value ?? '');
+                    e.setValue(value);
                 }}
             />
             <div className="fullscreen-toggle">

diff --git a/src/Passingwind.ElsaDesigner/src/pages/designer/index.tsx b/src/Passingwind.ElsaDesigner/src/pages/designer/index.tsx
@@ -135,7 +135,19 @@ const Index: React.FC = () => {
         try {
             const content = await file.text();
             const data = JSON.parse(content);
-            await loadServerData(data as API.WorkflowDefinition, true);
+            const data2 = { connections: [], activities: data.activities };
+            // compatible with offlice export json file
+            if (data?.connections) {
+                data2.connections = data.connections?.map((x: any) => {
+                    return {
+                        sourceId: x.sourceId ?? x.sourceActivityId,
+                        targetId: x.targetId ?? x.targetActivityId,
+                        outcome: x.outcome,
+                    };
+                });
+            }
+
+            await loadServerData(data2 as API.WorkflowDefinition, true);
             message.info('import successful.');
         } catch (error) {
             console.error(error);

diff --git a/src/Passingwind.ElsaDesigner/src/pages/instance/index.tsx b/src/Passingwind.ElsaDesigner/src/pages/instance/index.tsx
@@ -67,6 +67,10 @@ const Index: React.FC = () => {
             valueType: 'dateTime',
             search: false,
         },
+        {
+            title: 'CorrelationId',
+            dataIndex: 'correlationId',
+        },
 
         {
             title: 'Action',

diff --git a/src/Passingwind.ElsaDesigner/src/pages/test.tsx b/src/Passingwind.ElsaDesigner/src/pages/test.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { PageContainer } from '@ant-design/pro-layout';
+import { Card, Alert, Typography, Form } from 'antd';
+import { useIntl, FormattedMessage } from 'umi';
+import MonacorEditorInput from './designer/form-input/monacor-editor-input';
+
+const Test: React.FC = () => {
+    const intl = useIntl();
+
+    return (
+        <PageContainer>
+            <Card>
+                <Form initialValues={{ v: new Date().getTime().toString() }}>
+                    <Form.Item name="v">
+                        <MonacorEditorInput height={500} />
+                    </Form.Item>
+                </Form>
+            </Card>
+        </PageContainer>
+    );
+};
+
+export default Test;