Browse Source

feat: change code editor and highlight edge

master
yangpei 4 years ago
parent
commit
c448874015
  1. 3
      package.json
  2. 1
      packages/core/src/mods/flowChart/createFlowChart.ts
  3. 28
      packages/core/src/mods/settingBar/components/code/index.tsx
  4. 26
      packages/core/src/mods/settingBar/components/json/index.tsx

3
package.json

@ -6,7 +6,7 @@
"test": "jest --coverage",
"e2e": "cypress open",
"doc": "dumi dev",
"example": "concurrently \"APP_ROOT=example umi dev\" \"imove -d\"",
"example": "concurrently \"APP_ROOT=example umi dev\" \"npm run build --prefix packages/core\" \"imove -d\"",
"postinstall": "lerna init && lerna bootstrap && npm link packages/cli"
},
"jest": {
@ -44,6 +44,7 @@
},
"dependencies": {
"@imove/core": "^0.3.6",
"@monaco-editor/react": "^3.7.4",
"lowdb": "^1.0.0",
"umi": "^3.2.2"
}

1
packages/core/src/mods/flowChart/createFlowChart.ts

@ -88,6 +88,7 @@ const createFlowChart = (container: HTMLDivElement, miniMapContainer: HTMLDivEle
rubberband: true,
movable: true,
showNodeSelectionBox: true,
showEdgeSelectionBox: true
},
// https://x6.antv.vision/zh/docs/tutorial/basic/snapline
snapline: {

28
packages/core/src/mods/settingBar/components/code/index.tsx

@ -4,13 +4,14 @@ import 'antd/es/modal/style';
import 'antd/es/button/style';
import styles from './index.module.less';
import AceEditor from 'react-ace';
// import AceEditor from 'react-ace';
import { ControlledEditor } from "@monaco-editor/react";
import { Button, Modal } from 'antd';
import { Graph } from '@antv/x6';
import 'ace-builds/src-noconflict/theme-dracula';
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/snippets/javascript';
import 'ace-builds/src-noconflict/ext-language_tools';
import { Graph } from '@antv/x6';
// import 'ace-builds/src-noconflict/theme-dracula';
// import 'ace-builds/src-noconflict/mode-javascript';
// import 'ace-builds/src-noconflict/snippets/javascript';
// import 'ace-builds/src-noconflict/ext-language_tools';
interface IProps {
value: any;
@ -93,7 +94,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
const onClickOk = (): void => {
onOk(code);
};
const onChangeCode = (newCode: string): void => {
const onChangeCode = (ev: any, newCode: string): void => {
if (newCode !== code) {
setCode(newCode);
}
@ -110,7 +111,16 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
onOk={onClickOk}
onCancel={onCancel}
>
<AceEditor
<ControlledEditor
width="100%"
height="600px"
value={code}
// @ts-ignore
onChange={onChangeCode}
language="javascript"
theme="dark"
/>
{/* <AceEditor
style={CODE_EDITOR_STYLE}
tabSize={2}
value={code}
@ -123,7 +133,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
enableBasicAutocompletion={true}
setOptions={CODE_EDITOR_OPTIONS}
onChange={onChangeCode}
/>
/> */}
</Modal>
);
};

26
packages/core/src/mods/settingBar/components/json/index.tsx

@ -5,14 +5,15 @@ import 'antd/es/button/style';
import 'antd/es/message/style';
import styles from './index.module.less';
import AceEditor from 'react-ace';
// import AceEditor from 'react-ace';
import { ControlledEditor } from "@monaco-editor/react";
import JsonView from 'react-json-view';
import { Button, Modal, message } from 'antd';
import { safeParse } from '../../../../utils';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-dracula';
import 'ace-builds/src-noconflict/snippets/json';
import 'ace-builds/src-noconflict/ext-language_tools';
// import 'ace-builds/src-noconflict/mode-json';
// import 'ace-builds/src-noconflict/theme-dracula';
// import 'ace-builds/src-noconflict/snippets/json';
// import 'ace-builds/src-noconflict/ext-language_tools';
interface IJsonProps {
value: any;
@ -103,7 +104,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
console.log('save failed, the error is:', error.message);
}
};
const onChangeJson = (newJson: string): void => {
const onChangeJson = (ev: any, newJson: string): void => {
if (newJson !== json) {
setJson(newJson);
}
@ -119,7 +120,16 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
onOk={onClickOk}
onCancel={onCancel}
>
<AceEditor
<ControlledEditor
width="100%"
height="400px"
value={json}
// @ts-ignore
onChange={onChangeJson}
language="javascript"
theme="dark"
/>
{/* <AceEditor
style={CODE_EDITOR_STYLE}
tabSize={2}
value={json}
@ -131,7 +141,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
enableBasicAutocompletion={true}
setOptions={CODE_EDITOR_OPTIONS}
onChange={onChangeJson}
/>
/> */}
</Modal>
);
};

Loading…
Cancel
Save