Browse Source

feat: dbclick cell to edit code close #24

master
i5ting 4 years ago
parent
commit
9bc689d865
  1. 4
      example/mock/db.json
  2. 8
      packages/core/src/mods/settingBar/components/code/index.tsx
  3. 2
      packages/core/src/mods/settingBar/index.tsx
  4. 8
      packages/core/src/mods/settingBar/mods/basic/index.tsx

4
example/mock/db.json

@ -15,7 +15,7 @@
"configSchema": "{\n \n}",
"configData": {},
"dependencies": "{\n \n}",
"code": "export default async function(ctx) {\n \n}"
"code": "export default async function(ctx) {\n console.log('1212')\n}"
},
"ports": {
"groups": {
@ -347,7 +347,7 @@
"configSchema": "{\n \n}",
"configData": {},
"dependencies": "{\n \n}",
"code": "export default async function(ctx) {\n \n}"
"code": "export default async function(ctx) {\n console.log('test')\n}"
},
"ports": {
"groups": {

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

@ -6,6 +6,7 @@ import styles from './index.module.less';
import AceEditor from 'react-ace';
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';
@ -16,12 +17,17 @@ interface IProps {
name: string;
title: string;
onValueChange: (value: string) => void;
flowChart: Graph;
}
const Code: React.FC<IProps> = (props) => {
const { title, value, onValueChange } = props;
const { title, value, onValueChange, flowChart } = props;
const [visible, setVisible] = useState<boolean>(false);
flowChart.on('cell:dblclick', (args) => {
onClickEdit()
});
// events
const onClickEdit = (): void => {
setVisible(true);

2
packages/core/src/mods/settingBar/index.tsx

@ -36,7 +36,7 @@ const SettingBar: React.FC<IProps> = (props) => {
tabBarStyle={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center' }}
>
<TabPane tab={'基础信息'} key={'basic'}>
<Basic selectedCell={nodes[0]} />
<Basic selectedCell={nodes[0]} flowChart={flowChart}/>
</TabPane>
<TabPane tab={'投放配置'} key={'config'}>
<Config selectedCell={nodes[0]} />

8
packages/core/src/mods/settingBar/mods/basic/index.tsx

@ -2,13 +2,14 @@ import React, { useState, useEffect } from 'react';
import styles from './index.module.less';
import { Cell } from '@antv/x6';
import { Cell, Graph } from '@antv/x6';
import Json from '../../components/json';
import Code from '../../components/code';
import Input from '../../components/input';
interface IProps {
selectedCell: Cell;
flowChart: Graph;
}
interface IBasicData {
@ -20,13 +21,14 @@ interface IBasicData {
}
const Basic: React.FC<IProps> = (props) => {
const { selectedCell } = props;
const { selectedCell, flowChart } = props;
const [data, setData] = useState<IBasicData>();
const { label, code, trigger, dependencies, configSchema } = data || {};
// life
useEffect(() => {
setData(selectedCell.getData());
}, [selectedCell]);
// events
@ -57,7 +59,7 @@ const Basic: React.FC<IProps> = (props) => {
onValueChange={onChangeTrigger}
/>
)}
<Code name={'code'} title={'代码'} value={code} onValueChange={onChangeCode} />
<Code name={'code'} title={'代码'} value={code} onValueChange={onChangeCode} flowChart={flowChart} />
<Json
name={'configSchema'}
title={'投放配置schema'}

Loading…
Cancel
Save