Browse Source

feat: change code editor and highlight edge

master
yangpei 5 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", "test": "jest --coverage",
"e2e": "cypress open", "e2e": "cypress open",
"doc": "dumi dev", "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" "postinstall": "lerna init && lerna bootstrap && npm link packages/cli"
}, },
"jest": { "jest": {
@ -44,6 +44,7 @@
}, },
"dependencies": { "dependencies": {
"@imove/core": "^0.3.6", "@imove/core": "^0.3.6",
"@monaco-editor/react": "^3.7.4",
"lowdb": "^1.0.0", "lowdb": "^1.0.0",
"umi": "^3.2.2" "umi": "^3.2.2"
} }

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

@ -88,6 +88,7 @@ const createFlowChart = (container: HTMLDivElement, miniMapContainer: HTMLDivEle
rubberband: true, rubberband: true,
movable: true, movable: true,
showNodeSelectionBox: true, showNodeSelectionBox: true,
showEdgeSelectionBox: true
}, },
// https://x6.antv.vision/zh/docs/tutorial/basic/snapline // https://x6.antv.vision/zh/docs/tutorial/basic/snapline
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 'antd/es/button/style';
import styles from './index.module.less'; 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 { Button, Modal } from 'antd';
import { Graph } from '@antv/x6'; import { Graph } from '@antv/x6';
import 'ace-builds/src-noconflict/theme-dracula'; // import 'ace-builds/src-noconflict/theme-dracula';
import 'ace-builds/src-noconflict/mode-javascript'; // import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/snippets/javascript'; // import 'ace-builds/src-noconflict/snippets/javascript';
import 'ace-builds/src-noconflict/ext-language_tools'; // import 'ace-builds/src-noconflict/ext-language_tools';
interface IProps { interface IProps {
value: any; value: any;
@ -93,7 +94,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
const onClickOk = (): void => { const onClickOk = (): void => {
onOk(code); onOk(code);
}; };
const onChangeCode = (newCode: string): void => { const onChangeCode = (ev: any, newCode: string): void => {
if (newCode !== code) { if (newCode !== code) {
setCode(newCode); setCode(newCode);
} }
@ -110,7 +111,16 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
onOk={onClickOk} onOk={onClickOk}
onCancel={onCancel} onCancel={onCancel}
> >
<AceEditor <ControlledEditor
width="100%"
height="600px"
value={code}
// @ts-ignore
onChange={onChangeCode}
language="javascript"
theme="dark"
/>
{/* <AceEditor
style={CODE_EDITOR_STYLE} style={CODE_EDITOR_STYLE}
tabSize={2} tabSize={2}
value={code} value={code}
@ -123,7 +133,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
enableBasicAutocompletion={true} enableBasicAutocompletion={true}
setOptions={CODE_EDITOR_OPTIONS} setOptions={CODE_EDITOR_OPTIONS}
onChange={onChangeCode} onChange={onChangeCode}
/> /> */}
</Modal> </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 'antd/es/message/style';
import styles from './index.module.less'; 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 JsonView from 'react-json-view';
import { Button, Modal, message } from 'antd'; import { Button, Modal, message } from 'antd';
import { safeParse } from '../../../../utils'; import { safeParse } from '../../../../utils';
import 'ace-builds/src-noconflict/mode-json'; // import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-dracula'; // import 'ace-builds/src-noconflict/theme-dracula';
import 'ace-builds/src-noconflict/snippets/json'; // import 'ace-builds/src-noconflict/snippets/json';
import 'ace-builds/src-noconflict/ext-language_tools'; // import 'ace-builds/src-noconflict/ext-language_tools';
interface IJsonProps { interface IJsonProps {
value: any; value: any;
@ -103,7 +104,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
console.log('save failed, the error is:', error.message); console.log('save failed, the error is:', error.message);
} }
}; };
const onChangeJson = (newJson: string): void => { const onChangeJson = (ev: any, newJson: string): void => {
if (newJson !== json) { if (newJson !== json) {
setJson(newJson); setJson(newJson);
} }
@ -119,7 +120,16 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
onOk={onClickOk} onOk={onClickOk}
onCancel={onCancel} onCancel={onCancel}
> >
<AceEditor <ControlledEditor
width="100%"
height="400px"
value={json}
// @ts-ignore
onChange={onChangeJson}
language="javascript"
theme="dark"
/>
{/* <AceEditor
style={CODE_EDITOR_STYLE} style={CODE_EDITOR_STYLE}
tabSize={2} tabSize={2}
value={json} value={json}
@ -131,7 +141,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
enableBasicAutocompletion={true} enableBasicAutocompletion={true}
setOptions={CODE_EDITOR_OPTIONS} setOptions={CODE_EDITOR_OPTIONS}
onChange={onChangeJson} onChange={onChangeJson}
/> /> */}
</Modal> </Modal>
); );
}; };

Loading…
Cancel
Save