@sequent-org/moodboard 1.4.32 → 1.4.33

package/src/ui/connector-properties/ConnectorPropertiesPanelBindings.js

@@ -0,0 +1,223 @@
+import {
+    hexToPixiColor,
+    buildStyleUpdate,
+} from './ConnectorPropertiesPanelMapper.js';
+import {
+    showStrokeDropdown,
+    hideStrokeDropdown,
+    showLabelColorDropdown,
+    hideLabelColorDropdown,
+} from './ConnectorPropertiesPanelRenderer.js';
+import { Events } from '../../core/events/Events.js';
+
+export function bindConnectorPropertiesPanelControls(inst) {
+    if (inst._bindingsAttached) return;
+
+    // ── Цвет линии ──────────────────────────────────────────────────────────
+
+    inst.strokeColorButton.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (inst.strokeColorDropdown.style.display === 'none') {
+            showStrokeDropdown(inst);
+        } else {
+            hideStrokeDropdown(inst);
+        }
+    });
+
+    inst._strokePresetButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const pixi = parseInt(btn.dataset.pixiValue, 10);
+            inst._emitStyle({ stroke: pixi });
+            hideStrokeDropdown(inst);
+        });
+    });
+
+    inst.strokeColorInput.addEventListener('change', (e) => {
+        const pixi = hexToPixiColor(e.target.value);
+        inst._emitStyle({ stroke: pixi });
+        hideStrokeDropdown(inst);
+    });
+
+    inst._onStrokeDocumentClick = (e) => {
+        if (inst._strokeSelectorContainer && !inst._strokeSelectorContainer.contains(e.target)) {
+            hideStrokeDropdown(inst);
+        }
+    };
+    document.addEventListener('click', inst._onStrokeDocumentClick);
+
+    // ── Ширина ───────────────────────────────────────────────────────────────
+
+    inst.widthButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const w = parseInt(btn.dataset.width, 10);
+            inst._emitStyle({ width: w });
+        });
+    });
+
+    // ── Маршрут ──────────────────────────────────────────────────────────────
+
+    inst.routeSelect.addEventListener('change', (e) => {
+        inst._emitStyle({ route: e.target.value });
+    });
+
+    // ── Пунктир ──────────────────────────────────────────────────────────────
+
+    inst.dashButton.addEventListener('click', () => {
+        const connector = inst._getConnector();
+        const currentDash = connector?.properties?.style?.dash ?? false;
+        inst._emitStyle({ dash: !currentDash });
+    });
+
+    // ── Наконечник конец ─────────────────────────────────────────────────────
+
+    inst.headEndSelect.addEventListener('change', (e) => {
+        const connector = inst._getConnector();
+        const currentHead = connector?.properties?.style?.head ?? { start: 'none', end: 'arrow' };
+        inst._emitStyle({ head: { ...currentHead, end: e.target.value } });
+    });
+
+    // ── Наконечник начало ────────────────────────────────────────────────────
+
+    inst.headStartSelect.addEventListener('change', (e) => {
+        const connector = inst._getConnector();
+        const currentHead = connector?.properties?.style?.head ?? { start: 'none', end: 'arrow' };
+        inst._emitStyle({ head: { ...currentHead, start: e.target.value } });
+    });
+
+    // ── Разворот ─────────────────────────────────────────────────────────────
+
+    inst._swapBtn.addEventListener('click', () => {
+        if (!inst.currentId) return;
+        const connector = inst._getConnector();
+        if (!connector?.properties) return;
+
+        const oldStart = connector.properties.start;
+        const oldEnd   = connector.properties.end;
+        const oldHead  = connector.properties.style?.head ?? { start: 'none', end: 'arrow' };
+
+        inst.eventBus.emit(Events.Object.StateChanged, {
+            objectId: inst.currentId,
+            updates: {
+                properties: {
+                    start: oldEnd,
+                    end:   oldStart,
+                    style: {
+                        ...connector.properties.style,
+                        head: { start: oldHead.end, end: oldHead.start },
+                    },
+                },
+            },
+        });
+    });
+
+    // ── Кнопка T+: создать / открыть редактор метки ──────────────────────────
+
+    inst._textBtn.addEventListener('click', () => {
+        if (!inst.currentId) return;
+        const connector = inst._getConnector();
+        if (!connector) return;
+
+        const existingLabel = connector.properties?.style?.label;
+        if (!existingLabel) {
+            // Инициализируем метку с пустым текстом
+            const strokeColor = connector.properties?.style?.stroke ?? 0x212121;
+            inst._emitLabel({ text: '', color: strokeColor, fontSize: 14 });
+        }
+
+        // Открываем редактор после небольшой задержки (StateChanged успевает обработаться)
+        requestAnimationFrame(() => {
+            inst.core?.connectorLabelLayer?.openEditorForConnector(inst.currentId);
+        });
+    });
+
+    // ── Замок ────────────────────────────────────────────────────────────────
+
+    inst._lockBtn.addEventListener('click', () => {
+        if (!inst.currentId) return;
+        const connector = inst._getConnector();
+        const locked = !(connector?.properties?.locked ?? false);
+        inst.eventBus.emit(Events.Object.StateChanged, {
+            objectId: inst.currentId,
+            updates: { properties: { locked } },
+        });
+        inst._lockBtn.textContent = locked ? '🔒' : '🔓';
+    });
+
+    // ── Удалить ──────────────────────────────────────────────────────────────
+
+    inst._delBtn.addEventListener('click', () => {
+        if (!inst.currentId) return;
+        inst.eventBus.emit(Events.Tool.ObjectsDelete, { objects: [inst.currentId] });
+    });
+
+    // ── Label: цвет (dropdown пресетов) ─────────────────────────────────────
+
+    if (inst._labelColorBtn) {
+        inst._labelColorBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            if (inst._labelColorDropdown?.style.display === 'none') {
+                showLabelColorDropdown(inst);
+            } else {
+                hideLabelColorDropdown(inst);
+            }
+        });
+    }
+
+    inst._labelPresetButtons?.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const pixi = parseInt(btn.dataset.pixiValue, 10);
+            const connector = inst._getConnector();
+            const existing  = connector?.properties?.style?.label;
+            if (!existing) return;
+            inst._emitLabel({ ...existing, color: pixi });
+            hideLabelColorDropdown(inst);
+        });
+    });
+
+    inst._onLabelDocumentClick = (e) => {
+        if (inst._labelColorContainer && !inst._labelColorContainer.contains(e.target)) {
+            hideLabelColorDropdown(inst);
+        }
+    };
+    document.addEventListener('click', inst._onLabelDocumentClick);
+
+    // ── Label: размер шрифта (степпер) ───────────────────────────────────────
+
+    const FONT_SIZES = [8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 40, 48];
+
+    if (inst._labelSizeDown) {
+        inst._labelSizeDown.addEventListener('click', () => {
+            const connector = inst._getConnector();
+            const existing  = connector?.properties?.style?.label;
+            if (!existing) return;
+            const cur  = existing.fontSize ?? 14;
+            const next = FONT_SIZES.slice().reverse().find(s => s < cur) ?? FONT_SIZES[0];
+            inst._emitLabel({ ...existing, fontSize: next });
+        });
+    }
+
+    if (inst._labelSizeUp) {
+        inst._labelSizeUp.addEventListener('click', () => {
+            const connector = inst._getConnector();
+            const existing  = connector?.properties?.style?.label;
+            if (!existing) return;
+            const cur  = existing.fontSize ?? 14;
+            const next = FONT_SIZES.find(s => s > cur) ?? FONT_SIZES[FONT_SIZES.length - 1];
+            inst._emitLabel({ ...existing, fontSize: next });
+        });
+    }
+
+    inst._bindingsAttached = true;
+}
+
+export function unbindConnectorPropertiesPanelControls(inst) {
+    if (inst._onStrokeDocumentClick) {
+        document.removeEventListener('click', inst._onStrokeDocumentClick);
+        inst._onStrokeDocumentClick = null;
+    }
+    if (inst._onLabelDocumentClick) {
+        document.removeEventListener('click', inst._onLabelDocumentClick);
+        inst._onLabelDocumentClick = null;
+    }
+    inst._bindingsAttached = false;
+}

package/src/ui/connector-properties/ConnectorPropertiesPanelEventBridge.js

@@ -0,0 +1,114 @@
+import { Events } from '../../core/events/Events.js';
+
+export function attachConnectorPropertiesPanelEventBridge(inst) {
+    if (inst._eventBridgeAttached) return;
+
+    inst._eventBridgeHandlers = {
+        onSelectionAdd:    () => inst.updateFromSelection(),
+        onSelectionRemove: () => inst.updateFromSelection(),
+        onSelectionClear:  () => inst.hide(),
+
+        onDragStart:       () => inst.hide(),
+        onDragUpdate:      () => inst.reposition(),
+        onDragEnd:         () => inst.updateFromSelection(),
+
+        onGroupDragStart:  () => inst.hide(),
+        onGroupDragUpdate: () => inst.reposition(),
+        onGroupDragEnd:    () => inst.updateFromSelection(),
+
+        onResizeUpdate:    () => inst.reposition(),
+        onRotateUpdate:    () => inst.reposition(),
+
+        onZoomPercent:     () => { if (inst.currentId) inst.reposition(); },
+        onPanUpdate:       () => { if (inst.currentId) inst.reposition(); },
+        onViewportChanged: () => { if (inst.currentId) inst.reposition(); },
+
+        onDeleted: (objectId) => {
+            if (inst.currentId && objectId === inst.currentId) inst.hide();
+        },
+
+        onToolActivated: ({ tool }) => {
+            if (tool !== 'select') inst.hide();
+        },
+
+        onStateChanged: ({ objectId }) => {
+            if (inst.currentId && objectId === inst.currentId
+                && inst.panel && inst.panel.style.display !== 'none') {
+                inst._updateControlsFromObject();
+            }
+        },
+
+        // History.Changed — синхронизация после undo/redo (как у FramePropertiesPanel)
+        onHistoryChanged: () => {
+            if (inst.currentId && inst.panel && inst.panel.style.display !== 'none') {
+                inst._updateControlsFromObject();
+            }
+        },
+    };
+
+    const h = inst._eventBridgeHandlers;
+    const eb = inst.eventBus;
+
+    eb.on(Events.Tool.SelectionAdd,    h.onSelectionAdd);
+    eb.on(Events.Tool.SelectionRemove, h.onSelectionRemove);
+    eb.on(Events.Tool.SelectionClear,  h.onSelectionClear);
+
+    eb.on(Events.Tool.DragStart,       h.onDragStart);
+    eb.on(Events.Tool.DragUpdate,      h.onDragUpdate);
+    eb.on(Events.Tool.DragEnd,         h.onDragEnd);
+
+    eb.on(Events.Tool.GroupDragStart,  h.onGroupDragStart);
+    eb.on(Events.Tool.GroupDragUpdate, h.onGroupDragUpdate);
+    eb.on(Events.Tool.GroupDragEnd,    h.onGroupDragEnd);
+
+    eb.on(Events.Tool.ResizeUpdate,    h.onResizeUpdate);
+    eb.on(Events.Tool.RotateUpdate,    h.onRotateUpdate);
+
+    eb.on(Events.UI.ZoomPercent,       h.onZoomPercent);
+    eb.on(Events.Tool.PanUpdate,       h.onPanUpdate);
+    eb.on(Events.Viewport.Changed,     h.onViewportChanged);
+
+    eb.on(Events.Object.Deleted,       h.onDeleted);
+    eb.on(Events.Tool.Activated,       h.onToolActivated);
+    eb.on(Events.Object.StateChanged,  h.onStateChanged);
+    eb.on(Events.History.Changed,      h.onHistoryChanged);
+
+    inst._eventBridgeAttached = true;
+}
+
+export function detachConnectorPropertiesPanelEventBridge(inst) {
+    if (!inst._eventBridgeAttached || !inst._eventBridgeHandlers || !inst.eventBus?.off) {
+        inst._eventBridgeAttached = false;
+        return;
+    }
+
+    const h = inst._eventBridgeHandlers;
+    const eb = inst.eventBus;
+
+    eb.off(Events.Tool.SelectionAdd,    h.onSelectionAdd);
+    eb.off(Events.Tool.SelectionRemove, h.onSelectionRemove);
+    eb.off(Events.Tool.SelectionClear,  h.onSelectionClear);
+
+    eb.off(Events.Tool.DragStart,       h.onDragStart);
+    eb.off(Events.Tool.DragUpdate,      h.onDragUpdate);
+    eb.off(Events.Tool.DragEnd,         h.onDragEnd);
+
+    eb.off(Events.Tool.GroupDragStart,  h.onGroupDragStart);
+    eb.off(Events.Tool.GroupDragUpdate, h.onGroupDragUpdate);
+    eb.off(Events.Tool.GroupDragEnd,    h.onGroupDragEnd);
+
+    eb.off(Events.Tool.ResizeUpdate,    h.onResizeUpdate);
+    eb.off(Events.Tool.RotateUpdate,    h.onRotateUpdate);
+
+    eb.off(Events.UI.ZoomPercent,       h.onZoomPercent);
+    eb.off(Events.Tool.PanUpdate,       h.onPanUpdate);
+    eb.off(Events.Viewport.Changed,     h.onViewportChanged);
+
+    eb.off(Events.Object.Deleted,       h.onDeleted);
+    eb.off(Events.Tool.Activated,       h.onToolActivated);
+    eb.off(Events.Object.StateChanged,  h.onStateChanged);
+    eb.off(Events.History.Changed,      h.onHistoryChanged);
+
+    inst._eventBridgeHandlers = null;
+    inst._eventBridgeAttached = false;
+}

package/src/ui/connector-properties/ConnectorPropertiesPanelMapper.js

@@ -0,0 +1,144 @@
+import { Events } from '../../core/events/Events.js';
+
+// ── Цветовые пресеты линии ──────────────────────────────────────────────────
+
+export const STROKE_COLOR_PRESETS = [
+    { color: '#2563EB', value: 0x2563EB, name: 'Синий' },
+    { color: '#111827', value: 0x111827, name: 'Чёрный' },
+    { color: '#6B7280', value: 0x6B7280, name: 'Серый' },
+    { color: '#EF4444', value: 0xEF4444, name: 'Красный' },
+    { color: '#F59E0B', value: 0xF59E0B, name: 'Жёлтый' },
+    { color: '#10B981', value: 0x10B981, name: 'Зелёный' },
+    { color: '#8B5CF6', value: 0x8B5CF6, name: 'Фиолетовый' },
+    { color: '#EC4899', value: 0xEC4899, name: 'Розовый' },
+    { color: '#06B6D4', value: 0x06B6D4, name: 'Голубой' },
+    { color: '#FFFFFF', value: 0xFFFFFF, name: 'Белый' },
+];
+
+// ── Пресеты ширины ───────────────────────────────────────────────────────────
+
+export const WIDTH_PRESETS = [1, 2, 4, 8];
+
+// ── Варианты маршрута ────────────────────────────────────────────────────────
+
+export const ROUTE_OPTIONS = [
+    { value: 'straight', label: 'Прямая' },
+    { value: 'elbow',    label: 'Угловой' },
+    { value: 'bezier',   label: 'Кривая' },
+];
+
+// ── Варианты наконечника ─────────────────────────────────────────────────────
+
+export const HEAD_OPTIONS = [
+    { value: 'none',     label: '—  нет' },
+    { value: 'arrow',    label: '→  стрелка' },
+    { value: 'triangle', label: '▷  треугольник' },
+    { value: 'circle',   label: '○  круг' },
+    { value: 'diamond',  label: '◇  ромб' },
+];
+
+// ── Дефолтный style коннектора ───────────────────────────────────────────────
+
+export const CONNECTOR_STYLE_DEFAULTS = {
+    stroke: 0x2563EB,
+    width: 2,
+    dash: false,
+    route: 'elbow',
+    head: { start: 'none', end: 'arrow' },
+};
+
+// ── Вспомогательные функции ──────────────────────────────────────────────────
+
+/**
+ * Конвертирует PIXI-число (0xRRGGBB) в CSS #RRGGBB.
+ */
+export function pixiColorToHex(pixi) {
+    return '#' + (pixi >>> 0).toString(16).padStart(6, '0').toUpperCase();
+}
+
+/**
+ * Конвертирует CSS #RRGGBB в PIXI-число.
+ */
+export function hexToPixiColor(hex) {
+    return parseInt((hex || '#000000').replace('#', ''), 16);
+}
+
+/**
+ * Возвращает id выделенного коннектора или null.
+ */
+export function getSelectedConnectorId(core) {
+    const ids = core?.selectTool ? Array.from(core.selectTool.selectedObjects || []) : [];
+    if (ids.length !== 1) return null;
+    const id = ids[0];
+    const obj = (core?.state?.state?.objects ?? []).find(o => o.id === id);
+    return (obj?.type === 'connector') ? id : null;
+}
+
+/**
+ * Возвращает объект-коннектор из state по id.
+ */
+export function getConnectorData(core, id) {
+    return (core?.state?.state?.objects ?? []).find(o => o.id === id) ?? null;
+}
+
+/**
+ * Возвращает экранную середину коннектора, опираясь на _lastSegments.
+ * Координаты — целые числа (screen-space integer contract).
+ * @returns {{ x: number, y: number } | null}
+ */
+export function getConnectorMidpointScreen(core, connectorId) {
+    const segments = core?.connectorLayer?._lastSegments;
+    if (!segments) return null;
+    const seg = segments.find(s => s.id === connectorId);
+    if (!seg) return null;
+
+    const worldLayer = core?.pixi?.worldLayer;
+    const scale  = worldLayer?.scale?.x ?? 1;
+    const worldX = worldLayer?.x ?? 0;
+    const worldY = worldLayer?.y ?? 0;
+
+    // Поддерживаем оба формата: { points } и устаревший { start, end }
+    let midWorldX, midWorldY;
+    if (seg.points && seg.points.length >= 2) {
+        // Берём середину ломаной (средняя точка по индексу)
+        const pts = seg.points;
+        const mid = pts[Math.floor((pts.length - 1) / 2)];
+        const mid2 = pts[Math.ceil((pts.length - 1) / 2)];
+        midWorldX = (mid.x + mid2.x) / 2;
+        midWorldY = (mid.y + mid2.y) / 2;
+    } else if (seg.start && seg.end) {
+        midWorldX = (seg.start.x + seg.end.x) / 2;
+        midWorldY = (seg.start.y + seg.end.y) / 2;
+    } else {
+        return null;
+    }
+
+    return {
+        x: Math.round(midWorldX * scale + worldX),
+        y: Math.round(midWorldY * scale + worldY),
+    };
+}
+
+/**
+ * Формирует updates.properties.style для StateChanged-эмита.
+ */
+export function buildStyleUpdate(partialStyle) {
+    return { properties: { style: partialStyle } };
+}
+
+/**
+ * Читает текущий style коннектора с fallback на дефолты.
+ */
+export function getConnectorStyle(connector) {
+    const s = connector?.properties?.style ?? {};
+    return {
+        stroke: s.stroke  ?? CONNECTOR_STYLE_DEFAULTS.stroke,
+        width:  s.width   ?? CONNECTOR_STYLE_DEFAULTS.width,
+        dash:   s.dash    ?? CONNECTOR_STYLE_DEFAULTS.dash,
+        route:  s.route   ?? CONNECTOR_STYLE_DEFAULTS.route,
+        head: {
+            start: s.head?.start ?? CONNECTOR_STYLE_DEFAULTS.head.start,
+            end:   s.head?.end   ?? CONNECTOR_STYLE_DEFAULTS.head.end,
+        },
+    };
+}