import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; import type { Node } from '$root/rendering-util/types.d.ts'; import { styles2String, userNodeOverrides, } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; import rough from 'roughjs'; import { insertPolygonShape } from './insertPolygonShape.js'; export const createHexagonPathD = ( x: number, y: number, width: number, height: number, m: number ): string => { return [ `M${x + m},${y}`, `L${x + width - m},${y}`, `L${x + width},${y - height / 2}`, `L${x + width - m},${y - height}`, `L${x + m},${y - height}`, `L${x},${y - height / 2}`, 'Z', ].join(' '); }; export const hexagon = async (parent: SVGAElement, node: Node): Promise => { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const f = 4; const h = bbox.height + node.padding; const m = h / f; const w = bbox.width + 2 * m + node.padding; const points = [ { x: m, y: 0 }, { x: w - m, y: 0 }, { x: w, y: -h / 2 }, { x: w - m, y: -h }, { x: m, y: -h }, { x: 0, y: -h / 2 }, ]; let polygon: d3.Selection; const { cssStyles } = node; if (node.look === 'handDrawn') { // @ts-ignore - rough is not typed const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, {}); const pathData = createHexagonPathD(0, 0, w, h, m); const roughNode = rc.path(pathData, options); polygon = shapeSvg .insert(() => roughNode, ':first-child') .attr('transform', `translate(${-w / 2}, ${h / 2})`); if (cssStyles) { polygon.attr('style', cssStyles); } } else { polygon = insertPolygonShape(shapeSvg, w, h, points); } if (nodeStyles) { polygon.attr('style', nodeStyles); } node.width = w; node.height = h; updateNodeBounds(node, polygon); node.intersect = function (point) { return intersect.polygon(node, points, point); }; return shapeSvg; };