fix for min size for several shapes

This commit is contained in:
Ashish Jain
2024-10-01 18:52:26 +02:00
parent 5363e9545e
commit d2dfb639c8
17 changed files with 108 additions and 104 deletions

View File

@@ -34,6 +34,7 @@
font-family: 'Arial'; font-family: 'Arial';
background-color: #333; background-color: #333;
} }
h3 { h3 {
color: white; color: white;
} }
@@ -41,11 +42,9 @@
</head> </head>
<body> <body>
<div class="flex"> <div class="flex w-full">
<h3>Fixed</h3>
<div id="diagram-fixed"></div> <div id="diagram-fixed"></div>
<div id="diagram-normal"></div> <div id="diagram-normal"></div>
<h3>Non fixed</h3>
</div> </div>
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
@@ -64,27 +63,27 @@
logLevel: 1, logLevel: 1,
}); });
// let shape = 'rect'; // let shape = 'rect'; // Done
// let shape = 'rounded'; //let shape = 'rounded'; // Done
// let shape = 'stadium'; //let shape = 'stadium'; // Done
// let shape = 'fr-rect'; // let shape = 'fr-rect'; // Done
// let shape = 'cyl'; // let shape = 'cyl'; // Done
let shape = 'circle'; //let shape = 'circle'; // Done
// let shape = 'odd'; // let shape = 'odd'; // Done
// let shape = 'diam'; // let shape = 'diam'; //Done
// let shape = 'hex'; // let shape = 'hex'; // Done
// let shape = 'lean-r'; // let shape = 'lean-r'; // Done
// let shape = 'lean-l'; // let shape = 'lean-l'; // Done
// let shape = 'trap-b'; // let shape = 'trap-b'; // Done
// let shape = 'trap-t'; // let shape = 'trap-t'; // Done
// let shape = 'dbl-circ'; // let shape = 'dbl-circ'; // Done
// let shape = 'text'; // let shape = 'text'; // Done
// let shape = 'notch-rect'; // let shape = 'notch-rect'; // Done
// let shape = 'lin-rect'; // let shape = 'lin-rect'; // Done
// let shape = 'sm-circ'; //let shape = 'sm-circ'; // Done
// let shape = 'fr-circ'; // let shape = 'fr-circ'; //Done
// let shape = 'fork'; //let shape = 'fork'; // Done
// let shape = 'hourglass'; //let shape = 'hourglass'; //Done
// let shape = 'brace'; // let shape = 'brace';
// let shape = 'brace-r'; // let shape = 'brace-r';
// let shape = 'braces'; // let shape = 'braces';
@@ -117,9 +116,9 @@ config:
let code = `flowchart TB 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["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}'} %% n80@{ shape: '${shape}'}
n81@{ label: "X", shape: '${shape}'} n81@{ label: "n81", shape: '${shape}'}
n82@{ label: "X", shape: '${shape}'} %%n82@{ label: "n82", shape: '${shape}'}
n83@{ label: "Y", shape: '${shape}'} %%n83@{ label: "n83", shape: '${shape}'}
`; `;
let positions = { let positions = {
@@ -128,8 +127,8 @@ config:
n81: { n81: {
x: 0, x: 0,
y: 10, y: 10,
width: 37.2, width: 30,
height: 10, height: 30,
}, },
n80: { n80: {
x: -400, x: -400,

View File

@@ -25,14 +25,14 @@ export async function card(parent: SVGAElement, node: Node): Promise<SVGAElement
// also check if the width or height is less than minimum default values (50), // also check if the width or height is less than minimum default values (50),
// if so set it to min value // if so set it to min value
if (node.width || node.height) { if (node.width || node.height) {
node.width = Math.max(node?.width ?? 0 - (node.padding ?? 0), 50); node.width = Math.max((node?.width ?? 0) - (node.padding ?? 0), 10);
node.height = Math.max(node?.height ?? 0 - (node.padding ?? 0), 50); node.height = Math.max((node?.height ?? 0) - (node.padding ?? 0), 10);
} }
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const totalWidth = Math.max(bbox.width, node?.width || 0) + (node.padding ?? 0); const totalWidth = (node?.width ? node?.width : bbox.width) + (node.padding ?? 0);
const totalHeight = Math.max(bbox.height, node?.height || 0) + (node.padding ?? 0); const totalHeight = (node?.height ? node?.height : bbox.height) + (node.padding ?? 0);
const h = totalHeight; const h = totalHeight;
const w = totalWidth; const w = totalWidth;

View File

@@ -63,14 +63,16 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding; const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding;
if (node.width || node.height) { if (node.width || node.height) {
const originalWidth = node.width ?? 0;
node.width = (node.width ?? 0) - labelPaddingY; node.width = (node.width ?? 0) - labelPaddingY;
if (node.width < MIN_WIDTH) { if (node.width < MIN_WIDTH) {
node.width = MIN_WIDTH; node.width = MIN_WIDTH;
} }
// based on this width, height is calculated const rx = originalWidth / 2;
const ry = node.width / 2 / (2.5 + node.width / 50); const ry = rx / (2.5 + originalWidth / 50);
node.height = (node.height ?? 0) - labelPaddingX - (ry + ry * 0.05) * 3; node.height = (node.height ?? 0) - labelPaddingX - ry * 3;
if (node.height < MIN_HEIGHT) { if (node.height < MIN_HEIGHT) {
node.height = MIN_HEIGHT; node.height = MIN_HEIGHT;
} }
@@ -78,10 +80,10 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const w = Math.max(bbox.width, node.width ?? 0) + labelPaddingY; const w = (node.width ? node.width : bbox.width) + labelPaddingY;
const rx = w / 2; const rx = w / 2;
const ry = rx / (2.5 + w / 50); const ry = rx / (2.5 + w / 50);
const h = Math.max(bbox.height, node.height ?? 0) + labelPaddingX + ry; const h = (node.height ? node.height : bbox.height) + labelPaddingX + ry;
let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>; let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
const { cssStyles } = node; const { cssStyles } = node;

View File

@@ -15,20 +15,15 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVG
// if so set it to min value // if so set it to min value
if (node.width || node.height) { if (node.width || node.height) {
const padding = node.padding ?? 0; const padding = node.padding ?? 0;
node.width = (node?.width ?? 0) - padding * 2; if (node.width || node.height) {
if (node.width < 50) { node.width = (node.width ?? 6) - padding * 2;
node.width = 50; node.height = node.width;
}
node.height = (node?.height ?? 0) - (node.padding ?? 0) * 2;
if (node.height < 50) {
node.height = 50;
} }
} }
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const outerRadius = Math.max(bbox.width / 2, (node?.width ?? 0) / 2) + (node.padding ?? 0); const outerRadius = (node?.width ? node?.width / 2 : bbox.width / 2) + (node.padding ?? 0);
const innerRadius = outerRadius - gap; const innerRadius = outerRadius - gap;
let circleGroup; let circleGroup;

View File

@@ -15,24 +15,24 @@ export const filledCircle = (
// If incoming height & width are present, subtract the padding from them // If incoming height & width are present, subtract the padding from them
// as labelHelper does not take padding into account // as labelHelper does not take padding into account
// also check if the width or height is less than minimum default values (50), // also check if the width or height is less than minimum default values (10),
// if so set it to min value // if so set it to min value
if (node.width || node.height) { if (node.width || node.height) {
if ((node.width ?? 0) < 50) { if ((node.width ?? 0) < 10) {
node.width = 50; node.width = 10;
} }
if ((node.height ?? 0) < 50) { if ((node.height ?? 0) < 10) {
node.height = 50; node.height = 10;
} }
} }
if (!node.width) { if (!node.width) {
node.width = 50; node.width = 10;
} }
if (!node.height) { if (!node.height) {
node.width = 50; node.width = 10;
} }
const shapeSvg = parent const shapeSvg = parent

View File

@@ -18,12 +18,12 @@ export const forkJoin = (
.attr('id', node.domId ?? node.id); .attr('id', node.domId ?? node.id);
const { cssStyles } = node; const { cssStyles } = node;
let width = Math.max(70, node?.width ?? 0); let width = node?.width ? node?.width : 70;
let height = Math.max(10, node?.height ?? 0); let height = node?.height ? node?.height : 10;
if (dir === 'LR') { if (dir === 'LR') {
width = Math.max(10, node?.width ?? 0); width = node?.width ? node?.width : 10;
height = Math.max(70, node?.height ?? 0); height = node?.height ? node?.height : 70;
} }
const x = (-1 * width) / 2; const x = (-1 * width) / 2;

View File

@@ -26,16 +26,24 @@ export const createHexagonPathD = (
export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => { export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const f = 4; const f = 4;
node.labelStyle = labelStyles;
const nodePadding = node.padding ?? 0; const nodePadding = node.padding ?? 0;
const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding; const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding;
const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding; const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
const h = Math.max(bbox.height + labelPaddingX, node?.height ?? 0); if (node.width || node.height) {
const originalHeight = node.height ?? 0;
const m = originalHeight / f;
node.width = (node?.width ?? 0) - 2 * m - labelPaddingY;
node.height = (node.height ?? 0) - labelPaddingX;
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = (node?.height ? node?.height : bbox.height) + labelPaddingX;
const m = h / f; const m = h / f;
const w = Math.max(bbox.width + 2 * m + labelPaddingY, node?.width ?? 0);
const w = (node?.width ? node?.width : bbox.width) + 2 * m + labelPaddingY;
const points = [ const points = [
{ x: m, y: 0 }, { x: m, y: 0 },
{ x: w - m, y: 0 }, { x: w - m, y: 0 },

View File

@@ -9,8 +9,8 @@ export const hourglass = async (parent: SVGAElement, node: Node) => {
node.label = ''; node.label = '';
const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node));
const w = Math.max(50, node?.width ?? 0); const w = node?.width ? node?.width : 30;
const h = Math.max(50, node?.height ?? 0); const h = node?.height ? node?.height : 30;
const { cssStyles } = node; const { cssStyles } = node;
// @ts-ignore - rough is not typed // @ts-ignore - rough is not typed

View File

@@ -28,21 +28,21 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SV
const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding * 2; const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding * 2;
if (node.width || node.height) { if (node.width || node.height) {
node.width = node?.width ?? 0; node.width = node?.width ?? 0;
if (node.width < 50) { if (node.width < 10) {
node.width = 50; node.width = 10;
} }
node.height = node?.height ?? 0; node.height = node?.height ?? 0;
if (node.height < 50) { if (node.height < 10) {
node.height = 50; node.height = 10;
} }
const _dx = (3 * node.height) / 6; const _dx = (3 * node.height) / 6;
node.height = node.height - labelPaddingY; node.height = node.height - labelPaddingY;
node.width = node.width - 2 * _dx; node.width = node.width - 2 * _dx;
} }
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY; const h = (node?.height ? node?.height : bbox.height) + labelPaddingY;
const w = Math.max(bbox.width, node?.width ?? 0); const w = node?.width ? node?.width : bbox.width;
const points = [ const points = [
{ x: 0, y: 0 }, { x: 0, y: 0 },

View File

@@ -13,13 +13,13 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
if (node.width || node.height) { if (node.width || node.height) {
node.width = node?.width ?? 0; node.width = node?.width ?? 0;
if (node.width < 50) { if (node.width < 10) {
node.width = 50; node.width = 10;
} }
node.height = node?.height ?? 0; node.height = node?.height ?? 0;
if (node.height < 50) { if (node.height < 10) {
node.height = 50; node.height = 10;
} }
const _dx = (3 * node.height) / 6; const _dx = (3 * node.height) / 6;
node.height = node.height - labelPaddingY; node.height = node.height - labelPaddingY;
@@ -27,8 +27,8 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
} }
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY; const h = (node?.height ? node?.height : bbox.height) + labelPaddingY;
const w = Math.max(bbox.width, node?.width ?? 0); const w = node?.width ? node?.width : bbox.width;
const points = [ const points = [
{ x: 0, y: 0 }, { x: 0, y: 0 },
{ x: w + (3 * h) / 6, y: 0 }, { x: w + (3 * h) / 6, y: 0 },

View File

@@ -13,13 +13,13 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
if (node.width || node.height) { if (node.width || node.height) {
node.width = node?.width ?? 0; node.width = node?.width ?? 0;
if (node.width < 50) { if (node.width < 10) {
node.width = 50; node.width = 10;
} }
node.height = node?.height ?? 0; node.height = node?.height ?? 0;
if (node.height < 50) { if (node.height < 10) {
node.height = 50; node.height = 10;
} }
const _dx = (3 * node.height) / 6; const _dx = (3 * node.height) / 6;
node.height = node.height - labelPaddingY; node.height = node.height - labelPaddingY;
@@ -28,8 +28,8 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY; const h = (node?.height ? node?.height : bbox.height) + labelPaddingY;
const w = Math.max(bbox.width, node?.width ?? 0); const w = node?.width ? node?.width : bbox.width;
const points = [ const points = [
{ x: (-3 * h) / 6, y: 0 }, { x: (-3 * h) / 6, y: 0 },

View File

@@ -22,8 +22,8 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
const padding = node.padding ?? 0; const padding = node.padding ?? 0;
if (node.width || node.height) { if (node.width || node.height) {
node.width = (node?.width ?? 0) - padding * 8; node.width = (node?.width ?? 0) - padding * 8;
if (node.width < 20) { if (node.width < 10) {
node.width = 20; node.width = 10;
} }
node.height = (node?.height ?? 0) - padding * 8; node.height = (node?.height ?? 0) - padding * 8;
@@ -33,7 +33,7 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
} }
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const w = (Math.max(bbox.width, node?.width ?? 0) + padding * 8) / 2; const w = ((node?.width ? node?.width : bbox.width) + padding * 8) / 2;
const h = w; const h = w;
const s = w + h; const s = w + h;

View File

@@ -16,17 +16,17 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => {
// If incoming height & width are present, subtract the padding from them // If incoming height & width are present, subtract the padding from them
// as labelHelper does not take padding into account // as labelHelper does not take padding into account
// also check if the width or height is less than minimum default values (50), // also check if the width or height is less than minimum default values (10),
// if so set it to min value // if so set it to min value
if (node.width || node.height) { if (node.width || node.height) {
node.width = Math.max((node?.width ?? 0) - paddingX * 2 - FRAME_WIDTH, 50); node.width = Math.max((node?.width ?? 0) - paddingX * 2 - FRAME_WIDTH, 10);
node.height = Math.max((node?.height ?? 0) - paddingY * 2, 50); node.height = Math.max((node?.height ?? 0) - paddingY * 2, 10);
} }
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const totalWidth = Math.max(bbox.width, node?.width ?? 0) + paddingX * 2 + FRAME_WIDTH; const totalWidth = (node?.width ? node?.width : bbox.width) + paddingX * 2 + FRAME_WIDTH;
const totalHeight = Math.max(bbox.height, node?.height ?? 0) + paddingY * 2; const totalHeight = (node?.height ? node?.height : bbox.height) + paddingY * 2;
const w = totalWidth - FRAME_WIDTH; const w = totalWidth - FRAME_WIDTH;
const h = totalHeight; const h = totalHeight;
const x = -(totalWidth - FRAME_WIDTH) / 2; const x = -(totalWidth - FRAME_WIDTH) / 2;

View File

@@ -76,8 +76,8 @@ export const stadium = async (parent: SVGAElement, node: Node) => {
// const h = Math.max(bbox.height, node?.height || 0) + labelPaddingY; // const h = Math.max(bbox.height, node?.height || 0) + labelPaddingY;
// const w = Math.max(bbox.width + h / 4, node?.width || 0, 150) + labelPaddingX; // const w = Math.max(bbox.width + h / 4, node?.width || 0, 150) + labelPaddingX;
const w = Math.max(bbox.width, node?.width || 0) + labelPaddingX * 2; const w = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2;
const h = Math.max(bbox.height, node?.height || 0) + labelPaddingY * 2; const h = (node?.height ? node?.height : bbox.height) + labelPaddingY * 2;
let rect; let rect;
const { cssStyles } = node; const { cssStyles } = node;

View File

@@ -20,11 +20,11 @@ export const stateEnd = (
// also check if the width or height is less than minimum default values (50), // also check if the width or height is less than minimum default values (50),
// if so set it to min value // if so set it to min value
if (node.width || node.height) { if (node.width || node.height) {
if ((node.width ?? 0) < 50) { if ((node.width ?? 0) < 14) {
node.width = 14; node.width = 14;
} }
if ((node.height ?? 0) < 50) { if ((node.height ?? 0) < 14) {
node.height = 14; node.height = 14;
} }
} }
@@ -40,7 +40,7 @@ export const stateEnd = (
const shapeSvg = parent const shapeSvg = parent
.insert('g') .insert('g')
.attr('class', 'node default') .attr('class', 'node default')
.attr('id', node.domId || node.id); .attr('id', node.domId ?? node.id);
// @ts-ignore TODO: Fix rough typings // @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);

View File

@@ -12,8 +12,8 @@ export async function text(parent: SVGAElement, node: Node): Promise<SVGAElement
// width > labelWidth // width > labelWidth
// labelWidth > width // labelWidth > width
const totalWidth = node?.width ?? bbox.width; const totalWidth = node?.width ? node?.width : bbox.width;
const totalHeight = Math.max(bbox.height, node?.height ?? 0); const totalHeight = node?.height ? node?.height : bbox.height;
const x = -totalWidth / 2; const x = -totalWidth / 2;
const y = -totalHeight / 2; const y = -totalHeight / 2;

View File

@@ -28,21 +28,21 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
if (node.width || node.height) { if (node.width || node.height) {
node.width = node?.width ?? 0; node.width = node?.width ?? 0;
if (node.width < 50) { if (node.width < 10) {
node.width = 50; node.width = 10;
} }
node.height = node?.height ?? 0; node.height = node?.height ?? 0;
if (node.height < 50) { if (node.height < 10) {
node.height = 50; node.height = 10;
} }
const _dx = (3 * node.height) / 6; const _dx = (3 * node.height) / 6;
node.height = node.height - labelPaddingY; node.height = node.height - labelPaddingY;
node.width = node.width - 2 * _dx; node.width = node.width - 2 * _dx;
} }
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = Math.max(bbox.height, node?.height ?? 0) + labelPaddingY; const h = (node?.height ? node?.height : bbox.height) + labelPaddingY;
const w = Math.max(bbox.width, node?.width ?? 0); const w = node?.width ? node?.width : bbox.width;
const points = [ const points = [
{ x: (-3 * h) / 6, y: 0 }, { x: (-3 * h) / 6, y: 0 },