feat(editor, stage): 新增禁用多选的props

Tencent · Dec 18, 2023 · 2a5b9ec · 2a5b9ec
1 parent 09fe6d2
commit 2a5b9ec
Show file tree

Hide file tree

Showing 12 changed files with 184 additions and 85 deletions.
diff --git a/docs/api/editor/props.md b/docs/api/editor/props.md
@@ -923,4 +923,22 @@ const updateDragEl = (el, target) => {
   <m-editor :disabled-drag-start="true"></m-editor>
 </template>
 ```
+  
+## disabledMultiSelect
+
+- **详情：**
+  
+禁止多选
+
+- **类型：** `boolean`
+  
+- **默认值：** `false`
+
+- **示例：**
+
+```html
+<template>
+  <m-editor :disabled-multi-select="true"></m-editor>
+</template>
+```
   
diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
@@ -177,6 +177,7 @@ provide(
     disabledDragStart: props.disabledDragStart,
     renderType: props.renderType,
     guidesOptions: props.guidesOptions,
+    disabledMultiSelect: props.disabledMultiSelect,
   }),
 );
 

diff --git a/packages/editor/src/components/TreeNode.vue b/packages/editor/src/components/TreeNode.vue
@@ -18,7 +18,7 @@
     >
       <MIcon
         class="expand-icon"
-        :style="hasChilren ? '' : 'color: transparent; cursor: default'"
+        :style="hasChildren ? '' : 'color: transparent; cursor: default'"
         :icon="expanded ? ArrowDown : ArrowRight"
         @click="expandHandler"
       ></MIcon>
@@ -35,7 +35,7 @@
       </div>
     </div>
 
-    <div v-if="hasChilren && expanded" class="m-editor-tree-node-children">
+    <div v-if="hasChildren && expanded" class="m-editor-tree-node-children">
       <TreeNode
         v-for="item in data.items"
         :key="item.id"
@@ -114,7 +114,7 @@ const selected = computed(() => nodeStatus.value.selected);
 const visible = computed(() => nodeStatus.value.visible);
 const draggable = computed(() => nodeStatus.value.draggable);
 
-const hasChilren = computed(() => props.data.items?.some((item) => props.nodeStatusMap.get(item.id)?.visible));
+const hasChildren = computed(() => props.data.items?.some((item) => props.nodeStatusMap.get(item.id)?.visible));
 
 const handleDragStart = (event: DragEvent) => {
   treeEmit?.('node-dragstart', event, props.data);

diff --git a/packages/editor/src/editorProps.ts b/packages/editor/src/editorProps.ts
@@ -73,6 +73,7 @@ export interface EditorProps {
   /** 自定义依赖收集器，复制组件时会将关联依赖一并复制 */
   collectorOptions?: CustomTargetOptions;
   guidesOptions?: Partial<GuidesOptions>;
+  disabledMultiSelect?: boolean;
 }
 
 export const defaultEditorProps = {
@@ -93,4 +94,5 @@ export const defaultEditorProps = {
   containerHighlightType: ContainerHighlightType.DEFAULT,
   codeOptions: () => ({}),
   renderType: RenderType.IFRAME,
+  disabledMultiSelect: false,
 };
diff --git a/packages/editor/src/hooks/use-stage.ts b/packages/editor/src/hooks/use-stage.ts
@@ -1,4 +1,4 @@
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 
 import type { MNode } from '@tmagic/schema';
 import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage';
@@ -45,8 +45,20 @@ export const useStage = (stageOptions: StageOptions) => {
     moveableOptions: stageOptions.moveableOptions,
     updateDragEl: stageOptions.updateDragEl,
     guidesOptions: stageOptions.guidesOptions,
+    disabledMultiSelect: stageOptions.disabledMultiSelect,
   });
 
+  watch(
+    () => editorService.get('disabledMultiSelect'),
+    (disabledMultiSelect) => {
+      if (disabledMultiSelect) {
+        stage.disableMultiSelect();
+      } else {
+        stage.enableMultiSelect();
+      }
+    },
+  );
+
   stage.mask.setGuides([
     getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
     getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),

diff --git a/packages/editor/src/initService.ts b/packages/editor/src/initService.ts
@@ -47,6 +47,16 @@ export const initServiceState = (
     },
   );
 
+  watch(
+    () => props.disabledMultiSelect,
+    (disabledMultiSelect) => {
+      editorService.set('disabledMultiSelect', disabledMultiSelect || false);
+    },
+    {
+      immediate: true,
+    },
+  );
+
   watch(
     () => props.componentGroupList,
     (componentGroupList) => componentGroupList && componentListService.setList(componentGroupList),

diff --git a/packages/editor/src/layouts/sidebar/layer/use-click.ts b/packages/editor/src/layouts/sidebar/layer/use-click.ts
@@ -1,4 +1,4 @@
-import { type ComputedRef, nextTick, type Ref, ref } from 'vue';
+import { computed, type ComputedRef, nextTick, type Ref, ref } from 'vue';
 import { throttle } from 'lodash-es';
 
 import { Id, MNode } from '@tmagic/schema';
@@ -13,13 +13,15 @@ export const useClick = (
   isCtrlKeyDown: Ref<boolean>,
   nodeStatusMap: ComputedRef<Map<Id, LayerNodeStatus> | undefined>,
 ) => {
+  const isMultiSelect = computed(() => isCtrlKeyDown.value && !services?.editorService.get('disabledMultiSelect'));
+
   // 触发画布选中
   const select = async (data: MNode) => {
     if (!data.id) {
       throw new Error('没有id');
     }
 
-    if (isCtrlKeyDown.value) {
+    if (isMultiSelect.value) {
       multiSelect(data);
     } else {
       await services?.editorService.select(data);
@@ -70,7 +72,7 @@ export const useClick = (
       return;
     }
 
-    if (data.items && data.items.length > 0 && !isCtrlKeyDown.value) {
+    if (data.items && data.items.length > 0 && !isMultiSelect.value) {
       updateStatus(nodeStatusMap.value, data.id, {
         expand: true,
       });

diff --git a/packages/editor/src/services/editor.ts b/packages/editor/src/services/editor.ts
@@ -58,6 +58,7 @@ class Editor extends BaseService {
     highlightNode: null,
     modifiedNodeIds: new Map(),
     pageLength: 0,
+    disabledMultiSelect: false,
   });
   private isHistoryStateChange = false;
 

diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
@@ -133,6 +133,7 @@ export interface StageOptions {
   updateDragEl: UpdateDragEl;
   renderType: RenderType;
   guidesOptions: Partial<GuidesOptions>;
+  disabledMultiSelect?: boolean;
 }
 
 export interface StoreState {
@@ -146,6 +147,7 @@ export interface StoreState {
   stageLoading: boolean;
   modifiedNodeIds: Map<Id, Id>;
   pageLength: number;
+  disabledMultiSelect: boolean;
 }
 
 export type StoreStateKey = keyof StoreState;