@idraw/renderer 0.4.2 → 1.0.0-alpha.1

package/dist/esm/draw/box.js

@@ -1,339 +1,7 @@
-import { istype, isColorStr, generateSVGPath, rotateElement, is, getDefaultElementDetailConfig, calcViewBoxSize } from '@idraw/util';
-import { createColorStyle } from './color';
-const defaultElemConfig = getDefaultElementDetailConfig();
-export function getOpacity(elem) {
-    var _a, _b, _c, _d;
+export function getOpacity(mtrl) {
     let opacity = 1;
-    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 && ((_c = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _c === void 0 ? void 0 : _c.opacity) <= 1) {
-        opacity = (_d = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _d === void 0 ? void 0 : _d.opacity;
+    if ((mtrl === null || mtrl === void 0 ? void 0 : mtrl.opacity) !== undefined && (mtrl === null || mtrl === void 0 ? void 0 : mtrl.opacity) >= 0 && (mtrl === null || mtrl === void 0 ? void 0 : mtrl.opacity) <= 1) {
+        opacity = mtrl === null || mtrl === void 0 ? void 0 : mtrl.opacity;
     }
     return opacity;
 }
-export function drawBox(ctx, viewElem, opts) {
-    const { pattern, renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts || {};
-    const { parentOpacity } = opts;
-    const opacity = getOpacity(originElem) * 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, 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;
-        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.translate(internalX, internalY);
-        ctx.scale(totalScale * scaleW, totalScale * scaleH);
-        const pathStr = generateSVGPath(clipPath.commands || []);
-        const path2d = new Path2D(pathStr);
-        ctx.clip(path2d, 'nonzero');
-        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();
-    }
-}
-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 = [];
-    if (viewElem.detail.background || pattern) {
-        const { x, y, w, h, radiusList } = calcViewBoxSize(viewElem, {
-            viewScaleInfo,
-            viewSizeInfo
-        });
-        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();
-        if (typeof pattern === 'string') {
-            ctx.fillStyle = pattern;
-        }
-        else if (['CanvasPattern'].includes(istype.type(pattern))) {
-            ctx.fillStyle = pattern;
-        }
-        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) === 'linear-gradient') {
-            const colorStyle = createColorStyle(ctx, viewElem.detail.background, {
-                viewElementSize: { x, y, w, h },
-                viewScaleInfo,
-                opacity: ctx.globalAlpha
-            });
-            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 = 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];
-                    if (action.method === 'translate') {
-                        ctx.translate(action.args[0] + x, action.args[1] + y);
-                    }
-                    else if (action.method === 'rotate') {
-                        ctx.rotate(...action.args);
-                    }
-                    else if (action.method === 'scale') {
-                        ctx.scale(...action.args);
-                    }
-                }
-            }
-        }
-        ctx.fill('nonzero');
-        if (transform && transform.length > 0) {
-            ctx.setTransform(1, 0, 0, 1, 0, 0);
-        }
-    }
-}
-export function drawBoxBorder(ctx, viewElem, opts) {
-    if (viewElem.detail.borderWidth === 0) {
-        return;
-    }
-    if (!isColorStr(viewElem.detail.borderColor)) {
-        return;
-    }
-    const { viewScaleInfo } = opts;
-    const { scale } = viewScaleInfo;
-    let borderColor = defaultElemConfig.borderColor;
-    if (isColorStr(viewElem.detail.borderColor) === true) {
-        borderColor = viewElem.detail.borderColor;
-    }
-    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';
-    }
-    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];
-    }
-    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;
-    let borderLeft = 0;
-    if (Array.isArray(borderWidth)) {
-        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) {
-        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 = 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;
-            ctx.moveTo(x + w, y - borderTop / 2);
-            ctx.lineTo(x + w, y + h + borderBottom / 2);
-            ctx.closePath();
-            ctx.stroke();
-        }
-        if (borderBottom) {
-            ctx.beginPath();
-            ctx.lineWidth = borderBottom;
-            ctx.moveTo(x - borderLeft / 2, y + h);
-            ctx.lineTo(x + w + borderRight / 2, y + h);
-            ctx.closePath();
-            ctx.stroke();
-        }
-        if (borderLeft) {
-            ctx.beginPath();
-            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;
-        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;
-        }
-        w = Math.max(w, 1);
-        h = Math.max(h, 1);
-        radiusList = radiusList.map((r) => {
-            return Math.min(r, w / 2, h / 2);
-        });
-        ctx.setLineDash(viewBorderDash);
-        ctx.lineWidth = bw;
-        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.setLineDash([]);
-}
-export function drawBoxShadow(ctx, viewElem, opts) {
-    const { detail } = viewElem;
-    const { viewScaleInfo, renderContent } = opts;
-    const { shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur } = detail;
-    if (is.number(shadowBlur)) {
-        ctx.save();
-        ctx.shadowColor = shadowColor || defaultElemConfig.shadowColor;
-        ctx.shadowOffsetX = (shadowOffsetX || 0) * viewScaleInfo.scale;
-        ctx.shadowOffsetY = (shadowOffsetY || 0) * viewScaleInfo.scale;
-        ctx.shadowBlur = (shadowBlur || 0) * viewScaleInfo.scale;
-        renderContent();
-        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.d.ts

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

package/dist/esm/draw/circle.js

@@ -1,74 +1,6 @@
-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 { 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;
-    }
-    else if (Array.isArray(borderWidth) && typeof borderWidth[0] === 'number' && borderWidth[0] > 0) {
-        bw = borderWidth[0];
-    }
-    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, {
-            viewScaleInfo,
-            viewSizeInfo,
-            renderContent: () => {
-                let a = w / 2;
-                let b = h / 2;
-                const centerX = x + a;
-                const centerY = y + b;
-                const radiusA = a;
-                const radiusB = b;
-                if (bw > 0) {
-                    if (boxSizing === 'content-box') {
-                    }
-                    else if (boxSizing === 'center-line') {
-                        a = a - bw / 2;
-                        b = b - bw / 2;
-                    }
-                    else {
-                        a = a - bw;
-                        b = b - bw;
-                    }
-                }
-                if (a >= 0 && b >= 0) {
-                    const opacity = getOpacity(viewElem) * parentOpacity;
-                    ctx.globalAlpha = opacity;
-                    ctx.beginPath();
-                    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.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([]);
-                    }
-                }
-            }
-        });
+import { drawBase, rotateViewMaterial } from './base';
+export function drawCircle(ctx, mtrl, opts) {
+    rotateViewMaterial(ctx, mtrl, opts, () => {
+        drawBase(ctx, mtrl, opts);
     });
 }

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

@@ -1,6 +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;
+import type { ViewContext2D, ViewScaleInfo, MaterialSize, LinearGradientColor, RadialGradientColor } from '@idraw/types';
+export declare function createColor(ctx: ViewContext2D, color: string | LinearGradientColor | RadialGradientColor | undefined, opts: {
+    viewMaterialSize: MaterialSize;
     viewScaleInfo: ViewScaleInfo;
     opacity: number;
 }): string | CanvasPattern | CanvasGradient;

package/dist/esm/draw/color.js

@@ -1,24 +1,26 @@
 import { mergeHexColorAlpha } from '@idraw/util';
-export function createColorStyle(ctx, color, opts) {
+export function createColor(ctx, color, opts) {
     if (typeof color === 'string') {
         return color;
     }
-    const { viewElementSize, viewScaleInfo, opacity = 1 } = opts;
-    const { x, y } = viewElementSize;
+    const { viewMaterialSize, viewScaleInfo, opacity = 1 } = opts;
+    const { x, y } = viewMaterialSize;
     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
+            y: y + start.y * scale,
         };
         const viewEnd = {
             x: x + end.x * scale,
-            y: y + end.y * 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));
+            if (stop.offset >= 0 && stop.color) {
+                linearGradient.addColorStop(stop.offset, mergeHexColorAlpha(stop.color, opacity));
+            }
         });
         return linearGradient;
     }
@@ -27,12 +29,12 @@ export function createColorStyle(ctx, color, opts) {
         const viewInner = {
             x: x + inner.x * scale,
             y: y + inner.y * scale,
-            radius: inner.radius * scale
+            radius: inner.radius * scale,
         };
         const viewOuter = {
             x: x + outer.x * scale,
             y: y + outer.y * scale,
-            radius: outer.radius * scale
+            radius: outer.radius * scale,
         };
         const radialGradient = ctx.createRadialGradient(viewInner.x, viewInner.y, viewInner.radius, viewOuter.x, viewOuter.y, viewOuter.radius);
         stops.forEach((stop) => {

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

@@ -0,0 +1,2 @@
+import type { StrictMaterial, RendererDrawMaterialOptions, ViewContext2D } from '@idraw/types';
+export declare function drawEllipse(ctx: ViewContext2D, mtrl: StrictMaterial<'ellipse'>, opts: RendererDrawMaterialOptions): void;

package/dist/esm/draw/ellipse.js

@@ -0,0 +1,6 @@
+import { drawBase, rotateViewMaterial } from './base';
+export function drawEllipse(ctx, mtrl, opts) {
+    rotateViewMaterial(ctx, mtrl, opts, () => {
+        drawBase(ctx, mtrl, opts);
+    });
+}

package/dist/esm/draw/foreign-object.d.ts

@@ -0,0 +1,2 @@
+import type { StrictMaterial, RendererDrawMaterialOptions, ViewContext2D } from '@idraw/types';
+export declare function drawForeignObject(ctx: ViewContext2D, mtrl: StrictMaterial<'foreignObject'>, opts: RendererDrawMaterialOptions): void;

package/dist/esm/draw/foreign-object.js

@@ -0,0 +1,15 @@
+import { calcViewMaterialSize } from '@idraw/util';
+import { rotateViewMaterial } from './base';
+export function drawForeignObject(ctx, mtrl, opts) {
+    const content = opts.loader.getContent(mtrl);
+    const { viewScaleInfo } = opts;
+    const { x, y, width, height } = calcViewMaterialSize(mtrl, { viewScaleInfo }) || mtrl;
+    rotateViewMaterial(ctx, mtrl, opts, () => {
+        if (!content && !opts.loader.isDestroyed()) {
+            opts.loader.load(mtrl, opts.materialAssets || {});
+        }
+        if (mtrl.type === 'foreignObject' && content) {
+            ctx.drawImage(content, x, y, width, height);
+        }
+    });
+}

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

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

package/dist/esm/draw/global.js

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

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

@@ -1,3 +1,3 @@
-import type { Element, ElementType, RendererDrawElementOptions, ViewContext2D } from '@idraw/types';
-export declare function drawElement(ctx: ViewContext2D, elem: Element<ElementType>, opts: RendererDrawElementOptions): void;
-export declare function drawGroup(ctx: ViewContext2D, elem: Element<'group'>, opts: RendererDrawElementOptions): void;
+import type { StrictMaterial, MaterialType, RendererDrawMaterialOptions, ViewContext2D } from '@idraw/types';
+export declare function drawMaterial(ctx: ViewContext2D, mtrl: StrictMaterial<MaterialType>, opts: RendererDrawMaterialOptions): void;
+export declare function drawGroup(ctx: ViewContext2D, mtrl: StrictMaterial<'group'>, opts: RendererDrawMaterialOptions): void;