@idraw/renderer 0.4.0-beta.8 → 0.4.0-rc.0

package/README.md

@@ -64,5 +64,5 @@ renderer.on('drawFrameComplete', (e) => {
 
 ## Documents
 
-- [Documents](https://idraw.js.org/docs/en/) | [中文文档](https://idraw.js.org/docs/zh/) 
-- [Online Playground](https://idraw.js.org/playground/) | [在线API示例](https://idraw.js.org/playground/)
+- [Documents](https://idrawjs.com/docs/en/) | [中文文档](https://idrawjs.com/docs/zh/) 
+- [Online Playground](https://idrawjs.com/playground/) | [在线API示例](https://idrawjs.com/playground/)

package/dist/esm/calculator.d.ts

@@ -0,0 +1,44 @@
+import type { Point, Data, Element, ElementType, ViewCalculator, ViewCalculatorOptions, ViewScaleInfo, ViewSizeInfo, ViewRectInfo, ModifyInfo, 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;
+    modifyText(element: Element<'text'>): void;
+    modifyVirtualFlatItemMap(data: Data, opts: {
+        modifyInfo: ModifyInfo;
+        viewScaleInfo: ViewScaleInfo;
+        viewSizeInfo: ViewSizeInfo;
+    }): void;
+    getVirtualFlatItem(uuid: string): VirtualFlatItem | null;
+}

package/dist/esm/calculator.js

@@ -0,0 +1,180 @@
+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';
+import { calcVirtualTextDetail } from './virtual-flat/text';
+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;
+    }
+    modifyText(element) {
+        const virtualFlatItemMap = __classPrivateFieldGet(this, _Calculator_store, "f").get('virtualFlatItemMap');
+        const flatItem = virtualFlatItemMap[element.uuid];
+        if (element && element.type === 'text') {
+            const newVirtualFlatItem = Object.assign(Object.assign({}, flatItem), calcVirtualTextDetail(element, {
+                tempContext: __classPrivateFieldGet(this, _Calculator_opts, "f").tempContext
+            }));
+            virtualFlatItemMap[element.uuid] = newVirtualFlatItem;
+            __classPrivateFieldGet(this, _Calculator_store, "f").set('virtualFlatItemMap', virtualFlatItemMap);
+        }
+    }
+    modifyVirtualFlatItemMap(data, opts) {
+        const { modifyInfo, viewScaleInfo, viewSizeInfo } = opts;
+        const { type, content } = modifyInfo;
+        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,14 +1,26 @@
 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<ElementType>, opts: {
-    originElem: Element<ElementType>;
+export declare function drawBox(ctx: ViewContext2D, viewElem: Element, opts: {
+    originElem: Element;
     calcElemSize: ElementSize;
     pattern?: string | CanvasPattern | null;
-    renderContent: () => void;
+    renderContent?: () => void;
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
     parentOpacity: number;
 }): void;
+export declare function drawBoxBackground(ctx: ViewContext2D, viewElem: Element<ElementType>, opts: {
+    pattern?: string | CanvasPattern | null;
+    viewScaleInfo: ViewScaleInfo;
+    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;
     viewSizeInfo: ViewSizeInfo;

package/dist/esm/draw/box.js

@@ -13,23 +13,41 @@ export function drawBox(ctx, viewElem, opts) {
     const { pattern, renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts || {};
     const { parentOpacity } = opts;
     const opacity = getOpacity(originElem) * parentOpacity;
-    drawClipPath(ctx, viewElem, {
-        originElem,
-        calcElemSize,
-        viewScaleInfo,
-        viewSizeInfo,
-        renderContent: () => {
-            ctx.globalAlpha = opacity;
-            drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
-            renderContent === null || renderContent === void 0 ? void 0 : renderContent();
-            drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
-            ctx.globalAlpha = parentOpacity;
+    const { clipPath, clipPathStrokeColor, clipPathStrokeWidth } = originElem.detail;
+    const mainRender = () => {
+        ctx.globalAlpha = opacity;
+        drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
+        renderContent === null || renderContent === void 0 ? void 0 : renderContent();
+        drawBoxBorder(ctx, viewElem, { originElem, viewScaleInfo, viewSizeInfo });
+        ctx.globalAlpha = parentOpacity;
+    };
+    if (clipPath) {
+        drawClipPath(ctx, viewElem, {
+            originElem,
+            calcElemSize,
+            viewScaleInfo,
+            viewSizeInfo,
+            renderContent: () => {
+                mainRender();
+            }
+        });
+        if (typeof clipPathStrokeWidth === 'number' && clipPathStrokeWidth > 0 && clipPathStrokeColor) {
+            drawClipPathStroke(ctx, viewElem, {
+                originElem,
+                calcElemSize,
+                viewScaleInfo,
+                viewSizeInfo,
+                parentOpacity
+            });
         }
-    });
+    }
+    else {
+        mainRender();
+    }
 }
 function drawClipPath(ctx, viewElem, opts) {
-    const { renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts;
-    const totalScale = viewScaleInfo.scale * viewSizeInfo.devicePixelRatio;
+    const { renderContent, originElem, calcElemSize, viewSizeInfo } = opts;
+    const totalScale = viewSizeInfo.devicePixelRatio;
     const { clipPath } = (originElem === null || originElem === void 0 ? void 0 : originElem.detail) || {};
     if (clipPath && calcElemSize && clipPath.commands) {
         const { x, y, w, h } = calcElemSize;
@@ -45,7 +63,7 @@ function drawClipPath(ctx, viewElem, opts) {
         ctx.scale(totalScale * scaleW, totalScale * scaleH);
         const pathStr = generateSVGPath(clipPath.commands || []);
         const path2d = new Path2D(pathStr);
-        ctx.clip(path2d);
+        ctx.clip(path2d, 'nonzero');
         ctx.translate(0 - internalX, 0 - internalY);
         ctx.setTransform(1, 0, 0, 1, 0, 0);
         rotateElement(ctx, Object.assign({}, viewElem), () => {
@@ -57,7 +75,45 @@ function drawClipPath(ctx, viewElem, opts) {
         renderContent === null || renderContent === void 0 ? void 0 : renderContent();
     }
 }
-function drawBoxBackground(ctx, viewElem, opts) {
+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) {
+        const { x, y, w, h } = calcElemSize;
+        const { originW, originH, originX, originY } = clipPath;
+        const scaleW = w / originW;
+        const scaleH = h / originH;
+        const viewOriginX = originX * scaleW;
+        const viewOriginY = originY * scaleH;
+        const internalX = x - viewOriginX;
+        const internalY = y - viewOriginY;
+        ctx.save();
+        ctx.globalAlpha = parentOpacity;
+        ctx.translate(internalX, internalY);
+        ctx.scale(totalScale * scaleW, totalScale * scaleH);
+        const pathStr = generateSVGPath(clipPath.commands || []);
+        const path2d = new Path2D(pathStr);
+        ctx.strokeStyle = clipPathStrokeColor;
+        ctx.lineWidth = clipPathStrokeWidth;
+        ctx.stroke(path2d);
+        ctx.translate(0 - internalX, 0 - internalY);
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        rotateElement(ctx, Object.assign({}, viewElem), () => {
+            renderContent === null || renderContent === void 0 ? void 0 : renderContent();
+        });
+        ctx.restore();
+    }
+    else {
+        renderContent === null || renderContent === void 0 ? void 0 : renderContent();
+    }
+}
+export function drawBoxBackground(ctx, viewElem, opts) {
     var _a, _b;
     const { pattern, viewScaleInfo, viewSizeInfo } = opts;
     const transform = [];
@@ -112,13 +168,13 @@ function drawBoxBackground(ctx, viewElem, opts) {
                 }
             }
         }
-        ctx.fill();
+        ctx.fill('nonzero');
         if (transform && transform.length > 0) {
             ctx.setTransform(1, 0, 0, 1, 0, 0);
         }
     }
 }
-function drawBoxBorder(ctx, viewElem, opts) {
+export function drawBoxBorder(ctx, viewElem, opts) {
     if (viewElem.detail.borderWidth === 0) {
         return;
     }
@@ -131,12 +187,17 @@ 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;
@@ -145,11 +206,12 @@ 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;
@@ -234,12 +296,6 @@ 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) => {
@@ -272,6 +328,12 @@ export function drawBoxShadow(ctx, viewElem, opts) {
         ctx.restore();
     }
     else {
+        ctx.save();
+        ctx.shadowColor = 'transparent';
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+        ctx.shadowBlur = 0;
         renderContent();
+        ctx.restore();
     }
 }

package/dist/esm/draw/circle.js

@@ -1,9 +1,10 @@
-import { rotateElement } from '@idraw/util';
+import { rotateElement, calcViewElementSize } from '@idraw/util';
 import { createColorStyle } from './color';
 import { drawBoxShadow, getOpacity } from './box';
 export function drawCircle(ctx, elem, opts) {
     const { detail, angle } = elem;
-    const { background = '#000000', borderColor = '#000000', boxSizing, borderWidth = 0 } = detail;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { background = '#000000', borderColor = '#000000', boxSizing, borderWidth = 0, borderDash } = detail;
     let bw = 0;
     if (typeof borderWidth === 'number' && borderWidth > 0) {
         bw = borderWidth;
@@ -11,8 +12,8 @@ export function drawCircle(ctx, elem, opts) {
     else if (Array.isArray(borderWidth) && typeof borderWidth[0] === 'number' && borderWidth[0] > 0) {
         bw = borderWidth[0];
     }
-    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x, y, w, h } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo)) || elem;
+    bw = bw * viewScaleInfo.scale;
+    const { x, y, w, h } = calcViewElementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, { viewScaleInfo }) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
     rotateElement(ctx, { x, y, w, h, angle }, () => {
         drawBoxShadow(ctx, viewElem, {
@@ -23,10 +24,10 @@ export function drawCircle(ctx, elem, opts) {
                 let b = h / 2;
                 const centerX = x + a;
                 const centerY = y + b;
+                const radiusA = a;
+                const radiusB = b;
                 if (bw > 0) {
-                    if (boxSizing === 'border-box') {
-                        a = a - bw;
-                        b = b - bw;
+                    if (boxSizing === 'content-box') {
                     }
                     else if (boxSizing === 'center-line') {
                         a = a - bw / 2;
@@ -37,29 +38,36 @@ export function drawCircle(ctx, elem, opts) {
                         b = b - bw;
                     }
                 }
-                const opacity = getOpacity(viewElem) * parentOpacity;
-                ctx.globalAlpha = opacity;
-                if (typeof borderWidth === 'number' && borderWidth > 0) {
-                    const ba = borderWidth / 2 + a;
-                    const bb = borderWidth / 2 + b;
+                if (a >= 0 && b >= 0) {
+                    const opacity = getOpacity(viewElem) * parentOpacity;
+                    ctx.globalAlpha = opacity;
                     ctx.beginPath();
-                    ctx.strokeStyle = borderColor;
-                    ctx.lineWidth = borderWidth;
-                    ctx.circle(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
+                    const fillStyle = createColorStyle(ctx, background, {
+                        viewElementSize: { x, y, w, h },
+                        viewScaleInfo,
+                        opacity: ctx.globalAlpha
+                    });
+                    ctx.fillStyle = fillStyle;
+                    ctx.circle(centerX, centerY, radiusA, radiusB, 0, 0, 2 * Math.PI);
                     ctx.closePath();
-                    ctx.stroke();
+                    ctx.fill('nonzero');
+                    ctx.globalAlpha = parentOpacity;
+                    if (typeof bw === 'number' && bw > 0) {
+                        const ba = bw / 2 + a;
+                        const bb = bw / 2 + b;
+                        ctx.beginPath();
+                        if (borderDash) {
+                            const lineDash = borderDash.map((n) => n * viewScaleInfo.scale);
+                            ctx.setLineDash(lineDash);
+                        }
+                        ctx.strokeStyle = borderColor;
+                        ctx.lineWidth = bw;
+                        ctx.circle(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
+                        ctx.closePath();
+                        ctx.stroke();
+                        ctx.setLineDash([]);
+                    }
                 }
-                ctx.beginPath();
-                const fillStyle = createColorStyle(ctx, background, {
-                    viewElementSize: { x, y, w, h },
-                    viewScaleInfo,
-                    opacity: ctx.globalAlpha
-                });
-                ctx.fillStyle = fillStyle;
-                ctx.circle(centerX, centerY, a, b, 0, 0, 2 * Math.PI);
-                ctx.closePath();
-                ctx.fill();
-                ctx.globalAlpha = parentOpacity;
             }
         });
     });

package/dist/esm/draw/elements.js

@@ -11,7 +11,7 @@ export function drawElementList(ctx, data, opts) {
             detail: Object.assign(Object.assign({}, defaultDetail), element === null || element === void 0 ? void 0 : element.detail)
         });
         if (opts.forceDrawAll !== true) {
-            if (!((_a = opts.calculator) === null || _a === void 0 ? void 0 : _a.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo))) {
+            if (!((_a = opts.calculator) === null || _a === void 0 ? void 0 : _a.needRender(elem))) {
                 continue;
             }
         }

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

@@ -0,0 +1,2 @@
+import type { RendererDrawElementOptions, ViewContext2D, ElementGlobal } from '@idraw/types';
+export declare function drawGlobalBackground(ctx: ViewContext2D, global: ElementGlobal | undefined, opts: RendererDrawElementOptions): void;

package/dist/esm/draw/global.js

@@ -0,0 +1,9 @@
+export function drawGlobalBackground(ctx, global, opts) {
+    if (typeof (global === null || global === void 0 ? void 0 : global.background) === 'string') {
+        const { viewSizeInfo } = opts;
+        const { width, height } = viewSizeInfo;
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = global.background;
+        ctx.fillRect(0, 0, width, height);
+    }
+}

package/dist/esm/draw/group.js

@@ -1,4 +1,4 @@
-import { rotateElement, calcViewBoxSize } from '@idraw/util';
+import { rotateElement, calcViewBoxSize, calcViewElementSize } from '@idraw/util';
 import { drawCircle } from './circle';
 import { drawRect } from './rect';
 import { drawImage } from './image';
@@ -7,11 +7,21 @@ import { drawSVG } from './svg';
 import { drawHTML } from './html';
 import { drawBox, drawBoxShadow, getOpacity } from './box';
 import { drawPath } from './path';
+const visiableMinSize = 0.4;
 export function drawElement(ctx, elem, opts) {
-    var _a;
+    var _a, _b, _c;
     if (((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
         return;
     }
+    const { w, h } = elem;
+    const { scale } = opts.viewScaleInfo;
+    if ((scale < 1 && (w * scale < visiableMinSize || h * scale < visiableMinSize)) || opts.parentOpacity === 0) {
+        return;
+    }
+    const { overrideElementMap } = opts;
+    if ((_c = (_b = overrideElementMap === null || overrideElementMap === void 0 ? void 0 : overrideElementMap[elem.uuid]) === null || _b === void 0 ? void 0 : _b.operations) === null || _c === void 0 ? void 0 : _c.invisible) {
+        return;
+    }
     try {
         switch (elem.type) {
             case 'rect': {
@@ -57,8 +67,8 @@ export function drawElement(ctx, elem, opts) {
     }
 }
 export function drawGroup(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
+    const { x, y, w, h, angle } = calcViewElementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, { viewScaleInfo }) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
     rotateElement(ctx, { x, y, w, h, angle }, () => {
         ctx.globalAlpha = getOpacity(elem) * parentOpacity;
@@ -87,8 +97,8 @@ export function drawGroup(ctx, elem, opts) {
                             ctx.arcTo(x, y + h, x, y, radiusList[3]);
                             ctx.arcTo(x, y, x + w, y, radiusList[0]);
                             ctx.closePath();
-                            ctx.fill();
-                            ctx.clip();
+                            ctx.fill('nonzero');
+                            ctx.clip('nonzero');
                         }
                         if (Array.isArray(elem.detail.children)) {
                             const { parentElementSize: parentSize } = opts;
@@ -107,7 +117,7 @@ export function drawGroup(ctx, elem, opts) {
                                     y: newParentSize.y + child.y
                                 });
                                 if (opts.forceDrawAll !== true) {
-                                    if (!(calculator === null || calculator === void 0 ? void 0 : calculator.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo))) {
+                                    if (!(calculator === null || calculator === void 0 ? void 0 : calculator.needRender(child))) {
                                         continue;
                                     }
                                 }

package/dist/esm/draw/html.js

@@ -1,11 +1,11 @@
-import { rotateElement } from '@idraw/util';
+import { rotateElement, calcViewElementSize } from '@idraw/util';
 import { getOpacity } from './box';
 export function drawHTML(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
-    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, parentOpacity } = opts;
+    const { x, y, w, h, angle } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
     rotateElement(ctx, { x, y, w, h, angle }, () => {
-        if (!content) {
+        if (!content && !opts.loader.isDestroyed()) {
             opts.loader.load(elem, opts.elementAssets || {});
         }
         if (elem.type === 'html' && content) {