@tencentcloud/roomkit-electron-vue3 2.6.7 → 2.7.1

package/src/TUIRoom/directives/vTap.ts

@@ -4,8 +4,9 @@ const TIME_OUT = 300;
 
 class VueTouch {
   public dom: HTMLElement;
-  public callback: Function;
+  public callback: (event: TouchEvent) => void;
   public isMove: boolean;
+  public isInOnceTouch: boolean;
   public isLazyTap: boolean;
 
   constructor(el: HTMLElement, binding: any) {
@@ -14,12 +15,13 @@ class VueTouch {
     this.isLazyTap = binding.modifiers.lazy;
 
     this.isMove = false;
+    this.isInOnceTouch = false;
 
     el?.addEventListener('touchstart', (event: TouchEvent) => {
       if (binding.modifiers.stop) {
         event.stopPropagation();
       }
-      this.touchstart();
+      this.touchstart(event);
     });
 
     el?.addEventListener('touchmove', (event: TouchEvent) => {
@@ -37,18 +39,27 @@ class VueTouch {
     });
   }
 
-  touchstart() {
+  touchstart(event: TouchEvent) {
+    if (event.touches.length > 1 || this.isInOnceTouch) {
+      return;
+    }
     this.isMove = false;
+    this.isInOnceTouch = true;
   }
 
   touchmove() {
+    if (!this.isInOnceTouch) {
+      return;
+    }
     this.isMove = true;
+    this.isInOnceTouch = false;
   }
 
-  touchend(event?: TouchEvent) {
-    if (this.isMove) {
+  touchend(event: TouchEvent) {
+    if (this.isMove || !this.isInOnceTouch) {
       return;
     }
+    this.isInOnceTouch = false;
     if (this.isLazyTap) {
       if (eventMap.get(this.dom)) {
         clearTimeout(eventMap.get(this.dom));

package/src/TUIRoom/directives/vTouchScale.ts

@@ -0,0 +1,230 @@
+/**
+ * <div v-touch-scale="enable"></div>
+ */
+
+const touchScaleElementMap = new Map<HTMLElement, TouchScale>();
+
+class TouchScale {
+  public touchDom: HTMLElement;
+  public transformDom: HTMLElement;
+
+  public lastPosition = { x: 0, y: 0 };
+  public lastCenterPosition = { x: 0, y: 0 };
+  public lastDistance = 0;
+
+  public currentTranslate = { x: 0, y: 0 };
+  public currentCenterPosition = { x: 0, y: 0 };
+  public currentScale = 1;
+
+  public tempScale = 1;
+  public tempTranslate = { x: 0, y: 0 };
+
+  public isOneFingerControl = false;
+  public isTwoFingerControl = false;
+
+  public isEnabled = false;
+
+  constructor(el: HTMLElement, binding: any) {
+    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);
+    this.touchDom?.addEventListener('touchstart', this.handleTouchStart, false);
+    this.touchDom?.addEventListener('touchmove', this.handleTouchMove, false);
+    this.touchDom?.addEventListener('touchend', this.handleTouchEnd, false);
+  }
+
+  public updateBinding(binding: any) {
+    this.isEnabled = !!binding.value;
+  }
+
+  public destroy() {
+    this.touchDom?.removeEventListener(
+      'touchstart',
+      this.handleTouchStart,
+      false
+    );
+    this.touchDom?.removeEventListener(
+      'touchmove',
+      this.handleTouchMove,
+      false
+    );
+    this.touchDom?.removeEventListener('touchend', this.handleTouchEnd, false);
+  }
+
+  private handleTouchStart(event: TouchEvent) {
+    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;
+    }
+  }
+
+  private handleTouchMove(event: TouchEvent) {
+    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);
+    }
+  }
+
+  private handleTouchEnd(event: TouchEvent) {
+    if (!this.isEnabled) {
+      return;
+    }
+    event.preventDefault();
+    if (this.currentScale !== 1) {
+      event.stopPropagation();
+    }
+    if (this.isTwoFingerControl) {
+      this.handleScaleEnd();
+    }
+    this.isTwoFingerControl = false;
+    this.isOneFingerControl = false;
+  }
+
+  private getDistance(touchTargetA: Touch, touchTargetB: Touch) {
+    return Math.sqrt(
+      Math.pow(touchTargetA.pageX - touchTargetB.pageX, 2) +
+        Math.pow(touchTargetA.pageY - touchTargetB.pageY, 2)
+    );
+  }
+
+  private getCenterPointer(touchTargetA: Touch, touchTargetB: Touch) {
+    return {
+      x: (touchTargetA.pageX + touchTargetB.pageX) / 2,
+      y: (touchTargetA.pageY + touchTargetB.pageY) / 2,
+    };
+  }
+
+  private getTranslateLimitedObj(
+    translateObj: { x: number; y: number },
+    scale: number
+  ) {
+    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;
+  }
+
+  private handleScaleStart(event: TouchEvent) {
+    const [initATarget, initBTarget] = event.touches;
+    this.lastDistance = this.getDistance(initATarget, initBTarget);
+    this.lastCenterPosition = this.getCenterPointer(initATarget, initBTarget);
+  }
+
+  private handleScaleMove(event: TouchEvent) {
+    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})`;
+  }
+
+  private handleScaleEnd() {
+    this.currentScale = this.tempScale;
+    this.currentTranslate = this.tempTranslate;
+  }
+
+  private handlePositionStart(event: TouchEvent) {
+    this.lastPosition = {
+      x: event.touches[0].pageX,
+      y: event.touches[0].pageY,
+    };
+  }
+
+  private handlePositionMove(event: TouchEvent) {
+    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: HTMLElement, binding: any) {
+    if (binding.value) {
+      const newTouchScale = new TouchScale(el, binding);
+      touchScaleElementMap.set(el, newTouchScale);
+    }
+  },
+  updated(el: HTMLElement, binding: any) {
+    if (touchScaleElementMap.get(el)) {
+      touchScaleElementMap.get(el)?.updateBinding(binding);
+    } else if (binding.value) {
+      const newTouchScale = new TouchScale(el, binding);
+      touchScaleElementMap.set(el, newTouchScale);
+    }
+  },
+  beforeUnmount(el: HTMLElement) {
+    touchScaleElementMap.get(el)?.destroy();
+    touchScaleElementMap.delete(el);
+  },
+};
+
+export default vDblTouch;

package/src/TUIRoom/extension/utils/setLanguage.ts

@@ -1,14 +1,10 @@
-import i18n from '../../locales/index';
-import { useBasicStore } from '../../stores/basic';
+import { roomService, LanguageOption } from '../../services';
 const languageMap = {
   zh: 'zh-CN',
   en: 'en-US',
 };
 export const setLanguage = (language: 'zh' | 'en') => {
-  const currentLanguage = languageMap[language] as 'zh-CN' | 'en-US';
+  const currentLanguage = languageMap[language] as LanguageOption;
   if (!currentLanguage) return;
-  const basicStore = useBasicStore();
-  i18n.global.locale.value = currentLanguage;
-  basicStore.setLang(currentLanguage);
-  localStorage.setItem('tuiRoom-language', currentLanguage);
+  roomService.setLanguage(currentLanguage);
 };

package/src/TUIRoom/locales/en-US.ts

@@ -278,8 +278,7 @@ export default {
     'Camera not detected on current device',
   'Camera And Microphone not detected on current device':
     'Camera And Microphone not detected on current device',
-  'Another user is currently sharing the screen, screen sharing is not possible.':
-    'Another user is currently sharing the screen, screen sharing is not possible.',
+  'Another user is sharing the screen.': 'Another user is sharing the screen.',
   'Screen sharing is currently active, cannot start the whiteboard.':
     'Screen sharing is currently active, cannot start the whiteboard.',
   'This action causes the room to be disbanded, does it continue?':
@@ -398,6 +397,11 @@ export default {
     'Your screen sharing has been stopped',
   'Your screen sharing has been stopped, Now only the host/admin can share the screen':
     'Your screen sharing has been stopped, Now only the host/admin can share the screen',
+  'The system prohibits the current browser from accessing the screen content, please enable the screen sharing privilege.':
+    'The system prohibits the current browser from accessing the screen content, please enable the screen sharing privilege.',
+  'User canceled screen sharing': 'User canceled screen sharing',
+  'An unknown error occurred while screen sharing, please try again.':
+    'An unknown error occurred while screen sharing, please try again.',
   'I got it': 'I got it',
   Attention: 'Attention',
   'Audio playback failed. Click the "Confirm" to resume playback':
@@ -500,19 +504,30 @@ export default {
   // room password
   'Entering the room now...': 'Entering the room now...',
   'The room is encrypted': 'The room is encrypted',
-  'Please enter your room password': 'Please enter your room password',
+  'Please enter the password': 'Please enter the password',
   'Your room password format is incorrect, please check it':
     'Your room password format is incorrect, please check it',
   Security: 'Security',
   'Room Password': 'Room Password',
   'Enter 6-digit password': 'Enter 6-digit password',
-  'Wrong password, please re-enter': 'Wrong password, please re-enter',
+  'Wrong password': 'Wrong password',
+  Encryption: 'Encryption',
   'Open whiteboard': 'Open whiteboard',
   'Close whiteboard': 'Close whiteboard',
   'Start annotating': 'Start annotating',
   'End annotating': 'End annotating',
   'You are sharing the whiteboard, please stop sharing first':
     'You are sharing the whiteboard, please stop sharing first',
+  'Line Size': 'Line Size',
+  'Line Color': 'Line Color',
+  'Arrow Size': 'Arrow Size',
+  'Arrow Color': 'Arrow Color',
+  'Text Size': 'Text Size',
+  'Text Color': 'Text Color',
+  'Shape Type': 'Shape Type',
+  'Shape Style': 'Shape Style',
+  'Shape Color': 'Shape Color',
+  'Shape Size': 'Shape Size',
   // Beauty
   Beauty: 'Beauty',
   'Beauty Effects': 'Beauty Effects',

package/src/TUIRoom/locales/zh-CN.ts

@@ -266,8 +266,7 @@ export default {
   'Camera not detected on current device': '当前设备未检测到摄像头',
   'Camera And Microphone not detected on current device':
     '当前设备未检测到摄像头和麦克风',
-  'Another user is currently sharing the screen, screen sharing is not possible.':
-    '当前有其他用户正在屏幕共享，无法进行屏幕共享',
+  'Another user is sharing the screen.': '其他成员正在屏幕共享',
   'Screen sharing is currently active, cannot start the whiteboard.':
     '当前正在屏幕共享，无法开启白板',
   'This action causes the room to be exited, does it continue?':
@@ -375,6 +374,11 @@ export default {
   'Your screen sharing has been stopped': '共享屏幕停止',
   'Your screen sharing has been stopped, Now only the host/admin can share the screen':
     '已停止您的共享，当前仅房主/管理员可以共享屏幕',
+  'The system prohibits the current browser from accessing the screen content, please enable the screen sharing privilege.':
+    '系统禁止当前浏览器获取屏幕内容, 请开启屏幕分享权限。',
+  'User canceled screen sharing': '用户取消屏幕分享',
+  'An unknown error occurred while screen sharing, please try again.':
+    '屏幕分享发生了未知错误，请重试',
   'I got it': '我知道了',
   Attention: '注意',
   'Audio playback failed. Click the "Confirm" to resume playback':
@@ -478,19 +482,30 @@ export default {
   // room password
   'Entering the room now...': '正在进入房间...',
   'The room is encrypted': '房间已加密',
-  'Please enter your room password': '请输入入会密码',
+  'Please enter the password': '请输入入会密码',
   'Your room password format is incorrect, please check it':
     '房间密码格式不正确，请检查',
   Security: '安全设置',
   'Room Password': '进房密码',
   'Enter 6-digit password': '请输入6位进房密码',
-  'Wrong password, please re-enter': '密码错误，请重新输入',
+  'Wrong password': '密码错误',
+  Encryption: '房间加密',
   'Open whiteboard': '开启白板',
   'Close whiteboard': '关闭白板',
   'Start annotating': '开始批注',
   'End annotating': '结束批注',
   'You are sharing the whiteboard, please stop sharing first':
     '您正在共享白板，请先停止共享',
+  'Line Size': '线条粗细',
+  'Line Color': '线条颜色',
+  'Arrow Size': '箭头大小',
+  'Arrow Color': '箭头颜色',
+  'Text Size': '文字大小',
+  'Text Color': '文字颜色',
+  'Shape Type': '图形类型',
+  'Shape Style': '形状样式',
+  'Shape Color': '图形颜色',
+  'Shape Size': '图形大小',
   // Beauty
   Beauty: '美颜',
   'Beauty Effects': '美颜特效',

package/src/TUIRoom/preConference.vue

@@ -237,10 +237,10 @@ onUnmounted(() => {
 }
 
 .tui-theme-black.pre-conference-container {
-  background: var(--background-color-1);
+  --background: var(--background-color-1);
 }
 
 .tui-theme-white.pre-conference-container {
-  background: url('./assets/imgs/background-white.png');
+  --background: url('./assets/imgs/background-white.png');
 }
 </style>