function shapeCreate(canvas, shapeData, shapeHtml, cons, onTextChange, settingsPnlCreateFn) {
	/** @type {ShapeElement} */
	const el = svgEl('g', `${shapeHtml}
		${Object.entries(cons)
		.map(cc => `<circle data-key="${cc[0]}" data-connect="${cc[1].dir}"	class="hovertrack" data-evt-index="2" r="10" cx="0" cy="0" style="transform: translate(${cc[1].position.x}px, ${cc[1].position.y}px);" />`)
		.join()}`);

	const textSettings = {
		/** @type {SVGTextElement} */
		el: child(el, 'text'),
		/** vericale middle, em */
		vMid: 0
	};

	svgTextDraw(textSettings.el, textSettings.vMid, shapeData.title);

	const shapeProc = shapeEditEvtProc(canvas, el, shapeData, cons, textSettings,
		settingsPnlCreateFn,
		// onTextChange
		() => onTextChange(textSettings.el));

	return {
		el,
		cons,
		draw: shapeProc.draw
	};
}
provides:
 - shape move
 - connectors

 - text editor
 - standard edit panel
 - onTextChange callback
@param {CanvasElement} canvas
@param {string} shapeHtml must have '<text data-key="text">'
@param {ShapeData & { title?: string, styles?: string[]}} shapeData
@param {ConnectorsData} cons
@param {SettingsPnlCreateFn=} settingsPnlCreateFn
@param {{(txtEl:SVGTextElement):void}} onTextChange