Merge pull request #21 from gaoli/en_docs

docs: Add en-US documentation based on the zh-CN version

docs/README.en-US.md

@@ -0,0 +1,30 @@
+# GGEditor Documentation
+
+## API
+
+- [GGEditor](/docs/api/ggEditor.en-US.md)
+
+### Components
+
+- [Flow](/docs/api/flow.en-US.md)
+- [Mind](/docs/api/mind.en-US.md)
+- [Command](/docs/api/command.en-US.md)
+- [Minimap](/docs/api/minimap.en-US.md)
+- [ContextMenu](/docs/api/contextMenu.en-US.md)
+- [Toolbar](/docs/api/toolbar.en-US.md)
+- [ItemPanel](/docs/api/itemPanel.en-US.md)
+- [DetailPanel](/docs/api/detailPanel.en-US.md)
+
+### Registerations
+
+- [RegisterNode](/docs/api/registerNode.en-US.md)
+- [RegisterEdge](/docs/api/registerEdge.en-US.md)
+- [RegisterGroup](/docs/api/registerGroup.en-US.md)
+- [RegisterGuide](/docs/api/registerGuide.en-US.md)
+- [RegisterCommand](/docs/api/registerCommand.en-US.md)
+- [RegisterBehaviour](/docs/api/registerBehaviour.en-US.md)
+
+### Events
+
+- [PageEvents](/docs/api/pageEvents.en-US.md)
+- [EditorEvents](/docs/api/editorEvents.en-US.md)

docs/api/command.en-US.md

@@ -0,0 +1,53 @@
+# Command
+
+A command for different actions.
+
+## Usage
+
+This component can only be nested within the [`<Toolbar />`](./toolbar.en-US.md) or [`<ContextMenu />`](./contextMenu.en-US.md) components.
+
+```jsx
+import GGEditor, { Flow, Command, Toolbar, ContextMenu } from 'gg-editor';
+
+<GGEditor>
+  <Flow />
+  <Toolbar>
+    <Command name="undo"><btuttoon></></Command>
+    <Command name="redo">Redo</Command>
+  </Toolbar>
+  <ContextMenu>
+    <Command name="undo">Undo</Command>
+    <Command name="redo">Redo</Command>
+  </ContextMenu>
+</GGEditor>
+```
+
+## API
+
+| Property | Description | Type | Default |
+| :--- | :--- | :--- | :--- |
+| name | Command name | `string` | - |
+
+## Built-in Commands
+
+|  Command Name | Shortcut Key (Mac) | Shortcut Key (Win) | Applicable Page |
+| :--- | :--- | :--- | :--- |
+| clear | - | - | All |
+| selectAll | `⌘A` | `Ctrl+A` | All |
+| undo | `⌘Z` | `Ctrl + Z` | All |
+| redo | `⇧⌘Z` | `Shift + Ctrl + Z` | All |
+| delete | `Delete` | `Delete` | All |
+| zoomIn | `⌘=` | `Ctrl + =` | All |
+| zoomOut | `⌘-` | `Ctrl + -` | All |
+| autoZoom | - | - | All |
+| resetZoom | `⌘0` | `Ctrl + 0` | All |
+| toFront | - | - | All |
+| toBack | - | - | All |
+| copy | `⌘C` | `Ctrl + C` | Flow |
+| paste | `⌘V` | `Ctrl + V` | Flow |
+| multiSelect | - | - | Flow |
+| addGroup | `⌘G` | `Ctrl + G` | Flow |
+| unGroup | `⇧⌘G` | `Shift + Ctrl + G` | Flow |
+| append | `Enter` | `Enter` | Mind |
+| appendChild | `Tab` | `Tab` | Mind |
+| collaspeExpand | `⌘/` | `Ctrl + /` | Mind |

docs/api/contextMenu.en-US.md

@@ -0,0 +1,19 @@
+# ContextMenu
+
+A right-click menu that can show or hide the menu, configuate with the commands button and control its available and disabled states.
+
+## Usage
+
+It must be used with the [`<Command />`](./command.en-US.md) component.
+
+```jsx
+import GGEditor, { Flow, Command, ContextMenu } from 'gg-editor';
+
+<GGEditor>
+  <Flow />
+  <ContextMenu>
+    <Command name="undo">Undo</Command>
+    <Command name="redo">Redo</Command>
+  </ContextMenu>
+</GGEditor>
+```

docs/api/detailPannel.en-US.md

@@ -0,0 +1,52 @@
+# DetailPanel
+
+A panel shows the detailed properties of the selected item.
+
+## Usage
+
+The `DetailPanel` displays the corresponding panel based on the various state. For example, it shows the `NodePanel` when the nodes are selected.
+
+```jsx
+import GGEditor, {
+  Flow,
+  DetailPanel,
+  NodePanel,
+  EdgePanel,
+  GroupPanel,
+  MultiPanel,
+  CanvasPanel,
+} from 'gg-editor';
+
+<GGEditor>
+  <Flow />
+  <DetailPanel>
+    <NodePanel>
+      <NodeDetail />
+    </NodePanel>
+    <EdgePanel />
+    <GroupPanel />
+    <MultiPanel />
+    <CanvasPanel />
+  </DetailPanel>
+</GGEditor>
+```
+
+```jsx
+class NodeDetail extends React.Component {
+  render() {
+    console.log('this.props', this.props);
+  }
+}
+```
+
+## API
+
+The properties of the `DetailPanel` sub-components.
+
+| Attribute | Description | Type |
+| :--- | :--- | :--- |
+| getSelected | A function to get the currently selected item. | `function` |
+| addItem | A function to add a new item. | `function(type, model)` |
+| removeItem | A function to delete the item. | `function(item)` |
+| updateItem | A function to update the item. | `function(item, model)` |
+| findItem | A function to find the item. | `function(id)` |

docs/api/editorEvents.en-US.md

@@ -0,0 +1,29 @@
+# Editor Events
+
+## SyntheticEvent
+
+```jsx
+import GGEditor, { Flow } from 'gg-editor';
+
+<GGEditor
+  onBeforeCommandExecute={({ command }) => {
+    console.log('command', command);
+  }}
+>
+  <Flow />
+</GGEditor>
+```
+
+## Event List
+
+| Event Name | Description |
+| :--- | :--- |
+| onBeforeCommandExecute | A function is called before executing the command. |
+| onAfterCommandExecute | A function is called after executing the command. |
+
+## Commands
+
+| Command Property | Description | Type |
+| :--- | :--- | :--- |
+| name | The name of the command. | `string` |
+| queue | It returns `true` or `false` to indicate whether the command entered the command queue. Entering the command queue to perform the undo and redo commands. | `boolean` |

docs/api/flow.en-US.md

@@ -0,0 +1,54 @@
+# Flow
+
+The Flow graph.
+
+## Usage
+
+```jsx
+import GGEditor, { Flow } from 'gg-editor';
+
+<GGEditor>
+  <Flow />
+</GGEditor>
+```
+
+## API
+
+| Property | Description | Type | Default |
+| :--- | :--- | :--- | :--- |
+| data | The initial data. | `object` | - |
+| graph | To configurate the graph. See more on [G6 Graph API (Chinese)](https://antv.alipay.com/zh-cn/g6/1.x/api/graph.html). | `object` | - |
+| align | To set the alignment. | [`object`](#Align) | - |
+| grid | To set the grid. | [`object`](#Grid) | - |
+| shortcut | To set the shortcut keys. See more on [Built-in Commands](./command.en-US.md# Built-in Commands). | [`object`](#Shortcut) | - |
+| noEndEdge | To set if the no-end-edge is supported. | `boolean` | `true` |
+
+### Align
+
+| Property | Description | Type | Default |
+| :--- | :--- | :--- | :--- |
+| line | The alignment of the line style. | `object` | - |
+| item | The alignment of an item. | `true` `false` `horizontal` `vertical` `center` | - |
+| grid | The alignment of a grid. | `true` `false` `cc` `tl` | - |
+
+### Grid
+
+| Property | Description | Type | Default |
+| :--- | :--- | :--- | :--- |
+| cell | The size of the grid. | `number` | - |
+| line | The line style of the grid. | `object` | - |
+
+### Shortcut
+
+Example:
+
+```jsx
+  shortcut: {
+    zoomIn: true,   // To turn on the zoom-in shortcut
+    zoomOut: false, // To turn off the zoom-out shortcut
+  }
+```
+
+## Events
+
+See more on [PageEvents](./pageEvents.en-US.md).

docs/api/ggEditor.en-US.md

@@ -0,0 +1,17 @@
+# GGEditor
+
+An editor conponent for the graph.
+
+## Usage
+
+```jsx
+import GGEditor, { Flow } from 'gg-editor';
+
+<GGEditor>
+  <Flow />
+</GGEditor>
+```
+
+## Events
+
+See more on [EditorEvents](./editorEvents.en-US.md).

docs/api/itemPanel.en-US.md

@@ -0,0 +1,39 @@
+# ItemPanel
+
+A panel of the item.
+
+## Usage
+
+It must be used with the `<Item />` component. If `<Item />` contains the `src` props, the item will display that image as overview.
+
+```jsx
+import GGEditor, { Flow, Item, ItemPanel } from 'gg-editor';
+
+<GGEditor>
+  <Flow />
+  <ItemPanel>
+    <Item
+      type="node"
+      size="72*72"
+      shape="flow-circle"
+      model={{
+        color: '#FA8C16',
+        label: 'Item 1',
+      }}
+      src="https://gw.alipayobjects.com/zos/rmsportal/ZnPxbVjKYADMYxkTQXRi.svg"
+    />
+  </ItemPanel>
+</GGEditor>
+```
+
+## API
+
+### Item
+
+| Property | Description | Type | Default |
+| :--- | :--- | :--- | :--- |
+| type | **required** The type of an item. Options: `node`, `edge`. | `string` | - |
+| size | **required** The size of an item. Format: `50*50`. | `string` | - |
+| shape | **required** The shape of an item. Built-in shapes: [node](./registerNode.en-US.md#Built-in Nodes), [edge](./registerEdge.en-US.md#Built-in Edges). | `string` | - |
+| model | The initial model of an item. | `object` | - |
+| src | The overview image source of an item. | `string` | - |

docs/api/mind.en-US.md

@@ -0,0 +1,37 @@
+# Mind
+
+The mind map format of graph.
+
+## Usage
+
+```jsx
+import GGEditor, { Mind } from 'gg-editor';
+
+<GGEditor>
+  <Mind />
+</GGEditor>
+```
+
+## API
+
+| Property | Description | Type | Default |
+| :--- | :--- | :--- | :--- |
+| data | The initial data. | `object` | - |
+| graph | To configurate the graph. See more on [G6 Graph API (Chinese)](https://antv.alipay.com/zh-cn/g6/1.x/api/graph.html). | `object` | - |
+| shortcut | To set the shortcut key [Built-in Commands](./command.en-US.md#Built-in Commands). | [`object`](#Shortcut) | - |
+
+
+### Shortcut
+
+Exmaple:
+
+```jsx
+  shortcut: {
+    zoomIn: true,   // To turn on the zoom-in shortcut
+    zoomOut: false, // To turn off the zoom-out shortcut
+  }
+```
+
+## Events
+
+See more on [PageEvents](./pageEvents.en-US.md).

docs/api/minimap.en-US.md

@@ -0,0 +1,24 @@
+# Minimap
+
+A mini-map that will auto-resize if its width and height have not been specified.
+
+## Usage
+
+```jsx
+import GGEditor, { Flow, Minimap } from 'gg-editor';
+
+<GGEditor>
+  <Flow />
+  <Minimap width={200} height={200} />
+</GGEditor>
+```
+
+## API
+
+| Property | Description | Type | Default |
+| :--- | :--- | :--- | :--- |
+| container | The id of the container. | `string` | - |
+| width | The width of the container. | `number` | - |
+| height | The height of the container. | `number` | - |
+| viewportWindowStyle | The window style of the viewport. See more on [G Drawing Properties (Chinese)](https://antv.alipay.com/zh-cn/g2/3.x/api/graphic.html). | `object` | - |
+| viewportBackStyle | The background style of the viewport. See more on [G Drawing Properties (Chinese)](https://antv.alipay.com/zh-cn/g2/3.x/api/graphic.html). | `object` | - |