@idraw/core 0.4.0-alpha.3 → 0.4.0-alpha.5

package/dist/esm/index.d.ts

@@ -1,12 +1,11 @@
 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 { MiddlewareTextEditor, middlewareEventTextEdit } from './middleware/text-editor';
 export declare class Core {
-    private _board;
-    private _opts;
-    private _container;
-    private _canvas;
+    #private;
     constructor(container: HTMLDivElement, opts: CoreOptions);
     use(middleware: BoardMiddleware<any, any>): void;
     setData(data: Data): void;

package/dist/esm/index.js

@@ -1,20 +1,36 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Core_instances, _Core_board, _Core_container, _Core_initContainer;
 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 { MiddlewareTextEditor, middlewareEventTextEdit } from './middleware/text-editor';
 export class Core {
     constructor(container, opts) {
+        _Core_instances.add(this);
+        _Core_board.set(this, void 0);
+        _Core_container.set(this, void 0);
         const { devicePixelRatio = 1, width, height } = opts;
-        this._opts = opts;
-        this._container = container;
+        __classPrivateFieldSet(this, _Core_container, container, "f");
         const canvas = document.createElement('canvas');
-        this._canvas = canvas;
+        __classPrivateFieldGet(this, _Core_instances, "m", _Core_initContainer).call(this);
         container.appendChild(canvas);
         const ctx = canvas.getContext('2d');
         const viewContent = createBoardContexts(ctx, { devicePixelRatio });
-        const board = new Board({ viewContent });
+        const board = new Board({ viewContent, container });
         const sharer = board.getSharer();
         sharer.setActiveViewSizeInfo({
             width,
@@ -23,7 +39,7 @@ export class Core {
             contextWidth: width,
             contextHeight: height
         });
-        this._board = board;
+        __classPrivateFieldSet(this, _Core_board, board, "f");
         this.resize(sharer.getActiveViewSizeInfo());
         const eventHub = board.getEventHub();
         new Cursor(container, {
@@ -31,37 +47,43 @@ export class Core {
         });
     }
     use(middleware) {
-        this._board.use(middleware);
+        __classPrivateFieldGet(this, _Core_board, "f").use(middleware);
     }
     setData(data) {
         validateElements((data === null || data === void 0 ? void 0 : data.elements) || []);
-        this._board.setData(data);
+        __classPrivateFieldGet(this, _Core_board, "f").setData(data);
     }
     getData() {
-        return this._board.getData();
+        return __classPrivateFieldGet(this, _Core_board, "f").getData();
     }
     scale(opts) {
-        this._board.scale(opts);
+        __classPrivateFieldGet(this, _Core_board, "f").scale(opts);
+        const viewer = __classPrivateFieldGet(this, _Core_board, "f").getViewer();
+        viewer.drawFrame();
     }
     resize(newViewSize) {
-        const { _board: board } = this;
+        const board = __classPrivateFieldGet(this, _Core_board, "f");
         const sharer = board.getSharer();
         const viewSizeInfo = sharer.getActiveViewSizeInfo();
         board.resize(Object.assign(Object.assign({}, viewSizeInfo), newViewSize));
     }
     clear() {
-        this._board.clear();
+        __classPrivateFieldGet(this, _Core_board, "f").clear();
     }
     on(name, callback) {
-        const eventHub = this._board.getEventHub();
+        const eventHub = __classPrivateFieldGet(this, _Core_board, "f").getEventHub();
         eventHub.on(name, callback);
     }
     off(name, callback) {
-        const eventHub = this._board.getEventHub();
+        const eventHub = __classPrivateFieldGet(this, _Core_board, "f").getEventHub();
         eventHub.off(name, callback);
     }
     trigger(name, e) {
-        const eventHub = this._board.getEventHub();
+        const eventHub = __classPrivateFieldGet(this, _Core_board, "f").getEventHub();
         eventHub.trigger(name, e);
     }
 }
+_Core_board = new WeakMap(), _Core_container = new WeakMap(), _Core_instances = new WeakSet(), _Core_initContainer = function _Core_initContainer() {
+    const container = __classPrivateFieldGet(this, _Core_container, "f");
+    container.style.position = 'relative';
+};

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,44 @@
+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 show = true;
+    let showGrid = true;
+    eventHub.on(middlewareEventRuler, (e) => {
+        if (typeof (e === null || e === void 0 ? void 0 : e.show) === 'boolean') {
+            show = e.show;
+        }
+        if (typeof (e === null || e === void 0 ? void 0 : e.showGrid) === 'boolean') {
+            showGrid = e.showGrid;
+        }
+        if (typeof (e === null || e === void 0 ? void 0 : e.show) === 'boolean' || typeof (e === null || e === void 0 ? void 0 : e.showGrid) === 'boolean') {
+            viewer.drawFrame();
+        }
+    });
+    return {
+        mode: key,
+        isDefault: true,
+        beforeDrawFrame: ({ snapshot }) => {
+            if (show === 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 });
+                if (showGrid === true) {
+                    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,187 @@
+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';
+const lineSize = 1;
+function calcRulerScaleList(opts) {
+    const { scale, viewLength, viewOffset } = opts;
+    const list = [];
+    let rulerUnit = 10;
+    rulerUnit = formatNumber(rulerUnit / scale, { decimalPlaces: 0 });
+    rulerUnit = Math.max(10, 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.lineWidth = lineSize;
+        ctx.setLineDash([]);
+        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.lineWidth = lineSize;
+        ctx.setLineDash([]);
+        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.lineWidth = lineSize;
+    ctx.setLineDash([]);
+    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.closePath();
+        ctx.lineWidth = lineSize;
+        ctx.setLineDash([]);
+        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,10 @@
+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;
+    const maxScale = 50;
+    const minScale = 0.05;
     return {
         mode: key,
         isDefault: true,
@@ -14,9 +18,14 @@ export const MiddlewareScaler = (opts) => {
             else if (deltaY > 0) {
                 newScaleNum = scale * 0.9;
             }
+            if (newScaleNum < minScale || newScaleNum > maxScale) {
+                return;
+            }
             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;
@@ -49,15 +49,15 @@ function calcScrollerInfo(viewScaleInfo, viewSizeInfo) {
     const lineSize = scrollerLineWidth;
     let xSize = 0;
     let ySize = 0;
-    xSize = Math.max(sliderMinSize, width - (Math.abs(offsetLeft) + Math.abs(offsetRight)));
+    xSize = Math.max(sliderMinSize, width - lineSize * 2 - (Math.abs(offsetLeft) + Math.abs(offsetRight)));
     if (xSize >= width) {
         xSize = width;
     }
-    ySize = Math.max(sliderMinSize, height - (Math.abs(offsetTop) + Math.abs(offsetBottom)));
+    ySize = Math.max(sliderMinSize, height - lineSize * 2 - (Math.abs(offsetTop) + Math.abs(offsetBottom)));
     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>;