rc-touchlayer v0.1.4

rc-touchlayer

问题反馈: chzh314@hotmail.com

派生自 @ke/touchlayer

 将触摸事件、鼠标事件和触摸板/精确式滚轮/滚轮事件合并为用户行为进行反馈的交互统一层

使用示例

import React, { useState } from "react";
import TouchLayer, { TouchLayerEvent } from "rc-touchlayer";
export default function App() {
  const [x, setX] = React.useState(0);
  const [y, setY] = React.useState(0);
  const [scale, setScale] = React.useState(1);
  const [rotate, setRotate] = useState(0);
  return (
    <TouchLayer
      onDrag={(e:TouchLayerEvent) => {
        setX(Math.max(0, Math.min(window.innerWidth - 50, x + e.deltaX)));
        setY(Math.max(0, Math.min(window.innerHeight - 50, y + e.deltaY)));
        console.log(e);
      }}
      onZoom={(e:TouchLayerEvent) => {
        console.log(e);
        setScale(Math.max(0.3, Math.min(10, scale + e.deltaZ / 50)));
        setRotate(rotate + e.deltaW);
      }}
      wheelX //用于支持滚轮和触摸板的横向滚动
      wheelY //用于支持滚轮和触摸板的纵向滚动
    >
      <div className="test-cover">
        <div
          style={{
            width: 50,
            height: 50,
            background: "#fff",
            transform: `translate(${x}px,${y}px) rotate(${rotate}rad) scale(${scale}) `,
          }}
        ></div>
      </div>
    </TouchLayer>
  );
}

可使用的事件

所有用户操作都会以onOperate的jsx参数属性回调形式向外传递事件，所有事件都符合TouchLayerEvent（见表2）类型定义，同时每种事件也会有自己独特的jsx参数如onDrag提供开发者使用。

• 表1 :TouchLayerEventType枚举定义 - 事件参照表

• 表1.1 : TouchLayerOperateMode枚举定义 - 用户操作模式

• 表1.2 : TouchLayerInputType枚举定义 - 用户输入模式

• 表2 : TouchLayerEvent类型定义

所有JSX参数

interface TouchLayerProps {
  /**
   * 全局事件监听
   */
  onOperate?: (event: TouchLayerEvent) => void;
  /**
   * 点击事件
   */
  onClick?: (event: TouchLayerEvent) => void;
  /**
   * 双击事件
   */
  onDoubleClick?: (event: TouchLayerEvent) => void;
  /**
   * 双击判定时间间隔 单位ms
   * 默认值200 ms
   */
  doubleClickGap?: number;
  /**
   * 每次用户输入都反馈事件，不再按帧合并（性能降低，但反应变快）
   */
  eachTick?: boolean;
  /**
   * 输入平滑过滤参数 0~1 值越小效果越平滑，同时滞后感越强
   */
  inputFilter?: number;
  /**
   * 开始拖拽
   */
  onDragStart?: (event: TouchLayerEvent) => void;
  /**
   * 拖拽动作
   */
  onDrag?: (event: TouchLayerEvent) => void;
  /**
   * 拖拽结束
   */
  onDragEnd?: (event: TouchLayerEvent) => void;
  /**
   * 惯性运动结束，注意，该方法会在onDragEnd后触发，无论是否开启惯性模拟。当前惯性模拟被其他输入打断后，该次运动不会触发本事件
   */
  onInertanceEnd?: (event: TouchLayerEvent) => void;
  /**
   * 关闭惯性模拟
   */
  noInertance?: boolean;
  /**
   * 开始长按
   */
  onLongtapStart?: (event: TouchLayerEvent) => void;
  /**
   * 结束长按
   */
  onLongtapEnd?: (event: TouchLayerEvent) => void;
  /**
   * 监听鼠标中键按下
   */
  useMouseMiddleButton?: boolean;
  /**
   * 监听鼠标右键按下
   */
  useMouseRightButton?: boolean;
  /**
   * 监听横向滚轮、横向触摸板事件
   */
  wheelX?: boolean;
  /**
   * 监听纵向滚轮、纵向触摸板事件
   */
  wheelY?: boolean;
  /**
   * 反转滚轮X输入
   */
  flipWheelX?: boolean;
  /**
   * 反转滚轮的Y输入
   */
  flipWheelY?: boolean;
  /**
   * 滚轮不需要按住metaKey直接触发缩放
   */
  wheelZoom?: boolean;
  /**
   * 开始缩放
   */
  onZoomStart?: (event: TouchLayerEvent) => void;
  /**
   * 缩放动作
   */
  onZoom?: (event: TouchLayerEvent) => void;
  /**
   * 缩放结束
   */
  onZoomEnd?: (event: TouchLayerEvent) => void;
  /**
   * 禁止缩放时拖拽
   */
  noZoomMove?: boolean;
  noEnableCheck?: boolean;

  /**
   * 禁止缩放结束后拖拽
   */
  noHandlerDownlevel?: boolean;

  preventDefault?: boolean;
  stopPropagation?: boolean;
  stopPropagationCapture?: boolean;

  /**
   * 防止错误输入事件传递的遮罩层的zIndex
   */
  maskZIndex?: number;

  /**
   * dataset-type黑名单，用于保护特定子元素的交互，在该元素上的交互不会触发touchlayer事件
   */
  preventElementDataType?: string;
  /**
   * 该touchlayer内部的其他touchlayer上的事件不会传递到该层上
   */
  preventOtherTouchLayer?: boolean;

  style?: React.CSSProperties;
  className?: string;
}