From cf69cd0a0d59cb36066c1d5f6d637d4160ad2c4e Mon Sep 17 00:00:00 2001 From: ZoeLeeFZ Date: Mon, 18 May 2020 10:29:10 +0800 Subject: [PATCH] =?UTF-8?q?!1030=20=E4=BC=98=E5=8C=96:=E8=B5=84=E6=BA=90?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=8A=A0=E5=85=A5=E6=A1=86=E9=80=89=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/SourceManage/CommonPanel.tsx | 57 +++++++- src/UI/Components/SourceManage/FileList.tsx | 1 + .../Components/SourceManage/SelectDataList.ts | 127 ++++++++++++++++++ .../Components/SourceManage/TexturePanel.less | 2 +- src/UI/Css/common.less | 8 ++ 5 files changed, 190 insertions(+), 5 deletions(-) create mode 100644 src/UI/Components/SourceManage/SelectDataList.ts diff --git a/src/UI/Components/SourceManage/CommonPanel.tsx b/src/UI/Components/SourceManage/CommonPanel.tsx index d70c861f3..4330f822d 100644 --- a/src/UI/Components/SourceManage/CommonPanel.tsx +++ b/src/UI/Components/SourceManage/CommonPanel.tsx @@ -12,6 +12,7 @@ import './TexturePanel.less'; import { PopoverButton } from '../Common/PopoverButton'; import { arrayLast } from '../../../Common/ArrayExt'; import { app } from '../../../ApplicationServices/Application'; +import { SelectDataTool } from './SelectDataList'; export interface IDirectoryProps { @@ -81,6 +82,9 @@ export class CommonPanel extends React.Component = new Map(); + private selectContainer: HTMLElement; + private selectTool: SelectDataTool; + private idKey: string; constructor(props) { super(props); @@ -97,6 +101,29 @@ export class CommonPanel extends React.Component) => { @@ -784,6 +811,25 @@ export class CommonPanel extends React.Component + { + this.dataList.forEach(d => d.isChecked = false); + this.needDeleteData.clear(); + }; + this.selectTool.SelectCallBack = (els: HTMLElement[]) => + { + let ids = els.map(el => el.getAttribute('data-id')); + + for (let img of this.dataList) + { + if (ids.includes(img[this.idKey])) + { + img.isChecked = true; + this.needDeleteData.add(img); + } + } + }; } componentWillUnmount() { @@ -792,6 +838,7 @@ export class CommonPanel extends React.Component - +
this.selectContainer = el} + > { React.Children.map(this.props.children, child => child && React.cloneElement(child as React.DetailedReactHTMLElement, @@ -913,7 +962,7 @@ export class CommonPanel extends React.Component } - +
{ diff --git a/src/UI/Components/SourceManage/FileList.tsx b/src/UI/Components/SourceManage/FileList.tsx index c38f2f16b..257d0fe05 100644 --- a/src/UI/Components/SourceManage/FileList.tsx +++ b/src/UI/Components/SourceManage/FileList.tsx @@ -170,6 +170,7 @@ export class FileList extends React.Component { this.isShowSize = !this.isShowSize} /> diff --git a/src/UI/Components/SourceManage/SelectDataList.ts b/src/UI/Components/SourceManage/SelectDataList.ts new file mode 100644 index 000000000..2bc52c7db --- /dev/null +++ b/src/UI/Components/SourceManage/SelectDataList.ts @@ -0,0 +1,127 @@ +export class SelectDataTool +{ + private mouseOn = false; + private startX: number; + private startY: number; + private selectEl: HTMLDivElement; + SelectCallBack: (els: HTMLElement[]) => void; + StartCallBack: () => void; + offsetTop: number; + offsetLeft: number; + constructor(private container: HTMLElement) + { + container.style.position = 'reletive'; + container.addEventListener('mousedown', this.Start); + container.addEventListener('mousemove', this.Move); + document.addEventListener('mouseup', this.Stop); + } + private getOffsetTop(el: HTMLElement) + { + let top = el.offsetTop; + while (el.offsetParent) + { + el = el.offsetParent as HTMLElement; + top += el.offsetTop; + } + return top; + } + private getOffsetLeft(el: HTMLElement) + { + let left = el.offsetLeft; + while (el.offsetParent) + { + el = el.offsetParent as HTMLElement; + left += el.offsetLeft; + } + return left; + } + private Start = (e: MouseEvent) => + { + let el = (e.target as HTMLElement); + if (el.nodeName !== "IMG" && el.nodeName !== "svg" && el.nodeName !== "path" && !el.className.includes('control')) + { + e.stopPropagation(); + e.preventDefault(); + } + else return; + this.StartCallBack(); + this.mouseOn = true; + let selectContainer = this.container; + this.offsetLeft = this.getOffsetLeft(selectContainer); + this.offsetTop = this.getOffsetTop(selectContainer); + this.startX = e.clientX - this.offsetLeft + selectContainer.scrollLeft; + this.startY = e.clientY - this.offsetTop + selectContainer.scrollTop; + let selDiv = document.createElement('div'); + selDiv.className = "select-box"; + selDiv.id = 'selectDiv'; + selectContainer.appendChild(selDiv); + this.selectEl = selDiv; + selDiv.style.left = this.startX + 'px'; + selDiv.style.top = this.startY + 'px'; + }; + private Move = (e: MouseEvent) => + { + if (!this.mouseOn) return; + let selectContainer = this.container; + let _x = e.clientX - this.offsetLeft + selectContainer.scrollLeft; + let _y = e.clientY - this.offsetTop + selectContainer.scrollTop; + let _H = selectContainer.clientHeight; + let _W = selectContainer.clientWidth; + // 向下拖拽 + if (_y >= _H && selectContainer.scrollTop <= _H) + { + selectContainer.scrollTop += _y - _H; + } + // 向上拖拽 + if (e.clientY <= selectContainer.offsetTop && selectContainer.scrollTop > 0) + { + selectContainer.scrollTop = Math.abs(e.clientY - selectContainer.offsetTop); + } + let selDiv = this.selectEl; + selDiv.style.display = 'block'; + selDiv.style.left = Math.min(_x, this.startX) + 'px'; + selDiv.style.top = Math.min(_y, this.startY) + 'px'; + selDiv.style.width = Math.abs(_x - this.startX) + 'px'; + selDiv.style.height = Math.abs(_y - this.startY) + 'px'; + }; + private Stop = (e: MouseEvent) => + { + if (!this.mouseOn) return; + let selDiv = this.selectEl; + let fileDivs = this.container.querySelectorAll('[data-id]') as NodeListOf; + let selectedEls = []; + let l = selDiv.offsetLeft; + let t = selDiv.offsetTop; + let w = selDiv.offsetWidth; + let h = selDiv.offsetHeight; + for (let i = 0; i < fileDivs.length; i++) + { + let sl = fileDivs[i].offsetWidth + fileDivs[i].offsetLeft; + let st = fileDivs[i].offsetHeight + fileDivs[i].offsetTop; + + if (sl > l && st > t && fileDivs[i].offsetLeft < l + w && fileDivs[i].offsetTop < t + h) + { + selectedEls.push(fileDivs[i]); + } + } + selDiv.style.display = 'none'; + this.mouseOn = false; + this.SelectEvent(selectedEls); + selDiv.remove(); + }; + private SelectEvent(els: HTMLElement[]) + { + if (this.SelectCallBack) + this.SelectCallBack(els); + } + Destory() + { + this.container.removeEventListener('mousedown', this.Start); + this.container.removeEventListener('mousemove', this.Move); + document.removeEventListener('mouseup', this.Stop); + this.StartCallBack(); + this.StartCallBack = null; + this.SelectCallBack([]); + this.SelectCallBack = null; + } +} diff --git a/src/UI/Components/SourceManage/TexturePanel.less b/src/UI/Components/SourceManage/TexturePanel.less index dccbbfba7..de88ec503 100644 --- a/src/UI/Components/SourceManage/TexturePanel.less +++ b/src/UI/Components/SourceManage/TexturePanel.less @@ -57,7 +57,7 @@ flex: 1; align-content: start; margin: 0; - overflow: auto; + overflow: visible; &>li { width: 20%; diff --git a/src/UI/Css/common.less b/src/UI/Css/common.less index ac780edff..0e48c52ec 100644 --- a/src/UI/Css/common.less +++ b/src/UI/Css/common.less @@ -37,3 +37,11 @@ } } } + +.select-box { + position: absolute; + width: 0; + height: 0; + background: rgb(19, 124, 189, 0.3); + opacity: 0.5; +}