@idraw/renderer 0.4.0-beta.9 → 0.4.0

package/dist/esm/draw/image.js

@@ -1,9 +1,9 @@
-import { rotateElement, calcViewBoxSize } from '@idraw/util';
+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 { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, 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, {
@@ -17,7 +17,7 @@ export function drawImage(ctx, elem, opts) {
                     viewSizeInfo,
                     parentOpacity,
                     renderContent: () => {
-                        if (!content) {
+                        if (!content && !opts.loader.isDestroyed()) {
                             opts.loader.load(elem, opts.elementAssets || {});
                         }
                         if (elem.type === 'image' && content) {
@@ -26,6 +26,10 @@ export function drawImage(ctx, elem, opts) {
                                 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();
@@ -35,9 +39,46 @@ export function drawImage(ctx, elem, opts) {
                             ctx.arcTo(x, y + h, x, y, radiusList[3]);
                             ctx.arcTo(x, y, x + w, y, radiusList[0]);
                             ctx.closePath();
-                            ctx.fill();
-                            ctx.clip();
-                            ctx.drawImage(content, x, y, w, h);
+                            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();
                         }

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

@@ -4,5 +4,7 @@ export { drawImage } from './image';
 export { drawSVG } from './svg';
 export { drawHTML } from './html';
 export { drawText } from './text';
+export { drawGroup, drawElement } from './group';
 export { drawElementList } from './elements';
-export { drawUnderlay } from './underlay';
+export { drawLayout } from './layout';
+export { drawGlobalBackground } from './global';

package/dist/esm/draw/index.js

@@ -4,5 +4,7 @@ export { drawImage } from './image';
 export { drawSVG } from './svg';
 export { drawHTML } from './html';
 export { drawText } from './text';
+export { drawGroup, drawElement } from './group';
 export { drawElementList } from './elements';
-export { drawUnderlay } from './underlay';
+export { drawLayout } from './layout';
+export { drawGlobalBackground } from './global';

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

@@ -0,0 +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;

package/dist/esm/draw/layout.js

@@ -0,0 +1,44 @@
+import { calcViewElementSize, calcViewBoxSize } from '@idraw/util';
+import { drawBoxShadow, drawBoxBackground, drawBoxBorder } from './box';
+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 });
+    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');
+        ctx.clip('nonzero');
+    }
+    renderContent(ctx);
+    if (layout.detail.overflow === 'hidden') {
+        ctx.restore();
+    }
+    drawBoxBorder(ctx, viewElem, { originElem: elem, viewScaleInfo, viewSizeInfo });
+    ctx.globalAlpha = parentOpacity;
+}

package/dist/esm/draw/path.js

@@ -1,21 +1,55 @@
-import { rotateElement, generateSVGPath } from '@idraw/util';
+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 } = detail;
-    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { 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, viewElem, {
-            originElem: elem,
+        drawBox(ctx, boxViewElem, {
+            originElem: boxOriginElem,
             calcElemSize: { x, y, w, h, angle },
             viewScaleInfo,
             viewSizeInfo,
@@ -31,8 +65,15 @@ export function drawPath(ctx, elem, opts) {
                         const pathStr = generateSVGPath(detail.commands || []);
                         const path2d = new Path2D(pathStr);
                         if (detail.fill) {
-                            ctx.fillStyle = detail.fill;
-                            ctx.fill(path2d);
+                            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;

package/dist/esm/draw/rect.js

@@ -1,8 +1,8 @@
-import { rotateElement } from '@idraw/util';
+import { rotateElement, calcViewElementSize } from '@idraw/util';
 import { drawBox, drawBoxShadow } from './box';
 export function drawRect(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, 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, {

package/dist/esm/draw/svg.js

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

package/dist/esm/draw/text.js

@@ -1,87 +1,46 @@
-import { rotateElement } from '@idraw/util';
+import { rotateElement, calcViewElementSize, enhanceFontFamliy } from '@idraw/util';
 import { is, isColorStr, getDefaultElementDetailConfig } from '@idraw/util';
-import { drawBox } from './box';
+import { drawBox, drawBoxShadow, getOpacity } from './box';
 const detailConfig = getDefaultElementDetailConfig();
 export function drawText(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize(elem, viewScaleInfo, viewSizeInfo)) || elem;
+    const { viewScaleInfo, viewSizeInfo, parentOpacity, calculator } = 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 }, () => {
-        drawBox(ctx, viewElem, {
-            originElem: elem,
-            calcElemSize: { x, y, w, h, angle },
+        var _a, _b;
+        drawBoxShadow(ctx, viewElem, {
             viewScaleInfo,
             viewSizeInfo,
-            parentOpacity,
             renderContent: () => {
-                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 || detailConfig.color;
-                ctx.textBaseline = 'top';
-                ctx.$setFont({
-                    fontWeight: detail.fontWeight,
-                    fontSize: fontSize,
-                    fontFamily: detail.fontFamily
+                drawBox(ctx, viewElem, {
+                    originElem: elem,
+                    calcElemSize: { x, y, w, h, angle },
+                    viewScaleInfo,
+                    viewSizeInfo,
+                    parentOpacity
                 });
-                const detailText = detail.text.replace(/\r\n/gi, '\n');
-                const fontHeight = lineHeight;
-                const detailTextList = detailText.split('\n');
-                const lines = [];
-                let lineNum = 0;
-                detailTextList.forEach((tempText, idx) => {
-                    let lineText = '';
-                    if (tempText.length > 0) {
-                        for (let i = 0; i < tempText.length; i++) {
-                            if (ctx.measureText(lineText + (tempText[i] || '')).width < ctx.$doPixelRatio(w)) {
-                                lineText += tempText[i] || '';
-                            }
-                            else {
-                                lines.push({
-                                    text: lineText,
-                                    width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
-                                });
-                                lineText = tempText[i] || '';
-                                lineNum++;
-                            }
-                            if ((lineNum + 1) * fontHeight > h) {
-                                break;
-                            }
-                            if (tempText.length - 1 === i) {
-                                if ((lineNum + 1) * fontHeight < h) {
-                                    lines.push({
-                                        text: lineText,
-                                        width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
-                                    });
-                                    if (idx < detailTextList.length - 1) {
-                                        lineNum++;
-                                    }
-                                    break;
-                                }
-                            }
-                        }
-                    }
-                    else {
-                        lines.push({
-                            text: '',
-                            width: 0
-                        });
-                    }
-                });
-                let startY = 0;
-                if (lines.length * fontHeight < h) {
-                    if (elem.detail.verticalAlign === 'top') {
-                        startY = 0;
-                    }
-                    else if (elem.detail.verticalAlign === 'bottom') {
-                        startY += h - lines.length * fontHeight;
-                    }
-                    else {
-                        startY += (h - lines.length * fontHeight) / 2;
-                    }
-                }
-                {
-                    const _y = y + startY;
+            }
+        });
+        {
+            const detail = Object.assign(Object.assign({}, detailConfig), elem.detail);
+            const originFontSize = detail.fontSize || detailConfig.fontSize;
+            const fontSize = originFontSize * viewScaleInfo.scale;
+            if (fontSize < 2) {
+                return;
+            }
+            const { parentOpacity } = opts;
+            const opacity = getOpacity(elem) * parentOpacity;
+            ctx.globalAlpha = opacity;
+            ctx.fillStyle = elem.detail.color || detailConfig.color;
+            ctx.textBaseline = 'top';
+            ctx.$setFont({
+                fontWeight: detail.fontWeight,
+                fontSize: fontSize,
+                fontFamily: enhanceFontFamliy(detail.fontFamily)
+            });
+            {
+                const virtualTextDetail = calculator.getVirtualFlatItem(elem.uuid);
+                if (Array.isArray(virtualTextDetail === null || virtualTextDetail === void 0 ? void 0 : virtualTextDetail.textLines) && ((_a = virtualTextDetail === null || virtualTextDetail === void 0 ? void 0 : virtualTextDetail.textLines) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                     if (detail.textShadowColor !== undefined && isColorStr(detail.textShadowColor)) {
                         ctx.shadowColor = detail.textShadowColor;
                     }
@@ -94,18 +53,12 @@ export function drawText(ctx, elem, opts) {
                     if (detail.textShadowBlur !== undefined && is.number(detail.textShadowBlur)) {
                         ctx.shadowBlur = detail.textShadowBlur;
                     }
-                    lines.forEach((line, i) => {
-                        let _x = x;
-                        if (detail.textAlign === 'center') {
-                            _x = x + (w - line.width) / 2;
-                        }
-                        else if (detail.textAlign === 'right') {
-                            _x = x + (w - line.width);
-                        }
-                        ctx.fillText(line.text, _x, _y + fontHeight * i);
+                    (_b = virtualTextDetail === null || virtualTextDetail === void 0 ? void 0 : virtualTextDetail.textLines) === null || _b === void 0 ? void 0 : _b.forEach((line) => {
+                        ctx.fillText(line.text, x + line.x * viewScaleInfo.scale, y + line.y * viewScaleInfo.scale);
                     });
                 }
             }
-        });
+            ctx.globalAlpha = parentOpacity;
+        }
     });
 }

package/dist/esm/index.d.ts

@@ -2,9 +2,12 @@ import { EventEmitter } from '@idraw/util';
 import type { LoadItemMap } from '@idraw/types';
 import { Loader } from './loader';
 import type { Data, BoardRenderer, RendererOptions, RendererEventMap, RendererDrawOptions } from '@idraw/types';
+import { Calculator } from './calculator';
+export { Calculator };
 export declare class Renderer extends EventEmitter<RendererEventMap> implements BoardRenderer {
     #private;
     constructor(opts: RendererOptions);
+    isDestroyed(): boolean;
     destroy(): void;
     updateOptions(opts: RendererOptions): void;
     drawData(data: Data, opts: RendererDrawOptions): void;
@@ -12,5 +15,6 @@ export declare class Renderer extends EventEmitter<RendererEventMap> implements
     setLoadItemMap(itemMap: LoadItemMap): void;
     getLoadItemMap(): LoadItemMap;
     getLoader(): Loader;
+    getCalculator(): Calculator;
 }
-export { drawRect } from './draw';
+export { drawCircle, drawRect, drawImage, drawSVG, drawHTML, drawText, drawGroup, drawElement, drawElementList, drawLayout, drawGlobalBackground } from './draw';

package/dist/esm/index.js

@@ -9,30 +9,43 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _Renderer_instances, _Renderer_opts, _Renderer_loader, _Renderer_init;
+var _Renderer_instances, _Renderer_opts, _Renderer_loader, _Renderer_calculator, _Renderer_hasDestroyed, _Renderer_init;
 import { EventEmitter } from '@idraw/util';
-import { drawElementList, drawUnderlay } from './draw/index';
+import { drawElementList, drawLayout, drawGlobalBackground } from './draw/index';
 import { Loader } from './loader';
+import { Calculator } from './calculator';
+export { Calculator };
 export class Renderer extends EventEmitter {
     constructor(opts) {
         super();
         _Renderer_instances.add(this);
         _Renderer_opts.set(this, void 0);
         _Renderer_loader.set(this, new Loader());
+        _Renderer_calculator.set(this, void 0);
+        _Renderer_hasDestroyed.set(this, false);
         __classPrivateFieldSet(this, _Renderer_opts, opts, "f");
+        __classPrivateFieldSet(this, _Renderer_calculator, new Calculator({
+            tempContext: opts.tempContext
+        }), "f");
         __classPrivateFieldGet(this, _Renderer_instances, "m", _Renderer_init).call(this);
     }
+    isDestroyed() {
+        return __classPrivateFieldGet(this, _Renderer_hasDestroyed, "f");
+    }
     destroy() {
+        this.clear();
         __classPrivateFieldSet(this, _Renderer_opts, null, "f");
         __classPrivateFieldGet(this, _Renderer_loader, "f").destroy();
         __classPrivateFieldSet(this, _Renderer_loader, null, "f");
+        __classPrivateFieldSet(this, _Renderer_hasDestroyed, true, "f");
     }
     updateOptions(opts) {
         __classPrivateFieldSet(this, _Renderer_opts, opts, "f");
     }
     drawData(data, opts) {
         const loader = __classPrivateFieldGet(this, _Renderer_loader, "f");
-        const { calculator } = __classPrivateFieldGet(this, _Renderer_opts, "f");
+        const calculator = __classPrivateFieldGet(this, _Renderer_calculator, "f");
+        const { sharer } = __classPrivateFieldGet(this, _Renderer_opts, "f");
         const viewContext = __classPrivateFieldGet(this, _Renderer_opts, "f").viewContext;
         viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
         const parentElementSize = {
@@ -41,14 +54,24 @@ export class Renderer extends EventEmitter {
             w: opts.viewSizeInfo.width,
             h: opts.viewSizeInfo.height
         };
-        if (data.underlay) {
-            drawUnderlay(viewContext, data.underlay, Object.assign({ loader,
-                calculator,
-                parentElementSize, parentOpacity: 1 }, opts));
+        if (opts.forceDrawAll === true) {
+            __classPrivateFieldGet(this, _Renderer_calculator, "f").resetVirtualFlatItemMap(data, {
+                viewScaleInfo: opts.viewScaleInfo,
+                viewSizeInfo: opts.viewSizeInfo
+            });
         }
-        drawElementList(viewContext, data, Object.assign({ loader,
+        const drawOpts = Object.assign({ loader,
             calculator,
-            parentElementSize, elementAssets: data.assets, parentOpacity: 1 }, opts));
+            parentElementSize, elementAssets: data.assets, parentOpacity: 1, overrideElementMap: sharer === null || sharer === void 0 ? void 0 : sharer.getActiveOverrideElemenentMap() }, opts);
+        drawGlobalBackground(viewContext, data.global, drawOpts);
+        if (data.layout) {
+            drawLayout(viewContext, data.layout, drawOpts, () => {
+                drawElementList(viewContext, data, drawOpts);
+            });
+        }
+        else {
+            drawElementList(viewContext, data, drawOpts);
+        }
     }
     scale(num) {
         const { sharer } = __classPrivateFieldGet(this, _Renderer_opts, "f");
@@ -84,13 +107,17 @@ export class Renderer extends EventEmitter {
     getLoader() {
         return __classPrivateFieldGet(this, _Renderer_loader, "f");
     }
+    getCalculator() {
+        return __classPrivateFieldGet(this, _Renderer_calculator, "f");
+    }
 }
-_Renderer_opts = new WeakMap(), _Renderer_loader = new WeakMap(), _Renderer_instances = new WeakSet(), _Renderer_init = function _Renderer_init() {
+_Renderer_opts = new WeakMap(), _Renderer_loader = new WeakMap(), _Renderer_calculator = new WeakMap(), _Renderer_hasDestroyed = new WeakMap(), _Renderer_instances = new WeakSet(), _Renderer_init = function _Renderer_init() {
     const loader = __classPrivateFieldGet(this, _Renderer_loader, "f");
     loader.on('load', (e) => {
         this.trigger('load', e);
     });
-    loader.on('error', () => {
+    loader.on('error', (e) => {
+        console.error(e);
     });
 };
-export { drawRect } from './draw';
+export { drawCircle, drawRect, drawImage, drawSVG, drawHTML, drawText, drawGroup, drawElement, drawElementList, drawLayout, drawGlobalBackground } from './draw';

package/dist/esm/loader.d.ts

@@ -1,8 +1,11 @@
-import type { RendererLoader, LoaderEventMap, LoadContent, LoadItemMap, LoadElementType, Element, ElementAssets } from '@idraw/types';
+import type { RendererLoader, LoaderEventMap, LoadContent, LoadItemMap, LoadElementType, Element, ElementAssets, RecursivePartial } from '@idraw/types';
 import { EventEmitter } from '@idraw/util';
 export declare class Loader extends EventEmitter<LoaderEventMap> implements RendererLoader {
     #private;
     constructor();
+    isDestroyed(): boolean;
+    reset(): void;
+    resetElementAsset(element: Element<LoadElementType> | RecursivePartial<Element>): void;
     destroy(): void;
     load(element: Element<LoadElementType>, assets: ElementAssets): void;
     getContent(element: Element<LoadElementType>): LoadContent | null;