suanmei
5 years ago
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 * 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 => { |
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 ( |
return ( |
||||
<div> |
<IMoveLayout> |
||||
2 |
<IMoveHeader> |
||||
<span role="img" aria-label="ok"> |
<h2>iMove</h2> |
||||
👌 |
</IMoveHeader> |
||||
</span> |
<IMoveLayout> |
||||
2 |
<IMoveSider>{inited && <Toolbar />}</IMoveSider> |
||||
</div> |
<Content> |
||||
|
<div ref={this.container} /> |
||||
|
</Content> |
||||
|
<IMoveSider>Sider</IMoveSider> |
||||
|
</IMoveLayout> |
||||
|
</IMoveLayout> |
||||
); |
); |
||||
}; |
} |
||||
|
} |
||||
|
|
||||
export default Core; |
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