Merge branch 'develop' into feat/cropper-upgrade

# Conflicts:
#	packages/meta/src/cropperImage/CropperImage.tsx
#	packages/meta/src/cropperImage/demo/basic.tsx

.npmrc

@@ -1,4 +1,4 @@
 registry="https://registry.npmmirror.com"
-@zhst:registry="http://10.0.0.77:4874"
+@zhst:registry="http://10.0.0.77:4874/:autoToken=VbcnvB0eKGAqsT5ZNbfKiw=="
 strict-peer-dependencies=false
 ignore-workspace-root-check=true

packages/material/src/algorithmConfig/demo/basic.tsx

@@ -2,6 +2,7 @@ import React, { useRef, useState } from 'react';
 import { AlgorithmConfig, AlgorithmConfigRef } from '@zhst/material';
 import type { AlgorithmConfigProps } from '@zhst/material';
 import { Button, Space, Switch } from 'antd';
+import { CropperImageRefProps } from '@zhst/meta';
 
 
 const algorithmTableDataSource: any = []
@@ -47,10 +48,11 @@ const demo = () => {
   const [tableType, setTableType] = useState<AlgorithmConfigProps['type']>('multiple')
   const [editAble, setEditAble] = useState(false)
   const algorithmConfigRef = useRef<AlgorithmConfigRef>(null)
+  const cropperImageRef = useRef<CropperImageRefProps>(null)
 
   // 绘画事件
   const handleDraw = (id: any, info: any) => {
-    console.log('箭头圈选事件', id, info)
+    console.log('cropperImageRef', cropperImageRef)
     setEditAble(true)
     setCropType('line')
   }
@@ -113,6 +115,7 @@ const demo = () => {
         cropperImageProps={{
           type: cropType,
           editAble,
+          ref: cropperImageRef,
           url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
         }}
       />

packages/meta/src/cropperImage/CropperImage.tsx

@@ -9,7 +9,6 @@ import { Cropper, EVENT_CROP_END, EVENT_CROP_START, EVENT_SHAPE_SELECT } from '.
 import { Rect } from '../ImageEditor/viewer/shape';
 import { checkPointInRect, drawArrowLine, getImageDataByPosition, percentToLength } from './cropperImagehelper';
 import Align from 'rc-align';
-import { getTransformRect } from '../BigImagePreview/bigImagePreviewHelper';
 
 interface RectPro extends Rect {
   imageRect?: string;
@@ -119,30 +118,6 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
     // 监听形状选择事件
     imageRectRef.current = addEventListenerWrapper(imageRef.current, EVENT_SHAPE_SELECT, (e: { detail: any; }) => {
       // 选中的od
-<<<<<<< HEAD
-        const id = e.detail;
-        if (id) {
-          // 获取选中的形状
-          // const shapes = imgIns.getSelectShape();
-
-          const selectRectData = odList!.filter(_od => _od.id === id)?.[0] || {}
-          const _data = percentToLength(selectRectData, viewerRef.current.canvas)
-          const imageRect = getImageDataByPosition(
-            { x: _data.x, y: _data.y, w: _data.w, h: _data.h },
-            { canvas: viewerRef.current.canvas }
-          )
-          // TODO: 换算成屏幕坐标
-          // const axisRect = imgIns.imgRectAxisToCanvasAxisRect(selectShape);
-          // const rect = {
-          //   x: axisRect.x2 > axisRect.x ? axisRect.x : axisRect.x2,
-          //   y: axisRect.y2 > axisRect.y ? axisRect.y : axisRect.y2,
-          //   w: Math.abs(axisRect.x2 - axisRect.x),
-          //   h: Math.abs(axisRect.y2 - axisRect.y),
-          // };
-          // getTransformRect(imageRectRef.current.image, )
-          id && onShapeSelected?.(id, { ..._data, imageRect, originData: selectRectData })
-        }
-=======
       const id = e.detail;
       if (id) {
         const selectRectData = odList!.filter(_od => _od.id === id)?.[0]
@@ -153,7 +128,6 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
         )
         id && onShapeSelected?.(id, { ..._data, imageRect, originData: selectRectData })
       }
->>>>>>> develop
     })
 
     return () => {
@@ -180,19 +154,11 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
       })
       return
     } else {
-<<<<<<< HEAD
       // 编辑模式
       _viewer?.clearShape?.();
 
       if (type === 'rect') {
         // 编辑模式  -   矩形绘制
-=======
-      // 编辑态
-      const { targetTransform = {} } = _viewer
-
-      if (type === 'rect') {
-        _viewer.clearShape()
->>>>>>> develop
         currentShapeRef.current = initRect()
         //   cropEndRef.current = addEventListenerWrapper(imageRef.current, EVENT_CROP_END, (event: { detail: any; }) => {
         //   const data = event.detail;

packages/meta/src/cropperImage/cropperImagehelper.ts

@@ -21,7 +21,32 @@ export const getImage = (propImage: HTMLImageElement | string) => {
     });
 }
 
-// 检查是否在规定区域内
+/**
+ * 检查鼠标是否在矩形中、矩形编辑器上
+ * @param o 鼠标对象实例
+ * @param _fabricCanvas fabric实例
+ * @returns Boolean
+ */
+export const checkMouseInRect = (o: fabric.IEvent<MouseEvent>, _fabricCanvas: fabric.Canvas) => {
+  var pointer = _fabricCanvas.getPointer(o.e);
+  var point = new fabric.Point(pointer.x, pointer.y);
+  let inRect = false
+  _fabricCanvas.forEachObject(function(obj) {
+    if (obj.containsPoint(point) || obj._findTargetCorner(pointer)) {
+      inRect = true
+    } else {
+      inRect = false
+    }
+  });
+  return inRect
+}
+
+// 检查是否在可绘制区域内
+/**
+ * @param point 需要检查的点的坐标
+ * @param rect 原始画布宽高：w、h；缩放比例：scale；整体偏移的坐标：translateX,translateY
+ * @returns boolean
+ */
 export const checkPointInRect = (point: { x: number; y: number;}, rect: { w: number; h: number, translateX?: number; translateY?: number, scale: number }) => {
   const { w, h, translateX = 0, translateY = 0, scale = 1 } = rect;
   const limitStartX = translateX

packages/meta/src/cropperImage/demo/basic.tsx

@@ -36,10 +36,10 @@ export default () => {
           setOdList([
             {
               "id": "456",
-              "x": 0.58543766,
+              x: 0.27903386454183265,
-              "y": 0.3203356,
+              y: 0.16203125,
-              "w": 0.052037954,
+              w: 0.42065405046480747,
-              "h": 0.2664015
+              h: 0.3783333333333333,
             }
           ])
         }}>修改坐标</Button>
@@ -69,12 +69,15 @@ export default () => {
           }}
           onCropStart={() => console.log('矩形开始绘制')}
           onCropEnd={(data) => {
+            console.log('data', data)
             setSelectedItem({ x: data.left, y: data.top, h: data.height, w: data.width })
             setImgUrl(data?.imageRect as string)
           }}
           selectedItem={selectedItem}
           showToast={editAble}
-          customToast={() => <div style={{ color: '#fff', fontSize: '24px' }}>多功能框</div>}
+          customToast={() => (
+            <div style={{ marginLeft: '12px', color: '#fff', fontSize: '24px' }}>自定义框</div>
+          )}
         />
       </div>
       <Image src={imgUrl} />

packages/meta/src/cropperImage/index.less

@@ -12,6 +12,17 @@
     height: 100%;
   }
 
+  &_toast {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 150px;
+    height: 100px;
+    font-size: 16px;
+    z-index: 99;
+    cursor: pointer;
+  }
+
   .canvas-container {
     position: absolute;
     left: 0;

packages/meta/src/relatedImage/index.md

@@ -6,7 +6,9 @@ toc: content
 title: RelatedImage 模型碰撞轮播图
 ---
 
-# RelatedImage 模型碰撞轮播图
+## RelatedImage 模型碰撞轮播图
+
+## 示例
 
 <code src="./demo/basic.tsx">基本</code>
 <!-- <code src="./demo/noTools.tsx">没有工具栏</code> -->
@@ -23,3 +25,6 @@ title: RelatedImage 模型碰撞轮播图
 | onItemSelected | 图片选中 | string | - |  |
 | prefixCls | 图片 | string | - |  |
 
+## 组件设计思路
+
+功能灵感是出自蜂鸟3.0的人脸碰撞模型的 demo。