@idraw/renderer 0.4.3 → 1.0.0-alpha.1

package/dist/esm/calculator.d.ts

@@ -1,4 +1,4 @@
-import type { Point, Data, Element, ElementType, ViewCalculator, ViewCalculatorOptions, ViewScaleInfo, ViewSizeInfo, ViewRectInfo, ModifyInfo, VirtualFlatItem } from '@idraw/types';
+import type { Point, Data, StrictMaterial, MaterialType, ViewCalculator, ViewCalculatorOptions, ViewScaleInfo, ViewSizeInfo, BoundingInfo, ModifyInfo, VirtualItem } from '@idraw/types';
 export declare class Calculator implements ViewCalculator {
     #private;
     constructor(opts: ViewCalculatorOptions);
@@ -6,17 +6,18 @@ export declare class Calculator implements ViewCalculator {
         ignore?: boolean;
     }): number;
     destroy(): void;
-    needRender(elem: Element<ElementType>): boolean;
-    getPointElement(p: Point, opts: {
+    needRender(mtrl: StrictMaterial<MaterialType>): boolean;
+    forceVisiable(id: string): void;
+    getPointMaterial(p: Point, opts: {
         data: Data;
         viewScaleInfo: ViewScaleInfo;
         viewSizeInfo: ViewSizeInfo;
     }): {
         index: number;
-        element: null | Element<ElementType>;
+        material: null | StrictMaterial<MaterialType>;
         groupQueueIndex: number;
     };
-    resetVirtualFlatItemMap(data: Data, opts: {
+    resetVirtualItemMap(data: Data, opts: {
         viewScaleInfo: ViewScaleInfo;
         viewSizeInfo: ViewSizeInfo;
     }): void;
@@ -24,21 +25,25 @@ export declare class Calculator implements ViewCalculator {
         viewScaleInfo: ViewScaleInfo;
         viewSizeInfo: ViewSizeInfo;
     }): void;
-    calcViewRectInfoFromOrigin(uuid: string, opts: {
+    calcViewBoundingInfoFromOrigin(id: string, opts: {
         checkVisible?: boolean;
         viewScaleInfo: ViewScaleInfo;
         viewSizeInfo: ViewSizeInfo;
-    }): ViewRectInfo | null;
-    calcViewRectInfoFromRange(uuid: string, opts: {
+    }): BoundingInfo | null;
+    calcViewBoundingInfoFromRange(id: string, opts: {
         checkVisible?: boolean;
         viewScaleInfo: ViewScaleInfo;
         viewSizeInfo: ViewSizeInfo;
-    }): ViewRectInfo | null;
-    modifyText(element: Element<'text'>): void;
-    modifyVirtualFlatItemMap(data: Data, opts: {
+    }): BoundingInfo | null;
+    modifyVirtualAttributes(material: StrictMaterial, opts: {
+        viewScaleInfo: ViewScaleInfo;
+        viewSizeInfo: ViewSizeInfo;
+        groupQueue: StrictMaterial<'group'>[];
+    }): void;
+    modifyVirtualItemMap(data: Data, opts: {
         modifyInfo: ModifyInfo;
         viewScaleInfo: ViewScaleInfo;
         viewSizeInfo: ViewSizeInfo;
     }): void;
-    getVirtualFlatItem(uuid: string): VirtualFlatItem | null;
+    getVirtualItem(id: string): VirtualItem | null;
 }

package/dist/esm/calculator.js

@@ -10,10 +10,9 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     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';
+import { is, getViewPointAtMaterial, Store, calcViewPoint, findMaterialFromListByPosition, getGroupQueueByMaterialPosition, calcMaterialBoundingInfo, boundingInfoToRangeBoundingInfo, } from '@idraw/util';
+import { sortMaterialsViewVisiableInfoMap, updateVirtualItemMapStatus } from './visible';
+import { calcVirtualAttributes } from './virtual';
 export class Calculator {
     constructor(opts) {
         _Calculator_opts.set(this, void 0);
@@ -21,10 +20,10 @@ export class Calculator {
         __classPrivateFieldSet(this, _Calculator_opts, opts, "f");
         __classPrivateFieldSet(this, _Calculator_store, new Store({
             defaultStorage: {
-                virtualFlatItemMap: {},
+                virtualItemMap: {},
                 visibleCount: 0,
-                invisibleCount: 0
-            }
+                invisibleCount: 0,
+            },
         }), "f");
     }
     toGridNum(num, opts) {
@@ -36,145 +35,161 @@ export class Calculator {
     destroy() {
         __classPrivateFieldSet(this, _Calculator_opts, null, "f");
     }
-    needRender(elem) {
-        const virtualFlatItemMap = __classPrivateFieldGet(this, _Calculator_store, "f").get('virtualFlatItemMap');
-        const info = virtualFlatItemMap[elem.uuid];
+    needRender(mtrl) {
+        const virtualItemMap = __classPrivateFieldGet(this, _Calculator_store, "f").get('virtualItemMap');
+        const info = virtualItemMap[mtrl.id];
         if (!info) {
             return true;
         }
         return info.isVisibleInView;
     }
-    getPointElement(p, opts) {
+    forceVisiable(id) {
+        const virtualItemMap = __classPrivateFieldGet(this, _Calculator_store, "f").get('virtualItemMap');
+        const info = virtualItemMap[id];
+        if (info) {
+            info.isVisibleInView = true;
+        }
+    }
+    getPointMaterial(p, opts) {
         const context2d = __classPrivateFieldGet(this, _Calculator_opts, "f").tempContext;
-        return getViewPointAtElement(p, Object.assign(Object.assign({}, opts), { context2d }));
+        return getViewPointAtMaterial(p, Object.assign(Object.assign({}, opts), { context2d }));
     }
-    resetVirtualFlatItemMap(data, opts) {
+    resetVirtualItemMap(data, opts) {
         if (data) {
-            const { virtualFlatItemMap, invisibleCount, visibleCount } = sortElementsViewVisiableInfoMap(data.elements, Object.assign(Object.assign({}, opts), {
-                tempContext: __classPrivateFieldGet(this, _Calculator_opts, "f").tempContext
+            const { virtualItemMap, invisibleCount, visibleCount } = sortMaterialsViewVisiableInfoMap(data.materials, 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('virtualItemMap', virtualItemMap);
             __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);
+        const { virtualItemMap, invisibleCount, visibleCount } = updateVirtualItemMapStatus(__classPrivateFieldGet(this, _Calculator_store, "f").get('virtualItemMap'), opts);
+        __classPrivateFieldGet(this, _Calculator_store, "f").set('virtualItemMap', virtualItemMap);
         __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)) {
+    calcViewBoundingInfoFromOrigin(id, opts) {
+        const infoData = __classPrivateFieldGet(this, _Calculator_store, "f").get('virtualItemMap')[id];
+        if (!(infoData === null || infoData === void 0 ? void 0 : infoData.boundingInfo)) {
             return null;
         }
         const { checkVisible, viewScaleInfo, viewSizeInfo } = opts;
-        const { center, left, right, bottom, top, topLeft, topRight, bottomLeft, bottomRight } = infoData.originRectInfo;
+        const { center, left, right, bottom, top, topLeft, topRight, bottomLeft, bottomRight } = infoData.boundingInfo;
         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)
+        const viewBoundingBox = {
+            center: calcViewPoint(center, calcOpts),
+            left: calcViewPoint(left, calcOpts),
+            right: calcViewPoint(right, calcOpts),
+            bottom: calcViewPoint(bottom, calcOpts),
+            top: calcViewPoint(top, calcOpts),
+            topLeft: calcViewPoint(topLeft, calcOpts),
+            topRight: calcViewPoint(topRight, calcOpts),
+            bottomLeft: calcViewPoint(bottomLeft, calcOpts),
+            bottomRight: calcViewPoint(bottomRight, calcOpts),
         };
-        return viewRectInfo;
+        return viewBoundingBox;
     }
-    calcViewRectInfoFromRange(uuid, opts) {
-        const infoData = __classPrivateFieldGet(this, _Calculator_store, "f").get('virtualFlatItemMap')[uuid];
-        if (!(infoData === null || infoData === void 0 ? void 0 : infoData.originRectInfo)) {
+    calcViewBoundingInfoFromRange(id, opts) {
+        const infoData = __classPrivateFieldGet(this, _Calculator_store, "f").get('virtualItemMap')[id];
+        if (!(infoData === null || infoData === void 0 ? void 0 : infoData.boundingInfo)) {
             return null;
         }
         const { checkVisible, viewScaleInfo, viewSizeInfo } = opts;
-        const { center, left, right, bottom, top, topLeft, topRight, bottomLeft, bottomRight } = infoData.rangeRectInfo;
+        const { center, left, right, bottom, top, topLeft, topRight, bottomLeft, bottomRight } = infoData.rangeBoundingInfo;
         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)
+        const info = {
+            center: calcViewPoint(center, calcOpts),
+            left: calcViewPoint(left, calcOpts),
+            right: calcViewPoint(right, calcOpts),
+            bottom: calcViewPoint(bottom, calcOpts),
+            top: calcViewPoint(top, calcOpts),
+            topLeft: calcViewPoint(topLeft, calcOpts),
+            topRight: calcViewPoint(topRight, calcOpts),
+            bottomLeft: calcViewPoint(bottomLeft, calcOpts),
+            bottomRight: calcViewPoint(bottomRight, calcOpts),
         };
-        return viewRectInfo;
+        return info;
     }
-    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);
+    modifyVirtualAttributes(material, opts) {
+        const { viewSizeInfo, groupQueue } = opts;
+        const virtualItemMap = __classPrivateFieldGet(this, _Calculator_store, "f").get('virtualItemMap');
+        const vItem = virtualItemMap[material.id];
+        const vAttributes = calcVirtualAttributes(material, {
+            tempContext: __classPrivateFieldGet(this, _Calculator_opts, "f").tempContext,
+            dpr: viewSizeInfo.devicePixelRatio,
+            groupQueue,
+        });
+        if (vAttributes) {
+            const boundingInfo = calcMaterialBoundingInfo(material, {
+                groupQueue,
+            });
+            const newVirtualItem = Object.assign(Object.assign(Object.assign({}, vItem), vAttributes), { boundingInfo, rangeBoundingInfo: is.angle(material.angle) ? boundingInfoToRangeBoundingInfo(boundingInfo) : boundingInfo });
+            virtualItemMap[material.id] = newVirtualItem;
+            __classPrivateFieldGet(this, _Calculator_store, "f").set('virtualItemMap', virtualItemMap);
         }
     }
-    modifyVirtualFlatItemMap(data, opts) {
+    modifyVirtualItemMap(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 list = data.materials;
+        const virtualItemMap = __classPrivateFieldGet(this, _Calculator_store, "f").get('virtualItemMap');
+        if (type === 'deleteMaterial') {
+            const { material } = content;
+            const ids = [];
             const _walk = (e) => {
-                uuids.push(e.uuid);
-                if (e.type === 'group' && Array.isArray(e.detail.children)) {
-                    e.detail.children.forEach((child) => {
+                ids.push(e.id);
+                if (e.type === 'group' && Array.isArray(e.children)) {
+                    e.children.forEach((child) => {
                         _walk(child);
                     });
                 }
             };
-            _walk(element);
-            uuids.forEach((uuid) => {
-                delete virtualFlatItemMap[uuid];
+            _walk(material);
+            ids.forEach((id) => {
+                delete virtualItemMap[id];
             });
-            __classPrivateFieldGet(this, _Calculator_store, "f").set('virtualFlatItemMap', virtualFlatItemMap);
+            __classPrivateFieldGet(this, _Calculator_store, "f").set('virtualItemMap', virtualItemMap);
         }
-        else if (type === 'addElement' || type === 'updateElement') {
+        else if (type === 'addMaterial' || type === 'updateMaterial') {
             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 });
+            const material = findMaterialFromListByPosition(position, data.materials);
+            const groupQueue = getGroupQueueByMaterialPosition(list, position);
+            if (material) {
+                if (type === 'updateMaterial' && material.type === 'group') {
+                    this.resetVirtualItemMap(data, { viewScaleInfo, viewSizeInfo });
                 }
                 else {
-                    const originRectInfo = calcElementOriginRectInfo(element, {
-                        groupQueue: groupQueue || []
+                    const boundingInfo = calcMaterialBoundingInfo(material, {
+                        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
+                    const newVirtualItem = Object.assign({ type: material.type, boundingInfo, rangeBoundingInfo: is.angle(material.angle) ? boundingInfoToRangeBoundingInfo(boundingInfo) : boundingInfo, isVisibleInView: true, position: [...position] }, calcVirtualAttributes(material, {
+                        tempContext: __classPrivateFieldGet(this, _Calculator_opts, "f").tempContext,
+                        dpr: viewSizeInfo.devicePixelRatio,
+                        groupQueue: groupQueue || [],
                     }));
-                    virtualFlatItemMap[element.uuid] = newVirtualFlatItem;
-                    __classPrivateFieldGet(this, _Calculator_store, "f").set('virtualFlatItemMap', virtualFlatItemMap);
-                    if (type === 'updateElement') {
+                    virtualItemMap[material.id] = newVirtualItem;
+                    __classPrivateFieldGet(this, _Calculator_store, "f").set('virtualItemMap', virtualItemMap);
+                    if (type === 'updateMaterial') {
                         this.updateVisiableStatus({ viewScaleInfo, viewSizeInfo });
                     }
                 }
             }
         }
-        else if (type === 'moveElement') {
-            this.resetVirtualFlatItemMap(data, { viewScaleInfo, viewSizeInfo });
+        else if (type === 'moveMaterial') {
+            this.resetVirtualItemMap(data, { viewScaleInfo, viewSizeInfo });
         }
     }
-    getVirtualFlatItem(uuid) {
-        const itemMap = __classPrivateFieldGet(this, _Calculator_store, "f").get('virtualFlatItemMap');
-        return itemMap[uuid] || null;
+    getVirtualItem(id) {
+        const itemMap = __classPrivateFieldGet(this, _Calculator_store, "f").get('virtualItemMap');
+        return itemMap[id] || null;
     }
 }
 _Calculator_opts = new WeakMap(), _Calculator_store = new WeakMap();

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

@@ -0,0 +1,19 @@
+import type { Point, Material, MaterialSize, RendererDrawMaterialOptions, ViewContext2D, ViewScaleInfo, ViewSizeInfo, ViewCalculator } from '@idraw/types';
+export declare function drawBase(ctx: ViewContext2D, mtrl: Material, opts: RendererDrawMaterialOptions): void;
+export declare function drawShadow(ctx: ViewContext2D, viewMtrl: Material, opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+    tempContext: ViewContext2D;
+    path2d: Path2D;
+}): void;
+export declare function drawClipPath(ctx: ViewContext2D, mtrl: Material, opts: {
+    path2d?: Path2D;
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+    renderContent?: () => void;
+    calculator: ViewCalculator;
+}): void;
+export declare function rotateViewMaterial(ctx: ViewContext2D, mtrl: Material, opts: RendererDrawMaterialOptions, callback: (e: {
+    viewWorldCenter: Point;
+    viewWorldSize: MaterialSize;
+}) => void): void;

package/dist/esm/draw/base.js

@@ -0,0 +1,141 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { scalePathCommands, shiftPathCommands, convertPathCommandsToStr, getDefaultMaterialAttributes, omit, calcViewPoint, calcViewMaterialSize, rotateByCenter, is, } from '@idraw/util';
+import { createColor } from './color';
+let defaultAttrs = getDefaultMaterialAttributes();
+defaultAttrs = omit(defaultAttrs, ['fill']);
+export function drawBase(ctx, mtrl, opts) {
+    const { viewScaleInfo, viewSizeInfo, calculator } = opts;
+    const { opacity, fill, fillOpacity, fillRule, stroke, strokeWidth, strokeOpacity, strokeLinecap, strokeLinejoin, strokeDasharray, strokeDashoffset, strokeMiterlimit, } = Object.assign(Object.assign({}, defaultAttrs), mtrl);
+    const { scale, offsetLeft, offsetTop } = viewScaleInfo;
+    const { devicePixelRatio } = viewSizeInfo;
+    const virtualAttributes = calculator.getVirtualItem(mtrl.id);
+    const { commands, worldCenter } = virtualAttributes;
+    const { width, height } = mtrl;
+    let cmds = commands;
+    cmds = scalePathCommands(cmds, scale, scale);
+    cmds = shiftPathCommands(cmds, (offsetLeft + (worldCenter.x - width / 2) * scale) * devicePixelRatio, (offsetTop + (worldCenter.y - height / 2) * scale) * devicePixelRatio);
+    const originGlobalAlpha = ctx.globalAlpha;
+    const pathStr = convertPathCommandsToStr(cmds);
+    const path2d = new Path2D(pathStr);
+    drawShadow(ctx, mtrl, Object.assign(Object.assign({}, opts), { path2d }));
+    drawClipPath(ctx, mtrl, {
+        path2d,
+        viewScaleInfo,
+        viewSizeInfo,
+        calculator,
+        renderContent: () => {
+            if (fill) {
+                const viewMaterialSize = calcViewMaterialSize(mtrl, { viewScaleInfo });
+                if (typeof fillOpacity === 'number' && fillOpacity > 0) {
+                    ctx.globalAlpha = originGlobalAlpha * fillOpacity * opacity;
+                }
+                ctx.fillStyle = createColor(ctx, fill, { viewMaterialSize, viewScaleInfo, opacity: mtrl.opacity || 1 });
+                ctx.fill(path2d, fillRule);
+                ctx.globalAlpha = originGlobalAlpha;
+            }
+            if (typeof strokeWidth === 'number' && strokeWidth > 0) {
+                if (typeof strokeOpacity === 'number' && strokeOpacity > 0) {
+                    ctx.globalAlpha = originGlobalAlpha * strokeOpacity * opacity;
+                }
+                ctx.lineCap = strokeLinecap;
+                ctx.lineJoin = strokeLinejoin;
+                ctx.lineDashOffset = strokeDashoffset;
+                ctx.miterLimit = strokeMiterlimit;
+                if (Array.isArray(strokeDasharray)) {
+                    const lineDash = strokeDasharray.map((dash) => scale * dash);
+                    ctx.setLineDash(lineDash);
+                }
+                ctx.lineWidth = strokeWidth * scale;
+                ctx.strokeStyle = stroke;
+                ctx.stroke(path2d);
+                ctx.setLineDash([]);
+                ctx.lineCap = defaultAttrs.strokeLinecap;
+                ctx.lineJoin = defaultAttrs.strokeLinejoin;
+                ctx.lineDashOffset = defaultAttrs.strokeDashoffset;
+                ctx.miterLimit = defaultAttrs.strokeMiterlimit;
+                ctx.globalAlpha = originGlobalAlpha;
+            }
+        },
+    });
+}
+export function drawShadow(ctx, viewMtrl, opts) {
+    const detail = __rest(viewMtrl, []);
+    const { viewScaleInfo, viewSizeInfo, tempContext, path2d } = opts;
+    const { width, height } = viewSizeInfo;
+    const { shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur } = detail;
+    if (is.number(shadowBlur) && shadowColor) {
+        tempContext.clearRect(0, 0, tempContext.canvas.width, tempContext.canvas.height);
+        tempContext.save();
+        tempContext.shadowColor = shadowColor;
+        tempContext.shadowOffsetX = (shadowOffsetX || 0) * viewScaleInfo.scale;
+        tempContext.shadowOffsetY = (shadowOffsetY || 0) * viewScaleInfo.scale;
+        tempContext.shadowBlur = (shadowBlur || 0) * viewScaleInfo.scale;
+        tempContext.fillStyle = '#ffffff';
+        tempContext.fill(path2d);
+        tempContext.restore();
+        tempContext.save();
+        tempContext.globalCompositeOperation = 'destination-out';
+        tempContext.fillStyle = '#ffffff';
+        tempContext.fill(path2d);
+        tempContext.restore();
+        ctx.drawImage(tempContext.canvas, 0, 0, width, height);
+        tempContext.clearRect(0, 0, tempContext.canvas.width, tempContext.canvas.height);
+    }
+}
+export function drawClipPath(ctx, mtrl, opts) {
+    const { renderContent, calculator, viewScaleInfo, viewSizeInfo } = opts;
+    if (mtrl.overflow === 'hidden') {
+        let path2d = opts.path2d;
+        if (!path2d) {
+            const { scale, offsetLeft, offsetTop } = viewScaleInfo;
+            const { devicePixelRatio } = viewSizeInfo;
+            const virtualAttributes = calculator.getVirtualItem(mtrl.id);
+            const { commands, worldCenter } = virtualAttributes;
+            const { width, height } = mtrl;
+            let cmds = commands;
+            cmds = scalePathCommands(cmds, scale, scale);
+            cmds = shiftPathCommands(cmds, (offsetLeft + (worldCenter.x - width / 2) * scale) * devicePixelRatio, (offsetTop + (worldCenter.y - height / 2) * scale) * devicePixelRatio);
+            const pathStr = convertPathCommandsToStr(cmds);
+            path2d = new Path2D(pathStr);
+        }
+        ctx.save();
+        ctx.clip(path2d, 'nonzero');
+        renderContent === null || renderContent === void 0 ? void 0 : renderContent();
+        ctx.restore();
+    }
+    else {
+        renderContent === null || renderContent === void 0 ? void 0 : renderContent();
+    }
+}
+export function rotateViewMaterial(ctx, mtrl, opts, callback) {
+    const { viewScaleInfo, calculator } = opts;
+    const virtualAttributes = calculator === null || calculator === void 0 ? void 0 : calculator.getVirtualItem(mtrl.id);
+    if (virtualAttributes) {
+        const { worldAngle, worldCenter } = virtualAttributes;
+        const viewWorldCenter = calcViewPoint(worldCenter, { viewScaleInfo });
+        const { scale } = viewScaleInfo;
+        rotateByCenter(ctx, worldAngle, viewWorldCenter, () => {
+            const width = mtrl.width * scale;
+            const height = mtrl.height * scale;
+            const viewWorldSize = {
+                x: viewWorldCenter.x - width / 2,
+                y: viewWorldCenter.y - height / 2,
+                width,
+                height,
+            };
+            callback({ viewWorldCenter, viewWorldSize });
+        });
+    }
+    else {
+    }
+}

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

@@ -1,28 +1,2 @@
-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;
-    calcElemSize: ElementSize;
-    pattern?: string | CanvasPattern | null;
-    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;
-    renderContent: () => void;
-}): void;
+import { StrictMaterial } from '@idraw/types';
+export declare function getOpacity(mtrl: StrictMaterial): number;