diff --git a/packages/mermaid-layout-elk/src/index.ts b/packages/mermaid-layout-elk/src/index.ts index 413212b0f..80652924c 100644 --- a/packages/mermaid-layout-elk/src/index.ts +++ b/packages/mermaid-layout-elk/src/index.ts @@ -484,6 +484,7 @@ export const render = async (data4Layout, svg, element, algorithm) => { 'elk.layered.spacing.edgeNodeBetweenLayers': '30', 'elk.algorithm': algorithm, 'nodePlacement.strategy': 'NETWORK_SIMPLEX', + 'spacing.nodeNode': 70, 'spacing.nodeNodeBetweenLayers': 25, 'spacing.edgeNode': 10, @@ -539,7 +540,6 @@ export const render = async (data4Layout, svg, element, algorithm) => { height: node?.labelData?.height || 100, }, ]; - // console.log('DAGA node dir: ', node.dir); if (node.dir) { node.layoutOptions = { 'elk.direction': dir2ElkDirection(node.dir), diff --git a/packages/mermaid/src/rendering-util/inserElementsForSize.js b/packages/mermaid/src/rendering-util/inserElementsForSize.js index d9a965c50..617c789f6 100644 --- a/packages/mermaid/src/rendering-util/inserElementsForSize.js +++ b/packages/mermaid/src/rendering-util/inserElementsForSize.js @@ -1,6 +1,6 @@ // import type { LayoutData } from './types'; import { select } from 'd3'; -import { insertNode } from '../dagre-wrapper/nodes.js' +import { insertNode } from '../dagre-wrapper/nodes.js'; // export const getDiagramElements = (id: string, securityLevel: any) => { export const getDiagramElements = (id, securityLevel) => { @@ -13,41 +13,47 @@ export const getDiagramElements = (id, securityLevel) => { ? select(sandboxElement.nodes()[0].contentDocument.body) : select('body'); - const svg = root.select(`[id="${id}"]`); - console.log('SVG:', svg, svg.node(), 'id:',id,'root:', root, root.node()); + const svg = root.select(`[id="${id}"]`); - // console.log('SVG:', svg, svg.node(), 'root:', root, 'sandboxElement:', sandboxElement, 'id:', id, 'securityLevel:', securityLevel); // Run the renderer. This is what draws the final graph. // @ts-ignore todo: fix this const element = root.select('#' + id + ' g'); return { svg, element }; -} +}; // export function insertElementsForSize(el: SVGElement, data: LayoutData): void { export function insertElementsForSize(el, data) { const nodesElem = el.insert('g').attr('class', 'nodes'); const edgesElem = el.insert('g').attr('class', 'edges'); - console.log('Inserting elements for size:', data); - data.nodes.forEach(async item => { + data.nodes.forEach(async (item) => { item.shape = 'rect'; - console.log('Inserting node id:', item.id, 'shape:', item.shape); - const e = await insertNode(nodesElem, {...item, class: 'default flowchart-label', labelStyle: '', x:0, y:0, width: 100,rx:0,ry:0, height: 100, shape: 'rect', padding:8}); - console.log('Inserted node:', e, e.node()); - // Create a new DOM element - // const element = document.createElement('div'); + const e = await insertNode(nodesElem, { + ...item, + class: 'default flowchart-label', + labelStyle: '', + x: 0, + y: 0, + width: 100, + rx: 0, + ry: 0, + height: 100, + shape: 'rect', + padding: 8, + }); + // Create a new DOM element + // const element = document.createElement('div'); - // // Set the content of the element to the name of the item - // element.textContent = item.name; + // // Set the content of the element to the name of the item + // element.textContent = item.name; - // // Set the size of the element to the size of the item - // element.style.width = `${item.size}px`; - // element.style.height = `${item.size}px`; + // // Set the size of the element to the size of the item + // element.style.width = `${item.size}px`; + // element.style.height = `${item.size}px`; - // Append the element to the body of the document - // document.body.appendChild(element); + // Append the element to the body of the document + // document.body.appendChild(element); }); - console.log('Element', el, 'data:', data); } export default insertElementsForSize; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index e4dedefdc..c6fa43f72 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -414,22 +414,18 @@ function insertMidpoint(p1, p2) { * @param points */ function extractCornerPoints(points) { - // console.log('abc99 extractCornerPoints: ', points); const cornerPoints = []; const cornerPointPositions = []; for (let i = 1; i < points.length - 1; i++) { const prev = points[i - 1]; const curr = points[i]; const next = points[i + 1]; - // console.log('abc99 extractCornerPoints: ', prev, curr, next); if ( prev.x === curr.x && curr.y === next.y && Math.abs(curr.x - next.x) > 5 && Math.abs(curr.y - prev.y) > 5 ) { - // console.log('abc99 extractCornerPoints got one... '); - console.log('abc99 extractCornerPoints got one... '); cornerPoints.push(curr); cornerPointPositions.push(i); } else if ( @@ -438,7 +434,6 @@ function extractCornerPoints(points) { Math.abs(curr.x - prev.x) > 5 && Math.abs(curr.y - next.y) > 5 ) { - console.log('abc99 extractCornerPoints got one... ', curr.x - prev.x, curr.y - next.y); cornerPoints.push(curr); cornerPointPositions.push(i); } @@ -463,17 +458,12 @@ const fixCorners = function (lineData) { const { cornerPoints, cornerPointPositions } = extractCornerPoints(lineData); const newLineData = []; let lastCorner = 0; - if (lineData.length > 3) { - console.log('abc99 fixCorners: ', lineData); - } for (let i = 0; i < lineData.length; i++) { if (cornerPointPositions.includes(i)) { const prevPoint = lineData[i - 1]; const nextPoint = lineData[i + 1]; const cornerPoint = lineData[i]; - // newLineData.push(lineData[i]); - // Find point 5 points back and push it to the new array - // console.log('abc99 fixCorners git one: ', cornerPointPositions); + // Find a new point on the line point 5 points back and push it to the new array const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, 5); const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, 5); @@ -503,23 +493,6 @@ const fixCorners = function (lineData) { }; // } } - if (lineData.length > 3) { - console.log( - '########### abc99\nCorner point', - cornerPoint, - a, - '\n new points prev: ', - newPrevPoint, - 'Next', - newNextPoint, - 'xDiff: ', - xDiff, - 'yDiff', - yDiff, - 'newCornerPoint', - newCornerPoint - ); - } // newLineData.push(cornerPoint); newLineData.push(newCornerPoint, newNextPoint); @@ -527,9 +500,6 @@ const fixCorners = function (lineData) { newLineData.push(lineData[i]); } } - if (lineData.length > 3) { - console.log('abc99 fixCorners done: ', newLineData); - } return newLineData; }; @@ -538,7 +508,6 @@ const fixCorners = function (lineData) { * @param lineData */ function roundedCornersLine(lineData) { - console.log('abc99 roundedCornersLine: ', lineData); const newLineData = fixCorners(lineData); let path = ''; for (let i = 0; i < newLineData.length; i++) { @@ -554,7 +523,6 @@ function roundedCornersLine(lineData) { } export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, id) { const { handdrawnSeed } = getConfig(); - console.log('abc88 InsertEdge - edge: ', edge); let points = edge.points; let pointsHasChanged = false; const tail = edge.start; @@ -593,7 +561,6 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i let lineData = points.filter((p) => !Number.isNaN(p.y)); const { cornerPoints, cornerPointPositions } = extractCornerPoints(lineData); lineData = fixCorners(lineData); - // console.log('abc99 lineData: ', lineData, points); let lastPoint = lineData[0]; if (lineData.length > 1) { lastPoint = lineData[lineData.length - 1]; @@ -604,7 +571,6 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i const midPoint = { x: secondLastPoint.x + 3 * diffX, y: secondLastPoint.y + 3 * diffY }; lineData.splice(-1, 0, midPoint); } - // console.log('abc99 InsertEdge 3: ', lineData); // This is the accessor function we talked about above let curve; curve = curveBasis; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-node.js b/packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-node.js index 54a88ba61..6bc1ea480 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-node.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-node.js @@ -3,7 +3,6 @@ * @param point */ function intersectNode(node, point) { - // console.info('Intersect Node'); return node.intersect(point); } diff --git a/packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-polygon.js b/packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-polygon.js index 6941372c7..39f6fddeb 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-polygon.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-polygon.js @@ -48,7 +48,6 @@ function intersectPolygon(node, polyPoints, point) { } if (!intersections.length) { - // console.log('NO INTERSECTION FOUND, RETURN NODE CENTER', node); return node; } diff --git a/packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-rect.js b/packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-rect.js index 13c596777..daf6b5eea 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-rect.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-rect.js @@ -1,5 +1,4 @@ const intersectRect = (node, point) => { - console.log('intersect.rect abc88', node, point); var x = node.x; var y = node.y;