feat: ViewportSensor 的 children 支持传入回调函数，用于去除默认的 div-root，改为渲染自定义 root

orca-team · Dec 25, 2023 · 768fa30 · 768fa30 · vercel · Dec 25, 2023
1 parent 83240e5
commit 768fa30
Show file tree

Hide file tree

Showing 14 changed files with 136 additions and 50 deletions.
diff --git a/packages/antd-plus/CHANGELOG.md b/packages/antd-plus/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @orca-fe/painter
 
+## 0.3.15
+
+### Patch Changes
+
+- Updated dependencies
+  - @orca-fe/pocket@3.4.0
+  - @orca-fe/hooks@1.11.0
+
 ## 0.3.14
 
 ### Patch Changes

diff --git a/packages/antd-plus/package.json b/packages/antd-plus/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@orca-fe/antd-plus",
-  "version": "0.3.14",
+  "version": "0.3.15",
   "description": "Transformer Container",
   "keywords": [
     "react",
@@ -36,9 +36,9 @@
     "clear": "rimraf lib es"
   },
   "dependencies": {
-    "@orca-fe/hooks": "^1.10.1",
+    "@orca-fe/hooks": "^1.11.0",
     "@orca-fe/jss-plugin-auto-prefix": "^0.0.1",
-    "@orca-fe/pocket": "^3.3.2",
+    "@orca-fe/pocket": "^3.4.0",
     "@orca-fe/simple-jss": "^0.0.3",
     "@orca-fe/tools": "^0.10.0",
     "ahooks": "^3.7.8",

diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @orca-fe/hooks
 
+## 1.11.0
+
+### Minor Changes
+
+- feat: ViewportSensor 的 children 支持传入回调函数，用于去除默认的 div-root，改为渲染自定义 root; useMergedRefs 支持非 hooks 调用
+
 ## 1.10.1
 
 ### Patch Changes

diff --git a/packages/hooks/package.json b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@orca-fe/hooks",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "description": "React Hooks Collections",
   "keywords": [
     "react",

diff --git a/packages/hooks/src/useMergedRefs.ts b/packages/hooks/src/useMergedRefs.ts
@@ -1,9 +1,7 @@
 import type React from 'react';
 import { useMemoizedFn } from 'ahooks';
 
-export default function useMergedRefs<T>(
-  ...refs: React.Ref<T>[]
-): React.RefCallback<T> {
+export default function useMergedRefs<T>(...refs: React.Ref<T>[]): React.RefCallback<T> {
   return useMemoizedFn((instance: T) => {
     refs.forEach((ref) => {
       if (typeof ref === 'function') {
@@ -15,3 +13,16 @@ export default function useMergedRefs<T>(
     });
   });
 }
+
+useMergedRefs.mergeRefs =
+  <T>(refs: React.Ref<T>[]) =>
+    (instance: T) => {
+      refs.forEach((ref) => {
+        if (typeof ref === 'function') {
+          ref(instance);
+        } else if (ref != null && typeof ref === 'object') {
+        // eslint-disable-next-line no-param-reassign
+          (ref as React.MutableRefObject<T>).current = instance;
+        }
+      });
+    };
diff --git a/packages/painter/CHANGELOG.md b/packages/painter/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @orca-fe/painter
 
+## 1.4.50
+
+### Patch Changes
+
+- Updated dependencies
+  - @orca-fe/pocket@3.4.0
+  - @orca-fe/hooks@1.11.0
+  - @orca-fe/transformer@0.3.28
+
 ## 1.4.49
 
 ### Patch Changes

diff --git a/packages/painter/package.json b/packages/painter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@orca-fe/painter",
-  "version": "1.4.49",
+  "version": "1.4.50",
   "description": "Konva Painter",
   "keywords": [
     "react",
@@ -37,17 +37,17 @@
     "clear": "rimraf lib es"
   },
   "dependencies": {
-    "@orca-fe/hooks": "^1.10.1",
+    "@orca-fe/hooks": "^1.11.0",
     "@orca-fe/jss-plugin-auto-prefix": "^0.0.1",
-    "@orca-fe/pocket": "^3.3.2",
+    "@orca-fe/pocket": "^3.4.0",
     "@orca-fe/simple-jss": "^0.0.3",
     "@orca-fe/tools": "^0.10.0",
     "ahooks": "^3.7.8",
     "classnames": "^2.3.2",
     "color": "^4.2.3",
     "react-colorful": "^5.6.1",
     "tslib": "^2.6.0",
-    "@orca-fe/transformer": "^0.3.27"
+    "@orca-fe/transformer": "^0.3.28"
   },
   "peerDependencies": {
     "@ant-design/icons": "^4.7.0",

diff --git a/packages/pdf-viewer/CHANGELOG.md b/packages/pdf-viewer/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @orca-fe/pdf-viewer
 
+## 1.21.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @orca-fe/pocket@3.4.0
+  - @orca-fe/hooks@1.11.0
+  - @orca-fe/painter@1.4.50
+
 ## 1.21.2
 
 ### Patch Changes

diff --git a/packages/pdf-viewer/package.json b/packages/pdf-viewer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@orca-fe/pdf-viewer",
-  "version": "1.21.2",
+  "version": "1.21.3",
   "description": "PDF Viewer",
   "keywords": [
     "react",
@@ -38,11 +38,11 @@
     "clear": "rimraf lib es"
   },
   "dependencies": {
-    "@orca-fe/hooks": "^1.10.1",
+    "@orca-fe/hooks": "^1.11.0",
     "@orca-fe/jss-plugin-auto-prefix": "^0.0.1",
-    "@orca-fe/painter": "^1.4.49",
+    "@orca-fe/painter": "^1.4.50",
     "@orca-fe/pdfjs-dist-browserify": "^3.8.24",
-    "@orca-fe/pocket": "^3.3.2",
+    "@orca-fe/pocket": "^3.4.0",
     "@orca-fe/simple-jss": "^0.0.3",
     "@orca-fe/tools": "^0.10.0",
     "ahooks": "^3.7.8",

diff --git a/packages/pocket/CHANGELOG.md b/packages/pocket/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @orca-fe/pocket
 
+## 3.4.0
+
+### Minor Changes
+
+- feat: ViewportSensor 的 children 支持传入回调函数，用于去除默认的 div-root，改为渲染自定义 root; useMergedRefs 支持非 hooks 调用
+
+### Patch Changes
+
+- Updated dependencies
+  - @orca-fe/hooks@1.11.0
+
 ## 3.3.2
 
 ### Patch Changes

diff --git a/packages/pocket/package.json b/packages/pocket/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@orca-fe/pocket",
-  "version": "3.3.2",
+  "version": "3.4.0",
   "description": "UI components by orca-team",
   "keywords": [
     "react",
@@ -39,7 +39,7 @@
     "clear": "rimraf lib es"
   },
   "dependencies": {
-    "@orca-fe/hooks": "^1.10.1",
+    "@orca-fe/hooks": "^1.11.0",
     "@orca-fe/jss-plugin-auto-prefix": "^0.0.1",
     "@orca-fe/tools": "^0.10.0",
     "@rc-component/trigger": "^1.13.3",

diff --git a/packages/pocket/src/viewport-sensor/ViewportSensor.tsx b/packages/pocket/src/viewport-sensor/ViewportSensor.tsx
@@ -1,3 +1,4 @@
+import type { ReactElement, RefObject } from 'react';
 import React, { useMemo, useRef, useState } from 'react';
 import { useControllableProps } from '@orca-fe/hooks';
 import { useEventListener, useMemoizedFn } from 'ahooks';
@@ -9,48 +10,75 @@ export const ViewportSensorContext = React.createContext<Viewport>({
   center: [0, 0],
 });
 
-export const GetViewportContext = React.createContext<
-  () => { viewport: Viewport; mousePoint: [number, number] }
->(() => ({
+export const GetViewportContext = React.createContext<() => { viewport: Viewport; mousePoint: [number, number] }>(() => ({
   viewport: {
     center: [0, 0],
     zoom: 0,
   },
   mousePoint: [0, 0],
 }));
 
-export interface ViewportSensorProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface ViewportSensorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+
+  /**
+   * 中心点位置
+   */
   center?: [number, number];
+
+  /**
+   * 缩放级别
+   */
   zoom?: number;
+
+  /**
+   * 鼠标按下事件之前，允许 `return false` 终止拖拽行为
+   */
   beforePointerDown?: UseViewportType['onPointerDown'];
+
+  /**
+   * center/zoom 发生变化时触发
+   */
   onPropsChange?: (viewport: Viewport) => void;
+
+  /**
+   * 最大缩放级别
+   */
   maxZoom?: UseViewportType['maxZoom'];
+
+  /**
+   * 最大缩放步进（防止触摸板滚动过快）
+   */
   maxZoomStep?: UseViewportType['maxZoomStep'];
+
+  /**
+   * 缩放步进
+   */
   zoomStep?: UseViewportType['zoomStep'];
+
+  /**
+   * 最小缩放级别
+   */
   minZoom?: UseViewportType['minZoom'];
+
+  /**
+   * 当触发鼠标滚轮时，实际的行为
+   */
   wheelMode?: UseViewportType['wheelMode'];
+
+  /**
+   * 允许传入回调函数进行渲染
+   * 如果是传入回调函数的方式，则表示手动处理其 refs
+   */
+  children?: React.HTMLAttributes<HTMLDivElement>['children'] | ((ref: RefObject<Element>) => ReactElement);
 }
 
 const ViewportSensor = (props: ViewportSensorProps) => {
-  const [
-    {
-      center,
-      zoom,
-      beforePointerDown,
-      maxZoom,
-      maxZoomStep,
-      zoomStep,
-      minZoom,
-      wheelMode,
-      ...otherProps
-    },
-    changeProps,
-  ] = useControllableProps(props, {
-    center: [0, 0] as [number, number],
-    zoom: 0,
-  });
-  const rootRef = useRef<HTMLDivElement>(null);
+  const [{ center, zoom, beforePointerDown, maxZoom, maxZoomStep, zoomStep, minZoom, wheelMode, children, ...otherProps }, changeProps] =
+    useControllableProps(props, {
+      center: [0, 0] as [number, number],
+      zoom: 0,
+    });
+  const rootRef = useRef<Element>(null);
   useViewport({
     ref: rootRef,
     viewport: {
@@ -92,19 +120,16 @@ const ViewportSensor = (props: ViewportSensorProps) => {
   );
 
   return (
-    <ViewportSensorContext.Provider
-      value={useMemo(() => ({ center, zoom }), [center, zoom])}
-    >
+    <ViewportSensorContext.Provider value={useMemo(() => ({ center, zoom }), [center, zoom])}>
       <GetViewportContext.Provider
         value={useMemoizedFn(() => ({
           viewport: { center, zoom },
-          mousePoint: [
-            Math.round((_this.currentPoint[0] + center[0]) / 2 ** zoom),
-            Math.round((_this.currentPoint[1] + center[1]) / 2 ** zoom),
-          ],
+          mousePoint: [Math.round((_this.currentPoint[0] + center[0]) / 2 ** zoom), Math.round((_this.currentPoint[1] + center[1]) / 2 ** zoom)],
         }))}
       >
-        <div ref={rootRef} {...otherProps} />
+        <div ref={rootRef as RefObject<HTMLDivElement>} {...otherProps}>
+          {typeof children === 'function' ? children(rootRef) : children}
+        </div>
       </GetViewportContext.Provider>
     </ViewportSensorContext.Provider>
   );

diff --git a/packages/transformer/CHANGELOG.md b/packages/transformer/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @orca-fe/painter
 
+## 0.3.28
+
+### Patch Changes
+
+- Updated dependencies
+  - @orca-fe/hooks@1.11.0
+
 ## 0.3.27
 
 ### Patch Changes

diff --git a/packages/transformer/package.json b/packages/transformer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@orca-fe/transformer",
-  "version": "0.3.27",
+  "version": "0.3.28",
   "description": "Transformer Container",
   "keywords": [
     "react",
@@ -42,7 +42,7 @@
     "gl-matrix": "^3.4.3",
     "prefix-classnames": "^0.0.7",
     "tslib": "^2.6.0",
-    "@orca-fe/hooks": "^1.10.1",
+    "@orca-fe/hooks": "^1.11.0",
     "@orca-fe/tools": "^0.10.0"
   },
   "peerDependencies": {