@idraw/renderer 0.3.1 → 0.4.0-alpha.3

package/README.md

@@ -32,7 +32,7 @@ renderer.render(canvas, {
       w: 200,
       h: 100,
       type: "rect",
-      desc: {
+      detail: {
         bgColor: "#f0f0f0",
         borderRadius: 20,
         borderWidth: 10,

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

@@ -0,0 +1,14 @@
+import { ViewContext2D, Element, ElementType, ElementSize, ViewScaleInfo, ViewSizeInfo } from '@idraw/types';
+export declare function drawBox(ctx: ViewContext2D, viewElem: Element<ElementType>, opts: {
+    originElem: Element<ElementType>;
+    calcElemSize: ElementSize;
+    pattern?: string | CanvasPattern | null;
+    renderContent: Function;
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): void;
+export declare function drawBoxShadow(ctx: ViewContext2D, viewElem: Element<ElementType>, opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+    renderContent: Function;
+}): void;

package/dist/esm/draw/base.js

@@ -0,0 +1,245 @@
+import { istype, isColorStr, generateSVGPath, rotateElement, is } from '@idraw/util';
+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,
+        calcElemSize,
+        viewScaleInfo,
+        viewSizeInfo,
+        renderContent: () => {
+            drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
+            drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
+            renderContent === null || renderContent === void 0 ? void 0 : renderContent();
+        }
+    });
+    ctx.globalAlpha = 1;
+}
+function drawClipPath(ctx, viewElem, opts) {
+    const { renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts;
+    const totalScale = viewScaleInfo.scale * 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;
+        let internalX = x - viewOriginX;
+        let 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);
+        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 drawBoxBackground(ctx, viewElem, opts) {
+    var _a, _b;
+    const { pattern, viewScaleInfo } = opts;
+    let transform = [];
+    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;
+        }
+        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.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) === '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);
+            });
+            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 = radialGradient;
+            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();
+        if (transform && transform.length > 0) {
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
+        }
+    }
+}
+function drawBoxBorder(ctx, viewElem, opts) {
+    if (!isColorStr(viewElem.detail.borderColor)) {
+        return;
+    }
+    const { viewScaleInfo } = opts;
+    let borderColor = '#000000';
+    if (isColorStr(viewElem.detail.borderColor) === true) {
+        borderColor = viewElem.detail.borderColor;
+    }
+    const { borderWidth, borderRadius, borderDash } = viewElem.detail;
+    let bw = 0;
+    if (typeof borderWidth === 'number') {
+        bw = borderWidth || 1;
+    }
+    bw = bw * viewScaleInfo.scale;
+    let r = borderRadius || 0;
+    ctx.strokeStyle = borderColor;
+    ctx.setLineDash(borderDash || []);
+    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;
+    }
+    if (borderLeft || borderRight || borderTop || borderBottom) {
+        const { x, y, w, h } = viewElem;
+        if (borderLeft) {
+            ctx.beginPath();
+            ctx.lineWidth = borderLeft * viewScaleInfo.scale;
+            ctx.moveTo(x, y);
+            ctx.lineTo(x, y + h);
+            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.closePath();
+            ctx.stroke();
+        }
+        if (borderTop) {
+            ctx.beginPath();
+            ctx.lineWidth = borderTop * viewScaleInfo.scale;
+            ctx.moveTo(x, y);
+            ctx.lineTo(x + w, y);
+            ctx.closePath();
+            ctx.stroke();
+        }
+        if (borderBottom) {
+            ctx.beginPath();
+            ctx.lineWidth = borderBottom * viewScaleInfo.scale;
+            ctx.moveTo(x, y + h);
+            ctx.lineTo(x + w, y + h);
+            ctx.closePath();
+            ctx.stroke();
+        }
+    }
+    else {
+        let { x, y, w, h } = viewElem;
+        const { boxSizing } = viewElem.detail;
+        if (boxSizing === 'border-box') {
+            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;
+        }
+        r = Math.min(r, w / 2, h / 2);
+        if (r < w / 2 && r < h / 2) {
+            r = r + bw / 2;
+        }
+        ctx.beginPath();
+        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.closePath();
+        ctx.stroke();
+    }
+}
+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 || '#000000';
+        ctx.shadowOffsetX = (shadowOffsetX || 0) * viewScaleInfo.scale;
+        ctx.shadowOffsetY = (shadowOffsetY || 0) * viewScaleInfo.scale;
+        ctx.shadowBlur = (shadowBlur || 0) * viewScaleInfo.scale;
+        renderContent();
+        ctx.restore();
+    }
+    else {
+        renderContent();
+    }
+}

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

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

package/dist/esm/draw/circle.js

@@ -0,0 +1,28 @@
+import { rotateElement } from '@idraw/util';
+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);
+    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();
+    });
+}

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

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

package/dist/esm/draw/elements.js

@@ -0,0 +1,16 @@
+import { drawElement } from './group';
+export function drawElementList(ctx, data, opts) {
+    const { elements = [] } = data;
+    for (let i = 0; i < elements.length; i++) {
+        const elem = elements[i];
+        if (!opts.calculator.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo)) {
+            continue;
+        }
+        try {
+            drawElement(ctx, elem, opts);
+        }
+        catch (err) {
+            console.error(err);
+        }
+    }
+}

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

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

package/dist/esm/draw/group.js

@@ -0,0 +1,110 @@
+import { rotateElement } from '@idraw/util';
+import { drawCircle } from './circle';
+import { drawRect } from './rect';
+import { drawImage } from './image';
+import { drawText } from './text';
+import { drawSVG } from './svg';
+import { drawHTML } from './html';
+import { drawBox } from './base';
+import { drawPath } from './path';
+export function drawElement(ctx, elem, opts) {
+    var _a;
+    if (((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
+        return;
+    }
+    try {
+        switch (elem.type) {
+            case 'rect': {
+                drawRect(ctx, elem, opts);
+                break;
+            }
+            case 'circle': {
+                drawCircle(ctx, elem, opts);
+                break;
+            }
+            case 'text': {
+                drawText(ctx, elem, opts);
+                break;
+            }
+            case 'image': {
+                drawImage(ctx, elem, opts);
+                break;
+            }
+            case 'svg': {
+                drawSVG(ctx, elem, opts);
+                break;
+            }
+            case 'html': {
+                drawHTML(ctx, elem, opts);
+                break;
+            }
+            case 'path': {
+                drawPath(ctx, elem, opts);
+                break;
+            }
+            case 'group': {
+                drawGroup(ctx, elem, opts);
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    }
+    catch (err) {
+        console.error(err);
+    }
+}
+export function drawGroup(ctx, elem, opts) {
+    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { x, y, w, h, angle } = calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, viewScaleInfo, viewSizeInfo);
+    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 },
+            viewScaleInfo,
+            viewSizeInfo,
+            renderContent: () => {
+                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;
+                    if (elem.detail.overflow === 'hidden') {
+                        ctx.save();
+                        ctx.beginPath();
+                        ctx.moveTo(x, y);
+                        ctx.lineTo(x + w, y);
+                        ctx.lineTo(x + w, y + h);
+                        ctx.lineTo(x, y + h);
+                        ctx.closePath();
+                        ctx.clip();
+                    }
+                    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 (!calculator.isElementInView(child, opts.viewScaleInfo, opts.viewSizeInfo)) {
+                            continue;
+                        }
+                        try {
+                            drawElement(ctx, child, Object.assign({}, opts));
+                        }
+                        catch (err) {
+                            console.error(err);
+                        }
+                    }
+                    ctx.restore();
+                }
+            }
+        });
+    });
+}

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

@@ -0,0 +1,2 @@
+import type { Element, RendererDrawElementOptions, ViewContext2D } from '@idraw/types';
+export declare function drawHTML(ctx: ViewContext2D, elem: Element<'html'>, opts: RendererDrawElementOptions): void;

package/dist/esm/draw/html.js

@@ -0,0 +1,14 @@
+import { rotateElement } from '@idraw/util';
+export function drawHTML(ctx, elem, opts) {
+    const content = opts.loader.getContent(elem.uuid);
+    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);
+        }
+        if (elem.type === 'html' && content) {
+            ctx.drawImage(content, x, y, w, h);
+        }
+    });
+}

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

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

package/dist/esm/draw/image.js

@@ -0,0 +1,14 @@
+import { rotateElement } from '@idraw/util';
+export function drawImage(ctx, elem, opts) {
+    const content = opts.loader.getContent(elem.uuid);
+    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.elementAssets || {});
+        }
+        if (elem.type === 'image' && content) {
+            ctx.drawImage(content, x, y, w, h);
+        }
+    });
+}

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

@@ -0,0 +1,7 @@
+export { drawCircle } from './circle';
+export { drawRect } from './rect';
+export { drawImage } from './image';
+export { drawSVG } from './svg';
+export { drawHTML } from './html';
+export { drawText } from './text';
+export { drawElementList } from './elements';

package/dist/esm/draw/index.js

@@ -0,0 +1,7 @@
+export { drawCircle } from './circle';
+export { drawRect } from './rect';
+export { drawImage } from './image';
+export { drawSVG } from './svg';
+export { drawHTML } from './html';
+export { drawText } from './text';
+export { drawElementList } from './elements';

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

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

package/dist/esm/draw/path.js

@@ -0,0 +1,49 @@
+import { rotateElement, generateSVGPath } from '@idraw/util';
+import { drawBox, drawBoxShadow } from './base';
+export function drawPath(ctx, elem, opts) {
+    const { detail } = elem;
+    const { originX, originY, originW, originH } = detail;
+    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    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 scaleNum = viewScaleInfo.scale * viewSizeInfo.devicePixelRatio;
+    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 },
+            viewScaleInfo,
+            viewSizeInfo,
+            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) {
+                            ctx.fillStyle = detail.fill;
+                            ctx.fill(path2d);
+                        }
+                        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();
+                    }
+                });
+            }
+        });
+    });
+}

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

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

package/dist/esm/draw/rect.js

@@ -0,0 +1,23 @@
+import { rotateElement } from '@idraw/util';
+import { drawBox, drawBoxShadow } from './base';
+export function drawRect(ctx, elem, opts) {
+    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    let { 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 }, () => {
+        drawBoxShadow(ctx, viewElem, {
+            viewScaleInfo,
+            viewSizeInfo,
+            renderContent: () => {
+                drawBox(ctx, viewElem, {
+                    originElem: elem,
+                    calcElemSize: { x, y, w, h, angle },
+                    viewScaleInfo,
+                    viewSizeInfo,
+                    renderContent: () => {
+                    }
+                });
+            }
+        });
+    });
+}

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

@@ -0,0 +1,2 @@
+import type { Element, RendererDrawElementOptions, ViewContext2D } from '@idraw/types';
+export declare function drawSVG(ctx: ViewContext2D, elem: Element<'svg'>, opts: RendererDrawElementOptions): void;

package/dist/esm/draw/svg.js

@@ -0,0 +1,14 @@
+import { rotateElement } from '@idraw/util';
+export function drawSVG(ctx, elem, opts) {
+    const content = opts.loader.getContent(elem.uuid);
+    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.elementAssets || {});
+        }
+        if (elem.type === 'svg' && content) {
+            ctx.drawImage(content, x, y, w, h);
+        }
+    });
+}

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

@@ -0,0 +1,2 @@
+import type { Element, RendererDrawElementOptions, ViewContext2D } from '@idraw/types';
+export declare function drawText(ctx: ViewContext2D, elem: Element<'text'>, opts: RendererDrawElementOptions): void;