mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-18 23:09:49 +02:00
fix for min size for several shapes
This commit is contained in:
@@ -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,
|
||||||
|
@@ -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;
|
||||||
|
@@ -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;
|
||||||
|
@@ -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;
|
||||||
|
@@ -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
|
||||||
|
@@ -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;
|
||||||
|
@@ -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 },
|
||||||
|
@@ -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
|
||||||
|
@@ -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 },
|
||||||
|
@@ -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 },
|
||||||
|
@@ -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 },
|
||||||
|
@@ -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;
|
||||||
|
|
||||||
|
@@ -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;
|
||||||
|
@@ -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;
|
||||||
|
@@ -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);
|
||||||
|
@@ -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;
|
||||||
|
|
||||||
|
@@ -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 },
|
||||||
|
Reference in New Issue
Block a user