function rhomb(canvas, rhombData) {
	const templ = `
		<path data-key="outer" data-evt-no data-evt-index="2" d="M-72 0 L0 -72 L72 0 L0 72 Z" stroke-width="0" fill="transparent" />
		<path data-key="border" d="M-39 0 L0 -39 L39 0 L0 39 Z" stroke-width="20" stroke="#fff"	fill="transparent" stroke-linejoin="round" />
		<path data-key="main" d="M-39 0 L0 -39 L39 0 L0 39 Z" stroke-width="18" stroke-linejoin="round"	stroke="#1D809F" fill="#1D809F" />
		<text data-key="text" x="0" y="0" text-anchor="middle" style="pointer-events: none;" fill="#fff">&nbsp;</text>`;

	const shape = shapeCreate(canvas, rhombData, templ,
		{
			right: { dir: 'right', position: { x: 48, y: 0 } },
			left: { dir: 'left', position: { x: -48, y: 0 } },
			bottom: { dir: 'bottom', position: { x: 0, y: 48 } },
			top: { dir: 'top', position: { x: 0, y: -48 } }
		},
		// onTextChange
		txtEl => {
			const newWidth = ceil(96, 48, textElRhombWidth(txtEl) - 20); // -20 experemental val
			if (newWidth !== rhombData.w) {
				rhombData.w = newWidth;
				resize();
			}
		});
	classAdd(shape.el, 'shrhomb');

	function resize() {
		const connectors = rhombCalc(rhombData.w, 0);
		shape.cons.right.position.x = connectors.r.x;
		shape.cons.left.position.x = connectors.l.x;
		shape.cons.bottom.position.y = connectors.b.y;
		shape.cons.top.position.y = connectors.t.y;
		for (const connectorKey in shape.cons) {
			positionSet(child(shape.el, connectorKey), shape.cons[connectorKey].position);
		}

		const mainRhomb = rhombCalc(rhombData.w, 9);
		rhombSet(shape.el, 'main', mainRhomb);
		rhombSet(shape.el, 'border', mainRhomb);
		rhombSet(shape.el, 'outer', rhombCalc(rhombData.w, -24));

		shape.draw();
	}

	if (!!rhombData.w && rhombData.w !== 96) { resize(); } else { shape.draw(); }

	return shape.el;
}
@param {CanvasElement} canvas
@param {RhombData} rhombData