@sequent-org/moodboard 1.4.51 → 1.4.53

package/src/services/ImageAttachmentService.js

@@ -0,0 +1,260 @@
+import { Events } from '../core/events/Events.js';
+
+const IMAGE_TYPES = new Set(['image', 'revit-screenshot-img', 'model3d-screenshot-img']);
+
+function isImageType(type) { return IMAGE_TYPES.has(type); }
+function isDrawingType(type) { return type === 'drawing'; }
+
+/**
+ * Проверяет, что прямоугольник inner целиком вмещается в outer.
+ * Координаты — мировые (top-left + size).
+ */
+function isFullyContained(inner, outer) {
+	return inner.x >= outer.x &&
+		inner.y >= outer.y &&
+		(inner.x + inner.w) <= (outer.x + outer.w) &&
+		(inner.y + inner.h) <= (outer.y + outer.h);
+}
+
+function getObjRect(obj) {
+	return {
+		x: obj.position?.x ?? 0,
+		y: obj.position?.y ?? 0,
+		w: obj.width ?? 0,
+		h: obj.height ?? 0,
+	};
+}
+
+/**
+ * Управляет привязкой drawing-объектов к изображениям.
+ *
+ * Правила:
+ * - Привязка происходит только если drawing целиком внутри изображения.
+ * - Фрейм первичен: если у drawing уже есть properties.frameId — imageId не ставим.
+ * - Привязанный drawing перемещается вместе с изображением при drag.
+ * - При resize изображения пересчитываем, какие drawing остаются внутри.
+ */
+export class ImageAttachmentService {
+	constructor(eventBus, pixi, state) {
+		this.eventBus = eventBus;
+		this.pixi = pixi;
+		this.state = state;
+	}
+
+	// ─── Вспомогательные ──────────────────────────────────────────────────────
+
+	/**
+	 * Находит id изображения, полностью вмещающего drawing.
+	 * Если несколько — берём с наибольшим zIndex PIXI (верхнее).
+	 * Если у drawing есть frameId — возвращает null (фрейм первичен).
+	 */
+	_findHostImage(drawingObj) {
+		if (drawingObj.properties?.frameId) return null;
+
+		const dr = getObjRect(drawingObj);
+		const images = (this.state.state.objects || []).filter(o => isImageType(o.type));
+		const candidates = images.filter(img => isFullyContained(dr, getObjRect(img)));
+		if (!candidates.length) return null;
+
+		candidates.sort((a, b) => {
+			const pa = this.pixi.objects.get(a.id);
+			const pb = this.pixi.objects.get(b.id);
+			return (pb?.zIndex ?? 0) - (pa?.zIndex ?? 0);
+		});
+		return candidates[0].id;
+	}
+
+	_getImageChildren(imageId) {
+		return (this.state.state.objects || [])
+			.filter(o => o.properties?.imageId === imageId)
+			.map(o => o.id);
+	}
+
+	// ─── Логика пересчёта ─────────────────────────────────────────────────────
+
+	/** Пересчитывает imageId для одного drawing по текущим bounds. */
+	_recomputeImageAttachment(objectId) {
+		const obj = (this.state.state.objects || []).find(o => o.id === objectId);
+		if (!obj || !isDrawingType(obj.type)) return;
+
+		const newImageId = this._findHostImage(obj);
+		const prevImageId = obj.properties?.imageId ?? null;
+		if (newImageId === prevImageId) return;
+
+		obj.properties = obj.properties || {};
+		if (newImageId) {
+			obj.properties.imageId = newImageId;
+		} else {
+			delete obj.properties.imageId;
+		}
+		this.state.markDirty();
+	}
+
+	/** При создании изображения прикрепляет все drawing, оказавшиеся внутри. */
+	_attachDrawingsToNewImage(imageId) {
+		const imageObj = (this.state.state.objects || []).find(o => o.id === imageId);
+		if (!imageObj) return;
+		const ir = getObjRect(imageObj);
+		let changed = false;
+
+		for (const obj of this.state.state.objects || []) {
+			if (!isDrawingType(obj.type)) continue;
+			if (obj.properties?.frameId) continue;
+			if (obj.properties?.imageId) continue;
+			if (isFullyContained(getObjRect(obj), ir)) {
+				obj.properties = obj.properties || {};
+				obj.properties.imageId = imageId;
+				changed = true;
+			}
+		}
+		if (changed) this.state.markDirty();
+	}
+
+	/**
+	 * Пересчитывает все drawing относительно конкретного изображения.
+	 * Вызывается после resize или drag изображения.
+	 */
+	_recomputeAllForImage(imageId) {
+		const imageObj = (this.state.state.objects || []).find(o => o.id === imageId);
+		if (!imageObj) return;
+		const ir = getObjRect(imageObj);
+		let changed = false;
+
+		for (const obj of this.state.state.objects || []) {
+			if (!isDrawingType(obj.type)) continue;
+			if (obj.properties?.frameId) continue;
+
+			const prevImageId = obj.properties?.imageId ?? null;
+			const inside = isFullyContained(getObjRect(obj), ir);
+			const attached = prevImageId === imageId;
+
+			if (inside && !attached && !prevImageId) {
+				obj.properties = obj.properties || {};
+				obj.properties.imageId = imageId;
+				changed = true;
+			} else if (!inside && attached) {
+				delete obj.properties.imageId;
+				changed = true;
+			}
+		}
+		if (changed) this.state.markDirty();
+	}
+
+	// ─── Lifecycle ────────────────────────────────────────────────────────────
+
+	attach() {
+		if (this._attached) return;
+		this._attached = true;
+
+		// Создан объект: изображение → прикрепляем вложенные drawing;
+		//               drawing → проверяем попадание внутрь изображения.
+		this._onObjectCreated = ({ objectId, objectData }) => {
+			try {
+				if (!objectData) return;
+				if (isImageType(objectData.type)) {
+					this._attachDrawingsToNewImage(objectId);
+				} else if (isDrawingType(objectData.type)) {
+					this._recomputeImageAttachment(objectId);
+				}
+			} catch (_) { /* no-op */ }
+		};
+		this.eventBus.on(Events.Object.Created, this._onObjectCreated);
+
+		// DragStart изображения — сохраняем начальные позиции (PIXI-центры) детей.
+		this._onDragStart = (data) => {
+			const moved = (this.state.state.objects || []).find(o => o.id === data.object);
+			if (!moved || !isImageType(moved.type)) return;
+
+			const p = this.pixi.objects.get(moved.id);
+			this._imgDragImgStart = { x: p?.x ?? 0, y: p?.y ?? 0 };
+			this._imgDragChildStart = new Map();
+			for (const childId of this._getImageChildren(moved.id)) {
+				const cp = this.pixi.objects.get(childId);
+				if (cp) this._imgDragChildStart.set(childId, { x: cp.x, y: cp.y });
+			}
+		};
+		this.eventBus.on(Events.Tool.DragStart, this._onDragStart);
+
+		// DragUpdate изображения — тащим привязанные drawing.
+		this._onDragUpdate = (data) => {
+			const moved = (this.state.state.objects || []).find(o => o.id === data.object);
+			if (!moved || !isImageType(moved.type)) return;
+
+			const p = this.pixi.objects.get(moved.id);
+			const start = this._imgDragImgStart ?? { x: p?.x ?? 0, y: p?.y ?? 0 };
+			const dx = (p?.x ?? 0) - start.x;
+			const dy = (p?.y ?? 0) - start.y;
+
+			for (const childId of this._getImageChildren(moved.id)) {
+				let startPos = this._imgDragChildStart?.get(childId);
+				const cp = this.pixi.objects.get(childId);
+				if (!startPos) {
+					if (cp) {
+						startPos = { x: cp.x - dx, y: cp.y - dy };
+						this._imgDragChildStart ??= new Map();
+						this._imgDragChildStart.set(childId, startPos);
+					} else {
+						continue;
+					}
+				}
+				const nx = startPos.x + dx;
+				const ny = startPos.y + dy;
+				if (cp) { cp.x = nx; cp.y = ny; }
+				const stObj = (this.state.state.objects || []).find(o => o.id === childId);
+				if (stObj) {
+					const hw = cp ? (cp.width ?? 0) / 2 : 0;
+					const hh = cp ? (cp.height ?? 0) / 2 : 0;
+					stObj.position.x = nx - hw;
+					stObj.position.y = ny - hh;
+					this.eventBus.emit(Events.Object.TransformUpdated, {
+						objectId: childId,
+						type: 'position',
+						position: { x: stObj.position.x, y: stObj.position.y },
+					});
+				}
+			}
+		};
+		this.eventBus.on(Events.Tool.DragUpdate, this._onDragUpdate);
+
+		// DragEnd: для drawing — пересчитываем imageId;
+		//          для изображения — финализируем drag-state и пересчитываем вложенных.
+		this._onDragEnd = (data) => {
+			const movedObj = (this.state.state.objects || []).find(o => o.id === data.object);
+			if (!movedObj) return;
+
+			if (isDrawingType(movedObj.type)) {
+				this._recomputeImageAttachment(movedObj.id);
+			} else if (isImageType(movedObj.type)) {
+				this._imgDragImgStart = null;
+				this._imgDragChildStart = null;
+				this._recomputeAllForImage(movedObj.id);
+			}
+		};
+		this.eventBus.on(Events.Tool.DragEnd, this._onDragEnd);
+
+		// ResizeEnd изображения — пересчитываем, какие drawing остаются внутри.
+		this._onResizeEnd = (data) => {
+			const obj = (this.state.state.objects || []).find(o => o.id === data.object);
+			if (!obj || !isImageType(obj.type)) return;
+			this._recomputeAllForImage(obj.id);
+		};
+		this.eventBus.on(Events.Tool.ResizeEnd, this._onResizeEnd);
+	}
+
+	detach() {
+		if (!this._attached) return;
+		this._attached = false;
+		if (this._onObjectCreated) this.eventBus.off(Events.Object.Created, this._onObjectCreated);
+		if (this._onDragStart) this.eventBus.off(Events.Tool.DragStart, this._onDragStart);
+		if (this._onDragUpdate) this.eventBus.off(Events.Tool.DragUpdate, this._onDragUpdate);
+		if (this._onDragEnd) this.eventBus.off(Events.Tool.DragEnd, this._onDragEnd);
+		if (this._onResizeEnd) this.eventBus.off(Events.Tool.ResizeEnd, this._onResizeEnd);
+		this._onObjectCreated = null;
+		this._onDragStart = null;
+		this._onDragUpdate = null;
+		this._onDragEnd = null;
+		this._onResizeEnd = null;
+		this._imgDragImgStart = null;
+		this._imgDragChildStart = null;
+	}
+}

package/src/tools/object-tools/placement/GhostController.js

@@ -378,10 +378,10 @@ export class GhostController {
         const title = host.pending.properties?.title || 'Новый';
 
         const rootStyles = (typeof window !== 'undefined') ? getComputedStyle(document.documentElement) : null;
-        const cssBorderWidth = rootStyles ? parseFloat(rootStyles.getPropertyValue('--frame-border-width') || '4') : 4;
+        const cssBorderWidth = rootStyles ? parseFloat(rootStyles.getPropertyValue('--frame-border-width') || '5') : 5;
         const cssCornerRadius = rootStyles ? parseFloat(rootStyles.getPropertyValue('--frame-corner-radius') || '6') : 6;
         const cssBorderColor = rootStyles ? rootStyles.getPropertyValue('--frame-border-color').trim() : '';
-        const borderWidth = Number.isFinite(cssBorderWidth) ? cssBorderWidth : 4;
+        const borderWidth = Number.isFinite(cssBorderWidth) ? cssBorderWidth : 5;
         const cornerRadius = Number.isFinite(cssCornerRadius) ? cssCornerRadius : 6;
         let strokeColor;
         if (cssBorderColor && cssBorderColor.startsWith('#')) {

package/src/tools/object-tools/placement/PlacementPayloadFactory.js

@@ -43,7 +43,15 @@ export class PlacementPayloadFactory {
             type: 'frame',
             id: 'frame',
             position: { x, y },
-            properties: { width: Math.round(w), height: Math.round(h), title: 'Произвольный', lockedAspect: false, isArbitrary: true }
+            properties: {
+                width: Math.round(w),
+                height: Math.round(h),
+                title: 'Произвольный',
+                lockedAspect: false,
+                isArbitrary: true,
+                bgMode: 'solid',
+                backgroundColor: 0xFFFFFF,
+            }
         });
     }
 

package/src/tools/object-tools/selection/FrameTitleInlineEditorController.js

@@ -50,16 +50,25 @@ export function openFrameTitleEditor(object, _create = false) {
         ? toScreenWithContainerOffset(titleLayer, view, 0, 0)
         : { x: 0, y: 0 };
 
-    // Ширина редактора = ширина titleBg в экранных пикселях (с учётом зум-компенсации)
+    // Габариты редактора = titleBg в экранных пикселях (с учётом зум-компенсации)
     let inputWidth = 150;
+    let inputHeight = 22;
     if (titleLayer && frameInstance.titleBg) {
         const bgRight = toScreenWithContainerOffset(titleLayer, view, frameInstance.titleBg.width || 150, 0);
-        inputWidth = Math.max(100, Math.round(bgRight.x - screenPos.x));
+        const bgBottom = toScreenWithContainerOffset(titleLayer, view, 0, frameInstance.titleBg.height || 22);
+        inputWidth = Math.max(1, Math.round(bgRight.x - screenPos.x));
+        inputHeight = Math.max(1, Math.round(bgBottom.y - screenPos.y));
     }
 
-    const wrapper = createFrameTitleEditorWrapper();
-    const input = createFrameTitleEditorInput(currentTitle);
+    const titleColors = typeof frameInstance.getTitleColors === 'function'
+        ? frameInstance.getTitleColors()
+        : { bgCss: '#ffffff', textCss: '#333333' };
+
+    const wrapper = createFrameTitleEditorWrapper(titleColors.bgCss);
+    wrapper.id = `mb-frame-title-editor-${objectId}`;
+    const input = createFrameTitleEditorInput(currentTitle, titleColors.textCss);
     wrapper.style.width = `${inputWidth}px`;
+    wrapper.style.height = `${inputHeight}px`;
 
     wrapper.appendChild(input);
     view.parentElement.appendChild(wrapper);

package/src/tools/object-tools/selection/InlineEditorDomFactory.js

@@ -30,38 +30,43 @@ export function createFileNameEditorWrapper() {
     return wrapper;
 }
 
-export function createFrameTitleEditorWrapper() {
+export function createFrameTitleEditorWrapper(bgColor = '#ffffff') {
     const wrapper = document.createElement('div');
     wrapper.className = 'moodboard-frame-title-editor';
     wrapper.style.cssText = `
             position: absolute;
             z-index: 1000;
-            background: white;
-            border: 2px solid #2563eb;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            background: ${bgColor};
+            border: none;
             border-radius: 6px;
-            padding: 3px 6px;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-            min-width: 100px;
-            max-width: 320px;
+            padding: 4px 8px;
+            overflow: hidden;
             font-family: Inter, system-ui, -apple-system, Arial, sans-serif;
         `;
     return wrapper;
 }
 
-export function createFrameTitleEditorInput(title) {
+export function createFrameTitleEditorInput(title, textColor = '#333333') {
     const input = document.createElement('input');
     input.type = 'text';
     input.value = title;
     input.style.cssText = `
+            box-sizing: border-box;
             border: none;
             outline: none;
             background: transparent;
             font-family: Inter, system-ui, -apple-system, Arial, sans-serif;
             font-size: 14px;
             font-weight: 500;
+            line-height: 14px;
+            height: 14px;
             width: 100%;
-            padding: 1px 2px;
-            color: #1f2937;
+            margin: 0;
+            padding: 0;
+            color: ${textColor};
         `;
     return input;
 }

package/src/ui/ConnectorPropertiesPanel.js

@@ -10,6 +10,7 @@ import {
     getSelectedConnectorId,
     getConnectorData,
     getConnectorMidpointScreen,
+    getConnectorTopScreen,
     getConnectorStyle,
     buildStyleUpdate,
 } from './connector-properties/ConnectorPropertiesPanelMapper.js';
@@ -62,18 +63,21 @@ export class ConnectorPropertiesPanel {
         const stillSelected = getSelectedConnectorId(this.core) === this.currentId;
         if (!stillSelected) { this.hide(); return; }
 
-        const mid = getConnectorMidpointScreen(this.core, this.currentId);
-        if (!mid) return;
+        const top = getConnectorTopScreen(this.core, this.currentId);
+        if (!top) return;
 
         const panelW = this.panel.offsetWidth || 480;
         const panelH = this.panel.offsetHeight || 40;
-        const GAP    = 18;
+        const GAP    = 20;
 
-        let px = mid.x - Math.round(panelW / 2);
-        let py = mid.y - panelH - GAP;
+        let px = top.x - Math.round(panelW / 2);
+        let py = top.topY - panelH - GAP;
 
-        // Если уходит вверх за контейнер — переносим ниже середины
-        if (py < 0) py = mid.y + GAP;
+        // Если уходит вверх за контейнер — переносим ниже наивысшей точки
+        if (py < 0) {
+            const mid = getConnectorMidpointScreen(this.core, this.currentId);
+            py = (mid?.y ?? top.topY) + GAP;
+        }
 
         // Clamp по ширине контейнера
         const cw = this.container.offsetWidth || window.innerWidth;