@idraw/renderer 0.4.0-beta.3 → 0.4.0-beta.5

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

@@ -1,4 +1,5 @@
 import { ViewContext2D, Element, ElementType, ElementSize, ViewScaleInfo, ViewSizeInfo } from '@idraw/types';
+export declare function getOpacity(elem: Element): number;
 export declare function drawBox(ctx: ViewContext2D, viewElem: Element<ElementType>, opts: {
     originElem: Element<ElementType>;
     calcElemSize: ElementSize;
@@ -6,6 +7,7 @@ export declare function drawBox(ctx: ViewContext2D, viewElem: Element<ElementTyp
     renderContent: () => void;
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
+    parentOpacity: number;
 }): void;
 export declare function drawBoxShadow(ctx: ViewContext2D, viewElem: Element<ElementType>, opts: {
     viewScaleInfo: ViewScaleInfo;

package/dist/esm/draw/box.js

@@ -1,25 +1,29 @@
 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;
+    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;
+    }
+    return opacity;
+}
 export function drawBox(ctx, viewElem, opts) {
     const { pattern, renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts || {};
+    const { parentOpacity } = opts;
+    const opacity = getOpacity(originElem) * parentOpacity;
     drawClipPath(ctx, viewElem, {
         originElem,
         calcElemSize,
         viewScaleInfo,
         viewSizeInfo,
         renderContent: () => {
-            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;
-            }
+            ctx.globalAlpha = opacity;
             drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
             renderContent === null || renderContent === void 0 ? void 0 : renderContent();
             drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
-            ctx.globalAlpha = 1;
+            ctx.globalAlpha = parentOpacity;
         }
     });
 }
@@ -57,11 +61,6 @@ function drawBoxBackground(ctx, viewElem, opts) {
     var _a, _b;
     const { pattern, viewScaleInfo, viewSizeInfo } = opts;
     const transform = [];
-    let { borderRadius } = viewElem.detail;
-    const { borderWidth } = viewElem.detail;
-    if (typeof borderWidth !== 'number') {
-        borderRadius = 0;
-    }
     if (viewElem.detail.background || pattern) {
         const { x, y, w, h, radiusList } = calcViewBoxSize(viewElem, {
             viewScaleInfo,
@@ -120,19 +119,12 @@ 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;
     const { scale } = viewScaleInfo;
     let borderColor = defaultElemConfig.borderColor;
@@ -263,7 +255,6 @@ function drawBoxBorder(ctx, viewElem, opts) {
         ctx.arcTo(x, y, x + w, y, radiusList[0]);
         ctx.closePath();
         ctx.stroke();
-        ctx.globalAlpha = 1;
     }
     ctx.setLineDash([]);
 }

package/dist/esm/draw/circle.js

@@ -1,10 +1,17 @@
 import { rotateElement } from '@idraw/util';
 import { createColorStyle } from './color';
-import { drawBoxShadow } from './box';
+import { drawBoxShadow, getOpacity } 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 { background = '#000000', borderColor = '#000000', boxSizing, borderWidth = 0 } = 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];
+    }
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x, y, w, h } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo)) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
     rotateElement(ctx, { x, y, w, h, angle }, () => {
@@ -12,17 +19,26 @@ export function drawCircle(ctx, elem, opts) {
             viewScaleInfo,
             viewSizeInfo,
             renderContent: () => {
-                var _a, _b;
-                const a = w / 2;
-                const b = h / 2;
+                let a = w / 2;
+                let 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 (bw > 0) {
+                    if (boxSizing === 'border-box') {
+                        a = a - bw;
+                        b = b - bw;
+                    }
+                    else if (boxSizing === 'center-line') {
+                        a = a - bw / 2;
+                        b = b - bw / 2;
+                    }
+                    else {
+                        a = a - bw;
+                        b = b - bw;
+                    }
                 }
+                const opacity = getOpacity(viewElem) * parentOpacity;
+                ctx.globalAlpha = opacity;
                 if (typeof borderWidth === 'number' && borderWidth > 0) {
                     const ba = borderWidth / 2 + a;
                     const bb = borderWidth / 2 + b;
@@ -43,7 +59,7 @@ export function drawCircle(ctx, elem, opts) {
                 ctx.circle(centerX, centerY, a, b, 0, 0, 2 * Math.PI);
                 ctx.closePath();
                 ctx.fill();
-                ctx.globalAlpha = 1;
+                ctx.globalAlpha = parentOpacity;
             }
         });
     });

package/dist/esm/draw/elements.js

@@ -4,6 +4,7 @@ const defaultDetail = getDefaultElementDetailConfig();
 export function drawElementList(ctx, data, opts) {
     var _a;
     const { elements = [] } = data;
+    const { parentOpacity } = opts;
     for (let i = 0; i < elements.length; i++) {
         const element = elements[i];
         const elem = Object.assign(Object.assign({}, element), {
@@ -15,7 +16,9 @@ export function drawElementList(ctx, data, opts) {
             }
         }
         try {
-            drawElement(ctx, elem, opts);
+            drawElement(ctx, elem, Object.assign(Object.assign({}, opts), {
+                parentOpacity
+            }));
         }
         catch (err) {
             console.error(err);

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, drawBoxShadow } from './box';
+import { drawBox, drawBoxShadow, getOpacity } from './box';
 import { drawPath } from './path';
 export function drawElement(ctx, elem, opts) {
     var _a;
@@ -57,10 +57,11 @@ export function drawElement(ctx, elem, opts) {
     }
 }
 export function drawGroup(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { calculator, viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
     const { x, y, w, h, angle } = (calculator === null || calculator === void 0 ? void 0 : calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, viewScaleInfo, viewSizeInfo)) || elem;
     const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
     rotateElement(ctx, { x, y, w, h, angle }, () => {
+        ctx.globalAlpha = getOpacity(elem) * parentOpacity;
         drawBoxShadow(ctx, viewElem, {
             viewScaleInfo,
             viewSizeInfo,
@@ -70,6 +71,7 @@ export function drawGroup(ctx, elem, opts) {
                     calcElemSize: { x, y, w, h, angle },
                     viewScaleInfo,
                     viewSizeInfo,
+                    parentOpacity,
                     renderContent: () => {
                         const { x, y, w, h, radiusList } = calcViewBoxSize(viewElem, {
                             viewScaleInfo,
@@ -110,7 +112,7 @@ export function drawGroup(ctx, elem, opts) {
                                     }
                                 }
                                 try {
-                                    drawElement(ctx, child, Object.assign({}, opts));
+                                    drawElement(ctx, child, Object.assign(Object.assign({}, opts), { parentOpacity: parentOpacity * getOpacity(elem) }));
                                 }
                                 catch (err) {
                                     console.error(err);
@@ -118,12 +120,12 @@ export function drawGroup(ctx, elem, opts) {
                             }
                         }
                         if (elem.detail.overflow === 'hidden') {
-                            ctx.globalAlpha = 1;
                             ctx.restore();
                         }
                     }
                 });
             }
         });
+        ctx.globalAlpha = parentOpacity;
     });
 }

package/dist/esm/draw/html.js

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

package/dist/esm/draw/image.js

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

package/dist/esm/draw/path.js

@@ -3,7 +3,7 @@ import { drawBox, drawBoxShadow } from './box';
 export function drawPath(ctx, elem, opts) {
     const { detail } = elem;
     const { originX, originY, originW, originH } = detail;
-    const { calculator, viewScaleInfo, viewSizeInfo } = 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 scaleW = w / originW;
     const scaleH = h / originH;
@@ -19,6 +19,7 @@ export function drawPath(ctx, elem, opts) {
             calcElemSize: { x, y, w, h, angle },
             viewScaleInfo,
             viewSizeInfo,
+            parentOpacity,
             renderContent: () => {
                 drawBoxShadow(ctx, viewElem, {
                     viewScaleInfo,

package/dist/esm/draw/rect.js

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

package/dist/esm/draw/svg.js

@@ -1,17 +1,17 @@
 import { rotateElement } from '@idraw/util';
+import { getOpacity } from './box';
 export function drawSVG(ctx, elem, opts) {
     const content = opts.loader.getContent(elem);
-    const { calculator, viewScaleInfo, viewSizeInfo } = 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;
     rotateElement(ctx, { x, y, w, h, angle }, () => {
         if (!content) {
             opts.loader.load(elem, opts.elementAssets || {});
         }
         if (elem.type === 'svg' && content) {
-            const { opacity } = elem.detail;
-            ctx.globalAlpha = opacity ? opacity : 1;
+            ctx.globalAlpha = getOpacity(elem) * parentOpacity;
             ctx.drawImage(content, x, y, w, h);
-            ctx.globalAlpha = 1;
+            ctx.globalAlpha = parentOpacity;
         }
     });
 }

package/dist/esm/draw/text.js

@@ -3,7 +3,7 @@ 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 { 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 viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
     rotateElement(ctx, { x, y, w, h, angle }, () => {
@@ -12,6 +12,7 @@ export function drawText(ctx, elem, opts) {
             calcElemSize: { x, y, w, h, angle },
             viewScaleInfo,
             viewSizeInfo,
+            parentOpacity,
             renderContent: () => {
                 const detail = Object.assign(Object.assign({}, detailConfig), elem.detail);
                 const fontSize = (detail.fontSize || detailConfig.fontSize) * viewScaleInfo.scale;

package/dist/esm/index.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '@idraw/util';
+import type { LoadItemMap } from '@idraw/types';
 import type { Data, BoardRenderer, RendererOptions, RendererEventMap, RendererDrawOptions } from '@idraw/types';
 export declare class Renderer extends EventEmitter<RendererEventMap> implements BoardRenderer {
     #private;
@@ -6,4 +7,6 @@ export declare class Renderer extends EventEmitter<RendererEventMap> implements
     updateOptions(opts: RendererOptions): void;
     drawData(data: Data, opts: RendererDrawOptions): void;
     scale(num: number): void;
+    setLoadItemMap(itemMap: LoadItemMap): void;
+    getLoadItemMap(): LoadItemMap;
 }

package/dist/esm/index.js

@@ -38,7 +38,7 @@ export class Renderer extends EventEmitter {
         };
         drawElementList(viewContext, data, Object.assign({ loader,
             calculator,
-            parentElementSize, elementAssets: data.assets }, opts));
+            parentElementSize, elementAssets: data.assets, parentOpacity: 1 }, opts));
     }
     scale(num) {
         const { sharer } = __classPrivateFieldGet(this, _Renderer_opts, "f");
@@ -65,6 +65,12 @@ export class Renderer extends EventEmitter {
             });
         }
     }
+    setLoadItemMap(itemMap) {
+        __classPrivateFieldGet(this, _Renderer_loader, "f").setLoadItemMap(itemMap);
+    }
+    getLoadItemMap() {
+        return __classPrivateFieldGet(this, _Renderer_loader, "f").getLoadItemMap();
+    }
 }
 _Renderer_opts = new WeakMap(), _Renderer_loader = new WeakMap(), _Renderer_instances = new WeakSet(), _Renderer_init = function _Renderer_init() {
     const loader = __classPrivateFieldGet(this, _Renderer_loader, "f");

package/dist/esm/loader.d.ts

@@ -1,17 +1,10 @@
-import type { RendererLoader, LoaderEventMap, LoadContent, LoadElementType, Element, ElementAssets } from '@idraw/types';
+import type { RendererLoader, LoaderEventMap, LoadContent, LoadItemMap, LoadElementType, Element, ElementAssets } from '@idraw/types';
 import { EventEmitter } from '@idraw/util';
 export declare class Loader extends EventEmitter<LoaderEventMap> implements RendererLoader {
-    private _loadFuncMap;
-    private _currentLoadItemMap;
-    private _storageLoadItemMap;
+    #private;
     constructor();
-    private _registerLoadFunc;
-    private _getLoadElementSource;
-    private _createLoadItem;
-    private _emitLoad;
-    private _emitError;
-    private _loadResource;
-    private _isExistingErrorStorage;
     load(element: Element<LoadElementType>, assets: ElementAssets): void;
     getContent(element: Element<LoadElementType>): LoadContent | null;
+    getLoadItemMap(): LoadItemMap;
+    setLoadItemMap(itemMap: LoadItemMap): void;
 }