@idraw/renderer 0.4.2 → 1.0.0-alpha.1

package/dist/esm/draw/rect.js

@@ -1,24 +1,6 @@
-import { rotateElement, calcViewElementSize } from '@idraw/util';
-import { drawBox, drawBoxShadow } from './box';
-export function drawRect(ctx, elem, opts) {
-    const { viewScaleInfo, viewSizeInfo, parentOpacity } = opts;
-    const { x, y, w, h, angle } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
-    const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
-    rotateElement(ctx, { x, y, w, h, angle }, () => {
-        drawBoxShadow(ctx, viewElem, {
-            viewScaleInfo,
-            viewSizeInfo,
-            renderContent: () => {
-                drawBox(ctx, viewElem, {
-                    originElem: elem,
-                    calcElemSize: { x, y, w, h, angle },
-                    viewScaleInfo,
-                    viewSizeInfo,
-                    parentOpacity,
-                    renderContent: () => {
-                    }
-                });
-            }
-        });
+import { drawBase, rotateViewMaterial } from './base';
+export function drawRect(ctx, mtrl, opts) {
+    rotateViewMaterial(ctx, mtrl, opts, () => {
+        drawBase(ctx, mtrl, opts);
     });
 }

package/dist/esm/draw/svg-code.d.ts

@@ -0,0 +1,2 @@
+import type { StrictMaterial, RendererDrawMaterialOptions, ViewContext2D } from '@idraw/types';
+export declare function drawSVGCode(ctx: ViewContext2D, mtrl: StrictMaterial<'svgCode'>, opts: RendererDrawMaterialOptions): void;

package/dist/esm/draw/svg-code.js

@@ -0,0 +1,15 @@
+import { calcViewMaterialSize } from '@idraw/util';
+import { rotateViewMaterial } from './base';
+export function drawSVGCode(ctx, mtrl, opts) {
+    const content = opts.loader.getContent(mtrl);
+    const { viewScaleInfo } = opts;
+    const { x, y, width, height } = calcViewMaterialSize(mtrl, { viewScaleInfo }) || mtrl;
+    rotateViewMaterial(ctx, mtrl, opts, () => {
+        if (!content && !opts.loader.isDestroyed()) {
+            opts.loader.load(mtrl, opts.materialAssets || {});
+        }
+        if (mtrl.type === 'svgCode' && content) {
+            ctx.drawImage(content, x, y, width, height);
+        }
+    });
+}

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

@@ -1,2 +1,2 @@
-import type { Element, RendererDrawElementOptions, ViewContext2D } from '@idraw/types';
-export declare function drawText(ctx: ViewContext2D, elem: Element<'text'>, opts: RendererDrawElementOptions): void;
+import type { StrictMaterial, RendererDrawMaterialOptions, ViewContext2D } from '@idraw/types';
+export declare function drawText(ctx: ViewContext2D, mtrl: StrictMaterial<'text'>, opts: RendererDrawMaterialOptions): void;

package/dist/esm/draw/text.js

@@ -1,64 +1,74 @@
-import { rotateElement, calcViewElementSize, enhanceFontFamliy } from '@idraw/util';
-import { is, isColorStr, getDefaultElementDetailConfig } from '@idraw/util';
-import { drawBox, drawBoxShadow, getOpacity } from './box';
-const detailConfig = getDefaultElementDetailConfig();
-export function drawText(ctx, elem, opts) {
-    const { viewScaleInfo, viewSizeInfo, parentOpacity, calculator } = opts;
-    const { x, y, w, h, angle } = calcViewElementSize(elem, { viewScaleInfo }) || elem;
-    const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
-    rotateElement(ctx, { x, y, w, h, angle }, () => {
-        var _a, _b;
-        drawBoxShadow(ctx, viewElem, {
-            viewScaleInfo,
-            viewSizeInfo,
-            renderContent: () => {
-                drawBox(ctx, viewElem, {
-                    originElem: elem,
-                    calcElemSize: { x, y, w, h, angle },
-                    viewScaleInfo,
-                    viewSizeInfo,
-                    parentOpacity
-                });
-            }
-        });
+import { enhanceFontFamliy, calcViewMaterialSize } from '@idraw/util';
+import { getDefaultMaterialAttributes } from '@idraw/util';
+import { rotateViewMaterial, drawClipPath } from './base';
+import { createColor } from './color';
+const defaultAttrs = getDefaultMaterialAttributes();
+export function drawText(ctx, mtrl, opts) {
+    const { viewScaleInfo, viewSizeInfo, calculator } = opts;
+    const viewMaterialSize = calcViewMaterialSize(mtrl, { viewScaleInfo }) || mtrl;
+    const { scale } = viewScaleInfo;
+    rotateViewMaterial(ctx, mtrl, opts, ({ viewWorldSize }) => {
         {
-            const detail = Object.assign(Object.assign({}, detailConfig), elem.detail);
-            const originFontSize = detail.fontSize || detailConfig.fontSize;
+            const attributes = Object.assign(Object.assign({}, defaultAttrs), mtrl);
+            const { x, y } = viewWorldSize;
+            const originFontSize = attributes.fontSize || defaultAttrs.fontSize;
             const fontSize = originFontSize * viewScaleInfo.scale;
+            const { opacity, fill, fillOpacity, stroke, strokeWidth, strokeOpacity, strokeLinecap, strokeLinejoin, strokeDasharray, strokeDashoffset, strokeMiterlimit, } = attributes;
             if (fontSize < 2) {
                 return;
             }
-            const { parentOpacity } = opts;
-            const opacity = getOpacity(elem) * parentOpacity;
-            ctx.globalAlpha = opacity;
-            ctx.fillStyle = elem.detail.color || detailConfig.color;
+            const originGlobalAlpha = ctx.globalAlpha;
+            const virtualTextAttributes = calculator.getVirtualItem(mtrl.id);
             ctx.textBaseline = 'top';
             ctx.$setFont({
-                fontWeight: detail.fontWeight,
+                fontWeight: attributes.fontWeight,
                 fontSize: fontSize,
-                fontFamily: enhanceFontFamliy(detail.fontFamily)
+                fontFamily: enhanceFontFamliy(attributes.fontFamily),
             });
-            {
-                const virtualTextDetail = calculator.getVirtualFlatItem(elem.uuid);
-                if (Array.isArray(virtualTextDetail === null || virtualTextDetail === void 0 ? void 0 : virtualTextDetail.textLines) && ((_a = virtualTextDetail === null || virtualTextDetail === void 0 ? void 0 : virtualTextDetail.textLines) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                    if (detail.textShadowColor !== undefined && isColorStr(detail.textShadowColor)) {
-                        ctx.shadowColor = detail.textShadowColor;
-                    }
-                    if (detail.textShadowOffsetX !== undefined && is.number(detail.textShadowOffsetX)) {
-                        ctx.shadowOffsetX = detail.textShadowOffsetX;
-                    }
-                    if (detail.textShadowOffsetY !== undefined && is.number(detail.textShadowOffsetY)) {
-                        ctx.shadowOffsetY = detail.textShadowOffsetY;
+            drawClipPath(ctx, mtrl, {
+                viewScaleInfo,
+                viewSizeInfo,
+                calculator,
+                renderContent: () => {
+                    var _a, _b, _c;
+                    if (fill) {
+                        if (typeof fillOpacity === 'number' && fillOpacity > 0) {
+                            ctx.globalAlpha = originGlobalAlpha * fillOpacity * opacity;
+                        }
+                        ctx.fillStyle = createColor(ctx, fill, { viewMaterialSize, viewScaleInfo, opacity: mtrl.opacity || 1 });
+                        if (Array.isArray(virtualTextAttributes === null || virtualTextAttributes === void 0 ? void 0 : virtualTextAttributes.textLines) && ((_a = virtualTextAttributes === null || virtualTextAttributes === void 0 ? void 0 : virtualTextAttributes.textLines) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                            (_b = virtualTextAttributes === null || virtualTextAttributes === void 0 ? void 0 : virtualTextAttributes.textLines) === null || _b === void 0 ? void 0 : _b.forEach((line) => {
+                                ctx.fillText(line.text, x + line.x * viewScaleInfo.scale, y + line.y * viewScaleInfo.scale);
+                            });
+                        }
+                        ctx.globalAlpha = originGlobalAlpha;
                     }
-                    if (detail.textShadowBlur !== undefined && is.number(detail.textShadowBlur)) {
-                        ctx.shadowBlur = detail.textShadowBlur;
+                    if (typeof strokeWidth === 'number' && strokeWidth > 0) {
+                        if (typeof strokeOpacity === 'number' && strokeOpacity > 0) {
+                            ctx.globalAlpha = originGlobalAlpha * strokeOpacity * opacity;
+                        }
+                        ctx.lineCap = strokeLinecap;
+                        ctx.lineJoin = strokeLinejoin;
+                        ctx.lineDashOffset = strokeDashoffset;
+                        ctx.miterLimit = strokeMiterlimit;
+                        if (Array.isArray(strokeDasharray)) {
+                            const lineDash = strokeDasharray.map((dash) => scale * dash);
+                            ctx.setLineDash(lineDash);
+                        }
+                        ctx.lineWidth = strokeWidth * scale;
+                        ctx.strokeStyle = stroke;
+                        (_c = virtualTextAttributes === null || virtualTextAttributes === void 0 ? void 0 : virtualTextAttributes.textLines) === null || _c === void 0 ? void 0 : _c.forEach((line) => {
+                            ctx.strokeText(line.text, x + line.x * viewScaleInfo.scale, y + line.y * viewScaleInfo.scale);
+                        });
+                        ctx.setLineDash([]);
+                        ctx.lineCap = defaultAttrs.strokeLinecap;
+                        ctx.lineJoin = defaultAttrs.strokeLinejoin;
+                        ctx.lineDashOffset = defaultAttrs.strokeDashoffset;
+                        ctx.miterLimit = defaultAttrs.strokeMiterlimit;
+                        ctx.globalAlpha = originGlobalAlpha;
                     }
-                    (_b = virtualTextDetail === null || virtualTextDetail === void 0 ? void 0 : virtualTextDetail.textLines) === null || _b === void 0 ? void 0 : _b.forEach((line) => {
-                        ctx.fillText(line.text, x + line.x * viewScaleInfo.scale, y + line.y * viewScaleInfo.scale);
-                    });
-                }
-            }
-            ctx.globalAlpha = parentOpacity;
+                },
+            });
         }
     });
 }

package/dist/esm/index.d.ts

@@ -17,4 +17,4 @@ export declare class Renderer extends EventEmitter<RendererEventMap> implements
     getLoader(): Loader;
     getCalculator(): Calculator;
 }
-export { drawCircle, drawRect, drawImage, drawSVG, drawHTML, drawText, drawGroup, drawElement, drawElementList, drawLayout, drawGlobalBackground } from './draw';
+export { drawCircle, drawRect, drawImage, drawSVGCode, drawForeignObject, drawText, drawGroup, drawMaterial, drawMaterialList, drawLayout, drawGlobalBackground, } from './draw';

package/dist/esm/index.js

@@ -11,7 +11,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _Renderer_instances, _Renderer_opts, _Renderer_loader, _Renderer_calculator, _Renderer_hasDestroyed, _Renderer_init;
 import { EventEmitter } from '@idraw/util';
-import { drawElementList, drawLayout, drawGlobalBackground } from './draw/index';
+import { drawMaterialList, drawLayout, drawGlobalBackground } from './draw/index';
 import { Loader } from './loader';
 import { Calculator } from './calculator';
 export { Calculator };
@@ -25,7 +25,7 @@ export class Renderer extends EventEmitter {
         _Renderer_hasDestroyed.set(this, false);
         __classPrivateFieldSet(this, _Renderer_opts, opts, "f");
         __classPrivateFieldSet(this, _Renderer_calculator, new Calculator({
-            tempContext: opts.tempContext
+            tempContext: opts.tempContext,
         }), "f");
         __classPrivateFieldGet(this, _Renderer_instances, "m", _Renderer_init).call(this);
     }
@@ -48,29 +48,29 @@ export class Renderer extends EventEmitter {
         const { sharer } = __classPrivateFieldGet(this, _Renderer_opts, "f");
         const viewContext = __classPrivateFieldGet(this, _Renderer_opts, "f").viewContext;
         viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
-        const parentElementSize = {
+        const parentMaterialSize = {
             x: 0,
             y: 0,
-            w: opts.viewSizeInfo.width,
-            h: opts.viewSizeInfo.height
+            width: opts.viewSizeInfo.width,
+            height: opts.viewSizeInfo.height,
         };
         if (opts.forceDrawAll === true) {
-            __classPrivateFieldGet(this, _Renderer_calculator, "f").resetVirtualFlatItemMap(data, {
+            __classPrivateFieldGet(this, _Renderer_calculator, "f").resetVirtualItemMap(data, {
                 viewScaleInfo: opts.viewScaleInfo,
-                viewSizeInfo: opts.viewSizeInfo
+                viewSizeInfo: opts.viewSizeInfo,
             });
         }
         const drawOpts = Object.assign({ loader,
             calculator,
-            parentElementSize, elementAssets: data.assets, parentOpacity: 1, overrideElementMap: sharer === null || sharer === void 0 ? void 0 : sharer.getActiveOverrideElemenentMap() }, opts);
+            parentMaterialSize, materialAssets: data.assets, parentOpacity: 1, overrideMaterialMap: sharer === null || sharer === void 0 ? void 0 : sharer.getActiveOverrideMaterialMap(), tempContext: __classPrivateFieldGet(this, _Renderer_opts, "f").tempContext }, opts);
         drawGlobalBackground(viewContext, data.global, drawOpts);
         if (data.layout) {
             drawLayout(viewContext, data.layout, drawOpts, () => {
-                drawElementList(viewContext, data, drawOpts);
+                drawMaterialList(viewContext, data, drawOpts);
             });
         }
         else {
-            drawElementList(viewContext, data, drawOpts);
+            drawMaterialList(viewContext, data, drawOpts);
         }
     }
     scale(num) {
@@ -78,7 +78,7 @@ export class Renderer extends EventEmitter {
         if (!sharer) {
             return;
         }
-        const { data, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = sharer.getActiveStoreSnapshot();
+        const { data, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio, } = sharer.getActiveStoreSnapshot();
         if (data) {
             this.drawData(data, {
                 viewScaleInfo: {
@@ -86,15 +86,15 @@ export class Renderer extends EventEmitter {
                     offsetTop,
                     offsetBottom,
                     offsetLeft,
-                    offsetRight
+                    offsetRight,
                 },
                 viewSizeInfo: {
                     width,
                     height,
                     contextHeight,
                     contextWidth,
-                    devicePixelRatio
-                }
+                    devicePixelRatio,
+                },
             });
         }
     }
@@ -120,4 +120,4 @@ _Renderer_opts = new WeakMap(), _Renderer_loader = new WeakMap(), _Renderer_calc
         console.error(e);
     });
 };
-export { drawCircle, drawRect, drawImage, drawSVG, drawHTML, drawText, drawGroup, drawElement, drawElementList, drawLayout, drawGlobalBackground } from './draw';
+export { drawCircle, drawRect, drawImage, drawSVGCode, drawForeignObject, drawText, drawGroup, drawMaterial, drawMaterialList, drawLayout, drawGlobalBackground, } from './draw';

package/dist/esm/loader.d.ts

@@ -1,14 +1,14 @@
-import type { RendererLoader, LoaderEventMap, LoadContent, LoadItemMap, LoadElementType, Element, ElementAssets, RecursivePartial } from '@idraw/types';
+import type { RendererLoader, LoaderEventMap, LoadContent, LoadItemMap, LoadMaterialType, StrictMaterial, MaterialAssets, RecursivePartial } from '@idraw/types';
 import { EventEmitter } from '@idraw/util';
 export declare class Loader extends EventEmitter<LoaderEventMap> implements RendererLoader {
     #private;
     constructor();
     isDestroyed(): boolean;
     reset(): void;
-    resetElementAsset(element: Element<LoadElementType> | RecursivePartial<Element>): void;
+    resetMaterialAsset(material: StrictMaterial<LoadMaterialType> | RecursivePartial<StrictMaterial>): void;
     destroy(): void;
-    load(element: Element<LoadElementType>, assets: ElementAssets): void;
-    getContent(element: Element<LoadElementType>): LoadContent | null;
+    load(material: StrictMaterial<LoadMaterialType>, assets: MaterialAssets): void;
+    getContent(material: StrictMaterial<LoadMaterialType>): LoadContent | null;
     getLoadItemMap(): LoadItemMap;
     setLoadItemMap(itemMap: LoadItemMap): void;
 }

package/dist/esm/loader.js

@@ -18,28 +18,27 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _Loader_instances, _Loader_loadFuncMap, _Loader_currentLoadItemMap, _Loader_storageLoadItemMap, _Loader_hasDestroyed, _Loader_registerLoadFunc, _Loader_getLoadElementSource, _Loader_createLoadItem, _Loader_emitLoad, _Loader_emitError, _Loader_loadResource, _Loader_isExistingErrorStorage;
-import { loadImage, loadHTML, loadSVG, EventEmitter, createAssetId, isAssetId, createUUID } from '@idraw/util';
-const supportElementTypes = ['image', 'svg', 'html'];
-const getAssetIdFromElement = (element) => {
-    var _a, _b, _c;
+var _Loader_instances, _Loader_loadFuncMap, _Loader_currentLoadItemMap, _Loader_storageLoadItemMap, _Loader_hasDestroyed, _Loader_registerLoadFunc, _Loader_getLoadMaterialSource, _Loader_createLoadItem, _Loader_emitLoad, _Loader_emitError, _Loader_loadResource, _Loader_isExistingErrorStorage;
+import { loadImage, loadForeignObject, loadSVGCode, EventEmitter, createAssetId, isAssetId, createUUID, } from '@idraw/util';
+const supportMaterialTypes = ['image', 'svgCode', 'foreignObject'];
+const getAssetIdFromMaterial = (material) => {
     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;
+    if (material.type === 'image') {
+        source = (material === null || material === void 0 ? void 0 : material.href) || 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 (material.type === 'svgCode') {
+        source = (material === null || material === void 0 ? void 0 : material.code) || 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;
+    else if (material.type === 'foreignObject') {
+        source = (material === null || material === void 0 ? void 0 : material.content) || null;
     }
     if (typeof source === 'string' && source) {
         if (isAssetId(source)) {
             return source;
         }
-        return createAssetId(source, element.uuid);
+        return createAssetId(source, material.id);
     }
-    return createAssetId(`${createUUID()}-${element.uuid}-${createUUID()}-${createUUID()}`, element.uuid);
+    return createAssetId(`${createUUID()}-${material.id}-${createUUID()}-${createUUID()}`, material.id);
 };
 export class Loader extends EventEmitter {
     constructor() {
@@ -49,37 +48,37 @@ export class Loader extends EventEmitter {
         _Loader_currentLoadItemMap.set(this, {});
         _Loader_storageLoadItemMap.set(this, {});
         _Loader_hasDestroyed.set(this, false);
-        __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, 'image', (elem, assets) => __awaiter(this, void 0, void 0, function* () {
+        __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, 'image', (mtrl, assets) => __awaiter(this, void 0, void 0, function* () {
             var _a;
-            const src = ((_a = assets[elem.detail.src]) === null || _a === void 0 ? void 0 : _a.value) || elem.detail.src;
-            const content = yield loadImage(src);
+            const href = ((_a = assets[mtrl.href]) === null || _a === void 0 ? void 0 : _a.value) || mtrl.href;
+            const content = yield loadImage(href);
             return {
-                uuid: elem.uuid,
+                id: mtrl.id,
                 lastModified: Date.now(),
-                content
+                content,
             };
         }));
-        __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, 'html', (elem, assets) => __awaiter(this, void 0, void 0, function* () {
+        __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, 'foreignObject', (mtrl, assets) => __awaiter(this, void 0, void 0, function* () {
             var _a;
-            const html = ((_a = assets[elem.detail.html]) === null || _a === void 0 ? void 0 : _a.value) || elem.detail.html;
-            const content = yield loadHTML(html, {
-                width: elem.detail.originW || elem.w,
-                height: elem.detail.originH || elem.h
+            const html = ((_a = assets[mtrl.content]) === null || _a === void 0 ? void 0 : _a.value) || mtrl.content;
+            const content = yield loadForeignObject(html, {
+                width: mtrl.originW || mtrl.width,
+                height: mtrl.originH || mtrl.height,
             });
             return {
-                uuid: elem.uuid,
+                id: mtrl.id,
                 lastModified: Date.now(),
-                content
+                content,
             };
         }));
-        __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, 'svg', (elem, assets) => __awaiter(this, void 0, void 0, function* () {
+        __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_registerLoadFunc).call(this, 'svgCode', (mtrl, assets) => __awaiter(this, void 0, void 0, function* () {
             var _a;
-            const svg = ((_a = assets[elem.detail.svg]) === null || _a === void 0 ? void 0 : _a.value) || elem.detail.svg;
-            const content = yield loadSVG(svg);
+            const svg = ((_a = assets[mtrl.code]) === null || _a === void 0 ? void 0 : _a.value) || mtrl.code;
+            const content = yield loadSVGCode(svg);
             return {
-                uuid: elem.uuid,
+                id: mtrl.id,
                 lastModified: Date.now(),
-                content
+                content,
             };
         }));
     }
@@ -93,27 +92,27 @@ export class Loader extends EventEmitter {
         __classPrivateFieldSet(this, _Loader_currentLoadItemMap, {}, "f");
         __classPrivateFieldSet(this, _Loader_storageLoadItemMap, {}, "f");
     }
-    resetElementAsset(element) {
-        var _a, _b, _c;
-        if (supportElementTypes.includes(element.type)) {
+    resetMaterialAsset(material) {
+        if (supportMaterialTypes.includes(material.type)) {
             let assetId = null;
             let resource = null;
-            if (element.type === 'image' && typeof ((_a = element === null || element === void 0 ? void 0 : element.detail) === null || _a === void 0 ? void 0 : _a.src) === 'string') {
-                resource = element.detail.src;
+            if (material.type === 'image' && typeof (material === null || material === void 0 ? void 0 : material.href) === 'string') {
+                resource = material.href;
             }
-            else if (element.type === 'svg' && typeof ((_b = element === null || element === void 0 ? void 0 : element.detail) === null || _b === void 0 ? void 0 : _b.svg) === 'string') {
-                resource = element.detail.svg;
+            else if (material.type === 'svgCode' && typeof (material === null || material === void 0 ? void 0 : material.code) === 'string') {
+                resource = material.code;
             }
-            else if (element.type === 'html' && typeof ((_c = element === null || element === void 0 ? void 0 : element.detail) === null || _c === void 0 ? void 0 : _c.html) === 'string') {
-                resource = element.detail.html;
+            else if (material.type === 'foreignObject' &&
+                typeof (material === null || material === void 0 ? void 0 : material.content) === 'string') {
+                resource = material.content;
             }
             if (typeof resource === 'string') {
-                this.load(element, {});
+                this.load(material, {});
                 if (isAssetId(resource)) {
                     assetId = resource;
                 }
-                else if (element.uuid) {
-                    assetId = createAssetId(resource, element.uuid);
+                else if (material.id) {
+                    assetId = createAssetId(resource, material.id);
                 }
             }
             if (assetId && isAssetId(assetId)) {
@@ -129,20 +128,20 @@ export class Loader extends EventEmitter {
         __classPrivateFieldSet(this, _Loader_currentLoadItemMap, null, "f");
         __classPrivateFieldSet(this, _Loader_storageLoadItemMap, null, "f");
     }
-    load(element, assets) {
+    load(material, assets) {
         if (__classPrivateFieldGet(this, _Loader_hasDestroyed, "f") === true) {
             return;
         }
-        if (__classPrivateFieldGet(this, _Loader_instances, "m", _Loader_isExistingErrorStorage).call(this, element)) {
+        if (__classPrivateFieldGet(this, _Loader_instances, "m", _Loader_isExistingErrorStorage).call(this, material)) {
             return;
         }
-        if (supportElementTypes.includes(element.type)) {
-            __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_loadResource).call(this, element, assets);
+        if (supportMaterialTypes.includes(material.type)) {
+            __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_loadResource).call(this, material, assets);
         }
     }
-    getContent(element) {
+    getContent(material) {
         var _a, _b;
-        const assetId = getAssetIdFromElement(element);
+        const assetId = getAssetIdFromMaterial(material);
         return ((_b = (_a = __classPrivateFieldGet(this, _Loader_storageLoadItemMap, "f")) === null || _a === void 0 ? void 0 : _a[assetId]) === null || _b === void 0 ? void 0 : _b.content) || null;
     }
     getLoadItemMap() {
@@ -154,31 +153,30 @@ export class Loader extends EventEmitter {
 }
 _Loader_loadFuncMap = new WeakMap(), _Loader_currentLoadItemMap = new WeakMap(), _Loader_storageLoadItemMap = new WeakMap(), _Loader_hasDestroyed = new WeakMap(), _Loader_instances = new WeakSet(), _Loader_registerLoadFunc = function _Loader_registerLoadFunc(type, func) {
     __classPrivateFieldGet(this, _Loader_loadFuncMap, "f")[type] = func;
-}, _Loader_getLoadElementSource = function _Loader_getLoadElementSource(element) {
-    var _a, _b, _c;
+}, _Loader_getLoadMaterialSource = function _Loader_getLoadMaterialSource(material) {
     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;
+    if (material.type === 'image') {
+        source = (material === null || material === void 0 ? void 0 : material.href) || 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 (material.type === 'svgCode') {
+        source = (material === null || material === void 0 ? void 0 : material.code) || 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;
+    else if (material.type === 'foreignObject') {
+        source = (material === null || material === void 0 ? void 0 : material.content) || null;
     }
     return source;
-}, _Loader_createLoadItem = function _Loader_createLoadItem(element) {
+}, _Loader_createLoadItem = function _Loader_createLoadItem(material) {
     return {
-        element,
+        material,
         status: 'null',
         content: null,
         error: null,
         startTime: -1,
         endTime: -1,
-        source: __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_getLoadElementSource).call(this, element)
+        source: __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_getLoadMaterialSource).call(this, material),
     };
 }, _Loader_emitLoad = function _Loader_emitLoad(item) {
-    const assetId = getAssetIdFromElement(item.element);
+    const assetId = getAssetIdFromMaterial(item.material);
     const storageItem = __classPrivateFieldGet(this, _Loader_storageLoadItemMap, "f")[assetId];
     if (!__classPrivateFieldGet(this, _Loader_hasDestroyed, "f")) {
         if (storageItem) {
@@ -194,7 +192,7 @@ _Loader_loadFuncMap = new WeakMap(), _Loader_currentLoadItemMap = new WeakMap(),
     }
 }, _Loader_emitError = function _Loader_emitError(item) {
     var _a;
-    const assetId = getAssetIdFromElement(item.element);
+    const assetId = getAssetIdFromMaterial(item.material);
     const storageItem = (_a = __classPrivateFieldGet(this, _Loader_storageLoadItemMap, "f")) === null || _a === void 0 ? void 0 : _a[assetId];
     if (!__classPrivateFieldGet(this, _Loader_hasDestroyed, "f")) {
         if (storageItem) {
@@ -208,17 +206,17 @@ _Loader_loadFuncMap = new WeakMap(), _Loader_currentLoadItemMap = new WeakMap(),
             this.trigger('error', Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
         }
     }
-}, _Loader_loadResource = function _Loader_loadResource(element, assets) {
-    const item = __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_createLoadItem).call(this, element);
-    const assetId = getAssetIdFromElement(element);
+}, _Loader_loadResource = function _Loader_loadResource(material, assets) {
+    const item = __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_createLoadItem).call(this, material);
+    const assetId = getAssetIdFromMaterial(material);
     if (__classPrivateFieldGet(this, _Loader_currentLoadItemMap, "f")[assetId]) {
         return;
     }
     __classPrivateFieldGet(this, _Loader_currentLoadItemMap, "f")[assetId] = item;
-    const loadFunc = __classPrivateFieldGet(this, _Loader_loadFuncMap, "f")[element.type];
+    const loadFunc = __classPrivateFieldGet(this, _Loader_loadFuncMap, "f")[material.type];
     if (typeof loadFunc === 'function' && !__classPrivateFieldGet(this, _Loader_hasDestroyed, "f")) {
         item.startTime = Date.now();
-        loadFunc(element, assets)
+        loadFunc(material, assets)
             .then((result) => {
             if (!__classPrivateFieldGet(this, _Loader_hasDestroyed, "f")) {
                 item.content = result.content;
@@ -228,21 +226,21 @@ _Loader_loadFuncMap = new WeakMap(), _Loader_currentLoadItemMap = new WeakMap(),
             }
         })
             .catch((err) => {
-            console.warn(`Load element source "${item.source}" fail`, err, element);
+            console.warn(`Load material source "${item.source}" fail`, err, material);
             item.endTime = Date.now();
             item.status = 'error';
             item.error = err;
             __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_emitError).call(this, item);
         });
     }
-}, _Loader_isExistingErrorStorage = function _Loader_isExistingErrorStorage(element) {
+}, _Loader_isExistingErrorStorage = function _Loader_isExistingErrorStorage(material) {
     var _a;
-    const assetId = getAssetIdFromElement(element);
+    const assetId = getAssetIdFromMaterial(material);
     const existItem = (_a = __classPrivateFieldGet(this, _Loader_currentLoadItemMap, "f")) === null || _a === void 0 ? void 0 : _a[assetId];
     if (existItem &&
         existItem.status === 'error' &&
         existItem.source &&
-        existItem.source === __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_getLoadElementSource).call(this, element)) {
+        existItem.source === __classPrivateFieldGet(this, _Loader_instances, "m", _Loader_getLoadMaterialSource).call(this, material)) {
         return true;
     }
     return false;

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

@@ -0,0 +1,2 @@
+import type { Material, VirtualBaseAttributes, CalcVirtualAttributesOptions } from '@idraw/types';
+export declare function calcVirtualBaseAttributes(mtrl: Material, opts: CalcVirtualAttributesOptions): VirtualBaseAttributes;

package/dist/esm/virtual/base.js

@@ -0,0 +1,52 @@
+import { limitAngle } from '@idraw/util';
+function calculateWorldPosition(targetRect, parents) {
+    parents = [...parents].reverse();
+    if (!parents || parents.length === 0) {
+        return {
+            x: targetRect.x + targetRect.width / 2,
+            y: targetRect.y + targetRect.height / 2,
+        };
+    }
+    let centerX = targetRect.x + targetRect.width / 2;
+    let centerY = targetRect.y + targetRect.height / 2;
+    for (let i = 0; i < parents.length; i++) {
+        const parent = parents[i];
+        const transformed = applyRectTransformation({ x: centerX, y: centerY }, parent);
+        centerX = transformed.x;
+        centerY = transformed.y;
+    }
+    return { x: centerX, y: centerY };
+}
+function applyRectTransformation(point, rect) {
+    const rectCenterX = rect.width / 2;
+    const rectCenterY = rect.height / 2;
+    const centeredX = point.x - rectCenterX;
+    const centeredY = point.y - rectCenterY;
+    let rotatedX = centeredX;
+    let rotatedY = centeredY;
+    if (typeof rect.angle === 'number' && rect.angle !== 0) {
+        const angleRad = (rect.angle * Math.PI) / 180;
+        const cos = Math.cos(angleRad);
+        const sin = Math.sin(angleRad);
+        rotatedX = centeredX * cos - centeredY * sin;
+        rotatedY = centeredX * sin + centeredY * cos;
+    }
+    const localX = rotatedX + rectCenterX;
+    const localY = rotatedY + rectCenterY;
+    const worldX = localX + rect.x;
+    const worldY = localY + rect.y;
+    return { x: worldX, y: worldY };
+}
+export function calcVirtualBaseAttributes(mtrl, opts) {
+    const { groupQueue = [] } = opts;
+    let worldAngle = mtrl.angle || 0;
+    groupQueue.forEach((group) => {
+        worldAngle += group.angle || 0;
+    });
+    const worldCenter = calculateWorldPosition(mtrl, groupQueue);
+    const attributes = {
+        worldCenter,
+        worldAngle: limitAngle(worldAngle),
+    };
+    return attributes;
+}

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

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