fix(zhst/meta,zhst/biz): zhst/meta 大图圈选组件点击选不上 bug 修复,attach 遮挡底部框事件阻止修复

package.json

@@ -51,7 +51,6 @@
       "prettier --parser=typescript --write"
     ]
   },
-  "dependencies": {},
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@commitlint/cli": "^17.1.2",

packages/biz/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @zhst/biz
 
+## 0.16.0
+
+### Minor Changes
+
+- zhst/meta 大图圈选组件点击选不上 bug 修复,attach 遮挡底部框事件阻止修复
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/meta@0.14.0
+
 ## 0.15.0
 
 ### Minor Changes

packages/biz/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhst/biz",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "业务库",
   "keywords": [
     "business",

packages/biz/src/BigImageModal/components/navigation/index.less

@@ -17,7 +17,7 @@
 
   :global {
     i:hover {
-      color: #f0f0f0 !important;
+      color: #fff !important;
     }
   }
 

packages/biz/src/BigImageModal/components/navigation/index.tsx

@@ -29,7 +29,7 @@ const Navigation: React.FC<{
         className
       )}
     >
-      <Button type="text" disabled={disabled} onClick={onClick}>
+      <Button type="text" disabled={disabled} shape='circle' onClick={onClick}>
         <IconFont size={28} color={color} icon={prev ? 'icon-qiehuanzuo' : 'icon-qiehuanyou'} />
       </Button>
     </div>

packages/biz/src/odModal/demo/basic.tsx

@@ -69,11 +69,8 @@ const demo = () => {
         autoSelectDisable={paintType === 'auto'}
         onCropEnd={_cropData => console.log('结束绘制：', _cropData)}
         onReset={() => console.log('重置')}
-        onRotate={() => console.log('旋转', odModalRef.current.rotateTo(90))}
+        onRotate={() => console.log('旋转', odModalRef.current?.rotateTo?.(90))}
         onTypeSelect={(val) => {
-          if (val === 1) {
-
-          }
           setSelectedType(val)
         }}
       />

packages/material/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @zhst/material
 
+## 0.10.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/meta@0.14.0
+  - @zhst/biz@0.16.0
+
+## 0.10.2
+
+### Patch Changes
+
+- material 修改找不到包的问题
+
 ## 0.10.1
 
 ### Patch Changes

packages/material/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhst/material",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "description": "物料库",
   "keywords": [
     "business",

packages/meta/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @zhst/utils
 
+## 0.14.0
+
+### Minor Changes
+
+- zhst/meta 大图圈选组件点击选不上 bug 修复,attach 遮挡底部框事件阻止修复
+
+### Patch Changes
+
+- Updated dependencies
+  - @zhst/meta@0.14.0
+
 ## 0.13.0
 
 ### Minor Changes

packages/meta/es/BigImagePreview/BigImagePreview.js

@@ -17,8 +17,7 @@ import React, { useEffect, useState, useRef, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import { get, pick, isNull, generateImg, dataURLToBlob, getTransforms, addEventListenerWrapper, getFileByRect } from '@zhst/func';
 import Align from 'rc-align';
-import { Button, Empty } from '..';
+import { Empty, AttachImage } from '..';
-import { IconFont as Icon } from '@zhst/icon';
 import { Cropper, Viewer, EVENT_VIEWER_TRANSFORM_CHANGE, EVENT_VIEWER_READY, EVENT_CROP_START, EVENT_CROP_END } from "../ImageEditor";
 import BtnGroup from "./components/BtnGroup";
 import "./index.less";
@@ -480,16 +479,6 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
     }
   };
 
-  // ============================= attact img =========================
-  var _useState17 = useState(0),
-    _useState18 = _slicedToArray(_useState17, 2),
-    selectAttachImgIndex = _useState18[0],
-    setSelectAttachImgIndex = _useState18[1];
-  var _useState19 = useState(false),
-    _useState20 = _slicedToArray(_useState19, 2),
-    isZoomin = _useState20[0],
-    setIsZoomin = _useState20[1];
-
   // ============================== Ref ===============================
   useImperativeHandle(ref, function () {
     return {
@@ -544,46 +533,10 @@ export var BigImagePreview = /*#__PURE__*/React.forwardRef(function (props, ref)
     setShowCrop: setShowCrop,
     cropType: cropType,
     selectAlgorithmVersion: selectAlgorithmVersion
-  }))), (attachImg === null || attachImg === void 0 ? void 0 : attachImg.length) && !showCrop && /*#__PURE__*/React.createElement("div", {
+  }))), (attachImg === null || attachImg === void 0 ? void 0 : attachImg.length) && !showCrop && /*#__PURE__*/React.createElement(AttachImage, {
-    className: classNames("".concat(componentName, "-attach"), isZoomin && "".concat(componentName, "-attach--zoomin"), "".concat(componentName, "-attach--fixed"), isZoomin && "".concat(componentName, "-attach--zoomin--fixed"))
+    showAttachImgLabel: showAttachImgLabel,
-  }, /*#__PURE__*/React.createElement("div", {
+    data: attachImg
-    className: classNames("".concat(componentName, "-attach__tab"))
+  }), (showScore || score) && /*#__PURE__*/React.createElement("div", {
-  }, showAttachImgLabel ? attachImg === null || attachImg === void 0 ? void 0 : attachImg.map(function (_ref6, index) {
-    var label = _ref6.label;
-    return /*#__PURE__*/React.createElement("div", {
-      key: index,
-      className: classNames("".concat(componentName, "-attach__tab-item"), selectAttachImgIndex === index && "".concat(componentName, "-attach__tab-item--select")),
-      onMouseEnter: function onMouseEnter() {
-        setSelectAttachImgIndex(index);
-      }
-    }, label);
-  }) : null), /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(componentName, "-attach__scale"))
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "text"
-    //绝对定位下onClick事件失效采用onMouseDown
-    ,
-    onMouseDown: function onMouseDown(e) {
-      //如果是左键执行
-      if (e.button == 0) {
-        setIsZoomin(function (pre) {
-          return !pre;
-        });
-      }
-    },
-    style: {
-      color: '#fff'
-    }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    styles: {
-      display: 'flex'
-    },
-    icon: isZoomin ? 'icon-cancle_fullscreen' : 'icon-fullscreen'
-  }))), /*#__PURE__*/React.createElement("img", {
-    draggable: "false",
-    className: classNames("".concat(componentName, "-attach__img"), "".concat(componentName, "-attach__img--fixed")),
-    src: get(attachImg, "".concat(selectAttachImgIndex, ".url"), '')
-  })), (showScore || score) && /*#__PURE__*/React.createElement("div", {
     style: {
       bottom: 20
     },

packages/meta/es/ImageEditor/viewer/helper.js

@@ -47,12 +47,9 @@ export default {
     // rotate: 90,
   },
   windowToCanvasAxis: function windowToCanvasAxis(event) {
-    var _this$canvas$getBound = this.canvas.getBoundingClientRect(),
-      x = _this$canvas$getBound.x,
-      y = _this$canvas$getBound.y;
     return {
-      x: event.pageX - x,
+      x: event.offsetX,
-      y: event.pageY - y,
+      y: event.offsetY,
       __AXIS_TYPE__: AXIS_TYPE_CANVAS
     };
   },

packages/meta/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhst/meta",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "原子组件",
   "keywords": [
     "meta",

packages/meta/src/BigImagePreview/BigImagePreview.tsx

@@ -11,9 +11,8 @@ import {
   getFileByRect
 } from '@zhst/func';
 import Align from 'rc-align';
-import { Button, Empty } from '..';
+import { Empty, AttachImage } from '..';
 import { type Rect, type IScreenshotButtonProp, type AlignType } from '@zhst/types'
-import { IconFont as Icon } from '@zhst/icon'
 import {
   Cropper,
   Viewer,
@@ -450,10 +449,6 @@ export const BigImagePreview = React.forwardRef<ImgViewRef, ImgViewProps>((props
     }
   };
 
-  // ============================= attact img =========================
-  const [selectAttachImgIndex, setSelectAttachImgIndex] = useState(0);
-  const [isZoomin, setIsZoomin] = useState(false);
-
   // ============================== Ref ===============================
   useImperativeHandle(ref, () => ({
     imgInsRef,
@@ -529,62 +524,11 @@ export const BigImagePreview = React.forwardRef<ImgViewRef, ImgViewProps>((props
             </>
           )}
           {/* 场景图小图 */}
-          {attachImg?.length && !showCrop && (
+          {attachImg?.length && !showCrop &&  (
-            <div
+            <AttachImage
-              className={classNames(
+              showAttachImgLabel={showAttachImgLabel}
-                `${componentName}-attach`,
+              data={attachImg}
-                isZoomin && `${componentName}-attach--zoomin`,
+            />
-                `${componentName}-attach--fixed`,
-                isZoomin && `${componentName}-attach--zoomin--fixed`
-              )}
-            >
-              <div className={classNames(`${componentName}-attach__tab`)}>
-                {showAttachImgLabel
-                  ? attachImg?.map(({ label }, index) => (
-                      <div
-                        key={index}
-                        className={classNames(
-                          `${componentName}-attach__tab-item`,
-                          selectAttachImgIndex === index && `${componentName}-attach__tab-item--select`
-                        )}
-                        onMouseEnter={() => {
-                          setSelectAttachImgIndex(index);
-                        }}
-                      >
-                        {label}
-                      </div>
-                    ))
-                  : null}
-              </div>
-              <div className={classNames(`${componentName}-attach__scale`)}>
-                <Button
-                  type="text"
-                  //绝对定位下onClick事件失效采用onMouseDown
-                  onMouseDown={(e) => {
-                    //如果是左键执行
-                    if (e.button == 0) {
-                      setIsZoomin((pre) => !pre);
-                    }
-                  }}
-                  style={{
-                    color: '#fff',
-                  }}
-                >
-                  <Icon
-                    styles={{ display: 'flex' }}
-                    icon={isZoomin ? 'icon-cancle_fullscreen' : 'icon-fullscreen'}
-                  />
-                </Button>
-              </div>
-              <img
-                draggable="false"
-                className={classNames(
-                  `${componentName}-attach__img`,
-                  `${componentName}-attach__img--fixed`
-                )}
-                src={get(attachImg, `${selectAttachImgIndex}.url`, '')}
-              />
-            </div>
           )}
           {(showScore || score) && <div
             style={{ bottom: 20 }}

packages/meta/src/ImageEditor/viewer/helper.ts

@@ -34,10 +34,9 @@ export default {
   },
 
   windowToCanvasAxis(event) {
-    const { x, y } = this.canvas.getBoundingClientRect();
     return {
-      x: event.pageX - x,
+      x: event.offsetX,
-      y: event.pageY - y,
+      y: event.offsetY,
       __AXIS_TYPE__: AXIS_TYPE_CANVAS,
     };
   },

packages/meta/src/attachImage/AttachImage.tsx

@@ -68,6 +68,7 @@ const CompareImage = forwardRef<AttachImageRefProps, AttachImageProps>((props) =
         <div className={classNames(`${componentName}-attach__scale`)}>
           <Button
             type="text"
+            shape='circle'
             //绝对定位下onClick事件失效采用onMouseDown
             onMouseDown={(e) => {
               //如果是左键执行
@@ -80,7 +81,7 @@ const CompareImage = forwardRef<AttachImageRefProps, AttachImageProps>((props) =
             }}
           >
             <Icon
-              styles={{ display: 'flex' }}
+              color='#fff'
               icon={isZoomin ? 'icon-cancle_fullscreen' : 'icon-fullscreen'}
             />
           </Button>

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

@@ -7,13 +7,13 @@ export default () => {
   return (
     <Space>
       <div
-        style={{ position: 'relative', width: '400px', height: '300px' }}
+        style={{ position: 'relative', width: '400px', height: '300px', border: '1px solid #ccc' }}
       >
         <AttachImage
           data={[
             {
               label: '人脸',
-              url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
+              url: 'http://jzx-drive.oss-cn-hangzhou.aliyuncs.com/note/2024/04/24/021337-image.png'
             },
             {label: '形体', url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'}
           ]}

packages/meta/src/attachImage/index.less

@@ -1,19 +1,21 @@
 .zhst-attach-image {
-  position: relative;
+  position: absolute;
+  left: 0;
+  top: 0;
   width: 100%;
   height: 100%;
   min-width: 150px;
   min-height: 100px;
+  pointer-events: none;
+
   &-attach {
     position: absolute;
-    z-index: 11;
     bottom: 0;
-
-    // left: 78px;
     left: 0;
     min-width: 120px;
     height: 200px;
     transition: all 0.2s;
+    pointer-events: auto;
 
 
     &--zoomin {
@@ -37,7 +39,7 @@
         cursor: pointer;
         font-size: 12px;
         opacity: 0.5;
-        transition: all 200ms;
+        transition: ease-out all 200ms;
 
         &--select {
           width: 48px;
@@ -57,11 +59,16 @@
       height: 30px;
       align-items: center;
       justify-content: center;
-      background: rgb(0 0 0 / 60%);
       border-radius: 100%;
       cursor: pointer;
       line-height: 30px;
       text-align: center;
+      background: rgb(0 0 0 / 30%);
+      transition: .3s ease-in all;
+
+      &:hover {
+        background: rgb(0 0 0 / 5%);
+      }
     }
 
     &__img {

packages/meta/src/cropperImage/CropperImage.tsx

@@ -110,7 +110,7 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
     });
 
     // 监听形状选择事件
-    addEventListenerWrapper(imageRef.current, EVENT_SHAPE_SELECT, async (e: { detail: any; }) => {
+    addEventListenerWrapper(imageRef.current, EVENT_SHAPE_SELECT, (e: { detail: any; }) => {
       // 选中的od
         const id = e.detail;
         if (id) {
@@ -156,7 +156,7 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
           onCropStart?.()
         });
         // 矩形 - 结束绘制实践
-        cropEndRef.current = addEventListenerWrapper(imageRef.current, EVENT_CROP_END, async (event: { detail: any; }) => {
+        cropEndRef.current = addEventListenerWrapper(imageRef.current, EVENT_CROP_END, (event: { detail: any; }) => {
           const data = event.detail;
           const imageRect = getImageDataByPosition({ x: data.left, y: data.top, w: data.width, h: data.height }, { canvas: viewerRef.current.canvas })
           onCropEnd?.({ ...data , imageRect, targetTransform })

tsconfig.json

@@ -11,7 +11,7 @@
       "@@/*": [".dumi/tmp/*"],
       "@zhst/*": ["packages/*/src/"]
     },
-    "importHelpers": true,
+    "importHelpers": false,
     "sourceMap": true,
     "strictNullChecks": true,
     "module": "esnext",