@tmagic/editor 1.5.7 → 1.5.8

package/src/type.ts

@@ -321,9 +321,9 @@ export interface MenuButton {
   /** Vue组件或url */
   icon?: string | Component<{}, {}, any>;
   /** 是否置灰，默认为false */
-  disabled?: boolean | ((data?: Services) => boolean);
+  disabled?: boolean | ((data: Services) => boolean);
   /** 是否显示，默认为true */
-  display?: boolean | ((data?: Services) => boolean);
+  display?: boolean | ((data: Services) => boolean);
   /** type为button/dropdown时点击运行的方法 */
   handler?: (data: Services, event: MouseEvent) => Promise<any> | any;
   className?: string;
@@ -344,7 +344,7 @@ export interface MenuComponent {
   slots?: Record<string, any>;
   /** 是否显示，默认为true */
   className?: string;
-  display?: boolean | ((data?: Services) => Promise<boolean> | boolean);
+  display?: boolean | ((data: Services) => Promise<boolean> | boolean);
   [key: string]: any;
 }
 
@@ -473,9 +473,6 @@ export enum Keys {
   ESCAPE = 'Space',
 }
 
-export const H_GUIDE_LINE_STORAGE_KEY = '$MagicStageHorizontalGuidelinesData';
-export const V_GUIDE_LINE_STORAGE_KEY = '$MagicStageVerticalGuidelinesData';
-
 export interface ScrollViewerEvent {
   scrollLeft: number;
   scrollTop: number;
@@ -721,9 +718,6 @@ export enum DragType {
   LAYER_TREE = 'layer-tree',
 }
 
-/** 当uiService.get('uiSelectMode')为true,点击组件（包括任何形式，组件树/画布）时触发的事件名 */
-export const UI_SELECT_MODE_EVENT_NAME = 'ui-select';
-
 export interface TreeNodeData {
   id: Id;
   name?: string;

package/src/utils/const.ts

@@ -1,5 +1,16 @@
+/** 当uiService.get('uiSelectMode')为true,点击组件（包括任何形式，组件树/画布）时触发的事件名 */
+export const UI_SELECT_MODE_EVENT_NAME = 'ui-select';
+
 export const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
 export const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
+export const PROPS_PANEL_WIDTH_STORAGE_KEY = '$MagicEditorPropsPanelWidthData';
 
 export const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 export const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
+
+export const MIN_LEFT_COLUMN_WIDTH = 200;
+export const MIN_CENTER_COLUMN_WIDTH = 400;
+export const MIN_RIGHT_COLUMN_WIDTH = 300;
+
+export const H_GUIDE_LINE_STORAGE_KEY = '$MagicStageHorizontalGuidelinesData';
+export const V_GUIDE_LINE_STORAGE_KEY = '$MagicStageVerticalGuidelinesData';

package/src/utils/content-menu.ts

@@ -13,13 +13,13 @@ export const useDeleteMenu = (): MenuButton => ({
   type: 'button',
   text: '删除',
   icon: Delete,
-  display: (services) => {
-    const node = services?.editorService?.get('node');
+  display: ({ editorService }) => {
+    const node = editorService.get('node');
     return node?.type !== NodeType.ROOT && !isPage(node) && !isPageFragment(node);
   },
-  handler: (services) => {
-    const nodes = services?.editorService?.get('nodes');
-    nodes && services?.editorService?.remove(nodes);
+  handler: ({ editorService }) => {
+    const nodes = editorService.get('nodes');
+    nodes && editorService.remove(nodes);
   },
 });
 
@@ -27,9 +27,9 @@ export const useCopyMenu = (): MenuButton => ({
   type: 'button',
   text: '复制',
   icon: markRaw(CopyDocument),
-  handler: (services) => {
-    const nodes = services?.editorService?.get('nodes');
-    nodes && services?.editorService?.copy(nodes);
+  handler: ({ editorService }) => {
+    const nodes = editorService?.get('nodes');
+    nodes && editorService?.copy(nodes);
   },
 });
 
@@ -37,57 +37,55 @@ export const usePasteMenu = (menu?: ShallowRef<InstanceType<typeof ContentMenu>
   type: 'button',
   text: '粘贴',
   icon: markRaw(DocumentCopy),
-  display: (services) => !!services?.storageService?.getItem(COPY_STORAGE_KEY),
-  handler: (services) => {
-    const nodes = services?.editorService?.get('nodes');
+  display: ({ storageService }) => !!storageService.getItem(COPY_STORAGE_KEY),
+  handler: ({ editorService, uiService }) => {
+    const nodes = editorService?.get('nodes');
     if (!nodes || nodes.length === 0) return;
 
     if (menu?.value?.$el) {
-      const stage = services?.editorService?.get('stage');
+      const stage = editorService.get('stage');
       const rect = menu.value.$el.getBoundingClientRect();
       const parentRect = stage?.container?.getBoundingClientRect();
       const initialLeft =
         calcValueByFontsize(stage?.renderer?.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) /
-        services.uiService.get('zoom');
+        uiService.get('zoom');
       const initialTop =
         calcValueByFontsize(stage?.renderer?.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) /
-        services.uiService.get('zoom');
-      services?.editorService?.paste({ left: initialLeft, top: initialTop });
+        uiService.get('zoom');
+      editorService.paste({ left: initialLeft, top: initialTop });
     } else {
-      services?.editorService?.paste();
+      editorService.paste();
     }
   },
 });
 
-const moveTo = (id: Id, services?: Services) => {
-  if (!services?.editorService) return;
-
-  const nodes = services.editorService.get('nodes') || [];
-  const parent = services.editorService.getNodeById(id) as MContainer;
+const moveTo = (id: Id, { editorService }: Services) => {
+  const nodes = editorService.get('nodes') || [];
+  const parent = editorService.getNodeById(id) as MContainer;
 
   if (!parent) return;
 
-  services?.editorService.add(nodes, parent);
-  services?.editorService.remove(nodes);
+  editorService.add(nodes, parent);
+  editorService.remove(nodes);
 };
 
-export const useMoveToMenu = (services?: Services): MenuButton => {
-  const root = computed(() => services?.editorService?.get('root'));
+export const useMoveToMenu = ({ editorService }: Services): MenuButton => {
+  const root = computed(() => editorService.get('root'));
 
   return {
     type: 'button',
     text: '移动至',
-    display: (services) => {
-      const node = services?.editorService?.get('node');
-      const pageLength = services?.editorService?.get('pageLength') || 0;
+    display: ({ editorService }) => {
+      const node = editorService.get('node');
+      const pageLength = editorService.get('pageLength');
       return !isPage(node) && pageLength > 1;
     },
     items: (root.value?.items || [])
-      .filter((page) => page.id !== services?.editorService?.get('page')?.id)
+      .filter((page) => page.id !== editorService.get('page')?.id)
       .map((page) => ({
         text: `${page.name}(${page.id})`,
         type: 'button',
-        handler: (services?: Services) => {
+        handler: (services: Services) => {
           moveTo(page.id, services);
         },
       })),

package/src/utils/idle-task.ts

@@ -3,6 +3,7 @@ import { EventEmitter } from 'events';
 export interface IdleTaskEvents {
   finish: [];
   'hight-level-finish': [];
+  'update-task-length': [{ length: number; hightLevelLength: number }];
 }
 
 type TaskList<T> = {
@@ -55,6 +56,11 @@ export class IdleTask<T = any> extends EventEmitter {
     this.hightLevelTaskList = [];
     this.taskList = [];
     this.taskHandle = null;
+
+    this.emit('update-task-length', {
+      length: this.taskList.length + this.hightLevelTaskList.length,
+      hightLevelLength: this.hightLevelTaskList.length,
+    });
   }
 
   public on<Name extends keyof IdleTaskEvents, Param extends IdleTaskEvents[Name]>(
@@ -117,5 +123,10 @@ export class IdleTask<T = any> extends EventEmitter {
 
       this.emit('finish');
     }
+
+    this.emit('update-task-length', {
+      length: taskList.length + hightLevelTaskList.length,
+      hightLevelLength: hightLevelTaskList.length,
+    });
   }
 }

package/src/utils/index.ts

@@ -26,3 +26,4 @@ export * from './idle-task';
 export * from './scroll-viewer';
 export * from './tree';
 export * from './undo-redo';
+export * from './const';

package/types/index.d.ts

@@ -301,11 +301,14 @@ interface DepEvents {
 }
 interface State$1 {
     collecting: boolean;
+    taskLength: number;
 }
 type StateKey = keyof State$1;
 declare class Dep extends export_default {
     private state;
+    private idleTask;
     private watcher;
+    constructor();
     set<K extends StateKey, T extends State$1[K]>(name: K, value: T): void;
     get<K extends StateKey>(name: K): State$1[K];
     removeTargets(type?: string): void;
@@ -1049,9 +1052,9 @@ interface MenuButton {
     /** Vue组件或url */
     icon?: string | Component<{}, {}, any>;
     /** 是否置灰，默认为false */
-    disabled?: boolean | ((data?: Services) => boolean);
+    disabled?: boolean | ((data: Services) => boolean);
     /** 是否显示，默认为true */
-    display?: boolean | ((data?: Services) => boolean);
+    display?: boolean | ((data: Services) => boolean);
     /** type为button/dropdown时点击运行的方法 */
     handler?: (data: Services, event: MouseEvent) => Promise<any> | any;
     className?: string;
@@ -1071,7 +1074,7 @@ interface MenuComponent {
     slots?: Record<string, any>;
     /** 是否显示，默认为true */
     className?: string;
-    display?: boolean | ((data?: Services) => Promise<boolean> | boolean);
+    display?: boolean | ((data: Services) => Promise<boolean> | boolean);
     [key: string]: any;
 }
 /**
@@ -1173,8 +1176,6 @@ declare enum Layout {
 declare enum Keys {
     ESCAPE = "Space"
 }
-declare const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
-declare const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
 interface ScrollViewerEvent {
     scrollLeft: number;
     scrollTop: number;
@@ -1390,8 +1391,6 @@ declare enum DragType {
     /** 拖动组件树节点 */
     LAYER_TREE = "layer-tree"
 }
-/** 当uiService.get('uiSelectMode')为true,点击组件（包括任何形式，组件树/画布）时触发的事件名 */
-declare const UI_SELECT_MODE_EVENT_NAME = "ui-select";
 interface TreeNodeData {
     id: Id;
     name?: string;
@@ -2022,7 +2021,7 @@ type ChildConfig = FormItem | TabConfig | RowConfig | FieldsetConfig | PanelConf
 type FormConfig = ChildConfig[];
 type FormValue = Record<string | number, any>;
 
-declare const useCodeBlockEdit: (codeBlockService?: CodeBlockService) => {
+declare const useCodeBlockEdit: (codeBlockService: Services["codeBlockService"]) => {
     codeId: vue.Ref<string | undefined, string | undefined>;
     codeConfig: vue.Ref<CodeBlockContent | undefined, CodeBlockContent | undefined>;
     codeBlockEditor: Readonly<vue.ShallowRef<vue.CreateComponentPublicInstanceWithMixins<Readonly<{
@@ -3109,7 +3108,7 @@ declare const useGetSo: (target: ShallowRef<HTMLElement | null>, emit: (evt: "ch
     isDragging: vue.Ref<boolean, boolean>;
 };
 
-declare const useNextFloatBoxPosition: (uiService?: UiService, parent?: Ref<HTMLDivElement | null>) => {
+declare const useNextFloatBoxPosition: (uiService: Services["uiService"], parent?: Ref<HTMLDivElement | null>) => {
     boxPosition: Ref<{
         left: number;
         top: number;
@@ -3137,6 +3136,8 @@ declare const useNodeStatus: (nodeData: ComputedRef<TreeNodeData[]>) => {
     }> & Omit<Map<Id, LayerNodeStatus>, keyof Map<any, any>>)>;
 };
 
+declare const useServices: () => Services;
+
 declare const setEditorConfig: (option: EditorInstallOptions) => void;
 declare const getEditorConfig: <K extends keyof EditorInstallOptions>(key: K) => EditorInstallOptions[K];
 
@@ -3246,6 +3247,10 @@ declare const removeDataSourceFieldPrefix: (id?: string) => string;
 interface IdleTaskEvents {
     finish: [];
     'hight-level-finish': [];
+    'update-task-length': [{
+        length: number;
+        hightLevelLength: number;
+    }];
 }
 declare class IdleTask<T = any> extends EventEmitter {
     private taskList;
@@ -3298,6 +3303,19 @@ declare class ScrollViewer extends EventEmitter {
 
 declare const updateStatus: (nodeStatusMap: Map<Id, LayerNodeStatus>, id: Id, status: Partial<LayerNodeStatus>) => void;
 
+/** 当uiService.get('uiSelectMode')为true,点击组件（包括任何形式，组件树/画布）时触发的事件名 */
+declare const UI_SELECT_MODE_EVENT_NAME = "ui-select";
+declare const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
+declare const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
+declare const PROPS_PANEL_WIDTH_STORAGE_KEY = "$MagicEditorPropsPanelWidthData";
+declare const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+declare const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
+declare const MIN_LEFT_COLUMN_WIDTH = 200;
+declare const MIN_CENTER_COLUMN_WIDTH = 400;
+declare const MIN_RIGHT_COLUMN_WIDTH = 300;
+declare const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
+declare const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
+
 interface EditorProps {
     /** 页面初始值 */
     modelValue?: MApp;
@@ -13359,4 +13377,4 @@ declare const _default: {
     install: (app: App, opt?: Partial<EditorInstallOptions | DesignPluginOptions | FormInstallOptions>) => void;
 };
 
-export { type AddMNode, type AddPrefixToObject, type AsyncAfterHook, type AsyncBeforeHook, type AsyncHookPlugin, type BeforeAdd, CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _default$8 as CodeBlockEditor, _default$i as CodeBlockList, _default$h as CodeBlockListPanel, type CodeBlockListPanelSlots, type CodeBlockListSlots, CodeDeleteErrorType, type CodeDslItem, type CodeParamStatement, type CodeRelation, _default$t as CodeSelect, _default$s as CodeSelectCol, type CodeSelectColConfig, type CodeState, ColumnLayout, type CombineInfo, type ComponentGroup, type ComponentGroupState, type ComponentItem, _default$v as ComponentListPanel, type ComponentListPanelSlots, _default$2 as CondOpSelect, type CondOpSelectConfig, _default$c as ContentMenu, type CustomContentMenuFunction, _default$g as DataSourceConfigPanel, _default$l as DataSourceFieldSelect, type DataSourceFieldSelectConfig, _default$r as DataSourceFields, _default$o as DataSourceInput, type DataSourceListSlots, _default$m as DataSourceMethodSelect, type DataSourceMethodSelectConfig, _default$p as DataSourceMethods, _default$q as DataSourceMocks, _default$n as DataSourceSelect, type DatasourceTypeOption, _default$3 as DisplayConds, DragType, type EditorInstallOptions, type EditorNodeInfo, type EventBus, type EventBusEvent, _default$k as EventSelect, type EventSelectConfig, Fixed2Other, _default$7 as FloatingBox, type FrameworkSlots, type GetColumnWidth, type GetConfig, H_GUIDE_LINE_STORAGE_KEY, type HistoryState, _default$b as Icon, IdleTask, type IdleTaskEvents, type KeyBindingCacheItem, KeyBindingCommand, type KeyBindingItem, _default$j as KeyValue, Keys, type LayerNodeSlots, type LayerNodeStatus, LayerOffset, _default$u as LayerPanel, type LayerPanelSlots, Layout, _default$a as LayoutContainer, type ListState, type MenuBarData, type MenuButton, type MenuComponent, type MenuItem, type PageBarSortOptions, _default$4 as PageFragmentSelect, type PageFragmentSelectConfig, type PartSortableOptions, type PastePosition, type PropsFormConfigFunction, _default$e as PropsFormPanel, type PropsFormValueFunction, _default$f as PropsPanel, type PropsPanelSlots, type PropsState, _default$9 as Resizer, ScrollViewer, type ScrollViewerEvent, type Services, type SetColumnWidth, type SideBarData, type SideComponent, type SideItem, SideItemKey, type SidebarSlots, _default$a as SplitView, type StageOptions, type StageOverlayState, type StageRect, type StepValue, type StoreState, type StoreStateKey, _default$1 as StyleSetter, type SyncAfterHook, type SyncBeforeHook, type SyncHookPlugin, _default$w as TMagicCodeEditor, _default$x as TMagicEditor, _default$d as ToolButton, _default$6 as Tree, _default$5 as TreeNode, type TreeNodeData, UI_SELECT_MODE_EVENT_NAME, type UiState, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, type WorkspaceSlots, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, _default$H as codeBlockService, _default$G as dataSourceService, debug, _default as default, _default$F as depService, displayTabConfig, _default$E as editorService, eqOptions, error, eventTabConfig, _default$D as eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, _default$C as historyService, info, isIncludeDataSource, log, moveItemsInContainer, numberOptions, _default$B as propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, _default$A as stageOverlayService, _default$z as storageService, styleTabConfig, _default$y as uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus, useStage, useWindowRect, warn };
+export { type AddMNode, type AddPrefixToObject, type AsyncAfterHook, type AsyncBeforeHook, type AsyncHookPlugin, type BeforeAdd, CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _default$8 as CodeBlockEditor, _default$i as CodeBlockList, _default$h as CodeBlockListPanel, type CodeBlockListPanelSlots, type CodeBlockListSlots, CodeDeleteErrorType, type CodeDslItem, type CodeParamStatement, type CodeRelation, _default$t as CodeSelect, _default$s as CodeSelectCol, type CodeSelectColConfig, type CodeState, ColumnLayout, type CombineInfo, type ComponentGroup, type ComponentGroupState, type ComponentItem, _default$v as ComponentListPanel, type ComponentListPanelSlots, _default$2 as CondOpSelect, type CondOpSelectConfig, _default$c as ContentMenu, type CustomContentMenuFunction, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, _default$g as DataSourceConfigPanel, _default$l as DataSourceFieldSelect, type DataSourceFieldSelectConfig, _default$r as DataSourceFields, _default$o as DataSourceInput, type DataSourceListSlots, _default$m as DataSourceMethodSelect, type DataSourceMethodSelectConfig, _default$p as DataSourceMethods, _default$q as DataSourceMocks, _default$n as DataSourceSelect, type DatasourceTypeOption, _default$3 as DisplayConds, DragType, type EditorInstallOptions, type EditorNodeInfo, type EventBus, type EventBusEvent, _default$k as EventSelect, type EventSelectConfig, Fixed2Other, _default$7 as FloatingBox, type FrameworkSlots, type GetColumnWidth, type GetConfig, H_GUIDE_LINE_STORAGE_KEY, type HistoryState, _default$b as Icon, IdleTask, type IdleTaskEvents, type KeyBindingCacheItem, KeyBindingCommand, type KeyBindingItem, _default$j as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, type LayerNodeSlots, type LayerNodeStatus, LayerOffset, _default$u as LayerPanel, type LayerPanelSlots, Layout, _default$a as LayoutContainer, type ListState, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, type MenuBarData, type MenuButton, type MenuComponent, type MenuItem, PROPS_PANEL_WIDTH_STORAGE_KEY, type PageBarSortOptions, _default$4 as PageFragmentSelect, type PageFragmentSelectConfig, type PartSortableOptions, type PastePosition, type PropsFormConfigFunction, _default$e as PropsFormPanel, type PropsFormValueFunction, _default$f as PropsPanel, type PropsPanelSlots, type PropsState, RIGHT_COLUMN_WIDTH_STORAGE_KEY, _default$9 as Resizer, ScrollViewer, type ScrollViewerEvent, type Services, type SetColumnWidth, type SideBarData, type SideComponent, type SideItem, SideItemKey, type SidebarSlots, _default$a as SplitView, type StageOptions, type StageOverlayState, type StageRect, type StepValue, type StoreState, type StoreStateKey, _default$1 as StyleSetter, type SyncAfterHook, type SyncBeforeHook, type SyncHookPlugin, _default$w as TMagicCodeEditor, _default$x as TMagicEditor, _default$d as ToolButton, _default$6 as Tree, _default$5 as TreeNode, type TreeNodeData, UI_SELECT_MODE_EVENT_NAME, type UiState, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, type WorkspaceSlots, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, _default$H as codeBlockService, _default$G as dataSourceService, debug, _default as default, _default$F as depService, displayTabConfig, _default$E as editorService, eqOptions, error, eventTabConfig, _default$D as eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, _default$C as historyService, info, isIncludeDataSource, log, moveItemsInContainer, numberOptions, _default$B as propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, _default$A as stageOverlayService, _default$z as storageService, styleTabConfig, _default$y as uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, warn };