feat(stage,editor): 添加disabledDragStart配置,用于关闭按下鼠标并拖动功能

packages/editor/src/Editor.vue

@@ -218,6 +218,10 @@ export default defineComponent({
     updateDragEl: {
       type: Function as PropType<UpdateDragEl>,
     },
+
+    disabledDragStart: {
+      type: Boolean,
+    },
   },
 
   emits: ['props-panel-mounted', 'update:modelValue'],
@@ -351,6 +355,7 @@ export default defineComponent({
         containerHighlightClassName: props.containerHighlightClassName,
         containerHighlightDuration: props.containerHighlightDuration,
         containerHighlightType: props.containerHighlightType,
+        disabledDragStart: props.disabledDragStart,
       }),
     );
 

packages/editor/src/type.ts

@@ -62,6 +62,7 @@ export interface StageOptions {
   containerHighlightClassName: string;
   containerHighlightDuration: number;
   containerHighlightType: ContainerHighlightType;
+  disabledDragStart?: boolean;
   render: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
   moveableOptions: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
   canSelect: (el: HTMLElement) => boolean | Promise<boolean>;

packages/editor/src/utils/stage.ts

@@ -26,6 +26,7 @@ export const useStage = (stageOptions: StageOptions) => {
     containerHighlightClassName: stageOptions.containerHighlightClassName,
     containerHighlightDuration: stageOptions.containerHighlightDuration,
     containerHighlightType: stageOptions.containerHighlightType,
+    disabledDragStart: stageOptions.disabledDragStart,
     canSelect: (el, event, stop) => {
       const elCanSelect = stageOptions.canSelect(el);
       // 在组件联动过程中不能再往下选择，返回并触发 ui-select

packages/stage/src/ActionManager.ts

@@ -102,6 +102,7 @@ export default class ActionManager extends EventEmitter {
 
     this.dr = new StageDragResize({
       container: config.container,
+      disabledDragStart: config.disabledDragStart,
       getRootContainer: config.getRootContainer,
       getRenderDocument: config.getRenderDocument,
       updateDragEl: config.updateDragEl,

packages/stage/src/StageCore.ts

@@ -241,6 +241,7 @@ export default class StageCore extends EventEmitter {
       moveableOptions: config.moveableOptions,
       multiMoveableOptions: config.multiMoveableOptions,
       container: this.mask.content,
+      disabledDragStart: config.disabledDragStart,
       canSelect: config.canSelect,
       isContainer: config.isContainer,
       updateDragEl: config.updateDragEl,

packages/stage/src/StageDragResize.ts

@@ -38,6 +38,7 @@ export default class StageDragResize extends MoveableOptionsManager {
   /** 拖动状态 */
   private dragStatus: StageDragStatus = StageDragStatus.END;
   private dragResizeHelper: DragResizeHelper;
+  private disabledDragStart?: boolean;
   private getRenderDocument: GetRenderDocument;
   private markContainerEnd: MarkContainerEnd;
   private delayedMarkContainer: DelayedMarkContainer;
@@ -48,6 +49,7 @@ export default class StageDragResize extends MoveableOptionsManager {
     this.getRenderDocument = config.getRenderDocument;
     this.markContainerEnd = config.markContainerEnd;
     this.delayedMarkContainer = config.delayedMarkContainer;
+    this.disabledDragStart = config.disabledDragStart;
 
     this.dragResizeHelper = new DragResizeHelper({
       container: config.container,
@@ -75,7 +77,7 @@ export default class StageDragResize extends MoveableOptionsManager {
       this.updateMoveable(el);
     }
 
-    if (event) {
+    if (event && !this.disabledDragStart) {
       this.moveable?.dragStart(event);
     }
   }

packages/stage/src/types.ts

@@ -70,6 +70,7 @@ export interface StageCoreConfig {
   render?: (renderer: StageCore) => Promise<HTMLElement> | HTMLElement;
   autoScrollIntoView?: boolean;
   updateDragEl?: UpdateDragEl;
+  disabledDragStart?: boolean;
 }
 
 export interface ActionManagerConfig {
@@ -79,6 +80,7 @@ export interface ActionManagerConfig {
   containerHighlightType?: ContainerHighlightType;
   moveableOptions?: CustomizeMoveableOptions;
   multiMoveableOptions?: CustomizeMoveableOptions;
+  disabledDragStart?: boolean;
   canSelect?: CanSelect;
   isContainer: IsContainer;
   getRootContainer: GetRootContainer;
@@ -111,6 +113,7 @@ export interface StageMaskConfig {
 export interface StageDragResizeConfig {
   container: HTMLElement;
   moveableOptions?: CustomizeMoveableOptions;
+  disabledDragStart?: boolean;
   getRootContainer: GetRootContainer;
   getRenderDocument: GetRenderDocument;
   markContainerEnd: MarkContainerEnd;