From 55a3eef0c519296c85176c6f36c506860ed4254d Mon Sep 17 00:00:00 2001 From: jxnkwlp Date: Sat, 23 Apr 2022 18:00:20 +0800 Subject: [PATCH] fix monaco editor input issue --- src/Passingwind.ElsaDesigner/config/routes.ts | 7 +- .../src/pages/Welcome.tsx | 111 ++++++++++-------- .../src/pages/designer/flow.less | 35 ------ .../form-input/monacor-editor-input.less | 35 ++++++ .../form-input/monacor-editor-input.tsx | 45 ++----- .../src/pages/designer/index.tsx | 14 ++- .../src/pages/instance/index.tsx | 4 + .../src/pages/test.tsx | 23 ++++ 8 files changed, 151 insertions(+), 123 deletions(-) create mode 100644 src/Passingwind.ElsaDesigner/src/pages/designer/form-input/monacor-editor-input.less create mode 100644 src/Passingwind.ElsaDesigner/src/pages/test.tsx diff --git a/src/Passingwind.ElsaDesigner/config/routes.ts b/src/Passingwind.ElsaDesigner/config/routes.ts index aaf0c58..b4387e6 100644 --- 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 index 9041b18..dc5cbfa 100644 --- 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 }) => ( - 
-    
-      {children}
-    
-
+ 
+        
+            {children}
+        
+
); const Welcome: React.FC = () => { - const intl = useIntl(); + const intl = useIntl(); - return ( - - - - - {' '} - - - - - yarn add @ant-design/pro-table - - {' '} - - - - - yarn add @ant-design/pro-layout - - - ); + return ( + + + + + {' '} + + + + + yarn add @ant-design/pro-table + + {' '} + + + + + yarn add @ant-design/pro-layout + + + ); }; export default Welcome; diff --git a/src/Passingwind.ElsaDesigner/src/pages/designer/flow.less b/src/Passingwind.ElsaDesigner/src/pages/designer/flow.less index c9086d9..d5418c3 100644 --- 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 new file mode 100644 index 0000000..5f0f98f --- /dev/null +++ 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 index 3ab20f1..e6a584f 100644 --- 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 = (props) => { const ref = React.createRef(); + 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 = (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 = (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,9 +81,8 @@ const MonacorEditorInput: React.FC = (props) => { { - props?.onChange?.(v); + handleValueChanged(v); }} options={{ minimap: { enabled: isFullscreen }, @@ -116,10 +90,13 @@ const MonacorEditorInput: React.FC = (props) => { wordWrapColumn: 1024, automaticLayout: true, autoIndent: 'full', + tabSize: 2, + autoClosingBrackets: 'languageDefined', + foldingStrategy: 'auto', ...props?.options, }} editorDidMount={(e) => { - e.setValue(props.value ?? ''); + e.setValue(value); }} />
diff --git a/src/Passingwind.ElsaDesigner/src/pages/designer/index.tsx b/src/Passingwind.ElsaDesigner/src/pages/designer/index.tsx index 21f6537..46d727f 100644 --- 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 index 3b4b70d..9dface4 100644 --- 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 new file mode 100644 index 0000000..697d9a3 --- /dev/null +++ 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 ( + + +
+ + + +
+ + + ); +}; + +export default Test;