Class GraphEditor

constructor

• new GraphEditor(config): GraphEditor

• Example

  var graphEditor=new GraphEditor({
      container:document.getElementById('editor'),
      drawing: {
           snapToGrid: {
               enable: true,
            }
      },
      selection: {
           keyboard: {
               map: {
                    moveLeft: ['Shift+ArrowLeft'],
                    moveRight: ['Shift+ArrowRight'],
                    moveUp: ['Shift+ArrowUp'],
                    moveDown: ['Shift+ArrowDown']
                }
            }
      }
  })
  Copy

  Parameters

  • config: EditorConfig

  Returns GraphEditor

copyNodes

currentMode

currentTarget

drawingShape

gridConfig

isSquare

operateNodes

pasteCount

relatedConnectedLinesMap

shapeModules

transformer

addEvent

• addEvent(event, nodeId?): void

• 为节点添加事件

  Example

  graphEditor.addEvent({
    type:'valuechange',
    action:'changeAttributes',
    attributes:{
     'fill' :'green'
     },
    triggers:[{
       type:'operation',
         operation: {
            target: 3,
            source: "state",
            operator: "="
        }
    }]
   },nodeId)
   graphEditor.addEvent({
      type:'valuechange',
      action:'executeScript',
      script: 'console.log("world")',
      triggers:[{
         script:'return state==1',
         type:'script'
      }]
   })
  Copy

  Parameters

  • event: any

  • Optional nodeId: string

    操作的节点id

  Returns void

addEventToNode

• addEventToNode(konvaNode): void

• Parameters

  • konvaNode: any

  Returns void

addEventTrigger

• addEventTrigger(eventIndex, trigger, nodeId?): void

• 为事件添加条件

  Example

  graphEditor.addEventTrigger(0,{
     type: 'operation',
     target: 3,
    source: "state",
     operation: "="
    },)
  Copy

  Parameters

  • eventIndex: number

    事件的索引

  • trigger: any

  • Optional nodeId: string

  Returns void

addNode

• addNode(opt): void

• 添加节点

  Example

  editor.addNode({
     className：'RectNode'
     attributes:{
        x:100,
        y:200,
        opacity:0.5,
        width:200,
        height:60
     }
  })
  Copy

  Parameters

  • opt: NodeConfig

    要添加节点的json数据

  Returns void

addSymbolNode

• addSymbolNode(opt): void

• 实例化图元到数据模型

  Parameters

  • opt: NodeConfig

    图元的json信息

  Returns void

addSymbolVariable

• addSymbolVariable(symbolJson, variableName, variable): any

• 暂时不使用此方法

  Parameters

  • symbolJson: any

  • variableName: any

  • variable: any

  Returns any

addVariable

• addVariable(name, variable, nodeId?, toModel?): void

• 添加变量

  Example

  var variable =
  {
     defaultVal:'变量默认值',//必填
     type:'integer'//可选
  };
  graphEditor.addVariable('变量1',variable)
  Copy

  Parameters

  • name: string

    变量名称

  • variable: any

    变量对象

  • Optional nodeId: string

  • toModel: boolean = false

    是否为整个数据模型设置变量，为true，则变量绑定到整个模型，为false则将变量绑定到当前选中节点

  Returns void

align

• align(direction, nodeIds?): void

• 对齐操作

  Parameters

  • direction: AlignDirection

    对齐的方向

  • Optional nodeIds: any

    要对齐的节点id数组，如果为空，则默认对齐选中元素

  Returns void

checkId

• checkId(): boolean

• Returns boolean

constructSymbol

• constructSymbol(symbolName): any

• 组成图元

  Parameters

  • symbolName: string

    图元名称

  Returns any

copy

• copy(nodeIds?): void

• 复制操作

  Parameters

  • Optional nodeIds: any

    需要复制的节点id数组，如为空，则为当前画布选中节点

  Returns void

cut

• cut(nodeIds?): void

• 剪切

  Parameters

  • Optional nodeIds: any

    需要复制的节点id数组，如为空，则为当前画布选中节点

  Returns void

deconstructSymbol

• deconstructSymbol(): void

• 编辑图元，对当前选中的图元进行编辑

  Returns void

deleteEvent

• deleteEvent(eventIndex, nodeId?): void

• 删除事件

  Parameters

  • eventIndex: number

    事件索引

  • Optional nodeId: string

    操作节点

  Returns void

deleteEventTrigger

• deleteEventTrigger(eventIndex, triggerIndex, nodeId?): void

• 删除事件中的条件

  Parameters

  • eventIndex: number

    事件索引

  • triggerIndex: number

    条件索引

  • Optional nodeId: string

    操作节点id

  Returns void

deleteNodes

• deleteNodes(nodeIds?): void

• 删除节点

  Parameters

  • Optional nodeIds: any

    需要删除的节点id数组，如果为空，则删除当前选中节点

  Returns void

deletePropertyInEvent

• deletePropertyInEvent(propertyIndex?, evtIndex, nodeId): void

• 删除在事件中的属性

  Parameters

  • propertyIndex: number = -1

    属性索引

  • evtIndex: number

    事件索引

  • nodeId: string

    操作节点

  Returns void

deleteVariable

• deleteVariable(name, nodeId?, toModel?): void

• 删除指定名称的变量

  Parameters

  • name: string

    变量名称

  • Optional nodeId: string

    需要操作的节点

  • Optional toModel: boolean = false

    是否是删除模型上的变量

  Returns void

deselect

• deselect(): void

• Returns void

drawShape

• drawShape(shapeName): void

• 绘制形状

  Parameters

  • shapeName: string

    枚举值： line:直线 polyline：折线 pen：画笔 lineArrow：箭头 polylineArrow: 折线箭头

  Returns void

dropShape

• dropShape(e, node): void

• 根据鼠标的位置，将节点加入到模型

  Example

  editor.dropShape(event,{
    className：'RectNode'
     attributes:{
       opacity:0.5,
       width:200,
       height:60
     }
  })
  Copy

  Parameters

  • e: DragEvent

    鼠标事件

  • node: NodeConfig

    添加的节点

  Returns void

dropSymbol

• dropSymbol(e, node): void

• 根据鼠标的位置，实例化图元加入到模型

  Parameters

  • e: DragEvent

    拖拽事件

  • node: NodeConfig

    symbol的json数据

  Returns void

extractVariables

• extractVariables(): undefined | {}

• 对当前选中元素提取变量

  Returns undefined | {}

fitContent

• fitContent(leftMargin?, rightMargin?, topMargin?, bottomMargin?): void

• 将画布大小设置成适合内容

  Example

  editor.fitContent(20,20,20,20)
  Copy

  Parameters

  • Optional leftMargin: number = 10

    左留白

  • Optional rightMargin: number = 10

    右留白

  • Optional topMargin: number = 10

    上留空

  • Optional bottomMargin: number = 10

    下留空

  Returns void

flip

• flip(direction, nodeIds?): void

• 镜像翻转功能

  Example

  editor.flip('x')
  Copy

  Parameters

  • direction: string

    翻转方向，取值为x,则沿x轴翻转，取值为y,则沿着y轴翻转

  • Optional nodeIds: string[]

    需要翻转的节点id数组，没有的话，则取当前画布选中元素

  Returns void

getAnimation

• getAnimation(nodeId?): any

• 获取节点的所有动画属性

  Example

  editor.getAnimation();
  Copy

  Parameters

  • Optional nodeId: string

    节点id，未指定的情况下，则为当前选中节点

  Returns any

  节点的所有动画属性

getAnimationValue

• getAnimationValue(key, nodeId?): any

• 获取节点的指定动画属性值

  Example

  editor.getAnimationValue('autoPlay');
  editor.getAnimationValue('type');
  Copy

  Parameters

  • key: string

    动画属性名称

  • Optional nodeId: string

    节点id，未指定的情况下，则为当前选中节点

  Returns any

  节点的指定动画属性值

getAttributeValue

• getAttributeValue(attrName, nodeId?): any

• Example

  editor.getAttributeValue('fill')
  Copy

  Parameters

  • attrName: string

    属性名称

  • Optional nodeId: string

    节点id，未指定的情况下，则为当前选中节点

  Returns any

  节点的指定属性

getAttributes

• getAttributes(id?): any

• 获取节点的所有属性

  Example

  editor.getAttributes(id);
  Copy

  Parameters

  • Optional id: string

  Returns any

  属性的JSON数组，含有属性中所有的信息

getConfig

• getConfig(): any

• 获取当前配置

  Returns any

  当前配置

getCurrentTarget

• getCurrentTarget(): any

• Returns any

getDataModel

• getDataModel(): undefined | DataModel

• 获取数据模型

  Returns undefined | DataModel

  数据模型

getDrawingLayer

• getDrawingLayer(): Layer

• Returns Layer

getEvents

• getEvents(nodeId?): any

• 返回节点的所有事件

  Parameters

  • Optional nodeId: string

    节点id，未指定的情况下，则为当前选中节点

  Returns any

getFnMap

• getFnMap(): Map<any, any>
• Returns Map<any, any>

  获取功能函数map

getFnState

• getFnState(): Map<any, any>
• Returns Map<any, any>

  获取功能状态map

getGridConfig

• getGridConfig(): any

• Returns any

getHelpLayer

• getHelpLayer(): Layer

• Returns Layer

getImportantPoints

• getImportantPoints(target): any[]

• Parameters

  • target: any

  Returns any[]

getName

• getName(): string

• 获取图的名称

  Returns string

getNodesAttributes

• getNodesAttributes(ids?): {}
• Parameters

  • Optional ids: any

    操作节点的id数组

  Returns {}

  操作节点的属性的交集

getPointerPosition

• getPointerPosition(e): {}

• 获取文档坐标

  Parameters

  • e: MouseEvent

    鼠标事件

  Returns {}

getRelatedConnectedLineMap

• getRelatedConnectedLineMap(selectNodes): Map<any, any>

• Parameters

  • selectNodes: any

  Returns Map<any, any>

getSelection

• getSelection(): any

• 获取当前选中节点

  Returns any

  当前选中节点

getSize

• getSize(): Dimensions

• 获取当前画布的宽度和高度

  Returns Dimensions

  宽度和高度

getStyleConfig

• getStyleConfig(): any

• Returns any

getVariable

• getVariable(name, nodeId?): any

• 获取节点指定的变量

  Parameters

  • name: string

    变量名称

  • Optional nodeId: string

    节点的id

  Returns any

getVariables

• getVariables(nodeId?): any

• 获取节点所有的变量

  Parameters

  • Optional nodeId: string

  Returns any

group

• group(nodeIds?): any

• 成组

  Parameters

  • Optional nodeIds: any

    需要成组的节点，如果为空，则取当前画布上被选中的节点

  Returns any

insertImage

• insertImage(): void

• 插入图片

  Example

  editor.insertImage()
  Copy

  Returns void

inverseSelect

• inverseSelect(): void

• 反选

  Returns void

move

• move(direction, step?, nodeIds?): void

• 微调功能

  Parameters

  • direction: MoveDirection

    移动的方向

  • Optional step: number = 1

    调整距离

  • Optional nodeIds: string[]

  Returns void

onFnStateChanged

• onFnStateChanged(callback): void

• 监听功能可用状态

  Parameters

  • callback: any

  Returns void

onKeyDown

• onKeyDown(e): void

• 为画布添加快捷键的监听

  Parameters

  • e: any

  Returns void

onModelChanged

• onModelChanged(callback): void

• 监听模型变换

  Parameters

  • callback: any

    模型变化的回调函数

  Returns void

onNodeAnimationChange

• onNodeAnimationChange(callback): void

• Parameters

  • callback: any

  Returns void

onNodeAttributeChange

• onNodeAttributeChange(callback): void

• 监听节点属性变化

  Parameters

  • callback: any

    回调函数

  Returns void

onNodeEventsChange

• onNodeEventsChange(callback): void

• 监听节点的事件变化

  Parameters

  • callback: any

    回调函数

  Returns void

onNodeVariableChange

• onNodeVariableChange(callback): void

• 监听节点的变量的变化

  Parameters

  • callback: any

    回调函数

  Returns void

onSelectionChanged

• onSelectionChanged(callback): void

• 监听选中节点的变化

  Parameters

  • callback: any

  Returns void

order

• order(direction, nodeId?): void

• 调整层序

  Parameters

  • direction: OrderDirection

    调整层序的方向,枚举值： 'up' :上移一层 'down':下移一层 'top':顶层 'bottom'：底层

  • Optional nodeId: string

  Returns void

paste

• paste(): void

• 粘贴操作

  Returns void

redo

• redo(): void

• 重做操作

  Returns void

registerContextMenu

• registerContextMenu(callbackFn): void

• 注册右键菜单事件，完成自定义菜单功能

  Parameters

  • callbackFn: any

  Returns void

savePropertyInEvent

• savePropertyInEvent(property, propertyIndex?, evtIndex, nodeId): void

• 添加或保存在事件中的属性

  Example

  graphEditor.savePropertyInEvent({'stroke':'green'}, -1, 0, selectNodes[0].id)
  Copy

  Parameters

  • property: any

  • propertyIndex: number = -1

    属性的索引，默认为-1，表示新增

  • evtIndex: number

    事件索引

  • nodeId: string

    操作节点

  Returns void

selectAll

• selectAll(): void

• 选中画布上所有节点

  Returns void

setAnimation

• setAnimation(animation, nodeId?): void

• 设置动画属性

  Example

  graphEditor.setAnimation({
    'type'：'blink',
    'autoPlay':true,
    'period':10   //动画周期，单位秒
  },nodeId);
  Copy

  Parameters

  • animation: any

    动画对象

  • Optional nodeId: string

    操作节点id

  Returns void

setAnimationValue

• setAnimationValue(name, value, nodeId): void

• 设置动画属性值

  Example

  graphEditor.setAnimationValue('type','blink');
  Copy

  Parameters

  • name: any

    属性名称

  • value: any

    属性值

  • nodeId: string

    操作节点id

  Returns void

setAttributeValue

• setAttributeValue(key, val, nodeIds?): void

• 设置节点的属性

  Example

  graphEditor.setAttributeValue('fill','orange',ids);
  Copy

  Parameters

  • key: string

    属性名称

  • val: any

    属性值

  • Optional nodeIds: any

    操作节点id数组，如果为空，则默认为画布选中元素

  Returns void

setAttributeValues

• setAttributeValues(attrValues, nodeIds?): void

• 设置节点的属性

  Example

  graphEditor.setAttributeValues({
   'fill':'red'
    },ids);
  Copy

  Parameters

  • attrValues: any

    JSON对象

  • Optional nodeIds: any

  Returns void

setFit

• setFit(fit): void

• 设置画布的适应方式

  Example

  editor.setFit('contain')
  Copy

  Parameters

  • fit: string

    设置画布适应方式，取值可为contain,cover,normal

  Returns void

setGraph

• setGraph(graphContent): void

• Parameters

  • graphContent: any

  Returns void

setGridConfig

• setGridConfig(gridConfig): void

• 修改默认网格配置

  Example

  graphEditor.setGridConfig({
    'color':'yellow'
   })
  Copy

  Parameters

  • gridConfig: GridConfig

    要修改的网格样式

  Returns void

setHAlign

• setHAlign(hAlign): void

• 设置画布的水平对齐方式

  Example

  editor.setHAlign('center')
  Copy

  Parameters

  • hAlign: string

    水平对齐方式，取值可为left,right,center,默认为left

  Returns void

setLocked

• setLocked(locked): void

• Parameters

  • locked: boolean

  Returns void

setName

• setName(name): void

• 设置图的名称

  Parameters

  • name: string

    名称

  Returns void

setSize

• setSize(width, height): void

• 设置画布的宽度和高度

  Parameters

  • width: number

    画布宽度

  • height: number

    画布高度

  Returns void

setStyleConfig

• setStyleConfig(styleConfig): void

• 修改默认样式配置

  Example

  graphEditor.setStyleConfig({
    'stroke':'yellow'
   })
  Copy

  Parameters

  • styleConfig: StyleConfig

    要修改的样式

  Returns void

setTag

• setTag(tag, nodeId): void

• Parameters

  • tag: string

  • nodeId: any

  Returns void

setVAlign

• setVAlign(vAlign): void

• 设置画布的垂直对齐方式

  Example

  editor.setHAlign('center')
  Copy

  Parameters

  • vAlign: string

    垂直对齐方式，取值可为top,bottom,center,默认为top

  Returns void

stopDrawing

• stopDrawing(): void

• 停止绘制模式

  Returns void

toImage

• toImage(callbackFn): void

• 将当前画布内容转成Image对象

  Example

  graphEditor.toImage((img: any) => {
  })
  Copy

  Parameters

  • callbackFn: any

    转换完成后的回调函数

  Returns void

toJSON

• toJSON(isArray?): string

• 将当前画布的信息序列化

  Parameters

  • isArray: boolean = false

  Returns string

  序列后的JSON字符串

unGroup

• unGroup(nodeIds?): void

• 解组

  Parameters

  • Optional nodeIds: any

  Returns void

undo

• undo(): void

• 撤销操作

  Returns void

updateEvent

• updateEvent(event, evtIndex, nodeId?): void

• 更新节点事件

  Parameters

  • event: any

    事件对象

  • evtIndex: number

    事件索引

  • Optional nodeId: string

    要操作节点

  Returns void

updateEventTrigger

• updateEventTrigger(eventIndex, triggerIndex, trigger, nodeId?): void

• 更新事件条件

  Parameters

  • eventIndex: number

    事件索引

  • triggerIndex: number

    条件索引

  • trigger: any

    修改的条件

  • Optional nodeId: string

    操作节点id

  Returns void

updateRelatedConnectedLines

• updateRelatedConnectedLines(): void

• Returns void

updateSymbol

• updateSymbol(symbol, ignoreVariable?, nodeIds): void

• 更新图中节点的图元

  Parameters

  • symbol: any

    目标图元对象

  • ignoreVariable: boolean = false

  • nodeIds: any

    需要更新的节点，如果为空，则默认更新所有的匹配图元

  Returns void

updateVariable

• updateVariable(name, variable, oldVariableName?, nodeId?, toModel?): void

• 更新变量

  Example

  graphEditor.updateVariable('变量2', {
       type: 'string',
       defaultVal: 6
    }, '变量3');
  Copy

  Parameters

  • name: string

    新的变量名称

  • variable: any

    变量值

  • Optional oldVariableName: string

    原来的变量名称

  • Optional nodeId: string

    需要更新变量的节点

  • toModel: boolean = false

    是否为整个数据模型设置变量，为true，则变量绑定到整个模型，为false则将变量绑定到当前选中节点

  Returns void

withoutSymbolNode

• withoutSymbolNode(): boolean

• Returns boolean