@sequent-org/moodboard 1.4.32 → 1.4.33

package/src/tools/object-tools/DrawingTool.js

@@ -5,6 +5,11 @@ import * as PIXI from 'pixi.js';
 /** Максимум точек в одном штрихе (decimation при превышении). */
 const MAX_POINTS = 5000;
 
+/** Шаг примагничивания угла (45°) при зажатом Shift. */
+const SNAP_STEP = Math.PI / 4;
+/** Допуск примагничивания: ±8° вокруг каждого кратного 45°. */
+const SNAP_TOLERANCE = (8 * Math.PI) / 180;
+
 /**
  * Инструмент рисования (карандаш)
  */
@@ -22,6 +27,10 @@ export class DrawingTool extends BaseTool {
         this.app = null;
         this.world = null;
 
+        // Якорная точка для режима прямой линии (Shift)
+        this._straightAnchor = null;
+        this._shiftDown = false;
+
         // Параметры кисти по умолчанию
         this.brush = {
             color: 0x111827, // чёрный
@@ -124,6 +133,7 @@ export class DrawingTool extends BaseTool {
         this.world.addChild(this.tempGraphics);
 
         const p = this._toWorld(event.x, event.y);
+        this._straightAnchor = { ...p };
         this.points.push(p);
         this._redrawTemporary();
     }
@@ -131,11 +141,23 @@ export class DrawingTool extends BaseTool {
     onMouseMove(event) {
         super.onMouseMove(event);
         if (!this.isDrawing) return;
+
         const p = this._toWorld(event.x, event.y);
+        const isStraight = !!(event.originalEvent?.shiftKey) && this.brush.mode !== 'eraser';
+
+        if (isStraight) {
+            const end = this._snapEndpoint(this._straightAnchor, p);
+            this.points = [this._straightAnchor, end];
+            this._redrawTemporary();
+            return;
+        }
+
         const prev = this.points[this.points.length - 1];
         // Фильтр слишком частых точек
         if (!prev || Math.hypot(p.x - prev.x, p.y - prev.y) >= 1) {
             this.points.push(p);
+            // Обновляем якорь — при отпускании Shift штрих продолжится с текущей точки
+            this._straightAnchor = { ...p };
             // Ластик: при движении удаляем все фигуры, пересекаемые текущим сегментом
             if (this.brush.mode === 'eraser' && prev) {
                 this._eraserSweep(prev, p);
@@ -153,6 +175,26 @@ export class DrawingTool extends BaseTool {
         }
     }
 
+    onKeyDown(event) {
+        if (event.key === 'Shift' && this.isDrawing && this.brush.mode !== 'eraser') {
+            this._shiftDown = true;
+            // Перерисовываем прямую до текущей позиции курсора
+            if (this.currentPoint) {
+                const p = this._toWorld(this.currentPoint.x, this.currentPoint.y);
+                const end = this._snapEndpoint(this._straightAnchor, p);
+                this.points = [this._straightAnchor, end];
+                this._redrawTemporary();
+            }
+        }
+    }
+
+    onKeyUp(event) {
+        if (event.key === 'Shift' && this.isDrawing && this.brush.mode !== 'eraser') {
+            this._shiftDown = false;
+            // При отпускании Shift якорь уже актуален — продолжение в freehand-режиме
+        }
+    }
+
     onMouseUp(event) {
         super.onMouseUp(event);
         this._finishAndCommit();
@@ -161,6 +203,8 @@ export class DrawingTool extends BaseTool {
     _finishAndCommit() {
         if (!this.isDrawing) return;
         this.isDrawing = false;
+        this._straightAnchor = null;
+        this._shiftDown = false;
 
         // Если ластик — чистим временную линию и выходим (удаление уже произошло onMouseDown)
         if (this.brush.mode === 'eraser') {
@@ -196,11 +240,15 @@ export class DrawingTool extends BaseTool {
         if (pointsToUse.length > MAX_POINTS) {
             pointsToUse = this._decimatePoints(pointsToUse, MAX_POINTS);
         }
-        // Нормализуем точки относительно левого-верхнего угла
-        const normPoints = pointsToUse.map(pt => ({ x: pt.x - minX, y: pt.y - minY }));
+
+        // position — целая (округлённая) точка; нормализуем точки от тех же значений,
+        // иначе дробный остаток minX/minY сдвигал бы геометрию относительно position.
+        const posX = Math.round(minX);
+        const posY = Math.round(minY);
+        const normPoints = pointsToUse.map(pt => ({ x: pt.x - posX, y: pt.y - posY }));
 
         // Создаем объект типа drawing через существующий пайплайн
-        const position = { x: Math.round(minX), y: Math.round(minY) };
+        const position = { x: posX, y: posY };
         const properties = {
             points: normPoints,
             strokeColor: this.brush.color,
@@ -335,6 +383,29 @@ export class DrawingTool extends BaseTool {
         g.quadraticCurveTo(pen.x, pen.y, last.x, last.y);
     }
 
+    /**
+     * Примагничивает конечную точку прямой к ближайшему кратному 45°,
+     * если угол попадает в допуск SNAP_TOLERANCE. Длина линии сохраняется.
+     * Если отрезок слишком короткий или угол вне зоны — возвращает p без изменений.
+     */
+    _snapEndpoint(anchor, p) {
+        const dx = p.x - anchor.x;
+        const dy = p.y - anchor.y;
+        const len = Math.hypot(dx, dy);
+        if (len < 1) return p;
+
+        const angle = Math.atan2(dy, dx);
+        const snapped = Math.round(angle / SNAP_STEP) * SNAP_STEP;
+
+        if (Math.abs(angle - snapped) <= SNAP_TOLERANCE) {
+            return {
+                x: anchor.x + Math.cos(snapped) * len,
+                y: anchor.y + Math.sin(snapped) * len
+            };
+        }
+        return p;
+    }
+
     _toWorld(x, y) {
         if (!this.world) return { x, y };
         const global = new PIXI.Point(x, y);
@@ -389,24 +460,29 @@ export class DrawingTool extends BaseTool {
                 const props = meta.properties || {};
                 const pts = Array.isArray(props.points) ? props.points : [];
                 if (pts.length >= 2) {
-                    // Оценка масштабов
+                    // Масштаб берём из локальных границ (не зависят от zoom) — как в _containsPoint DrawingObject
+                    const lb = typeof pixi.getLocalBounds === 'function' ? pixi.getLocalBounds() : b;
                     const baseW = props.baseWidth || 1;
                     const baseH = props.baseHeight || 1;
-                    const scaleX = baseW ? (b.width / baseW) : 1;
-                    const scaleY = baseH ? (b.height / baseH) : 1;
+                    const scaleX = baseW ? (lb.width / baseW) : 1;
+                    const scaleY = baseH ? (lb.height / baseH) : 1;
                     const eraserThresh = Math.max(6, (props.strokeWidth || 2) / 2 + radius);
                     // трансформируем сегмент ластика в локальные координаты фигуры
                     const localPrev = pixi.toLocal(new PIXI.Point(prevGlobal.x, prevGlobal.y));
                     const localCurr = pixi.toLocal(new PIXI.Point(currGlobal.x, currGlobal.y));
-                    // Проверяем пересечение с каждым отрезком рисунка
+                    // Проверяем пересечение отрезка ластика с каждым отрезком рисунка.
+                    // Используем отрезок→отрезок, а не точка→отрезок: при быстром движении
+                    // оба конца сегмента ластика могут быть дальше threshold, но сам отрезок
+                    // пересекает линию — именно это давало «раз через раз» при быстром мазке.
                     for (let i = 0; i < pts.length - 1 && !intersects; i++) {
                         const ax = pts[i].x * scaleX;
                         const ay = pts[i].y * scaleY;
                         const bx = pts[i + 1].x * scaleX;
                         const by = pts[i + 1].y * scaleY;
-                        const d = this._distancePointToSegment(localPrev.x, localPrev.y, ax, ay, bx, by);
-                        const d2 = this._distancePointToSegment(localCurr.x, localCurr.y, ax, ay, bx, by);
-                        if (Math.min(d, d2) <= eraserThresh) intersects = true;
+                        if (this._distanceSegmentToSegment(
+                            localPrev.x, localPrev.y, localCurr.x, localCurr.y,
+                            ax, ay, bx, by
+                        ) <= eraserThresh) intersects = true;
                     }
                 }
             }
@@ -445,6 +521,30 @@ export class DrawingTool extends BaseTool {
         const cy = ay + t * aby;
         return Math.hypot(px - cx, py - cy);
     }
+
+    // Минимальное расстояние между отрезком p1→p2 и отрезком q1→q2.
+    // Возвращает 0 если отрезки пересекаются — гарантирует стирание при
+    // быстром поперечном движении, когда ни одна из концевых точек не близка к линии.
+    _distanceSegmentToSegment(p1x, p1y, p2x, p2y, q1x, q1y, q2x, q2y) {
+        if (this._segmentsIntersect(p1x, p1y, p2x, p2y, q1x, q1y, q2x, q2y)) return 0;
+        return Math.min(
+            this._distancePointToSegment(p1x, p1y, q1x, q1y, q2x, q2y),
+            this._distancePointToSegment(p2x, p2y, q1x, q1y, q2x, q2y),
+            this._distancePointToSegment(q1x, q1y, p1x, p1y, p2x, p2y),
+            this._distancePointToSegment(q2x, q2y, p1x, p1y, p2x, p2y)
+        );
+    }
+
+    _segmentsIntersect(p1x, p1y, p2x, p2y, q1x, q1y, q2x, q2y) {
+        const d1x = p2x - p1x, d1y = p2y - p1y;
+        const d2x = q2x - q1x, d2y = q2y - q1y;
+        const cross = d1x * d2y - d1y * d2x;
+        if (Math.abs(cross) < 1e-10) return false; // параллельны или коллинеарны
+        const dx = q1x - p1x, dy = q1y - p1y;
+        const t = (dx * d2y - dy * d2x) / cross;
+        const u = (dx * d1y - dy * d1x) / cross;
+        return t >= 0 && t <= 1 && u >= 0 && u <= 1;
+    }
 }
 
 

package/src/tools/object-tools/LaserPointerTool.js

@@ -0,0 +1,121 @@
+import { BaseTool } from '../BaseTool.js';
+import * as PIXI from 'pixi.js';
+
+const LASER_COLOR = 0xff2222;
+const LASER_DOT_COLOR = 0xff4444;
+const TRAIL_MAX_POINTS = 30;
+const FADE_STEPS = 20;
+const FADE_INTERVAL_MS = 40;
+
+/**
+ * Инструмент «Лазерная указка» — оставляет эфемерный затухающий след, ничего не сохраняет.
+ */
+export class LaserPointerTool extends BaseTool {
+    constructor(eventBus) {
+        super('laser', eventBus);
+        this.hotkey = null;
+        this.cursor = 'crosshair';
+
+        this.isDrawing = false;
+        this.points = [];
+        this.graphics = null;
+        this.app = null;
+        this._fadeTimer = null;
+    }
+
+    activate(app) {
+        super.activate();
+        this.app = app;
+        if (app && app.view) app.view.style.cursor = 'crosshair';
+        if (app && app.stage) {
+            app.stage.sortableChildren = true;
+            this.graphics = new PIXI.Graphics();
+            this.graphics.zIndex = 3000;
+            this.graphics.name = 'laser-trail';
+            app.stage.addChild(this.graphics);
+        }
+    }
+
+    deactivate() {
+        this._clearFadeTimer();
+        if (this.graphics) {
+            this.graphics.clear();
+            if (this.graphics.parent) this.graphics.parent.removeChild(this.graphics);
+            this.graphics.destroy();
+            this.graphics = null;
+        }
+        if (this.app && this.app.view) this.app.view.style.cursor = '';
+        this.app = null;
+        this.points = [];
+        this.isDrawing = false;
+        super.deactivate();
+    }
+
+    onMouseDown(event) {
+        this.isDrawing = true;
+        this._clearFadeTimer();
+        if (this.graphics) this.graphics.alpha = 1;
+        this.points = [{ x: event.x, y: event.y }];
+        this._redrawTrail();
+    }
+
+    onMouseMove(event) {
+        if (!this.isDrawing) return;
+        this.points.push({ x: event.x, y: event.y });
+        if (this.points.length > TRAIL_MAX_POINTS) this.points.shift();
+        this._redrawTrail();
+    }
+
+    onMouseUp() {
+        this.isDrawing = false;
+        this._scheduleFade();
+    }
+
+    _redrawTrail() {
+        if (!this.graphics) return;
+        this.graphics.clear();
+        const n = this.points.length;
+        if (n < 2) return;
+
+        for (let i = 1; i < n; i++) {
+            const t = i / n;
+            const width = Math.max(1, t * 3);
+            this.graphics.lineStyle(width, LASER_COLOR, t * 0.85);
+            this.graphics.moveTo(this.points[i - 1].x, this.points[i - 1].y);
+            this.graphics.lineTo(this.points[i].x, this.points[i].y);
+        }
+
+        const last = this.points[n - 1];
+        this.graphics.beginFill(LASER_DOT_COLOR, 0.95);
+        this.graphics.drawCircle(last.x, last.y, 5);
+        this.graphics.endFill();
+    }
+
+    _scheduleFade() {
+        this._clearFadeTimer();
+        let step = 0;
+        this._fadeTimer = setInterval(() => {
+            step++;
+            if (!this.graphics) { clearInterval(this._fadeTimer); this._fadeTimer = null; return; }
+            const alpha = Math.max(0, 1 - step / FADE_STEPS);
+            this.graphics.alpha = alpha;
+            if (step >= FADE_STEPS) {
+                clearInterval(this._fadeTimer);
+                this._fadeTimer = null;
+                if (this.graphics) {
+                    this.graphics.clear();
+                    this.graphics.alpha = 1;
+                }
+                this.points = [];
+            }
+        }, FADE_INTERVAL_MS);
+    }
+
+    _clearFadeTimer() {
+        if (this._fadeTimer) {
+            clearInterval(this._fadeTimer);
+            this._fadeTimer = null;
+        }
+        if (this.graphics) this.graphics.alpha = 1;
+    }
+}

package/src/tools/object-tools/SelectTool.js

@@ -28,7 +28,9 @@ import {
     openFileNameEditor as openFileNameEditorViaController,
     closeFileNameEditor as closeFileNameEditorViaController,
     closeTextEditor as closeTextEditorViaController,
-    closeMindmapEditor as closeMindmapEditorViaController
+    closeMindmapEditor as closeMindmapEditorViaController,
+    openFrameTitleEditor as openFrameTitleEditorViaController,
+    closeFrameTitleEditor as closeFrameTitleEditorViaController,
 } from './selection/InlineEditorController.js';
 import {
     hitTest as hitTestViaService,
@@ -206,6 +208,20 @@ export class SelectTool extends BaseTool {
     endBoxSelect() {
         return endBoxSelectViaController.call(this);
     }
+
+    startLassoSelect(event) {
+        this.isLassoSelect = true;
+        if (this._lassoSelect) this._lassoSelect.start({ x: event.x, y: event.y }, this.isMultiSelect);
+    }
+
+    updateLassoSelect(event) {
+        if (this._lassoSelect) this._lassoSelect.update({ x: event.x, y: event.y });
+    }
+
+    endLassoSelect() {
+        this.isLassoSelect = false;
+        if (this._lassoSelect) this._lassoSelect.end();
+    }
     rectIntersectsRect(a, b) {
         return !(
             b.x > a.x + a.width ||
@@ -346,6 +362,14 @@ export class SelectTool extends BaseTool {
         return closeMindmapEditorViaController.call(this, commit);
     }
 
+    _openFrameTitleEditor(object, create = false) {
+        return openFrameTitleEditorViaController.call(this, object, create);
+    }
+
+    _closeFrameTitleEditor(commit) {
+        return closeFrameTitleEditorViaController.call(this, commit);
+    }
+
     destroy() {
         return destroySelectTool.call(this, () => super.destroy());
     }

package/src/tools/object-tools/TextTool.js

@@ -39,7 +39,12 @@ export class TextTool extends BaseTool {
             color: '#000000',
             textAlign: 'left',
             fontWeight: 'normal',
-            fontStyle: 'normal'
+            fontStyle: 'normal',
+            bold: false,
+            italic: false,
+            underline: false,
+            strikethrough: false,
+            listType: 'none',
         };
     }
     

package/src/tools/object-tools/connector/ConnectorDragController.js

@@ -11,12 +11,21 @@ import {
 const DRAG_THRESHOLD = 4;
 /** Порог «у кромки» в CSS-пикселях. */
 const EDGE_THRESHOLD_CSS = 10;
+/** Порог магнита к коннектору цели — строго больше EDGE_THRESHOLD_CSS, иначе грань перехватит. */
+const ANCHOR_SNAP_CSS = 16;
 /** Радиус поиска ближайшего объекта при клике по якорю (world-px). */
 const CLICK_FIND_RADIUS = 400;
 /** Зазор между дубликатом и источником при автосоздании (world-px). */
 const CLONE_GAP = 40;
 /** Типы объектов, к которым можно привязать коннектор (из ConnectionAnchorsLayer). */
 const ALLOWED_BIND_TYPES = new Set(['shape', 'note', 'image', 'text', 'simple-text', 'file']);
+/** Нормализованные якоря коннекторов: top, right, bottom, left. */
+const TARGET_ANCHORS = [
+    { x: 0.5, y: 0 },
+    { x: 1,   y: 0.5 },
+    { x: 0.5, y: 1 },
+    { x: 0,   y: 0.5 },
+];
 
 /**
  * Обрабатывает жест «pointerdown на точке подключения → drag → drop»
@@ -92,6 +101,23 @@ export class ConnectorDragController {
         return { x: posData.position.x, y: posData.position.y, ...sizeData.size };
     }
 
+    /**
+     * Возвращает ближайший якорь из TARGET_ANCHORS в пределах ANCHOR_SNAP_CSS от worldPt,
+     * иначе null. Приоритет выше грани — вызывать в _resolveEnd первым.
+     */
+    _snapToAnchor(bounds, worldPt) {
+        const scale = this._world()?.scale?.x || 1;
+        const thr = ANCHOR_SNAP_CSS / scale;
+        let best = null, bestDist = thr;
+        for (const a of TARGET_ANCHORS) {
+            const ax = bounds.x + a.x * bounds.width;
+            const ay = bounds.y + a.y * bounds.height;
+            const d = Math.hypot(worldPt.x - ax, worldPt.y - ay);
+            if (d <= bestDist) { bestDist = d; best = a; }
+        }
+        return best;
+    }
+
     /** Возвращает true, если worldPt находится в пределах EDGE_THRESHOLD_CSS от кромки. */
     _nearEdge(bounds, worldPt) {
         const scale = this._world()?.scale?.x || 1;
@@ -116,6 +142,12 @@ export class ConnectorDragController {
         if (objectId && objectId !== sourceBoundId) {
             const bounds = this._objectBounds(objectId);
             if (bounds) {
+                // ПРИОРИТЕТ 1: магнит к коннектору (середина грани)
+                const snapAnchor = this._snapToAnchor(bounds, worldPt);
+                if (snapAnchor) {
+                    return { boundId: objectId, anchor: snapAnchor, isPrecise: true, isExact: false };
+                }
+                // ПРИОРИТЕТ 2: произвольная точка грани
                 if (this._nearEdge(bounds, worldPt)) {
                     return {
                         boundId: objectId,
@@ -124,6 +156,7 @@ export class ConnectorDragController {
                         isExact: false,
                     };
                 }
+                // ПРИОРИТЕТ 3: центр объекта
                 return { boundId: objectId, anchor: { x: 0.5, y: 0.5 }, isPrecise: false, isExact: false };
             }
         }
@@ -150,19 +183,33 @@ export class ConnectorDragController {
 
         if (!this._previewGraphics) return;
 
-        const worldPt = this._toWorld(e.clientX, e.clientY);
-        const fromPt  = terminalWorldPoint(this.eventBus, this._sourceTerminal);
-        drawPreview(this._previewGraphics, fromPt, worldPt);
+        const worldPt  = this._toWorld(e.clientX, e.clientY);
+        const fromPt   = terminalWorldPoint(this.eventBus, this._sourceTerminal);
 
         this._highlightGraphics.clear();
         const objectId = this._hitTest(e.clientX, e.clientY);
+        let previewEnd = worldPt;
         if (objectId && objectId !== this._sourceTerminal?.boundId) {
             const bounds = this._objectBounds(objectId);
             if (bounds) {
                 this._highlightGraphics.lineStyle({ width: 2, color: 0x2563EB, alpha: 0.85 });
                 this._highlightGraphics.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
+                // Подводим превью к коннектору, если курсор в зоне магнита
+                const snapAnchor = this._snapToAnchor(bounds, worldPt);
+                if (snapAnchor) {
+                    previewEnd = {
+                        x: bounds.x + snapAnchor.x * bounds.width,
+                        y: bounds.y + snapAnchor.y * bounds.height,
+                    };
+                    // Подсвечиваем конкретный коннектор
+                    this._highlightGraphics.lineStyle(0);
+                    this._highlightGraphics.beginFill(0x2563EB, 1);
+                    this._highlightGraphics.drawCircle(previewEnd.x, previewEnd.y, 6);
+                    this._highlightGraphics.endFill();
+                }
             }
         }
+        drawPreview(this._previewGraphics, fromPt, previewEnd);
     }
 
     _onUp(e) {

package/src/tools/object-tools/connector/connectorGesture.js

@@ -1,5 +1,6 @@
 import * as PIXI from 'pixi.js';
 import { Events } from '../../../core/events/Events.js';
+import { buildPath } from '../../../services/ConnectorRouter.js';
 
 /**
  * Переиспользуемые хелперы жеста коннектора.
@@ -53,33 +54,46 @@ export function computeAnchor(eventBus, objectId, worldPt) {
 }
 
 /**
- * Рисует превью линии со стрелкой в PIXI-графику (PIXI 7 API).
+ * Рисует превью коннектора со стрелкой в PIXI-графику (PIXI 7 API).
+ * Маршрут совпадает с тем, что будет создан при отпускании (по умолчанию 'elbow'),
+ * поэтому «резинка» во время перетаскивания выглядит как итоговый коннектор.
  * graphics — PIXI.Graphics, уже добавленный в worldLayer.
+ *
+ * @param {string} route 'straight'|'elbow'|'bezier' — должен совпадать с дефолтом createConnectorFromTerminals
  */
-export function drawPreview(graphics, fromWorldPt, toWorldPt) {
+export function drawPreview(graphics, fromWorldPt, toWorldPt, route = 'elbow') {
     graphics.clear();
 
-    graphics.lineStyle({ width: 2, color: 0x2563EB, alpha: 0.7, cap: 'round' });
-    graphics.moveTo(fromWorldPt.x, fromWorldPt.y);
-    graphics.lineTo(toWorldPt.x, toWorldPt.y);
+    // Без привязанной грани dir-векторы неизвестны → buildPath даёт H-V-H/V-H-V излом
+    const pts = buildPath(fromWorldPt, toWorldPt, route);
+    if (pts.length < 2) return;
 
-    const dx = toWorldPt.x - fromWorldPt.x;
-    const dy = toWorldPt.y - fromWorldPt.y;
+    graphics.lineStyle({ width: 2, color: 0x2563EB, alpha: 0.7, cap: 'round', join: 'round' });
+    graphics.moveTo(pts[0].x, pts[0].y);
+    for (let i = 1; i < pts.length; i++) {
+        graphics.lineTo(pts[i].x, pts[i].y);
+    }
+
+    // Наконечник по направлению последнего сегмента — открытый chevron,
+    // как у финального коннектора (ConnectorLayer.drawHead, kind='arrow').
+    const tip  = pts[pts.length - 1];
+    const prev = pts[pts.length - 2];
+    const dx = tip.x - prev.x;
+    const dy = tip.y - prev.y;
     const len = Math.hypot(dx, dy);
     if (len > 10) {
         const ux = dx / len;
         const uy = dy / len;
-        const aLen = 10;
-        const aAng = 0.4;
-        graphics.beginFill(0x2563EB, 0.7);
-        graphics.drawPolygon([
-            toWorldPt.x, toWorldPt.y,
-            toWorldPt.x - aLen * (ux * Math.cos(aAng)  - uy * Math.sin(aAng)),
-            toWorldPt.y - aLen * (uy * Math.cos(aAng)  + ux * Math.sin(aAng)),
-            toWorldPt.x - aLen * (ux * Math.cos(-aAng) - uy * Math.sin(-aAng)),
-            toWorldPt.y - aLen * (uy * Math.cos(-aAng) + ux * Math.sin(-aAng)),
-        ]);
-        graphics.endFill();
+        const px = -uy;
+        const py =  ux;
+        const aLen  = 12;
+        const aHalf = 5;
+        const bx = tip.x - ux * aLen;
+        const by = tip.y - uy * aLen;
+        graphics.lineStyle({ width: 2, color: 0x2563EB, alpha: 0.7, cap: 'round', join: 'round' });
+        graphics.moveTo(bx + px * aHalf, by + py * aHalf);
+        graphics.lineTo(tip.x, tip.y);
+        graphics.lineTo(bx - px * aHalf, by - py * aHalf);
     }
 }
 
@@ -102,7 +116,7 @@ export function createConnectorFromTerminals(core, eventBus, sourceTerminal, end
             width: 2,
             dash: false,
             head: { start: false, end: true },
-            route: 'straight',
+            route: 'elbow',
         },
     });
 }

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

@@ -123,6 +123,7 @@ export class PlacementInputRouter {
 
         let props = host.pending.properties || {};
         const isTextWithEditing = host.pending.type === 'text' && props.editOnCreate;
+        const isShapeType = host.pending.type === 'shape';
         const isImage = host.pending.type === 'image';
         const isFile = host.pending.type === 'file';
         const presetSize = {
@@ -250,12 +251,32 @@ export class PlacementInputRouter {
                     y: Math.round(worldPoint.y - side / 2)
                 };
             }
+            if (isShapeType) {
+                const handleShapeCreated = (objectData) => {
+                    if (objectData.type === 'shape') {
+                        host.eventBus.off(Events.Object.Created, handleShapeCreated);
+                        host.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
+                        setTimeout(() => {
+                            host.eventBus.emit(Events.Tool.ObjectEdit, {
+                                object: {
+                                    id: objectData.id,
+                                    type: 'shape',
+                                    position: objectData.position,
+                                    properties: { content: '' }
+                                },
+                                create: true
+                            });
+                        }, 50);
+                    }
+                };
+                host.eventBus.on(Events.Object.Created, handleShapeCreated);
+            }
             host.payloadFactory.emitGenericPlacement(host.pending.type, position, props);
         }
 
         host.pending = null;
         host.hideGhost();
-        if (!isTextWithEditing && !(isFile && props.selectFileOnPlace)) {
+        if (!isTextWithEditing && !isShapeType && !(isFile && props.selectFileOnPlace)) {
             host.eventBus.emit(Events.Keyboard.ToolSelect, { tool: 'select' });
         }
     }