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

2024-04-25 17:28:24 +08:00 · 2024-04-25 17:28:24 +08:00 · 67e59fffe8
commit 67e59fffe8
parent da80151c37
19 changed files with 77 additions and 144 deletions
--- a/package.json
+++ b/package.json
@ -51,7 +51,6 @@
      "prettier --parser=typescript --write"
    ]
  },
-  "dependencies": {},
  "devDependencies": {
    "@changesets/cli": "^2.27.1",
    "@commitlint/cli": "^17.1.2",
--- a/packages/biz/CHANGELOG.md
+++ b/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
--- a/packages/biz/package.json
+++ b/packages/biz/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/biz",
-  "version": "0.15.0",
+  "version": "0.16.0",
  "description": "业务库",
  "keywords": [
    "business",
--- a/packages/biz/src/BigImageModal/components/navigation/index.less
+++ b/packages/biz/src/BigImageModal/components/navigation/index.less
@ -17,7 +17,7 @@

  :global {
    i:hover {
-      color: #f0f0f0 !important;
+      color: #fff !important;
    }
  }

--- a/packages/biz/src/BigImageModal/components/navigation/index.tsx
+++ b/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>
--- a/packages/biz/src/odModal/demo/basic.tsx
+++ b/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)
        }}
      />
--- a/packages/material/CHANGELOG.md
+++ b/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
--- a/packages/material/package.json
+++ b/packages/material/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/material",
-  "version": "0.10.1",
+  "version": "0.10.3",
  "description": "物料库",
  "keywords": [
    "business",
--- a/packages/meta/CHANGELOG.md
+++ b/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
--- a/packages/meta/es/BigImagePreview/BigImagePreview.js
+++ b/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 { IconFont as Icon } from '@zhst/icon';
+import { Empty, AttachImage } from '..';
 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", {
-    className: classNames("".concat(componentName, "-attach"), isZoomin && "".concat(componentName, "-attach--zoomin"), "".concat(componentName, "-attach--fixed"), isZoomin && "".concat(componentName, "-attach--zoomin--fixed"))
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(componentName, "-attach__tab"))
-  }, 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", {
+  }))), (attachImg === null || attachImg === void 0 ? void 0 : attachImg.length) && !showCrop && /*#__PURE__*/React.createElement(AttachImage, {
+    showAttachImgLabel: showAttachImgLabel,
+    data: attachImg
+  }), (showScore || score) && /*#__PURE__*/React.createElement("div", {
    style: {
      bottom: 20
    },
--- a/packages/meta/es/ImageEditor/viewer/helper.js
+++ b/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,
-      y: event.pageY - y,
+      x: event.offsetX,
+      y: event.offsetY,
      __AXIS_TYPE__: AXIS_TYPE_CANVAS
    };
  },
--- a/packages/meta/package.json
+++ b/packages/meta/package.json
@ -1,6 +1,6 @@
 {
  "name": "@zhst/meta",
-  "version": "0.13.0",
+  "version": "0.14.0",
  "description": "原子组件",
  "keywords": [
    "meta",
--- a/packages/meta/src/BigImagePreview/BigImagePreview.tsx
+++ b/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 && (
-            <div
-              className={classNames(
-                `${componentName}-attach`,
-                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>
+          {attachImg?.length && !showCrop &&  (
+            <AttachImage
+              showAttachImgLabel={showAttachImgLabel}
+              data={attachImg}
+            />
          )}
          {(showScore || score) && <div
            style={{ bottom: 20 }}
--- a/packages/meta/src/ImageEditor/viewer/helper.ts
+++ b/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,
-      y: event.pageY - y,
+      x: event.offsetX,
+      y: event.offsetY,
      __AXIS_TYPE__: AXIS_TYPE_CANVAS,
    };
  },
--- a/packages/meta/src/attachImage/AttachImage.tsx
+++ b/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>
--- a/packages/meta/src/attachImage/demo/basic.tsx
+++ b/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'}
          ]}
--- a/packages/meta/src/attachImage/index.less
+++ b/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 {
--- a/packages/meta/src/cropperImage/CropperImage.tsx
+++ b/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 })
--- a/tsconfig.json
+++ b/tsconfig.json
@ -11,7 +11,7 @@
      "@@/*": [".dumi/tmp/*"],
      "@zhst/*": ["packages/*/src/"]
    },
-    "importHelpers": true,
+    "importHelpers": false,
    "sourceMap": true,
    "strictNullChecks": true,
    "module": "esnext",