From 0f0644495a6ec3206b20643ab27915ff6309eab5 Mon Sep 17 00:00:00 2001 From: jiangzhixiong <710328466@qq.com> Date: Mon, 13 May 2024 19:36:45 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix(zhst/meta):=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E5=9C=88=E9=80=89=E9=87=8D=E6=96=B0=E6=B8=B2=E6=9F=93,?= =?UTF-8?q?=E9=80=8F=E5=87=BA=E9=87=8D=E6=96=B0=E7=BB=98=E5=88=B6=E6=96=B9?= =?UTF-8?q?=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../meta/src/cropperImage/CropperImage.tsx | 34 +++++++---- packages/meta/src/cropperImage/demo/basic.tsx | 60 ++++++++++++------- 2 files changed, 59 insertions(+), 35 deletions(-) diff --git a/packages/meta/src/cropperImage/CropperImage.tsx b/packages/meta/src/cropperImage/CropperImage.tsx index c83342f..7760bb6 100644 --- a/packages/meta/src/cropperImage/CropperImage.tsx +++ b/packages/meta/src/cropperImage/CropperImage.tsx @@ -99,6 +99,7 @@ const CropperImage = forwardRef((props, const currentShapeRef = useRef(null) const imageRef = useRef(null) const viewerRef = useRef(null) + const currentFabricRef = useRef(null) // 自定义弹框 const alginContainerRef: any = useRef(null); @@ -116,16 +117,16 @@ const CropperImage = forwardRef((props, // 监听形状选择事件 addEventListenerWrapper(imageRef.current, EVENT_SHAPE_SELECT, (e: { detail: any; }) => { // 选中的od - 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 }) - } + 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 }) + } }) return () => { @@ -141,18 +142,20 @@ const CropperImage = forwardRef((props, // 初始化 - 编辑器 useEffect(() => { const _viewer = viewerRef?.current || {} - // 判断是否可编辑 + // 判断是否可编辑 - 非编辑态 if (!editAble) { + _viewer.clearShape() // 判定是否存在od框 odList && odList.forEach(_od => { _viewer?.addShape?.(_od); }) return } else { - _viewer?.clearShape?.(); + // 编辑态 const { targetTransform = {} } = _viewer if (type === 'rect') { + _viewer.clearShape() currentShapeRef.current = initRect() // 矩形 - 开始绘制实践 cropStartRef.current = addEventListenerWrapper(imageRef.current, EVENT_CROP_START, () => { @@ -198,7 +201,7 @@ const CropperImage = forwardRef((props, const { containerData = {}, targetTransform = {} } = viewer const imageSize = viewer.getImgSize() - let currentFabric: CanvasPro = new fabric.Canvas( + currentFabricRef.current = new fabric.Canvas( canvasRef.current, { backgroundColor: 'transparent', @@ -207,6 +210,7 @@ const CropperImage = forwardRef((props, selection: false, } ) + const currentFabric = currentFabricRef.current // 事件监听: 鼠标抬起事件 currentFabric.on('mouse:down', function(options) { @@ -306,6 +310,10 @@ const CropperImage = forwardRef((props, viewerRef, rotateTo: (val) => { viewerRef.current.rotateTo((pre: any) => pre + val) + }, + clearShape: () => { + viewerRef.current?.clearShape?.(); + currentFabricRef.current?.clear() } })); diff --git a/packages/meta/src/cropperImage/demo/basic.tsx b/packages/meta/src/cropperImage/demo/basic.tsx index 25ba03f..c1ca6d0 100644 --- a/packages/meta/src/cropperImage/demo/basic.tsx +++ b/packages/meta/src/cropperImage/demo/basic.tsx @@ -8,6 +8,23 @@ export default () => { const [editAble, setEditAble] = useState(false) const cropperRef = useRef(null) const [imgUrl, setImgUrl] = useState('') + const [odList, setOdList] = useState([ + { + "id": "123", + "x": 0.5519352, + "y": 0.2965385, + "w": 0.05185461, + "h": 0.24698898, + selectAble: false, + }, + { + "id": "456", + "x": 0.58543766, + "y": 0.3203356, + "w": 0.052037954, + "h": 0.2664015 + } + ]) const [selectedItem, setSelectedItem] = useState() return ( @@ -15,27 +32,8 @@ export default () => { - - - -
- { + setOdList([ { "id": "456", "x": 0.58543766, @@ -43,7 +41,25 @@ export default () => { "w": 0.052037954, "h": 0.2664015 } - ]} + ]) + }}>修改坐标 + + + + +
+ console.log('箭头绘制结束：', data)} From 59f0924c6670a05d050a6c6978f6b6a47763516f Mon Sep 17 00:00:00 2001 From: jiangzhixiong <710328466@qq.com> Date: Tue, 14 May 2024 11:24:21 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix(all):=20zhst/biz=E3=80=81zhst/meta?= =?UTF-8?q?=E3=80=81zhst/material:=20=E4=BF=AE=E6=94=B9=20od=E3=80=81?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=20boxSelectTree?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/biz/CHANGELOG.md | 16 ++ packages/biz/package.json | 2 +- .../biz/src/BigImageModal/BigImageModal.tsx | 5 - .../components/boxPanel/index.less | 32 ++- .../components/boxPanel/index.tsx | 197 +++++++++--------- packages/biz/src/boxSelectTree/demo/basic.tsx | 1 + packages/material/CHANGELOG.md | 18 ++ packages/material/package.json | 2 +- packages/meta/CHANGELOG.md | 16 ++ packages/meta/package.json | 2 +- .../meta/src/cropperImage/CropperImage.tsx | 1 + 11 files changed, 181 insertions(+), 111 deletions(-) diff --git a/packages/biz/CHANGELOG.md b/packages/biz/CHANGELOG.md index 0e925b9..dda3b31 100644 --- a/packages/biz/CHANGELOG.md +++ b/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 diff --git a/packages/biz/package.json b/packages/biz/package.json index dea7efb..47f25ff 100644 --- a/packages/biz/package.json +++ b/packages/biz/package.json @@ -1,6 +1,6 @@ { "name": "@zhst/biz", - "version": "0.21.3", + "version": "0.21.5", "description": "业务库", "keywords": [ "business", diff --git a/packages/biz/src/BigImageModal/BigImageModal.tsx b/packages/biz/src/BigImageModal/BigImageModal.tsx index 37688ab..ed7ce27 100644 --- a/packages/biz/src/BigImageModal/BigImageModal.tsx +++ b/packages/biz/src/BigImageModal/BigImageModal.tsx @@ -223,11 +223,6 @@ const BigImageModal: React.FC = forwardRef((pro ] } - - // TODO: 页面初始化 - useEffect(() => { - }, [dataSource]); - // 暴露 ref 实例 useImperativeHandle(ref, () => ({ ref, diff --git a/packages/biz/src/boxSelectTree/components/boxPanel/index.less b/packages/biz/src/boxSelectTree/components/boxPanel/index.less index b835d39..0101577 100644 --- a/packages/biz/src/boxSelectTree/components/boxPanel/index.less +++ b/packages/biz/src/boxSelectTree/components/boxPanel/index.less @@ -1,15 +1,31 @@ .zhst-biz-box-select-tree-panel { - padding: 0 16px; - &-btns-common { - padding: 4px 8px; + &-search { + display: flex; + padding: 0 12px; + &-input { + margin-right: 4px; + } + &-btns { + flex: none; + } } - &-btns-import { - padding: 4px 8px; + &-btns { + padding: 6px 12px; + display: flex; + justify-content: space-between; + &-common { + padding: 4px 8px; + } + &-import { + padding: 4px 8px; + } + &-divider { + margin: 8px 0; + } } - - &-btns-divider { - margin: 8px 0; + &-tree { + padding: 6px 0; } } diff --git a/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx b/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx index 1a9ede9..2168c40 100644 --- a/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx +++ b/packages/biz/src/boxSelectTree/components/boxPanel/index.tsx @@ -128,102 +128,109 @@ const BoxPanel: FC = (props) => { onTreeCheck={onTreeCheck} // 树check选中事件 onItemDelete={onItemDelete} // 右侧点击删除事件 /> - - - onSearch?.(e)} placeholder='请输入盒子名称' {...searchInputProps} /> - {customImport || ( - <> - - - {onCreate ? - ( - - ) : ( - - className={classNames(componentName + '-create-modal')} - open={onCreate ? false : undefined} - formRef={createFormRef} - title="新建组" - modalProps={{ destroyOnClose: true }} - layout='horizontal' - labelCol={{ span: 6 }} - wrapperCol={{ span: 18 }} - trigger={} - submitter={{ - searchConfig: { - submitText: '确定', - resetText: '取消', - }, - }} - onFinish={onCreateSubmit} - > - - - { - createFormRef.current?.setFieldValue('boxList', null) - onBoxChoiceReset() - }} >恢复默认 - setBoxChoiceOpen(true)}>范围选择 - - ) - }} - /> - - ) - } - - {/* @ts-ignore */} - - - - - )} - {extraBtns} - + onSearch?.(e)} + placeholder='请输入盒子名称' + {...searchInputProps} /> - + {customImport || ( +
+
+ )} +
+ {/* 是否显示操作按钮 */} + {showOptions && ( + <> +
+ + + {onCreate ? + ( + + ) : ( + + className={classNames(componentName + '-create-modal')} + open={onCreate ? false : undefined} + formRef={createFormRef} + title="新建组" + modalProps={{ destroyOnClose: true }} + layout='horizontal' + labelCol={{ span: 6 }} + wrapperCol={{ span: 18 }} + trigger={} + submitter={{ + searchConfig: { + submitText: '确定', + resetText: '取消', + }, + }} + onFinish={onCreateSubmit} + > + + + { + createFormRef.current?.setFieldValue('boxList', null) + onBoxChoiceReset() + }} >恢复默认 + setBoxChoiceOpen(true)}>范围选择 + + ) + }} + /> + + ) + } + + {/* @ts-ignore */} + +
+ + + )} + {extraBtns} +
) } diff --git a/packages/biz/src/boxSelectTree/demo/basic.tsx b/packages/biz/src/boxSelectTree/demo/basic.tsx index 00365d6..6269b72 100644 --- a/packages/biz/src/boxSelectTree/demo/basic.tsx +++ b/packages/biz/src/boxSelectTree/demo/basic.tsx @@ -56,6 +56,7 @@ const demo = () => { addonBefore: (