lupine.components 1.1.13 → 1.1.14

package/src/lib/drag-util.ts

@@ -1,118 +1,118 @@
-/*
-  const moveFn = createDragUtil();
-  moveFn.setOnMoveCallback((clientX: number, clientY: number, movedX: number, movedY: number) => {
-    const dragDom = moveFn.getDraggingDom();
-    if (dragDom?.classList.contains('xxx')) {
-      updateRangeMMove(clientX, true, dragDom, _saved.stopDoms);
-    } else if (dragDom?.classList.contains('yyy')) {
-      updatePicMMove(clientX);
-    }
-  });
-    <div
-      onMouseMove={moveFn.onMouseMove}
-      onMouseUp={moveFn.onMouseUp}
-      onTouchMove={moveFn.onTouchMove}
-      onTouchEnd={moveFn.onTouchEnd}
-    >
-      <div onMouseDown={moveFn.onMouseDown} onTouchStart={moveFn.onTouchStart}></div>
-    </div>
-
-    // when zooming an image, the way to scale slowly
-    const slowDelta = 1 + (scale - 1) * 0.2;
-    tempScale = lastScale * slowDelta;
-*/
-export const createDragUtil = () => {
-  let isDragging = false;
-  let initialX = 0;
-  let initialY = 0;
-  let draggingDom: HTMLDivElement | null = null;
-  let onMoveCallback: (clientX: number, clientY: number, movedX: number, movedY: number) => void = () => {};
-  let onScaleCallback: (scale: number) => void = () => {};
-
-  let isZooming = false;
-  let initialDistance = 0;
-
-  const getDistance = (t1: Touch, t2: Touch) => {
-    const dx = t2.clientX - t1.clientX;
-    const dy = t2.clientY - t1.clientY;
-    return Math.sqrt(dx * dx + dy * dy);
-  };
-  return {
-    setOnMoveCallback: (callback: (clientX: number, clientY: number, movedX: number, movedY: number) => void) => {
-      onMoveCallback = callback;
-    },
-    setOnScaleCallback: (callback: (scale: number) => void) => {
-      onScaleCallback = callback;
-    },
-    getDistance,
-    getDraggingDom: () => draggingDom,
-    onMouseDown: (event: MouseEvent) => {
-      event.preventDefault();
-      if (event.buttons !== 1) {
-        isDragging = false;
-        draggingDom = null;
-        return;
-      }
-      isDragging = true;
-      draggingDom = event.currentTarget as HTMLDivElement;
-      initialX = event.clientX;
-      initialY = event.clientY;
-    },
-    onMouseMove: (event: MouseEvent) => {
-      if (event.buttons === 0 || !draggingDom) {
-        isDragging = false;
-        draggingDom = null;
-        return;
-      }
-      onMoveCallback(event.clientX, event.clientY, event.clientX - initialX, event.clientY - initialY);
-    },
-    onMouseUp: () => {
-      isDragging = false;
-      isZooming = false;
-      draggingDom = null;
-    },
-
-    onTouchStart: (event: TouchEvent) => {
-      if (event.touches.length === 1) {
-        isDragging = true;
-        draggingDom = event.currentTarget as HTMLDivElement;
-        initialX = event.touches[0].clientX;
-        initialY = event.touches[0].clientY;
-      } else if (event.touches.length === 2) {
-        initialDistance = getDistance(event.touches[0], event.touches[1]);
-        isZooming = true;
-      } else {
-        isDragging = false;
-        draggingDom = null;
-      }
-    },
-    onTouchMove: (event: TouchEvent) => {
-      if (isZooming) {
-        if (event.touches.length === 2) {
-          event.preventDefault(); // 防止页面滚动
-          const newDistance = getDistance(event.touches[0], event.touches[1]);
-          const delta = newDistance / initialDistance;
-          //   const newScale = Math.min(Math.max(1, scale * delta), 4); // 限制缩放范围
-          onScaleCallback(delta);
-          return;
-        }
-      }
-      if (!isDragging || event.touches.length === 0 || !draggingDom) {
-        isDragging = false;
-        draggingDom = null;
-        return;
-      }
-      onMoveCallback(
-        event.touches[0].clientX,
-        event.touches[0].clientY,
-        event.touches[0].clientX - initialX,
-        event.touches[0].clientY - initialY
-      );
-    },
-    onTouchEnd: () => {
-      isDragging = false;
-      isZooming = false;
-      draggingDom = null;
-    },
-  };
-};
+/*
+  const moveFn = createDragUtil();
+  moveFn.setOnMoveCallback((clientX: number, clientY: number, movedX: number, movedY: number) => {
+    const dragDom = moveFn.getDraggingDom();
+    if (dragDom?.classList.contains('xxx')) {
+      updateRangeMMove(clientX, true, dragDom, _saved.stopDoms);
+    } else if (dragDom?.classList.contains('yyy')) {
+      updatePicMMove(clientX);
+    }
+  });
+    <div
+      onMouseMove={moveFn.onMouseMove}
+      onMouseUp={moveFn.onMouseUp}
+      onTouchMove={moveFn.onTouchMove}
+      onTouchEnd={moveFn.onTouchEnd}
+    >
+      <div onMouseDown={moveFn.onMouseDown} onTouchStart={moveFn.onTouchStart}></div>
+    </div>
+
+    // when zooming an image, the way to scale slowly
+    const slowDelta = 1 + (scale - 1) * 0.2;
+    tempScale = lastScale * slowDelta;
+*/
+export const createDragUtil = () => {
+  let isDragging = false;
+  let initialX = 0;
+  let initialY = 0;
+  let draggingDom: HTMLDivElement | null = null;
+  let onMoveCallback: (clientX: number, clientY: number, movedX: number, movedY: number) => void = () => {};
+  let onScaleCallback: (scale: number) => void = () => {};
+
+  let isZooming = false;
+  let initialDistance = 0;
+
+  const getDistance = (t1: Touch, t2: Touch) => {
+    const dx = t2.clientX - t1.clientX;
+    const dy = t2.clientY - t1.clientY;
+    return Math.sqrt(dx * dx + dy * dy);
+  };
+  return {
+    setOnMoveCallback: (callback: (clientX: number, clientY: number, movedX: number, movedY: number) => void) => {
+      onMoveCallback = callback;
+    },
+    setOnScaleCallback: (callback: (scale: number) => void) => {
+      onScaleCallback = callback;
+    },
+    getDistance,
+    getDraggingDom: () => draggingDom,
+    onMouseDown: (event: MouseEvent) => {
+      event.preventDefault();
+      if (event.buttons !== 1) {
+        isDragging = false;
+        draggingDom = null;
+        return;
+      }
+      isDragging = true;
+      draggingDom = event.currentTarget as HTMLDivElement;
+      initialX = event.clientX;
+      initialY = event.clientY;
+    },
+    onMouseMove: (event: MouseEvent) => {
+      if (event.buttons === 0 || !draggingDom) {
+        isDragging = false;
+        draggingDom = null;
+        return;
+      }
+      onMoveCallback(event.clientX, event.clientY, event.clientX - initialX, event.clientY - initialY);
+    },
+    onMouseUp: () => {
+      isDragging = false;
+      isZooming = false;
+      draggingDom = null;
+    },
+
+    onTouchStart: (event: TouchEvent) => {
+      if (event.touches.length === 1) {
+        isDragging = true;
+        draggingDom = event.currentTarget as HTMLDivElement;
+        initialX = event.touches[0].clientX;
+        initialY = event.touches[0].clientY;
+      } else if (event.touches.length === 2) {
+        initialDistance = getDistance(event.touches[0], event.touches[1]);
+        isZooming = true;
+      } else {
+        isDragging = false;
+        draggingDom = null;
+      }
+    },
+    onTouchMove: (event: TouchEvent) => {
+      if (isZooming) {
+        if (event.touches.length === 2) {
+          event.preventDefault(); // 防止页面滚动
+          const newDistance = getDistance(event.touches[0], event.touches[1]);
+          const delta = newDistance / initialDistance;
+          //   const newScale = Math.min(Math.max(1, scale * delta), 4); // 限制缩放范围
+          onScaleCallback(delta);
+          return;
+        }
+      }
+      if (!isDragging || event.touches.length === 0 || !draggingDom) {
+        isDragging = false;
+        draggingDom = null;
+        return;
+      }
+      onMoveCallback(
+        event.touches[0].clientX,
+        event.touches[0].clientY,
+        event.touches[0].clientX - initialX,
+        event.touches[0].clientY - initialY
+      );
+    },
+    onTouchEnd: () => {
+      isDragging = false;
+      isZooming = false;
+      draggingDom = null;
+    },
+  };
+};

package/src/lib/dynamical-load.ts

@@ -1,134 +1,134 @@
-/*
- * for my-apps
- */
-export class DynamicalLoad {
-  static loadScript(url: string, idForReplace?: string, removeOnLoaded = false): Promise<string> {
-    return new Promise((resolve, reject) => {
-      if (this.existScript(url, idForReplace)) {
-        resolve(url);
-        return;
-      }
-      const scriptDom = document.createElement('script');
-      scriptDom.src = url;
-      if (idForReplace) {
-        scriptDom.id = idForReplace;
-      }
-
-      scriptDom.onload = () => {
-        resolve(url);
-        if (removeOnLoaded) {
-          scriptDom.remove();
-        }
-      };
-
-      scriptDom.onerror = () => {
-        reject(new Error('Failed to load module script with URL ' + url));
-        if (removeOnLoaded) {
-          scriptDom.remove();
-        }
-      };
-
-      const head = document.getElementsByTagName('head')[0];
-      head ? head.appendChild(scriptDom) : document.documentElement.appendChild(scriptDom);
-    });
-  }
-
-  // TODO: more accuracy
-  static existScript(url: string, id?: string) {
-    if (id) {
-      const scriptDom = document.getElementById(id);
-      if (scriptDom && scriptDom.tagName === 'SCRIPT') {
-        const src = (scriptDom as HTMLScriptElement).src.split('?')[0];
-        if (src.substring(src.length - url.length) === url) {
-          return true;
-        }
-      }
-    }
-
-    const scripts = document.scripts;
-    for (let i = 0; i < scripts.length; i++) {
-      const src = scripts[i].src.split('?')[0];
-      if (src.substring(src.length - url.length) === url) {
-        return true;
-      }
-    }
-  }
-
-  static loadCss(url: string, idForReplace?: string): Promise<string> {
-    return new Promise((resolve, reject) => {
-      if (this.existCss(url, idForReplace)) {
-        resolve(url);
-        return;
-      }
-      if (idForReplace) {
-        const sheet = document.getElementById(idForReplace);
-        if (sheet && sheet.tagName === 'LINK') {
-          sheet.parentNode!.removeChild(sheet);
-        }
-      }
-
-      const linkDom = document.createElement('link');
-      linkDom.rel = 'stylesheet';
-      linkDom.type = 'text/css';
-      linkDom.href = url;
-      linkDom.media = 'all';
-      if (idForReplace) {
-        linkDom.id = idForReplace;
-      }
-      linkDom.onload = () => {
-        resolve(url);
-      };
-
-      linkDom.onerror = () => {
-        reject(new Error('Failed to load css with URL ' + url));
-      };
-
-      document.getElementsByTagName('head')[0].appendChild(linkDom);
-    });
-  }
-
-  // TODO: more accuracy
-  static existCss(url: string, id?: string) {
-    if (id) {
-      const linkDom = document.getElementById(id);
-      if (linkDom && linkDom.tagName === 'LINK') {
-        const href = (<any>linkDom).href.split('?')[0];
-        if (href.substring(href.length - url.length) === url) {
-          return true;
-        }
-      }
-    }
-
-    const styles = document.styleSheets;
-    for (let i = 0; i < styles.length; i++) {
-      const linkDom = styles[i] as any;
-      const href = linkDom.href.split('?')[0];
-      if (href.substring(href.length - url.length) === url) {
-        return true;
-      }
-    }
-  }
-
-  // removeCss(url: string, id?: string) {
-  //     if (id) {
-  //         const sheet = document.getElementById(id);
-  //         if (sheet && sheet instanceof HTMLElement) {
-  //             const href = (<any>sheet).href;
-  //             if (href.substring(href.length - url.length) === url) {
-  //                 (<any>sheet).disabled = true;
-  //                 sheet.parentNode.removeChild(sheet);
-  //                 return;
-  //             }
-  //         }
-  //     }
-  //     const styles = document.styleSheets;
-  //     for (const i = 0; i < styles.length; i++) {
-  //         const sheet = styles[i] as any;
-  //         if (sheet.href.substring(sheet.href.length - url.length) === url) {
-  //             sheet.disabled = true;
-  //             sheet.ownerNode.parentNode.removeChild(sheet.ownerNode);
-  //             return;
-  //         }
-  //     }
-  // }
-}
+/*
+ * for my-apps
+ */
+export class DynamicalLoad {
+  static loadScript(url: string, idForReplace?: string, removeOnLoaded = false): Promise<string> {
+    return new Promise((resolve, reject) => {
+      if (this.existScript(url, idForReplace)) {
+        resolve(url);
+        return;
+      }
+      const scriptDom = document.createElement('script');
+      scriptDom.src = url;
+      if (idForReplace) {
+        scriptDom.id = idForReplace;
+      }
+
+      scriptDom.onload = () => {
+        resolve(url);
+        if (removeOnLoaded) {
+          scriptDom.remove();
+        }
+      };
+
+      scriptDom.onerror = () => {
+        reject(new Error('Failed to load module script with URL ' + url));
+        if (removeOnLoaded) {
+          scriptDom.remove();
+        }
+      };
+
+      const head = document.getElementsByTagName('head')[0];
+      head ? head.appendChild(scriptDom) : document.documentElement.appendChild(scriptDom);
+    });
+  }
+
+  // TODO: more accuracy
+  static existScript(url: string, id?: string) {
+    if (id) {
+      const scriptDom = document.getElementById(id);
+      if (scriptDom && scriptDom.tagName === 'SCRIPT') {
+        const src = (scriptDom as HTMLScriptElement).src.split('?')[0];
+        if (src.substring(src.length - url.length) === url) {
+          return true;
+        }
+      }
+    }
+
+    const scripts = document.scripts;
+    for (let i = 0; i < scripts.length; i++) {
+      const src = scripts[i].src.split('?')[0];
+      if (src.substring(src.length - url.length) === url) {
+        return true;
+      }
+    }
+  }
+
+  static loadCss(url: string, idForReplace?: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+      if (this.existCss(url, idForReplace)) {
+        resolve(url);
+        return;
+      }
+      if (idForReplace) {
+        const sheet = document.getElementById(idForReplace);
+        if (sheet && sheet.tagName === 'LINK') {
+          sheet.parentNode!.removeChild(sheet);
+        }
+      }
+
+      const linkDom = document.createElement('link');
+      linkDom.rel = 'stylesheet';
+      linkDom.type = 'text/css';
+      linkDom.href = url;
+      linkDom.media = 'all';
+      if (idForReplace) {
+        linkDom.id = idForReplace;
+      }
+      linkDom.onload = () => {
+        resolve(url);
+      };
+
+      linkDom.onerror = () => {
+        reject(new Error('Failed to load css with URL ' + url));
+      };
+
+      document.getElementsByTagName('head')[0].appendChild(linkDom);
+    });
+  }
+
+  // TODO: more accuracy
+  static existCss(url: string, id?: string) {
+    if (id) {
+      const linkDom = document.getElementById(id);
+      if (linkDom && linkDom.tagName === 'LINK') {
+        const href = (<any>linkDom).href.split('?')[0];
+        if (href.substring(href.length - url.length) === url) {
+          return true;
+        }
+      }
+    }
+
+    const styles = document.styleSheets;
+    for (let i = 0; i < styles.length; i++) {
+      const linkDom = styles[i] as any;
+      const href = linkDom.href.split('?')[0];
+      if (href.substring(href.length - url.length) === url) {
+        return true;
+      }
+    }
+  }
+
+  // removeCss(url: string, id?: string) {
+  //     if (id) {
+  //         const sheet = document.getElementById(id);
+  //         if (sheet && sheet instanceof HTMLElement) {
+  //             const href = (<any>sheet).href;
+  //             if (href.substring(href.length - url.length) === url) {
+  //                 (<any>sheet).disabled = true;
+  //                 sheet.parentNode.removeChild(sheet);
+  //                 return;
+  //             }
+  //         }
+  //     }
+  //     const styles = document.styleSheets;
+  //     for (const i = 0; i < styles.length; i++) {
+  //         const sheet = styles[i] as any;
+  //         if (sheet.href.substring(sheet.href.length - url.length) === url) {
+  //             sheet.disabled = true;
+  //             sheet.ownerNode.parentNode.removeChild(sheet.ownerNode);
+  //             return;
+  //         }
+  //     }
+  // }
+}

package/src/lib/encode-html.ts

@@ -1,27 +1,27 @@
-export const encodeHtml = (str: string): string => {
-  return str.replace(
-    /[&<>'"]/g,
-    (tag) =>
-      ({
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;',
-        "'": '&#39;',
-        '"': '&quot;',
-      }[tag] || '')
-  );
-};
-
-export const decodeHtml = (str: string): string => {
-  return str.replace(
-    /&(\D+);/gi,
-    (tag) =>
-      ({
-        '&amp;': '&',
-        '&lt;': '<',
-        '&gt;': '>',
-        '&#39;': "'",
-        '&quot;': '"',
-      }[tag] || '')
-  );
-};
+export const encodeHtml = (str: string): string => {
+  return str.replace(
+    /[&<>'"]/g,
+    (tag) =>
+      ({
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        "'": '&#39;',
+        '"': '&quot;',
+      }[tag] || '')
+  );
+};
+
+export const decodeHtml = (str: string): string => {
+  return str.replace(
+    /&(\D+);/gi,
+    (tag) =>
+      ({
+        '&amp;': '&',
+        '&lt;': '<',
+        '&gt;': '>',
+        '&#39;': "'",
+        '&quot;': '"',
+      }[tag] || '')
+  );
+};

package/src/lib/find-parent-tag.ts

@@ -1,8 +1,8 @@
-export const findParentTag = (dom: HTMLElement, tag: string) => {
-  const tagUpper = tag.toUpperCase();
-  let parent = dom.parentElement;
-  while (parent && parent.tagName !== tagUpper && parent.tagName !== 'BODY') {
-    parent = parent.parentElement;
-  }
-  return parent;
-};
+export const findParentTag = (dom: HTMLElement, tag: string) => {
+  const tagUpper = tag.toUpperCase();
+  let parent = dom.parentElement;
+  while (parent && parent.tagName !== tagUpper && parent.tagName !== 'BODY') {
+    parent = parent.parentElement;
+  }
+  return parent;
+};

package/src/lib/format-bytes.ts

@@ -1,11 +1,11 @@
-export const formatBytes = (bytes: number, decimals = 2) => {
-  if (!+bytes) return '0 Bytes';
-
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
-};
+export const formatBytes = (bytes: number, decimals = 2) => {
+  if (!+bytes) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+};

package/src/lib/index.ts

@@ -1,24 +1,24 @@
-export * from './back-action-helper';
-export * from './base62';
-export * from './blob-utils';
-export * from './calculate-text-width';
-export * from './date-utils';
-export * from './deep-merge';
-export * from './document-ready';
-export * from './dom-utils';
-export * from './download-file';
-export * from './download-link';
-export * from './download-stream';
-export * from './drag-util';
-export * from './dynamical-load';
-export * from './encode-html';
-export * from './find-parent-tag';
-export * from './format-bytes';
-export * from './lite-dom';
-export * from './message-hub';
-export * from './observable';
-export * from './path-utils';
-export * from './promise-timeout';
-export * from './simple-storage';
-export * from './stop-propagation';
-export * from './upload-file';
+export * from './back-action-helper';
+export * from './base62';
+export * from './blob-utils';
+export * from './calculate-text-width';
+export * from './date-utils';
+export * from './deep-merge';
+export * from './document-ready';
+export * from './dom-utils';
+export * from './download-file';
+export * from './download-link';
+export * from './download-stream';
+export * from './drag-util';
+export * from './dynamical-load';
+export * from './encode-html';
+export * from './find-parent-tag';
+export * from './format-bytes';
+export * from './lite-dom';
+export * from './message-hub';
+export * from './observable';
+export * from './path-utils';
+export * from './promise-timeout';
+export * from './simple-storage';
+export * from './stop-propagation';
+export * from './upload-file';