@tencentcloud/roomkit-web-vue3
Version:
<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,
201 lines (200 loc) • 7.32 kB
JavaScript
"use strict";
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const touchScaleElementMap = /* @__PURE__ */ new Map();
class TouchScale {
constructor(el, binding) {
__publicField(this, "touchDom");
__publicField(this, "transformDom");
__publicField(this, "lastPosition", { x: 0, y: 0 });
__publicField(this, "lastCenterPosition", { x: 0, y: 0 });
__publicField(this, "lastDistance", 0);
__publicField(this, "currentTranslate", { x: 0, y: 0 });
__publicField(this, "currentCenterPosition", { x: 0, y: 0 });
__publicField(this, "currentScale", 1);
__publicField(this, "tempScale", 1);
__publicField(this, "tempTranslate", { x: 0, y: 0 });
__publicField(this, "isOneFingerControl", false);
__publicField(this, "isTwoFingerControl", false);
__publicField(this, "isEnabled", false);
var _a, _b, _c;
this.touchDom = el;
this.transformDom = el;
this.transformDom.style.transformOrigin = "0 0";
this.isEnabled = !!binding.value;
this.handleTouchStart = this.handleTouchStart.bind(this);
this.handleTouchMove = this.handleTouchMove.bind(this);
this.handleTouchEnd = this.handleTouchEnd.bind(this);
(_a = this.touchDom) == null ? void 0 : _a.addEventListener("touchstart", this.handleTouchStart, false);
(_b = this.touchDom) == null ? void 0 : _b.addEventListener("touchmove", this.handleTouchMove, false);
(_c = this.touchDom) == null ? void 0 : _c.addEventListener("touchend", this.handleTouchEnd, false);
}
updateBinding(binding) {
this.isEnabled = !!binding.value;
}
destroy() {
var _a, _b, _c;
(_a = this.touchDom) == null ? void 0 : _a.removeEventListener(
"touchstart",
this.handleTouchStart,
false
);
(_b = this.touchDom) == null ? void 0 : _b.removeEventListener(
"touchmove",
this.handleTouchMove,
false
);
(_c = this.touchDom) == null ? void 0 : _c.removeEventListener("touchend", this.handleTouchEnd, false);
}
handleTouchStart(event) {
if (!this.isEnabled) {
return;
}
event.preventDefault();
if (this.currentScale !== 1) {
event.stopPropagation();
}
if (event.touches.length === 2) {
this.handleScaleStart(event);
this.isTwoFingerControl = true;
}
if (event.touches.length === 1) {
this.handlePositionStart(event);
this.isOneFingerControl = true;
}
}
handleTouchMove(event) {
if (!this.isEnabled) {
return;
}
event.preventDefault();
if (this.tempScale !== 1) {
event.stopPropagation();
}
if (event.touches.length === 2 && this.isTwoFingerControl) {
this.handleScaleMove(event);
}
if (event.touches.length === 1 && this.isOneFingerControl) {
this.handlePositionMove(event);
}
}
handleTouchEnd(event) {
if (!this.isEnabled) {
return;
}
event.preventDefault();
if (this.currentScale !== 1) {
event.stopPropagation();
}
if (this.isTwoFingerControl) {
this.handleScaleEnd();
}
this.isTwoFingerControl = false;
this.isOneFingerControl = false;
}
getDistance(touchTargetA, touchTargetB) {
return Math.sqrt(
Math.pow(touchTargetA.pageX - touchTargetB.pageX, 2) + Math.pow(touchTargetA.pageY - touchTargetB.pageY, 2)
);
}
getCenterPointer(touchTargetA, touchTargetB) {
return {
x: (touchTargetA.pageX + touchTargetB.pageX) / 2,
y: (touchTargetA.pageY + touchTargetB.pageY) / 2
};
}
getTranslateLimitedObj(translateObj, scale) {
const translateResult = { ...translateObj };
if (translateObj.x > 0) {
translateResult.x = 0;
}
if (translateObj.x < 0 - (scale - 1) * this.transformDom.offsetWidth) {
translateResult.x = 0 - (scale - 1) * this.transformDom.offsetWidth;
}
if (translateObj.y > 0) {
translateResult.y = 0;
}
if (translateObj.y < 0 - (scale - 1) * this.transformDom.offsetHeight) {
translateResult.y = 0 - (scale - 1) * this.transformDom.offsetHeight;
}
return translateResult;
}
handleScaleStart(event) {
const [initATarget, initBTarget] = event.touches;
this.lastDistance = this.getDistance(initATarget, initBTarget);
this.lastCenterPosition = this.getCenterPointer(initATarget, initBTarget);
}
handleScaleMove(event) {
const [moveATarget, moveBTarget] = event.touches;
const moveDistance = this.getDistance(moveATarget, moveBTarget);
const centerPosition = this.getCenterPointer(moveATarget, moveBTarget);
this.tempScale = this.currentScale * (moveDistance / this.lastDistance);
if (this.tempScale <= 1) {
this.tempTranslate = { x: 0, y: 0 };
this.tempScale = 1;
} else {
const gapTop = moveDistance / this.lastDistance * (this.currentScale * this.lastCenterPosition.y) - this.currentScale * centerPosition.y;
const gapLeft = moveDistance / this.lastDistance * (this.currentScale * this.lastCenterPosition.x) - this.currentScale * centerPosition.x;
this.tempTranslate = {
x: this.currentTranslate.x - gapLeft,
y: this.currentTranslate.y - gapTop
};
this.tempTranslate = this.getTranslateLimitedObj(
this.tempTranslate,
this.tempScale
);
}
this.transformDom.style.transform = `translate(${this.tempTranslate.x}px, ${this.tempTranslate.y}px) scale(${this.tempScale})`;
}
handleScaleEnd() {
this.currentScale = this.tempScale;
this.currentTranslate = this.tempTranslate;
}
handlePositionStart(event) {
this.lastPosition = {
x: event.touches[0].pageX,
y: event.touches[0].pageY
};
}
handlePositionMove(event) {
const currentPosition = {
x: event.touches[0].pageX,
y: event.touches[0].pageY
};
this.currentTranslate = {
x: this.currentTranslate.x + (currentPosition.x - this.lastPosition.x),
y: this.currentTranslate.y + (currentPosition.y - this.lastPosition.y)
};
this.currentTranslate = this.getTranslateLimitedObj(
this.currentTranslate,
this.currentScale
);
this.lastPosition = currentPosition;
this.transformDom.style.transform = `translate(${this.currentTranslate.x}px, ${this.currentTranslate.y}px) scale(${this.currentScale})`;
}
}
const vDblTouch = {
mounted(el, binding) {
if (binding.value) {
const newTouchScale = new TouchScale(el, binding);
touchScaleElementMap.set(el, newTouchScale);
}
},
updated(el, binding) {
var _a;
if (touchScaleElementMap.get(el)) {
(_a = touchScaleElementMap.get(el)) == null ? void 0 : _a.updateBinding(binding);
} else if (binding.value) {
const newTouchScale = new TouchScale(el, binding);
touchScaleElementMap.set(el, newTouchScale);
}
},
beforeUnmount(el) {
var _a;
(_a = touchScaleElementMap.get(el)) == null ? void 0 : _a.destroy();
touchScaleElementMap.delete(el);
}
};
exports.default = vDblTouch;