diff --git a/example/.editorconfig b/example/.editorconfig new file mode 100755 index 0000000..7e3649a --- /dev/null +++ b/example/.editorconfig @@ -0,0 +1,16 @@ +# http://editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false + +[Makefile] +indent_style = tab diff --git a/example/.gitignore b/example/.gitignore new file mode 100644 index 0000000..bee1cf6 --- /dev/null +++ b/example/.gitignore @@ -0,0 +1,20 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/npm-debug.log* +/yarn-error.log +/yarn.lock +/package-lock.json + +# production +/dist + +# misc +.DS_Store + +# umi +/src/.umi +/src/.umi-production +/src/.umi-test +/.env.local diff --git a/example/.prettierignore b/example/.prettierignore new file mode 100644 index 0000000..0d4222f --- /dev/null +++ b/example/.prettierignore @@ -0,0 +1,8 @@ +**/*.md +**/*.svg +**/*.ejs +**/*.html +package.json +.umi +.umi-production +.umi-test diff --git a/example/.prettierrc b/example/.prettierrc new file mode 100644 index 0000000..94beb14 --- /dev/null +++ b/example/.prettierrc @@ -0,0 +1,11 @@ +{ + "singleQuote": true, + "trailingComma": "all", + "printWidth": 80, + "overrides": [ + { + "files": ".prettierrc", + "options": { "parser": "json" } + } + ] +} diff --git a/example/.umirc.ts b/example/.umirc.ts new file mode 100644 index 0000000..af5394b --- /dev/null +++ b/example/.umirc.ts @@ -0,0 +1,10 @@ +import { defineConfig } from 'umi'; + +export default defineConfig({ + nodeModulesTransform: { + type: 'none', + }, + routes: [ + { path: '/', component: '@/pages/index' }, + ], +}); diff --git a/example/README.md b/example/README.md new file mode 100644 index 0000000..07afeb7 --- /dev/null +++ b/example/README.md @@ -0,0 +1,15 @@ +# umi project + +## Getting Started + +Install dependencies, + +```bash +$ yarn +``` + +Start the dev server, + +```bash +$ yarn start +``` diff --git a/example/mock/.gitkeep b/example/mock/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/example/package.json b/example/package.json new file mode 100644 index 0000000..5e40f10 --- /dev/null +++ b/example/package.json @@ -0,0 +1,39 @@ +{ + "private": true, + "scripts": { + "start": "umi dev", + "build": "umi build", + "postinstall": "umi generate tmp", + "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'", + "test": "umi-test", + "test:coverage": "umi-test --coverage" + }, + "gitHooks": { + "pre-commit": "lint-staged" + }, + "lint-staged": { + "*.{js,jsx,less,md,json}": [ + "prettier --write" + ], + "*.ts?(x)": [ + "prettier --parser=typescript --write" + ] + }, + "dependencies": { + "@antv/x6": "^0.4.7", + "@antv/x6-react-shape": "^0.2.2", + "@emotion/core": "^10.0.28", + "@emotion/styled": "^10.0.27", + "@imove/core": "^0.3.0", + "@imove/json-schema-editor": "^0.3.2", + "@umijs/preset-react": "1.x", + "@umijs/test": "^3.2.2", + "antd": "^4.2.4", + "lint-staged": "^10.0.7", + "prettier": "^1.19.1", + "react": "^16.12.0", + "react-dom": "^16.12.0", + "umi": "^3.2.2", + "yorkie": "^2.0.0" + } +} diff --git a/example/src/pages/index.less b/example/src/pages/index.less new file mode 100644 index 0000000..fd9812c --- /dev/null +++ b/example/src/pages/index.less @@ -0,0 +1,7 @@ + +.normal { +} + +.title { + background: rgb(121, 242, 157); +} diff --git a/example/src/pages/index.tsx b/example/src/pages/index.tsx new file mode 100644 index 0000000..ad8e3f9 --- /dev/null +++ b/example/src/pages/index.tsx @@ -0,0 +1,48 @@ +import * as React from 'react'; +import IMove from '@imove/core'; +import styled from '@emotion/styled'; +import { DataItem } from '@imove/core/dist/types/data/cells'; + +const cells: DataItem[] = [ + { + label: '查询是否登录', + type: 'decision', + style: { + width: 48, + height: 30, + scale: 2, + }, + data: { + code: + 'import Base from "@ali/rax-base";\n\nconst queryLogin = (params) => {\n return new Promise((resolve, reject) => {\n Base.getUser((data) => {\n if (data && data.userNumberId) {\n resolve(true);\n } else {\n reject(false);\n }\n });\n });\n};\n\nexport default queryLogin;\n', + dependencies: [ + { + '@ali/rax-base': '^2.1.9', + }, + ], + }, + schema: { + type: 'object', + required: [], + properties: {}, + }, + }, +]; + +const onSave = (data: { nodes: any; edges: any }): void => { + console.log(data); +}; + +const Wrapper = styled.div` + height: 100vh; +`; + +function Arrange(): JSX.Element { + return ( + + + + ); +} + +export default Arrange; diff --git a/example/tsconfig.json b/example/tsconfig.json new file mode 100644 index 0000000..7576cde --- /dev/null +++ b/example/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "esnext", + "module": "esnext", + "moduleResolution": "node", + "importHelpers": true, + "jsx": "react", + "esModuleInterop": true, + "sourceMap": true, + "baseUrl": "./", + "strict": true, + "paths": { + "@/*": ["src/*"], + "@@/*": ["src/.umi/*"] + }, + "allowSyntheticDefaultImports": true + }, + "include": [ + "mock/**/*", + "src/**/*", + "config/**/*", + ".umirc.ts", + "typings.d.ts" + ] +} diff --git a/example/typings.d.ts b/example/typings.d.ts new file mode 100644 index 0000000..5df84ee --- /dev/null +++ b/example/typings.d.ts @@ -0,0 +1,8 @@ +declare module '*.css'; +declare module '*.less'; +declare module "*.png"; +declare module '*.svg' { + export function ReactComponent(props: React.SVGProps): React.ReactElement + const url: string + export default url +} diff --git a/package.json b/package.json index c16c360..43c3016 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,6 @@ "dependencies": { "@babel/runtime": "^7.9.2", "@babel/runtime-corejs3": "^7.9.2", - "@imove/core": "^0.1.6", "core-js": "^3.6.5", "ora": "^4.0.3" } diff --git a/packages/core/src/components/schema-form.tsx b/packages/core/src/components/schema-form.tsx index 9eedd96..075d7c6 100644 --- a/packages/core/src/components/schema-form.tsx +++ b/packages/core/src/components/schema-form.tsx @@ -52,11 +52,7 @@ class SchemaForm extends React.Component { return (
{Object.keys(properties).map((key) => ( - + {properties[key].type === 'string' ? ( { diff --git a/packages/core/src/components/sidebar.tsx b/packages/core/src/components/sidebar.tsx index 31619a0..85fdc70 100644 --- a/packages/core/src/components/sidebar.tsx +++ b/packages/core/src/components/sidebar.tsx @@ -4,7 +4,7 @@ import { jsx, css } from '@emotion/core'; import styled from '@emotion/styled'; import { Graph } from '@antv/x6'; import { Collapse } from 'antd'; -import { generals, gists, DataItem } from '../data/cells'; +import { generals, DataItem } from '../data/cells'; import patchDnd from '../utils/patch-dnd'; import Cells from './cells'; import 'antd/lib/collapse/style'; @@ -34,6 +34,7 @@ const ToolPanel = styled(Panel)` interface SidebarProps { graph: Graph; + cells: DataItem[]; } const CellWrapper = ({ data, children }: { data: DataItem; children: ReactNode }): JSX.Element => { @@ -77,7 +78,7 @@ const CellWrapper = ({ data, children }: { data: DataItem; children: ReactNode } ); }; -const Sidebar = ({ graph }: SidebarProps): JSX.Element => { +const Sidebar = ({ graph, cells }: SidebarProps): JSX.Element => { const generalRef = useRef(null); const gistRef = useRef(null); @@ -86,7 +87,7 @@ const Sidebar = ({ graph }: SidebarProps): JSX.Element => { patchDnd(generalContainer, graph, generals); const gistContainer = gistRef.current; - patchDnd(gistContainer, graph, gists); + patchDnd(gistContainer, graph, cells); }); return ( @@ -112,7 +113,7 @@ const Sidebar = ({ graph }: SidebarProps): JSX.Element => {
- {gists.map((cell) => { + {cells.map((cell) => { const Cell = Cells[cell.type]; return ( diff --git a/packages/core/src/components/toolbar.tsx b/packages/core/src/components/toolbar.tsx index 957654a..c39d3d6 100644 --- a/packages/core/src/components/toolbar.tsx +++ b/packages/core/src/components/toolbar.tsx @@ -8,6 +8,7 @@ import 'antd/lib/tooltip/style'; export interface ToolbarProps { graph: Graph; + onSave: (data: { nodes: any; edges: any }) => void; } const Group = styled.div` @@ -48,7 +49,7 @@ const Item = styled.span` } `; -const Toolbar = ({ graph }: ToolbarProps): JSX.Element => { +const Toolbar = ({ graph, onSave }: ToolbarProps): JSX.Element => { const undoManager = UndoManager.create(graph); const commands = getCommands(graph, undoManager); @@ -60,7 +61,18 @@ const Toolbar = ({ graph }: ToolbarProps): JSX.Element => { i.name).join('-')}> {items.map((item) => ( - {item.icon} + { + if (item.name === 'save') { + const graphData = graph.toJSON(); + onSave(graphData); + return; + } + item.handler(); + }} + > + {item.icon} + ))} diff --git a/packages/core/src/data/commands.tsx b/packages/core/src/data/commands.tsx index cb56f17..bf12726 100644 --- a/packages/core/src/data/commands.tsx +++ b/packages/core/src/data/commands.tsx @@ -81,8 +81,7 @@ export default function getCommands(graph: Graph, undoManager: UndoManager): Com tooltip: '保存', shortcut: `${ctrlKey} + S`, handler: (): void => { - const graphData = graph.toJSON(); - console.log(JSON.stringify(graphData)); + // code }, }, ], diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx index dce45d0..dc0fc96 100644 --- a/packages/core/src/index.tsx +++ b/packages/core/src/index.tsx @@ -7,14 +7,11 @@ import Sidebar from './components/sidebar'; import Toolbar from './components/toolbar'; import Setting from './components/setting'; import createGraph from './utils/create-graph'; +import { DataItem } from './data/cells'; import 'antd/lib/layout/style'; Shape.register('react', ReactShape, true); -export interface CoreState { - inited: boolean; -} - const { Header, Sider, Content } = Layout; const IMoveLayout = styled(Layout)` @@ -49,12 +46,21 @@ const ToolWrapper = styled.div` background: #fff; `; -class Core extends React.Component<{}, CoreState> { +interface CoreProps { + cells: DataItem[]; + onSave: (data: { nodes: any; edges: any }) => void; +} + +interface CoreState { + inited: boolean; +} + +class Core extends React.Component { private graph: Graph | null = null; private container = React.createRef(); - constructor(props: {}) { + constructor(props: CoreProps) { super(props); this.state = { inited: false, @@ -75,15 +81,20 @@ class Core extends React.Component<{}, CoreState> { render(): JSX.Element { const { inited } = this.state; + const { cells, onSave } = this.props; return ( iMove - {this.graph && inited && } + + {this.graph && inited && }2 + - {this.graph && inited && } + + {this.graph && inited && } +