Merge branch 'develop' into feat/cropper-upgrade

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

packages/biz/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @zhst/biz
 
+## 0.21.5
+
+### Patch Changes
+
+- fix: 修改 zhst/meta
+- Updated dependencies
+  - @zhst/meta@0.20.3
+
+## 0.21.4
+
+### Patch Changes
+
+- zhst/biz、zhst/meta、zhst/material: 修改 od、修改 boxSelectTree
+- Updated dependencies
+  - @zhst/meta@0.20.2
+
 ## 0.21.3
 
 ### Patch Changes

packages/biz/package.json

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

packages/biz/src/BigImageModal/BigImageModal.tsx

@@ -223,11 +223,6 @@ const BigImageModal: React.FC<BigImageModalProps, BigModalRef> = forwardRef((pro
     ]
   }
 
-
-  // TODO: 页面初始化
-  useEffect(() => {
-  }, [dataSource]);
-
   // 暴露 ref 实例
   useImperativeHandle(ref, () => ({
     ref,

packages/biz/src/boxSelectTree/components/boxPanel/index.less

@@ -1,15 +1,36 @@
 .zhst-biz-box-select-tree-panel {
-  padding: 0 16px;
+  &-search {
+    display: flex;
+    padding: 0 12px;
 
-  &-btns-common {
+    &-input {
+      margin-right: 4px;
+    }
+
+    &-btns {
+      flex: none;
+    }
+  }
+
+  &-btns {
+    padding: 6px 12px;
+    display: flex;
+    justify-content: space-between;
+
+    &-common {
       padding: 4px 8px;
     }
 
-  &-btns-import {
+    &-import {
       padding: 4px 8px;
     }
 
-  &-btns-divider {
+    &-divider {
       margin: 8px 0;
     }
+  }
+
+  &-tree {
+    padding: 6px 0;
+  }
 }

packages/biz/src/boxSelectTree/components/boxPanel/index.tsx

@@ -128,20 +128,27 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
         onTreeCheck={onTreeCheck}               // 树check选中事件
         onItemDelete={onItemDelete}             // 右侧点击删除事件
       />
-      <Space size={12} direction='vertical' style={{ width: '100%' }}>
+      <div className={classNames(componentName + '-search')}>
-        <Space size={4}  style={{ width: '100%', justifyContent: 'space-between' }} >
+        <Input
-          <Input size='middle' onChange={(e) => onSearch?.(e)} placeholder='请输入盒子名称' {...searchInputProps} />
+          className={classNames(componentName + '-search-input')}
+          size='middle'
+          onChange={(e) => onSearch?.(e)}
+          placeholder='请输入盒子名称'
+          {...searchInputProps}
+        />
         {customImport || (
-            <>
+          <div
+            className={classNames(componentName + '-search-btns')}
+          >
             <Button type="text" onClick={() => onBatch?.() || handleCheckable()} icon={isTreeCheckable ? <SwitcherOutlined /> : <DiffOutlined />} />
             <Button type="text" onClick={() => onClockClick?.()} icon={<ClockCircleOutlined />} />
-            </>
+          </div>
         )}
-        </Space>
+      </div>
       {/* 是否显示操作按钮 */}
       {showOptions && (
         <>
-            <Space align='center'>
+          <div className={classNames(componentName + '-btns')}>
             <Button className={classNames(componentName + '-btns-common')} type='text' onClick={() => onImport?.()} icon={<ImportOutlined />} >导入盒子</Button>
             <Divider className={classNames(componentName + '-btns-divider')} type="vertical" />
             {onCreate ?
@@ -210,12 +217,13 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
             <Divider className={classNames(componentName + '-btns-divider')} type="vertical" />
             {/* @ts-ignore */}
             <Button className={classNames(componentName + '-btns-common')} danger type='text' icon={<CloseCircleOutlined />} disabled={treeProps?.checkedKeys?.length <= 0} onClick={onBoxBatchDelete} >删除</Button>
-            </Space>
+          </div>
           <Divider style={{ margin: 0 }} />
         </>
       )}
       {extraBtns}
       <BoxTree
+        className={classNames(componentName + '-tree')}
         treeCheckable={isTreeCheckable}
         data={data}
         onItemSelect={onItemSelect}
@@ -223,7 +231,6 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
         onItemDelete={onBoxDelete}
         {...treeProps}
       />
-      </Space>
     </div>
   )
 }

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

@@ -56,6 +56,7 @@ const demo = () => {
           addonBefore: (
             <Select
               value={searchType}
+              dropdownMatchSelectWidth={false}
               onChange={_type => {
                 setSearchType(_type)
                 setSearchVal('')

packages/material/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @zhst/material
 
+## 0.17.4
+
+### Patch Changes
+
+- fix: 修改 zhst/meta
+- Updated dependencies
+  - @zhst/meta@0.20.3
+  - @zhst/biz@0.21.5
+
+## 0.17.3
+
+### Patch Changes
+
+- zhst/biz、zhst/meta、zhst/material: 修改 od、修改 boxSelectTree
+- Updated dependencies
+  - @zhst/meta@0.20.2
+  - @zhst/biz@0.21.4
+
 ## 0.17.2
 
 ### Patch Changes

packages/material/package.json

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

packages/meta/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @zhst/utils
 
+## 0.20.3
+
+### Patch Changes
+
+- fix: 修改 zhst/meta
+- Updated dependencies
+  - @zhst/meta@0.20.3
+
+## 0.20.2
+
+### Patch Changes
+
+- zhst/biz、zhst/meta、zhst/material: 修改 od、修改 boxSelectTree
+- Updated dependencies
+  - @zhst/meta@0.20.2
+
 ## 0.20.1
 
 ### Patch Changes

packages/meta/package.json

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

packages/meta/src/cropperImage/CropperImage.tsx

@@ -100,6 +100,7 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
   const currentShapeRef = useRef<any>(null)
   const imageRef = useRef<HTMLDivElement>(null)
   const viewerRef = useRef<any>(null)
+  const currentFabricRef = useRef<CanvasPro>(null)
 
   // 自定义弹框
   const alginContainerRef: any = useRef(null);
@@ -118,6 +119,7 @@ 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) {
           // 获取选中的形状
@@ -140,6 +142,18 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
           // 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]
+        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 }
+        )
+        id && onShapeSelected?.(id, { ..._data, imageRect, originData: selectRectData })
+      }
+>>>>>>> develop
     })
 
     return () => {
@@ -157,19 +171,28 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
   // 初始化 - 编辑器
   useEffect(() => {
     const _viewer = viewerRef?.current || {}
-    // 判断是否可编辑
+    // 判断是否可编辑  - 非编辑态
     if (!editAble) {
+      _viewer.clearShape()
       // 判定是否存在od框
       odList && odList.forEach(_od => {
         _viewer?.addShape?.(_od);
       })
       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;
@@ -303,7 +326,8 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
     const { containerData = {}, targetTransform = {} } = viewer
     const imageSize = viewer.getImgSize()
 
-    let currentFabric: CanvasPro = new fabric.Canvas(
+    // @ts-ignore
+    currentFabricRef.current = new fabric.Canvas(
       canvasRef.current,
       {
         backgroundColor: 'transparent',
@@ -312,6 +336,7 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
         selection: false,
       }
     )
+    const currentFabric = currentFabricRef.current
 
     // 事件监听: 鼠标抬起事件
     currentFabric.on('mouse:down', function(options) {
@@ -411,6 +436,10 @@ const CropperImage = forwardRef<CropperImageRefProps, CropperImageProps>((props,
     viewerRef,
     rotateTo: (val) => {
       viewerRef.current.rotateTo((pre: any) => pre + val)
+    },
+    clearShape: () => {
+      viewerRef.current?.clearShape?.();
+      currentFabricRef.current?.clear()
     }
   }));
 

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

@@ -8,32 +8,14 @@ export default () => {
   const [editAble, setEditAble] = useState(false)
   const cropperRef = useRef(null)
   const [imgUrl, setImgUrl] = useState('')
-  const [selectedItem, setSelectedItem] = useState<any>()
+  const [odList, setOdList] = useState([
-
-  return (
-    <Space direction='vertical'>
-      <Space>
-        <Button onClick={() => setType('line')}>箭头模式</Button>
-        <Button onClick={() => setType('rect')}>矩形框选</Button>
-        <Button onClick={() => setEditAble(pre => !pre)}>{!editAble ? '不可编辑' : '可编辑'}</Button>
-        <Button
-          onClick={() => {
-            console.log('cropperRef?.current', cropperRef?.current.rotateTo(90))
-            console.log('cropper', cropperRef?.current)
-          }}
-        >旋转</Button>
-      </Space>
-      <div style={{ width: 800, height: 600 }}>
-        <CropperImage
-          ref={cropperRef}
-          type={type}
-          odList={[
     {
       "id": "123",
-              h: 0.30666666666666664,
+      "x": 0.5519352,
-              w: 0.27170650730411683,
+      "y": 0.2965385,
-              x: 0.19064741035856572,
+      "w": 0.05185461,
-              y: 0.09703124999999999,
+      "h": 0.24698898,
+      selectAble: false,
     },
     {
       "id": "456",
@@ -42,7 +24,42 @@ export default () => {
       "w": 0.052037954,
       "h": 0.2664015
     }
-          ]}
+  ])
+  const [selectedItem, setSelectedItem] = useState<any>()
+
+  return (
+    <Space direction='vertical'>
+      <Space>
+        <Button onClick={() => setType('line')}>箭头模式</Button>
+        <Button onClick={() => setType('rect')}>矩形框选</Button>
+        <Button onClick={() => {
+          setOdList([
+            {
+              "id": "456",
+              "x": 0.58543766,
+              "y": 0.3203356,
+              "w": 0.052037954,
+              "h": 0.2664015
+            }
+          ])
+        }}>修改坐标</Button>
+        <Button onClick={() => setEditAble(pre => !pre)}>{!editAble ? '不可编辑' : '可编辑'}</Button>
+        <Button
+          onClick={() => {
+            cropperRef?.current.rotateTo(90)
+          }}
+        >旋转</Button>
+        <Button
+          onClick={() => {
+            cropperRef?.current.clearShape()
+          }}
+        >清空</Button>
+      </Space>
+      <div style={{ width: 800, height: 600 }}>
+        <CropperImage
+          ref={cropperRef}
+          type={type}
+          odList={odList}
           editAble={editAble}
           url="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
           onMouseUp={data => console.log('箭头绘制结束：', data)}