mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-23 17:29:54 +02:00
fix for min size for more shapes
This commit is contained in:
@@ -84,9 +84,6 @@
|
||||
// let shape = 'fr-circ'; //Done
|
||||
//let shape = 'fork'; // Done
|
||||
//let shape = 'hourglass'; //Done
|
||||
// let shape = 'brace';
|
||||
// let shape = 'brace-r';
|
||||
// let shape = 'braces';
|
||||
// let shape = 'bolt'; //Done
|
||||
// let shape = 'doc'; // Done
|
||||
// let shape = 'delay'; // Done
|
||||
@@ -96,16 +93,21 @@
|
||||
// let shape = 'div-rect'; // Done
|
||||
//let shape = 'tri'; // Done
|
||||
// let shape = 'win-pane'; //Done
|
||||
// let shape = 'f-circ';
|
||||
// let shape = 'lin-doc';
|
||||
// let shape = 'notch-pent';
|
||||
// let shape = 'flip-tri';
|
||||
// let shape = 'sl-rect';
|
||||
// let shape = 'docs';
|
||||
// let shape = 'st-rect';
|
||||
// let shape = 'f-circ'; // Done
|
||||
// let shape = 'lin-doc'; // Done
|
||||
// let shape = 'notch-pent'; // Done
|
||||
// let shape = 'flip-tri'; // Done
|
||||
// let shape = 'sl-rect'; // Done
|
||||
// let shape = 'cross-circ'; // Done
|
||||
// let shape = 'bow-rect'; // Done
|
||||
// let shape = 'st-rect'; // Done
|
||||
|
||||
// let shape = 'flag';
|
||||
// let shape = 'bow-rect';
|
||||
// let shape = 'cross-circ';
|
||||
|
||||
// let shape = 'docs';
|
||||
// let shape = 'brace';
|
||||
// let shape = 'brace-r';
|
||||
// let shape = 'braces';
|
||||
// let shape = 'tag-doc';
|
||||
|
||||
let configFixed = `---
|
||||
@@ -116,7 +118,7 @@ config:
|
||||
let code = `flowchart TB
|
||||
%% n80["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
|
||||
%% n80@{ shape: '${shape}'}
|
||||
n81@{ label: "n81", shape: '${shape}'}
|
||||
n81@{ label: "Ashish", shape: '${shape}'}
|
||||
%%n82@{ label: "n82", shape: '${shape}'}
|
||||
%%n83@{ label: "n83", shape: '${shape}'}
|
||||
`;
|
||||
@@ -127,8 +129,8 @@ config:
|
||||
n81: {
|
||||
x: 0,
|
||||
y: 10,
|
||||
width: 80,
|
||||
height: 80,
|
||||
width: 107.7,
|
||||
height: 65,
|
||||
},
|
||||
n80: {
|
||||
x: -400,
|
||||
|
@@ -103,21 +103,21 @@ export const bowTieRect = async (parent: SVGAElement, node: Node) => {
|
||||
// also check if the width or height is less than minimum default values (50),
|
||||
// if so set it to min value
|
||||
if (node.width || node.height) {
|
||||
node.height = Math.max((node?.height ?? 0) - labelPaddingY * 2, 50);
|
||||
node.height = Math.max((node?.height ?? 0) - labelPaddingY * 2, 10);
|
||||
const totalHeight = calcTotalHeight(node.height);
|
||||
const [rx, ry] = calcEllipseRadius(totalHeight);
|
||||
node.width = Math.max(
|
||||
(node?.width ?? 0) - labelPaddingX * 2 - calculateArcSagitta(totalHeight, rx, ry),
|
||||
50
|
||||
10
|
||||
);
|
||||
}
|
||||
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
|
||||
|
||||
const totalHeight = calcTotalHeight(Math.max(bbox.height, node?.height ?? 0));
|
||||
const totalHeight = calcTotalHeight(node?.height ? node?.height : bbox.height);
|
||||
const [rx, ry] = calcEllipseRadius(totalHeight);
|
||||
const sagitta = calculateArcSagitta(totalHeight, rx, ry);
|
||||
const totalWidth = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX * 2 + sagitta;
|
||||
const totalWidth = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2 + sagitta;
|
||||
|
||||
const w = totalWidth - sagitta;
|
||||
const h = totalHeight;
|
||||
|
@@ -25,7 +25,7 @@ export const crossedCircle = (parent: SVG, node: Node) => {
|
||||
.insert('g')
|
||||
.attr('class', getNodeClasses(node))
|
||||
.attr('id', node.domId ?? node.id);
|
||||
const radius = Math.max(25, (node?.width ?? 0) / 2, (node?.height ?? 0) / 2);
|
||||
const radius = node?.width ? node?.width / 2 : node?.height ? node?.height / 2 : 25;
|
||||
const { cssStyles } = node;
|
||||
|
||||
// @ts-ignore - rough is not typed
|
||||
|
@@ -6,8 +6,8 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
|
||||
import rough from 'roughjs';
|
||||
import { createPathFromPoints } from './util.js';
|
||||
|
||||
const MIN_HEIGHT = 25;
|
||||
const MIN_WIDTH = 25;
|
||||
const MIN_HEIGHT = 10;
|
||||
const MIN_WIDTH = 10;
|
||||
export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
|
||||
const { labelStyles, nodeStyles } = styles2String(node);
|
||||
node.labelStyle = labelStyles;
|
||||
@@ -15,24 +15,24 @@ export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise<
|
||||
const nodePadding = node.padding ?? 0;
|
||||
const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
|
||||
const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
|
||||
|
||||
if (node.width || node.height) {
|
||||
node.height = node?.height ?? 0;
|
||||
if (node.height < MIN_HEIGHT) {
|
||||
node.height = MIN_HEIGHT;
|
||||
}
|
||||
|
||||
node.width = node?.width ?? 0 - labelPaddingX * 4;
|
||||
node.width = (node?.width ?? 0) - labelPaddingX - labelPaddingX / 2;
|
||||
if (node.width < MIN_WIDTH) {
|
||||
node.width = MIN_WIDTH;
|
||||
}
|
||||
}
|
||||
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
|
||||
|
||||
const w = Math.max(bbox.width, node?.width ?? 0) + (labelPaddingX ?? 0);
|
||||
const h = Math.max(w + bbox.height, node?.width ?? 0);
|
||||
const w = (node?.width ? node?.width : bbox.width) + (labelPaddingX ?? 0);
|
||||
const h = node?.height ? node?.height : w + bbox.height;
|
||||
|
||||
const tw = w + bbox.height;
|
||||
|
||||
const points = [
|
||||
{ x: 0, y: -h },
|
||||
{ x: tw, y: -h },
|
||||
|
@@ -16,25 +16,25 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => {
|
||||
const nodePadding = node.padding ?? 0;
|
||||
const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : (node.padding ?? 0);
|
||||
const labelPaddingY = node.look === 'neo' ? nodePadding * 2 : (node.padding ?? 0);
|
||||
|
||||
let adjustFinalHeight = true;
|
||||
if (node.width || node.height) {
|
||||
adjustFinalHeight = false;
|
||||
node.width = (node?.width ?? 0) - labelPaddingX * 2;
|
||||
if (node.width < 50) {
|
||||
node.width = 50;
|
||||
const originalWidth = node.width;
|
||||
node.width = ((originalWidth ?? 0) * 10) / 11 - labelPaddingX * 2;
|
||||
if (node.width < 10) {
|
||||
node.width = 10;
|
||||
}
|
||||
const originalHeight = node.height;
|
||||
|
||||
node.height = (node?.height ?? 0) - labelPaddingY * 2;
|
||||
if (node.height < 50) {
|
||||
node.height = 50;
|
||||
node.height = ((originalHeight ?? 0) * 3) / 4 - labelPaddingY * 2;
|
||||
//node.height = (node?.height ?? 0) - labelPaddingY * 2;
|
||||
if (node.height < 10) {
|
||||
node.height = 10;
|
||||
}
|
||||
}
|
||||
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
|
||||
const w = Math.max(bbox.width, node?.width ?? 0) + (labelPaddingX ?? 0) * 2;
|
||||
const h = Math.max(bbox.height, node?.height ?? 0) + (labelPaddingY ?? 0) * 2;
|
||||
const w = (node?.width ? node?.width : bbox.width) + (labelPaddingX ?? 0) * 2;
|
||||
const h = (node?.height ? node?.height : bbox.height) + (labelPaddingY ?? 0) * 2;
|
||||
const waveAmplitude = h / 6;
|
||||
const finalH = h + (adjustFinalHeight ? waveAmplitude : -waveAmplitude);
|
||||
const finalH = h + waveAmplitude;
|
||||
const { cssStyles } = node;
|
||||
|
||||
// @ts-ignore - rough is not typed
|
||||
|
@@ -17,14 +17,15 @@ export const multiRect = async (parent: SVGAElement, node: Node) => {
|
||||
// also check if the width or height is less than minimum default values (50),
|
||||
// if so set it to min value
|
||||
if (node.width || node.height) {
|
||||
node.width = Math.max((node?.width ?? 0) - labelPaddingX * 2 - 2 * rectOffset, 50);
|
||||
node.height = Math.max((node?.height ?? 0) - labelPaddingY * 2 - 2 * rectOffset, 50);
|
||||
node.width = Math.max((node?.width ?? 0) - labelPaddingX * 2 - 2 * rectOffset, 10);
|
||||
node.height = Math.max((node?.height ?? 0) - labelPaddingY * 2 - 2 * rectOffset, 10);
|
||||
}
|
||||
|
||||
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
|
||||
|
||||
const totalWidth = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX * 2 + 2 * rectOffset;
|
||||
const totalHeight = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY * 2 + 2 * rectOffset;
|
||||
const totalWidth = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2 + 2 * rectOffset;
|
||||
const totalHeight =
|
||||
(node?.height ? node?.height : bbox.height) + labelPaddingY * 2 + 2 * rectOffset;
|
||||
|
||||
const w = totalWidth - 2 * rectOffset;
|
||||
const h = totalHeight - 2 * rectOffset;
|
||||
|
@@ -16,14 +16,14 @@ export const slopedRect = async (parent: SVGAElement, node: Node) => {
|
||||
// also check if the width or height is less than minimum default values (50),
|
||||
// if so set it to min value
|
||||
if (node.width || node.height) {
|
||||
node.width = Math.max((node?.width ?? 0) - labelPaddingX * 2, 50);
|
||||
node.height = Math.max((node?.height ?? 0) / 1.5 - labelPaddingY * 2, 50);
|
||||
node.width = Math.max((node?.width ?? 0) - labelPaddingX * 2, 10);
|
||||
node.height = Math.max((node?.height ?? 0) / 1.5 - labelPaddingY * 2, 10);
|
||||
}
|
||||
|
||||
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
|
||||
|
||||
const totalWidth = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX * 2;
|
||||
const totalHeight = (Math.max(bbox.height, node?.height ?? 0) + labelPaddingY * 2) * 1.5;
|
||||
const totalWidth = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2;
|
||||
const totalHeight = ((node?.height ? node?.height : bbox.height) + labelPaddingY * 2) * 1.5;
|
||||
|
||||
const w = totalWidth;
|
||||
const h = totalHeight / 1.5;
|
||||
|
@@ -10,8 +10,8 @@ export const trapezoidalPentagon = async (parent: SVGAElement, node: Node) => {
|
||||
const nodePadding = node.padding ?? 0;
|
||||
const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding;
|
||||
const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
|
||||
const minWidth = 60,
|
||||
minHeight = 20;
|
||||
const minWidth = 15,
|
||||
minHeight = 5;
|
||||
if (node.width || node.height) {
|
||||
node.height = (node.height ?? 0) - labelPaddingY * 2;
|
||||
if (node.height < minHeight) {
|
||||
@@ -26,8 +26,9 @@ export const trapezoidalPentagon = async (parent: SVGAElement, node: Node) => {
|
||||
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
|
||||
|
||||
const w = Math.max(minWidth, bbox.width, node?.width ?? 0) + (labelPaddingX ?? 0) * 2;
|
||||
const h = Math.max(minHeight, bbox.height, node?.height ?? 0) + (labelPaddingY ?? 0) * 2;
|
||||
const w = (node?.width ? node?.width : Math.max(minWidth, bbox.width)) + (labelPaddingX ?? 0) * 2;
|
||||
const h =
|
||||
(node?.height ? node?.height : Math.max(minHeight, bbox.height)) + (labelPaddingY ?? 0) * 2;
|
||||
|
||||
const { cssStyles } = node;
|
||||
// @ts-ignore - rough is not typed
|
||||
|
Reference in New Issue
Block a user