@idraw/util 0.4.2 → 1.0.0-alpha.1

package/dist/esm/view/{handle-element.js → handle-material.js}

@@ -1,12 +1,12 @@
 import { createUUID } from '../tool/uuid';
-import { defaultText, getDefaultElementRectDetail, getDefaultElementCircleDetail, getDefaultElementTextDetail, getDefaultElementSVGDetail, getDefaultElementImageDetail, getDefaultElementGroupDetail } from './config';
-import { toFlattenElement } from './modify-record';
+import { defaultText, getDefaultMaterialRectAttributes, getDefaultMaterialCircleAttributes, getDefaultMaterialTextAttributes, getDefaultMaterialSVGAttributes, getDefaultMaterialImageAttributes, getDefaultMaterialGroupAttributes, } from './static';
+import { toFlattenMaterial } from './modify-record';
 import { set, del } from '../tool/get-set-del';
-import { findElementFromListByPosition, getElementPositionFromList } from './element';
-import { resizeEffectGroupElement } from './resize-element';
+import { findMaterialFromListByPosition, getMaterialPositionFromList } from './material';
+import { resizeEffectGroupMaterial } from './resize-material';
 const defaultViewWidth = 200;
 const defaultViewHeight = 200;
-function createElementSize(type, opts) {
+function createMaterialSize(type, opts) {
     let x = 0;
     let y = 0;
     let w = defaultViewWidth;
@@ -29,7 +29,7 @@ function createElementSize(type, opts) {
         else {
             h = defaultViewHeight / scale;
         }
-        if (['circle', 'svg', 'image'].includes(type)) {
+        if (['circle', 'svgCode', 'image'].includes(type)) {
             w = h = Math.max(w, h);
         }
         else if (type === 'text') {
@@ -39,43 +39,47 @@ function createElementSize(type, opts) {
         x = (0 - offsetLeft + width / 2 - (w * scale) / 2) / scale;
         y = (0 - offsetTop + height / 2 - (h * scale) / 2) / scale;
     }
-    const elemSize = {
+    const mtrlSize = {
         x,
         y,
-        w,
-        h
+        width: w,
+        height: h,
     };
-    return elemSize;
+    return mtrlSize;
 }
-export function createElement(type, baseElem, opts) {
-    const elementSize = createElementSize(type, opts);
-    let detail = {};
+export function createMaterial(type, baseMtrl, opts) {
+    const materialSize = createMaterialSize(type, opts);
+    let attributes = {};
     if (type === 'rect') {
-        detail = getDefaultElementRectDetail();
+        attributes = getDefaultMaterialRectAttributes();
     }
     else if (type === 'circle') {
-        detail = getDefaultElementCircleDetail();
+        attributes = getDefaultMaterialCircleAttributes();
     }
     else if (type === 'text') {
-        detail = getDefaultElementTextDetail(elementSize);
+        attributes = getDefaultMaterialTextAttributes(materialSize);
     }
-    else if (type === 'svg') {
-        detail = getDefaultElementSVGDetail();
+    else if (type === 'svgCode') {
+        attributes = getDefaultMaterialSVGAttributes();
     }
     else if (type === 'image') {
-        detail = getDefaultElementImageDetail();
+        attributes = getDefaultMaterialImageAttributes();
     }
     else if (type === 'group') {
-        detail = getDefaultElementGroupDetail();
+        attributes = getDefaultMaterialGroupAttributes();
+        const groupBase = baseMtrl;
+        if (Array.isArray(groupBase.children) && groupBase.children.length > 0) {
+            attributes.children = [...groupBase.children];
+        }
     }
-    const elem = Object.assign(Object.assign(Object.assign({ uuid: createUUID() }, elementSize), baseElem), { type, detail: Object.assign(Object.assign({}, detail), (baseElem.detail || {})) });
-    return elem;
+    const mtrl = Object.assign(Object.assign(Object.assign({ id: createUUID(), type }, materialSize), attributes), baseMtrl);
+    return mtrl;
 }
-export function insertElementToListByPosition(element, position, list) {
+export function insertMaterialToListByPosition(material, position, list) {
     let result = false;
     if (position.length === 1) {
         const pos = position[0];
-        list.splice(pos, 0, element);
+        list.splice(pos, 0, material);
         result = true;
     }
     else if (position.length > 1) {
@@ -85,11 +89,11 @@ export function insertElementToListByPosition(element, position, list) {
             const item = tempList[pos];
             if (i === position.length - 1) {
                 const pos = position[i];
-                tempList.splice(pos, 0, element);
+                tempList.splice(pos, 0, material);
                 result = true;
             }
             else if (i < position.length - 1 && item.type === 'group') {
-                tempList = item.detail.children;
+                tempList = item.children;
             }
             else {
                 break;
@@ -98,7 +102,7 @@ export function insertElementToListByPosition(element, position, list) {
     }
     return result;
 }
-export function deleteElementInListByPosition(position, list) {
+export function deleteMaterialInListByPosition(position, list) {
     let result = false;
     if (position.length === 1) {
         const pos = position[0];
@@ -116,7 +120,7 @@ export function deleteElementInListByPosition(position, list) {
                 result = true;
             }
             else if (i < position.length - 1 && item.type === 'group') {
-                tempList = item.detail.children;
+                tempList = item.children;
             }
             else {
                 break;
@@ -125,31 +129,31 @@ export function deleteElementInListByPosition(position, list) {
     }
     return result;
 }
-export function deleteElementInList(uuid, list) {
-    const position = getElementPositionFromList(uuid, list);
-    return deleteElementInListByPosition(position, list);
+export function deleteMaterialInList(id, list) {
+    const position = getMaterialPositionFromList(id, list);
+    return deleteMaterialInListByPosition(position, list);
 }
-export function moveElementPosition(elements, opts) {
+export function moveMaterialPosition(materials, opts) {
     const from = [...opts.from];
     const to = [...opts.to];
     if (from.length === 0 || to.length === 0) {
-        return { elements, from, to };
+        return { materials, from, to };
     }
     if (from.length <= to.length) {
         for (let i = 0; i < from.length; i++) {
             if (to[i] === from[i]) {
                 if (i === from.length - 1) {
-                    return { elements, from, to };
+                    return { materials, from, to };
                 }
                 continue;
             }
         }
     }
-    const target = findElementFromListByPosition(from, elements);
+    const target = findMaterialFromListByPosition(from, materials);
     if (target) {
-        const insterResult = insertElementToListByPosition(target, to, elements);
+        const insterResult = insertMaterialToListByPosition(target, to, materials);
         if (!insterResult) {
-            return { elements, from, to };
+            return { materials, from, to };
         }
         let trimDeletePosIndex = -1;
         const trimDeletePosAction = 'down';
@@ -214,67 +218,86 @@ export function moveElementPosition(elements, opts) {
                 from[trimDeletePosIndex] = from[trimDeletePosIndex] + 1;
             }
         }
-        deleteElementInListByPosition(from, elements);
+        deleteMaterialInListByPosition(from, materials);
+    }
+    return { materials, from, to };
+}
+function clearMaterialColor(color) {
+    if (Array.isArray(color === null || color === void 0 ? void 0 : color.stops)) {
+        const emptyIndexes = [];
+        const stops = color === null || color === void 0 ? void 0 : color.stops;
+        for (let i = stops.length - 1; i >= 0; i--) {
+            const stop = stops[i];
+            if (!(stop.color && stop.offset >= 0)) {
+                emptyIndexes.push(i);
+            }
+        }
+        emptyIndexes.forEach((idx) => {
+            stops.splice(idx, 1);
+        });
     }
-    return { elements, from, to };
+    return color;
 }
-export function mergeElement(originElem, updateContent, opts) {
-    const updatedFlatten = toFlattenElement(updateContent);
-    const ignoreKeys = ['uuid', 'type'];
-    const updatedKeys = Object.keys(updatedFlatten);
-    updatedKeys.forEach((key) => {
+export function mergeMaterial(originMtrl, updateContent, opts) {
+    const updatedFlatten = toFlattenMaterial(updateContent);
+    const ignoreKeys = ['id', 'type'];
+    const updatedFlattenKeys = Object.keys(updatedFlatten);
+    updatedFlattenKeys.forEach((key) => {
         if (!ignoreKeys.includes(key)) {
             const value = updatedFlatten[key];
-            del(originElem, key);
+            del(originMtrl, key);
             if (value !== undefined) {
-                set(originElem, key, value);
+                set(originMtrl, key, value);
             }
         }
     });
-    if ((opts === null || opts === void 0 ? void 0 : opts.strict) === true) {
-        const originFlatten = toFlattenElement(originElem);
-        const originKeys = Object.keys(originFlatten);
-        originKeys.forEach((key) => {
+    if ((opts === null || opts === void 0 ? void 0 : opts.onlyUpdateContent) === true) {
+        const originFlatten = toFlattenMaterial(originMtrl);
+        const originFlattenKeys = Object.keys(originFlatten);
+        originFlattenKeys.forEach((key) => {
             if (!ignoreKeys.includes(key)) {
-                if (!updatedKeys.includes(key)) {
-                    del(originElem, key);
+                if (!updatedFlattenKeys.includes(key)) {
+                    del(originMtrl, key);
                 }
             }
         });
     }
-    return originElem;
+    if (originMtrl.fill) {
+        originMtrl.fill = clearMaterialColor(originMtrl.fill);
+    }
+    return originMtrl;
 }
-export function updateElementInList(uuid, updateContent, elements) {
-    var _a, _b, _c;
-    let targetElement = null;
-    for (let i = 0; i < elements.length; i++) {
-        const elem = elements[i];
-        if (elem.uuid === uuid) {
-            if (elem.type === 'group' && ((_a = elem.operations) === null || _a === void 0 ? void 0 : _a.resizeEffect)) {
-                resizeEffectGroupElement(elem, Object.assign({}, updateContent), {
-                    resizeEffect: (_b = elem.operations) === null || _b === void 0 ? void 0 : _b.resizeEffect
+export function updateMaterialInList(id, updateContent, materials) {
+    var _a, _b;
+    let targetMaterial = null;
+    for (let i = 0; i < materials.length; i++) {
+        const mtrl = materials[i];
+        if (mtrl.id === id) {
+            if (mtrl.type === 'group' && ((_a = mtrl.operations) === null || _a === void 0 ? void 0 : _a.resizeEffect)) {
+                resizeEffectGroupMaterial(mtrl, Object.assign({}, updateContent), {
+                    resizeEffect: (_b = mtrl.operations) === null || _b === void 0 ? void 0 : _b.resizeEffect,
                 });
             }
-            mergeElement(elem, updateContent);
-            targetElement = elem;
+            mergeMaterial(mtrl, updateContent);
+            targetMaterial = mtrl;
             break;
         }
-        else if (elem.type === 'group') {
-            targetElement = updateElementInList(uuid, updateContent, ((_c = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _c === void 0 ? void 0 : _c.children) || []);
+        else if (mtrl.type === 'group') {
+            targetMaterial = updateMaterialInList(id, updateContent, (mtrl === null || mtrl === void 0 ? void 0 : mtrl.children) || []);
         }
     }
-    return targetElement;
+    return targetMaterial;
 }
-export function updateElementInListByPosition(position, updateContent, elements, opts) {
+export function updateMaterialInListByPosition(position, updateContent, materials, opts) {
     var _a, _b;
-    const elem = findElementFromListByPosition(position, elements);
-    if (elem) {
-        if (elem.type === 'group' && ((_a = elem.operations) === null || _a === void 0 ? void 0 : _a.resizeEffect)) {
-            resizeEffectGroupElement(elem, Object.assign({}, updateContent), {
-                resizeEffect: (_b = elem.operations) === null || _b === void 0 ? void 0 : _b.resizeEffect
+    const mtrl = findMaterialFromListByPosition(position, materials);
+    if (mtrl) {
+        if (mtrl.type === 'group' && ((_a = mtrl.operations) === null || _a === void 0 ? void 0 : _a.resizeEffect)) {
+            resizeEffectGroupMaterial(mtrl, Object.assign({}, updateContent), {
+                resizeEffect: (_b = mtrl.operations) === null || _b === void 0 ? void 0 : _b.resizeEffect,
             });
         }
-        mergeElement(elem, updateContent, opts);
+        mergeMaterial(mtrl, updateContent, opts);
     }
-    return elem;
+    return mtrl;
 }

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

@@ -2,11 +2,11 @@ declare function positiveNum(value: any): boolean;
 declare function number(value: any): boolean;
 declare function x(value: any): boolean;
 declare function y(value: any): boolean;
-declare function w(value: any): boolean;
-declare function h(value: any): boolean;
+declare function width(value: any): boolean;
+declare function height(value: any): boolean;
 declare function angle(value: any): boolean;
-declare function borderWidth(value: any): boolean;
-declare function borderRadius(value: any): boolean;
+declare function strokeWidth(value: any): boolean;
+declare function cornerRadius(value: any): boolean;
 declare function color(value: any): boolean;
 declare function imageURL(value: any): boolean;
 declare function imageBase64(value: any): boolean;
@@ -16,30 +16,29 @@ declare function html(value: any): boolean;
 declare function text(value: any): value is string;
 declare function fontSize(value: any): boolean;
 declare function lineHeight(value: any): boolean;
-declare function strokeWidth(value: any): boolean;
 declare function textAlign(value: any): boolean;
 declare function fontFamily(value: any): boolean;
 declare function fontWeight(value: any): boolean;
 declare function numberStr(value: any): boolean;
 declare function type(value: any): boolean;
-declare function element(elem: any): boolean;
+declare function material(mtrl: any): boolean;
 declare function layout(value: any): boolean;
 declare function data(d: any): boolean;
 export declare const is: {
     positiveNum: typeof positiveNum;
     data: typeof data;
-    element: typeof element;
+    material: typeof material;
     layout: typeof layout;
     type: typeof type;
     x: typeof x;
     y: typeof y;
-    w: typeof w;
-    h: typeof h;
+    width: typeof width;
+    height: typeof height;
     angle: typeof angle;
     number: typeof number;
     numberStr: typeof numberStr;
-    borderWidth: typeof borderWidth;
-    borderRadius: typeof borderRadius;
+    strokeWidth: typeof strokeWidth;
+    cornerRadius: typeof cornerRadius;
     color: typeof color;
     imageSrc: typeof imageSrc;
     imageURL: typeof imageURL;
@@ -52,6 +51,5 @@ export declare const is: {
     textAlign: typeof textAlign;
     fontFamily: typeof fontFamily;
     fontWeight: typeof fontWeight;
-    strokeWidth: typeof strokeWidth;
 };
 export {};

package/dist/esm/view/is.js

@@ -11,16 +11,16 @@ function x(value) {
 function y(value) {
     return number(value);
 }
-function w(value) {
+function width(value) {
     return positiveNum(value);
 }
-function h(value) {
+function height(value) {
     return positiveNum(value);
 }
 function angle(value) {
     return typeof value === 'number' && value >= -360 && value <= 360;
 }
-function borderWidth(value) {
+function strokeWidth(value) {
     return (positiveNum(value) ||
         (Array.isArray(value) &&
             positiveNum(value[0]) &&
@@ -28,7 +28,7 @@ function borderWidth(value) {
             positiveNum(value[2]) &&
             positiveNum(value[3])));
 }
-function borderRadius(value) {
+function cornerRadius(value) {
     return (positiveNum(value) ||
         (Array.isArray(value) &&
             positiveNum(value[0]) &&
@@ -74,9 +74,6 @@ function fontSize(value) {
 function lineHeight(value) {
     return number(value) && value > 0;
 }
-function strokeWidth(value) {
-    return number(value) && value > 0;
-}
 function textAlign(value) {
     return ['center', 'left', 'right'].includes(value);
 }
@@ -90,22 +87,22 @@ function numberStr(value) {
     return /^(-?\d+(?:\.\d+)?)$/.test(`${value}`);
 }
 function type(value) {
-    return ['rect', 'circle', 'text', 'image', 'svg', 'html', 'group'].includes(value);
+    return ['rect', 'circle', 'text', 'image', 'svgCode', 'foreignObject', 'group'].includes(value);
 }
-function element(elem) {
-    if (!elem) {
+function material(mtrl) {
+    if (!mtrl) {
         return false;
     }
-    return type(elem === null || elem === void 0 ? void 0 : elem.type) && x(elem === null || elem === void 0 ? void 0 : elem.x) && y(elem === null || elem === void 0 ? void 0 : elem.y) && w(elem === null || elem === void 0 ? void 0 : elem.w) && h(elem === null || elem === void 0 ? void 0 : elem.h);
+    return type(mtrl === null || mtrl === void 0 ? void 0 : mtrl.type) && x(mtrl === null || mtrl === void 0 ? void 0 : mtrl.x) && y(mtrl === null || mtrl === void 0 ? void 0 : mtrl.y) && width(mtrl === null || mtrl === void 0 ? void 0 : mtrl.w) && height(mtrl === null || mtrl === void 0 ? void 0 : mtrl.h);
 }
 function layout(value) {
     if (!value) {
         return false;
     }
-    return x(value === null || value === void 0 ? void 0 : value.x) && y(value === null || value === void 0 ? void 0 : value.y) && w(value === null || value === void 0 ? void 0 : value.w) && h(value === null || value === void 0 ? void 0 : value.h);
+    return x(value === null || value === void 0 ? void 0 : value.x) && y(value === null || value === void 0 ? void 0 : value.y) && width(value === null || value === void 0 ? void 0 : value.w) && height(value === null || value === void 0 ? void 0 : value.h);
 }
 function data(d) {
-    if (Array(d === null || d === void 0 ? void 0 : d.elements) && (d === null || d === void 0 ? void 0 : d.elements.length) >= 0) {
+    if (Array(d === null || d === void 0 ? void 0 : d.materials) && (d === null || d === void 0 ? void 0 : d.materials.length) >= 0) {
         return true;
     }
     return false;
@@ -113,18 +110,18 @@ function data(d) {
 export const is = {
     positiveNum,
     data,
-    element,
+    material,
     layout,
     type,
     x,
     y,
-    w,
-    h,
+    width,
+    height,
     angle,
     number,
     numberStr,
-    borderWidth,
-    borderRadius,
+    strokeWidth,
+    cornerRadius,
     color,
     imageSrc,
     imageURL,
@@ -137,5 +134,4 @@ export const is = {
     textAlign,
     fontFamily,
     fontWeight,
-    strokeWidth
 };

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

@@ -1,6 +1,6 @@
 export declare function loadImage(src: string): Promise<HTMLImageElement>;
-export declare function loadSVG(svg: string): Promise<HTMLImageElement>;
-export declare function loadHTML(html: string, opts: {
+export declare function loadSVGCode(code: string): Promise<HTMLImageElement>;
+export declare function loadForeignObject(content: string, opts: {
     width: number;
     height: number;
 }): Promise<HTMLImageElement>;

package/dist/esm/view/load.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { parseHTMLToDataURL, parseSVGToDataURL } from './parser';
+import { parseXMLToDataURL, parseSVGCodeToDataURL } from './parser';
 const { Image } = window;
 export function loadImage(src) {
     return new Promise((resolve, reject) => {
@@ -21,20 +21,20 @@ export function loadImage(src) {
         img.src = src;
     });
 }
-export function loadSVG(svg) {
+export function loadSVGCode(code) {
     return __awaiter(this, void 0, void 0, function* () {
-        const dataURL = yield parseSVGToDataURL(svg);
+        const dataURL = yield parseSVGCodeToDataURL(code);
         const image = yield loadImage(dataURL);
         return image;
     });
 }
 function filterAmpersand(str) {
-    return str.replace(/\&/gi, '&');
+    return str.replace(/&/gi, '&');
 }
-export function loadHTML(html, opts) {
+export function loadForeignObject(content, opts) {
     return __awaiter(this, void 0, void 0, function* () {
-        html = filterAmpersand(html);
-        const dataURL = yield parseHTMLToDataURL(html, opts);
+        content = filterAmpersand(content);
+        const dataURL = yield parseXMLToDataURL(content, opts);
         const image = yield loadImage(dataURL);
         return image;
     });

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

@@ -0,0 +1,40 @@
+import type { Data, Material, StrictMaterial, MaterialType, MaterialSize, ViewContextSize, ViewSizeInfo, MaterialAssets, MaterialAssetsItem, LoadMaterialType, MaterialPosition } from '@idraw/types';
+export declare function getSelectedMaterialUUIDs(data: Data, indexes: Array<number | string>): string[];
+export declare function validateMaterials(materials: Array<StrictMaterial<MaterialType>>): boolean;
+export declare function calcMaterialListSize(list: StrictMaterial[]): MaterialSize;
+export declare function calcMaterialsContextSize(materials: Array<StrictMaterial<MaterialType>>, opts?: {
+    viewWidth: number;
+    viewHeight: number;
+    extend?: boolean;
+}): ViewContextSize;
+export declare function calcMaterialsViewInfo(materials: Array<StrictMaterial<MaterialType>>, prevViewSize: ViewSizeInfo, options?: {
+    extend: boolean;
+}): {
+    contextSize: ViewContextSize;
+};
+export declare function getMaterialsAssetIds(materials: StrictMaterial[]): string[];
+export declare function findMaterialFromList(id: string, list: StrictMaterial<MaterialType>[]): StrictMaterial<MaterialType> | null;
+export declare function findMaterialsFromList(ids: string[], list: StrictMaterial<MaterialType>[]): StrictMaterial<MaterialType>[];
+export declare function getMaterialAndGroupQueueFromList(id: string, materials: StrictMaterial<MaterialType>[]): {
+    groupQueue: StrictMaterial<'group'>[];
+    material: Material | null;
+    position: MaterialPosition;
+};
+export declare function getGroupQueueFromList(id: string, materials: StrictMaterial<MaterialType>[]): StrictMaterial<'group'>[];
+export declare function getGroupQueueByMaterialPosition(materials: StrictMaterial<MaterialType>[], position: MaterialPosition): StrictMaterial<'group'>[] | null;
+export declare function getMaterialSize(mtrl: StrictMaterial): MaterialSize;
+export declare function mergeMaterialAsset<T extends StrictMaterial<LoadMaterialType>>(material: T, assets: MaterialAssets): T;
+export declare function filterMaterialAsset<T extends StrictMaterial<LoadMaterialType>>(material: T): {
+    material: T;
+    assetId: string | null;
+    assetItem: MaterialAssetsItem | null;
+};
+export declare function isResourceMaterial(mtrl: StrictMaterial): boolean;
+export declare function findMaterialsFromListByPositions(positions: MaterialPosition[], list: StrictMaterial[]): StrictMaterial[];
+export declare function findMaterialFromListByPosition(position: MaterialPosition, list: StrictMaterial[]): StrictMaterial | null;
+export declare function findMaterialQueueFromListByPosition(position: MaterialPosition, list: StrictMaterial[]): StrictMaterial[];
+export declare function getMaterialPositionFromList(id: string, materials: StrictMaterial<MaterialType>[]): MaterialPosition;
+export declare function getMaterialPositionMapFromList(ids: string[], materials: StrictMaterial<MaterialType>[]): {
+    [id: string]: MaterialPosition;
+};
+export declare function isSameMaterialSize(mtrl1: MaterialSize, mtrl2: MaterialSize): boolean;