Добавляем все файлы

main_plugin/dgrm/infrastructure/svg-text-area.js

@@ -0,0 +1,70 @@
+import { svgTextDraw } from './svg-text-draw.js';
+import { svgEl } from './util.js';
+
+/**
+ * Create teaxtArea above SVGTextElement 'textEl'
+ * update 'textEl' with text from teaxtArea
+ * resize teaxtArea - so teaxtArea always cover all 'textEl'
+ * @param {SVGTextElement} textEl
+ * @param {number} verticalMiddle em
+ * @param {string} val
+ * @param {{(val:string):void}} onchange
+ * @param {{(val:string):void}} onblur
+ */
+export function textareaCreate(textEl, verticalMiddle, val, onchange, onblur) {
+	let foreign = svgEl('foreignObject');
+	const textarea = document.createElement('textarea');
+	const draw = () => foreignWidthSet(textEl, foreign, textarea, textareaPaddingAndBorder, textareaStyle.textAlign);
+
+	textarea.value = val || '';
+	textarea.oninput = function() {
+		svgTextDraw(textEl, verticalMiddle, textarea.value);
+		onchange(textarea.value);
+		draw();
+	};
+	textarea.onblur = function() {
+		onblur(textarea.value);
+	};
+	textarea.onpointerdown = function(evt) {
+		evt.stopImmediatePropagation();
+	};
+
+	foreign.appendChild(textarea);
+	textEl.parentElement.appendChild(foreign);
+
+	const textareaStyle = getComputedStyle(textarea);
+	// must be in px
+	const textareaPaddingAndBorder = parseInt(textareaStyle.paddingLeft) + parseInt(textareaStyle.borderWidth);
+	draw();
+
+	textarea.focus();
+
+	return {
+		dispose: () => { foreign.remove(); foreign = null; },
+		draw
+	};
+}
+
+/**
+ * @param {SVGTextElement} textEl
+ * @param {SVGForeignObjectElement} foreign
+ * @param {HTMLTextAreaElement} textarea
+ * @param {number} textareaPaddingAndBorder
+ * @param {string} textAlign
+ */
+function foreignWidthSet(textEl, foreign, textarea, textareaPaddingAndBorder, textAlign) {
+	const textBbox = textEl.getBBox();
+	const width = textBbox.width + 20; // +20 paddings for iPhone
+
+	foreign.width.baseVal.value = width + 2 * textareaPaddingAndBorder + 2; // +2 magic number for FireFox
+	foreign.x.baseVal.value = textBbox.x - textareaPaddingAndBorder - (
+		textAlign === 'center'
+			? 10
+			: textAlign === 'right' ? 20 : 0);
+
+	foreign.height.baseVal.value = textBbox.height + 2 * textareaPaddingAndBorder + 3; // +3 magic number for FireFox
+	foreign.y.baseVal.value = textBbox.y - textareaPaddingAndBorder;
+
+	textarea.style.width = `${width}px`;
+	textarea.style.height = `${textBbox.height}px`;
+}