@idraw/core 0.4.0-alpha.2 → 0.4.0-alpha.4

package/dist/esm/index.d.ts

@@ -1,7 +1,8 @@
 import type { Data, PointSize, CoreOptions, BoardMiddleware, ViewSizeInfo, CoreEvent } from '@idraw/types';
-export { MiddlewareSelector } from './middleware/selector';
+export { MiddlewareSelector, middlewareEventSelect } from './middleware/selector';
 export { MiddlewareScroller } from './middleware/scroller';
-export { MiddlewareScaler } from './middleware/scaler';
+export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
+export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';
 export declare class Core {
     private _board;
     private _opts;

package/dist/esm/index.js

@@ -1,9 +1,10 @@
 import { Board } from '@idraw/board';
 import { createBoardContexts, validateElements } from '@idraw/util';
 import { Cursor } from './lib/cursor';
-export { MiddlewareSelector } from './middleware/selector';
+export { MiddlewareSelector, middlewareEventSelect } from './middleware/selector';
 export { MiddlewareScroller } from './middleware/scroller';
-export { MiddlewareScaler } from './middleware/scaler';
+export { MiddlewareScaler, middlewareEventScale } from './middleware/scaler';
+export { MiddlewareRuler, middlewareEventRuler } from './middleware/ruler';
 export class Core {
     constructor(container, opts) {
         const { devicePixelRatio = 1, width, height } = opts;
@@ -42,6 +43,8 @@ export class Core {
     }
     scale(opts) {
         this._board.scale(opts);
+        const viewer = this._board.getViewer();
+        viewer.drawFrame();
     }
     resize(newViewSize) {
         const { _board: board } = this;

package/dist/esm/middleware/ruler/index.d.ts

@@ -0,0 +1,3 @@
+import type { BoardMiddleware, CoreEvent } from '@idraw/types';
+export declare const middlewareEventRuler = "@middleware/show-ruler";
+export declare const MiddlewareRuler: BoardMiddleware<Record<string, any>, CoreEvent>;

package/dist/esm/middleware/ruler/index.js

@@ -0,0 +1,36 @@
+import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
+import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawUnderGrid } from './util';
+export const middlewareEventRuler = '@middleware/show-ruler';
+export const MiddlewareRuler = (opts) => {
+    const key = 'RULE';
+    const { viewContent, viewer, eventHub } = opts;
+    const { helperContext, underContext } = viewContent;
+    let showRuler = true;
+    eventHub.on(middlewareEventRuler, (e) => {
+        if (typeof (e === null || e === void 0 ? void 0 : e.show) === 'boolean') {
+            showRuler = e.show;
+            viewer.drawFrame();
+        }
+    });
+    return {
+        mode: key,
+        isDefault: true,
+        beforeDrawFrame: ({ snapshot }) => {
+            if (showRuler === true) {
+                const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
+                const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
+                drawRulerBackground(helperContext, { viewScaleInfo, viewSizeInfo });
+                const xList = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
+                drawXRuler(helperContext, { scaleList: xList });
+                const yList = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
+                drawYRuler(helperContext, { scaleList: yList });
+                drawUnderGrid(underContext, {
+                    xList,
+                    yList,
+                    viewScaleInfo,
+                    viewSizeInfo
+                });
+            }
+        }
+    };
+};

package/dist/esm/middleware/ruler/util.d.ts

@@ -0,0 +1,33 @@
+import type { ViewScaleInfo, ViewSizeInfo, ViewContext2D } from '@idraw/types';
+interface RulerScale {
+    num: number;
+    showNum: boolean;
+    position: number;
+    isKeyNum: boolean;
+    isSubKeyNum: boolean;
+}
+export declare function calcXRulerScaleList(opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): RulerScale[];
+export declare function calcYRulerScaleList(opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): RulerScale[];
+export declare function drawXRuler(ctx: ViewContext2D, opts: {
+    scaleList: RulerScale[];
+}): void;
+export declare function drawYRuler(ctx: ViewContext2D, opts: {
+    scaleList: RulerScale[];
+}): void;
+export declare function drawRulerBackground(ctx: ViewContext2D, opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): void;
+export declare function drawUnderGrid(ctx: ViewContext2D, opts: {
+    xList: RulerScale[];
+    yList: RulerScale[];
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): void;
+export {};

package/dist/esm/middleware/ruler/util.js

@@ -0,0 +1,179 @@
+import { formatNumber, rotateByCenter } from '@idraw/util';
+const rulerSize = 16;
+const background = '#FFFFFFA8';
+const borderColor = '#00000080';
+const scaleColor = '#000000';
+const textColor = '#00000080';
+const fontFamily = 'monospace';
+const fontSize = 10;
+const fontWeight = 100;
+const gridColor = '#AAAAAA30';
+const gridKeyColor = '#AAAAAA70';
+function calcRulerScaleList(opts) {
+    const { scale, viewLength, viewOffset } = opts;
+    const list = [];
+    let rulerUnit = 10;
+    rulerUnit = formatNumber(rulerUnit / scale, { decimalPlaces: 0 });
+    rulerUnit = Math.max(1, Math.min(rulerUnit, 1000));
+    const rulerKeyUnit = rulerUnit * 10;
+    const rulerSubKeyUnit = rulerUnit * 5;
+    let index = 0;
+    const viewUnit = rulerUnit * scale;
+    const startNum = 0 - viewOffset;
+    const startPosition = 0;
+    const remainderNum = startNum % viewUnit;
+    const firstNum = (startNum - remainderNum + viewUnit) / scale;
+    const firstPosition = startPosition + (viewUnit - remainderNum);
+    while (firstPosition + index * viewUnit < viewLength) {
+        const num = formatNumber(firstNum + index * rulerUnit, { decimalPlaces: 0 });
+        const position = formatNumber(firstPosition + index * viewUnit, { decimalPlaces: 0 });
+        const rulerScale = {
+            num,
+            position,
+            showNum: num % rulerKeyUnit === 0,
+            isKeyNum: num % rulerKeyUnit === 0,
+            isSubKeyNum: num % rulerSubKeyUnit === 0
+        };
+        list.push(rulerScale);
+        index++;
+    }
+    return list;
+}
+export function calcXRulerScaleList(opts) {
+    const { viewScaleInfo, viewSizeInfo } = opts;
+    const { scale, offsetLeft } = viewScaleInfo;
+    const { width } = viewSizeInfo;
+    return calcRulerScaleList({
+        axis: 'X',
+        scale,
+        viewLength: width,
+        viewOffset: offsetLeft
+    });
+}
+export function calcYRulerScaleList(opts) {
+    const { viewScaleInfo, viewSizeInfo } = opts;
+    const { scale, offsetTop } = viewScaleInfo;
+    const { height } = viewSizeInfo;
+    return calcRulerScaleList({
+        axis: 'Y',
+        scale,
+        viewLength: height,
+        viewOffset: offsetTop
+    });
+}
+export function drawXRuler(ctx, opts) {
+    const { scaleList } = opts;
+    const scaleDrawStart = rulerSize;
+    const scaleDrawEnd = (rulerSize * 4) / 5;
+    const subKeyScaleDrawEnd = (rulerSize * 2) / 5;
+    const keyScaleDrawEnd = (rulerSize * 1) / 5;
+    const fontStart = rulerSize / 5;
+    for (let i = 0; i < scaleList.length; i++) {
+        const item = scaleList[i];
+        if (item.position < rulerSize) {
+            continue;
+        }
+        ctx.beginPath();
+        ctx.moveTo(item.position, scaleDrawStart);
+        ctx.lineTo(item.position, item.isKeyNum ? keyScaleDrawEnd : item.isSubKeyNum ? subKeyScaleDrawEnd : scaleDrawEnd);
+        ctx.closePath();
+        ctx.fillStyle = scaleColor;
+        ctx.stroke();
+        if (item.isKeyNum) {
+            ctx.fillStyle = textColor;
+            ctx.textBaseline = 'top';
+            ctx.$setFont({
+                fontWeight,
+                fontSize,
+                fontFamily
+            });
+            ctx.fillText(`${item.num}`, item.position + fontStart, fontStart);
+        }
+    }
+}
+export function drawYRuler(ctx, opts) {
+    const { scaleList } = opts;
+    const scaleDrawStart = rulerSize;
+    const scaleDrawEnd = (rulerSize * 4) / 5;
+    const subKeyScaleDrawEnd = (rulerSize * 2) / 5;
+    const keyScaleDrawEnd = (rulerSize * 1) / 5;
+    const fontStart = rulerSize / 5;
+    for (let i = 0; i < scaleList.length; i++) {
+        const item = scaleList[i];
+        if (item.position < rulerSize) {
+            continue;
+        }
+        ctx.beginPath();
+        ctx.moveTo(scaleDrawStart, item.position);
+        ctx.lineTo(item.isKeyNum ? keyScaleDrawEnd : item.isSubKeyNum ? subKeyScaleDrawEnd : scaleDrawEnd, item.position);
+        ctx.closePath();
+        ctx.fillStyle = scaleColor;
+        ctx.stroke();
+        if (item.showNum === true) {
+            const textX = fontStart;
+            const textY = item.position + fontStart;
+            const numText = `${item.num}`;
+            rotateByCenter(ctx, -90, { x: textX, y: textY }, () => {
+                ctx.fillStyle = textColor;
+                ctx.textBaseline = 'top';
+                ctx.$setFont({
+                    fontWeight,
+                    fontSize,
+                    fontFamily
+                });
+                ctx.fillText(numText, fontStart + fontSize, item.position + fontStart);
+            });
+        }
+    }
+}
+export function drawRulerBackground(ctx, opts) {
+    const { viewSizeInfo } = opts;
+    const { width, height } = viewSizeInfo;
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(width + 1, 0);
+    ctx.lineTo(width + 1, rulerSize);
+    ctx.lineTo(rulerSize, rulerSize);
+    ctx.lineTo(rulerSize, height + 1);
+    ctx.lineTo(0, height + 1);
+    ctx.lineTo(0, 0);
+    ctx.closePath();
+    ctx.fillStyle = background;
+    ctx.fill();
+    ctx.strokeStyle = borderColor;
+    ctx.stroke();
+}
+export function drawUnderGrid(ctx, opts) {
+    const { xList, yList, viewSizeInfo } = opts;
+    const { width, height } = viewSizeInfo;
+    for (let i = 0; i < xList.length; i++) {
+        const item = xList[i];
+        ctx.beginPath();
+        ctx.moveTo(item.position, 0);
+        ctx.lineTo(item.position, height);
+        if (item.isKeyNum === true || item.isSubKeyNum === true) {
+            ctx.strokeStyle = gridKeyColor;
+        }
+        else {
+            ctx.strokeStyle = gridColor;
+        }
+        ctx.lineWidth = 1;
+        ctx.closePath();
+        ctx.stroke();
+    }
+    for (let i = 0; i < yList.length; i++) {
+        const item = yList[i];
+        ctx.beginPath();
+        ctx.moveTo(0, item.position);
+        ctx.lineTo(width, item.position);
+        if (item.isKeyNum === true || item.isSubKeyNum === true) {
+            ctx.strokeStyle = gridKeyColor;
+        }
+        else {
+            ctx.strokeStyle = gridColor;
+        }
+        ctx.lineWidth = 1;
+        ctx.closePath();
+        ctx.stroke();
+    }
+}

package/dist/esm/middleware/scaler/index.d.ts

@@ -1,2 +1,3 @@
-import type { BoardMiddleware } from '@idraw/types';
-export declare const MiddlewareScaler: BoardMiddleware;
+import type { BoardMiddleware, CoreEvent } from '@idraw/types';
+export declare const middlewareEventScale = "@middleware/scale";
+export declare const MiddlewareScaler: BoardMiddleware<Record<string, any>, CoreEvent>;

package/dist/esm/middleware/scaler/index.js

@@ -1,6 +1,8 @@
+import { formatNumber } from '@idraw/util';
+export const middlewareEventScale = '@middleware/scale';
 export const MiddlewareScaler = (opts) => {
     const key = 'SCALE';
-    const { viewer, sharer } = opts;
+    const { viewer, sharer, eventHub } = opts;
     return {
         mode: key,
         isDefault: true,
@@ -17,6 +19,8 @@ export const MiddlewareScaler = (opts) => {
             const { moveX, moveY } = viewer.scale({ scale: newScaleNum, point });
             viewer.scroll({ moveX, moveY });
             viewer.drawFrame();
+            const scaleNum = formatNumber(scale);
+            eventHub.trigger(middlewareEventScale, { scale: scaleNum });
         }
     };
 };

package/dist/esm/middleware/scroller/util.js

@@ -2,12 +2,12 @@ import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idra
 import { keyActivePoint, keyActiveThumbType, keyPrevPoint, keyXThumbRect, keyYThumbRect } from './config';
 const minScrollerWidth = 12;
 const scrollerLineWidth = 16;
-const scrollerAlpha = 0.12;
 const scrollerThumbAlpha = 0.36;
 const scrollConfig = {
     width: minScrollerWidth,
-    color: '#000000',
-    showBackground: true
+    thumbColor: '#000000AA',
+    scrollBarColor: '#FFFFFF60',
+    showScrollBar: false
 };
 function isPointAtRect(helperContext, p, rect) {
     const ctx = helperContext;
@@ -57,7 +57,7 @@ function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
     if (ySize >= height) {
         ySize = height;
     }
-    const xStart = lineSize / 2;
+    const xStart = lineSize;
     const xEnd = width - xSize - lineSize;
     let translateX = xStart;
     if (offsetLeft > 0) {
@@ -67,10 +67,10 @@ function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
         translateX = xEnd;
     }
     else if (offsetLeft <= 0 && xSize > 0 && !(offsetLeft === 0 && offsetRight === 0)) {
-        translateX = xSize / 2 + ((width - xSize) * Math.abs(offsetLeft)) / (Math.abs(offsetLeft) + Math.abs(offsetRight));
-        translateX = Math.min(Math.max(0, translateX - xSize / 2), width - xSize);
+        translateX = xStart + ((width - xSize) * Math.abs(offsetLeft)) / (Math.abs(offsetLeft) + Math.abs(offsetRight));
+        translateX = Math.min(Math.max(0, translateX - xStart), width - xSize);
     }
-    const yStart = lineSize / 2;
+    const yStart = lineSize;
     const yEnd = height - ySize - lineSize;
     let translateY = yStart;
     if (offsetTop > 0) {
@@ -80,8 +80,8 @@ function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
         translateY = yEnd;
     }
     else if (offsetTop <= 0 && ySize > 0 && !(offsetTop === 0 && offsetBottom === 0)) {
-        translateY = ySize / 2 + ((height - ySize) * Math.abs(offsetTop)) / (Math.abs(offsetTop) + Math.abs(offsetBottom));
-        translateY = Math.min(Math.max(0, translateY - ySize / 2), height - ySize);
+        translateY = yStart + ((height - ySize) * Math.abs(offsetTop)) / (Math.abs(offsetTop) + Math.abs(offsetBottom));
+        translateY = Math.min(Math.max(0, translateY - yStart), height - ySize);
     }
     const xThumbRect = {
         x: translateX,
@@ -101,7 +101,8 @@ function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
         ySize,
         translateY,
         translateX,
-        color: '#0000007A',
+        thumbColor: scrollConfig.thumbColor,
+        scrollBarColor: scrollConfig.scrollBarColor,
         xThumbRect,
         yThumbRect
     };
@@ -109,42 +110,50 @@ function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
 }
 function drawScrollerThumb(ctx, opts) {
     let { x, y, h, w } = opts;
-    const { color, axis } = opts;
-    if (axis === 'X') {
-        y = y + h / 4 + 0;
-        h = h / 2;
-    }
-    else if (axis === 'Y') {
-        x = x + w / 4 + 0;
-        w = w / 2;
-    }
-    let r = opts.r;
-    r = Math.min(r, w / 2, h / 2);
-    if (w < r * 2 || h < r * 2) {
-        r = 0;
-    }
-    ctx.globalAlpha = scrollerThumbAlpha;
-    ctx.beginPath();
-    ctx.moveTo(x + r, y);
-    ctx.arcTo(x + w, y, x + w, y + h, r);
-    ctx.arcTo(x + w, y + h, x, y + h, r);
-    ctx.arcTo(x, y + h, x, y, r);
-    ctx.arcTo(x, y, x + w, y, r);
-    ctx.closePath();
-    ctx.fillStyle = color;
-    ctx.fill();
-    ctx.globalAlpha = 1;
-    ctx.beginPath();
-    ctx.lineWidth = 1;
-    ctx.strokeStyle = color;
-    ctx.setLineDash([]);
-    ctx.moveTo(x + r, y);
-    ctx.arcTo(x + w, y, x + w, y + h, r);
-    ctx.arcTo(x + w, y + h, x, y + h, r);
-    ctx.arcTo(x, y + h, x, y, r);
-    ctx.arcTo(x, y, x + w, y, r);
-    ctx.closePath();
-    ctx.stroke();
+    ctx.save();
+    ctx.shadowColor = '#FFFFFF';
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+    ctx.shadowBlur = 1;
+    {
+        const { color, axis } = opts;
+        if (axis === 'X') {
+            y = y + h / 4 + 0;
+            h = h / 2;
+        }
+        else if (axis === 'Y') {
+            x = x + w / 4 + 0;
+            w = w / 2;
+        }
+        let r = opts.r;
+        r = Math.min(r, w / 2, h / 2);
+        if (w < r * 2 || h < r * 2) {
+            r = 0;
+        }
+        ctx.globalAlpha = scrollerThumbAlpha;
+        ctx.beginPath();
+        ctx.moveTo(x + r, y);
+        ctx.arcTo(x + w, y, x + w, y + h, r);
+        ctx.arcTo(x + w, y + h, x, y + h, r);
+        ctx.arcTo(x, y + h, x, y, r);
+        ctx.arcTo(x, y, x + w, y, r);
+        ctx.closePath();
+        ctx.fillStyle = color;
+        ctx.fill();
+        ctx.globalAlpha = 1;
+        ctx.beginPath();
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = color;
+        ctx.setLineDash([]);
+        ctx.moveTo(x + r, y);
+        ctx.arcTo(x + w, y, x + w, y + h, r);
+        ctx.arcTo(x + w, y + h, x, y + h, r);
+        ctx.arcTo(x, y + h, x, y, r);
+        ctx.arcTo(x, y, x + w, y, r);
+        ctx.closePath();
+        ctx.stroke();
+    }
+    ctx.restore();
 }
 function drawScrollerInfo(helperContext, opts) {
     const ctx = helperContext;
@@ -164,18 +173,16 @@ function drawScrollerInfo(helperContext, opts) {
             yThumbRect.y = yThumbRect.y + (activePoint.y - prevPoint.y);
         }
     }
-    if (scrollConfig.showBackground === true) {
-        ctx.globalAlpha = scrollerAlpha;
-        ctx.fillStyle = wrapper.color;
+    if (scrollConfig.showScrollBar === true) {
+        ctx.fillStyle = wrapper.scrollBarColor;
         ctx.fillRect(0, height - wrapper.lineSize, width, wrapper.lineSize);
     }
-    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'X' }, xThumbRect), { r: wrapper.lineSize / 2, color: wrapper.color }));
-    if (scrollConfig.showBackground === true) {
-        ctx.globalAlpha = scrollerAlpha;
-        ctx.fillStyle = wrapper.color;
+    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'X' }, xThumbRect), { r: wrapper.lineSize / 2, color: wrapper.thumbColor }));
+    if (scrollConfig.showScrollBar === true) {
+        ctx.fillStyle = wrapper.scrollBarColor;
         ctx.fillRect(width - wrapper.lineSize, 0, wrapper.lineSize, height);
     }
-    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'Y' }, yThumbRect), { r: wrapper.lineSize / 2, color: wrapper.color }));
+    drawScrollerThumb(ctx, Object.assign(Object.assign({ axis: 'Y' }, yThumbRect), { r: wrapper.lineSize / 2, color: wrapper.thumbColor }));
     ctx.globalAlpha = 1;
     return {
         xThumbRect,

package/dist/esm/middleware/selector/draw-wrapper.js

@@ -32,10 +32,6 @@ export function drawSelectedElementControllersVertexes(ctx, controller, opts) {
     const wrapperOpts = { borderColor: wrapperColor, borderWidth: 1, background: 'transparent', lineDash: [] };
     const ctrlOpts = Object.assign(Object.assign({}, wrapperOpts), { borderWidth: resizeControllerBorderWidth, background: '#FFFFFF' });
     drawVertexes(ctx, calcViewVertexes(elementWrapper, opts), wrapperOpts);
-    drawVertexes(ctx, calcViewVertexes(left.vertexes, opts), ctrlOpts);
-    drawVertexes(ctx, calcViewVertexes(right.vertexes, opts), ctrlOpts);
-    drawVertexes(ctx, calcViewVertexes(top.vertexes, opts), ctrlOpts);
-    drawVertexes(ctx, calcViewVertexes(bottom.vertexes, opts), ctrlOpts);
     drawVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
     drawVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
     drawVertexes(ctx, calcViewVertexes(bottomLeft.vertexes, opts), ctrlOpts);

package/dist/esm/middleware/selector/index.d.ts

@@ -1,3 +1,4 @@
 import type { CoreEvent } from '@idraw/types';
 import type { BoardMiddleware, DeepSelectorSharedStorage } from './types';
+export declare const middlewareEventSelect: string;
 export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEvent>;

package/dist/esm/middleware/selector/index.js

@@ -2,12 +2,13 @@ import { calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVerte
 import { drawHoverVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
 import { getPointTarget, resizeElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup, calcMoveInGroup } from './util';
 import { key, keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController } from './config';
+export const middlewareEventSelect = '@middleware/select';
 export const MiddlewareSelector = (opts) => {
     const { viewer, sharer, viewContent, calculator, eventHub } = opts;
     const { helperContext } = viewContent;
     let prevPoint = null;
     let inBusyMode = null;
-    eventHub.on('select', ({ uuids }) => {
+    eventHub.on(middlewareEventSelect, ({ uuids }) => {
         const actionType = sharer.getSharedStorage(keyActionType);
         const data = sharer.getActiveStorage('data');
         const elements = findElementsFromList(uuids, (data === null || data === void 0 ? void 0 : data.elements) || []);
@@ -76,7 +77,7 @@ export const MiddlewareSelector = (opts) => {
             sharer.setSharedStorage(keySelectedElementController, null);
         }
         if ((opts === null || opts === void 0 ? void 0 : opts.triggerEvent) === true) {
-            eventHub.trigger('select', { uuids: list.map((elem) => elem.uuid) });
+            eventHub.trigger(middlewareEventSelect, { uuids: list.map((elem) => elem.uuid) });
         }
     };
     const pointTargetBaseOptions = () => {