This commit is contained in:
Sidharth Vinod
2023-08-29 23:14:28 +05:30
parent 0ebea7744b
commit 345b75cc0e
3 changed files with 37 additions and 26 deletions

View File

@@ -456,46 +456,42 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
curve = edge.curve; curve = edge.curve;
} }
const offsets = { const markerOffsets = {
dependency: 6,
composition: 18,
extension: 18,
aggregation: 18, aggregation: 18,
lollipop: 12, extension: 18,
composition: 18,
dependency: 6,
lollipop: 13.5,
}; };
const lineFunction = line() const lineFunction = line()
.x(function (d, i, data) { .x(function (d, i, data) {
debugger;
let offset = 0; let offset = 0;
if (i === 0 && edge.arrowTypeStart !== 'none') { if (i === 0 && Object.hasOwn(markerOffsets, edge.arrowTypeStart)) {
const { angle, deltaX, deltaY } = calculateDeltaAndAngle(data[0], data[1]); const { angle, deltaX } = calculateDeltaAndAngle(data[0], data[1]);
offset = offsets[edge.arrowTypeStart] * Math.cos(angle) * (deltaX <= 0 ? -1 : 1) || 0; offset = markerOffsets[edge.arrowTypeStart] * Math.cos(angle) * (deltaX >= 0 ? 1 : -1) || 0;
console.log('ffff xstart', { offset, angle, deltaX, deltaY }); } else if (i === data.length - 1 && Object.hasOwn(markerOffsets, edge.arrowTypeEnd)) {
} else if (i === data.length - 1 && edge.arrowTypeEnd !== 'none') { const { angle, deltaX } = calculateDeltaAndAngle(
const { angle, deltaX, deltaY } = calculateDeltaAndAngle(
data[data.length - 1], data[data.length - 1],
data[data.length - 2] data[data.length - 2]
); );
offset = offsets[edge.arrowTypeEnd] * Math.cos(angle) * (deltaX <= 0 ? -1 : 1) || 0; offset = markerOffsets[edge.arrowTypeEnd] * Math.cos(angle) * (deltaX >= 0 ? 1 : -1) || 0;
console.log('ffff xend', { offset, angle, deltaX, deltaY });
} }
return d.x + offset; return d.x + offset;
}) })
.y(function (d, i, data) { .y(function (d, i, data) {
debugger;
let offset = 0; let offset = 0;
if (i === 0 && edge.arrowTypeStart !== 'none') { if (i === 0 && Object.hasOwn(markerOffsets, edge.arrowTypeStart)) {
const { angle, deltaY, deltaX } = calculateDeltaAndAngle(data[0], data[1]); const { angle, deltaY } = calculateDeltaAndAngle(data[0], data[1]);
offset = offsets[edge.arrowTypeStart] * Math.abs(Math.sin(angle)) || 0; offset =
console.log('ffff ystart', { offset, angle, deltaX, deltaY, sin: Math.sin(angle) }); markerOffsets[edge.arrowTypeStart] * Math.abs(Math.sin(angle)) * (deltaY >= 0 ? 1 : -1);
} else if (i === data.length - 1 && edge.arrowTypeEnd !== 'none') { } else if (i === data.length - 1 && Object.hasOwn(markerOffsets, edge.arrowTypeEnd)) {
const { angle, deltaY, deltaX } = calculateDeltaAndAngle( const { angle, deltaY } = calculateDeltaAndAngle(
data[data.length - 1], data[data.length - 1],
data[data.length - 2] data[data.length - 2]
); );
offset = offsets[edge.arrowTypeEnd] * -Math.abs(Math.sin(angle)) || 0; offset =
console.log('ffff yend', { offset, angle, deltaX, deltaY }); markerOffsets[edge.arrowTypeEnd] * Math.abs(Math.sin(angle)) * (deltaY >= 0 ? 1 : -1);
} }
return d.y + offset; return d.y + offset;
}) })

View File

@@ -125,7 +125,7 @@ const lollipop = (elem, type) => {
.append('marker') .append('marker')
.attr('id', type + '-lollipopStart') .attr('id', type + '-lollipopStart')
.attr('class', 'marker lollipop ' + type) .attr('class', 'marker lollipop ' + type)
.attr('refX', 12) .attr('refX', 13)
.attr('refY', 7) .attr('refY', 7)
.attr('markerWidth', 190) .attr('markerWidth', 190)
.attr('markerHeight', 240) .attr('markerHeight', 240)
@@ -133,7 +133,23 @@ const lollipop = (elem, type) => {
.append('circle') .append('circle')
.attr('stroke', 'black') .attr('stroke', 'black')
.attr('fill', 'transparent') .attr('fill', 'transparent')
.attr('cx', 6) .attr('cx', 7)
.attr('cy', 7)
.attr('r', 6);
elem
.append('defs')
.append('marker')
.attr('id', type + '-lollipopEnd')
.attr('class', 'marker lollipop ' + type)
.attr('refX', 1)
.attr('refY', 7)
.attr('markerWidth', 190)
.attr('markerHeight', 240)
.attr('orient', 'auto')
.append('circle')
.attr('stroke', 'black')
.attr('fill', 'transparent')
.attr('cx', 7)
.attr('cy', 7) .attr('cy', 7)
.attr('r', 6); .attr('r', 6);
}; };

View File

@@ -130,7 +130,6 @@ export const addClasses = function (
// TODO V10: Flowchart ? Keeping flowchart for backwards compatibility. Remove in next major release // TODO V10: Flowchart ? Keeping flowchart for backwards compatibility. Remove in next major release
padding: getConfig().flowchart?.padding ?? getConfig().class?.padding, padding: getConfig().flowchart?.padding ?? getConfig().class?.padding,
}; };
console.log('node', node, structuredClone(node));
g.setNode(vertex.id, node); g.setNode(vertex.id, node);
if (parent) { if (parent) {