mirror of https://gitee.com/cf-fz/WebCAD.git
!1030 优化:资源管理加入框选功能
parent
c9d5615433
commit
cf69cd0a0d
@ -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;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in new issue