@idraw/core - npm Package Compare versions

Comparing version 0.4.0-alpha.3 to 0.4.0-alpha.4

dist/esm/index.d.ts

 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 {
@@ -6,0 +7,0 @@ private _board;

dist/esm/index.js

 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 {
@@ -45,2 +46,4 @@ constructor(container, opts) {
         this._board.scale(opts);
+        const viewer = this._board.getViewer();
+        viewer.drawFrame();
     }
@@ -47,0 +50,0 @@ resize(newViewSize) {

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

@@ -1,2 +0,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>;

dist/esm/middleware/scaler/index.js

@@ -0,4 +1,6 @@
+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 {
@@ -20,4 +22,6 @@ mode: key,
             viewer.drawFrame();
+            const scaleNum = formatNumber(scale);
+            eventHub.trigger(middlewareEventScale, { scale: scaleNum });
         }
     };
 };

dist/esm/middleware/scroller/util.js

@@ -5,8 +5,8 @@ import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
 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
 };
@@ -61,3 +61,3 @@ function isPointAtRect(helperContext, p, rect) {
     }
-    const xStart = lineSize / 2;
+    const xStart = lineSize;
     const xEnd = width - xSize - lineSize;
@@ -72,6 +72,6 @@ let translateX = xStart;
     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;
@@ -86,4 +86,4 @@ let translateY = yStart;
     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);
     }
@@ -108,3 +108,4 @@ const xThumbRect = {
         translateX,
-        color: '#0000007A',
+        thumbColor: scrollConfig.thumbColor,
+        scrollBarColor: scrollConfig.scrollBarColor,
         xThumbRect,
@@ -117,38 +118,46 @@ yThumbRect
     let { x, y, h, w } = opts;
-    const { color, axis } = opts;
-    if (axis === 'X') {
-        y = y + h / 4 + 0;
-        h = h / 2;
+    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();
     }
-    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();
 }
@@ -173,14 +182,12 @@ function drawScrollerInfo(helperContext, opts) {
     }
-    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;
@@ -187,0 +194,0 @@ return {

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

@@ -35,6 +35,2 @@ import { rotateElementVertexes, calcViewVertexes } from '@idraw/util';
     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);
@@ -41,0 +37,0 @@ drawVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);

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

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

dist/esm/middleware/selector/index.js

@@ -5,2 +5,3 @@ import { calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, rotatePointInGroup, getGroupQueueFromList, findElementsFromList } from '@idraw/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) => {
@@ -11,3 +12,3 @@ const { viewer, sharer, viewContent, calculator, eventHub } = opts;
     let inBusyMode = null;
-    eventHub.on('select', ({ uuids }) => {
+    eventHub.on(middlewareEventSelect, ({ uuids }) => {
         const actionType = sharer.getSharedStorage(keyActionType);
@@ -81,3 +82,3 @@ const data = sharer.getActiveStorage('data');
         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) });
         }
@@ -84,0 +85,0 @@ };

package.json

 {
   "name": "@idraw/core",
-  "version": "0.4.0-alpha.3",
+  "version": "0.4.0-alpha.4",
   "description": "",
@@ -24,8 +24,9 @@ "main": "dist/esm/index.js",
   "devDependencies": {
-    "@idraw/types": "^0.4.0-alpha.0"
+    "@idraw/types": "^0.4.0-alpha.4"
   },
-  "dependencies": {
-    "@idraw/board": "^0.4.0-alpha.3",
-    "@idraw/renderer": "^0.4.0-alpha.3",
-    "@idraw/util": "^0.4.0-alpha.3"
+  "dependencies": {},
+  "peerDependencies": {
+    "@idraw/board": "^0.4.0-alpha.4",
+    "@idraw/renderer": "^0.4.0-alpha.4",
+    "@idraw/util": "^0.4.0-alpha.4"
   },
@@ -36,2 +37,2 @@ "publishConfig": {
   }
-}
+}

No alert changes

Improved metrics

Total package byte prevSize

416185

increased by10.16%

Number of package files

32

increased by14.29%

Lines of code

7445

increased by11.55%

Dependency changes

• - Removed@idraw/board@^0.4.0-alpha.3

• - Removed@idraw/renderer@^0.4.0-alpha.3

• - Removed@idraw/util@^0.4.0-alpha.3