@thienvu18/designable-shared 2.0.0 → 2.0.2

package/lib/element.d.ts

@@ -1,6 +1,11 @@
-import { Point } from './coordinate';
-export declare const calcElementOuterWidth: (innerWidth: number, style: CSSStyleDeclaration) => number;
-export declare const calcElementLayout: (element: Element) => "vertical" | "horizontal";
-export declare const calcElementTranslate: (element: HTMLElement) => Point;
-export declare const calcElementRotate: (element: HTMLElement) => number;
-export declare const calcElementScale: (element: HTMLElement) => number;
+import { Point } from './coordinate'
+export declare const calcElementOuterWidth: (
+  innerWidth: number,
+  style: CSSStyleDeclaration
+) => number
+export declare const calcElementLayout: (
+  element: Element
+) => 'vertical' | 'horizontal'
+export declare const calcElementTranslate: (element: HTMLElement) => Point
+export declare const calcElementRotate: (element: HTMLElement) => number
+export declare const calcElementScale: (element: HTMLElement) => number

package/lib/element.js

@@ -1,143 +1,149 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.calcElementScale = exports.calcElementRotate = exports.calcElementTranslate = exports.calcElementLayout = exports.calcElementOuterWidth = void 0;
-const coordinate_1 = require("./coordinate");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.calcElementScale =
+  exports.calcElementRotate =
+  exports.calcElementTranslate =
+  exports.calcElementLayout =
+  exports.calcElementOuterWidth =
+    void 0
+const coordinate_1 = require('./coordinate')
 const InlineLayoutTagNames = new Set([
-    'A',
-    'ABBR',
-    'ACRONYM',
-    'AUDIO',
-    'B',
-    'BDI',
-    'BDO',
-    'BIG',
-    'BR',
-    'BUTTON',
-    'CANVAS',
-    'CITE',
-    'CODE',
-    'DATA',
-    'DATALIST',
-    'DEL',
-    'DFN',
-    'EM',
-    'EMBED',
-    'I',
-    'IFRAME',
-    'IMG',
-    'INS',
-    'KBD',
-    'LABEL',
-    'MAP',
-    'MARK',
-    'METER',
-    'NOSCRIPT',
-    'OBJECT',
-    'OUTPUT',
-    'PICTURE',
-    'PROGRESS',
-    'Q',
-    'RUBY',
-    'S',
-    'SAMP',
-    'SELECT',
-    'SLOT',
-    'SMALL',
-    'STRONG',
-    'SUB',
-    'SUP',
-    'SVG',
-    'TEMPLATE',
-    'TEXTAREA',
-    'TIME',
-    'U',
-    'TT',
-    'VAR',
-    'VIDEO',
-    'WBR',
-    'INPUT',
-    'SPAN',
-]);
+  'A',
+  'ABBR',
+  'ACRONYM',
+  'AUDIO',
+  'B',
+  'BDI',
+  'BDO',
+  'BIG',
+  'BR',
+  'BUTTON',
+  'CANVAS',
+  'CITE',
+  'CODE',
+  'DATA',
+  'DATALIST',
+  'DEL',
+  'DFN',
+  'EM',
+  'EMBED',
+  'I',
+  'IFRAME',
+  'IMG',
+  'INS',
+  'KBD',
+  'LABEL',
+  'MAP',
+  'MARK',
+  'METER',
+  'NOSCRIPT',
+  'OBJECT',
+  'OUTPUT',
+  'PICTURE',
+  'PROGRESS',
+  'Q',
+  'RUBY',
+  'S',
+  'SAMP',
+  'SELECT',
+  'SLOT',
+  'SMALL',
+  'STRONG',
+  'SUB',
+  'SUP',
+  'SVG',
+  'TEMPLATE',
+  'TEXTAREA',
+  'TIME',
+  'U',
+  'TT',
+  'VAR',
+  'VIDEO',
+  'WBR',
+  'INPUT',
+  'SPAN',
+])
 const calcElementOuterWidth = (innerWidth, style) => {
-    return (innerWidth +
-        parseFloat(style.marginLeft) +
-        parseFloat(style.marginRight) +
-        parseFloat(style.paddingLeft) +
-        parseFloat(style.paddingRight) +
-        parseFloat(style.borderLeftWidth) +
-        parseFloat(style.borderRightWidth));
-};
-exports.calcElementOuterWidth = calcElementOuterWidth;
+  return (
+    innerWidth +
+    parseFloat(style.marginLeft) +
+    parseFloat(style.marginRight) +
+    parseFloat(style.paddingLeft) +
+    parseFloat(style.paddingRight) +
+    parseFloat(style.borderLeftWidth) +
+    parseFloat(style.borderRightWidth)
+  )
+}
+exports.calcElementOuterWidth = calcElementOuterWidth
 const calcElementLayout = (element) => {
-    if (!element)
-        return 'vertical';
-    const parent = element.parentElement;
-    if (!parent)
-        return 'vertical';
-    const tagName = element.tagName;
-    const parentTagName = parent.tagName;
-    const style = getComputedStyle(element);
-    const parentStyle = getComputedStyle(parent);
-    const isNotFullWidth = () => {
-        const innerWidth = element.getBoundingClientRect().width;
-        const outerWidth = (0, exports.calcElementOuterWidth)(innerWidth, style);
-        const parentInnerWidth = parent.getBoundingClientRect().width;
-        return outerWidth.toFixed(0) < parentInnerWidth.toFixed(0);
-    };
-    if (tagName === 'TH' || tagName === 'TD') {
-        if (parentTagName === 'TR')
-            return 'horizontal';
+  if (!element) return 'vertical'
+  const parent = element.parentElement
+  if (!parent) return 'vertical'
+  const tagName = element.tagName
+  const parentTagName = parent.tagName
+  const style = getComputedStyle(element)
+  const parentStyle = getComputedStyle(parent)
+  const isNotFullWidth = () => {
+    const innerWidth = element.getBoundingClientRect().width
+    const outerWidth = (0, exports.calcElementOuterWidth)(innerWidth, style)
+    const parentInnerWidth = parent.getBoundingClientRect().width
+    return outerWidth.toFixed(0) < parentInnerWidth.toFixed(0)
+  }
+  if (tagName === 'TH' || tagName === 'TD') {
+    if (parentTagName === 'TR') return 'horizontal'
+  }
+  if (parentStyle.display === 'flex' && parentStyle.flexDirection === 'row')
+    return 'horizontal'
+  if (parentStyle.display === 'grid') {
+    if (isNotFullWidth()) {
+      return 'horizontal'
     }
-    if (parentStyle.display === 'flex' && parentStyle.flexDirection === 'row')
-        return 'horizontal';
-    if (parentStyle.display === 'grid') {
+  }
+  if (InlineLayoutTagNames.has(tagName)) {
+    if (style.display === 'block') {
+      if (style.float === 'left' || style.float === 'right') {
         if (isNotFullWidth()) {
-            return 'horizontal';
+          return 'horizontal'
         }
+      }
+      return 'vertical'
     }
-    if (InlineLayoutTagNames.has(tagName)) {
-        if (style.display === 'block') {
-            if (style.float === 'left' || style.float === 'right') {
-                if (isNotFullWidth()) {
-                    return 'horizontal';
-                }
-            }
-            return 'vertical';
-        }
-        return 'horizontal';
-    }
-};
-exports.calcElementLayout = calcElementLayout;
+    return 'horizontal'
+  }
+}
+exports.calcElementLayout = calcElementLayout
 const calcElementTranslate = (element) => {
-    const transform = element?.style?.transform;
-    if (transform) {
-        const [x, y] = transform
-            .match(/translate(?:3d)?\(\s*([-\d.]+)[a-z]+?[\s,]+([-\d.]+)[a-z]+?(?:[\s,]+([-\d.]+))?[a-z]+?\s*\)/)
-            ?.slice(1, 3) ?? [0, 0];
-        return new coordinate_1.Point(Number(x), Number(y));
-    }
-    else {
-        return new coordinate_1.Point(Number(element.offsetLeft), Number(element.offsetTop));
-    }
-};
-exports.calcElementTranslate = calcElementTranslate;
+  const transform = element?.style?.transform
+  if (transform) {
+    const [x, y] = transform
+      .match(
+        /translate(?:3d)?\(\s*([-\d.]+)[a-z]+?[\s,]+([-\d.]+)[a-z]+?(?:[\s,]+([-\d.]+))?[a-z]+?\s*\)/
+      )
+      ?.slice(1, 3) ?? [0, 0]
+    return new coordinate_1.Point(Number(x), Number(y))
+  } else {
+    return new coordinate_1.Point(
+      Number(element.offsetLeft),
+      Number(element.offsetTop)
+    )
+  }
+}
+exports.calcElementTranslate = calcElementTranslate
 const calcElementRotate = (element) => {
-    const transform = element?.style?.transform;
-    if (transform) {
-        return Number(transform.match(/rotate\(\s*([-\d.]+)/)?.[1] ?? 0);
-    }
-    else {
-        return 0;
-    }
-};
-exports.calcElementRotate = calcElementRotate;
+  const transform = element?.style?.transform
+  if (transform) {
+    return Number(transform.match(/rotate\(\s*([-\d.]+)/)?.[1] ?? 0)
+  } else {
+    return 0
+  }
+}
+exports.calcElementRotate = calcElementRotate
 const calcElementScale = (element) => {
-    const transform = element?.style?.transform;
-    if (transform) {
-        return Number(transform.match(/scale\(\s*([-\d.]+)/)?.[1] ?? 0);
-    }
-    else {
-        return 0;
-    }
-};
-exports.calcElementScale = calcElementScale;
+  const transform = element?.style?.transform
+  if (transform) {
+    return Number(transform.match(/scale\(\s*([-\d.]+)/)?.[1] ?? 0)
+  } else {
+    return 0
+  }
+}
+exports.calcElementScale = calcElementScale

package/lib/event.d.ts

@@ -1,96 +1,183 @@
-import { Subscribable, ISubscriber } from './subscribable';
-export type EventOptions = boolean | (AddEventListenerOptions & EventListenerOptions & {
-    mode?: 'onlyOne' | 'onlyParent' | 'onlyChild';
-});
-export type EventContainer = Window | HTMLElement | HTMLDocument;
-export type EventDriverContainer = HTMLElement | HTMLDocument;
+import { ISubscriber, Subscribable } from './subscribable'
+export type EventOptions =
+  | boolean
+  | (AddEventListenerOptions &
+      EventListenerOptions & {
+        mode?: 'onlyOne' | 'onlyParent' | 'onlyChild'
+      })
+export type EventContainer = Window | HTMLElement | HTMLDocument
+export type EventDriverContainer = HTMLElement | HTMLDocument
 export interface IEventEffect<T> {
-    (engine: T): void;
+  (engine: T): void
 }
 export interface IEventDriver {
-    container: EventDriverContainer;
-    contentWindow: Window;
-    attach(container: EventDriverContainer): void;
-    detach(container: EventDriverContainer): void;
-    dispatch<T extends ICustomEvent<any> = any>(event: T): void | boolean;
-    subscribe<T extends ICustomEvent<any> = any>(subscriber: ISubscriber<T>): void;
-    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventOptions): void;
-    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventOptions): void;
-    addEventListener(type: any, listener: any, options: any): void;
-    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventOptions): void;
-    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventOptions): void;
-    removeEventListener(type: any, listener: any, options?: any): void;
-    batchAddEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventOptions): void;
-    batchAddEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventOptions): void;
-    batchAddEventListener(type: any, listener: any, options?: any): void;
-    batchRemoveEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventOptions): void;
-    batchRemoveEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventOptions): void;
-    batchRemoveEventListener(type: any, listener: any, options: any): void;
+  container: EventDriverContainer
+  contentWindow: Window
+  attach(container: EventDriverContainer): void
+  detach(container: EventDriverContainer): void
+  dispatch<T extends ICustomEvent<any> = any>(event: T): void | boolean
+  subscribe<T extends ICustomEvent<any> = any>(subscriber: ISubscriber<T>): void
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | EventOptions
+  ): void
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventOptions
+  ): void
+  addEventListener(type: any, listener: any, options: any): void
+  removeEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | EventOptions
+  ): void
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventOptions
+  ): void
+  removeEventListener(type: any, listener: any, options?: any): void
+  batchAddEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | EventOptions
+  ): void
+  batchAddEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventOptions
+  ): void
+  batchAddEventListener(type: any, listener: any, options?: any): void
+  batchRemoveEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | EventOptions
+  ): void
+  batchRemoveEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventOptions
+  ): void
+  batchRemoveEventListener(type: any, listener: any, options: any): void
 }
 export interface IEventDriverClass<T> {
-    new (engine: T, context?: any): IEventDriver;
+  new (engine: T, context?: any): IEventDriver
 }
 export interface ICustomEvent<EventData = any, EventContext = any> {
-    type: string;
-    data?: EventData;
-    context?: EventContext;
+  type: string
+  data?: EventData
+  context?: EventContext
 }
 export interface CustomEventClass {
-    new (...args: any[]): any;
+  new (...args: any[]): any
 }
 export interface IEventProps<T = Event> {
-    drivers?: IEventDriverClass<T>[];
-    effects?: IEventEffect<T>[];
+  drivers?: IEventDriverClass<T>[]
+  effects?: IEventEffect<T>[]
 }
 /**
  * 事件驱动器基类
  */
-export declare class EventDriver<Engine extends Event = Event, Context = any> implements IEventDriver {
-    engine: Engine;
-    container: EventDriverContainer;
-    contentWindow: Window;
-    context: Context;
-    constructor(engine: Engine, context?: Context);
-    dispatch<T extends ICustomEvent<any> = any>(event: T): boolean;
-    subscribe<T extends ICustomEvent<any> = any>(subscriber: ISubscriber<T>): {
-        (): void;
-        [UNSUBSCRIBE_ID_SYMBOL]: number;
-    };
-    subscribeTo<T extends CustomEventClass>(type: T, subscriber: ISubscriber<InstanceType<T>>): {
-        (): void;
-        [UNSUBSCRIBE_ID_SYMBOL]: number;
-    };
-    subscribeWith<T extends ICustomEvent = ICustomEvent>(type: string | string[], subscriber: ISubscriber<T>): {
-        (): void;
-        [UNSUBSCRIBE_ID_SYMBOL]: number;
-    };
-    attach(container: EventDriverContainer): void;
-    detach(container: EventDriverContainer): void;
-    eventTarget(type: string): Window | EventDriverContainer;
-    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventOptions): void;
-    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventOptions): void;
-    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventOptions): void;
-    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventOptions): void;
-    batchAddEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventOptions): void;
-    batchAddEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventOptions): void;
-    batchRemoveEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventOptions): void;
-    batchRemoveEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventOptions): void;
+export declare class EventDriver<Engine extends Event = Event, Context = any>
+  implements IEventDriver
+{
+  engine: Engine
+  container: EventDriverContainer
+  contentWindow: Window
+  context: Context
+  constructor(engine: Engine, context?: Context)
+  dispatch<T extends ICustomEvent<any> = any>(event: T): boolean
+  subscribe<T extends ICustomEvent<any> = any>(
+    subscriber: ISubscriber<T>
+  ): {
+    (): void
+    [UNSUBSCRIBE_ID_SYMBOL]: number
+  }
+  subscribeTo<T extends CustomEventClass>(
+    type: T,
+    subscriber: ISubscriber<InstanceType<T>>
+  ): {
+    (): void
+    [UNSUBSCRIBE_ID_SYMBOL]: number
+  }
+  subscribeWith<T extends ICustomEvent = ICustomEvent>(
+    type: string | string[],
+    subscriber: ISubscriber<T>
+  ): {
+    (): void
+    [UNSUBSCRIBE_ID_SYMBOL]: number
+  }
+  attach(container: EventDriverContainer): void
+  detach(container: EventDriverContainer): void
+  eventTarget(type: string): Window | EventDriverContainer
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | EventOptions
+  ): void
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventOptions
+  ): void
+  removeEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | EventOptions
+  ): void
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventOptions
+  ): void
+  batchAddEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | EventOptions
+  ): void
+  batchAddEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventOptions
+  ): void
+  batchRemoveEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | EventOptions
+  ): void
+  batchRemoveEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventOptions
+  ): void
 }
 /**
  * 事件引擎
  */
 export declare class Event extends Subscribable<ICustomEvent<any>> {
-    private drivers;
-    private containers;
-    constructor(props?: IEventProps);
-    subscribeTo<T extends CustomEventClass>(type: T, subscriber: ISubscriber<InstanceType<T>>): {
-        (): void;
-        [UNSUBSCRIBE_ID_SYMBOL]: number;
-    };
-    subscribeWith<T extends ICustomEvent = ICustomEvent>(type: string | string[], subscriber: ISubscriber<T>): {
-        (): void;
-        [UNSUBSCRIBE_ID_SYMBOL]: number;
-    };
-    attachEvents(container: EventContainer, contentWindow?: Window, context?: any): any;
-    detachEvents(container?: EventContainer): any;
+  private drivers
+  private containers
+  constructor(props?: IEventProps)
+  subscribeTo<T extends CustomEventClass>(
+    type: T,
+    subscriber: ISubscriber<InstanceType<T>>
+  ): {
+    (): void
+    [UNSUBSCRIBE_ID_SYMBOL]: number
+  }
+  subscribeWith<T extends ICustomEvent = ICustomEvent>(
+    type: string | string[],
+    subscriber: ISubscriber<T>
+  ): {
+    (): void
+    [UNSUBSCRIBE_ID_SYMBOL]: number
+  }
+  attachEvents(
+    container: EventContainer,
+    contentWindow?: Window,
+    context?: any
+  ): any
+  detachEvents(container?: EventContainer): any
 }