@idraw/renderer 0.4.0-beta.39 → 0.4.0-beta.40

package/dist/esm/calculator.d.ts

@@ -0,0 +1,43 @@
+import type { Point, Data, Element, ElementType, ViewCalculator, ViewCalculatorOptions, ViewScaleInfo, ViewSizeInfo, ViewRectInfo, ModifyOptions, VirtualFlatItem } from '@idraw/types';
+export declare class Calculator implements ViewCalculator {
+    #private;
+    constructor(opts: ViewCalculatorOptions);
+    toGridNum(num: number, opts?: {
+        ignore?: boolean;
+    }): number;
+    destroy(): void;
+    needRender(elem: Element<ElementType>): boolean;
+    getPointElement(p: Point, opts: {
+        data: Data;
+        viewScaleInfo: ViewScaleInfo;
+        viewSizeInfo: ViewSizeInfo;
+    }): {
+        index: number;
+        element: null | Element<ElementType>;
+        groupQueueIndex: number;
+    };
+    resetVirtualFlatItemMap(data: Data, opts: {
+        viewScaleInfo: ViewScaleInfo;
+        viewSizeInfo: ViewSizeInfo;
+    }): void;
+    updateVisiableStatus(opts: {
+        viewScaleInfo: ViewScaleInfo;
+        viewSizeInfo: ViewSizeInfo;
+    }): void;
+    calcViewRectInfoFromOrigin(uuid: string, opts: {
+        checkVisible?: boolean;
+        viewScaleInfo: ViewScaleInfo;
+        viewSizeInfo: ViewSizeInfo;
+    }): ViewRectInfo | null;
+    calcViewRectInfoFromRange(uuid: string, opts: {
+        checkVisible?: boolean;
+        viewScaleInfo: ViewScaleInfo;
+        viewSizeInfo: ViewSizeInfo;
+    }): ViewRectInfo | null;
+    modifyVirtualFlatItemMap(data: Data, opts: {
+        modifyOptions: ModifyOptions;
+        viewScaleInfo: ViewScaleInfo;
+        viewSizeInfo: ViewSizeInfo;
+    }): void;
+    getVirtualFlatItem(uuid: string): VirtualFlatItem | null;
+}

package/dist/esm/calculator.js

@@ -0,0 +1,168 @@
+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 _Calculator_opts, _Calculator_store;
+import { is, getViewPointAtElement, Store, calcViewPointSize, findElementFromListByPosition, getGroupQueueByElementPosition, calcElementOriginRectInfo, originRectInfoToRangeRectInfo } from '@idraw/util';
+import { sortElementsViewVisiableInfoMap, updateVirtualFlatItemMapStatus } from './view-visible';
+import { calcVirtualFlatDetail } from './virtual-flat';
+export class Calculator {
+    constructor(opts) {
+        _Calculator_opts.set(this, void 0);
+        _Calculator_store.set(this, void 0);
+        __classPrivateFieldSet(this, _Calculator_opts, opts, "f");
+        __classPrivateFieldSet(this, _Calculator_store, new Store({
+            defaultStorage: {
+                virtualFlatItemMap: {},
+                visibleCount: 0,
+                invisibleCount: 0
+            }
+        }), "f");
+    }
+    toGridNum(num, opts) {
+        if ((opts === null || opts === void 0 ? void 0 : opts.ignore) === true) {
+            return num;
+        }
+        return Math.round(num);
+    }
+    destroy() {
+        __classPrivateFieldSet(this, _Calculator_opts, null, "f");
+    }
+    needRender(elem) {
+        const virtualFlatItemMap = __classPrivateFieldGet(this, _Calculator_store, "f").get('virtualFlatItemMap');
+        const info = virtualFlatItemMap[elem.uuid];
+        if (!info) {
+            return true;
+        }
+        return info.isVisibleInView;
+    }
+    getPointElement(p, opts) {
+        const context2d = __classPrivateFieldGet(this, _Calculator_opts, "f").tempContext;
+        return getViewPointAtElement(p, Object.assign(Object.assign({}, opts), { context2d }));
+    }
+    resetVirtualFlatItemMap(data, opts) {
+        if (data) {
+            const { virtualFlatItemMap, invisibleCount, visibleCount } = sortElementsViewVisiableInfoMap(data.elements, Object.assign(Object.assign({}, opts), {
+                tempContext: __classPrivateFieldGet(this, _Calculator_opts, "f").tempContext
+            }));
+            __classPrivateFieldGet(this, _Calculator_store, "f").set('virtualFlatItemMap', virtualFlatItemMap);
+            __classPrivateFieldGet(this, _Calculator_store, "f").set('invisibleCount', invisibleCount);
+            __classPrivateFieldGet(this, _Calculator_store, "f").set('visibleCount', visibleCount);
+        }
+    }
+    updateVisiableStatus(opts) {
+        const { virtualFlatItemMap, invisibleCount, visibleCount } = updateVirtualFlatItemMapStatus(__classPrivateFieldGet(this, _Calculator_store, "f").get('virtualFlatItemMap'), opts);
+        __classPrivateFieldGet(this, _Calculator_store, "f").set('virtualFlatItemMap', virtualFlatItemMap);
+        __classPrivateFieldGet(this, _Calculator_store, "f").set('invisibleCount', invisibleCount);
+        __classPrivateFieldGet(this, _Calculator_store, "f").set('visibleCount', visibleCount);
+    }
+    calcViewRectInfoFromOrigin(uuid, opts) {
+        const infoData = __classPrivateFieldGet(this, _Calculator_store, "f").get('virtualFlatItemMap')[uuid];
+        if (!(infoData === null || infoData === void 0 ? void 0 : infoData.originRectInfo)) {
+            return null;
+        }
+        const { checkVisible, viewScaleInfo, viewSizeInfo } = opts;
+        const { center, left, right, bottom, top, topLeft, topRight, bottomLeft, bottomRight } = infoData.originRectInfo;
+        if (checkVisible === true && infoData.isVisibleInView === false) {
+            return null;
+        }
+        const calcOpts = { viewScaleInfo, viewSizeInfo };
+        const viewRectInfo = {
+            center: calcViewPointSize(center, calcOpts),
+            left: calcViewPointSize(left, calcOpts),
+            right: calcViewPointSize(right, calcOpts),
+            bottom: calcViewPointSize(bottom, calcOpts),
+            top: calcViewPointSize(top, calcOpts),
+            topLeft: calcViewPointSize(topLeft, calcOpts),
+            topRight: calcViewPointSize(topRight, calcOpts),
+            bottomLeft: calcViewPointSize(bottomLeft, calcOpts),
+            bottomRight: calcViewPointSize(bottomRight, calcOpts)
+        };
+        return viewRectInfo;
+    }
+    calcViewRectInfoFromRange(uuid, opts) {
+        const infoData = __classPrivateFieldGet(this, _Calculator_store, "f").get('virtualFlatItemMap')[uuid];
+        if (!(infoData === null || infoData === void 0 ? void 0 : infoData.originRectInfo)) {
+            return null;
+        }
+        const { checkVisible, viewScaleInfo, viewSizeInfo } = opts;
+        const { center, left, right, bottom, top, topLeft, topRight, bottomLeft, bottomRight } = infoData.rangeRectInfo;
+        if (checkVisible === true && infoData.isVisibleInView === false) {
+            return null;
+        }
+        const calcOpts = { viewScaleInfo, viewSizeInfo };
+        const viewRectInfo = {
+            center: calcViewPointSize(center, calcOpts),
+            left: calcViewPointSize(left, calcOpts),
+            right: calcViewPointSize(right, calcOpts),
+            bottom: calcViewPointSize(bottom, calcOpts),
+            top: calcViewPointSize(top, calcOpts),
+            topLeft: calcViewPointSize(topLeft, calcOpts),
+            topRight: calcViewPointSize(topRight, calcOpts),
+            bottomLeft: calcViewPointSize(bottomLeft, calcOpts),
+            bottomRight: calcViewPointSize(bottomRight, calcOpts)
+        };
+        return viewRectInfo;
+    }
+    modifyVirtualFlatItemMap(data, opts) {
+        const { modifyOptions, viewScaleInfo, viewSizeInfo } = opts;
+        const { type, content } = modifyOptions;
+        const list = data.elements;
+        const virtualFlatItemMap = __classPrivateFieldGet(this, _Calculator_store, "f").get('virtualFlatItemMap');
+        if (type === 'deleteElement') {
+            const { element } = content;
+            const uuids = [];
+            const _walk = (e) => {
+                uuids.push(e.uuid);
+                if (e.type === 'group' && Array.isArray(e.detail.children)) {
+                    e.detail.children.forEach((child) => {
+                        _walk(child);
+                    });
+                }
+            };
+            _walk(element);
+            uuids.forEach((uuid) => {
+                delete virtualFlatItemMap[uuid];
+            });
+            __classPrivateFieldGet(this, _Calculator_store, "f").set('virtualFlatItemMap', virtualFlatItemMap);
+        }
+        else if (type === 'addElement' || type === 'updateElement') {
+            const { position } = content;
+            const element = findElementFromListByPosition(position, data.elements);
+            const groupQueue = getGroupQueueByElementPosition(list, position);
+            if (element) {
+                if (type === 'updateElement' && element.type === 'group') {
+                    this.resetVirtualFlatItemMap(data, { viewScaleInfo, viewSizeInfo });
+                }
+                else {
+                    const originRectInfo = calcElementOriginRectInfo(element, {
+                        groupQueue: groupQueue || []
+                    });
+                    const newVirtualFlatItem = Object.assign({ type: element.type, originRectInfo, rangeRectInfo: is.angle(element.angle) ? originRectInfoToRangeRectInfo(originRectInfo) : originRectInfo, isVisibleInView: true, position: [...position] }, calcVirtualFlatDetail(element, {
+                        tempContext: __classPrivateFieldGet(this, _Calculator_opts, "f").tempContext
+                    }));
+                    virtualFlatItemMap[element.uuid] = newVirtualFlatItem;
+                    __classPrivateFieldGet(this, _Calculator_store, "f").set('virtualFlatItemMap', virtualFlatItemMap);
+                    if (type === 'updateElement') {
+                        this.updateVisiableStatus({ viewScaleInfo, viewSizeInfo });
+                    }
+                }
+            }
+        }
+        else if (type === 'moveElement') {
+            this.resetVirtualFlatItemMap(data, { viewScaleInfo, viewSizeInfo });
+        }
+    }
+    getVirtualFlatItem(uuid) {
+        const itemMap = __classPrivateFieldGet(this, _Calculator_store, "f").get('virtualFlatItemMap');
+        return itemMap[uuid] || null;
+    }
+}
+_Calculator_opts = new WeakMap(), _Calculator_store = new WeakMap();

package/dist/esm/draw/box.d.ts

@@ -1,4 +1,5 @@
 import { ViewContext2D, Element, ElementType, ElementSize, ViewScaleInfo, ViewSizeInfo } from '@idraw/types';
+import { Calculator } from '../calculator';
 export declare function getOpacity(elem: Element): number;
 export declare function drawBox(ctx: ViewContext2D, viewElem: Element, opts: {
     originElem: Element;
@@ -15,8 +16,10 @@ export declare function drawBoxBackground(ctx: ViewContext2D, viewElem: Element<
     viewSizeInfo: ViewSizeInfo;
 }): void;
 export declare function drawBoxBorder(ctx: ViewContext2D, viewElem: Element<ElementType>, opts: {
+    originElem: Element;
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
+    calculator?: Calculator;
 }): void;
 export declare function drawBoxShadow(ctx: ViewContext2D, viewElem: Element<ElementType>, opts: {
     viewScaleInfo: ViewScaleInfo;

package/dist/esm/draw/box.js

@@ -18,7 +18,7 @@ export function drawBox(ctx, viewElem, opts) {
         ctx.globalAlpha = opacity;
         drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
         renderContent === null || renderContent === void 0 ? void 0 : renderContent();
-        drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+        drawBoxBorder(ctx, viewElem, { originElem, viewScaleInfo, viewSizeInfo });
         ctx.globalAlpha = parentOpacity;
     };
     if (clipPath) {
@@ -79,7 +79,12 @@ function drawClipPathStroke(ctx, viewElem, opts) {
     const { renderContent, originElem, calcElemSize, viewSizeInfo, parentOpacity } = opts;
     const totalScale = viewSizeInfo.devicePixelRatio;
     const { clipPath, clipPathStrokeColor, clipPathStrokeWidth } = (originElem === null || originElem === void 0 ? void 0 : originElem.detail) || {};
-    if (clipPath && calcElemSize && clipPath.commands && typeof clipPathStrokeWidth === 'number' && clipPathStrokeWidth > 0 && clipPathStrokeColor) {
+    if (clipPath &&
+        calcElemSize &&
+        clipPath.commands &&
+        typeof clipPathStrokeWidth === 'number' &&
+        clipPathStrokeWidth > 0 &&
+        clipPathStrokeColor) {
         const { x, y, w, h } = calcElemSize;
         const { originW, originH, originX, originY } = clipPath;
         const scaleW = w / originW;
@@ -182,12 +187,17 @@ export function drawBoxBorder(ctx, viewElem, opts) {
     if (isColorStr(viewElem.detail.borderColor) === true) {
         borderColor = viewElem.detail.borderColor;
     }
-    const { borderWidth, borderRadius, borderDash, boxSizing = defaultElemConfig.boxSizing } = viewElem.detail;
-    let bw = 0;
-    if (typeof borderWidth === 'number') {
-        bw = borderWidth || 1;
+    const { borderDash, borderWidth, borderRadius, boxSizing = defaultElemConfig.boxSizing } = viewElem.detail;
+    let viewBorderDash = [];
+    if (Array.isArray(borderDash) && borderDash.length > 0) {
+        viewBorderDash = borderDash.map((num) => Math.ceil(num * scale));
+    }
+    if (viewBorderDash.length > 0) {
+        ctx.lineCap = 'butt';
+    }
+    else {
+        ctx.lineCap = 'square';
     }
-    bw = bw * scale;
     let radiusList = [0, 0, 0, 0];
     if (typeof borderRadius === 'number') {
         const br = borderRadius * scale;
@@ -196,11 +206,12 @@ export function drawBoxBorder(ctx, viewElem, opts) {
     else if (Array.isArray(borderRadius) && (borderRadius === null || borderRadius === void 0 ? void 0 : borderRadius.length) === 4) {
         radiusList = [borderRadius[0] * scale, borderRadius[1] * scale, borderRadius[2] * scale, borderRadius[3] * scale];
     }
-    ctx.strokeStyle = borderColor;
-    let viewBorderDash = [];
-    if (Array.isArray(borderDash) && borderDash.length > 0) {
-        viewBorderDash = borderDash.map((num) => Math.ceil(num * scale));
+    let bw = 0;
+    if (typeof borderWidth === 'number') {
+        bw = borderWidth || 1;
     }
+    bw = bw * scale;
+    ctx.strokeStyle = borderColor;
     let borderTop = 0;
     let borderRight = 0;
     let borderBottom = 0;
@@ -285,12 +296,6 @@ export function drawBoxBorder(ctx, viewElem, opts) {
             w = viewElem.w;
             h = viewElem.h;
         }
-        if (viewBorderDash.length > 0) {
-            ctx.lineCap = 'butt';
-        }
-        else {
-            ctx.lineCap = 'square';
-        }
         w = Math.max(w, 1);
         h = Math.max(h, 1);
         radiusList = radiusList.map((r) => {

package/dist/esm/draw/circle.js

@@ -28,8 +28,6 @@ export function drawCircle(ctx, elem, opts) {
                 const radiusB = b;
                 if (bw > 0) {
                     if (boxSizing === 'content-box') {
-                        a = a;
-                        b = b;
                     }
                     else if (boxSizing === 'center-line') {
                         a = a - bw / 2;

package/dist/esm/draw/layout.js

@@ -39,6 +39,6 @@ export function drawLayout(ctx, layout, opts, renderContent) {
     if (layout.detail.overflow === 'hidden') {
         ctx.restore();
     }
-    drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+    drawBoxBorder(ctx, viewElem, { originElem: elem, viewScaleInfo, viewSizeInfo });
     ctx.globalAlpha = parentOpacity;
 }

package/dist/esm/draw/text.js

@@ -2,19 +2,12 @@ import { rotateElement, calcViewElementSize, enhanceFontFamliy } from '@idraw/ut
 import { is, isColorStr, getDefaultElementDetailConfig } from '@idraw/util';
 import { drawBox, drawBoxShadow } from './box';
 const detailConfig = getDefaultElementDetailConfig();
-function isTextWidthWithinErrorRange(w0, w1, scale) {
-    if (scale < 0.5) {
-        if (w0 < w1 && (w0 - w1) / w0 > -0.15) {
-            return true;
-        }
-    }
-    return w0 >= w1;
-}
 export function drawText(ctx, elem, opts) {
-    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity, calculator } = opts;
     const { x, y, w, h, angle } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
     rotateElement(ctx, { x, y, w, h, angle }, () => {
+        var _a, _b;
         drawBoxShadow(ctx, viewElem, {
             viewScaleInfo,
             viewSizeInfo,
@@ -35,8 +28,6 @@ export function drawText(ctx, elem, opts) {
             if (fontSize < 2) {
                 return;
             }
-            const originLineHeight = detail.lineHeight || originFontSize;
-            const lineHeight = originLineHeight * viewScaleInfo.scale;
             ctx.fillStyle = elem.detail.color || detailConfig.color;
             ctx.textBaseline = 'top';
             ctx.$setFont({
@@ -44,123 +35,25 @@ export function drawText(ctx, elem, opts) {
                 fontSize: fontSize,
                 fontFamily: enhanceFontFamliy(detail.fontFamily)
             });
-            let detailText = detail.text.replace(/\r\n/gi, '\n');
-            if (detail.textTransform === 'lowercase') {
-                detailText = detailText.toLowerCase();
-            }
-            else if (detail.textTransform === 'uppercase') {
-                detailText = detailText.toUpperCase();
-            }
-            const fontHeight = lineHeight;
-            const detailTextList = detailText.split('\n');
-            const lines = [];
-            let lineNum = 0;
-            detailTextList.forEach((itemText, idx) => {
-                if (detail.minInlineSize === 'maxContent') {
-                    lines.push({
-                        text: itemText,
-                        width: ctx.$undoPixelRatio(ctx.measureText(itemText).width)
-                    });
-                }
-                else {
-                    let lineText = '';
-                    let splitStr = '';
-                    let tempStrList = itemText.split(splitStr);
-                    if (detail.wordBreak === 'normal') {
-                        const splitStr = ' ';
-                        const wordList = itemText.split(splitStr);
-                        tempStrList = [];
-                        wordList.forEach((word, idx) => {
-                            tempStrList.push(word);
-                            if (idx < wordList.length - 1) {
-                                tempStrList.push(splitStr);
-                            }
-                        });
+            {
+                const virtualTextDetail = calculator.getVirtualFlatItem(elem.uuid);
+                if (Array.isArray(virtualTextDetail === null || virtualTextDetail === void 0 ? void 0 : virtualTextDetail.textLines) && ((_a = virtualTextDetail === null || virtualTextDetail === void 0 ? void 0 : virtualTextDetail.textLines) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    if (detail.textShadowColor !== undefined && isColorStr(detail.textShadowColor)) {
+                        ctx.shadowColor = detail.textShadowColor;
                     }
-                    if (tempStrList.length === 1 && detail.overflow === 'visible') {
-                        lines.push({
-                            text: tempStrList[0],
-                            width: ctx.$undoPixelRatio(ctx.measureText(tempStrList[0]).width)
-                        });
+                    if (detail.textShadowOffsetX !== undefined && is.number(detail.textShadowOffsetX)) {
+                        ctx.shadowOffsetX = detail.textShadowOffsetX;
                     }
-                    else if (tempStrList.length > 0) {
-                        for (let i = 0; i < tempStrList.length; i++) {
-                            if (isTextWidthWithinErrorRange(ctx.$doPixelRatio(w), ctx.measureText(lineText + tempStrList[i]).width, viewScaleInfo.scale)) {
-                                lineText += tempStrList[i] || '';
-                            }
-                            else {
-                                lines.push({
-                                    text: lineText,
-                                    width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
-                                });
-                                lineText = tempStrList[i] || '';
-                                lineNum++;
-                            }
-                            if ((lineNum + 1) * fontHeight > h && detail.overflow === 'hidden') {
-                                break;
-                            }
-                            if (tempStrList.length - 1 === i) {
-                                if ((lineNum + 1) * fontHeight <= h) {
-                                    lines.push({
-                                        text: lineText,
-                                        width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
-                                    });
-                                    if (idx < detailTextList.length - 1) {
-                                        lineNum++;
-                                    }
-                                    break;
-                                }
-                            }
-                        }
+                    if (detail.textShadowOffsetY !== undefined && is.number(detail.textShadowOffsetY)) {
+                        ctx.shadowOffsetY = detail.textShadowOffsetY;
                     }
-                    else {
-                        lines.push({
-                            text: '',
-                            width: 0
-                        });
+                    if (detail.textShadowBlur !== undefined && is.number(detail.textShadowBlur)) {
+                        ctx.shadowBlur = detail.textShadowBlur;
                     }
+                    (_b = virtualTextDetail === null || virtualTextDetail === void 0 ? void 0 : virtualTextDetail.textLines) === null || _b === void 0 ? void 0 : _b.forEach((line) => {
+                        ctx.fillText(line.text, x + line.x * viewScaleInfo.scale, y + line.y * viewScaleInfo.scale);
+                    });
                 }
-            });
-            let startY = 0;
-            let eachLineStartY = 0;
-            if (fontHeight > fontSize) {
-                eachLineStartY = (fontHeight - fontSize) / 2;
-            }
-            if (lines.length * fontHeight < h) {
-                if (elem.detail.verticalAlign === 'top') {
-                    startY = 0;
-                }
-                else if (elem.detail.verticalAlign === 'bottom') {
-                    startY += h - lines.length * fontHeight;
-                }
-                else {
-                    startY += (h - lines.length * fontHeight) / 2;
-                }
-            }
-            {
-                const _y = y + startY;
-                if (detail.textShadowColor !== undefined && isColorStr(detail.textShadowColor)) {
-                    ctx.shadowColor = detail.textShadowColor;
-                }
-                if (detail.textShadowOffsetX !== undefined && is.number(detail.textShadowOffsetX)) {
-                    ctx.shadowOffsetX = detail.textShadowOffsetX;
-                }
-                if (detail.textShadowOffsetY !== undefined && is.number(detail.textShadowOffsetY)) {
-                    ctx.shadowOffsetY = detail.textShadowOffsetY;
-                }
-                if (detail.textShadowBlur !== undefined && is.number(detail.textShadowBlur)) {
-                    ctx.shadowBlur = detail.textShadowBlur;
-                }
-                lines.forEach((line, i) => {
-                    let _x = x;
-                    if (detail.textAlign === 'center') {
-                        _x = x + (w - line.width) / 2;
-                    }
-                    else if (detail.textAlign === 'right') {
-                        _x = x + (w - line.width);
-                    }
-                    ctx.fillText(line.text, _x, _y + fontHeight * i + eachLineStartY);
-                });
             }
         }
     });

package/dist/esm/index.d.ts

@@ -2,6 +2,8 @@ import { EventEmitter } from '@idraw/util';
 import type { LoadItemMap } from '@idraw/types';
 import { Loader } from './loader';
 import type { Data, BoardRenderer, RendererOptions, RendererEventMap, RendererDrawOptions } from '@idraw/types';
+import { Calculator } from './calculator';
+export { Calculator };
 export declare class Renderer extends EventEmitter<RendererEventMap> implements BoardRenderer {
     #private;
     constructor(opts: RendererOptions);
@@ -13,5 +15,6 @@ export declare class Renderer extends EventEmitter<RendererEventMap> implements
     setLoadItemMap(itemMap: LoadItemMap): void;
     getLoadItemMap(): LoadItemMap;
     getLoader(): Loader;
+    getCalculator(): Calculator;
 }
 export { drawCircle, drawRect, drawImage, drawSVG, drawHTML, drawText, drawGroup, drawElement, drawElementList, drawLayout, drawGlobalBackground } from './draw';

package/dist/esm/index.js

@@ -9,18 +9,24 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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 _Renderer_instances, _Renderer_opts, _Renderer_loader, _Renderer_hasDestroyed, _Renderer_init;
+var _Renderer_instances, _Renderer_opts, _Renderer_loader, _Renderer_calculator, _Renderer_hasDestroyed, _Renderer_init;
 import { EventEmitter } from '@idraw/util';
 import { drawElementList, drawLayout, drawGlobalBackground } from './draw/index';
 import { Loader } from './loader';
+import { Calculator } from './calculator';
+export { Calculator };
 export class Renderer extends EventEmitter {
     constructor(opts) {
         super();
         _Renderer_instances.add(this);
         _Renderer_opts.set(this, void 0);
         _Renderer_loader.set(this, new Loader());
+        _Renderer_calculator.set(this, void 0);
         _Renderer_hasDestroyed.set(this, false);
         __classPrivateFieldSet(this, _Renderer_opts, opts, "f");
+        __classPrivateFieldSet(this, _Renderer_calculator, new Calculator({
+            tempContext: opts.tempContext
+        }), "f");
         __classPrivateFieldGet(this, _Renderer_instances, "m", _Renderer_init).call(this);
     }
     isDestroyed() {
@@ -38,7 +44,8 @@ export class Renderer extends EventEmitter {
     }
     drawData(data, opts) {
         const loader = __classPrivateFieldGet(this, _Renderer_loader, "f");
-        const { calculator, sharer } = __classPrivateFieldGet(this, _Renderer_opts, "f");
+        const calculator = __classPrivateFieldGet(this, _Renderer_calculator, "f");
+        const { sharer } = __classPrivateFieldGet(this, _Renderer_opts, "f");
         const viewContext = __classPrivateFieldGet(this, _Renderer_opts, "f").viewContext;
         viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
         const parentElementSize = {
@@ -94,8 +101,11 @@ export class Renderer extends EventEmitter {
     getLoader() {
         return __classPrivateFieldGet(this, _Renderer_loader, "f");
     }
+    getCalculator() {
+        return __classPrivateFieldGet(this, _Renderer_calculator, "f");
+    }
 }
-_Renderer_opts = new WeakMap(), _Renderer_loader = new WeakMap(), _Renderer_hasDestroyed = new WeakMap(), _Renderer_instances = new WeakSet(), _Renderer_init = function _Renderer_init() {
+_Renderer_opts = new WeakMap(), _Renderer_loader = new WeakMap(), _Renderer_calculator = new WeakMap(), _Renderer_hasDestroyed = new WeakMap(), _Renderer_instances = new WeakSet(), _Renderer_init = function _Renderer_init() {
     const loader = __classPrivateFieldGet(this, _Renderer_loader, "f");
     loader.on('load', (e) => {
         this.trigger('load', e);

package/dist/esm/view-visible/index.d.ts

@@ -0,0 +1,22 @@
+import { Elements, ViewScaleInfo, ViewSizeInfo, ViewRectInfo, VirtualFlatItemMap, ViewContext2D } from '@idraw/types';
+export declare function sortElementsViewVisiableInfoMap(elements: Elements, opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+    tempContext: ViewContext2D;
+}): {
+    virtualFlatItemMap: VirtualFlatItemMap;
+    visibleCount: number;
+    invisibleCount: number;
+};
+export declare function updateVirtualFlatItemMapStatus(virtualFlatItemMap: VirtualFlatItemMap, opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): {
+    virtualFlatItemMap: VirtualFlatItemMap;
+    visibleCount: number;
+    invisibleCount: number;
+};
+export declare function calcVisibleOriginCanvasRectInfo(opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): ViewRectInfo;

package/dist/esm/view-visible/index.js

@@ -0,0 +1,63 @@
+import { calcElementCenter } from '@idraw/util';
+import { elementsToVirtualFlatMap } from '../virtual-flat';
+export function sortElementsViewVisiableInfoMap(elements, opts) {
+    const { viewScaleInfo, viewSizeInfo, tempContext } = opts;
+    const visibleInfoMap = elementsToVirtualFlatMap(elements, { tempContext });
+    return updateVirtualFlatItemMapStatus(visibleInfoMap, { viewScaleInfo, viewSizeInfo });
+}
+function isRangeRectInfoCollide(info1, info2) {
+    const rect1MinX = Math.min(info1.topLeft.x, info1.topRight.x, info1.bottomLeft.x, info1.bottomRight.x);
+    const rect1MaxX = Math.max(info1.topLeft.x, info1.topRight.x, info1.bottomLeft.x, info1.bottomRight.x);
+    const rect1MinY = Math.min(info1.topLeft.y, info1.topRight.y, info1.bottomLeft.y, info1.bottomRight.y);
+    const rect1MaxY = Math.max(info1.topLeft.y, info1.topRight.y, info1.bottomLeft.y, info1.bottomRight.y);
+    const rect2MinX = Math.min(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x);
+    const rect2MaxX = Math.max(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x);
+    const rect2MinY = Math.min(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y);
+    const rect2MaxY = Math.max(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y);
+    if ((rect1MinX <= rect2MaxX && rect1MaxX >= rect2MinX && rect1MinY <= rect2MaxY && rect1MaxY >= rect2MinY) ||
+        (rect2MaxX <= rect1MaxY && rect2MaxX >= rect1MaxY && rect2MaxX <= rect1MaxY && rect2MaxX >= rect1MaxY)) {
+        return true;
+    }
+    return false;
+}
+export function updateVirtualFlatItemMapStatus(virtualFlatItemMap, opts) {
+    const canvasRectInfo = calcVisibleOriginCanvasRectInfo(opts);
+    let visibleCount = 0;
+    let invisibleCount = 0;
+    Object.keys(virtualFlatItemMap).forEach((uuid) => {
+        const info = virtualFlatItemMap[uuid];
+        info.isVisibleInView = isRangeRectInfoCollide(info.rangeRectInfo, canvasRectInfo);
+        info.isVisibleInView ? visibleCount++ : invisibleCount++;
+    });
+    return { virtualFlatItemMap, visibleCount, invisibleCount };
+}
+export function calcVisibleOriginCanvasRectInfo(opts) {
+    const { viewScaleInfo, viewSizeInfo } = opts;
+    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+    const { width, height } = viewSizeInfo;
+    const x = 0 - offsetLeft / scale;
+    const y = 0 - offsetTop / scale;
+    const w = width / scale;
+    const h = height / scale;
+    const center = calcElementCenter({ x, y, w, h });
+    const topLeft = { x, y };
+    const topRight = { x: x + w, y };
+    const bottomLeft = { x, y: y + h };
+    const bottomRight = { x: x + w, y: y + h };
+    const left = { x, y: center.y };
+    const top = { x: center.x, y };
+    const right = { x: x + w, y: center.y };
+    const bottom = { x: center.x, y: y + h };
+    const rectInfo = {
+        center,
+        topLeft,
+        topRight,
+        bottomLeft,
+        bottomRight,
+        left,
+        top,
+        right,
+        bottom
+    };
+    return rectInfo;
+}

package/dist/esm/virtual-flat/index.d.ts

@@ -0,0 +1,7 @@
+import { Element, Elements, VirtualFlatItemMap, VirtualFlatDetail, ViewContext2D } from '@idraw/types';
+export declare function calcVirtualFlatDetail(elem: Element, opts: {
+    tempContext: ViewContext2D;
+}): VirtualFlatDetail;
+export declare function elementsToVirtualFlatMap(elements: Elements, opts: {
+    tempContext: ViewContext2D;
+}): VirtualFlatItemMap;