index.d.ts 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. declare module 'gg-editor' {
  2. export interface Align {
  3. line?: any
  4. item?: boolean | 'horizontal' | 'vertical' | 'center'
  5. grid?: boolean | 'cc' | 'tl'
  6. }
  7. export interface Grid {
  8. cell?: number
  9. line?: any
  10. }
  11. export interface Shortcut {
  12. clear?: boolean
  13. selectAll?: boolean
  14. undo?: boolean
  15. redo?: boolean
  16. delete?: boolean
  17. zoomIn?: boolean
  18. zoomOut?: boolean
  19. autoZoom?: boolean
  20. resetZoom?: boolean
  21. toFront?: boolean
  22. toBack?: boolean
  23. copy?: boolean
  24. paste?: boolean
  25. multiSelect?: boolean
  26. addGroup?: boolean
  27. unGroup?: boolean
  28. append?: boolean
  29. appendChild?: boolean
  30. collaspeExpand?: boolean
  31. }
  32. interface ReactProps {
  33. style?: React.CSSProperties
  34. className?: string
  35. }
  36. export interface BasicProps extends ReactProps {
  37. /** 初始数据 */
  38. data?: any
  39. /** G6的配置项 @see https://www.yuque.com/antv/g6/graph */
  40. graph?: any
  41. /** 快捷键配置,内置命令 */
  42. shortcut?: Shortcut
  43. }
  44. export interface FlowProps extends BasicProps {
  45. /** 对齐配置 */
  46. align?: Align
  47. /** 网格线配置 */
  48. grid?: Grid
  49. /** default: true */
  50. noEndEdge?: boolean
  51. }
  52. export interface MindProps extends BasicProps {
  53. }
  54. export interface KoniProps extends BasicProps {
  55. }
  56. export interface CommondProps {
  57. name: string
  58. }
  59. export interface MninimapProps extends ReactProps {
  60. /** 容器 id */
  61. container?: string
  62. width?: number
  63. height?: number
  64. /** 视窗样式,参考 G 绘图属性 */
  65. viewportWindowStyle?: any
  66. /** 背景样式,参考 G 绘图属性 */
  67. viewportBackStyle?: any
  68. }
  69. export interface ItemPanelProps extends ReactProps {
  70. /** 元素类型,可选类型:node edge */
  71. type: string
  72. /** 元素尺寸,书写格式:50*50 */
  73. size: string
  74. /** 元素形状,内置形状:node、edge */
  75. shape: string
  76. /** 元素初始 model */
  77. model?: any
  78. /** 元素概览 src */
  79. src: string
  80. }
  81. export interface RegisterProps extends ReactProps{
  82. /** 节点名称 */
  83. name?: string
  84. /** 节点配置 */
  85. config?: any
  86. /** 继承图形 */
  87. extend?: string
  88. }
  89. export interface RegisterBehaviourProps extends ReactProps{
  90. /** 行为名称 */
  91. name?: string
  92. /** 行为配置 function(page) */
  93. behaviour?: any
  94. /** 继承行为 */
  95. dependences?: string[]
  96. }
  97. export interface GGEditorEvent {
  98. action: 'add' | 'update' | 'remove' | 'changeData'
  99. item?: any
  100. shape?: any
  101. x?: number
  102. y?: number
  103. domX?: number
  104. domY?: number
  105. /** DOM 原生事件 */
  106. domeEvent?: any
  107. /** drag 拖动图项 */
  108. currentIem?: any
  109. /** drag 拖动图形 */
  110. currentShape?: any
  111. /** mouseleave dragleave 到达的图形 */
  112. toShape?: any
  113. /** mouseleave dragleave 到达的图项 */
  114. toItem?: any
  115. }
  116. /** 此类事件可以结合前缀 node、edge、group、guide、anchor 组合使用,例如: */
  117. export interface GraphMouseReactEventsProps {
  118. /** 鼠标左键点击事件 */
  119. onClick?: (e: GGEditorEvent) => void
  120. /** 鼠标左键双击事件 */
  121. onDoubleClick?: (e: GGEditorEvent) => void
  122. /** 鼠标移入事件 */
  123. onMouseEnter?: (e: GGEditorEvent) => void
  124. /** 鼠标移除事件 */
  125. onMouseLeave?: (e: GGEditorEvent) => void
  126. /** 鼠标按下事件 */
  127. onMouseDown?: (e: GGEditorEvent) => void
  128. /** 鼠标抬起事件 */
  129. onMouseUp?: (e: GGEditorEvent) => void
  130. /** 鼠标移动事件 */
  131. onMouseMove?: (e: GGEditorEvent) => void
  132. /** 鼠标开始拖拽事件 */
  133. onDragStart?: (e: GGEditorEvent) => void
  134. /** 鼠标拖拽事件 */
  135. onDrag?: (e: GGEditorEvent) => void
  136. /** 鼠标拖拽结束事件 */
  137. onDragEnd?: (e: GGEditorEvent) => void
  138. /** 鼠标拖拽进入事件 */
  139. onDragEnter?: (e: GGEditorEvent) => void
  140. /** 鼠标拖拽移出事件 */
  141. onDragLeave?: (e: GGEditorEvent) => void
  142. /** 鼠标拖拽放置事件 */
  143. onDrop?: (e: GGEditorEvent) => void
  144. /** 鼠标右键菜单事件 */
  145. onContextMenu?: (e: GGEditorEvent) => void
  146. }
  147. export interface GraphOtherReactEventsProps {
  148. /** 鼠标滚轮事件 */
  149. onMouseWheel?: (e: GGEditorEvent) => void
  150. /** 键盘按键按下事件 */
  151. onKeyDown?: (e: GGEditorEvent) => void
  152. /** 键盘按键抬起事件 */
  153. onKeyUp?: (e: GGEditorEvent) => void
  154. /** 子项数据变化前 */
  155. onBeforeChange?: (e: GGEditorEvent) => void
  156. /** 子项数据变化后 */
  157. onAfterChange?: (e: GGEditorEvent) => void
  158. /** 画布尺寸变化前 */
  159. onBeforeChangeSize?: (e: GGEditorEvent) => void
  160. /** 画布尺寸变化后 */
  161. onAfterChangeSize?: (e: GGEditorEvent) => void
  162. /** 视口变化前 */
  163. onBeforeViewportChange?: (e: GGEditorEvent) => void
  164. /** 视口变化后 */
  165. onAfterViewportChange?: (e: GGEditorEvent) => void
  166. /** 激活前 */
  167. onBeforeItemActived?: (e: GGEditorEvent) => void
  168. }
  169. export interface PageReactEventsProps {
  170. /** 激活后 */
  171. onAfterItemActived?: (e: GGEditorEvent) => void
  172. /** 取消激活前 */
  173. onBeforeItemInactivated?: (e: GGEditorEvent) => void
  174. /** 取消激活后 */
  175. onAfterItemInactivated?: (e: GGEditorEvent) => void
  176. /** 选中前 */
  177. onBeforeItemSelected?: (e: GGEditorEvent) => void
  178. /** 选中后 */
  179. onAfterItemSelected?: (e: GGEditorEvent) => void
  180. /** 取消选中前 */
  181. onBeforeItemUnselected?: (e: GGEditorEvent) => void
  182. /** 取消选中后 */
  183. onAfterItemUnselected?: (e: GGEditorEvent) => void
  184. /** 键盘按键抬起事件(节点编辑 */
  185. onKeyUpEditLabel?: (e: GGEditorEvent) => void
  186. }
  187. export interface EditorCommand {
  188. name: string
  189. queue: boolean
  190. }
  191. export interface PropsApi {
  192. propsApi: {
  193. executeCommand?(command: EditorCommand)
  194. read?(data: any)
  195. save?(): any
  196. add?(type: any, model: any)
  197. find?(id: any)
  198. update?(item: any, model: any)
  199. remove?(item: any)
  200. getSelected?()
  201. }
  202. }
  203. export interface EditorReactEventsProps {
  204. onAfterCommandExecute?: (e: EditorCommand) => void
  205. onBeforeCommandExecute?: (e: EditorCommand) => void
  206. }
  207. export default class GGEditor extends React.Component<ReactProps & EditorReactEventsProps, any> {
  208. static setTrackable(state: boolean)
  209. }
  210. /** 流程图 @see http://ggeditor.com/docs/api/flow.zh-CN.html */
  211. export const Flow: React.ComponentClass<FlowProps & GraphMouseReactEventsProps & GraphOtherReactEventsProps & PageReactEventsProps, any>
  212. /** 思维导图 @see http://ggeditor.com/docs/api/mind.zh-CN.html */
  213. export const Mind: React.ComponentClass<MindProps & GraphMouseReactEventsProps & GraphOtherReactEventsProps & PageReactEventsProps, any>
  214. /** 脑图 */
  215. export const Koni: React.ComponentClass<KoniProps & GraphMouseReactEventsProps & GraphOtherReactEventsProps & PageReactEventsProps, any>
  216. /** 此组件只能嵌套在 <Toolbar /> 或 <ContextMenu /> 组件内使用: @see http://ggeditor.com/docs/api/command.zh-CN.html */
  217. export const Command: React.ComponentClass<CommondProps, any>
  218. /** 不指定宽高的情况下则自动适应容器尺寸 @see http://ggeditor.com/docs/api/minimap.zh-CN.html */
  219. export const Minimap: React.ComponentClass<MninimapProps, any>
  220. /** 右键菜单,负责菜单显示隐藏,命令按钮绑定与可用禁用状态控制。 @see http://ggeditor.com/docs/api/contextMenu.zh-CN.html */
  221. export const ContextMenu: React.ComponentClass<BasicProps, any>
  222. /** 工具栏,负责命令按钮绑定与可用禁用状态控制。 @see http://ggeditor.com/docs/api/toolbar.zh-CN.html */
  223. export const Toolbar: React.ComponentClass<BasicProps, any>
  224. /** 元素面板栏 必需配合 <Item /> 组件使用,如果 <Item /> 包含 src 属性则自动显示元素概览图片。 @see http://ggeditor.com/docs/api/itemPanel.zh-CN.html */
  225. export const ItemPanel: React.ComponentClass<ReactProps, any>
  226. export const Item: React.ComponentClass<ItemPanelProps, any>
  227. /** 属性栏会自动根据不同页面状态显示对应面板,例如:选中节点时则只会显示 NodePanel @see http://ggeditor.com/docs/api/detailPanel.zh-CN.html */
  228. export const DetailPanel: React.ComponentClass<ReactProps, any>
  229. export const RegisterNode: React.ComponentClass<RegisterProps, any>
  230. export const RegisterEdge: React.ComponentClass<RegisterProps, any>
  231. export const RegisterGroup: React.ComponentClass<RegisterProps, any>
  232. export const RegisterCommand: React.ComponentClass<RegisterProps, any>
  233. export const RegisterBehaviour: React.ComponentClass<RegisterBehaviourProps, any>
  234. export const CanvasMenu: React.ComponentClass<ReactProps, any>
  235. export const EdgeMenu: React.ComponentClass<ReactProps, any>
  236. export const GroupMenu: React.ComponentClass<ReactProps, any>
  237. export const MultiMenu: React.ComponentClass<ReactProps, any>
  238. export const NodeMenu: React.ComponentClass<ReactProps, any>
  239. export const CanvasPanel: React.ComponentClass<ReactProps, any>
  240. export const EdgePanel: React.ComponentClass<ReactProps, any>
  241. export const GroupPanel: React.ComponentClass<ReactProps, any>
  242. export const MultiPanel: React.ComponentClass<ReactProps, any>
  243. export const NodePanel: React.ComponentClass<ReactProps, any>
  244. export const KoniCustomNode: React.ComponentClass<ReactProps & GraphMouseReactEventsProps & GraphOtherReactEventsProps & PageReactEventsProps, any>
  245. /** 这里会带一个 Props 属性 @see http://ggeditor.com/docs/api/propsAPI.zh-CN.html */
  246. export function withPropsAPI(com: React.ComponentClass<ReactProps, any>): React.ComponentClass<any, any>
  247. }