Skip to content

Commit

Permalink
chore(drilldown): fix JSDoc and code style
Browse files Browse the repository at this point in the history
  • Loading branch information
@philippfromme
philippfromme committed Apr 13, 2023
1 parent d705cea commit e633728
Show file tree
Hide file tree
Showing 4 changed files with 191 additions and 96 deletions.
58 changes: 34 additions & 24 deletions lib/features/drilldown/DrilldownBreadcrumbs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,32 +7,40 @@ import {
getPlaneIdFromShape
} from '../../util/DrilldownUtil';

/**
* @typedef {import('diagram-js/lib/core/Canvas').default} Canvas
* @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry
* @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
*
* @typedef {import('../../model/Types').BpmnElement} BpmnElement
* @typedef {import('../../model/Types').BpmnShape} BpmnShape
*/

var OPEN_CLASS = 'bjs-breadcrumbs-shown';


/**
* Adds overlays that allow switching planes on collapsed subprocesses.
*
* @param {eventBus} eventBus
* @param {elementRegistry} elementRegistry
* @param {overlays} overlays
* @param {canvas} canvas
* @param {EventBus} eventBus
* @param {ElementRegistry} elementRegistry
* @param {Canvas} canvas
*/
export default function DrilldownBreadcrumbs(eventBus, elementRegistry, overlays, canvas) {
export default function DrilldownBreadcrumbs(eventBus, elementRegistry, canvas) {
var breadcrumbs = domify('<ul class="bjs-breadcrumbs"></ul>');
var container = canvas.getContainer();
var containerClasses = classes(container);
container.appendChild(breadcrumbs);

var boParents = [];
var businessObjectParents = [];

// update breadcrumbs if name or ID of the primary shape changes
eventBus.on('element.changed', function(e) {
var shape = e.element,
bo = getBusinessObject(shape);
eventBus.on('element.changed', function(event) {
var shape = event.element,
businessObject = getBusinessObject(shape);

var isPresent = find(boParents, function(el) {
return el === bo;
var isPresent = find(businessObjectParents, function(element) {
return element === businessObject;
});

if (!isPresent) {
Expand All @@ -46,14 +54,14 @@ export default function DrilldownBreadcrumbs(eventBus, elementRegistry, overlays
* Updates the displayed breadcrumbs. If no element is provided, only the
* labels are updated.
*
* @param {djs.model.Base} [element]
* @param {BpmnElement} [element]
*/
function updateBreadcrumbs(element) {
if (element) {
boParents = getBoParentChain(element);
businessObjectParents = getBusinessObjectParentChain(element);
}

var path = boParents.map(function(parent) {
var path = businessObjectParents.map(function(parent) {
var title = escapeHTML(parent.name || parent.id);
var link = domify('<li><span class="bjs-crumb"><a title="' + title + '">' + title + '</a></span></li>');

Expand All @@ -63,8 +71,9 @@ export default function DrilldownBreadcrumbs(eventBus, elementRegistry, overlays
// element in the elementRegisty. Instead, we search for the corresponding participant
if (!parentPlane && is(parent, 'bpmn:Process')) {
var participant = elementRegistry.find(function(element) {
var bo = getBusinessObject(element);
return bo && bo.processRef && bo.processRef === parent;
var businessObject = getBusinessObject(element);

return businessObject && businessObject.get('processRef') && businessObject.get('processRef') === parent;
});

parentPlane = canvas.findRoot(participant.id);
Expand All @@ -81,10 +90,11 @@ export default function DrilldownBreadcrumbs(eventBus, elementRegistry, overlays

// show breadcrumbs and expose state to .djs-container
var visible = path.length > 1;

containerClasses.toggle(OPEN_CLASS, visible);

path.forEach(function(el) {
breadcrumbs.appendChild(el);
path.forEach(function(element) {
breadcrumbs.appendChild(element);
});
}

Expand All @@ -94,7 +104,7 @@ export default function DrilldownBreadcrumbs(eventBus, elementRegistry, overlays

}

DrilldownBreadcrumbs.$inject = [ 'eventBus', 'elementRegistry', 'overlays', 'canvas' ];
DrilldownBreadcrumbs.$inject = [ 'eventBus', 'elementRegistry', 'canvas' ];


// helpers //////////
Expand All @@ -103,16 +113,16 @@ DrilldownBreadcrumbs.$inject = [ 'eventBus', 'elementRegistry', 'overlays', 'can
* Returns the parents for the element using the business object chain,
* starting with the root element.
*
* @param {djs.model.Shape} child
* @param {BpmnShape} child
*
* @returns {Array<djs.model.Shape>} parents
* @returns {BpmnShape}
*/
function getBoParentChain(child) {
var bo = getBusinessObject(child);
function getBusinessObjectParentChain(child) {
var businessObject = getBusinessObject(child);

var parents = [];

for (var element = bo; element; element = element.$parent) {
for (var element = businessObject; element; element = element.$parent) {
if (is(element, 'bpmn:SubProcess') || is(element, 'bpmn:Process')) {
parents.push(element);
}
Expand Down
9 changes: 7 additions & 2 deletions lib/features/drilldown/DrilldownCentering.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
import { is } from '../../util/ModelUtil';

/**
* @typedef {import('diagram-js/lib/core/Canvas').default} Canvas
* @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
*/

/**
* Move collapsed subprocesses into view when drilling down.
*
* Zoom and scroll are saved in a session.
*
* @param {eventBus} eventBus
* @param {canvas} canvas
* @param {EventBus} eventBus
* @param {Canvas} canvas
*/
export default function DrilldownCentering(eventBus, canvas) {

Expand Down
110 changes: 70 additions & 40 deletions lib/features/drilldown/DrilldownOverlayBehavior.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,32 @@
import inherits from 'inherits-browser';

import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
import { is } from '../../util/ModelUtil';
import { getBusinessObject, is } from '../../util/ModelUtil';
import { classes, domify } from 'min-dom';
import { getPlaneIdFromShape } from '../../util/DrilldownUtil';

/**
* @typedef {import('diagram-js/lib/core/Canvas').default} Canvas
* @typedef {import('diagram-js/lib/core/ElementRegistry').default} ElementRegistry
* @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
* @typedef {import('diagram-js/lib/features/overlays/Overlays').default} Overlays
*
* @typedef {import('../../model/Types').BpmnElement} BpmnElement
* @typedef {import('../../model/Types').BpmnParent} BpmnParent
* @typedef {import('../../model/Types').BpmnShape} BpmnShape
*/

var LOW_PRIORITY = 250;
var ARROW_DOWN_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.81801948,3.50735931 L10.4996894,9.1896894 L10.5,4 L12,4 L12,12 L4,12 L4,10.5 L9.6896894,10.4996894 L3.75735931,4.56801948 C3.46446609,4.27512627 3.46446609,3.80025253 3.75735931,3.50735931 C4.05025253,3.21446609 4.52512627,3.21446609 4.81801948,3.50735931 Z"/></svg>';

var EMPTY_MARKER = 'bjs-drilldown-empty';

/**
* @param {Canvas} canvas
* @param {EventBus} eventBus
* @param {ElementRegistry} elementRegistry
* @param {Overlays} overlays
*/
export default function DrilldownOverlayBehavior(
canvas, eventBus, elementRegistry, overlays
) {
Expand All @@ -26,10 +43,10 @@ export default function DrilldownOverlayBehavior(
var shape = context.shape;

// Add overlay to the collapsed shape
if (self.canDrillDown(shape)) {
self.addOverlay(shape);
if (self._canDrillDown(shape)) {
self._addOverlay(shape);
} else {
self.removeOverlay(shape);
self._removeOverlay(shape);
}
}, true);

Expand All @@ -38,10 +55,10 @@ export default function DrilldownOverlayBehavior(
var shape = context.shape;

// Add overlay to the collapsed shape
if (self.canDrillDown(shape)) {
self.addOverlay(shape);
if (self._canDrillDown(shape)) {
self._addOverlay(shape);
} else {
self.removeOverlay(shape);
self._removeOverlay(shape);
}
}, true);

Expand All @@ -53,13 +70,13 @@ export default function DrilldownOverlayBehavior(
shape = context.shape;

// Add overlay to the collapsed shape
if (self.canDrillDown(shape)) {
self.addOverlay(shape);
if (self._canDrillDown(shape)) {
self._addOverlay(shape);
}

self.updateDrilldownOverlay(oldParent);
self.updateDrilldownOverlay(newParent);
self.updateDrilldownOverlay(shape);
self._updateDrilldownOverlay(oldParent);
self._updateDrilldownOverlay(newParent);
self._updateDrilldownOverlay(shape);
}, true);


Expand All @@ -70,81 +87,94 @@ export default function DrilldownOverlayBehavior(
shape = context.shape;

// Add overlay to the collapsed shape
if (self.canDrillDown(shape)) {
self.addOverlay(shape);
if (self._canDrillDown(shape)) {
self._addOverlay(shape);
}

self.updateDrilldownOverlay(oldParent);
self.updateDrilldownOverlay(newParent);
self.updateDrilldownOverlay(shape);
self._updateDrilldownOverlay(oldParent);
self._updateDrilldownOverlay(newParent);
self._updateDrilldownOverlay(shape);
}, true);


eventBus.on('import.render.complete', function() {
elementRegistry.filter(function(e) {
return self.canDrillDown(e);
return self._canDrillDown(e);
}).map(function(el) {
self.addOverlay(el);
self._addOverlay(el);
});
});

}

inherits(DrilldownOverlayBehavior, CommandInterceptor);

DrilldownOverlayBehavior.prototype.updateDrilldownOverlay = function(shape) {
/**
* @param {BpmnShape} shape
*/
DrilldownOverlayBehavior.prototype._updateDrilldownOverlay = function(shape) {
var canvas = this._canvas;

if (!shape) {
return;
}

var root = canvas.findRoot(shape);

if (root) {
this.updateOverlayVisibility(root);
this._updateOverlayVisibility(root);
}
};


DrilldownOverlayBehavior.prototype.canDrillDown = function(element) {
/**
* @param {BpmnElement} element
*
* @return {boolean}
*/
DrilldownOverlayBehavior.prototype._canDrillDown = function(element) {
var canvas = this._canvas;

return is(element, 'bpmn:SubProcess') && canvas.findRoot(getPlaneIdFromShape(element));
};

/**
* Updates visibility of the drilldown overlay. If the plane has no elements,
* the drilldown will be only shown when the element is selected.
* Update the visibility of the drilldown overlay. If the plane has no elements,
* the drilldown will only be shown when the element is selected.
*
* @param {djs.model.Shape|djs.model.Root} element collapsed shape or root element
* @param {BpmnParent} element The collapsed root or shape.
*/
DrilldownOverlayBehavior.prototype.updateOverlayVisibility = function(element) {
DrilldownOverlayBehavior.prototype._updateOverlayVisibility = function(element) {
var overlays = this._overlays;

var bo = element.businessObject;
var businessObject = getBusinessObject(element);

var overlay = overlays.get({ element: bo.id, type: 'drilldown' })[0];
var overlay = overlays.get({ element: businessObject.id, type: 'drilldown' })[0];

if (!overlay) {
return;
}

var hasContent = bo && bo.flowElements && bo.flowElements.length;
classes(overlay.html).toggle(EMPTY_MARKER, !hasContent);
var hasFlowElements = businessObject
&& businessObject.get('flowElements')
&& businessObject.get('flowElements').length;

classes(overlay.html).toggle(EMPTY_MARKER, !hasFlowElements);
};

/**
* Attaches a drilldown button to the given element. We assume that the plane has
* the same id as the element.
* Add a drilldown button to the given element assuming the plane has the same
* ID as the element.
*
* @param {djs.model.Shape} element collapsed shape
* @param {BpmnShape} element The collapsed shape.
*/
DrilldownOverlayBehavior.prototype.addOverlay = function(element) {
var canvas = this._canvas;
var overlays = this._overlays;
DrilldownOverlayBehavior.prototype._addOverlay = function(element) {
var canvas = this._canvas,
overlays = this._overlays;

var existingOverlays = overlays.get({ element: element, type: 'drilldown' });

if (existingOverlays.length) {
this.removeOverlay(element);
this._removeOverlay(element);
}

var button = domify('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');
Expand All @@ -161,10 +191,10 @@ DrilldownOverlayBehavior.prototype.addOverlay = function(element) {
html: button
});

this.updateOverlayVisibility(element);
this._updateOverlayVisibility(element);
};

DrilldownOverlayBehavior.prototype.removeOverlay = function(element) {
DrilldownOverlayBehavior.prototype._removeOverlay = function(element) {
var overlays = this._overlays;

overlays.remove({
Expand Down

0 comments on commit e633728

Please sign in to comment.