nicecode/nicecode-v2
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into feat/cropper-upgrade

Browse Source 
# Conflicts:
#	packages/meta/src/cropperImage/CropperImage.tsx
#	packages/meta/src/cropperImage/demo/basic.tsx
This commit is contained in:
NICE CODE BY DEV 2024-05-14 11:27:13 +08:00
commit d80cab2407
12 changed files with 253 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/biz/CHANGELOG.md
View File

@ -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

2
packages/biz/package.json
View File

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

5
packages/biz/src/BigImageModal/BigImageModal.tsx
View File

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

35
packages/biz/src/boxSelectTree/components/boxPanel/index.less
View File

@ -1,15 +1,36 @@
.zhst-biz-box-select-tree-panel {
padding: 0 16px;
&-search {
display: flex;
padding: 0 12px;
&-btns-common {
padding: 4px 8px;
&-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;
}
}

197
packages/biz/src/boxSelectTree/components/boxPanel/index.tsx
View File

@ -128,102 +128,109 @@ const BoxPanel: FC<BoxPanelProps> = (props) => {
onTreeCheck={onTreeCheck} // 树check选中事件
onItemDelete={onItemDelete} // 右侧点击删除事件
/>
<Space size={12} direction='vertical' style={{ width: '100%' }}>
<Space size={4} style={{ width: '100%', justifyContent: 'space-between' }} >
<Input size='middle' onChange={(e) => onSearch?.(e)} placeholder='请输入盒子名称' {...searchInputProps} />
{customImport || (
<>
<Button type="text" onClick={() => onBatch?.() || handleCheckable()} icon={isTreeCheckable ? <SwitcherOutlined /> : <DiffOutlined />} />
<Button type="text" onClick={() => onClockClick?.()} icon={<ClockCircleOutlined />} />
</>
)}
</Space>
{/* 是否显示操作按钮 */}
{showOptions && (
<>
<Space align='center'>
<Button className={classNames(componentName + '-btns-common')} type='text' onClick={() => onImport?.()} icon={<ImportOutlined />} >导入盒子</Button>
<Divider className={classNames(componentName + '-btns-divider')} type="vertical" />
{onCreate ?
(
<Button className={classNames(componentName + '-btns-common')} onClick={onCreate} type='text' icon={<FolderAddOutlined />} >新建组</Button>
) : (
<ModalForm<{
name: string
boxList?: any[]
}>
className={classNames(componentName + '-create-modal')}
open={onCreate ? false : undefined}
formRef={createFormRef}
title="新建组"
modalProps={{ destroyOnClose: true }}
layout='horizontal'
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
trigger={<Button type='text' className={classNames(componentName + '-btns-common')} icon={<FolderAddOutlined />} >新建组</Button>}
submitter={{
searchConfig: {
submitText: '确定',
resetText: '取消',
},
}}
onFinish={onCreateSubmit}
>
<ProFormText
rules={[
{
required: true,
max: 20,
},
{
pattern: /^[^\s]*$/g,
message: '禁止输入空格'
}
]}
fieldProps={{ showCount: true }}
width="md"
name="name"
label="盒子组名称"
placeholder="请输入盒子名称"
/>
<ProFormText
width="md"
name="boxList"
label="盒子选择"
fieldProps={{
readOnly: true,
value: `已选择${createFormRef.current?.getFieldValue('boxList')?.length || 0}个盒子`,
suffix: (
<Space>
<a onClick={() => {
createFormRef.current?.setFieldValue('boxList', null)
onBoxChoiceReset()
}} >恢复默认</a>
<a onClick={() => setBoxChoiceOpen(true)}>范围选择</a>
</Space>
)
}}
/>
</ModalForm>
)
}
<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>
<Divider style={{ margin: 0 }} />
</>
)}
{extraBtns}
<BoxTree
treeCheckable={isTreeCheckable}
data={data}
onItemSelect={onItemSelect}
onItemCheck={onItemCheck}
onItemDelete={onBoxDelete}
{...treeProps}
<div className={classNames(componentName + '-search')}>
<Input
className={classNames(componentName + '-search-input')}
size='middle'
onChange={(e) => onSearch?.(e)}
placeholder='请输入盒子名称'
{...searchInputProps}
/>
</Space>
{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>
)}
</div>
{/* 是否显示操作按钮 */}
{showOptions && (
<>
<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 ?
(
<Button className={classNames(componentName + '-btns-common')} onClick={onCreate} type='text' icon={<FolderAddOutlined />} >新建组</Button>
) : (
<ModalForm<{
name: string
boxList?: any[]
}>
className={classNames(componentName + '-create-modal')}
open={onCreate ? false : undefined}
formRef={createFormRef}
title="新建组"
modalProps={{ destroyOnClose: true }}
layout='horizontal'
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
trigger={<Button type='text' className={classNames(componentName + '-btns-common')} icon={<FolderAddOutlined />} >新建组</Button>}
submitter={{
searchConfig: {
submitText: '确定',
resetText: '取消',
},
}}
onFinish={onCreateSubmit}
>
<ProFormText
rules={[
{
required: true,
max: 20,
},
{
pattern: /^[^\s]*$/g,
message: '禁止输入空格'
}
]}
fieldProps={{ showCount: true }}
width="md"
name="name"
label="盒子组名称"
placeholder="请输入盒子名称"
/>
<ProFormText
width="md"
name="boxList"
label="盒子选择"
fieldProps={{
readOnly: true,
value: `已选择${createFormRef.current?.getFieldValue('boxList')?.length || 0}个盒子`,
suffix: (
<Space>
<a onClick={() => {
createFormRef.current?.setFieldValue('boxList', null)
onBoxChoiceReset()
}} >恢复默认</a>
<a onClick={() => setBoxChoiceOpen(true)}>范围选择</a>
</Space>
)
}}
/>
</ModalForm>
)
}
<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>
</div>
<Divider style={{ margin: 0 }} />
</>
)}
{extraBtns}
<BoxTree
className={classNames(componentName + '-tree')}
treeCheckable={isTreeCheckable}
data={data}
onItemSelect={onItemSelect}
onItemCheck={onItemCheck}
onItemDelete={onBoxDelete}
{...treeProps}
/>
</div>
)
}

1
packages/biz/src/boxSelectTree/demo/basic.tsx
View File

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

18
packages/material/CHANGELOG.md
View File

@ -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

2
packages/material/package.json
View File

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

16
packages/meta/CHANGELOG.md
View File

@ -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

2
packages/meta/package.json
View File

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

33
packages/meta/src/cropperImage/CropperImage.tsx
View File

@ -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()
}
}));

59
packages/meta/src/cropperImage/demo/basic.tsx
View File

@ -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<any>()
return (
@ -15,26 +32,8 @@ export default () => {
<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,
w: 0.27170650730411683,
x: 0.19064741035856572,
y: 0.09703124999999999,
},
<Button onClick={() => {
setOdList([
{
"id": "456",
"x": 0.58543766,
@ -42,7 +41,25 @@ export default () => {
"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)}