@idraw/renderer 0.4.0-beta.4 → 0.4.0-beta.40

package/dist/esm/loader.d.ts

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

package/dist/esm/loader.js

@@ -18,7 +18,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _Loader_instances, _Loader_loadFuncMap, _Loader_currentLoadItemMap, _Loader_storageLoadItemMap, _Loader_registerLoadFunc, _Loader_getLoadElementSource, _Loader_createLoadItem, _Loader_emitLoad, _Loader_emitError, _Loader_loadResource, _Loader_isExistingErrorStorage;
+var _Loader_instances, _Loader_loadFuncMap, _Loader_currentLoadItemMap, _Loader_storageLoadItemMap, _Loader_hasDestroyed, _Loader_registerLoadFunc, _Loader_getLoadElementSource, _Loader_createLoadItem, _Loader_emitLoad, _Loader_emitError, _Loader_loadResource, _Loader_isExistingErrorStorage;
 import { loadImage, loadHTML, loadSVG, EventEmitter, createAssetId, isAssetId, createUUID } from '@idraw/util';
 const supportElementTypes = ['image', 'svg', 'html'];
 const getAssetIdFromElement = (element) => {
@@ -48,6 +48,7 @@ export class Loader extends EventEmitter {
         _Loader_loadFuncMap.set(this, {});
         _Loader_currentLoadItemMap.set(this, {});
         _Loader_storageLoadItemMap.set(this, {});
+        _Loader_hasDestroyed.set(this, false);
         __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, 'image', (elem, assets) => __awaiter(this, void 0, void 0, function* () {
             var _a;
             const src = ((_a = assets[elem.detail.src]) === null || _a === void 0 ? void 0 : _a.value) || elem.detail.src;
@@ -59,11 +60,11 @@ export class Loader extends EventEmitter {
             };
         }));
         __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, 'html', (elem, assets) => __awaiter(this, void 0, void 0, function* () {
-            var _b;
-            const html = ((_b = assets[elem.detail.html]) === null || _b === void 0 ? void 0 : _b.value) || elem.detail.html;
+            var _a;
+            const html = ((_a = assets[elem.detail.html]) === null || _a === void 0 ? void 0 : _a.value) || elem.detail.html;
             const content = yield loadHTML(html, {
-                width: elem.detail.width || elem.w,
-                height: elem.detail.height || elem.h
+                width: elem.detail.originW || elem.w,
+                height: elem.detail.originH || elem.h
             });
             return {
                 uuid: elem.uuid,
@@ -72,8 +73,8 @@ export class Loader extends EventEmitter {
             };
         }));
         __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, 'svg', (elem, assets) => __awaiter(this, void 0, void 0, function* () {
-            var _c;
-            const svg = ((_c = assets[elem.detail.svg]) === null || _c === void 0 ? void 0 : _c.value) || elem.detail.svg;
+            var _a;
+            const svg = ((_a = assets[elem.detail.svg]) === null || _a === void 0 ? void 0 : _a.value) || elem.detail.svg;
             const content = yield loadSVG(svg);
             return {
                 uuid: elem.uuid,
@@ -82,7 +83,20 @@ export class Loader extends EventEmitter {
             };
         }));
     }
+    isDestroyed() {
+        return __classPrivateFieldGet(this, _Loader_hasDestroyed, "f");
+    }
+    destroy() {
+        __classPrivateFieldSet(this, _Loader_hasDestroyed, true, "f");
+        this.clear();
+        __classPrivateFieldSet(this, _Loader_loadFuncMap, null, "f");
+        __classPrivateFieldSet(this, _Loader_currentLoadItemMap, null, "f");
+        __classPrivateFieldSet(this, _Loader_storageLoadItemMap, null, "f");
+    }
     load(element, assets) {
+        if (__classPrivateFieldGet(this, _Loader_hasDestroyed, "f") === true) {
+            return;
+        }
         if (__classPrivateFieldGet(this, _Loader_instances, "m", _Loader_isExistingErrorStorage).call(this, element)) {
             return;
         }
@@ -102,7 +116,7 @@ export class Loader extends EventEmitter {
         __classPrivateFieldSet(this, _Loader_storageLoadItemMap, itemMap, "f");
     }
 }
-_Loader_loadFuncMap = new WeakMap(), _Loader_currentLoadItemMap = new WeakMap(), _Loader_storageLoadItemMap = new WeakMap(), _Loader_instances = new WeakSet(), _Loader_registerLoadFunc = function _Loader_registerLoadFunc(type, func) {
+_Loader_loadFuncMap = new WeakMap(), _Loader_currentLoadItemMap = new WeakMap(), _Loader_storageLoadItemMap = new WeakMap(), _Loader_hasDestroyed = new WeakMap(), _Loader_instances = new WeakSet(), _Loader_registerLoadFunc = function _Loader_registerLoadFunc(type, func) {
     __classPrivateFieldGet(this, _Loader_loadFuncMap, "f")[type] = func;
 }, _Loader_getLoadElementSource = function _Loader_getLoadElementSource(element) {
     var _a, _b, _c;
@@ -130,42 +144,52 @@ _Loader_loadFuncMap = new WeakMap(), _Loader_currentLoadItemMap = new WeakMap(),
 }, _Loader_emitLoad = function _Loader_emitLoad(item) {
     const assetId = getAssetIdFromElement(item.element);
     const storageItem = __classPrivateFieldGet(this, _Loader_storageLoadItemMap, "f")[assetId];
-    if (storageItem) {
-        if (storageItem.startTime < item.startTime) {
+    if (!__classPrivateFieldGet(this, _Loader_hasDestroyed, "f")) {
+        if (storageItem) {
+            if (storageItem.startTime < item.startTime) {
+                __classPrivateFieldGet(this, _Loader_storageLoadItemMap, "f")[assetId] = item;
+                this.trigger('load', Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
+            }
+        }
+        else {
             __classPrivateFieldGet(this, _Loader_storageLoadItemMap, "f")[assetId] = item;
             this.trigger('load', Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
         }
     }
-    else {
-        __classPrivateFieldGet(this, _Loader_storageLoadItemMap, "f")[assetId] = item;
-        this.trigger('load', Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
-    }
 }, _Loader_emitError = function _Loader_emitError(item) {
+    var _a;
     const assetId = getAssetIdFromElement(item.element);
-    const storageItem = __classPrivateFieldGet(this, _Loader_storageLoadItemMap, "f")[assetId];
-    if (storageItem) {
-        if (storageItem.startTime < item.startTime) {
+    const storageItem = (_a = __classPrivateFieldGet(this, _Loader_storageLoadItemMap, "f")) === null || _a === void 0 ? void 0 : _a[assetId];
+    if (!__classPrivateFieldGet(this, _Loader_hasDestroyed, "f")) {
+        if (storageItem) {
+            if (storageItem.startTime < item.startTime) {
+                __classPrivateFieldGet(this, _Loader_storageLoadItemMap, "f")[assetId] = item;
+                this.trigger('error', Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
+            }
+        }
+        else {
             __classPrivateFieldGet(this, _Loader_storageLoadItemMap, "f")[assetId] = item;
             this.trigger('error', Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
         }
     }
-    else {
-        __classPrivateFieldGet(this, _Loader_storageLoadItemMap, "f")[assetId] = item;
-        this.trigger('error', Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
-    }
 }, _Loader_loadResource = function _Loader_loadResource(element, assets) {
     const item = __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_createLoadItem).call(this, element);
     const assetId = getAssetIdFromElement(element);
+    if (__classPrivateFieldGet(this, _Loader_currentLoadItemMap, "f")[assetId]) {
+        return;
+    }
     __classPrivateFieldGet(this, _Loader_currentLoadItemMap, "f")[assetId] = item;
     const loadFunc = __classPrivateFieldGet(this, _Loader_loadFuncMap, "f")[element.type];
-    if (typeof loadFunc === 'function') {
+    if (typeof loadFunc === 'function' && !__classPrivateFieldGet(this, _Loader_hasDestroyed, "f")) {
         item.startTime = Date.now();
         loadFunc(element, assets)
             .then((result) => {
-            item.content = result.content;
-            item.endTime = Date.now();
-            item.status = 'load';
-            __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_emitLoad).call(this, item);
+            if (!__classPrivateFieldGet(this, _Loader_hasDestroyed, "f")) {
+                item.content = result.content;
+                item.endTime = Date.now();
+                item.status = 'load';
+                __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_emitLoad).call(this, item);
+            }
         })
             .catch((err) => {
             console.warn(`Load element source "${item.source}" fail`, err, element);

package/dist/esm/view-visible/index.d.ts

@@ -0,0 +1,22 @@
+import { Elements, ViewScaleInfo, ViewSizeInfo, ViewRectInfo, VirtualFlatItemMap, ViewContext2D } from '@idraw/types';
+export declare function sortElementsViewVisiableInfoMap(elements: Elements, opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+    tempContext: ViewContext2D;
+}): {
+    virtualFlatItemMap: VirtualFlatItemMap;
+    visibleCount: number;
+    invisibleCount: number;
+};
+export declare function updateVirtualFlatItemMapStatus(virtualFlatItemMap: VirtualFlatItemMap, opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): {
+    virtualFlatItemMap: VirtualFlatItemMap;
+    visibleCount: number;
+    invisibleCount: number;
+};
+export declare function calcVisibleOriginCanvasRectInfo(opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): ViewRectInfo;

package/dist/esm/view-visible/index.js

@@ -0,0 +1,63 @@
+import { calcElementCenter } from '@idraw/util';
+import { elementsToVirtualFlatMap } from '../virtual-flat';
+export function sortElementsViewVisiableInfoMap(elements, opts) {
+    const { viewScaleInfo, viewSizeInfo, tempContext } = opts;
+    const visibleInfoMap = elementsToVirtualFlatMap(elements, { tempContext });
+    return updateVirtualFlatItemMapStatus(visibleInfoMap, { viewScaleInfo, viewSizeInfo });
+}
+function isRangeRectInfoCollide(info1, info2) {
+    const rect1MinX = Math.min(info1.topLeft.x, info1.topRight.x, info1.bottomLeft.x, info1.bottomRight.x);
+    const rect1MaxX = Math.max(info1.topLeft.x, info1.topRight.x, info1.bottomLeft.x, info1.bottomRight.x);
+    const rect1MinY = Math.min(info1.topLeft.y, info1.topRight.y, info1.bottomLeft.y, info1.bottomRight.y);
+    const rect1MaxY = Math.max(info1.topLeft.y, info1.topRight.y, info1.bottomLeft.y, info1.bottomRight.y);
+    const rect2MinX = Math.min(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x);
+    const rect2MaxX = Math.max(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x);
+    const rect2MinY = Math.min(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y);
+    const rect2MaxY = Math.max(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y);
+    if ((rect1MinX <= rect2MaxX && rect1MaxX >= rect2MinX && rect1MinY <= rect2MaxY && rect1MaxY >= rect2MinY) ||
+        (rect2MaxX <= rect1MaxY && rect2MaxX >= rect1MaxY && rect2MaxX <= rect1MaxY && rect2MaxX >= rect1MaxY)) {
+        return true;
+    }
+    return false;
+}
+export function updateVirtualFlatItemMapStatus(virtualFlatItemMap, opts) {
+    const canvasRectInfo = calcVisibleOriginCanvasRectInfo(opts);
+    let visibleCount = 0;
+    let invisibleCount = 0;
+    Object.keys(virtualFlatItemMap).forEach((uuid) => {
+        const info = virtualFlatItemMap[uuid];
+        info.isVisibleInView = isRangeRectInfoCollide(info.rangeRectInfo, canvasRectInfo);
+        info.isVisibleInView ? visibleCount++ : invisibleCount++;
+    });
+    return { virtualFlatItemMap, visibleCount, invisibleCount };
+}
+export function calcVisibleOriginCanvasRectInfo(opts) {
+    const { viewScaleInfo, viewSizeInfo } = opts;
+    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+    const { width, height } = viewSizeInfo;
+    const x = 0 - offsetLeft / scale;
+    const y = 0 - offsetTop / scale;
+    const w = width / scale;
+    const h = height / scale;
+    const center = calcElementCenter({ x, y, w, h });
+    const topLeft = { x, y };
+    const topRight = { x: x + w, y };
+    const bottomLeft = { x, y: y + h };
+    const bottomRight = { x: x + w, y: y + h };
+    const left = { x, y: center.y };
+    const top = { x: center.x, y };
+    const right = { x: x + w, y: center.y };
+    const bottom = { x: center.x, y: y + h };
+    const rectInfo = {
+        center,
+        topLeft,
+        topRight,
+        bottomLeft,
+        bottomRight,
+        left,
+        top,
+        right,
+        bottom
+    };
+    return rectInfo;
+}

package/dist/esm/virtual-flat/index.d.ts

@@ -0,0 +1,7 @@
+import { Element, Elements, VirtualFlatItemMap, VirtualFlatDetail, ViewContext2D } from '@idraw/types';
+export declare function calcVirtualFlatDetail(elem: Element, opts: {
+    tempContext: ViewContext2D;
+}): VirtualFlatDetail;
+export declare function elementsToVirtualFlatMap(elements: Elements, opts: {
+    tempContext: ViewContext2D;
+}): VirtualFlatItemMap;

package/dist/esm/virtual-flat/index.js

@@ -0,0 +1,45 @@
+import { is, getGroupQueueByElementPosition, calcElementOriginRectInfo, originRectInfoToRangeRectInfo } from '@idraw/util';
+import { calcVirtualTextDetail } from './text';
+export function calcVirtualFlatDetail(elem, opts) {
+    let virtualDetail = {};
+    if (elem.type === 'text') {
+        virtualDetail = calcVirtualTextDetail(elem, opts);
+    }
+    return virtualDetail;
+}
+export function elementsToVirtualFlatMap(elements, opts) {
+    const virtualFlatMap = {};
+    const currentPosition = [];
+    const _walk = (elem) => {
+        const baseInfo = {
+            type: elem.type,
+            isVisibleInView: true,
+            position: [...currentPosition]
+        };
+        let originRectInfo = null;
+        const groupQueue = getGroupQueueByElementPosition(elements, currentPosition);
+        originRectInfo = calcElementOriginRectInfo(elem, {
+            groupQueue: groupQueue || []
+        });
+        const virtualItem = Object.assign(Object.assign(Object.assign({}, baseInfo), {
+            originRectInfo: originRectInfo,
+            rangeRectInfo: is.angle(elem.angle)
+                ? originRectInfoToRangeRectInfo(originRectInfo)
+                : originRectInfo
+        }), calcVirtualFlatDetail(elem, opts));
+        virtualFlatMap[elem.uuid] = virtualItem;
+        if (elem.type === 'group') {
+            elem.detail.children.forEach((ele, i) => {
+                currentPosition.push(i);
+                _walk(ele);
+                currentPosition.pop();
+            });
+        }
+    };
+    elements.forEach((elem, index) => {
+        currentPosition.push(index);
+        _walk(elem);
+        currentPosition.pop();
+    });
+    return virtualFlatMap;
+}

package/dist/esm/virtual-flat/text.d.ts

@@ -0,0 +1,2 @@
+import type { Element, CalcVirtualDetailOptions, VirtualFlatTextDetail } from '@idraw/types';
+export declare function calcVirtualTextDetail(elem: Element<'text'>, opts: CalcVirtualDetailOptions): VirtualFlatTextDetail;

package/dist/esm/virtual-flat/text.js

@@ -0,0 +1,151 @@
+import { enhanceFontFamliy, getDefaultElementDetailConfig } from '@idraw/util';
+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 calcVirtualTextDetail(elem, opts) {
+    const { w, h } = elem;
+    const x = 0;
+    const y = 0;
+    const ctx = opts.tempContext;
+    const lines = [];
+    const detail = Object.assign(Object.assign({}, detailConfig), elem.detail);
+    const originFontSize = detail.fontSize || detailConfig.fontSize;
+    const fontSize = originFontSize;
+    if (fontSize < 2) {
+        return {};
+    }
+    const originLineHeight = detail.lineHeight || originFontSize;
+    const lineHeight = originLineHeight;
+    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');
+    let lineNum = 0;
+    detailTextList.forEach((itemText, idx) => {
+        if (detail.minInlineSize === 'maxContent') {
+            lines.push({
+                x,
+                y: 0,
+                text: itemText,
+                width: ctx.$undoPixelRatio(ctx.measureText(itemText).width)
+            });
+        }
+        else {
+            let lineText = '';
+            let splitStr = '';
+            let tempStrList = itemText.split(splitStr);
+            if (detail.wordBreak === 'normal') {
+                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({
+                    x,
+                    y: 0,
+                    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, 1)) {
+                        lineText += tempStrList[i] || '';
+                    }
+                    else {
+                        lines.push({
+                            x,
+                            y: 0,
+                            text: lineText,
+                            width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
+                        });
+                        lineText = tempStrList[i] || '';
+                        lineNum++;
+                    }
+                    if ((lineNum + 1) * fontHeight > h && detail.overflow === 'hidden') {
+                        break;
+                    }
+                    if (tempStrList.length - 1 === i) {
+                        if ((lineNum + 1) * fontHeight <= h) {
+                            lines.push({
+                                x,
+                                y: 0,
+                                text: lineText,
+                                width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
+                            });
+                            if (idx < detailTextList.length - 1) {
+                                lineNum++;
+                            }
+                            break;
+                        }
+                    }
+                }
+            }
+            else {
+                lines.push({
+                    x,
+                    y: 0,
+                    text: '',
+                    width: 0
+                });
+            }
+        }
+    });
+    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;
+        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);
+            }
+            lines[i].x = _x;
+            lines[i].y = _y + fontHeight * i + eachLineStartY;
+        });
+    }
+    const virtualTextDetail = {
+        textLines: lines
+    };
+    return virtualTextDetail;
+}