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

updated styles for shapes

Browse Source
This commit is contained in:
saurabhg772244
2024-09-03 18:29:42 +05:30
parent ea987171b2
commit 1b6d627bd3
5 changed files with 14 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts
View File

@@ -2,10 +2,7 @@ import { log } from '$root/logger.js';
import { getNodeClasses, updateNodeBounds } from './util.js';
import type { SVG } from '$root/diagram-api/types.js';
import type { Node } from '$root/rendering-util/types.d.ts';
import {
styles2String,
userNodeOverrides,
} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
import rough from 'roughjs';
import intersect from '../intersect/index.js';
@@ -24,8 +21,6 @@ function createLine(r: number) {
}
export const crossedCircle = (parent: SVG, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
node.label = '';
const shapeSvg = parent
.insert('g')
@@ -54,10 +49,6 @@ export const crossedCircle = (parent: SVG, node: Node) => {
crossedCircle.selectAll('path').attr('style', cssStyles);
}
if (nodeStyles && node.look !== 'handDrawn') {
crossedCircle.selectAll('path').attr('style', nodeStyles);
}
updateNodeBounds(node, crossedCircle);
node.intersect = function (point) {

13
packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
View File

@@ -2,17 +2,12 @@ import { log } from '$root/logger.js';
import { getNodeClasses, updateNodeBounds } from './util.js';
import type { Node } from '$root/rendering-util/types.d.ts';
import type { SVG } from '$root/diagram-api/types.js';
import {
styles2String,
userNodeOverrides,
} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
import rough from 'roughjs';
import intersect from '../intersect/index.js';
export const filledCircle = (parent: SVG, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.label = '';
node.labelStyle = labelStyles;
const shapeSvg = parent
.insert('g')
.attr('class', getNodeClasses(node))
@@ -33,16 +28,12 @@ export const filledCircle = (parent: SVG, node: Node) => {
const filledCircle = shapeSvg.insert(() => circleNode, ':first-child');
// filledCircle.attr('class', 'basic label-container');
filledCircle.attr('class', 'basic label-container');
if (cssStyles && node.look !== 'handDrawn') {
filledCircle.selectAll('path').attr('style', cssStyles);
}
if (nodeStyles && node.look !== 'handDrawn') {
filledCircle.selectAll('path').attr('style', nodeStyles);
}
updateNodeBounds(node, filledCircle);
node.intersect = function (point) {

16
packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts
View File

@@ -2,23 +2,15 @@ import { log } from '$root/logger.js';
import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts';
import {
styles2String,
userNodeOverrides,
} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
import rough from 'roughjs';
export const hourglass = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.label = '';
node.labelStyle = labelStyles;
const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node));
const w = 100;
const h = 100;
const { cssStyles } = node;
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
@@ -44,16 +36,10 @@ export const hourglass = async (parent: SVGAElement, node: Node) => {
polygon.selectChildren('path').attr('style', cssStyles);
}
if (nodeStyles && node.look !== 'handDrawn') {
polygon.selectChildren('path').attr('style', nodeStyles);
}
polygon.attr('transform', `translate(${-w / 2}, ${-h / 2})`);
updateNodeBounds(node, polygon);
// label.attr('transform', `translate(${-bbox.width / 2}, ${(h/2)})`); // To transform text below hourglass shape
node.intersect = function (point) {
log.info('Pill intersect', node, { points });
const pos = intersect.polygon(node, points, point);

14
packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts
View File

@@ -1,19 +1,13 @@
import { log } from '$root/logger.js';
import { getNodeClasses, updateNodeBounds } from './util.js';
import { getNodeClasses, updateNodeBounds, createPathFromPoints } from './util.js';
import type { Node } from '$root/rendering-util/types.d.ts';
import type { SVG } from '$root/diagram-api/types.js';
import {
styles2String,
userNodeOverrides,
} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
import rough from 'roughjs';
import intersect from '../intersect/index.js';
import { createPathFromPoints } from './util.js';
export const lightningBolt = (parent: SVG, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.label = '';
node.labelStyle = labelStyles;
const shapeSvg = parent
.insert('g')
.attr('class', getNodeClasses(node))
@@ -50,10 +44,6 @@ export const lightningBolt = (parent: SVG, node: Node) => {
lightningBolt.selectAll('path').attr('style', cssStyles);
}
if (nodeStyles && node.look !== 'handDrawn') {
lightningBolt.selectAll('path').attr('style', nodeStyles);
}
lightningBolt.attr('transform', `translate(-${width / 2},${-height})`);
updateNodeBounds(node, lightningBolt);

11
packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts
View File

@@ -24,11 +24,16 @@ function createInnerPathD(rx: number, ry: number, w: number, h: number) {
export const tiltedCylinder = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const h = bbox.height + node.padding;
const { shapeSvg, bbox, label, halfPadding } = await labelHelper(
parent,
node,
getNodeClasses(node)
);
const labelPadding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
const h = bbox.height + labelPadding;
const ry = h / 2;
const rx = ry / (2.5 + h / 50);
const w = bbox.width + rx + node.padding;
const w = bbox.width + rx + labelPadding;
const { cssStyles } = node;
// @ts-ignore - rough is not typed