public bindTo()

in packages/attribute-slicer/src/selection/JQuerySelectionManager.ts [56:148]


	public bindTo(
		listEle: BaseSelection,
		className: string,
		eleItemGetter: (ele: BaseSelection) => T,
		itemEleGetter: (item: T) => BaseSelection,
	): () => void {
		this.listEle = listEle;
		this.itemSelector = `.${className}`;
		this.eleItemGetter = eleItemGetter;
		this.itemEleGetter = itemEleGetter;

		listEle.on(`contextmenu${EVENTS_NS}`, () => this.endDrag());
		listEle.on(`selectstart${EVENTS_NS}`, () => false);
		listEle.on(`mouseenter${EVENTS_NS}`, () => {
			const e = d3Selection.event;
			e.stopPropagation();
			this.endDrag();
		});
		listEle.on(`mouseleave${EVENTS_NS}`, () => this.endDrag());
		listEle.on(`mousedown${EVENTS_NS}`, () => {
			const e = d3Selection.event;
			e.stopPropagation();
			this.keyPressed({ ctrl: e.ctrlKey, shift: e.shiftKey });
			const button: number = e.which || e["buttons"];
			if (button === 1) {
				// Only let the left mouse button start it
				let $target: BaseSelection = select(e.target);
				if (!$target.classed(className)) {
					let current = $target.node();
					while (current && current !== document.body) {
						if (select(current).classed("item")) {
							$target = select(current);
							break;
						}
						current = current.parentElement;
					}
				}
				if ($target.classed(className)) {
					this.mouseDownEle = $target;
					this.lastMouseDownX = e.clientX;
					this.lastMouseDownY = e.clientY;
				}
			}
		});
		listEle.on(`mouseup${EVENTS_NS}`, () => {
			const e = d3Selection.event;
			e.stopPropagation();
			this.keyPressed({ ctrl: e.ctrlKey, shift: e.shiftKey });
			this.lastMouseDownX = undefined;
			this.lastMouseDownY = undefined;
			if (this.internalDragging) {
				this.endDrag();
			}
		});
		listEle.on(`mousemove${EVENTS_NS}`, () => {
			const e = d3Selection.event;
			e.stopPropagation();
			const button: number = e.which || e["buttons"];
			// If the user moved more than 10 px in any direction with the mouse down
			if (button !== 1) {
				// No longer dragging
				this.endDrag();
			} else if (
				this.lastMouseDownX !== undefined &&
				(Math.abs(e.clientX - this.lastMouseDownX) >= 10 ||
					Math.abs(e.clientY - this.lastMouseDownY)) &&
				!this.internalDragging
			) {
				this.startDrag();

				// Add the item that we mouse downed on
				const item: T = this.eleItemGetter(this.mouseDownEle);
				if (item) {
					this.itemHovered(item);
				}
			}
		});

		this.refresh();

		// Return a function to unbind
		return (): void => {
			const u: undefined = undefined;
			listEle.on(EVENTS_NS, null);
			listEle.selectAll(this.itemSelector).on(EVENTS_NS, null);
			this.listEle = u;
			this.itemSelector = u;
			this.eleItemGetter = u;
			this.lastMouseDownX = u;
			this.lastMouseDownY = u;
			this.mouseDownEle = u;
		};
	}