@sequent-org/moodboard 1.4.49 → 1.4.52

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/tools/object-tools/selection/TransformInteractionController.js

@@ -25,6 +25,12 @@ export function handleObjectSelect(objectId, event) {
 }
 
 export function startDrag(objectId, event) {
+    const req = { objectId, pixiObject: null };
+    this.emit('tool:get:object:pixi', req);
+    if (req.pixiObject?._mb?.properties?.locked) {
+        return;
+    }
+
     this.isDragging = true;
     this.dragTarget = objectId;
     // Сообщаем HtmlHandlesLayer о начале перетаскивания одиночного объекта
@@ -91,6 +97,23 @@ export function endDrag() {
 }
 
 export function startResize(handle, objectId) {
+    const isLocked = (() => {
+        if (objectId === this.groupId) {
+            return this.selection.toArray().some(id => {
+                const req = { objectId: id, pixiObject: null };
+                this.emit('tool:get:object:pixi', req);
+                return !!req.pixiObject?._mb?.properties?.locked;
+            });
+        }
+        const req = { objectId, pixiObject: null };
+        this.emit('tool:get:object:pixi', req);
+        return !!req.pixiObject?._mb?.properties?.locked;
+    })();
+
+    if (isLocked) {
+        return;
+    }
+
     // Групповой resize
     if (objectId === this.groupId && this.selection.size() > 1) {
         this.isGroupResizing = true;
@@ -169,6 +192,23 @@ export function endResize() {
 }
 
 export function startRotate(objectId) {
+    const isLocked = (() => {
+        if (objectId === this.groupId) {
+            return this.selection.toArray().some(id => {
+                const req = { objectId: id, pixiObject: null };
+                this.emit('tool:get:object:pixi', req);
+                return !!req.pixiObject?._mb?.properties?.locked;
+            });
+        }
+        const req = { objectId, pixiObject: null };
+        this.emit('tool:get:object:pixi', req);
+        return !!req.pixiObject?._mb?.properties?.locked;
+    })();
+
+    if (isLocked) {
+        return;
+    }
+
     // Групповой поворот
     if (objectId === this.groupId && this.selection.size() > 1) {
         this.isGroupRotating = true;
@@ -276,6 +316,16 @@ export function endBoxSelect() {
 }
 
 export function startGroupDrag(event) {
+    const isLocked = this.selection.toArray().some(id => {
+        const req = { objectId: id, pixiObject: null };
+        this.emit('tool:get:object:pixi', req);
+        return !!req.pixiObject?._mb?.properties?.locked;
+    });
+
+    if (isLocked) {
+        return;
+    }
+
     const gb = this.computeGroupBounds();
     this.groupStartBounds = gb;
     this.isGroupDragging = true;