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