Browse Source

feat: add config memory for nodes

master
yangpei 4 years ago
parent
commit
655ac85ae8
  1. 542
      example/mock/db.json
  2. 2
      packages/core/src/components/schemaForm/index.tsx
  3. 44
      packages/core/src/mods/settingBar/components/json/index.tsx
  4. 1
      packages/core/src/mods/settingBar/mods/basic/index.tsx

542
example/mock/db.json

@ -3,7 +3,7 @@
{
"position": {
"x": 460,
"y": 50
"y": 60
},
"size": {
"width": 80,
@ -12,7 +12,7 @@
"shape": "imove-behavior",
"data": {
"label": "处理",
"configSchema": "{\n \n}",
"configSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"textarea_FyaArd\": {\n \"title\": \"Textarea\",\n \"type\": \"string\",\n \"format\": \"textarea\",\n \"description\": \"文本编辑框\"\n },\n \"select_jrGW8n\": {\n \"title\": \"Select\",\n \"type\": \"string\",\n \"enum\": [\n \"a\",\n \"b\",\n \"c\"\n ],\n \"enumNames\": [\n \"早\",\n \"中\",\n \"晚\"\n ],\n \"description\": \"下拉单选\"\n }\n },\n \"ui:displayType\": \"row\",\n \"ui:showDescIcon\": true\n },\n \"displayType\": \"row\",\n \"showDescIcon\": true\n}",
"configData": {},
"dependencies": "{\n \n}",
"code": "export default async function(ctx) {\n console.log('1212')\n}"
@ -102,7 +102,7 @@
"shape": "imove-start",
"data": {
"label": "开始",
"configSchema": "{\n \n}",
"configSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"input_1aWdPV\": {\n \"title\": \"Input\",\n \"type\": \"string\",\n \"description\": \"输入框\"\n },\n \"dateRangeSelect_mPNhq_\": {\n \"title\": \"DateRange\",\n \"type\": \"range\",\n \"format\": \"date\",\n \"description\": \"日期范围选择\"\n }\n },\n \"ui:displayType\": \"row\",\n \"ui:showDescIcon\": true\n },\n \"displayType\": \"row\",\n \"showDescIcon\": true\n}",
"configData": {},
"trigger": "start",
"dependencies": "{\n \n}",
@ -193,7 +193,7 @@
"shape": "imove-branch",
"data": {
"label": "判断",
"configSchema": "{\n \n}",
"configSchema": "{\"schema\":{}}",
"configData": {},
"dependencies": "{\n \n}",
"ports": {
@ -344,7 +344,7 @@
"shape": "imove-behavior",
"data": {
"label": "处理",
"configSchema": "{\n \n}",
"configSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"textarea_rdO5RK\": {\n \"title\": \"Textarea\",\n \"type\": \"string\",\n \"format\": \"textarea\",\n \"description\": \"文本编辑框\"\n }\n },\n \"ui:displayType\": \"row\",\n \"ui:showDescIcon\": true\n },\n \"displayType\": \"row\",\n \"showDescIcon\": true\n}",
"configData": {},
"dependencies": "{\n \n}",
"code": "export default async function(ctx) {\n console.log('test')\n}"
@ -461,7 +461,7 @@
"shape": "imove-behavior",
"data": {
"label": "在线运行测试",
"configSchema": "{\n \n}",
"configSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"input_CCw1sQ\": {\n \"title\": \"Input\",\n \"type\": \"string\",\n \"description\": \"输入框\"\n },\n \"allBoolean_fREQq-\": {\n \"title\": \"Switch\",\n \"type\": \"boolean\",\n \"ui:widget\": \"switch\",\n \"description\": \"开关控制\"\n }\n },\n \"ui:displayType\": \"row\",\n \"ui:showDescIcon\": true\n },\n \"displayType\": \"row\",\n \"showDescIcon\": true\n}",
"configData": {},
"dependencies": "{\n \"lodash.get\": \"4.4.2\"\n}",
"code": "import fpget from 'lodash.get';\n\nexport default async function(ctx) {\n const obj = {a: {b: 'hello imove~'}};\n console.log(fpget(obj, 'a.b'));\n return ctx.getPipe();\n}"
@ -538,6 +538,536 @@
},
"id": "1d174369-929b-4bd5-8841-f271399c4a4f",
"zIndex": 9
},
{
"position": {
"x": 460,
"y": 230
},
"size": {
"width": 80,
"height": 40
},
"shape": "imove-branch",
"data": {
"label": "判断",
"configSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"textarea_PiznGE\": {\n \"title\": \"Textarea\",\n \"type\": \"string\",\n \"format\": \"textarea\",\n \"description\": \"文本编辑框\"\n }\n },\n \"ui:displayType\": \"row\",\n \"ui:showDescIcon\": true\n },\n \"displayType\": \"row\",\n \"showDescIcon\": true\n}",
"configData": {},
"dependencies": "{\n \n}",
"ports": {
"right": {
"condition": "true"
},
"bottom": {
"condition": "false"
}
},
"code": "export default async function(ctx) {\n return true;\n}"
},
"ports": {
"groups": {
"top": {
"position": "top",
"attrs": {
"circle": {
"r": 3,
"magnet": true,
"stroke": "#666",
"strokeWidth": 1,
"fill": "#fff"
}
}
},
"right": {
"zIndex": 999999999,
"position": "right",
"attrs": {
"circle": {
"r": 3,
"magnet": true,
"stroke": "#666",
"strokeWidth": 1,
"fill": "#fff"
}
},
"label": {
"position": "right"
}
},
"bottom": {
"zIndex": 999999999,
"position": "bottom",
"attrs": {
"circle": {
"r": 3,
"magnet": true,
"stroke": "#666",
"strokeWidth": 1,
"fill": "#fff"
}
},
"label": {
"position": "bottom"
}
},
"left": {
"position": "left",
"attrs": {
"circle": {
"r": 3,
"magnet": true,
"stroke": "#666",
"strokeWidth": 1,
"fill": "#fff"
}
}
}
},
"items": [
{
"id": "top",
"group": "top"
},
{
"id": "right",
"group": "right",
"attrs": {
"text": {
"text": "是"
}
}
},
{
"id": "bottom",
"group": "bottom",
"attrs": {
"text": {
"text": "否"
}
}
},
{
"id": "left",
"group": "left"
}
]
},
"id": "b878444f-8654-42a3-848c-e8409d76e0a7",
"zIndex": 10
},
{
"position": {
"x": 400,
"y": 400
},
"size": {
"width": 80,
"height": 40
},
"shape": "imove-branch",
"data": {
"label": "判断",
"configSchema": "{\"schema\":{\"type\":\"object\",\"properties\":{\"textarea_8LSzk5\":{\"title\":\"Textarea\",\"type\":\"string\",\"format\":\"textarea\",\"description\":\"文本编辑框\"}},\"ui:displayType\":\"row\",\"ui:showDescIcon\":true},\"displayType\":\"row\",\"showDescIcon\":true}",
"configData": {},
"dependencies": "{\n \n}",
"ports": {
"right": {
"condition": "true"
},
"bottom": {
"condition": "false"
}
},
"code": "export default async function(ctx) {\n return true;\n}"
},
"ports": {
"groups": {
"top": {
"position": "top",
"attrs": {
"circle": {
"r": 3,
"magnet": true,
"stroke": "#666",
"strokeWidth": 1,
"fill": "#fff"
}
}
},
"right": {
"zIndex": 999999999,
"position": "right",
"attrs": {
"circle": {
"r": 3,
"magnet": true,
"stroke": "#666",
"strokeWidth": 1,
"fill": "#fff"
}
},
"label": {
"position": "right"
}
},
"bottom": {
"zIndex": 999999999,
"position": "bottom",
"attrs": {
"circle": {
"r": 3,
"magnet": true,
"stroke": "#666",
"strokeWidth": 1,
"fill": "#fff"
}
},
"label": {
"position": "bottom"
}
},
"left": {
"position": "left",
"attrs": {
"circle": {
"r": 3,
"magnet": true,
"stroke": "#666",
"strokeWidth": 1,
"fill": "#fff"
}
}
}
},
"items": [
{
"id": "top",
"group": "top"
},
{
"id": "right",
"group": "right",
"attrs": {
"text": {
"text": "是"
}
}
},
{
"id": "bottom",
"group": "bottom",
"attrs": {
"text": {
"text": "否"
}
}
},
{
"id": "left",
"group": "left"
}
]
},
"id": "1d3c25c2-13ef-421a-a233-84e3dd80fda9",
"zIndex": 11
},
{
"position": {
"x": 220,
"y": 510
},
"size": {
"width": 80,
"height": 80
},
"shape": "imove-start",
"data": {
"label": "开始",
"configSchema": "{\"schema\":{\"type\":\"object\",\"properties\":{\"textarea_g4WHTq\":{\"title\":\"Textarea\",\"type\":\"string\",\"format\":\"textarea\",\"description\":\"文本编辑框\"},\"select_QkHoSL\":{\"title\":\"Select\",\"type\":\"string\",\"enum\":[\"a\",\"b\",\"c\"],\"enumNames\":[\"早\",\"中\",\"晚\"],\"description\":\"下拉单选\"}},\"ui:displayType\":\"row\",\"ui:showDescIcon\":true},\"displayType\":\"row\",\"showDescIcon\":true}",
"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": "2eed7162-e595-4715-a444-034a21a3ebc3",
"zIndex": 12
},
{
"position": {
"x": 30,
"y": 150
},
"size": {
"width": 80,
"height": 40
},
"shape": "imove-branch",
"data": {
"label": "判断",
"configSchema": "{\"schema\":{\"type\":\"object\",\"properties\":{\"textarea_pGP_J4\":{\"title\":\"Textarea\",\"type\":\"string\",\"format\":\"textarea\",\"description\":\"文本编辑框\"}},\"ui:displayType\":\"row\",\"ui:showDescIcon\":true},\"displayType\":\"row\",\"showDescIcon\":true}",
"configData": {},
"dependencies": "{\n \n}",
"ports": {
"right": {
"condition": "true"
},
"bottom": {
"condition": "false"
}
},
"code": "export default async function(ctx) {\n return true;\n}"
},
"ports": {
"groups": {
"top": {
"position": "top",
"attrs": {
"circle": {
"r": 3,
"magnet": true,
"stroke": "#666",
"strokeWidth": 1,
"fill": "#fff"
}
}
},
"right": {
"zIndex": 999999999,
"position": "right",
"attrs": {
"circle": {
"r": 3,
"magnet": true,
"stroke": "#666",
"strokeWidth": 1,
"fill": "#fff"
}
},
"label": {
"position": "right"
}
},
"bottom": {
"zIndex": 999999999,
"position": "bottom",
"attrs": {
"circle": {
"r": 3,
"magnet": true,
"stroke": "#666",
"strokeWidth": 1,
"fill": "#fff"
}
},
"label": {
"position": "bottom"
}
},
"left": {
"position": "left",
"attrs": {
"circle": {
"r": 3,
"magnet": true,
"stroke": "#666",
"strokeWidth": 1,
"fill": "#fff"
}
}
}
},
"items": [
{
"id": "top",
"group": "top"
},
{
"id": "right",
"group": "right",
"attrs": {
"text": {
"text": "是"
}
}
},
{
"id": "bottom",
"group": "bottom",
"attrs": {
"text": {
"text": "否"
}
}
},
{
"id": "left",
"group": "left"
}
]
},
"id": "5ba8aa3b-5604-426b-9832-92ff730b14d1",
"zIndex": 13
},
{
"position": {
"x": 380,
"y": 489
},
"size": {
"width": 80,
"height": 80
},
"shape": "imove-start",
"data": {
"label": "开始",
"configSchema": "{\"schema\":{\"type\":\"object\",\"properties\":{\"dateRangeSelect_H5O2gc\":{\"title\":\"DateRange\",\"type\":\"range\",\"format\":\"date\",\"description\":\"日期范围选择\"},\"timeSelect_VfVjuV\":{\"title\":\"TimePicker\",\"type\":\"string\",\"format\":\"time\",\"description\":\"时间选择\"}},\"ui:displayType\":\"row\",\"ui:showDescIcon\":true},\"displayType\":\"row\",\"showDescIcon\":true}",
"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": "e35b31b6-3116-41f7-8fcb-c9270bcfb549",
"zIndex": 14
}
]
}

2
packages/core/src/components/schemaForm/index.tsx

@ -23,7 +23,7 @@ const formLayout = {
const SchemaForm: React.FC<IProps> = (props) => {
return (
Object.keys(props.schema).length > 0 ? <Form {...formLayout}>
props.schema && Object.keys(props.schema).length > 0 ? <Form {...formLayout}>
{props.schema?.properties && Object.keys(props.schema.properties).map((key: string) => {
const obj = props.schema.properties[key]
const options: INum[] = obj.enum ? obj.enum.map((item: string, idx: number) => {

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

@ -1,30 +1,41 @@
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect, useRef, useMemo } from 'react';
import Generator from 'fr-generator';
import 'antd/es/modal/style';
import 'antd/es/button/style';
import 'antd/es/message/style';
import JsonView from 'react-json-view';
import { Button, Tabs, Modal, Card, message } from 'antd';
const { TabPane } = Tabs;
import { safeParse } from '../../../../utils';
import CodeEditor from '../../../../components/codeEditor';
import SchemaForm from '../../../../components/schemaForm'
import { compData } from './json'
import styles from './index.module.less';
const { TabPane } = Tabs;
interface IJsonProps {
value: any;
name: string;
title: string;
selectedCell?: any;
isConfig?: boolean; // true为为可视化、json联动输入框,false为普通json输入框
onValueChange: (value: string) => void;
}
const Json: React.FC<IJsonProps> = (props) => {
const { title, value, isConfig, onValueChange } = props;
const { title, value, isConfig, onValueChange, selectedCell } = props;
const [visible, setVisible] = useState<boolean>(false);
const [schema, setSchema] = useState({})
const defaultSchema = useMemo(() => {
if (selectedCell) {
const { configSchema } = selectedCell.getData();
if (configSchema) {
const schema = JSON.parse(configSchema).schema
setSchema(schema)
return schema
}
}
}, [selectedCell])
// events
const onClickEdit = (): void => {
setVisible(true);
@ -63,6 +74,7 @@ const Json: React.FC<IJsonProps> = (props) => {
onOk={onClickOk}
onCancel={onClickCancel}
changeSchema={changeSchema}
defaultSchema={defaultSchema}
/>
</Card>
);
@ -73,15 +85,28 @@ interface IEditorModalProps {
title: string;
value: string;
isConfig?: boolean;
defaultSchema: object;
onOk: (val: string) => void;
onCancel: () => void;
changeSchema: (val: object) => void
}
const EditModal: React.FC<IEditorModalProps> = (props) => {
const { visible, title, value, onOk, onCancel } = props;
const { visible, title, value, onOk, onCancel, defaultSchema } = props;
const [json, setJson] = useState<string>('');
const formRef = useRef<HTMLDivElement>()
const formRef = useRef()
useEffect(() => {
if (defaultSchema && Object.keys(defaultSchema).length > 0) {
let codeObj = {
"schema": Object.assign({}, defaultSchema),
"displayType": "row",
"showDescIcon": true
}
formRef.current && formRef.current.setValue(codeObj)
setJson(JSON.stringify(codeObj, null, 2))
}
}, [formRef.current])
const tabChange = (tab: string) => {
const JSON_TAB = 'JsonTab'
@ -91,7 +116,6 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
}
const form2code = () => {
// @ts-ignore
const formSchema = formRef.current && formRef.current.getValue()
setJson(JSON.stringify(formSchema, null, 2))
}
@ -99,7 +123,6 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
const code2form = () => {
try {
const codeObj = JSON.parse(json)
// @ts-ignore
formRef.current.setValue(codeObj)
} catch (error) {
console.log('can\'t parse code string to form schema, the error is:', error.message);
@ -127,12 +150,13 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
try {
if (props.isConfig) {
if (JSON.stringify(JSON.parse(json)) === '{}') {
// @ts-ignore
const value = formRef.current && formRef.current.getValue()
props.changeSchema(value.schema)
setJson(value)
setJson(JSON.stringify(value, null, 2))
onOk(JSON.stringify(value));
} else {
props.changeSchema(JSON.parse(json).schema)
onOk(json);
}
} else {
JSON.parse(json);

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

@ -86,6 +86,7 @@ const Basic: React.FC<IProps> = (props) => {
<Json
name={'configSchema'}
title={'投放配置'}
selectedCell={selectedCell}
value={configSchema}
isConfig={true}
onValueChange={onChangeConfigSchema}

Loading…
Cancel
Save