New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@idraw/renderer

Package Overview
Dependencies
Maintainers
2
Versions
69
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@idraw/renderer - npm Package Compare versions

Comparing version 0.4.0-alpha.3 to 0.4.0-alpha.4

dist/esm/draw/box.d.ts
dist/esm/draw/box.js
dist/esm/draw/color.d.ts
dist/esm/draw/color.js

60

dist/esm/draw/circle.js
import { rotateElement } from '@idraw/util';
import { createColorStyle } from './color';
import { drawBoxShadow } from './box';
export function drawCircle(ctx, elem, opts) {

@@ -7,23 +9,43 @@ const { detail, angle } = elem;

const { x, y, w, h } = calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo);
const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
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();
drawBoxShadow(ctx, viewElem, {
viewScaleInfo,
viewSizeInfo,
renderContent: () => {
var _a, _b;
const a = w / 2;
const 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 (typeof borderWidth === 'number' && 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();
const fillStyle = createColorStyle(ctx, background, {
viewElementSize: { x, y, w, h },
viewScaleInfo,
opacity: ctx.globalAlpha
});
ctx.fillStyle = fillStyle;
ctx.circle(centerX, centerY, a, b, 0, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.globalAlpha = 1;
}
});
});
}

7

dist/esm/draw/elements.js

@@ -0,6 +1,11 @@

import { getDefaultElementDetailConfig } from '@idraw/util';
import { drawElement } from './group';
const defaultDetail = getDefaultElementDetailConfig();
export function drawElementList(ctx, data, opts) {
const { elements = [] } = data;
for (let i = 0; i < elements.length; i++) {
const elem = elements[i];
const element = elements[i];
const elem = Object.assign(Object.assign({}, element), {
detail: Object.assign(Object.assign({}, defaultDetail), element === null || element === void 0 ? void 0 : element.detail)
});
if (!opts.calculator.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo)) {

@@ -7,0 +12,0 @@ continue;

2

dist/esm/draw/group.js

@@ -8,3 +8,3 @@ import { rotateElement } from '@idraw/util';

import { drawHTML } from './html';
import { drawBox } from './base';
import { drawBox } from './box';
import { drawPath } from './path';

@@ -11,0 +11,0 @@ export function drawElement(ctx, elem, opts) {

7

dist/esm/draw/html.js
import { rotateElement } from '@idraw/util';
export function drawHTML(ctx, elem, opts) {
const content = opts.loader.getContent(elem.uuid);
const content = opts.loader.getContent(elem);
const { calculator, viewScaleInfo, viewSizeInfo } = opts;

@@ -8,8 +8,11 @@ const { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);

if (!content) {
opts.loader.load(elem);
opts.loader.load(elem, opts.elementAssets || {});
}
if (elem.type === 'html' && content) {
const { opacity } = elem.detail;
ctx.globalAlpha = opacity ? opacity : 1;
ctx.drawImage(content, x, y, w, h);
ctx.globalAlpha = 1;
}
});
}

50

dist/esm/draw/image.js

@@ -1,14 +0,48 @@

import { rotateElement } from '@idraw/util';
import { rotateElement, calcViewBoxSize } from '@idraw/util';
import { drawBox, drawBoxShadow } from './box';
export function drawImage(ctx, elem, opts) {
const content = opts.loader.getContent(elem.uuid);
const content = opts.loader.getContent(elem);
const { calculator, viewScaleInfo, viewSizeInfo } = opts;
const { 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 }, () => {
if (!content) {
opts.loader.load(elem, opts.elementAssets || {});
}
if (elem.type === 'image' && content) {
ctx.drawImage(content, x, y, w, h);
}
drawBoxShadow(ctx, viewElem, {
viewScaleInfo,
viewSizeInfo,
renderContent: () => {
drawBox(ctx, viewElem, {
originElem: elem,
calcElemSize: { x, y, w, h, angle },
viewScaleInfo,
viewSizeInfo,
renderContent: () => {
if (!content) {
opts.loader.load(elem, opts.elementAssets || {});
}
if (elem.type === 'image' && content) {
const { opacity } = elem.detail;
ctx.globalAlpha = opacity ? opacity : 1;
const { x, y, w, h, radiusList } = calcViewBoxSize(viewElem, {
viewScaleInfo,
viewSizeInfo
});
ctx.save();
ctx.beginPath();
ctx.moveTo(x + radiusList[0], y);
ctx.arcTo(x + w, y, x + w, y + h, radiusList[1]);
ctx.arcTo(x + w, y + h, x, y + h, radiusList[2]);
ctx.arcTo(x, y + h, x, y, radiusList[3]);
ctx.arcTo(x, y, x + w, y, radiusList[0]);
ctx.closePath();
ctx.fill();
ctx.clip();
ctx.drawImage(content, x, y, w, h);
ctx.globalAlpha = 1;
ctx.restore();
}
}
});
}
});
});
}

2

dist/esm/draw/path.js
import { rotateElement, generateSVGPath } from '@idraw/util';
import { drawBox, drawBoxShadow } from './base';
import { drawBox, drawBoxShadow } from './box';
export function drawPath(ctx, elem, opts) {

@@ -4,0 +4,0 @@ const { detail } = elem;

2

dist/esm/draw/rect.js
import { rotateElement } from '@idraw/util';
import { drawBox, drawBoxShadow } from './base';
import { drawBox, drawBoxShadow } from './box';
export function drawRect(ctx, elem, opts) {

@@ -4,0 +4,0 @@ const { calculator, viewScaleInfo, viewSizeInfo } = opts;

5

dist/esm/draw/svg.js
import { rotateElement } from '@idraw/util';
export function drawSVG(ctx, elem, opts) {
const content = opts.loader.getContent(elem.uuid);
const content = opts.loader.getContent(elem);
const { calculator, viewScaleInfo, viewSizeInfo } = opts;

@@ -11,5 +11,8 @@ const { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);

if (elem.type === 'svg' && content) {
const { opacity } = elem.detail;
ctx.globalAlpha = opacity ? opacity : 1;
ctx.drawImage(content, x, y, w, h);
ctx.globalAlpha = 1;
}
});
}

15

dist/esm/draw/text.js
import { rotateElement } from '@idraw/util';
import { is, isColorStr } from '@idraw/util';
import { drawBox } from './base';
import { is, isColorStr, getDefaultElementDetailConfig } from '@idraw/util';
import { drawBox } from './box';
const detailConfig = getDefaultElementDetailConfig();
export function drawText(ctx, elem, opts) {

@@ -15,10 +16,6 @@ const { calculator, viewScaleInfo, viewSizeInfo } = opts;

renderContent: () => {
const detail = Object.assign({
fontSize: 12,
fontFamily: 'sans-serif',
textAlign: 'center'
}, elem.detail);
const fontSize = detail.fontSize * viewScaleInfo.scale;
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;
ctx.fillStyle = elem.detail.color || detailConfig.color;
ctx.textBaseline = 'top';

@@ -25,0 +22,0 @@ ctx.$setFont({

2

dist/esm/loader.d.ts

@@ -16,3 +16,3 @@ import type { RendererLoader, LoaderEventMap, LoadContent, LoadElementType, Element, ElementAssets } from '@idraw/types';

load(element: Element<LoadElementType>, assets: ElementAssets): void;
getContent(uuid: string): LoadContent | null;
getContent(element: Element<LoadElementType>): LoadContent | null;
}

52

dist/esm/loader.js

@@ -10,4 +10,24 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {

};
import { loadImage, loadHTML, loadSVG, EventEmitter, deepClone } from '@idraw/util';
import { loadImage, loadHTML, loadSVG, EventEmitter, createAssetId, isAssetId, createUUID } from '@idraw/util';
const supportElementTypes = ['image', 'svg', 'html'];
const getAssetIdFromElement = (element) => {
var _a, _b, _c;
let source = null;
if (element.type === 'image') {
source = ((_a = element === null || element === void 0 ? void 0 : element.detail) === null || _a === void 0 ? void 0 : _a.src) || null;
}
else if (element.type === 'svg') {
source = ((_b = element === null || element === void 0 ? void 0 : element.detail) === null || _b === void 0 ? void 0 : _b.svg) || null;
}
else if (element.type === 'html') {
source = ((_c = element === null || element === void 0 ? void 0 : element.detail) === null || _c === void 0 ? void 0 : _c.html) || null;
}
if (typeof source === 'string' && source) {
if (isAssetId(source)) {
return source;
}
return createAssetId(source);
}
return createAssetId(`${createUUID()}-${element.uuid}-${createUUID()}-${createUUID()}`);
};
export class Loader extends EventEmitter {

@@ -82,7 +102,7 @@ constructor() {

_emitLoad(item) {
const uuid = item.element.uuid;
const storageItem = this._storageLoadItemMap[uuid];
const assetId = getAssetIdFromElement(item.element);
const storageItem = this._storageLoadItemMap[assetId];
if (storageItem) {
if (storageItem.startTime < item.startTime) {
this._storageLoadItemMap[uuid] = item;
this._storageLoadItemMap[assetId] = item;
this.trigger('load', Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));

@@ -92,3 +112,3 @@ }

else {
this._storageLoadItemMap[uuid] = item;
this._storageLoadItemMap[assetId] = item;
this.trigger('load', Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));

@@ -98,7 +118,7 @@ }

_emitError(item) {
const uuid = item.element.uuid;
const storageItem = this._storageLoadItemMap[uuid];
const assetId = getAssetIdFromElement(item.element);
const storageItem = this._storageLoadItemMap[assetId];
if (storageItem) {
if (storageItem.startTime < item.startTime) {
this._storageLoadItemMap[uuid] = item;
this._storageLoadItemMap[assetId] = item;
this.trigger('error', Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));

@@ -108,3 +128,3 @@ }

else {
this._storageLoadItemMap[uuid] = item;
this._storageLoadItemMap[assetId] = item;
this.trigger('error', Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));

@@ -115,3 +135,4 @@ }

const item = this._createLoadItem(element);
this._currentLoadItemMap[element.uuid] = item;
const assetId = getAssetIdFromElement(element);
this._currentLoadItemMap[assetId] = item;
const loadFunc = this._loadFuncMap[element.type];

@@ -138,3 +159,4 @@ if (typeof loadFunc === 'function') {

var _a;
const existItem = (_a = this._currentLoadItemMap) === null || _a === void 0 ? void 0 : _a[element === null || element === void 0 ? void 0 : element.uuid];
const assetId = getAssetIdFromElement(element);
const existItem = (_a = this._currentLoadItemMap) === null || _a === void 0 ? void 0 : _a[assetId];
if (existItem && existItem.status === 'error' && existItem.source && existItem.source === this._getLoadElementSource(element)) {

@@ -150,10 +172,10 @@ return true;

if (supportElementTypes.includes(element.type)) {
const elem = deepClone(element);
this._loadResource(elem, assets);
this._loadResource(element, assets);
}
}
getContent(uuid) {
getContent(element) {
var _a, _b;
return ((_b = (_a = this._storageLoadItemMap) === null || _a === void 0 ? void 0 : _a[uuid]) === null || _b === void 0 ? void 0 : _b.content) || null;
const assetId = getAssetIdFromElement(element);
return ((_b = (_a = this._storageLoadItemMap) === null || _a === void 0 ? void 0 : _a[assetId]) === null || _b === void 0 ? void 0 : _b.content) || null;
}
}

620

dist/index.global.js

@@ -6,31 +6,54 @@ var iDrawRenderer = function(exports) {

}
function deepClone(target) {
function _clone(t) {
const type = is$1(t);
if (["Null", "Number", "String", "Boolean", "Undefined"].indexOf(type) >= 0) {
return t;
} else if (type === "Array") {
const arr = [];
t.forEach((item) => {
arr.push(_clone(item));
});
return arr;
} else if (type === "Object") {
const obj = {};
const keys = Object.keys(t);
keys.forEach((key) => {
obj[key] = _clone(t[key]);
});
const symbolKeys = Object.getOwnPropertySymbols(t);
symbolKeys.forEach((key) => {
obj[key] = _clone(t[key]);
});
return obj;
}
function mergeHexColorAlpha(hex, alpha) {
if (alpha === 1) {
return hex;
}
return _clone(target);
let hexAlpha = 1;
const regHex1 = /^\#[0-9a-f]{6,6}$/i;
const regHex2 = /^\#[0-9a-f]{8,8}$/i;
let result = hex;
if (regHex1.test(hex)) {
hexAlpha = parseInt(hex.substring(5, 7).replace(/^\#/, "0x"));
} else if (regHex2.test(hex)) {
hexAlpha = parseInt(hex.substring(7, 9).replace(/^\#/, "0x"));
result = hex.substring(0, 7);
}
hexAlpha = hexAlpha * alpha;
if (regHex1.test(result) && hexAlpha > 0 && hexAlpha < 1) {
const aHexNum = Math.max(0, Math.min(255, Math.ceil(hexAlpha * 256)));
result = `${result.toUpperCase()}${aHexNum.toString(16).toUpperCase()}`;
}
return result;
}
function is$1(target) {
return Object.prototype.toString.call(target).replace(/[\]|\[]{1,1}/gi, "").split(" ")[1];
function createUUID() {
function _createStr() {
return ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
}
return `${_createStr()}${_createStr()}-${_createStr()}-${_createStr()}-${_createStr()}-${_createStr()}${_createStr()}${_createStr()}`;
}
function limitHexStr(str) {
let count = 0;
for (let i = 0; i < str.length; i++) {
count += str.charCodeAt(i) * str.charCodeAt(i) * i * i;
}
return count.toString(16).substring(0, 4);
}
function createAssetId(assetStr) {
const len = assetStr.length;
const mid = Math.floor(len / 2);
const start4 = assetStr.substring(0, 4).padEnd(4, "0");
const end4 = assetStr.substring(0, 4).padEnd(4, "0");
const str1 = limitHexStr(len.toString(16).padEnd(4, start4));
const str2 = limitHexStr(assetStr.substring(mid - 4, mid).padEnd(4, start4)).padEnd(4, "f");
const str3 = limitHexStr(assetStr.substring(mid - 8, mid - 4).padEnd(4, start4)).padEnd(4, "f");
const str4 = limitHexStr(assetStr.substring(mid - 12, mid - 8).padEnd(4, start4)).padEnd(4, "f");
const str5 = limitHexStr(assetStr.substring(mid - 16, mid - 12).padEnd(4, end4)).padEnd(4, "f");
const str6 = limitHexStr(assetStr.substring(mid, mid + 4).padEnd(4, end4)).padEnd(4, "f");
const str7 = limitHexStr(assetStr.substring(mid + 4, mid + 8).padEnd(4, end4)).padEnd(4, "f");
const str8 = limitHexStr(end4.padEnd(4, start4).padEnd(4, end4));
return `@assets/${str1}${str2}-${str3}-${str4}-${str5}-${str6}${str7}${str8}`;
}
function isAssetId(id) {
return /^@assets\/[0-9a-z]{8,8}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{12,12}$/.test(`${id}`);
}
function parsePrototype(data) {

@@ -118,3 +141,3 @@ const typeStr = Object.prototype.toString.call(data) || "";

}
var __awaiter = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P, generator) {
var __awaiter = function(thisArg, _arguments, P, generator) {
function adopt(value) {

@@ -327,5 +350,4 @@ return value instanceof P ? value : new P(function(resolve) {

}
function rotateElement(ctx, elemSize, callback) {
const center = calcElementCenter(elemSize);
const radian = parseAngleToRadian(elemSize.angle || 0);
function rotateByCenter(ctx, angle2, center, callback) {
const radian = parseAngleToRadian(angle2 || 0);
if (center && (radian > 0 || radian < 0)) {

@@ -343,2 +365,8 @@ ctx.translate(center.x, center.y);

}
function rotateElement(ctx, elemSize, callback) {
const center = calcElementCenter(elemSize);
rotateByCenter(ctx, elemSize.angle || 0, center, () => {
callback(ctx);
});
}
function calcElementCenter(elem) {

@@ -358,36 +386,113 @@ const p = {

}
function drawCircle(ctx, elem, opts) {
const { detail, angle: angle2 } = elem;
const { background = "#000000", borderColor = "#000000", borderWidth: borderWidth2 = 0 } = detail;
const { calculator, viewScaleInfo, viewSizeInfo } = opts;
const { x: x2, y: y2, w: w2, h: h2 } = calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo);
rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
const a = w2 / 2;
const b = h2 / 2;
const centerX = x2 + a;
const centerY = y2 + b;
if (borderWidth2 && borderWidth2 > 0) {
const ba = borderWidth2 / 2 + a;
const bb = borderWidth2 / 2 + b;
ctx.beginPath();
ctx.strokeStyle = borderColor;
ctx.lineWidth = borderWidth2;
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();
});
function getDefaultElementDetailConfig() {
const config = {
boxSizing: "border-box",
borderWidth: 0,
borderColor: "#000000",
shadowColor: "#000000",
borderRadius: 0,
borderDash: [],
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 0,
opacity: 1,
color: "#000000",
textAlign: "left",
verticalAlign: "top",
fontSize: 16,
lineHeight: 20,
fontFamily: "sans-serif",
fontWeight: 400
};
return config;
}
function drawBox(ctx, viewElem, opts) {
var _a, _b;
if (((_a = viewElem == null ? void 0 : viewElem.detail) == null ? void 0 : _a.opacity) !== void 0 && ((_b = viewElem == null ? void 0 : viewElem.detail) == null ? void 0 : _b.opacity) > 0) {
ctx.globalAlpha = viewElem.detail.opacity;
const defaultElemConfig$1 = getDefaultElementDetailConfig();
function calcViewBoxSize(viewElem, opts) {
const { viewScaleInfo } = opts;
const { scale } = viewScaleInfo;
let { borderRadius: borderRadius2, boxSizing = defaultElemConfig$1.boxSizing, borderWidth: borderWidth2 } = viewElem.detail;
if (typeof borderWidth2 !== "number") {
borderRadius2 = 0;
}
let { x: x2, y: y2, w: w2, h: h2 } = viewElem;
let radiusList = [0, 0, 0, 0];
if (typeof borderRadius2 === "number") {
const br = borderRadius2 * scale;
radiusList = [br, br, br, br];
} else if (Array.isArray(borderRadius2) && (borderRadius2 === null || borderRadius2 === void 0 ? void 0 : borderRadius2.length) === 4) {
radiusList = [borderRadius2[0] * scale, borderRadius2[1] * scale, borderRadius2[2] * scale, borderRadius2[3] * scale];
}
let bw = 0;
if (typeof borderWidth2 === "number") {
bw = (borderWidth2 || 1) * scale;
}
if (boxSizing === "border-box") {
x2 = viewElem.x + bw / 2;
y2 = viewElem.y + bw / 2;
w2 = viewElem.w - bw;
h2 = viewElem.h - bw;
} else if (boxSizing === "content-box") {
x2 = viewElem.x - bw / 2;
y2 = viewElem.y - bw / 2;
w2 = viewElem.w + bw;
h2 = viewElem.h + bw;
} else {
ctx.globalAlpha = 1;
x2 = viewElem.x;
y2 = viewElem.y;
w2 = viewElem.w;
h2 = viewElem.h;
}
return {
x: x2,
y: y2,
w: w2,
h: h2,
radiusList
};
}
function createColorStyle(ctx, color2, opts) {
if (typeof color2 === "string") {
return color2;
}
const { viewElementSize, viewScaleInfo, opacity = 1 } = opts;
const { x: x2, y: y2 } = viewElementSize;
const { scale } = viewScaleInfo;
if ((color2 == null ? void 0 : color2.type) === "linear-gradient") {
const { start, end, stops } = color2;
const viewStart = {
x: x2 + start.x * scale,
y: y2 + start.y * scale
};
const viewEnd = {
x: x2 + end.x * scale,
y: y2 + end.y * scale
};
const linearGradient = ctx.createLinearGradient(viewStart.x, viewStart.y, viewEnd.x, viewEnd.y);
stops.forEach((stop) => {
linearGradient.addColorStop(stop.offset, mergeHexColorAlpha(stop.color, opacity));
});
return linearGradient;
}
if ((color2 == null ? void 0 : color2.type) === "radial-gradient") {
const { inner, outer, stops } = color2;
const viewInner = {
x: x2 + inner.x * scale,
y: y2 + inner.y * scale,
radius: inner.radius * scale
};
const viewOuter = {
x: x2 + outer.x * scale,
y: y2 + outer.y * scale,
radius: outer.radius * scale
};
const radialGradient = ctx.createRadialGradient(viewInner.x, viewInner.y, viewInner.radius, viewOuter.x, viewOuter.y, viewOuter.radius);
stops.forEach((stop) => {
radialGradient.addColorStop(stop.offset, mergeHexColorAlpha(stop.color, opacity));
});
return radialGradient;
}
return "#000000";
}
const defaultElemConfig = getDefaultElementDetailConfig();
function drawBox(ctx, viewElem, opts) {
const { pattern, renderContent, originElem, calcElemSize, viewScaleInfo, viewSizeInfo } = opts || {};

@@ -400,8 +505,14 @@ drawClipPath(ctx, viewElem, {

renderContent: () => {
drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
var _a, _b;
if (((_a = viewElem == null ? void 0 : viewElem.detail) == null ? void 0 : _a.opacity) !== void 0 && ((_b = viewElem == null ? void 0 : viewElem.detail) == null ? void 0 : _b.opacity) >= 0) {
ctx.globalAlpha = viewElem.detail.opacity;
} else {
ctx.globalAlpha = 1;
}
drawBoxBackground(ctx, viewElem, { pattern, viewScaleInfo, viewSizeInfo });
renderContent == null ? void 0 : renderContent();
drawBoxBorder(ctx, viewElem, { viewScaleInfo, viewSizeInfo });
ctx.globalAlpha = 1;
}
});
ctx.globalAlpha = 1;
}

@@ -439,17 +550,16 @@ function drawClipPath(ctx, viewElem, opts) {

var _a, _b;
const { pattern, viewScaleInfo } = opts;
const { pattern, viewScaleInfo, viewSizeInfo } = opts;
let transform = [];
viewElem.detail;
if (viewElem.detail.background || pattern) {
const { x: x2, y: y2, w: w2, h: h2 } = viewElem;
let r = (viewElem.detail.borderRadius || 0) * viewScaleInfo.scale;
r = Math.min(r, w2 / 2, h2 / 2);
if (w2 < r * 2 || h2 < r * 2) {
r = 0;
}
const { x: x2, y: y2, w: w2, h: h2, radiusList } = calcViewBoxSize(viewElem, {
viewScaleInfo,
viewSizeInfo
});
ctx.beginPath();
ctx.moveTo(x2 + r, y2);
ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, r);
ctx.arcTo(x2 + w2, y2 + h2, x2, y2 + h2, r);
ctx.arcTo(x2, y2 + h2, x2, y2, r);
ctx.arcTo(x2, y2, x2 + w2, y2, r);
ctx.moveTo(x2 + radiusList[0], y2);
ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, radiusList[1]);
ctx.arcTo(x2 + w2, y2 + h2, x2, y2 + h2, radiusList[2]);
ctx.arcTo(x2, y2 + h2, x2, y2, radiusList[3]);
ctx.arcTo(x2, y2, x2 + w2, y2, radiusList[0]);
ctx.closePath();

@@ -462,35 +572,16 @@ if (typeof pattern === "string") {

ctx.fillStyle = viewElem.detail.background;
} else if (((_a = viewElem.detail.background) == null ? void 0 : _a.type) === "linearGradient") {
const { start, end, stops } = viewElem.detail.background;
const viewStart = {
x: start.x + x2,
y: start.y + y2
};
const viewEnd = {
x: end.x + x2,
y: end.y + y2
};
const linearGradient = ctx.createLinearGradient(viewStart.x, viewStart.y, viewEnd.x, viewEnd.y);
stops.forEach((stop) => {
linearGradient.addColorStop(stop.offset, stop.color);
} else if (((_a = viewElem.detail.background) == null ? void 0 : _a.type) === "linear-gradient") {
const colorStyle = createColorStyle(ctx, viewElem.detail.background, {
viewElementSize: { x: x2, y: y2, w: w2, h: h2 },
viewScaleInfo,
opacity: ctx.globalAlpha
});
ctx.fillStyle = linearGradient;
} else if (((_b = viewElem.detail.background) == null ? 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 = colorStyle;
} else if (((_b = viewElem.detail.background) == null ? void 0 : _b.type) === "radial-gradient") {
const colorStyle = createColorStyle(ctx, viewElem.detail.background, {
viewElementSize: { x: x2, y: y2, w: w2, h: h2 },
viewScaleInfo,
opacity: ctx.globalAlpha
});
ctx.fillStyle = radialGradient;
ctx.fillStyle = colorStyle;
if (transform && transform.length > 0) {

@@ -516,11 +607,21 @@ for (let i = 0; i < (transform == null ? void 0 : transform.length); i++) {

function drawBoxBorder(ctx, viewElem, opts) {
var _a, _b;
if (viewElem.detail.borderWidth === 0) {
return;
}
if (!isColorStr(viewElem.detail.borderColor)) {
return;
}
if (((_a = viewElem == null ? void 0 : viewElem.detail) == null ? void 0 : _a.opacity) !== void 0 && ((_b = viewElem == null ? void 0 : viewElem.detail) == null ? void 0 : _b.opacity) >= 0) {
ctx.globalAlpha = viewElem.detail.opacity;
} else {
ctx.globalAlpha = 1;
}
const { viewScaleInfo } = opts;
let borderColor = "#000000";
const { scale } = viewScaleInfo;
let borderColor = defaultElemConfig.borderColor;
if (isColorStr(viewElem.detail.borderColor) === true) {
borderColor = viewElem.detail.borderColor;
}
const { borderWidth: borderWidth2, borderRadius: borderRadius2, borderDash } = viewElem.detail;
const { borderWidth: borderWidth2, borderRadius: borderRadius2, borderDash, boxSizing = defaultElemConfig.boxSizing } = viewElem.detail;
let bw = 0;

@@ -530,6 +631,15 @@ if (typeof borderWidth2 === "number") {

}
bw = bw * viewScaleInfo.scale;
let r = borderRadius2 || 0;
bw = bw * scale;
let radiusList = [0, 0, 0, 0];
if (typeof borderRadius2 === "number") {
const br = borderRadius2 * scale;
radiusList = [br, br, br, br];
} else if (Array.isArray(borderRadius2) && (borderRadius2 == null ? void 0 : borderRadius2.length) === 4) {
radiusList = [borderRadius2[0] * scale, borderRadius2[1] * scale, borderRadius2[2] * scale, borderRadius2[3] * scale];
}
ctx.strokeStyle = borderColor;
ctx.setLineDash(borderDash || []);
let viewBorderDash = [];
if (Array.isArray(borderDash) && borderDash.length > 0) {
viewBorderDash = borderDash.map((num) => Math.ceil(num * scale));
}
let borderTop = 0;

@@ -540,14 +650,31 @@ let borderRight = 0;

if (Array.isArray(borderWidth2)) {
borderTop = borderWidth2[0] || 0;
borderRight = borderWidth2[1] || 0;
borderBottom = borderWidth2[2] || 0;
borderLeft = borderWidth2[3] || 0;
borderTop = (borderWidth2[0] || 0) * scale;
borderRight = (borderWidth2[1] || 0) * scale;
borderBottom = (borderWidth2[2] || 0) * scale;
borderLeft = (borderWidth2[3] || 0) * scale;
}
if (borderLeft || borderRight || borderTop || borderBottom) {
const { x: x2, y: y2, w: w2, h: h2 } = viewElem;
if (borderLeft) {
ctx.lineCap = "butt";
let { x: x2, y: y2, w: w2, h: h2 } = viewElem;
if (boxSizing === "border-box") {
x2 = x2 + borderLeft / 2;
y2 = y2 + borderTop / 2;
w2 = w2 - borderLeft / 2 - borderRight / 2;
h2 = h2 - borderTop / 2 - borderBottom / 2;
} else if (boxSizing === "content-box") {
x2 = x2 - borderLeft / 2;
y2 = y2 - borderTop / 2;
w2 = w2 + borderLeft / 2 + borderRight / 2;
h2 = h2 + borderTop / 2 + borderBottom / 2;
} else {
x2 = viewElem.x;
y2 = viewElem.y;
w2 = viewElem.w;
h2 = viewElem.h;
}
if (borderTop) {
ctx.beginPath();
ctx.lineWidth = borderLeft * viewScaleInfo.scale;
ctx.moveTo(x2, y2);
ctx.lineTo(x2, y2 + h2);
ctx.lineWidth = borderTop;
ctx.moveTo(x2 - borderLeft / 2, y2);
ctx.lineTo(x2 + w2 + borderRight / 2, y2);
ctx.closePath();

@@ -558,21 +685,21 @@ ctx.stroke();

ctx.beginPath();
ctx.lineWidth = borderRight * viewScaleInfo.scale;
ctx.moveTo(x2 + w2, y2);
ctx.lineTo(x2 + w2, y2 + h2);
ctx.lineWidth = borderRight;
ctx.moveTo(x2 + w2, y2 - borderTop / 2);
ctx.lineTo(x2 + w2, y2 + h2 + borderBottom / 2);
ctx.closePath();
ctx.stroke();
}
if (borderTop) {
if (borderBottom) {
ctx.beginPath();
ctx.lineWidth = borderTop * viewScaleInfo.scale;
ctx.moveTo(x2, y2);
ctx.lineTo(x2 + w2, y2);
ctx.lineWidth = borderBottom;
ctx.moveTo(x2 - borderLeft / 2, y2 + h2);
ctx.lineTo(x2 + w2 + borderRight / 2, y2 + h2);
ctx.closePath();
ctx.stroke();
}
if (borderBottom) {
if (borderLeft) {
ctx.beginPath();
ctx.lineWidth = borderBottom * viewScaleInfo.scale;
ctx.moveTo(x2, y2 + h2);
ctx.lineTo(x2 + w2, y2 + h2);
ctx.lineWidth = borderLeft;
ctx.moveTo(x2, y2 - borderTop / 2);
ctx.lineTo(x2, y2 + h2 + borderBottom / 2);
ctx.closePath();

@@ -583,4 +710,13 @@ ctx.stroke();

let { x: x2, y: y2, w: w2, h: h2 } = viewElem;
const { boxSizing } = viewElem.detail;
if (boxSizing === "border-box") {
x2 = viewElem.x + bw / 2;
y2 = viewElem.y + bw / 2;
w2 = viewElem.w - bw;
h2 = viewElem.h - bw;
} else if (boxSizing === "content-box") {
x2 = viewElem.x - bw / 2;
y2 = viewElem.y - bw / 2;
w2 = viewElem.w + bw;
h2 = viewElem.h + bw;
} else {
x2 = viewElem.x;

@@ -590,22 +726,21 @@ y2 = viewElem.y;

h2 = viewElem.h;
}
if (viewBorderDash.length > 0) {
ctx.lineCap = "butt";
} else {
x2 = viewElem.x - bw;
y2 = viewElem.y - bw;
w2 = viewElem.w + bw * 2;
h2 = viewElem.h + bw * 2;
ctx.lineCap = "square";
}
r = Math.min(r, w2 / 2, h2 / 2);
if (r < w2 / 2 && r < h2 / 2) {
r = r + bw / 2;
}
ctx.setLineDash(viewBorderDash);
ctx.lineWidth = bw;
ctx.beginPath();
ctx.lineWidth = bw;
ctx.moveTo(x2 + r, y2);
ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, r);
ctx.arcTo(x2 + w2, y2 + h2, x2, y2 + h2, r);
ctx.arcTo(x2, y2 + h2, x2, y2, r);
ctx.arcTo(x2, y2, x2 + w2, y2, r);
ctx.moveTo(x2 + radiusList[0], y2);
ctx.arcTo(x2 + w2, y2, x2 + w2, y2 + h2, radiusList[1]);
ctx.arcTo(x2 + w2, y2 + h2, x2, y2 + h2, radiusList[2]);
ctx.arcTo(x2, y2 + h2, x2, y2, radiusList[3]);
ctx.arcTo(x2, y2, x2 + w2, y2, radiusList[0]);
ctx.closePath();
ctx.stroke();
ctx.globalAlpha = 1;
}
ctx.setLineDash([]);
}

@@ -618,3 +753,3 @@ function drawBoxShadow(ctx, viewElem, opts) {

ctx.save();
ctx.shadowColor = shadowColor || "#000000";
ctx.shadowColor = shadowColor || defaultElemConfig.shadowColor;
ctx.shadowOffsetX = (shadowOffsetX || 0) * viewScaleInfo.scale;

@@ -629,2 +764,48 @@ ctx.shadowOffsetY = (shadowOffsetY || 0) * viewScaleInfo.scale;

}
function drawCircle(ctx, elem, opts) {
const { detail, angle: angle2 } = elem;
const { background = "#000000", borderColor = "#000000", borderWidth: borderWidth2 = 0 } = detail;
const { calculator, viewScaleInfo, viewSizeInfo } = opts;
const { x: x2, y: y2, w: w2, h: h2 } = calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo);
const viewElem = { ...elem, ...{ x: x2, y: y2, w: w2, h: h2, angle: angle2 } };
rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
drawBoxShadow(ctx, viewElem, {
viewScaleInfo,
viewSizeInfo,
renderContent: () => {
var _a, _b;
const a = w2 / 2;
const b = h2 / 2;
const centerX = x2 + a;
const centerY = y2 + b;
if (((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.opacity) !== void 0 && ((_b = elem == null ? void 0 : elem.detail) == null ? void 0 : _b.opacity) >= 0) {
ctx.globalAlpha = elem.detail.opacity;
} else {
ctx.globalAlpha = 1;
}
if (typeof borderWidth2 === "number" && borderWidth2 > 0) {
const ba = borderWidth2 / 2 + a;
const bb = borderWidth2 / 2 + b;
ctx.beginPath();
ctx.strokeStyle = borderColor;
ctx.lineWidth = borderWidth2;
ctx.circle(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
ctx.closePath();
ctx.stroke();
}
ctx.beginPath();
const fillStyle = createColorStyle(ctx, background, {
viewElementSize: { x: x2, y: y2, w: w2, h: h2 },
viewScaleInfo,
opacity: ctx.globalAlpha
});
ctx.fillStyle = fillStyle;
ctx.circle(centerX, centerY, a, b, 0, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.globalAlpha = 1;
}
});
});
}
function drawRect(ctx, elem, opts) {

@@ -652,16 +833,49 @@ const { calculator, viewScaleInfo, viewSizeInfo } = opts;

function drawImage(ctx, elem, opts) {
const content = opts.loader.getContent(elem.uuid);
const content = opts.loader.getContent(elem);
const { calculator, viewScaleInfo, viewSizeInfo } = opts;
const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
const viewElem = { ...elem, ...{ x: x2, y: y2, w: w2, h: h2, angle: angle2 } };
rotateElement(ctx, { x: x2, y: y2, w: w2, h: h2, angle: angle2 }, () => {
if (!content) {
opts.loader.load(elem, opts.elementAssets || {});
}
if (elem.type === "image" && content) {
ctx.drawImage(content, x2, y2, w2, h2);
}
drawBoxShadow(ctx, viewElem, {
viewScaleInfo,
viewSizeInfo,
renderContent: () => {
drawBox(ctx, viewElem, {
originElem: elem,
calcElemSize: { x: x2, y: y2, w: w2, h: h2, angle: angle2 },
viewScaleInfo,
viewSizeInfo,
renderContent: () => {
if (!content) {
opts.loader.load(elem, opts.elementAssets || {});
}
if (elem.type === "image" && content) {
const { opacity } = elem.detail;
ctx.globalAlpha = opacity ? opacity : 1;
const { x: x22, y: y22, w: w22, h: h22, radiusList } = calcViewBoxSize(viewElem, {
viewScaleInfo,
viewSizeInfo
});
ctx.save();
ctx.beginPath();
ctx.moveTo(x22 + radiusList[0], y22);
ctx.arcTo(x22 + w22, y22, x22 + w22, y22 + h22, radiusList[1]);
ctx.arcTo(x22 + w22, y22 + h22, x22, y22 + h22, radiusList[2]);
ctx.arcTo(x22, y22 + h22, x22, y22, radiusList[3]);
ctx.arcTo(x22, y22, x22 + w22, y22, radiusList[0]);
ctx.closePath();
ctx.fill();
ctx.clip();
ctx.drawImage(content, x22, y22, w22, h22);
ctx.globalAlpha = 1;
ctx.restore();
}
}
});
}
});
});
}
function drawSVG(ctx, elem, opts) {
const content = opts.loader.getContent(elem.uuid);
const content = opts.loader.getContent(elem);
const { calculator, viewScaleInfo, viewSizeInfo } = opts;

@@ -674,3 +888,6 @@ const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);

if (elem.type === "svg" && content) {
const { opacity } = elem.detail;
ctx.globalAlpha = opacity ? opacity : 1;
ctx.drawImage(content, x2, y2, w2, h2);
ctx.globalAlpha = 1;
}

@@ -680,3 +897,3 @@ });

function drawHTML(ctx, elem, opts) {
const content = opts.loader.getContent(elem.uuid);
const content = opts.loader.getContent(elem);
const { calculator, viewScaleInfo, viewSizeInfo } = opts;

@@ -686,9 +903,13 @@ const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);

if (!content) {
opts.loader.load(elem);
opts.loader.load(elem, opts.elementAssets || {});
}
if (elem.type === "html" && content) {
const { opacity } = elem.detail;
ctx.globalAlpha = opacity ? opacity : 1;
ctx.drawImage(content, x2, y2, w2, h2);
ctx.globalAlpha = 1;
}
});
}
const detailConfig = getDefaultElementDetailConfig();
function drawText(ctx, elem, opts) {

@@ -706,12 +927,8 @@ const { calculator, viewScaleInfo, viewSizeInfo } = opts;

const detail = {
...{
fontSize: 12,
fontFamily: "sans-serif",
textAlign: "center"
},
...detailConfig,
...elem.detail
};
const fontSize2 = detail.fontSize * viewScaleInfo.scale;
const fontSize2 = (detail.fontSize || detailConfig.fontSize) * viewScaleInfo.scale;
const lineHeight2 = detail.lineHeight ? detail.lineHeight * viewScaleInfo.scale : fontSize2;
ctx.fillStyle = elem.detail.color;
ctx.fillStyle = elem.detail.color || detailConfig.color;
ctx.textBaseline = "top";

@@ -952,6 +1169,16 @@ ctx.$setFont({

}
const defaultDetail = getDefaultElementDetailConfig();
function drawElementList(ctx, data, opts) {
const { elements = [] } = data;
for (let i = 0; i < elements.length; i++) {
const elem = elements[i];
const element = elements[i];
const elem = {
...element,
...{
detail: {
...defaultDetail,
...element == null ? void 0 : element.detail
}
}
};
if (!opts.calculator.isElementInView(elem, opts.viewScaleInfo, opts.viewSizeInfo)) {

@@ -968,2 +1195,20 @@ continue;

const supportElementTypes = ["image", "svg", "html"];
const getAssetIdFromElement = (element) => {
var _a, _b, _c;
let source = null;
if (element.type === "image") {
source = ((_a = element == null ? void 0 : element.detail) == null ? void 0 : _a.src) || null;
} else if (element.type === "svg") {
source = ((_b = element == null ? void 0 : element.detail) == null ? void 0 : _b.svg) || null;
} else if (element.type === "html") {
source = ((_c = element == null ? void 0 : element.detail) == null ? void 0 : _c.html) || null;
}
if (typeof source === "string" && source) {
if (isAssetId(source)) {
return source;
}
return createAssetId(source);
}
return createAssetId(`${createUUID()}-${element.uuid}-${createUUID()}-${createUUID()}`);
};
class Loader extends EventEmitter {

@@ -1036,11 +1281,11 @@ constructor() {

_emitLoad(item) {
const uuid = item.element.uuid;
const storageItem = this._storageLoadItemMap[uuid];
const assetId = getAssetIdFromElement(item.element);
const storageItem = this._storageLoadItemMap[assetId];
if (storageItem) {
if (storageItem.startTime < item.startTime) {
this._storageLoadItemMap[uuid] = item;
this._storageLoadItemMap[assetId] = item;
this.trigger("load", { ...item, countTime: item.endTime - item.startTime });
}
} else {
this._storageLoadItemMap[uuid] = item;
this._storageLoadItemMap[assetId] = item;
this.trigger("load", { ...item, countTime: item.endTime - item.startTime });

@@ -1050,11 +1295,11 @@ }

_emitError(item) {
const uuid = item.element.uuid;
const storageItem = this._storageLoadItemMap[uuid];
const assetId = getAssetIdFromElement(item.element);
const storageItem = this._storageLoadItemMap[assetId];
if (storageItem) {
if (storageItem.startTime < item.startTime) {
this._storageLoadItemMap[uuid] = item;
this._storageLoadItemMap[assetId] = item;
this.trigger("error", { ...item, countTime: item.endTime - item.startTime });
}
} else {
this._storageLoadItemMap[uuid] = item;
this._storageLoadItemMap[assetId] = item;
this.trigger("error", { ...item, countTime: item.endTime - item.startTime });

@@ -1065,3 +1310,4 @@ }

const item = this._createLoadItem(element);
this._currentLoadItemMap[element.uuid] = item;
const assetId = getAssetIdFromElement(element);
this._currentLoadItemMap[assetId] = item;
const loadFunc = this._loadFuncMap[element.type];

@@ -1086,3 +1332,4 @@ if (typeof loadFunc === "function") {

var _a;
const existItem = (_a = this._currentLoadItemMap) == null ? void 0 : _a[element == null ? void 0 : element.uuid];
const assetId = getAssetIdFromElement(element);
const existItem = (_a = this._currentLoadItemMap) == null ? void 0 : _a[assetId];
if (existItem && existItem.status === "error" && existItem.source && existItem.source === this._getLoadElementSource(element)) {

@@ -1098,9 +1345,9 @@ return true;

if (supportElementTypes.includes(element.type)) {
const elem = deepClone(element);
this._loadResource(elem, assets);
this._loadResource(element, assets);
}
}
getContent(uuid) {
getContent(element) {
var _a, _b;
return ((_b = (_a = this._storageLoadItemMap) == null ? void 0 : _a[uuid]) == null ? void 0 : _b.content) || null;
const assetId = getAssetIdFromElement(element);
return ((_b = (_a = this._storageLoadItemMap) == null ? void 0 : _a[assetId]) == null ? void 0 : _b.content) || null;
}

@@ -1170,17 +1417,2 @@ }

}
// scroll(opts: { offsetTop?: number; offsetLeft?: number }) {
// const { sharer } = this._opts;
// const { data, scale, offsetTop, offsetBottom, offsetLeft, offsetRight } = sharer.getActiveStoreSnapshot();
// // TODO calc offset data
// if (data) {
// this.drawData(data, {
// scale,
// offsetTop,
// offsetBottom,
// offsetLeft,
// offsetRight
// });
// }
// // sharer.setActiveStorage('scale', num);
// }
}

@@ -1187,0 +1419,0 @@ exports.Renderer = Renderer;

2

dist/index.global.min.js

@@ -1,1 +0,1 @@

var iDrawRenderer=function(e){"use strict";function t(e){return"string"==typeof e&&(/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(e)||/^[a-z]{1,}$/i.test(e))}function n(e){return function e(t){const n=function(e){return Object.prototype.toString.call(e).replace(/[\]|\[]{1,1}/gi,"").split(" ")[1]}(t);if(["Null","Number","String","Boolean","Undefined"].indexOf(n)>=0)return t;if("Array"===n){const n=[];return t.forEach((t=>{n.push(e(t))})),n}if("Object"===n){const n={};Object.keys(t).forEach((i=>{n[i]=e(t[i])}));return Object.getOwnPropertySymbols(t).forEach((i=>{n[i]=e(t[i])})),n}}(e)}function i(e){return(Object.prototype.toString.call(e)||"").replace(/(\[object|\])/gi,"").trim()}const o={type(e,t){const n=i(e);return!0===t?n.toLocaleLowerCase():n},array:e=>"Array"===i(e),json:e=>"Object"===i(e),function:e=>"Function"===i(e),asyncFunction:e=>"AsyncFunction"===i(e),string:e=>"String"===i(e),number:e=>"Number"===i(e),undefined:e=>"Undefined"===i(e),null:e=>"Null"===i(e),promise:e=>"Promise"===i(e)};var r=globalThis&&globalThis.__awaiter||function(e,t,n,i){return new(n||(n=Promise))((function(o,r){function a(e){try{s(i.next(e))}catch(e){r(e)}}function l(e){try{s(i.throw(e))}catch(e){r(e)}}function s(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,l)}s((i=i.apply(e,t||[])).next())}))};const{Image:a}=window;function l(e){return new Promise(((t,n)=>{const i=new a;i.crossOrigin="anonymous",i.onload=function(){t(i)},i.onabort=n,i.onerror=n,i.src=e}))}function s(e){return r(this,void 0,void 0,(function*(){const t=yield function(e){return new Promise(((t,n)=>{const i=new Blob([e],{type:"image/svg+xml;charset=utf-8"}),o=new FileReader;o.readAsDataURL(i),o.onload=function(e){var n;const i=null===(n=null==e?void 0:e.target)||void 0===n?void 0:n.result;t(i)},o.onerror=function(e){n(e)}}))}(e);return yield l(t)}))}function c(e,t){return r(this,void 0,void 0,(function*(){e=e.replace(/\&/gi,"&amp;");const n=yield function(e,t){const{width:n,height:i}=t;return new Promise(((t,o)=>{const r=new Blob([`\n <svg \n xmlns="http://www.w3.org/2000/svg" \n width="${n||""}" \n height = "${i||""}">\n <foreignObject width="100%" height="100%">\n <div xmlns = "http://www.w3.org/1999/xhtml">\n ${e}\n </div>\n </foreignObject>\n </svg>\n `],{type:"image/svg+xml;charset=utf-8"}),a=new FileReader;a.readAsDataURL(r),a.onload=function(e){var n;const i=null===(n=null==e?void 0:e.target)||void 0===n?void 0:n.result;t(i)},a.onerror=function(e){o(e)}}))}(e,t);return yield l(n)}))}function d(e){return"number"==typeof e&&(e>0||e<=0)}function u(e){return"number"==typeof e&&e>=0}function h(e){return"string"==typeof e&&/^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${e}`)}function f(e){return"string"==typeof e&&/^(data:image\/)/.test(`${e}`)}const g={x:function(e){return d(e)},y:function(e){return d(e)},w:u,h:function(e){return"number"==typeof e&&e>=0},angle:function(e){return"number"==typeof e&&e>=-360&&e<=360},number:d,numberStr:function(e){return/^(-?\d+(?:\.\d+)?)$/.test(`${e}`)},borderWidth:function(e){return u(e)},borderRadius:function(e){return d(e)&&e>=0},color:function(e){return t(e)},imageSrc:function(e){return f(e)||h(e)},imageURL:h,imageBase64:f,svg:function(e){return"string"==typeof e&&/^(<svg[\s]{1,}|<svg>)/i.test(`${e}`.trim())&&/<\/[\s]{0,}svg>$/i.test(`${e}`.trim())},html:function(e){let t=!1;if("string"==typeof e){let n=document.createElement("div");n.innerHTML=e,n.children.length>0&&(t=!0),n=null}return t},text:function(e){return"string"==typeof e},fontSize:function(e){return d(e)&&e>0},lineHeight:function(e){return d(e)&&e>0},textAlign:function(e){return["center","left","right"].includes(e)},fontFamily:function(e){return"string"==typeof e&&e.length>0},fontWeight:function(e){return["bold"].includes(e)},strokeWidth:function(e){return d(e)&&e>0}};class w{constructor(){this._listeners=new Map}on(e,t){if(this._listeners.has(e)){const n=this._listeners.get(e)||[];null==n||n.push(t),this._listeners.set(e,n)}else this._listeners.set(e,[t])}off(e,t){if(this._listeners.has(e)){const n=this._listeners.get(e);if(Array.isArray(n))for(let e=0;e<(null==n?void 0:n.length);e++)if(n[e]===t){n.splice(e,1);break}this._listeners.set(e,n||[])}}trigger(e,t){const n=this._listeners.get(e);return!!Array.isArray(n)&&(n.forEach((e=>{e(t)})),!0)}has(e){if(this._listeners.has(e)){const t=this._listeners.get(e);if(Array.isArray(t)&&t.length>0)return!0}return!1}}function m(e,t,n){const i={x:(o=t).x+o.w/2,y:o.y+o.h/2};var o;const r=(t.angle||0)/180*Math.PI;i&&(r>0||r<0)&&(e.translate(i.x,i.y),e.rotate(r),e.translate(-i.x,-i.y)),n(e),i&&(r>0||r<0)&&(e.translate(i.x,i.y),e.rotate(-r),e.translate(-i.x,-i.y))}function v(e){let t="";return e.forEach((e=>{t+=e.type+e.params.join(" ")})),t}function y(e,n,i){var r,a;void 0!==(null==(r=null==n?void 0:n.detail)?void 0:r.opacity)&&(null==(a=null==n?void 0:n.detail)?void 0:a.opacity)>0?e.globalAlpha=n.detail.opacity:e.globalAlpha=1;const{pattern:l,renderContent:s,originElem:c,calcElemSize:d,viewScaleInfo:u,viewSizeInfo:h}=i||{};!function(e,t,n){const{renderContent:i,originElem:o,calcElemSize:r,viewScaleInfo:a,viewSizeInfo:l}=n,s=a.scale*l.devicePixelRatio,{clipPath:c}=(null==o?void 0:o.detail)||{};if(c&&r&&c.commands){const{x:n,y:o,w:a,h:l}=r,{originW:d,originH:u,originX:h,originY:f}=c,g=a/d,w=l/u;let y=n-h*g,x=o-f*w;e.save(),e.translate(y,x),e.scale(s*g,s*w);const S=v(c.commands||[]),p=new Path2D(S);e.clip(p),e.translate(0-y,0-x),e.setTransform(1,0,0,1,0,0),m(e,{...t},(()=>{null==i||i()})),e.restore()}else null==i||i()}(e,n,{originElem:c,calcElemSize:d,viewScaleInfo:u,viewSizeInfo:h,renderContent:()=>{!function(e,n,i){if(!t(n.detail.borderColor))return;const{viewScaleInfo:o}=i;let r="#000000";!0===t(n.detail.borderColor)&&(r=n.detail.borderColor);const{borderWidth:a,borderRadius:l,borderDash:s}=n.detail;let c=0;"number"==typeof a&&(c=a||1);c*=o.scale;let d=l||0;e.strokeStyle=r,e.setLineDash(s||[]);let u=0,h=0,f=0,g=0;Array.isArray(a)&&(u=a[0]||0,h=a[1]||0,f=a[2]||0,g=a[3]||0);if(g||h||u||f){const{x:t,y:i,w:r,h:a}=n;g&&(e.beginPath(),e.lineWidth=g*o.scale,e.moveTo(t,i),e.lineTo(t,i+a),e.closePath(),e.stroke()),h&&(e.beginPath(),e.lineWidth=h*o.scale,e.moveTo(t+r,i),e.lineTo(t+r,i+a),e.closePath(),e.stroke()),u&&(e.beginPath(),e.lineWidth=u*o.scale,e.moveTo(t,i),e.lineTo(t+r,i),e.closePath(),e.stroke()),f&&(e.beginPath(),e.lineWidth=f*o.scale,e.moveTo(t,i+a),e.lineTo(t+r,i+a),e.closePath(),e.stroke())}else{let{x:t,y:i,w:o,h:r}=n;const{boxSizing:a}=n.detail;"border-box"===a?(t=n.x,i=n.y,o=n.w,r=n.h):(t=n.x-c,i=n.y-c,o=n.w+2*c,r=n.h+2*c),d=Math.min(d,o/2,r/2),d<o/2&&d<r/2&&(d+=c/2),e.beginPath(),e.lineWidth=c,e.moveTo(t+d,i),e.arcTo(t+o,i,t+o,i+r,d),e.arcTo(t+o,i+r,t,i+r,d),e.arcTo(t,i+r,t,i,d),e.arcTo(t,i,t+o,i,d),e.closePath(),e.stroke()}}(e,n,{viewScaleInfo:u,viewSizeInfo:h}),function(e,t,n){var i,r;const{pattern:a,viewScaleInfo:l}=n;let s=[];if(t.detail.background||a){const{x:n,y:c,w:d,h:u}=t;let h=(t.detail.borderRadius||0)*l.scale;if(h=Math.min(h,d/2,u/2),(d<2*h||u<2*h)&&(h=0),e.beginPath(),e.moveTo(n+h,c),e.arcTo(n+d,c,n+d,c+u,h),e.arcTo(n+d,c+u,n,c+u,h),e.arcTo(n,c+u,n,c,h),e.arcTo(n,c,n+d,c,h),e.closePath(),"string"==typeof a)e.fillStyle=a;else if(["CanvasPattern"].includes(o.type(a)))e.fillStyle=a;else if("string"==typeof t.detail.background)e.fillStyle=t.detail.background;else if("linearGradient"===(null==(i=t.detail.background)?void 0:i.type)){const{start:i,end:o,stops:r}=t.detail.background,a={x:i.x+n,y:i.y+c},l={x:o.x+n,y:o.y+c},s=e.createLinearGradient(a.x,a.y,l.x,l.y);r.forEach((e=>{s.addColorStop(e.offset,e.color)})),e.fillStyle=s}else if("radialGradient"===(null==(r=t.detail.background)?void 0:r.type)){const{inner:i,outer:o,stops:r}=t.detail.background;s=t.detail.background.transform||[];const a={x:i.x,y:i.y,radius:i.radius*l.scale},d={x:o.x,y:o.y,radius:o.radius*l.scale},u=e.createRadialGradient(a.x,a.y,a.radius,d.x,d.y,d.radius);if(r.forEach((e=>{u.addColorStop(e.offset,e.color)})),e.fillStyle=u,s&&s.length>0)for(let t=0;t<(null==s?void 0:s.length);t++){const i=s[t];"translate"===i.method?e.translate(i.args[0]+n,i.args[1]+c):"rotate"===i.method?e.rotate(...i.args):"scale"===i.method&&e.scale(...i.args)}}e.fill(),s&&s.length>0&&e.setTransform(1,0,0,1,0,0)}}(e,n,{pattern:l,viewScaleInfo:u,viewSizeInfo:h}),null==s||s()}}),e.globalAlpha=1}function x(e,t,n){const{detail:i}=t,{viewScaleInfo:o,renderContent:r}=n,{shadowColor:a,shadowOffsetX:l,shadowOffsetY:s,shadowBlur:c}=i;g.number(c)?(e.save(),e.shadowColor=a||"#000000",e.shadowOffsetX=(l||0)*o.scale,e.shadowOffsetY=(s||0)*o.scale,e.shadowBlur=(c||0)*o.scale,r(),e.restore()):r()}function S(e,n,i){var o;if(!0!==(null==(o=null==n?void 0:n.operations)?void 0:o.invisible))try{switch(n.type){case"rect":!function(e,t,n){const{calculator:i,viewScaleInfo:o,viewSizeInfo:r}=n;let{x:a,y:l,w:s,h:c,angle:d}=i.elementSize(t,o,r);const u={...t,x:a,y:l,w:s,h:c,angle:d};m(e,{x:a,y:l,w:s,h:c,angle:d},(()=>{x(e,u,{viewScaleInfo:o,viewSizeInfo:r,renderContent:()=>{y(e,u,{originElem:t,calcElemSize:{x:a,y:l,w:s,h:c,angle:d},viewScaleInfo:o,viewSizeInfo:r,renderContent:()=>{}})}})}))}(e,n,i);break;case"circle":!function(e,t,n){const{detail:i,angle:o}=t,{background:r="#000000",borderColor:a="#000000",borderWidth:l=0}=i,{calculator:s,viewScaleInfo:c,viewSizeInfo:d}=n,{x:u,y:h,w:f,h:g}=s.elementSize({x:t.x,y:t.y,w:t.w,h:t.h},c,d);m(e,{x:u,y:h,w:f,h:g,angle:o},(()=>{const t=f/2,n=g/2,i=u+t,o=h+n;if(l&&l>0){const r=l/2+t,s=l/2+n;e.beginPath(),e.strokeStyle=a,e.lineWidth=l,e.circle(i,o,r,s,0,0,2*Math.PI),e.closePath(),e.stroke()}e.beginPath(),e.fillStyle=r,e.circle(i,o,t,n,0,0,2*Math.PI),e.closePath(),e.fill()}))}(e,n,i);break;case"text":!function(e,n,i){const{calculator:o,viewScaleInfo:r,viewSizeInfo:a}=i,{x:l,y:s,w:c,h:d,angle:u}=o.elementSize(n,r,a),h={...n,x:l,y:s,w:c,h:d,angle:u};m(e,{x:l,y:s,w:c,h:d,angle:u},(()=>{y(e,h,{originElem:n,calcElemSize:{x:l,y:s,w:c,h:d,angle:u},viewScaleInfo:r,viewSizeInfo:a,renderContent:()=>{const i={fontSize:12,fontFamily:"sans-serif",textAlign:"center",...n.detail},o=i.fontSize*r.scale,a=i.lineHeight?i.lineHeight*r.scale:o;e.fillStyle=n.detail.color,e.textBaseline="top",e.$setFont({fontWeight:i.fontWeight,fontSize:o,fontFamily:i.fontFamily});const u=i.text.replace(/\r\n/gi,"\n"),h=a,f=u.split("\n"),w=[];let m=0;f.forEach(((t,n)=>{let i="";if(t.length>0){for(let o=0;o<t.length&&(e.measureText(i+(t[o]||"")).width<e.$doPixelRatio(c)?i+=t[o]||"":(w.push({text:i,width:e.$undoPixelRatio(e.measureText(i).width)}),i=t[o]||"",m++),!((m+1)*h>d));o++)if(t.length-1===o&&(m+1)*h<d){w.push({text:i,width:e.$undoPixelRatio(e.measureText(i).width)}),n<f.length-1&&m++;break}}else w.push({text:"",width:0})}));let v=0;w.length*h<d&&("top"===n.detail.verticalAlign?v=0:"bottom"===n.detail.verticalAlign?v+=d-w.length*h:v+=(d-w.length*h)/2);{const n=s+v;void 0!==i.textShadowColor&&t(i.textShadowColor)&&(e.shadowColor=i.textShadowColor),void 0!==i.textShadowOffsetX&&g.number(i.textShadowOffsetX)&&(e.shadowOffsetX=i.textShadowOffsetX),void 0!==i.textShadowOffsetY&&g.number(i.textShadowOffsetY)&&(e.shadowOffsetY=i.textShadowOffsetY),void 0!==i.textShadowBlur&&g.number(i.textShadowBlur)&&(e.shadowBlur=i.textShadowBlur),w.forEach(((t,o)=>{let r=l;"center"===i.textAlign?r=l+(c-t.width)/2:"right"===i.textAlign&&(r=l+(c-t.width)),e.fillText(t.text,r,n+h*o)}))}}})}))}(e,n,i);break;case"image":!function(e,t,n){const i=n.loader.getContent(t.uuid),{calculator:o,viewScaleInfo:r,viewSizeInfo:a}=n,{x:l,y:s,w:c,h:d,angle:u}=o.elementSize(t,r,a);m(e,{x:l,y:s,w:c,h:d,angle:u},(()=>{i||n.loader.load(t,n.elementAssets||{}),"image"===t.type&&i&&e.drawImage(i,l,s,c,d)}))}(e,n,i);break;case"svg":!function(e,t,n){const i=n.loader.getContent(t.uuid),{calculator:o,viewScaleInfo:r,viewSizeInfo:a}=n,{x:l,y:s,w:c,h:d,angle:u}=o.elementSize(t,r,a);m(e,{x:l,y:s,w:c,h:d,angle:u},(()=>{i||n.loader.load(t,n.elementAssets||{}),"svg"===t.type&&i&&e.drawImage(i,l,s,c,d)}))}(e,n,i);break;case"html":!function(e,t,n){const i=n.loader.getContent(t.uuid),{calculator:o,viewScaleInfo:r,viewSizeInfo:a}=n,{x:l,y:s,w:c,h:d,angle:u}=o.elementSize(t,r,a);m(e,{x:l,y:s,w:c,h:d,angle:u},(()=>{i||n.loader.load(t),"html"===t.type&&i&&e.drawImage(i,l,s,c,d)}))}(e,n,i);break;case"path":!function(e,t,n){const{detail:i}=t,{originX:o,originY:r,originW:a,originH:l}=i,{calculator:s,viewScaleInfo:c,viewSizeInfo:d}=n,{x:u,y:h,w:f,h:g,angle:w}=s.elementSize(t,c,d),S=f/a,p=g/l,b=u-o*S,I=h-r*p,T=c.scale*d.devicePixelRatio,_={...t,x:u,y:h,w:f,h:g,angle:w};m(e,{x:u,y:h,w:f,h:g,angle:w},(()=>{y(e,_,{originElem:t,calcElemSize:{x:u,y:h,w:f,h:g,angle:w},viewScaleInfo:c,viewSizeInfo:d,renderContent:()=>{x(e,_,{viewScaleInfo:c,viewSizeInfo:d,renderContent:()=>{e.save(),e.translate(b,I),e.scale(T*S/c.scale,T*p/c.scale);const t=v(i.commands||[]),n=new Path2D(t);i.fill&&(e.fillStyle=i.fill,e.fill(n)),i.stroke&&0!==i.strokeWidth&&(e.strokeStyle=i.stroke,e.lineWidth=(i.strokeWidth||1)/d.devicePixelRatio,e.lineCap=i.strokeLineCap||"square",e.stroke(n)),e.translate(-b,-I),e.restore()}})}})}))}(e,n,i);break;case"group":!function(e,t,n){const{calculator:i,viewScaleInfo:o,viewSizeInfo:r}=n,{x:a,y:l,w:s,h:c,angle:d}=i.elementSize({x:t.x,y:t.y,w:t.w,h:t.h,angle:t.angle},o,r),u={...t,x:a,y:l,w:s,h:c,angle:d};m(e,{x:a,y:l,w:s,h:c,angle:d},(()=>{y(e,u,{originElem:t,calcElemSize:{x:a,y:l,w:s,h:c,angle:d},viewScaleInfo:o,viewSizeInfo:r,renderContent:()=>{if(Array.isArray(t.detail.children)){const{parentElementSize:i}=n,o={x:i.x+t.x,y:i.y+t.y,w:t.w||i.w,h:t.h||i.h,angle:t.angle},{calculator:r}=n;"hidden"===t.detail.overflow&&(e.save(),e.beginPath(),e.moveTo(a,l),e.lineTo(a+s,l),e.lineTo(a+s,l+c),e.lineTo(a,l+c),e.closePath(),e.clip());for(let i=0;i<t.detail.children.length;i++){let a=t.detail.children[i];if(a={...a,x:o.x+a.x,y:o.y+a.y},r.isElementInView(a,n.viewScaleInfo,n.viewSizeInfo))try{S(e,a,{...n})}catch(e){console.error(e)}}e.restore()}}})}))}(e,n,i)}}catch(e){console.error(e)}}const p=["image","svg","html"];class b extends w{constructor(){super(),this._loadFuncMap={},this._currentLoadItemMap={},this._storageLoadItemMap={},this._registerLoadFunc("image",(async(e,t)=>{var n;const i=(null==(n=t[e.detail.src])?void 0:n.value)||e.detail.src,o=await l(i);return{uuid:e.uuid,lastModified:Date.now(),content:o}})),this._registerLoadFunc("html",(async(e,t)=>{var n;const i=(null==(n=t[e.detail.html])?void 0:n.value)||e.detail.html,o=await c(i,{width:e.detail.width||e.w,height:e.detail.height||e.h});return{uuid:e.uuid,lastModified:Date.now(),content:o}})),this._registerLoadFunc("svg",(async(e,t)=>{var n;const i=(null==(n=t[e.detail.svg])?void 0:n.value)||e.detail.svg,o=await s(i);return{uuid:e.uuid,lastModified:Date.now(),content:o}}))}_registerLoadFunc(e,t){this._loadFuncMap[e]=t}_getLoadElementSource(e){var t,n,i;let o=null;return"image"===e.type?o=(null==(t=null==e?void 0:e.detail)?void 0:t.src)||null:"svg"===e.type?o=(null==(n=null==e?void 0:e.detail)?void 0:n.svg)||null:"html"===e.type&&(o=(null==(i=null==e?void 0:e.detail)?void 0:i.html)||null),o}_createLoadItem(e){return{element:e,status:"null",content:null,error:null,startTime:-1,endTime:-1,source:this._getLoadElementSource(e)}}_emitLoad(e){const t=e.element.uuid,n=this._storageLoadItemMap[t];n?n.startTime<e.startTime&&(this._storageLoadItemMap[t]=e,this.trigger("load",{...e,countTime:e.endTime-e.startTime})):(this._storageLoadItemMap[t]=e,this.trigger("load",{...e,countTime:e.endTime-e.startTime}))}_emitError(e){const t=e.element.uuid,n=this._storageLoadItemMap[t];n?n.startTime<e.startTime&&(this._storageLoadItemMap[t]=e,this.trigger("error",{...e,countTime:e.endTime-e.startTime})):(this._storageLoadItemMap[t]=e,this.trigger("error",{...e,countTime:e.endTime-e.startTime}))}_loadResource(e,t){const n=this._createLoadItem(e);this._currentLoadItemMap[e.uuid]=n;const i=this._loadFuncMap[e.type];"function"==typeof i&&(n.startTime=Date.now(),i(e,t).then((e=>{n.content=e.content,n.endTime=Date.now(),n.status="load",this._emitLoad(n)})).catch((t=>{console.warn(`Load element source "${n.source}" fail`,t,e),n.endTime=Date.now(),n.status="error",n.error=t,this._emitError(n)})))}_isExistingErrorStorage(e){var t;const n=null==(t=this._currentLoadItemMap)?void 0:t[null==e?void 0:e.uuid];return!(!n||"error"!==n.status||!n.source||n.source!==this._getLoadElementSource(e))}load(e,t){if(!this._isExistingErrorStorage(e)&&p.includes(e.type)){const i=n(e);this._loadResource(i,t)}}getContent(e){var t,n;return(null==(n=null==(t=this._storageLoadItemMap)?void 0:t[e])?void 0:n.content)||null}}return e.Renderer=class extends w{constructor(e){super(),this._loader=new b,this._opts=e,this._init()}_init(){const{_loader:e}=this;e.on("load",(e=>{this.trigger("load",e)})),e.on("error",(()=>{}))}updateOptions(e){this._opts=e}drawData(e,t){const{_loader:n}=this,{calculator:i}=this._opts,{viewContext:o}=this._opts.viewContent;o.clearRect(0,0,o.canvas.width,o.canvas.height);!function(e,t,n){const{elements:i=[]}=t;for(let t=0;t<i.length;t++){const o=i[t];if(n.calculator.isElementInView(o,n.viewScaleInfo,n.viewSizeInfo))try{S(e,o,n)}catch(e){console.error(e)}}}(o,e,{loader:n,calculator:i,parentElementSize:{x:0,y:0,w:t.viewSizeInfo.width,h:t.viewSizeInfo.height},elementAssets:e.assets,...t})}scale(e){const{sharer:t}=this._opts,{data:n,offsetTop:i,offsetBottom:o,offsetLeft:r,offsetRight:a,width:l,height:s,contextHeight:c,contextWidth:d,devicePixelRatio:u}=t.getActiveStoreSnapshot();n&&this.drawData(n,{viewScaleInfo:{scale:e,offsetTop:i,offsetBottom:o,offsetLeft:r,offsetRight:a},viewSizeInfo:{width:l,height:s,contextHeight:c,contextWidth:d,devicePixelRatio:u}})}},Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),e}({});
var iDrawRenderer=function(e){"use strict";function t(e){return"string"==typeof e&&(/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(e)||/^[a-z]{1,}$/i.test(e))}function n(e,t){if(1===t)return e;let n=1;const o=/^\#[0-9a-f]{6,6}$/i;let i=e;if(o.test(e)?n=parseInt(e.substring(5,7).replace(/^\#/,"0x")):/^\#[0-9a-f]{8,8}$/i.test(e)&&(n=parseInt(e.substring(7,9).replace(/^\#/,"0x")),i=e.substring(0,7)),n*=t,o.test(i)&&n>0&&n<1){const e=Math.max(0,Math.min(255,Math.ceil(256*n)));i=`${i.toUpperCase()}${e.toString(16).toUpperCase()}`}return i}function o(){function e(){return(65536*(1+Math.random())|0).toString(16).substring(1)}return`${e()}${e()}-${e()}-${e()}-${e()}-${e()}${e()}${e()}`}function i(e){let t=0;for(let n=0;n<e.length;n++)t+=e.charCodeAt(n)*e.charCodeAt(n)*n*n;return t.toString(16).substring(0,4)}function r(e){const t=e.length,n=Math.floor(t/2),o=e.substring(0,4).padEnd(4,"0"),r=e.substring(0,4).padEnd(4,"0");return`@assets/${i(t.toString(16).padEnd(4,o))}${i(e.substring(n-4,n).padEnd(4,o)).padEnd(4,"f")}-${i(e.substring(n-8,n-4).padEnd(4,o)).padEnd(4,"f")}-${i(e.substring(n-12,n-8).padEnd(4,o)).padEnd(4,"f")}-${i(e.substring(n-16,n-12).padEnd(4,r)).padEnd(4,"f")}-${i(e.substring(n,n+4).padEnd(4,r)).padEnd(4,"f")}${i(e.substring(n+4,n+8).padEnd(4,r)).padEnd(4,"f")}${i(r.padEnd(4,o).padEnd(4,r))}`}function l(e){return(Object.prototype.toString.call(e)||"").replace(/(\[object|\])/gi,"").trim()}const a={type(e,t){const n=l(e);return!0===t?n.toLocaleLowerCase():n},array:e=>"Array"===l(e),json:e=>"Object"===l(e),function:e=>"Function"===l(e),asyncFunction:e=>"AsyncFunction"===l(e),string:e=>"String"===l(e),number:e=>"Number"===l(e),undefined:e=>"Undefined"===l(e),null:e=>"Null"===l(e),promise:e=>"Promise"===l(e)};var s=function(e,t,n,o){return new(n||(n=Promise))((function(i,r){function l(e){try{s(o.next(e))}catch(e){r(e)}}function a(e){try{s(o.throw(e))}catch(e){r(e)}}function s(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(l,a)}s((o=o.apply(e,t||[])).next())}))};const{Image:c}=window;function d(e){return new Promise(((t,n)=>{const o=new c;o.crossOrigin="anonymous",o.onload=function(){t(o)},o.onabort=n,o.onerror=n,o.src=e}))}function h(e){return s(this,void 0,void 0,(function*(){const t=yield function(e){return new Promise(((t,n)=>{const o=new Blob([e],{type:"image/svg+xml;charset=utf-8"}),i=new FileReader;i.readAsDataURL(o),i.onload=function(e){var n;const o=null===(n=null==e?void 0:e.target)||void 0===n?void 0:n.result;t(o)},i.onerror=function(e){n(e)}}))}(e);return yield d(t)}))}function u(e,t){return s(this,void 0,void 0,(function*(){e=e.replace(/\&/gi,"&amp;");const n=yield function(e,t){const{width:n,height:o}=t;return new Promise(((t,i)=>{const r=new Blob([`\n <svg \n xmlns="http://www.w3.org/2000/svg" \n width="${n||""}" \n height = "${o||""}">\n <foreignObject width="100%" height="100%">\n <div xmlns = "http://www.w3.org/1999/xhtml">\n ${e}\n </div>\n </foreignObject>\n </svg>\n `],{type:"image/svg+xml;charset=utf-8"}),l=new FileReader;l.readAsDataURL(r),l.onload=function(e){var n;const o=null===(n=null==e?void 0:e.target)||void 0===n?void 0:n.result;t(o)},l.onerror=function(e){i(e)}}))}(e,t);return yield d(n)}))}function f(e){return"number"==typeof e&&(e>0||e<=0)}function g(e){return"number"==typeof e&&e>=0}function w(e){return"string"==typeof e&&/^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${e}`)}function v(e){return"string"==typeof e&&/^(data:image\/)/.test(`${e}`)}const y={x:function(e){return f(e)},y:function(e){return f(e)},w:g,h:function(e){return"number"==typeof e&&e>=0},angle:function(e){return"number"==typeof e&&e>=-360&&e<=360},number:f,numberStr:function(e){return/^(-?\d+(?:\.\d+)?)$/.test(`${e}`)},borderWidth:function(e){return g(e)},borderRadius:function(e){return f(e)&&e>=0},color:function(e){return t(e)},imageSrc:function(e){return v(e)||w(e)},imageURL:w,imageBase64:v,svg:function(e){return"string"==typeof e&&/^(<svg[\s]{1,}|<svg>)/i.test(`${e}`.trim())&&/<\/[\s]{0,}svg>$/i.test(`${e}`.trim())},html:function(e){let t=!1;if("string"==typeof e){let n=document.createElement("div");n.innerHTML=e,n.children.length>0&&(t=!0),n=null}return t},text:function(e){return"string"==typeof e},fontSize:function(e){return f(e)&&e>0},lineHeight:function(e){return f(e)&&e>0},textAlign:function(e){return["center","left","right"].includes(e)},fontFamily:function(e){return"string"==typeof e&&e.length>0},fontWeight:function(e){return["bold"].includes(e)},strokeWidth:function(e){return f(e)&&e>0}};class m{constructor(){this._listeners=new Map}on(e,t){if(this._listeners.has(e)){const n=this._listeners.get(e)||[];null==n||n.push(t),this._listeners.set(e,n)}else this._listeners.set(e,[t])}off(e,t){if(this._listeners.has(e)){const n=this._listeners.get(e);if(Array.isArray(n))for(let e=0;e<(null==n?void 0:n.length);e++)if(n[e]===t){n.splice(e,1);break}this._listeners.set(e,n||[])}}trigger(e,t){const n=this._listeners.get(e);return!!Array.isArray(n)&&(n.forEach((e=>{e(t)})),!0)}has(e){if(this._listeners.has(e)){const t=this._listeners.get(e);if(Array.isArray(t)&&t.length>0)return!0}return!1}}function p(e,t,n,o){const i=function(e){return e/180*Math.PI}(t||0);n&&(i>0||i<0)&&(e.translate(n.x,n.y),e.rotate(i),e.translate(-n.x,-n.y)),o(e),n&&(i>0||i<0)&&(e.translate(n.x,n.y),e.rotate(-i),e.translate(-n.x,-n.y))}function x(e,t,n){const o={x:(i=t).x+i.w/2,y:i.y+i.h/2};var i;p(e,t.angle||0,o,(()=>{n(e)}))}function b(e){let t="";return e.forEach((e=>{t+=e.type+e.params.join(" ")})),t}const S={boxSizing:"border-box",borderWidth:0,borderColor:"#000000",shadowColor:"#000000",borderRadius:0,borderDash:[],shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,opacity:1,color:"#000000",textAlign:"left",verticalAlign:"top",fontSize:16,lineHeight:20,fontFamily:"sans-serif",fontWeight:400};function I(e,t){const{viewScaleInfo:n}=t,{scale:o}=n;let{borderRadius:i,boxSizing:r=S.boxSizing,borderWidth:l}=e.detail;"number"!=typeof l&&(i=0);let{x:a,y:s,w:c,h:d}=e,h=[0,0,0,0];if("number"==typeof i){const e=i*o;h=[e,e,e,e]}else Array.isArray(i)&&4===(null==i?void 0:i.length)&&(h=[i[0]*o,i[1]*o,i[2]*o,i[3]*o]);let u=0;return"number"==typeof l&&(u=(l||1)*o),"border-box"===r?(a=e.x+u/2,s=e.y+u/2,c=e.w-u,d=e.h-u):"content-box"===r?(a=e.x-u/2,s=e.y-u/2,c=e.w+u,d=e.h+u):(a=e.x,s=e.y,c=e.w,d=e.h),{x:a,y:s,w:c,h:d,radiusList:h}}function z(e,t,o){if("string"==typeof t)return t;const{viewElementSize:i,viewScaleInfo:r,opacity:l=1}=o,{x:a,y:s}=i,{scale:c}=r;if("linear-gradient"===(null==t?void 0:t.type)){const{start:o,end:i,stops:r}=t,d={x:a+o.x*c,y:s+o.y*c},h={x:a+i.x*c,y:s+i.y*c},u=e.createLinearGradient(d.x,d.y,h.x,h.y);return r.forEach((e=>{u.addColorStop(e.offset,n(e.color,l))})),u}if("radial-gradient"===(null==t?void 0:t.type)){const{inner:o,outer:i,stops:r}=t,d={x:a+o.x*c,y:s+o.y*c,radius:o.radius*c},h={x:a+i.x*c,y:s+i.y*c,radius:i.radius*c},u=e.createRadialGradient(d.x,d.y,d.radius,h.x,h.y,h.radius);return r.forEach((e=>{u.addColorStop(e.offset,n(e.color,l))})),u}return"#000000"}const A={boxSizing:"border-box",borderWidth:0,borderColor:"#000000",shadowColor:"#000000",borderRadius:0,borderDash:[],shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,opacity:1,color:"#000000",textAlign:"left",verticalAlign:"top",fontSize:16,lineHeight:20,fontFamily:"sans-serif",fontWeight:400};function T(e,n,o){const{pattern:i,renderContent:r,originElem:l,calcElemSize:s,viewScaleInfo:c,viewSizeInfo:d}=o||{};!function(e,t,n){const{renderContent:o,originElem:i,calcElemSize:r,viewScaleInfo:l,viewSizeInfo:a}=n,s=l.scale*a.devicePixelRatio,{clipPath:c}=(null==i?void 0:i.detail)||{};if(c&&r&&c.commands){const{x:n,y:i,w:l,h:a}=r,{originW:d,originH:h,originX:u,originY:f}=c,g=l/d,w=a/h;let v=n-u*g,y=i-f*w;e.save(),e.translate(v,y),e.scale(s*g,s*w);const m=b(c.commands||[]),p=new Path2D(m);e.clip(p),e.translate(0-v,0-y),e.setTransform(1,0,0,1,0,0),x(e,{...t},(()=>{null==o||o()})),e.restore()}else null==o||o()}(e,n,{originElem:l,calcElemSize:s,viewScaleInfo:c,viewSizeInfo:d,renderContent:()=>{var o,l;void 0!==(null==(o=null==n?void 0:n.detail)?void 0:o.opacity)&&(null==(l=null==n?void 0:n.detail)?void 0:l.opacity)>=0?e.globalAlpha=n.detail.opacity:e.globalAlpha=1,function(e,t,n){var o,i;const{pattern:r,viewScaleInfo:l,viewSizeInfo:s}=n;let c=[];if(t.detail,t.detail.background||r){const{x:n,y:d,w:h,h:u,radiusList:f}=I(t,{viewScaleInfo:l,viewSizeInfo:s});if(e.beginPath(),e.moveTo(n+f[0],d),e.arcTo(n+h,d,n+h,d+u,f[1]),e.arcTo(n+h,d+u,n,d+u,f[2]),e.arcTo(n,d+u,n,d,f[3]),e.arcTo(n,d,n+h,d,f[0]),e.closePath(),"string"==typeof r)e.fillStyle=r;else if(["CanvasPattern"].includes(a.type(r)))e.fillStyle=r;else if("string"==typeof t.detail.background)e.fillStyle=t.detail.background;else if("linear-gradient"===(null==(o=t.detail.background)?void 0:o.type)){const o=z(e,t.detail.background,{viewElementSize:{x:n,y:d,w:h,h:u},viewScaleInfo:l,opacity:e.globalAlpha});e.fillStyle=o}else if("radial-gradient"===(null==(i=t.detail.background)?void 0:i.type)){const o=z(e,t.detail.background,{viewElementSize:{x:n,y:d,w:h,h:u},viewScaleInfo:l,opacity:e.globalAlpha});if(e.fillStyle=o,c&&c.length>0)for(let t=0;t<(null==c?void 0:c.length);t++){const o=c[t];"translate"===o.method?e.translate(o.args[0]+n,o.args[1]+d):"rotate"===o.method?e.rotate(...o.args):"scale"===o.method&&e.scale(...o.args)}}e.fill(),c&&c.length>0&&e.setTransform(1,0,0,1,0,0)}}(e,n,{pattern:i,viewScaleInfo:c,viewSizeInfo:d}),null==r||r(),function(e,n,o){var i,r;if(0===n.detail.borderWidth)return;if(!t(n.detail.borderColor))return;void 0!==(null==(i=null==n?void 0:n.detail)?void 0:i.opacity)&&(null==(r=null==n?void 0:n.detail)?void 0:r.opacity)>=0?e.globalAlpha=n.detail.opacity:e.globalAlpha=1;const{viewScaleInfo:l}=o,{scale:a}=l;let s=A.borderColor;!0===t(n.detail.borderColor)&&(s=n.detail.borderColor);const{borderWidth:c,borderRadius:d,borderDash:h,boxSizing:u=A.boxSizing}=n.detail;let f=0;"number"==typeof c&&(f=c||1);f*=a;let g=[0,0,0,0];if("number"==typeof d){const e=d*a;g=[e,e,e,e]}else Array.isArray(d)&&4===(null==d?void 0:d.length)&&(g=[d[0]*a,d[1]*a,d[2]*a,d[3]*a]);e.strokeStyle=s;let w=[];Array.isArray(h)&&h.length>0&&(w=h.map((e=>Math.ceil(e*a))));let v=0,y=0,m=0,p=0;Array.isArray(c)&&(v=(c[0]||0)*a,y=(c[1]||0)*a,m=(c[2]||0)*a,p=(c[3]||0)*a);if(p||y||v||m){e.lineCap="butt";let{x:t,y:o,w:i,h:r}=n;"border-box"===u?(t+=p/2,o+=v/2,i=i-p/2-y/2,r=r-v/2-m/2):"content-box"===u?(t-=p/2,o-=v/2,i=i+p/2+y/2,r=r+v/2+m/2):(t=n.x,o=n.y,i=n.w,r=n.h),v&&(e.beginPath(),e.lineWidth=v,e.moveTo(t-p/2,o),e.lineTo(t+i+y/2,o),e.closePath(),e.stroke()),y&&(e.beginPath(),e.lineWidth=y,e.moveTo(t+i,o-v/2),e.lineTo(t+i,o+r+m/2),e.closePath(),e.stroke()),m&&(e.beginPath(),e.lineWidth=m,e.moveTo(t-p/2,o+r),e.lineTo(t+i+y/2,o+r),e.closePath(),e.stroke()),p&&(e.beginPath(),e.lineWidth=p,e.moveTo(t,o-v/2),e.lineTo(t,o+r+m/2),e.closePath(),e.stroke())}else{let{x:t,y:o,w:i,h:r}=n;"border-box"===u?(t=n.x+f/2,o=n.y+f/2,i=n.w-f,r=n.h-f):"content-box"===u?(t=n.x-f/2,o=n.y-f/2,i=n.w+f,r=n.h+f):(t=n.x,o=n.y,i=n.w,r=n.h),w.length>0?e.lineCap="butt":e.lineCap="square",e.setLineDash(w),e.lineWidth=f,e.beginPath(),e.moveTo(t+g[0],o),e.arcTo(t+i,o,t+i,o+r,g[1]),e.arcTo(t+i,o+r,t,o+r,g[2]),e.arcTo(t,o+r,t,o,g[3]),e.arcTo(t,o,t+i,o,g[0]),e.closePath(),e.stroke(),e.globalAlpha=1}e.setLineDash([])}(e,n,{viewScaleInfo:c,viewSizeInfo:d}),e.globalAlpha=1}})}function E(e,t,n){const{detail:o}=t,{viewScaleInfo:i,renderContent:r}=n,{shadowColor:l,shadowOffsetX:a,shadowOffsetY:s,shadowBlur:c}=o;y.number(c)?(e.save(),e.shadowColor=l||A.shadowColor,e.shadowOffsetX=(a||0)*i.scale,e.shadowOffsetY=(s||0)*i.scale,e.shadowBlur=(c||0)*i.scale,r(),e.restore()):r()}const C={boxSizing:"border-box",borderWidth:0,borderColor:"#000000",shadowColor:"#000000",borderRadius:0,borderDash:[],shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,opacity:1,color:"#000000",textAlign:"left",verticalAlign:"top",fontSize:16,lineHeight:20,fontFamily:"sans-serif",fontWeight:400};function _(e,n,o){var i;if(!0!==(null==(i=null==n?void 0:n.operations)?void 0:i.invisible))try{switch(n.type){case"rect":!function(e,t,n){const{calculator:o,viewScaleInfo:i,viewSizeInfo:r}=n;let{x:l,y:a,w:s,h:c,angle:d}=o.elementSize(t,i,r);const h={...t,x:l,y:a,w:s,h:c,angle:d};x(e,{x:l,y:a,w:s,h:c,angle:d},(()=>{E(e,h,{viewScaleInfo:i,viewSizeInfo:r,renderContent:()=>{T(e,h,{originElem:t,calcElemSize:{x:l,y:a,w:s,h:c,angle:d},viewScaleInfo:i,viewSizeInfo:r,renderContent:()=>{}})}})}))}(e,n,o);break;case"circle":!function(e,t,n){const{detail:o,angle:i}=t,{background:r="#000000",borderColor:l="#000000",borderWidth:a=0}=o,{calculator:s,viewScaleInfo:c,viewSizeInfo:d}=n,{x:h,y:u,w:f,h:g}=s.elementSize({x:t.x,y:t.y,w:t.w,h:t.h},c,d),w={...t,x:h,y:u,w:f,h:g,angle:i};x(e,{x:h,y:u,w:f,h:g,angle:i},(()=>{E(e,w,{viewScaleInfo:c,viewSizeInfo:d,renderContent:()=>{var n,o;const i=f/2,s=g/2,d=h+i,w=u+s;if(void 0!==(null==(n=null==t?void 0:t.detail)?void 0:n.opacity)&&(null==(o=null==t?void 0:t.detail)?void 0:o.opacity)>=0?e.globalAlpha=t.detail.opacity:e.globalAlpha=1,"number"==typeof a&&a>0){const t=a/2+i,n=a/2+s;e.beginPath(),e.strokeStyle=l,e.lineWidth=a,e.circle(d,w,t,n,0,0,2*Math.PI),e.closePath(),e.stroke()}e.beginPath();const v=z(e,r,{viewElementSize:{x:h,y:u,w:f,h:g},viewScaleInfo:c,opacity:e.globalAlpha});e.fillStyle=v,e.circle(d,w,i,s,0,0,2*Math.PI),e.closePath(),e.fill(),e.globalAlpha=1}})}))}(e,n,o);break;case"text":!function(e,n,o){const{calculator:i,viewScaleInfo:r,viewSizeInfo:l}=o,{x:a,y:s,w:c,h:d,angle:h}=i.elementSize(n,r,l),u={...n,x:a,y:s,w:c,h:d,angle:h};x(e,{x:a,y:s,w:c,h:d,angle:h},(()=>{T(e,u,{originElem:n,calcElemSize:{x:a,y:s,w:c,h:d,angle:h},viewScaleInfo:r,viewSizeInfo:l,renderContent:()=>{const o={...C,...n.detail},i=(o.fontSize||C.fontSize)*r.scale,l=o.lineHeight?o.lineHeight*r.scale:i;e.fillStyle=n.detail.color||C.color,e.textBaseline="top",e.$setFont({fontWeight:o.fontWeight,fontSize:i,fontFamily:o.fontFamily});const h=o.text.replace(/\r\n/gi,"\n"),u=l,f=h.split("\n"),g=[];let w=0;f.forEach(((t,n)=>{let o="";if(t.length>0){for(let i=0;i<t.length&&(e.measureText(o+(t[i]||"")).width<e.$doPixelRatio(c)?o+=t[i]||"":(g.push({text:o,width:e.$undoPixelRatio(e.measureText(o).width)}),o=t[i]||"",w++),!((w+1)*u>d));i++)if(t.length-1===i&&(w+1)*u<d){g.push({text:o,width:e.$undoPixelRatio(e.measureText(o).width)}),n<f.length-1&&w++;break}}else g.push({text:"",width:0})}));let v=0;g.length*u<d&&("top"===n.detail.verticalAlign?v=0:"bottom"===n.detail.verticalAlign?v+=d-g.length*u:v+=(d-g.length*u)/2);{const n=s+v;void 0!==o.textShadowColor&&t(o.textShadowColor)&&(e.shadowColor=o.textShadowColor),void 0!==o.textShadowOffsetX&&y.number(o.textShadowOffsetX)&&(e.shadowOffsetX=o.textShadowOffsetX),void 0!==o.textShadowOffsetY&&y.number(o.textShadowOffsetY)&&(e.shadowOffsetY=o.textShadowOffsetY),void 0!==o.textShadowBlur&&y.number(o.textShadowBlur)&&(e.shadowBlur=o.textShadowBlur),g.forEach(((t,i)=>{let r=a;"center"===o.textAlign?r=a+(c-t.width)/2:"right"===o.textAlign&&(r=a+(c-t.width)),e.fillText(t.text,r,n+u*i)}))}}})}))}(e,n,o);break;case"image":!function(e,t,n){const o=n.loader.getContent(t),{calculator:i,viewScaleInfo:r,viewSizeInfo:l}=n,{x:a,y:s,w:c,h:d,angle:h}=i.elementSize(t,r,l),u={...t,x:a,y:s,w:c,h:d,angle:h};x(e,{x:a,y:s,w:c,h:d,angle:h},(()=>{E(e,u,{viewScaleInfo:r,viewSizeInfo:l,renderContent:()=>{T(e,u,{originElem:t,calcElemSize:{x:a,y:s,w:c,h:d,angle:h},viewScaleInfo:r,viewSizeInfo:l,renderContent:()=>{if(o||n.loader.load(t,n.elementAssets||{}),"image"===t.type&&o){const{opacity:n}=t.detail;e.globalAlpha=n||1;const{x:i,y:a,w:s,h:c,radiusList:d}=I(u,{viewScaleInfo:r,viewSizeInfo:l});e.save(),e.beginPath(),e.moveTo(i+d[0],a),e.arcTo(i+s,a,i+s,a+c,d[1]),e.arcTo(i+s,a+c,i,a+c,d[2]),e.arcTo(i,a+c,i,a,d[3]),e.arcTo(i,a,i+s,a,d[0]),e.closePath(),e.fill(),e.clip(),e.drawImage(o,i,a,s,c),e.globalAlpha=1,e.restore()}}})}})}))}(e,n,o);break;case"svg":!function(e,t,n){const o=n.loader.getContent(t),{calculator:i,viewScaleInfo:r,viewSizeInfo:l}=n,{x:a,y:s,w:c,h:d,angle:h}=i.elementSize(t,r,l);x(e,{x:a,y:s,w:c,h:d,angle:h},(()=>{if(o||n.loader.load(t,n.elementAssets||{}),"svg"===t.type&&o){const{opacity:n}=t.detail;e.globalAlpha=n||1,e.drawImage(o,a,s,c,d),e.globalAlpha=1}}))}(e,n,o);break;case"html":!function(e,t,n){const o=n.loader.getContent(t),{calculator:i,viewScaleInfo:r,viewSizeInfo:l}=n,{x:a,y:s,w:c,h:d,angle:h}=i.elementSize(t,r,l);x(e,{x:a,y:s,w:c,h:d,angle:h},(()=>{if(o||n.loader.load(t,n.elementAssets||{}),"html"===t.type&&o){const{opacity:n}=t.detail;e.globalAlpha=n||1,e.drawImage(o,a,s,c,d),e.globalAlpha=1}}))}(e,n,o);break;case"path":!function(e,t,n){const{detail:o}=t,{originX:i,originY:r,originW:l,originH:a}=o,{calculator:s,viewScaleInfo:c,viewSizeInfo:d}=n,{x:h,y:u,w:f,h:g,angle:w}=s.elementSize(t,c,d),v=f/l,y=g/a,m=h-i*v,p=u-r*y,S=c.scale*d.devicePixelRatio,I={...t,x:h,y:u,w:f,h:g,angle:w};x(e,{x:h,y:u,w:f,h:g,angle:w},(()=>{T(e,I,{originElem:t,calcElemSize:{x:h,y:u,w:f,h:g,angle:w},viewScaleInfo:c,viewSizeInfo:d,renderContent:()=>{E(e,I,{viewScaleInfo:c,viewSizeInfo:d,renderContent:()=>{e.save(),e.translate(m,p),e.scale(S*v/c.scale,S*y/c.scale);const t=b(o.commands||[]),n=new Path2D(t);o.fill&&(e.fillStyle=o.fill,e.fill(n)),o.stroke&&0!==o.strokeWidth&&(e.strokeStyle=o.stroke,e.lineWidth=(o.strokeWidth||1)/d.devicePixelRatio,e.lineCap=o.strokeLineCap||"square",e.stroke(n)),e.translate(-m,-p),e.restore()}})}})}))}(e,n,o);break;case"group":!function(e,t,n){const{calculator:o,viewScaleInfo:i,viewSizeInfo:r}=n,{x:l,y:a,w:s,h:c,angle:d}=o.elementSize({x:t.x,y:t.y,w:t.w,h:t.h,angle:t.angle},i,r),h={...t,x:l,y:a,w:s,h:c,angle:d};x(e,{x:l,y:a,w:s,h:c,angle:d},(()=>{T(e,h,{originElem:t,calcElemSize:{x:l,y:a,w:s,h:c,angle:d},viewScaleInfo:i,viewSizeInfo:r,renderContent:()=>{if(Array.isArray(t.detail.children)){const{parentElementSize:o}=n,i={x:o.x+t.x,y:o.y+t.y,w:t.w||o.w,h:t.h||o.h,angle:t.angle},{calculator:r}=n;"hidden"===t.detail.overflow&&(e.save(),e.beginPath(),e.moveTo(l,a),e.lineTo(l+s,a),e.lineTo(l+s,a+c),e.lineTo(l,a+c),e.closePath(),e.clip());for(let o=0;o<t.detail.children.length;o++){let l=t.detail.children[o];if(l={...l,x:i.x+l.x,y:i.y+l.y},r.isElementInView(l,n.viewScaleInfo,n.viewSizeInfo))try{_(e,l,{...n})}catch(e){console.error(e)}}e.restore()}}})}))}(e,n,o)}}catch(e){console.error(e)}}const $={boxSizing:"border-box",borderWidth:0,borderColor:"#000000",shadowColor:"#000000",borderRadius:0,borderDash:[],shadowOffsetX:0,shadowOffsetY:0,shadowBlur:0,opacity:1,color:"#000000",textAlign:"left",verticalAlign:"top",fontSize:16,lineHeight:20,fontFamily:"sans-serif",fontWeight:400};const P=["image","svg","html"],L=e=>{var t,n,i;let l=null;return"image"===e.type?l=(null==(t=null==e?void 0:e.detail)?void 0:t.src)||null:"svg"===e.type?l=(null==(n=null==e?void 0:e.detail)?void 0:n.svg)||null:"html"===e.type&&(l=(null==(i=null==e?void 0:e.detail)?void 0:i.html)||null),"string"==typeof l&&l?/^@assets\/[0-9a-z]{8,8}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{12,12}$/.test(`${l}`)?l:r(l):r(`${o()}-${e.uuid}-${o()}-${o()}`)};class k extends m{constructor(){super(),this._loadFuncMap={},this._currentLoadItemMap={},this._storageLoadItemMap={},this._registerLoadFunc("image",(async(e,t)=>{var n;const o=(null==(n=t[e.detail.src])?void 0:n.value)||e.detail.src,i=await d(o);return{uuid:e.uuid,lastModified:Date.now(),content:i}})),this._registerLoadFunc("html",(async(e,t)=>{var n;const o=(null==(n=t[e.detail.html])?void 0:n.value)||e.detail.html,i=await u(o,{width:e.detail.width||e.w,height:e.detail.height||e.h});return{uuid:e.uuid,lastModified:Date.now(),content:i}})),this._registerLoadFunc("svg",(async(e,t)=>{var n;const o=(null==(n=t[e.detail.svg])?void 0:n.value)||e.detail.svg,i=await h(o);return{uuid:e.uuid,lastModified:Date.now(),content:i}}))}_registerLoadFunc(e,t){this._loadFuncMap[e]=t}_getLoadElementSource(e){var t,n,o;let i=null;return"image"===e.type?i=(null==(t=null==e?void 0:e.detail)?void 0:t.src)||null:"svg"===e.type?i=(null==(n=null==e?void 0:e.detail)?void 0:n.svg)||null:"html"===e.type&&(i=(null==(o=null==e?void 0:e.detail)?void 0:o.html)||null),i}_createLoadItem(e){return{element:e,status:"null",content:null,error:null,startTime:-1,endTime:-1,source:this._getLoadElementSource(e)}}_emitLoad(e){const t=L(e.element),n=this._storageLoadItemMap[t];n?n.startTime<e.startTime&&(this._storageLoadItemMap[t]=e,this.trigger("load",{...e,countTime:e.endTime-e.startTime})):(this._storageLoadItemMap[t]=e,this.trigger("load",{...e,countTime:e.endTime-e.startTime}))}_emitError(e){const t=L(e.element),n=this._storageLoadItemMap[t];n?n.startTime<e.startTime&&(this._storageLoadItemMap[t]=e,this.trigger("error",{...e,countTime:e.endTime-e.startTime})):(this._storageLoadItemMap[t]=e,this.trigger("error",{...e,countTime:e.endTime-e.startTime}))}_loadResource(e,t){const n=this._createLoadItem(e),o=L(e);this._currentLoadItemMap[o]=n;const i=this._loadFuncMap[e.type];"function"==typeof i&&(n.startTime=Date.now(),i(e,t).then((e=>{n.content=e.content,n.endTime=Date.now(),n.status="load",this._emitLoad(n)})).catch((t=>{console.warn(`Load element source "${n.source}" fail`,t,e),n.endTime=Date.now(),n.status="error",n.error=t,this._emitError(n)})))}_isExistingErrorStorage(e){var t;const n=L(e),o=null==(t=this._currentLoadItemMap)?void 0:t[n];return!(!o||"error"!==o.status||!o.source||o.source!==this._getLoadElementSource(e))}load(e,t){this._isExistingErrorStorage(e)||P.includes(e.type)&&this._loadResource(e,t)}getContent(e){var t,n;const o=L(e);return(null==(n=null==(t=this._storageLoadItemMap)?void 0:t[o])?void 0:n.content)||null}}return e.Renderer=class extends m{constructor(e){super(),this._loader=new k,this._opts=e,this._init()}_init(){const{_loader:e}=this;e.on("load",(e=>{this.trigger("load",e)})),e.on("error",(()=>{}))}updateOptions(e){this._opts=e}drawData(e,t){const{_loader:n}=this,{calculator:o}=this._opts,{viewContext:i}=this._opts.viewContent;i.clearRect(0,0,i.canvas.width,i.canvas.height);!function(e,t,n){const{elements:o=[]}=t;for(let t=0;t<o.length;t++){const i=o[t],r={...i,detail:{...$,...null==i?void 0:i.detail}};if(n.calculator.isElementInView(r,n.viewScaleInfo,n.viewSizeInfo))try{_(e,r,n)}catch(e){console.error(e)}}}(i,e,{loader:n,calculator:o,parentElementSize:{x:0,y:0,w:t.viewSizeInfo.width,h:t.viewSizeInfo.height},elementAssets:e.assets,...t})}scale(e){const{sharer:t}=this._opts,{data:n,offsetTop:o,offsetBottom:i,offsetLeft:r,offsetRight:l,width:a,height:s,contextHeight:c,contextWidth:d,devicePixelRatio:h}=t.getActiveStoreSnapshot();n&&this.drawData(n,{viewScaleInfo:{scale:e,offsetTop:o,offsetBottom:i,offsetLeft:r,offsetRight:l},viewSizeInfo:{width:a,height:s,contextHeight:c,contextWidth:d,devicePixelRatio:h}})}},Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),e}({});

11

package.json
{
"name": "@idraw/renderer",
"version": "0.4.0-alpha.3",
"version": "0.4.0-alpha.4",
"description": "",

@@ -24,6 +24,7 @@ "main": "dist/esm/index.js",

"devDependencies": {
"@idraw/types": "^0.4.0-alpha.0"
"@idraw/types": "^0.4.0-alpha.4"
},
"dependencies": {
"@idraw/util": "^0.4.0-alpha.3"
"dependencies": {},
"peerDependencies": {
"@idraw/util": "^0.4.0-alpha.4"
},

@@ -34,2 +35,2 @@ "publishConfig": {

}
}
}
dist/esm/draw/base.d.ts
dist/esm/draw/base.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc