@tmagic/stage 1.1.0-beta.6 → 1.1.0-beta.7

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0-beta.6",
+  "version": "1.1.0-beta.7",
   "name": "@tmagic/stage",
   "sideEffects": [
     "dist/*"
@@ -29,9 +29,9 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/core": "1.1.0-beta.6",
-    "@tmagic/schema": "1.1.0-beta.6",
-    "@tmagic/utils": "1.1.0-beta.6",
+    "@tmagic/core": "1.1.0-beta.7",
+    "@tmagic/schema": "1.1.0-beta.7",
+    "@tmagic/utils": "1.1.0-beta.7",
     "events": "^3.3.0",
     "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",

package/src/StageCore.ts

@@ -180,7 +180,7 @@ export default class StageCore extends EventEmitter {
     if (!canSelectByProp) return false;
     // 多选规则
     if (this.mask.isMultiSelectStatus) {
-      return this.multiDr.canSelect(el);
+      return this.multiDr.canSelect(el, stop);
     }
     return true;
   }

package/src/StageMask.ts

@@ -108,11 +108,16 @@ export default class StageMask extends Rule {
     this.content.addEventListener('wheel', this.mouseWheelHandler);
     this.content.addEventListener('mousemove', this.highlightHandler);
     this.content.addEventListener('mouseleave', this.mouseLeaveHandler);
-    KeyController.global.keydown('shift', (e) => {
+
+    const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
+
+    const ctrl = isMac ? 'meta' : 'ctrl';
+
+    KeyController.global.keydown(ctrl, (e) => {
       e.inputEvent.preventDefault();
       this.isMultiSelectStatus = true;
     });
-    KeyController.global.keyup('shift', (e) => {
+    KeyController.global.keyup(ctrl, (e) => {
       e.inputEvent.preventDefault();
       this.isMultiSelectStatus = false;
     });

package/src/StageMultiDragResize.ts

@@ -127,16 +127,20 @@ export default class StageMultiDragResize extends EventEmitter {
       });
   }
 
-  public canSelect(el: HTMLElement): Boolean {
-    // 多选不可以选中magic-ui-page
+  public canSelect(el: HTMLElement, stop: () => boolean): Boolean {
+    // 多选状态下不可以选中magic-ui-page，并停止继续向上层选中
     if (el.className.includes(PAGE_CLASS)) {
       this.core.highlightedDom = undefined;
       this.core.highlightLayer.clearHighlight();
+      stop();
       return false;
     }
     const currentTargetMode = getMode(el);
     let selectedDomMode = '';
-
+    if (this.core.selectedDom?.className.includes(PAGE_CLASS)) {
+      // 先单击选中了页面(magic-ui-page)，再按住多选键多选时，任一元素均可选中
+      return true;
+    }
     if (this.targetList.length === 0 && this.core.selectedDom) {
       // 单选后添加到多选的情况
       selectedDomMode = getMode(this.core.selectedDom);

package/types/StageMultiDragResize.d.ts

@@ -22,7 +22,7 @@ export default class StageMultiDragResize extends EventEmitter {
      * @param els
      */
     multiSelect(els: HTMLElement[]): void;
-    canSelect(el: HTMLElement): Boolean;
+    canSelect(el: HTMLElement, stop: () => boolean): Boolean;
     /**
      * 清除多选状态
      */