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,

29
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 {
&-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;
}
}

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

@ -128,20 +128,27 @@ 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} />
<div className={classNames(componentName + '-search')}>
<Input
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>
)
}

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

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

@ -8,32 +8,14 @@ export default () => {
const [editAble, setEditAble] = useState(false)
const cropperRef = useRef(null)
const [imgUrl, setImgUrl] = useState('')
const [selectedItem, setSelectedItem] = useState<any>()
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={[
const [odList, setOdList] = useState([
{
"id": "123",
h: 0.30666666666666664,
w: 0.27170650730411683,
x: 0.19064741035856572,
y: 0.09703124999999999,
"x": 0.5519352,
"y": 0.2965385,
"w": 0.05185461,
"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)}