pxd 0.0.64 → 0.1.3

package/dist/plugins/any-touch.js

@@ -1,592 +0,0 @@
-const STATE = {
-  POSSIBLE: 0,
-  RECOGNIZED: 1,
-  FAILED: 2,
-  CANCELLED: 3,
-  START: 4,
-  MOVE: 5,
-  END: 1
-};
-const CLIENT_X = "clientX";
-const CLIENT_Y = "clientY";
-const PHASE_START = "start";
-const DIRECTION_LEFT = "left";
-const DIRECTION_RIGHT = "right";
-const DIRECTION_DOWN = "down";
-const STATE_MAP = {
-  [STATE.START]: "start",
-  [STATE.MOVE]: "move",
-  [STATE.END]: "end",
-  [STATE.CANCELLED]: "cancel"
-};
-const TOUCH_EVENTS = ["touchstart", "touchmove", "touchend", "touchcancel", "mousedown"];
-const MOUSE_EVENTS = ["mousemove", "mouseup"];
-const DEFAULT_OPTIONS = {
-  domEvents: { bubbles: true, cancelable: true },
-  preventDefault: (e) => {
-    if (e.target && "tagName" in e.target) {
-      const { tagName } = e.target;
-      return !/^(?:INPUT|TEXTAREA|BUTTON|SELECT)$/.test(tagName);
-    }
-    return false;
-  }
-};
-const PAN_DEFAULT_OPTIONS = {
-  name: "pan",
-  threshold: 10,
-  pointLength: 1
-};
-function stateToPhase(state) {
-  return STATE_MAP[state];
-}
-function computeFSM(isRecognized, state, phase) {
-  const table = {
-    // 已识别
-    1: {
-      0: { move: STATE.START },
-      4: { move: STATE.MOVE, end: STATE.END, cancel: STATE.CANCELLED },
-      5: { move: STATE.MOVE, end: STATE.END, cancel: STATE.CANCELLED }
-    },
-    // 未识别
-    0: {
-      4: { move: STATE.RECOGNIZED, end: STATE.END, cancel: STATE.CANCELLED },
-      5: {
-        start: STATE.RECOGNIZED,
-        move: STATE.RECOGNIZED,
-        end: STATE.END,
-        cancel: STATE.CANCELLED
-      }
-    }
-  };
-  const transitions = table[Number(isRecognized)]?.[state];
-  return transitions !== void 0 && transitions[phase] || 0;
-}
-function resetIfTerminalState(context) {
-  if ([STATE.END, STATE.CANCELLED, STATE.FAILED].includes(context.state)) {
-    context.state = STATE.POSSIBLE;
-  }
-}
-function isEndOrCancelState(state) {
-  return [STATE.MOVE, STATE.END, STATE.CANCELLED].includes(state);
-}
-function abortIfDisabled(context) {
-  if (context.disabled) {
-    context.state = STATE.POSSIBLE;
-    return true;
-  }
-}
-function createPluginContext(defaults, options) {
-  return { ...defaults, ...options, state: STATE.POSSIBLE, disabled: false };
-}
-function vectorLength(v) {
-  return Math.sqrt(v.x * v.x + v.y * v.y);
-}
-function radToDeg(rad) {
-  return rad / Math.PI * 180;
-}
-function computeDirection(deltaX, deltaY) {
-  if (deltaX !== 0 || deltaY !== 0) {
-    return Math.abs(deltaX) >= Math.abs(deltaY) ? deltaX > 0 ? DIRECTION_RIGHT : DIRECTION_LEFT : deltaY > 0 ? DIRECTION_DOWN : "up";
-  }
-}
-class AnyEvent {
-  __map = {};
-  __interceptor;
-  /** 当前事件对象 */
-  event;
-  /** 注册拦截器 */
-  beforeEach(interceptor) {
-    this.__interceptor = interceptor;
-  }
-  /** 绑定事件 */
-  on(typeOrTypes, listener) {
-    const types = Array.isArray(typeOrTypes) ? typeOrTypes : [typeOrTypes];
-    for (const type of types) {
-      this.__map[type] = this.__map[type] || [];
-      const list = this.__map[type];
-      if (list) {
-        list.push(listener);
-      }
-    }
-    return this;
-  }
-  /** 触发事件 */
-  emit(type, payload, callback) {
-    if (this.__interceptor === void 0) {
-      this.__doEmit(type, payload);
-      callback?.();
-    } else {
-      this.__interceptor(type, () => {
-        this.__doEmit(type, payload);
-        callback?.();
-      });
-    }
-  }
-  __doEmit(type, payload) {
-    const list = this.__map[type];
-    if (Array.isArray(list) && list?.length) {
-      for (const listener of list) {
-        listener(payload, type);
-      }
-    }
-    this.event = payload;
-  }
-  /** 解除绑定 */
-  off(type, listener) {
-    const list = this.__map[type];
-    if (list !== void 0) {
-      if (listener === void 0) {
-        delete this.__map[type];
-      } else {
-        const index = list.findIndex((l) => l === listener);
-        list.splice(index, 1);
-      }
-    }
-  }
-  /** 销毁实例 */
-  destroy() {
-    this.__map = {};
-  }
-}
-function getCenter(points) {
-  const { length } = points;
-  if (length > 0) {
-    if (length === 1) {
-      const { clientX, clientY } = points[0];
-      return { x: Math.round(clientX), y: Math.round(clientY) };
-    }
-    const sum = points.reduce(
-      (acc, p) => {
-        acc.x += p[CLIENT_X];
-        acc.y += p[CLIENT_Y];
-        return acc;
-      },
-      { x: 0, y: 0 }
-    );
-    return { x: Math.round(sum.x / length), y: Math.round(sum.y / length) };
-  }
-}
-function createInputCreator() {
-  let prevInput;
-  let currentInput;
-  let startInput;
-  let startMultiInput;
-  let id = 0;
-  return function(rawInput) {
-    prevInput = currentInput;
-    if (rawInput !== void 0) {
-      id = Number.MAX_SAFE_INTEGER > id ? ++id : 1;
-      const enriched = enrichInput(rawInput, id);
-      currentInput = enriched;
-      const { isStart, pointLength } = enriched;
-      if (isStart) {
-        startInput = enriched;
-        prevInput = void 0;
-        startMultiInput = pointLength > 1 ? enriched : void 0;
-      }
-      return {
-        ...enriched,
-        prevInput,
-        startMultiInput,
-        startInput
-      };
-    }
-  };
-}
-function enrichInput(rawInput, id) {
-  const { phase, points, changedPoints, nativeEvent } = rawInput;
-  const pointLength = points.length;
-  const isStart = PHASE_START === phase;
-  const isEnd = phase === "end" && pointLength === 0 || phase === "cancel";
-  const timestamp = Date.now();
-  const center = getCenter(points) || getCenter(changedPoints);
-  const { currentTarget } = nativeEvent;
-  return Object.assign(rawInput, {
-    id,
-    x: center.x,
-    y: center.y,
-    timestamp,
-    isStart,
-    isEnd,
-    pointLength,
-    currentTarget,
-    getOffset(el = currentTarget) {
-      const rect = el.getBoundingClientRect();
-      return {
-        x: center.x - Math.round(rect.left),
-        y: center.y - Math.round(rect.top)
-      };
-    }
-  });
-}
-function createTouchInputCreator(el) {
-  const inputCreator = createInputCreator();
-  return function(event) {
-    const targets = [];
-    const points = [];
-    Array.from(event.touches).forEach(({ clientX, clientY, target }) => {
-      if (el?.contains(target)) {
-        targets.push(target);
-        points.push({ clientX, clientY, target });
-      }
-    });
-    const changedPoints = Array.from(event.changedTouches).map(({ clientX, clientY, target }) => ({
-      clientX,
-      clientY,
-      target
-    }));
-    return inputCreator({
-      phase: event.type.replace("touch", ""),
-      changedPoints,
-      points,
-      nativeEvent: event,
-      target: event.target,
-      targets
-    });
-  };
-}
-function createMouseInputCreator() {
-  let prevPoint;
-  let isMouseDown = false;
-  let mouseTarget = null;
-  const inputCreator = createInputCreator();
-  return function(event) {
-    const { clientX, clientY, type, button, target } = event;
-    let phaseStr;
-    let points = [{ clientX, clientY, target }];
-    if (type === "mousedown" && button === 0) {
-      mouseTarget = target;
-      isMouseDown = true;
-      phaseStr = "start";
-    } else {
-      if (!isMouseDown) {
-        return;
-      }
-      if (type === "mousemove") {
-        phaseStr = "move";
-      } else if (type === "mouseup") {
-        points = [];
-        phaseStr = "end";
-        isMouseDown = false;
-      }
-    }
-    const changedPoints = prevPoint || [{ clientX, clientY, target }];
-    prevPoint = [{ clientX, clientY, target }];
-    if (phaseStr !== void 0) {
-      return inputCreator({
-        phase: phaseStr,
-        changedPoints,
-        points,
-        target: mouseTarget,
-        targets: [mouseTarget],
-        nativeEvent: event
-      });
-    }
-  };
-}
-function dispatchDomEvent(type, el, computed, eventInit) {
-  const payload = {};
-  for (const key in computed) {
-    if (!["target", "currentTarget", "type"].includes(key)) {
-      payload[key] = computed[key];
-    }
-  }
-  let event;
-  if (document.createEvent) {
-    event = document.createEvent("HTMLEvents");
-    event.initEvent(type, eventInit?.bubbles, eventInit?.cancelable);
-  } else {
-    event = new Event(type, eventInit);
-  }
-  Object.assign(event, payload, {
-    match: () => computed.targets && computed.targets.length > 0 && computed.targets.every(
-      (t) => event.currentTarget.contains(t)
-    )
-  });
-  return el.dispatchEvent(event);
-}
-function shouldPreventDefault(e, options) {
-  const { preventDefault } = options;
-  if (typeof preventDefault === "function") {
-    return preventDefault(e);
-  }
-  return !!preventDefault;
-}
-class Core extends AnyEvent {
-  /** 版本 */
-  v = "2.1.3";
-  /** 当前绑定元素 */
-  el;
-  /** 当前插件上下文 */
-  c;
-  __options;
-  __inputCreatorMap;
-  __computeFunctionList = [];
-  __computeFunctionCreatorList = [];
-  __pluginContexts = [];
-  __isIgnoreMouse = false;
-  constructor(el, options) {
-    super();
-    this.el = el;
-    this.c = {};
-    this.__options = { ...DEFAULT_OPTIONS, ...options };
-    const touchInputCreator = createTouchInputCreator(this.el);
-    const mouseInputCreator = createMouseInputCreator();
-    this.__inputCreatorMap = {
-      touchstart: touchInputCreator,
-      touchmove: touchInputCreator,
-      touchend: touchInputCreator,
-      touchcancel: touchInputCreator,
-      mousedown: mouseInputCreator,
-      mousemove: mouseInputCreator,
-      mouseup: mouseInputCreator
-    };
-    this.on("at:after", (e) => {
-      const { target, __type } = e;
-      const { domEvents } = this.__options;
-      if (domEvents && this.el !== void 0 && target) {
-        dispatchDomEvent(__type, target, e, domEvents);
-        dispatchDomEvent("at:after", target, e, domEvents);
-      }
-    });
-    if (el !== void 0) {
-      ;
-      el.style.webkitTapHighlightColor = "rgba(0,0,0,0)";
-      let supportsPassive = false;
-      try {
-        const opts = {};
-        Object.defineProperty(opts, "passive", {
-          get() {
-            supportsPassive = true;
-          }
-        });
-        window.addEventListener("_", () => {
-        }, opts);
-      } catch {
-      }
-      this.on(
-        "u",
-        bindEvents(
-          el,
-          this.catchEvent.bind(this),
-          this.__options.preventDefault === false && supportsPassive ? { passive: true } : { passive: false }
-        )
-      );
-    }
-  }
-  /** 加载并初始化插件 */
-  use(plugin, pluginOptions) {
-    this.__pluginContexts.push(plugin(this, pluginOptions));
-  }
-  /** 监听input变化 */
-  catchEvent(event) {
-    const input = this.__inputCreatorMap[event.type](event);
-    if (input !== void 0) {
-      const stopPropagation = () => event.stopPropagation();
-      const stopImmediatePropagation = () => event.stopImmediatePropagation();
-      const preventDefault = () => event.preventDefault();
-      if (shouldPreventDefault(event, this.__options)) {
-        preventDefault();
-      } else if (event.type === "touchstart") {
-        this.__isIgnoreMouse = true;
-      } else if (event.type === "touchmove") {
-        this.__isIgnoreMouse = false;
-      }
-      if (this.__isIgnoreMouse && event.type.startsWith("mouse")) {
-        if (event.type === "mouseup") {
-          this.__isIgnoreMouse = false;
-        }
-        return;
-      }
-      this.emit("input", input);
-      this.emit2(`at:${input.phase}`, input, {});
-      const computed = {};
-      this.__computeFunctionList.forEach((fn) => {
-        const result = fn(input, computed);
-        if (result !== void 0) {
-          for (const key in result) {
-            computed[key] = result[key];
-          }
-        }
-      });
-      this.emit("computed", {
-        ...input,
-        ...computed,
-        stopPropagation,
-        stopImmediatePropagation,
-        preventDefault
-      });
-    }
-  }
-  /** 缓存计算函数生成器到队列 */
-  compute(computeFunctionCreatorList, callback) {
-    for (const creator of computeFunctionCreatorList) {
-      if (!this.__computeFunctionCreatorList.includes(creator)) {
-        this.__computeFunctionCreatorList.push(creator);
-        this.__computeFunctionList.push(creator());
-      }
-    }
-    this.on("computed", callback);
-  }
-  /** 拦截器 */
-  beforeEach(interceptor) {
-    super.beforeEach((type, next) => {
-      if (this.c?.name) {
-        interceptor(type, next);
-      } else {
-        next();
-      }
-    });
-  }
-  /** 获取识别器通过名字 */
-  get(name) {
-    return this.__pluginContexts.find((ctx) => name === ctx.name);
-  }
-  /** 设置选项 */
-  set(newOptions) {
-    this.__options = { ...this.__options, ...newOptions };
-  }
-  /** 带DOM事件的emit */
-  emit2(type, payload, pluginContext) {
-    this.c = pluginContext;
-    this.emit(type, { ...payload, type }, () => {
-      this.emit(
-        "at:after",
-        {
-          ...payload,
-          name: type,
-          __type: type
-        }
-      );
-    });
-  }
-  /** 销毁 */
-  destroy() {
-    this.emit("u");
-    super.destroy();
-  }
-}
-function bindEvents(el, handler, options) {
-  TOUCH_EVENTS.forEach((type) => {
-    el.addEventListener(type, handler, options);
-  });
-  MOUSE_EVENTS.forEach((type) => {
-    window.addEventListener(type, handler, options);
-  });
-  return () => {
-    TOUCH_EVENTS.forEach((type) => {
-      el.removeEventListener(type, handler);
-    });
-    MOUSE_EVENTS.forEach((type) => {
-      window.removeEventListener(type, handler);
-    });
-  };
-}
-function createComputeDeltaXY() {
-  return function(input) {
-    const { prevInput } = input;
-    let deltaX = 0;
-    let deltaY = 0;
-    let deltaXYAngle = 0;
-    if (prevInput !== void 0) {
-      deltaX = input.x - prevInput.x;
-      deltaY = input.y - prevInput.y;
-      if (deltaX !== 0 || deltaY !== 0) {
-        const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2);
-        deltaXYAngle = Math.round(radToDeg(Math.acos(Math.abs(deltaX) / distance)));
-      }
-    }
-    return { deltaX, deltaY, deltaXYAngle };
-  };
-}
-function createComputeDistance() {
-  let overallDirection;
-  let displacementX = 0;
-  let displacementY = 0;
-  let distanceX = 0;
-  let distanceY = 0;
-  let distance = 0;
-  return function(input) {
-    const { phase, startInput } = input;
-    if (phase === "start") {
-      displacementX = 0;
-      displacementY = 0;
-      distanceX = 0;
-      distanceY = 0;
-      distance = 0;
-    } else if (phase === "move") {
-      displacementX = Math.round(input.points[0].clientX - startInput.points[0].clientX);
-      displacementY = Math.round(input.points[0].clientY - startInput.points[0].clientY);
-      distanceX = Math.abs(displacementX);
-      distanceY = Math.abs(displacementY);
-      distance = Math.round(vectorLength({ x: distanceX, y: distanceY }));
-      overallDirection = computeDirection(displacementX, displacementY);
-    }
-    return {
-      displacementX,
-      displacementY,
-      distanceX,
-      distanceY,
-      distance,
-      overallDirection
-    };
-  };
-}
-function createComputeVelocity() {
-  let direction;
-  let lastRecordInput;
-  let velocityX = 0;
-  let velocityY = 0;
-  let speedX = 0;
-  let speedY = 0;
-  return function(input) {
-    if (input !== void 0) {
-      lastRecordInput ||= input.startInput;
-      const deltaTime = input.timestamp - lastRecordInput.timestamp;
-      if (deltaTime > 16) {
-        const deltaX = input.x - lastRecordInput.x;
-        const deltaY = input.y - lastRecordInput.y;
-        speedX = Math.round(deltaX / deltaTime * 100) / 100;
-        speedY = Math.round(deltaY / deltaTime * 100) / 100;
-        velocityX = Math.abs(speedX);
-        velocityY = Math.abs(speedY);
-        direction = computeDirection(deltaX, deltaY);
-        lastRecordInput = input;
-      }
-    }
-    return {
-      velocityX,
-      velocityY,
-      speedX,
-      speedY,
-      direction
-    };
-  };
-}
-function Pan(at, options) {
-  const context = createPluginContext(PAN_DEFAULT_OPTIONS, options);
-  at.compute(
-    [createComputeVelocity, createComputeDistance, createComputeDeltaXY],
-    (computed) => {
-      resetIfTerminalState(context);
-      if (abortIfDisabled(context)) {
-        return;
-      }
-      const isRecognized = (function() {
-        const { pointLength, distance } = computed;
-        return context.pointLength === pointLength && context.threshold <= distance;
-      })();
-      context.state = computeFSM(isRecognized, context.state, computed.phase);
-      if (isRecognized || isEndOrCancelState(context.state)) {
-        const { name } = context;
-        at.emit2(name, computed, context);
-        at.emit2(name + stateToPhase(context.state), computed, context);
-        if (!["end", "cancel"].includes(computed.phase) && computed.direction) {
-          at.emit2(name + computed.direction, computed, context);
-        }
-      }
-    }
-  );
-  return context;
-}
-export { Core, Pan };