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

2025-11-06 19:41:55 +02:00
parent 235d6a3a18
commit 2e5aaec307
218 changed files with 79015 additions and 0 deletions
--- a/main_plugin/dgrm/shapes/rect-txt-settings.js
+++ b/main_plugin/dgrm/shapes/rect-txt-settings.js
@@ -0,0 +1,86 @@
+import { copyAndPast } from '../diagram/group-select-applay.js';
+import { classAdd, classDel, clickForAll, listen, classSingleAdd, evtTargetAttr } from '../infrastructure/util.js';
+import { modalCreate } from './modal-create.js';
+import { ShapeSmbl } from './shape-smbl.js';
+
+/**
+ * @param {import('../infrastructure/canvas-smbl.js').CanvasElement} canvas
+ * @param {import('./shape-smbl').ShapeElement} shapeElement
+ * @param {number} bottomX positon of the bottom left corner of the panel
+ * @param {number} bottomY positon of the bottom left corner of the panel
+ */
+export const rectTxtSettingsPnlCreate = (canvas, shapeElement, bottomX, bottomY) =>
+	modalCreate(bottomX, bottomY, new RectTxtSettings(canvas, shapeElement));
+
+class RectTxtSettings extends HTMLElement {
+	/**
+ 	 * @param {import('../infrastructure/canvas-smbl.js').CanvasElement} canvas
+	 * @param {import('./shape-smbl').ShapeElement} rectElement
+	 */
+	constructor(canvas, rectElement) {
+		super();
+		/** @private */
+		this._rectElement = rectElement;
+
+		/** @private */
+		this._canvas = canvas;
+	}
+
+	connectedCallback() {
+		const shadow = this.attachShadow({ mode: 'closed' });
+		shadow.innerHTML = `
+		<style>
+			.ln { display: flex; }
+			.ln > * {
+				height: 24px;
+				padding: 10px;
+				fill-opacity: 0.3;
+				stroke-opacity: 0.3;
+			}
+			[data-cmd] { cursor: pointer; }
+
+			.ta-1 [data-cmd-arg="1"],
+			.ta-2 [data-cmd-arg="2"],
+			.ta-3 [data-cmd-arg="3"]
+			{ fill-opacity: 1; stroke-opacity: 1; }
+		</style>
+		<ap-shape-edit id="F" edit-btn="true">
+			<div class="ln">
+				<svg data-cmd data-cmd-arg="1" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm0 15h14v2H3v-2zm0-5h18v2H3v-2zm0-5h14v2H3V9z" fill="rgb(52,71,103)"/></svg>
+				<svg data-cmd data-cmd-arg="2" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm2 15h14v2H5v-2zm-2-5h18v2H3v-2zm2-5h14v2H5V9z" fill="rgb(52,71,103)"/></svg>
+				<svg data-cmd data-cmd-arg="3" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm4 15h14v2H7v-2zm-4-5h18v2H3v-2zm4-5h14v2H7V9z" fill="rgb(52,71,103)"/></svg>
+			</div>
+		</ap-shape-edit>`;
+
+		const rectData = /** @type {import('./rect.js').RectData} */(this._rectElement[ShapeSmbl].data);
+
+		const editEl = shadow.getElementById('edit');
+		classAdd(editEl, `ta-${rectData.a}`);
+
+		// colors, del
+		listen(editEl, 'cmd', /** @param {CustomEvent<{cmd:string, arg:string}>} evt */ evt => {
+			switch (evt.detail.cmd) {
+				case 'style': classSingleAdd(this._rectElement, rectData, 'cl-', evt.detail.arg); break;
+				case 'del': this._rectElement[ShapeSmbl].del(); break;
+				case 'copy': copyAndPast(this._canvas, [this._rectElement]); break;
+			}
+		});
+
+		// text align
+		clickForAll(shadow, '[data-cmd]', evt => {
+			const alignNew = /** @type {1|2|3} */(Number.parseInt(evtTargetAttr(evt, 'data-cmd-arg')));
+			if (alignNew === rectData.a) { return; }
+
+			const alignOld = rectData.a;
+
+			// applay text align to shape
+			rectData.a = alignNew;
+			this._rectElement[ShapeSmbl].draw();
+
+			// highlight text align btn in settings panel
+			classDel(editEl, `ta-${alignOld}`);
+			classAdd(editEl, `ta-${rectData.a}`);
+		});
+	}
+}
+customElements.define('ap-rect-txt-settings', RectTxtSettings);