diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 4749d7c70..2020acdc8 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -68,7 +68,7 @@ export interface MermaidConfig { * Defines which main look to use for the diagram. * */ - look?: 'classic' | 'handdrawn' | 'slick'; + look?: 'classic' | 'handdrawn' | 'slick' | 'neo'; /** * Defines the seed to be used when using handdrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed. * diff --git a/packages/mermaid/src/dagre-wrapper/edgeMarker.ts b/packages/mermaid/src/dagre-wrapper/edgeMarker.ts index 778a7708d..fdd19dc72 100644 --- a/packages/mermaid/src/dagre-wrapper/edgeMarker.ts +++ b/packages/mermaid/src/dagre-wrapper/edgeMarker.ts @@ -29,6 +29,7 @@ const arrowTypesMap = { arrow_cross: 'cross', arrow_point: 'point', arrow_barb: 'barb', + arrow_neo: 'barbNeo', arrow_circle: 'circle', aggregation: 'aggregation', extension: 'extension', diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts index d3b13473a..a0b9f92ef 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts +++ b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts @@ -79,7 +79,12 @@ export const draw = async function ( data4Layout.nodeSpacing = conf?.nodeSpacing || 50; // @ts-expect-error TODO: Will be fixed after config refactor data4Layout.rankSpacing = conf?.rankSpacing || 50; - data4Layout.markers = ['barb']; + const config = getConfig(); + if (config.look === 'neo') { + data4Layout.markers = ['barbNeo']; + } else { + data4Layout.markers = ['barb']; + } data4Layout.diagramId = id; // console.log('REF1:', data4Layout); await render(data4Layout, svg, element, positions); diff --git a/packages/mermaid/src/diagrams/state/styles.js b/packages/mermaid/src/diagrams/state/styles.js index 595f6b7d4..a7b87f561 100644 --- a/packages/mermaid/src/diagrams/state/styles.js +++ b/packages/mermaid/src/diagrams/state/styles.js @@ -129,7 +129,6 @@ g.stateGroup line { .statediagram-cluster rect.outer { rx: 2px; ry: 2px; - filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) ); } .statediagram-state .divider { stroke: ${options.stateBorder || options.nodeBorder}; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index a4b8f896d..754a671ab 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js @@ -187,7 +187,7 @@ const roundedWithTitle = (parent, node) => { const innerY = node.y - node.height / 2 - halfPadding + bbox.height - 1; const height = node.height + padding; const innerHeight = node.height + padding - bbox.height - 3; - + const look = siteConfig.look; // add the rect let rect; if (node.useRough) { @@ -216,9 +216,15 @@ const roundedWithTitle = (parent, node) => { innerRect = shapeSvg.insert(() => roughInnerNode); } else { rect = outerRectG.insert('rect', ':first-child'); + let outerRectClass = 'outer'; + if (look === 'neo') { + outerRectClass = 'outer state-shadow'; + } else { + outerRectClass = 'outer'; + } // center the rect around its coordinate rect - .attr('class', 'outer') + .attr('class', outerRectClass) .attr('x', x) .attr('y', y) .attr('width', width) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/markers.js b/packages/mermaid/src/rendering-util/rendering-elements/markers.js index 893f1157b..55716613b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/markers.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/markers.js @@ -263,21 +263,21 @@ const cross = (elem, type, id) => { .style('stroke-width', 2) .style('stroke-dasharray', '1,0'); }; -// const barb = (elem, type, id) => { -// elem -// .append('defs') -// .append('marker') -// .attr('id', id + '_' + type + '-barbEnd') -// .attr('refX', 19) -// .attr('refY', 7) -// .attr('markerWidth', 20) -// .attr('markerHeight', 14) -// .attr('markerUnits', 'strokeWidth') -// .attr('orient', 'auto') -// .append('path') -// .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z'); -// }; const barb = (elem, type, id) => { + elem + .append('defs') + .append('marker') + .attr('id', id + '_' + type + '-barbEnd') + .attr('refX', 19) + .attr('refY', 7) + .attr('markerWidth', 20) + .attr('markerHeight', 14) + .attr('markerUnits', 'strokeWidth') + .attr('orient', 'auto') + .append('path') + .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z'); +}; +const barbNeo = (elem, type, id) => { elem .append('defs') .append('marker') @@ -303,5 +303,6 @@ const markers = { circle, cross, barb, + barbNeo, }; export default insertMarkers; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts index facd3e54b..0f4f19925 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts @@ -1,4 +1,3 @@ -import { log } from '$root/logger.js'; import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; import type { Node, RectOptions } from '$root/rendering-util/types.d.ts'; @@ -8,7 +7,7 @@ import rough from 'roughjs'; import { getConfig } from '$root/diagram-api/diagramAPI.js'; export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => { - const { themeVariables, handdrawnSeed } = getConfig(); + const { themeVariables, handdrawnSeed, look } = getConfig(); const { nodeBorder, mainBkg } = themeVariables; const { shapeSvg, bbox, halfPadding } = await labelHelper( @@ -24,6 +23,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt const y = -totalHeight / 2; let rect; + node.look = look; let { rx, ry } = node; const { cssStyles, useRough } = node; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts index c5066bd22..399c674aa 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts @@ -1,8 +1,10 @@ import type { Node, RectOptions } from '$root/rendering-util/types.d.ts'; import { drawRect } from './drawRect.js'; +import { getConfig } from '$root/diagram-api/diagramAPI.js'; export const roundedRect = async (parent: SVGAElement, node: Node) => { - node.look = 'neo'; + const { look } = getConfig(); + node.look = look; const options = { rx: node.look === 'neo' ? 1 : 1, ry: node.look === 'neo' ? 1 : 1, diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts index 991e7aed0..f1bc733d6 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts @@ -1,8 +1,10 @@ import type { Node } from '$root/rendering-util/types.d.ts'; import { drawRect } from './drawRect.js'; +import { getConfig } from '$root/diagram-api/diagramAPI.js'; export const state = async (parent: SVGAElement, node: Node) => { - node.look = 'neo'; + const { look } = getConfig(); + node.look = look; const options = { rx: node.look === 'neo' ? 2 : 5, diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts index 5eb2635b4..0eb740a1c 100644 --- a/packages/mermaid/src/rendering-util/types.d.ts +++ b/packages/mermaid/src/rendering-util/types.d.ts @@ -61,6 +61,9 @@ interface Node { // Flowchart specific properties x?: number; y?: number; + + // Added look to handle + look?: string; } // Common properties for any edge in the system