Skip to content

Latest commit

 

History

History
599 lines (509 loc) · 13.8 KB

bpmnApi.md

File metadata and controls

599 lines (509 loc) · 13.8 KB

bpmnApi

一开始只能望官方 demo 发愣，因为没找到一个完整的 API 文档，所以只能自己慢慢记录

开始

在线预览 bpmn-modeling-api-cn

https://pl-fe.github.io/bpmn-modeling-api-cn.github.io/

原版 bpmn-modeling-api

https://github.com/bpmn-io/bpmn-js-examples/tree/master/modeling-api

常用到的服务

  • Canvas
  • BpmnFactory: 根据 bpmn-js 的内部数据模型创建业务对象的工厂
  • ElementFactory: 根据 bpmn-js 的内部数据模型创建形状和连接的工厂。
  • ElementRegistry: 知道添加到图中的所有元素，并提供 api 来根据 id 检索元素及其图形表示。
  • Modeling: 提供用于更新画布上的元素(移动、删除)的 api

Canvas

canvas = modeler.get('canvas')

canvas.getDefaultLayer

/**
 * Returns the default layer on which
 * all elements are drawn.
 *
 * @returns {SVGElement}
 */
canvas.getDefaultLayer()

canvas.getLayer

/**
 * Returns a layer that is used to draw elements
 * or annotations on it.
 *
 * Non-existing layers retrieved through this method
 * will be created. During creation, the optional index
 * may be used to create layers below or above existing layers.
 * A layer with a certain index is always created above all
 * existing layers with the same index.
 *
 * @param {string} name
 * @param {number} index
 *
 * @returns {SVGElement}
 */
canvas.getLayer(name, index)

canvas.getContainer

/**
 * Returns the html element that encloses the
 * drawing canvas.
 *
 * @return {DOMNode}
 */
canvas.getContainer()

canvas.addMarker

/**
 * Adds a marker to an element (basically a css class).
 *
 * Fires the element.marker.update event, making it possible to
 * integrate extension into the marker life-cycle, too.
 *
 * @example
 * canvas.addMarker('foo', 'some-marker');
 *
 * var fooGfx = canvas.getGraphics('foo');
 *
 * fooGfx; // <g class="... some-marker"> ... </g>
 *
 * @param {string|djs.model.Base} element
 * @param {string} marker
 */
canvas.addMarker(element, marker)

canvas.removeMarker

/**
 * Remove a marker from an element.
 *
 * Fires the element.marker.update event, making it possible to
 * integrate extension into the marker life-cycle, too.
 *
 * @param  {string|djs.model.Base} element
 * @param  {string} marker
 */
canvas.removeMarker(element, marker)

canvas.hasMarker

/**
 * Check the existence of a marker on element.
 *
 * @param  {string|djs.model.Base} element
 * @param  {string} marker
 */
canvas.hasMarker(element, marker)

canvas.toggleMarker

/**
 * Toggles a marker on an element.
 *
 * Fires the element.marker.update event, making it possible to
 * integrate extension into the marker life-cycle, too.
 *
 * @param  {string|djs.model.Base} element
 * @param  {string} marker
 */
canvas.toggleMarker(element, marker)

canvas.setRootElement

/**
 * Sets a given element as the new root element for the canvas
 * and returns the new root element.
 *
 * @param {Object|djs.model.Root} element
 * @param {boolean} [override] whether to override the current root element, if any
 *
 * @return {Object|djs.model.Root} new root element
 */
canvas.setRootElement(element, override)

canvas.addShape

/**
 * Adds a shape to the canvas
 *
 * @param {Object|djs.model.Shape} shape to add to the diagram
 * @param {djs.model.Base} [parent]
 * @param {number} [parentIndex]
 *
 * @return {djs.model.Shape} the added shape
 */
canvas.addShape(shape, parent, parentIndex)

canvas.addConnection

/**
 * Adds a connection to the canvas
 *
 * @param {Object|djs.model.Connection} connection to add to the diagram
 * @param {djs.model.Base} [parent]
 * @param {number} [parentIndex]
 *
 * @return {djs.model.Connection} the added connection
 */
canvas.addConnection(connection, parent, parentIndex)

canvas.removeShape

/**
 * Removes a shape from the canvas
 *
 * @param {string|djs.model.Shape} shape or shape id to be removed
 *
 * @return {djs.model.Shape} the removed shape
 */
canvas.removeShape(shape)

canvas.removeConnection

/**
 * Removes a connection from the canvas
 *
 * @param {string|djs.model.Connection} connection or connection id to be removed
 *
 * @return {djs.model.Connection} the removed connection
 */
canvas.removeConnection(shape)

canvas.getGraphics

/**
 * Return the graphical object underlaying a certain diagram element
 *
 * @param {string|djs.model.Base} element descriptor of the element
 * @param {boolean} [secondary=false] whether to return the secondary connected element
 *
 * @return {SVGElement}
 */
canvas.getGraphics(element, secondary)

canvas.viewbox

/**
 * Gets or sets the view box of the canvas, i.e. the
 * area that is currently displayed.
 *
 * The getter may return a cached viewbox (if it is currently
 * changing). To force a recomputation, pass `false` as the first argument.
 *
 * @example
 *
 * canvas.viewbox({ x: 100, y: 100, width: 500, height: 500 })
 *
 * // sets the visible area of the diagram to (100|100) -> (600|100)
 * // and and scales it according to the diagram width
 *
 * var viewbox = canvas.viewbox(); // pass `false` to force recomputing the box.
 *
 * console.log(viewbox);
 * // {
 * //   inner: Dimensions,
 * //   outer: Dimensions,
 * //   scale,
 * //   x, y,
 * //   width, height
 * // }
 *
 * // if the current diagram is zoomed and scrolled, you may reset it to the
 * // default zoom via this method, too:
 *
 * var zoomedAndScrolledViewbox = canvas.viewbox();
 *
 * canvas.viewbox({
 *   x: 0,
 *   y: 0,
 *   width: zoomedAndScrolledViewbox.outer.width,
 *   height: zoomedAndScrolledViewbox.outer.height
 * });
 *
 * @param  {Object} [box] the new view box to set
 * @param  {number} box.x the top left X coordinate of the canvas visible in view box
 * @param  {number} box.y the top left Y coordinate of the canvas visible in view box
 * @param  {number} box.width the visible width
 * @param  {number} box.height
 *
 * @return {Object} the current view box
 */
canvas.viewbox(box)

canvas.scroll

/**
 * Gets or sets the scroll of the canvas.
 *
 * @param {Object} [delta] the new scroll to apply.
 *
 * @param {number} [delta.dx]
 * @param {number} [delta.dy]
 */
canvas.scroll(delta)

canvas.zoom

/**
 * Gets or sets the current zoom of the canvas, optionally zooming
 * to the specified position.
 *
 * The getter may return a cached zoom level. Call it with `false` as
 * the first argument to force recomputation of the current level.
 *
 * @param {string|number} [newScale] the new zoom level, either a number, i.e. 0.9,
 *                                   or `fit-viewport` to adjust the size to fit the current viewport
 * @param {string|Point} [center] the reference point { x: .., y: ..} to zoom to, 'auto' to zoom into mid or null
 *
 * @return {number} the current scale
 */
canvas.zoom(newScale, center)

canvas.getSize

/**
 * Returns the size of the canvas
 *
 * @return {Dimensions}
 */
canvas.getSize()

canvas.getAbsoluteBBox

/**
 * Return the absolute bounding box for the given element
 *
 * The absolute bounding box may be used to display overlays in the
 * callers (browser) coordinate system rather than the zoomed in/out
 * canvas coordinates.
 *
 * @param  {ElementDescriptor} element
 * @return {Bounds} the absolute bounding box
 */
canvas.getAbsoluteBBox(element)

canvas.resized

/**
 * Fires an event in order other modules can react to the
 * canvas resizing
 */
canvas.resized()

BpmnFactory

  • bpmnFactory.create

BpmnFactory

  • elementFactory.createRoot
  • elementFactory.createLabel
  • elementFactory.createShape
  • elementFactory.createConnection
elementFactory = modeler.get('elementFactory')
/**
 * Create a model element with the given type and
 * a number of pre-set attributes.
 *
 * @param  {Object} attrs
 * @return {djs.model.Base} the newly created model instance
 */
elementFactory.createRoot(attrs)
elementFactory.createLabel(attrs)
elementFactory.createShape(attrs)
elementFactory.createConnection(attrs)

ElementRegistry

const elementRegistry = modeler.get('elementRegistry')
elementRegistry.add
/**
 * Register a pair of (element, gfx, (secondaryGfx)).
 *
 * @param {djs.model.Base} element
 * @param {SVGElement} gfx
 * @param {SVGElement} [secondaryGfx] optional other element to register, too
 */
elementRegistry.add(element, gfx, secondaryGfx)
elementRegistry.remove
/**
 * Removes an element from the registry.
 *
 * @param {djs.model.Base} element
 */
elementRegistry.remove(element)
elementRegistry.get
/**
 * Return the model element for a given id or graphics.
 *
 * @example
 *
 * elementRegistry.get('SomeElementId_1');
 * elementRegistry.get(gfx);
 *
 *
 * @param {string|SVGElement} filter for selecting the element
 *
 * @return {djs.model.Base}
 */
elementRegistry.get(filter)
elementRegistry.getAll
/**
 * Return all rendered model elements.
 *
 * @return {Array<djs.model.Base>}
 */
elementRegistry.getAll()
elementRegistry.updateId
/**
 * Update the id of an element
 *
 * @param {djs.model.Base} element
 * @param {string} newId
 */
elementRegistry.updateId(element, newId)
elementRegistry.filter
/**
 * Return all elements that match a given filter function.
 *
 * @param {Function} fn
 *
 * @return {Array<djs.model.Base>}
 */
elementRegistry.filter(fn)
elementRegistry.forEach
/**
 * Iterate over all diagram elements.
 *
 * @param {Function} fn
 */
elementRegistry.forEach(fn)
elementRegistry.getGraphics
/**
 * Return the graphical representation of an element or its id.
 *
 * @example
 * elementRegistry.getGraphics('SomeElementId_1');
 * elementRegistry.getGraphics(rootElement); // <g ...>
 *
 * elementRegistry.getGraphics(rootElement, true); // <svg ...>
 *
 *
 * @param {string|djs.model.Base} filter
 * @param {boolean} [secondary=false] whether to return the secondary connected element
 *
 * @return {SVGElement}
 */
elementRegistry.getGraphics(filter, secondary)

Modeling

modeling.updateProperties

// 更新业务对象属性（常用） 包括 id
modeling.updateProperties(elements, attr)

modeling.createShape

/**
 * Create a shape at the specified position.
 *
 * @param {djs.model.Shape|Object} shape
 * @param {Point} position
 * @param {djs.model.Shape|djs.model.Root} target
 * @param {number} [parentIndex] position in parents children list
 * @param {Object} [hints]
 * @param {boolean} [hints.attach] whether to attach to target or become a child
 *
 * @return {djs.model.Shape} the created shape
 */
modeling.createShape(shape, position, target, parentIndex, hints)

modeling.appendShape

/**
 * Append shape to given source, drawing a connection
 * between source and the newly created shape.
 *
 * @param {djs.model.Shape} source
 * @param {djs.model.Shape|Object} shape
 * @param {Point} position
 * @param {djs.model.Shape} target
 * @param {Object} [hints]
 * @param {boolean} [hints.attach]
 * @param {djs.model.Connection|Object} [hints.connection]
 * @param {djs.model.Base} [hints.connectionParent]
 *
 * @return {djs.model.Shape} the newly created shape
 */
modeling.appendShape(source, shape, position, target, hints)
modeling.createElements(shape, position, target, parentIndex, hints)
modeling.createLabel(labelTarget, position, label, parent)
modeling.removeElements(elements)
modeling.removeShape(shape, hints)
modeling.removeConnection(connection, hints)
modeling.alignElements(elements, alignment)
modeling.resizeShape(shape, newBounds, minBounds, hints)
modeling.createSpace(movingShapes, resizingShapes, delta, direction, start)
modeling.updateWaypoints(connection, newWaypoints, hints)
modeling.reconnect(connection, source, target, dockingOrPoints, hints)
modeling.reconnectStart(connection, newSource, dockingOrPoints, hints)
modeling.reconnectEnd(connection, newTarget, dockingOrPoints, hints)
modeling.connect(source, target, attrs, hints)
modeling.toggleCollapse(shape, hints)