Merge pull request #20 from orca-team/dev_lzh

feat：usePan 兼容 touch 事件
orca-team · May 13, 2024 · 438070f · 438070f
2 parents dc917f7 + 2dc6f86
commit 438070f
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 9 deletions.
diff --git a/.changeset/lazy-gorillas-drive.md b/.changeset/lazy-gorillas-drive.md
@@ -0,0 +1,6 @@
+---
+"@orca-fe/transformer": patch
+"@orca-fe/hooks": patch
+---
+
+PDF 新增的图片兼容 touch 事件
diff --git a/.changeset/wild-pants-flash.md b/.changeset/wild-pants-flash.md
@@ -0,0 +1,6 @@
+---
+"@orca-fe/transformer": patch
+"@orca-fe/hooks": patch
+---
+
+更新版本
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@orca-fe/hooks",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "description": "React Hooks Collections",
   "keywords": [
     "react",

diff --git a/packages/hooks/src/usePan.ts b/packages/hooks/src/usePan.ts
@@ -19,7 +19,7 @@ export type UsePanCallbackParams = {
   start: boolean;
 
   /** 触发拖动事件的鼠标事件 */
-  ev: MouseEvent;
+  ev: MouseEvent | TouchEvent;
 
   /** 触发拖动事件的 HTML 元素 */
   target: HTMLElement;
@@ -64,6 +64,33 @@ export default function usePan<T extends Target = Target>(
     { target },
   );
 
+  useEventListener(
+    'touchstart',
+    (e) => {
+      e.preventDefault(); // 阻止默认的触摸行为，如页面滚动
+      _this.mousedownPosition = [e.touches[0].clientX, e.touches[0].clientY];
+      _this.target = e.currentTarget as HTMLElement;
+      _this.triggerTarget = e.target as HTMLElement;
+      const bounds = _this.target.getBoundingClientRect();
+      const { left, top } = bounds;
+      const res = callback({
+        start: true,
+        finish: false,
+        startPosition: [_this.mousedownPosition[0] - left, _this.mousedownPosition[1] - top],
+        offset: [0, 0],
+        ev: e,
+        target: _this.triggerTarget,
+        bounds,
+      });
+      if (res === false) {
+        _this.mousedownPosition = undefined;
+        _this.target = undefined;
+        _this.triggerTarget = undefined;
+      }
+    },
+    { target },
+  );
+
   useEventListener('mousemove', (e) => {
     if (_this.mousedownPosition && _this.target && _this.triggerTarget) {
       const offsetX = e.clientX - _this.mousedownPosition[0];
@@ -87,6 +114,33 @@ export default function usePan<T extends Target = Target>(
     }
   });
 
+  useEventListener(
+    'touchmove',
+    (e) => {
+      if (_this.mousedownPosition && _this.target && _this.triggerTarget) {
+        const offsetX = e.touches[0].clientX - _this.mousedownPosition[0];
+        const offsetY = e.touches[0].clientY - _this.mousedownPosition[1];
+        const bounds = _this.target.getBoundingClientRect();
+        const { left, top } = bounds;
+        const res = callback({
+          start: false,
+          finish: false,
+          startPosition: [_this.mousedownPosition[0] - left, _this.mousedownPosition[1] - top],
+          offset: [offsetX, offsetY],
+          ev: e,
+          target: _this.triggerTarget,
+          bounds,
+        });
+        if (res === false) {
+          _this.mousedownPosition = undefined;
+          _this.target = undefined;
+          _this.triggerTarget = undefined;
+        }
+      }
+    },
+    { passive: false }, // 对于 touchmove，阻止默认的 passive 模式以允许阻止滚动
+  );
+
   useEventListener('mouseup', (e) => {
     if (_this.mousedownPosition && _this.target && _this.triggerTarget) {
       const offsetX = e.clientX - _this.mousedownPosition[0];
@@ -105,4 +159,27 @@ export default function usePan<T extends Target = Target>(
       _this.mousedownPosition = undefined;
     }
   });
+
+  useEventListener(
+    'touchend',
+    (e) => {
+      if (_this.mousedownPosition && _this.target && _this.triggerTarget) {
+        const offsetX = e.changedTouches[0].clientX - _this.mousedownPosition[0];
+        const offsetY = e.changedTouches[0].clientY - _this.mousedownPosition[1];
+        const bounds = _this.target.getBoundingClientRect();
+        const { left, top } = bounds;
+        callback({
+          start: false,
+          finish: true,
+          startPosition: [_this.mousedownPosition[0] - left, _this.mousedownPosition[1] - top],
+          offset: [offsetX, offsetY],
+          ev: e,
+          target: _this.triggerTarget,
+          bounds,
+        });
+        _this.mousedownPosition = undefined;
+      }
+    },
+    { target },
+  );
 }
diff --git a/packages/pocket/src/viewport-sensor-3d/ViewportSensor3d.tsx b/packages/pocket/src/viewport-sensor-3d/ViewportSensor3d.tsx
@@ -48,6 +48,7 @@ const ViewportSensor3d = (props: ViewportSensorProps) => {
   // console.log(viewport);
 
   usePan(({ start, startPosition, offset, ev, bounds }) => {
+    if (ev instanceof TouchEvent) return;
     if (start) {
       _this.button = ev.button;
       const viewport3d = new Viewport3d(viewport);

diff --git a/packages/transformer/package.json b/packages/transformer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@orca-fe/transformer",
-  "version": "0.3.30",
+  "version": "0.3.31",
   "description": "Transformer Container",
   "keywords": [
     "react",

diff --git a/packages/transformer/src/TransformerBox/TransformerBox.tsx b/packages/transformer/src/TransformerBox/TransformerBox.tsx
@@ -38,7 +38,7 @@ export interface TransformerBoxProps extends Omit<React.HTMLAttributes<HTMLDivEl
   onChangeStart?: (e: Event, type: ResizeType) => void;
 
   /** 拖动前的回调函数 */
-  onDragBefore?: (e: MouseEvent) => boolean;
+  onDragBefore?: (e: MouseEvent | TouchEvent) => boolean;
 
   /** Bounds信息变化时的回调函数 */
   onBoundsChange?: (bounds: Bounds) => void;
@@ -192,6 +192,7 @@ const TransformerBox = (props: TransformerBoxProps) => {
 
   const rootRef = useRef<HTMLDivElement>(null);
   usePan(({ target, start, startPosition, ev, offset, finish }) => {
+    // 兼容 touchEvent
     const currentPoint = getPointMapping(getPointByEvent(ev));
     if (start) {
       _this.distanceLock = true;

diff --git a/packages/transformer/src/TransformerBox/utils.ts b/packages/transformer/src/TransformerBox/utils.ts
@@ -374,7 +374,12 @@ export function calcLimitBounds(bounds: Bounds, limit?: Bounds) {
  * @param pointOffset 鼠标偏移
  * @param options
  */
-export const calcBoundsChangeBack = (startBounds: Bounds, _currentPoint: Point, pointOffset: Point, options: CalcPropsChangeOptions = {}): Partial<Bounds> => {
+export const calcBoundsChangeBack = (
+  startBounds: Bounds,
+  _currentPoint: Point,
+  pointOffset: Point,
+  options: CalcPropsChangeOptions = {},
+): Partial<Bounds> => {
   const { resizeType = 'move', eqRatio = false, symmetrical = false } = options;
   const { x, y } = pointOffset;
   const { top, left, width, height } = startBounds;
@@ -541,11 +546,19 @@ export const calcBoundsChangeBack = (startBounds: Bounds, _currentPoint: Point,
   return {};
 };
 
-export const getPointByEvent = (event: PointerEvent | MouseEvent) =>
-  ({
+export const getPointByEvent = (event: PointerEvent | MouseEvent | TouchEvent) => {
+  if (event instanceof TouchEvent) {
+    return {
+      x: event.touches?.[0]?.clientX,
+      y: event.touches?.[0]?.clientY,
+    };
+  }
+
+  return {
     x: event.pageX,
     y: event.pageY,
-  } as Point);
+  };
+};
 
 export const getPointOffset = (p1: Point, p2: Point) => ({
   x: p2.x - p1.x,

diff --git a/packages/transformer/src/TransformerLine/TransformerLine.tsx b/packages/transformer/src/TransformerLine/TransformerLine.tsx
@@ -38,7 +38,7 @@ export interface TransformerLineProps extends Omit<React.HTMLAttributes<HTMLDivE
   onChangeStart?: (e: Event) => void;
 
   /** 拖动前的回调函数 */
-  onDragBefore?: (e: MouseEvent) => boolean;
+  onDragBefore?: (e: MouseEvent | TouchEvent) => boolean;
 
   /** 点位信息(默认) */
   defaultPoints?: Point[];