diff --git a/example/mock/db.json b/example/mock/db.json index dc3743b..2b7eb5e 100644 --- a/example/mock/db.json +++ b/example/mock/db.json @@ -2,7 +2,7 @@ "default": [ { "position": { - "x": 450, + "x": 460, "y": 50 }, "size": { @@ -443,6 +443,97 @@ } } ] + }, + { + "position": { + "x": 56, + "y": 370 + }, + "size": { + "width": 80, + "height": 80 + }, + "shape": "imove-start", + "data": { + "label": "开始", + "configSchema": "{\n \n}", + "configData": {}, + "trigger": "start", + "dependencies": "{\n \n}", + "code": "export default async function(ctx) {\n \n}" + }, + "ports": { + "groups": { + "top": { + "position": "top", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + } + }, + "right": { + "position": "right", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + } + }, + "bottom": { + "position": "bottom", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + } + }, + "left": { + "position": "left", + "attrs": { + "circle": { + "r": 3, + "magnet": true, + "stroke": "#666", + "strokeWidth": 1, + "fill": "#fff" + } + } + } + }, + "items": [ + { + "id": "top", + "group": "top" + }, + { + "id": "right", + "group": "right" + }, + { + "id": "bottom", + "group": "bottom" + }, + { + "id": "left", + "group": "left" + } + ] + }, + "id": "170e1bef-3acf-4172-8a03-cd9fd6e6fc81", + "zIndex": 8 } ] } \ No newline at end of file diff --git a/packages/core/src/components/codeRun/index.tsx b/packages/core/src/components/codeRun/index.tsx index 3b474dc..bece212 100644 --- a/packages/core/src/components/codeRun/index.tsx +++ b/packages/core/src/components/codeRun/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useRef } from 'react'; import Generator from 'fr-generator'; import JsonView from 'react-json-view'; import { Terminal } from 'xterm'; @@ -8,25 +8,37 @@ import CodeEditor from '../codeEditor'; import { defaultJson, formatJson, defaultConfig, formatConfig, compData } from './json' import styles from './index.module.less'; -const VisualTab: React.FC = () => { +interface IVisualrops { + onChange: (value: object) => void +} + +interface FormValue { + children: object[], + parent: string, + schema: object +} + +const VisualTab: React.FC = (props) => { + const onChange = (value: FormValue) => { + props.onChange(value.schema) + } return ( -
- -
+ ) } const JsonTab: React.FC = () => { + const termRef = useRef(null); + useEffect(() => { - let term = new Terminal(); - term.open(document.getElementById('terminal')); + const term = new Terminal(); + term.open(termRef.current); term.write('I\'m \x1B[1;3;31mterminal\x1B[0m $ ') }, []) @@ -51,16 +63,14 @@ const JsonTab: React.FC = () => { src={formatJson} /> -
-
-
+
); } interface IConfigProps { - onChange?: (ev: any, newJson: string | undefined) => void + onChange: (value: object) => void } const ConfigTab: React.FC = (props) => { @@ -93,7 +103,7 @@ const ConfigTab: React.FC = (props) => { interface ICodeRunProps { isConfig?: boolean, - onChange?: (ev: any, newJson: string | undefined) => void + onChange: (value: object) => void } const CodeRun: React.FC = (props) => { @@ -105,7 +115,7 @@ const CodeRun: React.FC = (props) => { tabBarStyle={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center' }} > - + {props.isConfig ? : } diff --git a/packages/core/src/mods/settingBar/components/json/index.tsx b/packages/core/src/mods/settingBar/components/json/index.tsx index 917c0a7..4371b53 100644 --- a/packages/core/src/mods/settingBar/components/json/index.tsx +++ b/packages/core/src/mods/settingBar/components/json/index.tsx @@ -8,12 +8,14 @@ import styles from './index.module.less'; import JsonView from 'react-json-view'; import { Button, Modal, message } from 'antd'; import { safeParse } from '../../../../utils'; +import CodeEditor from '../../../../components/codeEditor'; import CodeRun from '../../../../components/codeRun'; interface IJsonProps { value: any; name: string; title: string; + onlyInput?: boolean; onValueChange: (value: string) => void; } @@ -51,6 +53,7 @@ const Json: React.FC = (props) => { title={title} value={value} visible={visible} + onlyInput={props.onlyInput} onOk={onClickOk} onCancel={onClickCancel} /> @@ -62,6 +65,7 @@ interface IEditorModalProps { visible: boolean; title: string; value: string; + onlyInput?: boolean; onOk: (val: string) => void; onCancel: () => void; } @@ -92,6 +96,8 @@ const EditModal: React.FC = (props) => { } }; const onChangeJson = (ev: any, newJson: string | undefined = ''): void => { + // TODO 投放配置schema转化、普通json识别 + console.log({ newJson }) if (newJson !== json) { setJson(newJson); } @@ -100,7 +106,7 @@ const EditModal: React.FC = (props) => { return ( = (props) => { onOk={onClickOk} onCancel={onCancel} > - - {/* */} + {props.onlyInput ? + : + + } ); }; diff --git a/packages/core/src/mods/settingBar/mods/basic/index.tsx b/packages/core/src/mods/settingBar/mods/basic/index.tsx index 1b1ba63..f8d101c 100644 --- a/packages/core/src/mods/settingBar/mods/basic/index.tsx +++ b/packages/core/src/mods/settingBar/mods/basic/index.tsx @@ -75,6 +75,7 @@ const Basic: React.FC = (props) => { name={'dependencies'} title={'依赖'} value={dependencies} + onlyInput={true} onValueChange={onChangeDependencies} /> diff --git a/packages/core/src/typings.d.ts b/packages/core/src/typings.d.ts index 252b58b..d00bbf6 100644 --- a/packages/core/src/typings.d.ts +++ b/packages/core/src/typings.d.ts @@ -7,3 +7,13 @@ declare module '*.less' { const classes: { [key: string]: string }; export default classes; } + + +declare module 'fr-generator' { + import React from 'react'; + export interface FRProps { + settings?: object + } + class FormRender extends React.Component { } + export default FRGenerator; +}