@idraw/util 0.4.2 → 1.0.0-alpha.1

package/dist/esm/view/controller.js

@@ -1,51 +1,51 @@
 import { createUUID } from '../tool/uuid';
 import { getCenterFromTwoPoints } from './point';
-import { calcElementVertexesInGroup, calcElementVertexes } from './vertex';
-import { calcViewElementSize } from './view-calc';
-import { calcElementCenter } from './rotate';
-function createControllerElementSizeFromCenter(center, opts) {
+import { calcMaterialVertexesInGroup, calcMaterialVertexes } from './vertex';
+import { calcViewMaterialSize } from './view-calc';
+import { calcMaterialCenter } from './rotate';
+function createControllerMaterialSizeFromCenter(center, opts) {
     const { x, y } = center;
     const { size, angle } = opts;
     return {
         x: x - size / 2,
         y: y - size / 2,
-        w: size,
-        h: size,
-        angle
+        width: size,
+        height: size,
+        angle,
     };
 }
-export function calcElementSizeController(elemSize, opts) {
+export function calcMaterialSizeController(mtrlSize, opts) {
     const { groupQueue, controllerSize, viewScaleInfo, rotateControllerSize, rotateControllerPosition } = opts;
     const ctrlSize = (controllerSize && controllerSize > 0 ? controllerSize : 8) / viewScaleInfo.scale;
-    const { x, y, w, h, angle = 0 } = elemSize;
+    const { x, y, width, height, angle = 0 } = mtrlSize;
     const rotateCtrlSize = rotateControllerSize;
     const rotateCtrlPos = rotateControllerPosition;
     const ctrlGroupQueue = [
         ...[
             {
-                uuid: createUUID(),
+                id: createUUID(),
                 x,
                 y,
-                w,
-                h,
+                width,
+                height,
                 angle,
                 type: 'group',
-                detail: { children: [] }
-            }
+                children: [],
+            },
         ],
-        ...groupQueue
+        ...groupQueue,
     ];
     let totalAngle = 0;
     ctrlGroupQueue.forEach(({ angle = 0 }) => {
         totalAngle += angle;
     });
-    const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue });
-    const rotateElemVertexes = calcElementVertexesInGroup({
+    const vertexes = calcMaterialVertexesInGroup(mtrlSize, { groupQueue });
+    const rotateMaterialVertexes = calcMaterialVertexesInGroup({
         x: x,
         y: y - (rotateCtrlPos + rotateCtrlSize / 2) / viewScaleInfo.scale,
-        h: h + (rotateCtrlPos * 2 + rotateCtrlSize) / viewScaleInfo.scale,
-        w: w,
-        angle
+        height: height + (rotateCtrlPos * 2 + rotateCtrlSize) / viewScaleInfo.scale,
+        width,
+        angle,
     }, { groupQueue: [...groupQueue] });
     const topCenter = getCenterFromTwoPoints(vertexes[0], vertexes[1]);
     const rightCenter = getCenterFromTwoPoints(vertexes[1], vertexes[2]);
@@ -55,267 +55,270 @@ export function calcElementSizeController(elemSize, opts) {
     const topRightCenter = vertexes[1];
     const bottomRightCenter = vertexes[2];
     const bottomLeftCenter = vertexes[3];
-    const topMiddleSize = createControllerElementSizeFromCenter(topCenter, { size: ctrlSize, angle: totalAngle });
-    const rightMiddleSize = createControllerElementSizeFromCenter(rightCenter, { size: ctrlSize, angle: totalAngle });
-    const bottomMiddleSize = createControllerElementSizeFromCenter(bottomCenter, { size: ctrlSize, angle: totalAngle });
-    const leftMiddleSize = createControllerElementSizeFromCenter(leftCenter, { size: ctrlSize, angle: totalAngle });
-    const topLeftSize = createControllerElementSizeFromCenter(topLeftCenter, { size: ctrlSize, angle: totalAngle });
-    const topRightSize = createControllerElementSizeFromCenter(topRightCenter, { size: ctrlSize, angle: totalAngle });
-    const bottomLeftSize = createControllerElementSizeFromCenter(bottomLeftCenter, { size: ctrlSize, angle: totalAngle });
-    const bottomRightSize = createControllerElementSizeFromCenter(bottomRightCenter, {
+    const topMiddleSize = createControllerMaterialSizeFromCenter(topCenter, { size: ctrlSize, angle: totalAngle });
+    const rightMiddleSize = createControllerMaterialSizeFromCenter(rightCenter, { size: ctrlSize, angle: totalAngle });
+    const bottomMiddleSize = createControllerMaterialSizeFromCenter(bottomCenter, { size: ctrlSize, angle: totalAngle });
+    const leftMiddleSize = createControllerMaterialSizeFromCenter(leftCenter, { size: ctrlSize, angle: totalAngle });
+    const topLeftSize = createControllerMaterialSizeFromCenter(topLeftCenter, { size: ctrlSize, angle: totalAngle });
+    const topRightSize = createControllerMaterialSizeFromCenter(topRightCenter, { size: ctrlSize, angle: totalAngle });
+    const bottomLeftSize = createControllerMaterialSizeFromCenter(bottomLeftCenter, {
         size: ctrlSize,
-        angle: totalAngle
+        angle: totalAngle,
     });
-    const topLeftVertexes = calcElementVertexes(topLeftSize);
-    const topRightVertexes = calcElementVertexes(topRightSize);
-    const bottomLeftVertexes = calcElementVertexes(bottomLeftSize);
-    const bottomRightVertexes = calcElementVertexes(bottomRightSize);
+    const bottomRightSize = createControllerMaterialSizeFromCenter(bottomRightCenter, {
+        size: ctrlSize,
+        angle: totalAngle,
+    });
+    const topLeftVertexes = calcMaterialVertexes(topLeftSize);
+    const topRightVertexes = calcMaterialVertexes(topRightSize);
+    const bottomLeftVertexes = calcMaterialVertexes(bottomLeftSize);
+    const bottomRightVertexes = calcMaterialVertexes(bottomRightSize);
     const topVertexes = [
         topLeftVertexes[1],
         topRightVertexes[0],
         topRightVertexes[3],
-        topLeftVertexes[2]
+        topLeftVertexes[2],
     ];
     const rightVertexes = [
         topRightVertexes[3],
         topRightVertexes[2],
         bottomRightVertexes[1],
-        bottomRightVertexes[0]
+        bottomRightVertexes[0],
     ];
     const bottomVertexes = [
         bottomLeftVertexes[1],
         bottomRightVertexes[0],
         bottomRightVertexes[3],
-        bottomLeftVertexes[2]
+        bottomLeftVertexes[2],
     ];
     const leftVertexes = [
         topLeftVertexes[3],
         topLeftVertexes[2],
         bottomLeftVertexes[1],
-        bottomLeftVertexes[0]
+        bottomLeftVertexes[0],
     ];
-    const topMiddleVertexes = calcElementVertexes(topMiddleSize);
-    const rightMiddleVertexes = calcElementVertexes(rightMiddleSize);
-    const bottomMiddleVertexes = calcElementVertexes(bottomMiddleSize);
-    const leftMiddleVertexes = calcElementVertexes(leftMiddleSize);
-    const rotateCenter = getCenterFromTwoPoints(rotateElemVertexes[0], rotateElemVertexes[1]);
+    const topMiddleVertexes = calcMaterialVertexes(topMiddleSize);
+    const rightMiddleVertexes = calcMaterialVertexes(rightMiddleSize);
+    const bottomMiddleVertexes = calcMaterialVertexes(bottomMiddleSize);
+    const leftMiddleVertexes = calcMaterialVertexes(leftMiddleSize);
+    const rotateCenter = getCenterFromTwoPoints(rotateMaterialVertexes[0], rotateMaterialVertexes[1]);
     const tempRotateSizeRepairRatio = 1.1;
-    const rotateSize = createControllerElementSizeFromCenter(rotateCenter, {
+    const rotateSize = createControllerMaterialSizeFromCenter(rotateCenter, {
         size: (rotateControllerSize * tempRotateSizeRepairRatio) / viewScaleInfo.scale,
-        angle: totalAngle
+        angle: totalAngle,
     });
-    const rotateVertexes = calcElementVertexes(rotateSize);
+    const rotateVertexes = calcMaterialVertexes(rotateSize);
     const sizeController = {
-        originalElementCenter: calcElementCenter(elemSize),
-        originalElementSize: Object.assign({}, elemSize),
-        elementWrapper: vertexes,
+        originalMaterialCenter: calcMaterialCenter(mtrlSize),
+        originalMaterialSize: Object.assign({}, mtrlSize),
+        materialWrapper: vertexes,
         left: {
             type: 'left',
             vertexes: leftVertexes,
             center: leftCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         right: {
             type: 'right',
             vertexes: rightVertexes,
             center: rightCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         top: {
             type: 'top',
             vertexes: topVertexes,
             center: topCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         bottom: {
             type: 'bottom',
             vertexes: bottomVertexes,
             center: bottomCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         topLeft: {
             type: 'top-left',
             vertexes: topLeftVertexes,
             center: topLeftCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         topRight: {
             type: 'top-right',
             vertexes: topRightVertexes,
             center: topRightCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         bottomLeft: {
             type: 'bottom-left',
             vertexes: bottomLeftVertexes,
             center: bottomLeftCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         bottomRight: {
             type: 'bottom-right',
             vertexes: bottomRightVertexes,
             center: bottomRightCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         leftMiddle: {
             type: 'left-middle',
             vertexes: leftMiddleVertexes,
             center: leftCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         rightMiddle: {
             type: 'right-middle',
             vertexes: rightMiddleVertexes,
             center: rightCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         topMiddle: {
             type: 'top-middle',
             vertexes: topMiddleVertexes,
             center: topCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         bottomMiddle: {
             type: 'bottom-middle',
             vertexes: bottomMiddleVertexes,
             center: bottomCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         rotate: {
             type: 'rotate',
             vertexes: rotateVertexes,
             center: rotateCenter,
-            size: rotateControllerSize
-        }
+            size: rotateControllerSize,
+        },
     };
     return sizeController;
 }
 export function calcLayoutSizeController(layoutSize, opts) {
     const { controllerSize, viewScaleInfo } = opts;
     const ctrlSize = controllerSize && controllerSize > 0 ? controllerSize : 8;
-    const { x, y, w, h } = calcViewElementSize(layoutSize, { viewScaleInfo });
-    const center = calcElementCenter({ x, y, w, h });
+    const { x, y, width, height } = calcViewMaterialSize(layoutSize, { viewScaleInfo });
+    const center = calcMaterialCenter({ x, y, width, height });
     const topCenter = { x: center.x, y };
-    const rightCenter = { x: x + w, y: center.y };
-    const bottomCenter = { x: center.x, y: y + h };
+    const rightCenter = { x: x + width, y: center.y };
+    const bottomCenter = { x: center.x, y: y + height };
     const leftCenter = { x, y: center.y };
     const topLeftCenter = { x, y };
-    const topRightCenter = { x: x + w, y };
-    const bottomRightCenter = { x: x + w, y: y + h };
-    const bottomLeftCenter = { x, y: y + h };
-    const topMiddleSize = createControllerElementSizeFromCenter(topCenter, { size: ctrlSize, angle: 0 });
-    const rightMiddleSize = createControllerElementSizeFromCenter(rightCenter, { size: ctrlSize, angle: 0 });
-    const bottomMiddleSize = createControllerElementSizeFromCenter(bottomCenter, { size: ctrlSize, angle: 0 });
-    const leftMiddleSize = createControllerElementSizeFromCenter(leftCenter, { size: ctrlSize, angle: 0 });
-    const topLeftSize = createControllerElementSizeFromCenter(topLeftCenter, { size: ctrlSize, angle: 0 });
-    const topRightSize = createControllerElementSizeFromCenter(topRightCenter, { size: ctrlSize, angle: 0 });
-    const bottomLeftSize = createControllerElementSizeFromCenter(bottomLeftCenter, { size: ctrlSize, angle: 0 });
-    const bottomRightSize = createControllerElementSizeFromCenter(bottomRightCenter, { size: ctrlSize, angle: 0 });
-    const topLeftVertexes = calcElementVertexes(topLeftSize);
-    const topRightVertexes = calcElementVertexes(topRightSize);
-    const bottomLeftVertexes = calcElementVertexes(bottomLeftSize);
-    const bottomRightVertexes = calcElementVertexes(bottomRightSize);
+    const topRightCenter = { x: x + width, y };
+    const bottomRightCenter = { x: x + width, y: y + height };
+    const bottomLeftCenter = { x, y: y + height };
+    const topMiddleSize = createControllerMaterialSizeFromCenter(topCenter, { size: ctrlSize, angle: 0 });
+    const rightMiddleSize = createControllerMaterialSizeFromCenter(rightCenter, { size: ctrlSize, angle: 0 });
+    const bottomMiddleSize = createControllerMaterialSizeFromCenter(bottomCenter, { size: ctrlSize, angle: 0 });
+    const leftMiddleSize = createControllerMaterialSizeFromCenter(leftCenter, { size: ctrlSize, angle: 0 });
+    const topLeftSize = createControllerMaterialSizeFromCenter(topLeftCenter, { size: ctrlSize, angle: 0 });
+    const topRightSize = createControllerMaterialSizeFromCenter(topRightCenter, { size: ctrlSize, angle: 0 });
+    const bottomLeftSize = createControllerMaterialSizeFromCenter(bottomLeftCenter, { size: ctrlSize, angle: 0 });
+    const bottomRightSize = createControllerMaterialSizeFromCenter(bottomRightCenter, { size: ctrlSize, angle: 0 });
+    const topLeftVertexes = calcMaterialVertexes(topLeftSize);
+    const topRightVertexes = calcMaterialVertexes(topRightSize);
+    const bottomLeftVertexes = calcMaterialVertexes(bottomLeftSize);
+    const bottomRightVertexes = calcMaterialVertexes(bottomRightSize);
     const topVertexes = [
         topLeftVertexes[1],
         topRightVertexes[0],
         topRightVertexes[3],
-        topLeftVertexes[2]
+        topLeftVertexes[2],
     ];
     const rightVertexes = [
         topRightVertexes[3],
         topRightVertexes[2],
         bottomRightVertexes[1],
-        bottomRightVertexes[0]
+        bottomRightVertexes[0],
     ];
     const bottomVertexes = [
         bottomLeftVertexes[1],
         bottomRightVertexes[0],
         bottomRightVertexes[3],
-        bottomLeftVertexes[2]
+        bottomLeftVertexes[2],
     ];
     const leftVertexes = [
         topLeftVertexes[3],
         topLeftVertexes[2],
         bottomLeftVertexes[1],
-        bottomLeftVertexes[0]
+        bottomLeftVertexes[0],
     ];
-    const topMiddleVertexes = calcElementVertexes(topMiddleSize);
-    const rightMiddleVertexes = calcElementVertexes(rightMiddleSize);
-    const bottomMiddleVertexes = calcElementVertexes(bottomMiddleSize);
-    const leftMiddleVertexes = calcElementVertexes(leftMiddleSize);
+    const topMiddleVertexes = calcMaterialVertexes(topMiddleSize);
+    const rightMiddleVertexes = calcMaterialVertexes(rightMiddleSize);
+    const bottomMiddleVertexes = calcMaterialVertexes(bottomMiddleSize);
+    const leftMiddleVertexes = calcMaterialVertexes(leftMiddleSize);
     const sizeController = {
         left: {
             type: 'left',
             vertexes: leftVertexes,
             center: leftCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         right: {
             type: 'right',
             vertexes: rightVertexes,
             center: rightCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         top: {
             type: 'top',
             vertexes: topVertexes,
             center: topCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         bottom: {
             type: 'bottom',
             vertexes: bottomVertexes,
             center: bottomCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         topLeft: {
             type: 'top-left',
             vertexes: topLeftVertexes,
             center: topLeftCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         topRight: {
             type: 'top-right',
             vertexes: topRightVertexes,
             center: topRightCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         bottomLeft: {
             type: 'bottom-left',
             vertexes: bottomLeftVertexes,
             center: bottomLeftCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         bottomRight: {
             type: 'bottom-right',
             vertexes: bottomRightVertexes,
             center: bottomRightCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         leftMiddle: {
             type: 'left-middle',
             vertexes: leftMiddleVertexes,
             center: leftCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         rightMiddle: {
             type: 'right-middle',
             vertexes: rightMiddleVertexes,
             center: rightCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         topMiddle: {
             type: 'top-middle',
             vertexes: topMiddleVertexes,
             center: topCenter,
-            size: ctrlSize
+            size: ctrlSize,
         },
         bottomMiddle: {
             type: 'bottom-middle',
             vertexes: bottomMiddleVertexes,
             center: bottomCenter,
-            size: ctrlSize
-        }
+            size: ctrlSize,
+        },
     };
     return sizeController;
 }

package/dist/esm/view/data.d.ts

@@ -1,6 +1,6 @@
-import type { Data, Element, LoadItemMap } from '@idraw/types';
+import type { Data, StrictMaterial, LoadItemMap } from '@idraw/types';
 export declare function deepClone<T = any>(target: T): T;
-export declare function deepCloneElement<T extends Element = Element>(element: T): T;
+export declare function deepCloneMaterial<T extends StrictMaterial = StrictMaterial>(material: T): T;
 export declare function deepCloneData(data: Data): Data;
 export declare function sortDataAsserts(data: Data, opts?: {
     clone?: boolean;

package/dist/esm/view/data.js

@@ -38,23 +38,23 @@ export function deepClone(target) {
     }
     return _clone(target);
 }
-export function deepCloneElement(element) {
-    const elem = deepClone(element);
+export function deepCloneMaterial(material) {
+    const mtrl = deepClone(material);
     const _resetUUID = (e) => {
-        e.uuid = createUUID();
-        if (e.type === 'group' && e.detail.children) {
-            e.detail.children.forEach((child) => {
+        e.id = createUUID();
+        if (e.type === 'group' && e.children) {
+            e.children.forEach((child) => {
                 _resetUUID(child);
             });
         }
     };
-    _resetUUID(elem);
-    return elem;
+    _resetUUID(mtrl);
+    return mtrl;
 }
 export function deepCloneData(data) {
-    const { elements } = data, restData = __rest(data, ["elements"]);
+    const { materials } = data, restData = __rest(data, ["materials"]);
     return Object.assign(Object.assign({}, deepClone(restData)), {
-        elements: elements.map((elem) => deepCloneElement(elem))
+        materials: materials.map((mtrl) => deepCloneMaterial(mtrl)),
     });
 }
 function is(target) {
@@ -69,54 +69,54 @@ export function sortDataAsserts(data, opts) {
     if ((opts === null || opts === void 0 ? void 0 : opts.clone) === true) {
         sortedData = deepClone(data);
     }
-    const _scanElements = (elems) => {
-        elems.forEach((elem) => {
-            if (elem.type === 'image' && elem.detail.src) {
-                const src = elem.detail.src;
-                const assetUUID = createAssetId(src, elem.uuid);
+    const _scanMaterials = (mtrls) => {
+        mtrls.forEach((mtrl) => {
+            if (mtrl.type === 'image' && mtrl.href) {
+                const href = mtrl.href;
+                const assetUUID = createAssetId(href, mtrl.id);
                 if (!assets[assetUUID]) {
                     assets[assetUUID] = {
                         type: 'image',
-                        value: src
+                        value: href,
                     };
                 }
-                elem.detail.src = assetUUID;
+                mtrl.href = assetUUID;
             }
-            else if (elem.type === 'svg') {
-                const svg = elem.detail.svg;
-                const assetUUID = createAssetId(svg, elem.uuid);
+            else if (mtrl.type === 'svgCode') {
+                const svg = mtrl.code;
+                const assetUUID = createAssetId(svg, mtrl.id);
                 if (!assets[assetUUID]) {
                     assets[assetUUID] = {
-                        type: 'svg',
-                        value: svg
+                        type: 'svgCode',
+                        value: svg,
                     };
                 }
-                elem.detail.svg = assetUUID;
+                mtrl.code = assetUUID;
             }
-            else if (elem.type === 'html') {
-                const html = elem.detail.html;
-                const assetUUID = createAssetId(html, elem.uuid);
+            else if (mtrl.type === 'foreignObject') {
+                const html = mtrl.content;
+                const assetUUID = createAssetId(html, mtrl.id);
                 if (!assets[assetUUID]) {
                     assets[assetUUID] = {
-                        type: 'html',
-                        value: html
+                        type: 'foreignObject',
+                        value: html,
                     };
                 }
-                elem.detail.html = assetUUID;
+                mtrl.content = assetUUID;
             }
-            else if (elem.type === 'group' && Array.isArray(elem.detail.children)) {
-                const groupAssets = elem.detail.assets || {};
+            else if (mtrl.type === 'group' && Array.isArray(mtrl.children)) {
+                const groupAssets = mtrl.assets || {};
                 Object.keys(groupAssets).forEach((assetId) => {
                     if (!assets[assetId]) {
                         assets[assetId] = groupAssets[assetId];
                     }
                 });
-                delete elem.detail.assets;
-                _scanElements(elem.detail.children);
+                delete mtrl.assets;
+                _scanMaterials(mtrl.children);
             }
         });
     };
-    _scanElements(sortedData.elements);
+    _scanMaterials(sortedData.materials);
     sortedData.assets = assets;
     return sortedData;
 }
@@ -124,79 +124,79 @@ export function filterCompactData(data, opts) {
     const assets = data.assets || {};
     const sortedData = deepClone(data);
     const loadItemMap = (opts === null || opts === void 0 ? void 0 : opts.loadItemMap) || {};
-    const _scanElements = (elems) => {
-        elems.forEach((elem) => {
+    const _scanMaterials = (mtrls) => {
+        mtrls.forEach((mtrl) => {
             var _a, _b, _c;
-            if (elem.type === 'image' && elem.detail.src) {
-                const src = elem.detail.src;
-                if (isAssetId(src) && !assets[src] && loadItemMap[src] && typeof ((_a = loadItemMap[src]) === null || _a === void 0 ? void 0 : _a.source) === 'string') {
-                    assets[src] = {
+            if (mtrl.type === 'image' && mtrl.href) {
+                const href = mtrl.href;
+                if (isAssetId(href) && !assets[href] && loadItemMap[href] && typeof ((_a = loadItemMap[href]) === null || _a === void 0 ? void 0 : _a.source) === 'string') {
+                    assets[href] = {
                         type: 'image',
-                        value: loadItemMap[src].source
+                        value: loadItemMap[href].source,
                     };
                 }
-                else if (!assets[src]) {
-                    const assetUUID = createAssetId(src, elem.uuid);
+                else if (!assets[href]) {
+                    const assetUUID = createAssetId(href, mtrl.id);
                     if (!assets[assetUUID]) {
                         assets[assetUUID] = {
                             type: 'image',
-                            value: src
+                            value: href,
                         };
                     }
-                    elem.detail.src = assetUUID;
+                    mtrl.href = assetUUID;
                 }
             }
-            else if (elem.type === 'svg') {
-                const svg = elem.detail.svg;
+            else if (mtrl.type === 'svgCode') {
+                const svg = mtrl.code;
                 if (isAssetId(svg) && !assets[svg] && loadItemMap[svg] && typeof ((_b = loadItemMap[svg]) === null || _b === void 0 ? void 0 : _b.source) === 'string') {
                     assets[svg] = {
-                        type: 'svg',
-                        value: loadItemMap[svg].source
+                        type: 'svgCode',
+                        value: loadItemMap[svg].source,
                     };
                 }
                 else if (!assets[svg]) {
-                    const assetUUID = createAssetId(svg, elem.uuid);
+                    const assetUUID = createAssetId(svg, mtrl.id);
                     if (!assets[assetUUID]) {
                         assets[assetUUID] = {
-                            type: 'svg',
-                            value: svg
+                            type: 'svgCode',
+                            value: svg,
                         };
                     }
-                    elem.detail.svg = assetUUID;
+                    mtrl.code = assetUUID;
                 }
             }
-            else if (elem.type === 'html') {
-                const html = elem.detail.html;
+            else if (mtrl.type === 'foreignObject') {
+                const html = mtrl.content;
                 if (isAssetId(html) && !assets[html] && loadItemMap[html] && typeof ((_c = loadItemMap[html]) === null || _c === void 0 ? void 0 : _c.source) === 'string') {
                     assets[html] = {
-                        type: 'html',
-                        value: loadItemMap[html].source
+                        type: 'foreignObject',
+                        value: loadItemMap[html].source,
                     };
                 }
                 else if (!assets[html]) {
-                    const assetUUID = createAssetId(html, elem.uuid);
+                    const assetUUID = createAssetId(html, mtrl.id);
                     if (!assets[assetUUID]) {
                         assets[assetUUID] = {
-                            type: 'html',
-                            value: html
+                            type: 'foreignObject',
+                            value: html,
                         };
                     }
-                    elem.detail.html = assetUUID;
+                    mtrl.content = assetUUID;
                 }
             }
-            else if (elem.type === 'group' && Array.isArray(elem.detail.children)) {
-                const groupAssets = elem.detail.assets || {};
+            else if (mtrl.type === 'group' && Array.isArray(mtrl.children)) {
+                const groupAssets = mtrl.assets || {};
                 Object.keys(groupAssets).forEach((assetId) => {
                     if (!assets[assetId]) {
                         assets[assetId] = groupAssets[assetId];
                     }
                 });
-                delete elem.detail.assets;
-                _scanElements(elem.detail.children);
+                delete mtrl.assets;
+                _scanMaterials(mtrl.children);
             }
         });
     };
-    _scanElements(sortedData.elements);
+    _scanMaterials(sortedData.materials);
     sortedData.assets = assets;
     return sortedData;
 }