@idraw/renderer 0.4.2 → 1.0.0-alpha.1

package/dist/esm/draw/group.js

@@ -1,60 +1,65 @@
-import { rotateElement, calcViewBoxSize, calcViewElementSize } from '@idraw/util';
-import { drawCircle } from './circle';
 import { drawRect } from './rect';
+import { drawCircle } from './circle';
+import { drawEllipse } from './ellipse';
 import { drawImage } from './image';
 import { drawText } from './text';
-import { drawSVG } from './svg';
-import { drawHTML } from './html';
-import { drawBox, drawBoxShadow, getOpacity } from './box';
+import { drawSVGCode } from './svg-code';
+import { drawForeignObject } from './foreign-object';
 import { drawPath } from './path';
+import { drawBase, rotateViewMaterial } from './base';
 const visiableMinSize = 0.4;
-export function drawElement(ctx, elem, opts) {
+export function drawMaterial(ctx, mtrl, opts) {
     var _a, _b, _c;
-    if (((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
+    if (((_a = mtrl === null || mtrl === void 0 ? void 0 : mtrl.operations) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
         return;
     }
-    const { w, h } = elem;
+    const { width, height } = mtrl;
     const { scale } = opts.viewScaleInfo;
-    if ((scale < 1 && (w * scale < visiableMinSize || h * scale < visiableMinSize)) || opts.parentOpacity === 0) {
+    if ((scale < 1 && (width * scale < visiableMinSize || height * 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) {
+    const { overrideMaterialMap } = opts;
+    if ((_c = (_b = overrideMaterialMap === null || overrideMaterialMap === void 0 ? void 0 : overrideMaterialMap[mtrl.id]) === null || _b === void 0 ? void 0 : _b.operations) === null || _c === void 0 ? void 0 : _c.invisible) {
         return;
     }
     try {
-        switch (elem.type) {
+        switch (mtrl.type) {
             case 'rect': {
-                drawRect(ctx, elem, opts);
+                drawRect(ctx, mtrl, opts);
                 break;
             }
             case 'circle': {
-                drawCircle(ctx, elem, opts);
+                drawCircle(ctx, mtrl, opts);
+                break;
+            }
+            case 'ellipse': {
+                drawEllipse(ctx, mtrl, opts);
                 break;
             }
             case 'text': {
-                drawText(ctx, elem, opts);
+                drawText(ctx, mtrl, opts);
                 break;
             }
             case 'image': {
-                drawImage(ctx, elem, opts);
+                drawImage(ctx, mtrl, opts);
                 break;
             }
-            case 'svg': {
-                drawSVG(ctx, elem, opts);
+            case 'svgCode': {
+                drawSVGCode(ctx, mtrl, opts);
                 break;
             }
-            case 'html': {
-                drawHTML(ctx, elem, opts);
+            case 'foreignObject': {
+                drawForeignObject(ctx, mtrl, opts);
                 break;
             }
             case 'path': {
-                drawPath(ctx, elem, opts);
+                drawPath(ctx, mtrl, opts);
                 break;
             }
             case 'group': {
-                const assets = Object.assign(Object.assign({}, (opts.elementAssets || {})), (elem.detail.assets || {}));
-                drawGroup(ctx, elem, Object.assign(Object.assign({}, opts), { elementAssets: assets }));
+                const assets = Object.assign(Object.assign({}, (opts.materialAssets || {})), (mtrl.assets || {}));
+                drawGroup(ctx, mtrl, Object.assign(Object.assign({}, opts), { materialAssets: assets }));
                 break;
             }
             default: {
@@ -66,76 +71,37 @@ export function drawElement(ctx, elem, opts) {
         console.error(err);
     }
 }
-export function drawGroup(ctx, elem, opts) {
-    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;
-        drawBoxShadow(ctx, viewElem, {
-            viewScaleInfo,
-            viewSizeInfo,
-            renderContent: () => {
-                drawBox(ctx, viewElem, {
-                    originElem: elem,
-                    calcElemSize: { x, y, w, h, angle },
-                    viewScaleInfo,
-                    viewSizeInfo,
-                    parentOpacity,
-                    renderContent: () => {
-                        const { x, y, w, h, radiusList } = calcViewBoxSize(viewElem, {
-                            viewScaleInfo,
-                            viewSizeInfo
-                        });
-                        if (elem.detail.overflow === 'hidden') {
-                            ctx.save();
-                            ctx.fillStyle = 'transparent';
-                            ctx.beginPath();
-                            ctx.moveTo(x + radiusList[0], y);
-                            ctx.arcTo(x + w, y, x + w, y + h, radiusList[1]);
-                            ctx.arcTo(x + w, y + h, x, y + h, radiusList[2]);
-                            ctx.arcTo(x, y + h, x, y, radiusList[3]);
-                            ctx.arcTo(x, y, x + w, y, radiusList[0]);
-                            ctx.closePath();
-                            ctx.fill('nonzero');
-                            ctx.clip('nonzero');
-                        }
-                        if (Array.isArray(elem.detail.children)) {
-                            const { parentElementSize: parentSize } = opts;
-                            const newParentSize = {
-                                x: parentSize.x + elem.x,
-                                y: parentSize.y + elem.y,
-                                w: elem.w || parentSize.w,
-                                h: elem.h || parentSize.h,
-                                angle: elem.angle
-                            };
-                            const { calculator } = opts;
-                            for (let i = 0; i < elem.detail.children.length; i++) {
-                                let child = elem.detail.children[i];
-                                child = Object.assign(Object.assign({}, child), {
-                                    x: newParentSize.x + child.x,
-                                    y: newParentSize.y + child.y
-                                });
-                                if (opts.forceDrawAll !== true) {
-                                    if (!(calculator === null || calculator === void 0 ? void 0 : calculator.needRender(child))) {
-                                        continue;
-                                    }
-                                }
-                                try {
-                                    drawElement(ctx, child, Object.assign(Object.assign({}, opts), { parentOpacity: parentOpacity * getOpacity(elem) }));
-                                }
-                                catch (err) {
-                                    console.error(err);
-                                }
-                            }
-                        }
-                        if (elem.detail.overflow === 'hidden') {
-                            ctx.restore();
-                        }
-                    }
-                });
-            }
-        });
-        ctx.globalAlpha = parentOpacity;
+export function drawGroup(ctx, mtrl, opts) {
+    rotateViewMaterial(ctx, mtrl, opts, () => {
+        drawBase(ctx, mtrl, opts);
     });
+    if (Array.isArray(mtrl.children)) {
+        const { parentMaterialSize: parentSize } = opts;
+        const newParentSize = {
+            x: parentSize.x + mtrl.x,
+            y: parentSize.y + mtrl.y,
+            width: mtrl.width || parentSize.width,
+            height: mtrl.height || parentSize.height,
+            angle: mtrl.angle,
+        };
+        const { calculator } = opts;
+        for (let i = 0; i < mtrl.children.length; i++) {
+            let child = mtrl.children[i];
+            child = Object.assign(Object.assign({}, child), {
+                x: newParentSize.x + child.x,
+                y: newParentSize.y + child.y,
+            });
+            if (opts.forceDrawAll !== true) {
+                if (!(calculator === null || calculator === void 0 ? void 0 : calculator.needRender(child))) {
+                    continue;
+                }
+            }
+            try {
+                drawMaterial(ctx, child, opts);
+            }
+            catch (err) {
+                console.error(err);
+            }
+        }
+    }
 }

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

@@ -1,2 +1,2 @@
-import type { Element, RendererDrawElementOptions, ViewContext2D } from '@idraw/types';
-export declare function drawImage(ctx: ViewContext2D, elem: Element<'image'>, opts: RendererDrawElementOptions): void;
+import type { StrictMaterial, RendererDrawMaterialOptions, ViewContext2D } from '@idraw/types';
+export declare function drawImage(ctx: ViewContext2D, mtrl: StrictMaterial<'image'>, opts: RendererDrawMaterialOptions): void;

package/dist/esm/draw/image.js

@@ -1,90 +1,74 @@
-import { rotateElement, calcViewBoxSize, calcViewElementSize } from '@idraw/util';
-import { drawBox, drawBoxShadow, getOpacity } from './box';
-export function drawImage(ctx, elem, opts) {
-    const content = opts.loader.getContent(elem);
-    const { viewScaleInfo, viewSizeInfo, parentOpacity } = 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 }, () => {
-        drawBoxShadow(ctx, viewElem, {
-            viewScaleInfo,
-            viewSizeInfo,
-            renderContent: () => {
-                drawBox(ctx, viewElem, {
-                    originElem: elem,
-                    calcElemSize: { x, y, w, h, angle },
-                    viewScaleInfo,
-                    viewSizeInfo,
-                    parentOpacity,
-                    renderContent: () => {
-                        if (!content && !opts.loader.isDestroyed()) {
-                            opts.loader.load(elem, opts.elementAssets || {});
-                        }
-                        if (elem.type === 'image' && content) {
-                            ctx.globalAlpha = getOpacity(elem) * parentOpacity;
-                            const { x, y, w, h, radiusList } = calcViewBoxSize(viewElem, {
-                                viewScaleInfo,
-                                viewSizeInfo
-                            });
-                            const { detail } = elem;
-                            const { scaleMode, originW = 0, originH = 0 } = detail;
-                            const imageW = ctx.$undoPixelRatio(originW);
-                            const imageH = ctx.$undoPixelRatio(originH);
-                            ctx.save();
-                            ctx.fillStyle = 'transparent';
-                            ctx.beginPath();
-                            ctx.moveTo(x + radiusList[0], y);
-                            ctx.arcTo(x + w, y, x + w, y + h, radiusList[1]);
-                            ctx.arcTo(x + w, y + h, x, y + h, radiusList[2]);
-                            ctx.arcTo(x, y + h, x, y, radiusList[3]);
-                            ctx.arcTo(x, y, x + w, y, radiusList[0]);
-                            ctx.closePath();
-                            ctx.fill('nonzero');
-                            ctx.clip('nonzero');
-                            if (scaleMode && originH && originW) {
-                                let sx = 0;
-                                let sy = 0;
-                                let sWidth = imageW;
-                                let sHeight = imageH;
-                                const dx = x;
-                                const dy = y;
-                                const dWidth = w;
-                                const dHeight = h;
-                                if (imageW > elem.w || imageH > elem.h) {
-                                    if (scaleMode === 'fill') {
-                                        const sourceScale = Math.max(elem.w / imageW, elem.h / imageH);
-                                        const newImageWidth = imageW * sourceScale;
-                                        const newImageHeight = imageH * sourceScale;
-                                        sx = (newImageWidth - elem.w) / 2 / sourceScale;
-                                        sy = (newImageHeight - elem.h) / 2 / sourceScale;
-                                        sWidth = elem.w / sourceScale;
-                                        sHeight = elem.h / sourceScale;
-                                    }
-                                    else if (scaleMode === 'tile') {
-                                        sx = 0;
-                                        sy = 0;
-                                        sWidth = elem.w;
-                                        sHeight = elem.h;
-                                    }
-                                    else if (scaleMode === 'fit') {
-                                        const sourceScale = Math.min(elem.w / imageW, elem.h / imageH);
-                                        sx = (imageW - elem.w / sourceScale) / 2;
-                                        sy = (imageH - elem.h / sourceScale) / 2;
-                                        sWidth = elem.w / sourceScale;
-                                        sHeight = elem.h / sourceScale;
-                                    }
-                                }
-                                ctx.drawImage(content, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
-                            }
-                            else {
-                                ctx.drawImage(content, x, y, w, h);
-                            }
-                            ctx.globalAlpha = parentOpacity;
-                            ctx.restore();
-                        }
+import { calcViewMaterialSize } from '@idraw/util';
+import { getOpacity } from './box';
+import { rotateViewMaterial } from './base';
+export function drawImage(ctx, mtrl, opts) {
+    const content = opts.loader.getContent(mtrl);
+    const { viewScaleInfo, parentOpacity } = opts;
+    const { x, y, width, height, angle } = calcViewMaterialSize(mtrl, { viewScaleInfo }) || mtrl;
+    const viewMtrl = Object.assign(Object.assign({}, mtrl), { x, y, width, height, angle });
+    rotateViewMaterial(ctx, mtrl, opts, () => {
+        if (!content && !opts.loader.isDestroyed()) {
+            opts.loader.load(mtrl, opts.materialAssets || {});
+        }
+        if (mtrl.type === 'image' && content) {
+            ctx.globalAlpha = getOpacity(mtrl) * parentOpacity;
+            const { x, y, width, height } = viewMtrl;
+            const radiusList = [0, 0, 0, 0];
+            const attributes = mtrl;
+            const { scaleMode, originW = 0, originH = 0 } = attributes;
+            const imageW = ctx.$undoPixelRatio(originW);
+            const imageH = ctx.$undoPixelRatio(originH);
+            ctx.save();
+            ctx.fillStyle = 'transparent';
+            ctx.beginPath();
+            ctx.moveTo(x + radiusList[0], y);
+            ctx.arcTo(x + width, y, x + width, y + height, radiusList[1]);
+            ctx.arcTo(x + width, y + height, x, y + height, radiusList[2]);
+            ctx.arcTo(x, y + height, x, y, radiusList[3]);
+            ctx.arcTo(x, y, x + width, y, radiusList[0]);
+            ctx.closePath();
+            ctx.fill('nonzero');
+            ctx.clip('nonzero');
+            if (scaleMode && originH && originW) {
+                let sx = 0;
+                let sy = 0;
+                let sWidth = imageW;
+                let sHeight = imageH;
+                const dx = x;
+                const dy = y;
+                const dWidth = width;
+                const dHeight = height;
+                if (imageW > mtrl.width || imageH > mtrl.height) {
+                    if (scaleMode === 'fill') {
+                        const sourceScale = Math.max(mtrl.width / imageW, mtrl.height / imageH);
+                        const newImageWidth = imageW * sourceScale;
+                        const newImageHeight = imageH * sourceScale;
+                        sx = (newImageWidth - mtrl.width) / 2 / sourceScale;
+                        sy = (newImageHeight - mtrl.height) / 2 / sourceScale;
+                        sWidth = mtrl.width / sourceScale;
+                        sHeight = mtrl.height / sourceScale;
                     }
-                });
+                    else if (scaleMode === 'tile') {
+                        sx = 0;
+                        sy = 0;
+                        sWidth = mtrl.width;
+                        sHeight = mtrl.height;
+                    }
+                    else if (scaleMode === 'fit') {
+                        const sourceScale = Math.min(mtrl.width / imageW, mtrl.height / imageH);
+                        sx = (imageW - mtrl.width / sourceScale) / 2;
+                        sy = (imageH - mtrl.height / sourceScale) / 2;
+                        sWidth = mtrl.width / sourceScale;
+                        sHeight = mtrl.height / sourceScale;
+                    }
+                }
+                ctx.drawImage(content, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+            }
+            else {
+                ctx.drawImage(content, x, y, width, height);
             }
-        });
+            ctx.globalAlpha = parentOpacity;
+            ctx.restore();
+        }
     });
 }

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

@@ -1,10 +1,11 @@
-export { drawCircle } from './circle';
 export { drawRect } from './rect';
+export { drawCircle } from './circle';
+export { drawEllipse } from './ellipse';
 export { drawImage } from './image';
-export { drawSVG } from './svg';
-export { drawHTML } from './html';
+export { drawSVGCode } from './svg-code';
+export { drawForeignObject } from './foreign-object';
 export { drawText } from './text';
-export { drawGroup, drawElement } from './group';
-export { drawElementList } from './elements';
+export { drawGroup, drawMaterial } from './group';
+export { drawMaterialList } from './materials';
 export { drawLayout } from './layout';
 export { drawGlobalBackground } from './global';

package/dist/esm/draw/index.js

@@ -1,10 +1,11 @@
-export { drawCircle } from './circle';
 export { drawRect } from './rect';
+export { drawCircle } from './circle';
+export { drawEllipse } from './ellipse';
 export { drawImage } from './image';
-export { drawSVG } from './svg';
-export { drawHTML } from './html';
+export { drawSVGCode } from './svg-code';
+export { drawForeignObject } from './foreign-object';
 export { drawText } from './text';
-export { drawGroup, drawElement } from './group';
-export { drawElementList } from './elements';
+export { drawGroup, drawMaterial } from './group';
+export { drawMaterialList } from './materials';
 export { drawLayout } from './layout';
 export { drawGlobalBackground } from './global';

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

@@ -1,2 +1,2 @@
-import type { RendererDrawElementOptions, ViewContext2D, DataLayout } from '@idraw/types';
-export declare function drawLayout(ctx: ViewContext2D, layout: DataLayout, opts: RendererDrawElementOptions, renderContent: (ctx: ViewContext2D) => void): void;
+import type { RendererDrawMaterialOptions, ViewContext2D, DataLayout } from '@idraw/types';
+export declare function drawLayout(ctx: ViewContext2D, layout: DataLayout, opts: RendererDrawMaterialOptions, renderContent: (ctx: ViewContext2D) => void): void;

package/dist/esm/draw/layout.js

@@ -1,44 +1,30 @@
-import { calcViewElementSize, calcViewBoxSize } from '@idraw/util';
-import { drawBoxShadow, drawBoxBackground, drawBoxBorder } from './box';
+import { calcViewMaterialSize } from '@idraw/util';
+import { createColor } from './color';
 export function drawLayout(ctx, layout, opts, renderContent) {
-    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const elem = Object.assign({ uuid: 'layout', type: 'group' }, layout);
-    const { x, y, w, h } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
-    const angle = 0;
-    const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
+    const { parentOpacity } = opts;
     ctx.globalAlpha = 1;
-    drawBoxShadow(ctx, viewElem, {
-        viewScaleInfo,
-        viewSizeInfo,
-        renderContent: () => {
-            drawBoxBackground(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
-        }
-    });
-    if (layout.detail.overflow === 'hidden') {
-        const { viewScaleInfo, viewSizeInfo } = opts;
-        const elem = Object.assign({ uuid: 'layout', type: 'group' }, layout);
-        const viewElemSize = calcViewElementSize(elem, { viewScaleInfo }) || elem;
-        const viewElem = Object.assign(Object.assign({}, elem), viewElemSize);
-        const { x, y, w, h, radiusList } = calcViewBoxSize(viewElem, {
-            viewScaleInfo,
-            viewSizeInfo
-        });
-        ctx.save();
-        ctx.fillStyle = 'transparent';
-        ctx.beginPath();
-        ctx.moveTo(x + radiusList[0], y);
-        ctx.arcTo(x + w, y, x + w, y + h, radiusList[1]);
-        ctx.arcTo(x + w, y + h, x, y + h, radiusList[2]);
-        ctx.arcTo(x, y + h, x, y, radiusList[3]);
-        ctx.arcTo(x, y, x + w, y, radiusList[0]);
-        ctx.closePath();
-        ctx.fill('nonzero');
+    const { viewScaleInfo } = opts;
+    const mtrl = Object.assign({ id: 'layout', type: 'group' }, layout);
+    const viewMtrlSize = calcViewMaterialSize(mtrl, { viewScaleInfo }) || mtrl;
+    const viewMtrl = Object.assign(Object.assign({}, mtrl), viewMtrlSize);
+    const { x, y, width, height, fill } = viewMtrl;
+    const radiusList = [0, 0, 0, 0];
+    ctx.save();
+    ctx.fillStyle = createColor(ctx, fill, { viewMaterialSize: viewMtrlSize, viewScaleInfo, opacity: mtrl.opacity || 1 });
+    ctx.beginPath();
+    ctx.moveTo(x + radiusList[0], y);
+    ctx.arcTo(x + width, y, x + width, y + height, radiusList[1]);
+    ctx.arcTo(x + width, y + height, x, y + height, radiusList[2]);
+    ctx.arcTo(x, y + height, x, y, radiusList[3]);
+    ctx.arcTo(x, y, x + width, y, radiusList[0]);
+    ctx.closePath();
+    ctx.fill('nonzero');
+    if (layout.overflow === 'hidden') {
         ctx.clip('nonzero');
     }
     renderContent(ctx);
-    if (layout.detail.overflow === 'hidden') {
+    if (layout.overflow === 'hidden') {
         ctx.restore();
     }
-    drawBoxBorder(ctx, viewElem, { originElem: elem, viewScaleInfo, viewSizeInfo });
     ctx.globalAlpha = parentOpacity;
 }

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

@@ -0,0 +1,2 @@
+import type { Data, RendererDrawMaterialOptions, ViewContext2D } from '@idraw/types';
+export declare function drawMaterialList(ctx: ViewContext2D, data: Data, opts: RendererDrawMaterialOptions): void;

package/dist/esm/draw/materials.js

@@ -0,0 +1,27 @@
+import { getDefaultMaterialAttributes } from '@idraw/util';
+import { drawMaterial } from './group';
+const defaultAttributes = getDefaultMaterialAttributes();
+export function drawMaterialList(ctx, data, opts) {
+    var _a;
+    const { materials = [] } = data;
+    const { parentOpacity } = opts;
+    for (let i = 0; i < materials.length; i++) {
+        const material = materials[i];
+        const mtrl = Object.assign(Object.assign({}, material), {
+            attributes: Object.assign(Object.assign({}, defaultAttributes), material),
+        });
+        if (opts.forceDrawAll !== true) {
+            if (!((_a = opts.calculator) === null || _a === void 0 ? void 0 : _a.needRender(mtrl))) {
+                continue;
+            }
+        }
+        try {
+            drawMaterial(ctx, mtrl, Object.assign(Object.assign({}, opts), {
+                parentOpacity,
+            }));
+        }
+        catch (err) {
+            console.error(err);
+        }
+    }
+}

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

@@ -1,2 +1,2 @@
-import type { Element, RendererDrawElementOptions, ViewContext2D } from '@idraw/types';
-export declare function drawPath(ctx: ViewContext2D, elem: Element<'path'>, opts: RendererDrawElementOptions): void;
+import type { StrictMaterial, RendererDrawMaterialOptions, ViewContext2D } from '@idraw/types';
+export declare function drawPath(ctx: ViewContext2D, mtrl: StrictMaterial<'path'>, opts: RendererDrawMaterialOptions): void;

package/dist/esm/draw/path.js

@@ -1,91 +1,6 @@
-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 { rotateElement, generateSVGPath, calcViewElementSize } from '@idraw/util';
-import { drawBox, drawBoxShadow } from './box';
-export function drawPath(ctx, elem, opts) {
-    var _a, _b;
-    const { detail } = elem;
-    const { originX, originY, originW, originH, fillRule } = detail;
-    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x, y, w, h, angle } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
-    const scaleW = w / originW;
-    const scaleH = h / originH;
-    const viewOriginX = originX * scaleW;
-    const viewOriginY = originY * scaleH;
-    const internalX = x - viewOriginX;
-    const internalY = y - viewOriginY;
-    const _c = elem.detail, { clipPath, clipPathStrokeColor, clipPathStrokeWidth } = _c, restDetail = __rest(_c, ["clipPath", "clipPathStrokeColor", "clipPathStrokeWidth"]);
-    const scaleNum = viewScaleInfo.scale * viewSizeInfo.devicePixelRatio;
-    const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
-    let boxViewElem = Object.assign({}, viewElem);
-    boxViewElem.detail = restDetail;
-    let boxOriginElem = Object.assign({}, elem);
-    boxOriginElem.detail = restDetail;
-    if (detail.fill &&
-        detail.fill !== 'string' &&
-        ((_b = (_a = detail.fill) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.includes('gradient'))) {
-        boxViewElem = Object.assign(Object.assign({}, viewElem), {
-            detail: Object.assign(Object.assign({}, viewElem.detail), {
-                background: detail.fill,
-                clipPath: {
-                    commands: detail.commands,
-                    originX,
-                    originY,
-                    originW,
-                    originH
-                }
-            })
-        });
-        boxOriginElem.detail = Object.assign({}, boxViewElem.detail);
-    }
-    rotateElement(ctx, { x, y, w, h, angle }, () => {
-        drawBox(ctx, boxViewElem, {
-            originElem: boxOriginElem,
-            calcElemSize: { x, y, w, h, angle },
-            viewScaleInfo,
-            viewSizeInfo,
-            parentOpacity,
-            renderContent: () => {
-                drawBoxShadow(ctx, viewElem, {
-                    viewScaleInfo,
-                    viewSizeInfo,
-                    renderContent: () => {
-                        ctx.save();
-                        ctx.translate(internalX, internalY);
-                        ctx.scale((scaleNum * scaleW) / viewScaleInfo.scale, (scaleNum * scaleH) / viewScaleInfo.scale);
-                        const pathStr = generateSVGPath(detail.commands || []);
-                        const path2d = new Path2D(pathStr);
-                        if (detail.fill) {
-                            if (typeof detail.fill === 'string') {
-                                ctx.fillStyle = detail.fill;
-                            }
-                            else {
-                                ctx.fillStyle = 'transparent';
-                            }
-                        }
-                        if (detail.fill) {
-                            ctx.fill(path2d, fillRule || 'nonzero');
-                        }
-                        if (detail.stroke && detail.strokeWidth !== 0) {
-                            ctx.strokeStyle = detail.stroke;
-                            ctx.lineWidth = (detail.strokeWidth || 1) / viewSizeInfo.devicePixelRatio;
-                            ctx.lineCap = detail.strokeLineCap || 'square';
-                            ctx.stroke(path2d);
-                        }
-                        ctx.translate(-internalX, -internalY);
-                        ctx.restore();
-                    }
-                });
-            }
-        });
+import { rotateViewMaterial, drawBase } from './base';
+export function drawPath(ctx, mtrl, opts) {
+    rotateViewMaterial(ctx, mtrl, opts, () => {
+        drawBase(ctx, mtrl, opts);
     });
 }

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

@@ -1,2 +1,2 @@
-import type { Element, RendererDrawElementOptions, ViewContext2D } from '@idraw/types';
-export declare function drawRect(ctx: ViewContext2D, elem: Element<'rect'>, opts: RendererDrawElementOptions): void;
+import type { StrictMaterial, RendererDrawMaterialOptions, ViewContext2D } from '@idraw/types';
+export declare function drawRect(ctx: ViewContext2D, mtrl: StrictMaterial<'rect'>, opts: RendererDrawMaterialOptions): void;