@idraw/util 0.3.0 → 0.4.0-alpha.1

package/dist/esm/lib/event.js

@@ -0,0 +1,50 @@
+export class EventEmitter {
+    constructor() {
+        this._listeners = new Map();
+    }
+    on(eventKey, callback) {
+        if (this._listeners.has(eventKey)) {
+            const callbacks = this._listeners.get(eventKey) || [];
+            callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
+            this._listeners.set(eventKey, callbacks);
+        }
+        else {
+            this._listeners.set(eventKey, [callback]);
+        }
+    }
+    off(eventKey, callback) {
+        if (this._listeners.has(eventKey)) {
+            const callbacks = this._listeners.get(eventKey);
+            if (Array.isArray(callbacks)) {
+                for (let i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
+                    if (callbacks[i] === callback) {
+                        callbacks.splice(i, 1);
+                        break;
+                    }
+                }
+            }
+            this._listeners.set(eventKey, callbacks || []);
+        }
+    }
+    trigger(eventKey, e) {
+        const callbacks = this._listeners.get(eventKey);
+        if (Array.isArray(callbacks)) {
+            callbacks.forEach((cb) => {
+                cb(e);
+            });
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    has(name) {
+        if (this._listeners.has(name)) {
+            const list = this._listeners.get(name);
+            if (Array.isArray(list) && list.length > 0) {
+                return true;
+            }
+        }
+        return false;
+    }
+}

package/dist/esm/lib/html.d.ts

@@ -0,0 +1,3 @@
+import { HTMLNode } from '@idraw/types';
+export declare function parseHTML(html: string): HTMLNode[];
+export declare function generateHTML(htmlNodes: HTMLNode[]): HTMLNode;

package/dist/esm/lib/html.js

@@ -0,0 +1,170 @@
+const attrRegExp = /\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;
+const elemRegExp = /<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g;
+const whitespaceReg = /^\s*$/;
+const singleElements = {};
+function parseElement(element) {
+    const node = {
+        type: 'element',
+        name: '',
+        isVoid: false,
+        attributes: {},
+        children: []
+    };
+    const elementMatch = element.match(/<\/?([^\s]+?)[/\s>]/);
+    if (elementMatch) {
+        node.name = elementMatch[1];
+        if (singleElements[elementMatch[1]] || element.charAt(element.length - 2) === '/') {
+            node.isVoid = true;
+        }
+        if (node.name.startsWith('!--')) {
+            const endIndex = element.indexOf('-->');
+            return {
+                type: 'comment',
+                name: null,
+                attributes: {},
+                children: [],
+                isVoid: false,
+                comment: endIndex !== -1 ? element.slice(4, endIndex) : ''
+            };
+        }
+    }
+    const reg = new RegExp(attrRegExp);
+    let result = null;
+    while (true) {
+        result = reg.exec(element);
+        if (result === null) {
+            break;
+        }
+        if (!result[0].trim()) {
+            continue;
+        }
+        if (result[1]) {
+            const attr = result[1].trim();
+            let arr = [attr, ''];
+            if (attr.indexOf('=') > -1) {
+                arr = attr.split('=');
+            }
+            node.attributes[arr[0]] = arr[1];
+            reg.lastIndex--;
+        }
+        else if (result[2]) {
+            node.attributes[result[2]] = result[3].trim().substring(1, result[3].length - 1);
+        }
+    }
+    return node;
+}
+export function parseHTML(html) {
+    const result = [];
+    const arr = [];
+    let current;
+    let level = -1;
+    let inComponent = false;
+    html.replace(elemRegExp, (element, index) => {
+        if (inComponent && !Array.isArray(current)) {
+            if (element !== '</' + current.name + '>') {
+                return element;
+            }
+            else {
+                inComponent = false;
+            }
+        }
+        const isOpen = element.charAt(1) !== '/';
+        const isComment = element.startsWith('<!--');
+        const start = index + element.length;
+        const nextChar = html.charAt(start);
+        let parent;
+        if (isComment) {
+            const comment = parseElement(element);
+            if (level < 0) {
+                result.push(comment);
+                return element;
+            }
+            parent = arr[level];
+            parent.children.push(comment);
+            return element;
+        }
+        if (isOpen) {
+            level++;
+            current = parseElement(element);
+            if (!current.isVoid && !inComponent && nextChar && nextChar !== '<') {
+                const content = html.slice(start, html.indexOf('<', start));
+                if (content.trim()) {
+                    current.children.push({
+                        type: 'text',
+                        name: null,
+                        attributes: {},
+                        children: [],
+                        isVoid: false,
+                        textContent: content.trim()
+                    });
+                }
+            }
+            if (level === 0) {
+                result.push(current);
+            }
+            parent = arr[level - 1];
+            if (parent) {
+                parent.children.push(current);
+            }
+            arr[level] = current;
+        }
+        if (!isOpen || (!Array.isArray(current) && current.isVoid)) {
+            if (level > -1 && !Array.isArray(current) && (current.isVoid || current.name === element.slice(2, -1))) {
+                level--;
+                current = level === -1 ? result : arr[level];
+            }
+            if (!inComponent && nextChar !== '<' && nextChar) {
+                parent = level === -1 ? result : arr[level].children;
+                const end = html.indexOf('<', start);
+                let content = html.slice(start, end === -1 ? undefined : end);
+                if (whitespaceReg.test(content)) {
+                    content = ' ';
+                }
+                if ((end > -1 && level + parent.length >= 0) || content !== ' ') {
+                    if (content.trim()) {
+                        parent.push({
+                            type: 'text',
+                            name: null,
+                            attributes: {},
+                            children: [],
+                            isVoid: false,
+                            textContent: content.trim()
+                        });
+                    }
+                }
+            }
+        }
+        return element;
+    });
+    return result;
+}
+function attrString(attrs) {
+    const buff = [];
+    for (let key in attrs) {
+        buff.push(key + '="' + attrs[key] + '"');
+    }
+    if (!buff.length) {
+        return '';
+    }
+    return ' ' + buff.join(' ');
+}
+function stringify(buff, htmlNode) {
+    switch (htmlNode.type) {
+        case 'text':
+            return buff + htmlNode.textContent;
+        case 'element':
+            buff += '<' + htmlNode.name + (htmlNode.attributes ? attrString(htmlNode.attributes) : '') + (htmlNode.isVoid ? '/>' : '>');
+            if (htmlNode.isVoid) {
+                return buff;
+            }
+            return buff + htmlNode.children.reduce(stringify, '') + '</' + htmlNode.name + '>';
+        case 'comment':
+            buff += '<!--' + htmlNode.comment + '-->';
+            return buff;
+    }
+}
+export function generateHTML(htmlNodes) {
+    return htmlNodes.reduce(function (token, rootEl) {
+        return token + stringify('', rootEl);
+    }, '');
+}

package/dist/esm/lib/image.d.ts

@@ -0,0 +1,4 @@
+export declare function compressImage(src: string, opts?: {
+    radio?: number;
+    type?: 'image/jpeg' | 'image/png';
+}): Promise<string>;

package/dist/esm/lib/image.js

@@ -0,0 +1,27 @@
+export function compressImage(src, opts) {
+    let radio = 0.5;
+    const type = (opts === null || opts === void 0 ? void 0 : opts.type) || 'image/png';
+    if ((opts === null || opts === void 0 ? void 0 : opts.radio) && (opts === null || opts === void 0 ? void 0 : opts.radio) > 0 && (opts === null || opts === void 0 ? void 0 : opts.radio) <= 1) {
+        radio = opts === null || opts === void 0 ? void 0 : opts.radio;
+    }
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.addEventListener('load', () => {
+            const { width, height } = image;
+            const resultW = width * radio;
+            const resultH = height * radio;
+            let canvas = document.createElement('canvas');
+            canvas.width = resultW;
+            canvas.height = resultH;
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(image, 0, 0, resultW, resultH);
+            const base64 = canvas.toDataURL(type);
+            canvas = null;
+            resolve(base64);
+        });
+        image.addEventListener('error', (err) => {
+            reject(err);
+        });
+        image.src = src;
+    });
+}

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

@@ -19,13 +19,15 @@ 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 const is: {
+declare function numberStr(value: any): boolean;
+export declare const is: {
     x: typeof x;
     y: typeof y;
     w: typeof w;
     h: typeof h;
     angle: typeof angle;
     number: typeof number;
+    numberStr: typeof numberStr;
     borderWidth: typeof borderWidth;
     borderRadius: typeof borderRadius;
     color: typeof color;
@@ -42,4 +44,4 @@ declare const is: {
     fontWeight: typeof fontWeight;
     strokeWidth: typeof strokeWidth;
 };
-export default is;
+export {};

package/dist/esm/lib/is.js

@@ -1,6 +1,6 @@
 import { isColorStr } from './color';
 function number(value) {
-    return (typeof value === 'number' && (value > 0 || value <= 0));
+    return typeof value === 'number' && (value > 0 || value <= 0);
 }
 function x(value) {
     return number(value);
@@ -9,13 +9,13 @@ function y(value) {
     return number(value);
 }
 function w(value) {
-    return (typeof value === 'number' && value >= 0);
+    return typeof value === 'number' && value >= 0;
 }
 function h(value) {
-    return (typeof value === 'number' && value >= 0);
+    return typeof value === 'number' && value >= 0;
 }
 function angle(value) {
-    return (typeof value === 'number' && value >= -360 && value <= 360);
+    return typeof value === 'number' && value >= -360 && value <= 360;
 }
 function borderWidth(value) {
     return w(value);
@@ -27,16 +27,16 @@ function color(value) {
     return isColorStr(value);
 }
 function imageURL(value) {
-    return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${value}`));
+    return typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${value}`);
 }
 function imageBase64(value) {
-    return (typeof value === 'string' && /^(data:image\/)/.test(`${value}`));
+    return typeof value === 'string' && /^(data:image\/)/.test(`${value}`);
 }
 function imageSrc(value) {
-    return (imageBase64(value) || imageURL(value));
+    return imageBase64(value) || imageURL(value);
 }
 function svg(value) {
-    return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test(`${value}`.trim()) && /<\/[\s]{0,}svg>$/i.test(`${value}`.trim()));
+    return typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test(`${value}`.trim()) && /<\/[\s]{0,}svg>$/i.test(`${value}`.trim());
 }
 function html(value) {
     let result = false;
@@ -71,11 +71,30 @@ function fontFamily(value) {
 function fontWeight(value) {
     return ['bold'].includes(value);
 }
-const is = {
-    x, y, w, h, angle, number,
-    borderWidth, borderRadius, color,
-    imageSrc, imageURL, imageBase64, svg, html,
-    text, fontSize, lineHeight, textAlign, fontFamily, fontWeight,
-    strokeWidth,
+function numberStr(value) {
+    return /^(-?\d+(?:\.\d+)?)$/.test(`${value}`);
+}
+export const is = {
+    x,
+    y,
+    w,
+    h,
+    angle,
+    number,
+    numberStr,
+    borderWidth,
+    borderRadius,
+    color,
+    imageSrc,
+    imageURL,
+    imageBase64,
+    svg,
+    html,
+    text,
+    fontSize,
+    lineHeight,
+    textAlign,
+    fontFamily,
+    fontWeight,
+    strokeWidth
 };
-export default is;

package/dist/esm/lib/istype.d.ts

@@ -1,4 +1,4 @@
-declare const istype: {
+export declare const istype: {
     type(data: any, lowerCase?: boolean): string;
     array(data: any): boolean;
     json(data: any): boolean;
@@ -10,4 +10,3 @@ declare const istype: {
     null(data: any): boolean;
     promise(data: any): boolean;
 };
-export default istype;

package/dist/esm/lib/istype.js

@@ -1,9 +1,9 @@
 function parsePrototype(data) {
     const typeStr = Object.prototype.toString.call(data) || '';
-    const result = typeStr.replace(/(\[object|\])/ig, '').trim();
+    const result = typeStr.replace(/(\[object|\])/gi, '').trim();
     return result;
 }
-const istype = {
+export const istype = {
     type(data, lowerCase) {
         const result = parsePrototype(data);
         return lowerCase === true ? result.toLocaleLowerCase() : result;
@@ -34,6 +34,5 @@ const istype = {
     },
     promise(data) {
         return parsePrototype(data) === 'Promise';
-    },
+    }
 };
-export default istype;

package/dist/esm/lib/{loader.js → load.js}

@@ -11,7 +11,7 @@ import { parseHTMLToDataURL, parseSVGToDataURL } from './parser';
 const { Image } = window;
 export function loadImage(src) {
     return new Promise((resolve, reject) => {
-        const img = new Image;
+        const img = new Image();
         img.crossOrigin = 'anonymous';
         img.onload = function () {
             resolve(img);
@@ -29,7 +29,7 @@ export function loadSVG(svg) {
     });
 }
 function filterAmpersand(str) {
-    return str.replace(/\&/ig, '&');
+    return str.replace(/\&/gi, '&');
 }
 export function loadHTML(html, opts) {
     return __awaiter(this, void 0, void 0, function* () {

package/dist/esm/lib/middleware.d.ts

@@ -0,0 +1,3 @@
+import type { BoardViewerFrameSnapshot, ViewScaleInfo, ViewSizeInfo } from '@idraw/types';
+export declare function getViewScaleInfoFromSnapshot(snapshot: BoardViewerFrameSnapshot): ViewScaleInfo;
+export declare function getViewSizeInfoFromSnapshot(snapshot: BoardViewerFrameSnapshot): ViewSizeInfo;

package/dist/esm/lib/middleware.js

@@ -0,0 +1,22 @@
+export function getViewScaleInfoFromSnapshot(snapshot) {
+    const { activeStore } = snapshot;
+    const sacelInfo = {
+        scale: activeStore === null || activeStore === void 0 ? void 0 : activeStore.scale,
+        offsetTop: activeStore === null || activeStore === void 0 ? void 0 : activeStore.offsetTop,
+        offsetBottom: activeStore === null || activeStore === void 0 ? void 0 : activeStore.offsetBottom,
+        offsetLeft: activeStore === null || activeStore === void 0 ? void 0 : activeStore.offsetLeft,
+        offsetRight: activeStore === null || activeStore === void 0 ? void 0 : activeStore.offsetRight
+    };
+    return sacelInfo;
+}
+export function getViewSizeInfoFromSnapshot(snapshot) {
+    const { activeStore } = snapshot;
+    const sacelInfo = {
+        devicePixelRatio: activeStore.devicePixelRatio,
+        width: activeStore === null || activeStore === void 0 ? void 0 : activeStore.width,
+        height: activeStore === null || activeStore === void 0 ? void 0 : activeStore.height,
+        contextWidth: activeStore === null || activeStore === void 0 ? void 0 : activeStore.contextWidth,
+        contextHeight: activeStore === null || activeStore === void 0 ? void 0 : activeStore.contextHeight
+    };
+    return sacelInfo;
+}

package/dist/esm/lib/number.d.ts

@@ -0,0 +1,3 @@
+export declare function formatNumber(num: number, opts?: {
+    decimalPlaces?: number;
+}): number;

package/dist/esm/lib/number.js

@@ -0,0 +1,4 @@
+export function formatNumber(num, opts) {
+    const decimalPlaces = (opts === null || opts === void 0 ? void 0 : opts.decimalPlaces) || 2;
+    return parseFloat(num.toFixed(decimalPlaces));
+}

package/dist/esm/lib/parser.js

@@ -2,7 +2,10 @@ export function parseHTMLToDataURL(html, opts) {
     const { width, height } = opts;
     return new Promise((resolve, reject) => {
         const _svg = `
-    <svg xmlns="http://www.w3.org/2000/svg" width="${width || ''}" height = "${height || ''}">
+    <svg 
+      xmlns="http://www.w3.org/2000/svg" 
+      width="${width || ''}" 
+      height = "${height || ''}">
       <foreignObject width="100%" height="100%">
         <div xmlns = "http://www.w3.org/1999/xhtml">
           ${html}

package/dist/esm/lib/point.d.ts

@@ -0,0 +1,8 @@
+import type { Point, PointSize, TouchPoint } from '@idraw/types';
+export declare function calcDistance(start: PointSize, end: PointSize): number;
+export declare function calcSpeed(start: Point, end: Point): number;
+export declare function equalPoint(p1: Point, p2: Point): boolean;
+export declare function equalTouchPoint(p1: TouchPoint, p2: TouchPoint): boolean;
+export declare function vaildPoint(p: Point): boolean;
+export declare function vaildTouchPoint(p: TouchPoint): boolean;
+export declare function getCenterFromTwoPoints(p1: PointSize, p2: PointSize): PointSize;

package/dist/esm/lib/point.js

@@ -0,0 +1,30 @@
+export function calcDistance(start, end) {
+    const distance = (start.x - end.x) * (start.x - end.x) + (start.y - end.y) * (start.y - end.y);
+    return distance === 0 ? distance : Math.sqrt(distance);
+}
+export function calcSpeed(start, end) {
+    const distance = calcDistance(start, end);
+    const speed = distance / Math.abs(end.t - start.t);
+    return speed;
+}
+export function equalPoint(p1, p2) {
+    return p1.x === p2.x && p1.y === p2.y && p1.t === p2.t;
+}
+export function equalTouchPoint(p1, p2) {
+    return equalPoint(p1, p2) === true && p1.f === p2.f;
+}
+function isNum(num) {
+    return num >= 0 || num < 0;
+}
+export function vaildPoint(p) {
+    return isNum(p.x) && isNum(p.y) && p.t > 0;
+}
+export function vaildTouchPoint(p) {
+    return vaildPoint(p) === true && p.f >= 0;
+}
+export function getCenterFromTwoPoints(p1, p2) {
+    return {
+        x: p1.x + (p2.x - p1.x) / 2,
+        y: p1.y + (p2.y - p1.y) / 2
+    };
+}

package/dist/esm/lib/rect.d.ts

@@ -0,0 +1,2 @@
+import type { ElementSize } from '@idraw/types';
+export declare function checkRectIntersect(rect1: ElementSize, rect2: ElementSize): boolean;

package/dist/esm/lib/rect.js

@@ -0,0 +1,11 @@
+export function checkRectIntersect(rect1, rect2) {
+    const react1MinX = rect1.x;
+    const react1MinY = rect1.y;
+    const react1MaxX = rect1.x + rect1.w;
+    const react1MaxY = rect1.y + rect1.h;
+    const react2MinX = rect2.x;
+    const react2MinY = rect2.y;
+    const react2MaxX = rect2.x + rect2.w;
+    const react2MaxY = rect2.y + rect2.h;
+    return react1MinX <= react2MaxX && react1MaxX >= react2MinX && react1MinY <= react2MaxY && react1MaxY >= react2MinY;
+}

package/dist/esm/lib/rotate.d.ts

@@ -0,0 +1,13 @@
+import type { ViewContext2D, PointSize, ElementSize, ViewRectVertexes, Element } from '@idraw/types';
+export declare function parseRadianToAngle(radian: number): number;
+export declare function parseAngleToRadian(angle: number): number;
+export declare function rotateElement(ctx: ViewContext2D | CanvasRenderingContext2D | ViewContext2D, elemSize: ElementSize, callback: (ctx: ViewContext2D | CanvasRenderingContext2D) => void): void;
+export declare function calcElementCenter(elem: ElementSize): PointSize;
+export declare function calcElementCenterFromVertexes(ves: ViewRectVertexes): PointSize;
+export declare function calcRadian(center: PointSize, start: PointSize, end: PointSize): number;
+export declare function rotatePoint(center: PointSize, start: PointSize, radian: number): PointSize;
+export declare function rotatePointInGroup(point: PointSize, groupQueue: Element<'group'>[]): PointSize;
+export declare function getElementRotateVertexes(elemSize: ElementSize, center: PointSize, angle: number): ViewRectVertexes;
+export declare function rotateElementVertexes(elemSize: ElementSize): ViewRectVertexes;
+export declare function rotateVertexes(center: PointSize, ves: ViewRectVertexes, radian: number): ViewRectVertexes;
+export declare function limitAngle(angle: number): number;