marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-11 11:29:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

Adding text wrap and logic for placing nodes in the svg

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-07-23 10:16:54 +02:00
parent 6029c5371e
commit 7de68f0bf2
14 changed files with 564 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/diagrams/mindmap/mindmapRenderer.js
View File

@@ -1,7 +1,33 @@
/** Created by knut on 14-12-11. */
import { select } from 'd3';
import { log } from '../../logger';
import { getConfig } from '../../config';
import { log, getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI';
import svgDraw from './svgDraw';
/**
* @param {any} svg The svg element to draw the diagram onto
* @param {object} mindmap The maindmap data and hierarchy
* @param {object} conf The configuration object
*/
function drawNodes(svg, mindmap, conf) {
svgDraw.drawNode(svg, mindmap, conf);
if (mindmap.children) {
mindmap.children.forEach((child) => {
drawNodes(svg, child, conf);
});
}
}
function drawEdges() {}
/**
* @param node
* @param isRoot
*/
function layoutMindmap(node, isRoot) {}
/**
* @param node
* @param isRoot
*/
function positionNodes(node, isRoot) {}
/**
* Draws a an info picture in the tag with id: id based on the graph definition in text.
@@ -12,6 +38,7 @@ import { getConfig } from '../../config';
* @param diagObj
*/
export const draw = (text, id, version, diagObj) => {
const conf = getConfig();
try {
// const parser = infoParser.parser;
// parser.yy = db;
@@ -30,24 +57,40 @@ export const draw = (text, id, version, diagObj) => {
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
// Parse the graph definition
// parser.parse(text);
// log.debug('Parsed info diagram');
// Fetch the default direction, use TD if none was found
const svg = root.select('#' + id);
const g = svg.append('g');
const mm = diagObj.db.getMindmap();
g.append('text') // text label for the x axis
.attr('x', 100)
.attr('y', 40)
.attr('class', 'version')
.attr('font-size', '32px')
.style('text-anchor', 'middle')
.text('v ' + version);
// mm.x = 0;
// mm.y = 0;
// svgDraw.drawNode(g, mm, getConfig());
// mm.children.forEach((child) => {
// child.x = 200;
// child.y = 200;
// child.width = 200;
// svgDraw.drawNode(g, child, getConfig());
// });
svg.attr('height', 100);
svg.attr('width', 400);
// svg.attr('viewBox', '0 0 300 150');
// Draw the graph and start with drawing the nodes without proper position
// this gives us the size of the nodes and we can set the positions later
const nodesElem = svg.append('g');
nodesElem.attr('class', 'mindmap-nodes');
drawNodes(nodesElem, mm, conf);
// Next step is to layout the mindmap, giving each node a position
// layoutMindmap(mm, conf);
// After this we can draw, first the edges and the then nodes with the correct position
// drawEdges(svg, mm, conf);
// positionNodes(svg, mm, conf);
// Setup the view box and size of the svg element
setupGraphViewbox(undefined, svg, conf.mindmap.diagramPadding, conf.mindmap.useMaxWidth);
} catch (e) {
log.error('Error while rendering info diagram');
log.error(e.message);