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

package/dist/esm/draw/path.js

@@ -1,24 +1,57 @@
-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 } = 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,
+            parentOpacity,
             renderContent: () => {
                 drawBoxShadow(ctx, viewElem, {
                     viewScaleInfo,
@@ -30,8 +63,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);
                         }
                         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 } = 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, {
@@ -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 { 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 } = 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, viewSizeInfo }) || 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) {
-            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

@@ -1,53 +1,106 @@
-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 } from './box';
 const detailConfig = getDefaultElementDetailConfig();
+function isTextWidthWithinErrorRange(w0, w1, scale) {
+    if (scale < 0.5) {
+        if (w0 < w1 && (w0 - w1) / w0 > -0.15) {
+            return true;
+        }
+    }
+    return w0 >= w1;
+}
 export function drawText(ctx, elem, opts) {
-    const { calculator, viewScaleInfo, viewSizeInfo } = 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 }, () => {
-        drawBox(ctx, viewElem, {
-            originElem: elem,
-            calcElemSize: { x, y, w, h, angle },
+        drawBoxShadow(ctx, viewElem, {
             viewScaleInfo,
             viewSizeInfo,
             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) => {
+            }
+        });
+        {
+            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 originLineHeight = detail.lineHeight || originFontSize;
+            const lineHeight = originLineHeight * viewScaleInfo.scale;
+            ctx.fillStyle = elem.detail.color || detailConfig.color;
+            ctx.textBaseline = 'top';
+            ctx.$setFont({
+                fontWeight: detail.fontWeight,
+                fontSize: fontSize,
+                fontFamily: enhanceFontFamliy(detail.fontFamily)
+            });
+            let detailText = detail.text.replace(/\r\n/gi, '\n');
+            if (detail.textTransform === 'lowercase') {
+                detailText = detailText.toLowerCase();
+            }
+            else if (detail.textTransform === 'uppercase') {
+                detailText = detailText.toUpperCase();
+            }
+            const fontHeight = lineHeight;
+            const detailTextList = detailText.split('\n');
+            const lines = [];
+            let lineNum = 0;
+            detailTextList.forEach((itemText, idx) => {
+                if (detail.minInlineSize === 'maxContent') {
+                    lines.push({
+                        text: itemText,
+                        width: ctx.$undoPixelRatio(ctx.measureText(itemText).width)
+                    });
+                }
+                else {
                     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] || '';
+                    let splitStr = '';
+                    let tempStrList = itemText.split(splitStr);
+                    if (detail.wordBreak === 'normal') {
+                        const splitStr = ' ';
+                        const wordList = itemText.split(splitStr);
+                        tempStrList = [];
+                        wordList.forEach((word, idx) => {
+                            tempStrList.push(word);
+                            if (idx < wordList.length - 1) {
+                                tempStrList.push(splitStr);
+                            }
+                        });
+                    }
+                    if (tempStrList.length === 1 && detail.overflow === 'visible') {
+                        lines.push({
+                            text: tempStrList[0],
+                            width: ctx.$undoPixelRatio(ctx.measureText(tempStrList[0]).width)
+                        });
+                    }
+                    else if (tempStrList.length > 0) {
+                        for (let i = 0; i < tempStrList.length; i++) {
+                            if (isTextWidthWithinErrorRange(ctx.$doPixelRatio(w), ctx.measureText(lineText + tempStrList[i]).width, viewScaleInfo.scale)) {
+                                lineText += tempStrList[i] || '';
                             }
                             else {
                                 lines.push({
                                     text: lineText,
                                     width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
                                 });
-                                lineText = tempText[i] || '';
+                                lineText = tempStrList[i] || '';
                                 lineNum++;
                             }
-                            if ((lineNum + 1) * fontHeight > h) {
+                            if ((lineNum + 1) * fontHeight > h && detail.overflow === 'hidden') {
                                 break;
                             }
-                            if (tempText.length - 1 === i) {
-                                if ((lineNum + 1) * fontHeight < h) {
+                            if (tempStrList.length - 1 === i) {
+                                if ((lineNum + 1) * fontHeight <= h) {
                                     lines.push({
                                         text: lineText,
                                         width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
@@ -66,45 +119,49 @@ export function drawText(ctx, elem, opts) {
                             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;
-                    if (detail.textShadowColor !== undefined && isColorStr(detail.textShadowColor)) {
-                        ctx.shadowColor = detail.textShadowColor;
-                    }
-                    if (detail.textShadowOffsetX !== undefined && is.number(detail.textShadowOffsetX)) {
-                        ctx.shadowOffsetX = detail.textShadowOffsetX;
-                    }
-                    if (detail.textShadowOffsetY !== undefined && is.number(detail.textShadowOffsetY)) {
-                        ctx.shadowOffsetY = detail.textShadowOffsetY;
+            });
+            let startY = 0;
+            let eachLineStartY = 0;
+            if (fontHeight > fontSize) {
+                eachLineStartY = (fontHeight - fontSize) / 2;
+            }
+            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;
+                if (detail.textShadowColor !== undefined && isColorStr(detail.textShadowColor)) {
+                    ctx.shadowColor = detail.textShadowColor;
+                }
+                if (detail.textShadowOffsetX !== undefined && is.number(detail.textShadowOffsetX)) {
+                    ctx.shadowOffsetX = detail.textShadowOffsetX;
+                }
+                if (detail.textShadowOffsetY !== undefined && is.number(detail.textShadowOffsetY)) {
+                    ctx.shadowOffsetY = detail.textShadowOffsetY;
+                }
+                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;
                     }
-                    if (detail.textShadowBlur !== undefined && is.number(detail.textShadowBlur)) {
-                        ctx.shadowBlur = detail.textShadowBlur;
+                    else if (detail.textAlign === 'right') {
+                        _x = x + (w - line.width);
                     }
-                    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);
-                    });
-                }
+                    ctx.fillText(line.text, _x, _y + fontHeight * i + eachLineStartY);
+                });
             }
-        });
+        }
     });
 }

package/dist/esm/index.d.ts

@@ -1,9 +1,17 @@
 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';
 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;
     scale(num: number): void;
+    setLoadItemMap(itemMap: LoadItemMap): void;
+    getLoadItemMap(): LoadItemMap;
+    getLoader(): Loader;
 }
+export { drawRect } from './draw';

package/dist/esm/index.js

@@ -9,9 +9,9 @@ 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_hasDestroyed, _Renderer_init;
 import { EventEmitter } from '@idraw/util';
-import { drawElementList } from './draw/index';
+import { drawElementList, drawLayout, drawGlobalBackground } from './draw/index';
 import { Loader } from './loader';
 export class Renderer extends EventEmitter {
     constructor(opts) {
@@ -19,15 +19,26 @@ export class Renderer extends EventEmitter {
         _Renderer_instances.add(this);
         _Renderer_opts.set(this, void 0);
         _Renderer_loader.set(this, new Loader());
+        _Renderer_hasDestroyed.set(this, false);
         __classPrivateFieldSet(this, _Renderer_opts, opts, "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, 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 = {
@@ -36,9 +47,18 @@ export class Renderer extends EventEmitter {
             w: opts.viewSizeInfo.width,
             h: opts.viewSizeInfo.height
         };
-        drawElementList(viewContext, data, Object.assign({ loader,
+        const drawOpts = Object.assign({ loader,
             calculator,
-            parentElementSize, elementAssets: data.assets }, 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");
@@ -65,12 +85,23 @@ export class Renderer extends EventEmitter {
             });
         }
     }
+    setLoadItemMap(itemMap) {
+        __classPrivateFieldGet(this, _Renderer_loader, "f").setLoadItemMap(itemMap);
+    }
+    getLoadItemMap() {
+        return __classPrivateFieldGet(this, _Renderer_loader, "f").getLoadItemMap();
+    }
+    getLoader() {
+        return __classPrivateFieldGet(this, _Renderer_loader, "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_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';

package/dist/esm/loader.d.ts

@@ -1,17 +1,12 @@
-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;
+    isDestroyed(): boolean;
+    destroy(): void;
     load(element: Element<LoadElementType>, assets: ElementAssets): void;
     getContent(element: Element<LoadElementType>): LoadContent | null;
+    getLoadItemMap(): LoadItemMap;
+    setLoadItemMap(itemMap: LoadItemMap): void;
 }