marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-30 21:56:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

updated styles, testcases and fixed html labels for image shape

Browse Source
This commit is contained in:
omkarht
2024-09-11 19:00:02 +05:30
parent 67bcd3e0d6
commit 3359d87115
3 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/integration/rendering/imageShape.spec.ts
View File

@@ -1,7 +1,7 @@
import { imgSnapshotTest } from '../../helpers/util'; import { imgSnapshotTest } from '../../helpers/util';
const looks = ['classic', 'handDrawn'] as const; const looks = ['classic', 'handDrawn'] as const;
const directions = ['TB', 'LR'] as const; const directions = ['TB', 'BT', 'LR', 'RL'] as const;
const labelPos = [undefined, 't', 'b'] as const; const labelPos = [undefined, 't', 'b'] as const;
looks.forEach((look) => { looks.forEach((look) => {

13
packages/mermaid/src/diagrams/flowchart/styles.ts
View File

@@ -177,6 +177,19 @@ const getStyles = (options: FlowChartStyleOptions) =>
} }
text-align: center; text-align: center;
} }
.image-shape {
background-color: ${options.edgeLabelBackground};
p {
background-color: ${options.edgeLabelBackground};
padding: 2px;
}
rect {
opacity: 0.5;
background-color: ${options.edgeLabelBackground};
fill: ${options.edgeLabelBackground};
}
text-align: center;
}
`; `;
export default getStyles; export default getStyles;

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

@@ -1,5 +1,5 @@
import { log } from '../../../logger.js'; import { log } from '../../../logger.js';
import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js'; import { labelHelper, updateNodeBounds } from './util.js';
import type { Node } from '../../types.js'; import type { Node } from '../../types.js';
import type { SVG } from '../../../diagram-api/types.js'; import type { SVG } from '../../../diagram-api/types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
@@ -23,7 +23,6 @@ export const imageSquare = async (parent: SVG, node: Node) => {
node?.assetWidth ?? imageNaturalWidth node?.assetWidth ?? imageNaturalWidth
); );
const imageHeight = node?.assetHeight ?? imageNaturalHeight; const imageHeight = node?.assetHeight ?? imageNaturalHeight;
// const htmlLabels = getConfig().flowchart?.htmlLabels
const imagePoints = [ const imagePoints = [
{ x: -imageWidth / 2, y: -imageHeight }, { x: -imageWidth / 2, y: -imageHeight },
@@ -47,7 +46,7 @@ export const imageSquare = async (parent: SVG, node: Node) => {
// node.height = Math.max(node.height ?? 0, node.label ? (defaultHeight ?? 0) : 0, imageHeight); // node.height = Math.max(node.height ?? 0, node.label ? (defaultHeight ?? 0) : 0, imageHeight);
const labelWidth = Math.max(node.width ?? 0, node.label ? (defaultWidth ?? 0) : 0, imageWidth); const labelWidth = Math.max(node.width ?? 0, node.label ? (defaultWidth ?? 0) : 0, imageWidth);
node.width = node.label ? labelWidth : 0; node.width = node.label ? labelWidth : 0;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'image-shape default');
// const width = Math.max(bbox.width + (node.padding ?? 0), node?.width ?? 0); // const width = Math.max(bbox.width + (node.padding ?? 0), node?.width ?? 0);
const height = Math.max(bbox.height + (node.padding ?? 0), node?.height ?? 0); const height = Math.max(bbox.height + (node.padding ?? 0), node?.height ?? 0);
@@ -65,7 +64,6 @@ export const imageSquare = async (parent: SVG, node: Node) => {
// @ts-ignore - rough is not typed // @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {}); const options = userNodeOverrides(node, {});
// const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg });
if (node.look !== 'handDrawn') { if (node.look !== 'handDrawn') {
options.roughness = 0; options.roughness = 0;
@@ -93,11 +91,6 @@ export const imageSquare = async (parent: SVG, node: Node) => {
image.attr('height', imageHeight); image.attr('height', imageHeight);
image.attr('preserveAspectRatio', 'none'); image.attr('preserveAspectRatio', 'none');
// const yPos =
// imagePosition === 'b'
// ? -(imageHeight / 2)
// : labelHeight / 2 - height + (bbox.y + (bbox.top ?? 0)) * 2;
// image.attr('transform', `translate(${-imageWidth / 2}, ${-imageHeight/2 -labelHeight/2})`);
const yPos = const yPos =
imagePosition === 'b' ? -imageHeight / 2 - labelHeight / 2 : (-imageHeight + labelHeight) / 2; imagePosition === 'b' ? -imageHeight / 2 - labelHeight / 2 : (-imageHeight + labelHeight) / 2;
image.attr('transform', `translate(${-imageWidth / 2}, ${yPos})`); image.attr('transform', `translate(${-imageWidth / 2}, ${yPos})`);
@@ -123,10 +116,8 @@ export const imageSquare = async (parent: SVG, node: Node) => {
node.intersect = function (point) { node.intersect = function (point) {
log.info('imageSquare intersect', node, point); log.info('imageSquare intersect', node, point);
// Combine image and label points into a single shape
const combinedPoints = [...imagePoints, ...labelPoints]; const combinedPoints = [...imagePoints, ...labelPoints];
// Use the polygon intersection with the translated points
const pos = intersect.polygon(node, combinedPoints, point); const pos = intersect.polygon(node, combinedPoints, point);
return pos; return pos;
}; };