@idraw/core - npm Package Compare versions

Comparing version 0.4.0-beta.35 to 0.4.0-beta.36

dist/esm/middleware/info/config.d.ts

 import type { MiddlewareInfoStyle } from '@idraw/types';
 export declare const infoFontSize = 10;
 export declare const infoLineHeight = 16;
+export declare const MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE = "@middleware/internal-event/show-info-angle";
 export declare const defaltStyle: MiddlewareInfoStyle;

dist/esm/middleware/info/config.js

@@ -5,2 +5,3 @@ const infoBackground = '#1973bac6';
 export const infoLineHeight = 16;
+export const MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE = '@middleware/internal-event/show-info-angle';
 export const defaltStyle = {
@@ -7,0 +8,0 @@ textBackground: infoBackground,

dist/esm/middleware/info/draw-info.d.ts

 import type { PointSize, ViewContext2D } from '@idraw/types';
-import type { MiddlewareInfoStyle } from './types';
+import type { MiddlewareInfoStyle } from '@idraw/types';
 export declare function drawSizeInfoText(ctx: ViewContext2D, opts: {
@@ -4,0 +4,0 @@ point: PointSize;

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

 import type { BoardMiddleware, MiddlewareInfoConfig, CoreEventMap } from '@idraw/types';
 import type { DeepInfoSharedStorage } from './types';
-export declare const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage, CoreEventMap, MiddlewareInfoConfig>;
+import { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE } from './config';
+export { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE };
+export declare const MiddlewareInfo: BoardMiddleware<DeepInfoSharedStorage, CoreEventMap & {
+    [MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE]: {
+        show: boolean;
+    };
+}, MiddlewareInfoConfig>;

dist/esm/middleware/info/index.js

 import { formatNumber, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot, createUUID, limitAngle, rotatePoint, parseAngleToRadian } from '@idraw/util';
 import { keySelectedElementList, keyActionType, keyGroupQueue } from '../selector';
 import { drawSizeInfoText, drawPositionInfoText, drawAngleInfoText } from './draw-info';
-import { defaltStyle } from './config';
+import { defaltStyle, MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE } from './config';
+export { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE };
 const infoFontSize = 10;
 const infoLineHeight = 16;
 export const MiddlewareInfo = (opts, config) => {
-    const { boardContent, calculator } = opts;
+    const { boardContent, calculator, eventHub } = opts;
     const { overlayContext } = boardContent;
@@ -16,4 +17,14 @@ const innerConfig = Object.assign(Object.assign({}, defaltStyle), config);
     };
+    let showAngleInfo = true;
+    const showInfoAngleCallback = ({ show }) => {
+        showAngleInfo = show;
+    };
     return {
         name: '@middleware/info',
+        use() {
+            eventHub.on(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, showInfoAngleCallback);
+        },
+        disuse() {
+            eventHub.off(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, showInfoAngleCallback);
+        },
         beforeDrawFrame({ snapshot }) {
@@ -96,14 +107,16 @@ const { sharedStore } = snapshot;
                         });
-                        drawAngleInfoText(overlayContext, {
-                            point: {
-                                x: rectInfo.top.x + infoFontSize,
-                                y: rectInfo.top.y - infoFontSize * 2
-                            },
-                            rotateCenter: rectInfo.center,
-                            angle: totalAngle,
-                            text: angleText,
-                            fontSize: infoFontSize,
-                            lineHeight: infoLineHeight,
-                            style
-                        });
+                        if (showAngleInfo) {
+                            drawAngleInfoText(overlayContext, {
+                                point: {
+                                    x: rectInfo.top.x + infoFontSize + 4,
+                                    y: rectInfo.top.y - infoFontSize * 2 - 18
+                                },
+                                rotateCenter: rectInfo.center,
+                                angle: totalAngle,
+                                text: angleText,
+                                fontSize: infoFontSize,
+                                lineHeight: infoLineHeight,
+                                style
+                            });
+                        }
                     }
@@ -110,0 +123,0 @@ }

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

@@ -28,2 +28,4 @@ import type { MiddlewareSelectorStyle } from '@idraw/types';
 export declare const controllerSize = 10;
+export declare const rotateControllerSize = 20;
+export declare const rotateControllerPosition = 22;
 export declare const defaultStyle: MiddlewareSelectorStyle;

dist/esm/middleware/selector/config.js

@@ -27,2 +27,4 @@ export const key = 'SELECT';
 export const controllerSize = 10;
+export const rotateControllerSize = 20;
+export const rotateControllerPosition = 22;
 const activeColor = '#1973ba';
@@ -29,0 +31,0 @@ const activeAreaColor = '#1976d21c';

dist/esm/middleware/selector/draw-wrapper.d.ts

@@ -21,2 +21,3 @@ import type { Element, ElementType, PointSize, RendererDrawElementOptions, ViewContext2D, ViewRectVertexes, ViewScaleInfo, ViewSizeInfo, ElementSizeController, ViewCalculator, MiddlewareSelectorStyle } from '@idraw/types';
     style: MiddlewareSelectorStyle;
+    rotateControllerPattern: ViewContext2D;
 }): void;
@@ -23,0 +24,0 @@ export declare function drawElementListShadows(ctx: ViewContext2D, elements: Element<ElementType>[], opts?: Omit<RendererDrawElementOptions, 'loader'>): void;

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

 import { rotateElementVertexes, calcViewPointSize, calcViewVertexes, calcViewElementSize } from '@idraw/util';
-import { resizeControllerBorderWidth, areaBorderWidth, selectWrapperBorderWidth, controllerSize } from './config';
-import { drawVertexes, drawLine, drawCircleController, drawCrossVertexes } from './draw-base';
+import { resizeControllerBorderWidth, areaBorderWidth, selectWrapperBorderWidth } from './config';
+import { drawVertexes, drawCircleController, drawCrossVertexes } from './draw-base';
 export function drawHoverVertexesWrapper(ctx, vertexes, opts) {
@@ -39,5 +39,6 @@ if (!vertexes) {
     }
-    const { hideControllers, style } = opts;
+    const { hideControllers, style, rotateControllerPattern, viewSizeInfo } = opts;
+    const { devicePixelRatio = 1 } = viewSizeInfo;
     const { activeColor } = style;
-    const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, top, rotate } = controller;
+    const { elementWrapper, topLeft, topRight, bottomLeft, bottomRight, rotate } = controller;
     const wrapperOpts = { borderColor: activeColor, borderWidth: selectWrapperBorderWidth, background: 'transparent', lineDash: [] };
@@ -47,3 +48,2 @@ const ctrlOpts = Object.assign(Object.assign({}, wrapperOpts), { borderWidth: resizeControllerBorderWidth, background: '#FFFFFF' });
     if (!hideControllers) {
-        drawLine(ctx, calcViewPointSize(top.center, opts), calcViewPointSize(rotate.center, opts), Object.assign(Object.assign({}, ctrlOpts), { borderWidth: 2 }));
         drawVertexes(ctx, calcViewVertexes(topLeft.vertexes, opts), ctrlOpts);
@@ -53,3 +53,5 @@ drawVertexes(ctx, calcViewVertexes(topRight.vertexes, opts), ctrlOpts);
         drawVertexes(ctx, calcViewVertexes(bottomRight.vertexes, opts), ctrlOpts);
-        drawCircleController(ctx, calcViewPointSize(rotate.center, opts), Object.assign(Object.assign({}, ctrlOpts), { size: controllerSize, borderWidth: 2 }));
+        drawCircleController(ctx, calcViewPointSize(rotate.center, opts), Object.assign(Object.assign({}, ctrlOpts), { size: rotate.size, borderWidth: 0 }));
+        const rotateCenter = calcViewPointSize(rotate.center, opts);
+        ctx.drawImage(rotateControllerPattern.canvas, 0, 0, rotateControllerPattern.canvas.width / devicePixelRatio, rotateControllerPattern.canvas.height / devicePixelRatio, rotateCenter.x - rotate.size / 2, rotateCenter.y - rotate.size / 2, rotate.size, rotate.size);
     }
@@ -56,0 +58,0 @@ }

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

 import type { CoreEventMap, MiddlewareSelectorConfig } from '@idraw/types';
 import type { BoardMiddleware, ActionType, DeepSelectorSharedStorage } from './types';
 import { keyActionType, keyResizeType, keyGroupQueue, keyHoverElement, keySelectedElementList } from './config';
+import { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE } from '../info';
 export { keySelectedElementList, keyHoverElement, keyActionType, keyResizeType, keyGroupQueue };
 export type { DeepSelectorSharedStorage, ActionType };
-export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap, MiddlewareSelectorConfig>;
+export declare const MiddlewareSelector: BoardMiddleware<DeepSelectorSharedStorage, CoreEventMap & {
+    [MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE]: {
+        show: boolean;
+    };
+}, MiddlewareSelectorConfig>;

dist/esm/middleware/selector/index.js

@@ -5,6 +5,8 @@ import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, getElementPositionMapFromList, deepResizeGroupElement, getElementSize } from '@idraw/util';
 import { getPointTarget, resizeElement, rotateElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup, calcMoveInGroup } from './util';
-import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, controllerSize, defaultStyle } from './config';
+import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keyIsMoving, keyEnableSelectInGroup, keyEnableSnapToGrid, controllerSize, rotateControllerSize, rotateControllerPosition, defaultStyle } from './config';
 import { calcReferenceInfo } from './reference';
 import { coreEventKeys } from '../../config';
 import { keyLayoutIsSelected } from '../layout-selector';
+import { createRotateControllerPattern } from './pattern';
+import { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE } from '../info';
 export { keySelectedElementList, keyHoverElement, keyActionType, keyResizeType, keyGroupQueue };
@@ -22,2 +24,6 @@ export const MiddlewareSelector = (opts, config) => {
     let hasChangedData = null;
+    const rotateControllerPattern = createRotateControllerPattern({
+        fill: style.activeColor,
+        devicePixelRatio: sharer.getActiveViewSizeInfo().devicePixelRatio
+    });
     sharer.setSharedStorage(keyActionType, null);
@@ -59,5 +65,4 @@ sharer.setSharedStorage(keyEnableSnapToGrid, true);
     };
-    const updateSelectedElementList = (list, opts) => {
-        var _a;
-        sharer.setSharedStorage(keySelectedElementList, list);
+    const updateSelectedElemenetController = () => {
+        const list = sharer.getSharedStorage(keySelectedElementList);
         if (list.length === 1) {
@@ -67,5 +72,14 @@ const controller = calcElementSizeController(list[0], {
                 controllerSize,
-                viewScaleInfo: sharer.getActiveViewScaleInfo()
+                viewScaleInfo: sharer.getActiveViewScaleInfo(),
+                rotateControllerPosition,
+                rotateControllerSize
             });
             sharer.setSharedStorage(keySelectedElementController, controller);
+        }
+    };
+    const updateSelectedElementList = (list, opts) => {
+        var _a;
+        sharer.setSharedStorage(keySelectedElementList, list);
+        if (list.length === 1) {
+            updateSelectedElemenetController();
             sharer.setSharedStorage(keySelectedElementPosition, getElementPositionFromList(list[0].uuid, ((_a = sharer.getActiveStorage('data')) === null || _a === void 0 ? void 0 : _a.elements) || []));
@@ -352,2 +366,3 @@ }
                 inBusyMode = 'drag';
+                eventHub.trigger(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, { show: false });
                 if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && moveOriginalStartElementSize && originalStart && end && ((_b = (_a = elems[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.locked) !== true) {
@@ -516,2 +531,5 @@ const { moveX, moveY } = calcMoveInGroup(originalStart, end, groupQueue);
             moveOriginalStartElementSize = null;
+            if (actionType === 'drag') {
+                eventHub.trigger(MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, { show: true });
+            }
             if (actionType === 'resize' && resizeType) {
@@ -588,7 +606,7 @@ sharer.setSharedStorage(keyResizeType, null);
         pointLeave() {
-            prevPoint = null;
-            moveOriginalStartPoint = null;
-            moveOriginalStartElementSize = null;
-            clear();
-            viewer.drawFrame();
+            inBusyMode = null;
+            sharer.setSharedStorage(keyResizeType, null);
+            eventHub.trigger(coreEventKeys.CURSOR, {
+                type: 'default'
+            });
         },
@@ -624,2 +642,8 @@ doubleClick(e) {
         },
+        wheel() {
+            updateSelectedElemenetController();
+        },
+        wheelScale() {
+            updateSelectedElemenetController();
+        },
         contextMenu: (e) => {
@@ -682,9 +706,3 @@ var _a, _b, _c, _d, _e, _f, _g, _h;
             const drawBaseOpts = { calculator, viewScaleInfo, viewSizeInfo, style };
-            const selectedElementController = elem
-                ? calcElementSizeController(elem, {
-                    groupQueue,
-                    controllerSize: 10,
-                    viewScaleInfo
-                })
-                : null;
+            const selectedElementController = sharedStore[keySelectedElementController];
             const isHoverLocked = !!((_a = hoverElement === null || hoverElement === void 0 ? void 0 : hoverElement.operations) === null || _a === void 0 ? void 0 : _a.locked);
@@ -695,7 +713,3 @@ if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
                     if (isHoverLocked) {
-                        drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
-                                groupQueue,
-                                controllerSize: 10,
-                                viewScaleInfo
-                            }), style }));
+                        drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: selectedElementController, style }));
                     }
@@ -707,3 +721,4 @@ else {
                 if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', style }));
+                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', rotateControllerPattern,
+                        style }));
                     if (actionType === 'drag') {
@@ -735,7 +750,3 @@ if (enableSnapToGrid === true) {
                     if (isHoverLocked) {
-                        drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
-                                groupQueue,
-                                controllerSize: 10,
-                                viewScaleInfo
-                            }), style }));
+                        drawLockedVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: selectedElementController, style }));
                     }
@@ -747,3 +758,4 @@ else {
                 if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', style }));
+                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag', rotateControllerPattern,
+                        style }));
                     if (actionType === 'drag') {
@@ -750,0 +762,0 @@ if (enableSnapToGrid === true) {

dist/esm/middleware/selector/util.js

@@ -682,3 +682,3 @@ import { calcElementCenter, rotateElementVertexes, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcViewPointSize, calcViewElementSize, rotatePointInGroup, rotatePoint, parseAngleToRadian, parseRadianToAngle, limitAngle, calcRadian } from '@idraw/util';
     const changedRadian = calcRadian(elemCenter, start, end);
-    const endAngle = startAngle + parseRadianToAngle(changedRadian);
+    const endAngle = limitAngle(startAngle + parseRadianToAngle(changedRadian));
     return {
@@ -685,0 +685,0 @@ x,

package.json

 {
   "name": "@idraw/core",
-  "version": "0.4.0-beta.35",
+  "version": "0.4.0-beta.36",
   "description": "",
@@ -24,9 +24,9 @@ "main": "dist/esm/index.js",
   "devDependencies": {
-    "@idraw/types": "^0.4.0-beta.35"
+    "@idraw/types": "^0.4.0-beta.36"
   },
   "dependencies": {},
   "peerDependencies": {
-    "@idraw/board": "^0.4.0-beta.35",
-    "@idraw/renderer": "^0.4.0-beta.35",
-    "@idraw/util": "^0.4.0-beta.35"
+    "@idraw/board": "^0.4.0-beta.36",
+    "@idraw/renderer": "^0.4.0-beta.36",
+    "@idraw/util": "^0.4.0-beta.36"
   },
@@ -33,0 +33,0 @@ "publishConfig": {

No alert changes

Improved metrics

Total package byte prevSize

789753

increased by2.2%

Number of package files

78

increased by8.33%

Lines of code

13708

increased by3.08%

No dependency changes