@idraw/util 0.4.2 → 1.0.0-alpha.1

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

@@ -0,0 +1,23 @@
+import { HTMLCSSProps, HTMLProps } from '@idraw/types';
+type DOMElement = HTMLElement | SVGElement | Element;
+export declare function addClassName<T extends DOMElement = DOMElement>(elem: T, classNameList: string[]): void;
+export declare function removeClassName<T extends HTMLElement = HTMLElement>(elem: T, classNameList: string[]): void;
+export declare function setHTMLCSSProps(elem: HTMLElement, cssProps: HTMLCSSProps): HTMLElement;
+export declare function assembleHTMLElement<T extends DOMElement = HTMLElement>(root: T, props?: HTMLProps, children?: string | HTMLElement | SVGElement | Element | Array<HTMLElement | SVGElement | Element | string>): T;
+export declare function createHTMLElement<K extends keyof HTMLElementTagNameMap = 'div'>(tagName: K, props?: HTMLProps, children?: Array<Element | HTMLElement>): HTMLElementTagNameMap[K];
+export declare function sanitizeHTMLStr(htmlString: string): string;
+export declare function parseHTMLStr(htmlString: string): HTMLElement;
+export declare function getHTMLElementRectInPage(elem: HTMLElement): {
+    pageX: number;
+    pageY: number;
+    width: number;
+    height: number;
+};
+export declare const bubbleHTMLElement: ($active: HTMLElement, $root: HTMLElement, targetProps: {
+    [key: string]: string | true;
+}) => HTMLElement | null;
+export declare function isPointInMiddlewareElement(e: Event, opts: {
+    $root: HTMLElement | null;
+    rootClassName: string;
+}): boolean;
+export {};

package/dist/esm/view/dom.js

@@ -0,0 +1,190 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { istype } from '../tool/istype';
+const aliasKeys = {
+    className: 'class',
+};
+const defaultPixelKeys = [
+    'width',
+    'height',
+    'left',
+    'right',
+    'top',
+    'bottom',
+    'margin',
+    'marginLeft',
+    'marginRight',
+    'marginTop',
+    'marginBottom',
+    'padding',
+    'paddingLeft',
+    'paddingRight',
+    'paddingTop',
+    'paddingBottom',
+];
+const parseCSSValue = (key, value) => {
+    const str = typeof value === 'number' && defaultPixelKeys.includes(key) ? `${value}px` : value;
+    return str;
+};
+export function addClassName(elem, classNameList) {
+    classNameList.forEach((className) => {
+        if (!className) {
+            return;
+        }
+        const name = className.trim();
+        const strs = name.split(' ');
+        strs.forEach((str) => {
+            if (str && !elem.classList.contains(str)) {
+                elem.classList.add(str);
+            }
+        });
+    });
+}
+export function removeClassName(elem, classNameList) {
+    classNameList.forEach((className) => {
+        if (!className) {
+            return;
+        }
+        if (elem.classList.contains(className)) {
+            elem.classList.remove(className);
+        }
+    });
+}
+export function setHTMLCSSProps(elem, cssProps) {
+    Object.keys(cssProps).forEach((key) => {
+        const value = cssProps[key];
+        elem.style[key] = parseCSSValue(key, value);
+    });
+    return elem;
+}
+function appendPropsToHTMLElement(elem, props) {
+    Object.entries(props).forEach(([attrKey, attrValue]) => {
+        const key = aliasKeys[attrKey] ? aliasKeys[attrKey] : attrKey;
+        const attributeName = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+        const value = attrValue;
+        if (key === 'style') {
+            if (istype.json(attrValue)) {
+                setHTMLCSSProps(elem, attrValue);
+            }
+            else if (typeof attrValue === 'string') {
+                elem.setAttribute(attributeName, attrValue);
+            }
+        }
+        else if (key === 'class' && typeof attrValue === 'string') {
+            addClassName(elem, attrValue.split(' '));
+        }
+        else {
+            let v = value;
+            if (v === undefined || v === null) {
+                v = '';
+            }
+            elem.setAttribute(attributeName, String(v));
+        }
+    });
+    return elem;
+}
+export function assembleHTMLElement(root, props, children) {
+    const _a = props || {}, { children: propsChildren } = _a, restProps = __rest(_a, ["children"]);
+    const widgetChildren = children || propsChildren;
+    appendPropsToHTMLElement(root, restProps || {});
+    if (Array.isArray(widgetChildren)) {
+        widgetChildren === null || widgetChildren === void 0 ? void 0 : widgetChildren.forEach((child) => {
+            if (child instanceof Element || typeof child === 'string') {
+                root.append(child);
+            }
+        });
+    }
+    else if (widgetChildren instanceof Element || typeof widgetChildren === 'string') {
+        root.append(widgetChildren);
+    }
+    return root;
+}
+export function createHTMLElement(tagName, props, children) {
+    const elem = document.createElement(tagName);
+    return assembleHTMLElement(elem, props, children);
+}
+export function sanitizeHTMLStr(htmlString) {
+    const dangerousTagsRegex = /<(script|iframe|object|embed)\b[^<]*(?:(?!<\/\1>)<[^<]*)*<\/\1>/gi;
+    return htmlString.replace(dangerousTagsRegex, '');
+}
+export function parseHTMLStr(htmlString) {
+    const sanitizedString = sanitizeHTMLStr(htmlString);
+    const template = document.createElement('template');
+    template.innerHTML = sanitizedString.trim();
+    const element = template.content.firstElementChild;
+    return element;
+}
+export function getHTMLElementRectInPage(elem) {
+    const rect = elem.getBoundingClientRect();
+    const scrollX = window.pageXOffset || document.documentElement.scrollLeft;
+    const scrollY = window.pageYOffset || document.documentElement.scrollTop;
+    return {
+        pageX: rect.left + scrollX,
+        pageY: rect.top + scrollY,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+export const bubbleHTMLElement = ($active, $root, targetProps) => {
+    let $current = $active;
+    const propsKeys = Object.keys(targetProps);
+    const isTarget = () => {
+        if (!$current) {
+            return false;
+        }
+        for (let i = 0; i < propsKeys.length; i++) {
+            const key = propsKeys[i];
+            const value = targetProps[key];
+            if (typeof key === 'string' && key && typeof value === 'string' && value) {
+                if (key === 'className' && ($current === null || $current === void 0 ? void 0 : $current.classList.contains(value))) {
+                    continue;
+                }
+                if ($current.getAttribute(key) === value) {
+                    continue;
+                }
+                return false;
+            }
+            else if (typeof key === 'string' && key && typeof value === 'boolean') {
+                if ($current.hasAttribute(key) && value === true) {
+                    continue;
+                }
+                return false;
+            }
+        }
+        return true;
+    };
+    while ($current) {
+        if (isTarget()) {
+            return $current;
+        }
+        if ($root === $current) {
+            return null;
+        }
+        if (!$root.contains($current)) {
+            return null;
+        }
+        $current = $current.parentElement;
+    }
+    return null;
+};
+export function isPointInMiddlewareElement(e, opts) {
+    const { $root, rootClassName } = opts;
+    if (!$root) {
+        return false;
+    }
+    const $target = e.target;
+    const $elem = bubbleHTMLElement($target, $root, { className: rootClassName });
+    if ($elem) {
+        return true;
+    }
+    return false;
+}

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

@@ -1,2 +1,2 @@
-import type { Elements } from '@idraw/types';
-export declare function flatElementList(list: Elements): Elements;
+import type { StrictMaterial } from '@idraw/types';
+export declare function flatMaterialList(list: StrictMaterial[]): StrictMaterial[];

package/dist/esm/view/flat.js

@@ -9,12 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { calcElementVertexesInGroup } from './vertex';
-import { limitAngle, parseAngleToRadian, calcElementCenterFromVertexes, rotatePoint } from './rotate';
-function flatElementSize(elemSize, opts) {
+import { calcMaterialVertexesInGroup } from './vertex';
+import { limitAngle, parseAngleToRadian, calcMaterialCenterFromVertexes, rotatePoint } from './rotate';
+function flatMaterialSize(mtrlSize, opts) {
     const { groupQueue } = opts;
-    let { x, y } = elemSize;
-    const { w, h, angle = 0 } = elemSize;
+    let { x, y } = mtrlSize;
+    const { width, height, angle = 0 } = mtrlSize;
     let totalAngle = 0;
     groupQueue.forEach((group) => {
         x += group.x;
@@ -26,108 +26,108 @@ function flatElementSize(elemSize, opts) {
         return {
             x,
             y,
-            w,
-            h,
-            angle
+            width,
+            height,
+            angle,
         };
     }
-    totalAngle += elemSize.angle || 0;
+    totalAngle += mtrlSize.angle || 0;
     totalAngle = limitAngle(totalAngle);
-    const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue });
-    const center = calcElementCenterFromVertexes(vertexes);
+    const vertexes = calcMaterialVertexesInGroup(mtrlSize, { groupQueue });
+    const center = calcMaterialCenterFromVertexes(vertexes);
     const start = rotatePoint(center, vertexes[0], parseAngleToRadian(0 - totalAngle));
     x = start.x;
     y = start.y;
     return {
         x,
         y,
-        w,
-        h,
-        angle: totalAngle
+        width,
+        height,
+        angle: totalAngle,
     };
 }
-function isValidElement(elem) {
+function isValidMaterial(mtrl) {
     var _a;
-    if (['rect', 'circle'].includes(elem.type)) {
-        const detail = elem.detail;
-        if (!detail.background && !detail.borderWidth) {
+    if (['rect', 'circle'].includes(mtrl.type)) {
+        const attributes = mtrl;
+        if (!attributes.fill && !attributes.strokeWidth) {
             return false;
         }
-        if (detail.background === 'transparent' && !detail.borderWidth) {
+        if (attributes.fill === 'transparent' && !attributes.strokeWidth) {
             return false;
         }
     }
-    if (['group'].includes(elem.type)) {
-        const detail = elem.detail || {};
-        const { children } = detail;
-        if (!(children.length > 0) && !detail.background && !detail.borderWidth) {
+    if (['group'].includes(mtrl.type)) {
+        const attributes = mtrl;
+        const { children } = attributes;
+        if (!(children.length > 0) && !attributes.fill && !attributes.strokeWidth) {
             return false;
         }
-        if (!(children.length > 0) && detail.background === 'transparent' && !detail.borderWidth) {
+        if (!(children.length > 0) && attributes.fill === 'transparent' && !attributes.strokeWidth) {
             return false;
         }
     }
-    if (elem.type === 'text') {
-        if (!elem.detail.text) {
+    if (mtrl.type === 'text') {
+        if (!mtrl.text) {
             return false;
         }
     }
-    if (elem.type === 'image') {
-        if (!elem.detail.src) {
+    if (mtrl.type === 'image') {
+        if (!mtrl.href) {
             return false;
         }
     }
-    if (elem.type === 'html') {
-        if (!elem.detail.html) {
+    if (mtrl.type === 'foreignObject') {
+        if (!mtrl.content) {
             return false;
         }
     }
-    if (elem.type === 'svg') {
-        if (!elem.detail.svg) {
+    if (mtrl.type === 'svgCode') {
+        if (!mtrl.code) {
             return false;
         }
     }
-    if (elem.type === 'path') {
-        const detail = elem.detail;
-        if (!(((_a = detail === null || detail === void 0 ? void 0 : detail.commands) === null || _a === void 0 ? void 0 : _a.length) > 0)) {
+    if (mtrl.type === 'path') {
+        const attributes = mtrl;
+        if (!(((_a = attributes === null || attributes === void 0 ? void 0 : attributes.commands) === null || _a === void 0 ? void 0 : _a.length) > 0)) {
             return false;
         }
     }
     return true;
 }
-export function flatElementList(list) {
-    const elemeList = [];
+export function flatMaterialList(list) {
+    const mtrleList = [];
     const currentGroupQueue = [];
-    const _resetElemSize = (elem) => {
-        if (!isValidElement(elem)) {
+    const _resetMtrlSize = (mtrl) => {
+        if (!isValidMaterial(mtrl)) {
             return;
         }
-        const newSize = flatElementSize(elem, { groupQueue: currentGroupQueue });
-        const resizeElem = Object.assign(Object.assign({}, elem), newSize);
-        elemeList.push(resizeElem);
+        const newSize = flatMaterialSize(mtrl, { groupQueue: currentGroupQueue });
+        const resizeMtrl = Object.assign(Object.assign({}, mtrl), newSize);
+        mtrleList.push(resizeMtrl);
     };
-    const _walk = (elem) => {
+    const _walk = (mtrl) => {
         var _a;
-        if (((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
+        if (((_a = mtrl === null || mtrl === void 0 ? void 0 : mtrl.operations) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
             return;
         }
-        if (elem.type === 'group') {
-            const { detail } = elem;
-            const { children } = detail, restDetail = __rest(detail, ["children"]);
-            _resetElemSize(Object.assign(Object.assign({}, elem), { detail: Object.assign(Object.assign({}, restDetail), { children: [] }) }));
-            currentGroupQueue.push(elem);
+        if (mtrl.type === 'group') {
+            const attributes = mtrl;
+            const { children } = attributes, restAttributes = __rest(attributes, ["children"]);
+            _resetMtrlSize(Object.assign(Object.assign({}, mtrl), { attributes: Object.assign(Object.assign({}, restAttributes), { children: [] }) }));
+            currentGroupQueue.push(mtrl);
             children.forEach((child) => {
                 _walk(child);
             });
             currentGroupQueue.pop();
         }
         else {
-            _resetElemSize(elem);
+            _resetMtrlSize(mtrl);
         }
     };
     for (let i = 0; i < list.length; i++) {
-        const elem = list[i];
-        _walk(elem);
+        const mtrl = list[i];
+        _walk(mtrl);
     }
-    return elemeList;
+    return mtrleList;
 }

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

@@ -1,3 +1,3 @@
-import type { Elements, ElementPosition } from '@idraw/types';
-export declare function groupElementsByPosition(list: Elements, positions: ElementPosition[]): Elements;
-export declare function ungroupElementsByPosition(list: Elements, position: ElementPosition): Elements;
+import type { StrictMaterial, MaterialPosition } from '@idraw/types';
+export declare function groupMaterialsByPosition(list: StrictMaterial[], positions: MaterialPosition[]): StrictMaterial[];
+export declare function ungroupMaterialsByPosition(list: StrictMaterial[], position: MaterialPosition): StrictMaterial[];

package/dist/esm/view/group.js

@@ -1,10 +1,10 @@
-import { findElementFromListByPosition, calcElementListSize } from './element';
-import { deleteElementInListByPosition, insertElementToListByPosition } from './handle-element';
+import { findMaterialFromListByPosition, calcMaterialListSize } from './material';
+import { deleteMaterialInListByPosition, insertMaterialToListByPosition } from './handle-material';
 import { createUUID } from '../tool/uuid';
-export function groupElementsByPosition(list, positions) {
+export function groupMaterialsByPosition(list, positions) {
     if (positions.length > 1) {
         let isValidPositions = true;
-        let lastIndexs = [];
+        const lastIndexs = [];
         for (let i = 1; i < positions.length; i++) {
             const prevPosition = positions[i - 1];
             const position = positions[i];
@@ -28,7 +28,7 @@ export function groupElementsByPosition(list, positions) {
             }
         }
         if (isValidPositions !== true) {
-            console.error('[idraw]: The grouped elements are not siblings!');
+            console.error('[idraw]: The grouped materials are not siblings!');
             return list;
         }
         lastIndexs.sort((a, b) => a - b);
@@ -37,45 +37,42 @@ export function groupElementsByPosition(list, positions) {
         const groupPosition = [...groupParentPosition, lastIndexs[0]];
         for (let i = 0; i < lastIndexs.length; i++) {
             const position = [...groupParentPosition, lastIndexs[i]];
-            const elem = findElementFromListByPosition(position, list);
-            if (elem) {
-                groupChildren.push(elem);
+            const mtrl = findMaterialFromListByPosition(position, list);
+            if (mtrl) {
+                groupChildren.push(mtrl);
             }
         }
-        const groupSize = calcElementListSize(groupChildren);
+        const groupSize = calcMaterialListSize(groupChildren);
         for (let i = 0; i < groupChildren.length; i++) {
-            const elem = groupChildren[i];
-            if (elem) {
-                elem.x -= groupSize.x;
-                elem.y -= groupSize.y;
+            const mtrl = groupChildren[i];
+            if (mtrl) {
+                mtrl.x -= groupSize.x;
+                mtrl.y -= groupSize.y;
             }
         }
         for (let i = lastIndexs.length - 1; i >= 0; i--) {
             const position = [...groupParentPosition, lastIndexs[i]];
-            deleteElementInListByPosition(position, list);
+            deleteMaterialInListByPosition(position, list);
         }
-        const group = Object.assign(Object.assign({ name: 'Group', uuid: createUUID(), type: 'group' }, groupSize), { detail: {
-                children: groupChildren
-            } });
-        insertElementToListByPosition(group, groupPosition, list);
+        const group = Object.assign(Object.assign({ name: 'Group', id: createUUID(), type: 'group' }, groupSize), { children: groupChildren });
+        insertMaterialToListByPosition(group, groupPosition, list);
     }
     return list;
 }
-export function ungroupElementsByPosition(list, position) {
-    var _a;
-    const elem = findElementFromListByPosition(position, list);
-    if (!(elem && (elem === null || elem === void 0 ? void 0 : elem.type) === 'group' && Array.isArray((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.children))) {
-        console.error('[idraw]: The ungrouped element is not a group element!');
+export function ungroupMaterialsByPosition(list, position) {
+    const mtrl = findMaterialFromListByPosition(position, list);
+    if (!(mtrl && (mtrl === null || mtrl === void 0 ? void 0 : mtrl.type) === 'group' && Array.isArray(mtrl === null || mtrl === void 0 ? void 0 : mtrl.children))) {
+        console.error('[idraw]: The ungrouped material is not a group material!');
     }
     const groupParentPosition = [...position].splice(0, position.length - 1);
     const groupLastIndex = position[position.length - 1];
-    const { x, y } = elem;
-    deleteElementInListByPosition(position, list);
-    elem.detail.children.forEach((child, i) => {
+    const { x, y } = mtrl;
+    deleteMaterialInListByPosition(position, list);
+    mtrl.children.forEach((child, i) => {
         child.x += x;
         child.y += y;
-        const elemPosition = [...groupParentPosition, groupLastIndex + i];
-        insertElementToListByPosition(child, elemPosition, list);
+        const mtrlPosition = [...groupParentPosition, groupLastIndex + i];
+        insertMaterialToListByPosition(child, mtrlPosition, list);
     });
     return list;
 }

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

@@ -0,0 +1,24 @@
+import type { RecursivePartial, StrictMaterial, MaterialPosition, MaterialType, ViewScaleInfo, ViewSizeInfo } from '@idraw/types';
+export declare function createMaterial<T extends MaterialType>(type: T, baseMtrl: RecursivePartial<StrictMaterial<T>>, opts?: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+    limitRatio?: boolean;
+}): StrictMaterial<T>;
+export declare function insertMaterialToListByPosition(material: StrictMaterial, position: MaterialPosition, list: StrictMaterial[]): boolean;
+export declare function deleteMaterialInListByPosition(position: MaterialPosition, list: StrictMaterial[]): boolean;
+export declare function deleteMaterialInList(id: string, list: StrictMaterial[]): boolean;
+export declare function moveMaterialPosition(materials: StrictMaterial[], opts: {
+    from: MaterialPosition;
+    to: MaterialPosition;
+}): {
+    materials: StrictMaterial[];
+    from: MaterialPosition;
+    to: MaterialPosition;
+};
+export declare function mergeMaterial<T extends StrictMaterial<MaterialType> = StrictMaterial<MaterialType>>(originMtrl: T, updateContent: RecursivePartial<T>, opts?: {
+    onlyUpdateContent?: boolean;
+}): T;
+export declare function updateMaterialInList(id: string, updateContent: RecursivePartial<StrictMaterial<MaterialType>>, materials: StrictMaterial[]): StrictMaterial | null;
+export declare function updateMaterialInListByPosition(position: MaterialPosition, updateContent: RecursivePartial<StrictMaterial<MaterialType>>, materials: StrictMaterial[], opts?: {
+    onlyUpdateContent?: boolean;
+}): StrictMaterial | null;