From 58d692e6f5e365707143a531a7ccfdc2c21afc16 Mon Sep 17 00:00:00 2001 From: Caleb Usadi Date: Wed, 26 Oct 2022 00:16:43 -0400 Subject: [PATCH 1/2] Convert attr to style --- .../mermaid/src/diagrams/er/erRenderer.js | 96 ++++++++----------- 1 file changed, 42 insertions(+), 54 deletions(-) diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js index a4d5c8bd1..582a63cea 100644 --- a/packages/mermaid/src/diagrams/er/erRenderer.js +++ b/packages/mermaid/src/diagrams/er/erRenderer.js @@ -81,12 +81,10 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { .attr('id', `${attrPrefix}-type`) .attr('x', 0) .attr('y', 0) - .attr('dominant-baseline', 'middle') - .attr('text-anchor', 'left') - .attr( - 'style', - 'font-family: ' + getConfig().fontFamily + '; font-size: ' + attrFontSize + 'px' - ) + .style('dominant-baseline', 'middle') + .style('text-anchor', 'left') + .style('font-family', getConfig().fontFamily) + .style('font-size', attrFontSize + 'px') .text(attributeType); // Add a text node for the attribute name @@ -96,12 +94,10 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { .attr('id', `${attrPrefix}-name`) .attr('x', 0) .attr('y', 0) - .attr('dominant-baseline', 'middle') - .attr('text-anchor', 'left') - .attr( - 'style', - 'font-family: ' + getConfig().fontFamily + '; font-size: ' + attrFontSize + 'px' - ) + .style('dominant-baseline', 'middle') + .style('text-anchor', 'left') + .style('font-family', getConfig().fontFamily) + .style('font-size', attrFontSize + 'px') .text(item.attributeName); const attributeNode = {}; @@ -122,12 +118,10 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { .attr('id', `${attrPrefix}-key`) .attr('x', 0) .attr('y', 0) - .attr('dominant-baseline', 'middle') - .attr('text-anchor', 'left') - .attr( - 'style', - 'font-family: ' + getConfig().fontFamily + '; font-size: ' + attrFontSize + 'px' - ) + .style('dominant-baseline', 'middle') + .style('text-anchor', 'left') + .style('font-family', getConfig().fontFamily) + .style('font-size', attrFontSize + 'px') .text(item.attributeKeyType || ''); attributeNode.kn = keyTypeNode; @@ -143,12 +137,10 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { .attr('id', `${attrPrefix}-comment`) .attr('x', 0) .attr('y', 0) - .attr('dominant-baseline', 'middle') - .attr('text-anchor', 'left') - .attr( - 'style', - 'font-family: ' + getConfig().fontFamily + '; font-size: ' + attrFontSize + 'px' - ) + .style('dominant-baseline', 'middle') + .style('text-anchor', 'left') + .style('font-family', getConfig().fontFamily) + .style('font-size', attrFontSize + 'px') .text(item.attributeComment || ''); attributeNode.cn = commentNode; @@ -218,9 +210,9 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { const typeRect = groupNode .insert('rect', '#' + attributeNode.tn.node().id) .attr('class', `er ${attribStyle}`) - .attr('fill', conf.fill) - .attr('fill-opacity', '100%') - .attr('stroke', conf.stroke) + .style('fill', conf.fill) + .style('fill-opacity', '100%') + .style('stroke', conf.stroke) .attr('x', 0) .attr('y', heightOffset) .attr('width', maxTypeWidth + widthPadding * 2 + spareColumnWidth) @@ -238,9 +230,9 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { const nameRect = groupNode .insert('rect', '#' + attributeNode.nn.node().id) .attr('class', `er ${attribStyle}`) - .attr('fill', conf.fill) - .attr('fill-opacity', '100%') - .attr('stroke', conf.stroke) + .style('fill', conf.fill) + .style('fill-opacity', '100%') + .style('stroke', conf.stroke) .attr('x', nameXOffset) .attr('y', heightOffset) .attr('width', maxNameWidth + widthPadding * 2 + spareColumnWidth) @@ -260,9 +252,9 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { const keyTypeRect = groupNode .insert('rect', '#' + attributeNode.kn.node().id) .attr('class', `er ${attribStyle}`) - .attr('fill', conf.fill) - .attr('fill-opacity', '100%') - .attr('stroke', conf.stroke) + .style('fill', conf.fill) + .style('fill-opacity', '100%') + .style('stroke', conf.stroke) .attr('x', keyTypeAndCommentXOffset) .attr('y', heightOffset) .attr('width', maxKeyWidth + widthPadding * 2 + spareColumnWidth) @@ -283,9 +275,9 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { groupNode .insert('rect', '#' + attributeNode.cn.node().id) .attr('class', `er ${attribStyle}`) - .attr('fill', conf.fill) - .attr('fill-opacity', '100%') - .attr('stroke', conf.stroke) + .style('fill', conf.fill) + .style('fill-opacity', '100%') + .style('stroke', conf.stroke) .attr('x', keyTypeAndCommentXOffset) .attr('y', heightOffset) .attr('width', maxCommentWidth + widthPadding * 2 + spareColumnWidth) @@ -339,12 +331,10 @@ const drawEntities = function (svgNode, entities, graph) { .attr('id', textId) .attr('x', 0) .attr('y', 0) - .attr('dominant-baseline', 'middle') - .attr('text-anchor', 'middle') - .attr( - 'style', - 'font-family: ' + getConfig().fontFamily + '; font-size: ' + conf.fontSize + 'px' - ) + .style('dominant-baseline', 'middle') + .style('text-anchor', 'middle') + .style('font-family', getConfig().fontFamily) + .style('font-size', conf.fontSize + 'px') .text(entityName); const { width: entityWidth, height: entityHeight } = drawAttributes( @@ -358,8 +348,8 @@ const drawEntities = function (svgNode, entities, graph) { .insert('rect', '#' + textId) .attr('class', 'er entityBox') .style('fill', conf.fill) - .attr('fill-opacity', '100%') - .attr('stroke', conf.stroke) + .style('fill-opacity', '100%') + .style('stroke', conf.stroke) .attr('x', 0) .attr('y', 0) .attr('width', entityWidth) @@ -462,8 +452,8 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) { .insert('path', '#' + insert) .attr('class', 'er relationshipLine') .attr('d', lineFunction(edge.points)) - .attr('stroke', conf.stroke) - .attr('fill', 'none'); + .style('stroke', conf.stroke) + .style('fill', 'none'); // ...and with dashes if necessary if (rel.relSpec.relType === diagObj.db.Identification.NON_IDENTIFYING) { @@ -541,12 +531,10 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) { .attr('id', labelId) .attr('x', labelPoint.x) .attr('y', labelPoint.y) - .attr('text-anchor', 'middle') - .attr('dominant-baseline', 'middle') - .attr( - 'style', - 'font-family: ' + getConfig().fontFamily + '; font-size: ' + conf.fontSize + 'px' - ) + .style('text-anchor', 'middle') + .style('dominant-baseline', 'middle') + .style('font-family', getConfig().fontFamily) + .style('font-size', conf.fontSize + 'px') .text(rel.roleA); // Figure out how big the opaque 'container' rectangle needs to be @@ -560,8 +548,8 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) { .attr('y', labelPoint.y - labelBBox.height / 2) .attr('width', labelBBox.width) .attr('height', labelBBox.height) - .attr('fill', 'white') - .attr('fill-opacity', '85%'); + .style('fill', 'white') + .style('fill-opacity', '85%'); }; /** From a59f49c04f65ba283a7e1e0acfcae16d0723381e Mon Sep 17 00:00:00 2001 From: Caleb Usadi Date: Wed, 26 Oct 2022 00:17:20 -0400 Subject: [PATCH 2/2] Convert attr to classed --- .../mermaid/src/diagrams/er/erRenderer.js | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js index 582a63cea..323bb4607 100644 --- a/packages/mermaid/src/diagrams/er/erRenderer.js +++ b/packages/mermaid/src/diagrams/er/erRenderer.js @@ -77,7 +77,7 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { // Add a text node for the attribute type const typeNode = groupNode .append('text') - .attr('class', 'er entityLabel') + .classed('er entityLabel', true) .attr('id', `${attrPrefix}-type`) .attr('x', 0) .attr('y', 0) @@ -90,7 +90,7 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { // Add a text node for the attribute name const nameNode = groupNode .append('text') - .attr('class', 'er entityLabel') + .classed('er entityLabel', true) .attr('id', `${attrPrefix}-name`) .attr('x', 0) .attr('y', 0) @@ -114,7 +114,7 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { if (hasKeyType) { const keyTypeNode = groupNode .append('text') - .attr('class', 'er entityLabel') + .classed('er entityLabel', true) .attr('id', `${attrPrefix}-key`) .attr('x', 0) .attr('y', 0) @@ -133,7 +133,7 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { if (hasComment) { const commentNode = groupNode .append('text') - .attr('class', 'er entityLabel') + .classed('er entityLabel', true) .attr('id', `${attrPrefix}-comment`) .attr('x', 0) .attr('y', 0) @@ -209,7 +209,7 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { // Insert a rectangle for the type const typeRect = groupNode .insert('rect', '#' + attributeNode.tn.node().id) - .attr('class', `er ${attribStyle}`) + .classed(`er ${attribStyle}`, true) .style('fill', conf.fill) .style('fill-opacity', '100%') .style('stroke', conf.stroke) @@ -229,7 +229,7 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { // Insert a rectangle for the name const nameRect = groupNode .insert('rect', '#' + attributeNode.nn.node().id) - .attr('class', `er ${attribStyle}`) + .classed(`er ${attribStyle}`, true) .style('fill', conf.fill) .style('fill-opacity', '100%') .style('stroke', conf.stroke) @@ -251,7 +251,7 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { // Insert a rectangle for the key type const keyTypeRect = groupNode .insert('rect', '#' + attributeNode.kn.node().id) - .attr('class', `er ${attribStyle}`) + .classed(`er ${attribStyle}`, true) .style('fill', conf.fill) .style('fill-opacity', '100%') .style('stroke', conf.stroke) @@ -274,7 +274,7 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => { // Insert a rectangle for the comment groupNode .insert('rect', '#' + attributeNode.cn.node().id) - .attr('class', `er ${attribStyle}`) + .classed(`er ${attribStyle}`, 'true') .style('fill', conf.fill) .style('fill-opacity', '100%') .style('stroke', conf.stroke) @@ -327,7 +327,7 @@ const drawEntities = function (svgNode, entities, graph) { const textId = 'text-' + entityId; const textNode = groupNode .append('text') - .attr('class', 'er entityLabel') + .classed('er entityLabel', true) .attr('id', textId) .attr('x', 0) .attr('y', 0) @@ -346,7 +346,7 @@ const drawEntities = function (svgNode, entities, graph) { // Draw the rectangle - insert it before the text so that the text is not obscured const rectNode = groupNode .insert('rect', '#' + textId) - .attr('class', 'er entityBox') + .classed('er entityBox', true) .style('fill', conf.fill) .style('fill-opacity', '100%') .style('stroke', conf.stroke) @@ -450,7 +450,7 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) { // Insert the line at the right place const svgPath = svg .insert('path', '#' + insert) - .attr('class', 'er relationshipLine') + .classed('er relationshipLine', true) .attr('d', lineFunction(edge.points)) .style('stroke', conf.stroke) .style('fill', 'none'); @@ -527,7 +527,7 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) { const labelNode = svg .append('text') - .attr('class', 'er relationshipLabel') + .classed('er relationshipLabel', true) .attr('id', labelId) .attr('x', labelPoint.x) .attr('y', labelPoint.y) @@ -543,7 +543,7 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) { // Insert the opaque rectangle before the text label svg .insert('rect', '#' + labelId) - .attr('class', 'er relationshipLabelBox') + .classed('er relationshipLabelBox', true) .attr('x', labelPoint.x - labelBBox.width / 2) .attr('y', labelPoint.y - labelBBox.height / 2) .attr('width', labelBBox.width)