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 { 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 ( |
|||
<div> |
|||
2 |
|||
<span role="img" aria-label="ok"> |
|||
👌 |
|||
</span> |
|||
2 |
|||
</div> |
|||
<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