@idraw/core 0.4.0-beta.23 → 0.4.0-beta.25

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

@@ -7,7 +7,7 @@ const infoFontSize = 10;
 const infoLineHeight = 16;
 export const MiddlewareInfo = (opts) => {
     const { boardContent, calculator } = opts;
-    const { helperContext } = boardContent;
+    const { overlayContext } = boardContent;
     return {
         name: '@middleware/info',
         beforeDrawFrame({ snapshot }) {
@@ -63,7 +63,7 @@ export const MiddlewareInfo = (opts) => {
                         const xyText = `${formatNumber(x, { decimalPlaces: 0 })},${formatNumber(y, { decimalPlaces: 0 })}`;
                         const whText = `${formatNumber(w, { decimalPlaces: 0 })}x${formatNumber(h, { decimalPlaces: 0 })}`;
                         const angleText = `${formatNumber(elem.angle || 0, { decimalPlaces: 0 })}°`;
-                        drawSizeInfoText(helperContext, {
+                        drawSizeInfoText(overlayContext, {
                             point: {
                                 x: rectInfo.bottom.x,
                                 y: rectInfo.bottom.y + infoFontSize
@@ -76,7 +76,7 @@ export const MiddlewareInfo = (opts) => {
                             color: infoTextColor,
                             background: infoBackground
                         });
-                        drawPositionInfoText(helperContext, {
+                        drawPositionInfoText(overlayContext, {
                             point: {
                                 x: rectInfo.topLeft.x,
                                 y: rectInfo.topLeft.y - infoFontSize * 2
@@ -89,7 +89,7 @@ export const MiddlewareInfo = (opts) => {
                             color: infoTextColor,
                             background: infoBackground
                         });
-                        drawAngleInfoText(helperContext, {
+                        drawAngleInfoText(overlayContext, {
                             point: {
                                 x: rectInfo.top.x + infoFontSize,
                                 y: rectInfo.top.y - infoFontSize * 2

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

@@ -5,7 +5,7 @@ import { drawLayoutController } from './util';
 import { eventChange } from '../../config';
 export const MiddlewareLayoutSelector = (opts) => {
     const { sharer, boardContent, calculator, viewer, eventHub } = opts;
-    const { helperContext } = boardContent;
+    const { overlayContext } = boardContent;
     let prevPoint = null;
     const clear = () => {
         prevPoint = null;
@@ -234,7 +234,7 @@ export const MiddlewareLayoutSelector = (opts) => {
                     const { x, y, w, h } = activeStore.data.layout;
                     const size = { x, y, w, h };
                     const controller = calcLayoutSizeController(size, { viewScaleInfo, controllerSize: 10 });
-                    drawLayoutController(helperContext, { controller, operations: activeStore.data.layout.operations || {} });
+                    drawLayoutController(overlayContext, { controller, operations: activeStore.data.layout.operations || {} });
                 }
             }
         },

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

@@ -1,9 +1,9 @@
 import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
-import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawUnderGrid, drawScrollerSelectedArea } from './util';
+import { drawRulerBackground, drawXRuler, drawYRuler, calcXRulerScaleList, calcYRulerScaleList, drawGrid, drawScrollerSelectedArea } from './util';
 export const middlewareEventRuler = '@middleware/show-ruler';
 export const MiddlewareRuler = (opts) => {
     const { boardContent, viewer, eventHub, calculator } = opts;
-    const { helperContext, underContext } = boardContent;
+    const { overlayContext, underlayContext } = boardContent;
     let show = true;
     let showGrid = true;
     const rulerCallback = (e) => {
@@ -29,14 +29,15 @@ export const MiddlewareRuler = (opts) => {
             if (show === true) {
                 const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
                 const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
-                drawScrollerSelectedArea(helperContext, { snapshot, calculator });
-                drawRulerBackground(helperContext, { viewScaleInfo, viewSizeInfo });
-                const xList = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
-                drawXRuler(helperContext, { scaleList: xList });
-                const yList = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
-                drawYRuler(helperContext, { scaleList: yList });
+                drawScrollerSelectedArea(overlayContext, { snapshot, calculator });
+                drawRulerBackground(overlayContext, { viewScaleInfo, viewSizeInfo });
+                const { list: xList, rulerUnit } = calcXRulerScaleList({ viewScaleInfo, viewSizeInfo });
+                drawXRuler(overlayContext, { scaleList: xList });
+                const { list: yList } = calcYRulerScaleList({ viewScaleInfo, viewSizeInfo });
+                drawYRuler(overlayContext, { scaleList: yList });
                 if (showGrid === true) {
-                    drawUnderGrid(underContext, {
+                    const ctx = rulerUnit === 1 ? overlayContext : underlayContext;
+                    drawGrid(ctx, {
                         xList,
                         yList,
                         viewScaleInfo,

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

@@ -10,11 +10,17 @@ interface RulerScale {
 export declare function calcXRulerScaleList(opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
-}): RulerScale[];
+}): {
+    list: RulerScale[];
+    rulerUnit: number;
+};
 export declare function calcYRulerScaleList(opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
-}): RulerScale[];
+}): {
+    list: RulerScale[];
+    rulerUnit: number;
+};
 export declare function drawXRuler(ctx: ViewContext2D, opts: {
     scaleList: RulerScale[];
 }): void;
@@ -25,7 +31,7 @@ export declare function drawRulerBackground(ctx: ViewContext2D, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
 }): void;
-export declare function drawUnderGrid(ctx: ViewContext2D, opts: {
+export declare function drawGrid(ctx: ViewContext2D, opts: {
     xList: RulerScale[];
     yList: RulerScale[];
     viewScaleInfo: ViewScaleInfo;

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

@@ -12,12 +12,35 @@ const gridColor = '#AAAAAA20';
 const gridKeyColor = '#AAAAAA40';
 const lineSize = 1;
 const selectedAreaColor = '#196097';
+const limitRulerUnitList = [1, 2, 5, 10, 20, 50, 100, 200, 500];
+function limitRulerUnit(unit) {
+    unit = Math.max(limitRulerUnitList[0], Math.min(unit, limitRulerUnitList[limitRulerUnitList.length - 1]));
+    for (let i = 0; i < limitRulerUnitList.length - 1; i++) {
+        const thisUnit = limitRulerUnitList[i];
+        const nextUnit = limitRulerUnitList[i + 1];
+        if (unit > nextUnit) {
+            continue;
+        }
+        if (unit === thisUnit) {
+            return unit;
+        }
+        if (unit === nextUnit) {
+            return unit;
+        }
+        const mid = (thisUnit + nextUnit) / 2;
+        if (unit <= mid) {
+            return thisUnit;
+        }
+        return nextUnit;
+    }
+    return unit;
+}
 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));
+    rulerUnit = limitRulerUnit(rulerUnit);
     const rulerKeyUnit = rulerUnit * 10;
     const rulerSubKeyUnit = rulerUnit * 5;
     let index = 0;
@@ -40,7 +63,7 @@ function calcRulerScaleList(opts) {
         list.push(rulerScale);
         index++;
     }
-    return list;
+    return { list, rulerUnit };
 }
 export function calcXRulerScaleList(opts) {
     const { viewScaleInfo, viewSizeInfo } = opts;
@@ -152,7 +175,7 @@ export function drawRulerBackground(ctx, opts) {
     ctx.strokeStyle = borderColor;
     ctx.stroke();
 }
-export function drawUnderGrid(ctx, opts) {
+export function drawGrid(ctx, opts) {
     const { xList, yList, viewSizeInfo } = opts;
     const { width, height } = viewSizeInfo;
     for (let i = 0; i < xList.length; i++) {

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

@@ -2,7 +2,7 @@ import { drawScroller, isPointInScrollThumb } from './util';
 import { keyXThumbRect, keyYThumbRect, keyPrevPoint, keyActivePoint, keyActiveThumbType } from './config';
 export const MiddlewareScroller = (opts) => {
     const { viewer, boardContent, sharer } = opts;
-    const { helperContext } = boardContent;
+    const { overlayContext } = boardContent;
     sharer.setSharedStorage(keyXThumbRect, null);
     sharer.setSharedStorage(keyYThumbRect, null);
     const clear = () => {
@@ -36,7 +36,7 @@ export const MiddlewareScroller = (opts) => {
         }
     };
     const getThumbType = (p) => {
-        return isPointInScrollThumb(helperContext, p, {
+        return isPointInScrollThumb(overlayContext, p, {
             xThumbRect: sharer.getSharedStorage(keyXThumbRect),
             yThumbRect: sharer.getSharedStorage(keyYThumbRect)
         });
@@ -84,7 +84,7 @@ export const MiddlewareScroller = (opts) => {
             }
         },
         beforeDrawFrame({ snapshot }) {
-            const { xThumbRect, yThumbRect } = drawScroller(helperContext, { snapshot });
+            const { xThumbRect, yThumbRect } = drawScroller(overlayContext, { snapshot });
             sharer.setSharedStorage(keyXThumbRect, xThumbRect);
             sharer.setSharedStorage(keyYThumbRect, yThumbRect);
         }

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

@@ -1,6 +1,6 @@
 import type { Point, BoardViewerFrameSnapshot, ViewContext2D, ElementSize } from '@idraw/types';
 export type ScrollbarThumbType = 'X' | 'Y';
-export declare function isPointInScrollThumb(helperContext: ViewContext2D, p: Point, opts: {
+export declare function isPointInScrollThumb(overlayContext: ViewContext2D, p: Point, opts: {
     xThumbRect?: ElementSize | null;
     yThumbRect?: ElementSize | null;
 }): ScrollbarThumbType | null;

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

@@ -9,8 +9,8 @@ const scrollConfig = {
     scrollBarColor: '#FFFFFF60',
     showScrollBar: false
 };
-function isPointAtRect(helperContext, p, rect) {
-    const ctx = helperContext;
+function isPointAtRect(overlayContext, p, rect) {
+    const ctx = overlayContext;
     const { x, y, w, h } = rect;
     ctx.beginPath();
     ctx.rect(x, y, w, h);
@@ -20,13 +20,13 @@ function isPointAtRect(helperContext, p, rect) {
     }
     return false;
 }
-export function isPointInScrollThumb(helperContext, p, opts) {
+export function isPointInScrollThumb(overlayContext, p, opts) {
     let thumbType = null;
     const { xThumbRect, yThumbRect } = opts;
-    if (xThumbRect && isPointAtRect(helperContext, p, xThumbRect)) {
+    if (xThumbRect && isPointAtRect(overlayContext, p, xThumbRect)) {
         thumbType = 'X';
     }
-    else if (yThumbRect && isPointAtRect(helperContext, p, yThumbRect)) {
+    else if (yThumbRect && isPointAtRect(overlayContext, p, yThumbRect)) {
         thumbType = 'Y';
     }
     return thumbType;
@@ -155,8 +155,8 @@ function drawScrollerThumb(ctx, opts) {
     }
     ctx.restore();
 }
-function drawScrollerInfo(helperContext, opts) {
-    const ctx = helperContext;
+function drawScrollerInfo(overlayContext, opts) {
+    const ctx = overlayContext;
     const { viewScaleInfo, viewSizeInfo, scrollInfo } = opts;
     const { activeThumbType, prevPoint, activePoint } = scrollInfo;
     const { width, height } = viewSizeInfo;

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

@@ -10,7 +10,7 @@ export { keySelectedElementList, keyActionType, keyResizeType, keyGroupQueue };
 export { middlewareEventSelect, middlewareEventSelectClear, middlewareEventSelectInGroup };
 export const MiddlewareSelector = (opts) => {
     const { viewer, sharer, boardContent, calculator, eventHub } = opts;
-    const { helperContext } = boardContent;
+    const { overlayContext } = boardContent;
     let prevPoint = null;
     let inBusyMode = null;
     sharer.setSharedStorage(keyActionType, null);
@@ -70,7 +70,7 @@ export const MiddlewareSelector = (opts) => {
     };
     const pointTargetBaseOptions = () => {
         return {
-            ctx: helperContext,
+            ctx: overlayContext,
             calculator,
             data: sharer.getActiveStorage('data'),
             selectedElements: getActiveElements(),
@@ -163,7 +163,7 @@ export const MiddlewareSelector = (opts) => {
             };
             if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
                 const isInActiveGroup = isPointInViewActiveGroup(e.point, {
-                    ctx: helperContext,
+                    ctx: overlayContext,
                     viewScaleInfo: sharer.getActiveViewScaleInfo(),
                     viewSizeInfo: sharer.getActiveViewSizeInfo(),
                     groupQueue: sharer.getSharedStorage(keyGroupQueue)
@@ -243,7 +243,7 @@ export const MiddlewareSelector = (opts) => {
             const groupQueue = sharer.getSharedStorage(keyGroupQueue);
             if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
                 if (isPointInViewActiveGroup(e.point, {
-                    ctx: helperContext,
+                    ctx: overlayContext,
                     viewScaleInfo: sharer.getActiveViewScaleInfo(),
                     viewSizeInfo: sharer.getActiveViewSizeInfo(),
                     groupQueue
@@ -553,7 +553,7 @@ export const MiddlewareSelector = (opts) => {
             viewer.drawFrame();
         },
         doubleClick(e) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             if (sharer.getSharedStorage(keyEnableSelectInGroup) === false) {
                 return;
             }
@@ -571,11 +571,11 @@ export const MiddlewareSelector = (opts) => {
                     return;
                 }
             }
-            else if (target.elements.length === 1 && ((_d = target.elements[0]) === null || _d === void 0 ? void 0 : _d.type) === 'text') {
+            else if (target.elements.length === 1 && ((_d = target.elements[0]) === null || _d === void 0 ? void 0 : _d.type) === 'text' && !((_f = (_e = target.elements[0]) === null || _e === void 0 ? void 0 : _e.operations) === null || _f === void 0 ? void 0 : _f.invisible)) {
                 eventHub.trigger(middlewareEventTextEdit, {
                     element: target.elements[0],
                     groupQueue: sharer.getSharedStorage(keyGroupQueue) || [],
-                    position: getElementPositionFromList((_e = target.elements[0]) === null || _e === void 0 ? void 0 : _e.uuid, ((_f = sharer.getActiveStorage('data')) === null || _f === void 0 ? void 0 : _f.elements) || []),
+                    position: getElementPositionFromList((_g = target.elements[0]) === null || _g === void 0 ? void 0 : _g.uuid, ((_h = sharer.getActiveStorage('data')) === null || _h === void 0 ? void 0 : _h.elements) || []),
                     viewScaleInfo: sharer.getActiveViewScaleInfo()
                 });
             }
@@ -608,25 +608,25 @@ export const MiddlewareSelector = (opts) => {
                 : null;
             const isLock = !!((_a = hoverElement === null || hoverElement === void 0 ? void 0 : hoverElement.operations) === null || _a === void 0 ? void 0 : _a.lock);
             if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
-                drawGroupQueueVertexesWrappers(helperContext, groupQueueVertexesList, drawBaseOpts);
+                drawGroupQueueVertexesWrappers(overlayContext, groupQueueVertexesList, drawBaseOpts);
                 if (hoverElement && actionType !== 'drag') {
                     if (isLock) {
-                        drawLockVertexesWrapper(helperContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
+                        drawLockVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
                                 groupQueue,
                                 controllerSize: 10,
                                 viewScaleInfo
                             }) }));
                     }
                     else {
-                        drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
+                        drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
                     }
                 }
                 if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag' }));
+                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag' }));
                     if (actionType === 'drag') {
                         const xLines = sharer.getSharedStorage(keySelectedReferenceXLines);
                         const yLines = sharer.getSharedStorage(keySelectedReferenceYLines);
-                        drawReferenceLines(helperContext, {
+                        drawReferenceLines(overlayContext, {
                             xLines,
                             yLines
                         });
@@ -636,29 +636,29 @@ export const MiddlewareSelector = (opts) => {
             else {
                 if (hoverElement && actionType !== 'drag') {
                     if (isLock) {
-                        drawLockVertexesWrapper(helperContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
+                        drawLockVertexesWrapper(overlayContext, hoverElementVertexes, Object.assign(Object.assign({}, drawBaseOpts), { controller: calcElementSizeController(hoverElement, {
                                 groupQueue,
                                 controllerSize: 10,
                                 viewScaleInfo
                             }) }));
                     }
                     else {
-                        drawHoverVertexesWrapper(helperContext, hoverElementVertexes, drawBaseOpts);
+                        drawHoverVertexesWrapper(overlayContext, hoverElementVertexes, drawBaseOpts);
                     }
                 }
                 if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag' }));
+                    drawSelectedElementControllersVertexes(overlayContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag' }));
                     if (actionType === 'drag') {
                         const xLines = sharer.getSharedStorage(keySelectedReferenceXLines);
                         const yLines = sharer.getSharedStorage(keySelectedReferenceYLines);
-                        drawReferenceLines(helperContext, {
+                        drawReferenceLines(overlayContext, {
                             xLines,
                             yLines
                         });
                     }
                 }
                 else if (actionType === 'area' && areaStart && areaEnd) {
-                    drawArea(helperContext, { start: areaStart, end: areaEnd });
+                    drawArea(overlayContext, { start: areaStart, end: areaEnd });
                 }
                 else if (['drag-list', 'drag-list-end'].includes(actionType)) {
                     const listAreaSize = calcSelectedElementsArea(getActiveElements(), {
@@ -667,7 +667,7 @@ export const MiddlewareSelector = (opts) => {
                         calculator
                     });
                     if (listAreaSize) {
-                        drawListArea(helperContext, { areaSize: listAreaSize });
+                        drawListArea(overlayContext, { areaSize: listAreaSize });
                     }
                 }
             }

package/dist/esm/middleware/text-editor/index.js

@@ -1,9 +1,9 @@
-import { limitAngle, getDefaultElementDetailConfig } from '@idraw/util';
+import { limitAngle, getDefaultElementDetailConfig, enhanceFontFamliy } from '@idraw/util';
 export const middlewareEventTextEdit = '@middleware/text-edit';
 export const middlewareEventTextChange = '@middleware/text-change';
 const defaultElementDetail = getDefaultElementDetailConfig();
 export const MiddlewareTextEditor = (opts) => {
-    const { eventHub, boardContent, viewer } = opts;
+    const { eventHub, boardContent, viewer, sharer } = opts;
     const canvas = boardContent.boardContext.canvas;
     const textarea = document.createElement('div');
     textarea.setAttribute('contenteditable', 'true');
@@ -26,8 +26,24 @@ export const MiddlewareTextEditor = (opts) => {
         resetCanvasWrapper();
         resetTextArea(e);
         mask.style.display = 'block';
+        if (activeElem === null || activeElem === void 0 ? void 0 : activeElem.uuid) {
+            sharer.setActiveOverrideElemenentMap({
+                [activeElem.uuid]: {
+                    operations: { invisible: true }
+                }
+            });
+            viewer.drawFrame();
+        }
     };
     const hideTextArea = () => {
+        if (activeElem === null || activeElem === void 0 ? void 0 : activeElem.uuid) {
+            const map = sharer.getActiveOverrideElemenentMap();
+            if (map) {
+                delete map[activeElem.uuid];
+            }
+            sharer.setActiveOverrideElemenentMap(map);
+            viewer.drawFrame();
+        }
         mask.style.display = 'none';
         activeElem = null;
         activePosition = [];
@@ -116,11 +132,11 @@ export const MiddlewareTextEditor = (opts) => {
         textarea.style.resize = 'none';
         textarea.style.overflow = 'hidden';
         textarea.style.wordBreak = 'break-all';
-        textarea.style.background = '#FFFFFF';
-        textarea.style.color = '#333333';
+        textarea.style.background = 'transparent';
+        textarea.style.color = `${detail.color || '#333333'}`;
         textarea.style.fontSize = `${detail.fontSize * scale}px`;
-        textarea.style.lineHeight = `${detail.lineHeight * scale}px`;
-        textarea.style.fontFamily = detail.fontFamily;
+        textarea.style.lineHeight = `${(detail.lineHeight || detail.fontSize) * scale}px`;
+        textarea.style.fontFamily = enhanceFontFamliy(detail.fontFamily);
         textarea.style.fontWeight = `${detail.fontWeight}`;
         textarea.style.padding = '0';
         textarea.style.margin = '0';