138 lines
3.1 KiB
JavaScript
138 lines
3.1 KiB
JavaScript
import {
|
|
append as svgAppend,
|
|
attr as svgAttr,
|
|
create as svgCreate,
|
|
remove as svgRemove
|
|
} from 'tiny-svg';
|
|
|
|
import {
|
|
getBusinessObject,
|
|
is
|
|
} from '../../util/ModelUtil';
|
|
|
|
import {
|
|
translate
|
|
} from 'diagram-js/lib/util/SvgTransformUtil';
|
|
|
|
var MARKER_HIDDEN = 'djs-element-hidden',
|
|
MARKER_LABEL_HIDDEN = 'djs-label-hidden';
|
|
|
|
|
|
export default function LabelEditingPreview(
|
|
eventBus, canvas, elementRegistry,
|
|
pathMap) {
|
|
|
|
var self = this;
|
|
|
|
var defaultLayer = canvas.getDefaultLayer();
|
|
|
|
var element, absoluteElementBBox, gfx;
|
|
|
|
eventBus.on('directEditing.activate', function(context) {
|
|
var activeProvider = context.active;
|
|
|
|
element = activeProvider.element.label || activeProvider.element;
|
|
|
|
// text annotation
|
|
if (is(element, 'bpmn:TextAnnotation')) {
|
|
absoluteElementBBox = canvas.getAbsoluteBBox(element);
|
|
|
|
gfx = svgCreate('g');
|
|
|
|
var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
|
|
xScaleFactor: 1,
|
|
yScaleFactor: 1,
|
|
containerWidth: element.width,
|
|
containerHeight: element.height,
|
|
position: {
|
|
mx: 0.0,
|
|
my: 0.0
|
|
}
|
|
});
|
|
|
|
var path = self.path = svgCreate('path');
|
|
|
|
svgAttr(path, {
|
|
d: textPathData,
|
|
strokeWidth: 2,
|
|
stroke: getStrokeColor(element)
|
|
});
|
|
|
|
svgAppend(gfx, path);
|
|
|
|
svgAppend(defaultLayer, gfx);
|
|
|
|
translate(gfx, element.x, element.y);
|
|
}
|
|
|
|
if (is(element, 'bpmn:TextAnnotation') ||
|
|
element.labelTarget) {
|
|
canvas.addMarker(element, MARKER_HIDDEN);
|
|
} else if (is(element, 'bpmn:Task') ||
|
|
is(element, 'bpmn:CallActivity') ||
|
|
is(element, 'bpmn:SubProcess') ||
|
|
is(element, 'bpmn:Participant')) {
|
|
canvas.addMarker(element, MARKER_LABEL_HIDDEN);
|
|
}
|
|
});
|
|
|
|
eventBus.on('directEditing.resize', function(context) {
|
|
|
|
// text annotation
|
|
if (is(element, 'bpmn:TextAnnotation')) {
|
|
var height = context.height,
|
|
dy = context.dy;
|
|
|
|
var newElementHeight = Math.max(element.height / absoluteElementBBox.height * (height + dy), 0);
|
|
|
|
var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
|
|
xScaleFactor: 1,
|
|
yScaleFactor: 1,
|
|
containerWidth: element.width,
|
|
containerHeight: newElementHeight,
|
|
position: {
|
|
mx: 0.0,
|
|
my: 0.0
|
|
}
|
|
});
|
|
|
|
svgAttr(self.path, {
|
|
d: textPathData
|
|
});
|
|
}
|
|
});
|
|
|
|
eventBus.on([ 'directEditing.complete', 'directEditing.cancel' ], function(context) {
|
|
var activeProvider = context.active;
|
|
|
|
if (activeProvider) {
|
|
canvas.removeMarker(activeProvider.element.label || activeProvider.element, MARKER_HIDDEN);
|
|
canvas.removeMarker(element, MARKER_LABEL_HIDDEN);
|
|
}
|
|
|
|
element = undefined;
|
|
absoluteElementBBox = undefined;
|
|
|
|
if (gfx) {
|
|
svgRemove(gfx);
|
|
|
|
gfx = undefined;
|
|
}
|
|
});
|
|
}
|
|
|
|
LabelEditingPreview.$inject = [
|
|
'eventBus',
|
|
'canvas',
|
|
'elementRegistry',
|
|
'pathMap'
|
|
];
|
|
|
|
|
|
// helpers ///////////////////
|
|
|
|
function getStrokeColor(element, defaultColor) {
|
|
var bo = getBusinessObject(element);
|
|
|
|
return bo.di.get('stroke') || defaultColor || 'black';
|
|
} |