Browse Source

feat: 添加 example

master
suanmei 5 years ago
committed by 拾邑
parent
commit
05c771b349
  1. 16
      example/.editorconfig
  2. 20
      example/.gitignore
  3. 8
      example/.prettierignore
  4. 11
      example/.prettierrc
  5. 10
      example/.umirc.ts
  6. 15
      example/README.md
  7. 0
      example/mock/.gitkeep
  8. 39
      example/package.json
  9. 7
      example/src/pages/index.less
  10. 48
      example/src/pages/index.tsx
  11. 25
      example/tsconfig.json
  12. 8
      example/typings.d.ts
  13. 1
      package.json
  14. 6
      packages/core/src/components/schema-form.tsx
  15. 9
      packages/core/src/components/sidebar.tsx
  16. 16
      packages/core/src/components/toolbar.tsx
  17. 3
      packages/core/src/data/commands.tsx
  18. 27
      packages/core/src/index.tsx

16
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

20
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

8
example/.prettierignore

@ -0,0 +1,8 @@
**/*.md
**/*.svg
**/*.ejs
**/*.html
package.json
.umi
.umi-production
.umi-test

11
example/.prettierrc

@ -0,0 +1,11 @@
{
"singleQuote": true,
"trailingComma": "all",
"printWidth": 80,
"overrides": [
{
"files": ".prettierrc",
"options": { "parser": "json" }
}
]
}

10
example/.umirc.ts

@ -0,0 +1,10 @@
import { defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
routes: [
{ path: '/', component: '@/pages/index' },
],
});

15
example/README.md

@ -0,0 +1,15 @@
# umi project
## Getting Started
Install dependencies,
```bash
$ yarn
```
Start the dev server,
```bash
$ yarn start
```

0
example/mock/.gitkeep

39
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"
}
}

7
example/src/pages/index.less

@ -0,0 +1,7 @@
.normal {
}
.title {
background: rgb(121, 242, 157);
}

48
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 (
<Wrapper>
<IMove cells={cells} onSave={onSave} />
</Wrapper>
);
}
export default Arrange;

25
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"
]
}

8
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<SVGSVGElement>): React.ReactElement
const url: string
export default url
}

1
package.json

@ -42,7 +42,6 @@
"dependencies": { "dependencies": {
"@babel/runtime": "^7.9.2", "@babel/runtime": "^7.9.2",
"@babel/runtime-corejs3": "^7.9.2", "@babel/runtime-corejs3": "^7.9.2",
"@imove/core": "^0.1.6",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"ora": "^4.0.3" "ora": "^4.0.3"
} }

6
packages/core/src/components/schema-form.tsx

@ -52,11 +52,7 @@ class SchemaForm extends React.Component<SchemaFormProps, SchemaFormState> {
return ( return (
<Form labelCol={labelCol} initialValues={data}> <Form labelCol={labelCol} initialValues={data}>
{Object.keys(properties).map((key) => ( {Object.keys(properties).map((key) => (
<Item <Item key={key} label={properties[key].title} name={`input.${properties[key].title}`}>
key={properties[key].title}
label={properties[key].title}
name={`input.${properties[key].title}`}
>
{properties[key].type === 'string' ? ( {properties[key].type === 'string' ? (
<Input <Input
onChange={(e): void => { onChange={(e): void => {

9
packages/core/src/components/sidebar.tsx

@ -4,7 +4,7 @@ import { jsx, css } from '@emotion/core';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { Graph } from '@antv/x6'; import { Graph } from '@antv/x6';
import { Collapse } from 'antd'; import { Collapse } from 'antd';
import { generals, gists, DataItem } from '../data/cells'; import { generals, DataItem } from '../data/cells';
import patchDnd from '../utils/patch-dnd'; import patchDnd from '../utils/patch-dnd';
import Cells from './cells'; import Cells from './cells';
import 'antd/lib/collapse/style'; import 'antd/lib/collapse/style';
@ -34,6 +34,7 @@ const ToolPanel = styled(Panel)`
interface SidebarProps { interface SidebarProps {
graph: Graph; graph: Graph;
cells: DataItem[];
} }
const CellWrapper = ({ data, children }: { data: DataItem; children: ReactNode }): JSX.Element => { 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<HTMLDivElement>(null); const generalRef = useRef<HTMLDivElement>(null);
const gistRef = useRef<HTMLDivElement>(null); const gistRef = useRef<HTMLDivElement>(null);
@ -86,7 +87,7 @@ const Sidebar = ({ graph }: SidebarProps): JSX.Element => {
patchDnd(generalContainer, graph, generals); patchDnd(generalContainer, graph, generals);
const gistContainer = gistRef.current; const gistContainer = gistRef.current;
patchDnd(gistContainer, graph, gists); patchDnd(gistContainer, graph, cells);
}); });
return ( return (
@ -112,7 +113,7 @@ const Sidebar = ({ graph }: SidebarProps): JSX.Element => {
</ToolPanel> </ToolPanel>
<ToolPanel header="业务元件" key="gist"> <ToolPanel header="业务元件" key="gist">
<div ref={gistRef}> <div ref={gistRef}>
{gists.map((cell) => { {cells.map((cell) => {
const Cell = Cells[cell.type]; const Cell = Cells[cell.type];
return ( return (
<CellWrapper key={`${cell.type}${cell.label}`} data={cell}> <CellWrapper key={`${cell.type}${cell.label}`} data={cell}>

16
packages/core/src/components/toolbar.tsx

@ -8,6 +8,7 @@ import 'antd/lib/tooltip/style';
export interface ToolbarProps { export interface ToolbarProps {
graph: Graph; graph: Graph;
onSave: (data: { nodes: any; edges: any }) => void;
} }
const Group = styled.div` 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 undoManager = UndoManager.create(graph);
const commands = getCommands(graph, undoManager); const commands = getCommands(graph, undoManager);
@ -60,7 +61,18 @@ const Toolbar = ({ graph }: ToolbarProps): JSX.Element => {
<Group key={items.map((i) => i.name).join('-')}> <Group key={items.map((i) => i.name).join('-')}>
{items.map((item) => ( {items.map((item) => (
<Tooltip title={item.tooltip} key={item.name}> <Tooltip title={item.tooltip} key={item.name}>
<Item onClick={item.handler}>{item.icon}</Item> <Item
onClick={(): void => {
if (item.name === 'save') {
const graphData = graph.toJSON();
onSave(graphData);
return;
}
item.handler();
}}
>
{item.icon}
</Item>
</Tooltip> </Tooltip>
))} ))}
</Group> </Group>

3
packages/core/src/data/commands.tsx

@ -81,8 +81,7 @@ export default function getCommands(graph: Graph, undoManager: UndoManager): Com
tooltip: '保存', tooltip: '保存',
shortcut: `${ctrlKey} + S`, shortcut: `${ctrlKey} + S`,
handler: (): void => { handler: (): void => {
const graphData = graph.toJSON(); // code
console.log(JSON.stringify(graphData));
}, },
}, },
], ],

27
packages/core/src/index.tsx

@ -7,14 +7,11 @@ import Sidebar from './components/sidebar';
import Toolbar from './components/toolbar'; import Toolbar from './components/toolbar';
import Setting from './components/setting'; import Setting from './components/setting';
import createGraph from './utils/create-graph'; import createGraph from './utils/create-graph';
import { DataItem } from './data/cells';
import 'antd/lib/layout/style'; import 'antd/lib/layout/style';
Shape.register('react', ReactShape, true); Shape.register('react', ReactShape, true);
export interface CoreState {
inited: boolean;
}
const { Header, Sider, Content } = Layout; const { Header, Sider, Content } = Layout;
const IMoveLayout = styled(Layout)` const IMoveLayout = styled(Layout)`
@ -49,12 +46,21 @@ const ToolWrapper = styled.div`
background: #fff; 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<CoreProps, CoreState> {
private graph: Graph | null = null; private graph: Graph | null = null;
private container = React.createRef<HTMLDivElement>(); private container = React.createRef<HTMLDivElement>();
constructor(props: {}) { constructor(props: CoreProps) {
super(props); super(props);
this.state = { this.state = {
inited: false, inited: false,
@ -75,15 +81,20 @@ class Core extends React.Component<{}, CoreState> {
render(): JSX.Element { render(): JSX.Element {
const { inited } = this.state; const { inited } = this.state;
const { cells, onSave } = this.props;
return ( return (
<IMoveLayout> <IMoveLayout>
<IMoveHeader> <IMoveHeader>
<IMoveTitle>iMove</IMoveTitle> <IMoveTitle>iMove</IMoveTitle>
</IMoveHeader> </IMoveHeader>
<IMoveLayout> <IMoveLayout>
<IMoveSider>{this.graph && inited && <Sidebar graph={this.graph} />}</IMoveSider> <IMoveSider>
{this.graph && inited && <Sidebar graph={this.graph} cells={cells} />}2
</IMoveSider>
<IMoveContent> <IMoveContent>
<ToolWrapper>{this.graph && inited && <Toolbar graph={this.graph} />}</ToolWrapper> <ToolWrapper>
{this.graph && inited && <Toolbar graph={this.graph} onSave={onSave} />}
</ToolWrapper>
<div ref={this.container} tabIndex={-1} /> <div ref={this.container} tabIndex={-1} />
</IMoveContent> </IMoveContent>
<IMoveSider width="300"> <IMoveSider width="300">

Loading…
Cancel
Save