@idraw/renderer 0.4.2 → 1.0.0-alpha.1

package/dist/esm/virtual/circle.js

@@ -0,0 +1,38 @@
+import { calcVirtualBaseAttributes } from './base';
+export function calcVirtualCircleAttributes(mtrl, opts) {
+    const { dpr } = opts;
+    const { width, height } = mtrl;
+    let { r } = mtrl;
+    const cx = (width / 2) * dpr;
+    const cy = (height / 2) * dpr;
+    r = r * dpr;
+    const c = r * 0.55228475;
+    const commands = [
+        {
+            type: 'M',
+            params: [cx + r, cy],
+        },
+        {
+            type: 'C',
+            params: [cx + r, cy - c, cx + c, cy - r, cx, cy - r],
+        },
+        {
+            type: 'C',
+            params: [cx - c, cy - r, cx - r, cy - c, cx - r, cy],
+        },
+        {
+            type: 'C',
+            params: [cx - r, cy + c, cx - c, cy + r, cx, cy + r],
+        },
+        {
+            type: 'C',
+            params: [cx + c, cy + r, cx + r, cy + c, cx + r, cy],
+        },
+        {
+            type: 'Z',
+            params: [],
+        },
+    ];
+    const attributes = Object.assign(Object.assign({}, calcVirtualBaseAttributes(mtrl, opts)), { commands });
+    return attributes;
+}

package/dist/esm/virtual/ellipse.d.ts

@@ -0,0 +1,2 @@
+import type { StrictMaterial, VirtualRectAttributes, CalcVirtualAttributesOptions } from '@idraw/types';
+export declare function calcVirtualEllipseAttributes(mtrl: StrictMaterial<'ellipse'>, opts: CalcVirtualAttributesOptions): VirtualRectAttributes;

package/dist/esm/virtual/ellipse.js

@@ -0,0 +1,40 @@
+import { calcVirtualBaseAttributes } from './base';
+export function calcVirtualEllipseAttributes(mtrl, opts) {
+    const { dpr } = opts;
+    const { width, height } = mtrl;
+    let { rx, ry } = mtrl;
+    const cx = (width / 2) * dpr;
+    const cy = (height / 2) * dpr;
+    rx = rx * dpr;
+    ry = ry * dpr;
+    const kx = 0.55228475 * rx;
+    const ky = 0.55228475 * ry;
+    const commands = [
+        {
+            type: 'M',
+            params: [cx + rx, cy],
+        },
+        {
+            type: 'C',
+            params: [cx + rx, cy - ky, cx + kx, cy - ry, cx, cy - ry],
+        },
+        {
+            type: 'C',
+            params: [cx - kx, cy - ry, cx - rx, cy - ky, cx - rx, cy],
+        },
+        {
+            type: 'C',
+            params: [cx - rx, cy + ky, cx - kx, cy + ry, cx, cy + ry],
+        },
+        {
+            type: 'C',
+            params: [cx + kx, cy + ry, cx + rx, cy + ky, cx + rx, cy],
+        },
+        {
+            type: 'Z',
+            params: [],
+        },
+    ];
+    const attributes = Object.assign(Object.assign({}, calcVirtualBaseAttributes(mtrl, opts)), { commands });
+    return attributes;
+}

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

@@ -0,0 +1,6 @@
+import { StrictMaterial, VirtualItemMap, VirtualAttributes, ViewContext2D, CalcVirtualAttributesOptions } from '@idraw/types';
+export declare function calcVirtualAttributes(mtrl: StrictMaterial, opts: CalcVirtualAttributesOptions): VirtualAttributes | null;
+export declare function materialsToVirtualFlatMap(materials: StrictMaterial[], opts: {
+    tempContext: ViewContext2D;
+    dpr: number;
+}): VirtualItemMap;

package/dist/esm/virtual/index.js

@@ -0,0 +1,77 @@
+import { is, getGroupQueueByMaterialPosition, calcMaterialBoundingInfo, boundingInfoToRangeBoundingInfo, } from '@idraw/util';
+import { calcVirtualBaseAttributes } from './base';
+import { calcVirtualRectAttributes } from './rect';
+import { calcVirtualCircleAttributes } from './circle';
+import { calcVirtualEllipseAttributes } from './ellipse';
+import { calcVirtualTextAttributes } from './text';
+import { calcVirtualPathAttributes } from './path';
+export function calcVirtualAttributes(mtrl, opts) {
+    let attributes = null;
+    switch (mtrl.type) {
+        case 'rect': {
+            attributes = calcVirtualRectAttributes(mtrl, opts);
+            break;
+        }
+        case 'circle': {
+            attributes = calcVirtualCircleAttributes(mtrl, opts);
+            break;
+        }
+        case 'ellipse': {
+            attributes = calcVirtualEllipseAttributes(mtrl, opts);
+            break;
+        }
+        case 'text': {
+            attributes = calcVirtualTextAttributes(mtrl, opts);
+            break;
+        }
+        case 'group': {
+            attributes = calcVirtualRectAttributes(mtrl, opts);
+            break;
+        }
+        case 'path': {
+            attributes = calcVirtualPathAttributes(mtrl, opts);
+            break;
+        }
+        default: {
+            attributes = calcVirtualBaseAttributes(mtrl, opts);
+            break;
+        }
+    }
+    return attributes;
+}
+export function materialsToVirtualFlatMap(materials, opts) {
+    const virtualFlatMap = {};
+    const currentPosition = [];
+    const _walk = (mtrl) => {
+        const baseInfo = {
+            type: mtrl.type,
+            isVisibleInView: true,
+            position: [...currentPosition],
+        };
+        let boundingInfo = null;
+        const groupQueue = getGroupQueueByMaterialPosition(materials, currentPosition);
+        boundingInfo = calcMaterialBoundingInfo(mtrl, {
+            groupQueue: groupQueue || [],
+        });
+        const virtualItem = Object.assign(Object.assign(Object.assign({}, baseInfo), {
+            boundingInfo: boundingInfo,
+            rangeBoundingInfo: is.angle(mtrl.angle)
+                ? boundingInfoToRangeBoundingInfo(boundingInfo)
+                : boundingInfo,
+        }), calcVirtualAttributes(mtrl, Object.assign(Object.assign({}, opts), { groupQueue: groupQueue || [] })));
+        virtualFlatMap[mtrl.id] = virtualItem;
+        if (mtrl.type === 'group') {
+            mtrl.children.forEach((ele, i) => {
+                currentPosition.push(i);
+                _walk(ele);
+                currentPosition.pop();
+            });
+        }
+    };
+    materials.forEach((mtrl, index) => {
+        currentPosition.push(index);
+        _walk(mtrl);
+        currentPosition.pop();
+    });
+    return virtualFlatMap;
+}

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

@@ -0,0 +1,2 @@
+import { StrictMaterial, VirtualPathAttributes, CalcVirtualAttributesOptions } from '@idraw/types';
+export declare function calcVirtualPathAttributes(mtrl: StrictMaterial<'path'>, opts: CalcVirtualAttributesOptions): VirtualPathAttributes;

package/dist/esm/virtual/path.js

@@ -0,0 +1,10 @@
+import { convertPathCommandsToACLMZ, scalePathCommands } from '@idraw/util';
+import { calcVirtualBaseAttributes } from './base';
+export function calcVirtualPathAttributes(mtrl, opts) {
+    const { dpr } = opts;
+    const attributes = Object.assign(Object.assign({}, calcVirtualBaseAttributes(mtrl, opts)), { anchorCommands: [] });
+    const anchorCommands = convertPathCommandsToACLMZ(mtrl.commands || []);
+    attributes.anchorCommands = anchorCommands;
+    attributes.commands = scalePathCommands(mtrl.commands, dpr, dpr);
+    return attributes;
+}

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

@@ -0,0 +1,2 @@
+import type { StrictMaterial, VirtualRectAttributes, CalcVirtualAttributesOptions } from '@idraw/types';
+export declare function calcVirtualRectAttributes(mtrl: StrictMaterial<'rect' | 'text'>, opts: CalcVirtualAttributesOptions): VirtualRectAttributes;

package/dist/esm/virtual/rect.js

@@ -0,0 +1,146 @@
+import { createId } from '@idraw/util';
+import { calcVirtualBaseAttributes } from './base';
+export function calcVirtualRectAttributes(mtrl, opts) {
+    const { dpr } = opts;
+    let { width, height, rx = 0, ry = 0, } = mtrl;
+    const { cornerRadius } = mtrl;
+    const x = 0;
+    const y = 0;
+    height = height * dpr;
+    width = width * dpr;
+    const commands = [];
+    let tlRX = 0;
+    let trRX = 0;
+    let brRX = 0;
+    let blRX = 0;
+    let tlRY = 0;
+    let trRY = 0;
+    let brRY = 0;
+    let blRY = 0;
+    if (typeof rx === 'number' && typeof ry === 'number') {
+        rx = rx * dpr;
+        ry = ry * dpr;
+        tlRX = rx;
+        trRX = rx;
+        brRX = rx;
+        blRX = rx;
+        tlRY = ry;
+        trRY = ry;
+        brRY = ry;
+        blRY = ry;
+    }
+    else if (Array.isArray(cornerRadius) && cornerRadius.length === 4) {
+        const crs = cornerRadius.map((r) => r * dpr);
+        tlRX = crs[0] || 0;
+        trRX = crs[1] || 0;
+        brRX = crs[2] || 0;
+        blRX = crs[3] || 0;
+        tlRY = crs[0] || 0;
+        trRY = crs[1] || 0;
+        brRY = crs[2] || 0;
+        blRY = crs[3] || 0;
+    }
+    else if (typeof cornerRadius === 'number') {
+        const cr = cornerRadius * dpr;
+        tlRX = cr;
+        trRX = cr;
+        brRX = cr;
+        blRX = cr;
+        tlRY = cr;
+        trRY = cr;
+        brRY = cr;
+        blRY = cr;
+    }
+    const x0 = x;
+    const y0 = y;
+    const x1 = x + width;
+    const y1 = y + height;
+    commands.push({
+        id: createId(),
+        type: 'M',
+        params: [x + tlRX, y],
+    });
+    if (trRX > 0 || trRY > 0) {
+        commands.push({
+            id: createId(),
+            type: 'L',
+            params: [x1 - trRX, y0],
+        });
+        commands.push({
+            id: createId(),
+            type: 'A',
+            params: [trRX, trRY, 0, 0, 1, x1, y0 + trRY],
+        });
+    }
+    else {
+        commands.push({
+            id: createId(),
+            type: 'L',
+            params: [x1, y0],
+        });
+    }
+    if (brRX > 0 || brRY > 0) {
+        commands.push({
+            id: createId(),
+            type: 'L',
+            params: [x1, y1 - brRY],
+        });
+        commands.push({
+            id: createId(),
+            type: 'A',
+            params: [brRX, brRY, 0, 0, 1, x1 - brRX, y1],
+        });
+    }
+    else {
+        commands.push({
+            id: createId(),
+            type: 'L',
+            params: [x1, y1],
+        });
+    }
+    if (blRX > 0 || blRY > 0) {
+        commands.push({
+            id: createId(),
+            type: 'L',
+            params: [x0 + blRX, y1],
+        });
+        commands.push({
+            id: createId(),
+            type: 'A',
+            params: [blRX, blRY, 0, 0, 1, x0, y1 - blRY],
+        });
+    }
+    else {
+        commands.push({
+            id: createId(),
+            type: 'L',
+            params: [x0, y1],
+        });
+    }
+    if (tlRX > 0 || tlRY > 0) {
+        commands.push({
+            id: createId(),
+            type: 'L',
+            params: [x0, y0 + tlRY],
+        });
+        commands.push({
+            id: createId(),
+            type: 'A',
+            params: [tlRX, tlRY, 0, 0, 1, x0 + tlRX, y0],
+        });
+    }
+    else {
+        commands.push({
+            id: createId(),
+            type: 'L',
+            params: [x0, y0],
+        });
+    }
+    commands.push({
+        id: createId(),
+        type: 'Z',
+        params: [],
+    });
+    const attributes = Object.assign(Object.assign({}, calcVirtualBaseAttributes(mtrl, opts)), { commands });
+    return attributes;
+}

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

@@ -0,0 +1,2 @@
+import type { StrictMaterial, CalcVirtualAttributesOptions, VirtualTextAttributes } from '@idraw/types';
+export declare function calcVirtualTextAttributes(mtrl: StrictMaterial<'text'>, opts: CalcVirtualAttributesOptions): VirtualTextAttributes;

package/dist/esm/virtual/text.js

@@ -0,0 +1,165 @@
+import { enhanceFontFamliy, getDefaultMaterialAttributes } from '@idraw/util';
+import { calcVirtualRectAttributes } from './rect';
+const attributesConfig = getDefaultMaterialAttributes();
+function isTextWidthWithinErrorRange(w0, w1, scale) {
+    if (scale < 0.5) {
+        if (w0 < w1 && (w0 - w1) / w0 > -0.15) {
+            return true;
+        }
+    }
+    return w0 >= w1;
+}
+export function calcVirtualTextAttributes(mtrl, opts) {
+    const { width, height } = mtrl;
+    const x = 0;
+    const y = 0;
+    const ctx = opts.tempContext;
+    const lines = [];
+    const attributes = Object.assign(Object.assign({}, attributesConfig), mtrl);
+    const originFontSize = attributes.fontSize || attributesConfig.fontSize;
+    const fontSize = originFontSize;
+    const baseAttrs = calcVirtualRectAttributes(mtrl, opts);
+    if (fontSize < 2) {
+        return Object.assign(Object.assign({}, baseAttrs), { textLines: [] });
+    }
+    const originLineHeight = attributes.lineHeight || originFontSize;
+    const lineHeight = originLineHeight;
+    ctx.textBaseline = 'top';
+    ctx.$setFont({
+        fontWeight: attributes.fontWeight,
+        fontSize: fontSize,
+        fontFamily: enhanceFontFamliy(attributes.fontFamily),
+    });
+    let attributesText = attributes.text.replace(/\r\n/gi, '\n');
+    if (attributes.textTransform === 'lowercase') {
+        attributesText = attributesText.toLowerCase();
+    }
+    else if (attributes.textTransform === 'uppercase') {
+        attributesText = attributesText.toUpperCase();
+    }
+    const fontHeight = lineHeight;
+    const attributesTextList = attributesText.split('\n');
+    let lineNum = 0;
+    attributesTextList.forEach((itemText, idx) => {
+        if (attributes.minInlineSize === 'maxContent') {
+            const measureResult = ctx.measureText(itemText);
+            lines.push({
+                x,
+                y: 0,
+                text: itemText,
+                width: ctx.$undoPixelRatio(measureResult.width),
+            });
+        }
+        else {
+            let lineText = '';
+            let splitStr = '';
+            let tempCharList = itemText.split(splitStr);
+            if (attributes.wordBreak === 'normal') {
+                splitStr = ' ';
+                const wordList = itemText.split(splitStr);
+                tempCharList = [];
+                wordList.forEach((word, idx) => {
+                    tempCharList.push(word);
+                    if (idx < wordList.length - 1) {
+                        tempCharList.push(splitStr);
+                    }
+                });
+            }
+            if (tempCharList.length === 1 && attributes.overflow !== 'hidden') {
+                lines.push({
+                    x,
+                    y: 0,
+                    text: tempCharList[0],
+                    width: ctx.$undoPixelRatio(ctx.measureText(tempCharList[0]).width),
+                });
+            }
+            else if (tempCharList.length > 0) {
+                for (let i = 0; i < tempCharList.length; i++) {
+                    if (isTextWidthWithinErrorRange(ctx.$doPixelRatio(width), ctx.measureText(lineText + tempCharList[i]).width, 1)) {
+                        lineText += tempCharList[i] || '';
+                    }
+                    else {
+                        lines.push({
+                            x,
+                            y: 0,
+                            text: lineText,
+                            width: ctx.$undoPixelRatio(ctx.measureText(lineText).width),
+                        });
+                        lineText = tempCharList[i] || '';
+                        lineNum++;
+                    }
+                    if (lineNum * fontHeight >= height) {
+                        if (attributes.overflow === 'hidden') {
+                            lineText = '';
+                            break;
+                        }
+                    }
+                    if (tempCharList.length - 1 === i) {
+                        if ((lineNum + 1) * fontHeight <= height) {
+                            lines.push({
+                                x,
+                                y: 0,
+                                text: lineText,
+                                width: ctx.$undoPixelRatio(ctx.measureText(lineText).width),
+                            });
+                            lineText = '';
+                            if (idx < attributesTextList.length - 1) {
+                                lineNum++;
+                            }
+                            break;
+                        }
+                    }
+                }
+                if (lineText) {
+                    lines.push({
+                        x,
+                        y: 0,
+                        text: lineText,
+                        width: ctx.$undoPixelRatio(ctx.measureText(lineText).width),
+                    });
+                    lineText = '';
+                }
+            }
+            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 < height) {
+        if (attributes.verticalAlign === 'top') {
+            startY = 0;
+        }
+        else if (attributes.verticalAlign === 'bottom') {
+            startY += height - lines.length * fontHeight;
+        }
+        else {
+            startY += (height - lines.length * fontHeight) / 2;
+        }
+    }
+    {
+        const _y = y + startY;
+        lines.forEach((line, i) => {
+            let _x = x;
+            if (attributes.textAlign === 'center') {
+                _x = x + (width - line.width) / 2;
+            }
+            else if (attributes.textAlign === 'right') {
+                _x = x + (width - line.width);
+            }
+            lines[i].x = _x;
+            lines[i].y = _y + fontHeight * i + eachLineStartY;
+        });
+    }
+    const virtualTextAttributes = Object.assign(Object.assign({}, baseAttrs), { textLines: lines });
+    return virtualTextAttributes;
+}

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

@@ -0,0 +1,22 @@
+import { StrictMaterial, ViewScaleInfo, ViewSizeInfo, BoundingInfo, VirtualItemMap, ViewContext2D } from '@idraw/types';
+export declare function sortMaterialsViewVisiableInfoMap(materials: StrictMaterial[], opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+    tempContext: ViewContext2D;
+}): {
+    virtualItemMap: VirtualItemMap;
+    visibleCount: number;
+    invisibleCount: number;
+};
+export declare function updateVirtualItemMapStatus(virtualItemMap: VirtualItemMap, opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): {
+    virtualItemMap: VirtualItemMap;
+    visibleCount: number;
+    invisibleCount: number;
+};
+export declare function calcVisibleOriginCanvasBoundingBox(opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): BoundingInfo;

package/dist/esm/{view-visible → visible}/index.js

@@ -1,37 +1,43 @@
-import { calcElementCenter } from '@idraw/util';
-import { elementsToVirtualFlatMap } from '../virtual-flat';
-export function sortElementsViewVisiableInfoMap(elements, opts) {
+import { calcMaterialCenter } from '@idraw/util';
+import { materialsToVirtualFlatMap } from '../virtual';
+export function sortMaterialsViewVisiableInfoMap(materials, opts) {
     const { viewScaleInfo, viewSizeInfo, tempContext } = opts;
-    const visibleInfoMap = elementsToVirtualFlatMap(elements, { tempContext });
-    return updateVirtualFlatItemMapStatus(visibleInfoMap, { viewScaleInfo, viewSizeInfo });
+    const visibleInfoMap = materialsToVirtualFlatMap(materials, {
+        tempContext,
+        dpr: viewSizeInfo.devicePixelRatio,
+    });
+    return updateVirtualItemMapStatus(visibleInfoMap, { viewScaleInfo, viewSizeInfo });
 }
-function isRangeRectInfoCollide(info1, info2) {
+function isRangeBoundingBoxCollide(info1, info2) {
+    const centerX = info1.center.x;
+    const centerY = info1.center.y;
     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)) {
+    const w = Math.abs(rect1MaxX - rect1MinX);
+    const h = Math.abs(rect1MaxY - rect1MinY);
+    const rect2MinX = Math.min(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x) - w;
+    const rect2MaxX = Math.max(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x) + w;
+    const rect2MinY = Math.min(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y) - h;
+    const rect2MaxY = Math.max(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y) + h;
+    if (centerX >= rect2MinX && centerX <= rect2MaxX && centerY >= rect2MinY && centerY <= rect2MaxY) {
         return true;
     }
     return false;
 }
-export function updateVirtualFlatItemMapStatus(virtualFlatItemMap, opts) {
-    const canvasRectInfo = calcVisibleOriginCanvasRectInfo(opts);
+export function updateVirtualItemMapStatus(virtualItemMap, opts) {
+    const canvasBoundingBox = calcVisibleOriginCanvasBoundingBox(opts);
     let visibleCount = 0;
     let invisibleCount = 0;
-    Object.keys(virtualFlatItemMap).forEach((uuid) => {
-        const info = virtualFlatItemMap[uuid];
-        info.isVisibleInView = isRangeRectInfoCollide(info.rangeRectInfo, canvasRectInfo);
+    Object.keys(virtualItemMap).forEach((id) => {
+        const info = virtualItemMap[id];
+        info.isVisibleInView = isRangeBoundingBoxCollide(info.rangeBoundingInfo, canvasBoundingBox);
         info.isVisibleInView ? visibleCount++ : invisibleCount++;
     });
-    return { virtualFlatItemMap, visibleCount, invisibleCount };
+    return { virtualItemMap, visibleCount, invisibleCount };
 }
-export function calcVisibleOriginCanvasRectInfo(opts) {
+export function calcVisibleOriginCanvasBoundingBox(opts) {
     const { viewScaleInfo, viewSizeInfo } = opts;
     const { scale, offsetTop, offsetLeft } = viewScaleInfo;
     const { width, height } = viewSizeInfo;
@@ -39,7 +45,7 @@ export function calcVisibleOriginCanvasRectInfo(opts) {
     const y = 0 - offsetTop / scale;
     const w = width / scale;
     const h = height / scale;
-    const center = calcElementCenter({ x, y, w, h });
+    const center = calcMaterialCenter({ x, y, width, height });
     const topLeft = { x, y };
     const topRight = { x: x + w, y };
     const bottomLeft = { x, y: y + h };
@@ -48,7 +54,7 @@ export function calcVisibleOriginCanvasRectInfo(opts) {
     const top = { x: center.x, y };
     const right = { x: x + w, y: center.y };
     const bottom = { x: center.x, y: y + h };
-    const rectInfo = {
+    const boundingBox = {
         center,
         topLeft,
         topRight,
@@ -57,7 +63,7 @@ export function calcVisibleOriginCanvasRectInfo(opts) {
         left,
         top,
         right,
-        bottom
+        bottom,
     };
-    return rectInfo;
+    return boundingBox;
 }