GraphicsFactory.prototype._createContainer = function(
type, childrenGfx, parentIndex, isFrame
) {
var outerGfx = svgCreate('g');
svgClasses(outerGfx).add('djs-group');
// insert node at position
if (typeof parentIndex !== 'undefined') {
prependTo(outerGfx, childrenGfx, childrenGfx.childNodes[parentIndex]);
} else {
svgAppend(childrenGfx, outerGfx);
}
var gfx = svgCreate('g');
svgClasses(gfx).add('djs-element');
svgClasses(gfx).add('djs-' + type);
if (isFrame) {
svgClasses(gfx).add('djs-frame');
}
svgAppend(outerGfx, gfx);
// create visual
var visual = svgCreate('g');
svgClasses(visual).add('djs-visual');
svgAppend(gfx, visual);
return gfx;
};
function createVisual(shape) {
var group, preview, visual;
group = svgCreate('g');
svgAttr(group, styles.cls('djs-drag-group', [ 'no-events' ]));
svgAppend(canvas.getDefaultLayer(), group);
preview = svgCreate('g');
svgClasses(preview).add('djs-dragger');
svgAppend(group, preview);
translate(preview, shape.width / -2, shape.height / -2);
var visualGroup = svgCreate('g');
svgClasses(visualGroup).add('djs-visual');
svgAppend(preview, visualGroup);
visual = visualGroup;
// hijack renderer to draw preview
graphicsFactory.drawShape(visual, shape);
return group;
}
TouchFix.prototype.addBBoxMarker = function(svg) {
var markerStyle = {
fill: 'none',
class: 'outer-bound-marker'
};
var rect1 = svgCreate('rect');
svgAttr(rect1, {
x: -10000,
y: 10000,
width: 10,
height: 10
});
svgAttr(rect1, markerStyle);
svgAppend(svg, rect1);
var rect2 = svgCreate('rect');
svgAttr(rect2, {
x: 10000,
y: 10000,
width: 10,
height: 10
});
svgAttr(rect2, markerStyle);
svgAppend(svg, rect2);
};
export function addBendpoint(parentGfx, cls) {
var groupGfx = svgCreate('g');
svgClasses(groupGfx).add(BENDPOINT_CLS);
svgAppend(parentGfx, groupGfx);
var visual = svgCreate('circle');
svgAttr(visual, {
cx: 0,
cy: 0,
r: 4
});
svgClasses(visual).add('djs-visual');
svgAppend(groupGfx, visual);
var hit = svgCreate('circle');
svgAttr(hit, {
cx: 0,
cy: 0,
r: 10
});
svgClasses(hit).add('djs-hit');
svgAppend(groupGfx, hit);
if (cls) {
svgClasses(groupGfx).add(cls);
}
return groupGfx;
}
export function createLine(points, attrs) {
var line = svgCreate('polyline');
svgAttr(line, { points: toSVGPoints(points) });
if (attrs) {
svgAttr(line, attrs);
}
return line;
}
Grid.prototype._init = function() {
var defs = domQuery('defs', this._canvas._svg);
if (!defs) {
defs = svgCreate('defs');
svgAppend(this._canvas._svg, defs);
}
var pattern = this.pattern = svgCreate('pattern');
svgAttr(pattern, {
id: 'djs-grid-pattern',
width: SPACING,
height: SPACING,
patternUnits: 'userSpaceOnUse'
});
var circle = this.circle = svgCreate('circle');
svgAttr(circle, {
cx: 0.5,
cy: 0.5,
r: 0.5,
fill: GRID_COLOR
});
svgAppend(pattern, circle);
svgAppend(defs, pattern);
var grid = this.grid = svgCreate('rect');
svgAttr(grid, {
x: -(GRID_DIMENSIONS.width / 2),
y: -(GRID_DIMENSIONS.height / 2),
width: GRID_DIMENSIONS.width,
height: GRID_DIMENSIONS.height,
fill: 'url(#djs-grid-pattern)'
});
};
function createParallelDragger(parentGfx, position, alignment) {
var draggerGfx = svgCreate('g');
svgAppend(parentGfx, draggerGfx);
var width = 14,
height = 3,
padding = 6,
hitWidth = width + padding,
hitHeight = height + padding;
var visual = svgCreate('rect');
svgAttr(visual, {
x: -width / 2,
y: -height / 2,
width: width,
height: height
});
svgClasses(visual).add('djs-visual');
svgAppend(draggerGfx, visual);
var hit = svgCreate('rect');
svgAttr(hit, {
x: -hitWidth / 2,
y: -hitHeight / 2,
width: hitWidth,
height: hitHeight
});
svgClasses(hit).add('djs-hit');
svgAppend(draggerGfx, hit);
rotate(draggerGfx, alignment === 'v' ? 90 : 0, 0, 0);
return draggerGfx;
}
create: function(context) {
var container = canvas.getDefaultLayer(),
frame;
frame = context.frame = svgCreate('rect');
svgAttr(frame, {
class: 'djs-lasso-overlay',
width: 1,
height: 1,
x: 0,
y: 0
});
svgAppend(container, frame);
},
inject(function(elementFactory, graphicsFactory) {
// given
var g = svgCreate('g');
var connection = elementFactory.create('connection', {
type: 'bpmn:SequenceFlow',
waypoints: [
{ x: 0, y: 0 },
{ x: 10, y: 100 }
]
});
var gfx = graphicsFactory.drawConnection(g, connection);
expect(gfx).to.exist;
})();
export function addSegmentDragger(parentGfx, segmentStart, segmentEnd) {
var groupGfx = svgCreate('g'),
mid = getMidPoint(segmentStart, segmentEnd),
alignment = pointsAligned(segmentStart, segmentEnd);
svgAppend(parentGfx, groupGfx);
createParallelDragger(groupGfx, mid, alignment);
svgClasses(groupGfx).add(SEGMENT_DRAGGER_CLS);
svgClasses(groupGfx).add(alignment === 'h' ? 'horizontal' : 'vertical');
translate(groupGfx, mid.x, mid.y);
return groupGfx;
}
function getBendpointsContainer(element, create) {
var layer = canvas.getLayer('overlays'),
gfx = domQuery('.djs-bendpoints[data-element-id="' + cssEscape(element.id) + '"]', layer);
if (!gfx && create) {
gfx = svgCreate('g');
svgAttr(gfx, { 'data-element-id': element.id });
svgClasses(gfx).add('djs-bendpoints');
svgAppend(layer, gfx);
bindInteractionEvents(gfx, 'mousedown', element);
bindInteractionEvents(gfx, 'click', element);
bindInteractionEvents(gfx, 'dblclick', element);
}
return gfx;
}
GraphicsFactory.prototype._getChildren = function(element) {
var gfx = this._elementRegistry.getGraphics(element);
var childrenGfx;
// root element
if (!element.parent) {
childrenGfx = gfx;
} else {
childrenGfx = getChildren(gfx);
if (!childrenGfx) {
childrenGfx = svgCreate('g');
svgClasses(childrenGfx).add('djs-children');
svgAppend(gfx.parentNode, childrenGfx);
}
}
return childrenGfx;
};
eventBus.on([ 'shape.added', 'connection.added' ], function(event) {
var element = event.element,
gfx = event.gfx,
hit;
if (element.waypoints) {
hit = createLine(element.waypoints);
} else {
hit = svgCreate('rect');
svgAttr(hit, {
x: 0,
y: 0,
width: element.width,
height: element.height
});
}
svgAttr(hit, HIT_STYLE);
svgAppend(gfx, hit);
});