committed by
							
								 拾邑
								拾邑
							
						
					
				
				 13 changed files with 1417 additions and 21 deletions
			
			
		
								
									
										File diff suppressed because it is too large
									
								
							
						
					| @ -0,0 +1,52 @@ | |||
| /** @jsx jsx */ | |||
| import { jsx, css } from '@emotion/core'; | |||
| import styled from '@emotion/styled'; | |||
| import { Collapse } from 'antd'; | |||
| import 'antd/lib/collapse/style'; | |||
| 
 | |||
| const { Panel } = Collapse; | |||
| 
 | |||
| const ToolCollapse = styled(Collapse)` | |||
|   border: none; | |||
| `;
 | |||
| 
 | |||
| const ToolPanel = styled(Panel)` | |||
|   margin-right: -1px; | |||
| 
 | |||
|   .ant-collapse-content-box { | |||
|     margin-bottom: -1px; | |||
|     padding: 0; | |||
|     overflow: hidden; | |||
|   } | |||
| `;
 | |||
| 
 | |||
| const Cell = styled.div` | |||
|   box-sizing: border-box; | |||
|   display: inline-block; | |||
|   width: 50%; | |||
|   height: 100px; | |||
|   border-right: 1px solid #ddd; | |||
|   border-bottom: 1px solid #ddd; | |||
| `;
 | |||
| 
 | |||
| const Toolbar = (): JSX.Element => { | |||
|   return ( | |||
|     <div | |||
|       css={css` | |||
|         height: 100%; | |||
|         overflow: auto; | |||
|         border-right: 1px solid #ddd; | |||
|       `}
 | |||
|     > | |||
|       <ToolCollapse defaultActiveKey={['1']}> | |||
|         <ToolPanel header="General" key="1"> | |||
|           <Cell>2</Cell> | |||
|           <Cell>2</Cell> | |||
|           <Cell>2</Cell> | |||
|         </ToolPanel> | |||
|       </ToolCollapse> | |||
|     </div> | |||
|   ); | |||
| }; | |||
| 
 | |||
| export default Toolbar; | |||
| @ -1,15 +1,71 @@ | |||
| import * as React from 'react'; | |||
| import { Layout } from 'antd'; | |||
| import { Graph, DomEvent } from '@antv/x6'; | |||
| import styled from '@emotion/styled'; | |||
| import Toolbar from './components/toolbar'; | |||
| import { createGraph } from './utils/create-graph'; | |||
| import 'antd/lib/layout/style'; | |||
| 
 | |||
| const Core = (): JSX.Element => { | |||
|   return ( | |||
|     <div> | |||
|       2 | |||
|       <span role="img" aria-label="ok"> | |||
|         👌 | |||
|       </span> | |||
|       2 | |||
|     </div> | |||
|   ); | |||
| }; | |||
| export interface CoreState { | |||
|   inited: boolean; | |||
| } | |||
| 
 | |||
| const { Header, Sider, Content } = Layout; | |||
| 
 | |||
| const IMoveLayout = styled(Layout)` | |||
|   height: 100%; | |||
| `;
 | |||
| 
 | |||
| const IMoveHeader = styled(Header)` | |||
|   background: #fff; | |||
|   border-bottom: 1px solid #ddd; | |||
| `;
 | |||
| 
 | |||
| const IMoveSider = styled(Sider)` | |||
|   background: #fff; | |||
| `;
 | |||
| 
 | |||
| class Core extends React.Component<{}, CoreState> { | |||
|   private graph: Graph | null = null; | |||
| 
 | |||
|   private container = React.createRef<HTMLDivElement>(); | |||
| 
 | |||
|   constructor(props: {}) { | |||
|     super(props); | |||
|     this.state = { | |||
|       inited: false, | |||
|     }; | |||
|   } | |||
| 
 | |||
|   componentDidMount(): void { | |||
|     const container = this.container.current; | |||
|     if (container) { | |||
|       DomEvent.disableContextMenu(container); | |||
|       this.graph = createGraph(container); | |||
|       this.graph.center(); | |||
|       this.setState({ | |||
|         inited: true, | |||
|       }); | |||
|     } | |||
|   } | |||
| 
 | |||
|   render(): JSX.Element { | |||
|     const { inited } = this.state; | |||
|     return ( | |||
|       <IMoveLayout> | |||
|         <IMoveHeader> | |||
|           <h2>iMove</h2> | |||
|         </IMoveHeader> | |||
|         <IMoveLayout> | |||
|           <IMoveSider>{inited && <Toolbar />}</IMoveSider> | |||
|           <Content> | |||
|             <div ref={this.container} /> | |||
|           </Content> | |||
|           <IMoveSider>Sider</IMoveSider> | |||
|         </IMoveLayout> | |||
|       </IMoveLayout> | |||
|     ); | |||
|   } | |||
| } | |||
| 
 | |||
| export default Core; | |||
|  | |||
| @ -0,0 +1,16 @@ | |||
| import { Graph } from '@antv/x6'; | |||
| 
 | |||
| export function createGraph(container: HTMLDivElement): Graph { | |||
|   return new Graph(container, { | |||
|     rotate: false, | |||
|     resize: true, | |||
|     grid: { | |||
|       type: 'dot', | |||
|       color: '#bcbcbc', | |||
|     }, | |||
|   }); | |||
| } | |||
| 
 | |||
| export function A(): void { | |||
|   // code
 | |||
| } | |||
| @ -0,0 +1,11 @@ | |||
| # `transform` | |||
| 
 | |||
| > TODO: description | |||
| 
 | |||
| ## Usage | |||
| 
 | |||
| ``` | |||
| const transform = require('transform'); | |||
| 
 | |||
| // TODO: DEMONSTRATE API | |||
| ``` | |||
| @ -0,0 +1,32 @@ | |||
| { | |||
|   "name": "@imove/transform", | |||
|   "version": "0.1.10", | |||
|   "description": "transform graph to schema", | |||
|   "keywords": [ | |||
|     "json-schema" | |||
|   ], | |||
|   "author": "suanmei <mr_suanmei@163.com>", | |||
|   "homepage": "https://github.com/suanmei/iMove#readme", | |||
|   "license": "MIT", | |||
|   "main": "dist/transform.common.js", | |||
|   "directories": { | |||
|     "lib": "lib", | |||
|     "test": "__tests__" | |||
|   }, | |||
|   "files": [ | |||
|     "lib" | |||
|   ], | |||
|   "publishConfig": { | |||
|     "registry": "http://registry.npmjs.org/" | |||
|   }, | |||
|   "repository": { | |||
|     "type": "git", | |||
|     "url": "git+https://github.com/suanmei/iMove.git" | |||
|   }, | |||
|   "scripts": { | |||
|     "test": "echo \"Error: run tests from root\" && exit 1" | |||
|   }, | |||
|   "bugs": { | |||
|     "url": "https://github.com/suanmei/iMove/issues" | |||
|   } | |||
| } | |||
| @ -0,0 +1,6 @@ | |||
| #!/usr/bin/env node
 | |||
| 
 | |||
| const path = require('path'); | |||
| const prePublish = require('../../../scripts/prepublish'); | |||
| 
 | |||
| prePublish('@imove/transform', path.join(__dirname, '../')); | |||
					Loading…
					
					
				
		Reference in new issue