!1030 优化:资源管理加入框选功能

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<ICommonPanelProps, ICommonPanel
         canDelete: true,
     };
     static CurrentDirCache: Map<string, IDirectoryProps> = 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<ICommonPanelProps, ICommonPanel
             this.pageData.pageCount = 15;
         else if (this.props.defaultDirId === DirectoryId.TemplateDir)
             this.pageData.pageCount = 12; //模板每页12条
+
+        switch (this.props.defaultDirId)
+        {
+            case DirectoryId.ImgDir:
+                this.idKey = "image_id";
+                break;
+            case DirectoryId.FileDir:
+                this.idKey = "file_id";
+                break;
+            case DirectoryId.MaterialDir:
+                this.idKey = "material_id";
+                break;
+            case DirectoryId.ToplineDir:
+                this.idKey = "topline_id";
+                break;
+            case DirectoryId.DrillingDir:
+            case DirectoryId.TemplateDir:
+                this.idKey = "module_id";
+                break;
+            default:
+                console.warn("未知目录id");
+                this.idKey = "";
+        }
     }
     private handleSelectAll = (e: React.FormEvent<HTMLInputElement>) =>
     {
@@ -784,6 +811,25 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
         this.tree.addEventListener('dragleave', this.handleDragLeave);
         this.tree.addEventListener("drop", this.handleMoveFiles);
         document.addEventListener('dragend', this.handleDragEnd);
+        this.selectTool = new SelectDataTool(this.selectContainer);
+        this.selectTool.StartCallBack = () =>
+        {
+            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<ICommonPanelProps, ICommonPanel
         this.tree.removeEventListener('dragleave', this.handleDragLeave);
         this.tree.removeEventListener("drop", this.handleMoveFiles);
         document.removeEventListener('dragend', this.handleDragEnd);
+        this.selectTool.Destory();
     }
     render()
     {
@@ -890,9 +937,11 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
                                 className={Classes.ELEVATION_0}
                             />
                         </div>
-                        <Card
+                        <div
-                            className="img-lib"
+                            className="bp3-card img-lib"
-                            onDragStart={this.handleDragStart}>
+                            onDragStart={this.handleDragStart}
+                            ref={el => this.selectContainer = el}
+                        >
                             {
                                 React.Children.map(this.props.children, child =>
                                     child && React.cloneElement(child as React.DetailedReactHTMLElement<any, any>,
@@ -913,7 +962,7 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
                                     pageData={this.pageData}
                                 />
                             }
-                        </Card>
+                        </div>
                     </Card>
                 </Card>
                 {

src/UI/Components/SourceManage/FileList.tsx

@@ -170,6 +170,7 @@ export class FileList extends React.Component<IFileListProps, {}> {
                 <Checkbox
                     checked={this.isShowSize}
                     label="显示文件大小"
+                    style={{ width: "max-content" }}
                     onChange={() => this.isShowSize = !this.isShowSize}
                 />
             </>

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<HTMLElement>;
+        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;
+    }
+}

src/UI/Components/SourceManage/TexturePanel.less

@@ -57,7 +57,7 @@
                 flex: 1;
                 align-content: start;
                 margin: 0;
-                overflow: auto;
+                overflow: visible;
 
                 &>li {
                     width: 20%;

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;
+}