@fangzhongya/fang-ui 0.0.14 → 0.0.15

package/dist/directives/adjust/index.ts

@@ -0,0 +1,775 @@
+import type { Directive } from 'vue';
+import { lineToSmallHump } from '@fangzhongya/utils/name/lineToSmallHump';
+import { getCss } from '@fangzhongya/utils/css/getCss';
+import { splitUpper } from '@fangzhongya/utils/basic/string/splitUpper';
+import { shiftEvent } from '@fangzhongya/utils/dom/getShiftEvent';
+import { setCss } from '@fangzhongya/utils/css/setCss';
+const interval = 8;
+const interval2 = 14;
+const overstep = 1000;
+const unit = 'px';
+type Positions = {
+	[key: string]: number;
+};
+
+type SeatEvent = MouseEvent | Touch;
+
+function getPosition(el?: HTMLElement) {
+	const keys = ['left', 'right', 'top', 'bottom', 'width', 'height'];
+	const obj: Positions = {};
+	keys.forEach((key) => {
+		if (el) {
+			obj[key] = Number(getCss(el, key).replace(/[a-z|A-Z|%]*$/, ''));
+		} else {
+			obj[key] = 0;
+		}
+	});
+	return obj;
+}
+function getNext(el: HTMLElement, paren?: HTMLElement) {
+	if (!paren) {
+		paren = el.parentElement || el;
+	}
+	const cs = paren.childNodes;
+	let index = 0;
+	let k = cs.length;
+	for (; index < cs.length; index++) {
+		const element = cs[index];
+		if (element === el) {
+			k = index;
+		}
+		if (k < index && element.nodeType == 1) {
+			break;
+		}
+	}
+	return cs[index] as HTMLElement;
+}
+function getFront(el: HTMLElement, paren?: HTMLElement) {
+	if (!paren) {
+		paren = el.parentElement || el;
+	}
+	const cs = paren.childNodes;
+	let index = cs.length - 1;
+	let k = -1;
+	for (; index >= 0; index--) {
+		const element = cs[index];
+		if (element === el) {
+			k = index;
+		}
+		if (k > index && element.nodeType == 1) {
+			break;
+		}
+	}
+	return cs[index] as HTMLElement;
+}
+
+function getAdjoin(el: HTMLElement, type: string) {
+	if (type == 'bottom' || type == 'right') {
+		return getNext(el);
+	} else {
+		return getFront(el);
+	}
+}
+
+function getHeight(el?: HTMLElement) {
+	if (el) {
+		const h = getCss(el, 'height');
+		const d = Number(h.replace(/[a-z|A-Z]*$/, '')) || el.clientHeight;
+		return d;
+	} else {
+		return 0;
+	}
+}
+function getWidth(el?: HTMLElement) {
+	if (el) {
+		const w = getCss(el, 'width');
+		const d = Number(w.replace(/[a-z|A-Z]*$/, '')) || el.clientWidth;
+		return d;
+	} else {
+		return 0;
+	}
+}
+
+function getDomHeight() {
+	const dom = document.querySelector('.v-adjust-xux-height');
+	if (dom) {
+		return dom as HTMLElement;
+	} else {
+		const xux = document.createElement('div');
+		xux.className = 'v-adjust-xux-height';
+		xux.style.zIndex = '100000';
+		xux.style.position = 'fixed';
+		xux.style.left = '0';
+		xux.style.right = '0';
+		xux.style.height = '0';
+		xux.style.display = 'none';
+		xux.style.borderBottom = '3px dashed #1d8bfa';
+		document.body.appendChild(xux);
+		return xux;
+	}
+}
+
+function getDomWidth() {
+	const dom = document.querySelector('.v-adjust-xux-width');
+	if (dom) {
+		return dom as HTMLElement;
+	} else {
+		const xux = document.createElement('div');
+		xux.className = 'v-adjust-xux-width';
+		xux.style.zIndex = '100000';
+		xux.style.position = 'fixed';
+		xux.style.top = '0';
+		xux.style.bottom = '0';
+		xux.style.width = '0';
+		xux.style.display = 'none';
+		xux.style.borderLeft = '3px dashed #1d8bfa';
+		document.body.appendChild(xux);
+		return xux;
+	}
+}
+
+/**
+ * 光标样式
+ * @param type
+ * @returns
+ */
+function getCursor(type: string) {
+	if (type == 'bottom' || type == 'top') {
+		return 'row-resize';
+	} else if (type == 'right' || type == 'left') {
+		return 'col-resize';
+	} else if (type == 'topRight') {
+		return 'ne-resize';
+	} else if (type == 'topLeft') {
+		return 'nw-resize';
+	} else if (type == 'bottomRight') {
+		return 'se-resize';
+	} else if (type == 'bottomLeft') {
+		return 'sw-resize';
+	} else {
+		return '';
+	}
+}
+type DomObjSet = (a: number, b: number) => void;
+
+type AdjustObjDomObj = {
+	show: () => void;
+	set: DomObjSet;
+};
+
+type AdjustObj = {
+	key: string;
+	el: HTMLElement;
+	param: any;
+	adjoin?: HTMLElement;
+
+	cursor: string;
+
+	domObj: AdjustObjDomObj;
+
+	setMousemove: (
+		mousedownEvent: SeatEvent,
+		rect: DOMRect,
+		event: SeatEvent,
+	) => void;
+
+	setMousedown: (mousedownEvent: SeatEvent) => void;
+
+	setValue: (
+		dom: HTMLElement,
+		z: number,
+		y: number,
+		obj: Positions,
+		acs: Positions,
+	) => void;
+	setMouseup: (
+		mousedownEvent: SeatEvent,
+		event: SeatEvent,
+		obj: Positions,
+		acs: Positions,
+	) => void;
+};
+
+/**
+ * 获取计算方法，配置什么位置触发可以拖动
+ * @param key
+ * @returns
+ */
+function getX(key: string, disabled: () => boolean) {
+	const ks = splitUpper(key);
+	if (ks.length == 1) {
+		if (key == 'bottom' || key == 'top') {
+			return (event: SeatEvent, rect: DOMRect) => {
+				if (disabled && disabled()) {
+					return overstep;
+				}
+				return rect[key] - event.pageY;
+			};
+		} else if (key == 'right' || key == 'left') {
+			return (event: SeatEvent, rect: DOMRect) => {
+				if (disabled && disabled()) {
+					return overstep;
+				}
+				return rect[key] - event.pageX;
+			};
+		} else {
+			return (event: SeatEvent, rect: DOMRect) => {
+				if (disabled && disabled()) {
+					return overstep;
+				}
+				return 0;
+			};
+		}
+	} else {
+		const k1 = ks[0] as 'bottom' | 'top';
+		const k2 = ks[1] as 'right' | 'left';
+		return (event: SeatEvent, rect: DOMRect) => {
+			if (disabled && disabled()) {
+				return overstep;
+			}
+			const y = rect[k1] - event.pageY;
+			const x = rect[k2] - event.pageX;
+			if (
+				x < interval2 &&
+				x > 0 - interval2 &&
+				y < interval &&
+				y > 0 - interval2
+			) {
+				return 0;
+			} else {
+				return overstep;
+			}
+		};
+	}
+}
+
+/**
+ * 获取设置dom的方法
+ * @param key
+ * @returns
+ */
+function getDomsObj(key: string) {
+	if (key == 'bottom' || key == 'top') {
+		const dom = getDomHeight();
+		return {
+			show: () => {
+				setCss(dom, 'display', 'block');
+			},
+			set: (top: number) => {
+				setCss(dom, 'top', top + unit);
+			},
+		};
+	} else if (key == 'right' || key == 'left') {
+		const dom = getDomWidth();
+		return {
+			show: () => {
+				setCss(dom, 'display', 'block');
+			},
+			set: (top: number) => {
+				setCss(dom, 'left', top + unit);
+			},
+		};
+	} else {
+		const dom1 = getDomWidth();
+		const dom2 = getDomHeight();
+		return {
+			show: () => {
+				setCss(dom1, 'display', 'block');
+				setCss(dom2, 'display', 'block');
+			},
+			set: (left: number, top: number) => {
+				setCss(dom1, 'left', left + unit);
+				setCss(dom2, 'top', top + unit);
+			},
+		};
+	}
+}
+
+/**
+ * 移动dom线
+ * @param key
+ * @param set
+ * @returns
+ */
+function getMousemove(key: string, set: DomObjSet) {
+	if (key == 'bottom') {
+		return (mousedownEvent: SeatEvent, rect: DOMRect, event: SeatEvent) => {
+			const y = event.clientY - mousedownEvent.clientY + rect.bottom;
+			set(y, 0);
+		};
+	} else if (key == 'top') {
+		return (mousedownEvent: SeatEvent, rect: DOMRect, event: SeatEvent) => {
+			const y = event.clientY - mousedownEvent.clientY + rect.top;
+			set(y, 0);
+		};
+	} else if (key == 'right') {
+		return (mousedownEvent: SeatEvent, rect: DOMRect, event: SeatEvent) => {
+			const y = event.clientX - mousedownEvent.clientX + rect.right;
+			set(y, 0);
+		};
+	} else if (key == 'left') {
+		return (mousedownEvent: SeatEvent, rect: DOMRect, event: SeatEvent) => {
+			const y = event.clientX - mousedownEvent.clientX + rect.left;
+			set(y, 0);
+		};
+	} else if (key == 'topRight') {
+		return (mousedownEvent: SeatEvent, rect: DOMRect, event: SeatEvent) => {
+			const x = event.clientX - mousedownEvent.clientX + rect.right;
+			const y = event.clientY - mousedownEvent.clientY + rect.top;
+			set(x, y);
+		};
+	} else if (key == 'bottomRight') {
+		return (mousedownEvent: SeatEvent, rect: DOMRect, event: SeatEvent) => {
+			const x = event.clientX - mousedownEvent.clientX + rect.right;
+			const y = event.clientY - mousedownEvent.clientY + rect.bottom;
+			set(x, y);
+		};
+	} else if (key == 'topLeft') {
+		return (mousedownEvent: SeatEvent, rect: DOMRect, event: SeatEvent) => {
+			const x = event.clientX - mousedownEvent.clientX + rect.left;
+			const y = event.clientY - mousedownEvent.clientY + rect.top;
+			set(x, y);
+		};
+	} else if (key == 'bottomLeft') {
+		return (mousedownEvent: SeatEvent, rect: DOMRect, event: SeatEvent) => {
+			const x = event.clientX - mousedownEvent.clientX + rect.left;
+			const y = event.clientY - mousedownEvent.clientY + rect.bottom;
+			set(x, y);
+		};
+	} else {
+		return (mousedownEvent: SeatEvent, rect: DOMRect, event: SeatEvent) => {
+			const x = event.clientX - mousedownEvent.clientX + rect.right;
+			const y = event.clientY - mousedownEvent.clientY + rect.top;
+			set(x, y);
+		};
+	}
+}
+
+/**
+ * 设置变动值
+ * @param key
+ * @param adjoin
+ * @returns
+ */
+function getValue(key: string, adjoin?: HTMLElement, position?: boolean) {
+	if (key == 'bottom') {
+		return (
+			dom: HTMLElement,
+			z: number,
+			y: number,
+			obj: Positions,
+			apo: Positions,
+		) => {
+			const v = obj.height + z;
+			if (v > 0) {
+				setCss(dom, 'height', v + unit);
+				if (adjoin) {
+					setCss(adjoin, 'height', apo.height - z + unit);
+				}
+			}
+		};
+	} else if (key == 'top') {
+		return (
+			dom: HTMLElement,
+			z: number,
+			y: number,
+			obj: Positions,
+			apo: Positions,
+		) => {
+			const v = obj.height + z;
+			if (v > 0) {
+				setCss(dom, 'height', v + unit);
+				if (adjoin) {
+					setCss(adjoin, 'height', apo.height - z + unit);
+				}
+				if (position) {
+					setCss(dom, 'top', obj.top - z + unit);
+				}
+			}
+		};
+	} else if (key == 'right') {
+		return (
+			dom: HTMLElement,
+			z: number,
+			y: number,
+			obj: Positions,
+			apo: Positions,
+		) => {
+			const v = obj.width + z;
+			if (v > 0) {
+				setCss(dom, 'width', v + unit);
+				if (adjoin) {
+					setCss(adjoin, 'width', apo.width - z + unit);
+				}
+			}
+		};
+	} else if (key == 'left') {
+		return (
+			dom: HTMLElement,
+			z: number,
+			y: number,
+			obj: Positions,
+			apo: Positions,
+		) => {
+			const v = obj.width + z;
+			if (v > 0) {
+				setCss(dom, 'width', v + unit);
+				if (adjoin) {
+					setCss(adjoin, 'width', apo.width - z + unit);
+				}
+				if (position) {
+					setCss(dom, 'left', obj.left - z + unit);
+				}
+			}
+		};
+	} else if (key == 'topRight') {
+		return (
+			dom: HTMLElement,
+			x: number,
+			y: number,
+			obj: Positions,
+			apo: Positions,
+		) => {
+			const v = obj.width + x;
+			if (v > 0) {
+				setCss(dom, 'width', v + unit);
+				if (adjoin) {
+					setCss(adjoin, 'width', apo.width - x + unit);
+				}
+			}
+			const n = obj.height + y;
+			if (n > 0) {
+				setCss(dom, 'height', n + unit);
+				if (adjoin) {
+					setCss(adjoin, 'height', apo.height - y + unit);
+				}
+				if (position) {
+					setCss(dom, 'top', obj.top - y + unit);
+				}
+			}
+		};
+	} else if (key == 'bottomRight') {
+		return (
+			dom: HTMLElement,
+			x: number,
+			y: number,
+			obj: Positions,
+			apo: Positions,
+		) => {
+			const v = obj.width + x;
+			if (v > 0) {
+				setCss(dom, 'width', v + unit);
+				if (adjoin) {
+					setCss(adjoin, 'width', apo.width - x + unit);
+				}
+			}
+			const n = obj.height + y;
+			if (n > 0) {
+				setCss(dom, 'height', n + unit);
+				if (adjoin) {
+					setCss(adjoin, 'height', apo.height - y + unit);
+				}
+			}
+		};
+	} else if (key == 'topLeft') {
+		return (
+			dom: HTMLElement,
+			x: number,
+			y: number,
+			obj: Positions,
+			apo: Positions,
+		) => {
+			const v = obj.width + x;
+			if (v > 0) {
+				setCss(dom, 'width', v + unit);
+				if (adjoin) {
+					setCss(adjoin, 'width', apo.width - x + unit);
+				}
+				if (position) {
+					setCss(dom, 'left', obj.left - x + unit);
+				}
+			}
+			const n = obj.height + y;
+			if (n > 0) {
+				setCss(dom, 'height', n + unit);
+				if (adjoin) {
+					setCss(adjoin, 'height', apo.height - y + unit);
+				}
+				if (position) {
+					setCss(dom, 'top', obj.top - y + unit);
+				}
+			}
+		};
+	} else if (key == 'bottomLeft') {
+		return (
+			dom: HTMLElement,
+			x: number,
+			y: number,
+			obj: Positions,
+			apo: Positions,
+		) => {
+			const v = obj.width + x;
+			if (v > 0) {
+				setCss(dom, 'width', v + unit);
+				if (adjoin) {
+					setCss(adjoin, 'width', apo.width - x + unit);
+				}
+				if (position) {
+					setCss(dom, 'left', obj.left - x + unit);
+				}
+			}
+			const n = obj.height + y;
+			if (n > 0) {
+				setCss(dom, 'height', n + unit);
+				if (adjoin) {
+					setCss(adjoin, 'height', apo.height - y + unit);
+				}
+			}
+		};
+	} else {
+		return (
+			dom: HTMLElement,
+			z: number,
+			y: number,
+			obj: Positions,
+			apo: Positions,
+		) => {};
+	}
+}
+
+const types = [
+	'bottom',
+	'top',
+	'right',
+	'left',
+	'topRight',
+	'bottomRight',
+	'topLeft',
+	'bottomLeft',
+];
+
+/**
+ * 获取对应对象
+ * @param el
+ * @param key
+ * @param param
+ * @returns
+ */
+function getAdjustObj(el: HTMLElement, key: string, param: any) {
+	key = lineToSmallHump(key);
+	let obj = {
+		key: key,
+		el: el,
+		param,
+	} as AdjustObj;
+	const noxux = param.noxux;
+	if (param.adjoin) {
+		if (typeof param.adjoin == 'boolean') {
+			obj.adjoin = getAdjoin(el, key);
+		} else if (typeof param.adjoin == 'string') {
+			obj.adjoin = el.parentElement?.querySelector(param.adjoin);
+		} else {
+			obj.adjoin = param.adjoin;
+		}
+	}
+	obj.cursor = getCursor(key);
+
+	obj.domObj = getDomsObj(key);
+
+	obj.setMousemove = getMousemove(key, obj.domObj.set);
+
+	obj.setMousedown = (mousedownEvent: SeatEvent) => {
+		if (key == 'bottom' || key == 'top') {
+			obj.domObj.set(mousedownEvent.clientY, 0);
+		} else if (key == 'right' || key == 'left') {
+			obj.domObj.set(mousedownEvent.clientX, 0);
+		} else {
+			obj.domObj.set(mousedownEvent.clientX, mousedownEvent.clientY);
+		}
+		if (!noxux) {
+			obj.domObj.show();
+		}
+	};
+
+	obj.setValue = getValue(key, obj.adjoin, param.position);
+	obj.setMouseup = (
+		mousedownEvent: SeatEvent,
+		event: SeatEvent,
+		ecs: Positions,
+		acs: Positions,
+	) => {
+		let x = 0;
+		let y = 0;
+		if (key == 'bottom') {
+			x = event.clientY - mousedownEvent.clientY;
+		} else if (key == 'top') {
+			x = mousedownEvent.clientY - event.clientY;
+		} else if (key == 'right') {
+			x = event.clientX - mousedownEvent.clientX;
+		} else if (key == 'left') {
+			x = mousedownEvent.clientX - event.clientX;
+		} else if (key == 'topRight') {
+			y = mousedownEvent.clientY - event.clientY;
+			x = event.clientX - mousedownEvent.clientX;
+		} else if (key == 'bottomRight') {
+			y = event.clientY - mousedownEvent.clientY;
+			x = event.clientX - mousedownEvent.clientX;
+		} else if (key == 'topLeft') {
+			y = mousedownEvent.clientY - event.clientY;
+			x = mousedownEvent.clientX - event.clientX;
+		} else if (key == 'bottomLeft') {
+			y = event.clientY - mousedownEvent.clientY;
+			x = mousedownEvent.clientX - event.clientX;
+		}
+		obj.setValue(el, x, y, ecs, acs);
+	};
+
+	const setX = getX(key, param.getDisabled);
+
+	return (event: SeatEvent, rect: DOMRect): typeof obj | undefined => {
+		const x = setX(event, rect);
+		if (x < interval && x > 0 - interval) {
+			return obj;
+		}
+	};
+}
+
+function getArr(obj: { [key: string]: any }, el: HTMLElement) {
+	const arr = obj.all ? types : Object.keys(obj);
+	return arr
+		.sort((a: string, b: string) => {
+			return b.length - a.length;
+		})
+		.map((key) => {
+			const v = obj.all ? obj.all : obj[key];
+			return getAdjustObj(el, key, v);
+		});
+}
+
+/**
+ *  Adjust
+ *  改变窗口大小
+ */
+export default {
+	name: 'Adjust',
+	mounted(el, binding) {
+		const value = binding.value;
+		const often = value.often;
+		const onChange = value.onChange;
+		delete value.onChange;
+		delete value.often;
+		if (value && Object.keys(value).length > 0) {
+			const arr = getArr(value, el);
+
+			let vobj: AdjustObj;
+
+			const bodyStyle = document.body.style;
+			const cursor = bodyStyle.cursor;
+
+			let status = true;
+			let isCur = false;
+
+			let eps: DOMRect;
+			let ecs: Positions;
+			let acs: Positions;
+
+			function getVobj(e: SeatEvent) {
+				let is = true;
+				for (let index = 0; index < arr.length; index++) {
+					const v = arr[index](e, eps);
+					if (v) {
+						vobj = v;
+						isCur = true;
+						is = false;
+						bodyStyle.cursor = vobj.cursor;
+						return true;
+					}
+				}
+				if (is) {
+					isCur = false;
+					bodyStyle.cursor = cursor;
+					return false;
+				}
+			}
+
+			const mousemove = (e: MouseEvent) => {
+				if (status) {
+					eps = el.getBoundingClientRect();
+					getVobj(e);
+				}
+			};
+			const mouseout = (e: Event) => {
+				if (status) {
+					remove();
+				}
+			};
+
+			let mousedownEvent: SeatEvent;
+
+			const handleMouseMove = (event: SeatEvent) => {
+				vobj.setMousemove(mousedownEvent, eps, event);
+				if (often) {
+					vobj.setMouseup(mousedownEvent, event, ecs, acs);
+				}
+			};
+			const handleMouseUp = (event: SeatEvent) => {
+				if (isCur) {
+					vobj.setMouseup(mousedownEvent, event, ecs, acs);
+					if (onChange && typeof onChange == 'function') {
+						onChange(vobj, {
+							start: mousedownEvent,
+							end: event,
+							startPosit: ecs,
+							endPosit: getPosition(vobj.el),
+						});
+					}
+				}
+				remove();
+			};
+
+			function remove() {
+				bodyStyle.cursor = cursor;
+				status = true;
+				if (isCur) {
+					setCss(getDomHeight(), 'display', 'none');
+					setCss(getDomWidth(), 'display', 'none');
+				}
+				isCur = false;
+			}
+
+			const mousedown = (e: SeatEvent, type: 'touch' | 'mouse') => {
+				if (isCur) {
+					mousedownEvent = e;
+					ecs = getPosition(el);
+					acs = getPosition(vobj.adjoin);
+
+					status = false;
+
+					vobj.setMousedown(e);
+
+					bodyStyle.cursor = vobj.cursor;
+
+					shiftEvent(type, document, handleMouseMove, handleMouseUp);
+				}
+			};
+
+			el.addEventListener('mousemove', mousemove);
+
+			el.addEventListener('mouseout', mouseout);
+
+			el.addEventListener('touchstart', (e: TouchEvent) => {
+				const changedTouches = e.changedTouches[0];
+				eps = el.getBoundingClientRect();
+				const is = getVobj(changedTouches);
+				if (is) {
+					mousedown(changedTouches, 'touch');
+				}
+			});
+			el.addEventListener('mousedown', (e: MouseEvent) => {
+				if (isCur) {
+					mousedown(e, 'mouse');
+				}
+			});
+		}
+	},
+} as Directive;