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

fixed icon shape padding

Browse Source
This commit is contained in:
saurabhg772244
2024-09-18 21:40:55 +05:30
parent be9123ee2b
commit f035db2feb
5 changed files with 175 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
cypress/platform/saurabh.html
View File

@@ -62,16 +62,18 @@
<body style="display: flex; gap: 2rem; flex-direction: row"> <body style="display: flex; gap: 2rem; flex-direction: row">
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
flowchart TD flowchart LR
B2@{ icon: "fa:bell", form: "square", pos: "t", h: 80 } B2@{ icon: "fa:address-book", form: "square", pos: "b", h: 80 }
W --> B2 W --> B2 --> x1
X --> B2 X --> B2 --> x2
Y --> B2 Y --> B2 --> x3
Z --> B2 Z --> B2 --> x4
B2 --<strong>sas</strong>--> C B2 --<strong>sas</strong>--> C
A --> B2
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid2">

92
packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
View File

@@ -19,18 +19,20 @@ export const icon = async (
const iconSize = Math.max(assetHeight, assetWidth); const iconSize = Math.max(assetHeight, assetWidth);
const defaultWidth = flowchart?.wrappingWidth; const defaultWidth = flowchart?.wrappingWidth;
node.width = Math.max(iconSize, defaultWidth ?? 0); node.width = Math.max(iconSize, defaultWidth ?? 0);
const { nodeBorder } = themeVariables;
const { stylesMap } = compileStyles(node);
const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'icon-shape default'); const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'icon-shape default');
const topLabel = node.pos === 't'; const topLabel = node.pos === 't';
const height = iconSize; const height = iconSize;
const width = Math.max(iconSize, bbox.width); const width = iconSize;
const { nodeBorder } = themeVariables;
const { stylesMap } = compileStyles(node);
const x = -width / 2; const x = -width / 2;
const y = -height / 2; const y = -height / 2;
const labelPadding = node.label ? 8 : 0;
// @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, { stroke: 'none', fill: 'none' }); const options = userNodeOverrides(node, { stroke: 'none', fill: 'none' });
@@ -42,7 +44,17 @@ export const icon = async (
const iconNode = rc.rectangle(x, y, width, height, options); const iconNode = rc.rectangle(x, y, width, height, options);
const outerWidth = Math.max(width, bbox.width);
const outerHeight = height + bbox.height + labelPadding;
const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, {
...options,
fill: 'none',
stroke: 'none',
});
const iconShape = shapeSvg.insert(() => iconNode, ':first-child'); const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
const outerShape = shapeSvg.insert(() => outerNode);
if (node.icon) { if (node.icon) {
const iconElem = shapeSvg.append('g'); const iconElem = shapeSvg.append('g');
@@ -52,21 +64,26 @@ export const icon = async (
const iconBBox = iconElem.node().getBBox(); const iconBBox = iconElem.node().getBBox();
const iconWidth = iconBBox.width; const iconWidth = iconBBox.width;
const iconHeight = iconBBox.height; const iconHeight = iconBBox.height;
const iconX = iconBBox.x;
const iconY = iconBBox.y;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight + bbox.height / 2 : -height / 2 - bbox.height / 2})` `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY : -outerHeight / 2 - iconY})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
} }
label.attr( label.attr(
'transform', 'transform',
`translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 - 5 - bbox.height / 2 : height / 2 - bbox.height / 2})` `translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 - bbox.height / 2 - labelPadding / 2 : height / 2 - bbox.height / 2 + labelPadding / 2})`
); );
iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`); iconShape.attr(
'transform',
`translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})`
);
updateNodeBounds(node, shapeSvg); updateNodeBounds(node, outerShape);
node.intersect = function (point) { node.intersect = function (point) {
log.info('iconSquare intersect', node, point); log.info('iconSquare intersect', node, point);
@@ -75,51 +92,34 @@ export const icon = async (
} }
const dx = node.x ?? 0; const dx = node.x ?? 0;
const dy = node.y ?? 0; const dy = node.y ?? 0;
const nodeWidth = node.width ?? 0;
const nodeHeight = node.height ?? 0; const nodeHeight = node.height ?? 0;
let points = [];
if (topLabel) { if (topLabel) {
const points = [ points = [
{ x: dx - nodeWidth / 2, y: dy - nodeHeight / 2 - bbox.height / 2 }, { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 },
{ x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 - bbox.height / 2 }, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 },
{ x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2 }, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
{ { x: dx + width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
x: dx + nodeWidth / 2 - (bbox.width - width) / 2, { x: dx + width / 2, y: dy + nodeHeight / 2 },
y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2, { x: dx - width / 2, y: dy + nodeHeight / 2 },
}, { x: dx - width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
{ { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
x: dx + nodeWidth / 2 - (bbox.width - width) / 2,
y: dy + nodeHeight / 2 - bbox.height / 2,
},
{
x: dx + nodeWidth / 2 - (bbox.width - width) / 2 - width,
y: dy + nodeHeight / 2 - bbox.height / 2,
},
{
x: dx + nodeWidth / 2 - (bbox.width - width) / 2 - width,
y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2,
},
{ x: dx - nodeWidth / 2, y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2 },
]; ];
const pos = intersect.polygon(node, points, point);
return pos;
} else { } else {
const points = [ points = [
{ x: dx - nodeWidth / 2 + (bbox.width - width) / 2, y: dy - nodeHeight / 2 }, { x: dx - width / 2, y: dy - nodeHeight / 2 },
{ x: dx - nodeWidth / 2 + (bbox.width - width) / 2 + width, y: dy - nodeHeight / 2 }, { x: dx + width / 2, y: dy - nodeHeight / 2 },
{ { x: dx + width / 2, y: dy - nodeHeight / 2 + height },
x: dx - nodeWidth / 2 + (bbox.width - width) / 2 + width, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 + height },
y: dy - nodeHeight / 2 + height, { x: dx + bbox.width / 2 / 2, y: dy + nodeHeight / 2 },
}, { x: dx - bbox.width / 2, y: dy + nodeHeight / 2 },
{ x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 + height }, { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 + height },
{ x: dx + nodeWidth / 2, y: dy + nodeHeight / 2 }, { x: dx - width / 2, y: dy - nodeHeight / 2 + height },
{ x: dx - nodeWidth / 2, y: dy + nodeHeight / 2 },
{ x: dx - nodeWidth / 2, y: dy + nodeHeight / 2 - bbox.height },
{ x: dx - nodeWidth / 2 + (bbox.width - width) / 2, y: dy + nodeHeight / 2 - bbox.height },
]; ];
const pos = intersect.polygon(node, points, point);
return pos;
} }
const pos = intersect.polygon(node, points, point);
return pos;
}; };
return shapeSvg; return shapeSvg;

54
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
View File

@@ -19,15 +19,13 @@ export const iconCircle = async (
const iconSize = Math.max(assetHeight, assetWidth); const iconSize = Math.max(assetHeight, assetWidth);
const defaultWidth = flowchart?.wrappingWidth; const defaultWidth = flowchart?.wrappingWidth;
node.width = Math.max(iconSize, defaultWidth ?? 0); node.width = Math.max(iconSize, defaultWidth ?? 0);
const { shapeSvg, bbox, halfPadding, label } = await labelHelper( const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'icon-shape default');
parent,
node, const padding = 20;
'icon-shape default' const labelPadding = node.label ? 8 : 0;
);
const topLabel = node.pos === 't'; const topLabel = node.pos === 't';
const diameter = iconSize + halfPadding * 2;
const { nodeBorder, mainBkg } = themeVariables; const { nodeBorder, mainBkg } = themeVariables;
const { stylesMap } = compileStyles(node); const { stylesMap } = compileStyles(node);
// @ts-ignore - rough is not typed // @ts-ignore - rough is not typed
@@ -39,32 +37,48 @@ export const iconCircle = async (
options.fillStyle = 'solid'; options.fillStyle = 'solid';
} }
const iconNode = rc.circle(0, 0, diameter, options);
const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
const iconElem = shapeSvg.append('g'); const iconElem = shapeSvg.append('g');
if (node.icon) { if (node.icon) {
iconElem.html( iconElem.html(
`<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>` `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
); );
const iconBBox = iconElem.node().getBBox();
const iconWidth = iconBBox.width;
const iconHeight = iconBBox.height;
iconElem.attr(
'transform',
`translate(${-iconWidth / 2},${topLabel ? diameter / 2 - iconHeight - halfPadding + bbox.height / 2 : -diameter / 2 + halfPadding - bbox.height / 2})`
);
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
} }
const iconBBox = iconElem.node().getBBox();
const iconWidth = iconBBox.width;
const iconHeight = iconBBox.height;
const iconX = iconBBox.x;
const iconY = iconBBox.y;
const diameter = Math.max(iconWidth, iconHeight) + padding * 2;
const iconNode = rc.circle(0, 0, diameter, options);
const outerWidth = Math.max(diameter, bbox.width);
const outerHeight = diameter + bbox.height + labelPadding;
const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, {
...options,
fill: 'none',
stroke: 'none',
});
const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
const outerShape = shapeSvg.insert(() => outerNode);
iconElem.attr(
'transform',
`translate(${-iconWidth / 2 - iconX},${topLabel ? diameter / 2 - iconHeight - padding + bbox.height / 2 - iconY : -diameter / 2 + padding - bbox.height / 2 - labelPadding / 2 - iconY})`
);
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
label.attr( label.attr(
'transform', 'transform',
`translate(${-diameter / 2 + diameter / 2 - bbox.width / 2},${topLabel ? -diameter / 2 - bbox.height / 2 : diameter / 2 - bbox.height / 2})` `translate(${-diameter / 2 + diameter / 2 - bbox.width / 2},${topLabel ? -diameter / 2 - bbox.height / 2 : diameter / 2 - bbox.height / 2 + labelPadding / 2})`
); );
iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`); iconShape.attr(
'transform',
`translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2 - labelPadding / 2})`
);
updateNodeBounds(node, shapeSvg); updateNodeBounds(node, outerShape);
node.intersect = function (point) { node.intersect = function (point) {
log.info('iconSquare intersect', node, point); log.info('iconSquare intersect', node, point);

88
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
View File

@@ -1,6 +1,6 @@
import { log } from '../../../logger.js'; import { log } from '../../../logger.js';
import { labelHelper, updateNodeBounds } from './util.js'; import { labelHelper, updateNodeBounds } from './util.js';
import type { Node, RenderOptions } from '../../types.js'; import type { Node, RenderOptions } from '../../types.d.ts';
import type { SVG } from '../../../diagram-api/types.js'; import type { SVG } from '../../../diagram-api/types.js';
import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs'; import rough from 'roughjs';
@@ -36,6 +36,8 @@ export const iconRounded = async (
const x = -width / 2; const x = -width / 2;
const y = -height / 2; const y = -height / 2;
const labelPadding = node.label ? 8 : 0;
// @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, { stroke: stylesMap.get('fill') || mainBkg }); const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg });
@@ -47,7 +49,17 @@ export const iconRounded = async (
const iconNode = rc.path(createRoundedRectPathD(x, y, width, height, 5), options); const iconNode = rc.path(createRoundedRectPathD(x, y, width, height, 5), options);
const outerWidth = Math.max(width, bbox.width);
const outerHeight = height + bbox.height + labelPadding;
const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, {
...options,
fill: 'none',
stroke: 'none',
});
const iconShape = shapeSvg.insert(() => iconNode, ':first-child'); const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
const outerShape = shapeSvg.insert(() => outerNode);
if (node.icon) { if (node.icon) {
const iconElem = shapeSvg.append('g'); const iconElem = shapeSvg.append('g');
@@ -57,21 +69,26 @@ export const iconRounded = async (
const iconBBox = iconElem.node().getBBox(); const iconBBox = iconElem.node().getBBox();
const iconWidth = iconBBox.width; const iconWidth = iconBBox.width;
const iconHeight = iconBBox.height; const iconHeight = iconBBox.height;
const iconX = iconBBox.x;
const iconY = iconBBox.y;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight - halfPadding + bbox.height / 2 : -height / 2 + halfPadding - bbox.height / 2})` `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - halfPadding - iconY : -outerHeight / 2 + halfPadding - iconY})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
} }
label.attr( label.attr(
'transform', 'transform',
`translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 - 5 - bbox.height / 2 : height / 2 - bbox.height / 2})` `translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 - bbox.height / 2 - labelPadding / 2 : height / 2 - bbox.height / 2 + labelPadding / 2})`
); );
iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`); iconShape.attr(
'transform',
`translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})`
);
updateNodeBounds(node, shapeSvg); updateNodeBounds(node, outerShape);
node.intersect = function (point) { node.intersect = function (point) {
log.info('iconSquare intersect', node, point); log.info('iconSquare intersect', node, point);
@@ -80,51 +97,34 @@ export const iconRounded = async (
} }
const dx = node.x ?? 0; const dx = node.x ?? 0;
const dy = node.y ?? 0; const dy = node.y ?? 0;
const nodeWidth = node.width ?? 0;
const nodeHeight = node.height ?? 0; const nodeHeight = node.height ?? 0;
let points = [];
if (topLabel) { if (topLabel) {
const points = [ points = [
{ x: dx - nodeWidth / 2, y: dy - nodeHeight / 2 - bbox.height / 2 }, { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 },
{ x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 - bbox.height / 2 }, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 },
{ x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2 }, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
{ { x: dx + width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
x: dx + nodeWidth / 2 - (bbox.width - width) / 2, { x: dx + width / 2, y: dy + nodeHeight / 2 },
y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2, { x: dx - width / 2, y: dy + nodeHeight / 2 },
}, { x: dx - width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
{ { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
x: dx + nodeWidth / 2 - (bbox.width - width) / 2,
y: dy + nodeHeight / 2 - bbox.height / 2,
},
{
x: dx + nodeWidth / 2 - (bbox.width - width) / 2 - width,
y: dy + nodeHeight / 2 - bbox.height / 2,
},
{
x: dx + nodeWidth / 2 - (bbox.width - width) / 2 - width,
y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2,
},
{ x: dx - nodeWidth / 2, y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2 },
]; ];
const pos = intersect.polygon(node, points, point);
return pos;
} else { } else {
const points = [ points = [
{ x: dx - nodeWidth / 2 + (bbox.width - width) / 2, y: dy - nodeHeight / 2 }, { x: dx - width / 2, y: dy - nodeHeight / 2 },
{ x: dx - nodeWidth / 2 + (bbox.width - width) / 2 + width, y: dy - nodeHeight / 2 }, { x: dx + width / 2, y: dy - nodeHeight / 2 },
{ { x: dx + width / 2, y: dy - nodeHeight / 2 + height },
x: dx - nodeWidth / 2 + (bbox.width - width) / 2 + width, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 + height },
y: dy - nodeHeight / 2 + height, { x: dx + bbox.width / 2 / 2, y: dy + nodeHeight / 2 },
}, { x: dx - bbox.width / 2, y: dy + nodeHeight / 2 },
{ x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 + height }, { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 + height },
{ x: dx + nodeWidth / 2, y: dy + nodeHeight / 2 }, { x: dx - width / 2, y: dy - nodeHeight / 2 + height },
{ x: dx - nodeWidth / 2, y: dy + nodeHeight / 2 },
{ x: dx - nodeWidth / 2, y: dy + nodeHeight / 2 - bbox.height },
{ x: dx - nodeWidth / 2 + (bbox.width - width) / 2, y: dy + nodeHeight / 2 - bbox.height },
]; ];
const pos = intersect.polygon(node, points, point);
return pos;
} }
const pos = intersect.polygon(node, points, point);
return pos;
}; };
return shapeSvg; return shapeSvg;

86
packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
View File

@@ -35,6 +35,8 @@ export const iconSquare = async (
const x = -width / 2; const x = -width / 2;
const y = -height / 2; const y = -height / 2;
const labelPadding = node.label ? 8 : 0;
// @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, { stroke: stylesMap.get('fill') || mainBkg }); const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg });
@@ -46,7 +48,17 @@ export const iconSquare = async (
const iconNode = rc.rectangle(x, y, width, height, options); const iconNode = rc.rectangle(x, y, width, height, options);
const outerWidth = Math.max(width, bbox.width);
const outerHeight = height + bbox.height + labelPadding;
const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, {
...options,
fill: 'none',
stroke: 'none',
});
const iconShape = shapeSvg.insert(() => iconNode, ':first-child'); const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
const outerShape = shapeSvg.insert(() => outerNode);
if (node.icon) { if (node.icon) {
const iconElem = shapeSvg.append('g'); const iconElem = shapeSvg.append('g');
@@ -56,21 +68,26 @@ export const iconSquare = async (
const iconBBox = iconElem.node().getBBox(); const iconBBox = iconElem.node().getBBox();
const iconWidth = iconBBox.width; const iconWidth = iconBBox.width;
const iconHeight = iconBBox.height; const iconHeight = iconBBox.height;
const iconX = iconBBox.x;
const iconY = iconBBox.y;
iconElem.attr( iconElem.attr(
'transform', 'transform',
`translate(${-iconWidth / 2},${topLabel ? height / 2 - iconHeight - halfPadding + bbox.height / 2 : -height / 2 + halfPadding - bbox.height / 2})` `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - halfPadding - iconY : -outerHeight / 2 + halfPadding - iconY})`
); );
iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
} }
label.attr( label.attr(
'transform', 'transform',
`translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 - 5 - bbox.height / 2 : height / 2 - bbox.height / 2})` `translate(${-width / 2 + width / 2 - bbox.width / 2},${topLabel ? -height / 2 - bbox.height / 2 - labelPadding / 2 : height / 2 - bbox.height / 2 + labelPadding / 2})`
); );
iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`); iconShape.attr(
'transform',
`translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})`
);
updateNodeBounds(node, shapeSvg); updateNodeBounds(node, outerShape);
node.intersect = function (point) { node.intersect = function (point) {
log.info('iconSquare intersect', node, point); log.info('iconSquare intersect', node, point);
@@ -79,51 +96,34 @@ export const iconSquare = async (
} }
const dx = node.x ?? 0; const dx = node.x ?? 0;
const dy = node.y ?? 0; const dy = node.y ?? 0;
const nodeWidth = node.width ?? 0;
const nodeHeight = node.height ?? 0; const nodeHeight = node.height ?? 0;
let points = [];
if (topLabel) { if (topLabel) {
const points = [ points = [
{ x: dx - nodeWidth / 2, y: dy - nodeHeight / 2 - bbox.height / 2 }, { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 },
{ x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 - bbox.height / 2 }, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 },
{ x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2 }, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
{ { x: dx + width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
x: dx + nodeWidth / 2 - (bbox.width - width) / 2, { x: dx + width / 2, y: dy + nodeHeight / 2 },
y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2, { x: dx - width / 2, y: dy + nodeHeight / 2 },
}, { x: dx - width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
{ { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding },
x: dx + nodeWidth / 2 - (bbox.width - width) / 2,
y: dy + nodeHeight / 2 - bbox.height / 2,
},
{
x: dx + nodeWidth / 2 - (bbox.width - width) / 2 - width,
y: dy + nodeHeight / 2 - bbox.height / 2,
},
{
x: dx + nodeWidth / 2 - (bbox.width - width) / 2 - width,
y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2,
},
{ x: dx - nodeWidth / 2, y: dy - nodeHeight / 2 + bbox.height - bbox.height / 2 },
]; ];
const pos = intersect.polygon(node, points, point);
return pos;
} else { } else {
const points = [ points = [
{ x: dx - nodeWidth / 2 + (bbox.width - width) / 2, y: dy - nodeHeight / 2 }, { x: dx - width / 2, y: dy - nodeHeight / 2 },
{ x: dx - nodeWidth / 2 + (bbox.width - width) / 2 + width, y: dy - nodeHeight / 2 }, { x: dx + width / 2, y: dy - nodeHeight / 2 },
{ { x: dx + width / 2, y: dy - nodeHeight / 2 + height },
x: dx - nodeWidth / 2 + (bbox.width - width) / 2 + width, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 + height },
y: dy - nodeHeight / 2 + height, { x: dx + bbox.width / 2 / 2, y: dy + nodeHeight / 2 },
}, { x: dx - bbox.width / 2, y: dy + nodeHeight / 2 },
{ x: dx + nodeWidth / 2, y: dy - nodeHeight / 2 + height }, { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 + height },
{ x: dx + nodeWidth / 2, y: dy + nodeHeight / 2 }, { x: dx - width / 2, y: dy - nodeHeight / 2 + height },
{ x: dx - nodeWidth / 2, y: dy + nodeHeight / 2 },
{ x: dx - nodeWidth / 2, y: dy + nodeHeight / 2 - bbox.height },
{ x: dx - nodeWidth / 2 + (bbox.width - width) / 2, y: dy + nodeHeight / 2 - bbox.height },
]; ];
const pos = intersect.polygon(node, points, point);
return pos;
} }
const pos = intersect.polygon(node, points, point);
return pos;
}; };
return shapeSvg; return shapeSvg;