@tmagic/editor 1.3.11 → 1.3.13

package/src/theme/stage.scss

@@ -32,7 +32,7 @@
   top: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: #fff;
   display: flex;
   z-index: 20;
   overflow: auto;
@@ -42,11 +42,12 @@
   position: relative;
   flex-shrink: 0;
   margin: auto;
+  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
 }
 
 .m-editor-stage-overlay-close.tmagic-design-icon {
   position: fixed;
-  right: 10px;
+  right: 20px;
   top: 10px;
 }
 

package/src/type.ts

@@ -39,6 +39,7 @@ import type { EventsService } from './services/events';
 import type { HistoryService } from './services/history';
 import type { KeybindingService } from './services/keybinding';
 import type { PropsService } from './services/props';
+import type { StageOverlayService } from './services/stageOverlay';
 import type { StorageService } from './services/storage';
 import type { UiService } from './services/ui';
 import type { UndoRedo } from './utils/undo-redo';
@@ -118,22 +119,23 @@ export interface Services {
   depService: DepService;
   dataSourceService: DataSourceService;
   keybindingService: KeybindingService;
+  stageOverlayService: StageOverlayService;
 }
 
 export interface StageOptions {
-  runtimeUrl: string;
-  autoScrollIntoView: boolean;
-  containerHighlightClassName: string;
-  containerHighlightDuration: number;
-  containerHighlightType: ContainerHighlightType;
+  runtimeUrl?: string;
+  autoScrollIntoView?: boolean;
+  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>;
-  isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
-  updateDragEl: UpdateDragEl;
-  renderType: RenderType;
-  guidesOptions: Partial<GuidesOptions>;
+  render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
+  moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
+  canSelect?: (el: HTMLElement) => boolean | Promise<boolean>;
+  isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
+  updateDragEl?: UpdateDragEl;
+  renderType?: RenderType;
+  guidesOptions?: Partial<GuidesOptions>;
   disabledMultiSelect?: boolean;
 }
 
@@ -160,6 +162,17 @@ export interface PropsState {
   relateIdMap: Record<Id, Id>;
 }
 
+export interface StageOverlayState {
+  wrapDiv: HTMLDivElement;
+  sourceEl: HTMLElement | null;
+  contentEl: HTMLElement | null;
+  stage: StageCore | null;
+  stageOptions: StageOptions | null;
+  wrapWidth: number;
+  wrapHeight: number;
+  stageOverlayVisible: boolean;
+}
+
 export interface ComponentGroupState {
   list: ComponentGroup[];
 }

package/types/editorProps.d.ts

@@ -19,8 +19,6 @@ export interface EditorProps {
     layerContentMenu?: (MenuButton | MenuComponent)[];
     /** 画布右键菜单 */
     stageContentMenu?: (MenuButton | MenuComponent)[];
-    /** 中间工作区域中画布渲染的内容 */
-    render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
     /** 中间工作区域中画布通过iframe渲染时的页面url */
     runtimeUrl?: string;
     /** 是用iframe渲染还是直接渲染 */
@@ -48,18 +46,20 @@ export interface EditorProps {
     moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
     /** 编辑器初始化时默认选中的组件ID */
     defaultSelected?: Id;
-    canSelect?: (el: HTMLElement) => boolean | Promise<boolean>;
-    isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
+    /** 拖入画布中容器时，识别到容器后给容器根dom加上的class */
     containerHighlightClassName?: string;
+    /** 拖入画布中容器时，悬停识别容器的时间 */
     containerHighlightDuration?: number;
+    /** 拖入画布中容器时，识别容器的操作类型 */
     containerHighlightType?: ContainerHighlightType;
+    /** 画布大小 */
     stageRect?: StageRect;
+    /** monaco editor 的配置 */
     codeOptions?: {
         [key: string]: any;
     };
-    updateDragEl?: UpdateDragEl;
+    /** 禁用鼠标左键按下时就开始拖拽，需要先选中再可以拖拽 */
     disabledDragStart?: boolean;
-    extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
     /** 自定义依赖收集器，复制组件时会将关联依赖一并复制 */
     collectorOptions?: CustomTargetOptions;
     /** 标尺配置 */
@@ -68,9 +68,28 @@ export interface EditorProps {
     disabledMultiSelect?: boolean;
     /** 禁用页面片 */
     disabledPageFragment?: boolean;
+    /** 禁用双击在浮层中单独编辑选中组件 */
+    disabledStageOverlay?: boolean;
+    /** 中间工作区域中画布渲染的内容 */
+    render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
+    /** 选中时会在画布上复制出一个大小相同的dom，实际拖拽的是这个dom，此方法用于干预这个dom的生成方式 */
+    updateDragEl?: UpdateDragEl;
+    /** 用于设置画布上的dom是否可以被选中 */
+    canSelect?: (el: HTMLElement) => boolean | Promise<boolean>;
+    /** 用于设置画布上的dom是否可以被拖入其中 */
+    isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
+    /** 用于自定义组件树与画布的右键菜单 */
     customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
+    extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
 }
 export declare const defaultEditorProps: {
+    renderType: RenderType;
+    disabledMultiSelect: boolean;
+    disabledPageFragment: boolean;
+    disabledStageOverlay: boolean;
+    containerHighlightClassName: string;
+    containerHighlightDuration: number;
+    containerHighlightType: ContainerHighlightType;
     componentGroupList: () => never[];
     datasourceList: () => never[];
     menu: () => {
@@ -86,11 +105,5 @@ export declare const defaultEditorProps: {
     datasourceConfigs: () => {};
     canSelect: (el: HTMLElement) => boolean;
     isContainer: (el: HTMLElement) => boolean;
-    containerHighlightClassName: string;
-    containerHighlightDuration: number;
-    containerHighlightType: ContainerHighlightType;
     codeOptions: () => {};
-    renderType: RenderType;
-    disabledMultiSelect: boolean;
-    disabledPageFragment: boolean;
 };

package/types/index.d.ts

@@ -15,6 +15,7 @@ export { default as historyService } from './services/history';
 export { default as storageService } from './services/storage';
 export { default as eventsService } from './services/events';
 export { default as dataSourceService } from './services/dataSource';
+export { default as stageOverlayService } from './services/stageOverlay';
 export { default as uiService } from './services/ui';
 export { default as codeBlockService } from './services/codeBlock';
 export { default as depService } from './services/dep';

package/types/layouts/workspace/Workspace.vue.d.ts

@@ -1,11 +1,19 @@
 import type { MenuButton, MenuComponent, WorkspaceSlots } from '../../type';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     stageContentMenu: (MenuButton | MenuComponent)[];
+    disabledStageOverlay?: boolean | undefined;
     customContentMenu?: ((menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[]) | undefined;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+}>, {
+    disabledStageOverlay: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     stageContentMenu: (MenuButton | MenuComponent)[];
+    disabledStageOverlay?: boolean | undefined;
     customContentMenu?: ((menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[]) | undefined;
-}>>>, {}, {}>, Readonly<WorkspaceSlots>>;
+}>, {
+    disabledStageOverlay: boolean;
+}>>>, {
+    disabledStageOverlay: boolean;
+}, {}>, Readonly<WorkspaceSlots>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -16,6 +24,14 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

package/types/layouts/workspace/viewer/Stage.vue.d.ts

@@ -1,11 +1,19 @@
 import { type MenuButton, type MenuComponent } from '../../../type';
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     stageContentMenu: (MenuButton | MenuComponent)[];
+    disabledStageOverlay?: boolean | undefined;
     customContentMenu?: ((menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[]) | undefined;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+}>, {
+    disabledStageOverlay: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     stageContentMenu: (MenuButton | MenuComponent)[];
+    disabledStageOverlay?: boolean | undefined;
     customContentMenu?: ((menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[]) | undefined;
-}>>>, {}, {}>;
+}>, {
+    disabledStageOverlay: boolean;
+}>>>, {
+    disabledStageOverlay: boolean;
+}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -16,3 +24,11 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/types/services/editor.d.ts

@@ -1,7 +1,7 @@
 import type { Id, MContainer, MNode } from '@tmagic/schema';
+import BaseService from '../services/BaseService';
 import type { AddMNode, EditorNodeInfo, PastePosition, StepValue, StoreState, StoreStateKey } from '../type';
 import { LayerOffset, Layout } from '../type';
-import BaseService from './BaseService';
 declare class Editor extends BaseService {
     state: StoreState;
     private isHistoryStateChange;

package/types/services/stageOverlay.d.ts

@@ -0,0 +1,23 @@
+import StageCore from '@tmagic/stage';
+import BaseService from '../services/BaseService';
+import type { StageOptions, StageOverlayState } from '../type';
+declare class StageOverlay extends BaseService {
+    private state;
+    constructor();
+    get<K extends keyof StageOverlayState>(name: K): StageOverlayState[K];
+    set<K extends keyof StageOverlayState, T extends StageOverlayState[K]>(name: K, value: T): void;
+    openOverlay(el: HTMLElement | undefined | null): void;
+    closeOverlay(): void;
+    updateOverlay(): void;
+    createStage(stageOptions?: StageOptions): StageCore;
+    private createContentEl;
+    private copyDocumentElement;
+    private render;
+    private updateHandler;
+    private addHandler;
+    private removeHandler;
+    private updateSelectStatus;
+}
+export type StageOverlayService = StageOverlay;
+declare const _default: StageOverlay;
+export default _default;

package/types/type.d.ts

@@ -12,6 +12,7 @@ import type { EventsService } from './services/events';
 import type { HistoryService } from './services/history';
 import type { KeybindingService } from './services/keybinding';
 import type { PropsService } from './services/props';
+import type { StageOverlayService } from './services/stageOverlay';
 import type { StorageService } from './services/storage';
 import type { UiService } from './services/ui';
 import type { UndoRedo } from './utils/undo-redo';
@@ -95,21 +96,22 @@ export interface Services {
     depService: DepService;
     dataSourceService: DataSourceService;
     keybindingService: KeybindingService;
+    stageOverlayService: StageOverlayService;
 }
 export interface StageOptions {
-    runtimeUrl: string;
-    autoScrollIntoView: boolean;
-    containerHighlightClassName: string;
-    containerHighlightDuration: number;
-    containerHighlightType: ContainerHighlightType;
+    runtimeUrl?: string;
+    autoScrollIntoView?: boolean;
+    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>;
-    isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
-    updateDragEl: UpdateDragEl;
-    renderType: RenderType;
-    guidesOptions: Partial<GuidesOptions>;
+    render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
+    moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
+    canSelect?: (el: HTMLElement) => boolean | Promise<boolean>;
+    isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
+    updateDragEl?: UpdateDragEl;
+    renderType?: RenderType;
+    guidesOptions?: Partial<GuidesOptions>;
     disabledMultiSelect?: boolean;
 }
 export interface StoreState {
@@ -132,6 +134,16 @@ export interface PropsState {
     propsValueMap: Record<string, Partial<MNode>>;
     relateIdMap: Record<Id, Id>;
 }
+export interface StageOverlayState {
+    wrapDiv: HTMLDivElement;
+    sourceEl: HTMLElement | null;
+    contentEl: HTMLElement | null;
+    stage: StageCore | null;
+    stageOptions: StageOptions | null;
+    wrapWidth: number;
+    wrapHeight: number;
+    stageOverlayVisible: boolean;
+}
 export interface ComponentGroupState {
     list: ComponentGroup[];
 }

package/src/hooks/use-stage-overlay.ts

@@ -1,158 +0,0 @@
-import { computed, inject, nextTick, ref, watch } from 'vue';
-
-import type StageCore from '@tmagic/stage';
-
-import type { Services, StageOptions } from '@editor/type';
-
-import { useStage } from './use-stage';
-
-export const useStageOverlay = () => {
-  const services = inject<Services>('services');
-  const stageOptions = inject<StageOptions>('stageOptions');
-
-  const wrapWidth = ref(0);
-  const wrapHeight = ref(0);
-  const stageOverlayVisible = ref(false);
-  const stageOverlay = ref<HTMLDivElement>();
-
-  const stage = computed(() => services?.editorService.get('stage'));
-
-  let subStage: StageCore | null = null;
-
-  const div = document.createElement('div');
-  let selectEl: HTMLElement | null = null;
-
-  const render = () => {
-    if (!selectEl) return;
-
-    const content = selectEl.cloneNode(true) as HTMLElement;
-    content.style.position = 'static';
-    Array.from(div.children).forEach((element) => {
-      element.remove();
-    });
-    div.appendChild(content);
-
-    subStage?.renderer.contentWindow?.magic.onPageElUpdate(div);
-
-    subStage?.select(content);
-  };
-
-  const copyDocumentElement = () => {
-    const doc = subStage?.renderer.getDocument();
-    const documentElement = stage.value?.renderer.getDocument()?.documentElement;
-
-    if (doc && documentElement) {
-      doc.replaceChild(documentElement.cloneNode(true), doc.documentElement);
-    }
-  };
-
-  const updateOverlay = () => {
-    if (!selectEl) return;
-
-    const { scrollWidth, scrollHeight } = selectEl;
-
-    stageOverlay.value!.style.width = `${scrollWidth}px`;
-    stageOverlay.value!.style.height = `${scrollHeight}px`;
-
-    wrapWidth.value = scrollWidth;
-    wrapHeight.value = scrollHeight;
-  };
-
-  const updateHandler = () => {
-    render();
-    updateOverlay();
-  };
-
-  const addHandler = () => {
-    render();
-    updateOverlay();
-  };
-
-  const removeHandler = () => {
-    render();
-    updateOverlay();
-  };
-
-  const openOverlay = async (el: HTMLElement) => {
-    selectEl = el;
-
-    stageOverlayVisible.value = true;
-
-    if (!stageOverlay.value) {
-      await nextTick();
-    }
-
-    if (!stageOptions) {
-      return;
-    }
-
-    subStage = useStage({
-      ...stageOptions,
-      runtimeUrl: '',
-      autoScrollIntoView: false,
-      render(stage: StageCore) {
-        copyDocumentElement();
-
-        const rootEl = stage.renderer.getDocument()?.getElementById('app');
-        if (rootEl) {
-          rootEl.remove();
-        }
-
-        div.style.cssText = `
-          width: ${el.scrollWidth}px;
-          height: ${el.scrollHeight}px;
-          background-color: #fff;
-        `;
-
-        render();
-
-        return div;
-      },
-    });
-    subStage.mount(stageOverlay.value!);
-
-    const { mask, renderer } = subStage;
-
-    const { contentWindow } = renderer;
-    mask.showRule(false);
-
-    updateOverlay();
-
-    contentWindow?.magic.onRuntimeReady({});
-
-    services?.editorService.on('update', updateHandler);
-    services?.editorService.on('add', addHandler);
-    services?.editorService.on('remove', removeHandler);
-  };
-
-  const closeOverlay = () => {
-    stageOverlayVisible.value = false;
-    subStage?.destroy();
-    subStage = null;
-
-    services?.editorService.off('update', updateHandler);
-    services?.editorService.off('add', addHandler);
-    services?.editorService.off('remove', removeHandler);
-  };
-
-  watch(stage, (stage) => {
-    if (stage) {
-      stage.on('dblclick', async (event: MouseEvent) => {
-        const el = await stage.actionManager.getElementFromPoint(event);
-        if (el) {
-          openOverlay(el);
-        }
-      });
-    } else if (subStage) {
-      closeOverlay();
-    }
-  });
-
-  return {
-    wrapWidth,
-    wrapHeight,
-    stageOverlayVisible,
-    stageOverlay,
-    closeOverlay,
-  };
-};

package/types/hooks/use-stage-overlay.d.ts

@@ -1,7 +0,0 @@
-export declare const useStageOverlay: () => {
-    wrapWidth: import("vue").Ref<number>;
-    wrapHeight: import("vue").Ref<number>;
-    stageOverlayVisible: import("vue").Ref<boolean>;
-    stageOverlay: import("vue").Ref<HTMLDivElement | undefined>;
-    closeOverlay: () => void;
-};