@idraw/renderer 0.4.0-alpha.3 → 0.4.0-alpha.4

package/dist/esm/draw/{base.js → box.js}

@@ -1,12 +1,7 @@
-import { istype, isColorStr, generateSVGPath, rotateElement, is } from '@idraw/util';
+import { istype, isColorStr, generateSVGPath, rotateElement, is, getDefaultElementDetailConfig, calcViewBoxSize } from '@idraw/util';
+import { createColorStyle } from './color';
+const defaultElemConfig = getDefaultElementDetailConfig();
 export function drawBox(ctx, viewElem, opts) {
-    var _a, _b;
-    if (((_a = viewElem === null || viewElem === void 0 ? void 0 : viewElem.detail) === null || _a === void 0 ? void 0 : _a.opacity) !== undefined && ((_b = viewElem === null || viewElem === void 0 ? void 0 : viewElem.detail) === null || _b === void 0 ? void 0 : _b.opacity) > 0) {
-        ctx.globalAlpha = viewElem.detail.opacity;
-    }
-    else {
-        ctx.globalAlpha = 1;
-    }
     const { pattern, renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts || {};
     drawClipPath(ctx, viewElem, {
         originElem,
@@ -14,12 +9,19 @@ export function drawBox(ctx, viewElem, opts) {
         viewScaleInfo,
         viewSizeInfo,
         renderContent: () => {
-            drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+            var _a, _b;
+            if (((_a = viewElem === null || viewElem === void 0 ? void 0 : viewElem.detail) === null || _a === void 0 ? void 0 : _a.opacity) !== undefined && ((_b = viewElem === null || viewElem === void 0 ? void 0 : viewElem.detail) === null || _b === void 0 ? void 0 : _b.opacity) >= 0) {
+                ctx.globalAlpha = viewElem.detail.opacity;
+            }
+            else {
+                ctx.globalAlpha = 1;
+            }
             drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
             renderContent === null || renderContent === void 0 ? void 0 : renderContent();
+            drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+            ctx.globalAlpha = 1;
         }
     });
-    ctx.globalAlpha = 1;
 }
 function drawClipPath(ctx, viewElem, opts) {
     const { renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts;
@@ -53,21 +55,23 @@ function drawClipPath(ctx, viewElem, opts) {
 }
 function drawBoxBackground(ctx, viewElem, opts) {
     var _a, _b;
-    const { pattern, viewScaleInfo } = opts;
+    const { pattern, viewScaleInfo, viewSizeInfo } = opts;
     let transform = [];
+    let { borderRadius, borderWidth } = viewElem.detail;
+    if (typeof borderWidth !== 'number') {
+        borderRadius = 0;
+    }
     if (viewElem.detail.background || pattern) {
-        const { x, y, w, h } = viewElem;
-        let r = (viewElem.detail.borderRadius || 0) * viewScaleInfo.scale;
-        r = Math.min(r, w / 2, h / 2);
-        if (w < r * 2 || h < r * 2) {
-            r = 0;
-        }
+        const { x, y, w, h, radiusList } = calcViewBoxSize(viewElem, {
+            viewScaleInfo,
+            viewSizeInfo
+        });
         ctx.beginPath();
-        ctx.moveTo(x + r, y);
-        ctx.arcTo(x + w, y, x + w, y + h, r);
-        ctx.arcTo(x + w, y + h, x, y + h, r);
-        ctx.arcTo(x, y + h, x, y, r);
-        ctx.arcTo(x, y, x + w, y, r);
+        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();
         if (typeof pattern === 'string') {
             ctx.fillStyle = pattern;
@@ -78,40 +82,21 @@ function drawBoxBackground(ctx, viewElem, opts) {
         else if (typeof viewElem.detail.background === 'string') {
             ctx.fillStyle = viewElem.detail.background;
         }
-        else if (((_a = viewElem.detail.background) === null || _a === void 0 ? void 0 : _a.type) === 'linearGradient') {
-            const { start, end, stops } = viewElem.detail.background;
-            const viewStart = {
-                x: start.x + x,
-                y: start.y + y
-            };
-            const viewEnd = {
-                x: end.x + x,
-                y: end.y + y
-            };
-            const linearGradient = ctx.createLinearGradient(viewStart.x, viewStart.y, viewEnd.x, viewEnd.y);
-            stops.forEach((stop) => {
-                linearGradient.addColorStop(stop.offset, stop.color);
+        else if (((_a = viewElem.detail.background) === null || _a === void 0 ? void 0 : _a.type) === 'linear-gradient') {
+            const colorStyle = createColorStyle(ctx, viewElem.detail.background, {
+                viewElementSize: { x, y, w, h },
+                viewScaleInfo,
+                opacity: ctx.globalAlpha
             });
-            ctx.fillStyle = linearGradient;
-        }
-        else if (((_b = viewElem.detail.background) === null || _b === void 0 ? void 0 : _b.type) === 'radialGradient') {
-            const { inner, outer, stops } = viewElem.detail.background;
-            transform = viewElem.detail.background.transform || [];
-            const viewInner = {
-                x: inner.x,
-                y: inner.y,
-                radius: inner.radius * viewScaleInfo.scale
-            };
-            const viewOuter = {
-                x: outer.x,
-                y: outer.y,
-                radius: outer.radius * viewScaleInfo.scale
-            };
-            const radialGradient = ctx.createRadialGradient(viewInner.x, viewInner.y, viewInner.radius, viewOuter.x, viewOuter.y, viewOuter.radius);
-            stops.forEach((stop) => {
-                radialGradient.addColorStop(stop.offset, stop.color);
+            ctx.fillStyle = colorStyle;
+        }
+        else if (((_b = viewElem.detail.background) === null || _b === void 0 ? void 0 : _b.type) === 'radial-gradient') {
+            const colorStyle = createColorStyle(ctx, viewElem.detail.background, {
+                viewElementSize: { x, y, w, h },
+                viewScaleInfo,
+                opacity: ctx.globalAlpha
             });
-            ctx.fillStyle = radialGradient;
+            ctx.fillStyle = colorStyle;
             if (transform && transform.length > 0) {
                 for (let i = 0; i < (transform === null || transform === void 0 ? void 0 : transform.length); i++) {
                     const action = transform[i];
@@ -134,97 +119,147 @@ function drawBoxBackground(ctx, viewElem, opts) {
     }
 }
 function drawBoxBorder(ctx, viewElem, opts) {
+    var _a, _b;
+    if (viewElem.detail.borderWidth === 0) {
+        return;
+    }
     if (!isColorStr(viewElem.detail.borderColor)) {
         return;
     }
+    if (((_a = viewElem === null || viewElem === void 0 ? void 0 : viewElem.detail) === null || _a === void 0 ? void 0 : _a.opacity) !== undefined && ((_b = viewElem === null || viewElem === void 0 ? void 0 : viewElem.detail) === null || _b === void 0 ? void 0 : _b.opacity) >= 0) {
+        ctx.globalAlpha = viewElem.detail.opacity;
+    }
+    else {
+        ctx.globalAlpha = 1;
+    }
     const { viewScaleInfo } = opts;
-    let borderColor = '#000000';
+    const { scale } = viewScaleInfo;
+    let borderColor = defaultElemConfig.borderColor;
     if (isColorStr(viewElem.detail.borderColor) === true) {
         borderColor = viewElem.detail.borderColor;
     }
-    const { borderWidth, borderRadius, borderDash } = viewElem.detail;
+    const { borderWidth, borderRadius, borderDash, boxSizing = defaultElemConfig.boxSizing } = viewElem.detail;
     let bw = 0;
     if (typeof borderWidth === 'number') {
         bw = borderWidth || 1;
     }
-    bw = bw * viewScaleInfo.scale;
-    let r = borderRadius || 0;
+    bw = bw * scale;
+    let radiusList = [0, 0, 0, 0];
+    if (typeof borderRadius === 'number') {
+        const br = borderRadius * scale;
+        radiusList = [br, br, br, br];
+    }
+    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;
-    ctx.setLineDash(borderDash || []);
+    let viewBorderDash = [];
+    if (Array.isArray(borderDash) && borderDash.length > 0) {
+        viewBorderDash = borderDash.map((num) => Math.ceil(num * scale));
+    }
     let borderTop = 0;
     let borderRight = 0;
     let borderBottom = 0;
     let borderLeft = 0;
     if (Array.isArray(borderWidth)) {
-        borderTop = borderWidth[0] || 0;
-        borderRight = borderWidth[1] || 0;
-        borderBottom = borderWidth[2] || 0;
-        borderLeft = borderWidth[3] || 0;
+        borderTop = (borderWidth[0] || 0) * scale;
+        borderRight = (borderWidth[1] || 0) * scale;
+        borderBottom = (borderWidth[2] || 0) * scale;
+        borderLeft = (borderWidth[3] || 0) * scale;
     }
     if (borderLeft || borderRight || borderTop || borderBottom) {
-        const { x, y, w, h } = viewElem;
-        if (borderLeft) {
+        ctx.lineCap = 'butt';
+        let { x, y, w, h } = viewElem;
+        if (boxSizing === 'border-box') {
+            x = x + borderLeft / 2;
+            y = y + borderTop / 2;
+            w = w - borderLeft / 2 - borderRight / 2;
+            h = h - borderTop / 2 - borderBottom / 2;
+        }
+        else if (boxSizing === 'content-box') {
+            x = x - borderLeft / 2;
+            y = y - borderTop / 2;
+            w = w + borderLeft / 2 + borderRight / 2;
+            h = h + borderTop / 2 + borderBottom / 2;
+        }
+        else {
+            x = viewElem.x;
+            y = viewElem.y;
+            w = viewElem.w;
+            h = viewElem.h;
+        }
+        if (borderTop) {
             ctx.beginPath();
-            ctx.lineWidth = borderLeft * viewScaleInfo.scale;
-            ctx.moveTo(x, y);
-            ctx.lineTo(x, y + h);
+            ctx.lineWidth = borderTop;
+            ctx.moveTo(x - borderLeft / 2, y);
+            ctx.lineTo(x + w + borderRight / 2, y);
             ctx.closePath();
             ctx.stroke();
         }
         if (borderRight) {
             ctx.beginPath();
-            ctx.lineWidth = borderRight * viewScaleInfo.scale;
-            ctx.moveTo(x + w, y);
-            ctx.lineTo(x + w, y + h);
+            ctx.lineWidth = borderRight;
+            ctx.moveTo(x + w, y - borderTop / 2);
+            ctx.lineTo(x + w, y + h + borderBottom / 2);
             ctx.closePath();
             ctx.stroke();
         }
-        if (borderTop) {
+        if (borderBottom) {
             ctx.beginPath();
-            ctx.lineWidth = borderTop * viewScaleInfo.scale;
-            ctx.moveTo(x, y);
-            ctx.lineTo(x + w, y);
+            ctx.lineWidth = borderBottom;
+            ctx.moveTo(x - borderLeft / 2, y + h);
+            ctx.lineTo(x + w + borderRight / 2, y + h);
             ctx.closePath();
             ctx.stroke();
         }
-        if (borderBottom) {
+        if (borderLeft) {
             ctx.beginPath();
-            ctx.lineWidth = borderBottom * viewScaleInfo.scale;
-            ctx.moveTo(x, y + h);
-            ctx.lineTo(x + w, y + h);
+            ctx.lineWidth = borderLeft;
+            ctx.moveTo(x, y - borderTop / 2);
+            ctx.lineTo(x, y + h + borderBottom / 2);
             ctx.closePath();
             ctx.stroke();
         }
     }
     else {
         let { x, y, w, h } = viewElem;
-        const { boxSizing } = viewElem.detail;
         if (boxSizing === 'border-box') {
+            x = viewElem.x + bw / 2;
+            y = viewElem.y + bw / 2;
+            w = viewElem.w - bw;
+            h = viewElem.h - bw;
+        }
+        else if (boxSizing === 'content-box') {
+            x = viewElem.x - bw / 2;
+            y = viewElem.y - bw / 2;
+            w = viewElem.w + bw;
+            h = viewElem.h + bw;
+        }
+        else {
             x = viewElem.x;
             y = viewElem.y;
             w = viewElem.w;
             h = viewElem.h;
         }
-        else {
-            x = viewElem.x - bw;
-            y = viewElem.y - bw;
-            w = viewElem.w + bw * 2;
-            h = viewElem.h + bw * 2;
+        if (viewBorderDash.length > 0) {
+            ctx.lineCap = 'butt';
         }
-        r = Math.min(r, w / 2, h / 2);
-        if (r < w / 2 && r < h / 2) {
-            r = r + bw / 2;
+        else {
+            ctx.lineCap = 'square';
         }
-        ctx.beginPath();
+        ctx.setLineDash(viewBorderDash);
         ctx.lineWidth = bw;
-        ctx.moveTo(x + r, y);
-        ctx.arcTo(x + w, y, x + w, y + h, r);
-        ctx.arcTo(x + w, y + h, x, y + h, r);
-        ctx.arcTo(x, y + h, x, y, r);
-        ctx.arcTo(x, y, x + w, y, r);
+        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.stroke();
+        ctx.globalAlpha = 1;
     }
+    ctx.setLineDash([]);
 }
 export function drawBoxShadow(ctx, viewElem, opts) {
     const { detail } = viewElem;
@@ -232,7 +267,7 @@ export function drawBoxShadow(ctx, viewElem, opts) {
     const { shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur } = detail;
     if (is.number(shadowBlur)) {
         ctx.save();
-        ctx.shadowColor = shadowColor || '#000000';
+        ctx.shadowColor = shadowColor || defaultElemConfig.shadowColor;
         ctx.shadowOffsetX = (shadowOffsetX || 0) * viewScaleInfo.scale;
         ctx.shadowOffsetY = (shadowOffsetY || 0) * viewScaleInfo.scale;
         ctx.shadowBlur = (shadowBlur || 0) * viewScaleInfo.scale;

package/dist/esm/draw/circle.js

@@ -1,28 +1,50 @@
 import { rotateElement } from '@idraw/util';
+import { createColorStyle } from './color';
+import { drawBoxShadow } from './box';
 export function drawCircle(ctx, elem, opts) {
     const { detail, angle } = elem;
     const { background = '#000000', borderColor = '#000000', borderWidth = 0 } = detail;
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
     const { x, y, w, h } = calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo);
+    const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
     rotateElement(ctx, { x, y, w, h, angle }, () => {
-        const a = w / 2;
-        const b = h / 2;
-        const centerX = x + a;
-        const centerY = y + b;
-        if (borderWidth && borderWidth > 0) {
-            const ba = borderWidth / 2 + a;
-            const bb = borderWidth / 2 + b;
-            ctx.beginPath();
-            ctx.strokeStyle = borderColor;
-            ctx.lineWidth = borderWidth;
-            ctx.circle(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
-            ctx.closePath();
-            ctx.stroke();
-        }
-        ctx.beginPath();
-        ctx.fillStyle = background;
-        ctx.circle(centerX, centerY, a, b, 0, 0, 2 * Math.PI);
-        ctx.closePath();
-        ctx.fill();
+        drawBoxShadow(ctx, viewElem, {
+            viewScaleInfo,
+            viewSizeInfo,
+            renderContent: () => {
+                var _a, _b;
+                const a = w / 2;
+                const b = h / 2;
+                const centerX = x + a;
+                const centerY = y + b;
+                if (((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.opacity) !== undefined && ((_b = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _b === void 0 ? void 0 : _b.opacity) >= 0) {
+                    ctx.globalAlpha = elem.detail.opacity;
+                }
+                else {
+                    ctx.globalAlpha = 1;
+                }
+                if (typeof borderWidth === 'number' && borderWidth > 0) {
+                    const ba = borderWidth / 2 + a;
+                    const bb = borderWidth / 2 + b;
+                    ctx.beginPath();
+                    ctx.strokeStyle = borderColor;
+                    ctx.lineWidth = borderWidth;
+                    ctx.circle(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
+                    ctx.closePath();
+                    ctx.stroke();
+                }
+                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 = 1;
+            }
+        });
     });
 }

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

@@ -0,0 +1,6 @@
+import type { ViewContext2D, ViewScaleInfo, ElementSize, LinearGradientColor, RadialGradientColor } from '@idraw/types';
+export declare function createColorStyle(ctx: ViewContext2D, color: string | LinearGradientColor | RadialGradientColor | undefined, opts: {
+    viewElementSize: ElementSize;
+    viewScaleInfo: ViewScaleInfo;
+    opacity: number;
+}): string | CanvasPattern | CanvasGradient;

package/dist/esm/draw/color.js

@@ -0,0 +1,44 @@
+import { mergeHexColorAlpha } from '@idraw/util';
+export function createColorStyle(ctx, color, opts) {
+    if (typeof color === 'string') {
+        return color;
+    }
+    const { viewElementSize, viewScaleInfo, opacity = 1 } = opts;
+    const { x, y } = viewElementSize;
+    const { scale } = viewScaleInfo;
+    if ((color === null || color === void 0 ? void 0 : color.type) === 'linear-gradient') {
+        const { start, end, stops } = color;
+        const viewStart = {
+            x: x + start.x * scale,
+            y: y + start.y * scale
+        };
+        const viewEnd = {
+            x: x + end.x * scale,
+            y: y + end.y * scale
+        };
+        const linearGradient = ctx.createLinearGradient(viewStart.x, viewStart.y, viewEnd.x, viewEnd.y);
+        stops.forEach((stop) => {
+            linearGradient.addColorStop(stop.offset, mergeHexColorAlpha(stop.color, opacity));
+        });
+        return linearGradient;
+    }
+    if ((color === null || color === void 0 ? void 0 : color.type) === 'radial-gradient') {
+        const { inner, outer, stops } = color;
+        const viewInner = {
+            x: x + inner.x * scale,
+            y: y + inner.y * scale,
+            radius: inner.radius * scale
+        };
+        const viewOuter = {
+            x: x + outer.x * scale,
+            y: y + outer.y * scale,
+            radius: outer.radius * scale
+        };
+        const radialGradient = ctx.createRadialGradient(viewInner.x, viewInner.y, viewInner.radius, viewOuter.x, viewOuter.y, viewOuter.radius);
+        stops.forEach((stop) => {
+            radialGradient.addColorStop(stop.offset, mergeHexColorAlpha(stop.color, opacity));
+        });
+        return radialGradient;
+    }
+    return '#000000';
+}

package/dist/esm/draw/elements.js

@@ -1,8 +1,13 @@
+import { getDefaultElementDetailConfig } from '@idraw/util';
 import { drawElement } from './group';
+const defaultDetail = getDefaultElementDetailConfig();
 export function drawElementList(ctx, data, opts) {
     const { elements = [] } = data;
     for (let i = 0; i < elements.length; i++) {
-        const elem = elements[i];
+        const element = elements[i];
+        const elem = Object.assign(Object.assign({}, element), {
+            detail: Object.assign(Object.assign({}, defaultDetail), element === null || element === void 0 ? void 0 : element.detail)
+        });
         if (!opts.calculator.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo)) {
             continue;
         }

package/dist/esm/draw/group.js

@@ -5,7 +5,7 @@ import { drawImage } from './image';
 import { drawText } from './text';
 import { drawSVG } from './svg';
 import { drawHTML } from './html';
-import { drawBox } from './base';
+import { drawBox } from './box';
 import { drawPath } from './path';
 export function drawElement(ctx, elem, opts) {
     var _a;

package/dist/esm/draw/html.js

@@ -1,14 +1,17 @@
 import { rotateElement } from '@idraw/util';
 export function drawHTML(ctx, elem, opts) {
-    const content = opts.loader.getContent(elem.uuid);
+    const content = opts.loader.getContent(elem);
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
     const { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
     rotateElement(ctx, { x, y, w, h, angle }, () => {
         if (!content) {
-            opts.loader.load(elem);
+            opts.loader.load(elem, opts.elementAssets || {});
         }
         if (elem.type === 'html' && content) {
+            const { opacity } = elem.detail;
+            ctx.globalAlpha = opacity ? opacity : 1;
             ctx.drawImage(content, x, y, w, h);
+            ctx.globalAlpha = 1;
         }
     });
 }

package/dist/esm/draw/image.js

@@ -1,14 +1,48 @@
-import { rotateElement } from '@idraw/util';
+import { rotateElement, calcViewBoxSize } from '@idraw/util';
+import { drawBox, drawBoxShadow } from './box';
 export function drawImage(ctx, elem, opts) {
-    const content = opts.loader.getContent(elem.uuid);
+    const content = opts.loader.getContent(elem);
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
     const { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
     rotateElement(ctx, { x, y, w, h, angle }, () => {
-        if (!content) {
-            opts.loader.load(elem, opts.elementAssets || {});
-        }
-        if (elem.type === 'image' && content) {
-            ctx.drawImage(content, x, y, w, h);
-        }
+        drawBoxShadow(ctx, viewElem, {
+            viewScaleInfo,
+            viewSizeInfo,
+            renderContent: () => {
+                drawBox(ctx, viewElem, {
+                    originElem: elem,
+                    calcElemSize: { x, y, w, h, angle },
+                    viewScaleInfo,
+                    viewSizeInfo,
+                    renderContent: () => {
+                        if (!content) {
+                            opts.loader.load(elem, opts.elementAssets || {});
+                        }
+                        if (elem.type === 'image' && content) {
+                            const { opacity } = elem.detail;
+                            ctx.globalAlpha = opacity ? opacity : 1;
+                            const { x, y, w, h, radiusList } = calcViewBoxSize(viewElem, {
+                                viewScaleInfo,
+                                viewSizeInfo
+                            });
+                            ctx.save();
+                            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();
+                            ctx.clip();
+                            ctx.drawImage(content, x, y, w, h);
+                            ctx.globalAlpha = 1;
+                            ctx.restore();
+                        }
+                    }
+                });
+            }
+        });
     });
 }

package/dist/esm/draw/path.js

@@ -1,5 +1,5 @@
 import { rotateElement, generateSVGPath } from '@idraw/util';
-import { drawBox, drawBoxShadow } from './base';
+import { drawBox, drawBoxShadow } from './box';
 export function drawPath(ctx, elem, opts) {
     const { detail } = elem;
     const { originX, originY, originW, originH } = detail;

package/dist/esm/draw/rect.js

@@ -1,5 +1,5 @@
 import { rotateElement } from '@idraw/util';
-import { drawBox, drawBoxShadow } from './base';
+import { drawBox, drawBoxShadow } from './box';
 export function drawRect(ctx, elem, opts) {
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
     let { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);

package/dist/esm/draw/svg.js

@@ -1,6 +1,6 @@
 import { rotateElement } from '@idraw/util';
 export function drawSVG(ctx, elem, opts) {
-    const content = opts.loader.getContent(elem.uuid);
+    const content = opts.loader.getContent(elem);
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
     const { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
     rotateElement(ctx, { x, y, w, h, angle }, () => {
@@ -8,7 +8,10 @@ export function drawSVG(ctx, elem, opts) {
             opts.loader.load(elem, opts.elementAssets || {});
         }
         if (elem.type === 'svg' && content) {
+            const { opacity } = elem.detail;
+            ctx.globalAlpha = opacity ? opacity : 1;
             ctx.drawImage(content, x, y, w, h);
+            ctx.globalAlpha = 1;
         }
     });
 }

package/dist/esm/draw/text.js

@@ -1,6 +1,7 @@
 import { rotateElement } from '@idraw/util';
-import { is, isColorStr } from '@idraw/util';
-import { drawBox } from './base';
+import { is, isColorStr, getDefaultElementDetailConfig } from '@idraw/util';
+import { drawBox } from './box';
+const detailConfig = getDefaultElementDetailConfig();
 export function drawText(ctx, elem, opts) {
     const { calculator, viewScaleInfo, viewSizeInfo } = opts;
     const { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
@@ -12,14 +13,10 @@ export function drawText(ctx, elem, opts) {
             viewScaleInfo,
             viewSizeInfo,
             renderContent: () => {
-                const detail = Object.assign({
-                    fontSize: 12,
-                    fontFamily: 'sans-serif',
-                    textAlign: 'center'
-                }, elem.detail);
-                const fontSize = detail.fontSize * viewScaleInfo.scale;
+                const detail = Object.assign(Object.assign({}, detailConfig), elem.detail);
+                const fontSize = (detail.fontSize || detailConfig.fontSize) * viewScaleInfo.scale;
                 const lineHeight = detail.lineHeight ? detail.lineHeight * viewScaleInfo.scale : fontSize;
-                ctx.fillStyle = elem.detail.color;
+                ctx.fillStyle = elem.detail.color || detailConfig.color;
                 ctx.textBaseline = 'top';
                 ctx.$setFont({
                     fontWeight: detail.fontWeight,

package/dist/esm/loader.d.ts

@@ -13,5 +13,5 @@ export declare class Loader extends EventEmitter<LoaderEventMap> implements Rend
     private _loadResource;
     private _isExistingErrorStorage;
     load(element: Element<LoadElementType>, assets: ElementAssets): void;
-    getContent(uuid: string): LoadContent | null;
+    getContent(element: Element<LoadElementType>): LoadContent | null;
 }