fix(modeling): fix Modeling types

lib/features/modeling/Modeling.js

@@ -20,22 +20,29 @@ import UpdateLabelHandler from '../label-editing/cmd/UpdateLabelHandler';
  * @typedef {import('./ElementFactory').default} ElementFactory
  * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
  *
- * @typedef {import('diagram-js/lib/model').Element} Element
- * @typedef {import('diagram-js/lib/model').Root} Root
- * @typedef {import('diagram-js/lib/model').Shape} Shape
+ * @typedef {import('diagram-js/lib/features/modeling/Modeling').ModelingHints} ModelingHints
  *
- * @typedef {import('diagram-js/lib/util/Types').Rect} Rect
- *
- * @typedef {import('../../BaseViewer').ModdleElement} ModdleElement
+ * @typedef {import('../../model/Types').BpmnConnection} BpmnConnection
+ * @typedef {import('../../model/Types').BpmnElement} BpmnElement
+ * @typedef {import('../../model/Types').BpmnLabel} BpmnLabel
+ * @typedef {import('../../model/Types').BpmnRoot} BpmnRoot
+ * @typedef {import('../../model/Types').BpmnShape} BpmnShape
+ * @typedef {import('../../model/Types').ModdleElement} ModdleElement
  *
- * @typedef {import('./Modeling').UpdateLabelHints} UpdateLabelHints
+ * @typedef {import('diagram-js/lib/util/Types').Rect} Rect
  *
  * @typedef {import('../../util/Types').Colors} Colors
+ *
+ * @typedef { {
+ *   removeShape?: boolean;
+ * } } UpdateLabelHints
  */
 
 /**
  * The BPMN 2.0 modeling entry point.
  *
+ * @extends {BaseModeling<BpmnConnection, BpmnElement, BpmnLabel, BpmnRoot, BpmnShape>}
+ *
  * @param {EventBus} eventBus
  * @param {ElementFactory} elementFactory
  * @param {CommandStack} commandStack
@@ -83,7 +90,7 @@ Modeling.prototype.getHandlers = function() {
 /**
  * Update an element's label.
  *
- * @param {Element} element The element.
+ * @param {BpmnElement} element The element.
  * @param {string} newLabel The new label.
  * @param {Rect} [newBounds] The optional bounds of the label.
  * @param {UpdateLabelHints} [hints] The optional hints.
@@ -97,7 +104,14 @@ Modeling.prototype.updateLabel = function(element, newLabel, newBounds, hints) {
   });
 };
 
-
+/**
+ * @param {BpmnElement} source
+ * @param {BpmnElement} target
+ * @param {Partial<BpmnConnection>} attrs
+ * @param {ModelingHints} [hints]
+ *
+ * @returns {BpmnConnection}
+ */
 Modeling.prototype.connect = function(source, target, attrs, hints) {
 
   var bpmnRules = this._bpmnRules;
@@ -116,7 +130,7 @@ Modeling.prototype.connect = function(source, target, attrs, hints) {
 /**
  * Update a model element's properties.
  *
- * @param {Element} element The element.
+ * @param {BpmnElement} element The element.
  * @param {ModdleElement} moddleElement The model element.
  * @param {Object} properties The updated properties.
  */
@@ -131,7 +145,7 @@ Modeling.prototype.updateModdleProperties = function(element, moddleElement, pro
 /**
  * Update an element's properties.
  *
- * @param {Element} element The element.
+ * @param {BpmnElement} element The element.
  * @param {Object} properties The updated properties.
  */
 Modeling.prototype.updateProperties = function(element, properties) {
@@ -144,7 +158,7 @@ Modeling.prototype.updateProperties = function(element, properties) {
 /**
  * Resize a lane.
  *
- * @param {Shape} laneShape The lane.
+ * @param {BpmnShape} laneShape The lane.
  * @param {Rect} newBounds The new bounds of the lane.
  * @param {boolean} [balanced] Wether to resize neighboring lanes.
  */
@@ -159,10 +173,10 @@ Modeling.prototype.resizeLane = function(laneShape, newBounds, balanced) {
 /**
  * Add a lane.
  *
- * @param {Shape} targetLaneShape The shape to add the lane to.
+ * @param {BpmnShape} targetLaneShape The shape to add the lane to.
  * @param {string} location The location.
  *
- * @return {Shape} The added lane.
+ * @return {BpmnShape} The added lane.
  */
 Modeling.prototype.addLane = function(targetLaneShape, location) {
   var context = {
@@ -178,7 +192,7 @@ Modeling.prototype.addLane = function(targetLaneShape, location) {
 /**
  * Split a lane.
  *
- * @param {Shape} targetLane The lane to split.
+ * @param {BpmnShape} targetLane The lane to split.
  * @param {number} count The number of lanes to split the lane into. Must not
  * exceed the number of existing lanes.
  */
@@ -192,7 +206,7 @@ Modeling.prototype.splitLane = function(targetLane, count) {
 /**
  * Turn a process into a collaboration.
  *
- * @return {Root} The root of the collaboration.
+ * @return {BpmnRoot} The root of the collaboration.
  */
 Modeling.prototype.makeCollaboration = function() {
 
@@ -212,7 +226,7 @@ Modeling.prototype.makeCollaboration = function() {
 /**
  * Transform a collaboration into a process.
  *
- * @return {Root} The root of the process.
+ * @return {BpmnRoot} The root of the process.
  */
 Modeling.prototype.makeProcess = function() {
 
@@ -230,8 +244,8 @@ Modeling.prototype.makeProcess = function() {
 /**
  * Update the referenced lanes of each flow node.
  *
- * @param {Shape[]} flowNodeShapes The flow nodes to update.
- * @param {Shape[]} laneShapes The lanes.
+ * @param {BpmnShape[]} flowNodeShapes The flow nodes to update.
+ * @param {BpmnShape[]} laneShapes The lanes.
  */
 Modeling.prototype.updateLaneRefs = function(flowNodeShapes, laneShapes) {
 
@@ -271,7 +285,7 @@ Modeling.prototype.unclaimId = function(id, moddleElement) {
 /**
  * Set the color(s) of one or many elements.
  *
- * @param {Base[]} elements The elements to set the color(s) for.
+ * @param {BpmnElement[]} elements The elements to set the color(s) for.
  * @param {Colors} colors The color(s) to set.
  */
 Modeling.prototype.setColor = function(elements, colors) {

lib/features/modeling/Modeling.test.ts

@@ -1,39 +1,55 @@
+import { expectType } from 'ts-expect';
+
 import Modeler from '../../Modeler';
 
+import {
+  BpmnConnection,
+  BpmnElement,
+  BpmnLabel,
+  BpmnShape
+} from '../../model/Types';
+
 import ElementFactory from './ElementFactory';
 import Modeling from './Modeling';
 
+import { getBusinessObject } from '../../util/ModelUtil';
+
 const modeler = new Modeler();
 
 const elementFactory = modeler.get<ElementFactory>('elementFactory');
 
-const connection = elementFactory.create('connection', { type: 'bpmn:SequenceFlow' }),
-      root = elementFactory.create('root', { type: 'bpmn:Process' }),
-      shape = elementFactory.create('shape', { type: 'bpmn:Task' });
+const sequenceFlow = elementFactory.create('connection', { type: 'bpmn:SequenceFlow' }),
+      process = elementFactory.create('root', { type: 'bpmn:Process' }),
+      subProcess = elementFactory.create('shape', { type: 'bpmn:SubProcess' }),
+      task = elementFactory.create('shape', { type: 'bpmn:Task' });
 
 const modeling = modeler.get<Modeling>('modeling');
 
-modeling.updateLabel(shape, 'foo');
+modeling.updateLabel(task, 'foo');
 
-modeling.updateLabel(shape, 'foo', {
+modeling.updateLabel(task, 'foo', {
   x: 100,
   y: 100,
   width: 100,
   height: 100
 });
 
-modeling.updateLabel(shape, 'foo', {
+modeling.updateLabel(task, 'foo', {
   x: 100,
   y: 100,
   width: 100,
   height: 100
 }, { removeShape: true });
 
-modeling.updateModdleProperties(shape, { type: 'bpmn:ExtensionElements' }, {
+modeling.connect(subProcess, task, sequenceFlow);
+
+modeling.connect(subProcess, task, sequenceFlow, { foo: 'bar' });
+
+modeling.updateModdleProperties(task, { type: 'bpmn:ExtensionElements' }, {
   values: []
 });
 
-modeling.updateProperties(shape, {
+modeling.updateProperties(task, {
   name: 'foo'
 });
 
@@ -64,14 +80,38 @@ modeling.makeCollaboration();
 
 modeling.makeProcess();
 
-modeling.updateLaneRefs([ shape ], [ lane ]);
+modeling.updateLaneRefs([ task ], [ lane ]);
+
+modeling.claimId('foo', task.businessObject);
+
+modeling.unclaimId('foo', task.businessObject);
+
+modeling.setColor([ task ], { fill: 'red', stroke: 'green' });
+
+modeling.setColor([ task ], { fill: 'red' });
+
+modeling.setColor([ task ], { stroke: 'green' });
+
+/**
+ * Integration
+ */
+
+expectType<BpmnConnection>(modeling.createConnection(subProcess, task, sequenceFlow, process));
+
+expectType<BpmnLabel>(modeling.createLabel(task, { x: 100, y: 100 }, {
+  businessObject: getBusinessObject(task)
+}));
 
-modeling.claimId('foo', shape.businessObject);
+expectType<BpmnShape>(modeling.createShape(task, { x: 100, y: 100 }, process));
 
-modeling.unclaimId('foo', shape.businessObject);
+expectType<BpmnElement[]>(modeling.createElements([
+  subProcess,
+  task,
+  sequenceFlow
+], { x: 100, y: 100 }, process));
 
-modeling.setColor([ shape ], { fill: 'red', stroke: 'green' });
+modeling.moveShape(task, { x: 100, y: 100 });
 
-modeling.setColor([ shape ], { fill: 'red' });
+modeling.moveConnection(sequenceFlow, { x: 100, y: 100 });
 
-modeling.setColor([ shape ], { stroke: 'green' });
+modeling.moveElements([ subProcess, task ], { x: 100, y: 100 });

lib/model/Types.ts

@@ -1,5 +1,6 @@
 import {
   Connection,
+  Element,
   Label,
   Root,
   Shape
@@ -26,7 +27,7 @@ export type BpmnElement = {
   businessObject: any;
   di: any;
   type: string;
-};
+} & Element;
 
 export type BpmnConnection = Connection & BpmnElement;
 

lib/util/ModelUtil.js

@@ -2,15 +2,15 @@ import {
   some
 } from 'min-dash';
 
-
 /**
- * @typedef { import('../model').DiagramElement } DiagramElement
+ * @typedef { import('../model/Types').BpmnElement } BpmnElement
+ * @typedef { import('../model/Types').ModdleElement } ModdleElement
  */
 
 /**
  * Is an element of the given BPMN type?
  *
- * @param  {DiagramElement|ModdleElement} element
+ * @param  {BpmnElement|ModdleElement} element
  * @param  {string} type
  *
  * @return {boolean}
@@ -25,8 +25,8 @@ export function is(element, type) {
 /**
  * Return true if element has any of the given types.
  *
- * @param {DiagramElement} element
- * @param {Array<string>} types
+ * @param {BpmnElement|ModdleElement} element
+ * @param {string[]} types
  *
  * @return {boolean}
  */
@@ -39,7 +39,7 @@ export function isAny(element, types) {
 /**
  * Return the business object for a given element.
  *
- * @param {DiagramElement|ModdleElement} element
+ * @param {BpmnElement|ModdleElement} element
  *
  * @return {ModdleElement}
  */
@@ -50,7 +50,7 @@ export function getBusinessObject(element) {
 /**
  * Return the di object for a given element.
  *
- * @param {DiagramElement} element
+ * @param {BpmnElement} element
  *
  * @return {ModdleElement}
  */